/* self-hosted latin subsets */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/caveat-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* serif set for the ink style */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/fraunces-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/fraunces-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-serif-4-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* AI Game Dev Academy — illustrated field-guide layout. Semantic colors are defined in palette.css. */
:root {
  --paper: var(--studio-page); --paper-2: var(--studio-soft); --paper-3: var(--studio-soft);
  --ink: var(--studio-ink); --ink-2: var(--studio-muted); --ink-3: var(--studio-muted); --rule: var(--studio-ink);
  --mint: var(--studio-cyan-soft); --sand: var(--studio-warning-soft); --blue: var(--studio-cyan-soft); --rose: var(--studio-danger-soft);
  --salmon: var(--studio-coral); --teal: var(--studio-cyan); --brick: var(--studio-violet); --ochre: var(--studio-cyan);
  /* compat names used by widgets / content */
  --bg: var(--paper); --bg-2: var(--paper-2); --surface: var(--studio-surface); --book: var(--studio-surface); --card: var(--studio-white); --well: var(--studio-soft); --surface-2: var(--paper-2); --surface-solid: var(--studio-surface);
  --border: rgba(23,33,61,.28); --border-strong: var(--ink);
  --text: var(--ink); --text-dim: var(--ink-2); --text-faint: var(--ink-3); --muted: var(--ink-3);
  --accent: var(--brick); --accent-2: var(--teal); --accent-3: var(--salmon);
  --ok: var(--studio-success); --danger: var(--studio-violet); --space-m: 16px;
  --code-bg: var(--studio-ink); --code-ink: var(--studio-on-dark-muted);
  --radius: 2px; --bw: 1.5px;
  --shadow: 0 1px 0 var(--ink), 0 6px 14px -8px rgba(23,33,61,.5); --shadow-lg: 0 2px 0 var(--ink), 0 14px 26px -12px rgba(23,33,61,.55);
  --font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --topbar-h: 58px; --h: 200;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 14px); background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--studio-violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brick); text-decoration-thickness: 2px; }
img, canvas, svg { max-width: 100%; }
::selection { background: var(--ochre); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bg-aurora { display: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
.eyebrow { font-family: var(--font); font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 15px; color: var(--ink-2); font-weight: 600; display: inline-block; }
.eyebrow::before { content: "— "; } .eyebrow::after { content: " —"; }
.gradient-text { color: var(--brick); background: none; -webkit-text-fill-color: currentColor; font-style: italic; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 clamp(12px, 3vw, 30px); background: var(--paper); border-bottom: 3px double var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 18px; text-decoration: none; line-height: 1; letter-spacing: -.01em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; flex: none; } .brand-mark svg { width: 34px; height: 34px; overflow: visible; }
.brand small { color: var(--brick); font-family: var(--hand); font-weight: 700; font-size: 19px; display: block; letter-spacing: 0; }
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a { color: var(--ink); padding: 6px 11px; font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .1em; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink-3); }
.nav a.active { border-bottom-color: var(--brick); }
.top-spacer { flex: 1; }
.search-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: var(--bw) solid var(--ink); padding: 6px 12px; color: var(--ink-2); min-width: 210px; font-size: 14px; }
.search-btn:hover { background: var(--paper-2); }
.search-btn kbd { margin-left: auto; }
.icon-btn { width: 36px; height: 36px; border: var(--bw) solid var(--ink); background: transparent; display: grid; place-items: center; }
#theme-btn { display: none; }
.xp-chip { display: flex; align-items: center; gap: 8px; background: transparent; border: var(--bw) solid var(--ink); padding: 3px 10px 3px 4px; font-weight: 700; font-size: 13px; cursor: pointer; }
.xp-chip .lv { width: 26px; height: 26px; border-radius: 50%; background: var(--brick); color: var(--studio-page); display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; }
.xp-chip .bar { width: 60px; height: 6px; border: 1px solid var(--ink); background: transparent; border-radius: 0; overflow: hidden; }
.xp-chip .bar i { display: block; height: 100%; background: var(--teal); width: 0; transition: width .6s; }
.xp-chip .rk, .progress-ring { display: none; }
.menu-btn { display: none; }
#read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brick); z-index: 100; }

/* ---------- layout / basics ---------- */
main#app { min-height: calc(100vh - var(--topbar-h)); }
.container { width: min(1180px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
.section { padding: clamp(34px, 6vw, 72px) 0; }
.section-title { font-size: clamp(30px, 4.6vw, 52px); margin: 4px 0 10px; font-weight: 800; }
.section-sub { color: var(--ink-2); max-width: 680px; font-size: 19px; font-style: italic; margin: 0 0 30px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: var(--bw) solid var(--ink); background: var(--paper); color: var(--ink); font-variant-caps: all-small-caps; letter-spacing: .09em; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .12s, transform .12s, box-shadow .12s; }
.btn:hover { background: var(--ochre); color: var(--ink); transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.btn.primary { background: var(--brick); color: var(--studio-page); } .btn.primary:hover { background: var(--studio-violet-hover); color: var(--studio-white); }
.btn.sm { padding: 3px 11px; font-size: 14px; }
.badge { display: inline-block; font-size: 12px; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; padding: 0 9px; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.badge.hue { background: var(--paper-2); }
kbd, .kbd { font-family: var(--mono); font-size: .78em; background: var(--surface); border: 1px solid var(--ink); border-bottom-width: 2px; padding: 0 6px; }
.src { font-size: 14px; color: var(--ink-3); } .src a { color: var(--ink-2); }

/* ---------- home: book cover ---------- */
.cover { border-bottom: 3px double var(--ink); padding: clamp(20px, 4vw, 48px) 0 clamp(26px, 4vw, 52px); }
.cover .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(18px, 4vw, 54px); align-items: center; }
.cover-text .eyebrow { margin-bottom: 8px; }
.cover h1 { font-size: clamp(42px, 7vw, 92px); line-height: .95; letter-spacing: -.025em; margin: 6px 0 16px; font-weight: 900; }
.cover h1 .w1, .cover h1 .w2, .cover h1 .w3 { display: block; } .cover h1 .w2 { font-style: italic; font-weight: 600; color: var(--brick); } .cover h1 .w3 { font-weight: 900; }
.cover p.lead { font-size: clamp(18px, 2vw, 21px); font-style: italic; color: var(--ink-2); max-width: 520px; margin: 0 0 22px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.stickers { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); max-width: 520px; }
.sticker-stat { flex: 1 1 90px; padding: 8px 10px; text-align: center; border-right: 1px solid var(--ink-3); } .sticker-stat:last-child { border-right: 0; }
.sticker-stat b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; } .sticker-stat span { font-size: 11.5px; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; color: var(--ink-2); }
.cover-art { border: var(--bw) solid var(--ink); outline: 1px solid var(--ink-3); outline-offset: 6px; background: var(--mint); margin: 6px; }
.cover-art img { width: 100%; height: auto; display: block; }
.marquee { overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); padding: 8px 0; }
.marquee-track { display: flex; gap: 38px; width: max-content; animation: marquee 80s linear infinite; font-variant-caps: all-small-caps; letter-spacing: .14em; font-weight: 600; font-size: 15px; white-space: nowrap; }
.marquee-track span::before { content: "✦"; color: var(--ochre); margin-right: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- contents (chapter grid) ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.card { position: relative; background: var(--surface); border: var(--bw) solid var(--ink); padding: 16px 20px; transition: transform .15s, box-shadow .15s; }
.card h4 { font-size: 19px; margin-bottom: 4px; } .card p { margin: 0 0 8px; color: var(--ink-2); font-size: 16px; } .card p:last-child { margin-bottom: 0; }
.card .tag { display: inline-block; font-variant-caps: all-small-caps; letter-spacing: .1em; font-weight: 700; font-size: 13px; color: var(--brick); margin-bottom: 4px; }
a.card { color: inherit; display: block; text-decoration: none; } a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mod-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mod-card .thumb { position: relative; background: var(--mint); border-bottom: var(--bw) solid var(--ink); aspect-ratio: 3/2; overflow: hidden; }
.mod-card:nth-child(4n+2) .thumb { background: var(--sand); } .mod-card:nth-child(4n+3) .thumb { background: var(--blue); } .mod-card:nth-child(4n) .thumb { background: var(--rose); }
.mod-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .mod-card:hover .thumb img { transform: scale(1.04); }
.mod-card .thumb.noimg::after { display: none; }
.mod-card .thumb .fallback-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 88px; color: rgba(23,33,61,.18); }
.mod-card .num { position: absolute; left: 8px; top: 8px; z-index: 2; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; font-size: 13px; background: var(--paper); border: 1px solid var(--ink); padding: 0 8px; }
.mod-card .done-stamp { position: absolute; right: 8px; top: 8px; z-index: 2; display: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--studio-white); border: 1.5px solid var(--ink); place-items: center; font-weight: 800; transform: rotate(10deg); }
.mod-card.complete .done-stamp { display: grid; }
.mod-card .body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mod-card h3 { font-size: 20px; margin: 0; } .mod-card p { color: var(--ink-2); font-size: 15px; margin: 0; flex: 1; line-height: 1.4; font-style: italic; }
.mod-card .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 600; }
.bar { height: 6px; border: 1px solid var(--ink); background: transparent; overflow: hidden; } .bar > i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .6s; }
.path-card { cursor: pointer; } .path-card .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .path-card.active { background: var(--sand); box-shadow: var(--shadow-lg); }
.path-card .p-ico { font-size: 26px; margin-bottom: 4px; filter: grayscale(.6) sepia(.4); }
.rule-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0; border: var(--bw) solid var(--ink); background: var(--surface); }
.rule-strip > div { padding: 16px 18px 18px; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.rule-strip b { font-family: var(--font-display); font-size: 20px; display: block; margin-bottom: 3px; } .rule-strip span { color: var(--ink-2); font-size: 16px; display: block; font-style: italic; }
.rule-strip em { font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; display: block; color: var(--brick); opacity: .85; }
.worldmap-wrap { display: none; }
.rank-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: var(--bw) solid var(--ink); padding: 14px 18px; }
.rank-card .lvbig { width: 62px; height: 62px; border-radius: 50%; background: var(--brick); color: var(--studio-page); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 30px; }
.rank-card .bar { flex: 1 1 200px; height: 10px; }

/* ---------- chapter head ---------- */
.module-head { position: relative; border-bottom: 3px double var(--ink); padding: clamp(18px, 3vw, 36px) 0; background: var(--paper); overflow: hidden; }
.module-head::before { display: none; }
.module-head .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.module-head.has-art .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.module-head .big-num { position: absolute; right: 2%; top: -6px; font-family: var(--font-display); font-weight: 900; font-size: clamp(110px, 20vw, 260px); line-height: 1; color: var(--paper-3); opacity: .8; pointer-events: none; letter-spacing: -.04em; }
.module-head .txt { position: relative; z-index: 1; }
.module-head h1 { font-size: clamp(30px, 4.6vw, 58px); margin: 6px 0 8px; line-height: 1; font-weight: 800; }
.module-head p { font-size: 19px; font-style: italic; color: var(--ink-2); max-width: 600px; margin: 0 0 12px; }
.module-head .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.module-head .art { position: relative; z-index: 1; border: var(--bw) solid var(--ink); outline: 1px solid var(--ink-3); outline-offset: 5px; margin: 5px; background: var(--mint); }
.module-head .art img { width: 100%; height: auto; display: block; }
.crumbs { font-size: 13px; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 600; margin-bottom: 4px; } .crumbs a { color: var(--ink); }
.module-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(22px, 4vw, 50px); padding: 30px 0 90px; align-items: start; }
.lesson-nav { position: sticky; top: calc(var(--topbar-h) + 18px); max-height: calc(100vh - var(--topbar-h) - 36px); overflow: auto; padding: 2px 8px 8px 0; }
.lesson-nav h5 { font-family: var(--font); font-variant-caps: all-small-caps; letter-spacing: .16em; font-size: 14px; color: var(--ink-2); margin: 0 0 8px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.lesson-nav a { display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px; color: var(--ink); font-size: 15px; line-height: 1.3; text-decoration: none; border-left: 3px solid transparent; margin-bottom: 1px; }
.lesson-nav a:hover { background: var(--paper-2); }
.lesson-nav a.active { border-left-color: var(--brick); background: var(--paper-2); font-weight: 600; }
.lesson-nav a .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; display: grid; place-items: center; font-size: 10px; font-weight: 800; margin-top: 2px; }
.lesson-nav a.done .dot { background: var(--teal); color: var(--studio-white); border-color: var(--teal); }
.lesson-nav .side-link { margin-top: 10px; border-top: 1px dashed var(--ink-3); padding-top: 10px; }
.lesson { min-width: 0; }
.lesson-title { font-size: clamp(28px, 3.8vw, 46px); margin: 4px 0 8px; line-height: 1.04; font-weight: 800; }
.lesson-summary { font-size: 20px; font-style: italic; color: var(--ink-2); margin: 0 0 20px; line-height: 1.4; }
.lesson-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 46px; flex-wrap: wrap; border-top: 3px double var(--ink); padding-top: 18px; }
.lesson-foot .nav-card { flex: 1 1 260px; background: var(--surface); border: var(--bw) solid var(--ink); padding: 12px 18px; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 18px; text-decoration: none; }
.lesson-foot .nav-card:hover { background: var(--sand); } .lesson-foot .nav-card small { color: var(--brick); display: block; font-family: var(--font); font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 13px; font-weight: 700; }
.lesson-foot .nav-card.next { text-align: right; }
.complete-btn.done { background: var(--teal); color: var(--studio-white); }

/* ---------- the spread (two-page lesson opener) ---------- */
.spread-book { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); background: var(--book); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-lg); position: relative; margin: 0 0 30px; }
.spread-book::before { content: ""; position: absolute; left: calc(.92 / 2.1 * 100%); top: 0; bottom: 0; width: 46px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(60,40,10,.12) 46%, rgba(60,40,10,.22) 50%, rgba(60,40,10,.12) 54%, transparent); pointer-events: none; z-index: 4; }
.spread-book.solo { grid-template-columns: minmax(0, 1fr); } .spread-book.solo::before { display: none; }
.pg { padding: clamp(12px, 1.8vw, 24px) clamp(12px, 2vw, 26px) 26px; min-width: 0; position: relative; }
.rh { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; text-align: center; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding-bottom: 3px; margin-bottom: 6px; }
.pg h2.pt { font-family: var(--font); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); text-transform: uppercase; letter-spacing: .05em; text-align: center; margin: 2px 0 12px; line-height: 1.12; }
.folio { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 8px; }
.step { cursor: pointer; }
.step .frame { border: var(--bw) solid var(--ink); background: var(--mint); transition: box-shadow .15s, transform .15s; } .step .frame img { width: 100%; height: auto; display: block; }
.step:hover .frame, .step.on .frame { box-shadow: 0 0 0 3px var(--salmon); transform: translateY(-2px); }
.step .lbl { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.step .lbl i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 11px; letter-spacing: 0; flex: none; }
.step.on .lbl i { background: var(--salmon); }
.step .cap { font-size: 13.5px; line-height: 1.38; color: var(--ink-2); margin-top: 2px; }
.keylist { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.keylist li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; cursor: pointer; padding: 4px 6px; transition: background .15s; }
.keylist li:hover, .keylist li.on { background: rgba(207,159,74,.28); }
.keylist .n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 2px; }
.keylist li.on .n { background: var(--salmon); }
.keylist b { font-family: var(--font-display); font-size: 16.5px; display: block; line-height: 1.2; } .keylist span { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; display: block; }

/* the plate (cutaway with leader-line labels) */
.plate { position: relative; border: var(--bw) solid var(--ink); background: var(--mint); overflow: hidden; }
.plate.tint-sand { background: var(--sand); } .plate.tint-blue { background: var(--blue); } .plate.tint-rose { background: var(--rose); }
.plate .cam { position: relative; transform-origin: 0 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.plate img { width: 100%; height: auto; display: block; }
.plate svg.leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plate svg.leads line { stroke: var(--studio-ink); stroke-width: 1; } .plate svg.leads circle { fill: var(--studio-ink); }
.plate .tag { position: absolute; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; white-space: nowrap; background: rgba(247,240,222,.92); padding: 0 5px; border: 1px solid transparent; cursor: pointer; line-height: 1.5; transition: background .12s, border-color .12s; z-index: 3; }
.plate .tag:hover, .plate .tag.on { background: var(--card); border-color: var(--ink); }
.plate .tag.on { background: var(--ochre); }
.plate .mk { display: none; position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); font-size: 11px; font-weight: 700; place-items: center; z-index: 3; padding: 0; }
.plate .mk.on { background: var(--ochre); }
.plate.markers .tag { visibility: hidden; } .plate.markers .mk { display: grid; } .plate.markers svg.leads { display: none; }
.plate .note { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); background: var(--surface); border: var(--bw) solid var(--ink); padding: 9px 14px 11px; font-size: 15px; line-height: 1.4; display: none; z-index: 6; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.plate .note.show { display: block; animation: noteIn .25s ease-out; } .plate .note b { display: block; font-family: var(--font-display); font-size: 17px; }
@keyframes noteIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
.plate .imm-btn, .plate .imm-close { position: absolute; top: 8px; right: 8px; z-index: 8; width: 34px; height: 34px; border: var(--bw) solid var(--ink); background: var(--paper); display: grid; place-items: center; font-size: 17px; padding: 0; }
.plate .imm-btn:hover, .plate .imm-close:hover { background: var(--ochre); } .plate .imm-close { display: none; }
.plate .hint { position: absolute; left: 8px; bottom: 8px; z-index: 5; font-family: var(--hand); font-size: 20px; background: var(--paper); border: 1px solid var(--ink); padding: 0 10px; pointer-events: none; }
.plate-fig { margin: 0; position: relative; }
.plate-fig figcaption { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; }
html.imm-lock { overflow: hidden; }
.plate-fig.immersive { position: fixed; inset: 0; z-index: 500; margin: 0; background: var(--studio-ink); display: grid; place-items: center; padding: 12px; }
.plate-fig.immersive .plate { width: min(100%, calc((100vh - 24px) * 1.5)); max-height: calc(100vh - 24px); }
.plate-fig.immersive figcaption, .plate-fig.immersive .imm-btn, .plate-fig.immersive .hint { display: none; } .plate-fig.immersive .imm-close { display: grid; }

