/* Lozenge – glass.css (v15, “Prism”).
   One material for the whole app: light that passes through glass. Loaded after theme.css and only re-points its tokens and
   adds the glass on top, so every screen changes together and none is left in another style.

   The rules that keep it fast on a phone:
   · surfaces are translucent fills with a lit rim and a highlight – blur is kept for the few things that float over scrolling
     content (the tab bar, sheets, the lesson dock) and never used on lists of cards;
   · the living background is one oversized layer that drifts slowly (compositor only). */

/* ---------- tokens: light ---------- */
:root{
  --ground:#E7ECFF;
  --paper:rgba(255,255,255,.60); --paper-2:rgba(255,255,255,.36);
  --rule:rgba(64,80,180,.13); --rule-2:rgba(64,80,180,.27);
  --glass:rgba(255,255,255,.52); --glass-line:rgba(255,255,255,.82);
  --rim:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(255,255,255,.56),inset 0 -12px 20px -14px rgba(255,255,255,.7);
  --e1:var(--rim),0 1px 2px rgba(40,52,150,.06),0 16px 30px -16px rgba(40,52,150,.34);
  --e2:var(--rim),0 2px 4px rgba(40,52,150,.08),0 30px 54px -24px rgba(40,52,150,.46);
  --orb-a:rgba(88,120,255,.55); --orb-b:rgba(178,130,255,.50); --orb-c:rgba(255,160,128,.50); --orb-d:rgba(72,222,255,.42);
  --sheen:linear-gradient(155deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 60%);
  --nav-fill:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.34));
  --nav-line:rgba(255,255,255,.85);
  --lens:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.55));
  --lens-glow:rgba(70,90,220,.42);
  --dock-fill:rgba(240,244,255,.72);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#060716;
  --paper:rgba(38,44,104,.50); --paper-2:rgba(255,255,255,.06);
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.19);
  --glass:rgba(40,48,112,.50); --glass-line:rgba(255,255,255,.16);
  --rim:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -12px 20px -14px rgba(255,255,255,.10);
  --e1:var(--rim),0 16px 30px -14px rgba(0,0,0,.62);
  --e2:var(--rim),0 30px 54px -22px rgba(0,0,0,.78);
  --orb-a:rgba(66,96,255,.50); --orb-b:rgba(140,88,255,.46); --orb-c:rgba(255,104,120,.26); --orb-d:rgba(36,196,255,.24);
  --sheen:linear-gradient(155deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%);
  --nav-fill:linear-gradient(180deg,rgba(60,70,150,.56),rgba(26,32,84,.42));
  --nav-line:rgba(255,255,255,.2);
  --lens:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10));
  --lens-glow:rgba(120,140,255,.5);
  --dock-fill:rgba(12,14,40,.72);
}}
:root[data-theme="dark"]{
  --ground:#060716;
  --paper:rgba(38,44,104,.50); --paper-2:rgba(255,255,255,.06);
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.19);
  --glass:rgba(40,48,112,.50); --glass-line:rgba(255,255,255,.16);
  --rim:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -12px 20px -14px rgba(255,255,255,.10);
  --e1:var(--rim),0 16px 30px -14px rgba(0,0,0,.62);
  --e2:var(--rim),0 30px 54px -22px rgba(0,0,0,.78);
  --orb-a:rgba(66,96,255,.50); --orb-b:rgba(140,88,255,.46); --orb-c:rgba(255,104,120,.26); --orb-d:rgba(36,196,255,.24);
  --sheen:linear-gradient(155deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%);
  --nav-fill:linear-gradient(180deg,rgba(60,70,150,.56),rgba(26,32,84,.42));
  --nav-line:rgba(255,255,255,.2);
  --lens:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10));
  --lens-glow:rgba(120,140,255,.5);
  --dock-fill:rgba(12,14,40,.72);
}

/* ---------- the living background ---------- */
html{background:var(--ground)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 26% at 18% 14%,var(--orb-a),transparent 70%),
    radial-gradient(30% 24% at 84% 20%,var(--orb-b),transparent 70%),
    radial-gradient(36% 30% at 72% 82%,var(--orb-c),transparent 70%),
    radial-gradient(28% 24% at 10% 76%,var(--orb-d),transparent 70%)}
@keyframes orb-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-3%,3%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---------- surfaces: translucent, lit at the rim, with a soft highlight ---------- */
.st-card,.st-me,.hb-panel:not(.hb-week),.hb-card,.lv-row,.duo-card,.pf-stat,.pf-link,.gm-q,.gm-opt,.gm-stats div,.pm-card,.sb-clue,.sb-chip,
.lm-streak,.lm-buddy,.lm-mini,.list,.testpick,.plus-status,.sh-card,.tsec .list,.hb-chestrow,.gm-review,.gh-card{background-image:var(--sheen)}
.hb-quest,.st-row{background-image:none}
.chip,.iconbtn,.lm-avatar,.lm-gear,.lm-level,.pill,.papertabs a,.gm-close,.gm-pill,.btn.sm{box-shadow:var(--e1);border:0}
.chip{background-image:var(--sheen)}

/* ---------- the floating tab bar: liquid glass with a lens that slides ---------- */
.bottomnav{left:.875rem;right:.875rem;bottom:calc(.875rem + var(--sab, env(safe-area-inset-bottom)));padding:.4375rem;border-radius:var(--r-pill);border:1px solid var(--nav-line);
  background:var(--nav-fill);-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px -12px rgba(255,255,255,.45),0 22px 44px -16px rgba(30,42,140,.42);
  overflow:hidden;isolation:isolate}
.bottomnav a{position:relative;z-index:1;color:var(--ink-2)}
.bottomnav a[aria-current="page"]{color:var(--brand-ink)}
.bottomnav a[aria-current="page"] .icon{background:none;box-shadow:none;padding:0;margin:0;border-radius:0;color:var(--brand)}
.nav-lens{position:absolute;z-index:0;top:.4375rem;bottom:.4375rem;left:0;width:var(--lw,4rem);transform:translateX(var(--lx,0));border-radius:var(--r-pill);pointer-events:none;
  background:var(--lens);box-shadow:0 4px 12px -4px var(--lens-glow);
  transition:transform .5s cubic-bezier(.3,1.35,.4,1),width .5s cubic-bezier(.3,1.35,.4,1);}

@media (prefers-reduced-motion:reduce){.nav-lens{transition:none}}

body{padding-bottom:calc(5.5rem + var(--sab, env(safe-area-inset-bottom)))}

/* ---------- top bar: clear at the top, a lit glass strip once the page has moved ---------- */
.topbar{background:transparent;transition:background .25s ease,box-shadow .25s ease}
body.scrolled .topbar{background:color-mix(in srgb,var(--ground) 72%,transparent);box-shadow:inset 0 -1px 0 var(--rule),0 12px 24px -16px rgba(30,42,140,.4)}
.chip.plus{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -6px rgba(255,150,30,.7)}

/* ---------- buttons: glossy gems and glass pills ---------- */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.10),0 12px 22px -12px rgba(20,30,110,.55)}
.btn.green:not(.ghost):not(.sm){background:linear-gradient(180deg,#34D89B,#10AE73);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,60,30,.18),0 14px 24px -12px rgba(16,174,115,.75)}
.btn.blue:not(.ghost):not(.sm){background:linear-gradient(180deg,#7C97FF,#3B4CF0);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(10,20,120,.22),0 14px 24px -12px rgba(59,76,240,.75)}
.btn.amber:not(.ghost):not(.sm){background:linear-gradient(180deg,#FFE27A,#FF9F1C);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(150,70,0,.18),0 14px 24px -12px rgba(255,150,30,.8)}
.btn.red:not(.ghost):not(.sm){background:linear-gradient(180deg,#FF8A90,#E8444C);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(120,10,20,.2),0 14px 24px -12px rgba(232,68,76,.7)}
.btn:not(.ghost):not(.sm):not(.green):not(.blue):not(.amber):not(.red):not(.pink):not(:disabled) {background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38));color:var(--ink);
  box-shadow:var(--e1)}
.btn.ghost{box-shadow:none}
.btn.sm{background:var(--glass);background-image:var(--sheen)}

/* ---------- sheets, popups and the lesson dock: the glass that floats over content ---------- */
.sheet-panel{background:color-mix(in srgb,var(--ground) 68%,transparent);-webkit-backdrop-filter:blur(34px) saturate(1.7);backdrop-filter:blur(34px) saturate(1.7);
  border:1px solid var(--glass-line);box-shadow:var(--e2)}
.duo-foot{background:var(--dock-fill);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);border:1px solid var(--glass-line);box-shadow:var(--e2)}
.duo-foot.ok{background:color-mix(in srgb,var(--right-soft) 86%,transparent)}
.duo-foot.bad{background:color-mix(in srgb,var(--wrong-soft) 86%,transparent)}
.toast{background:var(--dock-fill);color:var(--ink);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:var(--e2)}
.field-input,.auth-input,.duo-input,input,textarea,select{background:var(--paper);box-shadow:var(--rim)}

/* ---------- text on glass keeps its contrast ---------- */
.muted,.lead,small{color:var(--lead)}

/* ---------- one accent everywhere: the light inside the gem ---------- */
:root{--gem-a:#6C7DFF;--gem-b:#A57BFF;--gem-c:#3EDCFF;--gem-d:#FF8FB1}
.accent{background:linear-gradient(100deg,var(--gem-a),var(--gem-b) 55%,var(--gem-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.gm-hero h1 .accent,.tr-copy h2 .accent,.fm-line.accent,.onb.is-splash .accent{background:none;-webkit-background-clip:initial;background-clip:initial}

/* ---------- depth on scroll: cards settle into place as they arrive ---------- */
.rv{opacity:0;transform:translate3d(0,.75rem,0);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.9,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* =====================================================================================
   The gem
   ===================================================================================== */
.prism .pz-sweep{animation:pz-sweep 7s ease-in-out infinite}
@keyframes pz-sweep{0%,58%{transform:translateX(-40px) skewX(-18deg)}100%{transform:translateX(190px) skewX(-18deg)}}
.prism .pz-spark{animation:twinkle 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.prism .pz-sweep,.prism .pz-spark{animation:none}}
/* the stone a rank is named after */
.gem-r0 svg{filter:grayscale(1) brightness(.95)}
.gem-r1 svg{filter:saturate(.22) brightness(1.2)}
.gem-r2 svg{filter:hue-rotate(185deg) saturate(1.4)}
.gem-r3 svg{filter:hue-rotate(-28deg) saturate(1.2)}
.gem-r4 svg{filter:none}
.gem-r5 svg{filter:hue-rotate(-95deg) saturate(1.25)}
.gem-r6 svg{filter:hue-rotate(140deg) saturate(1.5)}
.gem-r7 svg{filter:saturate(.3) brightness(1.4)}
.gem-r8 svg{filter:hue-rotate(60deg) saturate(1.3) brightness(1.1)}

/* =====================================================================================
   Home
   ===================================================================================== */
.lm-home .lm-head{padding-bottom:.5rem}
.gh-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1rem;align-items:center;padding:1.25rem 1.125rem 1rem;margin-top:.5rem;border-radius:var(--r-xl);
  background-color:var(--paper);box-shadow:var(--e2);overflow:hidden;isolation:isolate}
.gh-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 100% at 16% 38%,rgba(128,140,255,.34),transparent 70%),radial-gradient(60% 80% at 100% 0%,rgba(255,170,200,.22),transparent 70%)}
.gh-stone{position:relative;display:grid;place-items:center;width:8.5rem;height:9.5rem;}
.gh-halo{position:absolute;inset:6% -4%;border-radius:50%;background:radial-gradient(circle,rgba(150,120,255,.5),transparent 66%);filter:blur(8px)}
.gh-gem{position:relative;width:7.5rem;height:auto;animation:gh-float 6s ease-in-out infinite}
@keyframes gh-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-.4rem) rotate(1.5deg)}}
.gh-body{min-width:0}
.gh-eyebrow{display:block;font:800 .6875rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--lead)}
.gh-num{display:flex;align-items:baseline;gap:.125rem;margin-top:.375rem;font-family:var(--display);color:var(--ink)}
.gh-num b{font:800 3.75rem/.85 var(--display);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.gh-num span{font:800 1.5rem/1 var(--display);color:var(--lead)}
.gh-cap{display:block;margin-top:.25rem;font:700 .8125rem/1 var(--f-ui);color:var(--lead)}
.gh-sub{margin:.625rem 0 0;color:var(--ink-2);font:600 .8125rem/1.35 var(--f-ui)}
.gh-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
.gh-stat{position:relative;display:grid;justify-items:center;gap:.125rem;padding:.625rem .25rem .5rem;border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--rim);overflow:hidden}
.gh-stat b{font:800 1.125rem/1.1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gh-stat small{font:600 .6875rem/1.1 var(--f-ui);color:var(--lead);text-align:center}
.gh-meter{position:absolute;left:.5rem;right:.5rem;bottom:.3125rem;height:.1875rem;border-radius:var(--r-pill);background:var(--rule);overflow:hidden}
.gh-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gem-c),var(--gem-a))}
.gh-say{display:flex;align-items:center;gap:.625rem;margin:.75rem 0 0;padding:.5rem .875rem .5rem .5rem;border-radius:var(--r-pill);background:var(--glass);box-shadow:var(--e1);font:600 .875rem/1.3 var(--f-ui);color:var(--ink-2)}
.gh-say-face{flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center}
.gh-say-face svg{width:2rem;height:auto}
.gh-go{display:flex;align-items:center;gap:.875rem;margin-top:.875rem;padding:.875rem 1rem;border-radius:var(--r-xl);text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 78%,#fff),color-mix(in srgb,var(--p) 40%,transparent));box-shadow:var(--e2)}
.gh-go-ic{flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem}
.gh-go-t{flex:1;min-width:0}
.gh-go-t small{display:block;font:800 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);opacity:.8}
.gh-go-t b{display:block;margin-top:.3125rem;font:800 1.1875rem/1.15 var(--display);letter-spacing:-.03em}
.gh-go-t em{display:block;margin-top:.1875rem;font:500 .8125rem/1.3 var(--f-ui);font-style:normal;color:var(--ink-2)}
.gh-go-play{flex:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#5B6CFF,#3446E8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -8px rgba(52,70,232,.8)}
.gh-go-play .icon{width:1.125rem;height:1.125rem;margin-left:.125rem}
.lm-home .lm-sec{margin:1.75rem .125rem .75rem}
/* the games sit in a row you can swipe, so the page is not a wall of tiles */
.lm-home .lm-games{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-16px;padding:0 16px .25rem;scrollbar-width:none}
.lm-home .lm-games::-webkit-scrollbar{display:none}
.lm-home .lm-game{flex:0 0 9.5rem;min-height:11rem;scroll-snap-align:start}
@media (max-width:350px){.gh-card{grid-template-columns:1fr;justify-items:center;text-align:center}.gh-num{justify-content:center}}

/* the page title moves up into the bar as the page is scrolled */
.topbar .bar-title{position:absolute;left:50%;transform:translateX(-50%);max-width:44%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:800 1rem/1 var(--display);letter-spacing:-.03em;opacity:0;transition:opacity .2s}
body.scrolled .topbar .bar-title{opacity:0}

.gh-stat:has(.gh-meter){padding-bottom:.875rem}

/* =====================================================================================
   Practice: other ways to answer, and surprises
   ===================================================================================== */
.duo-card{position:relative}
/* swipe: does it sound right? */
.vd{display:grid;gap:1rem;justify-items:center}
.vd-stage{width:100%;display:grid;place-items:center;min-height:10.5rem}
.vd-card{position:relative;width:100%;padding:1.75rem 1.25rem 1.5rem;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e2);
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;transition:transform .35s cubic-bezier(.2,1.2,.4,1),box-shadow .2s;--yes:0;--no:0}
.vd-card.drag{transition:none;cursor:grabbing}
.vd-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,84,91,calc(var(--no) * .32)),transparent 42%,transparent 58%,rgba(20,184,122,calc(var(--yes) * .32)))}
.vd-word{color:var(--brand-ink);background:var(--brand-soft);border-radius:.5rem;padding:0 .3rem;font-weight:700}
.vd-stamp{position:absolute;top:.75rem;padding:.3125rem .625rem;border-radius:var(--r-sm);border:2px solid;font:800 .6875rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;opacity:0}
.vd-stamp.yes{right:.75rem;color:var(--right);opacity:var(--yes);transform:rotate(8deg)}
.vd-stamp.no{left:.75rem;color:var(--wrong);opacity:var(--no);transform:rotate(-8deg)}
.vd-card.go-yes{box-shadow:0 0 0 2px var(--right),var(--e2)}
.vd-card.go-no{box-shadow:0 0 0 2px var(--wrong),var(--e2)}
.vd-card.ok{box-shadow:0 0 0 3px var(--right),0 0 28px rgba(20,184,122,.4),var(--e2)}
.vd-card.bad{box-shadow:0 0 0 3px var(--wrong),var(--e2);animation:gm-shake .35s}
.vd-btns{display:flex;gap:1.5rem;justify-content:center}
.vd-btn{width:4.25rem;height:4.25rem;border-radius:50%;display:grid;place-items:center;border:0;color:#fff;transition:transform .15s cubic-bezier(.3,1.5,.5,1)}
.vd-btn:active{transform:scale(.9)}
.vd-btn.yes{background:linear-gradient(180deg,#34D89B,#10AE73);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 22px -10px rgba(16,174,115,.8)}
.vd-btn.no{background:linear-gradient(180deg,#FF8A90,#E8444C);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 22px -10px rgba(232,68,76,.8)}
.vd-btn .icon{width:1.75rem;height:1.75rem;stroke-width:3}
.vd-hint{margin:0;color:var(--lead);font:600 .8125rem/1 var(--f-ui);text-align:center}
/* bubbles */
.bb-card{display:grid;gap:1rem}
.bb-stage{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.25rem}
.bb{position:relative;min-height:4.75rem;padding:.75rem 1rem;border:0;border-radius:2.5rem;color:var(--ink);font:800 1.0625rem/1.15 var(--f-ui);text-align:center;
  background:radial-gradient(120% 90% at 28% 18%,rgba(255,255,255,.95),rgba(255,255,255,.34) 44%,rgba(140,160,255,.30));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -10px 18px rgba(120,140,255,.24),0 16px 26px -14px rgba(50,70,200,.5);
  animation:bb-bob var(--d,3.4s) ease-in-out var(--w,0s) infinite;transition:opacity .3s,filter .3s}
.bb:nth-child(even){margin-top:1.25rem}
@keyframes bb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}}
.bb.on{box-shadow:inset 0 1px 0 #fff,0 0 0 3px var(--brand),0 16px 26px -14px rgba(50,70,200,.6)}
.bb.right{background:radial-gradient(120% 90% at 28% 18%,#B8F5D9,#3DDC97 60%,#10AE73);color:#04331F;animation:none;transform:scale(1.06)}
.bb.wrong{background:radial-gradient(120% 90% at 28% 18%,#FFD0D3,#FF8A90 60%,#E8444C);color:#4A0A10;animation:gm-shake .35s}
.bb.gone{opacity:0;transform:scale(.3);pointer-events:none;animation:none}
.duo-opt.dim{opacity:.28;pointer-events:none;filter:grayscale(1)}
/* the golden question */
.duo-card.gold{box-shadow:0 0 0 2px rgba(255,197,61,.95),0 0 32px rgba(255,190,60,.5),var(--e2);overflow:visible}
.duo-card.gold::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,236,150,.55) 48%,transparent 66%);background-size:250% 100%;animation:gold-shine 3.4s ease-in-out infinite}
@keyframes gold-shine{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.gold-ribbon{position:absolute;top:-.8125rem;left:1rem;z-index:2;display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .75rem .3125rem .5rem;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FFE27A,#FF9F1C);color:#3A2200;font:800 .75rem/1 var(--f-ui);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 14px -8px rgba(255,150,30,.9)}
.gold-ribbon .obj{--s:1.125rem !important}
.xp-chip.fast{background:var(--amber-soft);color:var(--amber-ink)}
.xp-chip.gold{display:inline-flex;align-items:center;gap:.25rem;background:linear-gradient(180deg,#FFE27A,#FF9F1C);color:#3A2200}
/* the clock */
.duo-timer{position:relative;display:flex;align-items:center;height:1.5rem;border-radius:var(--r-pill);background:var(--paper-2);box-shadow:var(--rim);overflow:hidden}
.duo-timer i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,var(--gem-c),var(--gem-a));opacity:.55;animation:duo-timer var(--t) linear forwards}
.duo-timer span{position:relative;margin-left:auto;padding-right:.75rem;font:800 .6875rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.duo-timer.late i{background:var(--wrong);animation:none;transform:scaleX(0)}
@keyframes duo-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* tools */
.duo-tools{display:flex;gap:.625rem;justify-content:center;flex-wrap:wrap}
.duo-tool{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:0;border-radius:var(--r-pill);background:var(--glass);box-shadow:var(--e1);color:var(--ink);font:800 .8125rem/1 var(--f-ui)}
.duo-tool small{padding:.1875rem .5rem;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);font:800 .6875rem/1 var(--f-ui)}
.duo-input.hinted::placeholder{color:var(--brand-ink);opacity:.8}
/* the unit boss */
.boss{display:flex;align-items:center;gap:.875rem;padding:.75rem 1rem;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e1)}
.boss-art{flex:none;width:3.75rem;height:3.5rem;animation:boss-idle 2.6s ease-in-out infinite}
.boss-art svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(91,60,240,.4))}
.boss-t{flex:1;min-width:0}
.boss-t small{display:block;font:800 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}
.boss-t b{display:block;margin-top:.25rem;font:800 1.0625rem/1.1 var(--display);letter-spacing:-.03em}
.boss-hp{height:.75rem;margin-top:.5rem;border-radius:var(--r-pill);background:var(--rule);overflow:hidden;box-shadow:var(--rim)}
.boss-hp i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FF6A8A,#FF9A4D);transition:width .5s cubic-bezier(.2,1,.3,1)}
.boss.hit .boss-art{animation:boss-hit .5s}
.boss.laugh .boss-art{animation:boss-laugh .6s}
.boss.weak .boss-art{animation:boss-idle 1s ease-in-out infinite}
@keyframes boss-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-.3rem)}}
@keyframes boss-hit{0%{transform:none}25%{transform:translateX(-10px) rotate(-10deg) scale(.9);filter:brightness(2.2)}55%{transform:translateX(6px) rotate(5deg)}100%{transform:none}}
@keyframes boss-laugh{0%,100%{transform:none}25%{transform:scale(1.15) rotate(-6deg)}50%{transform:scale(1.15) rotate(6deg)}75%{transform:scale(1.1) rotate(-3deg)}}
/* choosing how to play */
.mods .mod-list{display:grid;gap:.75rem}
.mod-card{display:flex;align-items:center;gap:.875rem;padding:1rem 1.125rem;border:0;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e1);text-align:left;color:var(--ink);
  animation:rise .45s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i) * .09s)}
