/* PixoChat coming-soon landing
   Brand palette anchored on Nintendo DS Lite hardware colors:
   - DS Coral Pink #F5B5C0 (primary)
   - DS Ice Blue   #B8D4E8 (primary)
   - Pop Pink      #FF6FB3 (accent)
   - Electric Blue #5BC0FF (accent)
*/

:root {
  --ds-coral-pink: #F5B5C0;
  --ds-ice-blue:   #B8D4E8;
  --pop-pink:      #FF6FB3;
  --electric-blue: #5BC0FF;
  --ink:           #2A1F2D;
  --paper:         #FFF8FB;

  /* Wii register, ported from the app's WiiTheme.swift. Used for controls and
     containers only (cards, pills, inputs, the toggle): white surface, thin
     grey outline, a hard 2px shadow "lip", big radii, one saturated blue for
     every action. Pink is never on a control. Type inside controls is the
     rounded system face (SF Pro Rounded on Apple), as in the app. */
  --wii-surface:    #FFFFFF;
  --wii-outline:    #D3DAE4;
  --wii-lip:        #C9D1DC;
  --wii-pill-grey:  #E9EDF2;
  --wii-text:       #5A6270;
  --wii-muted:      #9AA4B2;
  --wii-blue:       #3A95E6;
  --wii-blue-light: #7FC2F6;
  --wii-blue-edge:  #2F85D6;
  --wii-blue-lip:   #2670B8;
  --wii-glow:       #BFE0FB;
  --wii-radius:     22px;
  --wii-font:       ui-rounded, 'SF Pro Rounded', -apple-system, 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* html gets a fixed height so body's min-height has something to resolve
   against; body itself must be free to grow, or its gradient only paints the
   first viewport and long pages scroll onto html's flat fallback color. */
html { height: 100%; }

/* Disable iOS Safari rubber-band overscroll on the y-axis. Without this,
   pulling past the top or bottom of the page reveals the underlying viewport
   background — which is white by default — because background-attachment:
   fixed clips the gradient to the viewport itself, not the overscroll area.
   overscroll-behavior-y: none stops the rubber-band gesture entirely.
   background-color on html is a defensive fallback that paints brand color
   into any rubber-band area that older iOS versions might still expose. */
html {
  overscroll-behavior-y: none;
  background-color: var(--ds-coral-pink);
}

body {
  font-family: 'VT323', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;
  color: var(--ink);
  background: linear-gradient(135deg, var(--ds-coral-pink) 0%, var(--ds-ice-blue) 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* ----- Bilingual visibility + typography -----
   Each translatable element appears twice in the DOM with lang="en" and
   lang="ja". CSS hides the inactive language based on the html element's
   lang attribute. Japanese text uses DotGothic16 (pixel-coded Japanese-
   supporting Google Font; closest available substitute for the planning-
   doc-recommended PixelMplus, which is not on Google Fonts).
*/

html[lang="en"] [lang="ja"] { display: none; }
html[lang="ja"] [lang="en"] { display: none; }

[lang="ja"] {
  font-family: 'DotGothic16', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

/* Wordmark (PixoChat) is the international wordmark per the planning
   context — stays Latin/Press Start 2P in both language modes. */

main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.wordmark {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 2.5rem;
  background: linear-gradient(120deg, var(--pop-pink) 0%, var(--electric-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.6));
}

.hero {
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--ink);
}

/* Plain-language subheading under the lore line. Deliberately a step down from
   .hero: the lore line leads, this says what the thing actually is.
   No font-family here, so [lang="ja"] keeps resolving to DotGothic16. */
.subhead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--ink);
  text-wrap: pretty;
}

.hero + .subhead {
  margin-top: -0.75rem;
}

/* ----- Home page bands -----
   Three groups read top to bottom: the hero (wordmark + two lines), the
   sign-up card, and the reading list. Shared column width keeps them
   aligned; the card and the rule above Reading do the grouping. */

.hero-block {
  margin-bottom: 2.5rem;
}

.hero-block .subhead {
  margin-bottom: 0;
}

/* Sign-up card: a Wii surface (white, outline, hard lip, big radius) */
.notify {
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem 1.4rem 1.3rem;
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: var(--wii-radius);
  box-shadow: 0 2px 0 var(--wii-lip);
}

.status {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  color: var(--ink);
  opacity: 0.85;
}

/* One warm line between the label and the field */
.notify-lede {
  margin: -0.35rem 0 1rem;
  font-family: var(--wii-font);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wii-text);
}

