@import url("manga-bubbles.css");
@import url("anime-storyboard.css");

:root {
  --cream: #f4efd8;
  --sage: #8ea98f;
  --mint: #b8d7bd;
  --forest: #1f4034;
  --charcoal: #161b1d;
  --paper: #fffdf4;
  --cyan: #35d6d0;
  --magenta: #f25aa2;
  --yellow: #ffd34f;
  --red: #ef4f4f;
  --blue: #4c76d7;
  --ink: #15201d;
  --night: #0b0b17;
  --night-2: #101523;
  --line: #253a34;
  --shadow: 12px 12px 0 var(--charcoal);
  --shadow-small: 7px 7px 0 var(--charcoal);
  --title: 78px;
  --chapter: 112px;
  --heading: 58px;
  --body: 30px;
  --label: 20px;
  --code: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #2f3935; }
body { overflow: hidden; }
.reveal { font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; color: var(--ink); }
.reveal .slides { text-align: left; }
.reveal [lang="ja"] {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: keep-all;
}
.reveal .slides section.slide {
  width: 1600px;
  height: 900px;
  padding: 58px 76px 68px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(31,64,52,.12) 1.25px, transparent 1.75px) 0 0 / 38px 38px,
    radial-gradient(circle at 12% 12%, rgba(255,211,79,.16), transparent 31%),
    linear-gradient(135deg, rgba(184,215,189,.22), transparent 45%, rgba(242,90,162,.055)),
    var(--paper);
  color: var(--ink);
}

/* Quiet cast reactions: a low-contrast emotional annotation that sits behind
   the actual slide content. Keep these decorative so the spoken story and the
   accessible reading order remain focused on the slide's argument. */
.reveal .slides section.slide .slide-corner-reaction {
  position: absolute;
  z-index: 1;
  right: -24px;
  bottom: -64px;
  display: block;
  width: var(--reaction-width, 326px);
  max-width: none;
  max-height: var(--reaction-max-height, 366px);
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: right bottom;
  opacity: .3;
  pointer-events: none;
  filter: saturate(.82) contrast(1.02) drop-shadow(3px 0 0 rgba(255,253,244,.72)) drop-shadow(-3px 0 0 rgba(255,253,244,.72)) drop-shadow(9px 11px 0 rgba(31,64,52,.2));
  transform: rotate(-2.5deg);
}
.reveal .slides section.slide .slide-corner-reaction--left {
  right: auto;
  left: -24px;
  object-position: left bottom;
  transform: rotate(2.5deg);
}
.reveal .slides section.slide .slide-corner-reaction--high { bottom: 40px; }
.reveal .slides section.slide .slide-corner-reaction--large {
  --reaction-width: 382px;
  --reaction-max-height: 424px;
  opacity: .25;
}
.reveal .slides section.slide .slide-corner-reaction--soft { opacity: .19; }
.reveal .slides section.slide .slide-corner-reaction--dark {
  opacity: .42;
  filter: saturate(.82) contrast(1.02) drop-shadow(9px 11px 0 rgba(0,0,0,.32));
}

.slide::before {
  content: "";
  position: absolute;
  inset: -360px;
  width: auto;
  height: auto;
  background: repeating-conic-gradient(from 10deg at 76% 30%, transparent 0 8deg, rgba(31,64,52,.035) 8deg 10deg);
  transform-origin: 76% 30%;
  pointer-events: none;
}

.slide::after {
  content: "electroNuck  ×  N8";
  position: absolute;
  left: 76px;
  bottom: 24px;
  color: var(--forest);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.jp-slide-number {
  position: absolute;
  z-index: 32;
  right: 118px;
  bottom: 22px;
  display: grid;
  min-width: 176px;
  padding: 8px 16px 7px;
  border: 3px solid var(--charcoal);
  border-radius: 9px;
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  text-align: center;
  transform: rotate(-2.5deg);
}
.jp-slide-count {
  font: 1000 22px/1.05 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
}

.reveal h1, .reveal h2, .reveal h3, .reveal p { margin: 0; }
.reveal h1, .reveal h2, .reveal h3 { color: inherit; text-transform: none; }
.reveal h1 { font-size: var(--title); line-height: .98; font-weight: 950; letter-spacing: -.045em; }
.reveal h2 { font-size: var(--heading); line-height: 1.02; font-weight: 950; letter-spacing: -.035em; }
.reveal h3 { font-size: 34px; line-height: 1.08; font-weight: 900; }
.reveal p, .reveal li { font-size: var(--body); line-height: 1.26; }
.reveal ul { margin: 22px 0 0 1.1em; }
.reveal li { margin: 8px 0; }
.reveal strong { color: var(--forest); }
.reveal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 3px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--charcoal);
  font-size: var(--label);
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Treat the Japanese field-guide label as the chapter slug on a manga
   contents page. The neighboring English remains exactly as authored. */
.eyebrow > [lang="ja"] {
  align-self: stretch;
  display: inline-grid;
  place-items: center;
  margin: -7px 12px -7px -14px;
  padding: 7px 13px 6px;
  background: var(--charcoal);
  color: var(--paper);
  font-weight: 1000;
  letter-spacing: .13em;
  text-shadow: 2px 2px 0 rgba(242,90,162,.65);
}

.slide-head { position: relative; z-index: 2; }
.slide-head h2 { max-width: 1280px; margin-top: 22px; text-shadow: 4px 4px 0 rgba(142,169,143,.48); }
.subtitle { margin-top: 16px !important; max-width: 1120px; color: #52665f; font-size: 28px !important; }
.content { position: relative; z-index: 2; margin-top: 34px; }
.big-copy { font-size: 44px !important; line-height: 1.13 !important; font-weight: 850; }
.small { font-size: 21px !important; }
.muted { color: #52665f; }
.accent { color: var(--magenta); }
.cyan { color: var(--cyan); }
.yellow { color: var(--yellow); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Layout masters */
.layout-title { padding: 0 !important; background: var(--cream) !important; }
.layout-title::after { color: var(--paper); left: 58px; text-shadow: 2px 2px var(--charcoal); }
.title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,27,29,.92) 0 41%, rgba(22,27,29,.46) 57%, transparent 78%); }
.title-copy { position: absolute; z-index: 3; left: 64px; top: 64px; width: 700px; color: var(--paper); }
.title-copy h1 { margin-top: 26px; font-size: 72px; text-shadow: 6px 6px 0 #000; }
.title-copy .dek { margin-top: 24px; max-width: 620px; font-size: 25px; font-weight: 700; }
.episode-stamp { display: inline-block; padding: 8px 14px; border: 3px solid var(--paper); background: var(--magenta); box-shadow: 7px 7px 0 #000; font-size: 20px; font-weight: 950; letter-spacing: .1em; }

.layout-chapter { display: grid !important; place-items: center; text-align: center !important; background: var(--charcoal) !important; color: var(--paper) !important; }
.layout-chapter::before { inset: -150px; width: auto; height: auto; opacity: .65; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, rgba(53,214,208,.25) 7deg 10deg); }
.layout-chapter::after { color: var(--mint); }
.chapter-inner { position: relative; z-index: 2; width: 1230px; }
.chapter-inner h2 { margin-top: 28px; font-size: var(--chapter); text-shadow: 8px 8px 0 #000; }
.chapter-no { font: 950 140px/1 ui-monospace, monospace; color: var(--cyan); opacity: .24; position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); }
.chapter-inner p { margin: 34px auto 0; max-width: 880px; color: var(--mint); font-size: 33px; }

.layout-split .slide-body { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; height: 600px; align-items: center; }
.layout-split.wide-right .slide-body { grid-template-columns: .8fr 1.2fr; }
.layout-split.wide-left .slide-body { grid-template-columns: 1.2fr .8fr; }
.layout-content .content { max-width: 1270px; }
.layout-diagram .content { height: 610px; display: grid; place-items: center; }
.layout-code .content { display: grid; grid-template-columns: 1.3fr .7fr; gap: 34px; }

/* The engineering chapters now sit inside inked manga panels too. Existing
   full manga sequences keep their bespoke framing and are intentionally
   excluded from this quieter field-guide treatment. */
.reveal .slides section.slide:is(.layout-content, .layout-code, .layout-diagram):not(.manga-firmware-arc):not(.manga-sequence):not(.manga-final-arc) {
  box-shadow:
    inset 0 0 0 5px #101116,
    inset 0 0 0 10px rgba(255,253,244,.92);
}
.reveal .slides section.slide:is(.layout-content, .layout-code, .layout-diagram):not(.manga-firmware-arc):not(.manga-sequence):not(.manga-final-arc) .slide-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  bottom: -15px;
  width: 272px;
  height: 16px;
  border: 3px solid #101116;
  background: var(--cyan);
  box-shadow: 7px 7px 0 var(--magenta);
  transform: skewX(-24deg) rotate(-.7deg);
}
.layout-quote { display: grid !important; place-items: center; background: var(--cream) !important; color: var(--ink) !important; text-align: center !important; }
.layout-quote::after { color: var(--forest); }
.layout-quote blockquote { margin: 0; max-width: 1280px; font-size: 68px; line-height: 1.08; font-weight: 950; letter-spacing: -.035em; }
.layout-quote cite { display: block; margin-top: 36px; font-size: 24px; font-style: normal; font-weight: 850; text-transform: uppercase; }

.quote-link {
  display: flex;
  align-items: center;
  gap: 56px;
}
.quote-link blockquote { max-width: 480px; font-size: 52px; text-align: left; }
.qr-card {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 4px solid var(--charcoal);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  text-decoration: none;
}
.qr-card img { width: 560px; height: 560px; display: block; }
.qr-card__title { max-width: 560px; font: 950 22px/1.25 ui-monospace, monospace; text-align: center; letter-spacing: -.01em; }
.qr-card__label { font: 700 16px/1.3 ui-monospace, monospace; text-align: center; color: #52665f; }
.last-demo-links { gap: 38px; }
.last-demo-links blockquote { width: 380px; }
.last-demo-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, 390px);
  gap: 24px;
}
.last-demo-qr-grid .qr-card {
  min-height: 490px;
  padding: 18px;
  gap: 12px;
}
.last-demo-qr-grid .qr-card img { width: 350px; height: 350px; }
.last-demo-qr-grid .qr-card__title {
  display: grid;
  place-items: center;
  min-height: 64px;
  font-size: 17px;
}
.last-demo-qr-grid .qr-card__label { font-size: 14px; }
.qr-card--demo {
  position: relative;
  overflow: hidden;
  background: #dcf5ef;
  box-shadow: 7px 7px 0 var(--yellow), 13px 13px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.qr-card--demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(0,139,149,.2) 0 4px, transparent 5px) 0 0 / 25px 25px,
    repeating-conic-gradient(
      from 6deg at 14% 82%,
      transparent 0 10deg,
      rgba(53,214,208,.13) 10deg 13deg
    );
  pointer-events: none;
}
.qr-card--demo > * { position: relative; z-index: 1; }
.last-demo-qr-grid .qr-card--demo img {
  padding: 10px;
  border: 3px solid var(--charcoal);
  background: var(--paper);
}
.qr-card--channel {
  position: relative;
  overflow: hidden;
  background: #ffe1ef;
  box-shadow: 7px 7px 0 var(--cyan), 13px 13px 0 var(--charcoal);
  transform: rotate(1deg);
}
.qr-card--channel::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: repeating-conic-gradient(
    from -8deg at 82% 18%,
    transparent 0 8deg,
    rgba(242,90,162,.18) 8deg 11deg
  );
  pointer-events: none;
}
.qr-card--channel > * { position: relative; z-index: 1; }
.last-demo-qr-grid .qr-card--channel img {
  padding: 10px;
  border: 3px solid var(--charcoal);
  background: var(--paper);
}
.qr-card__manga-label {
  display: inline-block;
  margin: -4px 0 -5px;
  padding: 7px 13px;
  border: 3px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--magenta);
  color: var(--charcoal);
  font: 1000 18px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  transform: rotate(-2deg);
}
.last-demo-qr-grid .qr-card--channel .qr-card__title {
  min-height: 42px;
  color: #a82065;
  font-size: 25px;
}
.last-demo-qr-grid .qr-card--demo .qr-card__title {
  min-height: 64px;
  color: #08777d;
}
.layout-gallery .content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.layout-full-bleed { padding: 0 !important; }
.layout-demo { display: grid !important; place-items: center; background: var(--charcoal) !important; color: var(--paper) !important; text-align: center !important; }
.layout-finale { background: var(--forest) !important; color: var(--paper) !important; }
.layout-finale::after, .layout-demo::after { color: var(--mint); }

/* Warm paper is the everyday world. Darkness is reserved for act breaks,
   demos, and the two deliberately theatrical manga finales. */
.layout-chapter .slide-head h2,
.layout-demo .slide-head h2,
.layout-finale .slide-head h2,
.guitar-flare .slide-head h2,
.manga-objective .slide-head h2 { text-shadow: 5px 5px 0 #000; }
.layout-chapter::before,
.layout-demo::before,
.layout-finale::before,
.guitar-flare::before,
.manga-objective::before { background: repeating-conic-gradient(from 8deg at 50% 50%, transparent 0 8deg, rgba(255,255,255,.055) 8deg 10deg); }
.guitar-flare,
.manga-objective { background: var(--night) !important; color: var(--paper) !important; }
.guitar-flare::after,
.manga-objective::after { color: var(--mint); }

/* Components */
.card, .quest-card, .item-card, .bug-card, .callout, .speech, .terminal, .panel {
  border: 4px solid var(--charcoal);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
}
.card { padding: 28px; color: var(--ink); }
.card p { margin-top: 14px; }
.card strong, .panel strong, .tradeoff strong { color: var(--forest); }
.card .muted, .panel .muted { color: #52665f; }
.card.tint { background: var(--mint); }
.card.dark { background: var(--charcoal); color: var(--paper); }
.card.dark strong { color: var(--cyan); }
.card.yellow { background: #fff2b9; }
.card.magenta { background: #ffd7ea; }
.item-card, .callout, .panel { color: var(--ink); }

/* Semantic manga cards: color and background geometry repeat the same meaning
   across otherwise unrelated arcs. */
.card[data-tone] {
  --card-tone: var(--cyan);
  --card-soft: rgba(53,214,208,.16);
  position: relative;
  overflow: hidden;
  box-shadow: 7px 7px 0 var(--card-tone);
}
.card[data-tone]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.card[data-tone] > * { position: relative; z-index: 1; }
.card[data-tone="insight"] { --card-tone: #159b98; --card-soft: rgba(21,155,152,.17); }
.card[data-tone="insight"]::before { background: repeating-conic-gradient(from 6deg at 86% 82%, transparent 0 13deg, var(--card-soft) 13deg 16deg); }
.card[data-tone="physical"] { --card-tone: #57775e; --card-soft: rgba(87,119,94,.19); }
.card[data-tone="physical"]::before { background: repeating-radial-gradient(ellipse at 85% 85%, transparent 0 24px, var(--card-soft) 25px 29px, transparent 30px 48px); }
.card[data-tone="signal"] { --card-tone: #008b95; --card-soft: rgba(0,139,149,.17); }
.card[data-tone="signal"]::before { background: repeating-linear-gradient(165deg, transparent 0 29px, var(--card-soft) 30px 34px, transparent 35px 54px); }
.card[data-tone="time"] { --card-tone: #d87a13; --card-soft: rgba(216,122,19,.18); }
.card[data-tone="time"]::before { background: repeating-radial-gradient(circle at 86% 78%, transparent 0 20px, var(--card-soft) 21px 27px, transparent 28px 45px); }
.card[data-tone="system"] { --card-tone: #7e63c8; --card-soft: rgba(126,99,200,.16); }
.card[data-tone="system"]::before { background-image: linear-gradient(var(--card-soft) 2px, transparent 2px), linear-gradient(90deg, var(--card-soft) 2px, transparent 2px); background-size: 30px 30px; }
.card[data-tone="warning"] { --card-tone: #d94752; --card-soft: rgba(217,71,82,.16); }
.card[data-tone="warning"]::before { background: repeating-linear-gradient(63deg, transparent 0 23px, var(--card-soft) 24px 31px, transparent 32px 49px); }
.card[data-tone="success"] { --card-tone: #2f9f62; --card-soft: rgba(47,159,98,.17); }
.card[data-tone="success"]::before { background: repeating-conic-gradient(from 4deg at 84% 78%, transparent 0 11deg, var(--card-soft) 11deg 14deg); }
.card[data-tone="question"] { --card-tone: #c78a00; --card-soft: rgba(255,211,79,.3); }
.card[data-tone="question"]::before { content: "?"; inset: auto 18px -42px auto; color: var(--card-soft); font: 1000 180px/.8 ui-monospace, monospace; transform: rotate(8deg); }
.card[data-tone="boundary"] { --card-tone: #c83f88; --card-soft: rgba(200,63,136,.2); }
.card[data-tone="boundary"]::before { inset: 12px; border: 5px dashed var(--card-soft); border-radius: 8px; }
.card[data-tone="external"] { --card-tone: #cc4d91; --card-soft: rgba(204,77,145,.16); }
.card[data-tone="external"]::before { background: radial-gradient(circle at 82% 78%, var(--card-soft) 0 5px, transparent 6px) 0 0 / 24px 24px; }

.quest-card { padding: 42px; background: var(--charcoal); color: var(--paper); box-shadow: 14px 14px 0 var(--magenta); }
.quest-label { color: var(--yellow); font: 950 22px/1 ui-monospace, monospace; letter-spacing: .12em; }
.quest-card h3 { margin-top: 18px; font-size: 48px; }
.quest-meta { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.badge { display: inline-flex; padding: 8px 13px; border: 3px solid var(--charcoal); border-radius: 999px; background: var(--mint); color: var(--charcoal); font-size: 18px; font-weight: 950; letter-spacing: .03em; }
.quest-card .badge { border-color: var(--paper); background: transparent; color: var(--paper); }
.badge.experimental { background: var(--yellow); }
.badge.planned { background: #ffd7ea; }
.badge.implemented { background: var(--mint); }

.human-opening-stage {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 70px;
  max-width: 1320px !important;
  min-height: 520px;
  margin-right: auto;
  margin-left: auto;
}
.human-opening-stage--solo {
  grid-template-columns: 1fr;
}
.human-opening-stage--solo .quest-card {
  width: 100%;
  padding: 64px;
}
.human-opening-stage--solo .quest-card h3 { font-size: 60px; }

.human-opening .quest-card {
  background: var(--forest);
  box-shadow: 14px 14px 0 var(--yellow), 21px 21px 0 var(--charcoal);
  transform: rotate(-.7deg);
}
.human-opening .quest-card--primary {
  background: linear-gradient(135deg, var(--paper) 0%, #eee9ff 100%);
  color: var(--ink);
  box-shadow: 14px 14px 0 #7e63c8, 21px 21px 0 var(--charcoal);
}
.quest-card--primary .quest-label { color: #6847b8; }
.quest-card--primary .badge {
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.quest-card--primary .badge:nth-child(1) { background: var(--yellow); }
.quest-card--primary .badge:nth-child(2) { background: #ffd7ea; }
.quest-card--primary .badge:nth-child(3) { background: #c9f4ef; }
.human-opening-line {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px !important;
  line-height: 1.08 !important;
  font-weight: 700;
  letter-spacing: -.025em;
}
.human-opening-line strong {
  display: inline-block;
  margin-top: 12px;
  color: #a93668;
  font-size: 72px;
}

/* Cold-open build reveal: two accomplishments, two clean beats. */
.two-builds-stage {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 30px;
  max-width: 1400px !important;
  min-height: 540px;
}
.build-reveal-card {
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 11px 11px 0 var(--sage);
}
.keyboard-keyboard-card { display: grid; grid-template-rows: 292px 1fr; }
.keyboard-keyboard-card figure {
  height: 292px;
  margin: 0;
  overflow: hidden;
  border-bottom: 5px solid var(--charcoal);
  background: #17211e;
}
.keyboard-keyboard-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.build-reveal-copy { padding: 24px 28px; }
.build-reveal-status { color: #087f83; font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .09em; }
.build-reveal-copy h3 { margin-top: 12px; font-size: 50px; line-height: .91; }
.keyboard-keyboard-joke { display: flex; align-items: baseline; gap: 11px; margin-top: 18px; font-size: 20px !important; line-height: 1 !important; }
.keyboard-keyboard-joke strong { color: var(--forest); }
.keyboard-keyboard-joke span { color: var(--magenta); font: italic 800 17px/1 Georgia, serif; }
.build-reveal-copy small { display: block; margin-top: 15px; color: #65756f; font: 850 15px/1 ui-monospace, monospace; }
.synthphone-card {
  display: grid;
  grid-template-rows: 320px 1fr;
  background: #ffe1ef;
  box-shadow-color: var(--magenta);
}
.synthphone-return-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 5px solid var(--charcoal);
  background: var(--forest);
}
.synthphone-return-art::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 42px solid rgba(53,214,208,.14);
  border-radius: 50%;
}
.synthphone-return-art img { position: relative; z-index: 1; width: 175px; height: auto; filter: drop-shadow(10px 10px 0 rgba(0,0,0,.55)); transform: rotate(3deg); }
.returning-badge {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  padding: 9px 12px;
  border: 3px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 5px 5px 0 rgba(0,0,0,.55);
  font: 1000 15px/1 ui-monospace, monospace;
  transform: rotate(3deg);
}
.synthphone-card .build-reveal-copy h3 { font-size: 46px; line-height: 1; }
.synthphone-card .build-reveal-copy p { margin-top: 18px; max-width: 460px; color: #4e625a; font-size: 22px; line-height: 1.16; font-weight: 850; }

/* Thesis slide: one causal claim instead of a survey of generic lessons. */
.thesis-argument { max-width: 1370px !important; }
.thesis-line {
  max-width: 1190px;
  font-size: 43px !important;
  line-height: 1.1 !important;
  font-weight: 900;
  letter-spacing: -.025em;
}
.thesis-line span { color: var(--cyan); }
.thesis-chain {
  display: grid;
  grid-template-columns: 1fr 74px 1fr 74px 1fr;
  align-items: stretch;
  gap: 12px;
  margin-top: 36px;
}
.thesis-stage {
  --thesis-tone: var(--cyan);
  min-height: 225px;
  padding: 26px;
  border: 4px solid var(--charcoal);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--thesis-tone);
}
.thesis-stage[data-tone="physical"] { --thesis-tone: var(--sage); }
.thesis-stage[data-tone="system"] { --thesis-tone: #7e63c8; background: #eee9ff; }
.thesis-stage[data-tone="boundary"] { --thesis-tone: var(--magenta); background: #ffe1ef; }
.thesis-stage small { color: #536a61; font: 950 15px/1 ui-monospace, monospace; letter-spacing: .09em; }
.thesis-stage h3 { margin-top: 18px; font-size: 39px; }
.thesis-stage p { margin-top: 17px; font-size: 22px; line-height: 1.18; }
.thesis-arrow { display: grid; place-items: center; color: var(--magenta); font: 1000 58px/1 ui-monospace, monospace; }
.thesis-payoff {
  margin: 38px auto 0 !important;
  width: max-content;
  max-width: 1080px;
  padding: 13px 22px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 7px 7px 0 var(--charcoal);
  font-size: 27px !important;
  font-weight: 950;
  transform: rotate(-1deg);
}

/* Manga triptych for the embedded-as-medium thesis. Each panel uses the
   visual behavior of its medium instead of only describing it. */
.constraint-manga-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  height: 330px;
  margin-top: 28px;
  perspective: 1200px;
}
.constraint-medium {
  min-width: 0;
  height: 320px;
  padding: 20px 24px 22px;
  overflow: visible;
  transform-origin: center;
}
.constraint-medium:nth-child(1) { transform: rotate(-1.8deg) translateY(5px); }
.constraint-medium:nth-child(2) { z-index: 3; transform: rotate(1.3deg) translateY(-5px); }
.constraint-medium:nth-child(3) { transform: rotate(-.8deg) translateY(4px); }
.constraint-medium small {
  display: block;
  color: #536a61;
  font: 950 13px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.constraint-medium.dark small { color: #b8cac3; }
.manga-panel.constraint-medium h3 { max-width: 56%; margin-top: 10px; font-size: 35px; }
.manga-panel.constraint-medium p { max-width: 58%; margin-top: 8px; font-size: 20px; line-height: 1.12; }
.manga-panel.constraint-medium .jp-line { max-width: 58%; margin-bottom: 6px; font-size: 17px; }
.manga-panel.constraint-medium .manga-sfx { right: -12px; bottom: -14px; font-size: 52px; }
.manga-panel.constraint-medium .manga-sfx::after { margin-top: 7px; font-size: 10px; }

.pixel-art-demo,
.chiptune-demo,
.embedded-art-demo {
  position: absolute !important;
  z-index: 0 !important;
  right: 22px;
  top: 42px;
  width: 142px;
  height: 112px;
}
.pixel-art-demo {
  display: block;
  overflow: hidden;
  border: 4px solid #08080d;
  background: #2e246f;
  box-shadow: 6px 6px 0 var(--tone);
  transform: rotate(3deg);
}
.pixel-art-demo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  image-rendering: pixelated;
  filter: saturate(1.12) contrast(1.08) brightness(1.04);
  transform: scale(1.7);
  transform-origin: 50% 25%;
}
.pixel-art-demo span {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 4px 6px 3px;
  border: 2px solid #08080d;
  background: var(--yellow);
  color: var(--ink);
  font: 1000 9px/1 ui-monospace, monospace;
  box-shadow: 3px 3px 0 var(--magenta);
}

.chiptune-demo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #08080d;
  background:
    linear-gradient(rgba(189,131,255,.2) 2px, transparent 2px),
    linear-gradient(90deg, rgba(189,131,255,.2) 2px, transparent 2px),
    #171126;
  background-size: 16px 16px;
  box-shadow: 6px 6px 0 var(--tone);
  transform: rotate(-4deg);
}
.chiptune-demo svg {
  position: absolute;
  inset: 8px 5px 22px;
  width: calc(100% - 10px);
  height: calc(100% - 30px);
  filter: drop-shadow(0 0 5px var(--cyan));
}
.chiptune-demo polyline { fill: none; stroke: var(--cyan); stroke-width: 8; stroke-linejoin: bevel; }
.chiptune-demo span {
  position: absolute;
  right: 7px;
  bottom: 5px;
  padding: 4px 7px;
  border: 2px solid #08080d;
  background: var(--yellow);
  color: var(--ink);
  font: 1000 11px/1 ui-monospace, monospace;
  box-shadow: 3px 3px 0 var(--magenta);
  transform: rotate(2deg);
}

.embedded-art-demo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--cyan);
  background:
    linear-gradient(rgba(53,214,208,.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(53,214,208,.16) 2px, transparent 2px),
    #0b0b17;
  background-size: 18px 18px;
  box-shadow: 6px 6px 0 var(--magenta);
  transform: rotate(3deg);
}
.embedded-reality {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: saturate(1.08) contrast(1.12) brightness(.96);
  transform: scale(.84) rotate(-3deg);
  transform-origin: 54% 48%;
}
.constraint-medium.visible .embedded-reality {
  animation: embeddedRealityPunch .5s cubic-bezier(.18,.88,.28,1.24) .58s both;
}
@keyframes embeddedRealityPunch {
  0% { opacity: 0; transform: scale(.84) rotate(-3deg); }
  68% { opacity: 1; transform: scale(1.07) rotate(.7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.chip-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 54px;
  border: 4px solid #08080d;
  background: var(--yellow);
  color: var(--ink);
  font: 1000 17px/1 ui-monospace, monospace;
  box-shadow: 4px 4px 0 var(--cyan);
}
.embedded-art-demo i { position: absolute; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.embedded-art-demo i:nth-of-type(1) { left: 0; top: 28px; width: 43px; height: 5px; }
.embedded-art-demo i:nth-of-type(2) { right: 0; bottom: 27px; width: 43px; height: 5px; }
.embedded-art-demo i:nth-of-type(3) { left: 29px; bottom: 0; width: 5px; height: 34px; }
.embedded-art-demo i:nth-of-type(4) { right: 25px; top: 0; width: 5px; height: 34px; }
.constraint-payoff {
  margin-top: 25px !important;
  max-width: 1180px;
  font-size: 25px !important;
  text-transform: none;
}
.constraint-payoff span { margin-right: 12px; font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }

/* Requirement ledger: each promise visibly causes an architectural commitment. */
.constraint-ledger { max-width: 1360px !important; }
.constraint-head,
.constraint-row {
  display: grid;
  grid-template-columns: 1.02fr 1.28fr 1fr;
  align-items: center;
  gap: 22px;
}
.constraint-head {
  padding: 0 24px 10px;
  color: var(--forest);
  font: 950 15px/1 ui-monospace, monospace;
  letter-spacing: .09em;
}
.constraint-row {
  --constraint-tone: var(--cyan);
  position: relative;
  min-height: 88px;
  margin-top: 12px;
  padding: 15px 22px;
  border: 4px solid var(--charcoal);
  border-left: 13px solid var(--constraint-tone);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--constraint-tone);
}
.constraint-row[data-tone="physical"] { --constraint-tone: var(--sage); }
.constraint-row[data-tone="signal"] { --constraint-tone: var(--cyan); }
.constraint-row[data-tone="time"] { --constraint-tone: #e08a24; background: #fff0d2; }
.constraint-row[data-tone="boundary"] { --constraint-tone: var(--magenta); background: #ffe1ef; }
.constraint-row strong { color: var(--ink); font-size: 24px; line-height: 1.04; }
.constraint-row span { font-size: 21px; line-height: 1.12; }
.constraint-row b { color: #31483f; font: 900 20px/1.12 ui-monospace, monospace; }
.constraint-conclusion {
  margin: 28px auto 0 !important;
  width: max-content;
  max-width: 1210px;
  color: var(--ink);
  font-size: 27px !important;
  font-weight: 900;
}
.constraint-conclusion span { color: #985f13; font-weight: 1000; }

/* Rejected two-switch concept: show the information model, not just the stack. */
.two-switch-measurement .slide-head h2 { max-width: 1350px; font-size: 52px; }
.switch-model-deep {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1360px !important;
}
.switch-stack-technical {
  position: relative;
  height: 525px;
  padding: 82px 50px 36px;
  border: 5px solid var(--charcoal);
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(53,214,208,.1) 44px 46px),
    var(--night-2);
  box-shadow: 12px 12px 0 var(--cyan), 18px 18px 0 var(--charcoal);
}
.key-plunger {
  position: absolute;
  top: 20px;
  left: 50px;
  color: var(--mint);
  font: 950 18px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.key-plunger span { margin-left: 14px; color: var(--magenta); font-size: 36px; }
.trip-plane {
  display: grid;
  grid-template-columns: 1fr 78px;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  min-height: 138px;
  padding: 20px 24px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--sage);
  transform: perspective(500px) rotateX(7deg) skewX(-3deg);
}
.trip-plane.second { box-shadow: 8px 8px 0 var(--magenta); }
.trip-plane span { font: 950 22px/1 ui-monospace, monospace; }
.trip-plane strong { grid-row: 1 / 3; grid-column: 2; color: var(--magenta); font: 1000 52px/1 ui-monospace, monospace; }
.trip-plane small { color: #536a61; font: 850 17px/1 ui-monospace, monospace; }
.trip-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 76px;
  color: var(--paper);
}
.trip-gap::before,
.trip-gap::after { content: ""; width: 70px; border-top: 3px dashed var(--cyan); }
.trip-gap span { color: var(--mint); font: 850 15px/1 ui-monospace, monospace; }
.trip-gap strong { color: var(--cyan); font: 1000 34px/1 ui-monospace, monospace; }
.switch-inference { align-self: stretch; display: grid; align-content: center; gap: 23px; }
.velocity-equation {
  padding: 28px 32px;
  border: 5px solid var(--charcoal);
  border-radius: 14px;
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 10px 10px 0 var(--magenta), 16px 16px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.velocity-equation small { font: 950 15px/1 ui-monospace, monospace; letter-spacing: .1em; }
.velocity-equation strong { display: block; margin-top: 18px; color: var(--charcoal); font: 1000 50px/.95 ui-monospace, monospace; }
.velocity-equation p { margin-top: 18px; font-size: 22px; font-weight: 800; }
.measurement-ledger { display: grid; gap: 11px; }
.measurement-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  min-height: 72px;
  padding: 12px 17px;
  border: 3px solid var(--charcoal);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--charcoal);
}
.measurement-row span { color: #28714d; font: 950 15px/1 ui-monospace, monospace; letter-spacing: .06em; }
.measurement-row.bad span { color: #c53f4d; }
.measurement-row p { font-size: 20px; line-height: 1.1; font-weight: 800; }

/* The "human API" claim, grounded in the two real data contracts. */
.semantic-contract-slide .slide-head h2 { max-width: 1380px; }
.semantic-contract { max-width: 1370px !important; }
.contract-compare {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  align-items: stretch;
  gap: 20px;
}
.contract-side {
  min-height: 382px;
  padding: 32px;
  border: 5px solid var(--charcoal);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--sage);
}
.contract-side.musical { background: #e4f8f6; box-shadow-color: var(--cyan); }
.contract-label {
  display: inline-block;
  padding: 7px 10px;
  background: var(--charcoal);
  color: var(--paper);
  font: 950 16px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.contract-side.musical .contract-label { background: #087f83; }
.contract-side h3 { margin-top: 24px; font-size: 38px; }
.contract-code {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding: 18px 16px;
  border: 3px solid var(--charcoal);
  background: var(--night-2);
  color: var(--paper);
  box-shadow: 5px 5px 0 var(--magenta);
}
.contract-code code { font-size: 18px; font-weight: 850; white-space: nowrap; }
.contract-code b { color: var(--magenta); font-size: 24px; }
.contract-side p { margin-top: 28px; font-size: 23px; line-height: 1.2; }
.contract-side p strong { color: #087f83; }
.contract-swap {
  display: grid;
  place-content: center;
  text-align: center;
}
.contract-swap span { color: var(--yellow); font: 1000 27px/1 "Hiragino Sans", "Yu Gothic", sans-serif; }
.contract-swap strong { margin: 12px 0; color: var(--magenta); font: 1000 70px/.8 ui-monospace, monospace; }
.contract-swap small { color: var(--mint); font: 950 13px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.contract-conclusion {
  margin: 38px auto 0 !important;
  width: max-content;
  max-width: 1240px;
  padding: 14px 24px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 8px 8px 0 var(--magenta), 13px 13px 0 var(--charcoal);
  font-size: 27px !important;
  font-weight: 950;
  transform: rotate(-1deg);
}
.contract-conclusion span { color: #874400; font-weight: 1000; }

/* Inspiration becomes useful when every source answers a named question and
   exposes the cost inherited with that answer. */
.reference-synthesis-slide .slide-head h2 { max-width: 1360px; }
.reference-ledger { max-width: 1370px !important; }
.reference-head,
.reference-row {
  display: grid;
  grid-template-columns: .78fr 1.35fr 1.2fr;
  align-items: center;
  gap: 24px;
}
.reference-head {
  padding: 0 23px 9px;
  color: var(--forest);
  font: 950 15px/1 ui-monospace, monospace;
  letter-spacing: .09em;
}
.reference-row {
  --reference-tone: var(--cyan);
  min-height: 78px;
  margin-top: 10px;
  padding: 13px 21px;
  border: 4px solid var(--charcoal);
  border-left: 12px solid var(--reference-tone);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--reference-tone);
}
.reference-row[data-tone="physical"] { --reference-tone: var(--sage); }
.reference-row[data-tone="insight"] { --reference-tone: var(--cyan); background: #e4f8f6; }
.reference-row[data-tone="time"] { --reference-tone: #e08a24; background: #fff0d2; }
.reference-row[data-tone="signal"] { --reference-tone: #008b95; }
.reference-row[data-tone="system"] { --reference-tone: #7e63c8; background: #eee9ff; }
.reference-row strong { color: var(--ink); font-size: 23px; line-height: 1.04; }
.reference-row span { font-size: 21px; line-height: 1.1; }
.reference-row b { color: #31483f; font: 900 18px/1.13 ui-monospace, monospace; }
.reference-conclusion {
  margin: 25px auto 0 !important;
  width: max-content;
  max-width: 1260px;
  color: var(--ink);
  font-size: 26px !important;
  font-weight: 900;
}
.reference-conclusion span { color: #985f13; font-weight: 1000; }

/* Debugging slide: six evidence-backed tools, then one earned character beat. */
.debug-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 264px;
  gap: 20px;
  max-width: 1410px !important;
}
.debug-grid .card { min-height: 0; padding: 23px; }
.debug-grid .card h3 { font-size: 28px; }
.debug-grid .card p { margin-top: 13px; font-size: 21px; line-height: 1.17; }
.lucky-debug-panel {
  position: relative;
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--magenta), 14px 14px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.lucky-debug-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #12161a;
}
.lucky-debug-panel figcaption {
  display: grid;
  align-content: center;
  padding: 18px 16px;
  border-left: 4px solid var(--magenta);
  background: var(--night-2);
  color: var(--paper);
}
.lucky-debug-panel figcaption strong { display: block; color: var(--yellow); font-size: 23px; line-height: 1.02; }
.lucky-debug-panel figcaption small { display: block; margin-top: 14px; color: #d7e4df; font-size: 12px; line-height: 1.2; }
.lucky-debug-panel cite { font-style: italic; }
.reaction-debug-card {
  position: relative;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 245px 1fr;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 13px;
  background: var(--night-2);
  color: var(--paper);
  box-shadow: 9px 9px 0 var(--magenta), 14px 14px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.reaction-debug-card > div { grid-column: 2; padding: 24px 28px 24px 6px; }
.reaction-debug-card strong { display: block; color: var(--yellow); font-size: 29px; line-height: 1.02; }
.reaction-debug-card small { display: block; margin-top: 15px; color: #d7e4df; font-size: 17px; line-height: 1.18; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stack { display: grid; gap: 20px; }
.scan-stats {
  grid-template-rows: repeat(2, 246px);
  gap: 18px;
  margin-top: 26px;
}
.scan-stats .card { min-height: 0; padding: 19px 24px; }
.scan-stats .big-number { font-size: 96px; line-height: .86; letter-spacing: -.07em; }
.scan-stats h3 { margin-top: 12px; font-size: 28px; }
.scan-stats .card p { margin-top: 8px; font-size: 23px; line-height: 1.18; }

/* Standalone manga assets imported from the project root. */
.direct-art { display: block; object-fit: contain; }
.character-reaction {
  position: absolute;
  z-index: 8;
  display: block;
  width: 280px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(9px 11px 0 rgba(0,0,0,.58));
}
.reaction-stack { left: -55px; bottom: -70px; width: 285px; transform: rotate(-4deg); }
.reaction-grief { left: 50%; bottom: -105px; width: 340px; transform: translateX(-50%) rotate(-2deg); }
.research-screenshot.poc img.character-reaction.reaction-poc {
  right: -24px;
  bottom: 40px;
  width: 245px;
  height: auto;
  object-fit: contain;
  transform: rotate(2deg);
}
.reaction-achievement { right: 46px; top: 68px; width: 250px; transform: rotate(4deg); }
.reaction-license { right: -24px; top: -198px; width: 185px; transform: rotate(2deg); }
.reaction-debug { left: -12px; bottom: -82px; width: 285px; transform: rotate(-3deg); }
.quest-prompt {
  width: 310px;
  margin: 0 auto;
  filter: drop-shadow(9px 9px 0 rgba(0,0,0,.6));
}
.meme-cutout {
  display: block;
  border: 5px solid #08080d;
  background-color: var(--paper);
  object-fit: contain;
  box-shadow: 10px 10px 0 var(--magenta), 15px 15px 0 #08080d;
}
.meme-cat {
  width: 290px;
  height: auto;
  margin: 30px auto 0;
  transform: rotate(3deg);
}
.meme-worked {
  position: absolute;
  z-index: 7;
  right: 70px;
  top: 42px;
  width: 340px;
  height: auto;
  box-shadow: 9px 9px 0 var(--cyan), 14px 14px 0 #08080d;
  transform: rotate(3.5deg);
}
.portrait-duo {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  height: 245px;
  overflow: hidden;
}
.portrait-duo img {
  max-width: 58%;
  max-height: 225px;
  object-fit: contain;
  filter: drop-shadow(7px 7px 0 rgba(0,0,0,.5));
}
.chapter-art {
  display: block;
  width: auto;
  max-width: 390px;
  max-height: 160px;
  margin: 28px auto 0;
  object-fit: contain;
  filter: drop-shadow(9px 9px 0 rgba(0,0,0,.58));
  transform: rotate(-2deg);
}
.chapter-art.loot-card { max-height: 180px; transform: rotate(2deg); }
.loot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 28px;
}
.loot-row img {
  height: 190px;
  width: auto;
  filter: drop-shadow(8px 8px 0 rgba(0,0,0,.55));
}
.loot-row img:nth-child(1) { transform: rotate(-3deg); }
.loot-row img:nth-child(2) { transform: translateY(-8px); }
.loot-row img:nth-child(3) { transform: rotate(3deg); }
.phone-item-art {
  display: block;
  width: auto;
  height: 330px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(10px 10px 0 rgba(0,0,0,.5));
}

/* Discovery cut: documentary screenshots and build photos share the existing
   manga grammar without changing the original slide set. */
.research-question-grid {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: 1320px !important;
}
.research-question-grid .card { min-height: 330px; padding: 38px; }
.research-question-grid .card h3 { margin-top: 24px; font-size: 48px; }
.research-question-grid .card p { max-width: 470px; font-size: 27px; }
.research-question-mark { display: grid; place-items: center; color: #b36f16; font-size: 82px; font-weight: 1000; }
.research-value { display: block; margin-top: 24px; font: 1000 72px/1 ui-monospace, monospace; }
.research-payoff { margin-top: 30px !important; color: var(--forest); font-size: 38px !important; font-weight: 950; text-align: center; }

.research-screenshot-stage { display: grid; gap: 24px; max-width: 1370px !important; }
.research-chat-sequence { display: grid; gap: 10px; }
.research-chat-sequence .research-screenshot,
.research-chat-sequence .documentary-message { height: 178px; }
.research-chat-sequence .research-screenshot img { height: 128px; object-fit: contain; }
.research-chat-sequence .research-screenshot figcaption { height: 50px; padding-top: 11px; }
.research-chat-arrow {
  color: var(--yellow);
  font: 1000 18px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  text-align: center;
}
.research-chat-arrow span { color: var(--cyan); }
.documentary-message {
  --message-tone: var(--cyan);
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 18px 24px 16px;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 14px;
  background:
    repeating-linear-gradient(165deg, transparent 0 34px, rgba(53,214,208,.055) 35px 39px, transparent 40px 59px),
    #17191f;
  color: var(--paper);
  box-shadow: 9px 9px 0 var(--message-tone), 14px 14px 0 #08080d;
}
.documentary-message[data-tone="warning"] { --message-tone: var(--red); }
.documentary-message[data-tone="discovery"] { --message-tone: #9a72ef; }
.documentary-message::after {
  content: "受信";
  position: absolute;
  z-index: 0;
  right: 18px;
  bottom: -24px;
  color: color-mix(in srgb, var(--message-tone) 18%, transparent);
  font: 1000 105px/.8 "Hiragino Sans", "Yu Gothic", sans-serif;
  transform: rotate(-8deg);
}
.documentary-message > * { position: relative; z-index: 1; }
.documentary-message header { display: flex; align-items: center; gap: 13px; min-width: 0; }
.message-author {
  padding: 6px 12px;
  border: 3px solid #08080d;
  background: var(--message-tone);
  color: #08080d;
  font: 1000 16px/1 ui-monospace, monospace;
  box-shadow: 3px 3px 0 var(--paper);
}
.documentary-message time { color: #b8cac3; font: 850 15px/1 ui-monospace, monospace; }
.message-source { margin-left: auto; color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
.documentary-message > p { max-width: 1180px; font-size: 19px; line-height: 1.18; }
.documentary-message a { width: max-content; max-width: 100%; color: #64a8ff; font: 850 14px/1.1 ui-monospace, monospace; overflow-wrap: anywhere; }
.documentary-message footer { color: #8fa69e; font: 900 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.message-mention { padding: 1px 5px; background: #08080d; color: var(--cyan); font-weight: 900; }
.documentary-market { height: 540px; padding: 30px 34px; gap: 21px; }
.documentary-market > p { max-width: 690px; font-size: 30px; line-height: 1.16; }
.documentary-market a { font-size: 18px; }
.documentary-conclusion {
  margin-top: 7px;
  padding: 24px 26px;
  border: 4px solid #08080d;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--red);
  transform: rotate(-1deg);
}
.documentary-conclusion small { font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
.documentary-conclusion p { margin-top: 12px; font-size: 24px; line-height: 1.14; }
.documentary-conclusion strong { display: block; margin-top: 14px; color: var(--ink); font-size: 35px; }
.documentary-melodicade { min-height: 164px; padding: 18px 26px; }
.documentary-melodicade > p { font-size: 22px; }
.documentary-melodicade > p strong { color: var(--yellow); }
.market-result-stack { align-self: center; gap: 14px; }
.market-result-stack .card { min-height: 0; padding: 20px 24px; }
.market-result-stack .card h3 { font-size: 31px; }
.market-result-stack .card p { margin-top: 10px; font-size: 22px; line-height: 1.16; }
.market-result-stack .quest-card { min-height: 0; padding: 24px 28px; }
.market-result-stack .quest-card h3 { margin-top: 12px; font-size: 38px; }
.research-screenshot {
  margin: 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: #19191f;
  box-shadow: 10px 10px 0 var(--cyan), 15px 15px 0 #08080d;
}
.research-screenshot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.research-screenshot figcaption,
.research-photo-pair figcaption,
.geometry-comparison figcaption {
  padding: 12px 16px;
  background: var(--charcoal);
  color: var(--paper);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .025em;
}
.research-screenshot.wide { height: 210px; }
.research-screenshot.wide img { height: 158px; }
.research-screenshot.portrait { height: 540px; }
.research-screenshot.portrait img { height: 488px; object-fit: cover; object-position: top; }
.research-screenshot.poc { position: relative; height: 535px; }
.research-screenshot.poc img { height: 483px; object-fit: cover; }
.research-screenshot.poc img.poc-success-reaction {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 54px;
  width: 190px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(7px 7px 0 rgba(0,0,0,.7));
  transform: rotate(3deg);
}
.research-answer {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 24px;
  padding: 24px 32px;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--magenta);
}
.research-answer > span { grid-row: 1 / 3; font: 1000 34px/1.05 "Hiragino Sans", "Yu Gothic", sans-serif; }
.research-answer small { font-weight: 1000; letter-spacing: .12em; }
.research-answer strong { color: var(--ink); font-size: 35px; }
.research-answer p { grid-column: 2; font-size: 23px; }

.false-hope-grid { display: grid; gap: 22px; max-width: 1360px !important; }
.false-hope-grid .research-screenshot { height: 150px; }
.false-hope-grid .research-screenshot img { height: 98px; }
.false-hope-grid .card { min-height: 230px; }
.false-hope-grid .card h3 { margin-top: 14px; font-size: 39px; }
.melodicade-discovery-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  align-items: stretch;
}
.melodicade-photo {
  margin: 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: #17191f;
  box-shadow: 9px 9px 0 #9a72ef, 14px 14px 0 #08080d;
  transform: rotate(-.65deg);
}
.melodicade-photo img {
  display: block;
  width: 100%;
  height: 266px;
  object-fit: cover;
}
.melodicade-photo figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 16px;
  background: var(--charcoal);
  color: var(--paper);
}
.melodicade-photo figcaption strong { color: var(--yellow); font-size: 20px; }
.melodicade-photo figcaption span { color: #b8cac3; font: 850 13px/1.1 ui-monospace, monospace; text-align: right; }
.melodicade-ideas { gap: 16px; }
.false-hope-grid .melodicade-ideas .card { min-height: 0; padding: 20px 24px; }
.false-hope-grid .melodicade-ideas .card h3 { margin-top: 8px; font-size: 31px; }
.false-hope-grid .melodicade-ideas .card p { margin-top: 8px; font-size: 20px; line-height: 1.16; }

/* keyboard-keyboard cut: the two research leads that unlocked velocity. */
.velocity-discovery-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) 88px;
  gap: 20px 30px;
  height: 590px;
  max-width: 1400px !important;
  min-height: 0;
}
.velocity-discovery-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.velocity-discovery-card--stacked { box-shadow: 10px 10px 0 #9a72ef, 16px 16px 0 #08080d; }
.velocity-discovery-card--hall { box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #08080d; }
.velocity-discovery-card > header {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 16px;
}
.velocity-discovery-card > header small {
  color: #65726d;
  font: 900 13px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}
.velocity-discovery-card h3 { margin-top: 5px; font-size: 34px; }
.velocity-clue-number {
  display: grid;
  place-items: center;
  min-height: 55px;
  border: 4px solid #08080d;
  background: var(--yellow);
  color: #08080d;
  font: 1000 15px/1 ui-monospace, monospace;
  box-shadow: 4px 4px 0 #08080d;
  transform: rotate(-2deg);
}
.velocity-discovery-card--hall .velocity-clue-number { background: var(--cyan); transform: rotate(2deg); }
.velocity-discovery-photo {
  position: relative;
  align-self: center;
  width: 100%;
  height: 100%;
  min-height: 210px;
  margin: 0;
  overflow: hidden;
  border: 4px solid #08080d;
  border-radius: 10px;
  background: #17191f;
}
.velocity-discovery-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.velocity-discovery-photo figcaption {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 7px 10px;
  border: 2px solid #08080d;
  background: rgba(22,27,29,.92);
  color: var(--paper);
  font: 850 11px/1 ui-monospace, monospace;
}
.stacked-switch-discovery {
  display: grid;
  grid-template-columns: 1fr 58px 1fr 1.35fr;
  align-items: stretch;
  gap: 8px;
  min-height: 78px;
}
.stacked-trip,
.stacked-result {
  display: grid;
  place-items: center;
  padding: 8px;
  border: 3px solid #08080d;
  text-align: center;
}
.stacked-trip small,
.stacked-result small { font: 900 10px/1 ui-monospace, monospace; letter-spacing: .06em; }
.stacked-trip strong { font-size: 26px; }
.stacked-trip--first { background: var(--cyan); }
.stacked-trip--second { background: var(--magenta); }
.stacked-gap { display: grid; place-items: center; align-content: center; color: #6847b8; text-align: center; }
.stacked-gap span { font-size: 25px; font-weight: 1000; }
.stacked-gap small { font: 850 9px/1 ui-monospace, monospace; }
.stacked-result { background: #eee9ff; }
.stacked-result strong { margin-top: 5px; color: #6847b8; font-size: 20px; }
.hall-discovery-mechanism {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.hall-discovery-photo {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 4px solid #08080d;
  border-radius: 11px;
  background: #fff;
}
.hall-discovery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hall-discovery-photo figcaption {
  padding: 6px 8px 7px;
  border-top: 2px solid #08080d;
  background: var(--charcoal);
  color: var(--paper);
  font: 850 9px/1 ui-monospace, monospace;
  text-align: center;
}
.hall-discovery-reading {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 72px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}
.hall-discovery-path {
  display: grid;
  grid-template-rows: 1fr 12px 1fr 12px 1fr;
  gap: 2px;
  min-height: 0;
}
.hall-discovery-path div {
  display: grid;
  align-content: center;
  padding: 5px 12px;
  border: 3px solid #08080d;
  border-radius: 8px;
  background: #eee9ff;
}
.hall-discovery-path div:nth-of-type(2) { background: var(--yellow); }
.hall-discovery-path div:nth-of-type(3) { background: #c9f4ef; }
.hall-discovery-path small { font: 900 9px/1 ui-monospace, monospace; letter-spacing: .08em; }
.hall-discovery-path strong { margin-top: 4px; font-size: 17px; }
.hall-discovery-path > span { color: #6847b8; font-size: 17px; font-weight: 1000; line-height: 12px; text-align: center; }
.hall-discovery-trace {
  position: relative;
  height: 72px;
  overflow: hidden;
  border: 4px solid #08080d;
  border-radius: 9px;
  background: #101523;
}
.hall-discovery-trace svg { display: block; width: 100%; height: 100%; }
.hall-trace-grid { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 2; }
.hall-trace-threshold { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-dasharray: 12 9; }
.hall-trace-line { fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round; }
.hall-discovery-trace > span {
  position: absolute;
  top: 9px;
  left: 12px;
  color: var(--paper);
  font: 900 11px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.hall-discovery-copy { font-size: 18px; line-height: 1.12; font-weight: 850; }
.velocity-discovery-payoff {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 24px;
  min-height: 0;
  padding: 12px 24px;
  border: 5px solid #08080d;
  border-radius: 13px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--magenta);
}
.velocity-discovery-payoff > span { font: 1000 36px/1 "Hiragino Sans", "Yu Gothic", sans-serif; text-align: center; }
.velocity-discovery-payoff strong { font-size: 29px; }
.velocity-discovery-payoff p { margin-top: 3px; font-size: 19px; }

/* keyboard-keyboard cut: Hall travel becomes piano/forte MIDI dynamics. */
.piano-forte-stage {
  display: grid;
  grid-template-rows: 112px 320px 88px;
  gap: 20px;
  height: 580px;
  max-width: 1400px !important;
}
.piano-forte-principle {
  display: grid;
  grid-template-columns: 1fr 76px 1.08fr;
  align-items: center;
  gap: 24px;
  padding: 14px 26px;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--cyan);
}
.piano-forte-principle small {
  color: #397b78;
  font: 950 13px/1 ui-monospace, monospace;
  letter-spacing: .09em;
}
.piano-forte-principle strong { display: block; margin-top: 7px; font-size: 24px; line-height: 1.08; }
.piano-forte-arrow { color: var(--magenta); font: 1000 56px/1 ui-monospace, monospace; text-align: center; }
.piano-forte-principle-step {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.piano-forte-step-number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 4px solid #08080d;
  background: var(--yellow);
  font: 1000 20px/1 ui-monospace, monospace;
  box-shadow: 4px 4px 0 #08080d;
}
.piano-forte-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; min-height: 0; }
.piano-forte-example {
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 64px;
  min-width: 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
}
.piano-forte-example--soft { box-shadow: 9px 9px 0 var(--cyan); }
.piano-forte-example--loud { box-shadow: 9px 9px 0 var(--magenta); }
.piano-forte-example > header {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 8px 16px;
  border-bottom: 4px solid #08080d;
  background: #d9f7f4;
}
.piano-forte-example--loud > header { background: #ffe1ef; }
.piano-forte-example > header small { color: #52665f; font: 950 12px/1 ui-monospace, monospace; letter-spacing: .1em; }
.piano-forte-example > header h3 { margin-top: 2px; font-size: 25px; }
.piano-forte-example > header > strong {
  padding: 6px 11px;
  border: 3px solid #08080d;
  background: var(--paper);
  color: var(--ink);
  font: 1000 14px/1 ui-monospace, monospace;
  text-transform: uppercase;
  transform: rotate(2deg);
}
.piano-forte-example--loud > header > strong { transform: rotate(-2deg); }
.piano-forte-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 44px;
  border: 3px solid #08080d;
  background: var(--cyan);
  font: italic 1000 33px/1 Georgia, serif;
  box-shadow: 4px 4px 0 #08080d;
  transform: rotate(-3deg);
}
.piano-forte-example--loud .piano-forte-mark { background: var(--magenta); transform: rotate(3deg); }
.piano-forte-trace { position: relative; min-height: 0; background: #101523; }
.piano-forte-trace svg { display: block; width: 100%; height: 100%; }
.piano-forte-grid { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 3; stroke-dasharray: 12 9; }
.piano-forte-line { fill: none; stroke: var(--cyan); stroke-width: 10; stroke-linecap: round; }
.piano-forte-example--loud .piano-forte-line { stroke: var(--magenta); }
.piano-forte-threshold {
  position: absolute;
  left: 12px;
  padding: 3px 7px;
  border: 2px solid #08080d;
  background: var(--yellow);
  color: var(--ink);
  font: 1000 12px/1 ui-monospace, monospace;
}
.piano-forte-threshold--one { top: 22%; }
.piano-forte-threshold--two { top: 65%; }
.piano-forte-result {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 8px;
  border-top: 4px solid #08080d;
  background: #d9f7f4;
  text-align: center;
}
.piano-forte-example--loud .piano-forte-result { background: #ffe1ef; }
.piano-forte-result span { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; gap: 9px; }
.piano-forte-result b { color: var(--ink); font-size: 27px; }
.piano-forte-result small { color: #52665f; font: 950 10px/1 ui-monospace, monospace; letter-spacing: .07em; }
.piano-forte-result i { color: var(--magenta); font: 1000 35px/1 ui-monospace, monospace; font-style: normal; }
.piano-forte-payoff {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
  border: 5px solid #08080d;
  border-radius: 13px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--charcoal);
}
.piano-forte-payoff > span { font: 1000 34px/1 "Hiragino Sans", "Yu Gothic", sans-serif; text-align: center; }
.piano-forte-payoff strong { color: var(--ink); font-size: 27px; }
.piano-forte-payoff p { font: 900 18px/1.1 ui-monospace, monospace; text-align: right; }

.switch-stack-visual {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 520px;
  padding-right: 110px;
}
.keycap-block, .switch-block {
  display: grid;
  place-items: center;
  width: 340px;
  border: 6px solid #08080d;
  color: var(--ink);
  font-size: 26px;
  font-weight: 1000;
  box-shadow: 8px 8px 0 #000;
}
.keycap-block { height: 90px; border-radius: 24px 24px 8px 8px; background: var(--paper); }
.switch-block { height: 145px; background: var(--cyan); }
.switch-block.bottom { background: var(--magenta); }
.height-bracket {
  position: absolute;
  right: 12px;
  top: 93px;
  display: grid;
  place-items: center;
  width: 94px;
  height: 380px;
  border-right: 8px solid var(--red);
  color: var(--red);
  font-size: 27px;
  font-weight: 1000;
  line-height: .92;
  text-align: center;
  writing-mode: vertical-rl;
}
.stack-fine-meme {
  position: absolute;
  z-index: 6;
  left: -8px;
  bottom: -8px;
  width: 155px;
  height: auto;
  filter: drop-shadow(7px 7px 0 rgba(0,0,0,.68));
  transform: rotate(-4deg);
}
.grief-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; height: 500px; }
.grief-grid .manga-panel { padding: 35px; }
.grief-grid .manga-panel h3 { margin-top: 28px; font-size: 45px; }
.grief-grid .manga-panel p { margin-top: 30px; font-size: 29px; }
.grief-despair-meme {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: -46px;
  width: 390px;
  height: auto;
  filter: drop-shadow(8px 8px 0 rgba(0,0,0,.72));
  transform: translateX(-50%) rotate(-2deg);
}

.source-merge {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1.08fr;
  align-items: stretch;
  gap: 18px;
  max-width: 1420px !important;
}
.source-merge .card { min-width: 0; min-height: 390px; padding: 30px; }
.source-merge .card h3 { margin-top: 22px; font-size: 43px; }
.source-merge .card p { font-size: 25px; }
.source-merge code { display: block; margin-top: 32px; overflow-wrap: anywhere; font-size: 15px; }
.source-arrow { display: grid; place-items: center; color: var(--yellow); font-size: 68px; font-weight: 1000; }

.research-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1370px !important; }
.research-photo-pair figure,
.geometry-comparison figure {
  margin: 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: #061526;
  box-shadow: 9px 9px 0 var(--cyan);
}
.research-photo-pair img { display: block; width: 100%; height: 420px; object-fit: cover; }
.research-banner {
  position: relative;
  z-index: 5;
  width: max-content;
  max-width: 1250px;
  margin: 24px auto 0;
  padding: 14px 25px;
  border: 4px solid #08080d;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--magenta);
  font-size: 29px;
  font-weight: 1000;
  text-align: center;
}

.geometry-comparison {
  display: grid;
  grid-template-columns: 1fr 62px 1fr;
  align-items: center;
  gap: 18px;
  max-width: 1420px !important;
}
.geometry-comparison figure { box-shadow: 9px 9px 0 var(--magenta); }
.geometry-comparison img { display: block; width: 100%; height: 410px; object-fit: contain; }
.geometry-arrow { color: var(--yellow); font-size: 62px; font-weight: 1000; text-align: center; }

/* Manga grammar: reusable reaction panels, typographic cut-ins, speech bubbles,
   and slow background motion. */
.manga-burst::before {
  inset: -420px;
  background: repeating-conic-gradient(from 4deg at 50% 52%, transparent 0 7deg, rgba(255,255,255,.085) 7deg 9deg);
  transform-origin: 50% 52%;
}
.manga-burst.present::before { animation: slowSpin 34s linear infinite; }

.manga-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 22px;
  height: 665px;
  margin-top: 0;
}
.manga-panel {
  --tone: var(--magenta);
  --tone-soft: rgba(242,90,162,.14);
  position: relative;
  overflow: visible;
  padding: 26px;
  border: 7px solid #08080d;
  border-radius: 14px;
  background: #fff9ed;
  color: #14141d;
  box-shadow: 10px 10px 0 var(--tone);
}
.manga-panel.dark { background: #11111c; color: var(--paper); }
.manga-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.manga-panel > :not(.manga-sfx) { position: relative; z-index: 1; }
.manga-panel h3 { max-width: 90%; font-size: 34px; line-height: .98; text-transform: uppercase; }
.manga-panel p { max-width: 90%; margin-top: 18px; font-size: 25px; }
.jp-line {
  display: block;
  margin-bottom: 12px;
  color: var(--tone);
  font: 950 21px/1.05 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .03em;
}
.manga-panel.tone-confident { --tone: #5ce8e2; --tone-soft: rgba(92,232,226,.18); }
.manga-panel.tone-confident::before {
  background: repeating-conic-gradient(from 8deg at 84% 78%, transparent 0 12deg, var(--tone-soft) 12deg 15deg);
}
.manga-panel.tone-confused { --tone: #d12e73; --tone-soft: rgba(255,211,79,.32); }
.manga-panel.tone-confused::before {
  content: "?";
  inset: auto 28px -76px auto;
  color: var(--tone-soft);
  font: 1000 270px/.8 ui-monospace, monospace;
  transform: rotate(9deg);
}
.manga-panel.tone-dread { --tone: #ff5b86; --tone-soft: rgba(255,91,134,.16); }
.manga-panel.tone-dread::before {
  background: repeating-linear-gradient(73deg, transparent 0 24px, var(--tone-soft) 25px 30px, transparent 31px 48px);
}
.manga-panel.tone-revelation { --tone: #007f78; --tone-soft: rgba(53,214,208,.21); }
.manga-panel.tone-revelation::before {
  background: repeating-radial-gradient(circle at 82% 76%, transparent 0 22px, var(--tone-soft) 23px 29px, transparent 30px 48px);
}
.manga-panel.tone-magic { --tone: #bd83ff; --tone-soft: rgba(189,131,255,.17); }
.manga-panel.tone-magic::before {
  background: repeating-conic-gradient(from -7deg at 78% 74%, transparent 0 10deg, var(--tone-soft) 10deg 13deg);
}
.manga-panel.tone-defeat { --tone: #b82a3c; --tone-soft: rgba(184,42,60,.14); }
.manga-panel.tone-defeat::before {
  background: repeating-linear-gradient(98deg, transparent 0 26px, var(--tone-soft) 27px 31px, transparent 32px 48px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 100%);
}
.manga-sfx {
  position: absolute;
  z-index: 5;
  right: -20px;
  bottom: -24px;
  color: var(--tone);
  font: 1000 78px/.82 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.08em;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px #08080d;
  text-shadow: 5px 5px 0 #000, 9px 9px 0 rgba(0,0,0,.24);
  transform: rotate(-11deg);
}
.manga-sfx::after {
  content: attr(data-meaning);
  display: block;
  width: max-content;
  margin: 10px 8px 0 auto;
  padding: 5px 9px;
  border: 2px solid var(--paper);
  background: #08080d;
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--tone);
  font: 950 13px/1 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.manga-panel:nth-child(-n+3) { z-index: 2; }
.manga-panel:nth-child(n+4) { z-index: 3; }
.manga-panel.has-reaction { padding-right: 190px; }
.manga-panel.has-reaction h3,
.manga-panel.has-reaction p,
.manga-panel.has-reaction .jp-line { max-width: 100%; }
.panel-reaction {
  position: absolute !important;
  z-index: 2 !important;
  right: 2px;
  bottom: 0;
  width: 200px;
  height: 235px;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
.panel-reaction--max {
  right: -5px;
  width: 225px;
  height: 255px;
}
.manga-panel.has-reaction .manga-sfx { z-index: 6; }

/* Keyboard Keyboard 09: a web developer cuts across the hardware narrative. */
.reveal .slides section.interruption-slide {
  padding: 0 !important;
  background:
    linear-gradient(90deg, rgba(6,8,14,.98) 0 64%, rgba(14,18,28,.91) 64% 100%),
    var(--night) !important;
  color: var(--paper);
}
.interruption-slide::before {
  inset: -360px;
  background: repeating-conic-gradient(from -3deg at 89% 54%, transparent 0 7deg, rgba(242,90,162,.17) 7deg 9deg);
  transform: none;
}
.interruption-slide::after { color: var(--mint); }
.interruption-progress {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 67px;
  padding: 0 72px;
  border-bottom: 5px solid #08080d;
  background: var(--yellow);
  color: var(--charcoal);
  font: 950 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .07em;
}
.interruption-progress i {
  margin: 0 18px;
  font-size: 25px;
  font-style: normal;
}
.interruption-progress strong {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  padding: 0 28px;
  background: var(--magenta);
  color: #08080d;
  box-shadow: -8px 0 0 #08080d;
  font-size: 20px;
  transform: skewX(-7deg);
}
.interruption-progress strong span { font-size: 30px; }
.interruption-stage {
  position: absolute;
  z-index: 3;
  inset: 67px 0 0;
}
.interruption-copy {
  position: absolute;
  z-index: 7;
  left: 72px;
  top: 75px;
  width: 945px;
}
.interruption-kicker {
  display: inline-block;
  margin: 0 0 27px 13px;
  padding: 9px 17px 8px;
  border: 4px solid var(--paper);
  background: #08080d;
  box-shadow: 7px 7px 0 var(--cyan);
  color: var(--paper);
  font: 1000 22px/1 "Avenir Next", Avenir, sans-serif;
  letter-spacing: .11em;
  transform: rotate(-1.5deg);
}
.interruption-kicker span {
  color: var(--yellow);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.interruption-bubble {
  --mb-width: 930px;
  filter: drop-shadow(13px 14px 0 var(--magenta)) drop-shadow(5px 5px 0 #08080d);
  transform: rotate(-1deg);
}
.interruption-bubble .mb__body {
  min-height: 315px;
  padding: 50px 82px 49px 63px;
  text-align: left;
}
.interruption-bubble .mb__text {
  color: #101116;
  font-size: 57px;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: none;
}
.interruption-bubble .mb__text em {
  color: #b32268;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 8px;
  text-underline-offset: 5px;
}
.interruption-preface {
  margin-bottom: 17px !important;
  color: #53635f;
  font: 900 23px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.interruption-subtext {
  width: max-content;
  margin: 30px 0 0 32px !important;
  padding: 10px 19px;
  border: 3px solid var(--paper);
  background: var(--cyan);
  color: #08080d;
  box-shadow: 6px 6px 0 var(--paper);
  font: 1000 27px/1 "Avenir Next", Avenir, sans-serif;
  transform: rotate(1.5deg);
}
.enterprise-jabs {
  position: absolute;
  z-index: 8;
  left: 245px;
  top: 510px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 17px;
  width: 675px;
}
.enterprise-jabs span {
  display: block;
  min-width: 202px;
  padding: 10px 13px 11px;
  border: 3px solid #08080d;
  background: var(--paper);
  color: #08080d;
  box-shadow: 6px 6px 0 var(--yellow);
  transform: rotate(-1.5deg);
}
.enterprise-jabs span:nth-child(2) {
  margin-top: 15px;
  box-shadow: 6px 6px 0 var(--cyan);
  transform: rotate(1deg);
}
.enterprise-jabs span:nth-child(3) {
  margin-top: -3px;
  box-shadow: 6px 6px 0 var(--magenta);
  transform: rotate(-.5deg);
}
.enterprise-jabs span:nth-child(4) {
  margin: 1px 0 0 10px;
  box-shadow: 6px 6px 0 var(--magenta);
  transform: rotate(.8deg);
}
.enterprise-jabs span:nth-child(5) {
  margin-top: 11px;
  box-shadow: 6px 6px 0 var(--yellow);
  transform: rotate(-1.2deg);
}
.enterprise-jabs span:nth-child(6) {
  margin-top: -1px;
  box-shadow: 6px 6px 0 var(--cyan);
  transform: rotate(1.4deg);
}
.enterprise-jabs small,
.enterprise-jabs strong { display: block; }
.enterprise-jabs small {
  color: #a52060;
  font: 950 11px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.enterprise-jabs strong {
  margin-top: 5px;
  color: #08080d;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}
.interruption-developer {
  position: absolute;
  z-index: 5;
  right: -18px;
  bottom: -84px;
  width: 620px;
  height: 770px;
}
.interruption-developer > img {
  position: absolute;
  z-index: 4;
  right: -46px;
  bottom: -20px;
  width: 565px;
  max-width: none;
  max-height: none;
  filter: drop-shadow(-10px 7px 0 #08080d) drop-shadow(-16px 0 0 var(--cyan));
}
.developer-window {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 20px;
  width: 475px;
  height: 175px;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 11px;
  background: #151b27;
  box-shadow: 9px 9px 0 var(--magenta);
  color: #dce8e4;
  transform: rotate(2deg);
}
.developer-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 43px;
  padding: 0 13px;
  border-bottom: 3px solid #08080d;
  background: #273143;
}
.developer-window-bar i { width: 13px; height: 13px; border-radius: 50%; background: var(--magenta); }
.developer-window-bar i:nth-child(2) { background: var(--yellow); }
.developer-window-bar i:nth-child(3) { background: var(--cyan); }
.developer-window-bar span {
  margin-left: 8px;
  color: #dce8e4;
  font: 800 14px/1 ui-monospace, monospace;
}
.developer-window code {
  display: block;
  padding: 34px 22px;
  color: #dce8e4;
  font-size: 16px;
  white-space: nowrap;
}
.developer-window code b { color: var(--magenta); }
.developer-window code span { color: var(--yellow); }
.developer-id {
  position: absolute;
  z-index: 8;
  right: 51px;
  bottom: 150px;
  width: 395px;
  padding: 14px 21px 16px;
  border: 4px solid #08080d;
  background: var(--paper);
  color: var(--charcoal);
  box-shadow: 8px 8px 0 var(--yellow);
  transform: rotate(-2.2deg);
}
.developer-id small,
.developer-id span { display: block; }
.developer-id small {
  color: #a52060;
  font: 950 13px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}
.developer-id strong {
  display: block;
  margin-top: 5px;
  color: #08080d;
  font-size: 32px;
  line-height: 1;
}
.developer-id span {
  margin-top: 7px;
  color: #53635f;
  font: 800 14px/1.15 ui-monospace, monospace;
}
.interruption-sfx {
  position: absolute;
  z-index: 12;
  right: 16px;
  top: 66px;
  color: var(--magenta);
  font: 1000 76px/.85 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.08em;
  -webkit-text-stroke: 2px #08080d;
  text-shadow: 5px 5px 0 #08080d;
  transform: rotate(8deg);
}
.interruption-sfx small {
  display: block;
  width: max-content;
  margin: 11px 7px 0 auto;
  padding: 5px 9px;
  border: 2px solid var(--paper);
  background: #08080d;
  color: var(--paper);
  font: 950 12px/1 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Keyboard Keyboard 14b: the skeptic returns as a would-be keyboard builder. */
.interruption-slide--builder .interruption-bubble .mb__text {
  font-size: 53px;
}
.interruption-slide--builder .interruption-developer > img {
  right: 68px;
  bottom: -4px;
  width: auto;
  height: 735px;
}
.interruption-slide--firmware .interruption-bubble .mb__text {
  font-size: 55px;
}
.interruption-slide--corporate .developer-window code {
  font-size: 19px;
}
.interruption-slide--corporate .developer-id {
  width: 430px;
}
.interruption-slide--corporate .developer-id strong {
  font-size: 27px;
}
.firmware-photo-path {
  position: absolute;
  z-index: 8;
  left: 88px;
  bottom: 62px;
  display: grid;
  grid-template-columns: 268px 47px 268px 47px 268px;
  align-items: center;
  width: 898px;
}
.firmware-path-card {
  position: relative;
  height: 170px;
  margin: 0;
  overflow: hidden;
  border: 4px solid var(--paper);
  background: #101918;
  box-shadow: 7px 7px 0 #08080d;
}
.firmware-path-card--usb { transform: rotate(-1deg); }
.firmware-path-card--probe { transform: rotate(.8deg); }
.firmware-path-card--mcu { transform: rotate(-.65deg); }
.firmware-path-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.firmware-path-card--usb img { object-position: center 42%; }
.firmware-path-card--probe img { object-fit: contain; background: #f7f7f7; }
.firmware-path-card--mcu img { object-position: center 37%; }
.firmware-path-card figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 10px;
  padding: 8px 10px 7px;
  border-top: 3px solid #08080d;
  background: rgba(8,8,13,.94);
  color: var(--paper);
}
.firmware-path-card figcaption b { color: var(--yellow); font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .06em; }
.firmware-path-card figcaption span { color: var(--cyan); font: 1000 13px/1 ui-monospace, monospace; }
.firmware-path-card figcaption small { grid-column: 1 / -1; color: #b8c8c2; font: 800 8px/1 ui-monospace, monospace; }
.firmware-path-arrow {
  color: var(--magenta);
  font: 1000 40px/1 ui-monospace, monospace;
  text-align: center;
  -webkit-text-stroke: 2px #08080d;
  text-shadow: 3px 3px 0 #08080d;
}
.interruption-slide--midi .interruption-developer > img {
  width: auto;
  height: 760px;
}
.interruption-slide--mapping .interruption-developer > img {
  width: auto;
  height: 760px;
}
.interruption-slide--mapping .interruption-bubble .mb__text {
  font-size: 52px;
}
.interruption-slide--sales .interruption-bubble .mb__text {
  font-size: 64px;
}
.interruption-slide--postfab .interruption-copy {
  width: 900px;
}
.interruption-slide--postfab .interruption-bubble {
  --mb-width: 885px;
}
.interruption-slide--postfab .interruption-bubble .mb__body {
  min-height: 292px;
}
.interruption-slide--postfab .interruption-bubble .mb__text {
  font-size: 68px;
}
.interruption-slide--postfab .interruption-developer {
  right: -8px;
  bottom: -70px;
  width: 610px;
  height: 795px;
}
.interruption-slide--postfab .interruption-developer > img {
  right: 62px;
  bottom: -8px;
  width: auto;
  height: 735px;
  filter: drop-shadow(-9px 7px 0 #08080d) drop-shadow(-15px 0 0 var(--cyan));
}
.interruption-slide--postfab .developer-window {
  top: 4px;
  right: 8px;
}
.interruption-slide--postfab .developer-window code {
  font-size: 18px;
}
.interruption-slide--postfab .developer-id {
  right: 18px;
  bottom: 160px;
  width: 460px;
}
.interruption-slide--postfab .developer-id strong {
  font-size: 25px;
}
.interruption-slide--postfab .interruption-sfx {
  right: 22px;
}

.fork-panel-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; }
.fork-panel { min-height: 330px; padding-bottom: 58px; }
.fork-panel:nth-child(1) { transform: rotate(-1.1deg); }
.fork-panel:nth-child(2) { transform: rotate(.9deg); }
.fork-panel .usb-icon { margin: 2px 0 16px; }
.fork-panel .midi-build-image {
  width: 280px;
  height: 124px;
  margin: 2px 0 16px;
  overflow: hidden;
  border: 4px solid #08080d;
  border-radius: 8px;
  background: #08080d;
  box-shadow: 6px 6px 0 var(--tone);
  transform: rotate(-1.5deg);
}
.fork-panel .midi-build-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fork-panel .jp-line { font-size: 24px; }
.fork-constraint span { margin-right: 14px; font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }

.manga-quote-stage { display: grid; place-items: center; height: 610px; text-align: center; }
.manga-quote-stage h2 { max-width: 1320px; font-size: 82px; text-transform: uppercase; }
.manga-quote {
  min-width: 960px;
  margin-top: 50px;
  padding: 36px 56px;
  border: 6px solid #08080d;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 14px 14px 0 var(--magenta);
  font-size: 54px;
  font-weight: 950;
  text-transform: uppercase;
}
.manga-quote .jp-quote {
  display: block;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 58px;
}
.manga-quote .en-translation { display: block; margin-top: 14px; font-size: 27px; color: #52665f; text-transform: none; }
.manga-kicker {
  display: inline-block;
  margin-bottom: 24px;
  padding: 9px 17px;
  border: 4px solid var(--paper);
  background: var(--magenta);
  box-shadow: 7px 7px 0 #000;
  font: 950 24px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  transform: rotate(-1.5deg);
}
.guitar-flare .manga-quote-stage { height: 748px; align-items: start; padding-top: 8px; }
.guitar-content { position: relative; width: 100%; text-align: center; }
.character-cameo {
  position: absolute;
  z-index: 6;
  right: -62px;
  top: 60px;
  width: 285px;
  max-height: 360px;
  object-fit: contain;
  transform: rotate(3deg);
  filter: drop-shadow(8px 9px 0 #08080d) drop-shadow(-5px 0 0 var(--cyan));
  pointer-events: none;
}
.guitar-flare .manga-quote-stage h2 {
  font-size: 76px;
  text-shadow: -6px 0 var(--cyan), 6px 7px var(--magenta), 10px 11px 0 #000;
}
.guitar-flare .manga-quote {
  min-width: 1180px;
  margin-top: 28px;
  padding: 24px 48px;
  box-shadow: 12px 12px 0 var(--magenta), 20px 20px 0 var(--cyan), 26px 26px 0 #08080d;
  transform: rotate(-1deg);
}
.guitar-flare .manga-quote .jp-quote { font-size: 50px; }
.fretboard {
  position: relative;
  width: 1120px;
  height: 148px;
  margin: 35px auto 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 10px;
  background-color: #172522;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 16px, rgba(255,255,255,.55) 17px 19px),
    repeating-linear-gradient(90deg, transparent 0 91px, rgba(255,211,79,.5) 92px 96px);
  box-shadow: 10px 10px 0 var(--yellow), 16px 16px 0 #08080d;
  transform: skewX(-3deg);
}
.shape-cluster { position: absolute; top: 9px; width: 120px; height: 126px; transform: skewX(3deg); }
.shape-cluster.pos-a { left: 95px; }
.shape-cluster.pos-b { left: 500px; }
.shape-cluster.pos-c { left: 895px; }
.shape-cluster i {
  position: absolute;
  width: 27px;
  height: 27px;
  border: 4px solid #08080d;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 3px 3px 0 var(--cyan);
}
.shape-cluster i:nth-child(1) { left: 17px; top: 4px; }
.shape-cluster i:nth-child(2) { left: 45px; top: 30px; }
.shape-cluster i:nth-child(3) { left: 73px; top: 56px; }
.shape-cluster span {
  position: absolute;
  left: 0;
  top: 100px;
  padding: 4px 8px;
  background: var(--paper);
  color: var(--ink);
  font: 950 13px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.shape-arrow { position: absolute; top: 32px; color: var(--yellow); font: 1000 66px/1 ui-monospace, monospace; text-shadow: 4px 4px 0 #000; transform: skewX(3deg); }
.shape-arrow.arrow-a { left: 331px; }
.shape-arrow.arrow-b { left: 730px; }
.guitar-sfx {
  position: absolute;
  z-index: 7;
  right: -34px;
  bottom: -65px;
  color: var(--magenta);
  font: 1000 78px/.8 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  -webkit-text-stroke: 2px #08080d;
  text-shadow: 6px 6px 0 #000, 11px 11px 0 var(--cyan);
  transform: rotate(-9deg);
}
.guitar-sfx small {
  display: block;
  width: max-content;
  margin: 10px 0 0 auto;
  padding: 6px 10px;
  border: 2px solid var(--paper);
  background: #08080d;
  color: var(--paper);
  font: 950 13px/1 ui-monospace, monospace;
  letter-spacing: .1em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.manga-cameo-slide .slide-head h2 { max-width: 970px; }
.manga-cameo {
  --callout-tone: var(--magenta);
  --callout-soft: rgba(242,90,162,.15);
  position: absolute;
  z-index: 6;
  right: 62px;
  top: 54px;
  width: 405px;
  height: 128px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(7deg);
}
.manga-cameo::before {
  content: attr(data-sfx);
  position: absolute;
  z-index: 3;
  right: -25px;
  top: -39px;
  color: var(--callout-tone);
  font: 1000 30px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.04em;
  text-shadow: 3px 3px 0 #000;
  transform: rotate(10deg);
}
.manga-bubble {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 17px 26px;
  border: 6px solid #08080d;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  box-shadow: 11px 11px 0 var(--callout-tone), 17px 17px 0 #08080d;
}
.manga-bubble::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.manga-bubble .jp-text {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--callout-tone);
  font: 1000 28px/.98 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .025em;
}
.manga-bubble .en-text {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 9px;
  font: 950 14px/1 ui-monospace, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.manga-cameo.callout-insight { --callout-tone: #008b95; --callout-soft: rgba(0,139,149,.17); }
.manga-cameo.callout-insight .manga-bubble::before { background: repeating-conic-gradient(from 5deg at 86% 72%, transparent 0 12deg, var(--callout-soft) 12deg 15deg); }
.manga-cameo.callout-warning { --callout-tone: #d94752; --callout-soft: rgba(217,71,82,.16); }
.manga-cameo.callout-warning .manga-bubble::before { background: repeating-linear-gradient(64deg, transparent 0 22px, var(--callout-soft) 23px 30px, transparent 31px 47px); }
.manga-cameo.callout-question { --callout-tone: #b97800; --callout-soft: rgba(255,211,79,.34); }
.manga-cameo.callout-question .manga-bubble::before { content: "?"; inset: auto 12px -58px auto; color: var(--callout-soft); font: 1000 190px/.8 ui-monospace, monospace; transform: rotate(8deg); }
.manga-cameo.callout-system { --callout-tone: #7257c2; --callout-soft: rgba(114,87,194,.16); }
.manga-cameo.callout-system .manga-bubble::before { background-image: linear-gradient(var(--callout-soft) 2px, transparent 2px), linear-gradient(90deg, var(--callout-soft) 2px, transparent 2px); background-size: 24px 24px; }
.manga-cameo.callout-success { --callout-tone: #248f56; --callout-soft: rgba(36,143,86,.18); }
.manga-cameo.callout-success .manga-bubble::before { background: repeating-conic-gradient(from 3deg at 84% 72%, transparent 0 10deg, var(--callout-soft) 10deg 13deg); }
.manga-cameo.callout-time { --callout-tone: #d06f15; --callout-soft: rgba(208,111,21,.18); }
.manga-cameo.callout-time .manga-bubble::before { background: repeating-radial-gradient(circle at 85% 72%, transparent 0 19px, var(--callout-soft) 20px 26px, transparent 27px 43px); }
.manga-cameo.callout-boundary { --callout-tone: #c83f88; --callout-soft: rgba(200,63,136,.21); }
.manga-cameo.callout-boundary .manga-bubble::before { inset: 10px; border: 4px dashed var(--callout-soft); }
.manga-cameo.callout-safety { --callout-tone: #2d8c62; --callout-soft: rgba(255,211,79,.25); }
.manga-cameo.callout-safety .manga-bubble::before { background: repeating-linear-gradient(-45deg, transparent 0 21px, var(--callout-soft) 22px 31px, transparent 32px 48px); }

.manga-objective { display: grid !important; place-items: center; text-align: center !important; }
.manga-objective .objective-inner { position: relative; z-index: 3; width: 1100px; }
.objective-stamp {
  display: inline-block;
  padding: 12px 22px;
  border: 5px solid var(--paper);
  background: var(--magenta);
  box-shadow: 9px 9px 0 #000;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.objective-title {
  margin-top: 76px;
  color: var(--paper);
  font-size: 86px;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: -7px 0 var(--cyan), 7px 7px var(--magenta);
}
.objective-jp {
  margin-top: 60px;
  color: var(--cyan);
  font: 1000 42px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .14em;
  text-shadow: 4px 4px 0 #000;
}
.objective-jp + .objective-title { margin-top: 20px; }
.objective-card {
  margin: 94px auto 0;
  padding: 38px 50px;
  border: 6px solid #08080d;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 15px 15px 0 var(--cyan);
  font-size: 70px;
  font-weight: 1000;
  text-transform: uppercase;
}
.objective-card .jp-objective { display: block; font: 1000 52px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.objective-card .en-objective { display: block; margin-top: 15px; font-size: 31px; }
.objective-status { margin-top: 72px !important; color: var(--cream); font-size: 29px !important; font-weight: 800; }
.chapter-jp {
  display: block;
  margin-top: 24px;
  color: var(--cyan);
  font: 950 31px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .12em;
  text-shadow: 3px 3px 0 #000;
}
.manga-objective.present .objective-stamp { animation: floatStamp 4.5s ease-in-out infinite; }
.manga-objective.present .objective-title { animation: chromaDrift 5.5s ease-in-out infinite; }
.manga-objective.present .objective-card { animation: objectivePulse 3.8s ease-in-out infinite; }
.manga-objective.present .objective-status.visible { animation: statusBlink 2.4s ease-in-out infinite; }
.reveal .slides section.manga-objective .objective-reaction {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.reveal .slides section.manga-objective:not(:has(.objective-card.visible)) .objective-reaction--waiting,
.reveal .slides section.manga-objective:has(.objective-card.visible):not(:has(.objective-status.visible)) .objective-reaction--revealed,
.reveal .slides section.manga-objective:has(.objective-status.visible) .objective-reaction--loading {
  opacity: .34;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s;
}
.manga-cameo.visible { animation: cameoFloat 5.2s ease-in-out infinite; }
.piano-visual {
  position: relative;
  width: 540px;
  height: 190px;
  margin: 14px auto 28px;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, #fffdf4 0 40px, var(--charcoal) 40px 44px);
  box-shadow: 9px 9px 0 var(--charcoal);
}
.piano-visual::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 112px;
  background: repeating-linear-gradient(90deg, transparent 0 28px, var(--charcoal) 28px 48px, transparent 48px 76px);
}
.hardware-photo {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  border: 6px solid var(--charcoal);
  border-radius: 18px;
  background: #d8d3c6;
  box-shadow: 14px 14px 0 var(--forest);
}
.arch-grid {
  display: grid;
  grid-template-columns: 1fr 90px 1.15fr 90px 1.15fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px 14px;
  align-items: center;
  width: 1280px;
}
.arch-node {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 22px;
  border: 4px solid var(--charcoal);
  border-radius: 14px;
  background: var(--mint);
  box-shadow: var(--shadow-small);
  text-align: center;
  font-size: 25px;
  font-weight: 900;
  color: var(--ink);
}
.arch-node.dark { background: var(--charcoal); color: var(--paper); }
.arch-node.yellow { background: var(--yellow); }
.arch-node.magenta { background: #ffd7ea; }
.arch-arrow { color: var(--magenta); text-align: center; font-size: 48px; font-weight: 950; }
.state.detail { width: 290px; font-size: 21px; }

.pipeline { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.pipeline.vertical { flex-direction: column; align-items: stretch; max-width: 720px; }
.pipeline-step { display: grid; place-items: center; min-width: 150px; min-height: 105px; padding: 18px; border: 4px solid var(--charcoal); border-radius: 12px; background: var(--mint); color: var(--ink); box-shadow: 7px 7px 0 var(--charcoal); text-align: center; font-size: 24px; font-weight: 900; }
.pipeline-arrow { display: grid; place-items: center; min-width: 42px; color: var(--magenta); font-size: 44px; font-weight: 950; }
.pipeline.vertical .pipeline-arrow { min-height: 28px; transform: rotate(90deg); }

.terminal { padding: 28px 34px; background: #101918; color: #d7ffe7; font: 800 24px/1.5 ui-monospace, monospace; box-shadow: 10px 10px 0 var(--cyan); }
.terminal .prompt { color: var(--cyan); }
.terminal .warn { color: var(--yellow); }
.terminal .error { color: #ff7c86; }
.codeblock { margin: 0; padding: 30px !important; min-height: 470px; border: 4px solid var(--charcoal); border-radius: 14px; background: #101918 !important; box-shadow: 10px 10px 0 var(--cyan); font-size: var(--code) !important; line-height: 1.42 !important; }

.tradeoff { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 4px solid var(--charcoal); border-radius: 14px; box-shadow: var(--shadow-small); color: var(--ink); }
.trade-col { padding: 28px 34px; }
.trade-col:first-child { background: var(--mint); }
.trade-col:last-child { background: #ffe0e3; border-left: 4px solid var(--charcoal); }
.trade-col h3 { margin-bottom: 18px; }
.trade-col p { margin: 7px 0; font-weight: 750; }

.usb-icon { width: 120px; margin-bottom: 16px; filter: drop-shadow(5px 6px 0 rgba(8,8,13,.35)); }
.usb-icon img { display: block; width: 100%; height: auto; }

.black-keys-stage {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 66px;
  align-items: center;
  height: 570px;
}
.black-keys-portrait {
  position: relative;
  height: 520px;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--charcoal);
  border-radius: 18px;
  background:
    repeating-conic-gradient(from -8deg at 50% 48%, transparent 0 11deg, rgba(242,90,162,.12) 11deg 14deg),
    var(--cream);
  box-shadow: 14px 14px 0 var(--magenta), 21px 21px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.black-keys-portrait::before {
  content: "?!";
  position: absolute;
  right: 18px;
  top: -26px;
  color: rgba(242,90,162,.2);
  font: 1000 235px/.9 ui-monospace, monospace;
  transform: rotate(8deg);
}
.black-keys-portrait img {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 76px;
  width: 610px;
  height: 440px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(9px 10px 0 rgba(0,0,0,.46));
  transform: translateX(-50%);
}
.character-nameplate {
  position: absolute;
  z-index: 3;
  left: 20px;
  top: 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 13px;
  border: 3px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--charcoal);
  transform: rotate(-2deg);
}
.character-nameplate b { font-size: 21px; letter-spacing: .09em; }
.character-nameplate small { font: 900 18px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.black-keys-portrait figcaption {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 15px 30px;
  border-top: 5px solid var(--charcoal);
  background: var(--paper);
  color: var(--ink);
  font-size: 26px;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
}
.black-keys-copy { display: grid; align-content: center; gap: 24px; }
.argument-kicker {
  width: max-content;
  padding: 8px 13px;
  border: 3px solid var(--charcoal);
  border-radius: 999px;
  background: var(--mint);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.black-keys-copy .big-copy { max-width: 680px; font-size: 51px; line-height: 1.02; }
.geometry-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.geometry-contrast div {
  padding: 18px 20px;
  border: 4px solid var(--charcoal);
  border-radius: 12px;
  box-shadow: 7px 7px 0 var(--charcoal);
}
.geometry-contrast div:first-child { background: var(--cream); }
.geometry-contrast div:last-child { background: var(--cyan); }
.geometry-contrast span { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 950; letter-spacing: .08em; }
.geometry-contrast strong { display: block; color: var(--ink); font-size: 26px; line-height: 1.05; }
.black-keys-takeaway {
  max-width: 690px;
  padding-left: 18px;
  border-left: 7px solid var(--magenta);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}

.keybed {
  position: relative;
  width: max-content;
  max-width: none;
  padding: 60px 48px 42px;
  border: 6px solid var(--charcoal);
  border-radius: 22px 22px 30px 30px;
  background:
    radial-gradient(circle at 22px 22px, #79766c 0 3px, #252b29 4px 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 22px) 22px, #79766c 0 3px, #252b29 4px 6px, transparent 7px),
    radial-gradient(circle at 22px calc(100% - 22px), #79766c 0 3px, #252b29 4px 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px), #79766c 0 3px, #252b29 4px 6px, transparent 7px),
    linear-gradient(180deg, #ded9c8 0%, #c7c1ae 72%, #aaa38f 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.28), 10px 12px 0 #716c5d, 20px 24px 0 var(--forest), 26px 30px 0 rgba(0,0,0,.55);
  transform: perspective(1100px) rotateX(5deg);
}
.keybed::before {
  content: "WICKI–HAYDEN  //  NOTE MAP";
  position: absolute;
  left: 48px;
  top: 20px;
  color: #565b54;
  font: 950 12px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}
.keybed::after {
  content: "●  ●  ●";
  position: absolute;
  right: 48px;
  top: 17px;
  color: var(--cyan);
  font: 900 13px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  text-shadow: 0 0 7px rgba(53,214,208,.75);
}
.key-row { display: flex; gap: 10px; margin: 10px 0; }
.key-row.stagger-a { margin-left: 46px; }
.key-row.stagger-b { margin-left: 92px; }
.key {
  display: grid;
  place-items: center;
  width: 82px;
  height: 64px;
  border: 3px solid var(--charcoal);
  border-bottom-width: 5px;
  border-radius: 10px 10px 13px 13px;
  background: linear-gradient(180deg, #fffdf5 0%, var(--cream) 78%);
  box-shadow: 0 7px 0 #706d60, inset 0 2px 0 rgba(255,255,255,.7);
  font: 900 21px/1 ui-monospace, monospace;
}
.key.note { background: linear-gradient(180deg, #d8ead8 0%, var(--mint) 78%); }
.key.note.alt { background: linear-gradient(180deg, #b8cbb8 0%, var(--sage) 78%); color: #10251d; }
.key.wide { width: 106px; }
.key.space { width: 310px; }
.key.highlight { background: linear-gradient(180deg, #ffe789 0%, var(--yellow) 78%); transform: translateY(-5px); box-shadow: 0 12px 0 #706d60, 0 0 0 5px var(--magenta), 0 0 22px rgba(242,90,162,.35); }

.coordinate-plane { position: relative; width: 1130px; height: 500px; border: 5px solid var(--charcoal); border-radius: 22px; background-color: #e6f0e4; background-image: linear-gradient(rgba(31,64,52,.15) 2px, transparent 2px), linear-gradient(90deg, rgba(31,64,52,.15) 2px, transparent 2px); background-size: 40px 40px; box-shadow: 14px 14px 0 var(--forest); }
.coord-key { position: absolute; width: 68px; height: 46px; display: grid; place-items: center; border: 3px solid var(--forest); border-radius: 6px; background: var(--paper); color: var(--ink); font: 900 16px/1 ui-monospace, monospace; }
.mount { position: absolute; width: 26px; height: 26px; border: 6px solid var(--magenta); border-radius: 50%; background: var(--paper); }
.case-line { position: absolute; inset: 24px; border: 3px dashed var(--forest); border-radius: 30px; }

.pcb { position: relative; width: 1130px; height: 510px; border: 6px solid var(--charcoal); border-radius: 24px; background: #225d45; box-shadow: 16px 16px 0 var(--charcoal); overflow: hidden; }
.pcb::before { content: ""; position: absolute; inset: 0; opacity: .48; background: repeating-linear-gradient(12deg, transparent 0 30px, #f3bd56 31px 34px, transparent 35px 54px), repeating-linear-gradient(98deg, transparent 0 45px, #92d3c7 46px 49px, transparent 50px 78px); }
.chip, .sensor, .connector { position: absolute; display: grid; place-items: center; border: 4px solid #101918; background: #e7e3d0; color: var(--charcoal); font: 900 17px/1 ui-monospace, monospace; z-index: 2; }
.chip { left: 475px; top: 200px; width: 180px; height: 110px; background: #1b2422; color: var(--paper); }
.sensor { width: 52px; height: 52px; border-radius: 8px; }
.connector { right: 36px; top: 40px; width: 150px; height: 62px; }

.explode { display: flex; align-items: center; justify-content: center; gap: 20px; perspective: 900px; }
.layer { width: 230px; height: 330px; display: grid; place-items: center; border: 5px solid var(--charcoal); border-radius: 18px; background: var(--mint); color: var(--ink); box-shadow: 10px 10px 0 var(--charcoal); text-align: center; font-size: 26px; font-weight: 900; transform: rotateY(-11deg); }
.layer:nth-child(even) { background: var(--cream); transform: rotateY(11deg); }
.layer-arrow { font-size: 48px; color: var(--magenta); font-weight: 950; }

.hall-viz { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; width: 1200px; }
.magnet-stage { position: relative; height: 500px; border: 5px solid var(--charcoal); border-radius: 22px; background: var(--cream); box-shadow: var(--shadow-small); }
.magnet { position: absolute; left: 180px; top: 80px; width: 190px; height: 90px; border: 5px solid var(--charcoal); border-radius: 12px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); color: white; display: flex; justify-content: space-around; align-items: center; font-size: 32px; font-weight: 950; }
.hall-sensor { position: absolute; left: 208px; bottom: 70px; width: 135px; height: 62px; border: 5px solid var(--charcoal); background: var(--forest); color: var(--paper); display: grid; place-items: center; font: 900 20px/1 ui-monospace, monospace; }
.field { position: absolute; left: 125px; top: 130px; width: 300px; height: 250px; border: 5px solid var(--cyan); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; opacity: .75; }
.field.f2 { inset: 160px auto auto 152px; width: 245px; height: 190px; }
.distance { position: absolute; left: 425px; top: 185px; font: 900 20px/1.2 ui-monospace, monospace; color: var(--forest); }

.chart { position: relative; width: 720px; height: 460px; border-left: 5px solid var(--charcoal); border-bottom: 5px solid var(--charcoal); background: repeating-linear-gradient(0deg, transparent 0 72px, rgba(31,64,52,.13) 73px 75px), repeating-linear-gradient(90deg, transparent 0 105px, rgba(31,64,52,.13) 106px 108px); }
.chart .curve { position: absolute; left: 38px; bottom: 35px; width: 620px; height: 330px; border-top: 10px solid var(--magenta); border-radius: 58% 42% 0 0; transform: skewY(-16deg) rotate(-3deg); }
.chart .release { border-top-color: var(--cyan); left: 42px; bottom: 18px; opacity: .8; transform: skewY(-15deg) rotate(-1deg); }
.chart-label { position: absolute; font: 900 18px/1 ui-monospace, monospace; }
.axis-x { right: 0; bottom: -40px; }
.axis-y { left: -86px; top: 12px; transform: rotate(-90deg); }

.state-machine { display: flex; align-items: center; gap: 14px; }
.state { width: 210px; min-height: 120px; display: grid; place-items: center; padding: 16px; border: 5px solid var(--charcoal); border-radius: 999px; background: var(--mint); color: var(--ink); box-shadow: 7px 7px 0 var(--charcoal); text-align: center; font: 950 23px/1.1 ui-monospace, monospace; }
.state.active { background: var(--yellow); }
.arrow { color: var(--magenta); font-size: 45px; font-weight: 950; }

.latency { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 1200px; }
.latency .card { position: relative; min-height: 145px; display: grid; place-items: center; text-align: center; font-weight: 900; }
.latency .card::after { content: "→"; position: absolute; right: -27px; color: var(--magenta); font-size: 36px; z-index: 2; }
.latency .card:nth-child(4)::after, .latency .card:nth-child(8)::after { display: none; }

.voice-tree { display: grid; grid-template-columns: 350px 1fr; align-items: center; gap: 90px; width: 1000px; }
.voice-source { padding: 42px; border: 5px solid var(--charcoal); border-radius: 50%; background: var(--magenta); color: white; text-align: center; font-size: 32px; font-weight: 950; box-shadow: var(--shadow-small); }
.voices { display: grid; gap: 18px; }
.voice { padding: 18px 30px; border: 4px solid var(--charcoal); border-radius: 12px; background: var(--mint); color: var(--ink); box-shadow: 6px 6px 0 var(--charcoal); font-size: 25px; font-weight: 900; }

.mapping { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.mapping td { padding: 14px 20px; border-top: 3px solid var(--charcoal); border-bottom: 3px solid var(--charcoal); background: var(--paper); color: var(--ink); font-size: 24px; font-weight: 800; }
.mapping td:first-child { border-left: 3px solid var(--charcoal); border-radius: 10px 0 0 10px; }
.mapping td:nth-child(2) { width: 80px; text-align: center; color: var(--magenta); }
.mapping td:last-child { border-right: 3px solid var(--charcoal); border-radius: 0 10px 10px 0; background: var(--mint); }

.bug-card { position: relative; min-height: 210px; padding: 26px; background: #ffe0e3; color: var(--ink); }
.bug-card::before { content: "BUG UNLOCKED"; display: inline-block; margin-bottom: 18px; padding: 5px 9px; background: var(--red); color: white; font: 950 16px/1 ui-monospace, monospace; }
.bug-card h3 { font-size: 29px; }
.bug-illegal-reaction {
  position: absolute;
  z-index: 5;
  right: -28px;
  bottom: -32px;
  width: 132px;
  height: auto;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.62));
  transform: rotate(-7deg);
}

.production-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}
.issue-wall {
  position: relative;
  min-height: 504px;
  overflow: visible;
}
.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 92px);
  gap: 11px;
}
.issue-card {
  --issue-tone: var(--magenta);
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 3px solid #08080d;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--issue-tone);
}
.issue-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  border: 15px solid color-mix(in srgb, var(--issue-tone) 22%, transparent);
  border-radius: 50%;
}
.issue-card span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 3px 6px;
  background: var(--issue-tone);
  color: var(--paper);
  font: 950 11px/1 ui-monospace, monospace;
  letter-spacing: .06em;
}
.issue-card h3 { position: relative; z-index: 1; margin-top: 8px; font-size: 20px; line-height: 1.03; }
.issue-card[data-tone="physical"] { --issue-tone: #57775e; }
.issue-card[data-tone="warning"] { --issue-tone: #d94752; background: #ffe4e6; }
.issue-card[data-tone="signal"] { --issue-tone: #008b95; }
.issue-card[data-tone="system"] { --issue-tone: #7257c2; }
.issue-card[data-tone="business"] { --issue-tone: #b97800; background: #fff3bd; }
.issue-card[data-tone="insight"] { --issue-tone: #159b98; }
.issue-card[data-tone="external"] { --issue-tone: #c83f88; background: #ffe1ef; }
.issue-card[data-tone="question"] { --issue-tone: #a86e00; background: #fff0ad; }
.issue-card:nth-child(3n+1) { transform: rotate(-.7deg); }
.issue-card:nth-child(3n+2) { transform: translateY(2px) rotate(.5deg); }
.issue-card:nth-child(3n) { transform: rotate(.8deg); }
.issue-chaos {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.issue-chaos .issue-card {
  position: absolute;
  z-index: var(--z);
  left: var(--x);
  top: var(--y);
  width: var(--w, 340px);
  min-height: 86px;
  transform: rotate(var(--r));
  box-shadow: 7px 7px 0 var(--issue-tone), 11px 11px 0 rgba(8,8,13,.72);
}
.issue-chaos .issue-card h3 { font-size: 19px; }
.boss-decision { position: relative; }
.boss-decision .quest-card { min-height: 330px; display: grid; align-content: center; }
.scope-stamp {
  position: absolute;
  z-index: 5;
  right: -22px;
  bottom: -72px;
  width: 440px;
  padding: 18px 24px;
  border: 6px solid #08080d;
  background: var(--red);
  color: var(--paper);
  box-shadow: 12px 12px 0 var(--yellow), 18px 18px 0 #08080d;
  text-align: center;
  transform: rotate(-7deg);
}
.scope-stamp span { display: block; font: 1000 46px/.95 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.scope-stamp small { display: block; margin-top: 10px; font: 950 14px/1 ui-monospace, monospace; letter-spacing: .1em; }
.production-buried-character {
  position: absolute;
  z-index: 2;
  right: 110px;
  bottom: -115px;
  width: auto;
  height: 610px;
  max-width: none;
  max-height: none;
  filter: drop-shadow(-9px 7px 0 #08080d) drop-shadow(-15px 0 0 var(--cyan));
  pointer-events: none;
}
.production-character--confident {
  transition: opacity 180ms ease, visibility 0s;
}
.production-character--overwhelmed {
  z-index: 21;
  right: 430px;
  bottom: -38px;
  height: 480px;
  filter: drop-shadow(-9px 7px 0 #08080d) drop-shadow(-15px 0 0 var(--red));
}
.production-boss:has(.production-character--overwhelmed.visible) .production-character--confident {
  opacity: 0;
  visibility: hidden;
}
.production-yamete {
  position: absolute;
  z-index: 22;
  right: -30px;
  top: 42px;
  width: 420px;
  padding: 14px 17px 13px;
  border: 5px solid #08080d;
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--red), 13px 13px 0 #08080d;
  color: #08080d;
  transform: rotate(4deg);
}
.production-yamete span,
.production-yamete strong,
.production-yamete small { display: block; }
.production-yamete span { color: #b32268; font: 1000 24px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.production-yamete strong { margin-top: 4px; font-size: 28px; line-height: 1; }
.production-yamete small { margin-top: 7px; font: 900 13px/1 ui-monospace, monospace; letter-spacing: .03em; }

.status-lights { display: flex; justify-content: center; gap: 34px; margin-top: 55px; }
.status-light { display: flex; align-items: center; gap: 12px; font-size: 23px; font-weight: 900; }
.dot { width: 22px; height: 22px; border: 3px solid white; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.dot.warn { background: var(--yellow); box-shadow: 0 0 18px var(--yellow); }

.quest-log { display: grid; gap: 13px; width: 950px; margin: 34px auto 0; }
.quest-log div { padding: 12px 20px; border-bottom: 3px dashed rgba(255,255,255,.35); font: 850 27px/1.1 ui-monospace, monospace; }
.check { color: var(--cyan); }
.todo { color: var(--yellow); }

.source-caption { position: absolute; right: 76px; bottom: 24px; max-width: 500px; color: #b8cac3; font-size: 16px; }
.big-number { font: 950 160px/1 ui-monospace, monospace; color: var(--magenta); }
.vs { font: 1000 68px/1 ui-monospace, monospace; color: var(--magenta); }
.fragment.highlight-current-blue.current-fragment { color: var(--blue); }

/* Source-first technical deep dive. These layouts keep the real KiCad and Rust
   artifacts legible at 1600×900 without reverting to generic dashboard cards. */
.kicad-board-stage { display: grid; grid-template-rows: 410px 112px; gap: 20px; max-width: 1400px !important; }
.kicad-board-render {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 16px;
  background: linear-gradient(135deg, #17211e, #293d35);
  box-shadow: 11px 11px 0 var(--forest);
}
.kicad-board-render img { display: block; width: 100%; height: 360px; object-fit: contain; filter: brightness(1.28) saturate(1.18); }
.kicad-board-render figcaption,
.kicad-copper-view figcaption {
  position: absolute;
  right: 16px;
  bottom: 13px;
  padding: 6px 10px;
  border: 2px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  font: 900 14px/1 ui-monospace, monospace;
}
.kicad-spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kicad-spec {
  display: grid;
  align-content: center;
  padding: 16px 20px;
  border: 3px solid var(--charcoal);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--sage);
}
.kicad-spec strong { color: var(--forest); font: 1000 31px/1 ui-monospace, monospace; }
.kicad-spec span { margin-top: 8px; color: #52665f; font-size: 17px; font-weight: 850; }

.kicad-routing-stage { display: grid; grid-template-columns: 1.18fr .82fr; gap: 30px; max-width: 1400px !important; }
.kicad-routing-slide .slide-head h2 { max-width: 1400px; font-size: 54px; }
.kicad-copper-view {
  position: relative;
  height: 525px;
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 15px;
  background: #101916;
  box-shadow: 10px 10px 0 var(--cyan);
}
.kicad-copper-view img { display: block; width: 100%; height: 100%; padding: 18px; object-fit: contain; }
.routing-ledger { display: grid; align-content: center; gap: 13px; }
.routing-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  padding: 15px 17px;
  border: 3px solid var(--charcoal);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 5px 5px 0 #087f83;
}
.routing-row.warning { background: #fff0d2; box-shadow-color: var(--red); }
.routing-row b { align-self: start; color: #087f83; font: 950 13px/1 ui-monospace, monospace; letter-spacing: .08em; }
.routing-row strong { color: var(--ink); font-size: 22px; line-height: 1; }
.routing-row span { grid-column: 2; margin-top: 9px; color: #52665f; font-size: 17px; line-height: 1.15; }

.layout-code .content { grid-template-columns: 1.22fr .78fr; }
.layout-code .content > .codeblock { position: relative; min-width: 0; max-width: 100%; overflow: hidden; }
.layout-code .content > .codeblock > code { width: 100% !important; box-sizing: border-box; }
.codeblock.codeblock-deep {
  min-height: 510px;
  padding: 25px !important;
  font-size: 19px !important;
  line-height: 1.31 !important;
  box-shadow: 9px 9px 0 #087f83;
}
.scan-code-slide .slide-head h2 { max-width: 1400px; font-size: 52px; }
.mux-deep-dive,
.filter-deep-dive,
.state-deep-dive,
.scan-budget,
.wire-math { display: grid; align-content: center; gap: 20px; min-width: 0; }
.mux-equation,
.wire-equation {
  padding: 24px;
  border: 4px solid var(--charcoal);
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
}
.mux-equation strong { display: block; color: var(--ink); font: 1000 31px/1 ui-monospace, monospace; }
.mux-equation span { display: block; margin-top: 12px; font-size: 24px; font-weight: 900; }
.mux-equation small { display: block; margin-top: 8px; color: #624c17; font-size: 16px; }
.bit-table { width: 100%; border-collapse: separate; border-spacing: 6px; text-align: center; }
.bit-table th { color: #52665f; font: 950 14px/1 ui-monospace, monospace; }
.bit-table td { padding: 9px; border: 2px solid var(--charcoal); background: var(--paper); font: 950 19px/1 ui-monospace, monospace; }
.mux-deep-dive > p,
.scan-budget > p,
.wire-math > p { color: #52665f; font-size: 21px; line-height: 1.18; font-weight: 850; }

.sample-window { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sample-window i { padding: 14px 8px; border: 3px solid var(--charcoal); background: var(--mint); text-align: center; font: normal 950 23px/1 ui-monospace, monospace; }
.sample-window span { grid-column: 1 / -1; padding: 12px; background: var(--yellow); text-align: center; font: 950 20px/1 ui-monospace, monospace; }
.filter-facts { display: grid; gap: 11px; }
.filter-facts p { padding: 13px 16px; border-left: 8px solid #087f83; background: rgba(184,215,189,.35); font-size: 19px; line-height: 1.14; }
.threshold-rail { display: grid; grid-template-columns: 100fr 50fr 100fr; border: 3px solid var(--charcoal); background: linear-gradient(90deg, var(--mint) 0 40%, var(--yellow) 40% 60%, #ffd7ea 60%); }
.threshold-rail span { padding: 13px 6px; border-right: 2px solid var(--charcoal); text-align: center; font: 900 14px/1 ui-monospace, monospace; }

.state-deep-dive { grid-template-columns: 1fr 58px 1fr 58px 1fr; }
.state-node { display: grid; place-items: center; min-height: 118px; border: 4px solid var(--charcoal); border-radius: 12px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); text-align: center; }
.state-node.time { background: #fff0d2; box-shadow-color: #d87a13; }
.state-node.success { background: #dff4e6; box-shadow-color: #2f9f62; }
.state-node b { font: 1000 22px/1 ui-monospace, monospace; }
.state-node span { margin-top: 6px; color: #52665f; font-size: 15px; }
.state-arrow { display: grid; place-items: center; color: var(--magenta); font: 1000 39px/1 ui-monospace, monospace; }
.state-arrow small { color: #52665f; font-size: 10px; }
.state-deep-dive > p { grid-column: 1 / -1; padding: 17px; border: 3px solid var(--charcoal); background: var(--yellow); text-align: center; font-size: 21px; font-weight: 900; }

.scan-budget { grid-template-columns: 1fr 1fr; }
.scan-budget > div { display: grid; place-items: center; min-height: 125px; padding: 14px; border: 4px solid var(--charcoal); border-radius: 12px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); text-align: center; }
.scan-budget strong { color: var(--forest); font: 1000 50px/1 ui-monospace, monospace; }
.scan-budget span { margin-top: 7px; color: #52665f; font-size: 15px; font-weight: 850; }
.scan-budget .scan-total { background: var(--yellow); box-shadow-color: var(--magenta); }
.scan-budget > p { grid-column: 1 / -1; }

.midi-packet { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 4px solid var(--charcoal); border-radius: 11px; }
.midi-packet span { padding: 15px 7px; border-right: 2px solid var(--charcoal); background: var(--mint); text-align: center; font: 900 14px/1 ui-monospace, monospace; }
.midi-packet code { grid-column: 1 / -1; padding: 18px; background: var(--night-2); color: var(--paper); text-align: center; font-size: 30px; }
.wire-equation span { display: block; color: #624c17; font: 900 16px/1 ui-monospace, monospace; }
.wire-equation b { display: block; margin-top: 14px; color: var(--ink); font: 1000 37px/1 ui-monospace, monospace; }
.wire-equation strong { display: block; margin-top: 14px; color: #a93668; font: 1000 48px/1 ui-monospace, monospace; }

/* KiCad onboarding, open-hardware reuse, and the planned SparkFun audio fork. */
.kicad-beginner-stage { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; max-width: 1400px !important; align-items: stretch; }
.kicad-loop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kicad-loop-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-content: center;
  min-height: 104px;
  padding: 14px 18px;
  border: 3px solid var(--charcoal);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--sage);
}
.kicad-loop-step:last-child { grid-column: 1 / -1; background: var(--yellow); box-shadow-color: var(--magenta); }
.kicad-loop-step b { grid-row: 1 / 3; align-self: center; color: var(--magenta); font: 1000 25px/1 ui-monospace, monospace; }
.kicad-loop-step strong { font-size: 24px; line-height: 1; }
.kicad-loop-step span { margin-top: 7px; color: #52665f; font-size: 16px; font-weight: 850; }
.kicad-source-card {
  display: grid;
  align-content: center;
  padding: 24px;
  border: 4px solid var(--charcoal);
  border-radius: 14px;
  background: #17211e;
  color: var(--paper);
  box-shadow: 9px 9px 0 #087f83;
}
.kicad-source-card .badge { justify-self: start; background: var(--yellow); color: var(--charcoal); }
.kicad-source-card pre { margin: 23px 0; }
.kicad-source-card code { color: #d8f4e6; font-size: 20px; line-height: 1.34; }
.kicad-source-card p { padding: 16px; border-left: 7px solid var(--magenta); background: rgba(255,255,255,.07); font-size: 19px; line-height: 1.18; }

.kicad-habits-slide .slide-head h2 { max-width: 1320px; }
.kicad-habits-slide .kicad-beginner-stage { margin-top: 20px; }
.kicad-habits-slide .kicad-source-card { align-content: start; padding: 22px; }
.kicad-habits-slide .kicad-source-card pre { margin: 18px 0; }
.kicad-habits-slide .kicad-source-card code { font-size: 17px; line-height: 1.25; }
.kicad-review-habits { display: grid; gap: 10px; }
.kicad-source-card .kicad-review-habits p {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 13px;
  border-left-width: 5px;
  font-size: 15px;
}
.kicad-review-habits b { color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .06em; }
.kicad-review-habits span { color: var(--paper); font-size: 15px; font-weight: 850; }

.open-hardware-stage { position: relative; display: grid; grid-template-rows: 105px 164px 150px auto; gap: 15px; max-width: 1400px !important; }
.oshw-permission {
  display: grid;
  grid-template-columns: 160px 1fr 320px;
  align-items: center;
  padding: 17px 23px;
  border: 4px solid var(--charcoal);
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
  color: inherit;
  text-decoration: none;
}
.oshw-permission span { font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .08em; }
.oshw-permission strong { font: 1000 27px/1 ui-monospace, monospace; }
.oshw-permission small { color: #624c17; font-size: 16px; font-weight: 850; line-height: 1.12; }
.vendor-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.vendor-card {
  position: relative;
  display: grid;
  align-content: center;
  padding: 16px;
  border: 3px solid var(--charcoal);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--sage);
}
.vendor-card strong { font: 1000 23px/1 ui-monospace, monospace; }
.vendor-card span { margin-top: 12px; color: #52665f; font-size: 15px; line-height: 1.12; font-weight: 820; }
.vendor-card.sparkfun,
.vendor-card.arduino { padding-right: 58px; }
.vendor-logo { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; object-fit: contain; }
.vendor-logo--arduino { width: 42px; height: 42px; top: 10px; right: 10px; }
.vendor-card.sparkfun { box-shadow-color: #e74734; }
.vendor-card.adafruit { box-shadow-color: #7257c2; }
.vendor-card.arduino { box-shadow-color: #008b95; }
.vendor-card.gsg { box-shadow-color: #1f4034; }
.vendor-card.olimex { box-shadow-color: #b97800; }
.license-checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.license-checklist > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 14px; border: 3px solid var(--charcoal); background: rgba(184,215,189,.35); }
.license-checklist b { color: var(--magenta); font: 1000 28px/1 ui-monospace, monospace; }
.license-checklist span { font-size: 15px; line-height: 1.08; font-weight: 800; }
.license-checklist strong { display: block; margin-bottom: 6px; font-size: 18px; }
.legal-footnote { color: #65756f; font: 850 14px/1 ui-monospace, monospace; text-align: center; }

/* The keyboard-keyboard cut gives this dense reference slide a stronger reading
   order: one takeaway, then actions on the left and examples on the right. */
.open-hardware-stage--readable {
  grid-template-rows: 96px 1fr auto;
  gap: 18px;
}
.open-hardware-stage--readable .oshw-permission {
  grid-template-columns: 180px 1fr 330px;
  padding: 15px 24px;
}
.open-hardware-stage--readable .oshw-permission strong { font-size: 29px; }
.open-hardware-stage--readable .oshw-permission small { font-size: 17px; text-align: right; }
.open-hardware-body { display: grid; grid-template-columns: .92fr 1.08fr; gap: 22px; min-height: 0; }
.license-panel,
.vendor-panel {
  display: grid;
  grid-template-rows: 62px 1fr;
  min-height: 0;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--sage);
}
.license-panel > header,
.vendor-panel > header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 3px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
}
.license-panel > header span,
.vendor-panel > header span { color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .09em; }
.license-panel > header strong { color: var(--paper); font-size: 22px; line-height: 1; }
.license-rule {
  display: grid;
  align-content: center;
  gap: 26px;
  padding: 34px 38px;
  background:
    radial-gradient(circle at 84% 22%, rgba(242,90,162,.17) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 22%, transparent 0 34px, rgba(21,32,29,.08) 35px 37px, transparent 38px),
    linear-gradient(112deg, rgba(245,194,65,.13), transparent 48%);
}
.license-rule p { margin: 0; color: var(--ink); font: 1000 34px/1.03 ui-monospace, monospace; }
.license-rule p strong { color: var(--magenta); }
.license-rule small { color: #52665f; font-size: 18px; font-weight: 850; line-height: 1.3; }
.open-hardware-stage--readable .license-checklist { display: grid; grid-template-columns: 1fr; gap: 0; }
.open-hardware-stage--readable .license-checklist > div {
  grid-template-columns: 56px 1fr;
  min-height: 77px;
  padding: 11px 17px;
  border: 0;
  border-bottom: 2px solid rgba(21,32,29,.2);
  background: transparent;
}
.open-hardware-stage--readable .license-checklist > div:last-child { border-bottom: 0; }
.open-hardware-stage--readable .license-checklist b { font-size: 31px; }
.open-hardware-stage--readable .license-checklist span { color: #52665f; font-size: 16px; line-height: 1.08; }
.open-hardware-stage--readable .license-checklist strong { margin-bottom: 5px; color: var(--ink); font-size: 20px; }
.open-hardware-stage--readable .vendor-grid { grid-template-columns: 1fr; gap: 0; }
.open-hardware-stage--readable .vendor-card {
  grid-template-columns: 225px 1fr;
  align-items: center;
  min-height: 62px;
  padding: 9px 58px 9px 18px;
  border: 0;
  border-bottom: 2px solid rgba(21,32,29,.2);
  border-radius: 0;
  box-shadow: inset 8px 0 0 var(--sage);
}
.open-hardware-stage--readable .vendor-card:last-child { border-bottom: 0; }
.open-hardware-stage--readable .vendor-card strong { padding-left: 9px; font-size: 20px; }
.open-hardware-stage--readable .vendor-card span { margin: 0; color: #52665f; font-size: 16px; }
.open-hardware-stage--readable .vendor-card.sparkfun { box-shadow: inset 8px 0 0 #e74734; }
.open-hardware-stage--readable .vendor-card.adafruit { box-shadow: inset 8px 0 0 #7257c2; }
.open-hardware-stage--readable .vendor-card.arduino { box-shadow: inset 8px 0 0 #008b95; }
.open-hardware-stage--readable .vendor-card.gsg { box-shadow: inset 8px 0 0 #1f4034; }
.open-hardware-stage--readable .vendor-card.olimex { box-shadow: inset 8px 0 0 #b97800; }
.open-hardware-stage--readable .vendor-logo { top: 50%; right: 14px; transform: translateY(-50%); }
.open-hardware-stage--readable .legal-footnote { font-size: 14px; line-height: 1.15; }
.open-hardware-stage--readable .legal-footnote strong { color: var(--ink); }
.open-hardware-stage--readable .reaction-license { right: 8px; top: -190px; width: 140px; }
.license-ara {
  position: absolute;
  z-index: 12;
  top: -105px;
  right: 10px;
  width: 355px;
  padding: 12px 17px 11px;
  border: 4px solid var(--charcoal);
  background: #fff7dd;
  box-shadow: 7px 7px 0 var(--magenta);
  color: var(--charcoal);
  text-align: left;
  transform: rotate(-1.5deg);
}
.license-ara span,
.license-ara strong,
.license-ara small { display: block; }
.license-ara span { color: #b32268; font: 1000 22px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.license-ara strong { margin-top: 4px; font-size: 25px; line-height: 1; }
.license-ara small { margin-top: 6px; color: #53635f; font: 850 13px/1.08 ui-monospace, monospace; }

.amp-fork-stage { display: grid; grid-template-columns: .84fr 1.16fr; gap: 28px; max-width: 1400px !important; }
.amp-fork-title-edit {
  display: inline-flex;
  align-items: baseline;
  gap: 17px;
  white-space: nowrap;
}
.amp-fork-title-edit del {
  text-decoration-color: var(--red);
  text-decoration-thickness: 7px;
}
.amp-fork-title-edit ins {
  display: inline-block;
  color: var(--magenta);
  font: 1000 .82em/1 ui-monospace, monospace;
  letter-spacing: -.06em;
  text-decoration: none;
  transform: rotate(-3deg);
}
.amp-source-visual {
  position: relative;
  height: 525px;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 15px;
  background: #101916;
  box-shadow: 10px 10px 0 #e74734;
}
.amp-product { position: absolute; z-index: 2; left: 18px; top: 17px; width: 250px; border: 4px solid var(--charcoal); background: white; transform: rotate(-3deg); box-shadow: 7px 7px 0 var(--yellow); }
.amp-schematic { position: absolute; right: -4px; bottom: 18px; width: 94%; }
.source-stamp { position: absolute; z-index: 3; right: 16px; top: 22px; padding: 9px 12px; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); font: 1000 13px/1 ui-monospace, monospace; transform: rotate(2deg); }
.amp-integration { display: grid; align-content: center; gap: 21px; }
.amp-pipeline { display: grid; grid-template-columns: 1fr 38px 1fr 38px 1fr; align-items: center; }
.amp-node { display: grid; place-items: center; min-height: 145px; padding: 13px; border: 4px solid var(--charcoal); border-radius: 12px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); text-align: center; }
.amp-node.red { background: #ffe5e1; box-shadow-color: #e74734; }
.amp-node small { color: #52665f; font: 950 11px/1 ui-monospace, monospace; letter-spacing: .06em; }
.amp-node strong { margin-top: 8px; font: 1000 24px/1 ui-monospace, monospace; }
.amp-node span { margin-top: 8px; color: #52665f; font-size: 14px; font-weight: 850; }
.amp-arrow { color: var(--magenta); text-align: center; font: 1000 31px/1 ui-monospace, monospace; }
.amp-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.amp-specs span { padding: 11px; border: 2px solid var(--charcoal); background: rgba(184,215,189,.35); color: #52665f; font-size: 13px; font-weight: 850; }
.amp-specs span.warn { background: #fff0d2; }
.amp-specs b { display: block; margin-bottom: 5px; color: var(--ink); font: 1000 17px/1 ui-monospace, monospace; }
.fork-checklist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 18px; border: 3px solid var(--charcoal); background: var(--yellow); font-size: 14px; font-weight: 850; line-height: 1; }
.fork-checklist strong { width: 100%; color: #624c17; font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .07em; }
.fork-checklist i { color: var(--magenta); font-style: normal; font-weight: 1000; }
.amp-fork-slide--example .amp-fork-stage {
  position: relative;
  display: block;
  max-width: 1180px !important;
}
.amp-fork-slide--example .amp-source-visual {
  width: 100%;
  height: 560px;
  margin: 0 auto;
  background: #fff;
}
.amp-fork-slide--example .amp-schematic {
  left: 0;
  top: -74px;
  width: 100%;
  height: auto;
}
.amp-fork-slide--example .source-stamp {
  left: 14px;
  right: auto;
  top: auto;
  bottom: 14px;
}
.amp-product-ref {
  position: absolute;
  z-index: 4;
  right: -70px;
  bottom: 22px;
  width: 170px;
  border: 4px solid var(--charcoal);
  border-radius: 9px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--yellow);
  transform: rotate(2deg);
}

/* Storyboard recipes integrated into the live deck. The shared as-* classes own
   the composition; these adapters only size them for each existing slide. */
.model-m-artifact-stage {
  min-height: 510px;
  box-shadow: 13px 13px 0 var(--sage), 19px 19px 0 var(--charcoal);
}
.model-m-artifact-stage .as-prop--lead {
  --prop-width: 94%;
  --prop-y: 14%;
  max-height: 68%;
}
.model-m-artifact-stage .as-location-card { max-width: 58%; }
.model-m-artifact-stage .as-location-card strong { font-size: 21px; }
.model-m-artifact-stage .as-location-card span { line-height: 1.12; }
.model-m-artifact-stage .as-story-caption { max-width: 70%; font-size: 15px; }
.kaori-artifact-cameo {
  --cameo-actor-width: 145px;
  --cameo-bubble-width: 255px;
  right: -7px;
  bottom: -18px;
  width: 385px;
  height: 350px;
}
.kaori-artifact-cameo .as-dialogue-cameo__bubble { left: 6px; top: 53px; }
.kaori-artifact-cameo .mb__body { padding: 16px 18px 14px; }
.kaori-artifact-cameo .mb__text { font-size: 17px; line-height: 1.04; }
.kaori-artifact-cameo .mb__jp { font-size: 14px; }

.kicad-copper-view.storyboard-evidence-stage {
  min-height: 525px;
  background:
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.1) 1.2px, transparent 1.7px) 0 0 / 28px 28px,
    var(--paper);
  box-shadow: 10px 10px 0 var(--cyan);
}
.kicad-copper-view.storyboard-evidence-stage > img.as-actor {
  width: var(--actor-width);
  height: auto;
  padding: 0;
  object-fit: contain;
}
.kicad-copper-view.storyboard-evidence-stage > img.as-prop {
  --prop-x: 70%;
  --prop-width: 73%;
  --prop-y: 10%;
  width: var(--prop-width);
  height: auto;
  max-height: 73%;
  padding: 0;
  object-fit: contain;
}
.storyboard-evidence-stage .as-location-card { right: 22px; top: 20px; }
.storyboard-evidence-stage .as-location-card strong { font-size: 20px; }
.storyboard-evidence-stage figcaption { z-index: 8; }

.reaction-debug-card.storyboard-debug-shot {
  display: block;
  height: 264px;
  min-height: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.1) 1.2px, transparent 1.7px) 0 0 / 28px 28px,
    var(--paper);
  color: var(--ink);
}
.reaction-debug-card.storyboard-debug-shot > .as-fx {
  grid-column: auto;
  padding: 0;
}
.reaction-debug-card.storyboard-debug-shot > .as-story-caption {
  grid-column: auto;
  left: 18px;
  bottom: 17px;
  max-width: 55%;
  padding: 12px 15px;
}
.storyboard-debug-shot .as-actor--lead {
  --actor-x: 79%;
  --actor-width: 31%;
  --actor-y: 2%;
}
.reaction-debug-card.storyboard-debug-shot::after { left: 79%; width: 27%; }
.storyboard-debug-shot .as-story-caption strong { color: var(--ink); font-size: 23px; }
.storyboard-debug-shot .as-story-caption small { margin-top: 7px; color: #52665f; font-size: 14px; }

/* Buckling-spring insert: a technical diagram staged as a manga reveal. */
.reveal .slides section.buckling-manga-slide {
  background:
    linear-gradient(101deg, transparent 0 67%, rgba(242,90,162,.08) 67.2% 68%, transparent 68.2%),
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.13) 1.3px, transparent 1.8px) 0 0 / 24px 24px,
    linear-gradient(135deg, rgba(255,211,79,.18), transparent 38%, rgba(53,214,208,.08)),
    var(--paper);
}
.buckling-manga-slide::before {
  inset: -430px;
  background: repeating-conic-gradient(from -7deg at 79% 63%, transparent 0 7deg, rgba(21,32,29,.055) 7.5deg 9deg);
  transform-origin: 79% 63%;
}
.buckling-manga-slide .slide-head h2 {
  display: block;
  position: relative;
  width: max-content;
  max-width: 1120px;
  text-shadow: 4px 4px 0 rgba(53,214,208,.38);
}
.buckling-manga-slide .slide-head h2::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -35px;
  bottom: -13px;
  height: 9px;
  background: var(--charcoal);
  box-shadow: 10px 7px 0 var(--magenta);
  transform: skewX(-31deg) rotate(-.6deg);
}
.layout-split.wide-left .buckling-manga-layout {
  grid-template-columns: 1.28fr .72fr;
  gap: 52px;
  height: 570px;
  margin-top: 26px;
}
.buckling-diagram-stage {
  min-height: 535px;
  border-width: 7px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 13px 13px 0 var(--cyan), 21px 21px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.buckling-diagram-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: -115px;
  bottom: -126px;
  width: 360px;
  height: 360px;
  background: repeating-conic-gradient(from -8deg, transparent 0 8deg, rgba(242,90,162,.24) 8.5deg 11deg);
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 61% 59%, 50% 100%, 41% 61%, 0 50%, 39% 41%);
  pointer-events: none;
}
.buckling-diagram-stage .as-fx--screentone {
  z-index: 4;
  opacity: .28;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(135deg, #000 0 22%, transparent 44% 71%, #000 89%);
  mask-image: linear-gradient(135deg, #000 0 22%, transparent 44% 71%, #000 89%);
}
.buckling-diagram-stage.as-shot--insert .as-prop--lead {
  --prop-y: 4%;
  --prop-width: 91%;
  max-height: 91%;
  filter: grayscale(1) contrast(1.14) drop-shadow(5px 6px 0 rgba(16,17,22,.2));
}
.buckling-panel-tag {
  position: absolute;
  z-index: 9;
  left: 20px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px 7px 14px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--charcoal);
  color: var(--charcoal);
  transform: rotate(-2deg);
}
.buckling-panel-tag span {
  font: 1000 20px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .12em;
}
.buckling-panel-tag b {
  padding-left: 11px;
  border-left: 3px solid var(--charcoal);
  font: 1000 17px/1 ui-monospace, monospace;
}
.buckling-impact {
  position: absolute;
  z-index: 10;
  right: 15px;
  bottom: 54px;
  color: var(--magenta);
  font: 1000 72px/.78 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.12em;
  -webkit-text-stroke: 3px var(--charcoal);
  text-shadow: 6px 6px 0 var(--yellow), 10px 10px 0 var(--charcoal);
  transform: rotate(-10deg) skewX(-7deg);
}
.buckling-diagram-stage .as-story-caption {
  left: 21px;
  bottom: 19px;
  max-width: 58%;
  padding: 11px 14px;
  border-width: 4px;
  background: var(--charcoal);
  color: var(--paper);
  box-shadow: 6px 6px 0 var(--yellow);
  font-size: 16px;
  transform: rotate(.7deg);
}
.buckling-verdict {
  position: relative;
  display: grid;
  align-content: center;
  gap: 25px;
  min-height: 500px;
  padding: 33px 29px 38px;
  border: 7px solid var(--charcoal);
  background:
    repeating-linear-gradient(161deg, transparent 0 25px, rgba(21,32,29,.07) 26px 30px, transparent 31px 48px),
    var(--paper);
  box-shadow: 12px 12px 0 var(--magenta), 20px 20px 0 var(--charcoal);
  transform: rotate(1deg);
}
.buckling-verdict::before {
  content: "";
  position: absolute;
  right: -7px;
  top: -7px;
  width: 90px;
  height: 90px;
  border-left: 7px solid var(--charcoal);
  border-bottom: 7px solid var(--charcoal);
  background: repeating-conic-gradient(from 2deg at 100% 0, var(--yellow) 0 9deg, var(--charcoal) 9.5deg 12deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.buckling-verdict .jp-line {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px 15px 11px;
  background: var(--charcoal);
  color: var(--cyan);
  box-shadow: 7px 7px 0 var(--yellow);
  font-size: 25px;
  line-height: 1.06;
  text-align: center;
  transform: rotate(-2deg);
}
.one-signal-mark {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  color: var(--charcoal);
  text-align: center;
}
.one-signal-mark span {
  padding: 12px 8px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--charcoal);
  font: 1000 25px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.one-signal-mark span:last-child { background: #c9f4ef; }
.one-signal-mark b {
  color: var(--magenta);
  font: 1000 36px/1 ui-monospace, monospace;
  transform: rotate(-90deg);
}
.buckling-verdict .big-copy {
  position: relative;
  z-index: 2;
  padding: 24px 22px 63px;
  border: 5px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--cyan), 13px 13px 0 var(--charcoal);
  color: var(--charcoal);
  font-size: 38px !important;
  line-height: 1.08 !important;
  transform: rotate(-1.2deg);
}
.buckling-verdict .big-copy .accent {
  display: inline-block;
  color: var(--magenta);
  text-decoration: underline;
  text-decoration-thickness: 7px;
  text-decoration-color: var(--paper);
  text-underline-offset: 3px;
  transform: rotate(-2deg);
}
.verdict-stamp {
  position: absolute;
  right: 18px;
  bottom: 15px;
  padding: 7px 12px 5px;
  border: 4px solid var(--charcoal);
  background: var(--magenta);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--charcoal);
  font: 1000 24px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .12em;
  transform: rotate(-4deg);
}

.phone-reveal-stage {
  width: 580px;
  min-height: 235px;
  margin: 27px auto 0;
  box-shadow: 11px 11px 0 var(--magenta), 17px 17px 0 #000;
  text-align: left;
}
.phone-reveal-stage .as-prop--lead {
  --prop-x: 37%;
  --prop-width: 29%;
  --prop-y: 7%;
  max-height: 82%;
}
.phone-reveal-color { position: absolute; z-index: 3; inset: 0; }
.phone-reveal-stage .as-freeze-label {
  right: 20px;
  bottom: 24px;
  max-width: 52%;
  padding: 13px 15px;
  background: var(--paper);
  color: var(--ink);
}
.phone-reveal-stage .as-freeze-label strong { font-size: 24px; }
.phone-reveal-stage .as-freeze-label span { margin-top: 7px; font-size: 11px; }

.challenger-reveal-stage {
  width: 1180px;
  min-height: 560px;
  margin: 30px auto 0;
}
.challenger-reveal-stage .as-prop--lead {
  --prop-x: 50%;
  --prop-width: 66%;
  --prop-y: 12%;
  max-height: 76%;
}

.kaori-quest-slide .quest-log {
  width: 840px;
  margin-left: 34px;
  margin-right: 0;
}
.kaori-quest-cameo {
  --cameo-actor-width: 245px;
  --cameo-bubble-width: 340px;
  right: 42px;
  bottom: 30px;
  width: 555px;
  height: 570px;
}
.kaori-quest-cameo .as-dialogue-cameo__bubble { left: 0; top: 62px; }
.kaori-quest-cameo .mb__body { padding: 20px 22px 18px; }
.kaori-quest-cameo .mb__text { font-size: 22px; line-height: 1.04; }
.kaori-quest-cameo .mb__jp { font-size: 17px; }

/* Keyboard-keyboard · build recipe */
.keyboard-build-slide .slide-head h2 { max-width: 1120px; }
.keyboard-build-slide::before {
  inset: 0;
  background:
    repeating-conic-gradient(from -8deg at 50% 65%, transparent 0 5.2deg, rgba(21,32,29,.065) 5.4deg 6deg),
    radial-gradient(circle at 50% 65%, transparent 0 210px, rgba(255,211,79,.14) 212px 350px, transparent 352px);
  transform: none;
}
.keyboard-build-slide::after { z-index: 8; }
.keyboard-build-episode {
  position: absolute;
  z-index: 7;
  right: 73px;
  top: 51px;
  display: flex;
  align-items: stretch;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--magenta), 12px 12px 0 var(--charcoal);
  transform: rotate(2deg);
}
.keyboard-build-episode span {
  padding: 11px 13px 8px;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 22px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.keyboard-build-episode strong {
  padding: 10px 16px 8px;
  color: var(--charcoal);
  font: 1000 20px/1.05 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
}
.keyboard-build-vertical {
  position: absolute;
  z-index: 6;
  right: 20px;
  top: 185px;
  padding: 13px 8px 11px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--charcoal);
  color: var(--charcoal);
  font: 1000 21px/1.05 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  transform: rotate(2deg);
}
.keyboard-build-stage {
  width: 100%;
  max-width: none !important;
  margin-top: 28px;
}
.keyboard-build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}
.keyboard-build-card {
  position: relative;
  display: grid;
  grid-template-rows: 122px auto auto 1fr;
  min-height: 390px;
  padding: 27px 25px 24px;
  overflow: visible;
  border: 6px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--charcoal);
}
.keyboard-build-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .48;
  background:
    radial-gradient(circle, rgba(21,32,29,.28) 0 1.7px, transparent 2px) 0 0 / 11px 11px,
    repeating-linear-gradient(155deg, transparent 0 21px, rgba(21,32,29,.12) 22px 24px, transparent 25px 41px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.keyboard-build-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: repeating-conic-gradient(from 8deg at 35% 23%, transparent 0 10deg, rgba(255,255,255,.56) 10.3deg 11deg);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 0 43%);
  pointer-events: none;
}
.keyboard-build-card--idea {
  background-color: #fff0a9;
}
.keyboard-build-card--kicad {
  background-color: #cef5f1;
}
.keyboard-build-card--reference {
  background-color: #ffd9e9;
}
.keyboard-build-card > * { position: relative; z-index: 1; }
.keyboard-build-number {
  position: absolute;
  top: 13px;
  right: 17px;
  color: var(--paper);
  font: 1000 68px/.8 ui-monospace, monospace;
  -webkit-text-stroke: 3px var(--charcoal);
  text-shadow: 4px 4px 0 var(--magenta);
  transform: rotate(5deg);
}
.keyboard-build-panel-jp {
  position: absolute;
  z-index: 3;
  left: 9px;
  top: 12px;
  padding: 8px 12px 6px;
  border: 4px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
  box-shadow: 5px 5px 0 var(--yellow);
  font: 1000 22px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .15em;
  transform: rotate(-5deg);
}
.keyboard-build-card small {
  align-self: end;
  margin-bottom: 8px;
  font: 1000 15px/1 ui-monospace, monospace;
  letter-spacing: .14em;
}
.keyboard-build-card h3 {
  max-width: 330px;
  font-size: 34px;
}
.keyboard-build-card p {
  align-self: start;
  margin-top: 13px;
  max-width: 355px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.keyboard-build-icon {
  position: relative;
  width: 145px;
  height: 108px;
}
.build-idea-icon {
  width: 84px;
  height: 84px;
  margin: 8px 0 0 28px;
  border: 6px solid var(--charcoal);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
}
.build-idea-icon::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -25px;
  width: 30px;
  height: 26px;
  border: 6px solid var(--charcoal);
  border-top: 0;
  background: var(--paper);
}
.build-idea-icon::after {
  content: "!";
  position: absolute;
  inset: 8px 0 0;
  font: 1000 52px/1 ui-monospace, monospace;
  text-align: center;
}
.build-idea-icon i {
  position: absolute;
  top: 31px;
  left: 50%;
  width: 112px;
  height: 5px;
  background: var(--charcoal);
  transform-origin: center;
}
.build-idea-icon i:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.build-idea-icon i:nth-child(2) { transform: translateX(-50%) rotate(45deg); }
.build-idea-icon i:nth-child(3) { transform: translateX(-50%) rotate(90deg); }
.build-kicad-icon {
  width: 158px;
  height: 101px;
  margin-top: 2px;
  border: 5px solid var(--charcoal);
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.28) 50% 51%, transparent 52%),
    linear-gradient(transparent 49%, rgba(255,255,255,.28) 50% 51%, transparent 52%),
    #3372cf;
  background-size: 22px 22px;
  box-shadow: 7px 7px 0 var(--yellow);
  transform: rotate(-2deg);
}
.build-kicad-icon span {
  position: absolute;
  left: 15px;
  top: 32px;
  color: white;
  font: 1000 25px/1 ui-monospace, monospace;
  text-shadow: 3px 3px 0 var(--charcoal);
}
.build-kicad-icon i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  background: var(--yellow);
}
.build-kicad-icon i:nth-of-type(1) { left: 111px; top: 19px; }
.build-kicad-icon i:nth-of-type(2) { left: 129px; top: 44px; }
.build-kicad-icon i:nth-of-type(3) { left: 103px; top: 70px; }
.build-kicad-icon i:nth-of-type(4) { left: 79px; top: 16px; }
.build-reference-icon { margin: 1px 0 0 12px; }
.build-reference-icon i {
  position: absolute;
  width: 94px;
  height: 88px;
  border: 5px solid var(--charcoal);
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) 14px 18px / 60px 4px no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 14px 33px / 48px 4px no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 14px 48px / 57px 4px no-repeat,
    var(--paper);
  box-shadow: 5px 5px 0 var(--charcoal);
}
.build-reference-icon i:first-child { left: 27px; top: 3px; transform: rotate(7deg); }
.build-reference-icon i:nth-child(2) { left: 4px; top: 14px; transform: rotate(-5deg); }
.build-reference-icon strong {
  position: absolute;
  right: -7px;
  bottom: 5px;
  padding: 8px 9px 6px;
  border: 4px solid var(--charcoal);
  background: var(--magenta);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--charcoal);
  font: 1000 20px/1 ui-monospace, monospace;
  transform: rotate(6deg);
}
.keyboard-build-sfx {
  position: absolute;
  right: 16px;
  top: 97px;
  color: var(--paper);
  font: 1000 27px/1 "Hiragino Sans", "Yu Gothic", sans-serif;
  letter-spacing: -.08em;
  -webkit-text-stroke: 2px var(--charcoal);
  text-shadow: 4px 4px 0 var(--magenta);
  transform: rotate(9deg) skewX(-7deg);
}
.keyboard-build-card--reference .keyboard-build-sfx {
  top: 100px;
  right: 20px;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--charcoal);
}
.keyboard-build-steal {
  position: absolute;
  right: 13px;
  bottom: 14px;
  padding: 7px 9px 5px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--charcoal);
  font: 1000 23px/1 ui-monospace, monospace;
  transform: rotate(-7deg);
}
.keyboard-build-payoff {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  padding: 29px 21px 14px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 9px 9px 0 var(--cyan);
  color: var(--paper);
  transform: rotate(.2deg);
}
.keyboard-build-payoff::before,
.keyboard-build-payoff::after {
  content: "";
  position: absolute;
  top: -17px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 20px solid var(--charcoal);
}
.keyboard-build-payoff::before { left: 30%; transform: rotate(-13deg); }
.keyboard-build-payoff::after { right: 29%; transform: rotate(15deg); }
.keyboard-build-payoff-jp {
  position: absolute;
  z-index: 3;
  left: 20px;
  top: -17px;
  padding: 6px 12px 5px;
  border: 3px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 4px 4px 0 var(--magenta);
  font: 1000 17px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
  transform: rotate(-1.5deg);
}
.keyboard-build-equation {
  display: flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
  font: 1000 18px/1 ui-monospace, monospace;
}
.keyboard-build-equation strong { color: var(--yellow); }
.keyboard-build-equation b { color: var(--cyan); font-size: 27px; }
.keyboard-build-equation span {
  padding: 7px 10px 6px;
  background: var(--magenta);
  color: var(--paper);
}
.keyboard-build-payoff p {
  max-width: 420px;
  padding-left: 22px;
  border-left: 3px solid var(--paper);
  color: var(--paper);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}

/* Keyboard-keyboard · KiCad fabrication handoff */
.kicad-export-slide .slide-head h2 { max-width: 1180px; }
.kicad-export-stage {
  width: 100%;
  max-width: none !important;
  margin-top: 20px;
}
.kicad-export-flow {
  display: grid;
  grid-template-columns: 1fr 58px 1fr 58px 1fr;
  align-items: center;
  gap: 14px;
}
.kicad-export-step {
  position: relative;
  display: grid;
  grid-template-rows: 205px auto auto 1fr;
  min-width: 0;
  min-height: 405px;
  padding: 20px 20px 18px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--charcoal);
}
.kicad-export-step--plot { background: #cef5f1; transform: rotate(-.55deg); }
.kicad-export-step--zip { background: #fff0a9; transform: translateY(5px) rotate(.45deg); }
.kicad-export-step--order { background: #ffd9e9; transform: rotate(-.35deg); }
.kicad-export-number {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 10px;
  color: rgba(22,27,29,.18);
  font: 1000 58px/.8 ui-monospace, monospace;
}
.kicad-export-step > small {
  align-self: end;
  margin: 13px 0 7px;
  font: 1000 14px/1 ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.kicad-export-step h3 { font-size: 30px; line-height: 1; }
.kicad-export-step > p {
  margin-top: 11px;
  color: #40564e;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.18;
}
.kicad-export-arrow {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 4px solid var(--charcoal);
  border-radius: 50%;
  background: var(--magenta);
  color: white;
  box-shadow: 5px 5px 0 var(--charcoal);
  font: 1000 34px/1 ui-monospace, monospace;
}
.kicad-export-visual {
  position: relative;
  min-width: 0;
  height: 205px;
  margin: 0;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  background: #16221e;
}
.kicad-export-board img {
  width: 100%;
  height: 100%;
  padding: 18px 10px 28px;
  object-fit: contain;
  filter: brightness(1.35) saturate(1.12);
}
.kicad-export-visual figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-top: 3px solid var(--charcoal);
  background: var(--cyan);
  color: var(--charcoal);
  font: 1000 12px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.kicad-export-visual figcaption span {
  font-size: 10px;
  letter-spacing: .03em;
  text-align: right;
}
.kicad-export-photo { background: #edf0f4; }
.kicad-export-photo > img {
  position: absolute;
  left: -12.5%;
  width: 125%;
  max-width: none;
  height: auto;
}
.kicad-export-photo--viewer > img { top: -52px; }
.kicad-export-photo--quote > img { top: -154px; }
.kicad-export-photo--quote figcaption {
  background: var(--yellow);
}
.kicad-export-photo--quote figcaption b {
  color: #df5a00;
  font-size: 17px;
}
.kicad-export-archive {
  display: grid;
  grid-template-columns: 1fr 100px;
  align-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.5px) 0 0 / 18px 18px,
    #22332d;
}
.kicad-export-file-list { display: grid; gap: 7px; }
.kicad-export-file-list span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border: 2px solid var(--charcoal);
  background: var(--paper);
  color: var(--charcoal);
  font: 900 11px/1 ui-monospace, monospace;
  transform: rotate(-.5deg);
}
.kicad-export-file-list span:nth-child(even) { transform: translateX(5px) rotate(.7deg); }
.kicad-export-file-list i { color: #a93668; font-style: normal; }
.kicad-export-archive > strong {
  display: grid;
  place-items: center;
  width: 82px;
  height: 100px;
  margin-left: 12px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  box-shadow: 5px 5px 0 var(--magenta);
  font: 1000 24px/1 ui-monospace, monospace;
  transform: rotate(3deg);
}
.kicad-export-archive > strong::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 70px;
  border: 3px dashed var(--charcoal);
  border-top: 0;
  border-bottom: 0;
}
.kicad-export-archive > em {
  position: absolute;
  right: 8px;
  bottom: 9px;
  padding: 5px 7px;
  background: var(--magenta);
  color: white;
  font: normal 1000 11px/1 ui-monospace, monospace;
  transform: rotate(-4deg);
}
.kicad-export-order { padding: 14px; background: var(--paper); }
.kicad-export-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--charcoal);
  font: 1000 12px/1 ui-monospace, monospace;
}
.kicad-export-order-head i {
  padding: 4px 7px;
  background: var(--cyan);
  color: var(--charcoal);
  font-style: normal;
}
.kicad-export-order dl { display: grid; gap: 0; margin: 8px 0 10px; }
.kicad-export-order dl div {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 2px dashed #9eaaa5;
  font: 850 12px/1 ui-monospace, monospace;
}
.kicad-export-order dt { color: #52665f; }
.kicad-export-order dd { margin: 0; font-weight: 1000; }
.kicad-export-order > b {
  display: block;
  padding: 9px;
  border: 3px solid var(--charcoal);
  background: var(--magenta);
  color: white;
  box-shadow: 4px 4px 0 var(--charcoal);
  text-align: center;
  font: 1000 13px/1 ui-monospace, monospace;
}
.kicad-export-payoff {
  position: relative;
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: center;
  gap: 17px;
  margin-top: 24px;
  padding: 15px 84px 14px 16px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 8px 8px 0 var(--cyan);
  color: var(--paper);
}
.kicad-export-check {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: #2f9f62;
  font: 1000 29px/1 ui-monospace, monospace;
}
.kicad-export-payoff strong { color: var(--yellow); font-size: 23px; }
.kicad-export-payoff p {
  padding-left: 20px;
  border-left: 3px solid var(--paper);
  color: var(--paper);
  font: 850 15px/1.2 ui-monospace, monospace;
}
.kicad-export-sfx {
  position: absolute;
  right: 15px;
  top: 18px;
  color: var(--magenta);
  font: 1000 23px/1 "Hiragino Sans", "Yu Gothic", sans-serif;
  transform: rotate(-8deg);
}

/* Keyboard Keyboard opening act (slides 01–10): a denser manga page language.
   These rules are deliberately scoped so the remainder of the deck is unchanged.
   Structural frames stay rectangular and axis-aligned; angle only borderless
   accents, stamps, type, and character art. */
.reveal .slides section.kk-manga-act {
  box-shadow:
    inset 0 0 0 9px #08080d,
    inset 0 0 0 14px var(--paper),
    inset 0 0 0 18px #08080d;
}
.kk-manga-act .slide-head h2 {
  width: max-content;
  max-width: 1120px;
  padding-right: 22px;
  text-shadow: 5px 5px 0 rgba(53,214,208,.42);
}
.kk-manga-act .slide-head h2::after {
  content: "";
  display: block;
  width: 104%;
  height: 8px;
  margin-top: 10px;
  background: #08080d;
  box-shadow: 10px 7px 0 var(--magenta);
  transform: skewX(-28deg) rotate(-.5deg);
}

/* 01 · full-bleed Open Sauce photo framed as the first printed page. */
.reveal .slides section.kk-opening-poster {
  box-shadow: inset 0 0 0 13px #08080d, inset 0 0 0 20px var(--paper);
}
.kk-opening-poster::before {
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.24) 1.5px, transparent 2px) 0 0 / 12px 12px,
    repeating-conic-gradient(from -5deg at 77% 58%, transparent 0 7deg, rgba(255,255,255,.11) 7.4deg 9deg);
  transform: none;
  mix-blend-mode: screen;
}
.kk-opening-poster .title-art {
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
}
.kk-opening-poster .title-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,13,.6) 0 31%, rgba(8,8,13,.18) 44%, transparent 58%),
    linear-gradient(0deg, rgba(8,8,13,.38), transparent 34%);
}
.kk-opening-poster .title-copy {
  z-index: 6;
  left: 70px;
  top: 74px;
  width: 590px;
  padding: 24px 28px 28px;
  border: 6px solid var(--paper);
  background: rgba(8,8,13,.66);
  box-shadow: 12px 12px 0 var(--magenta), 20px 20px 0 #08080d;
  transform: rotate(-.65deg);
}
.kk-opening-poster .title-copy h1 {
  font-size: 58px;
  text-shadow: -4px 0 var(--cyan), 5px 6px 0 var(--magenta), 10px 11px 0 #000;
}
.kk-opening-poster .episode-stamp {
  border-width: 4px;
  color: var(--paper);
  font-size: 16px;
  line-height: 1.15;
  transform: rotate(-2deg);
}
.kk-opening-frame {
  position: absolute;
  z-index: 8;
  inset: 30px;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 7px #08080d;
  pointer-events: none;
}
.kk-opening-frame i {
  display: none;
}
.kk-opening-frame span {
  position: absolute;
  left: 635px;
  top: 34px;
  padding: 16px 11px;
  border: 4px solid #08080d;
  background: var(--yellow);
  color: #08080d;
  box-shadow: 7px 7px 0 var(--magenta);
  font: 1000 25px/1.1 "Hiragino Sans", "Yu Gothic", sans-serif;
  letter-spacing: .17em;
  writing-mode: vertical-rl;
  transform: rotate(1.5deg);
}

/* 02 · recap montage becomes three uneven manga memories. */
.reveal .slides section.kk-recap-strip {
  background:
    linear-gradient(112deg, transparent 0 64%, rgba(242,90,162,.13) 64.3% 65%, transparent 65.3%),
    radial-gradient(circle at 1px 1px, rgba(8,8,13,.16) 1.4px, transparent 1.8px) 0 0 / 13px 13px,
    var(--paper);
}
.kk-recap-strip::before {
  inset: -240px;
  background: repeating-conic-gradient(from 5deg at 52% 64%, transparent 0 8deg, rgba(8,8,13,.045) 8.4deg 10deg);
  transform: none;
}
.kk-recap-strip .as-shot--montage {
  height: 530px;
  margin-top: 20px;
  padding: 30px 34px 36px;
  overflow: visible;
  border: 7px solid #08080d;
  border-radius: 0;
  background: rgba(255,253,244,.8);
  box-shadow: 12px 12px 0 var(--cyan), 20px 20px 0 #08080d;
}
.kk-recap-strip .as-panel {
  overflow: visible;
  border-width: 7px;
  border-radius: 0;
  box-shadow: 9px 9px 0 var(--magenta);
}
.kk-recap-strip .as-panel:nth-child(3) {
  box-shadow: 9px 9px 0 var(--yellow);
  filter: grayscale(.9) contrast(1.2);
}
.kk-recap-strip .as-panel > img { object-fit: cover; }
.kk-recap-strip .as-panel__label {
  left: 15px;
  bottom: 15px;
  padding: 10px 13px;
  border-width: 3px;
  box-shadow: 4px 4px 0 #08080d;
  font-size: 15px;
}
.kk-recap-strip.present .eyebrow,
.kk-recap-strip .as-panel {
  animation: none !important;
  transition: none !important;
}

/* 03 · two QR cards presented as a framed manga insert page. */
.reveal .slides section.kk-qr-episode {
  background:
    linear-gradient(101deg, #101116 0 28%, transparent 28.3%),
    radial-gradient(circle at 1px 1px, rgba(8,8,13,.18) 1.3px, transparent 1.8px) 0 0 / 12px 12px,
    var(--cream) !important;
}
.kk-qr-episode::before {
  inset: -300px;
  background: repeating-conic-gradient(from -8deg at 15% 52%, transparent 0 8deg, rgba(255,211,79,.2) 8.5deg 11deg);
  transform: none;
}
.kk-qr-episode .last-demo-links { position: relative; z-index: 4; }
.kk-qr-episode .last-demo-links blockquote {
  color: var(--paper);
  text-shadow: -4px 0 var(--cyan), 5px 6px 0 var(--magenta), 10px 10px 0 #000;
  transform: rotate(-2deg);
}
.kk-qr-episode .last-demo-qr-grid {
  gap: 30px;
  padding: 25px;
  border: 7px solid #08080d;
  background: rgba(255,253,244,.92);
  box-shadow: 12px 12px 0 var(--magenta), 20px 20px 0 #08080d;
}
.kk-qr-episode .qr-card { border-width: 6px; border-radius: 2px; }
.kk-qr-episode .qr-card--demo,
.kk-qr-episode .qr-card--channel { transform: none; }
/* 04 · the quest is a dramatic anime mission card with a cast reaction. */
.reveal .slides section.kk-quest-cut {
  background:
    repeating-linear-gradient(162deg, transparent 0 34px, rgba(126,99,200,.1) 35px 41px, transparent 42px 64px),
    linear-gradient(135deg, #fffdf4, #eee9ff 68%, #ffd7ea),
    var(--paper);
}
.kk-quest-cut::before {
  inset: -330px;
  background: repeating-conic-gradient(from 3deg at 78% 68%, transparent 0 7deg, rgba(242,90,162,.11) 7.4deg 9deg);
  transform: none;
}
.kk-quest-cut .human-opening-stage--solo {
  position: relative;
  min-height: 540px;
  margin-top: 20px;
}
.kk-quest-cut .quest-card--primary {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 390px;
  padding: 64px 390px 62px 65px;
  overflow: hidden;
  border-width: 7px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 1px 1px, rgba(104,71,184,.13) 1.3px, transparent 1.7px) 0 0 / 12px 12px,
    linear-gradient(135deg, var(--paper), #eee9ff);
  box-shadow: 14px 14px 0 #7e63c8, 23px 23px 0 #08080d;
  transform: none;
}
.kk-quest-cut .quest-card--primary::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 390px;
  height: 100%;
  background: repeating-conic-gradient(from 6deg at 80% 62%, transparent 0 8deg, rgba(242,90,162,.19) 8.4deg 11deg);
}
.kk-quest-cut .quest-label,
.kk-quest-cut .quest-card h3,
.kk-quest-cut .quest-meta { position: relative; z-index: 2; }
.kk-quest-cut .quest-card h3 { font-size: 55px; }
.kk-quest-cut .badge { border-radius: 2px; box-shadow: 4px 4px 0 #08080d; transform: rotate(-1deg); }
.kk-quest-cut .badge:nth-child(2) { transform: rotate(1deg); }
.kk-quest-character {
  position: absolute;
  z-index: 5;
  right: 5px;
  bottom: 43px;
  width: 385px;
  height: 465px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(-8px 7px 0 #08080d) drop-shadow(-14px 0 0 var(--cyan));
  transform: rotate(2deg);
  pointer-events: none;
}

/* 05 · exaggerated boss-introduction composition. */
.reveal .slides section.kk-boss-reveal {
  background:
    radial-gradient(circle at 50% 60%, rgba(126,99,200,.5), transparent 28%),
    linear-gradient(180deg, #151124, #08080d) !important;
  box-shadow: inset 0 0 0 11px var(--magenta), inset 0 0 0 18px #08080d;
}
.kk-boss-reveal::before {
  inset: -420px;
  background: repeating-conic-gradient(from -4deg at 50% 61%, transparent 0 5deg, rgba(255,255,255,.16) 5.3deg 6.5deg, transparent 6.8deg 10deg, rgba(242,90,162,.15) 10.4deg 12deg);
  transform-origin: 50% 61%;
}
.kk-boss-reveal .chapter-jp {
  display: inline-block;
  position: relative;
  z-index: 8;
  padding: 13px 23px 11px;
  border: 5px solid var(--paper);
  background: var(--magenta);
  box-shadow: 9px 9px 0 var(--cyan), 15px 15px 0 #000;
  color: var(--paper);
  font-size: 42px;
  letter-spacing: .09em;
  transform: rotate(-1.5deg);
}
.kk-boss-reveal .challenger-reveal-stage {
  overflow: visible;
  border: 8px solid var(--paper);
  border-radius: 0;
  background: #08080d;
  box-shadow: 14px 14px 0 var(--magenta), 24px 24px 0 #000;
  clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 91%, 96% 100%, 4% 100%, 0 91%, 0 9%);
}
.kk-boss-reveal .challenger-reveal-stage .as-prop--lead {
  --prop-width: 72%;
  filter: drop-shadow(0 20px 0 rgba(0,0,0,.55));
}
.reveal .slides section.kk-boss-reveal .challenger-identity-reveal {
  opacity: 1;
  visibility: inherit;
  filter: brightness(0) drop-shadow(8px 9px 0 var(--magenta));
}
.reveal .slides section.kk-boss-reveal .challenger-identity-reveal.visible {
  filter: drop-shadow(0 20px 0 rgba(0,0,0,.55));
}
.reveal .slides section.weeb-model-m-interlude {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 61%, rgba(255,211,79,.3) 0 13%, transparent 34%),
    repeating-conic-gradient(from -4deg at 50% 61%, transparent 0 8deg, rgba(53,214,208,.11) 8.5deg 11deg),
    linear-gradient(125deg, #fffdf4 0 48%, #fff0f5 48% 100%);
  box-shadow: inset 0 0 0 10px #08080d, inset 0 0 0 16px var(--magenta);
}
.weeb-model-m-interlude::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(108deg, rgba(53,214,208,.16) 0 49.7%, rgba(8,8,13,.8) 49.8% 50.2%, rgba(242,90,162,.13) 50.3% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.weeb-interlude-kicker {
  position: absolute;
  z-index: 8;
  top: 42px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 24px 10px;
  border: 5px solid #08080d;
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--cyan);
  transform: translateX(-50%) rotate(-1deg);
}
.weeb-interlude-kicker span {
  color: #b32268;
  font: 1000 20px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.weeb-interlude-kicker strong { font-size: 20px; letter-spacing: .08em; white-space: nowrap; }
.weeb-interlude-character {
  position: absolute;
  z-index: 3;
  bottom: -70px;
  height: 720px;
  width: auto;
  filter: drop-shadow(11px 13px 0 rgba(8,8,13,.35));
}
.weeb-interlude-character--mio {
  left: 18px;
  height: 735px;
}
.weeb-interlude-character--ren {
  right: 25px;
  height: 720px;
}
.weeb-interlude-warning,
.weeb-interlude-reply,
.weeb-interlude-baka {
  position: absolute;
  z-index: 7;
  padding: 20px 26px 18px;
  border: 6px solid #08080d;
  color: #08080d;
  text-align: left;
}
.weeb-interlude-warning {
  top: 154px;
  left: 245px;
  width: 660px;
  background: var(--paper);
  box-shadow: 11px 11px 0 var(--cyan);
  transform: rotate(-2deg);
}
.weeb-interlude-warning::before,
.weeb-interlude-warning::after {
  content: "";
  position: absolute;
  clip-path: polygon(100% 0, 0 100%, 100% 74%);
  pointer-events: none;
}
.weeb-interlude-warning::before {
  left: -35px;
  bottom: 18px;
  width: 43px;
  height: 38px;
  background: #08080d;
}
.weeb-interlude-warning::after {
  left: -25px;
  bottom: 23px;
  width: 34px;
  height: 28px;
  background: var(--paper);
}
.weeb-interlude-reply {
  top: 300px;
  right: 255px;
  width: 500px;
  background: var(--yellow);
  box-shadow: 11px 11px 0 var(--magenta);
  transform: rotate(2deg);
}
.weeb-interlude-baka {
  top: 354px;
  left: 272px;
  width: 250px;
  padding: 13px 20px 12px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--magenta);
  transform: rotate(-5deg);
}
.weeb-interlude-baka::before,
.weeb-interlude-baka::after {
  content: "";
  position: absolute;
  clip-path: polygon(100% 0, 0 100%, 100% 74%);
  pointer-events: none;
}
.weeb-interlude-baka::before {
  left: -29px;
  bottom: 13px;
  width: 36px;
  height: 30px;
  background: #08080d;
}
.weeb-interlude-baka::after {
  left: -20px;
  bottom: 18px;
  width: 28px;
  height: 21px;
  background: var(--paper);
}
.weeb-interlude-reply::before,
.weeb-interlude-reply::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 100%, 0 74%);
  pointer-events: none;
}
.weeb-interlude-reply::before {
  right: -35px;
  bottom: 16px;
  width: 43px;
  height: 38px;
  background: #08080d;
}
.weeb-interlude-reply::after {
  right: -25px;
  bottom: 21px;
  width: 34px;
  height: 28px;
  background: var(--yellow);
}
.weeb-interlude-warning span,
.weeb-interlude-warning strong,
.weeb-interlude-warning em,
.weeb-interlude-reply span,
.weeb-interlude-reply strong,
.weeb-interlude-reply em,
.weeb-interlude-baka span,
.weeb-interlude-baka strong { display: block; }
.weeb-interlude-warning span,
.weeb-interlude-reply span,
.weeb-interlude-baka span {
  margin-bottom: 7px;
  color: #b32268;
  font: 1000 24px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.weeb-interlude-warning strong { font-size: 39px; line-height: 1; }
.weeb-interlude-warning em { margin-top: 8px; font: 900 28px/1.05 var(--font-body); }
.weeb-interlude-reply strong { font-size: 50px; line-height: .9; }
.weeb-interlude-reply em { margin-top: 10px; font: 900 30px/1 var(--font-body); }
.weeb-interlude-reply--ren strong {
  font-size: 41px;
  line-height: .95;
}
.weeb-interlude-baka span {
  margin-bottom: 4px;
  font-size: 20px;
}
.weeb-interlude-baka strong { font-size: 34px; line-height: .95; }
.weeb-interlude-keyboard {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 65px;
  width: 900px;
  margin: 0;
  transform: translateX(-50%) rotate(-1deg);
}
.weeb-interlude-keyboard img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 18px 0 rgba(8,8,13,.45));
}
.weeb-interlude-keyboard figcaption {
  position: absolute;
  right: 24px;
  bottom: -26px;
  padding: 8px 14px 7px;
  border: 4px solid #08080d;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--cyan);
  font: 1000 15px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.weeb-interlude-verdict {
  position: absolute;
  z-index: 9;
  right: 400px;
  bottom: 42px;
  padding: 13px 22px 11px;
  border: 6px solid #08080d;
  background: var(--magenta);
  box-shadow: 9px 9px 0 #08080d;
  color: var(--paper);
  font-size: 28px;
  letter-spacing: .06em;
  transform: rotate(-4deg);
}
.reveal .slides section.weeb-model-m-interlude:has(.weeb-interlude-character--mio-baka.visible) .weeb-interlude-character--mio:not(.weeb-interlude-character--mio-baka) {
  opacity: 0;
  visibility: hidden;
}
.reveal .slides section.kk-boss-reveal .challenger-reaction {
  transition: opacity 180ms ease;
}
.reveal .slides section.kk-boss-reveal .challenger-reaction--revealed,
.reveal .slides section.kk-boss-reveal:has(.challenger-identity-reveal.visible) .challenger-reaction--waiting {
  opacity: 0;
}
.reveal .slides section.kk-boss-reveal:has(.challenger-identity-reveal.visible) .challenger-reaction--revealed {
  opacity: .34;
}
.reveal .slides section.kk-design-duel .discovery-reaction {
  opacity: 0;
  transition: opacity 180ms ease;
}
.reveal .slides section.kk-design-duel .discovery-reaction--question,
.reveal .slides section.kk-design-duel:has(.fork-panel[data-fragment-index="0"].visible) .discovery-reaction--converter,
.reveal .slides section.kk-design-duel:has(.fork-panel[data-fragment-index="1"].visible) .discovery-reaction--build,
.reveal .slides section.kk-design-duel:has(.manga-cameo[data-fragment-index="2"].visible) .discovery-reaction--velocity {
  opacity: .23;
}
.reveal .slides section.kk-design-duel:has(.fork-panel[data-fragment-index="0"].visible) .discovery-reaction--question,
.reveal .slides section.kk-design-duel:has(.fork-panel[data-fragment-index="1"].visible) .discovery-reaction--converter,
.reveal .slides section.kk-design-duel:has(.manga-cameo[data-fragment-index="2"].visible) .discovery-reaction--build {
  opacity: 0;
}
.kk-boss-reveal.present .chapter-inner,
.kk-boss-reveal .chapter-jp,
.kk-boss-reveal .challenger-reveal-stage,
.kk-boss-reveal .as-prop--lead {
  animation: none !important;
  transition: none !important;
}

/* 06 · the design fork reads as a two-page duel. */
.reveal .slides section.kk-design-duel {
  background:
    linear-gradient(90deg,
      rgba(53,214,208,.13) 0 50%,
      rgba(242,90,162,.13) 50% 100%),
    var(--paper);
}
.kk-design-duel::before {
  inset: 0;
  background:
    repeating-conic-gradient(from 3deg at 25% 64%, transparent 0 8deg, rgba(53,214,208,.08) 8.4deg 10deg),
    repeating-conic-gradient(from 3deg at 75% 64%, transparent 0 8deg, rgba(242,90,162,.07) 8.4deg 10deg);
  transform: none;
  animation: none !important;
}
.kk-design-duel .content {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}
.kk-design-duel .fork-panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 42px;
  height: 485px;
  margin-top: 24px;
}
.kk-design-duel .fork-panel {
  min-height: 0;
  height: 465px;
  padding: 30px 34px 76px;
  border-width: 8px;
  border-radius: 2px;
  box-shadow: 12px 12px 0 var(--tone), 20px 20px 0 #08080d;
  clip-path: none;
}
.kk-design-duel .fork-panel:nth-child(1),
.kk-design-duel .fork-panel:nth-child(2) { transform: none; }
.kk-design-duel .fork-panel .usb-icon { margin-top: 20px; }
.kk-design-duel .fork-panel .midi-build-image {
  width: 360px;
  height: 160px;
  margin-top: 18px;
}
.kk-design-duel .fork-panel .manga-sfx { right: 8px; bottom: 12px; }
.kk-design-duel .manga-cameo {
  z-index: 12;
  animation: none !important;
}
.kk-design-duel .eyebrow,
.kk-design-duel .fork-panel *,
.kk-design-duel .manga-cameo * {
  animation: none !important;
  transition: none !important;
}

/* 07 · tighten the mechanism page into an inked technical spread. */
.reveal .slides section.kk-mechanism-page {
  box-shadow: inset 0 0 0 9px #08080d, inset 0 0 0 14px var(--yellow), inset 0 0 0 18px #08080d;
}
.kk-mechanism-page .buckling-diagram-stage,
.kk-mechanism-page .buckling-verdict {
  border-radius: 0;
  transform: none;
}
.kk-mechanism-page,
.kk-mechanism-page::before,
.kk-mechanism-page .eyebrow,
.kk-mechanism-page .buckling-diagram-stage,
.kk-mechanism-page .buckling-verdict,
.kk-mechanism-page .big-copy {
  animation: none !important;
  transition: none !important;
}

/* 08 · two research clues become opposed evidence panels. */
.reveal .slides section.kk-clue-page {
  background:
    linear-gradient(104deg, rgba(126,99,200,.12) 0 49%, transparent 49.3%),
    linear-gradient(76deg, transparent 0 50.4%, rgba(53,214,208,.13) 50.7%),
    radial-gradient(circle at 1px 1px, rgba(8,8,13,.09) 1.2px, transparent 1.7px) 0 0 / 14px 14px,
    var(--paper);
}
.kk-clue-page::before {
  inset: -420px;
  background: repeating-conic-gradient(from 1deg at 50% 62%, transparent 0 8deg, rgba(8,8,13,.045) 8.4deg 10deg);
  transform: none;
}
.kk-clue-page .velocity-discovery-stage { position: relative; gap: 20px 42px; }
.kk-clue-page .velocity-discovery-card {
  border-width: 7px;
  border-radius: 2px;
}
.kk-clue-page .velocity-discovery-card--stacked,
.kk-clue-page .velocity-discovery-card--hall { transform: none; }
.kk-clue-page .velocity-clue-number { border-radius: 0; }
.kk-clue-page .velocity-discovery-photo,
.kk-clue-page .hall-discovery-photo,
.kk-clue-page .hall-discovery-path div,
.kk-clue-page .hall-discovery-trace { border-radius: 0; }
.kk-clue-reaction-frame {
  position: absolute;
  z-index: 9;
  right: 18px;
  top: -174px;
  width: 164px;
  height: 164px;
  overflow: hidden;
  border: 6px solid #08080d;
  background: var(--yellow);
  box-shadow: -8px 8px 0 var(--magenta), -13px 13px 0 #08080d;
  transform: rotate(3deg);
  pointer-events: none;
}
.kk-clue-reaction {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: contain;
  object-position: center 18%;
  transform: scale(1.45);
  transform-origin: center 22%;
}
.reveal .slides section.kk-clue-page .velocity-reaction {
  opacity: 0;
  transition: opacity 180ms ease;
}
.reveal .slides section.kk-clue-page .velocity-reaction--question,
.reveal .slides section.kk-clue-page:has(.velocity-discovery-card--stacked.visible) .velocity-reaction--stacked,
.reveal .slides section.kk-clue-page:has(.velocity-discovery-card--hall.visible) .velocity-reaction--hall {
  opacity: 1;
}
.reveal .slides section.kk-clue-page:has(.velocity-discovery-card--stacked.visible) .velocity-reaction--question,
.reveal .slides section.kk-clue-page:has(.velocity-discovery-card--hall.visible) .velocity-reaction--stacked {
  opacity: 0;
}
.reveal .slides section.open-source-parents-slide .open-source-reaction {
  opacity: 0;
  transition: none;
}
.reveal .slides section.open-source-parents-slide .open-source-reaction--search,
.reveal .slides section.open-source-parents-slide:has([data-tone="physical"].visible) .open-source-reaction--mechanical,
.reveal .slides section.open-source-parents-slide:has([data-tone="signal"].visible) .open-source-reaction--electrical,
.reveal .slides section.open-source-parents-slide:has(.source-result.visible) .open-source-reaction--result {
  opacity: .23;
}
.reveal .slides section.open-source-parents-slide:has([data-tone="physical"].visible) .open-source-reaction--search,
.reveal .slides section.open-source-parents-slide:has([data-tone="signal"].visible) .open-source-reaction--mechanical,
.reveal .slides section.open-source-parents-slide:has(.source-result.visible) .open-source-reaction--electrical {
  opacity: 0;
}

/* 09 · preserve the interruption layout while making the cut harsher. */
.reveal .slides section.kk-interruption-page {
  box-shadow: inset 0 0 0 10px var(--magenta), inset 0 0 0 17px #08080d;
}
.kk-interruption-page .interruption-progress { clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 100%); }
.kk-interruption-page .interruption-bubble .mb__body {
  clip-path: polygon(0 0, 96% 0, 100% 13%, 100% 100%, 5% 100%, 0 86%);
}
.kk-interruption-page .enterprise-jabs span { border-radius: 0; }
.kk-interruption-page .developer-window,
.kk-interruption-page .developer-id { border-radius: 0; }

/* 10 · a season-finale thesis page, still on the warm-paper palette. */
.reveal .slides section.kk-constraint-finale {
  background:
    repeating-conic-gradient(from -5deg at 50% 72%, transparent 0 7deg, rgba(53,214,208,.08) 7.4deg 9deg),
    radial-gradient(circle at 50% 72%, rgba(255,211,79,.22), transparent 46%),
    var(--paper);
  box-shadow: inset 0 0 0 10px #08080d, inset 0 0 0 16px var(--cyan), inset 0 0 0 20px #08080d;
}
.kk-constraint-finale .constraint-medium {
  border-width: 8px;
  border-radius: 2px;
  box-shadow: 12px 12px 0 var(--tone), 19px 19px 0 #08080d;
  transform: none;
}
.kk-constraint-finale .constraint-payoff {
  border-width: 6px;
  border-radius: 0;
  box-shadow: 9px 9px 0 var(--magenta), 15px 15px 0 #08080d;
}
.kk-constraint-finale .manga-cameo { z-index: 12; }
.kk-constraint-reaction {
  position: absolute;
  z-index: 10;
  right: 34px;
  bottom: -5px;
  width: 145px;
  height: 165px;
  object-fit: contain;
  filter: drop-shadow(-5px 4px 0 #08080d) drop-shadow(-9px 0 0 var(--yellow));
  transform: rotate(3deg);
  pointer-events: none;
}
.reveal .slides section.kk-constraint-finale .constraint-reaction {
  opacity: 0 !important;
  transition: none;
}
.reveal .slides section.kk-constraint-finale .constraint-reaction--question,
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-confident.visible) .constraint-reaction--pixel,
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-magic.visible) .constraint-reaction--chiptune,
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-dread.visible) .constraint-reaction--embedded {
  opacity: .16 !important;
}
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-confident.visible) .constraint-reaction--question,
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-magic.visible) .constraint-reaction--pixel,
.reveal .slides section.kk-constraint-finale:has(.constraint-medium.tone-dread.visible) .constraint-reaction--chiptune {
  opacity: 0 !important;
}

@keyframes hover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes alarm { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes titleDrift { from { transform: scale(1.005) translate3d(0,0,0); } to { transform: scale(1.025) translate3d(-6px,-2px,0); } }
@keyframes stampIn { 0% { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(.86); } 70% { transform: translateY(3px) rotate(1deg) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes chapterIn { 0% { opacity: 0; transform: scale(.9); letter-spacing: .08em; } 100% { opacity: 1; transform: scale(1); letter-spacing: normal; } }
@keyframes fragmentPunch { 0% { transform: scale(.8) rotate(-2deg); } 72% { transform: scale(1.055) rotate(.6deg); } 100% { transform: none; } }
@keyframes chaosPunch {
  0% { transform: scale(.72) rotate(calc(var(--r) - 6deg)); }
  72% { transform: scale(1.06) rotate(calc(var(--r) + 1deg)); }
  100% { transform: scale(1) rotate(var(--r)); }
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes floatStamp { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(.8deg); } }
@keyframes chromaDrift { 0%, 100% { transform: translateX(0); text-shadow: -7px 0 var(--cyan), 7px 7px var(--magenta); } 50% { transform: translateX(3px); text-shadow: -10px 2px var(--cyan), 4px 8px var(--magenta); } }
@keyframes objectivePulse { 0%, 100% { transform: scale(1); box-shadow: 15px 15px 0 var(--cyan); } 50% { transform: scale(1.018); box-shadow: 19px 19px 0 var(--cyan); } }
@keyframes statusBlink { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes cameoFloat { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-7px) rotate(5.4deg); } }
.hover { animation: hover 4s ease-in-out infinite; }
.alarm { animation: alarm .22s linear 3; }

.layout-title.present .title-art { animation: titleDrift 14s ease-out both; }
.slide.present .eyebrow { animation: stampIn .48s cubic-bezier(.22,1,.36,1) both; }
.layout-chapter.present .chapter-inner { animation: chapterIn .7s cubic-bezier(.22,1,.36,1) both; }

/* Slides 41–58 · final-arc manga pass
   The late deck keeps its technical diagrams and exact copy, but gains a
   stronger panel rhythm, screentone, ink framing, and anime-style staging. */
.reveal .slides section.slide.manga-final-arc {
  --arc-accent: var(--cyan);
  --arc-soft: rgba(53,214,208,.16);
  --arc-shadow: var(--magenta);
  box-shadow:
    inset 0 0 0 6px #101116,
    inset 0 0 0 11px rgba(255,253,244,.88);
}
.reveal .slides section.slide.manga-final-arc:not(.layout-chapter):not(.layout-demo):not(.manga-objective):not(.manga-closing-beat) {
  background:
    linear-gradient(118deg, transparent 0 68%, rgba(16,17,22,.11) 68.2% 68.8%, transparent 69% 100%),
    radial-gradient(circle at 1px 1px, rgba(16,17,22,.14) 1.35px, transparent 1.8px) 0 0 / 29px 29px,
    radial-gradient(circle at 82% 18%, var(--arc-soft), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.72), transparent 46%, var(--arc-soft)),
    var(--paper) !important;
}
.manga-final-arc:not(.layout-chapter):not(.layout-demo):not(.manga-objective):not(.manga-closing-beat)::before {
  inset: -18%;
  background:
    repeating-conic-gradient(from 6deg at 86% 20%, transparent 0 7deg, var(--arc-soft) 7.25deg 8.1deg),
    repeating-linear-gradient(102deg, transparent 0 72px, rgba(16,17,22,.025) 73px 75px, transparent 76px 118px);
  transform: none;
  opacity: 1;
}
.manga-final-arc > * { z-index: 2; }
.manga-final-arc .slide-head { display: inline-block; min-width: 720px; }
.manga-final-arc .slide-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  right: 7%;
  bottom: -18px;
  height: 15px;
  border: 3px solid #101116;
  background: var(--arc-accent);
  box-shadow: 7px 7px 0 var(--arc-shadow);
  transform: skewX(-18deg) rotate(-.35deg);
}
.manga-final-arc .slide-head h2 {
  text-shadow: 4px 4px 0 rgba(255,255,255,.9), 7px 7px 0 var(--arc-soft);
}
.manga-final-arc .eyebrow {
  border-radius: 2px 10px 2px 10px;
  box-shadow: 5px 5px 0 var(--arc-accent), 8px 8px 0 #101116;
  transform: rotate(-1.1deg);
}
.manga-final-arc .card,
.manga-final-arc .terminal,
.manga-final-arc .quest-card,
.manga-final-arc .pipeline-step,
.manga-final-arc .voice,
.manga-final-arc .wire-equation {
  border-radius: 2px 16px 3px 13px;
}
.manga-final-arc .card:nth-child(odd) { transform: rotate(-.32deg); }
.manga-final-arc .card:nth-child(even) { transform: rotate(.32deg); }

.manga-tech-action { --arc-accent: var(--cyan); --arc-soft: rgba(53,214,208,.2); --arc-shadow: #7257c2; }
.manga-debug-beat { --arc-accent: #8868d7; --arc-soft: rgba(136,104,215,.2); --arc-shadow: var(--yellow); }
.manga-character-beat { --arc-accent: var(--magenta); --arc-soft: rgba(242,90,162,.18); --arc-shadow: var(--cyan); }
.manga-system-beat { --arc-accent: #7257c2; --arc-soft: rgba(114,87,194,.18); --arc-shadow: var(--magenta); }
.manga-mode-beat { --arc-accent: var(--magenta); --arc-soft: rgba(242,90,162,.16); --arc-shadow: var(--cyan); }
.manga-retro-beat { --arc-accent: #d99a00; --arc-soft: rgba(255,211,79,.25); --arc-shadow: var(--magenta); }
.manga-boss-beat { --arc-accent: var(--red); --arc-soft: rgba(239,79,79,.17); --arc-shadow: var(--yellow); }
.manga-next-beat { --arc-accent: var(--yellow); --arc-soft: rgba(255,211,79,.24); --arc-shadow: var(--magenta); }
.manga-demo-beat { --arc-accent: var(--cyan); --arc-soft: rgba(53,214,208,.18); --arc-shadow: var(--magenta); }

/* Technical action panels. */
.manga-tech-action .codeblock {
  border-width: 6px;
  border-radius: 2px 18px 3px 13px;
  box-shadow: 11px 11px 0 var(--cyan), 17px 17px 0 #101116;
  transform: rotate(-.35deg);
}
.manga-tech-action .midi-packet {
  border-width: 5px;
  border-radius: 1px 13px 2px 10px;
  box-shadow: 7px 7px 0 var(--magenta);
  transform: rotate(.8deg);
}
.manga-tech-action .wire-equation {
  border: 5px solid #101116;
  background:
    repeating-conic-gradient(from 5deg at 92% 80%, transparent 0 11deg, rgba(242,90,162,.12) 11.3deg 13deg),
    #fff2b9;
  box-shadow: 8px 8px 0 var(--yellow), 13px 13px 0 #101116;
  transform: rotate(-.9deg);
}
.manga-tech-action .amp-source-visual {
  border-width: 6px;
  border-radius: 2px 17px 3px 11px;
  box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #101116;
  transform: rotate(-.45deg);
}
.manga-tech-action .amp-node { border-width: 5px; box-shadow: 7px 7px 0 #101116; }
.manga-tech-action .amp-node:nth-of-type(3) { transform: translateY(-9px) rotate(-1.4deg); box-shadow: 9px 9px 0 var(--magenta), 14px 14px 0 #101116; }

/* Debugging defeat: a six-panel tool spread leading to one dramatic reaction. */
.manga-debug-beat .debug-grid .card { border-width: 5px; box-shadow: 7px 7px 0 var(--card-tone), 11px 11px 0 #101116; }
.manga-debug-beat .reaction-debug-card.storyboard-debug-shot {
  border-width: 7px;
  border-radius: 1px 18px 2px 12px;
  box-shadow: 13px 13px 0 #8868d7, 20px 20px 0 #101116;
  transform: rotate(-.7deg);
}

/* Returning-character and character-sheet beats. */
.manga-character-beat.layout-chapter {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.11) 1.2px, transparent 1.7px) 0 0 / 26px 26px,
    repeating-conic-gradient(from 4deg at 50% 62%, transparent 0 7deg, rgba(242,90,162,.14) 7.2deg 8.7deg),
    var(--night) !important;
}
.manga-character-beat.layout-chapter::before {
  inset: -16%;
  background: repeating-conic-gradient(from 7deg at 50% 62%, transparent 0 8deg, rgba(53,214,208,.14) 8.2deg 9.2deg);
  transform: none;
}
.manga-character-beat.layout-chapter .chapter-inner h2 { text-shadow: -6px 0 var(--cyan), 7px 7px 0 var(--magenta), 12px 12px 0 #000; }
.manga-character-beat .phone-reveal-stage {
  border-width: 7px;
  border-radius: 2px 18px 3px 12px;
  box-shadow: 13px 13px 0 var(--magenta), 21px 21px 0 #000;
  transform: rotate(-.7deg);
}
.manga-character-beat.layout-split .slide-body { position: relative; isolation: isolate; }
.manga-character-beat.layout-split .slide-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 48%;
  top: -16px;
  width: 15px;
  height: 630px;
  border: 3px solid #101116;
  background: var(--magenta);
  box-shadow: 7px 0 0 var(--cyan);
  transform: rotate(5deg);
}
.manga-character-beat.layout-split .card:first-child { transform: rotate(-.8deg); box-shadow: 11px 11px 0 var(--magenta), 17px 17px 0 #101116; }
.manga-character-beat.layout-split .stack .card:nth-child(odd) { transform: translateX(7px) rotate(.5deg); }
.manga-character-beat.layout-split .stack .card:nth-child(even) { transform: translateX(-4px) rotate(-.45deg); }

/* System and mode diagrams read as connected manga panels. */
.manga-system-beat .pipeline { position: relative; padding: 32px 18px 39px; border: 6px solid #101116; background: rgba(255,253,244,.82); box-shadow: 12px 12px 0 #7257c2, 19px 19px 0 #101116; transform: rotate(-.35deg); }
.manga-system-beat .pipeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(110deg, transparent 0 45px, rgba(114,87,194,.08) 46px 49px, transparent 50px 78px);
  pointer-events: none;
}
.manga-system-beat .pipeline-step { position: relative; z-index: 1; border-width: 5px; box-shadow: 6px 6px 0 var(--arc-shadow); }
.manga-system-beat .pipeline-step:nth-of-type(4n+1) { transform: rotate(-1deg); }
.manga-system-beat .pipeline-step:nth-of-type(4n+3) { transform: rotate(.8deg); }
.manga-system-beat .grid-4 .card { border-width: 5px; min-height: 150px; display: grid; place-items: center; text-align: center; }

.manga-mode-beat .voice-tree {
  position: relative;
  width: 1120px;
  padding: 44px 58px;
  border: 7px solid #101116;
  background:
    repeating-conic-gradient(from 2deg at 22% 50%, transparent 0 10deg, rgba(242,90,162,.14) 10.3deg 11.8deg),
    rgba(255,253,244,.92);
  box-shadow: 13px 13px 0 var(--magenta), 21px 21px 0 #101116;
  transform: rotate(-.5deg);
}
.manga-mode-beat .voice-source { border-width: 6px; box-shadow: 10px 10px 0 var(--yellow), 16px 16px 0 #101116; }
.manga-mode-beat .voice { border-width: 5px; box-shadow: 7px 7px 0 var(--cyan), 11px 11px 0 #101116; }
.manga-mode-beat.layout-split .slide-body { position: relative; gap: 58px; }
.manga-mode-beat.layout-split .slide-body::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -24px;
  width: 18px;
  height: 650px;
  background: #101116;
  box-shadow: 8px 0 0 var(--cyan);
  transform: translateX(-50%) rotate(7deg);
}
.manga-mode-beat.layout-split .card { position: relative; z-index: 1; min-height: 380px; display: grid; align-content: center; border-width: 6px; }
.manga-mode-beat.layout-split .card:first-child { transform: rotate(-1.1deg); box-shadow: 12px 12px 0 var(--magenta), 19px 19px 0 #101116; }
.manga-mode-beat.layout-split .card:last-child { transform: rotate(.9deg); box-shadow: 12px 12px 0 var(--cyan), 19px 19px 0 #101116; }
.manga-mode-beat--harmony .card:last-child { box-shadow: 12px 12px 0 var(--yellow), 19px 19px 0 #101116; }

/* Retrospective contact sheets. */
.manga-retro-beat .terminal { border-width: 6px; box-shadow: 11px 11px 0 var(--cyan), 17px 17px 0 #101116; }
.manga-retro-beat .terminal:first-child { transform: rotate(-.8deg); }
.manga-retro-beat .terminal:last-child { transform: rotate(.7deg); box-shadow: 11px 11px 0 var(--magenta), 17px 17px 0 #101116; }
.manga-retro-beat.layout-gallery .content { gap: 30px; perspective: 1200px; }
.manga-retro-beat.layout-gallery .card { min-height: 235px; display: grid; align-content: center; border-width: 6px; box-shadow: 10px 10px 0 var(--card-tone), 16px 16px 0 #101116; }
.manga-retro-beat.layout-gallery .card:nth-child(3n+1) { transform: rotate(-1.1deg); }
.manga-retro-beat.layout-gallery .card:nth-child(3n+2) { transform: translateY(-8px) rotate(.4deg); }
.manga-retro-beat.layout-gallery .card:nth-child(3n) { transform: rotate(1deg); }

/* Boss, preview, and demo escalation. */
.manga-boss-beat::before {
  inset: -25%;
  background:
    repeating-conic-gradient(from 3deg at 82% 52%, transparent 0 5deg, rgba(239,79,79,.16) 5.2deg 6.5deg),
    radial-gradient(circle at 1px 1px, rgba(16,17,22,.12) 1.3px, transparent 1.8px) 0 0 / 24px 24px;
  transform: rotate(-2deg);
}
.manga-boss-beat .issue-card { border-width: 4px; border-radius: 1px 9px 2px 7px; }
.manga-next-beat .quest-log { perspective: 900px; }
.manga-next-beat .quest-log > div {
  border: 4px solid #101116;
  background: rgba(16,17,22,.94);
  color: var(--paper);
  box-shadow: 7px 7px 0 var(--yellow);
}
.manga-next-beat .quest-log > div:nth-child(odd) { transform: rotate(-.5deg); }
.manga-next-beat .quest-log > div:nth-child(even) { transform: translateX(11px) rotate(.35deg); }
.manga-demo-beat:not(.layout-demo) .terminal { border-width: 6px; box-shadow: 11px 11px 0 var(--cyan), 17px 17px 0 #101116; transform: rotate(-.7deg); }
.manga-demo-beat:not(.layout-demo) .quest-card { border-width: 6px; box-shadow: 12px 12px 0 var(--yellow), 19px 19px 0 #101116; transform: rotate(1deg); }
.manga-demo-beat.layout-demo {
  background:
    repeating-conic-gradient(from 4deg at 50% 46%, transparent 0 5deg, rgba(53,214,208,.13) 5.2deg 6.2deg),
    radial-gradient(circle at 50% 46%, rgba(242,90,162,.24), transparent 27%),
    var(--night) !important;
}
.manga-demo-beat.layout-demo::before {
  inset: -35%;
  background: repeating-conic-gradient(from 8deg at 50% 46%, transparent 0 7deg, rgba(255,255,255,.055) 7.2deg 8deg);
  transform: none;
}
.manga-demo-beat.layout-demo h2 { color: var(--paper); text-shadow: -9px 0 var(--cyan), 9px 9px 0 var(--magenta), 16px 16px 0 #000 !important; transform: rotate(-1deg); }
.manga-demo-beat.layout-demo .status-light {
  padding: 13px 17px;
  border: 4px solid var(--paper);
  background: #101116;
  box-shadow: 6px 6px 0 var(--magenta);
  transform: rotate(-.6deg);
}
.manga-demo-beat.layout-demo .status-light:nth-child(even) { transform: rotate(.6deg); box-shadow-color: var(--cyan); }

/* Finale and closing key art. */
.manga-finale-beat { box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 14px #101116 !important; }
.manga-finale-beat::before {
  inset: -30%;
  background:
    repeating-conic-gradient(from 2deg at 50% 54%, transparent 0 6deg, rgba(53,214,208,.12) 6.2deg 7.2deg),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1.2px, transparent 1.7px) 0 0 / 25px 25px;
  transform: none;
}
.manga-closing-beat { display: block !important; padding: 0 !important; background: var(--cream) !important; text-align: left !important; }
.manga-closing-beat .closing-cast {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manga-closing-beat::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(255,253,244,.98) 0 38%, rgba(255,253,244,.88) 49%, rgba(255,253,244,.18) 68%, transparent 79%),
    linear-gradient(0deg, rgba(16,17,22,.18), transparent 32%);
  transform: none;
}
.manga-closing-beat > div {
  position: absolute;
  z-index: 3;
  left: 76px;
  top: 50%;
  width: 760px;
  transform: translateY(-50%) rotate(-.6deg);
}
.manga-closing-beat blockquote {
  max-width: 720px;
  padding: 38px 42px 44px;
  border: 7px solid #101116;
  background: rgba(255,253,244,.93);
  box-shadow: 14px 14px 0 var(--cyan), 22px 22px 0 #101116;
  font-size: 54px;
  line-height: 1.06;
}
.manga-closing-beat cite {
  display: inline-block;
  margin: 38px 0 0 26px;
  padding: 12px 16px;
  border: 4px solid #101116;
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
  transform: rotate(1.4deg);
}
.manga-closing-beat::after { z-index: 4; color: var(--paper); text-shadow: 2px 2px 0 #101116; }

@media (prefers-reduced-motion: reduce) {
  .manga-final-arc .card,
  .manga-final-arc .terminal,
  .manga-final-arc .pipeline,
  .manga-final-arc .voice-tree,
  .manga-final-arc .codeblock,
  .manga-closing-beat > div { transition: none !important; }
}

/* Live demo splash: a full-bleed anime showtime card with live, editable type. */
.reveal .slides section.slide.live-demo-splash {
  /* Reveal slides must stay out of flow or every later slide is displaced. */
  position: absolute;
  isolation: isolate;
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 65%, rgba(255,211,79,.2), transparent 31%),
    linear-gradient(145deg, rgba(53,214,208,.17), transparent 44%),
    #10182b !important;
  color: var(--paper) !important;
  text-align: left !important;
  box-shadow:
    inset 0 0 0 8px var(--paper),
    inset 0 0 0 15px #080b12,
    inset 0 0 0 21px var(--cyan) !important;
}
.manga-demo-beat.layout-demo.live-demo-splash::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,211,79,.35) 1.4px, transparent 1.9px) 0 0 / 24px 24px,
    repeating-conic-gradient(from -5deg at 27% 66%, transparent 0 7deg, rgba(53,214,208,.22) 7.2deg 8.4deg),
    linear-gradient(150deg, rgba(242,90,162,.18), transparent 47%);
  clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%);
  opacity: .78;
  transform: none;
  pointer-events: none;
}
.live-demo-splash::after {
  content: "";
  z-index: 9;
  left: auto;
  right: 62px;
  bottom: 25px;
  color: var(--paper);
  text-shadow: 2px 2px 0 #080b12;
}
.live-demo-art {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 950px;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-left: 7px solid var(--paper);
  box-shadow: -11px 0 0 var(--magenta), -20px 0 0 var(--cyan);
  filter: saturate(1.1) contrast(1.04) brightness(1.035);
}
.live-demo-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,18,35,.98) 0 36%, rgba(10,18,35,.91) 41%, rgba(10,18,35,.25) 51%, transparent 62%),
    linear-gradient(0deg, rgba(5,9,16,.48) 0, transparent 23%),
    linear-gradient(180deg, rgba(5,9,16,.22) 0, transparent 18%);
  pointer-events: none;
}
.live-demo-frame {
  position: absolute;
  z-index: 8;
  inset: 27px;
  border: 4px solid rgba(255,253,244,.9);
  pointer-events: none;
}
.live-demo-frame::before,
.live-demo-frame::after {
  content: "";
  position: absolute;
  background: var(--magenta);
  box-shadow: 0 0 16px rgba(242,90,162,.78);
}
.live-demo-frame::before { top: -10px; left: 84px; width: 310px; height: 16px; }
.live-demo-frame::after { right: -10px; bottom: 102px; width: 16px; height: 245px; background: var(--cyan); box-shadow: 0 0 16px rgba(53,214,208,.78); }
.live-demo-frame i { position: absolute; width: 54px; height: 54px; border-color: var(--yellow); border-style: solid; }
.live-demo-frame i:nth-child(1) { top: 13px; left: 13px; border-width: 6px 0 0 6px; }
.live-demo-frame i:nth-child(2) { top: 13px; right: 13px; border-width: 6px 6px 0 0; }
.live-demo-frame i:nth-child(3) { right: 13px; bottom: 13px; border-width: 0 6px 6px 0; }
.live-demo-frame i:nth-child(4) { left: 13px; bottom: 13px; border-width: 0 0 6px 6px; }
.live-demo-copy {
  position: absolute;
  z-index: 5;
  top: 78px;
  left: 91px;
  width: 520px;
}
.live-demo-kicker {
  display: inline-flex;
  align-items: stretch;
  border: 4px solid #080b12;
  background: var(--yellow);
  color: #080b12;
  box-shadow: 8px 8px 0 var(--magenta);
  transform: rotate(-1.5deg);
}
.live-demo-kicker span,
.live-demo-kicker b { display: block; padding: 10px 17px 9px; }
.live-demo-kicker span { font: 1000 24px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; letter-spacing: .12em; }
.live-demo-kicker b { border-left: 4px solid #080b12; background: var(--paper); font: 1000 15px/1.15 ui-monospace, monospace; letter-spacing: .1em; }
.live-demo-splash .live-demo-copy h2 {
  margin: 29px 0 0;
  color: var(--paper);
  font: 1000 145px/.8 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.11em;
  text-shadow:
    -8px 0 0 var(--cyan),
    9px 9px 0 var(--magenta),
    18px 18px 0 #000 !important;
  transform: rotate(-2deg);
}
.live-demo-copy p {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 27px 0 0 12px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: .03em;
}
.live-demo-copy p strong {
  padding: 11px 15px 9px;
  border: 4px solid var(--paper);
  background: rgba(5,13,22,.88);
  color: var(--cyan);
  box-shadow: 6px 6px 0 var(--magenta);
  font: 1000 25px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.live-demo-copy p span { color: var(--yellow); font-size: 34px; }
.live-demo-copy p em { color: var(--paper); font-style: normal; font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.live-demo-phone {
  position: absolute;
  z-index: 6;
  left: 82px;
  bottom: 38px;
  display: block;
  width: 445px;
  height: auto;
  filter: drop-shadow(0 22px 18px rgba(5,9,16,.72));
  transform: rotate(-1.5deg);
  transform-origin: 55% 80%;
}
.live-demo-phone-stage {
  position: absolute;
  z-index: 4;
  left: 53px;
  bottom: 28px;
  width: 510px;
  height: 330px;
  border: 6px solid var(--paper);
  border-radius: 50%;
  background:
    radial-gradient(circle at 1px 1px, rgba(8,11,18,.26) 1.6px, transparent 2.2px) 0 0 / 19px 19px,
    linear-gradient(145deg, #ffe272, var(--yellow));
  box-shadow: 10px 10px 0 var(--magenta), 18px 18px 0 rgba(5,9,16,.72);
  transform: rotate(-4deg);
}
.live-demo-phone-stage::before,
.live-demo-phone-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 76px;
  height: 22px;
  background: var(--cyan);
  box-shadow: 0 0 0 5px #080b12;
}
.live-demo-phone-stage::before { top: 35px; left: -39px; transform: rotate(-18deg); }
.live-demo-phone-stage::after { right: -35px; bottom: 46px; background: var(--magenta); transform: rotate(17deg); }

@media (prefers-reduced-motion: no-preference) {
  .live-demo-splash.present .live-demo-art { animation: liveDemoPush 14s ease-out both; }
  .live-demo-splash.present .live-demo-copy { animation: liveDemoCopyIn .65s cubic-bezier(.16,1,.3,1) both; }
  .live-demo-splash.present .live-demo-phone { animation: liveDemoPhoneIn .72s .12s cubic-bezier(.16,1,.3,1) both; }
  .live-demo-splash.present .live-demo-phone-stage { animation: liveDemoStageIn .62s .06s cubic-bezier(.16,1,.3,1) both; }
  .live-demo-splash.present .live-demo-frame::before { animation: liveDemoSignal 2.2s ease-in-out infinite alternate; }
}
@keyframes liveDemoPush { from { transform: scale(1.025); } to { transform: scale(1.07) translateX(-9px); } }
@keyframes liveDemoCopyIn { from { opacity: 0; transform: translateX(-70px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes liveDemoPhoneIn { from { opacity: 0; transform: translateY(90px) rotate(4deg) scale(.82); } to { opacity: 1; transform: rotate(-1.5deg) scale(1); } }
@keyframes liveDemoStageIn { from { opacity: 0; transform: rotate(-8deg) scale(.72); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes liveDemoSignal { to { background: var(--cyan); box-shadow: 0 0 22px rgba(53,214,208,.9); } }

@media (prefers-reduced-motion: reduce) {
  .live-demo-splash .live-demo-art,
  .live-demo-splash .live-demo-copy,
  .live-demo-splash .live-demo-phone,
  .live-demo-splash .live-demo-phone-stage,
  .live-demo-splash .live-demo-frame::before { animation: none !important; }
}

.reveal .slides section .fragment.step-pop {
  opacity: 0;
  transform: translateY(28px) scale(.95);
  transition: opacity .38s ease, transform .48s cubic-bezier(.22,1,.36,1);
}
.reveal .slides section .fragment.step-pop.visible {
  opacity: 1;
  transform: none;
}
.reveal .slides section .fragment.step-wipe {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.22,1,.36,1);
}
.reveal .slides section .fragment.step-wipe.visible { clip-path: inset(0); }
.reveal .slides section .fragment.step-panel {
  opacity: 0;
  translate: 0 14px;
  scale: .985;
  transition:
    opacity .34s ease,
    translate .44s cubic-bezier(.22,1,.36,1),
    scale .44s cubic-bezier(.22,1,.36,1);
}
.reveal .slides section .fragment.step-panel.visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.reveal .slides section .fragment.step-rise {
  opacity: 0;
  translate: 0 18px;
  scale: .98;
  transition:
    opacity .32s ease,
    translate .42s cubic-bezier(.22,1,.36,1),
    scale .42s cubic-bezier(.22,1,.36,1);
}
.reveal .slides section .fragment.step-rise.visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.reveal .slides section .fragment.step-punch { opacity: 0; }
.reveal .slides section .fragment.step-punch.visible {
  opacity: 1;
  animation: fragmentPunch .46s cubic-bezier(.22,1,.36,1) both;
}
.reveal .slides section .issue-chaos .fragment.step-punch.visible {
  animation: chaosPunch .46s cubic-bezier(.22,1,.36,1) both;
}
.reveal .slides section .fragment.current-fragment.step-focus {
  color: var(--charcoal);
  background: var(--yellow);
  box-shadow: 0 0 0 8px var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .reveal .slides section.slide { box-shadow: none !important; }
  .jp-slide-number { display: none !important; }
}

/* keyboard-keyboard cut: KiCad schematics in one readable, practical frame. */
.kicad-roadmap-slide .slide-head h2 { max-width: 1400px; font-size: 58px; }
.kicad-roadmap-slide .slide-head h2 em { color: #087f83; font-style: normal; }
.kicad-roadmap-stage {
  display: grid;
  grid-template-rows: 92px 375px 72px;
  gap: 18px;
  width: 100%;
  max-width: none !important;
  margin-top: 24px;
}
.kicad-roadmap-app {
  position: relative;
  display: grid;
  grid-template-columns: 68px auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 25px;
  border: 5px solid var(--charcoal);
  background: #3372cf;
  box-shadow: 9px 9px 0 var(--charcoal);
  color: var(--paper);
  transform: rotate(-.25deg);
}
.kicad-roadmap-app::after {
  content: "THE WHOLE WORKBENCH";
  position: absolute;
  right: 22px;
  top: -16px;
  padding: 7px 11px 5px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  color: var(--charcoal);
  font: 1000 13px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  transform: rotate(2deg);
}
.kicad-roadmap-app-icon {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  border: 4px solid var(--paper);
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.36) 49% 52%, transparent 53%),
    linear-gradient(transparent 48%, rgba(255,255,255,.36) 49% 52%, transparent 53%);
  background-size: 17px 17px;
  box-shadow: 5px 5px 0 var(--charcoal);
  transform: rotate(-3deg);
}
.kicad-roadmap-app-icon i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--charcoal);
  border-radius: 50%;
  background: var(--yellow);
}
.kicad-roadmap-app-icon i:nth-child(1) { left: 9px; top: 10px; }
.kicad-roadmap-app-icon i:nth-child(2) { right: 8px; top: 15px; }
.kicad-roadmap-app-icon i:nth-child(3) { left: 20px; bottom: 8px; }
.kicad-roadmap-app-icon i:nth-child(4) { right: 7px; bottom: 12px; }
.kicad-roadmap-app > span:nth-child(2) { display: grid; gap: 2px; }
.kicad-roadmap-app small { color: #d8e7ff; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .13em; }
.kicad-roadmap-app strong { color: var(--paper); font-size: 38px; line-height: 1; text-shadow: 4px 4px 0 var(--charcoal); }
.kicad-roadmap-app p {
  justify-self: end;
  margin-right: 205px;
  color: var(--paper);
  font-size: 23px;
  font-weight: 850;
}
.kicad-roadmap-flow {
  display: grid;
  grid-template-columns: 1fr 68px 1fr 68px 1fr;
  align-items: center;
  gap: 13px;
}
.kicad-roadmap-card {
  position: relative;
  display: grid;
  grid-template-rows: 175px auto auto auto;
  min-width: 0;
  height: 360px;
  padding: 15px 18px 18px;
  border: 5px solid var(--charcoal);
  box-shadow: 8px 8px 0 var(--charcoal);
  color: var(--charcoal);
}
.kicad-roadmap-card--schematic { background: #cef5f1; transform: rotate(-.7deg); }
.kicad-roadmap-card--pcb { background: #fff0a9; transform: translateY(5px) rotate(.55deg); }
.kicad-roadmap-card--gerber { background: #ffd9e9; transform: rotate(-.35deg); }
.kicad-roadmap-card figure {
  position: relative;
  margin: 0 0 12px;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  background: #101318;
}
.kicad-roadmap-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kicad-roadmap-card--schematic figure img { object-position: 53% 49%; }
.kicad-roadmap-card--pcb figure img { object-fit: contain; filter: brightness(1.14) saturate(1.08); }
.kicad-roadmap-card--gerber figure img { height: auto; transform: translateY(-56px) scale(1.03); transform-origin: top center; }
.kicad-roadmap-number {
  position: absolute;
  z-index: 3;
  right: 8px;
  top: 4px;
  color: var(--paper);
  font: 1000 45px/1 ui-monospace, monospace;
  -webkit-text-stroke: 2px var(--charcoal);
  text-shadow: 3px 3px 0 var(--magenta);
  transform: rotate(4deg);
}
.kicad-roadmap-card > small { color: #52665f; font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .13em; }
.kicad-roadmap-card h3 { margin-top: 5px; font-size: 38px; line-height: 1; }
.kicad-roadmap-card p { margin-top: 6px; font-size: 20px; font-weight: 850; line-height: 1.12; }
.kicad-roadmap-arrow {
  color: var(--magenta);
  font: 1000 58px/1 ui-monospace, monospace;
  text-align: center;
  text-shadow: 3px 3px 0 var(--charcoal);
}
.kicad-roadmap-payoff {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 22px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 8px 8px 0 var(--cyan);
  color: var(--paper);
}
.kicad-roadmap-payoff strong { color: var(--yellow); font-size: 23px; }
.kicad-roadmap-payoff span {
  padding-left: 24px;
  border-left: 3px solid var(--paper);
  color: var(--paper);
  font: 850 17px/1.2 ui-monospace, monospace;
}

.kicad-schematic-slide .slide-head h2 { max-width: 1400px; font-size: 53px; }
.kicad-schematic-slide .slide-head h2 em { color: #087f83; font-style: normal; }
.kicad-schematic-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .65fr);
  gap: 28px;
  max-width: 1448px !important;
  height: 570px;
  margin-top: 25px;
}
.schematic-canvas {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 64px;
  min-width: 0;
  height: 570px;
  margin: 0;
  overflow: hidden;
  border: 5px solid #08080d;
  border-radius: 14px;
  background: #fbfbf6;
  box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #08080d;
}
.schematic-canvas-bar {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 17px;
  border-bottom: 3px solid #08080d;
  background: #25312e;
  color: var(--paper);
}
.schematic-canvas-bar > span { display: flex; gap: 8px; }
.schematic-canvas-bar i { width: 13px; height: 13px; border: 2px solid #08080d; border-radius: 50%; background: var(--magenta); }
.schematic-canvas-bar i:nth-child(2) { background: var(--yellow); }
.schematic-canvas-bar i:nth-child(3) { background: var(--cyan); }
.schematic-canvas-bar strong { color: var(--paper); font-size: 16px; letter-spacing: .03em; }
.schematic-canvas-bar code { color: #afc8bf; font-size: 13px; }
.schematic-example {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(20,44,38,.075) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(20,44,38,.075) 1px, transparent 1px) 0 0 / 20px 20px,
    #fbfbf6;
}
.schematic-symbol { fill: #fffefa; stroke: #6f35a5; stroke-width: 4; }
.schematic-symbol path { fill: none; }
.schematic-example text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.schematic-symbol text { stroke: none; }
.schematic-ref { fill: #c33b83; font-size: 20px; font-weight: 1000; text-anchor: middle; }
.schematic-value { fill: #2a6d65; font-size: 15px; font-weight: 950; text-anchor: middle; }
.pin-name { fill: #6f35a5; font-size: 13px; font-weight: 900; text-anchor: start; }
.pin-name-right { text-anchor: end; }
.pin-number { fill: #b24747; font-size: 12px; font-weight: 900; text-anchor: end; }
.schematic-wires { fill: #17896f; stroke: #17896f; stroke-width: 4; stroke-linecap: square; stroke-linejoin: round; }
.schematic-wires path { fill: none; }
.schematic-wires .schematic-testpoint { fill: #fbfbf6; }
.schematic-labels { fill: #fff3bd; stroke: #17896f; stroke-width: 3; }
.schematic-labels text { fill: #116951; stroke: none; font-size: 13px; font-weight: 1000; text-anchor: middle; }
.schematic-callout { fill: var(--charcoal); stroke: var(--charcoal); stroke-width: 3; }
.schematic-callout > path { fill: none; stroke-dasharray: 7 6; }
.schematic-callout > rect { fill: var(--yellow); }
.schematic-callout text { fill: var(--charcoal); stroke: none; font-size: 12px; font-weight: 1000; text-anchor: middle; letter-spacing: .03em; }
.callout-wire > rect { fill: #d7f5ef; }
.callout-label > rect { fill: #ffe1ef; }
.schematic-canvas figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-top: 3px solid #08080d;
  background: #e9eee7;
}
.schematic-canvas figcaption span { padding: 6px 9px; background: var(--yellow); font: 1000 12px/1 ui-monospace, monospace; text-transform: uppercase; }
.schematic-canvas figcaption b { color: var(--forest); font: 1000 18px/1 ui-monospace, monospace; }
img.schematic-example.board-render {
  padding: 26px;
  background: #101916;
  object-fit: contain;
  filter: brightness(1.3) saturate(1.15);
}
img.schematic-example.real-schematic-render {
  object-fit: cover;
  object-position: center;
}
.schematic-howto {
  display: grid;
  grid-template-rows: repeat(5, 74px) 1fr;
  align-content: stretch;
  gap: 10px;
  min-width: 0;
}
.schematic-howto.schematic-overview {
  grid-template-rows: repeat(3, 112px) 1fr;
  gap: 16px;
}
.schematic-howto.pcb-overview {
  grid-template-rows: repeat(4, 88px) 1fr;
  gap: 12px;
}
.pcb-overview .schematic-action {
  grid-template-columns: 46px 1fr;
}
.schematic-overview .schematic-action {
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 14px 16px;
}
.schematic-overview .schematic-action > b {
  width: 54px;
  height: 54px;
  font-size: 24px;
}
.schematic-overview .schematic-action strong { font-size: 23px; }
.schematic-overview .schematic-action small { margin-top: 7px; font-size: 15px; line-height: 1.15; }
.schematic-action {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 12px;
  border: 3px solid #08080d;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--sage);
}
.schematic-action > b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #08080d;
  background: var(--cyan);
  color: var(--charcoal);
  font: 1000 21px/1 ui-monospace, monospace;
}
.schematic-action:nth-child(3) > b { background: var(--yellow); }
.schematic-action:nth-child(4) > b { background: #ffe1ef; }
.schematic-action:nth-child(5) > b { background: #dff4e6; }
.schematic-action span { display: grid; min-width: 0; }
.schematic-action strong { color: var(--ink); font-size: 20px; line-height: 1; }
.schematic-action small { margin-top: 5px; color: #52665f; font-size: 13px; line-height: 1.08; font-weight: 850; }
.schematic-action kbd {
  padding: 5px 7px;
  border: 2px solid #08080d;
  border-radius: 5px;
  background: #e7e7df;
  box-shadow: 0 3px 0 #08080d;
  font: 900 11px/1 ui-monospace, monospace;
}
.schematic-rule {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 13px;
  min-height: 90px;
  padding: 12px 14px;
  border: 4px solid #08080d;
  border-radius: 10px;
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
}
.schematic-rule > span { font: 1000 20px/1.05 "Hiragino Sans", "Yu Gothic", sans-serif; text-align: center; }
.schematic-rule p { font-size: 17px; line-height: 1.08; }
.schematic-rule p strong { display: block; color: var(--ink); }
.schematic-rule p small { display: block; margin-top: 5px; color: #624c17; font-size: 12px; font-weight: 850; }

/* Keyboard-keyboard · electronics field guide */
.electronics-datasheet-slide::before,
.breadboard-poc-slide::before,
.component-constraints-slide::before,
.factory-assembly-slide::before,
.electronics-community-slide::before,
.board-review-slide::before,
.pcb-toolbelt-slide::before,
.pcb-bodge-slide::before,
.pcb-rework-slide::before {
  inset: 0;
  width: auto;
  height: auto;
  background:
    repeating-conic-gradient(from 5deg at 88% 18%, transparent 0 8deg, rgba(21,32,29,.045) 8.3deg 9deg),
    radial-gradient(circle at 88% 18%, rgba(53,214,208,.13), transparent 30%);
  transform: none;
}
.electronics-datasheet-slide .slide-head h2,
.breadboard-poc-slide .slide-head h2,
.component-constraints-slide .slide-head h2,
.factory-assembly-slide .slide-head h2,
.electronics-community-slide .slide-head h2,
.board-review-slide .slide-head h2,
.pcb-toolbelt-slide .slide-head h2,
.pcb-bodge-slide .slide-head h2,
.pcb-rework-slide .slide-head h2 { max-width: 1320px; }

/* 16 · Datasheets */
.electronics-datasheet-stage {
  display: grid;
  grid-template-columns: 505px 1fr;
  grid-template-rows: 500px 78px;
  gap: 22px 34px;
  width: 100%;
  max-width: none !important;
  margin-top: 22px;
}
.datasheet-page {
  position: relative;
  grid-row: 1 / 3;
  height: 600px;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--charcoal);
  background: white;
  box-shadow: 10px 10px 0 var(--charcoal);
  transform: rotate(-1deg);
}
.datasheet-page img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.datasheet-page::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(239,79,79,.25); pointer-events: none; }
.datasheet-page figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 13px 8px;
  border-top: 4px solid var(--charcoal);
  background: var(--red);
  color: white;
  font: 1000 13px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.datasheet-stamp {
  position: absolute;
  right: 12px;
  top: 13px;
  padding: 8px 10px 6px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--charcoal);
  font: 1000 14px/1 ui-monospace, monospace;
  transform: rotate(3deg);
}
.datasheet-lessons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.datasheet-lesson {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 20px 18px 17px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--charcoal);
}
.datasheet-lesson:nth-child(1) { background: #cef5f1; transform: rotate(-.6deg); }
.datasheet-lesson:nth-child(2) { background: #fff0a9; transform: rotate(.45deg); }
.datasheet-lesson:nth-child(3) { background: #ffd9e9; transform: rotate(.45deg); }
.datasheet-lesson:nth-child(4) { background: #dfe8ff; transform: rotate(-.35deg); }
.datasheet-lesson > b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 4px solid var(--charcoal);
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 23px/1 ui-monospace, monospace;
}
.datasheet-lesson div { min-width: 0; }
.datasheet-lesson small { display: block; margin-bottom: 7px; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .13em; }
.datasheet-lesson strong { display: block; color: var(--charcoal); font-size: 23px; line-height: 1.05; }
.datasheet-lesson span { display: block; margin-top: 8px; color: #40564e; font-size: 15px; font-weight: 800; line-height: 1.1; }
.datasheet-payoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 22px 15px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 8px 8px 0 var(--red);
  color: white;
  transform: rotate(.2deg);
}
.datasheet-payoff strong { color: var(--yellow); font-size: 23px; }
.datasheet-payoff span { max-width: 420px; padding-left: 22px; border-left: 3px solid var(--cyan); font-size: 19px; font-weight: 850; line-height: 1.1; text-align: right; }
.datasheet-sama {
  position: absolute;
  z-index: 12;
  right: -12px;
  bottom: -18px;
  width: 235px;
  padding: 10px 13px 9px;
  border: 5px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 7px 7px 0 var(--magenta);
  color: var(--charcoal);
  text-align: center;
  transform: rotate(-4deg);
}
.datasheet-sama span,
.datasheet-sama strong { display: block; }
.datasheet-sama span { color: #a52060; font: 1000 14px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.datasheet-sama strong { margin-top: 5px; font: 1000 16px/.96 ui-monospace, monospace; letter-spacing: .03em; }

/* 16a · Breadboard proof of concept */
.breadboard-poc-stage {
  display: grid;
  grid-template-columns: 735px 1fr;
  grid-template-rows: 493px 88px;
  gap: 22px 32px;
  width: 100%;
  max-width: none !important;
  margin-top: 22px;
}
.breadboard-poc-photo {
  position: relative;
  grid-row: 1 / 3;
  height: 603px;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 10px 10px 0 var(--charcoal);
  transform: rotate(-.65deg);
}
.breadboard-poc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
}
.breadboard-poc-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 15px 9px;
  border-top: 4px solid var(--charcoal);
  background: var(--cyan);
  color: var(--charcoal);
}
.breadboard-poc-photo figcaption b { font: 1000 15px/1 ui-monospace, monospace; letter-spacing: .12em; }
.breadboard-poc-photo figcaption span { font-size: 15px; font-weight: 900; }
.breadboard-poc-stamp {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 9px 12px 7px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--magenta), 8px 8px 0 var(--charcoal);
  color: var(--charcoal);
  font: 1000 17px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  transform: rotate(4deg);
}
.breadboard-poc-steps { display: grid; grid-template-rows: repeat(4, 1fr); gap: 15px; }
.breadboard-poc-step {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 13px 18px 12px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--charcoal);
}
.breadboard-poc-step--question { background: #ffd9e9; transform: rotate(.35deg); }
.breadboard-poc-step--wire { background: #dfe8ff; transform: rotate(-.3deg); }
.breadboard-poc-step--measure { background: #fff0a9; transform: rotate(.3deg); }
.breadboard-poc-step--prove { background: #cef5f1; transform: rotate(-.25deg); }
.breadboard-poc-step > b {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 4px solid var(--charcoal);
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 22px/1 ui-monospace, monospace;
}
.breadboard-poc-step small { display: block; margin-bottom: 6px; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .13em; }
.breadboard-poc-step strong { display: block; color: var(--charcoal); font-size: 22px; line-height: 1.08; }
.breadboard-poc-payoff {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px 18px;
  padding: 13px 18px 11px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 8px 8px 0 var(--magenta);
  color: white;
}
.breadboard-poc-payoff > span {
  grid-row: 1 / 3;
  padding: 9px 10px 7px;
  background: var(--yellow);
  color: var(--charcoal);
  font: 1000 15px/1 "Hiragino Sans", "Yu Gothic", sans-serif;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.breadboard-poc-payoff strong { color: var(--yellow); font-size: 22px; line-height: 1; }
.breadboard-poc-payoff p { color: white; font-size: 15px; font-weight: 750; line-height: 1.1; }

/* 17 · Component constraints */
.component-constraints-stage { width: 100%; max-width: none !important; margin-top: 24px; }
.reveal .slides section.slide.component-constraints-slide .component-constraint-reaction {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.reveal .slides section.slide.component-constraints-slide:not(:has(.parts-count--finish.visible)) .component-constraint-reaction--search,
.reveal .slides section.slide.component-constraints-slide:has(.parts-count--finish.visible) .component-constraint-reaction--resolved {
  opacity: .23;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s;
}
.parts-funnel {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  align-items: center;
  gap: 30px;
  min-height: 355px;
  padding: 27px 32px;
  border: 6px solid var(--charcoal);
  background: linear-gradient(90deg, #ffd9e9, #fff0a9 52%, #cef5f1);
  box-shadow: 10px 10px 0 var(--charcoal);
}
.parts-count {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 245px;
  padding: 22px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--charcoal);
  text-align: center;
}
.parts-count--start { transform: rotate(-1.5deg); }
.parts-count--finish { background: var(--charcoal); color: white; transform: rotate(1.4deg); }
.parts-count small { font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .14em; }
.parts-count strong { color: var(--magenta); font: 1000 85px/.9 ui-monospace, monospace; letter-spacing: -.08em; }
.parts-count--finish strong { color: var(--yellow); font-size: 108px; }
.parts-count span { font-size: 20px; font-weight: 850; }
.parts-count--finish:has(.parts-selected-component) {
  grid-template-rows: auto 104px auto auto;
  gap: 6px;
  padding: 13px 15px 12px;
}
.parts-count--finish:has(.parts-selected-component) > b {
  color: var(--yellow);
  font: 1000 48px/.82 ui-monospace, monospace;
  letter-spacing: -.08em;
}
.parts-count--finish:has(.parts-selected-component) > span { font-size: 15px; }
.parts-selected-component {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 104px;
  border: 3px solid var(--paper);
  background: linear-gradient(145deg, #253632, #101715);
  text-align: left;
}
.parts-selected-component > i {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 62px;
  margin-left: 13px;
  border: 3px solid var(--paper);
  border-radius: 5px;
  background: #090d0c;
  box-shadow: -12px 0 0 -9px var(--cyan), 12px 0 0 -9px var(--cyan);
  color: var(--cyan);
  font-style: normal;
}
.parts-selected-component > i::before,
.parts-selected-component > i::after {
  content: "";
  position: absolute;
  bottom: -18px;
  width: 5px;
  height: 17px;
  background: var(--paper);
}
.parts-selected-component > i::before { left: 10px; box-shadow: 17px 0 0 var(--paper); }
.parts-selected-component > i::after { right: 10px; }
.parts-selected-component > i span { font: 1000 15px/1 ui-monospace, monospace; }
.parts-selected-component > div { display: grid; gap: 7px; }
.parts-selected-component > div strong {
  color: var(--yellow);
  font: 1000 27px/.9 ui-monospace, monospace;
  letter-spacing: -.05em;
}
.parts-selected-component > div span {
  color: var(--cyan);
  font: 900 10px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.parts-filter-stack {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 36px 36px 0;
}
.parts-filter-stack::before,
.parts-filter-stack::after {
  content: "";
  position: absolute;
  top: calc(50% + 18px);
  width: 53px;
  height: 17px;
  background: var(--charcoal);
  clip-path: polygon(0 36%, 72% 36%, 72% 0, 100% 50%, 72% 100%, 72% 64%, 0 64%);
}
.parts-filter-stack::before { left: -19px; }
.parts-filter-stack::after { right: -19px; }
.parts-filter-label {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: 8px 13px 6px;
  border: 4px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 4px 4px 0 var(--magenta);
  color: var(--yellow);
  font: 1000 14px/1 ui-monospace, monospace;
  letter-spacing: .13em;
  transform: translateX(-50%) rotate(-1deg);
}
.parts-filter-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 4px;
  height: 13px;
  background: var(--charcoal);
  transform: translateX(-50%);
}
.parts-filter {
  display: block;
  justify-self: end;
  box-sizing: border-box;
  padding: 9px 14px 7px;
  border: 4px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--charcoal);
  font: 1000 16px/1 ui-monospace, monospace;
  text-align: center;
  transform: skewX(-5deg);
}
.parts-filter:nth-of-type(1) { width: 100%; }
.parts-filter:nth-of-type(2) { width: 94%; }
.parts-filter:nth-of-type(3) { width: 88%; }
.parts-filter:nth-of-type(4) { width: 82%; }
.parts-filter:nth-of-type(5) { width: 76%; }
.parts-filter:nth-of-type(6) { width: 70%; }
.parts-filter:nth-of-type(2n) { background: var(--cyan); transform: skewX(5deg); }
.constraint-payoff { display: flex; align-items: center; gap: 24px; margin-top: 20px; padding: 16px 21px 14px; border: 5px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--magenta); color: white; }
.constraint-payoff > span { padding: 8px 11px 7px; background: var(--yellow); color: var(--charcoal); font: 1000 17px/1 "Hiragino Sans", "Yu Gothic", sans-serif; white-space: nowrap; }
.constraint-payoff strong { color: white; font-size: 23px; }

/* 18 · Factory assembly */
.factory-assembly-stage { width: 100%; max-width: none !important; margin-top: 21px; }
.assembly-comparison { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; gap: 22px; }
.assembly-choice {
  position: relative;
  display: grid;
  grid-template-columns: 272px 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 22px;
  min-height: 323px;
  padding: 18px 19px 17px;
  border: 6px solid var(--charcoal);
  box-shadow: 9px 9px 0 var(--charcoal);
}
.assembly-choice--bench { background: #ffd9e9; transform: rotate(-.6deg); }
.assembly-choice--fab { background: #cef5f1; transform: rotate(.6deg); }
.assembly-photo {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 5;
  min-width: 0;
  height: 276px;
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 6px 6px 0 var(--charcoal);
}
.assembly-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
}
.assembly-photo--bench img { object-position: 72% center; }
.assembly-photo--fab img { object-position: 53% 64%; }
.assembly-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 10px 12px 9px;
  border-top: 4px solid var(--charcoal);
  background: rgba(8,8,13,.9);
  color: white;
}
.assembly-photo figcaption b { color: var(--yellow); font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .12em; }
.assembly-photo figcaption span { font-size: 13px; font-weight: 850; line-height: 1; }
.assembly-choice > small { grid-column: 2; align-self: end; margin-bottom: 7px; font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .14em; }
.assembly-choice h3 { grid-column: 2; font-size: 29px; }
.assembly-choice p { grid-column: 2; margin-top: 12px; color: #40564e; font-size: 19px; font-weight: 750; line-height: 1.18; }
.assembly-tag { grid-column: 2; align-self: end; margin-top: 17px; padding: 9px 10px 7px; border: 3px solid var(--charcoal); background: var(--paper); font: 1000 12px/1 ui-monospace, monospace; text-align: center; }
.assembly-versus { display: grid; place-items: center; width: 70px; height: 70px; border: 5px solid var(--charcoal); border-radius: 50%; background: var(--yellow); box-shadow: 6px 6px 0 var(--charcoal); font: 1000 24px/1 ui-monospace, monospace; transform: rotate(-7deg); }
.easyeda-lane { display: grid; grid-template-columns: 230px 1fr; align-items: stretch; gap: 18px; margin-top: 24px; }
.easyeda-mark { display: grid; padding: 14px 17px 12px; border: 5px solid var(--charcoal); background: #3156a6; box-shadow: 7px 7px 0 var(--charcoal); color: white; text-decoration: none; }
.easyeda-mark small { font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .12em; }
.easyeda-mark strong { color: white; font-size: 30px; line-height: 1; }
.easyeda-mark span { font: 800 13px/1 ui-monospace, monospace; }
.easyeda-flow { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1.18fr 30px 1fr; align-items: center; gap: 6px; padding: 14px 16px; border: 5px solid var(--charcoal); background: var(--paper); }
.easyeda-flow span { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 850; line-height: 1.1; }
.easyeda-flow b { padding: 6px 7px 5px; background: var(--charcoal); color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; }
.easyeda-flow i { font: 1000 23px/1 ui-monospace, monospace; text-align: center; }
.assembly-payoff { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 14px 21px 12px; border: 5px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--cyan); color: white; }
.assembly-payoff strong { color: var(--yellow); font-size: 23px; }
.assembly-payoff span { font: 850 16px/1.1 ui-monospace, monospace; }

/* 59 · Photo credits */
.photo-credits-slide::before {
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.08) 1.3px, transparent 1.8px) 0 0 / 18px 18px,
    linear-gradient(118deg, rgba(53,214,208,.16), transparent 34%),
    repeating-conic-gradient(from 5deg at 92% 14%, transparent 0 9deg, rgba(76,118,215,.08) 9.3deg 10.4deg);
  transform: none;
}
.photo-credits-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  width: 100%;
  max-width: none !important;
  margin-top: 18px;
}
.photo-credit-panel {
  min-width: 0;
  padding: 15px 17px 17px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--charcoal);
}
.photo-credit-panel--open { background: #cef5f1; transform: rotate(-.25deg); }
.photo-credit-panel--more { background: #dfe8ff; transform: rotate(.25deg); }
.photo-credit-panel > header {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.photo-credit-panel > header > b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 17px/1 ui-monospace, monospace;
}
.photo-credit-panel header small { display: block; margin-bottom: 4px; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .13em; }
.photo-credit-panel header h3 { font-size: 22px; line-height: 1; }
.photo-credit-list { display: grid; gap: 6px; }
.photo-credit-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 42px;
  padding: 7px 9px 6px;
  border: 3px solid var(--charcoal);
  background: rgba(255,253,244,.92);
  color: var(--charcoal);
  text-decoration: none;
}
.photo-credit-list a::after { content: "↗"; display: none; }
.photo-credit-list strong { min-width: 0; color: var(--charcoal); font-size: 14px; line-height: 1.05; }
.photo-credit-list span { color: #40564e; font: 900 10px/1.08 ui-monospace, monospace; text-align: right; white-space: nowrap; }
.photo-credit-list .photo-credit--review { background: #fff0a9; }
.photo-credit-list .photo-credit--review span { color: #8c5500; }
.photo-credit-owned {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 13px 17px 12px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 7px 7px 0 var(--magenta);
  color: white;
}
.photo-credit-owned > b { padding: 8px 10px 7px; background: var(--yellow); color: var(--charcoal); font: 1000 12px/1 ui-monospace, monospace; white-space: nowrap; }
.photo-credit-owned p { color: white; font-size: 14px; font-weight: 750; line-height: 1.15; }
.photo-credit-owned p strong { color: var(--cyan); }
.photo-credit-owned a { color: var(--yellow); font: 900 11px/1.1 ui-monospace, monospace; text-decoration: none; text-align: right; white-space: nowrap; }

/* 19 · Communities */
.electronics-community-stage { width: 100%; max-width: none !important; margin-top: 21px; }
.electronics-community-slide .slide-head h2 { margin-top: 40px; }
.community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.community-card { position: relative; display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 22px; min-height: 185px; padding: 18px 21px; border: 5px solid var(--charcoal); background: var(--paper); box-shadow: 7px 7px 0 var(--charcoal); color: var(--ink); text-decoration: none; }
.community-card--zmk { background: #dfe8ff; transform: rotate(-.45deg); }
.community-card--embedded { background: #cef5f1; transform: rotate(.4deg); }
.community-card--daisy { background: #fff0a9; transform: rotate(.35deg); }
.community-card--maker { background: #ffd9e9; transform: rotate(-.35deg); }
.community-card img { width: 126px; height: 126px; object-fit: cover; border: 5px solid var(--charcoal); border-radius: 24px; background: white; box-shadow: 5px 5px 0 var(--charcoal); }
.community-card small { display: block; margin-bottom: 7px; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .13em; }
.community-card h3 { font-size: 30px; }
.community-card p { margin-top: 9px; color: #40564e; font-size: 17px; font-weight: 750; line-height: 1.15; }
.community-used { position: absolute; right: 10px; top: 9px; padding: 5px 7px 4px; border: 2px solid var(--charcoal); background: var(--magenta); color: white; box-shadow: 2px 2px 0 var(--charcoal); font: 1000 9px/1 ui-monospace, monospace; letter-spacing: .07em; transform: rotate(1.5deg); }
.community-join { position: absolute; right: 10px; bottom: 9px; padding: 5px 7px 4px; border: 2px solid var(--charcoal); background: var(--paper); color: var(--charcoal); font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.community-question { display: grid; grid-template-columns: auto 1fr 42px 1fr; align-items: center; gap: 15px; margin-top: 24px; padding: 14px 17px; border: 5px solid var(--charcoal); background: var(--paper); box-shadow: 7px 7px 0 var(--yellow); }
.community-question > b { padding: 9px 10px 7px; background: var(--charcoal); color: var(--yellow); font: 1000 14px/1 ui-monospace, monospace; }
.community-question span { font-size: 17px; line-height: 1.1; }
.community-question i { font: 1000 29px/1 ui-monospace, monospace; text-align: center; }
.community-payoff { margin-top: 18px; padding: 13px 20px 12px; border: 5px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--magenta); color: white; text-align: center; }
.community-payoff strong { color: white; font-size: 22px; }

/* 20 · Board review */
.board-review-stage { width: 100%; max-width: none !important; margin-top: 23px; }
.review-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-layer { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-height: 337px; padding: 27px 24px 20px; border: 6px solid var(--charcoal); box-shadow: 9px 9px 0 var(--charcoal); }
.review-layer--tools { background: #cef5f1; transform: rotate(-.6deg); }
.review-layer--human { background: #fff0a9; transform: translateY(6px) rotate(.5deg); }
.review-layer--ai { background: #ffd9e9; transform: rotate(-.35deg); }
.review-number { position: absolute; right: 15px; top: 13px; color: rgba(21,32,29,.2); font: 1000 58px/.8 ui-monospace, monospace; }
.review-layer small { align-self: end; margin-bottom: 10px; font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .14em; }
.review-layer h3 { font-size: 35px; }
.review-layer p { margin-top: 18px; color: #40564e; font-size: 21px; font-weight: 750; line-height: 1.2; }
.review-layer > b { align-self: end; justify-self: start; margin-top: 19px; padding: 9px 11px 7px; border: 3px solid var(--charcoal); background: var(--charcoal); color: var(--yellow); font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .12em; }
.review-layer--tools:has(.review-evidence-photo) {
  grid-template-rows: auto auto 132px auto auto;
  gap: 7px;
  padding: 20px 20px 15px;
}
.review-evidence-photo {
  position: relative;
  height: 132px;
  margin: 2px 0 0;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  background: #07131f;
  box-shadow: 4px 4px 0 var(--charcoal);
}
.review-evidence-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.review-evidence-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 8px 4px;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 9px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.review-layer--tools:has(.review-evidence-photo) p { margin-top: 0; font-size: 17px; }
.review-layer--tools:has(.review-evidence-photo) > b { margin-top: 0; }
.review-checklist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 26px; }
.review-checklist span { padding: 12px 7px 10px; border: 4px solid var(--charcoal); background: var(--paper); font: 1000 13px/1 ui-monospace, monospace; text-align: center; }
.review-checklist span:nth-child(2n) { background: #dfe8ff; }
.review-payoff { display: grid; grid-template-columns: 65px 1fr 480px; align-items: center; gap: 18px; margin-top: 20px; padding: 14px 19px 12px; border: 5px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--magenta); color: white; }
.review-grain { display: grid; place-items: center; width: 57px; height: 57px; border: 4px solid white; border-radius: 50%; color: var(--yellow); font-size: 40px; }
.review-payoff small { display: block; margin-bottom: 5px; color: var(--cyan); font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .15em; }
.review-payoff strong { color: var(--yellow); font-size: 23px; }
.review-payoff p { padding-left: 19px; border-left: 3px solid var(--paper); color: white; font-size: 16px; font-weight: 750; line-height: 1.15; }

/* 21 · Post-PCB toolbelt */
.pcb-toolbelt-stage { width: 100%; max-width: none !important; margin-top: 22px; }
.pcb-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 22px; }
.pcb-tool {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  min-height: 239px;
  padding: 21px 20px 18px;
  border: 5px solid var(--charcoal);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--charcoal);
}
.pcb-tool--meter { background: #fff0a9; transform: rotate(-.45deg); }
.pcb-tool--logic { background: #dfe8ff; transform: rotate(.35deg); }
.pcb-tool--scope { background: #cef5f1; transform: rotate(-.3deg); }
.pcb-tool--iron { background: #ffd9e9; transform: rotate(.3deg); }
.pcb-tool--debugger { background: #dff1da; transform: rotate(-.25deg); }
.pcb-tool--extras { background: #f2e2ff; transform: rotate(.35deg); }
.pcb-tool-number { position: absolute; right: 11px; top: 9px; color: rgba(21,32,29,.18); font: 1000 45px/.8 ui-monospace, monospace; }
.pcb-tool > small { grid-column: 2; align-self: end; margin: 5px 0 7px; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .13em; }
.pcb-tool h3 { grid-column: 2; font-size: 28px; line-height: 1; }
.pcb-tool p { grid-column: 2; margin-top: 10px; color: #40564e; font-size: 17px; font-weight: 750; line-height: 1.15; }
.pcb-tool-photo {
  position: relative;
  grid-row: 1 / 4;
  align-self: center;
  width: 104px;
  height: 104px;
  margin: 0;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 5px 5px 0 var(--yellow);
}
.pcb-tool-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcb-tool-icon {
  position: relative;
  grid-row: 1 / 4;
  align-self: center;
  width: 104px;
  height: 104px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 5px 5px 0 var(--yellow);
  overflow: hidden;
}
.pcb-tool-icon--meter { display: grid; place-items: center; border-radius: 18px; background: var(--red); }
.pcb-tool-icon--meter::before { content: ""; position: absolute; left: 18px; right: 18px; top: 16px; height: 34px; border: 4px solid var(--charcoal); background: var(--paper); }
.pcb-tool-icon--meter b { position: relative; z-index: 2; margin-top: -32px; color: var(--charcoal); font: 1000 18px/1 ui-monospace, monospace; }
.pcb-tool-icon--meter i { position: absolute; left: 39px; bottom: 13px; width: 20px; height: 20px; border: 4px solid var(--charcoal); border-radius: 50%; background: var(--yellow); }
.pcb-tool-icon--logic { background: #3558b4; }
.pcb-tool-icon--logic i { position: absolute; left: 9px; right: 9px; height: 5px; background: var(--cyan); }
.pcb-tool-icon--logic i:nth-child(1) { top: 20px; clip-path: polygon(0 50%, 20% 50%, 20% 0, 42% 0, 42% 100%, 66% 100%, 66% 0, 100% 0, 100% 100%, 0 100%); height: 25px; }
.pcb-tool-icon--logic i:nth-child(2) { top: 52px; }
.pcb-tool-icon--logic i:nth-child(3) { top: 65px; width: 70px; left: 14px; background: var(--yellow); }
.pcb-tool-icon--logic b { position: absolute; left: 16px; bottom: 9px; color: white; font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
.pcb-tool-icon--scope { display: grid; place-items: center; background: #15201d; }
.pcb-tool-icon--scope svg { width: 90px; height: 66px; }
.pcb-tool-icon--scope path { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: square; stroke-linejoin: bevel; }
.pcb-tool-icon--iron { overflow: visible; background: #f6c4d8; }
.pcb-tool-icon--iron i { position: absolute; width: 88px; height: 19px; left: 5px; top: 40px; border: 5px solid var(--charcoal); border-radius: 11px 3px 3px 11px; background: var(--red); transform: rotate(-31deg); }
.pcb-tool-icon--iron i::after { content: ""; position: absolute; right: -35px; top: 3px; width: 34px; height: 5px; background: var(--charcoal); }
.pcb-tool-icon--iron b { position: absolute; right: 8px; top: 5px; color: var(--red); font-size: 29px; transform: rotate(8deg); }
.pcb-tool-icon--debugger { background: #2f915d; }
.pcb-tool-icon--debugger b { position: absolute; left: 14px; top: 18px; padding: 8px 9px 7px; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); font: 1000 18px/1 ui-monospace, monospace; }
.pcb-tool-icon--debugger i { position: absolute; left: 13px; right: 13px; bottom: 26px; height: 6px; background: repeating-linear-gradient(90deg, var(--paper) 0 7px, transparent 7px 13px); }
.pcb-tool-icon--debugger span { position: absolute; left: 12px; bottom: 8px; color: white; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .06em; }
.pcb-tool-icon--extras { background: #6c4bb2; }
.pcb-tool-icon--extras b { position: absolute; inset: 8px 0 0; color: white; font: 1000 58px/1 ui-monospace, monospace; text-align: center; }
.pcb-tool-icon--extras i { position: absolute; bottom: 13px; width: 14px; height: 14px; border: 3px solid var(--charcoal); border-radius: 50%; background: var(--yellow); }
.pcb-tool-icon--extras i:nth-of-type(1) { left: 14px; }
.pcb-tool-icon--extras i:nth-of-type(2) { left: 40px; background: var(--cyan); }
.pcb-tool-icon--extras i:nth-of-type(3) { left: 66px; background: var(--magenta); }
.pcb-toolbelt-payoff {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 21px;
  margin-top: 23px;
  padding: 16px 20px 14px;
  border: 5px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 8px 8px 0 var(--cyan);
  color: white;
}
.pcb-toolbelt-payoff > span { padding: 8px 10px 7px; background: var(--yellow); color: var(--charcoal); font: 1000 15px/1 "Hiragino Sans", "Yu Gothic", sans-serif; white-space: nowrap; transform: rotate(-2deg); }
.pcb-toolbelt-payoff strong { color: var(--yellow); font-size: 23px; }
.pcb-toolbelt-payoff p { max-width: 380px; padding-left: 20px; border-left: 3px solid var(--paper); color: white; font-size: 16px; font-weight: 750; line-height: 1.1; }

/* 22 · Trace bodges */
.pcb-bodge-stage {
  display: grid;
  grid-template-columns: 660px 1fr;
  grid-template-rows: 515px 91px;
  gap: 22px 30px;
  width: 100%;
  max-width: none !important;
  margin-top: 22px;
}
.bodge-photo {
  position: relative;
  grid-row: 1 / 3;
  min-height: 616px;
  overflow: hidden;
  border: 6px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 10px 10px 0 var(--charcoal);
  transform: rotate(-.45deg);
}
.bodge-photo-overview { display: block; width: 100%; height: 255px; object-fit: cover; object-position: center; }
.bodge-photo-detail { position: absolute; left: 0; right: 0; top: 255px; bottom: 47px; width: 100%; height: auto; object-fit: cover; object-position: center 31%; border-top: 5px solid var(--charcoal); }
.bodge-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 15px 9px; border-top: 4px solid var(--charcoal); background: var(--cyan); color: var(--charcoal); }
.bodge-photo figcaption b { font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .11em; }
.bodge-photo figcaption span { font-size: 14px; font-weight: 900; }
.bodge-board-label { position: absolute; left: 25px; top: 24px; color: rgba(255,255,255,.52); font: 1000 15px/1 ui-monospace, monospace; letter-spacing: .15em; }
.bodge-pad { position: absolute; top: 270px; width: 92px; height: 92px; border: 8px solid var(--charcoal); border-radius: 50%; background: #d9af62; box-shadow: inset 0 0 0 17px #ece8d8; }
.bodge-pad--a { left: 64px; }
.bodge-pad--b { right: 64px; }
.bodge-trace { position: absolute; top: 307px; height: 19px; background: #d9af62; box-shadow: 0 0 0 5px rgba(21,32,29,.32); }
.bodge-trace--left { left: 148px; width: 180px; transform: rotate(8deg); transform-origin: left center; }
.bodge-trace--right { right: 148px; width: 180px; transform: rotate(-8deg); transform-origin: right center; }
.bodge-cut { position: absolute; left: 294px; top: 263px; z-index: 3; display: grid; place-items: center; width: 62px; height: 62px; border: 5px solid var(--charcoal); border-radius: 50%; background: var(--red); color: white; box-shadow: 5px 5px 0 var(--charcoal); font: 1000 42px/1 ui-monospace, monospace; transform: rotate(-7deg); }
.bodge-wire { position: absolute; left: 112px; top: 162px; width: 429px; height: 240px; border: 12px solid var(--yellow); border-bottom-color: transparent; border-radius: 50% 50% 0 0; filter: drop-shadow(4px 4px 0 var(--charcoal)); transform: rotate(.8deg); }
.bodge-anchor { position: absolute; z-index: 4; top: 292px; width: 48px; height: 48px; border: 5px solid var(--charcoal); border-radius: 50%; background: var(--paper); }
.bodge-anchor--a { left: 86px; }
.bodge-anchor--b { right: 86px; }
.bodge-callout { position: absolute; padding: 9px 11px 7px; border: 4px solid var(--charcoal); background: var(--paper); box-shadow: 5px 5px 0 var(--charcoal); font: 1000 13px/1 ui-monospace, monospace; }
.bodge-callout--cut { left: 217px; bottom: 84px; transform: rotate(-2deg); }
.bodge-callout--wire { right: 59px; top: 116px; background: var(--yellow); transform: rotate(2deg); }
.bodge-board-stamp { position: absolute; right: 21px; bottom: 22px; padding: 11px 13px 9px; border: 5px solid var(--charcoal); background: var(--cyan); box-shadow: 6px 6px 0 var(--magenta), 9px 9px 0 var(--charcoal); font: 1000 19px/1 ui-monospace, monospace; letter-spacing: .1em; transform: rotate(-5deg); }
.bodge-photo .bodge-board-stamp { top: 17px; bottom: auto; background: var(--yellow); }
.bodge-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bodge-step { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; min-width: 0; padding: 10px 15px 9px; border: 4px solid var(--charcoal); background: var(--paper); box-shadow: 5px 5px 0 var(--charcoal); }
.bodge-step:nth-child(1) { background: #fff0a9; transform: rotate(.25deg); }
.bodge-step:nth-child(2) { background: #ffd9e9; transform: rotate(-.2deg); }
.bodge-step:nth-child(3) { background: #dfe8ff; transform: rotate(.2deg); }
.bodge-step:nth-child(4) { background: #cef5f1; transform: rotate(-.2deg); }
.bodge-step > b { display: grid; place-items: center; width: 52px; height: 52px; border: 4px solid var(--charcoal); border-radius: 50%; background: var(--charcoal); color: var(--yellow); font: 1000 18px/1 ui-monospace, monospace; }
.bodge-step small { display: block; margin-bottom: 4px; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .13em; }
.bodge-step strong { display: inline; color: var(--charcoal); font-size: 20px; line-height: 1; }
.bodge-step span { display: inline; margin-left: 9px; color: #40564e; font-size: 14px; font-weight: 750; line-height: 1.05; }
.board-surgery-rule { display: grid; grid-template-columns: auto 1fr 370px; align-items: center; gap: 20px; padding: 14px 18px 12px; border: 5px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--cyan); color: white; }
.board-surgery-rule > span { padding: 8px 10px 7px; background: var(--yellow); color: var(--charcoal); font: 1000 15px/1 "Hiragino Sans", "Yu Gothic", sans-serif; white-space: nowrap; transform: rotate(-2deg); }
.board-surgery-rule strong { color: var(--yellow); font-size: 21px; line-height: 1.05; }
.board-surgery-rule p { padding-left: 18px; border-left: 3px solid var(--paper); color: white; font-size: 14px; font-weight: 750; line-height: 1.1; }

/* 23 · Component removal */
.pcb-rework-stage { position: relative; width: 100%; max-width: none !important; margin-top: 22px; }
.rework-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rework-method { position: relative; display: grid; grid-template-columns: 175px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 20px; min-height: 370px; padding: 22px 21px 18px; border: 6px solid var(--charcoal); box-shadow: 8px 8px 0 var(--charcoal); }
.rework-method--two-pin { background: #fff0a9; transform: rotate(-.45deg); }
.rework-method--many-pin { background: #ffd9e9; transform: rotate(.4deg); }
.rework-method--through-hole { background: #cef5f1; transform: rotate(-.3deg); }
.rework-method > small { grid-column: 2; align-self: end; margin-bottom: 8px; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .11em; }
.rework-method h3 { grid-column: 2; font-size: 27px; line-height: 1.02; }
.rework-method p { grid-column: 2; margin-top: 13px; color: #40564e; font-size: 17px; font-weight: 750; line-height: 1.16; }
.rework-method > strong { grid-column: 1 / 3; align-self: end; justify-self: start; margin-top: 16px; padding: 8px 10px 6px; border: 3px solid var(--charcoal); background: var(--charcoal); color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .12em; }
.rework-visual { position: relative; grid-row: 1 / 4; align-self: center; width: 164px; height: 164px; border: 5px solid var(--charcoal); background: #277957; box-shadow: 6px 6px 0 var(--charcoal); overflow: hidden; }
.rework-visual--two-pin i { position: absolute; top: 66px; width: 43px; height: 24px; background: #d9af62; }
.rework-visual--two-pin i:first-child { left: 0; }
.rework-visual--two-pin i:nth-child(3) { right: 0; }
.rework-visual--two-pin b { position: absolute; left: 48px; top: 54px; width: 58px; height: 48px; border: 5px solid var(--charcoal); background: #e5d7bd; transform: rotate(-8deg); }
.rework-visual--two-pin span { position: absolute; left: 57px; bottom: 6px; color: var(--yellow); font: 1000 52px/1 ui-monospace, monospace; }
.rework-visual--many-pin b { position: absolute; left: 38px; top: 40px; display: grid; place-items: center; width: 78px; height: 78px; border: 6px solid var(--charcoal); background: #30383e; color: white; font: 1000 25px/1 ui-monospace, monospace; }
.rework-visual--many-pin i { position: absolute; left: 24px; right: 24px; top: 27px; bottom: 27px; border: 10px dotted #d9af62; }
.rework-visual--many-pin span { position: absolute; right: 6px; top: 1px; color: var(--red); font-size: 44px; }
.rework-visual--through-hole b { position: absolute; left: 37px; top: 25px; width: 82px; height: 64px; border: 5px solid var(--charcoal); background: #335caf; }
.rework-visual--through-hole i { position: absolute; top: 88px; width: 9px; height: 62px; background: #d9af62; }
.rework-visual--through-hole i:nth-child(2) { left: 57px; }
.rework-visual--through-hole i:nth-child(3) { right: 57px; }
.rework-visual--through-hole span { position: absolute; right: 4px; bottom: 1px; color: var(--yellow); font-size: 42px; transform: rotate(-20deg); }
.rework-photo-story { display: grid; grid-template-columns: 445px 54px 445px 1fr; align-items: center; gap: 20px; }
.rework-photo-story > figure { position: relative; height: 384px; margin: 0; overflow: hidden; border: 6px solid var(--charcoal); background: var(--charcoal); box-shadow: 8px 8px 0 var(--charcoal); }
.rework-photo-story > figure:first-child { transform: rotate(-.45deg); }
.rework-photo-story > figure:nth-of-type(2) { transform: rotate(.4deg); }
.rework-photo-story img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.rework-photo-story figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 13px 9px; border-top: 4px solid var(--charcoal); background: var(--cyan); color: var(--charcoal); }
.rework-photo-story figure:nth-of-type(2) figcaption { background: var(--yellow); }
.rework-photo-story figcaption b { display: block; font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .11em; }
.rework-photo-story figcaption span { display: block; margin-top: 5px; font-size: 14px; font-weight: 850; line-height: 1.05; }
.rework-photo-story > i { display: grid; place-items: center; width: 50px; height: 50px; border: 4px solid var(--charcoal); border-radius: 50%; background: var(--magenta); color: white; box-shadow: 4px 4px 0 var(--charcoal); font: 1000 26px/1 ui-monospace, monospace; }
.u1-desolder-gag {
  position: absolute;
  z-index: 14;
  left: 24px;
  top: 18px;
  width: 500px;
  height: 170px;
  pointer-events: none;
}
.u1-desolder-threat {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  padding: 11px 15px 10px;
  border: 4px solid var(--charcoal);
  background: rgba(255,247,221,.96);
  box-shadow: 6px 6px 0 var(--magenta);
  color: var(--charcoal);
  transform: rotate(-2deg);
}
.u1-desolder-threat span,
.u1-desolder-threat strong { display: block; }
.u1-desolder-threat span { color: #a52060; font: 1000 17px/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.u1-desolder-threat strong { margin-top: 5px; font-size: 20px; line-height: 1; }
.u1-desolder-threat em { color: #b32268; font-style: normal; }
.u1-desolder-chip {
  position: absolute;
  right: 5px;
  top: 58px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 5px solid var(--charcoal);
  background: #30383e;
  box-shadow: 5px 5px 0 var(--yellow);
  color: white;
  transform: rotate(8deg);
}
.u1-desolder-chip b { font: 1000 21px/1 ui-monospace, monospace; }
.u1-desolder-chip span {
  position: absolute;
  left: 50px;
  top: -22px;
  width: max-content;
  padding: 7px 9px 6px;
  border: 3px solid var(--charcoal);
  background: var(--red);
  box-shadow: 4px 4px 0 var(--charcoal);
  color: white;
  font: 1000 19px/1 ui-monospace, monospace;
  transform: rotate(-8deg);
}
.rework-method-list { display: grid; gap: 13px; }
.rework-method-note { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 12px; min-height: 104px; padding: 11px 12px; border: 4px solid var(--charcoal); background: var(--paper); box-shadow: 5px 5px 0 var(--charcoal); }
.rework-method-note:nth-child(1) { background: #fff0a9; transform: rotate(.25deg); }
.rework-method-note:nth-child(2) { background: #ffd9e9; transform: rotate(-.2deg); }
.rework-method-note:nth-child(3) { background: #cef5f1; transform: rotate(.2deg); }
.rework-method-note > b { display: grid; place-items: center; width: 64px; height: 54px; border: 3px solid var(--charcoal); background: var(--charcoal); color: var(--yellow); font: 1000 13px/1 ui-monospace, monospace; }
.rework-method-note strong { display: block; color: var(--charcoal); font-size: 18px; line-height: 1.05; }
.rework-method-note span { display: block; margin-top: 6px; color: #40564e; font-size: 13px; font-weight: 750; line-height: 1.08; }
.board-surgery-rule--warning { margin-top: 21px; box-shadow-color: var(--red); }
.board-surgery-rule--warning > span { background: var(--red); color: white; }

/* keyboard-keyboard firmware field guide. */
.firmware-entry-slide .slide-head h2,
.firmware-priority-slide .slide-head h2,
.baseline-deep-slide .slide-head h2,
.firmware-mapping-slide .slide-head h2,
.firmware-recipe-slide .slide-head h2,
.firmware-debug-slide .slide-head h2 { max-width: 1400px; font-size: 54px; }

.firmware-entry-stage {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 22px 28px;
  max-width: 1400px !important;
}
.firmware-file-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.firmware-file {
  min-height: 154px;
  padding: 18px 20px;
  border: 4px solid var(--charcoal);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--sage);
}
.firmware-file--target { background: #dff6f4; box-shadow-color: #087f83; }
.firmware-file--memory { background: #eef0ff; box-shadow-color: #7d74c8; }
.firmware-file--probe { background: #fff0d2; box-shadow-color: #d87a13; }
.firmware-file--runtime { background: #ffddea; box-shadow-color: var(--magenta); }
.firmware-file small { display: block; color: #52665f; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .08em; }
.firmware-file strong { display: block; margin-top: 13px; color: var(--ink); font: 1000 22px/1.03 ui-monospace, monospace; }
.firmware-file span { display: block; margin-top: 13px; color: #52665f; font-size: 16px; line-height: 1.16; font-weight: 800; }
.firmware-boot-card {
  position: relative;
  overflow: hidden;
  min-height: 322px;
  border: 4px solid var(--charcoal);
  border-radius: 11px;
  background: #101918;
  box-shadow: 8px 8px 0 var(--cyan);
  color: #d7ffe7;
}
.firmware-terminal-bar { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: #293634; }
.firmware-terminal-bar i { width: 12px; height: 12px; border-radius: 50%; background: var(--magenta); }
.firmware-terminal-bar i:nth-child(2) { background: var(--yellow); }
.firmware-terminal-bar i:nth-child(3) { background: var(--cyan); }
.firmware-terminal-bar span { margin-left: 5px; color: #a9c0b7; font: 900 11px/1 ui-monospace, monospace; }
.firmware-boot-card pre { margin: 0; padding: 24px 24px 15px; white-space: pre-wrap; }
.firmware-boot-card code { color: #d7ffe7; font-size: 17px; line-height: 1.45; }
.firmware-boot-card p { padding: 0 24px; color: #a9c0b7; font-size: 16px; line-height: 1.2; }
.firmware-boot-card p code { color: var(--yellow); font-size: inherit; }
.firmware-boot-card > b { display: block; margin: 20px 24px 0; color: var(--yellow); font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .11em; }
.firmware-boot-card > span { display: block; margin: 8px 24px 20px; color: white; font-size: 19px; line-height: 1.15; font-weight: 900; }
.firmware-entry-payoff,
.priority-payoff,
.mapping-payoff,
.recipe-payoff,
.firmware-debug-payoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 20px 12px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--magenta);
}
.firmware-entry-payoff span,
.priority-payoff span,
.mapping-payoff span,
.recipe-payoff span,
.firmware-debug-payoff span { color: #087f83; font: 1000 17px/1 ui-monospace, monospace; }
.firmware-entry-payoff strong,
.priority-payoff strong,
.mapping-payoff strong,
.recipe-payoff strong,
.firmware-debug-payoff strong { color: var(--ink); font-size: 23px; line-height: 1; }

.firmware-priority-stage {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px 28px;
  max-width: 1400px !important;
}
.priority-ladder { display: grid; gap: 10px; }
.priority-lane {
  display: grid;
  grid-template-columns: 76px 1fr 180px;
  align-items: center;
  min-height: 87px;
  padding: 11px 16px;
  border: 4px solid var(--charcoal);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--sage);
}
.priority-lane--scan { background: #ffddea; box-shadow-color: var(--magenta); }
.priority-lane--audio { background: #fff0d2; box-shadow-color: #d87a13; }
.priority-lane--midi { background: #dff6f4; box-shadow-color: #087f83; }
.priority-lane > b { color: var(--magenta); font: 1000 27px/1 ui-monospace, monospace; }
.priority-lane small { display: block; color: #52665f; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .09em; }
.priority-lane strong { display: block; margin-top: 6px; color: var(--ink); font-size: 20px; line-height: 1; }
.priority-lane span { display: block; margin-top: 6px; color: #52665f; font-size: 14px; line-height: 1; font-weight: 800; }
.priority-lane > code { justify-self: end; padding: 8px 10px; background: var(--charcoal); color: var(--yellow); font-size: 13px; }
.priority-contract {
  align-self: stretch;
  padding: 22px;
  border: 4px solid var(--charcoal);
  border-radius: 11px;
  background: #eef0ff;
  box-shadow: 7px 7px 0 #7d74c8;
}
.priority-contract > small { display: block; margin-bottom: 20px; color: #625aa5; font: 1000 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
.priority-contract > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin-top: 13px; padding: 15px; border: 3px solid var(--charcoal); background: var(--paper); }
.priority-contract > div b { color: var(--magenta); font: 1000 18px/1 ui-monospace, monospace; }
.priority-contract > div span { color: var(--ink); font-size: 17px; font-weight: 850; }
.priority-contract p { margin-top: 22px; color: #52665f; font-size: 19px; line-height: 1.2; font-weight: 850; }

.baseline-deep-stage {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px 28px;
  max-width: 1400px !important;
}
.baseline-sequence { display: grid; gap: 9px; }
.baseline-step { display: grid; grid-template-columns: 54px 1fr; min-height: 70px; padding: 10px 15px; border: 3px solid var(--charcoal); background: var(--paper); box-shadow: 4px 4px 0 var(--sage); }
.baseline-step > b { grid-row: 1 / 3; align-self: center; color: var(--magenta); font: 1000 20px/1 ui-monospace, monospace; }
.baseline-step small { display: block; color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .09em; }
.baseline-step strong { display: inline-block; margin-top: 4px; color: var(--ink); font-size: 20px; line-height: 1; }
.baseline-step span { margin-left: 10px; color: #52665f; font-size: 14px; font-weight: 800; }
.baseline-code-card { overflow: hidden; align-self: stretch; border: 4px solid var(--charcoal); border-radius: 11px; background: #101918; box-shadow: 8px 8px 0 #087f83; }
.baseline-code-card pre { margin: 0; padding: 25px; white-space: pre-wrap; }
.baseline-code-card code { color: #d7ffe7; font-size: 17px; line-height: 1.36; }
.baseline-code-card p { padding: 0 25px 22px; color: #a9c0b7; font-size: 17px; line-height: 1.2; }
.baseline-code-card p code { color: var(--yellow); font-size: inherit; }
.baseline-warning { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border: 4px solid var(--charcoal); background: #ffd9d4; box-shadow: 6px 6px 0 var(--red); }
.baseline-warning b { color: var(--red); font: 1000 14px/1 ui-monospace, monospace; letter-spacing: .1em; }
.baseline-warning strong { color: var(--ink); font-size: 22px; }

.firmware-mapping-stage { display: grid; grid-template-columns: 1.12fr .88fr; gap: 17px 28px; max-width: 1400px !important; }
.mapping-code-stack { display: grid; gap: 11px; }
.mapping-code-card { overflow: hidden; border: 4px solid var(--charcoal); border-radius: 9px; background: #101918; box-shadow: 5px 5px 0 #087f83; }
.mapping-code-card--musical { box-shadow-color: var(--magenta); }
.mapping-code-card--routing { box-shadow-color: #7d74c8; }
.mapping-code-card small { display: block; padding: 9px 15px; background: #293634; color: var(--yellow); font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .11em; }
.mapping-code-card pre { margin: 0; padding: 13px 18px; white-space: pre-wrap; }
.mapping-code-card code { color: #d7ffe7; font-size: 15px; line-height: 1.28; }
.mapping-boundary { display: grid; align-content: stretch; gap: 11px; }
.mapping-boundary-card { display: grid; align-content: center; min-height: 120px; padding: 15px 20px; border: 4px solid var(--charcoal); border-radius: 10px; background: var(--paper); box-shadow: 5px 5px 0 var(--sage); }
.mapping-boundary-card:nth-child(2) { background: #fff0d2; box-shadow-color: #d87a13; }
.mapping-boundary-card:nth-child(3) { background: #eef0ff; box-shadow-color: #7d74c8; }
.mapping-boundary-card b { color: #087f83; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.mapping-boundary-card strong { margin-top: 7px; color: var(--ink); font-size: 23px; line-height: 1; }
.mapping-boundary-card span { margin-top: 7px; color: #52665f; font-size: 16px; font-weight: 800; }

.firmware-recipe-stage { max-width: 1400px !important; }
.recipe-path { display: grid; grid-template-columns: 1fr 38px 1fr 38px 1fr 38px 1fr; align-items: stretch; }
.recipe-step { position: relative; min-height: 265px; padding: 20px 18px 53px; border: 4px solid var(--charcoal); border-radius: 11px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); }
.recipe-step:nth-of-type(2) { background: #dff6f4; box-shadow-color: #087f83; }
.recipe-step:nth-of-type(3) { background: #fff0d2; box-shadow-color: #d87a13; }
.recipe-step:nth-of-type(4) { background: #ffddea; box-shadow-color: var(--magenta); }
.recipe-step > b { color: rgba(21,32,29,.18); font: 1000 55px/.8 ui-monospace, monospace; }
.recipe-step small { display: block; margin-top: 17px; color: #087f83; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.recipe-step strong { display: block; margin-top: 9px; color: var(--ink); font-size: 24px; line-height: 1; }
.recipe-step span { display: block; margin-top: 13px; color: #52665f; font-size: 16px; line-height: 1.15; font-weight: 800; }
.recipe-step em { position: absolute; left: 14px; right: 14px; bottom: 13px; padding: 8px; background: var(--charcoal); color: var(--yellow); font: normal 1000 11px/1 ui-monospace, monospace; text-align: center; }
.recipe-step:has(.recipe-step-photo) { min-height: 310px; padding-top: 12px; }
.recipe-step-photo {
  height: 94px;
  margin: -3px -9px 10px;
  overflow: hidden;
  border: 3px solid var(--charcoal);
  background: #111a18;
}
.recipe-step-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.recipe-step:nth-of-type(1) .recipe-step-photo img { object-position: 76% 54%; }
.recipe-step:nth-of-type(3) .recipe-step-photo img { object-position: center 48%; }
.recipe-step:nth-of-type(4) .recipe-step-photo img { object-position: center 45%; }
.recipe-step:has(.recipe-step-photo) > b { font-size: 41px; }
.recipe-step:has(.recipe-step-photo) small { margin-top: 8px; }
.recipe-step:has(.recipe-step-photo) strong { margin-top: 7px; font-size: 21px; }
.recipe-step:has(.recipe-step-photo) span { margin-top: 8px; font-size: 14px; }
.recipe-arrow { display: grid; place-items: center; color: var(--magenta); font: 1000 31px/1 ui-monospace, monospace; }
.recipe-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.recipe-variants article { display: grid; grid-template-columns: 120px 1fr; align-items: center; min-height: 58px; padding: 10px 14px; border: 3px solid var(--charcoal); background: rgba(184,215,189,.35); }
.recipe-variants b { color: #087f83; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .07em; }
.recipe-variants span { color: var(--ink); font-size: 15px; font-weight: 850; }
.recipe-payoff { margin-top: 16px; }
.recipe-payoff p { color: #624c17; font-size: 15px; font-weight: 850; }

.firmware-debug-slide .debug-grid {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 184px) auto;
  gap: 14px 17px;
}
.firmware-debug-slide .debug-grid .card { padding: 18px 20px; }
.firmware-debug-slide .debug-grid .card h3 { font-size: 25px; }
.firmware-debug-slide .debug-grid .card p { margin-top: 10px; font-size: 18px; line-height: 1.14; }
.firmware-debug-slide .debug-grid .debug-evidence-card {
  display: grid;
  grid-template-rows: 79px 1fr;
  gap: 8px;
  padding: 10px 12px 11px;
}
.debug-evidence-card figure {
  height: 79px;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--charcoal);
  background: #111918;
}
.debug-evidence-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.debug-evidence-card.magenta figure img { object-position: center 45%; }
.firmware-debug-slide .debug-grid .debug-evidence-card h3 { font-size: 21px; }
.firmware-debug-slide .debug-grid .debug-evidence-card p { margin-top: 5px; font-size: 14px; }
.firmware-debug-payoff { grid-column: 1 / -1; }
.firmware-debug-payoff p { color: #624c17; font-size: 15px; font-weight: 850; }

/* keyboard-keyboard 31–40 manga field-guide pass. */
.reveal .slides section.slide.manga-firmware-arc {
  --firmware-accent: #7257c2;
  --firmware-soft: rgba(114,87,194,.16);
  --firmware-shadow: var(--magenta);
  box-shadow:
    inset 0 0 0 6px #101116,
    inset 0 0 0 11px rgba(255,253,244,.9);
  background:
    linear-gradient(118deg, transparent 0 68%, rgba(16,17,22,.12) 68.2% 68.8%, transparent 69% 100%),
    radial-gradient(circle at 1px 1px, rgba(16,17,22,.14) 1.35px, transparent 1.8px) 0 0 / 27px 27px,
    radial-gradient(circle at 85% 20%, var(--firmware-soft), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,.74), transparent 46%, var(--firmware-soft)),
    var(--paper) !important;
}
.manga-firmware-arc::before {
  inset: -18%;
  width: auto;
  height: auto;
  background:
    repeating-conic-gradient(from 6deg at 88% 22%, transparent 0 7deg, var(--firmware-soft) 7.2deg 8.2deg),
    repeating-linear-gradient(102deg, transparent 0 72px, rgba(16,17,22,.03) 73px 75px, transparent 76px 118px);
  transform: none;
  opacity: 1;
}
.manga-firmware-arc > * { z-index: 2; }
.manga-firmware-arc .slide-head { display: inline-block; min-width: 760px; }
.manga-firmware-arc .slide-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  right: 5%;
  bottom: -18px;
  height: 15px;
  border: 3px solid #101116;
  background: var(--firmware-accent);
  box-shadow: 7px 7px 0 var(--firmware-shadow);
  transform: skewX(-18deg) rotate(-.35deg);
}
.manga-firmware-arc .slide-head h2 {
  text-shadow: 4px 4px 0 rgba(255,255,255,.92), 7px 7px 0 var(--firmware-soft);
}
.manga-firmware-arc .eyebrow {
  border-radius: 2px 10px 2px 10px;
  box-shadow: 5px 5px 0 var(--firmware-accent), 8px 8px 0 #101116;
  transform: rotate(-1.1deg);
}
.firmware-manga-sfx {
  position: absolute;
  z-index: 8 !important;
  color: var(--firmware-accent);
  font: 1000 74px/.82 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: -.1em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 2px #101116;
  text-shadow: 6px 6px 0 var(--firmware-shadow), 11px 11px 0 #101116;
}
.firmware-manga-sfx--left { left: 26px; bottom: 74px; transform: rotate(-10deg); }
.firmware-manga-sfx--right { right: 34px; bottom: 70px; transform: rotate(9deg); }
.firmware-reaction {
  position: absolute;
  z-index: 5 !important;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(8px 8px 0 #101116) drop-shadow(-5px 0 0 var(--firmware-accent));
}
.manga-firmware-flow { --firmware-accent: #7257c2; --firmware-soft: rgba(114,87,194,.18); --firmware-shadow: var(--magenta); }
.manga-firmware-scan { --firmware-accent: #008b95; --firmware-soft: rgba(0,139,149,.17); --firmware-shadow: var(--yellow); }
.manga-firmware-deadline { --firmware-accent: #d94752; --firmware-soft: rgba(217,71,82,.16); --firmware-shadow: var(--yellow); }
.manga-firmware-calibration { --firmware-accent: #2f9f62; --firmware-soft: rgba(47,159,98,.17); --firmware-shadow: var(--cyan); }
.manga-firmware-filter { --firmware-accent: #008b95; --firmware-soft: rgba(0,139,149,.17); --firmware-shadow: var(--cyan); }
.manga-firmware-state { --firmware-accent: #2f9f62; --firmware-soft: rgba(47,159,98,.17); --firmware-shadow: var(--yellow); }
.manga-firmware-backpressure { --firmware-accent: #d06f15; --firmware-soft: rgba(208,111,21,.18); --firmware-shadow: var(--magenta); }
.manga-firmware-mapping { --firmware-accent: #c83f88; --firmware-soft: rgba(200,63,136,.17); --firmware-shadow: var(--cyan); }
.manga-firmware-training { --firmware-accent: #d99a00; --firmware-soft: rgba(255,211,79,.24); --firmware-shadow: var(--magenta); }
.manga-firmware-observability { --firmware-accent: #8868d7; --firmware-soft: rgba(136,104,215,.18); --firmware-shadow: var(--yellow); }

.manga-firmware-flow .pipeline {
  position: relative;
  padding: 43px 24px 52px;
  border: 7px solid #101116;
  border-radius: 2px 18px 3px 12px;
  background: rgba(255,253,244,.88);
  box-shadow: 13px 13px 0 var(--firmware-accent), 21px 21px 0 #101116;
  transform: rotate(-.35deg);
}
.manga-firmware-flow .pipeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(110deg, transparent 0 44px, var(--firmware-soft) 45px 50px, transparent 51px 78px);
  pointer-events: none;
}
.manga-firmware-flow .pipeline-step { position: relative; z-index: 1; min-width: 145px; border-width: 5px; border-radius: 2px 14px 3px 10px; box-shadow: 7px 7px 0 var(--firmware-shadow); }
.manga-firmware-flow .pipeline-step:nth-of-type(4n+1) { transform: rotate(-1.1deg); }
.manga-firmware-flow .pipeline-step:nth-of-type(4n+3) { transform: rotate(.9deg); }
.manga-firmware-flow .pipeline-arrow { position: relative; z-index: 1; }

.manga-firmware-scan .codeblock,
.manga-firmware-filter .codeblock,
.manga-firmware-state .codeblock,
.manga-firmware-backpressure .codeblock {
  border-width: 6px;
  border-radius: 2px 18px 3px 12px;
  box-shadow: 11px 11px 0 var(--firmware-accent), 18px 18px 0 #101116;
  transform: rotate(-.3deg);
}
.manga-firmware-scan .scan-budget > div,
.manga-firmware-filter .sample-window i,
.manga-firmware-filter .filter-facts p,
.manga-firmware-state .state-node {
  border-radius: 2px 12px 3px 9px;
  border-width: 5px;
  box-shadow: 7px 7px 0 var(--firmware-shadow), 11px 11px 0 #101116;
}
.manga-firmware-scan .scan-budget > div:nth-child(odd) { transform: rotate(-.8deg); }
.manga-firmware-scan .scan-budget > div:nth-child(even) { transform: rotate(.8deg); }
.manga-firmware-filter .sample-window { transform: rotate(.7deg); }
.manga-firmware-filter .filter-facts p:nth-child(odd) { transform: rotate(-.45deg); }
.manga-firmware-filter .filter-facts p:nth-child(even) { transform: rotate(.45deg); }
.manga-firmware-state .state-node:nth-of-type(1) { transform: rotate(-1deg); }
.manga-firmware-state .state-node:nth-of-type(5) { transform: rotate(1deg); }

.manga-firmware-deadline .priority-ladder {
  padding: 16px 18px 21px;
  border: 6px solid #101116;
  background: rgba(255,253,244,.82);
  box-shadow: 11px 11px 0 var(--firmware-accent), 18px 18px 0 #101116;
  transform: rotate(-.4deg);
}
.manga-firmware-deadline .priority-lane { border-radius: 2px 11px 3px 8px; border-width: 4px; }
.manga-firmware-deadline .priority-lane:nth-child(odd) { transform: translateX(-4px) rotate(-.35deg); }
.manga-firmware-deadline .priority-lane:nth-child(even) { transform: translateX(4px) rotate(.35deg); }
.manga-firmware-deadline .priority-contract { border-width: 6px; border-radius: 2px 16px 3px 11px; box-shadow: 10px 10px 0 #7d74c8, 16px 16px 0 #101116; transform: rotate(.7deg); }

.manga-firmware-calibration .baseline-sequence {
  padding: 15px 17px 20px;
  border: 6px solid #101116;
  background: rgba(255,253,244,.86);
  box-shadow: 11px 11px 0 var(--firmware-accent), 18px 18px 0 #101116;
  transform: rotate(-.35deg);
}
.manga-firmware-calibration .baseline-step { border-radius: 2px 10px 3px 7px; }
.manga-firmware-calibration .baseline-step:nth-child(odd) { transform: translateX(-4px) rotate(-.35deg); }
.manga-firmware-calibration .baseline-step:nth-child(even) { transform: translateX(4px) rotate(.35deg); }
.manga-firmware-calibration .baseline-code-card { border-width: 6px; border-radius: 2px 16px 3px 11px; box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #101116; transform: rotate(.55deg); }
.firmware-reaction--calibration { right: 6px; bottom: 18px; width: 205px; height: 230px; opacity: .24; transform: rotate(4deg); }

.manga-firmware-backpressure .midi-packet { border-width: 5px; border-radius: 2px 14px 3px 10px; box-shadow: 8px 8px 0 var(--magenta), 13px 13px 0 #101116; transform: rotate(.9deg); }
.manga-firmware-backpressure .wire-equation { border-width: 6px; border-radius: 2px 16px 3px 11px; box-shadow: 9px 9px 0 var(--yellow), 15px 15px 0 #101116; transform: rotate(-.8deg); }
.firmware-reaction--backpressure { right: 12px; bottom: 6px; width: 190px; height: 210px; opacity: .2; transform: rotate(5deg); }

.manga-firmware-mapping .mapping-code-stack {
  padding: 14px 16px 19px;
  border: 6px solid #101116;
  background: rgba(255,253,244,.84);
  box-shadow: 11px 11px 0 var(--firmware-accent), 18px 18px 0 #101116;
  transform: rotate(-.35deg);
}
.manga-firmware-mapping .mapping-code-card { border-width: 5px; border-radius: 2px 11px 3px 8px; }
.manga-firmware-mapping .mapping-boundary-card { border-width: 5px; border-radius: 2px 14px 3px 10px; box-shadow: 8px 8px 0 var(--firmware-shadow), 13px 13px 0 #101116; }
.manga-firmware-mapping .mapping-boundary-card:nth-child(odd) { transform: rotate(.7deg); }
.manga-firmware-mapping .mapping-boundary-card:nth-child(even) { transform: rotate(-.7deg); }

.manga-firmware-training .recipe-step { border-width: 5px; border-radius: 2px 15px 3px 10px; box-shadow: 8px 8px 0 var(--firmware-shadow), 13px 13px 0 #101116; }
.manga-firmware-training .recipe-step:nth-of-type(odd) { transform: rotate(-.8deg); }
.manga-firmware-training .recipe-step:nth-of-type(even) { transform: rotate(.8deg); }
.manga-firmware-training .recipe-variants { padding: 12px 14px 16px; border: 5px solid #101116; background: rgba(255,253,244,.85); box-shadow: 8px 8px 0 var(--firmware-accent); transform: rotate(.25deg); }
.manga-firmware-training .recipe-variants article { border-width: 4px; }

.manga-firmware-observability .debug-grid .card { border-width: 5px; border-radius: 2px 14px 3px 10px; box-shadow: 8px 8px 0 var(--card-tone), 13px 13px 0 #101116; }
.manga-firmware-observability .debug-grid .card:nth-child(odd) { transform: rotate(-.6deg); }
.manga-firmware-observability .debug-grid .card:nth-child(even) { transform: rotate(.6deg); }
.firmware-reaction--observability { right: 12px; bottom: 8px; width: 180px; height: 198px; opacity: .19; transform: rotate(4deg); }

/* Bottom-right character art is atmospheric, like the field-guide cameos on
   slides 21–30: visible over the page texture, but behind every content panel. */
.background-character {
  z-index: 1 !important;
  opacity: .16 !important;
  filter: grayscale(.85) contrast(1.35) !important;
}

.manga-firmware-arc .priority-payoff,
.manga-firmware-arc .baseline-warning,
.manga-firmware-arc .mapping-payoff,
.manga-firmware-arc .recipe-payoff,
.manga-firmware-arc .firmware-debug-payoff {
  border-width: 5px;
  border-radius: 2px 11px 3px 8px;
  box-shadow: 8px 8px 0 var(--firmware-shadow), 13px 13px 0 #101116;
  transform: rotate(-.25deg);
}

@media (prefers-reduced-motion: reduce) {
  .manga-firmware-arc .pipeline,
  .manga-firmware-arc .codeblock,
  .manga-firmware-arc .priority-ladder,
  .manga-firmware-arc .baseline-sequence,
  .manga-firmware-arc .mapping-code-stack,
  .manga-firmware-arc .recipe-step,
  .manga-firmware-arc .card { transition: none !important; }
}
/* keyboard-keyboard MIDI field guide. */
.firmware-editor-slide {
  --editor-accent: #35d6d0;
  --editor-accent-soft: rgba(53,214,208,.16);
}
.firmware-editor-slide .slide-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}
.firmware-editor-slide .slide-head h2 {
  max-width: 980px;
  margin-top: 13px;
  font-size: 49px;
}
.firmware-editor-slide .editor-path {
  padding-bottom: 5px;
  color: #52665f;
  font: 900 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.firmware-editor-slide .content {
  max-width: 1448px !important;
  margin-top: 24px;
}
.firmware-editor-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 22px;
  height: 574px;
}
.firmware-editor {
  position: relative;
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  grid-template-rows: 38px minmax(0, 1fr) 24px;
  min-width: 0;
  overflow: hidden;
  border: 6px solid #101116;
  border-radius: 3px 14px 4px 10px;
  background: #0d1117;
  box-shadow: 10px 10px 0 var(--editor-accent), 17px 17px 0 #101116;
}
.firmware-editor__titlebar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 1px solid #30363d;
  background: #181c23;
  color: #a7b0bd;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.firmware-editor__traffic { display: flex; gap: 7px; }
.firmware-editor__traffic i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.firmware-editor__traffic i:nth-child(2) { background: #febc2e; }
.firmware-editor__traffic i:nth-child(3) { background: #28c840; }
.firmware-editor__titlebar span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.firmware-editor__titlebar b { justify-self: end; color: #697382; font-size: 14px; letter-spacing: .13em; }
.firmware-editor__sidebar {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: 13px 0;
  border-right: 1px solid #30363d;
  background: #151922;
  color: #a7b0bd;
  font: 700 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.firmware-editor__sidebar > small {
  display: block;
  padding: 0 15px 11px;
  color: #788392;
  font-size: 10px;
  letter-spacing: .12em;
}
.firmware-tree { display: grid; }
.firmware-tree span {
  display: block;
  min-width: 0;
  padding: 4px 11px 4px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.firmware-tree .tree-folder { color: #d3dae3; font-weight: 850; }
.firmware-tree .tree-folder::before { content: "▾ "; color: #798493; }
.firmware-tree .tree-folder--closed::before { content: "▸ "; }
.firmware-tree .tree-child { padding-left: 29px; }
.firmware-tree .tree-file { padding-left: 43px; }
.firmware-tree .tree-root-file { padding-left: 29px; }
.firmware-tree .tree-file::before { content: "rs "; color: #d67a42; font-size: 9px; font-weight: 1000; }
.firmware-tree .tree-config::before { content: "◆ "; color: #d6b642; }
.firmware-tree .is-active {
  border-left: 3px solid var(--editor-accent);
  background: #27303d;
  color: #fff;
}
.firmware-editor__main {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: 37px 27px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}
.firmware-editor__tabs {
  display: flex;
  min-width: 0;
  border-bottom: 1px solid #30363d;
  background: #11151c;
}
.firmware-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 17px;
  border-right: 1px solid #30363d;
  color: #929dab;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.firmware-tab::before { content: "rs"; color: #e7874c; font-size: 9px; font-weight: 1000; }
.firmware-tab--config::before { content: "◆"; color: #d6b642; }
.firmware-tab.is-active {
  border-top: 2px solid var(--editor-accent);
  background: #0d1117;
  color: #fff;
}
.firmware-editor__crumbs {
  display: flex;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid #21262d;
  color: #778290;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.firmware-editor__crumbs b { color: #bac3cf; }
.firmware-editor__code {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, #0d1117 0 48px, #20262e 48px 49px, #0d1117 49px);
}
.firmware-editor__code pre {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15px 20px 16px 59px;
  overflow: hidden;
  background: transparent !important;
  white-space: pre;
}
.firmware-editor__code code,
.firmware-editor__code code.hljs {
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  color: #d6deeb;
  font-size: 17px;
  line-height: 1.42;
  tab-size: 4;
}
.firmware-editor__code--dense code,
.firmware-editor__code--dense code.hljs { font-size: 15px; line-height: 1.38; }
.firmware-editor__code--large code,
.firmware-editor__code--large code.hljs { font-size: 19px; line-height: 1.48; }
.firmware-editor__code .hljs-comment { color: #718096; font-style: italic; }
.firmware-editor__code .hljs-keyword,
.firmware-editor__code .hljs-meta { color: #c792ea; }
.firmware-editor__code .hljs-title,
.firmware-editor__code .hljs-function { color: #82aaff; }
.firmware-editor__code .hljs-number,
.firmware-editor__code .hljs-literal { color: #f78c6c; }
.firmware-editor__code .hljs-string { color: #c3e88d; }
.firmware-editor__status {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  background: var(--editor-accent);
  color: #0b1c1d;
  font: 950 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.firmware-editor__status span:last-child { opacity: .75; }
.firmware-editor__terminal {
  position: absolute;
  z-index: 4;
  left: 206px;
  right: 0;
  bottom: 24px;
  min-height: 93px;
  padding: 10px 15px 12px;
  border-top: 2px solid #30363d;
  background: rgba(13,17,23,.97);
  color: #b9c6d3;
  font: 750 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.firmware-editor__terminal small { display: block; margin-bottom: 6px; color: #7d8998; font-weight: 950; letter-spacing: .12em; }
.firmware-editor__terminal b { color: #c3e88d; }
.editor-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 19px 18px;
  border: 5px solid #101116;
  border-radius: 2px 12px 3px 9px;
  background: rgba(255,253,244,.93);
  box-shadow: 8px 8px 0 var(--editor-accent), 13px 13px 0 #101116;
}
.editor-guide > small {
  color: #68756f;
  font: 1000 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}
.editor-guide > strong {
  display: block;
  margin-top: 13px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.editor-guide > p {
  margin-top: 14px;
  color: #52665f;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}
.editor-guide__metric {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 2px solid rgba(21,32,29,.14);
}
.editor-guide__metric b { color: var(--editor-accent, #087f83); font: 1000 28px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.editor-guide__metric span { color: #3f514b; font-size: 14px; line-height: 1.08; font-weight: 900; }
.editor-guide__flow {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.editor-guide__flow span {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 3px solid #101116;
  background: var(--paper);
  color: var(--ink);
  font: 900 13px/1.05 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.editor-guide__flow span.is-hot { background: var(--yellow); }
.editor-guide__flow span.is-accent { background: var(--editor-accent-soft); }
.editor-guide__flow i { margin-left: auto; color: #68756f; font-style: normal; }
.editor-guide__takeaway {
  margin-top: auto !important;
  padding-top: 15px;
  border-top: 4px solid #101116;
  color: var(--ink) !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}
.firmware-editor-slide--scan { --editor-accent: #35d6d0; --editor-accent-soft: rgba(53,214,208,.2); }
.firmware-editor-slide--priority { --editor-accent: #ef4f4f; --editor-accent-soft: rgba(239,79,79,.15); }
.firmware-editor-slide--calibration { --editor-accent: #48b875; --editor-accent-soft: rgba(72,184,117,.17); }
.firmware-editor-slide--state { --editor-accent: #ffd34f; --editor-accent-soft: rgba(255,211,79,.22); }
.firmware-editor-slide--queue { --editor-accent: #ef8b35; --editor-accent-soft: rgba(239,139,53,.18); }
.firmware-editor-slide--mapping { --editor-accent: #f25aa2; --editor-accent-soft: rgba(242,90,162,.16); }
.firmware-editor-slide--debug { --editor-accent: #9a7ae8; --editor-accent-soft: rgba(154,122,232,.17); }

.firmware-editor--split .firmware-editor__main {
  grid-template-rows: 37px 27px minmax(0, 1fr);
}
.firmware-editor__split-code {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.firmware-editor__split-code .firmware-editor__code + .firmware-editor__code { border-left: 1px solid #30363d; }
.firmware-editor__split-code .firmware-editor__code::before {
  content: attr(data-label);
  position: absolute;
  z-index: 2;
  right: 13px;
  top: 10px;
  padding: 5px 7px;
  background: #242b35;
  color: #98a5b3;
  font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

@media (prefers-reduced-motion: reduce) {
  .firmware-editor,
  .editor-guide { transition: none !important; }
}

.midi-origin-slide .slide-head h2,
.midi-primer-slide .slide-head h2,
.midi-vocabulary-slide .slide-head h2,
.midi-setup-slide .slide-head h2,
.midi-code-path-slide .slide-head h2 { max-width: 1400px; font-size: 54px; }

.midi-origin-stage,
.midi-primer-stage,
.midi-vocabulary-stage,
.midi-setup-stage,
.midi-code-path-stage { max-width: 1400px !important; }

.midi-origin-stage {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: 18px 24px;
  margin-top: 25px;
}
.midi-origin-agreement {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 474px;
  padding: 20px 22px 22px;
  border: 4px solid var(--charcoal);
  border-radius: 11px;
  background: rgba(255,253,246,.8);
  box-shadow: 7px 7px 0 var(--sage);
}
.midi-origin-problem { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 15px; }
.midi-origin-problem small { grid-row: 1 / 3; padding: 9px 10px; background: var(--charcoal); color: var(--yellow); font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .09em; }
.midi-origin-problem strong { color: var(--ink); font-size: 23px; line-height: 1; }
.midi-origin-problem span { color: #52665f; font-size: 14px; font-weight: 850; }
.midi-origin-makers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 17px; }
.midi-origin-maker { display: grid; place-items: center; min-height: 51px; padding: 8px 5px; border: 3px solid var(--charcoal); background: var(--paper); color: var(--ink); font: 1000 11px/1 ui-monospace, monospace; box-shadow: 4px 4px 0 var(--sage); }
.midi-origin-maker:nth-child(2) { background: #ffddea; box-shadow-color: var(--magenta); }
.midi-origin-maker:nth-child(3) { background: #fff0d2; box-shadow-color: #d87a13; }
.midi-origin-maker:nth-child(4) { background: #dff6f4; box-shadow-color: #087f83; }
.midi-origin-maker:nth-child(5) { background: #eef0ff; box-shadow-color: #7d74c8; }
.midi-origin-hardware { display: grid; grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1fr); gap: 11px; min-height: 270px; margin-top: 19px; }
.midi-origin-hardware figure { display: grid; grid-template-rows: 1fr 54px; min-width: 0; overflow: hidden; margin: 0; border: 3px solid var(--charcoal); background: #f5f3eb; box-shadow: 4px 4px 0 var(--sage); }
.midi-origin-hardware figure:last-child { box-shadow-color: var(--magenta); }
.midi-origin-hardware figure > img { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.midi-origin-hardware figcaption { display: grid; align-content: center; padding: 8px 11px; border-top: 3px solid var(--charcoal); background: var(--paper); }
.midi-origin-hardware figcaption small { color: #087f83; font: 1000 8px/1 ui-monospace, monospace; letter-spacing: .08em; }
.midi-origin-hardware figcaption strong { margin-top: 5px; color: var(--ink); font-size: 16px; line-height: 1; }
.midi-origin-link { position: relative; display: grid; grid-template-rows: 1fr auto auto; align-items: center; min-width: 0; overflow: hidden; border: 3px solid var(--charcoal); background: var(--yellow); box-shadow: 4px 4px 0 #087f83; text-align: center; }
.midi-origin-link img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 60%; filter: saturate(.92) contrast(1.05); }
.midi-origin-link strong { padding: 8px 4px 5px; color: var(--ink); font: 1000 15px/1 ui-monospace, monospace; }
.midi-origin-link span { padding-bottom: 7px; color: var(--magenta); font: 1000 28px/1 ui-monospace, monospace; }
.midi-origin-timeline { display: grid; grid-template-rows: 1fr 22px 1fr 22px 1.15fr auto; min-height: 474px; padding: 20px; border: 4px solid var(--charcoal); border-radius: 11px; background: #eef0ff; box-shadow: 7px 7px 0 #7d74c8; }
.midi-origin-timeline article { display: grid; grid-template-columns: 78px 1fr; align-items: center; padding: 13px 14px; border: 3px solid var(--charcoal); background: var(--paper); }
.midi-origin-timeline article > b { color: var(--magenta); font: 1000 26px/1 ui-monospace, monospace; }
.midi-origin-timeline article small { color: #087f83; font: 1000 9px/1 ui-monospace, monospace; letter-spacing: .08em; }
.midi-origin-timeline article strong { display: block; margin-top: 6px; color: var(--ink); font-size: 16px; line-height: 1.05; }
.midi-origin-timeline > i { display: grid; place-items: center; color: var(--magenta); font: normal 1000 18px/1 ui-monospace, monospace; }
.midi-origin-timeline .midi-origin-timeline-proof { background: #dff6f4; box-shadow: 4px 4px 0 #087f83; }
.midi-origin-timeline p { margin: 14px 2px 0; color: #52665f; font-size: 15px; line-height: 1.1; font-weight: 900; text-align: center; }
.midi-origin-payoff { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 20px 12px; border: 4px solid var(--charcoal); background: var(--yellow); box-shadow: 6px 6px 0 var(--magenta); }
.midi-origin-payoff span { color: #087f83; font: 1000 16px/1 ui-monospace, monospace; }
.midi-origin-payoff strong { color: var(--ink); font-size: 22px; line-height: 1; }

.midi-contract { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: stretch; }
.midi-contract-node { display: grid; align-content: center; min-height: 145px; padding: 17px 20px; border: 4px solid var(--charcoal); border-radius: 11px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); text-align: center; }
.midi-contract-node--message { background: var(--yellow); box-shadow-color: var(--magenta); }
.midi-contract-node--receiver { background: #dff6f4; box-shadow-color: #087f83; }
.midi-contract-node small { color: #087f83; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.midi-contract-node strong { margin-top: 9px; color: var(--ink); font-size: 27px; line-height: 1; }
.midi-contract-node span { margin-top: 9px; color: #52665f; font-size: 16px; font-weight: 850; }
.midi-contract-node code { margin-top: 11px; color: #a93668; font-size: 25px; }
.midi-contract-arrow { display: grid; place-items: center; color: var(--magenta); font: 1000 40px/1 ui-monospace, monospace; }
.midi-byte-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 21px; }
.midi-byte { display: grid; grid-template-columns: 78px 1fr; align-items: center; min-height: 116px; padding: 14px 18px; border: 4px solid var(--charcoal); background: var(--paper); box-shadow: 5px 5px 0 var(--sage); }
.midi-byte--status { background: #ffddea; box-shadow-color: var(--magenta); }
.midi-byte--note { background: #fff0d2; box-shadow-color: #d87a13; }
.midi-byte--velocity { background: #dff6f4; box-shadow-color: #087f83; }
.midi-byte > b { grid-row: 1 / 4; color: var(--ink); font: 1000 39px/1 ui-monospace, monospace; }
.midi-byte small { color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .09em; }
.midi-byte strong { margin-top: 5px; color: var(--ink); font-size: 18px; line-height: 1; }
.midi-byte span { margin-top: 7px; color: #52665f; font-size: 14px; font-weight: 850; }
.midi-primer-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 18px; }
.midi-primer-facts span { padding: 12px 16px; border-left: 7px solid #087f83; background: rgba(184,215,189,.35); color: #40564e; font-size: 16px; font-weight: 850; }
.midi-primer-facts b { color: var(--ink); font: 1000 20px/1 ui-monospace, monospace; }

.midi-vocabulary-stage { display: grid; grid-template-columns: 1.35fr .65fr; gap: 19px 27px; }
.midi-message-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.midi-message-card { position: relative; min-height: 190px; padding: 20px 21px 49px; border: 4px solid var(--charcoal); border-radius: 10px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); }
.midi-message-card--cc { background: #dff6f4; box-shadow-color: #087f83; }
.midi-message-card--program { background: #fff0d2; box-shadow-color: #d87a13; }
.midi-message-card--bend { background: #ffddea; box-shadow-color: var(--magenta); }
.midi-message-card small { color: #087f83; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .06em; }
.midi-message-card strong { display: block; margin-top: 15px; color: var(--ink); font-size: 25px; line-height: 1; }
.midi-message-card span { display: block; margin-top: 11px; color: #52665f; font-size: 16px; font-weight: 800; }
.midi-message-card em { position: absolute; right: 14px; bottom: 13px; left: 14px; padding: 8px; background: var(--charcoal); color: var(--yellow); font: normal 1000 11px/1 ui-monospace, monospace; text-align: center; }
.midi-vocabulary-rail { display: grid; grid-template-rows: 166px 1fr; gap: 16px; }
.midi-vocabulary-keyboard {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 14px 18px 21px;
  border: 4px solid var(--charcoal);
  border-radius: 11px;
  background: #dff6f4;
  box-shadow: 7px 7px 0 #087f83;
}
.midi-vocabulary-keyboard img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(5px 7px 0 rgba(21,32,29,.2)); }
.midi-vocabulary-keyboard figcaption {
  position: absolute;
  right: 10px;
  bottom: 9px;
  padding: 5px 7px 4px;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 9px/1 ui-monospace, monospace;
  letter-spacing: .09em;
}
.midi-channel-card { padding: 21px; border: 4px solid var(--charcoal); border-radius: 11px; background: #eef0ff; box-shadow: 7px 7px 0 #7d74c8; }
.midi-channel-card > small { display: block; margin-bottom: 18px; color: #625aa5; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .1em; }
.midi-channel-card > div { display: grid; grid-template-columns: 70px 1fr; margin-top: 13px; padding: 15px; border: 3px solid var(--charcoal); background: var(--paper); }
.midi-channel-card b { grid-row: 1 / 3; align-self: center; color: var(--magenta); font: 1000 19px/1 ui-monospace, monospace; }
.midi-channel-card strong { color: var(--ink); font-size: 21px; line-height: 1; }
.midi-channel-card span { margin-top: 7px; color: #52665f; font-size: 14px; font-weight: 800; }
.midi-channel-card p { margin-top: 22px; color: #52665f; font-size: 17px; line-height: 1.18; font-weight: 850; }

.midi-setup-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 27px; }
.midi-setup-code { overflow: hidden; border: 4px solid var(--charcoal); border-radius: 10px; background: #101918; box-shadow: 7px 7px 0 #087f83; }
.midi-setup-code--sender { box-shadow-color: var(--magenta); }
.midi-setup-code > small { display: block; padding: 10px 16px; background: #293634; color: var(--yellow); font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.midi-setup-code pre { margin: 0; padding: 19px 22px; white-space: pre-wrap; }
.midi-setup-code code { color: #d7ffe7; font-size: 16px; line-height: 1.28; }
.midi-hardware-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 46px 1fr 46px 1fr; align-items: center; }
.midi-hardware-rail:has(.midi-hardware-photo) { grid-template-columns: 1fr 34px 1fr 34px 1fr 245px; gap: 9px; }
.midi-hardware-rail article { display: grid; grid-template-columns: 105px 1fr; align-items: center; min-height: 80px; padding: 12px 16px; border: 3px solid var(--charcoal); background: var(--paper); box-shadow: 4px 4px 0 var(--sage); }
.midi-hardware-rail article:nth-of-type(2) { background: var(--yellow); box-shadow-color: var(--magenta); }
.midi-hardware-rail article:nth-of-type(3) { background: #dff6f4; box-shadow-color: #087f83; }
.midi-hardware-rail b { grid-row: 1 / 3; color: var(--ink); font: 1000 25px/1 ui-monospace, monospace; }
.midi-hardware-rail small { color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.midi-hardware-rail span { margin-top: 5px; color: #52665f; font-size: 14px; font-weight: 800; }
.midi-hardware-rail > div { color: var(--magenta); text-align: center; font: 1000 31px/1 ui-monospace, monospace; }
.midi-hardware-photo {
  position: relative;
  height: 80px;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 4px 4px 0 var(--magenta);
}
.midi-hardware-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.midi-hardware-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 6px 3px;
  background: var(--charcoal);
  color: var(--yellow);
  font: 1000 8px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}

.midi-event-path { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr; align-items: stretch; }
.midi-path-node { position: relative; min-height: 248px; padding: 18px 17px 51px; border: 4px solid var(--charcoal); border-radius: 10px; background: var(--paper); box-shadow: 6px 6px 0 var(--sage); }
.midi-path-node--queue { background: #fff0d2; box-shadow-color: #d87a13; }
.midi-path-node--route { background: #dff6f4; box-shadow-color: #087f83; }
.midi-path-node--wire { background: #ffddea; box-shadow-color: var(--magenta); }
.midi-path-node small { display: block; color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .09em; }
.midi-path-node > b { display: block; margin-top: 17px; color: rgba(21,32,29,.18); font: 1000 47px/.8 ui-monospace, monospace; }
.midi-path-node strong { display: block; margin-top: 13px; color: var(--ink); font-size: 22px; line-height: 1; }
.midi-path-node span { display: block; margin-top: 10px; color: #52665f; font-size: 15px; line-height: 1.12; font-weight: 800; }
.midi-path-node code { position: absolute; right: 12px; bottom: 13px; left: 12px; padding: 9px 6px; background: var(--charcoal); color: var(--yellow); font-size: 11px; text-align: center; }
.midi-path-arrow { display: grid; place-items: center; color: var(--magenta); font: 1000 29px/1 ui-monospace, monospace; }
.midi-routing-example { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: center; margin-top: 19px; }
.midi-routing-example > div { padding: 13px 16px; border: 3px solid var(--charcoal); background: var(--paper); }
.midi-routing-example > span { color: var(--magenta); text-align: center; font: 1000 26px/1 ui-monospace, monospace; }
.midi-routing-example small { display: block; color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.midi-routing-example code { display: block; margin-top: 7px; color: var(--ink); font-size: 16px; }
.midi-routing-example .midi-routing-bytes { background: var(--yellow); }
.midi-rx-caveat { display: flex; align-items: center; gap: 20px; margin-top: 17px; padding: 11px 16px; border: 3px solid var(--charcoal); background: #eef0ff; color: #40564e; font-size: 15px; font-weight: 850; }
.midi-rx-caveat b { color: #625aa5; font: 1000 12px/1 ui-monospace, monospace; letter-spacing: .1em; }

.midi-primer-payoff,
.midi-vocabulary-payoff,
.midi-setup-payoff,
.midi-code-path-payoff { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 14px 20px 12px; border: 4px solid var(--charcoal); background: var(--yellow); box-shadow: 6px 6px 0 var(--magenta); }
.midi-primer-payoff span,
.midi-vocabulary-payoff span,
.midi-setup-payoff span,
.midi-code-path-payoff span { color: #087f83; font: 1000 16px/1 ui-monospace, monospace; }
.midi-primer-payoff strong,
.midi-vocabulary-payoff strong,
.midi-setup-payoff strong,
.midi-code-path-payoff strong { color: var(--ink); font-size: 22px; line-height: 1; }
.midi-code-path-payoff { margin-top: 16px; }

/* End-card reference library. */
.resources-slide .slide-head h2 { max-width: 1400px; font-size: 54px; }
.resources-stage { display: grid; gap: 20px; max-width: 1400px !important; margin-top: 25px; }
.resource-feature {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 465px;
  overflow: hidden;
  border: 5px solid var(--charcoal);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 9px 9px 0 #087f83;
  color: inherit;
  text-decoration: none;
}
.resource-feature-copy { display: grid; align-content: center; padding: 40px 38px 83px; background: var(--yellow); }
.resource-feature-copy small { color: #087f83; font: 1000 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.resource-feature-copy h3 { max-width: 510px; margin: 18px 0 0; color: var(--ink); font-size: 41px; line-height: .98; }
.resource-feature-copy p { max-width: 500px; margin: 22px 0 0; color: #40564e; font-size: 18px; line-height: 1.18; font-weight: 850; }
.resource-feature-copy > span { display: block; margin-top: 27px; padding: 12px 14px; border: 3px solid var(--charcoal); background: var(--paper); color: #a93668; font: 1000 13px/1.05 ui-monospace, monospace; overflow-wrap: anywhere; }
.resource-message-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: center; padding: 31px; background: #eef0ff; }
.resource-message-map article { display: grid; grid-template-columns: 70px 1fr; align-items: center; min-height: 101px; padding: 13px 16px; border: 3px solid var(--charcoal); background: var(--paper); box-shadow: 4px 4px 0 var(--sage); }
.resource-message-map article:nth-child(2),
.resource-message-map article:nth-child(5) { background: #ffddea; box-shadow-color: var(--magenta); }
.resource-message-map article:nth-child(3),
.resource-message-map article:nth-child(6) { background: #dff6f4; box-shadow-color: #087f83; }
.resource-message-map code { grid-row: 1 / 3; color: var(--magenta); font-size: 27px; font-weight: 1000; }
.resource-message-map strong { color: var(--ink); font-size: 18px; line-height: 1; }
.resource-message-map span { margin-top: 7px; color: #52665f; font-size: 12px; font-weight: 850; }
.resource-open-cue { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 14px; border-top: 5px solid var(--charcoal); background: var(--charcoal); color: var(--yellow); }
.resource-open-cue span { color: #78e1dc; font: 1000 14px/1 ui-monospace, monospace; }
.resource-open-cue strong { color: var(--yellow); font-size: 18px; line-height: 1; }
.resources-payoff { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 20px 12px; border: 4px solid var(--charcoal); background: var(--yellow); box-shadow: 6px 6px 0 var(--magenta); }
.resources-payoff span { color: #087f83; font: 1000 16px/1 ui-monospace, monospace; }
.resources-payoff strong { color: var(--ink); font-size: 22px; line-height: 1; }

/* keyboard-keyboard Wicki-Hayden field guide. */
.wicki-origin-slide .slide-head h2,
.wicki-vector-slide .slide-head h2 { max-width: 1400px; font-size: 54px; }

.wicki-origin-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px minmax(0, 1.16fr);
  grid-template-rows: 494px auto;
  gap: 20px 22px;
  max-width: 1400px !important;
  margin-top: 25px;
}
.wicki-origin-figure {
  display: grid;
  grid-template-rows: 1fr 67px;
  overflow: hidden;
  margin: 0;
  border: 4px solid var(--charcoal);
  border-radius: 11px;
  background: var(--charcoal);
  box-shadow: 7px 7px 0 var(--sage);
}
.wicki-origin-figure--model-m { box-shadow-color: var(--magenta); }
.wicki-origin-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wicki-origin-figure--concertina img { object-position: center 47%; }
.wicki-origin-figure--model-m img { object-position: center center; }
.wicki-origin-figure figcaption {
  display: grid;
  align-content: center;
  padding: 9px 15px;
  background: var(--paper);
}
.wicki-origin-figure small,
.wicki-layout-source small { color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .1em; }
.wicki-origin-figure strong { margin-top: 7px; color: var(--ink); font-size: 18px; line-height: 1; }
.wicki-origin-timeline { display: grid; grid-template-rows: 1fr 24px 1fr 24px 1.15fr; align-items: stretch; }
.wicki-origin-era {
  display: grid;
  align-content: center;
  padding: 12px 13px;
  border: 4px solid var(--charcoal);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--sage);
  text-align: center;
}
.wicki-origin-era--now { background: var(--yellow); box-shadow-color: var(--magenta); }
.wicki-origin-era b { color: var(--magenta); font: 1000 20px/1 ui-monospace, monospace; }
.wicki-origin-era strong { margin-top: 7px; color: var(--ink); font-size: 18px; line-height: 1; }
.wicki-origin-era strong code { font-size: 13px; }
.wicki-origin-era span { margin-top: 7px; color: #52665f; font-size: 12px; line-height: 1.12; font-weight: 850; }
.wicki-origin-arrow { display: grid; place-items: center; color: #087f83; font: 1000 20px/1 ui-monospace, monospace; }
.wicki-origin-payoff,
.wicki-vector-payoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 20px 12px;
  border: 4px solid var(--charcoal);
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--magenta);
}
.wicki-origin-payoff span { color: #087f83; font: 1000 16px/1 ui-monospace, monospace; }
.wicki-origin-payoff strong,
.wicki-vector-payoff strong { color: var(--ink); font-size: 22px; line-height: 1; }

.wicki-build-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  grid-template-rows: 520px auto;
  gap: 20px 25px;
  max-width: 1400px !important;
  margin-top: 25px;
}
.wicki-build-diagram {
  position: relative;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.12) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(145deg, #fffdf6 0 58%, #dff6f4 100%);
  box-shadow: 8px 8px 0 #087f83;
}
.wicki-build-grid {
  position: absolute;
  inset: 24px 18px 58px;
}
.wicki-shift-trigger { position: absolute; width: 1px; height: 1px; }
.wicki-build-row {
  position: absolute;
  left: 134px;
  display: flex;
  gap: 4px;
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}
.wicki-build-row--octave { top: 43px; }
.wicki-build-row--other { top: 113px; transform: translateX(-47px); }
.wicki-build-row--first { top: 183px; }
.wicki-build-grid:has(.wicki-shift-trigger.visible) .wicki-build-row--other { transform: translateX(-47px); }
.wicki-build-grid:not(:has(.wicki-shift-trigger.visible)) .wicki-build-row--other { transform: translateX(0); }
.wicki-build-row > b {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 90px;
  height: 82px;
  color: var(--ink);
  font: 1000 24px/1 ui-monospace, monospace;
  filter: drop-shadow(3px 4px 0 rgba(21,32,29,.26));
}
.wicki-build-row > b::before,
.wicki-build-row > b::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: var(--charcoal);
}
.wicki-build-row > b::after { inset: 4px; z-index: -1; background: var(--paper); }
.wicki-build-row--other > b::after { background: #dff6f4; }
.wicki-build-row--octave > b::after { background: #ffddea; }
.wicki-build-row sub { position: relative; top: .25em; margin-left: 1px; font-size: 13px; }
.wicki-build-axis {
  position: absolute;
  left: 287px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #087f83;
  font: 1000 12px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.wicki-build-axis b { padding: 5px 8px; background: var(--yellow); color: var(--ink); font-size: 14px; }
.wicki-build-axis i { color: var(--magenta); font-size: 31px; font-style: normal; line-height: .5; }
.wicki-build-shift {
  position: absolute;
  left: 18px;
  top: 123px;
  display: grid;
  justify-items: center;
  color: var(--magenta);
  font: 1000 10px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.wicki-build-shift b { margin-top: 8px; font-size: 40px; line-height: .5; }
.wicki-build-intervals,
.wicki-build-octave { position: absolute; inset: 0; pointer-events: none; }
.wicki-build-focus {
  position: absolute;
  left: 145px;
  top: 195px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 68px;
  height: 58px;
  border: 4px solid var(--magenta);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font: 1000 19px/1 ui-monospace, monospace;
  box-shadow: 3px 3px 0 var(--charcoal);
}
.wicki-build-focus sub { font-size: 10px; }
.wicki-build-arrow {
  position: absolute;
  top: 134px;
  z-index: 4;
  display: grid;
  justify-items: center;
  color: var(--magenta);
}
.wicki-build-arrow b { font: 1000 63px/.6 ui-monospace, monospace; text-shadow: 2px 2px 0 var(--paper); }
.wicki-build-arrow em,
.wicki-build-octave em {
  padding: 5px 7px;
  background: var(--charcoal);
  color: white;
  font: 1000 10px/1 ui-monospace, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
}
.wicki-build-arrow--fourth { left: 85px; }
.wicki-build-arrow--fifth { left: 205px; }
.wicki-build-octave {
  z-index: 4;
  color: #087f83;
}
.wicki-build-octave > b {
  position: absolute;
  left: 176px;
  top: 110px;
  width: 6px;
  height: 81px;
  background: #087f83;
  color: transparent;
  font-size: 0;
  box-shadow: 2px 0 0 var(--paper), -2px 0 0 var(--paper);
}
.wicki-build-octave > b::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -12px;
  border-right: 11px solid transparent;
  border-bottom: 15px solid #087f83;
  border-left: 11px solid transparent;
}
.wicki-build-octave > span {
  position: absolute;
  left: 43px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #087f83;
  font: 1000 10px/1 ui-monospace, monospace;
  letter-spacing: .06em;
}
.wicki-build-octave em { background: #087f83; font-style: normal; text-align: center; }
.wicki-build-steps { display: grid; gap: 15px; }
.wicki-build-step {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  min-height: 158px;
  padding: 14px 16px;
  border: 4px solid var(--charcoal);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--sage);
}
.wicki-build-step:nth-child(2) { background: #dff6f4; box-shadow-color: #087f83; }
.wicki-build-step--shift { background: #ffddea; box-shadow-color: var(--magenta); }
.wicki-build-step > b { color: var(--magenta); font: 1000 34px/1 ui-monospace, monospace; }
.wicki-build-step small { color: #087f83; font: 1000 10px/1 ui-monospace, monospace; letter-spacing: .1em; }
.wicki-build-step strong { display: block; margin-top: 7px; color: var(--ink); font-size: 21px; line-height: 1; }
.wicki-build-step span { display: block; margin-top: 8px; color: #52665f; font-size: 13px; line-height: 1.12; font-weight: 800; }
.wicki-build-stage .wicki-vector-payoff { grid-column: 1 / -1; }
.wicki-vector-payoff code { color: #087f83; font-size: 15px; font-weight: 1000; }

/* keyboard-keyboard file-numbered slides 11–20 (including 14b).
   Visual manga pass only; original English stays in the slide fragments.
   Keep structural borders un-clipped; polygon cuts belong on borderless
   decoration, not on cards, tags, banners, or frames. */
.manga-sequence {
  --manga-accent: var(--magenta);
  --manga-accent-rgb: 242, 90, 162;
  isolation: isolate;
}
.manga-sequence--signal,
.manga-sequence--blueprint {
  --manga-accent: var(--cyan);
  --manga-accent-rgb: 53, 214, 208;
}
.manga-sequence--legacy {
  --manga-accent: #65b58a;
  --manga-accent-rgb: 101, 181, 138;
}
.manga-sequence--warning {
  --manga-accent: var(--red);
  --manga-accent-rgb: 239, 79, 79;
}
.manga-sequence--roadmap {
  --manga-accent: #4c76d7;
  --manga-accent-rgb: 76, 118, 215;
}
.manga-sequence--field-guide {
  --manga-accent: #d89c00;
  --manga-accent-rgb: 216, 156, 0;
}
.reveal .slides section.manga-sequence:not(.manga-sequence--interruption) {
  background:
    radial-gradient(circle at 1px 1px, rgba(21,32,29,.16) 1.25px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(118deg, rgba(var(--manga-accent-rgb),.12), transparent 29%),
    repeating-linear-gradient(166deg, transparent 0 31px, rgba(var(--manga-accent-rgb),.045) 31px 33px),
    var(--paper) !important;
  box-shadow: inset 0 0 0 6px #101116, inset 0 0 0 11px rgba(255,253,244,.9);
}
.manga-sequence .slide-head { padding-left: 23px; }
.manga-sequence .slide-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: -5px;
  width: 10px;
  background: var(--manga-accent);
  box-shadow: 7px 0 0 var(--charcoal), 12px 0 0 rgba(var(--manga-accent-rgb),.34);
  transform: skewY(-8deg);
}
.manga-sequence .slide-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 6px;
  top: -12px;
  width: 310px;
  height: 94px;
  border-top: 6px solid rgba(var(--manga-accent-rgb),.58);
  border-right: 6px solid rgba(var(--manga-accent-rgb),.58);
  background: radial-gradient(circle, rgba(var(--manga-accent-rgb),.3) 0 3px, transparent 3.5px) 0 0 / 18px 18px;
  clip-path: polygon(48% 0, 100% 0, 100% 100%, 93% 100%);
  pointer-events: none;
}
.manga-sequence .eyebrow {
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--charcoal), 9px 9px 0 var(--manga-accent);
  transform: rotate(-.45deg);
}
.manga-sequence .slide-head h2 {
  position: relative;
  width: max-content;
  max-width: 1380px;
  text-shadow: 3px 3px 0 var(--paper), 7px 7px 0 rgba(var(--manga-accent-rgb),.3);
}
.manga-sequence .content { isolation: isolate; }
.manga-sequence .content::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -13px -17px -15px;
  border: 3px solid rgba(var(--manga-accent-rgb),.48);
  transform: rotate(-.1deg);
  transform-origin: center;
  pointer-events: none;
}
.manga-sequence .piano-forte-principle,
.manga-sequence .piano-forte-example,
.manga-sequence .keyboard-build-card,
.manga-sequence .source-parent,
.manga-sequence .source-result,
.manga-sequence .license-panel,
.manga-sequence .vendor-panel,
.manga-sequence .kicad-roadmap-card,
.manga-sequence .schematic-canvas,
.manga-sequence .schematic-action,
.manga-sequence .kicad-export-step,
.manga-sequence .kicad-loop-step,
.manga-sequence .kicad-source-card,
.manga-sequence .datasheet-page,
.manga-sequence .datasheet-lesson { border-radius: 1px; }
.manga-sequence .piano-forte-payoff,
.manga-sequence .kicad-roadmap-payoff,
.manga-sequence .schematic-rule,
.manga-sequence .kicad-export-payoff,
.manga-sequence .datasheet-payoff {
  position: relative;
  border-radius: 1px;
}
.manga-sequence .piano-forte-payoff::after,
.manga-sequence .kicad-roadmap-payoff::after,
.manga-sequence .schematic-rule::after,
.manga-sequence .kicad-export-payoff::after,
.manga-sequence .datasheet-payoff::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -18px;
  width: 30px;
  height: 22px;
  border-right: 5px solid var(--charcoal);
  border-bottom: 5px solid var(--charcoal);
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(-18deg);
}

/* 11 · piano/forte measurement as paired action panels. */
.manga-sequence--signal .piano-forte-principle {
  border-width: 6px;
  border-radius: 1px;
  background-image: linear-gradient(90deg, rgba(53,214,208,.10), transparent 44%, rgba(255,77,150,.07));
  box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #101116;
  transform: rotate(-.25deg);
}
.manga-sequence--signal .piano-forte-example--soft { transform: rotate(-.5deg); box-shadow: 10px 10px 0 var(--cyan), 16px 16px 0 #101116; }
.manga-sequence--signal .piano-forte-example--loud { transform: rotate(.45deg); box-shadow: 10px 10px 0 var(--magenta), 16px 16px 0 #101116; }
.manga-sequence--signal .piano-forte-trace {
  background-image: repeating-linear-gradient(107deg, transparent 0 42px, rgba(255,255,255,.055) 43px 46px);
}
.reveal .slides section.piano-forte-slide .piano-forte-reaction {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.reveal .slides section.piano-forte-slide:not(:has(.piano-forte-stage .current-fragment)) .piano-forte-reaction--question,
.reveal .slides section.piano-forte-slide:has(.piano-forte-principle.current-fragment) .piano-forte-reaction--principle,
.reveal .slides section.piano-forte-slide:has(.piano-forte-example--soft.current-fragment) .piano-forte-reaction--soft,
.reveal .slides section.piano-forte-slide:has(.piano-forte-example--loud.current-fragment) .piano-forte-reaction--loud,
.reveal .slides section.piano-forte-slide:has(.piano-forte-payoff.current-fragment) .piano-forte-reaction--solved {
  opacity: .23;
  visibility: visible;
}

/* 12–14b · origin, inheritance, licensing, and interruption story beats. */
.manga-sequence--origin .keyboard-build-card { transform: none; }
.open-source-parents-slide .source-merge { gap: 13px; margin-top: 42px; perspective: 1100px; }
.open-source-parents-slide .source-parent,
.open-source-parents-slide .source-result {
  position: relative;
  overflow: hidden;
  border-width: 5px;
  background-image:
    radial-gradient(circle, rgba(21,32,29,.11) 0 2px, transparent 2.5px),
    linear-gradient(145deg, rgba(53,214,208,.15), transparent 55%);
  background-size: 17px 17px, auto;
  box-shadow: 9px 9px 0 var(--charcoal);
}
.open-source-parents-slide .source-parent:first-child { transform: rotateY(2deg) rotate(-.7deg); }
.open-source-parents-slide .source-parent:nth-child(3) { transform: translateY(7px) rotateY(-2deg) rotate(.55deg); }
.open-source-parents-slide .source-result {
  padding-right: 112px;
  background-image:
    radial-gradient(circle, rgba(21,32,29,.1) 0 2px, transparent 2.5px),
    repeating-conic-gradient(from 5deg at 82% 78%, transparent 0 8deg, rgba(101,181,138,.22) 8deg 11deg);
  background-size: 17px 17px, auto;
  box-shadow: 9px 9px 0 #65b58a, 15px 15px 0 #101116;
  transform: rotateY(-2deg) rotate(-.4deg);
}
.open-source-parents-slide .source-parent::before,
.open-source-parents-slide .source-result::before {
  position: absolute;
  right: 10px;
  top: 7px;
  left: auto;
  bottom: auto;
  color: var(--paper);
  font: 1000 47px/1 ui-monospace, monospace;
  -webkit-text-stroke: 2px var(--charcoal);
  text-shadow: 3px 3px 0 var(--manga-accent);
  transform: rotate(5deg);
}
.open-source-parents-slide .source-parent:first-child::before { content: "01"; }
.open-source-parents-slide .source-parent:nth-child(3)::before { content: "02"; }
.open-source-parents-slide .source-result::before { content: "03"; }
.open-source-parents-slide .source-result::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -12px;
  width: 195px;
  height: 245px;
  background: url("assets/characters/faces/ren/understands-big.png") right bottom / contain no-repeat;
  filter: drop-shadow(-5px 5px 0 rgba(21,32,29,.82));
  pointer-events: none;
}
.open-source-parents-slide .source-arrow { text-shadow: 4px 4px 0 var(--charcoal); transform: rotate(-4deg); }
.open-source-parents-slide .source-parent--photo,
.open-source-parents-slide .source-result--photo {
  display: grid;
  align-content: start;
  min-height: 444px;
  padding: 20px;
}
.source-project-photo {
  position: relative;
  height: 218px;
  margin: 15px 0 0;
  overflow: hidden;
  border: 4px solid var(--charcoal);
  background: var(--charcoal);
  box-shadow: 5px 5px 0 var(--charcoal);
}
.source-project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.source-project-photo--result img { object-position: center 48%; }
.source-project-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 6px 8px 5px;
  background: rgba(16,25,24,.88);
  color: var(--yellow);
  font: 1000 9px/1 ui-monospace, monospace;
  letter-spacing: .06em;
}
.open-source-parents-slide .source-parent--photo h3,
.open-source-parents-slide .source-result--photo h3 { margin-top: 16px; font-size: 31px; line-height: 1.02; }
.open-source-parents-slide .source-parent--photo code { margin-top: 10px; font-size: 12px; }
.open-source-parents-slide .source-result--photo { padding-right: 20px; }
.open-source-parents-slide .source-result--photo::after { display: none; }
.manga-sequence--warning .oshw-permission {
  border-radius: 1px;
  background-image: radial-gradient(circle, rgba(21,32,29,.12) 0 2px, transparent 2.5px);
  background-size: 18px 18px;
  transform: rotate(-.35deg);
}
.manga-sequence--warning .license-panel { transform: rotate(.28deg); box-shadow: 8px 8px 0 var(--red); }
.manga-sequence--warning .vendor-panel { transform: translateY(3px) rotate(-.24deg); box-shadow: 8px 8px 0 var(--cyan); }
.manga-sequence--warning .license-check:nth-child(odd),
.manga-sequence--warning .vendor-card:nth-child(even) { background-image: linear-gradient(105deg, rgba(239,79,79,.075), transparent 48%); }
.manga-sequence--interruption .interruption-stage {
  box-shadow: inset 0 0 0 7px rgba(242,90,162,.28);
  clip-path: polygon(0 0, 98% 0, 100% 6%, 100% 100%, 2% 100%, 0 94%);
}
.manga-sequence--interruption .interruption-bubble { filter: drop-shadow(10px 11px 0 rgba(53,214,208,.8)); }

/* 15–18 · consecutive KiCad production cels. */
.manga-sequence--roadmap .kicad-roadmap-app {
  background-image:
    url("assets/characters/faces/mio/realization-big.png"),
    linear-gradient(105deg, #3372cf 0 67%, #29579d 100%);
  background-position: calc(100% - 190px) 17%, center;
  background-repeat: no-repeat;
  background-size: 118px auto, auto;
}
.manga-sequence--roadmap .kicad-roadmap-card:nth-of-type(1) { transform: rotate(-1.2deg); }
.manga-sequence--roadmap .kicad-roadmap-card:nth-of-type(2) { transform: translateY(7px) rotate(.85deg); }
.manga-sequence--roadmap .kicad-roadmap-card:nth-of-type(3) { transform: rotate(-.75deg); }
.manga-sequence--blueprint .schematic-canvas {
  position: relative;
  box-shadow: 10px 10px 0 var(--cyan), 18px 18px 0 #08080d;
}
.manga-sequence--blueprint .schematic-canvas::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 47px;
  width: 145px;
  height: 145px;
  border-top: 5px solid var(--cyan);
  border-right: 5px solid var(--cyan);
  background: radial-gradient(circle, rgba(53,214,208,.23) 0 2px, transparent 2.5px) 0 0 / 15px 15px;
  clip-path: polygon(48% 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.manga-sequence--blueprint .schematic-action:nth-child(odd) { transform: rotate(-.35deg); }
.manga-sequence--blueprint .schematic-action:nth-child(even) { transform: translateX(4px) rotate(.3deg); }
.manga-sequence--payoff .kicad-export-step {
  background-image: radial-gradient(circle, rgba(21,32,29,.1) 0 2px, transparent 2.5px);
  background-size: 17px 17px;
}
.manga-sequence--payoff .kicad-export-step--plot { transform: rotate(-1.15deg); }
.manga-sequence--payoff .kicad-export-step--zip { transform: translateY(7px) rotate(.9deg); }
.manga-sequence--payoff .kicad-export-step--order { transform: rotate(-.8deg); }

/* 19–20 · framed field-guide cards with a final anime reaction. */
.manga-sequence--field-guide .kicad-loop-step:nth-child(4n + 1),
.manga-sequence--field-guide .datasheet-lesson:nth-child(4n + 1) { transform: rotate(-.4deg); }
.manga-sequence--field-guide .kicad-loop-step:nth-child(4n + 2),
.manga-sequence--field-guide .datasheet-lesson:nth-child(4n + 2) { transform: translateY(2px) rotate(.35deg); }
.manga-sequence--field-guide .kicad-loop-step:nth-child(4n + 3),
.manga-sequence--field-guide .datasheet-lesson:nth-child(4n + 3) { transform: translateX(3px) rotate(.3deg); }
.manga-sequence--field-guide .kicad-loop-step:nth-child(4n),
.manga-sequence--field-guide .datasheet-lesson:nth-child(4n) { transform: translateY(2px) rotate(-.3deg); }
.manga-sequence--field-guide .kicad-source-card {
  background-image:
    linear-gradient(135deg, rgba(242,90,162,.12), transparent 33%),
    radial-gradient(circle, rgba(53,214,208,.13) 0 2px, transparent 2.5px);
  background-size: auto, 19px 19px;
  box-shadow: 9px 9px 0 #087f83, 14px 14px 0 var(--charcoal);
}