/* hanzen landing: layout, sections, components. Tokens live in tokens.css,
   the six hand-drawn touches in doodle.css, the hero stage in stage.css. */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

/* paper grain: one tiled SVG noise, static, below every card */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* the filter defs svg sits right after body on every page: zero size, invisible */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* colors only transition while the dial is turning, never on load */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color var(--d-scene) var(--ease-inout), color var(--d-scene) var(--ease-inout), border-color var(--d-scene) var(--ease-inout), fill var(--d-scene) var(--ease-inout) !important;
}
/* the iris wipe (View Transitions) grows from the dial */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: iris var(--d-scene) var(--ease-inout); }
@keyframes iris {
  from { clip-path: circle(0 at var(--dial-x, 50%) var(--dial-y, 0)); }
  to { clip-path: circle(160vmax at var(--dial-x, 50%) var(--dial-y, 0)); }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
button { font: inherit; color: inherit; }
b { font-weight: 600; }
[lang="zh-Hans"], .zh { font-family: var(--font-zh); font-weight: 500; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
.display, .h1, .h2 { font-family: var(--font-serif); font-weight: 400; line-height: 1.04; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.display { font-size: var(--t-display); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); line-height: 1.15; }
.display em, .h1 em, .h2 em, .closing-line em { font-style: italic; color: var(--ink); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 34rem; text-wrap: pretty; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

/* the little pill above a heading: replaces the uppercase eyebrow */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 4px 14px 4px 10px;
  font-size: var(--t-small); font-weight: 600; line-height: 1.2; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.pill .da-ico { color: var(--accent); }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section-band { background: var(--band); }
.section-head { display: grid; gap: 1.25rem; justify-items: start; margin-bottom: var(--head-gap); max-width: 46rem; }
.section-head .h1 { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.section-head .h1 .doodle-icon-chip { margin-top: .12em; }
.section-head .lead { margin-left: 60px; }
.section-head .lead b { color: var(--ink); }
/* a heading with no icon chip (the steps section carries the "start here" pill instead) */
.section-head .h1-plain { grid-template-columns: 1fr; }
.section-head .h1-plain + .lead { margin-left: 0; }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.section-head--center .h1 { grid-template-columns: 1fr; justify-items: center; }
.section-head--center .lead { margin-left: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: var(--r-chip); }
.skip:focus { top: 16px; }
@media (max-width: 640px) {
  .section-head .h1 { grid-template-columns: 1fr; gap: 12px; }
  .section-head .lead { margin-left: 0; }
}

/* ---------- buttons: one primary, one secondary, no third ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.5rem;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-weight: 600; font-size: var(--t-body); line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), background-color var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px -12px var(--accent-glow); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 12px 28px -12px var(--accent-glow); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); }
.btn-lg { min-height: 56px; padding: 0 1.9rem; font-size: var(--t-lead); }
.btn-nav { min-height: 44px; padding: 0 1.15rem; font-size: var(--t-small); }
.btn .ext { font-size: .85em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cta-note { font-size: var(--t-small); color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 8px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-color: var(--line-strong); border-radius: var(--r-chip); }
.text-link:hover { text-decoration-color: var(--ink); }
@media (pointer: coarse) {
  .btn { min-height: 52px; }
  .btn-nav { min-height: 48px; }
}
@media (max-width: 640px) {
  .cta-row .btn { width: 100%; }
}

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; padding-inline: var(--gutter); }
.nav-inner {
  width: 100%; max-width: var(--col); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  height: 52px; padding: 4px 4px 4px 16px;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; justify-self: start; color: var(--ink); }
.brand-mark { width: 22px; height: 22px; }
.brand-name { font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: -.01em; line-height: 1; }
.nav-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* the 日/月 dial */
.dial {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; cursor: pointer;
  touch-action: manipulation; color: var(--ink);
  transition: border-color var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out);
}
.dial:hover { border-color: var(--ink); }
.dial-disc { width: 18px; height: 18px; }
.dial-sun { fill: currentColor; }
.dial-bite { fill: var(--paper); transform: translateX(14px); transition: transform var(--d-scene) var(--ease-inout); }
[data-theme="ink"] .dial-bite { transform: translateX(4px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="paper"]) .dial-bite { transform: translateX(4px); } }
.dial-win { display: block; height: 1lh; overflow: hidden; font-family: var(--font-zh); font-size: 1rem; line-height: 1.2; }
.dial-roll { display: flex; flex-direction: column; transition: transform var(--d-scene) var(--ease-inout); }
[data-theme="ink"] .dial-roll { transform: translateY(-50%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="paper"]) .dial-roll { transform: translateY(-50%); } }
.dial:active { transform: scale(.97); }
.dial-footer { display: none; }

@media (max-width: 640px) {
  .nav { padding-inline: 12px; }
  .nav-inner { padding-left: 12px; gap: 8px; }
  .brand-name { font-size: 1.25rem; }
  /* phone: brand + one button. the dial moves to the footer. while the sticky
     bar carries the button, the nav shows the dial instead, so there is never
     more than one jade button on screen */
  .nav .dial { display: none; }
  .dial-footer { display: inline-flex; }
  html.has-stickybar .nav .btn-nav { display: none; }
  html.has-stickybar .nav .dial { display: inline-flex; }
}

/* phones: a thin jade line along the top shows how far down the page you are */
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 41; height: 3px; display: none; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--scroll, 0)); }
@media (max-width: 760px) { .progress { display: block; } }

