/* tapomo.app: clean, white, big type, one idea per screen. Tapomo's own drawing lives in mascot.css. */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #ffffff;
  --bg-soft: #fff8f3;
  --card-bg: #fff8f3;
  --ink: #23202b;
  --muted: #6b6579;
  --line: #f0e4dc;
  --accent: #ff9e7a;
  --accent-hover: #ffb091;
  --accent-strong: #f0764a;
  --accent-text: #c2502a;
  --gold: #ffcc4d;
  --fire-text: #c43a22;
  --focus: #23202b;
  --header-bg: rgba(255, 255, 255, .82);
  --key-face: #ffffff;
  --key-edge: #e6dcd4;
  --trail: #ff9e7a;
  --heat-0: #f6eee8; --heat-1: #ffe1d3; --heat-2: #ffc2a8; --heat-3: #ff9e7a; --heat-4: #f0764a;
  --f0: #ffd3dc; --f1: #ffdfc4; --f2: #fff0b3; --f3: #d6f1cb; --f6: #c8ecf3; --f7: #d3ddff; --f8: #e5d6fb; --f9: #f9d2ec;
  --font: ui-rounded, "Nunito", "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Trebuchet MS", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 28px;
  --header-h: 60px;
  --stage: 150px;
  --stage-hero: clamp(220px, 28vw, 340px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1822;
    --bg-soft: #221e2b;
    --card-bg: #26222f;
    --ink: #f5eefb;
    --muted: #b3acc2;
    --line: #38323f;
    --accent-text: #ffb597;
    --fire-text: #ff8f75;
    --focus: #ffb597;
    --header-bg: rgba(27, 24, 34, .8);
    --key-face: #3a3444;
    --key-edge: #2a2531;
    --heat-0: #302b39; --heat-1: #5a3f3e; --heat-2: #8a5546; --heat-3: #d57e5c; --heat-4: #ff9e7a;
    --f0: #6a4053; --f1: #6b4e3a; --f2: #655a36; --f3: #405f47; --f6: #3b5b63; --f7: #434d75; --f8: #54456f; --f9: #64405a;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; position: relative; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.025em; font-weight: 900; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
kbd { font-family: var(--font); }
code, pre { font-family: var(--mono); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 800; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.wrap.narrow { max-width: calc(860px + 2 * var(--gutter)); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .72em 1.35em; border-radius: 999px; border: 0;
  background: var(--accent); color: #23202b; font: inherit; font-weight: 850; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  /* a soft keycap: it has a lip and goes down when pressed */
  box-shadow: 0 4px 0 var(--accent-strong), 0 10px 24px -10px rgba(240, 118, 74, .55);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-strong), 0 4px 10px -6px rgba(240, 118, 74, .5); }
.btn .ico { width: 1.25em; height: 1.25em; flex: none; }
.btn-small { font-size: .9rem; padding: .55em 1.05em; box-shadow: 0 3px 0 var(--accent-strong); }
.btn-big { font-size: clamp(1.05rem, 2.2vw, 1.25rem); padding: .95em 1.7em; }
.btn-ghost { background: var(--card-bg); color: var(--ink); box-shadow: 0 3px 0 var(--line); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--bg); }
.link-arrow { font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; }
.link-arrow::after { content: "→"; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--header-bg); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-inner { height: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; }
.brand svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover svg { transform: translateY(-2px) rotate(-6deg); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 750; font-size: .95rem; }
.site-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-btn {
  min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-weight: 850; font-size: .85rem; letter-spacing: .04em; cursor: pointer;
}
.lang-btn:hover { background: var(--bg-soft); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress-grow linear both; animation-timeline: scroll(root); }
}
@keyframes progress-grow { to { transform: scaleX(1); } }
@media (max-width: 860px) { .site-nav { display: none; } .header-actions { margin-left: auto; } }

/* ------------------------------------------------------------------ sections */
.sec { padding: clamp(96px, 15vh, 168px) 0; position: relative; --card-bg: var(--bg-soft); }
.sec.soft { background: var(--bg-soft); --card-bg: var(--bg); }
@media (prefers-color-scheme: dark) { .sec.soft { --card-bg: #2a2534; } .sec { --card-bg: #26222f; } }
.kicker { font-weight: 850; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--accent-text); margin-bottom: 14px; }
h2 { font-size: clamp(2.3rem, 6vw, 4.4rem); }
.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--muted); margin-top: 20px; max-width: 36em; line-height: 1.45; }
.fine { font-size: .92rem; color: var(--muted); margin-top: 16px; }

