/* Layout: en konsol ur 1979 års framtid som har gått i drift sedan 1987. Gulnad plast med
   repor och smuts, Dymo-etiketter, en lapp på tejp, gröna fosforskärmar med inbränd text.
   Heron är terminalen; varje kapitel är en ny panel i samma konsol. */

@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/vt323.woff2") format("woff2");
}
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/michroma.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/plex-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/marker.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Rummet */
  --void: #060807;
  --spill: rgba(90, 255, 140, 0.07);

  /* Fosforskärmen */
  --crt: #03100a;
  --ph: #9dffb0;
  --ph-hi: #dcffe2;
  --ph-dim: #4f9d62;
  --ph-glow: rgba(110, 255, 150, 0.42);
  --amber: #ffb22e;
  --amber-glow: rgba(255, 178, 46, 0.5);
  --alarm: #ff4a3d;

  /* Hårdvaran: olivgrå lackerad stålplåt, nött och smutsig efter år i drift */
  --plastic: #34362f;
  --plastic-hi: #464940;
  --plastic-lo: #1d1e1a;
  --plastic-ink: #cfc8b0;
  --grime: rgba(0, 0, 0, 0.55);
  --metal: rgba(196, 190, 174, 0.6);
  --key-ink: #2b2924;
  --gasket: #0c0c0a;
  --label: #e9e3d3;
  --label-soft: #b7b2a5;
  --hazard: #d9b236;
  --tape: #e6d7a4;
  --stamp: rgba(184, 38, 28, 0.82);

  /* Sladdarna i kopplingspanelen */
  --cable-1: #d9483b;
  --cable-2: #e8b923;
  --cable-3: #3faa5a;
  --cable-4: #3b7dd8;

  /* Texturer: brus, smuts, repor, damm och nötning */
  --tex-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 1.5 -0.66'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-grime: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.035 0 0 0 0 0.02 0 0 0 1.7 -0.8'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-rust: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='4' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.24 0 0 0 0 0.08 0 0 0 2.2 -1.42'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-drip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.32 0.006' numOctaves='2' seed='13' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.02 0 0 0 0 0.01 0 0 0 2.6 -1.4'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-grit: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='17' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.82 0 0 0 0 0.74 0 0 0 4 -2.95'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-chip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -5.5'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-scratch: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.5' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 0 0 0 3.2 -2.2'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-dust: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 8 -6.15'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tex-wear: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='70'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.06 0.2' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 6.7'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");

  --font-crt: "VT323", ui-monospace, Menlo, Consolas, monospace;
  --font-plate: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 700px at 50% 0%, var(--spill), transparent 70%),
    var(--void);
  color: var(--label);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ph); color: var(--crt); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
figure { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Tryck som nötts bort av fingrar och trasor */
.worn {
  -webkit-mask-image: var(--tex-wear);
  mask-image: var(--tex-wear);
  -webkit-mask-size: 180px 70px;
  mask-size: 180px 70px;
}

/* ---------- Hårdvarudelar ---------- */

.plastic {
  position: relative;
  border-radius: 18px;
  background:
    var(--tex-scratch) 0 0 / 520px 520px,
    var(--tex-grit) 0 0 / 240px 240px,
    var(--tex-grain) 0 0 / 220px 220px,
    var(--tex-drip) var(--gx, 0px) 0 / 480px 480px,
    var(--tex-rust) var(--gy, 0px) var(--gx, 0px) / 560px 560px,
    var(--tex-grime) var(--gx, 0px) var(--gy, 0px) / 640px 420px,
    radial-gradient(120% 95% at 50% 40%, transparent 50%, var(--grime) 100%),
    linear-gradient(180deg, var(--plastic-hi), var(--plastic) 30%, var(--plastic-lo));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 24px 70px rgba(0, 0, 0, 0.75);
  color: var(--plastic-ink);
}
/* Flagnad lack i kanterna, där den nakna metallen syns igenom */
.plastic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--metal);
  -webkit-mask-image: var(--tex-chip);
  mask-image: var(--tex-chip);
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
  pointer-events: none;
}

