:root{
  /* HSK colours supplement explicit level labels. Never use hue alone to
     communicate level or state. Text/tint contrast is checked in the mobile palette. */
  --paper:#FBF7EF;
  --paper-alt:#F3ECDC;
  --paper-raised:#FFFDF9;
  --ink:#2A241C;
  --ink-soft:#6B6154;
  --ink-faint:#746957;
  --rule:#E3D9C6;
  --cinnabar:#BA2328;
  --cinnabar-tint:#F5DCDA;
  --cinnabar-ink:#BA2328;
  --jade:#17997E;
  --jade-tint:#DCEEE7;
  --jade-ink:#116D5B;
  --indigo:#33507A;
  --indigo-tint:#DCE3EE;
  --amber:#A88311;
  --amber-tint:#F2EBD6;
  --amber-ink:#755B09;
  --plum:#853A85;
  --plum-tint:#EDE0E8;
  --plum-ink:#853A85;
  --teal:#5783CA;
  --teal-tint:#E6EBF2;
  --teal-ink:#355E99;
  --bronze:#805729;
  --bronze-ink:#805729;
  --bronze-tint:#F2E4D2;
  --shadow: 0 1px 2px rgba(42,36,28,.06), 0 6px 20px -8px rgba(42,36,28,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181410;
    --paper-alt:#211B14;
    --paper-raised:#241E17;
    --ink:#EEE4D4;
    --ink-soft:#B0A28B;
    --ink-faint:#B0A28B;
    --rule:#38301F;
    --cinnabar:#D43733;
    --cinnabar-tint:#3E1B17;
  --cinnabar-ink:#F28B82;
    --jade:#6DCEAF;
    --jade-tint:#1C3223;
  --jade-ink:#6DCEAF;
    --indigo:#8BA3C7;
    --indigo-tint:#212B3B;
    --amber:#E4BA65;
    --amber-tint:#3B2A10;
  --amber-ink:#E4BA65;
    --plum:#9F62A3;
    --plum-tint:#33242D;
  --plum-ink:#D6A2DC;
    --teal:#91B9F6;
    --teal-tint:#242C3C;
  --teal-ink:#91B9F6;
    --bronze:#E4B580;
  --bronze-ink:#E4B580;
  --bronze-tint:#382A1C;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -10px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#181410;
  --paper-alt:#211B14;
  --paper-raised:#241E17;
  --ink:#EEE4D4;
  --ink-soft:#B0A28B;
  --ink-faint:#B0A28B;
  --rule:#38301F;
  --cinnabar:#D43733;
  --cinnabar-tint:#3E1B17;
  --cinnabar-ink:#F28B82;
  --jade:#6DCEAF;
  --jade-tint:#1C3223;
  --jade-ink:#6DCEAF;
  --indigo:#8BA3C7;
  --indigo-tint:#212B3B;
  --amber:#E4BA65;
  --amber-tint:#3B2A10;
  --amber-ink:#E4BA65;
  --plum:#9F62A3;
  --plum-tint:#33242D;
  --plum-ink:#D6A2DC;
  --teal:#91B9F6;
  --teal-tint:#242C3C;
  --teal-ink:#91B9F6;
  --bronze:#E4B580;
  --bronze-ink:#E4B580;
  --bronze-tint:#382A1C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -10px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}
.hanzi{ font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.display{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; }
.mono{ font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums; }

:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; border-radius:3px; }

.eyebrow{
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

/* ---------- shell ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1.25rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar .wordmark{
  display:flex; align-items:baseline; gap:.5rem;
  text-decoration:none; color:var(--ink); cursor:pointer; background:none; border:none; padding:0;
}
.topbar .wordmark .hz{ font-size:1.35rem; font-weight:700; }
.topbar .wordmark .py{ font-size:.72rem; color:var(--ink-soft); font-style:italic; }
.topbar .crumb{
  display:flex; align-items:center; gap:.4rem; min-width:0;
  font-size:.82rem; color:var(--ink-soft);
  margin-left:.25rem; padding-left:.9rem; border-left:1px solid var(--rule);
}
.topbar .crumb b{ color:var(--ink); font-weight:600; }
.dlg-select{
  font-family:inherit; font-size:.82rem; font-weight:600; color:var(--ink);
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:6px;
  padding:.2rem .4rem; max-width:11rem; min-width:0;
}
.dlg-select:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; }
.back-btn{
  flex:none;
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px solid var(--rule); border-radius:999px;
  padding:.35rem .8rem .35rem .6rem;
  color:var(--ink); font-size:.8rem; font-weight:600;
  cursor:pointer;
}
.back-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.acct-btn{
  flex:none; display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px solid var(--rule); border-radius:999px;
  padding:.35rem .8rem; color:var(--ink-soft); font-size:.78rem; font-weight:600;
  cursor:pointer;
}
.acct-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.acct-btn.is-user{ color:var(--indigo); border-color:var(--indigo-tint); background:var(--indigo-tint); }

main{ max-width:760px; margin:0 auto; padding:2rem 1.25rem 5rem; }

@media (prefers-reduced-motion: no-preference){
  .screen-enter{ animation:riseIn .32s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- home ---------- */
.hero{ padding:1.5rem 0 2.25rem; text-align:center; }
.hero .hz{
  font-size:3.1rem; font-weight:700; letter-spacing:.03em;
  margin:.3rem 0 .25rem; text-wrap:balance;
}
.hero .py{ color:var(--cinnabar-ink); font-style:italic; font-size:1.05rem; margin:0 0 .9rem; }
.hero p.tag{ color:var(--ink-soft); max-width:32rem; margin:0 auto; font-size:.95rem; }

.level-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.level-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:1.35rem 1.25rem; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.level-card:hover{ transform:translateY(-2px); }
.level-card .lvl-num{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.72rem;
  letter-spacing:.08em; padding:.15rem .55rem; border-radius:999px;
  display:inline-block; margin-bottom:.8rem;
}
.level-card.c-cinnabar{ border-color:color-mix(in srgb, var(--cinnabar) 35%, var(--rule)); }
.level-card.c-cinnabar .lvl-num{ background:var(--cinnabar-tint); color:var(--cinnabar-ink); }
.level-card.c-cinnabar:hover{ border-color:var(--cinnabar); }
.level-card.c-jade{ border-color:color-mix(in srgb, var(--jade) 35%, var(--rule)); }
.level-card.c-jade .lvl-num{ background:var(--jade-tint); color:var(--jade-ink); }
.level-card.c-jade:hover{ border-color:var(--jade); }
.level-card.c-amber{ border-color:color-mix(in srgb, var(--amber) 35%, var(--rule)); }
.level-card.c-amber .lvl-num{ background:var(--amber-tint); color:var(--amber-ink); }
.level-card.c-amber:hover{ border-color:var(--amber); }
.level-card.c-plum{ border-color:color-mix(in srgb, var(--plum) 35%, var(--rule)); }
.level-card.c-plum .lvl-num{ background:var(--plum-tint); color:var(--plum-ink); }
.level-card.c-plum:hover{ border-color:var(--plum); }
.level-card.c-teal{ border-color:color-mix(in srgb, var(--teal) 35%, var(--rule)); }
.level-card.c-teal .lvl-num{ background:var(--teal-tint); color:var(--teal-ink); }
.level-card.c-teal:hover{ border-color:var(--teal); }
.level-card h2{ font-size:1.5rem; margin:0 0 .2rem; font-family:"Fraunces",Georgia,serif; }
.level-card .py{ font-size:.8rem; color:var(--ink-soft); font-style:italic; margin:0 0 .6rem; }
.level-card .meta{ font-size:.82rem; color:var(--ink-soft); }
.level-card .meta b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; font-weight:600; }

.level-card.locked{
  background:var(--paper-alt); cursor:default; box-shadow:none;
  opacity:.72;
}
.level-card.locked:hover{ transform:none; border-color:var(--rule); }
.level-card.locked .lvl-num{ background:transparent; border:1px solid var(--bronze); color:var(--bronze); }

.how-it-works{
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--rule);
}
.how-it-works h3{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1rem; }
.hiw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.hiw-card{ background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:1rem; }
.hiw-card .n{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--indigo); font-weight:600; }
.hiw-card h4{ margin:.4rem 0 .25rem; font-size:.92rem; }
.hiw-card p{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- theme grid (level screen) ---------- */
.level-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.75rem; }
.level-head .badge-lg{
  flex:none; width:3rem; height:3rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1rem;
}
.level-head h1{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.6rem; }
.level-head p{ margin:.15rem 0 0; color:var(--ink-soft); font-size:.85rem; }

.theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.theme-card{
  display:flex; flex-direction:column; gap:.5rem;
  text-align:left; text-decoration:none; color:var(--ink); cursor:pointer;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.theme-card:hover{ transform:translateY(-2px); border-color:var(--accent-c); }
.theme-card .top-row{ display:flex; align-items:center; gap:.5rem; }
.theme-card .num{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--accent-c); font-weight:600; }
.theme-card .tag{ margin-left:auto; font-size:.7rem; color:var(--ink-soft); }
.theme-card h3{ margin:0; font-size:1.2rem; font-family:"Noto Serif SC",serif; }
.theme-card .py{ font-size:.76rem; color:var(--ink-soft); font-style:italic; margin:0; }
.theme-card .meta{ font-size:.72rem; color:var(--ink-faint); }

.level-card.c-bronze{ border-color:color-mix(in srgb, var(--bronze) 35%, var(--rule)); }
.level-card.c-bronze .lvl-num{ background:var(--bronze-tint); color:var(--bronze-ink); }
.level-card.c-bronze:hover{ border-color:var(--bronze); }