.mod-card:active{transform:scale(.98)}
.mod-ic{flex:none;display:grid;place-items:center;width:3rem;height:3rem}
.mod-card b{display:block;font:800 1.125rem/1.15 var(--display);letter-spacing:-.02em}
.mod-card small{display:block;margin-top:.25rem;color:var(--lead);font:500 .8125rem/1.3 var(--f-ui)}
.mod-card.m-speed{box-shadow:var(--e1),0 0 0 1.5px rgba(255,150,30,.55)}
.mod-card.m-flawless{box-shadow:var(--e1),0 0 0 1.5px rgba(108,125,255,.55)}
.mod-card.m-golden{box-shadow:var(--e1),0 0 0 1.5px rgba(255,197,61,.8)}
@media (prefers-reduced-motion:reduce){.bb,.boss-art,.duo-card.gold::before{animation:none}}

/* the gem on the lesson results: brilliance climbing */
.duo-gemrow{display:flex;align-items:center;gap:1rem;width:100%;max-width:24rem;margin-top:.75rem;padding:.875rem 1rem;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e2);text-align:left}
.duo-gemrow .prism{flex:none;filter:drop-shadow(0 6px 14px rgba(108,125,255,.55))}
.duo-gemrow small{display:block;font:800 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}
.duo-gemrow b{display:block;margin-top:.375rem;font:800 1.5rem/1 var(--display);letter-spacing:-.04em}
.gemrow-bar{display:block;height:.5rem;margin-top:.625rem;border-radius:var(--r-pill);background:var(--rule);overflow:hidden}
.gemrow-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gem-c),var(--gem-a),var(--gem-d));width:var(--from);animation:gemrow-fill 1.4s .8s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes gemrow-fill{to{width:var(--to)}}
.lm-home .lm-game{flex-basis:11rem}
.lm-home .lm-game b{white-space:normal;font-size:1.25rem;line-height:1.05;min-height:2.1em;display:flex;align-items:flex-end}

.pf-gem{display:flex;align-items:center;gap:1rem;margin-top:.75rem;padding:.875rem 1.125rem;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e2)}
.pf-gem .prism{flex:none;filter:drop-shadow(0 6px 14px rgba(108,125,255,.5))}
.pf-gem small{display:block;font:800 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}
.pf-gem b{display:block;margin-top:.375rem;font:800 1.375rem/1 var(--display);letter-spacing:-.04em}
.pf-gem p{margin:.375rem 0 0;color:var(--ink-2);font:600 .8125rem/1.35 var(--f-ui)}

/* Game tiles: tinted glass with a coloured light, instead of loud solid blocks */
.g-rush{--tint:#FFB13D}.g-word{--tint:#8F7BFF}.g-pairs{--tint:#3BC6E8}.g-build{--tint:#3DD9A0}
.lm-game.g-rush,.lm-game.g-word,.lm-game.g-pairs,.lm-game.g-build{color:var(--ink);
  background:radial-gradient(90% 70% at 88% 4%,color-mix(in srgb,var(--tint) 75%,transparent),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--tint) 34%,var(--paper)),color-mix(in srgb,var(--tint) 12%,var(--paper)));
  box-shadow:var(--e1),0 18px 32px -20px color-mix(in srgb,var(--tint) 80%,transparent)}
.lm-game.g-rush small,.lm-game.g-word small,.lm-game.g-pairs small,.lm-game.g-build small{color:var(--ink-2)}

