/* BUILD YOUR RIG — night desk, beige plastic, phosphor and a little RGB */
:root {
  --room: #0f1420;
  --room-2: #141a28;
  --room-3: #1b2232;
  --line: #2a3347;
  --beige: #d8cfb8;
  --beige-hi: #ece5d2;
  --beige-lo: #bdb398;
  --beige-deep: #8f866e;
  --beige-ink: #2a2620;
  --ink: #e8e3d4;
  --ink-dim: #a3abbd;
  --ink-mute: #6d778c;
  --phos: #4dff88;
  --phos-mid: #2fbf63;
  --phos-dim: #1a5e36;
  --amber: #ffb000;
  --red: #ff3b4e;
  --cyan: #33e1ff;
  --blue: #3b7bff;
  --yellow: #ffd23f;
  --bios: #0000a8;
  --bios-cyan: #54fcfc;
  --bios-yellow: #fcfc54;
  --bios-white: #fcfcfc;
  --bios-gray: #a8a8a8;
  --bios-red: #a80000;
  --f-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-crt: "VT323", "Lucida Console", monospace;
  --f-px: "Silkscreen", "VT323", monospace;
  --gutter: 16px;
  --maxw: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(51, 225, 255, .07), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(255, 176, 0, .05), transparent 60%),
    var(--room);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); }
b { font-weight: 600; color: var(--beige-hi); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--phos); outline-offset: 3px; }
[hidden] { display: none !important; }

.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter);
  background: rgba(13, 17, 27, .94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(216, 207, 184, .04);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--beige); }
.brand-ico { width: 24px; height: 24px; color: var(--beige); flex: none; }
.brand-ico svg { width: 100%; height: 100%; fill: currentColor; }
.brand-txt { font-family: var(--f-px); font-size: 14px; letter-spacing: .04em; white-space: nowrap; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--ink-dim); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 6px 10px; border-radius: 4px; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--phos); background: rgba(77, 255, 136, .06); }
.top-right { display: flex; align-items: center; gap: 10px; }

.preview {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-px); font-size: 10px; color: var(--amber);
  border: 1px dashed rgba(255, 176, 0, .5); border-radius: 3px; padding: 3px 6px;
}
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 1.2s steps(2) infinite; }
.preview select {
  background: var(--room-2); color: var(--amber); border: 1px solid rgba(255, 176, 0, .4);
  font-family: var(--f-crt); font-size: 15px; padding: 0 2px; max-width: 140px;
}

.btn-power {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--beige); color: var(--beige-ink); border: 0;
  font-weight: 600; font-size: 14px;
  box-shadow: inset 0 -3px 0 var(--beige-deep), 0 2px 0 #4f493c, 0 6px 14px rgba(0, 0, 0, .4);
  transition: transform .08s, box-shadow .08s;
}
.btn-power:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--beige-deep), 0 0 0 #4f493c; }
.pw-ico {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: #2b3140; box-shadow: inset 0 0 0 2px #1d222c;
}
.pw-ico::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 2px solid #6d778c; border-top-color: transparent;
}
.pw-ico::after { content: ""; position: absolute; left: 12px; top: 4px; width: 2px; height: 9px; background: #6d778c; border-radius: 1px; }
.btn-power.on .pw-ico { box-shadow: inset 0 0 0 2px #1d222c, 0 0 10px rgba(77, 255, 136, .7); }
.btn-power.on .pw-ico::before { border-color: var(--phos); border-top-color: transparent; }
.btn-power.on .pw-ico::after { background: var(--phos); }

/* ---------- keycap buttons ---------- */
.key {
  --kc: var(--beige); --kd: var(--beige-deep); --kt: var(--beige-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px 4px; cursor: pointer;
  background: var(--kc); color: var(--kt); border: 0; border-radius: 7px;
  font-family: var(--f-ui); font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 -5px 0 var(--kd), inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #3e392f, 0 8px 16px rgba(0, 0, 0, .35);
  transition: transform .07s, box-shadow .07s, filter .15s;
  user-select: none;
}
.key span { position: relative; }
.key:hover { filter: brightness(1.06); }
.key:active, .key.pressed { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--kd), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 #3e392f, 0 3px 6px rgba(0, 0, 0, .3); }
.key:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.7); }
.key-wide { padding-inline: 22px; }
.key-green::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--phos);
  box-shadow: 0 0 8px var(--phos); position: relative; top: -1px;
}
.key-ghost { --kc: #2b3140; --kd: #171b24; --kt: var(--beige); box-shadow: inset 0 -5px 0 var(--kd), inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 #0a0d13, 0 8px 16px rgba(0, 0, 0, .35); }
.key-sm { min-height: 36px; font-size: 12px; padding: 0 12px 3px; }

/* ---------- layout helpers ---------- */
main > section { padding: 72px var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
.sec-head { margin-bottom: 32px; max-width: 760px; }
.sec-num { font-family: var(--f-crt); color: var(--phos); font-size: 22px; margin: 0; letter-spacing: .1em; }
.sec-num::before { content: "C:\\RIG\\"; color: var(--ink-mute); }
.h2 { font-size: clamp(30px, 5vw, 52px); line-height: 1; margin: 6px 0 10px; font-weight: 700; letter-spacing: -.01em; color: var(--beige-hi); }
.h2.sm { font-size: 22px; margin: 0; }
.h3 { font-size: 20px; margin: 0 0 10px; color: var(--beige-hi); }
.sec-sub { color: var(--ink-dim); margin: 0; font-size: 17px; }
.mini-h { font-family: var(--f-px); font-size: 11px; font-weight: 400; color: var(--ink-mute); margin: 0 0 8px; letter-spacing: .06em; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 28px; align-items: center;
  padding-top: 40px !important; padding-bottom: 24px !important;
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-family: var(--f-px); font-size: 11px; color: var(--phos); letter-spacing: .04em;
}
.blip { width: 8px; height: 8px; background: var(--phos); box-shadow: 0 0 10px var(--phos); animation: blink 1s steps(2) infinite; }
.h1 { margin: 0 0 18px; line-height: .95; font-weight: 700; letter-spacing: -.02em; }
.h1-line { display: block; font-size: clamp(42px, 6.4vw, 78px); color: var(--beige-hi); }
.caps { display: inline-flex; gap: .12em; margin-top: .18em; font-size: clamp(46px, 7vw, 86px); }
.cap {
  display: grid; place-items: center; width: 1.12em; height: 1.12em; padding-bottom: .12em;
  background: var(--beige); color: var(--beige-ink); border-radius: .14em;
  font-size: 1em; line-height: 1;
  box-shadow: inset 0 -.12em 0 var(--beige-deep), inset 0 .02em 0 rgba(255, 255, 255, .6), 0 .07em 0 #3e392f, 0 .2em .3em rgba(0, 0, 0, .4);
  animation: capPress 4.8s infinite;
}
.cap:nth-child(2) { animation-delay: .18s; }
.cap:nth-child(3) { animation-delay: .36s; }
.cap:nth-child(3) { color: #1d6b3d; }
@keyframes capPress {
  0%, 8%, 100% { transform: none; }
  4% { transform: translateY(.06em); box-shadow: inset 0 -.05em 0 var(--beige-deep), 0 .01em 0 #3e392f, 0 .05em .1em rgba(0, 0, 0, .4); }
}
.lede { color: var(--ink-dim); font-size: 18px; max-width: 34em; margin: 0 0 26px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 0; }
.hero-chips li {
  font-family: var(--f-crt); font-size: 18px; line-height: 1; color: var(--ink-dim);
  padding: 6px 9px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--room-2);
}
.hero-chips li b { color: var(--phos); font-weight: 400; }

/* scene */
.scene-wrap { position: relative; }
.scene {
  position: relative; aspect-ratio: 1200 / 720; width: 100%;
  container-type: inline-size;
  overflow: hidden; border-radius: 14px;
  background: #121a2a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(216, 207, 184, .06);
  -webkit-mask-image: radial-gradient(130% 120% at 50% 45%, #000 62%, transparent 100%);
  mask-image: radial-gradient(130% 120% at 50% 45%, #000 62%, transparent 100%);
}
.layer { position: absolute; inset: 0; will-change: transform; }
.layer > svg { width: 100%; height: 100%; max-width: none; }
.l-wall { transform: scale(1.08); }
.l-desk, .l-parts { transform: scale(1.04); }
.wall-led { fill: #1f5560; transition: fill .4s; }
.wall-led-glow { fill: transparent; }
.citylights rect { animation: cityl 7s steps(1) infinite; }
.citylights rect:nth-child(3n) { animation-delay: -2s; }
.citylights rect:nth-child(4n) { animation-delay: -4.5s; }
@keyframes cityl { 0%, 60% { opacity: .9; } 61%, 75% { opacity: .15; } 76% { opacity: .9; } }
.steam { animation: steam 4s ease-in-out infinite; transform-origin: 1110px 408px; }
@keyframes steam { 0%, 100% { opacity: .05; transform: translateY(4px); } 50% { opacity: .3; transform: translateY(-6px); } }
.mon-glow { opacity: 0; transition: opacity .8s; }
.scene.has-mon .mon-glow { opacity: .55; }
.scene.powered .mon-glow { opacity: 1; }
.scene::after {
  content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 40%; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 60%, rgba(51, 225, 255, .14), transparent 70%);
  mix-blend-mode: screen; transition: opacity .5s;
}
.scene.powered::after { animation: rgbAmb 2.4s linear infinite; }
.scene.powered .wall-led { animation: rgbFill 2.4s linear infinite; }

.slot { position: absolute; }
.slot .part { position: absolute; inset: 0; transform-origin: 50% 100%; }
.slot .part > svg { width: 100%; height: 100%; overflow: visible; }
.slot .part.on > svg { filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 0, .55)); }
.slot::before {
  content: attr(data-name); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px);
  font-family: var(--f-px); font-size: max(9px, 1.05cqw); color: var(--beige);
  background: rgba(10, 13, 20, .85); padding: .25em .5em; border-radius: 3px; white-space: nowrap;
  opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; z-index: 3;
}
.slot:hover::before { opacity: 1; transform: translate(-50%, 0); }
.slot .badge {
  position: absolute; right: -4%; top: -6%; z-index: 2;
  font-family: var(--f-px); font-size: max(9px, 1.35cqw); line-height: 1;
  background: var(--amber); color: #1d1a12; padding: .3em .45em .25em; border-radius: 3px;
  transform: rotate(7deg); box-shadow: 0 .2cqw 0 #6b4a00, 0 .5cqw 1cqw rgba(0, 0, 0, .4);
}
.slot[data-i="3"] .badge { right: -40%; top: -16%; }
.badge.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: rotate(7deg) scale(0); } 100% { transform: rotate(7deg) scale(1); } }
.slot.flash::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 14%;
  transform: translate(-50%, 40%); border-radius: 50%;
  border: .25cqw solid rgba(255, 220, 140, .9);
  animation: ring .55s ease-out forwards; pointer-events: none;
}
@keyframes ring { 0% { opacity: 1; transform: translate(-50%, 40%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, 40%) scale(1.5); } }

.clock {
  position: absolute; display: grid; place-items: center;
  background: #14171e; border-radius: .6cqw; border: .25cqw solid #2b3140;
  box-shadow: inset 0 0 1.2cqw rgba(0, 0, 0, .9), 0 .6cqw 1cqw rgba(0, 0, 0, .5);
}
.clock-ghost, .clock-time {
  grid-area: 1 / 1; font-family: var(--f-crt); font-size: 3.8cqw; line-height: 1; letter-spacing: .05em;
}
.clock-ghost { color: rgba(255, 59, 78, .1); }
.clock-time { color: var(--red); text-shadow: 0 0 .8cqw rgba(255, 59, 78, .8); }
.clock-lbl {
  position: absolute; bottom: -1.7cqw; left: 0; right: 0; text-align: center;
  font-family: var(--f-px); font-size: max(7px, .85cqw); color: var(--ink-mute);
}
.sweep {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(77, 255, 136, .0) 42%, rgba(255, 255, 255, .16) 50%, rgba(51, 225, 255, .0) 58%, transparent 60%);
  background-size: 250% 100%;
}
.scene.booting .sweep { animation: sweep 1.3s ease-in-out; }
@keyframes sweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -40% 0; } }
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-tag {
  position: absolute; left: 2.2%; bottom: 3%; z-index: 4;
  font-family: var(--f-px); font-size: max(9px, 1.05cqw); color: var(--beige);
  background: rgba(10, 13, 20, .78); padding: .45em .7em; border-radius: 3px; border-left: 3px solid var(--phos);
}