.notify-form {
  display: flex;
  gap: 0.5rem;
}

.notify-input,
.notify-button {
  font-family: var(--wii-font);
  font-size: 1rem;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
}

/* Input: a resting pill on the pale ground, outline + lip like every surface */
.notify-input {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--wii-text);
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  box-shadow: 0 2px 0 var(--wii-lip);
}

.notify-input::placeholder {
  color: var(--wii-muted);
  opacity: 1;
}

.notify-input:focus-visible {
  outline: none;
  border-color: var(--wii-blue);
  box-shadow: 0 2px 0 var(--wii-lip), 0 0 0 3px var(--wii-glow);
}

/* Primary action: the one saturated blue, vertical gradient, edge + lip */
.notify-button {
  flex: none;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--wii-blue-light) 0%, var(--wii-blue) 100%);
  border: 1.5px solid var(--wii-blue-edge);
  box-shadow: 0 2px 0 var(--wii-blue-lip);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.notify-button:hover { filter: brightness(1.04); }

.notify-button:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 var(--wii-blue-lip), 0 0 0 3px var(--wii-glow);
}

.notify-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--wii-blue-lip);
}

.notify-button:disabled {
  cursor: default;
  opacity: 0.6;
  transform: none;
}

@media (max-width: 420px) {
  .notify-form { flex-direction: column; }
}

.notify-note,
.notify-msg {
  margin: 0.9rem 0 0;
  font-family: var(--wii-font);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wii-text);
}

.notify-note a,
.notify-msg a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}

.notify-note a:hover,
.notify-note a:focus-visible {
  color: var(--wii-blue);
  outline: none;
}

/* Honeypot: off-screen, never display:none (some bots skip hidden fields) */
.notify-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

footer {
  font-size: 0.95rem;
  text-align: center;
  padding: 1.25rem;
  color: var(--ink);
  opacity: 0.6;
}

/* Language toggle button — top-right corner, shows the OTHER language as the
   click target ("currently English; tap to switch to Japanese") */
.lang-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  font-family: var(--wii-font);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wii-text);
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  box-shadow: 0 2px 0 var(--wii-lip);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--wii-pill-grey);
  outline: none;
}

.lang-toggle:focus-visible {
  box-shadow: 0 2px 0 var(--wii-lip), 0 0 0 3px var(--wii-glow);
}

.lang-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--wii-lip);
}

/* The toggle uses the same global lang-visibility rules as the rest of the
   page. Each span's lang attribute marks WHEN it should be visible — not the
   language of the text inside. The text inside is the OTHER language so the
   button reads as "tap to switch to <other>". When html[lang="en"], the
   <span lang="en">日本語</span> is visible (showing "日本語" as the switch
   target); when html[lang="ja"], the <span lang="ja">English</span> is
   visible. No toggle-specific override needed. */

/* Decorative sparkles — kawaii vocabulary garnish, on-thesis without revealing the product */
.sparkle {
  position: absolute;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--paper);
  user-select: none;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(255, 111, 179, 0.35));
}

.sparkle-tl { top: 4%;  left: 2%; }
.sparkle-tr { top: 9%;  right: 3%; }
.sparkle-bl { bottom: 22%; left: 4%; }
.sparkle-br { bottom: 12%; right: 2%; }

@media (prefers-reduced-motion: no-preference) {
  .sparkle {
    animation: twinkle 4s ease-in-out infinite;
  }
  .sparkle-tr { animation-delay: 1s; }
  .sparkle-bl { animation-delay: 2s; }
  .sparkle-br { animation-delay: 3s; }

  @keyframes twinkle {
    0%, 100% { opacity: 0.45; transform: scale(0.92); }
    50%      { opacity: 0.95; transform: scale(1.08); }
  }
}

