/* HUD layer: enter splash, window title bars, status bar + command line.
   Black, white and chrome only. Hairlines are 1px, bevels are one highlight
   above and one shadow below, like the old Design Insites panels. */

:root{--hud-bar:linear-gradient(#2b2f34,#0b0c0e);--hud-hi:#ffffff2e;--hud-text:#c9ced2;--hud-faint:#6d7378;--hud-edge:#5b6167;--slab:#25292d;--grid:#ffffff0b;--cut-bg:#000;--cut-fg:#eef0f1;--cut-flash:#fff;--halo:#b9d6ff40;--wide:HelveticaNeue-UltraLight-Wide,HelveticaNeue-UltraLight,Arial,sans-serif}
html[data-theme=light]{--hud-bar:linear-gradient(#fff,#d3d9de);--hud-hi:#fff;--hud-text:#28333c;--hud-faint:#7d8890;--hud-edge:#9aa4ab;--slab:#28333c;--grid:#28333c12;--cut-bg:#fff;--cut-fg:#050506;--cut-flash:#050506;--halo:#52616e33}

/* ---------- ENTER splash (once per session) ---------- */
.splash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px;background:#000;color:#c9ced2;font:12px/1.55 AdwaitaMono,monospace}
.splash[hidden]{display:none}
.splash::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 3px)}
.splash-box{position:relative;width:min(640px,100%);padding:28px clamp(16px,4vw,34px) 24px;border:1px solid #5b6167;box-shadow:inset 0 1px #ffffff26,0 0 0 4px #000,0 0 0 5px #2b2f34}
/* crop marks on the four corners */
.splash-box::before,.splash-box::after{content:"+";position:absolute;color:#8a9095;font:11px/1 Arial,sans-serif}
.splash-box::before{top:-6px;left:-4px}
.splash-box::after{right:-4px;bottom:-6px}
.splash-logo{margin:0;overflow:hidden;font:clamp(7px,1.9vw,12px)/1.1 AdwaitaMono,monospace;text-align:center;color:transparent;background:linear-gradient(100deg,#55595f 0%,#f4f6f6 18%,#6c7177 30%,#e9ecec 42%,#3d4146 55%,#fafafa 66%,#7a7f85 78%,#dfe3e4 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:splash-sheen 4.5s linear infinite}
@keyframes splash-sheen{to{background-position:-250% 0}}
.splash-enter{display:flex;justify-content:center;margin:30px 0 4px}
.splash-enter button{padding:7px 14px;border:1px solid #8a9095;background:linear-gradient(#2b2f34,#08090a);box-shadow:inset 0 1px #ffffff33;color:#eef0f1;font:13px AdwaitaMono,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.splash-enter button:hover,.splash-enter button:focus-visible{background:linear-gradient(#f4f6f6,#9ba1a6);color:#050506;outline:none}
#splash-enter{animation:splash-blink 1.1s steps(1) infinite}
#splash-enter:hover,#splash-enter:focus-visible{animation:none}
@keyframes splash-blink{50%{border-color:transparent;color:#6d7378}}
/* CRT power-off: squash to a line, then to a dot */
.splash.is-leaving{animation:splash-fade .5s ease-in forwards}
.splash.is-leaving .splash-box{animation:splash-off .42s ease-in forwards}
@keyframes splash-off{55%{transform:scale(1,.004);filter:brightness(3)}to{transform:scale(0,.004);filter:brightness(5)}}
@keyframes splash-fade{70%{opacity:1}to{opacity:0}}

/* ---------- Window title bars ---------- */
.win{border:1px solid var(--hud-edge);box-shadow:inset 0 1px var(--hud-hi)}
/* digital-brutalist slab shadow: hard offset, no blur */
.one-page .win:not(.is-closed),.post-page .win:not(.is-closed){box-shadow:inset 0 1px var(--hud-hi),7px 7px 0 var(--slab)}
/* jumping to #guestbook focuses that panel; the panel itself needs no ring */
.page-panel:focus{outline:none}
/* a quiet measuring grid behind everything */
body.one-page::before,body.post-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--grid) 1px,transparent 1px) -1px 0/48px 48px,linear-gradient(var(--grid) 1px,transparent 1px) 0 -1px/48px 48px}
.win-bar{display:flex;align-items:center;gap:8px;height:22px;padding:0 3px 0 7px;border-bottom:1px solid #000;background:var(--hud-bar);box-shadow:inset 0 1px var(--hud-hi);color:var(--hud-text);font:10px/1 AdwaitaMono,monospace;letter-spacing:.14em;text-transform:uppercase;user-select:none}
html[data-theme=light] .win-bar{border-bottom-color:var(--hud-edge)}
/* dotted strip across the bar, like the 2001 Design Insites panels */
@media(hover:hover) and (min-width:761px){.win-bar{cursor:grab}.is-dragging,.is-dragging *{cursor:grabbing!important;user-select:none}}
.win-bar .win-tag{padding:2px 4px;color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none}
.win-bar .win-tag:hover{background:#000;color:#fff}
html[data-theme=light] .win-bar .win-tag:hover{background:#050506}
.win-grip{flex:1;height:4px;background:radial-gradient(circle,currentColor 1px,transparent 1.4px) 0 0/6px 4px;opacity:.55}
.win-bar .win-btn{flex:none;min-width:0;display:grid;place-items:center;width:17px;height:15px;padding:0;border:1px solid var(--hud-edge);background:var(--hud-bar);box-shadow:inset 0 1px var(--hud-hi);color:var(--hud-text);font:10px/1 AdwaitaMono,monospace;cursor:pointer}
.win-bar .win-btn:hover{background:linear-gradient(#f4f6f6,#9ba1a6);color:#050506}
.win-bar .win-btn:active{box-shadow:inset 0 1px 2px #000a}
.win.is-min>:not(.win-bar),.win.is-closed>:not(.win-bar){display:none!important}
.win.is-closed{padding-bottom:0;border-style:dashed;box-shadow:none}
.win.is-closed .win-bar{background:transparent;box-shadow:none;border-bottom:0;cursor:pointer}

/* Blog feed and guestbook card become framed windows. */

/* ---------- The bar: nav, radio and tools in one strip.
   Bottom of the screen on desktop, top on phones. ---------- */
.hud{position:relative;z-index:25;flex:none;display:flex;align-items:stretch;height:36px;margin:6px 6px 14px 0;border:1px solid var(--hud-edge);background:var(--hud-bar);box-shadow:inset 0 1px var(--hud-hi),5px 5px 0 var(--slab);color:var(--hud-text);font:11px/1 AdwaitaMono,monospace;letter-spacing:.06em}
.hud-cell{display:flex;align-items:center;gap:6px;padding:0 11px;border-right:1px solid #000;box-shadow:1px 0 var(--hud-hi);white-space:nowrap}
html[data-theme=light] .hud-cell{border-right-color:var(--hud-edge)}
.hud-cell:last-child{border-right:0;box-shadow:none}
.hud-faint{color:var(--hud-faint)}

/* page tabs in the heavy stretched Helvetica; the current page is the pressed chrome key */
.hud .site-nav{display:flex;flex:none;align-items:stretch;gap:0;padding:0;border:0}
.hud .site-nav a{gap:7px;padding:0 15px 2px 12px;color:var(--hud-text);font:900 17px/1 var(--wide);letter-spacing:-.07em;-webkit-text-stroke:.05em currentColor;text-transform:lowercase;text-decoration:none;text-shadow:none}
.hud .site-nav a::before{content:attr(data-key);align-self:flex-start;margin-top:6px;color:var(--hud-faint);font:400 9px/1 AdwaitaMono,monospace;letter-spacing:0;-webkit-text-stroke:0}
.hud .site-nav a[aria-current=page]::after{content:none}
.hud .site-nav a:hover{background:#000;color:#fff}
.hud .site-nav a[aria-current=page]{background:linear-gradient(#f4f6f6,#9ba1a6);box-shadow:inset 0 1px #fff,inset 0 -1px #5b6167;color:#050506}
.hud .site-nav a[aria-current=page]::before{color:#05050699}
html[data-theme=light] .hud .site-nav a{color:var(--hud-text);text-shadow:none}
html[data-theme=light] .hud .site-nav a:hover{background:#fff;color:#050506}
html[data-theme=light] .hud .site-nav a[aria-current=page]{background:#050506;box-shadow:none;color:#fff}
html[data-theme=light] .hud .site-nav a[aria-current=page]::before{color:#ffffff88}

/* radio: an LCD slot cut into the bar */
.hud .radio-mini{flex:0 1 270px;min-width:120px;width:auto;margin:0;padding:0 10px 0 6px;gap:8px;border:0;border-right:1px solid #000;background:#000;box-shadow:inset 0 1px 2px #000,1px 0 var(--hud-hi);color:var(--hud-text)}
html[data-theme=light] .hud .radio-mini{background:#fff;border-right-color:var(--hud-edge);box-shadow:inset 0 1px 2px #52616e44,1px 0 #fff}
.hud .radio-mini button{width:22px;height:22px;font-size:9px}
.hud .radio-mini-label{display:none}
.hud .radio-mini-song{flex:1;min-width:0;font:11px/1 AdwaitaMono,monospace}
.hud .radio-mini.is-new{animation:lcd-new 1.2s steps(1)}
@keyframes lcd-new{0%,20%,40%{background:#eef0f1;color:#050506}10%,30%,50%{background:#000;color:var(--hud-text)}}
#radio-listeners{color:#a8b7c1;font:10px Arial,sans-serif;letter-spacing:.06em}
#radio-listeners:empty{display:none}
.hud .live-state{margin:0;gap:6px;font:11px/1 AdwaitaMono,monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.hud .live-state.is-offline{display:none}

.hud-prompt{flex:1;min-width:120px;margin:0;padding:0 0 0 11px}
.hud-prompt label{flex:none;color:var(--hud-faint)}
.hud-prompt input{flex:1;min-width:0;height:100%;padding:0 6px;border:0;background:transparent;color:var(--hud-text);font:inherit;caret-color:currentColor;outline:none}
.hud-prompt input::placeholder{color:var(--hud-faint)}
.hud-prompt:focus-within{background:#000;box-shadow:inset 0 0 0 1px #c9ced2}
html[data-theme=light] .hud-prompt:focus-within{background:#fff;box-shadow:inset 0 0 0 1px #28333c}

/* people here now + total hits on rolling digits */
.hud-net[hidden]{display:none!important}
.hud-net{gap:10px}
#hud-here:empty{display:none}
#hud-here::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:currentColor;vertical-align:1px;animation:here-blink 2s steps(1) infinite}
@keyframes here-blink{50%{opacity:.25}}
.hud-odo{display:flex;gap:1px}
.hud-odo>span{display:block;width:9px;height:16px;overflow:hidden;background:#000;color:#fff;box-shadow:inset 0 0 0 1px #2b2f34}
html[data-theme=light] .hud-odo>span{background:#fff;color:#050506;box-shadow:inset 0 0 0 1px #9aa4ab}
.hud-odo i{display:block;font-style:normal;line-height:16px;text-align:center;white-space:pre;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}

.hud button.hud-cell{border-top:0;border-bottom:0;border-left:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.hud button.hud-cell:hover{background:linear-gradient(#f4f6f6,#9ba1a6);color:#050506;opacity:1}
.hud .theme-switch{width:38px;height:auto;padding:0}
.hud .theme-switch svg{inset:0;margin:auto;width:15px;height:15px}
.hud .hud-cmd{display:none}
.hud-clock{font-variant-numeric:tabular-nums}

/* page change: a hard cut with the page number stamped over it */
/* page change: an overexposed flash, then the page name jumps in out of a zoom blur
   with its colour channels split, like a cut in an edit */
.cut{position:fixed;inset:0;z-index:9000;display:grid;place-content:center;justify-items:center;gap:4px;background:var(--cut-bg);color:var(--cut-fg);pointer-events:none;animation:cut .32s steps(1) forwards}
.cut::before{content:"";position:absolute;inset:0;background:var(--cut-flash);animation:cut-flash .32s ease-out forwards}
.cut b{position:relative;font:400 13px/1 AdwaitaMono,monospace;letter-spacing:.3em}
.cut span{position:relative;font:900 clamp(60px,13vw,170px)/.9 var(--wide);letter-spacing:-.075em;-webkit-text-stroke:.055em currentColor;text-shadow:-5px 0 #ff2a2a99,5px 0 #2ad4ffaa;animation:cut-jump .32s cubic-bezier(.15,.9,.3,1) forwards}
@keyframes cut{70%{opacity:1}71%,to{opacity:0}}
@keyframes cut-flash{0%{opacity:1}30%,to{opacity:0}}
@keyframes cut-jump{0%{transform:scale(2.2);filter:blur(14px)}50%{transform:scale(1);filter:blur(0);text-shadow:-2px 0 #ff2a2a66,2px 0 #2ad4ff66}}
/* an icy halo around the 3D chrome */
/* the home scene and radio sculpture draw their own halo (js/halo.js) */

/* ---------- Console window above the status bar ---------- */
.hud-console{position:fixed;z-index:32;left:clamp(18px,3vw,48px);bottom:62px;width:min(560px,calc(100vw - 32px));background:#050506f2;color:#c9ced2}
.hud-console[hidden]{display:none}
html[data-theme=light] .hud-console{background:#fffffff2;color:#28333c}
.hud-log{max-height:min(46svh,340px);margin:0;padding:10px 12px;overflow:auto;font:12px/1.5 AdwaitaMono,monospace;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin}
.hud-log .cmd{color:var(--hud-faint)}
.hud-log a{color:inherit}
.hud-log button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Fishtank: braille dots behind glass ---------- */
.tank{position:fixed;z-index:31;right:clamp(24px,3vw,54px);bottom:62px;background:#020203}
.tank[hidden]{display:none}
html[data-theme=light] .tank{background:#fff}
.tank-screen{margin:0;padding:6px 8px 4px;color:#d9dee2;font:10px/1.1 AdwaitaMono,monospace;letter-spacing:0;white-space:pre;cursor:crosshair;touch-action:none;user-select:none;text-shadow:0 0 5px #b9d5ee55}
html[data-theme=light] .tank-screen{color:#28333c;text-shadow:none}
/* pet strip under the glass */
.tank-pet{display:flex;align-items:stretch;height:24px;border-top:1px solid var(--hud-edge);background:var(--hud-bar);color:var(--hud-text);font:10px/1 AdwaitaMono,monospace;letter-spacing:.1em;text-transform:uppercase;user-select:none}
.tank-pet>*{display:flex;align-items:center;gap:7px;padding:0 9px;border-right:1px solid #000;box-shadow:1px 0 var(--hud-hi);white-space:nowrap}
html[data-theme=light] .tank-pet>*{border-right-color:var(--hud-edge)}
.tank-pet b{font-weight:400;color:#fff}
html[data-theme=light] .tank-pet b{color:#050506}
.tank-pet i{font-style:normal;letter-spacing:0}
.tank-pet button{margin:0;border:0;border-right:1px solid #000;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.tank-pet button:first-of-type{margin-left:auto;border-left:1px solid #000}
.tank-pet button:last-child{border-right:0;box-shadow:none}
.tank-pet button:hover{background:linear-gradient(#f4f6f6,#9ba1a6);color:#050506}
.tank-pet button[aria-pressed=false]{background:#000;color:var(--hud-faint)}
html[data-theme=light] .tank-pet button[aria-pressed=false]{background:#fff}
.tank.is-dark .tank-screen{opacity:.38;text-shadow:none}
.hud [aria-pressed=true].hud-cell:not(.theme-switch){background:#000;color:#fff}
html[data-theme=light] .hud [aria-pressed=true].hud-cell:not(.theme-switch){background:#fff;color:#050506}

/* ---------- Other visitors' cursors, replayed half a minute late ---------- */
.ghosts{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none}
.ghost{position:absolute;left:-2px;top:-2px;width:13px;height:19px;background:var(--hud-text);opacity:.45;transition:transform .75s linear,opacity .8s;-webkit-mask:var(--arrow) 0 0/100% 100% no-repeat;mask:var(--arrow) 0 0/100% 100% no-repeat;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 19'%3E%3Cpath d='M1 1v15l4-4 3 6 2-1-3-6h5z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")}
.ghost.is-gone{opacity:0}

/* ---------- Guestbook drawing pad ---------- */
.pad{display:grid;gap:0;border:1px solid #697780;background:#000}
.pad canvas{display:block;width:100%;aspect-ratio:2/1;image-rendering:pixelated;cursor:crosshair;touch-action:none;background:#000}
html[data-theme=light] .pad canvas{filter:invert(1)}
.pad-tools{display:flex;border-top:1px solid #697780}
.guestbook-form .pad-tools button{flex:1;width:auto;margin:0;padding:7px 0;border:0;border-right:1px solid #697780;background:var(--hud-bar);box-shadow:none;color:var(--hud-text);font:11px/1 AdwaitaMono,monospace;letter-spacing:.14em;text-transform:uppercase}
.guestbook-form .pad-tools button:last-child{border-right:0}
.guestbook-form .pad-tools button[aria-pressed=true]{background:#eef0f1;color:#050506}
html[data-theme=light] .guestbook-form .pad-tools button[aria-pressed=true]{background:#050506;color:#fff}
.guestbook-drawing{margin:0 0 14px;color:inherit;font:12px/1.1 AdwaitaMono,monospace;letter-spacing:0;white-space:pre;overflow-x:auto}

/* ---------- Dot-art viewer ---------- */
.viewer{position:fixed;z-index:33;left:50%;top:50%;width:min(560px,calc(100vw - 32px));translate:-50% -50%;background:#020203}
.viewer[hidden]{display:none}
html[data-theme=light] .viewer{background:#fff}
.viewer-stage{height:min(520px,64svh)}
.viewer-stage canvas{display:block;cursor:grab}
.viewer .win-bar .win-btn[data-step]{font-size:13px}

/* ---------- Standalone post pages: the same bar, grid and windows ---------- */
.post-page .revision-shell{display:flex;flex-direction:column;min-height:100svh;padding-bottom:0}
.post-page .post-main{flex:1}
.post-page .site-shell{overflow:visible} /* lets the bar stick to the screen while the post scrolls */
.post-page .hud{position:sticky;bottom:10px;margin-top:0}

/* ---------- Layout: one gutter, and things fill it ----------
   The home scene and the radio sculpture take the whole panel instead of
   sitting in framed boxes. */
.panel-home .home-main{display:flex;flex-direction:column;height:100%}
.panel-home .home-object{flex:1;height:auto;min-height:0;margin:0}
.home-object .scene-frame{border:0;background:transparent;box-shadow:none}
.home-object .scene-frame::before,.home-object .scene-frame::after{content:none}
.panel-radio .radio-visual{top:0;left:0;width:100%;height:100%;transform:none;border-radius:0;filter:none}
.panel-radio .radio-visual::before{content:none}

/* ---------- Type: four voices, used the same way everywhere ----------
   meta     11px AdwaitaMono caps: dates, labels, buttons, small print
   body     21px Times, thickened and spaced out: reading text
   head     the heavy stretched Helvetica: titles and names
   display  the chrome 3D headings */
:root{--meta:400 11px/1.45 AdwaitaMono,monospace;--head:900 clamp(26px,4vw,40px)/1.05 var(--wide)}
.blog-post time,.guestbook-entry-meta,.guestbook-form label,.guestbook-credit,#guestbook-status,.one-page .radio-format,.one-page .radio-volume,.one-page .radio-history,#radio-listeners,.one-page .radio-stream-link,.one-page .radio-status #radio-message,.radio-tuning>summary{font:var(--meta);letter-spacing:.14em;text-transform:uppercase}
.guestbook-form label span{margin-left:10px;color:var(--hud-faint);font:inherit}
.guestbook-form [type=submit],.one-page .radio-controls button,.one-page .radio-player-footer button{padding:10px 18px;border:1px solid var(--hud-edge);background:var(--hud-bar);box-shadow:inset 0 1px var(--hud-hi),4px 4px 0 var(--slab);color:var(--hud-text);font:var(--meta);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.guestbook-form [type=submit]:hover,.one-page .radio-controls button:hover,.one-page .radio-player-footer button:hover{background:linear-gradient(#f4f6f6,#9ba1a6);color:#050506}
.guestbook-form [type=submit]:active,.one-page .radio-controls button:active{box-shadow:inset 0 1px 2px #000a;translate:2px 2px}
.guestbook-entry h3,.one-page .radio-status #radio-track{font:var(--head);letter-spacing:-.07em;-webkit-text-stroke:.05em currentColor;text-shadow:none}
.one-page .radio-status #radio-track{font-size:clamp(20px,2.4vw,28px);margin:0 0 8px}
.guestbook-form input,.guestbook-form textarea{font:19px/1.5 "Times New Roman",Times,serif}
/* Times is thin and narrow on screen: a hairline stroke and open tracking make it read heavier and wider */
.post-excerpt,.post-body,.guestbook-message{font:21px/1.6 "Times New Roman",Times,serif;letter-spacing:.04em;word-spacing:.1em;-webkit-text-stroke:.35px currentColor}
.post-body :is(pre,code){letter-spacing:0;-webkit-text-stroke:0}

/* ---------- Page objects that rise from behind the bar (js/bar-objects.js) ---------- */
.bar-objects{position:fixed;z-index:24;pointer-events:none;image-rendering:pixelated}
.guestbook-drawing{font-size:10px}

/* ---------- Toggles the command line can flip ---------- */
/* CRT: the 3D scenes get the full shader (js/crt-pass.js); the rest of the page
   gets what CSS can do without moving anything under the pointer: scanlines,
   a phosphor RGB grille, a rolling band, flicker, tube corners and colour fringing. */
html.crt body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;background:linear-gradient(transparent 44%,#ffffff0c 50%,transparent 56%) 0 0/100% 300%,repeating-linear-gradient(0deg,#00000066 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ff2a2a12 0 1px,#2aff6a10 1px 2px,#2a6aff14 2px 3px);animation:crt-roll 7s linear infinite,crt-flicker .1s steps(2) infinite}
html[data-theme=light].crt body::after{background:linear-gradient(transparent 44%,#0000000a 50%,transparent 56%) 0 0/100% 300%,repeating-linear-gradient(0deg,#00000017 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ff000010 0 1px,#00c0000c 1px 2px,#0040ff10 2px 3px)}
html.crt::before{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;border-radius:2.5%/3.5%;box-shadow:0 0 0 40px #000,inset 0 0 110px 26px #000b,inset 0 0 8px 2px #000}
html[data-theme=light].crt::before{box-shadow:0 0 0 40px #000,inset 0 0 110px 20px #0004,inset 0 0 8px 2px #000}
html.crt body{text-shadow:-.6px 0 #ff2a2a66,.6px 0 #2ad4ff66}
html.crt .site-shell{animation:crt-on .55s cubic-bezier(.2,.8,.3,1)}
@keyframes crt-roll{to{background-position:0 300%,0 0,0 0}}
@keyframes crt-flicker{50%{opacity:.9}}
@keyframes crt-on{0%{transform:scale(1,.003);filter:brightness(6)}35%{transform:scale(1,.003);filter:brightness(4)}70%{transform:scale(1,1.02);filter:brightness(1.4)}}
html.no-grain .grain-field{display:none}
/* set by js/frame-budget.js when the 3D can't keep up: drop the blurred glows first */
html.lite .chrome-heading{filter:none}
html.lite .grain-field::after{animation:none}
html.wire *{outline:1px solid #ffffff38!important;outline-offset:-1px}
html[data-theme=light].wire *{outline-color:#0000002e!important}

@media(max-width:1439px){.hud-clock{display:none}}
@media(max-width:1180px){.hud .hud-prompt label{display:none}.hud .site-nav a{padding:0 12px 2px 10px;font-size:16px}}
@media(max-width:960px){.hud .site-nav a{padding:0 9px 2px 8px;font-size:15px}.hud .site-nav a::before{display:none}.hud .radio-mini{flex-basis:200px}}
@media(max-width:760px){
  .one-page .revision-shell{padding-top:10px}
  /* two rows, one box: pages + theme, then radio + tools */
  .hud{order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;grid-template-areas:"nav nav nav nav theme" "radio net live cmd tank";height:auto;margin:0 5px 13px 0}
  .hud .site-nav{grid-area:nav;border-bottom:1px solid #000}
  .hud .site-nav a{flex:1 1 auto;justify-content:center;height:38px;padding:0 4px 2px;font-size:16px}
  .hud .theme-switch{grid-area:theme;height:39px;border-right:0;border-bottom:1px solid #000;box-shadow:none}
  .hud .radio-mini{grid-area:radio;height:36px;min-width:0}
  .hud .radio-mini button{width:26px;height:26px}
  .hud .hud-net{grid-area:net;padding:0 8px}
  .hud .hud-net .hud-odo{display:none}
  .hud .live-state{grid-area:live;padding:0 9px}
  .hud .hud-cmd{grid-area:cmd;display:flex;justify-content:center;min-width:40px}
  .hud .hud-tank{grid-area:tank;justify-content:center;border-right:0;box-shadow:none}
  .hud .hud-clock,.hud .hud-prompt{display:none}
  html[data-theme=light] .hud .site-nav,html[data-theme=light] .hud .theme-switch{border-bottom-color:var(--hud-edge)}
  /* on phones the command line lives in the console window */
  .hud-console .hud-prompt{display:flex;align-items:center;height:42px;color:var(--hud-text);font:11px/1 AdwaitaMono,monospace;letter-spacing:.06em;border-top:1px solid var(--hud-edge);border-right:0;box-shadow:none}
  .hud-prompt input{font-size:16px} /* stops iOS zooming on focus */
  .hud-console,.tank{top:100px;bottom:auto}
  .hud-console{left:16px}
  .tank{left:16px;right:16px}
  .tank-screen{padding:5px 4px 3px;font-size:calc((100vw - 42px) / 57.6)}
  .tank-pet{flex-wrap:wrap;height:auto}
  .tank-pet>*{flex:auto;height:28px}
  .tank-pet button{flex:1 0 30%;justify-content:center;border-top:1px solid #000}
  .tank-pet button:first-of-type{margin-left:0;border-left:0}
  .post-page .hud{top:10px;bottom:auto}
}
@media(prefers-reduced-motion:reduce){
  .splash-logo,#splash-enter,html.crt body::after,html.crt .site-shell{animation:none}
  .splash.is-leaving,.splash.is-leaving .splash-box{animation-duration:.01s}
}