/* ---------- account / profile page ---------- */
.acct-btn .av-sm{ width:1.45rem; height:1.45rem; font-size:.7rem; margin:-.15rem .1rem -.15rem -.45rem; }
.avatar{
  flex:none; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  background:var(--indigo-tint); color:var(--indigo); font-family:"Fraunces",Georgia,serif; font-weight:600;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.av-lg{ width:5.5rem; height:5.5rem; font-size:2.2rem; box-shadow:0 0 0 3px var(--paper-raised), 0 0 0 4px var(--rule); }
.profile-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow);
  padding:1.25rem; display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem;
}
.profile-id{ flex:1; min-width:12rem; }
.profile-id h1{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.55rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.profile-id .muted{ color:var(--ink-soft); font-size:.8rem; margin:.15rem 0 0; }
.av-actions{ display:flex; gap:.4rem; margin-top:.55rem; flex-wrap:wrap; }
.av-actions .link-btn{ font-size:.72rem; }
.name-edit{ display:flex; gap:.4rem; align-items:center; }
.name-edit input{ font:inherit; font-size:1rem; padding:.35rem .55rem; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); min-width:0; flex:1; }
.xp-level{ margin-top:.75rem; }
.xp-level .row{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-soft); margin-bottom:.3rem; }
.xp-level .row b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; }
.stage-done{ margin:.35rem 0 0; font-size:.7rem; color:var(--jade-ink); font-weight:600; }
.meter{ height:8px; border-radius:999px; background:var(--paper-alt); border:1px solid var(--rule); overflow:hidden; }
.meter > span{ display:block; height:100%; border-radius:999px; background:var(--indigo); }
.stat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1rem; }
.stat-tile{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.8rem .85rem; box-shadow:var(--shadow); }
.stat-tile .v{ font-family:"Fraunces",Georgia,serif; font-size:1.7rem; font-weight:600; line-height:1.1; display:flex; align-items:baseline; gap:.3rem; }
.stat-tile .v .u{ font-family:"Public Sans",sans-serif; font-size:.72rem; font-weight:600; color:var(--ink-soft); }
.stat-tile .l{ font-size:.72rem; color:var(--ink-soft); margin-top:.2rem; }
.stat-tile .flame{ font-family:"Noto Serif SC",serif; color:var(--cinnabar-ink); }
.stat-tile.off .flame{ color:var(--ink-faint); }
.acct-section{ margin-top:1.75rem; }
.acct-section > h2{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .75rem; font-weight:600; }
.acct-panel{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow); }
.goal-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.65rem; }
.goal-chip{ border:1px solid var(--rule); background:var(--paper); border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.goal-chip b{ font-family:"IBM Plex Mono",monospace; font-weight:600; }
.goal-chip.active{ background:var(--indigo); border-color:var(--indigo); color:var(--paper); }
.goal-today{ display:flex; align-items:center; gap:.8rem; }
.goal-today p{ margin:0; font-size:.85rem; }
.goal-today .muted{ color:var(--ink-soft); font-size:.75rem; }
/* activity calendar, sequential single hue (jade), light → dark */
.heat-wrap{ overflow-x:auto; padding-bottom:.25rem; }
.heat{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 13px); gap:3px; width:max-content; }
.heat .c{ width:13px; height:13px; border-radius:3px; background:var(--paper-alt); box-shadow:inset 0 0 0 1px var(--rule); position:relative; }
.heat .c.l1{ background:color-mix(in srgb, var(--jade) 28%, var(--paper-raised)); box-shadow:none; }
.heat .c.l2{ background:color-mix(in srgb, var(--jade) 52%, var(--paper-raised)); box-shadow:none; }
.heat .c.l3{ background:color-mix(in srgb, var(--jade) 76%, var(--paper-raised)); box-shadow:none; }
.heat .c.l4{ background:var(--jade); box-shadow:none; }
.heat .c.future{ visibility:hidden; }
.heat .c.today{ outline:2px solid var(--ink); outline-offset:1px; }
.heat-legend{ display:flex; align-items:center; gap:3px; justify-content:flex-end; font-size:.66rem; color:var(--ink-faint); margin-top:.5rem; }
.heat-legend .c{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.heat-months{ display:grid; grid-auto-flow:column; grid-auto-columns:16px; font-size:.62rem; color:var(--ink-faint); height:1rem; width:max-content; }
[data-tip]{ position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-size:.68rem; font-weight:600; white-space:nowrap;
  padding:.3rem .5rem; border-radius:6px; pointer-events:none; z-index:5;
}
/* last 7 days, single-series columns */
.week-cols{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; align-items:end; height:110px; position:relative; margin-top:.6rem; }
.week-cols .goal-line{ position:absolute; left:0; right:0; border-top:1px solid var(--ink-faint); pointer-events:none; }
.week-cols .goal-line span{ position:absolute; left:0; top:-1.1rem; background:var(--paper-raised); padding-right:.3rem; font-size:.62rem; color:var(--ink-faint); }
.week-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.2rem; }
.week-col .bar{ width:100%; max-width:24px; border-radius:4px 4px 0 0; background:var(--indigo); min-height:2px; }
.week-col .bar.zero{ background:var(--rule); }
.week-col .val{ font-size:.64rem; font-family:"IBM Plex Mono",monospace; color:var(--ink-soft); min-height:.9rem; }
.week-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; margin-top:.3rem; font-size:.64rem; color:var(--ink-faint); text-align:center; }
.week-days .t{ color:var(--ink); font-weight:700; }
/* per-HSK progress */
.lvl-rows{ display:flex; flex-direction:column; gap:.85rem; }
.lvl-row .top{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:.8rem; margin-bottom:.3rem; }
.lvl-row .top b{ font-family:"IBM Plex Mono",monospace; }
.lvl-row .top .muted{ color:var(--ink-soft); font-size:.72rem; }
.lvl-row .meter > span{ background:var(--jade); }
/* badges */
.medal{
  --m1:var(--paper-alt); --m2:var(--ink-faint);
  width:3.1rem; height:3.1rem; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:1.35rem; color:var(--paper);
  background:radial-gradient(circle at 35% 30%, var(--m1), var(--m2)); box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--paper) 45%, transparent);
}
.medal.t-none{ --m1:#8FA4C6; --m2:var(--indigo); }
.medal.t-bronze{ --m1:#D9A06B; --m2:#8C5A2B; }
.medal.t-silver{ --m1:#DDE2E7; --m2:#7A838D; color:#2B3036; }
.medal.t-gold{ --m1:#F3D774; --m2:#B8862B; }
.medal.locked{ --m1:var(--paper-alt); --m2:var(--rule); color:var(--ink-faint); box-shadow:inset 0 0 0 2px var(--rule); }
.badge-levels{ display:flex; flex-direction:column; gap:.7rem; }
.badge-level{ display:flex; align-items:center; gap:.75rem; }
.badge-level .name{ width:3rem; font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:600; color:var(--ink-soft); }
.badge-level .medals{ display:flex; gap:.6rem; }
.badge-level .medal{ width:2.6rem; height:2.6rem; font-size:1.1rem; cursor:pointer; border:none; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem,1fr)); gap:.6rem; }
.badge-card{
  display:flex; gap:.65rem; align-items:center; text-align:left; width:100%;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.65rem .7rem; box-shadow:var(--shadow);
  font:inherit; color:var(--ink); cursor:pointer;
}
.badge-card.locked{ box-shadow:none; background:var(--paper-alt); }
.badge-card .bt{ font-size:.78rem; font-weight:700; line-height:1.25; }
.badge-card .bd{ font-size:.66rem; color:var(--ink-soft); line-height:1.35; margin-top:.15rem; }
.badge-card .meter{ height:5px; margin-top:.35rem; }
.badge-card .meter > span{ background:var(--ink-faint); }
.badge-detail{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); min-height:1.2rem; }
.badge-detail b{ color:var(--ink); }
.invite{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.invite p{ margin:0; font-size:.82rem; flex:1; min-width:14rem; }
/* photo crop dialog */
.crop-card{ max-width:24rem; text-align:center; }
.crop-view{
  position:relative; margin:0 auto; overflow:hidden; border-radius:12px; background:#111;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.crop-view:active{ cursor:grabbing; }
.crop-view img{ position:absolute; top:0; left:0; max-width:none; transform-origin:0 0; pointer-events:none; }
.crop-ring{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.5); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px; pointer-events:none; }
.crop-zoom{ display:flex; align-items:center; gap:.6rem; margin:1rem auto 0; max-width:300px; color:var(--ink-soft); font-weight:700; }
.crop-zoom input{ flex:1; accent-color:var(--indigo); }
.crop-actions{ display:flex; gap:.6rem; justify-content:center; margin-top:1.1rem; }
.say-btn{ display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; margin-left:.35rem; vertical-align:middle;
  border:1px solid var(--rule); border-radius:50%; background:var(--paper); font-size:.85rem; line-height:1; cursor:pointer; padding:0; }
.say-btn:hover{ border-color:var(--indigo); }
.theme-group{ margin:0 0 1.6rem; }
.theme-menu .meta{ margin-top:.4rem; line-height:1.6; }
.fr-title{ margin:.15rem 0 0; font-size:.9rem; font-weight:600; color:var(--ink); }
.step-nav{ display:grid; gap:.6rem; margin-top:1.4rem; }
.step-btn .sub{ display:block; }
.step-btn.back{ text-align:left; }
.theme-head{ display:flex; align-items:baseline; gap:.6rem; margin:0 0 .7rem; font-family:"Fraunces",Georgia,serif; font-size:1.15rem; }
.theme-head::before{ content:""; width:4px; align-self:stretch; border-radius:2px; background:var(--accent-c); }
.theme-head span{ font-family:"Public Sans",sans-serif; font-size:.75rem; font-weight:600; color:var(--ink-soft); }
.why-expr{ margin:1rem 0 .4rem; padding:.85rem 1rem; border-radius:14px; background:color-mix(in srgb, var(--amber-ink) 9%, var(--paper-raised)); }
.why-expr .eyebrow{ margin:0 0 .35rem; color:var(--amber-ink); }
.why-expr-head{ margin:0 0 .35rem; }
.why-expr-head .hanzi{ font-size:1.15rem; font-weight:600; }
.why-expr .gx{ margin:0; }
.gram-btn{ font-family:inherit; font-size:.8rem; font-weight:700; color:var(--amber-ink); }
/* À deux: "je bute ici" → grammar overlay over the dialogue */
.why-btn{
  display:inline-flex; margin:.45rem 0 0 .5rem; background:none; border:1px dashed var(--ink-faint); border-radius:999px;
  padding:.3rem .75rem; font-size:.72rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.why-btn:hover{ border-color:var(--amber-ink); color:var(--amber-ink); border-style:solid; }
.modal-backdrop.why-backdrop{ align-items:flex-end; padding:0; }
@media (min-width:640px){ .modal-backdrop.why-backdrop{ align-items:center; padding:1.25rem; } }
.why-card{
  max-width:34rem; max-height:min(85vh, 44rem); overflow-y:auto; overscroll-behavior:contain;
  border-radius:18px 18px 0 0; padding:1.4rem 1.25rem 1.5rem; animation:why-up .18s ease-out;
}
@media (min-width:640px){ .why-card{ border-radius:18px; padding:1.6rem 1.6rem 1.6rem; } }
@keyframes why-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .why-card{ animation:none; } }
.why-card .modal-close{ width:2.25rem; height:2.25rem; font-size:1.05rem; border-radius:50%; top:.6rem; right:.6rem; }
.why-card .modal-close:hover{ background:var(--paper); }
.why-card .eyebrow{ margin:0 2.2rem .5rem 0; color:var(--accent-c); }
.why-sentence{ font-size:1.3rem; line-height:2.1; margin:0; }
.why-sentence ruby.hz rt{ visibility:visible; opacity:1; }
.why-sentence .hl{ background:color-mix(in srgb, var(--accent-c) 16%, transparent); border-radius:4px; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-c) 16%, transparent); }
.why-fr{ margin:.2rem 0 1rem; font-size:.88rem; color:var(--ink-soft); font-style:italic; }
.why-point{ border-top:1px solid var(--rule); padding-top:.9rem; }
.why-point h3{ margin:0; font-size:1rem; line-height:1.9; }
.why-point .gram-pattern{ margin:.6rem 0 .4rem; }
.why-point p.gx{ margin:.5rem 0 0; font-size:.88rem; line-height:1.95; }
.why-others{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.75rem; color:var(--ink-soft); }
.why-others button{
  background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:.3rem .7rem;
  font:inherit; font-size:.75rem; font-weight:600; color:var(--ink); cursor:pointer; line-height:1.9;
}
.why-others button:hover{ border-color:var(--accent-c); }
.why-more{ display:inline-block; margin-top:.9rem; font-size:.78rem; font-weight:600; color:var(--accent-c); }
/* pre-rendered pages (static HTML for search engines / AI / no-JS); the app
   replaces #app-main as soon as it boots */
.sp{ line-height:1.65; }
.sp h1{ font-family:"Fraunces",Georgia,serif; font-size:1.7rem; line-height:1.25; margin:1rem 0 .6rem; }
.sp h2{ font-size:1.1rem; margin:1.8rem 0 .6rem; }
.sp h3{ font-size:.95rem; margin:1.2rem 0 .4rem; }
.sp a{ color:var(--indigo); }
.sp-lead{ color:var(--ink-soft); }
.sp-crumb{ font-size:.8rem; color:var(--ink-soft); }
.sp-line{ display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--rule); }
.sp-spk{ font-weight:700; width:1.4rem; flex:none; color:var(--ink-soft); }
.sp-zh{ font-family:"Noto Serif SC",serif; font-size:1.2rem; margin:0; line-height:2; }
.sp-py{ margin:0; font-size:.85rem; color:var(--ink-soft); font-style:italic; }
.sp-fr{ margin:.1rem 0 0; font-size:.88rem; }
.sp ruby rt{ font-size:.5em; color:var(--ink-soft); }
.sp-vocab{ border-collapse:collapse; width:100%; font-size:.85rem; }
.sp-vocab th, .sp-vocab td{ text-align:left; padding:.3rem .5rem; border-bottom:1px solid var(--rule); }
.sp-slot{ display:inline-block; padding:.1rem .45rem; margin:.1rem; border:1px solid var(--rule); border-radius:6px; background:var(--paper-alt); }
.sp-examples{ padding-left:1.1rem; }
.sp-nav{ display:flex; gap:.7rem; margin-left:auto; font-size:.8rem; font-weight:600; }
.sp-nav a, .topbar a.wordmark{ color:var(--ink); text-decoration:none; }
.sp-footer a{ color:inherit; }

/* toasts */
#toast-root{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; align-items:center; z-index:60; pointer-events:none; width:max-content; max-width:calc(100vw - 2rem); }
.toast{
  display:flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); border-radius:999px;
  padding:.45rem 1rem .45rem .5rem; font-size:.82rem; font-weight:600; box-shadow:var(--shadow);
  animation:toastIn .25s ease both;
}
.toast .medal{ width:1.9rem; height:1.9rem; font-size:.85rem; }
.toast.xp{ padding:.45rem 1rem; background:var(--indigo); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){
  .stat-tiles{ grid-template-columns:1fr 1fr; }
}