.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; margin-bottom: clamp(48px, 8vh, 80px); }
.sec-head.flip { grid-template-columns: auto minmax(0, 1fr); }
.sec-head.flip .stage { order: -1; }
.stage { width: var(--stage); height: var(--stage); flex: none; position: relative; }
.stage-small { --stage: 128px; }
@media (max-width: 720px) {
  :root { --stage: 112px; }
  .stage-small { --stage: 104px; }
  .sec-head, .sec-head.flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sec-head .stage { justify-self: end; margin-right: 6px; }
  .sec-head.flip .stage { order: 0; justify-self: start; margin-left: 6px; }
}

/* ------------------------------------------------------------------ hero */
.hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vh, 72px) 0 88px; position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 56px; align-items: center; }
.stage-hero { --stage: var(--stage-hero); justify-self: center; }
.eyebrow { font-weight: 850; color: var(--muted); font-size: clamp(.95rem, 1.6vw, 1.1rem); margin-bottom: 18px; letter-spacing: .01em; }
h1 { font-size: clamp(3.3rem, 10vw, 7.2rem); line-height: .95; letter-spacing: -.045em; }
.hero .lead { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 26px; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); text-decoration: none; font-weight: 800; font-size: .9rem;
}
.scroll-cue svg { width: 22px; height: 22px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 720px) {
  .hero { min-height: auto; padding-top: 24px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stage-hero { --stage: 188px; order: -1; }
  .scroll-cue { display: none; }
}
@media (max-height: 640px) and (min-width: 721px) { .scroll-cue { display: none; } }
/* The hero text gently steps back as it scrolls away (decoration only, so no fallback). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-text { animation: hero-away linear both; animation-timeline: view(); animation-range: exit 10% exit 90%; }
  }
}
@keyframes hero-away { to { opacity: .15; transform: translateY(-40px) scale(.97); } }

/* ------------------------------------------------------------------ reveal on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(36px) scale(.985); } to { opacity: 1; transform: none; } }
/* Fallback for browsers without scroll-driven animations (site.js adds .no-sda and .in). */
@media (prefers-reduced-motion: no-preference) {
  html.no-sda .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
  html.no-sda .reveal.in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ cards / bento */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card { background: var(--card-bg); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); position: relative; overflow: hidden; min-width: 0; }
.card h3 { font-size: 1.15rem; letter-spacing: -.01em; font-weight: 850; }
.card-d { color: var(--muted); margin-top: 10px; }
.big-num { font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; margin-top: 14px; font-variant-numeric: tabular-nums; }
.big-num .unit { margin-left: .22em; font-size: .32em; letter-spacing: 0; color: var(--muted); font-weight: 850; }
.mid-num { font-size: clamp(2rem, 4.2vw, 2.8rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; margin-top: 8px; }

.measure-grid .card-speed { grid-column: span 4; }
.measure-grid .card-peak { grid-column: span 2; }
.measure-grid .card-streak { grid-column: span 2; }
.measure-grid .card-heat { grid-column: span 4; }
.measure-grid .card-apps { grid-column: span 6; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .card { grid-column: span 1 !important; }
  .measure-grid .card-speed, .measure-grid .card-heat, .measure-grid .card-apps, .habits-grid .card-goal { grid-column: span 2 !important; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .card { grid-column: span 1 !important; }
}

/* speed */
.zone-pill { display: inline-block; margin-top: 14px; padding: 5px 14px; border-radius: 999px; font-weight: 850; font-size: .95rem; color: var(--fire-text); background: rgba(240, 85, 58, .12); }
.mini-keys { display: flex; gap: 7px; margin-top: 22px; flex-wrap: wrap; }
.mini-keys i {
  width: 30px; height: 28px; border-radius: 8px; background: var(--key-face); display: block;
  box-shadow: 0 3px 0 var(--key-edge), inset 0 0 0 1.5px var(--key-edge);
  transition: transform .09s ease, background-color .2s ease, box-shadow .09s ease;
}
.mini-keys i.wide { width: 96px; }
.mini-keys i.on { transform: translateY(3px); background: var(--accent); box-shadow: 0 0 0 var(--key-edge), inset 0 0 0 1.5px var(--accent-strong); transition-duration: .04s; }

/* peak sparkline */
.spark { width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-star { fill: var(--gold); stroke: #23202b; stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-peak .spark-line { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .2s; }
  html.js .card-peak .spark-star { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s; }
  html.js .card-peak.in .spark-line { stroke-dashoffset: 0; }
  html.js .card-peak.in .spark-star { transform: scale(1); }
}

/* streak */
.streak-bar { height: 12px; border-radius: 999px; background: var(--line); margin-top: 18px; overflow: hidden; }
.streak-bar span { display: block; height: 100%; width: 86%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold)); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-streak .streak-bar span { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
  html.js .card-streak.in .streak-bar span { transform: scaleX(1); }
}

/* heatmap */
.heat { display: grid; grid-template-columns: 1.6em repeat(24, minmax(0, 1fr)); gap: 3px; margin-top: 18px; font-size: .72rem; color: var(--muted); font-weight: 800; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--heat-0); display: block; }
.heat i[data-l="1"] { background: var(--heat-1); }
.heat i[data-l="2"] { background: var(--heat-2); }
.heat i[data-l="3"] { background: var(--heat-3); }
.heat i[data-l="4"] { background: var(--heat-4); }
.heat b { font-weight: 800; align-self: center; line-height: 1; }
.heat .hh { grid-column: span 6; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-heat .heat i { opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
  html.js .card-heat.in .heat i { opacity: 1; transform: none; }
}

/* apps */
.bars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr) 2.4em; gap: 14px; align-items: center; font-weight: 800; }
.bar { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--accent); transform-origin: 0 50%; }
.bars li:nth-child(2) .bar i { background: var(--accent-strong); }
.bar-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-apps .bar i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.3, .7, .2, 1); }
  html.js .card-apps .bars li:nth-child(2) .bar i { transition-delay: .12s; }
  html.js .card-apps .bars li:nth-child(3) .bar i { transition-delay: .24s; }
  html.js .card-apps .bars li:nth-child(4) .bar i { transition-delay: .36s; }
  html.js .card-apps.in .bar i { transform: scaleX(1); }
}

