/* Diveni — CGA 16-color BBS look on a phosphor screen. Black ground, one
   monospace face for text, a pixel face for the big numbers, glow everywhere. */
:root {
  --bg: #000000;
  --fg: #b4b4b4;
  --w: #ffffff; --d: #7a7a7a;
  --c: #55ffff; --m: #ff55ff; --y: #ffff55; --g: #55ff55; --r: #ff5555; --bl: #5555ff; --o: #ff8800;
  --blue: #0000aa; --red: #aa0000; --amber: #aa5500;
  --mono: 'IBM Plex Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  --pixel: 'VT323', 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; text-shadow: 0 0 3px rgba(190,190,190,0.42), -0.6px 0 rgba(255,40,80,0.22), 0.6px 0 rgba(0,255,255,0.22); }
a { color: var(--c); } a:hover { color: var(--w); }
pre { margin: 0; font-family: inherit; }
button { font: inherit; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--y); outline-offset: 2px; }
::selection { background: var(--c); color: #000; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 16px 24px 40px; display: flex; flex-direction: column; gap: 18px; }

/* colors, each with its own phosphor glow */
.c { color: var(--c); text-shadow: 0 0 2px rgba(85,255,255,0.9), 0 0 9px rgba(85,255,255,0.8), 0 0 22px rgba(85,255,255,0.35), 0 0 44px rgba(85,255,255,0.18), -0.8px 0 rgba(255,40,80,0.35), 0.8px 0 rgba(0,255,255,0.35); }
.m { color: var(--m); text-shadow: 0 0 2px rgba(255,85,255,0.9), 0 0 9px rgba(255,85,255,0.8), 0 0 22px rgba(255,85,255,0.35), 0 0 44px rgba(255,85,255,0.18), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.y { color: var(--y); text-shadow: 0 0 2px rgba(255,255,85,0.9), 0 0 9px rgba(255,255,85,0.75), 0 0 22px rgba(255,255,85,0.32), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.w { color: var(--w); text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.65), 0 0 20px rgba(255,255,255,0.25), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.g { color: var(--g); text-shadow: 0 0 2px rgba(85,255,85,0.9), 0 0 9px rgba(85,255,85,0.75), 0 0 22px rgba(85,255,85,0.32), 0 0 44px rgba(85,255,85,0.16), -0.8px 0 rgba(255,40,80,0.28), 0.8px 0 rgba(0,255,255,0.28); }
.r { color: var(--r); text-shadow: 0 0 2px rgba(255,85,85,0.9), 0 0 9px rgba(255,85,85,0.85), 0 0 22px rgba(255,85,85,0.38), 0 0 44px rgba(255,85,85,0.18), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.bl { color: #8080ff; text-shadow: 0 0 2px rgba(120,120,255,0.9), 0 0 9px rgba(85,85,255,0.95), 0 0 22px rgba(85,85,255,0.42), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.o { color: var(--o); text-shadow: 0 0 2px rgba(255,136,0,0.9), 0 0 9px rgba(255,136,0,0.85), 0 0 22px rgba(255,136,0,0.38), 0 0 44px rgba(255,136,0,0.18), -0.8px 0 rgba(255,40,80,0.3), 0.8px 0 rgba(0,255,255,0.3); }
.d { color: #8a8a8a; text-shadow: 0 0 4px rgba(200,200,200,0.35), -0.6px 0 rgba(255,40,80,0.18), 0.6px 0 rgba(0,255,255,0.18); }
.b { font-weight: 700; }
.small { font-size: 12px; }
.glow { text-shadow: 0 0 2px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.85), 0 0 22px rgba(255,255,255,0.5), 0 0 48px rgba(85,255,255,0.4), 0 0 90px rgba(85,255,255,0.22), -1.2px 0 rgba(255,40,80,0.45), 1.2px 0 rgba(0,255,255,0.45); }
.big-num { font-family: var(--pixel); font-weight: 400; letter-spacing: 1px; }

/* layout atoms */
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col.tight { gap: 2px; }
.row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.row.tight { gap: 8px; align-items: center; }
.row.tt { flex-wrap: nowrap; }
.row.tt .desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.tt .rainpct { flex: 0 0 auto; }
.grow { flex: 1 1 auto; }
.right { text-align: right; }
.lbl { width: 100px; }
.mid { font-size: 42px; line-height: 1; }
.big { font-size: 40px; line-height: 1; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.two > .col > #moments { flex: 1 1 auto; }
#moments .moments { flex: 1 1 auto; justify-content: space-between; }
.scroll { overflow-x: auto; max-width: 100%; }
.tbl { line-height: 1.6; white-space: pre; overflow: hidden; }
.box { border: 1px solid var(--d); padding: 8px 12px; color: var(--w); box-shadow: 0 0 10px rgba(255,255,255,0.06), inset 0 0 18px rgba(255,255,255,0.03); }
.note { position: relative; border: 1px solid rgba(85,255,255,0.8); background: rgba(85,255,255,0.06); color: var(--w); font-size: 16px; line-height: 1.55; padding: 12px 16px 12px; margin-top: 8px; text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 7px rgba(255,255,255,0.45), -0.7px 0 rgba(255,40,80,0.25), 0.7px 0 rgba(0,255,255,0.25); box-shadow: 0 0 10px rgba(85,255,255,0.6), 0 0 30px rgba(85,255,255,0.35), inset 0 0 40px rgba(85,255,255,0.1); }
.note .prompt { letter-spacing: 1px; }
.note .d { text-shadow: none; }
.note.typing .note-.hint { color: var(--d); font-size: 12px; }
.errors:empty { display: none; }
.errors { font-size: 12px; }

/* header */
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.logo { font-size: 14px; line-height: 1.05; font-weight: 700; text-shadow: 0 0 3px rgba(85,255,255,1), 0 0 10px rgba(85,255,255,0.9), 0 0 26px rgba(85,255,255,0.6), 0 0 60px rgba(85,255,255,0.35), -1.5px 0 rgba(255,40,80,0.5), 1.5px 0 rgba(0,255,255,0.5); }
.top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; text-align: right; }
.keys { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.key { color: var(--c); white-space: nowrap; text-shadow: 0 0 2px rgba(85,255,255,0.9), 0 0 8px rgba(85,255,255,0.7), 0 0 18px rgba(85,255,255,0.3); }
.hint .key, .note .key { white-space: normal; text-align: left; }
.key:hover { color: var(--w); text-shadow: 0 0 8px rgba(255,255,255,0.8); }

/* bars */
.bar { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 5px 10px; flex-wrap: wrap; }
.bluebar { background: #0000bb; color: var(--w); box-shadow: 0 0 12px rgba(40,40,255,0.9), 0 0 34px rgba(0,0,255,0.5), inset 0 0 28px rgba(120,120,255,0.35); }
.redbar { background: #bb0000; color: var(--w); box-shadow: 0 0 12px rgba(255,40,40,0.8), 0 0 34px rgba(255,0,0,0.45), inset 0 0 28px rgba(255,120,120,0.3); }
.ambbar { background: var(--amber); color: var(--w); box-shadow: 0 0 14px rgba(255,136,0,0.45); }
.okbar { border: 1px solid var(--d); box-shadow: 0 0 8px rgba(85,255,85,0.12); }
.bar.dim { color: var(--d); border: 1px solid var(--d); }
.bar .sep { color: rgba(255,255,255,0.4); }
.bar .break { flex-basis: 100%; height: 0; }
.bar .key { color: var(--w); } .bar .key:hover { color: var(--y); }
.bluebar .d { color: rgba(255,255,255,0.6); }
.bluebar .y, .redbar .y { text-shadow: 0 0 6px rgba(255,255,85,0.7); }

/* alerts */
.alerts { display: flex; flex-direction: column; gap: 8px; }
.alert { display: flex; flex-direction: column; }
.alert-head { width: 100%; text-align: left; cursor: pointer; }
.alert-head:hover { filter: brightness(1.15); }
.alert-body { border: 1px solid; border-top: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); color: var(--fg); }
.alert-body.redbar { border-color: var(--red); background: var(--bg); box-shadow: none; }
.alert-body.ambbar { border-color: var(--amber); background: var(--bg); box-shadow: none; }
.alert-body .key { color: var(--c); }
.alert-full { white-space: pre-wrap; font-size: 12px; color: var(--fg); margin-top: 8px; border-top: 1px dashed var(--d); padding-top: 8px; }

/* section headers: ═══ TITLE ═══════ with a rule that fills the row */
.sec { display: flex; align-items: center; color: var(--m); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; gap: 0; text-shadow: 0 0 6px rgba(255,85,255,0.6), 0 0 16px rgba(255,85,255,0.3); }
.sec-t { flex: 0 0 auto; }
.sec-rule { flex: 1 1 auto; height: 3px; border-top: 1px solid var(--m); border-bottom: 1px solid var(--m); margin-top: 1px; box-shadow: 0 0 8px rgba(255,85,255,0.9), 0 0 22px rgba(255,85,255,0.45); }
.sec-x { flex: 0 0 auto; margin-left: 8px; font-weight: 400; font-size: 12px; }

/* now */
.now-head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; line-height: 1; margin: 4px 0 2px; }
.now-temp { font-size: 120px; text-shadow: 0 0 3px rgba(255,255,255,1), 0 0 12px rgba(255,255,255,0.9), 0 0 34px rgba(255,255,255,0.6), 0 0 80px rgba(85,255,255,0.5), 0 0 140px rgba(85,255,255,0.3), -2px 0 rgba(255,40,80,0.5), 2px 0 rgba(0,255,255,0.5); }
.now-text { font-size: 44px; }
.now-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; font-size: 14px; }

/* hourly grid (also used for the six-hour strip) */
.hgrid { display: grid; align-items: end; font-size: 13px; line-height: 1.5; width: max-content; }
.hgrid .hl { position: sticky; left: 0; background: var(--bg); padding-right: 6px; z-index: 1; text-align: left; }
.hgrid .hc { text-align: center; white-space: nowrap; overflow: hidden; }
.hgrid .hday { text-align: left; font-size: 12px; }
.hgrid .htemp { font-size: 30px; line-height: 1.1; }
.hgrid .htemp-sm { font-size: 24px; line-height: 1.1; }
.hgrid .bar { display: block; width: 100%; height: 6px; }
.hgrid .hc:has(.bar), .hgrid .hc:empty { height: 26px; display: flex; align-items: flex-end; }
.o-bar { background: var(--o); box-shadow: 0 0 6px rgba(255,136,0,1), 0 0 16px rgba(255,136,0,0.5); }
.b-bar { background: #6a6aff; box-shadow: 0 0 6px rgba(100,100,255,1), 0 0 16px rgba(85,85,255,0.6); }

/* key moments */
.moments { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.mom { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.mom .b { letter-spacing: 1px; font-size: 12px; text-transform: uppercase; }

/* lanes: one metric per row, number bonded to its own bar */
.lanes { display: flex; flex-direction: column; gap: 0; width: max-content; min-width: 100%; }
.lane { display: grid; align-items: end; font-size: 13px; padding: 3px 0; }
.lane.rule { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4px; padding-top: 6px; }
.lane-head { padding: 0; }
.lane-head .lcell { color: var(--d); font-size: 11px; }
.lane-head .hday { color: var(--c); text-align: left; font-size: 11px; }
.lane-label { position: sticky; left: 0; z-index: 1; background: var(--bg); padding-right: 6px; font-size: 11px; letter-spacing: 1px; align-self: end; line-height: 1.6; }
.lane-label small { display: block; font-size: 9px; letter-spacing: 0; opacity: 0.7; line-height: 1; margin-top: -2px; }
.lcell { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; text-align: center; min-width: 0; white-space: nowrap; }
.lcell .lv { display: block; }
.lane.has-bar .lcell { height: 38px; }
.lane.big.has-bar .lcell { height: 52px; }
.lane.big .lv { font-family: var(--pixel); font-size: 30px; line-height: 1.05; letter-spacing: 1px; }
.lbar { display: block; width: calc(100% - 4px); margin: 3px auto 0; min-height: 0; }
.lane-temp .lbar { background: var(--o); box-shadow: 0 0 6px rgba(255,136,0,1), 0 0 18px rgba(255,136,0,0.5); }
.lane-rain .lbar { background: #6a6aff; box-shadow: 0 0 6px rgba(100,100,255,1), 0 0 18px rgba(85,85,255,0.6); }
.lane-wind .lbar { background: rgba(255,255,255,0.55); box-shadow: 0 0 5px rgba(255,255,255,0.4); }
.lane-rain .lv { color: #8a8aff; }
.lane-rain .lv.c, .lane-rain .c .lv { color: var(--c); }
.lane-rain .r .lv { color: var(--r); }
.lane-temp .lcell { color: var(--w); }
.lane-wind .lcell { color: var(--w); }
.lane-feels .lcell, .lane-gust .lcell, .lane-dewpt .lcell, .lane-sky .lcell { color: var(--fg); }
.lane-gust .y .lv { color: var(--y); }
.lane-dewpt .r .lv { color: var(--r); } .lane-dewpt .o .lv { color: var(--o); }
.lcell[data-why]:hover { background: rgba(85,255,255,0.08); }
.lcell.big[data-why] { border-bottom: 0; }
.lane .lcell[data-why] { border-bottom: 0; }

/* one label style everywhere: small caps, spaced */
.now-details .d, .mrow.legend span, .lrow.legend span, .r15-head > .d.small, .col > .d.small, .mom .b, .lane-label, .why-tbl .h, .prow > .d, .irow > .w {
  text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
}
.now-details .d { margin-right: 4px; }
.now-details > span { font-size: 15px; }
.hint { font-size: 12px; line-height: 1.5; }

/* week */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; text-align: center; }
.day { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mid range */
.mtable { display: flex; flex-direction: column; gap: 6px; }
.mrow { display: grid; grid-template-columns: 62px minmax(120px, 1fr) 128px 62px minmax(0, 150px); gap: 14px; align-items: center; white-space: nowrap; }
.mrow.legend { margin-bottom: 6px; align-items: end; }
.mtrack { position: relative; display: block; height: 12px; background: #161616; }
.mfill { position: absolute; top: 2px; bottom: 2px; background: var(--g); opacity: 0.85; }
.mfill.wide { background: var(--y); }
.mmid { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: #000; border-left: 1px solid var(--w); border-right: 1px solid var(--w); }
.maxis { position: relative; display: block; height: 16px; }
.mtick { position: absolute; transform: translateX(-50%); color: var(--d); font-size: 11px; }
.mtick:first-child { transform: none; }
.mtick:last-child { transform: translateX(-100%); }
.mnum { font-size: 26px; line-height: 1; }
/* long range */
.ltable { display: flex; flex-direction: column; gap: 2px; }
.lrow { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 12px; align-items: baseline; }
/* severe */
.two-sev { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tag { display: inline-block; padding: 0 6px; font-weight: 700; text-shadow: none; box-shadow: 0 0 8px rgba(255,255,255,0.5), 0 0 22px rgba(255,255,255,0.25); }
.ptable { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.prow { display: grid; grid-template-columns: 110px 40px auto 30px; gap: 10px; align-items: baseline; }
.itable { display: flex; flex-direction: column; gap: 3px; }
.irow { display: grid; grid-template-columns: 28px 78px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.irow .d { white-space: normal; }
.irow.obs { grid-template-columns: 96px minmax(0, 1fr); }
.irow.obs .w { white-space: normal; overflow-wrap: anywhere; }

/* discussion */
.two-afd { display: flex; flex-direction: column; gap: 10px; }
.afd-jargon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.kp { line-height: 1.5; }
abbr.term { text-decoration: none; border-bottom: 1px dotted var(--c); cursor: help; }
.kp abbr.term { border-bottom: 0; cursor: default; }
.afd abbr.term { color: var(--c); }
.afd { white-space: pre-wrap; font-size: 12.5px; color: var(--fg); line-height: 1.5; }
.afd.preview { max-height: 22em; overflow: hidden; }

/* panels */
.panel { border: 1px solid var(--c); padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 12px rgba(85,255,255,0.25), inset 0 0 20px rgba(85,255,255,0.05); }
.panel input { flex: 1 1 auto; background: #000; color: var(--w); border: 0; border-bottom: 1px solid var(--d); font: inherit; padding: 2px 4px; min-width: 0; }
.results { display: flex; flex-direction: column; gap: 2px; }
.result { text-align: left; padding: 2px 4px; }
.result:hover { background: var(--blue); color: var(--w); }
.favrow { display: flex; gap: 12px; align-items: center; }
.favsave { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 8px; margin-top: 4px; }
.favsave input { flex: 1 1 160px; }
.panel .hint { font-size: 11px; }

/* footer */
.foot { gap: 10px 22px; padding: 8px 12px; }
.foot .credit { white-space: nowrap; }
.foot .credit .d { color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-right: 4px; }
.foot .credit a { color: var(--w); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.5); }
.foot .credit a:hover { color: var(--y); border-bottom-color: var(--y); }
.foot-notes { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px 0; }
.foot-notes p { margin: 0; color: var(--d); font-size: 12px; line-height: 1.5; max-width: 90ch; }
.foot-notes a { color: var(--d); }

/* 15-minute rain panel */
.r15 { border: 1px solid rgba(85,85,255,0.35); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.r15.dry { border-color: rgba(255,255,255,0.12); }
.r15.coming { border-color: rgba(85,255,255,0.45); box-shadow: 0 0 10px rgba(85,255,255,0.15); }
.r15.raining { border-color: rgba(85,85,255,0.7); box-shadow: 0 0 12px rgba(85,85,255,0.35); }
.r15-head { display: flex; flex-direction: column; gap: 2px; }
.r15 .lanes, #now .lanes { width: 100%; min-width: 0; }
.r15 .lane-head .lcell { overflow: visible; text-align: left; padding-left: 2px; }
.r15 .lane.has-bar .lcell { height: 34px; }
.r15 .lane-head .hday { color: var(--d); }
.r15 .lane-rain .lv { font-size: 11px; }

/* nerd */
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }

/* the screen: scanlines + aperture grille, and a vignette with a bezel edge.
   Real fixed elements (not body pseudo-elements) sized to the large viewport,
   so iOS Safari's sliding toolbar never uncovers the page, and no filter on
   the scrolled content, so scrolling stays smooth. */
.screen { position: fixed; top: -80px; left: 0; right: 0; height: calc(100lvh + 160px); min-height: calc(100vh + 160px); pointer-events: none; z-index: 9; transform: translateZ(0); }
.screen .scan { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.42) 3px, rgba(0,0,0,0.42) 4px),
    repeating-linear-gradient(90deg, rgba(255,0,0,0.07) 0px, rgba(255,0,0,0.07) 1px, rgba(0,255,0,0.05) 1px, rgba(0,255,0,0.05) 2px, rgba(0,0,255,0.08) 2px, rgba(0,0,255,0.08) 3px); }
.screen .vig { position: absolute; inset: 80px 0; background: radial-gradient(ellipse 72% 64% at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.78) 100%); box-shadow: inset 0 0 120px rgba(0,0,0,0.9), inset 0 0 40px rgba(85,255,255,0.06); border-radius: 28px; }

@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.965; } 49% { opacity: 1; } 83% { opacity: 1; } 84% { opacity: 0.975; } 85% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .wrap { animation: none; }
  .cursor, .dot, #clock .colon, .sec-rule::after, .logo, .wrap.power-off, .wrap.power-on { animation: none; }
  .boot { display: none !important; }
  .note.typing .note-body::after { display: none; }
  .note.pending { max-height: none; padding: 12px 16px; opacity: 1; }
  .note.pending .prompt, .note.pending .note-body { visibility: visible; }
}

/* phone */
@media (max-width: 760px) {
  body { font-size: 12px; }
  .wrap { padding: 12px 14px 32px; gap: 14px; }
  .logo { font-size: 8.5px; }
  .top { align-items: flex-start; }
  .top-right { align-items: flex-start; text-align: left; }
  .keys { justify-content: flex-start; }
  .two { grid-template-columns: 1fr; gap: 16px; }
  .now-temp { font-size: 92px; }
  .now-text { font-size: 32px; }
  .now-details { font-size: 12px; gap: 2px 12px; }
  .mid { font-size: 32px; }
  .lbl { width: 78px; }
  .bar { font-size: 11px; gap: 8px; }
  .sec { font-size: 12px; }
  .week { grid-template-columns: 1fr; gap: 4px; text-align: left; }
  .day { display: grid; grid-template-columns: 52px 38px 28px 1fr 40px 44px; gap: 6px; align-items: baseline; }
  .day .pfx { display: none; }
  .day .big { font-size: 22px; }
  .tbl { font-size: 11px; }
  .hgrid { font-size: 11px; }
  .hgrid .htemp { font-size: 24px; }
  .hgrid .htemp-sm { font-size: 20px; }
  .lane { font-size: 11px; }
  .lane.big .lv { font-size: 24px; }
  .lane.has-bar .lcell { height: 32px; }
  .lane.big.has-bar .lcell { height: 44px; }
  .mrow { grid-template-columns: 52px minmax(80px, 1fr) 96px 44px; gap: 8px; }
  .mrow .mnote { display: none; }
  .mrow .pfx { display: none; }
  .mnum { font-size: 20px; }
  .lrow { grid-template-columns: 78px 1fr 1fr; font-size: 11px; }
  .two-sev { grid-template-columns: 1fr; }
  .two-afd { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 90px 36px auto 28px; }
  .irow { grid-template-columns: 24px 66px minmax(0, 1fr); }
  .gloss { grid-template-columns: 1fr; }
  .boot { padding: 20px 16px; font-size: 13px; }
  .boot .logo { font-size: 7px; }
  .boot #boot-text { font-size: 13px; }
}

/* power cycle on location change */
.wrap.power-off { animation: poweroff 0.38s ease-in forwards; transform-origin: 50% 50%; }
@keyframes poweroff { 0% { transform: scaleY(1); filter: brightness(1); } 60% { transform: scaleY(0.012); filter: brightness(2.2); } 100% { transform: scaleY(0.012) scaleX(0.4); filter: brightness(0); opacity: 0; } }
.wrap.power-on { animation: poweron2 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; transform-origin: 50% 50%; }
@keyframes poweron2 { 0% { transform: scaleY(0.012) scaleX(0.4); filter: brightness(2.5); opacity: 1; } 45% { transform: scaleY(0.012) scaleX(1); } 100% { transform: scaleY(1); filter: brightness(1); } }

/* signal meter */
.sig { letter-spacing: 1px; }

/* amber phosphor mode: the whole screen retuned to one monochrome phosphor */
body.amber .wrap { filter: sepia(1) saturate(2.1) hue-rotate(-14deg); }
body.amber .why, body.amber .boot { filter: sepia(1) saturate(1.9) hue-rotate(-14deg) brightness(0.98); }

/* ---- flair: the future as imagined in 1985 ------------------------------ */
/* power-on: a quick brightness settle when the page first paints */
.wrap { animation: poweron 0.9s ease-out 1, flicker 4s steps(1, end) 0.9s infinite; }
@keyframes poweron { 0% { filter: brightness(0) contrast(2); } 12% { filter: brightness(1.6) contrast(1.4); } 30% { filter: brightness(0.7); } 55% { filter: brightness(1.15); } 100% { filter: brightness(1); } }

/* boot sequence overlay, shown once per browser session */
.boot { position: fixed; inset: 0; z-index: 8; background: #000; color: var(--c); font-family: var(--mono); font-size: 14px; line-height: 1.6; padding: 32px; text-shadow: 0 0 2px rgba(85,255,255,0.9), 0 0 9px rgba(85,255,255,0.8), 0 0 22px rgba(85,255,255,0.35), -0.8px 0 rgba(255,40,80,0.35), 0.8px 0 rgba(0,255,255,0.35); display: none; cursor: pointer; overflow: hidden; }
.boot .logo { font-size: 11px; margin-bottom: 18px; animation: none; }
.boot #boot-text { font-size: 15px; }
.boot.on { display: block; }
.boot.off { animation: bootout 0.5s ease-in forwards; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
.boot pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.boot pre::after { content: "▮"; animation: blink 0.8s steps(1, end) infinite; }

/* blinking block cursor after the location */
.cursor { display: inline-block; width: 8px; height: 14px; margin-left: 6px; background: var(--y); vertical-align: -2px; box-shadow: 0 0 6px rgba(255,255,85,0.8); animation: blink 1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* live clock with a pulsing colon */
#clock { font-variant-numeric: tabular-nums; }
#clock .colon { animation: blink 2s steps(1, end) infinite; }

/* telemetry chip */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1px; }
.dot { width: 7px; height: 7px; background: var(--r); box-shadow: 0 0 6px rgba(255,85,85,0.9); animation: blink 0.6s steps(1, end) infinite; }
.dot.on { background: var(--g); box-shadow: 0 0 8px rgba(85,255,85,0.9); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* HUD corner brackets on the plain-English boxes */
.note::before, .note::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--c); pointer-events: none; }
.note::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.note::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* section headers sweep in when they first appear */
.sec-rule { position: relative; overflow: hidden; }
.sec-rule::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 60px; background: linear-gradient(90deg, rgba(255,85,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,85,255,0) 100%); animation: sweep 6s linear infinite; opacity: 0.7; }
@keyframes sweep { 0% { left: -60px; } 20% { left: 100%; } 100% { left: 100%; } }

/* big numbers settle in with a digit scramble (driven from JS) */
.scramble { color: var(--c); }

/* the logo breathes */
.logo { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { text-shadow: 0 0 3px rgba(85,255,255,1), 0 0 10px rgba(85,255,255,0.9), 0 0 26px rgba(85,255,255,0.6), 0 0 60px rgba(85,255,255,0.35), -1.5px 0 rgba(255,40,80,0.5), 1.5px 0 rgba(0,255,255,0.5); } 50% { text-shadow: 0 0 4px rgba(85,255,255,1), 0 0 14px rgba(85,255,255,1), 0 0 36px rgba(85,255,255,0.8), 0 0 90px rgba(85,255,255,0.5), -1.5px 0 rgba(255,40,80,0.5), 1.5px 0 rgba(0,255,255,0.5); } }

/* hourly cells glow under the pointer */
.hgrid .hc:hover { background: rgba(85,255,255,0.08); }

/* the "why this number" panel: a terminal window pinned to the bottom */
.why { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); max-height: 60vh; overflow: auto; z-index: 8; background: #000; border: 1px solid var(--c); padding: 10px 14px; box-shadow: 0 0 24px rgba(85,255,255,0.35), inset 0 0 30px rgba(85,255,255,0.05); font-size: 13px; }
.why-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.why-tbl { display: grid; grid-template-columns: 64px 62px 66px 62px 54px; gap: 2px 10px; white-space: nowrap; }
.why-tbl .h { color: var(--d); font-size: 11px; letter-spacing: 1px; }
[data-why] { cursor: help; border-bottom: 1px dotted rgba(85,255,255,0.35); }
[data-why]:hover { border-bottom-color: var(--c); }

/* drift arrows on the week strip */
.drift { font-size: 11px; }

/* 15-minute rain strip */
.mstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 30px; margin-top: 4px; }
.mstrip i { display: block; background: #6666ff; box-shadow: 0 0 6px rgba(85,85,255,0.9); min-height: 0; }
.mstrip-lbl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; font-size: 10px; color: var(--d); text-align: center; }