/* generated by build.mjs from src/ — edit the sources, not this file */

/* ---------------------------------------------------------------- src/css/00-base.css */
/* animalbar — 야시장 좌판 (Night Market Stall) */

/* ============================================================ pixel fonts
   Galmuri (© Lee Minseo, SIL OFL 1.1) subset to KS X 1001 Hangul + everything on the page by
   tools/subset_fonts.py → assets/fonts/ (232 KB instead of the full 2.1 MB). The OFL reserves the
   name "Galmuri", so the subsets are called "AB Pixel …". A syllable outside the subset falls back to
   the full Galmuri on jsDelivr, which downloads only then (unicode-range = Hangul syllables).
   No local() sources: a local lookup of a font that isn't installed is slow in Chrome on macOS. */
@font-face { font-family: "AB Pixel 11"; font-weight: 400; font-display: swap; src: url(assets/fonts/abpixel11.woff2) format("woff2"); }
@font-face { font-family: "AB Pixel 11"; font-weight: 700; font-display: swap; src: url(assets/fonts/abpixel11-bold.woff2) format("woff2"); }
@font-face { font-family: "AB Pixel Mono 11"; font-weight: 400; font-display: swap; src: url(assets/fonts/abpixelmono11.woff2) format("woff2"); }
@font-face { font-family: "Galmuri11"; font-weight: 400; font-display: swap; unicode-range: U+AC00-D7A3; src: url(https://cdn.jsdelivr.net/npm/galmuri@2.40.3/dist/Galmuri11.woff2) format("woff2"); }
@font-face { font-family: "Galmuri11"; font-weight: 700; font-display: swap; unicode-range: U+AC00-D7A3; src: url(https://cdn.jsdelivr.net/npm/galmuri@2.40.3/dist/Galmuri11-Bold.woff2) format("woff2"); }
@font-face { font-family: "GalmuriMono11"; font-weight: 400; font-display: swap; unicode-range: U+AC00-D7A3; src: url(https://cdn.jsdelivr.net/npm/galmuri@2.40.3/dist/GalmuriMono11.woff2) format("woff2"); }

:root {
  --night: #0a0706;
  --night-2: #110b08;
  /* text on the night and on dark wood, lifted so even the meta line reads at a glance.
     On --wood-2 (#45281a), the lightest dark surface text sits on: ink-hi 12 · ink 11 · ink-2 9.4 · ink-3 7:1
     (on --night: 17 · 16.5 · 14.1 · 10.5). Nothing on a dark surface uses a dimmer colour than --ink-3. */
  --ink-hi: #fff3da;   /* headings on the night */
  --ink: #f4e8cf;      /* reading text */
  --ink-2: #e6d7b8;    /* secondary sentences, captions, meta */
  --ink-3: #cdb995;    /* separators, the quietest label */

  --wood-0: #120a05;
  --wood-1: #2a170c;
  --wood-2: #45281a;
  --wood-3: #6a3f21;
  --wood-4: #8e5b30;
  --wood-5: #b07a45;

  --paper: #f2e5c6;
  --paper-2: #dfcb9f;
  --paper-ink: #3b2414;
  --paper-line: #4a2c17;
  --paper-mute: #694a2d;   /* secondary text on paper: 6.4:1 on --paper, 5:1 on --paper-2 */

  --amber: #ffb547;
  --amber-hi: #ffd388;
  --amber-lo: #c5681c;
  --lantern: #ff8a3a;
  --rust: #8f3420;
  --canvas: #d8bf8e;

  --teal: #4fdcc6;

  /* Only @font-face families and generic families here. Chrome on macOS spends 1–3 s on the first
     lookup of a family that isn't installed (Pretendard, -apple-system, "Noto Sans KR", ui-monospace…),
     which blocked the first paint. system-ui already gives SF + Apple SD Gothic Neo / Segoe UI + Malgun Gothic. */
  --px: "AB Pixel 11", "Galmuri11", system-ui, sans-serif;
  --px14: var(--px);  /* one pixel face only: the thin 14px cut is retired; alias kept so old rules resolve */
  --px9: var(--px);
  --mono: "AB Pixel Mono 11", "GalmuriMono11", monospace;
  --sans: "Pretendard Variable", system-ui, sans-serif;

  /* ---- type system: three voices, one ranking ------------------------------------------------
     pixel    AB Pixel 11 Bold, only at 24 · 36 · 48px (whole multiples of its 12px grid, so the pixels
              stay square — never 18, 20, 22, 30): every signboard and every heading that names a group
              (board dishes, shelf tags, sub-section planks, lantern steps), prices, the download buttons
     reading  Pretendard: every sentence, item title, label, chip, control, date and size
     mono     AB Pixel Mono 11: file names and version strings only
     Rank, the same on phones:
       hero 48 (finale line) > sign 36 (h2, one per section) > head 24 (h3 in a section)
       > item title 18 > lead 18 > body 16 > small 15 > label 14 > badge 13 (stickers only)
     Floors: sentences >= 15px, anything else >= 13px. */
  --t-hero: 700 48px/1.2 var(--px);
  --t-sign: 700 36px/1 var(--px);
  --t-head: 700 24px/1.25 var(--px);
  --t-display: var(--t-head);          /* alias: buttons and big numbers */
  --t-title: 700 18px/1.45 var(--sans);
  --t-title-s: var(--t-title);         /* alias: one item-title size */
  --t-lead: 400 18px/1.7 var(--sans);
  --t-body: 400 16px/1.7 var(--sans);
  --t-small: 400 15px/1.65 var(--sans);
  --t-label: 600 14px/1.35 var(--sans);
  --t-badge: 700 13px/1 var(--sans);
  --t-mono: 400 13px/1.4 var(--mono);

  /* ---- rhythm: the same stretch of quiet night before every section (phones: 112px) ---- */
  --sec-gap: 144px;
  --head-gap: 56px;   /* sign (+ intro) to the section's content */

  --notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --notch8: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  --tagshape: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 12px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px), 0 12px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 12px 4px);

  /* horizontal planks: highlight, seams, base */
  --plank: linear-gradient(var(--wood-5), var(--wood-5)) top / 100% 4px no-repeat,
           linear-gradient(var(--wood-1), var(--wood-1)) bottom / 100% 4px no-repeat,
           repeating-linear-gradient(90deg, transparent 0 84px, rgba(0, 0, 0, .14) 84px 88px, transparent 88px 200px, rgba(255, 220, 160, .06) 200px 204px, transparent 204px 300px),
           var(--wood-3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
a { color: var(--amber-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff3d6; }
strong { color: #fff4dc; font-weight: 700; }
code { font: 400 13px/1.5 var(--mono); background: #2b1d12; color: var(--amber-hi); padding: 2px 6px; white-space: nowrap; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; text-wrap: balance; }
.sec-sub { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; background: var(--paper); color: var(--paper-ink);
  font: var(--t-label); font-size: 14px; text-decoration: none;
}
.skip:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* pixel icons: the original white SVGs used as masks, so they take currentColor */
.ico {
  display: inline-block; flex: none;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--ico) center / 100% 100% no-repeat;
          mask: var(--ico) center / 100% 100% no-repeat;
}
.ico-lg { width: 32px; height: 32px; }
.ico-xl { width: 48px; height: 48px; }

/* ============================================================ string lights (drawn by app.js) */
.lights { position: absolute; left: 0; right: 0; top: 0; height: 170px; overflow: hidden; pointer-events: none; z-index: 2; }
.lights svg { position: absolute; left: 0; top: 0; overflow: visible; }
.lights .glow { mix-blend-mode: screen; }
.lights .flk { animation: flicker 3.2s steps(1, end) infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 1; }
  48% { opacity: .55; }
  52% { opacity: 1; }
  80% { opacity: .8; }
  83% { opacity: 1; }
}


/* ============================================================ shared: price tag (hero, worlds, download) — shape via clip-path; hole is a dark square */
.pricetag {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 20px;
  background: var(--paper); color: var(--paper-ink);
  font: 700 14px/1 var(--sans); white-space: nowrap;
  clip-path: var(--tagshape);
  box-shadow: inset 0 -4px 0 var(--paper-2);
}
.pricetag::before { content: ""; position: absolute; left: 8px; top: calc(50% - 2px); width: 4px; height: 4px; background: var(--night); }
.pricetag img { width: 16px; height: 16px; image-rendering: pixelated; }


/* ============================================================ sections
   Rhythm: every section opens after the same stretch of quiet night (--sec-gap: 144px, phones 112px), lit
   only by the lamp that hangs over its sign. Sections never set their own gap.
   Decoration budget for the whole page:
     · string lights exactly twice: under the top bar (hero) and over the finale (footer). Nowhere else.
     · one paper signboard per section (h2.sign) under its lamp, and at most one wooden plank (.minisign)
       per sub-group inside it. Nothing else hangs, glows or is scattered between sections. */
.sec { position: relative; padding: var(--sec-gap) 16px 0; }
.sec > :not(.lights) { max-width: 1120px; margin-left: auto; margin-right: auto; }
.sec-head { position: relative; text-align: center; margin-bottom: var(--head-gap); }
.sec-head::before {
  /* the lamp's light: a hot halo round the bulb, then a warm pool on the night wall that the sign and its
     intro stand in */
  content: ""; position: absolute; left: 50%; top: -140px; width: min(640px, 100%); height: 360px; transform: translateX(-50%);
  background:
    radial-gradient(circle 46px at 50% 68px, rgba(255, 196, 110, .22), transparent 100%),
    radial-gradient(ellipse 34% 32% at 50% 40%, rgba(255, 176, 90, .15), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 44%, rgba(255, 140, 60, .07), transparent 74%);
  pointer-events: none;
}
.sec-head::after {
  /* …and the lamp itself: one pixel bulb on a wire that drops out of the dark (wire, cap, bulb, glint) */
  content: ""; position: absolute; left: calc(50% - 8px); top: -140px; width: 16px; height: 80px; pointer-events: none;
  background:
    linear-gradient(transparent, #6b4d2f 70%) 6px 0 / 4px 58px no-repeat,
    linear-gradient(#2a1d14, #2a1d14) 3px 56px / 10px 6px no-repeat,
    linear-gradient(#fff6e2, #fff6e2) 4px 64px / 4px 4px no-repeat,
    linear-gradient(#ffd283, #ffd283) 0 62px / 16px 12px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 2px 74px / 12px 4px no-repeat,
    linear-gradient(var(--amber-lo), var(--amber-lo)) 5px 78px / 6px 2px no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 196, 100, .9)) drop-shadow(0 0 20px rgba(255, 150, 60, .55));
}
.sec-sub { position: relative; margin: 28px auto 0; max-width: 36em; font: var(--t-lead); color: var(--ink-2); }
.sec-sub b, .sec-sub strong { color: var(--ink-hi); font-weight: 700; }

/* section signboards (every h2.sign): one face, one weight, one size on every screen — like the game's
   피드백 보내기 board */
.sign { position: relative; display: inline-block; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); }
.sign::before, .sign::after {
  content: ""; position: absolute; top: -52px; height: 52px; width: 12px;
  background:
    linear-gradient(#d0b184, #d0b184) 4px 0 / 4px 4px no-repeat,
    linear-gradient(#2a1d14, #2a1d14) 0 0 / 12px 8px no-repeat,
    repeating-linear-gradient(180deg, #9a7650 0 4px, #5f4429 4px 8px) 4px 8px / 4px 100% no-repeat;
}
.sign::before { left: 20px; }
.sign::after { right: 20px; }
.sign > span {
  display: block; position: relative;
  padding: 19px 36px 17px;
  font: var(--t-sign); letter-spacing: 0; color: var(--paper-ink); white-space: nowrap;
  background: var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper-line), inset 0 -10px 0 0 var(--paper-2);
  clip-path: var(--notch);
}

/* sub-section heading: a small wooden plank in the pixel face (ranks under the paper sign, over item titles).
   Use it as <div class="subhead"><h3 class="minisign">…</h3><p class="subhead-note">…</p> [a link]</div>,
   or alone as h3.minisign. */
.minisign {
  display: inline-block; margin: 0;
  padding: 12px 18px 10px;
  font: var(--t-head); color: var(--ink-hi); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  background:
    linear-gradient(rgba(255, 214, 160, .16), rgba(255, 214, 160, .16)) top / 100% 4px no-repeat,
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)) bottom / 100% 4px no-repeat,
    var(--wood-2);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .2), inset -4px 0 0 rgba(0, 0, 0, .2);
  clip-path: var(--notch);
}
.subhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 2px solid rgba(255, 181, 71, .22);
}
.subhead-note { font: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.subhead-act { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: var(--t-label); font-weight: 500; }

/* ---- shared text roles (use these instead of new one-off sizes) */
.t-head { font: var(--t-head); color: var(--ink-hi); }
.t-title { font: var(--t-title); color: var(--ink-hi); }
.t-meta { font: var(--t-label); font-weight: 500; color: var(--ink-2); }
.t-file { font: var(--t-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font: var(--t-label); color: var(--ink); white-space: nowrap;
  background: rgba(255, 220, 160, .05); box-shadow: inset 0 0 0 1px rgba(241, 227, 198, .26);
}
/* stickers: the only 13px text. Teal = "this is for you" (focus colour family), amber = status */
.badge { display: inline-flex; align-items: center; padding: 4px 7px; font: var(--t-badge); color: #06221e; background: var(--teal); white-space: nowrap; }
.badge-amber { color: #2a1407; background: #f3c75a; }
.chip-teal { color: #06221e; background: var(--teal); box-shadow: none; }

/* ============================================================ shared: chalkboard (spare; the menu board draws its own) */
.board {
  position: relative;
  padding: 36px 36px 32px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 190, 110, .06), transparent 70%),
    #16110d;
  box-shadow:
    inset 0 0 0 2px rgba(255, 230, 190, .05),
    inset 0 0 50px rgba(0, 0, 0, .7),
    0 0 0 6px var(--wood-3),
    0 0 0 10px var(--wood-0),
    0 30px 60px -20px rgba(0, 0, 0, .8);
  margin: 10px;
}
.board::before {
  /* frame highlight on the top edge */
  content: ""; position: absolute; left: -6px; right: -6px; top: -6px; height: 2px; background: var(--wood-5);
}
.board-title {
  display: block; text-align: center;
  font: var(--t-head); color: var(--amber);
  text-shadow: 0 0 16px rgba(255, 170, 70, .3);
  padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 2px dashed rgba(241, 227, 198, .16);
}
.board-title small { display: block; margin-top: 10px; font: var(--t-small); color: var(--ink-2); text-shadow: none; }

/* ============================================================ shared: "my computer" badge (download crates, install manuals) */
.crate-mine {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 2;
  padding: 7px 12px; font: var(--t-badge); color: #06221e; background: var(--teal); white-space: nowrap;
  box-shadow: 0 0 18px rgba(79, 220, 198, .4);
}

/* ============================================================ lightbox */
.lightbox {
  width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.lightbox::backdrop { background: rgba(5, 3, 2, .88); }
.lb-close-form { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.lb-close { border: 0; cursor: pointer; padding: 10px 14px; font: var(--t-label); font-weight: 700; line-height: 1; color: #2a1407; background: var(--amber); }
.lb-frame { padding: 14px; background: var(--plank); box-shadow: 0 0 0 4px var(--wood-0); }
.lb-media { position: relative; overflow: hidden; aspect-ratio: 1710 / 376; background: #000; box-shadow: 0 0 0 4px var(--wood-0); }
.lb-media img, .lb-media video { position: absolute; left: 0; top: calc(-80 / 376 * 100%); display: block; width: 100%; height: auto; aspect-ratio: 1710 / 456; }
.lb-cap { margin-top: 14px; text-align: center; font: var(--t-small); color: var(--ink-2); }

/* ============================================================ responsive (shared parts only; sections keep their own) */
@media (max-width: 760px) {
  /* lightbox on phones: the wide scene keeps a readable height and pans sideways instead of shrinking to a strip */
  .lb-media {
    --lbh: min(50vh, 280px);
    height: var(--lbh); aspect-ratio: auto;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  .lb-media img, .lb-media video {
    position: static; max-width: none; width: auto;
    height: calc(var(--lbh) * 456 / 376); margin-top: calc(var(--lbh) * -80 / 376);
  }
  .lb-frame { padding: 8px; }
  .lb-close { min-height: 44px; padding: 0 18px; }
  .lb-cap::after { content: "옆으로 밀어서 장면 전체를 볼 수 있어요"; display: block; margin-top: 6px; font: var(--t-label); font-weight: 500; color: var(--ink-3); }
  :root { --sec-gap: 112px; --head-gap: 40px; }
  .sec-head::before { top: -112px; height: 300px; background:
      radial-gradient(circle 40px at 50% 46px, rgba(255, 196, 110, .22), transparent 100%),
      radial-gradient(ellipse 46% 34% at 50% 40%, rgba(255, 176, 90, .15), transparent 70%); }
  .sec-head::after { top: -132px; }
  /* phones: the very same 36px signboard (pixel faces only scale in whole steps), on shorter cords */
  .sign::before, .sign::after { top: -44px; height: 44px; }
  .sign > span { padding: 15px 22px 14px; }
  .sec-sub { margin-top: 20px; font-size: 16px; line-height: 1.65; word-break: keep-all; text-wrap: pretty; }
  .subhead { padding-bottom: 14px; gap: 10px 16px; }
  .subhead-act { min-height: 44px; }
  .board { padding: 28px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* the hero's 장면 멈추기 switch (html.motion-off) stops every looping animation too — flickering bulbs,
   lanterns, stars, mana bars — not just the videos (WCAG 2.2.2) */
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; }

/* ---------------------------------------------------------------- src/css/01-hero.css */
/* ============================================================ HERO — 야시장 좌판
   Every rule is scoped under .hero so nothing leaks into other sections.
   One focal point: the herd in the stall window, close up, with eggs dropping in as the keys press.
   Everything else (beam, nameboard, counter) frames it and stays quiet. */
.hero {
  position: relative;
  overflow: clip;
  padding: 0 16px 36px;
  background:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(255, 150, 60, .16), transparent 72%),
    radial-gradient(ellipse 30% 16% at 50% 8%, rgba(255, 170, 80, .14), transparent 75%),
    radial-gradient(ellipse 80% 26% at 50% 100%, rgba(120, 60, 20, .2), transparent 70%),
    linear-gradient(180deg, #040306 0%, #0a0708 46%, #0e0907 82%, var(--night) 100%);
  --nav-h: 48px;
}
.hero .tagline, .hero .lede, .hero .cta-more, .hero .trust { text-wrap: pretty; word-break: keep-all; }
.hero .night { position: absolute; inset: 0; pointer-events: none; }
.hero .bokeh { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .5; }
.hero .b1 { width: 90px; height: 90px; left: 3%; top: 58%; background: radial-gradient(circle, rgba(255, 150, 70, .55), transparent 65%); }
.hero .b2 { width: 54px; height: 54px; left: 8%; top: 78%; background: radial-gradient(circle, rgba(255, 196, 110, .5), transparent 65%); }
.hero .b3 { width: 120px; height: 120px; right: 1%; top: 62%; background: radial-gradient(circle, rgba(255, 120, 60, .45), transparent 65%); }
.hero .b4 { width: 46px; height: 46px; right: 7%; top: 44%; background: radial-gradient(circle, rgba(255, 210, 140, .5), transparent 65%); }
.hero .b5 { width: 70px; height: 70px; left: 5%; top: 34%; background: radial-gradient(circle, rgba(255, 170, 90, .3), transparent 65%); opacity: .35; }
.hero .b6 { width: 60px; height: 60px; right: 5%; top: 84%; background: radial-gradient(circle, rgba(255, 170, 90, .4), transparent 65%); }
.hero .stars {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent;
  box-shadow:
    60px 150px #8a7a66, 180px 230px #5e5246, 110px 300px #a08d72, 40px 380px #5e5246, 120px 460px #6e6052,
    1380px 160px #8a7a66, 1330px 260px #5e5246, 1400px 330px #a08d72, 1350px 420px #6e6052, 1410px 520px #5e5246,
    40px 560px #4c4238, 1400px 640px #4c4238, 90px 680px #5e5246, 1340px 720px #5e5246, 30px 760px #4c4238;
}
/* the light string hangs from the beam */
.hero > .lights { top: calc(var(--nav-h) + 4px); }

/* ------------------------------------------------------------ the market beam (top bar)
   A dark wooden beam the light string hangs from: brand on the left, the aisles, 다운로드 on the right.
   The slot keeps its height when the beam turns fixed, so the page never jumps. */
.hero .topbar-slot { position: relative; z-index: 8; min-height: var(--nav-h); margin: 0 -16px; }
.hero .topbar {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  min-height: var(--nav-h);
  padding: 0 max(12px, calc(50% - 604px));
  background:
    linear-gradient(rgba(255, 214, 160, .16), rgba(255, 214, 160, .16)) top / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 236px, rgba(0, 0, 0, .28) 236px 240px, transparent 240px 412px, rgba(255, 214, 160, .05) 412px 416px),
    linear-gradient(180deg, #2e1b0f, #1d1108);
  box-shadow: 0 4px 0 var(--wood-0);
}
.hero .tb-brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 44px; margin-right: auto; padding: 0 4px;
  text-decoration: none;
}
.hero .tb-brand img { display: block; image-rendering: pixelated; }
.hero .tb-acorn { width: 16px; height: 16px; }
.hero .tb-word { width: 152px; height: 22px; filter: drop-shadow(0 0 8px rgba(170, 255, 225, .16)); }
.hero .tb-links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hero .tb-links a, .hero .tb-dl {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  font: 600 15px/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hero .tb-links .ico, .hero .tb-dl .ico { color: var(--amber); }
.hero .tb-links a:hover, .hero .tb-dl:hover { color: var(--amber-hi); }
.hero .topbar a:focus-visible, .hero .tb-menu:focus-visible { outline-offset: -3px; }
.hero .tb-dl { position: relative; isolation: isolate; flex: none; margin-left: 4px; }
.hero .tb-menu {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 12px; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); color: var(--ink);
  background: rgba(255, 236, 205, .07);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 160, .18);
}
.hero .tb-menu[hidden], .hero .topbar:not(.menu-mode) .tb-menu { display: none; }
.hero .tb-menu:hover { color: #fff; background: rgba(255, 236, 205, .12); }
.hero .tb-menu[aria-expanded="true"] { color: #2a1407; background: var(--amber); box-shadow: none; }
.hero .tb-burger {
  width: 16px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat;
}

/* stuck: the beam rides along once the stall has scrolled away, with 다운로드 lit as a button */
.hero .topbar.is-stuck {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  box-shadow: 0 4px 0 var(--wood-0), 0 12px 28px rgba(0, 0, 0, .55);
  animation: hero-tb-in .2s steps(4, end) both;
}
@keyframes hero-tb-in { from { transform: translateY(-100%); } }
/* while the beam rides along, anchor jumps and keyboard focus stop below it, not under it */
html:has(.hero .topbar.is-stuck) { scroll-padding-top: 72px; }
/* at the top of the page the nameboard is the brand, so the beam carries only the aisles, centred */
.hero .topbar:not(.is-stuck) .tb-brand { display: none; }
.hero .topbar:not(.is-stuck) .tb-links { margin-left: auto; }
.hero .topbar:not(.is-stuck) .tb-dl { margin-right: auto; }
/* menu mode: 01-hero.js turns it on only when the aisles would not fit on the beam (phones; tablets once
   the brand joins the riding-along beam), so nothing is ever cut off. Without JS the aisles wrap instead. */
.hero .topbar.menu-mode .tb-links {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 12px; z-index: 2;
  width: min(380px, calc(100vw - 24px));
  grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px;
  background: linear-gradient(180deg, #2e1b0f, #1d1108);
  box-shadow: 0 0 0 4px var(--wood-0), 0 24px 48px rgba(0, 0, 0, .65);
}
.hero .topbar.menu-mode.is-open .tb-links { display: grid; }
.hero .topbar.menu-mode .tb-links a { width: 100%; min-height: 48px; background: rgba(255, 236, 205, .05); }
.hero .topbar.menu-mode .tb-links a:hover { background: rgba(255, 236, 205, .1); }
.hero .topbar.menu-mode .tb-dl, .hero .topbar.menu-mode.is-stuck .tb-dl { margin-left: 0; margin-right: 0; }
.hero .topbar.menu-mode.is-stuck .tb-menu { margin-right: 8px; }
/* top of the page: 목차 on the left (its menu drops from there), 다운로드 on the right;
   riding along: brand · 목차 · 다운로드. Same order as the markup, so focus follows what you see. */
.hero .topbar.menu-mode:not(.is-stuck) .tb-menu { margin-right: auto; }
.hero .topbar.menu-mode:not(.is-stuck) .tb-links { right: auto; left: 12px; }
@media (max-width: 720px) {
  .hero .topbar:not(.has-menu) { flex-wrap: wrap; justify-content: center; }
  .hero .topbar:not(.has-menu) .tb-links { display: contents; }
  .hero .topbar:not(.has-menu) .tb-dl { margin: 0; }
}

.hero .topbar.is-stuck .tb-dl { min-height: 36px; margin-left: 12px; padding: 0 16px; color: #2a1407; }
.hero .topbar.is-stuck .tb-dl::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--amber); box-shadow: inset 0 -4px 0 var(--amber-lo), inset 0 2px 0 var(--amber-hi);
  clip-path: var(--notch);
}
.hero .topbar.is-stuck .tb-dl .ico { color: currentColor; }
.hero .topbar.is-stuck .tb-dl:hover { color: #2a1407; }
.hero .topbar.is-stuck .tb-dl:hover::before { background: #ffc361; }

/* ------------------------------------------------------------ the stall
   --cx / --cw: the slice of the 1710×456 clip the window shows, in clip pixels. Over its 6 s loop the herd
   walks between x 440 and 1066, so the slice stays inside that: no combo meter (left), no shop or
   피드백 보내기 sign (right). --sky caps how many clip rows show above the ground (the clip's bottom edge),
   which keeps the cloud at y 265–288 out and spends the window on animals, not sky. */
.hero .stall {
  position: relative; z-index: 3;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-top: 40px;
  --cx: 452; --cw: 600; --sky: 160;
  --wh: clamp(200px, calc(100svh - 590px), 320px);
  --wm: 456px;   /* wordmark width: whole multiples of its 76px drawing (6×) */
  --egg: 32px;   /* the falling eggs: the 16px drawing at 2× */
}

/* name board — hangs from the light string, the wordmark lit like a neon sign on wood */
.hero .nameboard { position: relative; display: flex; justify-content: center; z-index: 4; margin-bottom: -16px; }
.hero .nameboard::before, .hero .nameboard::after {
  /* two ropes, each ending in an iron ring */
  content: ""; position: absolute; top: -40px; height: 48px; width: 12px;
  background:
    linear-gradient(#2a1d14, #2a1d14) 0 calc(100% - 4px) / 12px 4px no-repeat,
    linear-gradient(#c9a77a, #c9a77a) 4px calc(100% - 8px) / 4px 4px no-repeat,
    linear-gradient(#2a1d14, #2a1d14) 0 calc(100% - 12px) / 12px 4px no-repeat,
    repeating-linear-gradient(180deg, #9a7650 0 4px, #5f4429 4px 8px) 4px 0 / 4px calc(100% - 12px) no-repeat;
}
.hero .nameboard::before { left: calc(50% - var(--wm) / 2 + 4px); }
.hero .nameboard::after { right: calc(50% - var(--wm) / 2 + 4px); }
.hero .nameboard-board {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 40px 14px;
  background:
    radial-gradient(ellipse 58% 64% at 50% 42%, rgba(255, 176, 90, .14), transparent 72%),
    repeating-linear-gradient(180deg, transparent 0 36px, rgba(0, 0, 0, .3) 36px 40px),
    linear-gradient(180deg, #33190d, #241109);
  box-shadow:
    inset 0 4px 0 var(--wood-5),
    inset 0 -4px 0 var(--wood-1),
    inset 0 0 0 8px var(--wood-3),
    inset 0 0 0 12px var(--wood-0),
    0 0 0 4px var(--wood-0),
    0 24px 50px rgba(0, 0, 0, .6);
}
.hero .nameboard-board::before, .hero .nameboard-board::after {
  /* nails in the frame */
  content: ""; position: absolute; top: 2px; width: 4px; height: 4px; background: #e2c597;
}
.hero .nameboard-board::before { left: 2px; }
.hero .nameboard-board::after { right: 2px; }
.hero .wordmark {
  display: block; width: var(--wm); height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 2px rgba(255, 248, 230, .6)) drop-shadow(0 0 12px rgba(170, 255, 225, .22)) drop-shadow(0 0 30px rgba(255, 150, 60, .24));
}
.hero .nameboard-ko {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 14px/1 var(--sans); letter-spacing: .5em; padding-left: .5em; color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 170, 70, .45);
}
.hero .nb-acorn { display: block; width: 16px; height: 16px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(255, 170, 70, .35)); }
.hero .nb-acorn:first-child { margin-right: .1em; }

/* awning: wooden beam + striped canvas + pixel scallops */
.hero .awning { position: relative; z-index: 3; display: block; margin: 0 -36px; }
.hero .awning > span { display: block; }
.hero .awning-beam { height: 16px; background: var(--plank); box-shadow: 0 0 0 4px var(--wood-0); position: relative; z-index: 1; }
.hero .awning-cloth {
  height: 32px;
  background:
    radial-gradient(ellipse 50% 160% at 50% 0%, rgba(255, 200, 120, .26), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .06) 70%),
    repeating-linear-gradient(90deg, var(--rust) 0 48px, var(--canvas) 48px 96px);
}
.hero .awning-scallop {
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 7' shape-rendering='crispEdges'%3E%3Cg fill='%23120a05'%3E%3Crect x='0' y='1' width='24' height='2'/%3E%3Crect x='1' y='3' width='10' height='2'/%3E%3Crect x='13' y='3' width='10' height='2'/%3E%3Crect x='2' y='5' width='8' height='1'/%3E%3Crect x='14' y='5' width='8' height='1'/%3E%3Crect x='4' y='6' width='4' height='1'/%3E%3Crect x='16' y='6' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%23862f1c'%3E%3Crect x='0' y='0' width='12' height='2'/%3E%3Crect x='1' y='2' width='10' height='2'/%3E%3Crect x='2' y='4' width='8' height='1'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%23cdb383'%3E%3Crect x='12' y='0' width='12' height='2'/%3E%3Crect x='13' y='2' width='10' height='2'/%3E%3Crect x='14' y='4' width='8' height='1'/%3E%3Crect x='16' y='5' width='4' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 28px repeat-x;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35));
}

.hero .stall-body { position: relative; display: grid; grid-template-columns: 28px 1fr 28px; margin-top: -22px; }
.hero .post {
  display: block;
  background:
    linear-gradient(90deg, var(--wood-4) 0 4px, var(--wood-3) 4px calc(100% - 8px), var(--wood-2) calc(100% - 8px) calc(100% - 4px), var(--wood-1) calc(100% - 4px));
  box-shadow: 0 0 0 4px var(--wood-0);
  position: relative; z-index: 1;
}

/* ------------------------------------------------------------ the window: the herd, close up */
.hero .window { position: relative; margin: 0; min-width: 0; background: #000; container-type: inline-size; }
.hero .window-view {
  position: relative; overflow: hidden;
  /* never more than --sky clip rows, so a tall window never trades the herd for sky */
  height: min(var(--wh), 100cqw * var(--sky) / var(--cw));
  background: #0c1513;
  --cpx: calc(100cqw / var(--cw));  /* one clip pixel, in CSS px */
  --bar-top: 32px;                  /* below the awning's scallops, which hang 22px into the window */
}
.hero .window-view video {
  /* scaled by width only, so a taller window just shows more sky; the ground stays on the counter */
  position: absolute; max-width: none; height: auto;
  width: calc(1710 / var(--cw) * 100%);
  left: calc(var(--cx) / var(--cw) * -100%);
  bottom: 0;
  aspect-ratio: 1710 / 456;
  image-rendering: pixelated;
}
.hero .window-shade {
  /* night above the scene: the strip of sky fades into the dark the lamps light; the herd stays in full colour */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 5, 4, .9) 0, rgba(8, 5, 4, .62) 13%, rgba(8, 5, 4, .24) 27%, transparent 40%),
    linear-gradient(90deg, rgba(10, 5, 2, .45), transparent 8%, transparent 92%, rgba(10, 5, 2, .45));
  box-shadow: inset 4px 0 0 var(--wood-0), inset -4px 0 0 var(--wood-0), inset 0 -4px 0 rgba(0, 0, 0, .25);
}

/* the loop, drawn over the scene: a key press, an egg drops in, lands among the herd and is gone.
   Six eggs share one 3.84 s cycle a sixth apart, so one drops every .64 s — exactly when a key goes down.
   Paused (or reduced motion), the eggs stay where --y puts them: still mid-fall. */
.hero .drops { position: absolute; inset: 0; pointer-events: none; }
.hero .drops i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--egg); height: var(--egg); margin-left: calc(var(--egg) / -2);
  background: url(assets/pixel/egg.svg) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
  --land: calc(100% - var(--egg) - 3 * var(--cpx));
  animation: hero-drop 3.84s linear infinite;
  animation-delay: calc(var(--k) * -.64s);
}
@keyframes hero-drop {
  0% { top: calc(var(--egg) * -1.2); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
  4% { opacity: 1; }
  36% { top: var(--land); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  40% { top: calc(var(--land) - var(--egg) * .45); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  44% { top: var(--land); }
  62% { top: var(--land); opacity: 1; }
  70%, 100% { top: var(--land); opacity: 0; }
}

/* a key and the mouse pointer, taking turns (type, click, type…) */
.hero .keys { position: absolute; left: 18px; top: var(--bar-top); display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.hero .kcap {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding-bottom: 6px;
  font: 700 24px/1 var(--px); color: var(--paper-ink); background: var(--paper);
  box-shadow: inset 0 -6px 0 var(--paper-2), 0 0 0 2px var(--wood-0), 0 4px 0 2px rgba(0, 0, 0, .45);
  animation: hero-key 1.28s steps(1, end) infinite;
}
.hero .pointer {
  display: block; width: 24px; height: 38px; margin-top: 6px;
  image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
  animation: hero-click 1.28s steps(1, end) -.64s infinite;
}
@keyframes hero-key {
  0% { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--paper-2), 0 0 0 2px var(--wood-0), 0 0 18px 2px rgba(255, 181, 71, .65); }
  14%, 100% { transform: none; box-shadow: inset 0 -6px 0 var(--paper-2), 0 0 0 2px var(--wood-0), 0 4px 0 2px rgba(0, 0, 0, .45); }
}
@keyframes hero-click {
  0% { transform: translate(2px, 3px); filter: drop-shadow(0 0 8px rgba(255, 181, 71, .9)); }
  14%, 100% { transform: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
}

/* off screen they rest (01-hero.js), all together so the beat between keys and eggs holds */
.hero .window-view.is-idle .drops i, .hero .window-view.is-idle .kcap, .hero .window-view.is-idle .pointer { animation-play-state: paused; }

/* caption + the shared pause switch, in the dark strip of sky (top right), never over an animal */
.hero .window-bar {
  position: absolute; right: 14px; top: var(--bar-top);
  display: flex; align-items: center; gap: 12px;
}
.hero .window-cap {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1.2 var(--sans); color: var(--ink); white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .8);
}
.hero .window-cap .dot { flex: none; width: 8px; height: 8px; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: hero-blink 1.6s steps(1, end) infinite; }
@keyframes hero-blink { 50% { opacity: .25; } }

.hero .motion-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px; border: 0; cursor: pointer;
  font: 600 14px/1 var(--sans); color: var(--ink);
  background: rgba(14, 9, 6, .72);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 160, .26);
}
.hero .motion-btn[hidden] { display: none; }
.hero .motion-btn:hover { background: rgba(40, 26, 16, .9); color: #fff; }
.hero .motion-ico { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero .motion-btn[aria-pressed="true"] .motion-ico { border: 0; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ------------------------------------------------------------ counter: lamp-lit slab + front boards
   Two columns that start on the same line: the pitch (headline + one sentence) and the goods (one button,
   the other ways in, one quiet trust line). */
.hero .counter { position: relative; z-index: 3; }
.hero .counter-top {
  position: relative; z-index: 1;
  height: 20px; margin: 0 -40px;
  background:
    radial-gradient(ellipse 46% 100% at 50% 0%, rgba(255, 196, 120, .32), transparent 75%),
    var(--plank);
  box-shadow: 0 0 0 4px var(--wood-0), 0 14px 0 -4px rgba(0, 0, 0, .55);
}
.hero .counter-front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 48px;
  margin: 0 -16px;
  padding: 30px 44px 30px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 30px),
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(255, 150, 60, .1), transparent 70%),
    repeating-linear-gradient(90deg, #22130a 0 92px, #190d06 92px 96px),
    #22130a;
  box-shadow: 0 0 0 4px var(--wood-0), 0 40px 60px -20px rgba(0, 0, 0, .75);
}
.hero .tagline {
  font: var(--t-hero); color: var(--ink-hi); letter-spacing: 0;
  text-shadow: 0 0 24px rgba(255, 170, 80, .3);
}
.hero .lede { margin-top: 16px; max-width: 40em; font-size: 18px; line-height: 1.65; color: var(--ink); }
.hero .lede strong { color: #fff4dc; }
.hero .nw { white-space: nowrap; }

.hero .counter-goods { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

/* the big lantern-lit button. Its notched face lives on ::before so focus outlines aren't clipped */
.hero .btn-cta {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 28px 22px 24px;
  color: #2a1407; text-decoration: none;
  filter: drop-shadow(0 0 24px rgba(255, 160, 60, .5));
  transition: transform .12s steps(2, end);
}
.hero .btn-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--amber);
  box-shadow: inset 0 -6px 0 var(--amber-lo), inset 0 4px 0 var(--amber-hi);
  clip-path: var(--notch8);
}
.hero .btn-cta:hover { color: #2a1407; transform: translateY(-2px); }
.hero .btn-cta:hover::before { background: #ffc361; }
.hero .btn-cta:active { transform: translateY(1px); }
.hero .btn-txt { display: flex; flex-direction: column; gap: 8px; }
.hero .btn-label { font: 700 24px/1 var(--px); white-space: nowrap; }
.hero .btn-sub { font: 600 15px/1.25 var(--sans); color: #4f2a0c; word-break: keep-all; text-wrap: balance; }

.hero .cta-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; font: 500 15px/1.4 var(--sans); }
.hero .cta-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(241, 227, 198, .4); text-underline-offset: 4px; }
.hero .cta-more a:hover { color: var(--amber-hi); text-decoration-color: currentColor; }
.hero .cta-more .sep { color: var(--ink-3); }
.hero .trust {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  font: 500 14px/1.5 var(--sans); color: var(--ink-2);
}
.hero .trust .ico { margin-top: 2px; color: var(--amber); }
.hero .trust strong { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1360px) {
  /* the headline keeps two whole lines next to the button: the pixel face steps down to its 36px size */
  .hero .tagline { font-size: 36px; line-height: 1.25; }
}
@media (max-width: 1240px) {
  .hero .stall { width: min(1080px, calc(100% - 72px)); }
}
/* short desktop screens (1280×720 and the like): a smaller nameboard buys the window and the button room */
@media (min-width: 761px) and (max-height: 820px) {
  .hero .stall { padding-top: 32px; --wm: 380px; --wh: clamp(170px, calc(100svh - 500px), 320px); }
  .hero .nameboard::before, .hero .nameboard::after { top: -32px; height: 40px; }
  .hero .nameboard-board { padding: 16px 36px 12px; gap: 8px; }
  .hero .nameboard-ko { font-size: 13px; }
  .hero .counter-front { padding-top: 24px; padding-bottom: 24px; }
  .hero .lede { margin-top: 10px; }
}
@media (max-width: 1080px) {
  .hero .stall { --cx: 462; --cw: 560; }
  .hero .counter-front { column-gap: 36px; padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 960px) {
  .hero .stall { --cx: 476; --cw: 440; }
  .hero .counter-front { grid-template-columns: minmax(0, 1fr); row-gap: 24px; justify-items: center; text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .counter-goods { width: min(100%, 440px); }
}
@media (max-width: 760px) {
  .hero { padding: 0 12px 28px; }
  .hero .topbar-slot { margin: 0 -12px; }
  .hero .tb-links a, .hero .tb-dl, .hero .tb-menu { padding: 0 10px; }
  /* riding along on a phone: brand · 다운로드 · a bare 목차 icon (its name stays for screen readers) */
  .hero .topbar.is-stuck .tb-menu { width: 44px; justify-content: center; padding: 0; }
  .hero .topbar.is-stuck .tb-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero .topbar.is-stuck .tb-dl { padding: 0 12px; }
  /* phones: the stall fills the screen and the window zooms in on the front of the herd */
  .hero .stall { width: 100%; padding-top: 34px; --wm: 304px; --cx: 468; --cw: 280; --wh: clamp(150px, calc(100svh - 640px), 210px); --egg: 24px; }
  .hero .nameboard { margin-bottom: -14px; }
  .hero .nameboard::before, .hero .nameboard::after { top: -34px; height: 42px; }
  .hero .nameboard-board { padding: 18px 22px 13px; gap: 9px; }
  .hero .nameboard-ko { font-size: 13px; gap: 10px; }
  .hero .awning { margin: 0 -6px; }
  .hero .awning-beam { height: 12px; }
  .hero .awning-cloth { height: 22px; }
  .hero .awning-scallop { height: 21px; background-size: 72px 21px; }
  .hero .stall-body { grid-template-columns: 10px 1fr 10px; margin-top: -16px; }

  .hero .window-view { --bar-top: 22px; }
  .hero .keys { left: 12px; gap: 8px; }
  .hero .kcap { width: 32px; height: 32px; padding-bottom: 5px; }
  .hero .pointer { width: 12px; height: 19px; margin-top: 6px; }
  .hero .window-bar { right: 6px; gap: 6px; margin-top: -6px; }
  .hero .cap-x { display: none; }
  .hero .motion-btn { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .hero .motion-label { display: none; }

  /* counter: copy reads left to right, the button spans the board */
  .hero .counter-top { margin: 0 -8px; height: 16px; }
  .hero .counter-front {
    margin: 0 -4px; padding: 20px 16px 18px; row-gap: 16px;
    justify-items: stretch; text-align: left;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 28px),
      radial-gradient(ellipse 90% 70% at 30% 0%, rgba(255, 150, 60, .11), transparent 70%),
      repeating-linear-gradient(90deg, #1d1009 0 120px, #170c06 120px 124px),
      #1d1009;
  }
  .hero .tagline { font-size: 24px; line-height: 1.3; text-shadow: 0 0 18px rgba(255, 170, 80, .35); }
  .hero .lede { margin: 8px 0 0; max-width: none; font-size: 16px; line-height: 1.6; }
  .hero .counter-goods { width: 100%; gap: 6px; }
  .hero .btn-cta { justify-content: center; gap: 12px; padding: 15px 14px 17px; }
  .hero .btn-label { font-size: 24px; }
  .hero .btn-sub { font-size: 14px; }
  .hero .cta-more { gap: 0 4px; font-size: 14px; }
  .hero .cta-more a { min-height: 44px; padding: 0 4px; }
  .hero .trust { margin-top: 2px; }
}
@media (max-width: 420px) {
  .hero .trust-x { display: none; }
}
/* short phones (iPhone SE and the like): tighter nameboard and window so the button still starts on screen */
@media (max-width: 760px) and (max-height: 700px) {
  .hero .stall { padding-top: 26px; --wm: 228px; --wh: 140px; }
  .hero .nameboard::before, .hero .nameboard::after { top: -26px; height: 34px; }
  .hero .nameboard-board { padding: 14px 18px 11px; gap: 7px; }
  .hero .awning-cloth { height: 14px; }
  .hero .counter-front { padding-top: 16px; row-gap: 12px; }
}
/* the smallest phones (320×568): the nameboard drops its Hangul line and the window gives up 20px so the
   whole button still lands in the first screen */
@media (max-width: 760px) and (max-height: 600px) {
  .hero .stall { padding-top: 22px; --wh: 120px; }
  .hero .nameboard::before, .hero .nameboard::after { top: -22px; height: 30px; }
  .hero .nameboard-ko { display: none; }
  .hero .nameboard-board { padding: 12px 16px 10px; }
  .hero .counter-front { padding-top: 14px; padding-bottom: 14px; row-gap: 10px; }
  .hero .lede { margin-top: 6px; }
}
@media (max-width: 360px) {
  /* a desktop browser squeezed this narrow: the button's name may take two lines rather than overflow */
  .hero .btn-label { white-space: normal; word-break: keep-all; line-height: 1.2; text-wrap: balance; }
}
@media (max-width: 380px) {
  .hero .tb-brand .tb-word { display: none; }
  .hero .stall { --cx: 474; --cw: 270; }
  #cta-main-ico { display: none; }
  .hero .btn-label { font-size: 24px; }
  .hero .window-cap { display: none; }
}
@media (max-width: 340px) {
  .hero .stall { --wm: 228px; }
  .hero .nameboard-board { padding: 16px 18px 12px; }
}

/* ---------------------------------------------------------------- src/css/02-play.css */
/* ============================================================ 플레이 영상 — 야시장 상영 스크린
   One big poster frame (a real jungle moment: red panda and turtle among bananas, cropped from a full-resolution capture) on a market
   screen. The screen throws its own coloured light onto the night around it (blurred copy of the poster).
   The whole poster is the play button; under it the six habitats form a segmented timeline that seeks
   and, once the video plays, fills up as it goes. Without JavaScript the plain <video> with controls shows
   (scripting media query). */

#play.sec { overflow-x: clip; }
#play .sec-sub { max-width: 40em; word-break: keep-all; }
#play .sec-sub b { color: var(--amber-hi); font-weight: 700; }

/* ---------------------------------------------------------------- the screen + its frame */
#play > .theater {
  --pad: 16px;
  position: relative; isolation: isolate;
  max-width: calc(1040px + 2 * var(--pad));
  padding: var(--pad) var(--pad) 0;
  background:
    linear-gradient(#8e5b30, #8e5b30) top / 100% 2px no-repeat,
    linear-gradient(rgba(255, 214, 160, .06), transparent 40px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 13px, rgba(255, 214, 160, .02) 13px 15px, transparent 15px 31px),
    #170d07;
  box-shadow:
    0 0 0 4px #0b0603,
    0 50px 90px -30px rgba(0, 0, 0, .95);
}
/* light the screen throws onto the night around it */
#play > .theater::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -9%; right: -9%; top: -16%; bottom: 4%;
  /* warm lantern light, not the poster's green: the night around the screen stays amber */
  background:
    radial-gradient(ellipse 46% 44% at 50% 56%, rgba(255, 160, 70, .5), transparent 75%),
    radial-gradient(ellipse 30% 30% at 50% 90%, rgba(255, 120, 50, .4), transparent 75%);
  filter: blur(60px);
  opacity: .42;
}
/* and onto the ground below */
#play > .theater::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 8%; top: 100%; height: 110px;
  background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(255, 150, 60, .16), transparent 72%);
}

.tb-screen {
  position: relative;
  aspect-ratio: 1120 / 468;
  background: #000;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px #0b0603;
}

/* ---------------------------------------------------------------- video (default = no-JS fallback) */
.tb-vid { position: absolute; inset: 0; background: #000; }
.tb-vid video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ---------------------------------------------------------------- poster = the play button */
.tb-poster {
  display: none;
  position: absolute; inset: 0;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  color: inherit; background: #000; font: inherit; text-align: left;
  overflow: hidden;
}
.tb-poster picture { display: block; width: 100%; height: 100%; }
.tb-art {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  image-rendering: pixelated;
  transition: filter .2s;
}
/* glass: a soft vignette and a faint sheen across the top */
.tb-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%),
    radial-gradient(ellipse 80% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, .42));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .7);
}

.tb-play {
  position: absolute; z-index: 2; left: 50%; top: 27%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 20px;
  transition: transform .15s steps(2, end);
}
.tb-play::before {
  /* a soft dark pool so the label reads on any sky */
  content: ""; position: absolute; z-index: -1; inset: -36px -56px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 5, 4, .62), rgba(8, 5, 4, .3) 60%, transparent);
}
.tb-play-ico {
  position: relative; flex: none;
  width: 84px; height: 84px;
  background: var(--amber);
  box-shadow: inset 0 -8px 0 var(--amber-lo), inset 0 6px 0 var(--amber-hi);
  clip-path: var(--notch8);
  filter: drop-shadow(0 0 28px rgba(255, 160, 60, .7));
}
.tb-play-ico::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-44%, -54%);
  background: #2a1407;
  -webkit-mask: url(assets/pixel/icon-play.svg) center / 100% 100% no-repeat;
          mask: url(assets/pixel/icon-play.svg) center / 100% 100% no-repeat;
}
.tb-play-txt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font: var(--t-display); line-height: 1; color: #fff4dc; white-space: nowrap;
  text-shadow: 0 3px 0 #120806, 0 0 24px rgba(0, 0, 0, .9);
}
.tb-play-txt small {
  font: 700 15px/1 var(--sans); color: var(--amber-hi); letter-spacing: .01em;
  text-shadow: 0 2px 0 #120806, 0 0 14px rgba(0, 0, 0, .9);
}

.tb-cap {
  position: absolute; z-index: 2; left: 18px; top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px;
  font: 700 15px/1 var(--sans); color: var(--ink-hi); letter-spacing: .01em;
  background: rgba(10, 6, 5, .8);
  box-shadow: inset 0 0 0 2px rgba(255, 181, 71, .35);
}
.tb-cap-dot {
  width: 8px; height: 8px; flex: none; background: var(--lantern);
  box-shadow: 0 0 8px var(--lantern);
}

.tb-poster:hover .tb-art { filter: brightness(1.1) saturate(1.06); }
.tb-poster:hover .tb-play { transform: translate(-50%, calc(-50% - 3px)); }
.tb-poster:hover .tb-play-ico { background: #ffc361; }
.tb-poster:focus-visible { outline-offset: -6px; }

/* ---------------------------------------------------------------- six habitats = segmented timeline */
.tb-chapters {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 6px;
  margin: 0; padding: 18px 0 16px; list-style: none;
}
.tb-chapters li { display: flex; }
.tb-chapters button {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  margin: 0; padding: 0 0 2px; border: 0; cursor: pointer;
  color: inherit; background: none; text-align: left; font: inherit;
}
.tb-seg {
  position: relative; display: block; height: 8px;
  background: #563620;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .4);
  transition: background-color .15s;
}
.tb-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 170, 60, .7);
}
.tb-tab {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 0 2px;
}
.tb-ico { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.tb-name { font: var(--t-title); line-height: 1.1; color: var(--ink-hi); white-space: nowrap; }
.tb-time { font: var(--t-label); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.tb-chapters button:hover .tb-seg { background: #7a4c27; }
.tb-chapters button:hover .tb-name { color: var(--amber-hi); }
.tb-chapters button[aria-current="true"] .tb-seg { background: #6a3f21; }
.tb-chapters button[aria-current="true"] .tb-name { color: var(--amber); }
.tb-chapters button[aria-current="true"] .tb-time { color: var(--amber-hi); }

/* with JavaScript: the poster stands in front until the video starts. Without it the chapter buttons
   could not seek, so only the plain video with its own controls shows */
@media (scripting: enabled) {
  #theater:not(.is-on) .tb-vid { visibility: hidden; }
  #theater:not(.is-on) .tb-poster { display: block; }
}
@media (scripting: none) {
  #play > .theater { padding-bottom: var(--pad); }
  #play .tb-chapters { display: none; }
}


/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1000px) {
  .tb-play { gap: 16px; }
  .tb-play-ico { width: 64px; height: 64px; }
  .tb-play-ico::before { width: 32px; height: 32px; }
  .tb-play-txt { gap: 8px; }
  .tb-play-txt small { font-size: 14px; }
  .tb-cap { left: 12px; top: 12px; }
  .tb-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
  .tb-ico { grid-row: 1 / span 2; }
  .tb-time { font-size: 14px; }
}

@media (max-width: 900px) {
  .tb-name { font-size: 16px; }
}

@media (max-width: 760px) {

  #play > .theater {
    --pad: 8px;
    box-shadow: 0 0 0 3px #0b0603, 0 40px 70px -30px rgba(0, 0, 0, .95);
  }
  #play > .theater::before { left: -6%; right: -6%; top: -8%; filter: blur(40px); }

  /* poster on top, a full-width play bar under it; while playing the screen takes the video's own shape */
  .tb-screen { aspect-ratio: 16 / 9; }
  .tb-poster { position: relative; inset: auto; flex-direction: column; }
  .tb-poster picture { height: auto; aspect-ratio: 340 / 264; }
  .tb-poster::after { bottom: auto; height: calc(100% - 56px); }
  .tb-cap { display: none; }
  .tb-play {
    position: relative; left: auto; top: auto; transform: none;
    justify-content: center; gap: 12px;
    height: 56px; padding: 0 16px;
    background: var(--amber);
    box-shadow: inset 0 -5px 0 var(--amber-lo), inset 0 3px 0 var(--amber-hi);
  }
  .tb-poster:hover .tb-play { transform: none; background: #ffc361; }
  .tb-play::before { display: none; }
  .tb-play-ico { width: 16px; height: 16px; background: none; box-shadow: none; clip-path: none; filter: none; }
  .tb-play-ico::before { width: 16px; height: 16px; transform: translate(-50%, -50%); }
  .tb-poster:hover .tb-play-ico { background: none; }
  .tb-play-txt { flex-direction: row; align-items: baseline; gap: 10px; color: #2a1407; text-shadow: none; }
  .tb-play-txt small { font-size: 14px; color: #5a3210; text-shadow: none; }

  .tb-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; padding: 16px 0 16px; }
  .tb-chapters button { gap: 10px; }
  .tb-seg { height: 6px; }
  .tb-tab { column-gap: 8px; row-gap: 5px; }
  .tb-name { font-size: 15px; }
  .tb-time { font-size: 14px; }

}
@media (max-width: 760px) and (scripting: enabled) {
  #theater:not(.is-on) .tb-screen { aspect-ratio: auto; }
  #theater:not(.is-on) .tb-vid { display: none; }
  #theater:not(.is-on) .tb-poster { display: flex; }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#play { --sec-gap: 120px; }
@media (max-width: 760px) { #play { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/03-worlds.css */
/* ============================================================ 배경 6종: live goods on a lamp-lit shelf
   Each world is a small framed screen (a cropped 6s loop, 1.25× so the animals read) standing on a
   wooden shelf. One plank per row: every item draws its own segment and the grid has no column gap,
   so the segments join. A cream shelf label hangs under each item with the name and the unlock price. */

#worlds { --pad: 14px; }

#worlds .goods {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px; row-gap: 36px; column-gap: 0;
  margin-top: 0 !important; padding: 0; list-style: none;
}
.good { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 var(--pad); }

/* ---- the framed screen */
.good-frame {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: zoom-in;
  /* each screen is the light source of its corner of the stall: it glows in its world's colour */
  box-shadow: 0 -6px 64px -6px rgb(var(--glow, 255 168 76) / .34), 0 0 22px -4px rgb(var(--glow, 255 168 76) / .22);
  transition: transform .15s steps(3, end);
}
.good-pane {
  position: relative; display: block;
  padding: 4px 4px 8px;
  background: var(--paper);
  box-shadow: inset 0 -4px 0 var(--paper-2);
  clip-path: var(--notch);
}
.good-screen {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #10140f;
}
.good-screen img, .good-screen video {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 72%;
  image-rendering: pixelated;
}
.good-screen::after {
  /* thin dark bezel line inside the cream frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(59, 36, 20, .55);
}
.good-frame::after {
  /* the screen's light spilling onto the plank right under it */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 20px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--glow, 255 200 120) / .55), transparent 75%);
  mix-blend-mode: screen;
}
.good-frame:hover { transform: translateY(-4px); }
.good-zoom {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; font: var(--t-label); line-height: 1; color: var(--ink);
  background: rgba(14, 8, 4, .82); box-shadow: inset 0 0 0 2px rgba(255, 220, 160, .2);
  opacity: 0; transition: opacity .15s;
}
.good-zoom .ico { width: 12px; height: 12px; color: var(--amber); }
.good-frame:hover .good-zoom, .good-frame:focus-visible .good-zoom { opacity: 1; }

/* ---- the shelf plank (one segment per item; segments meet because the grid has no column gap) */
.shelf {
  position: relative; z-index: 1; display: block; height: 20px; margin: 0 calc(-1 * var(--pad));
  background:
    linear-gradient(#d29a5a, #d29a5a) top / 100% 2px no-repeat,
    linear-gradient(var(--wood-5), var(--wood-5)) 0 2px / 100% 4px no-repeat,
    linear-gradient(var(--wood-1), var(--wood-1)) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(0, 0, 0, .18) 92px 96px, transparent 96px 230px, rgba(255, 220, 160, .07) 230px 234px, transparent 234px 300px),
    var(--wood-3);
  box-shadow: 0 22px 26px -16px rgba(0, 0, 0, .95);
}

/* shelf brackets under both ends of every row */
.shelf::before, .shelf::after {
  content: ""; position: absolute; top: 100%; width: 20px; height: 28px; display: none;
  background: linear-gradient(90deg, var(--wood-3) 0 4px, var(--wood-2) 4px);
}
.shelf::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 4px, 16px 4px, 16px 8px, 12px 8px, 12px 12px, 8px 12px, 8px 20px, 4px 20px, 4px 100%, 0 100%); }
.shelf::after { right: 0; transform: scaleX(-1); clip-path: polygon(0 0, 100% 0, 100% 4px, 16px 4px, 16px 8px, 12px 8px, 12px 12px, 8px 12px, 8px 20px, 4px 20px, 4px 100%, 0 100%); }
.good:nth-child(3n + 1) .shelf::before, .good:nth-child(3n) .shelf::after { display: block; }

/* ---- hanging shelf label: name + unlock price */
.good-tag { position: relative; align-self: flex-start; margin: 14px 0 0 10px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45)); }
.good-tag::before, .good-tag::after {
  /* two short cords tying the label to the plank, each with a dark nail cap */
  content: ""; position: absolute; top: -14px; width: 8px; height: 14px;
  background:
    linear-gradient(#2a1d14, #2a1d14) 0 0 / 8px 4px no-repeat,
    repeating-linear-gradient(180deg, #9a7650 0 4px, #5f4429 4px 8px) 2px 4px / 4px 100% no-repeat;
}
.good-tag::before { left: 12px; }
.good-tag::after { right: 12px; }
.good-tag-in {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px 13px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: inset 0 0 0 4px var(--paper-line), inset 0 -8px 0 0 var(--paper-2);
  clip-path: var(--notch);
}
.good-tag h3 { font: var(--t-head); line-height: 1; color: var(--paper-ink); white-space: nowrap; }
.good-price {
  display: flex; align-items: baseline; gap: 5px;
  padding-left: 14px; box-shadow: -2px 0 0 rgba(74, 44, 23, .28);
  font: var(--t-label); line-height: 1; color: var(--paper-mute); white-space: nowrap;
}
.good-price b { font: var(--t-head); line-height: 1; color: var(--rust); }

/* ---- what the item gives you */
.good-meta { display: grid; gap: 8px; margin: 16px 10px 0; }
.good-meta > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.good-meta dt { font: 600 15px/1.6 var(--sans); color: var(--amber-hi); white-space: nowrap; }
.good-meta dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-hi); word-break: keep-all; overflow-wrap: anywhere; }
.good-meta dd img { width: 16px; height: 16px; margin-right: 7px; vertical-align: -2px; image-rendering: pixelated; }


/* pause the live screens with the page's "장면 멈추기" switch and for reduced motion: the poster stays */
.motion-off #worlds .good-screen video { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #worlds .good-screen video { display: none; }
}

/* ============================================================ responsive */
@media (max-width: 1000px) {
  #worlds .goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .good:nth-child(n) .shelf::before, .good:nth-child(n) .shelf::after { display: none; }
  .good:nth-child(2n + 1) .shelf::before, .good:nth-child(2n) .shelf::after { display: block; }
}
@media (max-width: 640px) {
  /* phones: all six goods on three two-wide shelves, so the whole stall is on display at once */
  #worlds { --pad: 6px; }
  #worlds .goods {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px;
    margin-left: -6px !important; margin-right: -6px !important;
  }
  .good-frame { box-shadow: 0 -4px 40px -6px rgb(var(--glow, 255 168 76) / .3), 0 0 16px -4px rgb(var(--glow, 255 168 76) / .2); }
  .good-pane { padding: 3px 3px 6px; }
  .good-zoom { display: none; }
  .shelf { height: 16px; }
  .shelf::before, .shelf::after { width: 16px; height: 22px; }

  /* the shelf label: name over price, like a two-line price card */
  .good-tag { margin: 12px 0 0 4px; }
  .good-tag::before, .good-tag::after { top: -12px; height: 12px; }
  .good-tag-in { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 12px 13px; }
  .good-price { padding-left: 0; box-shadow: none; gap: 4px; }

  .good-meta { margin: 12px 4px 0; gap: 6px; }
  .good-meta > div { display: block; }
  .good-meta dt { display: inline; margin-right: 6px; line-height: 1.6; }
  .good-meta dd { display: inline; font-size: 15px; line-height: 1.6; }
  .good-meta dt { font-size: 14px; }
  #worlds .sec-sub { text-wrap: balance; }
  #worlds .sec-sub br { display: none; }
}
@media (max-width: 340px) {
  #worlds .goods { grid-template-columns: minmax(0, 1fr); }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#worlds { --sec-gap: 120px; }
@media (max-width: 760px) { #worlds { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/04-menu.css */
/* ============================================================ 주요 특징: a chalk menu board with a printed photo above every dish
   and the merge recipe card pinned to its last cell. (The seven skills live in 게임 방법, step 8.)
   Everything is scoped under #menu. */
#menu {
  --slate: #18201b;
  --chalk: #f5eee2;
  --chalk-2: #dcd3c2;
  --chalk-3: #a89e8c;
  --chalk-glow: 0 0 1px rgba(243, 236, 223, .55), 0 0 10px rgba(243, 236, 223, .1);
  word-break: keep-all; overflow-wrap: break-word;
  overflow-x: clip;   /* the lamp glow behind the board may spill past the page edge on narrow screens */
}
#menu .mn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#menu .mn-nw { white-space: nowrap; }

/* ------------------------------------------------------------ the board: wood frame, slate, nails */
#menu .mn-stand { position: relative; }
#menu .mn-stand::before {
  /* the lantern above the stall throws a warm pool on the wall behind the board */
  content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; top: -90px; bottom: -40px; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 30%, rgba(255, 150, 60, .1), transparent 72%);
}
#menu .mn-board {
  position: relative;
  padding: 36px 40px 40px;
  border: 14px solid transparent;
  background:
    radial-gradient(ellipse 55% 30% at 50% 0%, rgba(255, 186, 110, .14), transparent 72%) padding-box,
    radial-gradient(ellipse 38% 30% at 18% 46%, rgba(243, 236, 223, .045), transparent 70%) padding-box,
    radial-gradient(ellipse 34% 26% at 82% 78%, rgba(243, 236, 223, .04), transparent 70%) padding-box,
    radial-gradient(ellipse 30% 20% at 60% 62%, rgba(243, 236, 223, .03), transparent 70%) padding-box,
    repeating-linear-gradient(-14deg, rgba(243, 236, 223, .016) 0 3px, transparent 3px 11px) padding-box,
    linear-gradient(var(--slate), var(--slate)) padding-box,
    linear-gradient(var(--wood-5), var(--wood-5)) top / 100% 4px no-repeat border-box,
    linear-gradient(var(--wood-1), var(--wood-1)) bottom / 100% 4px no-repeat border-box,
    linear-gradient(90deg, var(--wood-4) 4px, transparent 4px, transparent calc(100% - 4px), var(--wood-2) calc(100% - 4px)) border-box,
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(0, 0, 0, .16) 92px 96px, transparent 96px 220px, rgba(255, 220, 160, .07) 220px 224px, transparent 224px 310px) border-box,
    linear-gradient(var(--wood-3), var(--wood-3)) border-box;
  box-shadow:
    0 0 0 4px var(--wood-0),
    inset 0 0 0 3px rgba(0, 0, 0, .45),
    inset 0 12px 0 rgba(0, 0, 0, .22),
    inset 0 0 80px rgba(0, 0, 0, .55),
    0 40px 80px -30px rgba(0, 0, 0, .9),
    0 0 160px rgba(255, 150, 60, .08);
}
#menu .mn-board::before {
  /* four nails, one in each frame corner */
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(#f0d6a8, #f0d6a8) left 4px top 4px / 2px 2px no-repeat,
    linear-gradient(#f0d6a8, #f0d6a8) right 6px top 4px / 2px 2px no-repeat,
    linear-gradient(#f0d6a8, #f0d6a8) left 4px bottom 6px / 2px 2px no-repeat,
    linear-gradient(#f0d6a8, #f0d6a8) right 6px bottom 6px / 2px 2px no-repeat,
    linear-gradient(#3a2414, #3a2414) left 4px top 4px / 6px 6px no-repeat,
    linear-gradient(#3a2414, #3a2414) right 4px top 4px / 6px 6px no-repeat,
    linear-gradient(#3a2414, #3a2414) left 4px bottom 4px / 6px 6px no-repeat,
    linear-gradient(#3a2414, #3a2414) right 4px bottom 4px / 6px 6px no-repeat;
}

/* chalk ledge with two sticks of chalk and an eraser */
#menu .mn-tray {
  position: relative; height: 16px; margin: -2px -12px 0;
  background:
    linear-gradient(var(--wood-5), var(--wood-5)) top / 100% 4px no-repeat,
    linear-gradient(var(--wood-1), var(--wood-1)) bottom / 100% 4px no-repeat,
    var(--wood-3);
  box-shadow: 0 0 0 4px var(--wood-0), 0 18px 24px -8px rgba(0, 0, 0, .7);
}
#menu .mn-tray i { position: absolute; bottom: 100%; display: block; }
#menu .mn-chalk { left: 14%; width: 44px; height: 10px; background: linear-gradient(90deg, #f6f0e4 0 36px, #cfc5b2 36px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .12); }
#menu .mn-chalk-amber { left: calc(14% + 54px); width: 30px; background: linear-gradient(90deg, #ffc56b 0 24px, #d98f2b 24px); }
#menu .mn-eraser { right: 12%; width: 72px; height: 18px; background: linear-gradient(#8e5b30 0 8px, #b07a45 8px 10px, #2b2622 10px 16px, #1a1714 16px); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .3), inset 2px 0 0 rgba(255, 220, 160, .12); }

/* ------------------------------------------------------------ five dishes + the recipe card in a 3 × 2 grid */
#menu .mn-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto);
  column-gap: 40px; row-gap: 40px;
}
#menu .mn-list {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  margin: 0; padding: 0; list-style: none;
}
#menu .mn-grid > .mn-recipe { grid-column: 3; grid-row: 2; }

#menu .mn-item { position: relative; display: flex; flex-direction: column; min-width: 0; }
#menu .mn-text { padding: 0 2px; }
#menu .mn-name {
  display: flex; align-items: center; gap: 10px;
  font: var(--t-head); line-height: 1.25; color: var(--chalk);
  text-shadow: var(--chalk-glow);
}
#menu .mn-no {
  /* menu number, split from the dish name by a quick chalk stroke */
  flex: none; padding: 3px 12px 2px 0;
  font: var(--t-head); line-height: 1; color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 170, 70, .3);
  border-right: 2px solid rgba(243, 236, 223, .2);
}
#menu .mn-text p { margin-top: 10px; font-size: 16px; line-height: 1.68; color: var(--chalk-2); text-wrap: pretty; }

/* photos: printed, taped on, slightly crooked */
#menu .mn-pic { position: relative; margin-bottom: 20px; }
#menu .mn-photo {
  position: relative; display: block;
  width: 100%; margin: 0; padding: 6px; border: 0;
  background: #efe3c8; color: inherit; font: inherit;
  box-shadow: 0 0 0 2px rgba(20, 10, 4, .55), 0 14px 24px -8px rgba(0, 0, 0, .75);
  rotate: -1.4deg;
  transition: translate .18s ease, rotate .18s ease;
}
#menu .mn-item:nth-child(2) .mn-photo { rotate: 1.1deg; }
#menu .mn-item:nth-child(3) .mn-photo { rotate: -.7deg; }
#menu .mn-item:nth-child(4) .mn-photo { rotate: 0deg; }
#menu .mn-item:nth-child(5) .mn-photo { rotate: 1.3deg; }
#menu .mn-photo picture { display: block; }
#menu .mn-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 4; object-fit: cover;
  background: #10140f; box-shadow: 0 0 0 2px rgba(42, 23, 12, .5);
}
#menu .mn-photo::before {
  /* tape */
  content: ""; position: absolute; z-index: 1; top: -10px; left: 50%; width: 72px; height: 20px; margin-left: -36px;
  background: rgba(238, 220, 178, .5); rotate: 3deg;
  clip-path: polygon(0 0, 100% 0, 95% 25%, 100% 50%, 95% 75%, 100% 100%, 0 100%, 5% 75%, 0 50%, 5% 25%);
}
#menu .mn-item:nth-child(even) .mn-photo::before { left: 26%; rotate: -4deg; }
#menu button.mn-photo { cursor: zoom-in; }
#menu button.mn-photo:hover { translate: 0 -4px; rotate: 0deg; }
#menu .mn-play {
  position: absolute; right: 14px; top: 14px; width: 28px; height: 28px;
  background: rgba(10, 7, 6, .82); box-shadow: inset 0 0 0 2px rgba(255, 181, 71, .65);
  clip-path: var(--notch);
}
#menu .mn-play::before {
  content: ""; position: absolute; inset: 7px; background: var(--amber);
  -webkit-mask: url(assets/pixel/icon-play.svg) center / 100% 100% no-repeat;
          mask: url(assets/pixel/icon-play.svg) center / 100% 100% no-repeat;
}
#menu .mn-photo-chalk {
  padding: 6px; background: transparent; box-shadow: none; rotate: 0deg !important;
  outline: 2px dashed rgba(243, 236, 223, .28); outline-offset: -2px;
}
#menu .mn-photo-chalk::before { display: none; }
#menu .mn-map { display: block; width: 100%; height: auto; aspect-ratio: 9 / 4; }

