/* ─────────────────────────────────────────────────────────────
   Design tokens
   ───────────────────────────────────────────────────────────── */
:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --container: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Dark (default) */
  --bg: #0a1322;
  --bg-2: #0e1a2d;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8ecf3;
  --muted: #8b95a7;
  --accent: #38bdf8;
  --accent-2: #e3b341;
  --accent-ink: #04202f;
  --brand-blue: #38bdf8;
  --brand-gold: #e3b341;
  --circuit: 56, 189, 248;
  --circuit-gold: 227, 179, 65;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --syn-keyword: #c4b5fd;
  --syn-string: #86efac;
  --syn-number: #fdba74;
  --syn-comment: #7c8799;
  --syn-function: #7dd3fc;
  --syn-class: #fcd34d;
  --syn-property: #a5f3fc;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7fb;
    --bg-2: #eef0f6;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-hover: #ffffff;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.18);
    --text: #0f172a;
    --muted: #5b6475;
    --accent: #0284c7;
    --accent-2: #b7861f;
    --accent-ink: #ffffff;
    --brand-blue: #0284c7;
    --brand-gold: #b7861f;
    --circuit: 2, 132, 199;
    --circuit-gold: 183, 134, 31;
    --shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.25);
    --syn-keyword: #7c3aed;
    --syn-string: #15803d;
    --syn-number: #c2410c;
    --syn-comment: #6b7280;
    --syn-function: #0369a1;
    --syn-class: #a16207;
    --syn-property: #0e7490;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef0f6;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-hover: #ffffff;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --muted: #5b6475;
  --accent: #0284c7;
  --accent-2: #b7861f;
  --accent-ink: #ffffff;
  --brand-blue: #0284c7;
  --brand-gold: #b7861f;
  --circuit: 2, 132, 199;
  --circuit-gold: 183, 134, 31;
  --shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.25);
  --syn-keyword: #7c3aed;
  --syn-string: #15803d;
  --syn-number: #c2410c;
  --syn-comment: #6b7280;
  --syn-function: #0369a1;
  --syn-class: #a16207;
  --syn-property: #0e7490;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* Subtle grain over everything for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip-link:focus { top: 16px; }

/* ─────────────────────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
}

/* Blur lives on a pseudo-element: backdrop-filter on .nav itself would trap the
   fixed mobile tab bar inside the header. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: opacity 0.3s var(--ease);
}

.nav.is-scrolled::before { opacity: 1; }

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}

/* The logo: the shield, then the name in two lines (both SVG, coloured here so they follow the theme) */
.brand__mark { display: grid; place-items: center; color: var(--brand-gold); }
.brand__shield { width: 30px; height: 33px; display: block; }
.brand__name { display: block; }
.brand__word { display: block; height: 34px; width: auto; }
.brand__word .wm-a { fill: var(--text); }
.brand__word .wm-b { fill: var(--brand-blue); }
.brand__word .wm-g { fill: var(--brand-gold); }

/* Tabs — the active pill slides between pages via the View Transitions API */
.tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  view-transition-name: tab-bar;
}

.tab {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}

.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); }

.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  view-transition-name: tab-pill;
}

.tab__icon {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav .icon-btn { justify-self: end; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}

.icon-btn:hover {
  border-color: var(--border-strong);
  transform: rotate(-12deg);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .icon-moon { display: block; }
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92svh, 920px);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
  isolation: isolate;
}

/* Soft colored glow behind the circuit */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(closest-side at 30% 70%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  filter: blur(20px);
  z-index: -2;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* the traces come out from under the header rather than running behind it */
  -webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 130px);
  mask-image: linear-gradient(to bottom, transparent 40px, #000 130px);
}

/* Fade the circuit into the page below */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: -1;
  pointer-events: none;
}

.hero__content {
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 28px;
}

.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--ease) infinite;
}

@keyframes pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(3); opacity: 0; }
}

.hero__title {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 14ch;
}

.gradient-text {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: 26px;
  max-width: 54ch;
  text-wrap: pretty;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2.1vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hero__sub a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.hero__sub a:hover { color: var(--accent); }

/* Key phrases in the Workbench line: bold, with a gradient underline that draws in on load. */
.hero__sub .hl {
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) no-repeat 0 100% / 0% 3px;
  padding-bottom: 2px;
  animation: hl-draw 0.9s var(--ease) forwards;
  animation-delay: calc(0.5s + var(--hl-i, 0) * 0.18s);
}
.hero__sub .hl:nth-of-type(2) { --hl-i: 1; }
.hero__sub .hl:nth-of-type(3) { --hl-i: 2; }
.hero__sub .hl:nth-of-type(4) { --hl-i: 3; }
@keyframes hl-draw { to { background-size: 100% 3px; } }
@media (prefers-reduced-motion: reduce) {
  .hero__sub .hl { animation: none; background-size: 100% 3px; }
}

.hero__lede {
  margin-top: 14px;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* The hero's tiles: one column, or two by two on wide screens (Project Builds on the right, under the circuit,
   whose output pad lands just above it). Each one is a link to its page, or to its section of one. */