/* ---------- prose ---------- */
.prose { font-size: 18.5px; }
.prose > * + * { margin-top: 1.05em; }
.prose > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 3.6em; float: left; line-height: .78; padding: 6px 9px 0 0; color: var(--ink); }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 2em; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-family: var(--font); border-bottom: 1px solid var(--ink); position: relative; counter-increment: sec; }
.prose { counter-reset: sec; }
.prose h2::before { content: counter(sec); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .5em; border-radius: 50%; border: 1.5px solid var(--ink); font-size: .62em; vertical-align: .22em; letter-spacing: 0; font-family: var(--font-display); font-weight: 700; }
.prose h3 { font-size: 21px; margin-top: 1.6em; font-weight: 700; border-left: 3px solid var(--brick); padding-left: 12px; }
.prose h4 { font-size: 15px; margin-top: 1.3em; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brick); font-family: var(--font); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.35em; } .prose li + li { margin-top: .35em; } .prose li::marker { color: var(--brick); }
.prose strong { font-weight: 700; background: linear-gradient(transparent 64%, rgba(207,159,74,.5) 64%); }
.prose code { font-family: var(--mono); font-size: .82em; background: rgba(23,33,61,.07); padding: .06em .35em; border-bottom: 1px solid var(--ink-3); color: var(--studio-violet); overflow-wrap: anywhere; white-space: normal; }
.prose pre { position: relative; background: var(--code-bg); color: var(--code-ink); border: var(--bw) solid var(--ink); padding: 16px 18px; overflow: auto; font-size: 13.5px; line-height: 1.65; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.prose pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 0; right: 56px; font-family: var(--font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--ochre); padding: 1px 10px; font-weight: 700; }
.copy-btn { position: absolute; top: 7px; right: 7px; font-size: 11px; font-weight: 700; padding: 2px 9px; border: 1px solid var(--code-ink); background: transparent; color: var(--code-ink); opacity: .85; }
.copy-btn:hover { background: var(--ochre); color: var(--ink); opacity: 1; } .copy-btn.ok { background: var(--teal); color: var(--studio-white); }
.tok-c { color: var(--studio-line-strong); font-style: italic; } .tok-s { color: var(--studio-cyan-soft); } .tok-k { color: var(--studio-coral); } .tok-n { color: var(--studio-cyan); } .tok-f { color: var(--studio-cyan); } .tok-t { color: var(--studio-cyan); }
.prose blockquote { margin-inline: 0; padding: 10px 20px; border-left: 3px solid var(--brick); background: rgba(255,255,255,.4); color: var(--ink-2); font-style: italic; }
.prose blockquote cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 600; }
.prose blockquote.pull { font-family: var(--font-display); font-size: 25px; line-height: 1.25; color: var(--ink); background: var(--sand); font-weight: 600; }
.prose hr { border: 0; border-top: 3px double var(--ink-3); margin: 2.2em 0; }
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--ink); background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 560px; }
.prose th { text-align: left; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 14.5px; font-weight: 700; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.prose th, .prose td { padding: 9px 13px; border-bottom: 1px solid var(--ink-3); vertical-align: top; } .prose tr:last-child td { border-bottom: 0; }
.callout { --c: var(--blue); border: var(--bw) solid var(--ink); background: var(--c); padding: 12px 18px 14px 18px; position: relative; border-left-width: 6px; }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.callout .callout-title { display: block; font-family: var(--font); font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; font-size: 15px; margin-bottom: 2px; color: var(--ink); }
.callout.tip { --c: var(--mint); border-left-color: var(--teal); } .callout.warn { --c: var(--sand); border-left-color: var(--ochre); } .callout.danger { --c: var(--rose); border-left-color: var(--brick); } .callout.pro { --c: var(--blue); border-left-color: var(--studio-cyan-dark); } .callout.story { --c: var(--sand); border-left-color: var(--brick); } .callout.quote { --c: var(--blue); }
.prompt { position: relative; border: var(--bw) solid var(--ink); background: var(--sand); overflow: hidden; }
.prompt-head { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 600; font-size: 14px; }
.prompt-head .ptitle { color: var(--paper); font-variant-caps: normal; letter-spacing: 0; text-transform: none; font-style: italic; }
.prompt pre { margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--ink) !important; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
.prompt .copy-btn { border-color: var(--paper); color: var(--paper); top: 4px; right: 8px; opacity: 1; }
.tabs { border: var(--bw) solid var(--ink); background: var(--surface); }
.tab-list { display: flex; gap: 0; background: var(--paper-2); overflow-x: auto; border-bottom: var(--bw) solid var(--ink); }
.tab-list button { border: 0; border-right: 1px solid var(--ink-3); background: transparent; padding: 7px 16px; font-variant-caps: all-small-caps; letter-spacing: .09em; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tab-list button[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 -3px 0 var(--brick); }
.tab-panel { padding: 16px 18px; } .tab-panel > :first-child { margin-top: 0; } .tab-panel > :last-child { margin-bottom: 0; }
.steps { counter-reset: step; list-style: none; padding-left: 0 !important; }
.steps > li { counter-increment: step; position: relative; padding: 2px 0 18px 48px; margin: 0 !important; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 17px; background: var(--surface); }
.steps > li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 2px; border-left: 1px dashed var(--ink-3); } .steps > li:last-child::after { display: none; }
.steps > li > strong:first-child { display: block; font-family: var(--font-display); font-size: 18px; background: none; }
.flow { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 12px; }
.flow .node { flex: 1 1 140px; background: var(--surface); border: var(--bw) solid var(--ink); padding: 10px 12px; font-size: 14.5px; text-align: center; }
.flow .node b { display: block; font-family: var(--font-display); font-size: 16.5px; } .flow .node small { color: var(--ink-2); font-size: 13.5px; line-height: 1.35; display: block; }
.flow .node.hl { background: var(--sand); } .flow .arrow { flex: 0 0 30px; display: grid; place-items: center; color: var(--salmon); font-size: 20px; font-weight: 900; } .flow .arrow::before { content: "➜"; }
.timeline { border-left: 2px solid var(--ink); margin-left: 10px; padding-left: 24px; } .timeline > div { position: relative; padding-bottom: 18px; }
.timeline > div::before { content: ""; position: absolute; left: -32px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brick); }
.timeline .when { font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; color: var(--brick); } .timeline b { display: block; font-family: var(--font-display); font-size: 18px; }
.do-dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.do-dont > div { padding: 12px 18px 14px; border: var(--bw) solid var(--ink); } .do-dont .do { background: var(--mint); } .do-dont .dont { background: var(--rose); }
.do-dont h4 { margin: 0 0 4px !important; font-size: 15px !important; color: var(--ink) !important; } .do-dont .do h4::before { content: "✔ "; color: var(--teal); } .do-dont .dont h4::before { content: "✘ "; color: var(--brick); } .do-dont ul { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.stat { padding: 10px 14px; border-right: 1px solid var(--ink-3); } .stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--brick); } .stat span { font-size: 14px; color: var(--ink-2); font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 600; }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 12px; background: var(--surface); border: 1px solid var(--ink-3); margin: 0 0 6px !important; cursor: pointer; }
.checklist li:hover { border-color: var(--ink); } .checklist li::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); margin-top: 2px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.checklist li.checked { background: var(--mint); } .checklist li.checked::before { content: "✓"; background: var(--teal); color: var(--studio-white); border-color: var(--teal); } .checklist li.checked > span { opacity: .7; }
details.acc { border: var(--bw) solid var(--ink); background: var(--surface); } details.acc + details.acc { margin-top: 8px; }
details.acc > summary { cursor: pointer; padding: 10px 16px; font-weight: 700; font-family: var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.acc > summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .2s; } details.acc[open] > summary::after { transform: rotate(45deg); } details.acc > summary::-webkit-details-marker { display: none; } details.acc > div { padding: 0 16px 14px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.source-list { list-style: none; padding: 0 !important; display: grid; gap: 8px; } .source-list li { margin: 0 !important; }
.source { display: block; padding: 10px 16px; border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .12s, background .12s; } a.source:hover { border-color: var(--ink); background: var(--sand); }
.source .s-title { font-weight: 700; font-family: var(--font-display); font-size: 17px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .source .s-by { font-size: 13px; color: var(--ink-3); font-family: var(--font); font-weight: 600; }
.source .s-why { display: block; font-size: 15px; color: var(--ink-2); margin-top: 2px; } .source .s-url { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.masters-quote { padding: 22px 24px 16px; border: var(--bw) solid var(--ink); background: var(--sand); position: relative; }
.masters-quote::before { content: "“"; position: absolute; top: -10px; left: 12px; font-size: 70px; font-family: var(--font-display); font-weight: 900; color: var(--brick); line-height: 1; }
.masters-quote p { margin: 8px 0 10px; font-size: 18px; font-style: italic; } .masters-quote footer { font-size: 14px; color: var(--ink-2); } .masters-quote footer b { color: var(--ink); }
/* widgets = "experiments" */
.widget { border: var(--bw) solid var(--ink); background: var(--surface); padding: 16px 18px 18px; position: relative; margin-top: 8px; box-shadow: 4px 4px 0 var(--ink-3); }
.widget::after { content: "EXPERIMENT"; position: absolute; top: -10px; right: 14px; background: var(--brick); color: var(--studio-page); font-size: 11px; letter-spacing: .16em; font-weight: 700; padding: 0 10px; }
.widget > .w-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; } .widget > .w-title::before { content: "⚙ "; color: var(--brick); }
.widget label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 10px 0 3px; }
.widget .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.widget input[type=range] { width: 100%; accent-color: var(--brick); height: 26px; }
.widget input[type=number], .widget input[type=text], .widget select, .widget textarea { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); padding: 6px 10px; font: inherit; font-size: 15px; width: 100%; }
.widget textarea { font-family: var(--mono); font-size: 13px; min-height: 90px; }
.widget .out { margin-top: 12px; padding: 12px 15px; background: var(--code-bg); color: var(--code-ink); border: var(--bw) solid var(--ink); font-family: var(--mono); font-size: 13.5px; }
.widget canvas { width: 100%; background: var(--card); border: 1.5px solid var(--ink); display: block; }
.widget .big { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--brick); background: none; -webkit-text-fill-color: currentColor; }
.widget button.btn, .widget button { margin-top: 8px; }
.widget button:not(.btn):not(.chip) { border: 1.5px solid var(--ink); background: var(--paper); padding: 4px 14px; font-weight: 700; } .widget button:not(.btn):not(.chip):hover { background: var(--ochre); }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { padding: 2px 12px; border: 1px solid var(--ink); background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; } .chip:hover { background: var(--paper-2); } .chip.on { background: var(--ink); color: var(--paper); }
.quiz { margin-top: 18px; padding: 20px; border: var(--bw) solid var(--ink); background: var(--sand); } .quiz h3 { margin-bottom: 4px; }
.q-item { margin-top: 16px; background: var(--surface); border: 1px solid var(--ink); padding: 14px 16px 8px; } .q-item > p { font-weight: 700; font-size: 18px; margin: 0 0 10px; font-family: var(--font-display); }
.q-opt { display: block; width: 100%; text-align: left; padding: 8px 14px; margin-bottom: 7px; border: 1px solid var(--ink-3); background: var(--card); font-size: 16.5px; transition: background .1s, border-color .1s; }
.q-opt:hover:not([disabled]) { border-color: var(--ink); background: var(--paper-2); } .q-opt.right { background: var(--studio-cyan-soft); border-color: var(--teal); } .q-opt.wrong { background: var(--studio-coral); border-color: var(--brick); animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.q-explain { display: none; font-size: 15.5px; padding: 8px 12px; border-left: 3px solid var(--teal); background: var(--mint); margin-bottom: 8px; } .q-explain.show { display: block; }
.quiz-score { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.combo { position: fixed; right: 18px; bottom: 80px; z-index: 250; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--studio-page); background: var(--brick); border: var(--bw) solid var(--ink); padding: 2px 14px; transform: rotate(-4deg) scale(0); transition: transform .25s cubic-bezier(.2,1.8,.4,1); pointer-events: none; } .combo.show { transform: rotate(-4deg) scale(1); }
.page-head { padding: clamp(28px, 5vw, 56px) 0 10px; border-bottom: 3px double var(--ink); margin-bottom: 8px; } .page-head h1 { font-size: clamp(36px, 6vw, 72px); margin-bottom: 8px; line-height: 1; font-weight: 900; }
.page-head p { color: var(--ink-2); font-size: 20px; font-style: italic; max-width: 700px; margin: 0; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 20px 0; }
.filters input[type=search], .filters select { flex: 1 1 260px; background: var(--surface); border: var(--bw) solid var(--ink); padding: 8px 14px; color: var(--ink); font: inherit; } .filters select { flex: 0 1 auto; }
.count-note { font-size: 13px; color: var(--ink-3); font-variant-caps: all-small-caps; letter-spacing: .1em; font-weight: 700; margin: -4px 0 14px; }
.tool-card .t-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; } .tool-card .t-top h4 a { color: var(--ink); }
.tool-card .t-best { font-size: 14px; color: var(--ink-2); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ink-3); } .tool-card .t-best b { color: var(--brick); }
.pl-card .pl-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 6px; }
.pl-card pre { white-space: pre-wrap; background: var(--code-bg); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; max-height: 230px; overflow: auto; margin: 8px 0; color: var(--code-ink); }
.pl-card .tip { font-size: 14px; color: var(--ink-2); font-style: italic; }
.chip-row.collapsed { max-height: 84px; overflow: hidden; -webkit-mask-image: linear-gradient(var(--studio-ink) 60%, transparent); mask-image: linear-gradient(var(--studio-ink) 60%, transparent); } .more-chips { margin: 0 0 16px; }
.gloss-list { columns: 2 300px; column-gap: 28px; } .gloss-item { break-inside: avoid; padding: 10px 14px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--ink-3); }
.gloss-item dt { font-family: var(--font-display); font-weight: 700; font-size: 18px; } .gloss-item dd { margin: 3px 0 0; color: var(--ink-2); font-size: 15.5px; } .gloss-item .from { font-size: 12px; color: var(--ink-3); }
.az { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; } .az a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; } .az a:hover { background: var(--ochre); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.sticker-slot { border: 1.5px dashed var(--ink-3); display: grid; place-items: center; text-align: center; font-size: 13.5px; color: var(--ink-3); padding: 10px; min-height: 96px; text-decoration: none; }
.sticker-slot.got { border: 1.5px solid var(--ink); background: var(--sand); color: var(--ink); font-weight: 600; } .sticker-slot img { width: 60%; height: auto; }
#palette { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(23,33,61,.6); } #palette.open { display: flex; }
.pal-box { width: min(680px, 94vw); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.pal-box input { width: 100%; padding: 16px 20px; background: var(--surface); border: 0; border-bottom: var(--bw) solid var(--ink); color: var(--ink); font: inherit; font-size: 19px; outline: none; }
.pal-results { max-height: 52vh; overflow: auto; padding: 6px; } .pal-item { display: flex; gap: 12px; align-items: center; padding: 8px 12px; color: var(--ink); cursor: pointer; text-decoration: none; } .pal-item.sel, .pal-item:hover { background: var(--ochre); }
.pal-item .k { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 13px; font-weight: 700; border: 1px solid var(--ink); padding: 0 6px; text-align: center; width: 66px; flex: none; } .pal-item small { display: block; color: var(--ink-2); font-size: 13px; }
.pal-foot { padding: 6px 14px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--ink); display: flex; gap: 16px; }
footer.site { border-top: 3px double var(--ink); padding: 36px 0 54px; color: var(--paper); font-size: 15px; background: var(--ink); } footer.site .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; } footer.site a { color: var(--ochre); } footer.site b { color: var(--studio-white); font-family: var(--font-display); font-size: 18px; } footer.site kbd { color: var(--ink); }
.reveal { opacity: 0; transform: translateY(18px); } .no-js-anim .reveal, .reduce-motion .reveal { opacity: 1 !important; transform: none !important; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); background: var(--ink); color: var(--paper); border: 1px solid var(--ochre); padding: 8px 18px; opacity: 0; transition: all .3s; z-index: 300; font-weight: 600; pointer-events: none; } #toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti-piece { position: fixed; z-index: 400; width: 9px; height: 13px; pointer-events: none; border: 1px solid var(--ink); }
.loader { width: 44px; height: 44px; margin: 60px auto 0; border-radius: 50%; border: 4px solid var(--paper-3); border-top-color: var(--brick); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.lesson-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.mode-switch { display: inline-flex; border: var(--bw) solid var(--ink); background: var(--surface); } .mode-switch button { border: 0; background: transparent; padding: 5px 14px; font-variant-caps: all-small-caps; letter-spacing: .09em; font-weight: 700; font-size: 15px; } .mode-switch button.on { background: var(--ink); color: var(--paper); } .mode-switch button:not(.on):hover { background: var(--paper-2); }
.mode-switch small { font-family: var(--font); letter-spacing: 0; font-weight: 600; opacity: .75; margin-left: 4px; font-size: 12px; font-variant-caps: normal; }
details.deep { border: 1px dashed var(--ink-3); background: rgba(255,255,255,.4); margin: 14px 0; } details.deep[open] { background: rgba(255,255,255,.65); border-style: solid; border-color: var(--ink); }
details.deep > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 7px 12px; font-weight: 600; font-size: 15.5px; } details.deep > summary::-webkit-details-marker { display: none; } details.deep > summary:hover { color: var(--brick); }
.s-ico { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); flex: none; line-height: 1; transition: transform .2s; } details.deep[open] .s-ico { transform: rotate(45deg); }
.s-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; } details.deep summary small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.deep-body { padding: 2px 16px 14px; } .deep-body > * + * { margin-top: 1.05em; } .deep-body > *:first-child { margin-top: 6px; }
.mode-deep details.deep { border: 0; background: none; margin: 0; } .mode-deep details.deep > summary { display: none; } .mode-deep .deep-body { padding: 0; } .mode-deep .deep-body > *:first-child { margin-top: 1.05em; }
.speaking { outline: 2px solid var(--ochre); outline-offset: 5px; background: rgba(207,159,74,.16); }
.mode-skim .more-text { display: none; } .mode-skim p.lead-open .more-text { display: inline; } .mode-skim p.lead-open .more-btn, .mode-deep .more-btn { display: none; }
.more-btn { border: 1px solid var(--ink); background: transparent; padding: 0 10px; font-weight: 700; font-size: .8em; line-height: 1.5; cursor: pointer; } .more-btn:hover { background: var(--ochre); }
.mode-skim .callout.long:not(.open) .c-body { max-height: 5.4em; overflow: hidden; -webkit-mask-image: linear-gradient(var(--studio-ink) 70%, rgba(0,0,0,.45)); mask-image: linear-gradient(var(--studio-ink) 70%, rgba(0,0,0,.45)); }
.c-more { margin-top: 8px; border: 1.5px solid var(--ink); background: var(--surface); padding: 4px 14px; min-height: 32px; font-weight: 700; font-size: 14px; cursor: pointer; } .c-more:hover { background: var(--ochre); } .mode-deep .c-more { display: none; }
@media (max-width: 980px) {
  .cover .container, .module-head.has-art .container { grid-template-columns: minmax(0, 1fr); }
  .module-layout { grid-template-columns: minmax(0, 1fr); padding-top: 22px; } .lesson-nav { position: static; max-height: none; }
  .lesson-nav-wrap { border: var(--bw) solid var(--ink); padding: 10px 14px; background: var(--surface); }
  .nav { display: none; position: absolute; top: var(--topbar-h); left: 0; right: 0; flex-direction: column; background: var(--paper); border-bottom: 3px double var(--ink); padding: 8px; margin: 0; } .nav.open { display: flex; }
  .menu-btn { display: grid; } .search-btn { min-width: 0; padding: 6px 10px; } .search-btn span, .search-btn kbd { display: none; } .xp-chip .bar { display: none; }
  .spread-book { grid-template-columns: minmax(0, 1fr); } .spread-book::before { display: none; } .spread-book .pg + .pg { border-top: 1.5px solid var(--ink); }
}
@media (max-width: 640px) { body { font-size: 17px; } .prose { font-size: 17.5px; } .strip { grid-template-columns: 1fr; } .s-txt { white-space: normal; } details.deep summary small { display: none; } .topbar { gap: 8px; } .brand span:last-child { font-size: 16px; } .stickers { max-width: none; } .gloss-list { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } * { scroll-behavior: auto !important; } .plate .cam { transition: none; } }
/* spread additions */
.pg .lesson-title.pt { font-family: var(--font); font-weight: 600; font-size: clamp(21px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: .05em; text-align: center; margin: 4px 0 8px; line-height: 1.12; }
.pg .eyebrow { display: block; text-align: center; margin-bottom: 2px; }
.pg .lesson-summary { font-size: 17px; text-align: center; margin: 0 0 12px; }
.pg .lesson-tools { justify-content: center; }
.spread-book.solo .keylist { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 22px; margin-top: 12px; }
.spread-book.solo .pg { padding-bottom: 20px; }
.module-head.slim { padding: 10px 0; } .module-head.slim .big-num { display: none; } .module-head.slim .crumbs { margin: 0; font-size: 12.5px; }
/* v2: full-width spread, chapter nav as a horizontal strip, book-width prose column */
.module-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 18px; }
.lesson-nav-wrap { min-width: 0; }
.lesson-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0 0 4px; border-bottom: 1px solid var(--ink); overflow: visible; }
.lesson-nav h5 { border: 0; margin: 0 14px 0 0; padding: 6px 0; align-self: center; white-space: nowrap; }
.lesson-nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 5px 10px; margin: 0; max-width: 210px; align-items: center; }
.lesson-nav a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-nav a.active { border-bottom-color: var(--brick); border-left: 0; background: transparent; font-weight: 700; }
.lesson-nav .side-link { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; }
.lesson .prose, .lesson > .prose { max-width: 790px; margin-inline: auto; }
.lesson-foot, .lesson > div[style*="margin-top:36px"] { max-width: 790px; margin-inline: auto; }
.lesson > .prose > .prose { max-width: none; }
@media (max-width: 980px) { .lesson-nav { overflow-x: auto; flex-wrap: nowrap; } .lesson-nav a { flex: none; } .lesson-nav h5 { display: none; } .lesson-nav .side-link { margin: 0; } }
.keylist.outline li { grid-template-columns: 24px 1fr; } .keylist.outline b { font-weight: 600; font-size: 15.5px; }
.pg .keylist { margin-top: 10px; }
.plate-fig + .keylist { margin-top: 14px; }

