/* Self-hosted Google Fonts (OFL), latin + latin-ext only. A file is only downloaded once a glyph needs it,
   so the game-skin fonts cost nothing until a skin is picked. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cinzel-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cinzel-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/cinzel-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/cinzel-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/jetbrains-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/jetbrains-mono-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/jetbrains-mono-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/rajdhani-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/rajdhani-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/rajdhani-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/rajdhani-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/rajdhani-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/rajdhani-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --accent { syntax: '<color>'; inherits: true; initial-value: #d4f25a; }

/* Breach-protocol palette: hacking lime on blue-black, periwinkle selection, HUD cyan + red */
:root, :root[data-theme="dark"] {
  --bg: #0b0c11; --bg-2: #11131b; --bg-3: #181b26; --line: #262b38;
  --ink: #e4ebd2; --mute: #8a9278;
  --lime: #d4f25a; --cyan: #5ef1ff; --red: #ff5a52; --yellow: #fcee0a;
  --blue: #6f7cf0; --pink: #ff3ea5; --orange: #ff9a3c;
  --ok: #3ee07f; --warn: #fcee0a;   /* health-check status: true green, not the lime accent */
  --on-accent: #0b0c11;
  --glow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eceee2; --bg-2: #f7f8f0; --bg-3: #e0e4d2; --line: #c9cfb6;
  --ink: #12150a; --mute: #5c6448;
  --lime: #557400; --cyan: #007a8a; --red: #c42f29; --yellow: #806c00;
  --blue: #3c48b8; --pink: #b3166a; --orange: #b35a00;
  --ok: #17803f; --warn: #a36f00;
  --on-accent: #f7f8f0;
  --glow: none;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 "JetBrains Mono", ui-monospace, Menlo, monospace;
  padding-bottom: 46px; overflow-x: hidden;
  transition: --accent .9s ease, background-color .4s, color .4s;
}
body[data-world="boot"]     { --accent: var(--lime); }
body[data-world="fleet"]    { --accent: var(--cyan); }
body[data-world="log"]      { --accent: var(--yellow); }
body[data-world="projects"] { --accent: var(--cyan); }
body[data-world="play"]     { --accent: var(--red); }
body[data-world="shell"]    { --accent: var(--lime); }
body[data-world="notes"]    { --accent: var(--blue); }
body[data-world="you"]      { --accent: var(--pink); }
body[data-world="bots"]     { --accent: var(--orange); }

a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
kbd { font: 600 .72rem/1 "Rajdhani", sans-serif; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid currentColor; border-radius: 2px; }
.ui { font-family: "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .04em; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.scan { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }
:root[data-theme="light"] .scan { opacity: .25; }
main { position: relative; z-index: 2; }

section { padding: clamp(56px, 9vh, 110px) 16px clamp(40px, 6vh, 80px); display: flex; align-items: center; }
#boot-sec { min-height: 100vh; }   /* only the opening screen fills the window; the rest take their natural height */
.inner { width: min(1060px, 100%); margin: 0 auto; }

/* section HUD header — like "BREACH TIME REMAINING [30.00]" */
.sec-hud { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.sec-hud .t { font: 700 clamp(1rem, 2vw, 1.25rem)/1 "Rajdhani", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sec-hud .box { font: 600 1.15rem/1 "Rajdhani", sans-serif; color: var(--accent); border: 1px solid var(--accent); padding: 5px 12px; min-width: 76px; text-align: center; }
.sec-bar { height: 4px; background: color-mix(in srgb, var(--accent) 15%, transparent); margin-bottom: 26px; }
.sec-bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: var(--glow); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.out.on .sec-bar i, .sec-bar.on i { width: 100%; }
.fine { font: 600 .72rem/1.4 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--accent) 30%, var(--mute)); }   /* ≥ 5:1 in every theme and accent */

.prompt { margin: 0 0 1rem; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps1 { color: var(--lime); }
.ps1 b { color: var(--red); font-weight: 400; }
.ps1 i { color: var(--cyan); font-style: normal; }
.caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.js .out > * { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i, 0) * 90ms); }
.out.on > * { opacity: 1; transform: none; }

h2 { font: 700 clamp(2rem, 5vw, 3.4rem)/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .5rem; }
h2 .hl { color: var(--accent); text-shadow: var(--glow); display: inline-block; animation: glitch 6s steps(1) infinite; }
@keyframes glitch {
  0%, 93%, 100% { transform: none; text-shadow: var(--glow); clip-path: none; }
  94% { transform: translateX(-3px); text-shadow: 3px 0 var(--red), -3px 0 var(--cyan); clip-path: inset(10% 0 45% 0); }
  95% { transform: translateX(3px); text-shadow: -3px 0 var(--red), 3px 0 var(--cyan); clip-path: inset(55% 0 5% 0); }
  96% { transform: none; text-shadow: 2px 0 var(--cyan); clip-path: none; }
}
.sub { color: var(--mute); margin: 0 0 2rem; max-width: 62ch; }
.c-mute { color: var(--mute); } .c-lime { color: var(--lime); } .c-pink { color: var(--pink); }
.c-cyan { color: var(--cyan); } .c-yellow { color: var(--yellow); } .c-red { color: var(--red); }

/* panels — cut corners, solid header bar like CODE MATRIX */
.win { --cut: 14px; position: relative; background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent); backdrop-filter: blur(6px); }
.win::after { content: ""; position: absolute; right: 0; top: 0; width: calc(var(--cut) * 1.42); height: 1px; background: color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent);
  transform-origin: right top; transform: rotate(45deg) translateX(0); }
.win-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--wc, var(--accent)); color: var(--on-accent);
  font: 700 .95rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; transition: background-color .9s; }
.win-bar .ico { width: 18px; height: 14px; flex: none; background:
  linear-gradient(135deg, currentColor 0 30%, transparent 30% 45%, currentColor 45% 75%, transparent 75%) 0 0 / 50% 100% no-repeat,
  linear-gradient(45deg, currentColor 0 30%, transparent 30% 45%, currentColor 45% 75%, transparent 75%) 100% 0 / 50% 100% no-repeat; }
.win-bar .r { margin-left: auto; font-size: .78rem; opacity: .75; }
.win-body { padding: 16px 18px; }

/* ---------- boot breach overlay ---------- */
html:not(.js) #boot { display: none; }
.js section:not([data-typed]) .cmd { visibility: hidden; }
#boot { position: fixed; inset: 0; z-index: 50; background: #0b0c11; display: grid; place-items: center; padding: 16px; transition: opacity .6s; --accent: #d4f25a; }
#boot.gone { opacity: 0; pointer-events: none; }
#boot .skip { position: absolute; right: 16px; bottom: 14px; color: #8a9278; font: 600 .8rem "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#boot .granted { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(2rem, 7vw, 5rem)/1 "Rajdhani", sans-serif; color: #d4f25a;
  letter-spacing: .08em; text-shadow: 0 0 30px rgba(212,242,90,.6); opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; background: rgba(11,12,17,.75); }
