@font-face{font-family:'JetBrains Mono';src:url(/web/fonts/JetBrainsMono-Regular.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url(/web/fonts/JetBrainsMono-SemiBold.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url(/web/fonts/JetBrainsMono-Bold.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url(/web/fonts/JetBrainsMono-ExtraBold.woff2) format('woff2');font-weight:800;font-display:block}

/* Board fonts for the Display sheet. A browser only downloads the ones in use. Licenses: /web/fonts/licenses */
@font-face{font-family:'Atkinson Hyperlegible Mono';src:url(/web/fonts/atkinson-hyperlegible-mono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Mono';src:url(/web/fonts/atkinson-hyperlegible-mono-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/web/fonts/atkinson-hyperlegible-next-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/web/fonts/atkinson-hyperlegible-next-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'B612 Mono';src:url(/web/fonts/b612-mono-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Doto';src:url(/web/fonts/doto-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Overpass';src:url(/web/fonts/overpass-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Lexend';src:url(/web/fonts/lexend-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Lexend';src:url(/web/fonts/lexend-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/web/fonts/ibm-plex-mono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Red Hat Mono';src:url(/web/fonts/red-hat-mono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Martian Mono';src:url(/web/fonts/martian-mono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/web/fonts/geist-mono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url(/web/fonts/jost-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Outfit';src:url(/web/fonts/outfit-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Manrope';src:url(/web/fonts/manrope-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'VT323';src:url(/web/fonts/vt323-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Press Start 2P';src:url(/web/fonts/press-start-2p-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sixtyfour';src:url(/web/fonts/sixtyfour-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url(/web/fonts/silkscreen-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Orbitron';src:url(/web/fonts/orbitron-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Share Tech Mono';src:url(/web/fonts/share-tech-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bungee';src:url(/web/fonts/bungee-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Monoton';src:url(/web/fonts/monoton-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Special Elite';src:url(/web/fonts/special-elite-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Major Mono Display';src:url(/web/fonts/major-mono-display-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url(/web/fonts/comic-neue-700.woff2) format('woff2');font-weight:700;font-display:swap}

/* Theme tokens are set on :root by shell.js; these are the purple defaults. */
:root{--bg:#0D0221;--panel:#150533;--cell:#1F0A47;--seam:#080114;--fg:#01CDFE;--head:#FFFFFF;--accent:#FF3EC8;--ok:#C2FE0B;
  --font:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --bfont:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;--bfw:700;--bfwh:800;--bfs:1;--edge:color-mix(in srgb,var(--accent) 24%,transparent);color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--head);font-family:var(--font)}
body{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
[hidden]{display:none!important}
/* visually hidden, still read by screen readers and search engines (the page heading) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.app{height:100%;display:grid;gap:10px;grid-template-columns:var(--cols,1.32fr 1fr);grid-auto-rows:minmax(0,1fr)}
.panel{min-width:0;min-height:0;position:relative;background:var(--bg);background-image:var(--bgimg,none);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.panel.err{display:grid;place-items:center;padding:20px;color:#E24B4A;font-size:13px}
/* loading and error screen: THE CLUB in the board's flap tiles, a message, and a progress bar */
.boot{position:fixed;inset:0;z-index:100;background:var(--bg);transition:opacity .35s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bt-tiles{display:flex;gap:2px;font-size:22px;font-weight:700;letter-spacing:0}
.bt-tiles s{text-decoration:none;position:relative;display:block;width:1.22ch;height:1.6em;background:var(--cell);border-radius:2px;color:var(--fg)}
.bt-tiles s::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--seam);opacity:.9}
.bt-tiles s.c{color:var(--accent)}
.bt-tiles b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1;font-weight:700}
.bt-sub{color:var(--fg);font-size:11px}
.bt-sub b{color:var(--head);font-weight:800}
.bt-bar{width:170px;max-width:60vw;height:4px;border-radius:2px;background:var(--cell);overflow:hidden}
.bt-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .35s ease}
.bt-bar.wait i{transition:none}
.boot.out{opacity:0;pointer-events:none}
.panel-body{position:absolute;inset:0}
/* compact layout: one panel fills the screen; overlay panels slide up over it */
body.compact .app{grid-template-columns:1fr}
body.compact .panel.overlay{position:fixed;z-index:40;inset:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .28s cubic-bezier(.4,0,1,1),visibility 0s linear .28s;box-shadow:0 -12px 40px rgba(0,0,0,.6)}
body.compact .panel.overlay.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.32,1.12,.5,1),visibility 0s}
.ovl-close{display:none}
body.compact .ovl-close{all:unset;display:inline-flex;align-items:center;gap:8px;position:absolute;z-index:2;top:12px;right:12px;height:44px;padding:0 16px;cursor:pointer;
  font:800 13px/1 var(--font);letter-spacing:.14em;color:#FFFFFF;background:#D7263D;border:1px solid #FF6B7A;border-radius:10px;box-shadow:0 4px 18px rgba(215,38,61,.45)}
body.compact .ovl-close b{font-size:20px;line-height:1;font-weight:800}
.fab{display:none}
body.compact .fab{all:unset;position:fixed;z-index:30;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:800 12px/1 var(--font);letter-spacing:.14em;color:var(--bg);background:var(--accent);padding:14px 18px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
body.compact .fab[hidden],body.docked .fab{display:none}
body.compact .fab svg{width:18px;height:18px}
.ovl-close:focus-visible,.fab:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width:900px){ .panel{min-height:0} }
@media (prefers-reduced-motion:reduce){ body.compact .panel.overlay{transition:none} }
body.no-anim .panel.overlay{transition:none!important}
/* shared sheet (theme picker) */
/* the backdrop itself scrolls (a tall sheet on a phone), and the sheet centers with auto margins so its top is never cut off */
.sheet{position:fixed;inset:0;background:rgba(5,5,10,.72);display:flex;padding:16px;z-index:50;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheetin{width:min(560px,100%);margin:auto;flex:none;background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.sheethead{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-weight:800;letter-spacing:.16em;font-size:12px}
.sheethead button{all:unset;cursor:pointer;font-size:26px;line-height:1;color:#FFFFFF;width:40px;height:40px;display:grid;place-items:center}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.th{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--cell);color:#FFFFFF;font-size:12px;font-weight:700;border:1px solid transparent}
.th[aria-pressed="true"]{border-color:var(--accent)}
.th:focus-visible,.sty:focus-visible,.fsel:focus-visible,.fop:focus-visible,.sheethead button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dsec{display:flex;flex-direction:column;gap:8px}
.dlab{font-size:10.5px;letter-spacing:.16em;font-weight:800;color:var(--accent)}
.dgrp{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--fg);margin:6px 0 0 2px}
.motions .sn{font-size:11px}
.speeds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.spd{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:9px 4px;border-radius:10px;background:var(--cell);color:#FFFFFF;border:1px solid transparent;font-size:11px;font-weight:800;letter-spacing:.12em}
.spd[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.spd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sprev{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--cell)}
.spl{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.spt{display:flex;gap:2px;font-family:var(--bfont);font-weight:var(--bfw,700);font-size:17px;color:var(--ok)}
.spt b{font-weight:inherit;display:grid;place-items:center;width:1.25em;height:1.6em}
.spt.tiles b{background:var(--bg);border-radius:2px;position:relative}
.spt.tiles b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--seam)}
.spt.dec b{width:.75em}
.spre{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);flex:none}
.spre svg{width:18px;height:18px}
.spre:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.sd.sign{font-family:'Doto',monospace;font-weight:900;color:var(--fg);text-shadow:0 0 6px color-mix(in srgb,var(--fg) 75%,transparent);background:color-mix(in srgb,var(--bg) 60%,#000);border-radius:6px;padding:0 8px;align-self:flex-start}
.sty{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--cell);color:#FFFFFF;border:1px solid transparent;min-width:0}
.sty[aria-pressed="true"]{border-color:var(--accent)}
.sd{display:flex;gap:2px;align-items:center;height:26px;font-family:var(--bfont);font-weight:var(--bfw);font-size:18px;color:var(--fg)}
.sd.tiles b{display:grid;place-items:center;width:18px;height:25px;border-radius:2px;background:var(--bg);position:relative;font-weight:inherit}
.sd.tiles b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--seam)}
.sn{font-size:12px;font-weight:800;letter-spacing:.08em}
.fw{font-size:11px;font-weight:600;line-height:1.4;color:var(--fg)}
.fsel{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:10px;background:var(--cell);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.fsel svg{grid-column:2;grid-row:1/3;width:20px;height:20px;color:var(--accent);transition:transform .15s}
.fsel[aria-expanded="true"] svg{transform:rotate(180deg)}
.fsel .fcur{grid-column:1;grid-row:2;min-width:0}
.fnm{font-size:12px;font-weight:800;letter-spacing:.06em;color:#FFFFFF;overflow-wrap:anywhere}
.flist{display:flex;flex-direction:column;gap:2px;max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px;border-radius:10px;background:var(--bg);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.flist .dgrp{margin:8px 0 2px 6px}.flist .dgrp:first-child{margin-top:2px}
.fop{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:7px;padding:9px 10px;border-radius:8px;border:1px solid transparent}
.fop:hover,.fop:focus-visible{background:var(--cell)}
.fop[aria-selected="true"]{border-color:var(--accent);background:var(--cell)}
/* font samples: tiles at the font's own tile width, then plain text */
.fsm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-width:0;font-size:calc(17px * var(--fs,1));color:var(--fg);line-height:1}
.fti{display:flex;gap:2px}
.fti b{position:relative;display:grid;place-items:center;width:var(--tw,.73em);height:1.5em;border-radius:2px;background:var(--panel);font-weight:inherit}
.fop[aria-selected="true"] .fti b,.fop:hover .fti b,.fsel .fti b{background:var(--bg)}
.fti b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--seam)}
.fpl{white-space:nowrap}
/* hover, on devices with a mouse: the same accent tint as the station button */
@media (hover:hover){
  .th:hover,.sty:hover,.fsel:hover{background:color-mix(in srgb,var(--accent) 12%,var(--cell))}
  .th:not([aria-pressed="true"]):hover,.sty:not([aria-pressed="true"]):hover,.fsel:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
  .sheethead button:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:9px}
  body.compact .fab:hover{filter:brightness(1.12)}
  body.compact .ovl-close:hover{background:#E8364D}
}
.dnote{margin:0;font-size:11px;font-weight:600;color:var(--fg)}
@media (max-width:420px){.styles{grid-template-columns:1fr}}
.sw{display:flex;gap:2px}.sw b{display:grid;place-items:center;width:22px;height:30px;background:var(--tbg);color:var(--tfg);border-radius:3px;font-size:17px;border:1px solid color-mix(in srgb,var(--tac) 30%,transparent)}

/* ---- motion, iOS style: buttons give under a finger and spring back; the Display sheet rises and settles, its
   font list unrolls from the picker, the map button pops back in; closing, they slip quickly away. Each is drawn
   above the page while it moves. Browsers without @starting-style show and hide them as before. */
:root{--spr:cubic-bezier(.34,1.4,.64,1);--out:cubic-bezier(.4,0,1,1)}
button{transition-property:scale,background,background-color,border-color,color,filter;transition-duration:.38s,.15s,.15s,.15s,.15s,.15s;transition-timing-function:var(--spr),ease,ease,ease,ease,ease}
button:not(:disabled):active{scale:.95;transition-duration:.08s}
.sheet{transition:opacity .25s ease,display .3s allow-discrete}
.sheet[hidden]{opacity:0;transition:opacity .2s ease,display .2s allow-discrete}
.sheet .sheetin{transition:transform .5s cubic-bezier(.32,1.25,.5,1),opacity .2s ease}
.sheet[hidden] .sheetin{transform:translateY(26px) scale(.94);opacity:0;transition:transform .2s var(--out),opacity .18s ease}
@starting-style{.sheet:not([hidden]){opacity:0}.sheet:not([hidden]) .sheetin{transform:translateY(40px) scale(.94);opacity:0}}
.flist{transform-origin:50% 0;transition:transform .42s var(--spr),opacity .18s ease,display .42s allow-discrete}
.flist[hidden]{transform:scaleY(.3);opacity:0;transition:transform .18s var(--out),opacity .15s ease,display .18s allow-discrete}
@starting-style{.flist:not([hidden]){transform:scaleY(.3);opacity:0}}
body.compact .fab{transition:scale .45s var(--spr),opacity .2s ease,filter .15s,display .45s allow-discrete}
@starting-style{body.compact .fab:not([hidden]){scale:.4;opacity:0}}
@media (prefers-reduced-motion:reduce){button,.sheet,.sheet .sheetin,.flist,body.compact .fab{transition:none!important}button:active{scale:none!important}}

/* the Display sheet's last row: donations (PayPal, new tab) */
.donc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:12px;padding:14px 16px;background:color-mix(in srgb,var(--accent) 8%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.donc>div{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.5;color:var(--fg)}
.donc b{font-size:11px;letter-spacing:.14em;color:var(--accent)}
.donc a{flex:none;color:var(--bg);background:var(--accent);text-decoration:none;padding:11px 14px;border-radius:10px;font:800 11.5px/1 var(--font);letter-spacing:.12em}
.donc a:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (hover:hover){.donc a:hover{filter:brightness(1.12)}}