.gh-stone{cursor:pointer;-webkit-tap-highlight-color:transparent}
.gh-gem.polish{animation:gem-polish .7s cubic-bezier(.2,1.5,.4,1),gh-float 6s .7s ease-in-out infinite}
.gh-gem.polish .pz-sweep{animation:pz-sweep-fast .8s ease-out 1}
@keyframes gem-polish{0%{transform:scale(1) rotate(0)}30%{transform:scale(.9) rotate(-6deg)}65%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes pz-sweep-fast{from{transform:translateX(-40px) skewX(-18deg)}to{transform:translateX(190px) skewX(-18deg)}}

/* Moving between screens is a soft arrival, not a cut */
#app>*{animation:page-in .36s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes page-in{from{opacity:0;transform:translate3d(0,.5rem,0)}}
@media (prefers-reduced-motion:reduce){#app>*{animation:none}}


/* =====================================================================================
   v16 – Home fits one screen
   ===================================================================================== */
.lm-one{display:grid;gap:.75rem;align-content:start}
.lm-one>*{margin:0}
.lm-one .lm-head{padding:.125rem 0 0}
.lm-one .gh-card{margin-top:0;padding:1rem 1rem .875rem;gap:.25rem .875rem}
.lm-one .gh-stone{width:6.75rem;height:7.25rem}
.lm-one .gh-gem{width:6rem}
.lm-one .gh-num b{font-size:3.25rem}
.lm-one .gh-sub{margin-top:.5rem}
.lm-one .gh-sub.warn{color:var(--ink);font-weight:700}
.gh-pills{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.25rem}
.gh-pill{position:relative;display:flex;align-items:center;gap:.4375rem;min-width:0;padding:.5rem .5rem .625rem;border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--rim);overflow:hidden}
.gh-pill .obj{flex:none}
.gh-pill div{min-width:0}
.gh-pill b{display:block;font:800 1rem/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gh-pill small{display:block;margin-top:.125rem;font:600 .625rem/1.1 var(--f-ui);color:var(--lead);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-one .gh-go{margin-top:0;padding:.75rem .875rem}
.qs-strip{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;border-radius:var(--r-xl);background-color:var(--paper);background-image:var(--sheen);box-shadow:var(--e1);text-decoration:none;color:var(--ink)}
.qs-strip .obj{flex:none}
.qs-t{flex:1;min-width:0}
.qs-t b{display:block;font:800 1rem/1.1 var(--display);letter-spacing:-.03em}
.qs-t small{display:block;margin-top:.1875rem;font:600 .75rem/1.2 var(--f-ui);color:var(--lead)}
.qs-dots{display:flex;gap:.3125rem}
.qs-dots i{width:.625rem;height:.625rem;border-radius:50%;background:var(--rule);box-shadow:inset 0 0 0 1.5px var(--line)}
.qs-dots i.on{background:linear-gradient(180deg,#5FE39A,#22B86B);box-shadow:none}
.qs-strip>.icon{flex:none;width:1rem;height:1rem;color:var(--lead)}
.qs-strip.all{background-image:linear-gradient(135deg,rgba(255,200,80,.28),transparent 70%),var(--sheen)}
.pl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pl-tile{display:grid;justify-items:center;align-content:center;gap:.375rem;min-height:5.25rem;padding:.625rem .25rem;border-radius:var(--r-lg);text-decoration:none;color:var(--ink-2);background-color:var(--p, var(--paper));background-image:var(--sheen);box-shadow:var(--e1);text-align:center}
.pl-tile b{font:700 .6875rem/1.15 var(--f-ui);letter-spacing:0;overflow-wrap:anywhere}
.pl-tile .obj{transition:transform .2s}
.pl-tile:active .obj{transform:scale(.92)}
.pl-tile.g-rush{background-image:linear-gradient(160deg,rgba(255,196,60,.32),transparent 75%),var(--sheen)}
.pl-tile.g-word{background-image:linear-gradient(160deg,rgba(80,200,150,.30),transparent 75%),var(--sheen)}
.pl-tile.g-pairs{background-image:linear-gradient(160deg,rgba(255,120,190,.28),transparent 75%),var(--sheen)}
.pl-tile.g-build{background-image:linear-gradient(160deg,rgba(110,140,255,.32),transparent 75%),var(--sheen)}
@media (max-width:350px){.lm-one .gh-card{grid-template-columns:1fr;justify-items:center}.gh-pills{grid-template-columns:1fr 1fr}}

/* the film: what a video earns, shown in the top bar */
.tr-earn{flex:none;display:inline-flex;align-items:center;gap:.3125rem;padding:.375rem .625rem;border-radius:var(--r-pill);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:#fff;font:800 .8125rem/1 var(--f-ui);white-space:nowrap}

/* Home: the gem takes whatever room the screen has left, but we cap it so it doesn't look huge */
.lm-one{display:flex;flex-direction:column;min-height:calc(calc(var(--vh,1vh)*100) - var(--chrome,10rem))}
.lm-one>.gh-card{--g:min(6.5rem, 28vw);align-content:center;row-gap:.75rem}
.lm-one .gh-stone{width:calc(var(--g)*1.08);height:calc(var(--g)*1.16)}
.lm-one .gh-gem{width:var(--g)}
.lm-one .gh-num b{font-size:3rem}
.lm-one .gh-pills{margin-top:.375rem}
.lm-one .pl-tile{min-height:clamp(5.25rem,calc(var(--vh,1vh)*10),6.5rem)}

/* Speaking coach */
.coach{gap:.875rem}
.co-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.co-tile{display:grid;gap:.125rem;justify-items:center;padding:.625rem .25rem;border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--rim);text-align:center}
.co-tile b{font:800 1.375rem/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.co-tile b small{font:700 .75rem/1 var(--f-ui);margin-left:.0625rem;color:var(--lead)}
.co-tile>span{font:600 .625rem/1.15 var(--f-ui);color:var(--lead)}
.co-row{display:grid;gap:.25rem}
.co-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.co-h b{font:800 .9375rem/1.1 var(--display);letter-spacing:-.02em}
.co-h span{font:800 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--lead)}
.co-bar{height:.5rem;border-radius:var(--r-pill);background:var(--rule);overflow:hidden}
.co-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5B6CFF,#8A5BFF);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.co-row small{font:500 .75rem/1.3 var(--f-ui);color:var(--lead)}
.co-list{display:grid;gap:.375rem;padding:.75rem .875rem;border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--rim)}
.co-list>b{font:800 .75rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.co-list.good>b{color:#0E9F63}.co-list.work>b{color:#D9741A}
.co-list ul{margin:0;padding-left:1.125rem;display:grid;gap:.5rem;font:500 .875rem/1.4 var(--f-ui)}
.co-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}
.co-chips i{font:700 .75rem/1 var(--f-ui);font-style:normal;padding:.25rem .5rem;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--rim)}
.co-said{font-weight:700}.co-fix{color:var(--lead)}
.co-note{padding:.75rem .875rem;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(120,110,255,.16),transparent);box-shadow:var(--rim)}
.co-note small{font:800 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}

/* word order in a lesson: the sentence start on its own line, the words you place on a full-width line, the full stop stays with the last word */
.tiles-line{display:grid;gap:.5rem}
.tiles-line .duo-pre{display:block}
.tiles-line .duo-line{display:flex;width:100%;min-width:0;min-height:3.25rem;align-items:center;align-content:flex-start;padding:.25rem .125rem}
.duo-post{align-self:center;font:500 1.4375rem/1 var(--f-read);color:var(--ink)}
.tile.used{opacity:.55}

/* v16 polish */
body.scrolled .topbar{background:color-mix(in srgb,var(--ground) 95%,transparent)}
.gh-pill small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
.lm-one>.gh-card{align-content:space-evenly}

/* ---------- your plan (plan.js) ---------- */
.pl{display:grid;gap:.875rem;width:100%;text-align:left}
.pl-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:.75rem;padding:1.25rem 1rem 1rem;border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,197,61,.35),transparent 55%),linear-gradient(145deg,#4457FF,#7A5BFF);box-shadow:var(--e2)}
.pl-jump{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
.pl-lv{display:grid;justify-items:center;gap:.125rem;padding:.75rem .5rem .625rem;border-radius:var(--r-lg);background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.pl-lv small{font:700 .6875rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.85}
.pl-lv b{font:800 2.5rem/1 var(--display);letter-spacing:-.03em}
.pl-lv span{font:700 .8125rem/1 var(--f-ui);opacity:.9;font-variant-numeric:tabular-nums}
.pl-lv.goal{background:linear-gradient(160deg,#FFD66B,#FFB01F);color:#3A2600;box-shadow:0 6px 0 #D89412,0 14px 30px -12px rgba(255,176,31,.8)}
.pl-arrow{display:flex;align-items:center;gap:.25rem;color:#fff}
.pl-arrow i{width:.375rem;height:.375rem;border-radius:50%;background:currentColor;opacity:.45;animation:pl-dot 1.4s ease-in-out infinite}
.pl-arrow i:nth-child(2){animation-delay:.18s}.pl-arrow i:nth-child(3){animation-delay:.36s}
.pl-arrow .icon{width:1.25rem;height:1.25rem;stroke-width:3}
@keyframes pl-dot{50%{opacity:1;transform:scale(1.25)}}
.pl-goal{margin:0;text-align:center;font:800 1.125rem/1.2 var(--display);letter-spacing:-.01em}
.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.pl-stat{display:grid;justify-items:center;gap:.125rem;padding:.625rem .25rem;border-radius:var(--r-md);background:rgba(255,255,255,.14);text-align:center}
.pl-stat b{font:800 1.5rem/1 var(--display);font-variant-numeric:tabular-nums}
.pl-stat small{font:600 .6875rem/1.2 var(--f-ui);color:#fff;opacity:.88}
.pl-card{padding:1rem 1rem .875rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--e1)}
.pl-card .eyebrow{margin:0 0 .75rem}
.pl-road{list-style:none;margin:0;padding:0;display:grid;gap:.875rem}
.pl-stop{position:relative;display:grid;grid-template-columns:2.25rem 1fr auto;align-items:start;gap:.75rem}
.pl-stop:not(:last-child)::after{content:"";position:absolute;left:1.0625rem;top:2.5rem;bottom:-.625rem;width:2px;border-radius:2px;background:var(--rule-2)}
.pl-dot{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink)}
.pl-dot .icon{width:1.125rem;height:1.125rem}
.pl-stop.exam .pl-dot{background:linear-gradient(160deg,#FFD66B,#FFB01F);color:#3A2600}
.pl-stop b{display:block;font:700 .9375rem/1.25 var(--f-ui);color:var(--ink)}
.pl-stop small{display:block;font:500 .8125rem/1.3 var(--f-ui);color:var(--lead)}
.pl-when{display:grid;justify-items:end;text-align:right;padding-top:.125rem}
.pl-when b{font-size:.8125rem;white-space:nowrap}
.pl-when small{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em}
.pl-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.pl-day{display:grid;justify-items:center;gap:.375rem}
.pl-day small{font:700 .6875rem/1 var(--f-ui);color:var(--lead);text-transform:capitalize}
.pl-day span{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink)}
.pl-day span .icon{width:1rem;height:1rem}
.pl-day.m span{background:var(--amber-soft);color:var(--amber-ink)}
.pl-day.r span{background:var(--violet-soft);color:var(--violet)}
.pl-day.rest span{background:var(--paper-2)}
.pl-day.rest span i{width:.3rem;height:.3rem;border-radius:50%;background:var(--rule-2)}
.pl-key{display:flex;flex-wrap:wrap;gap:.375rem .875rem;margin-top:.875rem;font:600 .75rem/1.2 var(--f-ui);color:var(--lead)}
.pl-key span{display:inline-flex;align-items:center;gap:.3125rem}
.pl-key .icon{width:.875rem;height:.875rem}
@media (prefers-reduced-motion:reduce){.pl-arrow i{animation:none;opacity:.8}}

/* ---------- listening practice: speed and "back 5 s" (listening.js) ---------- */
.audio-ctl{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.125rem}
.ctl-back{display:inline-flex;align-items:center;gap:.25rem;height:2rem;padding:0 .75rem 0 .5rem;border:0;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font:700 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums}
.ctl-back .icon{width:.9375rem;height:.9375rem;stroke-width:2.8}
.ctl-back:disabled{opacity:.45}
.ctl-rate{display:inline-flex;padding:.1875rem;border-radius:var(--r-pill);background:var(--paper-2)}
.ctl-rate button{height:1.625rem;min-width:2.875rem;padding:0 .5rem;border:0;border-radius:var(--r-pill);background:transparent;color:var(--lead);font:700 .75rem/1 var(--f-ui);font-variant-numeric:tabular-nums}
.ctl-rate button.on{background:var(--paper);color:var(--brand-ink);box-shadow:0 1px 3px rgba(24,32,96,.14)}

/* ---------- result card to share (share.js) ---------- */
.share-btn{gap:.5rem;margin-top:.25rem}
.share-btn .icon{width:1.125rem;height:1.125rem}
.share-prev{display:grid;place-items:center;margin:.25rem 0 1rem}
.share-prev img{display:block;width:auto;max-width:100%;max-height:calc(var(--vh,1vh)*58);aspect-ratio:9/16;border-radius:1.25rem;box-shadow:var(--e2)}

/* ---------- tap a word (words.js) ---------- */
::highlight(lz-word){background-color:rgba(68,87,255,.22);color:inherit}
.wpop{position:fixed;z-index:80;display:grid;gap:.5rem;min-width:13.5rem;max-width:calc(100vw - 20px);padding:.75rem;border-radius:var(--r-lg);
  background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 18px 40px -12px rgba(14,22,90,.45);animation:wpop-in .16s cubic-bezier(.2,.9,.3,1.2)}
.wpop::after{content:"";position:absolute;left:var(--ax,50%);width:.75rem;height:.75rem;margin-left:-.375rem;background:var(--paper);transform:rotate(45deg);box-shadow:1px 1px 0 var(--rule)}
.wpop.up::after{bottom:-.375rem}
.wpop.down::after{top:-.375rem;box-shadow:-1px -1px 0 var(--rule)}
.wpop-w{font:800 1.25rem/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);padding:0 .125rem}
.wpop-row{display:flex;gap:.5rem}
.wpop-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:2.5rem;padding:0 .75rem;border:0;border-radius:var(--r-pill);
  background:var(--paper-2);color:var(--ink);font:700 .875rem/1 var(--f-ui);white-space:nowrap}
.wpop-btn .icon{width:1rem;height:1rem}
.wpop-btn.main{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-edge)}
.wpop-btn.on{background:var(--green-soft);color:var(--green-ink)}
.wpop-all{display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem 0;font:700 .8125rem/1.2 var(--f-ui);color:var(--lead);text-decoration:none}
.wpop-all b{margin-left:auto;padding:.125rem .5rem;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);font-size:.75rem}
.wpop-all .icon{width:.875rem;height:.875rem}
@keyframes wpop-in{from{opacity:0;transform:translateY(4px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.wpop{animation:none}}
.wlist{display:grid;gap:.625rem}
.wrow{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--e1)}
.wrow-main{flex:1;min-width:0;display:grid;gap:.25rem}
.wrow-main b{font:800 1.0625rem/1.2 var(--display);color:var(--ink)}
.wrow-main p{margin:0;font:500 .875rem/1.45 var(--f-read);color:var(--ink-2)}
.wrow-main small{font:700 .6875rem/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--lead)}

/* ---------- unit guidebook (duo.js tipSheet + data-guide.js) ---------- */
.guide{text-align:left}
.guide>.unit-badge,.guide>.eyebrow,.guide>h2{margin-inline:auto;text-align:center}
.guide-body{display:grid;gap:.875rem;margin:.75rem 0 1.125rem}
.guide-idea{margin:0;padding:.875rem 1rem;border-radius:var(--r-md);background:var(--u-soft,var(--brand-soft));color:var(--ink);font:700 1rem/1.4 var(--f-ui)}
.guide-rules{display:grid;gap:.625rem}
.guide-rule{padding:.75rem .875rem;border-radius:var(--r-md);background:var(--paper-2)}
.guide-rule b{display:block;font:700 .9375rem/1.3 var(--f-ui);color:var(--ink)}
.guide-rule p{margin:.25rem 0 0;font:500 .9375rem/1.45 var(--f-read);color:var(--ink-2)}
.guide-trap{display:grid;gap:.375rem;padding:.875rem;border-radius:var(--r-md);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule)}
.guide-trap p{display:flex;gap:.5rem;align-items:flex-start;margin:0;font:600 .9375rem/1.4 var(--f-read)}
.guide-trap .icon{flex:none;width:1.125rem;height:1.125rem;margin-top:.125rem;stroke-width:3}
.guide-no{color:var(--red-ink)}.guide-no span{text-decoration:line-through;text-decoration-color:rgba(242,84,91,.55)}
.guide-yes{color:var(--green-ink)}
.guide-trap small{font:500 .8125rem/1.4 var(--f-ui);color:var(--lead);padding-left:1.625rem}
.guide-exam{display:flex;gap:.625rem;align-items:flex-start;padding:.75rem .875rem;border-radius:var(--r-md);background:var(--amber-soft);color:var(--amber-ink)}
.guide-exam .icon{flex:none;width:1.25rem;height:1.25rem;margin-top:.0625rem}
.guide-exam p{margin:0;font:600 .875rem/1.45 var(--f-ui)}
.duo-rule{display:inline-flex;align-items:center;gap:.375rem;margin-top:.5rem;padding:.4375rem .75rem;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.7);color:var(--red-ink);font:700 .8125rem/1 var(--f-ui)}
.duo-rule .icon{width:.9375rem;height:.9375rem}

/* ---------- today's plan (plan.js today(), Home card, #/plan) ---------- */
.gh-go-t small{display:flex;align-items:center;gap:.5rem}
.gh-dots{display:inline-flex;gap:.25rem}
.gh-dots i{width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor;opacity:.3}
.gh-dots i.on{opacity:1}
.gh-pill-link{display:contents;color:inherit;text-decoration:none}
.pl-today-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem}
.pl-today-head .eyebrow{margin:0}
.pl-tasks{display:grid;gap:.5rem}
.pl-task{display:grid;grid-template-columns:1.625rem 2.25rem 1fr auto;align-items:center;gap:.625rem;padding:.625rem .75rem;border-radius:var(--r-md);background:var(--paper-2);color:var(--ink);text-decoration:none}
.pl-task b{display:block;font:700 .9375rem/1.25 var(--f-ui)}
.pl-task small{display:block;font:500 .75rem/1.3 var(--f-ui);color:var(--lead)}
.pl-task>.icon{width:1rem;height:1rem;color:var(--lead)}
.pl-check{display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rule-2);color:#fff}
.pl-check .icon{width:.9375rem;height:.9375rem;stroke-width:3.2}
.pl-task.done .pl-check{background:var(--green);box-shadow:none}
.pl-task.done b{text-decoration:line-through;text-decoration-color:var(--rule-2);color:var(--lead)}

/* ---------- AI examiner note (examiner.js) and invite a friend (invite.js) ---------- */
.ai-note{margin:.25rem 0 0;font:600 .8125rem/1.4 var(--f-ui);color:var(--lead)}
.ai-note a{color:var(--brand-ink);font-weight:800}
.inv-hero{display:grid;justify-items:center;gap:.5rem;text-align:center;margin:.5rem 0 1rem}
.inv-hero h2{margin:0;font:800 1.375rem/1.2 var(--display);text-wrap:balance}
.inv-hero p{margin:0;max-width:30rem;color:var(--ink-2);font:500 .9375rem/1.45 var(--f-ui)}
.inv-code{display:grid;justify-items:center;gap:.5rem;padding:1.25rem 1rem 1rem;border-radius:var(--r-xl);background:linear-gradient(145deg,#4457FF,#7A5BFF);color:#fff;box-shadow:var(--e2)}
.inv-code small{font:700 .75rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.inv-code b{font:800 2.75rem/1 var(--display);letter-spacing:.16em;padding-left:.16em}
.inv-code .btn{margin-top:.5rem;background:#fff;color:var(--brand-ink);box-shadow:0 4px 0 rgba(20,24,90,.35)}
.inv-skel{width:10rem;height:3rem;border-radius:var(--r-md);background:rgba(255,255,255,.18)}
.inv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem;margin:.75rem 0}
.inv-stat{display:grid;justify-items:center;gap:.125rem;padding:.75rem .5rem;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--e1);text-align:center}
.inv-stat b{font:800 1.25rem/1.1 var(--display);color:var(--ink)}
.inv-stat small{font:600 .6875rem/1.25 var(--f-ui);color:var(--lead)}
.inv-redeem{display:grid;gap:.5rem;margin-top:.5rem}
.inv-input{text-transform:uppercase;letter-spacing:.2em;font-weight:800;text-align:center}
.pw-invite{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin:1rem 0 .5rem;padding:.75rem 1rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--e1);color:var(--ink);text-decoration:none}
.pw-invite b{display:block;font:700 .9375rem/1.2 var(--f-ui)}
.pw-invite small{display:block;font:500 .8125rem/1.3 var(--f-ui);color:var(--lead)}
.pw-invite>.icon{width:1rem;height:1rem;color:var(--lead)}

/* ---------- B1 Preliminary and C1 Advanced (exams.js) ---------- */
.ex-pick{display:flex;gap:.1875rem;padding:.1875rem;margin:0 0 1rem;border-radius:var(--r-pill);background:var(--paper-2);overflow-x:auto;scrollbar-width:none}
.ex-pick::-webkit-scrollbar{display:none}
.ex-pick button{flex:1 0 auto;height:2.25rem;padding:0 .875rem;border:0;border-radius:var(--r-pill);background:transparent;color:var(--lead);font:700 .8125rem/1 var(--f-ui);white-space:nowrap}
.ex-pick button.on{background:var(--paper);color:var(--brand-ink);box-shadow:0 1px 3px rgba(24,32,96,.14)}
.ex-pick button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ex-note{margin:-.25rem 0 1rem;font:500 .875rem/1.45 var(--f-ui)}
.ex-more{display:flex;align-items:center;gap:.75rem;width:100%;margin:-.25rem 0 1.25rem;padding:.75rem .875rem;border:0;border-radius:var(--r-md);background:var(--paper-2);color:var(--lead);font:500 .8125rem/1.45 var(--f-ui);text-align:left;cursor:pointer}
.ex-more b{display:inline-flex;align-items:center;gap:.125rem;flex:none;color:var(--brand-ink);font:700 .8125rem/1 var(--f-ui);white-space:nowrap}
.ex-more b .icon{width:.875rem;height:.875rem}
.ex-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ex-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin:.25rem 0 .5rem}
.ex-actions .btn .icon{width:1rem;height:1rem}
/* B1 Part 1: each short text on its own card, looking like the thing it is */
.notice-q{display:grid;gap:.5rem;padding:.75rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--e1);cursor:pointer;outline:2px solid transparent;outline-offset:-2px}
.notice-q.current{outline-color:var(--blue)}
.notice-q.ok{outline-color:var(--green)}
.notice-q.bad{outline-color:var(--red)}
.notice-q:focus-visible{outline-color:var(--brand)}
.notice-top{display:flex;align-items:center;gap:.5rem}
.notice-top small{color:var(--lead);font:700 .6875rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.notice-top .v{margin-left:auto;min-width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--ink-2);font:800 .8125rem/1 var(--f-ui)}
.notice-q.filled .notice-top .v{background:var(--blue-soft);color:var(--blue-ink)}
.passage.b1-text{margin:0;padding:.875rem 1rem;border-radius:var(--r-md);background:var(--paper-2);font:400 1rem/1.5 var(--f-read);color:var(--ink)}
.passage.b1-text p{margin:0}
.passage.b1-text p+p{margin-top:.25rem}
.passage.b1-text.small{font-size:.9375rem}
.b1-sign{text-align:center;border:2px solid var(--ink-2);background:var(--paper)}
.b1-sign p:first-child{font:800 .9375rem/1.3 var(--f-ui);letter-spacing:.08em}
.b1-phone{max-width:88%;border-radius:1.125rem 1.125rem 1.125rem .375rem;background:var(--blue-soft)}
.b1-mail p:nth-child(-n+2){font:600 .8125rem/1.4 var(--f-ui);color:var(--lead)}
.b1-label{border:1px dashed var(--rule-2);background:var(--paper)}
.b1-label p:first-child{font:800 .875rem/1.3 var(--f-ui);letter-spacing:.05em}
.b1-board{background:var(--amber-soft,var(--paper-2));transform:rotate(-.6deg)}
.b1-board p:first-child{font:800 .9375rem/1.3 var(--f-ui)}
@media (prefers-reduced-motion:reduce){.b1-board{transform:none}}

