/* kkaebistome.com: the app's colors and typefaces, light theme only, laid out the way game sites are: the art is the page,
   with big type and the book's own game UI (its System window) layered on it, never cards on a plain board. */
:root {
  --paper: #ffffff;
  --paper-2: #f5f6f9;
  --paper-3: #eceef3;
  --ink: #1e1b26;
  --ink-2: #46415a;
  --ink-3: #625d77;
  --mana: #2f4fb8;
  --mana-rgb: 47 79 184;
  --mana-50: #eef2fd;
  --mana-100: #dce4fa;
  --mana-300: #9fb2ee;
  --fire: #38bdf8;
  --rose: #a93359;
  --violet: #6343b8;
  --cinnabar: #a8361c;
  --jade: #1a6b5a;
  --amber: #8f5a08;
  --amber-50: #fdf3e1;
  --amber-100: #fae5bd;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --display: 'Hahmlet', 'AppleMyungjo', 'Nanum Myeongjo', serif;
  --gutter: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
/* A short page still ends with its footer at the bottom of the window. */
body > main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--mana); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[lang='ko'] { word-break: keep-all; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------- The cover ---------------- */

.hero { position: relative; }
.hero-art { position: relative; width: 100%; aspect-ratio: 2 / 3; max-height: 80vh; overflow: hidden; background: #efe6d6; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The picture fades into the page, and the title sits on the fade. */
.hero-art::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.72) 45%, #fff 88%);
}
.hero-text { position: relative; margin-top: -10.5rem; padding: 0 var(--gutter) 8px; }
.title-ko { font: 700 15px/1.6 var(--sans); color: var(--ink-2); letter-spacing: -0.01em; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 11.5vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin-top: 2px; white-space: nowrap; }
.tagline { font: italic 400 clamp(16px, 4.5vw, 24px)/1.35 var(--display); color: var(--ink-2); margin-top: 6px; }
.hook { font: 700 clamp(28px, 7.6vw, 42px)/1.14 var(--display); letter-spacing: -0.025em; margin-top: 34px; }
.hook span { display: block; }
.lede { font-size: 18px; color: var(--ink-2); margin-top: 14px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.soon {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--mana-50); color: var(--mana); font-weight: 700; font-size: 16.5px;
}
.soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 4px rgb(47 179 107 / 0.18); }
.listen {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--paper-3);
  background: var(--paper); color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer;
}
.listen:hover { border-color: var(--mana-300); }
.listen svg { width: 15px; height: 15px; fill: currentColor; }
.listen .pause, .listen[aria-pressed='true'] .play { display: none; }
.listen[aria-pressed='true'] .pause { display: block; }

@media (min-width: 1000px) and (min-aspect-ratio: 6/5) {
  .hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: min(100vh, 1080px); }
  .hero-art { height: min(100vh, 1080px); width: min(66.667vh, 720px, 58vw); max-height: none; aspect-ratio: auto; }
  .hero-art::after { inset: 0 0 0 auto; width: 30%; height: auto; background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.7) 55%, #fff 96%); }
  .hero-text { margin: 0; padding: 48px clamp(32px, 5vw, 80px) 48px 0; max-width: 680px; }
  /* Sized to the column, which is at most what's left beside the art: one line from a 1000-point window up. */
  .hero h1 { font-size: clamp(40px, 5vw, 72px); }
  .tagline { font-size: clamp(17px, 1.7vw, 24px); }
}

/* ---------------- You know the moment ---------------- */

/* The Prologue's first page, made for the site: 2 a.m., the translation has stopped, and the System hears her wish. Its
   window is laid over the drawing as the book lays it, the drawing shown whole like one big panel. */
.moment { position: relative; isolation: isolate; overflow: clip; padding: 88px 0 8px; }
.moment-word {
  position: absolute; z-index: -1; right: -0.05em; top: 40px; pointer-events: none; white-space: nowrap;
  font: 900 34vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--mana-rgb) / 0.16);
}
.moment-text, .moment-more { padding: 0 var(--gutter); }
.moment h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.1; max-width: 15em; }
.moment h2 i { font-style: normal; color: var(--rose); }
.moment-text p { margin-top: 16px; font: 400 clamp(19px, 5vw, 24px)/1.45 var(--display); color: var(--ink); max-width: 30em; }
.moment-art { margin-top: 34px; }
.shot { position: relative; container-type: inline-size; aspect-ratio: 2 / 3; overflow: hidden; background: #141a33; }
.shot picture, .shot img { display: block; width: 100%; height: 100%; }
.shot img { object-fit: cover; }
.sys-en { display: block; margin-top: 0.4em; font-weight: 500; font-size: 0.8em; line-height: 1.35; color: #3d4a85; }
.moment-more { margin-top: 30px; }
.moment-more p { max-width: 38em; color: var(--ink-2); }
.moment-more p + p { margin-top: 16px; }
.moment-more p:first-child { font-weight: 700; color: var(--ink); font-size: 18.5px; }

/* From 600 points the wide drawing takes over, framed like a manhwa panel, and the window moves where it left room. */
@media (min-width: 600px) {
  .moment-art { padding: 0 var(--gutter); }
  .shot { aspect-ratio: 3 / 2; border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgb(16 26 74 / 0.4); }
  .moment .sys { left: var(--dx); top: var(--dy); width: var(--dw); font-size: clamp(12px, 2.2cqw, 22px); }
}

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .moment {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); grid-template-rows: auto auto;
    column-gap: clamp(32px, 4vw, 72px); align-items: center; min-height: max(100svh, 640px);
    padding: 88px clamp(28px, 4vw, 76px) 64px;
  }
  .moment-word { top: auto; bottom: -0.17em; right: -0.04em; font-size: min(36svh, 19vw); }
  .moment-text, .moment-more { grid-column: 1; padding: 0; max-width: 620px; }
  .moment-text { align-self: end; }
  .moment-more { align-self: start; }
  .moment h2 { font-size: clamp(34px, 3.3vw, 56px); }
  .moment-text p { font-size: clamp(19px, 1.5vw, 24px); }
  .moment-art { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; }
  .shot { rotate: 1deg; }
}

