@font-face {
  font-family: 'Lilita One';
  src: url('/assets/lilita-one-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/dm-sans-700.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Japanese';
  src: url('/assets/noto-sans-jp.woff2') format('woff2');
  font-display: swap;
}
/* The comic fonts load only on pages that use them. */
@font-face {
  font-family: 'Kero Comic';
  src: url('/assets/fonts/comic-neue-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Comic';
  src: url('/assets/fonts/comic-neue-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Impact';
  src: url('/assets/fonts/bangers-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #392c20;
  --paper: #fffaf0;
  --yellow: #f6c747;
  --butter: #ffe6a3;
  --red: #b6382b;
  --blue: #8bd1d6;
  --muted: #685844;
  --line: #d8c9a9;
  --heading: 'Lilita One', sans-serif;
  --body: 'DM Sans', sans-serif;
  --page: 1380px;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--body);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
select {
  font: inherit;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-bottom: 24px;
}
h3 {
  font-size: 2rem;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--red);
}
p {
  margin-bottom: 18px;
}
a,
summary,
select,
button {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
summary:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 5px;
}
a:hover .link-label,
.text-link:hover,
.quiet-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.nowrap {
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: var(--ink);
  color: white;
  padding: 14px 20px;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: none;
}
.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: 80px 6%;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-heading h2 {
  margin: 0;
}
.section-heading h2 > span {
  color: var(--red);
}
.eyebrow {
  display: block;
  font: 700 0.8125rem/1.5 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  max-width: 100%;
  padding: 15px 24px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 18px 21px 17px 23px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  line-height: 1.4;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.button:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 7px 0 var(--ink);
}
.button.white {
  background: var(--paper);
}
.button span {
  flex-shrink: 0;
}
.watch-button {
  background: var(--red);
  color: white;
}
.play-icon {
  font-size: 0.875rem;
}
/* TikTok's note (src/components/channel-marks.ts), white on an ink circle, the size of the
   YouTube play circle beside it. */
.tiktok-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
}
.tiktok-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}
.quiet-link {
  display: block;
  width: fit-content;
  padding: 14px 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  min-height: 44px;
}
.text-link,
.link-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  min-height: 44px;
}
.page-intro {
  padding-top: 52px;
  padding-bottom: 28px;
}
.page-intro h1 {
  margin: 0 0 18px;
}
.page-intro > p {
  max-width: 560px;
}
.site-header {
  max-width: var(--page);
  margin: 0 auto;
  padding: 22px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-frog {
  width: 54px;
  height: 56px;
  position: relative;
}
.brand-frog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-8deg);
}
.brand-name {
  font: 400 2.15rem/0.9 var(--heading);
  letter-spacing: -0.025em;
}
.brand-name small {
  display: block;
  font: 700 0.625rem/1.5 var(--body);
  letter-spacing: 0.055em;
  margin-top: 5px;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 700;
}
.site-header nav > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}
.site-header nav > a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
/* The way into learning stands out: Learn comes first, as a butter pill. */
.site-header nav > a.nav-learn {
  padding: 0 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.site-header nav > a.nav-learn:hover {
  background: var(--yellow);
}
.youtube {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 19px;
  flex-shrink: 0;
  border-radius: 30px;
  color: white;
  background: var(--red);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.youtube:hover {
  background: var(--ink);
}
.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 42px 6% 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.875rem;
  font-weight: 700;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.copyright {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  padding-top: 14px;
}
.not-found {
  min-height: 65vh;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* A SLIM BAR, NOT A CARD. The bar is legal furniture and it should read as furniture: one line of
   text and two answers on a single row from about 700px up, and a two row stack on a phone. It
   used to be a paragraph on a chunky pair of buttons, which measured 237px on a 320px phone and
   103px on a desktop, and a notice that size stops being furniture and starts being a takeover.

   The bar is capped and scrolls: at 200% text on a small phone an uncapped one filled the screen
   and buried the page behind it. src/client/consent.ts reserves its measured height at the foot
   of the body so the footer never sits underneath it. */
.consent-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 6%;
  background: var(--butter);
  border-top: 3px solid var(--ink);
}
.consent-banner[hidden] {
  display: none;
}
.consent-banner:focus-visible {
  outline: 3px solid #075693;
  outline-offset: -8px;
}
/* The basis is what decides the two layouts, and it is the only thing that does. Wider than about
   700px there is room for the line and both answers, so nothing wraps; narrower, the line claims
   its own row and the answers drop under it. No media query is needed for either. */
.consent-copy {
  flex: 1 1 340px;
  max-width: 640px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
/* Grows into whatever the line leaves, so the answers sit at the far end of the bar on a wide
   screen and at the right of their own row on a phone. */
.consent-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
/* ONE RULE FOR BOTH ANSWERS, AND NO VARIANT. Same size, same fill, same weight, and the decline
   is first: see the note in src/components/consent-banner.ts. The site's own button, cut down to
   the bar's scale. These two sit at 44px rather than the 56px .button floor, because the bar has
   to read as furniture and a 56px pair pushes it back towards the card it replaced; 44px is the
   floor the site's smaller controls keep and it still clears WCAG 2.5.5 at AAA. The wobble is
   scaled, not flattened: a perfect pill would make the only two buttons a first time visitor
   meets the only two that are not in the site's hand drawn voice. The rest plus the lift equals
   the hover offset, as it does on .button, so the shadow's bottom edge stays put. */
.consent-actions .button {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 14px 17px 13px 19px;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
}
.consent-actions .button:hover {
  box-shadow: 0 6px 0 var(--ink);
}
.consent-choice {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.consent-choice[hidden] {
  display: none;
}
.consent-choice:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width: 1100px) {
  .site-header {
    gap: 18px;
  }
  .site-header nav {
    gap: 18px;
  }
}
/* Two rows from here down: the logo and YouTube on top, the six places under them, spread
   across the whole width so every one shows on a 320px phone without sideways scrolling. Six
   places only fit beside the logo from 900px. */
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 14px 5% 6px;
  }
  .site-header .youtube {
    margin-left: auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
  }
  .site-header nav {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 2px 10px;
    margin-left: 0;
    font-size: 0.875rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 12px;
  }
  .brand-name {
    font-size: 1.9rem;
  }
  .brand-frog {
    width: 45px;
    height: 47px;
  }
  .brand-name small {
    font-size: 0.5625rem;
  }
}
/* Six places do not fit one row on a phone, so they sit in two even rows of three. */
@media (max-width: 520px) {
  .site-header nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 0 8px;
  }
  .site-header nav > a {
    min-height: 40px;
  }
}
@media (max-width: 360px) {
  .site-header nav {
    font-size: 0.8125rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 9px;
  }
  .brand-name {
    font-size: 1.7rem;
  }
}
@media (max-width: 700px) {
  .section {
    padding: 48px 6%;
  }
  .section-heading {
    gap: 8px;
    margin-bottom: 20px;
  }
  .page-intro {
    padding-top: 28px;
    padding-bottom: 18px;
  }
  .site-footer {
    padding-top: 32px;
  }
  .site-footer nav {
    gap: 4px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .button,
  .cast-card,
  .portrait,
  .manga-page,
  .manga-panel {
    box-shadow: none;
    border: 2px solid CanvasText;
  }
  a:focus-visible,
  summary:focus-visible,
  select:focus-visible,
  button:focus-visible {
    outline: 3px solid Highlight;
  }
}
/* How a drawing gets onto the art wall: Fan art and Draw. */
.share-steps {
  overflow-wrap: anywhere;
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: share-step;
  font-size: 1rem;
  line-height: 1.5;
}
.share-steps li {
  position: relative;
  padding-left: 44px;
  counter-increment: share-step;
}
.share-steps li::before {
  content: counter(share-step);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fffaf0;
  font-weight: 800;
}
.share-steps a {
  display: inline-block;
  padding: 4px 0;
  font-weight: 700;
  text-decoration: underline;
}
/* The Continue button: home, /learn/ and /study/. */
.continue-box {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.continue-box[hidden] {
  display: none;
}
.continue-box .continue-go {
  max-width: 100%;
  text-align: left;
}
.continue-go span:first-child {
  overflow-wrap: anywhere;
}

/* Manga pages retain high-contrast ink, clear dialogue and native page anchors. */
.reader-site {
  background: white;
}
.reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 15;
  flex-wrap: wrap;
  background: #fffaf0f5;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px max(12px, calc((100vw - 1360px) / 2));
  border-bottom: 1px solid #392c2025;
  font-size: 0.8125rem;
}
.reader-toolbar a,
.reader-help summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.reader-toolbar select {
  background: transparent;
  color: var(--ink);
  border: 1px solid #392c2050;
  border-radius: 4px;
  padding: 8px;
  min-height: 40px;
  min-width: 0;
  max-width: min(40vw, 280px);
  margin-left: auto;
  font: inherit;
  cursor: pointer;
}
.reader-help summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.reader-help summary::after {
  content: '+';
  margin-left: 8px;
}
.reader-help[open] summary::after {
  content: '−';
}
.reader-help-content {
  position: absolute;
  top: 100%;
  right: 12px;
  width: min(380px, calc(100vw - 24px));
  padding: 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 #392c2025;
}
.reader-scene-links {
  display: grid;
  gap: 6px;
  max-height: 50vh;
  overflow: auto;
}
.reader-help-content p {
  font-size: 0.9375rem;
  margin: 0 0 12px;
}
.manga-reader {
  container: comic-reader / inline-size;
  --comic-gutter: 12px;
  --comic-font: 'Kero Comic', 'Comic Sans MS', cursive;
  --comic-size: clamp(1.0625rem, 1.5vw, 1.5rem);
  max-width: 1400px;
  padding: var(--comic-gutter) 20px 0;
  margin: 0 auto;
}
.manga-page {
  position: relative;
  margin-bottom: var(--comic-gutter);
  scroll-margin-top: max(65px, 4.5rem);
}
/* Dialogue shares the illustration cell; frame-specific positions live in content. */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--comic-gutter);
  align-items: start;
}
.manga-panel {
  --voice-colour: #587780;
  margin: 0;
  border: 2px solid var(--ink);
  background: white;
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: span 6;
  container-type: inline-size;
}
.voice-kero {
  --voice-colour: #886815;
}
.voice-goro {
  --voice-colour: #b6382b;
}
.comic-panel--wide,
.comic-panel--aside {
  grid-column: 1 / -1;
}
.comic-panel--large {
  grid-column: span 6;
}
.comic-panel--small {
  grid-column: span 6;
}
.panel-art {
  min-width: 0;
  grid-area: 1 / 1;
  margin: 0;
  background: #fffaf0;
}
.panel-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.manga-panel .comic-caption {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
.comic-lettering {
  position: absolute;
  inset: 0;
}
.lettered--slim {
  --letter-width: 32%;
}
.lettered--narrow {
  --letter-width: 40%;
}
.lettered--medium {
  --letter-width: 49%;
}
.lettered--full {
  --letter-width: 94%;
}
.lettered--wide {
  --letter-width: 88%;
}
.lettered--top-left .speech-balloon {
  top: 4%;
  left: 3%;
}
.lettered--top-right .speech-balloon {
  top: 4%;
  right: 3%;
}
.lettered--bottom-left .speech-balloon {
  bottom: 4%;
  left: 3%;
}
.lettered--bottom-right .speech-balloon {
  bottom: 4%;
  right: 3%;
}
.speech-balloon {
  position: absolute;
  isolation: isolate;
  width: fit-content;
  max-width: var(--letter-width);
  min-width: 0;
  padding: clamp(12px, 2.2cqi, 24px) clamp(16px, 3.2cqi, 34px);
  pointer-events: auto;
  border: 2px solid var(--ink);
  border-radius: 46% 44% 45% 43% / 24px 25px 23px 26px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* The responsive SVG draws one continuous contour, including the speaker tail.
   CSS balloons remain the no-script and enlarged-text fallback. */
.balloon-ink {
  display: none;
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.balloon-ink path {
  fill: #fffdf5;
  stroke: #493726;
  stroke-width: clamp(1.6px, 0.35cqi, 2.5px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.balloon--inked {
  border-color: transparent;
  background: transparent;
}
.balloon--inked .balloon-ink {
  display: block;
}
.balloon--inked::before,
.balloon--inked::after,
.balloon--inked .balloon-tail {
  display: none;
}
.speaker {
  font: 700 0.6875rem/1.4 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--voice-colour);
}
.dialogue {
  display: block;
  font: 700 var(--comic-size)/1.18 var(--comic-font);
  text-transform: uppercase;
  letter-spacing: 0;
  font-synthesis: none;
  overflow-wrap: normal;
  text-wrap: pretty;
  max-width: 34ch;
}
.lettered--slim .balloon--speech,
.lettered--narrow .balloon--speech {
  padding: clamp(10px, 2cqi, 22px) clamp(13px, 2.7cqi, 28px);
}
.lettered--slim .speech-balloon {
  padding-inline: 10px;
}
.balloon-tail {
  position: absolute;
  top: calc(100% - 3px);
  right: 24%;
  width: 27px;
  height: 27px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 88% 100%);
}
.balloon-tail::after {
  content: '';
  position: absolute;
  inset: 0 3px 5px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 88% 100%);
}
.tail--left .balloon-tail {
  right: auto;
  left: 22%;
  transform: scaleX(-1);
}
.tail--center .balloon-tail {
  left: calc(50% - 13px);
  right: auto;
}
.lettered--full .balloon--speech {
  padding-inline: 5px;
  border-radius: 30px / 20px;
}
.balloon--shout {
  --burst: polygon(
    5% 12%,
    20% 15%,
    23% 1%,
    36% 11%,
    46% 0,
    54% 10%,
    70% 0,
    76% 13%,
    93% 7%,
    92% 26%,
    100% 37%,
    94% 52%,
    100% 68%,
    88% 76%,
    90% 94%,
    72% 88%,
    66% 100%,
    52% 91%,
    38% 100%,
    31% 90%,
    13% 97%,
    14% 80%,
    1% 74%,
    7% 58%,
    0 44%,
    9% 31%
  );
  border: 0;
  border-radius: 0;
  padding: clamp(15px, 2.5cqi, 30px) clamp(17px, 3cqi, 36px);
  background: transparent;
}
.balloon--shout::before,
.balloon--shout::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--burst);
  background: var(--ink);
  z-index: -2;
}
.balloon--shout::after {
  inset: 3px;
  background: white;
  z-index: -1;
}
.balloon--shout .dialogue {
  font-style: italic;
  max-width: 24ch;
}
.dialogue .spoken-emphasis {
  font-style: italic;
  font-weight: inherit;
}
.balloon--shout .balloon-tail {
  display: none;
}
.balloon--caption {
  border-radius: 0;
  background: #fff8de;
  padding: clamp(6px, 1cqi, 12px) clamp(9px, 1.6cqi, 18px);
  align-items: flex-start;
  text-align: left;
}
.balloon--caption .speaker {
  display: none;
}
.balloon--caption .dialogue {
  line-height: 1.18;
  max-width: 54ch;
}
.lettered--bottom-left .balloon-tail,
.lettered--bottom-right .balloon-tail {
  top: auto;
  bottom: calc(100% - 3px);
  transform: rotate(180deg);
}
.lettered--bottom-left .tail--left .balloon-tail,
.lettered--bottom-right .tail--left .balloon-tail {
  transform: rotate(180deg) scaleX(-1);
}
.panel-sfx {
  position: absolute;
  top: 4%;
  right: 4%;
  transform: rotate(-7deg);
  padding: 4px;
  font: italic 700 clamp(1.5rem, 5cqi, 3.5rem)/1 var(--comic-font);
  color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 2px var(--ink);
  letter-spacing: 1px;
}
.lettered--top-left .panel-sfx,
.lettered--top-right .panel-sfx {
  top: auto;
  bottom: 4%;
}
.comic-caption .scene-caption {
  position: absolute;
  top: 3%;
  left: 3%;
  width: fit-content;
  max-width: 86%;
  padding: 4px 8px;
  margin: 0;
  font: 700 clamp(0.9375rem, 1.2vw, 1.125rem)/1.12 var(--comic-font);
  text-transform: uppercase;
  background: #fff8de;
  border: 1.5px solid var(--ink);
  text-align: left;
  z-index: 2;
}
.lettered--top-left .scene-caption,
.lettered--top-right .scene-caption {
  top: auto;
  bottom: 3%;
}
.comic-caption:has(.scene-caption) .panel-sfx {
  top: auto;
  bottom: 4%;
}
.lettered--bottom-right .comic-caption:has(.scene-caption) .panel-sfx {
  right: auto;
  left: 4%;
}
.manga-page--memory .balloon--speech {
  border-radius: 8px;
  text-align: left;
  align-items: flex-start;
  background: #fffaf0;
}
.manga-page--memory .balloon-tail {
  display: none;
}
.manga-watch {
  display: flex;
  justify-content: center;
  padding: 28px 6px 18px;
  scroll-margin-top: 90px;
}
.manga-watch .button {
  max-width: 100%;
  text-align: center;
}
.chapter-end {
  background: var(--ink);
  text-align: center;
  color: white;
  padding: 70px 25px 78px;
  scroll-margin-top: 70px;
}
.chapter-end h2 {
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.92;
  margin: 15px 0 30px;
}
.chapter-end h2 em {
  color: var(--yellow);
}
.chapter-end p {
  color: #e3e3e5;
}
.chapter-end .button {
  color: var(--ink);
  border-color: var(--yellow);
  box-shadow: 4px 4px 0 #fff;
}
.chapter-end .quiet-link {
  margin: 8px auto 0;
}
.reader-site .site-footer {
  background: var(--paper);
}
.episode-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 45px;
}
.episode-art {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 0 7px 0 var(--ink);
  transform: rotate(-2deg);
}
.episode-art img {
  width: 100%;
  border-radius: 27px;
}
.chapter-stamp {
  position: absolute;
  top: 18px;
  left: 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 9px 12px;
  background: var(--yellow);
  font: 400 1.5rem/1 var(--heading);
}
.episode-new {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--red);
  color: #fff;
  font: 400 1.2rem/1 var(--heading);
  letter-spacing: 0.04em;
}
.episode-copy {
  min-width: 0;
}
/* The end of an episode: its words, the lessons that teach them, then the next episode. */
.episode-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  margin: 28px auto 0;
  padding: 26px 18px;
  max-width: 760px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--butter);
  text-align: center;
}
.episode-next h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
}
.episode-next-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.episode-next-words li {
  max-width: 100%;
}
/* At 200% text on a small phone a word and its romaji wrap inside the pill, not off the page. */
.episode-next-words a {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.episode-next-words [lang='ja'] {
  font-size: 1.15rem;
}
.episode-next-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.episode-next-lessons,
.episode-next-episode {
  margin: 0;
  font-weight: 700;
}
.episode-next-lessons a,
.episode-next-episode a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 4px;
  text-decoration: underline;
}
.episode-copy h2 {
  font-size: clamp(2.5rem, 4vw, 3.6rem);
}
.episode-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.8125rem;
  margin-bottom: 24px;
}
.manga-library {
  padding-top: 12px;
}
@media (max-width: 700px) {
  .episode-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 33px;
  }
  .episode-art {
    margin-right: 7px;
  }
  .episode-copy h2 {
    font-size: 2.8rem;
  }
  .reader-toolbar {
    padding: 2px 8px;
    gap: 6px;
    font-size: 0.75rem;
  }
  .reader-toolbar select {
    flex: 1 1 4.5rem;
    width: 4.5rem;
    max-width: 37vw;
  }
  .manga-reader {
    --comic-gutter: 10px;
    padding: var(--comic-gutter) 8px 0;
  }
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--comic-gutter);
    align-items: stretch;
  }
  .manga-panel {
    grid-column: span 1;
  }
  .comic-panel--wide,
  .comic-panel--aside,
  .comic-panel--mobile-wide {
    grid-column: 1 / -1;
  }
  .manga-panel .comic-caption {
    padding: 0;
  }
  .comic-panel--small {
    margin-inline: 0;
  }
  .speech-balloon {
    border-width: 1.5px;
  }
  .balloon-tail {
    width: 17px;
    height: 18px;
  }
  .balloon--shout::after {
    inset: 2px;
  }
  .chapter-end {
    padding: 55px 6%;
  }
  .chapter-end h2 {
    font-size: clamp(2.8rem, 12vw, 4.6rem);
  }
  .chapter-end p {
    font-size: 0.9375rem;
  }
}

