:root{--bg: #0d0f0c;--panel: #141712;--line: #23271f;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#0b0d0a;color:#d9d3c4;font:13px/1.5 Noto Sans SC,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%}.bar{display:flex;align-items:center;gap:18px;padding:0 16px;height:52px;background:linear-gradient(180deg,#161a14,#101310);border-bottom:1px solid #2a2f26}.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.04em;color:#e6dfcd}.brand em{font-style:normal;font-size:11px;color:#6f7666;letter-spacing:.08em}.dot{width:7px;height:7px;background:#c9a24e;transform:rotate(45deg);box-shadow:0 0 8px #c9a24eb3}.group{display:flex;align-items:center;gap:6px}.group label{font-size:11px;letter-spacing:.12em;color:#6f7666}.spacer{flex:1}select,button{font:inherit;color:#cfc8b6;background:#1b1f18;border:1px solid #2f352a;padding:5px 10px;cursor:pointer;transition:background .14s,border-color .14s}select:hover,button:hover{background:#23281f;border-color:#434b3b}button.primary{border-color:#6b5b2c;color:#e8d9a8;background:#241f11}button.primary:hover{background:#2e2717}.body{flex:1;display:flex;min-height:0}.editor{width:42%;min-width:320px;display:flex;flex-direction:column;border-right:1px solid #23271f;background:#0e110d}.editor-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;font-size:11px;letter-spacing:.14em;color:#6f7666;border-bottom:1px solid #1d211a}.editor-head .ok{color:#7f9a63}.editor-head .bad{color:#c06a4a}textarea{flex:1;width:100%;resize:none;border:0;outline:none;padding:14px 16px 80px;background:transparent;color:#cfd0c4;font:12.5px/1.75 SF Mono,JetBrains Mono,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}textarea::selection{background:#3c4a2e}.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:14px;gap:10px}.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#0f120e 0 8px,#0c0f0b 8px 16px);border:1px solid #23271f;overflow:hidden}canvas{max-width:100%;max-height:100%;object-fit:contain;cursor:grab;box-shadow:0 12px 40px #0009;touch-action:none}canvas:active{cursor:grabbing}.timeline{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#12150f;border:1px solid #23271f}.play{width:34px;height:26px;display:grid;place-items:center;font-size:11px;letter-spacing:1px}input[type=range]{flex:1;appearance:none;height:3px;background:#2c3327;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#c9a24e;transform:rotate(45deg);cursor:pointer}.timecode{font:12px/1 SF Mono,Consolas,monospace;color:#8f9384;min-width:52px;text-align:right}.status{font-size:11.5px;letter-spacing:.04em;color:#6f7666;min-height:16px}.status.error{color:#c06a4a}.status.boot{color:#8a8f7e}