/* 听写 practice — design tokens (docs/design/README.md), then components. No inline styles: the CSP blocks them. */
:root{
  --paper:#EEF6F1;--card:#FFFFFF;--ink:#1D2B36;--muted:#4F5F6B;--line:#D0E2D7;
  --grid:#2F9461;--grid-dash:rgba(47,148,97,.45);--grid-ink:#1E6B45;--mint-pill:#CDEFD9;
  --pencil:#F6C343;--pencil-shadow:#D9A51F;--pencil-ring:#FFF0BF;--on-pencil:#1D2B36;
  --good:#2F6FDB;--again:#C4570F;--badge:#E07A1F;--danger-text:#A8401A;
  --t0:#FFF4C7;--t1:#ECE6FF;--t2:#E2EFFF;--t3:#FFE7D6;--t4:#DDF3E6;
  --edge:#FFFFFF;--lift:rgba(29,43,54,.08);--bars:#5B4FC4;
  --off:#E1ECE5;--track-off:#B9CCC1;--row-line:#E4EEE8;--row-past:#F6FAF7;--row-on:#DDF3E6;
  --tip:#FFF7DB;--scrim:rgba(29,43,54,.5);--solid:#1D2B36;--on-solid:#FFFFFF;
  --again-ring:#F2A64B;--face-off:#6E7F8A;--star-off:#DCE8E1;--star-off-line:#B9CCC1;
  --kai:"Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC","Songti SC",serif;
  --ui:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --tabbar:86px;
  color-scheme:light;
}
/* Dark theme is opt-in (Parent corner → Dark theme), not tied to the device setting:
   the kid view should look like the mint exercise-book mockups by default. */
:root[data-theme="dark"]{
  --paper:#0F1A15;--card:#1A2620;--ink:#E8F0EB;--muted:#A6B6AD;--line:#30423A;
  --grid:#5BC08C;--grid-dash:rgba(91,192,140,.45);--grid-ink:#86D9AE;--mint-pill:#24432F;
  --pencil:#F6C343;--pencil-shadow:#B88A12;--pencil-ring:#4A3F17;--on-pencil:#1D2B36;
  --good:#3D7EE8;--again:#E07A1F;--badge:#E07A1F;--danger-text:#F59A6B;
  --t0:#3A3421;--t1:#2D2944;--t2:#1E2E43;--t3:#3D2C22;--t4:#1E3A2B;
  --edge:#2A3A31;--lift:rgba(0,0,0,.35);--bars:#C3B9FF;
  --off:#2A3830;--track-off:#4C5F55;--row-line:#2C3D34;--row-past:#16211B;--row-on:#1E3A2B;
  --tip:#332D17;--scrim:rgba(0,0,0,.62);--solid:#E8F0EB;--on-solid:#0F1A15;
  --again-ring:#E07A1F;--face-off:#9DB0A6;--star-off:#2A3830;--star-off-line:#4C5F55;
  color-scheme:dark;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.45;
  padding-top:env(safe-area-inset-top,0px);-webkit-tap-highlight-color:transparent}
body:has(dialog[open]){overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
svg{display:block;flex:none}
:focus-visible{outline:4px solid var(--grid);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[lang="zh-CN"]{font-family:inherit}

.banner{background:var(--tip);border:1.5px solid var(--pencil);border-radius:14px;padding:10px 14px;margin:0 0 16px;font-size:15px;font-weight:500}
.loading{color:var(--muted);padding:40px 0;text-align:center}

/* ---------- app bar, tabs (bottom bar on phones, segmented pill from 768px) ---------- */
.logo,.pc-btn.pill{display:none}
.main{max-width:1200px;margin:0 auto;padding:22px 20px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom,0px))}
body.full .main{padding-bottom:28px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  min-height:var(--tabbar);padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
body.full .tabs{display:none}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:64px;padding:0;border:none;border-radius:16px;background:none;color:var(--muted)}
.tab-ic{width:56px;height:32px;border-radius:999px;display:grid;place-items:center}
.tab-cn{font-size:15px;font-weight:700;line-height:1.2}
.tab-en{font-size:11px;font-weight:600;line-height:1}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"] .tab-ic{background:var(--mint-pill);color:var(--grid-ink)}
.tab[aria-current="page"] .tab-cn{font-weight:800}
/* Badge: spec orange #E07A1F; dark ink text because white on that orange is only 3:1. */
.badge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--badge);color:#1D2B36;font-size:11px;font-weight:800;line-height:18px;text-align:center}

