:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#05060d;--panel:#ffffff0a;--accent:#b48cff}*{box-sizing:border-box}html,body{background:var(--bg);color:#fff;height:100%;margin:0;font-family:ui-sans-serif,system-ui,sans-serif;overflow:hidden}#app{flex-direction:column;gap:10px;height:100vh;padding:clamp(8px,2vmin,24px);display:flex}#frame{background:#05060d;border-radius:14px;flex:1;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff0f,0 30px 80px #0009}#stage{width:100%;height:100%;display:block;position:absolute;inset:0}#transport{align-items:center;gap:12px;padding:4px 6px;display:flex}.ctl{appearance:none;color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;width:40px;height:36px;font:600 14px ui-monospace,monospace;transition:background .15s,border-color .15s,transform 50ms}.ctl:hover{background:#ffffff1f}.ctl:active{transform:scale(.94)}.ctl.sm{width:44px;height:30px;font-size:12px}.ctl.sm.active{border-color:var(--accent);color:#fff;background:#b48cff38}.clock{color:#fffc;min-width:70px;font:700 14px ui-monospace,monospace}.speeds{gap:6px;display:flex}.scrub{appearance:none;background:linear-gradient(90deg, var(--accent), #b48cff40);cursor:pointer;border-radius:3px;outline:none;flex:1;height:6px}.scrub::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 10px #b48cffe6}.scrub::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 0 10px #b48cffe6}