/* ================================================================
   CS Interactive Workshop — "El Taller"
   A tech lab: poured-concrete walls with panel seams, cool LED light,
   steel panels fixed with bolts, white spec sheets, blueprints and
   chunky toy-like buttons. Bit's art direction stays: thick ink
   outlines and hard offset shadows.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Orbitron:wght@700;900&family=Chakra+Petch:wght@700&family=Fredoka:wght@300..700&family=Patrick+Hand&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Lab materials: concrete walls, graphite ink (names kept from the first theme so every component keeps working) */
  --box:          #8a9096;
  --box-light:    #b3b9bf;
  --box-dark:     #5c636a;
  --box-shadow:   #343a41;
  --box-ink:      #1b2027;

  /* Steel panels */
  --ply:          #e6eaee;
  --ply-2:        #d4dae0;
  --ply-edge:     #98a2ad;

  /* Spec sheets (white paper, blueprint-blue rules) */
  --paper:        #f8fafc;
  --paper-2:      #e8eef4;
  --paper-line:   #c8d5e2;

  /* Metal hardware */
  --metal:        #c9d0d8;
  --metal-dark:   #5a636e;

  /* Accents: Stark red, hazard yellow, blueprint blue */
  --tomato:       #d8382e;
  --tomato-dark:  #9c1e16;
  --sun-y:        #f5c518;
  --mint:         #2db886;
  --mint-dark:    #1b7f5a;
  --sky-b:        #2e6be6;
  --sky-b-dark:   #1c4cb0;
  --plum:         #7656d6;
  --arc:          #5fd8ff;
  --led:          #eef7ff;
  --blueprint:    #1d4fb8;

  /* Component colours (each theme sets its own; --rgb-* are "r, g, b" for rgba()) */
  --surface-hi:      #f6f9fc;
  --code-bg:         #161b22;
  --code-bg-2:       #1c232c;
  --code-head:       #273140;
  --code-head-fg:    #dfe7ef;
  --code-fg:         #e6edf3;
  --code-count:      #e6edf3;
  --code-gutter:     #6b7785;
  --code-gutter-ran: #a3b3c4;
  --code-comment:    #8494a6;
  --code-comment-2:  #8494a6;
  --tr-bar:          #3a4654;
  --track:           #cbd4dd;
  --chip-wait:       #e3e9ef;
  --viz-bar:         #8fa3b8;
  --viz-bar-dim:     #cfd9e3;
  --viz-iv:          #dbe3eb;
  --sign-sub:        #dbe6f0;
  --btn-red-hi:      #e8574c;
  --btn-red-edge:    #6e140e;
  --btn-orange-hi:   #ef6a4f;
  --btn-orange:      #c93a2b;
  --btn-green-hi:    #4fd19c;
  --btn-green-edge:  #145c41;
  --rgb-blue:        46, 107, 230;
  --rgb-code-tint:   46, 107, 230;
  --rgb-ink:         27, 32, 39;
  --rgb-cream:       240, 246, 252;
  --rgb-yellow:      245, 197, 24;
  --rgb-red:         216, 56, 46;
  --rgb-red-edge:    110, 20, 14;
  --rgb-green-edge:  20, 92, 65;
  --rgb-wall:        171, 178, 185;
  --rgb-ply:         228, 233, 238;
  --rgb-shade:       20, 26, 33;
  --rgb-night:       10, 14, 20;
  --rgb-lamp:        220, 240, 255;
  --logo-small:      var(--arc);
  --logo-size:       clamp(1.75rem, 6.2vw, 4.1rem);
  --logo-weight:     900;
  --logo-track:      .05em;
  --logo-lh:         1.08;
  --sign-sub-font:   var(--font-mono);
  --sign-sub-size:   clamp(.78rem, 1.7vw, .98rem);
  --bulb-hi:         #e8fbff;
  /* Shapes and buttons */
  --pill:            10px;
  --round:           12px;
  --btn-case:        uppercase;
  --btn-track:       .07em;
  --btn-inset:       2px solid rgba(255, 255, 255, .32);
  --teal:            #1fa39b;
  /* Canvas stations (read through Theme.color) */
  --cv-floor:        #d4dce4;
  --cv-road:         #3d444d;
  --cv-panel:        #f6f9fc;
  --cv-slot:         #e6edf3;
  --cv-slot-fg:      #8a949e;
  --cv-label:        #5a636e;
  --cv-table:        #8a9096;

  /* Legacy names still used by the JS modules */
  --bg-primary:   var(--box);
  --bg-secondary: var(--paper-2);
  --bg-tertiary:  var(--paper-2);
  --bg-card:      var(--paper);
  --border-subtle: var(--paper-line);
  --cyan:         var(--sky-b);
  --emerald:      var(--mint);
  --amber:        #e0a21b;
  --rose:         var(--tomato);
  --purple:       var(--plum);
  --rose-dim:     rgba(216, 56, 46, 0.12);

  --text-main:    #1b2027;
  --text-dim:     #48535f;
  --text-muted:   #7a8693;

  --font-display: 'Chakra Petch', 'Fredoka', system-ui, sans-serif;
  --font-logo:    'Orbitron', 'Lilita One', system-ui, sans-serif;
  --font-sans:    'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif; /* the lab has no handwriting: notes use the text face */
  --hand-scale:   .86;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    20px;

  /* Art direction (Bit): thick ink outlines, flat fills, hard offset shadows */
  --outline:      3px solid var(--box-ink);
  --lift:         0 5px 0 var(--box-ink);
  --lift-hi:      0 8px 0 var(--box-ink);
  --drop:         0 6px 0 var(--box-ink);
  --drop-hi:      0 9px 0 var(--box-ink);

  /* Fine grain (paper, steel) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .19 0 0 0 0 .22 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Soft blotchy noise = poured concrete */
  --concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .2 0 0 0 0 .23 0 0 0 .75 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");

  /* Hardware drawn as background layers, flat like Bit's screws: grey head, ink ring */
  --screw-head: radial-gradient(circle, #9aa2ad 0 3.3px, var(--box-ink) 3.6px 5.6px, transparent 6px);
  --screws:
    var(--screw-head) left 7px top 7px / 14px 14px no-repeat,
    var(--screw-head) right 7px top 7px / 14px 14px no-repeat,
    var(--screw-head) left 7px bottom 7px / 14px 14px no-repeat,
    var(--screw-head) right 7px bottom 7px / 14px 14px no-repeat;
  --nail: radial-gradient(circle, #8d939c 0 3.3px, var(--box-ink) 3.6px 5.6px, transparent 6px) center top 6px / 14px 14px no-repeat;
}

/* ================================================================
   Alternate theme: "Taller de madera", the original wooden workshop.
   Picked with the theme button; stored as html[data-theme="madera"].
   ================================================================ */

:root[data-theme="madera"] {
  --box:          #c68a50;
  --box-light:    #e2b47c;
  --box-dark:     #8f5a2d;
  --box-shadow:   #5e3717;
  --box-ink:      #3d2414;
  --ply:          #f2dfbb;
  --ply-2:        #e8cd9d;
  --ply-edge:     #c9a06a;
  --paper:        #fbf3e2;
  --paper-2:      #f2e3c6;
  --paper-line:   #e0c9a0;
  --metal:        #c9ced6;
  --metal-dark:   #6b717a;
  --tomato:       #e8512a;
  --tomato-dark:  #b13817;
  --sun-y:        #f6c33b;
  --mint:         #4fb477;
  --mint-dark:    #2f8653;
  --sky-b:        #3d8fd6;
  --sky-b-dark:   #2565a3;
  --plum:         #8b5fbf;
  --amber:        #d9951a;
  --rose-dim:     rgba(232, 81, 42, 0.12);
  --text-main:    #3b2414;
  --text-dim:     #6f5038;
  --text-muted:   #9c7c5a;
  --surface-hi:      #fff8ea;
  --code-bg:         #2b2119;
  --code-bg-2:       #3a2a1d;
  --code-head:       #4a3020;
  --code-head-fg:    #f3e1c2;
  --code-fg:         #f3e7cc;
  --code-count:      #fbe9cb;
  --code-gutter:     #7f6852;
  --code-gutter-ran: #c8a77f;
  --code-comment:    #b99a75;
  --code-comment-2:  #a8906f;
  --tr-bar:          #9c6a3e;
  --track:           #d9c6a4;
  --chip-wait:       #efe1c6;
  --viz-bar:         #c9975c;
  --viz-bar-dim:     #e2c9a3;
  --viz-iv:          #e9d3ac;
  --sign-sub:        #f8e6c6;
  --btn-red-hi:      #f4734a;
  --btn-red-edge:    #7e2610;
  --btn-orange-hi:   #f08a4d;
  --btn-orange:      #d9622a;
  --btn-green-hi:    #6ccb8f;
  --btn-green-edge:  #1f5e39;
  --rgb-blue:        61, 143, 214;
  --rgb-code-tint:   143, 90, 45;
  --rgb-ink:         61, 36, 20;
  --rgb-cream:       251, 244, 228;
  --rgb-yellow:      246, 195, 59;
  --rgb-red:         232, 81, 42;
  --rgb-red-edge:    126, 38, 16;
  --rgb-green-edge:  31, 94, 57;
  --rgb-wall:        200, 140, 82;
  --rgb-ply:         242, 223, 187;
  --rgb-shade:       74, 44, 20;
  --rgb-night:       43, 25, 10;
  --rgb-lamp:        255, 232, 160;
  --logo-small:      var(--sun-y);
  --logo-size:       clamp(2.6rem, 9vw, 5.6rem);
  --logo-weight:     400;
  --logo-track:      .01em;
  --logo-lh:         .92;
  --sign-sub-font:   var(--font-hand);
  --sign-sub-size:   clamp(1.1rem, 2.6vw, 1.45rem);
  --bulb-hi:         #ffe9a3;
  --font-logo:       'Lilita One', 'Fredoka', system-ui, sans-serif;
  --font-display:    'Lilita One', 'Fredoka', system-ui, sans-serif;
  --font-hand:       'Patrick Hand', 'Comic Sans MS', cursive;
  --hand-scale:      1;
  --pill:            999px;
  --round:           50%;
  --btn-case:        none;
  --btn-track:       .02em;
  --btn-inset:       0 solid transparent;
  --teal:            #2aa7a0;
  --cv-floor:        #e2cfa6;
  --cv-road:         #5b4a3d;
  --cv-panel:        #fbf4e4;
  --cv-slot:         #f3e7cc;
  --cv-slot-fg:      #a48663;
  --cv-label:        #7a5a3e;
  --cv-table:        #c99560;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .07 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --woodgrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='360'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .11' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

:root[data-theme="madera"] body {
  background-color: var(--box);
  background-image:
    radial-gradient(ellipse 65% 50% at 50% -6%, rgba(255, 244, 210, .8), rgba(255, 228, 175, .28) 55%, transparent 78%),
    repeating-linear-gradient(180deg, rgba(255, 232, 195, .25) 0 1px, transparent 1px 118px, rgba(58, 30, 10, .5) 118px 120px),
    repeating-linear-gradient(180deg, transparent 0 120px, rgba(90, 48, 18, .08) 120px 240px, transparent 240px 360px, rgba(255, 220, 170, .06) 360px 480px),
    var(--woodgrain),
    linear-gradient(180deg, #d79d60, #b97c44);
  background-size: auto, auto, auto, 900px 360px, auto;
  background-position: 0 0;
}

:root[data-theme="madera"] .box-frame { box-shadow: inset 0 0 180px 40px rgba(46, 22, 6, .42); }

:root[data-theme="madera"] .sign-board {
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(61, 36, 20, .28) 22px 24px), #8e5a32;
}
:root[data-theme="madera"] .sign-board { border-radius: 16px; outline: 0; }
:root[data-theme="madera"] .sign-board::before { display: none; }

/* Each theme has its own intro decor */
.theme-wood { display: none; }
:root[data-theme="madera"] .theme-wood { display: block; }
:root[data-theme="madera"] .theme-lab { display: none; }

/* Wooden theme decor: a pegboard full of tools, Bit's hand-drawn plan and a shelf */
.pegboard {
  position: absolute; pointer-events: none; z-index: 0;
  top: 11%; right: 3.5%; width: clamp(150px, 15vw, 215px); aspect-ratio: 230 / 330;
  border-radius: 6px;
  background:
    var(--screws),
    radial-gradient(circle, var(--box-ink) 0 2.6px, transparent 3px) 11px 11px / 22px 22px,
    #c4935e;
  border: var(--outline);
  box-shadow: var(--drop);
}
.pegboard svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wood-deco { position: absolute; pointer-events: none; z-index: 0; }
.wood-deco svg { display: block; width: 100%; height: auto; overflow: visible; }
.wood-deco.plan { top: 9%; left: 4%; width: clamp(150px, 16vw, 250px); transform: rotate(-2.5deg); }
.wood-deco.shelf-deco { right: 4%; bottom: 7%; width: clamp(130px, 13vw, 190px); }

/* Bit has one drawing per theme */
.bit .bit-wood { display: none; }
:root[data-theme="madera"] .bit .bit-wood { display: inline; }
:root[data-theme="madera"] .bit .bit-lab { display: none; }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-main);
  background-color: #a9b0b7;
  background-image:
    radial-gradient(ellipse 85% 60% at 50% -8%, rgba(244, 250, 255, .95), rgba(228, 240, 252, .34) 55%, transparent 80%),
    radial-gradient(circle, rgba(27, 32, 39, .32) 0 3px, rgba(255, 255, 255, .14) 3.5px 4.5px, transparent 5px),
    linear-gradient(90deg, rgba(27, 32, 39, .28) 0 2px, rgba(255, 255, 255, .12) 2px 3px, transparent 3px),
    linear-gradient(180deg, rgba(27, 32, 39, .28) 0 2px, rgba(255, 255, 255, .12) 2px 3px, transparent 3px),
    var(--concrete),
    linear-gradient(180deg, #c6ccd2, #9da4ab);
  background-size: auto, 160px 100px, 320px 200px, 320px 200px, 700px 700px, auto;
  background-position: 0 0, 40px 50px, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--sky-b-dark); }