/* ---------- level tabs + grammar ---------- */
.level-tabs{ margin-bottom:1.25rem; }
.mode-tabs.level-tabs button{ flex-direction:row; justify-content:center; gap:.4rem; font-size:.85rem; }
.level-tabs .count{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; opacity:.75; }
.gram-intro{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1.25rem; }
.gram-intro p{ margin:0; font-size:.85rem; color:var(--ink-soft); max-width:30rem; }
.gram-cat{ margin:1.75rem 0 .7rem; }
.gram-list{ display:flex; flex-direction:column; gap:.6rem; }
.gram-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.gram-card[open]{ border-color:color-mix(in srgb, var(--accent-c) 45%, var(--rule)); }
.gram-card summary{
  list-style:none; cursor:pointer; padding:.85rem 1.05rem;
  display:flex; align-items:baseline; gap:.6rem;
}
.gram-card summary::-webkit-details-marker{ display:none; }
.gram-card summary .gt{ font-weight:600; font-size:.95rem; flex:1; }
.gram-card summary .chev{ color:var(--ink-faint); font-size:.75rem; transition:transform .15s ease; flex:none; }
.gram-card[open] summary .chev{ transform:rotate(180deg); }
.gram-body{ padding:0 1.05rem 1.05rem; border-top:1px dashed var(--rule); }
.gram-pattern{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.9rem 0 .8rem; align-items:center; }
.gram-pattern .slot{
  font-size:.75rem; padding:.25rem .6rem; border-radius:6px;
  background:var(--paper-alt); border:1px solid var(--rule); color:var(--ink-soft); font-style:italic;
}
.gram-pattern .slot.zh{
  font-style:normal; font-weight:700; font-size:1rem; color:var(--accent-c);
  background:color-mix(in srgb, var(--accent-c) 12%, var(--paper-raised));
  border-color:color-mix(in srgb, var(--accent-c) 35%, var(--rule));
}
.gram-body p.gx{ margin:.55rem 0 0; font-size:.88rem; line-height:1.65; }
.gram-tips{ margin:.8rem 0 0; padding:.6rem .8rem .6rem 1.8rem; background:var(--amber-tint); border-radius:8px; font-size:.8rem; line-height:1.55; }
.gram-tips li + li{ margin-top:.3rem; }
.gram-examples{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.gram-ex{ background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:.55rem .8rem; }
.gram-ex .turn-cn{ font-size:1.12rem; line-height:2; }
.gram-ex .hl{ background:color-mix(in srgb, var(--accent-c) 16%, transparent); border-radius:4px; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-c) 16%, transparent); }
.gram-ex .hl ruby.hz rb{ border-bottom-color:var(--accent-c); }
.gram-ex-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-top:.2rem; }
.gram-ex-meta .fr{ font-size:.76rem; color:var(--ink-soft); }
.gram-ex-meta .src{ background:none; border:none; padding:0; font-size:.7rem; color:var(--indigo); cursor:pointer; text-decoration:underline; font-weight:600; }
.show-py ruby.hz rt{ visibility:visible; opacity:1; }
ruby.gpy{ ruby-align:center; }
ruby.gpy rt{ font-family:"Public Sans",sans-serif; font-style:italic; font-size:.5em; font-weight:600; color:var(--ink-soft); user-select:none; }
#gram-root:not(.show-py) ruby.gpy rt{ display:none; }
.gram-body p.gx, .gram-tips{ line-height:1.95; }
.gram-pattern .slot.zh{ padding-top:.7rem; }
.gram-card summary .gt{ line-height:2; }
.gram-pattern .slot.zh ruby.gpy rt{ color:var(--accent-c); opacity:.85; }
.hanzi-inline{ font-family:"Noto Serif SC","Songti SC",serif; }

/* ---------- dialogue screen ---------- */
.dlg-head{ margin-bottom:1.35rem; }
.dlg-head .top-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.dlg-head .badge-lg{
  flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:.92rem;
}
.dlg-head h1{ margin:0; font-family:"Noto Serif SC",serif; font-size:1.7rem; }
.dlg-head .py{ margin:.1rem 0 0; color:var(--ink-soft); font-style:italic; font-size:.85rem; }
.dlg-head .pill{
  margin-left:auto; flex:none;
  font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--accent-c); color:var(--accent-c); border-radius:999px; padding:.2rem .6rem;
}

.mode-tabs{
  display:flex; gap:.35rem; background:var(--paper-alt); border:1px solid var(--rule);
  border-radius:11px; padding:.3rem; margin-bottom:1.5rem;
}
.mode-tabs button{
  flex:1; border:none; background:none; border-radius:8px; cursor:pointer;
  padding:.55rem .5rem; font-size:.82rem; font-weight:600; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  transition:background .15s ease, color .15s ease;
}
.mode-tabs button .sub{ font-weight:400; font-size:.66rem; opacity:.8; }
.mode-tabs button.active{ background:var(--indigo); color:var(--paper); box-shadow:var(--shadow); }
.mode-tabs button:not(.active):hover{ color:var(--ink); }

/* chat bubbles (lecture + duo) */
.bubbles{ display:flex; flex-direction:column; gap:.9rem; }
.bubble-row{ display:flex; gap:.6rem; align-items:flex-end; }
.bubble-row.side-a{ justify-content:flex-start; }
.bubble-row.side-b{ justify-content:flex-end; flex-direction:row-reverse; }
.spk-badge{
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:var(--paper);
}
.spk-badge.a{ background:var(--cinnabar-ink); }
.spk-badge.b{ background:var(--jade-ink); }
.bubble{
  max-width:78%; border-radius:16px; padding:.7rem .95rem;
  background:var(--paper-raised); border:1px solid var(--rule);
  box-shadow:var(--shadow);
}
.bubble-row.side-a .bubble{ border-bottom-left-radius:4px; }
.bubble-row.side-b .bubble{ border-bottom-right-radius:4px; }
.bubble.spk-a{ background:var(--cinnabar-tint); border-color:color-mix(in srgb, var(--cinnabar) 30%, var(--rule)); }
.bubble.spk-b{ background:var(--jade-tint); border-color:color-mix(in srgb, var(--jade) 30%, var(--rule)); }
.turn-cn{
  font-family:"Noto Serif SC",serif; font-size:1.28rem; line-height:2.1; margin:0;
}
ruby.hz{ cursor:pointer; -webkit-tap-highlight-color:transparent; ruby-align:center; }
ruby.hz rb{ border-bottom:1.5px dotted var(--ink-faint); padding-bottom:1px; }
ruby.hz:hover rb, ruby.hz:focus-visible rb{ border-bottom-color:var(--ink); }
ruby.hz rt{
  font-family:"Public Sans",sans-serif; font-style:italic; font-size:.44em; font-weight:600;
  color:var(--ink-soft); visibility:hidden; opacity:0; transition:opacity .12s ease; user-select:none;
}
ruby.hz.revealed rt{ visibility:visible; opacity:1; }

