/* Dxtr base: the shell, the presenter bar, the "Private preview" badge on every screen, type, cards, chips, tiles,
   pressable buttons, tier tags, sheets, the mascot. Sizes are rem; the root size follows the screen (16px at the
   1280×800 tablet, about 21.6px on a 1920×1080 TV), so one layout fills both. Colours come from css/theme-*.css. */
html{font-size:clamp(11px,min(1.25vw,2vh),30px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{overflow:hidden;color:var(--paper);font-family:var(--font);font-size:1rem;line-height:1.45;background:var(--deep);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:.5rem}
.ic{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#bg{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(70rem 40rem at 100% 110%,rgba(240,185,76,.06),transparent 60%),
  radial-gradient(60rem 40rem at -10% -20%,rgba(111,191,139,.07),transparent 60%),var(--bg)}

/* ── type, as the old demo ── */
.eb{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);font-weight:800}
h1{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
h2{margin:0;font-size:1.1rem;font-weight:700;line-height:1.25}
h3{margin:0;font-size:.95rem;font-weight:700}
p{margin:0}
.sm{font-size:.82rem;color:var(--mut);font-weight:500;line-height:1.45}
.gold{color:var(--gold)}.grn{color:var(--green)}.blu{color:var(--blue)}.cly{color:var(--clay)}.vio{color:var(--violet)}.pnk{color:var(--pink)}
.row{display:flex;gap:.75rem;align-items:center}.col{display:flex;flex-direction:column;gap:.75rem}
.between{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.grow{flex:1;min-width:0}

/* ── the presenter bar ── */
#bar{position:fixed;left:0;right:0;top:0;height:2.75rem;display:flex;align-items:center;gap:.6rem;padding:0 12.5rem 0 1rem;z-index:40;
  background:var(--deep);border-bottom:1px solid var(--hair);transition:transform var(--t-base) var(--ez)}
body.bar-hidden #bar{transform:translateY(-100%)}
#stage{position:fixed;left:0;right:0;bottom:0;top:2.75rem;overflow:hidden;transition:top var(--t-base) var(--ez)}
body.bar-hidden #stage{top:0}
.brand{display:flex;align-items:center;gap:.45rem;font-weight:800;font-size:1.1rem;letter-spacing:-.01em;white-space:nowrap}
.brand .mxs{width:1.6rem;height:1.6rem}
.brand small{font-weight:700;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
#steps{display:flex;align-items:center;gap:.2rem;margin-left:.4rem;flex:1;min-width:0;overflow:hidden}
#steps button{display:flex;align-items:center;gap:.35rem;height:1.85rem;padding:0 .45rem;border-radius:.6rem;color:var(--mut);font-size:.72rem;font-weight:700;white-space:nowrap;border:1px solid transparent}
#steps button b{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;border-radius:.45rem;background:var(--s1);border:1px solid var(--hair);font-size:.62rem;font-weight:800}
#steps button span{display:none}
#steps button.on{background:var(--s1);border-color:var(--hair);color:var(--paper)}
#steps button.on b{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
#steps button.on span{display:inline}
#steps button.done b{color:var(--green);border-color:rgba(111,191,139,.4)}
#steps button:hover{color:var(--paper)}
.net{display:flex;align-items:center;gap:.4rem;height:1.85rem;padding:0 .65rem;border-radius:.6rem;border:1px solid var(--hair);font-size:.72rem;font-weight:700;color:var(--mut);white-space:nowrap}
.net svg{width:.9rem;height:.9rem}
.net.off{color:var(--gold)} .net.ok{color:var(--green)} .net.bad{color:var(--clay)}
.iconbtn{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:.6rem;color:var(--mut)}
.iconbtn:hover{background:var(--s1);color:var(--paper)}
.menu{position:absolute;top:2.6rem;z-index:50;min-width:17rem;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 20px 40px -12px #000;padding:.4rem;
  display:flex;flex-direction:column}
.menu button{text-align:left;padding:.5rem .7rem;border-radius:.6rem;font-size:.82rem;font-weight:600;display:flex;gap:.6rem;align-items:center}
.menu button:hover{background:var(--s2)}
.menu button small{margin-left:auto;color:var(--mut);font-size:.68rem}
.menu .g{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut2);font-weight:800;padding:.5rem .7rem .2rem}

/* the badge on every screen, never hidden */
#preview{position:fixed;top:.55rem;right:1rem;z-index:60;display:flex;align-items:center;gap:.4rem;height:1.65rem;padding:0 .7rem;border-radius:.55rem;
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--gold);border:1px solid rgba(240,185,76,.5);background:rgba(15,30,26,.92);pointer-events:none}
#preview i{width:.4rem;height:.4rem;border-radius:50%;background:var(--gold)}
#rehearsal{position:fixed;left:50%;bottom:.6rem;transform:translateX(-50%);z-index:60;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  color:var(--mut);background:rgba(10,21,18,.9);border:1px solid var(--hair);padding:.25rem .7rem;border-radius:.55rem;pointer-events:none}