/* the sticky bottom bar on phones: one tap to start, always */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
  display: none; align-items: center; justify-content: center;
  height: calc(64px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--d-ui) var(--ease-out);
}
.stickybar .btn { width: 100%; max-width: 24rem; min-height: 48px; }
.stickybar.is-on { transform: translateY(0); }
@media (max-width: 760px) {
  .stickybar { display: flex; }
  body { padding-bottom: 0; }
}

/* ---------- reveals: 14px rise + fade, once ---------- */
html.js [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity var(--d-reveal) var(--ease-out), translate var(--d-reveal) var(--ease-out); transition-delay: var(--rd, 0ms); }
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
html.js [data-reveal="stagger"] { opacity: 1; translate: 0 0; transition: none; }
html.js [data-reveal="stagger"] > * { opacity: 0; translate: 0 14px; transition: opacity var(--d-reveal) var(--ease-out), translate var(--d-reveal) var(--ease-out); transition-delay: calc(var(--rd, 0ms) + var(--i, 0) * 70ms); }
html.js [data-reveal="stagger"].is-in > * { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal="stagger"] > * { translate: 0 0; transition-delay: 0ms; }
}

/* ---------- cards: card fill, 1px line, shadow on hover only ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--card-pad);
  transition: box-shadow var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-hover); }

/* ---------- three steps ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--grid-gap); align-items: stretch; }
.step { display: grid; gap: 14px; align-content: start; justify-items: start; }
.step-top { display: flex; align-items: center; gap: 12px; }
.step-num {
  display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none;
  font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: var(--accent-text);
  border: 2px solid var(--accent); border-radius: 50%; background: var(--card);
}
.step .h2 { text-wrap: pretty; }
.step p { color: var(--muted); text-wrap: pretty; }
.step .btn { margin-top: 6px; }
/* step 3 is optional: a dashed card and a quieter number, so steps 1-2 read as the whole job */
.step-optional { border-style: dashed; border-color: var(--line-strong); background: color-mix(in oklab, var(--card) 60%, transparent); }
.step-optional .step-num { border-style: dashed; }
.step-arrow-cell { display: grid; place-items: center; align-self: center; padding-block: 8px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step-arrow-cell { padding-block: 2px; }
  .step-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .step .btn { width: 100%; }
}

/* an optional small accordion (phone icon on the home screen) inside step 1 */
.tip { width: 100%; margin-top: 4px; }
.tip summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0;
  font-size: var(--t-small); font-weight: 600; cursor: pointer; list-style: none; color: var(--ink);
}
.tip summary::-webkit-details-marker { display: none; }
.tip summary .da-ico { color: var(--accent); }
.tip summary .chev { margin-left: auto; }
.tip[open] summary .chev { transform: rotate(180deg); }
.tip-body { display: grid; gap: 6px; padding: 4px 0 8px; font-size: var(--t-small); color: var(--muted); }
.tip-body b { color: var(--ink); }
.chev { width: 20px; height: 20px; flex: none; transition: transform var(--d-ui) var(--ease-out); }