.hero__cards { display: grid; gap: 12px 14px; max-width: 460px; margin-top: 28px; }
@media (min-width: 1100px) {
  .hero__cards { grid-template-columns: repeat(2, minmax(0, 440px)); max-width: none; }
}
.hero-tile {
  --tile-hue: #f59e0b;
  display: block; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background:
    radial-gradient(360px 110px at 0% 40px, color-mix(in srgb, var(--tile-hue) 16%, transparent), transparent 70%),
    var(--surface);
  backdrop-filter: blur(6px);
}
.hero-tile.reveal.is-in { transition: opacity 0.8s var(--ease), transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s var(--ease); }
.hero-tile:hover { border-color: var(--border-strong); }
.hero-tile.reveal.is-in:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hero-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-tile--apps { --tile-hue: var(--brand-gold); }
.hero-tile--ide { --tile-hue: #38bdf8; }
.hero-tile--builds { --tile-hue: #2fae86; }
.hero-tile__head { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 14px 16px; }
.hero-tile__art { flex: none; width: 52px; height: 50px; display: grid; place-items: center; }
.hero-tile__text { display: grid; gap: 2px; min-width: 0; }
.hero-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.hero-tile__desc { font-size: 0.86rem; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.hero-tile__fine { font-size: 0.7rem; color: var(--muted); opacity: 0.8; }
.hero-tile__go { margin-left: auto; color: var(--muted); transition: transform 0.25s var(--ease), color 0.2s; }
.hero-tile:hover .hero-tile__go { transform: translateX(3px); color: var(--text); }
/* The art tilts the way the old cards' did */
.hero-tile:hover :is(.art-pack, .art-p4, .art-ide) { transform: rotate(4deg) translateY(-3px); }
/* Apps: the two app icons, fanned */
.hero-tile__apps { position: relative; }
.hero-tile__apps img {
  position: absolute; top: 9px; width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55); transition: transform 0.35s var(--ease);
}
.hero-tile__apps img:first-child { left: -2px; transform: rotate(-10deg) translateY(-3px); }
.hero-tile__apps img:last-child { left: 22px; transform: rotate(6deg) translateY(3px); }
.hero-tile:hover .hero-tile__apps img:first-child { transform: rotate(-14deg) translate(-2px, -2px); }
.hero-tile:hover .hero-tile__apps img:last-child { transform: rotate(10deg) translate(2px, -2px); }
/* The little pictures on the hero's tiles: a code window, a booster and the P4 kit with its screen. */
.art-ide {
  flex: none; position: relative; display: grid; align-content: start; gap: 4px; width: 46px; height: 36px;
  padding: 9px 6px 0; border-radius: 5px; background: #0b1220; border: 1px solid #2b3a55;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55); transform: rotate(-8deg); transition: transform 0.35s var(--ease);
}
.art-ide::before { content: ""; position: absolute; left: 5px; top: 4px; width: 3px; height: 3px; border-radius: 50%; background: #e04848; box-shadow: 5px 0 0 #f4d03f, 10px 0 0 #3ecf6e; }
.art-ide i { display: block; height: 3px; border-radius: 2px; background: #38bdf8; }
.art-ide i:nth-child(2) { width: 70%; margin-left: 6px; background: #e3b341; }
.art-ide i:nth-child(3) { width: 50%; margin-left: 6px; background: #8b95a7; }
.art-pack {
  flex: none; width: 34px; height: 47px; border-radius: 3px;
  background: #14100c url("https://northbridgelandmark.com/games/pack-opener/img/card-back-sm.webp") center / cover no-repeat;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55); transform: rotate(-8deg); transition: transform 0.35s var(--ease);
}
/* The ESP32-P4 kit with the 3.5" screen on it, showing colour bars. */
.art-p4 {
  flex: none; position: relative; width: 50px; height: 35px; border-radius: 4px;
  background: #1d5f45; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55);
  transform: rotate(-8deg); transition: transform 0.35s var(--ease);
}
.art-p4 i {
  position: absolute; inset: 2px 3px 6px; border-radius: 2px; border: 2px solid #0b0d12;
  background: linear-gradient(90deg, #f5f5f5 0 14.3%, #f4d03f 0 28.6%, #3ed1d1 0 42.9%, #3ecf6e 0 57.1%, #d14fd1 0 71.4%, #e04848 0 85.7%, #3f6fe0 0);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
}

.scroll-hint span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text);
  animation: scroll 1.8s var(--ease) infinite;
}

@keyframes scroll {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 0.95rem/1 var(--font-body);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s, border-color 0.2s;
}

.btn--primary {
  background: var(--text);
  color: var(--bg);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   Sections
   ───────────────────────────────────────────────────────────── */
.section {
  padding: 110px 0;
  scroll-margin-top: 40px;
}

.section__head {
  margin-bottom: 48px;
  max-width: 640px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 14px;
}

.section__head h2,
.contact-card h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
}

.section__sub {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.05rem;
}

.section--tight { padding: 40px 0 110px; }

/* ─────────────────────────────────────────────────────────────
   Inner page header (plain background)
   ───────────────────────────────────────────────────────────── */
.page-head {
  position: relative;
  isolation: isolate;
  padding: 150px 0 8px;
}

/* The page head's circuit (circuit.js adds the canvas) */
.page-head__circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 130px);
  mask-image: linear-gradient(to bottom, transparent 40px, #000 130px);
}

.page-head h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.page-head__sub {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Sub-navigation inside a section (Workbench: Flash / Starters / Packages) */
.subnav {
  flex-wrap: wrap;
  max-width: 100%;
  display: inline-flex;
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.subnav a {
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}

.subnav a:hover { color: var(--text); }

.subnav a[aria-current="page"] {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.page-head .guide-open { margin-left: 10px; }

/* ─────────────────────────────────────────────────────────────
   Projects — bento grid
   ───────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  grid-auto-flow: dense;
  gap: 16px;
}

.tile {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.tile__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  transition: opacity 0.3s;
}

.tile:hover .tile__glow { opacity: 1; }

.tile--lg { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }

.tile--lg {
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--surface);
}


.tile__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tile__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: transform 0.35s var(--ease), color 0.2s, background-color 0.2s;
}

.tile:hover .tile__arrow {
  transform: rotate(45deg);
  color: var(--accent-ink);
  background: var(--accent);
  border-color: transparent;
}

.tile h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 8px;
}

.tile p {
  color: var(--muted);
  font-size: 0.96rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status--live { color: #34d399; }
.status--wip { color: #fbbf24; }
.status--idea { color: var(--accent-2); }

:root[data-theme="light"] .status--live { color: #059669; }
:root[data-theme="light"] .status--wip { color: #b45309; }
:root[data-theme="light"] .game { --c: hsl(var(--hue) 70% 38%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .status--live { color: #059669; }
  :root:not([data-theme="dark"]) .status--wip { color: #b45309; }
  :root:not([data-theme="dark"]) .game { --c: hsl(var(--hue) 70% 38%); }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: auto 0 0;
}

.tile.tile--lg h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: auto; }
.tile.tile--lg p { font-size: 1.08rem; max-width: 46ch; }
.tile.tile--lg .tags { margin-top: 4px; }

.tags li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   Games
   ───────────────────────────────────────────────────────────── */
.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
/* The Games page's two lists: All games, then Apps (for iPhone and Android) */
.games__label { margin: 0 0 18px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; scroll-margin-top: 96px; }
.games + .games__label { margin-top: 64px; }
.games__sub { margin: -8px 0 20px; max-width: 62ch; color: var(--muted); }
.game__pic--icon { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }
a.game:hover .game__pic--icon { transform: scale(1.08) rotate(-3deg); }
.game__status { margin-top: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--c); }

.game {
  --c: hsl(var(--hue) 80% 60%);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease);
}

a.game:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--c) 55%, transparent);
}

.game__art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 18%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 35%, transparent), transparent 65%),
    var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.game__art > span:not(.game__pic) {
  font-size: 3.4rem;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  transition: transform 0.5s var(--ease);
}

a.game:hover .game__art > span:not(.game__pic) { transform: scale(1.15) rotate(-6deg); }

.game__pic { display: block; transition: transform 0.5s var(--ease); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4)); }
.game__pic--back {
  width: 64px; aspect-ratio: 488 / 680; border-radius: 4px; transform: rotate(-6deg);
  background: #14100c url("https://northbridgelandmark.com/games/pack-opener/img/card-back.webp") center / cover no-repeat;
}
a.game:hover .game__pic--back { transform: scale(1.12) rotate(4deg); }
.game__pic--21 { position: relative; width: 96px; height: 84px; }
.pcard {
  position: absolute; top: 4px; width: 54px; height: 76px; border-radius: 5px; padding: 4px 6px;
  background: #fbf7ec; border: 1px solid rgba(0, 0, 0, 0.15); color: #1d1d1f;
  font: 700 1.2rem/1 var(--font-display); display: flex; flex-direction: column; gap: 2px;
}
.pcard i { font-style: normal; font-size: 1.1rem; }
.pcard:first-child { left: 2px; transform: rotate(-9deg); }
.pcard:last-child { right: 2px; transform: rotate(8deg); }
.pcard--red { color: #c8102e; }
a.game:hover .game__pic--21 { transform: scale(1.1) rotate(-3deg); }

.game__body {
  padding: 20px 22px 6px;
}

.game__body h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

.game__body p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.93rem;
}

.game__cta {
  padding: 12px 22px 20px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--c);
}

.build-pic { width: 150px; height: auto; transform: rotate(-4deg); }
a.game:hover .build-pic { transform: scale(1.06) rotate(2deg); }

.game--soon { opacity: 0.55; }
.game--soon .game__art > span { filter: grayscale(0.6); }
.game--soon .game__cta { color: var(--muted); }

/* ─────────────────────────────────────────────────────────────
   Links
   ───────────────────────────────────────────────────────────── */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.link-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s, padding 0.35s var(--ease);
}

.link-row:hover {
  background: var(--surface);
  padding-left: 20px;
  padding-right: 20px;
}

.link-row__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.link-row__note { color: var(--muted); }

