/* site.css: the Hi World dialect, layered over style.css (the base: pad,
   letter, Kit form, chrome.js hooks). Restyle of 2026-09-19, promoted from
   the alt3 draft. Decided: graph-paper ground, header + phones layout, pill
   tools, sticky note, Reading list (Lance, 2026-09-21), no weather tile. Dark theme on
   html[data-theme="dark"] (theme.js). body carries data-layout="split"
   data-reading="list" data-lore="note" data-bg="grey" for the selectors. */

:root {
  --wii-font: 'M PLUS Rounded 1c', ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  --g-ground: #E5E4E1;
  --g-dot:    rgba(20,20,20,0.13);
  --g-tile:   #F2F2F0;
  --g-edge:   #FFFFFF;
  --g-ink:    #141414;
  --g-muted:  #6E6E6B;
  --g-note:   #FFF3C4;
  --g-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --g-pill-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
}

/* Ground: grey under graph paper (the DS calibration screen) */
body.hi {
  --g-line: rgba(20,20,20,0.03);
  background-color: var(--g-ground);
  /* Lance, 2026-09-19: the DS calibration screen */
  background-image: linear-gradient(var(--g-line) 1px, transparent 1px), linear-gradient(90deg, var(--g-line) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-attachment: fixed;
  color: var(--g-ink);
}
html:has(body.hi) { background-color: var(--g-ground); }

/* Top chrome: floating pills on the ground, no bar */
body.hi .chrome { background: none; border: 0; box-shadow: none; padding: 0.9rem 1rem; }
body.hi .tile, body.hi .pill, body.hi .lang-toggle, body.hi .brand {
  background: #fff; border: 0; color: var(--g-ink); box-shadow: var(--g-pill-shadow);
  font-family: var(--wii-font); font-weight: 700;
}
body.hi .tile-date, body.hi .brand-name { color: var(--g-ink); }
body.hi .tile-date { font-weight: 500; color: var(--g-muted); }
body.hi .pill[aria-pressed="true"] { background: var(--g-ink); color: #fff; border: 0; }
body.hi .avatar-ring { border-color: var(--g-ink); }

/* Tiles */
body.hi main { max-width: 44rem; padding-top: 6rem; gap: 1.2rem; }
/* the sticker over the Reading corner pokes past the viewport on phones; clip the page, not the sticker */
body.hi { overflow-x: hidden; }
/* Tiles */
body.hi .hero-card, body.hi .pad, body.hi .letter, body.hi .home-reading-list, body.hi .home-reading {
  background: var(--g-tile); border: 4px solid var(--g-edge); border-radius: 28px; box-shadow: var(--g-shadow);
}
body.hi .hero-card { max-width: none; width: 100%; padding: 2.2rem 1.6rem 1.8rem; }
body.hi .pad { max-width: none; padding: 1rem; background: var(--g-tile); }
body.hi .pad-line, body.hi .hero-card .subhead { font-family: var(--wii-font); color: var(--g-muted); font-weight: 700; }
body.hi .hero-card .subhead { color: var(--g-ink); font-size: 1.15rem; }

/* The mark, big, over the Reading tile's corner */
body.hi .reading-wrap { position: relative; width: 100%; margin-top: 2.2rem; }
body.hi .hero-mark {
  position: absolute; z-index: 3; pointer-events: none; image-rendering: pixelated;
  width: 96px; height: 96px; right: -0.9rem; top: -3.2rem; transform: rotate(9deg);
  filter: drop-shadow(4px 6px 0 rgba(20,20,20,0.14));   /* hard offset: a soft blur smears under the pixel upscale */
}
@media (min-width: 40rem) {
  body.hi .hero-mark { width: 160px; height: 160px; right: -2.6rem; top: -3.6rem; }
}

/* The lore line as a sticky note */
body.hi .hero.note { font-family: var(--wii-font); color: var(--g-ink); }
body.hi .hero.note .fold-cap { display: none; }
body.hi[data-lore="note"] .hero.note {
  display: inline-block; margin: 1.1rem auto 0; max-width: 24rem;
  background: var(--g-note); font-weight: 700; font-size: 1.02rem; line-height: 1.35;
  padding: 1rem 1.7rem 1.5rem 1.2rem; text-align: left; transform: rotate(-1.5deg);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 92% 100%, 0 100%); box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
/* Section labels as pills */
body.hi .section-label {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 auto 0.9rem;
  font-family: var(--wii-font); font-weight: 800; font-size: 0.95rem; letter-spacing: 0; text-transform: none;
  background: #fff; color: var(--g-ink); padding: 0.5rem 1rem 0.5rem 0.7rem; border-radius: 999px; box-shadow: var(--g-pill-shadow); opacity: 1;
}
body.hi .section-label::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; }
body.hi .notify-section { max-width: none; width: 100%; }
body.hi .notify-section .section-label { display: inline-flex; }

/* Tools as black-on-white pills (decided 2026-09-19 over the app's Aqua column) */
body.hi .tool {
  background: #fff; border: 0; border-radius: 999px; box-shadow: var(--g-pill-shadow); color: var(--g-ink);
}
body.hi .tool::before { display: none; }
body.hi .tool[aria-pressed="true"] { background: var(--g-ink); color: #fff; }
body.hi .tool[aria-pressed="true"] .dot { background: #fff; }
body.hi .tool .dot { background: var(--g-ink); }
body.hi .tool-column { gap: 6px; }

/* Letter: a tile; input and button as pills; Send is the one accent */
body.hi .letter { padding-top: 1.4rem; }
body.hi .notify-input { border: 0; background: #fff; box-shadow: var(--g-pill-shadow); font-family: var(--wii-font); font-weight: 700; color: var(--g-ink); }
body.hi .notify-input { width: 100%; }   /* no intrinsic width: otherwise the input sets the min-content width of the letter and <main> on phones */
body.hi .notify-input:focus-visible { box-shadow: var(--g-pill-shadow), 0 0 0 3px var(--pop-pink); border-color: transparent; }
body.hi .notify-button {
  border: 0; background: linear-gradient(180deg, #FF8FC6 0%, var(--pop-pink) 100%); color: #fff; box-shadow: none;
  font-family: var(--wii-font); font-weight: 800; text-shadow: none;
}
body.hi .notify-button:active { transform: translateY(1px); }
body.hi .notify-note, body.hi .notify-msg { font-family: var(--wii-font); color: var(--g-muted); }
body.hi .notify-note a { color: var(--g-ink); }

/* Reading: the list */
body.hi .home-reading { max-width: none; width: 100%; padding: 1.2rem 1.2rem 1.4rem; margin-top: 0.4rem; position: relative; overflow: hidden; }
body.hi .home-reading-title { display: none; }
body.hi .home-reading-list { background: #fff; border: 0; box-shadow: none; border-radius: 18px; }
/* Reading heading as a pill */
body.hi .deck-word { display: none; }
body.hi[data-reading="list"] .deck-word {
  display: inline-flex; align-items: center; margin: 0 0 0.8rem 0.2rem;
  font-family: var(--wii-font); font-weight: 800; font-size: 0.95rem; background: #fff; color: var(--g-ink);
  padding: 0.5rem 1rem; border-radius: 999px; box-shadow: var(--g-pill-shadow);
}
html[data-theme="dark"] body.hi[data-reading="list"] .deck-word { background: #1F1F1E; color: var(--g-ink); }
body.hi .home-reading-list a { color: var(--g-ink); font-family: var(--wii-font); font-weight: 800; }
body.hi .home-reading-list p { font-family: var(--wii-font); color: var(--g-muted); }
body.hi .home-reading-list li + li { border-top: 2px solid var(--g-ground); }

/* Social pills: glyph + bold label, black on white, above the footer */
body.hi .social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.8rem auto 0; padding: 0 1rem; }
body.hi .social .pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem 0.55rem 0.9rem; text-decoration: none;
  font-size: 0.95rem; color: var(--g-ink); border-bottom: 0;
}
body.hi .social .pill:hover, body.hi .social .pill:focus-visible { background: var(--g-ink); color: #fff; }
body.hi .social .pill svg { flex: none; }

/* Credits row, then a footer that stays quiet */
body.hi footer { color: var(--g-muted); font-family: var(--wii-font); opacity: 1; padding-top: 1rem; }
body.hi footer a, body.hi footer .footer-link { color: var(--g-ink); }
body.hi footer .trademark { color: rgba(20,20,20,0.45); }
/* Doc pages: body.doc p inflates footer text; hold the footer to the home page's sizes */
body.doc.hi footer p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.5rem; color: var(--g-muted); }
body.doc.hi footer .trademark, body.doc.hi footer .disclaimer { font-size: 0.72rem; line-height: 1.5; max-width: 36rem; margin-inline: auto; text-align: center; color: rgba(20,20,20,0.45); opacity: 1; padding: 0 1rem 0.6rem; }

/* ---------- Doc pages (Reading articles, Privacy): the same tiles ---------- */
body.doc.hi main { max-width: 46rem; padding: 6rem 1rem 1rem; }
body.doc.hi .doc-title {
  font-family: var(--wii-font); font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--g-ink); margin: 0 0.5rem 1rem;
}
body.doc.hi .doc-meta { font-family: var(--wii-font); font-weight: 700; color: var(--g-muted); opacity: 1; margin: -0.4rem 0.5rem 1.2rem; font-size: 0.95rem; }
body.doc.wii.hi .doc-body { margin-bottom: 1.2rem;
  display: block; background: var(--g-tile); border: 4px solid var(--g-edge); border-radius: 28px; box-shadow: var(--g-shadow);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
body.doc.wii.hi .doc-body h2 { border-top: 2px solid rgba(20,20,20,0.08); padding-top: 1.4rem; font-family: var(--wii-font); font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.35rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--g-ink); margin: 2.2rem 0 0.8rem; }
body.doc.wii.hi .doc-body p, body.doc.wii.hi .doc-body li { margin-bottom: 1rem; font-family: var(--wii-font); font-weight: 500; font-size: clamp(1.05rem, 2.3vw, 1.15rem); line-height: 1.6; color: var(--g-ink); }
body.doc.wii.hi .doc-body .lede { font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.3rem); }
body.doc.wii.hi .doc-body strong { font-weight: 800; color: var(--g-ink); }
body.doc.wii.hi .doc-body a { text-decoration: none; color: var(--g-ink); border-bottom: 2px solid rgba(20,20,20,0.25); }
body.doc.wii.hi .doc-body a:hover, body.doc.wii.hi .doc-body a:focus-visible { color: var(--pop-pink); border-color: var(--pop-pink); }
body.doc.wii.hi .doc-body .doc-card { margin: 2rem 0 0; background: #fff; border: 0; border-radius: 18px; box-shadow: var(--g-pill-shadow); padding: 1.2rem 1.4rem; }
body.doc.wii.hi .doc-next { margin: 2rem 0 0; font-family: var(--wii-font); font-weight: 700; font-size: 1rem; color: var(--g-muted); }
body.doc.wii.hi .doc-next a { text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem; border: 0; padding: 0.55rem 1rem 0.55rem 0.8rem; border-radius: 999px;
  background: var(--g-ink); color: #fff; font-family: var(--wii-font); font-weight: 800; font-size: 1rem; box-shadow: var(--g-pill-shadow);
}
body.doc.hi .doc-next a::before { content: '→'; font-weight: 800; }
body.doc.hi .doc-next a:hover { color: #fff; background: #333; }
body.doc.hi .timeline-panel { position: static; transform: none; width: 100%; background: #fff; border: 0; border-radius: 18px; box-shadow: var(--g-pill-shadow); }
body.doc.hi .timeline-panel figcaption, body.doc.hi .timeline-hint { font-family: var(--wii-font); color: var(--g-muted); }
body.doc.hi .disclaimer { max-width: 46rem; padding: 1.5rem 1.5rem 0; color: var(--g-muted); opacity: 1; font-family: var(--wii-font); }

/* ---------- Layout: header + phones (data-layout="split") ---------- */
body.hi .split[hidden] { display: none; }
/* header bar on every width: brand, clock, theme, sound */
body.hi[data-layout="split"] .chrome {
  top: 0; left: 0; right: 0; border-radius: 0;
  display: flex; align-items: center; gap: 1.2rem; padding: 0.7rem 1.4rem;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
@media (max-width: 480px) { body.hi[data-layout="split"] .chrome { padding: 0.6rem 0.6rem; gap: 0.4rem; } body.hi .chrome-right { gap: 0.3rem; } body.hi .theme-pill .theme-label { display: none; } }
@media (min-width: 64rem) {
  body.hi[data-layout="split"] .brand { box-shadow: none; background: none; }

  /* the hero: the copy alone, centred; the hero card is the phone-width version */
  body.home.hi[data-layout="split"] main { max-width: 78rem; padding-top: 6.4rem; }
  body.home.hi[data-layout="split"] main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.2rem 2rem; align-items: start; }
  body.home.hi[data-layout="split"] .split, body.home.hi[data-layout="split"] .reading-wrap { grid-column: 1 / -1; }
  body.home.hi[data-layout="split"] .reading-wrap { max-width: 44rem; margin-left: auto; margin-right: auto; width: 100%; }
  body.home.hi[data-layout="split"] .notify-section { grid-column: 2; width: 100%; max-width: none; margin: 0; align-self: stretch; }
  body.home.hi[data-layout="split"] .notify-section .letter { max-width: none; }
  body.home.hi[data-layout="split"] .split { margin-top: 1.5rem; }
  body.home.hi[data-layout="split"] .hero-card { display: none; }
  body.home.hi[data-layout="split"] .sparkle { display: none; }
  /* no phones yet: the hero is the copy alone, centred, with room around it */
  body.home.hi[data-layout="split"] .split {
    display: flex; justify-content: center; width: 100%; min-height: 22rem; margin-bottom: 0.6rem; padding: 2.5rem 0 1rem;
  }
  body.home.hi[data-layout="split"] .split-copy { max-width: 40rem; }
  body.home.hi[data-layout="split"] .split-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; max-width: 30rem; text-wrap: balance; }
  /* the letter's "Coming soon." pill sits under the hero on desktop; the letter keeps its own (the heading) below 64rem */
  body.home.hi[data-layout="split"] .split-soon { margin: 1.6rem 0 0; }
  body.home.hi[data-layout="split"] .split-soon .section-label { margin: 0; }
  body.home.hi[data-layout="split"] .notify-section .section-label { display: none; }
  body.home.hi[data-layout="split"] .split-copy { text-align: center; padding: 0; }
  body.home.hi[data-layout="split"] .split-copy .wordmark { display: block; text-align: center; font-size: clamp(2.2rem, 3.2vw, 3rem); margin: 0 auto 0.6rem; }
  /* the ™ hangs off the right so the word itself is what's centred */
  body.home.hi[data-layout="split"] .split-copy .wordmark .tm { position: absolute; margin-left: 0.15em; }
  body.home.hi[data-layout="split"] .split-copy .wordmark { position: relative; }
  body.home.hi[data-layout="split"] .split-eyebrow { font-family: var(--wii-font); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-muted); margin: 0 0 1rem; }
  body.home.hi[data-layout="split"] .split-head { font-family: var(--wii-font); font-weight: 800; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--g-ink); margin: 0 0 1.2rem; }
  body.home.hi[data-layout="split"] .split-sub { font-family: var(--wii-font); font-weight: 500; font-size: 1.25rem; color: var(--g-muted); margin: 0 0 1.6rem; }

  
  body.home.hi[data-layout="split"] .screen { position: absolute; inset: 0; padding: 3rem 0.8rem 0.8rem; background: #F6F6F4; display: flex; flex-direction: column; gap: 0.55rem; font-family: var(--wii-font); }
  /* the pad keeps its own tile in this layout, at the stack width, after the "what it is" block */
  body.home.hi[data-layout="split"] .pad { grid-column: 1; max-width: none; width: 100%; margin: 0; order: 1; }
  body.home.hi[data-layout="split"] .split { order: 0; margin-bottom: 0.6rem; }
  body.home.hi[data-layout="split"] .notify-section { order: 2; }
  body.home.hi[data-layout="split"] .reading-wrap { order: 4; margin-top: 5rem; }
}

/* ---------- Dark theme (html[data-theme="dark"]), after Hi World's dark mode ---------- */
html[data-theme="dark"] body.hi {
  --g-ground: #2A2A2A; --g-tile: #333331; --g-edge: #474745; --g-ink: #F2F2F0; --g-muted: #A9A9A4;
  --g-dot: rgba(255,255,255,0.14); --g-line: rgba(255,255,255,0.055);
  --g-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --g-pill-shadow: 0 0 0 1px #4A4A48, 0 4px 12px rgba(0,0,0,0.3);
  color-scheme: dark;
}
html[data-theme="dark"]:has(body.hi) { background-color: #2A2A2A; }
html[data-theme="dark"] body.hi .tile, html[data-theme="dark"] body.hi .pill, html[data-theme="dark"] body.hi .brand,
html[data-theme="dark"] body.hi .tool, html[data-theme="dark"] body.hi .notify-input { background: #1F1F1E; color: var(--g-ink); }
html[data-theme="dark"] body.hi .pill[aria-pressed="true"], html[data-theme="dark"] body.hi .tool[aria-pressed="true"],
html[data-theme="dark"] body.hi .tool[aria-pressed="true"] .dot { background: #141414; }
html[data-theme="dark"] body.hi .tool .dot { background: var(--g-ink); }
html[data-theme="dark"] body.hi .avatar-ring { border-color: #F2F2F0; background: #fff; }
html[data-theme="dark"] body.hi .hero-card, html[data-theme="dark"] body.hi .pad, html[data-theme="dark"] body.hi .letter,
html[data-theme="dark"] body.hi .home-reading-list, html[data-theme="dark"] body.hi .doc-card { background: #3D3D3B; }
html[data-theme="dark"] body.hi .home-reading-list li + li { border-top-color: #2A2A2A; }
html[data-theme="dark"] body.hi .hero.note, html[data-theme="dark"] body.hi[data-lore="note"] .hero.note { color: #141414; }
html[data-theme="dark"] body.hi .notify-input::placeholder { color: var(--g-muted); }
html[data-theme="dark"] body.hi .notify-note a, html[data-theme="dark"] body.hi footer a, html[data-theme="dark"] body.hi footer .footer-link { color: var(--g-ink); }
html[data-theme="dark"] body.hi footer .trademark { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] body.hi[data-layout="split"] .chrome { background: rgba(30,30,30,0.88); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
html[data-theme="dark"] body.hi .letter-stamp, html[data-theme="dark"] body.hi .letter .stamp { filter: brightness(0.95); }
html[data-theme="dark"] body.doc.hi .timeline-panel { background: #3D3D3B; }
html[data-theme="dark"] body.doc.wii.hi .doc-body h2 { border-top-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] body.doc.wii.hi .doc-body a { border-bottom-color: rgba(255,255,255,0.3); }
html[data-theme="dark"] body.hi .theme-pill svg { fill: currentColor; stroke: none; }
body.hi .theme-pill { display: inline-flex; align-items: center; gap: 0.4rem; }
html[data-theme="dark"] body.hi .letter .letter-dear, html[data-theme="dark"] body.hi .letter .letter-body, html[data-theme="dark"] body.hi .pad-line { color: var(--g-ink); }
html[data-theme="dark"] body.hi .notify-note, html[data-theme="dark"] body.hi .notify-msg { color: var(--g-muted); }
html[data-theme="dark"] body.hi .home-reading-list a { color: var(--g-ink); }

/* Brand: option B from Icon/mark-proposal-sheet.html (Lance, 2026-09-21), the
   pixel-edged mark as a mask in the current ink: ink on light, white on dark */
body.hi .brand-mark { display: block; width: 26px; height: 25px; background: currentColor; -webkit-mask: url('/img/mark-b.svg') center / contain no-repeat; mask: url('/img/mark-b.svg') center / contain no-repeat; }
body.hi .brand { color: var(--g-ink); }
body.hi .brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
html[data-theme="dark"] body.hi .brand { color: var(--g-ink); }
/* Brand: the mark bare, no circle (Lance, 2026-09-19) */
body.hi .avatar-ring { width: auto; height: auto; border: 0; background: none; border-radius: 0; padding: 0; box-shadow: none; }
html[data-theme="dark"] body.hi .avatar-ring { border: 0; background: none; }
body.hi .brand { gap: 0.6rem; padding: 0 6px; box-shadow: none; background: none; }   /* no pill behind the brand at any width; the base padded it for the old ring */
@media (max-width: 480px) { body.hi .brand { padding: 0 4px; } body.hi .brand-name { display: inline; font-size: 1.05rem; } }

/* The cursor is the pencil from the PixoChat glyph (pointer devices only).
   Same path as img/pixochat-glyph.svg, halved to a 32px cursor with a white
   halo so it reads on both themes; the hotspot is the pencil's tip. */
@media (pointer: fine) {
  body.hi, body.hi a, body.hi button, body.hi input, body.hi .pad-wrap, body.hi .tool, body.hi .pill, body.hi .tile {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='translate(-7 -2) scale(0.5)'><path d='M 49 8 L 56 15 L 31 40 L 22 42 L 24 33 Z' fill='none' stroke='white' stroke-width='7' stroke-linejoin='round'/><path d='M 49 8 L 56 15 L 31 40 L 22 42 L 24 33 Z' fill='black'/></g></svg>") 4 19, auto;
  }
  html[data-theme="dark"] body.hi, html[data-theme="dark"] body.hi a, html[data-theme="dark"] body.hi button, html[data-theme="dark"] body.hi input, html[data-theme="dark"] body.hi .pad-wrap, html[data-theme="dark"] body.hi .tool, html[data-theme="dark"] body.hi .pill, html[data-theme="dark"] body.hi .tile {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='translate(-7 -2) scale(0.5)'><path d='M 49 8 L 56 15 L 31 40 L 22 42 L 24 33 Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/><path d='M 49 8 L 56 15 L 31 40 L 22 42 L 24 33 Z' fill='white'/></g></svg>") 4 19, auto;
  }
}
html[data-theme="dark"] body.hi .section-label { background: #1F1F1E; color: var(--g-ink); }
/* Dark mode: footer lines, doc-page callout card and "Read next" pill */
html[data-theme="dark"] body.hi footer, html[data-theme="dark"] body.hi footer p { color: var(--g-muted); }
html[data-theme="dark"] body.hi footer .trademark, html[data-theme="dark"] body.hi .disclaimer { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] body.doc.wii.hi .doc-body .doc-card { background: #3D3D3B; }
html[data-theme="dark"] body.doc.wii.hi .doc-body .doc-card p { color: var(--g-ink); }
html[data-theme="dark"] body.doc.wii.hi .doc-next a { background: #1F1F1E; color: var(--g-ink); box-shadow: 0 0 0 1px #4A4A48; }
html[data-theme="dark"] body.doc.wii.hi .doc-next a:hover { background: #F2F2F0; color: #141414; }
/* The letter's stamp carries the XO (the wordmark's middle letters, from Icon/mark-proposal-sheet.html option F) on ink */
body.hi .letter .stamp {
  background: #141414; border: 0; outline: 0; width: 44px; height: 52px;
  /* postage teeth: a solid body with half-circle bites along each edge (mask-composite exclude) */
  -webkit-mask:
    linear-gradient(#000, #000),
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px -3px / 6px 6px repeat-x,
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px calc(100% + 3px) / 6px 6px repeat-x,
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px -3px / 6px 6px repeat-y,
    radial-gradient(circle, #000 2px, transparent 2.3px) calc(100% + 3px) -3px / 6px 6px repeat-y;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000, #000),
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px -3px / 6px 6px repeat-x,
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px calc(100% + 3px) / 6px 6px repeat-x,
    radial-gradient(circle, #000 2px, transparent 2.3px) -3px -3px / 6px 6px repeat-y,
    radial-gradient(circle, #000 2px, transparent 2.3px) calc(100% + 3px) -3px / 6px 6px repeat-y;
  mask-composite: exclude;
}
body.hi .letter .stamp img { width: 30px; height: 14px; image-rendering: pixelated; }
/* Friend-code pill: the PixoChat glyph, "Add me", the code in tabular figures */
body.hi .social .pill-code { cursor: inherit; }
body.hi .social .pill-code .glyph { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; }
body.hi .social .pill-code b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; margin-left: 0.15rem; }
/* Link-out marker on the social pills (they leave the site, in a new tab) and the "Coming soon" tag on the app pill */
body.hi .social .pill-out .out { width: 11px; height: 11px; margin-left: 0.1rem; opacity: 0.55; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M5 1H1v10h10V7' fill='none' stroke='black' stroke-width='1.6'/><path d='M7 1h4v4M11 1L5.5 6.5' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M5 1H1v10h10V7' fill='none' stroke='black' stroke-width='1.6'/><path d='M7 1h4v4M11 1L5.5 6.5' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / contain no-repeat; }
body.hi .social .pill-code small { font-size: 0.7rem; font-weight: 700; color: var(--g-muted); margin-left: 0.2rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(20,20,20,0.06); }
html[data-theme="dark"] body.hi .social .pill-code small { background: rgba(255,255,255,0.1); }
/* Trial (2026-09-22): the Rooms glyph on the Reading tile's corner instead of the mascot, in the current ink */
body.hi .hero-mark-glyph { background: var(--g-ink); -webkit-mask: url('/img/rooms-glyph.svg') center / contain no-repeat; mask: url('/img/rooms-glyph.svg') center / contain no-repeat; filter: none; image-rendering: auto; }

/* The hero at every width (2026-09-22): no card below 64rem */
body.home.hi[data-layout="split"] .split { display: flex; justify-content: center; width: 100%; padding: 1.6rem 0 0.6rem; margin-bottom: 0.6rem; }
body.home.hi[data-layout="split"] .split-copy { max-width: 40rem; text-align: center; padding: 0 0.5rem; }
body.home.hi[data-layout="split"] .split-copy .wordmark { position: relative; display: block; text-align: center; font-size: clamp(1.9rem, 7vw, 3rem); margin: 0 auto 0.6rem; }
body.home.hi[data-layout="split"] .split-copy .wordmark .tm { position: absolute; margin-left: 0.15em; }
body.home.hi[data-layout="split"] .split-eyebrow { font-family: var(--wii-font); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-muted); margin: 0 0 1rem; }
body.home.hi[data-layout="split"] .split-head { font-family: var(--wii-font); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--g-ink); margin: 0 0 1rem; }
body.home.hi[data-layout="split"] .split-sub { font-family: var(--wii-font); font-weight: 500; font-size: clamp(1.05rem, 3.4vw, 1.25rem); color: var(--g-muted); margin: 0 auto; max-width: 30rem; text-wrap: balance; }
body.home.hi[data-layout="split"] .split-soon { margin: 1.4rem 0 0; }
body.home.hi[data-layout="split"] .split-soon .section-label { margin: 0; }
body.home.hi[data-layout="split"] .notify-section .section-label { display: none; }
/* Timeline graphic: the endpoint mark and "PixoChat" label follow the theme ink */
body.doc.hi .timeline .tl-mark { color: #1F1B45; }
html[data-theme="dark"] body.doc.hi .timeline .tl-mark { color: #F2F2F0; }
html[data-theme="dark"] body.doc.hi .timeline .tl-ink { fill: #F2F2F0; }
html[data-theme="dark"] body.doc.hi .timeline .tl-ink2 { fill: #C9C9C4; }
html[data-theme="dark"] body.doc.hi .timeline .tl-ink-stroke { stroke: #F2F2F0; }

/* One-line definition above the social pills (Search Entity Plan, 2026-09-23) */
body.hi .about-line { font-family: var(--wii-font); font-weight: 500; font-size: 0.92rem; color: var(--g-muted); text-align: center; max-width: 30rem; margin: 2rem auto 0; padding: 0 1rem; }

/* /links/: the bio-link page. Doc-page chrome; a short mark + tagline head, then full-width tappable rows. */
body.doc.hi.links main { max-width: 30rem; padding-top: 6.4rem; }
@media (min-width: 64rem) { body.doc.hi.links main { padding-top: 8.5rem; } }
body.doc.hi.links .links-head { text-align: center; margin: 0 0 1.2rem; }
body.doc.hi.links .links-mark { display: block; width: 52px; height: 49px; margin: 0 auto 0.9rem; background: var(--g-ink); -webkit-mask: url('/img/mark-b.svg') center / contain no-repeat; mask: url('/img/mark-b.svg') center / contain no-repeat; }
body.doc.hi.links .wordmark { font-size: 1.7rem; margin: 0 0 0.5rem; display: block; color: transparent; -webkit-text-fill-color: transparent; }   /* body.doc p would paint it ink over the gradient */
body.doc.hi.links .links-tag { font-family: var(--wii-font); font-weight: 700; font-size: 1.05rem; color: var(--g-ink); margin: 0; }
body.doc.hi.links .links-copy { font-family: var(--wii-font); font-weight: 500; font-size: 1.05rem; line-height: 1.5; color: var(--g-ink); text-align: center; max-width: 26rem; margin: 0 auto 1.4rem; }   /* /confirmed/ and /verified/ */
body.doc.hi.links .links-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
body.doc.hi.links .links-list-center a { justify-content: center; }   /* /confirmed/ and /verified/: one plain row, label centred */
body.doc.hi.links .links-list a, body.doc.hi.links .links-list .row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; box-sizing: border-box; padding: 1rem 1.1rem;
  background: #fff; border: 0; border-radius: 999px; box-shadow: var(--g-pill-shadow);
  font-family: var(--wii-font); font-weight: 800; font-size: 1.05rem; color: var(--g-ink); text-decoration: none;
}
body.doc.hi.links .links-list a:hover, body.doc.hi.links .links-list a:focus-visible { background: var(--g-ink); color: #fff; outline: none; }
body.doc.hi.links .links-list svg { flex: none; width: 20px; height: 20px; }
body.doc.hi.links .links-list .glyph { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; mask: url('/img/pixochat-glyph.svg') center / contain no-repeat; }
body.doc.hi.links .links-list .out { width: 12px; height: 12px; margin-left: auto; opacity: 0.55; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M5 1H1v10h10V7' fill='none' stroke='black' stroke-width='1.6'/><path d='M7 1h4v4M11 1L5.5 6.5' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M5 1H1v10h10V7' fill='none' stroke='black' stroke-width='1.6'/><path d='M7 1h4v4M11 1L5.5 6.5' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / contain no-repeat; }
body.doc.hi.links .links-list .row small { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--g-muted); padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(20,20,20,0.06); }
body.doc.hi.links .links-list .row .glyph { opacity: 0.7; }
body.doc.hi.links .links-list a { white-space: nowrap; }
html[data-theme="dark"] body.doc.hi.links .links-list a, html[data-theme="dark"] body.doc.hi.links .links-list .row { background: #1F1F1E; color: var(--g-ink); }
html[data-theme="dark"] body.doc.hi.links .links-list a:hover, html[data-theme="dark"] body.doc.hi.links .links-list a:focus-visible { background: #F2F2F0; color: #141414; }
html[data-theme="dark"] body.doc.hi.links .links-list .row small { background: rgba(255,255,255,0.1); }