:root{color-scheme:light;--paper:#f4f1ea;--card:#fffdf8;--ink:#26221f;--muted:#70675d;--line:#d9d1c3;--accent:#6842db;font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 0%,#fffdf8,transparent 70%);min-width:300px}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:11px;min-height:44px;padding:8px 14px}button{cursor:pointer;font-weight:650;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--accent);background:#eee9ff}button:disabled,select:disabled{opacity:.4;cursor:default}.primary{background:var(--ink);color:white;border-color:var(--ink)}button.primary:hover:not(:disabled){background:var(--accent);color:#fff}a{color:inherit}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}
.masthead,main,footer{max-width:1120px;margin:auto}.masthead{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 12px;gap:12px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}h1{font-size:clamp(23px,3vw,32px);margin:2px 0 0;letter-spacing:-.035em}nav{display:flex;background:#e9e3d7;padding:4px;border-radius:12px;gap:3px}nav a{min-height:40px;display:flex;align-items:center;padding:8px 14px;text-decoration:none;font-weight:650;border-radius:9px;font-size:14px}nav a[aria-current]{background:var(--card);box-shadow:0 2px 6px #26221f14}
main{padding:0 28px}.welcome{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding:22px 0 10px}h2{font-size:22px;letter-spacing:-.025em;margin:0 0 7px}p{line-height:1.45;margin:0}.welcome p{max-width:400px;color:var(--muted)}.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}.menu-actions label{grid-column:1/-1;font-size:12px;font-weight:750}.menu-actions select{grid-column:1/-1}.menu-actions #best{font-size:12px;grid-column:1/-1;min-height:18px}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line);gap:8px}.clock{display:flex;align-items:baseline;gap:14px;font-variant-numeric:tabular-nums}#timer{font-size:28px;font-weight:750}#turns{font-size:13px;color:var(--muted)}.toolbar-buttons{display:flex;gap:6px}.coach{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #d6caed;background:#f0ebfa;border-radius:14px;padding:14px 18px;margin:8px 0}.coach h2{font-size:18px;margin:3px 0 4px}.coach p{font-size:14px;max-width:610px}.coach #hint:empty{display:none}#hint{font-weight:700;margin-top:6px}#coachActions{flex-shrink:0;display:flex;gap:6px;flex-wrap:wrap}.status{min-height:24px;text-align:center;font-size:13px;color:var(--muted);margin:6px 0}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}.solid-panel{min-width:0;position:relative}canvas{display:block;width:100%;height:390px;touch-action:none}.view-tools{display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;color:var(--muted)}.view-tools button{border:0;background:transparent;font-size:12px;text-decoration:underline;padding:6px}.face-status{text-align:center;font-size:12px;color:var(--muted);margin-top:2px}.rings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ring-card{border:1px solid var(--line);border-radius:18px;background:#fffdf870;padding:6px;transition:border-color .15s,background .15s}.ring-card.selected{border-color:var(--accent);background:#fffdf8;box-shadow:0 0 0 1px var(--accent)}.ring{display:block;width:100%;max-height:174px;touch-action:none;user-select:none;cursor:grab}.ring:active{cursor:grabbing}.ring-card .turn-buttons{display:flex;gap:6px;justify-content:center}.turn-buttons button{flex:1;font-size:22px;line-height:1;padding:5px;max-width:76px;background:transparent}.ring-note{text-align:center;font-size:12px;color:var(--muted);margin:12px auto 0;max-width:360px}.ring text{pointer-events:none}details{border-top:1px solid var(--line);margin:20px 0 0;padding:12px 0;font-size:13px;color:var(--muted)}summary{cursor:pointer;min-height:32px}details p{max-width:630px}details h3{font-size:13px;margin:10px 0 4px}details ol{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}details li{background:#e9e3d7;border-radius:5px;padding:4px 6px;font-size:12px}
footer{display:flex;justify-content:space-between;gap:12px;padding:20px 28px;font-size:11px;color:var(--muted)}footer a{min-height:40px;display:flex;align-items:center;font-size:13px}footer span{align-self:center}dialog{border:1px solid var(--line);border-radius:20px;background:var(--card);padding:28px;max-width:min(430px,calc(100vw - 28px));color:var(--ink);box-shadow:0 20px 80px #26221f30}dialog::backdrop{background:#26221f50;backdrop-filter:blur(3px)}dialog h2{margin-top:8px}dialog p{color:var(--muted)}.dialog-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.result-time{font-size:46px!important;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink)!important;margin:12px 0}#resultBest{margin-top:12px;font-weight:650;color:var(--accent)}
@media(max-width:660px){.masthead{padding:12px 14px 8px}main{padding:0 14px}nav a{padding:7px 10px;font-size:13px}.eyebrow{font-size:10px}.welcome{grid-template-columns:1fr;gap:14px;padding-top:16px}.welcome h2{font-size:20px}.welcome p{font-size:14px}.play-layout{grid-template-columns:1fr;gap:10px}canvas{height:210px}.rings{max-width:390px;margin:auto;gap:8px}.ring{max-height:140px}.ring-card{padding:3px 5px 5px;border-radius:14px}.turn-buttons button{min-height:36px}.view-tools{margin-top:-9px}.face-status{margin-top:-4px}.toolbar-buttons button{padding:7px 10px;font-size:13px}#timer{font-size:23px}.clock{gap:6px;flex-direction:column}.clock #turns{font-size:11px}.coach{padding:10px 12px;align-items:start;gap:8px;flex-direction:column}.coach p{font-size:13px}.coach h2{font-size:16px}#coachActions{align-self:flex-end}.status{font-size:12px;margin:4px 0}.ring-note{margin-top:8px}footer{padding:12px 14px;flex-wrap:wrap}footer span{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Third variant stays reachable on narrow screens. */
@media(max-width:660px){.masthead{flex-wrap:wrap}.masthead nav{width:100%;justify-content:center}}

/* Outside the busy/inert play area so load failures are announced. */
.startup-error {max-width:74rem;margin:1rem auto;padding:1rem 1.25rem;border:2px solid currentColor;border-radius:1rem;background:#fff8e6;color:#29221b;}
.startup-error p {margin:0 0 .75rem;}
.startup-error[hidden] {display:none;}

/* Keep the seven layer controls square and the selected solid in view. */
.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}.solid-panel{position:sticky;top:0}.solid-panel>canvas{height:440px}.rings{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}.ring-card{grid-column:span 4}.ring-card:nth-child(n+4){grid-column:span 6}.ring{width:min(100%,156px);height:auto;aspect-ratio:1;max-height:none;margin:auto}.turn-buttons button{min-height:44px}.ring-note{max-width:420px}
@media(max-width:660px){.play-layout{display:block}.solid-panel{z-index:2;background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:6px}.solid-panel>canvas{height:220px}.rings-panel{margin-top:10px}.rings{grid-template-columns:repeat(2,minmax(0,1fr));max-width:390px}.ring-card,.ring-card:nth-child(n+4){grid-column:span 1}.ring-card:nth-child(3){grid-column:1/-1;width:calc(50% - 4px);justify-self:center}.ring{width:min(100%,140px);scroll-margin-top:290px;scroll-margin-bottom:50px}}