/* part states */
.part.ghost { animation: ghost 3.2s ease-in-out infinite; }
@keyframes ghost { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.part.ghost .pt * {
  fill: none !important; stroke: rgba(216, 207, 184, .4) !important; stroke-width: 1.4px !important;
  stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; animation: none !important;
}
.part.ghost .pt .d { display: none; }
.pt .rgb { fill: #30384a; }
.pt .rgbs { stroke: #30384a; }
.part.on .rgb { fill: var(--glow, var(--cyan)); }
.part.on .rgbs { stroke: var(--glow, var(--cyan)); }
.pt .scr-on { opacity: 0; transition: opacity .6s .3s; }
.powered .pt .scr-on { opacity: 1; }
.powered .pt .rgb { animation: rgbFill 2.4s linear infinite; animation-delay: var(--wd, 0s); }
.powered .pt .rgbs { animation: rgbStroke 2.4s linear infinite; animation-delay: var(--wd, 0s); }
.powered .pt .kw { animation: keyWave 2.4s linear infinite; animation-delay: calc(var(--wd, 0s) + var(--k, 0) * -0.035s); }
.powered .pt .led-pw { fill: var(--phos); }
.powered .pt .led-hd { animation: hdd .7s steps(2) infinite; }
.powered .pt .hz { fill: var(--red); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes hdd { 0% { fill: #ffb000; } 100% { fill: #3b2a1a; } }
@keyframes rgbFill { 0%, 100% { fill: #ff3b4e; } 20% { fill: #ffb000; } 40% { fill: #4dff88; } 60% { fill: #33e1ff; } 80% { fill: #3b7bff; } }
@keyframes rgbStroke { 0%, 100% { stroke: #ff3b4e; } 20% { stroke: #ffb000; } 40% { stroke: #4dff88; } 60% { stroke: #33e1ff; } 80% { stroke: #3b7bff; } }
@keyframes rgbBg { 0%, 100% { background-color: #ff3b4e; } 20% { background-color: #ffb000; } 40% { background-color: #4dff88; } 60% { background-color: #33e1ff; } 80% { background-color: #3b7bff; } }
@keyframes keyWave { 0%, 100% { fill: #efe9d8; } 20% { fill: #ffd0c8; } 40% { fill: #ffe7b0; } 60% { fill: #c9f7d8; } 80% { fill: #c6eeff; } }
@keyframes rgbAmb {
  0%, 100% { background: radial-gradient(60% 50% at 50% 60%, rgba(255, 59, 78, .2), transparent 70%); }
  33% { background: radial-gradient(60% 50% at 50% 60%, rgba(77, 255, 136, .2), transparent 70%); }
  66% { background: radial-gradient(60% 50% at 50% 60%, rgba(51, 225, 255, .2), transparent 70%); }
}
.part.drop { animation: snap .85s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes snap {
  0% { transform: translateY(-170%) rotate(-7deg); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translateY(0) rotate(0) scale(1.06, .9); }
  62% { transform: translateY(-9%) scale(.98, 1.03); }
  76% { transform: translateY(0) scale(1.02, .97); }
  88% { transform: translateY(-2%) scale(1); }
  100% { transform: none; opacity: 1; }
}
.part.bump { animation: bump .45s ease-out; }
@keyframes bump { 0% { transform: none; } 35% { transform: translateY(-6%) scale(1.03); } 70% { transform: scale(1.02, .97); } 100% { transform: none; } }
.part.lift { animation: lift .5s ease-in forwards; }
@keyframes lift { to { transform: translateY(-40%) scale(.9); opacity: 0; } }

/* ---------- bench: CRT POST + bin ---------- */
.bench {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start;
  padding-top: 32px !important;
}
.crt { display: flex; flex-direction: column; align-items: center; }
.crt-bezel {
  width: 100%; padding: 22px 22px 0; border-radius: 22px 22px 14px 14px;
  background: linear-gradient(180deg, var(--beige-hi), var(--beige) 12%, var(--beige-lo));
  box-shadow: inset 0 -6px 0 var(--beige-deep), inset 0 2px 0 rgba(255, 255, 255, .6), 0 20px 40px rgba(0, 0, 0, .45);
}
.crt-screen {
  position: relative; overflow: hidden;
  border-radius: 26px / 22px;
  background: radial-gradient(120% 120% at 50% 40%, #0e2016, #050b07 75%);
  box-shadow: inset 0 0 0 10px #252a33, inset 0 0 0 12px #1a1e25, inset 0 0 60px rgba(0, 0, 0, .9);
  padding: 30px 30px 26px;
  min-height: 360px;
  animation: flicker 6s infinite;
}
.crt-content { position: relative; transform-origin: 50% 50%; }
.post {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--f-crt); font-size: clamp(16px, 1.75vw, 21px); line-height: 1.12;
  color: var(--phos); text-shadow: 0 0 5px rgba(77, 255, 136, .55), 0 0 1px rgba(77, 255, 136, .9);
  min-height: 15.5em;
}
.post .hi { color: #eaffef; }
.post .am { color: var(--amber); text-shadow: 0 0 5px rgba(255, 176, 0, .6); }
.post .big { font-size: 1.7em; line-height: 1.1; }
.post .cur { display: inline-block; width: .55em; height: .15em; background: var(--phos); vertical-align: baseline; animation: blink 1s steps(2) infinite; }
.post-logo { position: absolute; right: 0; top: 0; width: 54px; height: 54px; color: var(--phos); filter: drop-shadow(0 0 4px rgba(77, 255, 136, .6)); }
.post-logo svg { width: 100%; height: 100%; fill: currentColor; }
.crt-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px);
}
.crt-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22%; top: -22%;
  background: linear-gradient(180deg, transparent, rgba(77, 255, 136, .05), transparent);
  animation: roll 7s linear infinite;
}
@keyframes roll { to { top: 110%; } }
.crt-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 45% at 30% 12%, rgba(255, 255, 255, .07), transparent 60%);
  box-shadow: inset 0 0 0 12px transparent, inset 0 0 90px rgba(0, 0, 0, .55);
}
@keyframes flicker {
  0%, 100% { filter: brightness(1); } 47% { filter: brightness(1); } 48% { filter: brightness(.88); } 49% { filter: brightness(1.04); }
  50% { filter: brightness(1); } 82% { filter: brightness(.97); } 83% { filter: brightness(1); }
}
.crt-chin { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 14px; }
.chin-brand { font-family: var(--f-px); font-size: 11px; color: var(--beige-deep); }
.chin-knobs { display: flex; gap: 10px; margin-left: auto; margin-right: 14px; }
.chin-knobs i { width: 16px; height: 16px; border-radius: 50%; background: var(--beige-lo); box-shadow: inset 0 -2px 0 var(--beige-deep), 0 1px 0 rgba(255, 255, 255, .5); }
.chin-led { width: 9px; height: 9px; border-radius: 50%; background: var(--phos); box-shadow: 0 0 8px var(--phos); }
.crt-neck { width: 30%; height: 18px; background: linear-gradient(180deg, var(--beige-lo), var(--beige-deep)); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.crt-foot { width: 52%; height: 14px; border-radius: 50%; background: var(--beige-deep); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }

.bin {
  background: var(--room-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.bin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bin-wallet { font-family: var(--f-crt); font-size: 18px; color: var(--ink-mute); }
.bin-wallet.on { color: var(--phos); }
.bin-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bin-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #11151f, #0c1018);
  border: 1px solid #232b3c;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
  transition: transform .15s, border-color .15s;
}
.bin-card:hover { transform: translateY(-2px); border-color: #34405a; }
.bin-card .part { position: relative; width: 100%; height: 62px; }
.bin-card .part > svg { width: 100%; height: 100%; }
.bin-card .nm { font-family: var(--f-px); font-size: 10px; color: var(--ink-dim); letter-spacing: .03em; }
.bin-card .ct {
  position: absolute; top: 6px; right: 6px; font-family: var(--f-px); font-size: 10px; line-height: 1;
  padding: 3px 4px 2px; border-radius: 3px; background: #232b3c; color: var(--ink-mute);
}
.bin-card.have .ct { background: var(--phos-dim); color: var(--phos); }
.bin-card.dup .ct { background: var(--amber); color: #1d1a12; }
.bin-card.have .nm { color: var(--beige); }
.bin-elig { margin: 14px 0; font-size: 14px; color: var(--ink-dim); min-height: 1.5em; }
.bin-elig .ok { color: var(--phos); }
.bin-elig .no { color: var(--amber); }
.bin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.drops-list { list-style: none; margin: 0; padding: 0; font-family: var(--f-crt); font-size: 18px; line-height: 1.25; color: var(--ink-dim); }
.drops-list li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #232b3c; padding: 3px 0; }
.drops-list li b { color: var(--beige); font-weight: 400; }
.drops-list .empty { color: var(--ink-mute); border: 0; }

/* ---------- comic ---------- */
.comic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px;
  padding: 18px; border-radius: 6px;
  background-color: #e6dcc2;
  background-image: radial-gradient(rgba(42, 38, 32, .14) 1.1px, transparent 1.3px);
  background-size: 9px 9px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  color: #1d1a14;
}
.panel {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 18px; background: #f6f0df;
  border: 3px solid #14161c; box-shadow: 5px 5px 0 #14161c;
  transition: transform .2s;
}
.panel:hover { transform: rotate(0) translate(-2px, -2px) !important; box-shadow: 7px 7px 0 #14161c; }
.p1 { grid-column: span 5; transform: rotate(-.6deg); }
.p2 { grid-column: span 3; transform: rotate(.5deg); }
.p3 { grid-column: span 4; transform: rotate(-.3deg); background: #d9f1ff; }
.p4 { grid-column: span 5; transform: rotate(.4deg); }
.p5 { grid-column: span 7; transform: rotate(-.4deg); }
.pn {
  position: absolute; top: -3px; left: -3px; width: 30px; height: 30px; display: grid; place-items: center;
  background: #14161c; color: var(--yellow); font-family: var(--f-px); font-size: 14px;
}
.cap-box {
  align-self: flex-start; margin: 0 0 0 26px; padding: 4px 10px;
  background: var(--yellow); border: 2px solid #14161c;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
.pan-art { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pan-txt { margin: 0; font-size: 15px; line-height: 1.45; color: #2a261e; }
.pan-txt b { color: #000; }
.bubble {
  position: absolute; margin: 0; padding: 8px 12px; max-width: 58%;
  background: #fff; border: 2.5px solid #14161c; border-radius: 18px;
  font-weight: 600; font-size: 13px; line-height: 1.25; z-index: 2;
}
.bubble::after {
  content: ""; position: absolute; bottom: -12px; width: 16px; height: 14px; background: #fff;
  border: 2.5px solid #14161c; border-top: 0; border-left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.b-right { top: 48px; right: 12px; transform: rotate(2deg); }
.b-right::after { left: 22px; transform: skewX(-25deg); }
.b-left { top: 50px; left: 14px; transform: rotate(-2deg); }
.b-left::after { right: 24px; transform: skewX(25deg) scaleX(-1); }
.pow {
  position: absolute; top: 18px; right: 10px; z-index: 2;
  padding: 18px 22px; font-weight: 700; font-style: italic; font-size: 22px; color: #14161c;
  background: var(--cyan);
  clip-path: polygon(50% 0, 61% 22%, 86% 8%, 78% 34%, 100% 42%, 80% 56%, 94% 82%, 66% 74%, 58% 100%, 44% 78%, 18% 94%, 24% 66%, 0 56%, 20% 42%, 8% 16%, 36% 24%);
  transform: rotate(-8deg); animation: powPulse 2.4s ease-in-out infinite;
}
@keyframes powPulse { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-5deg) scale(1.08); } }
.art-drop .chute { position: absolute; top: 0; left: 50%; width: 120px; height: 18px; transform: translateX(-50%); background: #14161c; border-radius: 0 0 8px 8px; }
.art-drop .faller { width: 170px; height: 56px; animation: fall 2.6s cubic-bezier(.5, 0, .7, 1) infinite; }
.art-drop .faller .pt { width: 100%; height: 100%; }
.art-drop .lines { position: absolute; top: 22px; left: 50%; width: 120px; height: 50px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(20, 22, 28, .5) 14px 16px); opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000); mask-image: linear-gradient(180deg, transparent, #000); }
@keyframes fall { 0% { transform: translateY(-50px); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(32px); } 65% { transform: translateY(24px); } 75%, 100% { transform: translateY(32px); opacity: 1; } }
.art-drop .coins { position: absolute; left: 8px; bottom: 6px; display: flex; flex-direction: column-reverse; align-items: center; }
.art-drop .coins i { width: 46px; height: 11px; margin-top: -4px; border-radius: 50%; background: var(--amber); border: 2px solid #14161c; }
.art-drop .coins span { font-family: var(--f-px); font-size: 10px; margin-bottom: 4px; }
.art-swap .pt { height: 56px; width: auto; }
.art-swap .stack { position: relative; width: 120px; height: 90px; }
.art-swap .stack .pt { position: absolute; width: 120px; height: 40px; }
.art-swap .stack .pt:first-child { top: 6px; left: 0; transform: rotate(-6deg); }
.art-swap .stack .pt:last-child { top: 40px; left: 8px; transform: rotate(4deg); }
.art-swap .arrow { font-family: var(--f-px); font-size: 26px; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.art-swap .pt-mon { width: 90px; height: 87px; }
.art-drop .faller, .art-swap .stack, .art-swap > .part, .art-burn > .part { position: relative; }
.art-swap > .part:last-child { width: 90px; height: 87px; }
.art-burn > .part { width: 75px; height: 128px; }
.mini-rig { position: relative; width: 240px; height: 140px; }
.mini-rig .pt { position: absolute; }
.art-full .frost { position: absolute; inset: -4px; border: 3px dashed rgba(51, 140, 200, .6); border-radius: 6px; pointer-events: none; }
.mini-bios { width: 220px; background: var(--bios); color: var(--bios-white); font-family: var(--f-crt); font-size: 18px; padding: 10px 12px; border: 4px double var(--bios-white); }
.mini-bios p { margin: 0; }
.mb-t { color: var(--bios-cyan); text-align: center; }
.mb-r { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; }
.mb-r span { width: 30px; color: var(--bios-yellow); }
.mb-r i { height: 12px; background: #54fc54; animation: grow 3s ease-in-out infinite alternate; }
.mb-r.no i { background: #fc5454; animation-delay: -1.5s; }
@keyframes grow { from { max-width: 30%; } to { max-width: 100%; } }
.mb-f { margin-top: 8px !important; color: var(--bios-gray); text-align: right; }
.p5-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.p5-yes { padding-right: 14px; border-right: 3px solid #14161c; }
.p5-no { padding-left: 14px; }
.p5-split .cap-box { margin-left: 18px; }
.p5-split .pan-txt { margin-top: 8px; }
.art-launch .fdisk { animation: rise 2.4s ease-in-out infinite; }
.art-launch .trail { position: absolute; bottom: 4px; width: 50px; height: 60px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(20, 22, 28, .45) 8px 10px); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
@keyframes rise { 0%, 100% { transform: translateY(10px) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
.art-burn .pt-case { height: 128px; width: 75px; filter: grayscale(.4) brightness(.8); }
.art-burn .flame { position: absolute; bottom: 12px; left: 50%; width: 92px; height: 120px; transform: translateX(-50%); }
.flame .fl1 { transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; }
.flame .fl2 { transform-origin: 50% 100%; animation: flick .35s ease-in-out infinite alternate-reverse; }
@keyframes flick { from { transform: scale(1, 1); } to { transform: scale(.92, 1.08) skewX(3deg); } }

/* ---------- floppy (shared by comic + shelf) ---------- */
.fdisk {
  --fc: #2a6fd1;
  position: relative; width: 96px; aspect-ratio: 1 / 1.04; flex: none;
  background: var(--fc); border-radius: 4px;
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 2px 0 0 rgba(255, 255, 255, .15);
}
.fdisk .shut { position: absolute; top: 0; left: 22%; width: 54%; height: 34%; background: linear-gradient(180deg, #c9cdd3, #8d939b); border-radius: 0 0 3px 3px; }
.fdisk .shut::after { content: ""; position: absolute; top: 18%; left: 58%; width: 18%; height: 62%; background: #2a2e36; border-radius: 1px; }
.fdisk .lab { position: absolute; left: 10%; right: 10%; bottom: 0; height: 52%; background: var(--beige-hi); border-radius: 3px 3px 0 0; }
.fdisk .wp { position: absolute; left: 4%; bottom: 4%; width: 7%; height: 8%; background: rgba(0, 0, 0, .55); }

/* ---------- round / BIOS ---------- */
.bios-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; align-items: stretch; }
.bios {
  background: var(--bios); color: var(--bios-white);
  font-family: var(--f-crt); font-size: 20px; line-height: 1.2;
  padding: 10px; border-radius: 4px;
  box-shadow: 0 0 0 6px #14161c, 0 0 0 7px #2b3140, 0 30px 60px rgba(0, 0, 0, .5), 0 0 80px rgba(0, 0, 168, .25);
  position: relative; overflow: hidden;
}
.bios::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .12) 2px 3px); }
.bios:focus-visible { outline: 2px dashed var(--bios-yellow); outline-offset: 8px; }
.bios-title { text-align: center; color: var(--bios-cyan); letter-spacing: .08em; padding: 2px 0 6px; }
.bios-bar {
  display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center;
  background: var(--bios-gray); color: #000; padding: 2px 8px; margin-bottom: 8px;
}
.bios-bar b { color: var(--bios-red); font-weight: 400; }
.bios-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border: 4px double var(--bios-white); min-height: 340px; }
.bios-main { padding: 14px 16px; min-width: 0; }
.bios-side { padding: 14px 16px; border-left: 4px double var(--bios-white); min-width: 0; }
.bios-foot { margin-top: 8px; color: var(--bios-cyan); text-align: center; font-size: 18px; }
.b-h { color: var(--bios-cyan); margin: 0 0 8px; }
.b-y { color: var(--bios-yellow); }
.b-dim { color: var(--bios-gray); }
.b-red { color: #fc5454; }
.b-grn { color: #54fc54; }
.b-p { margin: 0 0 8px; }
.b-big { font-size: 34px; line-height: 1; color: var(--bios-white); margin: 2px 0 10px; }
.idea { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
.idea-img { width: 112px; height: 112px; border: 2px solid var(--bios-white); background: #000060; image-rendering: auto; object-fit: cover; }
.idea-img.idn { image-rendering: pixelated; }
.idea-name { font-size: 30px; line-height: 1; margin: 0; color: var(--bios-white); overflow-wrap: anywhere; }
.idea-sym { color: var(--bios-yellow); margin: 4px 0 8px; }
.idea-desc { margin: 12px 0 0; color: #dcdcff; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 19px; }
.idea-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.idea-links a { color: var(--bios-cyan); }
.vbar { margin: 8px 0 12px; }
.vbar-h { display: flex; justify-content: space-between; gap: 8px; }
.vbar-t { position: relative; height: 18px; margin-top: 3px; background: #000060; border: 1px solid #5454fc; }
.vbar-t i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .6s cubic-bezier(.3, 1.2, .5, 1);
  background: repeating-linear-gradient(90deg, currentColor 0 9px, transparent 9px 11px);
}
.vbar.yes .vbar-t i { color: #54fc54; }
.vbar.no .vbar-t i { color: #fc5454; }
.bkeys { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.bkey {
  --kc: var(--beige); --kd: var(--beige-deep);
  flex: 1 1 140px; min-height: 76px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 10px 14px 14px; cursor: pointer; border: 0; border-radius: 9px;
  background: var(--kc); color: var(--beige-ink); text-align: left;
  box-shadow: inset 0 -7px 0 var(--kd), inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #14161c, 0 10px 18px rgba(0, 0, 0, .45);
  transition: transform .07s, box-shadow .07s;
}
.bkey .kl { font-family: var(--f-ui); font-weight: 700; font-size: 15px; }
.bkey .kv { font-family: var(--f-px); font-size: 13px; color: #1d6b3d; }
.bkey.esc .kv { color: #a8231f; }
.bkey:active, .bkey.pressed { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--kd), 0 0 0 #14161c, 0 4px 8px rgba(0, 0, 0, .4); }
.bkey:disabled { cursor: not-allowed; opacity: .55; }
.bkey.chosen { outline: 3px solid var(--bios-yellow); outline-offset: 3px; }
.bform { display: grid; gap: 8px; }
.bfield { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.bfield > span { color: var(--bios-yellow); }
.bfield input, .bfield textarea {
  width: 100%; font: inherit; color: var(--bios-white); background: transparent;
  border: 0; border-bottom: 1px dashed var(--bios-cyan); padding: 2px 4px; border-radius: 0; resize: vertical;
}
.bfield textarea { min-height: 80px; }
.bfield input:focus, .bfield textarea:focus { outline: 0; background: var(--bios-red); color: var(--bios-white); }
.bfield small { grid-column: 2; color: var(--bios-gray); font-size: 16px; margin-top: -4px; }
.berr { color: #fc5454; min-height: 1.2em; margin: 4px 0 0; }
.bbtn {
  justify-self: start; margin-top: 6px; cursor: pointer;
  font: inherit; background: var(--bios-gray); color: #000; border: 0; padding: 4px 14px;
  box-shadow: inset -2px -2px 0 #545454, inset 2px 2px 0 #fcfcfc;
}
.bbtn:hover, .bbtn:focus-visible { background: var(--bios-red); color: var(--bios-white); }
.bbtn:disabled { opacity: .6; cursor: wait; }
.burnbox { text-align: center; padding: 10px; }
.burnbox .pt-case { width: 90px; height: 153px; margin: 6px auto; filter: grayscale(.5) brightness(.75); }
.burnbox .flame { width: 80px; margin: -110px auto 0; position: relative; }

.fpanel {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 14px; border-radius: 10px;
  background: linear-gradient(90deg, var(--beige-lo), var(--beige) 20%, var(--beige-hi) 50%, var(--beige) 80%, var(--beige-lo));
  color: var(--beige-ink);
  box-shadow: inset 0 -6px 0 var(--beige-deep), 0 20px 40px rgba(0, 0, 0, .4);
}
.fp-top { display: flex; justify-content: space-between; width: 100%; font-family: var(--f-px); font-size: 11px; }
.fp-brand { background: #2b3140; color: var(--phos); padding: 1px 6px; font-family: var(--f-crt); font-size: 18px; }
.fp-turbo { color: var(--beige-deep); align-self: center; }
.fp-lbl { margin: 8px 0 0; font-family: var(--f-px); font-size: 10px; text-align: center; letter-spacing: .05em; }
.fp-leds { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; background: #2b2a26; border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.fp-leds li { display: flex; align-items: center; gap: 10px; font-family: var(--f-px); font-size: 10px; color: #8a8270; }
.fp-leds i { width: 14px; height: 14px; border-radius: 50%; background: #4a1d20; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .5); transition: background .3s, box-shadow .3s; }
.fp-leds li.on i { background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 2px #fff inset; }
.fp-leds li.on span { color: #ffb3ba; }
.fp-leds li.auto i { background: #4a3a10; }
.fp-leds li.auto.on i { background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: blink .9s steps(2) infinite; }
.fp-leds li.auto.on span { color: var(--amber); }
.fp-note { margin: 0; font-size: 13px; line-height: 1.35; text-align: center; color: #4a4436; }
.fp-btns { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.fp-reset { font-family: var(--f-px); font-size: 9px; padding: 6px 7px; background: var(--beige-lo); border-radius: 3px; box-shadow: inset 0 -2px 0 var(--beige-deep); }
.fp-power { width: 42px; height: 42px; border-radius: 6px; background: var(--beige-lo); box-shadow: inset 0 -4px 0 var(--beige-deep), 0 0 0 3px #b0a68c; position: relative; }
.fp-power::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--phos); box-shadow: 0 0 8px var(--phos); }

/* ---------- chest ---------- */
.chest-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr) minmax(0, 1.25fr); gap: 26px; align-items: start; }
.psu-box {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px;
  padding: 18px; border-radius: 8px;
  background:
    radial-gradient(circle at 10px 10px, #8a8573 2px, transparent 2.5px) 0 0 / 100% 100% no-repeat,
    linear-gradient(160deg, #c9c3b0, #a9a392 60%, #8f8a7a);
  box-shadow: inset 0 0 0 2px #6f6a5c, inset 0 2px 0 rgba(255, 255, 255, .4), 0 22px 40px rgba(0, 0, 0, .45);
}
.psu-fan {
  grid-row: span 2; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden;
  background: #1b1e24; box-shadow: inset 0 0 0 6px #5c584c, inset 0 0 18px rgba(0, 0, 0, .8);
}
.psu-fan::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 9px, #77725f 9px 11px);
  -webkit-mask-image: radial-gradient(circle, #000 66%, transparent 67%); mask-image: radial-gradient(circle, #000 66%, transparent 67%);
}
.fan-blades {
  position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(from 0deg, #3b404a 0 40deg, transparent 40deg 72deg, #3b404a 72deg 112deg, transparent 112deg 144deg, #3b404a 144deg 184deg, transparent 184deg 216deg, #3b404a 216deg 256deg, transparent 256deg 288deg, #3b404a 288deg 328deg, transparent 328deg 360deg);
  animation: spin 1.6s linear infinite;
}
.fan-blades::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #5c584c; }
@keyframes spin { to { transform: rotate(360deg); } }
.chest.discharging .fan-blades { animation-duration: .25s; }
.psu-label { background: var(--beige-hi); color: var(--beige-ink); padding: 10px 12px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); min-width: 0; }
.psu-brand { margin: 0; font-family: var(--f-px); font-size: 12px; }
.psu-model { margin: 0 0 6px; font-size: 11px; color: #6c6556; }
.psu-big { margin: 0; font-family: var(--f-crt); font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: #14161c; overflow-wrap: anywhere; }
.psu-small { margin: 2px 0 0; font-size: 12px; color: #6c6556; }
.psu-tank {
  position: relative; height: 82px; border-radius: 4px; overflow: hidden;
  background: #0b120d; box-shadow: inset 0 0 0 3px #4d4a40, inset 0 0 14px rgba(0, 0, 0, .8);
}
.tank-fill {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 0;
  background: linear-gradient(180deg, #7dffaa, var(--phos-mid));
  box-shadow: 0 0 18px rgba(77, 255, 136, .6);
  transition: height 1s linear;
}
.tank-fill::before {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 8px;
  background: radial-gradient(6px 4px at 20% 50%, rgba(255, 255, 255, .7), transparent), radial-gradient(5px 3px at 70% 50%, rgba(255, 255, 255, .5), transparent);
  animation: wobble 2.2s ease-in-out infinite;
}
@keyframes wobble { 50% { transform: translateX(8px); } }
.tank-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(255, 255, 255, .18) 15px 16px); pointer-events: none; }
.psu-switch {
  position: absolute; right: -10px; top: 20px; display: flex; flex-direction: column;
  background: #14161c; border-radius: 3px; padding: 3px; gap: 2px;
}
.psu-switch span { width: 18px; height: 16px; display: grid; place-items: center; font-family: var(--f-px); font-size: 9px; background: var(--red); color: #fff; }
.psu-switch span + span { background: #3b404a; color: #777; }
.psu-timer { margin: 16px 0 10px; font-family: var(--f-crt); font-size: 22px; color: var(--ink-dim); }
.psu-timer b { color: var(--phos); font-weight: 400; }
.split { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; }
.sp { padding: 8px 8px 9px; border-radius: 3px; display: flex; flex-direction: column; gap: 1px; min-width: 0; color: #12151b; }
.sp b { font-family: var(--f-crt); font-size: 26px; line-height: 1; font-weight: 400; color: inherit; }
.sp span { font-size: 12px; font-weight: 600; line-height: 1.2; }
.sp em { font-style: normal; font-family: var(--f-crt); font-size: 17px; overflow-wrap: anywhere; }
.sp-burn { background: var(--red); }
.sp-rew { background: var(--phos); }
.sp-keep { background: var(--cyan); }

.shred-wrap { display: flex; flex-direction: column; align-items: center; }
.shredder { position: relative; width: 190px; height: 300px; }
.shred-coins { position: absolute; top: 0; left: 0; right: 0; height: 120px; overflow: hidden; }
.coin {
  position: absolute; top: -40px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--amber) 55%, #b37400);
  border: 2px solid #6b4a00; color: #4a3300; font-family: var(--f-px); font-size: 8px;
  animation: coinIn 2.6s cubic-bezier(.5, 0, .9, .6) infinite;
}
@keyframes coinIn { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(150px) rotate(200deg) scaleX(.6); opacity: 0; } }
.shred-head {
  position: absolute; top: 110px; left: 0; right: 0; height: 74px; z-index: 2;
  background: linear-gradient(180deg, #4a505c, #2b3140); border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 10px 20px rgba(0, 0, 0, .5);
}
.shred-slot { position: absolute; top: 10px; left: 14px; right: 14px; height: 8px; border-radius: 4px; background: #0a0c10; box-shadow: inset 0 2px 3px #000; }
.shred-led { position: absolute; right: 16px; bottom: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink .8s steps(2) infinite; }
.shred-name { position: absolute; left: 16px; bottom: 12px; font-family: var(--f-px); font-size: 10px; color: #a3abbd; }
.shred-out {
  position: absolute; top: 180px; left: 22px; right: 22px; height: 112px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent);
}
.shred-out::before {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background: repeating-linear-gradient(90deg, var(--amber) 0 7px, transparent 7px 11px);
  animation: strips 1.1s linear infinite;
}
@keyframes strips { to { transform: translateY(50%); } }
.shred-cap { margin: 8px 0 0; text-align: center; color: var(--ink-dim); font-size: 14px; max-width: 220px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcd {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; min-width: 0;
  background: #0b140e; box-shadow: inset 0 0 0 1px #1f3a28, inset 0 0 18px rgba(0, 0, 0, .7);
}
.lcd-k { font-size: 12px; color: #6f9a7d; font-weight: 500; }
.lcd-v { font-family: var(--f-crt); font-size: 28px; line-height: 1; color: var(--phos); text-shadow: 0 0 6px rgba(77, 255, 136, .45); overflow-wrap: anywhere; }
.lcd.amber .lcd-v { color: var(--amber); text-shadow: 0 0 6px rgba(255, 176, 0, .45); }
.install { grid-column: 1 / -1; padding: 12px; background: #c0c0c0; color: #000; box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #fff; border-radius: 2px; }
.install-t { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.install-t b { color: #000; font-family: var(--f-crt); font-size: 18px; font-weight: 400; }
.install-bar { height: 20px; padding: 2px; background: #fff; box-shadow: inset 2px 2px 0 #808080, inset -1px -1px 0 #dfdfdf; }
.install-bar i { display: block; height: 100%; width: 0; transition: width 1s; background: repeating-linear-gradient(90deg, #000088 0 10px, transparent 10px 12px); }
.install-s { margin: 6px 0 0; font-size: 12px; color: #333; }
.trade-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---------- shelf ---------- */
.shelf { position: relative; padding: 0 6px; }
.disks { list-style: none; margin: 0; padding: 26px 8px 0; display: flex; flex-wrap: wrap; gap: 26px 22px; align-items: flex-end; min-height: 200px; }
.disk { display: flex; flex-direction: column; gap: 10px; width: 156px; }
.disk .fdisk { width: 156px; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); transform: rotate(var(--rot, 0deg)); cursor: default; }
.disk:hover .fdisk, .disk:focus-within .fdisk { transform: translateY(-14px) rotate(-2deg); }
.disk .lab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 6px 4px; color: var(--beige-ink); }
.disk .lab img, .disk .lab canvas { width: 34px; height: 34px; flex: none; object-fit: cover; border: 1px solid #8f866e; background: #fff; }
.disk .lab .idn { image-rendering: pixelated; }
.disk.new .fdisk { animation: diskIn .9s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes diskIn { 0% { transform: translateY(-120px) rotate(-20deg); opacity: 0; } 100% { transform: rotate(var(--rot, 0deg)); opacity: 1; } }
.disk .lab .dn { font-weight: 700; font-size: 12px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disk .lab .ds { font-family: var(--f-crt); font-size: 16px; line-height: 1; color: #1d6b3d; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disk .lab::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 2px; background: repeating-linear-gradient(90deg, #c4553f 0 10px, transparent 10px 12px); opacity: .5; }
.disk .mig { position: absolute; top: 40%; right: -2px; transform: rotate(-12deg); font-family: var(--f-px); font-size: 8px; background: var(--phos); color: #0b1a10; padding: 2px 4px; z-index: 2; }
.disk-meta { font-family: var(--f-crt); font-size: 17px; line-height: 1.2; color: var(--ink-dim); }
.disk-meta b { color: var(--phos); font-weight: 400; }
.disk-btns { display: flex; gap: 8px; }
.disk-btns .key { flex: 1; min-height: 34px; font-size: 11px; padding: 0 8px 3px; }
.disk.empty .fdisk { background: transparent; border: 2px dashed #36405a; clip-path: none; box-shadow: none; }
.disk.empty .shut, .disk.empty .wp { display: none; }
.disk.empty .lab { background: transparent; border-top: 2px dashed #36405a; color: var(--ink-mute); font-family: var(--f-px); font-size: 9px; }
.plank {
  height: 22px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(180deg, #4a3c30, #3a2f27 40%, #2a221c);
  box-shadow: 0 14px 0 -6px #1a1512, 0 22px 30px rgba(0, 0, 0, .55);
  position: relative;
}
.plank::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -12px; height: 3px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan), 0 6px 30px rgba(51, 225, 255, .5); animation: rgbBg 9s linear infinite; }
.shelf-empty { color: var(--ink-dim); font-size: 15px; margin: 18px 0 0; }

/* ---------- seeds ---------- */
.seeds-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.term { background: #07100b; border-radius: 10px; border: 10px solid #252a33; box-shadow: 0 0 0 2px #14161c, 0 20px 40px rgba(0, 0, 0, .45); overflow: hidden; }
.term-bar { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; background: #11201a; font-family: var(--f-crt); font-size: 18px; color: var(--phos-mid); }
.term-scroll { max-height: 420px; overflow: auto; }
.ticks { width: 100%; border-collapse: collapse; font-family: var(--f-crt); font-size: 18px; color: var(--phos); }
.ticks th { position: sticky; top: 0; background: #07100b; text-align: left; font-weight: 400; color: var(--phos-mid); padding: 8px 12px 4px; border-bottom: 1px dashed var(--phos-dim); }
.ticks td { padding: 4px 12px; white-space: nowrap; }
.ticks tbody tr { cursor: pointer; }
.ticks tbody tr:hover, .ticks tbody tr.sel { background: var(--phos); color: #04140a; }
.ticks .seed { color: var(--amber); }
.ticks tr:hover .seed, .ticks tr.sel .seed { color: #04140a; }
.verify { background: var(--room-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px; min-width: 0; }
.vsteps { margin: 0 0 10px; padding-left: 20px; color: var(--ink-dim); font-size: 15px; }
.vsteps li { margin-bottom: 4px; }
.formula { margin: 0 0 16px; padding: 12px; background: #07100b; border-radius: 6px; color: var(--amber); font-family: var(--f-crt); font-size: 18px; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; }
.vform { display: grid; gap: 10px; }
.vform label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vform input, .vform select, .fld input {
  width: 100%; min-height: 42px; padding: 6px 10px; border-radius: 6px;
  background: #0b0f17; color: var(--phos); border: 1px solid #2b3347;
  font-family: var(--f-crt); font-size: 19px;
}
.vform input:focus, .vform select:focus, .fld input:focus { outline: 0; border-color: var(--phos); box-shadow: 0 0 0 3px rgba(77, 255, 136, .15); }
.vform .key { justify-self: start; }
.vout { margin-top: 14px; font-family: var(--f-crt); font-size: 17px; line-height: 1.3; color: var(--ink-dim); overflow-wrap: anywhere; }
.vout .row { margin: 0; }
.vout .row b { color: var(--beige); font-weight: 400; }
.vres { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 8px; background: #0b140e; border: 1px solid var(--phos-dim); }
.vres .part { width: 70px; height: 50px; flex: none; }
.vres .part > svg { width: 100%; height: 100%; }
.vres p { margin: 0; color: var(--phos); font-size: 22px; }
.vres small { display: block; color: var(--ink-dim); font-size: 16px; }
.vres.bad { border-color: #6b1d24; }
.vres.bad p { color: var(--red); }

/* ---------- FAQ manual ---------- */
.manual {
  position: relative; max-width: 900px; padding: 26px 26px 26px 54px;
  background: #ece5d2; color: #24211b; border-radius: 4px 10px 10px 4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4), inset 0 0 40px rgba(143, 134, 110, .25);
}
.manual::before {
  content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 18px;
  background: radial-gradient(circle at 9px 9px, #2a2620 4px, #bdb398 5px, transparent 6px) 0 0 / 18px 28px repeat-y;
}
.manual details { border-bottom: 1px dashed #b3a98f; }
.manual details:last-child { border-bottom: 0; }
.manual summary {
  list-style: none; cursor: pointer; padding: 14px 4px 14px 34px; position: relative;
  font-weight: 700; font-size: 17px; line-height: 1.3;
}
.manual summary::-webkit-details-marker { display: none; }
.manual summary::before {
  content: "+"; position: absolute; left: 0; top: 12px; width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--f-px); font-size: 13px; background: #2a2620; color: var(--beige-hi); border-radius: 3px; transition: transform .2s;
}
.manual details[open] summary::before { content: "-"; background: #1d6b3d; }
.manual summary:hover { color: #1d6b3d; }
.manual details p { margin: 0 0 16px 34px; color: #4a4436; font-size: 15.5px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 34px var(--gutter) 44px; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-px); font-size: 13px; color: var(--beige); }
.foot-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ca {
  display: inline-flex; align-items: stretch; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 0; overflow: hidden;
  background: #0b0f17; max-width: 100%;
}
.ca-k { padding: 8px 10px; background: var(--beige); color: var(--beige-ink); font-family: var(--f-px); font-size: 11px; display: grid; place-items: center; }
.ca-v { padding: 7px 12px; font-family: var(--f-crt); font-size: 19px; color: var(--phos); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.ca:hover .ca-v { background: #111824; }
.foot-fine { margin: 20px 0 0; color: var(--ink-mute); font-size: 13px; max-width: 760px; }

/* ---------- dialogs ---------- */
.dlg {
  border: 0; padding: 0; background: transparent; color: var(--bios-white);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
}
.dlg::backdrop { background: rgba(5, 7, 12, .75); }
.dlg-in {
  background: var(--bios); padding: 16px; border: 4px double var(--bios-white);
  font-family: var(--f-crt); font-size: 20px; box-shadow: 0 0 0 4px var(--bios), 0 30px 60px rgba(0, 0, 0, .6);
}
.dlg-t { margin: 0 0 12px; text-align: center; background: var(--bios-gray); color: #000; }
.dlg-l { margin: 10px 0 6px; color: var(--bios-yellow); }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; cursor: pointer;
  background: #000080; border: 1px solid #5454fc; color: var(--bios-white); font-family: var(--f-crt); font-size: 16px;
}
.pick button .part { width: 100%; height: 38px; position: relative; }
.pick button .part > svg { width: 100%; height: 100%; }
.pick button[aria-checked="true"] { background: var(--bios-red); border-color: var(--bios-yellow); }
.pick button:disabled { opacity: .35; cursor: not-allowed; }
.dlg-msg { min-height: 1.3em; margin: 10px 0 0; color: var(--bios-cyan); }
.dlg-msg.err { color: #fc5454; }
.dlg-btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.seg { display: flex; gap: 0; margin-bottom: 12px; }
.seg-b { flex: 1; cursor: pointer; padding: 6px; background: #000080; color: var(--bios-white); border: 1px solid #5454fc; font-family: var(--f-crt); font-size: 20px; }
.seg-b.on { background: var(--bios-gray); color: #000; }
.fld { display: grid; gap: 6px; color: var(--bios-yellow); }
.fld input { background: #000060; color: var(--bios-white); border-color: #5454fc; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast {
  pointer-events: auto; font-family: var(--f-crt); font-size: 19px; line-height: 1.2;
  background: var(--bios-gray); color: #000; padding: 8px 12px; max-width: 380px;
  box-shadow: inset -2px -2px 0 #545454, inset 2px 2px 0 #fcfcfc, 0 10px 20px rgba(0, 0, 0, .5);
  animation: toastIn .25s ease-out;
  overflow-wrap: anywhere;
}
.toast.err { background: var(--bios-red); color: #fff; box-shadow: inset -2px -2px 0 #540000, inset 2px 2px 0 #fc5454, 0 10px 20px rgba(0, 0, 0, .5); }
.toast.ok { background: var(--phos); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 720px; }
  .chest-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bios-wrap { grid-template-columns: minmax(0, 1fr); }
  .fpanel { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .fp-top { width: auto; flex-direction: column; gap: 6px; }
  .fp-leds { flex-direction: row; }
  .fp-leds li { flex-direction: column; gap: 4px; }
  .fp-lbl { width: 100%; order: -1; margin: 0; }
  .fp-note { width: 100%; }
  .fp-btns { margin-top: 0; }
  .seeds-grid { grid-template-columns: minmax(0, 1fr); }
  .p1, .p2, .p3, .p4 { grid-column: span 6; }
  .p5 { grid-column: span 12; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  main > section { padding-top: 56px; padding-bottom: 56px; }
  .bios-body { grid-template-columns: minmax(0, 1fr); }
  .bios-side { border-left: 0; border-top: 4px double var(--bios-white); }
  .chest-grid { grid-template-columns: minmax(0, 1fr); }
  .shredder { transform: scale(.85); margin: -20px 0; }
  .bfield { grid-template-columns: 1fr; gap: 2px; }
  .bfield small { grid-column: 1; }
  .ticks .c-slot { display: none; }
}
@media (max-width: 600px) {
  .comic { padding: 12px; gap: 16px; }
  .p1, .p2, .p3, .p4, .p5 { grid-column: span 12; }
  .p5-split { grid-template-columns: minmax(0, 1fr); }
  .p5-yes { padding-right: 0; border-right: 0; border-bottom: 3px solid #14161c; padding-bottom: 14px; margin-bottom: 14px; }
  .p5-no { padding-left: 0; }
  .brand-txt { font-size: 12px; }
  .preview > span:not(.preview-dot) { display: none; }
  .crt-bezel { padding: 12px 12px 0; border-radius: 16px 16px 10px 10px; }
  .crt-screen { padding: 22px 18px 18px; min-height: 0; border-radius: 18px / 14px; }
  .post { font-size: 15.5px; }
  .post-logo { display: none; }
  .bin { padding: 14px; }
  .idea { grid-template-columns: 76px minmax(0, 1fr); }
  .idea-img { width: 76px; height: 76px; }
  .idea-name { font-size: 24px; }
  .bios { font-size: 18px; padding: 6px; }
  .bios-main, .bios-side { padding: 12px 10px; }
  .disks { gap: 22px 14px; justify-content: center; }
  .disk { width: calc(50% - 7px); }
  .disk .fdisk { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .lcd-v { font-size: 24px; }
  .manual { padding: 16px 14px 16px 40px; }
  .manual::before { left: 8px; }
  .manual summary { font-size: 15.5px; padding-left: 30px; }
  .manual details p { margin-left: 0; }
}
@media (max-width: 400px) {
  .top { gap: 8px; }
  .brand-txt { display: none; }
  .btn-power { padding-right: 10px; }
  .key { padding-inline: 12px; font-size: 13px; }
  .split { grid-template-columns: 1fr 1fr; }
  .sp-burn { grid-column: 1 / -1; }
}

/* =====================================================================
   OS 96: pages, windows, taskbar, feed, docs diagrams (tabs.js)
   ===================================================================== */
html { background: var(--room); }
body { padding-bottom: 46px; min-height: 100vh; }
.nav a[aria-current="page"] { color: var(--phos); background: rgba(77, 255, 136, .08); box-shadow: inset 0 -2px 0 var(--phos); }
.more { color: var(--cyan); text-decoration: none; white-space: nowrap; font-weight: 600; }
.more:hover { text-decoration: underline; }
.disk-link { display: block; text-decoration: none; color: inherit; border-radius: 4px; }
.disk-link:focus-visible .fdisk, .disk-link:hover .fdisk { transform: translateY(-14px) rotate(-2deg); }
.dim { color: var(--ink-mute); }
code { font-family: var(--f-crt); font-size: 1.1em; color: var(--amber); overflow-wrap: anywhere; }

/* pages: hide the desk while a window is open */
body.on-page main > section:not(.page) { display: none; }
main > section.page { padding: 28px var(--gutter) 48px; }

/* ---------- window chrome ---------- */
.win {
  position: relative; max-width: 100%;
  background: var(--beige); color: var(--beige-ink); padding: 4px; border-radius: 4px;
  box-shadow: inset -2px -2px 0 var(--beige-deep), inset 2px 2px 0 var(--beige-hi), 0 0 0 1px #14161c, 0 30px 60px rgba(0, 0, 0, .5);
}
.win.max { margin-inline: calc(-1 * var(--gutter) + 4px); }
.win-bar {
  display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 3px 3px 7px; border-radius: 2px;
  background: linear-gradient(90deg, #0b2a63, #1d5fd1 70%, #3b8bff); color: #fff;
}
.win-ico, .task-i, .sm-i, .start-logo { display: inline-block; flex: none; }
.win-ico { width: 18px; height: 18px; }
.win-ico svg, .task-i svg, .sm-i svg, .dico-i svg, .start-logo svg { width: 100%; height: 100%; }
.win-t { flex: 1; min-width: 0; margin: 0; font-family: var(--f-px); font-size: 12px; font-weight: 400; letter-spacing: .03em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.win-btns { display: flex; gap: 2px; flex: none; }
.wb {
  width: 24px; height: 21px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--beige); color: #14161c; border: 0; text-decoration: none;
  box-shadow: inset -2px -2px 0 var(--beige-deep), inset 2px 2px 0 var(--beige-hi);
  font-family: var(--f-px); font-size: 11px; line-height: 1;
}
.wb:active { box-shadow: inset 2px 2px 0 var(--beige-deep), inset -2px -2px 0 var(--beige-hi); }
span.wb { cursor: default; }
.win-menu { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px 2px 2px; font-size: 14px; }
.win-menu > * { padding: 2px 9px; color: var(--beige-ink); text-decoration: none; background: none; border: 0; font: inherit; font-size: 14px; cursor: default; border-radius: 0; }
.win-menu a, .win-menu button { cursor: pointer; }
.win-menu a:hover, .win-menu button:hover { background: #0b2a63; color: #fff; }
.win-tool { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; padding: 8px 6px 10px; }
.tool-f { display: grid; gap: 2px; font-size: 12px; font-weight: 600; color: var(--beige-ink); text-transform: uppercase; letter-spacing: .04em; }
.tool-f input, .tool-f select {
  min-height: 34px; padding: 3px 8px; font-family: var(--f-crt); font-size: 18px; color: #14161c; background: #fff; border: 0; border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--beige-deep), inset -2px -2px 0 var(--beige-hi);
}
.tool-f input { width: min(280px, 70vw); }
.win-body {
  position: relative; margin-top: 4px; padding: 22px; min-height: 260px; min-width: 0;
  background: var(--room-2); color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--beige-deep), inset -2px -2px 0 var(--beige-hi), inset 3px 3px 0 #14161c;
}
.win-status { display: flex; gap: 4px; margin-top: 4px; font-family: var(--f-crt); font-size: 16px; line-height: 1.25; color: var(--beige-ink); }
.win-status > span { flex: 1; min-width: 0; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 1px 1px 0 var(--beige-deep), inset -1px -1px 0 var(--beige-hi); }
.win-status > .ws-src { flex: 0 1 auto; color: #5a5341; }

/* property-sheet tabs */
.ptabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 6px 0; }
.ptab {
  position: relative; top: 2px; cursor: pointer; padding: 6px 12px 5px; border: 0; border-radius: 4px 4px 0 0;
  background: var(--beige-lo); color: var(--beige-ink); font-family: var(--f-px); font-size: 10px; letter-spacing: .03em;
  box-shadow: inset 2px 2px 0 var(--beige-hi), inset -2px 0 0 var(--beige-deep);
}
.ptab[aria-selected="true"] { top: 0; padding-bottom: 8px; background: var(--beige); z-index: 1; }
.ptab:focus-visible { outline-offset: -4px; }
.ptabs.inner { padding: 0; margin: 14px 0 0; }
.ptabs.inner .ptab { background: #2b3140; color: var(--ink-dim); box-shadow: inset 1px 1px 0 #3a4256; }
.ptabs.inner .ptab[aria-selected="true"] { background: #0a1a12; color: var(--phos); }

/* ---------- desktop icons ---------- */
main > section.desk-icons { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
.dico { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; padding: 8px 4px 6px; text-decoration: none; color: var(--ink); border: 1px dotted transparent; }
.dico-i { width: 44px; height: 44px; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .45)); transition: transform .15s; }
.dico-l { font-family: var(--f-px); font-size: 10px; line-height: 1.3; text-align: center; padding: 1px 3px; color: #fff; text-shadow: 1px 1px 0 #000; }
.dico:hover .dico-i { transform: translateY(-3px); }
.dico:focus-visible { outline: 0; border-color: var(--beige); }
.dico:focus-visible .dico-l, .dico:active .dico-l { background: #0b2a63; }
.dico:focus-visible .dico-i, .dico:active .dico-i { filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .45)) sepia(1) hue-rotate(180deg) saturate(3) brightness(.8); }

/* ---------- live: scheduler + feed ---------- */
main > section.live { padding-top: 28px; }
.live-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 22px; align-items: start; }
.sched-body { display: grid; gap: 12px; padding: 16px; min-height: 0; background: #0b0f17; }
.ne { padding: 12px 14px 12px; border-radius: 4px; background: #07100b; box-shadow: inset 0 0 0 1px #1f3a28, inset 0 0 18px rgba(0, 0, 0, .7); }
.ne-h { margin: 0; font-family: var(--f-px); font-size: 10px; letter-spacing: .06em; color: #6f9a7d; }
.ne-v { margin: 2px 0 6px; font-family: var(--f-crt); font-size: 46px; line-height: 1; color: var(--phos); text-shadow: 0 0 8px rgba(77, 255, 136, .55); letter-spacing: .04em; }
.ne-chest .ne-v { color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 0, .5); }
.ne-vote .ne-v { color: var(--cyan); text-shadow: 0 0 8px rgba(51, 225, 255, .5); }
.ne-bar { height: 10px; padding: 2px; background: #0b140e; box-shadow: inset 0 0 0 1px #1f3a28; }
.ne-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--phos) 0 6px, transparent 6px 8px); transition: width 1s linear; }
.ne-chest .ne-bar i { background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 8px); }
.ne-vote .ne-bar i { background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 8px); }
.ne-s { margin: 6px 0 0; font-family: var(--f-crt); font-size: 17px; line-height: 1.2; color: var(--ink-dim); overflow-wrap: anywhere; }
.ne.idle .ne-v { color: #2e5a3d; text-shadow: none; }
.ne.soon .ne-v { animation: blink 1s steps(2) infinite; }
.feed-led { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-px); font-size: 9px; padding: 3px 7px; background: rgba(0, 0, 0, .35); border-radius: 2px; flex: none; }
.feed-led i, .tray-net i { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.feed-led.live i, .tray-net.live i { background: var(--phos); box-shadow: 0 0 8px var(--phos); animation: blink 1.6s steps(2) infinite; }
.feed-led.poll i, .tray-net.poll i { background: var(--amber); }
.feed-led.preview i, .tray-net.preview i { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: blink 1s steps(2) infinite; }
.feedwin .ptabs .ptab { font-size: 9px; padding: 5px 8px 4px; }
.feedwin .ptabs .ptab[aria-selected="true"] { padding-bottom: 7px; }
.feed-body { padding: 0; min-height: 0; background: #07100b; }
.feed { list-style: none; margin: 0; padding: 6px 0; max-height: 470px; overflow: auto; font-family: var(--f-crt); font-size: 18px; line-height: 1.25; color: var(--phos); }
.fe { display: grid; grid-template-columns: 46px 62px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 4px 12px; border-bottom: 1px dashed #13281b; }
.fe:hover { background: rgba(77, 255, 136, .05); }
.fe.new { animation: feNew 1.4s ease-out; }
@keyframes feNew { 0% { background: rgba(77, 255, 136, .3); } 100% { background: transparent; } }
.fe-t { color: var(--phos-mid); }
.fe-k { font-family: var(--f-px); font-size: 9px; text-align: center; padding: 2px 0 1px; border-radius: 2px; color: #08120c; background: var(--phos); align-self: center; }
.fe-swap .fe-k { background: var(--amber); }
.fe-vote .fe-k { background: var(--cyan); }
.fe-round .fe-k { background: var(--yellow); }
.fe-launch .fe-k { background: #c47bff; }
.fe-chest .fe-k { background: var(--red); color: #fff; }
.fe-x { color: #c9f7d8; overflow-wrap: anywhere; }
.fe-m { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.fe-l, .tlink { color: var(--cyan); text-decoration: none; }
.fe-l:hover, .tlink:hover { text-decoration: underline; }
.fe-empty { padding: 14px; color: var(--ink-mute); }
.wbtn { cursor: pointer; padding: 0 4px; border: 0; background: transparent; color: var(--ink-dim); font-family: var(--f-crt); font-size: 18px; border-bottom: 1px dotted #3a4256; }
.wbtn:hover { color: var(--beige-hi); background: rgba(255, 255, 255, .06); }
.wbtn.me { color: var(--amber); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); background: #0b0f17; }
.tbl { width: 100%; border-collapse: collapse; font-family: var(--f-crt); font-size: 18px; color: var(--ink); }
.tbl th { text-align: left; font-family: var(--f-px); font-size: 9px; font-weight: 400; letter-spacing: .05em; color: var(--phos-mid); padding: 10px 12px 7px; border-bottom: 1px dashed var(--phos-dim); background: #0a1310; white-space: nowrap; }
.tbl td { padding: 6px 12px; border-bottom: 1px solid #161d2a; vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:hover { background: rgba(51, 225, 255, .05); }
.tbl tr.me { background: rgba(255, 176, 0, .08); }
.tbl .c-rank { color: var(--phos); }
.tbl .c-num { text-align: right; color: var(--beige-hi); }
.tbl-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-mute); }
.tbl-tool { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: 12px; }
.tbl-tool .tool-f { color: var(--ink-dim); }
.tbl-sum { font-family: var(--f-crt); font-size: 18px; color: var(--ink-dim); }
.empty-box { margin: 0; padding: 28px 16px; text-align: center; color: var(--ink-mute); border: 1px dashed #2b3347; list-style: none; }
.wcell { display: inline-flex; align-items: center; gap: 6px; }
.you { font-family: var(--f-px); font-size: 8px; background: var(--amber); color: #1d1a12; padding: 2px 4px 1px; }
.pcs { display: inline-flex; gap: 3px; }
.pc { position: relative; width: 30px; height: 24px; display: grid; place-items: center; font-family: var(--f-px); font-size: 8px; color: #3a4256; background: #11151f; border: 1px solid #232b3c; }
.pc.on { color: #08120c; background: var(--glow, var(--phos)); border-color: transparent; box-shadow: 0 0 8px var(--glow, var(--phos)); }
.pc sup { position: absolute; top: -7px; right: -5px; font-family: var(--f-crt); font-size: 14px; line-height: 1; padding: 0 2px; background: var(--amber); color: #1d1a12; }
.dist { display: inline-flex; align-items: center; gap: 2px; }
.dist i { width: 8px; height: 14px; background: #1a2232; }
.dist i.on { background: var(--phos); }
.dist b { margin-left: 6px; font-weight: 400; color: var(--beige-hi); }
.hbar, .vmini { display: inline-flex; align-items: center; gap: 8px; }
.hbar i, .vm-t { display: block; height: 10px; }
.hbar { width: 140px; }
.hbar i { background: var(--phos); max-width: 90px; }
.hbar b { font-weight: 400; color: var(--beige-hi); }
.vm-t { width: 60px; background: #fc5454; }
.vm-t i { display: block; height: 100%; background: #54fc54; }
.vm-n { color: var(--ink-dim); }
.st { display: inline-block; font-family: var(--f-px); font-size: 9px; padding: 3px 6px 2px; border-radius: 2px; background: #2b3140; color: var(--ink-dim); }
.st-launched, .st-paid { background: var(--phos-dim); color: var(--phos); }
.st-claimable { background: var(--amber); color: #1d1a12; }
.st-rejected { background: #4a1d20; color: #ff8a95; }
.st-forfeit { background: #4a3a10; color: var(--amber); }
.st-expired { background: #232b3c; color: var(--ink-mute); }
.st-voting, .st-proposing, .st-launching { background: #0b3550; color: var(--cyan); animation: blink 1.4s steps(2) infinite; }
.icell { display: inline-flex; align-items: center; gap: 8px; }
.ic-img { width: 26px; height: 26px; object-fit: cover; border: 1px solid #3a4256; background: #fff; }
canvas.ic-img { image-rendering: pixelated; }
.ic-n small { color: var(--amber); font-size: 16px; }
.tag { display: inline-block; margin-left: 6px; font-family: var(--f-px); font-size: 8px; padding: 2px 5px 1px; background: #2b3140; color: var(--beige); vertical-align: middle; letter-spacing: .04em; }
.tag-ok { background: var(--phos-dim); color: var(--phos); }
.tag-cv { background: #4a3a10; color: var(--amber); }

/* podium */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 0 0 22px; flex-wrap: nowrap; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; min-width: 0; }
.pod-av { width: 46px; height: 46px; image-rendering: pixelated; border: 2px solid var(--beige); }
.pod-s { margin: 0; font-family: var(--f-crt); font-size: 17px; color: var(--ink-dim); }
.pod-b { width: 100%; display: grid; place-items: center; background: linear-gradient(180deg, var(--beige-hi), var(--beige) 30%, var(--beige-lo)); box-shadow: inset 0 -5px 0 var(--beige-deep), 0 10px 20px rgba(0, 0, 0, .4); color: var(--beige-ink); font-family: var(--f-px); font-size: 22px; border-radius: 3px 3px 0 0; }
.pod-1 .pod-b { height: 92px; color: #8a6400; }
.pod-2 .pod-b { height: 66px; }
.pod-3 .pod-b { height: 48px; }
.pod-1 .pod-av { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255, 210, 63, .6); }
.pod.me .pod-s { color: var(--amber); }

/* ---------- token catalog ---------- */
.tk-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.tk-totals .lcd-v { font-size: 24px; }
.tk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tk-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; height: 100%; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #161c2a, #10141e); border: 1px solid #232b3c; border-radius: 6px; transition: transform .15s, border-color .15s; }
.tk-card:hover, .tk-card:focus-visible { transform: translateY(-3px); border-color: var(--phos-mid); }
.tk-card:hover .fdisk { transform: rotate(-4deg) translateY(-4px); }
.tk-card.main { border-color: #2f5a3f; background: linear-gradient(180deg, #13241b, #0e1712); }
.tk-art .fdisk { width: 96px; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.fdisk .lab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--beige-ink); }
.tk-art .lab img, .tk-art .lab canvas, .tp-art .lab img, .tp-art .lab canvas { width: 30px; height: 30px; object-fit: cover; border: 1px solid #8f866e; background: #fff; }
.fdisk .lab canvas { image-rendering: pixelated; }
.fdisk .lab .ds { font-family: var(--f-crt); font-size: 15px; line-height: 1; color: #1d6b3d; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-info { min-width: 0; }
.tk-n { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--beige-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-s { margin: 2px 0 8px; font-family: var(--f-crt); font-size: 19px; color: var(--amber); }
.tk-s .tag:first-of-type { margin-left: 8px; }
.kv { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-family: var(--f-crt); font-size: 17px; line-height: 1.3; }
.kv-k { color: var(--ink-mute); }
.kv-v { color: var(--phos); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.mbar { height: 8px; margin: 8px 0 6px; padding: 1px; background: #fff; box-shadow: inset 1px 1px 0 #808080; }
.mbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #000088 0 6px, transparent 6px 7px); }
.mbar.done i { background: repeating-linear-gradient(90deg, #1d6b3d 0 6px, transparent 6px 7px); }
.tk-f { margin: 0; font-family: var(--f-crt); font-size: 16px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- token page ---------- */
.tp-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; margin-bottom: 24px; }
.tp-art { position: relative; }
.tp-img { width: 180px; height: 180px; padding: 8px; background: var(--beige); box-shadow: inset -3px -3px 0 var(--beige-deep), inset 3px 3px 0 var(--beige-hi), 0 14px 30px rgba(0, 0, 0, .45); }
.tp-pic { width: 100%; height: 100%; object-fit: cover; background: #fff; display: block; }
canvas.tp-pic { image-rendering: pixelated; }
.tp-art .fdisk.big { position: absolute; left: 130px; top: 110px; width: 84px; transform: rotate(8deg); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
.tp-n { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1; color: var(--beige-hi); overflow-wrap: anywhere; }
.tp-s { margin: 6px 0 12px; font-family: var(--f-crt); font-size: 24px; color: var(--amber); }
.tp-d { margin: 0 0 14px; color: var(--ink-dim); font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; }
.tp-ca { display: flex; max-width: 100%; margin-bottom: 10px; cursor: default; }
.tp-ca .ca-v { flex: 1; min-width: 0; max-width: none; }
.tp-copy { cursor: pointer; border: 0; padding: 4px 12px; background: #2b3140; color: var(--beige); font-family: var(--f-px); font-size: 10px; }
.tp-copy:hover { background: var(--phos); color: #08120c; }
.tp-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.tp-links a { color: var(--cyan); text-decoration: none; }
.tp-links a:hover { text-decoration: underline; }
.tp-meta { display: grid; gap: 2px; max-width: 420px; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fee-mini { grid-column: 1 / -1; }
.fm-t { margin: 4px 0 6px; font-family: var(--f-px); font-size: 10px; color: var(--ink-mute); }
.fm-bar { display: flex; gap: 2px; }
.fm-bar span { flex-basis: 0; min-width: 0; padding: 6px 6px 5px; font-family: var(--f-crt); font-size: 15px; line-height: 1.1; color: #0b0f17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-gray { background: var(--bios-gray); } .fm-cyan { background: var(--cyan); } .fm-amber { background: var(--amber); } .fm-phos { background: var(--phos); }
.tradebox { background: var(--bios); padding: 14px; border: 4px double var(--bios-white); font-family: var(--f-crt); font-size: 20px; color: var(--bios-white); box-shadow: 0 0 0 4px var(--bios), 0 20px 40px rgba(0, 0, 0, .5); }
.tradebox .fld + .fld { margin-top: 10px; }
.tradebox select { min-height: 40px; background: #000060; color: var(--bios-white); border: 1px solid #5454fc; font-family: var(--f-crt); font-size: 19px; padding: 4px 8px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; min-height: 4px; }
.qb { cursor: pointer; padding: 2px 10px; background: var(--bios-gray); color: #000; border: 0; font-family: var(--f-crt); font-size: 17px; box-shadow: inset -2px -2px 0 #545454, inset 2px 2px 0 #fcfcfc; }
.qb:hover { background: var(--bios-yellow); }
.nodisk { max-width: 560px; margin: 30px auto; padding: 22px; text-align: center; background: var(--bios); color: var(--bios-white); font-family: var(--f-crt); font-size: 20px; border: 4px double var(--bios-white); }
.nd-t { margin: 0 0 10px; color: var(--bios-yellow); }
.nd-m { display: block; margin: 10px 0; color: var(--bios-cyan); overflow-wrap: anywhere; }
.nd-b { margin: 14px 0 0; }

/* ---------- profile ---------- */
.me-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; margin-bottom: 26px; }
.idcard { border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, var(--beige-hi), var(--beige) 50%, var(--beige-lo)); color: var(--beige-ink); box-shadow: 0 16px 30px rgba(0, 0, 0, .45), inset 0 -4px 0 var(--beige-deep); }
.id-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: linear-gradient(90deg, #0b2a63, #1d5fd1); color: #fff; font-family: var(--f-px); font-size: 11px; }
.id-chip { width: 30px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #f5d36b, #b38a1f); box-shadow: inset 0 0 0 1px #7a5a10; }
.id-b { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; padding: 16px 14px 18px; align-items: center; }
.id-av { width: 74px; height: 74px; image-rendering: pixelated; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--beige-deep); }
.id-w { margin: 0 0 8px; font-family: var(--f-crt); font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; color: #14161c; }
.me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.me-stats .lcd-v { font-size: 24px; }
.me-sec { margin-top: 26px; }
.me-bin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.me-note { margin: 10px 0; font-family: var(--f-crt); font-size: 18px; color: var(--ink-dim); }
.pname { color: var(--glow, var(--phos)); text-shadow: 0 0 6px var(--glow, transparent); }
.rw-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }

/* ---------- docs ---------- */
.docs { padding: 26px clamp(14px, 3vw, 34px) 34px; }
.doc { max-width: 980px; margin: 0 auto 46px; scroll-margin-top: 80px; }
.doc:last-child { margin-bottom: 0; }
.doc-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; color: var(--beige-hi); }
.doc-h.sm { font-size: 20px; margin: 0 0 12px; }
.doc-n { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; background: var(--beige); color: var(--beige-ink); font-family: var(--f-px); font-size: 14px; box-shadow: inset 0 -4px 0 var(--beige-deep); border-radius: 5px; flex: none; }
.doc-p { margin: 0 0 12px; color: var(--ink-dim); font-size: 16px; max-width: 72ch; }
.doc-p.dim { font-size: 14px; color: var(--ink-mute); margin-top: 14px; }
.diag { margin: 14px 0; overflow-x: auto; border-radius: 10px; }
.dg { width: 100%; height: auto; min-width: 620px; }
.dg-sm { min-width: 0; }
.pcb { fill: #0a1a12; }
.vias circle { fill: #0a1a12; stroke: #c9a646; stroke-width: 3; }
.traces path, .arrows path { fill: none; stroke-linejoin: round; }
.traces path { stroke: #1f6b45; stroke-width: 9; stroke-linecap: round; }
.flows path { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 18; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.f-amber { stroke: var(--amber); } .f-gray { stroke: #c9cdd3; } .f-cyan { stroke: var(--cyan); } .f-phos { stroke: var(--phos); } .f-red { stroke: var(--red); }
.chip-b { fill: #14161c; stroke: #2b3140; stroke-width: 2; }
.pins { stroke: #c9cdd3; stroke-width: 6; stroke-dasharray: 4 7; fill: none; }
.chip .ct { font-family: var(--f-px); font-size: 14px; fill: var(--beige-hi); text-anchor: middle; }
.chip .cs { font-family: var(--f-crt); font-size: 19px; fill: var(--phos); text-anchor: middle; }
.c-amber .chip-b { stroke: var(--amber); } .c-amber .cs { fill: var(--amber); }
.c-gray .chip-b { stroke: #8c8c90; } .c-gray .cs { fill: #c9cdd3; }
.c-cyan .chip-b { stroke: var(--cyan); } .c-cyan .cs { fill: var(--cyan); }
.c-phos .chip-b { stroke: var(--phos); }
.c-red .chip-b { stroke: var(--red); } .c-red .cs { fill: #ff8a95; }
.dg-note { font-family: var(--f-crt); font-size: 18px; fill: #6f9a7d; }
.dg-lbl { font-family: var(--f-px); font-size: 12px; fill: var(--beige); }
.dg-tick { font-family: var(--f-crt); font-size: 17px; fill: #6f9a7d; }
.psu-b { fill: #b5ae9a; stroke: #6f6a5c; stroke-width: 2; }
.psu-l { fill: var(--beige-hi); }
.pt1 { font-family: var(--f-px); font-size: 15px; fill: #14161c; text-anchor: middle; }
.pt2 { font-family: var(--f-crt); font-size: 17px; fill: #6c6556; text-anchor: middle; }
.fan-o { fill: #1b1e24; stroke: #5c584c; stroke-width: 4; }
.fan-bl { fill: #3b404a; }
.fan-r { transform-origin: center; transform-box: fill-box; animation: spin 1.6s linear infinite; }
.fan-c { fill: #5c584c; }
.mig-track { fill: #fff; stroke: #808080; stroke-width: 2; }
.mig-fill { fill: #000088; transition: width 1s; }
.mig-ticks path { stroke: #6f9a7d; stroke-width: 2; }
.lock-s { fill: none; stroke: var(--amber); stroke-width: 5; }
.lock-b { fill: var(--amber); } .lock-k { fill: #3b2a00; }
.dg-bios .bios-bg { fill: var(--bios); }
.arrows path { stroke: #fcfcfc; stroke-width: 2.5; marker-end: url(#arV); }
.bx rect { fill: #0000a8; stroke: #fcfcfc; stroke-width: 3; }
.bx .bt { font-family: var(--f-px); font-size: 14px; fill: var(--bios-white); text-anchor: middle; }
.bx .bs { font-family: var(--f-crt); font-size: 18px; fill: var(--bios-cyan); text-anchor: middle; }
.bx-q rect { stroke: var(--bios-yellow); stroke-dasharray: 8 4; } .bx-q .bt { fill: var(--bios-yellow); }
.bx-ok rect { fill: #005400; stroke: #54fc54; } .bx-ok .bs { fill: #b8ffb8; }
.bx-no rect { fill: #6b0000; stroke: #fc5454; } .bx-no .bs { fill: #ffc0c0; }
.bx-amb rect { stroke: #fcb454; } .bx-amb .bt { fill: #fcd454; }
.bl { font-family: var(--f-crt); font-size: 18px; fill: var(--bios-yellow); }
.crt-bg { fill: #07100b; }
.ax { fill: none; stroke: #2fbf63; stroke-width: 2; }
.curve { fill: none; stroke: var(--phos); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(77, 255, 136, .6)); }
.lin { stroke: #3a4256; stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.dot { fill: var(--amber); }
.ax-t { font-family: var(--f-px); font-size: 9px; fill: #6f9a7d; }
.ax-a { font-family: var(--f-crt); font-size: 16px; fill: var(--amber); }
.legend { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; color: var(--ink-dim); font-size: 15px; }
.legend li { position: relative; padding-left: 24px; }
.legend i { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; }
.lg-gray { background: #c9cdd3; } .lg-cyan { background: var(--cyan); } .lg-amber { background: var(--amber); } .lg-phos { background: var(--phos); } .lg-red { background: var(--red); }
.calc { margin-top: 14px; padding: 14px; background: #0b0f17; border: 1px solid var(--line); border-radius: 8px; }
.fld2 { display: grid; gap: 4px; max-width: 300px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); }
.fld2 input { min-height: 40px; padding: 4px 10px; border-radius: 6px; background: #07100b; color: var(--phos); border: 1px solid #2b3347; font-family: var(--f-crt); font-size: 20px; }
.fld2 input:focus { outline: 0; border-color: var(--phos); box-shadow: 0 0 0 3px rgba(77, 255, 136, .15); }
.calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
#sqrtOut { display: block; }
.cc { padding: 10px 12px; background: #07100b; border-radius: 6px; box-shadow: inset 0 0 0 1px #1f3a28; }
.cc-h { margin: 0 0 6px; font-family: var(--f-px); font-size: 10px; color: var(--beige); }
.cc-r { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-family: var(--f-crt); font-size: 18px; color: var(--ink-dim); }
.cc-r b { font-weight: 400; color: var(--beige-hi); }
.cc-r.amber b { color: var(--amber); } .cc-r.gray b { color: #c9cdd3; } .cc-r.cyan b { color: var(--cyan); } .cc-r.phos b, .cc-r.phos { color: var(--phos); } .cc-r.red b { color: #ff8a95; }
#sqrtOut .cc-r { display: block; margin-bottom: 4px; }
.cc-r.dim { color: var(--ink-mute); font-size: 16px; }
.vote-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rules { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 15px; display: grid; gap: 6px; }
.sqrt-box .calc { margin-top: 10px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; background: #0b0f17; border: 1px solid var(--line); }
.spec th { width: 34%; text-align: left; padding: 9px 14px; color: var(--beige); font-weight: 600; border-bottom: 1px solid #161d2a; vertical-align: top; }
.spec td { padding: 9px 14px; color: var(--ink-dim); border-bottom: 1px solid #161d2a; }

/* ---------- fair ---------- */
.fair-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 18px; }
.f-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.f-out { margin: 0 0 24px; font-family: var(--f-crt); font-size: 17px; }
.f-out:empty { display: none; }
.f-steps { display: grid; gap: 10px; }
.f-step { padding: 10px 12px; background: #07100b; border-radius: 6px; box-shadow: inset 0 0 0 1px #1f3a28; min-width: 0; }
.f-k { margin: 0 0 6px; color: var(--phos-mid); }
.f-hex { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--f-crt); font-size: 17px; line-height: 1.2; color: var(--ink-dim); }
.h-seed { color: var(--amber); } .h-tick { color: var(--cyan); } .h-wal { color: var(--phos); }
.h-hi { color: #07100b; background: var(--amber); } .h-lo { color: var(--ink-mute); }
.f-lg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; color: var(--ink-mute); font-size: 16px; }
.f-err { margin: 6px 0; color: #ff8a95; }
.vres.big { margin-top: 12px; }
.vres.big .part { width: 96px; height: 70px; }
.vres.ok { border-color: var(--phos-mid); box-shadow: 0 0 20px rgba(77, 255, 136, .15); }
.f-dist { display: flex; gap: 10px; align-items: flex-end; height: 120px; padding: 10px 12px 0; background: #07100b; border-radius: 6px; max-width: 420px; }
.fd { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.fd i { width: 100%; max-height: 70%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.fd b { font-weight: 400; color: var(--beige-hi); font-size: 16px; }
.fd span { font-family: var(--f-px); font-size: 8px; color: var(--ink-mute); padding-bottom: 4px; }
.term-scroll.tall { max-height: 520px; }
.ticks.full .seed { white-space: normal; word-break: break-all; min-width: 260px; font-size: 16px; }
.ticks.full td a { color: inherit; }

/* ---------- security ---------- */
.pid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; background: #07100b; border: 1px solid #1f3a28; border-radius: 8px; }
.pid-k { font-family: var(--f-px); font-size: 10px; padding: 4px 7px; background: var(--beige); color: var(--beige-ink); }
.pid-v { flex: 1 1 320px; min-width: 0; font-size: 22px; color: var(--phos); overflow-wrap: anywhere; }
.pid-b { display: flex; gap: 8px; flex-wrap: wrap; }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcard { padding: 14px 16px; background: #0b0f17; border: 1px solid var(--line); border-radius: 8px; font-size: 14.5px; color: var(--ink-dim); }
.tcard ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 5px; }
.tc-h { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-mute); font-family: var(--f-crt); font-size: 18px; }
.tc-role { font-family: var(--f-px); font-size: 12px; padding: 4px 8px; background: var(--bios); color: var(--bios-yellow); }
.tc-l { margin: 8px 0 4px; font-family: var(--f-px); font-size: 10px; letter-spacing: .05em; }
.tc-l.ok { color: var(--phos); } .tc-l.no { color: #ff8a95; }
.sec-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- BSOD 404 ---------- */
main > section.page.bsod { max-width: none; min-height: calc(100vh - 110px); display: grid; place-items: center; background: #0000aa; margin: 0; padding: 40px var(--gutter); }
.bsod-in { max-width: 760px; font-family: var(--f-crt); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; color: #fff; }
.bsod-in p { margin: 0 0 22px; }
.bsod-t { text-align: center; }
.bsod-t span { background: #aaa; color: #0000aa; padding: 0 10px; }
.bsod-path { color: var(--bios-yellow); overflow-wrap: anywhere; }
.bsod-c { text-align: center; }
.bsod-cur { animation: blink 1s steps(2) infinite; }
.bsod-a { color: #fff; }
body.on-bsod .top, body.on-bsod .foot { display: none; }

/* ---------- toasts as system dialogs ---------- */
.toasts { bottom: 58px; }
.toast, .toast.ok, .toast.err {
  padding: 0; min-width: 240px; background: var(--beige); color: #14161c;
  box-shadow: inset -2px -2px 0 var(--beige-deep), inset 2px 2px 0 var(--beige-hi), 0 0 0 1px #14161c, 0 12px 24px rgba(0, 0, 0, .55);
}
.toast-bar { display: flex; align-items: center; gap: 6px; margin: 3px 3px 0; padding: 2px 2px 2px 5px; background: linear-gradient(90deg, #0b2a63, #1d5fd1); color: #fff; font-family: var(--f-px); font-size: 10px; }
.toast.ok .toast-bar { background: linear-gradient(90deg, #0e4d2a, #2fbf63); }
.toast.err .toast-bar { background: linear-gradient(90deg, #6b0000, #d0342c); }
.toast-ico { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0b2a63; font-family: var(--f-ui); font-weight: 700; font-size: 10px; line-height: 1; }
.toast.err .toast-ico { color: #a80000; }
.toast.ok .toast-ico { color: #1d6b3d; }
.toast-t { flex: 1; }
.toast-x { width: 18px; height: 15px; padding: 0; cursor: pointer; border: 0; background: var(--beige); color: #000; font-size: 13px; line-height: 1; box-shadow: inset -1px -1px 0 var(--beige-deep), inset 1px 1px 0 #fff; }
.toast-body { padding: 8px 12px 10px; }

/* ---------- taskbar ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: 44px;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 3px;
  background: var(--beige); color: var(--beige-ink);
  box-shadow: inset 0 2px 0 var(--beige-hi), 0 -1px 0 #14161c, 0 -8px 20px rgba(0, 0, 0, .35);
}
.start, .task, .tray, .tray-snd { box-shadow: inset -2px -2px 0 var(--beige-deep), inset 2px 2px 0 var(--beige-hi); }
.start {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 7px; cursor: pointer; flex: none;
  border: 0; background: var(--beige); font-family: var(--f-px); font-size: 12px; color: #14161c;
}
.start-logo { width: 20px; height: 20px; color: #1d6b3d; }
.start-logo svg { fill: currentColor; }
.start.on, .start:active, .task[aria-current="page"], .tray-snd.on { box-shadow: inset 2px 2px 0 var(--beige-deep), inset -2px -2px 0 var(--beige-hi); background: #e3dbc5 repeating-conic-gradient(rgba(0, 0, 0, .04) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.task { display: flex; align-items: center; gap: 6px; height: 34px; min-width: 0; max-width: 150px; flex: 1 1 0; padding: 0 9px; text-decoration: none; color: #14161c; font-size: 13px; font-weight: 600; background: var(--beige); }
.task-i { width: 18px; height: 18px; }
.task-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; flex: none; box-shadow: inset 1px 1px 0 var(--beige-deep), inset -1px -1px 0 var(--beige-hi); }
.tray-net { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-px); font-size: 9px; }
.tray-turbo { font-family: var(--f-px); font-size: 9px; padding: 2px 4px; color: #8f866e; background: #2b2a26; border-radius: 2px; }
.tray-turbo.on { color: var(--amber); text-shadow: 0 0 6px var(--amber); }
.tray-snd { width: 28px; height: 26px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; background: var(--beige); }
.tray-snd svg { width: 16px; height: 16px; fill: #14161c; }
.tray-snd .snd-w { display: none; }
.tray-snd.on .snd-w { display: inline; }
.tray-snd.on .snd-x { display: none; }
.tray-snd .snd-x { fill: #a80000; }
.tray-clock { font-family: var(--f-crt); font-size: 19px; min-width: 44px; text-align: right; }
.startmenu {
  position: fixed; left: 4px; bottom: 44px; z-index: 85; display: flex; width: 250px; max-height: calc(100vh - 60px); overflow: auto;
  background: var(--beige); color: #14161c; padding: 3px;
  box-shadow: inset -2px -2px 0 var(--beige-deep), inset 2px 2px 0 var(--beige-hi), 0 0 0 1px #14161c, 0 16px 30px rgba(0, 0, 0, .55);
}
.startmenu[hidden] { display: none !important; }
.sm-side { width: 30px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: linear-gradient(0deg, #0b2a63, #1d5fd1); }
.sm-side span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-px); font-size: 16px; color: var(--beige); letter-spacing: .08em; }
.sm-side b { color: var(--phos); font-weight: 400; }
.sm-list { list-style: none; margin: 0; padding: 2px 0; flex: 1; min-width: 0; }
.sm-list a, .sm-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; text-align: left; cursor: pointer;
  border: 0; background: none; color: #14161c; text-decoration: none; font: inherit; font-size: 14px; font-weight: 500;
}
.sm-list a:hover, .sm-list a:focus, .sm-list button:hover, .sm-list button:focus { background: #0b2a63; color: #fff; outline: 0; }
.sm-i { width: 20px; height: 20px; }
.sm-sep { height: 0; margin: 4px 6px; border-top: 1px solid var(--beige-deep); border-bottom: 1px solid var(--beige-hi); }
.shutdown { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; text-align: center; gap: 30px; background: #000; color: #ff8a1d; font-family: var(--f-px); font-size: clamp(18px, 4vw, 32px); line-height: 1.5; cursor: pointer; }
.shutdown[hidden] { display: none; }
.shutdown p { margin: 0; text-shadow: 0 0 10px rgba(255, 138, 29, .5); }
.shutdown small { font-family: var(--f-crt); font-size: 18px; color: #6d4a1d; }

/* ---------- turbo easter egg ---------- */
body.turbo .fp-turbo { color: var(--amber); text-shadow: 0 0 8px var(--amber); animation: blink .5s steps(2) infinite; }
body.turbo .fan-blades, body.turbo .fan-r { animation-duration: .18s; }
body.turbo .flows path { animation-duration: .35s; }
body.turbo .wall-led { animation: rgbFill .6s linear infinite; }
body.turbo .plank::after { animation-duration: 1.2s; }
body.turbo .cap { animation-duration: 1.2s; }
body.turbo .scene.powered .pt .rgb, body.turbo .scene.powered .pt .rgbs, body.turbo .scene.powered .pt .kw { animation-duration: .7s; }
body.turbo .win-bar { background: linear-gradient(90deg, #ff3b4e, #ffb000, #4dff88, #33e1ff, #3b7bff); background-size: 300% 100%; animation: turboBar 1.2s linear infinite; }
@keyframes turboBar { to { background-position: 300% 0; } }

/* ---------- responsive for the new parts ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tk-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .live-grid, .tp-grid, .me-top, .fair-grid, .vote-grid { grid-template-columns: minmax(0, 1fr); }
  .task-l { display: none; }
  .task { flex: 0 0 auto; padding: 0 8px; }
  .calc-out { grid-template-columns: minmax(0, 1fr); }
  .me-bin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tp-head { grid-template-columns: minmax(0, 1fr); }
  .tp-art { height: 190px; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .win-body { padding: 14px 12px; }
  .docs { padding: 18px 12px 24px; }
  .tk-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-stats, .rw-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-opt { display: none; }
  .fe { grid-template-columns: 42px 56px minmax(0, 1fr); }
  .fe-m { grid-column: 3; }
  .podium { gap: 6px; }
  .pod-s { font-size: 15px; }
  main > section.page { padding: 14px 8px 30px; }
  .win.max { margin-inline: 0; }
}
@media (max-width: 600px) {
  .tasks { display: none; }
  .tray { margin-left: auto; }
  .dico { width: 84px; }
  .ne-v { font-size: 40px; }
  .win-menu > * { padding: 2px 6px; }
  .tool-f input { width: 100%; }
  .win-tool > .tool-f:first-child { flex: 1 1 100%; }
  .tk-card { grid-template-columns: 80px minmax(0, 1fr); }
  .tk-art .fdisk { width: 80px; }
}
@media (max-width: 400px) {
  .tray-turbo { display: none; }
  .tray { gap: 6px; padding: 0 6px; }
  .start { padding: 0 9px 0 6px; }
  .fe { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 8px; }
  .fe-k { justify-self: start; padding: 2px 4px 1px; }
  .fe-x, .fe-m { grid-column: 1 / -1; }
  .pc { width: 24px; }
  .podium .pod { width: 33%; }
  .tk-totals .lcd-v { font-size: 20px; }
  .ptab { padding: 6px 8px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .flows path { stroke-dasharray: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain { animation: none; }
  .part.ghost { opacity: .8; }
}