code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: rgba(var(--rgb-code-tint), .14);
  padding: .08em .35em;
  border-radius: 4px;
}
::selection { background: var(--sun-y); color: var(--box-ink); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sky-b); outline-offset: 3px; border-radius: 6px; }

.ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Lab lighting (fixed vignette) ───────────────────── */
.box-frame {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 170px 30px rgba(12, 16, 22, .26);
}

/* Lab decor on the intro: Bit's construction blueprint and a diagnostics monitor bolted to the wall */
.lab-deco { position: absolute; pointer-events: none; z-index: 0; }
.lab-deco svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-deco.blueprint { top: 9%; left: 4%; width: clamp(150px, 16vw, 250px); transform: rotate(-3deg); }
.lab-deco.wall-monitor { top: 30%; right: 3.5%; width: clamp(150px, 16vw, 230px); }
.hud-spin { transform-origin: 64px 72px; animation: hud-spin 7s linear infinite; }
.hud-spin.rev { animation-duration: 11s; animation-direction: reverse; }
.hud-led { animation: hud-led 1.8s ease-in-out infinite; }
.hud-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: hud-bar 3.6s ease-in-out infinite; }
.hud-bars rect:nth-child(2) { animation-delay: .15s; } .hud-bars rect:nth-child(3) { animation-delay: .3s; } .hud-bars rect:nth-child(4) { animation-delay: .45s; }
.hud-bars rect:nth-child(5) { animation-delay: .6s; } .hud-bars rect:nth-child(6) { animation-delay: .75s; } .hud-bars rect:nth-child(7) { animation-delay: .9s; }
@keyframes hud-spin { to { transform: rotate(360deg); } }
@keyframes hud-led { 50% { fill: #a8f0d0; } }
@keyframes hud-bar { 0%, 70%, 100% { transform: scaleY(1); } 82% { transform: scaleY(.72); } }

/* Screw element (used where a real element is needed, e.g. the sign) */
.screw {
  position: absolute; z-index: 2; width: 16px; height: 16px; border-radius: 50%;
  background: #9aa2ad; border: 3px solid var(--box-ink);
}

/* Hanging workshop lamps (intro), drawn like Bit. The lab has three: the side ones hang lower. */
.lamp { position: absolute; top: 0; left: 50%; width: 120px; height: 120px; margin-left: -60px; z-index: 0; pointer-events: none; }
.lamp svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.lamp-l { left: calc(50% - clamp(190px, 22vw, 400px)); }
.lamp-r { left: calc(50% + clamp(190px, 22vw, 400px)); }
.lamp-glow { position: absolute; left: 50%; top: 77%; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 110px 62px rgba(var(--rgb-lamp), .34); }
.lamp-cone {
  position: absolute; left: 50%; top: 68%; width: 340px; height: 52vh; margin-left: -170px;
  background: linear-gradient(180deg, rgba(var(--rgb-lamp), .30), rgba(var(--rgb-lamp), .10) 45%, rgba(var(--rgb-lamp), 0) 92%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
}

/* ── App shell / screens ───────────────────────────────────── */
/* The page is a column: the screen takes the room the footer leaves, so a screen that fits
   the window never scrolls just because the footer sits under a full-height screen */
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.screen { position: relative; z-index: 1; display: none; }
#screen-intro { min-height: 100vh; }
/* A screen whose content fits the window shares the spare height above and below it,
   instead of leaving one big gap at the bottom. Taller screens scroll as before. */
body > main { display: flex; flex-direction: column; }
.screen.is-active:not(#screen-intro) { flex: 1 0 auto; display: flex; flex-direction: column; }
.screen.is-active:not(#screen-intro):not(#screen-module) > .wrap { margin-block: auto; }
/* In a station the title and the step tabs stay at the top; what is under them (the problem
   shelf or the open step) takes the room that is left and sits in its middle when it fits */
#screen-module.is-active > .mod-body { flex: 1 0 auto; display: flex; flex-direction: column; }
#screen-module .tab-pane.active { flex: 1 0 auto; display: flex; flex-direction: column; }
#screen-module .tab-pane.active > .step-pane.active,
#screen-module .tab-pane.active.choosing > .problem-chooser { margin-block: auto; }
#screen-module .problem-chooser > .problem-shelf { padding-bottom: .4rem; }
.screen.is-active { display: block; animation: screen-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* Floating round toy buttons (top-right corner, game style) */
.corner-bar {
  position: fixed; top: 14px; right: 16px; z-index: 50;
  display: flex; gap: 10px;
}
.round-btn {
  width: 46px; height: 46px; border-radius: var(--round);
  display: grid; place-items: center;
  background: var(--paper);
  background-image: var(--grain);
  color: var(--box-ink);
  border: 3px solid var(--box-ink);
  box-shadow: 0 4px 0 var(--box-ink);
  transition: transform .12s, box-shadow .12s;
  text-decoration: none;
}
.round-btn .ic { width: 22px; height: 22px; }
.settings { position: relative; }
#btnSettings .ic { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
#btnSettings[aria-expanded="true"] .ic { transform: rotate(90deg); }
.settings-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 250px; padding: .45rem;
  display: grid; gap: .3rem;
  background: var(--grain), var(--paper);
  border: var(--outline); border-radius: var(--radius);
  box-shadow: var(--drop);
  animation: pop .18s cubic-bezier(.2, 1.4, .4, 1);
  transform-origin: top right;
}
.settings-row {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--box-ink); text-align: left;
}
.settings-row:hover, .settings-row:focus-visible { background: rgba(var(--rgb-ink), .08); }
.settings-row .ic { width: 20px; height: 20px; }
.settings-value {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: var(--btn-track); text-transform: var(--btn-case);
  padding: .15rem .55rem; border-radius: var(--pill); border: 2px solid var(--box-ink); background: var(--surface-hi);
}
.settings-row[aria-pressed="true"] .settings-value { background: var(--sun-y); }
/* English pages stay hidden for an instant while the markup is translated */
.i18n-wait body { visibility: hidden; }
.round-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--box-ink); }
.round-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--box-ink); }