/* ---------- juice: chests, flying gems, sparks (juice.js) ---------- */
.jc{position:relative;display:grid;place-items:center;width:11rem;height:10rem;margin:.25rem auto 0;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jc .obj{position:relative;z-index:1;transform-origin:50% 88%}
.jc-glow{position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,80,.85),rgba(255,160,40,.32) 42%,transparent 68%);filter:blur(10px);opacity:.8}
.jc-rays{position:absolute;left:50%;top:48%;width:22rem;height:22rem;margin:-11rem 0 0 -11rem;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,110,.5) 0 9deg,transparent 9deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);transform:scale(.4)}
.jc-idle .obj{animation:jc-rattle 1.8s ease-in-out infinite}
.jc-idle .jc-glow{animation:jc-breathe 1.8s ease-in-out infinite}
.jc-charge .obj{animation:jc-charge .82s cubic-bezier(.36,.07,.19,.97) both}
.jc-charge .jc-glow{animation:jc-flare .82s ease-in both}
.jc-open .obj{animation:jc-pop .62s cubic-bezier(.2,.9,.3,1.35) both}
.jc-open .jc-glow{opacity:1;transform:scale(1.35);transition:transform .4s}
.jc-open .jc-rays{opacity:1;transform:scale(1);transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.3,1.2);animation:jc-spin 9s linear infinite}
.jc:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:1.5rem}
@keyframes jc-rattle{0%,42%,100%{transform:none}47%{transform:rotate(-12deg) scale(1.08)}52%{transform:rotate(12deg) scale(1.1)}57%{transform:rotate(-11deg) scale(1.09)}62%{transform:rotate(10deg) scale(1.07)}67%{transform:rotate(-6deg) scale(1.04)}73%{transform:rotate(0) translateY(-12px) scale(1.05)}82%{transform:translateY(0) scale(.97,1.03)}90%{transform:scale(1.01,.99)}}
@keyframes jc-breathe{0%,40%,100%{opacity:.6;transform:scale(.92)}60%{opacity:1;transform:scale(1.12)}}
@keyframes jc-charge{0%{transform:none}10%{transform:rotate(-5deg)}20%{transform:rotate(5deg)}30%{transform:rotate(-8deg) scale(1.04)}40%{transform:rotate(8deg) scale(1.06)}50%{transform:rotate(-11deg) scale(1.08)}60%{transform:rotate(11deg) scale(1.1)}70%{transform:rotate(-14deg) scale(1.12)}80%{transform:rotate(14deg) scale(1.14)}90%{transform:rotate(-8deg) scale(1.16) translateY(-4px)}100%{transform:scale(.9)}}
@keyframes jc-flare{from{opacity:.6;transform:scale(.9)}to{opacity:1;transform:scale(1.3)}}
@keyframes jc-pop{0%{transform:scale(.9)}45%{transform:scale(1.28) translateY(-10px) rotate(-4deg)}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1.14)}}
@keyframes jc-spin{to{transform:rotate(360deg)}}
.fly-obj{position:fixed;left:0;top:0;z-index:300;pointer-events:none;}
.fly-obj .obj{display:block}
.chip.bump{animation:jc-bump .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes jc-bump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
/* the streak flame is alive while the streak is */
.chip.streak:not(.off) .obj{transform-origin:50% 90%;animation:jc-flicker 1.9s ease-in-out infinite}
@keyframes jc-flicker{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.06,1.1) rotate(-3deg)}50%{transform:scale(.97,1.02) rotate(2deg)}75%{transform:scale(1.04,1.08) rotate(-1deg)}}
/* chests waiting on the Learn path and in Quests rattle too */
.tl-row.tl-chest.tl-next .tl-obj,.hb-chestrow.ready .obj{transform-origin:50% 88%;animation:jc-rattle 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.jc-idle .obj,.jc-idle .jc-glow,.jc-charge .obj,.jc-open .obj,.jc-open .jc-rays,.chip.bump,.chip.streak .obj,.tl-row.tl-chest .tl-obj,.hb-chestrow .obj{animation:none!important}}

/* Speaking photos: B1 Preliminary describes one, B2 First compares two, C1 Advanced picks two of three.
   minmax(0,1fr) and min-width:0 – with an aspect-ratio, a plain 1fr track grew past the screen edge. */
.photos{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo{min-width:0}
.photos.one{grid-template-columns:minmax(0,1fr)}
@media (min-width:721px){.photos.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.photos{grid-template-columns:minmax(0,1fr)}.photos.three .photo{aspect-ratio:auto;min-height:118px}}
/* Result rows: keep the chevron on the same line on phones (it used to wrap under the number) */
@media (max-width:720px){.partrow{grid-template-columns:auto minmax(0,1fr) auto}}
/* the question before the first AI marking */
.ai-consent{display:grid;gap:.75rem;text-align:left}
.ai-consent h2{margin:0 1.75rem .25rem 0;font:800 1.375rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ai-consent p{margin:0}
.ai-consent .btn.block:first-of-type{margin-top:.5rem}
/* the exam switch inside onboarding: a clear, big choice on the dark welcome screens */
.onb .ex-pick{margin:.25rem 0 .75rem;padding:.25rem}
.onb .ex-pick button{height:2.75rem;font-size:.875rem}
.onb .ex-pick button.on{background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(51,80,240,.35)}

/* ---------- Settings as its own page, pushed over the app (like a native settings screen) ---------- */
body.in-screen{padding-left:16px;padding-bottom:calc(2rem + var(--sab, env(safe-area-inset-bottom)))}
body.in-screen .sidebar,body.in-screen .topbar,body.in-screen .bottomnav{display:none!important}
/* a calm, solid ground instead of the living background, so it reads as a different window */
body.in-screen::before{background:var(--ground);animation:none}
.scr{animation:scr-in .34s cubic-bezier(.2,.8,.2,1) both;}
.scr.leaving{animation:scr-out .22s cubic-bezier(.4,0,1,1) both}
@keyframes scr-in{from{transform:translateX(38%);opacity:0}to{transform:none;opacity:1}}
@keyframes scr-out{to{transform:translateX(42%);opacity:0}}
.scr-bar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:2.75rem 1fr 2.75rem;align-items:center;
  margin:0 -16px;padding:calc(var(--sat, env(safe-area-inset-top)) + .375rem) .625rem .5rem;
  background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 -1px 0 var(--rule)}
.scr-bar h1{margin:0;text-align:center;font:800 1.0625rem/1.2 var(--f-ui);letter-spacing:-.01em;color:var(--ink)}
.scr-back{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);-webkit-tap-highlight-color:transparent}
.scr-back:active{background:var(--paper-2)}
.scr-back svg{width:1.5rem;height:1.5rem}
.scr-search{display:flex;align-items:center;gap:.5rem;height:2.5rem;margin:.875rem 0 .25rem;padding:0 .875rem;border-radius:.875rem;background:var(--paper-2);color:var(--lead)}
.scr-search svg{width:1.125rem;height:1.125rem;flex:none}
.scr-search-in{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:500 1rem/1 var(--f-ui);outline:none;-webkit-appearance:none;appearance:none}
.scr-search-in::-webkit-search-cancel-button{-webkit-appearance:none}
.scr-search:focus-within{box-shadow:0 0 0 2px var(--brand)}
.scr-none{margin:1.5rem .5rem;text-align:center}
@media (prefers-reduced-motion:reduce){.scr,.scr.leaving{animation:none}}
.scr .scr-search .scr-search-in{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0;padding:0;margin:0}