/* ===================== VIVID LOOK (default; ?look=classic restores the plain parchment) ===================== */
body.vivid { --acc: hsl(var(--h) 52% 36%); --acc-hi: hsl(var(--h) 62% 46%); --acc-deep: hsl(var(--h) 42% 15%); --acc-ink: hsl(var(--h) 42% 15%); --acc-text: hsl(var(--h) 52% 36%); --acc-mid: hsl(var(--h) 38% 24%); --acc-soft: hsl(var(--h) 55% 92%); --cream: var(--studio-white); }
body.vivid .topbar { background: var(--studio-ink); border-bottom: 3px solid var(--ochre); color: var(--cream); }
body.vivid .brand, body.vivid .nav a { color: var(--cream); } body.vivid .brand small { color: var(--ochre); }
body.vivid .nav a:hover { border-bottom-color: var(--ochre); } body.vivid .nav a.active { border-bottom-color: var(--ochre); color: var(--studio-white); }
body.vivid .search-btn { color: var(--studio-on-dark-muted); border-color: var(--studio-line-strong); } body.vivid .search-btn:hover { background: var(--studio-navy-raised); } body.vivid .search-btn kbd { background: transparent; color: var(--studio-on-dark-muted); border-color: var(--studio-line-strong); }
body.vivid .icon-btn { border-color: var(--studio-line-strong); color: var(--cream); } body.vivid .xp-chip { border-color: var(--studio-line-strong); color: var(--cream); } body.vivid .xp-chip .bar { border-color: var(--studio-line-strong); }
body.vivid #read-progress { background: var(--ochre); }
@media (max-width: 980px) { body.vivid .nav { background: var(--studio-ink); border-bottom-color: var(--ochre); } }
/* cover */
body.vivid .cover { background: radial-gradient(120% 90% at 78% 40%, var(--studio-navy-raised) 0%, var(--studio-ink) 62%, var(--studio-ink) 100%); border-bottom: 3px solid var(--ochre); color: var(--cream); }
body.vivid .cover h1 { color: var(--cream); } body.vivid .cover h1 .w2 { color: var(--studio-coral); }
body.vivid .cover .eyebrow, body.vivid .cover p.lead { color: var(--studio-on-dark-muted); }
body.vivid .cover .btn { background: transparent; color: var(--cream); border-color: var(--studio-line-strong); } body.vivid .cover .btn:hover { background: var(--ochre); color: var(--ink); }
body.vivid .cover .btn.primary { background: var(--studio-coral); border-color: var(--studio-coral); color: var(--studio-ink); } body.vivid .cover .btn.primary:hover { background: var(--studio-coral); }
body.vivid .cover .stickers { border-color: var(--studio-line-strong); } body.vivid .cover .sticker-stat { border-color: var(--studio-line-strong); } body.vivid .cover .sticker-stat span { color: var(--studio-on-dark-muted); }
body.vivid .cover-art { outline-color: var(--studio-line-strong); border-color: var(--cream); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 12px 12px 0 rgba(224,121,63,.9); }
body.vivid .cover-art img { filter: saturate(1.3) contrast(1.05); }
body.vivid .marquee { background: var(--ochre); color: var(--studio-ink); } body.vivid .marquee-track span::before { color: var(--studio-ink); }
/* contents cards */
body.vivid .mod-card { box-shadow: 6px 6px 0 var(--ink); } body.vivid a.mod-card:hover { box-shadow: 9px 9px 0 var(--brick); }
body.vivid .mod-card .thumb img { filter: saturate(1.3) contrast(1.04); }
body.vivid .mod-card .num { background: var(--ink); color: var(--cream); }
body.vivid .rule-strip em { color: var(--acc-hi); }
/* chapter band */
body.vivid .module-head { background: var(--acc-deep); border-bottom: 4px solid var(--acc-hi); color: var(--cream); }
body.vivid .module-head h1 { color: var(--cream); } body.vivid .module-head p { color: var(--studio-on-dark-muted); }
body.vivid .module-head .big-num { color: var(--acc-mid); opacity: 1; }
body.vivid .module-head .crumbs, body.vivid .module-head .crumbs a { color: var(--studio-on-dark-muted); }
body.vivid .module-head .badge { color: var(--cream); border-color: var(--studio-line-strong); background: transparent; }
body.vivid .module-head.slim { padding: 9px 0; }
body.vivid .lesson-nav { border-bottom-color: var(--acc); } body.vivid .lesson-nav h5 { color: var(--acc); }
body.vivid .lesson-nav a.active { border-bottom-color: var(--acc-hi); color: var(--acc-ink); } body.vivid .lesson-nav a.done .dot { background: var(--acc-hi); border-color: var(--acc-hi); }
/* the spread */
body.vivid .spread-book { background: var(--book); border-color: var(--acc-ink); box-shadow: 10px 10px 0 var(--acc-hi); }
body.vivid .rh { background: var(--acc-deep); color: var(--cream); border: 0; padding: 4px 8px; letter-spacing: .16em; }
body.vivid .pg h2.pt, body.vivid .pg .lesson-title.pt { color: var(--acc-ink); }
body.vivid .eyebrow { color: var(--acc-text); }
body.vivid .keylist .n { background: var(--acc); color: var(--studio-white); border-color: var(--acc); } body.vivid .keylist li.on .n { background: var(--brick); border-color: var(--brick); }
body.vivid .keylist li:hover, body.vivid .keylist li.on { background: var(--acc-soft); }
body.vivid .step .lbl i { background: var(--acc); color: var(--studio-white); border-color: var(--acc); } body.vivid .step:hover .frame, body.vivid .step.on .frame { box-shadow: 0 0 0 3px var(--acc-hi); }
body.vivid .plate { border-color: var(--acc-ink); border-width: 2px; }
body.vivid .plate img { filter: saturate(1.38) contrast(1.05); }
body.vivid .plate .tag { background: rgba(253,247,230,.95); border-color: var(--acc-ink); color: var(--acc-ink); }
body.vivid .plate .tag.on { background: var(--acc-hi); color: var(--studio-white); }
body.vivid .plate svg.leads line { stroke: var(--acc-ink); stroke-width: 1.25; } body.vivid .plate svg.leads circle { fill: var(--brick); }
body.vivid .plate .note { border-color: var(--acc-ink); border-left: 6px solid var(--acc-hi); }
body.vivid .mode-switch { border-color: var(--acc-ink); } body.vivid .mode-switch button.on { background: var(--acc-deep); }
body.vivid .btn.primary { background: var(--acc); border-color: var(--acc-ink); color: var(--studio-white); } body.vivid .btn.primary:hover { background: var(--acc-hi); }
/* prose */
body.vivid .prose h2 { border-bottom: 2px solid var(--acc-ink); color: var(--acc-ink); }
body.vivid .prose h2::before { background: var(--acc); color: var(--studio-white); border-color: var(--acc); }
body.vivid .prose h3 { border-left-color: var(--acc-hi); } body.vivid .prose h4, body.vivid .prose li::marker { color: var(--acc); }
body.vivid .prose > p:first-of-type::first-letter { color: var(--acc); }
body.vivid .prose strong { background: linear-gradient(transparent 62%, hsl(var(--h) 80% 78% / .75) 62%); }
body.vivid .callout { box-shadow: 4px 4px 0 rgba(23,33,61,.18); }
body.vivid .tabs, body.vivid .table-wrap, body.vivid .prompt, body.vivid .flow .node, body.vivid .card { border-color: var(--acc-ink); }
body.vivid .tab-list button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--acc-hi); }
body.vivid .flow .node.hl { background: var(--acc-soft); } body.vivid .flow .arrow { color: var(--acc-hi); }
body.vivid .prose th { background: var(--acc-deep); color: var(--cream); border-bottom-color: var(--acc-ink); }
body.vivid .lesson-foot .nav-card.next { background: var(--acc-deep); color: var(--cream); border-color: var(--acc-ink); } body.vivid .lesson-foot .nav-card.next small { color: var(--studio-cyan); }
body.vivid .stat b { color: var(--acc-hi); }
body.vivid footer.site { background: var(--studio-ink); border-top: 4px solid var(--ochre); }

/* ===== field notes: real material ===== */
.refs { margin: 4px 0 30px; border: 1.5px solid var(--ink); background: var(--surface); padding: 14px 16px 16px; position: relative; }
.refs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-3); }
.refs-head .eyebrow { margin: 0; } .refs-head h3 { margin: 0; font-size: 22px; } .refs-sub { font-size: 13.5px; color: var(--ink-3); font-style: italic; flex-basis: 100%; }
.ref-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ref-grid.n1 { grid-template-columns: minmax(0, 560px); } .ref-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-card { margin: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--ink); }
.ref-open { display: block; padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: var(--well); cursor: zoom-in; aspect-ratio: 4/3; overflow: hidden; }
.ref-open img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s; } .ref-open:hover img { transform: scale(1.04); }
.ref-card figcaption { padding: 8px 11px 10px; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.ref-card figcaption b { font-family: var(--font-display); font-size: 15.5px; line-height: 1.2; }
.ref-card .why { color: var(--ink-2); } .ref-card .credit { color: var(--ink-3); font-size: 12px; line-height: 1.35; } .ref-card .credit a { color: var(--ink-2); }
.ref-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
.ref-link { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 9px; border: 1px solid var(--ink-3); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .12s, background .12s; }
.ref-link:hover { border-color: var(--ink); background: var(--sand); } .ref-link b { font-family: var(--font-display); font-size: 15px; line-height: 1.25; } .ref-link::after { content: "↗"; position: absolute; }
.rl-host { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brick); font-weight: 700; } .rl-note { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.ref-link { position: relative; } .ref-link::after { right: 10px; top: 7px; color: var(--ink-3); }
body.vivid .refs { border-color: var(--acc-ink); border-left: 6px solid var(--acc-hi); } body.vivid .refs-head h3 { color: var(--acc-ink); } body.vivid .ref-link:hover { background: var(--acc-soft); } body.vivid .rl-host { color: var(--acc); }
.lightbox { position: fixed; inset: 0; z-index: 600; background: rgba(12,10,8,.92); display: grid; place-items: center; padding: 16px; animation: immIn .2s ease-out; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--ink); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; display: block; margin: 0 auto; background: var(--well); }
.lightbox figcaption { padding: 10px 16px 12px; font-size: 15px; display: flex; flex-direction: column; gap: 3px; } .lightbox figcaption b { font-family: var(--font-display); font-size: 17px; } .lightbox .credit { font-size: 12.5px; color: var(--ink-3); } .lightbox .credit a { color: var(--ink-2); }
.lb-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1.5px solid var(--cream, var(--studio-white)); background: transparent; color: var(--studio-white); font-size: 20px; z-index: 2; } .lb-close:hover { background: var(--ochre); color: var(--ink); }
@media (max-width: 640px) { .refs { padding: 12px; } .ref-open img { height: 170px; } }
/* filmstrip: natural-width tiles at a fixed height, scroll sideways instead of wrapping/letterboxing */
.ref-grid, .ref-grid.n1, .ref-grid.n2, .ref-grid.n3, .ref-grid.n4 { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; align-items: flex-start; }
.ref-card { flex: 0 0 auto; width: 300px; max-width: 86vw; scroll-snap-align: start; }
.ref-open { aspect-ratio: auto; background: linear-gradient(100deg, var(--studio-soft) 30%, var(--studio-surface) 50%, var(--studio-soft) 70%) 0 0 / 200% 100%; animation: refsh 1.4s linear infinite; }
.ref-open:has(img.ok) { animation: none; background: var(--well); }
.ref-open img { width: 100%; height: 210px; object-fit: contain; opacity: 0; transition: transform .25s; } .ref-open img.ok { opacity: 1; }
@keyframes refsh { to { background-position: -200% 0; } }
.ref-card figcaption { width: 0; min-width: 100%; box-sizing: border-box; }
.ref-card .why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
.ref-card .credit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lightbox .why, .lightbox .credit { display: block; -webkit-line-clamp: none; overflow: visible; }
.ref-card figcaption::after { content: "Tap to enlarge"; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .ref-open { animation: none; } }
.ref-card .pu { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font); font-weight: 700; color: var(--brick); border: 1px solid var(--brick); padding: 0 5px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; }

/* chapter tabs: one scrollable row, never wraps; full titles on hover/focus */
.lesson-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.lesson-nav a { flex: none; max-width: 260px; scroll-snap-align: center; min-height: 40px; }
.lesson-nav a:focus-visible, .c-more:focus-visible, .ref-open:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.lesson-nav a.active { background: rgba(255,255,255,.55); }
.lesson-nav .side-link { flex: none; margin-left: auto; padding-left: 12px; }
/* book spread: the contents page stretches to the plate page instead of leaving a void */
@media (min-width: 981px) {
  .spread-book:not(.solo) .pg:first-child { display: flex; flex-direction: column; }
  .spread-book:not(.solo) .pg:first-child .keylist.outline { flex: 1; align-content: space-evenly; margin-top: 12px; }
  .spread-book:not(.solo) .pg:first-child .keylist.outline li { align-items: center; }
  .spread-book:not(.solo) .pg:first-child .folio { margin-top: auto; padding-top: 10px; }
}

/* top bar: keep nav labels on one line, give the search box less width */
.nav a { white-space: nowrap; } .search-btn { min-width: 150px; } .search-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .search-btn { min-width: 0; } .search-btn span { display: none; } .nav a { padding: 6px 8px; } }
.lesson-nav h5 { position: sticky; left: 0; z-index: 1; background: var(--studio-soft); padding-right: 10px; }