/* ------------------------------------------------------------------ privacy (the dark band) */
.band-dark {
  --ink: #f5eefb; --muted: #c9c1d8; --line: #3d3647; --card-bg: #2e2938; --accent-text: #ffb597; --focus: #ffb597;
  background: #23202b; color: var(--ink);
}
@media (prefers-color-scheme: dark) { .band-dark { background: #120f17; --card-bg: #221d2a; } }
.cat-demo { background: var(--card-bg); border-radius: 32px; padding: clamp(24px, 4vw, 48px); text-align: center; }
.cat-demo h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.cat-demo > p { color: var(--muted); max-width: 40em; margin: 22px auto 0; }
.cat-rows { display: grid; justify-items: center; gap: 14px; margin-top: 28px; }
.cat-keys, .cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cat-keys kbd {
  min-width: 48px; height: 48px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 12px;
  background: #fff; color: #23202b; font-weight: 850; font-size: 1.25rem; box-shadow: 0 4px 0 #b9b0c6;
}
.cat-keys kbd.k-space { min-width: 96px; }
.cat-arrow svg { width: 30px; height: 30px; color: var(--accent); }
.cat-chips span { padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #23202b; font-weight: 850; }
.cat-chips .c-space { background: #c8ecf3; }
.cat-chips .c-del { background: #ffd3dc; }
@media (prefers-reduced-motion: no-preference) {
  html.js .cat-demo .cat-keys kbd { transition: opacity .5s ease, transform .3s ease, filter .5s ease; }
  html.js .cat-demo .cat-chips span { opacity: 0; transform: translateY(-14px) scale(.7); transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  html.js .cat-demo.in .cat-keys kbd { animation: key-gone 2.4s ease forwards; animation-delay: calc(var(--i) * .22s + .3s); }
  html.js .cat-demo.in .cat-chips span { opacity: 1; transform: none; transition-delay: calc(var(--i) * .22s + .55s); }
}
@keyframes key-gone { 0% { transform: none; } 8% { transform: translateY(4px); box-shadow: 0 0 0 #b9b0c6; } 20% { transform: none; } 100% { opacity: .28; filter: blur(1.5px); } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin: clamp(56px, 9vh, 96px) 0 clamp(40px, 6vh, 64px); }
.trio-ico { width: 52px; height: 52px; }
.trio h3 { font-size: 1.35rem; margin: 14px 0 10px; }
.trio p { color: var(--muted); }
@media (max-width: 760px) { .trio { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ habits */
.habits-grid .card-goal { grid-column: span 4; display: flex; gap: 28px; align-items: center; }
.habits-grid .card-days { grid-column: span 2; }
.habits-grid .card-xp, .habits-grid .card-badges, .habits-grid .card-league, .habits-grid .card-lessons { grid-column: span 3; }
.ring { width: clamp(108px, 14vw, 150px); flex: none; }
.ring svg { width: 100%; height: auto; transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 12; }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 40; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-goal .ring-fill { stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.3, .7, .2, 1) .2s; }
  html.js .card-goal.in .ring-fill { stroke-dashoffset: 40; }
}
@media (max-width: 460px) { .habits-grid .card-goal { flex-direction: column; align-items: flex-start; gap: 18px; } }
.flame { width: 44px; height: 55px; display: block; margin-bottom: 12px; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) { .flame { animation: flicker 2.2s ease-in-out infinite; } }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 35% { transform: scale(1.05, .96) rotate(-2deg); } 70% { transform: scale(.97, 1.04) rotate(2deg); } }

.wardrobe { display: flex; justify-content: space-between; gap: 4px; margin: -6px -6px 6px; }
.wardrobe .mascot.mini { width: 25%; max-width: 96px; height: auto; aspect-ratio: 1; }
.xp-bar { height: 10px; border-radius: 999px; background: var(--line); margin: 0 0 18px; overflow: hidden; }
.xp-bar span { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold)); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-xp .xp-bar span { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1) .3s; }
  html.js .card-xp.in .xp-bar span { transform: scaleX(1); }
}

.medals { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.medals li svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-badges .medals li { transform: scale(.4) rotate(-20deg); opacity: 0; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; transition-delay: calc(var(--i) * .09s); }
  html.js .card-badges.in .medals li { transform: none; opacity: 1; }
  .medals li:hover svg { animation: wobble .6s ease; }
}
@keyframes wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg) scale(1.06); } 65% { transform: rotate(6deg); } }

.leagues { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.leagues li { padding: 6px 12px 6px 28px; border-radius: 999px; font-weight: 800; font-size: .9rem; background: var(--bg-soft); position: relative; color: var(--muted); }
.sec.soft .leagues li { background: var(--bg-soft); }
.leagues li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(35, 32, 43, .35); }
.lg-bronze { --c: #dc9a62; } .lg-silver { --c: #c4cbdc; } .lg-gold { --c: #f7bc2f; } .lg-diamond { --c: #9fd8ff; } .lg-legend { --c: #ff9e7a; }
.sec .leagues li.is-now { background: var(--gold); color: #23202b; }
.leagues li.is-now::after { content: "▲"; font-size: .7em; margin-left: 6px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .leagues li.is-now::after { display: inline-block; animation: up 1.4s ease-in-out infinite; }
}
@keyframes up { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }

.home-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-bottom: 18px; }
.home-row kbd {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font-weight: 850; font-size: clamp(.8rem, 1.6vw, 1rem);
  color: var(--ink); background: var(--c, var(--key-face)); box-shadow: 0 3px 0 rgba(35, 32, 43, .18); position: relative;
}
.home-row kbd.bump::after { content: ""; position: absolute; bottom: 16%; left: 35%; right: 35%; height: 2.5px; border-radius: 2px; background: currentColor; opacity: .6; }
.home-row kbd.dim { opacity: .55; }
.home-row .f0 { --c: var(--f0); } .home-row .f1 { --c: var(--f1); } .home-row .f2 { --c: var(--f2); } .home-row .f3 { --c: var(--f3); }
.home-row .f6 { --c: var(--f6); } .home-row .f7 { --c: var(--f7); } .home-row .f8 { --c: var(--f8); } .home-row .f9 { --c: var(--f9); }
@media (prefers-reduced-motion: no-preference) {
  html.js .card-lessons.in .home-row kbd { animation: key-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
}
@keyframes key-wave { 0%, 12%, 100% { transform: none; box-shadow: 0 3px 0 rgba(35, 32, 43, .18); } 6% { transform: translateY(3px); box-shadow: 0 0 0 rgba(35, 32, 43, .18); } }

/* ------------------------------------------------------------------ open source */
.code-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.code-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; min-width: 0; }
.code-col h3, .policy h3 { font-size: 1.45rem; margin-bottom: 10px; }
.code-col p { color: var(--muted); }
.term {
  margin: 16px 0 0; padding: 18px 20px; border-radius: 18px; background: #23202b; color: #f5eefb;
  font-size: .86rem; line-height: 1.75; overflow-x: auto; white-space: pre; max-width: 100%;
}
@media (prefers-color-scheme: dark) { .term { background: #110e16; } }
.term .prompt { color: #ff9e7a; user-select: none; }
.policy { --card-bg: var(--bg-soft); }
@media (prefers-color-scheme: dark) { .policy { --card-bg: #26222f; } }
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.checks li { position: relative; padding-left: 38px; color: var(--muted); }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #23202b; font-weight: 900; font-size: .85rem;
}
.checks li.pending::before { content: "…"; background: var(--gold); line-height: 0; padding-bottom: 6px; }
@media (max-width: 820px) { .code-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ FAQ */
.faq { border-top: 1.5px solid var(--line); }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 52px 24px 0; position: relative;
  font-weight: 850; font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: -.01em; border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23f0764a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.answer { padding: 0 0 26px; color: var(--muted); max-width: 44em; }
.answer p { font-size: 1.08rem; }
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height .35s ease, content-visibility .35s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

/* ------------------------------------------------------------------ final download */
.cta { text-align: center; padding-bottom: clamp(96px, 14vh, 150px); }
.cta h2 { font-size: clamp(2.4rem, 11.5vw, 7rem); letter-spacing: -.045em; }
.cta .lead { margin: 22px auto 0; }
.cta-row { display: flex; justify-content: center; align-items: center; gap: 24px 40px; margin-top: 44px; flex-wrap: wrap; }
.dl-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (max-width: 560px) { .cta-row { flex-direction: column-reverse; } }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--muted); font-size: .95rem; position: relative; z-index: 2; background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-weight: 800; }
.footer-links a, .footer-links .link-btn { color: var(--ink); text-decoration: none; font-weight: 800; }
.footer-links a:hover, .footer-links .link-btn:hover { color: var(--accent-text); text-decoration: underline; }
.footer-fine { flex-basis: 100%; }
@media (max-width: 640px) { .footer-links { margin-left: 0; } }

/* ------------------------------------------------------------------ Tapomo's road and the traveller */
.trail-layer { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; overflow: clip; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail-base path { stroke: var(--trail); stroke-width: 3; stroke-dasharray: 0.1 13; opacity: .45; }
.trail-done path { stroke: var(--trail); stroke-width: 4; opacity: .9; }
.traveler { position: absolute; left: 0; top: 0; z-index: 5; width: 100px; height: 100px; will-change: transform; transform-origin: 0 0; }
.traveler-inner { width: 100%; height: 100%; position: relative; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease-out; }
.traveler .mascot.traveler-svg { width: 100%; height: 100%; display: block; pointer-events: auto; cursor: pointer; }
.traveler:not(.ready) { visibility: hidden; }
html.reduced .trail-layer { display: none; }

/* Speech bubble: always white with ink text, like the app's floating pet. */
.bubble {
  /* The shift that keeps it on screen (--bx) is on `left`, which is not animated: only the pop-in is. */
  position: absolute; left: calc(50% + var(--bx, 0px)); bottom: 80%; z-index: 2;
  transform: translateX(-50%) translateY(6px) scale(.85); transform-origin: 50% 100%;
  opacity: 0; transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none; width: max-content; max-width: min(240px, 70vw);
}
.bubble span {
  display: block; background: #fff; color: #23202b; font-weight: 850; font-size: 1rem; line-height: 1.25; text-align: center;
  padding: 8px 14px; border-radius: 16px; box-shadow: 0 6px 20px -6px rgba(35, 32, 43, .35), 0 0 0 1.5px rgba(35, 32, 43, .08);
}
.bubble::after {
  content: ""; position: absolute; left: clamp(20px, calc(50% - var(--bx, 0px)), calc(100% - 20px)); bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
  background: #fff; transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 6px -3px rgba(35, 32, 43, .25);
}
.bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.bubble.small span { font-size: .9rem; }

/* The goal ring Tapomo shows in "habits". */
.goal-ring { position: absolute; inset: -12%; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.goal-ring circle { fill: none; stroke-width: 5; }
.gr-track { stroke: var(--line); }
.gr-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.traveler.ring-on .goal-ring { opacity: 1; transform: none; }
.traveler.ring-on .gr-fill { stroke-dashoffset: 0; transition: stroke-dashoffset .45s cubic-bezier(.4, 0, .2, 1) .05s; }
.traveler.ring-done .gr-fill { stroke: var(--gold); }

/* Static Tapomos (reduced motion): one per stage, no travelling. */
.stage .mascot { width: 100%; height: 100%; }
.stage .static-ring { position: absolute; inset: -12%; }

/* Round glasses (wardrobe "gafas") only show in the code section. */
.mascot .rw-gafas { opacity: 0; transition: opacity .25s ease; }
.mascot.wear-gafas .rw-gafas { opacity: 1; }

/* Quick entrance on later visits: the hero text eases in while Tapomo bounces in. */
@media (prefers-reduced-motion: no-preference) {
  html.returning.entering .hero-text { animation: hero-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  html.returning.entering .site-header { animation: fade-in .6s ease both; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ intro (Mochitsuki) */
html.intro-on body::before { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--bg); }
html.intro-on body { overflow: hidden; }
html.intro-on.intro-built body::before { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px 40px; overflow: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.intro.out { opacity: 0; visibility: hidden; }
.intro-skip { z-index: 3; position: absolute; top: 14px; right: 16px; }
.intro-skip.btn { background: var(--bg-soft); color: var(--ink); box-shadow: 0 3px 0 var(--line); border: 1.5px solid var(--line); }
.intro-scene { transform-origin: 82.5% 88%; position: relative; width: min(92vw, 640px, calc((100svh - 260px) * 4 / 3)); min-width: 280px; aspect-ratio: 4 / 3; }
.intro-scene > svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-scene .mascot.intro-mascot { position: absolute; left: 73.7%; top: 66.43%; width: 17.6%; height: auto; aspect-ratio: 1; opacity: 0; transform-origin: 50% 86%; }
.intro-mascot.faceless [data-part="eyes"], .intro-mascot.faceless [data-part="mouth"], .intro-mascot.faceless [data-part="cheeks"] { opacity: 0; }
.intro-mascot [data-part="eyes"], .intro-mascot [data-part="mouth"], .intro-mascot [data-part="cheeks"] { transition: opacity .35s ease; }
.intro-title { position: relative; z-index: 2; font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; margin-top: 14px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.intro-tag { position: relative; z-index: 2; color: var(--muted); font-weight: 800; font-size: clamp(1.05rem, 2.4vw, 1.3rem); margin-top: 8px; opacity: 0; transition: opacity .5s ease .15s; }
.intro.named .intro-title, .intro.named .intro-tag { opacity: 1; transform: none; }
.scene .tap { font-family: var(--font); font-weight: 900; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
.scene .kb-base { fill: #ece4dc; }
.scene .kb-slot { fill: #cfc4bb; }
@media (prefers-color-scheme: dark) { .scene .kb-base { fill: #3a3444; } .scene .kb-slot { fill: #1f1b26; } }
.scene .grain, .scene .blob, .scene .ball, .scene .pestle, .scene .bowl, .scene .kb, .scene .kb-key, .scene .tap, .scene .puff { transform-box: fill-box; transform-origin: center; }

/* On narrow screens the road would run beside the text: only Tapomo travels (peeking from the edge). */
@media (max-width: 720px) { .trail { display: none; } }

/* ------------------------------------------------------------------ support */
.support { text-align: center; background: linear-gradient(180deg, transparent, color-mix(in srgb, #ff8fb5 14%, transparent) 40%, color-mix(in srgb, var(--accent, #ff9e7a) 16%, transparent)); }
.support-inner { max-width: 760px; }
.support-stage { margin: 0 auto 6px; }
.support-heart { font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 14px; }
.support-heart span { display: inline-block; animation: support-beat 1.8s ease-in-out infinite; }
@keyframes support-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } }
.support h2 { font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -.035em; margin: 10px 0 0; }
.support .lead { margin: 18px auto 0; }
.support-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.support-list { list-style: none; padding: 0; margin: 34px auto 0; display: grid; gap: 10px; text-align: left; max-width: 620px; }
.support-list li { position: relative; padding-left: 30px; }
.support-list li::before { content: "💗"; position: absolute; left: 0; top: 0; font-size: .95em; }
@media (prefers-reduced-motion: reduce) { .support-heart span { animation: none; } }

/* Header: watch the intro again */
.replay-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; min-width: 36px; justify-content: center; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card-bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.replay-btn:hover { border-color: var(--accent, #ff9e7a); }
.replay-btn span[aria-hidden] { font-size: .7rem; color: var(--accent-strong, #f0764a); }
@media (max-width: 520px) { .replay-txt { display: none; } }

@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none !important; } }

/* With the crown on (end of the page) the bubble sits higher so the crown shows. */
.traveler.crowned .bubble { bottom: 104%; }