#boot .granted small { display: block; font-size: .3em; letter-spacing: .3em; color: #5ef1ff; margin-top: 10px; }
#boot.ok .granted { opacity: 1; }
#boot .br { width: min(860px, 100%); }

/* ---------- breach protocol component ---------- */
.br { font-family: "Rajdhani", sans-serif; text-transform: uppercase; color: var(--lime); --accent: var(--lime); }
.br-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.br-top .t { font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing: .04em; }
.br-time { font-weight: 600; font-size: 1.3rem; border: 1px solid currentColor; padding: 4px 14px; min-width: 92px; text-align: center; }
.br-bar { height: 5px; margin: 8px 0 18px; background: color-mix(in srgb, var(--lime) 15%, transparent); }
.br-bar i { display: block; height: 100%; width: 100%; background: var(--lime); box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 60%, transparent); }
.br-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
.br-grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 6px 10px; }
.cell { font: 600 clamp(1.1rem, 2.4vw, 1.55rem)/1 "Rajdhani", sans-serif; color: var(--lime); background: none; border: 0; height: 52px; position: relative; cursor: pointer; padding: 0; }
.cell.line { background: color-mix(in srgb, var(--blue) 40%, transparent); }
.cell:disabled { cursor: default; }
.cell:not(:disabled):hover::before, .cell.pick::before { content: ""; position: absolute; inset: 6px 10%; border: 2px solid var(--lime); box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 50%, transparent); }
.cell.used { color: transparent; }
.cell.used::after { content: ""; position: absolute; inset: 14px 30%; border: 1px dashed color-mix(in srgb, var(--lime) 60%, transparent); }
.br-side { display: grid; gap: 14px; }
.br-label { font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; letter-spacing: .04em; }
.br-buf { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; border: 1px solid color-mix(in srgb, var(--lime) 50%, transparent); }
.br-buf span { width: 40px; height: 36px; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--lime) 55%, transparent); font-weight: 600; font-size: 1.1rem; }
.br-buf span.f { border-style: solid; color: var(--lime); }
.seq { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 8px 12px; }
.seq + .seq { border-top: 1px solid color-mix(in srgb, var(--lime) 18%, transparent); }
.seq .vals { display: flex; gap: 10px; font-weight: 600; font-size: 1.2rem; }
.seq .vals span { color: var(--ink); opacity: .75; }
.seq .vals span.hit { color: var(--lime); opacity: 1; text-shadow: 0 0 8px color-mix(in srgb, var(--lime) 60%, transparent); }
.seq .nm { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .08em; color: var(--mute); }
.seq.ok { background: color-mix(in srgb, var(--lime) 16%, transparent); }
.seq.ok .nm { color: var(--lime); }
.seq.fail { background: color-mix(in srgb, var(--red) 14%, transparent); }
.seq.fail .nm, .seq.fail .vals span { color: var(--red); opacity: 1; }
.br-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.br-status { font-weight: 700; letter-spacing: .06em; }
.br-reset { font: 700 .9rem "Rajdhani", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: none; color: var(--lime);
  border: 1px solid var(--lime); padding: 6px 14px; cursor: pointer; }
.br-reset:hover { background: var(--lime); color: var(--on-accent); }
#boot .br-foot { display: none; }