/* 합성 레시피: a paper card pinned up with tape */
#menu .mn-recipe {
  position: relative; align-self: center; padding: 24px 22px 20px;
  color: var(--paper-ink);
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) bottom / 100% 8px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(74, 44, 23, .06) 27px 29px),
    var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper-line), 0 0 0 4px rgba(10, 7, 6, .6), 0 24px 40px -14px rgba(0, 0, 0, .85);
  rotate: -1deg;
}
#menu .mn-recipe::before,
#menu .mn-recipe::after {
  content: ""; position: absolute; top: -12px; width: 70px; height: 22px;
  background: rgba(238, 220, 178, .55);
  clip-path: polygon(0 0, 100% 0, 95% 25%, 100% 50%, 95% 75%, 100% 100%, 0 100%, 5% 75%, 0 50%, 5% 25%);
}
#menu .mn-recipe::before { left: 18px; rotate: -6deg; }
#menu .mn-recipe::after { right: 18px; rotate: 5deg; }
#menu .mn-recipe-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; font: var(--t-head); line-height: 1; }
#menu .mn-recipe-title small { font: var(--t-label); line-height: 1; color: var(--paper-mute); }

#menu .mn-gem { display: block; width: 24px; height: 24px; color: var(--g, #a3a7ad); shape-rendering: crispEdges; }
#menu .mn-eq {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 16px 0 14px; padding: 12px 0 10px;
  border-top: 2px dashed rgba(74, 44, 23, .28); border-bottom: 2px dashed rgba(74, 44, 23, .28);
}
#menu .mn-eq-in, #menu .mn-eq-out { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#menu .mn-nine { display: grid; grid-template-columns: repeat(3, 16px); gap: 3px; }
#menu .mn-nine .mn-gem { width: 16px; height: 16px; }
#menu .mn-one { display: grid; place-items: center; width: 54px; height: 54px; position: relative; }
#menu .mn-one .mn-gem { width: 48px; height: 48px; filter: drop-shadow(0 4px 0 rgba(74, 44, 23, .25)); }
#menu .mn-one::before, #menu .mn-one::after {
  /* little sparkles: a new friend */
  content: ""; position: absolute; width: 4px; height: 4px; background: var(--amber-lo);
  box-shadow: 4px 0 0 var(--amber-lo), -4px 0 0 var(--amber-lo), 0 4px 0 var(--amber-lo), 0 -4px 0 var(--amber-lo);
}
#menu .mn-one::before { right: -6px; top: 2px; }
#menu .mn-one::after { left: -4px; bottom: 6px; scale: .6; }
#menu .mn-eq-cap { font: var(--t-label); font-weight: 700; line-height: 1; white-space: nowrap; }
#menu .mn-eq-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 22px; }
#menu .mn-eq-arrow span { font: var(--t-label); font-weight: 500; line-height: 1; color: var(--paper-mute); }
#menu .mn-eq-arrow::after {
  content: ""; width: 32px; height: 32px; background: var(--paper-ink);
  -webkit-mask: url(assets/pixel/icon-arrow-right.svg) center / 100% 100% no-repeat;
          mask: url(assets/pixel/icon-arrow-right.svg) center / 100% 100% no-repeat;
}