/* The playable field-guide cover. */
html body .cover.hero2 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4.5vw, 68px) 0 40px; color: var(--studio-ink); background: var(--studio-page); border-bottom: 0; }
.hero2::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .35; background: radial-gradient(ellipse at 85% 30%, var(--studio-cyan-soft), transparent 55%), repeating-linear-gradient(90deg, transparent 0 79px, rgb(101 65 223 / .04) 80px); }
.cover.hero2 .factory-layout { width: min(1380px, 100% - 2 * clamp(20px, 4vw, 64px)); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: clamp(30px, 5vw, 80px); align-items: start; }
.factory-intro { grid-column: 1; grid-row: 1; padding-top: 18px; }
.factory-edition, .factory-caption, .factory-step, .factory-run, .factory-footnote, .factory-proof, .route-number, .path-select, .game-label, .factory-game button { font-family: var(--font); }
.factory-edition { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; line-height: 1.6; margin-bottom: 28px; max-width: 290px; }
.edition-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--studio-violet); flex: none; }
html body .cover.hero2 h1 { font-size: clamp(62px, 6.5vw, 96px); letter-spacing: -.055em; line-height: .98; margin: 0 0 28px; color: var(--studio-ink); font-weight: 600; }
.hero2 h1 em { color: var(--studio-violet); font-weight: 500; }
.factory-outro { grid-column: 1; grid-row: 2; }
html body .cover.hero2 p.lead { color: var(--studio-muted); font-style: normal; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 390px; margin: 0 0 28px; }
.hero2 .hero-cta { gap: 22px; align-items: center; }
html body .hero2 .btn.primary { background: var(--studio-violet); color: var(--studio-white); border: 1px solid var(--studio-violet); border-radius: 4px; font: 700 15px/1.5 var(--font); letter-spacing: 0; font-variant-caps: normal; padding: 14px 22px; box-shadow: 3px 3px 0 var(--studio-ink); }
html body .hero2 .btn.primary:hover { background: var(--studio-violet-hover); transform: translateY(-2px); box-shadow: 3px 5px 0 var(--studio-ink); }
.hero2 .btn.primary span { margin-left: 10px; font-size: 22px; }
.factory-browse { color: var(--studio-ink); font: 700 13px/1.5 var(--font); text-decoration: none; border-bottom: 1px solid var(--studio-line-strong); padding: 6px 0; }
.factory-browse span { margin-left: 7px; }
.factory-footnote { color: var(--studio-muted); font-size: 12px; max-width: 310px; margin-top: 26px; }
.factory-scene { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.factory-caption { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 0 0 14px; color: var(--studio-muted); }
.factory-caption b { color: var(--studio-violet); margin-right: 8px; }
.factory-hand { font: 22px/1.1 var(--hand); color: var(--studio-violet); text-transform: none; letter-spacing: 0; transform: rotate(-4deg); }
.factory-art { position: relative; border: 1px solid var(--studio-line-strong); border-radius: 45% 45% 5px 5px / 12% 12% 5px 5px; background: var(--studio-cyan-soft); box-shadow: 5px 5px 0 var(--studio-ink); }
.factory-art > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: inherit; }
.factory-flow { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; overflow: visible; }
.factory-flow path { stroke: var(--studio-violet); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 20; opacity: 0; }
.factory-running .factory-flow path { opacity: .65; animation: factory-conveyor 1s linear infinite; }
@keyframes factory-conveyor { to { stroke-dashoffset: -64; } }
.factory-pin { position: absolute; display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; min-height: 44px; background: var(--studio-surface); border: 1.5px solid var(--studio-ink); border-radius: 30px; box-shadow: 2px 3px 0 var(--studio-ink); font: 700 12px/1.2 var(--font); transition: transform .18s, background .18s; color: var(--studio-ink); }
.factory-pin span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; }
.factory-pin:hover { transform: translateY(-3px); }
.factory-pin[aria-pressed=true] { background: var(--studio-cyan); transform: translateY(-3px); }
.pin-design { top: 10%; left: -14px; }.pin-code { top: 28%; right: -12px; }.pin-art { bottom: 12%; left: 6%; }.pin-test { bottom: 24%; right: -10px; }
.factory-stamp { position: absolute; bottom: 4%; right: 3%; font: 20px/1 var(--hand); color: var(--studio-ink); transform: rotate(-8deg); }
.factory-controls { display: flex; gap: 14px; align-items: center; margin-top: 20px; }
.factory-steps { display: flex; flex: 1; min-width: 0; gap: 4px; }
.factory-step { flex: 1; border: 0; border-top: 2px solid var(--studio-line); padding: 8px 2px; color: var(--studio-muted); background: none; font-size: 12px; font-weight: 700; text-align: left; min-height: 44px; transition: border-color .18s; }
.factory-step span { font-size: 9px; opacity: .8; margin-right: 4px; }
.factory-step[aria-pressed=true] { border-color: var(--studio-violet); color: var(--studio-violet); }
.factory-run { min-height: 46px; flex: none; padding: 10px 14px; background: var(--studio-ink); color: var(--studio-white); border: 1px solid var(--studio-ink); border-radius: 3px; font-size: 12px; font-weight: 700; }
.factory-run span { margin-left: 9px; }
.factory-run:hover { background: var(--studio-navy-raised); }
.factory-run:disabled { cursor: progress; opacity: .75; }
.factory-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 83px; padding: 10px 0 16px; color: var(--studio-ink); }
.factory-note b { font-size: 17px; }.factory-note p { font: 12px/1.5 var(--font); margin: 4px 0 0; color: var(--studio-muted); max-width: 400px; }
.factory-note a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--studio-line-strong); border-radius: 50%; color: var(--studio-ink); text-decoration: none; flex: none; font-size: 23px; }
.factory-game { position: relative; height: 138px; background: var(--studio-ink); border: 1px solid var(--studio-ink); border-radius: 5px; overflow: hidden; color: var(--studio-white); }
.game-hud { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 12px 15px; pointer-events: none; gap: 3px; }
.game-label { color: var(--studio-cyan); font-size: 9px; letter-spacing: .16em; font-weight: 700; }
#factory-game-status { font: 12px/1.4 var(--font); max-width: calc(100% - 130px); }
.game-world { position: absolute; inset: 0; overflow: hidden; }
.game-ground { position: absolute; left: 0; right: 0; bottom: 21px; height: 2px; background: var(--studio-cyan); }
.game-hill { position: absolute; width: 130px; height: 130px; border: 1px solid rgb(70 221 237 / .18); border-radius: 15px; transform: rotate(45deg); bottom: -110px; }
.hill-one { left: 28%; }.hill-two { left: 55%; width: 180px; height: 180px; bottom: -120px; }
.game-player { position: absolute; bottom: 23px; left: 44px; width: 26px; height: 28px; border: 2px solid var(--studio-violet-soft); border-radius: 10px 10px 6px 6px; background: var(--studio-violet); box-shadow: 0 3px 0 var(--studio-ink); display: flex; align-items: center; justify-content: center; gap: 5px; }
.game-player::before { content: ''; position: absolute; width: 2px; height: 7px; background: var(--studio-cyan); left: 10px; top: -8px; }
.game-player i { width: 5px; height: 6px; background: var(--studio-cyan); border-radius: 2px; }
.game-crate { position: absolute; bottom: 23px; left: 110%; width: 22px; height: 24px; border: 2px solid var(--studio-on-dark-muted); background: repeating-linear-gradient(45deg, var(--studio-warning) 0 7px, var(--studio-warning) 7px 9px); }
.factory-game button { position: absolute; right: 13px; top: 12px; max-width: 122px; min-height: 44px; font-size: 11px; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--studio-cyan); background: var(--studio-cyan); color: var(--studio-ink); font-weight: 800; }
.factory-game button:disabled { background: transparent; color: var(--studio-line); border-color: var(--studio-line-strong); cursor: default; }
.factory-game[data-state=won] .game-player { background: var(--studio-success); }
.hero2 :focus-visible { outline: 3px solid var(--studio-focus); outline-offset: 4px; }
.factory-proof { background: var(--studio-soft); border-block: 1px solid var(--studio-line); color: var(--studio-ink); padding: 18px 0; }
.factory-proof .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.factory-proof b { font-family: var(--font-display); font-size: 24px; margin-right: 4px; }
.proof-intro { max-width: 180px; font-size: 13px; font-weight: 700; }
.routes-section { background: var(--studio-page); border-bottom: 1px solid var(--studio-line); }
.route-number { display: block; color: var(--studio-muted); letter-spacing: .1em; font-size: 10px; margin-bottom: 16px; }
.path-card { border: 1px solid var(--studio-line); border-top: 3px solid var(--studio-violet); box-shadow: none; padding: 22px; background: var(--studio-surface); display: flex; flex-direction: column; }
.path-card h3 { font-size: 23px; }.path-card p { flex: 1; font-size: 15px; min-height: 48px; }
.path-select { border: 0; border-top: 1px solid var(--studio-line); padding: 14px 0 0; margin-top: 18px; background: none; color: var(--studio-ink); display: flex; justify-content: space-between; text-align: left; min-height: 44px; font-size: 12px; font-weight: 800; width: 100%; }
.path-card.active { background: var(--studio-violet-soft); border-color: var(--studio-violet); }.path-card:hover { border-color: var(--studio-violet); }
.curriculum-section { scroll-margin-top: 80px; }
.chapter-stage + .chapter-stage { margin-top: 46px; }
.chapter-stage-heading { display: flex; align-items: center; gap: 15px; border-top: 1px solid var(--studio-line); padding: 20px 0; }
.chapter-stage-heading > span { font: 34px/1 var(--font-display); color: var(--studio-violet); }
.chapter-stage-heading h3 { margin: 0; font-size: 25px; }.chapter-stage-heading p { font-size: 14px; margin: 3px 0 0; color: var(--studio-muted); }.chapter-stage-heading small { margin-left: auto; white-space: nowrap; color: var(--studio-muted); font: 11px var(--font); }
#mod-grid .mod-card { border-top: 5px solid hsl(var(--chapter-hue) 32% 43%); box-shadow: 3px 3px 0 var(--studio-ink); transition: opacity .18s, transform .18s; }
#mod-grid .mod-card .num { background: hsl(var(--chapter-hue) 35% 90%); color: var(--studio-ink); border-color: var(--studio-ink); }
#mod-grid .mod-card.route-muted { opacity: .5; }#mod-grid .mod-card.route-muted:hover, #mod-grid .mod-card.route-muted:focus-visible { opacity: 1; }
#mod-grid .mod-card.route-selected { outline: 3px solid var(--studio-violet); outline-offset: 3px; }
#mod-grid .mod-card[data-route-order]::before { content: attr(data-route-order); display: block; background: var(--studio-violet); color: var(--studio-white); padding: 4px 12px; font: 11px/1.6 var(--font); }
@media (min-width: 1100px) { #mod-grid .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } #mod-grid .mod-card h3 { font-size: 19px; } }
@media (max-width: 1100px) and (min-width: 761px) { .cover.hero2 .factory-layout { column-gap: 28px; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } html body .cover.hero2 h1 { font-size: 64px; }.factory-controls { flex-wrap: wrap; }.factory-run { width: 100%; }.factory-caption { font-size: 10px; }.factory-hand { font-size: 18px; } }
@media (max-width: 760px) {
  html body .cover.hero2 { padding: 26px 0 30px; }
  .cover.hero2 .factory-layout { display: flex; flex-direction: column; gap: 0; width: calc(100% - 40px); }
  .factory-intro { padding: 0; width: 100%; }.factory-edition { font-size: 9px; max-width: none; margin-bottom: 16px; letter-spacing: .07em; }
  html body .cover.hero2 h1 { font-size: clamp(44px, 10.7vw, 70px); line-height: 1.02; margin-bottom: 25px; letter-spacing: -.05em; }.desktop-break { display: none; }
  .factory-scene { width: 100%; }.factory-caption { font-size: 9px; padding-bottom: 12px; }.factory-hand { font-size: 18px; }
  .factory-art { margin: 0 4px; }.factory-pin { min-height: 44px; padding-right: 9px; font-size: 10px; }.factory-pin span { width: 23px; height: 23px; }.pin-design { left: -12px; }.factory-stamp { font-size: 17px; }
  .factory-controls { flex-wrap: wrap; gap: 5px; margin-top: 16px; }.factory-steps { flex-basis: 100%; }.factory-step { font-size: 11px; }.factory-step span { font-size: 8px; }
  .factory-run { width: 100%; font-size: 13px; }.factory-note { min-height: 91px; }.factory-note p { font-size: 12px; }.factory-note b { font-size: 16px; }
  .factory-outro { margin-top: 26px; width: 100%; }html body .cover.hero2 p.lead { font-size: 17px; max-width: none; margin-bottom: 20px; }.hero2 .hero-cta { gap: 20px; }.factory-footnote { margin: 20px 0 0; max-width: none; font-size: 11px; }
  .factory-proof .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; font-size: 10px; }.factory-proof b { display: block; font-size: 23px; margin: 0; }.proof-intro { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; font-size: 12px; }
  .chapter-stage-heading small { display: none; }.chapter-stage-heading h3 { font-size: 24px; }.chapter-stage-heading p { font-size: 13px; }.chapter-stage-heading > span { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .factory-running .factory-flow path { animation: none; } .hero2 *, .path-card, #mod-grid .mod-card { scroll-behavior: auto; transition: none !important; animation: none !important; } }

/* chapter cards: cursor spotlight */
.mod-card { position: relative; } .mod-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%), rgb(101 65 223 / .15), transparent 65%); mix-blend-mode: soft-light; } .mod-card:hover::after { opacity: 1; }

/* A shared workbench language across the reader and resource libraries. */
body.vivid .topbar { background: var(--studio-ink); border-bottom: 1px solid var(--studio-line-strong); }
body.vivid .nav a { font: 700 11px/1.5 var(--font); letter-spacing: .01em; padding: 10px 8px; }
body.vivid .nav a.active { color: var(--studio-on-dark-muted); border-bottom-color: var(--studio-on-dark-muted); }
body.vivid .nav a:hover { color: var(--studio-on-dark-muted); }
body.vivid .topbar :focus-visible { outline-color: var(--studio-cyan); }
body.vivid .search-btn { font: 12px/1.5 var(--font); min-height: 38px; border-radius: 4px; border-color: var(--studio-line-strong); }
body.vivid .search-btn:hover { background: var(--studio-navy-raised); }
body.vivid .brand small { color: var(--studio-cyan); }
body.vivid .module-head { background: var(--studio-ink); border-bottom: 4px solid hsl(var(--h) 35% 66%); }
body.vivid .module-head .big-num { color: hsl(var(--h) 25% 33%); }
body.vivid .module-head h1 { font-weight: 600; letter-spacing: -.035em; }
.lesson-nav a { min-height: 44px; }.lesson-nav h5 { background: var(--studio-soft); }
body.vivid .lesson-nav a.active { background: var(--studio-violet-soft); border-bottom-color: var(--studio-violet); color: var(--studio-ink); }
body.vivid .spread-book { box-shadow: 5px 5px 0 var(--studio-line); border-color: var(--studio-line-strong); }
body.vivid .rh { background: var(--studio-ink); color: var(--studio-white); }
.page-head { position: relative; padding: 42px 0 30px; margin-bottom: 24px; border-bottom: 1px solid var(--studio-line-strong); }
.page-head::after { content: 'THE MAKER’S FIELD GUIDE'; display: block; font: 10px/1.5 var(--font); letter-spacing: .15em; color: var(--studio-muted); margin-top: 22px; }
.page-head h1 { font-weight: 600; letter-spacing: -.04em; color: var(--studio-ink); }.page-head p { font-style: normal; max-width: 730px; font-size: 18px; color: var(--studio-muted); }
.filters input[type=search], .filters select { min-height: 48px; border: 1px solid var(--studio-line-strong); border-radius: 4px; font: 15px/1.5 var(--font); }
.chip-row .chip { min-height: 40px; border: 1px solid var(--studio-line-strong); background: var(--studio-surface); padding: 7px 13px; font: 12px/1.5 var(--font); border-radius: 30px; }
.chip-row .chip.on, body.vivid .chip-row .chip.on { background: var(--studio-ink); color: var(--studio-white); border-color: var(--studio-ink); }
.pl-card, .tool-card, .gloss-item, .masters-quote { border-color: var(--studio-line-strong); border-radius: 4px; }
.pl-card .pl-head { gap: 16px; }.pl-card h4, .tool-card h4 { font-size: 22px; line-height: 1.2; }.pl-card .badge { margin-top: 8px; }
.tool-card { display: flex; flex-direction: column; }.tool-card > p { flex: 1; }
.build-bench { max-width: 790px; margin: 34px auto 0; border: 1px solid var(--studio-violet); border-radius: 5px; background: var(--studio-violet-soft); box-shadow: 4px 4px 0 var(--studio-line); }
.build-bench > summary { display: flex; list-style: none; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; cursor: pointer; }.build-bench > summary::-webkit-details-marker { display: none; }
.build-bench summary small { display: block; font: 9px/1.5 var(--font); letter-spacing: .13em; color: var(--studio-muted); margin-bottom: 4px; }.build-bench summary b { display: block; font: 26px/1.2 var(--font-display); color: var(--studio-ink); }.build-bench summary b::after { content: ' +'; color: var(--studio-violet); }.build-bench[open] summary b::after { content: ' −'; }
.bench-progress { background: var(--studio-white); border: 1px solid var(--studio-line-strong); border-radius: 30px; padding: 6px 11px; font: 11px/1.5 var(--font); color: var(--studio-ink); flex: none; }.bench-complete .bench-progress { background: var(--studio-violet); color: var(--studio-white); }
.bench-body { padding: 0 20px 22px; }.bench-body > p { margin: 0 0 20px; font-size: 16px; color: var(--studio-muted); }.bench-body > label, .bench-body legend { display: block; font: 700 12px/1.6 var(--font); color: var(--studio-ink); margin: 16px 0 8px; }
.bench-body textarea, .prompt-workshop textarea { display: block; width: 100%; min-width: 0; resize: vertical; background: var(--studio-surface); color: var(--studio-ink); border: 1px solid var(--studio-line-strong); border-radius: 3px; padding: 12px; font: 14px/1.6 var(--font); }
.bench-body fieldset { padding: 0; border: 0; margin: 12px 0 20px; }.bench-check { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; font: 14px/1.5 var(--font); min-height: 35px; }.bench-check input { width: 20px; height: 20px; accent-color: var(--studio-violet); flex: none; }.bench-check:has(:checked) span { color: var(--studio-success); }
.bench-actions, .draft-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }#bench-saved, .draft-status { font: 11px/1.5 var(--font); color: var(--studio-muted); }
.prompt-workshop { border-top: 1px solid var(--studio-line); margin: 12px 0; }.prompt-workshop summary { display: flex; justify-content: space-between; cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--studio-violet); font: 700 13px/1.6 var(--font); }.prompt-workshop label { font: 12px/1.5 var(--font); color: var(--studio-muted); display: block; margin: 4px 0 8px; }.prompt-workshop textarea { font-family: var(--mono); font-size: 12px; }.draft-actions { margin: 12px 0; }
.toolkit { border: 1px solid var(--studio-violet); background: var(--studio-cyan-soft); border-radius: 5px; padding: 22px; }.toolkit-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.toolkit h2 { font-size: 30px; margin: 5px 0; color: var(--studio-ink); }.toolkit-head p, .toolkit-empty { font-size: 15px; color: var(--studio-muted); margin: 8px 0; }#toolkit-count { flex: none; font: 12px var(--font); color: var(--studio-ink); }.toolkit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 20px; }.toolkit-grid article { padding: 16px; background: var(--studio-surface); border: 1px solid var(--studio-line-strong); border-radius: 3px; }.toolkit-grid h3 { font-size: 22px; }.toolkit-grid p { font-size: 14px; color: var(--studio-muted); }.toolkit-grid button { border: 0; background: none; color: var(--studio-violet); padding: 6px 0; font: 700 12px var(--font); min-height: 40px; }
.toolkit-add { display: block; width: 100%; border: 1px solid var(--studio-violet); border-radius: 3px; margin-top: 16px; padding: 10px; background: var(--studio-violet-soft); color: var(--studio-ink); font: 700 12px/1.5 var(--font); min-height: 44px; }.toolkit-add[aria-pressed=true] { background: var(--studio-violet); color: var(--studio-white); }
.btn:active, .factory-run:active, .factory-game button:active, .toolkit-add:active, .path-select:active { transform: translateY(2px); box-shadow: none; }
@media (max-width: 980px) { body.vivid .nav { background: var(--studio-ink); }.nav.open a { min-height: 44px; } }
@media (max-width: 600px) { .page-head { padding-top: 30px; }.page-head h1 { font-size: 43px; }.page-head p { font-size: 16px; }.toolkit { padding: 16px; }.toolkit-head { align-items: flex-start; flex-direction: column; }.toolkit h2 { font-size: 26px; }.build-bench > summary { padding: 16px; }.build-bench summary b { font-size: 23px; }.bench-progress { font-size: 10px; }.bench-body { padding: 0 16px 18px; } }
html body.vivid .cover.hero2 .btn.primary { background: var(--studio-violet); color: var(--studio-white); border-color: var(--studio-violet); }
html body.vivid .cover.hero2 .btn.primary:hover { background: var(--studio-violet-hover); }
@media (min-width: 761px) { .cover.hero2 .factory-layout { width: min(1240px, 100% - 80px); grid-template-rows: min-content 1fr; column-gap: 48px; }.factory-scene { max-width: 640px; }.factory-outro { align-self: start; } }
@media (max-width: 760px) {
  .factory-scene { display: contents; }.factory-intro { order: 1; }.factory-caption { order: 2; width: 100%; }.factory-art { order: 3; width: calc(100% - 8px); }.factory-outro { order: 4; }.factory-controls { order: 5; width: 100%; margin-top: 24px; }.factory-note { order: 6; width: 100%; }.factory-game { order: 7; width: 100%; }
}
.filters > input, .filters > select { min-width: 0; max-width: 100%; }
.pl-head > div, .t-top > h4 { min-width: 0; overflow-wrap: anywhere; }
.t-top { flex-wrap: wrap; }
.source .s-url { overflow-wrap: anywhere; word-break: break-word; }
.gloss-item, .source-list, .masters-quote, .sticker-slot { overflow-wrap: anywhere; min-width: 0; }