.plate {
  font-family: var(--font-plate);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plastic-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.screw {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b4afa1, #4a473f 72%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.12);
}
.screw::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.5);
  transform: rotate(var(--r, 35deg));
}
.screw--rust { background: radial-gradient(circle at 35% 35%, #b5835a, #5a3216 72%); }
.screw--tl.screw--rust::before,
.screw--tr.screw--rust::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 52px;
  border-radius: 3px 3px 50% 50%;
  background: linear-gradient(rgba(150, 72, 22, 0.6), rgba(150, 72, 22, 0));
  filter: blur(0.7px);
  pointer-events: none;
}
.screw--gone {
  background: radial-gradient(circle, #000 42%, #26241f 58%, transparent 72%);
  box-shadow: none;
}
.screw--gone::after { display: none; }
.screw--tl { top: 10px; left: 10px; }
.screw--tr { top: 10px; right: 10px; --r: -20deg; }
.screw--bl { bottom: 10px; left: 10px; --r: 70deg; }
.screw--br { bottom: 10px; right: 10px; --r: 10deg; }

.led {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gasket);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.led.blink { animation: ledblink 0.24s steps(1) infinite; }
@keyframes ledblink {
  0% { background: var(--c, var(--ph)); box-shadow: 0 0 6px var(--c, var(--ph)), 0 0 14px var(--c, var(--ph)); }
  50% { background: var(--gasket); box-shadow: none; }
}
.led.on {
  background: var(--c, var(--ph));
  box-shadow: 0 0 6px var(--c, var(--ph)), 0 0 14px var(--c, var(--ph));
}
.leds { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.leds span { display: inline-flex; align-items: center; gap: 7px; }

.hazard {
  height: 10px;
  border-radius: 2px;
  background:
    var(--tex-scratch) 0 0 / 260px 260px,
    var(--tex-grain) 0 0 / 220px 220px,
    repeating-linear-gradient(-45deg, var(--hazard) 0 12px, var(--gasket) 12px 24px);
}

/* Etikett från en Dymo-präglingstång */
.dymo {
  display: inline-block;
  justify-self: start;
  padding: 4px 10px 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #303030, #121212 55%, #1d1d1d);
  color: #f2f1ea;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: rotate(var(--tilt, -0.8deg));
}
.dymo--red { background: linear-gradient(180deg, #c03a31, #8c1f1a 55%, #a22a23); }
.dymo--blue { background: linear-gradient(180deg, #3a6cb5, #1f4683 55%, #2b5698); }

/* Maskeringstejp med en handskriven lapp */
.tape {
  position: absolute;
  z-index: 8;
  padding: 10px 20px 9px;
  background:
    var(--tex-grain) 0 0 / 220px 220px,
    linear-gradient(180deg, rgba(236, 224, 178, 0.96), rgba(220, 204, 150, 0.96));
  color: #23201a;
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(var(--tilt, 3deg));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 6%, 3% 0, 6% 8%, 9% 2%, 91% 0, 94% 7%, 97% 1%, 100% 5%, 98% 30%, 100% 55%, 97% 80%, 100% 96%, 96% 100%, 92% 93%, 8% 100%, 4% 94%, 0 100%, 2% 70%, 0 45%, 3% 22%);
  pointer-events: none;
}

/* Besiktningsetikett */
.sticker {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    var(--tex-grain) 0 0 / 220px 220px,
    radial-gradient(circle at 40% 35%, #f3df7c, #d9ba3e 72%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(43, 37, 16, 0.85), inset 0 0 0 5px #ecd35e;
  color: #2b2510;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-12deg);
}
.sticker b { display: block; font-size: 0.95rem; letter-spacing: 0.05em; }
.sticker::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 7px;
  width: 16px;
  height: 16px;
  border-radius: 0 0 60% 0;
  background: linear-gradient(135deg, transparent 50%, #fff4c4 52%, #d5be72);
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.25);
}

.coffee {
  position: absolute;
  z-index: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 57%, rgba(176, 128, 74, 0.2) 60%, rgba(176, 128, 74, 0.07) 65%, transparent 70%);
  pointer-events: none;
}

.vent {
  flex: 1 1 60px;
  max-width: 200px;
  height: 22px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #020202 0 5px, rgba(255, 255, 255, 0.07) 5px 11px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

/* Tangenter, blanknötta av år av tryck */
.key {
  appearance: none;
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(50, 38, 14, 0.36)),
    radial-gradient(ellipse 62% 46% at 50% 30%, rgba(255, 255, 255, 0.3), transparent 70%),
    var(--tex-grain) 0 0 / 220px 220px,
    var(--tex-grime) 0 0 / 320px 210px,
    linear-gradient(180deg, #d8d0b9, #aea58c);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    0 3px 0 #6f6855,
    0 6px 10px rgba(0, 0, 0, 0.5);
  color: var(--key-ink);
  font-family: var(--font-plate);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.key b {
  font-family: var(--font-crt);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
}
.key:active,
.key.is-pressed {
  transform: translateY(3px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 0 #8a826d, 0 2px 4px rgba(0, 0, 0, 0.35);
}
.key--orange {
  background:
    linear-gradient(180deg, transparent 62%, rgba(70, 30, 10, 0.25)),
    radial-gradient(ellipse 62% 46% at 50% 30%, rgba(255, 230, 200, 0.35), transparent 70%),
    var(--tex-grain) 0 0 / 220px 220px,
    linear-gradient(180deg, #ee9452, #cf6c2a);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 0 #94491a, 0 6px 10px rgba(0, 0, 0, 0.35);
}

/* Vippströmbrytare */
.switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--plastic-ink);
}
.switch__body {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 4px;
  background: var(--gasket);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}
.switch__body::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ece6d6, #aea690);
  transition: transform 0.18s var(--ease);
}
.switch[aria-pressed="true"] .switch__body::after { transform: translateX(18px); }

/* ---------- Fosforskärmen ---------- */

.crt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  border-radius: 22px / 28px;
  background: radial-gradient(ellipse at 50% 45%, #062014, var(--crt) 70%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.9),
    inset 0 0 10px rgba(0, 0, 0, 1),
    0 0 0 7px var(--gasket),
    0 0 0 9px var(--plastic-lo);
  color: var(--ph);
  font-family: var(--font-crt);
  text-shadow: 0 0 3px var(--ph-glow), 0 0 14px rgba(110, 255, 150, 0.16);
}
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
}
/* Glaset: vinjett, ett reflexsken, damm och ett fingeravtryck */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    var(--tex-dust) 0 0 / 300px 300px,
    radial-gradient(ellipse 26% 18% at 74% 26%, rgba(255, 255, 255, 0.045), transparent 70%),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.07), transparent 35%);
  opacity: 0.9;
}
.crt__roll {
  position: absolute;
  left: 0; right: 0;
  top: -25%;
  height: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(157, 255, 176, 0.05), transparent);
  animation: roll 7s linear infinite;
}
.crt__inner {
  position: relative;
  z-index: 1;
  animation: flicker 9s steps(1) infinite;
}
/* Text som har bränt in sig i fosforn efter år av samma bild */
.crt__ghost {
  position: absolute;
  z-index: 0;
  right: 4%;
  top: 47%;
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ph);
  text-shadow: none;
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@keyframes roll { to { top: 105%; } }
@keyframes flicker {
  0%, 100% { opacity: 1; transform: none; filter: none; }
  23% { opacity: 0.95; }
  23.5% { opacity: 1; }
  48% { opacity: 0.97; }
  48.5% { opacity: 1; }
  88% { transform: translateX(3px) skewX(-1.5deg); filter: brightness(1.3); }
  88.6% { transform: translateX(-1px); filter: none; }
  89.2% { transform: none; }
}

.crt--amber {
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-glow);
  background: radial-gradient(ellipse at 50% 45%, #1d1404, #0c0802 70%);
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  margin-left: 0.1em;
  vertical-align: -0.1em;
  background: var(--ph);
  box-shadow: 0 0 8px var(--ph-glow);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Heron: konsolen ---------- */

.hero { padding-block: clamp(1.5rem, 4vh, 3rem) clamp(4rem, 9vh, 7rem); }

.console { padding: clamp(14px, 2.4vw, 26px); }
.console .coffee { top: -18px; left: 44%; }
.console__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 2px 18px 18px;
}
.console__brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.console__brand strong.worn { -webkit-mask-position: 46px 24px; mask-position: 46px 24px; }
.console__brand strong {
  font-family: var(--font-plate);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
}
.console__lang { text-decoration: none; }
.console__lang:hover { text-decoration: underline; }

.console__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(20px, 2.6vw, 30px);
  align-items: stretch;
}
.term-wrap { position: relative; display: grid; min-width: 0; }
.term-wrap .tape { top: -16px; right: 26px; --tilt: 3.5deg; }