/* masked (duo own-role) */
.mask-wrap{ display:inline-flex; flex-wrap:wrap; gap:.18rem; align-items:baseline; vertical-align:baseline; }
.blank-tile{
  display:inline-block; width:1.05em; height:1.15em; border-radius:3px;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-faint) 35%, transparent) 0 4px, transparent 4px 8px);
  border:1px solid var(--ink-faint); opacity:.55; vertical-align:-.15em;
}
.mask-punct{ font-family:"Noto Serif SC",serif; font-size:1.28rem; color:var(--ink-faint); }
.reveal-btn{
  margin-top:.5rem; display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px dashed var(--ink-faint); border-radius:999px;
  padding:.3rem .75rem; font-size:.72rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.reveal-btn:hover{ border-color:var(--indigo); color:var(--indigo); border-style:solid; }
.bubble.revealed .reveal-btn{ display:none; }
.bubble:not(.revealed) .turn-cn-real{ display:none; }
.bubble.revealed .mask-wrap{ display:none; }

.role-switch{
  display:flex; align-items:center; gap:.75rem; justify-content:center;
  margin-bottom:1.25rem; font-size:.85rem; color:var(--ink-soft);
}
.role-switch .opts{ display:flex; gap:.4rem; }
.role-switch button{
  border:1px solid var(--rule); background:var(--paper-raised); border-radius:999px;
  padding:.35rem 1rem; font-size:.82rem; font-weight:700; cursor:pointer; color:var(--ink-soft);
}
.role-switch button.sel-a.active{ background:var(--cinnabar-ink); border-color:var(--cinnabar-ink); color:var(--paper); }
.role-switch button.sel-b.active{ background:var(--jade-ink); border-color:var(--jade-ink); color:var(--paper); }

/* result / error blocks (numbers, writing, review) */
.solo-log{ margin-bottom:1.25rem; }
.bubble.user-answer{ display:flex; flex-direction:column; gap:.35rem; }
.user-answer .user-text{ font-size:1.15rem; }
.verdict{ margin:.1rem 0 0; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.verdict.ok{ color:var(--jade-ink); }
.verdict.warn{ color:var(--bronze); }
.feedback-text{ margin:0; font-size:.78rem; color:var(--ink-soft); font-family:"Public Sans",sans-serif; line-height:1.5; }
.orig-toggle{
  align-self:flex-start; margin-top:.15rem; background:none; border:none; padding:0;
  font-size:.72rem; color:var(--indigo); text-decoration:underline; cursor:pointer; font-weight:600;
}
.example-line{ font-size:1.05rem; color:var(--ink-soft); opacity:.9; margin-top:.15rem !important; }
.solo-input-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:1rem 1.1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.65rem;
}
.solo-input-card textarea{
  width:100%; resize:vertical; min-height:3.4rem;
  font-family:"Noto Serif SC",serif; font-size:1.1rem; line-height:1.6;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:10px;
  padding:.6rem .75rem;
}
.solo-input-actions{ display:flex; justify-content:flex-end; align-items:center; gap:.6rem; }
.mic-btn{
  border:1px solid var(--rule); background:none; border-radius:999px; padding:.5rem 1rem;
  font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.mic-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.mic-btn.recording{ border-color:var(--cinnabar); color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.solo-error{ margin:0; font-size:.78rem; color:var(--cinnabar-ink); }
.solo-error-actions{ display:flex; gap:.6rem; }
.link-btn{ background:none; border:none; padding:0; font-size:.75rem; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.solo-complete{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1.5rem 0 .5rem; }
.solo-score{ font-family:"IBM Plex Mono",monospace; font-size:1.15rem; font-weight:600; margin:0; }

/* completion + progress */
.complete-row{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--rule); text-align:center; }
.btn.ghost.done{ border-color:var(--jade); color:var(--jade-ink); cursor:default; }
.complete-hint{ margin:.5rem 0 0; font-size:.72rem; color:var(--ink-faint); }
.level-progress{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:12px;
  padding:.85rem 1.1rem; margin-bottom:1.5rem;
}
.level-progress .meta{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.level-progress .meta b{ color:var(--ink); font-family:"IBM Plex Mono",monospace; }
.done-check{ color:var(--jade-ink); font-weight:700; font-size:.75rem; }

/* review flashcards */
.review-card{
  width:100%; max-width:26rem; background:var(--paper-raised); border:1px solid var(--rule);
  border-radius:18px; padding:1.75rem 1.5rem; text-align:center; box-shadow:var(--shadow);
  min-height:9rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
}
.review-card.revealed{ justify-content:flex-start; }
.review-word{ font-size:4.5rem; line-height:1.3; text-align:center; overflow-wrap:anywhere; margin:0; color:var(--accent-c, var(--ink)); }
.review-back{ width:100%; margin-top:.75rem; padding-top:.9rem; border-top:1px dashed var(--rule); }
.review-pinyin{ font-style:italic; color:var(--ink-soft); font-size:1rem; margin:0; }
.review-gloss{ font-size:1.05rem; color:var(--ink); margin:.4rem 0 0; }
.review-examples{ margin-top:1rem; text-align:left; display:flex; flex-direction:column; gap:.75rem; }
.review-example{
  background:var(--paper-alt); border:1px solid var(--rule); border-radius:10px; padding:.6rem .8rem;
}
.example-cn{ font-size:1.05rem; margin:0; line-height:1.7; color:var(--ink); }
.example-cn ruby.hz rb{ border-bottom-color:color-mix(in srgb, var(--accent-c, var(--ink-faint)) 45%, transparent); }
.example-cn .vocab-lvl-run{ color:var(--accent-c); }
.example-fr{ font-size:.75rem; color:var(--ink-soft); margin:.3rem 0 0; }
.vocab-legend{
  display:flex; flex-wrap:wrap; gap:.15rem .7rem; margin-top:.85rem;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint);
}
.vocab-legend span{ display:inline-flex; align-items:center; gap:.3rem; }
.vocab-legend .dot{ width:.5rem; height:.5rem; border-radius:50%; display:inline-block; background:var(--accent-c); }

.review-screen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56vh; padding:1rem 0 2rem;
}

.grade-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; width:100%; max-width:26rem; }
.grade-btn{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  border:none; border-radius:12px; padding:.6rem .3rem; cursor:pointer;
  font-family:"Noto Serif SC",serif; font-size:1.05rem; font-weight:700; color:var(--paper);
}
.grade-sub{ font-family:"Public Sans",sans-serif; font-size:.62rem; font-weight:400; opacity:.85; }
.grade-btn.again{ background:var(--cinnabar-ink); }
.grade-btn.hard{ background:var(--bronze); }
.grade-btn.good{ background:var(--jade-ink); }
.grade-btn.easy{ background:var(--indigo); }
@media (max-width:420px){
  .grade-btn{ font-size:.92rem; padding:.55rem .2rem; }
  .grade-sub{ font-size:.56rem; }
}

/* auth modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,16,10,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1.25rem; z-index:50;
}
.modal-card{
  position:relative; width:100%; max-width:22rem; background:var(--paper-raised);
  border:1px solid var(--rule); border-radius:16px; padding:1.75rem 1.5rem 1.5rem;
  box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; top:.75rem; right:.75rem; background:none; border:none;
  color:var(--ink-faint); font-size:1rem; cursor:pointer; padding:.25rem;
}
.modal-close:hover{ color:var(--ink); }
.modal-title{ margin:0 0 1rem; font-family:"Fraunces",Georgia,serif; font-size:1.3rem; }
.modal-line{ font-size:.9rem; line-height:1.6; margin:0 0 1.25rem; }
.modal-line .muted{ color:var(--ink-soft); font-size:.8rem; }
.modal-error{ background:var(--cinnabar-tint); color:var(--cinnabar-ink); border-radius:8px; padding:.5rem .75rem; font-size:.8rem; margin:0 0 1rem; }
#auth-form, #delete-form{ display:flex; flex-direction:column; gap:.9rem; }
.btn.primary.danger{ background:var(--cinnabar-ink); border-color:var(--cinnabar-ink); }
.acct-danger{ text-align:center; margin:1.2rem 0 0; font-size:.8rem; }
.acct-danger .link-btn{ color:var(--ink-faint); }
.field{ display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.field input{
  font-family:"Public Sans",sans-serif; font-size:.9rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:.55rem .7rem;
}
.field input:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; }
.modal-switch{ display:block; width:100%; text-align:center; margin-top:1.1rem; font-size:.78rem; }

.btn{
  border:none; border-radius:999px; padding:.6rem 1.3rem; font-size:.85rem; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
}
.btn.primary{ background:var(--indigo); color:var(--paper); }
.btn.primary:disabled{ opacity:.4; cursor:default; }
.btn.ghost{ background:none; border:1px solid var(--rule); color:var(--ink-soft); }
.btn.ghost:hover{ border-color:var(--indigo); color:var(--indigo); }

/* "Nouveau vocabulaire": heads-up of the words met for the first time in
   this dialogue, shown above the Lecture / À deux tabs */
.vp{ margin:0 0 1.1rem; border:1px solid var(--rule); border-radius:14px; background:var(--paper-raised); }
.vp-head{
  width:100%; display:flex; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer;
  padding:.8rem 1rem; font:inherit; color:var(--ink); text-align:left;
}
.vp-head .eyebrow{ margin:0; color:var(--accent-c); flex:1; }
.vp-head .chev{ color:var(--ink-faint); font-size:.75rem; transition:transform .15s ease; }
.vp.open .vp-head .chev{ transform:rotate(180deg); }
.vp-body{ display:none; padding:0 1rem 1rem; }
.vp.open .vp-body{ display:block; }
.vp-hint{ margin:0 0 .7rem; font-size:.75rem; color:var(--ink-soft); }
.vp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr)); gap:.45rem; }
.vp-word{ border:1px solid var(--rule); border-radius:10px; padding:.45rem .6rem; background:var(--paper); min-width:0; }
.vp-py{ display:block; font-size:.7rem; font-style:italic; color:var(--ink-soft); }
.vp-hz{ display:block; font-size:1.2rem; line-height:1.35; }
.vp-fr{ display:block; font-size:.72rem; line-height:1.35; color:var(--ink-soft); overflow-wrap:anywhere; }
.vp-more{ margin-top:.6rem; font-size:.75rem; }
/* « Les nombres » */
.num-page .level-head .badge-lg{ font-size:1.4rem; }
.num-sec{ border:1px solid var(--rule); border-radius:14px; background:var(--paper-raised); padding:1rem 1.1rem; margin-bottom:.8rem; }
.num-sec h2{ margin:0 0 .3rem; font-size:1rem; }
.num-sec p.gx{ margin:0 0 .6rem; font-size:.88rem; line-height:1.95; }
.num-exs{ display:grid; gap:.35rem; }
.num-ex{ display:grid; grid-template-columns:minmax(5.5rem, 9rem) 1fr auto; gap:.6rem; align-items:center; padding:.35rem 0; border-top:1px dashed var(--rule); }
.num-what{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-soft); }
.num-zh .hanzi{ font-size:1.2rem; margin-right:.5rem; }
.num-py{ font-size:.8rem; font-style:italic; color:var(--ink-soft); }
.num-note{ display:block; font-size:.72rem; color:var(--ink-faint); line-height:1.8; }
.num-say, .num-play{ background:none; border:1px solid var(--rule); border-radius:999px; padding:.25rem .55rem; cursor:pointer; font-size:.85rem; color:var(--ink); }
.num-say:hover, .num-play:hover{ border-color:var(--accent-c); }
.num-play{ font-size:1rem; padding:.6rem 1.2rem; font-weight:600; }
.num-cta{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center; flex-direction:column; margin:1.2rem 0 .4rem; }
.num-modes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; margin-bottom:1rem; }
@media (max-width:600px){ .num-modes{ grid-template-columns:1fr 1fr; } .num-ex{ grid-template-columns:5rem 1fr auto; } }
.num-mode{ display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; text-align:left; background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:.7rem .8rem; cursor:pointer; color:var(--ink); font:inherit; }
.num-mode span{ font-size:.72rem; color:var(--ink-soft); }
.num-mode.active{ border-color:var(--accent-c); box-shadow:0 0 0 1px var(--accent-c); }
.num-mode:disabled{ opacity:.45; cursor:not-allowed; }
.num-ranges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.chip{ border:1px solid var(--rule); background:var(--paper); border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.chip.active{ border-color:var(--accent-c); color:var(--accent-c); background:color-mix(in srgb, var(--accent-c) 10%, var(--paper)); }
.num-q{ text-align:center; border:1px solid var(--rule); border-radius:16px; background:var(--paper-raised); padding:1.2rem 1rem 1rem; }
.num-big{ font-size:2.4rem; line-height:1.3; margin:.4rem 0 .2rem; font-weight:600; overflow-wrap:anywhere; }
.num-options{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:1rem 0 .5rem; }
@media (max-width:480px){ .num-options{ grid-template-columns:1fr; } }
.num-opt{ display:flex; flex-direction:column; gap:.15rem; align-items:center; background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:.7rem; cursor:pointer; color:var(--ink); font:inherit; font-size:1.3rem; }
.num-opt:hover:not(:disabled){ border-color:var(--accent-c); }
.num-opt.right{ border-color:var(--jade-ink); background:var(--jade-tint); }
.num-opt.wrong{ border-color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.num-opt:disabled{ cursor:default; }
.num-answer{ display:flex; gap:.5rem; justify-content:center; margin:1rem 0 .5rem; }
.num-answer input{ font:inherit; font-size:1.2rem; text-align:center; width:12rem; max-width:60vw; padding:.5rem .7rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink); }
.num-answer input:focus-visible{ outline:2px solid var(--accent-c); outline-offset:1px; }
.verdict.bad{ color:var(--cinnabar-ink); }
.num-q .verdict{ font-size:.95rem; }
.num-quit{ display:block; margin:.8rem auto 0; }
.num-review{ text-align:left; border:1px solid var(--rule); border-radius:12px; padding:.6rem .9rem; background:var(--paper-raised); }
.num-review p{ margin:.3rem 0; font-size:.88rem; }
.home-numbers{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px; padding:1rem 1.2rem; margin:0 0 1.5rem;
}
.home-numbers:hover{ border-color:var(--cinnabar); }
.home-numbers .hz{ font-size:1.8rem; color:var(--cinnabar-ink); }
.home-numbers b{ display:block; }
.home-numbers span.meta{ font-size:.8rem; color:var(--ink-soft); }
.home-numbers .go{ margin-left:auto; color:var(--cinnabar-ink); font-weight:700; }
/* « Écrire » */
.w-h2{ font-size:1rem; margin:1.6rem 0 .5rem; }
.w-types{ grid-template-columns:repeat(2, 1fr); }
.w-card{ border:1px solid var(--rule); border-radius:16px; background:var(--paper-raised); padding:1.1rem 1.1rem 1rem; }
.w-instr{ margin:.2rem 0 .3rem; font-weight:700; }
.w-fr-prompt{ margin:.2rem 0 .8rem; color:var(--ink-soft); }
.w-fr-prompt.big{ font-size:1.15rem; color:var(--ink); font-weight:600; }
.w-built{ min-height:3.2rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.5rem; border:2px dashed var(--rule); border-radius:12px; margin-bottom:.7rem; }
.w-built.ok{ border-color:var(--jade-ink); border-style:solid; } .w-built.bad{ border-color:var(--cinnabar-ink); border-style:solid; }
.w-placeholder{ color:var(--ink-faint); font-size:.85rem; }
.w-pool{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
.w-tok{ font-family:"Noto Serif SC",serif; font-size:1.25rem; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.35rem .7rem; cursor:pointer; color:var(--ink); }
.w-tok:hover:not(:disabled){ border-color:var(--accent-c); }
.w-tok.ghost{ opacity:.25; cursor:default; }
.w-actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; align-items:center; margin-top:.8rem; }
.w-actions.start{ justify-content:flex-start; }
.w-page textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:1.1rem; padding:.6rem .7rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink); resize:vertical; }
.w-gap{ font-size:1.6rem; line-height:1.8; margin:.4rem 0; }
.w-slot{ display:inline-block; min-width:2.2rem; text-align:center; border-bottom:2px solid var(--accent-c); margin:0 .15rem; color:var(--accent-c); }
.w-slot.ok{ color:var(--jade-ink); border-color:var(--jade-ink); } .w-slot.bad{ color:var(--cinnabar-ink); border-color:var(--cinnabar-ink); }
.w-options{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
@media (max-width:480px){ .w-options{ grid-template-columns:repeat(2, 1fr); } .w-types{ grid-template-columns:1fr; } }
.w-opt{ font-size:1.5rem; padding:.6rem; border:1px solid var(--rule); border-radius:12px; background:var(--paper); cursor:pointer; color:var(--ink); }
.w-opt:hover:not(:disabled){ border-color:var(--accent-c); }
.w-opt.right{ border-color:var(--jade-ink); background:var(--jade-tint); } .w-opt.wrong{ border-color:var(--cinnabar-ink); background:var(--cinnabar-tint); }
.w-feedback{ margin-top:1rem; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--rule); background:var(--paper); }
.w-feedback.ok{ border-color:color-mix(in srgb, var(--jade-ink) 50%, var(--rule)); } .w-feedback.bad{ border-color:color-mix(in srgb, var(--cinnabar-ink) 50%, var(--rule)); }
.verdict-big{ margin:0 0 .5rem; font-weight:800; }
.w-feedback.ok .verdict-big{ color:var(--jade-ink); } .w-feedback.bad .verdict-big{ color:var(--cinnabar-ink); }
.w-zh{ font-size:1.4rem; margin:.2rem 0 0; }
.w-py{ font-style:italic; color:var(--ink-soft); margin:.1rem 0 0; font-size:.9rem; }
.w-fr{ color:var(--ink-soft); margin:.1rem 0 0; font-size:.85rem; }
.w-why{ margin:.7rem 0 0; font-size:.9rem; line-height:1.6; }
.w-diff{ font-size:1.3rem; line-height:1.9; margin:.2rem 0; }
.w-del{ color:var(--cinnabar-ink); text-decoration:line-through; background:var(--cinnabar-tint); border-radius:3px; }
.w-ins{ color:var(--jade-ink); text-decoration:none; background:var(--jade-tint); border-radius:3px; font-weight:700; }
.w-quit{ display:block; margin:.9rem auto 0; }
.w-misses{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr)); gap:.45rem; }
.w-miss{ display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:10px; padding:.45rem .6rem; background:var(--paper-raised); }
.w-miss .hanzi{ font-size:1.2rem; }
.w-miss .link-btn{ align-self:flex-start; margin-top:.25rem; }
.home-writing .hz{ color:var(--teal-ink); }
/* home categories */
.home-cats{ display:grid; gap:.8rem; margin:0 0 1.6rem; }
.home-cat{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.2rem; border-radius:18px; cursor:pointer;
  background:var(--paper-raised); border:1px solid var(--rule); color:var(--ink); font:inherit; text-align:left; }
