:root{
  --paper:#fafafa;--surface:#ffffff;--sunken:#f1f1f1;--line:#e4e4e4;--line-strong:#8c8c8c;
  --ink:#111111;--ink-muted:#4d4d4d;--ink-subtle:#6e6e6e;
  --good:#0b6e4f;--good-soft:#e4f2ec;--bad:#a63d1e;--bad-soft:#f7e6df;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--ink-muted)}
.h1{margin:0;font-weight:600;font-size:64px;line-height:68px;letter-spacing:-0.03em;text-wrap:balance}
.h2{margin:0;font-weight:600;font-size:36px;line-height:42px;letter-spacing:-0.02em;text-wrap:balance}
.h3{margin:0;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-0.01em}
.lead{margin:0;font-size:19px;line-height:30px;color:var(--ink-muted);max-width:40rem;text-wrap:pretty}
.p{margin:0;font-size:15px;line-height:24px;color:var(--ink-muted);text-wrap:pretty}
.small{margin:0;font-size:13px;line-height:20px}
.label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-subtle)}
.mono{font-family:var(--mono);font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid transparent;border-radius:6px;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 160ms ease-out,border-color 160ms ease-out}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:#2a2a2a}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}.btn-secondary:hover{border-color:var(--ink)}
.btn-lg{height:46px;padding:0 20px;font-size:15px}
.btn:focus-visible,.navlink:focus-visible,.tlink:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.navlink{font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;border-radius:4px}.navlink:hover{color:var(--ink)}
.tlink{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px}.tlink:hover{border-color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}
.chip-good{background:var(--good-soft);color:var(--good)}.chip-bad{background:var(--bad-soft);color:var(--bad)}.chip-wait{background:var(--sunken);color:var(--ink-muted)}
.sq{width:7px;height:7px;background:currentColor;border-radius:1px}
.ring{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.cross{position:relative;width:8px;height:8px}
.cross::before,.cross::after{content:"";position:absolute;left:-1px;top:3px;width:10px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.cross::after{transform:rotate(-45deg)}
.app{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04),0 24px 48px -24px rgba(0,0,0,0.18)}
.appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px;padding:0 16px;border-bottom:1px solid var(--line);font-size:13px}
.tbl{display:grid;grid-template-columns:7ch minmax(0,18ch) minmax(0,1fr) 14ch 12ch 8ch;gap:16px;align-items:center;min-height:40px;padding:0 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--ink-muted)}
.tbl-head{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-subtle);background:var(--sunken)}
.tbl:last-child{border-bottom:0}
.tbl .t{color:var(--ink-subtle)}.tbl .a{color:var(--ink)}
.sec{padding-top:120px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px}
.card{display:grid;align-content:start;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.plan{display:grid;align-content:start;gap:20px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.plan li{font-size:14px;line-height:22px;color:var(--ink-muted);padding-left:16px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--line-strong)}
.code{margin:0;padding:14px 16px;background:#141414;color:#e8e8e8;border-radius:6px;font-family:var(--mono);font-size:12.5px;line-height:20px;white-space:pre;overflow-x:auto}
.code .c{color:#8a8a8a}.code .k{color:#9fd3b8}
.fields{display:grid;gap:10px;margin:0}
.fields>div{display:grid;grid-template-columns:8ch minmax(0,1fr);gap:12px;align-items:baseline}
.fields dt{font-family:var(--mono);font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-subtle)}
.fields dd{margin:0;font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.amt{padding:0 3px;margin:0 -3px;border-radius:2px;transition:background-color 240ms ease-out,color 240ms ease-out}
.amt-changed{background:var(--bad-soft);color:var(--bad)}
.tally{display:grid;gap:6px}
.half{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));height:28px;border-radius:4px;justify-items:center}
.half-yours{background:var(--sunken);align-items:end}
.half-tw{background:var(--good-soft);align-items:start}
.n{display:block;width:3px;height:13px;border-radius:1px;transition:background-color 240ms ease-out}
.n-on{background:var(--ink)}.n-tw{background:var(--good)}.n-off{background:transparent}.n-x{background:var(--bad)}
.vsent{margin:0;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-0.015em;text-wrap:balance}
.scene{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.interval{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr) minmax(0,1fr);gap:32px;align-items:start}
.axis{position:relative;height:16px;display:flex;align-items:center}
.axis-line{flex:1;height:1px;background:var(--line-strong)}
.node{flex:none;width:12px;height:12px;border-radius:2px;background:var(--ink)}
.node-open{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.gaplabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 10px;background:var(--paper);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-subtle);white-space:nowrap}
.rec{display:grid;grid-template-columns:minmax(0,1fr) 8ch;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.rec:last-child{border-bottom:1px solid var(--line)}
.rec .rl{color:var(--ink-muted)}
.rec .rtime{color:var(--ink-subtle);text-align:right}
@media (max-width:860px){.interval{grid-template-columns:minmax(0,1fr)}.axis{display:none}}
.row{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:12px;padding:3px 0 3px 14px;border-left:2px solid transparent;font-family:var(--mono);font-size:14px;line-height:24px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.row-hi{color:var(--ink);border-left-color:var(--ink)}
.row .rt{color:var(--ink-subtle)}
.row-hi .rt{color:var(--ink-muted)}
.stage{padding:2px 0 10px 28px;margin-left:9ch;font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink-subtle)}
.stage b{font-weight:500;color:var(--ink)}
.hidden{display:none}
.ev{display:grid;grid-template-columns:11ch minmax(0,1fr) 9ch;gap:16px;align-items:baseline;padding:6px 0 6px 14px;border-left:2px solid var(--ink)}
.ev .el{font-size:14px;line-height:22px;color:var(--ink-muted)}
.ev .ev2,.ev .et{font-family:var(--mono);font-size:14px;line-height:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.ev .et{color:var(--ink-muted)}
.tab{appearance:none;background:none;border:0;border-bottom:1px solid transparent;padding:0 0 3px;font-family:var(--sans);font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);cursor:pointer;border-radius:2px}
.tab:hover{color:var(--ink)}
.tab-on{color:var(--ink);border-bottom-color:var(--ink)}
.tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
@media (max-width:860px){.scene{grid-template-columns:minmax(0,1fr)}}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.panel>div+div{border-left:1px solid var(--line)}
@media (max-width:860px){.panel{grid-template-columns:minmax(0,1fr)}.panel>div+div{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:720px){.h1{font-size:40px;line-height:44px}.h2{font-size:28px;line-height:34px}.sec{padding-top:80px}.tbl{grid-template-columns:7ch minmax(0,1fr) 12ch}.tbl>:nth-child(3),.tbl>:nth-child(4),.tbl>:nth-child(6){display:none}}
@media (prefers-reduced-motion:reduce){.n,.amt,.btn{transition:none}}
