/* Design tokens shared by the app (app.html) and the viewer overlays (player.html). DESIGN.md at the repo root says
   what each one is for. The world is a stationery desk seen from above: a green desk mat, and on it paper goods, an
   envelope and a wax seal cut from the show's own materials in packages/engine/src/dom (world.ts, decor.ts,
   overlays.ts, cards.ts), so a page and the show it leads to are the same paper. Names stay clear of the engine's
   --yg-* variables. */
:root {
  /* the desk mat, and what is written straight on it (each ≥4.5:1 on the mat) */
  --yg-c-mat: hsl(160 26% 21%);
  --yg-c-mat-deep: hsl(160 14% 14%);   /* the pen tray, sunk into the mat */
  --yg-c-on-mat: hsl(150 30% 90%);
  --yg-c-on-mat-2: hsl(152 20% 76%);
  --yg-c-on-mat-3: hsl(154 12% 66%);   /* a step not reached yet: still readable, plainly further back */
  --yg-c-focus-mat: hsl(52 96% 72%);   /* the post-it yellow: a focus ring that lands on the mat */
  --yg-c-error-mat: hsl(10 90% 82%);
  --yg-mat-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .95 0 0 0 0 .88 .45 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* paper goods */
  --yg-c-paper: #fbf5e9;        /* the show's first card tint: letters, slips, the sheets of the six hands */
  --yg-c-paper-white: #fffaf0;  /* the show's nameplate: the name sticker, the paper buttons, the try-out scrap */
  --yg-c-ruled: hsl(36 32% 80%);  /* the lines on a letter */
  --yg-c-postit: hsl(52 96% 72%);
  --yg-c-tape: hsl(44 38% 80%);
  --yg-c-on-note: hsl(30 18% 14%); /* words on a post-it or on masking tape */
  --yg-c-clip: hsl(210 8% 58%);

  /* the envelope and its wax seal, as the show opens them */
  --yg-c-envelope: #e9d9bd;
  --yg-c-flap: #dcc7a3;
  --yg-c-flap-in: #f2e6cf;
  --yg-c-wax: #a8322d;
  --yg-c-wax-ring: hsl(3 50% 62%);
  --yg-c-on-wax: hsl(40 60% 95%);

  /* the four inks, as the player draws them (app/ink/colors.ts) */
  --yg-c-ink-black: #1f1c19;
  --yg-c-ink-navy: #1f2f5e;
  --yg-c-ink-brown: #5b3a22;
  --yg-c-ink-red: #a8322d;

  /* words on paper: three steps (each ≥4.5:1 on paper, paper-white and the envelope's pocket, but text-3 only on paper) */
  --yg-c-text: var(--yg-c-ink-black);
  --yg-c-text-2: hsl(30 12% 33%);
  --yg-c-text-3: hsl(32 9% 40%);
  --yg-c-on-ink: var(--yg-c-paper-white);

  /* lines on paper: soft for dividers, strong for the edges of controls (≥3:1 on paper) */
  --yg-c-line: hsl(36 30% 62%);
  --yg-c-line-strong: hsl(34 22% 48%);

  /* What a surface says in its own colors. These are paper's; the desk (app/desk.css .yg-desk) points them at the mat's
     and a post-it at its own, and a sheet of paper on the desk (.yg-on-paper) points them back. */
  --yg-c-words: var(--yg-c-text);
  --yg-c-words-2: var(--yg-c-text-2);
  --yg-c-edge: var(--yg-c-line-strong);  /* the edge of a control that is not chosen */
  --yg-c-focus: var(--yg-c-ink-navy);
  --yg-c-error: var(--yg-c-wax);
  --yg-c-scrim: hsl(30 12% 14% / 0.45);
  --yg-c-selection: var(--yg-c-flap);

  /* type: see the families by language below */
  --yg-fs-12: 0.75rem;
  --yg-fs-14: 0.875rem;
  --yg-fs-16: 1rem;
  --yg-fs-18: 1.125rem;
  --yg-fs-20: 1.25rem;
  --yg-fs-24: 1.5rem;
  --yg-fs-30: 1.875rem;
  --yg-fs-36: 2.25rem;
  --yg-fs-48: 3rem;

  /* space */
  --yg-s-4: 4px;
  --yg-s-8: 8px;
  --yg-s-12: 12px;
  --yg-s-16: 16px;
  --yg-s-24: 24px;
  --yg-s-32: 32px;
  --yg-s-48: 48px;
  --yg-s-64: 64px;

  /* corners: cut paper is nearly square, made things (stickers, trays, buttons) are rounded */
  --yg-r-paper: 2px;
  --yg-r-control: 12px;

  /* depth on the desk: light from the upper left, so a shadow falls right and down onto the green */
  --yg-shadow-rest: 1px 2px 2px hsl(160 45% 6% / 0.4);      /* lying flat on the mat */
  --yg-shadow-lifted: 2px 5px 8px hsl(160 45% 6% / 0.38), 1px 1px 2px hsl(160 45% 6% / 0.3); /* picked up, chosen */
  --yg-shadow-held: 6px 16px 24px hsl(160 45% 5% / 0.45), 2px 4px 6px hsl(160 45% 5% / 0.3); /* in the hand, pressed */

  /* motion */
  --yg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --yg-ease-fold: cubic-bezier(0.45, 0, 0.2, 1);
  --yg-t-fast: 150ms;
  --yg-t-base: 220ms;

  --yg-paper-texture: url("/textures/paper.png");

  /* the edge of the show's own buttons (packages/engine/src/dom/overlays.ts): chrome that sits beside them over the show */
  --yg-c-show-line: #b9a47f;
}