@media (min-width:768px){
  .appbar{background:var(--card);border-bottom:1px solid var(--line)}
  .appbar-in{max-width:1200px;margin:0 auto;padding:12px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
  .logo{display:flex;align-items:center;gap:10px}
  .logo-box{width:40px;height:40px;border:2.5px solid var(--grid);border-radius:10px;display:grid;place-items:center;font-family:var(--kai);font-size:26px;line-height:1}
  .logo-txt{font-size:20px;font-weight:800}
  .tabs{position:static;display:flex;gap:4px;min-height:0;padding:4px;background:var(--paper);border:none;border-radius:999px}
  .tab{flex-direction:row;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px}
  .tab-ic{display:none}
  .tab-cn{font-size:18px}
  .tab-en{font-size:14px;line-height:1.2}
  .tab[aria-current="page"]{background:var(--card)}
  .badge{position:static;min-width:20px;height:20px;line-height:20px;font-size:12px}
  .pc-btn.pill{display:flex}
  .main{padding:28px 32px 40px}
}
/* iPad portrait: logo square only, so logo + tabs + Parent corner fit on one row */
@media (min-width:768px) and (max-width:1023px){
  .logo-txt{display:none}
  .tab{padding:0 16px}
}

/* ---------- Parent corner opener (gear) ---------- */
.pc-gear{grid-area:gear;display:flex;flex-direction:column;align-items:center;gap:2px}
.pc-btn{position:relative;border:none;background:var(--card);color:var(--muted);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.pc-btn.round{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}
.pc-btn.pill{min-height:48px;padding:0 16px 0 12px;border-radius:999px;border:2px solid var(--line);align-items:center;gap:8px;font-size:15px;font-weight:700}
.gear-ic{position:relative;display:grid;place-items:center}
.pc-cap{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.cap-coarse,.cap-hint{display:none}
@media (pointer:coarse){.cap-fine{display:none}.cap-coarse{display:inline}}
.hint .cap-fine,.hint .cap-coarse{display:none}
.hint .cap-hint{display:inline;color:var(--grid-ink);font-weight:800}
.ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.gear-ic .ring{inset:-8px;width:40px;height:40px}
.ring circle{fill:none;stroke:var(--grid);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.pc-btn.holding .ring circle{opacity:1;animation:ring-fill 1.5s linear forwards}
@keyframes ring-fill{to{stroke-dashoffset:0}}
@media (min-width:768px){.pc-gear{display:none}} /* the app bar's pill takes over */

/* ---------- page heading ---------- */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main gear" "strip strip";align-items:start;column-gap:12px}
.top-main{grid-area:main;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pill-week{background:var(--card);color:var(--grid-ink);font-size:13px;font-weight:700;padding:2px 12px;border-radius:999px}
.title{margin:4px 0 0;font-family:var(--kai);font-weight:500;font-size:clamp(30px,10.5vw,42px);line-height:1.1;overflow-wrap:anywhere}
.sub{margin:0;font-size:17px;font-weight:700}
.date{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:16px;font-weight:600}
.d-long{display:none}
.when{background:var(--pencil);color:var(--on-pencil);padding:0 10px;border-radius:999px;font-size:13px;font-weight:700}
.when.past{background:transparent;border:1.5px solid var(--line);color:var(--muted)}

.stickers{grid-area:strip;margin-top:14px;background:var(--card);border-radius:18px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.stk-label{font-size:13px;font-weight:500;color:var(--muted);line-height:1.15;flex:none}
.stk-label b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.stk-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.stk{width:26px;height:26px;border-radius:50%;background:var(--off);display:grid;place-items:center;color:#FFFFFF}
.stk.now{background:var(--card);border:2px dashed var(--grid)}
.stk.got{background:var(--pencil)}
.stk.perfect{box-shadow:0 0 0 3px var(--pencil-ring)}

.howto{margin:16px 0 14px;font-size:15px;font-weight:600;color:var(--muted)}
.howto-cn{font-family:var(--kai);font-size:20px;font-weight:500;color:var(--ink)}

@media (min-width:768px){
  .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
  .pill-week{font-size:14px;padding:3px 14px}
  .title{margin-top:8px;font-size:56px}
  .date{font-size:18px;gap:4px 10px}
  .d-short{display:none}.d-long{display:inline}
  .when{font-size:14px;padding:0 12px}
  .stickers{margin:0;padding:10px 16px;gap:12px}
  .stk-label{font-size:15px}
  .stk-label b{display:inline;font-size:15px}
  .stk{width:30px;height:30px}
  .howto{margin:22px 0 18px;font-size:16px}
  .howto-cn{font-size:22px}
}

/* ---------- word cards with 田字格 ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* .word is the card; .word-main (the whole card) plays the word; .more opens the picture card. */
.word{--box-max:56px;position:relative;container-type:inline-size;display:flex;min-width:0;border-radius:24px;border:2px solid var(--edge);
  background:var(--t0);box-shadow:0 3px 0 var(--lift);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.word.t1{background:var(--t1)}.word.t2{background:var(--t2)}.word.t3{background:var(--t3)}.word.t4{background:var(--t4)}
.word-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 8px 12px;
  border:none;border-radius:22px;background:none;color:inherit}
.word-main:has(.card-pic){justify-content:flex-start;padding-top:8px}
.word-main:focus-visible{outline:none}
.word:has(.word-main:focus-visible){outline:4px solid var(--grid);outline-offset:2px}
.word:has(.word-main:active){transform:scale(.97)}
.word.speaking{border-color:var(--pencil);box-shadow:0 0 0 1px var(--pencil),0 6px 0 rgba(246,195,67,.55);transform:scale(1.03)}
.card-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--card);margin-bottom:2px}
.card-pic.emoji{display:grid;place-items:center;font-size:clamp(34px,28cqi,60px);line-height:1}
.more{position:absolute;top:2px;right:2px;min-width:48px;height:48px;padding:6px;border:none;background:none;display:grid;place-items:center}
.more-pill{padding:2px 9px;border-radius:999px;background:#FFFFFF;color:#1D2B36;font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 1px 3px rgba(29,43,54,.2)}
.more:focus-visible{outline:none}
.more:focus-visible .more-pill{outline:3px solid var(--grid);outline-offset:1px}
.bars{position:absolute;left:12px;top:12px;display:none;align-items:flex-end;gap:3px;height:26px;padding:4px 6px;border-radius:8px;background:#FFFFFF}
.bars span{width:4px;height:18px;border-radius:2px;background:var(--bars);transform-origin:bottom;animation:bar .9s ease-in-out infinite}
.bars span:nth-child(2){animation-delay:-.3s}
.bars span:nth-child(3){animation-delay:-.6s}
.word.speaking .bars{display:flex}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* Boxes shrink to fit the card: --n is the character count, 100cqi the card's width. */
.boxes{--n:2;--box:min(var(--box-max,56px),calc((100cqi - 24px) / var(--n)));display:flex;justify-content:center}
.boxes.n1{--n:1}.boxes.n3{--n:3}.boxes.n4{--n:4}.boxes.n5{--n:5}.boxes.n6{--n:6}.boxes.n7{--n:7}.boxes.n8{--n:8}
.tzg{position:relative;display:grid;place-items:center;width:var(--box);height:var(--box);border:2px solid var(--grid);background:var(--card);
  font-family:var(--kai);font-size:calc(var(--box) * .75);line-height:1;color:var(--ink)}
.tzg+.tzg{border-left:none}
.tzg::before,.tzg::after{content:"";position:absolute;pointer-events:none}
.tzg::before{left:50%;top:0;bottom:0;border-left:1.5px dashed var(--grid-dash)}
.tzg::after{top:50%;left:0;right:0;border-top:1.5px dashed var(--grid-dash)}
.tzg>span{position:relative;z-index:1}
.py{font-size:18px;font-weight:700;line-height:1.2;text-align:center}
.en{font-size:14px;font-weight:600;line-height:1.2;color:var(--muted);text-align:center}
.miss{font-size:13px;font-weight:700;color:var(--again)}

/* Play all / Practise tile: last cell of the grid */
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;padding:12px;border:none;border-radius:24px;
  background:var(--pencil);box-shadow:0 4px 0 var(--pencil-shadow);color:var(--on-pencil);transition:transform .1s ease,box-shadow .1s ease}
.tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pencil-shadow)}
.tile-ic{width:58px;height:58px;border-radius:50%;background:#FFFFFF;color:#1D2B36;display:grid;place-items:center}
.tile-cn{font-size:20px;font-weight:800;line-height:1.1}
.tile-en{font-size:14px;font-weight:600;line-height:1.2}

@media (min-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px}
  .word{--box-max:70px;border-radius:28px;box-shadow:0 4px 0 var(--lift)}
  .word-main{gap:8px;padding:22px 10px 16px;border-radius:26px}
  .word-main:has(.card-pic){padding-top:10px}
  .card-pic{border-radius:18px}
  .more{top:4px;right:4px}
  .more-pill{font-size:13px;padding:3px 10px}
  .py{font-size:21px}
  .en{font-size:15px}
  .tile{min-height:180px;border-radius:28px;box-shadow:0 5px 0 var(--pencil-shadow);gap:6px}
  .tile-ic{width:64px;height:64px}
  .tile-cn{font-size:22px}
  .tile-en{font-size:15px}
}

/* ---------- Parent corner: bottom sheet on phones, centred dialog from 768px ---------- */
.pc{padding:0;border:none;background:var(--card);color:var(--ink);width:100%;max-width:100%;max-height:calc(100dvh - 48px);margin:auto 0 0;
  border-radius:28px 28px 0 0;overflow:auto;overscroll-behavior:contain}
.pc::backdrop{background:var(--scrim)}
.pc[open]{animation:sheet-up .22s ease-out}
@keyframes sheet-up{from{transform:translateY(32px);opacity:0}}
.pc-in{display:flex;flex-direction:column;gap:14px;padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.pc-grab{align-self:center;width:44px;height:5px;border-radius:999px;background:var(--line)}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-head h2{margin:0;font-size:24px;font-weight:800;line-height:1.15}
.pc-head p{margin:0;font-size:14px;font-weight:500;color:var(--muted)}
.pc-x{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:var(--paper);display:grid;place-items:center}
.pc-sec h3{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--muted)}
.pc-lists{display:flex;flex-direction:column;gap:6px}
.pc-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:4px 14px;border-radius:14px;border:2px solid var(--row-line);background:var(--card);text-align:left}
.pc-row.past{background:var(--row-past);color:var(--muted)}
.pc-row[aria-pressed="true"]{border-color:var(--grid);background:var(--row-on);color:var(--ink)}
.pc-row[aria-pressed="true"] .pc-d{font-weight:800}
.pc-d{flex:none;min-width:84px;font-size:15px;font-weight:700;white-space:nowrap}
.pc-t{flex:1;min-width:0;font-family:var(--kai);font-size:19px}
.pc-star{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pencil);color:#FFFFFF;display:grid;place-items:center}
.nx-tag{flex:none;background:var(--pencil);color:var(--on-pencil);padding:0 10px;border-radius:999px;font-size:12px;font-weight:800}
.pc-more{min-height:44px;border:none;background:none;font-size:14px;font-weight:700;color:var(--grid-ink)}
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 12px;border:none;border-radius:14px;background:var(--paper);font-size:15px;font-weight:700;text-align:left}
.sw-track{flex:none;position:relative;width:40px;height:24px;border-radius:999px;background:var(--track-off);transition:background-color .15s ease}
.sw-knob{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;transition:transform .15s ease}
.sw[aria-checked="true"] .sw-track{background:var(--grid)}
.sw[aria-checked="true"] .sw-knob{transform:translateX(16px)}
.pc-tip{background:var(--tip);border-radius:16px;padding:10px 14px;font-size:14px;font-weight:500;line-height:1.45}
.pc-tip b{display:block;font-weight:800}
.pc-tip p{margin:0}
.pc-tip.home{background:var(--row-on)}
.pc-tip p b{display:inline;font-weight:800}
.share-ic{display:inline-block;vertical-align:-3px;color:var(--good)}
.pc-clear{min-height:44px;border:none;background:none;font-size:15px;font-weight:700;color:var(--danger-text)}
.pc-clear:disabled{color:var(--muted)}
@media (min-width:768px){
  .pc{margin:auto;width:calc(100% - 64px);max-width:560px;max-height:calc(100dvh - 64px);border-radius:28px}
  .pc-grab{display:none}
  .pc-in{padding:20px 24px 20px}
}

/* ---------- empty states ---------- */
.panel{background:var(--card);border-radius:24px;padding:22px 18px;text-align:center}
.panel p{margin:6px auto;max-width:46ch}
.count{font-size:18px;font-weight:700;margin:0}
.muted{color:var(--muted);font-size:15px}

/* ---------- Learn extras: One by one, keyboard hints ---------- */
.learn-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:16px 0 14px}
.learn-bar .howto{margin:0}
.onebyone{min-height:48px;padding:0 18px 0 12px;border-radius:999px;border:2px solid var(--line);background:var(--card);display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.onebyone [lang]{font-size:17px;font-weight:800}
.keys{display:none;list-style:none;margin:28px 0 0;padding:0;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;font-size:15px;font-weight:600;color:var(--muted)}
.keys li{display:flex;align-items:center;gap:6px}
.keys li kbd:last-of-type{margin-right:2px}
kbd{min-width:30px;height:30px;padding:0 10px;border:2px solid var(--track-off);border-bottom-width:4px;border-radius:8px;background:var(--card);display:inline-grid;place-items:center;font:inherit;font-size:13px;font-weight:800;color:var(--ink)}
@media (min-width:768px){.learn-bar{margin:22px 0 18px}}
@media (min-width:768px) and (hover:hover) and (pointer:fine){.keys{display:flex}}

/* ---------- full-screen flows (dictation, check, well done, focus): no app bar, no tab bar ---------- */
body.full .appbar{display:none}
body.full .main{max-width:none;padding:0}
.screen{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:18px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.screen-foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.round-btn{flex:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--card);color:var(--muted);display:grid;place-items:center}
.big-btn{width:100%;min-height:66px;padding:8px 20px;border-radius:999px;border:none;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .1s ease,box-shadow .1s ease}
.big-btn.yellow{background:var(--pencil);color:var(--on-pencil);box-shadow:0 5px 0 var(--pencil-shadow)}
.big-btn.yellow:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--pencil-shadow)}
.big-btn.dark{background:var(--solid);color:var(--on-solid)}
.big-btn.dark svg{color:var(--pencil)}
.big-btn.white{min-height:56px;background:var(--card);border:2px solid var(--line);color:var(--ink)}
.big-btn:disabled{opacity:.45;box-shadow:none}
.bb-cn{font-size:22px;font-weight:800;line-height:1.1}
.bb-en{font-size:16px;font-weight:600}
.big-btn.dark .bb-en{opacity:.85}
.big-btn.white .bb-cn{font-size:18px}
.big-btn.white .bb-en{color:var(--muted)}

