:root{--bg:#0f172adb;--fg:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--border:#94a3b840;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px}*{box-sizing:border-box}html,body{background:#0f172a;height:100%;margin:0;overflow:hidden}#app{--left:300px;--right:400px;grid-template-columns:var(--left) minmax(0, 1fr) var(--right);grid-template-rows:38px minmax(0,1fr);grid-template-areas:"top top top""left view right";width:100vw;height:100vh;display:grid}#app.hide-controls{--left:0px}#app.hide-stats{--right:0px}#app.hide-controls #controls,#app.hide-stats #stats{display:none}#topbar{border-bottom:1px solid var(--border);white-space:nowrap;background:#0b1222;grid-area:top;align-items:center;gap:8px;min-width:0;padding:0 10px;display:flex}#topbar .brand{font-size:14px}#topbar .spacer{flex:1}#topbar #top-layout{text-overflow:ellipsis;min-width:0;overflow:hidden}#topbar .clock{padding:0 6px;font-size:14px}button.icon{padding:3px 8px}#viewport{background:#0b1222;grid-area:view;gap:2px;min-width:0;min-height:0;display:grid;position:relative}#viewport.n2{grid-template-columns:1fr 1fr}#viewport.n3{grid-template-columns:1fr 1fr 1fr}#viewport.n2.stack{grid-template-rows:1fr 1fr;grid-template-columns:1fr}#viewport.n3.stack{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}#viewport.n3.stack .pane:first-child{grid-column:1/span 2}.pane{min-width:0;min-height:0;position:relative;overflow:hidden}.pane canvas{width:100%;height:100%;display:block}.pane-label{pointer-events:none;border-left:4px solid var(--c,#38bdf8);white-space:nowrap;text-overflow:ellipsis;background:#0f172ad1;border-radius:6px;max-width:calc(100% - 16px);padding:3px 8px;font-size:12px;position:absolute;top:8px;left:8px;overflow:hidden}.pane-label .kpi-inline{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}.panel{border-color:var(--border);background:#111a2e;border-style:solid;border-width:0;min-width:0;padding:8px 12px 16px;overflow:hidden auto}#controls{border-right-width:1px;grid-area:left}#stats{border-left-width:1px;grid-area:right;padding-top:0}.tabs{z-index:2;border-bottom:1px solid var(--border);background:#111a2e;gap:2px;margin-bottom:4px;padding:8px 0 6px;display:flex;position:sticky;top:0}.tabs button{border-radius:6px 6px 0 0;flex:1}.tabs button.active{background:var(--accent);color:#0f172a;font-weight:600}@media (width<=1440px){#app{--left:280px;--right:370px}}@media (width<=1100px){#app{--left:260px;--right:330px}.kpis{grid-template-columns:repeat(2,1fr)!important}}@media (width<=900px){#app{--right:0px}#stats{display:none}}h1{margin:0 0 2px;font-size:15px}h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);margin:14px 0 6px;padding-bottom:3px;font-size:12px}.sub{color:var(--muted);margin:0 0 6px;font-size:11px}.row{align-items:center;gap:6px;margin:4px 0;display:flex}.row label{flex:none}.slider-row{grid-template-columns:76px 1fr 44px;align-items:center;gap:6px;margin:3px 0;display:grid}.slider-row .mv{font-weight:600}.slider-row output{text-align:right;font-variant-numeric:tabular-nums}.swatch{vertical-align:middle;border-radius:2px;width:9px;height:9px;margin-right:4px;display:inline-block}input[type=range]{width:100%;accent-color:var(--accent)}button,select,input[type=number]{color:var(--fg);border:1px solid var(--border);font:inherit;cursor:pointer;background:#1e293b;border-radius:6px;padding:4px 8px}input[type=number]{cursor:text;width:80px}button:hover{border-color:var(--accent)}button.active{background:var(--accent);color:#0f172a;border-color:var(--accent);font-weight:600}.btn-group{flex-wrap:wrap;gap:4px;display:flex}.approach-total{color:var(--muted);margin-left:auto;font-size:11px}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}th,td{text-align:right;padding:2px 4px}th:first-child,td:first-child{text-align:left}th{color:var(--muted);font-size:11px;font-weight:500}tr+tr td{border-top:1px solid #94a3b81a}.kpis{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.kpi{background:#1e293bcc;border-radius:6px;padding:5px 6px}.kpi .v{font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}.kpi .l{color:var(--muted);font-size:10px}.warn{color:#fb923c}.bad{color:#f87171}canvas.chart{background:#02061780;border-radius:6px;width:100%;height:150px}.legend{color:var(--muted);flex-wrap:wrap;gap:10px;margin-top:3px;font-size:11px;display:flex}.legend span:before{content:"";vertical-align:middle;background:var(--c);width:10px;height:3px;margin-right:4px;display:inline-block}.note{color:var(--muted);font-size:11px;line-height:1.4}.clock{font-variant-numeric:tabular-nums;font-weight:600}.badge{border-radius:4px;margin:1px 2px 1px 0;padding:1px 6px;font-size:11px;font-weight:600;display:inline-block}.badge.bad{color:#fca5a5;background:#f871712e}.badge.warn{color:#fdba74;background:#fb923c2e}.badge.ok{color:#86efac;background:#4ade8026}.los{text-align:center;color:#0f172a;border-radius:4px;width:20px;font-weight:700;display:inline-block}.los-A{background:#4ade80}.los-B{background:#a3e635}.los-C{background:#facc15}.los-D{background:#fb923c}.los-E{background:#f87171}.los-F{color:#fff;background:#dc2626}#peak-params .slider-row span{color:var(--muted)}.pocket-grid{grid-template-columns:76px 1fr 1fr;align-items:center;gap:2px 6px;margin:4px 0;display:grid}.pocket-grid input{justify-self:start}h2.with-tools{justify-content:space-between;align-items:center;gap:6px;display:flex}.btn-group.seg button{text-transform:none;letter-spacing:0;padding:1px 7px;font-size:11px}.od-table{margin:6px 0}.od-table th{text-align:center}.od-table tbody th{text-align:left;color:var(--fg);font-weight:600}.od-table input[type=number]{text-align:right;width:100%;min-width:0;padding:2px 4px}.od-table input.inherited{color:var(--muted);font-style:italic}.od-table .od-total{color:var(--muted);font-weight:600}.od-table tr.od-foot td,.od-table tr.od-foot th{border-top:1px solid var(--border)}.od-slots{margin:4px 0}.od-slots button{padding:2px 6px;font-size:11px}.od-slots button.now:not(.active){border-color:#a3e635}.od-bars{background:#1e293b99;border-radius:4px;align-items:flex-end;gap:2px;height:36px;margin:6px 0 2px;padding:2px;display:flex}.od-bar{opacity:.7;background:#c084fc;border-radius:2px 2px 0 0;flex:1}.od-bar.sel{opacity:1;background:var(--accent)}.od-table input[type=number]{appearance:textfield;border-radius:4px;padding:2px 3px;font-size:11px}.od-table input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.od-table input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.od-table td,.od-table th{padding:1px 2px}th.tip,td.tip,h2[title],.kpi[title] .l{cursor:help}th.tip,td.tip{text-underline-offset:2px;-webkit-text-decoration:underline dotted #94a3b899;text-decoration:underline dotted #94a3b899}.kpi[title]{cursor:help}details.section>summary{cursor:pointer;list-style:none}details.section>summary::-webkit-details-marker{display:none}details.section>summary h2:before{content:"▾ ";color:var(--muted)}details.section:not([open])>summary h2:before{content:"▸ "}.heat-legend{color:var(--muted);grid-template-columns:1fr 1fr 1fr;margin:2px 0 4px;font-size:10px;display:grid}.heat-legend i{border-radius:3px;grid-column:1/-1;height:9px;margin-bottom:2px}.heat-legend span:nth-of-type(2){text-align:center}.heat-legend span:nth-of-type(3){text-align:right}.heat-legend .note{grid-column:1/-1}.cause{margin:3px 0;font-size:12px;line-height:1.35}canvas.spacetime{height:230px}.speed-legend{color:var(--muted);align-items:center;gap:6px;font-size:10px;display:flex}.speed-legend i{background:linear-gradient(90deg,#e21212,#eded1d,#1ded2e);border-radius:3px;flex:1;height:7px}.variant-card{background:#1e293b8c;border-left:4px solid;border-radius:6px;margin:4px 0;padding:4px 8px}.variant-card select{flex:1;min-width:0;max-width:100%}.variant-card .row{flex-wrap:wrap}table.cmp td{vertical-align:top}.delta{color:var(--muted);font-size:10px}.delta.better{color:#4ade80}.delta.worse{color:#f87171}#viewport .pane .badge{pointer-events:none}.modal{z-index:50;background:#02061799;place-items:center;display:grid;position:fixed;inset:0}.modal[hidden]{display:none}.modal-box{border:1px solid var(--border);background:#111a2e;border-radius:10px;flex-direction:column;width:min(860px,92vw);max-height:88vh;display:flex}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.modal-body{padding:4px 16px 14px;line-height:1.45;overflow-y:auto}.modal-body ul{margin:4px 0;padding-left:18px}.modal-body li{margin:3px 0}.help-table th{text-align:left;vertical-align:top;width:160px;color:var(--fg)}.help-table td{text-align:left;color:var(--muted)}select{max-width:100%}.row>select{flex:0 auto;min-width:0}.row{min-width:0}#causes-table td{font-size:11px}#stats table{font-size:11.5px}#stats th,#stats td{padding:2px 3px}#stats th{vertical-align:bottom;line-height:1.15}@media (width<=1440px){#stats table{font-size:11px}#stats th{font-size:10px}}#editor-panel{border-right-width:1px;grid-area:left}#app:not(.editing) #editor-panel,#app.editing #controls,#app.editing #stats{display:none}#app.editing{--right:0px;--left:300px}#app.editing.hide-controls #editor-panel{display:none}.editor-view{z-index:5;background:#0b1222;position:absolute;inset:0}.editor-view[hidden]{display:none}.editor-view canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.editor-view canvas[hidden]{display:none}.editor-hint{color:var(--muted);pointer-events:none;white-space:nowrap;background:#0f172ad1;border-radius:6px;padding:3px 10px;font-size:11px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.palette{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.palette button.tool{flex-direction:column;align-items:center;gap:1px;padding:3px 2px;font-size:10.5px;display:flex}.palette button.tool canvas{width:40px;height:40px}.mode-toggle button{padding:3px 9px!important;font-size:12px!important}button.primary{color:#fff;background:#2563eb;border-color:#2563eb;font-weight:600}button.primary:hover{background:#1d4ed8}button.primary:disabled{color:var(--muted);cursor:not-allowed;background:#334155;border-color:#334155}button.big{width:100%;margin:8px 0 2px;padding:7px;font-size:13px}button:disabled{opacity:.55;cursor:not-allowed}.spacer{flex:1}.issue-list{margin:4px 0;padding:0;list-style:none}.issue{border-left:3px solid;border-radius:4px;margin:2px 0;padding:3px 6px 3px 8px;font-size:11.5px;line-height:1.35}.issue.error{background:#ef44441f;border-color:#ef4444}.issue.warning{background:#f59e0b1a;border-color:#f59e0b}.issue.info{color:var(--muted);background:#38bdf814;border-color:#38bdf8}.issue.clickable{cursor:pointer}.note.good{color:#86efac}.arm-grid{align-items:center;gap:3px 6px;margin:4px 0;display:grid}.arm-grid select{min-width:0}.arm-grid input{justify-self:center}#editor-inspector input[type=text]{color:var(--fg);border:1px solid var(--border);font:inherit;background:#1e293b;border-radius:6px;width:110px;padding:4px 8px}#editor-cols,#editor-rows{width:54px}.junction-head{color:var(--fg);margin:8px 0 2px;font-size:12px;font-weight:600}.signal-editor{border-left:2px solid #22c55e55;margin:4px 0 8px;padding:2px 0 4px 8px}.signal-editor .phase-row{grid-template-columns:14px auto 1fr 36px auto;align-items:center;gap:5px;margin:3px 0;display:grid}.signal-editor .phase-no{color:var(--muted);font-size:11px}.signal-editor .phase-arms button{min-width:22px;padding:1px 6px;font-size:11px}.signal-editor .phase-arms button.arrow{color:#a7f3d0;padding:1px 4px}.signal-editor .phase-arms button.arrow.active{color:inherit}.signal-editor .phase-arms{flex-wrap:wrap}.signal-editor .note.warn{color:#f59e0b}.signal-editor .phase-row output{text-align:right;font-variant-numeric:tabular-nums;font-size:11px}.signal-editor .row label{color:var(--muted);font-size:11px}.signal-editor .row select{padding:1px 2px;font-size:11px}.signal-editor .row{flex-wrap:wrap;gap:4px}.signal-timeline{margin-top:4px}.signal-timeline .tl-row{color:var(--muted);grid-template-columns:22px 1fr;align-items:center;gap:5px;font-size:10px;display:grid}.signal-timeline .tl-bar{border-radius:2px;height:7px;margin:1px 0;display:flex;overflow:hidden}.signal-timeline .tl-bar i{height:100%;display:block}.route-split{margin:1px 0 2px 8px;font-size:11px;line-height:1.35}.route-split b{font-variant-numeric:tabular-nums}.lane-grid select{width:100%;min-width:0}.junction-inspector{z-index:6;background:#0f172af0;border:1px solid #22d3ee;border-radius:8px;width:300px;max-height:calc(100% - 20px);padding:8px 10px;font-size:12px;position:absolute;top:10px;left:10px;overflow:auto;box-shadow:0 6px 24px #0006}.junction-inspector[hidden]{display:none}.ji-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.ji-head strong{color:#67e8f9;font-size:14px}.ji-close{padding:0 8px;font-size:16px;line-height:20px}.ji-kpis{flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:6px;display:flex}.ji-table{border-collapse:collapse;width:100%}.ji-table th,.ji-table td{text-align:left;border-bottom:1px solid #94a3b833;padding:2px 4px}.ji-sub{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 4px;font-size:11px;font-weight:700}.ji-controls .row label{width:76px}.od-gravity{border:1px solid var(--border);border-radius:6px;margin:8px 0;padding:4px 6px}.od-gravity summary{cursor:pointer;font-weight:600}.od-gravity .gravity-table{width:100%}.od-gravity .gravity-opts{align-items:center;gap:6px;margin:4px 0;display:flex}.od-gravity .gravity-opts input{width:56px}.tour-ring{z-index:900;border:2px solid var(--accent);pointer-events:none;border-radius:8px;transition:all .2s;position:fixed;box-shadow:0 0 0 9999px #0206178c}.tour-card{z-index:901;border:1px solid var(--accent);background:#0f172a;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.45;position:fixed;box-shadow:0 8px 24px #00000080}.tour-card h3{margin:2px 0 6px;font-size:14px}.tour-card p{margin:0 0 8px}.tour-card .tour-step{color:var(--muted);font-size:11px}.tour-buttons{align-items:center;gap:6px;display:flex}.tour-buttons .spacer{flex:1}.tour-hint{border:1px solid var(--accent);border-radius:6px;align-items:center;gap:6px;margin:4px 0 8px;padding:6px 8px;font-size:12px;display:flex}.tour-hint span{flex:1}.lane-arrows{border:1px solid var(--border);border-radius:6px;margin:6px 0 2px;padding:4px 6px}.lane-arrows .row{margin:0 0 4px}.lane-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.lane-chip{background:#3a3d44;border-left:2px dashed #e8e8e8;border-radius:4px;gap:2px;padding:2px;display:inline-flex}.lane-chip:last-child{border-right:2px solid #e8e8e8}.lane-chip button{min-width:26px;padding:1px 4px;font-size:14px;line-height:1.2}.lane-chip.pocket{color:#e8e8e8;padding:4px 6px;font-size:12px}.dir-lanes .btn-group.seg button{min-width:24px}.note.bad{color:#f87171}