@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");
/* ==========================================================================
   Luwy design system v2
   Principles: paper + cocoa. One accent (mug) used only for progress and the
   active state. No outlined boxes around buttons or ordinary text. Lists are
   rows with hairlines. One dark "stage" per screen at most.
   ========================================================================== */

 :root {
  --paper:#F2EDEB;--paper-2:#F5EADD;--paper-3:#FCD8A2;--ink:#613627;
  --muted:color-mix(in srgb,#613627 72%,#F2EDEB);--faint:color-mix(in srgb,#613627 48%,#F2EDEB);
  --line:#B78C6E;--cocoa:#613627;--cocoa-hover:#4b281e;--cocoa-deep:#3d2118;--mug:#E19E4E;--sprinkle:#FCD8A2;--good:#E19E4E;--alert:#613627;--white:#F5EADD;
  --r-sm:10px;--r-md:16px;--r-lg:24px;--gutter:clamp(18px,4vw,32px);--safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:var(--paper);--surface:var(--white);--surface-2:var(--paper-2);--surface-3:var(--paper-3);--border:var(--line);--text:var(--ink);--text-muted:var(--muted);--text-faint:var(--faint);--accent:var(--cocoa);--accent-strong:var(--cocoa-hover);--accent-ink:#F5EADD;--teal:var(--good);
}

/* reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(225, 158, 78, .75); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sprinkle); color: var(--cocoa-deep); }

/* typography ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.012em;
  line-height: 1.12;
  margin: 0;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(32px, 4.6vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--muted); }
.eyebrow {
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cocoa);
  opacity: .78;
}
.brand { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--cocoa); }
.brand span { color: var(--mug); }
.num { font-variant-numeric: tabular-nums; }

/* buttons ---------------------------------------------------------------- *
 * Two kinds only.
 *   .primary  solid cocoa pill. One per view.
 *   everything else is quiet: bold cocoa text with a thin underline.
 * ---------------------------------------------------------------------- */
.btn, button.text-button, .text-link {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; background: transparent; color: var(--cocoa);
  font: 600 15px/1.2 var(--sans);
  min-height: 44px; padding: 10px 6px;
  border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.btn.ghost, .btn.outline, .btn.soft, .btn.quiet, button.text-button, .text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 6px calc(100% - 9px);
  background-size: calc(100% - 12px) 1.5px;
  opacity: .92;
}
.btn.ghost:hover, .btn.outline:hover, .btn.soft:hover, .btn.quiet:hover, button.text-button:hover, .text-link:hover { opacity: 1; color: var(--cocoa-hover); }
.btn.primary, .btn-primary {
  background: var(--cocoa); color: #fff; padding: 0 24px; min-height: 48px;
  background-image: none; opacity: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 18px rgba(61,33,24,.16);
}
.btn.primary:hover { background: var(--cocoa-hover); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }
.btn.lg { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn.sm { min-height: 38px; font-size: 14px; }
.btn.light { background: var(--sprinkle); color: var(--cocoa-deep); background-image: none; padding: 0 24px; min-height: 48px; }
.btn.light:hover { background: #FCD8A2; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.text-link { padding: 4px 2px; min-height: 0; font-weight: 700; background-image: none; text-decoration: none; }
.on-dark .btn.quiet, .on-dark .btn.ghost, .on-dark button.text-button, .stage .btn.quiet, .stage button.text-button { color: var(--sprinkle); }
.on-dark .btn.quiet:hover, .stage .btn.quiet:hover, .stage button.text-button:hover { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* chips / pills ---------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cocoa); background: var(--paper-2); border-radius: 999px; padding: 7px 11px;
}
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mug); }