#menu .mn-grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
#menu .mn-grades li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#menu .mn-grades li + li::before {
  /* pixel chevron between grades */
  content: ""; position: absolute; left: -3px; top: 8px; width: 4px; height: 8px;
  background: rgba(59, 36, 20, .4);
  clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%);
}
#menu .mn-grades b { margin-top: 4px; font: 700 14px/1.2 var(--sans); color: var(--paper-ink); white-space: nowrap; }
#menu .mn-recipe-note { margin-top: 14px; font-size: 15px; line-height: 1.6; color: #5a3c22; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  #menu .mn-board { padding: 32px 30px 42px; }
  #menu .mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: 36px; }
  #menu .mn-grid > .mn-recipe { grid-column: 2; grid-row: 3; }
  #menu .mn-item:nth-child(3) .mn-photo { rotate: .9deg; }
  #menu .mn-item:nth-child(4) .mn-photo { rotate: 0deg; }
}
@media (max-width: 600px) {
  #menu .mn-board { padding: 26px 16px 32px; border-width: 10px; }
  #menu .mn-board::before { inset: -10px; }
  #menu .mn-tray { margin: -2px -6px 0; }

  #menu .mn-grid { display: block; }
  #menu .mn-list { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  #menu .mn-item {
    display: grid; grid-template-columns: clamp(96px, 38%, 148px) minmax(0, 1fr); grid-template-areas: "pic name" "desc desc";
    column-gap: 16px; align-items: center;
  }
  #menu .mn-pic { grid-area: pic; margin-bottom: 0; }
  #menu .mn-text { display: contents; }
  #menu .mn-name { grid-area: name; flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.25; padding-bottom: 6px; }
  #menu .mn-no { padding: 0; border: 0; }
  #menu .mn-text p { grid-area: desc; margin-top: 18px; font-size: 15px; line-height: 1.65; }
  #menu .mn-photo { padding: 4px; }
  #menu .mn-photo img { aspect-ratio: 4 / 3; }
  #menu .mn-item:nth-child(1) .mn-photo img { object-position: 46% 50%; }
  #menu .mn-item:nth-child(2) .mn-photo img { object-position: 0 50%; }
  #menu .mn-item:nth-child(5) .mn-photo img { object-position: 24% 50%; }
  #menu .mn-map { aspect-ratio: 4 / 3; }
  #menu .mn-photo::before { width: 46px; height: 15px; margin-left: -23px; top: -8px; }
  #menu .mn-item:nth-child(even) .mn-photo::before { left: 50%; }
  #menu .mn-play { right: 8px; top: 8px; width: 22px; height: 22px; }
  #menu .mn-play::before { inset: 5px; }

  #menu .mn-grid > .mn-recipe { margin: 44px auto 0; max-width: 400px; padding: 26px 18px 22px; rotate: -.6deg; }
  #menu .mn-eq { gap: 16px; }
}
@media (max-width: 380px) {
  /* narrowest phones: each grade takes only its name's width, so 레전드리 never runs into 유니크 */
  #menu .mn-grades { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  #menu .mn-grades b { font-size: 13px; }
}
@supports not (grid-template-rows: subgrid) {
  #menu .mn-grid { display: block; }
  #menu .mn-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px 40px; }
  #menu .mn-grid > .mn-recipe { margin: 48px auto 0; max-width: 400px; }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#menu { --sec-gap: 120px; }
@media (max-width: 760px) { #menu { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/05-download.css */
/* ============================================================ 다운로드: string lights, two crates on a lit shelf, one line about the latest build
   The section leads with the reason (free, progress kept) and the two buttons. The release ledger (every
   version, its notes and older builds) is under the install guide: 06-install.css. */
#download :is(.sec-sub, .dl-latest) { word-break: keep-all; overflow-wrap: anywhere; }
#download .br-d { display: inline; }

/* ------------------------------------------------ the stand */
#download .stand { position: relative; isolation: isolate; }
#download .stand::before {
  /* the lamp's warm pool on the dark wall behind the crates */
  content: ""; position: absolute; z-index: -1; left: 50%; top: -80px; transform: translateX(-50%);
  width: min(1240px, 100vw); height: 680px; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 46% at 50% 50%, rgba(255, 170, 80, .15), transparent 72%),
    radial-gradient(ellipse 60% 60% at 50% 54%, rgba(255, 120, 40, .05), transparent 75%);
}
#download .stand::after {
  /* the stall's back wall: dark vertical boards, only visible where the lamp reaches */
  content: ""; position: absolute; z-index: -1; left: 50%; top: -24px; bottom: 80px; transform: translateX(-50%);
  width: min(1240px, 100vw); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 4px, rgba(255, 196, 130, .035) 4px 8px, transparent 8px 88px);
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 25%, transparent 78%);
}