/* ── screens ── */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:1rem;padding:1.25rem 2rem 1.4rem;animation:enter var(--t-slow) var(--ez) both}
@keyframes enter{from{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.head .chips{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.r{opacity:0;transform:translateY(.75rem);animation:rise var(--t-slow) var(--ez) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ── cards, chips, tiles, bars ── */
.card{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:1rem 1.1rem}
.card.flat{box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--s2);border:1px solid var(--hair);border-radius:.65rem;padding:.3rem .6rem;font-size:.72rem;font-weight:800;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.chip.g{background:rgba(111,191,139,.15);border-color:rgba(111,191,139,.35);color:var(--green)}
.chip.c{background:rgba(224,114,79,.15);border-color:rgba(224,114,79,.38);color:var(--clay)}
.chip.b{background:rgba(95,168,224,.15);border-color:rgba(95,168,224,.35);color:var(--blue)}
.chip.v{background:rgba(176,140,232,.15);border-color:rgba(176,140,232,.35);color:var(--violet)}
.chip.y{background:rgba(240,185,76,.14);border-color:rgba(240,185,76,.4);color:var(--gold)}
.chip.sample{background:rgba(95,168,224,.1);border-color:rgba(95,168,224,.3);color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:.6rem}
.chip.plan{background:rgba(176,140,232,.1);border-color:rgba(176,140,232,.3);color:var(--violet);letter-spacing:.08em;text-transform:uppercase;font-size:.6rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tile{background:var(--s1);border:1px solid var(--hair);border-radius:1.05rem;padding:.8rem .6rem;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.32)}
.tile .n{font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.tile .l{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:.35rem;font-weight:800}
.bar{height:.7rem;border-radius:.45rem;background:var(--s2);overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.3)}
.bar i{display:block;height:100%;border-radius:.45rem;width:0;transition:width 1.1s var(--ez);background:linear-gradient(90deg,var(--gold),var(--gold2))}
.bar i.g{background:linear-gradient(90deg,var(--green),var(--green2))} .bar i.c{background:linear-gradient(90deg,var(--clay),#B9573A)} .bar i.b{background:linear-gradient(90deg,var(--blue),#3E7FB8)} .bar i.v{background:linear-gradient(90deg,var(--violet),#8A68C8)}
.lr{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-top:1px solid var(--hair2)}
.lr:first-of-type{border-top:none}
.lr .t{flex:1;font-size:.92rem;font-weight:600;min-width:0}.lr .v{font-size:.78rem;color:var(--mut);font-weight:700;white-space:nowrap}
.dot{width:.42rem;height:.42rem;border-radius:50%;flex:none;background:var(--green)}
.dot.c{background:var(--clay)}.dot.d{background:var(--s3)}.dot.b{background:var(--blue)}.dot.v{background:var(--violet)}.dot.y{background:var(--gold)}

/* ── pressable buttons on a solid bottom edge ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.7rem;padding:0 1.15rem;border-radius:.9rem;font-weight:800;font-size:.92rem;
  background:var(--s2);border:2px solid rgba(255,255,255,.08);box-shadow:0 4px 0 var(--d-shadow);transition:transform .07s,box-shadow .07s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d-shadow)}
.btn.gold{background:linear-gradient(180deg,#FFD979,var(--gold));color:var(--ink-on-gold);border-color:transparent;box-shadow:0 4px 0 var(--gold-d)}
.btn.green{background:linear-gradient(180deg,#7BD68C,var(--win));color:#08160C;border-color:transparent;box-shadow:0 4px 0 var(--win-d)}
.btn.sm{height:2.1rem;padding:0 .8rem;font-size:.8rem;border-radius:.7rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.bigbtn{display:grid;place-items:center;border-radius:1.25rem;padding:1.1rem;font-size:1.6rem;font-weight:800;border:2px solid;box-shadow:0 6px 0 var(--d-shadow);transition:transform .07s,box-shadow .07s}
.bigbtn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--d-shadow)}
.bigbtn img{width:2.6rem;height:2.6rem}
.bigbtn small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem}
.bb-gold{background:rgba(240,185,76,.16);border-color:var(--gold);color:var(--gold)}
.bb-green{background:rgba(111,191,139,.16);border-color:var(--green);color:var(--green)}
.bb-violet{background:rgba(176,140,232,.16);border-color:var(--violet);color:var(--violet)}
.fab{position:absolute;right:2rem;bottom:1.6rem;z-index:20;width:3.6rem;height:3.6rem;border-radius:1.2rem;background:linear-gradient(150deg,var(--gold),var(--gold2));display:grid;place-items:center;
  box-shadow:0 6px 0 var(--gold-d),0 12px 34px -6px rgba(240,185,76,.5);animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fab svg{width:1.6rem;height:1.6rem;fill:var(--ink-on-gold)}
.seg{display:flex;background:var(--s1);border:1px solid var(--hair);border-radius:.8rem;padding:.2rem;gap:.2rem}
.seg button{flex:1;text-align:center;padding:.45rem .8rem;font-size:.8rem;font-weight:700;border-radius:.6rem;color:var(--mut);white-space:nowrap}
.seg button.on{background:var(--gold);color:var(--ink-on-gold)}
.sw{width:2.75rem;height:1.55rem;border-radius:1rem;background:var(--s3);position:relative;flex:none;cursor:pointer;transition:background var(--t-fast)}
.sw.on{background:var(--green)}
.sw i{position:absolute;top:.19rem;left:.19rem;width:1.17rem;height:1.17rem;border-radius:50%;background:var(--paper);transition:left .3s var(--ez)}
.sw.on i{left:1.4rem}

/* ── where it ran: the hybrid tier tags ── */
.tier{display:inline-flex;align-items:center;gap:.35rem;height:1.55rem;padding:0 .55rem;border-radius:.5rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;white-space:nowrap;border:1px solid}
.tier svg{width:.85rem;height:.85rem}
.tier.tablet{background:rgba(111,191,139,.13);color:var(--green);border-color:rgba(111,191,139,.35)}
.tier.zvrn{background:rgba(240,185,76,.13);color:var(--gold);border-color:rgba(240,185,76,.4)}
.tier.cloud{background:rgba(95,168,224,.13);color:var(--blue);border-color:rgba(95,168,224,.35)}
.tier-flip{animation:flip var(--t-slow) var(--ez) both}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}

/* ── sheet, toast ── */
#sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:fade var(--t-base) both}
@keyframes fade{from{opacity:0}}
#sheet .panel{width:min(46rem,96vw);max-height:90vh;overflow:auto;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:1.4rem 1.7rem 1.8rem;animation:up var(--t-base) var(--ez) both;user-select:text}
@keyframes up{from{transform:translateY(2rem);opacity:0}}
#sheet h2{margin-bottom:.8rem;font-size:1.3rem;font-weight:800}
#sheet label.f{display:block;font-size:.78rem;color:var(--mut);font-weight:700;margin:.9rem 0 .35rem}
#sheet input[type=url],#sheet input[type=text]{width:100%;height:2.6rem;border-radius:.75rem;border:1px solid var(--hair);background:var(--bg);padding:0 .9rem;font-size:.9rem}
#sheet .note{font-size:.76rem;color:var(--mut);margin-top:.4rem}
#sheet .credits{font-size:.7rem;color:var(--mut);border-top:1px solid var(--hair2);margin-top:1.3rem;padding-top:.9rem}
#sheet .opt-row{display:flex;align-items:center;gap:.8rem;margin:.75rem 0;font-size:.88rem;font-weight:600}
#toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:90;max-width:42rem;padding:.75rem 1.1rem;border-radius:.9rem;background:var(--s2);border:1px solid var(--hair);
  box-shadow:0 20px 40px -12px #000;font-size:.88rem;font-weight:600;animation:up var(--t-base) var(--ez) both}

/* the ghost finger and captions (attract loop) */
#ghost{position:fixed;z-index:70;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0 26%,rgba(240,185,76,.5) 30% 60%,transparent 62%);box-shadow:0 0 1.2rem rgba(240,185,76,.6);transition:transform .12s}
#ghost.down{transform:scale(.8)}
#caption{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:65;max-width:min(62rem,92vw);padding:.9rem 1.6rem;border-radius:1.1rem;
  background:rgba(10,21,18,.92);border:1px solid var(--hair);font-size:1.45rem;font-weight:800;text-align:center;line-height:1.25;box-shadow:0 30px 60px -20px #000;animation:up var(--t-slow) var(--ez) both}
#caption small{display:block;margin-top:.3rem;font-size:.85rem;font-weight:600;color:var(--mut)}

/* ── the mascot (ported from the UI demo: placeholder character, same contract as the Android build) ── */
.mx{display:block;overflow:visible;flex:none}
.mx-wrap{position:relative;display:grid;place-items:center;flex:none}
.mx-body-g{transform-origin:100px 132px;animation:mxBreathe 3.4s ease-in-out infinite}
@keyframes mxBreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2px) scale(1.018,.986)}}
.mx-shadow{fill:#000;opacity:.42;animation:mxShadow 3.4s ease-in-out infinite}
@keyframes mxShadow{0%,100%{transform:scale(1,1);opacity:.42}50%{transform:scale(.93,1);opacity:.32}}
.mx-glow{opacity:.5;animation:mxGlow 3.4s ease-in-out infinite}
@keyframes mxGlow{0%,100%{opacity:.42}50%{opacity:.62}}
.mx-sprout{transform-origin:100px 66px;animation:mxSway 4.6s ease-in-out infinite}
@keyframes mxSway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.br{fill:none;stroke:#3A2A08;stroke-width:5;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .28s var(--ez),opacity .2s}
.mx-cheeks{opacity:0;transition:opacity .3s}
.mx-eye{fill:#241A06}
.mx-lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
.mx-blink .mx-lid{animation:mxBlink 5.4s ease-in-out infinite}
.mx-blink g:nth-child(2) .mx-lid{animation-duration:5.45s}
@keyframes mxBlink{0%,91%,100%{transform:scaleY(0)}94%,96%{transform:scaleY(1)}}
.mx-spark{fill:#fff}
.mx-eyes{transition:transform .3s var(--ez)}
.mo{opacity:0;transition:opacity .18s}
.mo-rest{fill:none;stroke:#3A2A08;stroke-width:4.5;stroke-linecap:round}
.mo-happy{fill:#3A2A08}
.mo-o,.mo-wide{fill:#3A2A08;transform-box:fill-box;transform-origin:center}
.mx[data-state="0"] .mo-rest,.mx[data-state="1"] .mo-rest,.mx[data-state="2"] .mo-rest,.mx[data-state="4"] .mo-rest{opacity:1}
.mx[data-state="5"] .mo-happy,.mx[data-state="6"] .mo-happy{opacity:1}
.mx[data-state="5"] .mx-cheeks,.mx[data-state="6"] .mx-cheeks{opacity:1}
.mx-ears{opacity:0}.mx-ears path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.mx-think{opacity:0}.mx-think circle{fill:var(--gold)}
.mx[data-state="1"] .mx-body-g{animation:mxLean 2.4s ease-in-out infinite}
@keyframes mxLean{0%,100%{transform:rotate(-4deg) translateY(-1px)}50%{transform:rotate(-6deg) translateY(-3px)}}
.mx[data-state="1"] .mx-eyes{transform:scale(1.13)}
.mx[data-state="1"] .br{transform:translateY(-5px)}
.mx[data-state="1"] .mx-ears{opacity:1}
.mx[data-state="1"] .mx-ears path:nth-child(odd){animation:mxPing 1.5s ease-out infinite}
.mx[data-state="1"] .mx-ears path:nth-child(even){animation:mxPing 1.5s ease-out .28s infinite}
@keyframes mxPing{0%{opacity:0;transform:scale(.82)}35%{opacity:.9}100%{opacity:0;transform:scale(1.18)}}
.mx[data-state="2"] .mx-body-g{animation:mxPonder 3s ease-in-out infinite}
@keyframes mxPonder{0%,100%{transform:rotate(5deg)}50%{transform:rotate(1deg) translateY(-3px)}}
.mx[data-state="2"] .mx-eyes{transform:translate(4px,-5px)}
.mx[data-state="2"] .br-l{transform:translateY(-7px) rotate(-10deg)}
.mx[data-state="2"] .br-r{transform:translateY(2px) rotate(-5deg)}
.mx[data-state="2"] .mx-think{opacity:1}
.mx[data-state="2"] .mx-think circle:nth-child(1){animation:mxDot 1.35s ease-in-out infinite}
.mx[data-state="2"] .mx-think circle:nth-child(2){animation:mxDot 1.35s ease-in-out .18s infinite}
.mx[data-state="2"] .mx-think circle:nth-child(3){animation:mxDot 1.35s ease-in-out .36s infinite}
@keyframes mxDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}
.mx[data-state="3"] .mx-body-g{animation:mxBob 1.1s ease-in-out infinite}
@keyframes mxBob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(.99,1.012)}}
.mx[data-state="3"] .br{transform:translateY(-3px)}
.mx[data-state="3"] .mo-rest{opacity:1}
.mx.talking .mo-rest{opacity:0}
.mx.talking .mo-o{opacity:1;animation:mxTalk .32s ease-in-out infinite}
@keyframes mxTalk{0%,100%{transform:scaleY(.4) scaleX(1.06)}50%{transform:scaleY(1.3) scaleX(.88)}}
.mx[data-state="4"] .mx-body-g{animation:mxTilt 3.6s ease-in-out infinite}
@keyframes mxTilt{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-6deg) translateY(-3px)}}
.mx[data-state="4"] .br{transform:translateY(-8px)}
.mx[data-state="4"] .mx-eyes{transform:scale(1.08)}
.mx[data-state="5"] .mx-body-g{animation:mxPuff 2.8s ease-in-out infinite}
@keyframes mxPuff{0%,100%{transform:translateY(-2px) scale(1.04,1.02)}50%{transform:translateY(-5px) scale(1.06,1.04)}}
.mx[data-state="5"] .mx-eyes{transform:scaleY(.72) translateY(2px)}
.mx[data-state="5"] .br{transform:translateY(-6px)}
.mx[data-state="6"] .mx-body-g{animation:mxWave 1.6s ease-in-out infinite}
@keyframes mxWave{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-7deg) translateY(-7px)}60%{transform:rotate(6deg) translateY(-3px)}}
.mx[data-state="6"] .mx-sprout{animation:mxSway 1s ease-in-out infinite}
.mx[data-state="6"] .br{transform:translateY(-5px)}
.mx.t-correct .mx-body-g{animation:mxHop .95s cubic-bezier(.34,1.56,.64,1)}
@keyframes mxHop{0%{transform:translateY(0) scale(1,1)}14%{transform:translateY(7px) scale(1.14,.84)}50%{transform:translateY(-30px) scale(.9,1.14)}78%{transform:translateY(2px) scale(1.07,.94)}100%{transform:translateY(0) scale(1,1)}}
.mx.t-correct .mo,.mx.t-celebrate .mo{opacity:0}
.mx.t-correct .mo-happy{opacity:1}
.mx.t-celebrate .mo-wide{opacity:1}
.mx.t-correct .mx-cheeks,.mx.t-celebrate .mx-cheeks{opacity:1}
.mx.t-correct .br{transform:translateY(-8px)}
.mx.t-correct .mx-eyes{transform:scaleY(.7) translateY(2px)}
.mx.t-encourage .mx-body-g{animation:mxNudge 1.15s ease-in-out}
@keyframes mxNudge{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg) translateY(-4px)}50%{transform:rotate(8deg) translateY(-2px)}75%{transform:rotate(-4deg) translateY(-1px)}}
.mx.t-encourage .mx-glow{animation:none;opacity:.95}
.mx.t-encourage .br-l{transform:translateY(-4px) rotate(11deg)}
.mx.t-encourage .br-r{transform:translateY(-4px) rotate(-11deg)}
.mx.t-encourage .mo{opacity:0}.mx.t-encourage .mo-rest{opacity:1}
.mx.t-celebrate .mx-body-g{animation:mxParty 1.9s cubic-bezier(.34,1.56,.64,1)}
@keyframes mxParty{0%{transform:translateY(0) scale(1,1)}12%{transform:translateY(8px) scale(1.16,.82)}45%{transform:translateY(-44px) scale(.9,1.14) rotate(200deg)}72%{transform:translateY(-6px) scale(1.05,.95) rotate(360deg)}100%{transform:translateY(0) rotate(360deg)}}
.mx.t-celebrate .br{transform:translateY(-9px)}
.mx-fx circle{opacity:0}
.mx.t-correct .mx-fx circle,.mx.t-celebrate .mx-fx circle{animation:mxBurst .95s ease-out}
.mx.t-celebrate .mx-fx circle{animation-duration:1.6s}
.mx-fx circle:nth-child(1){--mx:-46px;--my:-40px}.mx-fx circle:nth-child(2){--mx:48px;--my:-34px}.mx-fx circle:nth-child(3){--mx:-38px;--my:36px}
.mx-fx circle:nth-child(4){--mx:42px;--my:42px}.mx-fx circle:nth-child(5){--mx:0px;--my:-58px}.mx-fx circle:nth-child(6){--mx:-58px;--my:-4px}.mx-fx circle:nth-child(7){--mx:58px;--my:6px}
@keyframes mxBurst{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(var(--mx),var(--my)) scale(1.1)}}
/* the voice bar under the mascot */
.mxbar{display:flex;align-items:center;gap:.6rem;background:var(--s1);border:1px solid var(--hair);border-radius:.9rem;padding:.55rem .8rem}
.mxbar .eqs{display:flex;gap:3px;align-items:flex-end;height:1.1rem;flex:none}
.mxbar .eqs i{width:3px;border-radius:3px;background:var(--gold);opacity:.45}
.mxbar .eqs i:nth-child(1){height:.45rem}.mxbar .eqs i:nth-child(2){height:.9rem}.mxbar .eqs i:nth-child(3){height:1.1rem}.mxbar .eqs i:nth-child(4){height:.65rem}
.mxbar.on .eqs i{opacity:1;animation:eq .9s ease-in-out infinite}
.mxbar.on .eqs i:nth-child(2){animation-delay:.12s}.mxbar.on .eqs i:nth-child(3){animation-delay:.24s}.mxbar.on .eqs i:nth-child(4){animation-delay:.36s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.mxbar .lbl{font-size:.74rem;color:var(--mut);font-weight:700;flex:1;min-width:0}
.mxbar.on .lbl{color:var(--gold)}
.mxbar .rep{font-size:.7rem;font-weight:800;color:var(--gold);border:1px solid var(--hair);border-radius:.55rem;padding:.25rem .55rem}
.bubble{max-width:24rem;padding:.8rem 1rem;border-radius:1.1rem;background:var(--s1);border:1px solid var(--hair);font-size:1.1rem;font-weight:700;line-height:1.3;animation:pop var(--t-base) var(--pop) both}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.bubble .via{display:block;margin-top:.35rem;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);font-weight:800}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}.r{opacity:1;transform:none}}