:root{
  /* night ground — lifted off pure black so the panels don't punch */
  --sky1:#131C3C; --sky2:#0D1428; --sky3:#1B2856;
  /* paper — off-white, not white; this is the contrast fix */
  --panel:#F3F5FA; --panel2:#E7ECF6; --edge:#FFFFFF;
  --ink:#182034; --ink2:#414D69; --muted:#6E7893;
  --rule:#D3DBEA; --blue:#2444CC; --gold:#CBB67C;
  --head:'Fraunces',Georgia,serif; --ui:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
:root[data-theme=dark]{
  --panel:#141D38; --panel2:#1A2444; --edge:#1E2A4E;
  --ink:#E6EDFF; --ink2:#AAB7D6; --muted:#7C88A8; --rule:#28355E; --blue:#8AA4FF;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --panel:#141D38; --panel2:#1A2444; --edge:#1E2A4E;
  --ink:#E6EDFF; --ink2:#AAB7D6; --muted:#7C88A8; --rule:#28355E; --blue:#8AA4FF;
}}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ui);color:var(--ink);font-size:15.5px;line-height:1.6;
  background:
    radial-gradient(1100px 620px at 50% -10%, var(--sky3), transparent 62%),
    linear-gradient(180deg, var(--sky1), var(--sky2) 60%, var(--sky2));
  background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.page{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 20px 60px}
a{color:var(--blue)}

/* ---------- masthead ---------- */
.mast{text-align:center;padding:30px 0 14px}
.mast .mark{width:52px;height:52px;margin:0 auto 8px;display:block}
.mast .wordmark{display:inline-block;text-decoration:none}
.mast h1{margin:0;font-family:var(--head);font-weight:600;font-size:31px;letter-spacing:.10em;
  text-transform:uppercase;color:#F2F5FF}
.mast .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--gold);margin-top:5px}
nav{display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:wrap;margin:20px 0 22px}
nav a{font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#BFCBE8;text-decoration:none;padding:10px 17px;border-radius:6px}
nav a:hover{background:rgba(255,255,255,.08);color:#fff}
nav a[aria-current=page]{background:rgba(255,255,255,.13);color:#fff}
.themebtn{font-size:14px;color:#BFCBE8;background:none;border:1px solid rgba(255,255,255,.22);
  border-radius:6px;padding:6px 11px;cursor:pointer;margin-left:8px;font-family:var(--ui)}
.themebtn:hover{border-color:rgba(255,255,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- panels ---------- */
.cols{display:grid;grid-template-columns:296px minmax(0,1fr);gap:20px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  margin-bottom:20px;box-shadow:0 10px 30px rgba(4,8,24,.24)}
.ph{padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--panel2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.pb{padding:18px 16px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* sidebar: today */
.today{text-align:center}
.today .date{font-size:13px;color:var(--muted)}
.today svg.disc{width:150px;height:150px;margin:12px auto 10px;display:block}
.today .nm{font-family:var(--head);font-size:23px;font-weight:600;letter-spacing:-.01em}
.today .st{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:5px;
  font-variant-numeric:tabular-nums}
/* sidebar: clock */
.clock{display:flex;justify-content:center;gap:14px;text-align:center}
.clock div{flex:1}
.clock .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.clock .cv{font-family:var(--mono);font-size:27px;font-weight:500;margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.locline{text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}
select,input[type=date],input[type=text]{font-family:var(--ui);font-size:14px;color:var(--ink);
  background:var(--edge);border:1px solid var(--rule);border-radius:7px;padding:7px 10px;margin-top:7px}
input[type=date]{font-family:var(--mono)}

/* upcoming row */
.up{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule)}
.up>div{background:var(--panel);padding:15px 8px 17px;text-align:center}
.up .ud{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.up .is-today .ud{color:var(--blue)}
.up svg{width:56px;height:56px;margin:10px auto 9px;display:block}
.up .un{font-size:12.5px;line-height:1.35;color:var(--ink2)}
.up .us{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px}

/* prose */
.prose h2{font-family:var(--head);font-size:26px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em;
  text-wrap:balance}
.prose h3{font-family:var(--head);font-size:18px;font-weight:600;margin:22px 0 6px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 13px;color:var(--ink2);max-width:66ch}
.prose ul{margin:0 0 13px;padding-left:20px;color:var(--ink2);max-width:66ch}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--panel2);
  border:1px solid var(--rule);border-radius:4px;padding:1px 5px}

/* calendar */
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--rule)}
.dow{background:var(--panel2);padding:8px 4px;text-align:center;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.day{background:var(--panel);padding:7px 7px 9px;min-height:74px;position:relative}
.day.pad{background:var(--panel2);opacity:.45}
.day .n{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.day .pct{font-family:var(--mono);font-size:9.5px;color:var(--muted);position:absolute;right:7px;top:7px}
.day svg{display:block;margin:5px auto 0;width:27px;height:27px}
.day.today{outline:2px solid var(--blue);outline-offset:-2px}
.day.today .n{color:var(--blue);font-weight:600}
.day .tag{font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blue);text-align:center;margin-top:2px;line-height:1.2}
.navbtn{font-family:var(--ui);font-size:12px;color:var(--ink);background:var(--edge);
  border:1px solid var(--rule);border-radius:6px;padding:5px 10px;cursor:pointer}
.navbtn:hover{border-color:var(--blue);color:var(--blue)}
.phhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calnav{display:flex;gap:6px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:10px 8px;border-bottom:1px solid var(--rule);text-align:left}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
td.t{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}

.lkres{margin-top:14px;font-size:14px;color:var(--ink2)}
.lkres b{color:var(--ink);font-size:17px;font-family:var(--head)}

/* home: page cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule)}
.cards a{background:var(--panel);padding:16px;text-decoration:none;display:block}
.cards a:hover{background:var(--panel2)}
.cards .ct{font-family:var(--head);font-size:17px;font-weight:600;color:var(--ink)}
.cards .cd{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}

/* widget builder */
.builder{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start}
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.field select,.field input{width:100%}
.seg{display:flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;margin-top:7px}
.seg button{flex:1;font-family:var(--ui);font-size:12.5px;color:var(--ink2);background:var(--edge);
  border:0;border-right:1px solid var(--rule);padding:8px 4px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--blue);color:#fff}
.stage{background:repeating-conic-gradient(var(--panel2) 0% 25%,var(--panel) 0% 50%) 50%/18px 18px;
  border:1px dashed var(--rule);border-radius:10px;padding:26px 20px;display:flex;justify-content:center}
.stage>div{width:100%;max-width:340px}
.codebox{position:relative;margin-top:18px}
pre{margin:0;background:#0E1630;color:#D3DFFA;border-radius:10px;padding:15px 16px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre;-webkit-text-size-adjust:100%}
pre .tk{color:#CBB67C}
.copy{position:absolute;top:9px;right:9px;font-family:var(--ui);font-size:12px;color:#D3DFFA;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:6px;
  padding:5px 11px;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.2)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.gal>div{text-align:center}
.gal .cap{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:10px}

footer{text-align:center;color:#8A97B8;font-size:12.5px;padding:26px 10px 0;line-height:1.9}
footer a{color:#BFCBE8}
footer nav{margin:0 0 6px;gap:0}
footer nav a{font-size:11px;padding:4px 10px}

@media(max-width:900px){.cols{grid-template-columns:1fr}.up{grid-template-columns:repeat(3,1fr)}
  .builder{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}