/* Type by language: one UI family, and the hands for what is handwritten (fonts.ts loads each ygc-<id> family). The
   display hand is the show's (DISPLAY_FONT in packages/core), the marker hand writes tape and post-its (MARKER_FONT).
   A page takes its <html lang>; a room's words in another language carry their own lang and switch with it. Each block
   states all three, since a var() inside a custom property is read on the element that declares it. :root weighs as
   much as :lang(), so the other languages come after it and win on their own <html lang>. */
:root, :lang(ko) {
  --yg-font-ui: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --yg-font-hand: "ygc-NanumGaRamYeonGgoc", var(--yg-font-ui);
  --yg-font-marker: "ygc-NanumSoMiCe", var(--yg-font-ui);
}
:lang(ja) {
  --yg-font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --yg-font-hand: "ygc-KleeOne", var(--yg-font-ui);
  --yg-font-marker: "ygc-ZenKurenaido", var(--yg-font-ui);
}
:lang(en) {
  --yg-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yg-font-hand: "ygc-PatrickHand", var(--yg-font-ui);
  --yg-font-marker: "ygc-ShantellSans", var(--yg-font-ui);
}

/* The public pages (apps/site), on the same desk as the app (DESIGN.md). build.ts puts apps/web/src/styles/tokens.css
   in front of this file, so every --yg-* value is the app's own. Here the desk holds sheets of paper taped down at the
   corners: reading happens on a sheet, message examples lie on the mat as slips in the show's card tints, a ready-made
   notice is a post-it, and a page's heading on the mat is written on masking tape. Wax red is not used: nothing is
   sealed on these pages. The handwriting fonts appear only in the wordmark and the landing's envelope scene. */

