*{box-sizing:border-box} :root{font:16px/1.45 ui-sans-serif,system-ui,-apple-system,sans-serif;color:#293c3b;background:#e4e3db;color-scheme:light}body{margin:0;height:100dvh;min-height:400px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))}header{display:flex;align-items:center;gap:12px;padding:12px 6px 0;z-index:1}h1{font-size:18px;line-height:1.2;letter-spacing:-.03em;font-weight:620;margin:0}h1 span{font-size:16px;font-weight:400;letter-spacing:0;color:#576661;margin-left:10px}#cycle{margin-left:auto;font-size:16px;color:#576661;font-variant-numeric:tabular-nums;min-width:0}main{position:relative;min-height:0;min-width:0}canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:3px}canvas:focus-visible{outline-offset:-3px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}button,a,select{font:inherit;color:inherit;min-width:44px;min-height:44px;touch-action:manipulation}button,.back{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:10px;cursor:pointer;border-radius:50%}button:hover,.back:hover{background:#d3d6cd}button[aria-pressed=true]{background:#334b46;color:#f4f0e5}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid #294b43;outline-offset:3px}a{text-decoration-thickness:1px;text-underline-offset:4px}footer{padding:0 0 max(8px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:6px;z-index:1}#phase{font-size:16px;margin:0;color:#4d615b;min-height:24px;text-align:center}nav{display:flex;align-items:center;gap:12px}nav button{width:48px;height:48px}nav button:hover::after{content:attr(aria-label);position:absolute;bottom:68px;pointer-events:none;font-size:14px;background:#f5f0e5;padding:5px 9px;border-radius:4px;box-shadow:0 1px 5px #20352b10;white-space:nowrap}.progress{display:flex;gap:5px;height:8px;align-items:center}.progress span{height:3px;width:8px;background:#78867d55;border-radius:3px;transition:height .2s,background .3s}.progress .done{background:#5a796c}.progress .active{background:#ba603b;height:7px}.loading{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;background:#e4e3db;color:#53645b}.loading span{height:2px;width:70px;background:#ac744c;justify-self:center;animation:breath 2s ease-in-out infinite}.loading[hidden],#error[hidden]{display:none}#error{position:absolute;inset:10% 6%;display:grid;place-content:center;justify-items:center;text-align:center;background:#e4e3db}#error p{max-width:36ch}#error button{border:1px solid #576661;border-radius:5px;padding:8px 18px}h2{font-size:26px;font-weight:550;letter-spacing:-.045em;line-height:1.2;margin:10px 0 18px}dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #b8c0b2;border-radius:12px;background:#f2f0e7;color:#293c3b;padding:24px;box-shadow:0 18px 70px #24382b22}dialog::backdrop{background:#22352d25;backdrop-filter:blur(5px)}.close{float:right;margin:-14px -14px 0 0;font-size:28px}dialog p{margin:12px 0 20px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #c7ccc0}.settings-row button{border-radius:7px;padding:8px 20px;min-width:70px;border:1px solid #9ba99c}.settings-row select{max-width:230px;min-width:0;background:transparent;border:0;border-bottom:1px solid #8a9b8c;padding:5px;flex-shrink:1}.settings-row label{flex-shrink:0}fieldset{border:0;border-top:1px solid #c7ccc0;margin:8px 0 0;padding:10px 0}legend{padding-right:10px}.view-controls{display:flex;flex-wrap:wrap;gap:8px}.view-controls button{border-radius:6px;border:1px solid #b9c3b5;padding:8px 12px}.fine{font-size:16px;color:#536257}.stats{font-variant-numeric:tabular-nums;color:#536257}dialog>a{display:flex;align-items:center;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes breath{50%{transform:scaleX(.4);opacity:.5}}@media(max-width:500px){header{padding-top:6px;gap:8px}h1 span{display:block;margin:4px 0 0}header .back{width:44px}#cycle{font-size:14px}nav{gap:10px}footer{gap:4px}.settings-row select{max-width:165px}dialog{padding:20px}nav button:hover::after{display:none}}@media(max-height:500px){body{min-height:320px}header{padding-top:0}h1 span{display:inline-block;margin-left:8px}footer{gap:0;padding-bottom:0}.progress{display:none}#phase{position:absolute;left:16px;bottom:16px;max-width:calc(50vw - 145px);font-size:14px}nav button{height:44px;width:44px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(forced-colors:active){button[aria-pressed=true]{border:2px solid Highlight}.progress .active{outline:2px solid Highlight}dialog{border:1px solid CanvasText}}
/* Follow controls stay beside the ball choices. */
:root{background:#e9e6dd;color:#263b38}body{grid-template-rows:auto auto minmax(0,1fr) auto;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}header{padding:12px 10px 6px}h1 span{font-size:14px}main{overflow:hidden}.machine-status{display:flex;align-items:center;gap:20px;justify-content:center}#count{font:12px ui-monospace,monospace;color:#536359}#balls{display:flex;gap:2px}#balls button{border-radius:5px;gap:6px;font:12px ui-monospace,monospace;min-width:50px;height:44px;padding:8px}.ball-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 1px #0002}.ball-0{--ball:#d95123}.ball-1{--ball:#246676}.ball-2{--ball:#a87c12}.ball-3{--ball:#715a94}#balls button[aria-pressed=true]{background:#d2d5c9;color:#263b38}.progress{width:min(640px,85vw);gap:3px}.progress span{flex:1;min-width:1px;width:auto}.progress .done{background:#536f61}.progress .active{background:#a7542e}#phase{font-size:13px;min-height:20px}footer{gap:3px}nav{gap:10px}nav button{border:1px solid #aeb5a7;border-radius:5px;width:44px;height:44px}.loading{background:#e9e6dd}@media(max-width:600px){h1 span{font-size:12px}#count{font-size:11px}.machine-status{gap:8px}#phase{max-width:95vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}header{padding:4px 2px}#balls button{min-width:44px}}@media(max-height:500px){body{grid-template-rows:auto minmax(0,1fr) auto}.machine-status{position:absolute;right:10px;bottom:0;gap:4px;flex-direction:column}#balls button{min-width:44px;padding:6px}.ball-dot{width:9px;height:9px}#phase{position:static;max-width:none;font-size:12px}footer{gap:2px}.progress{display:none}}

@media(max-width:600px){.progress{gap:1px}.progress span{min-width:0}#count{white-space:nowrap}#balls button{padding:5px;min-width:44px}#balls{gap:0}}

/* Exploration stays available beside the canvas, including on touch screens. */
canvas{cursor:grab}canvas.dragging{cursor:grabbing}canvas[data-turn=true]{cursor:move}
.camera-controls{position:absolute;right:12px;bottom:32px;display:flex;gap:2px;background:#faf7eef2;border:1px solid #aab2a4;border-radius:7px;padding:3px;z-index:2;box-shadow:0 2px 9px #263b3810}
.camera-controls button{border-radius:4px;min-width:44px;min-height:44px;padding:8px;font-size:14px}
#camera-help{position:absolute;bottom:2px;right:14px;margin:0;font-size:12px;color:#536359;pointer-events:none;background:#e9e6dddb;padding:2px 5px;border-radius:3px}
@media(max-width:600px){.camera-controls{right:6px;bottom:30px}#camera-help{right:6px;font-size:11px}}
@media(max-height:500px){.camera-controls{right:6px;bottom:25px}#camera-help{right:6px;font-size:11px}}

.follow-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 0 6px;z-index:2}
#follow{border:1px solid #aab2a4;border-radius:5px;padding:8px 16px;min-height:44px;font-size:14px}
#follow[aria-pressed=true]{background:#263b38;color:#fff;border-color:#263b38}
canvas[data-locked=true]:not([data-turn=true]){cursor:default}
@media(max-height:500px){body{grid-template-rows:auto auto minmax(0,1fr) auto}.follow-controls{padding:0;gap:4px}h1 span{display:none}.machine-status{position:static;flex-direction:row}#balls button{min-width:44px}}

/* Bare stage: the machine fills the window and the controls sit on one quiet line. */
body{display:block;padding:0;overflow:hidden}header{position:absolute;top:0;left:0;height:0;padding:0}
main{position:absolute;inset:0}canvas{border-radius:0}
.machine-status,.progress,#phase,#camera-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;min-height:0;padding:0}
#cycle{position:absolute;z-index:3;margin:0;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));font-size:12px;color:#6b7a73;font-variant-numeric:tabular-nums;pointer-events:none}
footer{position:absolute;z-index:3;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));padding:0;display:block}
nav{gap:0}nav button{border:0;border-radius:6px;color:#4d615b}
.follow-controls{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom));padding:0;gap:0}
#follow{border:0;font-size:13px;padding:8px 12px;color:#4d615b}#follow[aria-pressed=true]{color:#fff}
#balls{gap:0}#balls button{min-width:44px;padding:8px}#balls button span+span{display:none}
.camera-controls{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));background:none;border:0;box-shadow:none;padding:0;gap:0}
.camera-controls button{color:#4d615b;font-size:13px}
@media(max-width:700px){.follow-controls{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 46px)}.camera-controls{right:max(4px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}footer{left:max(4px,env(safe-area-inset-left))}}
@media(max-height:500px){.follow-controls{padding:0;bottom:max(8px,env(safe-area-inset-bottom))}.machine-status{position:absolute;flex-direction:row}footer{padding:0}}
@media(max-height:500px) and (max-width:700px){.follow-controls{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 46px)}}

/* Double-tap zoom: touch-action is intersected across every ancestor, so
   manipulation on the root stops double-tap zoom page-wide (readouts, gaps
   between controls, sheet backdrops) while pinch zoom still works. */
html, body { touch-action: manipulation; }

/* One control. The machine has the page. */
.follow-controls,#paused{position:absolute;z-index:3;left:50%;transform:translateX(-50%);margin:0}
.follow-controls{bottom:max(8px,env(safe-area-inset-bottom))!important}
#follow[hidden],#paused[hidden]{display:none}
#paused{top:max(12px,env(safe-area-inset-top));font-size:13px;color:#4d615b;background:#e9e6dde6;padding:4px 10px;border-radius:4px;pointer-events:none;white-space:nowrap}