:root{font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif;color:#213b2d;background:#f6f7f0;line-height:1.6}*{box-sizing:border-box}body{margin:0}header,footer{padding:1rem max(1.25rem,calc((100% - 1100px)/2));display:flex;justify-content:space-between;gap:1rem}header{border-bottom:1px solid #cad6c9}a{color:#244c36}main{max-width:1100px;margin:auto;padding:3rem 1.25rem}h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.17;margin:.3rem 0 1rem}h2{margin-top:0;font-size:1.4rem}p{margin:.7rem 0}.eyebrow{color:#48634f;font-weight:700}.lead{font-size:1.2rem}.hero,.layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.hero svg{width:100%;max-width:400px}.heading{display:flex;justify-content:space-between;align-items:start;gap:1rem}.card{background:#fff;border:1px solid #c6d2c4;border-radius:18px;padding:1.5rem}.result{max-width:700px;margin:auto}button,summary{font:inherit}button{min-height:48px;min-width:48px;border:1px solid #506d58;border-radius:10px;color:#213b2d;background:white;padding:.65rem .9rem;font-weight:700;cursor:pointer}button:hover{background:#eaf1e8}button.primary{background:#305b40;color:#fff;border-color:#305b40}button.primary:hover{background:#204932}button:disabled{opacity:.65;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #a54e20;outline-offset:3px}.sequence,.actions{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0}.token{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:68px}.token[aria-pressed=true]{background:#dfedda;box-shadow:inset 0 0 0 2px #305b40}.shape{display:block;width:18px;height:18px;background:#4b6e55}.shape-a{border-radius:50%}.shape-b{clip-path:polygon(50% 0,100% 100%,0 100%);background:#9a4e27}.shape-c{border-radius:2px;background:#52698a}.shape-x,.shape-y{background:#fff;border:3px solid #765432}.shape-x{border-radius:50%;border-style:dashed}.shape-y{transform:rotate(45deg)}.cost,.preview{background:#eff4ed;border-radius:12px;padding:1rem}.preview{border:1px solid #a5bba6}details{border-top:1px solid #cad6c9;margin-top:1rem;padding-top:1rem}summary{min-height:44px;font-weight:700;cursor:pointer}dialog{max-width:min(32rem,calc(100% - 2rem));border:1px solid #78937d;border-radius:18px;padding:1.5rem;color:#213b2d}dialog::backdrop{background:#142d1eb3}[hidden]{display:none!important}footer{color:#435b49;font-size:.9rem}@media(max-width:700px){main{padding-top:2rem}.hero,.layout{grid-template-columns:1fr}.hero svg{max-width:260px;grid-row:1}.heading{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sound-controls{border-top:1px solid #cad6c9;margin-top:1rem;padding-top:1rem}.sound-controls label{min-height:48px;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.sound-controls input{width:22px;height:22px;accent-color:#305b40}.sound-controls input:focus-visible{outline:3px solid #a54e20;outline-offset:3px}

.shape-z{background:#fff;border:3px double #765432;border-radius:30%}