/* Studio challenges: a small, playable decision at the end of every lesson. */
.challenge-jump-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 790px; margin: 24px auto; padding: 14px 18px; border: 1px solid var(--studio-line-strong); border-radius: 4px; background: var(--studio-cyan-soft); color: var(--studio-ink); font: 700 13px/1.5 var(--font); text-decoration: none; }
.challenge-jump-link:hover { background: var(--studio-cyan-soft); color: var(--studio-ink); }
.studio-challenge { max-width: 790px; margin: 48px auto 0; padding: clamp(20px, 4vw, 34px); background: var(--studio-surface); border: 1.5px solid var(--studio-line-strong); border-top: 6px solid var(--studio-violet); border-radius: 7px; box-shadow: 5px 5px 0 var(--studio-line); scroll-margin-top: 88px; }
.challenge-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.challenge-kicker, .challenge-section-label { color: var(--studio-muted); font: 800 10px/1.5 var(--font); letter-spacing: .1em; }
.challenge-badge { border: 1px solid var(--studio-line-strong); border-radius: 30px; padding: 6px 10px; font: 700 11px/1.5 var(--font); background: var(--studio-violet-soft); color: var(--studio-ink); }
#challenge-title { font: 600 clamp(27px, 4vw, 37px)/1.12 var(--font-display); letter-spacing: -.025em; color: var(--studio-ink); margin: 0 0 14px; }
.challenge-brief { font-size: 18px; line-height: 1.6; color: var(--studio-muted); margin: 0 0 25px; }
.challenge-options { display: grid; gap: 10px; border: 0; padding: 0; margin: 12px 0 20px; }
.challenge-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--studio-line); border-radius: 5px; background: var(--studio-surface); padding: 14px; cursor: pointer; min-height: 58px; transition: border-color .15s, background .15s, transform .15s; }
.challenge-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--studio-violet); }
.challenge-option > span { display: flex; gap: 12px; align-items: center; font: 14px/1.55 var(--font); color: var(--studio-ink); }
.challenge-option b { color: var(--studio-muted); font-size: 11px; font-weight: 800; }
.challenge-option:hover { border-color: var(--studio-violet); transform: translateX(2px); }
.challenge-option:has(:checked) { border-color: var(--studio-violet); background: var(--studio-violet-soft); box-shadow: inset 3px 0 0 var(--studio-violet); }
.challenge-option[data-result=retry] { border-color: var(--studio-warning); background: var(--studio-warning-soft); }
.challenge-option[data-result=success] { border-color: var(--studio-success); background: var(--studio-success-soft); }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.studio-challenge .btn { min-height: 44px; border-radius: 4px; font: 700 12px/1.5 var(--font); font-variant-caps: normal; letter-spacing: 0; }
.studio-challenge .btn.primary { background: var(--studio-violet); border-color: var(--studio-violet); color: var(--studio-white); }
.studio-challenge .btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.challenge-retry { font: 700 12px/1.5 var(--font); background: none; color: var(--studio-violet); border: 0; padding: 10px 4px; min-height: 44px; }
.challenge-feedback:empty { display: none; }.challenge-feedback { border-left: 3px solid var(--studio-warning); background: var(--studio-warning-soft); margin-top: 22px; padding: 15px 18px; color: var(--studio-muted); }.challenge-feedback[data-result=success] { border-color: var(--studio-success); background: var(--studio-success-soft); color: var(--studio-success); }.challenge-feedback > b { font: 800 14px/1.4 var(--font); }.challenge-feedback p { font-size: 16px; line-height: 1.6; margin: 6px 0 0; }.challenge-feedback small { display: block; font: 12px/1.5 var(--font); margin-top: 8px; }
.challenge-lab { border-top: 1px solid var(--studio-line); margin-top: 28px; padding-top: 24px; }.challenge-lab h3 { font-size: 26px; color: var(--studio-ink); margin: 10px 0; }.challenge-lab > p { font-size: 16px; line-height: 1.6; color: var(--studio-muted); margin-bottom: 20px; }
.challenge-lab > label, .lab-sliders label { font: 700 12px/1.6 var(--font); color: var(--studio-ink); display: block; margin: 14px 0 6px; }.challenge-lab select { display: block; width: 100%; min-height: 44px; padding: 8px 12px; font: 13px/1.5 var(--mono); border: 1px solid var(--studio-line-strong); border-radius: 4px; background: var(--studio-surface); color: var(--studio-ink); }
.lab-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }.lab-sliders output { display: block; font-weight: 400; }.lab-sliders input { display: block; width: 100%; accent-color: var(--studio-violet); min-height: 32px; margin: 6px 0; }
.jump-world { width: 100%; display: block; background: var(--studio-ink); border-radius: 5px; overflow: hidden; margin-top: 14px; }.jump-world text { fill: var(--studio-on-dark-muted); font: 9px var(--font); letter-spacing: 1px; }
.cooldown-tracks { padding: 20px 16px; margin: 18px 0; border-radius: 5px; background: var(--studio-ink); }.cooldown-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 15px; margin-bottom: 24px; font: 11px/1.5 var(--font); color: var(--studio-on-dark-muted); }.cooldown-row:last-child { margin-bottom: 12px; }.cooldown-lane { position: relative; height: 30px; margin-right: 12px; border-bottom: 1px solid var(--studio-line); }.cooldown-lane i { position: absolute; left: 0; bottom: 0; width: 13px; height: 20px; background: var(--studio-violet-light); border: 1px solid var(--studio-violet-soft); border-radius: 4px; transform: translateX(-50%); }.cooldown-lane b { position: absolute; right: 0; top: -4px; font-size: 10px; color: var(--studio-cyan); }
.lab-readout { color: var(--studio-muted); padding: 12px 0; font: 12px/1.8 var(--mono); overflow-wrap: anywhere; }.challenge-lab .lab-result { font: 13px/1.6 var(--font); margin: 14px 0 0; padding: 12px 14px; border-radius: 4px; background: var(--studio-warning-soft); color: var(--studio-muted); }.challenge-lab .lab-result[data-result=success] { background: var(--studio-success-soft); color: var(--studio-success); }
.lab-toggle { display: flex !important; gap: 10px; align-items: center; min-height: 44px; }.lab-toggle input { width: 19px; height: 19px; accent-color: var(--studio-violet); flex: none; }
.schedule-world { background: var(--studio-ink); border-radius: 5px; padding: 18px 14px; margin-top: 18px; }.schedule-lane { display: grid; grid-template-columns: 64px 1fr; gap: 10px; margin-bottom: 10px; }.schedule-lane > span { font: 10px/1.6 var(--font); color: var(--studio-on-dark-muted); align-self: center; }.schedule-lane > div { position: relative; height: 42px; border-bottom: 1px solid var(--studio-cyan-dark); }.schedule-lane b { position: absolute; top: 0; height: 34px; padding: 4px 2px; text-align: center; background: var(--studio-cyan-soft); color: var(--studio-ink); border: 1px solid var(--studio-ink); border-radius: 3px; overflow: hidden; font: 700 10px/1.2 var(--font); }.schedule-lane small { display: block; font-size: 9px; }.schedule-gates { color: var(--studio-cyan); font: 11px/1.6 var(--font); margin: 14px 0 0; }
.challenge-finish { border-top: 1px solid var(--studio-line); margin-top: 26px; padding-top: 22px; }.challenge-finish > b { font: 600 23px/1.2 var(--font-display); color: var(--studio-success); }.challenge-finish p { color: var(--studio-muted); font-size: 15px; margin: 10px 0 18px; }
.challenge-solved { border-top-color: var(--studio-success); }.challenge-solved .challenge-badge { background: var(--studio-success); color: var(--studio-white); border-color: var(--studio-success); }
.studio-challenge [hidden] { display: none !important; }.studio-challenge :focus-visible, .challenge-jump-link:focus-visible { outline: 3px solid var(--studio-focus); outline-offset: 4px; }
#build-bench { scroll-margin-top: 88px; }
.sticker-slot[data-mastered=true] { position: relative; border-style: solid; border-color: var(--studio-success); }.sticker-slot[data-mastered=true]::after { content: 'CHALLENGE ✓'; position: absolute; top: 4px; right: 4px; background: var(--studio-success); color: var(--studio-white); border-radius: 3px; font: 800 8px/1.5 var(--font); padding: 2px 5px; }
@media (max-width: 600px) { .studio-challenge { padding: 20px 16px; margin-top: 30px; }.challenge-brief { font-size: 16px; }.challenge-option { padding: 12px 10px; }.challenge-option > span { font-size: 13px; gap: 8px; }.challenge-kicker { font-size: 9px; }.challenge-badge { font-size: 10px; }.lab-sliders { gap: 14px; }.challenge-actions .btn { flex: 1 1 auto; justify-content: center; }.schedule-world { padding: 14px 10px; }.schedule-lane { grid-template-columns: 46px 1fr; gap: 6px; }.schedule-lane b { font-size: 8px; }.schedule-lane small { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .challenge-option { transition: none; }.challenge-option:hover { transform: none; } }

/* Light Studio: semantic color tokens shared by the cover, reader and labs. */
:root {
  color-scheme: light;
  --studio-page: #f6f7fc;
  --studio-surface: #ffffff;
  --studio-white: #ffffff;
  --studio-soft: #eceff8;
  --studio-line: #d9deed;
  --studio-line-strong: #9aa6c5;
  --studio-ink: #17213d;
  --studio-navy-raised: #263355;
  --studio-muted: #52607b;
  --studio-on-dark-muted: #ced7ef;
  --studio-violet: #6541df;
  --studio-violet-hover: #5030c4;
  --studio-violet-soft: #eee8ff;
  --studio-violet-light: #bca5ff;
  --studio-cyan: #46dded;
  --studio-cyan-dark: #086f86;
  --studio-cyan-soft: #e3f9fc;
  --studio-coral: #ff7d9a;
  --studio-danger-soft: #fff0f4;
  --studio-success: #197353;
  --studio-success-soft: #e5f6ef;
  --studio-warning: #915117;
  --studio-warning-soft: #fff3de;
  --studio-focus: #5030c4;
  --paper: var(--studio-page); --paper-2: var(--studio-soft); --paper-3: var(--studio-line);
  --ink: var(--studio-ink); --ink-2: var(--studio-muted); --ink-3: var(--studio-muted); --rule: var(--studio-ink);
  --mint: var(--studio-cyan-soft); --sand: var(--studio-violet-soft); --blue: var(--studio-soft); --rose: var(--studio-danger-soft);
  --brick: var(--studio-violet); --teal: var(--studio-cyan-dark); --salmon: var(--studio-coral); --ochre: var(--studio-cyan);
  --book: var(--studio-surface); --surface: var(--studio-surface); --well: var(--studio-soft); --surface-solid: var(--studio-surface);
  --ok: var(--studio-success); --danger: #ad3458; --code-bg: var(--studio-ink); --code-ink: #e4eaff;
}
body { background: var(--studio-page); }
body.vivid { --acc: var(--studio-violet); --acc-hi: var(--studio-violet); --acc-deep: var(--studio-ink); --acc-ink: var(--studio-ink); --acc-text: var(--studio-violet); --acc-mid: #303f68; --acc-soft: var(--studio-violet-soft); --cream: var(--studio-white); }
::selection { background: #dcd2ff; color: var(--studio-ink); }
body.vivid .topbar, .topbar { background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--studio-line); color: var(--studio-ink); }
body.vivid .brand, body.vivid .nav a { color: var(--studio-ink); }
body.vivid .brand small { color: var(--studio-violet); }
body.vivid .nav a:hover, body.vivid .nav a.active { color: var(--studio-violet); border-bottom-color: var(--studio-violet); }
body.vivid .search-btn, body.vivid .icon-btn, body.vivid .xp-chip { color: var(--studio-muted); border-color: var(--studio-line); background: var(--studio-page); }
body.vivid .search-btn:hover { background: var(--studio-violet-soft); }
body.vivid .search-btn kbd { color: var(--studio-muted); border-color: var(--studio-line-strong); }
body.vivid .xp-chip .bar { border-color: var(--studio-line-strong); }
body.vivid .xp-chip .lv { background: var(--studio-violet); color: white; }
body.vivid #read-progress { background: var(--studio-violet); }
body.vivid .topbar :focus-visible { outline-color: var(--studio-focus); }
html body .cover.hero2 { background: var(--studio-page); color: var(--studio-ink); }
.hero2::before { opacity: 1; background: radial-gradient(ellipse at 92% 28%, #dff8ff 0%, transparent 52%), radial-gradient(ellipse at 5% 12%, #eee6ff 0%, transparent 43%); }
.factory-art { background: var(--studio-cyan-soft); border-color: var(--studio-line-strong); box-shadow: 5px 5px 0 #c8c1f2; }
.factory-art > img { filter: saturate(.7); }
.factory-pin { color: var(--studio-ink); box-shadow: 2px 3px 0 #bbc5e0; border-color: #8797ba; }
.factory-pin[aria-pressed=true] { background: var(--studio-violet); color: white; border-color: var(--studio-violet); box-shadow: 2px 3px 0 #b7a2f0; }
.factory-flow path { stroke: var(--studio-violet); }
html body.vivid .cover.hero2 .btn.primary, body.vivid .btn.primary, .studio-challenge .btn.primary { background: var(--studio-violet); border-color: var(--studio-violet); color: white; }
html body.vivid .cover.hero2 .btn.primary:hover, body.vivid .btn.primary:hover { background: var(--studio-violet-hover); border-color: var(--studio-violet-hover); }
html body .hero2 .btn.primary { box-shadow: 3px 3px 0 #c9b9f3; }
html body .hero2 .btn.primary:hover { box-shadow: 3px 5px 0 #c9b9f3; }
.factory-browse { color: var(--studio-ink); border-color: var(--studio-line-strong); }
.factory-proof { background: var(--studio-surface); }
.factory-game button { color: var(--studio-ink); border-color: var(--studio-cyan); }
.factory-game button:disabled { color: var(--studio-on-dark-muted); border-color: #63749a; background: transparent; }
.game-player { background: var(--studio-violet-light); border-color: #e6dcff; }
.game-player i { background: var(--studio-cyan); }
.game-crate { background: repeating-linear-gradient(45deg, #ff7d9a 0 7px, #ffc2d1 7px 9px); border-color: #ffdbe5; }
.game-ground { background: var(--studio-cyan); }
.game-hill { border-color: rgb(70 221 237 / .18); }
.routes-section { background: #eef1fa; }
.path-card { border-color: var(--studio-line); border-top-color: #b5a1ef; }
.path-card:hover, .path-card.active { border-color: var(--studio-violet); }
.path-card.active { background: var(--studio-violet-soft); }
.path-select { color: var(--studio-violet); }
#mod-grid .mod-card { box-shadow: 3px 3px 0 var(--studio-line); }
#mod-grid .mod-card .num { background: var(--studio-surface); color: var(--studio-ink); border-color: var(--studio-line-strong); }
body.vivid .mod-card .thumb img, body.vivid .plate img { filter: saturate(.85); }
body.vivid .module-head { background: var(--studio-ink); border-bottom-color: var(--studio-cyan); }
body.vivid .module-head .big-num { color: #303f68; }
body.vivid .module-head p, body.vivid .module-head .crumbs, body.vivid .module-head .crumbs a { color: var(--studio-on-dark-muted); }
body.vivid .spread-book { background: var(--studio-surface); border-color: var(--studio-line-strong); box-shadow: 5px 5px 0 #dcd5f5; }
body.vivid .prose strong { background: linear-gradient(transparent 62%, #e8e0ff 62%); }
body.vivid .plate .tag { background: rgb(255 255 255 / .96); }
body.vivid .plate .tag.on { background: var(--studio-violet); }
body.vivid .lesson-nav a.active { background: var(--studio-violet-soft); color: var(--studio-violet); }
.page-head { border-color: var(--studio-line); }
.pl-card, .tool-card, .gloss-item, .masters-quote { background: var(--studio-surface); border-color: var(--studio-line); }
body.vivid .tabs, body.vivid .table-wrap, body.vivid .prompt, body.vivid .flow .node, body.vivid .card { border-color: var(--studio-line-strong); }
.toolkit { background: var(--studio-cyan-soft); border-color: #9bcbd8; }
.bench-check:has(:checked) span { color: var(--studio-success); }
.bench-complete .bench-progress { color: var(--studio-white); background: var(--studio-success); }
.studio-challenge { border-color: var(--studio-line-strong); border-top-color: var(--studio-violet); box-shadow: 5px 5px 0 #ded5f8; }
.challenge-badge { background: var(--studio-violet-soft); color: var(--studio-violet); border-color: #c1b3ed; }
.challenge-option:has(:checked) { border-color: var(--studio-violet); }
.challenge-solved .challenge-badge { background: var(--studio-success); color: white; }
.challenge-jump-link { color: var(--studio-violet); border-color: #c9bbee; background: var(--studio-violet-soft); }
.challenge-jump-link:hover { background: #e3d9ff; color: var(--studio-violet-hover); }
.jump-world text { fill: var(--studio-on-dark-muted); }
.schedule-lane b { background: #a9eaf4; color: var(--studio-ink); border-color: var(--studio-ink); }
body.vivid footer.site { background: var(--studio-ink); border-top-color: var(--studio-cyan); }
footer.site .src { color: var(--studio-on-dark-muted); }
footer.site a { color: var(--studio-cyan); }
#toast { background: var(--studio-ink); color: white; border-color: var(--studio-cyan); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--studio-violet); }
:focus-visible { outline-color: var(--studio-focus); }
@media (max-width: 980px) { body.vivid .nav { background: var(--studio-surface); border-bottom-color: var(--studio-line); } }

/* The academy: a visual atlas and a working studio. This is the current layout. */
body.academy { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --topbar-h: 72px; --rail-width: 176px; --studio-page: #f7f8fa; --studio-ink: #182329; --studio-muted: #59656e; --studio-line: #dfe3e5; --studio-line-strong: #a7b2b9; --studio-soft: #eef1f3; --studio-violet: #4c4ce5; --studio-violet-hover: #3535ba; --studio-violet-soft: #ededff; background: var(--studio-page); font: 16px/1.65 var(--font); }
body.academy h1, body.academy h2, body.academy h3, body.academy h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: var(--studio-ink); }
body.academy a { text-decoration-thickness: 1px; }
body.academy .container { width: min(1180px, calc(100% - 80px)); }
body.academy #app { width: calc(100% - var(--rail-width)); margin-left: var(--rail-width); min-height: calc(100vh - 72px); }
body.academy .section { padding: 64px 0; }
body.academy .eyebrow { font: 800 10px/1.5 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--studio-muted); }body.academy .eyebrow::before, body.academy .eyebrow::after { content: none; }
body.academy .btn { border: 1px solid var(--studio-line-strong); border-radius: 5px; padding: 12px 18px; font: 800 12px/1.5 var(--font); letter-spacing: 0; font-variant-caps: normal; min-height: 44px; justify-content: center; background: white; box-shadow: none; }
body.academy .btn:hover { background: var(--studio-soft); box-shadow: none; transform: translateY(-1px); }
body.academy .btn.primary { background: var(--studio-ink); color: white; border-color: var(--studio-ink); }body.academy .btn.primary:hover { background: #35434c; border-color: #35434c; }
body.academy .badge { font: 700 10px/1.6 var(--font); font-variant-caps: normal; letter-spacing: 0; color: var(--studio-muted); border-color: var(--studio-line); background: var(--studio-page); border-radius: 4px; padding: 3px 8px; }
body.academy .bar { height: 4px; border: 0; background: var(--studio-line); border-radius: 2px; }body.academy .bar > i { background: var(--studio-violet); }
body.academy .topbar { height: 72px; padding: 0 24px; gap: 18px; background: white; border-bottom: 1px solid var(--studio-line); box-shadow: none; }
body.academy .brand { width: 152px; flex: none; font: 800 16px/1 var(--font-display); letter-spacing: -.02em; }body.academy .brand small { font: 700 12px/1.35 var(--font); color: var(--studio-muted); letter-spacing: .04em; margin-top: 3px; }body.academy .brand-mark { width: 28px; }body.academy .brand-mark svg { width: 28px; height: 28px; }
body.academy .shell-context { font: 800 9px/1.5 var(--font); letter-spacing: .13em; color: var(--studio-muted); border-left: 1px solid var(--studio-line); padding: 9px 0 9px 28px; }
body.academy .nav { display: flex; position: fixed; left: 0; top: 72px; bottom: 0; width: var(--rail-width); margin: 0; padding: 35px 12px; flex-direction: column; align-items: stretch; gap: 5px; border-right: 1px solid var(--studio-line); background: white; counter-reset: nav; }
body.academy .nav::before { content: 'THE STUDIO INDEX'; display: block; font: 800 8px/1.6 var(--font); letter-spacing: .12em; color: #68747b; margin: 0 10px 17px; }
body.academy .nav a { counter-increment: nav; display: flex; gap: 12px; align-items: center; border: 0; padding: 12px 10px; min-height: 44px; font: 700 12px/1.4 var(--font); font-variant-caps: normal; letter-spacing: -.01em; color: #5a656c; border-radius: 4px; }
body.academy .nav a::before { content: '0' counter(nav); font: 10px var(--mono); color: #879299; }
body.academy .nav a:hover { color: var(--studio-ink); background: #f1f3f5; border: 0; }body.academy .nav a.active { background: #ededff; color: #3939b8; border: 0; }body.academy .nav a.active::before { color: #4c4ce5; }
body.academy .nav a[data-route=album] { border-top: 1px solid var(--studio-line); border-radius: 0; margin-top: 18px; padding-top: 20px; }
body.academy .nav::after { content: 'MAKE. TEST. REPEAT.'; position: absolute; bottom: 24px; left: 24px; font: 800 8px/1.6 var(--font); letter-spacing: .11em; color: #77828a; }
body.academy .search-btn { width: 225px; border: 1px solid var(--studio-line); background: #f7f8fa; border-radius: 5px; padding: 9px 12px; color: #53616c; min-height: 40px; font: 12px var(--font); }body.academy .search-btn span { display: block; }body.academy .search-btn kbd { display: block; }
body.academy .xp-chip { border: 0; background: transparent; padding: 0; }body.academy .xp-chip .bar { display: block; width: 36px; }body.academy .xp-chip .lv { background: var(--studio-ink); }body.academy .menu-btn { display: none; }
/* Home: headline, illustration and a separate interactive console. */
body.academy .atlas-cover { padding: 34px 0 0; }
.atlas-running-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--studio-line-strong); padding-bottom: 16px; font: 800 9px/1.5 var(--font); letter-spacing: .1em; color: var(--studio-muted); }.atlas-running-head > span:first-child { color: var(--studio-ink); }
.atlas-headline { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; align-items: end; padding: 34px 0 40px; }
.atlas-headline h1 { font-size: clamp(52px, 5.6vw, 90px); line-height: .96; letter-spacing: -.03em; margin: 0; color: var(--studio-ink); }.atlas-headline h1 > span { color: var(--studio-violet); }
.atlas-intro p { font-size: 13px; line-height: 1.7; margin: 0 0 20px; max-width: 285px; color: var(--studio-muted); }.atlas-intro .btn { width: 100%; gap: 18px; }.atlas-intro .factory-browse { display: block; border: 0; padding: 13px 0 0; font: 700 11px/1.5 var(--font); color: var(--studio-muted); text-decoration: none; }
.atlas-feature { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; border: 1px solid #cdd5d7; border-radius: 8px; overflow: hidden; background: #e5f4ed; }
.atlas-illustration { display: flex; flex-direction: column; min-width: 0; background: #e5f4ed; }.atlas-image-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px 4px; color: #466356; font: 800 8px/1.6 var(--font); letter-spacing: .06em; }.atlas-image-label > span:last-child { font-size: 9px; font-weight: 600; letter-spacing: 0; }.atlas-image-label i { display: inline-block; width: 5px; height: 5px; background: #3f8b6b; border-radius: 50%; margin-right: 5px; }
body.academy .atlas-cover .factory-art { border: 0; border-radius: 0; box-shadow: none; width: 100%; margin: auto 0; padding: 10px 12px; background: transparent; }
body.academy .atlas-cover .factory-art > img { display: block; width: 100%; height: auto; filter: none; border-radius: 0; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; }
body.academy .atlas-cover .factory-pin { min-height: 34px; padding: 3px 9px 3px 3px; font: 800 10px var(--font); border: 1px solid #324e44; box-shadow: 2px 2px 0 #486357; background: white; color: #243e33; }body.academy .atlas-cover .factory-pin span { width: 23px; height: 23px; }body.academy .atlas-cover .factory-pin[aria-pressed=true] { background: #223d32; border-color: #223d32; color: white; }
body.academy .atlas-cover .pin-design { left: 3%; top: 12%; }body.academy .atlas-cover .pin-code { right: 3%; top: 30%; }body.academy .atlas-cover .pin-art { left: 10%; bottom: 12%; }body.academy .atlas-cover .pin-test { right: 4%; bottom: 23%; }
.atlas-console { padding: 24px; background: #1d2b2a; color: #f6fbf7; display: flex; flex-direction: column; min-width: 0; }
.atlas-console-heading > span { color: #a7bbb0; font: 700 8px/1.5 var(--font); letter-spacing: .13em; }.atlas-console-heading > b { font: 600 26px/1.1 var(--font-display); letter-spacing: -.02em; display: block; margin: 10px 0 16px; }
body.academy .atlas-console .factory-steps { display: flex; flex-direction: column; flex: 0 0 auto; gap: 0; }
body.academy .atlas-console .factory-step { display: flex; align-items: center; gap: 12px; min-height: 37px; padding: 9px 0; border: 0; border-top: 1px solid #ffffff20; background: none; color: #a7bbb0; font: 600 11px/1.5 var(--font); }.atlas-console .factory-step > span { margin: 0; color: inherit; font: 9px var(--mono); }.atlas-console .factory-step > i { font-style: normal; margin-left: auto; }body.academy .atlas-console .factory-step[aria-pressed=true] { color: #d9f6b4; border-color: #ffffff20; }
body.academy .atlas-console .factory-note { margin: 14px 0; padding: 0; min-height: 78px; color: #f2f7f3; gap: 8px; }.atlas-console .factory-note b { font: 700 12px var(--font); }.atlas-console .factory-note p { font: 11px/1.6 var(--font); color: #b2c4b9; margin-top: 5px; }.atlas-console .factory-note a { width: 30px; height: 30px; font-size: 17px; border-color: #597066; color: #d9f6b4; }
body.academy .atlas-console .factory-run { min-height: 42px; margin-top: auto; background: #d9f6b4; color: #243829; border: 0; border-radius: 4px; width: 100%; font: 800 11px var(--font); display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
body.academy .atlas-console .factory-game { min-height: 125px; height: 125px; background: #162322; border: 1px solid #ffffff1f; margin-top: 14px; border-radius: 4px; flex: none; }.atlas-console .game-hud { padding: 10px; }.atlas-console .game-label { font-size: 7px; color: #d9f6b4; }.atlas-console #factory-game-status { max-width: calc(100% - 80px); font-size: 9px; color: #b2c4b9; }body.academy .atlas-console .factory-game button { right: 8px; top: 8px; max-width: 78px; font-size: 8px; min-height: 34px; padding: 6px 7px; background: #d9f6b4; color: #203426; border-color: #7d9e88; }body.academy .atlas-console .factory-game button:disabled { background: transparent; color: #b2c4b9; border-color: #597066; }.atlas-console .game-ground { background: #84ac87; }
.atlas-colophon { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--studio-line-strong); font: 10px/1.5 var(--font); color: var(--studio-muted); }.atlas-colophon > span:first-child { flex: 1; }.atlas-colophon b { color: var(--studio-ink); margin-right: 3px; }
.atlas-section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 30px; }.atlas-section-heading h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.1; margin: 8px 0 0; }.atlas-section-heading > p { max-width: 310px; color: var(--studio-muted); font-size: 12px; line-height: 1.7; margin: 0; }
body.academy .atlas-paths { padding-bottom: 0; }body.academy #paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }body.academy .path-card { padding: 20px; border: 1px solid var(--studio-line); border-radius: 5px; box-shadow: none; background: white; }body.academy .path-card h3 { font-size: 19px; margin: 9px 0; }body.academy .route-number { margin: 0; font: 800 8px var(--font); letter-spacing: .07em; color: var(--studio-muted); }body.academy .path-card p { font: 12px/1.7 var(--font); color: var(--studio-muted); min-height: 40px; }body.academy .path-select { color: var(--studio-ink); padding-top: 12px; margin-top: 13px; border-color: var(--studio-line); font-size: 10px; }body.academy .path-card.active { border-color: var(--studio-violet); background: #f0f0ff; }
body.academy .chapter-stage { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--studio-line-strong); padding: 28px 0; }body.academy .chapter-stage + .chapter-stage { margin-top: 0; }body.academy .chapter-stage-heading { display: block; padding: 0; border: 0; }body.academy .chapter-stage-heading > span { display: block; font: 600 48px/1 var(--font-display); letter-spacing: -.02em; color: #a8b1b7; margin-bottom: 17px; }body.academy .chapter-stage-heading h3 { font-size: 23px; line-height: 1.1; margin-bottom: 12px; }body.academy .chapter-stage-heading p { color: var(--studio-muted); font-size: 11px; line-height: 1.7; margin: 0 0 18px; }body.academy .chapter-stage-heading small { font: 800 8px var(--font); letter-spacing: .08em; color: var(--studio-muted); }
body.academy #mod-grid .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
body.academy #mod-grid .mod-card { display: grid; grid-template-columns: 39% minmax(0, 1fr); border: 1px solid var(--studio-line); border-radius: 5px; box-shadow: none; background: white; overflow: hidden; }
body.academy #mod-grid .mod-card .thumb { height: 100%; aspect-ratio: auto; min-height: 176px; border: 0; background: #e7f3ed; }body.academy #mod-grid .mod-card .thumb img { object-fit: cover; width: 100%; height: 100%; filter: none; }body.academy #mod-grid .mod-card .num { font: 700 8px/1.5 var(--font); padding: 3px 6px; left: 6px; top: 6px; background: #ffffffed; border: 0; border-radius: 3px; letter-spacing: 0; }
body.academy #mod-grid .mod-card .body { padding: 16px 14px; gap: 8px; }body.academy #mod-grid .mod-card h3 { font-size: 17px; line-height: 1.18; letter-spacing: -.02em; }body.academy #mod-grid .mod-card p { font: 11px/1.6 var(--font); color: var(--studio-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }body.academy #mod-grid .mod-card .meta { font: 9px/1.5 var(--font); gap: 4px; }body.academy #mod-grid .mod-card .meta span:first-child, body.academy #mod-grid .mod-card .meta span:nth-child(2) { display: none; }body.academy #mod-grid .mod-card .bar { margin-top: auto; height: 2px; }body.academy #mod-grid .mod-card::after { display: none; }body.academy #mod-grid .mod-card:hover { transform: translateY(-3px); border-color: #8a98a1; box-shadow: 0 5px 18px #1823290d; }body.academy #mod-grid .mod-card.route-selected { outline: 2px solid var(--studio-violet); outline-offset: 1px; }body.academy #mod-grid .mod-card[data-route-order]::before { grid-column: 1/-1; background: var(--studio-violet); font: 800 8px/1.7 var(--font); }
body.academy .atlas-resources { padding-top: 0; }.atlas-shelves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.atlas-shelf { display: block; position: relative; text-decoration: none; color: var(--studio-ink); }.atlas-shelf > div { background: #e4f2eb; aspect-ratio: 3/2; border-radius: 5px; overflow: hidden; }.atlas-shelf img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }.atlas-shelf:hover img { transform: scale(1.04); }.atlas-shelf > span { display: block; font: 800 8px/1.5 var(--font); letter-spacing: .08em; color: var(--studio-muted); margin: 16px 0 9px; }.atlas-shelf h3 { font-size: 24px; margin: 0 0 8px; }.atlas-shelf p { font-size: 12px; color: var(--studio-muted); max-width: 85%; }.atlas-shelf > b { position: absolute; bottom: 8px; right: 0; font-size: 20px; }
.atlas-bottom { border-top: 1px solid var(--studio-line); background: #eef1f2; padding: 36px 0; }.atlas-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 30px; }.atlas-bottom h2 { font-size: 30px; margin: 7px 0 10px; }.atlas-bottom p { font-size: 12px; color: var(--studio-muted); margin: 0; }.atlas-bottom .btn { flex: none; }
/* The chapter reader: persistent outline, generous image, readable content. */
body.academy .module-head, body.academy .module-head.slim { padding: 25px 0; background: transparent; color: var(--studio-ink); border: 0; }body.academy .module-head .container { display: block; }body.academy .module-head .crumbs, body.academy .module-head .crumbs a { color: var(--studio-muted); font: 11px/1.6 var(--font); text-decoration: none; }body.academy .crumbs > span { display: inline-block; margin: 0 10px; color: #b4bdc3; }body.academy .module-head h1 { font-size: clamp(34px, 4vw, 55px); max-width: 900px; line-height: 1.06; color: var(--studio-ink); margin: 17px 0 15px; }body.academy .module-head p { max-width: 700px; font: 15px/1.7 var(--font); color: var(--studio-muted); }body.academy .module-head .chips { margin-top: 24px; }body.academy .module-head .badge { color: var(--studio-muted); border-color: var(--studio-line); background: white; }
body.academy .module-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 36px; padding: 0 0 70px; align-items: start; }body.academy .lesson-nav-wrap { position: sticky; top: 94px; min-width: 0; max-height: calc(100vh - 118px); overflow-y: auto; scrollbar-width: thin; border: 0; padding: 0 12px 0 0; background: none; }.reader-rail-head { padding: 0 0 20px; }.reader-rail-head > a { display: block; font: 700 10px var(--font); color: var(--studio-muted); text-decoration: none; margin-bottom: 20px; }.reader-rail-head > b { display: block; font: 600 18px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--studio-ink); }.reader-rail-head > span { display: block; font: 10px var(--font); color: var(--studio-muted); margin: 14px 0 8px; }
body.academy .lesson-nav { display: flex; flex-direction: column; padding: 0; border: 0; overflow: visible; white-space: normal; max-height: none; gap: 3px; }body.academy .lesson-nav h5 { display: none; }body.academy .lesson-nav a { display: flex; width: 100%; max-width: none; min-height: 42px; gap: 9px; align-items: flex-start; padding: 10px 9px; border: 0; font: 12px/1.5 var(--font); color: #59656e; border-radius: 4px; }body.academy .lesson-nav a span:last-child { white-space: normal; overflow: visible; text-overflow: initial; }body.academy .lesson-nav a.active { background: #e9eaf8; color: #3739a8; border: 0; }body.academy .lesson-nav a:hover { background: #edf0f2; }body.academy .lesson-nav .dot { width: 14px; height: 14px; min-width: 14px; margin-top: 2px; font-size: 9px; border-color: #c1cad1; }body.academy .lesson-nav .side-link { display: flex; flex-direction: column; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--studio-line); }body.academy .lesson-nav .side-link a { margin: 0; }
body.academy #lesson-root { min-width: 0; padding: 0; }.reader-intro { padding: 10px 0 20px; }.reader-lesson-number { font: 800 9px/1.7 var(--font); color: var(--studio-muted); letter-spacing: .09em; }.reader-lesson-number > span { margin: 0 9px; color: #b2bbc1; }body.academy .reader-intro .lesson-title { font: 600 clamp(29px, 3.1vw, 45px)/1.08 var(--font-display); letter-spacing: -.025em; color: var(--studio-ink); margin: 16px 0; }body.academy .reader-intro .lesson-summary { font: 15px/1.8 var(--font); color: var(--studio-muted); max-width: 740px; margin: 0 0 22px; }body.academy .lesson-tools { justify-content: flex-start; margin: 0; gap: 8px; }body.academy .mode-switch { border: 1px solid var(--studio-line); border-radius: 5px; overflow: hidden; background: white; }body.academy .mode-switch button { padding: 9px 13px; font: 700 11px/1.4 var(--font); min-height: 36px; letter-spacing: 0; font-variant-caps: normal; }body.academy .mode-switch button.on { background: var(--studio-ink); color: white; }body.academy .mode-switch small { font: 9px var(--font); }body.academy .listen-btn { padding: 8px 12px; min-height: 36px; font-size: 11px; }
.reader-visual { border: 1px solid var(--studio-line); background: white; border-radius: 6px; padding: 18px; margin: 8px 0 24px; min-width: 0; }.reader-visual-caption { display: flex; align-items: center; gap: 20px; justify-content: space-between; margin-bottom: 17px; }.reader-visual-caption > span { font: 800 8px var(--font); letter-spacing: .1em; color: var(--studio-muted); }.reader-visual-caption b { font: 700 11px var(--font); color: var(--studio-muted); max-width: 65%; text-align: right; }
body.academy .reader-visual .plate { border: 0; border-radius: 4px; }body.academy .reader-visual .plate img { filter: none; }body.academy .reader-visual .plate-fig figcaption { font: 9px/1.6 var(--font); text-align: left; text-transform: none; letter-spacing: 0; margin-top: 10px; color: var(--studio-muted); }body.academy .plate .tag { font: 700 9px/1.5 var(--font); letter-spacing: 0; text-transform: none; }body.academy .plate .hint { font: 700 10px/1.6 var(--font); padding: 5px 8px; border-radius: 3px; border-color: #b7c4be; }body.academy .plate .note { font: 12px/1.6 var(--font); border-radius: 4px; }body.academy .plate .note b { font: 700 14px var(--font); margin-bottom: 4px; }
.reader-key { border-top: 1px solid var(--studio-line); margin-top: 14px; }.reader-key > summary, .reader-outline > summary, .reader-sequence > summary { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; list-style: none; cursor: pointer; font: 800 11px/1.6 var(--font); color: var(--studio-ink); }.reader-key > summary span, .reader-outline > summary span { color: var(--studio-muted); font-weight: 600; }.reader-key > summary::-webkit-details-marker, .reader-outline > summary::-webkit-details-marker { display: none; }
body.academy .reader-key .keylist, body.academy .reader-outline .keylist { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 10px; padding: 0; }body.academy .keylist li { padding: 9px; border: 1px solid var(--studio-line); border-radius: 4px; font: 11px/1.6 var(--font); }body.academy .keylist li b { font: 700 12px var(--font); }body.academy .keylist li span { font-size: 11px; }body.academy .keylist .n { font: 700 10px var(--font); width: 22px; height: 22px; }.reader-outline, .reader-sequence { margin: 0 0 18px; border-bottom: 1px solid var(--studio-line); }
body.academy .lesson .prose, body.academy .lesson > .prose { max-width: 740px; margin-inline: auto; font: 16px/1.85 var(--font); }body.academy .prose h2 { font: 600 28px/1.15 var(--font-display); letter-spacing: -.02em; padding-bottom: 14px; margin-top: 38px; border-bottom: 1px solid var(--studio-line); }body.academy .prose h2::before { display: none; }body.academy .prose h3 { font: 600 21px/1.3 var(--font-display); border: 0; padding-left: 0; margin-top: 26px; }body.academy .prose strong { background: none; font-weight: 800; }body.academy .prose > p:first-of-type::first-letter { font-size: inherit; float: none; color: inherit; line-height: inherit; padding: 0; margin: 0; font-weight: inherit; }body.academy details.deep { border: 1px solid var(--studio-line); border-radius: 4px; background: white; }body.academy details.deep summary { font: 700 12px/1.5 var(--font); padding: 12px; }body.academy details.deep .s-txt { font-style: normal; }body.academy .deep-body { padding: 4px 18px 18px; }
body.academy .refs { background: #eef1f3; border: 0; border-radius: 5px; }body.academy .refs-head h3 { font: 700 12px var(--font); }body.academy .refs-head p { font: 11px/1.5 var(--font); }body.academy .ref-open img { height: 160px; }body.academy .refs figcaption { font: 10px/1.5 var(--font); }
body.academy .callout, body.academy .widget, body.academy .tabs, body.academy .table-wrap { border-color: var(--studio-line); border-radius: 5px; box-shadow: none; }body.academy .widget { background: white; padding: 20px; }body.academy .w-title { font: 600 22px/1.3 var(--font-display); letter-spacing: -.03em; }body.academy .callout { background: white; }body.academy .prose th { background: #253338; font: 700 11px var(--font); }body.academy .prose td { font: 12px/1.7 var(--font); }body.academy .prose blockquote { font-style: normal; }
body.academy .challenge-jump-link { max-width: none; margin: 20px 0 28px; background: #eceef9; border: 0; color: #3f42a2; font-size: 11px; }body.academy .studio-challenge { max-width: none; box-shadow: none; border: 1px solid #c6c9df; border-top: 4px solid #7176bb; border-radius: 6px; background: white; padding: 26px; }body.academy .challenge-brief { font: 14px/1.8 var(--font); }body.academy .challenge-feedback p { font: 13px/1.8 var(--font); }body.academy #challenge-title { font-family: var(--font-display); font-size: 30px; }body.academy .challenge-lab h3 { font-size: 24px; }body.academy .challenge-lab > p { font: 13px/1.8 var(--font); }body.academy .build-bench { box-shadow: none; border: 1px solid var(--studio-line); background: #eef3f0; }body.academy .build-bench summary b { font-family: var(--font-display); font-size: 24px; }body.academy .bench-body > p { font-size: 13px; }body.academy .lesson-foot { border-top: 1px solid var(--studio-line); padding-top: 22px; margin-top: 28px; }body.academy .nav-card { border: 1px solid var(--studio-line); border-radius: 4px; font: 600 16px/1.35 var(--font-display); padding: 17px; }body.academy .nav-card small { font: 800 9px/1.6 var(--font); letter-spacing: .03em; margin-bottom: 8px; }body.academy .lesson-foot .nav-card.next { background: #253338; border-color: #253338; }
/* Resource workspaces: artwork above, filters beside, results below. */
body.academy .page-head { padding: 40px 0 32px; border-bottom: 1px solid var(--studio-line); margin-bottom: 30px; }body.academy .page-head::after { display: none; }body.academy .page-head h1 { font: 600 clamp(38px, 4vw, 62px)/1.05 var(--font-display); letter-spacing: -.03em; margin: 12px 0 16px; }body.academy .page-head p { font: 14px/1.8 var(--font); max-width: 630px; }body.academy .gradient-text { color: var(--studio-ink); font-style: normal; }
.resource-heading { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0 30px; align-items: start; }.resource-heading > .eyebrow, .resource-heading > h1, .resource-heading > p { grid-column: 1; }.resource-heading-art { grid-column: 2; grid-row: 1/4; width: 230px; height: 160px; object-fit: contain; border-radius: 5px; background: #e4f2eb; align-self: center; }
.resource-layout { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 30px; align-items: start; margin-bottom: 60px; }.resource-rail { position: sticky; top: 98px; min-width: 0; max-height: calc(100vh - 122px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }.resource-rail-label { color: #69777f; font: 800 8px/1.5 var(--font); letter-spacing: .08em; margin-bottom: 18px; }.resource-results { min-width: 0; }
body.academy .resource-rail .filters { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 0 0 22px !important; }body.academy .resource-rail .filters input, body.academy .resource-rail .filters select { width: 100%; flex: none; min-height: 40px; padding: 8px 10px; border-color: #cdd5da; border-radius: 4px; font: 11px var(--font); }
body.academy .resource-rail .chip-row { display: flex; flex-direction: column; gap: 3px; margin: 0; }body.academy .resource-rail .chip-row.collapsed { max-height: 390px; }body.academy .resource-rail .chip { white-space: normal; text-align: left; border: 0; border-radius: 4px; min-height: 33px; padding: 8px 10px; background: transparent; color: #5e6d77; font: 600 11px/1.45 var(--font); }body.academy .resource-rail .chip.on { background: #e9eaf8; color: #393bb0; }body.academy .resource-rail .chip:hover { background: #eceff2; }body.academy .resource-rail .more-chips { width: 100%; font-size: 10px; margin-top: 12px; min-height: 36px; }body.academy .count-note { font: 700 10px/1.6 var(--font); letter-spacing: 0; text-transform: none; font-variant-caps: normal; margin: 0 0 16px; color: var(--studio-muted); }
body.academy #pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }body.academy .pl-card { display: flex; flex-direction: column; padding: 21px; border: 1px solid var(--studio-line); border-radius: 5px; background: white; }body.academy .pl-head h4 { font-size: 20px; line-height: 1.15; }body.academy .pl-head .btn { padding: 7px 10px; min-height: 32px; font-size: 10px; }body.academy .pl-card .badge { font-size: 9px; }.prompt-preview { font: 12px/1.75 var(--font); color: var(--studio-muted); margin: 12px 0 20px; }.prompt-original { margin-top: auto; border-top: 1px solid var(--studio-line); }.prompt-original > summary, body.academy .prompt-workshop > summary { display: flex; justify-content: space-between; cursor: pointer; font: 700 10px/1.5 var(--font); padding: 12px 0; min-height: 36px; color: var(--studio-ink); }.prompt-original > summary::-webkit-details-marker { display: none; }body.academy .prompt-workshop { margin: 0; border-top-color: var(--studio-line); }body.academy .pl-card .tip { font: 11px/1.7 var(--font); margin-top: 12px; color: var(--studio-muted); }body.academy .pl-card pre { font-size: 11px; max-height: 300px; border-radius: 4px; }body.academy .draft-status { font-size: 10px; }
body.academy #t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }body.academy .tool-card { padding: 22px; border-color: var(--studio-line); border-radius: 5px; }body.academy .tool-card h4 { font-size: 22px; }body.academy .tool-card > p { font: 13px/1.8 var(--font); margin-top: 14px; }body.academy .tool-card .t-best { font: 11px/1.7 var(--font); border-color: var(--studio-line); }body.academy .toolkit { border: 1px solid #cedbd3; border-radius: 5px; background: #edf3ef; padding: 24px; margin-bottom: 35px; }body.academy .toolkit h2 { font-family: var(--font-display); font-size: 27px; }body.academy .toolkit-head p { font-size: 12px; }body.academy .toolkit-empty { font-size: 12px; }body.academy .toolkit-add { font-size: 10px; background: white; border-color: var(--studio-line-strong); color: #455e4b; }body.academy .toolkit-add[aria-pressed=true] { background: #304a3a; color: white; }body.academy .toolkit-grid h3 { font-size: 21px; }body.academy .toolkit-grid p { font-size: 12px; }
body.academy .gloss-list { columns: 2 250px; }body.academy .gloss-item { border: 1px solid var(--studio-line); border-radius: 4px; padding: 18px; }body.academy .gloss-item dt { font: 600 22px var(--font-display); letter-spacing: -.02em; }body.academy .gloss-item dd { font: 13px/1.8 var(--font); margin-top: 9px; }body.academy .gloss-item .from { font: 9px var(--font); display: block; margin-top: 12px; }body.academy .az { gap: 4px; }body.academy .az a { font: 700 11px var(--font); border: 1px solid var(--studio-line); border-radius: 3px; background: white; width: 31px; height: 32px; }
body.academy .source-list { padding-left: 0; list-style: none; }body.academy .source { padding: 20px; border: 1px solid var(--studio-line); border-radius: 5px; background: white; text-decoration: none; }body.academy .s-title { font: 600 20px/1.3 var(--font-display); letter-spacing: -.02em; }body.academy .s-by, body.academy .s-why { font: 12px/1.7 var(--font); color: var(--studio-muted); }body.academy .s-url { font: 9px var(--mono); color: #68787f; margin-top: 12px; }.source-voices { border-top: 1px solid var(--studio-line); padding: 24px 0; margin-bottom: 40px; }.source-voices > summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; font: 600 26px var(--font-display); letter-spacing: -.02em; }.source-voices > summary span { font: 700 10px var(--font); color: var(--studio-muted); }body.academy #all-quotes { margin-top: 30px; }body.academy .masters-quote { background: white; padding: 24px; }body.academy .masters-quote p { font: 600 19px/1.6 var(--font-display); letter-spacing: -.02em; }body.academy .masters-quote footer { font: 10px/1.6 var(--font); }
/* Notebook and the shared finish. */
body.academy .rank-card { border: 1px solid var(--studio-line); border-radius: 5px; padding: 24px; background: white; }body.academy .rank-card .lvbig { background: #243b32; width: 48px; height: 48px; font-size: 25px; }body.academy .rank-card .src { font-size: 11px; }body.academy .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }body.academy .sticker-slot { display: block; border: 1px solid var(--studio-line); border-radius: 5px; padding: 0; overflow: hidden; background: white; text-align: left; transform: none; }.notebook-lesson-art { height: 115px; overflow: hidden; background: #e4f2eb; }body.academy .notebook-lesson-art img { width: 100%; height: 100%; object-fit: contain; }.notebook-lesson-copy { padding: 16px; }.notebook-lesson-copy small { display: block; font: 800 8px var(--font); color: var(--studio-muted); margin-bottom: 9px; }.notebook-lesson-copy b { display: block; font: 600 18px/1.2 var(--font-display); letter-spacing: -.02em; }.notebook-lesson-copy span { display: block; font: 10px var(--font); margin-top: 14px; color: var(--studio-muted); }
body.academy footer.site { padding: 34px 0; background: white; color: var(--studio-muted); border-top: 1px solid var(--studio-line); font: 11px/1.8 var(--font); }body.academy footer.site .cols { gap: 25px; }body.academy footer.site .cols > div { max-width: 480px; }body.academy footer.site b { color: var(--studio-ink); font: 700 14px var(--font-display); }body.academy footer.site a { color: #526476; }body.academy footer.site .src { color: var(--studio-muted); font-size: 10px; }
body.academy .pal-box { border-radius: 7px; border: 1px solid var(--studio-line-strong); box-shadow: 0 20px 100px #18232933; }body.academy .pal-box input { font: 16px var(--font); }body.academy .pal-item { font-size: 13px; }body.academy .pal-item.sel { background: #e9eaf8; }body.academy .pal-item small { font: 11px/1.7 var(--font); }body.academy .pal-item .k { font: 8px var(--font); border-color: var(--studio-line); }body.academy #toast { font: 700 12px/1.6 var(--font); border: 0; border-radius: 5px; padding: 12px 20px; }
@media (min-width: 1600px) { .atlas-headline { grid-template-columns: minmax(0, 1fr) 300px; }.atlas-headline h1 { font-size: 98px; }.atlas-feature { grid-template-columns: minmax(0, 1fr) 320px; }body.academy .atlas-console { padding: 30px; } }
@media (max-width: 1200px) and (min-width: 1101px) { body.academy .container { width: calc(100% - 48px); }.atlas-headline { grid-template-columns: minmax(0, 1fr) 240px; }.atlas-headline h1 { font-size: 64px; }.atlas-feature { grid-template-columns: minmax(0, 1fr) 280px; }.atlas-console { padding: 20px; }body.academy .chapter-stage { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }body.academy #mod-grid .mod-card { grid-template-columns: 1fr; }body.academy #mod-grid .mod-card .thumb { height: 140px; min-height: 0; }body.academy .module-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 1100px) {
  body.academy #app { margin-left: 0; width: 100%; }body.academy .container { width: calc(100% - 48px); }body.academy .topbar { padding: 0 20px; gap: 14px; }body.academy .shell-context { padding-left: 20px; }body.academy .nav { display: none; position: fixed; inset: 72px 0 auto; width: 100%; padding: 16px 20px; max-height: calc(100dvh - 72px); overflow: auto; border-bottom: 1px solid var(--studio-line-strong); border-right: 0; box-shadow: 0 15px 30px #18232914; }body.academy .nav.open { display: flex; }body.academy .nav::before { margin-top: 4px; }body.academy .nav::after { display: none; }body.academy .nav a { font-size: 13px; padding: 12px; }body.academy .nav a[data-route=album] { margin-top: 5px; padding-top: 12px; }body.academy .menu-btn { display: grid; flex: none; background: white; border-color: var(--studio-line); border-radius: 5px; height: 40px; width: 40px; }
  body.academy .module-layout { grid-template-columns: 1fr; padding-top: 0; }body.academy .lesson-nav-wrap { position: static; max-height: none; padding: 12px; background: white; border: 1px solid var(--studio-line); border-radius: 5px; overflow: hidden; }.reader-rail-head { display: none; }body.academy .lesson-nav { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 5px; }body.academy .lesson-nav a { width: auto; max-width: 200px; flex: none; min-height: 36px; font-size: 10px; }body.academy .lesson-nav a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }body.academy .lesson-nav .side-link { flex-direction: row; flex: none; margin: 0; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--studio-line); }body.academy #lesson-root { width: 100%; max-width: 850px; margin-inline: auto; }.reader-intro { padding-top: 20px; }
}
@media (max-width: 800px) {
  body.academy .shell-context { display: none; }body.academy .section { padding: 46px 0; }.atlas-headline { grid-template-columns: 1fr; gap: 25px; padding: 28px 0; }.atlas-headline h1 { font-size: clamp(53px, 9vw, 76px); }.atlas-intro { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 0 26px; align-items: center; }.atlas-intro p { grid-column: 1; grid-row: 1/3; max-width: none; margin: 0; font-size: 12px; }.atlas-intro .btn { grid-column: 2; }.atlas-intro .factory-browse { grid-column: 2; padding-top: 10px; }
  .atlas-feature { grid-template-columns: minmax(0, 1fr) 255px; }.atlas-console { padding: 18px; }.atlas-console-heading > b { font-size: 23px; }.atlas-image-label { padding: 16px 14px 4px; }.atlas-image-label > span:last-child { display: none; }body.academy .atlas-cover .factory-art { padding: 4px; }body.academy .atlas-cover .factory-pin b { display: none; }body.academy .atlas-cover .factory-pin { padding: 2px; min-height: 30px; }.atlas-colophon { gap: 18px; font-size: 9px; }.atlas-colophon > span:first-child { flex-basis: 100%; }
  .atlas-section-heading { gap: 25px; }.atlas-section-heading > p { max-width: 260px; font-size: 11px; }body.academy #paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }body.academy .chapter-stage { grid-template-columns: 1fr; gap: 20px; }body.academy .chapter-stage-heading { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 18px; }body.academy .chapter-stage-heading > span { grid-row: 1/3; font-size: 44px; margin: 0; }body.academy .chapter-stage-heading h3 { margin: 0 0 8px; font-size: 24px; }body.academy .chapter-stage-heading p { margin: 0; max-width: 480px; }body.academy .chapter-stage-heading small { display: none; }body.academy #mod-grid .mod-card { grid-template-columns: 1fr; }body.academy #mod-grid .mod-card .thumb { min-height: 0; height: 150px; }body.academy #mod-grid .mod-card .thumb img { object-fit: contain; }body.academy #mod-grid .mod-card .body { padding: 18px; }
  .resource-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }body.academy #pl-grid, body.academy #t-grid { grid-template-columns: 1fr; }.resource-heading { grid-template-columns: 1fr 180px; }.resource-heading-art { width: 180px; height: 140px; }.atlas-shelf h3 { font-size: 21px; }.atlas-shelves { gap: 13px; }
}
@media (max-width: 600px) {
  body.academy { overflow-x: hidden; }body.academy .container { width: calc(100% - 36px); }body.academy .topbar { padding: 0 16px; gap: 10px; }body.academy .brand { width: auto; font-size: 15px; }body.academy .brand small { font-size: 10px; }body.academy .brand-mark { width: 27px; }body.academy .search-btn { width: 37px; min-width: 37px; height: 37px; padding: 9px; justify-content: center; }body.academy .search-btn span, body.academy .search-btn kbd { display: none; }body.academy .xp-chip .bar { display: none; }body.academy .xp-chip .lv { width: 24px; height: 24px; font-size: 12px; }body.academy .menu-btn { width: 37px; height: 37px; }
  body.academy .atlas-cover { padding-top: 22px; }.atlas-running-head { font-size: 8px; padding-bottom: 13px; }.atlas-running-head > span:last-child { display: none; }.atlas-headline { gap: 20px; padding: 25px 0; }.atlas-headline h1 { font-size: clamp(42px, 11vw, 65px); line-height: 1; letter-spacing: -.03em; }.atlas-intro { display: block; }.atlas-intro p { max-width: none; font-size: 12px; margin: 0 0 18px; line-height: 1.8; }.atlas-intro .btn { width: auto; min-height: 42px; padding: 12px 16px; font-size: 11px; }.atlas-intro .factory-browse { display: inline-block; margin-left: 14px; padding: 10px 0; font-size: 10px; }
  .atlas-feature { display: flex; flex-direction: column; border-radius: 5px; }.atlas-illustration { min-height: 0; }.atlas-image-label { padding: 15px 14px 2px; font-size: 7px; }body.academy .atlas-cover .factory-art { padding: 8px; }body.academy .atlas-cover .factory-pin { min-height: 30px; }.atlas-console { padding: 20px; }.atlas-console-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.atlas-console-heading > span { font-size: 7px; max-width: 70px; }.atlas-console-heading > b { font-size: 23px; margin: 0 0 16px; text-align: right; }body.academy .atlas-console .factory-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }body.academy .atlas-console .factory-step { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; padding: 10px 0; min-height: 72px; font-size: 9px; line-height: 1.4; }.atlas-console .factory-step i { display: none; }.atlas-console .factory-step span { font-size: 8px; }body.academy .atlas-console .factory-note { margin: 12px 0 18px; min-height: 55px; }.atlas-console .factory-note p { font-size: 11px; }body.academy .atlas-console .factory-game { height: 130px; }.atlas-console #factory-game-status { font-size: 10px; max-width: calc(100% - 110px); }body.academy .atlas-console .factory-game button { max-width: 100px; font-size: 10px; min-height: 40px; }
  .atlas-colophon { gap: 16px; padding: 16px 0; }.atlas-colophon > span:first-child { font-size: 10px; line-height: 1.7; }.atlas-section-heading { display: block; margin-bottom: 22px; }.atlas-section-heading h2 { font-size: 34px; margin-top: 7px; }.atlas-section-heading > p { max-width: none; font-size: 12px; margin-top: 14px; }body.academy .atlas-paths { padding-top: 38px; }body.academy #paths { gap: 10px; }body.academy .path-card { padding: 16px 12px; }body.academy .path-card h3 { font-size: 17px; line-height: 1.1; }body.academy .path-card p { font-size: 10px; min-height: 0; }body.academy .route-number { font-size: 6px; }body.academy .path-select { font-size: 9px; padding-top: 10px; }
  body.academy #mod-grid .grid { gap: 12px; }body.academy #mod-grid .mod-card .thumb { height: 115px; }body.academy #mod-grid .mod-card .body { padding: 13px; gap: 8px; }body.academy #mod-grid .mod-card h3 { font-size: 16px; }body.academy #mod-grid .mod-card p { display: none; }body.academy #mod-grid .mod-card .meta { font-size: 8px; gap: 3px; }body.academy #mod-grid .mod-card .num { font-size: 7px; }body.academy #mod-grid .mod-card .body { min-height: 115px; }body.academy .chapter-stage { padding: 24px 0; }body.academy .chapter-stage-heading p { font-size: 11px; }body.academy .chapter-stage-heading h3 { font-size: 23px; }
  .atlas-shelves { grid-template-columns: 1fr; gap: 24px; }.atlas-shelf { display: grid; grid-template-columns: 105px minmax(0, 1fr); column-gap: 18px; }.atlas-shelf > div { grid-column: 1; grid-row: 1/4; height: 125px; aspect-ratio: auto; }.atlas-shelf > span { margin: 2px 0 8px; font-size: 7px; }.atlas-shelf h3 { font-size: 23px; }.atlas-shelf p { font-size: 11px; max-width: none; margin: 0; }.atlas-shelf > b { display: none; }.atlas-bottom .container { flex-direction: column; align-items: flex-start; gap: 22px; }.atlas-bottom h2 { font-size: 29px; }
  body.academy .module-head, body.academy .module-head.slim { padding: 22px 0; }body.academy .module-head .crumbs { font-size: 10px; line-height: 1.7; }body.academy .module-head h1 { font-size: 34px; }body.academy .module-head p { font-size: 13px; }body.academy .module-layout { gap: 20px; }body.academy .lesson-nav-wrap { padding: 6px; }body.academy .reader-intro .lesson-title { font-size: 32px; }body.academy .reader-intro .lesson-summary { font-size: 13px; }.reader-intro { padding-top: 4px; }.reader-lesson-number { font-size: 8px; }.reader-visual { padding: 12px; }.reader-visual-caption { gap: 12px; margin-bottom: 12px; }.reader-visual-caption b { font-size: 9px; }.reader-visual-caption > span { font-size: 7px; }body.academy .reader-visual .plate .tag { font-size: 8px; }body.academy .prose h2 { font-size: 26px; }body.academy .lesson .prose, body.academy .lesson > .prose { font-size: 15px; line-height: 1.85; }body.academy .prose td { font-size: 11px; }body.academy .studio-challenge { padding: 20px 15px; }body.academy #challenge-title { font-size: 28px; }body.academy .challenge-brief { font-size: 13px; }body.academy .build-bench summary b { font-size: 22px; }body.academy .widget { padding: 16px; }body.academy .w-title { font-size: 21px; }
  body.academy .page-head { padding: 28px 0; margin-bottom: 24px; }body.academy .page-head h1 { font-size: 40px; margin: 10px 0 14px; }body.academy .page-head p { font-size: 12px; line-height: 1.8; }.resource-heading { grid-template-columns: minmax(0, 1fr) 95px; gap: 0 18px; }.resource-heading > p { grid-column: 1/-1; }.resource-heading-art { width: 95px; height: 83px; grid-row: 1/3; }.resource-heading > h1 { font-size: 34px; }.resource-layout { display: flex; flex-direction: column; gap: 20px; }.resource-rail { position: static; width: 100%; max-height: none; padding: 0; overflow: visible; }.resource-rail-label { display: none; }body.academy .resource-rail .filters { flex-direction: row; flex-wrap: wrap; margin-bottom: 14px !important; }body.academy .resource-rail .filters input { flex: 1 1 160px; min-width: 0; }body.academy .resource-rail .filters select { flex: 1 1 130px; min-width: 0; }body.academy .resource-rail .chip-row { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; gap: 6px; }body.academy .resource-rail .chip-row .chip { white-space: nowrap; border: 1px solid var(--studio-line); background: white; padding: 8px 12px; flex: none; font-size: 10px; min-height: 35px; }body.academy .resource-rail .chip-row .chip.on { background: #e9eaf8; border-color: #bfc3ed; }body.academy .resource-rail .chip-row.collapsed { max-height: none; mask-image: none; -webkit-mask-image: none; }body.academy .resource-rail .more-chips { display: none; }.resource-results { width: 100%; }body.academy #pl-grid, body.academy #t-grid { grid-template-columns: 1fr; }body.academy .pl-card, body.academy .tool-card { padding: 20px; }body.academy .pl-head h4 { font-size: 22px; }body.academy .toolkit { padding: 20px; margin-bottom: 24px; }body.academy .toolkit h2 { font-size: 26px; }body.academy .toolkit-head { display: flex; flex-direction: column; gap: 12px; }body.academy .source { padding: 18px; }body.academy .s-title { font-size: 20px; }.source-voices > summary { font-size: 23px; align-items: center; }.source-voices > summary span { max-width: 100px; font-size: 9px; }body.academy .rank-card { padding: 18px; gap: 12px; }body.academy .sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }body.academy .notebook-lesson-art { height: 100px; }.notebook-lesson-copy { padding: 13px; }.notebook-lesson-copy b { font-size: 16px; }.notebook-lesson-copy span { font-size: 9px; }body.academy footer.site .cols { display: block; }body.academy footer.site .cols > div + div { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .atlas-shelf img { transition: none; }.atlas-shelf:hover img { transform: none; } }
body.academy .resource-rail .chip-row { flex-wrap: nowrap; }
body.academy .resource-results > .grid > *, body.academy .resource-results, body.academy .resource-results > .grid, body.academy .pl-card, body.academy .tool-card { min-width: 0; max-width: 100%; }
body.academy .prompt-preview { font: 12px/1.8 var(--font); color: var(--studio-muted); overflow-wrap: anywhere; }
body.academy .reader-visual .plate-fig.immersive .plate { border-radius: 0; }
body.academy .reader-contents > summary { display: none; }
body.academy .resource-rail .chip.on { background: #e9eaf8; color: #393bb0; }
body.academy .chapter-start { display: flex; justify-content: space-between; gap: 25px; align-items: center; padding: 22px; background: #eaf0ed; border: 1px solid #cedad3; border-radius: 5px; margin: 8px 0 24px; }
.chapter-start > div > span { display: block; font: 800 8px/1.6 var(--font); letter-spacing: .08em; color: #586e60; margin-bottom: 8px; }.chapter-start b { display: block; font: 600 21px/1.2 var(--font-display); letter-spacing: -.03em; }.chapter-start .btn { flex: none; }
.resource-pagination { grid-column: 1/-1; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--studio-line); margin-top: 10px; }.resource-pagination > span { font: 11px/1.6 var(--font); color: var(--studio-muted); }.resource-pagination .btn { min-height: 40px; font-size: 11px; }
@media (max-width: 1100px) {
  body.academy .reader-contents > summary { display: flex; justify-content: space-between; gap: 20px; padding: 8px 10px; font: 800 11px/1.6 var(--font); color: var(--studio-ink); cursor: pointer; list-style: none; }body.academy .reader-contents > summary::-webkit-details-marker { display: none; }.reader-contents > summary > span { font-weight: 600; color: var(--studio-muted); }
  body.academy .reader-contents[open] .lesson-nav { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; margin-top: 12px; }body.academy .reader-contents .lesson-nav a { width: 100%; max-width: none; font-size: 12px; }.reader-contents .lesson-nav a span:last-child { white-space: normal !important; }.academy .reader-contents .lesson-nav .side-link { flex-direction: column; border: 0; border-top: 1px solid var(--studio-line); padding: 12px 0 0; margin-top: 10px; }
}
@media (max-width: 600px) { body.academy .chapter-start { flex-direction: column; align-items: flex-start; padding: 20px; gap: 18px; }.chapter-start b { font-size: 20px; }.chapter-start .btn { width: 100%; } }
body.academy .chapter-catalogue { padding-bottom: 60px; }
body.academy .chapter-catalogue .page-head h1 { max-width: 700px; }
body.academy .studio-challenge, body.academy .build-bench { scroll-margin-top: 96px; }
body.academy #mod-grid .thumb:not(.noimg) .fallback-num { display: none; }
body.academy .atlas-console :focus-visible { outline: 3px solid #d9f6b4; outline-offset: 3px; }
@media (max-width: 600px) { body.academy .atlas-cover .factory-pin { width: 44px; height: 44px; padding: 2px; justify-content: center; }body.academy .atlas-cover .factory-pin span { width: 28px; height: 28px; } }

/* Appearance is set on <html> before the stylesheet loads. */
body.academy #theme-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--studio-line); border-radius: 5px; background: var(--studio-surface); color: var(--studio-ink); }
body.academy #theme-btn:hover { background: var(--studio-soft); }
html[data-theme=dark] { color-scheme: dark; background: #101619; }
html[data-theme=dark] body.academy {
  --studio-page: #101619; --studio-surface: #192126; --studio-soft: #222d33;
  --studio-ink: #e8eef1; --studio-muted: #a7b5bd; --studio-line: #303e46; --studio-line-strong: #536670;
  --studio-navy-raised: #24303a; --studio-violet: #b0a4ff; --studio-violet-hover: #c3baff; --studio-violet-soft: #302d49;
  --studio-cyan: #7ed9e2; --studio-cyan-dark: #8bdce6; --studio-cyan-soft: #18333c;
  --studio-on-dark-muted: #c2cfd8; --studio-success: #88d1ad; --studio-success-soft: #1e3a30;
  --studio-warning: #e7bd88; --studio-warning-soft: #3a2d21; --studio-danger-soft: #392830; --studio-focus: #c1b3ff;
  --paper: var(--studio-page); --paper-2: var(--studio-soft); --paper-3: var(--studio-line);
  --bg: var(--studio-page); --bg-2: var(--studio-soft); --book: var(--studio-surface); --surface: var(--studio-surface); --surface-2: var(--studio-soft); --surface-solid: var(--studio-surface); --card: var(--studio-surface); --well: var(--studio-soft);
  --ink: var(--studio-ink); --ink-2: var(--studio-muted); --ink-3: var(--studio-muted); --rule: var(--studio-line-strong);
  --text: var(--studio-ink); --text-dim: var(--studio-muted); --text-faint: var(--studio-muted); --muted: var(--studio-muted);
  --mint: #193932; --sand: #302d49; --blue: #20333d; --rose: #392830;
  --brick: var(--studio-violet); --teal: var(--studio-cyan); --salmon: #f5a0b4; --ochre: var(--studio-cyan);
  --accent: var(--studio-violet); --accent-2: var(--studio-cyan); --accent-3: #f5a0b4; --ok: var(--studio-success); --danger: #ff9cb6;
  --acc: var(--studio-violet); --acc-hi: var(--studio-violet); --acc-ink: var(--studio-ink); --acc-deep: #24303a; --acc-soft: #302d49; --acc-text: var(--studio-violet);
  --code-bg: #0a1014; --code-ink: #dce7f0; --border: #303e46; --border-strong: #536670;
  background: var(--studio-page); color: var(--studio-ink);
}
html[data-theme=dark] body.academy .topbar,
html[data-theme=dark] body.academy .nav,
html[data-theme=dark] body.academy footer.site { background: #141c21; color: var(--studio-muted); border-color: var(--studio-line); }
html[data-theme=dark] body.academy .brand,
html[data-theme=dark] body.academy .brand small,
html[data-theme=dark] body.academy .nav a { color: var(--studio-muted); }
html[data-theme=dark] body.academy .brand { color: var(--studio-ink); }
html[data-theme=dark] body.academy .nav a:hover { background: #222d33; color: var(--studio-ink); }
html[data-theme=dark] body.academy .nav a.active { background: var(--studio-violet-soft); color: #d1c8ff; }
html[data-theme=dark] body.academy .nav a.active::before { color: #bfb1ff; }
html[data-theme=dark] body.academy .nav::before,
html[data-theme=dark] body.academy .nav::after,
html[data-theme=dark] body.academy .nav a::before,
html[data-theme=dark] body.academy .resource-rail-label { color: #a7b5bd; }
html[data-theme=dark] body.academy .search-btn,
html[data-theme=dark] body.academy .menu-btn,
html[data-theme=dark] body.academy .btn,
html[data-theme=dark] body.academy .badge,
html[data-theme=dark] body.academy .mode-switch,
html[data-theme=dark] body.academy .path-card,
html[data-theme=dark] body.academy #mod-grid .mod-card,
html[data-theme=dark] body.academy .pl-card,
html[data-theme=dark] body.academy .tool-card,
html[data-theme=dark] body.academy .gloss-item,
html[data-theme=dark] body.academy .source,
html[data-theme=dark] body.academy .masters-quote,
html[data-theme=dark] body.academy .rank-card,
html[data-theme=dark] body.academy .sticker-slot,
html[data-theme=dark] body.academy .reader-visual,
html[data-theme=dark] body.academy details.deep,
html[data-theme=dark] body.academy .widget,
html[data-theme=dark] body.academy .callout,
html[data-theme=dark] body.academy .studio-challenge { background: var(--studio-surface); color: var(--studio-ink); border-color: var(--studio-line); }
html[data-theme=dark] body.academy .btn:hover,
html[data-theme=dark] body.academy .search-btn:hover { background: var(--studio-soft); }
html[data-theme=dark] body.academy .btn.primary { background: #b0a4ff; color: #1b1632; border-color: #b0a4ff; }
html[data-theme=dark] body.academy .btn.primary:hover { background: #c3baff; border-color: #c3baff; }
html[data-theme=dark] body.academy .xp-chip .lv { background: #b0a4ff; color: #1b1632; }
html[data-theme=dark] body.academy .reader-rail-head > a,
html[data-theme=dark] body.academy .lesson-nav a,
html[data-theme=dark] body.academy .s-url,
html[data-theme=dark] body.academy footer.site a { color: var(--studio-muted); }
html[data-theme=dark] body.academy .lesson-nav a.active,
html[data-theme=dark] body.academy .resource-rail .chip.on,
html[data-theme=dark] body.academy .path-card.active { background: var(--studio-violet-soft); color: #d1c8ff; border-color: #746a9e; }
html[data-theme=dark] body.academy .lesson-nav a:hover,
html[data-theme=dark] body.academy .resource-rail .chip:hover { background: #27333b; }
html[data-theme=dark] body.academy .resource-rail .chip { color: var(--studio-muted); }
html[data-theme=dark] body.academy .resource-rail .filters input,
html[data-theme=dark] body.academy .resource-rail .filters select,
html[data-theme=dark] body.academy .az a,
html[data-theme=dark] body.academy textarea,
html[data-theme=dark] body.academy .challenge-lab select { color: var(--studio-ink); background: #121a20; border-color: #536670; }
html[data-theme=dark] body.academy input::placeholder,
html[data-theme=dark] body.academy textarea::placeholder { color: #91a3ad; opacity: 1; }
html[data-theme=dark] body.academy .atlas-bottom,
html[data-theme=dark] body.academy .refs,
html[data-theme=dark] body.academy .toolkit,
html[data-theme=dark] body.academy .build-bench,
html[data-theme=dark] body.academy .chapter-start { background: #1b2b28; border-color: #3c5550; }
html[data-theme=dark] body.academy .toolkit h2,
html[data-theme=dark] body.academy .toolkit h3,
html[data-theme=dark] body.academy .chapter-start b,
html[data-theme=dark] body.academy .chapter-start > div > span,
html[data-theme=dark] body.academy .build-bench summary b { color: var(--studio-ink); }
html[data-theme=dark] body.academy .toolkit-empty,
html[data-theme=dark] body.academy .toolkit-head p,
html[data-theme=dark] body.academy .toolkit-grid p { color: #b8c8c0; }
html[data-theme=dark] body.academy .toolkit-grid article { background: #182321; border-color: #3c5550; }
html[data-theme=dark] body.academy .toolkit-add { background: #202f29; border-color: #668577; color: #bee3c9; }
html[data-theme=dark] body.academy .toolkit-add[aria-pressed=true] { background: #365342; color: #e9fff0; }
html[data-theme=dark] body.academy .toolkit-grid button { color: #c8b9ff; }
html[data-theme=dark] body.academy .chapter-stage-heading > span { color: #9baab4; }
html[data-theme=dark] body.academy #mod-grid .mod-card .num { color: #203127; border-color: #bdcec3; background: #ffffffef; }
html[data-theme=dark] body.academy .mode-switch button.on { background: #b0a4ff; color: #1b1632; }
html[data-theme=dark] body.academy .challenge-jump-link { background: var(--studio-violet-soft); color: #d1c8ff; }
html[data-theme=dark] body.academy .challenge-option { background: #141d22; border-color: #536670; }
html[data-theme=dark] body.academy .challenge-option > span { color: var(--studio-ink); }
html[data-theme=dark] body.academy .challenge-option b { color: #bcb0ff; }
html[data-theme=dark] body.academy .challenge-option:has(:checked) { background: #302d49; border-color: #a595e2; }
html[data-theme=dark] body.academy .challenge-option[data-result=success] { background: #1e3a30; border-color: #729f88; }
html[data-theme=dark] body.academy .challenge-option[data-result=retry] { background: #3a2d21; border-color: #a48564; }
html[data-theme=dark] body.academy .challenge-badge { color: #d1c8ff; background: #302d49; border-color: #746a9e; }
html[data-theme=dark] body.academy .challenge-solved .challenge-badge,
html[data-theme=dark] body.academy .bench-complete .bench-progress { color: #e0f8ea; background: #315b47; border-color: #5a9678; }
html[data-theme=dark] body.academy .prose th { background: #24323a; color: #e6eef3; }
html[data-theme=dark] body.academy .nav-card { background: #192126; }
html[data-theme=dark] body.academy .lesson-foot .nav-card.next { background: #24323a; color: #e6eef3; border-color: #536670; }
html[data-theme=dark] body.academy .pal-box { background: #192126; border-color: #536670; }
html[data-theme=dark] body.academy .pal-box input { background: #121a20; color: var(--studio-ink); border-color: #536670; }
html[data-theme=dark] body.academy .pal-item.sel { background: #302d49; }
html[data-theme=dark] body.academy .rank-card .lvbig { background: #315b47; color: #e0f8ea; }
html[data-theme=dark] body.academy #toast { background: #dce7ec; color: #142027; }
/* The original illustrations stay on their native light surfaces. */
html[data-theme=dark] body.academy .reader-visual .plate { background: #e5f4ed; color: #192d25; --paper: #ffffff; --ink: #192d25; --card: #ffffff; --acc-ink: #192d25; }
html[data-theme=dark] body.academy .reader-visual .plate .tag,
html[data-theme=dark] body.academy .reader-visual .plate .mk,
html[data-theme=dark] body.academy .reader-visual .plate .hint,
html[data-theme=dark] body.academy .reader-visual .imm-btn,
html[data-theme=dark] body.academy .reader-visual .imm-close { background: #ffffff; color: #192d25; border-color: #899f94; }
html[data-theme=dark] body.academy .reader-visual .plate .tag.on,
html[data-theme=dark] body.academy .reader-visual .plate .mk.on { background: #5346b2; color: white; }
html[data-theme=dark] body.academy .reader-visual .plate .note { background: #1c2830; color: #e6eef3; border-color: #687b88; }
html[data-theme=dark] body.academy .reader-visual .plate .note b { color: #e6eef3; }
html[data-theme=dark] body.academy .plate-fig.immersive { background: #0a1014; }
@media (max-width: 1100px) { html[data-theme=dark] body.academy .lesson-nav-wrap { background: #192126; border-color: #303e46; } }
@media (max-width: 600px) {
  body.academy .topbar { gap: 8px; }
  body.academy #theme-btn { width: 37px; height: 37px; }
  html[data-theme=dark] body.academy .resource-rail .chip-row .chip { background: #192126; border-color: #536670; color: var(--studio-muted); }
  html[data-theme=dark] body.academy .resource-rail .chip-row .chip.on { background: #302d49; color: #d1c8ff; border-color: #746a9e; }
}
html[data-theme=dark] body.academy .keylist .n { background: #514781; color: #f4f0ff; border-color: #8778b8; }
html[data-theme=dark] body.academy .lesson-nav a.done .dot { background: #315b47; color: #e0f8ea; border-color: #729f88; }