/* Beginner reading: keep Japanese, romaji and meaning together. */
.japanese-reading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.japanese-word {
  font:
    700 1.65rem/1.5 'Kero Japanese',
    sans-serif;
  overflow-wrap: anywhere;
}
.japanese-romaji {
  font: 700 1.0625rem/1.5 var(--body);
  color: var(--ink);
}
.japanese-meaning {
  font: 700 1.125rem/1.5 var(--body);
}
.pronunciation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.listen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  min-width: 116px;
  max-width: 100%;
  padding: 12px 18px;
  font: 700 1rem/1.4 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.listen-button:hover {
  background: white;
}
.listen-button:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 5px;
}
.listen-icon {
  font-size: 0.875rem;
  flex-shrink: 0;
}
.listen-button[hidden],
.pronunciation audio[hidden] {
  display: none;
}
.pronunciation audio {
  max-width: 100%;
  width: 260px;
  min-width: 0;
}
.audio-status {
  font-size: 0.875rem;
  max-width: 230px;
}
.audio-status:not(:empty) {
  margin-top: 9px;
}
.sensei-avatar {
  display: block;
  width: 72px;
  height: 72px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  background: #c6e5e7;
  flex-shrink: 0;
  position: relative;
}
.sensei-avatar img {
  width: 170%;
  max-width: none;
  height: auto;
  position: absolute;
  top: -2px;
  left: -35%;
}
@media (max-width: 700px) {
  .japanese-word {
    font-size: 1.5rem;
  }
  .sensei-avatar {
    width: 56px;
    height: 56px;
  }
}