/* ── Chunky buttons ────────────────────────────────────────── */
.btn {
  --c: var(--paper); --c2: var(--paper); --edge: var(--box-ink); --fg: var(--box-ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.3em;
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: var(--btn-track); text-transform: var(--btn-case);
  color: var(--fg);
  background: var(--c2);
  border: 3px solid var(--edge);
  border-radius: var(--pill);
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .12s, box-shadow .12s, filter .12s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--edge); filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
.btn-primary, .btn-hero { --c: var(--btn-red-hi); --c2: var(--tomato); --edge: var(--btn-red-edge); --fg: #fff; text-shadow: 0 2px 0 rgba(var(--rgb-red-edge), .7); }
.btn-go    { --c: var(--btn-green-hi); --c2: var(--mint); --edge: var(--btn-green-edge); --fg: #fff; text-shadow: 0 2px 0 rgba(var(--rgb-green-edge), .7); }
.btn-danger{ --c: var(--btn-orange-hi); --c2: var(--btn-orange); --edge: var(--btn-red-edge); --fg: #fff; text-shadow: 0 2px 0 rgba(var(--rgb-red-edge), .7); }
.btn-ghost { --c: var(--paper); --c2: var(--paper); }
.btn-hero  { font-size: clamp(1.3rem, 3vw, 1.75rem); padding: .6em 1.6em; border-width: 4px; box-shadow: 0 7px 0 var(--edge); outline: var(--btn-inset); outline-offset: -8px; }
.btn-hero:hover { box-shadow: 0 9px 0 var(--edge); }
.btn-sm { font-size: .9rem; padding: .45em .95em; border-width: 2.5px; box-shadow: 0 3px 0 var(--edge); }
.btn-sm:hover { box-shadow: 0 5px 0 var(--edge); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row > .btn { flex: 1 1 auto; }

/* ── Plywood board (screwed to the wall) ───────────────────── */
.paper, .board {
  position: relative;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: var(--radius);
  border: var(--outline);
  box-shadow: var(--drop);
  padding: 1.6rem;
}

.hand { font-family: var(--font-hand); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ================================================================
   SCREEN 1 · INTRO
   ================================================================ */
#screen-intro { display: none; }
#screen-intro.is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 16px 40px; overflow: hidden; }

.sign { position: relative; text-align: center; margin-top: 110px; z-index: 1; }
.sign-board {
  position: relative;
  padding: 2rem clamp(1.8rem, 5.5vw, 3.6rem) 1.8rem;
  /* Dark instrument panel: fine dot matrix, a light band on top and a thin cyan frame held by the screws */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle, rgba(127, 230, 255, .13) 0 1.1px, transparent 1.6px) 7px 7px / 14px 14px,
    #171d25;
  border: 4px solid var(--box-ink);
  border-radius: 10px;
  outline: 2px solid rgba(95, 216, 255, .30);
  outline-offset: -11px;
  box-shadow: 0 8px 0 var(--box-ink);
}
/* LED strip along the bottom of the sign */
.sign-board::before {
  content: ''; position: absolute; left: 34px; right: 34px; bottom: 12px; height: 4px; border-radius: 4px;
  background: var(--led);
  box-shadow: 0 0 10px 2px rgba(95, 216, 255, .9), 0 0 28px 6px rgba(95, 216, 255, .45);
}
.logo {
  font-family: var(--font-logo);
  font-weight: var(--logo-weight);
  font-size: var(--logo-size);
  line-height: var(--logo-lh);
  color: var(--paper);
  -webkit-text-stroke: 3px var(--box-ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--box-ink);
  letter-spacing: var(--logo-track);
}
.logo .logo-small { display: block; font-size: .42em; color: var(--logo-small); letter-spacing: .12em; margin-bottom: .1em; }
.logo .logo-name { color: var(--tomato); }
.sign-sub { margin-top: .9rem; font-family: var(--sign-sub-font); font-size: var(--sign-sub-size); color: var(--sign-sub); }

.intro-actions { position: relative; z-index: 2; margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.link-btn {
  font-family: var(--font-hand); font-size: calc(1.35rem * var(--hand-scale)); color: var(--box-ink);
  text-decoration: underline wavy rgba(var(--rgb-ink), .45); text-underline-offset: 5px;
  padding: .2rem .6rem;
}
.link-btn:hover { color: var(--tomato-dark); }
.bubble-link { display: inline-block; margin-top: .15rem; font-weight: 700; color: var(--sky-b-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.bubble-link:hover { color: var(--tomato-dark); }
.intro-foot { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; margin: 0; width: max-content; max-width: 92vw; text-align: center; font-size: .95rem; line-height: 1.6; color: rgba(var(--rgb-ink), .85); font-weight: 700; }
.intro-foot a { color: var(--box-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── Mascot: "Bit", a workshop robot ──────────────────────── */
.bit { width: 120px; height: auto; overflow: visible; }
.bit .blink { animation: blink 4.5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bit .bulb { animation: bulb 2.2s ease-in-out infinite; }
@keyframes bulb { 50% { fill: var(--bulb-hi); } }
.bit .core { animation: core 2.4s ease-in-out infinite; }
@keyframes core { 50% { fill: #e8fbff; } }
.bit .arm-l { transform-origin: 30px 108px; }
.bit .arm-r { transform-origin: 90px 108px; }
/* Bit reacts when you point at him: a little hop and a wave */
.bit-slot { cursor: pointer; }
.bit-slot:hover .bit, .bit-slot:focus-visible .bit { animation: bit-hop .55s cubic-bezier(.3, 1.6, .5, 1); }
.bit-slot:hover .arm-r, .bit-slot:focus-visible .arm-r { animation: bit-wave .45s ease-in-out 3; }
.bit-slot:hover .arm-l, .bit-slot:focus-visible .arm-l { animation: bit-swing .9s ease-in-out; }
.bit-slot:hover .blink, .bit-slot:focus-visible .blink { animation: none; transform: scaleY(.62); }
@keyframes bit-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-9px) rotate(-3deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes bit-wave { 0%, 100% { transform: none; } 50% { transform: rotate(-30deg); } }
@keyframes bit-swing { 0%, 100% { transform: none; } 50% { transform: rotate(14deg); } }
/* On the title screen he also breathes a little while waiting */
.intro-bit .bit { animation: bit-idle 3.4s ease-in-out 1.6s infinite; transform-origin: 50% 100%; }
@keyframes bit-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(1.2deg); } }
#screen-intro { --bit-w: clamp(90px, 10vw, 120px); --bit-left: max(16px, 6vw); }
.intro-bit { position: absolute; left: var(--bit-left); bottom: -6px; z-index: 1; width: var(--bit-w); animation: peek 1s .4s both cubic-bezier(.2, 1.4, .4, 1); }
.intro-bit .bit { display: block; width: 100%; }
@keyframes peek { from { transform: translateY(110%); } to { transform: none; } }
#screen-intro .intro-bubble {
  position: absolute; left: calc(var(--bit-left) + var(--bit-w) * .883 + 24px); bottom: calc(var(--bit-w) * .708 - 33px); z-index: 2;
  max-width: min(220px, calc(50vw - var(--bit-left) - var(--bit-w) - 90px));
  animation: pop .4s 1.2s both cubic-bezier(.2, 1.5, .4, 1);
}

/* Speech bubble (shared) */
.bubble {
  position: relative;
  background: var(--paper); background-image: var(--grain);
  border: 3px solid var(--box-ink);
  border-radius: 18px;
  padding: .7rem 1rem;
  font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); line-height: 1.3;
  color: var(--box-ink);
  box-shadow: 0 4px 0 var(--box-ink);
}
.bubble::after {
  content: ''; position: absolute; left: -14px; bottom: 16px;
  border: 8px solid transparent; border-right: 12px solid var(--box-ink); border-left: 0;
}
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ================================================================
   SCREEN 2 · WHAT IS IT (FAQ) — paper sheets nailed to the wall
   ================================================================ */
.page-head { padding: 84px 0 1.8rem; text-align: center; }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--paper);
  -webkit-text-stroke: 2.5px var(--box-ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--box-ink);
}
.page-lead { margin: .9rem auto 0; max-width: 640px; font-family: var(--font-hand); font-size: calc(1.3rem * var(--hand-scale)); color: var(--box-ink); }
.crumb-light { font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); color: var(--box-ink); opacity: .8; margin-bottom: .2rem; }

.back-link {
  position: fixed; top: 14px; left: 16px; z-index: 50;
}

.faq-board { --row-gap: 1.6rem; gap: 1.8rem 1.6rem; padding-bottom: 2rem; }
.faq {
  position: relative;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: 12px;
  border: var(--outline);
  box-shadow: var(--drop);
  padding: 1.7rem 1.5rem 1.4rem;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s;
}
.faq:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--drop-hi); }
.faq:nth-child(even):hover { transform: translateY(-5px) rotate(.4deg); }
.faq-link { margin-top: .9rem; }
.faq-q { display: flex; gap: .7rem; align-items: center; margin-bottom: .55rem; }
.faq-q h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--box-ink); }
.faq-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: #fff;
  background: var(--tomato); border: 2.5px solid var(--box-ink);
}
.faq p { color: var(--text-dim); font-size: .98rem; }
.faq p + p { margin-top: .5rem; }
.faq ul { list-style: none; display: grid; gap: .35rem; margin-top: .3rem; }
.faq li { position: relative; padding-left: 1.2rem; color: var(--text-dim); font-size: .97rem; }
.faq li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--mint); transform: rotate(45deg); }
.faq strong { color: var(--text-main); }

.faq-cta { text-align: center; padding: 1rem 0 4rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.faq-cta .hand { font-size: calc(1.3rem * var(--hand-scale)); color: var(--box-ink); }

/* ================================================================
   SCREEN 3 · WORK AREAS (benches) and SCREEN 3b · STATIONS
   ================================================================ */
.hub-head { padding: 84px 0 1rem; display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; flex-wrap: wrap; text-align: center; }

/* Rows of equal cards: up to three per row, and a short last row is centred instead of leaving a gap */
.faq-board, .benches, .progress-stations { display: flex; flex-wrap: wrap; justify-content: center; }
.faq-board > *, .benches > *, .progress-stations > * { flex: 1 1 300px; min-width: 0; max-width: calc((100% - 2 * var(--row-gap)) / 3); }
@media (max-width: 1100px) { .faq-board > *, .benches > *, .progress-stations > * { max-width: calc((100% - var(--row-gap)) / 2); } }
@media (max-width: 720px) { .faq-board > *, .benches > *, .progress-stations > * { max-width: 100%; } }

/* A bench = a big plywood sign with metal corner brackets */
.benches {
  --row-gap: 1.5rem;
  gap: 1.5rem;
  padding: .6rem 0 2rem;
}
.bench {
  position: relative;
  display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto auto 1fr;
  column-gap: 1rem; align-items: start;
  padding: 1.15rem 1.2rem 1rem 1.4rem;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: 12px;
  border: var(--outline);
  box-shadow: var(--drop);
  color: inherit; text-decoration: none;
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s;
}
.bench::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 12px 0 0 12px; background: var(--accent); opacity: .9; }
.bench:hover { transform: translateY(-4px); box-shadow: var(--drop-hi); }
.bench:active { transform: translateY(3px); }
.bench-art {
  grid-row: 1 / 5;
  width: 84px; aspect-ratio: 1;
  border-radius: 14px;
  background: var(--grain), var(--accent);
  border: 3px solid var(--box-ink);
  display: grid; place-items: center;
}
.bench-art svg { width: 86%; height: auto; }
.bench .station-code { margin-top: .1rem; }
.bench-name { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.1; color: var(--box-ink); margin: .1rem 0 .25rem; }
.bench-line { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); line-height: 1.2; color: var(--text-dim); }
.bench-go { align-self: end; margin-top: .5rem; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-size: .98rem; color: var(--tomato-dark); }

/* Bench and station drawings are inked with the theme colour (stroke="currentColor") */
.bench-art, .station-art { color: var(--box-ink); }

/* Stations inside a bench: plywood plaques */
.shelf {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.8rem;
  padding: 1rem 0 5rem;
}
.station { position: relative; flex: 0 1 300px; min-width: 250px; }
.station-card {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.6rem 1.2rem 1.4rem;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: 12px;
  border: var(--outline);
  box-shadow: var(--drop);
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s;
  cursor: pointer;
  color: inherit; text-decoration: none;
}
.station-card:hover { transform: translateY(-5px); box-shadow: var(--drop-hi); }
.station-card:active { transform: translateY(3px); }
.station-art {
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--grain), var(--accent, var(--sky-b));
  border: 3px solid var(--box-ink);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: .9rem;
}
.station-art svg { width: 82%; height: 82%; }
.station-code { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--text-muted); letter-spacing: .06em; }
.station-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.station-name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--box-ink); margin: .15rem 0 .35rem; }
.station-line { font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); color: var(--text-dim); line-height: 1.25; }
.station-go {
  margin-top: auto; padding-top: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); color: var(--tomato-dark); font-size: 1rem;
}
.station.soon .station-card { background: rgba(var(--rgb-ply), .25); border: 3px dashed rgba(var(--rgb-ink), .45); box-shadow: none; cursor: default; }
.station.soon .station-card:hover { transform: none; }
.station.soon .station-art { background: rgba(var(--rgb-cream), .3); border-style: dashed; }
.station.soon .station-name { opacity: .75; }

/* A bench's stations are smaller plaques, so a whole bench fits on one screen without scrolling */
#areaShelf { gap: 1.4rem; padding: .4rem 0 2rem; }
#areaShelf .station { flex: 0 1 216px; min-width: 196px; }
#areaShelf .station-card { padding: 1.15rem .95rem 1rem; }
#areaShelf .station-art { aspect-ratio: 16 / 9; margin-bottom: .7rem; }
#areaShelf .station-name { font-size: 1.22rem; }
#areaShelf .station-line { font-size: calc(1.02rem * var(--hand-scale)); line-height: 1.2; }
#areaShelf .station-go { padding-top: .6rem; }

/* ================================================================
   SCREEN 4 · MODULE (station workspace)
   ================================================================ */