.link-row__url {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row__arrow {
  color: var(--muted);
  transition: transform 0.35s var(--ease), color 0.2s;
}

.link-row:hover .link-row__arrow {
  color: var(--accent);
  transform: translate(3px, -3px);
}

/* A Library pick with more under it: its other links, and the story of what it meant */
.link-row--lead { border-bottom: 0; }
.pick-extra { display: grid; gap: 14px; padding: 0 8px 22px; border-bottom: 1px solid var(--border); }
.pick-also { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pick-also a {
  font-family: var(--font-mono); font-size: 0.8rem; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); transition: color 0.2s, border-color 0.2s;
}
.pick-also a:hover { color: var(--text); border-color: var(--border-strong); }
.pick-story {
  margin: 0; max-width: 72ch; padding: 16px 20px; border-left: 3px solid var(--brand-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface);
}
.pick-story p { margin: 0; line-height: 1.65; text-wrap: pretty; }
.pick-story p + p { margin-top: 0.8em; }
.pick-story .pick-story__label {
  margin-bottom: 6px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.pick-story a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────
   Contact
   ───────────────────────────────────────────────────────────── */
.contact-card {
  position: relative;
  padding: clamp(36px, 6vw, 72px);
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
    radial-gradient(70% 100% at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--surface);
}

.contact-card h2 { max-width: 16ch; }

.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ─────────────────────────────────────────────────────────────
   Flasher
   ───────────────────────────────────────────────────────────── */
.flasher {
  display: grid;
  gap: 18px;
  max-width: 880px;
}

/* Progress tracker: 1 Connect → 2 Choose → 3 Flash */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.stepper li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font: 500 0.9rem var(--font-body);
  color: var(--muted);
  white-space: nowrap;
}

.stepper li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  margin: 0 14px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background-color 0.4s;
}

.stepper li:last-child { flex: none; }

.stepper__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  font: 600 0.8rem var(--font-mono);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.stepper li.is-current { color: var(--text); }
.stepper li.is-current .stepper__dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.stepper li.is-done { color: var(--text); }
.stepper li.is-done .stepper__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-size: 0; }
.stepper li.is-done .stepper__dot::before { content: "✓"; font-size: 0.85rem; }
.stepper li.is-done::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* Board drawings on the connect cards */
.board-option { transition: border-color 0.2s, transform 0.3s var(--ease); }
.board-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.board-option__art { width: 100%; max-width: 220px; height: auto; margin: 2px 0 6px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }

/* The one big action */
.btn--flash {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn--flash:hover { box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--accent) 90%, transparent); }

@media (max-width: 680px) {
  .stepper li { font-size: 0.8rem; gap: 6px; }
  .stepper li:not(:last-child)::after { margin: 0 8px; }
  .stepper__dot { width: 26px; height: 26px; }
}

.notice {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}

.notice strong { color: var(--text); }
.notice--warn { border-color: color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 8%, transparent); }

.step {
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: opacity 0.3s;
}

.step.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.step__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.step__head h2 { font-size: 1.35rem; font-weight: 600; }
.step__head p { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.step__num--soft {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.step__num--soft svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Collapsible step (Flash → Back up first) */
details.step > summary { list-style: none; cursor: pointer; margin-bottom: 0; align-items: center; }
details.step > summary::-webkit-details-marker { display: none; }
details.step[open] > summary { margin-bottom: 18px; }
details.step > summary > div { flex: 1; }
details.step:not([open]) { padding-block: 16px; }
details.step > summary:hover h2 { color: var(--accent); }

.step__chevron {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0 6px 0 auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

details.step[open] .step__chevron { transform: rotate(-135deg); }
.step__more { margin-bottom: 14px; font-size: 0.92rem; color: var(--muted); }
.step__more strong { color: var(--text); }

.step__optional {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font: 500 0.7rem var(--font-mono);
  color: var(--muted);
  vertical-align: middle;
}

.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.backup__summary { margin-bottom: 12px; color: var(--muted); }
.backup__summary strong { color: var(--text); }
.backup__status { font-size: 0.88rem; color: var(--muted); }

.file-tree {
  list-style: none;
  margin: 0 0 16px;
  padding: 8px 0;
  max-height: 280px;
  overflow: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  font: 0.85rem/1.5 var(--font-mono);
}

.file-tree li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 14px 3px calc(14px + var(--depth, 0) * 18px);
}

.file-tree li:hover { background: var(--surface); }
.file-tree li.is-dir { color: var(--text); font-weight: 500; }
.file-tree__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tree__size { flex: none; color: var(--muted); }

.board-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.board-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.board-option h3 { font-size: 1.1rem; font-weight: 600; }
.board-option p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.board-option .btn { align-self: flex-start; margin-top: 6px; }
.board-option p.board-option__tip { flex: none; font-size: 0.82rem; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--border-strong); }
.board-option__tip em { font-style: normal; color: var(--text); }
.board-option__tip a { color: var(--accent); text-decoration: underline; }

kbd,
.flasher code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.device {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
}

.device__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.device__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.device__body { flex: 1; min-width: 0; }
.device__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.device__body h3 { font-size: 1.3rem; font-weight: 600; margin: 2px 0 10px; }

.device__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 20px;
  margin: 0;
}

.device__facts dt { font-size: 0.75rem; color: var(--muted); }
.device__facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; overflow-wrap: anywhere; }

