*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#071820;color:#e7f3f3;font:1rem/1.5 "Segoe UI",Arial,sans-serif}button,input{font:inherit}button{min-height:44px;border:1px solid #42606c;border-radius:9px;background:#17333f;color:inherit;padding:8px 12px;cursor:pointer}button:hover{background:#244a56}a{color:#a6e4db;text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #ffd28e;outline-offset:4px}h1,h2,p{margin:0}h2{font-size:1rem}.top{max-width:1280px;margin:auto;min-height:54px;padding:5px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #24414c}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#e7f3f3;font-weight:750;font-size:1.125rem}.top nav{display:flex;align-items:center;gap:22px;font-size:0.875rem}.text-button{background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:4px;color:#b4e9df;min-height:40px;font-size:0.875rem}.text-button:hover{background:transparent;color:#fff}main{max-width:1280px;margin:auto;padding:14px 24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.eyebrow{font-size:0.75rem;font-weight:700;color:#8fc6c1;letter-spacing:1.5px}.heading h1{font-size:clamp(1.875rem,3.2vw,2.875rem);letter-spacing:-1.5px;line-height:1.1;margin-top:3px}.heading h1 span{color:#c9acff}.heading>p{font-size:1.0rem;color:#adc8ce}.heading strong{color:#e7f3f3;font-weight:500}.game{border:1px solid #375662;border-radius:16px;background:#0e2631;overflow:clip}.mission{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #375662;background:#142e39}.mission-number{display:grid;place-items:center;background:#264751;color:#bcece2;border-radius:50%;width:28px;height:28px;font-size:0.75rem;font-weight:700}.mission p{flex:1;font-size:1.0rem}.no-rush{font-size:0.875rem;color:#a3c0c8}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 306px}.chamber-panel{padding:14px;min-width:0}.view-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.view-heading span{font-size:0.75rem;color:#99b9c5}.canvas-wrap{position:relative;line-height:0;background:#081e29;border:1px solid #3b5f6d;border-radius:14px;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;touch-action:none;cursor:crosshair}.view-label{position:absolute;top:12px;left:16px;pointer-events:none;font-size:0.75rem;letter-spacing:1px;color:#a2c4d0;line-height:1.3}.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 2px;font-size:0.875rem;color:#c3d8df}.legend>span{display:flex;align-items:center;gap:7px}.legend i{display:inline-block;width:11px;height:11px;border-radius:50%}.light-key{background:#d1a9ff;box-shadow:0 0 10px #c997ff99}.bead-key{background:#dce4ca}.pocket-key{border:2px solid #f2c988}.live-feedback{background:#173541;border-left:3px solid #c0a0ee;border-radius:0 7px 7px 0;padding:10px 13px;min-height:80px}.signal{font-size:0.75rem;color:#d8b7ff;letter-spacing:1px;font-weight:700}.live-feedback p{margin-top:3px;font-size:1.0rem}.controls-note{font-size:0.875rem;color:#abc4ce;margin:10px 0 4px}.description{font-size:0.875rem;color:#abc4ce}.description p{margin:7px 0}.description summary{min-height:36px;padding-block:5px;cursor:pointer;color:#b7e2dd}.console{border-left:1px solid #375662;padding:16px;background:#112a35;display:flex;flex-direction:column;gap:14px}.console-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.small-ring{width:19px;height:19px;border-radius:50%;border:1px solid #d7b5ff;box-shadow:0 0 0 4px #c997ff17}.speeds{margin:0;padding:0;border:0;min-width:0}.speeds legend{margin-bottom:8px;font-size:1.0rem}.segmented{display:flex;gap:5px}.segmented button{flex:1;font-size:0.875rem;padding:8px 3px;min-width:0}.segmented span{display:block;font-size:0.75rem;color:#b1c9d4;margin-top:2px}.segmented [aria-pressed=true]{background:#394362;border-color:#d4b3ff;box-shadow:inset 0 0 0 1px #d4b3ff;color:#fff}.switches{display:flex;gap:8px}.switches button{flex:1;font-size:0.875rem}.switches [aria-pressed=true]{border-color:#a2d2ca}.pocket-action{border-top:1px solid #34515c;padding-top:14px}.pocket-action p{font-size:0.875rem;color:#bbd0d6;margin:5px 0 10px}.primary{color:#112b33;background:#efca91;border-color:#efca91;font-weight:700;width:100%}.primary:hover{background:#ffe0b1}#pocket-feedback{color:#f2d8a8;margin:6px 0 0}.success{border:1px solid #6a998a;background:#1a423f;border-radius:9px;padding:12px}.success h2{font-size:1.25rem;line-height:1.2;margin-top:7px}.success p{font-size:0.875rem;margin:8px 0}.success button{font-size:0.875rem}.explore-settings,.steer-controls{font-size:0.875rem;border-top:1px solid #34515c;padding-top:9px}summary{cursor:pointer;min-height:36px;padding:5px 0;color:#c9e2e3}.explore-settings>div{padding-top:8px}.flow-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.flow-control input{width:19px;height:19px;accent-color:#b9eadf}.flow-control span{color:#a4c5cc}.explore-settings p,.steer-controls p{font-size:0.875rem;color:#adc6ce;margin:7px 0 10px}.explore-settings button{font-size:0.875rem;width:100%}.dpad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.dpad button{font-size:1.375rem;touch-action:none;user-select:none}.console-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:auto}#hint-text{font-size:0.875rem;color:#ecd8b0}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;color:#a4c0c9;font-size:0.875rem}dialog{background:#102d39;color:#e7f3f3;border:1px solid #67848d;border-radius:16px;width:min(650px,calc(100% - 28px));max-height:85dvh;padding:26px;overflow:auto}dialog::backdrop{background:#021218dc}dialog h2{font-size:1.6875rem;line-height:1.15;margin-bottom:14px}dialog h3{font-size:1.0625rem;margin-bottom:5px}dialog p,dialog li{margin-block:10px}#close-info{float:right;font-size:1.375rem;margin:-12px -12px 4px 12px;background:none}.skip{position:fixed;top:-100px;z-index:9}.skip:focus{top:0;background:#132e3c;padding:16px}[hidden]{display:none!important}
/* The chamber owns its height; optional console content never stretches it. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.workspace{align-items:start}.chamber-panel{position:sticky;top:8px;align-self:start}
.canvas-wrap{height:clamp(180px,calc(100dvh - 480px),430px);flex:none}
canvas{width:100%;height:100%;aspect-ratio:auto}
.view-tools{display:flex;align-items:center;gap:10px}.view-tools button{font-size:.875rem;min-height:36px;padding:4px 10px}
.primary-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:12px;align-items:end;margin-top:10px}
.primary-controls .speeds legend{font-size:.875rem;margin-bottom:4px}.primary-controls .segmented button{padding:5px 3px;min-height:44px}
.primary-controls .segmented span{display:inline;margin-left:4px}.primary-controls .switches{gap:5px}
.primary-controls .switches button{padding:7px 5px;min-height:48px}.primary-controls .primary{width:auto;flex:1.3}
.live-feedback{min-height:95px}.console{gap:10px}.console-bottom{margin-top:0}.success h2{font-size:1.125rem}
.canvas-wrap:focus-within{outline:3px solid #ffd28e;outline-offset:3px}
.skip{top:0;transform:translateY(-160%)}.skip:focus{transform:none}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 260px}.no-rush{display:none}main{padding-inline:16px}.console{padding:12px}.primary-controls{grid-template-columns:1fr}.primary-controls .speeds legend{display:none}}
@media(max-width:800px){
.top{padding:4px 12px;min-height:44px}.top nav{gap:14px}main{padding:8px 12px}.heading{margin-bottom:8px}.heading h1{font-size:1.7rem;margin:0}.heading .eyebrow,.heading>p{display:none}
.workspace{grid-template-columns:1fr}.chamber-panel{position:static;padding:8px}.canvas-wrap{height:auto;aspect-ratio:5/3}.view-heading{margin-bottom:5px}.view-heading h2{font-size:.875rem}.view-tools{gap:6px}.view-tools>span{font-size:.75rem}
.primary-controls{grid-template-columns:1fr;margin-top:7px;gap:5px}.primary-controls .segmented span{display:inline}.primary-controls .speeds legend{display:none}.primary-controls .switches button{min-height:44px}
.console{border-left:0;border-top:1px solid #375662;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:12px}.console-title{display:none}.pocket-action,.success,.explore-settings,.steer-controls,.description,.console-bottom,#hint-text{grid-column:1/-1}
.pocket-action{padding-top:0;border:0}.mission{padding:6px 12px}.mission p{font-size:.875rem}.mission-number{display:none}.legend{display:none}.live-feedback{margin-top:7px;min-height:100px;padding:6px 9px}.live-feedback p{font-size:.875rem}.signal{letter-spacing:.5px}.view-label{top:7px;left:9px;letter-spacing:.2px}
footer{flex-wrap:wrap;gap:0}.description{font-size:.875rem}
}
@media(max-width:400px){main{padding:6px}.top{padding-inline:8px}.top nav{gap:10px}.brand{font-size:1rem}.brand img{width:23px;height:23px}.view-heading h2{display:none}.view-tools{width:100%;justify-content:space-between}.heading h1{font-size:1.45rem}.view-tools button{min-height:32px}.mission{padding:5px 9px}.chamber-panel{padding:6px}.canvas-wrap{aspect-ratio:1.85}.live-feedback{min-height:95px}.primary-controls .switches button{font-size:.875rem}.heading{margin-bottom:5px}}
@media(min-width:801px) and (max-height:700px){.heading{margin-bottom:7px}.heading h1{font-size:1.9rem}.heading .eyebrow{display:none}main{padding-top:8px}.canvas-wrap{height:clamp(150px,calc(100dvh - 440px),320px)}.chamber-panel{padding:10px}.live-feedback{min-height:80px;padding:6px 10px}.legend{margin:5px 0}.primary-controls{margin-top:6px}.console{gap:8px}}
@media(min-width:600px) and (max-width:1000px) and (max-height:500px){
.heading,.mission,.view-heading h2,.legend,.console-title{display:none}main{padding-top:4px}.workspace{grid-template-columns:minmax(0,1fr) 240px}.chamber-panel{position:sticky;top:4px;padding:6px}.canvas-wrap{height:calc(100dvh - 250px);min-height:120px;aspect-ratio:auto}.primary-controls{grid-template-columns:1fr;gap:4px}.primary-controls .speeds{display:block}.live-feedback{min-height:70px}.console{display:flex;padding:8px;border-left:1px solid #375662;border-top:0}.view-heading{margin-bottom:3px}.view-tools button{min-height:30px}.view-tools{margin-left:auto}.console .landscape-speeds{display:block}
}
.landscape-speeds{display:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(min-width:600px) and (max-width:1000px) and (max-height:500px){
.primary-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:stretch}.primary-controls .switches button{min-height:44px}.primary-controls .segmented button{height:100%}.canvas-wrap{height:calc(100dvh - 244px);min-height:110px}.live-feedback{font-size:.875rem;padding:4px 8px;min-height:65px}.live-feedback p{font-size:.875rem;line-height:1.4}.view-heading{margin-bottom:2px}.view-tools>span{display:none}
}
/* Optional apparatus context; the original top-view particle model remains the control surface. */
.leash-context{border:1px solid #41616c;border-radius:10px;margin:12px 0;padding:8px 10px;background:#0a202b;min-width:0}
.leash-context summary{cursor:pointer;color:#b4e5db;font-size:.9rem;min-height:44px;padding:10px 0}
.leash-context summary:focus-visible{outline:3px solid #f3cf94;outline-offset:3px}
.context-intro,.context-boundary{font-size:.8rem;line-height:1.55;color:#c2d6dc;margin:6px 0 10px}
.context-stage{position:relative;overflow:hidden;border-radius:8px;background:#081923}
#leash-context-canvas{position:relative;width:100%;height:240px;overflow:hidden}#leash-context-canvas canvas{width:100%;height:100%;display:block;touch-action:none}
#leash-context-fallback{position:absolute;inset:0;background:#0d2731;overflow:auto}#leash-context-fallback img{display:block;width:100%;height:170px;object-fit:cover}#leash-context-fallback p{font-size:.8rem;padding:8px}
.context-cameras{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.context-cameras button{font-size:.8rem;min-height:44px;padding:6px 9px;flex:1}
@media(max-width:700px){#leash-context-canvas{height:260px}.context-boundary{font-size:.8rem}}
#leash-context,#leash-intro{grid-column:1/-1;min-width:0;width:100%}
.top{flex-wrap:wrap;min-width:0}.top nav{flex-wrap:wrap;min-width:0}.top nav a,.top nav button{max-width:100%;overflow-wrap:anywhere}