:root {
  --s-font: var(--yg-font-ui);
  --s-wide: 1120px;
  --s-col: 720px;
  --s-tape-edge: polygon(0 12%, 3% 0, 50% 4%, 97% 0, 99% 26%, 97% 52%, 100% 78%, 98% 100%, 50% 96%, 2% 100%, 0 74%, 3% 48%);
}
:root:lang(ja) { --s-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html {
  background-color: var(--yg-c-mat); background-image: var(--yg-mat-grain); color: var(--yg-c-on-mat);
  scrollbar-color: var(--yg-c-on-mat-3) var(--yg-c-mat); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  margin: 0; font-family: var(--s-font); font-size: var(--yg-fs-16); line-height: 1.6;
  word-break: keep-all; overflow-wrap: anywhere;
}
:root:lang(ja) body { word-break: normal; line-break: strict; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
::selection { background: var(--yg-c-postit); color: var(--yg-c-on-note); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--yg-c-focus-mat); outline-offset: 3px; }
.hand { font-weight: 400; letter-spacing: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: var(--yg-s-16); top: var(--yg-s-8); z-index: 2; padding: var(--yg-s-12) var(--yg-s-16);
  background: var(--yg-c-postit); color: var(--yg-c-on-note); font-weight: 600; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* paper: the show's card grain under a wash of the paper's tint, as the app paints it (app.css .yg-paper) */
.sheet, .slip, .desk-note, .steps li {
  border: 1px solid transparent; border-radius: var(--yg-r-paper);
  background-color: var(--tint, var(--yg-c-paper));
  background-image:
    linear-gradient(color-mix(in srgb, var(--tint, var(--yg-c-paper)) 55%, transparent), color-mix(in srgb, var(--tint, var(--yg-c-paper)) 55%, transparent)),
    var(--yg-paper-texture);
  background-size: auto, 256px 256px;
}

/* the frame: a wide header, one reading column, the pen tray at the foot */
.top, main, .tray { width: min(100% - 32px, var(--s-wide)); margin-inline: auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--yg-s-16); padding: var(--yg-s-16) 0; }
.brand { display: inline-flex; align-items: center; min-height: 48px; color: var(--yg-c-on-mat); font-size: var(--yg-fs-30); line-height: 1; text-decoration: none; }
.langs ul { display: flex; gap: var(--yg-s-4); padding: 0; list-style: none; }
.langs a, .langs span {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--yg-s-12);
  font-size: var(--yg-fs-14); font-weight: 600;
}
.langs a { color: var(--yg-c-on-mat-2); text-decoration: none; }
.langs a:hover { color: var(--yg-c-on-mat); text-decoration: underline; }
/* the page's language is the one with a strip of tape on it */
.langs span { color: var(--yg-c-on-note); }
.langs span::before {
  content: ""; position: absolute; inset: 8px 0; z-index: -1; background: var(--yg-c-tape);
  clip-path: var(--s-tape-edge); transform: rotate(-2deg);
}

.page-head, main > section { max-width: var(--s-col); margin-inline: auto; }
.page-head { padding: var(--yg-s-24) 0 var(--yg-s-48); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--yg-s-4) var(--yg-s-8); margin-bottom: var(--yg-s-16); padding: 0; list-style: none; font-size: var(--yg-fs-14); color: var(--yg-c-on-mat-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--yg-s-8); color: var(--yg-c-on-mat-3); }
.crumbs a { display: inline-block; padding: var(--yg-s-4) 0; color: var(--yg-c-on-mat-2); }
h1 { color: var(--yg-c-on-mat); font-size: var(--yg-fs-30); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
:root:lang(ja) h1, :root:lang(ja) h2 { word-break: auto-phrase; }
.lead { max-width: 40em; margin-top: var(--yg-s-16); color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-18); line-height: 1.6; text-wrap: pretty; }

/* a sheet of paper taped to the desk at its two top corners */
.sheet {
  position: relative; margin-bottom: var(--yg-s-64); padding: var(--yg-s-32) var(--yg-s-24);
  color: var(--yg-c-text); box-shadow: var(--yg-shadow-lifted);
}
.sheet::before, .sheet::after {
  content: ""; position: absolute; top: -12px; width: 96px; height: 28px; background: hsl(44 38% 80% / 0.88);
  clip-path: var(--s-tape-edge); box-shadow: none;
}
.sheet::before { left: var(--yg-s-24); transform: rotate(-4deg); }
.sheet::after { right: var(--yg-s-24); transform: rotate(3deg); }
.sheet ::selection { background: var(--yg-c-flap); color: var(--yg-c-text); }
.sheet :focus-visible { outline-color: var(--yg-c-ink-navy); }
.sheet h2 { margin-bottom: var(--yg-s-16); font-size: var(--yg-fs-24); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.sheet h3 { margin: 0 0 var(--yg-s-8); font-size: var(--yg-fs-18); font-weight: 700; line-height: 1.4; }
.sheet p, .sheet li { max-width: 65ch; text-wrap: pretty; }
/* the rhythm on a sheet: 16 between things, more above a heading than below it */
.sheet > * + * { margin-top: var(--yg-s-16); }
.sheet > * + h2 { margin-top: var(--yg-s-48); }
.sheet > * + h3 { margin-top: var(--yg-s-32); }
.sheet > * + .cta { margin-top: var(--yg-s-32); }
.sheet > h2 + *, .sheet > h3 + * { margin-top: 0; }
.sheet a { color: var(--yg-c-ink-navy); }
.list { display: grid; gap: var(--yg-s-8); padding: 0; list-style: none; }
.list li { position: relative; padding-left: var(--yg-s-24); }
.list li::before { content: ""; position: absolute; left: 6px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.sheet .faq h3 { margin: 0 0 var(--yg-s-8); }
.faq > div + div { margin-top: var(--yg-s-24); }
.index, .facts { padding: 0; list-style: none; }
.index li, .facts > div { display: grid; gap: var(--yg-s-4); padding: var(--yg-s-16) 0; border-top: 1px solid var(--yg-c-ruled); }
.index a { font-size: var(--yg-fs-18); font-weight: 700; line-height: 1.4; }
.index span { color: var(--yg-c-text-2); }
.facts dt { font-weight: 700; }
.facts dd { min-width: 0; }

/* on the mat: a heading on masking tape, words written straight on the green, slips and post-its */
.on-desk { margin-bottom: var(--yg-s-64); }
.on-desk > p, .on-desk > .list { max-width: 65ch; color: var(--yg-c-on-mat-2); text-wrap: pretty; }
.on-desk > p + p { margin-top: var(--yg-s-12); }
.on-desk > p a, .on-desk > .list a { color: var(--yg-c-on-mat); }
h2.tape {
  position: relative; isolation: isolate; display: inline-block; max-width: 100%; margin: 0 0 var(--yg-s-16) calc(-1 * var(--yg-s-8));
  padding: var(--yg-s-8) var(--yg-s-24); color: var(--yg-c-on-note); font-size: var(--yg-fs-20); font-weight: 700; line-height: 1.3;
  transform: rotate(-1.5deg); text-wrap: balance;
}
h2.tape::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yg-c-tape); clip-path: var(--s-tape-edge); }
.slips { margin-top: var(--yg-s-24); padding: 0; list-style: none; column-gap: var(--yg-s-24); }
.slip {
  break-inside: avoid; margin-bottom: var(--yg-s-24); padding: var(--yg-s-16); color: var(--yg-c-text);
  white-space: pre-line; box-shadow: var(--yg-shadow-rest); transform: rotate(var(--tilt, 0deg));
  transition: transform var(--yg-t-base) var(--yg-ease-out), box-shadow var(--yg-t-base) var(--yg-ease-out);
}
.slip ::selection, .slip::selection { background: var(--yg-c-flap); color: var(--yg-c-text); }
@media (hover: hover) { .slip:hover { transform: none; box-shadow: var(--yg-shadow-lifted); } }
.copy {
  max-width: 560px; margin: var(--yg-s-16) 0 var(--yg-s-32); padding: var(--yg-s-24); border: 1px solid transparent;
  background: var(--yg-c-postit); color: var(--yg-c-on-note); box-shadow: var(--yg-shadow-lifted); transform: rotate(-0.6deg);
}
.copy figcaption { margin-bottom: var(--yg-s-8); font-size: var(--yg-fs-14); font-weight: 700; }
.copy p { white-space: pre-line; -webkit-user-select: all; user-select: all; line-height: 1.7; }
.copy ::selection { background: var(--yg-c-ink-navy); color: var(--yg-c-paper-white); }

/* numbered slips: the order is the information */
.steps { display: grid; gap: var(--yg-s-24); margin-top: var(--yg-s-24); padding: 0; list-style: none; }
.steps li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--yg-s-12); padding: var(--yg-s-24) var(--yg-s-24) var(--yg-s-24) var(--yg-s-16);
  color: var(--yg-c-text); box-shadow: var(--yg-shadow-rest); transform: rotate(var(--tilt, 0deg));
}
.step-n { color: var(--yg-c-ink-navy); font-size: var(--yg-fs-30); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }

/* commemorative stamps: perforated paper whose holes show the mat, as on the app's new-room page */
.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yg-s-24) var(--yg-s-16); margin-top: var(--yg-s-24); padding: 0; list-style: none; }
.stamps li {
  transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(1px 2px 1.5px hsl(160 45% 6% / 0.45));
  transition: transform var(--yg-t-base) var(--yg-ease-out), filter var(--yg-t-base) var(--yg-ease-out);
}
.stamps a {
  position: relative; isolation: isolate; display: grid; align-content: start; gap: var(--yg-s-4); min-height: 128px; height: 100%;
  padding: var(--yg-s-24); border: 1px solid transparent; color: var(--yg-c-text); text-decoration: none;
  background: radial-gradient(circle, transparent 2.5px, var(--yg-c-paper-white) 3px) -4px -4px / 8px 8px;
}
.stamps a::before { content: ""; position: absolute; inset: 6px; z-index: -1; background: var(--tint); outline: 1px solid hsl(36 30% 62% / 0.7); outline-offset: -4px; }
.stamps strong { font-size: var(--yg-fs-16); font-weight: 700; line-height: 1.35; text-wrap: balance; }
:root:lang(ja) .stamps strong { word-break: auto-phrase; }
.stamps span { color: var(--yg-c-text-2); font-size: var(--yg-fs-14); line-height: 1.45; }
@media (hover: hover) {
  .stamps li:hover { transform: translateY(-4px); filter: drop-shadow(5px 12px 8px hsl(160 45% 5% / 0.45)); }
}
.on-desk > .stamps + .cta { margin-top: var(--yg-s-48); }

/* the one way forward: a paper button on the mat, an ink button on a sheet */
.cta { display: grid; justify-items: start; gap: var(--yg-s-12); margin-top: var(--yg-s-32); }
.on-desk > .cta:first-child { margin-top: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--yg-s-24);
  border: 1px solid transparent; border-radius: var(--yg-r-control); font-size: var(--yg-fs-18); font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none; touch-action: manipulation;
  transition: transform var(--yg-t-fast) ease-out, box-shadow var(--yg-t-fast) ease-out;
}
.btn-paper { background: var(--yg-c-paper-white); color: var(--yg-c-text); box-shadow: var(--yg-shadow-lifted); }
.btn-ink { background: var(--yg-c-ink-black); color: var(--yg-c-paper-white); }
.sheet .btn-ink { color: var(--yg-c-paper-white); }
.btn:active { transform: translateY(1px); box-shadow: var(--yg-shadow-rest); }
@media (hover: hover) { .btn-paper:hover { box-shadow: var(--yg-shadow-held); } .btn-ink:hover { background: var(--yg-c-ink-navy); } }
.cta-hint { max-width: 40em; color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-14); line-height: 1.5; }
.sheet .cta-hint { color: var(--yg-c-text-2); }

/* the landing: its heading beside the envelope a room becomes */
.hero { display: grid; gap: var(--yg-s-48); padding: var(--yg-s-24) 0 var(--yg-s-64); }
.hero h1 { font-size: var(--yg-fs-36); line-height: 1.15; }
.desk-scene { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin-inline: auto; }
.desk-envelope { position: absolute; left: 14%; top: 34%; width: 72%; transform: rotate(-3deg); filter: drop-shadow(2px 6px 8px hsl(160 45% 6% / 0.45)); }
.desk-envelope svg { display: block; width: 100%; height: auto; }
.desk-to { position: absolute; left: 0; right: 0; bottom: 9%; color: var(--yg-c-ink-brown); font-size: var(--yg-fs-24); line-height: 1; text-align: center; white-space: nowrap; }
.desk-note {
  position: absolute; padding: var(--yg-s-12); font-size: var(--yg-fs-18); line-height: 1.35;
  box-shadow: var(--yg-shadow-lifted); text-wrap: balance;
}
.desk-note-1 { left: 0; top: 2%; width: 50%; color: var(--yg-c-ink-navy); transform: rotate(-5deg); }
.desk-note-2 { right: 0; top: 9%; width: 46%; color: var(--yg-c-ink-black); transform: rotate(4deg); }
.desk-note-3 { right: 0; top: 52%; width: 40%; color: var(--yg-c-ink-brown); transform: rotate(-3deg); }
.desk figcaption { max-width: 36em; margin: var(--yg-s-24) auto 0; color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-14); text-align: center; text-wrap: balance; }

/* an ad slot: plain and labelled on the mat, as tall as a large rectangle before its unit arrives so nothing under it
   moves; it closes when the unit comes back empty or the script is blocked */
main > .ad { max-width: var(--s-col); margin: 0 auto var(--yg-s-64); }
.ad-label { margin-bottom: var(--yg-s-8); color: var(--yg-c-on-mat-3); font-size: var(--yg-fs-12); line-height: 1.5; }
.ad ins { display: block; min-height: 280px; }
.ad[hidden], .ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* a sample show: a photo of the show's stage lying on the desk, the recipient written by hand on its bottom margin.
   Pressed, it is picked up (straight, held) and the real player plays inside it. #ece4d4 is the show's stage. */
.sample-block { display: grid; justify-items: center; gap: var(--yg-s-12); }
.sample {
  position: relative; width: 100%; max-width: 880px; padding: var(--yg-s-12) var(--yg-s-12) 0; border: 1px solid transparent;
  border-radius: var(--yg-r-paper); background: var(--yg-c-paper-white); box-shadow: var(--yg-shadow-lifted);
  transform: rotate(-1deg); transition: transform var(--yg-t-base) var(--yg-ease-out), box-shadow var(--yg-t-base) var(--yg-ease-out);
}
/* the whole photo fits the screen's height, so a show playing in it is never cut off (landscape phones) */
.sample-square { max-width: min(560px, calc(100vh - 120px)); max-width: min(560px, calc(100svh - 120px)); transform: rotate(1.5deg); }
.sample-view { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #ece4d4; }
.sample-square .sample-view { aspect-ratio: 1 / 1; }
.sample-view img, .sample-view video, .sample-view iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sample figcaption { padding: var(--yg-s-12) var(--yg-s-8) var(--yg-s-16); color: var(--yg-c-ink-brown); font-size: var(--yg-fs-24); line-height: 1.2; text-align: center; }
.sample-play {
  position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: var(--yg-s-8); min-height: 52px;
  padding: 0 var(--yg-s-24) 0 var(--yg-s-16); border: 1px solid transparent; border-radius: var(--yg-r-control);
  background: var(--yg-c-paper-white); color: var(--yg-c-text); font-size: var(--yg-fs-18); font-weight: 700; line-height: 1.25;
  text-decoration: none; white-space: nowrap; box-shadow: var(--yg-shadow-lifted); transform: translate(-50%, -50%);
  touch-action: manipulation; transition: box-shadow var(--yg-t-fast) ease-out;
}
.sample-play svg { width: 20px; height: 20px; fill: var(--yg-c-ink-navy); }
.sample-play:focus-visible { outline-color: var(--yg-c-ink-navy); }
.sample-play:active { box-shadow: var(--yg-shadow-rest); }
.sample-square .sample-play { min-height: 44px; font-size: var(--yg-fs-16); }
@media (hover: hover) { .sample-play:hover { box-shadow: var(--yg-shadow-held); } .sample:hover { box-shadow: var(--yg-shadow-held); } }
.sample-block.playing .sample { transform: none; box-shadow: var(--yg-shadow-held); }
/* a recording of the app (a guide's how-to): a phone screen lying on the desk, its caption on the mat below */
.clip { display: grid; justify-items: center; gap: var(--yg-s-16); }
.clip video {
  display: block; width: min(320px, 100%); height: auto; border: 1px solid transparent; border-radius: var(--yg-r-paper);
  background: #ece4d4; box-shadow: var(--yg-shadow-lifted); transform: rotate(-1deg);
}
.clip figcaption { max-width: 36em; color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-14); text-align: center; text-wrap: balance; }
.sample-note { max-width: 40em; color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-14); line-height: 1.5; text-align: center; text-wrap: balance; }
:root:lang(ja) .sample-note { word-break: auto-phrase; }
.sample-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--yg-s-24); }
.sample-links[hidden], .sample-links a[hidden] { display: none; }
.sample-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--yg-c-on-mat); font-weight: 600; }
.hero-desk .sample-block { margin-top: var(--yg-s-8); }

/* a sample's messages: the question slip it answers, the message, the name it is signed with */
.letter { display: grid; gap: var(--yg-s-8); white-space: normal; }
.letter-q { color: var(--yg-c-text-2); font-size: var(--yg-fs-14); font-weight: 600; line-height: 1.4; }
.letter p { white-space: pre-line; }
.letter-from { justify-self: end; font-weight: 600; }
.letter-from::before { content: "\2014\00a0"; color: var(--yg-c-text-2); }

/* the pen tray at the foot of the desk */
.tray {
  margin-top: var(--yg-s-64); margin-bottom: var(--yg-s-32); padding: var(--yg-s-24); border-radius: var(--yg-r-control);
  background: var(--yg-c-mat-deep); box-shadow: inset 0 2px 6px hsl(160 45% 4% / 0.55); color: var(--yg-c-on-mat-2); font-size: var(--yg-fs-14);
}
.tray-brand { color: var(--yg-c-on-mat); font-weight: 600; }
.tray ul { display: flex; flex-wrap: wrap; gap: 0 var(--yg-s-16); margin: var(--yg-s-12) 0; padding: 0; list-style: none; }
.tray li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--yg-c-on-mat); }
.tray p + p { margin-top: var(--yg-s-4); }
.tray .tray-tip { margin-top: var(--yg-s-12); }
.tray-tip a { display: inline-flex; align-items: center; min-height: 44px; color: var(--yg-c-on-mat-2); text-underline-offset: 4px; }

/* '/': one way into each language */
.chooser { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--yg-s-48); min-height: 100vh; min-height: 100dvh; padding: var(--yg-s-48) 0; }
.chooser-envelope { width: min(200px, 56vw); transform: rotate(-3deg); filter: drop-shadow(2px 6px 8px hsl(160 45% 6% / 0.45)); }
.chooser-envelope svg { display: block; width: 100%; height: auto; }
.choices { display: grid; gap: var(--yg-s-24); width: min(100%, 400px); padding: 0; list-style: none; }
.choices a {
  display: grid; gap: var(--yg-s-8); padding: var(--yg-s-24); border: 1px solid transparent; border-radius: var(--yg-r-paper);
  background: var(--yg-c-paper-white); color: var(--yg-c-text); text-decoration: none; box-shadow: var(--yg-shadow-lifted);
  transform: rotate(-1.2deg); transition: transform var(--yg-t-base) var(--yg-ease-out), box-shadow var(--yg-t-base) var(--yg-ease-out);
}
.choices li + li a { transform: rotate(1deg); }
.choices a:focus-visible { outline-color: var(--yg-c-focus-mat); }
.choice-name { font-size: var(--yg-fs-36); line-height: 1.1; }
.choice-line { color: var(--yg-c-text-2); }
.choice-go { margin-top: var(--yg-s-8); color: var(--yg-c-ink-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .choices a:hover { transform: none; box-shadow: var(--yg-shadow-held); } }

@media (max-width: 559px) {
  .cta { justify-items: stretch; }
}
@media (min-width: 720px) {
  .page-head { padding: var(--yg-s-48) 0 var(--yg-s-64); }
  h1 { font-size: var(--yg-fs-36); }
  .sheet { padding: var(--yg-s-48); }
  .slips { columns: 2; }
  .facts > div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--yg-s-24); }
  .desk-scene { aspect-ratio: 6 / 5; }
  .desk-envelope { left: 17%; top: 28%; width: 64%; }
  .desk-to { font-size: var(--yg-fs-30); }
  .desk-note { padding: var(--yg-s-12) var(--yg-s-16); font-size: var(--yg-fs-24); }
  .desk-note-3 { top: 40%; width: 38%; }
  .sample-view { aspect-ratio: 16 / 10; }
  .sample:not(.sample-square) { max-width: min(880px, calc((100vh - 120px) * 1.6)); max-width: min(880px, calc((100svh - 120px) * 1.6)); }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 720px); }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--yg-s-64); padding: var(--yg-s-48) 0 96px; }
  .hero h1 { font-size: var(--yg-fs-48); }
  main > .sheet-wide, main > .desk-wide { max-width: 960px; }
  .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yg-s-32) var(--yg-s-48); }
  .faq > div + div { margin-top: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { grid-template-columns: none; align-content: start; padding: var(--yg-s-24); }
  .step-n { text-align: left; }
  .stamps { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--yg-s-32) var(--yg-s-24); }
  /* papers left on a desk are never quite in line */
  main > .sheet:nth-of-type(odd) { transform: translateX(-24px); }
  main > .sheet:nth-of-type(even) { transform: translateX(24px); }
  main > .sheet:nth-of-type(even)::before { left: 42%; }
  main > .sheet:nth-of-type(even)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .sheet::before, .sheet::after, h2.tape::before, .langs span::before { display: none; }
  .sample, .sample-play { border-color: CanvasText; }
}