:root{
    --bg:#FAF4EC;--ink:#2C1810;--ink-mid:#5A3D25;--ink-soft:#7A6048;--ink-faint:#B3A080;
    --primary:#FF8C42;--primary-deep:#D96420;
    --peach:rgba(255,175,115,.22);--peach-t:#C04010;
    --lav:rgba(190,165,255,.26);--lav-t:#5840C0;
    --mint:rgba(110,210,160,.24);--mint-t:#1A7040;
    --pink:rgba(255,150,190,.22);--pink-t:#B02560;
    --yellow:rgba(255,215,90,.30);--yellow-t:#8A5C10;
    --sky:rgba(125,190,255,.22);--sky-t:#1850A8;
    --line:rgba(180,140,90,.16);--card:rgba(255,250,244,.85);
    --disp:ui-rounded,-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
    --serif:Georgia,"Songti SC",serif;
    --body:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:var(--body);background:#D9D2C7;color:var(--ink);display:flex;justify-content:center;align-items:flex-start;padding:18px;line-height:1.5}
  .phone{width:100%;max-width:430px;height:812px;background:var(--bg);border-radius:38px;box-shadow:0 24px 60px -20px rgba(33,30,38,.45);overflow:hidden;position:relative;display:flex;flex-direction:column}
  .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pad{padding:8px 20px 26px}
  .topbar{display:flex;align-items:center;gap:12px;padding:20px 20px 6px}
  .hi{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.5px}
  .hi{color:var(--ink-mid)}
  .hi em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:30px;background:linear-gradient(100deg,#FFB060,#C084FC);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;text-transform:capitalize;word-spacing:-1px}
  .hi small{display:block;font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink-faint);letter-spacing:0;margin-top:2px}
  .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--lav),var(--pink));margin-left:auto;display:flex;align-items:center;justify-content:center;font-size:20px}
  .back{border:none;background:var(--card);color:var(--ink);width:40px;height:40px;border-radius:14px;font-size:18px;border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
  .back:active{transform:scale(.92)}
  .h1{font-family:var(--disp);font-weight:800;font-size:24px;padding:8px 20px 0;letter-spacing:-.4px}
  .sub{padding:2px 20px 0;font-size:13.5px;color:var(--ink-soft)}
  .sec{padding:18px 20px 4px;font-family:var(--disp);font-weight:700;font-size:16px}

  /* hero banner */
  .hero{margin:8px 20px 2px;background:var(--primary);color:#fff;border-radius:26px;padding:20px 20px 18px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}
  .hero:active{transform:scale(.985)}
  .blob{position:absolute;border-radius:50%;opacity:.5}
  .blob.a{width:130px;height:130px;background:#8a7cf0;right:-30px;top:-40px}
  .blob.b{width:80px;height:80px;background:#a99bf5;right:60px;bottom:-30px;opacity:.4}
  .hero h3{font-family:var(--disp);font-weight:800;font-size:21px;position:relative}
  .hero p{font-size:13px;color:#e4dffb;margin-top:3px;position:relative}
  .hero .pillbtn{margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--primary-deep);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;position:relative}
  .hero .bignum{position:absolute;right:20px;top:18px;font-family:var(--disp);font-weight:800;font-size:46px;color:rgba(255,255,255,.9)}

  /* book chips */
  .chips{display:flex;gap:9px;padding:16px 20px 6px;overflow-x:auto}
  .chip{border:none;background:var(--card);color:var(--ink-soft);padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid var(--line);transition:all .18s}
  .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

  /* ladder as colorful cards */
  .ladder{padding:6px 20px 22px;display:flex;flex-direction:column;gap:11px}
  .rung{display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .15s}
  .rung:active{transform:scale(.98)}
  .rnode{width:48px;height:48px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:18px}
  .rcard{flex:1;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px 16px}
  .rcard .t{font-weight:700;font-size:15.5px;display:flex;align-items:center;justify-content:space-between}
  .rcard .m{font-size:12.5px;color:var(--ink-faint);margin-top:3px}
  .bar{height:7px;background:#f0ece4;border-radius:4px;margin-top:9px;overflow:hidden}
  .bar>i{display:block;height:100%;border-radius:4px}
  .tag{font-size:11px;font-weight:800;padding:3px 9px;border-radius:9px}
  .rung.lock{opacity:.55}
  .unlock-card{margin:8px 20px 2px;background:var(--ink);color:#fff;border-radius:20px;padding:15px 17px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:transform .15s}
  .unlock-card:active{transform:scale(.985)}
  .unlock-card .ulock{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  .unlock-card h3{font-family:var(--disp);font-weight:800;font-size:15px}
  .unlock-card p{font-size:12.5px;color:#c9c4d4;margin-top:2px}
  .unlock-card .go{margin-left:auto;font-size:13px;color:var(--yellow);font-weight:800;white-space:nowrap}
  .rung.now .rcard{box-shadow:0 0 0 2px var(--yellow)}

  /* forecast */
  .forecast{display:flex;gap:11px;padding:14px 20px 2px}
  .fc{flex:1;border-radius:20px;padding:16px 12px;text-align:center}
  .fc b{font-family:var(--disp);font-weight:800;font-size:28px;display:block;line-height:1}
  .fc span{font-size:11.5px;font-weight:700;opacity:.7}
  .streak{margin:14px 20px 0;background:var(--yellow);color:var(--yellow-t);border-radius:18px;padding:14px 16px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
  .curve{margin:14px 20px 0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 16px 14px}
  .curve .h{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:14px}
  .steps{display:flex;align-items:flex-end;gap:8px;height:72px}
  .step{flex:1;border-radius:7px 7px 0 0;position:relative;background:var(--primary)}
  .step span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-faint);font-weight:700}
  .curve .cap{margin-top:28px;font-size:12.5px;color:var(--ink-soft)}

  /* big primary buttons */
  .navrow{display:flex;gap:11px;padding:14px 20px 24px}
  .btn{flex:1;border:none;border-radius:18px;padding:16px;font-size:15.5px;font-weight:800;cursor:pointer;font-family:var(--body);transition:transform .12s}
  .btn:active{transform:scale(.97)}
  .btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 24px -10px var(--primary)}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-mint{background:var(--mint);color:var(--mint-t)}
  .btn-pink{background:var(--pink);color:var(--pink-t)}
  .btn:disabled{opacity:.4;cursor:default;transform:none}

  /* study card */
  .dots{display:flex;gap:6px;justify-content:center;padding:6px 0 14px}
  .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .25s}
  .dots i.on{background:var(--primary);width:22px;border-radius:4px}
  .wordcard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px 22px;box-shadow:0 16px 36px -24px rgba(33,30,38,.4)}
  .pos{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--lav);color:var(--lav-t);padding:4px 10px;border-radius:9px;margin-bottom:12px}
  .theword{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1.04;letter-spacing:-1px}
  .def-en{font-size:15px;color:var(--ink-soft);margin-top:12px;font-style:italic}
  .def-zh{font-size:18px;font-weight:700;margin-top:5px}
  .divider{height:1px;background:var(--line);margin:18px 0}
  .fl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);font-weight:800;margin-bottom:8px}
  .eg{font-size:14.5px;padding:9px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px}
  .eg:last-child{border-bottom:none}.eg .q{color:var(--primary);font-weight:800;flex-shrink:0}.eg b{color:var(--primary-deep);font-weight:800}
  .pillrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
  .pill{font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}
  .pill.syn{background:var(--mint);color:var(--mint-t)}
  .pill.ant{background:var(--peach);color:var(--peach-t)}
  .mnem{margin-top:18px;background:var(--yellow);color:var(--yellow-t);border-radius:16px;padding:13px 15px;font-size:13.5px;font-weight:600}
  .mnem b{font-weight:800}

  /* quiz */
  .qbar{height:8px;background:#f0ece4;border-radius:5px;margin:6px 0 18px;overflow:hidden}.qbar>i{display:block;height:100%;background:var(--primary);transition:width .4s}
  .qtype{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);font-weight:800}
  .qstem{font-family:var(--disp);font-size:25px;font-weight:800;margin:8px 0 4px;line-height:1.25;letter-spacing:-.3px}
  .qstem .blank{color:var(--primary);border-bottom:3px solid var(--yellow);padding:0 14px}
  .reg .blank{display:inline-block;min-width:44px;color:var(--primary-deep);font-style:normal;font-weight:800;border-bottom:3px solid var(--yellow);text-align:center;padding:0 6px;margin:0 2px}
  .qhint{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}
  .opts{display:flex;flex-direction:column;gap:10px}
  .opt{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:15px 16px;font-size:15.5px;font-weight:700;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;transition:all .15s;font-family:var(--body);color:var(--ink)}
  .opt .k{width:27px;height:27px;border-radius:9px;background:#f0ece4;color:var(--ink-soft);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .opt.correct{border-color:var(--mint-t);background:var(--mint)}.opt.correct .k{background:var(--mint-t);color:#fff}
  .opt.wrong{border-color:var(--pink-t);background:var(--pink)}.opt.wrong .k{background:var(--pink-t);color:#fff}
  .opt.muted{opacity:.4}
  .fb{margin-top:16px;border-radius:14px;padding:13px 15px;font-size:14px;font-weight:700;display:none}.fb.show{display:block}
  .fb.ok{background:var(--mint);color:var(--mint-t)}.fb.no{background:var(--pink);color:var(--pink-t)}

  /* session flashcard */
  .stop{padding:18px 20px 0;display:flex;align-items:center;gap:12px}
  .sprog{flex:1}.sprog .qbar{margin:0}.sprog .lab{font-size:12px;color:var(--ink-faint);font-weight:700;margin-top:7px;display:flex;justify-content:space-between}
  .fcard{margin:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:26px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px;text-align:center;box-shadow:0 16px 36px -24px rgba(33,30,38,.4)}
  .fcard .fw{font-family:var(--disp);font-size:42px;font-weight:800;letter-spacing:-1px}
  .fcard .fpos{font-size:12px;color:var(--ink-faint);margin-top:6px}
  .fcard .rzh{font-size:20px;font-weight:700;margin-top:16px}
  .fcard .reg{font-size:14px;color:var(--ink-soft);margin-top:8px;font-style:italic}.fcard .reg b{color:var(--primary-deep);font-style:normal;font-weight:800}
  .tapnote{font-size:12.5px;color:var(--ink-faint);margin-top:18px}
  .rqt{position:absolute;left:50%;top:120px;transform:translateX(-50%);background:var(--pink-t);color:#fff;font-size:12.5px;font-weight:800;padding:8px 15px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:30}
  .rqt.show{opacity:1}

  /* result */
  .hero-r{text-align:center;padding:24px 0 6px}
  .ring{width:140px;height:140px;margin:6px auto 12px;position:relative}.ring svg{transform:rotate(-90deg)}
  .ring .sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring .sc b{font-family:var(--disp);font-size:38px;font-weight:800;line-height:1}.ring .sc span{font-size:12px;color:var(--ink-faint);font-weight:700}
  .hero-r h2{font-family:var(--disp);font-size:24px;font-weight:800}.hero-r p{font-size:14px;color:var(--ink-soft);margin-top:4px}
  .good{text-align:center;color:var(--mint-t);font-weight:700;font-size:14px;padding:14px;background:var(--mint);border-radius:16px;margin:14px 20px 0}

  /* notebook */
  .nbf{display:flex;gap:8px;padding:14px 20px 4px;overflow-x:auto}
  .nbf .chip{font-size:12.5px;padding:8px 14px}
  .nb{margin:8px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 15px;display:flex;align-items:center;gap:12px;border-left:5px solid var(--pink-t)}
  .nb.rec{border-left-color:var(--yellow-t)}.nb.ok{border-left-color:var(--mint-t);opacity:.7}
  .nb .w{font-family:var(--disp);font-size:18px;font-weight:800}
  .nb .d{font-size:13px;color:var(--ink-soft);margin-top:1px}
  .nbr{margin-left:auto;text-align:right;flex-shrink:0}
  .nbm{font-size:12px;font-weight:800;color:var(--pink-t)}
  .nbs{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:8px;margin-top:4px;display:inline-block}
  .s-bad{background:var(--pink);color:var(--pink-t)}.s-rec{background:var(--yellow);color:var(--yellow-t)}.s-ok{background:var(--mint);color:var(--mint-t)}

  /* AI teacher chat */
  .tchead{padding:18px 20px 10px;display:flex;align-items:center;gap:12px}
  .tchead .mochi{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#9d8ef5);display:flex;align-items:center;justify-content:center;font-size:22px}
  .tchead .ti{font-family:var(--disp);font-weight:800;font-size:18px}
  .tchead .ts{font-size:12px;color:var(--mint-t);font-weight:700;display:flex;align-items:center;gap:5px}
  .tchead .ts i{width:7px;height:7px;border-radius:50%;background:var(--mint-t);display:inline-block}
  .ctx{margin:0 20px 6px;background:var(--lav);color:var(--lav-t);border-radius:14px;padding:9px 14px;font-size:12.5px;font-weight:700}
  .msgs{padding:8px 16px 6px;display:flex;flex-direction:column;gap:11px}
  .row{display:flex;gap:9px;max-width:86%}
  .row.u{align-self:flex-end;flex-direction:row-reverse}
  .bub{padding:12px 15px;border-radius:18px;font-size:14.5px;line-height:1.45}
  .row.t .bub{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
  .row.u .bub{background:var(--primary);color:#fff;border-bottom-right-radius:6px}
  .row.t .mava{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#9d8ef5);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
  .typing .bub{display:flex;gap:4px}
  .typing .bub i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:bounce 1.2s infinite}
  .typing .bub i:nth-child(2){animation-delay:.15s}.typing .bub i:nth-child(3){animation-delay:.3s}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
  .tools{display:flex;gap:8px;padding:2px 16px 10px;overflow-x:auto}
  .tools .tool{flex-shrink:0;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:800;padding:9px 14px;border-radius:999px;cursor:pointer;font-family:var(--body);white-space:nowrap}
  .tools .tool:active{transform:scale(.94)}
  .reveal{display:inline-block;margin-top:8px;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:var(--body)}
  .reveal:active{transform:scale(.94)}
  .wchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
  .wchip{background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;font-family:var(--body)}
  .wchip:active{transform:scale(.94)}
  .inbar{display:flex;gap:9px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bg)}
  .inbar input{flex:1;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:13px 15px;font-size:15px;font-family:var(--body);outline:none}
  .inbar input:focus{border-color:var(--primary)}
  .inbar .send{width:48px;border:none;border-radius:16px;background:var(--primary);color:#fff;font-size:19px;cursor:pointer;flex-shrink:0}
  .inbar .send:active{transform:scale(.94)}

  /* tab bar */
  .tabbar{display:flex;border-top:1px solid var(--line);background:var(--card);padding-bottom:2px}
  .tab{flex:1;border:none;background:none;padding:10px 0 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-faint);font-family:var(--body);font-weight:700;font-size:10.5px;position:relative}
  .tab .ti2{font-size:20px;line-height:1}
  .tab.on{color:var(--primary)}
  .tab .dn{position:absolute;top:6px;left:54%;background:var(--pink-t);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}

  /* welcome / onboarding */
  .welcome{height:100%;display:flex;flex-direction:column;padding:0 26px;position:relative;overflow:hidden}
  .welcome .wb{position:absolute;border-radius:50%;opacity:.55}
  .wb1{width:200px;height:200px;background:var(--lav);top:-50px;right:-60px}
  .wb2{width:150px;height:150px;background:var(--peach);top:120px;left:-70px}
  .wb3{width:120px;height:120px;background:var(--mint);bottom:160px;right:-30px;opacity:.5}
  .welcome .wtop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
  .wmascot{width:108px;height:108px;border-radius:32px;background:none;display:flex;align-items:center;justify-content:center;margin-bottom:22px;overflow:hidden}
  .wmascot img{width:100%;height:100%;object-fit:contain;border-radius:32px}
  .wtitle{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-1px}
  .wtitle em{font-style:italic;color:var(--primary)}
  .wsub{font-size:15px;color:var(--ink-soft);margin-top:12px;max-width:280px}
  .wfree{margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--yellow-t);font-weight:800;font-size:12.5px;padding:7px 14px;border-radius:999px}
  .wbtns{padding:0 0 40px;position:relative}
  .wbtns .btn{width:100%;margin-bottom:10px}
  .wlink{text-align:center;font-size:13.5px;color:var(--ink-soft);font-weight:600;padding:4px}
  .wlink b{color:var(--primary);font-weight:800;cursor:pointer}

  /* name setup screen */
  .setup-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px 40px;gap:0;text-align:center;position:relative}
  .setup-back{position:absolute;top:20px;left:20px}
  .setup-mascot{width:90px;height:90px;border-radius:28px;overflow:hidden;margin-bottom:24px}
  .setup-mascot img{width:100%;height:100%;object-fit:contain}
  .setup-title{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--ink);margin-bottom:10px}
  .setup-sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:28px;line-height:1.5}
  .setup-input{width:100%;padding:16px 18px;border-radius:18px;border:2px solid var(--line);font-family:var(--body);font-size:18px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.85);outline:none;text-align:center;margin-bottom:16px;box-sizing:border-box;transition:border-color .15s}
  .setup-input:focus{border-color:var(--primary)}
  .setup-btn{width:100%;flex:none}
  .danger-link{margin-top:18px;font-size:13px;font-weight:700;color:var(--pink-t);opacity:.75;cursor:pointer;text-align:center}
  .danger-link:active{opacity:1}

  /* guest badge + lang toggle */
  .gbadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;background:var(--peach);color:var(--peach-t);margin-left:8px;vertical-align:middle}
  .gbadge.in{background:var(--mint);color:var(--mint-t)}
  .langrow{display:flex;align-items:center;gap:10px;padding:8px 20px 0}
  .langrow .lab{font-size:12.5px;color:var(--ink-soft);font-weight:700}
  .seg{margin-left:auto;display:inline-flex;background:#f0ece4;border-radius:12px;padding:3px}
  .seg button{border:none;background:none;font-family:var(--body);font-weight:800;font-size:12.5px;color:var(--ink-soft);padding:7px 13px;border-radius:9px;cursor:pointer}
  .seg button.on{background:#fff;color:var(--primary);box-shadow:0 2px 6px -2px rgba(33,30,38,.25)}
  .zh-hidden{display:inline-flex;align-items:center;gap:6px;background:#f0ece4;color:var(--ink-soft);font-size:13px;font-weight:700;padding:6px 12px;border-radius:10px;cursor:pointer;margin-top:5px}

  /* bottom sheet */
  #sheet{position:absolute;inset:0;z-index:50;display:none}
  #sheet.show{display:block}
  .sheet-mask{position:absolute;inset:0;background:rgba(33,30,38,.4);animation:fade .2s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .sheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:28px 28px 0 0;padding:24px 22px 28px;animation:slideup .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .sheet-card .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 16px}
  .sheet-card h3{font-family:var(--disp);font-weight:800;font-size:21px;text-align:center}
  .sheet-card p{font-size:13.5px;color:var(--ink-soft);text-align:center;margin-top:6px}
  .wx{background:#07C160;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
  .sheet-card .skip{text-align:center;font-size:13px;color:var(--ink-faint);font-weight:700;padding:8px;cursor:pointer}
  .cap-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 6px}
  .cap-chip{padding:12px 18px;font-size:14.5px}
  .cap-chip:active{transform:scale(.95)}
  .cap-btn{white-space:nowrap;flex-shrink:0}
  .cap-btn:active{transform:scale(.95)}

  /* word card cute extras */
  .wordcard{position:relative}
  .sticker{position:absolute;right:18px;top:-14px;font-size:40px;filter:drop-shadow(0 6px 10px rgba(33,30,38,.18))}
  .posrow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .star{background:none;border:none;font-size:22px;cursor:pointer;color:var(--yellow-t);line-height:1;padding:0;flex-shrink:0}
  .star:active{transform:scale(.85)}
  .wordrow{display:flex;align-items:center;gap:10px}
  .spk{border:none;background:var(--lav);color:var(--lav-t);width:38px;height:38px;border-radius:13px;font-size:18px;cursor:pointer;flex-shrink:0}
  .spk.sm{width:30px;height:30px;font-size:14px;border-radius:10px;vertical-align:middle}
  .spk:active{transform:scale(.9)}
  .ipa{font-size:14px;color:var(--ink-faint);font-weight:600;margin-top:4px;font-family:var(--body)}
  .formrow{display:flex;flex-wrap:wrap;gap:7px}
  .form{font-size:13px;font-weight:600;background:var(--sky);color:var(--sky-t);padding:5px 12px;border-radius:999px}
  .mochi-mini{font-size:16px;margin-right:2px}

  /* star pop reward */
  .starpop{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-size:64px;pointer-events:none;z-index:60;animation:pop .9s ease forwards}
  @keyframes pop{0%{transform:translate(-50%,0) scale(.2);opacity:0}30%{opacity:1;transform:translate(-50%,-20px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-90px) scale(1)}}

  /* spelling mode */
  .spwrap{padding:8px 20px 0}
  .spcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px 22px;text-align:center;box-shadow:0 16px 36px -24px rgba(33,30,38,.4)}
  .listen{width:66px;height:66px;border-radius:22px;border:none;background:var(--lav);color:var(--lav-t);font-size:30px;cursor:pointer;margin-bottom:12px}
  .listen:active{transform:scale(.92)}
  .spzh{font-size:19px;font-weight:800}
  .spcloze{font-size:13px;color:var(--ink-soft);margin-top:6px;font-style:italic}
  .slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 4px}
  .slot{width:34px;height:46px;border-radius:13px;background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:22px}
  .slot.cur{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.15)}
  .slot.ok{border-color:var(--mint-t);background:var(--mint);color:var(--mint-t)}
  .slot.no{border-color:var(--pink-t);background:var(--pink);color:var(--pink-t)}
  .spin{width:100%;border:2px solid var(--line);border-radius:15px;padding:13px 15px;font-size:18px;font-family:var(--body);text-align:center;outline:none;letter-spacing:3px;margin-top:10px}
  .spin:focus{border-color:var(--primary)}
  .sphint{background:none;border:none;color:var(--primary);font-weight:800;font-size:13px;cursor:pointer;margin-top:12px;font-family:var(--body)}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}


  /* ===================== CLAY LIGHT THEME ===================== */
  body{background:#E8DDD0;background-image:
    radial-gradient(900px 600px at 38% -8%,rgba(255,155,75,.22),transparent 65%),
    radial-gradient(700px 500px at 92% 105%,rgba(180,155,255,.16),transparent 60%);
    background-attachment:fixed;color:var(--ink)}
  .phone{background:linear-gradient(175deg,#FFFCF8 0%,#FAF4EA 58%,#F5EDE0 100%);
    box-shadow:0 0 0 1.5px rgba(200,155,90,.22),0 50px 100px -30px rgba(120,65,15,.28),0 0 80px -30px rgba(255,148,60,.14)}
  /* warm clay texture dots */
  .phone::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.4;
    background-image:
      radial-gradient(1.2px 1.2px at 22% 16%,rgba(200,130,60,.35),transparent),
      radial-gradient(1px 1px at 68% 28%,rgba(200,130,60,.28),transparent),
      radial-gradient(1px 1px at 42% 52%,rgba(200,130,60,.22),transparent),
      radial-gradient(1.3px 1.3px at 84% 64%,rgba(200,130,60,.30),transparent),
      radial-gradient(1px 1px at 12% 74%,rgba(200,130,60,.22),transparent),
      radial-gradient(1px 1px at 58% 84%,rgba(200,130,60,.25),transparent)}
  .scroll,.welcome{position:relative;z-index:1}
  #dock{position:relative;z-index:2}
  .scroll::-webkit-scrollbar{width:0}

  /* italic serif accent */
  em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
  .wtitle em{font-family:var(--disp);font-style:normal;font-weight:700;background:linear-gradient(to right,#FFB060,#C084FC);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}
  .hi,.wtitle,.theword,.fw,.qstem,.spzh,.sheet-card h3,.tchead .ti,.hero h3,.hero-r h2{color:var(--ink)}
  .wtitle,.theword,.fw{text-shadow:0 2px 14px rgba(200,110,30,.10)}

  /* glass surfaces */
  .rcard,.wordcard,.curve,.fcard,.spcard,.opt,.tools .tool,.wchip,.chip,.btn-ghost,.inbar input,.fc,.streak,.mnem,.fb,.sheet-card,.nb,.row.t .bub,.llcard{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .rcard,.curve,.fcard,.spcard,.opt{
    background:rgba(255,250,244,.82);border-color:rgba(200,155,90,.18);
    box-shadow:0 8px 28px -10px rgba(120,65,15,.13),0 3px 0 rgba(200,155,90,.18),inset 0 1px 0 rgba(255,255,255,.92)}

  /* progress bars */
  .bar,.qbar{background:rgba(200,155,90,.14)}
  .qbar>i,.bar>i{background:linear-gradient(90deg,#FF8C42,#FFB870)}
  /* controls */
  .opt .k{background:rgba(200,155,90,.16);color:#7A6048}
  .seg,.zh-hidden{background:rgba(200,155,90,.14);color:#7A6048}
  .seg button.on{background:#FFFCF7;color:#2C1810}

  /* === PRIMARY BUTTON: clay orange 3-D === */
  .btn-primary{background:linear-gradient(160deg,#FFA050 0%,#FF7820 100%);color:#fff;
    box-shadow:0 6px 0 rgba(180,58,10,.28),0 12px 28px -10px rgba(255,108,28,.42)}
  .btn-primary:active{box-shadow:0 2px 0 rgba(180,58,10,.28),0 6px 16px -8px rgba(255,108,28,.35);transform:translateY(3px)}
  .btn-mint{background:rgba(110,210,160,.22);color:#1A7040;border:1px solid rgba(90,195,145,.28)}
  .btn-pink{background:rgba(255,150,190,.20);color:#B02560;border:1px solid rgba(230,128,172,.26)}
  .chip.on{background:#2C1810;border:none;color:#FAF4EC}

  /* hero banner: stays warm-dark (contrast island) */
  .hero{background:linear-gradient(148deg,#3A2508 0%,#2A1A06 48%,#1C1004 100%);
    box-shadow:0 0 52px -18px rgba(255,140,48,.28),inset 0 1px 0 rgba(255,168,72,.08);
    border:1px solid rgba(255,150,55,.10)}
  .hero h3{font-size:22px;color:#F9EDD8}
  .hero p{color:#C8AA80}
  .hero .blob{opacity:.30;filter:blur(9px)}
  .hero .blob.a{background:#8C4A10}.hero .blob.b{background:#5C3010}
  .hero .pillbtn{background:#F9EDD8;color:#2C1810}
  .hero .bignum{color:rgba(249,237,216,.88);font-weight:700}

  /* labels */
  .qtype,.fl,.unlock-card p,.tchead .ts{letter-spacing:.6px}

  /* === WORD CARD: clay === */
  .wordcard{background:#FFFCF7;border:1.5px solid rgba(200,155,90,.20);border-radius:30px;
    box-shadow:0 18px 52px -18px rgba(120,65,15,.18),0 5px 0 rgba(200,148,80,.24),inset 0 1px 0 rgba(255,255,255,.96)}
  .pos{background:rgba(190,165,255,.28);color:#5840C0}
  .theword{color:#2C1810}
  .def-en{color:#7A6048}
  .def-zh{color:#2C1810}
  .divider{background:rgba(200,155,90,.18)}
  .fl{color:#B3A080}
  .eg{border-bottom-color:rgba(200,155,90,.16)}
  .eg .q{color:#FF8C42}.eg b{color:#D96420}
  .pill.syn{background:rgba(110,210,160,.24);color:#1A7040;border-color:rgba(90,195,145,.24)}
  .pill.ant{background:rgba(255,155,120,.22);color:#C04010;border-color:rgba(235,135,95,.22)}
  .mnem{background:rgba(255,215,90,.30);color:#7A5010;border:1.5px solid rgba(255,195,58,.28)}
  .mnem b{color:#5A3800}
  .spk,.listen{background:rgba(190,165,255,.22);color:#5840C0}
  .ipa{color:#B3A080}
  .form{background:rgba(125,190,255,.22);color:#1850A8;border-color:rgba(105,178,248,.22)}
  .star{color:#D96420}
  .dots i.on{background:#FF8C42}
  .qstem .blank{border-bottom-color:#FF8C42;color:#FF8C42}

  /* === WELCOME PAGE: clay warm === */
  .welcome{background:
    radial-gradient(700px 500px at 50% 8%,rgba(255,158,72,.24),transparent 64%),
    radial-gradient(580px 460px at 88% 90%,rgba(182,158,255,.20),transparent 62%),
    #FAF4EC}
  .welcome .wb{filter:blur(50px);opacity:.55}
  .wb1{background:#FFB060}.wb2{background:#C0A8F0}.wb3{background:#88D8A8}
  .wtitle{font-size:36px;color:#2C1810}
  .wmascot{background:linear-gradient(145deg,#FFE8C0,#FFD098);
    box-shadow:0 0 56px -10px rgba(255,138,48,.52),0 18px 36px -14px rgba(200,95,18,.24)}
  .wsub{color:#7A6048}
  .wfree{background:rgba(255,215,90,.30);color:#8A5C10;border:1px solid rgba(255,195,60,.36)}

  /* unlock card */
  .unlock-card{background:rgba(255,248,238,.78);border:1.5px solid rgba(200,155,90,.22);
    box-shadow:0 16px 40px -18px rgba(120,65,15,.18);color:#2C1810}
  .unlock-card h3{color:#2C1810}
  .unlock-card .ulock{background:rgba(255,148,60,.18)}.unlock-card p{color:#7A6048}
  .unlock-card .go{color:#FF8C42;font-weight:800}
  .btn-dark{background:rgba(44,24,16,.06);color:#2C1810;border:1.5px solid rgba(200,155,90,.22)}
  .pill,.form,.tag,.gbadge,.nbs{border:1px solid rgba(200,155,90,.12)}
  .step{background:linear-gradient(180deg,#FFA050,#D96420)}

  /* inputs */
  .spin,.inbar input{color:#2C1810;background:rgba(255,250,244,.85)}
  .spin::placeholder,.inbar input::placeholder{color:#B3A080}
  .spin:focus,.inbar input:focus{border-color:#FF8C42}
  .slot{background:rgba(200,155,90,.09)}
  .slot.cur{box-shadow:0 0 0 3px rgba(255,140,55,.22)}

  /* tab bar */
  .tabbar{background:rgba(255,250,244,.90);border-top:1.5px solid rgba(200,155,90,.20);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .tab{color:#B3A080}.tab.on{color:#FF8C42}

  /* bottom sheet */
  .sheet-card{background:linear-gradient(180deg,#FFFCF7,#FAF4EA);border:1.5px solid rgba(200,155,90,.22);border-bottom:none;box-shadow:0 -20px 60px -18px rgba(120,65,15,.22)}
  .sheet-mask{background:rgba(44,24,16,.38)}
  .inbar{background:rgba(255,250,244,.90);border-top:1.5px solid rgba(200,155,90,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

  /* mascot avatars */
  .ava{background:linear-gradient(145deg,#FFD8A0,#FFB870)}
  .tchead .mochi,.row.t .mava{background:linear-gradient(145deg,#FFD8A0,#FFB870)}
  .ava,.tchead .mochi{box-shadow:0 0 22px -8px rgba(255,140,48,.45)}

  /* chat */
  .row.t .bub{background:rgba(255,248,238,.88);border:1.5px solid rgba(200,155,90,.18)}
  .row.u .bub{background:#FF8C42;color:#fff}

  /* notebook */
  .nb{background:rgba(255,248,238,.82);border-left-color:#FF8C42}
  .nb.rec{border-left-color:#D4A010}.nb.ok{border-left-color:#1A7040}
  .nbm{color:#C04010}

  /* streak / forecast */
  .streak{background:rgba(255,215,90,.28);color:#7A5010}
  .fc{border:1.5px solid rgba(200,155,90,.18)}

  /* back button */
  .back{background:rgba(200,155,90,.12);border:1.5px solid rgba(200,155,90,.20);color:#2C1810}

  /* === share card modal === */
  #share-modal{position:absolute;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:flex-end}
  .sm-bg{position:absolute;inset:0;background:rgba(26,26,26,.55);backdrop-filter:blur(8px)}
  .sm-sheet{position:relative;z-index:1;background:var(--bg);border-radius:28px 28px 0 0;padding:14px 18px 22px;display:flex;flex-direction:column;align-items:center;max-height:90%;overflow-y:auto}
  .sm-hint{font-size:13px;font-weight:600;color:var(--ink-faint);text-align:center;margin-bottom:13px}
  .sm-img{width:100%;border-radius:16px;display:block;box-shadow:0 8px 28px -8px rgba(26,26,26,.22)}

  /* === HOME GRID === */
  .ghome{padding:8px 20px 16px;display:flex;flex-direction:column;gap:12px}

  /* featured 今日任务 card */
  .ghero{border-radius:28px;padding:22px 22px;background:linear-gradient(148deg,#3A2508 0%,#2A1A06 50%,#1C1004 100%);color:#fff;position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;gap:16px;transition:transform .15s;
    box-shadow:0 0 52px -18px rgba(255,140,48,.32),0 12px 32px -14px rgba(60,20,4,.45),inset 0 1px 0 rgba(255,168,72,.08);border:1px solid rgba(255,150,55,.10)}
  .ghero:active{transform:scale(.985)}
  .ghero .blob{position:absolute;border-radius:50%;filter:blur(9px)}
  .ghero .blob.a{width:140px;height:140px;background:#8C4A10;right:-40px;top:-50px;opacity:.30}
  .ghero .blob.b{width:90px;height:90px;background:#5C3010;right:60px;bottom:-40px;opacity:.25}
  .gh-num{font-family:var(--disp);font-weight:800;font-size:58px;color:#F9EDD8;line-height:1;flex-shrink:0;position:relative;min-width:64px;text-align:center}
  .gh-info{flex:1;position:relative}
  .gh-label{font-family:var(--disp);font-weight:800;font-size:21px;color:#F9EDD8}
  .gh-sub{font-size:12px;color:#C8AA80;margin-top:5px;line-height:1.4}
  .gh-arrow{width:38px;height:38px;border-radius:13px;background:rgba(249,237,216,.12);display:flex;align-items:center;justify-content:center;font-size:19px;color:#F9EDD8;flex-shrink:0;position:relative;font-weight:800}

  /* 复习 card: same clay hero shape, mint-toned so it reads distinct from 今日任务 */
  .ghero.gh-review{background:linear-gradient(148deg,#0F3B2C 0%,#0B2C21 50%,#071E17 100%);
    box-shadow:0 0 52px -18px rgba(90,210,160,.30),0 12px 32px -14px rgba(6,30,22,.45),inset 0 1px 0 rgba(140,255,205,.08);border:1px solid rgba(110,210,160,.14)}
  .ghero.gh-review .blob.a{background:#1E6B4A}
  .ghero.gh-review .blob.b{background:#155038}
  .ghero.gh-review .gh-num{color:#DFFBEC}
  .ghero.gh-review .gh-label{color:#DFFBEC}
  .ghero.gh-review .gh-sub{color:#9FD8B8}
  .ghero.gh-review .gh-arrow{background:rgba(223,251,236,.14);color:#DFFBEC}
  .ghero.gh-review.empty{cursor:default;background:linear-gradient(148deg,#2C2924 0%,#221F1A 50%,#181611 100%);
    box-shadow:0 6px 20px -10px rgba(20,18,14,.32),inset 0 1px 0 rgba(255,255,255,.05);border:1px solid rgba(200,190,170,.10)}
  .ghero.gh-review.empty:active{transform:none}
  .ghero.gh-review.empty .blob{opacity:.18}
  .ghero.gh-review.empty .gh-num{color:#B7AE9C;font-size:40px}
  .ghero.gh-review.empty .gh-label{color:#E8E0D0}
  .ghero.gh-review.empty .gh-sub{color:#8C8474}

  /* 2×2 grid */
  .gcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .gcard{border-radius:24px;padding:22px 18px 18px;cursor:pointer;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;transition:transform .15s;
    background:rgba(255,250,244,.92);
    box-shadow:0 6px 20px -8px rgba(120,65,15,.14),0 2px 0 rgba(200,155,90,.18),inset 0 1px 0 rgba(255,255,255,.90)}
  .gcard:active{transform:scale(.95)}
  .gc-ico{font-size:34px;line-height:1;margin-bottom:4px}
  .gc-t{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink-mid)}
  .gc-s{font-size:11.5px;font-weight:700;color:var(--ink-soft)}
  .gc-char{position:absolute;right:-4px;bottom:-4px;width:80px;height:80px;object-fit:contain;pointer-events:none}

  /* === CALENDAR === */
  .cal-hero{margin:8px 20px 12px;background:linear-gradient(140deg,rgba(255,175,90,.22) 0%,rgba(255,215,110,.15) 100%);border:1.5px solid rgba(255,155,60,.28);border-radius:24px;padding:16px 14px 16px 18px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;box-shadow:0 6px 22px -8px rgba(200,90,20,.14),inset 0 1px 0 rgba(255,255,255,.70)}
  .cal-hero-left{display:flex;align-items:center;gap:16px}
  .cal-hero-stat{text-align:center}
  .cal-hero-stat b{display:block;font-family:var(--disp);font-weight:800;font-size:34px;color:var(--primary);line-height:1}
  .cal-hero-stat span{font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:2px;display:block}
  .cal-hero-divider{width:1px;height:44px;background:rgba(200,155,90,.28);border-radius:1px}
  .cal-hero-img{width:96px;height:96px;object-fit:contain;object-position:center;border-radius:18px;filter:drop-shadow(0 4px 10px rgba(100,50,10,.15))}
  .cal-card{margin:0 20px 6px;background:rgba(255,250,244,.90);border:1.5px solid rgba(200,155,90,.20);border-radius:26px;padding:18px 16px;box-shadow:0 8px 28px -10px rgba(120,65,15,.13),0 3px 0 rgba(200,155,90,.18),inset 0 1px 0 rgba(255,255,255,.92)}
  .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .cal-title{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink)}
  .cal-nav-btn{border:none;background:rgba(200,155,90,.16);color:var(--ink);width:36px;height:36px;border-radius:12px;font-size:22px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s}
  .cal-nav-btn:active{transform:scale(.90)}
  .cal-nav-btn:disabled{opacity:.28;cursor:default;transform:none}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .cal-dl{text-align:center;font-size:10px;font-weight:800;color:var(--ink-faint);padding:3px 0 6px;letter-spacing:.3px}
  .cal-day{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;position:relative}
  .cal-day span{font-size:12.5px;font-weight:700;color:#B3A080;line-height:1.2}
  .cal-day.today{background:rgba(255,140,66,.12);border:1.5px solid rgba(255,140,66,.38)}
  .cal-day.today span{color:var(--primary);font-weight:800}
  .cal-day.daka{background-image:url('../img/luma.png');background-size:contain;background-position:center;background-repeat:no-repeat;background-color:rgba(255,178,96,.16);border:2px solid rgba(255,120,40,.65);box-shadow:0 3px 10px -3px rgba(255,108,28,.32);overflow:hidden}
  .cal-day.daka span{position:absolute;bottom:2px;right:3px;font-size:9px;font-weight:800;color:rgba(160,55,10,.90);background:rgba(255,255,255,.82);border-radius:4px;padding:0 3px;line-height:1.5;z-index:1}
  .cal-day.daka.today{border:2.5px solid #FF8C42;box-shadow:0 0 0 2px rgba(255,140,60,.28),0 3px 10px -3px rgba(255,108,28,.38)}
  .cal-day.empty{background:none}

  /* === 学习记录 LEARN LOG === */
  .ll-hero{margin:8px 20px 12px;background:linear-gradient(140deg,rgba(190,165,255,.22) 0%,rgba(125,190,255,.16) 100%);border:1.5px solid rgba(120,105,220,.24);border-radius:24px;padding:16px 18px;display:flex;align-items:center;justify-content:center;gap:20px;box-shadow:0 6px 22px -8px rgba(70,50,150,.14),inset 0 1px 0 rgba(255,255,255,.70)}
  .ll-hero-stat{text-align:center}
  .ll-hero-stat b{display:block;font-family:var(--disp);font-weight:800;font-size:34px;color:var(--lav-t);line-height:1}
  .ll-hero-stat span{font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:2px;display:block}
  .ll-hero-divider{width:1px;height:44px;background:rgba(120,105,220,.22);border-radius:1px}
  .lllist{padding:2px 20px 20px;display:flex;flex-direction:column;gap:12px}
  .llcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:15px 16px;border-left:5px solid var(--lav-t)}
  .llhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
  .lld{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink-mid);flex-shrink:0}
  .lln{font-size:12px;font-weight:700;color:var(--ink-soft)}
  .llwords{display:flex;flex-wrap:wrap;gap:6px}
  .llw{background:var(--lav);color:var(--lav-t);font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px}

  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* phone frame fills the screen on real devices so the bottom tab bar stays put */
  @media (max-width:480px){
    html,body{height:100%}
    body{padding:0;align-items:stretch;justify-content:stretch}
    .phone{max-width:none;width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
    .phone::before{border-radius:0}
  }