:root{color-scheme:dark;font-family:Inter,Segoe UI,system-ui,sans-serif;background:#0a0b0a;color:#f6f2ea}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-rows:auto minmax(180px,1fr) auto auto;height:100dvh;min-height:520px}header{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid #3a4431;background:#181b18}header span{font-size:10px;letter-spacing:2px;color:#96d82e}h1{font-size:18px;margin:0;flex:1}button,select{border:1px solid #53603e;border-radius:5px;background:#222720;color:#f6f2ea;padding:10px 14px;cursor:pointer}button:hover{border-color:#96d82e}button:disabled{opacity:.4;cursor:default}#play{background:#96d82e;color:#10170b;font-weight:600}#view{position:relative;min-height:0;background:radial-gradient(ellipse at center,#28351c88,transparent 70%)}canvas{display:block;width:100%;height:100%;touch-action:none}#status{position:absolute;top:12px;left:20px;color:#96d82e;font-size:12px}#instructions{padding:14px 24px;background:#181b18;border-top:1px solid #3a4431}#step-count{font:11px Consolas,monospace;color:#96d82e;letter-spacing:1px}h2{font-size:18px;margin:6px 0}#step-note{margin:6px 0;font-size:14px;white-space:pre-wrap}#part-names{margin:4px 0;font-size:11px;color:#b7b8ae}footer{background:#181b18;padding:10px 24px 15px}footer>label{font-size:11px;color:#96d82e}output{float:right}input[type=range]{width:100%;accent-color:#96d82e;display:block;margin:9px 0 12px}.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.controls label,small{font-size:11px;color:#b7b8ae}small{display:block;text-align:center;margin-top:10px}:focus-visible{outline:2px solid #ff8a1f;outline-offset:3px}@media(max-width:600px){header{padding:12px;gap:10px}header span{max-width:100px;font-size:9px}h1{font-size:15px}footer,#instructions{padding:10px 14px}button{padding:9px 11px;font-size:12px}body{min-height:560px}}
:root .speed-controls{display:flex;align-items:center;gap:8px}.speed-controls output{float:none;min-width:35px;text-align:center;color:#96d82e;font:13px Consolas,monospace}
html{width:100%;overflow-x:hidden}body{width:100%;min-width:0;min-height:0;grid-template-rows:auto minmax(160px,1fr) minmax(72px,auto) auto;overflow-x:hidden}header,footer,#instructions,.controls{min-width:0}h1,h2,#step-note,#part-names{overflow-wrap:anywhere}#instructions{max-height:24dvh;overflow-y:auto;overscroll-behavior:contain}#view{overflow:hidden;min-width:0;min-height:160px}#status{right:14px;overflow-wrap:anywhere}button{min-height:42px}footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}input[type=range]{min-height:28px;margin:3px 0 9px}header h1{min-width:0}header button{flex-shrink:0}
@media(max-width:850px){header{padding:10px 14px;gap:10px}header span{max-width:105px;font-size:9px}h1{font-size:16px}footer,#instructions{padding:10px 14px}#instructions{max-height:23dvh}.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:6px}.controls>button{width:100%;padding:9px 5px}.controls .speed-controls{grid-column:2/4;justify-content:center;min-width:0}.speed-controls button{flex:1;padding:9px 7px}.speed-controls output{min-width:34px}footer small{margin-top:6px;font-size:10px}}
@media(max-width:440px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}header span{grid-column:1/-1;max-width:none;font-size:9px;letter-spacing:1.5px}header h1{font-size:15px}header button{grid-row:2;grid-column:2;padding:7px 10px;min-height:36px}h2{font-size:16px}#step-note{font-size:12px}#part-names{font-size:10px}.speed-controls{gap:5px}.controls button{font-size:12px}footer small{display:none}}
@media(max-height:550px){body{height:auto;min-height:100dvh;grid-template-rows:auto minmax(180px,45dvh) auto auto}#instructions{max-height:120px}}
#interaction-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:9px 14px;border:1px solid #53603e;border-radius:20px;background:#181b18dd;color:#d5f4a0;font-size:11px;text-align:center;pointer-events:none;transition:opacity .5s}#interaction-hint.used{opacity:0}