.lesson-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--butter);
}
.lesson-illustration {
  margin: 0;
  min-width: 0;
  background: var(--paper);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lesson-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lesson-illustration figcaption {
  font-size: 1rem;
  line-height: 1.5;
  padding: 14px 22px 20px;
}
.lesson-feature-copy {
  min-width: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
}
.lesson-feature-copy .japanese-word {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}
.lesson-feature-copy .japanese-meaning {
  font-size: 1.4rem;
}
.lesson-feature-copy .japanese-romaji {
  font-size: 1.2rem;
}
.sensei-tip {
  grid-column: 1/-1;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}
.sensei-tip h3 {
  margin: 0 0 5px;
  font: 700 1rem/1.4 var(--body);
}
.sensei-tip p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.sensei-tip > div {
  min-width: 0;
}
@media (max-width: 700px) {
  .lesson-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .lesson-illustration .eyebrow {
    margin: 20px 20px 12px;
  }
  .lesson-feature-copy {
    padding: 24px 20px;
  }
  .sensei-tip {
    align-items: flex-start;
    padding: 20px;
    gap: 12px;
  }
}

/* Dedicated vocabulary pages: complete artwork, real text, one player. */
.manga-page--lesson {
  background: #fff8e8;
}
.page-anchor {
  display: block;
  scroll-margin-top: 95px;
}
.lesson-feature {
  background: var(--lesson-colour, #ffe6a3);
}
.theme-coral {
  --lesson-colour: #ffd4bd;
}
.theme-mint {
  --lesson-colour: #d1ece0;
}
.theme-lavender {
  --lesson-colour: #e1def1;
}
.scene-caption {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 5px;
  font-weight: 400;
}
.word-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.word-jump > span {
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: 6px;
}
.word-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--paper);
}
.word-jump a:hover {
  background: var(--butter);
}
@media (max-width: 700px) {
  .lesson-feature {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The lesson is a quiet comic interlude, with Sensei's words in a speech balloon. */
.manga-page--lesson .lesson-feature {
  border-radius: 0;
  border-width: 2px;
}
.manga-page--lesson .lesson-feature-copy {
  margin: 24px;
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 44% 46% 45% 42% / 20% 24% 20% 24%;
  background: white;
  align-items: center;
  text-align: center;
}
.manga-page--lesson .sensei-tip {
  border-top: 2px solid var(--ink);
}
@media (max-width: 700px) {
  .manga-page--lesson .lesson-feature-copy {
    margin: 16px;
    padding: 26px 20px;
    border-radius: 26px;
  }
}
@media (forced-colors: active) {
  .speech-balloon {
    border: 2px solid CanvasText;
  }
  .balloon--shout::before,
  .balloon--shout::after,
  .balloon-tail {
    display: none;
  }
}

/* Enlarged text can outgrow a phone panel. Reflow it without shrinking the type or artwork. */
@container (width < 18rem) {
  .manga-panel .comic-caption {
    grid-area: 2 / 1;
    padding: 16px;
    background: var(--paper);
  }
  .comic-caption .comic-lettering {
    position: static;
  }
  .comic-caption .speech-balloon {
    position: relative;
    inset: auto;
    max-width: 100%;
    padding: 16px 20px;
  }
  .comic-caption .scene-caption {
    position: static;
    max-width: 100%;
    margin-bottom: 12px;
  }
  .manga-panel .comic-caption .panel-sfx {
    position: static;
    display: block;
    transform: none;
    margin-bottom: 12px;
    /* A long effect (WHOOOOSH!) at 200% text would otherwise push the page sideways. */
    overflow-wrap: anywhere;
  }
  .comic-caption .balloon-tail {
    display: none;
  }
  /* The lettered corner offsets (left or right: 3%) would shift a transcript balloon sideways,
     past the frame (tiered panels keep their lettering on the art, placed by those offsets); and
     free lettering's italic punch line overhangs its box, so it keeps the transcript's margins. */
  .manga-panel:not(.comic-panel--tier) .comic-caption .speech-balloon {
    inset: auto;
  }
  .delivery--free .comic-caption .speech-balloon {
    padding-inline: 20px;
  }
}

/* Lesson copy belongs to the same comic; retain native Japanese and lowercase romaji. */
.manga-reader .lesson-feature-copy .japanese-meaning,
.manga-reader .lesson-illustration figcaption,
.manga-reader .sensei-tip h3,
.manga-reader .sensei-tip p {
  font-family: var(--comic-font);
  font-weight: 700;
}
.manga-reader .lesson-feature-copy .japanese-meaning {
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Dialogue is lettered for the performance, at the scale of its own scene. */
.delivery--speech .dialogue,
.delivery--tremble .dialogue {
  font-size: clamp(1.0625rem, 2.8cqi, 2.375rem);
  line-height: 1.08;
}
.delivery--hushed .dialogue {
  font-size: clamp(1.0625rem, 2.7cqi, 2rem);
  line-height: 1.12;
}
.delivery--roar .dialogue {
  font:
    400 clamp(1.1875rem, 3.5cqi, 2.75rem)/1.02 'Kero Impact',
    var(--comic-font);
  letter-spacing: 0.015em;
}
.delivery-line {
  display: block;
  paint-order: stroke fill;
}
.delivery-line--small {
  font-size: max(1rem, 0.84em);
  line-height: 1.13;
}
.delivery-line--punch {
  font:
    400 1.4em/0.98 'Kero Impact',
    var(--comic-font);
  letter-spacing: 0.015em;
  padding: 0.04em 0;
}
.delivery--roar .speech-balloon {
  padding: clamp(13px, 2.2cqi, 30px) clamp(16px, 3.2cqi, 43px);
}
.delivery--hushed .speech-balloon {
  padding-block: clamp(12px, 2cqi, 24px);
}
.delivery--free .speech-balloon {
  border: 2px solid transparent;
  background: transparent;
  padding: clamp(8px, 1.4cqi, 18px) clamp(8px, 1.6cqi, 22px);
}
.delivery--free .speech-balloon::before,
.delivery--free .speech-balloon::after,
.delivery--free .balloon-tail,
.delivery--free .balloon-ink {
  display: none;
}
.delivery--free .dialogue {
  font:
    400 clamp(1.25rem, 4cqi, 3.25rem)/1.03 'Kero Impact',
    var(--comic-font);
  color: #fff8dc;
  -webkit-text-stroke: clamp(1.5px, 0.4cqi, 4px) #30241c;
  paint-order: stroke fill;
  text-shadow: none;
  overflow: visible;
}
.delivery--free .delivery-line--punch {
  font-size: 1.24em;
}
.delivery--free .delivery-line--small {
  font-family: var(--comic-font);
  font-weight: 700;
  font-size: max(1rem, 0.58em);
  line-height: 1.15;
}
.manga-panel .speech-balloon {
  transform: rotate(var(--letter-angle));
  transform-origin: center;
}
.lettered--top-left .speech-balloon {
  top: var(--letter-y, 4%);
  left: var(--letter-x, 3%);
}
.lettered--top-right .speech-balloon {
  top: var(--letter-y, 4%);
  right: var(--letter-x, 3%);
}
.lettered--bottom-left .speech-balloon {
  bottom: var(--letter-y, 4%);
  left: var(--letter-x, 3%);
}
.lettered--bottom-right .speech-balloon {
  bottom: var(--letter-y, 4%);
  right: var(--letter-x, 3%);
}
.manga-panel .comic-caption .effect--directed {
  top: var(--effect-y);
  left: var(--effect-x);
  right: auto;
  bottom: auto;
  transform: rotate(var(--effect-angle));
  transform-origin: center;
  max-width: 90%;
  font:
    400 clamp(1.65rem, var(--effect-size), 9rem)/0.95 'Kero Impact',
    var(--comic-font);
  letter-spacing: 0.015em;
  color: #ffdc58;
  -webkit-text-stroke: clamp(2px, 0.55cqi, 6px) #38291e;
  paint-order: stroke fill;
  text-shadow: none;
}
.manga-panel .comic-caption .effect--orange {
  color: #f17138;
}
.manga-panel .comic-caption .effect--paper {
  color: #fff5d8;
}
/* A reader who enlarges text gets a calm, complete transcript below the art. */
@container (width < 18rem) {
  .manga-panel .speech-balloon {
    transform: none;
  }
  .delivery--free .dialogue {
    color: var(--ink);
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
  .manga-panel .comic-caption .effect--directed {
    position: static;
    transform: none;
  }
  .manga-panel .dialogue {
    overflow-wrap: anywhere;
  }
}

/* Reserve paper within selected panels so long captions cannot obscure small
   character limbs or the closing illustration’s existing lettering. */
@container (18rem <= width < 44rem) {
  .lettered--reserve-bottom .panel-art {
    padding-bottom: 92px;
    background: #fff7e1;
  }
  .lettered--reserve-bottom .speech-balloon {
    max-width: 94%;
    left: 3%;
    right: 3%;
    margin-inline: auto;
    bottom: 8px;
  }
}

/* Action descriptions stay available to assistive technology and can be shown
   below the artwork without covering dialogue or expressions. No script required. */
.description-choice {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 44px;
  margin-block: 0.75rem;
  cursor: pointer;
}
.description-choice input {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  accent-color: var(--ink);
}
main:has(#scene-descriptions:checked) .panel-description {
  grid-area: 3 / 1;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  margin: 0;
  padding: 1rem;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* The introduction needs a solid reading surface over the busy flames. On small
   panels it becomes a paper strip inside the frame, keeping the artwork whole. */
.delivery--introduction .speech-balloon {
  top: 4%;
  left: 3%;
  max-width: 58%;
  border: 2px solid var(--ink);
  border-left: 6px solid #9f2b1f;
  border-radius: 0;
  padding: clamp(16px, 2cqi, 28px);
  background: #fff8de;
  transform: none;
}
.delivery--introduction .dialogue {
  color: #30241c;
  font: 700 clamp(1.125rem, 2cqi, 2rem)/1.4 var(--comic-font);
  text-transform: none;
  -webkit-text-stroke: 0;
}
.delivery--introduction .delivery-line + .delivery-line {
  margin-top: 0.55em;
}
.delivery--introduction .delivery-line--punch {
  color: #9f2b1f;
  font-size: clamp(2rem, 4.5cqi, 4rem);
  line-height: 1.12;
  text-transform: uppercase;
}
@container (width < 44rem) {
  .delivery--introduction .comic-caption {
    grid-area: 1 / 1;
    padding: 0;
    background: #fff8de;
    border-bottom: 2px solid var(--ink);
  }
  .delivery--introduction .comic-lettering {
    position: static;
  }
  .delivery--introduction .panel-art {
    grid-area: 2 / 1;
  }
  .delivery--introduction .speech-balloon {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100%;
    border: 0;
    padding: 1rem 1.125rem;
    transform: none;
  }
  .delivery--introduction .dialogue,
  .delivery--introduction .delivery-line--punch {
    overflow-wrap: anywhere;
  }
}

/* At ordinary phone text sizes, lettering shares the artwork itself. Long lines
   receive wider frames; short exchanges and silent action keep the paired layout.
   Enlarged text retains the transcript reflow above instead of covering the scene. */
@media (max-width: 700px) {
  @container comic-reader (width >= 18.75rem) {
    .manga-panel .panel-art,
    .manga-panel .comic-caption {
      grid-area: 1 / 1;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .manga-panel .comic-lettering {
      position: absolute;
      inset: 0;
    }
    .delivery--introduction .panel-art {
      position: relative;
    }
    .delivery--introduction .panel-art::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(#17100deb 0%, #17100dba 46%, transparent 85%);
    }
    .delivery--introduction .speech-balloon {
      position: absolute;
      inset: 6px 6px auto;
      width: auto;
      max-width: none;
      padding: 6px 8px;
      border: 0;
      background: transparent;
    }
    .delivery--introduction .dialogue {
      color: #fff8de;
      font-size: 1.0625rem;
      line-height: 1.25;
      text-shadow: 0 1px 2px #17100d;
    }
    .delivery--introduction .delivery-line + .delivery-line {
      margin-top: 0.3em;
    }
    .delivery--introduction .delivery-line--punch {
      color: #ffdc58;
      font-size: 1.5rem;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide)
      .speech-balloon {
      position: absolute;
      max-width: calc(100% - 12px);
      padding: 6px 8px;
      transform: none;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide):is(.lettered--top-left, .lettered--bottom-left)
      .speech-balloon {
      left: 6px;
      right: auto;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide):is(.lettered--top-right, .lettered--bottom-right)
      .speech-balloon {
      right: 6px;
      left: auto;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide):is(.lettered--top-left, .lettered--top-right)
      .speech-balloon {
      top: 6px;
      bottom: auto;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide):is(.lettered--bottom-left, .lettered--bottom-right)
      .speech-balloon {
      bottom: 6px;
      top: auto;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide)
      .dialogue {
      font-size: 1.0625rem;
      line-height: 1.12;
      overflow-wrap: anywhere;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide)
      .delivery-line {
      display: inline;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide)
      .delivery-line--punch {
      font-size: 1.15em;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide).delivery--free
      .dialogue {
      color: #fff8dc;
      -webkit-text-stroke: 1px #30241c;
    }
    :is(
        .comic-panel--half,
        .comic-panel--large,
        .comic-panel--small,
        .comic-panel--tier-shared
      ):not(.comic-panel--mobile-wide)
      .panel-sfx.effect--directed {
      position: absolute;
      top: clamp(8px, var(--effect-y), calc(100% - 2.4rem));
      left: clamp(6px, var(--effect-x), calc(100% - 6rem));
      margin: 0;
      max-width: calc(100% - 12px);
      font-size: clamp(1.5rem, 10cqi, 2.25rem);
      transform: rotate(clamp(-8deg, var(--effect-angle), 8deg));
    }
  }
}

/* Honour larger default or zoomed text: when two readable columns cannot fit,
   the same frames reflow to one column. rem tracks the reader's text size. */
@container comic-reader (width < 18.75rem) {
  .panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .manga-panel {
    grid-column: 1 / -1;
  }
}

/* Optional scene transitions and original fan credits extend the shared reader. */
.comic-scene-label {
  margin: 0 0 var(--comic-gutter);
  padding: 0.7rem 1rem;
  border: 2px solid var(--ink);
  background: #fff2bf;
  color: #30241c;
  font: 700 clamp(1rem, 2vw, 1.35rem)/1.35 var(--comic-font);
}
.manga-page--recap .panel-art img {
  filter: grayscale(1);
}
.manga-page--flashback .panel-art img {
  filter: sepia(0.7) saturate(0.85);
}

/* Printed-comic tiers: each row keeps one height while its panels keep their own shapes.
   Zero-height breaks start the wide, medium (tablet) or narrow rows, so one source order
   serves every layout. */
.panel-grid--tiers {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--comic-gutter);
  row-gap: 0;
  align-items: stretch;
}
.panel-grid--tiers > .manga-panel {
  box-sizing: border-box;
  /* Grow in proportion to the art's aspect ratio (times ten: a line whose grow factors sum
     below 1 would not fill its row). Panels in a row then share one height. Each panel's
     comic-shape class sets --panel-grow (comicPlacementCss), never a style attribute. */
  flex: var(--panel-grow, 17.778) 1 0px;
  margin-bottom: var(--comic-gutter);
  align-content: start;
}
.panel-grid--tiers > .tier-break {
  display: none;
  flex-basis: 100%;
  height: 0;
}
@container comic-reader (width >= 50rem) {
  .panel-grid--tiers > .tier-break--wide {
    display: block;
  }
}
@container comic-reader (40rem <= width < 50rem) {
  .panel-grid--tiers > .tier-break--medium {
    display: block;
  }
  /* A Japanese reading needs room on the art: its panel takes the whole tablet row. */
  .panel-grid--tiers > .japanese-panel {
    flex-basis: 100%;
  }
}
@container comic-reader (width < 40rem) {
  .panel-grid--tiers > .tier-break--narrow {
    display: block;
  }
}
/* Comic lettering stays on the art in every tier at normal text size, even where a panel is
   narrower than the enlarged-text reflow width. With enlarged text the reader container drops
   below 18.75rem, every panel takes a full row, and the reflow rules apply as elsewhere. */
@container comic-reader (width >= 18.75rem) {
  .panel-grid--tiers > .comic-panel--tier .comic-caption {
    grid-area: 1 / 1;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .panel-grid--tiers > .comic-panel--tier .comic-caption .comic-lettering {
    position: absolute;
    inset: 0;
  }
  .panel-grid--tiers > .comic-panel--tier .comic-caption .speech-balloon {
    position: absolute;
    /* The far side keeps the anchored side's inset, so a long line never runs into the frame. */
    max-width: calc(100% - 2 * var(--letter-x, 3%));
    padding: 7px 14px;
  }
  /* The drawn ink tail replaces the CSS triangle; keep the triangle only as the fallback. */
  .panel-grid--tiers
    > .comic-panel--tier
    .comic-caption
    .speech-balloon:not(.balloon--inked)
    .balloon-tail {
    display: block;
  }
  .panel-grid--tiers > .comic-panel--tier .comic-caption .panel-sfx:not(.effect--directed) {
    position: absolute;
    display: block;
    top: clamp(8px, 4%, 24px);
    right: 4%;
    left: auto;
    margin: 0;
    max-width: 88%;
    transform: rotate(-6deg);
  }
  /* Placed effects keep their authored spot (the panel-level enlarged-text reflow would
     otherwise drop them flat into the top-left corner on tablets and laptops). */
  .panel-grid--tiers > .comic-panel--tier .comic-caption .panel-sfx.effect--directed {
    position: absolute;
    display: block;
    margin: 0;
    top: clamp(8px, var(--effect-y), calc(100% - 2.4rem));
    left: clamp(6px, var(--effect-x), calc(100% - 6rem));
    right: auto;
    max-width: calc(100% - 12px);
    font-size: clamp(1.5rem, 10cqi, 2.25rem);
    transform: rotate(clamp(-8deg, var(--effect-angle), 8deg));
  }
  .panel-grid--tiers > .japanese-panel .comic-caption .speech-balloon {
    padding: 12px 22px 10px;
  }
  .panel-grid--tiers > .japanese-panel .japanese-reading {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    text-align: center;
  }
  .panel-grid--tiers > .japanese-panel .japanese-word {
    flex-basis: 100%;
  }
  .panel-grid--tiers > .japanese-panel .pronunciation {
    align-items: center;
  }
  .panel-grid--tiers > .japanese-panel .listen-button {
    min-height: 34px;
    min-width: 96px;
    padding: 4px 14px;
    box-shadow: 0 2px 0 var(--ink);
  }
}
/* Shared phone rows letter 6px from the frame edge (see the max-width: 700px block above), so
   the far side keeps 6px as well. */
@media (max-width: 700px) {
  @container comic-reader (width >= 18.75rem) {
    .panel-grid--tiers > .comic-panel--tier-shared .comic-caption .speech-balloon {
      max-width: calc(100% - 12px);
    }
  }
}
/* On narrow screens a Japanese line, its reading and its Listen control, or a long line on a
   banner, sit in a paper strip under the complete picture. Such a panel shares its narrow row
   only with other strip panels (comicTierPlacements checks this): the pictures share one height,
   and each strip takes the rest of the row, so paired strips end level and a shorter line sits
   in the middle of its strip instead of over a band of blank paper. */
@container comic-reader (width < 40rem) {
  .panel-grid--tiers > .manga-panel:is(.japanese-panel, .lettered--reserve-responsive) {
    grid-template-rows: auto 1fr;
    background: #fff8de;
  }
  .panel-grid--tiers
    > .manga-panel:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption {
    grid-area: 2 / 1;
    /* Unpositioned, so an effect measures from the panel (the picture's top), not the strip. */
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-top: 2px solid var(--ink);
    background: #fff8de;
  }
  .panel-grid--tiers
    > .manga-panel:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption
    .comic-lettering {
    position: static;
  }
  .panel-grid--tiers
    > .manga-panel:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption
    .speech-balloon {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    padding: 0.7rem 1rem;
    background: #fff8de;
    /* Centred like a wrapped line, including a one-line caption (captions align left on art). */
    align-items: center;
    text-align: center;
  }
  /* A strip that shares its row is narrow: slimmer side margins and balanced lines keep a
     caption from stacking one word per line. */
  .panel-grid--tiers
    > .comic-panel--tier-shared:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption
    .speech-balloon {
    padding-inline: 0.5rem;
    text-wrap: balance;
  }
  .panel-grid--tiers > .manga-panel.japanese-panel .japanese-reading {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }
  /* With the words in a strip below, an effect belongs on the picture: pin it to its top. */
  .panel-grid--tiers
    > .manga-panel:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption
    .panel-sfx:is(.effect--directed, :not(.effect--directed)) {
    top: clamp(8px, 4%, 24px);
    right: 4%;
    left: auto;
  }
  /* Outranks the on-art fallback tail rule above: a strip has no tail. */
  .panel-grid--tiers
    > .comic-panel--tier.manga-panel:is(.japanese-panel, .lettered--reserve-responsive)
    .comic-caption
    .speech-balloon
    .balloon-tail {
    display: none;
  }
}
/* The smallest phones cannot fit a narration box inside half a row, or any balloon inside a
   slim share of one; those panels take full rows there. Wordless panels stay paired. */
@container comic-reader (width < 22rem) {
  .panel-grid--tiers
    > .comic-panel--tier-shared:has(.balloon--caption):not(.lettered--reserve-responsive) {
    flex-basis: 100%;
  }
}
@container comic-reader (width < 20rem) {
  .panel-grid--tiers > .comic-panel--tier-slim:has(.speech-balloon) {
    flex-basis: 100%;
  }
}
@container comic-reader (width < 18.75rem) {
  .panel-grid--tiers > .manga-panel {
    flex-basis: 100%;
  }
  .panel-grid--tiers > .tier-break {
    display: none;
  }
}
.panel-credit {
  grid-area: auto / 1;
  margin: 0;
  padding: 0.7rem 1rem;
  background: #fff8de;
  font-size: 1rem;
  overflow-wrap: anywhere;
  border-top: 2px solid var(--ink);
}
.panel-credit a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.chapter-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-block: 2px solid var(--ink);
  margin-block: 1rem;
}
.chapter-navigation a {
  max-width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: underline;
}
/* Opt-in paper strips preserve complete close-ups and room for Japanese controls.
   These selectors also win over the compact paired-panel treatment on phones. */
.manga-panel.lettered--reserve-below {
  align-content: start;
  background: #fff8de;
}
.manga-panel.lettered--reserve-below .panel-art {
  grid-area: 1 / 1;
  padding: 0;
}
.manga-panel.lettered--reserve-below .comic-caption {
  grid-area: 2 / 1;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--ink);
  background: #fff8de;
}
.manga-panel.lettered--reserve-below .comic-caption .comic-lettering {
  position: static;
}
.manga-panel.lettered--reserve-below .comic-caption .speech-balloon {
  position: relative;
  inset: auto;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding: 0.8rem 1rem;
  background: #fff8de;
}
.manga-panel.lettered--reserve-below .comic-caption .dialogue {
  font: 700 clamp(1.125rem, 2cqi, 1.7rem)/1.35 var(--comic-font);
  color: #30241c;
  overflow-wrap: anywhere;
}
.manga-panel.lettered--reserve-below .speaker {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: #493726;
}
.manga-panel.lettered--reserve-below .balloon-tail {
  display: none;
}

/* Comic spreads: close dialogue beats, with full-width space for the big reveals. */
.manga-reader--cinematic {
  max-width: 1840px;
  padding-inline: 8px;
  --comic-gutter: 10px;
}
.manga-reader--cinematic > :not(.manga-page--splash) {
  max-width: 1120px;
  margin-inline: auto;
}
.manga-reader--cinematic .panel-grid {
  align-items: stretch;
}
.manga-reader--cinematic .manga-page {
  --panel-paper: #fff8e5;
  padding: 0;
  margin-bottom: 18px;
}
.manga-reader--cinematic .manga-page:has(.comic-transition--underwater) {
  --panel-paper: #e7f2ed;
}
.manga-reader--cinematic .manga-page:has(.comic-transition--town) {
  --panel-paper: #ffebce;
}
.manga-reader--cinematic .manga-page:has(.comic-transition--ancient) {
  --panel-paper: #ececdd;
}
/* Silent frames hug the complete artwork instead of stretching into empty paper. */
.manga-reader--cinematic
  .manga-page:not(.manga-page--gallery)
  .manga-panel:not(:has(.speech-balloon)) {
  align-self: start;
}
.manga-reader--cinematic .manga-panel:not(:has(.speech-balloon)) .comic-caption {
  position: absolute;
  inset: 0;
  grid-area: 1 / 1;
  padding: 0;
  background: transparent;
}
.manga-reader--cinematic .manga-panel:not(:has(.speech-balloon)) .comic-lettering {
  position: absolute;
  inset: 0;
}
.manga-reader--cinematic .manga-panel:not(:has(.speech-balloon)) .panel-sfx {
  position: absolute;
  top: clamp(12px, 4%, 28px);
  right: 4%;
  max-width: 88%;
  margin: 0;
  transform: rotate(-5deg);
}
@container comic-reader (width < 50rem) {
  .manga-reader--cinematic .comic-panel--mobile-wide {
    grid-column: 1 / -1;
  }
}
/* Enlarged text on a tablet or laptop makes the reader as narrow, in rem, as a phone, and a frame
   half a row wide letters its words in a transcript strip under the art. Frames then pair as they
   do on phones: a captioned frame takes a full row beside a silent one (mobileWidePanels), a pair
   of strips fills its row and ends level, and a silent frame keeps its sound effect on the art,
   so no row ends ragged over a gap. Phones keep their own rules (max-width: 700px). */
@container comic-reader (width < 40rem) {
  .manga-reader:not(.manga-reader--cinematic) .comic-panel--mobile-wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 701px) {
  @container comic-reader (width < 40rem) {
    .manga-reader:not(.manga-reader--cinematic) .panel-grid:not(.panel-grid--tiers) {
      align-items: stretch;
    }
    .manga-reader:not(.manga-reader--cinematic) .panel-grid:not(.panel-grid--tiers) > .manga-panel {
      grid-template-rows: auto 1fr;
    }
    @container (width < 18rem) {
      .manga-reader:not(.manga-reader--cinematic)
        .manga-panel:not(:has(.speech-balloon))
        .comic-caption {
        grid-area: 1 / 1;
        padding: 0;
        background: transparent;
      }
      .manga-reader:not(.manga-reader--cinematic)
        .manga-panel:not(:has(.speech-balloon))
        .comic-caption
        .comic-lettering {
        position: absolute;
        inset: 0;
      }
      .manga-reader:not(.manga-reader--cinematic)
        .manga-panel:not(:has(.speech-balloon))
        .comic-caption
        .panel-sfx {
        position: absolute;
        top: clamp(8px, 4%, 24px);
        right: 4%;
        left: auto;
        max-width: 88%;
        margin: 0;
        transform: rotate(-6deg);
      }
    }
  }
}
.manga-reader--cinematic .comic-scene-label {
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0.65rem;
  margin-bottom: 8px;
  font-size: 1rem;
  border-width: 2px;
}
.manga-reader--cinematic .manga-panel.lettered--reserve-responsive {
  background: var(--panel-paper);
  grid-template-rows: auto 1fr;
  align-content: start;
}
.manga-reader--cinematic .lettered--reserve-responsive .panel-art {
  grid-area: 1 / 1;
  padding: 0;
}
.manga-reader--cinematic .lettered--reserve-responsive .comic-caption {
  grid-area: 2 / 1;
  padding: 0.45rem;
  border: 0;
  background: var(--panel-paper);
  display: grid;
  align-items: center;
}
.manga-reader--cinematic .lettered--reserve-responsive .comic-lettering {
  position: static;
}
.manga-reader--cinematic .manga-panel.lettered--reserve-responsive .speech-balloon {
  position: relative;
  inset: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 45%;
  background: white;
  transform: none;
  box-shadow: none;
}
.manga-reader--cinematic .manga-panel.lettered--reserve-responsive .balloon--caption {
  border-radius: 0;
  background: #fff7d6;
}
.manga-reader--cinematic .manga-panel.lettered--reserve-responsive .dialogue {
  font: 700 1.0625rem/1.2 var(--comic-font);
  color: #30241c;
  overflow-wrap: anywhere;
}
.manga-reader--cinematic .lettered--reserve-responsive .balloon-tail {
  display: none;
}
.manga-reader--cinematic .manga-page--splash {
  margin-block: 28px;
}
/* Full-width title panels mark a change of place, time or point of view. */
.comic-transition {
  --scene-dark: #302a35;
  --scene-light: #765347;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(112px, 14cqi, 176px);
  margin-bottom: 12px;
  padding: clamp(18px, 3cqi, 32px);
  border: 3px solid var(--ink);
  background:
    radial-gradient(ellipse at 25% 100%, var(--scene-light), transparent 75%), var(--scene-dark);
  color: #fff2c6;
}
.comic-transition::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff3d518 1px, transparent 1.5px),
    repeating-conic-gradient(from 10deg at 30% 100%, transparent 0deg 14deg, #fff4d40b 14deg 17deg);
  background-size:
    6px 6px,
    100% 100%;
}
.comic-transition::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -38px;
  top: -85px;
  width: 260px;
  height: 260px;
  border: 3px solid #ffe6b42b;
  border-radius: 50%;
  box-shadow:
    0 0 0 22px #ffe6b410,
    0 0 0 46px #ffe6b40c;
  pointer-events: none;
}
.comic-transition h2 {
  margin: 0;
  max-width: 100%;
  font:
    400 clamp(2.125rem, 5.2cqi, 4.75rem)/1.08 'Kero Impact',
    sans-serif;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #241c21;
  overflow-wrap: anywhere;
}
.comic-transition p {
  max-width: 65ch;
  margin: 10px 0 0;
  color: #fff8df;
  font: 700 clamp(1.0625rem, 1.65cqi, 1.375rem)/1.4 var(--comic-font);
}
.comic-transition--underwater {
  --scene-dark: #06344c;
  --scene-light: #17677a;
}
.comic-transition--underwater::after {
  top: 22px;
  right: 8%;
  width: 48px;
  height: 48px;
  border-color: #b8f8ff66;
  box-shadow:
    68px 60px 0 -8px #9de3ed29,
    -70px 80px 0 -15px #9de3ed55,
    100px -32px 0 -12px #9de3ed33;
}
.comic-transition--town {
  --scene-dark: #52292c;
  --scene-light: #8c472e;
}
.comic-transition--town::after {
  border-radius: 0;
  transform: rotate(35deg);
}
.comic-transition--ancient {
  --scene-dark: #343226;
  --scene-light: #6d5a2c;
}
.comic-transition--memory {
  --scene-dark: #323a54;
  --scene-light: #685b7f;
}
.comic-transition--threat {
  --scene-dark: #251c3b;
  --scene-light: #763c56;
  color: #ffe3b7;
}

/* A softly lit gallery wall, with dimensional frames around complete originals. */
.manga-reader--cinematic .manga-page--gallery {
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 22px;
  border: 3px solid #615444;
  box-shadow: inset 0 0 0 5px #f4ecd380;
  background-color: #d5dfd3;
  background-image:
    radial-gradient(ellipse at 17% 32%, #fffbed, transparent 35%),
    radial-gradient(ellipse at 50% 32%, #fffbed, transparent 35%),
    radial-gradient(ellipse at 83% 32%, #fffbed, transparent 35%),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(33.333% - 2px),
      #77958425 calc(33.333% - 2px) 33.333%
    ),
    radial-gradient(circle, #69776312 1px, transparent 1.5px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    5px 5px;
}
.gallery-title {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 8px 18px;
  border: 3px double #725b38;
  background: #fff0be;
  box-shadow: 0 4px 8px #392c2026;
  color: var(--ink);
  text-align: center;
  font:
    400 clamp(2.5rem, 6cqi, 4.25rem)/1.08 'Kero Impact',
    sans-serif;
}
.comic-page-note {
  margin: 0 0 20px;
  max-width: 60ch;
  font: 400 0.9375rem/1.5 var(--body);
}
.manga-page--gallery .comic-page-note {
  max-width: 40ch;
  margin: 0 auto 26px;
  color: #392c20;
  text-align: center;
  font: 700 clamp(1.25rem, 2.1cqi, 1.75rem)/1.3 var(--comic-font);
}
.manga-page--gallery .panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  align-items: end;
}
.manga-page--gallery .manga-panel {
  --gallery-frame: #b38a4f;
  --gallery-art-height: 180px;
  grid-column: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.manga-page--gallery .manga-panel:nth-child(3n + 2) {
  --gallery-frame: #916750;
}
.manga-page--gallery .manga-panel:nth-child(3n) {
  --gallery-frame: #697869;
}
.manga-page--gallery .panel-art {
  grid-area: 1 / 1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 9px;
  border: 2px solid #59483a;
  background: linear-gradient(135deg, #fff4c899, transparent 40%, #241b2059), var(--gallery-frame);
  box-shadow:
    inset 2px 2px 0 #fff2c77d,
    inset -2px -2px 0 #39271e80,
    3px 5px 7px #392c2040;
}
.manga-page--gallery .panel-art a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--gallery-art-height) + 8px);
  max-width: 100%;
  padding: 3px;
  border: 1px solid #63513a;
  background: #fff3d4;
  box-shadow:
    0 0 0 1px #ffeabb99,
    inset 1px 1px 3px #392c203d;
}
.manga-page--gallery .panel-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--gallery-art-height);
  object-fit: contain;
}
.manga-page--gallery .panel-credit {
  grid-area: 2 / 1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 3px 10px;
  border: 2px solid #59483a;
  background: #ffe9a6;
  box-shadow: 2px 2px 0 #59483a;
  font: 700 1.0625rem/1.3 var(--body);
}
.manga-page--gallery .creator-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}
.manga-page--gallery .fan-art-window {
  position: relative;
  display: block;
  width: var(--gallery-art-height);
  max-width: 100%;
  overflow: hidden;
}
/* The site is served with `style-src 'self'` and no 'unsafe-inline', so a style
   attribute on the span is dropped before it reaches the page and the window
   collapses to nothing. A crop therefore has to be declared here, where the
   stylesheet is same origin and allowed. The generic rules below still read the
   custom properties; only their source moves.

   To crop another fan artwork, add a block like this one named after its image
   and convert its `focus` from content/artwork.ts:
     --art-width: 10000 / focus.width, as a percentage
     --art-x:     -focus.left, a percentage of the image's own width
     --art-y:     -focus.top, a percentage of the image's own height
   BomberGaming: focus { left: 22, top: 25.5, width: 40, aspectRatio: 1 }. */