/* ------------------------------------------------ crates */
#download .crates { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 72px; }
#download .crate-slot { position: relative; flex: 0 1 460px; min-width: 0; }
#download .crate {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 22px;
  width: 100%; padding: 28px 32px 26px;
  color: var(--ink); text-decoration: none;
  background:
    linear-gradient(90deg,
      var(--wood-1) 0 4px, var(--wood-2) 4px 20px, var(--wood-0) 20px 24px,
      transparent 24px calc(100% - 24px),
      var(--wood-0) calc(100% - 24px) calc(100% - 20px), var(--wood-2) calc(100% - 20px) calc(100% - 4px), var(--wood-1) calc(100% - 4px)),
    linear-gradient(180deg, var(--wood-0) 0 4px, var(--wood-4) 4px 8px, var(--wood-3) 8px 42px, #57311a 42px 48px) 0 100% / 100% 48px repeat-y;
  box-shadow: 0 0 0 4px var(--wood-0), 0 28px 40px -18px rgba(0, 0, 0, .85);
  transition: transform .15s steps(3, end), filter .2s;
}
#download .crate::before {
  /* nails on the corner posts */
  content: ""; position: absolute; inset: 10px 10px; pointer-events: none;
  background:
    linear-gradient(#cfb487, #cfb487) left top / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) right top / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) left 50% / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) right 50% / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) left bottom / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) right bottom / 4px 4px no-repeat;
}
#download .crate:hover { color: var(--ink); transform: translateY(-6px); filter: drop-shadow(0 0 28px rgba(255, 160, 60, .32)); }
#download .crate:focus-visible { outline-offset: 8px; }
#download .crate.is-mine { filter: drop-shadow(0 0 30px rgba(255, 160, 60, .26)); }
#download .crate.is-mine:hover { filter: drop-shadow(0 0 34px rgba(255, 160, 60, .42)); }