/* form controls ---------------------------------------------------------- */
.field, .select, input[type=text], input[type=email], input[type=password], input[type=number], textarea {
  width: 100%; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: var(--r-sm); padding: 12px 14px; font: 400 16px/1.4 var(--sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus, .select:focus, input:focus, textarea:focus { outline: none; border-color: var(--cocoa); box-shadow: 0 0 0 3px rgba(225,158,78,.35); }
select.select, select.field { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23613627' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
label.lbl, .field-label { display: grid; gap: 6px; font: 600 12px/1.3 var(--sans); color: var(--muted); }

/* layout helpers --------------------------------------------------------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 14px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* row lists: the default replacement for cards -------------------------- */
.rows { border-top: 1px solid var(--line); }
.rows > * { border-bottom: 1px solid var(--line); }
.item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; background: transparent; border: 0; text-align: left; color: var(--ink);
  transition: background .18s ease, padding .18s ease;
}
button.item:hover, a.item:hover { background: var(--paper-2); padding-left: 14px; padding-right: 14px; }
.item .t { display: grid; gap: 4px; min-width: 0; }
.item .t b { font: 600 17px/1.3 var(--sans); color: var(--ink); }
.item .t small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.item .go { color: var(--cocoa); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* marketing site shell --------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(242,237,235,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-nav .wrap { height: 68px; display: flex; align-items: center; gap: 24px; }
.site-nav nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.site-nav nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); }
.site-nav nav a:hover, .site-nav nav a[aria-current="page"] { color: var(--cocoa); background: var(--paper-2); }
.site-nav .actions { display: flex; align-items: center; gap: 6px; }
.nav-toggle { display: none; }
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 56px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: center; }
.site-footer a:hover { color: var(--cocoa); }
.site-footer .spacer { flex: 1; }

.hero { padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); }
.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -.02em; max-width: 14em; margin: 14px 0 20px; }
.hero h1 em { font-style: normal; color: var(--cocoa); border-bottom: 3px solid var(--mug); }
.hero .lead { font-size: clamp(17px, 1.9vw, 20px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.cta-row { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.proof { margin-top: 22px; display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.proof span::before { content: "·"; margin-right: 18px; color: var(--faint); }
.proof span:first-child::before { content: none; margin: 0; }

.band { padding: clamp(48px, 7vw, 88px) 0; }
.band + .band { border-top: 1px solid var(--line); }
.band h2 { margin: 12px 0 14px; max-width: 18em; }
.band .lead { margin-bottom: 8px; }
.band.dark { background: var(--cocoa-deep); color: #F5EADD; border-top: 0; }
.band.dark h2, .band.dark h3 { color: #fff; }
.band.dark .eyebrow { color: var(--sprinkle); opacity: 1; }
.band.dark .lead, .band.dark p { color: #B78C6E; }

.cols { display: grid; gap: clamp(20px, 3vw, 40px); }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c2 { grid-template-columns: repeat(2, 1fr); }
.cols.c4 { grid-template-columns: repeat(4, 1fr); }
.col-item { padding-top: 18px; border-top: 2px solid var(--ink); }
.col-item .eyebrow { display: block; margin-bottom: 10px; }
.col-item h3 { margin-bottom: 8px; }
.col-item p { color: var(--muted); font-size: 15px; }
.band.dark .col-item { border-color: rgba(255,255,255,.28); }

.quote-list { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 28px; }
.quote-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 4vw, 48px); padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.quote-row q { font: 600 clamp(20px, 2.4vw, 26px)/1.25 var(--serif); quotes: "\201C" "\201D"; letter-spacing: -.01em; }
.quote-row p { color: var(--muted); }
.quote-row p b { color: var(--ink); }

.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 30px; counter-reset: s; }
.flow > div { padding: 18px 16px 0 0; border-top: 2px solid rgba(255,255,255,.28); counter-increment: s; }
.flow > div::before { content: counter(s, decimal-leading-zero); display: block; font: 700 12px var(--sans); letter-spacing: .12em; color: var(--sprinkle); margin-bottom: 8px; }
.flow b { display: block; color: #fff; font: 600 18px var(--serif); margin-bottom: 4px; }
.flow p { font-size: 14px; color: #F5EADD; }

.cta-band { padding: clamp(40px, 6vw, 72px) 0; text-align: center; }
.cta-band h2 { margin: 0 auto 12px; max-width: 16em; }
.cta-band .lead { margin: 0 auto 24px; }
.cta-band .cta-row { justify-content: center; }

/* hero preview stage (marketing) ---------------------------------------- */
.preview { background: var(--cocoa-deep); color: #F5EADD; border-radius: var(--r-lg); padding: 22px; box-shadow: 0 30px 70px rgba(40,22,16,.26); }
.preview-head { display: flex; justify-content: space-between; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #B78C6E; }
.preview .who { font: 600 22px var(--serif); color: #fff; margin: 18px 0 10px; }
.bubble { max-width: 86%; padding: 12px 15px; border-radius: 16px; line-height: 1.5; font-size: 15px; }
.bubble.ai { background: rgba(255,255,255,.1); border-bottom-left-radius: 4px; }
.bubble.me { margin-left: auto; background: var(--sprinkle); color: var(--cocoa-deep); border-bottom-right-radius: 4px; }
.preview .bubble + .bubble { margin-top: 10px; }
.meters { display: grid; gap: 10px; margin-top: 20px; }
.meter { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; font-size: 12px; color: #B78C6E; }
.meter .bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 99px; background: var(--mug); width: 50%; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.meter .val { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.meter.neg .bar i { background: #E19E4E; }
.turn-flag { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: var(--sprinkle); }

/* pricing ---------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 32px; }
.plan { padding: 26px 22px 30px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.plan:last-child { border-right: 0; }
.plan.featured { background: var(--paper-2); }
.plan h3 { font-size: 24px; }
.price { font: 600 34px/1 var(--serif); color: var(--ink); }
.price small { font: 500 14px var(--sans); color: var(--muted); margin-left: 4px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.plan li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink); }
.plan li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 10px; height: 6px; border-left: 2px solid var(--cocoa); border-bottom: 2px solid var(--cocoa); transform: rotate(-45deg) translateY(-3px); }
.plan .btn { align-self: flex-start; }
.status { display: none; padding: 12px 0; color: var(--alert); font-weight: 600; }
.trial-note { margin-top: 24px; color: var(--muted); font-size: 14px; max-width: 70ch; }

/* faq -------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); margin-top: 24px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-list summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font: 600 18px/1.35 var(--sans); position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 26px/1 var(--sans); color: var(--cocoa); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 70ch; }

/* auth ------------------------------------------------------------------- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-bar { padding: 18px var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.auth-main { flex: 1; display: grid; place-items: center; padding: 16px var(--gutter) 64px; }
.auth-card { width: 100%; max-width: 420px; display: grid; gap: 18px; }
.auth-card h1 { font-size: 34px; }
.auth-card form { display: grid; gap: 14px; }
.auth-card .btn.primary { width: 100%; }
.auth-note { font-size: 14px; color: var(--muted); }
.auth-note a { color: var(--cocoa); font-weight: 700; text-decoration: none; }
.notice { padding: 12px 14px; border-left: 3px solid var(--mug); background: var(--paper-2); font-size: 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.notice.bad { border-color: var(--alert); }
.notice.good { border-color: var(--good); }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 14px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper); }
.app-brand { display: block; padding: 4px 12px 22px; font-size: 28px; }
.nav { display: grid; gap: 2px; }
.nav button {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 11px 12px; border: 0; background: transparent; color: var(--muted);
  font: 500 15px/1.2 var(--sans); border-radius: 12px; transition: background .15s ease, color .15s ease;
}
.nav button svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button:hover { background: var(--paper-2); color: var(--ink); }
.nav button.active { color: var(--cocoa); font-weight: 700; background: var(--paper-2); box-shadow: inset 3px 0 0 var(--mug); }
.side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; }
.side-foot .who { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot a, .side-foot button { padding: 8px 12px; color: var(--muted); font-size: 13px; background: none; border: 0; text-align: left; border-radius: 8px; }
.side-foot a:hover, .side-foot button:hover { color: var(--cocoa); background: var(--paper-2); }

.main { min-width: 0; }
.topbar { display: none; }
.page:focus { outline: none; }
.page { max-width: 880px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) var(--gutter) calc(112px + var(--safe-b)); }
.page.wide { max-width: 1040px; }
.page-head { margin-bottom: 28px; }
.page-head h1 { margin: 10px 0 12px; }

.tabbar { display: none; }

/* sections inside the app: rows and dividers, never boxes ------------- */
.section { margin-top: clamp(36px, 5vw, 56px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.section-head h2 { font-size: 24px; }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 4px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; position: relative; border: 0; background: transparent; padding: 13px 14px; color: var(--muted); font: 600 14px/1 var(--sans); white-space: nowrap; border-radius: 0; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--cocoa); }
.tab.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--mug); }
.tab-body { padding-top: 28px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 18px 16px 18px 0; }
.stat + .stat { padding-left: 16px; border-left: 1px solid var(--line); }
.stat b { display: block; font: 600 30px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); }

.empty { padding: 26px 0; color: var(--muted); border-top: 1px solid var(--line); }
.empty b { color: var(--ink); display: block; margin-bottom: 4px; }

/* timer ring + practice stage ------------------------------------------ */
.run { display: grid; gap: 22px; }
.topic { font: 600 clamp(26px, 4vw, 38px)/1.18 var(--serif); letter-spacing: -.01em; max-width: 22em; }
.topic-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timer { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ring { position: relative; width: 84px; height: 84px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .bg { stroke: var(--paper-3); }
.ring .fg { stroke: var(--cocoa); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s ease; }
.ring.speak .fg { stroke: var(--mug); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 24px var(--serif); font-variant-numeric: tabular-nums; }
.phase { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); }
.phase-hint { color: var(--muted); font-size: 14px; margin-top: 4px; }
.notes { min-height: 96px; resize: vertical; }
.live { border-left: 3px solid var(--mug); padding: 4px 0 4px 16px; min-height: 64px; font-size: 18px; line-height: 1.55; }
.live .interim { color: var(--faint); }
.live.idle { color: var(--faint); border-color: var(--line); }
.mic-state { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.level { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.level i { width: 4px; border-radius: 2px; background: var(--mug); height: 4px; transition: height .08s linear; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--alert); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.85); } }

/* result ----------------------------------------------------------------- */
.result { display: grid; gap: 0; }
.score-hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 8px 0 26px; }
.score-ring { position: relative; width: 112px; height: 112px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 8; }
.score-ring .bg { stroke: var(--paper-3); }
.score-ring .fg { stroke: var(--cocoa); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.score-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 36px var(--serif); font-variant-numeric: tabular-nums; }
.score-ring b small { font: 500 13px var(--sans); color: var(--muted); margin-top: -4px; }
.score-hero h2 { font-size: 26px; margin-bottom: 6px; }
.measured { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.measured div { padding: 14px 12px 14px 0; }
.measured div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.measured b { display: block; font: 600 22px var(--serif); font-variant-numeric: tabular-nums; }
.measured span { display: block; font-size: 12px; color: var(--muted); }
.measured em { display: block; font-style: normal; font-size: 12px; color: var(--faint); margin-top: 2px; }
.insight { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: 8px 24px; }
.insight .eyebrow { padding-top: 4px; }
.insight p, .insight div { font-size: 16px; }
.insight blockquote { margin: 8px 0 0; padding-left: 14px; border-left: 3px solid var(--sprinkle); color: var(--muted); font-style: italic; }
.insight .fixes { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.criteria details { border-bottom: 1px solid var(--line); }
.criteria summary { list-style: none; display: grid; grid-template-columns: 1fr 120px 44px; gap: 14px; align-items: center; padding: 14px 0; cursor: pointer; }
.criteria summary::-webkit-details-marker { display: none; }
.criteria .bar { height: 6px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.criteria .bar i { display: block; height: 100%; background: var(--cocoa); border-radius: 99px; }
.criteria .bar i.mid { background: var(--mug); }
.criteria .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.criteria .body { padding: 0 0 16px; color: var(--muted); font-size: 15px; display: grid; gap: 8px; }
.words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.word-chip { border: 0; background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--sans); }
.word-chip:hover { background: var(--sprinkle); }
.word-chip small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.transcript-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.transcript-block p { font-size: 16px; line-height: 1.7; color: var(--ink); margin-top: 10px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 26px; }

/* word of the day / pronunciation -------------------------------------- */
.word-hero { font: 600 clamp(48px, 9vw, 88px)/1 var(--serif); color: var(--cocoa); letter-spacing: -.02em; margin: 14px 0 6px; }
.word-pos { color: var(--muted); font-size: 15px; }
.example-line { font: 500 clamp(19px, 2.4vw, 24px)/1.4 var(--serif); margin: 22px 0; padding-left: 16px; border-left: 3px solid var(--mug); max-width: 30em; }

/* ==========================================================================
   FLIGHT STAGE (the one dark surface in the app)
   ========================================================================== */
.stage { background: var(--cocoa-deep); color: #F5EADD; border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); }
.stage h1, .stage h2, .stage h3 { color: #fff; }
.stage .muted, .stage .small { color: #B78C6E; }
.stage-head { display: flex; align-items: center; gap: 14px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sprinkle); color: var(--cocoa-deep); display: grid; place-items: center; font: 700 18px var(--serif); flex: none; }
.avatar.speaking { box-shadow: 0 0 0 4px rgba(225,158,78,.28), 0 0 0 9px rgba(225,158,78,.12); animation: pulse 1.6s ease-in-out infinite; }
.stage-head .who b { display: block; font: 600 18px var(--serif); color: #fff; }
.stage-head .who span { font-size: 13px; color: #B78C6E; }
.stage-head .grow { flex: 1; }
.convo { display: grid; align-content: start; justify-items: start; gap: 10px; margin: 20px 0 8px; max-height: min(46vh, 420px); min-height: 160px; overflow-y: auto; padding-right: 4px; scroll-behavior: smooth; }
.convo .bubble { font-size: 16px; }
.convo .bubble.me { justify-self: end; }
.convo .typing { color: #B78C6E; font-size: 14px; }
.stage .meters { margin: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; }
.meter .delta { position: absolute; }
.deltas { display: flex; gap: 14px; flex-wrap: wrap; min-height: 22px; font-size: 12px; margin-top: 10px; color: #B78C6E; }
.deltas .up { color: #FCD8A2; } .deltas .down { color: #E19E4E; }
.controls { display: grid; justify-items: center; gap: 12px; padding: 18px 0 4px; }
.mic {
  width: 78px; height: 78px; border-radius: 50%; border: 0; background: var(--sprinkle); color: var(--cocoa-deep);
  display: grid; place-items: center; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.mic svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic:hover { transform: scale(1.04); }
.mic.live { background: #E19E4E; animation: micpulse 1.5s ease-in-out infinite; }
.mic:disabled { background: rgba(255,255,255,.14); color: #B78C6E; box-shadow: none; animation: none; transform: none; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,165,143,.5); } 50% { box-shadow: 0 0 0 16px rgba(240,165,143,0); } }
.controls .status-line { font-size: 14px; color: #B78C6E; min-height: 20px; text-align: center; }
.controls .status-line b { color: #fff; }
.type-row { display: none; width: 100%; gap: 10px; }
.type-row.show { display: flex; }
.type-row textarea { min-height: 56px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.type-row textarea::placeholder { color: #B78C6E; }
.stage-actions { display: flex; justify-content: center; gap: 6px 22px; flex-wrap: wrap; margin-top: 4px; }
.hint-box { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--mug); background: rgba(252,216,162,.25); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; color: #F5EADD; }
.hint-box b { color: var(--sprinkle); display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.briefing { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 20px; }
.briefing > div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; }
.briefing .k { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); opacity: .8; }
.seg { display: inline-flex; background: var(--paper-2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 9px 14px; border-radius: 999px; font: 600 14px var(--sans); color: var(--muted); }
.seg button.on { background: var(--cocoa); color: #fff; }

/* recorder / rewind ------------------------------------------------------ */
.timeline { border-top: 1px solid var(--line); margin-top: 8px; }
.tl-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.tl-row .n { font: 700 12px var(--sans); letter-spacing: .1em; color: var(--faint); padding-top: 3px; }
.tl-row .who { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl-row p { font-size: 15px; }
.tl-row.turning { background: linear-gradient(90deg, rgba(252,216,162,.45), transparent 70%); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.chip-delta { font: 700 12px var(--sans); font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); color: var(--muted); }
.chip-delta.up { background: #F5EADD; color: var(--good); }
.chip-delta.down { background: #FCD8A2; color: var(--alert); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 18px; }
.compare > div { padding: 18px 20px 18px 0; }
.compare > div + div { padding-left: 20px; padding-right: 0; border-left: 1px solid var(--line); }
.compare .k { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.compare .k.new { color: var(--cocoa); }
.compare .said { font-size: 15px; color: var(--ink); }
.compare .reply { margin-top: 10px; font-size: 14px; color: var(--muted); }
.compare .impact { margin-top: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* progress / skills ------------------------------------------------------ */
.level-line { display: grid; gap: 10px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.level-line strong { font: 600 40px/1 var(--serif); color: var(--cocoa); }
.xp { height: 8px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.xp i { display: block; height: 100%; background: var(--mug); border-radius: 99px; }
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.skill-row .meta { color: var(--muted); font-size: 13px; }
.skill-row .xp { grid-column: 1 / -1; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge { padding: 8px 14px; border-radius: 999px; background: var(--paper-2); font: 600 13px var(--sans); color: var(--cocoa); }
.badge.off { color: var(--faint); background: transparent; border: 1px dashed var(--paper-3); }

/* social ----------------------------------------------------------------- */
.rank-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rank-row .n { font: 600 20px var(--serif); color: var(--faint); }
.rank-row.me .n { color: var(--cocoa); }
.rank-row small { color: var(--muted); display: block; }
.rank-row strong { font: 600 22px var(--serif); font-variant-numeric: tabular-nums; }

.score-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.score-num { font: 600 24px var(--serif); font-variant-numeric: tabular-nums; }

/* toast ------------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 20px);
  max-width: min(520px, calc(100vw - 32px)); background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 999px; z-index: 2000; font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* motion ----------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cols.c3, .cols.c4 { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(2) { border-right: 0; }
  .plan:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 20px; }
}

@media (max-width: 860px) {
  .site-nav nav { display: none; }
  .site-nav.open nav { display: grid; position: absolute; top: 68px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 18px; gap: 2px; }
  .site-nav .wrap { justify-content: space-between; }
  .nav-toggle { display: inline-flex; }

  /* app: bottom tab bar replaces the sidebar */
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; height: 54px; padding: 0 var(--gutter); background: rgba(247,248,250,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .topbar .brand { font-size: 22px; }
  .page { padding-bottom: calc(120px + var(--safe-b)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    background: rgba(242,237,235,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding: 6px 2px calc(6px + var(--safe-b));
  }
  .tabbar button { display: grid; justify-items: center; gap: 3px; border: 0; background: transparent; padding: 6px 0; color: var(--faint); font: 600 10.5px/1.1 var(--sans); min-height: 48px; }
  .tabbar button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar button.active { color: var(--cocoa); }
  .tabbar button.active svg { stroke-width: 2.1; }
  .toast { bottom: calc(86px + var(--safe-b)); }
}

@media (max-width: 640px) {
  .cols.c2, .cols.c3, .cols.c4 { grid-template-columns: 1fr; }
  .quote-row { grid-template-columns: 1fr; gap: 8px; }
  .flow { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .measured { grid-template-columns: 1fr 1fr; }
  .measured div:nth-child(3) { padding-left: 0; border-left: 0; }
  .measured div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .insight { grid-template-columns: 1fr; }
  .briefing > div { grid-template-columns: 1fr; gap: 4px; }
  .score-hero { grid-template-columns: 1fr; justify-items: start; }
  .compare { grid-template-columns: 1fr; }
  .compare > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .criteria summary { grid-template-columns: 1fr 70px 38px; }
  .tl-row { grid-template-columns: 1fr auto; }
  .tl-row .n { display: none; }
  .meter { grid-template-columns: 76px 1fr 30px; }
  .convo { max-height: 38vh; }
  .item { padding: 18px 2px; }
  .hero-grid { gap: 28px; }
}

/* ==========================================================================
   v2 additions: marketing nav, prose pages, setup steps, snapshot, compare
   ========================================================================== */
.skip { position: absolute; left: -999px; top: 8px; background: var(--cocoa); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.site-nav .brand { flex: none; }
.nav-toggle { display: none; background: transparent; border: 0; width: 44px; height: 44px; border-radius: 10px; color: var(--cocoa); }
.nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.hero h1 + .lead { margin-top: 4px; }
.hero .proof { margin-top: 26px; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.link-arrow { font-weight: 700; color: var(--cocoa); border-bottom: 2px solid var(--mug); padding-bottom: 1px; }
.link-arrow:hover { color: var(--cocoa-hover); }

.prose { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--gutter) 80px; }
.prose h1 { margin: 10px 0 14px; }
.prose h2 { font-size: 24px; margin: 38px 0 10px; }
.prose p, .prose li { color: var(--ink); max-width: 68ch; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0; }
.prose a:not(.btn) { color: var(--cocoa); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.prose .back { display: inline-block; margin-top: 40px; font-weight: 700; color: var(--cocoa); }

.answer { padding: 18px 20px; border-left: 3px solid var(--mug); background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0; max-width: 68ch; }
.answer b { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); margin-bottom: 4px; }

.compare { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); border-bottom: 2px solid var(--ink); }
.compare td:first-child { font-weight: 600; width: 28%; }
.compare td { color: var(--muted); }
.compare td:nth-child(3) { color: var(--ink); }

.setup { max-width: 620px; margin: 0 auto; padding: 22px var(--gutter) 90px; }
.setup-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 18px; }
.setup .bar { height: 4px; background: var(--paper-3); border-radius: 4px; overflow: hidden; margin-bottom: 30px; }
.setup .bar i { display: block; height: 100%; width: 25%; background: var(--mug); transition: width .3s ease; }
.setup .step { font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa); opacity: .8; margin-bottom: 10px; }
.setup .panel { display: none; }
.setup .panel.active { display: block; }
.setup h1 { margin-bottom: 10px; }
.choices { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 24px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; padding: 16px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--line); width: 100%; min-height: 64px; transition: background .15s ease; }
.choice:hover { background: var(--paper-2); }
.choice strong { display: block; font-weight: 600; font-size: 17px; }
.choice span { display: block; font-size: 14px; color: var(--muted); }
.choice::after { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--paper-3); border-radius: 50%; transition: all .15s ease; }
.choice[aria-pressed="true"] { background: var(--paper-2); }
.choice[aria-pressed="true"]::after { border-color: var(--cocoa); background: var(--cocoa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.setup .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-top: 14px; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--cocoa); }
.consent a { color: var(--cocoa); text-decoration: underline; text-underline-offset: 3px; }
.error { color: var(--alert); font-weight: 600; font-size: 14px; min-height: 20px; margin-top: 10px; }
.snapshot { display: none; margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--ink); }
.snapshot .big { font: 600 72px/1 var(--serif); color: var(--cocoa); font-variant-numeric: tabular-nums; margin: 6px 0 10px; }
.snap-row { display: grid; grid-template-columns: 120px 1fr 34px; gap: 12px; align-items: center; font-size: 14px; padding: 6px 0; }
.snap-row .track { height: 6px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.snap-row .fill { height: 100%; background: var(--mug); border-radius: 6px; }
.snap-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.rec-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.rec-line.on::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--alert); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.legal-card { max-width: 560px; margin: 0 auto; padding: 40px var(--gutter) 80px; display: grid; gap: 16px; }
.legal-card h1, .legal-card h2 { margin-top: 6px; }
.legal-card ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-card .row .btn { min-width: 0; }
.ack { display: flex; gap: 12px; align-items: flex-start; }
.ack input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cocoa); }

@media (max-width: 900px) {
  .hero-grid, .cols.c3, .cols.c2, .cols.c4 { grid-template-columns: 1fr; }
  .quote-row { grid-template-columns: 1fr; gap: 10px; }
  .flow { grid-template-columns: 1fr; }
  .flow > div { padding-bottom: 14px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(2n) { border-right: 0; }
  .plan { border-bottom: 1px solid var(--line); }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .site-nav .wrap { height: 60px; flex-wrap: wrap; }
  .site-nav nav, .site-nav .actions { display: none; width: 100%; }
  .site-nav.open .wrap { height: auto; padding-bottom: 14px; }
  .site-nav.open nav { display: grid; gap: 2px; order: 3; padding-top: 6px; }
  .site-nav.open nav a { padding: 12px 8px; font-size: 16px; }
  .site-nav.open .actions { display: flex; order: 4; gap: 10px; padding-top: 6px; }
  .compare { font-size: 14px; }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-right: 0; }
  .snap-row { grid-template-columns: 96px 1fr 30px; }
  .compare thead { display: none; }
  .compare tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .compare td { display: block; border: 0; padding: 2px 0; width: 100% !important; }
  .compare td:first-child { font-size: 16px; }
}

/* ---- live speaking feedback ---- */
.live mark.filler { background: rgba(196, 51, 26, .13); color: var(--alert); border-radius: 3px; padding: 0 2px; }
.live-stats { min-height: 22px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.live-stats.warn { color: var(--alert); }
.stage .live-stats { color: rgba(255,255,255,.7); }
.stage .live-stats.warn { color: #E19E4E; }

/* ---- pronunciation read-along ---- */
.readalong { font: 500 clamp(22px, 3.4vw, 30px)/1.5 var(--serif); letter-spacing: -.005em; max-width: 36ch; }
.readalong .rw { transition: color .15s ease, background-color .15s ease; color: var(--faint); border-radius: 4px; padding: 0 1px; }
.readalong .rw.said { color: var(--ink); }
.readalong .rw.skipped, .readalong .rw.missed { color: var(--alert); text-decoration: none; font-weight: 700; }
.readalong.scored .rw { color: var(--ink); }
.readalong.scored .rw.good { background: rgba(31, 122, 84, .12); }
.readalong.scored .rw.ok { background: rgba(196, 140, 26, .16); }
.readalong.scored .rw.bad { background: rgba(196, 51, 26, .15); color: var(--alert); font-weight: 600; }
.readalong button.rw { border: 0; font: inherit; cursor: pointer; background-color: transparent; }
.readalong button.rw:focus-visible { outline: 2px solid var(--mug); outline-offset: 2px; }
.pron-best { font-size: 13px; color: var(--muted); margin-top: 10px; }
.why-line { font-size: 14px; color: var(--muted); margin-top: 10px; }
.challenge { font: 600 clamp(20px, 3vw, 26px)/1.35 var(--serif); margin: 6px 0 4px; }
@media (prefers-reduced-motion: reduce) { .readalong .rw { transition: none; } }

/* Dark mode (warm charcoal-brown, soft cream text). Light mode is untouched. Tokens are defined once here; the overrides below fix the few places that hard-code light colours. */
html[data-theme="dark"]{color-scheme:dark;--paper:#1F1814;--paper-2:#35291F;--paper-3:#473830;--ink:#EADFD2;--muted:#B5A596;--faint:#A89888;--line:#4A3A31;--cocoa:#D9A05B;--cocoa-hover:#E8B574;--cocoa-deep:#2B211C;--mug:#D9A05B;--sprinkle:#D8B48A;--good:#CDBB7A;--alert:#E9A58A;--white:#2B211C;--cream:#35291F;--caramel:#D9A05B;--bg:var(--paper);--surface:var(--white);--surface-2:var(--paper-2);--surface-3:var(--paper-3);--border:var(--line);--text:var(--ink);--text-muted:var(--muted);--text-faint:var(--faint);--accent:var(--cocoa);--accent-strong:var(--cocoa-hover);--accent-ink:#2A1D14;--teal:var(--good)}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .tabbar{background:rgba(31,24,20,.95)}html[data-theme="dark"] .side{background:#1F1814}html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn-primary{color:#2A1D14;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(0,0,0,.3)}
.topbar{display:flex}.topbar-tools{display:flex;align-items:center;gap:6px}.topbar-tools .iconbtn{width:38px;height:38px;border:0;background:transparent;color:var(--cocoa)}.topbar-tools .iconbtn:hover{background:var(--paper-2)}.topbar-tools svg{width:18px;height:18px}.theme-icon.sun{display:none}html[data-theme="dark"] .theme-icon.moon{display:none}html[data-theme="dark"] .theme-icon.sun{display:block}
.practice-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.practice-card{position:relative;display:flex;flex-direction:column;min-height:178px;padding:22px;text-align:left;border:1px solid var(--line);border-radius:22px;background:var(--white);color:var(--ink);box-shadow:0 10px 30px rgba(97,54,39,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}.practice-card:hover{transform:translateY(-3px);border-color:var(--mug);box-shadow:0 16px 34px rgba(97,54,39,.12)}.practice-card .pc-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--paper-2);color:var(--cocoa);font-size:21px;margin-bottom:18px}.practice-card b{font:600 22px/1.18 var(--serif)}.practice-card small{color:var(--muted);margin-top:8px;max-width:34ch}.practice-card .pc-go{margin-top:auto;padding-top:18px;font-weight:700;color:var(--cocoa)}
.practice-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.practice-back{min-height:38px!important;padding:0 12px!important;background:var(--paper-2)!important;background-image:none!important;border-radius:999px!important}.topic-reveal{min-height:360px;display:grid;place-items:center;text-align:center;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,var(--white),var(--paper-2));overflow:hidden;position:relative}.topic-reveal-word{position:relative;z-index:1;font:600 clamp(30px,6vw,54px)/1.08 var(--serif);max-width:13em;animation:topicPop .45s cubic-bezier(.2,.8,.2,1)}.topic-reveal-meta{position:relative;z-index:1;margin-top:10px;color:var(--muted)}@keyframes topicPop{from{opacity:.2;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}@keyframes floatBlob{50%{transform:translate(10px,-8px) scale(1.06)}}.practice-countdown{min-height:360px;display:grid;place-items:center;text-align:center}.practice-countdown-number{font:700 clamp(96px,22vw,170px)/.8 var(--serif);color:var(--cocoa);animation:countPop .75s ease both}@keyframes countPop{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}
.leaderboard-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;margin:22px 0 18px}.podium-card{border:1px solid var(--line);background:var(--white);border-radius:20px;padding:18px 12px;text-align:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.podium-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(97,54,39,.12)}.podium-card.rank-1{min-height:188px;background:var(--paper-3)}.podium-card.rank-2,.podium-card.rank-3{min-height:160px;background:var(--paper-2)}.podium-medal{font-size:27px;line-height:1}.podium-rank{margin-top:7px;font:700 12px var(--sans);letter-spacing:.12em;color:var(--cocoa)}.podium-name{margin-top:8px;font:600 19px var(--serif);overflow-wrap:anywhere}.podium-score{margin-top:5px;font-weight:800}.podium-meta{color:var(--muted);font-size:12px;margin-top:5px}.rank-row{transition:background .18s ease,transform .18s ease;border-radius:12px;padding-left:10px;padding-right:10px}.rank-row:hover{background:var(--paper-2);transform:translateX(2px)}.rank-row.top-rank{background:var(--paper-2);border:1px solid var(--line);margin-bottom:8px}.rank-row.top-rank .n{color:var(--mug);font-weight:800}
.friend-result{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper-2)}.friend-result .friend-code{font:700 16px var(--sans);letter-spacing:.08em;color:var(--cocoa);margin-top:4px}.xp-hero{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--white),var(--paper-2));padding:24px;box-shadow:0 10px 28px rgba(97,54,39,.07)}.xp-hero .xp-number{font:700 52px/1 var(--serif);color:var(--cocoa)}.xp-hero .xp-target{margin-top:7px;color:var(--muted)}.xp-target strong{color:var(--cocoa)}.audio-stop{display:inline-grid!important;place-items:center;width:36px!important;min-height:36px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--paper-2)!important;color:var(--cocoa)!important;background-image:none!important}.audio-stop svg{width:15px;height:15px}.numbered-copy{white-space:pre-line}
@media(max-width:860px){.topbar{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;height:58px;padding:0 var(--gutter);background:rgba(242,237,235,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar-tools .iconbtn{width:36px;height:36px}.practice-hub{grid-template-columns:1fr;gap:10px}.practice-card{min-height:150px;padding:19px}.topic-reveal,.practice-countdown{min-height:300px}.seg{background:transparent!important;padding:0!important;gap:8px!important;flex-wrap:wrap}.seg button{border-radius:999px!important;background:var(--paper-2)!important;color:var(--cocoa)!important;padding:10px 14px!important;min-height:42px!important}.seg button.on{background:var(--cocoa)!important;color:#F5EADD!important;box-shadow:0 5px 14px rgba(97,54,39,.16)}.leaderboard-podium{grid-template-columns:1fr;align-items:stretch}.podium-card,.podium-card.rank-1,.podium-card.rank-2,.podium-card.rank-3{min-height:0}.podium-card.rank-1{order:-1}}
@media(min-width:861px){.topbar{display:flex;min-height:64px;padding:0 var(--gutter);align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper)}}

/* -------------------------------------------------------------------------
   Luwy typography polish: no decorative underlines.
   Links stay discoverable through weight + color, not decoration.
   ------------------------------------------------------------------------- */
a,
a:visited,
.btn,
.text-link,
button.text-button {
  text-decoration: none !important;
}
a {
  border-bottom: 0 !important;
}
.btn.ghost,
.btn.outline,
.btn.soft,
.btn.quiet,
button.text-button,
.text-link {
  background-image: none !important;
}
.hero h1 em {
  border-bottom: 0 !important;
  color: var(--mug);
  font-weight: 700;
}
.link-arrow {
  border-bottom: 0 !important;
  color: var(--mug);
  font-weight: 800;
}
.prose a:not(.btn),
.consent a,
.auth-note a {
  color: var(--cocoa);
  font-weight: 700;
}
.readalong .rw.skipped,
.readalong .rw.missed {
  text-decoration: none !important;
  font-weight: 700;
}

/* Keep interactive marketing controls reliably above decorative layers. */
.site-nav,
.site-nav a,
.site-nav button,
.hero .btn,
.hero .link-arrow,
.cta-row,
.preview {
  position: relative;
}
.site-nav a,
.site-nav button,
.hero .btn,
.hero .link-arrow {
  z-index: 2;
  pointer-events: auto;
}

/* Luwy visual language: warm cocoa, paper, caramel, cream, soft gold. */


.wc-list{display:grid;gap:10px;margin-top:10px}
.wc-row{display:grid;grid-template-columns:minmax(70px,.7fr) 22px 1.6fr;gap:8px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.wc-from{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(97,54,39,.35);padding-top:6px;overflow-wrap:anywhere}
.wc-arrow{color:var(--muted);padding-top:6px;text-align:center}
.wc-to{display:grid;gap:8px}
.wc-opt{display:grid;grid-template-columns:1fr 34px;align-items:center;column-gap:6px}
.wc-opt small{grid-column:1 / 3;color:var(--muted);font-size:12px;line-height:1.35;margin-top:-2px}
.wc-word{appearance:none;border:0;background:transparent;padding:6px 0;text-align:left;font:600 15px var(--sans);color:var(--cocoa);text-decoration:underline;text-decoration-color:var(--caramel,#E19E4E);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.wc-star{appearance:none;border:0;background:transparent;font-size:20px;line-height:1;color:var(--caramel,#E19E4E);cursor:pointer;min-height:34px;border-radius:50%}
.wc-star:hover{background:var(--paper)}
.item .notes{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:3px;font-weight:400}
.item-edit{display:grid;gap:8px;width:100%}

.ms-group{margin-top:18px}.ms-group h3{font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ms{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper-2);display:grid;gap:4px;align-content:start}
.ms b{font-weight:600;color:var(--cocoa)}.ms small{color:var(--muted);line-height:1.35}.ms em{font-style:normal;color:var(--muted);font-size:12px}
.ms.done{background:var(--cream,#F5EADD);border-color:var(--caramel,#E19E4E)}.ms:not(.done) b{color:var(--muted)}
.ms-bar{display:block;height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:4px}.ms-bar i{display:block;height:100%;background:var(--caramel,#E19E4E)}

.sim-tools{display:flex;gap:10px;align-items:center;margin-top:16px}.sim-tools .field{flex:1}
.seg button.locked{opacity:.55}
.text-button.nudge{color:var(--caramel,#E19E4E);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.why-line{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.45}

/* Hear buttons: one consistent icon size, and the small stop buttons only while audio is playing. */
.btn svg,.text-button svg{width:18px;height:18px;flex:none}
.audio-stop{display:none!important}
body.audio-on .audio-stop{display:inline-grid!important}

/* Display preferences from Settings (LuwyPrefs). Scales the whole app and dims or brightens it. */
html{filter:brightness(var(--ui-brightness,1))}
body{zoom:var(--ui-scale,1)}


/* ==========================================================================
   Workstream E: header, global stop, dark-mode fixes, Home tiles, Settings
   ========================================================================== */

/* Header icons: links and buttons share one size, one baseline and one hit area. */
.topbar-tools{display:flex;align-items:center;gap:2px}
.topbar-tools .iconbtn,a.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--cocoa);line-height:0;flex:none;vertical-align:middle;text-decoration:none;cursor:pointer;transition:background .15s ease,transform .15s ease}
.topbar-tools .iconbtn:hover,a.iconbtn:hover{background:var(--paper-2)}
.topbar-tools .iconbtn:active{transform:scale(.94)}
.topbar-tools .iconbtn svg,a.iconbtn svg{width:20px;height:20px;display:block;flex:none}
.topbar-tools .theme-icon.sun{display:none}html[data-theme="dark"] .topbar-tools .theme-icon.moon{display:none}html[data-theme="dark"] .topbar-tools .theme-icon.sun{display:block}
.topbar-tools .pill{margin-left:6px;white-space:nowrap}
@media(max-width:860px){.topbar-tools .iconbtn,a.iconbtn{width:42px;height:42px;min-width:42px}.topbar-tools .pill{margin-left:2px;font-size:10px;padding:6px 9px}}

/* The one global Stop audio control: an icon in the top bar, only while audio plays. It never covers page content. */
.topbar-tools .audio-top-stop{width:0;min-width:0;opacity:0;visibility:hidden;overflow:hidden;margin-right:-2px;background:var(--paper-2);color:var(--cocoa);transition:width .18s ease,min-width .18s ease,opacity .18s ease,visibility 0s linear .18s}
.topbar-tools .audio-top-stop svg{width:14px;height:14px}
body.audio-on .topbar-tools .audio-top-stop{width:40px;min-width:40px;opacity:1;visibility:visible;margin-right:4px;transition:width .18s ease,min-width .18s ease,opacity .18s ease,visibility 0s}
@media(max-width:860px){body.audio-on .topbar-tools .audio-top-stop{width:42px;min-width:42px}}

/* Sidebar plan note is a sentence, not an all-caps pill. */
.side-foot .who{align-items:flex-start;flex-direction:column;gap:6px}
.side-foot .who .pill{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;line-height:1.3;white-space:normal;border-radius:12px;padding:7px 10px}

/* Reduce motion (Settings toggle) */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body.reduce-motion .reveal{opacity:1;transform:none}

/* Dark mode: places that hard-code light colours */
html[data-theme="dark"] body{background:var(--paper)}
html[data-theme="dark"] .toast{background:#473830;color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4)}
html[data-theme="dark"] .skip{color:#2A1D14}
html[data-theme="dark"] .seg button.on{background:var(--cocoa)!important;color:#2A1D14!important}
html[data-theme="dark"] .seg button{color:var(--muted)}
html[data-theme="dark"] .chip-delta.up{background:rgba(205,187,122,.16);color:var(--good)}
html[data-theme="dark"] .chip-delta.down{background:rgba(233,165,138,.16);color:var(--alert)}
html[data-theme="dark"] .tl-row.turning{background:linear-gradient(90deg,rgba(217,160,91,.16),transparent 70%)}
html[data-theme="dark"] .stage,html[data-theme="dark"] .preview{background:#2B211C;border:1px solid var(--line);box-shadow:none}
html[data-theme="dark"] .stage h1,html[data-theme="dark"] .stage h2,html[data-theme="dark"] .stage h3,html[data-theme="dark"] .stage-head .who b,html[data-theme="dark"] .controls .status-line b,html[data-theme="dark"] .meter .val{color:var(--ink)}
html[data-theme="dark"] .type-row textarea{color:var(--ink);background:#1F1814;border-color:#5B493E}
html[data-theme="dark"] .field,html[data-theme="dark"] .select,html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=email],html[data-theme="dark"] input[type=password],html[data-theme="dark"] input[type=number],html[data-theme="dark"] input[type=date],html[data-theme="dark"] textarea{background:#1A1411;border-color:#5B493E;color:var(--ink)}
html[data-theme="dark"] select.select,html[data-theme="dark"] select.field{background-color:#1A1411;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D9A05B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
html[data-theme="dark"] option{background:#2B211C;color:var(--ink)}
html[data-theme="dark"] ::placeholder{color:#8F8073;opacity:1}
html[data-theme="dark"] .field:focus,html[data-theme="dark"] input:focus,html[data-theme="dark"] textarea:focus{border-color:var(--cocoa);box-shadow:0 0 0 3px rgba(217,160,91,.28)}
html[data-theme="dark"] .practice-card,html[data-theme="dark"] .xp-hero,html[data-theme="dark"] .podium-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.28)}
html[data-theme="dark"] .practice-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.4)}
html[data-theme="dark"] .live mark.filler{background:rgba(233,165,138,.16)}
html[data-theme="dark"] .readalong.scored .rw.good{background:rgba(160,200,140,.16)}
html[data-theme="dark"] .readalong.scored .rw.ok{background:rgba(217,160,91,.18)}
html[data-theme="dark"] .readalong.scored .rw.bad{background:rgba(233,165,138,.18)}
html[data-theme="dark"] .wc-from{text-decoration-color:rgba(234,223,210,.3)}
html[data-theme="dark"] .ms.done{background:#35291F}
html[data-theme="dark"] .rec-dot{background:var(--alert)}
html[data-theme="dark"] ::selection{background:#6A4E34;color:#F5EADD}
html[data-theme="dark"] .mic{box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ---- Home: a tile grid that shows every feature at once ---- */
.page.page-home{max-width:1080px;padding-top:clamp(18px,2.6vw,32px);padding-bottom:calc(60px + var(--safe-b))}
.home-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center}
.home-hello{min-width:0}
.home-hello .eyebrow{display:block}
.home-hello h1{font-size:clamp(24px,3.1vw,34px);margin:6px 0 0}
.home-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.home-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:999px;background:var(--paper-2);color:var(--cocoa);font:700 13px/1 var(--sans);white-space:nowrap}
.home-chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.home-xp{display:grid;gap:5px;min-width:150px;flex:1;max-width:260px}
.home-xp .lbl2{display:flex;justify-content:space-between;font:600 12px/1 var(--sans);color:var(--muted)}
.home-xp .xp{height:7px}
.home-next{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;background:var(--cocoa);color:var(--paper);text-align:left;border:0;min-width:min(340px,100%);max-width:440px;box-shadow:0 10px 26px rgba(97,54,39,.22);transition:transform .16s ease,box-shadow .16s ease}
.home-next:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(97,54,39,.28)}
.home-next:active{transform:scale(.985)}
.home-next .nx-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(245,234,221,.16)}
.home-next .nx-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-next .nx-t{display:grid;gap:3px;min-width:0;flex:1}
.home-next .nx-k{font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.home-next .nx-b{font:600 18px/1.2 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-next .nx-s{font-size:12.5px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-next .nx-go{font-size:20px;font-weight:700;flex:none}
html[data-theme="dark"] .home-next{color:#2A1D14;box-shadow:0 10px 26px rgba(0,0,0,.35)}
html[data-theme="dark"] .home-next .nx-ico{background:rgba(42,29,20,.14)}
.home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:clamp(112px,17vh,136px);padding:14px 14px 13px;border-radius:20px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);background:var(--white);color:var(--ink);text-align:left;box-shadow:0 6px 18px rgba(97,54,39,.06);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,border-color .16s ease,background .16s ease;overflow:hidden}
.tile:hover{transform:translateY(-3px);border-color:var(--mug);box-shadow:0 14px 28px rgba(97,54,39,.13)}
.tile:active{transform:scale(.97);box-shadow:0 3px 8px rgba(97,54,39,.1)}
.tile .ti-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);color:var(--cocoa);margin-bottom:8px;transition:background .16s ease,transform .16s ease}
.tile:hover .ti-ico{background:var(--cream,#F5EADD);transform:rotate(-4deg) scale(1.05)}
.tile .ti-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{font:600 17px/1.15 var(--serif);letter-spacing:-.005em}
.tile small{font-size:12.5px;line-height:1.3;color:var(--muted)}
.tile .ti-chip{position:absolute;top:12px;right:12px;padding:5px 9px;border-radius:999px;background:var(--paper-2);color:var(--cocoa);font:700 10.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.tile .ti-chip.hot{background:var(--cocoa);color:var(--paper)}
html[data-theme="dark"] .tile .ti-chip.hot{color:#2A1D14}
html[data-theme="dark"] .tile{box-shadow:0 6px 18px rgba(0,0,0,.25)}
html[data-theme="dark"] .tile:hover{box-shadow:0 14px 28px rgba(0,0,0,.4)}
.tile.is-next{border-color:var(--mug)}
@media(max-width:1000px){.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){
  .page.page-home{padding-top:14px}
  .home-top{grid-template-columns:1fr}
  .home-next{max-width:none;min-width:0;width:100%;padding:12px 14px}
  .home-hello h1{font-size:24px}
  .home-stats{margin-top:10px}
}
@media(max-width:640px){
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px;margin-top:18px}
  .tile{min-height:68px;flex-direction:row;align-items:center;flex-wrap:nowrap;column-gap:10px;padding:10px;border-radius:16px;overflow:visible}
  .tile .ti-ico{width:34px;height:34px;margin:0;border-radius:11px}
  .tile .ti-ico svg{width:19px;height:19px}
  .tile .ti-txt{display:grid;gap:1px;min-width:0;flex:1}
  .tile b{font-size:15px}
  .tile small{font-size:11.5px;line-height:1.25}
  .tile .ti-ico{flex:none}
  .tile .ti-chip{top:-8px;right:10px;padding:3px 7px;font-size:9px;box-shadow:0 0 0 2px var(--paper)}
}
.tile .ti-txt{display:grid;gap:3px;min-width:0}
@media(min-width:641px){.tile .ti-txt{display:contents}}

/* ---- Settings ---- */
.st-group{margin-top:30px}
.st-group>h2{font-size:22px;margin-bottom:12px}
.st-card{border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:18px;background:var(--white);padding:4px 18px}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 0}
.st-row+.st-row{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.st-row .st-t{display:grid;gap:3px;min-width:0}
.st-row .st-t b{font:600 15.5px/1.3 var(--sans);color:var(--ink)}
.st-row .st-t small{font-size:13px;line-height:1.4;color:var(--muted)}
.st-row.st-stack{grid-template-columns:1fr}
.st-row .seg{justify-self:end}
.st-row.st-stack .seg{justify-self:start}
.st-range{display:flex;align-items:center;gap:12px;min-width:min(260px,100%)}
.st-range input[type=range]{flex:1;accent-color:var(--cocoa);height:28px;min-width:120px;background:transparent;border:0;padding:0}
.st-range output{min-width:44px;text-align:right;font:700 13px var(--sans);font-variant-numeric:tabular-nums;color:var(--cocoa)}
.st-row.st-stack .st-range{width:100%}
.tgl{position:relative;display:inline-block;width:46px;height:28px;flex:none}
.tgl input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tgl i{position:absolute;inset:0;border-radius:99px;background:color-mix(in srgb,var(--line) 75%,var(--paper));transition:background .18s ease}
.tgl i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.tgl input:checked+i{background:var(--cocoa)}
.tgl input:checked+i::after{transform:translateX(18px);background:var(--white)}
.tgl input:focus-visible+i{outline:3px solid rgba(225,158,78,.75);outline-offset:2px}
html[data-theme="dark"] .tgl i{background:#473830}
html[data-theme="dark"] .tgl input:checked+i::after{background:#2A1D14}
.st-preview{margin-top:2px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid color-mix(in srgb,var(--line) 50%,transparent);font-size:14px;color:var(--ink)}
.st-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media(max-width:640px){.st-row{grid-template-columns:1fr}.st-row .seg{justify-self:start}.st-row .tgl{justify-self:start}}

.item .btn,.st-row .btn{white-space:nowrap}