.mod-bar {
  position: sticky; top: 0; z-index: 40;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(var(--rgb-wall), .97) 70%, rgba(var(--rgb-wall), 0));
  backdrop-filter: blur(2px);
}
.mod-bar .wrap { display: flex; align-items: center; gap: 1rem; padding-right: 168px; }
.mod-title { flex: 1; min-width: 0; }
.mod-title .crumb { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); color: var(--box-ink); opacity: .85; line-height: 1; }
.mod-title h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.05;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--box-ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--box-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Room inside the clip box for the outline and the drop shadow, so no letter looks cut */
  padding: .14em .2em .24em .08em; margin: -.14em 0 -.24em -.08em;
}

/* Three steps: Experimenta / Entiende / Implementa */
.steps {
  display: flex; gap: 6px;
  padding: 5px;
  background: var(--tr-bar);
  border: var(--outline);
  box-shadow: var(--lift);
  border-radius: var(--pill);
  margin: .4rem 0 1.4rem;
  width: max-content; max-width: 100%;
  overflow-x: auto;
}
.step {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem .45rem .5rem;
  border-radius: var(--pill);
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--paper);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.step-n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem;
  background: rgba(var(--rgb-cream), .25);
}
.step:hover { background: rgba(var(--rgb-cream), .18); }
.step.active { background: var(--paper); color: var(--box-ink); box-shadow: 0 3px 0 var(--box-ink); }
.step.active .step-n { background: var(--tomato); color: #fff; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }
.step-pane { display: none; animation: screen-in .35s ease; }
.step-pane.active { display: block; }

/* A station's problems are sub-stations: the station opens on a shelf of problem cards,
   and the steps only appear once a problem is chosen */
.tab-pane.choosing .step-pane.active { display: none; }
.tab-pane:not(.choosing) > .problem-chooser { display: none; }
.problem-chooser { animation: screen-in .35s ease; }
.problem-shelf { padding-top: .4rem; }
.problem-peek {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 0;
  margin-bottom: .9rem; padding: .85rem 1rem;
  background: var(--code-bg); color: var(--code-fg);
  border: 3px solid var(--box-ink); border-radius: 12px;
  font-family: var(--font-mono); font-size: .85rem; white-space: nowrap; overflow: hidden;
}
.problem-peek code { min-width: 0; background: none; padding: 0; color: inherit; font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
.problem-num { flex: none; font-weight: 800; color: var(--sun-y); }
.problem-card.solved .problem-peek { border-color: var(--mint); }
.mod-body { padding-bottom: 3rem; }

/* Subtabs (inside a module) */
.subtabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.subtab {
  padding: .35rem .95rem;
  font-weight: 800; font-size: .92rem;
  color: var(--box-ink);
  background: rgba(var(--rgb-cream), .55);
  border: 2.5px solid var(--box-ink);
  border-radius: var(--pill);
  transition: background .15s, transform .15s;
}
.subtab:hover { transform: translateY(-1px); background: rgba(var(--rgb-cream), .85); }
.subtab.active { background: var(--sun-y); box-shadow: 0 3px 0 var(--box-ink); }

/* Experiment layout: clipboard controls + stage */
.workspace-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.clipboard {
  position: relative;
  background-color: var(--paper); background-image: var(--grain);
  border-radius: var(--radius);
  box-shadow: var(--drop);
  padding: 2rem 1.2rem 1.3rem;
  border: var(--outline);
  border-top-width: 12px;
}
.clipboard::before {
  content: ''; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 24px; border-radius: 8px 8px 4px 4px;
  background: #c9ced6;
  border: var(--outline);
}
.ctl { margin-bottom: 1.15rem; }
.ctl-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: .9rem; color: var(--box-ink); margin-bottom: .45rem; }
.ctl-value { font-family: var(--font-mono); font-size: .82rem; color: var(--tomato-dark); }
.ctl-hint { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); color: var(--text-dim); margin-top: .25rem; line-height: 1.2; }

select, input[type="text"] {
  width: 100%;
  font: 700 .95rem var(--font-sans);
  color: var(--box-ink);
  background: var(--surface-hi);
  border: 2.5px solid var(--box-ink);
  border-radius: 10px;
  padding: .55rem .75rem;
  outline: none;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' stroke='%233d2414' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  padding-right: 2.2rem; cursor: pointer;
}
select:focus, input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(var(--rgb-blue), .35); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: var(--pill); background: var(--paper-2); border: 2px solid var(--box-ink); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--pill); background: var(--paper-2); border: 2px solid var(--box-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--tomato); border: 3px solid var(--box-ink); box-shadow: 0 2px 0 var(--box-ink); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--tomato); border: 3px solid var(--box-ink); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .3rem .75rem;
  font-weight: 800; font-size: .85rem;
  background: var(--surface-hi);
  border: 2px solid var(--box-ink);
  border-radius: var(--pill);
  color: var(--box-ink);
  transition: background .15s, transform .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip.active { background: var(--sky-b); color: #fff; box-shadow: 0 2px 0 var(--box-ink); }

/* Switch (styled checkbox) */
.switch { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 800; font-size: .92rem; color: var(--box-ink); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .knob {
  position: relative; flex: none; width: 50px; height: 28px; border-radius: var(--pill);
  background: var(--track); border: 2.5px solid var(--box-ink);
  transition: background .2s;
}
.switch .knob::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 2px solid var(--box-ink);
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1);
}
.switch input:checked + .knob { background: var(--mint); }
.switch input:checked + .knob::after { transform: translateX(21px); }
.switch input:focus-visible + .knob { outline: 3px solid var(--sky-b); outline-offset: 2px; }
.status-note { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); margin: .3rem 0 0 3.6rem; color: var(--mint-dark); }

.divider { border: 0; border-top: 2px dashed var(--paper-line); margin: 1.1rem 0; }

/* Stage = where the simulation lives */
.stage {
  position: relative;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: var(--radius-lg);
  border: var(--outline);
  box-shadow: var(--drop);
  padding: 24px;
  min-width: 0;
}
.canvas-container { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--surface-hi); border: 2px solid var(--paper-line); }
.canvas-container canvas { display: block; width: 100%; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .7rem .3rem .2rem; font-weight: 700; font-size: .85rem; color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--box-ink); }

/* Scoreboard under the stage */
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: .8rem; }
.score {
  background: var(--surface-hi); border: 2px solid var(--paper-line); border-radius: 12px;
  padding: .5rem .75rem;
}
.score-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.score-value { font-family: var(--font-display); font-size: 1.35rem; color: var(--box-ink); line-height: 1.2; }

.alert {
  display: none; align-items: center; gap: .6rem;
  margin-bottom: .8rem; padding: .6rem .9rem;
  background: #ffe2d6; border: 2.5px solid var(--tomato-dark); border-radius: 12px;
  color: var(--tomato-dark); font-weight: 800; font-size: .92rem;
}

/* Tip note (hand-written) */
.note {
  position: relative; margin-top: 1rem;
  padding: .8rem 1rem .8rem 1.1rem;
  background: var(--nail), var(--grain), #fff3b0;
  padding-top: 1.45rem;
  border-radius: 4px;
  box-shadow: var(--lift);
  font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); line-height: 1.3; color: var(--box-ink);
}
.note strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; display: block; margin-bottom: .15rem; }