.term { padding: clamp(20px, 3.2vw, 40px) clamp(20px, 3.4vw, 44px); }
.term__title {
  font-family: var(--font-crt);
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--ph-hi);
}
.term__sub {
  margin: 0.35rem 0 1.4rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--ph-dim);
}

.log { font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.22; }
.ln { margin: 0; min-height: 1.22em; }
.ln--check { display: flex; align-items: baseline; gap: 0.5em; max-width: 34em; }
.ln--check .dots { flex: 1; border-bottom: 2px dotted var(--ph-dim); transform: translateY(-0.3em); min-width: 1em; }
.ln--hi { color: var(--ph-hi); }
.ln--q { color: var(--ph-hi); margin-top: 0.4em; }
.ln--gap { min-height: 0.7em; }
.log .ok { color: var(--ph-hi); }
.log.booting .ln--check:not(.ok-in) .ok { visibility: hidden; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1.3em;
  margin-top: 1.1em;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
}
.menu a {
  text-decoration: none;
  padding: 0 0.25em;
  margin-left: -0.25em;
}
.menu a span { color: var(--ph-dim); }
.menu a:hover,
.menu a:focus-visible {
  background: var(--ph);
  color: var(--crt);
  text-shadow: none;
  outline: none;
}
.menu a:hover span,
.menu a:focus-visible span { color: var(--crt); }
.prompt { margin: 0.7em 0 0; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); }
.prompt .hint { color: var(--ph-dim); }