@media (max-width: 480px) {
  .sparkle-tl, .sparkle-tr, .sparkle-bl, .sparkle-br {
    font-size: 0.95rem;
  }
}

/* Respect Apple's dark-mode preference even though the page is light-by-design.
   Strengthen contrast for accessibility on darker viewports. */
@media (prefers-contrast: more) {
  body { color: #000; }
  footer { opacity: 0.85; }
  .status { opacity: 1; }
}

/* Contact email leads the footer, a step larger than the legal lines */
footer .contact {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  margin-bottom: 0.75rem;
}

/* Trademark notice: present, but quieter than the copyright line. The footer
   is already at 0.6; this drops the line to roughly half that on the page. */
footer .trademark {
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.4;
}

/* Privacy link in every footer: same weight as the copyright line */
footer .footer-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: color 120ms ease;
}

footer .footer-link:hover,
footer .footer-link:focus-visible {
  color: var(--pop-pink);
  outline: none;
}

/* ----- Document pages -----
   Scoped to body.doc so the coming-soon placeholder above is untouched.
   The placeholder centers a hero in the viewport; these pages are read
   top to bottom, so main's centering is overridden here only.
*/

body.doc main {
  display: block;
  width: 100%;             /* not shrink-to-fit: a scrolling figure must not widen the page */
  max-width: 36rem;
  padding: 5.6rem 1.5rem 1rem;
  text-align: left;
}

body.doc .doc-title {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 2rem;
  color: var(--ink);
}

body.doc h2 {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 2.5rem 0 1rem;
  color: var(--ink);
}

body.doc p {
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  line-height: 1.55;
  margin-bottom: 1.1rem;
  color: var(--ink);
}

body.doc .lede {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.5;
}

body.doc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: color 120ms ease;
}

body.doc a:hover,
body.doc a:focus-visible {
  color: var(--pop-pink);
  outline: none;
}

/* The one place a page states what PixoChat is, held to the approved sentence */
body.doc .doc-card {
  margin: 2.5rem 0 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: var(--wii-radius);
  box-shadow: 0 2px 0 var(--wii-lip);
}

body.doc .doc-card p:last-child { margin-bottom: 0; }

/* Legal pages: dated meta line, lists, and emphasis */
body.doc .doc-meta {
  font-size: clamp(0.95rem, 2.1vw, 1.1rem);
  margin: -1.25rem 0 2rem;
  opacity: 0.6;
}

body.doc ul {
  margin: 0 0 1.1rem 1.25rem;
  padding: 0;
}

body.doc li {
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  line-height: 1.55;
  margin-bottom: 0.6rem;
  color: var(--ink);
}

body.doc strong {
  font-weight: 400;
  color: var(--pop-pink);
}

body.doc .doc-next {
  margin-top: 2.5rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

body.doc .disclaimer {
  max-width: 36rem;
  margin-inline: auto;
  padding: 0 1.5rem 1.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
  opacity: 0.7;
}

/* Reading: the article list under the hero. Left-aligned inside the
   centered placeholder so titles and blurbs read as a list, not a poem. */
.home-reading {
  width: 100%;
  max-width: 26rem;
  margin: 2rem auto 0;
  text-align: left;
}

.home-reading-title {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: clamp(0.6rem, 1.7vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.9rem;
  color: var(--ink);
  opacity: 0.7;
}

.home-reading-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: var(--wii-radius);
  box-shadow: 0 2px 0 var(--wii-lip);
  overflow: hidden;
}

.home-reading-list li {
  margin: 0;
  padding: 1rem 1.4rem;
}

.home-reading-list li + li {
  border-top: 1.5px solid var(--wii-outline);
}

.home-reading-list a {
  display: block;
  font-family: var(--wii-font);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--wii-blue);
  text-decoration: none;
  transition: color 120ms ease;
}

