body,html{margin:0;padding:0;width:100%;height:100%;font-family:system-ui,sans-serif;background:#0b1120;overflow:hidden}canvas{display:block;width:100%;height:100%}#bankPanel{position:fixed;top:0;bottom:0;right:20px;z-index:10;pointer-events:none;width:150px;display:flex;flex-direction:column;justify-content:center}#bankPanelInner{display:flex;flex-direction:column;gap:5px;transform-origin:right center}.bank-row{display:flex;align-items:center;gap:8px;font-family:monospace}.bank-bar{flex-grow:1;display:flex;justify-content:flex-end;align-items:center;gap:2px;height:24px;overflow:hidden}.bank-exp{width:24px;text-align:right;font-weight:700;font-size:1.95em;flex-shrink:0}#settingsPanel{position:fixed;top:20px;right:20px;width:400px;max-height:calc(100vh - 40px);overflow-y:auto;z-index:20;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s ease,transform .25s ease}#settingsPanel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}#bottomBar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 20px;pointer-events:none}#playbackBarMount{display:flex;align-items:center;gap:14px;width:100%;flex:1 1 auto;min-width:0}#playbackBarMount #timeSlider{flex:1 1 auto;min-width:0}#speedControl{flex-shrink:0;pointer-events:auto;display:flex;align-items:center}#bottomBar #playBtn{opacity:1;pointer-events:auto;background:none;border:none;color:#f8fafc;font-size:1.3em;cursor:pointer;width:32px;height:32px;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 3px rgba(0,0,0,.8)}#bottomBar #timeReadout{opacity:1;pointer-events:none;color:#cbd5e1;font-family:monospace;font-size:.85em;flex-shrink:0;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}#bottomBar #playBtn:hover{color:#3b82f6}#timeSlider{flex-grow:1;width:auto;border:none;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background-color:#ffffff40;background-clip:content-box;outline:none;cursor:pointer;pointer-events:auto;padding:10px 0;box-sizing:content-box}#timeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;opacity:0;transition:opacity .2s ease;cursor:pointer}#timeSlider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:none;background:#fff;opacity:0;transition:opacity .2s ease;cursor:pointer}#timeSlider::-moz-range-track{height:3px;border-radius:2px;background:transparent}#bottomBar.visible #timeSlider::-webkit-slider-thumb,#bottomBar.visible #timeSlider::-moz-range-thumb{opacity:1}.overlay-panel{background:#0f172ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#f8fafc;padding:20px;box-shadow:0 10px 30px #0009;pointer-events:auto;box-sizing:border-box;width:100%;position:relative}.piece-block{width:15px;height:20px;border-radius:3px;flex-shrink:0}.control-group{display:flex;flex-direction:column;gap:8px;font-size:.9em;margin-bottom:5px}.control-row{display:flex;gap:10px}.control-row>div{flex:1}input[type=range],input[type=number],select{width:100%;cursor:pointer;background:#1e293b;color:#fff;border:1px solid #334155;border-radius:4px;padding:6px;box-sizing:border-box}.settings-btn{width:100%;cursor:pointer;background:#1e293b;color:#fff;border:1px solid #334155;border-radius:4px;padding:8px 6px;box-sizing:border-box;font-size:.85em;transition:background .15s ease}.settings-btn:hover{background:#334155}.settings-btn.copied{background:#06d6a0;color:#0b1120;border-color:#06d6a0}.warning{color:#f59e0b;font-size:.8em;margin-top:-5px}.error-msg{color:#ef476f;font-weight:700;font-size:.9em;display:none}.error-msg:not(:empty){display:block}.compile-progress{position:fixed;left:0;right:0;bottom:0;height:3px;background:#ffffff0f;z-index:50;pointer-events:none}.compile-progress-bar{height:100%;width:40%;background:#3b82f6;animation:compile-progress-slide 1.1s ease-in-out infinite}@keyframes compile-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.zoom-readout,.target-display-readout{color:#3b82f6;font-weight:700}#restGridPanel{position:fixed;left:20px;bottom:60px;z-index:15;width:300px;display:none}#canvasMount{position:fixed;inset:0;z-index:0}.intro-overlay{position:fixed;inset:0;z-index:900;pointer-events:none;display:flex;align-items:center;justify-content:center}.intro-box{background:#0f172ad9;border:1px solid #475569;border-radius:8px;padding:20px 28px;color:#e2e8f0;font-family:system-ui,sans-serif;max-width:40ch;text-align:center}.intro-box h2{margin:0 0 8px;font-size:1.2em;color:#3b82f6}.intro-box p{margin:0;font-size:.9em;color:#94a3b8}.intro-settings-hint{position:fixed;top:14px;right:18px;color:#94a3b8;font-family:system-ui,sans-serif;font-size:.85em;display:flex;align-items:center;gap:4px}.intro-arrow{color:#3b82f6;font-size:1.2em}.help-overlay{position:fixed;inset:0;z-index:1000;background:#0009;display:flex;align-items:center;justify-content:center;cursor:pointer}.help-box{background:#1e293b;border:1px solid #475569;border-radius:8px;padding:24px 32px;color:#e2e8f0;font-family:system-ui,sans-serif;min-width:280px}.help-box h3{margin:0 0 12px;font-size:1.1em;color:#f8fafc}.help-box table{width:100%;border-collapse:collapse}.help-box td{padding:4px 8px;font-size:.9em}.help-box td:first-child{text-align:right;padding-right:16px}.help-box kbd{background:#334155;border:1px solid #64748b;border-radius:3px;padding:2px 6px;font-family:monospace;font-size:.9em}.help-hint{margin:12px 0 0;font-size:.75em;color:#94a3b8;text-align:center}.rest-grid.svelte-3z6t3q{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;position:relative}.cell.svelte-3z6t3q{position:relative;aspect-ratio:1 / 1;background:#ffffff0d;border-radius:4px;overflow:hidden}.bar.svelte-3z6t3q{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 4px 4px;min-height:2px}.exp.svelte-3z6t3q{position:absolute;top:3px;right:5px;font-family:monospace;font-weight:700;font-size:1.1em;text-shadow:0 1px 2px rgba(0,0,0,.7)}.count.svelte-3z6t3q{position:absolute;bottom:3px;left:5px;font-family:monospace;font-size:.95em;color:#e2e8f0;text-shadow:0 1px 2px rgba(0,0,0,.7)}.overflow-badge.svelte-3z6t3q{position:absolute;top:2px;right:4px;background:#f59e0be6;color:#0b1120;font-family:monospace;font-weight:700;font-size:.8em;padding:1px 5px;border-radius:8px}