/* THE GROUND, painted in the screen itself (the shell paints the same under it): glass in the screen can only blur
   what the screen draws, so the grain, glints and the grey-to-plum fall live here too. */
html { background:
    url("../dunes.webp") center bottom / 100% auto no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><circle cx='97' cy='45' r='0.4' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='161' cy='110' r='0.4' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='64' cy='26' r='0.7' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='27' cy='127' r='0.8' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='67' cy='188' r='0.4' fill='%23ffe6d8' fill-opacity='0.14'/><circle cx='119' cy='293' r='0.4' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='40' cy='126' r='0.8' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='93' cy='245' r='0.5' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='171' cy='56' r='0.4' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='19' cy='18' r='0.5' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='160' cy='233' r='0.7' fill='%23ffe6d8' fill-opacity='0.14'/><circle cx='136' cy='90' r='0.5' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='73' cy='172' r='0.8' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='103' cy='135' r='0.8' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='35' cy='125' r='0.6' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='147' cy='12' r='0.4' fill='%23ffe6d8' fill-opacity='0.16'/><circle cx='172' cy='263' r='0.6' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='105' cy='149' r='0.7' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='28' cy='81' r='0.4' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='210' cy='194' r='0.7' fill='%23ffe6d8' fill-opacity='0.09'/><circle cx='116' cy='201' r='0.4' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='107' cy='183' r='0.7' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='230' cy='39' r='0.5' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='275' cy='149' r='0.5' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='165' cy='265' r='0.7' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='84' cy='125' r='0.6' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='114' cy='69' r='0.4' fill='%23ffe6d8' fill-opacity='0.08'/><circle cx='70' cy='70' r='0.7' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='55' cy='85' r='0.5' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='111' cy='170' r='0.5' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='155' cy='185' r='0.4' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='261' cy='286' r='0.8' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='120' cy='31' r='0.7' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='20' cy='63' r='0.5' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='180' cy='31' r='0.8' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='30' cy='109' r='0.4' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='62' cy='113' r='0.6' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='181' cy='142' r='0.4' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='298' cy='140' r='0.7' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='43' cy='225' r='0.6' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='208' cy='155' r='0.5' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='158' cy='44' r='0.8' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='227' cy='89' r='0.4' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='78' cy='110' r='0.5' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='67' cy='162' r='0.8' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='67' cy='243' r='0.5' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='245' cy='222' r='0.5' fill='%23ffe6d8' fill-opacity='0.08'/><circle cx='148' cy='219' r='0.4' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='142' cy='58' r='0.8' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='134' cy='281' r='0.6' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='109' cy='66' r='0.5' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='101' cy='145' r='0.8' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='144' cy='196' r='0.4' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='36' cy='117' r='0.5' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='54' cy='237' r='0.6' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='284' cy='217' r='0.7' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='284' cy='217' r='0.5' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='8' cy='177' r='0.7' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='44' cy='248' r='0.7' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='105' cy='165' r='0.5' fill='%23ffe6d8' fill-opacity='0.05'/><circle cx='240' cy='218' r='0.4' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='280' cy='130' r='0.5' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='63' cy='76' r='0.6' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='229' cy='98' r='0.8' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='39' cy='273' r='0.6' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='199' cy='245' r='0.8' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='275' cy='150' r='0.8' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='153' cy='262' r='0.5' fill='%23ffe6d8' fill-opacity='0.14'/><circle cx='233' cy='45' r='0.5' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='218' cy='167' r='0.6' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='159' cy='145' r='0.4' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='17' cy='57' r='0.4' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='152' cy='169' r='0.4' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='184' cy='152' r='0.8' fill='%23ffe6d8' fill-opacity='0.08'/><circle cx='83' cy='152' r='0.7' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='74' cy='157' r='0.6' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='268' cy='61' r='0.7' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='36' cy='133' r='0.4' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='129' cy='64' r='0.6' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='269' cy='46' r='0.6' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='265' cy='290' r='0.5' fill='%23ffe6d8' fill-opacity='0.16'/><circle cx='28' cy='265' r='0.5' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='250' cy='48' r='0.7' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='121' cy='126' r='0.6' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='217' cy='6' r='0.8' fill='%23ffe6d8' fill-opacity='0.12'/><circle cx='211' cy='115' r='0.8' fill='%23ffe6d8' fill-opacity='0.14'/><circle cx='154' cy='19' r='0.5' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='31' cy='80' r='0.4' fill='%23ffe6d8' fill-opacity='0.19'/><circle cx='54' cy='227' r='0.7' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='203' cy='284' r='0.7' fill='%23ffe6d8' fill-opacity='0.07'/><circle cx='276' cy='171' r='0.6' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='17' cy='206' r='0.7' fill='%23ffe6d8' fill-opacity='0.18'/><circle cx='81' cy='5' r='0.4' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='25' cy='257' r='0.4' fill='%23ffe6d8' fill-opacity='0.09'/><circle cx='37' cy='3' r='0.8' fill='%23ffe6d8' fill-opacity='0.11'/><circle cx='275' cy='187' r='0.4' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='72' cy='33' r='0.5' fill='%23ffe6d8' fill-opacity='0.09'/><circle cx='54' cy='280' r='0.6' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='62' cy='134' r='0.5' fill='%23ffe6d8' fill-opacity='0.09'/><circle cx='241' cy='298' r='0.4' fill='%23ffe6d8' fill-opacity='0.05'/><circle cx='220' cy='165' r='0.5' fill='%23ffe6d8' fill-opacity='0.13'/><circle cx='74' cy='134' r='0.7' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='164' cy='267' r='0.8' fill='%23ffe6d8' fill-opacity='0.10'/><circle cx='65' cy='69' r='0.5' fill='%23ffe6d8' fill-opacity='0.17'/><circle cx='212' cy='191' r='0.7' fill='%23ffe6d8' fill-opacity='0.20'/><circle cx='295' cy='251' r='0.4' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='222' cy='77' r='0.5' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='200' cy='114' r='0.8' fill='%23ffe6d8' fill-opacity='0.15'/><circle cx='85' cy='73' r='0.6' fill='%23ffe6d8' fill-opacity='0.06'/><circle cx='56' cy='81' r='0.4' fill='%23ffe6d8' fill-opacity='0.09'/><circle cx='289' cy='292' r='.9' fill='%23fff3e8' fill-opacity='0.29'/><circle cx='73' cy='290' r='.9' fill='%23fff3e8' fill-opacity='0.26'/><circle cx='107' cy='0' r='.9' fill='%23fff3e8' fill-opacity='0.27'/><circle cx='142' cy='151' r='.9' fill='%23fff3e8' fill-opacity='0.24'/><circle cx='151' cy='1' r='.9' fill='%23fff3e8' fill-opacity='0.25'/><circle cx='27' cy='120' r='.9' fill='%23fff3e8' fill-opacity='0.23'/></svg>") repeat 0 0 / 300px 300px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.32' intercept='.34'/><feFuncG type='linear' slope='.32' intercept='.34'/><feFuncB type='linear' slope='.32' intercept='.34'/><feFuncA type='linear' slope='.32' intercept='.34'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") repeat 0 0 / 220px 220px,
    linear-gradient(180deg,#141315 0,#161517 22%,#231726 50%,#1A1519 78%,#141315 100%);
  background-blend-mode:normal,normal,overlay,normal; }