.home-reading-list a:hover,
.home-reading-list a:focus-visible {
  color: var(--wii-blue-edge);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.home-reading-list p {
  margin: 0.25rem 0 0;
  font-family: var(--wii-font);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wii-text);
}

/* ----- Document pages, Wii treatment (body.doc.wii) -----
   Articles and the privacy policy are read, not felt, so the body of each
   sits in one Wii card in the rounded system face at reading size. The pixel
   title, the wordmark link, and the "Read next" line stay outside the card,
   as on the home page: Wii chrome around the content, pixel identity on top. */

body.doc.wii main {
  max-width: 40rem;
}

body.doc.wii .doc-meta {
  font-family: var(--wii-font);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--wii-text);
  opacity: 1;
  margin: -1.25rem 0 1.5rem;
}

.doc-body {
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: var(--wii-radius);
  box-shadow: 0 2px 0 var(--wii-lip);
  padding: 1.75rem 1.75rem 1.5rem;
}

@media (max-width: 480px) {
  .doc-body { padding: 1.4rem 1.2rem 1.2rem; }
}

body.doc.wii .doc-body p,
body.doc.wii .doc-body li {
  font-family: var(--wii-font);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--wii-text);
  margin-bottom: 1rem;
}

body.doc.wii .doc-body .lede {
  font-size: 1.15rem;
  line-height: 1.55;
}

body.doc.wii .doc-body h2 {
  font-family: var(--wii-font);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin: 2rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--wii-outline);
  color: var(--wii-text);
}

body.doc.wii .doc-body ul {
  margin: 0 0 1rem 1.25rem;
}

body.doc.wii .doc-body li {
  margin-bottom: 0.5rem;
}

/* Field labels ("Your account.") read as headings-in-line: heavier, same grey */
body.doc.wii .doc-body strong {
  font-weight: 700;
  color: var(--wii-text);
}

body.doc.wii .doc-body a {
  color: var(--wii-blue);
  border-bottom: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.doc.wii .doc-body a:hover,
body.doc.wii .doc-body a:focus-visible {
  color: var(--wii-blue-edge);
}

body.doc.wii .doc-body > :last-child {
  margin-bottom: 0;
}

/* The one-sentence "what PixoChat is" callout, inset in the card as a
   pill-grey panel: the app's pressed/secondary fill, no second lip. */
body.doc.wii .doc-body .doc-card {
  margin: 2rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--wii-pill-grey);
  border: 1.5px solid var(--wii-outline);
  border-radius: 16px;
  box-shadow: none;
}

body.doc.wii .doc-body .doc-card p {
  margin-bottom: 0.5rem;
}

body.doc.wii .doc-body .doc-card p:last-child {
  margin-bottom: 0;
}

body.doc.wii .doc-next {
  margin-top: 2rem;
}

/* Timeline-split infographic: a wide Wii card, the same surface as the text
   cards, breaking out of the 36rem reading column so the labels stay legible.
   Scrolls sideways on phones rather than shrinking. */
.timeline-panel {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(62rem, 100vw - 2rem);
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--wii-surface);
  border: 1.5px solid var(--wii-outline);
  border-radius: var(--wii-radius);
  box-shadow: 0 2px 0 var(--wii-lip);
  overflow: hidden;
}

.timeline-hint { display: none; }

/* Narrow screens: no breakout; the card fills the column and the drawing
   scrolls sideways inside it. A fade on the right edge and a small hint say
   so; both go once the visitor has scrolled. */
@media (max-width: 64rem) {
  .timeline-panel { position: static; transform: none; width: 100%; }
  .timeline-scroller { position: relative; }
  .timeline-scroller::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--wii-surface) 100%);
    transition: opacity 200ms ease;
  }
  .timeline-hint {
    display: block; margin: 0.4rem 0 0; text-align: right;
    font-family: var(--wii-font); font-weight: 600; font-size: 0.8rem; color: var(--wii-muted);
  }
  .timeline-panel.scrolled .timeline-scroller::after, .timeline-panel.scrolled .timeline-hint { opacity: 0; }
}
.timeline-scroller { overflow-x: auto; }