.manga-page--gallery .fan-art-window--fan-bomber-kero {
  --art-width: 250%;
  --art-x: -22%;
  --art-y: -25.5%;
  aspect-ratio: 1;
}
.manga-page--gallery .panel-art .fan-art-window img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--art-width);
  max-width: none;
  max-height: none;
  transform: translate(var(--art-x), var(--art-y));
}
/* One featured original balances the six smaller frames without an orphaned row. */
.manga-page--gallery .manga-panel.comic-panel--large {
  --gallery-frame: #b38a4f;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 660px;
  justify-self: center;
  align-self: center;
}
.manga-page--gallery .comic-panel--large .panel-art {
  width: 100%;
}
.manga-page--gallery .comic-panel--large .panel-art a {
  height: auto;
}
.manga-page--gallery .comic-panel--large .panel-art img {
  width: 100%;
  max-height: none;
}
@container comic-reader (width >= 60rem) {
  .manga-page--gallery:has(.comic-panel--large) .panel-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .manga-page--gallery .manga-panel.comic-panel--large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .manga-page--gallery .manga-panel:not(.comic-panel--large) .panel-credit {
    font-size: 1rem;
    padding-inline: 6px;
  }
  .manga-page--gallery .manga-panel:not(.comic-panel--large) .creator-channel > span {
    display: none;
  }
}
@container comic-reader (width < 45rem) {
  .manga-page--gallery .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  .manga-page--gallery .manga-panel {
    --gallery-art-height: 125px;
  }
  .manga-page--gallery .panel-art {
    padding: 6px;
  }
  .manga-page--gallery .panel-credit {
    padding-inline: 5px;
    font-size: 1rem;
  }
  .manga-page--gallery .creator-channel {
    gap: 4px;
  }
  .manga-page--gallery .creator-channel > span {
    display: none;
  }
}
@container comic-reader (width < 18rem) {
  .manga-page--gallery .panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .manga-page--gallery .manga-panel {
    --gallery-art-height: 180px;
  }
}

