:root{background:#faf7f0;color:#1a1a1a;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;--hud-bg: rgba(255, 252, 247, .95);--hud-border: rgba(0, 0, 0, .08);--hud-shadow: 0 2px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);--btn-bg: rgba(0, 0, 0, .04);--btn-bg-hover: rgba(0, 0, 0, .08);--btn-bg-active: rgba(0, 0, 0, .12);--accent: #4a4a4a}html,body{height:100%}body{margin:0;overflow:hidden}#app{height:100%}canvas{display:block;width:100vw;height:100vh}#hud{position:fixed;top:16px;right:16px;padding:12px 14px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:14px;font-size:12px;line-height:1.4;z-index:10;max-width:280px;box-sizing:border-box;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--hud-shadow);display:flex;flex-direction:column;gap:10px}#hud.hidden{display:none}.hud-progress{display:flex;align-items:center;justify-content:space-between;gap:10px}.progress-dots{display:flex;gap:5px}.progress-dot{width:7px;height:7px;border-radius:50%;background:#0000001f;transition:background .15s ease}.progress-dot.active{background:var(--accent)}.progress-dot.current{background:var(--accent);box-shadow:0 0 0 2px #4a4a4a33}.para-label{font-size:11px;color:#00000080;white-space:nowrap}.layout-picker{display:flex;gap:4px;flex-wrap:wrap}.layout-btn{width:36px;height:32px;border:none;border-radius:8px;background:var(--btn-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.layout-btn:hover{background:var(--btn-bg-hover)}.layout-btn:active{transform:scale(.95)}.layout-btn.active{background:var(--btn-bg-active);box-shadow:inset 0 1px 2px #00000014}.layout-btn svg{width:18px;height:18px;stroke:var(--accent);stroke-width:1.5;fill:none}.focus-picker{display:flex;gap:4px}.focus-btn{flex:1;padding:6px 8px;border:none;border-radius:8px;background:var(--btn-bg);font-size:11px;font-family:inherit;color:var(--accent);cursor:pointer;transition:background .12s ease;-webkit-tap-highlight-color:transparent;white-space:nowrap}.focus-btn:hover{background:var(--btn-bg-hover)}.focus-btn.active{background:var(--btn-bg-active);font-weight:500}.hud-slider{display:flex;align-items:center;gap:8px}.hud-slider .slider-label{font-size:13px;color:#00000073;width:18px;text-align:center;flex-shrink:0}.hud-slider input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:#0000001a;border-radius:2px;cursor:pointer;touch-action:manipulation}.hud-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .1s ease}.hud-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.hud-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;border:none;cursor:pointer}.hud-keys{font-size:10px;color:#00000059;text-align:center;margin-top:2px}@media(max-width:600px){#hud{inset:auto 0 0;max-width:none;border-radius:16px 16px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));gap:12px}.hud-keys{display:none}.layout-picker{justify-content:center}.layout-btn{width:44px;height:40px}.layout-btn svg{width:22px;height:22px}.focus-btn{padding:10px 8px;font-size:12px}.hud-slider input[type=range]{height:6px}.hud-slider input[type=range]::-webkit-slider-thumb{width:20px;height:20px}.hud-slider input[type=range]::-moz-range-thumb{width:20px;height:20px}.progress-dot{width:10px;height:10px}}#input-panel{position:fixed;bottom:0;left:0;right:0;background:#faf7f0;border-top:1px solid rgba(0,0,0,.1);padding:16px 24px 24px;transform:translateY(100%);transition:transform .2s ease-out;z-index:20}#input-panel.open{transform:translateY(0)}#text-input{width:100%;height:120px;padding:12px;border:1px solid rgba(0,0,0,.1);border-radius:4px;background:#fff;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;box-sizing:border-box}#text-input:focus{outline:none;border-color:#0000004d}#text-input::placeholder{color:#0000004d}.input-hint{margin-top:8px;font-size:10px;opacity:.5}#center-indicator{position:fixed;bottom:32px;left:50%;transform:translate(-50%);padding:6px 14px;background:#0000000f;border-radius:20px;font-size:12px;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:5}#center-indicator.visible{opacity:1}#center-indicator.at-end{background:#0000001a}@media(max-width:600px){#center-indicator{bottom:60px}}.hud-handle{display:none}@media(max-width:600px){.hud-handle{display:block;width:36px;height:4px;background:#0003;border-radius:2px;margin:0 auto 8px}#hud.collapsed{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}#hud.collapsed .layout-picker,#hud.collapsed .focus-picker,#hud.collapsed .hud-slider{display:none}#hud.collapsed .hud-handle{margin-bottom:0}}