.timeline-panel svg {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
}

.timeline-panel figcaption {
  margin: 0.75rem 0 0;
  font-family: var(--wii-font);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  color: var(--wii-text);
}

/* A card that opens with a heading needs no rule above it */
body.doc.wii .doc-body h2.first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* =====================================================================
   The era, as behaviour (home page only, body.home) — added 2026-09-10.
   Prototyped in the vault at PixoChat/Website/coming-soon-prototype.html
   and carried over minus the two-screen hinge. Everything here is scoped
   to body.home; the chrome bar, sky, cursor and ripple are shared with
   body.doc (see chrome.js).
   ===================================================================== */

:root {
  --rule: #CFE3F2;         /* pale graph rule: the pad and the letter only, never page wallpaper */
  --sky-a: #8A9BC4;        /* the blue, always (Lance, 2026-09-10) — prototype A's night sky, now the page */
  --sky-b: #B8D4E8;
}

body.home, body.doc {
  background: linear-gradient(135deg, var(--sky-a) 0%, var(--sky-b) 100%);
  background-attachment: fixed;
}
html:has(body.home), html:has(body.doc) { background-color: var(--sky-a); }

/* "Lid closed" no longer dims the page (removed 2026-09-11); the wake-up chime in chrome.js stays. */

/* The stylus is the cursor, on pointer devices only */
@media (pointer: fine) {
  body.home, body.doc {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' shape-rendering='crispEdges'><rect x='2' y='24' width='2' height='2' fill='%231F1B45'/><rect x='4' y='22' width='2' height='2' fill='%23C9D1DC'/><rect x='6' y='20' width='2' height='2' fill='%23C9D1DC'/><rect x='8' y='18' width='2' height='2' fill='%23C9D1DC'/><rect x='10' y='16' width='2' height='2' fill='%23C9D1DC'/><rect x='12' y='14' width='2' height='2' fill='%23C9D1DC'/><rect x='14' y='12' width='2' height='2' fill='%23C9D1DC'/><rect x='16' y='10' width='2' height='2' fill='%23C9D1DC'/><rect x='18' y='8' width='2' height='2' fill='%23C9D1DC'/><rect x='20' y='6' width='4' height='4' fill='%23F3ADB5'/><rect x='4' y='20' width='2' height='2' fill='%231F1B45'/><rect x='6' y='18' width='2' height='2' fill='%231F1B45'/><rect x='8' y='16' width='2' height='2' fill='%231F1B45'/><rect x='10' y='14' width='2' height='2' fill='%231F1B45'/><rect x='12' y='12' width='2' height='2' fill='%231F1B45'/><rect x='14' y='10' width='2' height='2' fill='%231F1B45'/><rect x='16' y='8' width='2' height='2' fill='%231F1B45'/><rect x='18' y='6' width='2' height='2' fill='%231F1B45'/><rect x='20' y='4' width='4' height='2' fill='%231F1B45'/><rect x='24' y='6' width='2' height='4' fill='%231F1B45'/><rect x='6' y='22' width='2' height='2' fill='%231F1B45'/><rect x='8' y='20' width='2' height='2' fill='%231F1B45'/><rect x='10' y='18' width='2' height='2' fill='%231F1B45'/><rect x='12' y='16' width='2' height='2' fill='%231F1B45'/><rect x='14' y='14' width='2' height='2' fill='%231F1B45'/><rect x='16' y='12' width='2' height='2' fill='%231F1B45'/><rect x='18' y='10' width='2' height='2' fill='%231F1B45'/><rect x='20' y='10' width='2' height='2' fill='%231F1B45'/></svg>") 2 26, auto;
  }
  body.home a, body.home button, body.home input, body.home .pad-wrap,
  body.doc a, body.doc button { cursor: inherit; }
}

/* A resistive press */
.ripple {
  position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--wii-blue); border-radius: 50%; pointer-events: none; z-index: 50;
  opacity: 0.8; animation: ripple 420ms ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ----- Chrome bar: clock tile on the left, sound and language on the right ----- */