/* the pasted label: platform band on top, a real gameplay scene, the wordmark printed over the sky */
#download .crate-label { display: block; filter: drop-shadow(0 6px 0 rgba(10, 5, 2, .55)); }
#download .crate-label-in { display: block; padding: 6px; background: var(--paper); box-shadow: inset 0 -4px 0 var(--paper-2); clip-path: var(--notch); }
#download .crate-band { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 10px; background: #1a1410; color: #fff4dc; }
#download .crate-os { font: var(--t-title); line-height: 1; color: #fff4dc; }
#download .crate-req { margin-left: auto; font: var(--t-label); font-weight: 500; line-height: 1; color: var(--ink-2); }
#download .crate-art { position: relative; display: block; aspect-ratio: 5 / 2; overflow: hidden; background: #9ed6c8; }
#download .crate-scene { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#download .crate[data-os="win"] .crate-art { background: #47b3c2; }
#download .crate-logo {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  width: 228px; height: 33px; max-width: none; image-rendering: pixelated;
  filter: drop-shadow(3px 0 0 #1a1410) drop-shadow(-3px 0 0 #1a1410) drop-shadow(0 3px 0 #1a1410) drop-shadow(0 -3px 0 #1a1410) drop-shadow(0 6px 0 rgba(26, 20, 16, .35));
}

