/* scene 5: time */
.tm-years { margin-bottom: clamp(56px, 9vh, 96px); }
.tm-ybars { width: 100%; height: 190px; overflow: visible; }
.tm-ybars rect { fill: var(--blue); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.001); transition: transform .9s var(--ease); }
.time.in .tm-ybars rect { transform: none; }
.tm-ybars .yb:nth-child(2) rect { transition-delay: 40ms; } .tm-ybars .yb:nth-child(3) rect { transition-delay: 80ms; } .tm-ybars .yb:nth-child(4) rect { transition-delay: 120ms; }
.tm-ybars .yb:nth-child(5) rect { transition-delay: 160ms; } .tm-ybars .yb:nth-child(6) rect { transition-delay: 200ms; } .tm-ybars .yb:nth-child(7) rect { transition-delay: 240ms; }
.tm-ybars .yb:nth-child(8) rect { transition-delay: 280ms; } .tm-ybars .yb:nth-child(9) rect { transition-delay: 320ms; }
.tm-ybars .yb.ahead rect { fill: var(--blue-2); }
.tm-ybars text { font-family: var(--text); font-size: 12px; text-anchor: middle; fill: var(--ink-3); }
.tm-ybars text.v { fill: var(--ink); font-weight: 600; }
.tm-note { margin: 10px 0 0; font-size: var(--s-small); color: var(--ink-3); }
.tm-city { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; border-top: 1px solid var(--ink); padding-top: 32px; }
.tm-ctl { display: grid; gap: 24px; }
.tm-ctl select { max-width: 360px; }
.tm-y button { min-width: 0; padding: 0 10px; }
.tm-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tm-amt { font-size: var(--s-num); color: var(--blue); line-height: .9; }
.tm-cap { color: var(--ink-2); font-size: var(--s-small); }
.tm-bars { width: 100%; height: 200px; margin-top: 18px; overflow: visible; }
.tm-bars rect { fill: var(--blue-2); cursor: pointer; }
.tm-bars .bar.sel rect, .tm-bars .bar:hover rect { fill: var(--blue); }
.tm-bars text { font-family: var(--text); font-size: 12px; text-anchor: middle; fill: var(--ink-3); }
.tm-bars .bar.sel text { fill: var(--ink); font-weight: 600; }
.tm-line { width: 100%; height: 110px; margin-top: 18px; overflow: visible; }
.tm-line .step { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.tm-line circle { fill: var(--paper); stroke: var(--blue); stroke-width: 2; cursor: pointer; }
.tm-line .pt.sel circle { fill: var(--blue); }
.tm-line text { font-family: var(--text); font-size: 11px; text-anchor: middle; fill: var(--ink-3); }
.tm-src { margin: 14px 0 0; font-size: var(--s-small); color: var(--ink-3); }
.tm-src a { color: var(--ink-2); }
@media (max-width: 860px) { .tm-city { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tm-ybars rect { transform: none; } }