/* Above-art dialogue stays inside each frame; enlarged text and phones use the
   same compact bubbles beneath the art, without covering characters. */
@container comic-reader (width >= 50rem) {
  .manga-reader--cinematic .manga-panel.lettered--reserve-responsive:not(.japanese-panel) {
    grid-template-rows: auto;
  }
  .manga-reader--cinematic .lettered--reserve-responsive:not(.japanese-panel) .comic-caption {
    grid-area: 1 / 1;
    padding: 0;
    background: transparent;
  }
  .manga-reader--cinematic .lettered--reserve-responsive:not(.japanese-panel) .comic-lettering {
    position: absolute;
  }
  .manga-reader--cinematic
    .manga-panel.lettered--reserve-responsive:not(.japanese-panel)
    .speech-balloon {
    position: absolute;
    inset: auto auto 3% 3%;
    margin: 0;
    max-width: 72%;
    padding: 0.5rem 1rem;
  }
  .manga-reader--cinematic
    .manga-panel.lettered--reserve-responsive:not(.japanese-panel).lettered--top-left
    .speech-balloon {
    top: 3%;
    bottom: auto;
  }
  .manga-reader--cinematic
    .manga-panel.lettered--reserve-responsive:not(.japanese-panel).lettered--top-right
    .speech-balloon {
    inset: 3% 3% auto auto;
  }
  .manga-reader--cinematic
    .manga-panel.lettered--reserve-responsive:not(.japanese-panel).lettered--bottom-right
    .speech-balloon {
    left: auto;
    right: 3%;
  }
  .manga-reader--cinematic .manga-panel.lettered--reserve-responsive .dialogue {
    font-size: clamp(1.0625rem, 3.3cqi, 1.4rem);
  }
  .manga-reader--cinematic .manga-page--splash .speech-balloon {
    max-width: 35rem;
  }
}
/* Tall frames sit in a printed comic spread; decorative margins disappear on phones. */
.comic-lesson-spread {
  --margin-paper: #fff0bd;
  --margin-colour: #b6651e;
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr);
  padding-block: 18px;
  background-color: var(--margin-paper);
  background-image:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--margin-colour) 24%, transparent) 1px,
      transparent 1.5px
    ),
    repeating-conic-gradient(from 10deg at 50% 48%, transparent 0deg 13deg, #ffffff60 13deg 15deg);
  background-size:
    7px 7px,
    100% 100%;
}
.comic-lesson-spread--sugoi {
  --margin-paper: #f7dbe1;
  --margin-colour: #b14a65;
}
.comic-lesson-spread--utae {
  --margin-paper: #e5e5f3;
  --margin-colour: #615878;
}
.comic-lesson-spread > .comic-lesson {
  grid-area: 1 / 2;
  z-index: 1;
}
.comic-margin-art {
  display: none;
  min-width: 0;
  pointer-events: none;
  color: var(--margin-colour);
}
.comic-margin-word {
  font:
    400 clamp(2rem, 4.7cqw, 3.5rem)/1 'Kero Impact',
    sans-serif;
  writing-mode: vertical-rl;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-10deg);
  color: var(--ink);
  text-shadow: 3px 3px 0 #fff8e8;
}
.comic-margin-symbol {
  font:
    400 clamp(4rem, 12cqw, 9rem)/1 'Kero Impact',
    sans-serif;
  transform: rotate(-12deg);
  color: var(--margin-paper);
  -webkit-text-stroke: 2px var(--margin-colour);
  text-shadow: 5px 5px 0 #ffffffb3;
}
.comic-margin-art--right .comic-margin-symbol:last-child {
  transform: rotate(14deg);
}
@container (min-width: 64rem) {
  .comic-margin-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 48px 14px;
  }
  .comic-margin-art--left {
    grid-area: 1 / 1;
  }
  .comic-margin-art--right {
    grid-area: 1 / 3;
  }
}

/* A single illustrated comic frame. The lower row reserves the characters’
   full space, so larger text can grow upward without covering the drawing. */
.comic-lesson {
  container-type: inline-size;
  width: min(100%, 600px);
  margin-inline: auto;
  border: 3px solid var(--ink);
  background: #fff6df;
  box-shadow: 4px 4px 0 var(--ink);
}
.comic-lesson-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.comic-lesson-scene::after {
  content: '';
  grid-area: 2 / 1;
  aspect-ratio: 10 / 9;
  pointer-events: none;
}
.comic-lesson .lesson-illustration {
  grid-area: 1 / 1 / 3 / 2;
  align-self: end;
  background: transparent;
}
.comic-lesson-lettering {
  grid-area: 1 / 1;
  z-index: 1;
  min-height: 60cqw;
  display: grid;
  align-items: center;
  padding: 5% 7% 7%;
}
.comic-lesson-balloon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(12px, 3cqw, 22px) 12px;
  border: 3px solid var(--ink);
  border-radius: 44% 46% 43% 42% / 24% 26% 25% 25%;
  background: #fffefa;
  text-align: center;
  box-shadow: 3px 3px 0 var(--ink);
}
.comic-lesson-balloon::after {
  content: '';
  position: absolute;
  left: 33%;
  bottom: -14px;
  width: 18px;
  height: 22px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: #fffefa;
  transform: skewY(-32deg) rotate(35deg);
}
.comic-lesson .japanese-reading {
  gap: 0;
}
.comic-lesson .japanese-word {
  font-size: clamp(2rem, 9cqw, 3.5rem);
  line-height: 1.25;
}
.comic-lesson .japanese-romaji {
  font-size: 1rem;
  line-height: 1.4;
}
.comic-lesson .japanese-meaning {
  font: 700 1.15rem/1.25 var(--comic-font);
  text-transform: uppercase;
}
.comic-lesson .listen-button {
  min-height: 44px;
  padding: 6px 14px;
  box-shadow: 0 2px 0 var(--ink);
}
.comic-lesson .pronunciation {
  align-items: center;
  max-width: 100%;
  margin-top: 4px;
}
.comic-lesson-intro {
  font: 700 1rem/1.2 var(--comic-font);
  text-transform: uppercase;
}
.comic-lesson-speaker {
  color: #a64b24;
}
/* Keep a long introduction clear of the balloon's rounded top corners on phones. */
/* Episode 4 lesson intros name their speaker; keep the longer line clear of the curved top. */
.manga-reader:has(.panel-grid--tiers) .comic-lesson-intro {
  display: block;
  max-width: 72%;
  margin-inline: auto;
}
.comic-lesson-caption {
  margin: 0;
  border-top: 2px solid var(--ink);
  padding: 12px 16px;
  font: 700 0.9375rem/1.45 var(--comic-font);
  background: #fff5cf;
}

.comic-lesson--utae .comic-lesson-balloon::after {
  left: 70%;
  transform: skewY(32deg) rotate(55deg);
}

/* Native wide episode frames: an establishing memory above two smaller beats. */
.manga-page--montage .panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.manga-page--montage .manga-panel:first-child {
  grid-area: 1 / 1 / 2 / 3;
}
.manga-page--montage .manga-panel:nth-child(2) {
  grid-area: 2 / 1;
}
.manga-page--montage .manga-panel:nth-child(3) {
  grid-area: 2 / 2;
}
.manga-page--spotlight .panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manga-page--spotlight .manga-panel {
  grid-column: auto;
}
@container comic-reader (width < 45rem) {
  .manga-page--spotlight .panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .manga-page--montage .panel-grid {
    gap: 8px;
  }
  .manga-page--montage .manga-panel.lettered--reserve-responsive .comic-caption {
    padding: 4px;
  }
  .manga-page--montage .manga-panel.lettered--reserve-responsive .speech-balloon {
    padding: 0.4rem;
    border-radius: 0;
  }
  .manga-page--montage .manga-panel.lettered--reserve-responsive .dialogue {
    font-size: 1rem;
  }
}
@container comic-reader (width < 18rem) {
  .manga-page--montage .panel-grid {
    display: flex;
    flex-direction: column;
  }
  .manga-page--montage .manga-panel {
    width: 100%;
  }
}

/* An English line that carries one Japanese word keeps the comic lettering. */
.japanese-word--mixed {
  font-family: var(--comic-font);
  text-transform: uppercase;
}
.japanese-word--mixed [lang='ja'] {
  text-transform: none;
}

.word-quiz {
  --quiz-ink: #30281f;
  color: var(--quiz-ink);
  margin: 48px 0 24px;
  padding: clamp(18px, 3vw, 40px);
  border: 3px solid var(--quiz-ink);
  background-color: #8bd1d6;
  background-image: radial-gradient(#30281f18 1px, transparent 1px);
  background-size: 9px 9px;
  box-shadow: 7px 7px 0 var(--quiz-ink);
  scroll-margin-top: 100px;
}
.word-quiz [hidden] {
  display: none !important;
}
.quiz-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.quiz-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.quiz-heading h2 {
  font:
    400 clamp(2.5rem, 5vw, 4.7rem)/1 'Kero Impact',
    var(--heading);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.quiz-heading h2 em {
  color: #822820;
}
.quiz-heading p:last-child {
  margin-bottom: 0;
  max-width: 42ch;
}
.quiz-stamp {
  background: #f6c747;
  border: 3px solid var(--quiz-ink);
  border-radius: 50%;
  padding: 23px 20px;
  font:
    700 1.4rem/1.1 'Kero Comic',
    cursive;
  text-align: center;
  transform: rotate(8deg);
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--quiz-ink);
}
.quiz-game {
  border: 3px solid var(--quiz-ink);
  background: #fffaf0;
}
.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 3px solid var(--quiz-ink);
  background: #ffe6a3;
}
.quiz-progress p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}
.quiz-progress ol {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quiz-progress li {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  font: 1.7rem/1 var(--body);
  border-radius: 50%;
}
.quiz-progress li[aria-current] {
  outline: 2px solid var(--quiz-ink);
  outline-offset: 2px;
  background: white;
}
.quiz-progress li.is-correct {
  background: #f6c747;
}
.quiz-progress li.is-reviewed {
  background: #d8efe1;
  font-size: 1.2rem;
}
.quiz-round {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: start;
}
.quiz-scene {
  margin: 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 3px solid var(--quiz-ink);
  background: #ffe6a3;
}
.quiz-scene--coral {
  background: #f1b29d;
}
.quiz-scene--mint {
  background: #d8efe1;
}
.quiz-scene--lavender {
  background: #d8c3ea;
}
.quiz-scene img {
  width: 100%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.quiz-context {
  margin: 0 0 16px;
  font:
    700 1.125rem/1.35 'Kero Comic',
    var(--body);
}
.quiz-play {
  padding: clamp(18px, 2.5vw, 32px);
}
.quiz-play h3 {
  position: relative;
  padding: 18px 20px;
  margin: 0 0 25px;
  background: white;
  border: 2px solid var(--quiz-ink);
  border-radius: 43% 46% 39% 40% / 27% 35% 28% 33%;
  font:
    700 clamp(1.25rem, 2vw, 1.75rem)/1.2 'Kero Comic',
    var(--body);
  text-align: center;
}
.quiz-play h3::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: -9px;
  left: 22%;
  background: white;
  border-right: 2px solid var(--quiz-ink);
  border-bottom: 2px solid var(--quiz-ink);
  transform: skew(-18deg) rotate(45deg);
}
/* How the word is said: the romaji its spelling is picked from. */
.quiz-prompt-romaji {
  margin: -10px 0 16px;
  font:
    700 clamp(1.3rem, 2vw, 1.6rem)/1.2 'Kero Comic',
    var(--body);
  letter-spacing: 0.02em;
  text-align: center;
}
.quiz-choices {
  display: grid;
  gap: 12px;
}
.quiz-choice {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--quiz-ink);
  border-radius: 9px;
  box-shadow: 0 4px 0 var(--quiz-ink);
  background: white;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}
