:root{--bg:#f4f7f9;--card:#fff;--ink:#0f2433;--muted:#5b7184;
--pm:#1b6ca8;--bm:#c2703d;--accent:#0a7d6b;--line:#dde6ec}
/* Dark theme — follows the OS/browser preference, same vars recoloured. */
@media (prefers-color-scheme:dark){:root{--bg:#0c1822;--card:#152532;--ink:#e8eef3;
--muted:#9bb0bf;--pm:#5bb0e6;--bm:#e7986a;--accent:#27c2a6;--line:#243441}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:var(--bg);color:var(--ink)}
header.site,footer.site{padding:16px;max-width:880px;margin:0 auto}
header.site{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--ink)}
.tagline{color:var(--muted);font-size:.9rem}
main{max-width:880px;margin:0 auto;padding:8px 16px 32px}
h1{font-size:1.7rem;margin:.2em 0}.sub{color:var(--muted);margin-top:0}
.crumbs{color:var(--muted);font-size:.85rem;margin-bottom:8px}
.crumbs a{color:var(--accent);text-decoration:none}
.next{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:14px 16px;margin:16px 0;display:flex;flex-direction:column;gap:2px}
.next-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.next strong{font-size:1.25rem}
.cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
font-weight:600;padding:12px 18px;border-radius:12px;margin:10px 0}
.curve{margin:16px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}
.curve-wrap{position:relative}
.curve svg{width:100%;height:160px;display:block}
.curveline{stroke:var(--pm);stroke-width:2.5;vector-effect:non-scaling-stroke}
.nowline{stroke:var(--bm);stroke-width:1;stroke-dasharray:3 3}
.curve figcaption{color:var(--muted);font-size:.8rem;text-align:center;margin-top:6px}
/* PM/BM time labels overlaid on the (horizontally-stretched) SVG curve */
.mark{position:absolute;transform:translate(-50%,-50%);width:7px;height:7px;z-index:1}
.mark .dot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
transform:translate(-50%,-50%);background:var(--pm);box-shadow:0 0 0 2px var(--card)}
.mark.lo .dot{background:var(--bm)}
/* time label sits just BELOW its point, for both PM and BM */
.mark .lbl{position:absolute;left:50%;top:150%;transform:translateX(-50%);white-space:nowrap;
font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.mark.hi .lbl{color:var(--pm)}.mark.lo .lbl{color:var(--bm)}
.day{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 14px 12px;margin:12px 0}
.day h3{margin:.6em 0 .2em;font-size:1.05rem}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{color:var(--muted);font-weight:600;font-size:.82rem}
tr.pm td:nth-child(2){color:var(--pm);font-weight:600}
tr.bm td:nth-child(2){color:var(--bm);font-weight:600}
.region{margin:18px 0}.region h2{font-size:1.15rem;border-bottom:2px solid var(--line);padding-bottom:4px}
ul.ports{list-style:none;padding:0;margin:8px 0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
ul.ports a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:10px 12px;text-decoration:none;color:var(--ink)}
ul.ports a:hover{border-color:var(--accent)}
footer.site{color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);margin-top:24px}