.btn--sm { padding: 9px 14px; font-size: 0.85rem; }
.btn--lg { padding: 16px 28px; font-size: 1.02rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Four cards, five when the firmware catalog has a preset for the board. */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__title { font-weight: 600; font-size: 0.95rem; align-self: end; }
.choice__note { font-size: 0.8rem; color: var(--muted); }
/* Logo or emoji beside the title. Logos sit on a light tile so the dark artwork reads in dark mode too. */
.choice__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border) inset;
  font-size: 1.35rem;
  line-height: 1;
}
.choice__icon--logo { padding: 3px; background: #fff; object-fit: contain; }

/* ── Flash page: what it can flash (#83) ───────────────────── */
/* The page head's links stand out: the theme's text colour as the fill, so they're light on dark and dark on light. */
.fw-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.fw-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; color: var(--bg); background: var(--text); border: 1px solid var(--text);
  box-shadow: var(--shadow); transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s;
}
.fw-jump a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--text) 88%, var(--accent)); }
.fw-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fw-jump__logo, .fw-jump__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; }
.fw-jump__logo { padding: 2px; background: #fff; object-fit: contain; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }
.fw-jump__icon { display: grid; place-items: center; font-size: 1.05rem; line-height: 1; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }
@media (max-width: 600px) { .fw-jump { gap: 8px; } .fw-jump a { font-size: 0.88rem; padding: 7px 13px 7px 8px; } }
.fw-section { padding-top: 40px; }
.fw-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.fw-card {
  --c: hsl(var(--hue) 75% 62%);
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 20px 18px; scroll-margin-top: 96px;
  border-radius: var(--radius); border: 1px solid var(--border); border-top: 3px solid var(--c); background: var(--surface);
}
.fw-card:target { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.fw-card__head { display: flex; align-items: center; gap: 12px; }
.fw-card__head h3 { font-size: 1.15rem; font-weight: 600; }
.fw-card__logo, .fw-card__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
}
.fw-card__logo { padding: 3px; background: #fff; object-fit: contain; }
.fw-card__icon {
  display: grid; place-items: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.fw-card__by { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.fw-card > p { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.fw-card code, .fw-board code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text); }
.fw-card .tags { margin: 0; }
.fw-card__go { margin-top: auto; font-family: var(--font-mono); font-size: 0.82rem; color: var(--c); }
.fw-card__go:hover { text-decoration: underline; }
/* The toolbox card takes a whole row, so seven cards never leave one on its own. */
.fw-card--wide { grid-column: 1 / -1; }
.fw-card--wide > p { max-width: 72ch; }
.fw-boards__title { margin: 56px 0 18px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; scroll-margin-top: 96px; }
.fw-boards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.fw-board { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.fw-board h4 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.fw-board > p { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.fw-board .tags { margin: 0; }
.fw-chips { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.fw-chips th, .fw-chips td { padding: 8px 10px 8px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.fw-chips thead th { border-top: 0; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.fw-chips tbody th { white-space: nowrap; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--text); }
.fw-chips td { color: var(--muted); }
.fw-board > p.fw-board__note { font-size: 0.85rem; }
.choice:hover { border-color: var(--border-strong); }

.choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A fifth choice (ready-made firmware) takes its own full row instead of sitting alone in a column. */
.choice--wide { grid-column: 1 / -1; }
.flasher__credits { margin-top: 28px; font-size: 0.75rem; color: var(--muted); text-align: center; }
.flasher__credits a { color: inherit; }

.options {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.field { display: grid; gap: 6px; }
.field label { font-size: 0.88rem; font-weight: 500; }
.field__hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.field__hint--note { margin: 0; line-height: 1.5; }

.field select,
.field input[type="text"],
.field input[type="search"],
.field input[type="file"] {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.field select[size] { padding: 6px; font-family: var(--font-mono); font-size: 0.82rem; }
.field input[type="text"] { font-family: var(--font-mono); max-width: 220px; }

.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
}

.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.firmware {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--muted);
  min-height: 1.5em;
}

.firmware:empty { display: none; }
.firmware strong { color: var(--text); }
.firmware a { color: var(--accent); text-decoration: underline; }
.firmware--ok { color: var(--text); }
.firmware--ok::before { content: "✓ "; color: #34d399; }
.firmware--warn::before { content: "! "; color: #f59e0b; font-weight: 700; }
.firmware__warn { display: block; margin-top: 8px; }
.firmware__warn::before { content: "! "; color: #f59e0b; font-weight: 700; }

/* A firmware-catalog preset: what it is, where it comes from, what gets written */
.preset {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.preset__blurb { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.preset__blurb a { color: var(--accent); }
.preset .device__facts dd a { color: inherit; }
.preset__files { grid-column: 1 / -1; }

/* After a catalog preset is flashed: the next step, from the catalog entry */
.after {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
}
.after h3 { font-size: 1.1rem; font-weight: 600; margin: 2px 0 8px; }
.after p { margin: 0 0 12px; font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.after p:last-child { margin-bottom: 0; }
.after code, .after kbd { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); }
.after__links { display: flex; flex-wrap: wrap; gap: 8px; }

.flash-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* After a MicroPython flash: on to the IDE */
.flash-next { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.flash-next__status { font-size: 0.88rem; color: var(--muted); }
.flash-next__status:empty { display: none; }

.progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.progress__bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.25s var(--ease);
}

.progress__text { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); min-width: 9ch; text-align: right; }

.log-wrap { margin-top: 18px; }
.log-wrap summary { cursor: pointer; font-size: 0.88rem; color: var(--muted); }

.log {
  margin: 10px 0 0;
  max-height: 260px;
  overflow: auto;
  /* Long file names (Marauder's run to 70 characters) wrap instead of widening the page on a phone. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  font: 0.78rem/1.55 var(--font-mono);
  color: var(--muted);
  white-space: pre-wrap;
}

.guide-open { margin-top: 28px; vertical-align: top; }
.guide-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.guide-open__os { color: var(--muted); }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Slide-out guide: a native <dialog> pinned to the right edge */
.guide {
  margin: 0 0 0 auto;
  padding: 0;
  width: min(520px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.5);
}

.guide[open] { animation: guide-in 0.4s var(--ease); }
.guide::backdrop { background: rgba(5, 8, 14, 0.55); backdrop-filter: blur(3px); }

@keyframes guide-in { from { transform: translateX(40px); opacity: 0; } }

.guide__panel { display: flex; flex-direction: column; height: 100%; }

.guide__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 26px 14px;
}

.guide__head .kicker { margin-bottom: 4px; }
.guide__head h2 { font-size: 1.7rem; font-weight: 600; }
.guide__head .icon-btn svg { stroke-width: 2; }
.guide__head .icon-btn:hover { transform: none; }

.guide__tabs {
  display: flex;
  gap: 4px;
  margin: 0 26px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.guide__tabs button {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 0.88rem var(--font-body);
  cursor: pointer;
}

.guide__tabs button[aria-selected="true"] {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong) inset;
}

.guide__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 26px 32px;
}

.guide__body h3 {
  margin: 24px 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
}

.guide__body p,
.guide__body li { font-size: 0.93rem; color: var(--muted); }
.guide__body strong,
.guide__body em { color: var(--text); font-style: normal; }
.guide__body ol,
.guide__body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.guide__body ul ul { margin-top: 6px; gap: 4px; }
.guide__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.guide__body kbd,
.guide__body code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.guide__body pre {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow-x: auto;
}

.guide__body pre code { border: 0; padding: 0; background: none; font-size: 0.82rem; }

.guide__note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
}

.guide__common {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.guide__checks { list-style: none; padding-left: 0 !important; }
.guide__checks li { position: relative; padding-left: 22px; }
.guide__checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }

@media (max-width: 680px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Too narrow for icon + text side by side: stack the icon above the title. */
  .choice { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; }
  .choice__title { align-self: auto; }
  .choice__icon { grid-row: auto; margin-bottom: 6px; }
  .guide { width: 100%; border-left: 0; }
  .guide__head { padding: 20px 18px 12px; }
  .guide__tabs { margin: 0 18px; }
  .guide__body { padding: 4px 18px 28px; }
  .device { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────
   Workbench — package catalog
   ───────────────────────────────────────────────────────────── */
.catalog-tools {
  display: grid;
  gap: 14px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }

.search input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: 500 0.85rem var(--font-body);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.chip:hover { color: var(--text); border-color: var(--border-strong); }

.chip[aria-pressed="true"] {
  color: var(--accent-ink);
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.catalog-count { margin: 22px 0 14px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.pkg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.2s;
}

.pkg:hover { border-color: var(--border-strong); }
.pkg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pkg__head h3 { font-size: 1.15rem; font-weight: 600; }

.pkg__badge {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: #34d399;
  border: 1px solid color-mix(in srgb, #34d399 40%, transparent);
}

.pkg__meta { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.pkg__meta span { padding: 2px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border); }
.pkg__summary { color: var(--muted); font-size: 0.93rem; flex: 1; }

.pkg__how summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); }
.pkg__how p { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }

.pkg code,
.catalog-foot code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text);
  overflow-wrap: anywhere;
}

.pkg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pkg-empty { color: var(--muted); padding: 30px 0; }
.catalog-foot { margin-top: 36px; color: var(--muted); font-size: 0.9rem; max-width: 70ch; }
.catalog-foot a { color: var(--accent); text-decoration: underline; }

:root[data-theme="light"] .pkg__badge { color: #059669; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pkg__badge { color: #059669; } }

/* ─────────────────────────────────────────────────────────────
   Workbench — starter projects
   ───────────────────────────────────────────────────────────── */
.starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.starter-card {
  --c: hsl(var(--hue) 75% 60%);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}

.starter-card.reveal.is-in { transition: opacity 0.8s var(--ease), transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease); }
.starter-card.reveal.is-in:hover,
.starter-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--c) 55%, transparent);
}

.starter-card__art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 32%, transparent), transparent 65%),
    var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.starter-card__art span { font-size: 2.8rem; transition: transform 0.5s var(--ease); }
.starter-card:hover .starter-card__art span { transform: scale(1.12) rotate(-6deg); }
.starter-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.starter-card__body h3 { font-size: 1.2rem; font-weight: 600; }
.starter-card__body p { color: var(--muted); font-size: 0.93rem; flex: 1; }
.starter-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.starter-card__tags span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); }

.starter__back { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 0.92rem; }
.starter__back:hover { color: var(--text); }

.starter__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }

.starter__emoji {
  --c: hsl(var(--hue) 75% 60%);
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 2rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), var(--bg-2) 75%);
  border: 1px solid var(--border);
}

.starter__head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 600; }
.starter__head p { color: var(--muted); margin-top: 6px; max-width: 65ch; }
.starter__parts { font-size: 0.9rem; }
.starter__parts strong,
.starter__expect strong { color: var(--text); font-weight: 600; }

.starter__layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 18px;
  align-items: start;
}