/* Algorithm vs. algorithm: two lanes on one stage */
.vs-second { margin-top: .8rem; }
.vs-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vs-lane { display: grid; gap: .55rem; min-width: 0; padding: .7rem; border-radius: 14px; border: 3px solid transparent; transition: border-color .3s, background .3s; }
.vs-lane.won { border-color: var(--mint); background: rgba(var(--rgb-cream), .35); }
.vs-lane.lost { opacity: .85; }
.vs-lane-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.9rem; }
.vs-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--box-ink); }
.vs-flag { visibility: hidden; padding: .15rem .6rem; border: 2px solid var(--box-ink); border-radius: var(--pill); background: var(--mint); color: #fff; font-weight: 800; font-size: .8rem; }
.vs-lane.won .vs-flag { visibility: visible; animation: bit-hop .6s ease; }
.vs-bar { height: 12px; border: 2px solid var(--box-ink); border-radius: var(--pill); background: var(--paper-2); overflow: hidden; }
.vs-bar i { display: block; height: 100%; width: 0; background: var(--sun-y); }
.vs-lane.won .vs-bar i { background: var(--mint); }
.vs-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: .4rem; }
.vs-stats > div { background: var(--surface-hi); border: 2px solid var(--paper-line); border-radius: 10px; padding: .3rem .5rem; min-width: 0; }
.vs-stats dt { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.vs-stats dd { font-family: var(--font-mono); font-weight: 600; font-size: .86rem; color: var(--box-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-status { margin-left: auto; }
.vs-status b { color: var(--box-ink); }
.vs-result { margin-top: .9rem; }
.vs-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .82rem; }
.vs-table th { text-align: left; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: .3rem .25rem; border-bottom: 2px solid var(--paper-line); }
.vs-table td { padding: .28rem .25rem; border-bottom: 1px dashed var(--paper-line); font-family: var(--font-mono); color: var(--box-ink); white-space: nowrap; }
.vs-table td:first-child { font-family: var(--font-sans); font-weight: 700; }
@media (max-width: 720px) { .vs-lanes { grid-template-columns: 1fr; } }

/* ── Learn / Implement content ─────────────────────────────── */
/* Cards share a row and the last row grows to fill it, so no row ends in an empty gap */
.learn-grid { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.learn-grid > * { flex: 1 1 300px; min-width: 0; }
.learn-card {
  position: relative;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: 12px;
  border: var(--outline);
  box-shadow: var(--drop);
  padding: 1.8rem 1.7rem 1.6rem;
}
.learn-grid > .learn-card.wide { flex-basis: 100%; }
.amdahl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.amdahl-grid .metrics-grid { margin-top: 0; }
.sync-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.sync-grid h4:first-child { margin-top: 0; }
@media (max-width: 760px) { .amdahl-grid, .sync-grid { grid-template-columns: 1fr; } }

/* Notebook: list of notes on the left, the open note on the right */
.nb { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.2rem; margin-top: 1rem; min-height: 360px; }
.nb-side { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.nb-tools { display: grid; gap: .5rem; }
.nb-search, .nb-filter, .nb-title, .nb-topic, .nb-body {
  width: 100%; font: inherit; color: var(--text-main);
  background: var(--surface-hi); border: 2.5px solid var(--box-ink); border-radius: var(--radius-sm);
  padding: .5rem .7rem;
}
.nb-list { list-style: none; display: grid; gap: .4rem; max-height: 340px; overflow-y: auto; overflow-x: hidden; padding: 2px 6px 2px 2px; }
.nb-item { display: grid; gap: .15rem; padding: .55rem .7rem; border: 2.5px solid var(--box-ink); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; transition: transform .12s; }
.nb-item:hover { transform: translateX(3px); }
.nb-item.active { background: var(--sun-y); }
.nb-item-title { font-weight: 700; color: var(--box-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-item-meta { display: flex; gap: .5rem; align-items: center; font-size: .78rem; color: var(--text-muted); }
.nb-tag { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: 6px; border: 2px solid var(--box-ink); background: var(--surface-hi); color: var(--box-ink); }
.nb-none, .nb-count { font-size: .88rem; color: var(--text-muted); }
.nb-editor { display: flex; flex-direction: column; min-width: 0; }
.nb-empty { margin: auto; max-width: 380px; text-align: center; color: var(--text-dim); display: grid; gap: .5rem; }
.nb-form { display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.nb-form[hidden] { display: none; }
.nb-head { display: grid; grid-template-columns: 1fr minmax(150px, 220px); gap: .6rem; }
.nb-title { font-family: var(--font-display); font-size: 1.15rem; }
.nb-body {
  flex: 1; min-height: 260px; resize: vertical; line-height: 1.6;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.6em - 1px), rgba(var(--rgb-blue), .14) calc(1.6em - 1px) 1.6em);
  background-attachment: local; background-position: 0 .5rem;
}
.nb-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.nb-status { font-size: .85rem; color: var(--text-muted); }
@media (max-width: 760px) { .nb { grid-template-columns: 1fr; } .nb-head { grid-template-columns: 1fr; } .nb-list { max-height: 200px; } }
.learn-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; color: var(--box-ink); margin-bottom: .55rem; }
.learn-card h4 { font-weight: 800; font-size: 1rem; color: var(--box-ink); margin: .9rem 0 .3rem; }
.learn-card p { color: var(--text-dim); }
.learn-card p + p { margin-top: .55rem; }
.analogy { font-family: var(--font-hand); font-size: calc(1.2rem * var(--hand-scale)); color: var(--sky-b-dark); line-height: 1.3; margin: .3rem 0 .6rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin-top: .8rem; font-size: .95rem; }
.kv dt { color: var(--text-dim); font-weight: 700; }
.kv dd { font-family: var(--font-mono); font-weight: 600; color: var(--box-ink); text-align: right; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 6px; background: var(--paper-2); color: var(--text-dim); margin-bottom: .5rem; }
.numbered { list-style: none; counter-reset: n; display: grid; gap: .6rem; margin-top: .4rem; }
.numbered li { counter-increment: n; position: relative; padding-left: 2.3rem; color: var(--text-dim); }
.numbered li::before {
  content: counter(n); position: absolute; left: 0; top: -.05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .9rem; color: #fff;
  background: var(--sky-b); border: 2px solid var(--box-ink);
}
.numbered strong, .plain strong { color: var(--text-main); }
.plain { list-style: none; display: grid; gap: .45rem; }
.plain li { position: relative; padding-left: 1.3rem; color: var(--text-dim); }
.plain li::before { content: ''; position: absolute; left: .1rem; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--tomato); transform: rotate(45deg); }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; }
.flow span { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 8px; background: var(--surface-hi); border: 2px solid var(--box-ink); color: var(--box-ink); }
.flow .ic { color: var(--text-muted); width: 16px; height: 16px; }

/* Code block, like a printed sheet */
.code-snippet, pre.code {
  font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.6;
  color: var(--code-fg);
  background: var(--code-bg-2);
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1.6em, transparent 1.6em 3.2em);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre;
  margin-top: .6rem;
  border: 3px solid var(--box-ink);
}
pre.code .c { color: var(--code-comment); font-style: italic; }
pre.code .k { color: var(--sun-y); }
pre.code .s { color: #8fd3a5; }

/* Amdahl calculator readouts */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-top: 1rem; }
.metric-box { background: var(--surface-hi); border: 2px solid var(--paper-line); border-radius: 12px; padding: .55rem .7rem; }
.metric-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.metric-value { font-family: var(--font-display); font-size: 1.45rem; color: var(--box-ink); }

/* Table */
.table-container { overflow-x: auto; margin-top: .6rem; border-radius: 12px; border: 2px solid var(--paper-line); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
th { text-align: left; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--box-ink); background: var(--paper-2); padding: .65rem .8rem; }
td { padding: .6rem .8rem; border-top: 1px solid var(--paper-line); color: var(--text-dim); }
td:nth-child(n+2):nth-child(-n+5) { font-family: var(--font-mono); font-size: .8rem; color: var(--box-ink); }
tbody tr:hover td { background: var(--surface-hi); }

/* ── Networking bits ───────────────────────────────────────── */
.terminal-window { border-radius: 14px; overflow: hidden; border: 3px solid var(--box-ink); background: var(--code-bg); box-shadow: 0 5px 0 var(--box-ink); }
.terminal-header {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .5rem .9rem;
  background: var(--box-dark); background-image: var(--grain);
  color: var(--paper); font-weight: 800; font-size: .85rem;
  border-bottom: 3px solid var(--box-ink);
}
.terminal-header .meta { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; opacity: .85; }
.terminal-body {
  font-family: var(--font-mono);
  color: var(--code-fg);
  padding: 1rem;
  overflow: auto;
  white-space: pre;
  line-height: 1.15;
}


/* ── Guide: floating Bit + coach-mark tour ─────────────────── */
.guide {
  position: fixed; left: 16px; bottom: 12px; z-index: 60;
  display: flex; align-items: flex-end; gap: .8rem;
  pointer-events: none;
}
.guide .bit { width: 78px; pointer-events: auto; cursor: pointer; transition: transform .2s; }
.guide .bit:hover { transform: translateY(-4px) rotate(-3deg); }
.guide .bubble { max-width: 300px; margin-bottom: 2.2rem; pointer-events: auto; animation: pop .35s cubic-bezier(.2, 1.5, .4, 1); }
.guide .bubble[hidden] { display: none; }
.guide-actions { display: flex; gap: .5rem; margin-top: .55rem; }
.guide-actions button { font-family: var(--font-sans); font-weight: 800; font-size: .8rem; padding: .25rem .7rem; border-radius: var(--pill); border: 2px solid var(--box-ink); background: var(--surface-hi); color: var(--box-ink); }
.guide-actions button.primary { background: var(--tomato); color: #fff; }

.tour-spot {
  position: fixed; z-index: 80; pointer-events: none;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--sun-y), 0 0 0 9999px rgba(var(--rgb-night), .62);
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
}
.tour-card {
  position: fixed; z-index: 81;
  width: min(330px, calc(100vw - 32px));
  transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1);
}
.tour-card .bubble::after { display: none; }
.tour-card .tour-step { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .15rem; }
.tour-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; margin-bottom: .2rem; }

/* Toasts */
.toast-container { position: fixed; bottom: 18px; right: 18px; z-index: 90; display: grid; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .55rem;
  background: var(--paper); border: 3px solid var(--box-ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--box-ink);
  padding: .55rem .95rem; font-weight: 800; font-size: .9rem; color: var(--box-ink);
  animation: pop .3s cubic-bezier(.2, 1.5, .4, 1);
}
.toast::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid var(--box-ink); }

.footer { position: relative; z-index: 1; text-align: center; padding: 0 16px 1.6rem; font-size: .85rem; font-weight: 700; color: rgba(var(--rgb-ink), .7); }
.footer a { color: var(--box-ink); }
body.on-intro .footer { display: none; }

/* ================================================================
   TRACER · line-by-line code walkthrough ("debugger" stations)
   ================================================================ */
.round-btn.sm { width: 38px; height: 38px; border-width: 2.5px; box-shadow: 0 3px 0 var(--box-ink); }
.round-btn.sm .ic { width: 18px; height: 18px; }
.round-btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 0 3px 0 var(--box-ink); }

.tr-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.tr-pick {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem .4rem .45rem;
  font-weight: 800; font-size: .9rem; color: var(--box-ink);
  background: rgba(var(--rgb-cream), .7);
  border: 2.5px solid var(--box-ink); border-radius: var(--pill);
  transition: transform .15s, background .15s;
}
.tr-pick:hover { transform: translateY(-1px); background: var(--paper); }
.tr-pick.active { background: var(--paper); box-shadow: 0 3px 0 var(--box-ink); }
.diff { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .5rem; border-radius: var(--pill); color: #fff; border: 2px solid var(--box-ink); }
.diff.easy { background: var(--mint); }
.diff.mid  { background: #e3a21a; }
.diff.hard { background: var(--tomato); }

.tr-brief {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1.4rem;
  margin-bottom: 1.4rem;
  padding: 1.6rem 1.6rem 1.4rem;
  background: var(--screws), var(--grain), var(--ply);
  border-radius: 12px;
  border: var(--outline);
  box-shadow: var(--drop);
}
.tr-pattern { display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tomato-dark); }
.tr-title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--box-ink); margin: .1rem 0 .4rem; }
.tr-text p { color: var(--text-dim); }
.tr-input { border-left: 2px dashed var(--ply-edge); padding-left: 1.3rem; }
.tr-presets { margin-bottom: .6rem; }
.tr-custom { display: flex; gap: .5rem; }
.tr-field { font-family: var(--font-mono) !important; font-size: .82rem !important; }
.tr-field.bad { border-color: var(--tomato-dark); box-shadow: 0 0 0 3px rgba(var(--rgb-red), .25); }
.tr-error { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); color: var(--tomato-dark); margin-top: .35rem; min-height: 1.3em; }

.tr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.4rem; align-items: start; }
.tr-left { display: grid; gap: .8rem; min-width: 0; position: sticky; top: 92px; }
.tr-right { display: grid; gap: 1rem; min-width: 0; }

.tr-controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem .8rem;
  background: var(--tr-bar);
  border: var(--outline);
  border-radius: 14px;
  box-shadow: var(--lift);
}
.tr-controls .tr-play { min-width: 140px; }
.tr-count { margin-left: auto; font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--code-count); }
.tr-scrub { margin: 0 .2rem; }