/* Dictation start (Dictation tab) */
.start{max-width:520px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.start-btn svg{width:26px;height:26px}
.start-note{margin:0;font-size:15px;font-weight:600;color:var(--muted)}

/* Dictation in progress (mockup 2) */
.d-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d-title{min-width:0;font-family:var(--kai);font-size:24px;text-align:center}
.d-count{min-width:48px;text-align:right;font-size:18px;font-weight:800}
.d-count span{color:var(--muted);font-weight:600}
.stones{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:8px}
.stone{flex:none;width:30px;height:30px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:#FFFFFF}
.stone.done{background:var(--grid)}
.stone.now{width:34px;height:34px;border:4px solid var(--pencil);background:var(--card)}
.link{flex:0 1 26px;min-width:6px;height:4px;background:var(--line)}
.link.done{background:var(--grid)}
.stones.many .stone{width:20px;height:20px}
.stones.many .stone.now{width:24px;height:24px;border-width:3px}
.stones.many .stone svg{width:11px;height:11px}
.d-head{margin-top:26px;text-align:center}
.d-cn{margin:0;font-family:var(--kai);font-size:34px;line-height:1.2}
.d-en{margin:0;font-size:16px;font-weight:600;color:var(--muted)}
.hear{margin:26px auto 0;padding:0;border:none;border-radius:28px;background:none;color:var(--ink);display:flex;flex-direction:column;align-items:center}
.hear-disc{width:176px;height:176px;margin:0 0 20px;border-radius:50%;background:var(--pencil);color:var(--on-pencil);display:grid;place-items:center;
  box-shadow:0 8px 0 var(--pencil-shadow),0 0 0 14px rgba(246,195,67,.25);transition:transform .1s ease,box-shadow .1s ease}
.hear:active .hear-disc{transform:translateY(4px);box-shadow:0 4px 0 var(--pencil-shadow),0 0 0 14px rgba(246,195,67,.25)}
.hear.speaking .hear-disc{animation:halo 1.1s ease-in-out infinite}
@keyframes halo{50%{box-shadow:0 8px 0 var(--pencil-shadow),0 0 0 24px rgba(246,195,67,.16)}}
.hear-cn{font-size:22px;font-weight:800;line-height:1.15}
.hear-en{font-size:14px;font-weight:600;color:var(--muted)}
.d-boxes{width:100%;margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:8px;container-type:inline-size}
.d-boxes .boxes{--box:min(92px,calc((100cqi - 8px) / var(--n)))}
.d-boxes .tzg{border-width:2.5px}
.d-n{font-size:14px;font-weight:600;color:var(--muted)}
@media (max-height:740px){
  .hear-disc{width:132px;height:132px;margin-bottom:16px}
  .hear-disc svg{width:64px;height:64px}
  .d-head,.hear,.d-boxes{margin-top:16px}
  .d-boxes .boxes{--box:min(76px,calc((100cqi - 8px) / var(--n)))}
}

/* Check your paper (mockup 3) */
.c-head{position:relative;text-align:center}
.c-x{position:absolute;left:0;top:0}
.c-cn{margin:0;padding:0 56px;font-family:var(--kai);font-weight:500;font-size:38px;line-height:1.15}
.c-en{margin:0;font-size:17px;font-weight:700}
.c-how{margin:6px 0 0;font-size:14px;font-weight:500;color:var(--muted)}
.c-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.c-row{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:20px;background:var(--card)}
.c-row.again{box-shadow:inset 0 0 0 2px var(--again-ring)}
.c-say{flex:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--paper);color:var(--ink);display:grid;place-items:center}
.c-say.speaking{background:var(--pencil);color:var(--on-pencil)}
.c-word{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.c-hz{font-family:var(--kai);font-size:32px;overflow-wrap:anywhere}
.c-py{font-size:14px;font-weight:600;color:var(--muted)}
.c-faces{flex:none;display:flex;gap:8px}
.face{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--face-off);display:grid;place-items:center}
.face.good[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#FFFFFF}
.face.again[aria-pressed="true"]{background:var(--again);border-color:var(--again);color:#FFFFFF}
.c-count{margin:0;font-size:15px;font-weight:600;color:var(--muted)}

/* Well done + sticker book (mockup 4) */
.welldone{position:relative;align-items:center;text-align:center;padding-top:30px}
.confetti{position:absolute;inset:0;pointer-events:none}
.cf{position:absolute;border-radius:4px;animation:cf-in .9s ease-out both}
.cf.c1{left:34px;top:40px;width:12px;height:22px;background:#F2A64B;rotate:-24deg}
.cf.c2{left:82px;top:110px;width:10px;height:10px;border-radius:50%;background:#2F6FDB;animation-delay:.1s}
.cf.c3{right:44px;top:52px;width:12px;height:22px;background:#9B8CF0;rotate:30deg;animation-delay:.05s}
.cf.c4{right:88px;top:128px;width:10px;height:10px;border-radius:50%;background:#2F9461;animation-delay:.15s}
.cf.c5{right:26px;top:190px;width:10px;height:18px;background:#F6C343;rotate:-12deg;animation-delay:.2s}
.cf.c6{left:22px;top:200px;width:9px;height:9px;border-radius:50%;background:#E5533D;animation-delay:.12s}
@keyframes cf-in{from{translate:0 -40px;opacity:0}}
.wstars{position:relative;display:flex;gap:6px;align-items:flex-end;justify-content:center}
.ws svg{fill:var(--star-off);stroke:var(--star-off-line)}
.ws.on svg{fill:var(--pencil);stroke:#C98F00}
.ws.on{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.ws.s1{animation-delay:.08s}.ws.s2{animation-delay:.16s}.ws.s3{animation-delay:.24s}.ws.s4{animation-delay:.32s}
@keyframes pop{from{scale:.3;opacity:0}}
.wd-cn{position:relative;margin:10px 0 0;font-family:var(--kai);font-weight:500;font-size:54px;line-height:1.1}
.wd-en{position:relative;margin:0;font-size:20px;font-weight:700}
.scard{position:relative;width:100%;margin-top:22px;padding:18px 18px 20px;border-radius:26px;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:14px}
.sc-head{display:flex;align-items:center;gap:16px;text-align:left}
.sticker-new{flex:none;width:78px;height:78px;border-radius:50%;background:var(--pencil);color:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;rotate:-8deg}
.sticker-new.perfect{box-shadow:0 0 0 6px var(--pencil-ring)}
.sticker-new span{font-family:var(--kai);font-size:18px;line-height:1;color:var(--on-pencil)}
.sticker-new.pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1) .35s both}
.sn-cn{margin:0;font-size:20px;font-weight:800}
.sn-en{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.sbook{list-style:none;width:100%;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sb{display:flex;flex-direction:column;align-items:center;gap:2px}
.sb-dot{width:52px;height:52px;border-radius:50%;border:2px dashed var(--track-off);display:grid;place-items:center;color:#FFFFFF}
.sb.got .sb-dot{border:none;background:var(--pencil)}
.sb.perfect .sb-dot{box-shadow:0 0 0 4px var(--pencil-ring)}
.sb-n{font-family:var(--kai);font-size:15px;color:var(--muted)}
.sb.got .sb-n{color:var(--ink)}
.wd-how{margin:0;text-align:center}

/* Focus mode, one word at a time (mockup 6) */
.focus{max-width:1200px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:16px;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.f-top{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"all . pc" "title title title";align-items:start;gap:8px}
.f-all{grid-area:all;min-height:48px;padding:0 18px 0 12px;border-radius:999px;border:none;background:var(--card);display:flex;align-items:center;gap:8px}
.f-all-cn{font-size:18px;font-weight:800}
.f-all-en{font-size:15px;font-weight:600;color:var(--muted)}
.f-title{grid-area:title;text-align:center;line-height:1.1}
.f-h{margin:0;font-family:var(--kai);font-weight:500;font-size:30px}
.f-date{margin:2px 0 0;font-size:15px;font-weight:600;color:var(--muted)}
.f-pc{grid-area:pc}
.f-stage{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"card card" "prev next";align-items:center;align-content:center;gap:16px;touch-action:pan-y}
.f-nav{width:64px;height:64px;border-radius:50%;border:none;display:grid;place-items:center;box-shadow:0 4px 0 var(--lift)}
.f-nav.prev{grid-area:prev;justify-self:start;background:var(--card);color:var(--ink)}
.f-nav.next{grid-area:next;justify-self:end;background:var(--solid);color:var(--pencil)}
.f-nav:disabled{opacity:.35;box-shadow:none}
.f-card{grid-area:card;justify-self:center;position:relative;width:100%;max-width:640px;container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 20px 26px;border-radius:32px;border:3px solid var(--edge);background:var(--t0);box-shadow:0 8px 0 var(--lift)}
.f-card.t1{background:var(--t1)}.f-card.t2{background:var(--t2)}.f-card.t3{background:var(--t3)}.f-card.t4{background:var(--t4)}
.f-card .boxes{--box:min(var(--fmax,140px),calc((100cqi - 48px) / var(--n)))}
.f-card .tzg{border-width:3px}
.f-card .tzg::before{border-left-width:2px}.f-card .tzg::after{border-top-width:2px}
.f-card .bars{left:auto;right:22px;top:22px}
.f-card.speaking .bars{display:flex}
.f-pic{display:block;height:160px;width:auto;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:var(--card)}
.f-pic.emoji{display:grid;place-items:center;font-size:96px;line-height:1}
.f-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.f-more{min-height:56px;margin-top:4px;padding:0 20px;border-radius:999px;border:2px solid var(--line);background:var(--card);display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.f-more [lang]{font-size:18px;font-weight:800}
.f-py{font-size:30px;font-weight:800;line-height:1.1;text-align:center}
.f-en{font-size:18px;font-weight:600;color:var(--muted);text-align:center}
.listen{min-height:64px;margin-top:4px;padding:0 28px 0 10px;border-radius:999px;border:none;background:var(--pencil);box-shadow:0 5px 0 var(--pencil-shadow);color:var(--on-pencil);display:flex;align-items:center;gap:12px}
.listen:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pencil-shadow)}
.listen-ic{width:46px;height:46px;border-radius:50%;background:#FFFFFF;color:#1D2B36;display:grid;place-items:center}
.listen-cn{font-size:22px;font-weight:800}
.listen-en{font-size:16px;font-weight:600}
.f-foot{display:flex;flex-direction:column;align-items:center;gap:12px}
.f-dots{order:-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.f-dots span{width:14px;height:14px;border-radius:999px;background:var(--track-off)}
.f-dots span.on{width:40px;background:var(--grid)}
.f-howto{margin:0;text-align:center}
.f-dict{min-height:56px;padding:0 22px;border-radius:999px;border:2px solid var(--ink);background:var(--card);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.f-dict [lang]{font-size:18px;font-weight:800}
@media (min-width:768px){
  .focus{padding:24px 32px 28px}
  .f-top{grid-template-columns:1fr auto 1fr;grid-template-areas:"all title pc";align-items:center}
  .f-all{justify-self:start;min-height:52px}
  .f-pc{justify-self:end}
  .f-pc .pc-btn.pill{min-height:52px;border:none}
  .f-h{font-size:34px}
  .f-stage{grid-template-columns:auto minmax(0,640px) auto;grid-template-areas:"prev card next";justify-content:center;gap:40px}
  .f-nav{width:84px;height:84px}
  .f-card{--fmax:200px;padding:30px 30px 34px;border-radius:40px}
  .f-pic{height:200px}
  .f-pic.emoji{font-size:120px}
  .f-py{font-size:40px}
  .f-en{font-size:20px}
  .listen{min-height:70px;padding:0 34px 0 12px}
  .listen-ic{width:50px;height:50px}
  .listen-cn{font-size:24px}
  .listen-en{font-size:17px}
  .f-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .f-dots{order:0}
  .f-howto{justify-self:start;text-align:left}
  .f-dict{justify-self:end}
}

/* Picture card (opened from a word card's "ⓘ more" or focus mode) */
.pv{max-width:1100px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.pv-how{margin:0;text-align:center}
.pv-stage{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"card card" "prev next";align-items:center;align-content:center;gap:16px;touch-action:pan-y}
.pv-card{grid-area:card;justify-self:center;position:relative;width:100%;max-width:900px;container-type:inline-size;display:flex;flex-direction:column;gap:14px;
  padding:12px 12px 18px;border-radius:32px;border:3px solid var(--edge);background:var(--t0);box-shadow:0 8px 0 var(--lift)}
.pv-card.t1{background:var(--t1)}.pv-card.t2{background:var(--t2)}.pv-card.t3{background:var(--t3)}.pv-card.t4{background:var(--t4)}
.pv-card .bars{left:auto;right:24px;top:24px}
.pv-card.speaking .bars{display:flex}
.pv-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;background:var(--card)}
.pv-pic.emoji{display:grid;place-items:center;font-size:clamp(80px,30cqi,150px);line-height:1}
.pv-info{min-width:0;display:flex;flex-direction:column;gap:14px}
.pv-word{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px}
.pv-word .boxes{--box:min(84px,calc((100cqi - 40px) / var(--n)))}
.pv-word .tzg{border-width:2.5px}
.pv-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.pv-py{font-size:26px;font-weight:800;line-height:1.1;text-align:center}
.pv-explain{margin:0 4px;font-size:17px;font-weight:600;line-height:1.45;text-align:center}
.pv-sent{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 14px 14px;border-radius:20px;background:var(--card);text-align:center}
.pv-s-cn{margin:0;font-family:var(--kai);font-size:26px;line-height:1.3}
.pv-s-py{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.sent-play{min-height:52px;margin-top:6px;padding:0 20px 0 7px;border-radius:999px;border:none;background:var(--solid);color:var(--on-solid);display:flex;align-items:center;gap:10px}
.sent-play .listen-ic{width:38px;height:38px}
.sent-play .listen-cn{font-size:18px}
.sent-play .listen-en{font-size:14px}
.sent-play.speaking{background:var(--pencil);color:var(--on-pencil)}
.pv-dots{order:0;margin-top:2px}
/* Phones: boxes and a compact Listen on one row, so prev/next stay on screen */
@media (max-width:767px){
  .pv-word .boxes{--box:min(64px,calc((100cqi - 40px) / var(--n)))}
  .pv-py{font-size:22px}
  .pv-word .listen{min-height:56px;padding:0 18px 0 6px}
  .pv-word .listen-en{display:none}
  .pv-card{gap:12px}
  .pv-explain{font-size:16px}
  .pv-s-cn{font-size:24px}
}
@media (min-width:768px){
  .pv{padding:24px 32px 28px}
  .pv-stage{grid-template-columns:auto minmax(0,900px) auto;grid-template-areas:"prev card next";justify-content:center;gap:28px}
  .pv-card{padding:16px 16px 22px}
}
/* Wide screens: picture on the left, word and sentence on the right */
@media (min-width:1000px){
  .pv-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;padding:18px 24px 18px 18px}
  .pv-card.no-pic{grid-template-columns:minmax(0,1fr)}
}

/* ---------- reduced motion: no bounce, no scaling, no confetti fall, still bars ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .word:has(.word-main:active),.word.speaking,.tile:active,.big-btn:active,.hear:active .hear-disc,.listen:active{transform:none !important}
  .bars span,.cf,.ws.on,.sticker-new.pop,.hear.speaking .hear-disc{animation:none !important}
  .bars span:nth-child(1){height:8px}.bars span:nth-child(3){height:12px}
  .pc[open]{animation:none}
  /* The hold ring is progress feedback, not decoration: keep it. */
  .pc-btn.holding .ring circle{animation:ring-fill 1.5s linear forwards !important}
}