.quiz-choice:nth-child(2) {
  background: #ffe6a3;
}
.quiz-choice:nth-child(3) {
  background: #e6daf1;
}
.quiz-choice:not([aria-disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--quiz-ink);
}
.quiz-choice:not([aria-disabled]):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--quiz-ink);
}
.quiz-choice-letter {
  border: 2px solid var(--quiz-ink);
  border-radius: 50%;
  flex: 0 0 1.875em;
  width: 1.875em;
  height: 1.875em;
  display: grid;
  place-items: center;
  font:
    700 1.1rem/1 'Kero Comic',
    var(--body);
  background: #fffaf0;
}
.quiz-choice > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quiz-kana {
  display: block;
  font:
    700 clamp(1.3rem, 2vw, 1.7rem)/1.4 'Kero Japanese',
    sans-serif;
}
.quiz-romaji {
  display: block;
  font-size: 0.9375rem;
}
.quiz-choice-mark {
  margin-left: auto;
  font-size: 1.8rem;
  font-weight: 700;
}
.quiz-choice[aria-disabled] {
  cursor: default;
}
.quiz-choice.is-correct {
  background: #d8efe1;
  border-width: 3px;
}
.quiz-choice.is-wrong {
  background: #f5cec7;
  border-style: dashed;
}
.quiz-feedback {
  padding-top: 22px;
}
.quiz-feedback p {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5;
}
.quiz-feedback .quiz-verdict {
  font:
    700 1.35rem/1.2 'Kero Comic',
    var(--body);
}
.quiz-feedback-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 16px 0;
}
.quiz-feedback-actions a {
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.word-quiz .pronunciation {
  margin: 0;
}
.word-quiz .listen-button {
  font-size: 0.875rem;
  padding: 8px 14px;
  min-height: 44px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--quiz-ink);
}
.quiz-next {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border: 2px solid var(--quiz-ink);
  border-radius: 6px;
  background: #f6c747;
  box-shadow: 0 4px 0 var(--quiz-ink);
  font-weight: 700;
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
}
.quiz-next:hover {
  background: #ffdc6c;
}
.quiz-feedback .quiz-next {
  width: 100%;
}
.quiz-results {
  background: #fffaf0;
  border: 3px solid var(--quiz-ink);
  padding: clamp(18px, 3vw, 36px);
}
.quiz-result-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 32px;
}
.quiz-result-kero {
  width: 180px;
  height: auto;
  object-fit: contain;
}
.quiz-result-hero h3 {
  font:
    400 clamp(2.5rem, 5vw, 4rem)/1 'Kero Impact',
    var(--heading);
  margin-bottom: 16px;
}
.quiz-result-hero p {
  max-width: 42ch;
}
.quiz-results h4 {
  font:
    700 1.25rem/1.4 'Kero Comic',
    var(--body);
  margin: 0 0 12px;
}
.quiz-recap {
  margin: 0;
  padding: 0;
  list-style: none;
}
.quiz-recap li {
  display: grid;
  grid-template-columns: 28px minmax(140px, 1fr) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #30281f40;
}
.quiz-recap .quiz-kana {
  font-size: 1.2rem;
}
.quiz-recap a:hover {
  text-decoration: underline;
}
.quiz-recap-mark {
  font-size: 1.6rem;
}
.quiz-paper details {
  padding: 18px;
  background: #fffaf0;
  border: 2px solid var(--quiz-ink);
  margin-bottom: 12px;
}
.quiz-paper summary {
  cursor: pointer;
  font-weight: 700;
}
.quiz-paper p {
  margin: 12px 0 0;
}
.reader-toolbar .reader-quiz-link {
  font-weight: 700;
  gap: 5px;
}
.reader-quiz-link span {
  color: #75520a;
}
@media (max-width: 700px) {
  .word-quiz {
    margin-top: 28px;
    padding: 14px;
    box-shadow: 4px 4px 0 var(--quiz-ink);
  }
  .quiz-heading {
    gap: 8px;
    margin-bottom: 20px;
  }
  .quiz-heading h2 {
    font-size: 2.6rem;
  }
  .quiz-stamp {
    display: none;
  }
  .quiz-round {
    grid-template-columns: 1fr;
  }
  .quiz-progress {
    flex-wrap: wrap;
    padding: 12px;
    gap: 12px;
  }
  .quiz-progress ol {
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding: 0 5px;
  }
  .quiz-scene {
    border-right: 0;
    border-bottom: 3px solid var(--quiz-ink);
  }
  .quiz-scene img {
    max-height: 220px;
    object-fit: contain;
  }
  .quiz-play {
    padding: 18px 14px;
  }
  .quiz-choice {
    padding: 10px 12px;
    gap: 12px;
  }
  .quiz-result-hero {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .quiz-result-kero {
    width: 125px;
  }
  .quiz-recap li {
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
  }
  .quiz-recap-mark {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .quiz-recap a {
    grid-column: 2;
    grid-row: 1;
  }
  .quiz-recap .quiz-recap-meaning {
    grid-column: 2;
    grid-row: 2;
  }
  .quiz-recap .pronunciation {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .reader-toolbar {
    gap: 8px 12px;
  }
  .reader-toolbar select {
    max-width: 38vw;
  }
  .reader-quiz-link span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-choice {
    transition: none;
  }
}

.quiz-scene--portrait {
  --portrait-paper: #ffebbd;
  padding: 20px;
  align-items: center;
  background-color: var(--portrait-paper);
  background-image: radial-gradient(#70522424 1px, transparent 1.5px);
  background-size: 7px 7px;
}
.quiz-scene--sugoi {
  --portrait-paper: #f5d9df;
}
.quiz-scene--utae {
  --portrait-paper: #e5dfee;
}
.quiz-portrait-frame {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 340px);
  margin: 0;
  border: 2px solid var(--quiz-ink);
  background: #fff5df;
  box-shadow: 4px 4px 0 var(--quiz-ink);
}
.quiz-portrait-frame::after {
  content: '';
  grid-area: 2 / 1;
  aspect-ratio: 10 / 9;
  pointer-events: none;
}
.quiz-portrait-frame img {
  grid-area: 1 / 1 / 3 / 2;
  align-self: end;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}
.quiz-portrait-caption {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: 60cqw;
  padding: 7%;
}
.quiz-portrait-caption p {
  position: relative;
  margin: 0;
  padding: 16px 12px;
  border: 2px solid var(--quiz-ink);
  border-radius: 44% 46% 43% 42% / 24% 26% 25% 25%;
  background: #fffefa;
  text-align: center;
  font:
    700 1.125rem/1.3 'Kero Comic',
    var(--body);
}
.quiz-portrait-caption p::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 35%;
  width: 14px;
  height: 16px;
  border-bottom: 2px solid var(--quiz-ink);
  border-right: 2px solid var(--quiz-ink);
  background: #fffefa;
  transform: skewY(-30deg) rotate(35deg);
}
@media (max-width: 700px) {
  .quiz-scene--portrait {
    padding: 14px;
  }
  .quiz-portrait-frame {
    width: min(100%, 220px);
  }
  .quiz-portrait-caption p {
    padding: 12px 8px;
    font-size: 1rem;
  }
}

.learn-room {
  --learn-bg: var(--butter);
  max-width: var(--page);
  margin: 10px auto 40px;
  padding: 30px 6% 48px;
  background: var(--learn-bg);
  border-block: 3px solid var(--ink);
}
.learn-room--katakana {
  --learn-bg: var(--blue);
  /* Darker text tones keep contrast on the blue background. */
  --muted: #3f3224;
  --red: #7f2219;
}
.learn-room--numbers {
  --learn-bg: #ffd9c2;
  --muted: #4a3a2a;
  --red: #8a2a1f;
}
.learn-room--index {
  --learn-bg: var(--butter);
}
.learn-room [hidden] {
  display: none !important;
}
.learn-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
}
.learn-intro h1 {
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  margin-bottom: 12px;
}
.learn-intro h1 [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
  color: var(--red);
}
.learn-intro p:last-child {
  margin: 0;
  max-width: 46ch;
}
.learn-sticker {
  padding: 16px 22px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(7deg);
  font: 1.3rem/1.1 var(--heading);
  flex-shrink: 0;
  text-align: center;
}
.learn-room--katakana .learn-sticker {
  background: var(--paper);
}
.learn-switch {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 26px;
}
.learn-switch a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.learn-switch a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}
.learn-switch [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}