/* the price slot: a dark recessed plate on the slats */
#download .crate-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 10px 10px;
  background: #160d07; box-shadow: inset 0 0 0 2px #2b190d, inset 0 4px 0 rgba(0, 0, 0, .45);
}
#download .crate-get {
  position: relative; isolation: isolate; flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px 11px 12px; color: #2a1407; font: var(--t-head); line-height: 1;
}
#download .crate-get::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--amber); box-shadow: inset 0 -4px 0 var(--amber-lo), inset 0 4px 0 var(--amber-hi); clip-path: var(--notch); }
#download .crate:hover .crate-get::before { background: #ffc361; }
#download .crate[data-os="win"] .crate-get::before { background: var(--canvas); box-shadow: inset 0 -4px 0 #9c8458, inset 0 4px 0 #efdcb5; }
#download .crate[data-os="win"]:hover .crate-get::before { background: #e6d0a3; }
#download .crate.is-mine .crate-get::before { background: var(--amber); box-shadow: inset 0 -4px 0 var(--amber-lo), inset 0 4px 0 var(--amber-hi); }
#download .crate.is-mine:hover .crate-get::before { background: #ffc361; }
#download .crate-meta { display: grid; gap: 7px; min-width: 0; }
#download .crate-size { font: var(--t-label); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
#download .crate-file { font: var(--t-mono); line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }

#download .crate-sticker {
  position: absolute; right: 28px; top: -14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px; font: var(--t-badge); color: #2a1407;
  background: #f3c75a; box-shadow: inset 0 -3px 0 #c99a2e, 0 5px 0 -1px rgba(0, 0, 0, .45);
}
#download .crate-mine { z-index: 3; }

/* the shelf they stand on, with a hanging price tag */
#download .stand-plank { position: relative; height: 24px; max-width: 1120px; margin: 0 auto; background: var(--plank); box-shadow: 0 0 0 4px var(--wood-0), 0 30px 40px -10px rgba(0, 0, 0, .7); }
#download .plank-bracket {
  position: absolute; top: 28px; width: 20px; height: 36px; background: var(--wood-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 16px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 8px), 8px calc(100% - 8px), 8px 50%, 4px 50%, 4px 12px, 0 12px);
  box-shadow: inset 4px 0 0 var(--wood-3);
}
#download .plank-bracket:first-child { left: 64px; }
#download .plank-bracket:nth-child(2) { right: 64px; transform: scaleX(-1); }

/* one line under the shelf: which version is in the crates, and the way to every other version */
#download .dl-latest {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  margin: 56px auto 0; max-width: 920px; padding: 0 8px;
  font: var(--t-small); color: var(--ink); text-align: center;
}
#download .dl-ver { display: inline-flex; align-items: center; gap: 8px; }
#download .dl-tag { font: var(--t-mono); font-size: 15px; color: var(--amber-hi); }
#download .dl-new { padding: 4px 6px; font: var(--t-badge); color: #06221e; background: var(--teal); }
#download .dl-date { font-variant-numeric: tabular-nums; color: var(--ink-2); }
#download .dl-what { color: var(--ink-hi); font-weight: 600; }
#download .dl-what[hidden] { display: none; }
#download .dl-notes {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font: var(--t-label); color: var(--amber-hi); text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 181, 71, .45);
  clip-path: var(--notch);
}
#download .dl-notes .ico { width: 12px; height: 12px; transform: rotate(90deg); }
#download .dl-notes:hover { color: #2a1407; background: var(--amber); box-shadow: none; }

/* the string of lights over the stall (drawn by app.js, LIGHT_CFG.dl in 05-download.js). It replaces the
   single lamp here: the sign's cords hang from the string, the lamp's warm pool stays */
#download .lights-dl { top: 28px; }
#download .sec-head::after { display: none; }

/* ------------------------------------------------ responsive */
@media (max-width: 1000px) {
  /* tablets: the two crates stay side by side, a size smaller */
  #download .crates { gap: 32px; }
  #download .crate-slot { flex: 1 1 0; max-width: 440px; }
  #download .crate { padding: 26px 22px 22px; gap: 18px; }
  #download .crate::before { inset: 8px 6px; }
  #download .crate {
    background:
      linear-gradient(90deg,
        var(--wood-1) 0 4px, var(--wood-2) 4px 14px, var(--wood-0) 14px 18px,
        transparent 18px calc(100% - 18px),
        var(--wood-0) calc(100% - 18px) calc(100% - 14px), var(--wood-2) calc(100% - 14px) calc(100% - 4px), var(--wood-1) calc(100% - 4px)),
      linear-gradient(180deg, var(--wood-0) 0 4px, var(--wood-4) 4px 8px, var(--wood-3) 8px 42px, #57311a 42px 48px) 0 100% / 100% 48px repeat-y;
  }
  #download .crate-band { height: 44px; gap: 8px; }
  #download .crate-logo { top: 12px; width: 152px; height: 22px; filter: drop-shadow(2px 0 0 #1a1410) drop-shadow(-2px 0 0 #1a1410) drop-shadow(0 2px 0 #1a1410) drop-shadow(0 -2px 0 #1a1410); }
  #download .crate-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; }
  #download .crate-get { justify-content: center; padding: 12px 16px 13px; }
  #download .crate-meta { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 0 2px; }
  #download .crate-sticker { right: 16px; }
  #download .plank-bracket:first-child { left: 24px; }
  #download .plank-bracket:nth-child(2) { right: 24px; }
}
@media (max-width: 760px) {
  #download .br-d { display: none; }
  #download .dl-latest { margin-top: 44px; gap: 8px 10px; }
  #download .dl-notes { min-height: 44px; flex-basis: 100%; justify-content: center; max-width: 320px; }
}
@media (max-width: 560px) {
  /* phones: both crates side by side on the one shelf, compact */
  #download .crates { align-items: stretch; gap: 12px; }
  #download .crate-slot { display: flex; max-width: 240px; }
  #download .crate { padding: 18px 14px 14px; gap: 12px; }
  #download .crate::before { inset: 6px 4px; }
  #download .crate {
    background:
      linear-gradient(90deg,
        var(--wood-1) 0 3px, var(--wood-2) 3px 10px, var(--wood-0) 10px 13px,
        transparent 13px calc(100% - 13px),
        var(--wood-0) calc(100% - 13px) calc(100% - 10px), var(--wood-2) calc(100% - 10px) calc(100% - 3px), var(--wood-1) calc(100% - 3px)),
      linear-gradient(180deg, var(--wood-0) 0 4px, var(--wood-4) 4px 8px, var(--wood-3) 8px 34px, #57311a 34px 40px) 0 100% / 100% 40px repeat-y;
  }
  #download .crate-label-in { padding: 5px; }
  #download .crate-band {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 4px 8px;
    height: 52px; padding: 0 8px;
  }
  #download .crate-band .ico-lg { grid-row: 1 / span 2; width: 24px; height: 24px; }
  #download .crate-os { font-size: 17px; }
  #download .crate-req { margin-left: 0; white-space: nowrap; }
  #download .crate-art { aspect-ratio: 8 / 5; }
  #download .crate-logo { top: 8px; width: min(104px, 86%); height: auto; }
  #download .crate-foot { margin-top: auto; gap: 8px; padding: 8px; }
  /* the label keeps its 24px pixel face; the icon steps aside to make room */
  #download .crate-get { justify-content: center; min-height: 48px; padding: 10px 8px 11px; }
  #download .crate-get .ico-lg { display: none; }
  #download .crate-meta { display: flex; justify-content: center; padding: 0; }
  #download .crate-file { display: none; }
  #download .crate-sticker { right: 8px; top: -14px; padding: 6px 8px 7px; }
  #download .crate-mine { top: -14px; }
  #download .stand-plank { height: 20px; }
}
@media (max-width: 380px) {
  /* narrowest phones: the crate button and OS name keep one line; the notes toggle takes its own row */
  #download .crate-get { padding: 10px 4px 11px; font: var(--t-title); font-size: 17px; line-height: 1; }
  #download .crate-band { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  #download .crate-band .ico-lg { display: none; }
  #download .crate-os { font-size: 16px; }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#download { --sec-gap: 120px; }
@media (max-width: 760px) { #download { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/06-install.css */
/* ============================================================ 실행 가이드 — the stall's side wall
   Dark vertical boards under the lamp. Pinned to them: the stall keeper's manual (one paper at a time behind
   index tabs: macOS · Windows · 문제 해결), then the release ledger (업데이트 · 릴리스 노트, every version,
   notes open as a receipt). Everything printed on paper, so the reading text is dark ink on cream. */
#install { word-break: keep-all; overflow-wrap: anywhere; overflow-x: clip; }
#install {
  --pp: #f8eed8;
  --pp-2: #f0e1bf;
  --pp-3: #e2cb9b;
  --pp-edge: #c7a670;
  --pp-ink: #34200f;
  --pp-ink2: #45301c;
  --pp-mute: #5e4128;   /* 7:1 on the paper */
}

/* ---------------------------------------------------------------- the wall */
#install .wall {
  position: relative; isolation: isolate;
  max-width: 1120px; padding: 44px 40px 48px;
  background:
    radial-gradient(ellipse 56% 34% at 50% 0%, rgba(255, 176, 90, .2), transparent 72%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 0, 0, .45), transparent 70%),
    repeating-linear-gradient(90deg,
      #1e1009 0 4px, #4a2b17 4px 6px, #3a2212 6px 40px, #351f10 40px 42px, #3a2212 42px 92px,
      #1e1009 92px 96px, #47291a 96px 98px, #36200f 98px 150px, #311c0e 150px 152px, #36200f 152px 188px),
    #36200f;
  box-shadow: 0 0 0 4px var(--wood-0), inset 0 0 60px rgba(0, 0, 0, .5), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
#install .wall::before {
  /* the beam the wall hangs from, with a nail at each end */
  content: ""; position: absolute; left: -12px; right: -12px; top: -16px; height: 20px; z-index: 1;
  background:
    linear-gradient(#cfb487, #cfb487) left 14px top 8px / 4px 4px no-repeat,
    linear-gradient(#cfb487, #cfb487) right 14px top 8px / 4px 4px no-repeat,
    var(--plank);
  box-shadow: 0 0 0 4px var(--wood-0), 0 10px 14px -6px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------- the manuals: one at a time behind index tabs */
#install .manuals { position: relative; display: grid; gap: 36px; }
#install .manuals.has-switch { gap: 0; }
#install .manual { position: relative; filter: drop-shadow(0 14px 0 rgba(0, 0, 0, .35)); }
#install .manuals.has-switch .manual:not(.is-shown) { display: none; }

#install .paper {
  position: relative;
  padding: 30px 40px 32px;
  color: var(--pp-ink2);
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(255, 252, 240, .75), transparent 72%),
    linear-gradient(var(--pp-2), var(--pp-3));
  box-shadow: inset 0 -6px 0 var(--pp-edge), inset 0 0 0 2px rgba(90, 55, 25, .16);
  clip-path: var(--notch);
}
#install .manuals.has-switch .paper { clip-path: none; }
/* a pushpin in the paper's top right corner */
#install .manual .paper::after {
  content: ""; position: absolute; right: 18px; top: 12px; width: 16px; height: 20px; pointer-events: none;
  background:
    linear-gradient(#fff1d8, #fff1d8) 4px 2px / 4px 4px no-repeat,
    linear-gradient(#d2402c, #d2402c) 2px 0 / 12px 12px no-repeat,
    linear-gradient(#d2402c, #d2402c) 0 2px / 16px 8px no-repeat,
    linear-gradient(#8f2a1c, #8f2a1c) 2px 10px / 12px 2px no-repeat,
    linear-gradient(#5e4128, #5e4128) 7px 12px / 2px 8px no-repeat;
  filter: drop-shadow(3px 3px 0 rgba(59, 36, 20, .3));
}

#install .manual-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 2px dashed rgba(59, 36, 20, .24);
  color: var(--pp-ink);
}
#install .manual-head h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: var(--t-head); line-height: 1.1; color: var(--pp-ink); }
#install .manual-head h3 small { font: var(--t-label); font-weight: 500; line-height: 1; color: var(--pp-mute); }
#install .manual .crate-mine { position: static; transform: none; margin-left: auto; box-shadow: none; }
#install .manual .crate-mine[hidden] { display: none; }
/* with the tabs, the tab names the paper: its own heading stays for screen readers only */
#install .manuals.has-switch .manual-head {
  position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* index tabs on the paper's top edge: wooden when closed, the paper itself when open */
#install .os-switch { display: flex; gap: 6px; padding: 0 0 0 16px; }
#install .os-switch button {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 2px 20px 0; border: 0; cursor: pointer;
  font: var(--t-head); line-height: 1; color: var(--ink-hi); text-align: left;
  background: var(--wood-3);
  box-shadow: inset 0 4px 0 var(--wood-4), inset 0 -4px 0 rgba(0, 0, 0, .35), inset 4px 0 0 rgba(0, 0, 0, .15);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% 100%, 0 100%);
}
#install .os-switch button .ico { width: 20px; height: 20px; color: var(--amber-hi); }
#install .os-switch button small { font: var(--t-label); font-weight: 500; line-height: 1; color: var(--ink); }
#install .os-switch button:hover { background: var(--wood-4); }
#install .os-switch button[aria-pressed="true"] {
  color: var(--pp-ink);
  background: linear-gradient(#fdf6e6, var(--pp-2) 120%);
  box-shadow: none;
}
#install .os-switch button[aria-pressed="true"] .ico { color: var(--rust); }
#install .os-switch button[aria-pressed="true"] small { color: var(--pp-mute); }
#install .os-switch button:focus-visible { outline-offset: -5px; }
#install .os-switch .tab-name { white-space: nowrap; }
#install .tab-mine { padding: 4px 7px; font: var(--t-badge); color: #06221e; background: var(--teal); }

/* ---------------------------------------------------------------- steps: a 2 × 2 grid on the page */
#install .steps {
  margin: 0; padding: 0; list-style: none; counter-reset: s;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px;
}
#install .steps li { position: relative; padding-left: 46px; counter-increment: s; font: var(--t-body); color: var(--pp-ink2); text-wrap: pretty; }
#install .steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font: 800 15px/1 var(--sans); color: var(--pp);
  background: var(--rust); box-shadow: inset 0 -4px 0 #6a2415;
  clip-path: var(--notch);
}
#install .steps .lead { display: block; margin: 0 0 8px; font: var(--t-head); color: var(--pp-ink); }

#install .paper code {
  font: var(--t-mono); line-height: 1.5; color: #5c2c10;
  background: rgba(70, 40, 18, .1); box-shadow: inset 0 -2px 0 rgba(70, 40, 18, .14);
  padding: 2px 6px;
}
#install .paper strong { color: var(--pp-ink); }
/* a file name keeps its particle (…zip을): no line may start with 을 */
#install .nw { white-space: nowrap; }

/* things you click: dark keys on paper. Left unscoped on purpose: the hero's two keys (.hero .key) build on
   this rule (notch, padding), so scoping it would change the hero. */
.key {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  padding: 4px 8px 5px; font: var(--t-label); font-weight: 700; line-height: 1; color: var(--pp);
  background: var(--pp-ink); box-shadow: inset 0 -3px 0 #120a04;
  clip-path: var(--notch); white-space: nowrap;
}
#install .to { margin: 0 2px; font: 700 14px/1 var(--sans); color: var(--pp-mute); }

/* menu paths: crumbs joined by › (inline, so a particle like 에서 stays glued to the last crumb) */
#install .path > span {
  padding: 1px 7px 2px; font-size: 15px; white-space: nowrap;
  color: var(--pp-ink); background: rgba(70, 40, 18, .07); box-shadow: inset 0 0 0 1px rgba(70, 40, 18, .3);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#install .path .sep { margin-left: 5px; font: 700 15px/1 var(--sans); font-style: normal; color: var(--pp-mute); }
#install .combo { white-space: nowrap; }
/* the "if a warning appears" branch of a step */
#install .branch {
  display: block; margin-top: 8px; padding: 6px 0 2px 14px;
  box-shadow: inset 2px 0 0 rgba(70, 40, 18, .28);
}
#install .branch .path { display: block; margin-top: 4px; }
#install .path > .go { font-weight: 700; color: var(--pp); background: var(--pp-ink); box-shadow: inset 0 -2px 0 #120a04; }

#install .note {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px;
  padding: 5px 10px; font: var(--t-small); line-height: 1.4; color: var(--pp-ink2);
  background: rgba(70, 40, 18, .08);
}
#install .note .ico { color: var(--rust); }

