:root{font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;color:#15191d;background:#242624;font-synthesis:none;font-size:13px;--paper:#f5f5f1;--ink:#15191d;--muted:#7d817f;--red:#a03d32;--border:#dddfd9;--mono:Consolas,"SFMono-Regular",monospace}*{box-sizing:border-box}body{margin:0;padding:20px;height:100svh;min-height:620px}button,input,select{font:inherit}button,select{cursor:pointer}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:inherit;border-radius:7px;min-height:34px;padding:7px 10px}button:hover:not(:disabled){background:#e6e7e0}button:disabled,select:disabled{opacity:.35;cursor:default}button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:3px}[hidden]{display:none!important}select{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--ink);padding:8px 9px}option{background:var(--paper)}.shell{height:100%;display:flex;flex-direction:column;background:var(--paper);border-radius:27px;overflow:hidden;border:1px solid #ffffff35;max-width:2200px;margin:auto}.topbar{height:88px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 30px;border-bottom:1px solid var(--border);gap:20px}.brand{display:flex;align-items:center;gap:18px}.brand-mark{font-size:23px;font-weight:750;letter-spacing:-2px;border-right:1px solid var(--border);padding-right:20px}.brand-mark>span:first-child{font-style:italic}.brand-dot{color:var(--red)}h1{font-size:17px;letter-spacing:-.4px;margin:0 0 5px;font-weight:650}.brand p{margin:0;font-size:11px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:12px}.privacy{display:flex;align-items:center;gap:7px;font:9px var(--mono);letter-spacing:.4px;margin-right:15px;color:#747974}.privacy i{width:5px;height:5px;background:#738970;border-radius:50%}.text-button{font-size:11px;font-weight:550}.dark-button{background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 15px;font-weight:550}.dark-button:hover:not(:disabled){background:#333a3a}.document-bar{height:51px;flex-shrink:0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:10px;background:#fafaf780}.document-name{display:flex;gap:11px;align-items:center;min-width:0}.document-name>svg{height:16px;width:16px;stroke:#91978f;fill:none;stroke-width:1.5;flex-shrink:0}#filename{font:11px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}#filemeta{color:#8a8e87;font-size:10px;white-space:nowrap}.document-actions{display:flex;align-items:center;gap:10px}.document-actions button{font-size:10px;color:#666d66}.document-actions button svg{width:14px;height:14px}.note-dot{width:5px;height:5px;border-radius:50%;background:var(--red)}.workspace{--split:60%;min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,var(--split)) 5px minmax(0,1fr)}.canvas-panel,.code-panel{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden}.panel-header{height:47px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:0 22px;font-size:11px;gap:8px}.panel-header>div{display:flex;align-items:center;gap:12px}.panel-index{font:9px var(--mono);color:#94998f}.panel-actions button{font-size:10px;padding:4px 6px}.panel-actions svg{height:13px;width:13px}.camera-label{display:flex;align-items:center;gap:5px;color:#7a8177;font-size:10px;white-space:nowrap}.camera-label input{accent-color:var(--red);height:12px;width:12px}.stage{position:relative;flex:1;min-height:0;background-image:linear-gradient(#e6e7df80 1px,transparent 1px),linear-gradient(90deg,#e6e7df80 1px,transparent 1px);background-size:48px 48px;overflow:hidden}.frame-host{position:absolute;inset:32px 28px 42px}.art-frame{position:absolute;width:100%;height:100%;border:0;inset:0;background:transparent;pointer-events:none}.art-frame.preparing{visibility:hidden}.gesture{position:absolute;inset:0;touch-action:none;cursor:grab}.gesture:active{cursor:grabbing}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font:9px var(--mono);letter-spacing:1.5px;color:#858a81}.red-dot{width:5px;height:5px;background:var(--red);border-radius:50%}.line-art{width:110px;margin:18px 0 10px}.line-art svg{width:100%;overflow:visible;fill:none;stroke:#bdc1b5;stroke-width:1.2}.line-art circle{fill:var(--paper);stroke:var(--red);stroke-width:1.6}.empty-state h2{font-size:clamp(25px,2.6vw,42px);font-weight:650;letter-spacing:-1.5px;line-height:1.2;white-space:pre-line;margin:8px 0 15px}.empty-state p{font-size:12px;line-height:1.9;color:#80857b;white-space:pre-line;margin:0 0 21px}.empty-state .dark-button{font-size:11px;padding:11px 19px}.example-button{font-size:11px;margin:7px 0 19px;color:#71796e}.example-button svg{width:13px}.empty-state small{font:8px var(--mono);letter-spacing:.8px;color:#a0a59a}.corner{position:absolute;width:12px;height:12px;border-color:#c4c9be;pointer-events:none}.tl{top:18px;left:18px;border-top:1px solid;border-left:1px solid}.tr{top:18px;right:18px;border-top:1px solid;border-right:1px solid}.bl{bottom:18px;left:18px;border-bottom:1px solid;border-left:1px solid}.br{bottom:18px;right:18px;border-bottom:1px solid;border-right:1px solid}.canvas-tools{position:absolute;bottom:15px;right:20px;display:flex;align-items:center;background:#f9faf6ec;border:1px solid var(--border);border-radius:7px;padding:1px 3px;box-shadow:0 3px 15px #20251b06}.canvas-tools button{width:30px;min-height:28px;padding:4px}.canvas-tools svg{height:13px;width:13px}#zoomLabel{font:9px var(--mono);min-width:33px;text-align:center}.tool-separator{height:14px;width:1px;background:var(--border);margin:0 5px}.canvas-bottom,.code-bottom{height:31px;flex-shrink:0;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:9px var(--mono);color:#92998c;gap:10px}.canvas-bottom>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#status{display:flex;align-items:center;gap:6px;white-space:nowrap}#status i{width:4px;height:4px;border-radius:50%;background:#b3b9ae}#status.running i{background:var(--red)}.splitter{background:#eeeee8;border-left:1px solid var(--border);border-right:1px solid var(--border);cursor:col-resize;touch-action:none}.splitter:hover,.splitter:focus{background:#b97870}.code-panel{background:#fafaf7}.source-format{font:9px var(--mono);color:#9b9e94}.code-empty{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px;text-align:center}.code-symbol{font:32px var(--mono);color:#c0c5b8;margin-bottom:14px}.code-empty p{font-size:12px;color:#848c7d;margin:0 0 8px}.code-empty small{font-size:10px;color:#a7ada0}.code-scroll{flex:1;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d0d4c9 transparent}.code-space{position:relative;min-width:100%}.code-rows{position:absolute;left:0;min-width:100%;width:max-content}.code-line{height:25px;line-height:25px;font-family:var(--mono);font-size:11px;display:flex;white-space:pre;border-left:2px solid transparent;padding-right:25px}.code-line.active{background:#a03d320b;border-left-color:var(--red)}.line-number{width:54px;flex-shrink:0;text-align:right;padding-right:16px;color:#b4b9af;font-size:9px;-webkit-user-select:none;user-select:none;position:sticky;left:0;background:#fafaf7}.active .line-number{color:var(--red);background:#f7efea}.source-text{color:#7a8274}.tag{color:#a44d3e}.attribute{color:#777664}.string{color:#588473}.follow-code{position:absolute;bottom:43px;right:15px;background:var(--ink);color:#fff;font-size:10px;box-shadow:0 4px 12px #0002}.follow-code:hover:not(:disabled){background:#363c37}.follow-code svg{width:12px}.chapter-panel{position:absolute;left:0;top:47px;bottom:31px;width:min(300px,85%);background:#f9faf6;z-index:5;border-right:1px solid var(--border);box-shadow:12px 0 30px #1d291410;display:flex;flex-direction:column}.chapter-heading{padding:12px 17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.chapter-heading strong{font-size:12px}#chapterList{overflow:auto;padding:10px}#chapterList button{display:flex;width:100%;justify-content:flex-start;text-align:left;font-size:11px;gap:13px;margin:3px 0}#chapterList button span:first-child{font:9px var(--mono);color:#9b9f94}#chapterList button span:last-child{overflow:hidden;text-overflow:ellipsis}#chapterList .active{background:#a03d3210;color:var(--red)}.transport{padding:18px 28px 17px;border-top:1px solid var(--border);background:#f9f9f5;flex-shrink:0}.timeline-info{display:flex;align-items:center;justify-content:space-between}.timeline-info>div{display:flex;align-items:center;gap:14px}#percentage{font:11px var(--mono);color:var(--red)}.time-label{font:10px var(--mono);color:#7d8477}#remaining{font:9px var(--mono);color:#a3a99b;min-width:100px;text-align:right}.timeline{position:relative;margin:8px 0 12px;height:23px}#seek{--progress:0%;position:absolute;inset:0;width:100%;height:20px;margin:0;appearance:none;background:transparent;cursor:pointer;z-index:2}#seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--red) var(--progress),#dadfd4 var(--progress))}#seek::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--red);border:3px solid #f9f9f5;box-shadow:0 0 0 1px var(--red);margin-top:-4px}#seek::-moz-range-track{height:3px;background:#dadfd4}#seek::-moz-range-progress{background:var(--red);height:3px}#seek::-moz-range-thumb{height:8px;width:8px;border:2px solid #f9f9f5;background:var(--red);border-radius:50%}.ticks{position:absolute;inset:15px 5px -3px}.ticks button{position:absolute;min-height:9px;width:8px;padding:0;border-radius:0}.ticks button:after{content:"";height:4px;width:1px;background:#b9c0b1}.controls{display:flex;justify-content:space-between;gap:15px;align-items:center}.playback-controls{display:flex;align-items:center;gap:7px}.playback-controls>button:not(.play-button){color:#75816e;width:33px}.playback-controls>button svg{width:15px;height:15px}.play-button{min-width:105px;height:36px;font-size:11px}.control-separator{height:20px;background:var(--border);width:1px;margin:0 12px}.speed-control{display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;height:34px}.speed-control button{min-height:30px;width:27px;padding:3px;color:#7c8774}.speed-control select{border:0;padding:4px 0 4px 6px;font:11px var(--mono);width:55px}.step-count{font:9px var(--mono);color:#9aa28f;margin-left:12px}.mode-controls{display:flex;gap:8px}.mode-controls select{font-size:11px;padding:8px 10px}footer{display:flex;align-items:center;justify-content:space-between;height:35px;flex-shrink:0;border-top:1px solid var(--border);padding:0 28px;color:#a0a798;font-size:9px}.footer-right{font:8px var(--mono);letter-spacing:1px}.footer-right i{color:var(--red);font-size:15px;font-style:normal;margin:0 8px}.drop-overlay{position:absolute;inset:10px;border:2px dashed var(--red);background:#f7f6efef;z-index:10;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:15px;color:var(--red);font-size:20px;pointer-events:none}.drop-overlay svg{height:30px;width:30px;fill:none;stroke:currentColor;stroke-width:1.5}.notice{position:fixed;bottom:177px;left:50%;transform:translate(-50%);max-width:min(680px,90vw);padding:13px 20px;background:var(--ink);color:#fff;border-radius:9px;font-size:12px;line-height:1.6;z-index:50;box-shadow:0 10px 30px #0002}dialog{border:1px solid #dce0d4;border-radius:18px;background:var(--paper);padding:25px 30px;max-width:580px;width:90vw;color:var(--ink)}dialog::backdrop{background:#141a1866;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);color:#919786}dialog h2{font-size:24px;font-weight:600}dialog p{white-space:pre-line;color:#707965;line-height:1.9;font-size:13px}.mobile-tabs{display:none}.canvas-panel:fullscreen{background:var(--paper);width:100%;height:100%}#app{height:100%;min-height:0}@media(min-width:1700px){body{padding:28px}.topbar{height:99px}.frame-host{inset:45px 40px 55px}.line-art{width:145px;margin:25px 0 15px}.empty-state h2{font-size:46px}.empty-state p{font-size:14px}.code-line{font-size:12px}}@media(max-height:800px)and (min-width:761px){.line-art{width:70px;margin:10px 0 0}.empty-state h2{font-size:28px;margin:8px 0}.empty-state p{margin-bottom:12px}.empty-state .example-button{margin-bottom:8px}.topbar{height:72px}.transport{padding-top:12px;padding-bottom:12px}.document-bar{height:43px}}@media(max-width:1100px){.privacy{display:none}.topbar{padding:0 22px}.panel-header{padding:0 14px}.panel-actions{gap:4px!important}.panel-actions button span,.step-count{display:none}#filemeta{font-size:9px}.document-bar{padding:0 20px}.control-separator{margin:0 5px}.transport{padding-left:20px;padding-right:20px}}@media(max-width:760px){body{padding:8px;min-height:590px}.shell{border-radius:18px}.topbar{height:69px;padding:0 15px;gap:10px}.brand-mark{display:none}h1{font-size:14px}.brand p{font-size:9px;max-width:170px}.top-actions{gap:3px}.top-actions .text-button{padding:5px 7px}.top-actions #help{display:none}#import{padding:9px}#import span{display:none}.document-bar{height:43px;padding:0 14px}#filename{max-width:165px;font-size:10px}#filemeta{display:none}.document-actions{gap:0}.document-actions #download span{display:none}.mobile-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 12px;gap:20px;height:36px;flex-shrink:0}.mobile-tabs button{border-radius:0;font-size:11px;min-height:35px;padding:5px 10px;color:#919787}.mobile-tabs .selected{border-bottom:2px solid var(--red);color:var(--ink)}.workspace{display:flex}.canvas-panel,.code-panel{width:100%;flex:1}.workspace .code-panel,.splitter,.workspace.show-source .canvas-panel{display:none}.workspace.show-source .code-panel{display:flex}.panel-header{height:36px;font-size:10px}.panel-index{font-size:8px}.frame-host{inset:22px 15px 40px}.empty-state{padding:12px}.empty-state>.eyebrow{font-size:8px}.line-art{width:66px;margin:9px 0 0}.empty-state h2{font-size:27px;line-height:1.2;margin:8px 0 10px}.empty-state p{font-size:11px;line-height:1.6;margin-bottom:12px}.empty-state .dark-button{padding:9px 15px}.example-button{margin:2px 0 5px;font-size:10px}.empty-state small{font-size:7px}.corner{width:8px;height:8px}.tl,.tr{top:12px}.bl,.br{bottom:12px}.tl,.bl{left:12px}.tr,.br{right:12px}.canvas-bottom,.code-bottom{height:26px;padding:0 14px;font-size:8px}.transport{padding:10px 14px 12px}.timeline-info .eyebrow{font-size:8px;letter-spacing:.5px}.timeline-info>div{gap:7px}#percentage,.time-label{font-size:9px}#remaining{display:none}.timeline{margin:6px 0 7px}.controls{flex-wrap:wrap;gap:10px}.playback-controls{justify-content:center;width:100%;gap:4px}.control-separator{margin:0 5px}.play-button{min-width:90px;height:33px}.playback-controls>button:not(.play-button){width:28px;padding:5px}.mode-controls{width:100%;justify-content:center}.mode-controls select{font-size:10px;padding:5px 9px}.speed-control{height:31px}.speed-control button{width:22px}.speed-control select{width:49px;font-size:10px}.footer-right{display:none}footer{padding:0 14px;height:27px;font-size:8px}.notice{bottom:175px;font-size:11px;width:90vw}.chapter-panel{top:36px;bottom:26px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}.native-value{position:absolute!important;width:1px!important;height:1px!important;clip-path:inset(100%)!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}.select-trigger{min-height:34px;padding:7px 12px;border:1px solid var(--border);background:#fafaf6;font-size:11px;gap:16px;white-space:nowrap}.select-trigger:after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}.select-trigger[aria-expanded=true]{border-color:#b67167;background:#f4ece6;color:var(--red)}.speed-control .select-trigger{border:0;min-width:63px;font:11px var(--mono);padding:4px 8px;gap:9px;min-height:30px;background:transparent}.select-menu{position:fixed;z-index:1000;padding:5px;background:#fafaf6;border:1px solid #d5d9ce;border-radius:10px;box-shadow:0 12px 35px #1c281b20;max-height:320px;overflow:auto}.select-menu button{width:100%;justify-content:space-between;padding:8px 11px;min-height:34px;font:11px var(--mono);text-align:left;border-radius:5px}.select-menu button[aria-selected=true]{color:var(--red);background:#a03d320d}.select-menu button[aria-selected=true]:after{content:"✓";font-size:11px}.select-menu button:hover,.select-menu button:focus-visible{background:#efefe7;outline:0;color:var(--red)}.panel-actions .select-trigger{min-height:28px;padding:5px 8px;font-size:10px}#minimapToggle[aria-pressed=true]{color:var(--red);background:#a03d3209}.minimap{position:absolute;right:20px;bottom:60px;width:170px;border:1px solid #d8ddd0;border-radius:9px;background:#fafaf7f5;box-shadow:0 6px 25px #1c281b12;overflow:hidden;z-index:2}.minimap-header{display:flex;align-items:center;justify-content:space-between;padding:3px 7px 3px 11px;border-bottom:1px solid #e2e5dc;font-size:9px;color:#7a8273}.minimap-header button{padding:3px;min-height:22px;width:22px}.minimap-header svg{width:11px;height:11px}.minimap-body{position:relative;width:100%;max-height:180px;overflow:hidden}.minimap-body img,.minimap-body>svg{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;pointer-events:none}#minimapRect{fill:#a03d3210;stroke:#a03d32;stroke-width:1.4;vector-effect:non-scaling-stroke}.code-line.active .source-text{position:relative}.code-line.active .source-text>span:not(.code-ink){opacity:.2}.code-ink{position:absolute;top:0;left:0;display:block;width:var(--lit,0ch);overflow:hidden;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:pre;color:inherit}.code-line.writing{background:#a03d3211}.code-line.writing .code-ink{border-right:1px solid #a03d32}.code-line.future .source-text{opacity:.2}.code-line.future .line-number{opacity:.45}.brand-mark{font-size:29px;letter-spacing:-1.3px;line-height:1.2;padding-right:22px}.brand-mark>span:first-child{font-style:normal}.brand h1{font-size:16px;font-weight:550;letter-spacing:-.3px;margin:0}@media(max-width:760px){.brand{gap:11px}.brand-mark{display:block;font-size:23px;padding-right:12px;letter-spacing:-1px}.brand h1{font-size:12px;max-width:110px;line-height:1.3}}@media(max-width:760px){.minimap{width:112px;right:14px;bottom:54px}.minimap-header{font-size:8px;padding-left:8px}.minimap-body{max-height:110px}.panel-actions{gap:3px!important}.panel-actions .select-trigger{font-size:9px;gap:7px;padding:4px 6px;min-height:26px}.mode-controls .select-trigger{font-size:10px;min-height:28px;padding:5px 10px}.speed-control .select-trigger{min-width:53px;font-size:10px;padding:4px 5px}.select-menu button{min-height:36px}}:root{font-family:Helvetica Neue,Helvetica,Arial,Microsoft YaHei,sans-serif;--paper:#f2f2ef;--border:#ced0ca;--muted:#686b65;font-size:14px}.shell{background:#e6e7e2}.topbar{background:#f2f2ef}.brand-mark{font-size:35px;font-weight:750;letter-spacing:-1.6px}.brand h1{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:25px;font-weight:700;letter-spacing:-.8px}.top-actions .text-button{font-size:13px}.dark-button{font-size:14px}.privacy{font-size:10px;color:#686d63}.document-bar{background:#e7e8e3}#filename{font-size:13px;font-weight:600}#filemeta{font-size:12px;color:#6a7065}.document-actions button{font-size:12px;color:#565e50}.panel-header{background:#e6e7e2;height:52px;flex-basis:52px;font-size:14px;font-weight:650;padding:0 18px}.panel-index{font-size:11px}.panel-actions button,.panel-actions .select-trigger{font-size:12px}.panel-actions svg{height:16px;width:16px}.source-format{font-size:11px}.stage{background-color:#f1f2ed;background-image:linear-gradient(#dce0d780 1px,transparent 1px),linear-gradient(90deg,#dce0d780 1px,transparent 1px)}.code-panel{background:#f5f5f1;box-shadow:inset 0 0 0 1px #ffffff80}.code-scroll{background:#f5f5f1}.code-line{font-size:13px;height:28px;line-height:28px}.line-number{background:#eceee7;color:#88907f;font-size:11px}.source-text{color:#596550}.code-line.active{background:#a03d320d}.code-line.writing{background:#a03d3214}.code-bottom,.canvas-bottom{height:34px;background:#e6e8e1;font-size:11px;color:#66705d}.canvas-bottom #status{font-weight:600}.splitter{background:#d0d3ca;border-color:#c6cbbf}.transport{background:#e9ebe5;box-shadow:inset 0 1px #ffffffb0}.timeline-info .eyebrow{font-size:11px;font-weight:600;color:#606b56}#percentage{font-size:14px;font-weight:700}.time-label{font-size:12px;color:#555f4b}#remaining{font-size:11px;color:#738069}.play-button{height:40px;font-size:14px;min-width:112px}.playback-controls>button:not(.play-button){width:36px}.playback-controls>button svg{width:18px;height:18px}.select-trigger,.mode-controls .select-trigger{font-size:13px;font-weight:550;min-height:36px;background:#f4f5ef;border-color:#c8cec1}.speed-control{height:36px;background:#f4f5ef}.speed-control .select-trigger{font-size:13px;min-width:70px}.select-menu{background:#f2f3ed;border-color:#c6ccbf;box-shadow:0 14px 35px #1c281b26}.select-menu button{font-size:13px;min-height:38px}.step-count{font-size:12px;color:#707b64}.canvas-tools{background:#f2f4ecef;border-color:#c5cbbb}#zoomLabel{font-size:11px;min-width:40px}.minimap{background:#edf0e7ed;border-color:#c6ccbc}.minimap-header{font-size:11px;color:#606a54}.follow-code{font-size:12px}footer{background:#dfe2d8;color:#707a64;font-size:11px}.footer-right{font-size:9px}.chapter-panel{left:12px;top:64px;bottom:46px;width:164px;border:1px solid #c9cebed9;border-radius:10px;background:#e7e9e0b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 22px #26351b12;overflow:hidden}.chapter-heading{padding:7px 9px;background:#f8faf344;gap:4px}.chapter-heading strong{font-size:12px;font-weight:650;white-space:nowrap}.chapter-heading button{width:26px;min-height:28px;padding:4px}#chapterList{padding:5px;scrollbar-width:thin;scrollbar-color:#b5bca9 transparent}#chapterList button{font-size:12px;min-height:36px;gap:8px;padding:7px 8px;margin:2px 0}#chapterList button span:first-child{font-size:10px;width:17px;flex-shrink:0;color:#7a836d}#chapterList button span:last-child{white-space:nowrap;text-overflow:ellipsis}#chapterList button.active{background:#fcf6eee0;color:var(--red);font-weight:650;box-shadow:inset 2px 0 var(--red)}#chaptersButton[aria-pressed=true]{background:#daddd2;color:#505b42}.has-chapters .frame-host{left:194px}.has-chapters .gesture{left:184px}@media(min-width:1700px){.brand h1{font-size:29px}.panel-header{font-size:15px}.code-line{font-size:14px}.chapter-panel{width:178px}.has-chapters .frame-host{left:210px}.has-chapters .gesture{left:198px}}@media(max-width:1100px){.brand h1{font-size:22px}#filemeta,.panel-actions .select-trigger{font-size:11px}.panel-header{gap:4px;padding:0 12px}.panel-header>div{gap:7px}.chapter-panel{width:144px}.has-chapters .frame-host{left:166px}.has-chapters .gesture{left:157px}}@media(max-width:760px){.brand-mark{font-size:26px;padding-right:10px}.brand{gap:10px}.brand h1{font-size:15px;max-width:118px;line-height:1.15;letter-spacing:-.3px}.top-actions .text-button{font-size:12px}.document-bar{height:44px}#filename{font-size:12px;max-width:160px}#filemeta{display:none}.panel-header{height:42px;flex-basis:42px;font-size:12px}.panel-index{font-size:9px}.panel-actions button,.panel-actions .select-trigger{font-size:11px}.panel-actions .select-trigger{min-height:29px}.code-line{font-size:12px}.line-number{font-size:10px}.chapter-panel{left:8px;top:50px;bottom:auto;width:126px;max-height:46%;background:#e7e9e0d1}.chapter-heading strong{font-size:11px}#chapterList button{font-size:11px;min-height:32px;gap:5px}.has-chapters .frame-host{left:15px}.has-chapters .gesture{left:0}.canvas-bottom,.code-bottom{font-size:10px;height:28px}.transport{padding:10px 12px 12px}.play-button{min-width:91px;font-size:13px;height:35px}.playback-controls>button:not(.play-button){width:28px}.playback-controls{gap:3px}.speed-control .select-trigger{font-size:12px;min-width:58px}.speed-control{height:33px}.mode-controls .select-trigger{font-size:12px;min-height:31px}.time-label{font-size:11px}#percentage{font-size:12px}.timeline-info .eyebrow,.minimap-header{font-size:10px}footer{font-size:9px;height:28px}.code-empty p{font-size:13px}.code-empty small{font-size:11px}}