:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;--ink:#29243d;--muted:#635d73;--line:#bab4c9;--paper:#fffdfb;--ground:#f7f5fc;--accent:#59408b;--focus:#973555;color:var(--ink);background:var(--ground)}*{box-sizing:border-box}body{margin:0}a{color:var(--accent);text-underline-offset:4px}a:hover{color:var(--focus)}button,input,select{font:inherit;color:inherit}button,select{min-height:44px;border:1px solid var(--line);border-radius:9px;padding:.6rem .85rem;background:var(--paper)}button{min-width:44px;font-weight:650;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);background:#eee8f8}button:disabled{opacity:.55;cursor:default}.primary{background:var(--accent);color:white;border-color:var(--accent)}.primary:hover:not(:disabled){background:#44316b;color:white}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}header,main,footer{width:min(100% - 40px,1000px);margin-inline:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 0}.brand{display:flex;align-items:center;gap:9px;font-size:1.3rem;font-weight:780;letter-spacing:-.035em;text-decoration:none;color:var(--ink)}.brand svg{width:32px;height:32px}.skip{position:absolute;top:-90px;left:14px;padding:12px;background:var(--paper);z-index:10}.skip:focus{top:10px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0}h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.04em;margin:0}h2{font-size:1.35rem}p{line-height:1.6}.modes{display:flex;gap:4px;flex:none}.modes button{border-color:transparent;background:transparent}.modes [aria-pressed=true]{background:var(--ink);color:white}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 26px;font-size:.85rem}.toolbar label{display:flex;gap:10px;align-items:center}.round-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.round-heading h2{font-size:1rem;margin:0}#aid-status{font-size:.8rem;color:var(--muted)}.studio{display:grid;grid-template-columns:1.08fr 1fr;gap:40px;align-items:start}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sample{min-width:0;text-align:center}.sample h3{font-size:.93rem;font-weight:650;margin:0 0 14px}.swatch{aspect-ratio:1;border-radius:50%;border:6px solid var(--paper);outline:1px solid #8e879e;box-shadow:0 8px 18px #29243d15}.values{font-variant-numeric:tabular-nums;font-size:.78rem;line-height:1.65;color:var(--muted);min-height:42px;margin:18px 0 0;overflow-wrap:anywhere}#reveal{font-size:.8rem;margin:15px 0 0;padding:.5rem .65rem;max-width:100%}#fixed-values{font-size:.82rem;color:var(--muted);margin:0 0 14px}.control{margin:0 0 16px}.control-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.control-top>label{font-size:.88rem;font-weight:650}.number-controls{display:flex;gap:5px;align-items:center}.number-controls button{width:44px;padding:0;font-size:1.3rem}.number-controls input{width:58px;min-width:0;height:44px;padding:8px 4px;text-align:center;border:1px solid var(--line);border-radius:7px;background:var(--paper);font-variant-numeric:tabular-nums}.number-controls input[aria-invalid=true]{border:2px solid var(--focus)}.number-controls span{font-size:.8rem;width:12px}.range{display:block;appearance:none;-webkit-appearance:none;width:100%;height:44px;margin:9px 0 0;background:transparent;border:0;border-radius:12px;--track:linear-gradient(to right,#ef3030,#dfce20,#34a530,#25c6c6,#4c4cd2,#c237c2,#ef3030);cursor:pointer}.range::-webkit-slider-runnable-track{height:13px;border-radius:10px;background:var(--track);outline:1px solid #80758f}.range::-webkit-slider-thumb{-webkit-appearance:none;width:27px;height:27px;margin-top:-7px;background:var(--paper);border:3px solid var(--ink);border-radius:50%}.range::-moz-range-track{height:13px;border-radius:10px;background:var(--track);outline:1px solid #80758f}.range::-moz-range-thumb{width:22px;height:22px;background:var(--paper);border:3px solid var(--ink);border-radius:50%}.submit-row{display:flex;gap:8px;margin-top:10px}.submit-row .primary{flex:1}.hint{margin-top:16px;border-left:3px solid var(--accent);padding-left:14px;font-size:.88rem}.hint p{margin:0 0 8px}#input-error{font-size:.85rem;color:#8d2345}.session-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.session-actions #new-practice{margin-left:auto}.feedback{font-size:.86rem;color:var(--muted);margin:14px 0}.feedback:empty{margin:0}.result{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 0 0}.result p{font-size:1.4rem;font-variant-numeric:tabular-nums;font-weight:700;margin:0}.complete{max-width:680px;margin:30px auto}.complete h2{font-size:1.8rem;margin:0}.complete>p{font-size:1.03rem}table{width:100%;border-collapse:collapse;margin:20px 0 25px;font-size:.88rem}caption{text-align:left;font-weight:650;margin-bottom:10px}th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}th{font-size:.8rem;color:var(--muted)}.table-scroll{max-width:100%;overflow-x:auto}.brief{border-top:1px solid var(--line);padding-top:20px;margin-top:32px;max-width:780px}.brief h2{margin:0}.brief p{font-size:.9rem;margin:11px 0}.collection{max-width:780px;color:var(--muted);font-size:.82rem}.notice{padding:15px 17px;background:#fff1da;border:1px solid #9c772f;border-left:4px solid #9c772f;margin:0 0 20px;font-size:.9rem}.notice p{margin:0 0 10px}.notice details{margin-top:12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem}footer{display:flex;gap:22px;padding:25px 0 35px;border-top:1px solid var(--line);margin-top:30px;font-size:.85rem}[hidden]{display:none!important}dialog{max-width:min(450px,calc(100vw - 32px));border:1px solid var(--line);border-radius:13px;padding:24px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#29243db0}dialog h2{margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.dialog-actions button:last-child{background:var(--accent);color:white}.guide{max-width:750px}.guide h1{margin:26px 0}.guide h2{margin:28px 0 10px}.guide li{line-height:1.65;margin:10px 0}.guide code{font-size:.92em;overflow-wrap:anywhere}.formula{padding:15px 18px;background:#eee8f8;border-left:3px solid var(--accent);line-height:1.7}.play-link{display:inline-flex;align-items:center;min-height:44px;border-radius:9px;padding:10px 18px;color:white;background:var(--accent);text-decoration:none}.play-link:hover{background:#44316b;color:white}@media(max-width:720px){header,main,footer{width:calc(100% - 32px)}header{padding:18px 0}.heading{display:block;margin:20px 0}.modes{margin-top:16px}.toolbar{flex-wrap:wrap;gap:10px;margin-bottom:21px}.toolbar label{width:100%}.toolbar select{flex:1}.studio{grid-template-columns:1fr;gap:24px}.comparison{max-width:460px;width:100%;margin-inline:auto;gap:12px}.swatch{border-width:4px}.values{font-size:.74rem}#mixer{max-width:460px;width:100%;margin-inline:auto}.control-top{gap:6px}.number-controls{gap:4px}.number-controls input{width:53px}.result{align-items:stretch;flex-direction:column}.result p{text-align:center}.session-actions #new-practice{margin-left:0}.complete{margin:20px 0}.complete h2{font-size:1.5rem}th,td{padding:10px 5px;font-size:.78rem}footer{gap:16px}.guide h1{font-size:1.85rem}}@media(forced-colors:active){.swatch{forced-color-adjust:none;border-color:#fff;outline-color:#29243d}.range::-webkit-slider-runnable-track{background:Canvas;border:1px solid CanvasText}.range::-webkit-slider-thumb{background:Canvas;border-color:CanvasText}.range::-moz-range-track{background:Canvas}.range::-moz-range-thumb{background:Canvas;border-color:CanvasText}}@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s ease}}