/* =====================================================================
   DESERT THEME — loaded LAST in every screen, over chassis.css, lesson-kit.css and the
   screen's own <style>. It changes only colour and light: the lesson's content, layout,
   timing and every interactive state are the prototype's.

   THE GROUND IS THE APP'S, NOT THE DESERT'S. The screens are transparent and the shell
   paints Rilla's own near-black behind them (the chassis's carbon), with a breath of warm
   grain so it is the same material as the sand. The desert reaches in only through its
   accents:
     yellow #FFF500     still the action colour (Check, Continue, Begin) — unchanged
     gold   #FFCE52     "yours": the mic button, your bubble, the words as you say them,
                        the card you picked — where the prototype used sky blue
     peach / terracotta the two status pills, from the painting (where it used violet / red)
     green / red        right / wrong — semantic, unchanged
   Surfaces, hairlines and type stay the chassis's own greys, so this is the app.
   ===================================================================== */
:root{
  --pick:#FFCE52; --pick-fill:rgba(255,206,82,.14); --pick-lip:#C4921A;
  --d-gold:#FFCE52; --d-gold-lip:#C4921A; --d-gold-press:#E0AE2E; --d-gold-deep:#9C7318; --d-ink:#3A2600;
}
body, .app { background:transparent !important; }   /* html carries the ground (top of this file), so glass in the screen has something to blur */
/* the shell draws the status bar; the screen's own keeps only its height */
.sb > * { visibility:hidden; }