/* ---------- hero ---------- */
/* hero brand row: ASCII banner + glitching EU stars */
.brand { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.eu-logo { width: clamp(46px, 8vw, 98px); flex: none; overflow: visible; color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); animation: euGlitch 7s steps(1) infinite; }
.eu-logo .ring { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; }
.eu-logo .stars { fill: currentColor; transform-origin: 50px 50px; animation: euSpin 60s linear infinite; }
.eu-logo text { font: 700 32px "Rajdhani", sans-serif; fill: none; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; }   /* outlined, same colour as the stars */
@keyframes euSpin { to { transform: rotate(360deg); } }
@keyframes euGlitch {
  0%, 100% { opacity: 1; transform: none; }
  62% { opacity: 0; } 63% { opacity: 1; transform: translateX(3px) skewX(-10deg); filter: drop-shadow(-3px 0 var(--red)) drop-shadow(3px 0 var(--cyan)); }
  64% { opacity: .25; transform: translateX(-2px); } 65% { opacity: 1; transform: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
  86% { opacity: 0; } 90% { opacity: 0; } 91% { opacity: 1; transform: translate(-3px, 1px); filter: drop-shadow(3px 0 var(--red)) drop-shadow(-3px 0 var(--cyan)); }
  92% { transform: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
}
.banner { margin: 0; font-size: min(15px, calc((100vw - 40px - clamp(56px, 10vw, 120px)) / 32.5)); line-height: 1.05; color: var(--accent); text-shadow: var(--glow); white-space: pre; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
.pframe { padding: 8px; --c: var(--accent); background:
  linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
  linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
  linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
  linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.portrait { position: relative; width: 220px; aspect-ratio: 1; overflow: hidden; background: #11131b url(../img/portrait-poster-480.jpg) center / cover no-repeat; }
.portrait video { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .6s; }
.js .portrait video { opacity: 0; }   /* JS fades it in once it is actually playing */
.portrait video.ok { opacity: 1; }
.portrait::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.14) 2px 3px); }
  background: rgba(11,12,17,.65); color: #ff5a52; display: flex; align-items: center; gap: 5px; }
.portrait .tag { position: absolute; right: 8px; bottom: 7px; z-index: 2; font: 700 .72rem/1 "Rajdhani", sans-serif; letter-spacing: .08em; padding: 3px 6px; background: rgba(11,12,17,.65); color: #5ef1ff; }
.neo { margin: 0; font-size: .88rem; line-height: 1.7; }
.neo .k { color: var(--accent); font-weight: 600; }
.swatches { display: flex; margin-top: 10px; }
.swatches i { width: 26px; height: 14px; }
.scanout { display: none; }   /* phones only, see the 760px block */
.so-h { margin: 0 0 8px; padding-bottom: 5px; color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); letter-spacing: .1em; }
.so-h b { animation: blink 1.6s steps(1) infinite; }
.scanout dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin: 0; align-items: center; }
.scanout dt { color: var(--mute); }
.scanout dd { margin: 0; text-align: right; color: var(--ink); white-space: nowrap; }
.scanout .ram { margin-left: 0; vertical-align: 0; --gres: var(--accent); }
.scanout .ram i { width: 5px; height: 11px; }
.lede { margin: 40px 0 0; padding: 18px 0 18px 22px; border-left: 3px solid var(--accent); position: relative; }
.lede::before { content: "// mission"; position: absolute; left: 22px; top: -6px; font: 700 .7rem/1 "Rajdhani", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.lede .l1 { display: block; font: 700 clamp(1.5rem, 3.4vw, 2.5rem)/1.12 "Rajdhani", sans-serif; letter-spacing: .005em; max-width: 26em; }
.lede .l2 { display: block; margin-top: 12px; font-size: clamp(.95rem, 1.4vw, 1.08rem); color: var(--mute); max-width: 80ch; }
.lede em { font-style: normal; color: var(--accent); }
.scroll-hint { margin-top: 30px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
/* keyboard hints mean nothing on a touch-only device */
@media (hover: none) and (pointer: coarse) { .kbd-only, #theme-btn kbd { display: none; } }

/* ---------- fleet ---------- */
#fleet .inner { width: min(1260px, 100%); }
.fleet-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.fleet-grid .win { display: flex; flex-direction: column; }
.fleet-grid .win-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hosts-wrap { position: relative; }
#hosts { display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); gap: 2px; }
#hosts i { aspect-ratio: 1; background: color-mix(in srgb, var(--lime) 42%, transparent); transition: background .4s, box-shadow .4s; }
#hosts i.warn { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
#hosts i.crit { background: var(--red); box-shadow: 0 0 10px var(--red); }
#hosts i.fix  { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.flag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 6px; white-space: nowrap; pointer-events: none;
  font: 700 .78rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; padding: 4px 7px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--fc); border: 1px solid var(--fc); box-shadow: 0 0 14px -4px var(--fc);
  transform: translateY(-50%); transition: opacity .5s, color .3s, border-color .3s; }
.flag::before { content: ""; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--fc); }
.flag.r::before { right: 100%; } .flag.l { transform: translate(-100%, -50%); } .flag.l::before { left: 100%; }
.flag b { background: var(--fc); color: var(--bg); padding: 1px 4px; font-weight: 700; }
.flag span { color: var(--mute); font-weight: 600; }
.flag.warn { --fc: var(--yellow); } .flag.crit { --fc: var(--red); } .flag.fix { --fc: var(--cyan); }
.flag.bye { opacity: 0; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; font: 600 .8rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.legend .ok { background: color-mix(in srgb, var(--lime) 42%, transparent); } .legend .warn { background: var(--yellow); } .legend .crit { background: var(--red); } .legend .fix { background: var(--cyan); }
.legend .cnt { margin-left: auto; color: var(--accent); }
.fleet-grid .jr-body { position: relative; min-height: 260px; }
#journal { position: absolute; inset: 14px 18px; overflow: hidden; font-size: .76rem; line-height: 1.7; display: flex; flex-direction: column; justify-content: flex-end;
  mask-image: linear-gradient(to bottom, transparent, #000 22%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); }
#journal div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.fine-row { display: flex; justify-content: space-between; gap: 18px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- stack ---------- */
/* installed packages, inside the career section */
.stk { margin-top: 18px; --wc: var(--lime); }
.stk-sub { margin: 0 0 16px; color: var(--mute); font-size: .86rem; }
.stk-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.stk-g { min-width: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--wc); }
.stk-g ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.stk-g li { white-space: nowrap; font: 700 .8rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; padding: 4px 7px;
  color: var(--wc); border: 1px solid color-mix(in srgb, var(--wc) 55%, transparent); background: color-mix(in srgb, var(--wc) 8%, transparent); transition: background .2s, color .2s; }
.stk-g li:hover { background: var(--wc); color: var(--on-accent); }
.tip { margin-top: 16px; --wc: var(--yellow); }
.tip .win-body { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.tip-k { color: var(--yellow); font-size: .78rem; grid-column: 1 / -1; }
.tip p { margin: 0; font-size: .92rem; min-height: 1.6em; }
.btn { font: 700 .82rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .08em; background: none; color: var(--wc, var(--accent));
  border: 1px solid currentColor; padding: 6px 11px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.btn:hover { background: var(--wc, var(--accent)); color: var(--on-accent); }

/* ---------- career: timeline + mission journal ---------- */
#log .inner { width: min(1160px, 100%); }
.tl .win-body { padding: 22px 22px 12px; }
.tl-track { position: relative; height: 54px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px calc(100% / 12)); }
.seg { position: absolute; top: 8px; height: 38px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: pointer;
  display: flex; align-items: center; padding: 0 10px; overflow: hidden; font: 700 .9rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--accent);
  transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.seg:hover, .seg.sel { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 18px -4px var(--accent); }
.seg.active { border-right: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.seg.active.sel, .seg.active:hover { background: var(--accent); }
.seg.factory { border-style: dashed; }
/* Jan–Apr 2025: the respawn gap */
.seg.gap { border: 1px dashed var(--red); color: transparent; padding: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 45%, transparent) 0 4px, transparent 4px 8px); }
.seg.gap:hover, .seg.gap.sel { background: var(--red); box-shadow: 0 0 18px -2px var(--red); }
.gap-tag { position: absolute; top: -17px; transform: translateX(-50%); font: 700 .7rem/1 "Rajdhani", sans-serif; color: var(--red); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.missions .st.gap { color: var(--red); }
.you-died { font: 500 clamp(2rem, 5vw, 3.2rem)/1 "Cinzel", serif; color: #c0392b; text-transform: uppercase; letter-spacing: .14em; text-align: center;
  padding: 20px 0 16px; margin: -4px 0 18px; text-shadow: 0 0 24px rgba(192,57,43,.55);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 20%, rgba(0,0,0,.55) 80%, transparent); }
:root[data-theme="light"] .you-died { background: linear-gradient(90deg, transparent, rgba(42,10,20,.08) 20%, rgba(42,10,20,.08) 80%, transparent); }
.you-died small { display: block; margin-top: 10px; font: italic 400 1rem/1 "EB Garamond", serif; letter-spacing: .02em; text-transform: none; color: var(--mute); text-shadow: none; }
.mission.died.anim .you-died { animation: died 1.6s ease both; }
@keyframes died { 0% { opacity: 0; letter-spacing: .3em; } 60% { opacity: 1; } 100% { letter-spacing: .14em; } }
.now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); }
.now::after { content: "NOW"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 700 .7rem/1 "Rajdhani", sans-serif; color: var(--red); letter-spacing: .1em; }
.tl-years { position: relative; height: 22px; margin-top: 6px; font: 600 .78rem/1 "Rajdhani", sans-serif; color: var(--mute); }
.tl-years span { position: absolute; transform: translateX(-50%); }
.journal { display: grid; grid-template-columns: 380px 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.missions li { padding: 10px 14px; cursor: pointer; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; transition: border-color .2s, transform .2s, box-shadow .2s; outline: none; }
.missions li:hover, .missions li:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.missions li.sel { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 18px -8px var(--accent); transform: translateX(4px); }
.missions b { font: 700 1.12rem/1.1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.missions .st { font: 700 .66rem/1 "Rajdhani", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border: 1px solid currentColor; align-self: start; color: var(--mute); }
.missions .st.on { color: var(--lime); box-shadow: 0 0 10px -3px var(--lime); }
.missions .st.side { color: var(--cyan); }
.missions .meta { grid-column: 1 / -1; font-size: .76rem; color: var(--mute); }
.missions .meta .sha { color: var(--yellow); }
.md .win-body { padding: 20px 22px; }
.md .org { font: 700 .82rem/1 "Rajdhani", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.md h3 { margin: 6px 0 4px; font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.05 "Rajdhani", sans-serif; text-transform: uppercase; }
.md .when { color: var(--mute); font-size: .82rem; }
.md h4 { margin: 18px 0 8px; font: 700 .85rem/1 "Rajdhani", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.md ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .88rem; }
.md ul li { display: grid; grid-template-columns: 20px 1fr; }
.md ul li::before { content: "✓"; color: var(--lime); }
.md ul li.on::before { content: "◆"; color: var(--accent); animation: blink 1.6s steps(1) infinite; }
.md .loot { display: flex; flex-wrap: wrap; gap: 6px; }
.md .loot span { font: 700 .78rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.md blockquote { margin: 18px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); font-size: .88rem; }
.md .anim { animation: mdIn .35s ease; }
@keyframes mdIn { from { opacity: 0; transform: translateX(10px); } }

/* ---------- projects ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.projects > .proj:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last card takes the full row */
.proj { display: flex; flex-direction: column; transition: transform .3s; }
.proj:hover { transform: translateY(-4px); }
.proj .win-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.proj h3 { margin: 0; font: 700 1.5rem/1 "Rajdhani", sans-serif; text-transform: uppercase; }
.proj p { margin: 0; color: var(--mute); font-size: .86rem; }
.live { height: 124px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.live canvas { width: 100%; height: 100%; display: block; }
.readout { position: absolute; left: 10px; top: 8px; font: 600 .78rem/1.25 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.readout b { font-size: 1.5rem; color: var(--accent); display: block; text-shadow: var(--glow); }
.links { margin-top: auto; font-size: .85rem; display: flex; gap: 16px; flex-wrap: wrap; }
.tagbox { font: 700 .66rem/1 "Rajdhani", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border: 1px solid currentColor; vertical-align: 3px; margin-left: 8px; }
.ptt { position: absolute; right: 10px; bottom: 10px; font: 700 .78rem/1 "Rajdhani", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line); padding: 7px 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ptt.tx { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- gaming profile: one section, three skins ---------- */
.gp { --gt: "Rajdhani", sans-serif; --gb: "JetBrains Mono", monospace; color: var(--gink); }
.gp[data-game="cp"] { --gacc: var(--cyan); --gacc2: var(--yellow); --glock: var(--red); --gres: var(--cyan); --gbg: var(--bg-2); --gline: var(--line); --gink: var(--ink); --gmute: var(--mute); }
.gp[data-game="dota"] { --gacc: #e7b24a; --gacc2: #92a525; --glock: #d5452f; --gres: #3d8fd8; --gbg: #1c2026; --gline: #3b424c; --gink: #e8e6e3; --gmute: #8b929b; --gt: "Barlow Condensed", sans-serif; }
.gp[data-game="elden"] { --gacc: #d4b872; --gacc2: #c8a04a; --glock: #b04a3e; --gres: #5a7fd0; --gbg: #13110d; --gline: #4a4130; --gink: #e2d8bf; --gmute: #9a8f74; --gt: "Cinzel", serif; --gb: "EB Garamond", serif; }
:root[data-theme="light"] .gp[data-game="dota"] { --gacc: #9a6b0e; --gacc2: #5b6e0e; --glock: #a5301f; --gres: #1f6db5; --gbg: #f3f1ec; --gline: #cfc8bb; --gink: #1b1e22; --gmute: #6b6f75; }
:root[data-theme="light"] .gp[data-game="elden"] { --gacc: #8a6a1f; --gacc2: #7d5f17; --glock: #9a3a30; --gres: #2f55a8; --gbg: #f6f1e6; --gline: #d6c9a8; --gink: #2a2314; --gmute: #786c52; }
body[data-world="play"][data-game="dota"] { --accent: #e7b24a; }
body[data-world="play"][data-game="elden"] { --accent: #d4b872; }
:root[data-theme="light"] body[data-world="play"][data-game="dota"] { --accent: #9a6b0e; }
:root[data-theme="light"] body[data-world="play"][data-game="elden"] { --accent: #8a6a1f; }
.gp-top { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.gp-top h2 { margin: 0; font-family: var(--gt); }
.games { display: flex; gap: 8px; flex-wrap: wrap; }
.games button { font: 700 .95rem/1 var(--gt); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; cursor: pointer; color: var(--gmute);
  background: color-mix(in srgb, var(--gbg) 85%, transparent); border: 1px solid var(--gline); transition: all .25s; }
.games button:hover { color: var(--gink); border-color: var(--gacc); }
.games button[aria-selected="true"] { color: var(--gbg); background: var(--gacc); border-color: var(--gacc); box-shadow: 0 0 20px -6px var(--gacc); }
.gp[data-game="cp"] .games button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.gp[data-game="dota"] .games button { border-radius: 2px; background: linear-gradient(#2f353d, #1e2228); }
.gp[data-game="dota"] .games button[aria-selected="true"] { background: linear-gradient(#f2c868, #b9832a); color: #1b1e22; }
.gp[data-game="elden"] .games button { background: none; border-width: 0 0 1px; letter-spacing: .12em; }
.gp[data-game="elden"] .games button[aria-selected="true"] { background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--gacc) 35%, transparent), transparent 70%); color: var(--gacc); box-shadow: none; }
:root[data-theme="light"] .gp[data-game="dota"] .games button { background: linear-gradient(#fbfaf7, #e9e5dc); }
:root[data-theme="light"] .gp[data-game="dota"] .games button[aria-selected="true"] { background: linear-gradient(#e7b24a, #b9832a); color: #1b1e22; }
.hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-bottom: 18px; font: 600 1.02rem/1.2 var(--gt); text-transform: uppercase; letter-spacing: .05em; color: var(--gmute); }
.hud-row b { color: var(--gink); font-weight: 700; }
.hud-row .h { color: var(--glock); }
.gp[data-game="elden"] .hud-row { text-transform: none; letter-spacing: .04em; font-size: .98rem; }
.ram { display: inline-flex; gap: 2px; vertical-align: -3px; margin-left: 8px; }
.ram i { width: 6px; height: 16px; background: color-mix(in srgb, var(--gres, var(--cyan)) 25%, transparent); }
.ram i.on { background: var(--gres, var(--cyan)); box-shadow: 0 0 6px color-mix(in srgb, var(--gres, var(--cyan)) 60%, transparent); }
.gp[data-game="dota"] .ram, .gp[data-game="elden"] .ram { gap: 0; }
.gp[data-game="dota"] .ram i, .gp[data-game="elden"] .ram i { width: 9px; height: 10px; }
.qh-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.qh-title { font: 700 1.05rem/1 var(--gt); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; color: var(--gink); }
.qh { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.qh li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 6px 10px; cursor: pointer; outline: none;
  background: color-mix(in srgb, var(--gacc) 7%, var(--gbg)); border: 1px solid color-mix(in srgb, var(--gacc) 32%, transparent);
  font-family: var(--gt); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.qh li b { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.1; color: var(--gacc); }
.qh li .tags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.qh li .tags span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--gacc) 70%, transparent); color: var(--gacc); text-transform: uppercase; }
.qh li .tags span.y { color: var(--gacc2); border-color: var(--gacc2); }
.qh li .cost { font-weight: 700; font-size: 1.3rem; color: var(--gacc); white-space: nowrap; }
.qh li .cost small { font-size: .7rem; letter-spacing: .08em; margin-right: 4px; color: var(--gmute); }
.qh li .gi { width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.05rem; color: var(--gacc); }
.qh li.sel, .qh li:hover, .qh li:focus-visible { border-color: var(--gacc); box-shadow: 0 0 0 1px var(--gacc), 0 0 18px -4px var(--gacc); }
.qh li.locked { --gacc: var(--glock); --gacc2: var(--glock); }
.qh li.got { animation: pop .5s; }
@keyframes pop { 30% { box-shadow: 0 0 0 2px var(--lime), 0 0 26px var(--lime); } }
/* cyberpunk: staggered quickhack rows, icon on the right */
.gp[data-game="cp"] .qh li { margin-left: calc(var(--off, 0) * 1px); text-transform: uppercase; grid-template-columns: 1fr auto auto; }
.gp[data-game="cp"] .qh li .gi { order: 3; border-left: 1px solid color-mix(in srgb, var(--gacc) 40%, transparent); }
.gp[data-game="cp"] .qh li.sel, .gp[data-game="cp"] .qh li:hover { transform: translateX(4px); }
.gp[data-game="cp"] .qh li.locked { background: color-mix(in srgb, var(--glock) 18%, var(--gbg)); }
/* dota: ability tiles, gradient bars, mana squares */
.gp[data-game="dota"] .qh { gap: 6px; }
.gp[data-game="dota"] .qh li { text-transform: uppercase; border-radius: 2px; border-color: var(--gline); background: linear-gradient(90deg, color-mix(in srgb, var(--gbg) 70%, #3a414b), var(--gbg)); padding: 5px 12px 5px 5px; }
:root[data-theme="light"] .gp[data-game="dota"] .qh li { background: linear-gradient(90deg, #fffdf8, var(--gbg)); }
.gp[data-game="dota"] .qh li b { color: var(--gink); letter-spacing: .03em; }
.gp[data-game="dota"] .qh li .gi { width: 44px; height: 44px; border: 1px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gacc) 50%, transparent);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gacc) 70%, #fff), color-mix(in srgb, var(--gacc) 40%, #000) 70%); color: #111; font-size: 1.2rem; }
.gp[data-game="dota"] .qh li .tags span { border: 0; padding: 0; color: var(--gacc2); }
.gp[data-game="dota"] .qh li .tags span.y { color: var(--gmute); }
.gp[data-game="dota"] .qh li .cost { color: var(--gink); display: flex; align-items: center; gap: 6px; }
.gp[data-game="dota"] .qh li .cost::before { content: ""; width: 12px; height: 12px; background: linear-gradient(135deg, #7cc1ff, var(--gres)); border: 1px solid #0a2a4a; }
.gp[data-game="dota"] .qh li .cost small { display: none; }
.gp[data-game="dota"] .qh li.sel, .gp[data-game="dota"] .qh li:hover { box-shadow: inset 0 0 0 1px var(--gacc), 0 0 14px -4px var(--gacc); }
.gp[data-game="dota"] .qh li.locked .gi { filter: grayscale(1) brightness(.6); }
.gp[data-game="dota"] .qh li.locked b { color: var(--glock); }
/* elden ring: quiet inventory list, gold hairlines, serif */
.gp[data-game="elden"] .qh { gap: 0; }
.gp[data-game="elden"] .qh li { background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gacc) 22%, transparent); padding: 9px 12px; }
.gp[data-game="elden"] .qh li b { color: var(--gink); font-weight: 500; font-size: 1.02rem; letter-spacing: .04em; }
.gp[data-game="elden"] .qh li .gi { width: 32px; height: 32px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gacc) 60%, transparent); font-size: .9rem; }
.gp[data-game="elden"] .qh li .tags span { border: 0; padding: 0; font: italic 400 .95rem/1 "EB Garamond", serif; letter-spacing: 0; text-transform: none; color: var(--gmute); }
.gp[data-game="elden"] .qh li .tags span:first-child { display: none; }
.gp[data-game="elden"] .qh li .cost { font: 500 1rem/1 "Cinzel", serif; color: var(--gres); }
.gp[data-game="elden"] .qh li .cost small { color: var(--gres); opacity: .8; }
.gp[data-game="elden"] .qh li.sel, .gp[data-game="elden"] .qh li:hover { box-shadow: none; background: linear-gradient(90deg, color-mix(in srgb, var(--gacc) 26%, transparent), transparent 85%); }
.gp[data-game="elden"] .qh li.locked b { color: var(--glock); }
/* detail panel */
.qd { position: sticky; top: 20px; background: color-mix(in srgb, var(--gbg) 92%, transparent); border: 1px solid color-mix(in srgb, var(--gacc) 50%, transparent); }
.qd .tabs { display: flex; font: 700 .9rem/1 var(--gt); text-transform: uppercase; letter-spacing: .06em; }
.qd .tabs span { padding: 10px 14px; color: var(--gmute); border-bottom: 1px solid var(--gline); flex: 1; }
.qd .tabs span.on { color: var(--gacc); border: 1px solid var(--gacc); border-bottom: 0; }
.qd-body { padding: 18px; font-family: var(--gb); }
.qd .big { font: 700 2.4rem/1 var(--gt); color: var(--gink); }
.qd .big small { font-size: .78rem; letter-spacing: .06em; margin-left: 6px; color: var(--gmute); text-transform: uppercase; }
.qd .kind { display: inline-block; font: 700 .7rem/1 var(--gt); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--gink); padding: 3px 6px; margin: 8px 0 10px; }
.qd ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.qd ul li { margin: 6px 0; }
.qd ul li em { color: var(--gacc2); font-style: normal; }
.gp[data-game="cp"] .qd { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.gp[data-game="dota"] .qd { border-color: var(--gline); border-radius: 3px; box-shadow: 0 10px 30px -10px #000; }
.gp[data-game="dota"] .qd .tabs span { border: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--gacc) 30%, var(--gbg)), var(--gbg)); color: var(--gink); font-size: 1.15rem; }
.gp[data-game="dota"] .qd .tabs span + span { display: none; }
.gp[data-game="dota"] .qd .mana { display: flex; gap: 16px; font: 600 .95rem/1 var(--gt); text-transform: uppercase; color: var(--gmute); margin-bottom: 12px; }
.gp[data-game="dota"] .qd .mana b { color: var(--gres); }
.gp[data-game="dota"] .qd .lore { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--gline); color: var(--gmute); font-style: italic; font-size: .82rem; }
.gp[data-game="elden"] .qd { border: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gacc) 14%, transparent), transparent 60%), color-mix(in srgb, var(--gbg) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gacc) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--gacc) 50%, transparent); text-align: center; }
.gp[data-game="elden"] .qd .tabs span { border: 0; color: var(--gmute); font-weight: 500; letter-spacing: .14em; font-size: .8rem; }
.gp[data-game="elden"] .qd h4 { margin: 4px 0 2px; font: 500 1.5rem/1.15 "Cinzel", serif; color: var(--gink); }
.gp[data-game="elden"] .qd .orn { color: var(--gacc); letter-spacing: .4em; margin: 6px 0 10px; }
.gp[data-game="elden"] .qd .k2 { font: italic 1rem/1.2 "EB Garamond", serif; color: var(--gmute); }
.gp[data-game="elden"] .qd .fp { font: 500 .9rem/1 "Cinzel", serif; color: var(--gres); margin: 10px 0 12px; letter-spacing: .08em; }
.gp[data-game="elden"] .qd p { font: italic 1.12rem/1.45 "EB Garamond", serif; color: var(--gink); margin: 0 0 8px; }

#toast { position: fixed; right: 16px; bottom: 58px; z-index: 40; font: 700 1.05rem/1.1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--lime), 0 0 24px -6px var(--lime); padding: 10px 16px 10px 12px; display: flex; gap: 12px; align-items: center;
  transform: translateX(120%); opacity: 0; transition: transform .4s cubic-bezier(.2,1.3,.4,1), opacity .3s; max-width: calc(100vw - 32px); }
#toast.on { transform: none; opacity: 1; }
#toast .i { width: 30px; height: 30px; display: grid; place-items: center; background: var(--lime); color: var(--on-accent); font-size: 1rem; }
#toast small { display: block; color: var(--lime); font-size: .72rem; letter-spacing: .12em; }

/* ---------- shell ---------- */
.cow { margin: 0 0 18px; color: var(--mute); font-size: .84rem; white-space: pre; overflow-x: auto; cursor: pointer; }
.cow .say { color: var(--ink); }
#term .win-body { height: 360px; overflow-y: auto; font-size: .86rem; cursor: text; }
#term-out div { white-space: pre-wrap; word-break: break-word; }
#term-line { display: flex; gap: .6ch; }
#term-in { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; caret-color: var(--accent); padding: 0; min-width: 0; }
footer.end { margin-top: 26px; color: var(--mute); font-size: .8rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- notes (placeholder until the format is decided) ---------- */
.notes-box .ls { margin: 0; font-size: .84rem; color: var(--mute); white-space: pre; overflow-x: auto; }
.notes-box .empty { margin: 16px 0 2px; display: flex; gap: 10px; align-items: center; font: 600 1.15rem/1.3 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.notes-box .empty i { width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: blink 1.4s steps(1) infinite; flex: none; }
.notes-box .soon { margin: 6px 0 0; color: var(--mute); font-size: .86rem; }
/* ---------- visitor health check ---------- */
#you .inner { width: min(1160px, 100%); }
.hc-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hc-grid .win { display: flex; flex-direction: column; }
.hc-grid .win-body { flex: 1; display: flex; flex-direction: column; }
.hc-checks { list-style: none; margin: 0; padding: 0; }
.hc-checks li { --sc: var(--mute); display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 10px 7px 9px; margin: 0 -10px;
  font-size: .86rem; border-left: 3px solid transparent; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 20%, transparent); transition: background-color .5s, border-color .5s; }
.hc-checks li:last-child { border-bottom-color: transparent; }
.hc-k { font: 600 .82rem/1.3 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.hc-v { overflow-wrap: anywhere; }
.hc-v small { color: var(--mute); font-size: .74rem; margin-left: 6px; }
.hc-st { min-width: 4.6em; text-align: center; font: 700 .72rem/1 "Rajdhani", sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); }
/* painted results: status colour on the bar, the tint, the value and a solid badge */
.hc-checks [data-s="ok"] { --sc: var(--ok); } .hc-checks [data-s="warn"] { --sc: var(--warn); } .hc-checks [data-s="crit"] { --sc: var(--red); }
.hc-checks [data-s="info"] { --sc: var(--cyan); }
.hc-checks :is([data-s="ok"], [data-s="warn"], [data-s="crit"]) { border-left-color: var(--sc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 20%, transparent), color-mix(in srgb, var(--sc) 5%, transparent) 75%); }
.hc-checks :is([data-s="ok"], [data-s="warn"], [data-s="crit"]) .hc-v { color: var(--sc); font-weight: 600; }
.hc-checks :is([data-s="ok"], [data-s="warn"], [data-s="crit"]) .hc-st { background: var(--sc); color: var(--bg); border-color: var(--sc); box-shadow: 0 0 14px -3px var(--sc); }
.hc-checks [data-s="info"] { border-left-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.hc-checks .hit { animation: hcHit .8s ease-out; }
@keyframes hcHit { from { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--sc) 35%, transparent); } to { box-shadow: inset 0 0 0 100vmax transparent; } }
.hc-checks .run .hc-v, .hc-checks .run .hc-st { opacity: .45; }
.hc-checks .run .hc-st { animation: blink 1s steps(1) infinite; }
.hc-ip { cursor: pointer; transition: filter .2s; }
.hc-ip.hide { filter: blur(6px); }
.hc-nojs { margin: 14px 0 0; color: var(--mute); font-size: .86rem; }
.js .hc-nojs { display: none; }
.hc-score { display: flex; align-items: center; gap: 14px; }
.hc-score b { font: 700 clamp(3.2rem, 7vw, 4.6rem)/.9 "Rajdhani", sans-serif; color: var(--vc, var(--accent)); text-shadow: 0 0 18px color-mix(in srgb, var(--vc, var(--accent)) 45%, transparent); transition: color .5s; }
.hc-score small { font: 600 .9rem/1.15 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.hc-segs { display: flex; gap: 4px; margin: 14px 0 12px; }
.hc-segs i { flex: 1; height: 8px; background: color-mix(in srgb, var(--accent) 15%, transparent); transition: background-color .4s; }
.hc-segs i.ok { background: var(--ok); box-shadow: 0 0 10px -2px var(--ok); } .hc-segs i.warn { background: var(--warn); box-shadow: 0 0 10px -2px var(--warn); }
.hc-segs i.crit { background: var(--red); box-shadow: 0 0 10px -2px var(--red); }
.hc-verdict[data-x="0"] { --vc: var(--ok); } .hc-verdict[data-x="1"] { --vc: var(--warn); } .hc-verdict[data-x="2"] { --vc: var(--red); }
.hc-route { position: relative; height: 140px; margin: 0 0 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.hc-route canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc-say { margin: 0 0 14px; color: var(--vc, var(--ink)); font: 700 1.2rem/1.25 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.hc-again { margin-top: auto; align-self: flex-start; }
.hc-head { margin: 42px 0 18px; padding-left: 22px; border-left: 3px solid var(--accent); }
.hc-head h3 { margin: 0 0 8px; font: 700 clamp(1.4rem, 3vw, 2rem)/1.1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.hc-head h3 .hl { color: var(--accent); }
.hc-head p { margin: 0; color: var(--mute); max-width: 78ch; font-size: .9rem; }
/* what the browser tells: one panel of compact groups; the note behind each group is a tooltip (#hc-tip) with JS */
.hc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.hc-g { min-width: 0; padding: 4px 0 4px 12px; border-left: 2px solid var(--wc); }
.hc-gh { display: flex; justify-content: space-between; gap: 10px; font: 700 .76rem/1.2 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.hc-gt { color: var(--wc); }
.hc-gm { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-gv { display: block; margin: 3px 0 8px; font: 700 1.25rem/1.15 "Rajdhani", sans-serif; text-transform: uppercase; color: var(--wc); overflow-wrap: anywhere; }
.hc-gv small { font-size: .7em; color: var(--mute); }
.hc-g dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: .78rem; }
.hc-g dt { color: var(--mute); }
.hc-g dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.hc-note { margin: 10px 0 0; font-size: .74rem; line-height: 1.5; color: var(--mute); }
.js .hc-card { cursor: help; outline: none; transition: background-color .2s; }
.js .hc-card:is(:hover, :focus-visible, .tip-on) { background: color-mix(in srgb, var(--wc) 9%, transparent); }
.js .hc-card .hc-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }
#hc-tip { position: fixed; left: 0; top: 0; z-index: 40; max-width: min(320px, calc(100vw - 24px)); padding: 10px 14px 11px; pointer-events: none;
  background: var(--tc, var(--accent)); color: var(--on-accent); font: 500 .8rem/1.5 "JetBrains Mono", ui-monospace, monospace;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
#hc-tip.on { opacity: 1; transform: none; }
#hc-tip b { display: block; margin-bottom: 5px; font: 700 .72rem/1 "Rajdhani", sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
/* Ljubljana weather panel (Open-Meteo) with line icons */
.wx { margin-top: 16px; --wc: var(--cyan); }
.wx-body { display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1.05fr); gap: 18px 30px; align-items: center; }
.wx-now { display: flex; align-items: center; gap: 12px; }
.wx-icon { width: 64px; height: 64px; flex: none; }
.wx-now b { display: block; font: 700 2.6rem/1 "Rajdhani", sans-serif; color: var(--wc); }
.wx-now span { display: block; margin-top: 2px; font: 600 .86rem/1.2 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.wx-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: .8rem; }
.wx-dl dt { color: var(--mute); } .wx-dl dd { margin: 0; white-space: nowrap; }
.wx-dir { display: inline-block; font-style: normal; color: var(--wc); }
.wx-note { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-left: 2px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, transparent); font-size: .8rem; }
.wx-hours, .wx-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
.wx-days { padding-left: 24px; border-left: 1px solid var(--line); }
.wx-hours > div, .wx-days > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .78rem; }
.wx-hours span, .wx-days span { font: 600 .74rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.wx-hours small, .wx-days small { color: var(--mute); font-size: .7rem; }
.wx-hours .wxi, .wx-days .wxi { width: 28px; height: 28px; }
.wxi { display: block; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-icon .wxi { width: 100%; height: 100%; stroke-width: 1.3; }
.wxi .ws { stroke: var(--yellow); } .wxi .wm { stroke: var(--ink); } .wxi .wc { stroke: var(--ink); fill: var(--bg-2); }
.wxi .wr { stroke: var(--cyan); stroke-width: 1.8; } .wxi .wn { stroke: var(--ink); stroke-width: 1.2; } .wxi .wb { stroke: var(--yellow); stroke-width: 1.8; } .wxi .wf { stroke: var(--mute); }

/* ---------- bots: live 404 log ---------- */
#bots .inner { width: min(1160px, 100%); }
.pb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.pb-stat { padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.pb-stat b { display: block; font: 700 clamp(2.2rem, 5vw, 3.4rem)/1 "Rajdhani", sans-serif; color: var(--ink); }
.pb-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-stat span { font: 600 .82rem/1.3 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.pb-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
.pb-grid .win { display: flex; flex-direction: column; } .pb-grid .win-body { flex: 1; }
.pb-empty { list-style: none; margin: 0; color: var(--mute); font-size: .84rem; }
/* map: one hue, more probes = more orange (toward the surface when few, full orange at the top step) */
.pb-map { aspect-ratio: 1000 / 487; }
.pb-map svg { display: block; width: 100%; height: 100%; }
.pb-map [data-c] { fill: color-mix(in srgb, var(--ink) 9%, transparent); stroke: var(--bg-2); stroke-width: .5; transition: fill .4s; cursor: default; }
.pb-map [data-l="1"], .pb-legend [data-l="1"] { fill: color-mix(in srgb, var(--orange) 22%, var(--bg-3)); background: color-mix(in srgb, var(--orange) 22%, var(--bg-3)); }
.pb-map [data-l="2"], .pb-legend [data-l="2"] { fill: color-mix(in srgb, var(--orange) 40%, var(--bg-3)); background: color-mix(in srgb, var(--orange) 40%, var(--bg-3)); }
.pb-map [data-l="3"], .pb-legend [data-l="3"] { fill: color-mix(in srgb, var(--orange) 60%, var(--bg-3)); background: color-mix(in srgb, var(--orange) 60%, var(--bg-3)); }
.pb-map [data-l="4"], .pb-legend [data-l="4"] { fill: color-mix(in srgb, var(--orange) 80%, var(--bg-3)); background: color-mix(in srgb, var(--orange) 80%, var(--bg-3)); }
.pb-map [data-l="5"], .pb-legend [data-l="5"] { fill: var(--orange); background: var(--orange); }
.pb-map [data-c="SI"] { stroke: var(--ink); stroke-width: 1.4; }
.pb-map [data-c].tip-on { stroke: var(--ink); stroke-width: 1.2; }
.pb-legend { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 12px; font: 600 .74rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.pb-legend > span:first-child { margin-right: 4px; } .pb-legend > span:nth-of-type(2) { margin-left: 4px; }
.pb-legend > i { width: 22px; height: 10px; }
.pb-home { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pb-home i { width: 14px; height: 10px; border: 1.5px solid var(--ink); }
/* bars: the whole column is the hit target, the bar sits at its foot */
.pb-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 150px; align-items: end; }
.pb-hours i { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.pb-hours b { display: block; width: 100%; background: var(--orange); transition: height .5s, opacity .2s; }
.pb-hours i:last-child b { opacity: .6; }
.pb-hours i.tip-on b { background: var(--ink); }
.pb-hx { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px;
  font: 600 .72rem/1 "Rajdhani", sans-serif; color: var(--mute); }
.pb-hx span { white-space: nowrap; overflow: visible; }
.pb-hx span:last-child { text-align: right; direction: rtl; }
.pb-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pb-cats li[data-k] { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em; gap: 10px; align-items: center; font-size: .82rem; cursor: default; }
.pb-cl { font: 600 .84rem/1.2 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.pb-cb { height: 10px; background: color-mix(in srgb, var(--orange) 10%, transparent); }
.pb-cb i { display: block; height: 100%; background: var(--orange); transition: width .6s; }
.pb-cats li.tip-on .pb-cb i { background: var(--ink); }
.pb-cats b { text-align: right; font-weight: 600; }
.pb-latest { font-size: .78rem; line-height: 1.75; }
.pb-latest div { display: grid; grid-template-columns: 4.2em 2.4em 4.4em minmax(0, 1fr) auto; gap: 12px; white-space: nowrap; }
.pb-latest div:first-child .pb-p { color: var(--accent); }
.pb-t, .pb-k { color: var(--mute); } .pb-cc { color: var(--cyan); } .pb-m { color: var(--yellow); }
.pb-p { overflow: hidden; text-overflow: ellipsis; }
.pb-k { font: 600 .74rem/1.75 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
/* project reachability + live river readout */
.win-bar .r.down { text-decoration: line-through; }
.readout .sub { display: block; margin-top: 3px; text-transform: none; letter-spacing: 0; font: 400 .74rem/1.2 "JetBrains Mono", monospace; }
/* career details: one article per job; JS shows the picked one, no-JS shows all */
#md .mission + .mission { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.js #md .mission:not(.on) { display: none; }
.js #md .mission + .mission { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- status bar: tmux layout, HUD styling ---------- */
#hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 36px; display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg)); border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font: 700 .86rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .06em; transition: background-color .9s; }
#hud .sess { display: flex; align-items: center; padding: 0 22px 0 14px; background: var(--accent); color: var(--on-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background-color .9s; }
#hud nav { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; flex: 1; padding-left: 6px; }
#hud nav a { color: var(--mute); text-decoration: none; padding: 0 16px; display: flex; align-items: center; white-space: nowrap; font-family: "JetBrains Mono", monospace; font-size: .76rem; text-transform: lowercase; letter-spacing: 0; font-weight: 600; }
#hud nav a:hover { color: var(--ink); }
#hud nav a.cur { color: var(--on-accent); background: var(--accent); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
#hud nav a.cur::after { content: "*"; }
#hud .r { display: flex; align-items: center; gap: 14px; padding: 0 14px; white-space: nowrap; color: var(--accent); }
#hud .r .tm { font-family: "JetBrains Mono", monospace; font-size: .76rem; letter-spacing: 0; color: var(--ink); }
#hud .r .ram i { width: 4px; height: 13px; }
#theme-btn { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; color: var(--accent); border: 0; cursor: pointer; display: flex; gap: 7px; align-items: center; padding: 0; }


@media (max-width: 860px) {
  .qh-wrap, .br-main, .journal, .fleet-grid, .hc-grid, .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .hc-groups, .stk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-body { grid-template-columns: auto minmax(0, 1fr); } .wx-hours, .wx-days { grid-column: 1 / -1; } .wx-days { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .qd { position: static; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .hero-grid, .projects { grid-template-columns: minmax(0, 1fr); }
  .neo { font-size: .76rem; white-space: pre-wrap; }
  .portrait { width: 160px; flex: none; }
  /* phones: a scan readout fills the space beside the portrait and takes over the small print under it */
  .pframe { display: flex; gap: 14px; align-items: center; }
  .scanout { display: block; flex: 1; min-width: 0; padding: 8px 10px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px);
    font: 600 .8rem/1.2 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
  .pframe + .fine { display: none; }
  #hosts { grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 1px; }
  .fleet-grid .jr-body { min-height: 240px; }
  #hud nav a .nm, #hud .r .ram { display: none; }
  #hud nav a { padding: 0 10px; }
  .gp[data-game="cp"] .qh li { margin-left: 0; }
  .seg { font-size: 0; padding: 0; }
  .tl-years span:nth-child(odd) { display: none; }
}
@media (max-width: 600px) { .stk-groups { grid-template-columns: 1fr; }
  .wx-body { grid-template-columns: minmax(0, 1fr); } .wx-dl dd { white-space: normal; }
  .hc-groups { gap: 16px 14px; } .hc-g dl { grid-template-columns: minmax(0, 1fr); } .hc-g dd { text-align: left; margin-bottom: 4px; }
  .pb-stats { grid-template-columns: 1fr 1fr; } .pb-stat:first-child { grid-column: 1 / -1; } .pb-stats.four { grid-template-columns: 1fr 1fr; } .pb-stats.four .pb-stat:first-child { grid-column: auto; }
  .pb-latest div { grid-template-columns: 3.6em 2em minmax(0, 1fr); } .pb-latest .pb-m, .pb-latest .pb-k { display: none; }
  .pb-cats li[data-k] { grid-template-columns: 8em minmax(0, 1fr) 3em; } .cell { height: 44px; }
  .hc-checks li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .hc-checks .hc-v { grid-column: 1 / -1; grid-row: 2; } }
/* rm -rf / easter egg: sections blink out, then the whole screen drops before the 404 page loads */
section.wiped { animation: wiped .45s steps(4) forwards; pointer-events: none; }
@keyframes wiped { 0% { opacity: 1; } 25% { opacity: .2; transform: translateX(6px); } 50% { opacity: .8; transform: translateX(-4px) skewX(-6deg); } 100% { opacity: 0; transform: none; } }
.wiping #bg { animation: wipeBg .3s steps(2) infinite; }
@keyframes wipeBg { 50% { filter: hue-rotate(140deg) saturate(3); } }
body.wiped-out main, body.wiped-out #hud, body.wiped-out #bg { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) {
  section.wiped { opacity: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 404 ---------- */
.p404 { padding-bottom: 0; }
.e404 { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 10vh 16px; }
.e404 .inner { width: min(760px, 100%); }
.t404 { margin: 0 0 18px; font-size: .9rem; line-height: 1.7; white-space: pre-wrap; word-break: break-all; }
.e404 .ways { display: flex; gap: 10px; flex-wrap: wrap; }
.e404 .ways .btn { text-decoration: none; padding: 9px 13px; }

/* ---------- note pages (notes/*.html) ---------- */
.note-page { padding-bottom: 0; }
main.note { position: relative; z-index: 2; width: min(760px, 100%); margin: 0 auto; padding: 10vh 16px 8vh; }
.note .cmd { visibility: visible !important; }
.note h1 { font: 700 clamp(2rem, 5vw, 3rem)/1.05 "Rajdhani", sans-serif; text-transform: uppercase; margin: 0 0 10px; }
.note-meta { color: var(--mute); font-size: .8rem; margin: 0 0 30px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.note-meta span { font: 700 .72rem/1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: 3px 6px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.note-body { font-size: .95rem; line-height: 1.75; }
.note-body .lead { font: 600 1.3rem/1.35 "Rajdhani", sans-serif; color: var(--ink); }
.note-body h2 { font: 700 1.35rem/1.1 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin: 34px 0 8px; }
.note-body code { font-size: .88em; padding: 1px 5px; background: var(--bg-3); border: 1px solid var(--line); }
.note-body pre { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 14px 16px; overflow-x: auto; font-size: .84rem; line-height: 1.6; }
.note-body pre code { padding: 0; background: none; border: 0; }
.note-body blockquote { margin: 28px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.note-body a { color: var(--accent); }
.note-nav { display: flex; gap: 10px; margin: 40px 0 10px; }
.note-nav .btn { text-decoration: none; padding: 8px 12px; }
/* rows in the home-page notes box: <a class="note-row" href="notes/slug.html"><span class="d">2026-10-03</span><b>Title</b><span class="tg">mail · dns</span></a> */
.note-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: baseline; padding: 10px 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background .2s, padding .2s; }
.note-row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); padding-left: 12px; }
.note-row .d { color: var(--mute); font-size: .8rem; }
.note-row b { font: 700 1.15rem/1.2 "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.note-row:hover b { color: var(--accent); }
.note-row .tg { font: 700 .7rem/1 "Rajdhani", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 600px) { .note-row { grid-template-columns: 1fr; gap: 4px; } }