:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#232323;color:#e8e8e8;font-family:system-ui,-apple-system,sans-serif}#root{height:100%}.app{display:grid;grid-template-columns:280px 1fr 320px;grid-template-areas:"left main right";height:100%}.aside-left{grid-area:left;background:#1b1b1b;border-right:1px solid #333;overflow:auto;min-height:0}.main{grid-area:main}.aside{grid-area:right}.aside-toggle,.aside-backdrop{display:none}@media (max-width: 720px){.aside-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:15}}@media (max-width: 720px){.app{grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:"main" "left"}.aside-left{height:40vh;border-right:none;border-top:1px solid #333}.app.dev-mode .aside-left{display:none}.aside{position:fixed;inset:0 0 0 auto;width:min(320px,100vw);transform:translate(100%);transition:transform .2s ease;z-index:20;box-shadow:-8px 0 24px #0006}.app.aside-open .aside{transform:translate(0)}.aside-toggle{display:flex;right:16px!important;transition:transform .2s ease}.app.aside-open .aside-toggle{transform:translate(calc(-1*min(320px,100vw)))}.dev-toggle:not(.aside-toggle){right:auto!important}.app.aside-open .dev-toggle:not(.aside-toggle),.app.aside-open .github-btn{display:none}.github-btn{left:16px!important}.center-btn{left:64px!important}.dev-toggle:not(.aside-toggle):not(.github-btn):not(.center-btn){left:112px!important}}.main{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}.main-split .tree-pane{flex:1 1 55%}.main-split .dev{flex:1 1 45%;border-top:1px solid #333}.tree-pane{position:relative;flex:1 1 auto;min-height:0;padding:16px}.canvas{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.canvas:active{cursor:grabbing}.tree-svg{display:block;transform-origin:0 0;will-change:transform}.error{background:#3b1a1a;border:1px solid #7a2b2b;color:#f5b5b5;border-radius:8px;padding:12px 14px;font-size:14px;display:flex;flex-direction:column;gap:4px}.error strong{color:#f87171;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.error-inline{padding:8px 10px;font-size:13px}.init-list{font-size:12px;color:#9a9a9a;word-break:break-word;line-height:1.5}.init-list span{color:#b8b8b8;font-weight:600}.checkbox{flex-direction:row!important;align-items:center;gap:8px!important;color:#e8e8e8!important}.checkbox input{width:16px;height:16px;margin:0;accent-color:#2563eb}.dev{display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto;min-height:0;background:#1b1b1b}.dev section{display:flex;flex-direction:column;gap:6px}.dev h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a}.dev pre{margin:0;background:#141414;border:1px solid #2a2a2a;border-radius:6px;padding:12px;font-size:12px;color:#d4d4d4;overflow:auto}.center-btn{right:384px!important}.github-btn{right:432px!important;text-decoration:none}.dev-toggle{padding:0;overflow:hidden}.dev-toggle svg{width:20px;height:20px;color:#e8e8e8;opacity:.75}.dev-toggle:hover svg,.dev-toggle.active svg{opacity:1}.dev-toggle{position:fixed;bottom:16px;right:336px;width:40px;height:40px;border-radius:50%;border:1px solid #3a3a3a;background:#2c2c2c;color:#9a9a9a;font-family:ui-monospace,monospace;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0006}.dev-toggle:hover{background:#363636;color:#e8e8e8}.dev-toggle.active{background:#2563eb;color:#fff;border-color:#2563eb}.hint{margin:0;font-size:12px;color:#8a8a8a;line-height:1.5}select{background:#2c2c2c;color:#e8e8e8;border:1px solid #3a3a3a;border-radius:6px;padding:8px 10px;font:inherit;font-size:14px}.empty{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:14px}.aside{background:#1b1b1b;border-left:1px solid #333;padding:16px;display:flex;flex-direction:column;gap:24px;overflow:auto}.events-panel{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;min-height:0}.events-panel h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a}.events-header{display:flex;flex-direction:column;gap:8px}.speed-slider{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#9a9a9a}.speed-label{display:flex;justify-content:space-between}.speed-value{color:#e8e8e8;font-family:ui-monospace,monospace}.speed-slider input[type=range]{width:100%;accent-color:#2563eb;padding:0;background:transparent;border:0}.events-list li.active{background:#1f2a44;border-color:#2563eb}.playback-controls{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:10}.playback-controls .dev-toggle{position:static}@media (max-width: 720px){.playback-controls{bottom:calc(40vh + 16px)}.app.dev-mode .playback-controls,.app.aside-open .playback-controls{display:none}}.events-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;font-size:12px;font-family:ui-monospace,monospace}.events-list li{display:grid;grid-template-columns:18px 56px 1fr;align-items:baseline;gap:6px;padding:3px 6px 3px 8px;background:#141414;border:1px solid #2a2a2a;border-left-width:3px;border-radius:3px}.events-list li[data-t=visit]{border-left-color:#93c5fd}.events-list li[data-t=compare]{border-left-color:#fcd34d}.events-list li[data-t=descend]{border-left-color:#86efac}.events-list li[data-t=ascend]{border-left-color:#c4b5fd}.events-list li[data-t=found]{border-left-color:#4ade80}.events-list li[data-t=not_found]{border-left-color:#fca5a5}.events-idx{color:#666;text-align:right}.events-tag{text-transform:uppercase;font-size:10px;letter-spacing:.06em}.events-list li[data-t=visit] .events-tag{color:#93c5fd}.events-list li[data-t=compare] .events-tag{color:#fcd34d}.events-list li[data-t=descend] .events-tag{color:#86efac}.events-list li[data-t=ascend] .events-tag{color:#c4b5fd}.events-list li[data-t=found] .events-tag{color:#4ade80}.events-list li[data-t=not_found] .events-tag{color:#fca5a5}.events-desc{color:#d4d4d4;word-break:break-word}.section{display:flex;flex-direction:column;gap:12px}.section h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a;display:flex;align-items:center;gap:10px}.asterisk{color:#f87171;font-weight:700}.unapplied{font-size:11px;color:#f87171;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.section label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#b8b8b8}input,textarea{background:#2c2c2c;color:#e8e8e8;border:1px solid #3a3a3a;border-radius:6px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}input:focus,textarea:focus{outline:none;border-color:#2563eb}.btn{background:#2563eb;color:#fff;border:0;border-radius:8px;padding:14px 16px;font-size:16px;font-weight:600;cursor:pointer}.btn:hover{background:#1d4ed8}.btn:active{background:#1e40af}.btn-secondary{background:#2c2c2c;border:1px solid #3a3a3a}.btn-secondary:hover{background:#363636}.btn-secondary:active{background:#404040}.btn:disabled{background:#2a2a2a;color:#666;cursor:not-allowed}