/* ---------------- A scene from Lesson 11 ---------------- */

/* The scene read as a comic across a band of the System's blue, cut on the slant at both ends: a webtoon scrolled panel
   by panel on a phone, two panels to a row on a tablet held upright, and a manhwa page on a wider screen. */
.scene {
  position: relative; isolation: isolate; overflow: clip; margin-top: 72px;
  padding: calc(52px + 5vw) 0 calc(60px + 5vw); background: var(--mana); color: #fff;
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
/* Screentone, as on a manhwa page. */
.scene::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(circle, rgb(255 255 255 / 0.16) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(165deg, #000 10%, transparent 62%); mask-image: linear-gradient(165deg, #000 10%, transparent 62%);
}
/* Where the scene happens, huge and hollow. */
.scene-word {
  position: absolute; z-index: -1; top: calc(5vw + 6px); right: -0.05em; pointer-events: none; white-space: nowrap;
  font: 900 30vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / 0.2);
}
.scene-head { padding: 0 var(--gutter); }
.scene-tag {
  display: inline-block; padding: 6px 17px 5px 10px; background: #fff; color: var(--mana);
  font: 800 13.5px/1.35 var(--sans); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.scene h2 { margin-top: 12px; font-size: clamp(34px, 9vw, 64px); line-height: 1.04; letter-spacing: -0.045em; color: #fff; }
.scene-head p:not(.scene-tag) { margin-top: 14px; max-width: 34em; color: #e3e9ff; font-size: 17.5px; line-height: 1.6; }

.reel { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 34px; }
/* A panel, edge to edge on a phone as in a webtoon. */
.frame { position: relative; container-type: inline-size; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ink); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.bubble {
  --bw: clamp(1.6px, 0.6cqw, 2.6px);
  --len: clamp(12px, 5cqw, 24px);
  position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translateX(-50%);
  z-index: 2; isolation: isolate; display: flex;
}
.bubble-body {
  position: relative; flex: 1; display: grid; place-items: center; margin: 0;
  padding: 0.9em 13%; min-height: 3.3em; text-align: center; color: var(--ink);
  font: 700 5.6cqw/1.36 var(--sans); letter-spacing: -0.01em;
}
.bubble-body::before, .bubble-body::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.bubble-body::before { z-index: 1; inset: calc(var(--bw) * -1); border: var(--bw) solid var(--ink); }
.bubble-body::after { z-index: 2; inset: 0; }
.bubble-text { position: relative; z-index: 3; }
.tail { position: absolute; overflow: visible; pointer-events: none; top: 84%; height: calc(16% + var(--len)); width: 17%; }
.tail path { fill: #fff; }
.tail-line { z-index: 0; }
.tail-line path { stroke: var(--ink); stroke-width: calc(var(--bw) * 2); stroke-linejoin: round; }
.tail-fill { z-index: 2; }
/* Where the tail leaves the oval. One along the top (t, tl, tr) is its bottom twin turned upside down. A bubble on a
   world's drawing can point one way on the tall drawing (.m) and another on the wide one (.d, data-dtail). */
.t-b .tail:not(.d), .dt-b .tail.d { left: 41.5%; }
.t-bl .tail:not(.d), .dt-bl .tail.d { left: 26%; }
.t-br .tail:not(.d), .dt-br .tail.d { right: 26%; transform: scaleX(-1); }
.t-t .tail:not(.d), .t-tl .tail:not(.d), .t-tr .tail:not(.d), .dt-t .tail.d, .dt-tl .tail.d, .dt-tr .tail.d { top: auto; bottom: 84%; }
.t-t .tail:not(.d), .dt-t .tail.d { left: 41.5%; transform: scaleY(-1); }
.t-tl .tail:not(.d), .dt-tl .tail.d { left: 26%; transform: scaleY(-1); }
.t-tr .tail:not(.d), .dt-tr .tail.d { right: 26%; transform: scale(-1, -1); }
.tail.d { display: none; }
@media (min-width: 600px) { .tail.m { display: none; } .tail.d { display: block; } }
/* What the bubbles say, in English, under the panel. */
.sub { margin-top: 12px; padding: 0 var(--gutter); text-align: center; color: #fff; font: italic 400 19px/1.45 var(--display); text-wrap: balance; }
/* The book's narration, in a manhwa's caption box. */
.caption {
  margin: 22px var(--gutter) 0; padding: 14px 18px; background: #fff; color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 rgb(16 26 74 / 0.4); font-size: 16.5px; line-height: 1.5; text-wrap: pretty;
}
.scene-note { margin-top: 40px; padding: 0 var(--gutter); color: #e3e9ff; font-size: 15.5px; }

/* A tablet held upright, or any window from 600 points wide that isn't a computer's. */
@media (min-width: 600px) and (max-aspect-ratio: 1/1), (min-width: 600px) and (max-width: 899.98px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(18px, 3vw, 28px); padding: 0 var(--gutter); align-items: start; }
  .frame { border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgb(16 26 74 / 0.45); }
  .cut:nth-child(even) { margin-top: 48px; }
  .sub { padding: 0 4%; }
  .caption { margin: 14px 4% 0; rotate: -1.2deg; }
}

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .scene { padding: calc(56px + 3vw) clamp(28px, 4vw, 76px) calc(36px + 3vw); clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); }
  .scene-word { top: calc(3vw + 10px); font-size: min(34svh, 18vw); }
  /* On a wide screen the title, the strip and the note stay together in the middle. */
  .scene-head, .reel, .scene-note { max-width: 1560px; margin-left: auto; margin-right: auto; }
  .scene-head { padding: 0; }
  .scene h2 { font-size: clamp(40px, 4.4vw, 72px); }
  /* A page, not a row of cards: Mia's line is the big panel, standing tallest with focus lines bursting out behind it,
     and the others sit lower and tilted, just overlapping it. Offsets are in the strip's own width (cqw), so the page
     keeps its shape at every size. */
  .reel {
    position: relative; isolation: isolate; container-type: inline-size;
    grid-template-columns: 1fr 1.3fr 1fr 1fr; gap: 0; margin-top: 44px; padding: 0; align-items: start;
  }
  .reel::before {
    content: ''; position: absolute; z-index: -1; left: 38.4%; top: 24.3cqw; width: 60cqw; aspect-ratio: 1; translate: -50% -50%;
    pointer-events: none; background: repeating-conic-gradient(rgb(255 255 255 / 0.32) 0 0.7deg, transparent 0.7deg 4deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent 40%, #000 56%, transparent 100%);
    mask-image: radial-gradient(closest-side, transparent 40%, #000 56%, transparent 100%);
  }
  .cut { position: relative; z-index: 1; }
  .cut:nth-child(1) { margin-top: 6.5cqw; }
  .cut:nth-child(2) { z-index: 3; margin: 0 -1.1cqw; }
  .cut:nth-child(3) { z-index: 2; margin-top: 9.5cqw; }
  .cut:nth-child(4) { z-index: 2; margin: 4cqw 0 0 -1.4cqw; }
  .frame { border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgb(16 26 74 / 0.45); }
  .cut:nth-child(1) .frame { rotate: -2deg; }
  .cut:nth-child(2) .frame { rotate: 1deg; }
  .cut:nth-child(3) .frame { rotate: 2deg; }
  .cut:nth-child(4) .frame { rotate: -1.5deg; }
  .sub { margin-top: 16px; padding: 0 6%; font-size: clamp(15px, 1.2vw, 19px); }
  .caption { margin: 14px 5% 0; padding: 12px 14px; font-size: clamp(13.5px, 1.05vw, 16px); rotate: -1.2deg; }
  .scene-note { margin-top: 36px; padding: 0; }
}

/* Until a word is tapped, the first one glows now and then, so it's clear the words can be tapped. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.tapped) .cut:first-child .w { animation: hint 2.4s ease-in-out 1s infinite; }
}
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 0 rgb(56 189 248 / 0); } 50% { box-shadow: 0 0 0 6px rgb(56 189 248 / 0.5); } }

/* A Korean word you can tap, and what it means. */
.w {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-bottom: 2px dotted var(--mana-300); border-radius: 2px;
}
.w:hover, .w[aria-expanded='true'] { background: var(--mana-50); border-bottom-color: var(--mana); }
.gloss {
  position: absolute; z-index: 20; max-width: min(300px, calc(100vw - 24px));
  padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff;
  font: 500 15px/1.45 var(--sans); box-shadow: 0 10px 30px -10px rgb(30 27 38 / 0.6);
}
.gloss[hidden] { display: none; }
.gloss > b { display: block; font-size: 18px; font-weight: 700; }
.gloss span { display: block; }
.gloss .meaning { font-size: 16px; color: #fff; margin-top: 2px; }
.gloss .form, .gloss .note { color: #d5d1e3; font-size: 14px; margin-top: 4px; }
.gloss .form b { color: #fff; }

/* ---------------- The five worlds ---------------- */

.worlds-intro { padding-top: 96px; padding-bottom: clamp(44px, 5.5vw, 76px); }
.worlds-intro h2 { font-size: clamp(30px, 7.6vw, 50px); max-width: 15em; margin-top: 12px; }
.worlds-intro p { color: var(--ink-2); margin-top: 14px; max-width: 40em; }
/* The five genres, like a game's world select: each in its Part's colour, a link down to its world. */
.world-nav { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 40px); margin-top: 30px; }
.world-nav a { display: flex; flex-direction: column-reverse; color: var(--c, var(--mana)); text-decoration: none; font: 800 13px/1.3 var(--sans); }
.world-nav b { font: 900 clamp(32px, 9vw, 58px)/1.02 var(--sans); letter-spacing: -0.05em; }
.world-nav a:hover b { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }

/* One screen a world: its scene drawn edge to edge, its Part's colour, and its genre in giant letters behind. */
.world { --c: var(--mana); --c-rgb: var(--mana-rgb); position: relative; isolation: isolate; overflow: clip; padding-bottom: 72px; background: var(--paper); }
.p2 { --c: var(--rose); --c-rgb: 169 51 89; }
.p3 { --c: var(--violet); --c-rgb: 99 67 184; }
.p4 { --c: var(--cinnabar); --c-rgb: 168 54 28; }
.p5 { --c: var(--jade); --c-rgb: 26 107 90; }
/* Screentone in the Part's colour, as on a manhwa page. */
.world::before {
  content: ''; position: absolute; z-index: -1; inset: 40% 0 0;
  background: radial-gradient(circle, rgb(var(--c-rgb) / 0.2) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 75%); mask-image: linear-gradient(to top, #000, transparent 75%);
}
.world-band { display: none; }

/* The picture with the scene's line laid over it: the tall drawing on a phone, edge to edge and fading into the page;
   the wide one beside the text on a wider screen. Each line sits where its drawing left room (--x, --y, --w on the
   tall one; --dx, --dy, --dw on the wide one). */
.world-art { position: relative; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent); mask-image: linear-gradient(to bottom, #000 84%, transparent); }
.plate { position: relative; container-type: inline-size; aspect-ratio: 2 / 3; }
.plate picture, .plate img { display: block; width: 100%; height: 100%; }
.plate img { object-fit: cover; background: #1d2440; }

/* The book's blue System window (ios/KoreanTextbook/Reader/Blocks/Strip.swift), with a glow so it floats: on a drawing
   (.sys), as Mia's status window, as the main quest, and around a question that's open. */
.sys, .status, .quest, .faq details[open] {
  border-radius: 6px; color: #1d2a5c;
  background: linear-gradient(172deg, rgb(244 247 255 / 0.97), rgb(225 233 253 / 0.97));
  border: 1.5px solid #6f8ae6;
  box-shadow: 0 0 0 3px rgb(111 138 230 / 0.2), 0 0 26px rgb(128 164 255 / 0.6), 0 6px 18px rgb(47 79 184 / 0.22);
}
.sys {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translateX(-50%); z-index: 2;
  margin: 0; padding: 0.6em 0.9em; text-align: center; font: 700 clamp(12px, 3.7cqw, 20px)/1.4 var(--sans);
}

/* A speech bubble or a narration box laid on a world's drawing, sized to the drawing it sits on. */
.world .bubble-body { font-size: 4.6cqw; }
.cap {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translateX(-50%); z-index: 2;
  margin: 0; padding: 0.5em 0.8em; background: #fff; color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgb(16 26 74 / 0.35); text-align: center; font: 700 4.6cqw/1.4 var(--sans);
}

/* The genre's name, huge and hollow. */
.world-word {
  position: absolute; z-index: 0; right: -0.05em; top: calc(150vw - 1.02em); pointer-events: none; white-space: nowrap;
  font: 900 31vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--c-rgb) / 0.22);
}

.world-panel { position: relative; z-index: 2; margin-top: -84px; padding: 0 var(--gutter); }
/* A System window's thick corners. */
.world-lesson::before, .world-lesson::after, .world-panel::before, .world-panel::after {
  content: ''; position: absolute; width: 18px; height: 18px; border: 0 solid var(--c); pointer-events: none;
}
.world-lesson::before, .world-panel::before { top: -5px; right: -5px; border-width: 4px 4px 0 0; }
.world-lesson::after, .world-panel::after { bottom: -5px; left: -5px; border-width: 0 0 4px 4px; }
.world-panel::before, .world-panel::after { display: none; }
.part-tag {
  display: inline-block; padding: 6px 17px 5px 10px; background: var(--c); color: #fff;
  font: 800 13.5px/1.35 var(--sans); letter-spacing: 0.02em; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.world-title {
  margin-top: 8px; font: 900 clamp(54px, 16vw, 84px)/0.98 var(--sans); letter-spacing: -0.05em; color: var(--c);
  text-shadow: 0.05em 0.05em 0 rgb(var(--c-rgb) / 0.15);
}
.world-en { margin-top: 8px; font: 700 19px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink-3); }
.genre { margin-top: 3px; font: 700 15px/1.45 var(--sans); color: var(--c); }
.world-story { margin-top: 16px; font-size: 17px; line-height: 1.62; color: var(--ink); }
/* The line from the lesson and what it teaches, in a System window's corners. */
.world-lesson { position: relative; margin-top: 24px; padding: 18px 18px 17px; background: #fff; border: 1.5px solid rgb(var(--c-rgb) / 0.45); }
.world-lesson::before, .world-lesson::after { border-color: var(--c); }
.say { font: 800 20px/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.world-lesson p + p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.world-lesson b { color: var(--c); font-weight: 800; }
.world-quest { margin: 16px 0 0; }
.world-quest > div { padding: 12px 0 11px; border-top: 1.5px dashed rgb(var(--c-rgb) / 0.3); }
.world-quest dt { font: 800 13px/1.5 var(--sans); color: var(--c); }
.world-quest dd { margin: 2px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* The boss reward, in the app's reward-window colours. */
.reward dt { color: var(--amber); }
.reward dd b { display: inline-block; margin-right: 6px; padding: 0 8px; background: var(--amber-50); box-shadow: inset 0 0 0 1px var(--amber-100); color: #4d3205; font-weight: 800; }

/* An upright tablet takes the wide drawing, whole, above the text: the tall one would be taller than its screen. */
@media (min-width: 600px) and (max-aspect-ratio: 1/1), (min-width: 600px) and (max-width: 899.98px) {
  .plate { aspect-ratio: 3 / 2; }
  .world .sys { left: var(--dx); top: var(--dy); width: calc(var(--dw) * 1.25); font-size: 2cqw; }
  .world .bubble, .cap { left: var(--dx); top: var(--dy); width: calc(var(--dw) * 1.25); }
  .world .bubble-body, .cap { font-size: 2.1cqw; }
  .world-word { top: calc(66.67vw - 1.02em); }
}

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .world {
    --pw: clamp(380px, 35%, 580px); --pm: clamp(28px, 4vw, 76px); --gap: clamp(32px, 3vw, 56px);
    min-height: max(100svh, 640px); padding: 0; display: flex; align-items: center; justify-content: flex-end;
  }
  .world::before { inset: 0 0 0 46%; -webkit-mask-image: linear-gradient(225deg, #000, transparent 60%); mask-image: linear-gradient(225deg, #000, transparent 60%); }
  /* The scene fills the screen's height and runs off its left edge, cut on the slant like a manhwa panel, with a band of
     the Part's colour along the cut. */
  .world-art, .world-band {
    position: absolute; inset: 0 auto 0 0; width: calc(100% - var(--pw) - var(--pm) - var(--gap) - 14px);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }
  .world-art { container-type: size; -webkit-mask-image: none; mask-image: none; }
  .world-band { display: block; translate: 14px 0; background: var(--c); }
  /* The wide drawing covers the panel and keeps its own shape, so the lines laid on it stay where the drawing left room;
     --fx is the point across it that the panel centres on. */
  .plate {
    position: absolute; top: 50%; translate: 0 -50%; aspect-ratio: 3 / 2; width: max(100cqw, 150cqh);
    left: clamp(100cqw - max(100cqw, 150cqh), 50cqw - var(--fx, 0.5) * max(100cqw, 150cqh), 0px);
  }
  .world .sys { left: var(--dx); top: var(--dy); width: var(--dw); font-size: clamp(13px, 1.6cqw, 24px); }
  .world .bubble, .cap { left: var(--dx); top: var(--dy); width: var(--dw); }
  .world .bubble-body, .cap { font-size: clamp(14px, 1.65cqw, 25px); }
  .cap { border-width: 2.5px; box-shadow: 5px 5px 0 rgb(16 26 74 / 0.35); }
  .world-word { top: auto; bottom: -0.17em; right: -0.04em; font-size: min(38svh, 19vw); }
  .world-panel {
    width: var(--pw); margin: 52px var(--pm) 52px 0; padding: 32px 28px 16px;
    background: rgb(255 255 255 / 0.95); border: 1.5px solid var(--c);
  }
  .world-panel::before, .world-panel::after { display: block; border-color: var(--c); }
  .part-tag { position: absolute; top: -15px; left: 22px; }
  .world-title { margin-top: 0; font-size: clamp(52px, 4.8vw, 92px); }
  .world-en { margin-top: 6px; }
  .world-story { margin-top: 12px; font-size: 16px; line-height: 1.58; }
  .world-lesson { margin-top: 20px; padding: 0; background: none; border: 0; }
  .world-lesson::before, .world-lesson::after { display: none; }
  .say { font-size: 24px; line-height: 1.25; }
  .world-lesson p + p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
  .world-quest { margin-top: 10px; }
  .world-quest > div { padding: 9px 0 8px; }
  .world-quest dd { font-size: 14.5px; line-height: 1.5; }
}

/* Each world's text rises in as it scrolls into view, and the line on its drawing pops up. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .world-panel { animation: rise linear both; animation-timeline: view(); animation-range: entry 0 entry 160px; }
    .world .sys, .world .bubble, .cap { animation: pop linear both; animation-timeline: view(); animation-range: entry 0 entry 120px; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 40px; } }
@keyframes pop { 0% { opacity: 0; scale: 0.5; } 70% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }

/* ---------------- What's inside ---------------- */

/* Mia's own status window in Lesson 12, laid on the picture of her reading it, beside what the book holds. The picture's
   white drops away (multiply), so the page's dots and the giant word show through around her. */
.inside { position: relative; isolation: isolate; overflow: clip; padding: 88px 0 24px; }
.inside::before {
  content: ''; position: absolute; z-index: -1; inset: 30% 0 0;
  background: radial-gradient(circle, rgb(var(--mana-rgb) / 0.18) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(20deg, #000, transparent 60%); mask-image: linear-gradient(20deg, #000, transparent 60%);
}
.inside-word {
  position: absolute; z-index: -1; left: -0.04em; top: 64px; pointer-events: none; white-space: nowrap;
  font: 900 31vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--mana-rgb) / 0.2);
}
.inside-art { position: relative; container-type: inline-size; max-width: 900px; margin: 0 auto; }
.inside-art img { width: 100%; mix-blend-mode: multiply; }
/* The window she's staring at, in the book's System style, over the blank one in the picture. */
.status { position: absolute; left: 57%; top: 5%; width: 41%; z-index: 2; padding: 0.7em 0.9em 0.8em; font: 700 3.5cqw/1.45 var(--sans); }
.status-title, .quest-title { margin-bottom: 0.3em; padding-bottom: 0.3em; border-bottom: 1px solid rgb(111 138 230 / 0.5); text-align: center; }
.inside .caption { position: relative; z-index: 2; margin: 4px var(--gutter) 0; rotate: -1.2deg; }
.caption-en { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.9em; }
.inside-text { margin-top: 30px; padding: 0 var(--gutter); }
.inside-tag { font: 800 15px/1.4 var(--sans); color: var(--mana); }
.inside h2 { margin-top: 8px; font-size: clamp(30px, 7.6vw, 50px); }
.inside .intro { margin-top: 14px; max-width: 36em; color: var(--ink-2); }
/* What the book holds, set out like the lines of a status window. */
.stats, .skills { list-style: none; margin: 0; padding: 0; }
.stats { margin-top: 24px; }
.stats li, .skills li { padding: 14px 0 13px; border-top: 1.5px dashed rgb(var(--mana-rgb) / 0.3); color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.stats b { display: block; margin-bottom: 4px; font: 900 46px/1 var(--sans); letter-spacing: -0.04em; color: var(--mana); }
.skills b { margin-right: 4px; font-weight: 800; color: var(--mana); }

@media (min-width: 600px) and (max-aspect-ratio: 1/1), (min-width: 600px) and (max-width: 899.98px) {
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .inside {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px);
    min-height: max(100svh, 640px); padding: 72px clamp(28px, 4vw, 76px);
  }
  .inside::before { inset: 0 50% 0 0; }
  .inside-word { top: auto; bottom: -0.17em; font-size: min(36svh, 19vw); }
  /* The picture's left fifth is blank paper, so it can hang off the column there and Mia comes out larger. */
  .inside-art { width: 124%; max-width: none; margin: 0 0 0 -22%; }
  .status { font-size: 3cqw; }
  .inside .caption { position: absolute; left: 60%; right: 0; top: 70%; margin: 0; padding: 0.7em 0.85em; font-size: clamp(13px, 2.3cqw, 16px); }
  .inside-text { max-width: 660px; margin: 0; padding: 0; }
  .inside h2 { font-size: clamp(36px, 3.4vw, 58px); }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .stats b { font-size: clamp(42px, 3.6vw, 60px); }
}

/* ---------------- The promise ---------------- */

/* The book's own promise, from Lesson 0: Kkaebi unrolls the map of the book for Mia, who still can't read it, and the
   road on it runs on down the page, stop by stop, to the main quest. The picture's white drops away, as in What's inside. */
.promise { position: relative; isolation: isolate; overflow: clip; padding: 96px 0 8px; }
.promise-word {
  position: absolute; z-index: -1; right: -0.05em; top: 52px; pointer-events: none; white-space: nowrap;
  font: 900 34vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--mana-rgb) / 0.16);
}
.promise-text { padding: 0 var(--gutter); }
.promise h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.1; max-width: 14em; }
.promise blockquote { margin: 18px 0 0; font: 400 clamp(19px, 5vw, 24px)/1.48 var(--display); color: var(--ink); max-width: 31em; }
.promise cite { display: block; margin-top: 10px; font: 600 15px/1.4 var(--sans); font-style: normal; color: var(--ink-3); }
.promise-art { position: relative; container-type: inline-size; max-width: 640px; margin: 22px auto 0; }
/* Room above the picture for Mia's bubble. */
.promise-art img { width: 100%; margin-top: 13cqw; mix-blend-mode: multiply; }
.promise .bubble-body { font-size: clamp(14px, 3.6cqw, 21px); }
/* The road on the map, each stop's lesson big, joined by the map's own dashes. */
.road { list-style: none; margin: 36px var(--gutter) 0; padding: 0; }
.road li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding-bottom: 26px; }
.road li::before { content: ''; position: absolute; z-index: -1; left: 30px; top: 52px; bottom: 4px; border-left: 3px dashed var(--mana-300); }
.road b { font: 900 46px/1 var(--sans); letter-spacing: -0.04em; color: var(--mana); text-align: center; }
.road p { color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.road strong { color: var(--ink); font-weight: 800; }
/* The main quest at the end of the road. Its last line is the book's whole policy on time. */
.quest { max-width: 560px; margin: 0 var(--gutter); padding: 0.8em 1.1em 1em; font: 700 17px/1.45 var(--sans); }
.quest p + p { margin-top: 0.6em; }
.quest .sys-en { margin-top: 0.1em; font-size: 0.88em; }
.promise .after { margin: 30px var(--gutter) 0; color: var(--ink-2); max-width: 38em; }

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  /* The text and the picture, the road across the page, and the quest under the road's end, with the giant word in the
     corner the road leaves free. */
  .promise {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'text art' 'road road' '. quest' '. after';
    column-gap: clamp(32px, 4vw, 72px); align-items: center; padding: 96px max(clamp(28px, 4vw, 76px), (100% - 1560px) / 2) 40px;
  }
  .promise-word { top: auto; bottom: -0.17em; right: auto; left: -0.04em; font-size: min(36svh, 19vw); }
  .promise-text { grid-area: text; padding: 0; max-width: 640px; }
  .promise h2 { font-size: clamp(36px, 3.4vw, 58px); }
  .promise blockquote { font-size: clamp(19px, 1.5vw, 24px); }
  .promise-art { grid-area: art; width: 100%; max-width: 680px; margin: 0; justify-self: center; }
  /* Across the page, the dashes run from each stop to the next. */
  .road { grid-area: road; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 48px); margin: 44px 0 0; }
  .road li { display: block; padding: 0; }
  .road li::before { left: 0; right: calc(-1 * clamp(24px, 2.6vw, 48px)); top: 0.42em; bottom: auto; border-left: 0; border-top: 3px dashed var(--mana-300); font-size: clamp(48px, 4.4vw, 72px); }
  .road li:last-child::before { right: 0; }
  .road b { display: inline-block; padding-right: 14px; background: var(--paper); font-size: clamp(48px, 4.4vw, 72px); text-align: left; }
  .road p { margin-top: 12px; font-size: clamp(14.5px, 1.1vw, 16.5px); }
  .quest { grid-area: quest; width: 100%; margin: 48px 0 0; }
  .promise .after { grid-area: after; margin: 22px 0 0; max-width: 560px; }
}

/* ---------------- The price ---------------- */

/* The two ways to have the book, named as a Korean webtoon app names them: 무료, free, and 소장, to keep. Keeping it is a
   band of the System's blue, cut on the slant like the scene's. */
.price { position: relative; margin-top: 88px; }
.tier { position: relative; isolation: isolate; overflow: clip; padding: 0 var(--gutter); }
.tier-word {
  position: absolute; z-index: -1; right: -0.05em; top: -0.1em; pointer-events: none; white-space: nowrap;
  font: 900 34vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--mana-rgb) / 0.16);
}
.price h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.1; max-width: 11em; }
.tier h3 { margin-top: 30px; font-size: 21px; letter-spacing: -0.02em; }
.amount { margin-top: 4px; font: 900 clamp(64px, 18vw, 104px)/1 var(--sans); letter-spacing: -0.05em; color: var(--mana); }
.amount small { margin-left: 6px; font: 800 21px/1 var(--sans); letter-spacing: -0.01em; }
.tier .what { margin-top: 14px; max-width: 34em; color: var(--ink-2); }
.whole {
  margin-top: 48px; padding-top: calc(28px + 5vw); padding-bottom: calc(48px + 5vw); background: var(--mana); color: #fff;
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
.whole .tier-word { top: calc(5vw - 0.04em); -webkit-text-stroke-color: rgb(255 255 255 / 0.22); }
.whole h3 { margin-top: 0; }
.whole .amount { color: #fff; }
.whole .what { color: #e3e9ff; }

/* On a wide screen the two sit side by side, the blue one cut on the slant where they meet, and their lines share rows
   (a subgrid), so the two names, the two prices and the two lists line up across the cut. */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  /* The giant words sit in room kept for them under the text (--ws is their size), so they never run into it. */
  .price {
    --ws: min(30svh, 15vw, 340px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr;
    min-height: min(86svh, 760px); margin-top: 104px;
  }
  .tier { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 72px clamp(28px, 4vw, 76px) calc(var(--ws) * 0.86 + 8px); }
  .tier h2 { grid-row: 2; }
  .tier h3 { grid-row: 3; }
  .amount { grid-row: 4; }
  .tier .what { grid-row: 5; }
  .tier-word { top: auto; bottom: -0.17em; font-size: var(--ws); }
  .free .tier-word { right: auto; left: -0.04em; }
  .free { padding-right: calc(clamp(28px, 4vw, 76px) + 3vw); }
  .whole { margin: 0 0 0 -6vw; padding-left: calc(clamp(28px, 4vw, 76px) + 9vw); clip-path: polygon(6vw 0, 100% 0, 100% 100%, 0 100%); }
  .whole h3 { margin-top: 30px; }
  .whole .tier-word { top: auto; }
  .price h2 { font-size: clamp(36px, 3.4vw, 58px); }
  .amount { font-size: clamp(76px, 7vw, 124px); }
  .tier .what { font-size: clamp(16px, 1.15vw, 18px); }
}

/* ---------------- Questions ---------------- */

.questions { position: relative; isolation: isolate; overflow: clip; padding: 96px var(--gutter) 8px; }
.questions-word {
  position: absolute; z-index: -1; right: -0.05em; top: 52px; pointer-events: none; white-space: nowrap;
  font: 900 34vw/1 var(--sans); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(var(--mana-rgb) / 0.16);
}
.questions h2 { font-size: clamp(30px, 8vw, 50px); }
.faq { margin-top: 28px; max-width: 820px; }
.faq details { padding: 0 14px; border-top: 1.5px dashed rgb(var(--mana-rgb) / 0.3); }
.faq details:last-child { border-bottom: 1.5px dashed rgb(var(--mana-rgb) / 0.3); }
/* An open question becomes a System window in its own row's place, so nothing moves and the window keeps the page's
   margin, and the next one's dashes give way to its edge. */
.faq details[open] { margin: 6px 0; }
.faq details[open] + details { border-top-color: transparent; }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 19px 50px 19px 0; font-weight: 700; font-size: 18px; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
/* Its key: a square, like the System's own buttons. */
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--mana); color: var(--mana); font: 700 21px/1 var(--sans);
}
.faq summary:hover::after { background: var(--mana-50); }
.faq details[open] summary::after { content: '−'; background: var(--mana); color: #fff; }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 40em; }

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .questions {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 4vw, 72px); align-items: start;
    padding: 120px max(clamp(28px, 4vw, 76px), (100% - 1560px) / 2) 40px;
  }
  .questions-word { top: auto; bottom: -0.17em; right: auto; left: -0.04em; font-size: min(36svh, 19vw); }
  .questions h2 { position: sticky; top: 64px; font-size: clamp(36px, 3.4vw, 58px); }
  .faq { margin-top: 0; }
}

/* A giant word sits behind headings and pictures, never behind the text you read. On an upright tablet a third of the
   width would reach down into the first paragraph, so there they stop at the heading's size. */
@media (min-width: 600px) and (max-aspect-ratio: 1/1), (min-width: 600px) and (max-width: 899.98px) {
  .moment-word, .scene-word, .promise-word, .tier-word, .questions-word { font-size: 160px; }
}

/* ---------------- Foot ---------------- */

.foot { margin-top: 96px; padding: 40px 0 48px; background: var(--paper-2); color: var(--ink-3); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; }
.foot nav a { color: var(--ink); text-decoration: none; }
.foot nav a:hover { color: var(--mana); }
.foot p { margin-top: 14px; }
.foot .small { font-size: 13.5px; }
.foot a.plain { color: inherit; }

/* ---------------- Inner pages (privacy, support, credits) ---------------- */

.top { padding: 22px 0; border-bottom: 1px solid var(--paper-3); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.doc { max-width: 720px; padding-top: 48px; }
.doc h1 { font-size: clamp(34px, 8vw, 46px); }
.doc .updated { margin-top: 10px; color: var(--ink-3); font-size: 15px; }
.doc h2 { font-size: 23px; margin-top: 38px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 12px 0 0; }
.doc li + li { margin-top: 6px; }
.doc .lead { font-size: 19px; color: var(--ink); margin-top: 18px; }
.doc .mail { display: inline-block; margin-top: 14px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }