:root {
  --ink: #0c1320; --panel: #151f2e; --panel-2: #1c293b; --line: #314157;
  --text: #edf3fb; --muted: #aab7c9; --green: #42d77d; --yellow: #ffc84a;
  --red: #ff625f; --blue: #5991ff; --bus: #2d6ca9; --orange: #ff914d; --cycle: 20s;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); }
a { color: inherit; }
p { line-height: 1.55; }
.state-input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.page-shell { margin: 0 auto; max-width: 1500px; padding: 26px clamp(14px, 4vw, 54px) 60px; }
.topbar { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 38px; }
.back-link { color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.brand { align-items: center; display: flex; font-size: .74rem; font-weight: 800; gap: 9px; text-transform: uppercase; }
.brand-mark { align-items: center; background: var(--blue); display: inline-flex; font-size: .64rem; height: 30px; justify-content: center; width: 30px; }
.hero { align-items: end; display: grid; gap: 40px; grid-template-columns: 1fr minmax(260px, .45fr); margin-bottom: 26px; }
.kicker { color: #8eb1ff; font-size: .68rem; font-weight: 800; margin: 0 0 12px; text-transform: uppercase; }
h1 { font-size: clamp(2.15rem, 5vw, 5rem); line-height: .98; margin: 0; max-width: 980px; }
.hero-copy { color: var(--muted); font-size: .94rem; margin: 0; max-width: 590px; }
.notice { background: #17253a; border-left: 3px solid var(--blue); color: #c0ccdb; font-size: .8rem; margin: 20px 0 24px; padding: 13px 16px; }
.notice strong { color: #fff; }
.controls { align-items: center; background: var(--panel); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; padding: 14px; }
.controls strong { color: var(--muted); font-size: .7rem; margin-right: 4px; text-transform: uppercase; }
.control-label { border: 1px solid #43536a; color: var(--text); cursor: pointer; font-size: .76rem; font-weight: 700; padding: 9px 12px; user-select: none; }
.control-label:hover, .control-label:focus-visible { border-color: var(--blue); }
.pause-label { margin-left: auto; }
#speed-slow:checked ~ .page-shell { --cycle: 34s; }
#speed-normal:checked ~ .page-shell { --cycle: 20s; }
#speed-fast:checked ~ .page-shell { --cycle: 9s; }
#speed-slow:checked ~ .page-shell label[for="speed-slow"], #speed-normal:checked ~ .page-shell label[for="speed-normal"],
#speed-fast:checked ~ .page-shell label[for="speed-fast"], #demand-valley:checked ~ .page-shell label[for="demand-valley"],
#demand-reference:checked ~ .page-shell label[for="demand-reference"], #demand-peak:checked ~ .page-shell label[for="demand-peak"],
#period-valley:checked ~ .page-shell label[for="period-valley"], #period-am:checked ~ .page-shell label[for="period-am"],
#period-pm:checked ~ .page-shell label[for="period-pm"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#pause:checked ~ .page-shell .animated { animation-play-state: paused !important; }
#pause:checked ~ .page-shell label[for="pause"] { background: var(--yellow); border-color: var(--yellow); color: #111; }
#pause:not(:checked) ~ .page-shell .play-when-paused, #pause:checked ~ .page-shell .pause-when-running { display: none; }
.layout { display: grid; gap: 16px; grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr); }
.panel { background: var(--panel); border: 1px solid var(--line); padding: clamp(16px, 2.5vw, 26px); }
.panel h2 { font-size: 1.15rem; margin: 0 0 5px; }
.panel > .sub, .sub { color: var(--muted); font-size: .78rem; margin: 0 0 16px; }
.wide { grid-column: 1 / -1; }
.intersection-map { background: #101820; border: 1px solid var(--line); display: block; height: auto; width: 100%; }
.intersection-map .asphalt { fill: #2b323a; }
.intersection-map .curb { fill: none; stroke: #89919b; stroke-width: 4; }
.intersection-map .lane-line { fill: none; stroke: #d8dde3; stroke-dasharray: 12 12; stroke-width: 2; }
.intersection-map .median-line { fill: none; stroke: #ffcf35; stroke-width: 2; }
.intersection-map .bus-lane { fill: var(--bus); opacity: .86; }
.intersection-map .bus-edge { fill: none; stroke: #d7ebff; stroke-dasharray: 8 7; stroke-width: 2; }
.intersection-map .crosswalk { fill: url(#crosswalkPattern); }
.intersection-map .box-grid { fill: url(#boxPattern); stroke: #e3c123; stroke-width: 1; }
.intersection-map .arrow { fill: #f4f7fa; font-size: 29px; font-weight: 800; text-anchor: middle; }
.intersection-map .bus-arrow { fill: #fff; font-size: 20px; font-weight: 800; text-anchor: middle; }
.intersection-map .road-name { fill: #edf3fb; font-size: 15px; font-weight: 700; text-anchor: middle; }
.intersection-map .road-detail { fill: #aeb9c7; font-size: 11px; text-anchor: middle; }
.intersection-map .bus-label { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; }
.intersection-map .signal-body { fill: #080b10; stroke: #77808b; stroke-width: 1; }
.intersection-map .lamp-red { fill: var(--red); }
.intersection-map .lamp-yellow { fill: #5c553a; }
.intersection-map .lamp-green { fill: #274e37; }
.intersection-map .signal-nb .lamp-red { animation: nb-red var(--cycle) linear infinite; }
.intersection-map .signal-nb .lamp-green { animation: nb-green var(--cycle) linear infinite; }
.intersection-map .signal-nb .lamp-yellow { animation: nb-yellow var(--cycle) linear infinite; }
.intersection-map .signal-sb .lamp-red { animation: sb-red var(--cycle) linear infinite; }
.intersection-map .signal-sb .lamp-green { animation: sb-green var(--cycle) linear infinite; }
.intersection-map .signal-sb .lamp-yellow { animation: sb-yellow var(--cycle) linear infinite; }
.intersection-map .signal-bus-nb .lamp-red { animation: bus-nb-red var(--cycle) linear infinite; }
.intersection-map .signal-bus-nb .lamp-green { animation: bus-nb-green var(--cycle) linear infinite; }
.intersection-map .signal-bus-nb .lamp-yellow { animation: bus-nb-yellow var(--cycle) linear infinite; }
.intersection-map .signal-bus-sb .lamp-red { animation: bus-sb-red var(--cycle) linear infinite; }
.intersection-map .signal-bus-sb .lamp-green { animation: bus-sb-green var(--cycle) linear infinite; }
.intersection-map .signal-bus-sb .lamp-yellow { animation: bus-sb-yellow var(--cycle) linear infinite; }
.intersection-map .signal-c6 .lamp-red { animation: c6-red var(--cycle) linear infinite; }
.intersection-map .signal-c6 .lamp-green { animation: c6-green var(--cycle) linear infinite; }
.intersection-map .signal-c6 .lamp-yellow { animation: c6-yellow var(--cycle) linear infinite; }
.intersection-map .signal-prax .lamp-red { animation: prax-red var(--cycle) linear infinite; }
.intersection-map .signal-prax .lamp-green { animation: prax-green var(--cycle) linear infinite; }
.intersection-map .signal-prax .lamp-yellow { animation: prax-yellow var(--cycle) linear infinite; }
.geometry-list { display: grid; margin: 18px 0 0; }
.geometry-row { align-items: start; border-top: 1px solid var(--line); display: grid; font-size: .76rem; gap: 12px; grid-template-columns: 1fr auto; padding: 11px 0; }
.geometry-row span { color: var(--muted); }
.geometry-row b { text-align: right; }
.facts { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.fact { background: var(--panel); border: 1px solid var(--line); padding: 15px 16px; }
.fact small { color: var(--muted); display: block; font-size: .63rem; margin-bottom: 7px; text-transform: uppercase; }
.fact b { font-size: clamp(1.2rem, 2.4vw, 1.85rem); }
.timeline { display: flex; height: 42px; margin: 20px 0 10px; overflow: hidden; }
.timeline span { align-items: center; display: flex; font-size: .6rem; font-weight: 800; justify-content: center; min-width: 21px; }
.timeline .green { background: var(--green); color: #06140b; }
.timeline .yellow { background: var(--yellow); color: #181000; }
.timeline .red { background: var(--red); color: #fff; }
.timeline .ns { flex: 35; } .timeline .bus { flex: 12; } .timeline .ew { flex: 37; }
.timeline .y4 { flex: 4; } .timeline .y3 { flex: 3; } .timeline .r2 { flex: 2; }
.phase-timeline .f20 { flex: 20; }
.phase-timeline .f10 { flex: 10; }
.phase-timeline .phase-f1 { background: #2f6feb; color: #fff; }
.phase-timeline .phase-f2 { background: #2e9b63; color: #fff; }
.phase-timeline .phase-f3 { background: #2d6ca9; color: #fff; }
.phase-timeline .phase-f4 { background: #24527c; color: #fff; }
.phase-timeline .phase-f5 { background: #d99012; color: #111; }
.phase-timeline .phase-f6 { background: #c64f4c; color: #fff; }
.cycle-progress { background: #27364b; height: 7px; overflow: hidden; }
.cycle-progress i { animation: progress var(--cycle) linear infinite; background: var(--blue); display: block; height: 100%; transform-origin: left; }
.phase-list { display: grid; margin-top: 18px; }
.phase-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; font-size: .76rem; gap: 10px; grid-template-columns: 28px 1fr auto; padding: 9px 0; }
.phase-row span:first-child { align-items: center; background: #25344a; display: flex; height: 24px; justify-content: center; width: 24px; }
.phase-row time { color: var(--muted); }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; font-size: .72rem; min-width: 680px; width: 100%; }
.data-table th { color: var(--muted); font-size: .63rem; padding: 9px 8px; text-align: left; text-transform: uppercase; }
.data-table td { border-top: 1px solid var(--line); padding: 10px 8px; }
.data-table td:not(:first-child), .data-table th:not(:first-child) { text-align: right; }
.data-table .bus-row td:first-child { color: #87bdff; }
.data-table .warning { color: var(--red); font-weight: 800; }
.data-table .caution { color: var(--yellow); font-weight: 800; }
.scenario-value { display: none; }
#demand-valley:checked ~ .page-shell .scenario-valley, #demand-reference:checked ~ .page-shell .scenario-reference,
#demand-peak:checked ~ .page-shell .scenario-peak { display: inline; }
.bars { align-items: end; border-bottom: 1px solid #647187; display: grid; gap: 3px; grid-template-columns: repeat(24, 1fr); height: 280px; margin-top: 28px; position: relative; }
.bar { background: var(--green); height: var(--h); min-width: 3px; opacity: .88; position: relative; }
.bar.medium { background: var(--yellow); } .bar.high { background: var(--orange); } .bar.saturated { background: var(--red); }
.bar::after { color: var(--muted); content: attr(data-hour); font-size: .52rem; left: 50%; position: absolute; top: calc(100% + 10px); transform: translateX(-50%); }
.chart-scale { color: var(--muted); display: flex; font-size: .6rem; justify-content: space-between; margin-top: 26px; }
.legend { display: flex; flex-wrap: wrap; font-size: .68rem; gap: 14px; margin-top: 18px; }
.legend span::before { background: var(--c); content: ""; display: inline-block; height: 8px; margin-right: 6px; width: 8px; }
.period-card { display: none; }
#period-valley:checked ~ .page-shell .period-valley, #period-am:checked ~ .page-shell .period-am, #period-pm:checked ~ .page-shell .period-pm { display: block; }
.period-card .level { color: var(--red); font-size: 2.5rem; font-weight: 800; margin: 0; }
.period-card dl { display: grid; grid-template-columns: 1fr auto; margin: 20px 0 0; }
.period-card dt, .period-card dd { border-bottom: 1px solid var(--line); font-size: .77rem; margin: 0; padding: 10px 0; }
.period-card dt { color: var(--muted); } .period-card dd { font-weight: 800; }
.comparison-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-card { background: var(--panel); border: 1px solid var(--line); padding: 20px; }
.compare-card.proposed { border-color: #4d78c7; }
.compare-head { align-items: start; display: flex; gap: 18px; justify-content: space-between; }
.compare-head h2 { font-size: 1.15rem; margin: 0; }
.compare-head p { color: var(--muted); font-size: .72rem; margin: 5px 0 0; }
.badge { border: 1px solid #52627a; color: var(--muted); font-size: .62rem; font-weight: 800; padding: 6px 8px; text-transform: uppercase; }
.proposed .badge { border-color: var(--blue); color: #a9c2ff; }
.plan-strip { display: grid; gap: 5px; grid-template-columns: repeat(3, 1fr); margin: 18px 0; }
.plan-strip.phase-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plan-stage { background: #25344a; padding: 11px 9px; text-align: center; }
.plan-stage small { color: var(--muted); display: block; font-size: .58rem; margin-bottom: 5px; text-transform: uppercase; }
.plan-stage b { font-size: 1rem; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); }
.metric { border-right: 1px solid var(--line); border-top: 1px solid var(--line); min-height: 100px; padding: 14px 12px; }
.metric:nth-child(2n) { border-right: 0; }
.metric small { color: var(--muted); display: block; font-size: .61rem; margin-bottom: 7px; text-transform: uppercase; }
.metric b { font-size: clamp(1.15rem, 2vw, 1.65rem); }
.metric em { color: var(--muted); display: block; font-size: .62rem; font-style: normal; margin-top: 5px; }
.good { color: var(--green); } .risk { color: var(--red); }
.delta { background: #102a21; border-left: 3px solid var(--green); color: #bfead0; font-size: .76rem; margin-top: 14px; padding: 11px 12px; }
.method { background: var(--panel); border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.method div { padding: 15px; }
.method b { display: block; font-size: .74rem; margin-bottom: 6px; }
.method span { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.data-note { color: var(--muted); font-size: .72rem; margin: 18px 0 0; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nb-red { 0%, 39.9% { fill: #40272b; } 40%, 100% { fill: var(--red); } }
@keyframes nb-green { 0%, 36.9% { fill: var(--green); } 37%, 100% { fill: #274e37; } }
@keyframes nb-yellow { 0%, 36.9%, 40%, 100% { fill: #5c553a; } 37%, 39.9% { fill: var(--yellow); } }
@keyframes sb-red { 0%, 19.9%, 40%, 100% { fill: var(--red); } 20%, 39.9% { fill: #40272b; } }
@keyframes sb-green { 0%, 19.9%, 37%, 100% { fill: #274e37; } 20%, 36.9% { fill: var(--green); } }
@keyframes sb-yellow { 0%, 36.9%, 40%, 100% { fill: #5c553a; } 37%, 39.9% { fill: var(--yellow); } }
@keyframes bus-nb-red { 0%, 39.9%, 50%, 100% { fill: var(--red); } 40%, 49.9% { fill: #40272b; } }
@keyframes bus-nb-green { 0%, 39.9%, 47%, 100% { fill: #274e37; } 40%, 46.9% { fill: var(--green); } }
@keyframes bus-nb-yellow { 0%, 46.9%, 50%, 100% { fill: #5c553a; } 47%, 49.9% { fill: var(--yellow); } }
@keyframes bus-sb-red { 0%, 49.9%, 60%, 100% { fill: var(--red); } 50%, 59.9% { fill: #40272b; } }
@keyframes bus-sb-green { 0%, 49.9%, 57%, 100% { fill: #274e37; } 50%, 56.9% { fill: var(--green); } }
@keyframes bus-sb-yellow { 0%, 56.9%, 60%, 100% { fill: #5c553a; } 57%, 59.9% { fill: var(--yellow); } }
@keyframes c6-red { 0%, 59.9%, 80%, 100% { fill: var(--red); } 60%, 79.9% { fill: #40272b; } }
@keyframes c6-green { 0%, 59.9%, 77%, 100% { fill: #274e37; } 60%, 76.9% { fill: var(--green); } }
@keyframes c6-yellow { 0%, 76.9%, 80%, 100% { fill: #5c553a; } 77%, 79.9% { fill: var(--yellow); } }
@keyframes prax-red { 0%, 79.9%, 100% { fill: var(--red); } 80%, 99.9% { fill: #40272b; } }
@keyframes prax-green { 0%, 79.9%, 97%, 100% { fill: #274e37; } 80%, 96.9% { fill: var(--green); } }
@keyframes prax-yellow { 0%, 96.9%, 100% { fill: #5c553a; } 97%, 99.9% { fill: var(--yellow); } }
@media (max-width: 960px) {
  .hero, .layout, .comparison-grid { grid-template-columns: 1fr; }
  .hero-copy { margin-top: -18px; }
  .facts, .method { grid-template-columns: repeat(2, 1fr); }
  .plan-strip.phase-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .page-shell { padding-left: 11px; padding-right: 11px; }
  .topbar { align-items: flex-start; flex-direction: column-reverse; }
  .controls { align-items: stretch; } .controls strong { flex-basis: 100%; } .pause-label { margin-left: 0; }
  .facts, .method, .metrics { grid-template-columns: 1fr; }
  .plan-strip.phase-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { border-right: 0; } .bars { gap: 2px; height: 210px; } .bar::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .animated { animation-play-state: paused !important; } }