.tr-code-wrap { border-radius: 14px; overflow: hidden; border: 3px solid var(--box-ink); background: var(--code-bg); box-shadow: 0 5px 0 var(--box-ink); }
.tr-code-head { display: flex; justify-content: space-between; padding: .45rem .9rem; background: var(--grain), var(--code-head); color: var(--code-head-fg); font-family: var(--font-mono); font-size: .74rem; border-bottom: 2px solid var(--box-ink); }
.tr-code { max-height: min(460px, 44vh); overflow: auto; padding: .5rem 0; font-family: var(--font-mono); font-size: .86rem; line-height: 1.75; color: var(--code-fg); }
.tr-line { position: relative; display: flex; padding-right: 1rem; white-space: pre; transition: background .2s; }
.tr-gutter { flex: none; width: 3.1rem; padding-right: .9rem; text-align: right; color: var(--code-gutter); user-select: none; }
.tr-line code { background: none; padding: 0; font-size: inherit; color: inherit; }
.tr-line.ran .tr-gutter { color: var(--code-gutter-ran); }
.tr-line.ran::after { content: ''; position: absolute; left: .55rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #8fd3a5; opacity: .55; }
.tr-line.cur { background: rgba(var(--rgb-yellow), .2); box-shadow: inset 4px 0 0 var(--sun-y); }
.tr-line.cur .tr-gutter { color: var(--sun-y); font-weight: 600; }
.tr-line.cur::before { content: ''; position: absolute; left: .35rem; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 8px solid var(--sun-y); border-right: 0; }
.tr-code, pre.code, .terminal-body, .vz-table, .tr-field { font-variant-ligatures: none; }
.t-k { color: var(--sun-y); font-weight: 600; }
.t-b { color: #8ec5f2; }
.t-s { color: #8fd3a5; }
.t-n { color: #f4a48a; }
.t-c { color: var(--code-comment-2); font-style: italic; }
pre.code .t-k { color: var(--sun-y); }

.tr-stage {
  position: relative; min-height: 220px;
  padding: 26px 22px 20px;
  background: var(--screws), var(--grain), var(--ply);
  border: 3px solid var(--box-ink); border-radius: var(--radius-lg);
  border: var(--outline);
  box-shadow: var(--drop);
  overflow-x: auto;
}
.tr-viz { display: grid; gap: 1rem; justify-items: center; }
.tr-note { margin-top: 0; }
.tr-note-text b { font-family: var(--font-sans); font-weight: 800; }
.tr-note-text code { font-size: .8em; }

.tr-vars { background: var(--grain), var(--paper); border-radius: 12px; box-shadow: var(--lift); overflow: hidden; }
.tr-vars-head { padding: .45rem .9rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px dashed var(--paper-line); }
.tr-vars-body { padding: .35rem .5rem .5rem; display: grid; max-height: 13rem; overflow: auto; }
.tr-var { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .45rem; border-radius: 8px; font-size: .88rem; transition: background .3s; }
.tr-var span { font-family: var(--font-mono); font-weight: 600; color: var(--text-dim); }
.tr-var code { background: none; color: var(--box-ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.tr-var.changed { background: rgba(var(--rgb-yellow), .32); animation: var-flash .6s ease; }
@keyframes var-flash { from { background: rgba(var(--rgb-yellow), .8); } }

/* ── Visual primitives ─────────────────────────────────────── */
.vz-cells { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; max-width: 100%; }
.vz-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vz-idx { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.vz-cell {
  min-width: 40px; height: 44px; padding: 0 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--box-ink);
  background: var(--surface-hi); border: 2.5px solid var(--box-ink); border-radius: 9px;
  box-shadow: 0 3px 0 var(--box-ink);
  transition: background .25s, opacity .25s, transform .25s;
}
.vz-cell.dim { opacity: .35; }
.vz-cell.win { background: #d6eafa; }
.vz-cell.cur { background: var(--sun-y); transform: translateY(-3px); }
.vz-cell.ok  { background: #bfe7cd; }
.vz-cell.bad { background: #f8c2b0; transform: translateY(-3px); }
.vz-cell.in-dq { box-shadow: 0 3px 0 var(--box-ink), 0 0 0 3px rgba(var(--rgb-blue), .5); }
.vz-ptrs { display: flex; flex-direction: column; gap: 3px; min-height: 22px; }
.vz-ptr { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: var(--pill); color: #fff; border: 2px solid var(--box-ink); }
.c-sky { --c: var(--sky-b); } .c-tomato { --c: var(--tomato); } .c-plum { --c: var(--plum); } .c-mint { --c: var(--mint); }
.vz-ptr { background: var(--c, var(--plum)); }
.vz-caption { font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); color: var(--text-dim); }
.vz-caption b { font-family: var(--font-mono); color: var(--box-ink); }
.vz-empty { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); color: var(--text-muted); }
.vz-empty.big { font-size: 1.3rem; padding: 2rem; }
.vz-label { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-right: .2rem; }
.vz-map { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.vz-kv { display: inline-flex; gap: .35rem; align-items: center; font-family: var(--font-mono); font-size: .82rem; padding: .15rem .55rem; border-radius: 8px; background: var(--surface-hi); border: 2px solid var(--paper-line); color: var(--box-ink); transition: background .25s; }
.vz-kv b { color: var(--tomato-dark); }
.vz-kv.hi { background: var(--sun-y); border-color: var(--box-ink); }
.vz-legend { display: flex; gap: 1rem; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.vz-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.vz-legend i { width: 16px; height: 12px; border-radius: 3px; }
.lg-box { background: rgba(var(--rgb-blue), .35); border: 2px solid var(--sky-b); }
.lg-best { border: 2px dashed var(--mint-dark); }

/* SVG bars */
.vz-bars, .vz-intervals, .vz-linked, .vz-tree { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.vz-bar { fill: var(--viz-bar); stroke: var(--box-ink); stroke-width: 2.5; transition: fill .25s; }
.vz-bar.dim { fill: var(--viz-bar-dim); }
.vz-bar.cur { fill: var(--sun-y); }
.vz-water { fill: rgba(var(--rgb-blue), .55); stroke: var(--sky-b-dark); stroke-width: 1.5; }
.vz-box { fill: rgba(var(--rgb-blue), .28); stroke: var(--sky-b); stroke-width: 2.5; }
.vz-best { fill: none; stroke: var(--mint-dark); stroke-width: 2.5; stroke-dasharray: 6 5; }
.vz-floor { stroke: var(--box-ink); stroke-width: 3; }
.vz-level { stroke-width: 2; stroke-dasharray: 5 5; stroke: var(--c); }
.vz-t-level { font: 600 10px var(--font-mono); text-anchor: start; fill: var(--c); }
.vz-t-idx { font: 600 10px var(--font-mono); text-anchor: middle; fill: var(--text-muted); }
.vz-t-val { font: 800 11px var(--font-sans); text-anchor: middle; fill: var(--box-ink); }
.vz-svgptr rect { fill: var(--c); stroke: var(--box-ink); stroke-width: 1.5; }
.vz-svgptr text { font: 600 10px var(--font-mono); fill: #fff; text-anchor: middle; }

/* Intervals */
.vz-grid { stroke: rgba(var(--rgb-ink), .12); stroke-width: 1; }
.vz-sep { stroke: var(--ply-edge); stroke-width: 2; stroke-dasharray: 4 4; }
.vz-row-label { font: 600 10px var(--font-mono); fill: var(--text-muted); }
.vz-iv { fill: var(--viz-iv); stroke: var(--box-ink); stroke-width: 2; transition: fill .25s; }
.vz-iv.done { fill: #d6eafa; }
.vz-iv.cur { fill: var(--sun-y); }
.vz-iv.cur.over { fill: #f8c2b0; }
.vz-iv.merged { fill: var(--mint); }
.vz-iv.merged.grow { fill: #8fd3a5; stroke-width: 3; }

/* Stack + split layouts */
.vz-split { display: flex; gap: 2rem; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.vz-stack { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.vz-stack-body { display: flex; flex-direction: column; gap: 4px; min-width: 76px; padding: 6px; border: 3px solid var(--box-ink); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(var(--rgb-cream), .6); min-height: 60px; justify-content: flex-end; }
.vz-slot { position: relative; padding: .35rem .6rem; text-align: center; font-family: var(--font-mono); font-weight: 600; background: #d6eafa; border: 2px solid var(--box-ink); border-radius: 7px; color: var(--box-ink); }
.vz-slot.hi { background: var(--sun-y); }
.vz-top { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-family: var(--font-hand); font-size: calc(.95rem * var(--hand-scale)); color: var(--tomato-dark); white-space: nowrap; }
.vz-verdict { justify-self: center; font-family: var(--font-display); font-size: 1.2rem; padding: .3rem 1rem; border-radius: var(--pill); border: 2.5px solid var(--box-ink); color: #fff; }
.vz-verdict.ok { background: var(--mint); }
.vz-verdict.bad { background: var(--tomato); }

/* Linked list + tree */
.vz-node { fill: var(--surface-hi); stroke: var(--box-ink); stroke-width: 2.5; }
.vz-node-t { font: 800 14px var(--font-mono); text-anchor: middle; fill: var(--box-ink); }
.vz-link { stroke: var(--box-ink); stroke-width: 2.5; fill: none; }
.vz-link.back { stroke: var(--sky-b-dark); }
.vz-arrowhead { fill: var(--box-ink); }
.vz-null { font: 800 18px var(--font-mono); fill: var(--text-muted); }
.vz-edge { stroke: var(--box-ink); stroke-width: 2.5; }
.vz-edge.hi { stroke: var(--tomato); stroke-width: 4; }
.vz-tnode { fill: var(--surface-hi); stroke: var(--box-ink); stroke-width: 2.5; transition: fill .25s; }
.vz-tnode.path { fill: #d6eafa; }
.vz-tnode.cur { fill: var(--sun-y); }
.vz-tnode.fresh { fill: var(--mint); }

/* Relational tables */
.vz-tables { display: grid; gap: 1rem; width: 100%; }
.vz-table { background: var(--surface-hi); border: 2.5px solid var(--box-ink); border-radius: 12px; overflow: hidden; }
.vz-table-title { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .75rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--paper); background: var(--code-head); }
.vz-table-title span { opacity: .75; }
.vz-table-scroll { overflow-x: auto; }
.vz-table table { min-width: 0; font-size: .84rem; }
.vz-table th { padding: .4rem .7rem; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.vz-table td { padding: .38rem .7rem; font-family: var(--font-mono); font-size: .8rem; color: var(--box-ink); transition: background .25s, opacity .25s; }
.vz-table td i { color: var(--text-muted); }
.vz-table tr.drop td { opacity: .45; text-decoration: line-through; text-decoration-color: var(--tomato-dark); text-decoration-thickness: 2px; background: #fbe1d6; }
.vz-table tr.keep td { background: #ddf2e3; }
.vz-table tr.new td { background: #fff1bf; }
.vz-table tr.g0 td { background: #d6eafa; } .vz-table tr.g1 td { background: #fff1bf; } .vz-table tr.g2 td { background: #e6dcf5; } .vz-table tr.g3 td { background: #ddf2e3; }
.vz-table-note { padding: .45rem .75rem; font-family: var(--font-hand); font-size: calc(1.02rem * var(--hand-scale)); color: var(--text-dim); border-top: 2px dashed var(--paper-line); }

@media (max-width: 900px) {
  .tr-main, .tr-brief { grid-template-columns: 1fr; }
  .tr-input { border-left: 0; padding-left: 0; border-top: 2px dashed var(--ply-edge); padding-top: 1rem; }
  /* One column: code, variables, player, timeline, then the stage and the note. The columns
     dissolve into it so the player can stay in reach (stuck under the corner buttons) while
     you scroll down to watch the stage. */
  .tr-left, .tr-right { display: contents; }
  .tr-main { gap: .9rem; }
  .tr-main .tr-controls { position: sticky; top: 64px; z-index: 6; }
  .tr-code { max-height: 300px; }
}
@media (max-width: 1000px) {
  .lamp-l, .lamp-r { display: none; }
}
@media (max-width: 900px) {
  .lab-deco.wall-monitor, .pegboard, .wood-deco.shelf-deco { display: none; }
}
@media (max-width: 760px) {
  /* Bit moves to the middle; his bubble (with the "¿Qué es esto?" link) sits above him */
  #screen-intro .intro-bubble { left: 50%; right: auto; bottom: calc(var(--bit-w) * 1.25 + 4px); width: 230px; max-width: none; margin-left: -115px; text-align: center; }
  #screen-intro .intro-bubble::after { left: 50%; bottom: -19px; margin-left: -8px; border: 8px solid transparent; border-top: 12px solid var(--box-ink); border-bottom: 0; }
  #screen-intro .intro-bit { left: 50%; margin-left: calc(var(--bit-w) / -2); }
  #screen-intro.is-active { padding-bottom: calc(var(--bit-w) * 1.25 + 110px); }
  #screen-intro .intro-foot { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin-top: 2rem; max-width: none; }
}
@media (max-width: 600px) {
  .bench { grid-template-columns: 76px 1fr; padding: 1.4rem 1.1rem 1.1rem 1.3rem; }
  .bench-art { width: 76px; }
  .bench-name { font-size: 1.2rem; }
  .vz-cell { min-width: 30px; height: 38px; font-size: .85rem; padding: 0 3px; }
  .vz-cells { gap: 3px; }
  .tr-controls .tr-play { min-width: 0; }
  .tr-count { width: 100%; text-align: right; }
  .tr-picker { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .tr-pick { flex: none; }
}

/* ================================================================
   NETWORKING · client ↔ server over a cable, step by step
   ================================================================ */
.net-sim { display: grid; gap: 1.3rem; }

.net-request { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.6rem; padding: 1.5rem 1.6rem 1.3rem; }
.net-request-main { flex: 1 1 340px; }
.net-cmd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.net-prompt { background: var(--code-bg); color: #8fd3a5; padding: .5rem .7rem; border-radius: 10px; font-size: .9rem; border: 2.5px solid var(--box-ink); }
.net-cmd select { width: auto; min-width: 96px; font-family: var(--font-mono); font-size: .88rem; }
.net-cmd select:disabled { opacity: .45; }
.net-send { flex: 0 0 auto; }

.net-scene { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; gap: 0; }

.machine {
  position: relative; display: flex; flex-direction: column; gap: .55rem; min-width: 0;
  padding: 1.6rem 1.2rem 1.2rem;
  background: var(--screws), var(--grain), var(--ply);
  border: 3px solid var(--box-ink); border-radius: 16px;
  border: var(--outline);
  box-shadow: var(--drop);
  transition: box-shadow .3s;
}
.machine.busy { box-shadow: var(--drop), 0 0 0 4px rgba(var(--rgb-yellow), .55); }
.machine.server.miss { box-shadow: var(--drop), 0 0 0 4px rgba(var(--rgb-red), .55); }
.machine-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.machine-name { font-family: var(--font-display); font-size: 1.45rem; color: var(--box-ink); line-height: 1; }
.machine-addr { font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); }
.machine-state { font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.tcp-state { display: inline-block; margin-left: .3rem; padding: .08rem .55rem; border-radius: var(--pill); font-family: var(--font-mono); font-size: .76rem; letter-spacing: 0; color: var(--box-ink); background: var(--paper-2); border: 2px solid var(--box-ink); transition: background .3s; }
.tcp-state[data-state="ESTABLISHED"] { background: #bfe7cd; }
.tcp-state[data-state="SYN_SENT"], .tcp-state[data-state="SYN_RCVD"] { background: #fff1bf; }
.tcp-state[data-state="FIN_WAIT_1"], .tcp-state[data-state="LAST_ACK"], .tcp-state[data-state="TIME_WAIT"] { background: #f8d4c4; }
.tcp-state[data-state="LISTEN"] { background: #d6eafa; }

.machine-screen, .machine-log {
  margin: 0; font-family: var(--font-mono); font-variant-ligatures: none;
  background: var(--code-bg); color: var(--code-fg); border: 3px solid var(--box-ink); border-radius: 12px;
  overflow: auto; white-space: pre;
}
.machine-screen { flex: 1; min-height: 230px; max-height: 330px; padding: .8rem .9rem; font-size: 10px; line-height: 1.15; box-shadow: inset 0 0 0 4px var(--code-head); }
.machine-log { min-height: 92px; max-height: 120px; padding: .55rem .7rem; font-size: .7rem; line-height: 1.5; color: #9ad7b0; }

.net-threads { display: flex; flex-wrap: wrap; gap: .4rem; }
.net-thread { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--box-ink); background: #d6eafa; border: 2px solid var(--box-ink); border-radius: var(--pill); }
.net-thread i { font-style: normal; font-weight: 400; color: var(--text-dim); }
.net-thread.done { opacity: .5; background: var(--paper-2); }
.net-disk { display: flex; flex-direction: column; gap: .3rem; }
.net-files { display: flex; flex-wrap: wrap; gap: .25rem; }
.net-file { font-family: var(--font-mono); font-size: .68rem; padding: .08rem .4rem; border-radius: 6px; background: var(--surface-hi); border: 1.5px solid var(--paper-line); color: var(--text-dim); transition: background .25s; }
.net-file.hit { background: var(--sun-y); border-color: var(--box-ink); color: var(--box-ink); font-weight: 600; }
.net-file.scan { background: #d6eafa; }

/* The cable between both machines */
.net-wire { position: relative; display: grid; place-items: center; min-height: 120px; }
.net-cable {
  position: absolute; left: -6px; right: -6px; top: 50%; height: 16px; margin-top: -8px;
  background: #56616c; border: var(--outline); border-radius: 9px;
}
.net-wire-label { position: absolute; top: calc(50% + 16px); font-family: var(--font-hand); font-size: calc(.95rem * var(--hand-scale)); line-height: 1.1; text-align: center; color: var(--box-ink); }
.net-packet {
  position: absolute; z-index: 2; left: 8%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: 64px; padding: .35rem .55rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; text-align: center; white-space: nowrap;
  color: var(--box-ink); background: var(--surface-hi); border: 2.5px solid var(--box-ink); border-radius: 8px;
  box-shadow: 0 3px 0 var(--box-ink);
}
.net-packet::before { content: ''; position: absolute; inset: 3px; border: 1.5px dashed rgba(var(--rgb-ink), .3); border-radius: 5px; pointer-events: none; }
.net-packet.data { background: var(--sun-y); }
.net-packet.ctrl { background: #d6eafa; }
.net-packet.s2c.data { background: #bfe7cd; }

/* Player + timeline */
.net-player { display: grid; gap: .7rem; }
.net-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.net-phase { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .65rem; border-radius: 12px; background: rgba(var(--rgb-cream), .55); border: 2.5px solid rgba(var(--rgb-ink), .35); transition: background .2s, border-color .2s; }
.net-phase.active { background: var(--paper); border-color: var(--box-ink); box-shadow: 0 3px 0 var(--box-ink); }
.net-phase-label { font-size: .78rem; font-weight: 800; color: var(--box-ink); }
.net-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.net-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--box-ink); background: var(--surface-hi); padding: 0; }
.net-dot.done { background: var(--ply-edge); }
.net-dot.cur { background: var(--tomato); transform: scale(1.25); }

/* Narration + inspector */
.net-bottom { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.3rem; align-items: start; }
.net-note { margin-top: 0; }
.net-inspector { display: grid; gap: .6rem; padding: 1rem; background: var(--grain), var(--paper); border-radius: 14px; box-shadow: var(--lift); min-width: 0; }
.net-insp-head { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-family: var(--font-display); font-size: 1.15rem; color: var(--box-ink); }
.net-insp-head .meta { font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); align-self: center; }
.net-layer { position: relative; padding: .6rem .8rem .6rem 4.6rem; border: 2px solid var(--paper-line); border-radius: 10px; background: var(--surface-hi); font-family: var(--font-mono); font-size: .8rem; color: var(--box-ink); min-width: 0; }
.net-layer-tag { position: absolute; left: .55rem; top: .55rem; width: 3.4rem; text-align: center; padding: .1rem 0; border-radius: 6px; font-size: .68rem; font-weight: 600; color: #fff; border: 2px solid var(--box-ink); }
#netLayerIp .net-layer-tag { background: var(--plum); }
#netLayerTcp .net-layer-tag { background: var(--sky-b); }
.net-layer.http .net-layer-tag { background: var(--tomato); }
.net-layer.empty { padding-left: .8rem; font-family: var(--font-hand); font-size: calc(1.1rem * var(--hand-scale)); color: var(--text-dim); }
.net-arrow { color: var(--text-muted); }
.net-tcp { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .3rem .9rem; margin: 0; }
.net-tcp div { display: flex; flex-direction: column; }
.net-tcp dt { font-family: var(--font-sans); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.net-tcp dd { font-weight: 600; }
.flag { display: inline-block; margin-right: .25rem; padding: 0 .35rem; border-radius: 5px; font-size: .72rem; color: #fff; background: var(--text-dim); }
.flag.f-SYN { background: var(--sky-b); } .flag.f-ACK { background: var(--mint-dark); } .flag.f-FIN { background: var(--tomato); } .flag.f-PSH { background: #c98a14; }
.net-http { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); font-variant-ligatures: none; font-size: .74rem; line-height: 1.45; }
.h-start { background: #ffd9cc; color: var(--box-ink); font-weight: 600; border-radius: 3px; }
.h-head { background: #d6eafa; border-radius: 3px; }
.h-head b { color: var(--sky-b-dark); }
.h-crlf { color: var(--tomato-dark); font-size: .68rem; opacity: .75; }
.h-body { display: inline; background: #ddf2e3; font-size: .66rem; line-height: 1.1; white-space: pre; }
.h-more { font-family: var(--font-hand); font-size: calc(.95rem * var(--hand-scale)); color: var(--text-muted); }
.net-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .5rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: var(--text-dim); }
.net-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.net-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--box-ink); }
.lg-start { background: #ffd9cc; } .lg-head { background: #d6eafa; } .lg-crlf { background: #fff; border-color: var(--tomato-dark) !important; } .lg-body { background: #ddf2e3; }

@media (max-width: 900px) {
  /* Tablet: client and server stay side by side, with a shorter cable between them */
  .net-scene { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
  .net-bottom { grid-template-columns: 1fr; }
  .net-timeline { grid-template-columns: repeat(5, minmax(84px, 1fr)); overflow-x: auto; }
}
@media (max-width: 700px) {
  /* Phone: client on top, server below, the cable runs down between them */
  .net-scene { grid-template-columns: 1fr; }
  .net-wire { min-height: 150px; }
  .net-cable { left: 50%; right: auto; top: -6px; bottom: -6px; width: 14px; height: auto; margin: 0 0 0 -7px; background: #56616c; }
  .net-wire-label { top: auto; left: calc(50% + 18px); text-align: left; }
}

/* ================================================================
   ACCOUNT · "Mi espacio" and progress badges
   ================================================================ */
.account-btn { overflow: hidden; padding: 0; }
.account-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.account-btn.signed-in { border-color: var(--mint-dark); box-shadow: 0 4px 0 var(--mint-dark); }

.profile-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.6rem; margin-bottom: 2rem; }
.profile-card { display: flex; flex-direction: column; gap: 1.1rem; }
.profile-id { display: flex; align-items: center; gap: 1rem; }
.avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--paper); border: 3px solid var(--box-ink); box-shadow: 0 4px 0 var(--box-ink); color: var(--box-ink);
}
.avatar .ic { width: 36px; height: 36px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--box-ink); }
.profile-sub { font-family: var(--font-hand); font-size: calc(1.15rem * var(--hand-scale)); color: var(--text-dim); line-height: 1.25; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.profile-note { font-family: var(--font-hand); font-size: calc(1.05rem * var(--hand-scale)); color: var(--text-dim); line-height: 1.25; }
.profile-note:empty { display: none; }

/* Follows Google's sign-in button guidance: white button, official "G", clear text */
.btn-google {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1.1rem .6rem .8rem;
  font: 700 .98rem var(--font-sans); color: #1f1f1f;
  background: #fff; border: 2.5px solid var(--box-ink); border-radius: var(--pill);
  box-shadow: 0 4px 0 var(--box-ink);
  transition: transform .12s, box-shadow .12s;
}
.btn-google:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--box-ink); }
.btn-google:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--box-ink); }
.btn-google:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--box-ink); }
.g-logo { width: 20px; height: 20px; flex: none; }

.profile-overview { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem 1.4rem; }
.profile-overview .btn { grid-column: 1 / -1; justify-self: start; }
.ring { position: relative; width: 120px; height: 120px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring-bg { stroke: var(--paper-2); }
.ring-fg { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring-text b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; color: var(--box-ink); }
.ring-text span { font-family: var(--font-hand); font-size: calc(.95rem * var(--hand-scale)); color: var(--text-dim); }
.profile-stats { display: grid; gap: .5rem; margin: 0; }
.profile-stats div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px dashed var(--paper-line); padding-bottom: .3rem; }
.profile-stats dt { font-weight: 700; color: var(--text-dim); font-size: .92rem; }
.profile-stats dd { font-family: var(--font-mono); font-weight: 600; color: var(--box-ink); }

.progress-list { display: grid; gap: 1.6rem; }
.progress-area h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--paper); -webkit-text-stroke: 1.5px var(--box-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--box-ink); margin-bottom: .7rem; }
.progress-stations { --row-gap: 1.2rem; gap: 1.2rem; }
.progress-station { display: flex; flex-direction: column; gap: .7rem; }
.progress-station-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.progress-station-head a { font-family: var(--font-display); font-size: 1.25rem; color: var(--box-ink); text-decoration: none; }
.progress-station-head a:hover { color: var(--tomato-dark); }
.progress-station-head span { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.bar { height: 12px; border-radius: var(--pill); background: var(--paper-2); border: 2px solid var(--box-ink); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--mint); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.checklist { list-style: none; display: grid; gap: .3rem; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-dim); }
.checklist .tick { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; border: 2px solid var(--box-ink); background: var(--surface-hi); color: transparent; }
.checklist .tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.checklist li.done { color: var(--box-ink); }
.checklist li.done .tick { background: var(--mint); color: #fff; }
.step-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.step-chip { font-size: .7rem; font-weight: 800; padding: .08rem .5rem; border-radius: var(--pill); border: 2px solid var(--paper-line); color: var(--text-muted); }
.step-chip.seen { border-color: var(--box-ink); background: #d6eafa; color: var(--box-ink); }
.profile-danger { text-align: center; padding: 2rem 0 4rem; }
.profile-danger .link-btn { font-size: 1.1rem; color: var(--tomato-dark); }

/* Progress badge on bench and station cards */
.card-progress {
  position: absolute; top: 12px; right: 30px;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: var(--pill);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--box-ink); background: var(--surface-hi); border: 2px solid var(--box-ink);
}
.card-progress .ic { width: 12px; height: 12px; stroke-width: 3; }
.card-progress.complete { background: var(--mint); color: #fff; }

@media (max-width: 900px) {
  .profile-top { grid-template-columns: 1fr; }
}

/* ================================================================
   HEAT DIFFUSION · a plate split into one band of rows per thread
   ================================================================ */
.heat-canvas-wrap { background: var(--box-ink); border: var(--outline); border-radius: 12px; }
.heat-canvas-wrap canvas { cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.heat-scale { display: flex; align-items: center; gap: .5rem; padding: .6rem .2rem 0; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: var(--text-dim); }
.heat-scale i { flex: 1; height: 14px; border: 2.5px solid var(--box-ink); border-radius: var(--pill);
  background: linear-gradient(90deg, #2b4c7e, var(--sky-b) 25%, #8fd3a5 50%, var(--sun-y) 75%, var(--tomato)); }
.heat-r-hint { color: var(--mint-dark); }
.heat-r-hint.bad { color: var(--tomato-dark); font-weight: 700; }
.heat-note { margin: 1.4rem 0; }

.heat-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.4rem; }
.heat-panel { padding: 1.6rem 1.5rem 1.3rem; }
.heat-panel.wide { grid-column: 1 / -1; }
.heat-panel h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--box-ink); margin-bottom: .7rem; }
.heat-svg svg { width: 100%; height: auto; display: block; }
.hl-label { font: 800 11px var(--font-sans); fill: var(--box-ink); text-anchor: end; }
.hl-axis, .hc-axis { font: 600 10px var(--font-mono); fill: var(--text-muted); }
.hc-grid { stroke: rgba(var(--rgb-ink), .12); stroke-width: 1; }
.hc-base { stroke: var(--box-ink); stroke-width: 3; }
.hc-eps { stroke: var(--mint-dark); stroke-width: 2.5; stroke-dasharray: 6 5; }
.hc-eps-label { font: 700 11px var(--font-mono); fill: var(--mint-dark); }
.hc-line { fill: none; stroke: var(--tomato); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.hc-line.bad { stroke: var(--plum); }

.lanes { display: grid; gap: .55rem; }
.lane { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 6.6rem; grid-template-areas: "name bar state" "rows rows rows"; align-items: center; gap: .15rem .6rem; }
.lane-name { grid-area: name; display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .88rem; color: var(--box-ink); }
.lane-name::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--c); border: 2px solid var(--box-ink); }
.lane-rows { grid-area: rows; font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
.lane-bar { grid-area: bar; display: flex; height: 16px; border: 2.5px solid var(--box-ink); border-radius: var(--pill); overflow: hidden; background: var(--surface-hi); }
.lane-busy { display: block; height: 100%; background: var(--c); transition: width .12s linear; }
.lane-wait { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--chip-wait) 0 4px, var(--ply-edge) 4px 7px); }
.lane-state { grid-area: state; justify-self: end; font-size: .74rem; font-weight: 800; padding: .08rem .5rem; border-radius: var(--pill); border: 2px solid var(--box-ink); background: var(--surface-hi); color: var(--box-ink); white-space: nowrap; }
.lane-state[data-state="en la barrera"] { background: var(--sun-y); }
.lane-state[data-state="calculando"] { background: #d6eafa; }
.lane-state[data-state="terminó"] { background: #bfe7cd; }
.heat-key { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .78rem; font-weight: 700; color: var(--text-dim); }
.heat-key span { display: inline-flex; align-items: center; gap: .35rem; }
.heat-key i { width: 18px; height: 12px; border-radius: 4px; border: 2px solid var(--box-ink); }
.k-busy { background: var(--sky-b); }
.k-wait { background: repeating-linear-gradient(45deg, var(--chip-wait) 0 4px, var(--ply-edge) 4px 7px); }

.stencil { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: 1rem; }
.stencil svg { width: 100%; height: auto; }

@media (max-width: 900px) {
  .heat-panels { grid-template-columns: 1fr; }
  .stencil { grid-template-columns: 1fr; justify-items: center; }
  .stencil svg { max-width: 180px; }
  /* The code under the drawing keeps the card's width (it scrolls inside) instead of spilling out */
  .stencil > pre { justify-self: stretch; min-width: 0; max-width: 100%; }
}

/* ── Art direction: outlines for paper surfaces ───────────── */
.note, .tr-vars, .net-inspector { border: var(--outline); }
.note, .tr-vars, .net-inspector { box-shadow: var(--lift); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .mod-bar .wrap { padding-right: 0; flex-wrap: wrap; }
  /* The title sits under the corner buttons and scrolls away with the page instead of
     covering a third of a small screen */
  .mod-bar { position: relative; padding-top: 70px; }
  /* In a station Bit would sit on top of the code, the legend and the player, so only his
     bubble shows (the ? button opens it, or starts the tour) */
  body[data-route="module"] #guideBit { display: none; }
  /* Race counters: two per row, the operations count gets the whole row */
  .vs-stats { grid-template-columns: 1fr 1fr; }
  .vs-stats > div:last-child { grid-column: 1 / -1; }
}

/* ── Tablet (portrait, ~834×1194) ─────────────────────────────
   One column like a phone, but with room to spare: the control clipboards use two columns,
   and cards keep their bigger drawings. */
@media (min-width: 601px) and (max-width: 1024px) {
  .bench { grid-template-columns: 100px 1fr; padding: 1.4rem 1.3rem 1.2rem 1.5rem; }
  .bench-art { width: 100px; }
  .bench-name { font-size: 1.35rem; }
  .bench-line { font-size: calc(1.1rem * var(--hand-scale)); }
  #areaShelf { gap: 1.4rem; }
  #areaShelf .station { flex: 0 1 240px; }
  #areaShelf .station-name { font-size: 1.32rem; }
  .problem-shelf .station { flex-basis: 340px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* The controls sit above the stage here, so they spread over two columns */
  .workspace-grid > .clipboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; align-content: start; }
  .workspace-grid > .clipboard > :is(.divider, .btn-row, .subtabs, h3, h4, p, .alert, .status-note) { grid-column: 1 / -1; }
  /* Control groups that the station swaps in and out (the Rotonda's two simulations) keep the full width */
  .workspace-grid > .clipboard > div:not(.ctl) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .corner-bar { top: 10px; right: 10px; gap: 6px; }
  .round-btn { width: 40px; height: 40px; }
  .back-link { top: 10px; left: 10px; }
  #screen-intro { --bit-w: 104px; }
  .lab-deco.blueprint, .wood-deco.plan { top: 72px; left: 10px; width: 112px; }
  .steps { width: 100%; }
  /* The three step tabs share the bar without scrolling sideways */
  .step { flex: 1 1 0; min-width: 0; justify-content: center; gap: .25rem; padding: .4rem .25rem; font-size: .82rem; }
  .step-n { flex: none; width: 18px; height: 18px; font-size: .68rem; }
  /* Long problem names wrap instead of being cut with "…" */
  .mod-title h2 { white-space: normal; font-size: 1.35rem; line-height: 1.12; }
  /* The player fits on one row: smaller round buttons, the play button takes what is left */
  .tr-controls { gap: .35rem; padding: .55rem .6rem; }
  .tr-controls .round-btn.sm { width: 34px; height: 34px; }
  .tr-controls .tr-play { flex: 1; min-width: 0; padding-inline: .5rem; }
  .workspace-grid > .stage, .workspace-grid > .net-stack { order: -1; }
  .guide .bit { width: 60px; }
  .guide .bubble { max-width: calc(100vw - 110px); margin-bottom: 1.45rem; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================
   PROBLEMAS DE CÓDIGO · picker by difficulty + matrix visual
   ================================================================ */
.tr-picker.grouped { flex-direction: column; flex-wrap: nowrap; gap: .55rem; }
.tr-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tr-group-label { flex: none; min-width: 4.9rem; text-align: center; }
.tr-picker.grouped .tr-pick { padding-left: .85rem; }

.vz-cells.small { gap: 4px; }
.vz-cells.small .vz-cell { min-width: 30px; height: 38px; padding: 0 3px; font-size: .88rem; }

.vz-matrix { --cols: 1; display: grid; grid-template-columns: auto repeat(var(--cols, 1), 40px); gap: 6px; align-items: center; justify-content: center; max-width: 100%; }
.vz-mx-idx { min-width: 1rem; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); text-align: center; }
.vz-mx-cell {
  height: 40px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--box-ink);
  background: var(--surface-hi); border: 2.5px solid var(--box-ink); border-radius: 9px;
  transition: background .25s, transform .25s;
}
.vz-mx-cell.land { background: var(--ply-2); box-shadow: 0 3px 0 var(--box-ink); }
.vz-mx-cell.water { background: rgba(var(--rgb-blue), .14); border-color: var(--ply-edge); color: var(--text-muted); }
.vz-mx-cell.isl { background: var(--c, var(--mint)); color: var(--paper); }
.vz-mx-cell.cur { outline: 3px solid var(--box-ink); outline-offset: 2px; }
.vz-mx-cell.pop { transform: translateY(-3px); box-shadow: 0 3px 0 var(--box-ink); }
.vz-mx-cell.look { outline: 3px dashed var(--box-ink); outline-offset: 2px; }
.lg-land { background: var(--ply-2); border: 2px solid var(--box-ink); }
.lg-water { background: rgba(var(--rgb-blue), .14); border: 2px solid var(--ply-edge); }
.lg-sunk { background: var(--mint); border: 2px solid var(--box-ink); }

@media (max-width: 600px) {
  .tr-picker.grouped { overflow-x: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
  .tr-group { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; padding-bottom: 6px; scrollbar-width: none; }
  .vz-matrix { grid-template-columns: auto repeat(var(--cols, 1), 30px); gap: 4px; }
  .vz-mx-cell { height: 30px; font-size: .85rem; border-radius: 7px; }
  .vz-legend { flex-wrap: wrap; gap: .4rem .9rem; }
}