.chrome {
  position: fixed; top: 0.9rem; left: 0.9rem; right: 0.9rem; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.chrome-right { display: flex; gap: 0.5rem; align-items: center; }

/* Brand, top left: the app's account pill (SystemMenuViewController). A 52pt
   Wii pill; inside it the avatar ring (2pt pink ring, 3pt white gap, the mark
   centred, 40pt across) 6pt from the left, then the name in the title face at
   16pt, 10pt after the ring, 18pt of air on the right. The mark is shown at
   32px, a whole multiple of its grid, nearest-neighbour. */
.brand {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 6px;
  font-family: var(--wii-font); font-weight: 600; font-size: 16px;
  color: var(--wii-text); text-decoration: none;
  background: var(--wii-surface); border: 1.5px solid var(--wii-outline); border-radius: 999px;
  box-shadow: 0 2px 0 var(--wii-lip);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.brand:hover, .brand:focus-visible { background: var(--wii-pill-grey); outline: none; }
.brand:focus-visible { box-shadow: 0 2px 0 var(--wii-lip), 0 0 0 3px var(--wii-glow); }
.brand:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--wii-lip); }
body.doc .brand { border-bottom: 1.5px solid var(--wii-outline); padding-bottom: 0; }
body.doc .chrome a.pill { border-bottom: 1.5px solid var(--wii-outline); padding-bottom: 0.45rem; }

.avatar-ring {
  flex: none; width: 42px; height: 42px; box-sizing: border-box;   /* 2 ring + 3 gap + 32 mark + 3 + 2 */
  display: grid; place-items: center;
  background: #fff; border: 2px solid #F3ADB5; border-radius: 50%;   /* WiiTheme.pink */
}
.avatar-ring img { width: 32px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

@media (max-width: 480px) {
  .brand { height: 48px; padding: 0 2px; }
  .brand-name { display: none; }
}
.chrome .lang-toggle { position: static; }
.tile, .pill {
  font-family: var(--wii-font); font-weight: 600; font-size: 0.95rem; color: var(--wii-text);
  background: var(--wii-surface); border: 1.5px solid var(--wii-outline); border-radius: 999px;
  padding: 0.45rem 1rem; box-shadow: 0 2px 0 var(--wii-lip); white-space: nowrap;
}
.tile { display: flex; align-items: baseline; gap: 0.6rem; }
.tile-time { font-variant-numeric: tabular-nums; }
.tile-date { color: var(--wii-muted); font-weight: 500; }
.pill { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.pill:hover, .pill:focus-visible { background: var(--wii-pill-grey); outline: none; }
.pill:focus-visible { box-shadow: 0 2px 0 var(--wii-lip), 0 0 0 3px var(--wii-glow); }
.pill:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--wii-lip); }
.pill[aria-pressed="true"] { color: var(--wii-blue); border-color: var(--wii-blue); }
@media (max-width: 480px) {
  .tile, .pill, .chrome .lang-toggle { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
  .tile-date { display: none; }
}

/* The home page is now several bands, not one centred hero */
body.home main {
  justify-content: flex-start;
  padding-top: 5.2rem;
  gap: 2.6rem;
  max-width: 44rem;
}
body.home .hero-block { margin-bottom: 0; }
.wordmark .tm {
  font-size: 0.35em; vertical-align: top; margin-left: 0.1em;
  -webkit-text-fill-color: var(--ink); color: var(--ink); opacity: 0.6;
}
.section-label {
  font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400;
  font-size: clamp(0.6rem, 1.7vw, 0.7rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); opacity: 0.7; margin-bottom: 0.9rem;
}

/* ----- The pad ----- */
/* The pad's ground is the app's light-mode compose chrome (ComposeCanvasController
   chromeBackgroundLayer, EFEFF3 / DADADE / C0C0C4 top to bottom). In the app that
   ramp spans the whole compose zone and the canvas sits in its upper-middle, so
   the ground seen beside the canvas is the lighter stretch. This card is short,
   so it shows that same band rather than the full ramp: the app's ramp at about
   10% to 70% of its height. */
.pad {
  width: 100%; max-width: 30rem; padding: 0.9rem;
  background: linear-gradient(180deg, #ECECF0 0%, #E0E0E4 50%, #D2D2D6 100%);
  border: 1.5px solid var(--wii-outline); border-radius: 18px;
  box-shadow: 0 2px 0 var(--wii-lip);
}
/* App layout: tool column 8pt in from the edge, canvas 4pt after it */
.pad-row { display: flex; gap: 4px; align-items: flex-start; }

/* The canvas, as the app draws it: cream paper, 12px radius, five ruled
   lines at i/6 of the height (hairline, inkDeep at 15%), nothing vertical. */
.pad-wrap {
  position: relative; flex: 1; min-width: 0; aspect-ratio: 360 / 162;
  background-color: #FFF8F5;
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(26, 27, 58, 0.15) calc(100% - 1px));
  background-size: 100% calc(100% / 6);
  border: 1px solid rgba(26, 27, 58, 0.12); border-radius: 12px; overflow: hidden; touch-action: none;
}
.pad-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Tool column: the app's 28pt Aqua-gel squares (AquaGlass.Tint.chrome at
   rest, .coral when selected): vertical gradient, hairline border, a white
   highlight over the top half, 4px radius, 4px apart. Glyphs in inkDeep. */