.home-cat .hz{ flex:none; width:3.2rem; height:3.2rem; display:grid; place-items:center; border-radius:14px; font-size:1.6rem;
  background:color-mix(in srgb, var(--indigo) 12%, var(--paper-raised)); color:var(--indigo); }
.home-cat .txt{ flex:1; display:flex; flex-direction:column; gap:.15rem; }
.home-cat b{ font-size:1.1rem; }
.home-cat .sub{ font-size:.85rem; color:var(--ink-soft); }
.home-cat .go{ color:var(--ink-faint); font-size:1.2rem; }
.home-cat:hover{ border-color:var(--indigo); }
.home-cat[style*="--acc"] .hz{ background:var(--acc-tint); color:var(--acc); }
.rev-list{ gap:.5rem; }
.rev-row{ padding:.7rem 1rem; border-radius:14px; }
.rev-row .hz{ width:2.6rem; height:2.6rem; font-size:.95rem; font-weight:700; border-radius:12px; }
.rev-row b{ font-size:1rem; }
.rev-row .sub.due{ color:var(--acc); font-weight:700; }
.hub-section{ margin:0 0 .6rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.hub-lead{ margin:-.2rem 0 .8rem; font-size:.9rem; color:var(--ink-soft); }
.hub-head{ margin-bottom:1.5rem; }
.hub-head h1{ margin:0 0 .3rem; font-family:"Fraunces",Georgia,serif; font-size:1.6rem; }
.hub-head h1 .hz{ color:var(--ink-soft); font-weight:500; }
.hub-head p{ margin:0; color:var(--ink-soft); }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-card{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; text-align:left; padding:1.1rem 1.2rem; border-radius:16px;
  background:var(--paper-raised); border:1px solid var(--rule); color:var(--ink); font:inherit; cursor:pointer; }
.cat-card.static{ cursor:default; }
button.cat-card:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.cat-card .hz{ font-size:1.8rem; color:var(--indigo); }
.cat-card b{ font-size:1.05rem; }
.cat-card .meta{ font-size:.82rem; color:var(--ink-soft); }
/* translation */
.tr-toggle{
  display:flex; align-items:center; gap:.4rem; margin:1.75rem auto 0; cursor:pointer;
  background:none; border:1px solid var(--rule); border-radius:999px; padding:.4rem .9rem;
  font-size:.75rem; font-weight:600; color:var(--ink-soft);
}
.tr-toggle:hover{ border-color:var(--indigo); color:var(--indigo); }
.tr-toggle .chev{ transition:transform .15s ease; }
.tr-toggle.open .chev{ transform:rotate(180deg); }
.tr-block{
  margin-top:.9rem; padding:1rem 1.1rem; border-radius:12px;
  background:var(--paper-alt); border:1px dashed var(--rule);
  font-size:.8rem; line-height:1.75; color:var(--ink-soft);
  display:none;
}
.tr-block.open{ display:block; }
.tr-block .ln{ margin:0 0 .15rem; }
.tr-block .tag{ font-weight:700; color:var(--ink); }

.center-note{ text-align:center; color:var(--ink-soft); font-size:.85rem; margin:.5rem 0 1.5rem; }

footer.colophon{
  margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  text-align:center; font-size:.75rem; color:var(--ink-faint);
}

@media (max-width:600px){
  .level-grid{ grid-template-columns:1fr; }
  .theme-grid{ grid-template-columns:1fr; }
  .hiw-grid{ grid-template-columns:1fr; }
  .hero .hz{ font-size:2.4rem; }
  .bubble{ max-width:86%; }
  .topbar{ flex-wrap:wrap; row-gap:.5rem; }
  .topbar .crumb{ border-left:none; padding-left:0; margin-left:0; order:3; flex-basis:100%; }
  .dlg-select{ max-width:none; flex:1; }
}
/* Questionnaire onboarding. Scoped to keep the practice room independent. */
body.ob-active{background:#faf7f0;color:#292820}
.ob-active #topbar{display:none}
.ob-active #app-main{max-width:none;padding:0;margin:0}
.ob{--ob-red:#c6442d;--ob-green:#275849;--ob-line:#dedbd0;min-height:100svh;background:#faf7f0;font-family:'Public Sans',sans-serif;color:#292820}
.ob *{box-sizing:border-box}
.ob button{font:inherit;cursor:pointer}
.ob button:focus-visible,.ob a:focus-visible{outline:3px solid #275849;outline-offset:5px}
.ob button:disabled{cursor:not-allowed;opacity:.42}
.ob-header{max-width:1320px;margin:auto;padding:27px 48px;display:flex;align-items:center;gap:24px}
.ob-brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.6px}
.ob-seal{background:var(--ob-red);color:#fff7ed;border-radius:10px;padding:6px 9px;font:24px 'Noto Serif SC',serif}
.ob-header-note{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:#77746a}
.ob-link{border:0;background:none;color:#625e53;text-decoration:underline;text-underline-offset:4px;font-size:12px!important;padding:10px}
.ob-header .ob-link{margin-left:auto}
.ob-progress-wrap{max-width:1224px;margin:0 auto;padding:0 0 12px;display:flex;align-items:center;gap:18px}
.ob-progress{height:3px;background:#e8e3d9;flex:1;overflow:hidden;border-radius:10px}
.ob-progress span{display:block;height:100%;background:var(--ob-red);transition:width .4s}
.ob-step-count{font:10px 'IBM Plex Mono',monospace;color:#77746a;white-space:nowrap}
.ob-layout{max-width:1224px;margin:auto;display:grid;grid-template-columns:1fr 1fr;min-height:660px;border-top:1px solid var(--ob-line)}
.ob-stage{position:relative;overflow:hidden;background:#ecebdd;min-height:640px;display:flex;align-items:center;justify-content:center;border-radius:4px 4px 100px 4px;margin:26px 28px 26px 0}
.ob-stage:before{content:'';position:absolute;inset:0;opacity:.15;background-image:radial-gradient(#5e644c .7px,transparent .7px);background-size:5px 5px}
.ob-art-top{position:absolute;left:30px;right:30px;top:28px;display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#566152}
.ob-sun{position:absolute;width:305px;height:305px;border-radius:50%;background:#d85137;top:120px;left:50%;transform:translateX(-50%)}
.ob-hanzi{position:absolute;top:114px;left:0;right:0;text-align:center;color:#fff2dc;font:190px/1.4 'Noto Serif SC',serif;transform:rotate(-9deg);text-shadow:1px 3px 0 #a3362733}
.ob-orbit{position:absolute;width:420px;height:420px;border:1px solid #64745f33;border-radius:50%;top:65px;left:50%;transform:translateX(-50%)}
.ob-orbit:after{content:'✦';font-size:37px;color:#275849;position:absolute;top:20px;right:28px}
.ob-floating{position:absolute;background:#fffdf7;border:1px solid #e7e2d5;box-shadow:0 12px 25px #34351d0b;border-radius:16px;padding:17px 23px;min-width:185px;transform:rotate(-7deg);left:30px;top:340px}
.ob-floating b{display:block;font:32px 'Noto Serif SC',serif}.ob-floating span{display:block;font-size:12px;color:#736b5a;margin-top:5px}
.ob-floating.second{left:auto;right:22px;top:418px;transform:rotate(7deg);background:#275849;color:#fff9ed;border:0}
.ob-floating.second span{color:#e1eadc}.ob-floating.second b{font-size:25px}
.ob-art-bottom{position:absolute;bottom:34px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:end;color:#52624f;font-size:11px;line-height:1.8}
.ob-art-bottom strong{font:italic 24px 'Fraunces',serif}
.ob-panel{padding:46px 28px 26px 44px;display:flex;flex-direction:column;justify-content:center;min-width:0;animation:ob-in .35s ease-out}
.ob-kicker{font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:2px;color:var(--ob-red);margin:0 0 19px;display:flex;align-items:center;gap:9px}
.ob-kicker:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.ob h1{font:500 clamp(36px,3.7vw,54px)/1.08 'Fraunces',serif;letter-spacing:-1.8px;margin:0 0 20px;color:#292820}
.ob h1 em{font-weight:500;color:var(--ob-red)}
.ob-lead{font-size:14px;line-height:1.8;color:#756e60;margin:0 0 25px;max-width:420px}
.ob-primary{width:100%;border:1px solid var(--ob-red);background:var(--ob-red);color:#fffaf2;border-radius:10px;min-height:54px;padding:14px 20px;font-weight:600!important;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .2s,transform .2s}
.ob-primary:hover:not(:disabled){background:#ac3825;transform:translateY(-1px)}
.ob-primary span{font-size:22px;font-weight:400}.ob-actions{margin-top:28px}.ob-note{font-size:10px;color:#776f62;text-align:center;line-height:1.7;margin:12px 0 0}
.ob-features{display:flex;gap:18px;border-top:1px solid var(--ob-line);padding-top:24px;margin-top:30px;font-size:11px;color:#6a6559}.ob-features span:before{content:'✓';color:var(--ob-green);margin-right:7px}
.ob-bottom{max-width:1224px;margin:0 auto;padding:18px 0 24px;border-top:1px solid var(--ob-line);display:flex;justify-content:space-between;color:#8a8273;font:10px 'IBM Plex Mono',monospace;letter-spacing:.5px}
.ob-options{display:grid;gap:9px}.ob-option{display:flex;align-items:center;text-align:left;gap:14px;border:1px solid #ddd8cc;background:#fffcf6;border-radius:12px;padding:13px 16px;color:#38372f;min-height:65px;transition:border-color .2s,background .2s,transform .2s}
.ob-option:hover{border-color:#b99978;transform:translateX(2px)}.ob-option[aria-pressed=true]{border-color:var(--ob-red);background:#f9e9df;box-shadow:inset 0 0 0 1px var(--ob-red)}
.ob-option-icon{font-size:23px;width:32px;text-align:center;flex-shrink:0}.ob-option-copy{flex:1}.ob-option-copy b{font-size:13px;display:block;font-weight:600}.ob-option-copy small{display:block;color:#777064;font-size:11px;line-height:1.5;margin-top:4px}
.ob-check{width:18px;height:18px;flex-shrink:0;border:1px solid #d3cbbb;border-radius:50%;font-size:11px;text-align:center;line-height:16px;color:transparent}.ob-option[aria-pressed=true] .ob-check{background:var(--ob-red);border-color:var(--ob-red);color:white}
.ob-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:10px;color:#8a8070}.ob-back{border:1px solid #ddd8cc;background:transparent;border-radius:50%;width:34px;height:34px;color:#514d43}
.ob-mini-label{font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:1px;color:#6a6559;margin:0 0 12px}
.ob-solutions{display:grid;gap:19px}.ob-solution{display:flex;gap:14px;align-items:start}.ob-solution>span{background:#e5eadb;color:#275849;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}.ob-solution small{font-size:11px;color:#7d7569}.ob-solution b{font-size:14px;display:block;margin-top:5px;line-height:1.5}
.ob-pass{background:#fffcf6;border:1px solid #d5d5c3;border-radius:15px;padding:25px;position:relative}.ob-pass-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #d5d0c4;padding-bottom:18px;margin-bottom:20px;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#6c735d}.ob-pass-stamp{border:2px solid #c6442d;color:#c6442d;border-radius:50%;width:49px;height:49px;display:grid;place-items:center;font:24px 'Noto Serif SC',serif;transform:rotate(12deg)}
.ob-pass h2{font:500 27px 'Fraunces',serif;margin:0 0 8px}.ob-pass p{font-size:12px;line-height:1.7;color:#716a5c}.ob-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.ob-tags span{font-size:10px;background:#ecefdf;color:#35533d;border-radius:5px;padding:7px 9px}
.ob-chat{border:1px solid #ddd7c9;border-radius:15px;background:#fffdf7;padding:22px;margin-bottom:17px}.ob-chat-header{display:flex;align-items:center;gap:10px;font-size:11px;color:#777062;margin-bottom:22px}.ob-avatar{background:#e7eadb;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;color:#275849}.ob-chat-hz{font:30px/1.8 'Noto Serif SC',serif;margin:0 0 10px;overflow-wrap:anywhere}.ob-chat-py{font-size:12px;line-height:1.6;color:#9c4938}.ob-audio{border:1px solid #e4ddcd;background:#f6f1e5;border-radius:20px;color:#645c4c;padding:8px 13px;font-size:11px!important;margin-top:14px}
.ob-feedback{border-radius:9px;background:#e9eddc;color:#35513b;padding:13px;font-size:12px;line-height:1.6;margin:12px 0 0}.ob-feedback.retry{background:#fae8d9;color:#994225}
.ob-loader{width:152px;height:152px;position:relative;display:grid;place-items:center;margin:24px auto}
.ob-loader span{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:#c6442d12;color:var(--ob-red);font:57px 'Noto Serif SC',serif}
.ob-loader-orbit,.ob-loader-inner{position:absolute;inset:2px;border:2px solid var(--ob-line);border-top-color:var(--ob-red);border-radius:50%;animation:ob-spin 1.6s linear infinite}
.ob-loader-orbit:after{content:"";position:absolute;right:17px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--ob-red)}
.ob-loader-inner{inset:13px;border-color:transparent;border-bottom-color:var(--ob-green);animation-duration:2.4s;animation-direction:reverse}
.ob-processing{font-size:12px;line-height:2.6;color:var(--ob-green)}
.ob-pay-list{padding:0;list-style:none;font-size:12px;line-height:2.5;color:#625c50}.ob-pay-list li:before{content:'✓';color:#275849;margin-right:10px}.ob-share{border:1px solid #c8ccbb;border-radius:9px;background:transparent;color:#35533d;padding:12px 18px;width:100%;margin-top:12px;font-size:12px!important}.ob-live{font-size:12px;color:#35533d;line-height:1.7;margin-top:10px}.ob-restart{display:block;margin:22px auto 0;border:0;background:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:12px 'Public Sans',sans-serif}
@keyframes ob-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes ob-spin{to{transform:rotate(360deg)}}
@media(min-width:1400px){.ob-layout{min-height:710px}.ob-stage{min-height:685px}.ob-sun{top:144px}.ob-hanzi{top:138px}.ob-orbit{top:89px}.ob-floating{top:367px}.ob-floating.second{top:445px}}
@media(max-width:1100px){.ob-header{padding:22px 28px}.ob-progress-wrap,.ob-layout,.ob-bottom{margin-left:28px;margin-right:28px}.ob-panel{padding-left:20px;padding-right:0}.ob-stage{margin-right:20px}.ob-floating{left:12px}.ob-floating.second{right:12px}.ob-header-note{display:none}.ob-hanzi{font-size:160px;top:140px}.ob-sun{width:270px;height:270px;top:140px}.ob-orbit{width:340px;height:340px;top:105px}}
@media(max-width:720px){.ob-header{padding:17px 20px;gap:10px}.ob-brand{font-size:16px}.ob-seal{font-size:21px}.ob-progress-wrap{margin:0 20px;padding-bottom:14px}.ob-layout{display:flex;flex-direction:column;margin:0 20px;min-height:0;border:0}.ob-stage{min-height:280px;margin:10px 0 0;border-radius:4px 4px 55px 4px}.ob-art-top{top:17px;left:20px;right:20px;font-size:8px}.ob-sun{width:180px;height:180px;top:44px}.ob-hanzi{font-size:115px;top:42px}.ob-orbit{width:235px;height:235px;top:16px}.ob-orbit:after{font-size:25px;top:18px;right:11px}.ob-floating{top:140px;left:14px;min-width:120px;padding:11px 15px;border-radius:11px}.ob-floating b{font-size:24px}.ob-floating span{font-size:9px}.ob-floating.second{top:188px;right:15px}.ob-floating.second b{font-size:21px}.ob-art-bottom{display:none}.ob-panel{padding:28px 2px 24px}.ob h1{font-size:39px;letter-spacing:-1.3px;margin-bottom:15px}.ob-kicker{font-size:9px;margin-bottom:14px}.ob-lead{font-size:13px;margin-bottom:20px}.ob-actions{margin-top:23px}.ob-features{margin-top:23px;padding-top:20px;gap:14px;font-size:10px}.ob-bottom{margin:0 22px;font-size:8px;gap:14px;line-height:1.7;padding:17px 0}.ob:not(.ob-welcome) .ob-stage{display:none}.ob:not(.ob-welcome) .ob-panel{padding-top:14px;min-height:calc(100svh - 176px);justify-content:flex-start}.ob:not(.ob-welcome) .ob-actions{margin-top:auto;padding-top:24px}.ob-option{min-height:66px}.ob-nav{margin-bottom:18px}.ob-pass{padding:22px}.ob-header .ob-link{font-size:10px!important}.ob-chat-hz{font-size:26px}}
@media(prefers-reduced-motion:reduce){.ob *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Conversion: evidence, contextual reassurance, and finite feedback motion. */
.ob-panel{animation:none;position:relative}
.ob.ob-enter .ob-panel{animation:ob-in 280ms ease-out}
.ob-progress span{animation:ob-progress-fill 280ms ease-out}
.ob-evidence{display:grid;grid-template-columns:1fr 1.2fr .7fr;gap:14px;margin:0 0 3px;padding:20px 0;border-top:1px solid #e2ddcf;border-bottom:1px solid #e2ddcf}
.ob-evidence strong{font:500 29px/1.1 'Fraunces',serif;color:#275849;display:block;white-space:nowrap}
.ob-evidence span{display:block;font-size:10px;line-height:1.6;color:#746d60;margin-top:7px}
.ob-evidence-note{font-size:10px;color:#766f62;margin:9px 0 0}
.ob-welcome .ob-features{border-top:0;padding-top:0;margin-top:22px}
.ob-welcome .ob-lead{margin-bottom:22px}
.ob-welcome.ob-enter .ob-floating{animation:ob-card-arrive 650ms cubic-bezier(.2,.8,.2,1) both}
.ob-welcome.ob-enter .ob-floating.second{animation-delay:110ms;--ob-tilt:7deg}
.ob-welcome.ob-enter .ob-hanzi{animation:ob-letter-arrive 850ms cubic-bezier(.2,.8,.2,1) both}
.ob-primary:active:not(:disabled){transform:scale(.985)}
.ob-option.ob-picked .ob-check{animation:ob-check-pop 260ms ease-out}
.ob-option.ob-picked .ob-option-icon{animation:ob-icon-nod 280ms ease-out}
.ob-answer-correct:disabled{opacity:1!important;background:#e9efdf;border-color:#557546;color:#275849}
.ob-feedback:not(.retry){animation:ob-in 200ms ease-out}
.ob-proof-strip{display:flex;gap:12px;align-items:center;margin-top:24px;padding:15px;border-radius:10px;background:#e9eddf;color:#33523e;font-size:12px;line-height:1.6}
.ob-proof-strip>span{font-size:24px}.ob-proof-strip strong{font-weight:600}
.ob-week{margin-top:20px;background:#e9eddf;border:1px solid #dce2cd;border-radius:12px;padding:19px 20px;color:#31553e}
.ob-week-top{display:flex;gap:14px;align-items:center}.ob-week-top strong{font:500 40px 'Fraunces',serif;white-space:nowrap;letter-spacing:-1px}.ob-week-top strong small{font:12px 'Public Sans',sans-serif;margin-left:3px;letter-spacing:0}
.ob-week-top p{font-size:12px;line-height:1.6;margin:0}.ob-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:18px 0 10px;text-align:center}
.ob-week-day{font:10px 'IBM Plex Mono',monospace}.ob-week-day i{display:block;height:23px;border-radius:5px;background:#548167;margin-bottom:7px;transform-origin:bottom;animation:ob-week-rise 350ms ease-out both;animation-delay:calc(var(--day)*45ms)}
.ob-week>small{font-size:10px;line-height:1.5;display:block;color:#65735b}
.ob-review{margin-top:24px;border:1px solid #d9d4c7;background:#fffdf6;border-radius:13px;padding:20px}
.ob-review-label{display:inline-block;font:9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.5px;background:#f3e5ca;color:#76531f;padding:5px 8px;border-radius:4px;margin-bottom:13px}
.ob-review blockquote{font:500 21px/1.45 'Fraunces',serif;margin:0;color:#414033}
.ob-review-byline{display:flex;align-items:center;gap:10px;margin-top:17px}.ob-review-avatar{width:32px;height:32px;border-radius:50%;background:#eee9d9;display:grid;place-items:center;font-size:16px}.ob-review-byline b{font-size:11px;font-weight:600;display:block}.ob-review-byline small{font-size:10px;color:#7a7162;display:block;margin-top:3px}.ob-review-controls{display:flex;gap:3px;margin-left:auto}.ob-review-controls button{width:28px;height:34px;border:0;background:none;padding:8px;color:#9b9485}.ob-review-controls button:before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:currentColor}.ob-review-controls button[aria-pressed=true]{color:#c6442d}
.ob-reassurance{display:flex;align-items:start;gap:9px;font-size:11px;line-height:1.7;color:#676052;margin-top:18px}.ob-reassurance>span{color:#275849}
.ob-win-track{display:flex;gap:7px;margin:17px 0 0}.ob-win-track span{flex:1;background:#e8eddf;border-radius:6px;color:#36573e;text-align:center;font-size:10px;padding:9px 4px}
.ob-celebration{position:absolute;left:0;right:0;top:100px;height:260px;overflow:hidden;pointer-events:none}
.ob-celebration i{position:absolute;left:50%;top:20px;width:6px;height:11px;background:#c6442d;opacity:0;border-radius:2px}
.ob-enter .ob-celebration i{animation:ob-confetti 2400ms cubic-bezier(.15,.6,.4,1) 1 both;animation-delay:calc(var(--piece)*45ms)}
.ob-celebration i:nth-child(3n){background:#548167}.ob-celebration i:nth-child(3n+1){background:#c5a35b;border-radius:50%}
.ob-enter .ob-pass-stamp{animation:ob-stamp 450ms cubic-bezier(.2,.8,.2,1) both}
.ob-faq{margin-top:20px;border-top:1px solid #dfd9cb}.ob-faq details{border-bottom:1px solid #dfd9cb;padding:14px 0}.ob-faq summary{font-size:12px;font-weight:600;color:#504a3f;cursor:pointer;line-height:1.7}.ob-faq p{font-size:11px;line-height:1.8;color:#746c5e;margin:10px 0 0}
.ob-faq summary:focus-visible{outline:3px solid #275849;outline-offset:5px}
@keyframes ob-progress-fill{from{width:var(--ob-from)}}
@keyframes ob-card-arrive{from{opacity:0;transform:translateY(18px) rotate(0deg)}to{opacity:1;transform:translateY(0) rotate(var(--ob-tilt,-7deg))}}
@keyframes ob-letter-arrive{from{opacity:0;transform:translateY(12px) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(-9deg)}}
@keyframes ob-check-pop{50%{transform:scale(1.25)}}
@keyframes ob-icon-nod{50%{transform:rotate(-9deg)}}
@keyframes ob-week-rise{from{transform:scaleY(.2);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes ob-stamp{from{opacity:0;transform:scale(1.3) rotate(24deg)}to{opacity:1;transform:scale(1) rotate(12deg)}}
@keyframes ob-confetti{0%{opacity:0;transform:translate(0,0) rotate(0deg)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin))}}
@media(max-width:720px){.ob-evidence{padding:17px 0;gap:9px}.ob-evidence strong{font-size:26px}.ob-evidence span{font-size:10px}.ob-welcome .ob-stage{min-height:235px}.ob-welcome .ob-sun{width:160px;height:160px;top:38px}.ob-welcome .ob-hanzi{font-size:100px;top:38px}.ob-welcome .ob-orbit{height:205px;width:205px;top:15px}.ob-welcome .ob-floating{top:115px}.ob-welcome .ob-floating.second{top:160px}.ob-review{padding:17px}.ob-review blockquote{font-size:20px}.ob-questions .ob-actions{position:sticky;bottom:0;background:linear-gradient(transparent,#faf7f0 18px);padding:22px 0 max(12px,env(safe-area-inset-bottom));z-index:2}.ob-week-top strong{font-size:36px}.ob-week{padding:16px}.ob:not(.ob-welcome) .ob-panel{min-height:calc(100svh - 176px)}}
@media(prefers-reduced-motion:reduce){.ob *{animation:none!important;transition:none!important}.ob-celebration{display:none}}

/* Visual proof board: mock outcomes are confined to loopback previews. */
.ob-stage.ob-proof{align-self:start;position:sticky;top:24px;background:#183f36;color:#fff8e9;display:block;padding:32px;isolation:isolate;border-radius:22px 22px 80px 22px;min-height:690px}
.ob-proof:before{background-image:radial-gradient(#f9efcf 1px,transparent 1px);opacity:.08;background-size:7px 7px;z-index:-1}
.ob-proof:after{content:'说';font:380px 'Noto Serif SC',serif;position:absolute;right:-75px;bottom:-65px;color:#ffffff04;z-index:-1;transform:rotate(-15deg)}
.ob-proof-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#c3d2c0}
.ob-proof-caption span:last-child{border:1px solid #a1b69a66;border-radius:30px;padding:7px 10px;white-space:nowrap}
.ob-proof h2{font:500 37px/1.15 'Fraunces',serif;margin:30px 0 22px;letter-spacing:-1px;color:#fff8e9}.ob-proof h2 em{color:#ecc681;font-weight:500}
.ob-gauge-card{display:flex;gap:20px;align-items:center;background:#ffffff09;border:1px solid #d6ddbb30;border-radius:17px;padding:23px 20px}
.ob-gauge{width:156px;height:156px;position:relative;flex-shrink:0}.ob-gauge svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.ob-gauge circle{fill:none;stroke-width:5}.ob-gauge-track{stroke:#e7edd31a}.ob-gauge-fill{stroke:#edc47a;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:18}
.ob-proof-enter .ob-gauge-fill{animation:ob-ring 1100ms cubic-bezier(.22,.7,.2,1) both}
.ob-gauge-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 49px 'Fraunces',serif;letter-spacing:-2px}.ob-gauge-value small{font-size:24px;letter-spacing:0;margin:10px 0 0 3px}
.ob-mock-tag{font:8px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#d5c394;display:block;margin-bottom:8px}.ob-gauge-copy strong{font-size:15px;line-height:1.65;font-weight:500;display:block}.ob-gauge-copy p{font-size:10px;line-height:1.7;color:#b4c3ad;margin:9px 0 0}
.ob-proof-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.ob-proof-tile{border-radius:15px;padding:20px;min-width:0;background:#f0e8d6;color:#244a3c}.ob-proof-tile:last-child{background:#e3a882;color:#472f23}.ob-proof-tile .ob-mock-tag{color:inherit;opacity:.7}.ob-proof-number{font:500 41px 'Fraunces',serif;letter-spacing:-1.5px}.ob-proof-number small{font:13px 'Public Sans',sans-serif;letter-spacing:0}.ob-proof-tile p{font-size:11px;line-height:1.7;margin:8px 0 0}.ob-proof-stars{letter-spacing:3px;font-size:13px;margin-top:7px}
.ob-mini-bars{height:32px;display:flex;gap:5px;align-items:end;margin-top:12px}.ob-mini-bars i{width:100%;height:var(--height);background:#557d60;border-radius:3px;transform-origin:bottom}.ob-proof-enter .ob-mini-bars i{animation:ob-week-rise 650ms ease-out both;animation-delay:calc(var(--bar)*60ms)}
.ob-proof-footnote{display:flex;align-items:start;gap:10px;color:#c5cfb9;font-size:10px;line-height:1.7;margin:20px 0 0}.ob-proof-footnote span:first-child{color:#e4c48a;font-size:16px}
.ob-proof-enter .ob-gauge-card{animation:ob-in 450ms ease-out both}.ob-proof-enter .ob-proof-tile{animation:ob-in 450ms ease-out 120ms both}.ob-proof-enter .ob-proof-tile:last-child{animation-delay:220ms}
.ob-review{position:relative;border-radius:18px;box-shadow:0 6px 0 -2px #e8e2d5,0 12px 0 -4px #efeadf;margin-bottom:10px;overflow:hidden}
.ob-review:before{content:'“';position:absolute;right:15px;top:10px;font:95px/1 'Fraunces',serif;color:#d9bb8426;pointer-events:none}
.ob-review.ob-review-changing blockquote{animation:ob-review-slide 300ms ease-out both}.ob-review blockquote{position:relative}
@keyframes ob-ring{from{stroke-dashoffset:100}to{stroke-dashoffset:18}}
@keyframes ob-review-slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px) and (min-width:721px){.ob-stage.ob-proof{padding:22px}.ob-gauge-card{flex-direction:column;align-items:start;gap:14px}.ob-gauge{width:130px;height:130px;align-self:center}.ob-proof-tiles{gap:8px}.ob-proof-tile{padding:14px}.ob-proof-caption{font-size:8px;gap:5px}.ob-proof h2{font-size:32px}}
@media(max-width:720px){.ob:not(.ob-welcome) .ob-stage.ob-proof{position:relative;top:auto;align-self:stretch;display:block;min-height:0;margin:8px 0 10px;padding:23px 20px;border-radius:16px 16px 48px 16px}.ob-proof h2{font-size:31px;margin:23px 0 19px}.ob-proof-caption{font-size:8px;letter-spacing:.5px}.ob-proof-caption span:last-child{padding:6px 8px}.ob-gauge-card{padding:17px 12px;gap:13px}.ob-gauge{width:117px;height:117px}.ob-gauge-value{font-size:39px}.ob-gauge-copy strong{font-size:12px}.ob-gauge-copy p{font-size:9px}.ob-proof-tiles{gap:10px;margin-top:10px}.ob-proof-tile{padding:15px}.ob-proof-number{font-size:35px}.ob-proof-tile p{font-size:10px}.ob-proof-footnote{font-size:9px;margin-top:15px}.ob-proof-layout .ob-panel{min-height:0!important}}
@media(max-width:350px){.ob-gauge{width:96px;height:96px}.ob-gauge-value{font-size:33px}.ob-proof-caption{flex-wrap:wrap}.ob-gauge-card{gap:10px}.ob-proof-number{font-size:31px}}
@media(prefers-reduced-motion:reduce){.ob-proof *,.ob-review *{animation:none!important;transition:none!important}}

/* A mobile card has one content area and a separate, always-visible action area.
   overflow:auto is an accessibility fallback for zoom, tiny displays and long Chinese. */
@media(max-width:720px){
  .ob.ob-mobile{height:100svh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .ob-mobile .ob-header{width:100%;max-width:none;margin:0;flex-shrink:0;padding:12px 18px;gap:9px;min-height:60px}
  .ob-mobile .ob-header .ob-back{width:32px;height:32px;flex-shrink:0}
  .ob-mobile .ob-brand{font-size:14px;gap:6px}.ob-mobile .ob-seal{font-size:19px;padding:5px 7px}
  .ob-mobile .ob-header .ob-link{padding:8px 0 8px 7px;font-size:10px!important}
  .ob-mobile .ob-progress-wrap{flex-shrink:0;margin:0 18px;padding:0 0 10px}
  .ob-mobile .ob-layout{flex:1;min-height:0;margin:0 18px;display:block;overflow:hidden}
  .ob-mobile .ob-panel.ob-mobile-page{height:100%;min-height:0!important;max-height:100%;padding:14px 2px 10px;display:flex;flex-direction:column;justify-content:flex-start;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .ob-mobile .ob-mobile-page[hidden]{display:none!important}
  .ob-mobile .ob-panel{animation:none}.ob-mobile.ob-enter .ob-mobile-page:not([hidden]){animation:ob-in 220ms ease-out}
  .ob-mobile h1[tabindex="-1"]:focus,.ob-mobile h2[tabindex="-1"]:focus{outline:none}
  .ob-mobile h1{font-size:clamp(27px,7.7vw,33px);line-height:1.08;letter-spacing:-1px;margin:0 0 13px;flex-shrink:0}
  .ob-mobile .ob-kicker{font-size:9px;margin:0 0 12px;flex-shrink:0}
  .ob-mobile .ob-lead{font-size:12px;line-height:1.65;margin:0 0 17px;flex-shrink:0}
  .ob-mobile .ob-options{gap:8px;flex-shrink:0}.ob-mobile .ob-option{min-height:55px;padding:10px 12px;gap:10px;border-radius:11px}
  .ob-mobile .ob-option-copy b{font-size:12px}.ob-mobile .ob-option-copy small{font-size:10px;margin-top:3px;line-height:1.4}.ob-mobile .ob-option-icon{font-size:21px;width:28px}
  .ob-mobile-footer{flex-shrink:0;padding:10px 20px max(12px,env(safe-area-inset-bottom));background:#faf7f0;border-top:1px solid #e4ded1}
  .ob-mobile .ob-mobile-footer .ob-actions{position:static;margin:0!important;padding:0!important;background:none}
  .ob-mobile-footer .ob-primary{min-height:50px;padding:12px 16px;font-size:13px}
  .ob-mobile-footer .ob-share{margin-top:8px;padding:10px;font-size:11px!important;min-height:42px}
  .ob-mobile-footer .ob-note{font-size:9px;margin:6px 0 0;line-height:1.5}
  .ob-mobile-footer .ob-live:empty{display:none}.ob-mobile-footer .ob-live{font-size:11px;margin-top:6px;max-height:72px;overflow:auto}
  .ob-mobile-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;min-height:26px;font:10px 'IBM Plex Mono',monospace;color:#746c5d}
  .ob-mobile-pager>div{display:flex;gap:2px}.ob-mobile-pager button{border:0;background:none;width:28px;height:28px;padding:9px;display:grid;place-items:center}.ob-mobile-pager button span{width:6px;height:6px;border-radius:50%;background:#d1c8b8}.ob-mobile-pager button[aria-pressed=true] span{background:#c6442d;width:16px;border-radius:4px}
  .ob-mobile.ob-welcome .ob-stage{display:block;height:145px;min-height:145px;flex-shrink:0;margin:0 0 20px;border-radius:10px 10px 35px 10px}
  .ob-mobile.ob-welcome .ob-art-top{top:12px;left:14px;right:14px;font-size:7px}.ob-mobile.ob-welcome .ob-sun{width:112px;height:112px;top:20px}.ob-mobile.ob-welcome .ob-hanzi{font-size:73px;top:15px}.ob-mobile.ob-welcome .ob-orbit{width:138px;height:138px;top:3px}.ob-mobile.ob-welcome .ob-orbit:after{font-size:20px;right:0;top:10px}
  .ob-mobile.ob-welcome .ob-floating{top:53px;min-width:100px;padding:9px 12px;left:13px}.ob-mobile.ob-welcome .ob-floating.second{top:87px;right:12px;left:auto}.ob-mobile.ob-welcome .ob-floating b{font-size:20px}.ob-mobile.ob-welcome .ob-floating span{font-size:8px}
  .ob-mobile.ob-welcome .ob-features{display:none}.ob-mobile .ob-evidence{padding:12px 0;gap:10px;flex-shrink:0}.ob-mobile .ob-evidence strong{font-size:25px}.ob-mobile .ob-evidence span{font-size:9px;margin-top:4px}.ob-mobile .ob-evidence-note{font-size:9px;line-height:1.5;margin-top:7px}
  .ob-mobile .ob-solutions{gap:18px;margin-top:4px;flex-shrink:0}.ob-mobile .ob-solution b{font-size:13px;line-height:1.5}.ob-mobile .ob-solution small{font-size:11px}.ob-mobile .ob-proof-strip{padding:13px;margin-top:20px;font-size:11px;flex-shrink:0}.ob-mobile .ob-reassurance{margin-top:20px;font-size:11px;flex-shrink:0}
  .ob-mobile .ob-review{margin-top:10px;padding:20px;flex-shrink:0}.ob-mobile .ob-review blockquote{font-size:21px;line-height:1.5}.ob-mobile .ob-review-byline{margin-top:18px}.ob-mobile .ob-review-label{font-size:8px}
  .ob-mobile .ob-week{padding:14px;margin-top:14px;flex-shrink:0}.ob-mobile .ob-week-top strong{font-size:32px}.ob-mobile .ob-week-top p{font-size:11px}.ob-mobile .ob-week-days{margin:12px 0 8px}.ob-mobile .ob-week-day i{height:17px}.ob-mobile .ob-week>small{font-size:9px}
  .ob-mobile .ob-mobile-proof{padding:4px 0 8px!important}
  .ob-mobile .ob-mobile-proof .ob-stage.ob-proof{position:relative;top:0;align-self:stretch;width:100%;min-height:0;margin:0;padding:20px;border-radius:14px 14px 40px 14px;flex-shrink:0}
  .ob-mobile .ob-proof h2{font-size:29px;margin:18px 0}.ob-mobile .ob-gauge-card{padding:15px 12px;gap:12px}.ob-mobile .ob-gauge{width:100px;height:100px}.ob-mobile .ob-gauge-value{font-size:35px}.ob-mobile .ob-gauge-copy strong{font-size:12px}.ob-mobile .ob-gauge-copy p{font-size:9px;margin-top:6px}
  .ob-mobile .ob-proof-tiles{gap:10px;margin-top:10px}.ob-mobile .ob-proof-tile{padding:14px}.ob-mobile .ob-proof-number{font-size:33px}.ob-mobile .ob-proof-tile p{font-size:10px;line-height:1.5}.ob-mobile .ob-mini-bars{height:20px;margin-top:9px}.ob-mobile .ob-proof-footnote{font-size:9px;line-height:1.55;margin-top:12px}
  .ob-mobile .ob-chat{padding:14px 16px;margin-bottom:12px;flex-shrink:0}.ob-mobile .ob-chat-header{margin-bottom:12px}.ob-mobile .ob-chat-hz{font-size:25px;line-height:1.55;margin-bottom:7px}.ob-mobile .ob-chat-py{font-size:11px}.ob-mobile .ob-audio{margin-top:9px;padding:7px 11px;min-height:34px}.ob-mobile .ob-feedback{font-size:11px;padding:10px;margin-top:10px;flex-shrink:0}
  .ob-mobile .ob-pass{padding:18px;flex-shrink:0}.ob-mobile .ob-pass-header{padding-bottom:12px;margin-bottom:14px;font-size:9px}.ob-mobile .ob-pass h2{font-size:24px}.ob-mobile .ob-pass p{font-size:11px;margin-top:10px;margin-bottom:10px}.ob-mobile .ob-tags{margin-top:12px}.ob-mobile .ob-win-track{margin-top:12px}.ob-mobile .ob-share{padding:10px}
  .ob-mobile[data-step="9"] h1{font-size:28px;margin-bottom:14px}.ob-mobile .ob-faq{margin-top:18px}.ob-mobile .ob-faq details{padding:11px 0}
}
@media(max-width:720px) and (max-height:740px){
  .ob-mobile .ob-header{min-height:53px;padding-top:8px;padding-bottom:8px}.ob-mobile .ob-panel.ob-mobile-page{padding-top:8px}.ob-mobile h1{font-size:29px;margin-bottom:10px}.ob-mobile .ob-kicker{margin-bottom:9px}.ob-mobile .ob-lead{margin-bottom:12px}.ob-mobile .ob-option{min-height:50px;padding-top:8px;padding-bottom:8px}.ob-mobile .ob-options{gap:7px}
  .ob-mobile.ob-welcome .ob-stage{height:120px;min-height:120px;margin-bottom:14px}.ob-mobile.ob-welcome .ob-sun{width:95px;height:95px;top:13px}.ob-mobile.ob-welcome .ob-hanzi{font-size:66px;top:8px}.ob-mobile.ob-welcome .ob-orbit{height:112px;width:112px}.ob-mobile.ob-welcome .ob-floating{top:39px}.ob-mobile.ob-welcome .ob-floating.second{top:67px}.ob-mobile.ob-welcome .ob-art-top{font-size:6px}
  .ob-mobile .ob-mobile-proof .ob-stage.ob-proof{padding:16px}.ob-mobile .ob-proof h2{font-size:26px;margin:13px 0}.ob-mobile .ob-gauge{width:87px;height:87px}.ob-mobile .ob-gauge-card{padding:11px 10px}.ob-mobile .ob-proof-tile{padding:11px}.ob-mobile .ob-proof-number{font-size:29px}.ob-mobile .ob-proof-caption{font-size:7px}.ob-mobile .ob-proof-footnote{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.ob-mobile *{animation:none!important;transition:none!important}}

@media(max-width:720px) and (max-height:700px){
  .ob-mobile .ob-review{padding:16px}.ob-mobile .ob-review blockquote{font-size:18px;line-height:1.35}.ob-mobile .ob-review-byline{margin-top:12px}.ob-mobile .ob-proof-strip{margin-top:12px;padding:11px}
  .ob-mobile[data-step="9"] h1{margin-bottom:10px}
}
@media(max-width:720px){.ob-mobile[data-step="7"] .ob-option:disabled:not(.ob-answer-correct){display:none}}
@media(max-width:720px) and (max-height:700px){
  .ob-mobile[data-step="7"] .ob-feedback{padding:8px;margin-top:6px;line-height:1.5}
  .ob-mobile[data-step="7"] .ob-chat-header{margin-bottom:8px}.ob-mobile[data-step="7"] .ob-chat{margin-bottom:8px;padding-top:10px;padding-bottom:10px}.ob-mobile[data-step="7"] .ob-audio{margin-top:6px}
}

/* Trial offer: dialogue illustration and a quiet, readable price. */
.ob-plan{background:transparent;color:#263c32;border:0;overflow:hidden;box-shadow:none;padding:0!important;border-radius:0}
.ob-plan .ob-price{font:500 34px 'Fraunces',serif;margin:14px 0 2px;text-align:center}
.ob-price em{color:#be482f;font-style:normal}
.ob-plan .ob-price-equivalent{display:block;border:0;background:none;color:#655f53;text-align:center;border-radius:0;font-size:13px;line-height:1.6;margin:0;padding:4px}
.ob-plan p,.ob-plan .ob-pay-list{color:#625c50}
.ob-plan .ob-pay-list li:before{color:#275849}
.ob-demo-badge{display:inline-block;background:none;color:#736d60;font-size:10px;padding:0;border-radius:5px;letter-spacing:1.2px;margin-bottom:18px}
@media(max-width:720px){
  .ob-mobile[data-step="9"] .ob-demo-badge{margin-bottom:12px;font-size:9px}
  .ob-mobile .ob-plan .ob-price{font-size:31px;margin:12px 0 0}
  .ob-mobile .ob-plan .ob-pay-list{font-size:11px;line-height:1.8;margin:10px 0}
  .ob-mobile .ob-plan p{font-size:10px;line-height:1.6}
}
@media(max-width:720px) and (max-height:700px){
  .ob-mobile .ob-plan .ob-price{font-size:29px;margin-top:9px}
}
.ob-trial-scene{height:160px;position:relative;background:#eeeada;border-radius:18px;overflow:hidden;margin-bottom:12px}
.ob-scene-mark{position:absolute;right:8px;top:-38px;font-size:210px;line-height:1.2;color:#d9ddca;transform:rotate(12deg)}
.ob-trial-bubble,.ob-trial-reply{position:absolute;padding:13px 17px;border-radius:14px 14px 14px 3px;box-shadow:0 5px 14px #233d3110;transform:rotate(-3deg);background:#fffdf5;left:18px;top:20px}
.ob-trial-bubble b,.ob-trial-reply b{display:block;font-size:24px;font-weight:500}.ob-trial-bubble span,.ob-trial-reply span{display:block;font-size:10px;margin-top:4px}
.ob-trial-reply{left:auto;right:20px;top:80px;transform:rotate(4deg);background:#254c3e;color:#fff8e8;border-radius:14px 14px 3px 14px;padding:10px 20px}
.ob-trial-caption{font-size:11px;letter-spacing:.4px;color:#6a7163;text-align:center}
@media(max-width:720px){
.ob-mobile[data-step="9"] h1{font-size:29px;line-height:1.12;margin-bottom:18px}
.ob-mobile[data-step="9"] .ob-mobile-footer .ob-share{border:0;text-decoration:underline;text-underline-offset:4px;min-height:36px;margin-top:3px}
.ob-mobile[data-step="9"] .ob-mobile-footer .ob-note{font-size:10px}
}
@media(max-width:720px) and (max-height:700px){.ob-trial-scene{height:140px}.ob-trial-reply{top:64px}.ob-mobile[data-step="9"] h1{font-size:27px;margin-bottom:14px}}


@media(max-width:360px) and (max-height:700px){
.ob-mobile h1{font-size:26px}.ob-mobile .ob-lead{font-size:12px;margin-bottom:10px}
.ob-mobile .ob-week-days{display:none}.ob-mobile .ob-week{padding:12px;margin-top:12px}.ob-mobile .ob-week>small{margin-top:8px}
.ob-mobile .ob-pass{padding:14px}.ob-mobile .ob-pass-header{margin-bottom:8px;padding-bottom:8px}.ob-mobile .ob-pass-stamp{width:34px;height:34px;font-size:20px}
.ob-mobile .ob-tags{gap:4px;margin-top:8px}.ob-mobile .ob-tags span{padding:5px 6px;font-size:9px}
.ob-mobile .ob-pass p{margin:7px 0;line-height:1.5}.ob-mobile[data-step="8"] .ob-lead{display:none}
.ob-mobile .ob-review blockquote{font-size:16px}.ob-mobile .ob-review{padding:12px}.ob-mobile .ob-proof-strip{padding:8px;margin-top:8px}
.ob-mobile .ob-proof h2{font-size:26px;margin:14px 0}.ob-mobile .ob-gauge-card{padding:10px}.ob-mobile .ob-proof-tile{padding:10px}.ob-mobile .ob-proof-footnote{margin-top:10px}
.ob-mobile[data-step="9"] .ob-pay-list{line-height:1.8}.ob-mobile[data-step="9"] h1{font-size:25px}
}


.ob-chat .ob-audio + .ob-audio{margin-left:12px}
@media(max-width:360px) and (max-height:700px){.ob-mobile .ob-proof .ob-gauge{width:90px;height:90px}.ob-mobile .ob-proof .ob-gauge-value{font-size:31px}.ob-mobile .ob-proof .ob-proof-number{font-size:28px}.ob-mobile .ob-proof .ob-mini-bars{height:22px}.ob-mobile .ob-chat .ob-audio{font-size:10px}.ob-mobile .ob-chat .ob-audio + .ob-audio{margin-left:8px}}

.ob-audio-actions{display:flex;gap:10px;align-items:center}.ob-chat .ob-audio-actions .ob-audio{margin-left:0;font-size:11px}
@media(max-width:360px) and (max-height:700px){
.ob-mobile .ob-stage.ob-proof{padding:8px 14px!important}.ob-mobile .ob-proof .ob-mini-bars{display:none}.ob-mobile .ob-proof .ob-gauge-copy p{display:none}
.ob-mobile[data-step="9"] .ob-trial-scene{height:120px}.ob-mobile[data-step="9"] .ob-trial-reply{top:48px}
.ob-mobile[data-step="7"] .ob-chat{padding:10px}.ob-mobile[data-step="7"] .ob-chat-hz{font-size:23px}.ob-mobile[data-step="7"] .ob-chat-header{font-size:10px}
}