:root{color-scheme:dark;--bg:#091821;--panel:#122936;--panel2:#193643;--line:#385666;--text:#e9f4f6;--muted:#afc5cf;--mint:#9debe0;--focus:#ffd27b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 0,#153a48 0,#091821 45%);color:var(--text);font:1.0rem/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid #64899b;border-radius:9px;background:#1b3c4c;color:var(--text);min-height:44px;padding:9px 15px}button:hover:not(:disabled){background:#285469}button:disabled{opacity:.55;cursor:default}button.primary,.lab-link{background:var(--mint);color:#08202a;border-color:var(--mint);font-weight:700}a{color:var(--mint)}a:hover{color:#fff}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.skip{position:absolute;left:1rem;top:-5rem;background:#fff;color:#123;padding:8px;z-index:9}.skip:focus{top:.4rem}.top{display:flex;align-items:center;justify-content:space-between;padding:13px max(18px,calc((100vw - 1380px)/2));border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:1.25rem;font-weight:750;text-decoration:none}.brand b{color:var(--mint)}.top nav{display:flex;gap:24px}.top nav a{text-decoration:none;color:var(--muted)}main{max-width:1400px;margin:auto;padding:30px 20px 70px}.heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}.eyebrow,.kicker{color:var(--mint);font-size:0.75rem;letter-spacing:.14em;font-weight:700;margin:0 0 8px}h1{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.035em;margin:0 0 12px}h2,h3,p{margin-top:0}.intro{color:var(--muted);max-width:630px;font-size:1.125rem;margin:0}.round-count{white-space:nowrap;color:var(--mint);border:1px solid var(--line);padding:9px 14px;border-radius:999px}.status-row{display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid var(--line);border-radius:12px 12px 0 0;background:#18343e;padding:12px 18px}.status-row>span:first-child{font-weight:700}.status{color:var(--muted);font-size:0.875rem;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:18px}.images,.play-panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:0 0 14px 14px}.images{padding:17px}.image-top,.probe-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.image-top h2{font-size:1.25rem;margin:0 0 10px}.image-top span,.probe-top span{font-size:0.75rem;color:var(--muted);letter-spacing:.06em}.image-wrap{background:#09131e;border:1px solid #405967;border-radius:10px;padding:10px;max-width:750px;margin:auto}.image-wrap canvas{display:block;aspect-ratio:1;width:min(100%,600px);height:auto;margin:auto;background:#0e1930}.line-progress{display:flex;justify-content:space-between;margin-top:7px;color:var(--muted);font-size:0.8125rem}.probe{background:#0d202a;border:1px solid var(--line);border-radius:10px;margin-top:14px;padding:12px}.probe canvas{width:100%;height:auto;max-height:126px;display:block}.compare{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}.compare h3{font-size:1.0625rem;margin:0}.compare p{font-size:0.875rem;color:var(--muted)}.compare-images{display:flex;gap:15px}.compare figure{margin:0;max-width:160px;flex:1}.compare canvas{width:100%;height:auto;border:1px solid var(--line)}.compare figcaption{color:var(--muted);font-size:0.8125rem}.play-panel{padding:22px;align-self:start}.play-panel h2{font-size:1.5625rem;line-height:1.2;margin:0 0 9px}.task-description,.control-explain{color:var(--muted)}.controls{display:grid;gap:18px;margin:22px 0}.range-control{display:grid;gap:8px}.range-control>span{display:flex;justify-content:space-between;gap:10px}.range-control output{font-size:0.875rem;color:var(--mint);text-align:right}.range-control input{width:100%;accent-color:var(--mint);cursor:pointer}.range-control small{display:flex;justify-content:space-between;color:var(--muted);font-size:0.8125rem}.control-explain{font-size:0.875rem;margin:0}.terms summary,.about summary{cursor:pointer;color:var(--mint)}.terms p{font-size:0.875rem;color:var(--muted);margin:8px 0}.scan-actions,.response-actions{display:flex;flex-wrap:wrap;gap:9px}.scan-actions button,.response-actions button{flex:1}.playback{display:flex;align-items:center;gap:8px;font-size:0.875rem;margin:12px 0 20px}.playback input{accent-color:var(--mint);width:20px;height:20px}.playback small{color:var(--muted)}.response-box{border-top:1px solid var(--line);padding-top:16px}.response-box p{min-height:46px;color:var(--text)}#example{margin-top:10px}.answer,.question,.reveal{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.answer h3,.question h3,.reveal h3{font-size:1.125rem}.answer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.answer-options button{padding-inline:6px}.reveal canvas{width:145px;height:145px;border:1px solid var(--line);display:block}.reveal p{margin:12px 0;color:var(--muted)}.reveal button{margin:0 8px 8px 0}.after{display:flex;justify-content:space-between;gap:40px;border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:24px}.after h2{margin:0 0 8px}.after p{color:var(--muted);max-width:650px}.lab-link{display:inline-block;border-radius:8px;padding:10px 14px;text-decoration:none}.about{margin-top:20px;color:var(--muted)}.about summary{font-size:1rem}.about p{max-width:750px;margin:10px 0}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:20px;max-width:1400px;margin:auto;color:var(--muted)}[hidden]{display:none!important}@media(max-width:900px){.workspace{grid-template-columns:1fr}.images,.play-panel{border-radius:10px}.status-row{border-radius:10px;margin-bottom:12px}.play-panel{padding:18px}.heading{align-items:start}}@media(max-width:600px){main{padding:18px 12px 50px}.heading,.status-row,.after{display:block}.round-count{display:inline-block;margin-top:15px}.status{display:block;text-align:left;margin-top:6px}.top{padding:10px 12px}.top nav{gap:12px;font-size:0.875rem}.image-top{display:block}.image-top span{display:block;margin-bottom:7px}.images{padding:10px}.image-wrap{padding:6px}.probe-top{display:block}.probe-top span{display:block}.play-panel h2{font-size:1.4375rem}.after{padding:18px}.after>div+div{margin-top:22px}.answer-options{grid-template-columns:1fr}footer{display:block}footer>*{display:block;margin-bottom:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.free-play{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:20px;margin-top:18px}.free-play label{display:inline-flex;align-items:center;gap:8px;margin-right:18px}.free-play input{width:20px;height:20px;accent-color:var(--mint)}.free-play h2{margin-bottom:5px}.free-play p{color:var(--muted)}

.history{color:var(--muted);font-size:0.875rem;margin:0 0 10px}.compare-images{flex-wrap:wrap}@media(max-width:600px){.workspace{display:grid;grid-template-columns:minmax(0,1fr)}.images{display:contents}.image-top{order:0;background:var(--panel);padding:12px 12px 4px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}.image-wrap{order:1;position:sticky;top:0;z-index:4;width:100%;max-width:none;margin:0;background:#09131e;border-radius:0 0 10px 10px}.image-wrap canvas{width:min(100%,38dvh,320px)}.probe{order:2;margin:0}.play-panel{order:3}.compare{order:4;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0}.compare figure{max-width:140px}.status-row{margin-bottom:0}}
/* Keep the primary puzzle loop visible on a standard desktop without reducing tap targets on phones. */
@media(min-width:901px){
 main{padding-top:16px}
 .heading{align-items:center;margin-bottom:12px}
 .heading h1{font-size:clamp(32px,3vw,42px);margin-bottom:5px}
 .heading .intro{font-size:0.875rem;max-width:900px}
 .round-count{font-size:0.8125rem;padding:7px 11px}
 .history{font-size:0.75rem;margin-bottom:5px}
 .status-row{padding:8px 14px}
 .workspace{grid-template-columns:minmax(0,1.5fr) minmax(355px,1fr);gap:12px}
 .images{padding:12px}
 .image-top h2{font-size:1.0625rem;margin-bottom:5px}
 .image-wrap canvas{width:min(100%,clamp(270px,calc(100svh - 350px),450px))}
 .play-panel{padding:15px}
 .play-panel h2{font-size:1.3125rem}
 .task-description{font-size:0.875rem;margin-bottom:9px}
 .scan-actions{margin:12px 0}
 .scan-actions button{font-size:0.8125rem;padding:8px;min-width:0}
 .controls{gap:9px;margin:10px 0}
 .range-control{gap:4px}
 .range-control>span{font-size:0.875rem}
 .range-control small{font-size:0.75rem}
 .terms,.control-explain{font-size:0.8125rem}
 .playback{margin:8px 0 10px}
 .response-box{padding-top:9px}
 .response-box p{min-height:0;margin-bottom:8px;font-size:0.8125rem}
 .response-actions button{font-size:0.75rem}
}
@media(max-width:600px){
 main{padding-top:10px}
 .heading{margin-bottom:10px}
 .heading h1{font-size:1.875rem;margin-bottom:6px}
 .heading .intro{font-size:0.875rem;line-height:1.4}
 .round-count{font-size:0.75rem;margin-top:8px;padding:5px 9px}
 .history{font-size:0.75rem;margin-bottom:5px}
 .status-row{padding:8px 10px;line-height:1.35}
 .status{font-size:0.75rem}
 .image-top h2{font-size:1.0625rem}
}