.tool-column { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 30px; }
.tool {
  position: relative; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  color: #1A1B3A;
  background: linear-gradient(180deg, #EFEFF3 0%, #C0C0C4 100%);
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 4px;
  cursor: pointer;
}
.tool::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%;
  border-radius: 3px 3px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
}
.tool > * { position: relative; }
.tool .dot { display: block; border-radius: 50%; background: #1A1B3A; }
.tool[aria-pressed="true"] {
  color: #5A2030;
  background: linear-gradient(180deg, #FCCDD5 0%, #F5B5C0 100%);
  border-color: rgba(184, 120, 136, 0.6);
}
.tool[aria-pressed="true"] .dot { background: #5A2030; }
.tool:active { filter: brightness(0.94); }
.tool:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wii-glow); }
.tool-clear { margin-top: 8px; }
.pad-line { margin-top: 0.7rem; font-family: var(--wii-font); font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--wii-text); }

/* ----- The letter: the sign-up card, on lined paper ----- */
.notify-section { width: 100%; max-width: 26rem; }
.letter {
  position: relative; text-align: left;
  background: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--rule) 27px 28px);
  background-position: 0 3.2rem;
  border: 1.5px solid #ecd4da; border-radius: 10px;
  box-shadow: 0 2px 0 var(--wii-lip), 0 10px 24px -18px rgba(42,31,45,0.5);
  padding: 1.4rem 1.4rem 1.2rem; transform: rotate(-0.6deg);
  transition: transform 500ms cubic-bezier(.4,1.4,.5,1), opacity 400ms ease;
}
.letter.sent { transform: translateY(-14px) scale(0.96) rotate(-0.6deg); opacity: 0; pointer-events: none; }
.letter[hidden] { display: none; }
.stamp {
  position: absolute; top: 0.8rem; right: 0.9rem; width: 44px; height: 52px;
  background: var(--ds-coral-pink); border: 3px dotted #fff; outline: 1.5px solid #ecd4da;
  display: grid; place-items: center; transform: rotate(4deg);
}
.stamp img { width: 26px; height: 26px; image-rendering: pixelated; }
.letter-dear { font-size: 1.35rem; line-height: 28px; padding-right: 3.4rem; }
.letter .letter-body {
  margin: 0 0 0.9rem; padding-right: 3.2rem;
  font-family: 'VT323', ui-monospace, monospace; font-weight: 400; font-size: 1.3rem; line-height: 28px; color: var(--ink);
}
.letter .notify-form { margin-top: 0.6rem; }
.letter .notify-note { font-size: 0.85rem; }
html[lang="ja"] .letter-dear, html[lang="ja"] .letter .letter-body { font-family: 'DotGothic16', 'Hiragino Sans', 'Yu Gothic', sans-serif; font-size: 1.1rem; }
.mailbox { text-align: center; margin: 0.6rem 0 0; }
.mailbox:not([hidden]) { animation: mailbox 500ms ease; }
@keyframes mailbox { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.mailbox .flag { display: inline-block; width: 10px; height: 10px; background: var(--pop-pink); border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }

/* ----- Japanese document pages (html[lang="ja"] body.doc) — added 2026-09-10 -----
   The pixel title face has no kana, so the title takes DotGothic16; body copy
   already resolves through --wii-font to Hiragino Maru Gothic on Apple. The
   language link in the chrome is a real link to the other URL (hreflang pair),
   not the home page's in-place toggle. */
html[lang="ja"] body.doc .doc-title {
  font-family: 'DotGothic16', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-size: clamp(1.35rem, 4.2vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
html[lang="ja"] body.doc .doc-body p,
html[lang="ja"] body.doc .doc-body li { line-height: 1.85; }
html[lang="ja"] body.doc .doc-body h2 { font-size: 1.15rem; }
html[lang="ja"] body.doc .disclaimer { line-height: 1.7; }
.chrome a.pill { text-decoration: none; display: inline-block; }
.chrome a.pill[lang="ja"] { font-family: 'DotGothic16', 'Hiragino Sans', sans-serif; }
/* the doc pages' language link must show regardless of the html lang rule */
html[lang="en"] .chrome a.pill[lang="ja"], html[lang="ja"] .chrome a.pill[lang="en"] { display: inline-block; }


/* ----- The hero card (home) — added 2026-09-10 -----
   The wordmark and two lines sit on a paper card like the pad below them.
   Order: the plain sentence first, in the rounded Wii face (it is information,
   so it gets the reading font); the lore line second, in VT323 (it is the
   brand's voice, so it keeps the pixel type). */
body.home .hero-card {
  width: 100%; max-width: 32rem;
  background: var(--paper);
  border: 1.5px solid var(--wii-outline);
  border-radius: 18px;
  box-shadow: 0 2px 0 var(--wii-lip), inset 0 0 0 4px #fff;
  padding: 1.9rem 1.5rem 1.6rem;
}
body.home .hero-card .wordmark { margin-bottom: 1.1rem; }
body.home .hero-card .subhead {
  order: 0;
  font-family: var(--wii-font);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 auto 0.8rem;
  max-width: 26rem;
}
html[lang="ja"] body.home .hero-card .subhead { font-family: var(--wii-font); }
body.home .hero-card .hero {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--wii-text);
  margin: 0 auto;
  max-width: 26rem;
}
body.home .hero-card .hero + .subhead { margin-top: 0; }
@media (max-width: 480px) { body.home .hero-card { padding: 1.5rem 1.1rem 1.3rem; } }


/* ----- Build log (/log/) — added 2026-09-10 -----
   Dated entries inside the doc card. The date is pixel type, small and grey;
   the entry is the reading face. Newest at the top. */
body.doc.wii .doc-body ul.log { list-style: none; margin: 0 0 1.25rem; padding: 0; }
body.doc.wii .doc-body ul.log li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.8rem; align-items: baseline;
  padding: 0.55rem 0; margin: 0; border-top: 1px dashed var(--wii-outline);
  font-family: var(--wii-font); font-weight: 500; font-size: 1.02rem; line-height: 1.55; color: var(--wii-text);
}
body.doc.wii .doc-body ul.log li:first-child { border-top: none; }
body.doc.wii .doc-body ul.log time {
  font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 0.55rem; letter-spacing: 0.06em;
  color: var(--wii-muted); white-space: nowrap; padding-top: 0.3rem;
}
body.doc.wii .doc-body ul.log a { color: var(--wii-blue); }
@media (max-width: 480px) { body.doc.wii .doc-body ul.log li { grid-template-columns: 3.9rem 1fr; gap: 0.6rem; } }