.symmetry-lab{padding:24px;margin:24px 0;background:#f0f5fc;border:1px solid #cbd7eb;border-radius:20px}.symmetry-tools{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:18px 0}.symmetry-tools select{display:block;padding:12px;font:inherit;max-width:100%;margin-top:8px}.symmetry-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative;width:100%;max-width:576px;gap:0;margin:24px auto;isolation:isolate}.symmetry-grid button{padding:0;min-width:0;min-height:0;aspect-ratio:1;border:1px solid #9daeca;border-radius:0;display:grid;place-items:center;font-size:22px;background:#fff;box-shadow:none}.symmetry-grid button.source{background:#e9effa}.symmetry-grid button.source.filled{background:#415bb4;color:white}.symmetry-grid button.answer.filled{background:#a95723;color:white}.symmetry-grid button:focus-visible{outline:3px solid #172443;outline-offset:-4px;z-index:3}.symmetry-axis{position:absolute;pointer-events:none;z-index:2}.symmetry-grid.vertical .symmetry-axis{top:-10px;bottom:-10px;left:50%;border-left:4px dashed #26334c;transform:translateX(-2px)}.symmetry-grid.horizontal .symmetry-axis{left:-10px;right:-10px;top:50%;border-top:4px dashed #26334c;transform:translateY(-2px)}.symmetry-legend{display:flex;flex-wrap:wrap;gap:16px}.symmetry-lab textarea{display:block;width:100%;font:inherit;padding:12px;min-height:100px;margin:12px 0}.symmetry-lab>small{display:block}#symmetryFeedback{padding:16px;background:white;border-left:4px solid #415bb4}@media(max-width:450px){.symmetry-lab{padding:14px}.symmetry-tools label{min-width:0;width:100%}.symmetry-grid button{font-size:16px}.symmetry-legend{font-size:16px}}