/* ---------- method: scene tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.tile {
  position: relative; display: grid; align-content: end; gap: 6px;
  aspect-ratio: 1; padding: 22px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); cursor: pointer;
  overflow: hidden; container-type: inline-size;
  -webkit-touch-callout: none; touch-action: manipulation;
  transition: border-color var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out);
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.tile:active { transform: scale(.985); }
.tile[aria-pressed="true"] { border-color: var(--accent); }
/* the glyph block sits in the upper middle, so the tile never reads as an empty box with a caption */
.tile-parts, .tile-char { position: absolute; left: 0; right: 0; top: 16cqw; height: 46cqw; display: flex; justify-content: center; align-items: center; line-height: 1; }
.tile-parts { gap: 5cqw; font-size: 20cqw; transition: opacity var(--d-ui) var(--ease-out); }
.tile-parts b { font-weight: 500; transition: transform var(--d-scene) var(--ease-inout); }
.tile-parts i { font-style: normal; font-family: var(--font-sans); font-size: 8cqw; color: var(--faint); transition: opacity var(--d-ui); }
.tile-char { font-size: 32cqw; opacity: 0; transform: scale(.9); transition: opacity var(--d-scene) var(--ease-out), transform var(--d-scene) var(--ease-out); color: var(--ink); }
.tile-key { font-size: var(--t-small); color: var(--muted); opacity: 0; translate: 0 6px; transition: opacity var(--d-ui) var(--ease-out), translate var(--d-ui) var(--ease-out); }
.tile-key em { font-style: normal; font-family: var(--font-serif); font-size: 1.25em; color: var(--ink); margin-right: .35em; }
.tile-story { font-size: var(--t-small); color: var(--muted); line-height: 1.4; min-height: 2.8em; text-wrap: pretty; }
.tile.is-built .tile-parts, .tile.is-built .tile-hint { opacity: 0; }
.tile.is-built .tile-parts b:first-child { transform: translateX(30%); }
.tile.is-built .tile-parts b:last-child { transform: translateX(-30%); }
.tile.is-built .tile-char { opacity: 1; transform: scale(1); }
.tile.is-built .tile-key { opacity: 1; translate: 0 0; }
/* the first tile's small win: "your turn" becomes "nice" once it is built */
.tile-story-done { display: none; align-items: baseline; gap: 6px; color: var(--ink); }
.tile-story-done .da-ico { color: var(--gold); flex: none; align-self: center; }
.tile.is-built .tile-story-done { display: flex; }
.tile.is-built .tile-story:not(.tile-story-done) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-parts, .tile:hover .tile-hint { opacity: 0; }
  .tile:hover .tile-parts b:first-child { transform: translateX(30%); }
  .tile:hover .tile-parts b:last-child { transform: translateX(-30%); }
  .tile:hover .tile-char { opacity: 1; transform: scale(1); }
  .tile:hover .tile-key { opacity: 1; translate: 0 0; }
  .tile:hover .tile-story-done { display: flex; }
  .tile:hover .tile-story:not(.tile-story-done) { display: none; }
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) and (max-width: 900px) {
  .tile { aspect-ratio: 5 / 4; padding: 24px 26px; }
  .tile-parts, .tile-char { top: 6cqw; height: 40cqw; }
  .tile-parts { font-size: 17cqw; }
  .tile-char { font-size: 27cqw; }
}
@media (max-width: 640px) { .tile { padding: 16px; } .tile-story { min-height: 0; } }
@media (max-width: 420px) { .tile { padding: 14px; } }

.scale-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: var(--head-gap); color: var(--muted); }
.scale-one { font-family: var(--font-zh); font-size: 2rem; color: var(--ink); line-height: 1; }
.scale-track { height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--line)); }
.scale-copy { font-size: var(--t-body); max-width: 26rem; text-wrap: pretty; }
.scale-copy b { color: var(--ink); font-family: var(--font-serif); font-size: 1.3em; font-weight: 400; }
@media (max-width: 640px) { .scale-line { grid-template-columns: auto 1fr; gap: 12px 16px; } .scale-copy { grid-column: 1 / -1; } }

/* ---------- app: phones ---------- */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; margin-bottom: var(--head-gap); }
.phone { margin: 0; display: grid; gap: 14px; }
.phone-mid { margin-top: 32px; }
.phone-frame { border-radius: var(--r-phone); overflow: hidden; border: 1px solid var(--line); background: var(--card); padding: 8px; }
.phone-frame img { border-radius: calc(var(--r-phone) - 8px); }
.phone figcaption { font-size: var(--t-small); color: var(--muted); text-align: center; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .phone-mid { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { translate: 0 20px; } to { translate: 0 -20px; } }
  }
}
.swipe-hint { display: none; }
@media (max-width: 760px) {
  .phones { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; margin-bottom: 8px; }
  .phones::-webkit-scrollbar { display: none; }
  .phone { flex: 0 0 72%; scroll-snap-align: center; }
  .phone-mid { margin-top: 0; }
  /* the other two screens hide to the right; say so */
  .swipe-hint { display: flex; justify-content: center; gap: 6px; font-size: var(--t-small); color: var(--muted); margin-bottom: var(--head-gap); }
  .swipe-hint span { display: inline-block; animation: swipe-nudge 1.8s var(--ease-inout) infinite; }
  @keyframes swipe-nudge { 50% { transform: translateX(4px); } }
}