/* one chip style for every action on the wall: issue links, ledger downloads, the notes toggle, "more" */
#install :is(.issue-link, .rel-chip) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 40px;
  margin: 0; padding: 0 13px; border: 0; cursor: pointer;
  font: var(--t-label); font-weight: 700; line-height: 1; color: var(--pp-ink); text-decoration: none; white-space: nowrap;
  background: rgba(255, 250, 236, .45);
  box-shadow: inset 0 0 0 2px var(--pp-ink), inset 0 -5px 0 rgba(70, 40, 18, .14);
}
#install :is(.issue-link, .rel-chip):hover { color: var(--pp); background: var(--pp-ink); }
#install :is(.issue-link, .rel-chip) .ico { width: 14px; height: 14px; }
#install .issue-link { display: flex; margin-top: 12px; }
#install .issue-link .ico { width: 12px; height: 12px; }

/* what the input permission is used for: printed at the foot of the macOS page, next to the permission step */
#install .privacy {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start;
  margin-top: 26px; padding: 16px 20px;
  background: rgba(70, 40, 18, .07); box-shadow: inset 0 0 0 2px rgba(70, 40, 18, .22);
}
#install .privacy-ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--pp); background: var(--pp-ink); clip-path: var(--notch); }
#install .privacy-ico .ico { width: 20px; height: 20px; }
#install .privacy h4 { font: var(--t-title); color: var(--pp-ink); }
#install .privacy p { margin-top: 4px; font: var(--t-body); line-height: 1.7; color: var(--pp-ink2); text-wrap: pretty; }

/* ---------------------------------------------------------------- 문제 해결 (the third paper) */
#install .qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin: 0; }
#install .qa dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: var(--t-head); color: var(--pp-ink); }
#install .qa dt .ico { width: 20px; height: 20px; color: var(--rust); }
#install .qa dt small { padding: 4px 7px; font: var(--t-label); font-weight: 600; line-height: 1; color: var(--pp-ink2); box-shadow: inset 0 0 0 1px rgba(70, 40, 18, .35); }
#install .qa dd { margin: 10px 0 0 32px; font: var(--t-body); color: var(--pp-ink2); text-wrap: pretty; }

/* ---------------------------------------------------------------- the release ledger, pinned under the manual */
#install .ledger { position: relative; margin-top: 44px; scroll-margin-top: 96px; }
#install .ledger::before, #install .ledger::after {
  /* two strips of tape holding the sheet to the boards */
  content: ""; position: absolute; z-index: 1; top: -12px; width: 76px; height: 22px;
  background: rgba(238, 220, 178, .62);
  clip-path: polygon(0 0, 100% 0, 95% 25%, 100% 50%, 95% 75%, 100% 100%, 0 100%, 5% 75%, 0 50%, 5% 25%);
}
#install .ledger::before { left: 28px; rotate: -4deg; }
#install .ledger::after { right: 28px; rotate: 3deg; }
#install .ledger-paper { padding: 28px 40px 30px; filter: drop-shadow(0 14px 0 rgba(0, 0, 0, .35)); }
#install .ledger-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding-bottom: 14px; border-bottom: 2px dashed rgba(59, 36, 20, .24);
}
#install .ledger-head h3 { font: var(--t-head); color: var(--pp-ink); }
#install .ledger-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  font: var(--t-label); color: var(--rust); text-decoration-color: rgba(143, 52, 32, .4);
}
#install .ledger-all:hover { color: var(--pp-ink); }
#install .ledger-all .ico { width: 12px; height: 12px; }
#install .ledger-update {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 6px;
  font: var(--t-body); color: var(--pp-ink2); text-wrap: pretty;
}
#install .ledger-update .ico { margin-top: 5px; color: var(--rust); }

#install .releases { margin: 0; padding: 0; list-style: none; }
#install .rel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(70, 40, 18, .18);
}
#install .rel:last-child { border-bottom: 0; }
#install .rel[hidden] { display: none; }
#install .rel-head { display: grid; grid-template-columns: 76px 52px 104px minmax(0, 1fr); align-items: center; min-width: 0; }
#install .rel-tag { grid-column: 1; font: var(--t-mono); font-size: 15px; color: var(--pp-ink); white-space: nowrap; }
#install .rel-new { grid-column: 2; justify-self: start; padding: 4px 6px; font: var(--t-badge); color: #06221e; background: var(--teal); }
#install .rel-date { grid-column: 3; font: 500 15px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--pp-mute); }
#install .rel-title { grid-column: 4; font: 600 16px/1.5 var(--sans); color: var(--pp-ink); text-wrap: pretty; }
#install .rel.is-latest .rel-tag { color: var(--rust); font-weight: 700; }

#install .rel-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#install .rel-chip small { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--pp-mute); }
#install .rel-chip:hover small { color: var(--pp-3); }
#install .rel-toggle::after { content: ""; border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
#install .rel-toggle[aria-expanded="true"] { background: rgba(70, 40, 18, .12); }
#install .rel-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
#install .rel-notes { grid-column: 1 / -1; max-width: 680px; padding: 4px 0 8px 76px; }
#install .rel-notes[hidden] { display: none; }

#install .older-more { width: 100%; min-height: 46px; margin-top: 14px; font-size: 15px; }
#install .older-more::after { content: ""; border-top: 6px solid currentColor; border-left: 5px solid transparent; border-right: 5px solid transparent; }
#install .older-more[aria-expanded="true"]::after { transform: rotate(180deg); }

/* receipts (release notes): a whiter slip with torn teeth, lying on the ledger */
#install .receipt {
  --teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4' shape-rendering='crispEdges'%3E%3Cg fill='%23fffaee'%3E%3Crect x='0' y='0' width='8' height='1'/%3E%3Crect x='1' y='1' width='6' height='1'/%3E%3Crect x='2' y='2' width='4' height='1'/%3E%3Crect x='3' y='3' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; margin: 14px 0 10px;
  padding: 24px 28px 22px;
  background: #fffaee; color: #2e2013;
  font-size: 16px; line-height: 1.7;
  filter: drop-shadow(0 6px 0 rgba(70, 40, 18, .22));
}
#install .receipt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: var(--teeth) 0 0 / 16px 8px repeat-x; }
#install .receipt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; background: var(--teeth) 0 0 / 16px 8px repeat-x; transform: scaleY(-1); }
#install .receipt-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  font: var(--t-label); font-weight: 500; line-height: 1.2; color: var(--pp-mute);
  border-bottom: 2px dashed #b9a47e;
}
#install .md > :first-child { margin-top: 0; }
#install .md p { margin: 10px 0; }
#install .md h4, #install .md h5, #install .md h6 {
  margin: 18px 0 8px; padding-top: 14px;
  font: 700 15px/1.4 var(--sans); color: #7c3a1c;
  border-top: 1px dashed #c9b48c;
}
#install .md h4:first-child, #install .md h5:first-child { border-top: 0; padding-top: 0; }
#install .md ul, #install .md ol { margin: 8px 0; padding-left: 20px; }
#install .md ul { list-style: none; padding-left: 18px; }
#install .md ul > li { position: relative; }
#install .md ul > li::before { content: ""; position: absolute; left: -16px; top: .72em; width: 6px; height: 6px; background: #a2482a; }
#install .md li + li { margin-top: 6px; }
#install .md strong { color: #1d130a; }
#install .md a { color: #7c3a1c; }
#install .md code { background: #ecdfc2; color: #3b2414; white-space: normal; }
#install .md blockquote { margin: 10px 0; padding-left: 12px; border-left: 4px solid #c9b48c; color: #5d4630; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  /* ledger rows stack: version line, title, then the chips */
  #install .rel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  #install .rel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  #install .rel-title { flex-basis: 100%; margin-top: 2px; }
  #install .rel-act { justify-content: flex-start; }
  #install .rel-notes { padding: 0; }
}
@media (max-width: 1000px) {
  /* three tabs on a narrower paper: the OS name says enough, the chip size line goes */
  #install .os-switch button { padding: 2px 14px 0; gap: 8px; }
  #install .os-switch button small { display: none; }
}
@media (max-width: 860px) {
  #install .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #install .qa { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  #install .wall {
    padding: 28px 10px 16px; margin-left: -6px !important; margin-right: -6px !important;
    background:
      radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255, 176, 90, .2), transparent 72%),
      repeating-linear-gradient(90deg, #1e1009 0 4px, #4a2b17 4px 6px, #3a2212 6px 64px, #36200f 64px 120px),
      #36200f;
  }
  #install .wall::before { left: -6px; right: -6px; }
  #install .os-switch { padding: 0; gap: 4px; }
  #install .os-switch button {
    flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
    gap: 6px; min-height: 64px; padding: 8px 4px 6px; text-align: center;
  }
  #install .os-switch button small { display: none; }
  #install .os-switch .tab-name { white-space: nowrap; }
  #install .tab-mine { justify-self: center; }
  #install .paper, #install .ledger-paper { padding: 24px 16px 22px; }
  #install .manual .paper::after { right: 10px; top: 8px; }
  #install .steps li { padding-left: 42px; }
  #install .privacy { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  #install .qa dd { margin-left: 0; }
  #install .ledger { margin-top: 32px; }
  #install .ledger::before { left: 14px; }
  #install .ledger::after { right: 14px; }
  #install .ledger-all { margin-left: 0; }
  #install .issue-link { min-height: 46px; }
  /* phones: the ledger chips become one row of real buttons */
  #install .rel-act { justify-content: stretch; }
  #install .rel-chip { flex: 1 1 auto; min-height: 44px; padding: 0 10px; }
  #install .receipt { padding: 22px 16px 20px; }
}
@media (max-width: 440px) {
  /* the three ledger chips fit one row: the OS name already says which build it is */
  #install .rel-chip .ico { display: none; }
  #install .os-switch button { font: 700 16px/1.1 var(--sans); }
}
@media (max-width: 380px) {
  #install .rel-act { flex-wrap: wrap; }
  #install .rel-toggle { flex-basis: 100%; }
}
@media (max-width: 340px) {
  /* "animalbar-vX.Y.Z-windows.zip을" fits the 320px paper with slimmer code padding */
  #install .steps code { padding-left: 4px; padding-right: 4px; }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#install { --sec-gap: 120px; }
@media (max-width: 760px) { #install { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/07-howto.css */
/* ============================================================ 게임 방법: 등불 길 (a route of hanging lanterns)
   Four wooden signs hang from one rope (built by 07-howto.js) and pick one stretch of the route at a time:
   1–3 beside the stall where the game starts, 4–7 beside the shop book, 8–11 beside the seven skill slots,
   and the settings tips. Without JavaScript all four stretches stay open, each under its own heading. */
/* Korean: wrap between words, never inside one (뽑고/켜요 must not split) */
#howto { word-break: keep-all; overflow-wrap: anywhere; overflow-x: clip; }
#howto .ht-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- lantern (pixel SVG symbol, number on top) */
#howto .lan {
  position: relative; z-index: 2; display: block; flex: none;
  width: 36px; height: 51px;            /* 3px per lantern pixel */
}
#howto .lan svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 138, 58, .6)); }
#howto .lan::before {
  /* warm pool of light around the lantern */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 260%; height: 220%; transform: translate(-50%, -48%);
  background: radial-gradient(closest-side, rgba(255, 158, 70, .30), rgba(255, 120, 40, .10) 55%, transparent);
  pointer-events: none;
  animation: ht-flk 5.2s steps(1, end) infinite;
}
#howto .lan b {
  position: absolute; left: 0; right: 0; top: 18px;
  font: 800 13px/1 var(--sans); color: #3a1806; text-align: center; font-variant-numeric: tabular-nums;
}
#howto .lan-big { width: 48px; height: 68px; }  /* 4px per lantern pixel */
#howto .lan-big b { top: 24px; font-size: 16px; }
@keyframes ht-flk {
  0%, 100% { opacity: 1; }
  44% { opacity: 1; }
  46% { opacity: .62; }
  50% { opacity: 1; }
  78% { opacity: .85; }
  81% { opacity: 1; }
}

/* ---------------------------------------------------------------- one stretch: a picture beside its lanterns */
.ht-body {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center;
}
.ht-fig { margin: 0; }
.ht-fig figcaption { margin-top: 12px; text-align: center; font: var(--t-small); color: var(--ink); }
.ht-first { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.ht-first::before {
  /* the cord the lanterns hang on */
  content: ""; position: absolute; left: 22px; top: -24px; bottom: 48px; width: 4px;
  background: repeating-linear-gradient(180deg, #9a7650 0 4px, #5f4429 4px 8px);
  -webkit-mask: linear-gradient(transparent, #000 24px);
          mask: linear-gradient(transparent, #000 24px);
}
.ht-first > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; align-items: start; }
.ht-first > li:nth-child(2) .lan::before { animation-delay: -1.7s; }
.ht-first > li:nth-child(3) .lan::before { animation-delay: -3.1s; }
.ht-first h4 { margin-top: 12px; font: var(--t-head); color: var(--ink-hi); }
.ht-first p { margin-top: 6px; font-size: 16px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
#howto strong { color: var(--amber-hi); }

/* a small question under step 2 that unfolds the rules for coins on the floor */
.ht-q { margin-top: 10px; }
.ht-q summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none;
  font: 600 15px/1.4 var(--sans); color: var(--amber-hi);
}
.ht-q summary::-webkit-details-marker { display: none; }
.ht-q summary::after { content: ""; border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.ht-q[open] summary::after { transform: rotate(180deg); }
.ht-q summary:hover { color: #fff3d6; }
.ht-q ul { margin: 6px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed rgba(241, 227, 198, .16); }
.ht-q li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ht-q li + li { margin-top: 6px; }
.ht-q li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--amber-lo); }

/* ---------------------------------------------------------------- framed game windows (cream pixel frame, like the game's own UI cards) */
.ht-frame {
  position: relative; display: block; width: 100%;
  margin: 0; padding: 4px 4px 8px; border: 0; cursor: zoom-in;
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) bottom / 100% 4px no-repeat,
    var(--paper);
  clip-path: var(--notch);
  transition: transform .18s steps(3, end);
}
/* the notch clip-path hides an outer focus ring: paint it over the cream border instead */
.ht-frame:focus-visible { outline-width: 4px; outline-offset: -4px; }
.ht-frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 100%;
  background: #10140f;
}
.ht-frame::after {
  /* thin dark keyline inside the cream border + a soft vignette */
  content: ""; position: absolute; inset: 4px 4px 8px; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(59, 36, 20, .55), inset 0 0 36px rgba(0, 0, 0, .28);
}
.ht-frame:hover { transform: translateY(-4px); }
.ht-zoom {
  position: absolute; right: 14px; bottom: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px 6px;
  font: var(--t-label); font-weight: 700; line-height: 1; color: #2a1407; background: var(--amber);
  box-shadow: inset 0 -3px 0 var(--amber-lo);
  opacity: 0; transition: opacity .15s;
}
.ht-zoom .ico { width: 12px; height: 12px; }
.ht-frame:hover .ht-zoom, .ht-frame:focus-visible .ht-zoom { opacity: 1; }
@media (hover: none) { .ht-zoom { opacity: .92; } }

/* ---------------------------------------------------------------- the four signs on one rope */
.ht-signs {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px;
  padding-top: 36px; margin-bottom: 52px;
}
.ht-signs::before {
  /* the rope, fading into the dark at both ends */
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px;
  background: repeating-linear-gradient(90deg, #9a7650 0 6px, #5f4429 6px 10px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ht-signs button {
  position: relative; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  transform-origin: 50% -26px;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5));
}
.ht-signs button::before, .ht-signs button::after {
  /* two short cords from the rope to the sign */
  content: ""; position: absolute; top: -26px; width: 4px; height: 26px;
  background: repeating-linear-gradient(180deg, #9a7650 0 4px, #5f4429 4px 8px);
}
.ht-signs button::before { left: 18px; }
.ht-signs button::after { right: 18px; }
.ht-sign-in {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px 12px 14px;
  font: var(--t-head); line-height: 1; color: var(--ink-hi); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  background:
    linear-gradient(rgba(255, 214, 160, .18), rgba(255, 214, 160, .18)) top / 100% 4px no-repeat,
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(0, 0, 0, .14) 60px 64px, transparent 64px 140px),
    var(--wood-3);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .2), inset -4px 0 0 rgba(0, 0, 0, .2);
  clip-path: var(--notch);
}
.ht-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 7px 9px 6px;
  font: 800 14px/1 var(--sans); color: #2a1407; text-shadow: none; background: var(--amber);
  box-shadow: inset 0 -3px 0 var(--amber-lo);
  clip-path: var(--notch);
}
.ht-n-gear { min-width: 40px; }
.ht-n .ico { width: 14px; height: 14px; }
.ht-signs button:hover { animation: ht-sway .5s steps(4, end); }
.ht-signs button:hover .ht-sign-in { background-color: var(--wood-4); }
.ht-signs button[aria-pressed="true"] { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(255, 160, 60, .45)); }
.ht-signs button[aria-pressed="true"] .ht-sign-in {
  color: var(--paper-ink); text-shadow: none;
  background: linear-gradient(var(--paper-2), var(--paper-2)) bottom / 100% 6px no-repeat, var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper-line);
}
.ht-signs button[aria-pressed="true"] .ht-n { color: var(--paper); background: var(--rust); box-shadow: inset 0 -3px 0 #6a2415; }
.ht-signs button:focus-visible { outline-offset: 4px; }
@keyframes ht-sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 1.5deg; }
  75% { rotate: -1.5deg; }
}