/* ---------- polish: locked test cards keep their colour, just quieter ---------- */
.test-card.locked .tc-art .art{filter:saturate(.72) brightness(.96)}
.test-card.locked .tc-art::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%)}
.test-card.locked .tc-lock{box-shadow:0 4px 14px rgba(40,20,90,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.test-card .tc-body small{color:var(--ink-3, var(--ink-2))}
.test-card:hover{transform:translateY(-2px)}
@media (hover:none){.test-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.test-card,.test-card:hover,.test-card:active{transform:none;transition:none}}

/* The answer dock is a one-column grid: without minmax(0,1fr) a long "Tap to answer" label
   pushed the Answer button past the right edge on narrow phones (C1 Listening Part 4). */
.dock-in{grid-template-columns:minmax(0,1fr)}
.dock-slim{min-width:0}

.wn-ic.violet{background:var(--violet)} .wn-ic.blue{background:var(--brand)}

/* ---------- an app, not a web page ----------
   A long press used to select the interface itself (the level chip, the gem) and pop up iOS's
   Copy / Look Up / Translate menu. Only the fields you type in are selectable; tapping a word in an
   exam text still opens Lozenge's own look-up (words.js). */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg{-webkit-user-drag:none}

/* Settings' only way in (Me › gear): a full-size, clearly visible button. */
.pf-gear{width:2.75rem;height:2.75rem;top:.75rem;right:.75rem;color:var(--ink);background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:var(--e1),inset 0 0 0 1px var(--rule)}
.pf-gear .icon{width:1.375rem;height:1.375rem}

/* Screens never float: no rubber band and nothing that can be dragged sideways (a pushed screen's
   slide-in used to widen the page for a moment, which let the whole app scroll left and right). */
html,body{overscroll-behavior:none}
html,body{overflow-x:clip}

/* Listening, one extract at a time: the card holds the situation, the player and the question */
.extract.one{display:grid;gap:.75rem;padding:1.125rem;cursor:default;border-color:transparent}
.extract.one .row{align-items:center}
.extract.one .ctx{font-size:1rem;color:var(--ink-2)}
.extract.one .qq{margin:0;font:800 1.1875rem/1.4 var(--f-ui);color:var(--ink)}
.extract.one.ok{border-color:var(--right)} .extract.one.bad{border-color:var(--wrong)}

/* ---------- Me: calmer and shorter ---------- */
.pf-hero{padding:1.125rem 1rem 1rem;gap:.25rem}
.pf-lozzy{width:5.75rem}
.pf-hero h1{font-size:1.875rem}
.pf-skills{display:grid;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.pf-skill{display:grid;grid-template-columns:minmax(0,1fr) 6rem 2.25rem;align-items:center;gap:.75rem;font:600 .9375rem/1.3 var(--f-ui);color:var(--ink-2)}
.pf-skill .skill,.pf-skill .trk{display:block}
.pf-skill b{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.pf-focus{margin-top:.875rem}
/* the links sit in one card as rows, not six separate cards */
.pf-links.grouped{gap:0;border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--e1);overflow:hidden}
.pf-links.grouped .pf-link{border-radius:0;background:transparent;box-shadow:none;padding-block:.625rem}
.pf-links.grouped .pf-link+.pf-link{box-shadow:inset 0 1px 0 var(--rule)}
.pf-links.grouped .pf-link svg:first-child,.pf-links.grouped .pf-link .obj{width:2.25rem;height:2.25rem}
a.pf-sec{text-decoration:none;color:var(--ink);align-items:center;gap:.5rem}
a.pf-sec small{margin-left:auto}
a.pf-sec .icon{width:1.125rem;height:1.125rem;color:var(--lead)}
.badges.few{grid-template-columns:repeat(4,minmax(0,1fr))}
.badges.few .bdg small{display:none}
@media (max-width:380px){.badges.few{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Plus banner: nothing sits under the close button, and the film button can be read ---------- */
.pw-close{z-index:3;width:2.75rem;height:2.75rem;background:rgba(20,10,60,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pw-float{z-index:0;pointer-events:none}
.pw-float.f1{left:6%;top:30%}.pw-float.f2{right:6%;top:24%}
.pw-float.f3{left:12%;top:50%}.pw-float.f4{right:10%;top:48%}
@media (max-width:420px){.pw-float.f3,.pw-float.f4{display:none}}
.pw-watch{display:inline-flex;align-items:center;gap:.5rem;margin-top:.875rem;padding:.625rem 1.125rem;border:0;border-radius:999px;
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);color:#fff;font:700 .9375rem/1 var(--f-ui);cursor:pointer}
.pw-watch .icon{width:1rem;height:1rem}
.pw-watch:active{transform:scale(.97)}

/* the ISIC number under the student plan */
.isic{display:grid;gap:.375rem;margin:.75rem 0 0;padding:1rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--e1)}
.isic b{font:800 1rem/1.2 var(--f-ui);color:var(--ink)}
.isic small{color:var(--lead);font-size:.8125rem;line-height:1.45}
.isic .typein{letter-spacing:.08em;text-transform:uppercase}

/* ---------- the streak moment ---------- */
.celebrate.streak{isolation:isolate;background:radial-gradient(70% 46% at 50% 30%,rgba(255,138,40,.42),transparent 72%),linear-gradient(180deg,#1C0F2C,#0A0A1C 70%)}
.celebrate.streak .cel-in h1{color:#fff}
.celebrate.streak .cel-in p{color:rgba(255,255,255,.82)}
.cel-embers{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.celebrate.streak .cel-obj{animation:cel-ignite .9s cubic-bezier(.2,.9,.3,1.25) both,float 3.4s ease-in-out 1.1s infinite}
.celebrate.streak .cel-glow{animation:cel-flare 1.1s ease-out both,twinkle 3.2s ease-in-out 1.1s infinite}
@keyframes cel-ignite{0%{transform:scale(.18) translateY(35%);opacity:0;filter:saturate(.3) brightness(.5)}45%{transform:scale(1.14);opacity:1;filter:none}62%{transform:scale(.93)}78%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes cel-flare{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.35)}100%{opacity:.85;transform:scale(1)}}
/* the day count rolls: the old number goes up and out, the new one comes in from below */
.cel-roll{position:relative;display:grid;overflow:hidden;height:1em;margin-top:3.25rem;font:800 4.5rem/1 var(--display);letter-spacing:-.06em;color:#fff;text-shadow:0 4px 20px rgba(200,60,0,.55)}
.cel-roll b{grid-area:1/1;font:inherit;transition:transform .55s cubic-bezier(.3,1.4,.4,1),opacity .35s}
.cel-roll .new{transform:translateY(105%);opacity:0}
.cel-roll.go .old{transform:translateY(-105%);opacity:0}
.cel-roll.go .new{transform:none;opacity:1}
/* this week's days light up one after another */
.celebrate.streak .cel-week .wd{animation:cel-day .42s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(1.05s + var(--i) * 80ms)}
.celebrate.streak .cel-week small{color:rgba(255,255,255,.7)}
@keyframes cel-day{0%{transform:scale(.4) translateY(8px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.celebrate.streak .cel-obj,.celebrate.streak .cel-glow,.celebrate.streak .cel-week .wd{animation:none}.cel-roll b{transition:none}}

/* the Plus film's perks scene starts below the top bar, so the reward chip never sits on its title */
.fm-scene.s-perks{justify-content:flex-start;padding-top:1.5rem}
.tr-earn{max-width:62vw;overflow:hidden;text-overflow:ellipsis}
.pf-skill .trk{height:.5rem;border-radius:999px;background:var(--rule);overflow:hidden}
.pf-skill .trk i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--violet))}
/* Settings icons: a quiet tinted glyph instead of a row of solid colour blocks */
.st-ic{background:color-mix(in srgb,var(--t,#4457FF) 13%,transparent);color:var(--t,#4457FF)}
:root[data-theme="dark"] .st-ic{background:color-mix(in srgb,var(--t,#4457FF) 24%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-ic{background:color-mix(in srgb,var(--t,#4457FF) 24%,transparent)}}
/* Onboarding: a date field is blank until picked on Android, so it carries its own caption */
.onb-date{display:grid;gap:.375rem}
.onb-date small{padding-inline:.25rem;font:600 .8125rem/1.2 var(--f-ui);color:var(--ink-3,var(--muted))}

/* ---------- Lesson chrome: one surface each ----------
   The answer bar is a single frosted sheet across the whole width; its content sits inside with the
   page's own gutter. (It used to be a card inside a bar, with the answers pressed against the card's edge.) */
.dock{--dock-bg:var(--dock-fill);border-radius:1.5rem 1.5rem 0 0;border-top:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 -14px 34px -22px rgba(8,12,40,.55)}
.dock.ok{--dock-bg:color-mix(in srgb,var(--right) 16%,var(--dock-fill))}
.dock.bad{--dock-bg:color-mix(in srgb,var(--wrong) 16%,var(--dock-fill))}
.dock.mid{--dock-bg:color-mix(in srgb,var(--amber) 18%,var(--dock-fill))}
.dock-in{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the lesson's top bar reaches both edges (it was a dark band inset by the page gutter) */
.lesson-top{margin-inline:-16px;padding-inline:16px;background:color-mix(in srgb,var(--ground) 82%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}

/* ---------- Listening ----------
   Part 1 is one calm screen: which extract, the situation, one player, the question, the answers.
   No card inside a card, nothing floating over the recording; Skip / Check wait in the bar below. */
.lesson.flow{padding-bottom:calc(var(--dock-h) + 1.25rem)}
.lesson.flow .lesson-head{margin:.25rem 0 1rem}
.lesson.flow .lesson-head h1{font-size:1.5rem}
.lx{display:grid;gap:.875rem;padding:0;background:none;border:0;box-shadow:none;cursor:default}
.lx-step{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:0;
  font:700 .75rem/1.2 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink)}
.lx-of{font-weight:600;letter-spacing:0;text-transform:none;color:var(--lead);font-variant-numeric:tabular-nums;white-space:nowrap}
.lx-ctx{margin:0;font:500 1.0625rem/1.5 var(--f-ui);color:var(--ink-2)}
.lx-q{margin:.375rem 0 0;font:800 1.25rem/1.35 var(--f-ui);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.flow-opts{margin-top:1rem}
.flow-opts .lx-a{display:grid;gap:.875rem;padding:0;background:none;border:0;box-shadow:none;cursor:default}
.flow-opts .opts{display:grid;gap:.625rem}
.flow-opts .transcript{margin-top:.25rem}

/* the player: one card, big play button, the bar, then time and controls – nothing wraps into a tower */
.listen .audio{display:flex;align-items:center;gap:1rem;padding:1rem 1.125rem;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--glass-line);box-shadow:var(--e1)}
.listen .audio .play{width:3.5rem;height:3.5rem;flex:none}
.listen .audio .meta{flex:1;min-width:0;display:grid;gap:.5rem}
.lx .audio .meta > b{display:none}
.listen .seek{height:.375rem;border-radius:var(--r-pill)}
.listen .seek i{border-radius:var(--r-pill)}
.audio .sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.audio-ctl{flex-wrap:wrap;row-gap:.5rem}
.ctl-back,.ctl-rate button{white-space:nowrap;flex:none}
.ctl-rate{flex:none}

/* daily chest: what came out of it, and the Quests row when it is waiting */
.chest-loot{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin:.25rem 0 1rem}
.chest-loot > span{display:grid;justify-items:center;gap:.125rem;min-width:5.5rem;padding:.75rem .5rem;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--glass-line);animation:pop .45s cubic-bezier(.2,1.3,.4,1) both}
.chest-loot > span:nth-child(2){animation-delay:.12s}.chest-loot > span:nth-child(3){animation-delay:.24s}
.chest-loot b{font:800 1.375rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.chest-loot small{font:600 .75rem/1.2 var(--f-ui);color:var(--lead)}
button.hb-chestrow{width:100%;text-align:left;border:2px solid var(--amber);background-color:color-mix(in srgb,var(--amber) 12%,transparent);cursor:pointer;font:inherit;color:inherit}
button.hb-chestrow > .icon{color:var(--amber-ink,var(--amber))}
@media (prefers-reduced-motion:reduce){.chest-loot > span{animation:none}}

/* A page head on a full-screen route (no top bar above it – Smart review's "all caught up", reset password)
   starts below the status bar instead of under the clock. */
body.in-lesson #app > .content-narrow > .pagehead:first-child{padding-top:calc(var(--sat, env(safe-area-inset-top)) + .75rem)}
.flow-prev{flex:none;width:3rem;padding:0}
.dock.flow .dock-foot{flex-wrap:nowrap}
.dock.flow .dock-foot .verdict{flex:1 1 100%}
.dock.flow .dock-foot:has(.verdict){flex-wrap:wrap}
html.mid-text .topbar .brand b{display:none}
/* on most phones the counters need the room: the mark alone is the brand there */
@media (max-width:420px){.topbar .brand b{display:none}}

/* Larger text on a narrow phone: labels wrap between words, never letter by letter; the exam picker
   lets a name take two lines instead of being cut off; "Start here" sits above the lesson title. */
.st-t b{overflow-wrap:break-word;hyphens:auto}
.st-v{max-width:44%;overflow-wrap:break-word}
.tl-card:has(> .tl-now) > b{padding-right:6.25rem}
html.mid-text .tl-now{position:static;justify-self:start;margin-bottom:.125rem}
html.mid-text .tl-card:has(> .tl-now) > b{padding-right:0}
html.mid-text .ex-pick button{flex:1 1 0;min-width:0;height:auto;min-height:2.25rem;padding:.375rem .5rem;white-space:normal;line-height:1.15;border-radius:1rem}
html.mid-text .ex-pick{border-radius:1.25rem}
.best-streak{display:inline-flex;align-items:center;gap:.25rem;font-weight:700}
.best-streak b{color:var(--ink)}
.best-streak .icon{width:.9375rem;height:.9375rem;color:var(--flame,#FF8A1F)}

/* ---------- gem history ---------- */
.sh-balance{border:0;font:inherit;cursor:pointer}
.sh-hist{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;width:100%;margin:0 0 1rem;padding:.75rem 1rem;
  border:1px solid var(--glass-line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.sh-hist > .obj{grid-row:1/3}
.sh-hist span{font:700 .9375rem/1.2 var(--f-ui)}
.sh-hist .sh-bal{font:800 1.375rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.sh-hist small{grid-column:2;color:var(--lead);font:500 .75rem/1.3 var(--f-ui)}
.sh-hist > .icon:last-child{grid-row:1/3;grid-column:3;color:var(--lead)}
.gl{display:grid;gap:.875rem}
.gl-top{display:grid;justify-items:center;gap:.125rem}
.gl-top b{font:800 2.5rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.gl-top small{color:var(--lead);font:600 .8125rem/1 var(--f-ui)}
.gl-week{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.gl-week span{display:grid;gap:.25rem;padding:.625rem .75rem;border-radius:var(--r-md,.875rem);background:var(--paper-2)}
.gl-week small{color:var(--lead);font:600 .75rem/1.2 var(--f-ui)}
.gl-week b{font:800 1.25rem/1 var(--f-ui);font-variant-numeric:tabular-nums}
.gl .in{color:var(--right)} .gl .out{color:var(--wrong)}
.gl-list{display:grid;max-height:calc(var(--vh,1vh)*46);overflow:auto;margin-inline:-.25rem;padding-inline:.25rem}
.gl-day{margin:.75rem 0 .25rem;font:700 .75rem/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--lead)}
.gl-day:first-child{margin-top:0}
.gl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.gl-row b{display:block;font:700 .9375rem/1.25 var(--f-ui);color:var(--ink)}
.gl-row small{color:var(--lead);font:500 .75rem/1.2 var(--f-ui);font-variant-numeric:tabular-nums}
.gl-n{font:800 1rem/1 var(--f-ui);font-variant-numeric:tabular-nums}
.gl-empty{text-align:center;margin:.5rem 0}

/* ---------- Settings: Duolingo's order, the app's own glass cards ---------- */
.st-body{display:grid;gap:1.25rem;padding:.25rem 0 2rem}
.st-body .st-group{margin:0}
.st-btn{min-height:3.25rem}
.st-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;padding-top:.25rem}
.st-link{color:var(--brand-ink);font:700 .8125rem/1.2 var(--f-ui);text-decoration:none}
.st-legal span{color:var(--lead);font:600 .8125rem/1.2 var(--f-ui)}
.st-body .st-foot.center{margin-top:0}

/* Home: the reminder nudge (app only, reminders off) */
.rnudge{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.625rem;margin:0 0 .75rem;padding:.5rem .375rem .5rem .75rem;
  border-radius:var(--r-lg);border:1px solid var(--glass-line);background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%),var(--paper)}
.rnudge-art{position:relative;width:2.5rem;height:2.5rem;flex:none}
.rnudge-art > :first-child{width:100%;height:100%}
.rnudge-bell{position:absolute;right:-.3rem;bottom:-.2rem;display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:#FFC53D;color:#5A3A00}
.rnudge-bell .icon{width:.75rem;height:.75rem}
.rnudge p{margin:0;font:700 .875rem/1.3 var(--f-ui);color:var(--ink);text-wrap:balance}
.rnudge .btn.sm{white-space:nowrap}
.rnudge-x{display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;background:none;color:var(--lead)}
.rnudge-x .icon{width:1rem;height:1rem}

/* the exam the app is set to – a label, not a switch (changed in Settings › Your exam) */
.ex-badge{display:inline-flex;align-items:baseline;gap:.5rem;margin:0 0 1rem;padding:.4375rem .875rem;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--glass-line);color:var(--ink);text-decoration:none}
.ex-badge b{font:800 .875rem/1.2 var(--f-ui);color:var(--brand-ink)}
.ex-badge small{font:600 .75rem/1.2 var(--f-ui);color:var(--lead)}

/* ---------- Use of English: like the printed paper ----------
   A gap is its number and a line, not a bubble; answers keep the case you typed; the sentence above the
   answer box is plain text (it used to sit in a second card with a second bubble). */
.passage .gap,.prompt .gap,.kwt .gap{display:inline;min-height:0;padding:0 .125rem .0625rem;border:0;border-bottom:2px solid var(--rule-2);border-radius:0;
  background:none;box-shadow:none;font:600 1em/1.6 var(--f-read);color:var(--ink);white-space:nowrap;vertical-align:baseline;cursor:pointer}
.passage .gap .n,.prompt .gap .n{display:inline;min-width:0;height:auto;margin-right:.3em;padding:0;border-radius:0;background:none;
  color:var(--brand-ink);font:800 .7em/1 var(--f-ui);vertical-align:.15em}
.passage .gap .gv,.prompt .gap .gv{color:var(--lead);font-weight:600}
.passage .gap.filled .gv,.prompt .gap.filled .gv{color:var(--ink)}
.passage .gap.current,.prompt .gap.current{border-bottom-color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent);border-radius:.3rem .3rem 0 0}
.passage .gap.ok,.prompt .gap.ok{border-bottom-color:var(--right);background:none}
.passage .gap.ok .n,.passage .gap.ok .gv{color:var(--right);background:none}
.passage .gap.bad,.prompt .gap.bad{border-bottom-color:var(--wrong);background:none}
.passage .gap.bad .n,.passage .gap.bad .gv{color:var(--wrong);background:none}
.passage .gap.mid{border-bottom-color:var(--amber);background:none}
.passage .gap.mid .n{background:none;color:var(--amber-ink,var(--amber))}
.passage .gap.eg{border-bottom-style:dashed;cursor:default}
.dock .prompt{margin:0;padding:0;border:0;background:none;box-shadow:none;font:400 1.0625rem/1.7 var(--f-read);color:var(--ink)}
.uoe-answer{flex-wrap:nowrap;align-items:center;gap:.625rem}
.uoe-answer .typein{flex:1;min-width:0}
.kwt .blank{text-transform:none}

/* shop: gem packs */
.sh-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;margin-bottom:.5rem}
.sh-pack{position:relative;display:grid;justify-items:center;gap:.25rem;padding:1rem .375rem .75rem;border-radius:var(--r-lg);border:1px solid var(--glass-line);
  background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--e1)}
.sh-pack.best{border:2px solid var(--amber);background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 16%,transparent),transparent 70%),var(--paper)}
.sh-pack:disabled{opacity:.6}
.sh-pack-art{height:4.25rem;display:grid;place-items:center}
.sh-pack b{font:800 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.sh-pack small{font:600 .6875rem/1.2 var(--f-ui);color:var(--lead);text-align:center}
.sh-pack-price{margin-top:.375rem;padding:.375rem .75rem;border-radius:var(--r-pill);background:var(--brand);color:#fff;font:800 .8125rem/1 var(--f-ui);white-space:nowrap}
.sh-pack-tag{position:absolute;top:-.625rem;left:50%;transform:translateX(-50%);padding:.1875rem .5rem;border-radius:var(--r-pill);background:var(--amber);color:#4A2E00;font:800 .625rem/1.2 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.sh-pack.skeleton{min-height:9.5rem;cursor:default}
.sh-packs-off{margin:0 0 .75rem}
.sh-pack.off{opacity:.5;cursor:default}
.sh-packs-none{display:grid;justify-items:center;gap:.5rem;margin:.25rem 0 .75rem;text-align:center}
.sh-packs-none .sh-note{margin:0}
.gl-since{margin:0;text-align:center;font:500 .75rem/1.3 var(--f-ui)}
/* Home is a column that fills the screen: nothing in it may be squeezed onto its neighbour
   (the reminder nudge was pressed up over the greeting) */
.lm-one>*{flex-shrink:0}
.lm-one>.rnudge{margin:0}
/* Settings buttons in the app's glass, not a grey system button */
/* (the generic grey button rule is a long :not() chain, so this needs !important to win) */
.btn.st-btn{background:var(--paper)!important;border:1px solid var(--glass-line);color:var(--brand-ink)!important;box-shadow:var(--e1)!important;font-weight:800}

/* ---------- accessibility and comfort ---------- */
/* right and wrong are never colour alone: a tick or a cross comes with them */
.opt.ok::after,.duo-opt.right::after{content:"✓";margin-left:auto;font:800 1.125rem/1 var(--f-ui);color:var(--right)}
.opt.bad::after,.duo-opt.wrong::after{content:"✗";margin-left:auto;font:800 1.125rem/1 var(--f-ui);color:var(--wrong)}
/* everything you tap is at least 44 × 44 points */
.sheet-x{width:44px;height:44px}
.btn.sm{min-height:2.75rem}
.rnudge-x{width:44px;height:44px}
.qnav button{min-width:44px;min-height:44px}
.switch{position:relative}
.switch::before{content:"";position:absolute;inset:-6px -2px}
/* long texts sit on a solid page, not on the moving glass */
:root{--paper-solid:#FBFCFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper-solid:#12163A}}
:root[data-theme="dark"]{--paper-solid:#12163A}
.passage{background:var(--paper-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* a disabled button looks disabled */
.btn:disabled,.btn[disabled]{opacity:.5;filter:saturate(.4);box-shadow:none!important;cursor:default}
/* the pushed-screen animation doesn't keep a GPU layer alive afterwards */
.scr{will-change:auto}
.mic-off{display:flex;align-items:flex-start;gap:.5rem;margin:.5rem 0 0}
.mic-off .icon{flex:none;width:1.125rem;height:1.125rem;margin-top:.125rem}

/* ---------- F1: the tab bar sits on the bottom edge (not floating over the content) ---------- */

/* ---------- F2: working screens use the plain UI face for headings; the display face stays for Home,
   the shop and celebrations ---------- */
.lesson-head h1,.scr-bar h1,.st-h,.pagehead h1,.tsec-head h2,.lx-q,.duo-screen h1{font-family:var(--f-ui);font-weight:800;letter-spacing:-.02em}

/* ---------- F3: compact horizontal profile hero ---------- */
.pf-hero--row{display:flex;align-items:center;gap:1rem;padding:1rem 1.125rem;text-align:left;justify-items:unset}
.pf-hero--row .pf-glow{display:none}
.pf-hero--row .pf-lozzy{width:4rem;animation:none;flex-shrink:0}
.pf-hero--row .pf-info{flex:1;min-width:0;display:grid;gap:.125rem}
.pf-hero--row h1{font-size:1.375rem;margin:0}
.pf-hero--row .pf-title{margin:0}
.pf-hero--row .pf-level{width:100%;margin-top:.375rem}
.pf-hero--row .pf-next{margin-bottom:0}
.pf-acts{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.pf-act{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 60%,transparent);color:var(--ink-2);text-decoration:none}
.pf-act .icon{width:1.125rem;height:1.125rem}

/* ---------- F4: topbar polish ---------- */
.topbar{gap:.375rem}
.topbar .chip{padding:.25rem .625rem;gap:.3125rem;font-size:.875rem}

/* ---------- F5: tighter gem card on Home ---------- */
.lm-one .gh-card{padding:.875rem .875rem .75rem}
.gh-num b{font-size:2.5rem}
.gh-sub{font-size:.8125rem;line-height:1.3;margin:0}
.gh-card .gh-stone{width:min(7rem,30vw);height:auto}
.gh-card .gh-gem{width:100%;height:auto}

/* ---------- F6: Shop link on Home ---------- */
.gh-shop{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;margin-bottom:.5rem;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--p-lav),var(--p-sky));box-shadow:var(--e1);color:var(--ink);text-decoration:none;transition:transform .15s}
.gh-shop:active{transform:scale(.98)}
.gh-shop-t{flex:1;min-width:0}
.gh-shop-t b{display:block;font:800 1.125rem/1.2 var(--f-ui)}
.gh-shop-t small{display:block;font:600 .8125rem/1.2 var(--f-ui);color:var(--ink-2)}
.gh-shop>.icon{color:var(--ink-2);width:1.25rem;height:1.25rem;flex-shrink:0}

/* ---------- slide-to-confirm ---------- */
.sc-track{position:relative;height:3.5rem;border-radius:1.75rem;background:var(--p-pink);overflow:hidden;touch-action:none;user-select:none}
.sc-track.sc-done{background:var(--brand)}
.sc-label{position:absolute;inset:0;display:grid;place-items:center;font:700 .9375rem/1 var(--f-ui);color:var(--ink);opacity:calc(1 - var(--sc-pct, 0));pointer-events:none;transition:opacity .1s}
.sc-thumb{position:absolute;left:.25rem;top:.25rem;width:3rem;height:3rem;border-radius:50%;background:var(--paper);box-shadow:var(--e1);display:grid;place-items:center;cursor:grab;will-change:transform;transition:background .15s}
.sc-thumb:active{cursor:grabbing}
.sc-thumb>.icon{width:1.25rem;height:1.25rem;color:var(--ink)}
.sc-done .sc-thumb{background:var(--brand-soft)}
.sc-done .sc-thumb>.icon{color:var(--brand)}

/* ---------- inside the native iPhone app (SwiftUI shell) ----------
   The app draws the top counters and the tab bar itself; the page only shows the screen's content. */
html.native-shell .topbar,html.native-shell .bottomnav,html.native-shell .sidebar{display:none!important}
html.native-shell body{padding-top:max(var(--native-top,0px),var(--sat,env(safe-area-inset-top)));padding-bottom:calc(var(--native-tabbar,0px) + 1rem)}
html.native-shell body.in-lesson,html.native-shell body.in-screen{padding-top:0;padding-bottom:0}
/* the empty route behind a native screen: nothing of the page shows, only its sheets and toasts */
html.native-idle,html.native-idle body,html.native-idle-overlay,html.native-idle-overlay body{background:transparent!important}
html.native-idle body::before,html.native-idle body::after,html.native-idle-overlay body::before,html.native-idle-overlay body::after{display:none!important}
.native-idle-page{min-height:1px}
/* iOS WebKit gives a date field a fixed intrinsic width, which pushed it past the right edge on narrow phones */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.oog-sheet{display:grid;justify-items:center;gap:.75rem;text-align:center;padding:.5rem 0 .25rem}
.oog-sheet h2{margin:0}.oog-sheet p{margin:0 0 .5rem;max-width:30ch}
/* Free / Lite / Plus side by side on a phone */
.pw-compare.three .pw-row{grid-template-columns:minmax(0,1fr) 60px 52px 72px;gap:6px;padding:11px 12px;font-size:.84rem}
.pw-compare.three .pw-row span{font-size:.78rem}
.pw-compare.three .pw-row span .icon{width:16px;height:16px;color:var(--right);stroke-width:3}

/* ---------- strict exam mode (strict.js) ---------- */
.strict-cta{display:flex;align-items:center;gap:.875rem;width:100%;margin-top:.5rem;padding:.875rem 1rem;border-radius:1.5rem;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);color:#fff;background:linear-gradient(135deg,#1c2250,#3b2a8c 60%,#5b3cf0);box-shadow:0 18px 36px -18px rgba(40,30,140,.7)}
.strict-cta b{display:block;font:800 1.0625rem/1.2 var(--ui)}
.strict-cta small{display:block;opacity:.8;font:600 .8125rem/1.35 var(--ui)}
.strict-cta>span:not(.obj){flex:1}
.strict-cta .icon{opacity:.8}
.strict-sheet,.strict-warn{display:grid;gap:.875rem;text-align:center;padding:.25rem .25rem .5rem}
.strict-sheet h2,.strict-warn h2{margin:0}
.strict-hero{display:grid;place-items:center;width:6.5rem;height:6.5rem;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dfe6ff 60%,#c8d2ff)}
.strict-steps{list-style:none;margin:0;padding:0;display:grid;gap:.625rem;text-align:left}
.strict-step{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .875rem;border-radius:1.125rem;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.strict-step b{display:block;font:800 .9375rem/1.25 var(--ui)}
.strict-step small{display:block;color:var(--ink-2);font:500 .8125rem/1.4 var(--ui)}
.strict-ic{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.75rem;background:var(--brand-soft,#e6e9ff);color:var(--brand)}
.strict-state{display:inline-block;margin-top:.375rem;padding:.125rem .5rem;border-radius:99px;font:800 .75rem/1.5 var(--ui);background:var(--amber-soft,#ffefd1);color:var(--amber-ink,#8a5c05)}
.strict-state.on{background:var(--green-soft,#d9f5e9);color:var(--green-ink,#0b7c52)}
.strict-badge{display:inline-flex;align-items:center;gap:.375rem;margin:.25rem auto 0;padding:.25rem .75rem;border-radius:99px;font:800 .8125rem/1.4 var(--ui);background:var(--green-soft,#d9f5e9);color:var(--green-ink,#0b7c52)}
.strict-badge.warn{background:var(--amber-soft,#ffefd1);color:var(--amber-ink,#8a5c05)}
.strict-badge .icon{width:1rem;height:1rem}
/* while a strict paper runs: nothing to select, look up or translate, no hints */
html.strict-exam .lesson{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.strict-exam .lesson input,html.strict-exam .lesson textarea{-webkit-user-select:text;user-select:text}
html.strict-exam .lesson .hint{display:none}
html.strict-exam .lesson-top .timer{background:linear-gradient(180deg,#2a2f6b,#1a1f4f);color:#fff;border-color:transparent}
html.strict-exam .lesson-top .timer.low{background:linear-gradient(180deg,#ff6b70,#e5434a)}
/* the exam footer: a quiet way out, and one main button */
.dock-foot .exam-end{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:.875rem}
.dock.flow .dock-foot .btn.lg{min-width:0}

/* ---------- welcome: sign in under the slides ---------- */
.ob-auth{display:grid;gap:.625rem;width:100%}
.ob-auth .auth-providers{margin:0;gap:.625rem}
.ob-auth-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.ob-auth-row:has(>:only-child){grid-template-columns:1fr}
.btn.provider.email,.btn.provider.phone{--c:rgba(255,255,255,.62);--t:var(--ink);--e:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 10px 24px -14px rgba(30,42,140,.4)}
html[data-theme="dark"] .btn.provider.email,html[data-theme="dark"] .btn.provider.phone{--c:rgba(255,255,255,.1);--t:#fff;--e:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ob-skip{border:0;background:none;padding:.375rem;font:800 1rem/1.3 var(--ui);color:var(--brand-ink);cursor:pointer}
.ob-login{border:0;background:none;padding:0 .375rem .25rem;font:700 .875rem/1.3 var(--ui);color:var(--ink-2);cursor:pointer}
.ob-phone{display:grid;gap:.75rem;text-align:center}
.ob-phone h2{margin:0}
.ob-phone-row{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem}
.ob-code{text-align:center;letter-spacing:.4em;font:800 1.5rem/1 var(--ui)}
/* shop: history pill next to the heading; wardrobe tiers basic → legendary */
.sh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.sh-hist-pill{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--glass-line,rgba(255,255,255,.6));background:var(--glass,rgba(255,255,255,.7));color:var(--ink2,#475069);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sh-hist-pill svg{width:1.3rem;height:1.3rem}
.sh-tier{display:inline-flex;align-items:center;margin:1.1rem 0 .5rem;padding:.2rem .7rem;border-radius:99px;font:800 .72rem/1.4 var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.sh-tier.t-basic{background:rgba(120,130,160,.14);color:#5A6380}
.sh-tier.t-rare{background:rgba(79,110,255,.14);color:#3048D8}
.sh-tier.t-epic{background:rgba(128,88,255,.16);color:#6A3FE6}
.sh-tier.t-legendary{background:linear-gradient(180deg,#FFE58A,#FFB420);color:#6B4300}
.sh-item.r-rare{box-shadow:inset 0 0 0 1.5px rgba(79,110,255,.35)}
.sh-item.r-epic{box-shadow:inset 0 0 0 1.5px rgba(128,88,255,.45);background-image:linear-gradient(180deg,rgba(176,146,255,.18),transparent 70%)}
.sh-item.r-legendary{box-shadow:inset 0 0 0 1.5px rgba(224,144,15,.6);background-image:linear-gradient(180deg,rgba(255,217,102,.3),transparent 70%)}
/* the column heads are uppercase and spaced: keep "ZDARMA"/"KOSTENLOS" inside their own column */
.pw-compare.three .pw-row.head span{font-size:.66rem;letter-spacing:.03em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Android web views leave smears of the previous page behind blurred glass (backdrop-filter) and it costs
   frames on mid-range phones: there the glass is a solid, slightly see-through fill instead. */
html.app-android *,html.app-android *::before,html.app-android *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.app-android{--glass:rgba(255,255,255,.88);--dock-fill:rgba(248,249,255,.96)}
html.app-android[data-theme="dark"]{--glass:rgba(34,40,96,.92);--dock-fill:rgba(16,18,48,.96)}
@media (prefers-color-scheme: dark){html.app-android:not([data-theme="light"]){--glass:rgba(34,40,96,.92);--dock-fill:rgba(16,18,48,.96)}}
/* the welcome's sign-in panel, as on iPhone (WelcomeView.swift): one glass card, a white Google button,
   a glass e-mail button, a warm "start without an account" and a quiet "I already have an account" */
.onb.is-splash .ob-auth{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:30px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.onb.is-splash .ob-auth .btn.provider{height:52px;border-radius:999px;font:800 1rem/1 var(--f-ui);box-shadow:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff}
.onb.is-splash .ob-auth .btn.provider.google{background:#fff;color:#17124F;border-color:#fff}
.onb.is-splash .ob-auth-row{display:block}
.onb.is-splash .ob-skip{height:44px;background:none;border:0;color:#FFC98A;font:800 1rem/1 var(--f-ui)}
.onb.is-splash .ob-login{background:none;border:0;color:rgba(255,255,255,.72);font:700 .875rem/1 var(--f-ui)}
.auth-providers .btn.provider.google{background:#fff;color:#17124F;border:1px solid rgba(23,18,79,.12)}
/* Android app: the page's own Plus Jakarta Sans (the iPhone app uses the system's rounded face, which Android
   doesn't have – it fell back to Roboto) */
html.app-android{--f-ui:"Plus Jakarta Sans",system-ui,sans-serif}
/* Android web views can paint a grid of composited cards (shadows, art) over the heading just above it:
   headings get a layer of their own */
html.app-android .tsec-head,html.app-android .lm-sec,html.app-android .page h1,html.app-android .page h2,html.app-android .page .eyebrow{position:relative;z-index:1}
/* Android web views skip repainting the area under a card's big soft shadow (Chromium occlusion): stale
   strips of the previous page showed through. Cards with big shadows get a compositing layer of their own. */
html.app-android :is(.audio,.auth-input,.bdg,.boss,.btn.sm,.btn.st-btn,.btn:not(.ghost):not(.sm):not(.green):not(.blue):not(.amber):not(.red):not(.pink):not(:disabled),.bubble,.card,.chip,.clock,.continue-card,.continue-card.sm,.crit,.dict,.dock-in,.duo-card,.duo-card.gold,.duo-coach .bubble,.duo-foot,.duo-gemrow,.duo-input,.duo-opt,.duo-pair,.duo-quit,.duo-source,.duo-stat,.duo-tool,.empty,.ex,.exam-card,.extract,.feedback,.flash,.gh-card,.gh-go,.gh-say,.gh-shop,.gm-close,.gm-opt,.gm-pill,.gm-q,.gm-stats div,.hb-card,.hb-panel,.hb-reward,.hero-card,.iconbtn,.insights,.inv-code,.inv-stat,.isic,.kwt,.league-list,.league-row,.list,.listen .audio,.lm-avatar,.lm-bubble,.lm-course,.lm-game,.lm-game.g-build,.lm-game.g-pairs,.lm-game.g-rush,.lm-game.g-word,.lm-gear,.lm-home .plus-card,.lm-level,.lm-mini,.lm-pick,.lm-streak,.lv-hero,.lv-row,.mini-tile,.mistake,.mm,.mock-card,.mod-card,.mod-card.m-flawless,.mod-card.m-golden,.mod-card.m-speed,.model,.nextup,.notice,.notice-q,.nudge,.onb-choice,.opt,.paper-card,.papertabs a,.partrow,.parttabs a,.passage,.perks,.pf-gear,.pf-gem,.pf-hero,.pf-link,.pf-links.grouped,.pf-score,.pf-shop-banner,.pf-stat,.pill,.pl-card,.pl-hero,.pl-tile,.plan-row,.plus-card,.plus-status,.pm-card,.profile-head,.profile-hero,.prompt,.pw-compare,.pw-hero,.pw-invite,.pw-steps,.qitem,.qnav button,.qs-strip,.quests,.rubric,.rw-big,.rw-row,.sb-chip,.sb-clue,.sc-thumb,.scorecard,.segmented button[aria-pressed="true"],.sh-balance,.sh-boost,.sh-item,.sh-pack,.sh-stage,.share-prev img,.ss,.st-card,.st-me,.st-plus,.start-bubble,.stile,.summary,.tbl-wrap,.test-card,.testpick,.tile,.tl-card,.tl-dot,.transcript,.unit-block,.unit-block.is-collapsed .unit-head,.unit-head,.vd-card,.vd-card.bad,.vd-card.go-no,.vd-card.go-yes,.vd-card.ok,.warm-card,.wd-key,.wd-result,.wotd,.wprev,.wrow){will-change:transform}
/* Android web views draw no blur (above), so the frosted panels that float over a page get a solid fill –
   otherwise the page behind shows straight through a sheet or a toast. */
html.app-android .sheet-panel{background:#F4F6FF}
html.app-android .toast,html.app-android .unit-tip{background:rgba(250,251,255,.97)}
html.app-android[data-theme="dark"] .sheet-panel{background:#141838}
html.app-android[data-theme="dark"] :is(.toast,.unit-tip){background:rgba(24,28,64,.97)}
@media (prefers-color-scheme: dark){html.app-android:not([data-theme="light"]) .sheet-panel{background:#141838}html.app-android:not([data-theme="light"]) :is(.toast,.unit-tip){background:rgba(24,28,64,.97)}}
/* ---------- Speaking: the exam room (speaking.js runTest) ----------
   A dark room, the examiner (Lozzy in a bow tie) with what he is saying, the task, and one big
   countdown ring at the bottom that starts and stops your answer. */
.lesson.sx{--sx-bg:#0B0E26;--sx-card:rgba(255,255,255,.07);--sx-line:rgba(255,255,255,.12);--sx-ink:#F3F4FF;--sx-ink2:#B9BFE6;--sx-pink:#FF5C9E;
  min-height:calc(var(--vh,1vh)*100);background:radial-gradient(120% 60% at 20% 0%,#2B2F8F 0%,transparent 60%),radial-gradient(90% 50% at 100% 100%,#5A1F55 0%,transparent 60%),var(--sx-bg);color:var(--sx-ink);
  padding:calc(var(--sat, env(safe-area-inset-top)) + .5rem) 1rem calc(var(--dock-h,0px) + 1.5rem)}
.sx-top{display:flex;align-items:center;gap:.75rem}
.sx-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sx-card);border:1px solid var(--sx-line);color:var(--sx-ink)}
.sx-progress{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.sx-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FF5C9E,#FF8A5C);transition:width .4s}
.sx-mic{display:flex;align-items:center;gap:.4rem;height:34px;padding:0 .8rem;border-radius:99px;background:var(--sx-card);border:1px solid var(--sx-line);color:var(--sx-ink2);font:700 .8125rem/1 var(--f-ui)}
.sx-mic i{width:9px;height:9px;border-radius:50%;background:#6B7096}
.sx-mic.on{color:#fff}.sx-mic.on i{background:#FF4D6D;box-shadow:0 0 0 0 rgba(255,77,109,.6);animation:sx-pulse 1.4s infinite}
.sx-head{margin:1.1rem 0 .9rem}
.sx-part{display:inline-block;font:800 .75rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sx-pink)}
.sx-head h1{margin:.35rem 0 .2rem;font:800 1.75rem/1.1 var(--display);color:var(--sx-ink)}
.sx-head small{color:var(--sx-ink2);font:600 .8125rem/1.3 var(--f-ui)}
.sx-exam{display:flex;gap:.75rem;align-items:flex-start}
.sx-av{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3C47B8,#1B2160);border:1px solid var(--sx-line)}
.sx-av .lozzy,.sx-av svg{width:52px;height:52px}
.sx-wave{position:absolute;bottom:-6px;right:-6px;display:none;gap:2px;align-items:flex-end;height:16px;padding:3px 5px;border-radius:99px;background:var(--sx-pink)}
.sx-wave span{width:3px;border-radius:2px;background:#fff;animation:sx-wave .9s ease-in-out infinite}
.sx-wave span:nth-child(2){animation-delay:.15s}.sx-wave span:nth-child(3){animation-delay:.3s}
.sx-exam.talking .sx-wave{display:flex}
.sx-bubble{flex:1;min-width:0;padding:.85rem 1rem;border-radius:4px 22px 22px 22px;background:var(--sx-card);border:1px solid var(--sx-line)}
.sx-bubble small{display:block;margin-bottom:.3rem;color:var(--sx-ink2);font:700 .75rem/1 var(--f-ui)}
.sx-bubble p{margin:0;font:700 1.1875rem/1.4 var(--f-ui);color:var(--sx-ink)}
.sx-body .photo{background:linear-gradient(160deg,#2A3172,#3B1E5A);color:var(--sx-ink);border:1px solid var(--sx-line)}
.sx-body .mm{background:var(--sx-card);border:1px solid var(--sx-line);color:var(--sx-ink)}
.sx-body .mm.center{background:linear-gradient(135deg,#FF5C9E,#B14DFF);color:#fff;border-color:transparent}
.sx-tip{display:flex;gap:.5rem;align-items:flex-start;margin:0;color:var(--sx-ink2);font:600 .875rem/1.4 var(--f-ui)}
.sx-tip svg{flex:0 0 16px;margin-top:2px;color:#FFC957}
.lesson.sx .rubric{color:var(--sx-ink2)}
.lesson.sx .dock{background:linear-gradient(180deg,rgba(11,14,38,0),rgba(11,14,38,.96) 30%)!important;border:0!important;box-shadow:none!important}
.sx-dock{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;max-width:40rem;margin:0 auto;padding:.5rem .25rem calc(var(--sab, env(safe-area-inset-bottom)) + .25rem)}
.sx-ring{--p:0;width:78px;height:78px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;align-content:center;gap:1px;color:#fff;
  background:radial-gradient(closest-side,#141838 80%,transparent 81%),conic-gradient(var(--sx-pink,#FF5C9E) calc(var(--p)*1%),rgba(255,255,255,.14) 0)}
.sx-ring b{font:800 1.125rem/1 var(--display)}.sx-ring small{font:800 .625rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.sx-ring.idle{background:#141838;border:1px solid rgba(255,255,255,.14)}
.sx-dock.rec .sx-ring{box-shadow:0 0 0 0 rgba(255,92,158,.5);animation:sx-pulse 1.6s infinite}
.sx-dock.ready .sx-ring{background:radial-gradient(closest-side,#FF5C9E 80%,transparent 81%),conic-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%)}
.sx-state b{display:block;font:800 1rem/1.25 var(--f-ui);color:#F3F4FF}.sx-state small{color:#B9BFE6;font:600 .8125rem/1.3 var(--f-ui)}
.sx-ctrls{display:flex;gap:.4rem}
.sx-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#F3F4FF}
.sx-btn:disabled{opacity:.35}.sx-btn.go{background:#14B87A;border-color:transparent}
@keyframes sx-pulse{70%{box-shadow:0 0 0 12px rgba(255,92,158,0)}100%{box-shadow:0 0 0 0 rgba(255,92,158,0)}}
@keyframes sx-wave{0%,100%{height:4px}50%{height:12px}}
@media (max-width:420px){.sx-dock{grid-template-columns:auto 1fr;}.sx-ctrls{grid-column:1 / -1;justify-content:center}}
.lesson.sx .sx-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lesson.sx .sx-photos.one{grid-template-columns:minmax(0,1fr)}
.lesson.sx .sx-photos.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.lesson.sx .sx-photos .photo{aspect-ratio:4/5;min-height:0;padding:.75rem;font-size:.875rem;line-height:1.35}
.lesson.sx .sx-photos.one .photo{aspect-ratio:16/10}
@media (max-width:720px){.lesson.sx .mindmap{grid-template-columns:1fr 1fr;grid-template-areas:"m m" "a b" "c d" "e e";max-width:none}.lesson.sx .mm{padding:.7rem .6rem;font-size:.9375rem}}

/* Part 2 – real photos with a caption underneath */
.photo.has-img{display:flex;flex-direction:column;padding:0!important;aspect-ratio:auto!important;overflow:hidden;place-items:stretch;text-align:left}
.photo.has-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:rgba(0,0,0,.2)}
.photo.has-img figcaption{padding:.55rem .7rem .65rem;font:italic 500 .8125rem/1.35 var(--f-read);opacity:.85}
.photo.has-img .k{background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px)}
@media (max-width:720px){.lesson.sx .sx-photos.three{grid-template-columns:1fr 1fr}.lesson.sx .sx-photos.three .photo:first-child{grid-column:1 / -1}}

/* What's new */
.wn{display:grid;gap:.6rem;text-align:left}
.wn h2{margin:0}
.wn-list{display:grid;gap:.8rem;margin:.4rem 0 .8rem}
.wn-row{display:grid;grid-template-columns:44px 1fr;gap:.7rem;align-items:center}
.wn-row b{display:block;font:800 1rem/1.25 var(--f-ui)}
.wn-row small{display:block;color:var(--lead);font:600 .875rem/1.35 var(--f-ui)}

/* ---------- Exam guides (guides.js): story-style cards ---------- */
.lesson.gd{position:fixed;inset:0;z-index:30;overflow-y:auto;max-width:none;margin:0;display:flex;flex-direction:column;gap:.9rem;padding:calc(env(safe-area-inset-top,0px) + .75rem) 1rem calc(env(safe-area-inset-bottom,0px) + 1rem);
  background:radial-gradient(120% 80% at 10% 0%,#2B2F86 0%,#141235 55%,#0B0B24 100%);color:#F3F4FF}
.gd-bars{display:flex;gap:4px}
.gd-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.gd-bars i.done{background:rgba(255,255,255,.75)}
.gd-bars i.now{background:linear-gradient(90deg,#FFE58A,#FF8A1F)}
.gd-top{display:flex;align-items:center;gap:.6rem}
.gd-name{flex:1;font:800 .95rem/1.2 var(--f-ui);opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff}
.gd-card{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.4rem 1.2rem;border-radius:28px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;-webkit-user-select:none;user-select:none;animation:gd-in .35s ease}
@keyframes gd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gd-hero{display:grid;place-items:center}
.gd-title{margin:0;text-align:center;font:800 2.1rem/1.1 var(--f-display,var(--f-ui))}
.gd-sub{margin:0;text-align:center;color:#C9CCF2;font:600 1rem/1.4 var(--f-ui)}
.gd-h{margin:0;font:800 1.5rem/1.2 var(--f-display,var(--f-ui))}
.gd-list,.gd-checks{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.gd-list li{padding:.8rem 1rem;border-radius:16px;background:rgba(255,255,255,.07);font:600 1.02rem/1.4 var(--f-ui)}
.gd-checks li{display:flex;gap:.6rem;align-items:flex-start;font:600 1.02rem/1.4 var(--f-ui)}
.gd-checks .icon{flex:none;width:22px;height:22px;color:#2ED18E;margin-top:1px}
.gd-steps{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.gd-steps li{display:grid;gap:.2rem;padding:.8rem 1rem;border-radius:16px;background:rgba(255,255,255,.07);border-left:4px solid #FFB347}
.gd-steps b{font:800 1rem/1.25 var(--f-ui);color:#FFE58A}.gd-steps span{font:600 .95rem/1.4 var(--f-ui);color:#E3E5FF}
.gd-model{padding:1rem 1.1rem;border-radius:18px;background:#FFFDF6;color:#1E2140;font:500 1.05rem/1.65 var(--f-read)}
.gd-model mark{padding:.05em .25em;border-radius:6px;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gd-legend{display:flex;flex-wrap:wrap;gap:.4rem}
.gd-chip{font:800 .72rem/1 var(--f-ui);padding:.4rem .6rem;border-radius:999px;color:#1E2140}
mark.gd-intro,.gd-chip.gd-intro{background:#CFE3FF}
mark.gd-point,.gd-chip.gd-point{background:#FFE3A8}
mark.gd-example,.gd-chip.gd-example{background:#D6F5E3}
mark.gd-link,.gd-chip.gd-link{background:#EAD9FF}
mark.gd-opinion,.gd-chip.gd-opinion{background:#FFD3E2}
mark.gd-talk,.gd-chip.gd-talk{background:#FFE0C7}
mark.gd-formal,.gd-chip.gd-formal{background:#D9E0EA}
mark.gd-mistake,.gd-chip.gd-mistake{background:#FFC9C9;text-decoration:line-through}
.gd-groups{display:grid;gap:.9rem}
.gd-group small{display:block;margin-bottom:.4rem;font:800 .75rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#FFB347}
.gd-phr{display:flex;flex-wrap:wrap;gap:.45rem}
.gd-phr span{padding:.5rem .75rem;border-radius:12px;background:rgba(255,255,255,.1);font:600 .95rem/1.3 var(--f-ui)}
.gd-mist{display:grid;gap:.8rem}
.gd-pair{display:grid;gap:.35rem}
.gd-pair p{margin:0;display:flex;gap:.5rem;align-items:flex-start;padding:.6rem .8rem;border-radius:14px;font:600 .95rem/1.4 var(--f-ui)}
.gd-pair .bad{background:rgba(255,92,92,.16);color:#FFC4C4}.gd-pair .good{background:rgba(46,209,142,.16);color:#BFF5DC}
.gd-pair .icon{flex:none;width:18px;height:18px;margin-top:2px}
.gd-dock{display:flex;gap:.6rem;align-items:center}
.gd-dock .btn.lg{flex:1}
.gd-back{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff}
.gd-back:disabled{opacity:.3}
@media (min-width:721px){.lesson.gd{padding-left:max(1rem,calc(50% - 300px));padding-right:max(1rem,calc(50% - 300px))}}

/* ---------- Live examiner (voice.js) ---------- */
.lesson.vx{position:fixed;inset:0;z-index:30;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + .75rem) 1.1rem calc(env(safe-area-inset-bottom,0px) + 1.2rem);
  background:radial-gradient(120% 80% at 80% 0%,#3A2A8C 0%,#151339 55%,#0B0B24 100%);color:#F3F4FF}
.vx-top{display:flex;align-items:center;gap:.6rem}.vx-title{font:800 .95rem/1.2 var(--f-ui);opacity:.85}
.vx-hero{display:grid;place-items:center;margin-top:.5rem}
.vx-orb{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.18),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18)}
.vx-orb .lozzy,.vx-orb svg{width:96px;height:96px}
.vx-orb.big{width:180px;height:180px;transition:transform .3s}
.vx-orb.talking{animation:vx-pulse 1.1s ease-in-out infinite}
@keyframes vx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,31,.35);transform:scale(1)}50%{box-shadow:0 0 0 22px rgba(255,138,31,0);transform:scale(1.04)}}
.vx-h{margin:0;text-align:center;font:800 1.9rem/1.15 var(--f-display,var(--f-ui))}
.vx-sub{margin:0;text-align:center;color:#C9CCF2;font:600 1rem/1.45 var(--f-ui)}
.vx-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vx-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .9rem;border-radius:16px;background:rgba(255,255,255,.07);font:600 .95rem/1.4 var(--f-ui)}
.vx-list .icon{flex:none;width:20px;height:20px;color:#FFB347;margin-top:1px}
.vx-err{margin:0;padding:.7rem .9rem;border-radius:14px;background:rgba(255,92,92,.16);color:#FFC4C4;font:600 .9rem/1.4 var(--f-ui)}
.vx-live{display:grid;place-items:center;gap:.8rem;margin:1rem 0 .5rem}
.vx-state{text-align:center}.vx-state b{display:block;font:800 1.15rem/1.3 var(--f-ui)}.vx-state small{color:#C9CCF2;font:700 .9rem/1 var(--f-ui)}
.vx-lines{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;min-height:120px}
.vx-line{margin:0;max-width:85%;padding:.6rem .8rem;border-radius:16px;font:600 .95rem/1.4 var(--f-ui)}
.vx-line small{display:block;font:800 .7rem/1 var(--f-ui);opacity:.7;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.06em}
.vx-line.anna{background:rgba(255,255,255,.09);align-self:flex-start}
.vx-line.you{background:rgba(46,209,142,.18);align-self:flex-end}
.vx-result{display:grid;gap:1rem}.vx-result .card{color:var(--ink)}
.photo-btn{align-self:flex-start;justify-self:start;width:auto;gap:8px}.photo-btn .icon{width:18px;height:18px}
/* Exam day (examday.js) */
.ed-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.ed-list li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--e1)}
.ed-list li.next{outline:2px solid #7A5BFF}
.ed-list li.done .ed-dot{background:#14B87A;color:#fff}
.ed-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(122,91,255,.18);color:#7A5BFF;flex:none}
.ed-dot .icon{width:18px;height:18px}
.ed-name{display:flex;flex-direction:column}
.ed-name small{opacity:.7;font-weight:600}
.ed-clock{font-size:64px;font-weight:900;text-align:center;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:6px 0}
.ed-result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.ed-score{font-family:var(--f-display);font-size:88px;font-weight:800;line-height:1;letter-spacing:-2px}
.ed-result .ed-list{width:100%;text-align:left}
/* Pronunciation practice (speaking.js pronCard) */
.pron-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pron-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);transition:background .2s,border-color .2s}
.pron-w{font-weight:800}
.pron-b{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.pron-b .icon{width:18px;height:18px}
.pron-chip.rec{border-color:#FF5C9E;animation:pron-pulse 1s ease-in-out infinite}
.pron-chip.ok{background:rgba(20,184,122,.18);border-color:#14B87A}
.pron-chip.bad{background:rgba(255,92,92,.14);border-color:#FF5C5C}
@keyframes pron-pulse{50%{box-shadow:0 0 0 6px rgba(255,92,158,.18)}}
@media (prefers-reduced-motion:reduce){.pron-chip.rec{animation:none}}
/* placement result: areas (learn.js) */
.onb-areas{width:100%;display:grid;gap:8px;margin:4px 0}
.onb-area{display:grid;grid-template-columns:7.5em 1fr 3em;align-items:center;gap:10px;font:700 .92rem/1.2 var(--f-ui);text-align:left}
.onb-area b{text-align:right}
.onb-area-bar{height:10px;border-radius:99px;background:var(--rule);overflow:hidden}
.onb-area-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7A5BFF,#FF5C9E)}
.onb-area.weak span,.onb-area.weak b{color:#FF5C5C}
/* Your week (weekly.js) */
.wk-hero{text-align:center;display:grid;gap:14px;padding:22px}
.wk-xp b{display:block;font-family:var(--f-display);font-weight:800;font-size:72px;line-height:1;letter-spacing:-2px}
.wk-xp span{font-weight:800;opacity:.7}
.wk-xp small{display:block;margin-top:6px;font-weight:800}
.wk-xp small.up{color:#14B87A}.wk-xp small.down{color:#FF5C5C}
.wk-days{display:flex;justify-content:center;gap:8px}
.wk-days span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:var(--rule);font-size:.85rem}
.wk-days span.on{background:#FFD66B;color:#3A2600}
.wk-days .icon{width:18px;height:18px}
.wk-say{margin:0;font-weight:700}
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.wk-stat{padding:14px;border-radius:18px;background:var(--paper);border:1px solid var(--rule);display:grid;gap:2px}
.wk-stat b{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.1}
.wk-stat span{font-weight:700;opacity:.75;font-size:.88rem}
.wk-stat small{font-weight:800;color:#14B87A}
/* Part 3 with a partner (voice.js) */
.vx-line.tom small{color:#2F8CFF}
.vx-task{text-align:left;margin:4px 0 12px}
.vx-task b{display:block;margin-bottom:4px}
/* Classes (classes.js) */
.cls .stack{gap:10px}
.cls-row{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.cls-row > div{flex:1;display:grid;gap:2px}
.cls-codechip{font:800 14px/1 var(--f-ui);letter-spacing:2px;padding:6px 10px;border-radius:10px;background:var(--rule)}
.cls-code{text-transform:uppercase;letter-spacing:6px;font-size:24px;text-align:center;font-weight:800}
.cls-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cls-big{display:block;font-family:var(--f-display);font-weight:800;font-size:40px;letter-spacing:4px}
.cls-student{display:grid;gap:6px}
.cls-student.idle{opacity:.8;border-color:rgba(255,92,92,.45)}
.cls-st-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cls-student .btn{justify-self:start}
.cls-delete{margin-top:18px;color:#FF5C5C}
.scr-sub{margin:10px 0 14px;color:var(--lead);font-weight:600}
/* Tests tab on the web, like the apps (practice.js) */
.pt-head h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,6vw,48px);letter-spacing:-.02em;color:var(--ink)}
.pt-head p{margin:2px 0 0;color:var(--lead);font-weight:700}
.pt-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:16px 0 10px;border-radius:999px;background:var(--paper);border:1px solid var(--rule)}
.pt-modes button{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:800 16px/1 var(--f-ui);cursor:pointer}
.pt-modes button.on{background:linear-gradient(90deg,#7A5BFF,#FF5C9E);color:#fff;box-shadow:0 8px 20px -8px rgba(122,91,255,.6)}
.pt-modes .icon{width:18px;height:18px}
.pt-pills{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.pt-pills button{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:800 14px/1 var(--f-ui);cursor:pointer}
.pt-pills button.on{background:var(--ink);color:var(--ground)}
.pt-note{margin:4px 0 14px;color:var(--lead);font-weight:600;font-size:.92rem}
.pt-tests{display:grid;gap:14px}
.pt-test{display:grid;gap:12px;padding:16px}
.pt-test.locked{opacity:.75}
.pt-test-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pt-test-head h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--ink)}
.pt-test-head small{color:var(--lead);font-weight:700}
.pt-overall{padding:6px 14px;border-radius:16px;background:linear-gradient(135deg,#7A5BFF,#FF5C9E);color:#fff;text-align:right}
.pt-overall b{display:block;font-family:var(--f-display);font-size:26px;line-height:1}
.pt-overall small{color:rgba(255,255,255,.9);font-weight:800;font-size:11px}
.pt-ring{--p:0%;width:34px;height:34px;border-radius:50%;flex:none;background:conic-gradient(#7A5BFF var(--p),var(--rule) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0)}
.pt-papers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:720px){.pt-papers{grid-template-columns:repeat(4,1fr)}}
.pt-paper{display:grid;gap:6px;align-content:start;min-height:118px;padding:12px;border-radius:18px;background:var(--paper-2);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.pt-paper.done{border-color:rgba(20,184,122,.5)}
.pt-paper-top{display:flex;justify-content:space-between;align-items:flex-start}
.pt-paper-top .icon{width:16px;height:16px;color:var(--lead)}
.pt-tick{width:20px;height:20px;border-radius:50%;background:#14B87A;color:#fff;display:grid;place-items:center}
.pt-tick .icon{width:13px;height:13px;color:#fff}
.pt-paper b{font:800 14px/1.2 var(--f-ui)}
.pt-paper small{color:var(--lead);font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-paper.locked small{color:#8C63FF}
.pt-examday{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;border-radius:999px;background:linear-gradient(90deg,#7A5BFF,#FF5C9E);color:#fff;text-decoration:none;font:800 15px/1.2 var(--f-ui)}
.pt-examday span{flex:1}
.pt-examday .icon{width:18px;height:18px}
.pt-guides{display:flex;gap:10px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.pt-guide{flex:none;width:230px;min-height:92px;display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:22px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#2B2E8F,#7A5BFF);border:1px solid rgba(255,255,255,.25)}
.pt-guide.live{background:linear-gradient(135deg,#FF5C9E,#FF8A1F)}
.pt-guide b{display:block;font:800 15px/1.2 var(--f-ui)}
.pt-guide small{display:block;margin-top:3px;font-weight:700;font-size:12px;opacity:.85}
.pt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:720px){.pt-grid{grid-template-columns:repeat(3,1fr)}}
.pt-tile{display:flex;flex-direction:column;gap:4px;min-height:230px;padding:14px;border:0;border-radius:26px;text-align:left;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 14px 30px -16px var(--a)}
.pt-tile-top{display:flex;justify-content:space-between;align-items:flex-start}
.pt-ring.light{width:46px;height:46px;display:grid;place-items:center;background:conic-gradient(#FFE58A var(--p),rgba(255,255,255,.25) 0);-webkit-mask:none;mask:none;position:relative}
.pt-ring.light::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--a)}
.pt-ring.light em{position:relative;z-index:1;font:800 12px/1 var(--f-ui);font-style:normal}
.pt-count{text-align:right}
.pt-count b{display:block;font-family:var(--f-display);font-size:20px;line-height:1}
.pt-count small{font-weight:700;font-size:11px;opacity:.8}
.pt-tile-obj{flex:1;display:grid;place-items:center}
.pt-tile-name{font:800 17px/1.2 var(--f-ui)}
.pt-tile-foot{display:flex;justify-content:space-between;align-items:center;font:800 13px/1 var(--f-ui);color:#FFE58A}
.pt-tile-foot .icon{width:14px;height:14px;color:#fff}
.pt-sheet-h{margin:2px 0 6px;font-family:var(--f-display)}
.pt-items{display:grid;gap:8px;margin-top:10px}
.pt-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.pt-item > div{flex:1;display:grid;gap:2px}
.pt-item small{color:var(--lead);font-weight:600}
.pt-item-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font:800 13px/1 var(--f-ui);background:var(--rule)}
.pt-item.done .pt-item-dot{background:#14B87A;color:#fff}
.pt-item .icon{width:16px;height:16px}
/* Home on the web, like the apps (home.js) */
.hw-next{position:relative;display:flex;align-items:center;gap:12px;margin:12px 0;padding:22px;border-radius:30px;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(135deg,#5C7BFF,#3A48E6);box-shadow:0 18px 40px -20px #3A48E6}
.hw-next > div:first-child{flex:1;display:grid;gap:6px;position:relative;z-index:1}
.hw-next small{font:800 13px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hw-next b{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,5vw,34px);line-height:1.05}
.hw-next span{font-weight:600;opacity:.9}
.hw-go{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px 10px 18px;border-radius:999px;background:#FFE58A;color:#1B1030;font:800 17px/1 var(--f-ui);font-style:normal}
.hw-go .icon{width:22px;height:22px;padding:5px;border-radius:50%;background:#1B1030;color:#fff;box-sizing:content-box}
.hw-next-art{flex:none;transform:rotate(-8deg)}
.hw-banner{display:flex;align-items:center;gap:14px;margin:12px 0;padding:16px;border-radius:24px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#2B2E8F,#7A5BFF);border:1px solid rgba(255,255,255,.25)}
.hw-banner > div{flex:1;display:grid;gap:3px}.hw-banner b{font:800 16px/1.2 var(--f-ui)}.hw-banner small{font-weight:600;opacity:.85}
.hw-predict{display:grid;gap:10px;margin:12px 0;padding:18px}
.hw-eyebrow{font:800 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--lead)}
.hw-empty{display:flex;align-items:center;gap:14px;font-weight:600;color:var(--ink2,var(--ink))}
.hw-cta{background:linear-gradient(90deg,#7A5BFF,#FF5C9E);color:#fff;border:0;justify-content:center}
.hw-score{display:flex;align-items:center;gap:12px}
.hw-score > b{font-family:var(--f-display);font-weight:800;font-size:52px;line-height:1;color:var(--ink)}
.hw-score > div{flex:1;display:grid;gap:4px;justify-items:start}.hw-score small{font-weight:700;color:var(--lead)}
.hw-bar{position:relative;height:10px;border-radius:99px;background:var(--rule)}
.hw-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7A5BFF,#FF5C9E)}
.hw-pass{position:absolute;top:-4px;width:2px;height:18px;background:var(--ink);opacity:.55}
.hw-passlabel{font-weight:700;color:var(--lead);font-size:11px}
.hw-goal{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--paper-2);border:1px solid var(--rule);cursor:pointer}
.hw-goal > div{flex:1;display:grid;gap:1px}.hw-goal b{font:800 14px/1.2 var(--f-ui);color:var(--ink)}.hw-goal small{font-weight:700;color:var(--lead);font-size:12px}
.hw-goal-sel{max-width:44%;border:1px solid var(--rule);border-radius:10px;padding:6px 8px;background:var(--paper);color:var(--ink);font:700 13px var(--f-ui)}
.hw-trend{display:grid;gap:4px;color:var(--ink)}
.hw-trend-head{display:flex;justify-content:space-between;align-items:baseline}.hw-trend-head small{font-weight:800;color:var(--lead);font-size:12px}
.hw-trend-head b{font-weight:800;color:var(--lead)}.hw-trend-head b.up{color:#14B87A}
.hw-trend-svg{width:100%;height:74px;display:block}
.hw-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hw-skills > div{display:grid;justify-items:center;padding:8px;border-radius:14px;background:var(--paper-2)}
.hw-skills b{font-family:var(--f-display);font-size:17px;color:var(--ink)}.hw-skills b.ok{color:#14B87A}.hw-skills small{font-weight:700;color:var(--lead);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hw-weak{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 14px;border-radius:16px;background:var(--paper-2);text-decoration:none;color:var(--ink)}
.hw-weak b{font:800 14px var(--f-ui)}.hw-weak .icon{width:14px;height:14px}
.hw-missing{font-weight:600;color:var(--lead);font-size:13px;text-decoration:none}
.hw-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.hw-feat{display:grid;gap:4px;padding:16px;min-height:140px;border-radius:24px;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--a),var(--b))}
.hw-feat-top{display:flex;justify-content:space-between;align-items:flex-start}
.hw-badge{min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#fff;color:#FF5C9E;font:800 13px/24px var(--f-ui);text-align:center}
.hw-feat b{font:800 17px/1.2 var(--f-ui);margin-top:auto}.hw-feat small{font-weight:600;opacity:.88}
/* English Reels on the web (duo.js route "reels") */
.rl{position:fixed;inset:0;z-index:40;background:#05060F;color:#fff;display:flex;flex-direction:column}
.rl-top{display:flex;align-items:center;gap:10px;padding:calc(var(--sat, env(safe-area-inset-top)) + 10px) 14px 10px;background:linear-gradient(#05060Ff2,#05060F00);position:absolute;top:0;left:0;right:0;z-index:3}
.rl-levels{display:flex;gap:6px}
.rl-levels button{height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:800 13px/1 var(--f-ui);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.rl-levels button.on{background:#fff;color:#05060F}
.rl-levels .icon{width:14px;height:14px}
.rl-title{flex:1;text-align:center;font-family:var(--f-display);font-size:18px}
.rl-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.rl-x .icon{width:16px;height:16px}
.rl-feed{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.rl-card{position:relative;height:100dvh;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:86px 70px 30px 16px;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,#3A2A8F 0%,#05060F 60%)}
.rl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.rl-body{position:relative;z-index:1;width:min(560px,100%);display:grid;gap:12px;max-height:100%;overflow-y:auto;padding-bottom:20px}
.rl-meta{display:flex;align-items:center;gap:8px}.rl-meta small{opacity:.7;font-weight:700}
.rl-instr{margin:0;font-weight:700;opacity:.85}
.rl-body .duo-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;color:#fff}
.rl-body .duo-sentence{color:#fff}
.rl-listen{position:absolute;z-index:2;top:80px;left:16px;right:70px;display:flex;align-items:center;gap:14px;padding:14px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.rl-card:has(.rl-listen) .rl-body{margin-top:110px}
.rl-listen small{font:800 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:#FF8A1F}
.rl-listen p{margin:4px 0 0;font-style:italic;opacity:.9}
.rl-play{width:58px;height:58px;flex:none;border-radius:50%;border:0;background:#FF8A1F;color:#fff;display:grid;place-items:center;cursor:pointer}
.rl-play .icon{width:22px;height:22px}
.rl-transcript{display:grid;gap:8px;padding:12px;border-radius:16px;background:rgba(255,255,255,.06)}
.rl-transcript p{margin:0;display:flex;gap:8px}.rl-transcript b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#FF5C9E}
.rl-verdict{display:grid;gap:8px;padding:14px;border-radius:18px}
.rl-verdict.good{background:rgba(20,184,122,.18);border:1px solid rgba(20,184,122,.5)}
.rl-verdict.bad{background:rgba(255,92,92,.14);border:1px solid rgba(255,92,92,.45)}
.rl-verdict > b{font-family:var(--f-display);font-size:22px}
.rl-verdict p{margin:0}.rl-verdict .muted{color:rgba(255,255,255,.75)}
.rl-xp{justify-self:start;padding:4px 10px;border-radius:999px;background:#FFE58A;color:#3A2600;font:800 13px var(--f-ui)}
.rl-rail{position:absolute;z-index:2;right:12px;bottom:90px;display:grid;gap:14px;justify-items:center}
.rl-rail small{font:700 10px var(--f-ui);opacity:.55;writing-mode:vertical-rl}
.rl-rail-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.rl-rail-btn .icon{width:20px;height:20px}
.rl-rail-btn.on{background:#FF5C9E;border-color:#FF5C9E}
.rl-empty{height:100dvh;display:grid;place-items:center;padding:20px;text-align:center;font-weight:700;opacity:.8}
.rl [hidden]{display:none!important}
a.hb-quest{text-decoration:none;color:inherit}
.hb-quest.go{cursor:pointer}
.hb-qhint{display:block;margin:2px 0 6px;font-weight:600;font-size:12px;color:var(--lead)}