.starter__settings {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.starter__settings h3 { font-size: 1.05rem; font-weight: 600; }
#st-fields { display: grid; gap: 14px; }
.starter__settings .field input[type="number"],
.starter__settings .field input[type="password"],
.starter__settings .field input[type="text"] {
  width: 100%;
  max-width: none;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.starter__settings .field input:focus,
.starter__settings .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field__help { font-size: 0.78rem; color: var(--muted); }
.starter__expect { font-size: 0.86rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border); }

.starter__code {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}

.code-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }

.code-tabs button {
  padding: 9px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: none;
  color: var(--muted);
  font: 0.85rem var(--font-mono);
  cursor: pointer;
  white-space: nowrap;
}

.code-tabs button[aria-selected="true"] { background: var(--bg-2); color: var(--text); border-color: var(--border); margin-bottom: -1px; }
.code-tabs__dot { color: var(--accent); font-size: 0.7em; }

.code-notice {
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  background: color-mix(in srgb, #f59e0b 9%, transparent);
  border-bottom: 1px solid var(--border);
}

.code-notice code { font-family: var(--font-mono); color: var(--text); }
.code-editor { height: min(62vh, 560px); }
.code-editor .cm-editor { height: 100%; }

.starter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.starter__status { font-size: 0.9rem; color: var(--muted); }
.starter__status--ok { color: #34d399; }
.starter__status--warn { color: #f59e0b; }
.starter__note { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.84rem; color: var(--muted); max-width: 80ch; }
.starter__note strong, .starter__note em { color: var(--text); font-style: normal; }
.starter__note a { color: var(--accent); text-decoration: underline; }

.console {
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #070a10;
}

.console__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.console__dot { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; }
.console__dot.is-on { background: #34d399; box-shadow: 0 0 10px #34d399; }
.console__btns { display: flex; gap: 8px; margin-left: auto; }

.console__out {
  margin: 0;
  height: 260px;
  overflow: auto;
  padding: 14px;
  font: 0.82rem/1.55 var(--font-mono);
  color: #d1d9e6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.console__info { color: #5eead4; }
.console__err { color: #fca5a5; }

:root[data-theme="light"] .starter__status--ok { color: #059669; }
:root[data-theme="light"] .starter__status--warn { color: #b45309; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .starter__status--ok { color: #059669; }
  :root:not([data-theme="dark"]) .starter__status--warn { color: #b45309; }
}

@media (max-width: 860px) {
  .starter__layout { grid-template-columns: 1fr; }
  .code-editor { height: 420px; }
}

@media (max-width: 680px) {
  .starter__head { flex-direction: column; gap: 12px; }
  .starter__emoji { width: 52px; height: 52px; font-size: 1.6rem; }
  .console__btns { margin-left: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   Workbench — board files
   ───────────────────────────────────────────────────────────── */
.files-page { display: grid; gap: 18px; }

.files__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.files__space { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.files__bar-btns { display: flex; gap: 8px; margin-left: auto; }

.files__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.files__board,
.files__send {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 0;
}

.files__board h3,
.files__send h3 { font-size: 1.05rem; font-weight: 600; }
.files__board .file-tree { margin: 0; max-height: 420px; }
.files__send .field__help code,
.files__send .check code { font-family: var(--font-mono); font-size: 0.85em; }

.file-tree--actions li { align-items: center; }
.file-tree--actions .file-tree__name { flex: 1; min-width: 0; }
.file-tree__btns { display: flex; gap: 4px; opacity: 0.35; transition: opacity 0.15s; }
.file-tree--actions li:hover .file-tree__btns,
.file-tree--actions li:focus-within .file-tree__btns { opacity: 1; }
.file-tree__empty { color: var(--muted); }

.icon-mini {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
}

.icon-mini:hover { border-color: var(--accent); color: var(--accent); }
.icon-mini--danger:hover { border-color: #f87171; color: #f87171; }

.files__preview {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.files__summary { font-size: 0.9rem; color: var(--muted); }
.files__summary strong { color: var(--text); }
.files__warn { color: #f59e0b; }

.file-picks {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 260px;
  overflow: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.file-picks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px; }
.file-picks .check { min-width: 0; font: 0.84rem var(--font-mono); color: var(--text); }
.file-picks__path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picks__meta { flex: none; display: flex; gap: 8px; align-items: center; font: 0.78rem var(--font-mono); color: var(--muted); }
.file-picks__replace { padding: 1px 7px; border-radius: 999px; color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }

.files-page .progress { margin-top: 0; }
.files-page .console { margin-top: 18px; }

@media (max-width: 860px) {
  .files__layout { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .file-tree__btns { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Workbench — IDE
   One dark "editor window" in both site themes, with a phosphor-green terminal vibe.
   Redefining the site's colour tokens inside .ide re-themes the editor, buttons and
   file tree in one place.
   ───────────────────────────────────────────────────────────── */
.ide {
  --bg: #05080d;
  --bg-2: #070c12;
  --surface: rgba(57, 255, 159, 0.035);
  --surface-hover: rgba(57, 255, 159, 0.08);
  --border: rgba(57, 255, 159, 0.12);
  --border-strong: rgba(57, 255, 159, 0.26);
  --text: #d4f5e4;
  --muted: #6b8c80;
  --accent: #39ff9f;
  --accent-2: #5eead4;
  --accent-ink: #00170c;
  --syn-keyword: #c792ea;
  --syn-string: #a5f3a1;
  --syn-number: #ffcb6b;
  --syn-comment: #557064;
  --syn-function: #6ce9ff;
  --syn-class: #ffd479;
  --syn-property: #9ef7dc;
  --glow: 0 0 8px rgba(57, 255, 159, 0.35);
  color-scheme: dark;
  position: relative;
  display: grid;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(rgba(57, 255, 159, 0.025) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--bg);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(57, 255, 159, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Faint CRT scanlines over the whole window */
.ide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  z-index: 2;
}

/* Title bar */
.ide__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(57, 255, 159, 0.06), transparent);
  font-family: var(--font-mono);
}

.ide__dots { display: flex; gap: 7px; }
.ide__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ide__dots i:nth-child(2) { background: #febc2e; }
.ide__dots i:nth-child(3) { background: #28c840; }
.ide__title { font-size: 0.82rem; color: var(--muted); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide__conn,
.ide__run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ide__conn strong { font-size: 0.85rem; }

.ide .btn { font-family: var(--font-mono); letter-spacing: 0.01em; }
.ide .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.ide .btn--primary:hover { box-shadow: 0 0 16px rgba(57, 255, 159, 0.55); }
.ide .btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); backdrop-filter: none; }
.ide .btn--ghost:hover { background: var(--surface-hover); }
.ide .link-btn { color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; }
.ide .console__dot.is-on { background: var(--accent); box-shadow: var(--glow); }

/* A short page head, so the IDE starts near the top */
.page-head--ide { padding-top: 112px; }
.page-head--ide h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.page-head--ide .page-head__sub { margin-top: 8px; font-size: 1rem; }
.page-head--ide .subnav { margin-top: 16px; }
.page-head--ide + .section--tight { padding-top: 22px; }

/* Sidebar + editor */
/* Thonny's layout: files full height on the left; the editor on the right with the shell under it.
   The window fills the screen under the site header, so the editor, the terminal and the file list
   each scroll inside themselves and the page stays put. */
@media (min-width: 901px) {
  .ide {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: clamp(540px, calc(100dvh - 72px - 28px), 1100px);
    scroll-margin-top: 86px;
  }
}

.ide__main {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 0;
}

/* Full window: the IDE covers the page (under the toasts), and the page behind it doesn't scroll */
html.ide-full { overflow: hidden; }
.ide.is-full { position: fixed; inset: 0; z-index: 55; height: auto; max-height: none; border-radius: 0; border: 0; }

.ide__full {
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 0.75rem var(--font-mono);
  cursor: pointer;
}
.ide__full:hover,
.ide__full[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* Scrolling inside a pane stays in that pane */
.ide .cm-scroller,
.ide__term .console__out,
.ide__tree,
.ide__pkgs { overscroll-behavior: contain; }

.ide__work { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.ide__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}

.ide__sidetabs { display: flex; border-bottom: 1px solid var(--border); }

.ide__sidetabs button {
  flex: 1;
  padding: 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.ide__sidetabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); text-shadow: var(--glow); }

.ide__panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; flex: 1; }
.ide__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ide__tools .icon-mini { width: 32px; height: 32px; font-size: 0.95rem; background: transparent; border-color: var(--border-strong); }
.ide__tools .icon-mini:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }

.ide .file-tree { border: 0; background: transparent; padding: 0; }
.ide__tree { flex: 1; margin: 0; min-height: 0; overflow: auto; }
.ide .file-tree li { padding-top: 4px; padding-bottom: 4px; border-radius: 6px; }
.file-tree .is-file .file-tree__name { cursor: pointer; }
.file-tree .is-file .file-tree__name:hover { color: var(--accent); text-decoration: underline; }

.search--sm { max-width: none; padding: 0 12px; }
.search--sm input { padding: 9px 0; font-size: 0.88rem; }
.ide .search { background: rgba(0, 0, 0, 0.3); font-family: var(--font-mono); }

.ide__pkgs { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 8px; overflow: auto; min-height: 0; flex: 1; }

.ide-pkg {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}

.ide-pkg__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 0.88rem var(--font-mono); }
.ide-pkg p { font-size: 0.8rem; color: var(--muted); }
.ide-pkg__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); }
.ide-pkg .btn--sm { padding: 6px 12px; font-size: 0.78rem; }
.ide .pkg__badge { color: var(--accent); border-color: var(--border-strong); }

.ide__editor { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--bg-2); }
.ide .code-tabs { min-height: 41px; padding: 0; gap: 0; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--border); }
.ide .code-tabs button { border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 10px 14px; margin: 0; }
.ide .code-tabs button[aria-selected="true"] { background: var(--bg-2); color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
.code-tabs__close { margin-left: 6px; padding: 0 3px; border-radius: 4px; color: var(--muted); }
.code-tabs__close:hover { background: var(--surface-hover); color: var(--text); }
.ide__code { flex: 1 1 0; height: auto; min-height: 0; }
.ide .cm-gutters { background: rgba(0, 0, 0, 0.25) !important; }
.ide .cm-cursor { border-left-width: 2px !important; box-shadow: var(--glow); }

.ide__empty { position: relative; flex: 1; display: grid; place-content: center; gap: 6px; padding: 30px; text-align: center; color: var(--muted); font-family: var(--font-mono); overflow: hidden; }
.ide__empty > p { position: relative; z-index: 1; }
.ide__empty strong { color: var(--accent); text-shadow: var(--glow); font-weight: 600; }
.ide__empty a,
.ide__empty .link-btn { color: var(--accent); text-decoration: underline; }
.ide__rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

/* Run controls */
.ide__runbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(57, 255, 159, 0.04);
}

.ide__hint { font: 0.72rem var(--font-mono); color: var(--muted); }
.ide.is-running #ide-run { animation: ide-pulse 1.2s ease-in-out infinite; }
.ide.is-running #ide-stop { border-color: #ff5f57; color: #ff8a84; }
@keyframes ide-pulse { 50% { box-shadow: 0 0 18px rgba(57, 255, 159, 0.7); } }
/* The Flash page sent us here: this is the button to click next. */
.ide .btn.is-wanted { animation: ide-pulse 1.2s ease-in-out infinite; }

/* Terminal */
.ide .console { margin: 0; border: 0; border-radius: 0; background: #020504; }
.ide .console__head { background: transparent; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.ide .console__head strong { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-shadow: var(--glow); }
/* The shell, under the editor. It starts small; the splitter above it sets --term-h. */
.ide__term { flex: none; }
.ide__term .console__head { padding: 5px 14px; }
.ide__term .console__head .btn--sm { padding: 4px 10px; font-size: 0.75rem; }
.ide__term .console__out { height: var(--term-h, clamp(64px, 14vh, 180px)); padding: 10px 14px; color: #8dffc6; text-shadow: 0 0 6px rgba(57, 255, 159, 0.28); }

/* The splitter between the editor and the terminal */
.ide__split {
  flex: none;
  position: relative;
  height: 7px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  cursor: row-resize;
  touch-action: none;
}
.ide__split::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 36px;
  height: 3px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--border-strong);
}
.ide__split:hover,
.ide__split:focus-visible,
.ide__split.is-dragging { background: var(--surface-hover); outline: 0; }
.ide__split:hover::before,
.ide__split:focus-visible::before,
.ide__split.is-dragging::before { background: var(--accent); box-shadow: var(--glow); }
html.ide-resizing { cursor: row-resize; user-select: none; }
.ide .console__info { color: #6ce9ff; }
.ide .console__err { color: #ff8a84; text-shadow: 0 0 6px rgba(255, 95, 87, 0.35); }
.ide__status { font: 0.75rem var(--font-mono); color: var(--muted); }

.ide__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font: 0.85rem var(--font-mono);
  color: var(--accent);
  text-shadow: var(--glow);
}

.ide__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #d4f5e4;
  font: inherit;
  caret-color: var(--accent);
}

.ide__input input::placeholder { color: #3f5a50; text-shadow: none; }

/* Status bar */
.ide__statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 5px 14px;
  background: rgba(57, 255, 159, 0.09);
  border-top: 1px solid var(--border-strong);
  font: 0.72rem var(--font-mono);
  color: var(--muted);
}

#ide-sb-conn.is-on { color: var(--accent); text-shadow: var(--glow); }
.ide__sb-right { display: flex; gap: 16px; margin-left: auto; }

/* Upload dialog keeps the IDE palette */
.ide-dialog {
  width: min(620px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

.ide-dialog::backdrop { background: rgba(5, 8, 14, 0.55); backdrop-filter: blur(3px); }
.ide-dialog__body { display: grid; gap: 14px; padding: 24px; }
.ide-dialog__body h3 { font-size: 1.25rem; font-weight: 600; }

@media (max-width: 900px) {
  .ide__main { grid-template-columns: 1fr; }
  .ide__full,
  .ide__split { display: none; }
  .ide__term .console__out { height: 180px; }
  .ide__side { border-right: 0; border-bottom: 1px solid var(--border); }
  .ide__tree,
  .ide__pkgs { max-height: 280px; }
  .ide__code { flex: none; height: 380px; }
  .ide__sb-right { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ide.is-running #ide-run { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Footer & toast
   ───────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.footer a:hover { color: var(--text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__links a { color: var(--text); }
.footer__links a[aria-current="page"] { color: var(--accent); }
.footer__end { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.footer__end p { margin: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  translate: -50% 20px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, translate 0.4s var(--ease);
  z-index: 60;
}

.toast.is-visible {
  opacity: 1;
  translate: -50% 0;
}

/* ─────────────────────────────────────────────────────────────
   Reveal animation
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease) var(--d, 0ms), transform 0.8s var(--ease) var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Keep hover transforms snappy once revealed */
.tile.reveal.is-in,
.game.reveal.is-in {
  transition: opacity 0.8s var(--ease), border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tile.reveal.is-in:hover,
.game.reveal.is-in:hover { transform: translateY(-4px); }
.game--soon.reveal.is-in:hover { transform: none; }

/* ─────────────────────────────────────────────────────────────
   Page transitions between tabs (Chrome/Edge/Safari; others just navigate)
   ───────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 0.22s ease both vt-out; }
::view-transition-new(root) { animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) both vt-in; }
::view-transition-group(tab-pill) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

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

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .link-row { grid-template-columns: 1fr 1fr auto; }
  .link-row__url { display: none; }
}

/* Tablet: the tabs share the top row with the brand, so show the logo only */
@media (min-width: 681px) and (max-width: 960px) {
  .brand__name { display: none; }
}

@media (max-width: 680px) {
  .container { padding: 0 16px; }
  .nav__inner { grid-template-columns: 1fr auto; height: 64px; }
  .section { padding: 80px 0; }
  .section--tight { padding: 32px 0 80px; }
  .page-head { padding-top: 112px; }

  /* Tabs become an app-style bottom bar */
  body { padding-bottom: 92px; }
  .tabs {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    box-shadow: var(--shadow);
  }
  .tab {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px;
    border-radius: 16px;
    font-size: 0.68rem;
  }
  .tab__icon { display: block; }
  .toast { bottom: 104px; }
  .bento,
  .games { grid-template-columns: 1fr; }
  .tile--lg,
  .tile--wide { grid-column: auto; grid-row: auto; }
  .tile--lg { min-height: 320px; }
  .link-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .link-row__note { grid-row: 2; font-size: 0.9rem; }
  .link-row__arrow { grid-row: 1 / span 2; grid-column: 2; }
  .footer__inner { flex-direction: column; }
}

/* Links page: credits for third-party content and code. */
.credits { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.credits h2 { font-size: 1.15rem; margin-bottom: 14px; }
.credits__list { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 10px 24px; margin: 0; font-size: 0.85rem; line-height: 1.6; }
.credits__list dt { font-weight: 600; color: var(--text); }
.credits__list dd { margin: 0; color: var(--muted); max-width: 72ch; }
.credits__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credits__list a:hover { color: var(--text); }
@media (max-width: 680px) {
  .credits__list { grid-template-columns: 1fr; gap: 2px; }
  .credits__list dd { margin-bottom: 12px; }
}

/* Starters: Waveshare 1.3" LCD card and its game picker */
.starter-card--lcd .starter-card__art svg { display: block; width: 104px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); }
.lcd-pick {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 26px; overflow-y: auto;
  border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-2); color: var(--text);
}
.lcd-pick::backdrop { background: rgba(4, 6, 10, 0.7); backdrop-filter: blur(4px); }
.lcd-pick h2 { font-size: 1.5rem; padding-right: 40px; }
.lcd-pick__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lcd-pick__lede { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.lcd-pick__list { display: grid; gap: 10px; margin-top: 18px; }
.lcd-game {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
}
.lcd-game h3 { font-size: 1.02rem; margin: 0; }
.lcd-game p { margin: 3px 0 0; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.lcd-game__meta { font-family: var(--font-mono); font-size: 0.72rem !important; }
.lcd-game__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 330px; }
.lcd-pick__foot { margin: 16px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.lcd-pick__foot a { color: var(--accent); }
.lcd-pick__status { display: block; color: var(--text); }
@media (max-width: 600px) {
  .lcd-pick { padding: 20px 16px; }
  .lcd-game { flex-direction: column; align-items: stretch; }
  .lcd-game__btns { justify-content: flex-start; max-width: none; }
}

/* ─────────────────────────────────────────────────────────────
   Library tab: its sections, the Brothers' Keeper comic cards and the reader (js/library.js)
   ───────────────────────────────────────────────────────────── */
/* A box per kind of thing (Comics, Books, …) with its label; it opens and closes. */
.shelf {
  scroll-margin-top: 96px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
}
.shelf + .shelf, #library-sections > .shelf, .shelf + #library-sections > .shelf:first-child { margin-top: 18px; }
.shelf__head {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer;
  list-style: none; border-radius: var(--radius);
}
.shelf__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.shelf__head::-webkit-details-marker { display: none; }
.shelf__head:hover .shelf__chev { border-color: var(--border-strong); }
.shelf__label { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; }
.shelf__meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.shelf__chev {
  margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--border);
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.25s var(--ease), border-color 0.2s;
}
.shelf[open] .shelf__chev { transform: rotate(180deg); }
.shelf__body { padding: 0 22px 22px; }
.library__sub { margin: 0 0 20px; max-width: 62ch; color: var(--muted); }
.library__sub a { color: var(--accent); }
@media (max-width: 600px) {
  .shelf__head { padding: 16px; }
  .shelf__body { padding: 0 12px 14px; }
}
.comics {
  display: grid; gap: 18px; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.comic {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
}
.comic__cover { display: block; aspect-ratio: 400 / 612; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.comic__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
a.comic__cover:hover img { transform: scale(1.04); }
.comic__cover--soon {
  display: grid; place-items: center; color: var(--muted);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--text) 4%, transparent) 14px 15px),
    var(--bg-2);
}
.comic__cover--soon span { font: 700 3.2rem/1 var(--font-display); opacity: 0.35; }
.comic__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 18px 18px; }
.comic__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--brand-gold); }
.comic__title { font-size: 1.15rem; font-weight: 600; }
.comic__meta { font-size: 0.88rem; color: var(--muted); }
.comic__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.comic__actions .btn { white-space: nowrap; }
.comic__size { color: var(--muted); font-size: 0.78rem; }
.comic__title a { color: inherit; }
.comic__title a:hover { color: var(--accent); }
.library__series { margin: 36px 0 14px; font-size: 1.05rem; font-weight: 600; }
.comic--soon { opacity: 0.55; }

/* A comic's own page (https://northbridgelandmark.com/library/comics/one-millisecond/): the opening panel beside the blurb */
.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.story__cover { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-2); }
.story__cover img { display: block; width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.story__cover:hover img { transform: scale(1.02); }
.story__body { display: grid; gap: 12px; }
.story__blurb { font-size: 1.08rem; line-height: 1.6; max-width: 52ch; }
.story__blurb a, .story__more a, .story__credit a { color: var(--accent); }
.story__meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.story__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.story__more { color: var(--muted); }
.story__credit { margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 20px; }
}

/* A link to the comic from the Workbench pages */
.story-link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 0;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, background-color 0.2s;
}
.story-link:hover { border-color: var(--accent); background: var(--surface-hover); }
.story-link img { flex: none; width: 64px; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.story-link__text { display: grid; gap: 2px; min-width: 0; }
.story-link__text > span:last-child { color: var(--muted); font-size: 0.92rem; }
.story-link__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--brand-gold); }
.story-link strong { font-size: 1.05rem; }
.story-link__arrow { margin-left: auto; font-size: 1.2rem; color: var(--accent); }
.comic--soon .comic__label { color: var(--muted); }

.reader { display: grid; gap: 16px; justify-items: center; }
/* Desktop: Prev and Next either side of the page, the counter under it. Phone: all three under it. */
.reader__main {
  display: grid; width: 100%; gap: 12px 20px; align-items: center;
  grid-template-columns: 1fr min(calc(100% - 260px), calc((100svh - 240px) * 1200 / 1834)) 1fr;
  grid-template-areas: "prev stage next" ". count .";
}
.reader__prev { grid-area: prev; justify-self: end; }
.reader__next { grid-area: next; justify-self: start; }
.reader__count { grid-area: count; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.reader__stage {
  grid-area: stage; position: relative; display: block; padding: 0; border: 0; background: none; color: inherit;
  cursor: zoom-in; user-select: none; -webkit-user-select: none; border-radius: 6px;
  scroll-margin-top: 84px;
  width: 100%; justify-self: center;
}
.reader__zoom {
  position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px;
  font: 500 0.78rem/1 var(--font-body); color: #fff; background: rgba(5, 8, 14, 0.72);
  opacity: 0; transition: opacity 0.2s;
}
.reader__stage:hover .reader__zoom, .reader__stage:focus-visible .reader__zoom { opacity: 1; }
@media (hover: none) { .reader__zoom { opacity: 1; } }

/* The full-screen viewer (a <dialog>): the page fills the screen's width, or fits it whole. */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow-y: auto; overscroll-behavior: contain; background: #05080e; color: #e8ecf3;
}
.viewer::backdrop { background: #05080e; }
html.viewer-open { overflow: hidden; }
.viewer__bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; background: linear-gradient(rgba(5, 8, 14, 0.92), rgba(5, 8, 14, 0.6));
}
.viewer__count { font-family: var(--font-mono); font-size: 0.82rem; color: #b8c0cf; }
.viewer__hint { flex: 1; min-width: 0; font-size: 0.8rem; color: #8b95a7; text-align: center; }
.viewer__btn {
  flex: none; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: 500 0.85rem/1 var(--font-body); color: #e8ecf3;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
}
.viewer__btn:hover { background: rgba(255, 255, 255, 0.14); }
.viewer__close { width: 38px; padding: 0; font-size: 1.05rem; }
.viewer__page { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; }
.viewer__page img { width: min(100%, 1200px); height: auto; margin: 0 auto; -webkit-user-drag: none; }
.viewer--fit .viewer__page { height: calc(100dvh - 58px); }
.viewer--fit .viewer__page img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.viewer__edge {
  position: fixed; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 64px; border-radius: 12px; font-size: 2.2rem; line-height: 1; color: #fff;
  background: rgba(5, 8, 14, 0.55); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.viewer__edge--prev { left: 12px; }
.viewer__edge--next { right: 12px; }
.viewer__page:hover .viewer__edge { opacity: 0.85; }
@media (hover: none) { .viewer__edge, .viewer__hint { display: none; } }
/* A phone's width already shows the whole page, so it has no Fit button. */
@media (max-width: 600px) { .viewer__hint, #viewer-fit { display: none; } .viewer__bar { justify-content: flex-end; } .viewer__count { margin-right: auto; } }
.reader__stage img {
  width: 100%; height: auto; aspect-ratio: 1200 / 1834; border-radius: 6px;
  background: var(--bg-2); box-shadow: var(--shadow); -webkit-user-drag: none;
}
.reader__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; }
.reader__pages a {
  min-width: 34px; padding: 6px 8px; border-radius: 8px; text-align: center;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted);
  border: 1px solid var(--border); background: var(--surface);
}
.reader__pages a:hover { color: var(--text); border-color: var(--border-strong); }
.reader__pages a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.reader__extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reader__msg { max-width: 56ch; text-align: center; color: var(--muted); }
.reader__msg a { color: var(--accent); }
@media (max-width: 760px) {
  .reader__main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "stage stage stage" "prev count next"; gap: 12px; }
  .reader__stage { width: min(100%, calc((100svh - 300px) * 1200 / 1834)); }
  .reader__prev, .reader__next { justify-self: stretch; justify-content: center; padding: 11px 16px; }
}
@media (max-width: 600px) {
  /* Leave room for the counter row above the phone tab bar. */
  .reader__stage { width: min(100%, calc((100svh - 330px) * 1200 / 1834)); }
  /* Cards turn sideways: cover on the left. */
  .comic { flex-direction: row; }
  .comic__cover { flex: none; width: 112px; height: auto; border-bottom: 0; border-right: 1px solid var(--border); }
  .comic__cover--soon { aspect-ratio: auto; min-height: 96px; }
  .comic__cover--soon span { font-size: 2rem; }
  .comic__body { padding: 14px 14px 14px; min-width: 0; }
}
@media (max-width: 400px) {
  .comic__body .comic__size { display: none; }
}
.page-head--reader { padding: 104px 0 0; }
.page-head--reader .kicker { margin-bottom: 6px; }
.page-head--reader h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -0.025em; }
.page-head--reader + .section--tight { padding-top: 18px; }
@media (max-width: 600px) {
  .page-head--reader { padding-top: 88px; }
}

/* ── Desk pet guide (https://northbridgelandmark.com/workbench/desk-pet/) ───────────────────────────────────── */
.pet-list { display: grid; gap: 10px; margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.pet-list strong { color: var(--text); }
.pet-list a { color: var(--accent); text-decoration: underline; }
.pet-list code, .pet-guide .step code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text); overflow-wrap: anywhere; }
.pet-refusal { margin-top: 16px; }
.pet-refusal p { margin-top: 6px; }
.pet-guide #release-info { margin: 0 0 16px; }
.pet-guide .options { margin-bottom: 18px; }
.pet-log { margin-top: 0; }
.pet-private { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); font-size: 0.9rem; color: var(--muted); }
.pet-private strong { color: var(--text); }
.pet-form { display: grid; gap: 22px; margin-top: 18px; }
.pet-form fieldset { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pet-form legend { margin-bottom: 4px; padding: 0; font: 600 1.02rem var(--font-body); color: var(--text); }
.pet-form .field input[type="text"],
.pet-form .field input[type="password"],
.pet-form .field select { width: 100%; max-width: 440px; font-family: var(--font-body); }
.pet-form .pet-row select { max-width: none; }
.pet-form .pet-row { max-width: 440px; }
.pet-form .field input[type="password"] { padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 0.92rem; }
.pet-form .field input:focus, .pet-form .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pet-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pet-row select { flex: 1 1 220px; }
.field__error { margin: 0; font-size: 0.85rem; color: #f59e0b; }
.field__error:empty { display: none; }
.pet-manual { display: grid; gap: 14px; }
.pet-manual summary { cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.pet-manual[open] summary { margin-bottom: 12px; }
.pet-manual .field + .field { margin-top: 12px; }
.pet-status { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pet-status li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); font-size: 0.92rem; color: var(--muted); }
.pet-status__what { min-width: 4.5em; font-weight: 600; color: var(--text); }
.pet-status__text { flex: 1 1 240px; min-width: 0; }
.pet-status li::before { content: "○"; color: var(--muted); }
.pet-status li[data-tone="wait"]::before { content: "…"; color: var(--accent); }
.pet-status li[data-tone="ok"] { border-color: color-mix(in srgb, #34d399 45%, transparent); }
.pet-status li[data-tone="ok"]::before { content: "✓"; color: #34d399; }
.pet-status li[data-tone="bad"] { border-color: color-mix(in srgb, #f59e0b 50%, transparent); }
.pet-status li[data-tone="bad"]::before { content: "!"; color: #f59e0b; font-weight: 700; }
.pet-status li[data-tone="bad"] .pet-status__text { color: var(--text); }
#watch-done { margin-top: 16px; }

/* ─────────────────────────────────────────────────────────────
   FlasheIDE: the name in the nav, the home page's buttons, and the privacy page
   ───────────────────────────────────────────────────────────── */
.brand__text { font: 700 1.3rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.brand__e { color: var(--brand-gold); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.policy { max-width: 68ch; }
.policy h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 34px 0 10px; }
.policy p, .policy li { color: var(--muted); line-height: 1.7; }
.policy p + p, .policy ul + p { margin-top: 10px; }
.policy strong { color: var(--text); font-weight: 600; }
.policy ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.policy a { color: var(--accent); }

/* Flash page: the Arduino (AVR) card */
.avr__field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
.avr__field select,
.avr__field input[type="file"] { max-width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 0.85rem; }
.avr .progress { margin-top: 12px; }
.avr__status { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.avr__status[data-state="ok"] { color: var(--accent); }
.avr__status[data-state="error"] { color: #f87171; }
.avr .log-wrap { margin-top: 10px; }

/* Leonardo and Micro: the prompt to pick the bootloader's port (site/js/avr109.js), on the Flash page and in the IDE */
.boot-pick {
  width: min(460px, calc(100% - 32px));
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.boot-pick::backdrop { background: rgba(5, 8, 14, 0.55); backdrop-filter: blur(3px); }
.boot-pick h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.boot-pick p { margin: 0 0 10px; line-height: 1.5; font-size: 0.92rem; }
.boot-pick__left { color: var(--accent); font-variant-numeric: tabular-nums; }
.boot-pick__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }