/* One public-site theme. Legacy styles own geometry; this file owns paint,
   typography and controls. Activities and QR pages do not load this stylesheet. */
@import url('/assets/fonts/supplement-faces.css?v=20261030-system-1');
:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Eight background pigments. Light/shadow may vary their opacity. */
  --bg-paper: #f4f6f5;
  --bg-mist: #e5eef2;
  --bg-tide: #c9dbe5;
  --bg-blue: #416b85;
  --bg-night: #1f3446;
  --bg-deep: #172735;
  --bg-peach: #f0c4b5;
  --bg-violet: #d4cedf;
  /* Five foreground roles, reused on every page. */
  --fg-ink: #263d50;
  --fg-muted: #576b7b;
  --fg-light: #f4f6f5;
  --fg-light-muted: #c9dbe5;
  --fg-accent: #625a78;
  --type-caption: 12px;
  --type-label: 14px;
  --type-body: 16px;
  --type-section: 24px;
  --type-title: 32px;
  --site-font: 'Newsreader', 'Noto Serif SC', 'Noto Serif JP', 'Noto Serif KR', serif;
  --control-radius: 999px;
  --control-height: 44px;
  --control-gap: 8px;
  --arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Explicit theme ownership prevents a page-specific legacy selector from
   silently introducing a sixth type size or a different language font. */
body:is(.home-page, .document-page) {
  --font-text: var(--site-font) !important;
  --font-ui: var(--site-font) !important;
  --document-font: var(--site-font) !important;
  --paper: var(--bg-paper) !important;
  --paper-deep: var(--bg-mist) !important;
  --ink: var(--fg-ink) !important;
  --muted: var(--fg-muted) !important;
  --accent: var(--fg-accent) !important;
  --rust: var(--fg-accent) !important;
  --rust-strong: var(--fg-accent) !important;
  --line: color-mix(in srgb, var(--ink) 18%, transparent) !important;
  --surface: var(--bg-paper) !important;
  --reading-paper: var(--paper) !important;
  --reading-selected: var(--paper-deep) !important;
  --reading-rule: var(--line) !important;
  --terracotta: var(--fg-accent) !important;
  font-family: var(--site-font) !important;
  font-size: var(--type-body) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  font-optical-sizing: auto;
}
body:is(.home-page, .document-page) :where(*) {
  font-family: inherit !important;
}
/* The light App preview keeps its own ink, including on dark website chapters. */
body:is(.home-page, .document-page) :where(*):not(.phone-screens, .phone-screens *) {
  color: inherit !important;
}
/* The miniature App owns its cqw type scale; page typography must not flatten it. */
body:is(.home-page, .document-page) :where(*):not(.demo-screen, .demo-screen *) {
  font-size: inherit !important;
}
body:is(.home-page, .document-page) :is(h1, .hero-title):not(.demo-screen *) { font-size: var(--type-title) !important; line-height: 1.4; }
body:is(.home-page, .document-page) h2:not(.demo-screen *) { font-size: var(--type-section) !important; line-height: 1.5; }
body:is(.home-page, .document-page) h3:not(.demo-screen *) { font-size: var(--type-body) !important; line-height: 1.6; font-weight: 600; }
body:is(.home-page, .document-page) :is(p, li, .lede, .guide-intro, .guide-reader-caption, .maker-letter):not(.demo-screen *) { font-size: var(--type-body) !important; line-height: 1.85; }
body:is(.home-page, .document-page) :is(.lede, .guide-intro, .guide-reader-caption, .channel-pending, .membership-notes, .updated, .flip-hint, .screen-caption) { color: var(--muted) !important; }
body:is(.home-page, .document-page) :is(nav, .site-menu-links, .language-menu, .guide-nav, .reading-tools, .reading-toc, .guide-reader-toolbar, .guide-reader-select, .guide-reader-controls, .guide-permissions table, .membership-notes, .support-email):not(.demo-screen *) { font-size: var(--type-label) !important; }
body:is(.home-page, .document-page) :is(footer, footer p, small, .eyebrow, .updated, .channel-number, .channel-pending, .guide-breadcrumb, .guide-reader-number, .guide-reader-zoom, .screen-caption, .flip-hint, .hand-note, .reading-search-status, .reading-search-empty, .toy-label):not(.demo-screen *) { font-size: var(--type-caption) !important; }
body:is(.home-page, .document-page) :is(.support-email, .membership-notes p):not(.demo-screen *) { font-size: var(--type-label) !important; overflow-wrap: anywhere; }
body:is(.home-page, .document-page) :is(input, select, textarea):not(.demo-screen *) { font-size: var(--type-body) !important; }
body:is(.home-page, .document-page) :is(.guide-reader-select, .guide-reader-number) { line-height: 1.6; }
body:is(.home-page, .document-page) :is(.guide-reader-continuation strong, .reading-search-result strong):not(.demo-screen *) { font-size: var(--type-body) !important; }
body:is(.home-page, .document-page) :is(.reading-toc-title, .reading-search-header h2, .guide-reader-dialog h2, .reading-image-header h2, .membership-next h2):not(.demo-screen *) { font-size: var(--type-body) !important; }
body:is(.home-page, .document-page) :is(.guide-permissions caption, .membership-arrow):not(.demo-screen *) { font-size: var(--type-section) !important; }
body:is(.home-page, .document-page) :is(.guide-main, .reading-layout > .content) { border-top: 0; }
body:is(.home-page, .document-page) :is(.channel-number, .guide-nav a[aria-current], .reading-toc-links a[aria-current]) { color: var(--accent) !important; }
body:is(.home-page, .document-page) :is(.language-options, .guide-reader-dialog, .reading-search-dialog, .reading-image-dialog) { background: var(--paper); color: var(--ink); }
body:is(.home-page, .document-page) :is(.guide-reader-dialog, .reading-search-dialog, .reading-image-dialog)::backdrop { background: color-mix(in srgb, var(--bg-deep) 72%, transparent); }

/* Three control treatments: solid, outline, unframed. All share one capsule,
   typography, target height, arrow, alignment and state timing. */
body:is(.home-page, .document-page) :is([data-ui-control], .download-button, .support-action, .contact-link, .contact-actions a, .reading-search-trigger, .reading-directory-toggle, .reading-search-close, .reading-image-zoom, .reading-image-close, .guide-reader-mode, .guide-reader-close, .guide-reader-prev, .guide-reader-next, .story-controls button, .back-to-top, .home-menu-toggle, .site-menu-toggle, .language-menu > summary, .nav-download) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--control-radius) !important;
  box-shadow: none;
  background: transparent;
  color: var(--ink) !important;
  font-size: var(--type-label) !important;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, scale 110ms ease;
}
body:is(.home-page, .document-page) :is(.support-action, .contact-link, .contact-actions a, .reading-search-trigger, .reading-directory-toggle, .reading-search-close, .reading-image-zoom, .reading-image-close, .back-to-top, [data-ui-control='outline']) { border-color: var(--line); background: var(--paper); }
body:is(.home-page, .document-page) :is(.download-button, .support-action:not(.secondary-action), [data-ui-control='solid']) { background: var(--bg-blue); color: var(--fg-light) !important; border-color: transparent; }
body:is(.home-page, .document-page) :is([data-ui-control], .download-button, .support-action, .contact-link, .contact-actions a, .reading-search-trigger, .reading-directory-toggle, .reading-search-close, .reading-image-zoom, .reading-image-close, .guide-reader-mode, .guide-reader-close, .guide-reader-prev, .guide-reader-next, .story-controls button, .back-to-top, .nav-download) > :is(span, svg, small):not(.demo-screen *) { font-size: inherit !important; margin-inline: 0; flex-shrink: 0; }
body:is(.home-page, .document-page) :is(.download-button, .nav-download) > svg { width: 20px; height: 22px; }
body:is(.home-page, .document-page) :is(.contact-link, .support-action, .contact-actions a) { white-space: normal; }
body.contact-page .contact-channel :is(.support-action, .contact-link) { width: 320px; max-width:100%; min-height: 44px; height: auto; }
html:lang(zh) body.contact-page .contact-channel :is(.support-action, .contact-link) { width:144px; }
body.contact-page .contact-actions { width:100%; }
body:is(.home-page, .document-page) :is(.guide-reader-mode, .guide-reader-prev, .guide-reader-next) { text-decoration: none; }
body:is(.home-page, .document-page) .back-to-top { width: 44px; height: 44px; padding: 10px; background: var(--paper); }
body:is(.home-page, .document-page) :is(.home-menu-toggle, .site-menu-toggle, .language-menu > summary) { padding-inline: 10px; }
body:is(.home-page, .document-page) .reading-directory-toggle { display: none; }
body:is(.home-page, .document-page) .reading-search-trigger { width: 100%; }
body:is(.home-page, .document-page) .reading-search-trigger::before { width: 18px; height: 18px; flex-basis: 18px; }
body:is(.home-page, .document-page) :is(.guide-nav summary, .guide-nav a, .reading-toc-links a, .language-options a, .guide-reader-select) { border-radius: var(--control-radius); }
body:is(.home-page, .document-page) :is(.reading-search-result, .guide-reader-select) { text-align: start; }
body:is(.home-page, .document-page) .guide-reader-select { align-items: center; }
body:is(.home-page, .document-page) :is(.story-controls button.is-active, .reading-directory-toggle[aria-expanded='true'], .reading-image-zoom[aria-pressed='true']) { background: var(--paper-deep) !important; color: var(--ink) !important; }
body:is(.home-page, .document-page) :is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body:is(.home-page, .document-page) :is(.guide-reader-prev, .guide-reader-next):disabled { opacity: .4; cursor: default; }
@media (hover:hover) {
  body:is(.home-page, .document-page) :is([data-ui-control], .support-action, .contact-link, .contact-actions a, .reading-search-trigger, .reading-directory-toggle, .reading-search-close, .reading-image-zoom, .reading-image-close, .guide-reader-mode, .guide-reader-close, .guide-reader-prev, .guide-reader-next, .story-controls button, .back-to-top, .nav-download):hover:not(:disabled) { background: var(--paper-deep); border-color: var(--line); color: var(--ink) !important; transform: none; }
  body:is(.home-page, .document-page) :is(.download-button, .support-action:not(.secondary-action), [data-ui-control='solid']):hover { background: var(--bg-night); color: var(--fg-light) !important; transform: none; }
  body:is(.home-page, .document-page) .contact-link:hover span { translate: none; }
}
body:is(.home-page, .document-page) :is([data-ui-control], .download-button, .support-action, .contact-link, .story-controls button, .back-to-top):active { scale: .98; }
/* Text ink, rather than the font's asymmetric em box, is centered beside icons.
   site-system.js derives the offset from the loaded font metrics per label. */
body:is(.home-page, .document-page) .ui-label {
  display: block; min-width: 0; flex-shrink: 1 !important;
  transform: translateY(var(--label-ink-offset, 0px));
}
body:is(.home-page, .document-page) .back-to-top {
  width: 44px; height: 44px; padding: 10px; border-radius: 50% !important;
}
/* The Apple artwork occupies only part of its original viewBox. */
body.home-page .download-button > svg { width: 18px; height: 20px; }
/* A single stroked arrow; direction is the only variation. */
body:is(.home-page, .document-page) :is(.ui-arrow, .language-chevron) {
  display: inline-block; width: 18px; height: 18px; flex: 0 0 18px;
  padding: 0; margin: 0; border: 0; vertical-align: middle;
  background: currentColor; mask: var(--arrow-image) center / contain no-repeat;
  transform: rotate(var(--arrow-angle, 0deg)); translate: none;
}
.ui-arrow[data-direction='left'] { --arrow-angle: 180deg; }
.ui-arrow[data-direction='up'] { --arrow-angle: -90deg; }
.ui-arrow[data-direction='down'] { --arrow-angle: 90deg; }
.ui-arrow[data-direction='up-right'] { --arrow-angle: -45deg; }
body:is(.home-page, .document-page) .language-chevron { --arrow-angle: 90deg; }
body:is(.home-page, .document-page) details[open] > summary .language-chevron { --arrow-angle: -90deg; }
body:is(.home-page, .document-page) .guide-reader-zoom { display: inline-flex; align-items: center; gap: var(--control-gap); }
body:is(.home-page, .document-page) .guide-reader-continuation strong { display: inline-flex; align-items: center; gap: var(--control-gap); }
body:is(.home-page, .document-page) .reading-search-result::after { width:18px; height:18px; border:0; background:currentColor; mask:var(--arrow-image) center / contain no-repeat; transform:none; }

/* Ocean → warm window light → evening bar. Same pigments, existing motion. */
body.home-page .hero-stage { background: radial-gradient(ellipse at 48% 40%, var(--bg-paper), var(--bg-mist) 62%, var(--bg-tide)); }
body.home-page .hero-stage::before, body.home-page .hero-stage::after { background: var(--bg-paper); }
body.home-page .story-stage { --muted: var(--fg-muted); --line: color-mix(in srgb,var(--fg-ink) 18%,transparent); background: var(--bg-mist); }
body.home-page .story-wall { background: linear-gradient(105deg,var(--bg-paper),var(--bg-mist) 65%,var(--bg-tide)); }
body.home-page .story-window-light { background: linear-gradient(90deg,transparent 14%,color-mix(in srgb,var(--bg-paper) 70%,transparent) 14.3% 37%,transparent 37.2% 39%,color-mix(in srgb,var(--bg-paper) 40%,transparent) 39.3% 66%,transparent 66.3%); }
body.home-page .story-surface { background: linear-gradient(color-mix(in srgb,var(--bg-paper) 88%,transparent),color-mix(in srgb,var(--bg-mist) 88%,transparent)),url('/assets/web-20261028/demo-bar-bg.webp') center bottom/100% auto no-repeat; border-color:var(--bg-paper); box-shadow:none; }
body.home-page .story-stage[data-coast-chapter='1'] { background:var(--bg-mist); }
body.home-page .story-stage[data-coast-chapter='1'] .story-wall { background:linear-gradient(105deg,var(--bg-paper),var(--bg-mist) 70%,var(--bg-peach)); }
body.home-page :is(.story-stage[data-coast-chapter='2'], .memory-section, .closing, footer) { --ink:var(--fg-light); --muted:var(--fg-light-muted); --accent:var(--fg-light); --line:color-mix(in srgb,var(--fg-light) 18%,transparent); color:var(--fg-light) !important; }
body.home-page .story-stage[data-coast-chapter='2'] { background:var(--bg-night); color:var(--fg-light) !important; }
body.home-page .story-stage[data-coast-chapter='2'] .story-wall { background:radial-gradient(ellipse at var(--scene-phone-x) var(--scene-phone-y),color-mix(in srgb,var(--bg-blue) 45%,transparent),transparent 65%),linear-gradient(var(--bg-night),var(--bg-deep)); }
body.home-page .story-stage[data-coast-chapter='2'] .story-controls { --paper-deep:var(--bg-blue); }
body.home-page .story-celebration-glow { background:radial-gradient(ellipse 38% 65% at var(--scene-phone-x) var(--scene-phone-y),color-mix(in srgb,var(--bg-peach) 45%,transparent),transparent 80%); }
body.home-page .story-harbor-signal { background:radial-gradient(ellipse,color-mix(in srgb,var(--bg-tide) 20%,transparent) 12%,color-mix(in srgb,var(--bg-violet) 40%,transparent) 30%,transparent 70%); }
body.home-page .story-controls { padding:4px; gap:4px; border:0; border-radius:var(--control-radius); background:transparent; }
body.home-page .story-controls button { min-width:68px; }
body.home-page .story-copy::before, body.home-page .maker-intro::before { background:var(--bg-peach); }
body.home-page .memory-section { background:radial-gradient(ellipse at 78% 60%,var(--bg-night),transparent 56%),var(--bg-deep); }
body.home-page .memory-section::before { background:radial-gradient(ellipse at 75% 20%,var(--bg-tide),transparent 65%); }
body.home-page .memory-heading::before { background:var(--bg-peach); }
body.home-page .coaster-light { background:conic-gradient(from 127deg at 0 0,transparent 0deg,color-mix(in srgb,var(--bg-peach) 4%,transparent) 3deg,color-mix(in srgb,var(--bg-peach) 22%,transparent) 8deg,color-mix(in srgb,var(--bg-paper) 16%,transparent) 14deg,transparent 24deg); }
body.home-page .coaster-world::before { background:radial-gradient(ellipse,color-mix(in srgb,var(--bg-peach) 18%,transparent),transparent 72%); }
body.home-page .coaster-world::after { background:color-mix(in srgb,var(--bg-deep) 75%,transparent); }
body.home-page :is(.coaster-front,.coaster-back) { color:var(--fg-ink) !important; background-color:var(--bg-paper); }
body.home-page :is(.coaster-front,.coaster-back)::after { background:linear-gradient(135deg,color-mix(in srgb,var(--bg-paper) 24%,transparent),transparent 42%,color-mix(in srgb,var(--bg-night) 16%,transparent)); }
body.home-page .maker-story { background:var(--paper); }
body.home-page :is(.closing,footer) { background:var(--bg-night); }
body.home-page .closing::before { background:radial-gradient(ellipse at 70% 100%,var(--bg-violet),transparent 70%); }
body.home-page .closing .download-button { --ink:var(--fg-ink); background:var(--bg-paper); color:var(--fg-ink) !important; }
body.home-page .closing .download-button:hover { background:var(--bg-tide); }
body.home-page .demo-screen { font-size:var(--type-caption) !important; }
body.home-page :is(.mix-start > span,.mix-reset > span,.map-checkin) { line-height:1.5; border-radius:var(--control-radius) !important; color:var(--fg-light) !important; background:var(--bg-blue) !important; border:1px solid transparent; box-shadow:none; }
body.home-page .mix-reset > span { gap:var(--control-gap); padding-inline:12px; }
body.home-page .mix-reset > span > span:not(.ui-arrow) { display:inline; position:static; background:none; border:0; padding:0; width:auto; height:auto; translate:none; }
body.home-page :is(.mix-start > span,.mix-reset > span,.map-checkin) .ui-arrow { position:static; inset:auto; translate:none; }
body.home-page .map-checkin span { color:inherit !important; }
@media(max-width:900px) {
  body:is(.home-page,.document-page) .reading-directory-toggle { display:inline-flex; }
}
@media(max-width:600px) {
  body.home-page .home-menu-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 12px; }
  body.home-page .home-menu-links a { font-size:var(--type-caption) !important; padding:8px 0; gap:4px; white-space:nowrap; overflow-wrap:normal; }
  body.home-page .home-menu-links .nav-download > .ui-arrow { display:inline-block; }
  body:is(.home-page,.document-page) :is(h1,.hero-title) { font-size:var(--type-section) !important; }
  body.home-page .story-step p { font-size:var(--type-label) !important; line-height:1.7; }
  body.home-page .story-controls button { padding-inline:12px; min-width:64px; }
  body.home-page .story-headings { height:200px; }
  body.home-page .story-step h2 { margin-block:12px; }
  body.home-page .story-controls { width:max-content; }
  body.contact-page .contact-channel { padding-left:0; }
  body.contact-page .channel-number { position:static; margin-bottom:12px; }
}
@media(prefers-color-scheme:dark) {
  body:is(.home-page,.document-page) { --paper:var(--bg-deep) !important; --paper-deep:var(--bg-night) !important; --ink:var(--fg-light) !important; --muted:var(--fg-light-muted) !important; --accent:var(--fg-light) !important; --rust:var(--fg-light) !important; --rust-strong:var(--fg-light) !important; --surface:var(--bg-night) !important; }
  body.home-page .hero-stage { background:radial-gradient(ellipse at 48% 40%,var(--bg-night),var(--bg-deep) 80%); }
  body.home-page .story-stage { --muted:var(--fg-light-muted); background:var(--bg-deep); }
  body.home-page .story-wall { background:linear-gradient(105deg,var(--bg-deep),var(--bg-night)); }
  body.home-page .story-stage[data-coast-chapter='1'] .story-wall { background:linear-gradient(105deg,var(--bg-deep),var(--bg-night) 80%,var(--bg-blue)); }
  body.home-page .story-surface { background:linear-gradient(color-mix(in srgb,var(--bg-night) 94%,transparent),color-mix(in srgb,var(--bg-deep) 94%,transparent)),url('/assets/web-20261028/demo-bar-bg.webp') center bottom/100% auto no-repeat; }
  body.home-page .story-stage[data-coast-chapter='2'] .story-controls { --paper-deep:var(--bg-blue); }
}
@media(max-width:360px) {
  html:not(:lang(zh)) body.contact-page .contact-channel :is(.support-action, .contact-link) { font-size:var(--type-caption) !important; }
}
@media(prefers-reduced-motion:reduce) {
  body:is(.home-page,.document-page) :is(button,a,summary):active { scale:1; }
}
@media(forced-colors:active) {
  body:is(.home-page,.document-page) { --paper:Canvas !important; --ink:CanvasText !important; --muted:CanvasText !important; --accent:Highlight !important; }
  body:is(.home-page,.document-page) .ui-arrow { background:CanvasText; }
}