/* the stretches: one shown at a time once the signs exist; their own headings stay for screen readers */
.ht-route.has-signs .ht-panel:not(.is-shown) { display: none; }
.ht-route.has-signs .ht-panel-h {
  position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ht-panel + .ht-panel { margin-top: 56px; }
.ht-route.has-signs .ht-panel + .ht-panel { margin-top: 0; }
.ht-panel-h { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font: var(--t-head); color: var(--ink-hi); }

/* ---------------------------------------------------------------- 4–11: lantern lists */
.ht-frame-book img { aspect-ratio: 896 / 690; }
.ht-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.ht-list > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 20px; align-items: start; }
.ht-list h4 { margin-top: 10px; font: var(--t-head); color: var(--ink-hi); }
.ht-list p { margin-top: 6px; font: var(--t-body); color: var(--ink); text-wrap: pretty; }
#howto .ht-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ht-keys span {
  padding: 5px 8px; font: var(--t-label); font-weight: 500; color: var(--ink-hi);
  background: rgba(255, 220, 160, .06); box-shadow: inset 0 0 0 1px rgba(241, 227, 198, .3);
}

/* ---------------------------------------------------------------- 8: the seven skills as inventory slots on a wooden tray */
.ht-skills {
  position: relative; padding: 22px 22px 18px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 170, 80, .12), transparent 72%),
    linear-gradient(var(--wood-5), var(--wood-5)) top / 100% 4px no-repeat,
    linear-gradient(var(--wood-0), var(--wood-0)) bottom / 100% 4px no-repeat,
    var(--wood-1);
  box-shadow: 0 0 0 4px var(--wood-0), inset 0 0 0 4px var(--wood-3), inset 0 0 40px rgba(0, 0, 0, .5), 0 26px 40px -16px rgba(0, 0, 0, .85);
}
.ht-skills-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 0 4px 14px; margin-bottom: 4px; border-bottom: 2px dashed rgba(255, 214, 160, .18);
  font: var(--t-head); color: var(--amber);
}
.ht-skills-h small { font: var(--t-small); color: var(--ink); }
.ht-skills-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.ht-skills-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 10px 4px 9px;
  border-bottom: 1px dashed rgba(241, 227, 198, .1);
}
.ht-slot {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: radial-gradient(circle at 50% 40%, #241911, #0e0a07 75%);
  box-shadow: inset 0 0 0 2px var(--amber-lo), inset 0 0 0 4px #0e0a07, inset 0 6px 0 4px rgba(255, 220, 160, .04);
  clip-path: var(--notch);
  animation: ht-cast var(--t, 5s) linear var(--d, 0s) infinite;
}
.ht-slot svg { display: block; animation: ht-hop var(--t, 5s) linear var(--d, 0s) infinite; }
.ht-skills-list li.is-passive .ht-slot { box-shadow: inset 0 0 0 2px rgba(201, 181, 144, .45), inset 0 0 0 4px #0e0a07; }
.ht-skills-list li.is-passive .ht-slot, .ht-skills-list li.is-passive .ht-slot svg { animation: none; }
.ht-mana {
  grid-column: 1; grid-row: 2; position: relative; display: block;
  width: 44px; height: 6px; margin-top: 6px;
  background: #2a1d14;
}
.ht-mana::after {
  /* split the bar into 8 cells */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 3.5px, #0a0706 3.5px 5.5px);
}
.ht-mana i {
  display: block; height: 100%; transform-origin: left center;
  background: linear-gradient(var(--amber-hi), var(--amber-hi)) top / 100% 2px no-repeat, var(--amber);
  animation: ht-fill var(--t, 5s) steps(8, end) var(--d, 0s) infinite;
}
.ht-skill-body { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.ht-skill-name { display: flex; align-items: center; gap: 8px; font: var(--t-title); font-size: 16px; line-height: 1.35; color: var(--ink-hi); }
.ht-skill-body p { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ht-badge { padding: 4px 6px; font: var(--t-badge); color: #06221e; background: var(--teal); }
@keyframes ht-fill {
  0% { transform: scaleX(0); }
  84% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes ht-cast {
  0%, 84% { background: radial-gradient(circle at 50% 40%, #241911, #0e0a07 75%); }
  88% { background: radial-gradient(circle at 50% 40%, #a8641e, #3a2410 80%); }
  100% { background: radial-gradient(circle at 50% 40%, #241911, #0e0a07 75%); }
}
@keyframes ht-hop {
  0%, 85%, 93%, 100% { translate: 0 0; }
  88% { translate: 0 -4px; }
}

/* ---------------------------------------------------------------- settings tips, on a wooden tray too */
.ht-body-tips { display: block; }
.ht-tips {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px;
  padding: 10px 28px 18px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 170, 80, .1), transparent 72%),
    linear-gradient(var(--wood-5), var(--wood-5)) top / 100% 4px no-repeat,
    var(--wood-1);
  box-shadow: 0 0 0 4px var(--wood-0), inset 0 0 0 4px var(--wood-3), inset 0 0 40px rgba(0, 0, 0, .5);
}
.ht-tips > div { padding: 16px 0; border-bottom: 1px dashed rgba(241, 227, 198, .14); }
.ht-tips > div:nth-last-child(-n + 2) { border-bottom: 0; }
.ht-tip-wide { grid-column: 1 / -1; }
.ht-tips dt { font: var(--t-head); color: var(--amber-hi); }
.ht-tips dd { margin: 8px 0 0; font: var(--t-body); color: var(--ink); text-wrap: pretty; }
.ht-tips em { font-style: normal; font-weight: 700; color: #2a1407; background: var(--amber); padding: 1px 6px; }
.ht-layers { margin: 8px 0 2px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 760px; }
.ht-layers li {
  padding: 10px 12px; font: var(--t-small); line-height: 1.45; color: var(--ink);
  background: rgba(255, 220, 160, .05); box-shadow: inset 0 0 0 1px rgba(241, 227, 198, .24);
}
.ht-layers b { display: block; margin-bottom: 2px; font: 700 16px/1.4 var(--sans); color: var(--ink-hi); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .ht-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ht-body .ht-fig { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 1000px) {
  /* tablets and phones: the four signs sit two by two, no rope */
  .ht-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 0; margin-bottom: 36px; }
  .ht-signs::before, .ht-signs button::before, .ht-signs button::after { display: none; }
  .ht-signs button { display: flex; min-width: 0; }
  .ht-sign-in { flex: 1; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 10px 10px 9px; white-space: normal; line-height: 1.1; }
  .ht-n { min-width: 44px; padding: 6px 7px 5px; }
}
@media (max-width: 760px) {
  .ht-first { gap: 26px; }
  .ht-first > li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  #howto .ht-first .lan-big { width: 36px; height: 51px; }
  #howto .ht-first .lan-big b { top: 18px; font-size: 13px; }
  .ht-first::before { left: 16px; }
  .ht-first h4 { margin-top: 8px; }
  .ht-list > li { gap: 16px; }
  .ht-skills { padding: 18px 12px 12px; }
  .ht-skills-list { grid-template-columns: minmax(0, 1fr); }
  .ht-tips { grid-template-columns: minmax(0, 1fr); padding: 6px 16px 12px; }
  .ht-tips > div:nth-last-child(2) { border-bottom: 1px dashed rgba(241, 227, 198, .14); }
}
@media (max-width: 400px) {
  .ht-sign-in { font: 700 16px/1.2 var(--sans); }
}
@media (max-width: 480px) {
  .ht-layers { gap: 4px; }
  .ht-layers li { padding: 8px 7px 7px; font-size: 14px; }
  .ht-layers b { font-size: 14px; }
}

/* the quiet stretch before this section: a little shorter than the base rhythm, so the page has no long dead
   gaps (same value in every section 02–07) */
#howto { --sec-gap: 120px; }
@media (max-width: 760px) { #howto { --sec-gap: 96px; } }

/* ---------------------------------------------------------------- src/css/08-footer.css */
/* ============================================================ footer
   The stall closes for the night: a lit closing line under the string lights, then the game itself
   lying along the bottom of the page (where it lives on a real desktop), resting on the stall counter. */
.foot {
  position: relative; margin-top: 72px; padding: 116px 0 0; text-align: center; overflow: clip;
  word-break: keep-all; overflow-wrap: anywhere;
  background:
    radial-gradient(ellipse 46% 120px at 50% 120px, rgba(255, 150, 60, .10), transparent 70%),
    linear-gradient(180deg, transparent, var(--night) 40%);
}
.lights-foot { top: 16px; }

/* ---------------------------------------------------------------- closing line */
.foot-close { position: relative; z-index: 3; max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; justify-items: center; }
.foot-h {
  font: var(--t-hero); color: var(--ink-hi); letter-spacing: 0;
  text-shadow: 0 4px 0 #000, 0 0 28px rgba(255, 170, 80, .22);
}
.foot-h em {
  font-style: normal; color: var(--amber);
  text-shadow: 0 4px 0 #000, 0 0 22px rgba(255, 170, 70, .6);
}
.foot-line .nw { white-space: nowrap; }
.foot-line { margin-top: 18px; max-width: 34em; font: 500 16px/1.6 var(--sans); color: var(--ink-2); text-wrap: balance; }

.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 30px; }
.foot-dl {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px 17px 20px;
  font: var(--t-display); line-height: 1; color: #2a1407; text-decoration: none;
  filter: drop-shadow(0 0 18px rgba(255, 160, 60, .4));
  transition: transform .12s steps(2, end);
}
.foot-dl::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--amber);
  box-shadow: inset 0 -4px 0 var(--amber-lo), inset 0 4px 0 var(--amber-hi);
  clip-path: var(--notch);
}
.foot-dl .ico { width: 20px; height: 20px; }
.foot-dl:hover { color: #2a1407; transform: translateY(-2px); }
.foot-dl:hover::before { background: #ffc361; }
.foot-dl:active { transform: translateY(1px); }
.foot-top {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px;
  font: var(--t-label); font-weight: 500; line-height: 1; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: rgba(241, 227, 198, .3); text-underline-offset: 5px;
}
.foot-top:hover { color: var(--amber-hi); text-decoration-color: currentColor; }
.foot-up { transform: rotate(-90deg); color: var(--amber); }

/* ---------------------------------------------------------------- the game along the floor */
.foot-scene {
  position: relative; z-index: 1;
  height: clamp(176px, 18.5vw, 266px);
  margin: -28px 0 0;
  overflow: hidden;
}
.foot-scene img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 100%;
  image-rendering: pixelated;
}
.foot-scene::before, .foot-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* night falls over the daytime sky; the animals and the ground stay lit */
.foot-scene::before {
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(10, 7, 6, .9) 22%, rgba(10, 7, 6, .55) 46%, rgba(10, 7, 6, .12) 66%, transparent 78%),
    linear-gradient(90deg, var(--night) 0%, rgba(10, 7, 6, 0) 16%, rgba(10, 7, 6, 0) 84%, var(--night) 100%);
}
/* warm lantern spill from the stall above */
.foot-scene::after {
  background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(255, 150, 60, .22), transparent 70%);
  mix-blend-mode: soft-light;
}

/* pixel stars in the darkened sky, two layers twinkling out of step */
.foot-stars {
  position: absolute; left: 0; right: 0; top: 12%; height: 26%; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
          mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.foot-stars::before, .foot-stars::after { content: ""; position: absolute; inset: 0; background-repeat: repeat-x; }
.foot-stars::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='120' shape-rendering='crispEdges'%3E%3Cg fill='%23f1e3c6'%3E%3Crect x='40' y='20' width='4' height='4'/%3E%3Crect x='212' y='12' width='2' height='2'/%3E%3Crect x='300' y='50' width='4' height='4' opacity='.6'/%3E%3Crect x='404' y='26' width='2' height='2'/%3E%3Crect x='98' y='72' width='2' height='2' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 120px;
  animation: foot-twinkle 5s steps(1, end) infinite;
}
.foot-stars::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='120' shape-rendering='crispEdges'%3E%3Cg fill='%23ffd388'%3E%3Crect x='150' y='30' width='2' height='6'/%3E%3Crect x='148' y='32' width='6' height='2'/%3E%3Crect x='470' y='16' width='2' height='6'/%3E%3Crect x='468' y='18' width='6' height='2'/%3E%3C/g%3E%3Cg fill='%23f1e3c6' opacity='.7'%3E%3Crect x='262' y='64' width='2' height='2'/%3E%3Crect x='600' y='44' width='4' height='4'/%3E%3Crect x='22' y='58' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 680px 120px; background-position: 90px 0;
  animation: foot-twinkle 5s steps(1, end) 2.5s infinite;
}
@keyframes foot-twinkle {
  0%, 100% { opacity: 1; }
  40% { opacity: .35; }
  52% { opacity: 1; }
  78% { opacity: .7; }
}

/* ---------------------------------------------------------------- the stall counter the scene rests on */
.foot-counter {
  position: relative; z-index: 2;
  background: var(--plank);
  box-shadow: 0 -4px 0 var(--wood-0), 0 4px 0 var(--wood-0), 0 24px 40px -12px rgba(0, 0, 0, .9);
}
.foot-counter::before {
  /* lantern light pooling on the counter top */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 140% at 50% 0%, rgba(255, 190, 110, .16), transparent 70%);
}
.foot-counter-in {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 20px 16px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
}
.foot-mark { display: block; padding: 6px; }
.foot-mark img { display: block; width: 152px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* cream paper slips laid on the counter */
.foot-links a {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px 12px;
  font: var(--t-label); line-height: 1; color: var(--paper-ink); text-decoration: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
}
.foot-links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  box-shadow: inset 0 -4px 0 var(--paper-2);
  clip-path: var(--notch);
}
.foot-links a .ico { color: var(--rust); }
.foot-links a:hover { color: #2a1407; }
.foot-links a:hover::before { background: var(--amber-hi); box-shadow: inset 0 -4px 0 var(--amber); }

/* ---------------------------------------------------------------- small print */
.credit {
  max-width: 52em; margin: 0 auto; padding: 24px 16px 36px;
  font-size: 15px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty;
}
.credit a { color: var(--ink); }
.credit a:hover { color: var(--amber-hi); }

@media (max-width: 760px) {
  .foot { margin-top: 96px; padding-top: 120px; }
  .foot-h { font-size: 36px; line-height: 1.25; }
  .foot-line { font-size: 15px; }
  .foot-cta { margin-top: 24px; flex-direction: column; gap: 10px; }
  .foot-scene { height: auto; margin-top: 4px; }
  /* show the whole road (castle to village) at every phone width */
  .foot-scene img { width: 250vw; height: auto; margin-left: calc(50% - 125vw); }
  .foot-scene::before {
    background:
      linear-gradient(180deg, var(--night) 0%, rgba(10, 7, 6, .85) 20%, rgba(10, 7, 6, .4) 46%, transparent 70%),
      linear-gradient(90deg, var(--night) 0%, rgba(10, 7, 6, 0) 5%, rgba(10, 7, 6, 0) 95%, var(--night) 100%);
  }
  .foot-top { min-height: 44px; padding: 0 10px; }
  .foot-dl { min-height: 56px; padding: 0 28px 2px 24px; }
  .foot-counter-in { flex-direction: column; justify-content: center; gap: 12px; padding: 16px 16px 20px; }
  .foot-mark { padding: 6px 12px; min-height: 44px; display: flex; align-items: center; }
  .foot-links { gap: 8px; }
  .foot-links a { min-height: 44px; padding: 0 14px; }
  .credit { padding: 24px 16px 36px; font-size: 15px; }
}