*,:before,:after{box-sizing:border-box}html,body{color:#cdd6f4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#13131f;height:100%;margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#root{height:100%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}.app{--bg:#13131f;--bg-surface:#1e1e2e;--bg-elevated:#313244;--bg-hover:#45475a;--border:#313244;--border-btn:#45475a;--border-btn-hover:#7f849c;--text:#cdd6f4;--text-muted:#7f849c;--text-title:#cba6f7;--badge-error-bg:#f38ba833;--badge-error-fg:#f38ba8;--badge-error-border:#f38ba866;--badge-warn-bg:#f9e2af33;--badge-warn-fg:#f9e2af;--badge-warn-border:#f9e2af66;--badge-ok-bg:#a6e3a133;--badge-ok-fg:#a6e3a1;--badge-ok-border:#a6e3a166;--diag-error-bg:#f38ba814;--diag-error-border:#f38ba8;--diag-warn-bg:#f9e2af14;--diag-warn-border:#f9e2af;--diag-info-bg:#89b4fa14;--diag-info-border:#89b4fa;--diag-severity-error:#f38ba8;--diag-severity-warn:#f9e2af;--diag-severity-info:#89b4fa;--diag-location:#7f849c;--diag-message:#cdd6f4;--status-error-bg:#3b1a1a;--status-error-fg:#f38ba8;--tooltip-bg:#1e1e2e;--tooltip-border:#45475a;--tooltip-text:#cdd6f4}.app[data-theme=light]{--bg:#f4f4f8;--bg-surface:#fff;--bg-elevated:#e8e8f0;--bg-hover:#d8d8e4;--border:#e0e0ea;--border-btn:#c4c4d0;--border-btn-hover:#9090a0;--text:#1e1e2e;--text-muted:#6c6c80;--text-title:#6d28d9;--badge-error-bg:#b91c1c1a;--badge-error-fg:#b91c1c;--badge-error-border:#b91c1c4d;--badge-warn-bg:#b4780a1a;--badge-warn-fg:#92600a;--badge-warn-border:#b4780a4d;--badge-ok-bg:#15803d1a;--badge-ok-fg:#15803d;--badge-ok-border:#15803d4d;--diag-error-bg:#b91c1c0f;--diag-error-border:#b91c1c;--diag-warn-bg:#b4780a0f;--diag-warn-border:#92600a;--diag-info-bg:#1d4ed80f;--diag-info-border:#1d4ed8;--diag-severity-error:#b91c1c;--diag-severity-warn:#92600a;--diag-severity-info:#1d4ed8;--diag-location:#6c6c80;--diag-message:#1e1e2e;--status-error-bg:#fef2f2;--status-error-fg:#b91c1c;--tooltip-bg:#fff;--tooltip-border:#c4c4d0;--tooltip-text:#1e1e2e}.app{background:var(--bg);height:100vh;color:var(--text);flex-direction:column;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px;display:flex}.toolbar{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.toolbar-left{align-items:center;gap:8px;display:flex}.toolbar-right{align-items:center;gap:6px;display:flex}.app-title{color:var(--text-title);letter-spacing:.02em;white-space:nowrap;margin-right:4px;font-size:15px;font-weight:700}.toolbar-select{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border-btn);cursor:pointer;border-radius:6px;outline:none;height:28px;padding:4px 8px;font-size:12px}.toolbar-select:hover{border-color:var(--border-btn-hover)}.toolbar-divider{background:var(--border);flex-shrink:0;width:1px;height:20px;margin:0 2px}.scale-select{color:#cdd6f4;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e1e2ed9;border:1px solid #45475a;border-radius:6px;outline:none;height:24px;padding:4px 8px;font-size:12px}.scale-select:hover{border-color:#7f849c}.btn{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border-btn);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;height:28px;padding:4px 10px;font-size:12px;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--bg-hover);border-color:var(--border-btn-hover)}.btn:disabled{opacity:.4;cursor:default}.btn-theme{justify-content:center;min-width:52px}.btn-active{background:var(--bg-hover);border-color:var(--text-title);color:var(--text-title)}.status-bar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;height:28px;padding:4px 16px;font-size:12px;display:flex}.status-bar.loading{background:var(--bg-surface);color:var(--text-muted)}.status-bar.status-error{background:var(--status-error-bg);color:var(--status-error-fg)}.status-bar.ready{background:var(--bg-surface)}.badge{border-radius:10px;align-items:center;padding:1px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-error{background:var(--badge-error-bg);color:var(--badge-error-fg);border:1px solid var(--badge-error-border)}.badge-warn{background:var(--badge-warn-bg);color:var(--badge-warn-fg);border:1px solid var(--badge-warn-border)}.badge-ok{background:var(--badge-ok-bg);color:var(--badge-ok-fg);border:1px solid var(--badge-ok-border)}.main{flex:1;min-height:0;display:flex;overflow:hidden}.editor-pane{flex-direction:column;flex:0 0 50%;min-width:0;display:flex;overflow:hidden}.split-divider{background:var(--border);cursor:col-resize;z-index:1;flex:0 0 4px;transition:background .15s}.split-divider:hover,.split-divider:active{background:var(--text-title)}.editor-pane .cm-editor{height:100%;font-size:var(--editor-font-size,13px)}.editor-pane>div{height:100%}.preview-area{flex-direction:column;flex:1;min-width:0;display:flex;position:relative;overflow:hidden}.preview-pane{cursor:grab;-webkit-user-select:none;user-select:none;background:#fff;flex:1;position:relative;overflow:hidden}.preview-pane.grabbing{cursor:grabbing}.svg-container{transform-origin:0 0;will-change:transform;padding:16px;display:inline-block}.svg-container svg{display:block}.preview-controls{z-index:10;gap:4px;display:flex;position:absolute;top:8px;right:8px}.btn-preview-ctrl{color:#cdd6f4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e1e2ed9;border:1px solid #45475a;height:24px;padding:3px 8px;font-size:11px}.btn-preview-ctrl:hover{background:#313244e6;border-color:#7f849c}.btn-preview-ctrl-active{color:#cba6f7;background:#313244e6;border-color:#cba6f7}.legend-panel{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e1e2eeb;border:1px solid #45475a;border-radius:8px;min-width:140px;max-width:200px;padding:8px 0;position:absolute;top:40px;right:8px;box-shadow:0 4px 12px #0006}.legend-header{text-transform:uppercase;letter-spacing:.08em;color:#7f849c;border-bottom:1px solid #313244;margin-bottom:4px;padding:4px 12px 6px;font-size:11px;font-weight:700}.legend-item{align-items:center;gap:8px;padding:4px 12px;display:flex}.legend-swatch{border-radius:2px;flex-shrink:0;width:12px;height:12px}.legend-label{color:#cdd6f4;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.filter-panel{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e1e2eeb;border:1px solid #45475a;border-radius:8px;min-width:160px;max-width:220px;max-height:60vh;padding:8px 0;position:absolute;top:40px;left:8px;overflow-y:auto;box-shadow:0 4px 12px #0006}.filter-header{text-transform:uppercase;letter-spacing:.08em;color:#7f849c;border-bottom:1px solid #313244;margin-bottom:4px;padding:4px 12px 6px;font-size:11px;font-weight:700}.filter-section{margin-bottom:4px;padding:4px 12px}.filter-section-title{text-transform:uppercase;letter-spacing:.06em;color:#7f849c;margin-bottom:4px;font-size:10px;font-weight:600}.filter-item{cursor:pointer;color:#cdd6f4;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:2px 0;font-size:12px;display:flex}.filter-item input[type=checkbox]{cursor:pointer;accent-color:#cba6f7}.filter-swatch{border-radius:2px;flex-shrink:0;width:10px;height:10px;display:inline-block}.filter-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.filter-tag-input{color:#cdd6f4;box-sizing:border-box;background:#181825;border:1px solid #45475a;border-radius:4px;outline:none;width:100%;padding:4px 6px;font-size:12px}.filter-tag-input:focus{border-color:#cba6f7}.filter-reset-btn{color:#7f849c;cursor:pointer;background:0 0;border:1px solid #45475a;border-radius:4px;width:calc(100% - 24px);margin:0 12px 4px;padding:4px;font-size:11px;display:block}.filter-reset-btn:hover{color:#cdd6f4;background:#313244}.detail-panel{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e1e2ef2;border:1px solid #45475a;border-radius:8px;min-width:200px;max-width:260px;position:absolute;bottom:8px;right:8px;box-shadow:0 4px 12px #0006}.detail-header{text-transform:uppercase;letter-spacing:.08em;color:#7f849c;border-bottom:1px solid #313244;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;font-weight:700;display:flex}.detail-close{color:#7f849c;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:12px;line-height:1}.detail-close:hover{color:#cdd6f4}.detail-list{grid-template-columns:auto 1fr;gap:4px 10px;padding:8px 12px;font-size:12px;display:grid}.detail-list dt{color:#7f849c;white-space:nowrap}.detail-list dd{color:#cdd6f4;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.detail-tooltip{font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;white-space:pre-wrap!important}.svg-container .tdsl-lane-band-even{fill:#fff}.svg-container .tdsl-lane-band-odd{fill:#f5f5f7}.svg-container .tdsl-axis-baseline{stroke:#888;stroke-width:1px}.svg-container .tdsl-axis-tick{stroke:#e0e0e0;stroke-width:1px}.svg-container .tdsl-axis-text{fill:#666;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px}.svg-container .tdsl-lane-label{fill:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;font-weight:500}.svg-container .tdsl-item-label{fill:#fff;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px}.svg-container .tdsl-event-stem{stroke:#666;stroke-width:1.5px}.svg-container .tdsl-event-hit{fill:#0000}.svg-container .tdsl-span{fill-opacity:.78;stroke-width:1px;cursor:pointer;transition:fill-opacity .15s}.svg-container .tdsl-span:hover{fill-opacity:1}.svg-container .tdsl-event-range{fill-opacity:.75;stroke-width:1px;cursor:pointer;transition:fill-opacity .15s}.svg-container .tdsl-event-range:hover{fill-opacity:1}.svg-container .tdsl-event-dot{stroke:#fff;stroke-width:1px;cursor:pointer}.preview-placeholder{color:#888;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;display:flex}.diagnostics-panel{background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0;height:200px;overflow:auto}.diagnostics-header{background:var(--bg-surface);border-bottom:1px solid var(--border);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;z-index:1;padding:6px 16px;font-size:12px;font-weight:600;position:sticky;top:0}.diagnostics-list{padding:4px 0;list-style:none}.diagnostic-item{border-left:3px solid #0000;align-items:baseline;gap:8px;padding:5px 16px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:13px;line-height:1.4;display:flex}.diagnostic-item.error{background:var(--diag-error-bg);border-left-color:var(--diag-error-border)}.diagnostic-item.warning{background:var(--diag-warn-bg);border-left-color:var(--diag-warn-border)}.diagnostic-item.info{background:var(--diag-info-bg);border-left-color:var(--diag-info-border)}.diag-severity{min-width:42px;font-size:11px;font-weight:700}.diagnostic-item.error .diag-severity{color:var(--diag-severity-error)}.diagnostic-item.warning .diag-severity{color:var(--diag-severity-warn)}.diagnostic-item.info .diag-severity{color:var(--diag-severity-info)}.diag-location{color:var(--diag-location);min-width:48px;font-size:11px}.diag-message{color:var(--diag-message);word-break:break-word;flex:1}.diagnostic-item.clickable{cursor:pointer}.diagnostic-item.clickable:hover{filter:brightness(1.08)}.export-menu-wrapper{position:relative}.export-menu{z-index:200;background:var(--bg-surface);border:1px solid var(--border-btn);border-radius:8px;min-width:180px;padding:4px 0;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 16px #00000059}.export-menu-section{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:6px 12px 2px;font-size:10px;font-weight:700}.export-menu-item{text-align:left;width:100%;color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:6px 14px;font-size:13px;display:block}.export-menu-item:hover:not(:disabled){background:var(--bg-elevated)}.export-menu-item:disabled{opacity:.4;cursor:default}.toast-container{z-index:3000;pointer-events:none;flex-direction:column;gap:8px;max-width:min(360px,100vw - 32px);display:flex;position:fixed;bottom:16px;right:16px}.toast{border:1px solid var(--border-btn);background:var(--bg-surface);color:var(--text);pointer-events:auto;border-radius:6px;align-items:center;gap:12px;padding:10px 12px;font-size:13px;line-height:1.4;animation:.18s ease-out toast-slide-in;display:flex;box-shadow:0 6px 20px #00000059}.toast-success{border-color:var(--badge-ok-border);background:var(--badge-ok-bg);color:var(--badge-ok-fg)}.toast-error{border-color:var(--badge-error-border);background:var(--badge-error-bg);color:var(--badge-error-fg)}.toast-info{border-color:var(--border-btn)}.toast-message{word-break:break-word;flex:1}.toast-close{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:14px}.toast-close:hover{opacity:1;background:#ffffff14}.app[data-theme=light] .toast-close:hover{background:#0000000f}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tdsl-tooltip{z-index:1000;pointer-events:none;background:var(--tooltip-bg);color:var(--tooltip-text);border:1px solid var(--tooltip-border);white-space:pre-line;border-radius:6px;max-width:280px;padding:8px 10px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:12px;line-height:1.6;position:fixed;box-shadow:0 4px 12px #0006}.cm-tooltip.cm-tooltip-hover{background:0 0;border:none}.tdsl-hover-tooltip{background:var(--tooltip-bg);color:var(--tooltip-text);border:1px solid var(--tooltip-border);border-radius:6px;max-width:320px;padding:8px 10px;font-size:12px;line-height:1.6;box-shadow:0 4px 12px #0006}.tdsl-hover-head{align-items:baseline;gap:6px;margin-bottom:4px;display:flex}.tdsl-hover-kind{text-transform:uppercase;letter-spacing:.04em;background:var(--tooltip-border);color:var(--tooltip-text);opacity:.85;border-radius:4px;padding:1px 6px;font-size:10px}.tdsl-hover-title{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-weight:600}.tdsl-hover-body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.modal-overlay{z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface);border:1px solid var(--border-btn);border-radius:12px;min-width:360px;max-width:480px;box-shadow:0 8px 32px #00000080}.modal-header{border-bottom:1px solid var(--border);color:var(--text);justify-content:space-between;align-items:center;padding:14px 18px;font-size:14px;font-weight:700;display:flex}.modal-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:0 4px;font-size:14px}.modal-close:hover{color:var(--text)}.shortcuts-table{border-collapse:collapse;width:100%;padding:8px 0}.shortcuts-table td{color:var(--text);padding:7px 18px;font-size:13px}.shortcuts-table td:first-child{white-space:nowrap;width:1%}.shortcuts-table tr:hover td{background:var(--bg-elevated)}.kbd{background:var(--bg-elevated);border:1px solid var(--border-btn);color:var(--text);white-space:nowrap;border-radius:4px;padding:1px 6px;font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;display:inline-block}.export-menu-left{left:0;right:auto}.modal-settings{flex-direction:column;min-width:360px;max-width:480px;max-height:80vh;display:flex}.settings-body{padding:8px 0 12px;overflow-y:auto}.settings-section{flex-direction:column;gap:8px;padding:10px 18px;display:flex}.settings-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:700}.settings-row{flex-wrap:wrap;gap:6px;display:flex}.settings-divider{border:none;border-top:1px solid var(--border);margin:4px 0}.settings-hint{color:var(--text-muted);align-self:center;font-size:11px}.modal-gallery{flex-direction:column;min-width:480px;max-width:600px;max-height:80vh;display:flex}.gallery-list{margin:0;padding:8px 0;list-style:none;overflow-y:auto}.gallery-item{cursor:pointer;text-align:left;background:0 0;border:none;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:10px 18px;display:flex}.gallery-item:hover{background:var(--bg-elevated)}.gallery-item-label{color:var(--text);font-size:13px;font-weight:600}.gallery-item-desc{color:var(--text-muted);font-size:12px}.modal-history{flex-direction:column;min-width:480px;max-width:620px;max-height:80vh;display:flex}.history-body{flex-direction:column;gap:0;padding:8px 0 12px;display:flex;overflow-y:auto}.history-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:10px 18px 4px;font-size:11px;font-weight:700}.history-list{margin:0;padding:0;list-style:none}.history-item{border-bottom:1px solid var(--border)}.history-item:last-child{border-bottom:none}.history-item-row{align-items:center;gap:6px;padding:6px 12px 6px 18px;display:flex}.history-restore-btn{cursor:pointer;text-align:left;color:var(--text);background:0 0;border:none;border-radius:4px;flex:1;padding:4px 0;font-size:13px}.history-restore-btn:hover{color:var(--text-title);text-decoration:underline}.history-item-actions{flex-shrink:0;gap:4px;display:flex}.history-rename-row{align-items:center;gap:6px;padding:6px 12px 6px 18px;display:flex}.history-rename-input{background:var(--bg-elevated);border:1px solid var(--border-btn);color:var(--text);border-radius:4px;flex:1;padding:4px 8px;font-size:13px}.history-rename-input:focus{border-color:var(--border-btn-hover);outline:none}.history-empty{color:var(--text-muted);text-align:center;padding:24px 18px;font-size:13px}.history-footer{border-top:1px solid var(--border);justify-content:flex-end;margin-top:8px;padding:10px 18px;display:flex}.btn-sm{min-height:unset;padding:3px 8px;font-size:11px}.btn-danger{color:#f38ba8;background:#f38ba826;border-color:#f38ba866}.btn-danger:hover{background:#f38ba840}.mobile-tab-bar{border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;display:none}.mobile-tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:12px 0;font-family:inherit;font-size:14px;transition:color .15s,border-color .15s}.mobile-tab:hover{color:var(--text)}.mobile-tab-active{color:var(--text-title);border-bottom-color:var(--text-title)}@media (width<=1024px) and (width>=769px){.main{flex-direction:column}.split-divider{display:none}.editor-pane{border-right:none;border-bottom:1px solid var(--border);width:100%;height:50%;flex:0 0 50%!important}.preview-area{width:100%;height:50%;flex:0 0 50%!important}}@media (width<=768px){.mobile-tab-bar{display:flex}.mobile-hidden{display:none!important}.split-divider{display:none}.main{flex-direction:column}.editor-pane,.preview-area{border-right:none;width:100%;height:100%;flex:0 0 100%!important}.btn,.toolbar-select{height:36px;padding:6px 12px;font-size:13px}.toolbar{flex-wrap:wrap;gap:6px;height:auto;min-height:52px;padding:6px 12px}.toolbar-left,.toolbar-right{flex-wrap:wrap;gap:6px}.app-title{font-size:14px}.mobile-tab{padding:14px 0}.diagnostics-panel{height:160px}}.stale-preview-badge{z-index:10;color:#fff;white-space:nowrap;pointer-events:none;background:#dc9600eb;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:500;position:absolute;top:8px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #0000004d}.cm-jump-highlight{transition:background .5s ease-out;background:#fad23259!important}.svg-container .tdsl-item-cursor-highlight rect.tdsl-span,.svg-container .tdsl-item-cursor-highlight rect.tdsl-event-range{stroke:#facc15;stroke-width:3px;filter:brightness(1.25)}.svg-container .tdsl-item-cursor-highlight line.tdsl-event-stem{stroke:#facc15;stroke-width:3px}.svg-container .tdsl-item-cursor-highlight circle.tdsl-event-dot{stroke:#facc15;stroke-width:3px;filter:brightness(1.25)}