/* Sidopanelen */
.side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.mod {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.07);
}
.mod__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mod--tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 0 8px;
  background: none;
  box-shadow: none;
}
.scope {
  height: 116px;
  border-radius: 10px / 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 0 0 4px var(--gasket);
}
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.clock {
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 0 4px var(--gasket);
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Diskettstation, enhet A: */
.drive__face {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2b2c27, #191a16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px #000;
}
.drive__slot {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.drive__disk {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 3px;
  bottom: 0;
  background: var(--loaded, #333);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.drive.is-loaded .drive__disk { transform: none; }
.drive__eject {
  appearance: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #d6cdb5, #a0977d);
  box-shadow: 0 2px 0 #5b5545, inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.drive__eject::after {
  content: "";
  width: 9px;
  height: 7px;
  background: var(--key-ink);
  clip-path: polygon(50% 0, 100% 62%, 0 62%, 0 78%, 100% 78%, 100% 100%, 0 100%, 0 62%);
}
.drive__eject:active { transform: translateY(2px); box-shadow: 0 0 0 #5b5545; }
.drive-log { margin: 0.7em 0 0; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); color: var(--ph-hi); }

/* 3,5-tumsdisketter med handskrivna etiketter */
.disks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 4px 2px 2px; }
.disk {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s var(--ease), filter 0.3s;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}
.disk:hover,
.disk:focus-visible { transform: translateY(-6px) rotate(0deg); filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.65)); outline: none; }
.disk:focus-visible .disk__body { box-shadow: 0 0 0 2px var(--amber); }
.disk.is-out { visibility: hidden; }
.disk.is-back { animation: diskBack 0.5s var(--ease); }
@keyframes diskBack { from { transform: translateY(-16px) rotate(0deg) scale(0.9); } }
.disk__body {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    var(--tex-grain) 0 0 / 220px 220px,
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 42%),
    var(--disk);
  clip-path: polygon(0 0, 91% 0, 100% 9%, 100% 100%, 0 100%);
}
.disk__body::before {
  content: "";
  position: absolute;
  left: 6%;
  bottom: 5%;
  width: 8%;
  height: 8%;
  background: #050505;
}
.disk__label {
  --lh: 9px;
  position: absolute;
  left: 11%;
  right: 11%;
  top: 4%;
  height: 50%;
  display: grid;
  align-content: space-between;
  padding: 9% 7% 6%;
  border-radius: 2px 2px 0 0;
  background:
    repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(40, 70, 160, 0.22) calc(var(--lh) - 1px) var(--lh)),
    #efe9d9;
  text-align: left;
  overflow: hidden;
}
.disk__hand {
  font-family: var(--font-hand);
  font-size: clamp(0.62rem, 0.5rem + 0.35vw, 0.82rem);
  line-height: 1.05;
  color: #1c2c7c;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.disk__print {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.4375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b665a;
}
.disk__shutter {
  position: absolute;
  left: 24%;
  right: 20%;
  bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, #d7dadf, #969ca4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.disk__shutter::after {
  content: "";
  position: absolute;
  left: 58%;
  width: 17%;
  top: 16%;
  bottom: 16%;
  border-radius: 1px;
  background: #2a2b2d;
}
.disk--fly { transition: none; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.6)); }