.learn-lesson {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  grid-template-areas:
    'guide cards'
    'guide nav';
  gap: 18px 28px;
  align-items: start;
}
.learn-guide {
  grid-area: guide;
  text-align: center;
}
.learn-sensei {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.learn-guide h2 {
  font-size: 1.4rem;
  margin: 12px 0 4px;
}
.learn-count {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.learn-cards {
  grid-area: cards;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.learn-card {
  padding: 24px 28px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 24px 18px 26px;
  box-shadow: 6px 6px 0 var(--ink);
}
.learn-card .eyebrow {
  color: var(--red);
  margin-bottom: 6px;
}
.learn-card h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 10px;
}
.learn-card h3:focus {
  outline: none;
}
.learn-card p {
  font-size: 1.1rem;
  margin: 0 0 14px;
  max-width: 60ch;
}
.learn-outro {
  font-weight: 700;
}
.learn-examples {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.learn-examples li {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 130px;
  flex: 1 1 130px;
  max-width: 260px;
  padding: 14px 12px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px;
  text-align: center;
}
.learn-room--katakana .learn-examples li {
  background: #d9f0f2;
}
.learn-jp {
  font:
    2.2rem/1.2 'Kero Japanese',
    var(--body);
  font-weight: 700;
}
.learn-romaji {
  font-weight: 700;
  color: var(--red);
}
.learn-meaning {
  font-size: 0.95rem;
  color: var(--muted);
}
.learn-nav {
  grid-area: nav;
  display: flex;
  gap: 12px;
}
.learn-nav .primary {
  flex: 1;
}

.learn-quiz {
  margin-top: 44px;
  padding: 26px 28px 30px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 18px;
  box-shadow: 6px 6px 0 var(--ink);
  scroll-margin-top: 90px;
}
.learn-quiz-heading h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 6px;
}
.learn-quiz-heading p:last-child {
  margin: 0 0 18px;
}
.learn-question h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 14px;
}
.learn-question h3:focus,
.learn-results h3:focus {
  outline: none;
}
.learn-choices {
  display: grid;
  gap: 10px;
  max-width: 560px;
}
.learn-choice {
  min-height: 52px;
  padding: 10px 18px;
  font: 700 1.05rem/1.4 var(--body);
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.learn-choice [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
  font-size: 1.25em;
}
.learn-choice:not(:disabled):hover {
  background: var(--butter);
  transform: translateY(-2px);
}
.learn-choice:disabled {
  cursor: default;
  opacity: 0.6;
}
.learn-choice.is-right {
  opacity: 1;
  background: #cfeccb;
}
.learn-choice.is-right::after {
  content: ' ✓';
}
.learn-choice.is-wrong {
  opacity: 1;
  background: #f6d2cc;
}
.learn-choice.is-wrong::after {
  content: ' ✗';
}
.learn-feedback {
  max-width: 560px;
  margin-top: 16px;
}
.learn-feedback p {
  margin: 0 0 12px;
}
.learn-verdict {
  font: 1.3rem/1.2 var(--heading);
  color: var(--red);
}
.learn-verdict.is-right {
  color: #2f7a35;
}
.learn-results {
  display: flex;
  align-items: center;
  gap: 24px;
}
.learn-result-kero {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}
.learn-results h3 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 14px;
  letter-spacing: 0.04em;
}
.learn-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.learn-result-actions [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
.learn-paper details {
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .learn-intro {
    flex-direction: column;
    align-items: flex-start;
  }
  .learn-sticker {
    display: none;
  }
  .learn-lesson {
    grid-template-columns: 1fr;
    grid-template-areas: 'guide' 'cards' 'nav';
  }
  .learn-guide {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .learn-sensei {
    width: 84px;
  }
  .learn-guide h2 {
    margin: 0;
  }
  .learn-card,
  .learn-quiz {
    padding: 20px;
  }
  .learn-results {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-choice:not(:disabled):hover {
    transform: none;
  }
}

/* ════ Lesson grid ════ */
.learn-back {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.learn-progress {
  margin: -8px 0 18px;
  font-weight: 700;
}
.learn-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.learn-tile {
  position: relative;
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px 22px 16px 20px;
  box-shadow: 0 4px 0 var(--ink);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.learn-tile:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 7px 0 var(--ink);
}
.learn-tile--intro {
  background: var(--yellow);
}
.learn-tile-label {
  font: 700 0.8125rem/1.4 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
}
.learn-tile-kana {
  font:
    700 1.9rem/1.25 'Kero Japanese',
    var(--body);
  letter-spacing: 0.04em;
}
.learn-tile-title {
  font: 1.2rem/1.2 var(--heading);
}
.learn-tile-sub {
  color: var(--muted);
  font-size: 0.95rem;
}
.learn-tile--intro .learn-tile-sub,
.learn-tile--intro .learn-tile-label {
  color: var(--ink);
}
.learn-tile-badge:empty {
  display: none;
}
.learn-tile-badge {
  justify-self: start;
  margin-top: 6px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #cfeccb;
}
.learn-tile.is-next {
  outline: 4px solid var(--red);
  outline-offset: 3px;
}
.learn-tile.is-next .learn-tile-badge {
  background: var(--yellow);
}
.learn-how {
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 18px;
}
.learn-how h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}
.learn-how ol {
  margin: 0 0 10px;
  padding-left: 1.3em;
}
.learn-how li + li {
  margin-top: 6px;
}
.learn-how p {
  margin: 0;
  color: var(--muted);
}

/* ════ Flash cards ════ */
.learn-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.learn-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.flash-cards {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.learn-flash--stepped .flash-cards {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}
.flash-face {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  min-height: 210px;
  padding: 20px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
}
.flash-face:disabled {
  cursor: default;
  opacity: 1;
}
.learn-flash--stepped .flash-face {
  min-height: 300px;
}
.flash-kana {
  font:
    700 clamp(4.5rem, 12vw, 7rem)/1 'Kero Japanese',
    var(--body);
}
.flash-back {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.flash-romaji {
  font: 2rem/1 var(--heading);
  color: var(--red);
}
.flash-cue {
  max-width: 30ch;
  color: var(--muted);
}
.flash-hint {
  display: none;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--muted);
}
/* With JavaScript the back is hidden until the card is flipped. */
.learn-flash--stepped .flash-back {
  display: none;
}
.learn-flash--stepped .flash-hint {
  display: block;
}
.learn-flash--stepped .is-flipped .flash-back {
  display: grid;
}
.learn-flash--stepped .is-flipped .flash-hint {
  display: none;
}
.learn-flash--stepped .is-flipped .flash-face {
  background: var(--butter);
}
.learn-room--katakana .learn-flash--stepped .is-flipped .flash-face {
  background: #d9f0f2;
}
.learn-flash .learn-nav {
  max-width: 460px;
  margin: 0 auto;
}

/* ════ Multiple choice ════ */
.mc-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.mc-progress p {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}
.mc-bar {
  flex: 1;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.mc-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--yellow);
  transition: width 0.3s;
}
.mc-question {
  text-align: center;
}
.mc-prompt {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.mc-target {
  margin: 4px 0 18px;
  font: 2.6rem/1.2 var(--heading);
}
.mc-target:focus {
  outline: none;
}
.mc-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.mc-choice {
  min-height: 64px;
  padding: 10px;
  font: 1.6rem/1.2 var(--heading);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
}
.mc-choice--kana {
  font:
    700 2.2rem/1.2 'Kero Japanese',
    var(--body);
}
.mc-choice:not(:disabled):hover {
  background: var(--butter);
  transform: translateY(-2px);
}
.mc-choice:disabled {
  cursor: default;
  opacity: 0.55;
}
.mc-choice.is-right {
  opacity: 1;
  background: #cfeccb;
}
.mc-choice.is-wrong {
  opacity: 1;
  background: #f6d2cc;
}
.mc-question .learn-feedback {
  margin: 18px auto 0;
}
.learn-paper-list {
  columns: 3;
  font-size: 1.1rem;
}

/* ════ Home page section ════ */
.learn-preview {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  background: var(--butter);
  border-block: 3px solid var(--ink);
  margin-block: 35px 0;
}
.learn-preview [hidden] {
  display: none !important;
}
.learn-preview h2 span {
  color: var(--red);
}
.learn-resume {
  display: grid;
  gap: 10px;
  justify-items: start;
  font-weight: 700;
}
.learn-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.learn-preview-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform 0.18s;
}
.learn-preview-card--katakana {
  background: #d9f0f2;
  transform: rotate(2deg);
}
.learn-preview-card:hover {
  transform: rotate(0) translateY(-4px);
}
.learn-preview-kana {
  font:
    700 clamp(2rem, 4vw, 2.8rem)/1.2 'Kero Japanese',
    var(--body);
}
.learn-preview-name {
  font: 1.5rem/1.2 var(--heading);
}
.learn-preview-name [lang='ja'] {
  white-space: nowrap;
  font-family: 'Kero Japanese', var(--body);
  color: var(--red);
  font-size: 0.85em;
}
.learn-preview-sub {
  color: var(--muted);
}
.learn-preview-go {
  margin-top: 6px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .learn-preview {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .learn-preview-cards {
    grid-template-columns: 1fr;
  }
  .learn-paper-list {
    columns: 2;
  }
  .mc-choice {
    font-size: 1.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-tile,
  .learn-preview-card,
  .mc-bar span {
    transition: none;
  }
  .learn-tile:hover,
  .learn-preview-card:hover,
  .mc-choice:not(:disabled):hover {
    transform: none;
  }
}

/* ════ Simpler lesson layout ════ */
.lesson-head {
  text-align: center;
  margin-bottom: 18px;
}
.lesson-head .eyebrow {
  margin-bottom: 4px;
  color: var(--red);
}
.lesson-head h1 {
  margin: 0;
  font:
    700 clamp(3rem, 9vw, 5.5rem)/1.1 'Kero Japanese',
    var(--heading);
  letter-spacing: 0.06em;
}
.battle-room .lesson-head h1 {
  font: clamp(2.4rem, 6vw, 4rem)/1.1 var(--heading);
  letter-spacing: 0;
}
.battle-vs {
  color: var(--red);
}
.lesson-romaji {
  margin: 4px 0 0;
  font: 1.3rem/1.3 var(--heading);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.lesson-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.lesson-steps a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lesson-steps b,
.step-title b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 0.1em;
}
.lesson-steps a {
  min-height: 46px;
  padding: 8px 18px;
  font-weight: 700;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.lesson-steps b,
.step-title b {
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  font: 1rem/1 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.learn-flash,
.learn-words,
.learn-draw {
  scroll-margin-top: 90px;
}
.learn-room .learn-quiz {
  margin-top: 36px;
}

/* Sound buttons */
.sound-button {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.sound-button:hover {
  transform: translateY(-2px);
}
.flash-card {
  position: relative;
}
.flash-sound {
  position: absolute;
  top: 14px;
  right: 14px;
}
.flash-card audio {
  width: 100%;
  margin-top: 8px;
}
.mc-target-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.mc-target-row .mc-target {
  margin-bottom: 18px;
}
.mc-target-row .sound-button {
  margin-bottom: 18px;
}

/* ════ Stroke order ════ */
.learn-draw {
  margin-top: 36px;
  padding: 26px 28px 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 26px 18px 24px;
  box-shadow: 6px 6px 0 var(--ink);
}
.draw-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.draw-picker button {
  width: 58px;
  height: 58px;
  font:
    700 1.8rem/1 'Kero Japanese',
    var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.draw-picker button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.draw-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.draw-demo,
.draw-pad {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.draw-demo svg,
.draw-paper {
  width: min(100%, 320px);
  aspect-ratio: 1;
  background:
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
}
.draw-demo figcaption,
.draw-pad figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 700;
}
.draw-under {
  fill: none;
  stroke: #efe4cb;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-stroke 0.9s ease-in-out forwards;
  animation-delay: calc(var(--s) * 1s + 0.3s);
}
.draw-number {
  opacity: 0;
  animation: draw-number 0.2s forwards;
  animation-delay: calc(var(--s) * 1s + 0.3s);
}
.draw-number circle {
  fill: var(--red);
}
.draw-number text {
  font: 700 6.5px/1 var(--body);
  fill: #fff;
}
/* Stroke timing by class, because the live security policy blocks inline styles. */
.draw-s0 {
  --s: 0;
}
.draw-s1 {
  --s: 1;
}
.draw-s2 {
  --s: 2;
}
.draw-s3 {
  --s: 3;
}
.draw-s4 {
  --s: 4;
}
.draw-s5 {
  --s: 5;
}
@keyframes draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-number {
  to {
    opacity: 1;
  }
}
.draw-paper {
  position: relative;
  overflow: hidden;
}
.draw-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.draw-guide path {
  fill: none;
  stroke: #e9dcc0;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-paper canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.draw-credit {
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.draw-credit a {
  text-decoration: underline;
}

/* ════ Battle ════ */
.battle-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  padding: 14px 20px;
  background: var(--red);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--ink);
  font: 1.6rem/1.2 var(--heading);
  text-align: center;
  transition: transform 0.18s;
}
.battle-banner:hover {
  transform: translateY(-3px) rotate(-1deg);
}
.battle-banner span {
  display: grid;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
}
.battle-banner b {
  font: 1.8rem/1.1 var(--heading);
}
.battle-banner img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.battle-banner-sensei {
  border: 3px solid var(--ink);
  border-radius: 50%;
  object-fit: cover !important;
  object-position: top;
  background: var(--paper);
}
.battle-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 18px 18px 26px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(57, 44, 32, 0.15) 0 40%, transparent 41%),
    linear-gradient(#fff6dc, var(--paper));
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.fighter {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.fighter-art {
  width: min(100%, 220px);
  height: 220px;
  object-fit: contain;
}
.fighter--sensei .fighter-art {
  width: min(100%, 180px);
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--ink);
  border-radius: 20px;
}
.hp {
  display: grid;
  gap: 4px;
  width: min(100%, 200px);
  margin: 0;
  font-weight: 700;
}
.hp-bar {
  display: block;
  height: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.hp-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: #4caf50;
  transition: width 0.4s;
}
.fighter--sensei .hp-bar span {
  background: var(--red);
}
.battle-bubble {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.battle-kana {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  margin: 0;
  font:
    700 4.5rem/1 'Kero Japanese',
    var(--body);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 5px 0 var(--ink);
}
.battle-kana.is-new {
  animation: battle-pop-in 0.35s ease-out;
}
.fighter--kero.is-attacking .fighter-art {
  animation: kero-lunge 0.6s ease-in-out;
}
.fighter--sensei.is-attacking .fighter-art {
  animation: sensei-lunge 0.6s ease-in-out;
}
.fighter.is-hit .fighter-art {
  animation: fighter-shake 0.5s 0.25s ease-in-out;
}
.battle-pop {
  position: absolute;
  top: 30%;
  margin: 0;
  font: 2rem/1 var(--heading);
  color: var(--red);
  opacity: 0;
  pointer-events: none;
}
.battle-pop[data-side='sensei'] {
  right: 18%;
}
.battle-pop[data-side='kero'] {
  left: 18%;
}
.battle-pop.is-popping {
  animation: damage-float 1s ease-out;
}
.battle-choices {
  margin-bottom: 10px;
}
.battle-log {
  min-height: 1.6em;
  margin: 8px 0 0;
  font-weight: 700;
  text-align: center;
}
.battle-using {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.battle-won .fighter--sensei .fighter-art {
  transform: rotate(80deg) translateY(30px);
  transition: transform 0.6s;
}
.battle-lost .fighter--kero .fighter-art {
  transform: rotate(-80deg) translateY(30px);
  transition: transform 0.6s;
}
.battle-room .learn-results {
  justify-content: center;
  text-align: center;
}
.battle-room .learn-result-actions {
  justify-content: center;
}
@keyframes kero-lunge {
  40% {
    transform: translateX(90px) rotate(12deg);
  }
}
@keyframes sensei-lunge {
  40% {
    transform: translateX(-90px) rotate(-8deg);
  }
}
@keyframes fighter-shake {
  20%,
  60% {
    translate: -10px 0;
  }
  40%,
  80% {
    translate: 10px 0;
  }
}
@keyframes damage-float {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
@keyframes battle-pop-in {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.1);
  }
}

@media (max-width: 640px) {
  .battle-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'bubble bubble' 'kero sensei';
  }
  .battle-bubble {
    grid-area: bubble;
  }
  .fighter--kero {
    grid-area: kero;
  }
  .fighter--sensei {
    grid-area: sensei;
  }
  .fighter-art {
    height: 140px;
  }
  .battle-kana {
    width: 104px;
    height: 104px;
    font-size: 3.6rem;
  }
  .battle-banner img {
    width: 60px;
    height: 60px;
  }
  .learn-draw {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .draw-stroke {
    animation: none;
    stroke-dashoffset: 0;
  }
  .draw-number {
    animation: none;
    opacity: 1;
  }
  .battle-kana.is-new,
  .fighter .fighter-art,
  .battle-pop.is-popping {
    animation: none !important;
  }
  .battle-pop.is-popping {
    opacity: 1;
  }
  .battle-banner,
  .hp-bar span {
    transition: none;
  }
}

/* ════ Read words ════ */
.learn-words {
  margin-top: 36px;
  padding: 26px 28px 26px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 18px 22px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
}
.learn-words .step-title {
  justify-content: flex-start;
}
.word-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 6px auto 14px;
}
.word-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
}
.word-meaning {
  margin: 0;
  font: 1.4rem/1.2 var(--heading);
}
.word-tiles {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 4px;
}
.word-tiles:focus {
  outline: none;
}
.word-tile {
  display: grid;
  place-items: center;
  width: 72px;
  height: 80px;
  font:
    700 2.8rem/1 'Kero Japanese',
    var(--body);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
}
.word-tile.is-blank {
  color: var(--red);
  background: var(--butter);
  border-style: dashed;
}
.word-tile.is-filled {
  background: #cfeccb;
  animation: battle-pop-in 0.35s ease-out;
}
.word-romaji {
  margin: 4px 0 6px;
  font: 1.4rem/1.2 var(--heading);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.learn-words .learn-results {
  justify-content: center;
}
.learn-words .learn-result-actions {
  justify-content: center;
}
.word-list {
  list-style: none;
  padding: 0;
  font-size: 1.2rem;
}
@media (max-width: 520px) {
  .word-tile {
    width: 54px;
    height: 62px;
    font-size: 2.1rem;
  }
  .word-tiles {
    gap: 5px;
  }
  .learn-words {
    padding: 20px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-tile.is-filled {
    animation: none;
  }
}

/* ════ Next lesson ════ */
.lesson-next {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ════ In this lesson: a plain table under the games (docs/pm-audit.md C6) ════ */
.lesson-table {
  max-width: 760px;
  margin: 36px auto 0;
}
.lesson-table h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.lesson-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 0.95rem;
}
.lesson-table th,
.lesson-table td {
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.lesson-table td:nth-child(3),
.lesson-table td:nth-child(4) {
  overflow-wrap: anywhere;
}
.lesson-table th:first-child,
.lesson-table td:nth-child(2) {
  white-space: nowrap;
}
.lesson-table thead th {
  border-top: 0;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
}
.lesson-table tbody th {
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
}
.lesson-table p {
  margin: 12px 0 0;
}
.learn-chart-link {
  display: flex;
  justify-content: center;
  margin: 22px 0 0;
}
.manga-word-links {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}
.manga-word-links h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}
.manga-word-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.manga-word-links a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 700;
  text-decoration: underline;
}

/* ════ The kana chart: tap to hear, and printable ════ */
.kana-chart-room h1 {
  font-family: var(--heading);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1;
}
.kana-chart-line {
  max-width: 34rem;
  margin-inline: auto;
}
.kana-chart-wrap {
  max-width: 640px;
  margin: 18px auto 0;
}
.kana-chart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}
.kana-chart thead th {
  font-size: 0.9rem;
  color: var(--muted);
}
.kana-chart .kana-chart-lesson {
  width: 3.4em;
  font-size: 0.7rem;
}
.kana-chart tbody th {
  text-align: center;
}
.kana-chart tbody th a {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 44px;
  font-weight: 800;
}
.kana-chart td {
  padding: 0;
}
.chart-cell {
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 2px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.chart-cell:hover,
.chart-cell:focus-visible {
  background: var(--yellow);
}
.chart-kana {
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.1;
}
.chart-romaji {
  font-size: 0.8rem;
  font-weight: 700;
}
.kana-chart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
@media print {
  .site-header,
  .site-footer,
  .consent-banner,
  .skip-link,
  .learn-back,
  .kana-chart-actions {
    display: none !important;
  }
  .kana-chart-room {
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
  }
  .chart-cell {
    background: #fff;
  }
}

/* ════ Learn landing ════ */
.learn-picks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.learn-pick {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 26px 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.18s;
}
.learn-pick:hover {
  transform: translateY(-4px) rotate(-1deg);
}
.learn-pick--katakana {
  background: #d9f0f2;
}
.learn-pick--numbers {
  background: #ffe9dc;
}
.learn-pick-big {
  font:
    700 clamp(2.2rem, 5vw, 3rem)/1.15 'Kero Japanese',
    var(--heading);
}
.learn-pick-title {
  font: 1.7rem/1.2 var(--heading);
}
.learn-pick-sub {
  font-weight: 700;
  color: var(--muted);
}

/* ════ Numbers and time ════ */
.learn-group + .learn-group {
  margin-top: 28px;
}
.learn-group-title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.learn-room--numbers .learn-tile-title {
  font-size: 1.35rem;
}
.learn-room--numbers .learn-tile-sub[lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
.lesson-head .lesson-title {
  font: clamp(2.4rem, 7vw, 4rem)/1.1 var(--heading);
  letter-spacing: 0;
}
.lesson-jp {
  font-family: 'Kero Japanese', var(--body);
  letter-spacing: 0.04em;
}
.time-prompt {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.time-prompt--number {
  font: clamp(3.5rem, 11vw, 5.5rem)/1 var(--heading);
}
.time-prompt-visual {
  display: grid;
  place-items: center;
}
.learn-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
}
.time-prompt-text {
  font: 1.7rem/1.2 var(--heading);
}
.clock {
  width: 130px;
  height: 130px;
}
.clock-face {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 4;
}
.clock-tick {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.clock-tick--big {
  stroke-width: 3.5;
}
.clock-hour,
.clock-minute {
  stroke: var(--ink);
  stroke-linecap: round;
}
.clock-hour {
  stroke-width: 6;
}
.clock-minute {
  stroke: var(--red);
  stroke-width: 4;
}
.clock-pin {
  fill: var(--ink);
}
.flash-jp {
  font:
    700 clamp(2.4rem, 8vw, 3.4rem)/1.15 'Kero Japanese',
    var(--body);
}
.mc-choice-main {
  display: block;
}
.mc-choice-main[lang='ja'] {
  font:
    700 1.6rem/1.25 'Kero Japanese',
    var(--body);
}
.learn-quiz .mc-choice {
  font-size: 1.25rem;
}
.battle-kana--text {
  width: auto;
  min-width: 130px;
  height: auto;
  min-height: 130px;
  padding: 12px 18px;
  border-radius: 28px;
  font: 1.6rem/1.2 var(--heading);
  text-align: center;
}
.battle-kana .time-prompt-text {
  font-size: 1rem;
}
.battle-show-main {
  display: block;
}
.battle-kana--text .battle-show-main:not(:has(*)) {
  font-size: 2rem;
  line-height: 1.1;
}
/* How a number's reading is said, under what Sensei shows. */
.battle-romaji {
  display: block;
  margin-top: 4px;
  font: 1.3rem/1.2 var(--heading);
  color: var(--red);
}
/* The kana battle shows a sound in romaji: letters, a little smaller than a kana. */
.battle-kana--sound {
  font: 3.3rem/1 var(--heading);
}
@media (max-width: 640px) {
  .battle-kana--sound {
    font-size: 2.7rem;
  }
}
.battle-kana .clock {
  width: 92px;
  height: 92px;
}
.learn-preview-card--numbers {
  background: #ffe9dc;
  transform: rotate(-1deg);
}
@media (max-width: 520px) {
  .clock {
    width: 110px;
    height: 110px;
  }
  .time-prompt-text {
    font-size: 1.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-pick {
    transition: none;
  }
  .learn-pick:hover {
    transform: none;
  }
}

/* Long "Next lesson: …" labels wrap on narrow phones instead of pushing the page wide. */
.learn-room .button {
  text-align: center;
}
.learn-room .button > span:first-child {
  flex-shrink: 1;
  min-width: 0;
}

.learn-quiz .mc-target-row {
  flex-wrap: wrap;
}
.sound-button--big {
  width: 96px;
  height: 96px;
  font-size: 2.6rem;
  margin-bottom: 18px;
}

/* ════ Drawn visuals ════ */
.speaker-icon {
  width: 26px;
  height: 26px;
}
.speaker-body {
  fill: var(--ink);
}
.speaker-waves {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.sound-button--big .speaker-icon {
  width: 48px;
  height: 48px;
}
.visual {
  display: block;
}
.visual--calendar {
  width: 110px;
  height: 110px;
}
.cal-page {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 3;
}
.cal-top {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 3;
}
.cal-ring {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.cal-day {
  font: 30px var(--heading);
  fill: var(--ink);
}
.visual--days,
.visual--span,
.visual--week {
  width: 250px;
  max-width: 100%;
  height: auto;
}
.tl-label {
  font: 700 11px var(--body);
  fill: var(--red);
}
.tl-box {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.tl-box--on {
  fill: var(--yellow);
}
.tl-today {
  fill: var(--red);
}
.tl-tick {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clock-wedge {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.clock-question {
  font: 48px var(--heading);
  fill: var(--red);
}
.battle-kana .learn-art,
.battle-kana .visual--calendar {
  width: 84px;
  height: 84px;
}
.battle-kana .visual--days,
.battle-kana .visual--span,
.battle-kana .visual--week {
  width: 150px;
}
@media (max-width: 520px) {
  .learn-art,
  .word-art,
  .visual--calendar {
    width: 96px;
    height: 96px;
  }
}

/* ════ The learning path (home page and /learn/) ════ */
.learn-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: none;
}
.learn-path-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'number big go'
    'number title go'
    'number line go'
    'number size go';
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 16px 18px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.18s;
}
.learn-path-step:hover {
  transform: translateY(-3px);
}
.learn-path-step--katakana {
  background: #d9f0f2;
}
.learn-path-step--numbers {
  background: #ffe9dc;
}
.learn-path-step--study {
  background: #e6f5dc;
}
.learn-path-number {
  grid-area: number;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding-top: 0.1em;
  font: 1.3rem/1 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.learn-path-step.is-done .learn-path-number {
  background: #9ccf7f;
}
.learn-path-big {
  grid-area: big;
  font:
    700 clamp(1.6rem, 5vw, 2.2rem)/1.15 'Kero Japanese',
    var(--heading);
}
.learn-path-title {
  grid-area: title;
  margin: 0;
  font: 1.45rem/1.15 var(--heading);
}
.learn-path-line {
  grid-area: line;
  line-height: 1.35;
}
.learn-path-size {
  grid-area: size;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted, #4a3a2a);
}
.learn-path-go {
  grid-area: go;
  font: 1.6rem/1 var(--heading);
}
.learn-preview--path {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.learn-preview--path .learn-path {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.learn-path-does {
  grid-area: does;
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted, #4a3a2a);
}
.learn-room--index .learn-path {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 8px 0 0;
}
.learn-room--index .learn-path-step {
  height: 100%;
  grid-template-areas:
    'number big go'
    'number title go'
    'number line go'
    'number does go'
    'number size go';
  align-content: start;
}
.learn-room--index .continue-box {
  margin: 12px 0 0;
}
.learn-steps-title {
  margin: 34px 0 16px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* ════ /learn/: Kero at his desk ════ */
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.learn-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  margin-bottom: 14px;
}
.learn-hero-copy > p:not(.eyebrow) {
  max-width: 40ch;
}
.learn-order {
  padding: 10px 14px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.learn-saved {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.learn-order {
  margin: 18px 0 8px;
}
.learn-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font-weight: 700;
}
/* A returning learner's Continue button is the one yellow button; the newcomer's start goes white. */
.learn-hero-copy:has(.continue-box:not([hidden])) .learn-new .button {
  background: var(--paper);
}
.study-scene {
  margin: 0;
  min-width: 0;
}
.study-scene-inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 3px solid var(--ink);
  border-radius: 26px 22px 28px 24px;
  box-shadow: 6px 6px 0 var(--ink);
  background: #f6e7c8;
  transform: rotate(1deg);
}
.study-scene-inner picture,
.study-scene-room,
.study-scene-desk,
.study-scene-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.study-scene-room,
.study-scene-desk img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Kero stands behind the desk; the desk's back edge is at 66.5% of the room's height. */
.study-scene-kero {
  position: absolute;
  left: 33.5%;
  top: 38%;
  width: 33%;
  height: auto;
  animation: kero-reads 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* The same room again, drawn only below the desk's back edge, in front of Kero. */
.study-scene-desk {
  clip-path: inset(66.5% 0 0 0);
}
.study-scene-sheet path {
  fill: none;
  stroke: #3f3226;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: kana-write 0.42s ease-in backwards;
}
.study-scene figcaption {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
}
.study-scene figcaption a {
  text-decoration: underline;
  white-space: nowrap;
}
@keyframes kero-reads {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  45% {
    transform: translateY(-4%) rotate(-2deg);
  }
  60% {
    transform: translateY(-3%) rotate(1.5deg);
  }
}
@keyframes kana-write {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 860px) {
  .learn-room--index .learn-path {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .learn-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .study-scene {
    order: -1;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}
/* On a phone the picture shows the right three quarters of the room: Kero and the sheet. */
@media (max-width: 560px) {
  .study-scene-inner {
    aspect-ratio: 9 / 8;
    transform: none;
  }
  .study-scene-inner > picture,
  .study-scene-desk,
  .study-scene-sheet {
    width: 133.4%;
    left: -33.4%;
  }
  .study-scene-kero {
    left: calc(33.5% * 1.334 - 33.4%);
    width: calc(33% * 1.334);
  }
}

/* ════ The home page's short Learn block ════ */
.learn-preview--compact {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-top: 40px;
  padding-block: 48px;
}
.learn-preview--compact h2 {
  margin-bottom: 14px;
}
.learn-preview--compact .learn-preview-copy > p {
  max-width: 36ch;
  font-weight: 700;
}
/* Two steps a row up to tablets (four in a row squeezed the names), wider cards beside the copy
   on a desktop. */
.learn-path--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 901px) {
  .learn-path--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
}
.learn-path--compact .learn-path-step {
  grid-template-areas:
    'number title go'
    'number size go';
  padding: 12px 14px;
}
.learn-path--compact .learn-path-number {
  align-self: center;
}
.learn-path--compact .learn-path-title {
  font-size: 1.25rem;
}
@media (max-width: 900px) {
  .learn-preview--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
/* On phones the number and arrow share the top line and the name gets the card's full width, so
   "Hiragana" and "Lessons 1-6" keep whole words from 320 px up. */
@media (max-width: 560px) {
  .learn-path--compact {
    gap: 10px;
  }
  .learn-path--compact .learn-path-step {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'number go'
      'title title'
      'size size';
    row-gap: 4px;
    padding: 10px 12px;
  }
  .learn-path--compact .learn-path-number {
    justify-self: start;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
  .learn-path--compact .learn-path-go {
    font-size: 1.3rem;
  }
  .learn-path--compact .learn-path-title {
    font-size: 1.15rem;
  }
}
.learn-games {
  margin-top: 40px;
}
.learn-games .section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
@media (max-width: 900px) {
  .learn-preview--path {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .learn-preview--path .learn-path {
    grid-template-columns: 1fr;
  }
  .learn-path-step {
    padding: 14px 14px;
    column-gap: 10px;
  }
}

/* One stroke after another, in stroke order: あ い う え お. */
.study-scene-sheet .stroke-0 {
  animation-delay: 0.8s;
}
.study-scene-sheet .stroke-1 {
  animation-delay: 1.25s;
}
.study-scene-sheet .stroke-2 {
  animation-delay: 1.7s;
}
.study-scene-sheet .stroke-3 {
  animation-delay: 2.15s;
}
.study-scene-sheet .stroke-4 {
  animation-delay: 2.6s;
}
.study-scene-sheet .stroke-5 {
  animation-delay: 3.05s;
}
.study-scene-sheet .stroke-6 {
  animation-delay: 3.5s;
}
.study-scene-sheet .stroke-7 {
  animation-delay: 3.95s;
}
.study-scene-sheet .stroke-8 {
  animation-delay: 4.4s;
}
.study-scene-sheet .stroke-9 {
  animation-delay: 4.85s;
}
.study-scene-sheet .stroke-10 {
  animation-delay: 5.3s;
}
.study-scene-sheet .stroke-11 {
  animation-delay: 5.75s;
}