/* ---- "yours" is gold ---- */
.bub.you { background:var(--d-gold) !important; color:#2A1A08 !important;
  box-shadow:0 6px 20px -6px rgba(255,206,82,.30) !important; }
.bub.you.talking { animation:none; }
.fly-chip { border-color:var(--d-gold); background:rgba(255,206,82,.14); }
.say-line.mine { border-color:transparent; background:transparent; }
.say-word.mine { color:var(--d-gold); }

/* ---- the mic button: gold, with the same press and the same light ---- */
.speak { background:var(--d-gold); box-shadow:0 8px 0 var(--d-gold-lip); }
.speak:active:not(:disabled) { background:var(--d-gold-press); box-shadow:0 2px 0 var(--d-gold-deep); }
.mic-g { fill:var(--d-ink); }
.speak:active:not(:disabled) .mic-g, .speak.is-pressed .mic-g { fill:var(--d-ink); filter:none; }   /* pressed: the same ink, no white flash */
.speak.rec .wave { filter:drop-shadow(0 0 6px rgba(255,255,255,.85)) drop-shadow(0 0 15px var(--d-gold)); }
/* the nudge is a keyframed press that bakes the face colour in; restated in gold, same legs, same curves */
@keyframes speakNudge {
  0%   { transform:translateY(0);   background:#FFCE52; box-shadow:0 8px 0 #C4921A, 0 14px 20px -8px rgba(0,0,0,0.62), inset 0 2px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.10);
         animation-timing-function:cubic-bezier(0.12,0.85,0.25,1); }
  17%  { transform:translateY(6px); background:#E0AE2E; box-shadow:0 2px 0 #9C7318, 0 5px 9px -5px rgba(0,0,0,0.75), inset 0 3px 9px rgba(255,255,255,0.34), inset 0 -2px 6px rgba(0,0,0,0.22);
         animation-timing-function:linear; }
  35%  { transform:translateY(6px); background:#E0AE2E; box-shadow:0 2px 0 #9C7318, 0 5px 9px -5px rgba(0,0,0,0.75), inset 0 3px 9px rgba(255,255,255,0.34), inset 0 -2px 6px rgba(0,0,0,0.22);
         animation-timing-function:cubic-bezier(0.22,1,0.36,1); }
  100% { transform:translateY(0);   background:#FFCE52; box-shadow:0 8px 0 #C4921A, 0 14px 20px -8px rgba(0,0,0,0.62), inset 0 2px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.10); }
}

/* ---- screen 4's listening card, lit in gold while it speaks ---- */

/* ---- the status pills: from the painting ---- */
.ex-label.newc { background:#F2BE8C; color:#3A2010; }
/* HARD: not a solid block on the sand. A quiet glass chip in the dune's own terracotta: a thin fill, a hairline,
   the word in the sun's peach, small and spaced. */
.ex-label.hard { background:rgba(219,126,94,.14) !important; border:1px solid rgba(219,126,94,.42); color:#F2BE8C !important;
  padding:5px 10px 5px 8px !important; gap:5px !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.12em !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.ex-label.hard svg { width:12px !important; height:12px !important; fill:#F2BE8C; opacity:.9; }

/* =====================================================================
   FIGMA PASS — Roleplay Mobile MVP, "spot the mistake 4" (node 5741-12684). Type, bubbles,
   sheet and keys follow that frame; where the frame is silent (titles, the mic key, the
   status pills) the rules above stand.
     ground          bg-base #222222
     label           Inter Medium 12/16, label-secondary #949494, sentence case
     bubble          Inter Regular 15/23; 10/16 padding; radius 16 with one 8px corner
                     customer: rgba(255,255,255,.03) on a #393939 hairline, text neutral-200 #E0E0E0
                     rep:      bg-alt #2E2E2E on the same hairline, text white
                     right:    rgba(39,149,12,.10) on rgba(39,149,12,.60)
     sheet           bg-alt #2E2E2E, hairline, radius 16 on top, 24/24/44, shadow 0 7px 34.7 rgba(9,9,9,.17)
                     head Druk Text Wide Medium 16/24 -0.32px in green-400 #61E07D with a check
                     body Inter Regular 15/23 in green-200 #C8F4D1
     key             ctrl-primary #FFF500, lip 0 6px 0 #D3CB00, radius 12, 12/16 padding,
                     Inter Medium 15/23, label-inverted #1C1C1C
   ===================================================================== */
:root { --ok:#61E07D; }

/* labels */
.who { font-size:12px; line-height:16px; font-weight:500; letter-spacing:0; color:#949494;
  text-transform:lowercase; margin-bottom:4px !important; }
.who::first-letter { text-transform:uppercase; }
.row.right .who { color:#949494; }

/* bubbles */
.bub { padding:10px 16px !important; font-size:15px !important; line-height:23px !important; font-weight:400 !important;
  letter-spacing:0 !important; max-width:88%; }
.bub.them { background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.17) !important; background-clip:padding-box; color:#FFFFFF !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.15); backdrop-filter:blur(30px) saturate(1.15); position:relative; }
/* while she talks: a white beam runs round the hairline until the line is done */
@property --beam { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.bub.them.talking::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--beam), transparent 0 58%, rgba(255,255,255,.28) 76%, #FFFFFF 90%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:beam 1.6s linear 1 both; }
@keyframes beam { 0% { --beam:0deg; opacity:1; } 78% { opacity:1; } 100% { --beam:360deg; opacity:0; } }   /* one lap, then it is gone */
.bub.them { border-radius:16px 16px 16px 2px !important; box-shadow:none !important; }
.bub.them.talking { border-color:rgba(255,255,255,.17) !important; }
.bub, .bub.them, .bub.you, .bub.talking { box-shadow:none !important; }
.row.played .bub.them { color:#B9B9B9 !important; background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.12) !important; }
.bub .cw { color:rgba(255,255,255,.30); }   /* not yet spoken: the same white, thinned */
.bub .cw.lit { color:#FFFFFF; }
.bub.you { background:#FFCE52 !important; border:0 !important; color:#3A2600 !important; box-shadow:none !important;
  border-radius:16px 16px 2px 16px !important; box-shadow:none !important; }
.bub.you.miss { color:#E0E0E0 !important; }
.fly-chip { background:#2E2E2E; border:1px solid #393939; border-radius:16px 16px 2px 16px; color:#fff;
  font-size:15px; line-height:23px; font-weight:400; padding:10px 16px; }

/* choices are the rep's bubbles; the right one is the frame's green */
.opt { background:#2E2E2E !important; border:1px solid #393939 !important; color:#FFFFFF !important;
  border-radius:16px 16px 2px 16px !important; padding:10px 16px !important;
  font-size:15px !important; line-height:23px !important; font-weight:400 !important; text-align:left !important; }
.opt:active:not(.correct):not(.wrong) { background:#393939 !important; border-color:#474747 !important; }
.opt.selected { border-color:#FFCE52 !important; background:rgba(255,206,82,.10) !important; }
.opt.correct { border-color:rgba(39,149,12,.60) !important; background:rgba(39,149,12,.10) !important; color:#fff !important; }
.opt.wrong { border-color:#393939 !important; background:rgba(255,255,255,.02) !important; color:#7C7C7C !important; }
.opt-group { gap:8px !important; }

/* prompts and instructions */
.explain, .stem, .bar-note, .brief { font-size:15px !important; line-height:23px !important; font-weight:500 !important; color:#E0E0E0 !important; }
.coach-q { font-size:24px; font-weight:700; letter-spacing:-.015em; color:#fff; }

/* the sheet */
.fb { background:#2E2E2E !important; border:1px solid #393939 !important; border-bottom:none !important;
  border-radius:16px 16px 0 0 !important; padding:24px 24px 44px !important;
  box-shadow:0 7px 34.7px rgba(9,9,9,.17) !important; }
.fb-head { font-family:'Druk Text Wide Medium','Druk Text Wide','Inter',sans-serif; font-weight:500; font-size:16px; line-height:24px;
  letter-spacing:-.32px; color:#61E07D; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.fb-head::before { content:""; flex:none; width:24px; height:24px; border-radius:50%; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/24px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/24px no-repeat; }
.fb.miss .fb-head { color:#FF9600; }
.fb.miss .fb-head::before {
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>") center/24px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>") center/24px no-repeat; }
.fb-note { font-size:15px !important; line-height:23px !important; font-weight:400 !important; color:#C8F4D1 !important; margin-bottom:24px !important; }
.fb.miss .fb-note { color:#E0E0E0 !important; }

/* keys */
.fb-cta, .coach-cta.primary, .coach-check.ready, .cel-cta, .tap {
  height:47px; padding:12px 16px; border-radius:12px; font-family:'Inter',sans-serif; font-size:15px; line-height:23px; font-weight:500;
  letter-spacing:0; color:#1C1C1C; background:#FFF500; }
.fb-cta, .coach-cta.primary, .coach-check.ready, .cel-cta, .tap:not(.rec):not(:disabled) {
  box-shadow:0 6px 0 #D3CB00, 0 14px 20px -8px rgba(0,0,0,.62), inset 0 2px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.10); }
.fb-cta:active, .coach-cta.primary:active, .coach-check.ready:active, .cel-cta:active, .tap:active:not(:disabled) {
  transform:translateY(4px); box-shadow:0 2px 0 #D3CB00, 0 5px 9px -5px rgba(0,0,0,.75), inset 0 3px 9px rgba(255,255,255,.34); }
.coach-check.disabled { height:47px; padding:12px 16px; border-radius:12px; font-size:15px; line-height:23px; font-weight:500; }
.tap .lbl { font-size:15px; line-height:23px; font-weight:500; }

/* =====================================================================
   FIGMA PASS 2 — "sequencing 2/3" (5733-12041, 5733-12148).
     header       Druk Wide Medium, uppercase
     ground       bg-base #222, plain
     bottom sheet every screen's lower block (.teach) is a sheet: bg-alt #2E2E2E on a #393939 hairline,
                  16px top corners, 16/16/44 padding, shadow 0 7px 17.35 rgba(9,9,9,.17); its prompt is
                  Inter Medium 14/20 in the brand yellow, centred; no divider
     option       bg-alt-hover #393939 on a #474747 hairline, radius 8 all round, 12/16, Inter 15/23 #E0E0E0
     right/wrong  rgba(39,149,12) and rgba(232,78,57) at .10 fill / .60 line
     miss sheet   head red-400 #FF7764 with the x-circle, body red-200 #FFBDB4
   ===================================================================== */
.coach-q { font-family:'Druk Wide','Druk Text Wide',Inter,sans-serif !important; font-weight:500 !important; font-size:17px !important;
  line-height:24px !important; letter-spacing:-.2px !important; text-transform:uppercase; color:#fff !important; }

/* the bottom sheet */
.teach { margin:0 -20px 0 !important; padding:16px 16px 44px !important; background:#2E2E2E; border:1px solid #393939; border-bottom:0;
  border-radius:16px 16px 0 0; box-shadow:0 7px 17.35px rgba(9,9,9,.17); }
.teach-div { display:none !important; }
.teach .explain, .teach .stem, .teach .brief { font-size:14px !important; line-height:20px !important; font-weight:500 !important;
  color:#FFF500 !important; text-align:center; margin:0 0 20px !important; }
.teach .say-line { margin-bottom:0; border-color:transparent !important; background:transparent !important; text-wrap:balance; }   /* no stroke; balanced so no word is left alone on the last line */
.say-word { color:rgba(255,255,255,.34) !important; }   /* the line before it has been modelled: white, thinned */
.say-word.modelled { color:#FFFFFF !important; }
.say-word.mine { color:var(--d-gold) !important; }
.speak-row { margin-top:16px !important; min-height:84px !important; }

/* options as buttons */
.opt-group { gap:8px !important; }
.opt { background:#393939 !important; border:1px solid #474747 !important; color:#E0E0E0 !important; border-radius:8px !important;
  padding:12px 16px !important; font-size:15px !important; line-height:23px !important; font-weight:400 !important; text-align:left !important; }
.opt:active:not(.correct):not(.wrong) { background:#474747 !important; border-color:#555 !important; }
.opt.selected { border-color:#FFCE52 !important; background:rgba(255,206,82,.12) !important; color:#fff !important; }
.opt.correct { border-color:rgba(39,149,12,.60) !important; background:rgba(39,149,12,.10) !important; color:#E0E0E0 !important; }
.opt.wrong { border-color:rgba(232,78,57,.60) !important; background:rgba(232,78,57,.10) !important; color:#E0E0E0 !important; }
.opt.spent, .opt.spent:active { background:#2E2E2E !important; border-color:#393939 !important; color:#7C7C7C !important; }
.move-option { background:#393939 !important; border:1px solid #474747 !important; border-radius:8px !important; color:#E0E0E0; box-shadow:none; }
.move-option.ready { border-color:#FFF500 !important; box-shadow:0 4px 0 #D3CB00; }

/* the keys' quiet state */
.coach-check.disabled, .tap:disabled { background:#393939 !important; border:1px solid #474747; color:#7C7C7C !important; box-shadow:none; }
.tap:disabled .ico, .tap:disabled .lbl { color:#7C7C7C; }

/* the feedback sheet: the same sheet, with the verdict icons drawn in (a mask cannot hold a two-tone glyph) */
.fb { padding:24px 24px 44px !important; }
.fb-head::before { background:none !important; -webkit-mask:none !important; mask:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%2361E07D'/><path d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%232E2E2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-size:24px 24px !important; background-repeat:no-repeat !important; }
.fb.miss .fb-head { color:#FF7764 !important; }
.fb.miss .fb-head::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23FF7764'/><path d='M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8' fill='none' stroke='%232E2E2E' stroke-width='2.4' stroke-linecap='round'/></svg>") !important; }
.fb.miss .fb-note { color:#FFBDB4 !important; }


/* =====================================================================
   PASS 3
   ===================================================================== */
/* the title, a step bigger */
.coach-q { font-size:20px !important; line-height:27px !important; letter-spacing:-.24px !important; }
/* no "new concept" pill */
.ex-label.newc { display:none !important; }
/* Check, disabled: the desert's own 3D key, asleep — a grey face on a darker lip, no light on it */
.coach-check.disabled { background:#3A3A3A !important; border:none !important; color:#8A8A8A !important; height:47px; padding:12px 16px;
  box-shadow:0 6px 0 #262626, 0 10px 14px -8px rgba(0,0,0,.5) !important; transform:none; }
.coach-check.ready { box-shadow:0 6px 0 #D3CB00, 0 14px 20px -8px rgba(0,0,0,.62), inset 0 2px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.10); }
/* one sheet at a time: while the verdict sheet is up, the working sheet steps away */
.app:has(.fb.show) .teach { opacity:0 !important; visibility:hidden !important; transform:translateY(16px); pointer-events:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s .18s !important; }
.teach { transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); }


/* =====================================================================
   PASS 4 — the sheets are FLAT: a darker grey than the ground, no texture, a hairline.
   ===================================================================== */
.teach, .fb { background:#1A1A1A !important; border:0 !important; }
/* the sheet waits for its question: nothing in it has faded in yet, so neither has it */
/* EVERY SHEET SLIDES UP. The working sheet waits below the screen and rises when its question is ready;
   the feedback sheet rises the same way (the kit's fbUp is redefined below). */
.teach { transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.teach:not(:has(.opt.in, .say-line.in, .sayline.in, .speak.in:not(.out), .coach-check.in)) { transform:translateY(calc(100% + 48px)); pointer-events:none; }
@keyframes fbUp { from { transform:translateY(100%); opacity:1; } to { transform:translateY(0); opacity:1; } }
.fb.show { animation:fbUp .5s cubic-bezier(.2,.8,.2,1) !important; }

/* the listening cards (screen 4) are UI cards: the app's alt surface on a hairline, radius 22, a soft drop shadow.
   The painted slab is kept in the markup but not shown. Each state re-tints the surface and its hairline. */
.card { background:#2E2E2E !important; border:1px solid #393939 !important; border-radius:22px !important;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.6) !important; }
.card .slab { display:none; }
.dim { display:block !important; border-radius:22px; }
.card .card-body, .card .tick, .card .cross { z-index:1; }
.card .card-who { font-family:'Druk Text Wide','Druk Wide',Inter,sans-serif !important; font-weight:500 !important; font-size:16px !important;
  line-height:24px !important; letter-spacing:-.32px !important; text-transform:uppercase; color:#FFFFFF !important; }
.card .card-hint { color:rgba(255,255,255,.35) !important; transition:opacity .3s ease; }
.card.playing { background:#333333 !important; border-color:#FFCE52 !important;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,206,82,.22), 0 8px 26px -8px rgba(255,206,82,.32) !important; }
.card.playing .card-hint { opacity:0; }   /* the hint is for when it is quiet */
.card.won { background:#2C3F33 !important; border-color:#61E07D !important; }
.card.no  { background:#45292E !important; border-color:#FF7764 !important; }
.deck::after { display:none; }

/* ---- PASS 6 ---- */
/* finishing the line: the swell stays, the blue ring (a rounded rectangle of light) goes */
@keyframes sayPop { 0% { transform:scale(1); } 38% { transform:scale(1.028); } 100% { transform:scale(1); } }
.say-line.mine, .say-line.pop { box-shadow:none !important; }
.bub.you.talking { border:0 !important; }
/* the wave glows gold while the card speaks, as the mic does */
.card.playing .wave { filter:drop-shadow(0 0 6px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(255,206,82,.8)) !important; }
/* your bubbles: white, black text */
.bub.you, .bub.you.miss { background:#FFFFFF !important; color:#1C1C1C !important; }
/* the mic's live meter: black bars on the gold button, a faint gold bloom instead of the white one */
.speak .wave i { background:var(--d-ink) !important; }   /* the mic glyph's own ink */
.speak.rec .wave { filter:drop-shadow(0 0 6px rgba(255,206,82,.55)) !important; }
/* A PLUM LIGHT BEHIND THE SHEET. The sheet's own fill moves to ::after so the light (::before, z-index -1) is
   truly behind it: most of the glow sits under the sheet, and what shows is a soft crown above its top edge,
   strongest at the centre and fading to the sides. */
.teach { position:relative; }
.teach, .fb { background:transparent !important; }   /* .fb keeps the kit's absolute, bottom-anchored position */
.teach::after, .fb::after { content:""; position:absolute; inset:0; z-index:0; background:#1A1A1A; border-radius:inherit; pointer-events:none; }
.teach::before, .fb::before { content:""; position:absolute; left:-12%; right:-12%; top:-150px; height:280px; pointer-events:none; z-index:-1;
  /* the ellipse ends well inside its box, so the light fades to nothing before any edge could clip it */
  background:radial-gradient(58% 58% at 50% 68%, rgba(172,96,156,.46) 0%, rgba(150,80,130,.20) 42%, rgba(150,80,130,0) 74%); }
.teach > * { position:relative; z-index:1; }
.fb > .fb-content { position:relative; z-index:1; }
.fb > .fb-pulse { z-index:1; }   /* the aura keeps the kit's absolute position: forcing it into flow made the sheet 450px tall */
/* THE ACTIVE CARD'S GLOW: a wide, soft light behind the speaking card, orange-yellow at its top running down to
   a pinkish purple at its foot. It lives on the stack wrapper so it sits genuinely behind the card. */
/* two layers: a tight warm light at the top edge, and a wider, softer plum one that pools under the card */
.stacked::before { content:""; position:absolute; left:-8px; right:-8px; top:-6px; bottom:30%; border-radius:30px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,196,84,.46) 0%, rgba(255,150,110,.30) 60%, rgba(255,150,110,0) 100%);
  filter:blur(12px); opacity:0; transform:translateZ(0); transition:opacity .45s ease; }
.stacked::after { content:""; position:absolute; left:-18px; right:-18px; top:34%; bottom:-30px; border-radius:40px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(236,110,170,0) 0%, rgba(236,110,170,.30) 40%, rgba(176,96,214,.34) 100%);
  filter:blur(28px); opacity:0; transform:translateZ(0); transition:opacity .45s ease; }
.stacked:has(.card.playing)::before, .stacked:has(.card.playing)::after { opacity:1; }
/* the feedback sheet is clipped by the kit (overflow hidden, for its aura); that also cut off the light above its
   top edge, which is why only the working sheets showed a glow. Clip it with room above instead. */
.fb { overflow:visible !important; clip-path:inset(-240px 0 0 0); }
/* ONE ENTRANCE FOR EVERY BUBBLE: a short rise with a touch of scale, the same on every screen */
@keyframes rowIn { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.row.fade-in { animation:rowIn .36s cubic-bezier(.2,.8,.2,1) both; }