/* shared by the console and every page: readout, keys, the command box, and the parts a channel window is built from */
:root{--key:#e4ff00;--ink:#ede7d8;--ink2:rgba(237,231,216,.74);--line:#3a3d1a;--mono:"Martian Mono",ui-monospace,monospace;--serif:"Fraunces",Georgia,serif;color-scheme:dark}
[hidden]{display:none!important}
.ro{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;font:500 11px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.ro li{margin:0;white-space:nowrap}
.ro b{font-weight:600;color:var(--key);margin-left:4px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid currentColor;border-radius:4px;font:600 11px/1 var(--mono);opacity:.85}
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--key);box-shadow:0 0 10px var(--key);flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:24px;border:2px solid var(--key);background:var(--key);color:#000;font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#000}
.btn.ghost{background:none;color:var(--key)}
.btn.ghost:hover{background:var(--key);border-color:var(--key);color:#000}

/* the command box: a dialog, a field and a list; a sheet from the bottom on a phone */
.pal{width:min(640px,calc(100vw - 24px));max-height:min(580px,calc(100dvh - 48px));margin:12vh auto auto;padding:0;background:#000;color:var(--ink);border:1px solid var(--key);border-radius:14px;box-shadow:0 30px 120px #000;overflow:hidden;flex-direction:column}
.pal[open]{display:flex}
.pal::backdrop{background:rgba(0,0,0,.78)}
.pal-bar{display:flex;align-items:center;gap:10px;padding:0 4px 0 16px;border-bottom:1px solid var(--line);min-height:46px}
.pal-led{width:8px;height:8px;border-radius:50%;background:var(--key);box-shadow:0 0 10px var(--key)}
.pal-l{flex:1;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--key)}
.pal-x{min-height:44px;min-width:64px;background:none;border:0;color:var(--ink);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pal-in{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line)}
.pal-pr{font:600 22px/1 var(--mono);color:var(--key)}
.pal input{flex:1;min-width:0;min-height:52px;background:none;border:0;color:var(--ink);font:400 22px/1.2 var(--serif);outline:0}
.pal input::placeholder{color:var(--ink2)}
.pal-r{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
.pal-o{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;min-height:54px;margin:0;padding:8px 12px;border-radius:9px;cursor:pointer}
.pal-t{font:600 14px/1.25 var(--mono);letter-spacing:.04em}
.pal-d{grid-column:1;font-size:15px;line-height:1.3;color:var(--ink2)}
.pal-k{grid-column:2;grid-row:1/span 2}
.pal-o[aria-selected=true]{background:var(--key);color:#000}
.pal-o[aria-selected=true] .pal-d{color:#000}
.pal-h{margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:500 11px/1.5 var(--mono);color:var(--ink2)}
@media (max-width:640px){.pal{margin:auto 0 0;width:100%;max-width:100%;border-radius:18px 18px 0 0;border-width:1px 0 0;max-height:88dvh}.pal input{font-size:20px}}

/* channel window parts */
.kick{font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--key);margin:36px 0 6px}
.kick+h2{margin-top:0}
.facts{list-style:none;padding:0;margin:16px 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:1100px){main .facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts li{margin:0;padding:10px 12px;background:#000;font:500 14px/1.35 var(--mono)}
.facts span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
.state{margin:14px 0;padding:10px 0 10px 14px;border-left:2px solid var(--key);font:500 13px/1.6 var(--mono)}
.state b{color:var(--key);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.sig{font-size:clamp(22px,3vw,28px);line-height:1.3;color:var(--key);margin:22px 0}
.fine{font-size:15px;line-height:1.55;color:var(--ink2)}
.links{list-style:none;padding:0;margin:10px 0 18px;display:flex;flex-wrap:wrap;gap:0 18px}
.links li{margin:0}
.links a{display:inline-flex;align-items:center;min-height:44px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.emb{margin:10px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
.emb-go{display:grid;grid-template-columns:44px 1fr;gap:3px 16px;align-items:center;width:100%;min-height:76px;padding:14px 16px;margin:0;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.emb-go svg{grid-row:1/span 3;width:44px;height:44px}
.emb-k{font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--key)}
.emb-t{font-size:19px;line-height:1.25}
.emb-n{font:500 11px/1.45 var(--mono);color:var(--ink2)}
.emb-go:hover,.emb-go:focus-visible{background:rgba(228,255,0,.08)}
.emb-f{display:block;width:100%;border:0;background:#000}
.tline{list-style:none;padding:0;margin:14px 0 6px}
.tline li{position:relative;margin:0;padding:0 0 16px 24px}
.tline li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:9px;border-radius:50%;border:2px solid var(--key);box-sizing:border-box}
.tline li:last-child::before{background:var(--key)}
.tline li::after{content:"";position:absolute;left:7px;top:17px;bottom:0;width:1px;background:var(--line)}
.tline li:last-child::after{display:none}
.tline time{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.tline em{font-style:normal;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--key);margin-left:8px}
.gl{list-style:none;padding:0;margin:16px 0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;font:600 12px/1.3 var(--mono);letter-spacing:.06em}
.gl li{display:flex;align-items:center;gap:10px;margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.gl i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:0 0 auto}
.clip{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;border-top:1px solid var(--line);padding:12px 0;margin:0}
.clip h3{grid-column:1;margin:0;font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.clip p{grid-column:1;margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.clip .play{grid-column:2;grid-row:1/span 2}
.clip .stat{grid-column:1/-1;margin:0}
.play{min-height:48px;min-width:96px;padding:0 18px;border-radius:24px;border:2px solid var(--key);background:none;color:var(--key);font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.play:hover,.play[aria-pressed="true"]{background:var(--key);color:#000}
.stat{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.tiles{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line)}
.tiles li{position:relative;margin:0;border-bottom:1px solid var(--line)}
.tile{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:2px 16px;min-height:72px;padding:12px 74px 12px 0;color:var(--ink);text-decoration:none}
.tile .ic{grid-row:1/span 2;display:block}
.tn{font:600 14px/1.3 var(--mono);letter-spacing:.04em;color:var(--key)}
.td{font-size:15px;line-height:1.4;color:var(--ink2)}
.tile:hover .tn,.tile:focus-visible .tn{color:var(--ink)}
.tile:hover{background:rgba(228,255,0,.05)}
.tile-about{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.tiles.plain .tile{grid-template-columns:1fr}

/* inner page parts kept here for the size budget: the contact routing table and the genre rules */
.rt{margin:16px 0;border-top:1px solid var(--line)}.rt li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.rt b{font:600 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--key)}.rt span{grid-column:1/-1;font-size:17px;line-height:1.45}.rt em{grid-column:2;grid-row:1;font:500 11px/1.5 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
@media (min-width:860px){.rt li{grid-template-columns:11rem 1fr 9rem}.rt span{grid-column:2}.rt em{grid-column:3;text-align:right}}
.rules{margin:28px 0;display:grid;gap:22px;counter-reset:r}.rules li{margin:0;padding:0 0 0 18px;border-left:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--ink2);counter-increment:r}
.rules li::before{content:"R" counter(r);display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--key);margin-bottom:10px}.rules b{display:block;font-weight:400;font-size:23px;line-height:1.2;color:var(--ink);margin-bottom:6px}
@media (min-width:860px){.rules{grid-template-columns:repeat(3,1fr)}}
/* the REDOUBT window: a phone frame beside the name */
.phone{margin:0;padding:7px;border:1px solid var(--line);border-radius:22px;background:#000}.phone img{display:block;width:100%;height:auto;border-radius:15px}
.gm{display:grid;grid-template-columns:42% 1fr;grid-template-areas:"f h" "l l" "x x";gap:0 16px;align-items:start}
.gm>.phone{grid-area:f}.gm-h{grid-area:h}.gm>.lede{grid-area:l;margin-top:20px}.gm>.facts{grid-area:x;grid-template-columns:1fr}
.gm-h h1{margin-bottom:12px}.gm-h .cta{flex-direction:column;margin:12px 0 0}.gm-h .btn{padding:8px 12px;text-align:center;line-height:1.3}
.gm2{display:grid;gap:20px}.gm2 .phone{max-width:240px}
@media (min-width:860px){.gm{grid-template-columns:minmax(240px,300px) 1fr;grid-template-areas:"f h" "f l" "f x";gap:0 48px}.gm>.lede{margin-top:24px}.gm-h .cta{flex-direction:row}.gm-h .btn{padding:0 22px}.gm .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.gm{grid-template-rows:auto auto 1fr}.gm2{grid-template-columns:1fr 240px;gap:48px}}
/* the guide pager */
.pager{display:grid;gap:1px;margin:40px 0 0;background:var(--line);border:1px solid var(--line)}
.pager a{display:block;min-height:44px;padding:14px 16px;background:#000;color:var(--ink);text-decoration:none;font-size:17px;line-height:1.35}.pager a:hover{color:var(--key)}
.pager span{display:block;margin-bottom:4px;font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--key)}
@media (min-width:700px){.pager{grid-template-columns:1fr 1fr}.pager a+a{text-align:right}}
.rt a{display:inline-flex;align-items:center;min-height:44px;margin-top:-12px}