/* Liten diskett framför varje kapitelnummer */
.chapter__no::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.55em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 50% 100% / 46% 34% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 0 / 66% 38% no-repeat;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
}

/* ---------- Kapitel ---------- */

.chapter { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.chapter__head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 54rem;
}
.chapter__head .hazard { width: 120px; }
.chapter__no {
  margin: 0;
  font-family: var(--font-crt);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--ph);
  text-shadow: 0 0 6px var(--ph-glow);
}
.chapter h2 {
  font-family: var(--font-plate);
  font-size: clamp(1.45rem, 0.9rem + 2.9vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label);
  overflow-wrap: anywhere;
}
.chapter__intro { margin: 0; max-width: 56ch; color: var(--label-soft); font-size: 1.125rem; }

/* Kunskapsrack */
.rack { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.unit {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 16px 16px 36px;
  border-radius: 10px;
}
.unit:nth-child(2) { --gx: -210px; --gy: -120px; }
.unit:nth-child(3) { --gx: -380px; --gy: -40px; }
.unit:nth-child(4) { --gx: -90px; --gy: -260px; }
.unit:nth-child(5) { --gx: -470px; --gy: -190px; }
.unit .screw--tl { top: 50%; margin-top: -24px; left: 12px; }
.unit .screw--bl { bottom: auto; top: 50%; margin-top: 12px; left: 12px; }
.unit__plate { display: grid; align-content: center; gap: 12px; }
.unit__status { display: flex; align-items: center; gap: 8px; }
.unit__screen {
  padding: 16px 22px;
  border-radius: 10px / 14px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 0 4px var(--gasket);
}
.unit__screen p { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.unit__screen p + p { margin-top: 0.45em; }
.tag { color: var(--ph-dim); }

/* Kopplingspanel */
.bay { padding: 26px clamp(16px, 3vw, 34px) clamp(18px, 3vw, 30px); border-radius: 14px; --gx: -300px; --gy: -60px; }
.bay__jacks {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jack { display: grid; justify-items: center; gap: 9px; }
.jack .dymo { justify-self: center; font-size: 0.625rem; padding: 2px 7px 1px; letter-spacing: 0.12em; }
.jack:nth-child(odd) .dymo { --tilt: 1.2deg; }
.jack__socket {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #050505 34%, #3a3833 36%, #7a6a52 58%, #2a2824 64%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.bay__cables {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.cable-group { transition: opacity 0.3s; }
.cable { fill: none; stroke-linecap: round; }
.cable__shade { stroke: rgba(0, 0, 0, 0.35); stroke-width: 9; }
.cable__body { stroke: var(--cc); stroke-width: 6; }
.cable__plug { fill: var(--gasket); stroke: var(--cc); stroke-width: 2.5; }
.bay.is-focused .cable-group:not(.is-on) { opacity: 0.15; }
.anim .bay .cable { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.6s var(--ease); }
.anim .bay.is-in .cable { stroke-dashoffset: 0; }
.bay__gap { height: 150px; }
.bay__readouts {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
  margin: 0;
  list-style: none;
  border-radius: 12px / 16px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 0 4px var(--gasket);
}
.readout {
  padding: 14px 18px;
  transition: background-color 0.2s;
}
.readout h3 { display: flex; align-items: center; gap: 0.45em; font-size: 1.5rem; line-height: 1.1; color: var(--ph-hi); }
.readout .sq { width: 0.55em; height: 0.55em; flex: none; background: var(--cc); box-shadow: 0 0 6px var(--cc); }
.readout p { margin: 0.3em 0 0; font-size: 1.3rem; line-height: 1.22; }
.readout:hover,
.readout.is-on { background: rgba(157, 255, 176, 0.06); }

/* Personalakt */
.dossier {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.idcard {
  padding: 22px 20px 20px;
  border-radius: 12px;
  --gx: -150px;
  --gy: -300px;
  --plastic: #c9c0a5;
  --plastic-hi: #dfd7c0;
  --plastic-lo: #998f77;
  --plastic-ink: #2b2924;
  --grime: rgba(72, 54, 22, 0.3);
  --metal: rgba(255, 255, 255, 0.4);
}
.idcard .plate { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.idcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, 0.16) 44%, transparent 58%);
  pointer-events: none;
}
.idcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.idcard__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 6px / 8px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 0 4px var(--gasket);
}
.idcard__photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; opacity: 0.5; image-rendering: pixelated; }
.idcard__photo span {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: 12px;
  text-align: center;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}
.idcard dl { margin: 16px 0 0; display: grid; gap: 8px; }
.idcard dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.idcard dt { font-family: var(--font-plate); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; }
.idcard dd { margin: 0; font-family: var(--font-crt); font-size: 1.2rem; line-height: 1.1; }
.stamp {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 70px;
  padding: 5px 12px 4px;
  border: 3px solid var(--stamp);
  border-radius: 5px;
  color: var(--stamp);
  font-family: var(--font-plate);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  transform: rotate(-13deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.dossier__screen {
  padding: clamp(20px, 3vw, 34px);
  border-radius: 14px / 18px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9), 0 0 0 6px var(--gasket), 0 0 0 8px var(--plastic-lo);
}
.dossier__screen p { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.25; max-width: 44ch; }
.dossier__screen p + p { margin-top: 0.8em; }

/* Kontakt */
.channel {
  padding: clamp(24px, 4vw, 48px);
  border-radius: 16px / 20px;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.9), 0 0 0 6px var(--gasket), 0 0 0 8px var(--plastic-lo);
}
.channel p { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.25; }
.mail {
  display: inline-block;
  margin: 0.25em 0 0.35em;
  font-family: var(--font-crt);
  font-size: clamp(2.6rem, 1rem + 8vw, 7.5rem);
  line-height: 1;
  color: var(--ph-hi);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mail:hover { background: var(--ph); color: var(--crt); text-shadow: none; }
.channel__row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 1.5rem; }
.channel__row .key { min-width: 160px; }

/* Sidfot */
.foot { padding-block: 1rem 3rem; }
.foot__plate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 16px 22px;
  border-radius: 10px;
  --gx: -420px;
  --gy: -200px;
}
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Kapitelindikator, som en stapel lysdioder */
.meter {
  position: fixed;
  z-index: 20;
  right: calc(18px + env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 12px 10px;
  list-style: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.meter a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-crt);
  font-size: 1.05rem;
  color: var(--ph-dim);
}
.meter a.is-on { color: var(--ph); }

/* ---------- Smal skärm ---------- */

@media (max-width: 1240px) {
  .meter { display: none; }
}
@media (max-width: 960px) {
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .term-wrap .tape { position: relative; top: auto; right: auto; justify-self: end; margin: -16px 6px -8px 0; --tilt: -2.5deg; }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side .drive,
  .side .mod--disks,
  .side .mod--tags { grid-column: 1 / -1; }
  .disks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vent,
  .console .coffee { display: none; }
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .idcard { max-width: 420px; }
}
@media (max-width: 700px) {
  .console__top { padding: 4px 8px 16px; }
  .console__brand .plate { display: none; }
  .leds { gap: 6px 12px; }
  .tape { font-size: 0.875rem; padding: 8px 16px 7px; }
  .unit { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
  .unit .screw--tl,
  .unit .screw--bl { display: none; }
  .bay__readouts { grid-template-columns: minmax(0, 1fr); }
  .bay__gap { height: 120px; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .scope { height: 110px; }
}
@media (max-width: 480px) {
  .disks { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}