.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 12px 32px; margin-bottom: 2rem; max-width: 60rem; }
.points li { padding: 14px 0 14px 2.1rem; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.5; }
.points li b { display: block; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 640px) { .points { gap: 0; } }

/* what happens after the click, and where progress goes: two quiet cards before the button */
.know-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-bottom: 2rem; max-width: 60rem; }
.know { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: var(--card-pad); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.know > div { display: grid; gap: 4px; }
.know b { color: var(--ink); }
.know p { color: var(--muted); text-wrap: pretty; }
.know p b { font-weight: 600; }
@media (max-width: 760px) { .know-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .know { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- watch: browser + decoder ---------- */
.browser { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); overflow: hidden; margin-bottom: var(--head-gap); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-bar i { margin-left: 12px; font-style: normal; font-size: var(--t-small); color: var(--muted); padding: 4px 12px; border-radius: var(--r-chip); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.browser-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .9fr); }
/* the video mock stays dark: it is a picture of a screen, not UI */
.vid { position: relative; aspect-ratio: 16 / 9; background: #161B26; color: #F3EEE2; overflow: hidden; isolation: isolate; }
.vid-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid-cc { position: absolute; top: 12px; right: 14px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; opacity: .7; }
.sub { position: absolute; left: 12px; right: 12px; bottom: 44px; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px; font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.3; }
.sub button { border: 0; background: transparent; padding: 0 .1em; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); -webkit-touch-callout: none; touch-action: manipulation; transition: background-color var(--d-fast), color var(--d-fast); }
@media (hover: hover) { .sub button:hover { background: rgba(255, 255, 255, .14); } }
.sub button:active { background: rgba(255, 255, 255, .18); }
.sub button.is-on { color: var(--accent-on-dark); background: rgba(255, 255, 255, .12); }
.sub button:focus-visible { outline-color: var(--accent-on-dark); outline-offset: 1px; }
@media (pointer: coarse) {
  .sub { gap: 4px; }
  .sub button { min-height: 44px; min-width: 44px; padding: 0 .2em; }
}
.sub span { opacity: .8; }
.decode {
  position: absolute; width: max-content; max-width: min(260px, calc(100% - 24px)); padding: 10px 14px 11px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  display: grid; gap: 2px; z-index: 2;
  animation: pop var(--d-ui) var(--ease-out) both;
}
.decode::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.decode-py { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.1; }
.decode-gloss { font-size: var(--t-small); color: var(--muted); }
.decode-parts { display: flex; gap: 10px; font-size: var(--t-small); color: var(--muted); margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.decode-parts b { font-weight: 500; color: var(--ink); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.vid-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; font-size: .75rem; opacity: .85; }
.vid-play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vid-prog { flex: 1; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; overflow: hidden; }
.vid-prog span { display: block; width: 38%; height: 100%; background: var(--accent-on-dark); }
.vid-time { font-variant-numeric: tabular-nums; }

/* chip effects */
.fx-reveal .sub button:not(.is-on) { filter: blur(6px); }
.fx-reveal .sub button { transition: filter var(--d-ui) var(--ease-out); }
.fx-slow .vid-time::before { content: "0.75x  "; color: var(--accent-on-dark); }
.fx-loop .vid-prog span { animation: loopbar 3s linear infinite; }
@keyframes loopbar { from { width: 30%; } to { width: 46%; } }
.fx-shadow .panel-hint::before { content: "your turn. "; color: var(--accent-text); }

.panel { padding: 16px 18px 18px; display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--line); font-size: var(--t-small); }
.panel-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.panel-head img { border-radius: 5px; }
.chip-lang { margin-left: auto; font-size: var(--t-small); padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--muted); font-weight: 500; }
.line { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--r-chip); }
.line em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--t-small); }
.line span { font-size: 1.05rem; }
.line small { grid-column: 2; color: var(--muted); font-size: var(--t-small); }
.line.past { color: var(--muted); }
.line.cur { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.line mark { background: var(--accent-soft); color: var(--accent-text); border-radius: 4px; padding: 0 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; font-size: var(--t-small); font-weight: 500; cursor: pointer; touch-action: manipulation; transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel-hint { color: var(--muted); }
@media (pointer: coarse) {
  .chips { gap: 8px; }
  .chip { min-height: 44px; padding-inline: 16px; }
}
@media (max-width: 900px) {
  .browser-body { grid-template-columns: 1fr; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .line.past { display: none; }
  .sub { bottom: 36px; font-size: 1.2rem; }
  .decode { max-width: calc(100% - 24px); }
}

/* ---------- "this part is for your computer": phones only ---------- */
.later { display: none; }
@media (max-width: 760px) {
  .later { display: grid; gap: 14px; margin-top: var(--head-gap); }
  .later-text { display: grid; gap: 4px; }
  .later-text b { color: var(--ink); }
  .later-text p { color: var(--muted); text-wrap: pretty; }
  .later .btn { width: 100%; }
  .copy-msg { font-size: var(--t-small); color: var(--accent-text); min-height: 1.5em; margin-top: -6px; }
  .copy-msg:empty { display: none; }
  .later + .install { margin-top: var(--grid-gap); }
}

/* ---------- install hanzen watch: three pictured steps ----------
   a <details>: open on computers (the summary is hidden), folded on phones
   behind one plain tap, since the add-on only runs on a computer (js/ui.js) */
.install { margin-top: var(--head-gap); display: grid; gap: var(--grid-gap); }
.install-summary { display: none; list-style: none; }
.install-summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
  .install-summary {
    display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px var(--card-pad);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
    font-weight: 600; line-height: 1.3; cursor: pointer; color: var(--ink);
  }
  .install-summary-text { display: inline-flex; align-items: center; gap: 10px; }
  .install-summary .da-ico { color: var(--accent); }
  .install-summary .chev { margin-left: auto; color: var(--muted); }
  .install[open] .install-summary .chev { transform: rotate(180deg); }
  .install[open] .install-summary { border-color: var(--line-strong); }
}
.install-head { display: grid; gap: 10px; justify-items: start; }
.install-head .h2 { display: flex; align-items: center; gap: 12px; }
.install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.install-card { display: grid; gap: 14px; align-content: start; }
.install-pic {
  display: grid; place-items: center; min-height: 160px; padding: 20px;
  border-radius: var(--r-img); background: var(--band); border: 1px solid var(--line); overflow: hidden;
}
.install-card p { color: var(--muted); text-wrap: pretty; }
.install-card p b { color: var(--ink); }
/* step 1 shows the real button as a picture (not a link) */
.fake-btn { pointer-events: none; }
/* step 2: an original hand-drawn sketch of the little browser window */
.sketch { width: min(100%, 260px); height: auto; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sketch text { fill: currentColor; stroke: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.sketch .sketch-btn { fill: var(--accent); stroke: none; }
.sketch .sketch-btn-text { fill: var(--accent-ink); font-size: 11px; }
.sketch .sketch-ring { stroke: var(--accent); stroke-width: 3; filter: url(#doodle-rough); }
.sketch .sketch-muted { stroke: var(--line-strong); }
/* step 3: the browser mock, small */
.mini-browser { width: 100%; max-width: 260px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); overflow: hidden; font-size: .8125rem; }
.mini-bar { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.mini-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.mini-body { display: grid; grid-template-columns: 1.6fr 1fr; height: 96px; }
.mini-vid { background: #161B26; position: relative; }
.mini-vid::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.mini-panel { display: grid; gap: 6px; align-content: start; padding: 8px; border-left: 1px solid var(--line); }
.mini-panel i { display: block; height: 7px; border-radius: 4px; background: var(--line); }
.mini-panel i:first-child { width: 70%; background: var(--accent); }
.mini-panel i:nth-child(3) { width: 80%; }
.install-notes { display: grid; gap: 8px; color: var(--muted); font-size: var(--t-small); max-width: 44rem; }
.install-notes li { display: flex; gap: 10px; align-items: baseline; }
.install-notes li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--line-strong); position: relative; top: -.2em; }
.install-notes a { color: var(--ink); }
@media (max-width: 900px) { .install-grid { grid-template-columns: 1fr; } .install-card { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.faq { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); transition: box-shadow var(--d-ui) var(--ease-out); }
.faq:hover { box-shadow: var(--shadow-hover); }
.faq summary {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px var(--card-pad);
  font-weight: 600; line-height: 1.3; cursor: pointer; list-style: none; text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-left: auto; color: var(--muted); }
.faq[open] summary .chev { transform: rotate(180deg); }
.faq-body { padding: 0 var(--card-pad) 22px; color: var(--muted); text-wrap: pretty; }
.faq-body a { color: var(--ink); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { height: 0; overflow: clip; transition: height var(--d-ui) var(--ease-out), content-visibility var(--d-ui) allow-discrete; }
  .faq[open]::details-content { height: auto; }
}
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- final cta ---------- */
.closing { text-align: center; display: grid; gap: 16px; justify-items: center; }
.closing-line { font-family: var(--font-serif); font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance; }
.closing-sub { color: var(--muted); max-width: 30rem; text-wrap: pretty; }
.closing .btn { margin-top: 8px; }
.closing-contact { font-size: var(--t-small); color: var(--muted); }
.closing-contact a { color: var(--ink); }
/* where it runs: three small cards under the last button, text links only */
.anywhere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; margin-top: clamp(2rem, 5vw, 3.5rem); text-align: left; }
.anywhere-card { display: grid; gap: 10px; align-content: start; justify-items: start; }
.anywhere-card b { color: var(--ink); font-size: var(--t-h2); font-family: var(--font-serif); font-weight: 400; line-height: 1.15; }
.anywhere-card p { color: var(--muted); text-wrap: pretty; }
.anywhere-card p b { font-size: inherit; font-family: var(--font-sans); font-weight: 600; }
.anywhere-card .text-link { margin: 2px 0 0 -8px; }
@media (max-width: 900px) { .anywhere { grid-template-columns: 1fr; max-width: 30rem; } }

/* ---------- footer ---------- */
.footer { padding: 3rem 0 calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.footer-inner { display: grid; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-note { text-wrap: pretty; }
@media (min-width: 761px) {
  .footer-inner { grid-template-columns: auto 1fr; align-items: center; }
  .footer-links { justify-content: end; }
  .footer-note { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* room for the sticky bar */
  .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   ATTUNE REFRAME: problem / cause / fix / compare / proof
   listening-first narrative. paper + ink + jade + gold only.
   ========================================================== */
.reframe-body { max-width: 40rem; }
.reframe-body p { margin: 0 0 1rem; }
.reframe-body p:last-child { margin-bottom: 0; }

/* the pull quote: a jade rule on the left, ink text, source in muted */
.pullquote {
  margin: 1.75rem 0 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  max-width: 40rem;
}
.pullquote p {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink);
}
.pullquote cite { display: block; margin-top: .6rem; font-style: normal; font-size: var(--t-small); color: var(--muted); }

/* the fix: the three listening parts, smallest to largest */
.spine-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.spine-list li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1.1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-chip);
}
.spine-list li .da-ico { color: var(--accent); flex: none; margin-top: .15rem; }
.spine-note {
  margin: 1.1rem 0 0; padding: .8rem 1.1rem;
  border-radius: var(--r-chip);
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: 600;
}

/* the honest comparison: hanzen vs the movie method, one row each */
.compare { margin: 1.75rem 0 0; display: grid; gap: .5rem; max-width: 46rem; }
.compare-row {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .75rem; align-items: center;
  padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card);
}
.compare-head {
  background: transparent; border: none; padding: .25rem 1rem;
  font-size: var(--t-small); font-weight: 700; color: var(--muted); text-transform: none;
}
.compare-row b { font-weight: 600; color: var(--ink); }
.compare-row span { font-size: var(--t-small); }
.compare-you { color: var(--accent-text); font-weight: 700; }
.compare-them { color: var(--muted); }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr; gap: .25rem; }
  .compare-head { display: none; }
  .compare-you::before { content: "hanzen: "; color: var(--muted); font-weight: 600; }
  .compare-them::before { content: "movie method: "; color: var(--muted); font-weight: 600; }
}

/* proof points: a plain honest list, jade check, source in muted */
.proof-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 46rem; }
.proof-list li { display: flex; align-items: flex-start; gap: .7rem; }
.proof-list li .da-ico { color: var(--accent); flex: none; margin-top: .2rem; }
.proof-limits { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px dashed var(--line-strong); border-radius: var(--r-chip); color: var(--muted); max-width: 46rem; }
.proof-limits b { color: var(--ink); }