:root{
  --ink:#0d1016; --panel:#141821; --panel-2:#1a1f2a; --line:#242b38;
  --fg:#dde4ef; --fg-dim:#8b98ac; --fg-faint:#5f6b7d; --accent:#2fbfa4;
  --radius:7px; color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --ink:#eef1f6; --panel:#ffffff; --panel-2:#f4f6fa; --line:#d6dde8;
    --fg:#161b23; --fg-dim:#576277; --fg-faint:#8b96a8; --accent:#0d8c78;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.65;-webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
.topnav{
  border-bottom:1px solid var(--line);background:var(--panel);
  padding:11px 22px;display:flex;align-items:center;gap:10px;
}
.topnav > a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg)}
.topnav b{font-size:14px;font-weight:650;letter-spacing:.055em;text-transform:uppercase}
.topnav svg{width:19px;height:19px;display:block}
.topnav .crumbs{margin-left:auto;font-size:13px;color:var(--fg-faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.topnav .crumbs a{color:var(--fg-faint);text-decoration:none}
.wrap{max-width:820px;margin:0 auto;padding:38px 22px 20px}
h1{font-size:clamp(24px,3.2vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:650;margin:0 0 14px}
h2{font-size:18px;font-weight:650;margin:38px 0 12px}
h3{font-size:15px;font-weight:650;margin:22px 0 7px}
p{margin:0 0 13px;color:var(--fg-dim)}
.lede{font-size:17px;color:var(--fg)}
.clocks{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.clockcard{
  flex:1 1 210px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:13px 15px;display:flex;flex-direction:column;gap:2px;
}
.clockcard .c{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-faint)}
.clockcard .t{font-size:27px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--fg)}
.clockcard .d{font-size:12.5px;color:var(--fg-dim)}
tr.past td{opacity:.45}
tr.past td:first-child::after{content:" (already passed)";color:var(--fg-faint);font-size:.85em}
.clocklink{flex:1 1 210px;display:flex;text-decoration:none}
.clocklink .clockcard{flex:1 1 auto}
.clocklink:hover .clockcard{border-color:var(--accent)}
.clockcard.big{flex:1 1 100%}
.clockcard.big .t{font-size:46px}
.cta{
  display:inline-block;margin:6px 0 4px;padding:9px 15px;border-radius:var(--radius);
  background:var(--accent);color:#06231e;font-weight:650;text-decoration:none;
}
@media (prefers-color-scheme:light){ .cta{color:#fff} }
table{border-collapse:collapse;width:100%;margin:12px 0 8px;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:13px;color:var(--fg-faint);padding-bottom:7px}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left;font-size:14px}
th{background:var(--panel);font-weight:650;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--fg-dim)}
td{color:var(--fg)}
tr.work td{background:var(--panel-2)}
ul.pairgrid{list-style:none;margin:14px 0;padding:0;display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
ul.pairgrid a{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:var(--fg);text-decoration:none;font-size:13.5px}
ul.pairgrid a:hover{border-color:var(--accent);color:var(--accent)}
footer{max-width:820px;margin:0 auto;padding:24px 22px 46px;border-top:1px solid var(--line);
  display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--fg-faint)}
footer a{color:var(--fg-faint);text-decoration:none}
footer a:hover{color:var(--fg)}