:root{
    --bg:#1D0E27; --panel:#2C1738; --panel2:#3B2150; --ink:#FDF4E3; --dim:#B79ECB; --mute:#A691B6; --muted:#A691B6;
    --mag:#F0509B; --tang:#FF7A29; --lime:#C8F135; --turq:#2BD9C6;
    --magT:#3D0A22; --sun:#FFC53D; --violT:#1B1033; --sunT:#3A2A00; --sky:#4FC3F7; --skyT:#052A3A; --tangT:#3D1A00; --limeT:#2A3600; --turqT:#00332D; --vio:#A78BFA;
  }
  *{margin:0;padding:0;box-sizing:border-box}
/* This SPA owns page-position restoration. Browser scroll anchoring can otherwise
   keep a destroyed element in view after route content is replaced, which is what
   can make long pages such as Pricing appear to open halfway down. */
#app{overflow-anchor:none}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;min-height:100vh;max-width:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.005em;overflow-x:hidden}
  .pattern{position:fixed;inset:-90px;pointer-events:none;opacity:.055;z-index:0;animation:drift 90s linear infinite alternate;
    background-image:linear-gradient(135deg,var(--lime) 25%,transparent 25%),linear-gradient(225deg,var(--mag) 25%,transparent 25%),linear-gradient(45deg,var(--turq) 25%,transparent 25%),linear-gradient(315deg,var(--tang) 25%,transparent 25%);
    background-position:40px 0,40px 0,0 0,0 0;background-size:80px 80px}
  .wrap.wide2{max-width:1180px}
  .wrap{position:relative;z-index:1;width:100%;max-width:min(560px,100%);overflow-x:hidden;margin:0 auto;padding:20px 16px 80px;display:flex;flex-direction:column;align-items:center}
  .disp{font-family:'Unbounded','Inter',sans-serif}
  .cut8{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .cut10{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .cut12{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .cut18{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
  .card{background:var(--panel);padding:clamp(18px,3vw,28px);width:100%}
  .btn{display:flex;align-items:center;justify-content:center;gap:10px;border:none;padding:15px 22px;
    font-size:clamp(15px,1.8vw,17px);font-weight:700;cursor:pointer;font-family:'Unbounded','Inter',sans-serif;
    width:100%;letter-spacing:.3px;transition:transform .1s,filter .15s}
  .btn:hover{filter:brightness(1.08);transform:translateY(-2px)} .btn:active{transform:scale(.97)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .b-tang{background:var(--tang);color:var(--tangT)} .b-mag{background:var(--mag);color:var(--magT)}
  .b-lime{background:var(--lime);color:var(--limeT)} .b-turq{background:var(--turq);color:var(--turqT)}
  .b-vio{background:var(--vio);color:var(--violT)} .b-sun{background:var(--sun);color:var(--sunT)}
  .b-panel{background:var(--panel2);color:var(--ink)}
  .ghost{background:transparent;color:var(--dim);border:2px solid var(--panel2);padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;width:100%}
  .ghost:active{transform:scale(.97)}
  input,select{width:100%;padding:14px 15px;border:2px solid var(--panel2);background:#160A1E;color:var(--ink);font-size:16px;font-family:'Inter',sans-serif;outline:none;margin-bottom:10px}
  input:focus,select:focus{border-color:var(--tang)}
  .label{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:7px;display:block}
  .sp10{height:10px}.sp12{height:12px}
  @keyframes popIn{0%{opacity:0;transform:translateY(18px) scale(.96)}60%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)}}
  @keyframes floatySlow{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-9px) rotate(-1.5deg)}}
  @keyframes sheen{0%{background-position:110% 0}100%{background-position:-30% 0}}
  @keyframes drumPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
  @keyframes bigPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
  @keyframes fall{to{transform:translateY(115vh) rotate(720deg);opacity:.9}}
  
  .pop{animation:popIn .35s ease both}
  .pulse{animation:drumPulse .5s ease infinite}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  .logo{text-align:center}
  .logo .word{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;letter-spacing:-0.5px;line-height:1;text-shadow:0 0 38px rgba(255,122,41,.3)}
  .logo .oti{color:var(--ink)} .logo .ya{color:var(--tang)}
  .logo .gem{display:inline-block;width:.32em;height:.32em;background:var(--lime);transform:rotate(45deg);margin-left:.16em;vertical-align:.4em;animation:gemPulse 2.6s ease infinite}
  @keyframes gemPulse{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.3);background:var(--turq)}}
  .tag{color:var(--dim);font-size:15px;margin-top:10px;font-weight:500}
  .tag b{color:var(--turq);font-weight:700}
  .row{display:flex;align-items:center;gap:12px}
  .namegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .namegrid > div{min-width:0}
  @media(max-width:480px){.namegrid{grid-template-columns:1fr}}
  .qimg{max-width:100%;max-height:240px;object-fit:contain;display:block;margin:0 auto 14px}
  .avbtn{width:52px;height:52px;font-size:26px;border:2px solid var(--panel2);background:#160A1E;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .avbtn.sel{border-color:var(--lime);background:var(--panel2)}
  .dot{width:9px;height:9px;transform:rotate(45deg);background:var(--panel2);display:inline-block}
  .dot.done{background:var(--turq)} .dot.now{background:var(--tang)}
  .sndbtn{position:fixed;top:14px;left:14px;z-index:10;width:46px;height:46px;border:2px solid var(--panel2);
    background:var(--panel);color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .musbtn{position:fixed;top:14px;left:70px;z-index:10;width:46px;height:46px;border:2px solid var(--panel2);
    background:var(--panel);color:var(--ink);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:opacity .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .authnav{position:fixed;top:13px;right:14px;z-index:36;display:flex;align-items:center;gap:8px}
  .authnav button{height:44px;border-radius:999px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;
    font-size:13px;line-height:1;padding:0 17px;transition:transform .18s,box-shadow .2s,border-color .2s,filter .2s}
  .authnav button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.42)}
  .authnav .navlogin{border:1.5px solid var(--panel2);background:var(--panel);color:var(--ink)}
  .authnav .navlogin:hover{border-color:var(--turq)}
  .authnav .navsignup{border:1.5px solid var(--lime);background:var(--lime);color:var(--limeT)}
  .authnav .navsignup:hover{filter:brightness(1.05)}
  .profbtn{position:fixed;top:13px;right:14px;z-index:36;height:44px;border-radius:999px;
    border:1.5px solid var(--panel2);background:var(--panel);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;gap:9px;padding:4px 14px 4px 5px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:13px;line-height:1;
    transition:transform .18s,box-shadow .2s,border-color .2s}
  .profbtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.42);border-color:var(--turq)}
  .profbtn .pav{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative;
    font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:14px}
  .profbtn.signed{border-color:rgba(255,122,41,.5);background:rgba(255,122,41,.1)}
  .profbtn.signed .pav{background:linear-gradient(135deg,var(--tang),var(--mag));color:#3A0E16}
  .profbtn .pdot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
    background:var(--lime);border:2px solid var(--panel);display:block}
  .profbtn .plab{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .profbtn .pcar{flex-shrink:0;opacity:.75;font-size:9px}
  @media(max-width:700px){.profbtn .plab{display:none}.profbtn{padding:4px 8px 4px 5px}}
  @media(max-width:520px){
    .authnav{top:12px;right:10px;gap:6px}
    .authnav button{height:40px;padding:0 12px;font-size:11.5px}
    .authnav .navsignup{padding:0 13px}
  }
  .amenu{position:fixed;top:66px;right:14px;z-index:45;width:min(290px,calc(100vw - 28px));
    background:var(--panel);border:1px solid rgba(253,244,227,.12);border-radius:18px;padding:8px;
    box-shadow:0 22px 50px rgba(0,0,0,.55);animation:popIn .22s cubic-bezier(.16,1.3,.3,1) both;display:none}
  .amenu.on{display:block}
  .amenu .ah{display:flex;gap:11px;align-items:center;padding:11px 11px 13px;border-bottom:1px solid var(--panel2);margin-bottom:7px}
  .amenu .aav{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--tang),var(--mag));color:#3A0E16;
    font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:16px}
  .amenu .an{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .amenu .ae{font-size:11.5px;color:var(--dim);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
  .amenu button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;cursor:pointer;
    color:var(--ink);font-family:'Inter',sans-serif;font-weight:600;font-size:13.2px;padding:11px;border-radius:11px;
    text-align:left;transition:background .16s,color .16s}
  .amenu button:hover{background:rgba(255,255,255,.06)}
  .amenu button i{color:var(--dim);display:grid;place-items:center;flex-shrink:0}
  .amenu button:hover i{color:var(--turq)}
  .amenu .sep{height:1px;background:var(--panel2);margin:7px 4px}
  .amenu .out{color:var(--mag)} .amenu .out i{color:var(--mag)}
  .ascrim{position:fixed;inset:0;z-index:44;display:none}
  .ascrim.on{display:block}
  .chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:2px solid var(--panel2);color:var(--dim);
    font-weight:700;font-size:13px;padding:8px 14px;margin:0 4px;cursor:pointer;transition:all .15s;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .chip:hover{color:var(--ink);border-color:var(--turq);transform:translateY(-2px)}
  .tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
  @media(min-width:480px){.tiles{grid-template-columns:1fr 1fr}}
  .tile{border:none;cursor:pointer;padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    text-align:left;font-family:'Inter',sans-serif;transition:transform .15s,box-shadow .15s}
  .tile:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
  .tile:active{transform:scale(.97)}
  .ticon{font-size:26px}
  .ttl{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:16px}
  .tsub{font-size:12.5px;font-weight:700;opacity:.8}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(min-width:700px){.fgrid{grid-template-columns:repeat(4,1fr)}}
  .fcard{width:100%;min-width:0;border:none;cursor:pointer;padding:16px 14px;
    display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;font-family:'Inter',sans-serif;transition:transform .15s}
  .fcard:hover{transform:translateY(-4px)}
  .fcard:active{transform:scale(.97)}
  .fplay{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12px;margin-top:2px;border-bottom:2px solid currentColor}
  /* --- hero word --- */
  .bigword{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;letter-spacing:-2px;line-height:.95;
    text-align:center;font-size:clamp(62px,17vw,132px);position:relative;z-index:2}
  .bigword .ltr{display:inline-block;animation:letterIn .85s cubic-bezier(.16,1.5,.3,1) both;will-change:transform,opacity}
  .bigword .oti{color:var(--ink)} .bigword .ya{color:var(--tang)}
  .bigword .hgem{display:inline-block;width:.22em;height:.22em;background:var(--lime);transform:rotate(45deg);
    margin-left:.1em;vertical-align:.28em;animation:gemBirth 1s cubic-bezier(.16,1.6,.3,1) .62s both,gemPulse 2.8s ease 1.6s infinite}
  @keyframes letterIn{0%{opacity:0;transform:translateY(46px) rotate(-9deg) scale(.72)}
    64%{opacity:1;transform:translateY(-7px) rotate(2deg) scale(1.06)}100%{opacity:1;transform:none}}
  @keyframes gemBirth{0%{opacity:0;transform:rotate(45deg) scale(0)}100%{opacity:1;transform:rotate(45deg) scale(1)}}
  .wordwrap{position:relative;padding:6px 0 2px}
  .wordwrap::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
    background-size:260% 100%;background-position:130% 0;mix-blend-mode:overlay;animation:sheen 1.5s ease 1.05s both}
  /* --- aurora glow --- */
  .faces{position:absolute;inset:0;pointer-events:none;z-index:2;display:none}
  @media(min-width:880px){.faces{display:block}}
  .face{position:absolute;border-radius:50%;overflow:hidden;background:var(--panel);
    box-shadow:0 12px 30px rgba(0,0,0,.5)}
  .face img{width:100%;height:100%;object-fit:cover;display:block}
  .face::after{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:inset 0 0 0 3px rgba(253,244,227,.16)}
  .face.a{width:86px;height:86px;left:6%;top:46%;animation:fl1 8s ease-in-out infinite;
    box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 3px rgba(43,217,198,.5)}
  .face.b{width:102px;height:102px;right:6%;top:13%;animation:fl2 9.5s ease-in-out infinite;
    box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 3px rgba(255,122,41,.55)}
  .gchip{position:absolute;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11px;padding:6px 11px;
    border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4)}
  .gchip.g1{left:15%;top:39%;background:var(--tang);color:var(--tangT);animation:fl2 7.5s ease-in-out infinite}
  .gchip.g2{right:14%;top:31%;background:var(--lime);color:var(--limeT);animation:fl1 9s ease-in-out infinite}
  .dotc{position:absolute;border-radius:50%;pointer-events:none}
  .dotc.d1{width:16px;height:16px;left:14%;top:14%;background:var(--lime);opacity:.85;animation:fl2 7s ease-in-out infinite}
  .dotc.d2{width:11px;height:11px;left:3%;top:47%;background:var(--mag);opacity:.75;animation:fl1 9s ease-in-out infinite}
  .dotc.d3{width:14px;height:14px;right:13%;top:9%;background:var(--tang);opacity:.8;animation:fl1 8.5s ease-in-out infinite}
  .dotc.d4{width:10px;height:10px;right:3.5%;top:44%;background:var(--turq);opacity:.75;animation:fl2 10s ease-in-out infinite}
  @keyframes fl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
  @media(min-width:1180px){
    .face.a{width:96px;height:96px;left:9%}
    .face.b{width:112px;height:112px;right:9%}
    .gchip.g1{left:17%} .gchip.g2{right:16%}
  }
  .aurora{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:min(560px,100vw);height:300px;
    z-index:0;pointer-events:none;filter:blur(46px);opacity:.5}
  .aurora i{position:absolute;border-radius:50%;display:block;mix-blend-mode:screen}
  .aurora i:nth-child(1){width:230px;height:230px;background:var(--tang);left:6%;top:14%;animation:orb 13s ease-in-out infinite}
  .aurora i:nth-child(2){width:200px;height:200px;background:var(--mag);right:4%;top:4%;animation:orb 16s ease-in-out infinite reverse}
  .aurora i:nth-child(3){width:170px;height:170px;background:var(--turq);left:38%;bottom:0;animation:orb 19s ease-in-out infinite}
  @keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-24px) scale(1.16)}66%{transform:translate(-26px,18px) scale(.9)}}
  /* --- kicker --- */
  .kicker{text-align:center;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:clamp(13px,3.1vw,17px);
    letter-spacing:3.5px;margin-top:12px;position:relative;z-index:2;
    background:linear-gradient(90deg,var(--dim) 0%,var(--ink) 22%,var(--lime) 42%,var(--ink) 62%,var(--dim) 100%);
    background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:flow 7s linear infinite,popIn .6s ease .75s both}
  @keyframes flow{0%{background-position:120% 0}100%{background-position:-120% 0}}
  /* --- scroll reveal --- */
  .rvL{opacity:0;transform:translateX(-26px)}
  .rvR{opacity:0;transform:translateX(26px)}
  .rvL,.rvR{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .rvL.in,.rvR.in{opacity:1;transform:none}
  /* The consent bar.

   Reported: on a phone it was taking roughly 40% of the viewport, because the
   copy wrapped to eight lines. Google exempts consent banners from the
   intrusive interstitial penalty only where they use a reasonable amount of
   screen space, and this appears on every page including the ones we most want
   indexed.

   The copy is now shorter, and this cap means no future edit to it can make the
   bar swallow the screen again: it scrolls internally rather than growing. */
/* The consent bar.

   Reported: on a phone it covered roughly 40% of the screen, which is enough
   to hide the thing somebody came to read. Google's mobile guidance exempts
   consent banners from the intrusive interstitial penalty only where they use
   a REASONABLE amount of screen space, and 40% is not obviously that.

   Capped at 30vh, scrollable if it ever needs more. A cap rather than shorter
   copy alone, because copy grows back and a cap does not. */
.cookiebar{position:fixed;bottom:0;left:0;right:0;z-index:50;display:none;background:#120720;
  border-top:1px solid rgba(253,244,227,.12);padding:16px 18px;box-shadow:0 -14px 40px rgba(0,0,0,.5);
  max-height:30vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .cookiebar.on{display:block;animation:popIn .4s ease both}
  .cookiebar .in{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .cookiebar p{flex:1;min-width:240px;font-size:12.8px;color:var(--dim);font-weight:400;line-height:1.65;margin:0}
  .cookiebar a{color:var(--turq);cursor:pointer}

/* ---------- otiya Live: the next session ----------
   Sits above the page's explanation of the concept, because somebody arriving
   from a poster wants the date and the prizes, not the pitch. The prizes are
   the loudest thing here on purpose: they are why people turn up. */
.leEvent{max-width:640px;margin:0 auto 30px;padding:24px 24px 22px;
  background:linear-gradient(158deg,#33204A 0%,#1F1132 100%);
  border:1px solid rgba(200,241,53,.34)}
.leTop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.leFlag{font:800 9.6px 'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;
  color:var(--limeT);background:var(--lime);padding:6px 10px}
.leWhen{font:800 13px 'Inter',sans-serif;color:var(--ink);letter-spacing:.2px}
.leH1{font-size:26px;line-height:1.22;margin:0 0 20px;color:var(--ink)}

/* The prize list. A panel of its own so the eye lands here first. */
.lePrizes{background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.28);
  padding:16px 17px 14px;margin-bottom:18px}
.lePrizeHead{font:800 9.6px 'Inter',sans-serif;letter-spacing:2px;
  text-transform:uppercase;color:var(--lime);margin-bottom:11px}
.lePrize{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;
  align-items:baseline;padding:7px 0;border-top:1px solid rgba(253,244,227,.08)}
.lePrize:first-of-type{border-top:0;padding-top:0}
.lePrize b{font:800 13px 'Inter',sans-serif;color:var(--lime);line-height:1.4}
.lePrize span{font-size:13px;line-height:1.55;color:var(--ink)}
.lePromise{font-size:11.8px;line-height:1.55;color:var(--dim);
  margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(253,244,227,.1)}

.leActs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.leGo{margin:0;width:auto;padding:14px 22px;font-size:14px}
.leOpen{font:700 12.4px 'Inter',sans-serif;color:var(--dim)}
.leNote{font-size:11.8px;line-height:1.6;color:var(--mute);margin:0;
  padding-top:14px;border-top:1px solid rgba(253,244,227,.1)}

/* The signup form, inside the event block rather than further down the page.
   Reported: pressing Sign up opened something out of sight, so it looked as
   though nothing had happened. The form's own card border is removed here
   because it is already inside a bordered panel, and two nested borders read as
   a mistake. */
.leForm{margin:0}
.leForm .pfBox{background:transparent;border:0;padding:0;clip-path:none;margin:0}
/* The event form renders a plain heading rather than the toggle button the
   other forms use, because the Sign up button above is its opener. An earlier
   version hid the button with CSS, which left a 326px control in the layout and
   kept it reachable by keyboard: invisible but focusable is a trap. */
.pfLead{display:block;margin:0 0 14px}
.pfLead .pfH{display:block;font:800 15px 'Inter',sans-serif;color:var(--ink);
  line-height:1.35;margin-bottom:5px}
.pfLead .pfNote{display:block;font-size:12.6px;line-height:1.6;color:var(--dim)}
/* NOT display:block unconditionally. An earlier version forced the body open,
   which meant the fields were on the page before anybody pressed Sign up: the
   button and the form showed at once. The body follows pfOpen like every other
   form, and only the padding is reset for sitting inside a panel. */
.leForm .pfBody{padding:0}
.leForm .pfBox.pfOpen .pfBody{padding:0}
.leForm .pfDone{background:rgba(200,241,53,.08);border:1px solid rgba(200,241,53,.3);
  padding:18px 18px 16px}
/* Space above the fields only once they are showing, so the shut state adds
   nothing to the panel's height. */
.leForm .pfBox.pfOpen{margin-top:2px}

/* The honest note under the three rounds: the shape is usual, not fixed. */
.cmShape{max-width:640px;margin:14px auto 0;font-size:12.4px;line-height:1.65;
  color:var(--mute);text-align:center}

@media(max-width:560px){
  .leEvent{padding:20px 17px 18px;margin-bottom:24px}
  .leH1{font-size:21px}
  .leWhen{font-size:12.4px}
  .lePrize{grid-template-columns:1fr;gap:2px}
  .lePrize b{font-size:12px}
  .leActs{flex-direction:column;align-items:stretch;gap:10px}
  .leGo{width:100%}
  .leOpen{text-align:center}
}

@media(max-width:620px){
  /* STACKED ON A PHONE, not side by side.

     Reported: the text was squeezed into a thin column beside the buttons.
     Cause: .in is a flex row, so the paragraph and the buttons compete for one
     line. flex-wrap was supposed to break them apart, but a min-width:0 added
     in an earlier attempt removed the floor that forced the wrap, so the text
     shrank instead of moving below.

     Forcing a column removes the competition entirely rather than relying on
     wrap thresholds that change with every wording edit. */
  .cookiebar{padding:14px 15px}
  .cookiebar .in{flex-direction:column;align-items:stretch;gap:12px}
  .cookiebar p{flex:none;min-width:0;font-size:12.6px;line-height:1.6}
  /* Full width and equal, so neither choice is easier to hit than the other.
     A Decline that is harder to reach is not a real choice. */
  .cookiebar .in>div{display:flex;gap:10px}
  .cookiebar .in>div>button{flex:1;width:auto}
}
  .fabjoin{position:fixed;bottom:18px;right:18px;z-index:26;display:none;align-items:center;gap:9px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--tang),var(--mag));color:#3A0E16;font-family:'Unbounded','Inter',sans-serif;font-weight:700;
    font-size:13px;padding:13px 18px;box-shadow:0 12px 30px rgba(0,0,0,.45);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    animation:popIn .45s cubic-bezier(.16,1.3,.3,1) both}
  .fabjoin:hover{filter:brightness(1.07);transform:translateY(-2px)}
  body.present .fabjoin{display:none!important}
  @media(max-width:400px){
    .rdrum{font-size:22px;padding:20px 8px;min-height:86px}
    .pcard{padding:18px 16px}
    .sec{padding:22px 15px}
    .bigfoot{padding:20px 16px 14px}
  }
  .rv{opacity:0;transform:translateY(22px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
  .rv.in{opacity:1;transform:none}
  /* --- tilt + ripple --- */
  .tilt{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
  .rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);
    pointer-events:none;animation:ripple .6s ease-out forwards}
  @keyframes ripple{to{transform:scale(2.6);opacity:0}}
  /* --- scroll cue --- */
  .cues{display:flex;flex-direction:column;align-items:center;margin:22px auto 0;height:40px;justify-content:center}
  .cues i{display:block;width:17px;height:17px;border-right:2.5px solid;border-bottom:2.5px solid;
    transform:rotate(45deg);margin-top:-7px;animation:cueBob 1.7s ease-in-out infinite}
  .cues i:nth-child(1){color:var(--tang);animation-delay:0s}
  .cues i:nth-child(2){color:var(--mag);animation-delay:.18s}
  .cues i:nth-child(3){color:var(--turq);animation-delay:.36s}
  @keyframes cueBob{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.25}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
  .joinbar{display:flex;gap:8px;align-items:center;background:var(--panel);border:2px solid var(--panel2);padding:8px;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .joinbar input{margin:0;border:none;background:transparent;flex:1;min-width:0;text-transform:uppercase;letter-spacing:3px;font-weight:800;font-size:15px;padding:10px 12px}
  .joinbar button{border:none;cursor:pointer;background:var(--tang);color:var(--tangT);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13px;padding:11px 18px;flex-shrink:0;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .herobig{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:clamp(27px,6.6vw,44px);line-height:1.12;text-align:center;letter-spacing:-.5px}
  .herobig .hb2{color:var(--tang)}
  .micro{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
  .micro span{font-size:11.5px;font-weight:700;color:var(--dim);background:var(--panel);border:1.5px solid var(--panel2);padding:6px 11px;
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
  .bd{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;letter-spacing:-.2px;font-size:1.06em;line-height:1}
  .bd i{font-style:normal;color:var(--tang)}
  .actgrid{display:grid;grid-template-columns:1fr;gap:26px;max-width:470px;margin:0 auto;text-align:left}
  @media(min-width:820px){.actgrid{grid-template-columns:1fr 1px 1fr;gap:30px;max-width:900px;margin:0 auto;align-items:start}}
  .actdiv{display:none}
  @media(min-width:820px){.actdiv{display:block;background:linear-gradient(180deg,transparent,var(--panel2) 18%,var(--panel2) 82%,transparent);height:100%;min-height:180px}}
  .actbox{padding:0}
  .minilab{font-size:12.5px;color:var(--dim);font-weight:600;margin-bottom:8px}
  .softin{display:flex;align-items:center;background:#170A22;border:1.5px solid var(--panel2);border-radius:12px;
    overflow:hidden;transition:border-color .3s}
  .softin:focus-within{border-color:var(--tang)}
  .softin input{margin:0;border:none;background:transparent;flex:1;min-width:0;text-transform:uppercase;
    letter-spacing:3px;font-weight:800;font-size:15px;padding:13px 14px;clip-path:none}
  .softin button{border:none;cursor:pointer;background:var(--tang);color:var(--tangT);font-family:'Unbounded','Inter',sans-serif;
    font-weight:700;font-size:12.5px;padding:13px 18px;flex-shrink:0;transition:filter .2s}
  .softin button:hover{filter:brightness(1.08)}
  .quiet{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--panel2);
    border-radius:10px;color:var(--dim);font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;
    padding:9px 14px;cursor:pointer;transition:all .25s}
  .quiet:hover{border-color:var(--turq);color:var(--turq)}
  .bigbtn .barrow{transition:transform .28s cubic-bezier(.2,1.3,.4,1)}
  .bigbtn:hover .barrow{transform:translateX(5px)}
  .heropill{transition:transform .28s,border-color .28s,color .28s}
  .heropill:hover{transform:translateY(-2px);border-color:var(--turq);color:var(--ink)}
  .orsplit{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11px;font-weight:800;letter-spacing:2px}
  .orsplit:before,.orsplit:after{content:"";flex:1;height:1px;background:var(--panel2)}
  @media(min-width:800px){.orsplit{display:none}}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;font-size:10px;
    font-weight:700;letter-spacing:2.5px;margin-bottom:9px}
  .eyebrow s{width:22px;height:2px;display:block;text-decoration:none}
  .sec{position:relative;overflow:hidden;padding:26px 20px;margin-top:44px;transition:box-shadow .4s;
    clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
  .sec-a{background:linear-gradient(155deg,#2E1840 0%,#26143A 100%);box-shadow:inset 0 3px 0 var(--turq)}
  .sec-b{background:#150921;box-shadow:inset 0 3px 0 var(--tang)}
  .sec-c{background:linear-gradient(155deg,#33193C 0%,#2A1434 100%);box-shadow:inset 0 3px 0 var(--lime)}

  .occband{margin-top:22px;padding:14px 0;border-top:1px solid rgba(253,244,227,.08);border-bottom:1px solid rgba(253,244,227,.08);
    overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .occtrack{display:flex;align-items:center;gap:16px;width:max-content;animation:mq 42s linear infinite}
  .occband:hover .occtrack{animation-play-state:paused}
  .occtrack span{font-family:'Unbounded','Inter',sans-serif;font-size:14px;font-weight:700;white-space:nowrap;color:var(--ink)}
  .occtrack span:nth-child(8n+3){color:var(--tang)}
  .occtrack span:nth-child(8n+5){color:var(--turq)}
  .occtrack span:nth-child(8n+7){color:var(--lime)}
  .occtrack b{color:var(--mag);font-size:16px;line-height:1}
  .mqwrap{overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mqtrack{display:flex;gap:12px;width:max-content;animation:mq 30s linear infinite}
  .mqwrap:hover .mqtrack{animation-play-state:paused}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .occ{min-width:152px;max-width:152px;padding:16px 12px 14px;flex-shrink:0;background:#1F0F2C;border-color:#33204A}
  .occ img{width:66px;height:66px;animation:occFloat 6.5s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
  .occ:nth-child(2n) img{animation-delay:-1.4s;animation-duration:7.4s}
  .occ:nth-child(3n) img{animation-delay:-2.7s;animation-duration:8.1s}
  .occ:hover img{transform:scale(1.1) rotate(-4deg)}
  .occ{transition:border-color .3s,background .3s}
  .occ:hover{border-color:var(--tang);background:#26123A}
  @keyframes occFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .occ div{font-weight:800;font-size:12.5px;line-height:1.35;white-space:normal}
  .pband{overflow:hidden;display:grid;grid-template-columns:1fr;background:var(--panel);transition:box-shadow .4s;
    clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
  @media(min-width:660px){.pband{grid-template-columns:1.15fr 1fr}}
  .pband .ph{position:relative;overflow:hidden}
  .pband:hover{box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .pband .ph img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;object-position:center center;
    animation:kburn 30s ease-in-out infinite alternate;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s}
  .pband .ph:hover img{transform:scale(1.045);filter:saturate(1.12) brightness(1.05)}
  .pband .ph::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
    background-size:240% 100%;background-position:130% 0}
  .pband .ph:hover::before{opacity:1;animation:sheen 1.1s ease forwards}
  .pband .ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s;opacity:0;
    background:radial-gradient(120% 90% at 50% 110%,rgba(240,80,155,.28),transparent 60%)}
  .pband .ph:hover::after{opacity:1}
  @keyframes kburn{from{transform:scale(1)}to{transform:scale(1.055)}}
  .pband .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(29,14,39,.18),rgba(29,14,39,.62))}
  .pband .txt{padding:24px 22px;display:flex;flex-direction:column;justify-content:center}

/* The gathering band's copy, broken at its clauses.
   The row height is set by the photo's 3/2 aspect ratio, so the text column was
   shorter and its centred content pooled dead space under the pills. Three
   paragraphs instead of one add height and, more usefully, make it scannable.
   The photo is untouched by design: the fix is in the text.
   Every paragraph shares the same left edge, so nothing reads as ragged. */
.gathClauses{margin-top:11px}
.gathClauses p{color:var(--dim);font-size:14px;font-weight:600;line-height:1.7;
  margin:0 0 10px}
.gathClauses p:last-child{margin-bottom:0}
@media(max-width:900px){
  /* Stacked, the photo sits ABOVE the text, so the short-text-column problem the
     three-paragraph split was solving does not exist here. Left split, each
     sentence wraps to about three lines and the gaps between them read as
     fragments rather than prose. Run them back together into one paragraph. The
     whitespace between the tags in the markup supplies the sentence spacing, so
     no copy changes and the desktop band is untouched. */
  .gathClauses p{display:inline;margin:0}
}
  .acts{max-width:430px;margin:0 auto}
  .heropill{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1.5px solid var(--panel2);
    color:var(--dim);font-size:12px;font-weight:700;padding:7px 13px;
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
  .sechead{margin:0 2px 18px}
  .sechead .eyebrow{display:flex!important;margin-bottom:14px}
  .sechead h2,.sechead h4{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:clamp(17px,2.2vw,21px);line-height:1.3;display:block}
  .sechead p{font-size:13.8px;color:var(--dim);font-weight:400;margin-top:11px;line-height:1.7;max-width:620px}
  .templates-intro{max-width:760px!important;margin-left:auto;margin-right:auto}
  @media(min-width:900px){.templates-intro{max-width:none!important;white-space:nowrap}}
  .tgrid{display:grid;grid-template-columns:1fr;gap:12px}
  @media(min-width:520px){.tgrid{grid-template-columns:1fr 1fr}}
  /* Four featured templates only tile without an orphan at 2 or 4 columns.
     Three is what produced the 3 + 1. */
  @media(min-width:860px){.tgrid{grid-template-columns:1fr 1fr}}
  @media(min-width:520px){.tgrid>.buildcard{grid-column:span 2}}
  .tcard{background:var(--panel);border:1.5px solid var(--panel2);padding:14px 15px;box-sizing:border-box;min-width:0;overflow:hidden;display:flex;gap:13px;align-items:flex-start;
    transition:border-color .2s,transform .2s,box-shadow .2s}
  .tcard{position:relative}
  .tcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.07),transparent 62%)}
  .tcard:hover::before{opacity:1}
  .tcard:hover{border-color:rgba(43,217,198,.55);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.34);background:#31193E}
  .tcard .tchip{transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .tcard:hover .tchip{transform:rotate(-7deg) scale(1.07)}
  .tacts button svg{transition:transform .25s}
  .tacts button:hover svg{transform:scale(1.12)}
  .tchip{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .tname{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13px;line-height:1.3}
  .tsub2{font-size:12.5px;color:var(--dim);font-weight:500;margin-top:4px}
  .tmini{display:flex;gap:6px;flex-shrink:0}
  .tmini button{width:34px;height:34px;border-radius:50%;border:1px solid var(--panel2);background:transparent;
    color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s}
  .tmini button:hover{border-color:var(--turq);color:var(--turq);transform:translateY(-2px)}
  .tgo{color:var(--dim);flex-shrink:0;transition:transform .28s,color .28s}
  .tcard:hover .tgo{transform:translateX(4px);color:var(--turq)}
  .pfhead{display:flex;align-items:center;gap:15px}
  .pfav{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--tang),var(--mag));
    color:#3A0E16;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:24px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .pfrow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--panel2);flex-wrap:wrap}
  .pfrow:last-child{border-bottom:none}
  .pfrow .k{font-size:12.5px;color:var(--dim);font-weight:600;min-width:96px}
  .pfrow .v{flex:1;min-width:150px;font-size:14px;font-weight:500;word-break:break-word}
  .badge{font-size:10.5px;font-weight:800;letter-spacing:1px;padding:5px 9px;border-radius:7px}
  .togg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--panel2)}
  .togg:last-of-type{border-bottom:none}
  .sw{width:48px;height:27px;border-radius:99px;border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background .25s}
  .sw i{position:absolute;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .25s cubic-bezier(.2,1.3,.4,1)}
  .sgrid{display:grid;grid-template-columns:1fr;gap:9px}
  @media(min-width:520px){.sgrid{grid-template-columns:1fr 1fr}}
  .sbtn{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:12px;border:1px solid rgba(253,244,227,.1);
    background:rgba(0,0,0,.2);color:var(--ink);font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;
    transition:all .22s;text-align:left}
  .sbtn:hover{border-color:var(--turq);color:var(--turq);transform:translateY(-2px)}
  .invitebox{background:rgba(0,0,0,.25);border:1px dashed rgba(43,217,198,.4);border-radius:12px;padding:13px 15px;
    font-size:13.5px;line-height:1.65;color:var(--dim);font-weight:500}
  .danger{border:1px solid rgba(240,80,155,.3);border-radius:12px;padding:15px;background:rgba(240,80,155,.06)}
  .pgridw{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
  /* Two columns of panels, each stacking independently. The old single grid
     put one tall panel beside one short one, so the right side ran out of
     content and left a long empty strip on desktop. */
  .pband{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
  .pcol{display:grid;gap:14px;align-content:start;min-width:0}
  @media(min-width:900px){.pband{grid-template-columns:1fr 1fr}}
  .psec{padding:20px;border:1px solid rgba(253,244,227,.09);
    clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px))}
  .psec.full{grid-column:1/-1}
  .ps-hero{background:linear-gradient(150deg,rgba(255,122,41,.16),rgba(240,80,155,.1));border-color:rgba(255,122,41,.32)}
  .ps-you{background:linear-gradient(150deg,rgba(43,217,198,.12),rgba(43,217,198,.04));border-color:rgba(43,217,198,.28)}
  .ps-quiz{background:linear-gradient(150deg,rgba(240,80,155,.12),rgba(240,80,155,.04));border-color:rgba(240,80,155,.28)}
  .ps-inv{background:linear-gradient(150deg,rgba(255,122,41,.13),rgba(200,241,53,.06));border-color:rgba(255,122,41,.3)}
  .ps-snd{background:linear-gradient(150deg,rgba(167,139,250,.13),rgba(43,217,198,.05));border-color:rgba(167,139,250,.3)}
  .ps-sec{background:linear-gradient(150deg,rgba(200,241,53,.11),rgba(200,241,53,.03));border-color:rgba(200,241,53,.28)}
  .ps-acc{background:rgba(0,0,0,.24);border-color:var(--panel2)}
  .pshead{display:flex;align-items:center;gap:9px;margin-bottom:13px}
  .pshead span{font-family:'Unbounded','Inter',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.3px}
  .pshead i{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .pavatar{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--tang),var(--mag));
    color:#3A0E16;display:flex;align-items:center;justify-content:center;font-family:'Unbounded','Inter',sans-serif;
    font-size:26px;font-weight:800;flex-shrink:0}
  .qrow{background:rgba(0,0,0,.2);border:1px solid rgba(253,244,227,.08);border-radius:12px;padding:13px 14px;margin-bottom:9px}
  .qacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .qacts button{border:1px solid var(--panel2);background:transparent;color:var(--ink);cursor:pointer;border-radius:9px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:12px;padding:7px 12px;display:flex;align-items:center;gap:5px;transition:all .2s}
  .qacts button:hover{border-color:var(--turq);color:var(--turq)}
  .qacts button.danger:hover{border-color:var(--mag);color:var(--mag)}
  .refbox{background:linear-gradient(135deg,rgba(255,122,41,.14),rgba(240,80,155,.1));
    border:1px solid rgba(255,122,41,.32);border-radius:14px;padding:16px}
  .reflink{display:flex;align-items:center;gap:10px;background:#170A22;border:1px solid var(--panel2);
    border-radius:10px;padding:11px 13px;margin:12px 0;font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px}
  .setrow{display:flex;align-items:center;gap:13px;padding:15px 0;border-top:1px solid var(--panel2)}
  .setrow:first-of-type{border-top:none;padding-top:4px}
  .setrow .si{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
  .setrow .st{flex:1;min-width:0}
  .setrow .st b{display:block;font-size:13.8px;font-weight:700}
  .setrow .st span{display:block;color:var(--dim);font-size:12.2px;font-weight:500;margin-top:3px;line-height:1.5}
  .switch{width:50px;height:28px;border-radius:99px;background:var(--panel2);border:1px solid rgba(253,244,227,.12);
    position:relative;cursor:pointer;flex-shrink:0;transition:background .22s,border-color .22s;padding:0}
  .switch.on{background:var(--lime);border-color:var(--lime)}
  .switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);
    display:block;transition:transform .22s cubic-bezier(.2,1.3,.4,1)}
  .switch.on i{transform:translateX(22px);background:var(--limeT)}
  .switch:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
  .qtoolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
  .qsearch{display:flex;align-items:center;gap:9px;background:#170A22;border:1.5px solid var(--panel2);
    border-radius:12px;padding:0 13px;flex:1;min-width:190px;transition:border-color .2s}
  .qsearch:focus-within{border-color:var(--tang)}
  .qsearch input{border:none;background:transparent;margin:0;padding:12px 0;flex:1;min-width:0;font-size:14px}
  .qgrid{display:grid;grid-template-columns:1fr;gap:12px}
  @media(min-width:760px){.qgrid{grid-template-columns:1fr 1fr}}
  .qcard{background:var(--panel);border:1px solid rgba(253,244,227,.09);padding:17px;display:flex;flex-direction:column;
    transition:transform .22s,border-color .22s,box-shadow .22s;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
  .qcard:hover{transform:translateY(-3px);border-color:var(--turq);box-shadow:0 12px 26px rgba(0,0,0,.34)}
  .qcard h5{font-family:'Unbounded','Inter',sans-serif;font-size:14px;font-weight:700;line-height:1.35;margin-bottom:8px}
  .qmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
  .qmeta span{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--dim);background:rgba(0,0,0,.24);
    border:1px solid var(--panel2);border-radius:99px;padding:5px 10px}
  .qstat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
  .qstat div{flex:1;min-width:88px;background:rgba(0,0,0,.2);border:1px solid var(--panel2);border-radius:12px;padding:12px 13px}
  .qstat b{font-family:'Unbounded','Inter',sans-serif;font-size:19px;display:block;color:var(--lime)}
  .qstat span{font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.6px}
  .toggrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}
  .togbtn{border:1px solid var(--panel2);background:transparent;color:var(--dim);cursor:pointer;border-radius:20px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:12px;padding:7px 15px;transition:all .2s;flex-shrink:0}
  .togbtn.on{border-color:var(--lime);color:var(--limeT);background:var(--lime)}
  .vbadge{font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:5px 9px;border-radius:7px;flex-shrink:0}
  body.present .amenu,body.present .ascrim,body.present .beta,body.present .authnav,body.present .profbtn,body.present .sndbtn,body.present .musbtn,
  body.present .homebtn,body.present .backbtn{display:none!important}
  /* ---- game stage ---- */
  .gmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
  .gpill{display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.22);border:1px solid var(--panel2);
    border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--dim)}
  .gsecs{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
  .tline{height:5px;background:rgba(0,0,0,.3);border-radius:99px;overflow:hidden;margin-bottom:20px}
  .tline i{display:block;height:100%;width:100%;border-radius:99px;
    background:linear-gradient(90deg,var(--lime),var(--turq) 45%,var(--tang) 80%,var(--mag))}
  .qstage{text-align:center;margin-bottom:20px}
  .qstage .qtext{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,27px);line-height:1.4}
  .ansrow{display:grid;grid-template-columns:1fr;gap:10px}
  @media(min-width:720px){.ansrow.two{grid-template-columns:1fr 1fr}}
  /* No hover treatment on answer choices. Touch browsers can retain a sticky :hover
     between questions, making an untouched option look pre-selected. Selection is
     communicated only by .pick/.right states after an actual answer. */
  .ans{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;padding:15px 17px;
    background:var(--panel);border:1.5px solid var(--panel2);border-left:5px solid var(--acc);border-radius:14px;
    font-family:'Inter',sans-serif;color:var(--ink);font-size:15px;font-weight:600;
    transition:transform .18s,border-color .22s,background .22s,opacity .3s}
  .ans:disabled{cursor:default}
  .ans .ltr{width:34px;height:34px;border-radius:10px;background:var(--acc);color:var(--accT);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:14px}
  .ans.pick{border-color:var(--ink);background:#38204A;box-shadow:0 0 0 2px rgba(253,244,227,.25) inset}
  .ans.right{border-color:var(--lime);background:rgba(200,241,53,.12)}
  .ans.dim{opacity:.32}
  .ans .pct{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:14px;flex-shrink:0}
  .hostbar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:25;display:flex;gap:7px;
    background:rgba(24,11,34,.94);border:1px solid var(--panel2);border-radius:16px;padding:8px;
    box-shadow:0 12px 34px rgba(0,0,0,.5)}
  .hostbar button{border:none;background:transparent;color:var(--dim);cursor:pointer;border-radius:11px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;padding:9px 13px;display:flex;align-items:center;gap:6px;transition:all .2s}
  .hostbar button.go{background:var(--tang);color:var(--tangT)}
  /* ---- brief ---- */
  .brief li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--panel2);list-style:none}
  .brief li:last-child{border-bottom:none}
  .brief li i{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .brief li b{font-size:14.5px;font-weight:700;display:block}
  .brief li span{font-size:13px;color:var(--dim);font-weight:500;display:block;margin-top:3px;line-height:1.55}
  /* ---- raffle ---- */
  textarea{width:100%;box-sizing:border-box;padding:14px 15px;border:1.5px solid var(--panel2);background:#170A22;
    color:var(--ink);font-size:15px;font-family:'Inter',sans-serif;outline:none;margin-bottom:10px;border-radius:12px;
    min-height:120px;resize:vertical;line-height:1.6}
  textarea:focus{border-color:var(--tang)}
  .wheelwrap{position:relative;width:min(320px,86vw);height:min(320px,86vw);margin:10px auto 20px;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}
  .wheelglow{position:absolute;inset:-20px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(240,80,155,.28),rgba(255,122,41,.18) 42%,transparent 70%);
    opacity:0;transition:opacity .5s}
  .wheelwrap.spin .wheelglow{opacity:1;animation:bigPulse 1.1s ease-in-out infinite}
  .orbit{position:absolute;inset:0;border-radius:50%;transition:transform 4.4s cubic-bezier(.16,.84,.16,1);
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.06)}
  .ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;border:6px solid transparent;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),inset 0 0 22px rgba(0,0,0,.45),
      0 0 0 5px rgba(59,33,80,.9),0 0 0 7px rgba(255,122,41,.35)}
  .wheelgloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
    background:radial-gradient(120% 80% at 50% -6%,rgba(255,255,255,.22),transparent 46%)}
  .orbit .chip{position:absolute;top:50%;left:50%;transform-origin:50% 50%;z-index:1;
    font-size:12px;font-weight:800;white-space:nowrap;color:#fff;letter-spacing:.2px;
    background:rgba(16,7,26,.66);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;
    box-shadow:0 2px 6px rgba(0,0,0,.4);text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .orbit .chip.hit{color:var(--limeT);background:var(--lime);border-color:#fff;
    box-shadow:0 0 26px rgba(200,241,53,.75),0 0 0 2px rgba(255,255,255,.5)}
  .hubcap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56%;height:56%;border-radius:50%;
    background:radial-gradient(circle at 38% 30%,#4b2d68 0%,#2a1540 56%,#160a21 100%);
    border:2px solid rgba(255,122,41,.4);z-index:3;
    display:grid;place-items:center;text-align:center;padding:14px;
    box-shadow:inset 0 2px 20px rgba(0,0,0,.65),0 0 0 6px rgba(22,10,33,.92),0 0 30px rgba(240,80,155,.28)}
  .hubtxt{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:clamp(15px,4vw,21px);line-height:1.25;
    word-break:break-word;color:var(--ink)}
  .hublbl{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--tang);display:block;margin-bottom:7px}
  .needle{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:5;width:26px;height:30px;
    pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,122,41,.5))}
  .needle::before{content:"";position:absolute;left:0;top:7px;width:0;height:0;
    border-left:13px solid transparent;border-right:13px solid transparent;border-top:23px solid var(--tang)}
  .needle::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
    background:radial-gradient(circle at 40% 35%,#ffd3a8,var(--tang))}
  .rdrum{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:clamp(24px,5vw,40px);text-align:center;
    padding:26px 10px;color:var(--tang);min-height:104px;display:flex;align-items:center;justify-content:center;word-break:break-word}
  .rwin{display:flex;align-items:center;gap:13px;padding:15px 17px;margin-bottom:10px;border-radius:14px;
    background:linear-gradient(120deg,rgba(255,122,41,.2),rgba(200,241,53,.13));border:1px solid var(--lime);
    animation:riseUp .8s cubic-bezier(.16,1.3,.3,1) both}
  .rwin b{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:16px}
  /* ---- pricing ---- */
  .pgrid{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:700px){.pgrid{grid-template-columns:1fr 1fr}}
  @media(min-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}}
  .pcard{position:relative;background:var(--panel);border:1px solid rgba(253,244,227,.1);border-radius:18px;padding:22px 20px;
    display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s}
  .pcard:hover{transform:translateY(-4px);border-color:var(--turq);box-shadow:0 16px 34px rgba(0,0,0,.36)}
  .pcard.hot{border-color:var(--lime);background:linear-gradient(160deg,rgba(200,241,53,.09),rgba(43,217,198,.06))}
  .ptag{position:absolute;top:-11px;left:20px;background:var(--lime);color:var(--limeT);font-family:'Unbounded','Inter',sans-serif;
    font-weight:700;font-size:9.5px;letter-spacing:1.5px;padding:5px 11px;border-radius:7px}
  .pname{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:16px}
  .pprice{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:32px;margin:14px 0 0;line-height:1}
  .pprice small{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--dim)}
  .pfeat{list-style:none;margin:14px 0 18px;flex:1}
  .pfeat li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--dim);font-weight:400;
    line-height:1.5;padding:5px 0}
  .pfeat li span{color:var(--lime);flex-shrink:0;margin-top:1px}
  .socrow{display:flex;gap:clamp(10px,4vw,18px);flex-wrap:nowrap;align-items:center;margin-top:4px}
  .socrow a{border:none;background:none;padding:0;color:var(--dim);cursor:pointer;line-height:0;
    display:inline-flex;transition:color .22s,transform .22s}
  .socrow a svg{width:20px;height:20px;display:block}
  .socrow a:hover{color:var(--turq);transform:translateY(-2px)}
  #sprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;pointer-events:none;
    background:linear-gradient(90deg,var(--tang),var(--mag) 45%,var(--turq) 75%,var(--lime))}
  .sec::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
    background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),rgba(255,255,255,.05),transparent 65%)}
  .sec:hover::after{opacity:1}
  .sec.in > *{animation:none}
  .difwrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .dchip{display:flex;align-items:center;gap:11px;padding:11px 16px 11px 11px;border-radius:999px;
    background:rgba(0,0,0,.24);border:1px solid rgba(253,244,227,.09);transition:transform .26s,border-color .26s,background .26s}
  .dchip:hover{transform:translateY(-3px);border-color:var(--dc);background:rgba(0,0,0,.36)}
  .dchip i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    background:var(--dc);color:var(--dct);transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .dchip:hover i{transform:rotate(-10deg) scale(1.08)}
  .dchip b{font-family:'Unbounded','Inter',sans-serif;font-size:12.6px;font-weight:700;line-height:1.25;min-width:0;overflow-wrap:anywhere}
  @media(max-width:1080px){.difwrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:640px){
    .difwrap{grid-template-columns:1fr;gap:8px}
    .dchip{padding:10px 13px 10px 10px;gap:9px}
    .dchip i{width:29px;height:29px}
    .dchip i svg{width:17px;height:17px}
    .dchip b{font-size:11.5px}
  }
  .difgrid{display:grid;grid-template-columns:1fr;gap:11px}
  @media(min-width:640px){.difgrid{grid-template-columns:1fr 1fr}}
  @media(min-width:960px){.difgrid{grid-template-columns:repeat(3,1fr)}}
  .dif{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;
    background:rgba(0,0,0,.22);border:1px solid rgba(253,244,227,.08);transition:transform .28s,border-color .28s,background .28s}
  .dif:hover{transform:translateY(-3px);border-color:var(--dc);background:rgba(0,0,0,.34)}
  .dif i{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:var(--dc);color:var(--dct);transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .dif:hover i{transform:rotate(-8deg) scale(1.08)}
  .dif b{font-family:'Unbounded','Inter',sans-serif;font-size:12.4px;font-weight:700;display:block;line-height:1.3}
  .dif span{font-size:12.2px;color:var(--dim);font-weight:500;display:block;margin-top:3px;line-height:1.45}
  .sechead h2,.sechead h4{position:relative;padding-bottom:10px}
  .sechead h2::after,.sechead h4::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;opacity:.35;
    transition:width 1s cubic-bezier(.16,1,.3,1)}
  .rv.in .sechead h2::after,.rv.in .sechead h4::after,.sec.in .sechead h2::after,.sec.in .sechead h4::after{width:52px}
  .bigbtn{animation:idleGlow 7s ease-in-out infinite}
  @keyframes idleGlow{0%,88%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}94%{box-shadow:0 0 26px rgba(255,255,255,.16)}}
  .socrow a{display:grid;place-items:center}
  .socrow a svg{display:block}
  .buildcard{position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%;padding:16px;
    display:flex;gap:14px;align-items:center;font-family:'Inter',sans-serif;color:#3A0E16;
    background:linear-gradient(135deg,var(--mag),var(--tang));border:none;
    transition:transform .25s,box-shadow .25s,filter .25s}
  .buildcard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.38);filter:brightness(1.06)}
  .buildcard .bchip{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.24);color:#FDF4E3;transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .buildcard:hover .bchip{transform:rotate(-8deg) scale(1.08)}
  .buildcard .btl{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13.5px;display:block}
  .buildcard .bsb{font-size:12.5px;font-weight:600;opacity:.82;display:block;margin-top:3px}
  .errbox{display:flex;align-items:flex-start;gap:10px;background:rgba(240,80,155,.11);border:1px solid rgba(240,80,155,.45);
    border-radius:12px;padding:12px 13px;margin-bottom:12px;font-size:13px;font-weight:500;line-height:1.55;color:var(--ink);
    animation:popIn .3s ease both}
  .errbox b{display:block;font-weight:700;font-size:13px;margin-bottom:2px}
  .errbox i{color:var(--mag);flex-shrink:0;margin-top:1px}
  /* The one message in this box that is not a fault. Somebody arriving at the
     sign-up screen without a date of birth has done nothing wrong, and a red
     box under the words "Couldn't create your account" told them they had. */
  .errbox.errboxNeeds{background:rgba(200,241,53,.10);border-color:rgba(200,241,53,.45)}
  .errbox.errboxNeeds i{color:var(--lime)}
  .bwrap{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
  @media(min-width:920px){.bwrap{grid-template-columns:272px 1fr}}
  .brail{background:var(--panel);border:1px solid rgba(253,244,227,.08);padding:14px;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
  @media(min-width:920px){.brail{position:sticky;top:74px;max-height:calc(100vh - 110px);overflow-y:auto}}
  .brail .rl{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--dim);text-transform:uppercase;margin-bottom:11px;display:block}
  .slides{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
  @media(min-width:920px){.slides{display:block;overflow:visible;padding:0}}
  .slide{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;min-width:190px;padding:11px;
    background:rgba(0,0,0,.2);border:1px solid var(--panel2);border-radius:12px;margin-bottom:8px;cursor:pointer;
    font-family:'Inter',sans-serif;color:var(--ink);transition:border-color .2s,background .2s,transform .2s}
  .slide:hover{border-color:var(--turq);transform:translateY(-2px)}
  .slide.cur{border-color:var(--tang);background:rgba(255,122,41,.1)}
  .slide .num{width:24px;height:24px;border-radius:7px;background:var(--panel2);color:var(--dim);
    font-family:'Unbounded','Inter',sans-serif;font-size:10.5px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
  .slide.cur .num{background:var(--tang);color:var(--tangT)}
  .slide .st{font-size:12.3px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .slide .sb{font-size:9.5px;color:var(--dim);font-weight:800;letter-spacing:1.1px;text-transform:uppercase;margin-top:4px;display:block}
  .slide img{width:32px;height:24px;object-fit:cover;border-radius:5px;flex-shrink:0}
  .slidenew{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:150px;padding:12px;
    background:transparent;border:1px dashed var(--panel2);border-radius:12px;cursor:pointer;color:var(--dim);
    font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;transition:all .2s}
  .slidenew:hover{border-color:var(--lime);color:var(--lime)}
  .bhead{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
  .qstrip{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:rgba(0,0,0,.2);border:1px solid var(--panel2);
    border-radius:12px;padding:11px 12px;margin-bottom:14px}
  .qstrip .qn{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:800;
    background:var(--panel2);color:var(--dim);cursor:pointer;transition:all .2s;font-family:'Unbounded','Inter',sans-serif}
  .qstrip .qn:hover{color:var(--ink)}
  .qstrip .qn.cur{background:var(--tang);color:var(--tangT)}
  .qstrip .qn.new{background:transparent;border:1px dashed var(--panel2);color:var(--dim)}
  .seg{background:var(--panel);border:1px solid rgba(253,244,227,.09);padding:20px;margin-bottom:14px;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .seghead{display:flex;align-items:center;gap:10px;margin-bottom:15px}
  .seghead i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
  .seghead b{font-family:'Unbounded','Inter',sans-serif;font-size:13px;font-weight:700}
  .seghead span{font-size:12px;color:var(--dim);font-weight:500;display:block;margin-top:2px}
  .subblk{padding:14px 0;border-top:1px dashed var(--panel2)}
  .subblk:first-of-type{padding-top:0;border-top:none}
  .subblk .sl{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block}
  .hatbig{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:34px;line-height:1;color:var(--lime)}
  .pgrid3{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:640px){.pgrid3{grid-template-columns:repeat(3,1fr)}}
  .pgrid2{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
  @media(min-width:640px){.pgrid2{grid-template-columns:1fr 1fr}}
  .pcard2{background:rgba(0,0,0,.2);border:1px dashed var(--panel2);border-radius:18px;padding:20px;
    display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
  .pcard2:hover{border-color:var(--turq);transform:translateY(-3px)}
  .incl{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  .incl span{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.22);border:1px solid var(--panel2);
    border-radius:999px;padding:8px 13px;font-size:12.3px;font-weight:600;color:var(--dim)}
  .incl span svg{color:var(--lime)}
  .rtabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
  .rtabs button{border:1px solid var(--panel2);background:transparent;color:var(--dim);cursor:pointer;border-radius:11px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;padding:9px 15px;transition:all .2s}
  .rtabs button.on{background:var(--tang);color:var(--tangT);border-color:var(--tang)}
  .nametag{display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.24);border:1px solid var(--panel2);
    border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;margin:0 6px 6px 0}
  .nametag button{border:none;background:transparent;color:var(--dim);cursor:pointer;font-size:15px;line-height:1;padding:0}
  .nametag button:hover{color:var(--mag)}
  .cere{display:flex;flex-direction:column;gap:12px;margin:6px 0 18px}
  .wcard{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:16px 18px;
    background:rgba(0,0,0,.24);border:1px solid rgba(253,244,227,.1);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
  .wcard.in3{animation:slideL .75s cubic-bezier(.16,1.25,.3,1) both}
  .wcard.in2{animation:slideR .75s cubic-bezier(.16,1.25,.3,1) both}
  .wcard.in1{animation:riseUp .95s cubic-bezier(.16,1.3,.3,1) both}
  @keyframes slideL{0%{opacity:0;transform:translateX(-46px)}100%{opacity:1;transform:none}}
  @keyframes slideR{0%{opacity:0;transform:translateX(46px)}100%{opacity:1;transform:none}}
  @keyframes riseUp{0%{opacity:0;transform:translateY(40px) scale(.9)}60%{opacity:1;transform:translateY(-6px) scale(1.03)}100%{opacity:1;transform:none}}
  .wrank{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:30px;line-height:1;width:52px;text-align:center;flex-shrink:0;opacity:.85}
  .wav{font-size:30px;flex-shrink:0}
  .wname{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:14.5px;line-height:1.3}
  .wsc{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:17px;flex-shrink:0}
  .wcard.first{background:linear-gradient(120deg,rgba(255,122,41,.24),rgba(200,241,53,.16));
    border-color:var(--lime);padding:22px 18px;box-shadow:0 0 46px rgba(200,241,53,.14)}
  .wcard.first .wrank{font-size:38px;color:var(--lime);opacity:1}
  .wcard.first .wname{font-size:17px}
  .wcard.first .wsc{font-size:21px;color:var(--lime)}
  .wcard.first::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);
    background-size:250% 100%;background-position:130% 0;animation:sheen 1.5s ease .35s both}
  .wcrown{position:absolute;top:-2px;right:14px;color:var(--lime);opacity:.9;animation:crownBob 2.6s ease-in-out infinite}
  @keyframes crownBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
  .waiting{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--dim);
    font-size:13px;font-weight:600;padding:18px 0;letter-spacing:1px}
  .waiting i{width:7px;height:7px;background:var(--dim);border-radius:50%;animation:dotp 1.3s ease-in-out infinite}
  .waiting i:nth-child(2){animation-delay:.18s} .waiting i:nth-child(3){animation-delay:.36s}
  @keyframes dotp{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
  .restrow{display:flex;align-items:center;gap:11px;padding:9px 12px;background:rgba(0,0,0,.16);
    border-radius:10px;margin-bottom:6px;font-size:13px}
  .exitfs{position:fixed;top:14px;right:14px;z-index:30;display:none;align-items:center;gap:7px;
    border:1.5px solid var(--panel2);background:rgba(28,13,38,.85);color:var(--dim);cursor:pointer;
    font-family:'Inter',sans-serif;font-weight:700;font-size:12px;padding:9px 14px;opacity:.35;transition:opacity .25s;
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
  .exitfs:hover{opacity:1;color:var(--ink)}
  body.present .exitfs{display:flex}
  body.present .wrap{padding-top:34px}
  body.present .qtext{font-size:clamp(24px,3.6vw,42px)!important}
  body.present .ans{padding:22px!important;font-size:clamp(16px,1.9vw,21px)!important}
  body.present .ans .ltr{width:42px;height:42px;font-size:17px}
  body.present .codetile{width:64px!important;height:78px!important;font-size:36px!important}
  .sheetwrap{position:fixed;inset:0;z-index:40;display:none;align-items:flex-end;justify-content:center;
    background:rgba(12,5,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
  @media(min-width:600px){.sheetwrap{align-items:center}}
  .sheetwrap.on{display:flex;animation:fadeIn .22s ease both}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .sheet{background:var(--panel);width:100%;max-width:400px;padding:22px 20px 18px;
    animation:sheetIn .34s cubic-bezier(.16,1.2,.3,1) both;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  @keyframes sheetIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
  .sopt{display:flex;align-items:center;gap:13px;width:100%;background:rgba(0,0,0,.2);
    border:1px solid rgba(253,244,227,.09);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;
    text-align:left;font-family:'Inter',sans-serif;color:var(--ink);transition:all .22s}
  .sopt:hover{border-color:var(--turq);background:rgba(0,0,0,.32);transform:translateY(-2px)}
  .sopt .si{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .sopt b{font-family:'Unbounded','Inter',sans-serif;font-size:13px;font-weight:700;display:block}
  .sopt span{font-size:12px;color:var(--dim);font-weight:600;display:block;margin-top:3px}
  .aboutband{background:rgba(0,0,0,.22);border:1px solid rgba(253,244,227,.08);padding:24px 22px;margin-top:40px;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .aboutband p{color:var(--dim);font-size:14px;font-weight:400;line-height:1.8;margin-top:10px}
  .aboutband .yor{color:var(--tang);font-weight:700}
  .newcard{position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%;padding:16px;
    display:flex;gap:14px;align-items:center;font-family:'Inter',sans-serif;color:var(--ink);
    background:linear-gradient(135deg,rgba(43,217,198,.13),rgba(200,241,53,.09));
    border:1px solid rgba(200,241,53,.32);transition:border-color .25s,transform .25s,box-shadow .25s}
  .newcard:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.34)}
  .newcard .nchip{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--turq),var(--lime));color:#06332A;transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .newcard:hover .nchip{transform:rotate(-7deg) scale(1.07)}
  .newcard .ngo{color:var(--lime);flex-shrink:0;transition:transform .28s}
  .newcard:hover .ngo{transform:translateX(4px)}
  .occ img{width:60px;height:60px}
  .occ{min-width:128px;padding:14px 12px 12px}
  .whyic{width:40px;height:40px;border-radius:12px;margin:0 0 12px;display:flex;align-items:center;justify-content:center}
  .micro span{display:inline-flex;align-items:center;gap:5px}
  .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(min-width:640px){.catgrid{grid-template-columns:repeat(3,1fr)}}
  .catcard{padding:13px 12px;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s}
  .catcard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
  .catcard .cta{display:flex;gap:6px;margin-top:2px}
  .catcard .cta button{border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:11px;padding:6px 11px;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
  .occroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
  .occroll::-webkit-scrollbar{display:none}
  .occ{min-width:150px;background:var(--panel);border:2px solid var(--panel2);padding:16px 14px 14px;text-align:center;flex-shrink:0;transition:transform .15s;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .occ:hover{transform:translateY(-4px)}
  .occ img{width:74px;height:74px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
  .occ div{font-weight:800;font-size:13px}
  .why{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
  @media(min-width:640px){.why{grid-template-columns:repeat(3,1fr)}}
  .why > div{position:relative;overflow:hidden;transition:transform .35s,border-color .35s,background .35s;
    background:rgba(0,0,0,.2);border:1px solid rgba(253,244,227,.09);padding:20px 18px;text-align:left;text-align:center;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .why > div:hover{transform:translateY(-5px);border-color:rgba(253,244,227,.2);background:rgba(0,0,0,.3)}
  .why .whyic{transition:transform .45s cubic-bezier(.2,1.35,.4,1)}
  .why > div:hover .whyic{transform:rotate(-9deg) scale(1.1)}
  .why b{font-family:'Unbounded','Inter',sans-serif;font-size:13px;display:block;margin:0 0 7px;line-height:1.4}
  .why p{font-size:13px;color:var(--dim);font-weight:500;line-height:1.7}
  .bigfoot{margin-top:30px;background:#120720;border:1px solid rgba(253,244,227,.06);padding:26px 22px 20px;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .bigfoot .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(min-width:560px){.bigfoot .cols{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:900px){.bigfoot .cols{grid-template-columns:repeat(5,1fr)}}
  .bigfoot h5{font-family:'Unbounded','Inter',sans-serif;font-size:11px;letter-spacing:1.5px;color:var(--dim);margin-bottom:9px;text-transform:uppercase}
  .bigfoot a{display:block;color:var(--ink);font-size:13px;font-weight:600;margin-bottom:7px;cursor:pointer;text-decoration:none}
  .bigfoot a:hover{color:var(--turq)}
  .bigfoot .base{text-align:center;color:var(--dim);font-size:12px;font-weight:600;margin-top:20px;padding-top:16px;border-top:1px solid rgba(253,244,227,.08)}
  .bigbtn{display:flex;align-items:center;gap:14px;width:100%;border:none;cursor:pointer;padding:17px 18px;
    text-align:left;font-family:'Inter',sans-serif;transition:transform .15s,box-shadow .15s,filter .15s}
  .bigbtn{position:relative;overflow:hidden}
  .bigbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);background-size:250% 100%;background-position:110% 0;pointer-events:none}
  .bigbtn:hover::after{animation:sheen .8s ease forwards}
  .bigbtn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.4);filter:brightness(1.05)}
  .bigbtn:active{transform:scale(.98)}
  .bicon{font-size:23px;flex-shrink:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
    background:rgba(0,0,0,.17);transition:transform .4s cubic-bezier(.2,1.35,.4,1)}
  .bigbtn:hover .bicon{transform:rotate(-7deg) scale(1.06)}
  .btxt{flex:1;min-width:0}
  .bt{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:15.5px;display:block}
  .bs{font-size:12.5px;font-weight:500;opacity:.8;display:block;margin-top:3px}
  .barrow{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:18px;flex-shrink:0;opacity:.8}
  .frow{display:flex;align-items:center;gap:12px;padding:12px 0;transition:transform .15s}
  .frow:hover{transform:translateX(4px)}
  .heroimg{filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));animation:floaty 7s ease-in-out infinite;pointer-events:none;user-select:none}
  .heroimg2{filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:floatySlow 8s ease-in-out infinite;pointer-events:none;user-select:none}
  .backbtn{position:fixed;top:14px;left:14px;z-index:35;width:46px;height:46px;border:2px solid var(--panel2);
    background:var(--panel);color:var(--ink);cursor:pointer;display:none;align-items:center;justify-content:center;
    transition:transform .15s,border-color .2s;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .backbtn:hover{transform:translateX(-2px);border-color:var(--turq)}
  @media(max-width:420px){
    .backbtn,.homebtn,.sndbtn,.musbtn{width:40px;height:40px}
  }
  @media(max-width:760px){.beta{display:none}}
  .homebtn{position:fixed;top:14px;left:70px;z-index:35;width:46px;height:46px;border:2px solid var(--panel2);
    background:var(--panel);color:var(--ink);font-size:19px;cursor:pointer;display:none;align-items:center;justify-content:center;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .homebtn:hover{transform:translateY(-2px)}
  .codebtn{border:none;cursor:pointer;background:transparent;display:flex;justify-content:center;gap:7px;margin:12px auto 6px;transition:transform .12s}
  .codebtn:active{transform:scale(.96)}
  .qrbox{background:#fff;padding:12px;display:inline-block;margin-top:12px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .qrbox img{display:block;width:180px;height:180px;image-rendering:pixelated}
  .femoji{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
  .stat{background:var(--panel);border:2px solid var(--panel2);padding:9px 14px;text-align:center;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .stat b{font-family:'Unbounded','Inter',sans-serif;font-size:14px;color:var(--lime);display:block}
  .stat span{font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.5px}
  .beta{position:fixed;top:22px;left:14px;transition:left .2s;z-index:10;background:var(--lime);color:var(--limeT);
    font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;padding:7px 12px;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .flinks{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:13px;color:var(--dim);font-weight:600}
  .flinks a{color:var(--dim);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--panel2)}
  .flinks a:hover{color:var(--turq);border-color:var(--turq)}
  .legal{font-size:14.5px;line-height:1.8;color:var(--ink);font-weight:400}
  .legal h2,.legal h3{font-family:'Unbounded','Inter',sans-serif;font-size:14px;font-weight:700;margin:20px 0 8px;color:var(--tang)}
  .legal p{margin-bottom:10px}
  .legal .upd{color:var(--dim);font-size:12.5px;margin-bottom:14px}
  .confetti{position:fixed;top:-16px;z-index:6;pointer-events:none;animation:fall linear forwards}
  /* ---- podium: three-tier stage ---- */
  .stage{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:6px auto 18px;max-width:600px}
  .tier{display:flex;flex-direction:column;align-items:center;flex:1;max-width:150px}
  .tier .tav{font-size:34px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
  .tier .tnm{font-size:12.5px;font-weight:700;text-align:center;line-height:1.25;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tier .tsc{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:15px;margin-bottom:7px}
  .tier .tstreak{font-size:10.5px;color:var(--tang);font-weight:700;margin-bottom:5px}
  .block{width:100%;border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:9px;font-family:'Unbounded','Inter',sans-serif;font-weight:800;color:rgba(0,0,0,.55);position:relative;transform-origin:bottom;animation:blockRise .6s cubic-bezier(.2,.8,.25,1) both}
  .tier .tcrown{position:absolute;top:-26px;left:50%;transform:translateX(-50%);color:var(--lime);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:crownDrop .5s cubic-bezier(.2,.9,.3,1.4) both}
  @keyframes blockRise{from{transform:scaleY(.04);opacity:0}to{transform:scaleY(1);opacity:1}}
  @keyframes crownDrop{from{transform:translateX(-50%) translateY(-16px) scale(.4);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
  /* Podium sizing now lives in the drum stylesheet, which is fully responsive. */
  /* ---- live reactions ---- */
  .reacts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:2px auto 16px}
  .reactbtn{background:var(--panel2);border:none;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .15s;line-height:1}
  .reactbtn:active{transform:scale(.82)}
  .reacthint{text-align:center;color:var(--dim);font-size:11.5px;font-weight:600;margin:-8px 0 14px;letter-spacing:.3px}
  .reactfloat{position:fixed;bottom:70px;z-index:30;pointer-events:none;animation:reactUp ease-out forwards;will-change:transform,opacity}
  @keyframes reactUp{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-10px) scale(1.1)}100%{transform:translateY(-60vh) scale(1) rotate(8deg);opacity:0}}
  /* ---- awards ---- */
  .awardcard{background:linear-gradient(160deg,var(--panel2),var(--panel));padding:26px 22px;text-align:center;max-width:440px;margin:0 auto;animation:popIn .45s ease both;border:1px solid rgba(255,255,255,.06)}
  .awardcard .aem{font-size:46px;line-height:1;margin-bottom:8px;animation:bigPulse 1s ease}
  .awardcard .atitle{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:20px;color:var(--lime);margin-bottom:12px}
  .awardcard .awho{display:inline-flex;align-items:center;gap:9px;background:rgba(0,0,0,.28);padding:9px 15px;border-radius:40px;margin-bottom:10px}
  .awardcard .awho .aav{font-size:22px} .awardcard .awho .anm{font-weight:800;font-size:15px}
  .awardcard .asub{color:var(--dim);font-size:13px;font-weight:500}
  .awrecap{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
  .awrecap .arow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.2);border-radius:11px;padding:9px 12px}
  .awrecap .arow .re{font-size:19px} .awrecap .arow .rt{flex:1;min-width:0} .awrecap .arow .rt b{font-size:12.5px;display:block} .awrecap .arow .rt span{font-size:11.5px;color:var(--dim)}
  .awrecap .arow .rw{font-weight:800;font-size:12.5px}
  @media (prefers-reduced-motion:reduce){.block,.tier .tcrown,.reactfloat,.awardcard,.awardcard .aem{animation:none!important}}
  .iconb{background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:15px;padding:4px 6px;font-weight:800}
  .iconb:hover{color:var(--ink)}
  .streak{color:var(--tang);font-weight:800}
  .snack{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;display:none;align-items:center;gap:14px;
    background:var(--panel2);color:var(--ink);padding:13px 18px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.45);
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));max-width:92vw}
  .snack button{background:var(--lime);color:var(--limeT);border:none;padding:8px 16px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .userbar{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:14px;font-size:14px;color:var(--dim);font-weight:600}
  .userbar a{color:var(--turq);cursor:pointer;font-weight:700;text-decoration:none}
  .authErr{background:#3d1020;border:2px solid var(--mag);color:var(--ink);padding:11px 13px;font-size:14px;margin-bottom:10px;font-weight:600}
  .authaction{width:100%;max-width:540px;margin:42px auto 0}
  .authaction .astatus{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center}
  .authaction .astatus.loading{background:rgba(43,217,198,.12);color:var(--turq)}
  .authaction .astatus.success{background:rgba(200,241,53,.14);color:var(--lime)}
  .authaction .astatus.error{background:rgba(240,80,155,.14);color:var(--mag)}
  .authaction .aspin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(43,217,198,.22);border-top-color:var(--turq);animation:aspin .8s linear infinite}
  .authaction .atitle{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(20px,5vw,27px);font-weight:800;line-height:1.25;text-align:center}
  .authaction .acopy{color:var(--dim);font-size:14px;line-height:1.7;text-align:center;margin:11px auto 20px;max-width:410px}
  .authaction .aemail{display:block;color:var(--ink);font-weight:700;overflow-wrap:anywhere;margin-top:5px}
  @keyframes aspin{to{transform:rotate(360deg)}}
  /* ---- larger screens ---- */
  @media(min-width:768px){
    .wrap{max-width:640px}
    .wrap.wide{max-width:900px}
    .qtext{font-size:28px!important}
    .ansbtn{min-height:96px!important;font-size:18px!important}
    .qimg{max-height:320px}
  }
  @media(min-width:1100px){ .wrap.wide{max-width:1020px} }

/* ===== How it works page (namespaced, additive, injected) ===== */
.hiw-page{width:100%;max-width:640px;margin:0 auto;color:var(--ink);text-align:left;font-family:'Inter',system-ui,sans-serif}
.hiw-disp{font-family:'Unbounded','Inter',sans-serif}
.hiw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hiw-eyebrow s{width:22px;height:2px;border-radius:2px;display:inline-block;text-decoration:none}
.hiw-olw{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;letter-spacing:-.5px;line-height:1;text-shadow:0 0 30px rgba(255,122,41,.32);display:inline-flex;align-items:center}
.hiw-olw .oti{color:var(--ink)} .hiw-olw .ya{color:var(--tang)}
.hiw-olw .gem{display:inline-block;width:.3em;height:.3em;background:var(--lime);transform:rotate(45deg);margin-left:.14em;vertical-align:.42em;animation:hiwGem 2.6s ease infinite}
@keyframes hiwGem{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.3);background:var(--turq)}}
.hiw-hero{text-align:center;margin-bottom:12px}
.hiw-hero .hiw-olw{font-size:34px;margin-bottom:16px}
.hiw-hero h1{font-size:clamp(27px,6.5vw,44px);font-weight:800;line-height:1.05}
.hiw-hero .hiw-lede{color:var(--dim);font-size:clamp(14px,2.4vw,16px);max-width:520px;margin:14px auto 0;line-height:1.7}
.hiw-clockpill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 16px;border-radius:999px;background:rgba(43,217,198,.1);border:1px solid rgba(43,217,198,.3);color:var(--turq);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11.5px}
.hiw-journey{margin-top:40px}
.hiw-beat{margin-bottom:46px}
.hiw-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.hiw-head{display:flex;align-items:center;gap:13px}
.hiw-node{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:17px;background:var(--bg);border:2px solid var(--acc);color:var(--acc)}
.hiw-lbl{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:1.6px;color:var(--acc);text-transform:uppercase}
.hiw-txt h2,.hiw-txt h3{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(19px,3vw,25px);font-weight:700;margin-top:3px;display:inline}
.hiw-who{display:inline-block;margin-left:9px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;vertical-align:middle;background:var(--acc);color:#160A1E}
.hiw-txt p{color:var(--dim);font-size:clamp(13.5px,2.3vw,15.5px);line-height:1.7;margin-top:12px;max-width:440px}
.hiw-device{justify-self:center;width:100%;display:flex;justify-content:center}
/* device frames */
.hiw-phone{width:266px;max-width:100%;border-radius:34px;background:#0B0512;padding:11px;position:relative;box-shadow:0 34px 70px -34px rgba(0,0,0,.95),inset 0 0 0 1.5px #2a1738}
.hiw-phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:66px;height:6px;border-radius:6px;background:#000;z-index:5}
.hiw-phone .hiw-screen{background:var(--bg);border-radius:24px;padding:24px 16px 18px;overflow:hidden;background-image:radial-gradient(70% 40% at 80% 0%,rgba(240,80,155,.1),transparent 60%)}
.hiw-laptop{width:100%;max-width:460px}
.hiw-laptop .hiw-mon{border-radius:16px 16px 0 0;background:#0B0512;padding:9px 9px 0;box-shadow:inset 0 0 0 1.5px #2a1738}
.hiw-laptop .hiw-bar{display:flex;align-items:center;gap:6px;padding:5px 8px 9px}
.hiw-laptop .hiw-bar s{width:8px;height:8px;border-radius:50%;background:#3B2150;display:inline-block}
.hiw-laptop .hiw-bar .hiw-u{margin-left:8px;flex:1;background:#160A1E;border-radius:6px;height:17px;display:flex;align-items:center;padding:0 9px;color:var(--dim);font-size:9px}
.hiw-laptop .hiw-screen{background:var(--bg);border-radius:10px 10px 0 0;padding:20px 18px 22px;overflow:hidden;background-image:radial-gradient(60% 40% at 82% 0%,rgba(240,80,155,.1),transparent 60%)}
.hiw-laptop .hiw-base{height:14px;background:linear-gradient(180deg,#15091d,#0B0512);border-radius:0 0 12px 12px;box-shadow:inset 0 0 0 1.5px #2a1738;position:relative}
.hiw-laptop .hiw-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:5px;background:#2a1738;border-radius:0 0 6px 6px}
/* in-screen UI */
.hiw-miniword{font-size:15px;display:flex;justify-content:center;margin-bottom:2px}
.hiw-stitle{text-align:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:14px;margin:12px 0 14px}
.hiw-qcards{display:grid;grid-template-columns:1fr;gap:9px}
.hiw-qcard{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;background:var(--panel);border:1px solid var(--panel2)}
.hiw-qcard .hiw-qi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-size:17px}
.hiw-qcard .hiw-qn{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-qcard .hiw-qg{color:var(--dim);font-size:10px;flex-shrink:0;font-weight:600}
.hiw-codetiles{display:flex;justify-content:center;gap:6px;margin:6px 0 12px}
.hiw-codetile{border-radius:9px;width:33px;height:43px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:20px}
.hiw-lobbyrow{display:flex;gap:13px;align-items:center;justify-content:center;margin-bottom:14px}
.hiw-qr{width:70px;height:70px;border-radius:11px;flex-shrink:0;padding:6px;background:var(--ink)}
.hiw-qr svg{display:block;width:100%;height:100%}
.hiw-joiners{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.hiw-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--panel2);font-size:11.5px;font-weight:700}
.hiw-waiting{text-align:center;color:var(--dim);font-size:10.5px;margin-top:12px}
.hiw-joinbtn{margin-top:14px;background:var(--turq);color:var(--turqT);border:0;border-radius:12px;padding:12px;width:100%;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13px;text-align:center}
.hiw-qmeta{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px}
.hiw-qnum{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:9px;letter-spacing:1.4px;color:var(--dim)}
.hiw-clock{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:14px;color:var(--lime);border:3px solid rgba(200,241,53,.28)}
.hiw-qtext{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:15px;line-height:1.4;margin-bottom:14px}
.hiw-ansrow{display:grid;grid-template-columns:1fr;gap:9px}
.hiw-ans{display:flex;align-items:center;gap:11px;padding:12px 13px;background:var(--panel);border:1.5px solid var(--panel2);border-left:5px solid var(--acc);border-radius:13px;color:var(--ink);font-size:13px;font-weight:600}
.hiw-ans .hiw-ltr{width:29px;height:29px;border-radius:9px;background:var(--acc);color:var(--accT);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:12px}
.hiw-ans .hiw-atx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-ans.hiw-pick{border-color:var(--ink);background:#38204A;box-shadow:0 0 0 2px rgba(253,244,227,.22) inset}
.hiw-wcard{position:relative;display:grid;grid-template-columns:30px 26px 1fr auto;align-items:center;gap:10px;padding:13px 15px;margin-bottom:9px;background:rgba(0,0,0,.26);border:1px solid rgba(253,244,227,.1);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.hiw-wrank{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:20px;line-height:1;text-align:center;opacity:.85}
.hiw-wav{font-size:22px;line-height:1}
.hiw-wname{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-wnamewrap{min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.hiw-wsub{font-family:'Inter',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-wsc{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:13.5px;white-space:nowrap}
.hiw-wcard.hiw-first{background:linear-gradient(120deg,rgba(255,122,41,.24),rgba(200,241,53,.15));border-color:var(--lime);box-shadow:0 0 34px rgba(200,241,53,.13)}
.hiw-wcard.hiw-first .hiw-wrank{color:var(--lime);opacity:1;font-size:24px}
.hiw-wcard.hiw-first .hiw-wsc{color:var(--lime);font-size:15px}
.hiw-wcrown{position:absolute;top:-9px;right:12px;color:var(--lime)}
.hiw-pstage{display:flex;justify-content:center;align-items:flex-end;gap:9px;max-width:420px;margin:2px auto 0}
.hiw-tier{display:flex;flex-direction:column;align-items:center;flex:1;max-width:118px;min-width:0}
.hiw-tier .hiw-tav{font-size:26px;line-height:1;margin-bottom:4px}
.hiw-tier .hiw-tnm{font-size:11.5px;font-weight:700;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-tier .hiw-tsc{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:12px;margin:2px 0 6px}
.hiw-tier .hiw-tcrown{color:var(--lime);margin-bottom:2px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.hiw-block{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-family:'Unbounded','Inter',sans-serif;font-weight:800;color:rgba(0,0,0,.55)}
.hiw-block.hiw-b1{height:98px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#FF9B4F,#DC5E12 48%,#8E3606);font-size:22px;color:#FFF0D4;box-shadow:0 0 28px rgba(255,122,41,.30)}
.hiw-block.hiw-b2{height:72px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#3FE6D3,#17A594 48%,#0A6459);font-size:19px;color:#FFF0D4}
.hiw-block.hiw-b3{height:54px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#D6F857,#9BC016 48%,#5C7508);font-size:17px;color:#2A3600}
.hiw-close{border-radius:20px;padding:30px 24px;margin-top:18px;text-align:center;background:linear-gradient(90deg,rgba(255,122,41,.18),rgba(240,80,155,.12));border:1px solid rgba(255,122,41,.36)}
.hiw-close .hiw-disp{font-size:clamp(20px,3.4vw,28px);font-weight:800}
.hiw-close p{color:var(--dim);font-size:14px;margin:10px auto 18px;line-height:1.6;max-width:420px}
.hiw-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hiw-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13.5px;padding:13px 22px;border-radius:13px;border:0}
.hiw-btn.hiw-primary{background:var(--tang);color:#160A1E}
.hiw-btn.hiw-quiet{background:transparent;color:var(--ink);border:2px solid var(--panel2)}
.hiw-back{display:block;max-width:360px;margin:16px auto 0;text-align:center;background:transparent;color:var(--dim);border:2px solid var(--panel2);border-radius:14px;padding:13px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;cursor:pointer;width:100%}
/* desktop: real two-column, not a blown-up phone */
@media(min-width:920px){
  .hiw-page{max-width:1060px}
  .hiw-journey{margin-top:64px}
  .hiw-beat{margin-bottom:78px}
  .hiw-inner{grid-template-columns:1fr 1fr;gap:56px}
  .hiw-beat:nth-child(even) .hiw-txt{order:2}
  .hiw-beat:nth-child(even) .hiw-device{order:1}
  .hiw-txt p{font-size:16px}
  .hiw-phone{width:288px}
  .hiw-laptop{max-width:520px}
}

/* home action zones: three key actions, sub-actions tucked under their own card */
.actzone{background:var(--tint,transparent);padding:7px}
.actsub{margin:12px 7px 3px}
.actgrid .actdiv{background:none}
.verifynudge{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 auto 16px;max-width:470px;padding:11px 16px;border-radius:12px;background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.28);color:var(--ink);font-size:13px;font-weight:600}
.verifynudge button{background:var(--turq);color:var(--turqT);border:0;border-radius:8px;padding:7px 13px;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11.5px;cursor:pointer}
.otprof-banner{max-width:470px;margin:0 auto 16px;display:flex;align-items:center;gap:13px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.3);border-radius:14px;padding:14px 16px;cursor:pointer}
.otprof-bi{width:38px;height:38px;border-radius:11px;background:rgba(167,139,250,.18);color:var(--vio);display:grid;place-items:center;flex-shrink:0}
.otprof-bt{flex:1;min-width:0;text-align:left}
.otprof-bt b{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13.5px;display:block}
.otprof-bt span{color:var(--dim);font-size:12px}
.otprof-go{background:var(--vio);color:#1a0b2e;border:0;border-radius:9px;padding:9px 14px;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12px;cursor:pointer;flex-shrink:0}
.otprof-card{display:none;max-width:470px;margin:0 auto 16px;background:var(--panel);border:1px solid var(--panel2);border-radius:16px;padding:22px 20px;text-align:left}
.otprof-card.open{display:block}
.otprof-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--turq)}
.otprof-eyebrow s{width:18px;height:2px;border-radius:2px;background:var(--turq);display:inline-block}
.otprof-h{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:18px;margin:9px 0 5px}
.otprof-sub{color:var(--dim);font-size:12.5px;line-height:1.6;margin-bottom:18px}
.otprof-field{margin-bottom:14px}
.otprof-field label{display:block;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.4px;color:var(--dim);margin:0 0 6px}
.otprof-field select,.otprof-field input{width:100%;background:#170A22;border:1.5px solid var(--panel2);border-radius:11px;color:var(--ink);font-family:'Inter',sans-serif;font-size:13.5px;padding:12px 13px;outline:none}
.otprof-field select:focus,.otprof-field input:focus{border-color:var(--turq)}
.otprof-seg{display:flex;gap:8px}
.otprof-seg button{flex:1;background:#170A22;border:1.5px solid var(--panel2);border-radius:11px;color:var(--ink);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12px;padding:11px 6px;cursor:pointer}
.otprof-seg button.on{background:rgba(43,217,198,.14);border-color:var(--turq);color:var(--turq)}
.otprof-actions{display:flex;gap:10px;margin-top:20px;align-items:center}
.otprof-save{flex:1;background:var(--turq);color:var(--turqT);border:0;border-radius:12px;padding:13px;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer}
.otprof-later{background:none;border:0;color:var(--dim);font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer;padding:9px 6px}
.locsel{width:100%;background:#170A22;border:1.5px solid var(--panel2);border-radius:10px;color:var(--ink);font-family:'Inter',sans-serif;font-size:13.5px;padding:12px 13px;outline:none;margin-bottom:2px}
.locsel:focus{border-color:var(--turq)}

/* Otiya 2026 product, raffle, pricing and control upgrades */
.rafflehero{display:flex;gap:18px;align-items:center;margin:4px 0 18px}.rafflelogo{width:68px;height:68px;object-fit:contain;flex:0 0 auto}.rafflehero h1,.pricingHero h1{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(24px,5vw,38px);line-height:1.1;margin:7px 0}.rafflehero p,.pricingHero p,.microcopy{color:var(--dim);font-size:13px;line-height:1.65}.raffleStudio{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.raffleStage{min-height:430px}.raffleSide .seg{margin-bottom:14px}.stylegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stylegrid button,.countgrid button{border:1px solid var(--panel2);background:#170A22;color:var(--dim);padding:10px;border-radius:10px;font-weight:700;cursor:pointer}.stylegrid button.on,.countgrid button.on{background:var(--tang);border-color:var(--tang);color:var(--tangT)}.countgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.recommend{font-size:11.8px;color:var(--dim);margin-top:10px}.raffleWarn{display:flex;gap:9px;align-items:flex-start;background:rgba(255,122,41,.1);border:1px solid rgba(255,122,41,.35);padding:11px;border-radius:11px;color:var(--ink);font-size:12px;line-height:1.5;margin-top:10px}.stylebadge{font-family:'Unbounded','Inter',sans-serif;font-size:9px;letter-spacing:1px;background:rgba(200,241,53,.12);color:var(--lime);padding:6px 9px;border-radius:999px}.reelbox{position:relative;overflow:hidden;max-width:440px;margin:20px auto;background:#13081c;border:1px solid var(--panel2);border-radius:18px;padding:16px}.reellabel{text-align:center;color:var(--turq);font-size:10px;letter-spacing:2px;font-weight:800;margin-bottom:9px}.reelname{padding:11px 14px;margin:5px 0;background:var(--panel);border-radius:10px;color:var(--dim);font-weight:700;text-align:center;transition:.2s}.reelname.focus{background:var(--tang);color:var(--tangT);transform:scale(1.03)}.reelbox.rolling .reelname{animation:reelFlash .55s linear infinite}.reelbox.rolling .reelname:nth-child(2n){animation-delay:.12s}@keyframes reelFlash{50%{transform:translateY(7px);filter:brightness(1.35)}}.rafflecards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:500px;margin:28px auto}.rafflecard{min-height:150px;background:linear-gradient(145deg,#321942,#1a0b25);border:1px solid var(--panel2);border-radius:16px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:14px;text-align:center}.rafflecard span{color:var(--lime)}.rafflecard b{font-family:'Unbounded','Inter',sans-serif;font-size:12px}.rafflecards.shuffling .rafflecard{animation:cardFlip .7s ease-in-out infinite}.rafflecards.shuffling .rafflecard:nth-child(2){animation-delay:.15s}.rafflecards.shuffling .rafflecard:nth-child(3){animation-delay:.3s}@keyframes cardFlip{50%{transform:rotateY(180deg) scale(.94)}}.drumstage{max-width:440px;margin:24px auto;text-align:center;background:radial-gradient(circle at 50% 25%,rgba(255,122,41,.15),transparent 55%),#170a22;border:1px solid var(--panel2);border-radius:22px;padding:34px 20px}.drumicon{color:var(--tang);filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}.drumcount{font-family:'Unbounded','Inter',sans-serif;font-size:38px;font-weight:800;margin-top:12px}.drumlabel{font-size:10px;color:var(--dim);font-weight:800;letter-spacing:2px}.drumname{margin-top:14px;color:var(--lime);font-family:'Unbounded','Inter',sans-serif;font-weight:700;min-height:24px}.drumstage.beating .drumicon{animation:drumPulse .32s ease infinite}.winnerMoment{display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:32px 20px;margin:18px 0;background:linear-gradient(120deg,rgba(255,122,41,.16),rgba(200,241,53,.1));border:1px solid var(--lime);border-radius:18px}.winnerMoment>span{color:var(--lime)}.winnerMoment small,.winnerMoment em{display:block;color:var(--dim);font-size:10px;font-style:normal;letter-spacing:1.5px}.winnerMoment b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:clamp(20px,4vw,30px);margin:5px 0}.raffleActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.raffleActions .btn{width:auto}.virtualList{max-height:310px;overflow:auto;border:1px solid var(--panel2);border-radius:12px}.entrantrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(253,244,227,.06);font-size:13px}.entrantrow:last-child{border-bottom:none}.entrantrow button{border:0;background:none;color:var(--mag);cursor:pointer}.moreEntrants{padding:12px;color:var(--dim);font-size:12px}.toggrow small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.pricingHero{text-align:center;max-width:670px;margin:0 auto 24px}.pricingHero>img{width:68px;height:68px;object-fit:contain;margin-bottom:8px}.billtoggle{display:inline-flex;background:#14091d;border:1px solid var(--panel2);padding:5px;border-radius:14px;margin-top:18px;gap:5px}.billtoggle button{border:0;background:transparent;color:var(--dim);padding:10px 15px;border-radius:10px;font-weight:800;cursor:pointer}.billtoggle button.on{background:var(--panel2);color:var(--ink)}.billtoggle b{color:var(--lime);font-size:10px;margin-left:5px}.pricingFive{display:grid;grid-template-columns:1fr;gap:13px}.priceblurb{color:var(--dim);font-size:12.5px;line-height:1.55;min-height:58px}.saving{color:var(--lime);font-size:11.5px;font-weight:800;margin-top:8px}.capline{display:flex;gap:7px;align-items:flex-start;color:var(--turq);font-size:12px;font-weight:700;margin-top:12px;line-height:1.45}.pricingNote{background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.25);padding:16px;border-radius:14px;color:var(--dim);font-size:12.5px;line-height:1.65;margin:20px 0}.pricingNote b{color:var(--ink)}
.adminShell{width:100%;display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}.adminSide{position:sticky;top:16px;background:#15091f;border:1px solid rgba(253,244,227,.08);border-radius:18px;padding:13px;max-height:calc(100vh - 32px);overflow:auto}.adminBrand{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;border-bottom:1px solid var(--panel2);margin-bottom:12px}.adminBrand img{width:38px;height:38px;object-fit:contain}.adminBrand b{font-family:'Unbounded','Inter',sans-serif;font-size:12px}.adminBrand span{display:block;color:var(--lime);font-size:10px;margin-top:2px;text-transform:uppercase}.adminGroup{margin:13px 0}.adminGroup>small{display:block;font-size:8.5px;letter-spacing:1.7px;color:#856f98;font-weight:900;padding:0 8px 6px}.adminNavBtn,.adminExit{width:100%;border:0;background:transparent;color:var(--dim);text-align:left;padding:8px;border-radius:9px;font-size:11.5px;font-weight:650;cursor:pointer}.adminNavBtn:hover,.adminNavBtn.on{background:rgba(255,255,255,.06);color:var(--ink)}.adminNavBtn.on{box-shadow:inset 3px 0 0 var(--tang)}.adminExit{margin-top:10px;border:1px solid var(--panel2);text-align:center}.adminMain{min-width:0;padding:5px 0 40px}.adminTop{display:flex;align-items:center;gap:12px;margin-bottom:18px}.adminTop>div:first-child{flex:1}.adminTop small{color:var(--tang);font-weight:900;font-size:9px;letter-spacing:2px}.adminTop h1{font-family:'Unbounded','Inter',sans-serif;font-size:22px;margin-top:3px}.adminSearch{display:flex;align-items:center;gap:8px;width:min(340px,36vw);border:1px solid var(--panel2);background:#15091f;border-radius:11px;padding:0 10px;color:var(--dim)}.adminSearch input{border:0;background:transparent;margin:0;padding:10px 2px;font-size:12px}.adminKpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}.adminKpi{background:var(--panel);border:1px solid rgba(253,244,227,.07);border-radius:14px;padding:15px}.adminKpi small{color:var(--dim);font-size:10px;font-weight:700}.adminKpi b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:22px;margin:7px 0 3px}.adminKpi span{color:#8e789f;font-size:9.5px}.adminGrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.adminPanel{background:var(--panel);border:1px solid rgba(253,244,227,.07);border-radius:16px;padding:16px;margin-bottom:14px;min-width:0}.adminPanelHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.adminPanelHead h3{font-family:'Unbounded','Inter',sans-serif;font-size:13px}.adminPanelHead p{color:var(--dim);font-size:11.5px;line-height:1.5;margin-top:4px}.adminTable{overflow:auto}.adminTr{display:grid;grid-template-columns:1.5fr .65fr .8fr .7fr auto;gap:10px;align-items:center;padding:10px 8px;border-bottom:1px solid rgba(253,244,227,.06);font-size:11.5px;min-width:570px}.adminTr.adminTh{color:var(--dim);font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:800}.adminTr small{display:block;color:var(--dim);font-size:9.5px;margin-top:2px}.adminTr button{border:0;background:rgba(240,80,155,.08);color:var(--mag);border-radius:7px;padding:6px 8px;cursor:pointer}.adminTr .uid{font-family:monospace;font-size:9px;color:var(--dim)}.adminCreateRow{display:grid;grid-template-columns:.7fr .8fr 1.4fr .55fr .8fr auto;gap:7px;margin-bottom:12px}.adminCreateRow input,.adminPlan input{margin:0;border-radius:8px;padding:9px;font-size:11px}.adminPlanGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.adminPlan{background:#190b24;border:1px solid var(--panel2);border-radius:12px;padding:11px;min-width:0}.adminPlan>input{font-family:'Unbounded','Inter',sans-serif;font-weight:700;margin-bottom:9px}.adminFieldGrid{display:grid;grid-template-columns:1fr;gap:6px}.adminFieldGrid label{color:var(--dim);font-size:9.5px}.adminFieldGrid input{margin-top:4px;width:100%}.adminCheck{display:block;color:var(--dim);font-size:10px;margin-top:8px}.adminCheck input{width:auto;margin-right:5px}.adminPlan .quiet{width:100%;justify-content:center;margin-top:10px}.adminFeatureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.adminFeatureGrid>div{background:#190b24;border:1px solid var(--panel2);border-radius:12px;padding:14px}.adminFeatureGrid b{font-size:11.5px}.adminFeatureGrid span{display:block;color:var(--dim);font-size:10.5px;line-height:1.5;margin-top:5px}.adminLoading,.adminDenied{margin:80px auto;text-align:center;max-width:430px}.adminLoading img,.adminDenied img{width:76px;height:76px;object-fit:contain;margin-bottom:14px}.adminDenied h2{font-family:'Unbounded','Inter',sans-serif}.adminDenied p{color:var(--dim);line-height:1.6;margin:10px 0 20px}.adminEmpty{padding:18px;color:var(--dim);font-size:11px}.adminPlanGrid .quiet{font-size:10px}
@media(min-width:780px){.raffleStudio{grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr)}.pricingFive{grid-template-columns:repeat(5,1fr)}.pcard{padding:19px 15px}.pname{font-size:14px}.pprice{font-size:27px}}
@media(max-width:1050px){.adminKpis{grid-template-columns:repeat(3,1fr)}.adminGrid2{grid-template-columns:1fr}.adminPlanGrid{grid-template-columns:repeat(2,1fr)}.adminCreateRow{grid-template-columns:1fr 1fr 1fr}.adminSearch{display:none}}
@media(max-width:760px){.adminShell{grid-template-columns:1fr}.adminSide{position:relative;top:0;max-height:none}.adminGroup{display:inline-block;vertical-align:top;width:49%}.adminTop{flex-wrap:wrap}.adminKpis{grid-template-columns:1fr 1fr}.adminPlanGrid{grid-template-columns:1fr}.adminFeatureGrid{grid-template-columns:1fr}.adminCreateRow{grid-template-columns:1fr 1fr}.rafflehero{align-items:flex-start}.rafflelogo{width:52px;height:52px}.rafflecards{grid-template-columns:1fr 1fr 1fr}.pricingFive{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pricingFive{grid-template-columns:1fr}.adminCreateRow{grid-template-columns:1fr}.rafflehero{display:block}.rafflelogo{margin-bottom:10px}.countgrid{grid-template-columns:repeat(5,1fr)}}

/* 2026 UX polish: calmer pricing and automatic raffle experiences */
.miniBurst{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,122,41,.2),rgba(240,80,155,.14));color:var(--lime);margin-bottom:14px}
.raffleTabs{margin-bottom:13px}.rafflehero{max-width:760px}.rafflehero h1{font-size:clamp(25px,4.6vw,36px)}.rafflehero p{max-width:590px}
.raffleStage{min-height:0;padding:18px;background:radial-gradient(90% 80% at 50% 18%,rgba(240,80,155,.09),transparent 60%),linear-gradient(160deg,#281337,#170a22);border-color:rgba(253,244,227,.1)}
.raffleStageTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 12px;border-bottom:1px solid rgba(253,244,227,.07)}.raffleStageTop>div{min-width:0}.raffleStageTop strong{font-family:'Unbounded','Inter',sans-serif;font-size:9.5px;letter-spacing:1.2px;color:var(--lime)}.raffleStageTop p{font-size:12px;color:var(--dim);line-height:1.5;margin:5px 0 0}.autoDot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(200,241,53,.75);margin-right:7px}.effectChange{border:1px solid var(--panel2);background:rgba(0,0,0,.22);color:var(--dim);border-radius:999px;padding:8px 12px;font:700 11px 'Inter',sans-serif;cursor:pointer;white-space:nowrap}.effectChange:hover{color:var(--ink);border-color:var(--turq)}
.effectPicker{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:11px 0 2px}.effectPicker button{border:1px solid var(--panel2);background:rgba(0,0,0,.2);color:var(--dim);border-radius:12px;padding:10px 8px;cursor:pointer;text-align:left}.effectPicker button b{display:block;color:var(--ink);font-size:11px}.effectPicker button small{display:block;font-size:9.5px;line-height:1.35;margin-top:3px}.effectPicker button.on{border-color:var(--lime);background:rgba(200,241,53,.08)}
.stageTitle{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:14px 2px 2px}.stageTitle span{font-weight:800;font-size:13px}.stageTitle small{color:var(--dim);font-size:11px}.experienceFrame{position:relative;overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:center;animation:experienceIn .5s cubic-bezier(.16,1,.3,1) both}.fxTop{position:absolute;left:10px;right:10px;top:9px;display:flex;justify-content:space-between;z-index:7;pointer-events:none}.fxTop span{font-family:'Unbounded','Inter',sans-serif;font-size:9px;letter-spacing:1.3px;color:var(--tang)}.fxTop small{font-size:10px;color:var(--dim)}@keyframes experienceIn{from{opacity:.2;transform:scale(.975) translateY(8px)}to{opacity:1;transform:none}}
.raffleEmpty{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim)}.raffleEmpty>span{color:var(--turq);margin-bottom:12px}.raffleEmpty b{font-family:'Unbounded','Inter',sans-serif;font-size:18px;color:var(--ink)}.raffleEmpty small{max-width:280px;line-height:1.55;margin-top:8px}
.drawHero{width:100%;border:0;border-radius:16px;padding:16px 18px;background:linear-gradient(110deg,var(--lime),var(--turq));color:#113125;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:transform .2s,filter .2s}.drawHero:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04)}.drawHero:disabled{opacity:.45;cursor:not-allowed}.drawHero span{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:15px;font-weight:800}.drawHero small{display:block;font-weight:700;font-size:10.5px;margin-top:4px;opacity:.72}
.wheelwrap{margin:36px auto 24px}.orbit{transition:transform 5s cubic-bezier(.08,.72,.08,1)}.wheelwrap.spin{filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}.wheelwrap.spin .ring{animation:ringGlow .8s ease-in-out infinite alternate}@keyframes ringGlow{to{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 0 0 7px rgba(255,122,41,.45),0 0 40px rgba(240,80,155,.35)}}
.reelMachine{position:relative;max-width:480px;margin:42px auto 28px;height:238px;overflow:hidden;background:#100718;border:1px solid rgba(43,217,198,.28);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:9px;box-shadow:inset 0 0 55px rgba(0,0,0,.48),0 18px 38px rgba(0,0,0,.28)}.reelSlot{height:50px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.035);color:#8f7aa0;font-weight:800;transition:transform .16s,filter .16s,background .16s}.reelSlot.focus{height:62px;color:var(--ink);font-family:'Unbounded','Inter',sans-serif;font-size:16px;background:linear-gradient(90deg,rgba(255,122,41,.14),rgba(240,80,155,.14));border:1px solid rgba(255,122,41,.35)}.reelMachine.rolling .reelSlot{filter:blur(.55px);transform:translateY(5px)}.reelMachine.rolling .reelSlot.focus{animation:reelPulse .34s ease-in-out infinite}.reelSlot.landed{background:rgba(200,241,53,.16);border-color:var(--lime);color:var(--lime);transform:scale(1.035)!important;filter:none!important}@keyframes reelPulse{50%{transform:scale(1.025)}}.reelLine{position:absolute;left:14px;right:14px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--tang),transparent);opacity:.55;z-index:4}.reelFade{position:absolute;left:0;right:0;height:54px;z-index:3;pointer-events:none}.reelFade.top{top:0;background:linear-gradient(#100718,transparent)}.reelFade.bottom{bottom:0;background:linear-gradient(transparent,#100718)}
.rafflecards{grid-template-columns:repeat(3,1fr);gap:11px;max-width:540px;margin:46px auto 28px;perspective:900px}.rafflecard{min-height:126px;border-radius:18px;transform-style:preserve-3d;box-shadow:0 14px 24px rgba(0,0,0,.22)}.rafflecards.shuffling .rafflecard{animation:cardShuffle .72s cubic-bezier(.5,.1,.3,1) infinite}.rafflecards.shuffling .rafflecard:nth-child(2n){animation-delay:-.2s}.rafflecards.shuffling .rafflecard:nth-child(3n){animation-delay:-.4s}.rafflecard.landed{animation:none!important;border-color:var(--lime);background:linear-gradient(145deg,rgba(200,241,53,.22),rgba(43,217,198,.12));box-shadow:0 0 38px rgba(200,241,53,.22);transform:translateY(-6px) scale(1.04)}@keyframes cardShuffle{0%,100%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-10px) rotateY(85deg)}55%{transform:translateY(-10px) rotateY(95deg)}}
.drumstage{position:relative;min-height:300px;margin:42px auto 26px;overflow:hidden;border-radius:28px;background:radial-gradient(circle at 50% 55%,rgba(255,122,41,.18),transparent 48%),#12081b}.drumstage.beating{box-shadow:0 0 55px rgba(255,122,41,.13)}.drumstage.beating .drumicon{animation:drumBounce .34s cubic-bezier(.3,.8,.3,1) infinite}.drumstage.landed{border-color:var(--lime);box-shadow:0 0 42px rgba(200,241,53,.16)}@keyframes drumBounce{50%{transform:translateY(-8px) scale(1.08) rotate(-4deg)}}.drumBubbles{position:absolute;inset:0;pointer-events:none}.drumBubbles i{position:absolute;left:calc(10% + (var(--i) * 11%));top:calc(17% + ((var(--i) % 4) * 15%));font-style:normal;font-size:9px;color:var(--dim);padding:5px 8px;border:1px solid rgba(253,244,227,.08);border-radius:999px;background:rgba(0,0,0,.28);animation:bubbleFloat calc(3.1s + var(--i)*.16s) ease-in-out infinite alternate}.drumstage.beating .drumBubbles i{animation-duration:.75s}@keyframes bubbleFloat{to{transform:translateY(-18px) rotate(4deg);opacity:.55}}.drumname{font-size:14px}.drumstage.landed .drumname{font-size:18px;color:var(--lime)}
.raffleLimit{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:10px;padding:11px 12px;border-radius:12px;background:rgba(240,80,155,.1);border:1px solid rgba(240,80,155,.32);font-size:11px;line-height:1.45}.raffleLimit>svg{color:var(--mag)}.raffleLimit span{color:var(--dim)}.raffleLimit span b{color:var(--ink)}.raffleLimit button{border:0;background:var(--mag);color:var(--magT);font-weight:800;border-radius:9px;padding:8px 10px;cursor:pointer}.entrantBuilder,.entrantListCard{padding:17px}.quickAdd{display:grid;grid-template-columns:1fr auto;gap:8px}.quickAdd input{margin:0;border-radius:12px}.quickAdd button{border:0;border-radius:12px;background:var(--turq);color:var(--turqT);padding:0 17px;font-weight:800;cursor:pointer}.bulkAdd{margin-top:10px;border-top:1px solid rgba(253,244,227,.07);padding-top:10px}.bulkAdd summary{cursor:pointer;color:var(--dim);font-size:12px;font-weight:700}.bulkAdd textarea{margin-top:10px}.compactControl,.planMini,.saveMini{padding:16px}.controlTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.controlTitle span{font-weight:800;font-size:12px}.controlTitle b{font-family:'Unbounded','Inter',sans-serif;color:var(--lime);font-size:20px}.customWinner{gap:7px;margin-top:8px}.customWinner input{margin:0}.planMini>div{display:flex;align-items:baseline;justify-content:space-between;gap:9px}.planMini>div b{font-family:'Unbounded','Inter',sans-serif;font-size:13px}.planMini>div span{color:var(--dim);font-size:10.5px}.centre{justify-content:center}
.pricingHero.compact{max-width:600px;margin-bottom:18px}.pricingHero.compact>img{width:58px;height:58px}.pricingHero.compact h1{font-size:clamp(25px,4.8vw,38px)}.pricingHero.compact p{max-width:520px;margin:0 auto}.pricingNotice{display:flex;align-items:flex-start;gap:11px;max-width:820px;margin:0 auto 15px;background:rgba(43,217,198,.07);border:1px solid rgba(43,217,198,.22);border-radius:14px;padding:12px 14px}.pricingNotice>svg{color:var(--turq);flex-shrink:0}.pricingNotice b{font-size:12px}.pricingNotice p{color:var(--dim);font-size:11.5px;line-height:1.5;margin-top:3px}.pricingGridCool{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.priceCard{position:relative;background:#190b24;border:1px solid rgba(253,244,227,.08);border-radius:18px;padding:18px 16px;min-width:0;transition:transform .2s,border-color .2s}.priceCard:hover{transform:translateY(-3px);border-color:rgba(43,217,198,.45)}.priceCard.hot{background:linear-gradient(155deg,rgba(200,241,53,.08),rgba(43,217,198,.05));border-color:rgba(200,241,53,.45)}.priceCard.current{box-shadow:inset 0 0 0 1px var(--lime)}.priceHead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.priceHead h3{font-family:'Unbounded','Inter',sans-serif;font-size:15px;margin-top:5px}.priceTag,.popularDot{font-size:8.5px;letter-spacing:1.2px;font-weight:900;color:var(--dim)}.popularDot{color:var(--lime)}.priceLine{display:flex;align-items:baseline;gap:6px;margin:17px 0 4px}.priceLine b{font-family:'Unbounded','Inter',sans-serif;font-size:30px}.priceLine small{color:var(--dim);font-size:10px;line-height:1.25}.saveChip{display:inline-block;color:var(--lime);font-size:9.5px;font-weight:800;background:rgba(200,241,53,.08);border-radius:999px;padding:5px 8px;margin-bottom:12px}.priceCapacity{display:flex;gap:7px;align-items:center;color:var(--turq);font-size:10.8px;font-weight:750;padding:10px 0;border-top:1px solid rgba(253,244,227,.06);border-bottom:1px solid rgba(253,244,227,.06)}.priceCard ul{list-style:none;margin:11px 0 15px;min-height:92px}.priceCard li{display:flex;gap:7px;color:var(--dim);font-size:10.8px;line-height:1.4;padding:4px 0}.priceCard li svg{color:var(--lime);flex-shrink:0}.priceCta{width:100%;border:1px solid var(--panel2);background:rgba(0,0,0,.18);color:var(--ink);border-radius:11px;padding:11px;font-family:'Unbounded','Inter',sans-serif;font-size:10.5px;font-weight:800;cursor:pointer}.priceCta.primary{background:var(--lime);color:var(--limeT);border-color:var(--lime)}.priceCta:disabled{opacity:.65;cursor:default}.enterpriseStrip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:11px;padding:15px 18px;border:1px solid rgba(167,139,250,.28);border-radius:16px;background:rgba(167,139,250,.06)}.enterpriseStrip div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.enterpriseStrip span{color:var(--vio);font-size:10px;font-weight:900;letter-spacing:1px}.enterpriseStrip b{font-family:'Unbounded','Inter',sans-serif;font-size:13px}.enterpriseStrip small{color:var(--dim);font-size:11px}.enterpriseStrip button{border:0;background:var(--vio);color:#1a0b2e;border-radius:10px;padding:10px 13px;font-weight:800;cursor:pointer}.pricingFoot{text-align:center;color:var(--dim);font-size:11.5px;line-height:1.55;margin:16px auto 18px}.pricingFoot b{color:var(--ink)}
@media(max-width:930px){.pricingGridCool{grid-template-columns:1fr 1fr}.effectPicker{grid-template-columns:1fr 1fr 1fr}.raffleStudio{grid-template-columns:1fr}.raffleSide{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.raffleSide .seg{margin-bottom:0}}
@media(max-width:600px){.pricingGridCool{grid-template-columns:1fr}.priceCard ul{min-height:0}.enterpriseStrip{align-items:flex-start;flex-direction:column}.effectPicker{grid-template-columns:1fr 1fr}.raffleStage{padding:14px}.raffleStageTop{flex-direction:column}.experienceFrame{min-height:310px}.rafflecards{grid-template-columns:1fr 1fr;margin-top:42px}.rafflecard:nth-child(n+5){display:none}.raffleSide{grid-template-columns:1fr}.raffleLimit{grid-template-columns:auto 1fr}.raffleLimit button{grid-column:1/-1}.quickAdd{grid-template-columns:1fr}.quickAdd button{padding:12px}.winnerMoment{padding:22px 15px}}

/* Final raffle and pricing polish */
.rafflehero.friendly{margin-bottom:12px;align-items:flex-start}.rafflehero.friendly .rafflelogo{width:54px;height:54px}.rafflehero.friendly h1{font-size:clamp(24px,4.4vw,34px);margin:5px 0}.rafflehero.friendly p{font-size:12.5px;max-width:520px}
.raffleStageTop.simple{align-items:center}.raffleStageTop.simple p{margin-top:3px}.magicMode{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.magicMode .magicCount{font-family:'Unbounded','Inter',sans-serif;font-weight:800;color:var(--ink);font-size:12px}.magicMode .magicArrow{color:var(--dim);font-size:11px}.magicMode .magicEffect{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;background:rgba(200,241,53,.1);border:1px solid rgba(200,241,53,.28);color:var(--lime);font-size:10.5px;font-weight:850}.magicMode .magicEffect i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(200,241,53,.8)}
.crowdFlow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 0}.crowdStep{position:relative;padding:8px 8px 7px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid rgba(253,244,227,.06);min-width:0}.crowdStep b{display:block;font-size:9.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crowdStep small{display:block;font-size:8.7px;color:#78678a;margin-top:2px}.crowdStep.on{border-color:rgba(255,122,41,.48);background:rgba(255,122,41,.08)}.crowdStep.on b{color:var(--tang)}.crowdStep.on:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:9px;background:linear-gradient(90deg,var(--tang),var(--mag))}
.effectChange.subtle{padding:7px 10px;font-size:10px}.effectPicker.compactPicker{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:9px}.effectPicker.compactPicker button{padding:9px 8px}.effectPicker.compactPicker button small{font-size:8.8px}
.experienceFrame{isolation:isolate}.experienceFrame:before{content:"";position:absolute;inset:16% 10%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,41,.12),rgba(240,80,155,.06) 36%,transparent 70%);filter:blur(28px);z-index:-1;animation:ambientBreath 3.4s ease-in-out infinite}.experienceFrame.isDrawing:before{animation-duration:.8s;opacity:1}.fxSparkles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.fxSparkles i{position:absolute;left:calc((var(--i) * 37 + 7) % 91 * 1%);top:calc((var(--i) * 53 + 11) % 83 * 1%);width:calc(3px + (var(--i) % 3) * 2px);height:calc(3px + (var(--i) % 3) * 2px);border-radius:50%;background:var(--spark,var(--lime));opacity:.12;transform:scale(.7)}.experienceFrame.isDrawing .fxSparkles i{animation:sparkPop calc(.7s + (var(--i) % 5)*.13s) ease-in-out infinite;animation-delay:calc(var(--i)*-.07s)}
@keyframes ambientBreath{50%{transform:scale(1.12);opacity:.65}}@keyframes sparkPop{0%,100%{opacity:.08;transform:scale(.55) translateY(0)}50%{opacity:.85;transform:scale(1.35) translateY(-12px)}}
.wheelwrap.spin .needle{animation:needleTick .18s ease-in-out infinite}.wheelwrap.spin .hubcap{animation:hubBeat .55s ease-in-out infinite alternate}@keyframes needleTick{50%{transform:translateX(-50%) rotate(8deg)}}@keyframes hubBeat{to{box-shadow:inset 0 2px 20px rgba(0,0,0,.65),0 0 0 7px rgba(22,10,33,.92),0 0 46px rgba(240,80,155,.42)}}
.reelMachine:after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 30px rgba(43,217,198,.06)}.reelMachine.rolling{animation:machineHum .22s linear infinite alternate}@keyframes machineHum{to{transform:translateX(1.5px)}}
.rafflecards.shuffling{animation:deckRock .8s ease-in-out infinite alternate}@keyframes deckRock{to{transform:rotate(-1.2deg) scale(1.01)}}
.drumstage.beating:before,.drumstage.beating:after{content:"";position:absolute;left:50%;top:52%;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,122,41,.42);transform:translate(-50%,-50%);animation:drumRing 1s ease-out infinite;pointer-events:none}.drumstage.beating:after{animation-delay:.45s;border-color:rgba(240,80,155,.32)}@keyframes drumRing{to{width:300px;height:300px;opacity:0}}
.winnerMoment{position:relative;overflow:hidden}.winnerMoment:after{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 12%,rgba(200,241,53,.08) 12% 15%,transparent 15% 28%,rgba(255,122,41,.08) 28% 31%,transparent 31% 100%);animation:winnerHalo 7s linear infinite;pointer-events:none}@keyframes winnerHalo{to{transform:rotate(360deg)}}

.pricingHero.ultraCompact{max-width:560px;margin-bottom:14px}.pricingHero.ultraCompact>img{width:48px;height:48px;margin-bottom:4px}.pricingHero.ultraCompact h1{font-size:clamp(24px,4.6vw,34px);margin:6px 0}.pricingHero.ultraCompact p{font-size:12.5px}.pricingNotice.slim{max-width:760px;padding:10px 12px;margin-bottom:12px;align-items:center}.pricingNotice.slim p{margin:0;font-size:10.8px}.pricingNotice.slim b{margin-right:5px}
.pricingGridCool.clean{gap:10px}.pricingGridCool.clean .priceCard{padding:17px 15px}.pricingGridCool.clean .priceLine{margin:14px 0 10px}.pricingGridCool.clean .priceLine b{font-size:28px}.pricingGridCool.clean .priceCapacity{font-size:10.5px;padding:9px 0;border-bottom:0}.pricingGridCool.clean .planFor{color:var(--dim);font-size:10.5px;line-height:1.45;min-height:31px;margin:2px 0 13px}.pricingGridCool.clean .saveChip{margin:0 0 8px;padding:4px 7px}.pricingGridCool.clean .priceTag{font-size:8px}.pricingGridCool.clean .priceCta{padding:10px}.interestBadge{display:inline-flex;align-items:center;gap:5px;color:var(--turq);font-size:9px;font-weight:800;margin-top:7px}.interestBadge i{width:6px;height:6px;border-radius:50%;background:var(--turq);box-shadow:0 0 9px rgba(43,217,198,.65)}
@media(max-width:930px){.effectPicker.compactPicker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.crowdFlow{grid-template-columns:1fr 1fr}.effectPicker.compactPicker{grid-template-columns:1fr 1fr}.rafflehero.friendly .rafflelogo{width:46px;height:46px}.magicMode{gap:6px}}

/* Raffle + pricing repair: calm while idle, alive only during interaction */
.pageMark{width:48px;height:48px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,122,41,.12),rgba(43,217,198,.08));border:1px solid rgba(253,244,227,.1);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.pageMark img{width:34px;height:34px;object-fit:contain;display:block}

/* Raffle: remove constant visual noise. Motion happens when Draw is pressed. */
.experienceFrame:before{animation:none!important;opacity:.55!important;transform:none!important}
.fxSparkles{display:none!important}
.winnerMoment:after{animation:none!important;opacity:.55}
.reelMachine.rolling{animation:none!important}
.rafflecards.shuffling{animation:none!important}
.wheelwrap.spin .hubcap{animation:none!important}
.wheelwrap.spin .needle{animation:needleTickSoft .3s ease-in-out infinite!important}
.drumstage.beating .drumicon{animation:drumPulse .62s ease-in-out infinite!important}
.drumstage.beating:before,.drumstage.beating:after{animation-duration:1.45s!important}
@keyframes needleTickSoft{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(5deg)}}

.rafflehero.repaired{margin-bottom:14px;align-items:center}
.rafflehero.repaired .rafflelogo{width:52px;height:52px}
.rafflehero.repaired h1{font-size:clamp(24px,4.4vw,34px);margin:4px 0 6px}
.rafflehero.repaired p{max-width:560px;font-size:12.7px}
.raffleStage{padding:17px!important;border-radius:20px!important;background:radial-gradient(95% 72% at 50% 10%,rgba(43,217,198,.08),transparent 58%),linear-gradient(155deg,#281338,#170a22)!important}
.raffleStageTop.repairedTop{padding:2px 1px 11px;align-items:center}
.raffleStageTop.repairedTop p{margin-top:4px}
.autoReadout{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.autoReadout strong{font-family:'Unbounded','Inter',sans-serif;font-size:11px;color:var(--ink)}
.autoReadout .arr{color:#7f6d92}
.autoReadout .effectNow{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(43,217,198,.1);border:1px solid rgba(43,217,198,.28);color:var(--turq);font-size:10.5px;font-weight:850}
.autoReadout .effectNow i{width:6px;height:6px;border-radius:50%;background:var(--turq)}
.crowdFlow{margin-top:9px}.crowdStep{padding:7px 8px}.crowdStep b{font-size:9px}.crowdStep small{font-size:8.5px}
.effectPicker.compactPicker{margin-top:8px;padding:9px;border-radius:13px;background:rgba(0,0,0,.16);border:1px solid rgba(253,244,227,.06)}

.addPeopleCard{padding:17px!important}
.addWays{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:11px;margin-top:5px}
.addWay{background:rgba(0,0,0,.18);border:1px solid rgba(253,244,227,.08);border-radius:14px;padding:13px;min-width:0}
.addWayHead{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.addWayHead i{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.addWayHead b{font-size:12px;display:block}.addWayHead span{font-size:10.5px;color:var(--dim);display:block;margin-top:2px}
.addWay textarea{min-height:104px;margin:0 0 8px;border-radius:11px}
.addOneRow{display:grid;grid-template-columns:1fr auto;gap:7px}.addOneRow input{margin:0;border-radius:11px}.addOneRow button{border:0;border-radius:11px;background:var(--turq);color:var(--turqT);padding:0 15px;font-weight:850;cursor:pointer}
.importActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.importAction{display:flex;align-items:center;justify-content:center;gap:7px;min-height:43px;border:1px solid var(--panel2);background:#170a22;color:var(--ink);border-radius:11px;font-size:11px;font-weight:750;cursor:pointer;text-align:center;padding:9px}
.importAction:hover{border-color:var(--turq);color:var(--turq)}
.addHint{margin-top:9px;color:#8f7ba1;font-size:10.5px;line-height:1.5}

.experienceFrame{min-height:335px!important;border-radius:20px!important;overflow:hidden}
.raffleEmpty{min-height:300px!important}.raffleEmpty .emptyModes{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}.raffleEmpty .emptyModes span{font-size:9px;padding:6px 8px;border:1px solid var(--panel2);border-radius:999px;color:#907aa3;background:rgba(0,0,0,.18)}
.drawHero{max-width:520px;margin:12px auto 2px!important;border-radius:14px!important;box-shadow:0 12px 28px rgba(255,122,41,.12)}
.drawHero:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.04)}

/* Pricing: informative without turning each card into a wall of text. */
.pricingHero.repairedPricing{max-width:650px;margin-bottom:18px}.pricingHero.repairedPricing>img{width:52px;height:52px;margin-bottom:6px}.pricingHero.repairedPricing h1{font-size:clamp(25px,4.8vw,37px)}.pricingHero.repairedPricing p{max-width:530px;margin:0 auto}
.pricingGridCool.repairedGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.priceCard.repairedCard{padding:18px 16px 16px;display:flex;flex-direction:column;min-height:390px}
.planFor{font-size:11.2px;line-height:1.5;color:var(--dim);min-height:34px;margin:9px 0 3px}
.planIncludes{list-style:none!important;margin:10px 0 16px!important;min-height:0!important;display:flex;flex-direction:column;gap:1px;flex:1}
.planIncludes li{font-size:10.8px!important;padding:4px 0!important;color:var(--dim)!important}.planIncludes li svg{color:var(--lime);flex:0 0 auto}
.priceCapacity{font-size:11px!important}.billingNote{font-size:9.5px;color:#8f7aa2;margin:1px 0 8px}.billingNote b{color:var(--lime)}
.everyPlan{margin:15px 0 2px;padding:15px;border:1px solid rgba(253,244,227,.07);border-radius:15px;background:rgba(0,0,0,.15)}
.everyPlan>div:first-child{font-family:'Unbounded','Inter',sans-serif;font-size:10.5px;font-weight:750;margin-bottom:10px;color:var(--ink)}
.everyPlan .incl{margin-top:0}.everyPlan .incl span{font-size:10.6px;padding:7px 10px;background:rgba(0,0,0,.18)}
.pricingNotice.slimmer{max-width:760px;padding:10px 13px;margin-bottom:14px}.pricingNotice.slimmer p{margin:0;font-size:11.3px}.pricingNotice.slimmer b{color:var(--ink)}
.interestBadge{font-size:9.5px;color:var(--turq);margin:1px 0 9px;display:flex;align-items:center;gap:6px}.interestBadge i{width:6px;height:6px;border-radius:50%;background:var(--turq)}

@media(max-width:930px){.addWays{grid-template-columns:1fr}.pricingGridCool.repairedGrid{grid-template-columns:1fr 1fr}.priceCard.repairedCard{min-height:0}}
@media(max-width:600px){.importActions{grid-template-columns:1fr}.pricingGridCool.repairedGrid{grid-template-columns:1fr}.addOneRow{grid-template-columns:1fr}.addOneRow button{padding:11px}.rafflehero.repaired{align-items:flex-start}.crowdFlow{grid-template-columns:1fr 1fr}.priceCard.repairedCard{min-height:0}}

/* Final approved Pricing page */
.prxPage{width:100%;margin-top:46px;padding-bottom:22px}.prxBrand{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:22px}.prxWord{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:28px;letter-spacing:-1px}.prxWord i{font-style:normal;color:var(--ink)}.prxWord b{color:var(--tang)}.prxGem{width:9px;height:9px;background:var(--lime);transform:rotate(45deg);margin-bottom:9px}.prxHero{text-align:center;max-width:760px;margin:0 auto 24px}.prxKicker{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:2.1px;color:var(--lime)}.prxHero h1{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(28px,5vw,48px);line-height:1.08;letter-spacing:-1.3px;margin:12px 0}.prxHero p{color:var(--dim);font-size:15px;line-height:1.65;max-width:650px;margin:0 auto}.prxToggle{margin:22px auto 0;width:max-content;max-width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(253,244,227,.1);border-radius:14px;padding:5px;display:flex;gap:5px}.prxToggle button{border:0;background:transparent;color:var(--dim);padding:10px 15px;border-radius:10px;cursor:pointer;font-weight:750;font-size:11.5px}.prxToggle button.active{background:var(--panel2);color:var(--ink)}.prxToggle b{color:var(--lime);margin-left:4px}.prxNotice{display:flex;align-items:center;gap:9px;width:min(720px,100%);margin:0 auto 16px;padding:11px 13px;border:1px solid rgba(43,217,198,.22);background:rgba(43,217,198,.065);border-radius:13px;color:var(--dim);font-size:11.8px;line-height:1.45}.prxNotice strong{color:var(--ink)}.prxCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}.prxCard{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 18px;border-radius:19px;background:linear-gradient(160deg,rgba(44,23,56,.96),rgba(34,16,47,.98));border:1px solid rgba(253,244,227,.1);box-shadow:0 18px 48px rgba(0,0,0,.26);transition:transform .2s,border-color .2s}.prxCard:hover{transform:translateY(-3px);border-color:rgba(43,217,198,.38)}.prxCard.hot{border-color:rgba(200,241,53,.58);background:linear-gradient(160deg,rgba(200,241,53,.075),rgba(44,23,56,.98))}.prxCard.current{outline:2px solid var(--turq)}.prxTag{display:inline-flex;width:max-content;max-width:100%;border-radius:999px;padding:5px 8px;font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:8px;letter-spacing:.9px;color:var(--dim);background:rgba(0,0,0,.2)}.prxCard.hot .prxTag{background:var(--lime);color:var(--limeT)}.prxCard.current .prxTag{background:var(--turq);color:var(--turqT)}.prxCard h2{font-family:'Unbounded','Inter',sans-serif;font-size:16px;margin:14px 0 5px}.prxPrice{display:flex;align-items:flex-end;gap:5px;margin:5px 0}.prxPrice strong{font-family:'Unbounded','Inter',sans-serif;font-size:31px;letter-spacing:-1.2px}.prxPrice span{color:var(--dim);font-size:11px;padding-bottom:4px}.prxBilling{font-size:10.8px;color:var(--dim);min-height:17px}.prxBilling b{color:var(--lime)}.prxCapacity{display:flex;align-items:flex-start;gap:7px;margin:16px 0 10px;padding:11px;border-radius:11px;background:rgba(0,0,0,.18);border:1px solid rgba(253,244,227,.065);font-size:11.5px;font-weight:700;line-height:1.4}.prxCapacity svg{color:var(--turq);flex:0 0 auto}.prxWho{font-size:11.5px;line-height:1.5;color:var(--dim);margin-bottom:12px;min-height:35px}.prxCard ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;flex:1}.prxCard li{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.4;color:#e9deef}.prxCard li svg{color:var(--lime);flex:0 0 auto}.prxInterest{font-size:9.8px;color:var(--turq);margin:-4px 0 9px}.prxCta{width:100%;border:1px solid var(--panel2);border-radius:11px;padding:11px;cursor:pointer;font-family:'Unbounded','Inter',sans-serif;font-size:10.2px;font-weight:750;background:var(--panel2);color:var(--ink)}.prxCta.primary{background:var(--lime);border-color:var(--lime);color:var(--limeT)}.prxCta:disabled{opacity:.68;cursor:default}/* Compare plans.

   Four columns and a label will not fit a 390px screen, so the table scrolls
   sideways inside its own box with the row names pinned. That box is essential
   rather than cosmetic: on this site the BODY is the scroll container, so a
   sideways scroller has to own its overflow or the whole page moves with it. */
.prxCompare{margin-top:26px}
.prxCompare h2{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em}
.prxCompare>p{color:var(--dim);font-size:12.4px;line-height:1.6;margin-top:5px}
.prxSr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prxTableWrap{margin-top:14px;overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid rgba(253,244,227,.1);border-radius:16px;background:rgba(0,0,0,.16)}
/* separate, not collapse. A sticky column inside a collapsed table does not
   stay put in Chrome: it reports position sticky and then scrolls away with
   everything else. The row lines are drawn with an inset shadow instead of a
   border so the table looks exactly the same. */
.prxTable{width:100%;border-collapse:separate;border-spacing:0;font-size:12.8px;min-width:520px}
.prxTable th,.prxTable td{padding:11px 13px;text-align:center;vertical-align:middle;
  box-shadow:inset 0 -1px 0 rgba(253,244,227,.07)}
/* The row names stay put while the columns move past them. */
.prxTable tbody th[scope="row"],.prxTable thead th:first-child{
  position:sticky;left:0;z-index:2;text-align:left;font-weight:600;color:#E4D8EE;
  background:#241134;min-width:190px;max-width:230px;
  /* the row line, plus an edge so it reads as pinned once things slide under it */
  box-shadow:inset 0 -1px 0 rgba(253,244,227,.07),1px 0 0 rgba(253,244,227,.09)}
.prxTable thead th{position:sticky;top:0;z-index:3;background:#241134;
  font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:-.01em;
  box-shadow:inset 0 -1px 0 rgba(253,244,227,.16)}
.prxTable thead th:first-child{z-index:4;
  box-shadow:inset 0 -1px 0 rgba(253,244,227,.16),1px 0 0 rgba(253,244,227,.09)}
.prxThName{display:block;color:var(--ink)}
.prxThPrice{display:block;margin-top:3px;font:700 10.5px 'Inter',sans-serif;
  letter-spacing:0;color:var(--dim)}
.prxTable thead th.hot .prxThName{color:var(--lime)}
.prxTable td.hot{background:rgba(200,241,53,.05)}
.prxTable thead th.hot{background:linear-gradient(180deg,rgba(200,241,53,.13),#241134)}
.prxGrp th{text-align:left!important;position:sticky!important;left:0;z-index:2;
  background:rgba(255,255,255,.035)!important;color:var(--dim)!important;
  font:800 9.6px 'Inter',sans-serif!important;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 13px!important}
.prxTable tbody tr:last-child td{box-shadow:none}
.prxTable tbody tr:last-child th[scope="row"]{box-shadow:1px 0 0 rgba(253,244,227,.09)}
.prxTable td b{font-weight:800;color:var(--ink);font-size:13px}
.prxY{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:var(--lime);color:var(--limeT)}
.prxN{color:#6b5877;font-weight:700}
.prxSwipe{margin-top:9px;color:var(--dim);font-size:11.6px}
@media(min-width:820px){ .prxSwipe{display:none} }

.prxEnterprise{margin-top:12px;padding:16px 18px;border-radius:16px;background:linear-gradient(90deg,rgba(255,122,41,.11),rgba(240,80,155,.075));border:1px solid rgba(255,122,41,.24);display:flex;align-items:center;gap:16px;justify-content:space-between}.prxEnterprise span{display:block;color:var(--tang);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:8.5px;letter-spacing:1.3px;margin-bottom:4px}.prxEnterprise b{font-family:'Unbounded','Inter',sans-serif;font-size:14px}.prxEnterprise small{display:block;color:var(--dim);margin-top:4px;font-size:10.8px}.prxEnterprise button{border:0;border-radius:10px;padding:10px 12px;background:var(--tang);color:var(--tangT);font-weight:800;white-space:nowrap}.prxIncludes{margin:24px auto 0;text-align:center;color:var(--dim);font-size:10.8px}.prxIncludes strong{display:block;color:var(--ink);font-family:'Unbounded','Inter',sans-serif;font-size:10px;margin-bottom:9px}.prxIncludes>div{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.prxIncludes span{border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.14);border-radius:999px;padding:7px 10px}
@media(max-width:1000px){.prxCards{grid-template-columns:1fr 1fr}}@media(max-width:580px){.prxPage{margin-top:42px}.prxCards{grid-template-columns:1fr}.prxEnterprise{align-items:flex-start;flex-direction:column}.prxEnterprise button{width:100%}.prxHero p{font-size:13.5px}.prxToggle{width:100%}.prxToggle button{flex:1;padding:10px 7px}.prxCard{padding:18px 16px}}

/* Final approved Raffle page */
.rfPage{width:100%;overflow:visible}.rfPage *{box-sizing:border-box}.rfHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.rfIdentity{display:flex;align-items:center;gap:9px}.rfIdentity img{width:36px;height:36px;border-radius:10px;object-fit:contain}.rfIdentity b{font-family:'Unbounded','Inter',sans-serif;font-size:13px}.rfGhost,.rfMini,.rfPrimary{border-radius:11px;font-weight:750;cursor:pointer}.rfGhost{border:1px solid rgba(253,244,227,.09);background:rgba(255,255,255,.035);color:var(--ink);padding:9px 11px}.rfMini{border:1px solid rgba(253,244,227,.09);background:rgba(255,255,255,.03);color:var(--dim);padding:8px 9px;font-size:10.5px}.rfPrimary{border:0;background:linear-gradient(90deg,var(--lime),#b7e831);color:var(--limeT);padding:11px 14px}.rfPrimary.full{width:100%;margin-top:7px}.rfHero{display:flex;align-items:flex-end;justify-content:space-between;gap:17px;margin-bottom:14px}.rfHero>div:first-child{min-width:0}.rfHero h1{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(26px,4vw,40px);line-height:1.08;letter-spacing:-1px;margin:0}.rfHero p{margin:8px 0 0;color:var(--dim);font-size:13.5px;line-height:1.55;max-width:700px;overflow-wrap:anywhere}.rfPlan{display:flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid rgba(200,241,53,.18);background:rgba(200,241,53,.055);border-radius:999px;padding:8px 10px;font-size:10.5px;color:var(--dim)}.rfPlan strong{color:var(--ink)}.rfLimit{display:flex;gap:9px;align-items:center;background:rgba(255,122,41,.08);border:1px solid rgba(255,122,41,.22);border-radius:12px;padding:10px 11px;margin-bottom:12px;color:var(--dim);font-size:11px}.rfLimit span{flex:1}.rfLimit b{color:var(--ink)}.rfLimit button{border:0;background:var(--tang);color:var(--tangT);border-radius:9px;padding:8px 10px;font-weight:800}.rfLayout{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);gap:14px;align-items:start}.rfPanel{border:1px solid rgba(253,244,227,.085);background:linear-gradient(160deg,rgba(40,20,52,.98),rgba(29,13,40,.98));border-radius:20px;box-shadow:0 20px 55px rgba(0,0,0,.28)}.rfSetup,.rfPreview{padding:16px}.rfPreview{position:sticky;top:12px}.rfSecHead{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px}.rfSecHead>div:first-child{min-width:0}.rfSecHead h2{font-family:'Unbounded','Inter',sans-serif;font-size:12px;margin:0}.rfSecHead p{margin:4px 0 0;color:var(--dim);font-size:10.8px;line-height:1.4}.rfCount{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.18);border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;white-space:nowrap}.rfCount i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(200,241,53,.38)}.rfField{width:100%;border:1px solid rgba(253,244,227,.085);background:#160a1e;color:var(--ink);border-radius:11px;padding:11px 12px;outline:none;font-family:'Inter',sans-serif;font-size:12px;margin:0}.rfField:focus{border-color:rgba(255,122,41,.58);box-shadow:0 0 0 3px rgba(255,122,41,.05)}textarea.rfField{min-height:105px;resize:vertical;line-height:1.5}.rfTitleRow{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:11px}.rfModes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}.rfMode{text-align:left;border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.13);color:var(--ink);border-radius:13px;padding:10px 9px;min-height:70px;cursor:pointer;transition:.17s}.rfMode:hover{transform:translateY(-1px);border-color:rgba(43,217,198,.34)}.rfMode.on{background:linear-gradient(135deg,rgba(43,217,198,.095),rgba(200,241,53,.04));border-color:rgba(43,217,198,.54)}.rfMode i{display:block;font-style:normal;font-size:17px;color:var(--turq);margin-bottom:6px}.rfMode:nth-child(2) i{color:var(--tang)}.rfMode:nth-child(3) i{color:var(--vio)}.rfMode:nth-child(4) i{color:var(--lime)}.rfMode b{display:block;font-size:11px}.rfMode span{display:block;color:var(--dim);font-size:9.5px;margin-top:2px;line-height:1.2}.rfEntry{border:1px solid rgba(253,244,227,.08);border-radius:14px;padding:11px;background:rgba(0,0,0,.105);margin-bottom:10px}.rfAddOne{display:grid;grid-template-columns:1fr auto;gap:7px}.rfUpload{display:block;text-align:center;border:1px dashed rgba(167,139,250,.35);background:rgba(167,139,250,.04);border-radius:12px;padding:20px 12px;cursor:pointer}.rfUpload b{display:block;font-size:11.8px}.rfUpload span{display:block;margin-top:4px;color:var(--dim);font-size:10px}.rfUpload input{display:none}.rfUploadBtn{display:inline-block!important;margin:10px auto 0!important;width:max-content;border:1px solid rgba(253,244,227,.1);border-radius:9px;padding:7px 9px!important;color:var(--ink)!important;background:rgba(255,255,255,.035)}.rfImport{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,122,41,.15);background:rgba(255,122,41,.05);padding:11px;border-radius:11px}.rfImport span{font-size:10.8px;line-height:1.4;color:var(--dim)}.rfImport b{color:var(--ink)}.rfToolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 8px}.rfSearch{position:relative;flex:1;min-width:180px}.rfSearch>span{position:absolute;left:11px;top:9px;color:var(--dim);z-index:2}.rfSearch .rfField{padding-left:31px}.rfNames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:210px;overflow:auto;padding-right:2px}.rfName{min-width:0;display:flex;align-items:center;gap:7px;border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.15);border-radius:10px;padding:7px 8px}.rfName>span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,rgba(255,122,41,.2),rgba(240,80,155,.17));font-size:10px;font-weight:800}.rfName b{flex:1;min-width:0;font-size:10.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rfName button{border:0;background:none;color:var(--dim);font-weight:900;padding:2px}.rfName button:hover{color:var(--mag)}.rfEmptyList{grid-column:1/-1;text-align:center;color:var(--dim);padding:20px 8px;font-size:10.8px}.rfCapacity{margin-top:10px}.rfCapacity>div:first-child{display:flex;justify-content:space-between;gap:10px;color:var(--dim);font-size:9.7px;margin-bottom:5px}.rfMeter{height:5px;background:rgba(0,0,0,.22);border-radius:99px;overflow:hidden}.rfMeter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--turq),var(--lime))}.rfSettings{margin-top:15px;padding-top:14px;border-top:1px solid rgba(253,244,227,.08)}.rfSettingsGrid{display:grid;grid-template-columns:1.08fr .92fr;gap:8px}.rfSetting{border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.11);border-radius:12px;padding:10px}.rfSetting label{display:block;color:var(--dim);font-size:9px;letter-spacing:.55px;font-weight:800;margin-bottom:7px}.rfStepper{display:grid;grid-template-columns:36px minmax(54px,1fr) 36px;border:1px solid rgba(253,244,227,.08);border-radius:10px;overflow:hidden;background:#160a1e}.rfStepper button{border:0;background:rgba(255,255,255,.035);color:var(--ink);font-size:17px}.rfStepper input{width:100%;min-width:0;border:0;border-left:1px solid rgba(253,244,227,.08);border-right:1px solid rgba(253,244,227,.08);background:transparent;color:var(--ink);text-align:center;font-weight:800;outline:none}.rfPresets{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.rfPresets button{border:1px solid rgba(253,244,227,.08);background:transparent;color:var(--dim);border-radius:999px;padding:4px 7px;font-size:9px;font-weight:800}.rfPresets button.on{color:var(--ink);border-color:var(--turq);background:rgba(43,217,198,.06)}.rfSwitchRow{height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px}.rfSwitchRow span{font-size:10.7px}.rfSwitch{width:40px;height:23px;border:0;border-radius:99px;background:var(--panel2);padding:3px}.rfSwitch i{display:block;width:17px;height:17px;border-radius:50%;background:var(--ink);transition:.2s}.rfSwitch.on{background:var(--lime)}.rfSwitch.on i{transform:translateX(17px);background:var(--limeT)}.rfPreviewHead{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px}.rfAuto{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(43,217,198,.22);background:linear-gradient(90deg,rgba(43,217,198,.07),rgba(167,139,250,.04));border-radius:999px;padding:6px 9px;color:var(--dim);font-size:9.8px}.rfAuto strong{color:var(--turq)}.rfMore{position:relative}.rfStyleMenu{position:absolute;right:0;top:40px;z-index:40;width:200px;border:1px solid rgba(253,244,227,.09);background:#24122f;border-radius:13px;padding:6px;box-shadow:0 18px 42px rgba(0,0,0,.4)}.rfStyleMenu button{width:100%;border:0;background:none;color:var(--ink);padding:9px;border-radius:8px;display:flex;justify-content:space-between;gap:7px;font-size:10.5px;font-weight:700}.rfStyleMenu button:hover{background:rgba(255,255,255,.04)}.rfStyleMenu small{color:var(--dim)}.rfWarn{display:flex;gap:7px;align-items:flex-start;color:var(--dim);font-size:10.5px;line-height:1.4;border:1px solid rgba(255,122,41,.18);background:rgba(255,122,41,.05);border-radius:11px;padding:9px;margin-bottom:8px}.rfStage{position:relative;overflow:hidden;min-height:390px;border:1px solid rgba(253,244,227,.09);border-radius:17px;padding:20px 13px;display:grid;place-items:center;background:radial-gradient(350px 230px at 50% 43%,rgba(255,122,41,.125),transparent 67%),radial-gradient(300px 200px at 72% 24%,rgba(43,217,198,.065),transparent 72%),radial-gradient(290px 195px at 26% 70%,rgba(240,80,155,.055),transparent 72%),linear-gradient(180deg,#190b22,#120718)}.rfStage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(135deg,transparent 0 45%,rgba(200,241,53,.03) 45% 50%,transparent 50% 100%),linear-gradient(45deg,transparent 0 45%,rgba(43,217,198,.024) 45% 50%,transparent 50% 100%);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%)}.rfExperience,.rfEmpty,.rfWinner{position:relative;z-index:2;width:100%;text-align:center}.rfStageLabel{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:8.5px;letter-spacing:1.6px;color:var(--dim);margin-bottom:10px}.rfWoven{width:min(320px,84%);height:16px;margin:0 auto 15px;opacity:.4;background:linear-gradient(45deg,transparent 36%,var(--tang) 37% 43%,transparent 44% 56%,var(--turq) 57% 63%,transparent 64%),linear-gradient(-45deg,transparent 36%,var(--lime) 37% 43%,transparent 44% 56%,var(--mag) 57% 63%,transparent 64%);background-size:28px 18px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.rfEmptyIcon{width:70px;height:70px;object-fit:contain;margin:8px auto 12px;opacity:.9}.rfEmpty b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14px;margin-bottom:7px}.rfEmpty small{display:block;max-width:320px;margin:auto;color:var(--dim);font-size:10.8px;line-height:1.5}.rfWheelWrap{position:relative;width:min(280px,70vw);aspect-ratio:1;margin:auto;filter:drop-shadow(0 16px 25px rgba(0,0,0,.32))}.rfWheel{position:absolute;inset:0;border-radius:50%;border:8px solid #2d173b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.11)}.rfWheel.spinning{will-change:transform}.rfPointer{position:absolute;left:50%;top:-2px;transform:translateX(-50%);z-index:5;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:23px solid var(--ink)}.rfWheelHub{position:absolute;inset:38%;z-index:4;border-radius:50%;display:grid;place-items:center;align-content:center;background:#1d0e27;border:5px solid #3a1f49;box-shadow:0 0 17px rgba(0,0,0,.28)}.rfWheelHub span{font-size:7.8px;letter-spacing:1px;color:var(--dim);font-weight:900}.rfWheelHub b{font-family:'Unbounded','Inter',sans-serif;font-size:15px;margin-top:3px}.rfReel{width:min(350px,100%);margin:auto;padding:8px;border-radius:16px;border:1px solid rgba(43,217,198,.23);background:linear-gradient(180deg,#13091a,#251230)}.rfReelRow{height:53px;margin:5px;border-radius:9px;background:rgba(255,255,255,.034);display:flex;align-items:center;justify-content:center;color:var(--dim);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:11.5px}.rfReelRow.focus{color:var(--ink);font-size:14px;border:1px solid rgba(43,217,198,.18);background:linear-gradient(90deg,rgba(43,217,198,.095),rgba(200,241,53,.075))}.rfDeck{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:365px;margin:auto}.rfDrawCard{aspect-ratio:1/.72;border-radius:13px;display:grid;place-items:center;padding:7px;background:linear-gradient(145deg,#342043,#21112c);border:1px solid rgba(253,244,227,.08);font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:9.5px;box-shadow:0 9px 18px rgba(0,0,0,.19)}.rfDrawCard span{color:var(--lime)}.rfDeck.shuffle .rfDrawCard{animation:rfShuffle .5s ease infinite}@keyframes rfShuffle{50%{transform:translateY(-14px) rotate(3deg) scale(1.03)}}.rfDrumScene{position:relative;width:min(320px,76vw);height:270px;margin:auto}.rfDrum{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:205px;height:156px;border-radius:46% 46% 31% 31%;background:linear-gradient(180deg,#e98a52,#c95843 55%,#863151);border:7px solid #4c213b;box-shadow:inset 0 10px 0 rgba(255,255,255,.12),0 21px 34px rgba(0,0,0,.31)}.rfDrum:before{content:"";position:absolute;left:8px;right:8px;top:-22px;height:44px;border-radius:50%;background:#e9c38f;border:7px solid #4c213b;box-shadow:inset 0 0 0 4px rgba(87,41,50,.14)}.rfDrum:after{content:"";position:absolute;left:25px;right:25px;bottom:-15px;height:26px;border-radius:50%;background:#692548}.rfDrumLines{position:absolute;inset:32px 25px 23px;opacity:.4;background:repeating-linear-gradient(60deg,transparent 0 16px,rgba(255,248,234,.36) 16px 18px,transparent 18px 33px)}.rfDrumName{position:absolute;left:25px;right:25px;top:72px;z-index:3;color:#42182b;font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:12px}.rfFloat{position:absolute;border:1px solid rgba(253,244,227,.08);background:rgba(40,20,52,.88);color:var(--dim);padding:5px 7px;border-radius:999px;font-size:9.5px;font-weight:800}.rfFloat.f1{left:4%;top:21%}.rfFloat.f2{right:3%;top:27%}.rfFloat.f3{left:12%;bottom:13%}.rfFloat.f4{right:11%;bottom:11%}.rfDrumScene.beat .rfDrum{animation:rfBeat .27s ease infinite}@keyframes rfBeat{50%{transform:translate(-50%,-50%) scale(1.045)}}.rfWinner small{display:block;color:var(--dim);font-size:9px;letter-spacing:1.2px;font-weight:800;margin:10px 0 5px}.rfWinner>b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:clamp(18px,4vw,25px);margin:5px}.rfWinner>span{color:var(--lime)}.rfWinner em{display:block;color:var(--dim);font-size:9.5px;font-style:normal;margin-top:8px}.rfDraw{width:100%;margin-top:10px;padding:14px 15px;border:0;border-radius:13px;background:linear-gradient(90deg,var(--tang),var(--mag) 52%,var(--vio));color:#2d1020;font-family:'Unbounded','Inter',sans-serif;font-size:11.5px;font-weight:800;box-shadow:0 11px 26px rgba(240,80,155,.13)}.rfDraw:disabled{opacity:.4;cursor:not-allowed}.rfWinnerActions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.rfWinnerActions button{flex:1;min-width:82px;border:1px solid rgba(253,244,227,.08);background:rgba(255,255,255,.03);color:var(--ink);border-radius:9px;padding:8px;font-size:9.8px;font-weight:700}.rfHistory{margin-top:10px;padding-top:10px;border-top:1px solid rgba(253,244,227,.08)}.rfHistory>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}.rfHistory b{font-size:10.5px}.rfHistory button{border:0;background:none;color:var(--dim);font-size:9.5px}.rfHistory>div:last-child{display:flex;gap:5px;flex-wrap:wrap}.rfHistory span{border:1px solid rgba(200,241,53,.18);background:linear-gradient(90deg,rgba(200,241,53,.055),rgba(43,217,198,.035));color:#e5f2bb;border-radius:999px;padding:5px 8px;font-size:9.5px}.rfHistory small{color:var(--dim);font-size:9.7px}.rfSaveNote{margin-top:10px;padding:9px 10px;border-radius:10px;background:rgba(0,0,0,.1);border:1px solid rgba(253,244,227,.07)}.rfSaveNote b{display:block;font-size:10.5px}.rfSaveNote span,.rfSaveNote small{display:block;color:var(--dim);font-size:9.5px;margin-top:3px;line-height:1.35}
@media(max-width:960px){.rfLayout{grid-template-columns:1fr}.rfPreview{position:relative;top:auto}}@media(max-width:650px){.rfHero{align-items:flex-start;flex-direction:column}.rfPlan{white-space:normal}.rfSetup,.rfPreview{padding:13px;border-radius:17px}.rfModes{grid-template-columns:1fr 1fr}.rfTitleRow{grid-template-columns:1fr}.rfTitleRow .rfMini{width:100%}.rfNames{grid-template-columns:1fr;max-height:190px}.rfSettingsGrid{grid-template-columns:1fr}.rfStage{min-height:340px;padding:17px 9px}.rfPreviewHead{align-items:flex-start;flex-wrap:wrap}.rfMore{width:100%}.rfMore>.rfGhost{width:100%}.rfStyleMenu{left:0;right:auto;width:100%}.rfAddOne{grid-template-columns:1fr}.rfAddOne .rfPrimary{width:100%}.rfToolbar{align-items:stretch}.rfSearch{min-width:100%;width:100%}.rfToolbar .rfMini{flex:1}.rfImport{align-items:flex-start;flex-direction:column}.rfImport .rfPrimary{width:100%}.rfHero h1{font-size:clamp(24px,8vw,32px)}.rfHero p{font-size:12.5px}.rfWheelWrap{width:min(250px,76vw)}.rfDeck{grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px}.rfDrumScene{width:min(290px,82vw);height:250px}.rfDrum{width:185px;height:140px}}@media(max-width:350px){.rfModes{grid-template-columns:1fr}.rfToolbar .rfMini{flex-basis:100%}.rfStage{padding-left:7px;padding-right:7px}}

/* Requested final index refinements */

/* Clickability */
button,a[href],a[onclick],[onclick],[role="button"],summary,select,label[for],
input[type="checkbox"],input[type="radio"],input[type="file"]{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed!important}
button,a[href],[onclick],[role="button"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,[onclick]:focus-visible,[role="button"]:focus-visible,
select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--turq);outline-offset:3px
}
@media(hover:hover){
  button:not(:disabled),a[href],[role="button"],[onclick]:not(button):not(a){
    transition:filter .17s ease,border-color .17s ease,background-color .17s ease,color .17s ease,opacity .17s ease,box-shadow .17s ease
  }
  button:not(:disabled):hover,a[href]:hover,[role="button"]:hover,[onclick]:not(button):not(a):hover{
    filter:brightness(1.055)
  }
}

/* Join first, Create second, equal desktop alignment */
@media(min-width:820px){
  .actgrid{align-items:stretch!important}
  .actgrid>.actbox.actzone{height:100%;display:flex;flex-direction:column}
  .actgrid>.actbox.actzone>.bigbtn{min-height:92px;flex:0 0 auto}
  .actgrid>.actbox.actzone>.actsub{
    margin-top:auto;min-height:94px;display:flex;flex-direction:column;justify-content:flex-end
  }
  .actgrid>.actdiv{height:100%!important;align-self:stretch}
}

/* Pricing annual-billing hierarchy */
.prxBilling{min-height:35px;display:flex;flex-direction:column;justify-content:flex-start;gap:3px}
.prxAnnualBill{display:block;color:#b8a9bf;font-size:10.8px;font-weight:650;line-height:1.35}
.prxBilling b{display:block;color:var(--lime);font-size:10px;font-weight:850}

/* Sophisticated raffle treatment: indigo, warm brass and restrained geometry */
.raffleStage{
  position:relative;
  background:
    radial-gradient(circle at 83% 19%,rgba(43,217,198,.055) 0 1.5px,transparent 2px),
    radial-gradient(circle at 18% 78%,rgba(224,130,82,.05) 0 1.4px,transparent 1.9px),
    radial-gradient(70% 58% at 50% 42%,rgba(83,72,143,.18),transparent 72%),
    linear-gradient(158deg,#181027 0%,#130b20 52%,#100817 100%)!important;
  background-size:31px 31px,41px 41px,auto,auto!important;
  border-color:rgba(126,111,169,.20)!important;
  box-shadow:inset 0 0 80px rgba(41,31,71,.22),0 18px 46px rgba(0,0,0,.18)
}
.raffleStage:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
  background:
    linear-gradient(45deg,transparent 0 48.5%,rgba(43,217,198,.075) 48.5% 49.5%,transparent 49.5% 100%),
    linear-gradient(-45deg,transparent 0 48.5%,rgba(201,167,90,.05) 48.5% 49.5%,transparent 49.5% 100%);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.3) 65%,transparent)
}
.raffleStage>*{position:relative;z-index:1}
.rfWoven{
  height:7px!important;opacity:.38!important;border-radius:999px;
  background:repeating-linear-gradient(90deg,#4FAFA8 0 18px,#171026 18px 24px,#C9A75A 24px 38px,#171026 38px 44px,#B85470 44px 60px,#171026 60px 66px)!important;
  filter:saturate(.68) brightness(.86)
}
.rfStageLabel{color:#c5b7cc!important;letter-spacing:1.7px!important;font-size:8.8px!important}
.raffleStageTop{border-bottom-color:rgba(253,244,227,.075)!important}
.raffleStageTop strong{color:#D7B663!important}
.autoDot{background:#4FAFA8!important;box-shadow:0 0 12px rgba(79,175,168,.5)!important}
.rfWheel{
  filter:saturate(.76) brightness(.92);
  border-color:#3b2e51!important;
  box-shadow:0 22px 54px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.06)!important
}
.rfWheelHub{background:linear-gradient(180deg,#1d1429,#130c1e)!important;border-color:rgba(215,182,99,.30)!important}
.rfWheelHub span{color:#bbaec3!important}
.rfPointer{filter:saturate(.72)}
.rfReel{
  border-color:rgba(79,175,168,.22)!important;
  background:linear-gradient(180deg,#121024,#19132f)!important;
  box-shadow:inset 0 0 44px rgba(0,0,0,.44),0 18px 42px rgba(0,0,0,.22)!important
}
.rfReelRow{border-color:rgba(255,255,255,.05)!important;background:rgba(255,255,255,.025)!important}
.rfReelRow.focus{
  background:linear-gradient(90deg,rgba(79,175,168,.10),rgba(201,167,90,.09))!important;
  border-color:rgba(201,167,90,.25)!important
}
.rfDrawCard{
  min-height:122px!important;
  background:linear-gradient(155deg,rgba(83,72,143,.20),rgba(20,12,31,.96))!important;
  border:1px solid rgba(201,167,90,.14)!important;
  box-shadow:0 16px 32px rgba(0,0,0,.24)!important
}
.rfDrawCard .rfCardNo{
  font-family:'Unbounded','Inter',sans-serif;font-size:9px;letter-spacing:1.5px;color:#D7B663;opacity:.8
}
.rfDrawCard b{font-size:11.5px!important;color:#f1e8f2!important}
.rfDeck.shuffle .rfDrawCard{filter:saturate(.72)}
.rfDrawCard.landed{
  border-color:#D7B663!important;
  background:linear-gradient(155deg,rgba(201,167,90,.15),rgba(79,175,168,.09),#181025)!important;
  box-shadow:0 0 34px rgba(201,167,90,.13)!important
}
.rfDrumScene{position:relative;min-height:300px;display:grid;place-items:center}
.rfDrumHalo{
  position:absolute;width:280px;height:280px;border-radius:50%;
  border:1px solid rgba(201,167,90,.10);
  box-shadow:0 0 0 34px rgba(79,175,168,.025),0 0 0 68px rgba(83,72,143,.025)
}
.rfDrum{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;
  border-color:rgba(201,167,90,.20)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 24px 58px rgba(0,0,0,.30)!important
}
.rfDrumLines{opacity:.48!important;filter:saturate(.58)}
.rfDrumMark{
  font-family:'Unbounded','Inter',sans-serif;font-size:7.5px;letter-spacing:2px;color:#9f8ca9;margin-bottom:8px
}
.rfDrumName{color:#D7B663!important}
.rfDrumScene.beat .rfDrum{animation:otiyaDrumPremium .44s cubic-bezier(.25,.8,.25,1) infinite alternate}
@keyframes otiyaDrumPremium{to{transform:translateY(-4px) scale(1.018)}}
.winnerMoment{
  background:linear-gradient(120deg,rgba(201,167,90,.10),rgba(79,175,168,.075))!important;
  border-color:rgba(201,167,90,.56)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.18)
}
.winnerMoment>span{color:#D7B663!important}

/* Mobile footer */
@media(max-width:559px){
  .bigfoot{padding:24px 18px 18px!important}
  .bigfoot .cols{
    grid-template-columns:1fr 1fr!important;
    column-gap:24px!important;row-gap:26px!important;align-items:start
  }
  .bigfoot .cols>div:nth-child(5){grid-column:1/-1;padding-top:1px}
  .bigfoot h5{margin:0 0 11px!important;font-size:10px!important;letter-spacing:1.25px!important}
  .bigfoot a{margin-bottom:9px!important;line-height:1.4}
  .bigfoot .socrow{gap:20px!important;margin-top:8px!important}
  .bigfoot .base{margin-top:25px!important;padding-top:17px!important;line-height:1.55!important}
}
@media(max-width:360px){.bigfoot .cols{column-gap:16px!important}}

/* -----------------------------------------------------------
   Otiya wordmark
   No visible image dependency. Diamond sits at the upper-right
   of "ya", matching the supplied reference.
   ----------------------------------------------------------- */
.otiyaWordmark{
  --ow-size:32px;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  font-family:'Comfortaa','Inter',sans-serif;
  font-size:var(--ow-size);
  font-weight:700;
  line-height:1;
  letter-spacing:-.045em;
  text-shadow:0 0 34px rgba(255,122,41,.14);
}
.otiyaWordmark .owOti{color:var(--ink)}
.otiyaWordmark .owYa{color:var(--tang)}
.otiyaWordmark .owGem{
  display:inline-block;
  flex:0 0 auto;
  width:.29em;
  height:.29em;
  margin-left:.19em;
  background:var(--lime);
  border-radius:.015em;
  transform:translateY(-.49em) rotate(45deg);
  transform-origin:center;
  box-shadow:0 0 16px rgba(200,241,53,.12);
}
.logo .otiyaWordmark{margin-inline:auto}
.logo .tag{margin-top:8px}

/* Remove the old separate logo-icon visual treatment */
.logo>img{display:none!important}
.pageMark.wordmarkPage{
  width:max-content!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto 14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.pageMark.wordmarkPage img{display:none!important}

/* Raffle/header identity now uses the same correct wordmark */
.rfIdentity{
  gap:11px!important;
}
.rfIdentity .raffleWordmark{
  flex:0 0 auto;
}
.rfIdentity>b{
  padding-left:10px;
  border-left:1px solid rgba(253,244,227,.12);
  line-height:1.25;
}
.rfEmptyBrand{
  margin:10px auto 15px;
  min-height:45px;
  display:grid;
  place-items:center;
}
.rfEmptyIcon{display:none!important}

/* Admin instances use the same brand rather than broken image files */
.adminBrand{
  align-items:center!important;
}
.adminBrand>img,
.adminLoading>img,
.adminDenied>img{display:none!important}
.adminBrand .adminWordmark{
  flex:0 0 auto;
  margin-right:2px;
}
.adminLoading .otiyaWordmark,
.adminDenied .otiyaWordmark{
  display:flex;
  width:max-content;
  margin:0 auto 17px;
}

/* -----------------------------------------------------------
   Raffle visual system
   Mature, tactile and restrained. No cartoon illustrations.
   ----------------------------------------------------------- */
.rfStage{
  background:
    radial-gradient(ellipse at 50% 115%,rgba(0,0,0,.52) 0 9%,transparent 36%),
    radial-gradient(circle at 83% 18%,rgba(43,217,198,.045) 0 1.3px,transparent 1.8px),
    radial-gradient(circle at 17% 77%,rgba(201,167,90,.038) 0 1.1px,transparent 1.7px),
    radial-gradient(75% 58% at 50% 39%,rgba(78,66,124,.18),transparent 70%),
    linear-gradient(155deg,#171024 0%,#120a1d 56%,#0d0713 100%)!important;
  background-size:auto,34px 34px,43px 43px,auto,auto!important;
  border-color:rgba(174,153,196,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 80px rgba(31,21,47,.25),
    0 22px 52px rgba(0,0,0,.23)!important;
}
.rfStage:before{
  opacity:.15!important;
  background:
    linear-gradient(45deg,transparent 0 49%,rgba(79,175,168,.065) 49% 50%,transparent 50% 100%),
    linear-gradient(-45deg,transparent 0 49%,rgba(201,167,90,.045) 49% 50%,transparent 50% 100%)!important;
  background-size:58px 58px!important;
}
.rfWoven{
  width:min(330px,82%)!important;
  height:5px!important;
  margin-bottom:21px!important;
  opacity:.58!important;
  background:
    repeating-linear-gradient(
      90deg,
      #4a9f9a 0 22px,
      transparent 22px 28px,
      #b79254 28px 43px,
      transparent 43px 50px,
      #93465f 50px 66px,
      transparent 66px 73px
    )!important;
  border-radius:999px;
  filter:saturate(.58) brightness(.86);
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)!important;
}

/* Wheel: weighted, physical and premium rather than toy-like */
.rfWheelWrap{
  width:min(286px,70vw)!important;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.37))!important;
}
.rfWheel{
  border:10px solid #28202f!important;
  outline:1px solid rgba(201,167,90,.38);
  outline-offset:-5px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.055),
    inset 0 0 0 7px rgba(0,0,0,.14),
    0 0 0 1px rgba(0,0,0,.7)!important;
}
.rfWheelHub{
  inset:37.5%!important;
  border:1px solid rgba(211,181,119,.42)!important;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(145deg,#29212f,#15111a)!important;
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.17),
    0 7px 16px rgba(0,0,0,.36)!important;
}
.rfPointer{
  top:-5px!important;
  border-left-width:10px!important;
  border-right-width:10px!important;
  border-top:23px solid #c4a15d!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))!important;
}

/* Name reel: more like a physical event-board viewport */
.rfReel{
  padding:10px!important;
  border:1px solid rgba(186,158,103,.22)!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 12% 88%,rgba(255,255,255,.018)),
    linear-gradient(180deg,#121019,#1a1421)!important;
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,.16),
    inset 0 20px 35px rgba(0,0,0,.28),
    0 18px 34px rgba(0,0,0,.24)!important;
}
.rfReelRow{
  border:1px solid rgba(255,255,255,.045)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.015))!important;
}
.rfReelRow.focus{
  color:#f3eadc!important;
  border-color:rgba(201,167,90,.28)!important;
  background:
    linear-gradient(90deg,rgba(79,175,168,.075),rgba(201,167,90,.10),rgba(79,175,168,.065))!important;
  box-shadow:inset 0 0 18px rgba(201,167,90,.035);
}

/* Cards: matte material with restrained textile grain */
.rfDrawCard{
  position:relative;
  overflow:hidden;
  min-height:122px!important;
  border-radius:11px!important;
  border:1px solid rgba(195,165,107,.18)!important;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px),
    linear-gradient(150deg,#2c2232,#17121c 70%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 29px rgba(0,0,0,.27)!important;
}
.rfDrawCard:before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(201,167,90,.10);
  border-radius:7px;
  pointer-events:none;
}
.rfDrawCard .rfCardNo{
  font-size:8px!important;
  letter-spacing:1.7px!important;
  color:#b99a5d!important;
  opacity:.88!important;
}
.rfDrawCard b{
  position:relative;
  z-index:1;
  font-size:11px!important;
  color:#f2eaf2!important;
}
.rfDeck.shuffle .rfDrawCard{
  animation:rfShuffleMature .55s cubic-bezier(.25,.8,.25,1) infinite!important;
}
@keyframes rfShuffleMature{
  50%{transform:translateY(-9px) rotateY(7deg) scale(1.018)}
}

/* Drum: tactile hourglass drum with leather head, wood shell and cord lacing */
.rfDrumScene{
  width:min(340px,78vw)!important;
  height:292px!important;
  display:grid!important;
  place-items:center!important;
}
.rfDrumShadow{
  position:absolute;
  left:50%;
  top:77%;
  transform:translateX(-50%);
  width:230px;
  height:34px;
  border-radius:50%;
  background:rgba(0,0,0,.44);
  filter:blur(12px);
}
.rfDrum{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:220px!important;
  height:205px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.34));
}
.rfDrum:before,
.rfDrum:after{
  content:none!important;
}
.rfDrumShell{
  position:absolute;
  inset:19px 24px 15px;
  clip-path:polygon(7% 0,93% 0,69% 50%,82% 100%,18% 100%,31% 50%);
  background:
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 22%,rgba(255,255,255,.05) 48%,transparent 72%,rgba(0,0,0,.24)),
    linear-gradient(180deg,#6e452f 0%,#4a2b25 46%,#6a3d2b 100%);
  border-top:2px solid rgba(207,170,105,.43);
  border-bottom:3px solid #2a1919;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.34),
    inset 8px 0 12px rgba(255,255,255,.02);
}
.rfDrumHead{
  position:absolute;
  z-index:3;
  left:12px;
  right:12px;
  top:2px;
  height:52px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 42% 34%,rgba(255,255,255,.26),transparent 27%),
    radial-gradient(ellipse at center,#decbaa 0%,#c7ad86 67%,#8c6b4d 100%);
  border:5px solid #38231d;
  box-shadow:
    inset 0 -6px 10px rgba(85,57,39,.16),
    0 4px 0 #9a724d,
    0 8px 8px rgba(0,0,0,.22);
}
.rfDrumLines{
  position:absolute!important;
  z-index:4;
  inset:24px 26px 18px!important;
  opacity:.78!important;
  background:
    repeating-linear-gradient(67deg,transparent 0 20px,rgba(211,177,117,.65) 20px 22px,transparent 22px 41px),
    repeating-linear-gradient(-67deg,transparent 0 20px,rgba(211,177,117,.56) 20px 22px,transparent 22px 41px)!important;
  clip-path:polygon(0 0,100% 0,76% 50%,91% 100%,9% 100%,24% 50%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))!important;
}
.rfDrumMark{
  position:absolute;
  z-index:6;
  left:50%;
  top:89px;
  transform:translateX(-50%);
  width:max-content;
  font-size:7px!important;
  letter-spacing:2.1px!important;
  color:#d1b374!important;
  text-shadow:0 2px 5px rgba(0,0,0,.5);
}
.rfDrumName{
  position:absolute!important;
  z-index:6!important;
  left:50%!important;
  right:auto!important;
  top:112px!important;
  transform:translateX(-50%);
  width:124px;
  color:#f3eadc!important;
  font-size:11px!important;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.rfDrumScene.beat .rfDrum{
  animation:rfDrumPhysical .42s cubic-bezier(.3,.75,.35,1) infinite alternate!important;
}
@keyframes rfDrumPhysical{
  to{transform:translateY(-4px) rotate(.35deg)}
}

/* Winner state: premium rather than toy-like */
.rfWinner>span{
  color:#c6a45f!important;
}
.rfWinner>b{
  color:#f5edf4;
}
.rfDraw{
  background:
    linear-gradient(90deg,#d47749 0%,#b94e6e 48%,#75629b 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 28px rgba(45,18,47,.24)!important;
}

/* Small screen logo spacing */
@media(max-width:559px){
  .rfIdentity{
    align-items:center;
  }
  .rfIdentity .raffleWordmark{
    --ow-size:22px!important;
  }
}

/* Exact Otiya diamond placement based on the supplied reference.
   The diamond sits close to the 'a' and slightly above the bowl,
   not floating high above or far to the right. */

/* Main existing Otiya logo */
.logo .gem{
  width:.29em!important;
  height:.29em!important;
  margin-left:.06em!important;
  vertical-align:.28em!important;
  transform:rotate(45deg)!important;
}

/* How-it-works / inline Otiya wordmark */
.hiw-olw .gem{
  width:.29em!important;
  height:.29em!important;
  margin-left:.06em!important;
  vertical-align:.28em!important;
  transform:rotate(45deg)!important;
}

/* New reusable wordmark used on page marks, raffle and admin states in index */
.otiyaWordmark .owGem{
  width:.29em!important;
  height:.29em!important;
  margin-left:.06em!important;
  transform:translateY(-.28em) rotate(45deg)!important;
}

/* Pricing wordmark uses the same visual geometry at its 28px scale */
.prxBrand{
  gap:0!important;
  align-items:baseline!important;
}
.prxGem{
  width:8.1px!important;
  height:8.1px!important;
  margin-left:1.7px!important;
  margin-bottom:0!important;
  transform:translateY(-7.8px) rotate(45deg)!important;
  flex:0 0 auto;
}

/* Homepage capacity copy */
.heroPlanCopy{
  position:relative;z-index:2;
  max-width:560px;margin:17px auto 0;text-align:center;
  display:grid;gap:5px;
}
.heroPlanCopy strong{
  font-family:'Unbounded','Inter',sans-serif;
  font-size:clamp(16px,2.3vw,22px);
  line-height:1.22;letter-spacing:-.025em;
  color:var(--ink)
}
.heroPlanCopy span{
  color:#ded2e2;font-size:13.5px;font-weight:650;line-height:1.5
}
.heroPlanCopy small{
  display:inline-block;width:max-content;max-width:100%;margin:4px auto 0;
  padding:7px 10px;border:1px solid rgba(43,217,198,.16);
  border-radius:999px;background:rgba(43,217,198,.045);
  color:#aa9ab4;font-size:10.5px;line-height:1.35;font-weight:700
}

/* Draw duration control */
.rfDuration{grid-column:1/-1}
.rfDurationRow{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.rfDurationPresets{display:flex;gap:5px;flex-wrap:wrap}
.rfDurationPresets button{
  min-width:43px;border:1px solid rgba(253,244,227,.09);
  background:rgba(255,255,255,.025);color:var(--dim);
  border-radius:9px;padding:8px 9px;font-weight:800;font-size:9.7px
}
.rfDurationPresets button:hover{border-color:rgba(43,217,198,.32);color:var(--ink)}
.rfDurationPresets button.on{background:rgba(43,217,198,.09);border-color:rgba(43,217,198,.48);color:var(--turq)}
.rfDurationCustom{
  display:grid!important;grid-template-columns:auto 62px auto;align-items:center;gap:6px;
  margin:0!important;color:var(--dim)!important;font-size:9px!important;letter-spacing:0!important
}
.rfDurationCustom input{
  width:62px;height:34px;border:1px solid rgba(253,244,227,.09);
  border-radius:9px;background:#160a1e;color:var(--ink);text-align:center;font-weight:850;outline:none
}
.rfDurationCustom input:focus{border-color:rgba(43,217,198,.45)}
.rfDuration>small{display:block;color:#74667d;font-size:9.4px;line-height:1.4;margin-top:7px}

/* Physical colourful wheel */
.rfWheelWrap{
  width:min(300px,72vw)!important;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.42))!important;
  margin:12px auto 4px!important
}
.rfWheelStand{
  position:absolute;left:50%;bottom:-54px;transform:translateX(-50%);
  width:130px;height:72px;z-index:-1;
  background:linear-gradient(180deg,#35253d,#160e1a);
  clip-path:polygon(32% 0,68% 0,100% 100%,0 100%);
  border-bottom:2px solid rgba(199,162,92,.32)
}
.rfWheel{
  overflow:hidden;
  border:12px solid #241a28!important;
  outline:1px solid rgba(199,162,92,.40)!important;
  outline-offset:-6px!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    inset 0 0 0 8px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.7)!important
}
.rfWheel:after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle at 36% 27%,rgba(255,255,255,.13),transparent 26%);
  pointer-events:none
}
.rfWheelLabel{
  position:absolute;left:50%;top:50%;
  width:72px;margin-left:-36px;margin-top:-7px;
  text-align:center;color:#fff8ef;
  font:800 8px 'Inter',sans-serif;
  text-shadow:0 2px 5px rgba(0,0,0,.62);
  transform:rotate(var(--a)) translateY(-111px) rotate(var(--neg));
  transform-origin:center center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  z-index:2
}
.rfPointer{
  top:-9px!important;
  border-left-width:11px!important;border-right-width:11px!important;
  border-top:27px solid #c7a25c!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))!important
}
.rfWheelHub{
  inset:38%!important;
  border:2px solid rgba(205,173,108,.50)!important;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.13),transparent 26%),
    linear-gradient(145deg,#3a2940,#151018)!important;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.15),0 9px 20px rgba(0,0,0,.40)!important
}
.rfWheel.spinning + .rfWheelHub span{color:#dcc791!important}

/* Reel gains more physical depth */
.rfReel{
  padding:10px!important;border-radius:19px!important;
  border:1px solid rgba(66,203,187,.24)!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 12% 88%,rgba(255,255,255,.018)),
    linear-gradient(180deg,#121019,#1a1421)!important;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.17),inset 0 22px 38px rgba(0,0,0,.30),0 20px 38px rgba(0,0,0,.27)!important
}
.rfReelRow.focus{
  background:linear-gradient(90deg,rgba(66,203,187,.10),rgba(116,97,184,.11),rgba(216,79,131,.10))!important;
  border-color:rgba(66,203,187,.29)!important
}

/* Cards stay colourful but matte */
.rfDrawCard:nth-child(3n+1){background:repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px),linear-gradient(155deg,#3b2632,#1a111b 72%)!important}
.rfDrawCard:nth-child(3n+2){background:repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px),linear-gradient(155deg,#242d36,#11181c 72%)!important}
.rfDrawCard:nth-child(3n){background:repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px),linear-gradient(155deg,#2d2742,#151321 72%)!important}
.rfDrawCard .rfCardNo{color:#d3b26e!important}

/* Realistic top-mouth drum */
.rfDrumScene{
  width:min(350px,82vw)!important;height:318px!important;
  display:grid!important;place-items:center!important;position:relative!important
}
.rfDrumShadow{
  position:absolute!important;left:50%!important;top:auto!important;bottom:11px!important;
  transform:translateX(-50%)!important;width:245px!important;height:38px!important;
  background:rgba(0,0,0,.48)!important;border-radius:50%!important;filter:blur(12px)!important
}
.rfDrum{
  position:absolute!important;left:50%!important;top:auto!important;bottom:0!important;
  transform:translateX(-50%)!important;width:245px!important;height:auto!important;
  filter:drop-shadow(0 22px 23px rgba(0,0,0,.38))!important
}
.rfDrum svg{display:block;width:100%;height:auto}
.rfDrumScene.beat .rfDrum{animation:rfDrumRealBeat .22s ease-in-out infinite alternate!important}
@keyframes rfDrumRealBeat{to{transform:translateX(-50%) translateY(-3px) scale(1.01)}}
.rfDrumName{
  position:absolute!important;left:0!important;right:0!important;top:14px!important;
  transform:none!important;width:auto!important;
  color:#e7d7c2!important;font:850 13px 'Inter',sans-serif!important;
  text-align:center!important;text-shadow:0 4px 10px rgba(0,0,0,.70)!important
}
.rfDrumScene.beat .rfDrumName{filter:blur(.55px)}
.rfDrumStatus{
  position:absolute;left:50%;top:5px;transform:translateX(-50%);
  z-index:8;color:#a99476;font:850 8px 'Inter',sans-serif;letter-spacing:1.25px;
  text-transform:uppercase;white-space:nowrap
}

/* Winner crown is anchored to the winning name */
.rfWinner{display:grid;place-items:center;min-height:270px}
.rfWinnerStack{
  position:relative;width:min(92%,520px);padding-top:43px;text-align:center
}
.rfWinnerCrown{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:42px;height:34px;color:#c7a25c!important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.35))
}
.rfWinnerStack>small{margin:5px 0 9px!important;letter-spacing:2px!important}
.rfWinnerNames{display:grid;gap:7px}
.rfWinnerNames b{
  display:block!important;margin:0!important;
  font-size:clamp(24px,5vw,42px)!important;
  line-height:1!important;letter-spacing:-.035em!important;color:#f7efe8!important;
  overflow-wrap:anywhere
}
.rfWinnerRule{display:block;width:62px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#c7a25c,transparent)}
.rfWinnerStack>em{margin-top:9px!important;color:#8f8193!important;font-size:9px!important}

@media(max-width:650px){
  .heroPlanCopy{max-width:94%}
  .heroPlanCopy small{width:auto}
  .rfDurationRow{align-items:flex-start;flex-direction:column}
  .rfWheelLabel{transform:rotate(var(--a)) translateY(-94px) rotate(var(--neg));font-size:7px}
  .rfDrumScene{height:290px!important}
  .rfDrum{width:220px!important}
}

.rfDrumScene.landed .rfDrumStatus{opacity:0;transition:opacity .18s ease}
.rfDrumScene.landed .rfDrumName{
  filter:none!important;
  animation:rfNameFromDrum .62s cubic-bezier(.16,.84,.24,1) forwards!important;
  position:relative!important;
  z-index:12!important;
}
@keyframes rfNameFromDrum{
  0%{transform:translateY(0) scale(.96);opacity:.78}
  58%{opacity:1}
  100%{transform:translateY(-78px) scale(1.32);opacity:1;color:#f7efe8}
}

/* Everything was on screen at once, which made the setup page feel like a form
   rather than a stage. The settings fold away and summarise themselves. */
.rfSettingsToggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:0;background:transparent;color:var(--ink);cursor:pointer;
  padding:2px 0 11px;text-align:left
}
.rfSettingsToggle h2{font-family:'Unbounded','Inter',sans-serif;font-size:12px;margin:0}
.rfSettingsToggle p{margin:4px 0 0;color:var(--dim);font-size:10.5px;line-height:1.4}
.rfChev{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.04);color:var(--dim);
  transform:rotate(90deg);transition:transform .26s ease,color .2s,background .2s
}
.rfSettingsToggle:hover .rfChev{color:var(--turq);background:rgba(43,217,198,.09)}
.rfSettings.open .rfChev{transform:rotate(-90deg);color:var(--turq)}

/* Collapsed by default. Grid rows animate cleanly where supported, and the
   fallback is simply hidden rather than half-drawn. */
.rfSettings .rfSettingsGrid{
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;
  transition:grid-template-rows .3s ease,opacity .22s ease,visibility .3s
}
.rfSettings.open .rfSettingsGrid{grid-template-rows:1fr;opacity:1;visibility:visible}
.rfSettings .rfSettingsGrid > *{min-height:0;overflow:hidden}
@supports not (grid-template-rows:0fr){
  .rfSettings .rfSettingsGrid{display:none}
  .rfSettings.open .rfSettingsGrid{display:grid;grid-template-columns:1.08fr .92fr}
}
.rfSettings.open .rfSettingsGrid{
  grid-template-columns:1.08fr .92fr;gap:8px
}
@media(max-width:560px){.rfSettings.open .rfSettingsGrid{grid-template-columns:1fr}}

/* Six tiles rather than four plus two buttons. The two actions keep the same
   footprint as a pack so the block reads as one grid, and carry their own tint
   so they still read as actions. */
.tgrid .tcard{min-height:66px;padding:12px 13px;gap:11px}
.tgrid .tchip{width:40px;height:40px}
.tgrid .tname{font-size:13px}
.tgrid .tsub2{font-size:11px;margin-top:3px}

.tact{border-width:1.5px!important}
.tact .tchip{display:grid;place-items:center}
.tact-turq{
  border-color:rgba(43,217,198,.55)!important;
  background:linear-gradient(150deg,rgba(43,217,198,.16),rgba(43,217,198,.05))!important
}
.tact-turq:hover{background:rgba(43,217,198,.24)!important;border-color:var(--turq)!important}
.tact-turq .tchip{background:var(--turq);color:var(--turqT)}
.tact-turq .tgo{color:var(--turq)}
.tact-mag{
  border-color:rgba(240,80,155,.55)!important;
  background:linear-gradient(150deg,rgba(240,80,155,.16),rgba(240,80,155,.05))!important
}
.tact-vio{
  border-color:rgba(167,139,250,.55)!important;
  background:linear-gradient(150deg,rgba(167,139,250,.16),rgba(167,139,250,.05))!important
}
.tact-mag:hover{background:rgba(240,80,155,.24)!important;border-color:var(--mag)!important}
.tact-mag .tchip{background:var(--mag);color:var(--magT)}
.tact-mag .tgo{color:var(--mag)}

/* Text sits level with the tile block rather than starting at the top. */
@media(min-width:900px){
  .secSplit{align-items:center}
  .secSplit .sechead{position:static}
}

/* ---------------------------------------------------------------------------
   Section header beside its content on desktop.

   The header paragraph is capped at 620px for readability, which is correct,
   but in a full width card it left a third of the row empty. Putting the header
   in its own column means the whitespace becomes a deliberate margin and the
   content fills the rest of the row.

   Below 900px this collapses to a single column, which is exactly the stacked
   layout that was there before, so nothing about mobile changes.
--------------------------------------------------------------------------- */
.secSplit{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.secSplitBody{min-width:0}
@media(min-width:900px){
  .secSplit{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:34px}
  .secSplit .sechead{margin-bottom:0;position:sticky;top:14px}
  /* In its own column the paragraph no longer needs an arbitrary cap. */
  .secSplit .sechead p{max-width:none}
}
@media(min-width:1180px){
  .secSplit{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:42px}
}

/* The fact pills used the same muted colour as the paragraph above them, so
   they read as more body text rather than as separate facts. Each now carries
   its own accent on the icon and a faint tint of the same hue. */
.heropill{
  color:var(--ink)!important;font-weight:700;font-size:12.2px;
  padding:9px 13px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  /* No accent by default. Only the hero fact pills opt in, via .factPills. */
  border:1.5px solid rgba(253,244,227,.14)!important
}
.factPills .heropill{border-color:var(--hp,rgba(253,244,227,.14))!important}
.factPills .heropill svg{color:var(--hp,var(--turq));flex:none}
.factPills .heropill:hover{transform:translateY(-2px);border-color:var(--hp,var(--turq))!important}
.factPills .heropill:nth-of-type(1){--hp:rgba(200,241,53,.55)}
.factPills .heropill:nth-of-type(1) svg{color:var(--lime)}
.factPills .heropill:nth-of-type(2){--hp:rgba(255,122,41,.55)}
.factPills .heropill:nth-of-type(2) svg{color:var(--tang)}
.factPills .heropill:nth-of-type(3){--hp:rgba(43,217,198,.55)}
.factPills .heropill:nth-of-type(3) svg{color:var(--turq)}
.factPills .heropill:nth-of-type(4){--hp:rgba(240,80,155,.55)}
.factPills .heropill:nth-of-type(4) svg{color:var(--mag)}
@media(max-width:430px){.heropill{font-size:11px;padding:8px 11px}}

/* Packs that carry blanks for the host to fill in. The label and the notice are
   there so nobody hosts a quiz that still says [PARTNER A] on everyone's phone. */
.tplTag{
  display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font:800 10px 'Inter',sans-serif;letter-spacing:.4px;
  color:var(--tang)
}
.tplTag:before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--tang);flex:none
}

.tplNote{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 15px;margin:0 0 12px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,122,41,.13),rgba(240,80,155,.05));
  border:1px solid rgba(255,122,41,.34)
}
.tplNoteIc{flex:none;color:var(--tang);line-height:0;margin-top:1px}
.tplNote b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:13px;font-weight:700;margin-bottom:4px}
.tplNote p{margin:0;font-size:12.2px;line-height:1.6;color:var(--dim)}
.tplNoteHint{display:block;margin-top:7px;font-size:11px;font-weight:700;color:var(--tang)}

/* The recommended action gets the emphasis when a pack needs filling in. */
.sopt-primary{border-color:rgba(240,80,155,.5)!important;background:rgba(240,80,155,.07)!important}

/* Host live, held back rather than hidden, so it is obvious it exists. */
.sopt-locked{
  opacity:.55;cursor:not-allowed!important;
  border-style:dashed!important
}
.sopt-locked:hover{transform:none!important;background:inherit!important}
.sopt-locked:active{transform:none!important}
.tplLock{color:var(--mute);line-height:0;flex:none}

/* Near or far.

   The header spans the section exactly like every other one, so the shared left
   edge cannot drift. The paragraph is deliberately not capped here: a narrow
   paragraph inside a wide column was what created the dead strip that pushed
   the pills away in the first place.

   The four platforms sit in one even row underneath, in the site's standard
   sliced-corner shape rather than as rounded pills, so they match the template
   cards and the buttons. */
.nfPills{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px
}
@media(min-width:760px){.nfPills{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media(max-width:400px){.nfPills{grid-template-columns:1fr}}

/* Square off the pill: the shared cut10 clip does the corners, so the pill's own
   999px radius has to go or the two fight each other. */
.nfPills .heropill{
  border-radius:0!important;
  justify-content:center;
  padding:13px 12px;
  min-width:0;
  white-space:nowrap;
  transition:border-color .2s ease,background .2s ease
}
.nfPills .heropill:hover{
  border-color:var(--turq)!important;
  background:rgba(43,217,198,.07)!important
}
.nfPills .heropill svg{flex:none}
@media(max-width:820px){
  .nfPills .heropill{font-size:11.4px;padding:12px 9px}
}
@media(max-width:400px){
  /* One per row at this width, so it can breathe rather than shrink. */
  .nfPills .heropill{font-size:12.4px;padding:13px 14px;justify-content:flex-start}
}

/* The platform row read as four identical monitor glyphs. Real marks in their
   own colours make it scannable at a glance. */
.brandpill{gap:7px!important;align-items:center}
.brandpill svg{flex:none;display:block}
.brandpill:last-child svg{color:var(--turq)}
@media(max-width:420px){
  /* Sizing for the platform row lives in otiyaNearFarRow, which is more
     specific. Only the icon scale is set here. */
  .brandpill svg{width:14px;height:14px}
}

/* ---------------------------------------------------------------------------
   Podium: three djembe drums in the brand palette.

   Layout is a flex column with fixed gaps rather than stacked absolute
   positions, because every overlap the old podium had came from absolute
   elements being sized independently of their labels. Nothing here overlaps by
   construction: the crown reserves its own row, the avatar reserves its own
   row, and the drum head sits inside a reserved band above the shell.
--------------------------------------------------------------------------- */
.stage{
  min-height:0!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important;
  gap:clamp(8px,2.4vw,18px)!important;
  padding:96px 4px 0!important;   /* top space is the crown's reserved row */
  perspective:none!important
}
.tier{
  position:relative;display:flex!important;flex-direction:column;align-items:center;
  width:clamp(92px,29vw,150px)!important;min-width:0
}

/* ---- labels ---- */
.tier .tav{
  order:2;display:grid;place-items:center;
  width:clamp(40px,11vw,56px);height:clamp(40px,11vw,56px);
  border-radius:50%;font-size:clamp(19px,5.4vw,27px);
  margin:0 0 9px!important;flex:none;
  background:rgba(255,255,255,.05);border:2px solid var(--tcol,var(--dim))
}
.tier.champ .tav{
  width:clamp(46px,12.6vw,64px);height:clamp(46px,12.6vw,64px);
  font-size:clamp(22px,6.2vw,31px);
  animation:podAv 2.9s ease-in-out 1s infinite
}
@keyframes podAv{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tier .tnm{
  order:0;font-family:'Unbounded','Inter',sans-serif;font-weight:700;
  font-size:clamp(10.5px,2.9vw,14px);line-height:1.25;text-align:center;
  margin:0 0 3px!important;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tier .tsc{
  order:1;font-size:clamp(9.5px,2.5vw,11.5px);font-weight:800;
  color:var(--tcol,var(--dim));margin:0 0 8px!important
}
.tier .tstreak{order:3;font-size:10px;margin:0 0 6px!important;opacity:.85}

/* ---- the drum ---- */
.block{
  order:4;position:relative;width:100%;
  margin-top:20px!important;                 /* reserved band for the drum head */
  border-radius:0 0 22px 22px!important;
  display:grid!important;place-items:center;
  padding:0!important;font-size:0!important;
  background:none!important;box-shadow:none!important;overflow:visible!important
}
.block.b1{height:clamp(112px,29vw,176px)!important;--shell:linear-gradient(180deg,#FF9B4F,#DC5E12 48%,#8E3606);--rim:#4A1B02;--rope:rgba(255,248,232,.62);--glow:rgba(255,122,41,.30)}
.block.b2{height:clamp(78px,20vw,120px)!important;--shell:linear-gradient(180deg,#3FE6D3,#17A594 48%,#0A6459);--rim:#053E37;--rope:rgba(255,250,238,.58);--glow:rgba(43,217,198,.24)}
.block.b3{height:clamp(58px,15vw,86px)!important;--shell:linear-gradient(180deg,#D6F857,#9BC016 48%,#5C7508);--rim:#334303;--rope:rgba(255,255,245,.58);--glow:rgba(200,241,53,.24)}

.dShell{
  position:absolute;inset:0;border-radius:0 0 22px 22px;overflow:hidden;z-index:1;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 2px,transparent 2px 13px),var(--shell);
  box-shadow:inset 0 -14px 24px rgba(0,0,0,.26),0 14px 26px rgba(0,0,0,.34),0 0 34px var(--glow)
}
/* Goatskin head. Sits in the 20px band reserved by the shell's margin-top, so
   it can never ride up over the score line. */
.dSkin{
  position:absolute;left:-6%;right:-6%;top:-17px;height:34px;border-radius:50%;z-index:3;
  background:radial-gradient(ellipse at 42% 30%,#F8E8C6,#DCC094 60%,#BC9E70);
  box-shadow:inset 0 0 0 5px var(--rim),0 3px 8px rgba(0,0,0,.45)
}
.dRope{
  position:absolute;inset:16px 8px 12px;z-index:2;opacity:.72;pointer-events:none;
  background:
    repeating-linear-gradient(58deg,transparent 0 13px,var(--rope) 13px 15px,transparent 15px 28px),
    repeating-linear-gradient(-58deg,transparent 0 13px,var(--rope) 13px 15px,transparent 15px 28px)
}
.block .pnum{
  position:relative;z-index:4;font-family:'Unbounded','Inter',sans-serif;font-weight:800;
  font-size:clamp(17px,4.8vw,27px);color:#FFF0D4;opacity:.5;
  text-shadow:0 2px 5px rgba(0,0,0,.7)
}
.dShine{position:absolute;inset:0;z-index:5;border-radius:0 0 22px 22px;overflow:hidden;pointer-events:none}
.dShine>i{
  position:absolute;inset:0;transform:translateX(-115%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 47%,transparent 56%)
}
.tier.champ .dShine>i{animation:dSweep 3.6s ease-in-out 1.5s infinite}
@keyframes dSweep{0%{transform:translateX(-115%)}45%,100%{transform:translateX(115%)}}
/* The winner's drum keeps being played. */
/* Both animations, or the thump replaces the rise and the winner's drum never
   comes up off the floor. */
.tier.champ .block{animation:blockRise .6s cubic-bezier(.2,.8,.25,1) both,dThump 1.9s ease-in-out 1.25s infinite}
@keyframes dThump{0%,100%{transform:scale(1)}8%{transform:scale(1.035,.968)}20%{transform:scale(1)}}

/* ---- crown ---- */
/* Absolute so it cannot push the name down, but anchored to the top of the tier
   and inside the 96px the stage reserved, so it never lands on the name. */
.podCrown{
  position:absolute;top:calc(-1 * clamp(56px,15vw,74px));left:50%;
  width:clamp(38px,10.5vw,56px);line-height:0;margin:0;z-index:6;pointer-events:none;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,199,45,.5));
  transform:translateX(-50%);transform-origin:50% 100%;
  animation:podCrownIn .78s cubic-bezier(.2,.9,.3,1.45) both,podCrownSway 3.6s ease-in-out .78s infinite
}
.podCrown svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes podCrownIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-46px) scale(.35) rotate(-16deg)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}
}
@keyframes podCrownSway{
  0%,100%{transform:translateX(-50%) rotate(-3.5deg)}
  50%{transform:translateX(-50%) rotate(3.5deg) translateY(-4px)}
}
.pcSweep{animation:pcSweep 3.6s ease-in-out .9s infinite}
@keyframes pcSweep{0%{transform:translateX(0)}45%,100%{transform:translateX(210px)}}

/* ---- spotlight ---- */
.tier.champ:before{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(130px,38vw,205px);height:clamp(200px,58vw,320px);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 86%,rgba(255,215,94,.26),transparent 66%);
  animation:podGlow 2.7s ease-in-out infinite alternate
}
@keyframes podGlow{from{opacity:.55}to{opacity:1}}
.tier.champ .tnm{color:#FFD75E!important}
.tier .tsc{--tcol:var(--dim)}
.tier.champ{--tcol:#FF7A29}

/* ---- suspense hold ---- */
.stage.holding .tier:not(.champ){opacity:.44;filter:saturate(.6);transition:opacity .5s,filter .5s}
.podHold{
  text-align:center;margin:0 auto 10px;
  font:800 clamp(9px,2.4vw,11px) 'Inter',sans-serif;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--tang);animation:podHoldPulse .85s ease-in-out infinite
}
@keyframes podHoldPulse{0%,100%{opacity:.4}50%{opacity:1}}

@media(max-width:400px){
  .stage{padding-top:82px!important;gap:7px!important}
  .tier .tnm{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .podCrown,.pcSweep,.tier.champ:before,.tier.champ .tav,
  .tier.champ .block,.tier.champ .dShine>i{animation:none!important}
}

.voicesSec{overflow:hidden}
.voiceRail{
  position:relative;margin:20px -16px 0;padding:4px 0 6px;
  --voiceSecs:150s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.voiceTrack{
  display:flex;gap:13px;width:max-content;padding:0 16px;
  animation:voiceRoll var(--voiceSecs,150s) linear infinite
}
.voiceRail.hold .voiceTrack{animation-play-state:paused}
/* Held cards lift slightly, so the pause is visible rather than just felt. */
.voiceRail.hold .voiceCard{border-color:rgba(253,244,227,.16)}
.voiceRail{touch-action:pan-y}
@keyframes voiceRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.voiceCard{
  position:relative;flex:none;width:min(338px,82vw);margin:0;
  padding:19px 18px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(253,244,227,.09);
  border-left:3px solid var(--vc,var(--lime));
  border-radius:15px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,border-color .2s ease
}
.voiceCard:hover{transform:translateY(-3px);border-color:var(--vc,var(--lime))}
.voiceMark{
  position:absolute;top:14px;right:15px;z-index:1;pointer-events:none;
  color:var(--vc,var(--lime));opacity:.5;line-height:0
}
.voiceCard blockquote{
  margin:0;padding-right:34px;
  font:500 13.2px/1.66 'Inter',sans-serif;color:var(--ink);
  overflow-wrap:anywhere
}
.voiceCard blockquote:before{content:"\201C";color:var(--vc,var(--lime));font-weight:800}
.voiceCard blockquote:after{content:"\201D";color:var(--vc,var(--lime));font-weight:800}
.voiceCard figcaption{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid rgba(253,244,227,.07);margin-top:auto
}
.voiceCard figcaption b{font:800 12.5px 'Unbounded','Inter',sans-serif;color:var(--vc,var(--lime))}
.voiceCard figcaption span{font-size:11.5px;color:var(--dim);font-weight:600}
@media(max-width:650px){
  .voiceTrack{animation-duration:calc(var(--voiceSecs,150s) * .82)}
  .voiceCard{width:min(290px,86vw);padding:16px 15px 14px}
  .voiceCard blockquote{font-size:12.7px}
}
@media(prefers-reduced-motion:reduce){
  .voiceTrack{animation:none;overflow-x:auto;width:auto}
  .voiceRail{-webkit-mask-image:none;mask-image:none}
}

/* Import questions. Hosts usually arrive with their questions already written
   somewhere, and retyping thirty of them is where people give up. */
.slideimport{
  width:100%;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border:1px dashed rgba(43,217,198,.42);background:rgba(43,217,198,.06);
  color:var(--turq);font:800 12px 'Inter',sans-serif;cursor:pointer;border-radius:11px;
  transition:background .15s,border-color .15s
}
.slideimport:hover{background:rgba(43,217,198,.12);border-color:var(--turq)}
.slideimport:active{transform:scale(.98)}

.qiSheet{max-width:520px;text-align:left}
.qiTitle{font-size:20px;font-weight:800;margin-bottom:6px}
.qiLead{color:var(--dim);font-size:13px;line-height:1.6;margin-bottom:16px}
.qiTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.qiTabs button{
  padding:10px;border:1px solid var(--panel2);background:transparent;color:var(--dim);
  font:800 12px 'Inter',sans-serif;cursor:pointer;border-radius:10px
}
.qiTabs button.on{background:rgba(200,241,53,.10);border-color:var(--lime);color:var(--lime)}
.qiDrop{
  display:grid;place-items:center;gap:4px;text-align:center;cursor:pointer;
  padding:26px 16px;border:2px dashed var(--panel2);border-radius:14px;
  background:rgba(255,255,255,.02);transition:border-color .15s,background .15s
}
.qiDrop:hover{border-color:var(--turq);background:rgba(43,217,198,.05)}
.qiDrop b{font-size:14px;color:var(--ink)}
.qiDrop span{font-size:11.5px;color:var(--dim)}
.qiHint{font-size:12px;line-height:1.6;color:var(--dim);margin-bottom:10px}
.qiPaste{
  width:100%;padding:13px;border:2px solid var(--panel2);background:#160A1E;color:var(--ink);
  font:500 13px/1.6 'Inter',sans-serif;border-radius:12px;outline:none;resize:vertical;margin-bottom:10px
}
.qiPaste:focus{border-color:var(--turq)}
.qiTemplate{
  width:100%;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border:1px solid var(--panel2);background:transparent;color:var(--dim);
  font:700 12px 'Inter',sans-serif;cursor:pointer;border-radius:10px
}
.qiTemplate:hover{color:var(--ink);border-color:var(--turq)}
.qiResult:not(:empty){margin-top:14px}
.qiBusy{padding:14px;text-align:center;color:var(--dim);font-size:12.5px}
.qiGood,.qiBad{padding:12px 14px;border-radius:12px;margin-bottom:9px}
.qiGood{background:rgba(200,241,53,.10);border:1px solid rgba(200,241,53,.34)}
.qiBad{background:rgba(240,80,155,.09);border:1px solid rgba(240,80,155,.32)}
.qiGood b,.qiBad b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
.qiGood span,.qiBad span{display:block;font-size:11.5px;color:var(--dim);line-height:1.55}
.qiList{max-height:190px;overflow:auto;display:grid;gap:6px}
.qiItem{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;background:rgba(255,255,255,.028);border-radius:10px}
.qiNum{
  flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;
  background:var(--panel2);color:var(--dim);font:800 10px 'Inter',sans-serif
}
.qiItem b{display:block;font-size:12.5px;color:var(--ink);line-height:1.45;font-weight:650}
.qiItem small{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.qiMore{text-align:center;font-size:11px;color:var(--dim);padding:5px}
.qiSkipped{margin-top:9px;font-size:11.5px;color:var(--dim)}
.qiSkipped summary{cursor:pointer;padding:7px 0;color:var(--tang);font-weight:700}
.qiSkipped span{display:block;padding:4px 0 4px 12px;line-height:1.5}
.qiActions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:16px}
.qiActions button{margin:0}

/* ---------------------------------------------------------------------------
   Raffle stage colour pass.

   Every draw type had picked up its own muted palette with gold trim, which is
   why the page read academic next to the rest of the site. These rules put the
   brand colours back while keeping the physical depth: real shadows, real
   highlights, real materials, just in the right hues.
--------------------------------------------------------------------------- */

/* ---- Wheel ---- */
.rfWheel{
  border:11px solid #2A1636!important;
  outline:2px solid rgba(200,241,53,.42)!important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.16),
    inset 0 0 44px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.75),
    0 0 42px rgba(240,80,155,.20)!important
}
.rfWheel:after{
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.20),transparent 34%),
    radial-gradient(circle at 68% 82%,rgba(0,0,0,.22),transparent 46%)!important
}
.rfWheelLabel{
  font:900 var(--lbl,9px) 'Inter',sans-serif!important;
  width:84px!important;margin-left:-42px!important;
  color:#fffaf2!important;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)!important;
  letter-spacing:-.01em!important
}
/* Lime, yellow and turquoise wedges are too bright for white text. */
.rfWheelLabel.onLight{
  color:#1B0E24!important;
  text-shadow:0 1px 1px rgba(255,255,255,.34)!important
}
.rfPointer{
  border-top-color:var(--lime)!important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(200,241,53,.55))!important
}
.rfWheelStand{
  background:linear-gradient(180deg,#3A2150,#180E22)!important;
  border-bottom:3px solid var(--tang)!important
}
.rfWheelHub{
  border:3px solid rgba(200,241,53,.55)!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.20),transparent 32%),
    linear-gradient(145deg,#43265C,#1A1020)!important;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.20),0 10px 24px rgba(0,0,0,.5),0 0 22px rgba(200,241,53,.22)!important
}
.rfWheelHub span{color:var(--turq)!important;letter-spacing:1.4px}
.rfWheelHub b{color:var(--lime)!important}
.rfWheel.spinning + .rfWheelHub span{color:var(--lime)!important}

/* ---- Name reel ---- */
.rfReel{
  border:2px solid rgba(200,241,53,.30)!important;
  background:
    linear-gradient(180deg,rgba(255,122,41,.07),transparent 40%),
    linear-gradient(180deg,#1A1024,#241536)!important;
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,.20),
    inset 0 26px 40px rgba(0,0,0,.34),
    0 20px 40px rgba(0,0,0,.32),
    0 0 34px rgba(43,217,198,.14)!important
}
.rfReelRow{color:var(--dim)!important}
.rfReelRow.focus{
  background:linear-gradient(90deg,rgba(255,122,41,.24),rgba(240,80,155,.22),rgba(200,241,53,.20))!important;
  border:2px solid rgba(200,241,53,.55)!important;
  color:var(--ink)!important;
  box-shadow:0 0 26px rgba(240,80,155,.26)!important
}

/* ---- Cards ---- */
/* Six real brand faces instead of three greys, kept matte with a paper weave
   so a wall of them still looks like a deck and not a colour chart. */
.rfDrawCard{border:1px solid rgba(0,0,0,.35)!important;box-shadow:0 10px 20px rgba(0,0,0,.34)!important}
.rfDrawCard.c0{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#FF7A29,#B94A12 78%)!important;color:#3D1A00!important}
.rfDrawCard.c1{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#F0509B,#A3245D 78%)!important;color:#3D0A22!important}
.rfDrawCard.c2{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#A78BFA,#6446B8 78%)!important;color:#1B1033!important}
.rfDrawCard.c3{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#2BD9C6,#127F73 78%)!important;color:#00332D!important}
.rfDrawCard.c4{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#C8F135,#87A812 78%)!important;color:#2A3600!important}
.rfDrawCard.c5{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(155deg,#FFC53D,#B88408 78%)!important;color:#3A2A00!important}
.rfDrawCard .rfCardNo{color:rgba(0,0,0,.42)!important;font-weight:900!important}
.rfDrawCard b{
  color:inherit!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  max-width:100%!important;display:block!important
}

/* ---- Drum ---- */
/* The wood, hide and rope stay realistic. What changes is the light: a warm
   glow lifting out of the mouth, so it reads as a live draw rather than a
   still illustration. */
.rfDrumScene{height:340px!important}
.rfDrumGlow{
  position:absolute;left:50%;top:26px;transform:translateX(-50%);
  width:190px;height:76px;border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,197,61,.50),rgba(255,122,41,.22) 45%,transparent 72%);
  filter:blur(9px);opacity:.55;transition:opacity .25s ease
}
.rfDrumScene.beat .rfDrumGlow{animation:rfGlowPulse .44s ease-in-out infinite alternate}
@keyframes rfGlowPulse{from{opacity:.42;transform:translateX(-50%) scale(.94)}to{opacity:.95;transform:translateX(-50%) scale(1.1)}}
.rfDrumScene.landed .rfDrumGlow{opacity:1}

/* The name plate. Its own layer, above everything, never masked, so long names
   and multiple winners cannot be clipped or collide with the status line. */
.rfDrumPlate{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  z-index:12;width:min(300px,86%);
  display:grid;place-items:center;padding:22px 14px 0;
  pointer-events:none
}
.rfDrumName{
  position:static!important;left:auto!important;right:auto!important;top:auto!important;
  width:100%!important;
  font:900 clamp(15px,4.6vw,26px) 'Unbounded','Inter',sans-serif!important;
  line-height:1.12!important;letter-spacing:-.03em!important;
  color:var(--ink)!important;text-align:center!important;
  text-shadow:0 3px 14px rgba(0,0,0,.75),0 0 22px rgba(255,197,61,.35)!important;
  overflow-wrap:anywhere!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important
}
.rfDrumScene.beat .rfDrumName{filter:blur(.5px);opacity:.9}
.rfDrumStatus{
  top:auto!important;bottom:6px!important;
  color:var(--turq)!important;font:900 8.5px 'Inter',sans-serif!important;
  letter-spacing:1.5px!important
}
.rfDrumScene.landed .rfDrumName{
  animation:rfPlateLand .6s cubic-bezier(.16,.84,.24,1) forwards!important;
  filter:none!important;opacity:1!important
}
@keyframes rfPlateLand{
  0%{transform:translateY(14px) scale(.9);opacity:.6}
  60%{opacity:1}
  100%{transform:translateY(0) scale(1.08);opacity:1;color:var(--lime)}
}

/* ---- Winner card, shared by every draw type ---- */
.rfWinnerCrown{color:var(--lime)!important;filter:drop-shadow(0 7px 12px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(200,241,53,.45))!important}
.rfWinnerRule{background:linear-gradient(90deg,transparent,var(--tang),var(--lime),transparent)!important;height:2px!important;width:96px!important}
.rfWinnerNames b{color:var(--ink)!important;text-shadow:0 0 30px rgba(200,241,53,.22)!important}

@media(max-width:650px){
  .rfDrumScene{height:310px!important}
  .rfDrumPlate{padding-top:16px}
  .rfDrumGlow{width:160px;top:22px}
  .rfWheelLabel{width:70px!important;margin-left:-35px!important}
}

.wsPage{width:100%;margin-top:52px;padding-bottom:30px}
.wsLoading{min-height:60vh;display:grid;place-items:center;align-content:center;gap:16px;color:var(--dim);font-size:12px}
.wsTop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid rgba(253,244,227,.08)}
.wsBrand{display:flex;align-items:center;gap:10px}.wsBrand>i{width:1px;height:23px;background:rgba(253,244,227,.12)}.wsBrand>span{font:650 12px Unbounded,Inter,sans-serif}
.wsTopRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wsSwitcher,.wsSingleName{border:1px solid rgba(253,244,227,.1);background:var(--panel);color:var(--ink);border-radius:10px;padding:9px 11px;font-weight:700;font-size:11px}
.wsSingleName{display:inline-block}
.wsInviteNotice{border:1px solid rgba(43,217,198,.25);background:rgba(43,217,198,.06);color:var(--turq);border-radius:999px;padding:8px 10px;font-size:9px;font-weight:800}
.wsTabs{display:flex;gap:5px;overflow:auto;padding:13px 0 10px;scrollbar-width:none}.wsTabs::-webkit-scrollbar{display:none}
.wsTabs button{border:0;background:transparent;color:var(--dim);padding:9px 12px;border-radius:9px;font-size:10.5px;font-weight:750;white-space:nowrap}.wsTabs button.on{background:var(--panel2);color:var(--ink)}
.wsMain{padding-top:7px}
.wsHero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px;border:1px solid rgba(253,244,227,.09);border-radius:18px;background:radial-gradient(circle at 90% 5%,rgba(43,217,198,.08),transparent 34%),linear-gradient(145deg,#2a1536,#1a0d25)}
.wsHero h2{font:750 clamp(24px,4vw,39px) Unbounded,Inter,sans-serif;letter-spacing:-1.2px;margin:8px 0}.wsHero p{color:var(--dim);font-size:11px;margin:0}
.wsEyebrow{font:750 8px Unbounded,Inter,sans-serif;letter-spacing:1.5px;color:var(--lime)}
.wsPlanChip{min-width:145px;padding:13px;border-radius:13px;border:1px solid rgba(200,241,53,.18);background:rgba(0,0,0,.18)}.wsPlanChip small{display:block;color:var(--dim);font-size:7px}.wsPlanChip b{display:block;font:700 15px Unbounded,Inter,sans-serif;margin:4px 0}.wsPlanChip span{color:var(--muted);font-size:8.5px}
.wsMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}.wsMetrics>div{padding:14px;border:1px solid rgba(253,244,227,.08);border-radius:13px;background:rgba(255,255,255,.018)}.wsMetrics small{display:block;color:var(--muted);font-size:7.5px;font-weight:850;letter-spacing:.8px}.wsMetrics b{display:block;font:700 20px Unbounded,Inter,sans-serif;margin:8px 0 5px}.wsMetrics span{color:var(--muted);font-size:8.5px;line-height:1.4}
.wsThree{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.wsTwo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.wsRecent{border:1px solid rgba(253,244,227,.08);border-radius:14px;background:rgba(255,255,255,.014);padding:12px}.wsRecentHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.wsRecentHead b{font:650 9.5px Unbounded,Inter,sans-serif}.wsRecentHead span{color:var(--muted);font-size:9px}
.wsRecentRow{display:flex;gap:8px;padding:8px 0;border-top:1px solid rgba(253,244,227,.06)}.wsRecentRow>i{width:24px;height:24px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;color:var(--turq);font-style:normal;font-size:9px}.wsRecentRow>div{min-width:0}.wsRecentRow b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wsRecentRow span{display:block;color:var(--muted);font-size:7.8px;margin-top:2px}.wsEmptyMini{padding:14px 0;color:var(--muted);font-size:9px}
.wsSectionHead{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:13px}.wsSectionHead>div>span{font:750 8px Unbounded,Inter,sans-serif;color:var(--turq);letter-spacing:1.4px}.wsSectionHead h3{font:700 clamp(18px,3vw,26px) Unbounded,Inter,sans-serif;letter-spacing:-.6px;margin:6px 0}.wsSectionHead p{color:var(--dim);font-size:10px;line-height:1.5;margin:0;max-width:690px}
.wsList{border:1px solid rgba(253,244,227,.08);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.012)}
.wsMemberRow{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(253,244,227,.06)}.wsMemberRow:last-child{border-bottom:0}
.wsAvatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--panel2),#3d2550);font-weight:800;color:var(--turq)}
.wsMemberMain{min-width:0}.wsMemberMain b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wsMemberMain span{display:block;color:var(--muted);font-size:8px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsRole{display:inline-flex;padding:5px 7px;border-radius:999px;font-size:7.5px;font-weight:800;white-space:nowrap}.wsOwner{background:rgba(200,241,53,.1);color:var(--lime)}.wsAdmin{background:rgba(43,217,198,.09);color:var(--turq)}.wsMember{background:rgba(255,122,41,.08);color:var(--tang)}.wsViewer{background:rgba(255,255,255,.05);color:var(--dim)}
.wsTextBtn{border:0;background:none;color:var(--turq);font-size:8.5px;font-weight:800;padding:6px;cursor:pointer}.dangerText{color:#d97d8e}
.wsSubhead{margin:18px 0 8px}.wsSubhead b{display:block;font-size:10px}.wsSubhead span{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.wsContentActions{display:flex;gap:6px;flex-wrap:wrap}.wsContentRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(253,244,227,.06)}.wsContentRow>div{min-width:0}.wsContentRow b{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wsContentRow span{display:block;color:var(--muted);font-size:8px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wsContentRow button{border:0;background:none;color:var(--turq);font-size:8.5px;font-weight:800;cursor:pointer;padding:6px}
.wsNote{margin-top:11px;padding:11px 12px;border:1px solid rgba(43,217,198,.13);border-radius:11px;background:rgba(43,217,198,.025)}.wsNote b{display:block;font-size:9px}.wsNote span{display:block;color:var(--muted);font-size:8.5px;line-height:1.5;margin-top:4px}
.wsTimeline{border-left:1px solid rgba(253,244,227,.12);margin-left:8px}.wsTimelineRow{position:relative;padding:0 0 16px 18px}.wsTimelineRow>i{position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 4px var(--bg)}.wsTimelineRow b{display:block;font-size:10px}.wsTimelineRow span{display:block;color:var(--muted);font-size:8.5px;margin-top:3px}.wsEmpty{color:var(--muted);font-size:10px;padding:20px}
.wsEntitlement{border:1px solid rgba(253,244,227,.1);padding:7px 9px;border-radius:999px;color:var(--dim);font-size:8px}.wsEntitlement.good{border-color:rgba(43,217,198,.2);color:var(--turq)}
.wsEntitlements{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}.wsEntitlements>div{display:flex;justify-content:space-between;gap:12px;padding:10px;border:1px solid rgba(253,244,227,.07);border-radius:9px}.wsEntitlements span{color:var(--muted);font-size:8.5px}.wsEntitlements b{font-size:9px}
.wsSettingsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.wsSettingCard{padding:14px;border:1px solid rgba(253,244,227,.08);border-radius:13px;background:rgba(255,255,255,.014)}.wsSettingCard>span{display:block;color:var(--muted);font-size:7.5px;font-weight:850;letter-spacing:.7px}.wsSettingCard>b{display:block;font:650 13px Unbounded,Inter,sans-serif;margin:8px 0}.wsSettingCard p{color:var(--muted);font-size:8.5px;line-height:1.5}.wsSettingCard input,.wsSettingCard select{width:100%;margin:9px 0;padding:10px;border-radius:9px;border:1px solid rgba(253,244,227,.1);background:var(--bg);color:var(--ink)}
.wsLocked,.wsError{padding:22px;border:1px solid rgba(253,244,227,.09);border-radius:15px;background:rgba(255,255,255,.014);text-align:center}.wsLocked b,.wsError b{display:block;font:650 12px Unbounded,Inter,sans-serif}.wsLocked span,.wsError span{display:block;color:var(--muted);font-size:9px;margin:7px 0 12px}
.wsEmptyPage{max-width:760px;margin:56px auto 0;text-align:center}.wsEmptyPage h1{font:750 clamp(27px,5vw,45px) Unbounded,Inter,sans-serif;letter-spacing:-1.3px;line-height:1.08;margin:12px 0}.wsEmptyPage>p{color:var(--dim);font-size:13px;line-height:1.65;max-width:610px;margin:0 auto}
.wsEmptyArt{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:54px}.wsEmptyArt span{display:block;width:36px;border-radius:9px 9px 3px 3px}.wsEmptyArt span:nth-child(1){height:30px;background:var(--tang)}.wsEmptyArt span:nth-child(2){height:48px;background:var(--turq)}.wsEmptyArt span:nth-child(3){height:38px;background:var(--lime)}
.wsCreateBox{margin:22px auto 0;padding:16px;max-width:520px;border:1px solid rgba(253,244,227,.09);border-radius:14px;background:var(--panel)}.wsCreateBox b{display:block;font-size:11px}.wsCreateBox span{display:block;color:var(--muted);font-size:9.5px;line-height:1.5;margin:6px 0 12px}
.wsInviteCards{display:grid;gap:8px;margin:22px auto 0;max-width:600px}.wsInviteCard,.wsInviteSheet{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid rgba(43,217,198,.16);border-radius:12px;background:rgba(43,217,198,.025);text-align:left}.wsInviteCard b,.wsInviteSheet b{display:block;font-size:10px}.wsInviteCard span,.wsInviteSheet span{display:block;color:var(--muted);font-size:8.5px;margin-top:3px}.wsInviteCard>div:last-child,.wsInviteSheet>div:last-child{display:flex;gap:6px}
@media(max-width:900px){.wsThree{grid-template-columns:1fr 1fr}.wsMetrics{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.wsTop{align-items:flex-start;flex-direction:column}.wsTopRight{justify-content:flex-start}.wsHero{flex-direction:column}.wsPlanChip{width:100%}.wsThree,.wsTwo,.wsSettingsGrid,.wsEntitlements{grid-template-columns:1fr}.wsMemberRow{grid-template-columns:38px minmax(0,1fr) auto}.wsMemberRow>.wsTextBtn{grid-column:2/4;justify-self:start}.wsSectionHead{flex-direction:column}.wsInviteCard,.wsInviteSheet{align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.wsMetrics{grid-template-columns:1fr}.wsTabs button{padding:8px 10px}.wsPage{margin-top:45px}}

/* An empty workspace page is almost always a linking problem, not a plan
   problem. Saying so here saves a support message. */
.wsNotFound{
  max-width:560px;margin:22px auto 0;padding:16px 18px;text-align:left;
  border:1px solid rgba(253,244,227,.10);border-radius:16px;
  background:rgba(255,255,255,.022)
}
.wsNotFound b{display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
.wsNotFound span{display:block;font-size:12px;line-height:1.65;color:var(--dim);margin-bottom:12px}
.wsNotFound em{color:var(--turq);font-style:normal;font-weight:700}
.wsNotFound button{width:auto;padding:9px 16px;font-size:11.5px}

.wsContextBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:9px 11px;border:1px solid rgba(43,217,198,.14);border-radius:12px;background:rgba(43,217,198,.025)}
.wsContextBar>div{min-width:110px}.wsContextBar small{display:block;color:var(--muted);font-size:7px;font-weight:850;letter-spacing:.8px}.wsContextBar b{display:block;font-size:9.5px;margin-top:2px}
.wsContextBar select{min-width:180px;max-width:320px;border:1px solid rgba(253,244,227,.09);background:var(--bg);color:var(--ink);border-radius:9px;padding:8px 10px;font-size:9px;font-weight:700}
.wsContextBar button{border:0;background:none;color:var(--turq);font-size:8.5px;font-weight:800;cursor:pointer}
.qWorkspaceBadge{display:inline-flex;margin-left:7px;padding:3px 6px;border-radius:999px;background:rgba(43,217,198,.07);color:var(--turq);font-size:7px;font-weight:800;vertical-align:middle}
@media(max-width:560px){.wsContextBar{align-items:flex-start;flex-direction:column}.wsContextBar select{width:100%;max-width:none}}

.homePricingSec{
  margin-top:40px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,122,41,.11),transparent 30%),
    radial-gradient(circle at 90% 76%,rgba(43,217,198,.07),transparent 32%),
    linear-gradient(145deg,#271231 0%,#180b22 100%);
  box-shadow:inset 0 3px 0 var(--tang);
}
.homePricingPersonal{
  padding:clamp(24px,4vw,38px);
}
.homePricingPersonal::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-74px;
  top:-72px;
  border:1px solid rgba(255,122,41,.13);
  transform:rotate(45deg);
  pointer-events:none;
}
.homePricingPersonalInner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
}
.homePricingPersonalCopy{max-width:760px}
.homePricingPersonalCopy h4{
  margin-top:8px;
  font-size:clamp(22px,3.3vw,34px);
  line-height:1.15;
  letter-spacing:-.035em;
}
.homePricingPersonalCopy p{
  margin-top:9px;
  color:var(--dim);
  font-size:13.8px;
  line-height:1.6;
}
.homePricingPersonalCopy p b{
  color:var(--ink);
  font-weight:800;
}
.homePricingScale{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:17px;
}
.homePricingScale>span{
  min-width:48px;
  height:35px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:9px;
  border:1px solid rgba(253,244,227,.09);
  background:rgba(255,255,255,.025);
  color:#d9cde0;
  font-family:'Unbounded','Inter',sans-serif;
  font-size:10.5px;
  font-weight:700;
}
.homePricingScale>span.free{
  border-color:rgba(200,241,53,.28);
  background:rgba(200,241,53,.075);
  color:var(--lime);
}
.homePricingScale>span.enterprise{
  border-color:rgba(43,217,198,.24);
  color:var(--turq);
}
.homePricingScale small{
  font-family:'Inter',sans-serif;
  font-size:7px;
  letter-spacing:.7px;
  font-weight:850;
}
.homePricingScale>i{
  display:inline-flex;
  color:#6e6078;
  opacity:.7;
}
.homePricingPersonalAction{
  min-width:178px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.homePricingMini{
  color:#81738a;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:1.2px;
  white-space:nowrap;
}
.homePricingExpand{
  min-width:154px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,122,41,.48);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(255,122,41,.16),rgba(240,80,155,.09));
  color:#ff9f64;
  padding:13px 17px;
  font-family:'Unbounded','Inter',sans-serif;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  transition:transform .16s ease,filter .16s ease,border-color .16s ease;
}
.homePricingExpand:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  border-color:rgba(255,122,41,.75);
}
@media(max-width:760px){
  .homePricingPersonalInner{grid-template-columns:1fr}
  .homePricingPersonalAction{
    width:100%;
    min-width:0;
    align-items:flex-start;
  }
  .homePricingExpand{width:100%}
  .homePricingMini{white-space:normal}
}
@media(max-width:440px){
  .homePricingScale{gap:5px}
  .homePricingScale>span{
    min-width:43px;
    padding:0 8px;
  }
  .homePricingScale small{display:none}
}

/* Final approved homepage pricing teaser, compact, light and responsive. */
.homePricingLight{
  margin-top:40px!important;
  padding:0!important;
  overflow:hidden;
  background:transparent!important;
  box-shadow:none!important;
}
.homePricingLightInner{
  position:relative;
  min-height:92px;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 28px;
  background:rgba(35,25,43,.48);
  border:1px solid rgba(200,241,53,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 30px rgba(0,0,0,.08);
}
.homePricingLightInner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,122,41,.025),transparent 35%,rgba(43,217,198,.025));
}
.homePricingLightCopy{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0;
}
.homePricingLightIcon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  color:var(--lime);
}
.homePricingLightText{min-width:0}
.homePricingLightText strong{
  display:block;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.01em;
}
.homePricingLightText p{
  margin:3px 0 0;
  color:#bcaec7;
  font-size:13px;
  line-height:1.45;
  font-weight:500;
}
.homePricingLightCta{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-width:146px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(240,80,155,.25);
  border-radius:13px;
  background:rgba(39,21,51,.48);
  color:#c7b5d0;
  padding:0 18px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.homePricingLightCta span{display:inline-flex;color:#bca9c8;transition:transform .16s ease}
.homePricingLightCta:hover{
  transform:translateY(-1px);
  border-color:rgba(200,241,53,.42);
  background:rgba(52,30,64,.64);
  color:var(--ink);
}
.homePricingLightCta:hover span{transform:translateX(3px);color:var(--lime)}
@media(max-width:600px){
  .homePricingLight{margin-top:28px!important}
  .homePricingLightInner{
    min-height:0;
    padding:16px 17px;
    gap:14px;
  }
  .homePricingLightCopy{gap:11px;align-items:flex-start}
  .homePricingLightIcon{width:30px;height:30px;flex-basis:30px;margin-top:1px}
  .homePricingLightText strong{font-size:13px;line-height:1.35}
  .homePricingLightText p{font-size:11.5px;line-height:1.45;margin-top:3px}
  .homePricingLightCta{
    min-width:92px;
    width:auto;
    height:40px;
    padding:0 12px;
    font-size:10.5px;
    border-radius:11px;
  }
}
@media(max-width:390px){
  .homePricingLightInner{padding:14px 13px;gap:9px}
  .homePricingLightCopy{gap:8px}
  .homePricingLightIcon{width:26px;height:26px;flex-basis:26px}
  .homePricingLightText strong{font-size:12px}
  .homePricingLightText p{font-size:10.5px}
  .homePricingLightCta{min-width:84px;padding:0 9px;font-size:10px}
  .homePricingLightCta span{display:none}
}

/* ---------------------------------------------------------------------------
   Clickable affordance.

   Cursor was being set per component, so anything new or missed had no pointer
   at all. Browsers do NOT give buttons a pointer cursor by default, so every
   button that was not explicitly styled looked unclickable on desktop.

   This covers everything interactive in one place, and adds the touch feedback
   that was also missing: on a phone there is no hover, so a tap needs a visible
   response or it feels like nothing happened.
--------------------------------------------------------------------------- */
button,
a,
label[for],
summary,
select,
[role="button"],
/* Any element carrying an onclick, EXCEPT the two full screen dismiss layers.
   Those are backdrops, not controls: a pointer cursor over the whole viewport
   is wrong, and pressing one would otherwise scale the entire overlay. */
[onclick]:not(.ascrim):not(.sheetwrap),
.tcard,.tile,.sopt,.dchip,.heropill,.pill,.chipbtn,.qiDrop,.size,
.voiceCard,.rfSettingsToggle,.avbtn,.ans{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ascrim,.sheetwrap{cursor:default}
/* Genuinely non-interactive things must not inherit a misleading pointer. */
button:disabled,[aria-disabled="true"],.btn:disabled{cursor:not-allowed}
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea{cursor:text}

/* Touch feedback. No hover on a phone, so a press needs to be felt. */
button:active,
[role="button"]:active,
[onclick]:not(.ascrim):not(.sheetwrap):active,
.tcard:active,.sopt:active,.dchip:active,.heropill:active,.avbtn:active{
  transform:scale(.978);
  transition:transform .06s ease
}
/* Nothing that fills the screen should move when pressed. */
.ascrim:active,.sheetwrap:active,.sheet:active{transform:none!important}

/* Keyboard focus. Previously only some controls showed a ring. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--turq);
  outline-offset:2px
}
/* border-radius is deliberately not set here. Setting it would change the shape
   of an input the moment it gained focus, which looks like a glitch. The
   outline follows the element's existing corners on its own. */
/* An anchor styled as a link should look like one. */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.foot a:hover,.minilab span:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){
  button:active,[role="button"]:active,[onclick]:active,
  .tcard:active,.sopt:active,.dchip:active,.heropill:active,.avbtn:active{transform:none!important}
}

/* ---------------------------------------------------------------------------
   OTIYA KIDS
   Brighter and warmer than the rest of the app so it reads as its own product.
   The only movement is the blink on the home page face and press feedback:
   nothing loops in a reading area, and Calm mode plus reduced motion stop it.
--------------------------------------------------------------------------- */

/* home page card */
/* ---------------------------------------------------------------------------
   HOME ACTIONS: four cards, one grid
   Replaces the old split arrangement where a vivid button sat above a separate
   dark box holding its own code field and links. That split is why nothing
   lined up and why the cards read as different heights.

   Each card is now one object: a light tinted ground of its own colour, with
   the gradient appearing exactly once on the action strip. No vertical rules
   anywhere, between cards or inside them.
--------------------------------------------------------------------------- */
.actquad{display:grid;grid-template-columns:1fr;gap:14px;max-width:min(520px,100%);margin:0 auto;text-align:left}
@media(min-width:860px){
  /* .wrap caps at 560px, so a 940px grid inside it could never take effect and
     the two columns were being squeezed into 528px. The wrap widens here. */
  .wrap{max-width:1000px}
  .actquad{grid-template-columns:1fr 1fr;gap:16px 20px;max-width:940px}
}

.acCard{
  background:var(--tint,rgba(255,255,255,.03));
  padding:7px;display:flex;flex-direction:column;
  min-width:0;max-width:100%;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))
}

/* the one vivid element per card */
.acStrip{
  display:flex;align-items:center;gap:12px;width:100%;border:0;cursor:pointer;text-align:left;
  padding:15px 16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--ct);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 10px 24px -16px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .22s ease
}
.acStrip:hover{transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
.acStrip:after{content:"";position:absolute;left:0;right:0;top:0;height:56%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent)}
.acStrip > *{position:relative;z-index:1}
.acIco{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;line-height:0;
  background:rgba(0,0,0,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.acTxt{flex:1;min-width:0;overflow:hidden}
.acTitle{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:15.4px;font-weight:800;
  letter-spacing:-.026em;line-height:1.18}
/* one line that truncates rather than wrapping, which is what keeps the four
   cards exactly level whatever the copy length */
.acSub{display:block;margin-top:2px;font-size:12.2px;font-weight:600;opacity:.86;line-height:1.4;
  min-width:0;overflow-wrap:break-word}
.acArrow{flex:none;opacity:.7;line-height:0}

/* the body sits on the tint, pushed to the bottom so all four align */
.acBody{padding:13px 11px 8px;margin-top:auto}
.acLbl{font-size:11.5px;font-weight:700;color:var(--dim);margin-bottom:9px;line-height:1.35;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:16px}
.acSolo{color:var(--ac);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.acRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acLink{border:1px solid var(--line,rgba(253,244,227,.2));
  background:var(--lnk,rgba(255,255,255,.05));color:var(--ac);
  min-width:0;max-width:100%;
  border-radius:10px;padding:9px 13px;cursor:pointer;font:700 11.4px 'Inter',sans-serif;
  display:inline-flex;align-items:center;gap:7px;transition:background .18s;white-space:nowrap}
.acLink:hover{background:var(--lnkH,rgba(255,255,255,.1))}
.acField{display:flex;border-radius:11px;overflow:hidden;flex:1;min-width:0;
  background:#160A1E;border:1px solid rgba(253,244,227,.1)}
.acField input{flex:1;min-width:0;padding:11px 13px;border:0;background:transparent;color:var(--ink);
  font:800 13.6px 'Unbounded','Inter',sans-serif;letter-spacing:2.4px;text-transform:uppercase}
.acField input::placeholder{color:var(--mute);letter-spacing:1.4px;font-size:11.2px;font-weight:700}
.acField input:focus{outline:none}
/* Play was solid tangerine, which made it the loudest thing on the page,
   brighter than the action strip above it. Mixed toward the dark well it sits
   in: still clearly tangerine, measured 5.8:1 with cream text. */
.acField button{border:0;padding:0 18px;cursor:pointer;font:800 12.6px 'Inter',sans-serif;
  background:var(--ac);color:var(--acT);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.acField button:hover{filter:brightness(1.08)}
.acField button:hover{background:var(--ac)}
.acAges{display:inline-flex;align-items:center;margin-left:auto}
.acAges i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:800 9.4px 'Unbounded','Inter',sans-serif;font-style:normal;margin-left:-6px;border:2px solid #241033}
.acAges i:first-child{margin-left:0}

/* Two links must share one row on a phone rather than stacking, so the shorter
   label shows and nothing wraps to a new line. */
.acLink .narrow{display:none}
@media(max-width:560px){
  /* Wrapping is fine. A cut-off card is not. */
  .acRow{flex-wrap:wrap}
  .acLink{padding:9px 11px;font-size:11px;flex:0 1 auto;min-width:0;max-width:100%}
  .acLink .wide{display:none}
  .acLink .narrow{display:inline}
  .acAges{display:none}
}

/* the kids surface */
.kidsWrap{width:100%;max-width:520px;margin:0 auto;padding:20px 4px 40px;position:relative}
.kidsWrap:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;filter:blur(30px);
  background:radial-gradient(circle at 10% 10%,rgba(255,197,61,.5),transparent 26%),
    radial-gradient(circle at 90% 22%,rgba(79,195,247,.45),transparent 24%),
    radial-gradient(circle at 82% 88%,rgba(200,241,53,.4),transparent 26%),
    radial-gradient(circle at 8% 84%,rgba(240,80,155,.4),transparent 24%)}
.kHead{margin-bottom:16px}
.kEy{display:flex;align-items:center;gap:8px;font:800 9.5px 'Inter',sans-serif;letter-spacing:1.8px;margin-bottom:8px}
.kEy s{width:18px;height:2px;display:block}
.kHead h1,.kHead h2{font-family:'Unbounded','Inter',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.035em;line-height:1.13;margin:0 0 5px}
.kHead p{color:var(--dim);font-size:12.4px;line-height:1.6;margin:0}
.kFine{color:var(--mute);font-size:10.6px;line-height:1.6;text-align:center;margin:13px 0 0}
.kNote{color:var(--dim);font-size:11.6px;line-height:1.62;padding:12px 13px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.09);margin-bottom:9px}
.kBig{width:100%;margin-top:14px}
.kBig2{width:100%;margin-top:8px}
.kLoad{text-align:center;padding:60px 20px;color:var(--dim)}
.kLoad p{margin:12px 0 0;font-size:13px;line-height:1.6}

/* who is playing */
.kAv{border-radius:50%;display:grid;place-items:center;font-family:'Unbounded','Inter',sans-serif;font-weight:800;flex:none}
.kRow{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.1);border-radius:14px}
.kName{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);
  font:700 13.4px 'Unbounded','Inter',sans-serif;padding:4px 0}
.kName:focus{outline:none;border-bottom:1.5px solid var(--vio)}
.kName::placeholder{color:var(--mute);font-weight:600}
.kBands{display:flex;gap:5px;flex:none}
.kBands :is(span,button){font:800 9.5px 'Inter',sans-serif;padding:5px 8px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(253,244,227,.16);color:var(--dim)}
.kBands :is(span,button).on{background:rgba(200,241,53,.15);border-color:var(--lime);color:var(--lime)}
.kDel{flex:none;background:transparent;border:0;color:var(--mute);cursor:pointer;line-height:0;padding:4px}
.kDel:hover{color:var(--mag)}
.kAdd{width:100%;padding:11px;margin-top:3px;border:1px dashed rgba(167,139,250,.55);
  background:rgba(167,139,250,.07);color:var(--vio);font:800 12px 'Inter',sans-serif;
  border-radius:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}

/* topics */
/* Kids pack cards, option A: a row per pack.
   The previous version put a colour band above a dark body, which read as two
   things stacked and pushed the blurb onto a gradient. Here colour lives in the
   icon and the selected border only, and every word sits on dark.

   Three rows on a phone. On a laptop three full-width rows look like a mistake,
   so the same rows become one row of three. */
.kPk{display:grid;gap:10px}
.aR{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;cursor:pointer;
  min-width:0;max-width:100%;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(253,244,227,.1);transition:.18s}
.aR:hover{border-color:var(--c);background:rgba(255,255,255,.07)}
.aR.on{border-color:var(--c);background:var(--tint,rgba(255,255,255,.06));
  box-shadow:0 0 0 3px var(--ring,rgba(255,255,255,.12))}
.aIco{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;line-height:0;
  background:linear-gradient(145deg,var(--c),var(--cDeep,#000));color:var(--ct);
  box-shadow:0 6px 15px -9px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.aT{flex:1;min-width:0;overflow:hidden}
.aT b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14.2px;font-weight:800;
  letter-spacing:-.02em;line-height:1.15}
.aT > span{display:block;font-size:11.4px;color:var(--dim);margin-top:2px;line-height:1.35}
/* No question count. A number invites the thought that the pack is a finite
   list you will exhaust; the mix promise says the opposite and is just as true. */
.aFresh{display:inline-flex!important;align-items:center;gap:6px;margin-top:5px;
  font:800 9.4px 'Inter',sans-serif;letter-spacing:.5px;color:var(--c)}
.aChk{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid rgba(253,244,227,.2);
  display:grid;place-items:center;line-height:0}
.aR.on .aChk{background:var(--c);border-color:var(--c);color:var(--ct)}
.aR.soon{cursor:default;opacity:.72}
.aR.soon:hover{border-color:rgba(253,244,227,.1);background:rgba(255,255,255,.04)}
.aR.soon .aIco{background:#4A4257;color:#fff;box-shadow:none}
.aSoon{flex:none;display:inline-flex;align-items:center;gap:4px;background:var(--sun);color:var(--sunT);
  font:800 8.3px 'Inter',sans-serif;letter-spacing:1px;padding:4px 9px;border-radius:99px;line-height:1}
/* Rows stay rows at every width. An earlier version turned them into three
   narrow centred columns on a laptop, which left about 250px per card and broke
   "General Knowledge" across two lines and the mix line across two more. Wider
   rows read better than cramped columns, so the grid just caps its width. */
@media(min-width:700px){
  .kPk{max-width:640px;margin-left:auto;margin-right:auto}
  .aR{padding:14px}
  .aIco{width:52px;height:52px;border-radius:17px}
  .aT b{font-size:15.4px}
  .aT > span{font-size:12.2px}
  .aFresh{font-size:9.8px}
}
.kReady{text-align:center;font:700 10.6px 'Inter',sans-serif;color:var(--dim);
  margin-top:12px;padding:10px;border-radius:12px;border:1px dashed rgba(253,244,227,.18)}

/* rounds */
.kStrip{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.kStrip span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  font:800 10.6px 'Inter',sans-serif;background:rgba(255,255,255,.07);border:1px solid rgba(253,244,227,.12)}
.kRounds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kR{padding:13px 6px;border-radius:15px;text-align:center;cursor:pointer;
  border:2px solid rgba(253,244,227,.14);background:rgba(255,255,255,.05)}
.kR.on{background:var(--lime);border-color:var(--lime);color:var(--limeT)}
.kR b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:19px;font-weight:800;line-height:1}
.kR span{display:block;font:800 8.5px 'Inter',sans-serif;letter-spacing:.6px;opacity:.7;margin-top:3px}
.kMaths{padding:13px 14px;border-radius:15px;margin-top:12px;
  background:rgba(43,217,198,.1);border:1px solid rgba(43,217,198,.34)}
.kMbig{font-family:'Unbounded','Inter',sans-serif;font-size:14.5px;font-weight:800;color:var(--turq);margin-bottom:4px}
.kMaths p{margin:0;font-size:11.4px;color:var(--dim);line-height:1.55}

/* settings */
.kOpt{display:flex;align-items:center;gap:11px;padding:11px;border-radius:15px;margin-bottom:7px;
  background:rgba(255,255,255,.055);border:1px solid rgba(253,244,227,.1);cursor:pointer}
.kOi{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;line-height:0}
.kOt{flex:1;min-width:0}
.kOt b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:11.8px}
.kOt span{display:block;font-size:10.2px;color:var(--dim);margin-top:2px;line-height:1.4}
.kSw{flex:none;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.15);position:relative}
.kSw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.kSw.on{background:var(--lime)}
.kSw.on i{left:21px}

/* reroll button, sitting inside the name field */
.kNameWrap{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.kDice{flex:none;background:rgba(167,139,250,.13);border:1px solid rgba(167,139,250,.34);
  color:var(--vio);border-radius:8px;padding:5px 7px;cursor:pointer;line-height:0;
  transition:background .16s}
.kDice:hover{background:rgba(167,139,250,.26)}

/* Progress a child can read: one dot per turn. Done dots are filled in that
   child's colour, the current one is ringed and larger, the rest are hollow. */
.kDots{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  margin-top:13px;padding:9px 6px;border-radius:12px;background:rgba(255,255,255,.035)}
.kDots i{width:8px;height:8px;border-radius:50%;display:block;flex:none;
  background:rgba(253,244,227,.16);transition:background .2s}
.kDots i.done{background:var(--dc)}
.kDots i.now{width:13px;height:13px;background:var(--dc);
  box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.kDotsN{font:800 10.6px 'Inter',sans-serif;color:var(--dim);letter-spacing:.3px}

/* question preview */
.kQlist{display:grid;gap:6px}
.kQrow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(253,244,227,.09)}
.kQn{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font:800 10px 'Unbounded','Inter',sans-serif}
.kQt{flex:1;min-width:0;font-size:11.6px;line-height:1.45}
.kQs{flex:none;background:transparent;border:0;color:var(--turq);font:800 9.5px 'Inter',sans-serif;cursor:pointer}

/* handoff */
.kHand{position:fixed;inset:0;z-index:30;display:grid;place-items:center;text-align:center;padding:26px}
.kHandIn{max-width:340px}
.kHandLbl{font:800 9.5px 'Inter',sans-serif;letter-spacing:2px;opacity:.72;margin-bottom:14px}
.kHandAv{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  font:800 44px 'Unbounded','Inter',sans-serif;margin:0 auto 14px;background:rgba(0,0,0,.14);
  border:5px solid rgba(0,0,0,.14)}
.kHand h2{font-family:'Unbounded','Inter',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.04em;margin:0 0 5px;line-height:1}
.kHandSub{font-size:12.4px;opacity:.82;margin-bottom:22px}
.kHandBtn{border:0;background:rgba(0,0,0,.24);color:inherit;padding:15px 28px;
  font:800 13px 'Inter',sans-serif;cursor:pointer;border-radius:99px}

/* question */
.kPlay{padding-bottom:96px}
.kTop2{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.kWho{flex:1;min-width:0}
.kWho b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:12.6px}
.kWho span{display:block;font-size:9.8px;color:var(--dim)}
/* the countdown ring */
.kClock{flex:none;width:40px;height:40px;position:relative;display:grid;place-items:center;color:var(--lime)}
.kClock svg{position:absolute;inset:0;width:100%;height:100%}
.kClock b{font:800 13.5px 'Unbounded','Inter',sans-serif;position:relative;color:inherit}
.kSkip{flex:none;background:transparent;border:1px solid rgba(253,244,227,.18);color:var(--mute);
  font:800 9.5px 'Inter',sans-serif;padding:6px 10px;border-radius:9px;cursor:pointer}
.kHear{display:inline-flex;align-items:center;gap:7px;font:700 10.4px 'Inter',sans-serif;color:var(--sun);
  border:1px solid rgba(255,197,61,.45);background:rgba(255,197,61,.1);padding:7px 12px;
  border-radius:99px;cursor:pointer;margin-bottom:12px}
.kQ{font-family:'Unbounded','Inter',sans-serif;font-size:19px;font-weight:700;line-height:1.28;
  letter-spacing:-.02em;margin:4px 0 13px}
.kAnsWrap{display:grid;gap:8px}
.kAns{display:flex;align-items:center;gap:11px;padding:15px 13px;border:0;text-align:left;
  font:800 13.8px 'Inter',sans-serif;cursor:pointer;color:#1a1024;border-radius:15px;width:100%}
.kAk{flex:none;width:26px;height:26px;border-radius:9px;background:rgba(0,0,0,.17);
  display:grid;place-items:center;font:800 11.5px 'Unbounded','Inter',sans-serif}
.kHelp{width:100%;margin-top:11px;padding:10px;border:1px solid rgba(253,244,227,.16);
  background:transparent;color:var(--dim);font:700 11px 'Inter',sans-serif;cursor:pointer;
  border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px}

/* reveal */
.kRes{text-align:center;padding-top:14px}
.kMark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;line-height:0}
.kRes h2{font-family:'Unbounded','Inter',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.035em;margin:0 0 4px}
.kResQ{color:var(--dim);font-size:11.6px;line-height:1.5;margin:0 0 13px;padding:0 8px}
.kAnsBlock{margin:0 2px 13px}
.kPicked{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:13px;margin-bottom:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.1)}
.kPicked .kVal{font:700 12.6px 'Inter',sans-serif;color:var(--mute);text-decoration:line-through}
.kCorrect{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:14px}
.kLab{font:800 8.5px 'Inter',sans-serif;letter-spacing:1.3px;flex:none;opacity:.72}
.kCorrect .kVal{font:800 14.5px 'Unbounded','Inter',sans-serif;line-height:1.1}
.kLearn{text-align:left;padding:13px 14px;border-radius:16px;margin:0 2px;
  background:rgba(79,195,247,.1);border:1px solid rgba(79,195,247,.34)}
.kLh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.kLh span{width:21px;height:21px;border-radius:7px;background:var(--sky);color:var(--skyT);
  display:grid;place-items:center;flex:none;line-height:0}
.kLh b{font:800 9.5px 'Inter',sans-serif;letter-spacing:1.6px;color:var(--sky)}
.kLearn p{margin:0;font-size:12.6px;line-height:1.6}

/* family bar */
.kFam{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(512px,calc(100% - 28px));
  padding:11px 12px;border-radius:15px;background:rgba(10,4,16,.9);
  border:1px solid rgba(253,244,227,.12);backdrop-filter:blur(6px);z-index:12}
.kFamL{display:flex;justify-content:space-between;align-items:baseline;font-size:10.2px;color:var(--dim);margin-bottom:6px}
.kFamL b{font-family:'Unbounded','Inter',sans-serif;font-size:12.4px;color:var(--lime)}
.kTrack{height:10px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;display:flex}
.kTrack i{display:block;height:100%}

/* Solo mode. The choice is deliberate rather than an accident of adding one
   child, because the two modes genuinely play differently: solo has no handoff
   and no ceremony, just a score to beat. */
.kMode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kM{border:1.5px solid rgba(253,244,227,.14);background:rgba(255,255,255,.03);
  border-radius:16px;padding:13px 11px;text-align:center;cursor:pointer;transition:.18s}
.kM.on{border-color:var(--sun);background:rgba(255,197,61,.11)}
.kM .kMi{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;margin:0 auto 8px;
  background:rgba(255,197,61,.16);color:var(--sun);line-height:0}
.kM.on .kMi{background:linear-gradient(150deg,var(--sun),#DFA01C);color:var(--sunT)}
.kM b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:13px;font-weight:800;letter-spacing:-.02em}
.kM span:last-child{display:block;font-size:10.6px;color:var(--dim);margin-top:3px;line-height:1.4}

/* The personal best. On the device only, which is why the note says so plainly:
   it is the one number Kids keeps, and a parent should know where it lives. */
.kBest{padding:13px 14px;border-radius:14px;margin-bottom:13px;
  background:rgba(200,241,53,.08);border:1px solid rgba(200,241,53,.28)}
.kBest.kNew{background:rgba(200,241,53,.14);border-color:rgba(200,241,53,.5)}
.kBestL{font:800 8.8px 'Inter',sans-serif;letter-spacing:1.5px;color:var(--lime);margin-bottom:5px}
.kBestV{font-family:'Unbounded','Inter',sans-serif;font-size:22px;font-weight:800;color:var(--lime);line-height:1}
.kBest p{margin:5px 0 0;font-size:11.2px;color:var(--dim);line-height:1.5}

/* Asked once after three solo games. A question, never a lock. */
.kBreak{margin-top:14px;padding:15px;border-radius:16px;
  background:rgba(79,195,247,.09);border:1px solid rgba(79,195,247,.3)}
.kBreak b{display:flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;
  font-size:13px;color:var(--sky);margin-bottom:6px}
.kBreak p{margin:0 0 13px;font-size:12px;color:var(--dim);line-height:1.6}
.kBreakRow{display:flex;gap:9px}
.kBreakRow .btn{flex:1;width:auto;margin:0}
@media(max-width:380px){.kMode{grid-template-columns:1fr}}

/* endings */
.kDoneHead{text-align:center;margin-bottom:14px}
.kBigTot{font-family:'Unbounded','Inter',sans-serif;font-size:44px;font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--lime)}
.kDoneSub{font-size:11.6px;color:var(--dim);margin-top:5px}
.kAw{display:flex;align-items:center;gap:11px;padding:10px;margin-bottom:7px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(253,244,227,.1)}
.kAwM{flex:none;width:37px;height:37px;border-radius:13px;display:grid;place-items:center;line-height:0}
.kAw b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:12px}
.kAw span span{display:block;font-size:10.2px;color:var(--dim);margin-top:2px}
.kAwP{flex:none;font-family:'Unbounded','Inter',sans-serif;font-size:14px;font-weight:800;color:var(--lime)}
.kStage{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-top:24px;
  position:relative;z-index:1}
/* Everything in normal flow, in a fixed order: medal, avatar, name, points,
   block. The previous version positioned the medal absolutely into the same
   band as the avatar, which is why they landed on top of each other and the
   score line ran through the block. */
.kTier{display:flex;flex-direction:column;align-items:center;width:98px;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.85,.25,1.05)}
.kTier.in{opacity:1;transform:none}
.kMedal{line-height:0;height:26px;display:grid;place-items:center;
  opacity:0;transform:scale(.5) rotate(-18deg);
  transition:opacity .4s ease .5s, transform .5s cubic-bezier(.2,1.5,.3,1) .5s;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.5))}
.kTier.in .kMedal{opacity:1;transform:none}
.kAvSlot{line-height:0;margin-top:5px}
.kTn{font-family:'Unbounded','Inter',sans-serif;font-size:11.6px;font-weight:700;margin-top:7px;
  text-align:center;line-height:1.2;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kTp{font:800 9.8px 'Inter',sans-serif;color:var(--dim);margin:3px 0 9px;letter-spacing:.4px}
.kBlock{width:100%;border-radius:16px 16px 5px 5px;display:grid;place-items:center;
  transform-origin:bottom;transform:scaleY(.04);opacity:.3;
  transition:transform .6s cubic-bezier(.2,.85,.25,1.05) .1s,opacity .35s ease .1s;
  position:relative;box-shadow:inset 0 -9px 0 rgba(0,0,0,.15)}
.kTier.in .kBlock{transform:none;opacity:1}
.kBlock:after{content:"";position:absolute;left:8%;right:8%;top:-5px;height:9px;
  border-radius:99px;background:rgba(255,255,255,.36)}
.kRank{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:26px;line-height:1;
  opacity:0;transition:opacity .35s ease .45s}
.kTier.in .kRank{opacity:1}
.kTier.win .kAvSlot{animation:kWinBob 2.4s ease-in-out 1.3s infinite}
@keyframes kWinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Confetti for the winner reveal. Pure CSS, and Calm mode never adds the class
   that starts it, so a child who needs stillness gets stillness. */
.kConf{position:absolute;left:0;right:0;top:0;height:460px;pointer-events:none;
  overflow:hidden;z-index:5}
.kConf i{position:absolute;top:-18px;left:var(--cx);width:9px;height:14px;
  background:var(--cc);border-radius:2px;opacity:0}
.kConf.pop i{animation:kFall 2.5s cubic-bezier(.3,.5,.6,1) var(--cd) forwards}
@keyframes kFall{
  0%{opacity:0;transform:translateY(-10px) rotate(var(--cr))}
  8%{opacity:1}
  100%{opacity:0;transform:translateY(450px) rotate(calc(var(--cr) + 540deg))}
}
.kWellDone{text-align:center;font-size:12.4px;color:var(--dim);line-height:1.55;
  margin-top:10px;max-width:34ch;margin-left:auto;margin-right:auto;
  opacity:0;transition:opacity .5s ease}
.kWellDone.in{opacity:1}
@media(max-width:400px){
  .kTier{width:31vw}
  .kTn{font-size:10.6px}
  .kRank{font-size:22px}
}
.kTotLine{text-align:center;opacity:0;transition:opacity .4s ease;margin-top:22px}
.kTotLine.in{opacity:1}
.kDoneActions{opacity:0;transition:opacity .4s ease}
.kDoneActions.in{opacity:1}
.kTotLine b{font-family:'Unbounded','Inter',sans-serif;color:var(--lime);font-size:14px}
.kBridge{padding:15px;border-radius:16px;margin-top:14px;
  background:linear-gradient(150deg,rgba(255,122,41,.14),rgba(240,80,155,.07));
  border:1px solid rgba(255,122,41,.34)}
.kBridge b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:13px;margin-bottom:5px}
.kBridge p{margin:0 0 11px;font-size:11.6px;line-height:1.6;color:var(--dim)}

@media(max-width:400px){
  .kHead h1,.kHead h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .kfEye{animation:none}
  .kTop:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   OTIYA FOR KIDS: how it works
   Written for the adult holding the phone, not the child. Five steps, four
   reassurances, one note about calm mode. Deliberately short: a parent reads
   this while children wait.
--------------------------------------------------------------------------- */
/* how it works, for kids: visual, not a wall of text */
.fwWrap{max-width:640px;margin:0 auto;padding:22px 4px 44px}
.fwHero{text-align:center;padding:6px 0 20px}
.fwFaces{display:flex;justify-content:center;margin-bottom:14px}
.fwFaces i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font:800 17px 'Unbounded','Inter',sans-serif;font-style:normal;margin-left:-10px;border:3px solid #1D0E27}
.fwFaces i:first-child{margin-left:0}
.fwH1{font-family:'Unbounded','Inter',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.035em;
  margin:0 0 9px;line-height:1.18}
.fwLede{color:var(--dim);font-size:13px;line-height:1.65;margin:0 auto;max-width:44ch}
.fwCta{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.fwFoot{margin-top:22px;padding-top:20px;border-top:1px solid rgba(253,244,227,.09)}
.fwGo{border:0;cursor:pointer;padding:13px 20px;font:800 13px 'Inter',sans-serif;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--sun),var(--tang));color:var(--sunT);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px))}
.fwAlt{border:1px solid rgba(255,197,61,.42);background:rgba(255,197,61,.09);color:var(--sun);
  padding:13px 17px;font:700 12.4px 'Inter',sans-serif;cursor:pointer;border-radius:10px}
/* The age point shown rather than stated: two children, same round, different
   question and different clock. A parent reads this in a glance. */
.fwFair{margin:20px 0;padding:16px;border-radius:18px;
  background:linear-gradient(160deg,rgba(43,217,198,.12),rgba(43,217,198,.04));
  border:1px solid rgba(43,217,198,.32)}
.fwFair > b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14.6px;color:var(--turq);
  margin-bottom:5px;line-height:1.25}
.fwFair > p{margin:0 0 14px;font-size:12.2px;color:var(--dim);line-height:1.6}
.fwSplit{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:460px){.fwSplit{grid-template-columns:1fr}}
.fwKid{padding:13px;border-radius:15px;background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.24)}
.fwTop{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fwAv{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:800 13px 'Unbounded','Inter',sans-serif;background:var(--kc);color:var(--kct)}
.fwWho{font-family:'Unbounded','Inter',sans-serif;font-size:12.6px;font-weight:800;display:block}
.fwAge{font:700 10px 'Inter',sans-serif;color:var(--dim);display:block;margin-top:1px}
.fwQ{font-size:11.6px;line-height:1.45;color:var(--ink);padding:9px 10px;border-radius:10px;
  background:rgba(255,255,255,.05);margin-bottom:8px}
.fwClock{display:flex;align-items:center;gap:8px;font:800 10.6px 'Inter',sans-serif;color:var(--kc)}
.fwRing{width:26px;height:26px;position:relative;flex:none}
.fwRing svg{position:absolute;inset:0;transform:rotate(-90deg)}
.fwSame{text-align:center;font:700 11px 'Inter',sans-serif;color:var(--turq);margin-top:12px;
  padding-top:11px;border-top:1px dashed rgba(43,217,198,.3)}
.fwSolo{padding:15px;border-radius:16px;margin-bottom:20px;
  background:rgba(167,139,250,.09);border:1px solid rgba(167,139,250,.3)}
.fwSolo b{display:flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;
  font-size:13.4px;color:var(--vio);margin-bottom:6px;line-height:1.3}
.fwSolo p{margin:0;font-size:12.2px;color:var(--dim);line-height:1.6}
.fwSolo em{font-style:normal;color:var(--ink);font-weight:700}
.fwSteps{display:grid;gap:11px}
.fwStep{display:flex;align-items:flex-start;gap:13px;padding:15px;border-radius:17px;
  background:var(--tint,rgba(255,255,255,.04));
  border:1px solid var(--lnkH,rgba(255,255,255,.1));position:relative;overflow:hidden}
.fwStep:before{content:"";position:absolute;right:-24px;top:-24px;width:92px;height:92px;border-radius:50%;
  background:var(--lnk,rgba(255,255,255,.06))}
.fwStep > *{position:relative}
.fwN{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  font:800 15px 'Unbounded','Inter',sans-serif;
  background:linear-gradient(150deg,var(--ac),var(--cDeep,#000));
  color:var(--acT);box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
.fwStep b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14.4px;font-weight:800;letter-spacing:-.022em}
.fwStep span span{display:block;margin-top:4px;font-size:12.2px;color:var(--dim);line-height:1.6}
.fwPromise{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
@media(max-width:460px){.fwPromise{grid-template-columns:1fr}}
.fwP{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.1)}
.fwP i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;line-height:0;
  background:rgba(200,241,53,.15);color:var(--lime)}
.fwP b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:12.4px}
.fwP span span{display:block;margin-top:3px;font-size:11.4px;color:var(--dim);line-height:1.55}
@media(max-width:420px){.fwH1{font-size:20px}.fwGo,.fwAlt{flex:1;justify-content:center}}

/* the hero copy, brighter than before but still below the wordmark */
.heroLead{text-align:center;color:var(--ink);font-size:16px;font-weight:600;line-height:1.6;
  max-width:52ch;margin:16px auto 0;position:relative;z-index:2;
  animation:none}
.heroLead2{text-align:center;color:var(--dim);font-size:13.6px;font-weight:500;line-height:1.6;
  max-width:42ch;margin:10px auto 0;position:relative;z-index:2;
  animation:none}
@media(max-width:520px){.heroLead{font-size:14.4px}.heroLead2{font-size:12.6px}}

/* Second raffle link on desktop only. Removing it everywhere left the card
   looking scanty on a large screen. */
.acDeskOnly{display:none}
@media(min-width:640px){.acDeskOnly{display:inline-flex}}

/* how raffles work */
.rhWrap{max-width:640px;margin:0 auto;padding:22px 4px 44px}
.rhEy{display:flex;align-items:center;gap:8px;font:800 9.5px 'Inter',sans-serif;letter-spacing:1.9px;
  color:var(--vio);margin-bottom:9px}
.rhEy s{width:18px;height:2px;display:block;background:var(--vio)}
.rhH1{font-family:'Unbounded','Inter',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.035em;
  margin:0 0 7px;line-height:1.12}
.rhLede{color:var(--dim);font-size:13px;line-height:1.66;margin:0 0 18px}
.rhSteps{display:grid;gap:10px}
.rhStep{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:16px;
  background:var(--tint,rgba(255,255,255,.03));
  border:1px solid var(--line,rgba(253,244,227,.22))}
.rhNum{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 12px 'Unbounded','Inter',sans-serif;background:var(--ac);color:var(--acT)}
.rhStep b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14.2px;font-weight:800;letter-spacing:-.022em}
.rhStep span span{display:block;margin-top:4px;font-size:12.2px;color:var(--dim);line-height:1.6}
.rhStyles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.rhSty{padding:13px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.1)}
.rhSty b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:13px;margin-bottom:4px;color:var(--vio)}
.rhSty span{font-size:11.6px;color:var(--dim);line-height:1.55}
.rhCta{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(253,244,227,.09)}
@media(max-width:520px){.rhStyles{grid-template-columns:1fr}.rhH1{font-size:22px}}

/* admin: otiya for kids */
.akKpis{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:13px}
@media(min-width:620px){.akKpis{grid-template-columns:repeat(4,1fr)}}
.akKpi{padding:13px;border-radius:13px;background:rgba(255,255,255,.04);
  border:1px solid rgba(253,244,227,.1)}
.akKpi b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:20px;font-weight:800;
  color:var(--sun);line-height:1}
.akKpi span{display:block;font:700 9.4px 'Inter',sans-serif;letter-spacing:1.1px;
  color:var(--mute);margin-top:5px}
.akRow{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(253,244,227,.09);
  margin-bottom:7px;flex-wrap:wrap}
.akRow b{flex:1;min-width:130px;font-family:'Unbounded','Inter',sans-serif;font-size:13.2px}
.akN{font:700 11.4px 'Inter',sans-serif;color:var(--dim)}
.akBand{color:var(--mute);font-size:10.8px}
.akSw{flex:none;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.15);
  position:relative;cursor:pointer;transition:background .2s}
.akSw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .2s}
.akSw.on{background:var(--lime)}
.akSw.on i{left:21px}
.akNote{font-size:11.6px;color:var(--mute);line-height:1.65;margin-top:13px;
  padding:13px;border-radius:12px;border:1px solid rgba(253,244,227,.09)}
.akNote b{color:var(--ink);display:block;margin-bottom:4px;font-family:'Unbounded','Inter',sans-serif;font-size:12px}

/* Projecting is worth telling people about rather than leaving them to find it. */
.fwBig{padding:14px 15px;border-radius:16px;margin-bottom:14px;
  background:rgba(79,195,247,.08);border:1px solid rgba(79,195,247,.28)}
.fwBig b{display:flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;
  font-size:13px;color:var(--sky);margin-bottom:5px;line-height:1.3}
.fwBig p{margin:0;font-size:12px;color:var(--dim);line-height:1.6}

/* The no-score round-up. No ranking anywhere on this screen. */
.kNsList{display:grid;gap:8px;margin:16px 0}
.kNsRow{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.09)}
.kNsRow b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:13px}
.kNsRow span span{display:block;font-size:11.2px;color:var(--dim);margin-top:2px}
/* A fact from a question they got wrong: the one honest thing to offer a family
   that scored nothing, rather than consolation. */
.kNsFact{padding:14px 15px;border-radius:15px;margin-bottom:13px;
  background:rgba(200,241,53,.08);border:1px solid rgba(200,241,53,.28)}
.kNsFact b{display:flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;
  font-size:12.6px;color:var(--lime);margin-bottom:5px}
.kNsFact p{margin:0;font-size:12.2px;color:var(--ink);line-height:1.6}
.kNsRow2{display:flex;gap:9px;margin-top:16px}
.kNsRow2 .btn{flex:1;width:auto;margin:0}
@media(max-width:380px){.kNsRow2{flex-direction:column}}

/* Every grid and card is clamped so none can push the page wider than the screen. */
@media(max-width:560px){
  .wrap{padding-left:14px;padding-right:14px}
  .actquad,.kPk,.kidsWrap,.fwWrap,.rhWrap{max-width:100%}
  .acCard,.aR{max-width:100%}
  .acField input{min-width:0}
}

/* Fixed controls stop floating over the page on a phone.

   .authnav, .profbtn, .sndbtn and .musbtn were all position:fixed. At the top of
   the page the hero's 64px of padding clears them, but the moment anything
   scrolls they sit permanently on top of it, which is why "Log in" and "Create
   free account" were sitting across the first card's title.

   Below 900px they become absolute, so they belong to the top of the document
   and scroll away with the hero like any other element. Nothing floats, so
   nothing can cover anything. Above 900px there is room either side of the
   content column and they stay fixed, which is genuinely useful there. */
@media(max-width:899px){
  .authnav,.profbtn{position:absolute}
  .sndbtn,.musbtn{position:absolute}
  /* Room at the top of the page for the row they now occupy. */
  .wrap{padding-top:72px}
}
/* In-game controls stay fixed, because during play there is nothing above them
   to scroll and a player needs them reachable at all times. */
.exitfs,.backbtn,.homebtn{position:fixed}

/* The ready button. The arrow was a bare glyph after a text node, so it wrapped
   onto its own line and sat left of centre. Now a centred flex row that cannot
   break, with the arrow nudging forward to invite the tap. */
.kHandBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;max-width:100%}
.kHandBtn .kGo{display:inline-grid;place-items:center;line-height:0;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  animation:kNudge 1.5s ease-in-out infinite}
@keyframes kNudge{0%,100%{transform:translateX(0)}45%{transform:translateX(5px)}}
.kHandBtn:active .kGo{transform:translateX(8px)}
@media(prefers-reduced-motion:reduce){.kHandBtn .kGo{animation:none}}

/* The age pills had a group label with no styling at all, so "Age" rendered as a
   bare italic word jammed against the buttons. */
.kBands{display:flex;align-items:center;gap:6px;flex:none}
.kBands em{font-style:normal;font:800 8.6px 'Inter',sans-serif;letter-spacing:1.3px;
  color:var(--mute);text-transform:uppercase;margin-right:1px}
.kBands > :is(span,button){font:800 11px 'Inter',sans-serif;padding:7px 9px;border-radius:9px;
  cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.14);
  color:var(--dim);transition:.16s;white-space:nowrap}
.kBands > :is(span,button):hover{border-color:var(--lime);color:var(--ink)}
.kBands > :is(span,button).on{background:rgba(200,241,53,.16);border-color:var(--lime);color:var(--lime)}
@media(max-width:420px){
  .kBands em{display:none}
  .kBands > :is(span,button){padding:7px 8px;font-size:10.4px}
}

/* Targeted August 2026 fixes. These selectors intentionally sit on top of the
   existing styles so unrelated quiz, raffle, workspace and admin surfaces remain untouched. */
.bTitleInline{display:block;width:min(100%,560px);margin-top:6px;padding:5px 2px 7px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);font:800 20px/1.25 'Unbounded','Inter',sans-serif;letter-spacing:-.03em}
.bTitleInline::placeholder{color:var(--mute)}
.bTitleInline:hover{border-bottom-color:rgba(253,244,227,.18)}
.bTitleInline:focus{outline:none;border-bottom-color:var(--turq)}

/* Otiya Kids identity */
.kAv{overflow:hidden;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.30);box-shadow:0 6px 16px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.35)}
.kAvatarSvg{display:block;width:100%;height:100%}
.kAvatarPick{flex:none;width:54px;border:0;background:transparent;color:var(--dim);padding:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.kAvatarPick small{font:800 7px 'Inter',sans-serif;letter-spacing:.8px}
.kNameWrap{flex:1;min-width:110px;display:flex;align-items:center;gap:7px;border-radius:10px;padding:2px 4px 2px 8px;background:rgba(0,0,0,.12)}
.kDice{flex:none;border:1px solid rgba(253,244,227,.16);background:rgba(255,255,255,.07);color:var(--ink);border-radius:9px;padding:7px 8px;display:inline-flex;align-items:center;gap:5px;font:800 9px 'Inter',sans-serif}
.kDice span{display:inline}
.kAvatarLead{color:var(--dim);font-size:12px;line-height:1.55;margin:6px 0 14px}
.kAvatarGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 15px}
.kAvatarChoice{aspect-ratio:1;border-radius:18px;border:2px solid rgba(253,244,227,.10);background:rgba(255,255,255,.05);padding:5px;overflow:hidden}
.kAvatarChoice.on{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,241,53,.13)}
.kAvatarChoice .kAvatarSvg{width:100%;height:100%}
.kAvEmpty{display:grid!important;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1.5px dashed rgba(253,244,227,.32);color:var(--dim)}
.kAvatarTools{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:62px}.kAvatarTools .kAvatarPick{width:62px}.kAvatarPick.empty small{color:var(--lime)}.kAvatarRandom{border:0;background:transparent;color:var(--turq);font:800 7.6px 'Inter',sans-serif;display:inline-flex;align-items:center;gap:3px;padding:2px 0;cursor:pointer}.kAvatarSheetBtns{display:grid;grid-template-columns:1fr 1.35fr;gap:9px}.kAvatarSheetBtns .btn,.kAvatarSheetBtns .ghost{width:100%;margin:0}.kAvatarSheetBtns button:disabled{opacity:.4;cursor:not-allowed}
.kHandAv{width:112px;height:112px;padding:5px;font-size:0;background:rgba(0,0,0,.10);border-color:rgba(0,0,0,.12)}
.kHandAv .kAv{margin:auto;border-width:3px}
.kHandBtn{min-width:170px;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;padding:10px 18px!important}
.kHandBtn>span{display:inline-flex;align-items:center}
.kHandBtn .kGo{margin:0}

/* Otiya Kids home card gets its own playful identity without touching other home actions. */
.acKidsCard{position:relative;background:radial-gradient(circle at 88% 14%,rgba(79,195,247,.18),transparent 24%),radial-gradient(circle at 10% 82%,rgba(240,80,155,.12),transparent 26%),rgba(255,197,61,.07)}
.acKidsCard .acStrip{background:linear-gradient(135deg,var(--sun),var(--tang));}
.acKidsCard .acIco{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.34);overflow:hidden}

/* Topic cards: compact game-world posters, not utility rows. */
.kTopicGrid{display:grid;grid-template-columns:1fr;gap:12px}
.kTopicCard{position:relative;display:grid;grid-template-columns:118px 1fr 28px;gap:13px;align-items:center;width:100%;min-height:126px;padding:11px;border:1.5px solid rgba(253,244,227,.11);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.12));color:var(--ink);text-align:left;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.12);transition:transform .18s,border-color .18s,box-shadow .18s}
.kTopicCard:hover{transform:translateY(-2px);border-color:var(--kc);box-shadow:0 17px 34px rgba(0,0,0,.18)}
.kTopicCard.on{border-color:var(--kc);box-shadow:0 0 0 3px rgba(255,255,255,.11),0 17px 34px rgba(0,0,0,.18)}
.kTopicArt{position:relative;min-height:102px;border-radius:16px;background:linear-gradient(145deg,var(--kc),rgba(29,14,39,.85));overflow:hidden;display:grid;place-items:center;isolation:isolate}
.kTopicArt:before,.kTopicArt:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%;z-index:-1}
.kTopicArt:before{width:92px;height:92px;left:-28px;top:-28px}.kTopicArt:after{width:62px;height:62px;right:-18px;bottom:-20px}
.kTopicMain{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:var(--kct);background:rgba(255,255,255,.28);box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.42)}
.kTopicArt i{position:absolute;font:900 7px 'Inter',sans-serif;font-style:normal;letter-spacing:.8px;padding:4px 6px;border-radius:7px;background:rgba(29,14,39,.65);color:var(--ink)}.kTopicArt .b0{left:8px;bottom:10px}.kTopicArt .b1{right:7px;top:8px}.kTopicArt .b2{right:8px;bottom:12px}
.kTopicCopy{min-width:0}.kTopicTag{display:block;color:var(--kc);font:900 8px 'Inter',sans-serif;letter-spacing:1px;margin-bottom:5px}.kTopicCopy>b{display:block;font:800 15px/1.18 'Unbounded','Inter',sans-serif}.kTopicCopy p{margin:4px 0 7px;color:var(--dim);font-size:11.5px;line-height:1.4}.kTopicMix{display:inline-flex;align-items:center;gap:5px;color:var(--kc);font:800 9px 'Inter',sans-serif}.kTopicCheck{width:25px;height:25px;border:2px solid rgba(253,244,227,.18);border-radius:50%;display:grid;place-items:center;color:var(--kct)}.kTopicCard.on .kTopicCheck{background:var(--kc);border-color:var(--kc)}
.kTopicCard.soon{opacity:.65;cursor:default}.kTopicCard.soon:hover{transform:none;border-color:rgba(253,244,227,.11);box-shadow:0 12px 28px rgba(0,0,0,.12)}

/* Podium: more dimensional stage, breathing room and an actual winner moment. */
.kPodiumWrap{max-width:600px;padding-bottom:48px}.kPodiumWrap .kHead{text-align:center}.kPodiumWrap .kEy{justify-content:center}
.kPodiumGlow{position:absolute;left:10%;right:10%;top:100px;height:260px;background:radial-gradient(circle,rgba(255,197,61,.19),transparent 68%);filter:blur(10px);pointer-events:none}
.kPodiumGlow:before,.kPodiumGlow:after{content:"";position:absolute;inset:-10% 22%;background:linear-gradient(110deg,transparent 43%,rgba(255,216,92,.18) 49%,transparent 55%);transform-origin:50% 100%;animation:kSpotSweep 5.8s ease-in-out infinite}.kPodiumGlow:after{transform:scaleX(-1);animation-delay:-2.9s}@keyframes kSpotSweep{0%,100%{transform:rotate(-8deg);opacity:.35}50%{transform:rotate(9deg);opacity:.85}}
.kWinnerCrown{height:50px;width:68px;margin-bottom:-4px;opacity:0;transform:translateY(-18px) scale(.62) rotate(-5deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));transition:opacity .55s ease .8s,transform .8s cubic-bezier(.2,1.45,.25,1) .8s}.kTier.in .kWinnerCrown{opacity:1;transform:translateY(0) scale(1) rotate(0);animation:kCrownFloat 3s ease-in-out 1.7s infinite}.kWinnerCrown svg{display:block;width:100%;height:100%;overflow:visible}.kCrownSweep{animation:kCrownShine 3.2s ease-in-out 1.8s infinite}@keyframes kCrownFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}@keyframes kCrownShine{0%,28%{transform:translateX(0)}60%,100%{transform:translateX(185px)}}
.kTieLine{text-align:center;color:var(--sun);font:800 11px/1.45 'Unbounded','Inter',sans-serif;margin:7px auto 0;max-width:36ch;opacity:0;transition:opacity .5s ease}.kTieLine.in{opacity:1}
.kZeroTotal{margin:14px 0;padding:16px;border-radius:18px;text-align:center;background:linear-gradient(145deg,rgba(79,195,247,.10),rgba(200,241,53,.055));border:1px solid rgba(79,195,247,.25)}.kZeroTotal>span{display:block;font:900 8px 'Inter',sans-serif;letter-spacing:1.3px;color:var(--sky);text-transform:uppercase}.kZeroTotal>b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:24px;color:var(--lime);margin:4px 0}.kZeroTotal p{margin:0 auto;color:var(--dim);font-size:11.5px;line-height:1.55;max-width:38ch}
.kStageShell{position:relative;margin-top:10px;padding:36px 12px 20px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.18));border:1px solid rgba(253,244,227,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.22);overflow:hidden}
.kStageShell:before{content:"";position:absolute;left:8%;right:8%;top:16px;height:2px;background:linear-gradient(90deg,transparent,var(--sun),transparent);opacity:.65}
.kStage{margin-top:6px;gap:12px;min-height:248px}.kTier{width:112px}.kMedal{height:32px;margin-bottom:2px}.kAvSlot{margin-top:8px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}.kTn{font-size:11.8px;margin-top:11px;min-height:29px;display:flex;align-items:flex-end;justify-content:center;white-space:normal;overflow:visible;text-overflow:clip}.kTp{font-size:10.4px;margin:5px 0 14px}.kBlock{border-radius:18px 18px 7px 7px;box-shadow:inset 0 -12px 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.52),0 14px 22px rgba(0,0,0,.18);transform:perspective(240px) rotateX(-2deg) scaleY(.04)}.kTier.in .kBlock{transform:perspective(240px) rotateX(-2deg) scaleY(1)}.kBlock:after{left:6%;right:6%;top:-7px;height:12px;background:rgba(255,255,255,.42);box-shadow:0 3px 7px rgba(0,0,0,.15)}.kRank{font-size:30px;text-shadow:0 1px 0 rgba(255,255,255,.16)}
.kStageFloor{height:25px;margin:-3px 7% 0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.24));transform:perspective(200px) rotateX(62deg);box-shadow:0 18px 24px rgba(0,0,0,.22)}.kStageFloor span{display:block;width:42%;height:4px;margin:auto;border-radius:99px;background:rgba(255,197,61,.55);filter:blur(.5px)}
.kConf{height:560px}.kConf i{width:10px;height:16px}.kConf.pop i{animation-duration:3s}.kTotLine{margin-top:18px;font-size:13px}.kTotLine b{font-size:16px}
@keyframes kWinBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.035)}}

@media(max-width:520px){.kRow{align-items:flex-start;flex-wrap:wrap}.kNameWrap{min-width:calc(100% - 72px)}.kBands{margin-left:63px}.kDel{margin-left:auto}.kTopicCard{grid-template-columns:96px 1fr 26px;min-height:116px}.kTopicArt{min-height:92px}.kTopicCopy>b{font-size:13.4px}.kTopicCopy p{font-size:10.8px}.kTier{width:30vw;max-width:108px}.kStage{gap:5px}.kTn{font-size:10.3px}.kStageShell{padding-left:4px;padding-right:4px}}
@media(max-width:390px){.kDice span{display:none}.kAvatarGrid{grid-template-columns:repeat(3,1fr)}.kTopicCard{grid-template-columns:82px 1fr 22px;padding:9px;gap:9px}.kTopicArt{min-height:82px}.kTopicMain{width:46px;height:46px}.kTopicArt i{display:none}.kTopicMix{font-size:8.3px}.kStageShell{padding-top:28px}.kAvSlot .kAv{transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.kTopicCard,.kTier,.kBlock,.kMedal,.kWellDone,.kDoneActions,.kTotLine{transition:none!important}.kTier.win .kAvSlot,.kWinnerCrown,.kCrownSweep,.kPodiumGlow:before,.kPodiumGlow:after{animation:none!important}.kConf{display:none}}

/* Homepage enhancement preview only. Existing Otiya structure remains intact. */

.homeStat{background:rgba(253,244,227,.055);border:1px solid rgba(253,244,227,.07);border-radius:12px;padding:11px}
.homeStat b{font-size:20px;display:block;line-height:1}.homeStat span{font-size:9.5px;color:var(--dim);font-weight:700;display:block;margin-top:5px}
.homeProofNote{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--dim);font-size:10.5px;font-weight:700;margin-top:9px}
.homeProofNote i{color:var(--lime);font-style:normal}

/* Existing action cards, only interaction polish. */
.acCard{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.acCard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.17)}
.acCard .acArrow{transition:transform .2s ease}.acCard:hover .acArrow{transform:translateX(4px)}
.acCard .acIco{transition:transform .22s ease}.acCard:hover .acIco{transform:translateY(-2px) scale(1.04)}

.kidsMiniStage{height:238px;background:linear-gradient(145deg,#2B1738,#351941);border-radius:16px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.kidsMiniPod{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:7px}.kidsMiniPod i{display:grid;place-items:center;font-style:normal;font-weight:950;color:#201126;border-radius:8px 8px 3px 3px;box-shadow:inset 0 -6px rgba(0,0,0,.14)}.kidsMiniPod .p2{width:70px;height:70px;background:var(--turq)}.kidsMiniPod .p1{width:78px;height:105px;background:var(--tang)}.kidsMiniPod .p3{width:66px;height:54px;background:var(--lime)}.kidsMiniAvatar{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#7B4D35;border:5px solid #FFD56B;font-size:29px;animation:kidsMiniBob 2.6s ease-in-out infinite}.kidsMiniCrown{position:absolute;left:50%;top:5px;transform:translateX(-50%);font-size:28px;filter:drop-shadow(0 7px 9px rgba(0,0,0,.25));animation:kidsMiniCrown 1.9s ease-in-out infinite}@keyframes kidsMiniBob{50%{transform:translate(-50%,-5px)}}@keyframes kidsMiniCrown{50%{transform:translate(-50%,-4px) rotate(3deg)}}

@media(prefers-reduced-motion:reduce){.kidsMiniAvatar,.kidsMiniCrown{animation:none!important}}

/* V2 visual prototype. No production logic is changed. */

/* Live quiz */
.quizCanvas{padding:27px}.qPhone{position:absolute;left:7%;top:10%;width:49%;padding:17px;border-radius:18px;background:#241231;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 45px rgba(0,0,0,.32);transform:rotate(-2deg);animation:qFloat 5s ease-in-out infinite}.qPhone small{font-size:7.5px;letter-spacing:.12em;color:var(--dim);font-weight:900}.qPhone>b{display:block;font-size:14px;line-height:1.35;margin:9px 0 13px}.qChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px}.qChoices i{font-style:normal;color:#25142c;padding:10px 8px;border-radius:8px;font-size:9px;font-weight:900;box-shadow:inset 0 -4px rgba(0,0,0,.12)}
.qReveal{position:absolute;right:5%;top:9%;width:33%;background:linear-gradient(145deg,#173c37,#1f2d35);border:1px solid rgba(43,217,198,.28);padding:16px;border-radius:17px;box-shadow:0 18px 38px rgba(0,0,0,.25);animation:qFloat 5s ease-in-out -1.8s infinite}.qReveal span{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.12em}.qReveal b{display:block;font-family:'Unbounded';font-size:16px;margin:7px 0}.qReveal p{font-size:8.5px;line-height:1.45;color:#c9d9d5;margin:0}
.livePodium{position:absolute;left:26%;right:6%;bottom:22px;height:158px;display:flex;align-items:flex-end;justify-content:center;gap:8px}.lpPerson{width:25%;text-align:center;position:relative}.lpPerson span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;margin:0 auto 5px;background:#51365e;border:3px solid rgba(255,255,255,.25);font-size:9px;font-weight:950}.lpPerson b{font-size:8px;display:block;margin-bottom:5px}.lpPerson i{font-style:normal;display:grid;place-items:center;color:#26122d;font-family:'Unbounded';font-size:19px;font-weight:950;border-radius:10px 10px 4px 4px;box-shadow:inset 0 -8px rgba(0,0,0,.14)}.lpPerson.p1 i{height:83px;background:var(--tang)}.lpPerson.p2 i{height:59px;background:var(--turq)}.lpPerson.p3 i{height:45px;background:var(--lime)}.lpPerson em{position:absolute;left:50%;top:-28px;transform:translateX(-50%);font-style:normal;color:#ffd45a;font-size:25px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4));animation:crownBob 2.4s ease-in-out infinite}.sA{background:var(--mag);right:20%;top:-10px}.sB{background:var(--lime);right:36%;top:-30px;animation-delay:-1.1s}.sC{background:var(--turq);right:9%;top:-22px;animation-delay:-2s}@keyframes qFloat{50%{transform:translateY(-5px) rotate(-1deg)}}@keyframes crownBob{50%{transform:translate(-50%,-5px) rotate(4deg)}}
/* Raffle */
.raffleCanvas{padding:24px}.raffleModes{display:flex;justify-content:center;gap:6px;position:relative;z-index:3}.raffleModes span{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);color:var(--dim);font-size:7.5px;font-weight:900}.raffleModes .on{background:var(--tang);color:#38191a;border-color:var(--tang)}.drumScene{position:absolute;left:3%;top:48px;bottom:18px;width:62%}.drumGlow{position:absolute;width:250px;height:170px;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,197,61,.24),rgba(255,122,41,.08) 42%,transparent 70%);filter:blur(6px);animation:drumPulse 1.4s ease-in-out infinite}.drumHead{position:absolute;left:-5px;right:-5px;top:-23px;height:48px;border-radius:50%;background:radial-gradient(circle,#f0d3a7,#d7a66f);border:6px solid #4a2039}.drumLace{position:absolute;inset:30px 23px 20px;opacity:.5;background:repeating-linear-gradient(62deg,transparent 0 18px,#f5d3a0 19px 21px,transparent 22px 38px),repeating-linear-gradient(-62deg,transparent 0 18px,#f5d3a0 19px 21px,transparent 22px 38px)}.drumStick{position:absolute;width:90px;height:8px;background:#d9b071;border-radius:9px;top:24%;z-index:4;transform-origin:90% 50%}.ds1{left:8%;transform:rotate(30deg);animation:stick1 .7s ease-in-out infinite alternate}.ds2{right:8%;transform:rotate(150deg);animation:stick2 .7s ease-in-out infinite alternate}.nameChip{position:absolute;padding:6px 9px;border-radius:999px;background:#342040;border:1px solid rgba(255,255,255,.1);font-size:8px;font-weight:850;color:var(--dim)}.n1{left:2%;top:38%}.n2{right:1%;top:28%}.n3{right:4%;bottom:22%;color:var(--lime)}.n4{left:10%;bottom:15%}.winnerRibbon{position:absolute;right:4%;top:31%;width:31%;padding:20px 14px;text-align:center;border-radius:18px;background:linear-gradient(145deg,#3b2146,#27152f);border:1px solid rgba(255,197,61,.2);box-shadow:0 18px 40px rgba(0,0,0,.28)}.winnerRibbon small{font-size:7px;color:var(--sun);font-weight:950;letter-spacing:.12em}.winnerRibbon b{display:block;font-family:'Unbounded';font-size:21px;margin:8px 0 5px}.winnerRibbon span{font-size:8px;color:var(--dim)}@keyframes drumPulse{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}@keyframes stick1{to{transform:rotate(12deg)}}@keyframes stick2{to{transform:rotate(168deg)}}
/* Kids */
.kidsCanvas{padding:22px}.kidTopics{position:absolute;left:4%;top:6%;width:43%;display:grid;gap:7px}.kidTopics>div{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;padding:9px;border-radius:12px;background:linear-gradient(100deg,#352047,#24142f);border:1px solid rgba(255,255,255,.08);box-shadow:0 9px 18px rgba(0,0,0,.15)}.kidTopics i{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--lime),var(--turq));color:#233024;font-style:normal;font-weight:950}.kidTopics b{font-size:8.5px}.kidTopics small{font-size:7px;color:var(--dim);margin-top:2px}.kidAvatars{position:absolute;left:5%;bottom:10%;display:flex;gap:7px}.kidAvatars span{position:relative;width:42px;height:42px;border-radius:50%;background:var(--skin);border:3px solid rgba(255,255,255,.55);font-size:0;box-shadow:0 8px 16px rgba(0,0,0,.2)}.kidAvatars span:before{content:'';position:absolute;left:7px;right:7px;top:-3px;height:17px;border-radius:50% 50% 38% 38%;background:var(--hair)}.kidAvatars span:after{content:'••';position:absolute;left:0;right:0;top:15px;text-align:center;color:#2c1814;font-size:9px;letter-spacing:7px;padding-left:7px}.kidName{position:absolute;left:49%;top:7%;width:23%;padding:12px;border-radius:14px;background:var(--lime);color:#28331a;transform:rotate(-1deg);box-shadow:0 12px 24px rgba(0,0,0,.18)}.kidName small{font-size:6.5px;font-weight:950;letter-spacing:.1em}.kidName b{display:block;font-family:'Unbounded';font-size:11px;margin:5px 0}.kidName i{font-style:normal;font-size:7px;font-weight:850}.kidPodium{position:absolute;right:2%;bottom:17px;width:53%;height:210px;display:flex;align-items:flex-end;justify-content:center;gap:7px}.kp{width:29%;text-align:center;position:relative}.kp span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 5px;background:#8b5c43;border:4px solid rgba(255,255,255,.62);font-size:8px;font-weight:950}.kp b{display:block;font-size:7px;line-height:1.2;min-height:18px}.kp i{font-style:normal;display:grid;place-items:center;color:#24122c;font-family:'Unbounded';font-size:20px;font-weight:950;border-radius:12px 12px 5px 5px;box-shadow:inset 0 -9px rgba(0,0,0,.14)}.kp.k1 i{height:94px;background:var(--tang)}.kp.k2 i{height:66px;background:var(--turq)}.kp.k3 i{height:50px;background:var(--lime)}.kp em{position:absolute;left:50%;top:-32px;transform:translateX(-50%);font-style:normal;color:#ffd34f;font-size:29px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4));animation:crownBob 2.2s ease-in-out infinite}
/* Templates */
.tplCanvas{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:13px;align-content:center}.tplShowCard{position:relative;padding:18px 16px 16px 62px;border-radius:16px;background:linear-gradient(145deg,#342043,#24132f);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 28px rgba(0,0,0,.18);transition:.25s}.tplShowCard i{position:absolute;left:15px;top:17px;width:35px;height:35px;border-radius:10px;display:grid;place-items:center;color:#28142f;font-style:normal;font-size:8px;font-weight:950}.tplShowCard b{display:block;font-size:10px}.tplShowCard small{display:block;color:var(--dim);font-size:7.5px;margin-top:4px}.tplShowCard span{display:inline-block;margin-top:9px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:#cdbed5;font-size:7px}.t1{transform:rotate(-1.2deg)}.t2{transform:translateY(9px) rotate(1deg)}.t3{transform:translateY(-6px) rotate(.6deg)}.t4{transform:translateY(4px) rotate(-.8deg)}

@media(max-width:470px){.qPhone{left:4%;width:60%}.qReveal{right:3%;width:34%;padding:10px}.livePodium{left:14%;right:2%}.kidTopics{width:52%}.kidName{left:59%;width:37%}.kidPodium{right:0;width:58%;height:180px}.winnerRibbon{width:36%;right:2%}.drumScene{width:68%;left:-4%}.tplCanvas{grid-template-columns:1fr;padding:18px;gap:8px}.tplShowCard{padding-top:13px;padding-bottom:13px}.t1,.t2,.t3,.t4{transform:none}}
@media(prefers-reduced-motion:reduce){.qPhone,.qReveal,.lpPerson em,.drumGlow,.drumStick,.kp em{animation:none!important}}

/* Live quiz. Question and reveal sit in their own row, podium has its own protected zone. */

/* Kids. Three calm zones, no element competes with the podium. */

/* Raffle. One realistic talking drum, one winner card, no competing graphics. */

.r4Skin{position:absolute;left:20px;right:20px;top:4px;height:54px;border-radius:50%;background:radial-gradient(ellipse at 40% 32%,#f8e7c6,#d7bb8c 62%,#b89564);border:7px solid #4a1f10;z-index:4;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}.r4Body{position:absolute;left:37px;right:37px;top:34px;bottom:20px;border-radius:40% 40% 32% 32%;background:linear-gradient(90deg,#5d271b,#b95b32 23%,#e79050 50%,#b95b32 77%,#5d271b);border:6px solid #4a1f10;overflow:hidden}.r4Body:after{content:'';position:absolute;inset:14px 8px;background:repeating-linear-gradient(62deg,transparent 0 16px,rgba(247,222,177,.75) 17px 19px,transparent 20px 34px),repeating-linear-gradient(-62deg,transparent 0 16px,rgba(247,222,177,.75) 17px 19px,transparent 20px 34px)}.r4Body i{display:none}.r4Waist{position:absolute;left:72px;right:72px;top:99px;height:22px;border-radius:50%;background:#4a1f10;z-index:3}.r4Name{position:absolute;left:0;right:0;bottom:-4px;text-align:center}.r4Name small{display:block;color:var(--dim);font-size:6.5px;font-weight:950;letter-spacing:.12em}.r4Name b{display:block;font-family:'Unbounded';font-size:14px;color:var(--lime);margin-top:3px}
.r4Stick{position:absolute;top:28%;width:100px;height:8px;background:linear-gradient(90deg,#8b5a2d,#e1bd83);border-radius:8px;transform-origin:90% 50%;z-index:5}.r4Stick.left{left:2%;transform:rotate(27deg);animation:r4StickL 1.35s ease-in-out infinite}.r4Stick.right{right:2%;transform:rotate(153deg);animation:r4StickR 1.35s ease-in-out infinite}

@keyframes r4StickL{50%{transform:rotate(11deg)}}@keyframes r4StickR{50%{transform:rotate(169deg)}}

/* Templates and solo. Real pack names come from POOLS. */

/* V5 layout fixes: protected zones, no overlapping components. */

/* Kids */

/* Raffle */

/* Templates and Solo */

/* Live */

/* Kids */

/* Raffle */

/* Templates */

/* live */

/* kids */

/* raffle */

/* templates and solo */

/* Live podium: strict vertical zones */

/* Kids podium: all 3 places, crown safely above winner */

/* Wheel: disc rotates, pointer does not */

/* Templates: remove dead space and make the choice feel inviting */

/* General responsive cleanup */

/* Interaction fix: never pause a panel's visibility transition. */

/* Gathering: one quieter visual language, not four coloured outlines. */
.factPills .heropill{
  border-color:rgba(253,244,227,.20)!important;
  background:rgba(253,244,227,.045)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
.factPills .heropill svg{
  color:var(--dim)!important;
}
.factPills .heropill:hover{
  border-color:rgba(253,244,227,.34)!important;
  background:rgba(253,244,227,.065)!important;
}

/* Templates browser uses the full height rather than leaving dead space. */

/* Portrait Solo Play fills the available column. */

/* Kids crown must remain visible and clearly belong to first place. */

/* Live winner crown spacing */

/* Wheel pointer fixed above disc */

/* Kids podium alignment correction:
   each place is a single centred vertical stack */

/* Clean visual break for "What people are saying".
   Keep the brand purple, remove the geometric pattern behind the quotes. */
.voicesSec{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#1b0d24!important;
  background-image:none!important;
  border-top:1px solid rgba(253,244,227,.055)!important;
  border-bottom:1px solid rgba(253,244,227,.055)!important;
}
.voicesSec::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 14% 15%,rgba(255,126,39,.045),transparent 28%),
    radial-gradient(circle at 82% 76%,rgba(43,217,198,.035),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 36%,rgba(0,0,0,.055))!important;
}
.voicesSec .sechead{
  max-width:760px!important;
}
.voicesSec .sechead h2,.voicesSec .sechead h4{
  max-width:680px!important;
}
.voicesSec .sechead p{
  max-width:720px!important;
}
.voicesSec .voiceCard{
  background:#24132e!important;
  background-image:none!important;
  border-top-color:rgba(253,244,227,.085)!important;
  border-right-color:rgba(253,244,227,.085)!important;
  border-bottom-color:rgba(253,244,227,.085)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12)!important;
}
.voicesSec .voiceCard:hover{
  background:#281631!important;
}

/* Join card: Play uses the same Otiya pink family as the action strip above. */
.actquad .acCard:first-child .acField button{
  background:var(--mag)!important;
  color:#2A1024!important;
  box-shadow:inset 0 -3px rgba(0,0,0,.12)!important;
}
.actquad .acCard:first-child .acField button:hover{
  filter:brightness(1.04);
}

/* Otiya in Action tabs: deterministic 2 x 2 layout on phones. */
@media(max-width:680px){

  /* On phones, do not crush multiple Live Quiz result views side by side.
     Keep the question and podium as the main story. */

  /* Gathering facts: two comfortable tiles per row. */
  /* r61: the two-column and one-column overrides that lived here are gone.
     They carried !important on grid-template-columns, so every later attempt
     at a three-across row lost to them silently, and under 430px this section
     was pinned to a single column no matter what. The layout is now decided
     once, further down the file. */
  .factPills .heropill{
    min-width:0!important;
    white-space:normal!important;
    line-height:1.3!important;
  }
}

@media(max-width:430px){
  /* Narrow phones: one fact per row for readable tap targets. */
  /* r61: the single-column override that used to be here is removed. It is
     why three pills still stacked on a phone after three separate fixes. */

  /* Keep code entry usable and make Play a comfortable touch target. */
  .acField button{
    min-width:72px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

}

/* Tablet: make the product showcase use width without awkward squeezing. */
@media(min-width:681px) and (max-width:960px){
  
  /* r61: two-column override removed, same reason as the others. */
  .factPills .heropill{ min-width:0!important; }
}

/* What People Are Saying: echo the framed Why Hosts Pick Otiya treatment,
   using this section's own orange accent rather than lime. */
.voicesSec{
  position:relative;
  border:1.5px solid rgba(255,122,31,.72)!important;
  border-top:3px solid var(--tang)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 42px rgba(0,0,0,.10)!important;
}
.voicesSec::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,122,31,.08);
}
@media(max-width:680px){
  .voicesSec{
    border-radius:18px!important;
  }
}

/* WHAT PEOPLE ARE SAYING
   Accent belongs at the top only, not around the whole section. */
.voicesSec{
  border:0!important;
  border-top:3px solid var(--tang)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.voicesSec::before{
  display:none!important;
}

/* RAFFLE CTA
   Reverse the visual intensity: brighter pink at the left,
   resolving into the calmer Otiya purple on the right. */
.actquad .acCard:nth-child(2) .acTop{
  background:linear-gradient(100deg,
    #ef4b9a 0%,
    #d85ab8 36%,
    #b06ed6 68%,
    #8d72d9 100%
  )!important;
}

/* Keep the icon tile related to the purple destination end. */
.actquad .acCard:nth-child(2) .acIcon{
  background:rgba(70,35,112,.24)!important;
}

/* Run a raffle: unmistakably PINK on the left, PURPLE on the right. */
.acCard:has(.acTitle:nth-child(n)){}
.actquad .acCard:nth-of-type(2) .acTop,
.actquad > .acCard:nth-of-type(2) .acTop{
  background:linear-gradient(100deg,
    #F04A9B 0%,
    #E04DA8 24%,
    #C45CC0 50%,
    #A56DD2 74%,
    #8C73D8 100%
  )!important;
}

/* Join card Play button: match the vivid Join & play quiz strip exactly. */
.actquad .acCard:first-child .acField button{
  background:linear-gradient(135deg,var(--tang),var(--mag))!important;
  color:var(--magT)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px rgba(0,0,0,.12),0 4px 12px rgba(17,7,23,.10)!important;
}
.actquad .acCard:first-child .acField button:hover{
  background:linear-gradient(135deg,var(--tang),var(--mag))!important;
  border:0!important;
  transform:translateY(-1px);
  filter:brightness(1.04)!important;
}
.actquad .acCard:first-child .acField button:active{transform:translateY(0)}
.actquad .acCard:first-child .acField button:focus-visible{
  outline:2px solid rgba(255,244,228,.72)!important;
  outline-offset:2px!important;
}

/* Semantic tags must not change the approved visual hierarchy. */
.sechead h2,.homeActionHeading{padding:0;border:0}
.homeActionHeading{font-family:'Inter',system-ui,sans-serif;line-height:inherit}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.acSolo{border:0;background:none;padding:0;font:inherit}
.kBands>button{background:transparent;color:inherit}

/* Kids How It Works, readability only.
   No new palette. Every visible colour below comes from Otiya's existing
   CSS variables. The structure and playful character of the page stay intact. */

body.kidsHowPage .pattern{
  opacity:.018!important;
}

/* Keep the page open and airy. No new outer card or boxed page treatment. */
body.kidsHowPage .fwWrap{
  max-width:660px;
}
body.kidsHowPage .fwH1{
  color:var(--ink);
}
body.kidsHowPage .fwLede{
  color:var(--ink);
  opacity:.78;
}
body.kidsHowPage .fwGo{
  background:var(--sun);
  color:var(--sunT);
}
body.kidsHowPage .fwAlt{
  background:var(--panel);
  border-color:var(--sun);
  color:var(--sun);
}

/* Age comparison. Same turquoise identity, now on a proper Otiya surface. */
body.kidsHowPage .fwFair{
  background:var(--turqT);
  border-color:var(--turq);
}
body.kidsHowPage .fwFair > p{
  color:var(--ink);
  opacity:.76;
}
body.kidsHowPage .fwKid{
  background:var(--bg);
  border-color:var(--panel2);
}
body.kidsHowPage .fwAge{
  color:var(--dim);
}
body.kidsHowPage .fwQ{
  background:var(--panel);
  color:var(--ink);
}

/* Projecting and Solo Play stay separate, but use existing Otiya surfaces only. */
body.kidsHowPage .fwBig{
  background:var(--panel);
  border-color:var(--turq);
}
body.kidsHowPage .fwBig b{
  color:var(--turq);
}
body.kidsHowPage .fwBig p{
  color:var(--ink);
  opacity:.74;
}
body.kidsHowPage .fwSolo{
  background:var(--violT);
  border-color:var(--vio);
}
body.kidsHowPage .fwSolo p{
  color:var(--ink);
  opacity:.74;
}

/* Steps: one calm plum surface, with the existing brand-colour numbers doing
   the visual work. No dark-to-random-colour gradients. */
body.kidsHowPage .fwStep{
  background:var(--panel);
  border-color:var(--panel2);
}
body.kidsHowPage .fwStep:before{
  background:var(--ac);
  opacity:.055;
}
body.kidsHowPage .fwN{
  background:var(--ac);
  color:var(--acT);
  box-shadow:none;
}
body.kidsHowPage .fwStep b{
  color:var(--ink);
}
body.kidsHowPage .fwStep span span{
  color:var(--ink);
  opacity:.72;
}

/* Promise cards: calm and readable. */
body.kidsHowPage .fwP{
  background:var(--panel);
  border-color:var(--panel2);
}
body.kidsHowPage .fwP b{
  color:var(--ink);
}
body.kidsHowPage .fwP span span{
  color:var(--ink);
  opacity:.72;
}
body.kidsHowPage .fwFoot{
  border-top-color:var(--panel2);
}

@media(max-width:460px){
  body.kidsHowPage .fwWrap{
    padding-left:8px;
    padding-right:8px;
  }
}

/* ---------- all large screens ---------- */

/* ---------- tablet ---------- */

/* ---------- mobile ---------- */

/* Very narrow phones: preserve containment without changing panel height. */

/* Safe first-render optimization. The hero and action cards remain fully rendered.
   Browsers can skip painting below-fold homepage sections until they approach view. */
@supports (content-visibility:auto){
  body.homePage .pband,body.homePage .sec{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

/* Narrow phones keep the same 520px stage and tighter safe gutters. */

/* =========================================================
   OTIYA R7: first-paint stability and accessibility
   ========================================================= */
/* The hero is now server-visible HTML. Do not hide it behind entrance effects. */
.bigword .ltr{animation:none!important;will-change:auto!important;opacity:1!important;transform:none!important}
.bigword .hgem{animation:none!important;opacity:1!important;transform:rotate(45deg)!important}
.wordwrap::after{animation:none!important;opacity:.26!important;background-position:50% 0!important}
.kicker{animation:none!important;background-position:50% 0!important}

/* Keep decorative aurora nodes textless for automated contrast checks. */
.aurora i{color:transparent!important;font-size:0!important;line-height:0!important}

/* Slightly brighter supporting copy. These remain inside the Otiya palette family. */
.bd i{color:#FF9853!important}
.homeActionHeading,.acLbl{color:#D9C9E5!important}
.actquad .acCard:nth-child(3) .acLink{color:#DED1FF!important;border-color:rgba(222,209,255,.42)!important}
.actquad .acCard:nth-child(3) .acLbl{color:#E1D4EA!important}
.card.cut18 .disp{color:#FDF4E3!important}

/* Avoid the non-composited hero effects Lighthouse flags on small screens. */
@media(max-width:640px){
  .podCrown{animation:none!important}
  .kicker,.wordwrap::after,.bigword .hgem{animation:none!important}
}

/* R8 finishing pass: mobile first paint, hero glow coverage and contrast. */
.homePage .aurora{top:39%!important;height:390px!important;opacity:.54!important}
.homePage .heroLead2{color:#D9CCE4!important}
.homePage .micro span{color:#DDD1E7!important}
.homePage .homeActionHeading,.homePage .acLbl{color:#E8DDF0!important}
.homePage .acSub{opacity:1!important}
.homePage .card.cut18 .disp{color:#FFF8E9!important}
.homePage .actquad .acCard:nth-child(3) .acLink{color:#F2EBFF!important;background:rgba(167,139,250,.17)!important;border-color:rgba(242,235,255,.52)!important}
.homePage .actquad .acCard:nth-child(3) .acLbl{color:#F0E7F5!important}
@media(max-width:640px){
  .homePage .heroLead2{color:#E2D7EA!important}
  .homePage .micro span{color:#E5DBEC!important}
  .homePage .acLbl,.homePage .homeActionHeading{color:#EEE5F3!important}
  .homePage .aurora i{animation:none!important}
  .homePage .pattern{animation:none!important}
}

/* =========================================================
   OTIYA R9: homepage visual QA fixes
   - remove decorative heading underlines on the homepage
   - keep Templates + Solo leaderboard fully inside its card
   ========================================================= */

/* Homepage section headings: no decorative underline strokes on any viewport. */
body.homePage .sechead h2,
body.homePage .sechead h4{
  padding-bottom:0!important;
  text-decoration:none!important;
}
body.homePage .sechead h2::after,
body.homePage .sechead h4::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Templates + Solo desktop/tablet containment.
   The device is a flex child beneath the label, so it must consume only the
   remaining height rather than 100% of the entire card. */

/* =========================================================
   OTIYA R10: Templates + Solo containment hardening
   - keep all four Solo answers fully inside the quiz frame
   - keep the leaderboard fully inside the Solo card
   - preserve answer sizing and all existing mobile layouts
   ========================================================= */

/* Desktop containment: the homepage itself is capped at 1000px, so the Solo
   column stays narrow even on very wide monitors. Apply this sizing to every
   desktop viewport, not only 961-1120px. This keeps answer D inside the quiz
   frame and the leaderboard inside the card at 1200px, 1440px, 1600px and up. */

/* Universal safety: content can never visually escape its intended frame.
   This does not hide normal content because the breakpoint-specific sizing
   above and existing mobile sizing leave the required room. */

/* ===== r12: stable home hero / CLS + y-descender glow fix ===== */
.homeAuroraStable{display:none}
body.homePage .homeAuroraStable{display:block;position:absolute;left:50%;top:24px;transform:translateX(-50%);width:min(780px,112vw);height:520px;z-index:0;pointer-events:none;overflow:visible;filter:blur(42px);opacity:.60;background:radial-gradient(ellipse at 50% 48%,rgba(240,80,155,.20) 0%,rgba(255,122,41,.18) 34%,rgba(43,217,198,.12) 60%,rgba(29,14,39,0) 86%)}
body.homePage .homeAuroraStable i{position:absolute;border-radius:50%;display:block;mix-blend-mode:screen;color:transparent;font-size:0;line-height:0}
body.homePage .homeAuroraStable i:nth-child(1){width:260px;height:260px;background:var(--tang);left:5%;top:15%;opacity:.78}
body.homePage .homeAuroraStable i:nth-child(2){width:235px;height:235px;background:var(--mag);right:3%;top:7%;opacity:.76}
body.homePage .homeAuroraStable i:nth-child(3){width:230px;height:230px;background:var(--turq);left:34%;bottom:-4%;opacity:.64}
.homePage #app .aurora{display:none!important}
.homeHero{position:relative}
.homePage .micro span{display:inline-flex;align-items:center;gap:5px}
@media(max-width:520px){
  body.homePage .homeAuroraStable{top:22px;width:122vw;height:500px;opacity:.64}
  .homePage .homeHero{min-height:535px}
  .homePage .wordwrap{min-height:70px}
  .homePage .kicker{min-height:21px}
  .homePage .heroLead{min-height:69px}
  .homePage .heroLead2{min-height:101px}
  .homePage .micro{min-height:64px}
}

/* =========================================================
   OTIYA R14: approved compact footer + mobile hero polish
   ========================================================= */
/* Mobile hero spacing: deliberate vertical rhythm around logo, kicker and copy.
   Boot markup and hydrated markup share these exact rules to avoid CLS. */
@media(max-width:520px){
  body.homePage .homeHero{padding-top:74px!important;min-height:500px!important}
  body.homePage .wordwrap{padding:0!important;margin:0 auto!important;min-height:64px!important}
  body.homePage .bigword{font-size:clamp(60px,17.6vw,70px)!important;line-height:.93!important;letter-spacing:-1.6px!important}
  body.homePage .kicker{margin-top:9px!important;min-height:0!important;font-size:12.2px!important;line-height:1.35!important;letter-spacing:2.25px!important;padding:0 6px!important}
  body.homePage .heroLead{margin-top:13px!important;min-height:0!important;max-width:31ch!important;font-size:14.1px!important;line-height:1.46!important;padding:0 2px!important}
  body.homePage .heroLead2{margin-top:8px!important;min-height:0!important;max-width:35ch!important;font-size:12.35px!important;line-height:1.52!important;padding:0 3px!important}
  body.homePage .micro{margin-top:12px!important;min-height:0!important;gap:6px!important;padding:0 4px!important}
  body.homePage .micro span{font-size:10.7px!important;padding:5px 8px!important;line-height:1.25!important}
  body.homePage .cues{margin-top:16px!important;height:34px!important}
}

/* Extend the vivid hero glow well below the y descender. The stronger glow is
   intentionally centred lower and fades only after the kicker area. */
body.homePage .homeAuroraStable{top:-6px!important;width:min(860px,118vw)!important;height:690px!important;filter:blur(44px)!important;opacity:.66!important;background:radial-gradient(ellipse at 50% 34%,rgba(240,80,155,.25) 0%,rgba(255,122,41,.22) 33%,rgba(43,217,198,.14) 61%,rgba(29,14,39,.03) 83%,rgba(29,14,39,0) 96%)!important}
body.homePage .homeAuroraStable::after{content:"";position:absolute;left:18%;right:18%;top:92px;height:290px;border-radius:50%;background:radial-gradient(ellipse at 48% 46%,rgba(255,122,41,.20) 0%,rgba(240,80,155,.13) 48%,rgba(43,217,198,.08) 68%,transparent 86%);filter:blur(24px);opacity:.95}
@media(max-width:520px){body.homePage .homeAuroraStable{top:8px!important;width:136vw!important;height:610px!important;opacity:.68!important;background:radial-gradient(ellipse at 50% 30%,rgba(240,80,155,.25) 0%,rgba(255,122,41,.23) 36%,rgba(43,217,198,.14) 64%,rgba(29,14,39,.02) 86%,transparent 97%)!important}body.homePage .homeAuroraStable::after{left:10%;right:10%;top:72px;height:250px}}

/* =========================================================
   OTIYA R15: approved footer + no-jump showcase + layout QA
   ========================================================= */

/* Approved footer A. No repeated footer logo or domain. */
.otiyaFoot3{width:100%;max-width:100%;min-width:0;margin-top:32px;background:#16091f;border-top:1px solid rgba(253,244,227,.10);overflow-x:clip;box-sizing:border-box}
.otiyaFoot3 *{box-sizing:border-box;min-width:0}
.of3Inner{width:100%;max-width:1160px;margin:0 auto;padding:26px 30px}
.of3CtaRow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid rgba(253,244,227,.13);border-radius:18px;background:linear-gradient(90deg,rgba(240,80,155,.10),rgba(200,241,53,.06))}
.of3CtaCopy strong{display:block;margin:0 0 4px;font-size:20px;line-height:1.2;color:var(--ink)}
.of3CtaCopy span{display:block;color:#C7B3D6;font-size:14px;line-height:1.45}
.of3CtaBtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--lime);color:#1A0D22!important;font-weight:850;text-decoration:none;white-space:nowrap;flex:0 0 auto}
.of3Grid{display:grid;grid-template-columns:1.05fr 1.05fr 1.2fr .9fr;gap:28px;margin-top:26px;align-items:start}
.of3Links h3,.of3Connect h3{margin:0 0 12px;font-family:'Unbounded','Inter',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.of3Links a{display:block;padding:4px 0;color:#C7B3D6;font-size:13.5px;font-weight:600;line-height:1.4;text-decoration:none}
.of3Links a:hover{color:var(--ink)}
.of3Socials{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.of3Socials a{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid rgba(253,244,227,.13);border-radius:12px;background:rgba(255,255,255,.025);color:var(--ink);text-decoration:none}
.of3Socials a:hover{background:rgba(255,255,255,.07);border-color:rgba(253,244,227,.24)}
.of3Socials svg{display:block;width:18px;height:18px}
.of3Bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:17px;border-top:1px solid rgba(253,244,227,.13);color:#C7B3D6;font-size:12px;line-height:1.55}
.of3Copyright{min-width:0}
.of3Legal{display:flex;align-items:center;gap:16px;white-space:nowrap;flex:0 0 auto}
.of3Legal a{color:#D8CBE1;text-decoration:none}.of3Legal a:hover{color:var(--turq)}
@media(max-width:680px){
  .otiyaFoot3{margin-top:26px}
  .of3Inner{padding:22px 18px}
  .of3CtaRow{flex-direction:column;align-items:stretch;gap:14px;padding:17px 16px}
  .of3CtaCopy strong{font-size:18px}
  .of3CtaCopy span{font-size:12.8px}
  .of3CtaBtn{width:100%}
  .of3Grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;margin-top:24px}
  .of3Links h3,.of3Connect h3{margin-bottom:10px;font-size:10.5px;letter-spacing:.13em}
  .of3Links a{padding:4px 0;font-size:12.5px;line-height:1.35}
  .of3Socials{display:grid;grid-template-columns:repeat(2,42px);grid-template-rows:repeat(2,42px);gap:10px;justify-content:start;align-items:start}
  .of3Socials a{width:42px;height:42px;flex:none}
  .of3Socials .ig{grid-column:1;grid-row:1}.of3Socials .fb{grid-column:2;grid-row:1}.of3Socials .x{grid-column:1;grid-row:2}.of3Socials .tt{grid-column:2;grid-row:2}
  .of3Bottom{flex-direction:column;align-items:flex-start;gap:9px;margin-top:24px;padding-top:16px}
  .of3Legal{order:1;gap:14px}.of3Copyright{order:2;max-width:31ch}
}
@media(max-width:360px){.of3Inner{padding-left:16px;padding-right:16px}.of3Grid{gap:24px 18px}.of3Socials{grid-template-columns:repeat(2,40px);grid-template-rows:repeat(2,40px)}.of3Socials a{width:40px;height:40px}}

/* Compact, even mobile hero-to-action rhythm. Boot and hydrated DOM share this. */
.homeActionIntro{line-height:1.25}
@media(max-width:520px){
  body.homePage .homeHero{padding-top:62px!important;min-height:468px!important}
  body.homePage .wordwrap{min-height:62px!important}
  body.homePage .kicker{margin-top:9px!important}
  body.homePage .heroLead{margin-top:11px!important}
  body.homePage .heroLead2{margin-top:7px!important}
  body.homePage .micro{margin-top:10px!important}
  body.homePage .cues{margin-top:13px!important;height:30px!important}
  body.homePage .homeActionCard{margin-top:21px!important}
  body.homePage .homeActionIntro{margin-bottom:11px!important}
  body.homePage .homeActionIntro .disp{font-size:16px!important;line-height:1.25!important}
  body.homePage .homeActionIntro .homeActionHeading{font-size:12px!important;line-height:1.3!important;margin:3px 0 0!important}
}

/* Kids podium: avatar -> clear gap -> name -> points -> clear gap -> block.
   Nothing is allowed to drift into the avatar. */


/* R15 root overflow source correction. Keep the same visual treatment without geometry extending past the viewport. */
body.homePage .homeAuroraStable{width:min(860px,100vw)!important}
@media(max-width:520px){body.homePage .homeAuroraStable{width:100vw!important}}

/* R15 final mobile rhythm: let the hero end where its visible cues end, so there is no artificial blank band before the greeting card. */
@media(max-width:520px){body.homePage .homeHero{min-height:0!important;height:auto!important;padding-bottom:0!important}}

/* r19 exact-scope: approved CTA separation from footer */
.of3StandaloneCta{width:100%;max-width:1160px;min-width:0;margin:32px auto 0;padding:0 30px;box-sizing:border-box}
.otiyaFoot3 .of3Grid{margin-top:0}
@media(max-width:680px){.of3StandaloneCta{margin-top:26px;padding:0 18px}.otiyaFoot3 .of3Grid{margin-top:0}}

/* r20: soft wordmark contrast, no rectangular hero backing */
body.homePage .wordwrap{background:transparent!important;border:0!important;box-shadow:none!important;isolation:isolate}
body.homePage .wordwrap::before{content:"";position:absolute;z-index:1;left:50%;top:56%;transform:translate(-50%,-50%);width:min(760px,104vw);height:228px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(29,14,39,.88) 0%,rgba(29,14,39,.64) 39%,rgba(29,14,39,.28) 66%,rgba(29,14,39,0) 88%);filter:blur(8px);opacity:.94}
body.homePage .wordwrap .bigword{position:relative;z-index:2}
body.homePage .kicker{margin-top:18px!important}
@media(max-width:520px){body.homePage .wordwrap::before{width:112vw;height:184px;top:59%;background:radial-gradient(ellipse at center,rgba(29,14,39,.90) 0%,rgba(29,14,39,.62) 42%,rgba(29,14,39,.22) 70%,rgba(29,14,39,0) 90%)}body.homePage .kicker{margin-top:13px!important}}

/* r20: question reordering */
.slide{position:relative}
.qdrag{flex:0 0 auto;align-self:center;color:var(--mute);font-size:18px;line-height:1;cursor:grab;padding:7px 3px;margin:-4px -3px -4px 0;touch-action:none;user-select:none}
.qdrag:hover{color:var(--lime)}.qdrag:active{cursor:grabbing}
.slide.dragging{opacity:.46;transform:scale(.985)!important}
.slide.dropTarget{border-color:var(--lime)!important;box-shadow:inset 3px 0 var(--lime),0 0 0 1px rgba(200,241,53,.18)}
.qmoveBtns{display:inline-flex;gap:5px;flex-shrink:0}.qmoveBtns .quiet{width:34px;min-width:34px;padding:7px 0;justify-content:center;font-size:15px}.qmoveBtns .quiet:disabled{opacity:.35;cursor:not-allowed}

/* r20: branded Otiya select. The real select stays in the DOM as the data source. */
.otSelect{position:relative;width:100%;min-width:0;margin-bottom:10px}
/* The native select stays in the DOM as the data source and must stay hidden,
   but it must NOT sit off-screen.

   It used to be parked at left:-9999px. A <select> is focusable, and when a
   focusable element is off-screen the browser scrolls its nearest scrollable
   ancestor to bring it into view. html and body carry overflow-x:hidden, which
   stops a USER scrolling sideways but not the browser doing it, so the whole
   page shifted right and left a band of bare background down the left edge.
   Only a refresh cleared it, because a refresh resets scrollLeft.

   clip-path hides it in place instead, so focusing it scrolls nowhere. */
.otSelectNative{position:absolute!important;left:0!important;top:0!important;
  width:1px!important;height:1px!important;opacity:0!important;
  clip-path:inset(50%)!important;overflow:hidden!important;
  pointer-events:none!important;margin:0!important;padding:0!important}
.otSelectTrigger{width:100%;min-height:49px;margin:0;padding:12px 44px 12px 14px;border:1.5px solid #4A315B;background:linear-gradient(180deg,#1B0C27,#160A1E);color:var(--ink);font:650 14px/1.35 'Inter',sans-serif;text-align:left;position:relative;cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:border-color .16s,background .16s,box-shadow .16s,transform .12s}
.otSelectTrigger:hover{border-color:rgba(43,217,198,.72);background:linear-gradient(180deg,#21102D,#170A22)}
.otSelectTrigger:focus-visible{outline:3px solid rgba(43,217,198,.26);outline-offset:2px;border-color:var(--turq)}
.otSelectTrigger[aria-expanded="true"]{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,241,53,.08)}
.otSelectTrigger.placeholder .otSelectText{color:var(--dim)}
.otSelectChevron{position:absolute;right:15px;top:50%;width:10px;height:10px;transform:translateY(-65%) rotate(45deg);border-right:2px solid var(--turq);border-bottom:2px solid var(--turq);transition:transform .16s}
.otSelectTrigger[aria-expanded="true"] .otSelectChevron{transform:translateY(-25%) rotate(225deg);border-color:var(--lime)}
.otSelectMenu{position:fixed;z-index:180;overflow:auto;padding:7px;background:rgba(22,9,31,.985);border:1px solid rgba(167,139,250,.38);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(14px);overscroll-behavior:contain}
.otSelectList{max-height:270px;overflow:auto;overscroll-behavior:contain}
.otSelectOpt{width:100%;border:0;background:transparent;color:#EDE3F3;display:grid;grid-template-columns:15px minmax(0,1fr) 20px;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;text-align:left;font:650 13px/1.35 'Inter',sans-serif;cursor:pointer}
.otSelectOpt:hover,.otSelectOpt:focus-visible{background:linear-gradient(90deg,rgba(43,217,198,.13),rgba(167,139,250,.08));outline:none;color:#fff}
.otSelectOpt.selected{background:linear-gradient(90deg,rgba(200,241,53,.14),rgba(240,80,155,.07));color:#fff}
.otSelectOpt:disabled{opacity:.42;cursor:not-allowed;background:transparent}
.otSelectGem{width:8px;height:8px;background:#4C3759;transform:rotate(45deg);display:block}.otSelectOpt.selected .otSelectGem{background:var(--lime);box-shadow:0 0 12px rgba(200,241,53,.35)}
.otSelectCheck{color:var(--lime);font-size:14px;text-align:center}
.otSelectSearchWrap{position:sticky;top:-7px;z-index:2;background:rgba(22,9,31,.99);padding:3px 2px 8px}.otSelectSearch{width:100%;margin:0!important;padding:10px 12px!important;border:1px solid rgba(43,217,198,.34)!important;border-radius:10px!important;background:#110719!important;color:var(--ink)!important;font-size:13px!important}.otSelectSearch:focus{border-color:var(--turq)!important}
.wsContextBar .otSelect{min-width:180px;max-width:320px;margin:0}.wsSettingsGrid .otSelect{margin:9px 0}.otprof-field .otSelect{margin-bottom:0}.adminTr .otSelect{margin:0;min-width:95px}
@media(max-width:560px){.wsContextBar .otSelect{width:100%;max-width:none}.otSelectMenu{border-radius:13px}.otSelectOpt{padding:12px 10px;font-size:13.5px}}

/* r21: contained template picker + creator-only quiz test controls */
.templatePickerSheet{max-width:780px!important;max-height:min(82vh,760px);display:flex;flex-direction:column;overflow:hidden;padding:0!important}
.templatePickerHead{padding:22px 22px 15px;flex:none;border-bottom:1px solid rgba(253,244,227,.08)}
.templatePickerList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 18px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#624873 transparent}
.templatePickerList .sopt{margin:0;min-height:76px}
.templatePickerCancel{margin:0 18px 18px!important;flex:none}
.testTools{max-width:680px;margin:16px auto 0;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:rgba(43,217,198,.07);border:1px solid rgba(43,217,198,.25);border-radius:12px}
.testTools>span{color:var(--dim);font-size:11.5px;font-weight:600;line-height:1.4;margin-right:auto}
.testTools>span b{color:var(--turq);font-family:'Unbounded','Inter',sans-serif;font-size:9px;letter-spacing:.08em;margin-right:6px}
.testTools button{border:1px solid rgba(43,217,198,.33);background:#21102d;color:var(--ink);border-radius:9px;padding:8px 11px;font:750 11.5px/1.2 'Inter',sans-serif;cursor:pointer}
.testTools button:hover{border-color:var(--turq);background:#291436}
@media(max-width:620px){.templatePickerSheet{max-height:88vh}.templatePickerList{grid-template-columns:1fr;padding:12px}.templatePickerHead{padding:18px 16px 13px}.templatePickerCancel{margin:0 12px 12px!important}.testTools{align-items:stretch}.testTools>span{width:100%;margin-right:0}.testTools button{flex:1}}

/* r23: compact host final-standings setting and optional 4th/5th rows */
.finalDisplaySetting{display:flex;align-items:center;gap:14px;padding:13px 14px;background:rgba(255,255,255,.035);border:1px solid var(--panel2)}
.finalDisplaySetting b{display:block;font-size:13.5px;color:var(--ink)}
.finalDisplaySetting span{display:block;margin-top:3px;color:var(--dim);font-size:11.8px;line-height:1.45;font-weight:550}
.finalDisplayChoices{display:flex;gap:6px;flex:0 0 auto}
.finalDisplayChoices button{border:1px solid var(--panel2);background:var(--panel);color:var(--dim);border-radius:999px;padding:8px 11px;font:800 11.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.finalDisplayChoices button.on{background:var(--lime);border-color:var(--lime);color:var(--limeT)}
.finalExtraStandings{width:min(520px,92%);margin:12px auto 4px;padding:6px;background:rgba(255,255,255,.035);border:1px solid rgba(253,244,227,.1)}
.finalExtraRow{display:grid;grid-template-columns:30px 30px 1fr auto;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(253,244,227,.08)}
.finalExtraRow:last-child{border-bottom:0}.finalExtraRow .disp{color:var(--dim);font-weight:800}.finalExtraRow b{font-size:13px;min-width:0}.finalExtraRow strong{font-family:'Unbounded','Inter',sans-serif;font-size:12px;color:var(--turq)}
@media(max-width:680px){.finalDisplaySetting{align-items:flex-start;flex-direction:column}.finalDisplayChoices{width:100%}.finalDisplayChoices button{flex:1}.finalExtraStandings{width:100%}}

/* ==========================================================================\n   r25 raffle polish: agreed wheel + drum refinements only\n   ========================================================================== */

/* Wheel: labels are attached to the rotating wheel, centred on each wedge,\n   always read hub -> rim, and use black ink on every brand colour. */
.rfWheelWrap{width:min(320px,74vw)!important}
.rfWheel{overflow:visible!important}
.rfWheelLabel{
  position:absolute!important;left:50%!important;top:50%!important;
  width:112px!important;height:22px!important;margin:0!important;
  transform-origin:0 50%!important;
  transform:rotate(calc(var(--theta) - 90deg)) translateX(67px)!important;
  display:flex!important;align-items:center!important;text-align:left!important;
  color:#151015!important;text-shadow:none!important;
  font:950 var(--lbl,10px) 'Inter',sans-serif!important;
  line-height:1!important;letter-spacing:0!important;
  white-space:nowrap!important;overflow:visible!important;
  z-index:6!important;pointer-events:none!important
}
.rfWheelLabel b{
  display:block!important;max-width:112px!important;overflow:hidden!important;
  text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#151015!important;font:inherit!important;line-height:1!important
}
.rfWheelLabel.long b{font-size:.90em!important}
.rfWheelWinnerHalo{
  position:absolute;left:50%;top:50%;z-index:5;
  width:124px;height:30px;border-radius:999px;opacity:0;pointer-events:none;
  transform-origin:0 50%;
  transform:rotate(calc(var(--theta) - 90deg)) translateX(61px);
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.28),0 0 18px rgba(255,255,255,.18)
}
.rfWheelLabel.winner b{animation:rfWheelWinnerText 1.05s ease-in-out 3}
.rfWheelWinnerHalo.show{animation:rfWheelWinnerHalo 1.05s ease-in-out 3}
@keyframes rfWheelWinnerText{
  0%,100%{opacity:1;scale:1}
  18%{opacity:.28}
  50%{opacity:1;scale:1.28}
  72%{opacity:.38}
}
@keyframes rfWheelWinnerHalo{
  0%,100%{opacity:0}
  40%,62%{opacity:1}
}

/* The fixed pointer remains outside rOrbit; rOrbit (segments + names) spins. */
.rfPointer{z-index:20!important}

/* Drum: preserve the existing SVG drum exactly. Give it enough room that both\n   heads are visible, and animate only the entrant names around it. */
.rfDrumScene{
  width:min(360px,86vw)!important;height:390px!important;
  position:relative!important;display:block!important;overflow:visible!important
}
.rfDrumShadow{
  left:50%!important;top:auto!important;bottom:18px!important;
  width:250px!important;height:34px!important;transform:translateX(-50%)!important
}
.rfDrum{
  position:absolute!important;left:50%!important;top:88px!important;bottom:auto!important;
  width:245px!important;height:auto!important;transform:translateX(-50%)!important;
  overflow:visible!important;filter:drop-shadow(0 22px 24px rgba(0,0,0,.38))!important
}
.rfDrum svg{display:block!important;width:100%!important;height:auto!important;overflow:visible!important}
.rfDrumScene.beat .rfDrum{animation:rfDrumR25Beat .30s ease-in-out infinite alternate!important}
@keyframes rfDrumR25Beat{to{transform:translateX(-50%) translateY(-3px) scale(1.008)}}
.rfDrumGlow{top:72px!important;width:190px!important;height:74px!important;z-index:4!important}
.rfDrumPlate{
  top:0!important;width:min(320px,90%)!important;padding:12px 14px 0!important;z-index:14!important
}
.rfDrumName{
  position:static!important;transform:none!important;width:100%!important;
  font:950 clamp(17px,4.5vw,27px) 'Unbounded','Inter',sans-serif!important;
  line-height:1.08!important;color:var(--ink)!important;text-align:center!important;
  text-shadow:0 3px 14px rgba(0,0,0,.72),0 0 20px rgba(255,122,41,.18)!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  display:block!important
}
.rfDrumScene.beat .rfDrumName{filter:none!important;opacity:.75!important}
.rfDrumFloat{
  position:absolute;left:50%;top:112px;z-index:13;transform:translateX(-50%);
  max-width:250px;padding:3px 7px;text-align:center;
  color:var(--ink);font:950 15px 'Unbounded','Inter',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;
  text-shadow:0 3px 12px rgba(0,0,0,.76),0 0 16px rgba(240,80,155,.22)
}
.rfDrumFloat.rise{animation:rfDrumNameRise .82s ease-out forwards}
@keyframes rfDrumNameRise{
  0%{opacity:0;transform:translate(-50%,22px) scale(.92)}
  20%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-73px) scale(1.05)}
}
.rfDrumStatus{
  top:auto!important;bottom:1px!important;z-index:14!important;
  color:var(--turq)!important;font:950 8.5px 'Inter',sans-serif!important;
  letter-spacing:1.5px!important
}
.rfDrumScene.landed .rfDrumStatus{opacity:0!important}
.rfDrumScene.landed .rfDrumName{
  animation:rfDrumWinnerLand .72s cubic-bezier(.16,.84,.24,1) forwards!important;
  filter:none!important;opacity:1!important
}
@keyframes rfDrumWinnerLand{
  0%{transform:translateY(10px) scale(.94);opacity:.45}
  58%{opacity:1}
  100%{transform:translateY(0) scale(1.08);opacity:1;color:var(--lime)}
}

@media(max-width:650px){
  .rfWheelWrap{width:min(286px,78vw)!important}
  .rfWheelLabel{
    width:96px!important;height:20px!important;
    transform:rotate(calc(var(--theta) - 90deg)) translateX(58px)!important;
    font-size:calc(var(--lbl,10px) * .88)!important
  }
  .rfWheelLabel b{max-width:96px!important}
  .rfWheelWinnerHalo{
    width:104px;height:27px;
    transform:rotate(calc(var(--theta) - 90deg)) translateX(53px)
  }
  .rfDrumScene{height:350px!important}
  .rfDrum{top:79px!important;width:220px!important}
  .rfDrumGlow{top:62px!important;width:165px!important}
  .rfDrumFloat{top:99px!important;max-width:220px!important;font-size:13px!important}
}

/* ========================================================================
   r27: live setup, beta feedback, Name Reel and Cards final polish
   ======================================================================== */

/* The live game code is display-only. Copying is an explicit button action. */
.codebtn.codeDisplay{cursor:default!important;user-select:text!important}
.codebtn.codeDisplay:active{transform:none!important}

/* Pre-room live setup. This is intentionally completed before a room/code is
   created, so hosts cannot accidentally choose final standings too late. */
.liveSetupSheet{max-width:650px!important}
.liveSetupBlock{margin:14px 0 16px;padding:13px;border:1px solid rgba(253,244,227,.08);background:rgba(0,0,0,.10);border-radius:14px}
.liveSetupLabel{margin-bottom:9px;color:var(--dim);font-size:9px;font-weight:900;letter-spacing:1px}
.liveSetupChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.liveSetupChoice{min-width:0;display:flex;align-items:flex-start;gap:9px;text-align:left;border:1px solid rgba(253,244,227,.09);background:rgba(255,255,255,.025);color:var(--ink);border-radius:12px;padding:11px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.liveSetupChoice.on{border-color:rgba(200,241,53,.48);background:linear-gradient(135deg,rgba(200,241,53,.075),rgba(43,217,198,.045));box-shadow:inset 0 0 0 1px rgba(200,241,53,.08)}
.liveSetupChoice .si{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center}
.liveSetupChoice span:last-child{min-width:0;display:block}
.liveSetupChoice b{display:block;font-size:12px;line-height:1.3}
.liveSetupChoice small{display:block;color:var(--dim);font-size:10px;line-height:1.4;margin-top:3px}
.liveSetupSummary{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--dim);font-size:10.5px;font-weight:750;margin:4px 0 13px}
.liveSetupSummary i{font-style:normal;color:var(--turq)}
.liveSetupLocked{margin:11px 0 2px;padding:10px 12px;border-radius:11px;border:1px solid rgba(43,217,198,.13);background:rgba(43,217,198,.035);color:var(--dim);font-size:10.5px;text-align:center}
.liveSetupLocked b{color:var(--ink)}

/* Beta feedback routes. Desktop gets a small companion to the existing BETA
   marker. Mobile uses inline placement so nothing floats over primary UI. */
.betaFeedbackTop{position:fixed;left:18px;top:67px;z-index:55;border:0;background:transparent;color:#d9cee0;padding:2px 0;font:800 10px/1.2 Inter,sans-serif;text-decoration:underline;text-decoration-color:rgba(217,206,224,.34);text-underline-offset:3px;cursor:pointer}
.betaFeedbackTop:hover{color:var(--ink)}
.betaFeedbackMobile{display:none;border:0;background:transparent;color:#d9cee0;margin:10px auto 0;padding:5px 7px;font:800 10px/1.2 Inter,sans-serif;align-items:center;gap:7px;cursor:pointer}
.betaFeedbackMobile b{border:1px solid rgba(200,241,53,.35);background:rgba(200,241,53,.055);color:var(--lime);font-size:7px;letter-spacing:1px;padding:4px 6px;border-radius:5px}
.betaFeedbackMobile span{text-decoration:underline;text-decoration-color:rgba(217,206,224,.34);text-underline-offset:3px}
.builderHeadActions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.betaCreatorChip{border:1px solid rgba(43,217,198,.22);background:rgba(43,217,198,.045);color:#e4d9e9;border-radius:999px;padding:8px 10px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.betaCreatorChip:hover{border-color:rgba(43,217,198,.42);background:rgba(43,217,198,.07)}
.betaFeedbackSheet{max-width:520px!important;padding-top:13px!important}
.betaSheetGrab{width:39px;height:4px;border-radius:999px;background:#6c5978;margin:0 auto 13px}
.betaSheetHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:5px}
.betaSheetEyebrow{color:var(--lime);font-size:8px;font-weight:900;letter-spacing:1.2px;margin-bottom:5px}
.betaContactNote{color:var(--dim);font-size:10px;line-height:1.5;margin-top:9px}
.betaContactOpt{display:flex;align-items:flex-start;gap:8px;color:var(--dim);font-size:10px;line-height:1.45;margin-top:10px}
.betaContactOpt input{accent-color:var(--lime);margin-top:2px}
.betaMomentFeedback{margin-top:14px;padding:12px;border:1px solid rgba(253,244,227,.075);background:rgba(255,255,255,.02);border-radius:12px;text-align:center}
.betaMomentFeedback>span{display:block;color:var(--dim);font-size:9.5px;margin-bottom:8px}
.betaMomentFeedback>div{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.betaMomentFeedback button{border:1px solid rgba(253,244,227,.09);background:rgba(0,0,0,.13);color:var(--ink);border-radius:999px;padding:7px 9px;font-size:9px;font-weight:800;cursor:pointer}
.betaMomentFeedback button:hover{border-color:rgba(43,217,198,.34)}
.betaReportBtn{margin-left:8px;border:1px solid rgba(43,217,198,.22);background:rgba(43,217,198,.05);color:var(--turq);border-radius:999px;padding:5px 7px;font-size:9px;font-weight:850;cursor:pointer}

/* Five-place How It Works illustration. */
.hiw-wsmall{font-size:8.5px!important;padding:5px 8px!important;min-height:27px!important}

/* ------------------------------------------------------------------------
   Name Reel: physical reel viewport, not a stack of cards.
   ------------------------------------------------------------------------ */
.rfReel{
  width:min(370px,92%)!important;height:288px!important;margin:auto!important;padding:0!important;
  position:relative!important;overflow:hidden!important;border-radius:19px!important;
  border:2px solid rgba(200,241,53,.30)!important;
  background:
    linear-gradient(90deg,rgba(255,122,41,.055),transparent 20% 80%,rgba(43,217,198,.05)),
    linear-gradient(180deg,#0f0715,#251331 48%,#0f0715)!important;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.22),inset 0 30px 42px rgba(0,0,0,.50),inset 0 -30px 42px rgba(0,0,0,.50),0 20px 42px rgba(0,0,0,.34)!important
}
.rfReel:before,.rfReel:after{content:"";position:absolute;z-index:8;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,241,53,.5),transparent);pointer-events:none}
.rfReel:before{top:114px}.rfReel:after{top:173px}
.rfReelRow{
  position:relative!important;z-index:3!important;height:54px!important;margin:2px 15px!important;border:0!important;border-radius:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:transparent!important;color:#9c8ca8!important;
  font:760 12px/1.2 'Unbounded','Inter',sans-serif!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;padding:0 18px!important;
  transform:translateZ(0);transition:opacity .18s ease,filter .18s ease,transform .18s ease
}
.rfReelRow.edge{opacity:.28!important;filter:blur(.7px)}
.rfReelRow:not(.edge):not(.focus){opacity:.58!important}
.rfReelRow.focus{
  z-index:6!important;height:58px!important;margin:0 13px!important;border:0!important;border-radius:10px!important;
  background:linear-gradient(90deg,rgba(255,122,41,.14),rgba(240,80,155,.14),rgba(200,241,53,.12))!important;
  color:var(--ink)!important;font-size:15px!important;font-weight:850!important;
  box-shadow:inset 0 0 0 1px rgba(200,241,53,.26),0 0 24px rgba(240,80,155,.13)!important
}
.rfReelSelect{position:absolute!important;z-index:5!important;left:10px!important;right:10px!important;top:114px!important;height:59px!important;border-left:3px solid var(--tang)!important;border-right:3px solid var(--turq)!important;border-radius:10px!important;pointer-events:none!important}
.rfReelMask{position:absolute!important;z-index:9!important;left:0!important;right:0!important;height:74px!important;pointer-events:none!important}
.rfReelMask.top{top:0!important;background:linear-gradient(180deg,#100717 14%,rgba(16,7,23,.87) 40%,transparent)!important}
.rfReelMask.bottom{bottom:0!important;background:linear-gradient(0deg,#100717 14%,rgba(16,7,23,.87) 40%,transparent)!important}
.rfReel.rolling .rfReelRow{animation:rfReelMechanical .34s linear infinite!important;filter:blur(.45px)!important}
.rfReel.rolling .rfReelRow:nth-of-type(3){animation-delay:-.07s!important}
.rfReel.rolling .rfReelRow:nth-of-type(5){animation-delay:-.14s!important}
@keyframes rfReelMechanical{0%{transform:translateY(-5px);opacity:.42}50%{transform:translateY(5px);opacity:.82}100%{transform:translateY(-5px);opacity:.42}}
.rfReelRow.focus.landed{animation:rfReelLock .72s cubic-bezier(.16,.84,.24,1) forwards!important;filter:none!important}
@keyframes rfReelLock{0%{transform:scale(.94);opacity:.48}48%{transform:scale(1.055);opacity:1}100%{transform:scale(1);opacity:1;color:var(--lime)}}

/* ------------------------------------------------------------------------
   Cards: a real overlapping draw deck. The six approved Otiya colours remain
   the card faces. During shuffle the backs show; the winner flips in front.
   ------------------------------------------------------------------------ */
.rfDeck.rfCardFan{
  display:block!important;position:relative!important;width:min(390px,94%)!important;height:280px!important;
  max-width:none!important;margin:4px auto 0!important;perspective:1000px!important;overflow:visible!important
}
.rfCardFan .rfDrawCard{
  position:absolute!important;left:50%!important;top:47%!important;width:126px!important;height:184px!important;aspect-ratio:auto!important;
  margin:-92px 0 0 -63px!important;padding:0!important;border:0!important;border-radius:17px!important;
  background:transparent!important;color:#171019!important;box-shadow:none!important;
  transform-origin:50% 112%!important;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .38s ease,filter .38s ease!important;
  z-index:var(--z,1)!important
}
.rfCardFan .rfDrawCard.pos0{--z:1;transform:translate(-98px,20px) rotate(-18deg)!important}
.rfCardFan .rfDrawCard.pos1{--z:2;transform:translate(-61px,2px) rotate(-10deg)!important}
.rfCardFan .rfDrawCard.pos2{--z:5;transform:translate(-24px,-11px) rotate(-3deg)!important}
.rfCardFan .rfDrawCard.pos3{--z:4;transform:translate(24px,-11px) rotate(3deg)!important}
.rfCardFan .rfDrawCard.pos4{--z:2;transform:translate(61px,2px) rotate(10deg)!important}
.rfCardFan .rfDrawCard.pos5{--z:1;transform:translate(98px,20px) rotate(18deg)!important}
.rfCardInner{position:relative!important;width:100%!important;height:100%!important;transform-style:preserve-3d!important;transition:transform .62s cubic-bezier(.2,.78,.2,1)!important}
.rfCardBack,.rfCardFront{position:absolute!important;inset:0!important;border-radius:17px!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;overflow:hidden!important;border:1px solid rgba(0,0,0,.32)!important;box-shadow:0 15px 30px rgba(0,0,0,.34)!important}
.rfCardBack{display:grid!important;place-items:center!important;align-content:center!important;gap:8px!important;background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),linear-gradient(150deg,#3b2150,#1b0d25)!important;color:var(--ink)!important}
.rfCardBack:after{content:"";position:absolute;inset:8px;border:1px solid rgba(200,241,53,.18);border-radius:12px;pointer-events:none}
.rfCardBack b{font:850 13px 'Unbounded','Inter',sans-serif!important;color:var(--ink)!important;letter-spacing:-.4px!important}
.rfCardGem{width:29px;height:29px;display:block;transform:rotate(45deg);border:2px solid var(--lime);box-shadow:inset 0 0 0 6px rgba(200,241,53,.06),0 0 16px rgba(200,241,53,.12)}
.rfCardFront{transform:rotateY(180deg)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:18px 11px!important;background:#fff!important}
.rfCardFront:after{content:"";position:absolute;inset:8px;border:1px solid rgba(0,0,0,.16);border-radius:12px;pointer-events:none}
.rfCardFront .rfCardNo{position:absolute!important;left:13px!important;top:12px!important;color:rgba(0,0,0,.48)!important;font:900 10px/1 'Inter',sans-serif!important;letter-spacing:.5px!important}
.rfCardFront b{position:relative!important;z-index:2!important;width:100%!important;max-width:100%!important;color:#171019!important;font:850 11px/1.25 'Unbounded','Inter',sans-serif!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
/* Branded faces, applied to the front instead of the whole 3D shell. */
.rfCardFan .rfDrawCard.c0 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#FF7A29,#D85A17 80%)!important}
.rfCardFan .rfDrawCard.c1 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#F0509B,#C63375 80%)!important}
.rfCardFan .rfDrawCard.c2 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#A78BFA,#785CE1 80%)!important}
.rfCardFan .rfDrawCard.c3 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#2BD9C6,#18AFA0 80%)!important}
.rfCardFan .rfDrawCard.c4 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#C8F135,#9BC51D 80%)!important}
.rfCardFan .rfDrawCard.c5 .rfCardFront{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),linear-gradient(155deg,#FFC53D,#DEA416 80%)!important}
/* At rest, the deck hints at the entrant faces. During a draw it closes to
   branded backs, shuffles, then the centre winner flips open. */
.rfCardFan:not(.shuffle):not(.winnerLanded) .rfCardInner{transform:rotateY(180deg)!important}
.rfCardFan.shuffle .rfCardInner{transform:rotateY(0deg)!important}
.rfCardFan.shuffle .rfDrawCard{animation:rfCardPhysicalShuffle .62s cubic-bezier(.3,.1,.5,.95) infinite alternate!important;filter:none!important}
.rfCardFan.shuffle .rfDrawCard.pos0{animation-delay:-.18s!important}.rfCardFan.shuffle .rfDrawCard.pos1{animation-delay:-.34s!important}.rfCardFan.shuffle .rfDrawCard.pos3{animation-delay:-.25s!important}.rfCardFan.shuffle .rfDrawCard.pos4{animation-delay:-.46s!important}.rfCardFan.shuffle .rfDrawCard.pos5{animation-delay:-.11s!important}
@keyframes rfCardPhysicalShuffle{0%{margin-top:-92px;translate:-10px 8px;rotate:-2deg}100%{margin-top:-101px;translate:12px -9px;rotate:3deg}}
.rfCardFan.winnerLanded .rfDrawCard:not(.landed){opacity:.32!important;filter:saturate(.7)!important}
.rfCardFan.winnerLanded .rfDrawCard.landed{z-index:20!important;transform:translate(0,-31px) rotate(0deg) scale(1.16)!important;animation:rfCardWinnerLift .72s cubic-bezier(.16,.84,.24,1) both!important}
.rfCardFan.winnerLanded .rfDrawCard.landed .rfCardInner{transform:rotateY(180deg)!important}
.rfCardFan.winnerLanded .rfDrawCard.landed .rfCardFront{box-shadow:0 23px 44px rgba(0,0,0,.42),0 0 0 3px rgba(200,241,53,.33)!important}
@keyframes rfCardWinnerLift{0%{opacity:.55}58%{opacity:1;filter:brightness(1.08)}100%{opacity:1;filter:none}}

@media(max-width:899px){
  .beta{display:none!important}
  .betaFeedbackTop{display:none!important}
  .betaFeedbackMobile{display:inline-flex!important}
  .builderHeadActions{width:100%;justify-content:flex-start!important;margin-top:7px}
  .betaCreatorChip{order:-1}
  .liveSetupChoices{grid-template-columns:1fr}
  .liveSetupSheet{max-width:none!important}
  .betaFeedbackSheet{border-radius:22px 22px 0 0!important;margin-top:auto!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
  .rfReel{width:min(330px,94%)!important;height:278px!important}
  .rfReelRow{height:52px!important;font-size:11px!important}
  .rfReelRow.focus{height:56px!important;font-size:13.5px!important}
  .rfReel:before{top:110px}.rfReel:after{top:167px}.rfReelSelect{top:110px!important;height:57px!important}
  .rfCardFan{width:min(326px,96%)!important;height:246px!important;transform:scale(.9);transform-origin:50% 42%}
  .rfCardFan .rfDrawCard{width:112px!important;height:164px!important;margin:-82px 0 0 -56px!important}
  .rfCardFan .rfDrawCard.pos0{transform:translate(-72px,17px) rotate(-16deg)!important}
  .rfCardFan .rfDrawCard.pos1{transform:translate(-46px,2px) rotate(-9deg)!important}
  .rfCardFan .rfDrawCard.pos2{transform:translate(-17px,-9px) rotate(-3deg)!important}
  .rfCardFan .rfDrawCard.pos3{transform:translate(17px,-9px) rotate(3deg)!important}
  .rfCardFan .rfDrawCard.pos4{transform:translate(46px,2px) rotate(9deg)!important}
  .rfCardFan .rfDrawCard.pos5{transform:translate(72px,17px) rotate(16deg)!important}
  .rfCardFan.winnerLanded .rfDrawCard.landed{transform:translate(0,-28px) rotate(0deg) scale(1.13)!important}
}
@media(max-width:380px){
  .rfCardFan{transform:scale(.82);height:225px!important}
  .betaMomentFeedback button{flex:1;min-width:86px}
}

/* ========================================================================
   r30: homepage header + beta feedback mobile reliability
   - Option A: desktop Sound > Music > vivid BETA; mobile vivid BETA > Sound > Music.
   - No Share feedback CTA on the homepage.
   - The same vivid clipped BETA treatment is used on desktop and mobile.
   - Feedback form is constrained to the viewport and its checkbox can never
     inherit the global full-width input rule.
   ======================================================================== */

/* The homepage has no Share feedback companion in r30. Keep legacy selectors
   inert in case a cached SPA render briefly contains one. */
body.homePage .betaFeedbackTop,
body.homePage .betaFeedbackMobile{display:none!important}

@media(max-width:899px){
  /* Keep BETA hidden on cramped non-home app screens. On the homepage it joins
     the top-left utility row and uses the exact vivid desktop treatment. */
  body.homePage .beta{
    display:block!important;
    position:absolute!important;
    left:10px!important;
    top:16px!important;
    z-index:37!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{
    position:absolute!important;
    top:12px!important;
    width:40px!important;
    height:40px!important;
  }
  body.homePage .sndbtn{left:78px!important}
  body.homePage .musbtn{left:124px!important}
}

/* The smallest supported phone widths need a compact utility/auth row without
   clipping or wrapping any button label. The visual language is unchanged. */
@media(max-width:360px){
  body.homePage .beta{
    left:9px!important;
    top:15px!important;
    font-size:9px!important;
    letter-spacing:1.5px!important;
    padding:6px 9px!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{width:34px!important;height:34px!important;top:12px!important}
  body.homePage .sndbtn{left:66px!important}
  body.homePage .musbtn{left:105px!important}
  body.homePage .authnav{right:8px!important;gap:5px!important}
  body.homePage .authnav button{height:36px!important;font-size:10.2px!important;padding:0 9px!important;white-space:nowrap!important}
  body.homePage .authnav .navsignup{padding:0 10px!important}
}

/* Feedback sheet: reliable desktop and mobile geometry. */
.betaFeedbackSheet{
  box-sizing:border-box!important;
  width:100%!important;
  overflow-x:hidden!important;
}
.betaFeedbackSheet .label{display:block;margin-top:10px;margin-bottom:6px}
.betaFeedbackSheet textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:100px!important;
  max-height:190px!important;
  resize:vertical!important;
}
.betaFeedbackSheet input[type="email"]{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.betaContactOpt{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:start!important;
}
.betaContactOpt input[type="checkbox"]{
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  max-height:18px!important;
  padding:0!important;
  margin:1px 0 0!important;
  flex:none!important;
  clip-path:none!important;
  accent-color:var(--lime)!important;
}
.betaContactOpt span{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.betaSheetClose{
  flex:0 0 auto!important;
  width:38px!important;
  height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  justify-content:center!important;
  font-size:18px!important;
}

@media(max-width:599px){
  .betaFeedbackSheet{
    max-width:none!important;
    max-height:calc(100dvh - 22px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:15px 14px max(18px,env(safe-area-inset-bottom))!important;
    border-radius:22px 22px 0 0!important;
    clip-path:none!important;
    scrollbar-width:thin;
  }
  .betaFeedbackSheet .betaSheetGrab{margin-bottom:12px!important}
  .betaFeedbackSheet .betaSheetHead{gap:10px!important}
  .betaFeedbackSheet .betaSheetHead .disp{font-size:17px!important;line-height:1.2!important}
  .betaFeedbackSheet textarea{min-height:88px!important;max-height:145px!important}
  .betaFeedbackSheet .btn,
  .betaFeedbackSheet .ghost{min-height:44px!important}
}

/* Creator feedback remains in document flow on phones, never over Save. */
@media(max-width:599px){
  .builderHeadActions{align-items:flex-start!important}
  .betaCreatorChip{max-width:100%!important}
}

/* Profile feedback: stack the action under its copy on narrow phones. */
@media(max-width:520px){
  .ps-beta .seghead{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    align-items:start!important;
    column-gap:10px!important;
    row-gap:7px!important;
  }
  .ps-beta .seghead>i{grid-column:1!important;grid-row:1!important}
  .ps-beta .seghead>span{grid-column:2!important;grid-row:1!important;min-width:0!important}
  .ps-beta .seghead>button{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
  }
}

/* Contextual error reporting: never squeeze a long error beside the report CTA. */
@media(max-width:520px){
  .snack{
    width:min(92vw,420px)!important;
    max-width:92vw!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:9px!important;
    line-height:1.45!important;
  }
  .snack>span{min-width:0!important;flex:1 1 100%!important;overflow-wrap:anywhere!important}
  .snack .betaReportBtn{
    margin-left:0!important;
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:center!important;
  }
}

/* ========================================================================
   r31: mobile homepage header fit correction
   - Keep approved order: BETA > Sound > Music on mobile.
   - Reduce utility/auth controls only enough to preserve breathing room.
   - Signed-out header must fit cleanly at 320-520 CSS px with no overlap.
   ======================================================================== */
@media(max-width:520px){
  body.homePage .beta{
    left:10px!important;
    top:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:6px 10px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:1.6px!important;
    white-space:nowrap!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{
    top:13px!important;
    width:36px!important;
    height:36px!important;
    font-size:17px!important;
  }
  body.homePage .sndbtn{left:69px!important}
  body.homePage .musbtn{left:111px!important}
  body.homePage .authnav{
    top:13px!important;
    right:8px!important;
    gap:5px!important;
  }
  body.homePage .authnav button{
    height:36px!important;
    padding:0 9px!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    letter-spacing:-.01em!important;
  }
  body.homePage .authnav .navsignup{padding:0 11px!important}
}
@media(max-width:340px){
  body.homePage .beta{
    left:8px!important;
    top:14px!important;
    min-height:32px!important;
    padding:5px 8px!important;
    font-size:9px!important;
    letter-spacing:1.35px!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{
    top:14px!important;
    width:31px!important;
    height:31px!important;
    font-size:15px!important;
  }
  body.homePage .sndbtn{left:61px!important}
  body.homePage .musbtn{left:97px!important}
  body.homePage .authnav{
    top:14px!important;
    right:7px!important;
    gap:3px!important;
  }
  body.homePage .authnav button{
    height:32px!important;
    padding:0 6px!important;
    font-size:9.2px!important;
  }
  body.homePage .authnav .navsignup{padding:0 7px!important}
}

/* ========================================================================
   r32: mobile homepage utility spacing correction
   - Preserve approved vivid BETA > Sound > Music order on mobile.
   - Add visible breathing room between BETA and Sound, and between audio controls.
   - Slightly reduce mobile utility/auth sizing so common phone widths stay relaxed.
   - Desktop remains unchanged.
   ======================================================================== */
@media(max-width:520px){
  body.homePage .beta{
    left:10px!important;
    top:14px!important;
    min-height:32px!important;
    padding:5px 9px!important;
    font-size:9.5px!important;
    line-height:1!important;
    letter-spacing:1.5px!important;
    white-space:nowrap!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{
    top:14px!important;
    width:34px!important;
    height:34px!important;
    font-size:16px!important;
  }
  body.homePage .sndbtn{left:78px!important}
  body.homePage .musbtn{left:120px!important}
  body.homePage .authnav{
    top:14px!important;
    right:8px!important;
    gap:6px!important;
  }
  body.homePage .authnav button{
    height:34px!important;
    padding:0 8px!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    letter-spacing:-.01em!important;
  }
  body.homePage .authnav .navsignup{padding:0 10px!important}
}

/* Slightly tighter auth controls below 380px leave a guaranteed central gutter
   without shrinking the vivid BETA treatment into an illegible badge. */
@media(max-width:380px){
  body.homePage .authnav{
    right:7px!important;
    gap:4px!important;
  }
  body.homePage .authnav button{
    height:33px!important;
    padding:0 7px!important;
    font-size:9.5px!important;
  }
  body.homePage .authnav .navsignup{padding:0 8px!important}
}

@media(max-width:340px){
  body.homePage .beta{
    left:8px!important;
    top:14px!important;
    min-height:30px!important;
    padding:5px 7px!important;
    font-size:8.8px!important;
    letter-spacing:1.25px!important;
  }
  body.homePage .sndbtn,
  body.homePage .musbtn{
    top:14px!important;
    width:30px!important;
    height:30px!important;
    font-size:14px!important;
  }
  body.homePage .sndbtn{left:66px!important}
  body.homePage .musbtn{left:102px!important}
  body.homePage .authnav{
    top:14px!important;
    right:6px!important;
    gap:3px!important;
  }
  body.homePage .authnav button{
    height:31px!important;
    padding:0 6px!important;
    font-size:8.9px!important;
  }
  body.homePage .authnav .navsignup{padding:0 7px!important}
}

/* r34 reliability: touch/coarse pointers never retain desktop hover visuals. */
@media (hover:none), (pointer:coarse){
  .btn:hover,.ghost:hover,.hostbar button:hover,.hostbar button.go:hover,.reactbtn:hover,.liveSetupChoice:hover,.ans:hover{filter:none!important;transform:none!important;}
}

/* r35 reliability: live quiz controls never use hover styling on any device.
   Selection/active states and keyboard :focus-visible remain available. */
body.livePage .btn:hover,
body.livePage .ghost:hover,
body.livePage .quiet:hover,
body.livePage .hostbar button:hover,
body.livePage .hostbar button.go:hover,
body.livePage .reactbtn:hover,
body.livePage .liveSetupChoice:hover,
body.livePage .ans:hover{
  filter:none!important;
  transform:none!important;
}

/* ---------- Beta feedback ---------- */

/* The real cause of the broken beta bar.

   .seghead span{display:block} matches EVERY span inside a seghead, and
   brandify() injects <span class="bd">oti<i>ya</i></span> wherever the word
   "otiya" appears. A display:block wordmark forces a line break before and
   after itself, which is why the bar read:

       oti
         ya
       is in beta
       Found something odd, or have an idea that would make
       oti
         ya
       better?

   The layout was never the problem. The existing grid already places the icon,
   text and button correctly. Only the wordmark needed to stay inline.

   Scoped to .bd rather than loosening .seghead span, so nothing else in the
   account page shifts. !important is needed because the block rule above is
   equally specific and comes first. */
.seghead span.bd,
.psec span.bd,
.betaContactOpt span.bd{
  display:inline!important;
  margin-top:0!important;
  font-size:inherit!important;
  color:inherit!important;
  white-space:nowrap;
}
.seghead span.bd i,
.psec span.bd i,
.betaContactOpt span.bd i{display:inline!important;margin-top:0!important}

/* Belt and braces for every other context: a wordmark must never break, and
   must never be turned into a block by a parent's descendant selector. */
.bd{white-space:nowrap}
.bd i{display:inline;margin-top:0}

/* The contact checkbox had margin-top but no margin-bottom, so Send feedback
   sat directly against it and the two read as one control. */
.betaContactOpt{margin-bottom:18px!important}

/* ---------- Pricing: the "tell us what is fair" invitation ---------- */

/* Placed above the billing toggle deliberately. If someone bounces at the
   prices, the invitation has to be in front of them before they leave. */
.prxFair{max-width:560px;margin:20px auto 0;padding:16px 18px;border-radius:16px;
  text-align:left;background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.3)}
.prxFair b{display:flex;align-items:center;gap:8px;font-family:'Unbounded','Inter',sans-serif;
  font-size:13.4px;color:var(--lime);margin-bottom:6px;line-height:1.3}
.prxFair p{margin:0 0 12px;font-size:12.8px;line-height:1.6;color:var(--dim)}
.prxFairBtn{background:transparent;border:1.5px solid var(--lime);color:var(--lime);
  font:800 12.2px 'Inter',sans-serif;padding:9px 15px;border-radius:11px;cursor:pointer;
  transition:.16s;white-space:nowrap;max-width:100%}
.prxFairBtn:hover{background:rgba(200,241,53,.14)}
@media(max-width:520px){
  .prxFair{margin-left:14px;margin-right:14px}
  .prxFairBtn{width:100%}
}

/* ---------- Kids avatar sheet: the "Surprise me" button ---------- */

/* The icon was landing above the label. .ghost sets padding and font but no
   flex layout, so the inline SVG sat on the text baseline and the space between
   it and the label was a legal line break.
   The measurement: the grid column is about 157px, 22px of padding each side
   leaves 113px, and the icon plus "Surprise me" needs about 115px. Two pixels
   short, so it broke.
   Fixed twice over: a centred row that cannot break, AND the two pixels
   reclaimed, because a layout that survives on two pixels will break again on a
   different font or a longer translation. */
.kAvatarSheetBtns{grid-template-columns:1fr 1.2fr}
.kAvatarSheetBtns .ghost,
.kAvatarSheetBtns .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;padding-left:14px;padding-right:14px;line-height:1.2}
.kAvatarSheetBtns .ghost svg{flex:none}
@media(max-width:380px){
  .kAvatarSheetBtns{grid-template-columns:1fr;gap:8px}
}

/* ---------- Careers page ---------- */

.crCard{max-width:640px;margin:0 auto;padding:26px 24px 22px;text-align:left}
.crKicker{font:800 9.5px 'Inter',sans-serif;letter-spacing:2px;color:var(--lime);margin-bottom:8px}
.crTitle{font-size:22px;font-weight:800;margin-bottom:10px;line-height:1.2}
.crLede{font-size:13.4px;line-height:1.7;color:var(--dim);margin:0 0 22px}

/* Two columns where there is room, one where there is not. */
.crGrid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media(min-width:560px){.crGrid{grid-template-columns:1fr 1fr;gap:14px 16px}}
.crField{min-width:0}

.crLbl{display:block;font:700 11.4px 'Inter',sans-serif;color:var(--ink);
  margin:0 0 6px;letter-spacing:.2px}
.crOpt{font-weight:600;color:var(--mute);letter-spacing:0}
/* The same marker on the partnership and otiya Live forms, so an optional
   field reads identically wherever somebody meets one. */
.pfOpt{font-style:normal;font-weight:600;color:var(--mute);letter-spacing:0}
.pfHint{display:block;font-style:normal;font-size:11.6px;line-height:1.55;
  color:var(--mute);margin-top:6px}

.crIn{width:100%;max-width:100%;box-sizing:border-box;
  background:#160A1E;border:1px solid rgba(253,244,227,.14);color:var(--ink);
  font:500 13.4px 'Inter',sans-serif;padding:11px 13px;outline:none;transition:border-color .16s}
.crIn:focus{border-color:var(--lime)}
.crIn::placeholder{color:var(--mute)}
select.crIn{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.crArea{resize:vertical;min-height:96px;line-height:1.6;margin-bottom:16px;font-family:'Inter',sans-serif}

.crFile{width:100%;max-width:100%;box-sizing:border-box;font:500 12.4px 'Inter',sans-serif;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px dashed rgba(253,244,227,.22);
  padding:13px;cursor:pointer}
.crFile::file-selector-button{background:rgba(200,241,53,.14);border:1px solid var(--lime);
  color:var(--lime);font:800 11.4px 'Inter',sans-serif;padding:7px 12px;border-radius:9px;
  cursor:pointer;margin-right:11px}
.crNote{font-size:11.6px;color:var(--mute);margin:7px 0 18px}

.crErr{background:rgba(240,80,155,.12);border:1px solid rgba(240,80,155,.4);color:#FFC2DC;
  font-size:12.6px;line-height:1.55;padding:11px 13px;border-radius:12px;margin-bottom:14px}
.crDone{display:flex;align-items:flex-start;gap:9px;
  background:rgba(200,241,53,.1);border:1px solid rgba(200,241,53,.36);color:var(--lime);
  font-size:13px;line-height:1.55;padding:13px 15px;border-radius:13px;margin-bottom:14px}
.crDone svg{flex:none;margin-top:1px}
.crSend{width:100%;margin-bottom:14px}
/* ---------- Careers: the page itself ----------
   A welcome, what working here means, then the roles. Built so the page reads
   as a careers page rather than two forms stacked on each other. */
.crHero{max-width:640px;margin:0 auto 34px;text-align:left}
.crHeroH1{font-size:30px;line-height:1.18;margin:10px 0 14px}
.crHeroAccent{color:var(--lime)}
.crHeroLede{font-size:14px;line-height:1.75;color:var(--dim);margin:0}

.crWhat{max-width:640px;margin:0 auto 40px;display:grid;gap:12px;
  grid-template-columns:1fr 1fr}
.crWhatItem{background:rgba(253,244,227,.03);border:1px solid rgba(253,244,227,.1);
  padding:16px 17px 17px;position:relative}
/* A short coloured rule instead of an emoji: it renders identically everywhere,
   carries the brand rather than a platform's idea of a satellite dish, and does
   not date. */
.crWhatItem::before{content:"";display:block;width:26px;height:3px;margin-bottom:12px}
.crWhat-lime::before{background:var(--lime)}
.crWhat-turq::before{background:var(--turq)}
.crWhat-mag::before{background:var(--mag)}
.crWhat-vio::before{background:var(--vio)}
.crWhatItem b{display:block;font:800 13px 'Inter',sans-serif;color:var(--ink);
  margin-bottom:5px;line-height:1.35}
.crWhatItem span{display:block;font-size:12.2px;line-height:1.65;color:var(--dim)}

.crSectionHead{max-width:640px;margin:0 auto 16px}
.crSectionH2{font-size:20px;line-height:1.25;margin:8px 0 0}

/* The way out of an application. Top left, where somebody looks for a way
   back, and quiet so it does not compete with the form itself. */
.crBackToRoles{display:inline-block;background:none;border:0;cursor:pointer;padding:0;
  margin:0 0 16px;font:700 12px 'Inter',sans-serif;color:var(--mute)}
.crBackToRoles:hover{color:var(--ink)}

/* The offer to pick up an unfinished application. */
.crResume{max-width:640px;margin:0 auto 26px;padding:15px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:rgba(200,241,53,.06);border:1px solid rgba(200,241,53,.3)}
.crResume b{display:block;font:800 13px 'Inter',sans-serif;color:var(--ink);margin-bottom:3px}
.crResume span{display:block;font-size:12.2px;line-height:1.6;color:var(--dim)}
.crResumeBtn{margin:0;width:auto;padding:10px 16px;font-size:12.6px}
@media(max-width:520px){
  .crResume{flex-direction:column;align-items:stretch}
  .crResumeBtn{width:100%}
}

/* The Apply button on the folded general application. Quiet, because the
   vacancy above it should stay the louder call to action. */
.crGenOpen{width:100%;margin:4px 0 0}

@media(max-width:560px){
  .crHero{margin-bottom:26px}
  .crHeroH1{font-size:24px}
  .crWhat{grid-template-columns:1fr;margin-bottom:30px}
  .crSectionH2{font-size:17.5px}
}

/* Careers: telling the two applications apart.

   Reported: the vacancy card and the general application card looked identical,
   so somebody who scrolled past the role filled in the wrong one. They now
   differ in three ways at once: a divider between them, a different accent,
   and different wording. Any one alone would be missable. */
.crSplit{display:flex;align-items:center;gap:14px;max-width:640px;
  margin:6px auto 18px;padding:0 24px}
.crSplit span{flex:1;height:1px;background:rgba(253,244,227,.14)}
.crSplit b{font:800 10px 'Inter',sans-serif;letter-spacing:2px;
  text-transform:uppercase;color:var(--mute)}

/* The general application is deliberately quieter than the vacancy: no lime
   edge, so the eye reads the vacancy as the live opportunity. */
.crOpenMode{border-color:rgba(253,244,227,.1)}
.crOpenMode .crKicker{color:var(--mute)}

/* Role mode borrows the vacancy's lime, so it is obvious you are inside the
   role application and not the general one. */
.crRoleMode{border-color:rgba(200,241,53,.45)}
.crRoleMode .crKicker{color:var(--lime)}

/* The expected fee: currency beside the amount, so the pair reads as one
   answer rather than two questions. */
.crHint{font-size:11.8px;line-height:1.6;color:var(--mute);margin:-6px 0 10px}
/* A grid with explicit columns rather than flex.

   Reported: the currency select filled the row and the amount box was squashed
   to a few pixels, so the fee could not be typed.

   Cause: `.crIn` sets width:100% on every field in this form, and a flex child
   carrying width:100% competes with its own flex-basis. Out-specifying that
   invites the same bug the next time someone touches .crIn, so the row is now a
   two column grid: the columns are declared once and no width declaration on a
   child can change them. `min-width:0` on both cells stops a long placeholder
   forcing the amount column wider than its share. */
.crFeeRow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;
  align-items:start;margin-bottom:16px}
.crFeeRow>*{min-width:0;width:100%}
/* The currency reads as a code, not a word. */
.crFeeCur{font-weight:700;letter-spacing:.4px}
@media(max-width:420px){
  .crFeeRow{grid-template-columns:1fr}
}

/* The live word count under "How would you contribute". Quiet until it is
   exceeded, then it turns to warn rather than to scold. */
.crCount{font:700 11px 'Inter',sans-serif;color:var(--mute);text-align:right;
  margin:-10px 0 16px}
.crCount.over{color:var(--mag)}
.crFine{font-size:11.4px;line-height:1.65;color:var(--mute);margin:0}

/* ---------- Careers: open roles ----------
   A vacancy card that expands in place. Built from the same tokens as the rest
   of the careers page so it reads as one page rather than a bolt-on, and using
   the brand's cut-corner device on every panel. */
.crRoleCard{border-color:rgba(200,241,53,.28);margin-bottom:16px}
.crRoleCard.on{border-color:rgba(200,241,53,.5)}
.crRoleTop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.crRoleTop>div{min-width:0}
.crOpenTag{flex:none;font:800 9.4px 'Inter',sans-serif;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--turq);background:rgba(43,217,198,.12);
  border:1px solid rgba(43,217,198,.34);border-radius:999px;padding:6px 11px;white-space:nowrap}
.crTerms{font:700 12.4px 'Inter',sans-serif;line-height:1.6;color:var(--ink);margin:0 0 18px}
.crLede+.crTerms{margin-top:-14px}

.crPills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.crPill{font:700 11.4px 'Inter',sans-serif;color:var(--dim);
  background:rgba(253,244,227,.04);border:1px solid rgba(253,244,227,.15);padding:7px 12px}

.crDeadline{font-size:12.4px;line-height:1.6;color:var(--ink);
  background:rgba(255,197,61,.09);border:1px solid rgba(255,197,61,.32);
  padding:12px 14px;margin:0 0 20px}
.crDeadline b{color:var(--sun)}

.crH3{font-family:'Unbounded','Inter',sans-serif;font-size:14px;line-height:1.3;
  color:var(--ink);margin:22px 0 9px}
.crP{font-size:13px;line-height:1.75;color:var(--dim);margin:0 0 10px}
.crP b{color:var(--ink)}
.crUl{margin:0 0 10px;padding-left:19px}
.crUl li{font-size:13px;line-height:1.75;color:var(--dim);margin-bottom:5px}
.crQ{margin-top:18px;color:var(--mute)}
.crQ b{color:var(--turq)}

.crRoleActs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.crRoleActs .btn{margin:0;width:auto;padding:12px 18px;font-size:13px}
.crClose{font:600 11.4px 'Inter',sans-serif;color:var(--mute);margin-left:auto}

/* The pinned-role notice on the form, with a way back out. Somebody who lands
   on the form by accident must be able to leave the role behind without
   reloading the page. */
.crPinned{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.3);
  padding:12px 14px;margin:0 0 18px}
.crPinned span{font:700 12.4px 'Inter',sans-serif;color:var(--ink);line-height:1.5}
.crPinned span b{color:var(--lime)}
.crClearRole{flex:none;background:none;border:0;cursor:pointer;
  font:800 11.4px 'Inter',sans-serif;color:var(--mute);text-decoration:underline;
  padding:4px 2px}
.crClearRole:hover{color:var(--ink)}

@media(max-width:520px){
  .crCard{padding:22px 16px 18px}
  .crTitle{font-size:19.5px}
  .crRoleTop{flex-direction:column;gap:10px}
  .crOpenTag{align-self:flex-start}
  .crRoleActs{flex-direction:column;align-items:stretch}
  .crRoleActs .btn{width:100%}
  .crClose{margin-left:0;text-align:center}
  .crH3{font-size:13.2px}
  .crPinned{flex-direction:column;align-items:flex-start}
}

/* ---------- Kids topic screen: continue follows the selection ---------- */

/* Ten topics make this screen about 1,600px tall, so a continue button at the
   foot meant tapping the first card and then scrolling past nine more to reach
   it. The button now sits directly under whichever card is chosen.

   Nothing is hidden and the list is not cut short: the cards below slide down to
   make room. That movement is deliberate, because it is also what tells you the
   tap registered and which card the button belongs to. */
.kTopicGo{
  display:block;
  animation:kGoIn .22s cubic-bezier(.2,.8,.3,1) both;
}
.kTopicGo .btn{margin:0}

@keyframes kGoIn{
  from{opacity:0;transform:translateY(-8px);max-height:0}
  to{opacity:1;transform:none;max-height:120px}
}

/* Someone who has asked for less motion still gets the button, just without the
   slide. */
@media(prefers-reduced-motion:reduce){
  .kTopicGo{animation:none}
}

/* ---------- Builder: set the time for every question at once ---------- */

/* Sits in the question rail, under the count, because that is where a host is
   already looking when they think about the quiz as a whole rather than one
   question. Only appears when there is more than one question to apply it to. */
.bulkTime{display:flex;align-items:center;gap:8px;margin:8px 0 10px;min-width:0}
.bulkLbl{flex:none;font:800 9.4px 'Inter',sans-serif;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--mute)}
.bulkSel{flex:1;min-width:0;background:#160A1E;color:var(--dim);
  border:1px solid rgba(253,244,227,.14);border-radius:9px;
  font:600 11.6px 'Inter',sans-serif;padding:7px 9px;cursor:pointer;
  outline:none;transition:border-color .16s,color .16s}
.bulkSel:hover,.bulkSel:focus{border-color:var(--turq);color:var(--ink)}
@media(max-width:520px){
  .bulkLbl{display:none}
}

/* ================= PLAY ON YOUR OWN ================= */

/* A section, not a fifth card. Four cards is already a lot to read on arrival,
   and playing alone is a player's job, so it sits below rather than competing.

   Width: the four cards above use the full 940px at desktop. This section had
   the same 940 but also 30px of its own padding, so its panels only reached
   880 and visibly stopped short of the cards. The padding is now added OUTSIDE
   the width with box-sizing, so the panels line up exactly with the cards.

   Colour: it was one flat panel wash, which read as dead space. Each half now
   carries its own tint, turquoise for the ready-made side and lime for otiya
   AI, matching the two accents those things already use elsewhere in Otiya. */
.soloSec{width:100%;max-width:100%;margin:36px auto 0;
  padding:24px 22px 22px;box-sizing:border-box;
  background:linear-gradient(150deg,#2A1636,#1E0F2A 62%);
  border:1px solid rgba(253,244,227,.09);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  position:relative;overflow:hidden}
/* Two washes, one from each corner, so the block has depth instead of a flat
   field of purple. */
.soloSec:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 80% at 100% 0%,rgba(200,241,53,.13),transparent 62%),
    radial-gradient(80% 70% at 0% 100%,rgba(43,217,198,.10),transparent 60%)}
.soloSec>*{position:relative}

.soloEy{display:flex;align-items:center;gap:9px;font:800 9.6px 'Inter',sans-serif;
  letter-spacing:2px;color:var(--lime);margin-bottom:11px}
.soloEy s{width:16px;height:2px;background:var(--lime);border-radius:2px;display:block}
.soloH{font-family:'Unbounded','Inter',sans-serif;font-size:23px;font-weight:800;
  letter-spacing:-.025em;line-height:1.14;margin:0 0 8px}
.soloSub{font-size:13.4px;color:var(--dim);line-height:1.6;margin:0 0 18px;font-weight:500}

.soloTwo{display:grid;grid-template-columns:1fr;gap:13px;align-items:stretch}
.soloP{display:flex;flex-direction:column;min-width:0;height:100%;
  padding:18px;border-radius:18px;
  background:linear-gradient(160deg,rgba(43,217,198,.10),rgba(43,217,198,.03));
  border:1px solid rgba(43,217,198,.34)}
.soloP.ai{background:linear-gradient(160deg,rgba(200,241,53,.15),rgba(200,241,53,.04));
  border-color:rgba(200,241,53,.5)}

.soloIco{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  line-height:0;margin-bottom:12px;flex:none;
  background:var(--turq);color:var(--turqT)}
.soloP.ai .soloIco{background:var(--lime);color:var(--limeT)}
.soloPT{font-family:'Unbounded','Inter',sans-serif;font-size:15.4px;font-weight:800;
  margin:0 0 8px;line-height:1.28;letter-spacing:-.02em;color:var(--turq)}
.soloP.ai .soloPT{color:var(--lime)}
.soloPD{font-size:12.8px;color:var(--dim);line-height:1.65;margin:0 0 14px}

.soloBits{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;flex:1}
.soloBit{display:flex;align-items:flex-start;gap:8px;font-size:12px;
  color:var(--ink);line-height:1.45;font-weight:600}
.soloBit svg{flex:none;margin-top:1px;color:var(--turq)}
.soloP.ai .soloBit svg{color:var(--lime)}

.soloBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:46px;border-radius:13px;cursor:pointer;margin-top:auto;
  font:800 13px 'Inter',sans-serif;white-space:nowrap;border:1.5px solid;padding:0 14px}
.soloBtn.plain{background:rgba(43,217,198,.14);border-color:var(--turq);color:var(--turq)}
.soloBtn.plain:hover{background:rgba(43,217,198,.24)}
.soloBtn.go{background:var(--lime);border-color:var(--lime);color:var(--limeT)}
.soloBtn.go:hover{filter:brightness(1.06)}
.soloNote{font-size:10.8px;color:var(--mute);margin:9px 0 0;text-align:center}

/* 940px to match .actquad exactly, with the padding inside that box rather
   than added to it, so the panels and the cards share one edge. */
@media(min-width:860px){
  .soloSec{width:100%;max-width:100%;padding:30px;box-sizing:border-box}
  .soloTwo{grid-template-columns:1fr 1fr;gap:16px}
  .soloH{font-size:27px}
}
@media(max-width:520px){
  .soloSec{padding:20px 16px 18px}
}

/* ---------- Ask otiya AI sheet ---------- */
.aiSheet{text-align:left}
.aiEy{display:flex;align-items:center;gap:7px;font:800 9.4px 'Inter',sans-serif;
  letter-spacing:1.8px;color:var(--lime);margin-bottom:9px}
.aiH{font-family:'Unbounded','Inter',sans-serif;font-size:17px;font-weight:800;
  margin:0 0 7px;line-height:1.25;letter-spacing:-.02em}
.aiP{font-size:12.6px;color:var(--dim);line-height:1.6;margin:0 0 15px}
.aiIn{width:100%;box-sizing:border-box;background:#160A1E;color:var(--ink);
  border:1px solid rgba(253,244,227,.16);font:600 16px 'Inter',sans-serif;
  padding:13px 14px;outline:none;transition:border-color .16s;margin-bottom:11px}
.aiIn:focus{border-color:var(--lime)}
.aiIn::placeholder{color:var(--mute)}
.aiChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.aiChip{height:auto;padding:7px 11px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.14);
  color:var(--dim);font:700 11.2px 'Inter',sans-serif;cursor:pointer;transition:.16s}
.aiChip:hover{border-color:var(--lime);color:var(--lime)}
.aiOpts{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.aiOptL{flex:none;width:74px;font:800 9.6px 'Inter',sans-serif;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--mute)}
.aiSeg{display:flex;gap:6px;flex:1;min-width:0}
.aiSeg button{flex:1;height:36px;padding:0 8px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.14);
  color:var(--dim);font:800 11.6px 'Inter',sans-serif;cursor:pointer;transition:.16s}
.aiSeg button.on{background:rgba(200,241,53,.15);border-color:var(--lime);color:var(--lime)}
.aiErr{background:rgba(240,80,155,.12);border:1px solid rgba(240,80,155,.4);color:#FFC2DC;
  font-size:12.2px;line-height:1.55;padding:10px 12px;border-radius:11px;margin-bottom:12px}

/* the review list */
.aiList{max-height:46vh;overflow-y:auto;margin-bottom:14px;display:flex;
  flex-direction:column;gap:8px;padding-right:2px}
.aiQ{display:flex;align-items:flex-start;gap:10px;width:100%;height:auto;
  text-align:left;padding:12px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.11);transition:.14s}
.aiQ.on{background:rgba(200,241,53,.09);border-color:rgba(200,241,53,.42)}
.aiQTick{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  line-height:0;margin-top:1px;border:1.5px solid rgba(253,244,227,.22)}
.aiQ.on .aiQTick{background:var(--lime);border-color:var(--lime);color:var(--limeT)}
.aiQBody{min-width:0;flex:1}
.aiQBody b{display:block;font:700 12.8px 'Inter',sans-serif;line-height:1.45;color:var(--ink)}
.aiQA{display:flex;align-items:center;gap:5px;margin-top:5px;
  font:600 11.4px 'Inter',sans-serif;color:var(--lime)}

/* ---------- solo play screen ---------- */
.soloPlay{max-width:520px;margin:0 auto;text-align:left}
.soloBar{height:4px;border-radius:99px;background:rgba(253,244,227,.1);
  overflow:hidden;margin-bottom:14px}
.soloBar span{display:block;height:100%;background:var(--lime);
  border-radius:99px;transition:width .3s ease}
.soloMeta{display:flex;justify-content:space-between;font:700 11.4px 'Inter',sans-serif;
  color:var(--mute);margin-bottom:14px}
.soloQText{font-family:'Unbounded','Inter',sans-serif;font-size:19px;font-weight:800;
  line-height:1.3;letter-spacing:-.02em;margin:0 0 18px}
.soloOpts{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.soloOpt{display:flex;align-items:center;gap:11px;width:100%;height:auto;
  text-align:left;padding:14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(253,244,227,.13);
  font:700 13.4px 'Inter',sans-serif;color:var(--ink);transition:.14s}
.soloOpt:hover:not(:disabled){border-color:var(--lime)}
.soloOptL{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(253,244,227,.09);font:800 11.6px 'Inter',sans-serif;color:var(--dim)}
.soloOpt.right{background:rgba(200,241,53,.14);border-color:var(--lime)}
.soloOpt.right .soloOptL{background:var(--lime);color:var(--limeT)}
.soloOpt.wrong{background:rgba(240,80,155,.12);border-color:rgba(240,80,155,.5)}
.soloOpt.dim{opacity:.45}
.soloFeed{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:13px;
  font:800 12.8px 'Inter',sans-serif;margin-bottom:13px;line-height:1.45}
.soloFeed.ok{background:rgba(200,241,53,.12);color:var(--lime)}
.soloFeed.no{background:rgba(240,80,155,.12);color:#FFC2DC}
.soloFeed svg{flex:none}
.soloScore{text-align:center;padding:24px 16px;border-radius:18px;margin-bottom:16px;
  background:rgba(200,241,53,.08);border:1px solid rgba(200,241,53,.3)}
.soloScore b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:44px;
  font-weight:800;color:var(--lime);line-height:1}
.soloScore b span{font-size:22px;color:var(--dim)}
.soloScoreL{display:block;margin-top:7px;font-size:13px;color:var(--dim);font-weight:600}
.soloReview{margin-bottom:16px}
.soloReviewH{font:800 9.6px 'Inter',sans-serif;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.soloWrong{padding:12px 13px;border-radius:12px;margin-bottom:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(253,244,227,.1)}
.soloWrong b{display:block;font:700 12.6px 'Inter',sans-serif;line-height:1.45;margin-bottom:4px}
.soloWrong span{font-size:11.8px;color:var(--dim);line-height:1.5}
.soloWrong i{font-style:normal;color:var(--lime);font-weight:700}

/* ---------- builder: links out, so it is not a dead end ---------- */
/* Someone working on a quiz had no route to their others without going Home
   first. These sit under the question count, where a host is already looking
   when thinking about the quiz as a whole. */
.railNav{display:flex;gap:7px;margin:8px 0 10px;flex-wrap:wrap}
.railLink{display:inline-flex;align-items:center;gap:6px;height:auto;
  padding:6px 10px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.13);
  color:var(--dim);font:700 10.8px 'Inter',sans-serif;transition:.16s}
.railLink:hover{border-color:var(--turq);color:var(--turq)}

/* ---------- starting a room ---------- */
/* Shown the instant Host is tapped, because the room takes a few seconds to
   exist and the page used to sit frozen with the button still live. */
.hstart{max-width:420px;margin:12vh auto 0;text-align:center;padding:0 16px}
.hstartSpin{width:64px;height:64px;border-radius:20px;margin:0 auto 20px;
  display:grid;place-items:center;color:var(--limeT);background:var(--lime);
  animation:hstartPulse 1.4s ease-in-out infinite}
@keyframes hstartPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.92);opacity:.82}
}
.hstart h2{font-family:'Unbounded','Inter',sans-serif;font-size:20px;font-weight:800;
  margin:0 0 9px;letter-spacing:-.02em}
.hstart p{font-size:13px;color:var(--dim);line-height:1.6;margin:0}
@media(prefers-reduced-motion:reduce){.hstartSpin{animation:none}}
/* The explanation, shown after answering. This is what makes solo a learning
   tool rather than just a score, so it sits above the verdict where it is read
   rather than below it where it is skipped. */
.soloWhy{padding:11px 13px;border-radius:12px;margin-bottom:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(253,244,227,.12);
  font-size:12.4px;line-height:1.6;color:var(--dim)}

/* ---------- motion on the solo section ---------- */

/* The AI panel gets a slow breath on its icon, so the section reads as the
   live part of the page rather than another block of text. Restrained on
   purpose: the raffle demos already carry the heavy animation on this page and
   two competing motions would fight. */
.soloP.ai .soloIco{animation:soloIcoBreath 3.2s ease-in-out infinite}
@keyframes soloIcoBreath{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(200,241,53,.34)}
  50%{transform:scale(1.05);box-shadow:0 0 0 7px rgba(200,241,53,0)}
}

/* The three proofs arrive one after another, which draws the eye down them
   rather than presenting a block to skim past. */
.soloP.ai .soloBit{animation:soloBitIn .42s ease both}
.soloP.ai .soloBit:nth-child(1){animation-delay:.05s}
.soloP.ai .soloBit:nth-child(2){animation-delay:.16s}
.soloP.ai .soloBit:nth-child(3){animation-delay:.27s}
@keyframes soloBitIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* A tap should feel like it did something. */
.soloBtn{transition:transform .14s ease,filter .16s ease,border-color .16s ease}
.soloBtn:active{transform:translateY(1px) scale(.99)}
.soloP{transition:border-color .2s ease,transform .2s ease}
.soloP.ai:hover{border-color:rgba(200,241,53,.6)}

/* Solo play itself: each question arrives rather than snapping in. */
.soloQText{animation:soloQIn .3s ease both}
.soloOpts .soloOpt{animation:soloQIn .34s ease both}
.soloOpts .soloOpt:nth-child(1){animation-delay:.04s}
.soloOpts .soloOpt:nth-child(2){animation-delay:.09s}
.soloOpts .soloOpt:nth-child(3){animation-delay:.14s}
.soloOpts .soloOpt:nth-child(4){animation-delay:.19s}
@keyframes soloQIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* The right answer lands with a small pop, the verdict fades in under it. */
.soloOpt.right{animation:soloRight .42s ease}
@keyframes soloRight{
  0%{transform:scale(1)}
  40%{transform:scale(1.025)}
  100%{transform:scale(1)}
}
.soloOpt.wrong{animation:soloWrong .34s ease}
@keyframes soloWrong{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.soloFeed,.soloWhy{animation:soloQIn .3s ease .08s both}

/* The score counts up rather than appearing, which is the moment worth a beat. */
.soloScore b{animation:soloScoreIn .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes soloScoreIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .soloP.ai .soloIco,.soloP.ai .soloBit,.soloQText,.soloOpts .soloOpt,
  .soloOpt.right,.soloOpt.wrong,.soloFeed,.soloWhy,.soloScore b{animation:none}
}

/* ---------- pricing: the one-off event row ---------- */
/* Somebody hosting a single conference or wedding does not want a monthly
   plan, and none of the tiers serve them. Styled like the enterprise row so
   the two read as the same kind of offer. */
.prxOneOff{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:560px;margin:14px auto 0;padding:18px 20px;border-radius:18px;
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.3);text-align:left}
.prxOneOff>div{flex:1;min-width:0}
.prxOneOff span{display:flex;align-items:center;gap:6px;font:800 9.4px 'Inter',sans-serif;
  letter-spacing:1.6px;color:var(--lime);margin-bottom:5px}
.prxOneOff b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:15px;
  font-weight:800;margin-bottom:5px;letter-spacing:-.02em}
.prxOneOff small{display:block;font-size:12.2px;color:var(--dim);line-height:1.6}
.prxOneOff button{flex:none;height:44px;padding:0 18px;border-radius:12px;
  background:var(--lime);border:1.5px solid var(--lime);color:var(--limeT);
  font:800 12.6px 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
.prxOneOff button:hover{filter:brightness(1.06)}
@media(max-width:520px){
  .prxOneOff{margin-left:14px;margin-right:14px}
  .prxOneOff button{width:100%}
}

/* The AI door inside the builder itself. It was only on the home card before,
   so a host already in the builder had no way to reach it. Full width in the
   question rail, where they are looking when a quiz needs more questions. */
.railAI{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;margin:0 0 12px;border-radius:11px;cursor:pointer;
  background:rgba(200,241,53,.12);border:1.5px solid rgba(200,241,53,.45);
  color:var(--lime);font:800 12px 'Inter',sans-serif;
  white-space:nowrap;transition:.16s}
.railAI:hover{background:rgba(200,241,53,.2)}
.railAI svg{flex:none}

/* ---------- otiya AI: turn a document into a quiz ---------- */
/* A dashed border marks it as the optional route, so nobody thinks a file is
   required before they can ask for anything. */
.aiDoc{margin:0 0 15px;padding:12px 13px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px dashed rgba(200,241,53,.34)}
.aiDocLbl{display:flex;align-items:center;gap:7px;cursor:pointer;
  font:800 11.4px 'Inter',sans-serif;color:var(--lime);margin-bottom:9px}
.aiDocLbl svg{flex:none}
.aiFile{width:100%;max-width:100%;box-sizing:border-box;
  font:600 11.6px 'Inter',sans-serif;color:var(--dim);cursor:pointer}
.aiFile::file-selector-button{background:rgba(200,241,53,.14);
  border:1px solid rgba(200,241,53,.5);color:var(--lime);
  font:800 10.8px 'Inter',sans-serif;padding:6px 11px;border-radius:9px;
  cursor:pointer;margin-right:10px}
.aiDocNote{font-size:10.8px;color:var(--mute);margin-top:7px;line-height:1.5;
  word-break:break-word}

/* ---------- iOS zoom on text inputs ---------- */

/* Safari on iOS zooms the whole page into any input whose font-size is under
   16px, and it does not zoom back out. The field then sits off screen while you
   type, and pinching out only re-zooms on the next tap.

   Every typing field is therefore 16px on touch devices. The visual size on
   desktop is left alone, because a mouse never triggers the behaviour and 16px
   would look oversized in the compact rows. */
@media (hover:none) and (pointer:coarse){
  .aiIn,.crIn,.crArea,.kName,#nickIn,#jbCode,
  input[type="text"],input[type="email"],input[type="url"],
  input[type="number"],input[type="search"],input[type="tel"],
  input[type="password"],textarea,select{
    font-size:16px!important;
  }
  /* The kids name row is tight, so it keeps its display face at a size that
     will not zoom rather than inheriting the generic bump. */
  .kName{font-size:16px!important}
}

/* The native file control is hidden and replaced with our own button. A file
   input cannot keep its value when the surrounding markup is rebuilt, and this
   sheet is rebuilt on every option change, so the browser kept showing "No file
   chosen" while the document was in fact attached. */
.aiFileHidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.aiDoc.has{border-style:solid;border-color:rgba(200,241,53,.5);
  background:rgba(200,241,53,.08)}
.aiDocPick{width:100%;height:40px;border-radius:10px;cursor:pointer;
  background:rgba(200,241,53,.14);border:1px solid rgba(200,241,53,.5);
  color:var(--lime);font:800 11.8px 'Inter',sans-serif}
.aiDocPick:hover{background:rgba(200,241,53,.22)}
.aiDocPicked{display:flex;align-items:center;gap:10px;min-width:0}
.aiDocName{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  font:700 11.8px 'Inter',sans-serif;color:var(--lime);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiDocName svg{flex:none}
.aiDocClear{flex:none;height:32px;padding:0 11px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid rgba(253,244,227,.24);
  color:var(--dim);font:700 10.8px 'Inter',sans-serif}
.aiDocClear:hover{border-color:var(--ink);color:var(--ink)}

/* Three links on one line in the Create card. On a narrow phone they wrap to
   two, which is still shorter than the three separate rows that made the card
   tall enough to leave dead space in the Join card beside it. */
.acRow3{gap:6px}
.acRow3 .acLink{flex:1 1 auto;justify-content:center;padding:9px 10px;
  font-size:11.4px;white-space:nowrap}
.acRow3 .acLink svg{flex:none}
@media(max-width:400px){
  .acRow3 .acLink{flex:1 1 100%}
}

/* ---------- sheets and the on-screen keyboard ---------- */

/* The sheet is bottom-anchored on mobile via position:fixed and inset:0. Those
   resolve against the LAYOUT viewport, which does not shrink when the keyboard
   opens on iOS. So the sheet's bottom edge stayed behind the keyboard and the
   field being typed into was pushed out of sight, while the rest of the sheet
   appeared to grow.

   dvh tracks the visible area instead, so the sheet sits above the keyboard.
   The vh line stays first as a fallback for anything that does not know dvh. */
.sheetwrap{height:100vh}
@supports (height:100dvh){
  .sheetwrap{height:100dvh}
}

/* A tall sheet can now scroll rather than overflowing off screen. The otiya AI
   sheet has a subject field, six chips, a file row and two option rows, which
   is taller than a phone once the keyboard takes half the screen. */
.sheet{max-height:calc(100vh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}
@supports (height:100dvh){
  .sheet{max-height:calc(100dvh - 32px)}
}

/* Keyboard-safe padding at the foot of the sheet, so the last button is never
   flush against the keyboard. */
@media (hover:none) and (pointer:coarse){
  .sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}

/* ---- the Wheel ---- */

/* ---- the Drum ---- */

/* ---- the button ---- */

/* Prize draw on a phone: one strong reveal, the Wheel, at a readable size. */

/* ================= section accents =================
   Every home section carries a 3px top line in its own colour, ordered down
   the page so no two neighbours match. Four sections previously had no accent
   at all, which is why adjacent ones read as identical. Each colour matches
   the eyebrow that section already uses where it has one.

   Written as one declaration per class, with no custom-property indirection.
   The first attempt used box-shadow:inset 0 3px 0 var(--secAccC,var(--turq))
   with --secAccC set per class. Measured in Chromium, three of the six
   resolved wrongly: mag fell back to turq, and vio and tang computed to none.
   The direct form below was then measured working on all six. A var() nested
   inside a var() fallback is not worth debugging when one declaration does the
   job plainly.

   !important is here because two of these sections carry their own !important
   border and background rules, and an accent that silently loses to them is
   worse than no accent. */
.secAcc-turq{box-shadow:inset 0 3px 0 var(--turq)!important}
.secAcc-sun{box-shadow:inset 0 3px 0 var(--sun)!important}
.secAcc-mag{box-shadow:inset 0 3px 0 var(--mag)!important}
.secAcc-lime{box-shadow:inset 0 3px 0 var(--lime)!important}
.secAcc-vio{box-shadow:inset 0 3px 0 var(--vio)!important}
.secAcc-tang{box-shadow:inset 0 3px 0 var(--tang)!important}

/* Play on your own sits above the showcase and had no accent either. Magenta
   matches its own eyebrow, and the showcase below it is turquoise. */
.soloSec{box-shadow:inset 0 3px 0 var(--mag)!important}

/* Two buttons on one line, replacing the three that wrapped on a phone. */
.acRow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Anchor a tall sheet to the top on small screens.

   The wrapper was align-items:flex-end, which is right for a short sheet and
   wrong for one taller than the screen: when the keyboard shrinks the viewport
   the bottom stays pinned and the first field is pushed off the top. Measured
   at 390x400, the subject input was at -51 to -5 before this change and 133 to
   179 after. Top anchoring plus the focus handler in app.js keeps the field
   being typed into on screen. */
@media(max-width:680px){
  .sheetwrap{align-items:flex-start!important}
  .sheetwrap .sheet,
  .sheetwrap>.aiSheet{margin-top:10px!important;max-height:calc(100dvh - 20px)!important}
}
@supports not (height:100dvh){
  @media(max-width:680px){
    .sheetwrap .sheet,
    .sheetwrap>.aiSheet{max-height:calc(100vh - 20px)!important}
  }
}

/* Writing progress, not a countdown, so it holds a partial width instead of
   draining like the live-quiz timer this bar is shared with. */

/* =========================================================
   r61: section accents, Play on your own, hero pills,
   AI results, beta player copy
   ========================================================= */

/* ---------- one accent line per section, matching its own title ----------
   Reported: some sections showed two outlines, and several lines disagreed
   with the colour of the title above them.

   Two separate causes. The lines disagreed because the accent class and the
   eyebrow colour were chosen independently, now fixed in app.js. The doubling
   is here: a section carries the accent on its own top edge while the panel
   inside it also draws a coloured top border, so two lines appear a few pixels
   apart. The inner border stays, it just stops repeating the accent colour. */
.soloSec{box-shadow:inset 0 3px 0 var(--lime)!important}

/* The pricing band keeps its own framed panel and no accent line, so it reads
   as one edge rather than two. */
.homePricingSec{box-shadow:none!important}

/* The quote rail already carries an edge fade at 7% and 93% (line 2290), so
   the cards reading as cut in half is NOT a missing mask. Left alone rather
   than layering a second mask on top of a working one: without a browser here
   the real cause cannot be confirmed, and guessing at it is how a working rule
   gets overridden by a worse one. Needs eyeballing on a real device. */

/* ---------- the three gathering pills on a phone ----------
   Reported: three pills on three separate lines, each too large. Two causes.
   The copy said "beta" twice, which made two pills long enough to claim a line
   each, and the pill type does not step down on small screens.

   Copy is shortened in app.js. Here the row becomes two columns so three pills
   occupy two lines rather than three, with the last one spanning the full
   width instead of sitting half empty. */
/* My first attempt keyed this to @media(max-width:520px), which was the wrong
   dimension. The constraint is not the viewport, it is the COLUMN: .pband goes
   two-column from 650px up, so the text column holding these pills is around
   350px even on a wide screen, and the media query never fired there.

   auto-fit with a minmax floor responds to the container instead, so the row
   is correct at every width by construction rather than at the widths I
   happened to think of. Two per line in a 350px column, three when there is
   room, and never three tall rows. No media query at all. */
/* Two earlier attempts at this were both wrong, and for different reasons
   worth recording.

   The first keyed to @media(max-width:520px), which is the wrong dimension:
   the constraint is the COLUMN, not the viewport, and .pband goes two-column
   from 650px so that column is narrow on wide screens too.

   The second used auto-fit with a minmax(148px,1fr) floor. Right tool, wrong
   number. The column measures about 297px on a phone, and two 148px tracks
   plus the gap needs 303px, so auto-fit fell back to a single column and the
   pills stacked again. A floor is only correct if you already know the
   container width, which is exactly what I did not know.

   So: three explicit columns, and the pill becomes a small stacked card with
   the icon above the label. That way the layout never depends on guessing how
   much room the text needs, because the text is allowed to wrap inside its own
   track instead of forcing the track wider. Three on one line at any width. */
/* The layout for this row is set in the LAST block of this file, on purpose.
   See the note there. */
.factPills .heropill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:5px;
  min-width:0;
  padding:9px 7px;
  font-size:10px;
  line-height:1.28;
  white-space:normal;
  overflow-wrap:break-word;
  hyphens:none;
}
.factPills .heropill svg{width:14px;height:14px;flex:none}

@media(min-width:900px){
  /* On a wide screen the column is wide enough for the original single-line
     row, so it goes back to that: icon beside label, left aligned. */
  .factPills{grid-template-columns:repeat(3,auto)!important;justify-content:start}
  .factPills .heropill{
    flex-direction:row;
    text-align:left;
    gap:7px;
    padding:9px 13px;
    font-size:11.4px;
    white-space:nowrap;
  }
}

/* ---------- hidden answers in the AI review list ---------- */
.aiQHid{display:block;margin-top:5px;font:600 10.8px 'Inter',sans-serif;
  color:var(--mute);letter-spacing:.2px}
.aiRevealBtn[aria-pressed="true"]{border-color:rgba(200,241,53,.42);color:var(--lime)}
.aiRevealBtn svg{flex:none}

/* ---------- Play on your own, rebuilt ----------
   The old block was two panels of identical width, shape and weight, each with
   a three-tick list and a note underneath. Nothing led, so the eye had nowhere
   to land and the section read as filler.

   One change carries this: otiya AI becomes the wide panel and shows what it
   does rather than describing it, and the ready-made packs sit beside it as a
   narrower, quieter column of real pack names. The tick lists are gone from
   both, because three ticks in two columns is six near-identical rows.

   The demo answers read "4 answers, hidden", which is exactly what the real
   result sheet now shows, so the preview is honest rather than decorative. */
@media(min-width:860px){
  .soloTwo{grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr)!important;gap:16px}
}

.soloHero{padding:20px!important}
.soloHeroTop{display:flex;align-items:flex-start;gap:13px}
.soloHeroTop .soloIco{margin-bottom:0}
.soloHeroTop h3{margin-top:2px}
.soloHero .soloPD{margin-bottom:14px}

/* The demo panel. Sunk into the card rather than raised on it, so it reads as
   a window into the product and not a third card. */
.soloDemo{
  border-radius:14px;padding:12px;margin:0 0 16px;
  background:rgba(10,4,16,.46);
  border:1px solid rgba(200,241,53,.16);
}
.soloDemoField{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-radius:10px;margin-bottom:10px;
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.3);
}
.soloDemoField svg{flex:none;color:var(--lime)}
.soloDemoField b{font:700 12.6px 'Inter',sans-serif;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soloCaret{
  width:1.5px;height:14px;flex:none;background:var(--lime);
  animation:soloCaret 1.1s step-end infinite;
}
@keyframes soloCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

.soloDemoQ{display:flex;align-items:flex-start;gap:9px;padding:7px 2px}
.soloDemoQ + .soloDemoQ{border-top:1px solid rgba(253,244,227,.07)}
.soloDemoQ em{
  flex:none;width:17px;height:17px;border-radius:5px;margin-top:1px;
  display:grid;place-items:center;font:800 9.4px 'Inter',sans-serif;font-style:normal;
  background:rgba(200,241,53,.16);color:var(--lime);
}
.soloDemoQ>span{min-width:0}
.soloDemoQ b{display:block;font:600 12px 'Inter',sans-serif;line-height:1.4;color:var(--ink)}
.soloDemoQ small{display:block;margin-top:3px;font:600 10.2px 'Inter',sans-serif;color:var(--mute)}

/* Real pack names carry more than a tick list would: they answer "what is
   actually in there" without a second click. */
.soloPacks{display:flex;flex-direction:column;gap:5px;margin:0 0 16px;flex:1}
.soloPacks span{
  padding:7px 10px;border-radius:9px;
  font:600 11.6px 'Inter',sans-serif;color:var(--ink);
  background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.2);
}
.soloPacks span.more{background:none;border-color:transparent;color:var(--mute);
  font-weight:600;padding-left:2px}

@media(max-width:859px){
  /* Four rows stacked runs too tall on a phone, so the fourth comes out and
     three still show the sequence. The pack list is left complete, because
     hiding any of them would make "and 5 more" wrong. */
  .soloDemoQ:nth-of-type(5){display:none}
}
@media(prefers-reduced-motion:reduce){
  .soloCaret{animation:none}
}

/* Cancel the inherited chip treatment on anything nested inside a chip. */

/* ---------- the empty band under the AI card ----------
   The two columns stretch to a shared height. The packs column runs to six
   rows, the AI column to a field plus two questions, and .soloBtn has
   margin-top:auto, so the difference collected as blank space above the
   button rather than anywhere useful.

   The demo panel now absorbs it, so the extra height goes inside a bordered
   panel instead of showing as a gap. A third question closes most of the rest,
   and that is waiting on the subject being chosen. */
.soloHero .soloDemo{flex:1 1 auto;display:flex;flex-direction:column}
.soloHero .soloDemo .soloDemoQ:last-of-type{margin-bottom:auto}

/* ---------- the demo types itself, then the questions arrive ----------
   Driven entirely by the existing reveal observer in setupMotion(), which adds
   .in to any .rv element once it scrolls into view and then stops watching it.
   No new JavaScript, and no timer that keeps running off screen.

   Every element's resting state is its FINISHED state. The animation only
   plays under .soloSec.in, so if the observer never fires, or scripting is
   off, the panel still reads correctly rather than showing an empty field and
   no questions. That also means prefers-reduced-motion needs nothing more than
   switching the animations off, which is at the bottom.

   The sequence runs once: a looping demo beside body copy pulls the eye off
   the words next to it. */
.soloTypeWrap{display:inline-flex;min-width:0;overflow:hidden}
.soloType{
  display:inline-block;white-space:nowrap;font-style:normal;
  font:inherit;color:inherit;
}

.soloSec.in .soloType{
  /* "Write me a quiz about world facts" is 33 characters, stepped one per frame
     so it reads as typing rather than a wipe. CHANGE THE STRING AND BOTH
     NUMBERS BELOW CHANGE WITH IT.

     It also has to be a prompt that would genuinely produce the four questions
     shown underneath, which are all world geography. A demo that asks for one
     thing and returns another is worse than no demo.

     33 characters needs about 216px at the normal 12.6px, and a 320px phone
     only has 187px inside that field, so the rule further down drops the font
     on the narrowest screens. max-width is in ch, which scales with the font,
     so the animation stays correct at either size. */
  animation:soloTypeIn 1.35s steps(33,end) .2s both;
}
@keyframes soloTypeIn{
  from{max-width:0}
  to{max-width:33ch}
}

/* The field brightens as the subject lands, which stands in for submitting. */
.soloSec.in .soloDemoField{animation:soloFieldSet .35s ease .95s both}
@keyframes soloFieldSet{
  from{border-color:rgba(200,241,53,.3);background:rgba(200,241,53,.07)}
  to{border-color:rgba(200,241,53,.55);background:rgba(200,241,53,.12)}
}

/* The caret blinks while typing and goes once the subject is in. */
.soloSec.in .soloCaret{animation:soloCaret .55s step-end 0s 2,soloCaretOut .01s linear 1.1s both}
@keyframes soloCaretOut{to{opacity:0;width:0}}

/* Questions arrive in order, after the subject. */
.soloSec.in .soloDemoQ{animation:soloQPop .34s cubic-bezier(.16,1,.3,1) both}
.soloSec.in .soloDemoQ:nth-of-type(2){animation-delay:1.3s}
.soloSec.in .soloDemoQ:nth-of-type(3){animation-delay:1.57s}
.soloSec.in .soloDemoQ:nth-of-type(4){animation-delay:1.84s}
.soloSec.in .soloDemoQ:nth-of-type(5){animation-delay:2.11s}
@keyframes soloQPop{
  from{opacity:0;transform:translateY(6px) scale(.97)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .soloSec.in .soloType,
  .soloSec.in .soloDemoField,
  .soloSec.in .soloCaret,
  .soloSec.in .soloDemoQ{animation:none!important}
  .soloCaret{animation:none!important}
}

/* ---------- the otiya AI lockup ----------
   One product name, so one mark. The AI carries the wordmark's own family and
   weight, in the ink colour rather than the tangerine of the "ya", so the two
   halves read as a pair without the AI competing with the accent. */
.bdAI{white-space:nowrap}
.bdAI u{
  text-decoration:none;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:.01em;
  color:inherit;
}

/* Writing progress, not a countdown, so it holds a partial width. */

/* ---------- the sheet: examples, and an optional attachment ---------- */
.aiExLbl{font:700 10.4px 'Inter',sans-serif;color:var(--mute);margin:0 0 7px}
.aiOpt{
  margin-left:6px;padding:2px 7px;border-radius:999px;
  font:800 8.6px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(253,244,227,.08);border:1px solid rgba(253,244,227,.16);color:var(--mute);
}

/* ---------- the AI panel at ten questions ----------
   Four rows filled about two thirds of the panel and left a dead band at the
   bottom. Ten rows in two columns is five rows deep, which fills it, and it is
   also the number the header claims: the panel said "10 questions" while
   showing four.

   On a phone the grid drops to one column, so ten rows would be a long scroll
   inside a panel that also has to match the height of the other three tabs.
   Six show there instead, and the footer and the progress bar say six of ten
   rather than ten of ten, so the panel stays internally honest at both sizes.
   It reads as mid-write, which is what "writing" in the header already says. */

/* ---------- Why otiya exists ----------
   Built as a standard .sec so it matches its neighbours: same panel, same cut
   corner, same eyebrow. Magenta because the sections either side are
   turquoise and violet, so this is the one colour that does not repeat a
   neighbour.

   The only difference from a normal sechead is that it holds a link and a
   quiet name line, so those two get their own rules and nothing else changes. */
.whySec{max-width:640px}
.whyName{margin-top:10px!important;font-size:12.5px!important;color:var(--mute)!important}
.whyName b{color:var(--mag);font-weight:700}
.whyMore{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font:800 13px 'Inter',sans-serif;color:var(--mag);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid rgba(240,80,155,.4);
}
.whyMore:hover{color:var(--ink);border-bottom-color:rgba(253,244,227,.4)}
.whyMore svg{flex:none}

/* ---------- Help Centre ----------
   Built on the existing .legal card so it inherits the type scale the privacy
   and terms pages already use. Answers are collapsed by default: forty open
   answers is a wall, and somebody arriving with one problem should be able to
   see the shape of the whole thing in a screen or two, then open the one that
   matches. <details> does that natively, so it works with no JavaScript and
   the browser handles keyboard access for free. */
.hcCard{padding:22px}
.hcHead{margin-bottom:18px}
.hcH1{font-family:'Unbounded','Inter',sans-serif;font-size:23px;line-height:1.18;
  color:var(--ink);margin:10px 0 8px}
.hcSub{font-size:13.4px;line-height:1.7;color:var(--dim);margin:0}

/* Jump links. Not a sticky sidebar: the page is not long enough to need one,
   and a sidebar would cost the width the answers need on a phone. */
.hcJump{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;
  padding-bottom:18px;border-bottom:1px solid rgba(253,244,227,.1)}
.hcJump a{
  font:700 11.4px 'Inter',sans-serif;color:var(--dim);text-decoration:none;
  padding:6px 11px;border-radius:999px;border:1px solid rgba(253,244,227,.14);
}
.hcJump a:hover{color:var(--turq);border-color:rgba(43,217,198,.45)}

.hcGroup{margin-bottom:26px;scroll-margin-top:74px}
.hcH2{font-family:'Unbounded','Inter',sans-serif;font-size:14.6px!important;
  color:var(--turq)!important;margin:0 0 10px!important;letter-spacing:.01em}

.hcQ{border-bottom:1px solid rgba(253,244,227,.08)}
.hcQ summary{
  cursor:pointer;list-style:none;padding:12px 30px 12px 0;position:relative;
  font:700 13.4px 'Inter',sans-serif;line-height:1.5;color:var(--ink);
}
.hcQ summary::-webkit-details-marker{display:none}
/* A rotating chevron drawn in CSS, so there is no icon dependency and the
   open state is obvious without reading. */
.hcQ summary:after{
  content:"";position:absolute;right:6px;top:17px;width:7px;height:7px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .2s;
}
.hcQ[open] summary:after{transform:rotate(-135deg);border-color:var(--turq)}
.hcQ[open] summary{color:var(--turq)}
.hcQ .hcA{padding:0 4px 14px 0}
.hcQ .hcA p{margin:0;font-size:13.2px;line-height:1.78;color:var(--dim)}

.hcFoot{
  margin-top:8px;padding:16px;border-radius:14px;
  background:rgba(43,217,198,.06);border:1px solid rgba(43,217,198,.22);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.hcFoot b{display:block;font:800 13.4px 'Inter',sans-serif;color:var(--ink);margin-bottom:4px}
.hcFoot span{display:block;font-size:12.4px;line-height:1.65;color:var(--dim);max-width:420px}
.hcFootBtns{display:flex;gap:8px;flex-wrap:wrap}
.hcFootBtns .btn{margin:0;width:auto;padding:10px 16px;font-size:12.6px}

@media(max-width:560px){
  .hcCard{padding:17px 15px}
  .hcH1{font-size:20px}
  .hcFoot{flex-direction:column;align-items:flex-start}
  .hcFootBtns .btn{flex:1 1 auto}
}

/* ---------- Why otiya exists: the right column ----------
   The section was one column of copy inside a full-width panel, so the right
   third sat empty on desktop. It now uses .secSplit, the same mechanic the
   Templates section uses, which stacks to one column below 860px on its own.

   Content is three commitments rather than three features, because this
   section's job is to give the belief above it some evidence. Free for kids
   leads, since it is the strongest thing there is to say.

   Desktop only, as agreed: mobile already reads well and the page is long, so
   the whole column is hidden rather than stacked underneath. It repeats
   nothing the copy does not already say, so nothing is lost on a phone. */
.whyBody{display:none}

@media(min-width:860px){
  .whyBody{
    display:flex;flex-direction:column;gap:10px;justify-content:center;
  }
  .whyPromise{
    padding:14px 15px;border-radius:13px;
    background:rgba(240,80,155,.05);
    border:1px solid rgba(240,80,155,.2);
  }
  .whyPT{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;
    font:800 13.2px 'Inter',sans-serif;color:var(--ink);margin-bottom:5px;
  }
  .whyPD{font-size:12.2px;line-height:1.65;color:var(--dim)}
  /* Reuses the shape of the create-and-host age pills so it looks native. */
  .whyAges{display:inline-flex;gap:4px}
  .whyAges i{
    font-style:normal;width:19px;height:19px;border-radius:6px;
    display:grid;place-items:center;font:800 9.6px 'Inter',sans-serif;
  }
  .whyAges i:nth-child(1){background:var(--lime);color:var(--limeT)}
  .whyAges i:nth-child(2){background:var(--turq);color:var(--turqT)}
  .whyAges i:nth-child(3){background:var(--mag);color:var(--magT)}
}

/* ---------- Templates: My quizzes moved to the left ----------
   Seven cards in a two column grid left the seventh alone with a gap beside
   it. My quizzes is also the odd one out in kind: the other six are ways to
   start something new, and this one opens something that already exists. So it
   sits under the copy instead, smaller, and the right grid divides evenly into
   three rows of two. */
.tcardSmall{
  margin-top:18px;
  padding:11px 12px!important;
  background:rgba(167,139,250,.06);
}
.tcardSmall .tchip{width:30px;height:30px;flex:none}
.tcardSmall .tname{font-size:12.6px!important}
.tcardSmall .tsub2{font-size:10.8px!important}
@media(max-width:859px){
  /* Stacked, it sits directly above the grid, so the gap tightens. */
  .tcardSmall{margin-top:14px}
}

/* ---------- The blog ----------
   Served by netlify/functions/blog.mjs as finished HTML, so these styles are
   loaded by a page the app never rendered. Everything here is scoped to
   .blogPage or the bp prefix, and nothing overrides a shared class, because a
   change made for the blog must not reach into the app. */
.blogPage .blogWrap{max-width:820px;padding-top:34px}
.blogPage .bpCard0,.blogPage .bpPost{width:100%;padding:24px;box-sizing:border-box}

.bpHead{margin-bottom:20px;max-width:640px}
.bpH1{font-family:'Unbounded','Inter',sans-serif;font-size:25px;line-height:1.18;color:var(--ink);margin:11px 0 8px}
.bpSub{font-size:13.6px;line-height:1.7;color:var(--dim);margin:0}

.bpTags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding-bottom:16px;
  border-bottom:1px solid rgba(253,244,227,.1)}
.bpTags span{font:700 10.6px 'Inter',sans-serif;color:var(--dim);
  padding:5px 10px;border-radius:999px;border:1px solid rgba(253,244,227,.14)}
.bpTags span.on{background:rgba(200,241,53,.14);border-color:rgba(200,241,53,.4);color:var(--lime)}

/* ---------- Blog index: a grid, not a stack ----------
   Every post has a cover, so a single column left most of the page empty and
   made seven posts feel like a long scroll. One featured banner sets the
   hierarchy, then auto-fill with a 260px floor handles the rest: three across
   on a desktop, two on a tablet, one on a phone, decided by the space rather
   than by a breakpoint I guessed. */
.blogPage .blogWrapWide{max-width:1120px}

.bpCard{
  display:flex;flex-direction:column;text-decoration:none;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(253,244,227,.1);
  background:rgba(253,244,227,.02);
  transition:border-color .2s,transform .2s;
}
.bpCard:hover{border-color:rgba(43,217,198,.45);transform:translateY(-3px)}
.bpCardImg{display:block;background:rgba(10,4,16,.4)}
.bpCardImg img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bpCardBody{display:flex;flex-direction:column;padding:15px 16px 17px;flex:1}
.bpMeta{display:block;font:800 9.6px 'Inter',sans-serif;letter-spacing:.1em;
  color:var(--turq);margin-bottom:7px;text-transform:uppercase}
.bpCardTitle{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:14.6px;
  line-height:1.3;color:var(--ink);margin-bottom:8px}
.bpCardEx{display:block;font-size:12.4px;line-height:1.6;color:var(--dim);margin-bottom:12px}
.bpRead{display:inline-block;margin-top:auto;font:800 11.4px 'Inter',sans-serif;
  color:var(--lime);border-bottom:1px solid rgba(200,241,53,.35);padding-bottom:2px;align-self:flex-start}

/* The featured banner: image beside the words on a wide screen, stacked below
   it, so it reads as the lead item rather than just a bigger card. */
.bpCard.feat{
  margin-bottom:16px;border-color:rgba(43,217,198,.3);background:rgba(43,217,198,.05);
}
.bpCard.feat .bpCardTitle{font-size:21px;margin-bottom:10px}
.bpCard.feat .bpCardEx{font-size:13.4px;max-width:62ch}
@media(min-width:760px){
  .bpCard.feat{flex-direction:row;align-items:stretch}
  .bpCard.feat .bpCardImg{flex:0 0 46%;max-width:46%}
  .bpCard.feat .bpCardImg img{height:100%;aspect-ratio:auto;min-height:230px}
  .bpCard.feat .bpCardBody{justify-content:center;padding:24px 26px}
}

.bpGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.bpEmpty{font-size:13px;color:var(--dim)}

.bpBack{display:inline-block;font:800 11.6px 'Inter',sans-serif;color:var(--lime);
  text-decoration:none;margin-bottom:14px}
.bpTitle{font-family:'Unbounded','Inter',sans-serif;font-size:20px;line-height:1.28;
  letter-spacing:-.005em;color:var(--ink);margin:8px 0 15px;max-width:34ch}
.bpHero{margin:0 0 18px;border-radius:12px;overflow:hidden}
.bpHero img{display:block;width:100%;height:auto}

/* Post body. Imported posts arrive as Blogger HTML, which carries its own
   inline styles and wrapper divs, so these rules have to survive whatever it
   brings: images are forced to fit rather than trusted to. */
.bpBody{font-size:14.2px;line-height:1.85;color:#D6C7E0}
.bpBody p{margin:0 0 15px}
.bpBody h2,.bpBody h3,.bpBody h4{font-family:'Unbounded','Inter',sans-serif;color:var(--ink);
  line-height:1.28;margin:26px 0 10px}
.bpBody h2{font-size:18px}
.bpBody h3{font-size:15.5px}
.bpBody h4{font-size:14px}
.bpBody a{color:var(--lime)}
.bpBody strong,.bpBody b{color:var(--ink)}
.bpBody ul,.bpBody ol{margin:0 0 16px;padding-left:22px}
.bpBody li{margin-bottom:7px}
.bpBody blockquote{margin:0 0 16px;padding:6px 0 6px 14px;
  border-left:2px solid var(--lime);color:#D6C7E0}
.bpBody code{font-family:ui-monospace,monospace;font-size:.9em;
  background:rgba(253,244,227,.08);padding:2px 5px;border-radius:4px}
.bpBody img{max-width:100%!important;height:auto!important;border-radius:10px;margin:6px 0}
.bpBody table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13px}
.bpBody td,.bpBody th{border:1px solid rgba(253,244,227,.12);padding:8px 10px;text-align:left}
/* Blogger wraps images in a centring div with inline margins that overflow. */
.bpBody .separator{margin:0 0 14px!important;text-align:center}
.bpBody .separator a{margin:0!important}

.bpCta{margin-top:22px;padding:16px;border-radius:14px;
  background:rgba(200,241,53,.06);border:1px solid rgba(200,241,53,.24);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bpCta b{display:block;font:800 13.6px 'Inter',sans-serif;color:var(--ink);margin-bottom:4px}
.bpCta span{display:block;font-size:12.4px;line-height:1.6;color:var(--dim);max-width:400px}
.bpCta .btn{margin:0;width:auto;padding:11px 18px;font-size:12.8px}

.blogFoot{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  padding:26px 16px 60px;position:relative;z-index:1}
.blogFoot a{font:700 12px 'Inter',sans-serif;color:var(--dim);text-decoration:none}
.blogFoot a:hover{color:var(--turq)}

@media(max-width:560px){
  .blogPage .bpCard0,.blogPage .bpPost{padding:17px 15px}
  .bpH1{font-size:21px}
  .bpTitle{font-size:18px;max-width:none}
  .bpBody{font-size:13.8px}
  .bpCta{flex-direction:column;align-items:flex-start}
  .bpCta .btn{width:100%}
}

/* If a colour or light background survives both the import cleaning and the
   render cleaning, it must still not produce grey text on purple. Only the
   colour is neutralised, NOT the layout: an earlier version of this rule also
   killed backgrounds and borders, which flattened every card in every post
   into plain paragraphs. */
.bpBody [style*="color"]{color:inherit!important}

/* ---------- Imported post structures ----------
   The Blogger posts were authored with a real class system: qcard for a
   question, qa and anschip for the reveal, otiya-card and otiya-icon for a
   two-up grid, otiya-callout, otiya-quote, sech2. My first import stripped
   those classes along with the light-theme colours, which is why the posts
   read as flat paragraphs and an emoji ended up on a line of its own, orphaned
   from the heading it belonged to.

   The classes are kept now and styled for a dark page here. Each one keeps the
   shape it was written to have, in Otiya's palette rather than Blogger's. */

/* A section heading with the lime underline it was designed with. */
.bpBody .sech2{
  display:inline-block;margin-top:32px!important;padding-bottom:7px;
  border-bottom:2px solid var(--lime);
}

/* A question, with its options and its answer behind a tap. */
.bpBody .qcard{
  border:1px solid rgba(253,244,227,.12);border-radius:14px;
  padding:16px 18px;margin:14px 0;background:rgba(253,244,227,.02);
}
.bpBody .qcard .q{margin:0 0 9px!important;font-weight:700;color:var(--ink)}
.bpBody .qcard .opts{line-height:1.95;color:var(--dim);margin:0}
.bpBody .qa{margin-top:11px}
.bpBody .qa>summary{
  cursor:pointer;display:inline-block;list-style:none;
  background:rgba(200,241,53,.14);border:1px solid rgba(200,241,53,.4);
  color:var(--lime);font:800 11.6px 'Inter',sans-serif;
  padding:7px 15px;border-radius:999px;user-select:none;
}
.bpBody .qa>summary::-webkit-details-marker{display:none}
.bpBody .qa>summary::marker{content:""}
.bpBody .qa[open]>summary{background:rgba(200,241,53,.22)}
.bpBody .qa-ans{margin:11px 0 0;color:var(--ink);line-height:1.7}
.bpBody .anschip{
  background:var(--lime);color:var(--limeT);font:800 9.6px 'Inter',sans-serif;
  letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-right:7px;
  text-transform:uppercase;
}
.bpBody .qa-note{margin-top:9px;font-size:12.4px;color:var(--mute);line-height:1.6}

/* The two-up card grid, and the icon that must sit WITH its heading. */
.bpBody .otiya-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:20px 0 26px;
}
.bpBody .otiya-card{
  border:1px solid rgba(253,244,227,.12);border-radius:15px;
  padding:17px 18px;background:rgba(253,244,227,.03);
}
.bpBody .otiya-icon{
  display:block;font-size:1.6em;line-height:1;margin:0 0 8px;
}
.bpBody .otiya-card h3{margin:0 0 6px!important;font-size:14px!important;color:var(--ink)}
.bpBody .otiya-card p{margin:0!important;font-size:12.8px;line-height:1.62;color:var(--dim)}

/* Callout, quote and small print. */
.bpBody .otiya-callout{
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.3);
  border-radius:15px;padding:17px 19px;margin:22px 0;
}
.bpBody .otiya-callout strong{color:var(--lime)}
.bpBody .otiya-quote{
  background:rgba(167,139,250,.07);border-left:3px solid var(--vio);
  border-radius:0 12px 12px 0;padding:15px 18px;margin:22px 0;
  font-size:14.4px;line-height:1.75;
}
.bpBody .otiya-small{font-size:12.4px;color:var(--mute);line-height:1.6}

/* The dark centred CTA card the posts end on. */
.bpBody div[style*="text-align:center"],
.bpBody div[style*="text-align: center"]{
  background:rgba(10,4,16,.45);border:1px solid rgba(200,241,53,.22);
  border-radius:16px;padding:22px 20px;margin:26px 0;
}

/* Images. They arrive at s1600 now, so they can fill the column without being
   upscaled. Centred rather than left, since every one is a full-width banner. */
.bpBody img{display:block;margin:16px auto;border-radius:12px}
.bpBody .separator{margin:16px 0!important}
.bpBody .separator a{display:block;margin:0!important}

/* The lede, lifted out of the imported hero. */
.bpBody .bpLede{font-size:15.4px;line-height:1.7;color:var(--ink);margin-bottom:18px}

@media(max-width:600px){
  .bpBody .otiya-cards{grid-template-columns:1fr;gap:10px}
  .bpBody .qcard{padding:14px 15px}
}

/* Draft preview banner, shown only when a post is opened with ?fresh=1 before
   it is published. */
.bpDraft{
  margin:0 0 14px;padding:10px 13px;border-radius:10px;
  background:rgba(255,183,3,.1);border:1px solid rgba(255,183,3,.36);
  font:700 12px 'Inter',sans-serif;line-height:1.55;color:var(--ink);
}

/* ---------- Question and reveal, paired ----------
   The imported quiz posts are a <p> holding the question followed by a
   <details> holding the answer, as two unrelated siblings. With even spacing
   between them a reveal button reads as belonging to the question BELOW it,
   which is the opposite of the truth.

   :has() lets the pair be drawn as one card without editing a single post: the
   question is the top half, the reveal is the bottom half, and the gap between
   groups is larger than the gap inside one. Works for posts that carry the
   qcard markup and for the bare ones alike. */
.bpBody p:has(+ details){
  margin:0!important;
  padding:14px 16px 12px;
  border:1px solid rgba(253,244,227,.12);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:rgba(253,244,227,.025);
  font-weight:600;
  color:var(--ink);
}
.bpBody p:has(+ details) + details{
  margin:0 0 11px;
  padding:0 16px 14px;
  border:1px solid rgba(253,244,227,.12);
  border-top:0;
  border-radius:0 0 12px 12px;
  background:rgba(253,244,227,.025);
}

/* The reveal itself. A pill that looks pressable, and a clear open state, so
   it reads as a control rather than a stray line of text. */
.bpBody details > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(200,241,53,.12);
  border:1px solid rgba(200,241,53,.38);
  color:var(--lime);
  font:800 11.4px 'Inter',sans-serif;
  letter-spacing:.02em;
  user-select:none;
  transition:background .18s,border-color .18s;
}
.bpBody details > summary::-webkit-details-marker{display:none}
.bpBody details > summary::marker{content:""}
.bpBody details > summary:hover{background:rgba(200,241,53,.2)}
/* A chevron drawn in CSS, rotating on open, so the state is visible without
   reading the label. */
.bpBody details > summary:before{
  content:"";width:5px;height:5px;flex:none;margin-top:-2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s;
}
.bpBody details[open] > summary{background:rgba(200,241,53,.22)}
.bpBody details[open] > summary:before{transform:rotate(-135deg);margin-top:2px}

/* The answer, and the ANSWER label the imported posts use as a bare span. */
.bpBody details > span:first-of-type{
  display:inline-block;
  background:var(--lime);
  color:var(--limeT);
  font:800 9.4px 'Inter',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  margin:11px 8px 0 0;
}
.bpBody details[open]{padding-bottom:15px}

/* =========================================================
   LAST BLOCK. Keep the gathering pill layout here.

   This row defeated three separate fixes. The first keyed to the viewport
   instead of the column. The second used an auto-fit floor of 148px, six
   pixels more than the column actually offers. The third was correct but lost
   to three legacy rules that carried !important on grid-template-columns, one
   of which forced a single column under 430px. Those three are now removed.

   It sits at the very end of the stylesheet because that is the one position
   whose cascade order and nesting cannot be argued with: nothing later can
   override it, and it cannot be trapped inside a media query someone left open
   further up. Anything that needs to beat this rule should be written below
   it, deliberately.

   validate.sh fails the build if any rule forces fewer than three columns.
   ========================================================= */
.factPills{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  align-items:stretch!important;
}
.factPills .heropill{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  gap:5px!important;
  min-width:0!important;
  width:auto!important;
  min-height:0!important;
  padding:9px 7px!important;
  font-size:10px!important;
  line-height:1.28!important;
  white-space:normal!important;
}
.factPills .heropill svg{width:14px!important;height:14px!important;flex:none}
/* Wide enough for the original single line row, so it returns to that. */
@media(min-width:900px){
  .factPills{grid-template-columns:repeat(3,auto)!important;justify-content:start}
  .factPills .heropill{
    flex-direction:row!important;
    text-align:left!important;
    gap:7px!important;
    padding:9px 13px!important;
    font-size:11.4px!important;
    white-space:nowrap!important;
  }
}

/* ---------- The scrollbar ----------
   It was the browser default, which on a dark branded page reads as a grey
   strip belonging to something else. Styled here in the site's own palette:
   a translucent track, a violet thumb that warms to turquoise on hover.

   Both syntaxes are needed and they are not interchangeable. Firefox only
   supports scrollbar-color and scrollbar-width; WebKit and Blink only support
   the pseudo-elements. Neither one covers every browser on its own. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.45) rgba(253,244,227,.05);
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{
  background:rgba(253,244,227,.04);
}
::-webkit-scrollbar-thumb{
  background:rgba(167,139,250,.42);
  border-radius:99px;
  /* The border is the gap: a transparent border over a clipped background
     gives the thumb breathing room without a wrapper element. */
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(43,217,198,.6);background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:rgba(200,241,53,.65);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* The carousels that deliberately hide their bars keep doing so: the rules
   above are general, and these are more specific, so nothing changes there. */

/* The one-line reason shown beside Report this issue on a genuine failure.
   Quiet on purpose: the message is the point, this is the footnote. */
.betaWhy{
  display:block;width:100%;
  font:600 11.4px 'Inter',sans-serif;line-height:1.5;
  color:var(--mute);margin-top:2px;
}
@media(max-width:480px){
  .betaWhy{font-size:11px}
}

/* ---------- a way out of a sheet on a phone ----------
   Reported: otiya AI on mobile was hard to leave without refreshing. Two
   causes. The Cancel button sits at the bottom of a sheet that is taller than
   a phone screen, so with the keyboard open it cannot be scrolled to. And the
   phone's Back gesture did not close a sheet at all, because popstate only
   handled route changes.

   Back is fixed in app.js. This is the other half: a close control pinned to
   the top of the sheet so it is reachable whatever the keyboard is doing.
   It calls sheetBackdrop() rather than closeSheet(), so it inherits the same
   protection: a running request is never interrupted and typed work asks
   first. */
.aiSheet{position:relative}
.aiX{
  position:sticky;
  top:0;
  float:right;
  margin:-4px -2px 0 8px;
  z-index:4;
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(253,244,227,.16);
  background:rgba(20,10,30,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--dim);
  font-size:13px;line-height:1;
  cursor:pointer;
}
.aiX:hover{color:var(--ink);border-color:rgba(253,244,227,.34)}
.aiX:focus-visible{outline:2px solid var(--turq);outline-offset:2px}

/* ---------- the gathering pills: option B ----------
   One quiet line, dot separated, no boxes at all. Three separate bordered
   pills were taking three rows on a phone and competing with the paragraph
   above them. This is the shortest version, which matters on a page that
   already runs long, and it stops the strip asking for attention it does not
   need. */
.factPills{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  align-items:stretch!important;
  margin-top:14px!important;
}
.factPills .heropill{
  /* Grid places the card; flex centres its contents. align-items:stretch above
     makes all three the same height whatever the text does, so the row stays
     level even when one label wraps and another does not. */
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 6px!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  /* The site's standard cut corner, same geometry as .cut10. */
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))!important;
  font:650 9.8px/1.35 'Inter',sans-serif!important;
  color:var(--ink)!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
/* Option C: tinted fills instead of borders, one colour each. */
.factPills .heropill:nth-of-type(1){background:rgba(200,241,53,.1)!important}
.factPills .heropill:nth-of-type(2){background:rgba(43,217,198,.1)!important}
.factPills .heropill:nth-of-type(3){background:rgba(240,80,155,.1)!important}
/* No icons in this treatment. The label carries it. */
.factPills .heropill svg{display:none!important}
/* The separator dots from the previous attempt must not survive. */
.factPills .heropill:before,
.factPills .heropill:after{content:none!important}

@media(min-width:600px){
  .factPills{gap:8px!important}
  .factPills .heropill{padding:14px 10px!important;font-size:11.4px!important}
}
@media(min-width:900px){
  .factPills{gap:9px!important}
  .factPills .heropill{padding:15px 14px!important;font-size:12.2px!important}
}

/* ---------- Builder overflow on a phone ----------
   Reported: the Quiz Studio ran off the right edge on mobile. The title field,
   the "Set all to" select, the question cards and the save button were all
   clipped, and the toolbar landed on top of the heading.

   Cause, and it is a classic CSS grid trap rather than anything to do with the
   builder. `.bwrap` uses grid-template-columns:1fr, and 1fr means
   minmax(auto,1fr), whose lower bound is the content's MIN-CONTENT width. The
   rail contains .slides, a horizontal scroller of .slide items each carrying
   min-width:190px. Two of those plus the gap gives a min-content width near
   390px, so the grid column refused to shrink below that and pushed the whole
   column wider than the phone. Everything inside inherited the overflow.

   minmax(0,1fr) removes that lower bound, which is what 1fr should have been
   in the first place for any column holding a scroller. The rail and stage
   also get min-width:0, because a grid item's default min-width:auto
   reintroduces the same floor one level down. */
.bwrap{grid-template-columns:minmax(0,1fr)!important}
.bwrap>*{min-width:0}
/* The second column is a bare div, so .bwrap>* above already covers it.
   .brail is named only because it also carries overflow rules of its own. */
.brail{min-width:0}
/* The scroller is allowed to scroll, but it may not size its own parent. */
.brail .slides{min-width:0;max-width:100%}
@media(min-width:920px){
  .bwrap{grid-template-columns:272px minmax(0,1fr)!important}
}
/* Below the two-column breakpoint the question list is a vertical stack, not a
   sideways scroller, so nothing needs a 190px floor. */
@media(max-width:919px){
  .brail .slides{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
  .brail .slide{min-width:0}
}
@media(max-width:520px){
  .brail .slides{grid-template-columns:1fr}
}

/* The quiz title steps down as it gets longer, so the whole thing stays
   visible in a single-line field instead of scrolling out of sight. Paired
   with bTitleFit() in app.js and a maxlength of 60 on the field. */
.bTitleInline.bt-m{font-size:17px}
.bTitleInline.bt-s{font-size:15px}
.bTitleInline.bt-xs{font-size:13.5px;letter-spacing:-.02em}
@media(max-width:520px){
  .bTitleInline{font-size:18px}
  .bTitleInline.bt-m{font-size:15.5px}
  .bTitleInline.bt-s{font-size:14px}
  .bTitleInline.bt-xs{font-size:12.6px}
}

/* ---------- custom question count in the otiya AI sheet ---------- */
.aiOwnBox{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.aiOwnIn{width:88px!important;flex:none;height:36px;margin:0!important;padding:0 10px!important;
  border-radius:10px;border:1px solid var(--lime)!important;
  background:rgba(200,241,53,.08)!important;color:var(--lime)!important;
  font:800 15px 'Inter',sans-serif!important;text-align:center}
/* 16px on touch, because Safari zooms into anything smaller and never zooms
   back out. The same rule every other typing field follows. */
@media(hover:none){
  .aiOwnIn{font-size:16px!important}
}
.aiOwnIn:focus{border-color:var(--lime)!important;box-shadow:0 0 0 3px rgba(200,241,53,.12)!important}
.aiOwnUnit{font:700 11.6px 'Inter',sans-serif;color:var(--dim)}
.aiOwnNote{margin:-4px 0 12px 84px;font-size:10.8px;line-height:1.45;color:var(--mute)}
@media(max-width:520px){
  .aiOwnNote{margin-left:0}
}

/* ---------- the offer shown when otiya AI cannot write anything ----------
   Turquoise rather than lime, so it reads as an alternative route rather than
   a retry of the thing that just failed. Sits directly under the error, which
   is where the eye already is. */
.aiFallback{
  margin:10px 0 14px;padding:14px 15px;border-radius:13px;
  background:rgba(43,217,198,.07);border:1px solid rgba(43,217,198,.3);
}
.aiFallback b{display:block;font:800 13px 'Inter',sans-serif;color:var(--ink);margin-bottom:5px}
.aiFallback span{display:block;font-size:12.2px;line-height:1.6;color:var(--dim);margin-bottom:11px}
.aiFallbackBtns .btn{margin:0;width:100%;padding:11px 14px;font-size:12.8px}

/* The daily allowance, stated before anybody picks a number, and the note that
   explains a short answer afterwards. Both quiet: they are context, not the
   point of the sheet. */
.aiAllow{
  margin:-6px 0 12px 84px;
  font:600 10.8px 'Inter',sans-serif;line-height:1.45;color:var(--mute);
}
@media(max-width:520px){
  .aiAllow{margin-left:0}
}
/* A preset above what is left is shown, not hidden, so the limit is visible
   rather than mysterious. Disabled, so it cannot promise what it cannot give. */
.aiSeg button.out{opacity:.32;cursor:not-allowed}
.aiSeg button.out:hover{background:none;border-color:rgba(253,244,227,.14)}

.aiShort{
  margin:0 0 12px;padding:11px 13px;border-radius:11px;
  background:rgba(255,183,3,.09);border:1px solid rgba(255,183,3,.32);
  font:600 12px 'Inter',sans-serif;line-height:1.6;color:var(--ink);
}

/* ============================================================
   otiya AI page and home section. Added 4 September (r66).

   Every class here is prefixed `aiv` and every rule is appended to the end
   of the stylesheet, so nothing that already existed can be affected. The
   page it replaces used the `.legal` class, which is the terms-and-privacy
   treatment: correct prose, wrong page. This is the visual version.

   The centrepiece is a working demonstration rather than a picture of one.
   Clicking a subject chip swaps the questions below it, which is the product
   in one gesture and needs no account, no network call and no permission.
   ============================================================ */

.aivWrap{width:100%;margin-top:58px}

/* ---------- hero ---------- */

.aivHero{position:relative;overflow:hidden;padding:30px 22px 26px;
  border:1px solid rgba(200,241,53,.26);background:
    radial-gradient(120% 140% at 12% 0%,rgba(200,241,53,.16) 0%,rgba(200,241,53,0) 58%),
    radial-gradient(100% 120% at 100% 100%,rgba(43,217,198,.14) 0%,rgba(43,217,198,0) 60%),
    var(--panel)}
.aivHero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 80% 10%,rgba(200,241,53,.10),transparent 70%)}
.aivHero>*{position:relative;z-index:1}
.aivH1{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;
  font-size:clamp(26px,6.4vw,44px);line-height:1.04;letter-spacing:-.6px;
  margin:12px 0 0;color:var(--ink)}
.aivH1 b{color:var(--lime);font-weight:700}
.aivLede{margin:14px 0 0;max-width:52ch;color:var(--dim);font-size:15px;line-height:1.55}
.aivCta{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.aivCta .btn{width:auto}

/* ---------- the demo ---------- */

.aivDemo{margin-top:14px;padding:18px 16px 16px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),var(--panel)}
.aivDemoLbl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
.aivDemoLbl s{width:7px;height:7px;background:var(--lime);transform:rotate(45deg);
  text-decoration:none;flex:none}

/* the prompt bar */
.aivBar{display:flex;align-items:center;gap:10px;padding:12px 13px;
  border:1px solid rgba(200,241,53,.30);background:rgba(0,0,0,.26)}
.aivBarIco{flex:none;width:30px;height:30px;display:grid;place-items:center;
  background:var(--lime);color:var(--limeT)}
.aivBarTxt{flex:1;min-width:0;font-size:15px;color:var(--ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aivCaret{display:inline-block;width:2px;height:1.05em;background:var(--lime);
  vertical-align:-.18em;margin-left:2px;animation:aivBlink 1.05s step-end infinite}
@keyframes aivBlink{0%,100%{opacity:1}50%{opacity:0}}
.aivBarGo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;
  border:0;background:var(--lime);color:var(--limeT);font:inherit;font-size:13px;
  font-weight:800;cursor:default}

/* subject chips */
.aivChips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.aivChip{padding:9px 14px;border:1px solid rgba(255,255,255,.16);background:transparent;
  color:var(--dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .16s,color .16s,background .16s}
.aivChip:hover{border-color:var(--lime);color:var(--ink)}
.aivChip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);
  color:var(--limeT);font-weight:800}
.aivChipHint{font-size:12.5px;color:var(--dim);margin:9px 0 0}

/* generated question cards */
.aivQs{display:flex;flex-direction:column;gap:10px;margin-top:13px}
.aivQ{padding:14px 14px 12px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);animation:aivRise .38s cubic-bezier(.2,.7,.3,1) both}
.aivQ:nth-child(2){animation-delay:.09s}
.aivQ:nth-child(3){animation-delay:.18s}
@keyframes aivRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.aivQTop{display:flex;align-items:flex-start;gap:10px}
.aivQNo{flex:none;width:23px;height:23px;display:grid;place-items:center;
  background:rgba(200,241,53,.16);color:var(--lime);font-size:12px;font-weight:800}
.aivQTxt{flex:1;min-width:0;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink)}
.aivOpts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0 0}
.aivOpt{display:flex;align-items:center;gap:8px;padding:9px 10px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.02);
  font-size:13px;color:var(--dim);min-width:0}
.aivOptL{flex:none;width:19px;height:19px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:var(--dim);font-size:10.5px;font-weight:800}
.aivOptT{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aivOpt.aivRight{border-color:var(--lime);background:rgba(200,241,53,.13);color:var(--ink);
  font-weight:700}
.aivOpt.aivRight .aivOptL{background:var(--lime);color:var(--limeT)}
.aivQFoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.aivKeep,.aivDrop{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  font-size:12px;font-weight:700;border:1px solid}
.aivKeep{border-color:var(--lime);color:var(--lime);background:rgba(200,241,53,.10)}
.aivDrop{border-color:rgba(255,255,255,.16);color:var(--dim)}
.aivQNote{font-size:12px;color:var(--dim);margin-left:auto}

/* ---------- three routes ---------- */

.aivGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.aivCard{padding:18px 16px;border:1px solid rgba(255,255,255,.09);background:var(--panel)}
.aivCard h3{font-size:15.5px;font-weight:800;margin:12px 0 7px;color:var(--ink);
  letter-spacing:-.2px}
.aivCard p{font-size:13.5px;line-height:1.55;color:var(--dim);margin:0}
.aivIco{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12)}
.aivIco.i1{background:rgba(200,241,53,.14);color:var(--lime);border-color:rgba(200,241,53,.32)}
.aivIco.i2{background:rgba(43,217,198,.14);color:var(--turq);border-color:rgba(43,217,198,.32)}
.aivIco.i3{background:rgba(240,80,155,.14);color:var(--mag);border-color:rgba(240,80,155,.32)}

/* the PDF strip inside card 2 */
.aivFile{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 10px;
  border:1px dashed rgba(43,217,198,.40);background:rgba(43,217,198,.07)}
.aivFileN{font-size:12.5px;font-weight:700;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aivFileS{font-size:11.5px;color:var(--dim);margin-left:auto;flex:none}

/* ---------- the numbers ---------- */

.aivStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.aivStat{padding:16px 15px;border:1px solid rgba(255,255,255,.09);background:var(--panel)}
.aivStatN{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:26px;
  line-height:1;color:var(--lime);letter-spacing:-.5px}
.aivStatL{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.45}

/* ---------- closing note ---------- */

.aivNote{margin-top:14px;padding:16px 16px;border:1px solid rgba(255,197,61,.26);
  background:rgba(255,197,61,.07)}
.aivNote b{color:var(--sun)}
.aivNote p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--dim)}

/* ---------- the link into the page ---------- */

/* r67. The standalone home section this once styled is gone: the "Play on
   your own" section already led with otiya AI and had its own demo, so the
   new section was the same argument twice. What survives is the link, which
   now sits in that existing card. */
.aivLink{display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-size:13px;font-weight:700;color:var(--lime);text-decoration:none;
  border-bottom:1px solid rgba(200,241,53,.34);padding-bottom:2px;
  align-self:center;margin-top:6px}
.aivLink:hover{border-bottom-color:var(--lime)}
/* The link is an inline-flex row, so its 7px gap fell between every run of
   text as well as before the arrow, and the wordmark sat in the middle of the
   sentence with a hole either side of it. The gap now belongs to the arrow
   alone, and the wordmark takes the link's own weight instead of Comfortaa's
   lighter 700, which was making it look like a different link. */
.aivLink{display:inline;align-self:auto;white-space:nowrap}
/* Every icon on the site is built by _sv(), which bakes
   style="flex-shrink:0;display:block" into the svg itself. That is right
   inside the flex rows it was written for and wrong inside an inline link: a
   block box there drops the arrow onto its own line whatever white-space says,
   which is what was happening here. An inline style only loses to !important,
   and _sv is used by the live game screens so it is not being changed for this.
   Scoped to this one link. */
.aivLink svg{display:inline-block!important;vertical-align:-2px;margin-left:6px}
.aivLink .bd{font-weight:800;font-size:1em}

/* "More about otiya" reads as a sentence, not a logo, so the wordmark's
   orange "ya" fights the link. brandify wraps every "otiya" in the page
   automatically and this one instance opts out of the colour. The base rule
   carries !important, so this has to as well, and it wins on specificity. */
.whyMore .bd i{color:var(--ink)!important}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .aivGrid,.aivStats{grid-template-columns:1fr}
  .aivHero{padding:24px 17px 22px}
}
@media (max-width:560px){
  .aivOpts{grid-template-columns:1fr}
  .aivBarGo span{display:none}
  .aivBarGo{padding:8px 10px}
  .aivDemo{padding:15px 12px 13px}
  .aivQNote{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .aivQ{animation:none}
  .aivCaret{animation:none}
}

/* hero, two columns on desktop. The tag cloud is the argument that "anything
   you can name" is literal, so it carries real subjects rather than shapes.
   aria-hidden: card 1 already lists examples in prose, and a screen reader
   does not need them twice. */
.aivHero{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.aivHeroTxt{min-width:0}
.aivHeroArt{display:none}
@media (min-width:860px){
  .aivHero{grid-template-columns:1.08fr .92fr;gap:26px}
  .aivHeroArt{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
    align-content:center}
  .aivTag{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
    border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);
    font-size:12.5px;font-weight:600;color:var(--dim);white-space:nowrap;
    animation:aivFloat 7s ease-in-out infinite}
  .aivTag svg{color:var(--lime);opacity:.9;flex:none}
  .aivTag:nth-child(2){border-color:rgba(200,241,53,.30);color:var(--ink);
    background:rgba(200,241,53,.08);animation-delay:-1.2s}
  .aivTag:nth-child(3){animation-delay:-2.4s}
  .aivTag:nth-child(4){border-color:rgba(43,217,198,.28);color:var(--ink);
    background:rgba(43,217,198,.07);animation-delay:-3.6s}
  .aivTag:nth-child(5){animation-delay:-4.8s}
  .aivTag:nth-child(6){animation-delay:-6s}
}
@keyframes aivFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){ .aivTag{animation:none} }

/* ============================================================
   The sponsor line, r71.

   Quiet on purpose. A partner's name in the lobby and on the podium is worth
   real money to Otiya and worth nothing to the room, so it reads as a credit
   rather than an advert. It never appears at all unless a quiz has one.
   ============================================================ */

.spLine{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
  padding:6px 11px;border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.22);
  max-width:100%;min-width:0}
.spCentre{margin-left:auto;margin-right:auto}
.spKind{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.spName{min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the builder field */
.bSponsorRow{margin-top:9px;display:flex;flex-direction:column;gap:8px;
  align-items:flex-start;max-width:520px}
.bSponsorInput{width:100%;padding:9px 11px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:var(--ink);font:inherit;font-size:13px;font-weight:600}
.bSponsorInput::placeholder{color:var(--dim);font-weight:500}
.bSponsorInput:focus{outline:none;border-color:var(--turq)}
.bSponsorKind{display:flex;gap:0;flex-wrap:wrap}
.bSponsorKind button{padding:7px 12px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:var(--dim);font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;min-height:34px}
.bSponsorKind button+button{border-left:0}
.bSponsorKind button.on{background:var(--turq);border-color:var(--turq);color:var(--turqT)}
.bSponsorNote{font-size:11.5px;line-height:1.5;color:var(--dim);margin:0}
.bSponsorNote b{color:var(--ink)}

@media (max-width:560px){
  .bSponsorRow{max-width:100%}
  .bSponsorKind{width:100%}
  .bSponsorKind button{flex:1;text-align:center}
  .spLine{width:100%;justify-content:center}
}

/* ============================================================
   The community pages and the two new home sections, r71.

   Every class is prefixed cm, uc, big, pf or pkEx and every rule is appended,
   so nothing that already existed can move. Mobile first: the grids are one
   column until there is room for more, because most people arrive on a phone.
   ============================================================ */

.cmWrap{width:100%;margin-top:58px}

/* ---------- page hero ---------- */
.cmHero{position:relative;overflow:hidden;padding:30px 22px 26px;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(120% 150% at 10% 0%,var(--cmT,rgba(255,255,255,.07)) 0%,transparent 58%),var(--panel)}
.cmH1{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;
  font-size:clamp(25px,6vw,40px);line-height:1.06;letter-spacing:-.6px;
  margin:12px 0 0;color:var(--ink)}
.cmH1 b{color:var(--cm,#C8F135);font-weight:700}
.cmLede{margin:14px 0 0;max-width:60ch;color:var(--dim);font-size:15px;line-height:1.6}
.cmSmall{font-size:13.5px;margin-top:8px}
.cmCta{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
/* min-height rather than padding: the shared .btn shrinks below 36px on a
   320px screen, and 44px is the smallest a thumb hits reliably. Scoped here so
   no existing button anywhere else moves. */
.cmCta .btn{width:auto;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center}

.cmH2{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.3px;margin:26px 0 4px;color:var(--ink)}
.cmSub{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0 0 12px;max-width:70ch}
.cmSub b{color:var(--ink)}

/* ---------- coming soon ---------- */
.soonTag{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:3px 8px;background:rgba(255,197,61,.14);border:1px solid rgba(255,197,61,.34);
  color:var(--sun);font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.soonTag svg{flex:none}

/* ---------- audience and partner cards ---------- */
.ucGrid,.bigGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.ucGridFull{margin-top:14px}
.ucCard,.bigCard{background:rgba(255,255,255,.03);border:1px solid var(--ucB,rgba(255,255,255,.11));
  overflow:hidden;display:block;text-decoration:none;color:inherit;min-width:0}
.bigCard{transition:border-color .16s,transform .16s}
.bigCard:hover{border-color:var(--uc,#C8F135);transform:translateY(-2px)}
.ucArt{display:block;width:100%;background:rgba(0,0,0,.22);line-height:0}
.cilArt{display:block;width:100%;height:auto}
.ucTxt{padding:15px 16px 17px}
.ucWho{display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:9.6px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--uc,#C8F135);margin-bottom:8px}
.ucH{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:15px;
  line-height:1.34;margin:0 0 7px;color:var(--ink);letter-spacing:-.2px}
.ucP{font-size:13.2px;line-height:1.62;color:var(--dim);margin:0}
.bigGo{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12.6px;font-weight:800;color:var(--uc,#C8F135);
  border-bottom:1px solid var(--ucL,rgba(253,244,227,.4));padding-bottom:2px}

.ucMore{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:26px 18px;text-align:center;text-decoration:none;
  background:rgba(43,217,198,.06);border:1px solid rgba(43,217,198,.28);
  transition:border-color .16s}
.ucMore:hover{border-color:var(--turq)}
.ucMore span{font-size:13px;font-weight:700;color:var(--dim)}
.ucMore b{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:800;color:var(--turq)}

/* ---------- steps and notes ---------- */
.cmTwo,.cmThree,.cmTrio{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
/* Three offers, and the third is the one that needs nobody. Two abreast at
   tablet width because three would squeeze the lists into columns too narrow
   to read, and all three only once there is genuinely room. */
.pnNow{display:inline-flex;align-items:center;gap:7px;margin-top:16px;min-height:44px;
  font:800 13.4px 'Inter',sans-serif;color:var(--limeT);background:var(--lime);
  padding:11px 16px;text-decoration:none}
.pnNow svg{flex:none}
.cmStep{position:relative;padding:18px 17px;background:var(--panel);
  border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--cm,#C8F135)}
.cmStep h3{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:15px;
  margin:0 0 7px;color:var(--ink);letter-spacing:-.2px}
.cmStep p{font-size:13.3px;line-height:1.62;color:var(--dim);margin:0}
.cmStepN{display:inline-grid;place-items:center;width:26px;height:26px;margin-bottom:10px;
  background:var(--cm,#C8F135);color:var(--bg);font-size:13px;font-weight:800}
.cmStepArt{margin:-4px -3px 12px;background:rgba(0,0,0,.22);line-height:0}

.cmNote{margin-top:16px;padding:16px;border:1px solid rgba(255,197,61,.26);
  background:rgba(255,197,61,.07)}
.cmNote b{display:inline-flex;align-items:center;gap:7px;color:var(--sun);
  font-size:14px;font-weight:800}
.cmNote p{margin:7px 0 0;font-size:13.3px;line-height:1.62;color:var(--dim)}

.cmWarn{margin-top:16px;padding:16px;border:1px solid rgba(240,80,155,.3);
  background:rgba(240,80,155,.07)}
.cmWarn b{color:var(--mag);font-size:14px;font-weight:800}
.cmWarn p{margin:7px 0 0;font-size:13.3px;line-height:1.62;color:var(--dim)}

/* ---------- example pack card ---------- */
.pkEx{background:var(--panel);border:1px solid rgba(255,255,255,.12);overflow:hidden;min-width:0}
.pkExTop{padding:14px 15px 13px}
.pkExTag{display:inline-block;margin-bottom:9px;padding:4px 9px;
  background:var(--pkT,rgba(253,244,227,.14));color:var(--pk,#C8F135);
  font-size:8.6px;font-weight:800;letter-spacing:.07em}
.pkExT{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:14px;
  line-height:1.32;color:var(--ink);margin-bottom:6px}
.pkExM{font-size:11.4px;color:var(--dim)}
.pkExBy{display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2)}
.pkExLg{flex:none;width:28px;height:28px;display:grid;place-items:center;
  background:var(--pkT,rgba(253,244,227,.16));color:var(--pk,#C8F135);
  font-size:10px;font-weight:800}
.pkExNm{min-width:0;font-size:11.4px;line-height:1.4}
.pkExNm i{display:block;font-style:normal;color:var(--dim);font-size:9.4px;
  letter-spacing:.06em;text-transform:uppercase}
.pkExNm b{display:block;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================================
   Picking questions, in the idea bank and when adding from a template.

   Both used to be all or nothing: an Add button per row and an "Add all", or a
   template that dropped thirteen questions in at once. One interaction for both
   now, so learning it once is enough: tap a row to tick it, use a quick count
   if you just want five, then one button that says exactly how many are going
   in. A row already in the quiz is shown and disabled rather than hidden, so
   the list does not shuffle under your finger as you add.
   ========================================================================== */
.pickBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 11px}
.pickCount{font:800 11.4px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);flex:1;min-width:120px}
.pickQuick{display:flex;gap:7px;flex-wrap:wrap}
.pickQuick .quiet{padding:7px 11px;font-size:11.8px;min-height:36px}
.pickRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(0,0,0,.2);border:1.5px solid transparent;border-radius:11px;
  padding:11px 13px;margin-bottom:8px;color:var(--ink);font:inherit;min-height:48px}
.pickRow:hover{background:rgba(0,0,0,.3)}
.pickRow.on{border-color:var(--turq);background:rgba(43,217,198,.09)}
.pickRow.was{opacity:.55;cursor:default}
.pickRow:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.pickBox{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  border:1.5px solid rgba(253,244,227,.28);color:var(--turqT)}
.pickRow.on .pickBox{background:var(--turq);border-color:var(--turq)}
.pickRow.was .pickBox{background:rgba(253,244,227,.25);border-color:transparent;color:#1B1033}
.pickTxt{flex:1;min-width:0;font-size:12.8px;font-weight:500;line-height:1.5}
.pickKind,.pickWas{flex:none;font:700 10px 'Inter',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim)}
.pickAdd{margin-top:6px}
.pickAdd:disabled{opacity:.45;cursor:not-allowed}

/* ---------- the interest form ---------- */
.pfBox{margin-top:20px;padding:20px 18px;background:var(--panel);
  border:1px solid rgba(255,255,255,.12)}
.pfH{font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:17px;
  margin:0 0 6px;color:var(--ink);letter-spacing:-.3px}
.pfNote{font-size:13.2px;line-height:1.6;color:var(--dim);margin:0 0 14px;max-width:62ch}
.pfGrid{display:grid;grid-template-columns:1fr;gap:11px}
.pfField{display:flex;flex-direction:column;gap:6px;min-width:0}
.pfField span{font-size:11.4px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}
.pfField input,.pfField textarea,.pfField select{width:100%;padding:11px 12px;
  border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.24);
  color:var(--ink);font:inherit;font-size:14px;font-weight:600;min-height:44px}
/* The country picker is the site's own branded select, which replaces the native
   one with a taller trigger of its own and a margin meant for the signup form.
   Beside a 44px email field that left the row 10px deep in nothing and the two
   controls ending 5px apart, so both are brought back to the height of every
   other field on this form. The rule above still styles the native select
   underneath, which is what a visitor sees for the moment before the branded one
   takes over. */
.pfField .otSelect{margin-bottom:0}
.pfField .otSelectTrigger{min-height:44px;padding:11px 40px 11px 12px;font-size:14px}
.pfField select option{background:#1B0F24;color:var(--ink)}
.pfField textarea{resize:vertical;line-height:1.55;min-height:96px}
.pfField input:focus,.pfField textarea:focus,.pfField select:focus{outline:none;border-color:var(--lime)}
.pfErr{margin:12px 0 0;padding:10px 12px;border:1px solid rgba(240,80,155,.4);
  background:rgba(240,80,155,.1);color:var(--ink);font-size:13px;line-height:1.5}
.pfSend{width:auto;margin-top:14px}
.pfSmall{margin:11px 0 0;font-size:11.8px;line-height:1.55;color:var(--dim)}
.pfDone{border-color:rgba(200,241,53,.34);background:
  linear-gradient(180deg,rgba(200,241,53,.08),rgba(255,255,255,0)),var(--panel)}
.pfTick{display:grid;place-items:center;width:40px;height:40px;margin-bottom:12px;
  background:var(--lime);color:var(--limeT)}

/* ---------- responsive ---------- */
@media (min-width:700px){
  .cmTwo{grid-template-columns:1fr 1fr}
  .cmTrio{grid-template-columns:1fr 1fr}
  .pfGrid{grid-template-columns:1fr 1fr}
  .pfWide{grid-column:1 / -1}
}
@media (min-width:860px){
  .ucGrid,.bigGrid,.cmThree{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:859px){
  /* Two up on a large phone and small tablet, one up below that, so an
     illustration never shrinks to the point of being a smudge. */
  .ucGrid,.bigGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .ucGrid,.bigGrid,.cmThree,.cmTwo,.cmTrio{grid-template-columns:1fr}
  .cmHero{padding:24px 16px 22px}
  .cmWrap .ucTxt{padding:14px 14px 16px}
}

/* The AI section lost its templates column in r71: templates already have a
   section of their own further down the page, and two doors to the same room
   one above the other is what made the page long rather than useful. One
   column, at every width, overriding the two breakpoint rules above. */
.soloOne{grid-template-columns:1fr!important}
.soloOne .soloHero{max-width:760px;margin-left:auto;margin-right:auto;width:100%}

/* The partnership row on the pricing page, r71. Same shape as the one-off
   event row directly above it, in tangerine rather than lime so it reads as a
   different kind of offer rather than another plan. */
.prxPartner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:560px;margin:14px auto 0;padding:18px 20px;border-radius:18px;
  background:rgba(255,122,41,.08);border:1px solid rgba(255,122,41,.32);text-align:left}
.prxPartner>div{flex:1;min-width:0}
.prxPartner span{display:flex;align-items:center;gap:6px;font:800 9.4px 'Inter',sans-serif;
  letter-spacing:1.6px;color:var(--tang);margin-bottom:5px}
.prxPartner b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:15px;
  font-weight:800;margin-bottom:5px;letter-spacing:-.02em}
.prxPartner small{display:block;font-size:12.2px;color:var(--dim);line-height:1.6}
.prxPartner button{flex:none;height:44px;padding:0 18px;border-radius:12px;
  background:var(--tang);border:1.5px solid var(--tang);color:var(--tangT);
  font:800 12.6px 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
.prxPartner button:hover{filter:brightness(1.06)}
@media (max-width:560px){
  .prxPartner{margin-left:14px;margin-right:14px}
  .prxPartner button{width:100%}
}

/* The way back to a sent form. Quiet, because most people send one enquiry and
   the thank you is the point of the screen. */
.pfAgain{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:9px 14px;min-height:40px;background:transparent;
  border:1px solid rgba(200,241,53,.34);color:var(--lime);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pfAgain:hover{border-color:var(--lime)}

/* The picture in Why otiya exists, r72.

   The three commitment cards beside it are desktop only by design, which left
   this section as a wall of text on a phone. This sits in the copy column so
   it shows at every width, and it is capped so it does not dominate the
   desktop layout where the cards are already carrying the right-hand side. */
.whyArt{margin:14px 0 16px;max-width:420px;line-height:0}
.whyArt svg{display:block;width:100%;height:auto;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.09)}
@media(min-width:860px){ .whyArt{max-width:360px} }

/* The copy column is now taller than the three commitment cards beside it, so
   the cards hung at the top with a hole under them. Centring them against the
   copy costs nothing and the section reads as one block again. Desktop only,
   because below 860px the cards are hidden and there is no second column. */
@media(min-width:860px){ .whySplit{align-items:center} }

/* ============================================================
   r74. Seven corrections, all appended so nothing above moves.
   ============================================================ */

/* ---------- 1. Hover must not underline text inside a card ----------

   The community cards are anchors, so the site's own a:hover underline was
   drawing a line under the heading and the whole paragraph. A card is a
   surface you press, not a phrase in a sentence, so nothing inside it should
   ever look like link text. The border already says it is pressable. */
.bigCard,.bigCard *,.ucMore,.ucMore *,.ucCard,.ucCard *,.pkEx,.pkEx *{text-decoration:none!important}
.bigCard:hover,.bigCard:hover *,.ucMore:hover,.ucMore:hover *{text-decoration:none!important}
.bigCard:hover{transform:none}
.bigCard:hover .bigGo{border-bottom-color:var(--uc,#C8F135)}

/* ---------- 2. Card labels, and section titles, carrying more weight ----------

   TEACHERS, FAMILIES, EVENT HOSTS and the rest were 9.6px at .11em, which is
   the size of a footnote. They are the first thing the eye should land on in
   a card, so they are now 11px and heavier, with the tracking eased off so
   the extra size does not turn into extra width. */
.ucWho{font-size:11px;font-weight:800;letter-spacing:.085em;margin-bottom:9px}
.ucH{font-size:16.5px;line-height:1.3;margin-bottom:8px}
.ucP{font-size:13.4px}
.cmStep h3{font-size:16.5px}
.pkExT{font-size:15px}
.pfH{font-size:18px}

/* The section headings themselves. Same reasoning: these were readable rather
   than prominent, and on a phone a heading that does not announce itself just
   reads as another paragraph. */
.sec .sechead h2,.soloH,.cmH2{font-weight:800;letter-spacing:-.4px}
.cmH2{font-size:21px}
.sec .sechead .eyebrow,.soloEy{font-size:11px;font-weight:800;letter-spacing:.085em}

/* ---------- 3. Smaller illustrations in How people use Otiya ----------
   They were the loudest thing in the card and the label under them the
   quietest, which is the wrong way round. Insetting the drawing shrinks it
   without changing the card or the aspect ratio of the art. */
.ucGrid .ucArt,.bigGrid .ucArt{padding:12px 30px 2px}
@media(max-width:600px){ .ucGrid .ucArt,.bigGrid .ucArt{padding:10px 44px 2px} }

/* ---------- 4. The ya takes the colour of the section it sits in ----------

   The wordmark's orange is right on its own, and wrong inside a lime card or
   a turquoise hero, where it is the only thing on screen in a colour that
   belongs to nothing. Inside a section that has declared an accent, the ya
   takes that accent. Everywhere else it stays orange.

   The "More about otiya" link keeps its white ya, set earlier and more
   specific than these, so it still wins. */
.ucCard .bd i,.bigCard .bd i{color:var(--uc,#FF7A29)!important}
.cmHero .bd i,.cmStep .bd i,.pkEx .bd i{color:var(--cm,var(--uc,#FF7A29))!important}
.soloSec .bd i{color:var(--lime)!important}
.whySec .bd i,.whyBody .bd i{color:var(--mag)!important}
.whyMore .bd i{color:var(--ink)!important}

/* ---------- 5. The otiya AI section: copy left, card right ----------

   It was one centred column, which left the demo panel floating in the middle
   of a wide section with nothing beside it. The copy now fills the left and
   the card sits to the right, which is the same shape as every other split
   section on the page. */
.soloSplit{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.soloCopy{min-width:0}
.soloSplit .soloTwo{margin-top:0}
@media(min-width:900px){
  .soloSplit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px}
  .soloSplit .soloCopy{padding-right:6px}
  .soloSplit .soloOne .soloHero{max-width:100%;margin:0}
}
.soloCopy .aivLink{margin-top:14px}

/* ---------- 6. Why otiya exists: three zones, not two columns ----------

   Copy and picture side by side, commitments in a row underneath. The old
   version ran the copy down one long column with the three cards floating
   beside it, so one side always ended a long way before the other. */
.whyTop{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.whyTop .whySec{max-width:100%}
.whyTop .whyArt{margin:0;max-width:460px;justify-self:center;width:100%}
/* The art sat in a 900px wide column with nothing capping it, so a 300x150
   drawing was blown up to the width of half the page and the panel around it
   became a bare letterbox. Capped and centred, it reads as a picture again. */
.whyTop .whyArt svg{padding:10px 14px;border-color:rgba(240,80,155,.22);
  background:rgba(240,80,155,.05)}
.whyBody{display:grid!important;grid-template-columns:1fr;gap:10px;margin-top:18px}
.whyPromise{padding:15px 16px;background:rgba(0,0,0,.2);
  border:1px solid rgba(240,80,155,.22)}
.whyPT{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:6px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.whyAges{display:inline-flex;gap:5px}
.whyAges i{display:grid;place-items:center;width:20px;height:20px;font-style:normal;
  font-size:10.5px;font-weight:800;background:rgba(240,80,155,.18);color:var(--mag)}
/* The card body only ever had a size inside the 860px query, because these
   cards used to be hidden below that width. Shown on a phone now, it was
   inheriting the body size and coming out larger than the paragraph above it. */
.whyPD{font-size:12.8px;line-height:1.65;color:var(--dim)}

/* ---------- r75 ---------- */

/* The footer had six columns in a four column grid, so Company fell to the
   second row next to Connect and looked like an afterthought. Five link
   columns across the top on desktop, with Connect on its own row underneath.
   The phone layout is a separate two column rule further down and is left
   alone. */
@media(min-width:861px){
  .of3Grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 24px}
  .of3Connect{grid-column:1 / -1;margin-top:6px}
}

/* The wordmark inside a big Unbounded heading was Comfortaa at 700 and 1.06em,
   which next to an 800 weight display face read as a different sentence
   dropped into the middle of this one. Same family, matched weight, and a
   fraction smaller so the two line up on the cap height. */
.soloH .bd,.sechead h2 .bd,.cmH2 .bd{font-weight:800;font-size:.96em}
@media(min-width:860px){
  .whyTop{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px}
  .whyBody{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
}

/* The ya taking a section's accent has one failure mode, and it is not subtle:
   an element whose BACKGROUND is that same accent renders the ya invisible.
   The Ask otiya AI button in this section is lime on lime, so it read as
   "Ask oti AI". Anything sitting on a filled accent takes the dark ink that
   goes with it. */
.soloSec .soloBtn.go .bd i,
.soloSec .btn.b-lime .bd i,
.bigCard .btn.b-lime .bd i,
.cmWrap .btn.b-lime .bd i{color:var(--limeT)!important}
.cmWrap .btn.b-turq .bd i{color:var(--turqT)!important}
.cmWrap .btn.b-tang .bd i{color:var(--tangT)!important}

/* ================= r82: the two partner pages =================

   Reported 5 September: the pages read flat, the text did not pop off the
   background, and the three example packs looked identical to each other
   even though each already carried its own colour. Both are the same
   underlying fault. The accent only ever touched a small chip, so every
   surface on the page was the same dark panel and nothing stood out.

   The fix is not more colour everywhere. It is a lighter, cleaner surface
   for the blocks that carry the offer, so those read first, with the
   supporting blocks left dark. Contrast between cards, not inside them. */

/* ---------- the offer block ----------

   This is the card that says what a partner actually gets, so it is the one
   that has to be legible from across the room. A pale wash rather than the
   dark panel, its accent as a thick left edge, and real air inside. */
.pnOffer{
  position:relative;
  padding:22px 20px 20px 24px;
  background:
    linear-gradient(180deg, var(--cmT, rgba(253,244,227,.10)) 0%, rgba(253,244,227,.045) 42%, rgba(253,244,227,.03) 100%),
    rgba(253,244,227,.035);
  border:1px solid rgba(253,244,227,.16);
  border-left:5px solid var(--cm, #C8F135);
  min-width:0;
}
.pnBadge{
  display:inline-block;margin-bottom:12px;padding:5px 11px;
  background:var(--cm,#C8F135);color:#1D0E27;
  font:800 10px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;
}
.pnH{
  font-family:'Comfortaa','Inter',sans-serif;font-weight:700;
  font-size:19.5px;line-height:1.24;letter-spacing:-.3px;
  color:var(--ink);margin:0 0 9px;
}
.pnP{font-size:13.6px;line-height:1.62;color:var(--ink);opacity:.86;margin:0 0 14px}

/* A list, because "what you get" is a list and prose hides it. The marker is
   drawn rather than a bullet so it can take the block's accent. */
.pnList{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pnList li{
  position:relative;padding-left:20px;
  font-size:13px;line-height:1.55;color:var(--ink);opacity:.82;
}
.pnList li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  background:var(--cm,#C8F135);transform:rotate(45deg);
}
.pnList b{opacity:1;font-weight:800}
.pnBrand{white-space:nowrap;font-weight:800}

/* ---------- the free / talk-to-us strip ---------- */
.pnFree{
  margin-top:20px;display:grid;grid-template-columns:1fr;gap:16px;
  padding:20px;
  background:linear-gradient(135deg, rgba(200,241,53,.13), rgba(43,217,198,.09));
  border:1px solid rgba(200,241,53,.3);
}
.pnFreeB{
  background:linear-gradient(135deg, rgba(255,122,41,.13), rgba(167,139,250,.10));
  border-color:rgba(255,122,41,.3);
}
.pnFreeH{
  display:flex;align-items:center;gap:8px;
  font-family:'Comfortaa','Inter',sans-serif;font-weight:700;font-size:18px;
  color:var(--ink);margin-bottom:6px;
}
.pnFreeH svg{flex:none}
.pnFree p{font-size:13.2px;line-height:1.6;color:var(--ink);opacity:.85;margin:0}
.pnFreeSide{padding-top:14px;border-top:1px solid rgba(253,244,227,.14)}
.pnFreeSide b{display:block;font-size:13.4px;font-weight:800;margin-bottom:5px;color:var(--ink)}
@media(min-width:760px){
  .pnFree{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px}
  .pnFreeSide{padding-top:0;padding-left:24px;border-top:0;border-left:1px solid rgba(253,244,227,.14)}
}

/* ---------- the example packs, told apart ----------

   Each already carried a colour and only a 9px chip used it, so three cards
   side by side were indistinguishable. The colour now reaches the card: a
   tinted head, a coloured top edge and a matching border. */
.pkEx{
  background:var(--panel);
  border:1px solid var(--pkT, rgba(255,255,255,.12));
  border-top:3px solid var(--pk, #C8F135);
}
.pkExTop{
  background:linear-gradient(180deg, var(--pkT, rgba(253,244,227,.10)), rgba(0,0,0,0));
}
.pkExTag{font-size:9.4px;letter-spacing:.08em}
.pkExT{font-size:15px;line-height:1.3}

/* The colour is set on the tag and the logo, so it is lifted to the card. */
.cmThree > .pkEx{ --pkEdge: var(--pk); }

/* ---------- the issues picker ---------- */
.pfChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pfChip{
  appearance:none;cursor:pointer;
  padding:9px 13px;min-height:40px;
  background:rgba(253,244,227,.05);
  border:1px solid rgba(253,244,227,.2);
  color:var(--ink);opacity:.8;
  font:700 12.4px 'Inter',sans-serif;
  transition:background .14s,border-color .14s,opacity .14s;
}
.pfChip:hover{opacity:1;border-color:rgba(253,244,227,.4)}
.pfChip.on{
  background:var(--lime);border-color:var(--lime);
  color:var(--limeT);opacity:1;
}

/* r83. The wrapper brandify() puts around a brandified label. Transparent in
   normal flow; inside a flex container it makes the whole label one item so the
   container's gap cannot open up in the middle of a phrase. min-width:0 so a
   long label can still wrap rather than forcing its button wider. */
.bdL{display:inline;min-width:0}

/* ============================================================================
   The four-step summary on the home page, under the Gathering band.
   Same four steps as /how-it-works, so clicking through continues the story
   rather than starting a different one.
   ========================================================================== */
/* In a card, not loose on the page.

   Reported: sitting directly on the chevron pattern, the four steps read as
   clutter rather than a block. The card is the same treatment the otiya AI
   section above already uses, so the page gains no new visual language: a
   two-stop panel, the brand's cut corner, and a 3px accent on the top edge.
   Violet, because the section below it is turquoise and the one above has no
   accent of its own. */
.hstepSec{position:relative;overflow:hidden;width:100%;margin-top:40px;
  padding:24px 22px 22px;box-sizing:border-box;
  background:linear-gradient(150deg,#2A1636,#1E0F2A 62%);
  border:1px solid rgba(253,244,227,.09);
  box-shadow:inset 0 3px 0 var(--vio);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
/* One quiet wash from the top right, so the panel has depth rather than being
   a flat field of purple. */
.hstepSec:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 80% at 100% 0%,rgba(167,139,250,.11),transparent 60%)}
.hstepSec>*{position:relative}
.hstepHead{margin-bottom:16px}
.hstepH{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.024em;
  font-size:clamp(19px,2.6vw,26px);line-height:1.15;margin:0}
.hstepP{color:var(--dim);font-size:13.6px;font-weight:600;line-height:1.55;
  margin:7px 0 0;max-width:60ch}
.hstepRow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:12px}
/* The number spans both rows on a wide card, so the title sits beside it and
   the description tucks under the title. */
.hstep{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n t" "n d";
  column-gap:12px;row-gap:5px;align-content:start;min-width:0;
  background:rgba(0,0,0,.24);border:1px solid rgba(253,244,227,.09);
  border-left:3px solid var(--hs);padding:15px 16px}
.hstepN{grid-area:n;align-self:start;width:34px;height:34px;display:grid;place-items:center;
  font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:15px;line-height:1;
  background:var(--hs);color:var(--hsT);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.hstepT{grid-area:t;align-self:center;min-width:0;font-size:14px;font-weight:800;line-height:1.3}
.hstepD{grid-area:d;min-width:0;font-size:12.4px;color:#D3C4E0;font-weight:500;line-height:1.55}
.hstepMore{display:inline-flex;align-items:center;gap:8px;margin-top:15px;
  font-size:13px;font-weight:700;color:var(--turq);text-decoration:none;
  border-bottom:1px solid rgba(43,217,198,.35);padding-bottom:3px}
.hstepMore:hover{color:var(--lime);border-bottom-color:rgba(200,241,53,.5)}
.hstepMore:focus-visible{outline:2px solid var(--turq);outline-offset:4px}

/* Two by two rather than four narrow columns. Four is symmetric either way, so
   unlike a three-step row there is no orphan to avoid. */
@media(max-width:1000px){
  .hstepRow{grid-template-columns:repeat(2,1fr)}
}
/* One column, and the description drops below the number and title to take the
   whole width. A left gutter on a phone leaves the text about 40% narrower for
   no reason, which is what made the first version read badly. */
@media(max-width:700px){
  .hstepRow{grid-template-columns:1fr;gap:10px}
  .hstep{grid-template-areas:"n t" "d d";column-gap:11px;row-gap:8px}
  .hstepN{align-self:center}
}
@media(max-width:560px){
  .hstepSec{margin-top:30px;padding:20px 16px 18px}
  .hstepHead{margin-bottom:13px}
  .hstepP{font-size:13px}
  .hstep{padding:13px 14px}
  .hstepN{width:30px;height:30px;font-size:13.5px}
  .hstepT{font-size:13.6px}
  .hstepMore{font-size:12.4px;margin-top:13px}
}

/* ============================================================================
   /how-it-works, rebuilt September 2026, reduced to four acts.

   Every class here is prefixed hw. That is not decoration: the podium this page
   shows reuses the GAME'S OWN classes (.stage, .tier, .block, .dShell, .pnum,
   .podCrown) so the page shows the real thing rather than a drawing of it, and
   a generic name like .card or .stage in this block would have reached into the
   live game. Only .hwPod is added on top, and all it does is scale.
   ========================================================================== */

.hwPage{width:100%;max-width:1180px;margin:0 auto;text-align:left}

/* the wordmark, same proportions as the rest of the site */
.olwm{font-family:'Comfortaa','Trebuchet MS','Inter',sans-serif;font-weight:700;
  letter-spacing:-.0286em;font-size:30px;line-height:1;
  display:inline-flex;align-items:baseline;justify-content:center}
.olwm .oti{color:var(--ink)} .olwm .ya{color:var(--tang)}
.olwm .gem{width:.2em;height:.2em;background:var(--lime);transform:rotate(45deg);
  margin-left:.14em;align-self:center}

/* ---- hero ---- */
.hwHero{text-align:center;padding:10px 0 4px}
.hwMark{margin-bottom:26px}
.hwEye{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--turq);margin-bottom:14px}
.hwEye s{width:22px;height:2px;display:block;background:var(--turq);text-decoration:none}
.hwBig{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.03em;
  line-height:1.06;font-size:clamp(29px,5.1vw,58px);max-width:17ch;margin:0 auto}
.hwBig b{color:var(--turq);font-weight:800}
.hwLede{color:#E2D7EA;font-size:clamp(14.4px,1.6vw,17.5px);line-height:1.62;max-width:56ch;
  margin:20px auto 0;font-weight:500}
.hwPills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hwPills span{font-size:11.8px;font-weight:700;background:var(--panel);
  border:1.5px solid var(--panel2);padding:8px 13px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.hwPills b{color:var(--lime)}

/* Who needs what. The old hero said "any phone with a browser", which is both
   wrong and an undersell, and the rest of the page then showed a laptop. The
   two roles are different pieces of hardware and this states both. */
.hwKit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px auto 0;
  max-width:820px;text-align:left}
.hwKitRow{background:var(--panel);border:1.5px solid var(--panel2);
  border-left:3px solid var(--kc);padding:14px 16px}
.hwKitRow b{display:block;font-family:'Unbounded','Inter',sans-serif;font-size:12.8px;
  font-weight:700;letter-spacing:-.01em;color:var(--kc);margin-bottom:6px}
.hwKitRow span{display:block;font-size:12.8px;color:#DCCFE6;font-weight:500;line-height:1.55}

/* Four steps at a glance, so the shape of the page is visible before the first
   step is read. */
.hwSteps{display:flex;gap:8px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.hwSteps a{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;
  background:var(--panel);border:1.5px solid var(--panel2);border-left:3px solid var(--sc);
  padding:9px 13px 9px 11px;font-size:12.4px;font-weight:700;white-space:nowrap}
.hwSteps a i{font-style:normal;font-family:'Unbounded','Inter',sans-serif;font-weight:800;
  font-size:10.4px;color:var(--sc)}
.hwSteps a:hover{border-color:var(--sc)}
.hwSteps a:focus-visible{outline:2px solid var(--sc);outline-offset:3px}

/* ---- one step ----
   scroll-margin-top is here because a step jumped to from the rail landed flush
   against the top edge of the window. */
.hwAct{margin-top:74px;position:relative;scroll-margin-top:16px}
.hwTop{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.hwNo{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:13px;letter-spacing:1px;
  color:var(--violT);background:var(--ac);width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.hwNo.hwGlobe{background:transparent;border:2px solid var(--vio);color:var(--vio);font-size:15px}
.hwH{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(21px,2.7vw,30px);line-height:1.15}
.hwWho{font-size:10.8px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--ac);border:1.5px solid var(--ac);padding:4px 9px;align-self:center}
.hwRule{height:3px;background:linear-gradient(90deg,var(--ac),transparent);margin-top:18px}

/* A beat inside an act, rather than an act of its own. Act three has two of
   these: the question, then the board that lands after it. */
.hwSubH{font-family:'Unbounded','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,2.1vw,22px);line-height:1.2;margin:0}
.hwSubH + .hwLine{margin-top:10px}

/* ---- the three routes ---- */
.hwRoutes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.hwRoute{background:linear-gradient(180deg,var(--tint),rgba(255,255,255,.02));
  border:1px solid var(--line);border-top:4px solid var(--rc);padding:20px 18px 22px;
  display:flex;flex-direction:column;min-width:0}
.hwRTag{font-size:10.6px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--rc);margin-bottom:11px}
.hwRH{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:17.5px;
  letter-spacing:-.02em;line-height:1.22}
.hwRP{color:#D6C8E2;font-size:13.4px;line-height:1.58;margin-top:9px;font-weight:500;flex:1}
.hwArt{margin-top:16px;background:#160A1E;border:1px solid rgba(253,244,227,.09);
  padding:12px;min-height:150px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.hwTpl{display:flex;align-items:center;gap:9px;background:var(--panel);padding:8px 10px;
  border-left:3px solid var(--c);font-size:11.6px;font-weight:700;min-width:0}
.hwTpl em{font-style:normal;margin-left:auto;color:var(--dim);font-weight:600;font-size:10.4px;
  white-space:nowrap;flex:none}
.hwTplN{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwTplI{width:20px;height:20px;flex:none;background:var(--ct);display:grid;place-items:center;
  font-size:11px;color:var(--c);line-height:0}
.hwTplI svg{display:block}
.hwAiF{background:var(--panel);border:1.5px solid var(--lime);padding:9px 11px;
  font-size:11.8px;font-weight:700;display:flex;align-items:center;gap:7px}
.hwAiF s{width:6px;height:14px;background:var(--lime);display:block;text-decoration:none;
  animation:hwBlink 1.1s steps(1) infinite}
@keyframes hwBlink{50%{opacity:0}}
.hwAiQ{background:var(--panel);padding:7px 9px;font-size:10.8px;font-weight:600;color:#E4D8EE;
  display:flex;gap:7px;align-items:center}
.hwAiQ b{color:var(--lime);font-size:9.6px;letter-spacing:.6px;flex:none}
.hwAiB{background:var(--lime);color:var(--limeT);font-size:11.4px;font-weight:800;
  text-align:center;padding:8px;font-family:'Unbounded','Inter',sans-serif;letter-spacing:.2px}
.hwCells{display:flex;gap:6px}
.hwCell{flex:1;background:var(--panel);border:1px dashed rgba(253,244,227,.22);
  padding:9px 6px;text-align:center;font-size:10.4px;font-weight:700;color:#D6C8E2}
.hwCell.on{border-style:solid;border-color:var(--tang);color:var(--tang)}
.hwCell.vio{border-style:solid;border-color:var(--vio);color:var(--vio)}
.hwBar{height:7px;background:var(--panel);overflow:hidden}
.hwBar i{display:block;height:100%;width:62%;background:var(--tang)}
.hwBarL{font-size:10px;color:var(--dim);font-weight:700;text-align:center}

/* ---- the three ways into a room ---- */
.hwWays{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:24px}
.hwWay{background:var(--panel);border:1.5px solid var(--panel2);padding:14px 15px;
  display:flex;gap:12px;align-items:flex-start;min-width:0}
.hwWay i{flex:none;color:var(--ac);line-height:0;margin-top:1px}
.hwWay > div{min-width:0}
.hwWay b{display:block;font-size:13px;font-weight:800;margin-bottom:4px}
.hwWay span{display:block;font-size:11.8px;color:#D3C4E0;font-weight:500;line-height:1.5}

/* ---- text beside a device ---- */
.hwStage{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:center;margin-top:26px}
.hwStage.hwFlip .hwScreenWrap{order:-1}
.hwScreenWrap{position:relative;min-width:0}
.hwFloat{position:absolute;pointer-events:none;height:auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.5))}
/* Measured, not guessed. These sit in the gutter beside the device, never over
   the screen: at 1180 and at 390 the overlap check reports zero. */
.hwShapes{right:-4px;bottom:-30px;width:104px}
.hwRaffle{right:-2px;top:-34px;width:82px}
.hwMic{right:-4px;top:-36px;width:86px}

.hwLap{width:100%;max-width:520px;margin:0 auto}
.hwLap.hwLapS{max-width:440px}
.hwMon{background:#120720;border:2px solid var(--panel2);border-bottom:0;overflow:hidden;
  border-radius:10px 10px 0 0}
.hwBar2{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1A0D24;
  border-bottom:1px solid rgba(253,244,227,.08)}
.hwBar2 s{width:8px;height:8px;border-radius:50%;background:var(--panel2);display:block;
  text-decoration:none;flex:none}
.hwBar2 span{margin-left:8px;font-size:10.4px;color:var(--dim);font-weight:600}
.hwScreen{padding:18px 16px 20px;background:var(--bg)}
.hwBase{height:11px;background:var(--panel2);border-radius:0 0 12px 12px;
  max-width:560px;margin:0 auto;box-shadow:0 14px 26px -18px #000}
.hwPhone{width:212px;margin:0 auto;background:#120720;border:2px solid var(--panel2);
  border-radius:26px;padding:9px 8px 14px;box-shadow:0 22px 40px -26px #000}
.hwNotch{width:52px;height:4px;border-radius:99px;background:var(--panel2);margin:1px auto 9px}
.hwPhone .hwScreen{padding:12px 11px 14px;border-radius:18px}

/* A tablet, and a laptop small enough to sit beside one. Act three shows the
   same question on all three at once, because the page spent a year claiming
   in prose that this was not a phone product and nobody believed it. */
.hwTab{width:190px;margin:0 auto;background:#120720;border:2px solid var(--panel2);
  border-radius:14px;padding:11px 10px;box-shadow:0 22px 40px -26px #000}
.hwTab .hwScreen{padding:12px 10px 13px;border-radius:7px}
.hwLap.hwLapXS{max-width:222px}
.hwLapXS .hwScreen{padding:12px 10px 13px}
.hwLapXS .hwBar2{padding:6px 9px;gap:5px}
.hwLapXS .hwBar2 s{width:6px;height:6px}
.hwLapXS .hwBar2 span{margin-left:5px;font-size:9px}
.hwLapXS .hwBase{height:8px}

.hwHandsH{display:flex;align-items:center;gap:12px;margin-top:52px;font-size:11.2px;
  font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.hwHandsH:after{content:"";flex:1;height:1px;background:rgba(253,244,227,.12)}
.hwHands{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;
  align-items:end}
.hwHand{min-width:0}
.hwHandCap{margin-top:13px;text-align:center;font-size:11.6px;color:var(--dim);
  font-weight:600;line-height:1.5}
.hwHandCap b{display:block;color:var(--ink);font-size:12.6px;font-weight:800;margin-bottom:2px}

.hwST{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13.6px;letter-spacing:-.02em;
  text-align:center;margin:10px 0 12px}
.hwMini{font-size:15px;display:flex;justify-content:center}

.hwTiles{display:flex;gap:6px;justify-content:center;margin:2px 0 12px}
.hwTiles i{width:34px;height:42px;display:grid;place-items:center;font-family:'Unbounded','Inter',sans-serif;
  font-weight:800;font-size:18px;font-style:normal;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.hwLobby{display:flex;gap:12px;align-items:center;justify-content:center;background:var(--panel);
  padding:11px;margin-bottom:11px}
.hwQR{width:64px;height:64px;flex:none;background:#fff;padding:4px}
.hwQR svg{display:block;width:100%;height:100%}
.hwLobby p{font-size:10.6px;color:var(--dim);line-height:1.5;font-weight:600;text-align:left}
.hwLobby p b{color:var(--ink)}
.hwJoin{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.hwJoin span{font-size:10.6px;font-weight:700;background:var(--panel);border:1px solid var(--panel2);
  padding:5px 9px;white-space:nowrap}
.hwJoin .fresh{border-color:var(--lime);color:var(--lime)}
.hwWait{text-align:center;font-size:10.6px;color:var(--dim);margin-top:10px;font-weight:600}

/* ---- question ---- */
.hwQMeta{display:flex;justify-content:space-between;align-items:center;font-size:9.8px;
  font-weight:800;letter-spacing:1.2px;color:var(--dim);margin-bottom:9px}
.hwQMeta i{font-style:normal;background:var(--tang);color:var(--tangT);padding:2px 7px;
  font-family:'Unbounded','Inter',sans-serif;font-size:10.4px}
.hwQText{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:13px;line-height:1.32;
  text-align:center;margin-bottom:11px}
.hwAns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hwA{display:flex;align-items:center;gap:6px;background:var(--at);border:1.5px solid var(--a);
  padding:8px;font-size:10.6px;font-weight:700;min-width:0}
.hwA u{width:16px;height:16px;flex:none;background:var(--a);text-decoration:none;
  display:grid;place-items:center;font-size:9.4px;color:var(--violT);font-weight:800}
.hwA span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwA.pick{background:var(--a);color:var(--violT)}
.hwA.pick u{background:rgba(0,0,0,.22);color:#fff}
/* The small devices carry the same grid in about half the width. */
.hwTab .hwA,.hwLapXS .hwA,.hwPhone .hwA{font-size:9.8px;padding:7px;gap:5px}
.hwTab .hwA u,.hwLapXS .hwA u,.hwPhone .hwA u{width:14px;height:14px;font-size:8.6px}

/* ---- leaderboard ---- */
.hwLB{display:flex;flex-direction:column;gap:6px}
.hwRow{display:flex;align-items:center;gap:9px;background:var(--panel);padding:9px 11px;
  font-size:11.6px;font-weight:700}
.hwRow.top{background:linear-gradient(90deg,rgba(255,197,61,.2),var(--panel));
  border-left:3px solid var(--sun)}
.hwRow .rk{width:16px;color:var(--dim);font-size:10.6px;flex:none}
.hwRow .av{font-size:14px;flex:none}
.hwRow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwRow .nm em{display:block;font-style:normal;font-size:9.6px;font-weight:700;margin-top:1px}
.hwRow .sc{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12px;flex:none}
.hwRow.small{opacity:.72;padding:7px 11px;font-size:10.8px}

/* ---- the game's own podium, scaled ----
   Everything inside .hwPod is the live podium's markup and CSS. This wrapper
   only sizes it: the tiers get narrower, the drums shorter, the crown smaller.
   The live podium is never inside .hwPod, so none of this can reach it. */
.hwPod{margin-top:2px}
.hwPod .stage{padding:62px 4px 0!important;gap:10px!important;min-height:0!important}
.hwPod .tier{width:78px!important}
.hwPod .tier .tnm{font-size:10.5px!important}
.hwPod .tier .tsc{font-size:9.4px!important;margin:0 0 7px!important}
.hwPod .tier .tav{width:34px!important;height:34px!important;font-size:17px!important;
  margin:0 0 8px!important}
.hwPod .tier.champ .tav{width:40px!important;height:40px!important;font-size:20px!important}
.hwPod .tier .tstreak{font-size:9px!important}
.hwPod .block{margin-top:14px!important;border-radius:0 0 16px 16px!important}
.hwPod .block.b1{height:104px!important}
.hwPod .block.b2{height:74px!important}
.hwPod .block.b3{height:54px!important}
.hwPod .dShell,.hwPod .dShine{border-radius:0 0 16px 16px}
.hwPod .dSkin{top:-12px;height:24px;box-shadow:inset 0 0 0 4px var(--rim),0 3px 8px rgba(0,0,0,.45)}
.hwPod .dRope{inset:12px 6px 9px}
.hwPod .block .pnum{font-size:17px!important}
.hwPod .podCrown{top:-46px!important;width:38px!important}
.hwPod .tier.champ:before{width:120px;height:190px}

/* ---- the three share cards ---- */
.hwCards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.hwCard{background:linear-gradient(170deg,#2A1140,#160A1E);border:1.5px solid var(--rcA);
  padding:15px 13px 13px;display:flex;flex-direction:column;align-items:center;text-align:center;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.hwCardWho{font-size:9.4px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--rcA);margin-bottom:9px}
.hwCardMark{font-size:13px}
.hwCardEye{font-size:9px;font-weight:800;letter-spacing:2.4px;color:var(--dim);margin:9px 0 8px}
/* Was .hwHero, which collided with the page hero of the same name and quietly
   set 30px on the whole header. Renamed rather than scoped, because the card
   is the only thing that ever wanted it. */
.hwCardHero{font-size:30px;line-height:1}
.hwCardHero.num{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:27px;color:var(--rcA)}
.hwCardHero.num small{display:block;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;
  color:var(--dim);letter-spacing:1.6px;margin-top:2px}
.hwCardAw{font-family:'Unbounded','Inter',sans-serif;font-weight:800;font-size:12.6px;color:var(--rcA);
  margin-top:5px}
.hwCardD{font-size:10.4px;font-weight:700;color:#E2D7EA;margin-top:7px}
.hwCardT{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12px;margin-top:9px;
  margin-bottom:11px;line-height:1.25}
/* The real card is a fixed size with the call to action at a fixed slabY, so
   all three slabs line up whatever the hero above them is. margin-top:auto
   reproduces that here instead of letting each card's content push it. */
.hwCardSlab{background:var(--rcA);color:var(--violT);font-size:10px;font-weight:800;
  padding:7px 9px;margin-top:auto;width:100%;border-radius:8px}
.hwCardFoot{font-size:8.6px;color:var(--dim);font-weight:700;margin-top:7px;letter-spacing:.4px}

/* ---- how sharing works ---- */
.hwShare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;align-items:start}
.hwSBtns{display:flex;flex-direction:column;gap:9px}
.hwSBtn{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:12.6px;padding:12px;
  text-align:center}
.hwSBtn.go{background:var(--turq);color:var(--turqT)}
.hwSBtn.ghost{background:transparent;border:1.5px solid var(--panel2);color:var(--ink)}
.hwSNote{font-size:11px;color:var(--dim);font-weight:600;line-height:1.5;margin-top:8px}
.hwSheet{background:var(--panel);border:1px solid var(--panel2);padding:13px}
.hwSheetH{font-size:9.6px;font-weight:800;letter-spacing:1.8px;color:var(--dim);
  text-transform:uppercase;margin-bottom:9px}
.hwMsg{background:#160A1E;border:1px solid rgba(253,244,227,.1);padding:10px;font-size:11px;
  line-height:1.5;font-weight:600;color:#E4D8EE}
.hwMsg b{color:var(--turq);font-weight:700}
.hwAttach{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(253,244,227,.1);font-size:10px;color:var(--dim);font-weight:700}
.hwAttach i{font-style:normal;width:22px;height:28px;flex:none;
  background:linear-gradient(160deg,#2A1140,#160A1E);border:1px solid var(--tang);display:block}

/* ---- rooms ---- */
.hwRooms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.hwRoom{background:linear-gradient(180deg,var(--rt),rgba(255,255,255,.02));
  border:1px solid var(--rl);border-top:3px solid var(--r);padding:16px 15px 17px;
  display:flex;gap:13px;align-items:flex-start;min-width:0}
.hwRoom img{width:50px;height:50px;flex:none;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.hwRoom > div{min-width:0}
.hwWhere{font-size:10.2px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--r)}
.hwRH2{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:14.4px;
  letter-spacing:-.018em;line-height:1.25;margin-top:5px}
.hwRP2{font-size:12.2px;color:#D3C4E0;line-height:1.5;margin-top:6px;font-weight:500}

/* ---- close ---- */
.hwClose{margin-top:78px;
  background:linear-gradient(140deg,rgba(43,217,198,.13),rgba(240,80,155,.11));
  border:1px solid rgba(253,244,227,.13);padding:clamp(26px,4vw,44px);text-align:center}
.hwClose h2{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(22px,3.2vw,34px);line-height:1.14}
.hwClose p{color:#E2D7EA;font-size:15px;line-height:1.6;max-width:52ch;margin:14px auto 0;
  font-weight:500}
.hwCta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hwCta button{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:14.5px;
  padding:15px 26px;letter-spacing:.2px;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:transform .1s,filter .15s}
.hwCta button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.hwCta button:active{transform:scale(.97)}
.hwCta button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hwCta .hwGo{background:var(--lime);color:var(--limeT)}
.hwCta .hwQuiet{background:var(--panel);color:var(--ink);border:1.5px solid var(--panel2)}

@media(max-width:980px){
  .hwRoutes{grid-template-columns:1fr}
  .hwRooms{grid-template-columns:1fr 1fr}
  .hwCards{grid-template-columns:1fr}
  .hwShare{grid-template-columns:1fr}
  .hwKit{grid-template-columns:1fr}
  .hwWays{grid-template-columns:1fr}
  .hwStage{grid-template-columns:1fr;gap:22px}
  .hwStage.hwFlip .hwScreenWrap{order:0}
  /* .hwScreenWrap is the positioning frame on desktop. On a phone the art has to
     leave the device entirely or it lands on the screen, so the frame becomes
     .hwAct and the art parks in the header gutter reserved below. */
  .hwScreenWrap{position:static}
  .hwFloat{top:-2px;bottom:auto;left:auto;right:0;width:58px}
  .hwTop{padding-right:70px;display:grid;
    grid-template-columns:auto auto 1fr;grid-template-areas:"no who ." "h h h";
    gap:9px 11px;align-items:center}
  .hwNo{grid-area:no} .hwWho{grid-area:who;justify-self:start} .hwH{grid-area:h}
}
@media(max-width:700px){
  /* Three devices side by side stop being readable below about 150px each, and
     the point of the row is that you can read the same question on all three. */
  .hwHands{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .hwRooms{grid-template-columns:1fr}
  .hwLap{max-width:100%}
  .hwLap.hwLapXS{max-width:250px}
  .hwAct{margin-top:56px}
  /* The top was too tall to reach step one on a phone. Nothing is removed, it is
     packed down: smaller mark, tighter headline, lighter pills, step rail on
     fewer rows. */
  .hwHero{padding:2px 0 0}
  .hwMark{margin-bottom:16px}
  .olwm{font-size:25px}
  .hwEye{margin-bottom:10px;font-size:10.5px;letter-spacing:2.2px}
  .hwBig{line-height:1.08}
  .hwLede{line-height:1.55;margin-top:14px}
  .hwPills{gap:6px;margin-top:16px}
  .hwPills span{font-size:10.6px;padding:6px 9px}
  .hwKit{margin-top:18px;gap:9px}
  .hwKitRow{padding:12px 14px}
  .hwSteps{margin-top:20px;gap:6px}
  .hwSteps a{font-size:10.8px;padding:7px 9px 7px 8px;gap:6px}
  .hwHandsH{margin-top:30px;font-size:10.4px;letter-spacing:1.3px}
}
@media(prefers-reduced-motion:reduce){
  .hwAiF s{animation:none}
}

/* ============================================================================
   r85. /how-it-works carried 1,272 words on a phone, about twenty-five screens.
   Each step now shows one line and a few chips, and everything that was in the
   two prose boxes sits behind a tap instead. Nothing was deleted, it moved.
   ========================================================================== */
.hwLine{color:#E4D8EE;font-size:15px;line-height:1.5;margin-top:9px;font-weight:600;max-width:56ch}

/* the facts, as chips */
.hwFacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.hwFacts span{font-size:11.6px;font-weight:700;background:var(--panel);
  border:1.5px solid var(--panel2);border-left:3px solid var(--ac);padding:7px 11px;
  white-space:nowrap}

/* the detail, behind a tap. A real <details>, so it works with no JS, it is
   keyboard reachable, and find-in-page opens it in browsers that support that. */
.hwMore{margin-top:12px;display:block}
.hwMore summary{list-style:none;cursor:pointer;font-size:11.8px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--ac);display:flex;
  align-items:center;gap:8px;padding:10px 0;min-height:44px}
.hwMore summary::-webkit-details-marker{display:none}
.hwMore summary i{font-style:normal;width:17px;height:17px;flex:none;
  border:1.5px solid var(--ac);display:grid;place-items:center;font-size:13px;line-height:0}
.hwMore summary i::before{content:"+"}
.hwMore[open] summary i::before{content:"\2013"}
.hwMore summary:hover{filter:brightness(1.15)}
.hwMore summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.hwMoreIn{border-left:3px solid var(--ac);padding:2px 0 6px 14px;font-size:13.4px;
  line-height:1.6;color:#DCCFE6;font-weight:500;max-width:62ch}
.hwMoreIn p+p{margin-top:9px}

@media(max-width:560px){
  .hwLine{font-size:14.4px}
  .hwFacts span{font-size:11px;padding:6px 9px}
  .hwMoreIn{font-size:12.8px}
}

/* ============================================================================
   r86. The partner form opens on a tap, and the issue chips became the
   seventeen goals in a multi-select panel.
   ========================================================================== */

/* ---- open or shut ---- */
.pfBox{padding:0!important;overflow:visible}
.pfHead{display:flex;align-items:center;gap:13px;width:100%;padding:17px 19px;cursor:pointer;
  background:none;border:0;text-align:left;color:inherit;font-family:inherit}
.pfHead:hover{background:rgba(255,255,255,.03)}
.pfHead:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
.pfHeadT{flex:1;min-width:0}
.pfHead .pfH{display:block;margin:0}
.pfHead .pfNote{display:block;margin:4px 0 0}
/* Was a 34px square holding a plus, rotated 45 degrees when open.
   A plus reads as "expand a FAQ row", and these two cards are the only places
   on the page asking somebody to begin a relationship, so it is now a solid
   control carrying a word. Solid rather than outlined because it should be the
   loudest thing in the card. */
.pfHeadX{flex:none;font:800 11px 'Inter',system-ui,sans-serif;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--limeT);background:var(--lime);
  padding:10px 15px;white-space:nowrap;transition:background .18s,color .18s;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
/* Open, it becomes a quiet way out rather than a second call to action:
   the loud version has already done its job. */
.pfBox.pfOpen .pfHeadX{background:transparent;color:var(--mute);
  box-shadow:inset 0 0 0 1px rgba(253,244,227,.2)}
.pfBody{display:none;padding:2px 19px 19px;border-top:1px solid var(--panel2)}
.pfBox.pfOpen .pfBody{display:block}
.pfBox.pfDone{padding:clamp(18px,3vw,26px)!important}

/* ---- the goals ---- */
.pfGoals{position:relative}
.pfGoalBtn{width:100%;background:#160A1E;border:1.5px solid var(--panel2);color:var(--ink);
  padding:12px 13px;font:700 14px 'Inter',system-ui,sans-serif;text-align:left;cursor:pointer;
  min-height:46px;display:flex;align-items:center;gap:10px}
.pfGoalBtn .ph{color:var(--dim);font-weight:600}
.pfGoalBtn:focus-visible{outline:none;border-color:var(--lime)}
.pfGoalCar{margin-left:auto;flex:none;color:var(--dim);font-size:12px;transition:transform .18s}
.pfGoals.on .pfGoalCar{transform:rotate(180deg)}
/* In the flow, not floating over the page.

   As an absolutely positioned overlay it did not add to the page height, so
   opening it near the foot of a form put its bottom below where the page could
   scroll: the last goals were unreachable and the box looked sliced off with no
   bottom edge. In the flow the page grows to hold it, there is one obvious
   scrollbar, and pfGoalsOpen brings the whole box on screen. */
.pfGoalPanel{position:relative;margin-top:6px;z-index:1;
  background:#1B0E25;border:1.5px solid var(--lime);max-height:min(330px,50vh);overflow:auto;
  overscroll-behavior:contain;box-shadow:0 24px 50px -22px #000}
.pfGoalSearch{position:sticky;top:0;background:#1B0E25;padding:10px;
  border-bottom:1px solid var(--panel2)}
.pfGoalSearch input{width:100%;background:#160A1E;border:1.5px solid var(--panel2);color:var(--ink);
  padding:10px 11px;font:600 13px 'Inter',system-ui,sans-serif;min-height:42px}
.pfGoalSearch input:focus{outline:none;border-color:var(--lime)}
.pfGoalOpt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;min-height:44px;
  background:none;border:0;border-bottom:1px solid rgba(253,244,227,.06);cursor:pointer;
  color:var(--ink);text-align:left;font-family:inherit}
.pfGoalOpt:hover{background:rgba(255,255,255,.04)}
.pfGoalOpt:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.pfGoalN{flex:none;width:26px;height:26px;display:grid;place-items:center;font-size:11.4px;
  font-weight:800;color:#fff;background:var(--g)}
.pfGoalT{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.35}
.pfGoalTick{flex:none;width:20px;height:20px;border:1.5px solid var(--panel2);display:grid;
  place-items:center;line-height:0;color:transparent}
.pfGoalOpt.on .pfGoalTick{background:var(--lime);border-color:var(--lime);color:var(--limeT)}
.pfGoalOpt.on .pfGoalT{color:#fff}
.pfGoalNone{padding:14px;color:var(--dim);font-size:13px;font-weight:600}
.pfGoalPicked{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pfGoalPicked span{display:inline-flex;align-items:center;gap:7px;font-size:11.6px;font-weight:700;
  background:rgba(255,255,255,.05);border-left:3px solid var(--g);padding:6px 9px;max-width:100%}
.pfGoalPicked b{background:var(--g);color:#fff;font-size:10px;padding:2px 5px;font-weight:800;
  flex:none}
.pfGoalPicked button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px;
  line-height:1;padding:0 2px;font-family:inherit}
.pfGoalPicked button:hover{color:var(--ink)}

/* The label rule above is `.pfField span`, a descendant selector, so it reached
   every span inside the goal control: the names came out uppercase and letter
   spaced, and the unpicked ticks inherited the dim label colour instead of the
   transparent one they were given. Two symptoms, one cause. These selectors are
   deliberately three classes deep so they outrank it. */
.pfField .pfGoals span,
.pfField .pfGoalPicked span{
  font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.pfField .pfGoalBtn > span:first-child{font-size:14px;font-weight:700;color:var(--ink)}
.pfField .pfGoalBtn > span.ph{font-weight:600;color:var(--dim)}
.pfField .pfGoals .pfGoalCar{color:var(--dim);font-size:12px}
.pfField .pfGoals .pfGoalN{font-size:11.4px;font-weight:800;color:#fff}
.pfField .pfGoals .pfGoalT{font-size:13px;font-weight:600;color:var(--ink)}
.pfField .pfGoals .pfGoalTick{color:transparent}
.pfField .pfGoalOpt.on .pfGoalTick{color:var(--limeT)}
/* stroke="currentColor" on the icon means a transparent colour hides it, but
   only once the colour above actually applies. */
.pfField .pfGoalTick svg{display:block}
.pfField .pfGoalPicked span{font-size:11.6px;font-weight:700;color:var(--ink)}
.pfField .pfGoalPicked b{font-size:10px;font-weight:800;color:#fff}

/* ============================================================================
   r87. Otiya for kids: the grown-up's free account, after the first game.
   ========================================================================== */
.kGate{background:linear-gradient(165deg,rgba(167,139,250,.16),rgba(255,255,255,.03));
  border:1.5px solid rgba(167,139,250,.42);padding:20px 18px 18px;width:100%;margin-top:6px}
.kGateTop{display:flex;align-items:center;gap:10px;color:var(--vio);margin-bottom:10px}
.kGateTop b{font-family:'Unbounded','Inter',sans-serif;font-weight:700;font-size:15.5px;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.kGateTop svg{flex:none}
.kGateP{font-size:14.4px;line-height:1.6;color:#E6DAEF;font-weight:500}
.kGateP b{color:#fff}
.kGateL{list-style:none;margin:13px 0 17px;display:flex;flex-direction:column;gap:8px}
.kGateL li{font-size:12.8px;line-height:1.5;color:#DCCFE6;font-weight:500;padding-left:17px;
  position:relative}
.kGateL li:before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;
  background:var(--vio);transform:rotate(45deg)}
.kGateAlt{display:block;width:100%;margin-top:11px;background:none;border:0;cursor:pointer;
  color:var(--vio);font:800 12.8px 'Inter',system-ui,sans-serif;padding:12px;min-height:44px;
  text-decoration:underline;text-underline-offset:3px}
.kGateAlt:hover{color:var(--ink)}
.kGateAlt:disabled{opacity:.5;cursor:not-allowed}

/* ---- Team mode -------------------------------------------------------
   Every class here is prefixed tm so nothing can reach into the game's own
   .stage, .tier, .block or .row, which is how earlier additions leaked. */
.tmBars{margin:0 auto 14px;max-width:560px;background:rgba(255,255,255,.026);
  border:1px solid rgba(253,244,227,.09);border-radius:14px;padding:12px 13px 10px}
.tmBarsHead{font:800 10.5px 'Inter',system-ui,sans-serif;letter-spacing:2.2px;
  color:var(--dim);text-transform:uppercase;margin-bottom:9px}
.tmBar{display:block;margin-bottom:10px}
.tmBar:last-of-type{margin-bottom:0}
.tmBar .tmTop{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.tmBar .tmNm{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  font:700 13.2px 'Inter',system-ui,sans-serif;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmBar .tmNm i{flex:none;width:10px;height:10px;border-radius:2px;display:block}
.tmTrack{display:block;width:100%;height:10px;background:rgba(255,255,255,.055);
  border-radius:99px;overflow:hidden}
.tmTrack i{display:block;height:100%;border-radius:99px;transition:width .45s ease}
.tmVal{flex:none;text-align:right;
  font:800 13px 'Unbounded','Inter',system-ui,sans-serif;color:var(--ink)}
.tmNote{margin-top:9px;color:var(--dim);font:600 11.4px 'Inter',system-ui,sans-serif;line-height:1.5}
.tmChip{display:block;max-width:260px;margin:0 auto 12px;padding:8px 14px;border-radius:99px;
  font:800 12.6px 'Inter',system-ui,sans-serif;text-align:center}
.tmDot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;
  vertical-align:middle;position:relative;top:-1px}
.tmLegend{display:block;margin:0 0 16px}
.tmLegendOne{display:inline-flex;align-items:center;gap:6px;margin:0 5px 6px 0;
  padding:5px 11px;border-radius:99px;font:800 11.6px 'Inter',system-ui,sans-serif}
.tmLegendOne b{font-weight:800;opacity:.72}

/* the control in the round options sheet */
/* Seven controls on one row at 390px. A flex row wrapped the last one onto a
   line of its own, which read as a separate option rather than the end of a
   scale, so the row is a grid that cannot wrap. Off gets the wider column
   because it carries a word and the rest carry one digit. */
.tmPick{display:grid;grid-template-columns:1.35fr repeat(5,1fr);gap:6px}
.tmPickBtn{min-width:0;min-height:44px;padding:10px 4px;cursor:pointer;
  border:1px solid rgba(253,244,227,.09);background:rgba(255,255,255,.025);
  border-radius:12px;color:var(--ink);font:800 14px 'Inter',system-ui,sans-serif;
  transition:border-color .16s ease,background .16s ease}
.tmPickBtn.on{border-color:rgba(200,241,53,.48);
  background:linear-gradient(135deg,rgba(200,241,53,.075),rgba(43,217,198,.045))}
.tmPickNote{margin-top:9px;color:var(--dim);font:600 11.8px 'Inter',system-ui,sans-serif;line-height:1.55}
.tmNames{margin-top:11px}
.tmNameRow{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tmNameRow i{flex:none;width:12px;height:12px;border-radius:3px;display:block}
.tmNameRow input{flex:1;min-width:0;min-height:44px;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(253,244,227,.12);background:rgba(255,255,255,.03);color:var(--ink);
  font:700 13.4px 'Inter',system-ui,sans-serif}
.tmNameRow input:focus{outline:none;border-color:rgba(200,241,53,.5)}
/* Said once, at the top of the block, and quietly. A host who is about to run
   teams needs to know it is free for now and not free forever, and does not
   need it shouted at them every time they open the sheet. */
.tmBeta{margin:0 0 9px;padding:9px 11px;border-radius:10px;
  background:rgba(200,241,53,.06);border-left:2.5px solid var(--lime);
  font:600 11.8px 'Inter',system-ui,sans-serif;line-height:1.55;color:var(--dim)}
.tmBeta button{border:0;background:none;padding:0;cursor:pointer;color:var(--lime);
  font:800 11.8px 'Inter',system-ui,sans-serif;text-decoration:underline;
  text-underline-offset:2px}
.tmUpsell{border:1px dashed var(--vio);border-radius:13px;padding:13px 14px;
  background:rgba(167,139,250,.055)}
.tmUpsell b{display:block;font:800 14.4px 'Unbounded','Inter',system-ui,sans-serif;
  letter-spacing:-.02em;color:var(--ink)}
.tmUpsell span{display:block;margin-top:5px;color:var(--dim);
  font:600 12.2px 'Inter',system-ui,sans-serif;line-height:1.58}
.tmUpsellBtn{margin-top:10px;min-height:44px;padding:10px 15px;cursor:pointer;border:0;
  border-radius:11px;background:var(--vio);color:#1B1033;
  font:800 12.8px 'Inter',system-ui,sans-serif;display:inline-flex;align-items:center;gap:7px}
@media(max-width:420px){
  .tmBar .tmNm{font-size:12.4px}
  .tmVal{font-size:12.2px}
}

/* team mode: the lobby, the picker, and the tag on a player's own screen */
.tmWho{padding:8px 15px;font:700 14px 'Inter',system-ui,sans-serif;cursor:pointer;
  background:var(--panel2);color:var(--ink);border:1.5px solid transparent;min-height:38px}
.tmWho.on{border-color:var(--lime)}
.tmMove{margin-top:10px;padding:11px 12px;border-radius:13px;
  background:rgba(255,255,255,.03);border:1px solid rgba(253,244,227,.09);text-align:left}
.tmMoveWho{display:block;color:var(--dim);font:700 11.6px 'Inter',system-ui,sans-serif;
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
.tmMoveRow{display:flex;gap:7px;flex-wrap:wrap}
.tmMoveBtn{flex:1 1 84px;min-height:44px;padding:9px 10px;cursor:pointer;border-radius:11px;
  border:1.5px solid var(--tmc);background:transparent;color:var(--ink);
  font:800 12.4px 'Inter',system-ui,sans-serif}
.tmMoveBtn.on{background:var(--tmc);color:#1B1033}
.tmMoveCancel{margin-top:9px;background:none;border:0;cursor:pointer;color:var(--dim);
  font:700 12px 'Inter',system-ui,sans-serif;padding:8px 0;min-height:38px;
  text-decoration:underline;text-underline-offset:3px}
.tmPickMine{max-width:420px;margin:0 auto 14px;padding:12px 13px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(253,244,227,.09);text-align:left}
.tmPickMineHead{color:var(--dim);font:700 11.6px 'Inter',system-ui,sans-serif;
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
.tmChoice{display:flex;align-items:center;gap:9px;margin-top:11px;cursor:pointer;
  color:var(--ink);font:700 12.8px 'Inter',system-ui,sans-serif;min-height:44px}
.tmChoice input{width:20px;height:20px;flex:0 0 20px;padding:0;margin:0;border:0;background:transparent;accent-color:var(--lime)}
.tmChoice span{display:block;line-height:1.35}
.tmChoiceNote{margin-left:29px}
.gpill.tmTag{display:inline-flex;align-items:center;gap:6px}
.gpill.tmTag i{width:9px;height:9px;border-radius:2px;display:block;flex:none}

/* ---- the beta line under the hero pills, home page only ------------------
   A lime wash rather than a plain one, so the sentence and the BETA badge in
   the corner read as the same subject. The panel is borderless-soft on purpose:
   the pills above it are bordered boxes, so a washed panel underneath reads as
   a different kind of thing straight away, which is the whole point of it. */
.heroBeta{position:relative;z-index:2;max-width:330px;margin:12px auto 0;
  padding:10px 13px;border-radius:12px;text-align:center;
  background:rgba(200,241,53,.065);border:1px solid rgba(200,241,53,.20);
  color:#D6C7E2;font:600 11.4px/1.62 'Inter',system-ui,sans-serif;letter-spacing:-.005em}
.heroBeta button{background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;font-weight:800;color:var(--turq);
  border-bottom:1px solid rgba(43,217,198,.45);line-height:inherit}
.heroBeta button:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.heroBeta button:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:3px}
@media(max-width:420px){
  .heroBeta{max-width:none;margin-top:11px;padding:10px 12px;font-size:11.2px}
}

@media (min-width:1040px){
  .cmTrio{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Kids: report a question. Deliberately the quietest thing on the reveal
   screen. It is for a grown-up looking over a child's shoulder, so it must be
   findable without competing with the answer or the next-turn button.

   Uses the same rgba(253,244,227,...) tints as .kHelp and .kSkip rather than
   black tints: the Kids theme is dark (--bg is #1D0E27), so black-on-dark
   surfaces are invisible. */
.kReportLink{display:block;margin:13px auto 0;background:none;border:0;cursor:pointer;
  font:600 10.5px 'Inter',sans-serif;letter-spacing:.03em;color:var(--mute);
  text-decoration:underline;text-underline-offset:3px;padding:6px 10px}
.kReportLink:hover{color:var(--ink)}
.kReportBox{margin:13px 2px 0;padding:13px 14px;border-radius:16px;text-align:left;
  background:rgba(253,244,227,.06);border:1px solid rgba(253,244,227,.18)}
.kReportBox b{display:block;font:700 11.5px 'Inter',sans-serif;color:var(--ink);
  margin-bottom:9px;letter-spacing:.02em}
.kReportBox p{margin:0;font:500 11.5px/1.45 'Inter',sans-serif;color:var(--dim)}
.kReportOpts{display:flex;flex-direction:column;gap:6px}
.kReportOpt{width:100%;text-align:left;cursor:pointer;padding:10px 12px;border-radius:11px;
  background:transparent;border:1px solid rgba(253,244,227,.18);
  font:600 11.5px 'Inter',sans-serif;color:var(--ink)}
.kReportOpt:hover{border-color:rgba(253,244,227,.42);background:rgba(253,244,227,.05)}
.kReportCancel{margin-top:9px;background:none;border:0;cursor:pointer;padding:4px 2px;
  font:600 10.5px 'Inter',sans-serif;color:var(--mute);text-decoration:underline}

/* Item 13: the free / plan / priced-per-project note under the offer trio.
   Quiet on purpose. It is a clarification, not a fourth offer, so it must not
   compete with the three cards above it. Uses the same cream tints as the rest
   of the dark theme. */
.pnSplit{margin:22px 0 30px;padding:16px 18px;border-radius:14px;
  background:rgba(253,244,227,.05);border:1px solid rgba(253,244,227,.14)}
.pnSplit b{display:block;font:800 14px 'Inter',sans-serif;color:var(--ink);margin-bottom:8px}
.pnSplit p{margin:0 0 8px;font:500 13.5px/1.62 'Inter',sans-serif;color:var(--dim)}
.pnSplit p:last-child{margin-bottom:0}
@media(max-width:700px){ .pnSplit{padding:14px 15px;margin:18px 0 24px} }

/* Item 14: labelling on the partnership examples and the sample report.
   .cmCaption says an example is an example. .cmCaution is the stronger one: it
   marks the limit of what participation figures can honestly claim, so it is
   given its own tint rather than reading as more small print. */
.cmCaption{margin:6px 0 14px;font:600 12px/1.55 'Inter',sans-serif;color:var(--mute);
  letter-spacing:.01em}
.cmCaution{margin:10px 0 0;padding:10px 12px;border-radius:10px;
  background:rgba(253,244,227,.05);border-left:2px solid var(--mute);
  font:500 12.5px/1.6 'Inter',sans-serif;color:var(--dim)}

/* Item 1: the AI brief box grew from a single line to a textarea.
   Inherits .aiIn so the border, radius and focus ring stay identical; only the
   height and wrapping behaviour change. */
.aiInBig{min-height:86px;max-height:220px;resize:vertical;line-height:1.55;
  padding-top:11px;padding-bottom:11px;font-family:'Inter',sans-serif}
.aiCount{margin:6px 2px 0;text-align:right;font:600 11px 'Inter',sans-serif;
  color:var(--mute);letter-spacing:.02em}
/* Reaching the limit is a normal thing to do, not an error, so this warms the
   colour rather than turning it red. */
.aiCountFull{color:var(--sun)}

/* Item 3: the reconnecting banner.
   z-index 38, deliberately BELOW .sheetwrap at 40. A dropped connection while
   the Leave confirmation is open should not put a floating pill over the
   question being asked; the sheet backdrop covers it and it reappears when the
   sheet closes. pointer-events:none as well, so it can never swallow a tap. */
.connLost{position:fixed;left:50%;transform:translateX(-50%) translateY(-120%);
  top:calc(env(safe-area-inset-top,0px) + 10px);z-index:38;pointer-events:none;
  padding:9px 16px;border-radius:999px;
  /* Was nowrap with no ceiling, so on a narrow phone, or with the system text
     size turned up, it would have run past both edges of the screen. */
  max-width:calc(100vw - 28px);text-align:center;
  background:var(--panel);border:1px solid var(--panel2);
  font:700 12.5px 'Inter',sans-serif;color:var(--ink);
  box-shadow:0 6px 22px rgba(0,0,0,.38);
  transition:transform .22s ease,opacity .22s ease;opacity:0}
.connLost.on{transform:translateX(-50%) translateY(0);opacity:1}

/* Item 10: the NEXT SESSION slot when nothing is scheduled.
   Same card as a real session so the page keeps its shape, but calmer: no flag
   colour, no prize list, nothing that reads like an event you can attend. */
.leEmpty{background:rgba(253,244,227,.04);border:1px solid rgba(253,244,227,.14)}
.leEmpty .leFlag{background:transparent;border:1px solid rgba(253,244,227,.28);color:var(--mute)}
.leEmptyP{margin:8px 0 16px;font:500 14px/1.62 'Inter',sans-serif;color:var(--dim);max-width:46ch}

/* Item 10: sessions after the next one. Quiet, because they are a schedule and
   not a second call to action. */
.leLater{margin:18px 2px 0;padding:14px 16px;border-radius:14px;
  background:rgba(253,244,227,.04);border:1px solid rgba(253,244,227,.12)}
.leLaterH{font:700 10.5px 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:10px}
.leLaterRow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:7px 0;border-top:1px solid rgba(253,244,227,.08)}
.leLaterRow:first-of-type{border-top:0}
.leLaterRow b{font:700 13px 'Inter',sans-serif;color:var(--ink)}
.leLaterRow span{font:500 12.5px 'Inter',sans-serif;color:var(--dim)}

/* Which offer an enquiry is about. Inside the form body, above the fields, so
   it reads as a subject line for what follows rather than a label on the panel. */
.pfAbout{margin:0 0 14px;padding:9px 12px;border-radius:10px;
  background:rgba(253,244,227,.06);border-left:2px solid var(--lime);
  font:600 12.5px/1.5 'Inter',sans-serif;color:var(--dim)}
.pfAbout b{color:var(--ink);font-weight:800;margin-right:6px}

/* While a game is on, the top strip carries Leave, sound and music and nothing
   else. The account pill is the widest thing up there and it grows with the
   person's first name, which is what pushed it into the music button: 51px of
   overlap at 320px, 11px at 360px. Hidden here rather than moved, because
   nobody changes their plan mid-question. Auth links go with it for the same
   reason. Everything returns the moment the game ends. */
body.inGameChrome .profbtn,
body.inGameChrome .authnav,
body.inGameChrome .beta{display:none!important}

/* The reconnecting banner was centred in that same strip, so it crossed the
   buttons at every phone width I measured. Below the strip now, where the two
   cannot fight. */
body.inGameChrome .connLost{top:calc(env(safe-area-inset-top,0px) + 66px)}

/* The typed demo line is the one piece of copy on the homepage whose length is
   fixed by the animation, so on the narrowest phones the field gives it a
   smaller font and tighter spacing rather than clipping it mid-word. Only below
   360px; everything above has room at the normal size. */
@media(max-width:359px){
  .soloDemoField{padding:8px 9px;gap:6px}
  .soloDemoField b{font-size:11.2px}
}

/* iOS Safari zooms the whole page in when a focused input has a font smaller
   than 16px, and then leaves the visitor pinching back out. On the join screen
   that happens the moment somebody taps the code or nickname field, which is
   the first thing anyone does. The zoom is not blocked in the viewport meta,
   and it should not be: stopping people zooming a page by hand is worse than
   the problem.

   So the inputs themselves go to 16px on touch screens. Only on touch, so the
   desktop sizes are untouched, and only the fields a visitor actually types
   into: admin tables and search boxes are left alone because nobody fills a
   form on a phone in there.

   1px of font on a field whose height comes from padding, so the layout barely
   moves: about 1.5px taller per field. */
@media (max-width:820px) and (pointer:coarse){
  .joinbar input,
  .softin input,
  .pfField input, .pfField textarea, .pfField select,
  .otprof-field input, .otprof-field select,
  .tmNameRow input,
  textarea, .text, .area, .aiIn{ font-size:16px }
}

/* Tap targets on touch screens.

   Three controls sat under the 44px that a thumb reliably hits: the kids report
   link at about 27px, its reason buttons at 36px, and the AI example chips at
   30px. All are fine with a mouse and all are easy to miss with a thumb, and
   the report one matters most because the person reaching for it is usually
   annoyed already.

   Height comes from padding, not font size, so they grow their hit area
   without getting louder. Touch only: the desktop sizes are unchanged. */
@media (pointer:coarse){
  /* min-height rather than padding arithmetic: padding alone left each of them
     a pixel or two short, and a rule that has to be recalculated every time the
     font changes is a rule that will be wrong later. */
  .kReportLink{min-height:44px;padding:13px 10px}
  .kReportOpt{min-height:44px;display:flex;align-items:center}
  .aiChip{min-height:44px;display:inline-flex;align-items:center}
}

/* Team results on the podium. Replaces the old single-winner line, which named
   the top team and left a room of six teams knowing nothing else.
   Sits below the podium and above the awards, so it adds to the ending rather
   than taking anything out of it. */
/* 600px matches .stage, the podium directly above it, so the two line up
   rather than the standings sitting as a narrower box under a wider podium.
   text-align:left because the podium centres its text and a left-aligned list
   is what a table of results wants. */
.tmStand{width:100%;margin:14px auto 0;max-width:600px;padding:13px 14px;border-radius:14px;text-align:left;
  background:rgba(253,244,227,.05);border:1px solid rgba(253,244,227,.14)}
.tmStandH{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.tmStandH b{font:800 11px 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tmStandH small{font:600 10.5px 'Inter',sans-serif;color:var(--mute)}
.tmStandRow{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-top:1px solid rgba(253,244,227,.08)}
.tmStandRow:first-of-type{border-top:0}
.tmStandPos{width:15px;flex:none;font:800 12px 'Inter',sans-serif;color:var(--mute)}
.tmStandDot{width:10px;height:10px;border-radius:3px;flex:none;display:block}
.tmStandNm{flex:1;min-width:0;font:700 13px 'Inter',sans-serif;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The player count is the first thing to go when the row is tight: the name and
   the score are what the room is reading. */
.tmStandSz{flex:none;font:600 10.5px 'Inter',sans-serif;color:var(--mute)}
.tmStandVal{flex:none;min-width:50px;text-align:right;font:800 13px 'Inter',sans-serif;color:var(--ink)}
.tmStandRow.win .tmStandNm,.tmStandRow.win .tmStandPos{color:var(--lime)}
@media(max-width:360px){ .tmStandSz{display:none} }

/* ========================================================================
   OTIYA KIDS — INCLUSIVE PLAY / PHASE 1
   Needs-based controls only. No SEND diagnosis or label is required or stored.
   ======================================================================== */
.kInclusiveIntro{display:flex;flex-direction:column;gap:4px;padding:13px 14px;margin:-2px 0 14px;
  border-radius:16px;background:linear-gradient(135deg,rgba(167,139,250,.12),rgba(43,217,198,.08));
  border:1px solid rgba(167,139,250,.28)}
.kInclusiveIntro b{font:800 12.2px 'Unbounded','Inter',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.kInclusiveIntro span{font-size:11px;line-height:1.55;color:var(--dim)}
.kSectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:15px 2px 8px}
.kSectionHead b{font:800 10.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.kSectionHead span{font:600 9.8px 'Inter',sans-serif;color:var(--mute);text-align:right}
.kPresetGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.kPreset{min-height:103px;padding:12px 11px;border-radius:16px;text-align:left;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.04);border:1.5px solid rgba(253,244,227,.11);transition:.16s}
.kPreset:hover{background:rgba(255,255,255,.07);border-color:rgba(167,139,250,.5)}
.kPreset.on{background:rgba(167,139,250,.12);border-color:var(--vio);box-shadow:0 0 0 2px rgba(167,139,250,.1)}
.kPreset>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(167,139,250,.16);color:var(--vio);line-height:0}
.kPreset.on>span{background:var(--vio);color:var(--violT)}
.kPreset b{display:block;font:800 11.7px 'Unbounded','Inter',sans-serif;letter-spacing:-.02em}
.kPreset small{display:block;margin-top:4px;font:600 9.9px/1.4 'Inter',sans-serif;color:var(--dim)}
.kSettingBlock{padding:2px 0 8px;border-top:1px solid rgba(253,244,227,.08)}
.kMiniLabel{margin:10px 2px 6px;font:800 9px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.kSeg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:10px}
.kSeg button{min-width:0;min-height:55px;padding:9px 7px;border-radius:12px;cursor:pointer;color:var(--dim);
  background:rgba(255,255,255,.035);border:1px solid rgba(253,244,227,.11);transition:.15s}
.kSeg button:hover{background:rgba(255,255,255,.065)}
.kSeg button.on{background:rgba(200,241,53,.12);border-color:var(--lime);color:var(--ink)}
.kSeg button b{display:block;font:800 10.5px 'Inter',sans-serif;white-space:normal;line-height:1.2}
.kSeg button span{display:block;margin-top:3px;font:600 8.9px/1.25 'Inter',sans-serif;color:var(--mute)}
.kSeg button.on span{color:var(--dim)}
.kPlaySummary{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border-radius:14px;margin:10px 0 9px;
  background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.26)}
.kPlaySummary span{font:800 8.7px 'Inter',sans-serif;letter-spacing:.13em;color:var(--turq)}
.kPlaySummary b{font:700 10.8px/1.5 'Inter',sans-serif;color:var(--ink)}
.kPreviewProfile{margin:0 0 11px}
.kTakeTime{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;
  border-radius:99px;background:rgba(43,217,198,.1);border:1px solid rgba(43,217,198,.32);
  font:800 9.3px 'Inter',sans-serif;color:var(--turq);white-space:nowrap}

/* Larger reading mode increases the things the child actually has to read,
   rather than scaling decorative labels and shrinking the usable screen. */
.kTextLarge .kQ{font-size:24px;line-height:1.34;margin-bottom:17px}
.kTextLarge .kAns{font-size:16px;line-height:1.35;padding:17px 15px;min-height:61px}
.kTextLarge .kAk{width:30px;height:30px;font-size:12.5px}
.kTextLarge .kResQ{font-size:13px;line-height:1.6}
.kTextLarge .kPicked .kVal{font-size:14px}
.kTextLarge .kCorrect .kVal{font-size:16px;line-height:1.25}
.kTextLarge .kLearn p{font-size:14px;line-height:1.65}

/* Motion is independent from voice and game sound. Reduced motion keeps tiny
   state transitions but removes decorative animation; none removes both. */
.kMotionReduced *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
.kMotionReduced :is(.kSw i,.kPreset,.kSeg button,.kAns,.kR,.kM){transition-duration:.08s!important}
.kMotionNone *{animation:none!important;transition:none!important;scroll-behavior:auto!important}

@media(max-width:420px){
  .kPresetGrid{grid-template-columns:1fr 1fr}
  .kPreset{min-height:108px;padding:11px 10px}
  .kSeg{gap:5px}
  .kSeg button{padding:8px 5px;min-height:58px}
  .kSeg button b{font-size:9.7px}
  .kSeg button span{font-size:8.3px}
  .kSectionHead{align-items:flex-start;flex-direction:column;gap:3px}
  .kSectionHead span{text-align:left}
  .kTextLarge .kQ{font-size:22px}
}
@media(max-width:340px){
  .kPresetGrid{grid-template-columns:1fr}
  .kSeg{grid-auto-flow:row;grid-template-columns:1fr}
  .kSeg button{min-height:48px;text-align:left;padding:9px 11px}
}

/* ========================================================================
   OTIYA KIDS — INCLUSIVE PLAY / PHASE 2
   Per-child Play Profiles: same game, different support.
   ======================================================================== */
.kProfileMode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 15px}
.kProfileMode button{min-width:0;min-height:78px;padding:11px 12px;border-radius:16px;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;
  color:var(--dim);background:rgba(255,255,255,.035);border:1.5px solid rgba(253,244,227,.11);transition:.15s}
.kProfileMode button>span{grid-row:1/3;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:rgba(43,217,198,.1);color:var(--turq)}
.kProfileMode button b{font:800 10.7px/1.25 'Inter',sans-serif;color:var(--ink)}
.kProfileMode button small{font:600 9.2px/1.35 'Inter',sans-serif;color:var(--mute)}
.kProfileMode button.on{background:rgba(43,217,198,.095);border-color:var(--turq);box-shadow:0 0 0 2px rgba(43,217,198,.07)}
.kProfileMode button.on>span{background:var(--turq);color:var(--turqT)}

.kChildTabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 14px}
.kChildTabs button{min-width:0;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:14px;cursor:pointer;text-align:left;
  color:var(--dim);background:rgba(255,255,255,.03);border:1px solid rgba(253,244,227,.1);transition:.14s}
.kChildTabs button>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.kChildTabs button b{font:800 10.4px 'Inter',sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kChildTabs button small{font:600 8.6px/1.25 'Inter',sans-serif;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kChildTabs button.on{background:rgba(167,139,250,.11);border-color:var(--vio);box-shadow:0 0 0 2px rgba(167,139,250,.07)}
.kChildTabs button.on small{color:var(--dim)}

.kTailorCard{margin:0 0 4px;padding:12px 13px;border-radius:16px;background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(43,217,198,.055));
  border:1px solid rgba(167,139,250,.25)}
.kTailorWho{display:flex;align-items:center;gap:11px}
.kTailorWho>span{min-width:0;display:flex;flex-direction:column;gap:2px}
.kTailorWho small{font:800 8.1px 'Inter',sans-serif;letter-spacing:.13em;color:var(--vio)}
.kTailorWho b{font:800 14px 'Unbounded','Inter',sans-serif;color:var(--ink);letter-spacing:-.02em}
.kTailorWho em{font:600 9.4px/1.45 'Inter',sans-serif;font-style:normal;color:var(--dim)}
.kCopyProfile{width:100%;margin:5px 0 13px;padding:10px 12px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;background:rgba(255,255,255,.035);border:1px dashed rgba(43,217,198,.36);color:var(--turq);font:800 9.6px 'Inter',sans-serif}
.kCopyProfile:hover{background:rgba(43,217,198,.07)}
.kGameWide{margin-top:4px;border-top:1px solid rgba(253,244,227,.13)}

.kTailoredPreview{margin:0 0 11px;padding:11px 12px;border-radius:14px;background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.22)}
.kTpHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:8px;margin-bottom:3px;border-bottom:1px solid rgba(253,244,227,.08)}
.kTpHead span{font:800 8.5px 'Inter',sans-serif;letter-spacing:.13em;color:var(--vio)}
.kTpHead b{font:700 10.2px 'Inter',sans-serif;color:var(--ink)}
.kTpRow{display:grid;grid-template-columns:28px minmax(55px,.7fr) 1.5fr;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(253,244,227,.055)}
.kTpRow:last-child{border-bottom:0}
.kTpRow b{font:800 9.8px 'Inter',sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kTpRow>span:last-child{font:600 9px/1.35 'Inter',sans-serif;color:var(--dim)}

.kHandWay{margin:7px auto 0;max-width:300px;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.12);font:700 9px/1.35 'Inter',sans-serif;
  letter-spacing:.01em;color:currentColor;opacity:.85}

@media(max-width:420px){
  .kProfileMode{grid-template-columns:1fr}
  .kProfileMode button{min-height:66px}
  .kChildTabs{grid-template-columns:1fr}
  .kChildTabs button small{white-space:normal}
  .kTpHead{align-items:flex-start;flex-direction:column;gap:3px}
  .kTpRow{grid-template-columns:28px 66px 1fr;gap:7px}
}

/* ========================================================================
   OTIYA KIDS — ADAPTIVE CONTENT / PHASE 3
   Reviewed alternative presentation. Canonical questions/answers are untouched.
   ======================================================================== */
.kVisualCue{display:flex;align-items:center;justify-content:center;min-height:72px;margin:8px auto 10px;padding:8px 14px;
  width:max-content;max-width:100%;border-radius:18px;background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.24)}
.kVisualCue span{font:800 36px/1.15 'Inter',sans-serif;letter-spacing:.02em;text-align:center;color:var(--ink)}
.kAdaptBadges{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 7px}
.kAdaptBadges span{padding:5px 8px;border-radius:999px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.26);
  font:800 8.3px/1 'Inter',sans-serif;letter-spacing:.03em;color:var(--vio)}
.kAnsWithVisual{display:grid!important;grid-template-columns:auto 42px minmax(0,1fr);align-items:center;column-gap:9px;text-align:left!important}
.kAnsVisual{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(6,17,33,.12);
  font:700 25px/1 'Inter',sans-serif}
.kAnsText{min-width:0}
.kAnotherWay{width:100%;margin:10px 0 2px;padding:11px 13px;border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(167,139,250,.08);border:1px dashed rgba(167,139,250,.46);
  color:var(--vio);font:800 10px 'Inter',sans-serif}
.kAnotherWay:hover{background:rgba(167,139,250,.14)}
.kQAdapt{display:block;margin-top:5px;font:600 9px/1.45 'Inter',sans-serif;color:var(--turq)}
.kQAdapt b{display:inline-block;margin-right:6px;font:800 7.8px 'Inter',sans-serif;letter-spacing:.1em;color:var(--mute)}
.kTextLarge .kAnsWithVisual{grid-template-columns:auto 48px minmax(0,1fr)}
.kTextLarge .kAnsVisual{width:48px;height:48px;font-size:28px}
@media(max-width:380px){
  .kVisualCue{min-height:60px}.kVisualCue span{font-size:31px}
  .kAnsWithVisual{grid-template-columns:auto 36px minmax(0,1fr);column-gap:7px}
  .kAnsVisual{width:36px;height:36px;font-size:22px}
}

/* ========================================================================
   OTIYA KIDS — NEW WAYS TO ANSWER / PHASE 4
   Tap-first interaction cards. Matching and sequencing never require dragging.
   ======================================================================== */
.kActivityRow{background:linear-gradient(90deg,rgba(167,139,250,.055),rgba(43,217,198,.035))}
.kQType{display:block;width:max-content;margin:0 0 4px;padding:3px 6px;border-radius:999px;
  background:rgba(167,139,250,.11);border:1px solid rgba(167,139,250,.24);
  font:800 7.7px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--vio)}
.kActivityPreviewNote{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 12px;
  border-radius:13px;background:rgba(43,217,198,.07);border:1px solid rgba(43,217,198,.2)}
.kActivityPreviewNote b{font:800 9.8px 'Inter',sans-serif;color:var(--turq)}
.kActivityPreviewNote span{font:600 9px/1.35 'Inter',sans-serif;color:var(--dim);text-align:right}
.kActBadge{width:max-content;max-width:100%;margin:9px 0 8px;padding:5px 8px;border-radius:999px;
  background:rgba(167,139,250,.11);border:1px solid rgba(167,139,250,.28);
  font:800 8.3px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--vio)}
.kActivityPlay .kQ{margin-top:8px}
.kActVisual{display:inline-grid;place-items:center;min-width:42px;min-height:42px;padding:3px;border-radius:11px;
  background:rgba(6,17,33,.1);font:700 25px/1 'Inter',sans-serif;flex:none}
.kActChoices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.kActChoice{min-height:76px;padding:11px 12px;border-radius:16px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.045);border:1.5px solid rgba(253,244,227,.13);color:var(--ink);transition:.14s}
.kActChoice:hover,.kActChoice:focus-visible{background:rgba(43,217,198,.09);border-color:var(--turq)}
.kActChoice>span:last-child{font:800 12px/1.3 'Inter',sans-serif}
.kListenHero{width:100%;min-height:105px;margin:12px 0 9px;padding:16px;border-radius:19px;cursor:pointer;
  display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;
  background:linear-gradient(135deg,rgba(87,184,255,.14),rgba(167,139,250,.11));border:1.5px solid rgba(87,184,255,.35);color:var(--ink)}
.kListenHero>svg{grid-row:1/3;width:38px;height:38px;color:var(--sky)}
.kListenHero b{font:800 17px 'Unbounded','Inter',sans-serif;letter-spacing:-.03em}
.kListenHero span{font:600 9.8px/1.35 'Inter',sans-serif;color:var(--dim)}
.kListenFallback{width:100%;min-height:44px;margin:0 0 10px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px dashed rgba(253,244,227,.22);color:var(--dim);font:800 9.5px 'Inter',sans-serif}
.kListenText{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:10px 12px;border-radius:13px;
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.22)}
.kListenText small{font:800 7.8px 'Inter',sans-serif;letter-spacing:.1em;color:var(--lime)}
.kListenText b{font:800 15px 'Unbounded','Inter',sans-serif;color:var(--ink)}
.kSeqPicked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-height:68px;margin:11px 0 9px;padding:9px;
  border-radius:15px;background:rgba(43,217,198,.055);border:1px dashed rgba(43,217,198,.3)}
.kSeqPicked em{grid-column:1/-1;display:grid;place-items:center;min-height:48px;font:600 10px/1.4 'Inter',sans-serif;color:var(--mute);font-style:normal;text-align:center}
.kSeqPicked>span{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 5px;border-radius:11px;
  background:rgba(255,255,255,.05);font:800 9.4px/1.25 'Inter',sans-serif;text-align:center;color:var(--ink)}
.kSeqPicked>span>b{position:absolute;top:4px;left:5px;width:18px;height:18px;border-radius:99px;display:grid;place-items:center;background:var(--turq);color:var(--turqT);font-size:8px}
.kSeqPicked .kActVisual{min-width:34px;min-height:34px;font-size:20px}
.kSeqPool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.kSeqPool button{min-height:68px;padding:8px 6px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(253,244,227,.13);color:var(--ink)}
.kSeqPool button span:last-child{font:800 9.7px/1.25 'Inter',sans-serif;text-align:center}
.kSeqPool button.done{opacity:.32}.kSeqPool button:disabled{cursor:default}
.kSeqPool .kActVisual{min-width:36px;min-height:36px;font-size:21px}
.kActTools{display:flex;justify-content:center;gap:7px;margin:7px 0}
.kActTools button{min-height:40px;padding:8px 12px;border-radius:11px;cursor:pointer;background:rgba(255,255,255,.035);border:1px solid rgba(253,244,227,.12);color:var(--dim);font:800 9px 'Inter',sans-serif}
.kActTools button:disabled{opacity:.35;cursor:default}
.kActCheck{width:100%;min-height:49px;margin:8px 0 10px;border-radius:13px;cursor:pointer;background:var(--lime);border:0;color:var(--limeT);font:800 10.5px 'Inter',sans-serif}
.kActCheck:disabled{opacity:.32;cursor:default}
.kMatchHint{margin:8px 0 9px;font:600 9.8px/1.4 'Inter',sans-serif;color:var(--dim)}
.kMatchGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.kMatchGrid>div{display:grid;gap:7px}
.kMatchGrid button{min-height:61px;padding:8px 9px;border-radius:13px;display:flex;align-items:center;gap:7px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(253,244,227,.12);color:var(--ink)}
.kMatchGrid button span:last-child{font:800 9.7px/1.25 'Inter',sans-serif}
.kMatchGrid button.sel{background:rgba(167,139,250,.13);border-color:var(--vio);box-shadow:0 0 0 2px rgba(167,139,250,.07)}
.kMatchGrid button.done{background:rgba(200,241,53,.09);border-color:rgba(200,241,53,.35);opacity:.5}
.kMatchGrid button:disabled{cursor:default}
.kMatchGrid .kActVisual{min-width:32px;min-height:32px;font-size:19px}
.kMatchCount{margin:7px 0 11px;text-align:center;font:800 9px 'Inter',sans-serif;letter-spacing:.04em;color:var(--turq)}
.kActivityReveal .kCorrect{margin-top:9px}.kActivityReveal .kCorrect .kVal{line-height:1.45}
.kActPoints{width:max-content;margin:8px auto 0;padding:5px 9px;border-radius:999px;background:rgba(200,241,53,.09);border:1px solid rgba(200,241,53,.25);font:800 9px 'Inter',sans-serif;color:var(--lime)}
.kTextLarge .kActChoice>span:last-child{font-size:15px}.kTextLarge .kSeqPool button span:last-child,.kTextLarge .kMatchGrid button span:last-child{font-size:12px}
.kTextLarge .kListenHero b{font-size:20px}
@media(max-width:420px){
  .kActivityPreviewNote{align-items:flex-start;flex-direction:column}.kActivityPreviewNote span{text-align:left}
  .kActChoices{grid-template-columns:1fr}.kActChoice{min-height:64px}
  .kSeqPicked,.kSeqPool{grid-template-columns:1fr 1fr 1fr}
  .kMatchGrid button{min-height:58px;padding:8px 7px}.kMatchGrid button span:last-child{font-size:9px}
}
@media(max-width:340px){
  .kSeqPicked,.kSeqPool{grid-template-columns:1fr}.kMatchGrid{grid-template-columns:1fr}
  .kMatchGrid:before{content:"Choose from the first group, then the second";font:700 8.7px/1.4 'Inter',sans-serif;color:var(--mute)}
}
@media(pointer:coarse){
  .kActChoice,.kSeqPool button,.kMatchGrid button,.kListenFallback,.kActTools button,.kActCheck{min-height:48px}
}

/* =====================================================================
   Inclusive live play · Phase 5
   The live Play Profile is local to each player's browser. These classes are
   deliberately presentation-only; room state and scoring stay authoritative.
   ===================================================================== */
.liveSupportSheet{max-width:690px!important}
.liveSupportPresets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 0 15px}
.liveSupportPresets button,.liveSupportSeg button{border:1px solid rgba(253,244,227,.10);background:rgba(255,255,255,.025);color:var(--dim);border-radius:10px;padding:9px 8px;font:800 10.5px 'Inter',system-ui,sans-serif;cursor:pointer}
.liveSupportPresets button.on,.liveSupportSeg button.on{border-color:rgba(43,217,198,.52);background:rgba(43,217,198,.09);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(43,217,198,.07)}
.liveSupportSeg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px}
.liveSupportChecks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.liveSupportChecks label{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid rgba(253,244,227,.08);border-radius:11px;background:rgba(255,255,255,.02);cursor:pointer}
.liveSupportChecks input{margin-top:3px;accent-color:var(--turq)}
.liveSupportChecks span{display:block;min-width:0}
.liveSupportChecks b{display:block;font-size:11.5px;line-height:1.3}
.liveSupportChecks small{display:block;color:var(--dim);font-size:10.5px;line-height:1.45;margin-top:3px}
.liveSupportPrivacy{margin:12px 0 14px;padding:11px 12px;border-radius:11px;background:rgba(43,217,198,.055);border:1px solid rgba(43,217,198,.16);color:var(--dim);font-size:11.5px;line-height:1.55}
.liveSupportPrivacy b{color:var(--turq)}
.inclusiveLiveSetup{border-color:rgba(43,217,198,.16);background:linear-gradient(135deg,rgba(43,217,198,.035),rgba(200,241,53,.02))}
.inclusiveLiveDetail{margin-top:11px;padding-top:11px;border-top:1px solid rgba(253,244,227,.08)}
.inclusiveLiveDetail>div:first-child,.inclusiveLiveDetail>div:nth-of-type(4){margin-bottom:8px}
.inclusiveLiveDetail b{display:block;font-size:11.5px}
.inclusiveLiveDetail span{display:block;color:var(--dim);font-size:10.8px;line-height:1.45;margin-top:2px}
.inclusiveRoomBadge{display:inline-flex;align-items:center;gap:6px;margin:0 auto 11px;padding:7px 10px;border-radius:999px;background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.18);color:var(--turq);font-size:10.5px;font-weight:800}
.inclusiveHostNote{display:flex;flex-direction:column;gap:4px;margin-top:13px;padding:11px 12px;border-radius:11px;text-align:left;background:rgba(43,217,198,.055);border:1px solid rgba(43,217,198,.15)}
.inclusiveHostNote b{color:var(--turq);font-size:11.5px}
.inclusiveHostNote span{color:var(--dim);font-size:11px;line-height:1.5}
.liveSupportLobby{display:flex;align-items:center;gap:10px;text-align:left;margin:0 0 13px;padding:11px;border-radius:12px;border:1px solid rgba(253,244,227,.09);background:rgba(255,255,255,.025)}
.liveSupportLobby.featured{border-color:rgba(43,217,198,.23);background:linear-gradient(135deg,rgba(43,217,198,.07),rgba(200,241,53,.025))}
.liveSupportLobby .si{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:grid;place-items:center}
.liveSupportLobby .st{flex:1;min-width:0}
.liveSupportLobby .st b{display:block;font-size:12.5px}
.liveSupportLobby .st span{display:block;color:var(--ink);font-size:10.8px;font-weight:650;line-height:1.4;margin-top:2px}
.liveSupportLobby .st small{display:block;color:var(--dim);font-size:10px;line-height:1.4;margin-top:3px}
.liveSupportLobby .quiet{width:auto;flex:0 0 auto;margin:0;padding:8px 10px;font-size:10.5px}
.liveCalmReady{width:min(300px,88%);margin:24px auto 12px;padding:22px 18px;border-radius:18px;background:rgba(43,217,198,.06);border:1px solid rgba(43,217,198,.16);display:flex;flex-direction:column;align-items:center;gap:6px}
.liveCalmReady>span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--turq);color:var(--turqT)}
.liveCalmReady b{font-family:'Unbounded','Inter',sans-serif;font-size:18px}
.liveCalmReady small{color:var(--dim);font-size:11.5px}
.livePlayerTools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:-8px 0 14px}
.livePlayerTools button{border:1px solid rgba(253,244,227,.10);background:rgba(255,255,255,.025);color:var(--dim);border-radius:999px;padding:7px 10px;display:inline-flex;align-items:center;gap:5px;font:750 10.5px 'Inter',system-ui,sans-serif;cursor:pointer}
.liveTimerHidden{color:var(--turq)!important;border-color:rgba(43,217,198,.18)!important;background:rgba(43,217,198,.055)!important}
.liveSupportCue{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:54px;padding:8px 12px;margin:0 auto 10px;border-radius:14px;background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.13);font-size:30px;line-height:1}
.liveOptionVisual{display:inline-grid;place-items:center;min-width:28px;height:28px;margin-right:7px;border-radius:8px;background:rgba(255,255,255,.10);font-size:17px;vertical-align:middle}
body.liveSupportLarge .qstage .qtext{font-size:clamp(23px,3.2vw,33px);line-height:1.5}
body.liveSupportLarge .ans{font-size:17px;line-height:1.45;min-height:68px;padding-top:14px;padding-bottom:14px}
body.liveSupportLarge .ans .ltr{font-size:14px}
body.liveSupportReduced #app .pop,body.liveSupportReduced #app .tier,body.liveSupportReduced #app .awardcard{animation-duration:.01ms!important;animation-iteration-count:1!important}
body.liveSupportReduced #app .confetti{display:none!important}
body.liveSupportStill #app *,body.liveSupportStill #app *::before,body.liveSupportStill #app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.liveSupportStill #app .confetti{display:none!important}
@media(max-width:720px){
  .liveSupportPresets{grid-template-columns:1fr 1fr}
  .liveSupportChecks{grid-template-columns:1fr}
  .liveSupportSeg{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto}
  .liveSupportLobby{align-items:flex-start;flex-wrap:wrap}
  .liveSupportLobby .quiet{margin-left:46px}
}
@media(max-width:430px){
  .liveSupportSheet{max-width:none!important}
  .liveSupportSeg{grid-template-columns:1fr}
  .liveSupportPresets{grid-template-columns:1fr 1fr}
}

/* ===== Inclusive creator review · Phase 6 ===== */
.railInclusive{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid rgba(139,92,246,.3);background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(52,211,153,.07));color:var(--ink);padding:10px 11px;border-radius:11px;cursor:pointer;font:inherit;margin:8px 0 2px}
.railInclusive>span{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;font-size:12px;font-weight:800}.railInclusive small{font-size:10.5px;font-weight:600;line-height:1.35;color:var(--dim)}.railInclusive:hover{border-color:rgba(139,92,246,.58);transform:translateY(-1px)}
.incBuilderCard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:15px;padding:14px;border:1px solid rgba(139,92,246,.27);border-radius:14px;background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(59,211,180,.055))}.incBuilderIcon{width:38px;height:38px;border-radius:11px;background:var(--vio);color:var(--violT);display:grid;place-items:center}.incBuilderCopy{display:flex;min-width:0;flex-direction:column;gap:3px}.incBuilderCopy>b{font-size:13.5px}.incBuilderCopy>span{font-size:12.3px;line-height:1.5;color:var(--dim)}.incBuilderCopy>small{font-size:11px;color:var(--turq);font-weight:750}.incBuilderCard .btn{width:auto;white-space:nowrap;padding:10px 14px;font-size:12px}
.incAttached{display:flex;gap:10px;align-items:center;margin:4px 0 12px;padding:10px 11px;border:1px solid rgba(139,92,246,.27);background:rgba(139,92,246,.07);border-radius:11px}.incAttached>span{color:var(--vio)}.incAttached>div{display:flex;flex:1;min-width:0;flex-direction:column}.incAttached b{font-size:12.5px}.incAttached small{color:var(--dim);font-size:11px}.incAttached .quiet{flex-shrink:0}
.incReviewSheet{max-width:780px}.incResults{max-width:860px}.incSheetHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}.incLead{margin:6px 0 15px;color:var(--dim);line-height:1.62;font-size:13.2px}.incPrinciple{display:flex;flex-direction:column;gap:4px;padding:14px 15px;margin-bottom:12px;border:1px solid rgba(139,92,246,.28);border-radius:13px;background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(55,220,179,.06))}.incPrinciple b{font-size:15px}.incPrinciple span{font-size:12.7px;line-height:1.55;color:var(--dim)}
.incStats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 13px}.incStats>span{display:flex;align-items:baseline;gap:5px;border:1px solid var(--panel2);background:rgba(255,255,255,.025);border-radius:999px;padding:7px 10px;font-size:11px;color:var(--dim);font-weight:700}.incStats b{font-family:'Unbounded','Inter',sans-serif;font-size:11px;color:var(--ink)}
.incPrivacyNote{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;margin:0 0 12px;border:1px solid rgba(55,220,179,.24);background:rgba(55,220,179,.065);border-radius:12px;color:var(--dim);font-size:12.2px;line-height:1.55}.incPrivacyNote svg{color:var(--turq);margin-top:2px}.incPrivacyNote b{color:var(--ink)}.incLimitNote{font-size:11.5px;color:var(--dim);margin:-2px 0 12px}
.incLoading{text-align:center;padding:21px 4px 14px}.incLoading p{color:var(--dim);font-size:13px;line-height:1.6;max-width:520px;margin:8px auto 18px}.incLoading small{color:var(--dim);font-size:11.5px;font-weight:700}.incProgress{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden;max-width:460px;margin:0 auto 8px}.incProgress i{display:block;height:100%;background:linear-gradient(90deg,var(--vio),var(--turq));border-radius:inherit;transition:width .25s ease}.incError{padding:13px 14px;margin:12px 0 14px;border-radius:12px;background:rgba(240,80,155,.08);border:1px solid rgba(240,80,155,.26);color:var(--ink);font-size:13px;line-height:1.55}
.incReviewList{display:flex;flex-direction:column;gap:11px;margin:3px 0 15px}.incReviewCard{border:1px solid var(--panel2);border-radius:14px;padding:13px;background:rgba(255,255,255,.018)}.incNoChange{padding:11px 13px}.incReviewTop{display:flex;align-items:flex-start;gap:9px}.incQnum{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:var(--panel2);font-family:'Unbounded','Inter',sans-serif;font-size:10px;font-weight:800}.incReviewTop>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.incReviewTop b{font-size:12.6px;line-height:1.45}.incReviewTop small{font-size:11px;line-height:1.45;color:var(--dim)}.incExisting,.incOkay{flex-shrink:0;border-radius:999px;padding:5px 8px;font-size:9.8px;font-weight:800}.incExisting{background:rgba(139,92,246,.12);color:var(--vio)}.incOkay{background:rgba(65,210,160,.11);color:var(--lime)}
.incBarrierRow{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0 4px 36px}.incBarrierRow span{font-size:9.8px;font-weight:750;color:var(--dim);border:1px solid var(--panel2);border-radius:999px;padding:4px 7px}.incReviewToggle{display:flex;align-items:flex-start;gap:9px;margin:11px 0 6px;padding-top:9px;border-top:1px solid var(--panel2);cursor:pointer}.incReviewToggle input{margin-top:2px;accent-color:var(--vio)}.incReviewToggle span{display:flex;flex-direction:column;gap:1px}.incReviewToggle b{font-size:12px}.incReviewToggle small{font-size:10.7px;color:var(--dim);line-height:1.42}.incReviewText,.incReviewCue{width:100%;background:var(--bg);border:1px solid var(--panel2);color:var(--ink);border-radius:10px;padding:10px 11px;font:inherit;font-size:12.4px;line-height:1.5;resize:vertical}.incReviewCue{resize:none}.incReviewText:focus,.incReviewCue:focus,.incOptionInputs input:focus{outline:2px solid rgba(139,92,246,.34);border-color:rgba(139,92,246,.55)}
.incOptionInputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.incOptionInputs label{display:flex;align-items:center;gap:7px;border:1px solid var(--panel2);border-radius:10px;padding:7px 8px}.incOptionInputs label span{flex:1;min-width:0;font-size:10.7px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incOptionInputs input{width:62px;background:var(--bg);border:1px solid var(--panel2);color:var(--ink);border-radius:8px;padding:7px 6px;text-align:center;font-size:14px}.incOptionPreview{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.incOptionPreview>span{display:flex;align-items:center;gap:5px;border-radius:9px;background:var(--panel2);padding:6px 8px;font-size:10.7px;color:var(--dim)}.incOptionPreview i{font-style:normal;font-size:14px}.incReviewFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}.incPace,.incSecure,.incSecureNote{font-size:10.5px;font-weight:700;color:var(--dim)}.incSecure{color:var(--turq)}.incSecureNote{margin:7px 0 0 36px;color:var(--turq)}
.incApplyBar{position:sticky;bottom:-18px;display:flex;gap:9px;padding:11px 0 2px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--bg) 26%)}.incApplyBar>*{flex:1}.incNextNote{font-size:10.8px;color:var(--dim);text-align:center;margin-top:8px;line-height:1.5}
@media(max-width:700px){.incBuilderCard{grid-template-columns:auto minmax(0,1fr)}.incBuilderCard .btn{grid-column:1/-1;width:100%}.incOptionInputs{grid-template-columns:1fr}.incReviewSheet{max-width:100%}.incReviewTop{flex-wrap:wrap}.incExisting,.incOkay{margin-left:36px}.incApplyBar{bottom:-12px}.incStats>span{flex:1;justify-content:center;min-width:120px}.incReviewFoot{align-items:flex-start;flex-direction:column}.incSecureNote{margin-left:0}.incBarrierRow{margin-left:0}}
@media(prefers-reduced-motion:reduce){.railInclusive:hover{transform:none}.incProgress i{transition:none}}

/* ===== Otiya Kids productisation · Phase 7 ===== */
.kBrandLockup{display:inline-flex;align-items:flex-end;gap:8px;margin-bottom:10px}.kBrandLockup .otiyaWordmark{filter:none}.kBrandLockup.compact{gap:6px;margin-bottom:9px}.kKidsWord{display:inline-flex;gap:1px;font-family:'Unbounded','Inter',sans-serif;font-weight:900;letter-spacing:-.09em;line-height:.9;font-size:21px}.kBrandLockup.compact .kKidsWord{font-size:15px}.kKidsWord i{font-style:normal}.kKidsWord i:nth-child(1){color:var(--tang)}.kKidsWord i:nth-child(2){color:var(--sun)}.kKidsWord i:nth-child(3){color:var(--lime)}.kKidsWord i:nth-child(4){color:var(--mag)}
.kTopicIntroActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}.kTopicIntroActions button{display:flex;align-items:center;gap:9px;border:1px solid rgba(167,139,250,.22);background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(43,217,198,.05));color:var(--ink);border-radius:13px;padding:11px;text-align:left;cursor:pointer}.kTopicIntroActions button>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);color:var(--vio)}.kTopicIntroActions button>b{font-size:11.5px}.kTopicIntroActions button>small{display:block;color:var(--dim);font-size:9.8px;line-height:1.3}.kTopicIntroActions button{flex-wrap:wrap}.kTopicIntroActions button>b,.kTopicIntroActions button>small{width:calc(100% - 42px);margin-left:42px;margin-top:-31px}.kTopicIntroActions button>small{margin-top:-7px}
.kInstallBtn{border:0;border-radius:12px;padding:12px 16px;background:linear-gradient(135deg,var(--vio),var(--mag));color:white;font:800 12.5px Inter,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;box-shadow:0 10px 25px rgba(83,55,128,.16)}.kInstallBtn.installed{background:rgba(200,241,53,.16);color:var(--lime);border:1px solid rgba(200,241,53,.25);box-shadow:none}.kInstallSheet{max-width:480px;text-align:center;padding:26px}.kInstallSheet .kBrandLockup{justify-content:center}.kInstallSheet h2{font-family:'Unbounded','Inter',sans-serif;font-size:20px;margin:4px 0 13px}.kInstallSheet p{color:var(--dim);font-size:13px;line-height:1.65}.kInstallSheet .kInstallFine{font-size:11.5px}.kInstallSheet .btn{margin-top:8px}
body.kidsHowPage,body.kidsInclusivePage{background:#fff8ec;color:#1f1830}body.kidsHowPage .pattern,body.kidsInclusivePage .pattern{opacity:.14;background-image:radial-gradient(circle at 18% 18%,rgba(43,217,198,.20),transparent 25%),radial-gradient(circle at 86% 12%,rgba(240,80,155,.16),transparent 25%),radial-gradient(circle at 76% 78%,rgba(255,197,61,.18),transparent 27%)}body.kidsHowPage .wrap,body.kidsInclusivePage .wrap{max-width:1160px}.kiWrap{width:100%;max-width:1060px;margin:0 auto;padding:34px 0 54px;color:#1f1830}.kiHero{position:relative;overflow:hidden;padding:34px;border-radius:28px;background:linear-gradient(145deg,#eefcff 0%,#fff7df 48%,#fff0f7 100%);border:1px solid rgba(28,23,46,.07);box-shadow:0 20px 60px rgba(55,37,82,.09)}.kiHero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(circle,#c8f13555,transparent 68%)}.kiHero>*{position:relative;z-index:1}.kiEy,.kiSectionHead>span,.kiInstall>div>span,.kiLive>div>span,.kiCreator>div>span{font:900 10px 'Unbounded','Inter',sans-serif;letter-spacing:.12em;color:#6651a5}.kiHero h1{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(30px,5vw,54px);letter-spacing:-.055em;line-height:1.02;max-width:770px;margin:9px 0 12px;color:#21142e}.kiHero p{font-size:16px;line-height:1.7;max-width:760px;color:#5b5367}.kiHeroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.kiPrimary,.kiSecondary{border-radius:13px;padding:12px 17px;font:800 12px Inter,sans-serif;cursor:pointer}.kiPrimary{border:0;background:linear-gradient(135deg,#ff7a29,#f0509b);color:#fff}.kiSecondary{border:1px solid rgba(40,25,70,.14);background:#fff;color:#332343}.kiAvatarBand{display:flex;align-items:center;margin-top:22px}.kiAvatarBand .kAv{margin-right:-9px;border:3px solid #fff;border-radius:50%}.kiAvatarBand>span{margin-left:19px;display:flex;flex-direction:column}.kiAvatarBand b{font-size:12px}.kiAvatarBand small{font-size:10.5px;color:#6b6275}.kiSection{margin-top:18px;padding:27px;border-radius:24px;background:#fff;border:1px solid rgba(28,23,46,.07);box-shadow:0 14px 45px rgba(55,37,82,.055)}.kiSoft{background:linear-gradient(145deg,#f6fbff,#fff9f0)}.kiSectionHead{margin-bottom:16px}.kiSectionHead h2,.kiInstall h2,.kiLive h2,.kiCreator h2{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(20px,3vw,30px);letter-spacing:-.04em;line-height:1.12;margin:6px 0 7px;color:#261735}.kiSectionHead p,.kiInstall p,.kiLive p,.kiCreator p{color:#675e72;font-size:13.5px;line-height:1.65;max-width:760px}.kiSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kiStep{position:relative;padding:15px;border-radius:15px;background:#faf8fc;border:1px solid rgba(28,23,46,.07)}.kiStep i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--ki);color:#1d1325;font-style:normal;font:900 11px 'Unbounded','Inter',sans-serif;margin-bottom:12px}.kiStep b{font-size:12.5px}.kiStep p{color:#6d6477;font-size:11.3px;line-height:1.55;margin:5px 0 0}.kiDemoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.kiDemoCard{padding:15px;border:2px solid #d7e9fb;border-radius:17px;background:white;min-height:238px;display:flex;flex-direction:column;gap:9px}.kiDemoTag{font:900 8.5px 'Unbounded','Inter',sans-serif;letter-spacing:.08em;color:#397bb6}.kiDemoCard>b{font-size:13px;line-height:1.4}.kiOpts{display:grid;gap:6px;margin-top:auto}.kiOpts i{font-style:normal;border:1px solid #bedcf6;border-radius:8px;padding:7px;text-align:center;font-size:10.5px;color:#233349}.kiOpts.two{grid-template-columns:1fr 1fr}.kiDemoCard small{font-size:9.5px;color:#6a6570}.kiPlanet{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#cb4725;font-size:90px;line-height:0;background:radial-gradient(circle at 38% 38%,#ffb45c,#d74f28 62%,#7f2d28);overflow:hidden;margin:0 auto}.kiFeatureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kiFeatureGrid>div,.kiPrincipleGrid>div{padding:15px;border-radius:15px;background:#faf8fc;border:1px solid rgba(28,23,46,.07)}.kiFeatureGrid i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#ede8ff;color:#6250ae;margin-bottom:10px}.kiFeatureGrid b,.kiPrincipleGrid b{display:block;font-size:12.3px}.kiFeatureGrid p,.kiPrincipleGrid p{font-size:11.2px;line-height:1.55;color:#6b6274;margin:5px 0 0}.kiWayGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.kiWayGrid>div{padding:15px 9px;text-align:center;border-radius:14px;background:#f8fbff;border:1px solid #e6edf7}.kiWayGrid i{font-style:normal;display:block;font-size:24px;margin-bottom:8px}.kiWayGrid b{font-size:10.8px}.kiLive,.kiCreator,.kiInstall{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center}.kiLive{background:linear-gradient(135deg,#eef9ff,#f7f2ff)}.kiCreator{background:linear-gradient(135deg,#f7f3ff,#f0fff8)}.kiInstall{background:linear-gradient(135deg,#fff6df,#fff1f6)}.kiLiveCard,.kiCreatorTicks{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:white;border:1px solid rgba(28,23,46,.08)}.kiLiveCard b{font-family:'Unbounded','Inter',sans-serif;font-size:13px}.kiLiveCard span,.kiCreatorTicks span{font-size:11px;color:#655c70}.kiPrincipleGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kiTrust{margin-top:18px;padding:17px 20px;border-radius:18px;background:#eefcf8;border:1px solid #d3f1e7}.kiTrust b{font-size:12px;color:#176e60}.kiTrust p{font-size:11.5px;line-height:1.6;color:#5d6c68;margin:6px 0 0}.kiBottom{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
@media(max-width:760px){.kiWrap{padding:20px 0 44px}.kiHero,.kiSection{padding:20px;border-radius:19px}.kiSteps,.kiFeatureGrid{grid-template-columns:1fr 1fr}.kiDemoGrid{grid-template-columns:1fr}.kiDemoCard{min-height:0}.kiWayGrid{grid-template-columns:1fr 1fr}.kiLive,.kiCreator,.kiInstall{grid-template-columns:1fr}.kiPrincipleGrid{grid-template-columns:1fr 1fr}.kTopicIntroActions{grid-template-columns:1fr}.kiHero h1{font-size:31px}}
@media(max-width:430px){.kiSteps,.kiFeatureGrid,.kiPrincipleGrid{grid-template-columns:1fr}.kiWayGrid{grid-template-columns:1fr 1fr}.kiHeroBtns>*{width:100%}.kiBottom>*{width:100%}.kiAvatarBand{align-items:flex-start}.kiAvatarBand .kAv{width:44px!important;height:44px!important}.kBrandLockup:not(.compact){transform:scale(.9);transform-origin:left bottom}}
body.kidsHowPage .kiWrap .kBrandLockup,body.kidsInclusivePage .kiWrap .kBrandLockup{background:#1f0f2b;padding:9px 13px 10px;border-radius:14px;align-items:center;box-shadow:0 8px 22px rgba(31,15,43,.12)}
body.kidsHowPage .kiWrap .kBrandLockup .owOti,body.kidsInclusivePage .kiWrap .kBrandLockup .owOti{color:#fff8e9}

/* Phase 8 — Schools & education */
body.schoolsPage{background:#f7fbff;color:#19243c}body.schoolsPage .pattern{opacity:.11;background-image:radial-gradient(circle at 12% 18%,rgba(43,217,198,.18),transparent 24%),radial-gradient(circle at 88% 10%,rgba(92,108,255,.13),transparent 24%),radial-gradient(circle at 74% 78%,rgba(255,197,61,.17),transparent 25%)}body.schoolsPage .wrap{max-width:1180px}.schWrap{width:100%;max-width:1080px;margin:0 auto;padding:44px 0 58px;color:#19243c}.schHero{padding:38px;border-radius:27px;background:linear-gradient(140deg,#eafcff 0%,#f7f5ff 53%,#fff7e7 100%);border:1px solid rgba(23,41,71,.08);box-shadow:0 22px 60px rgba(34,60,95,.09)}.schEy,.schHead>span,.schPanel>span,.schPay>div>span{font:900 10px 'Unbounded','Inter',sans-serif;letter-spacing:.12em;color:#4169b0}.schHero h1{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(31px,5vw,55px);line-height:1.03;letter-spacing:-.055em;margin:10px 0 14px;color:#18213b}.schHero h1 b{color:#3563d9}.schHero>p{max-width:790px;font-size:16px;line-height:1.7;color:#57647b}.schHeroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.schPrimary,.schSecondary{border-radius:12px;padding:12px 16px;font:800 12px Inter,sans-serif;cursor:pointer}.schPrimary{border:0;background:#285bd8;color:white}.schSecondary{border:1px solid rgba(26,44,78,.15);background:white;color:#22324e}.schLicence{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 12px;align-items:center;margin-top:24px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid rgba(23,41,71,.08);font-size:11.4px}.schLicence b{color:#1f3f7a}.schLicence span{color:#66738a}.schSection{margin-top:18px;padding:29px;border-radius:23px;background:white;border:1px solid rgba(23,41,71,.08);box-shadow:0 13px 38px rgba(42,66,104,.055)}.schSoft{background:linear-gradient(140deg,#f4fbff,#faf8ff)}.schHead{margin-bottom:18px}.schHead h2,.schPanel h2,.schPay h2{font-family:'Unbounded','Inter',sans-serif;font-size:clamp(20px,3vw,31px);line-height:1.12;letter-spacing:-.04em;color:#19243c;margin:7px 0 8px}.schHead p,.schPanel p,.schPay p{color:#647187;font-size:13.5px;line-height:1.65;max-width:790px}.schFeatureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.schFeatureGrid article{padding:17px;border-radius:16px;background:#f8faff;border:1px solid #e4ebf5}.schFeatureGrid i{font-style:normal;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#edf3ff;font-size:19px;margin-bottom:10px}.schFeatureGrid b{display:block;font-size:12.5px;color:#20304e}.schFeatureGrid p{font-size:11.3px;line-height:1.55;color:#69768a;margin:5px 0 0}.schSteps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.schSteps>div{padding:16px;border-radius:15px;background:white;border:1px solid #e1e9f3}.schSteps em{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#285bd8;color:#fff;font-style:normal;font:900 11px 'Unbounded','Inter',sans-serif;margin-bottom:11px}.schSteps b{font-size:12px}.schSteps p{color:#6a778b;font-size:11px;line-height:1.55;margin:5px 0 0}.schSplit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.schPanel{padding:27px;border-radius:22px;background:#fff;border:1px solid rgba(23,41,71,.08);box-shadow:0 13px 38px rgba(42,66,104,.05)}.schPanel ul{margin:14px 0 0;padding-left:18px;color:#56677f;font-size:11.5px;line-height:1.8}.schPilot{background:linear-gradient(145deg,#fff9e9,#f9fff9)}.schPilotQs{display:grid;gap:7px;margin-top:14px}.schPilotQs b{font-size:11.6px}.schPilotQs span{font-size:11.2px;color:#657487;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.72)}.schPay{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(135deg,#eaf5ff,#f3f0ff)}.schPay>div{max-width:760px}.schPay .schPrimary{flex:0 0 auto}.schForm{display:grid;grid-template-columns:1fr 1fr;gap:12px}.schForm label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:800;color:#43536d}.schForm input,.schForm select,.schForm textarea{width:100%;padding:11px 12px;border-radius:11px;border:1px solid #d8e2ee;background:#fff;color:#1d2a43;font:500 12px Inter,sans-serif;outline:none}.schForm textarea{min-height:120px;resize:vertical}.schForm input:focus,.schForm select:focus,.schForm textarea:focus{border-color:#5b82e9;box-shadow:0 0 0 3px rgba(91,130,233,.11)}.schFull{grid-column:1/-1}.schBottom{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.prxPrice.prxNoAmount strong{font-size:18px;letter-spacing:-.3px}.prxSchool{background:linear-gradient(90deg,rgba(43,217,198,.10),rgba(93,109,255,.08));border-color:rgba(43,217,198,.25)}.prxSchool span{color:var(--turq)}.prxSchool button{background:var(--turq);color:var(--turqT)}
@media(max-width:820px){.schFeatureGrid{grid-template-columns:1fr 1fr}.schSteps{grid-template-columns:1fr 1fr}.schSplit{grid-template-columns:1fr}.schLicence{grid-template-columns:1fr}.schLicence b{margin-top:4px}.schPay{align-items:flex-start;flex-direction:column}.schForm{grid-template-columns:1fr}.schFull{grid-column:auto}}
@media(max-width:480px){.schWrap{padding:24px 0 44px}.schHero,.schSection,.schPanel{padding:20px;border-radius:19px}.schFeatureGrid,.schSteps{grid-template-columns:1fr}.schHeroBtns>*{width:100%}.schPay .schPrimary{width:100%}}

.kSchoolNote{margin:10px 0 2px;padding:10px 12px;border-radius:11px;background:rgba(43,217,198,.07);border:1px solid rgba(43,217,198,.16);font-size:10.5px;color:var(--dim);line-height:1.45}.kSchoolNote b{color:var(--ink)}.kSchoolNote button,.kInlineLink{border:0;background:transparent;color:var(--turq);font:800 10.5px Inter,sans-serif;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.kiLive .kiSecondary{margin-top:12px}

/* ---- r177: School & Education workspaces ---- */
.wsSchoolHero{
  background:
    radial-gradient(circle at 88% 12%,rgba(43,217,198,.16),transparent 30%),
    radial-gradient(circle at 12% 100%,rgba(200,241,53,.07),transparent 35%),
    linear-gradient(145deg,#211330,#140b20);
  border-color:rgba(43,217,198,.18)
}
.wsSchoolNotice{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:12px 14px;border:1px solid rgba(43,217,198,.18);border-radius:13px;background:rgba(43,217,198,.035)}
.wsSchoolNotice b{font:650 10px Unbounded,Inter,sans-serif;color:var(--turq);white-space:nowrap}.wsSchoolNotice span{color:var(--dim);font-size:9px;line-height:1.55}
.wsSchoolQuick{display:grid;gap:7px;padding-top:4px}.wsSchoolQuick button{text-align:left;justify-content:flex-start;width:100%}
.wsSchoolCreateBox{border-color:rgba(43,217,198,.18);background:linear-gradient(145deg,rgba(43,217,198,.05),rgba(255,255,255,.012))}
.wsClassGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wsClassCard{display:flex;flex-direction:column;min-height:180px;padding:14px;border:1px solid rgba(253,244,227,.09);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(43,217,198,.018))}
.wsClassTop{display:flex;gap:10px;align-items:flex-start}.wsClassTop>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(43,217,198,.08);color:var(--turq);flex:0 0 auto}.wsClassTop b{display:block;font:650 10px Unbounded,Inter,sans-serif;line-height:1.35}.wsClassTop small{display:block;margin-top:4px;color:var(--muted);font-size:8px;line-height:1.45}
.wsClassPrefs{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.wsClassPrefs span{padding:5px 7px;border:1px solid rgba(253,244,227,.08);border-radius:999px;background:rgba(0,0,0,.13);color:var(--dim);font-size:7.5px;font-weight:700}
.wsClassFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid rgba(253,244,227,.06)}.wsClassFoot small{color:var(--muted);font-size:8px}
.schoolClassSetup{border-color:rgba(43,217,198,.15)!important}.schoolClassPicker{display:grid;gap:8px}.schoolClassPicker select{width:100%}
.adminOrgSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 18px}.adminOrgSummary>div{padding:12px;border:1px solid rgba(253,244,227,.08);border-radius:11px;background:rgba(255,255,255,.018)}.adminOrgSummary small{display:block;color:var(--muted);font-size:7px;font-weight:800;letter-spacing:.7px}.adminOrgSummary b{display:block;margin-top:6px;font:700 19px Unbounded,Inter,sans-serif}
.adminSubHead{margin-top:20px!important}.adminOrgList{display:grid;gap:7px}.adminOrgRow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(120px,.8fr) auto auto;gap:10px;align-items:center;padding:10px 11px;border:1px solid rgba(253,244,227,.07);border-radius:11px;background:rgba(255,255,255,.012)}.adminOrgRow>div b,.adminOrgRow>div span{display:block;font-size:9.5px}.adminOrgRow small{display:block;color:var(--muted);font-size:7.8px;margin-top:3px}.adminOrgStatus{display:inline-flex;padding:5px 7px;border-radius:999px;font-size:7.5px;font-weight:850;text-transform:capitalize;background:rgba(255,255,255,.05);color:var(--dim)}.adminOrgStatus.active{background:rgba(43,217,198,.09);color:var(--turq)}.adminOrgStatus.pending{background:rgba(255,191,71,.09);color:#ffbf47}.adminOrgStatus.suspended,.adminOrgStatus.expired{background:rgba(217,125,142,.09);color:#d97d8e}.adminOrgReadOnly{color:var(--muted);font-size:7.8px;font-weight:700;white-space:nowrap}
@media(max-width:900px){.wsClassGrid{grid-template-columns:1fr 1fr}.adminOrgRow{grid-template-columns:minmax(0,1fr) auto}.adminOrgRow>div:nth-child(2){grid-row:2}.adminOrgRow>div:nth-child(3){grid-column:2;grid-row:1}.adminOrgRow>button,.adminOrgReadOnly{grid-column:2;grid-row:2}}
@media(max-width:650px){.wsSchoolNotice{flex-direction:column}.wsSchoolNotice b{white-space:normal}.wsClassGrid,.adminOrgSummary{grid-template-columns:1fr}.adminOrgRow{grid-template-columns:1fr}.adminOrgRow>div:nth-child(2),.adminOrgRow>div:nth-child(3),.adminOrgRow>button,.adminOrgReadOnly{grid-column:auto;grid-row:auto;justify-self:start}}

/* Phase 10 — school onboarding + procurement readiness */
.wsSchoolOnboard{margin:13px 0 16px;padding:16px;border:1px solid rgba(93,109,255,.16);border-radius:17px;background:linear-gradient(145deg,rgba(93,109,255,.055),rgba(43,217,198,.035));box-shadow:0 14px 34px rgba(18,18,30,.08)}
.wsOnboardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.wsOnboardHead>div:first-child span{font:800 8px Unbounded,Inter,sans-serif;letter-spacing:.11em;color:var(--turq)}.wsOnboardHead h3{font:750 17px Unbounded,Inter,sans-serif;letter-spacing:-.035em;margin:5px 0 4px}.wsOnboardHead p{margin:0;color:var(--dim);font-size:9.5px;line-height:1.55;max-width:650px}.wsOnboardProgress{min-width:60px;text-align:center;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid var(--line)}.wsOnboardProgress b{display:block;font:800 17px Unbounded,Inter,sans-serif}.wsOnboardProgress span{display:block;color:var(--dim);font-size:8px;margin-top:2px}.wsOnboardSteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.wsOnboardSteps button{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:12px;padding:10px;text-align:left;color:var(--ink);display:flex;gap:8px;align-items:flex-start;cursor:pointer}.wsOnboardSteps button:not(:disabled):hover{border-color:rgba(43,217,198,.32);transform:translateY(-1px)}.wsOnboardSteps button:disabled{cursor:default}.wsOnboardSteps button.done{background:rgba(43,217,198,.055);border-color:rgba(43,217,198,.16)}.wsOnboardSteps i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.17);display:grid;place-items:center;flex:0 0 auto;font-size:9px;color:var(--turq)}.wsOnboardSteps .done i{background:var(--turq);color:var(--turqT);border-color:var(--turq)}.wsOnboardSteps b{display:block;font-size:9px;line-height:1.35}.wsOnboardSteps small{display:block;color:var(--dim);font-size:7.8px;line-height:1.45;margin-top:3px}.wsOnboardActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:11px}.wsRoleGuide{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}.wsRoleGuide>div{padding:10px 11px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.02)}.wsRoleGuide b{display:block;font-size:9px;margin-bottom:3px}.wsRoleGuide span{display:block;color:var(--dim);font-size:7.8px;line-height:1.45}
.schReadyBand{background:linear-gradient(135deg,#eef9ff,#f7f4ff)}.schReadyActions{display:flex;gap:9px;flex-wrap:wrap}.schReadyPage .schHero{background:linear-gradient(140deg,#eefcff 0%,#f8f7ff 55%,#fff9ea 100%)}.schReadyHero p{max-width:850px}.schReadyGrid article{min-height:148px}.schDataMap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.schDataMap>div{padding:16px;border-radius:15px;border:1px solid #e0e8f2;background:#fff}.schDataMap b{display:block;font-size:12px;color:#20304e}.schDataMap span{display:block;font-size:11.2px;line-height:1.55;color:#586a83;margin-top:5px}.schDataMap small{display:block;font-size:10px;line-height:1.5;color:#8793a4;margin-top:8px}.schFine{margin-top:14px!important;padding-top:12px;border-top:1px solid #edf1f6;font-size:10.5px!important}.schCallout{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;background:#fff8df;border:1px solid #f1df9f}.schCallout b{font-size:11px;color:#71570b;white-space:nowrap}.schCallout span{font-size:11px;line-height:1.55;color:#655b3e}.schProcGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.schProcGrid>div{padding:15px 16px;border-radius:14px;border:1px solid #e1e8f0;background:#fff}.schProcGrid>div.ready{border-color:#cdebdc;background:#f6fffa}.schProcGrid>div.progress{border-color:#f0dfad;background:#fffdf7}.schProcGrid b{display:block;font-size:11.5px;color:#263652}.schProcGrid span{display:block;margin-top:5px;color:#6c788b;font-size:10.5px;line-height:1.55}.schReadyLinks{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.schReadyLinks a,.schReadyLinks button{border:1px solid #d9e3ef;background:#fff;color:#244379;padding:10px 12px;border-radius:10px;font:700 10.5px Inter,sans-serif;text-decoration:none;cursor:pointer}.schReadyLinks a:hover,.schReadyLinks button:hover{border-color:#80a1e9}.schProc{background:linear-gradient(140deg,#fff,#fbfcff)}
@media(max-width:900px){.wsOnboardSteps{grid-template-columns:1fr 1fr}.wsRoleGuide{grid-template-columns:1fr 1fr}.schDataMap,.schProcGrid{grid-template-columns:1fr}}
@media(max-width:560px){.wsOnboardHead{flex-direction:column}.wsOnboardProgress{min-width:0}.wsOnboardSteps,.wsRoleGuide{grid-template-columns:1fr}.wsOnboardActions>*{width:100%}.schCallout{flex-direction:column}.schCallout b{white-space:normal}.schReadyActions>*{width:100%}}

/* ============================================================
   Phase 11 — accessibility QA, school pilot & demo
   ============================================================ */
.skipLink{position:fixed;left:12px;top:8px;z-index:10000;transform:translateY(-140%);background:#fff;color:#111827;border:3px solid #111827;border-radius:8px;padding:10px 14px;font:800 13px Inter,sans-serif;text-decoration:none;transition:transform .12s}
.skipLink:focus{transform:translateY(0)}
:where(button,a[href],input,select,textarea,[role="button"],[role="switch"],[tabindex="0"]):focus-visible{outline:3px solid #2BD9C6!important;outline-offset:3px!important}
body.schoolsPage :where(button,a[href],input,select,textarea,[role="button"]):focus-visible{outline-color:#285bd8!important}
#app:focus{outline:none}
.kActChoice,.kSeqPool button,.kMatchGrid button,.kActTools button,.kActCheck,.kListenHero,.kListenFallback,.kAns,.kHear,.kSkip,.kHelp,.kAnotherWay,.livePlayerTools button{min-height:44px}
.schWrap button,.wsPage button{min-height:42px}
.wsPilotSnapshot{margin-top:15px;padding:17px;border-radius:17px;border:1px solid rgba(43,217,198,.18);background:linear-gradient(145deg,rgba(43,217,198,.055),rgba(167,139,250,.045))}.wsPilotHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.wsPilotHead span{font:800 9px Unbounded,Inter,sans-serif;letter-spacing:1.5px;color:var(--turq)}.wsPilotHead h4{font-family:Unbounded,Inter,sans-serif;font-size:13px;margin:5px 0}.wsPilotHead p{color:var(--dim);font-size:10.8px;line-height:1.55;max-width:650px}.wsPilotGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.wsPilotGrid>div{padding:12px;border-radius:12px;background:rgba(0,0,0,.14);border:1px solid rgba(253,244,227,.06)}.wsPilotGrid small{display:block;color:var(--dim);font-size:8.5px;font-weight:800;letter-spacing:.7px}.wsPilotGrid b{display:block;font-family:Unbounded,Inter,sans-serif;font-size:21px;margin:5px 0 3px}.wsPilotGrid span{font-size:9.8px;color:var(--dim);line-height:1.35}
.schDemoCanonical{max-width:680px;margin:0 auto;border:1px solid #dfe8f3;border-radius:18px;padding:22px;background:#fbfdff}.schDemoCanonical small{font:800 9px Unbounded,Inter,sans-serif;color:#4169b0;letter-spacing:1.2px}.schDemoCanonical>b{display:block;font-family:Unbounded,Inter,sans-serif;font-size:18px;line-height:1.4;color:#1f2b44;margin:12px 0 15px}.schDemoCanonical>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.schDemoCanonical span{padding:10px;border-radius:10px;background:#eef3fb;font-size:12px;font-weight:750}.schDemoDevices{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.schDemoDevices article{min-width:0;border:1px solid #dfe8f3;background:#fff;border-radius:20px;padding:16px;box-shadow:0 12px 30px rgba(31,55,88,.06)}.schDemoDevices em{font-style:normal;font:850 8.5px Unbounded,Inter,sans-serif;letter-spacing:1px;color:#4169b0}.schDemoDevices h3{font-family:Unbounded,Inter,sans-serif;font-size:12.5px;line-height:1.45;color:#1d2941;margin:12px 0}.schDemoDevices small{display:block;color:#69778c;font-size:10px;line-height:1.4;margin-top:10px}.schDemoCue{font-size:30px;margin-top:8px}.schDemoOpts{display:grid;gap:6px}.schDemoOpts.four{grid-template-columns:1fr 1fr}.schDemoOpts.two{grid-template-columns:1fr}.schDemoOpts span{display:block;border:1px solid #dae5f1;background:#f7faff;color:#22324e;border-radius:10px;padding:9px;text-align:left;font-weight:750;font-size:10.5px;cursor:default}.schDemoNote{display:flex;align-items:center;gap:12px;margin-top:13px;padding:12px 14px;border-radius:13px;background:#edf8f7;border:1px solid #d5eeea}.schDemoNote b{font-size:11px;color:#1e564f;white-space:nowrap}.schDemoNote span{font-size:10.5px;color:#55716f;line-height:1.45}.schDemoRoom{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.schDemoRoom>div{padding:16px;border-radius:15px;background:#f7f9fd;border:1px solid #e0e8f2}.schDemoRoom small{display:block;font:800 8px Unbounded,Inter,sans-serif;letter-spacing:.9px;color:#647695}.schDemoRoom b{display:block;font-size:12px;color:#21314f;margin-top:7px}.schDemoMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.schDemoMetrics>div{text-align:center;padding:18px 10px;border-radius:15px;background:#fff;border:1px solid #e1e8f2}.schDemoMetrics b{display:block;font:800 25px Unbounded,Inter,sans-serif;color:#285bd8}.schDemoMetrics span{display:block;font-size:10px;color:#68778c;margin-top:5px}
@media(max-width:760px){.wsPilotHead{flex-direction:column}.wsPilotGrid,.schDemoDevices,.schDemoRoom{grid-template-columns:1fr}.schDemoMetrics{grid-template-columns:1fr 1fr}.schDemoNote{align-items:flex-start;flex-direction:column}.schDemoNote b{white-space:normal}}
@media(max-width:420px){.wsPilotGrid,.schDemoMetrics,.schDemoCanonical>div{grid-template-columns:1fr}.schWrap{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.skipLink{transition:none}.schDemoDevices article,.wsPilotSnapshot{transition:none!important}}
@media(forced-colors:active){:where(button,a[href],input,select,textarea,[role="button"],[role="switch"]):focus-visible{outline:3px solid Highlight!important}.schDemoDevices article,.schDemoCanonical,.schDemoRoom>div,.schDemoMetrics>div,.wsPilotSnapshot{border:1px solid CanvasText}}

/* Phase 12 — school pilot operations & evidence */
.wsPilotOpsHero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:16px;margin:14px 0 12px;padding:18px;border:1px solid rgba(43,217,198,.2);background:linear-gradient(145deg,rgba(43,217,198,.075),rgba(167,139,250,.055));border-radius:18px}.wsPilotOpsHero>div:first-child>span{font:800 9px Unbounded,Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--turq)}.wsPilotOpsHero h4{font:800 18px Unbounded,Inter,sans-serif;margin:7px 0 6px}.wsPilotOpsHero p{font-size:11px;line-height:1.6;color:var(--dim);max-width:720px}.wsPilotOpsActions{display:grid;align-content:start;gap:8px}.wsPilotMeta{display:flex;gap:15px;align-items:end;margin-top:13px;flex-wrap:wrap}.wsPilotMeta b{font:800 13px Unbounded,Inter,sans-serif}.wsPilotMeta i{font-style:normal;color:var(--dim);font-size:9px;margin-left:-10px}.wsPilotProgress{height:6px;margin-top:12px;border-radius:999px;background:rgba(253,244,227,.08);overflow:hidden}.wsPilotProgress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--turq),var(--lime))}.wsPilotEvidenceGrid,.wsPilotSignals{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:11px 0}.wsPilotEvidenceGrid>div,.wsPilotSignals>div{padding:13px;border-radius:13px;border:1px solid rgba(253,244,227,.07);background:rgba(0,0,0,.13)}.wsPilotEvidenceGrid small,.wsPilotSignals small{display:block;font-size:8.5px;letter-spacing:.7px;font-weight:800;color:var(--dim)}.wsPilotEvidenceGrid b{display:block;font:800 20px Unbounded,Inter,sans-serif;margin:6px 0 3px}.wsPilotSignals b{display:block;font-size:11px;margin:6px 0 4px}.wsPilotEvidenceGrid span,.wsPilotSignals span{display:block;font-size:9.5px;line-height:1.4;color:var(--dim)}.wsPilotFindings,.wsPilotFeedbackList{margin-top:15px;padding:16px;border-radius:16px;border:1px solid rgba(253,244,227,.07);background:rgba(0,0,0,.1)}.wsPilotFindHead{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:11px}.wsPilotFindHead span{font:800 8.5px Unbounded,Inter,sans-serif;letter-spacing:1.2px;color:var(--turq)}.wsPilotFindHead h4{font:800 13px Unbounded,Inter,sans-serif;margin:5px 0 0}.wsPilotFinding{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-align:left;gap:11px;padding:11px 0;border:0;border-top:1px solid rgba(253,244,227,.06);background:none;color:inherit;cursor:pointer}.wsPilotFinding:first-of-type{border-top:0}.wsPilotFinding div{min-width:0}.wsPilotFinding b{display:block;font-size:11px}.wsPilotFinding small{display:block;font-size:9px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wsPilotFinding em{font-style:normal;font-size:9px;color:var(--dim)}.wsPriority{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:800 9px Unbounded,Inter,sans-serif;background:rgba(253,244,227,.07);border:1px solid rgba(253,244,227,.08)}.wsPriority.p4,.wsPriority.p5{background:rgba(255,76,121,.12);border-color:rgba(255,76,121,.24)}.wsPriority.p3{background:rgba(255,199,80,.1);border-color:rgba(255,199,80,.2)}.wsPilotFeedbackList>div:not(.wsPilotFindHead){padding:10px 0;border-top:1px solid rgba(253,244,227,.06);display:grid;grid-template-columns:1fr auto;gap:2px 10px}.wsPilotFeedbackList>div:not(.wsPilotFindHead) b{font-size:10.5px}.wsPilotFeedbackList>div:not(.wsPilotFindHead)>span{font-size:9px;color:var(--dim)}.wsPilotFeedbackList small{grid-column:1/-1;color:var(--dim);font-size:9px}.wsPilotFeedbackList p{grid-column:1/-1;font-size:10px;line-height:1.55;margin:3px 0 0}.wsPilotDates{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wsPilotDates label{display:block}
@media(max-width:840px){.wsPilotOpsHero{grid-template-columns:1fr}.wsPilotEvidenceGrid,.wsPilotSignals{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wsPilotEvidenceGrid,.wsPilotSignals,.wsPilotDates{grid-template-columns:1fr}.wsPilotFinding{grid-template-columns:auto 1fr}.wsPilotFinding em{grid-column:2}}

/* Phase 13 — school pilot launch operations */
.wsPilotLaunch,.wsPilotCheckpoints{margin-top:14px;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:18px}.wsPilotLaunchHead,.wsPilotFindHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.wsPilotLaunchHead span,.wsPilotNext span{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--dim)}.wsPilotLaunchHead h4,.wsPilotCheckpoints h4{margin:5px 0 4px;font-size:19px}.wsPilotLaunchHead p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}.wsPilotLaunchGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.wsPilotLaunchGrid>div{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--soft)}.wsPilotLaunchGrid small{display:block;font-size:9px;letter-spacing:.09em;font-weight:900;color:var(--dim)}.wsPilotLaunchGrid b{display:block;margin:5px 0 3px;font-size:16px}.wsPilotLaunchGrid span{display:block;font-size:11px;color:var(--dim)}.wsPilotReadiness{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.wsPilotReadiness>div{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--dim)}.wsPilotReadiness i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-style:normal;font-weight:900}.wsPilotReadiness>div.done{color:var(--ink);background:rgba(42,207,184,.08)}.wsPilotReadiness>div.done i{border-color:rgba(42,207,184,.45);background:rgba(42,207,184,.18)}.wsPilotNext{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:14px;border-radius:14px;background:var(--soft)}.wsPilotNext b{display:block;margin:4px 0;font-size:14px}.wsPilotNext p{margin:0;color:var(--dim);font-size:12px}.wsPilotCheckpoint{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line);background:transparent;border-radius:13px;padding:11px 12px;margin-top:8px;text-align:left;color:inherit}.wsPilotCheckpoint>i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-style:normal;font-weight:900}.wsPilotCheckpoint>div b{display:block;font-size:13px}.wsPilotCheckpoint>div small{display:block;margin-top:3px;color:var(--dim);font-size:11px;line-height:1.4}.wsPilotCheckpoint>em{font-style:normal;font-size:10px;font-weight:800;color:var(--dim)}.wsPilotCheckpoint.done{opacity:.78;background:rgba(42,207,184,.07)}.wsPilotCheckpoint.done>i{background:rgba(42,207,184,.18);border-color:rgba(42,207,184,.45)}@media(max-width:720px){.wsPilotLaunchGrid,.wsPilotReadiness{grid-template-columns:1fr}.wsPilotLaunchHead,.wsPilotNext{align-items:stretch;flex-direction:column}.wsPilotCheckpoint{grid-template-columns:30px minmax(0,1fr)}.wsPilotCheckpoint>em{grid-column:2}}

/* Phase 14 — pilot launch pack + rehearsal mode */
.pilotRehearsalSetup{border-color:rgba(167,139,250,.22);background:linear-gradient(145deg,rgba(167,139,250,.055),rgba(43,217,198,.025))}
.pilotPracticeSummary{color:var(--vio)!important;font-weight:850}
.pilotPracticeBadge{display:inline-flex;align-items:center;gap:6px;margin:0 auto 11px;padding:7px 10px;border-radius:999px;background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.28);color:var(--vio);font-size:10.5px;font-weight:850}
.pilotPracticeNote{display:flex;flex-direction:column;gap:4px;margin-top:13px;padding:11px 12px;border-radius:11px;text-align:left;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.22)}
.pilotPracticeNote b{color:var(--vio);font-size:11.5px}.pilotPracticeNote span{color:var(--dim);font-size:11px;line-height:1.5}
.wsPilotLaunchPack{margin-top:14px;border:1px solid rgba(167,139,250,.20);background:linear-gradient(145deg,rgba(167,139,250,.055),rgba(43,217,198,.025));border-radius:18px;padding:18px}
.wsPilotPackIntro{margin:0 0 13px;color:var(--dim);font-size:12px;line-height:1.55;max-width:820px}
.wsPilotPackGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wsPilotPackGrid>div,.wsLaunchDerived{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(0,0,0,.08);border-radius:12px;padding:10px;color:var(--dim);font-size:11px;line-height:1.35}
.wsPilotPackGrid i,.wsLaunchDerived>i{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-style:normal;font-weight:900}
.wsPilotPackGrid>div.done,.wsLaunchDerived.done{color:var(--ink);background:rgba(42,207,184,.08);border-color:rgba(42,207,184,.20)}
.wsPilotPackGrid>div.done i,.wsLaunchDerived.done>i{background:rgba(42,207,184,.18);border-color:rgba(42,207,184,.45)}
.wsPilotPackFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.wsPilotPackFoot b{color:var(--ink)}.wsPilotPackFoot>div{display:flex;gap:7px;flex-wrap:wrap}
.wsLaunchDerived{margin:12px 0}.wsLaunchDerived span{min-width:0}.wsLaunchDerived b{display:block;color:var(--ink);font-size:11.5px}.wsLaunchDerived small{display:block;margin-top:3px;color:var(--dim);font-size:10px;line-height:1.45}
@media(max-width:880px){.wsPilotPackGrid{grid-template-columns:1fr 1fr}.wsPilotPackFoot{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.wsPilotPackGrid{grid-template-columns:1fr}.wsPilotPackFoot>div{width:100%}.wsPilotPackFoot .quiet{flex:1;justify-content:center}}

/* ========================================================================
   OTIYA KIDS — r183 visual polish / discovery surface
   The play engine stays dark for strong answer contrast. The entry/setup
   experience gets a richer Otiya Kids identity and wider topic discovery.
   ======================================================================== */
body.kidsGamePage{
  background:
    radial-gradient(circle at 8% 8%,rgba(43,217,198,.12),transparent 24%),
    radial-gradient(circle at 92% 13%,rgba(240,80,155,.13),transparent 24%),
    radial-gradient(circle at 84% 88%,rgba(200,241,53,.08),transparent 24%),
    #1D0E27;
}
body.kidsGamePage .pattern{opacity:.035}
.kTopicWrap{max-width:920px;padding-top:26px}
.kDiscoveryHero{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:26px;overflow:hidden;margin-bottom:22px;padding:28px;border-radius:28px;background:linear-gradient(135deg,#2a1740 0%,#241332 46%,#1c253c 100%);border:1px solid rgba(253,244,227,.12);box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.kDiscoveryHero:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-100px;top:-120px;background:radial-gradient(circle,rgba(240,80,155,.28),rgba(240,80,155,0) 68%);pointer-events:none}
.kDiscoveryHero:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;left:-100px;bottom:-160px;background:radial-gradient(circle,rgba(43,217,198,.24),rgba(43,217,198,0) 68%);pointer-events:none}
.kDiscoveryCopy,.kDiscoveryVisual,.kDiscoveryFacts{position:relative;z-index:1}
.kDiscoveryCopy .kBrandLockup{margin-bottom:15px}
.kDiscoveryEy{font:900 9px 'Inter',sans-serif;letter-spacing:.15em;color:var(--sun);margin-bottom:9px}
.kDiscoveryHero h1{max-width:620px;margin:0 0 10px;font:800 clamp(29px,4vw,46px)/1.04 'Unbounded','Inter',sans-serif;letter-spacing:-.055em;color:var(--ink)}
.kDiscoveryHero p{max-width:620px;margin:0;color:#d7c9e2;font-size:13.5px;line-height:1.68}
.kDiscoveryPills{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.kDiscoveryPills span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#f8effd;font:750 10px 'Inter',sans-serif}
.kDiscoveryPills span:nth-child(1){color:#ffd46d}.kDiscoveryPills span:nth-child(2){color:#75e9dc}.kDiscoveryPills span:nth-child(3){color:#d8f76b}.kDiscoveryPills span:nth-child(4){color:#ff9cc8}.kDiscoveryPills span:nth-child(5){color:#c7b7ff}
.kDiscoveryActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kDiscoveryActions button{min-height:42px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:var(--ink);font:800 11px 'Inter',sans-serif;cursor:pointer}
.kDiscoveryActions button:first-child{background:var(--sun);border-color:var(--sun);color:var(--sunT)}
.kDiscoveryVisual{min-height:285px;display:grid;place-items:center;align-self:stretch}
.kDiscoveryFaces{display:flex;justify-content:center;align-items:flex-end;padding:22px 20px 18px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.kDiscoveryFaces .kAv{margin-left:-8px;border:4px solid #2b193d;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.kDiscoveryFaces .kAv:first-child{margin-left:0}.kDiscoveryFaces .kAv:nth-child(2){transform:translateY(-12px)}.kDiscoveryFaces .kAv:nth-child(4){transform:translateY(-9px)}
.kDiscoverySun{position:absolute;right:12px;top:8px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:var(--lime);color:var(--limeT);font-size:24px;transform:rotate(8deg);box-shadow:0 12px 26px rgba(200,241,53,.18)}
.kDiscoveryCard{position:absolute;padding:9px 11px;border-radius:12px;background:#fff;color:#2a1b35;box-shadow:0 12px 28px rgba(0,0,0,.20);border:1px solid rgba(42,27,53,.08);min-width:136px}
.kDiscoveryCard b{display:block;font:850 9.6px 'Inter',sans-serif}.kDiscoveryCard span{display:block;margin-top:2px;font:650 8.5px 'Inter',sans-serif;color:#766c7d}
.kDiscoveryCard.one{left:0;top:16px;transform:rotate(-4deg)}.kDiscoveryCard.two{right:2px;bottom:22px;transform:rotate(3deg)}.kDiscoveryCard.three{left:32px;bottom:7px;transform:rotate(-2deg);background:#fff7db}
.kDiscoveryFacts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:0}
.kDiscoveryFacts span{display:flex;align-items:center;gap:8px;min-height:48px;padding:9px 11px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);font:700 9.4px/1.35 'Inter',sans-serif;color:#cabbd7}
.kDiscoveryFacts b{font:900 16px 'Unbounded','Inter',sans-serif;color:var(--ink)}
.kTopicSectionHead{display:flex;justify-content:space-between;gap:22px;align-items:end;margin:4px 2px 13px}
.kTopicSectionHead>div:first-child>span{font:900 8.5px 'Inter',sans-serif;letter-spacing:.15em;color:var(--turq)}
.kTopicSectionHead h2{margin:4px 0 4px;font:800 22px/1.1 'Unbounded','Inter',sans-serif;letter-spacing:-.04em}.kTopicSectionHead p{margin:0;color:var(--dim);font-size:11.5px;line-height:1.45}
.kTopicMiniWays{text-align:right;max-width:285px;padding:9px 11px;border-radius:12px;background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.18)}
.kTopicMiniWays b,.kTopicMiniWays span{display:block}.kTopicMiniWays b{font-size:9.7px;color:var(--vio)}.kTopicMiniWays span{margin-top:2px;font-size:8.8px;line-height:1.35;color:var(--dim)}
.kTopicWrap .kTopicIntroActions{margin-bottom:12px}
.kTopicWrap .kTopicGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kTopicWrap .kTopicCard{grid-template-columns:104px minmax(0,1fr) 26px;min-height:124px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 14px 34px rgba(0,0,0,.18)}
.kTopicWrap .kTopicCard:hover{transform:translateY(-3px) scale(1.005)}
.kTopicWrap .kTopicArt{min-height:100px}
.kTopicWrap .kTopicCopy p{min-height:31px}
.kTopicGo{grid-column:1/-1}
.kSchoolNote{margin-top:13px}

/* Marketing pages: surface the core features quickly, especially for search
   snippets that may draw from visible body copy rather than the meta tag. */
.kiHeroFeatureLine{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.kiHeroFeatureLine span{display:inline-flex;align-items:center;min-height:31px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(40,25,70,.09);color:#49395a;font:800 9.5px 'Inter',sans-serif;box-shadow:0 5px 14px rgba(60,38,90,.05)}
body.kidsHowPage .kiHero,body.kidsInclusivePage .kiHero{background:linear-gradient(135deg,#eafcff 0%,#fff9dd 42%,#fff0f8 100%)}
body.kidsHowPage .kiSection,body.kidsInclusivePage .kiSection{box-shadow:0 16px 48px rgba(55,37,82,.065)}
body.kidsHowPage .kiFeatureGrid>div,body.kidsInclusivePage .kiFeatureGrid>div{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
body.kidsHowPage .kiFeatureGrid>div:hover,body.kidsInclusivePage .kiFeatureGrid>div:hover{transform:translateY(-2px);border-color:#ded5f2;box-shadow:0 12px 26px rgba(55,37,82,.08)}

@media(max-width:760px){
  .kTopicWrap{max-width:560px;padding-top:18px}
  .kDiscoveryHero{grid-template-columns:1fr;padding:20px;border-radius:22px;gap:12px}
  .kDiscoveryVisual{min-height:230px}
  .kDiscoveryFacts{grid-template-columns:1fr 1fr}
  .kTopicWrap .kTopicGrid{grid-template-columns:1fr}
  .kTopicSectionHead{align-items:flex-start;flex-direction:column;gap:8px}
  .kTopicMiniWays{text-align:left;max-width:none;width:100%}
}
@media(max-width:430px){
  .kDiscoveryHero{padding:17px}
  .kDiscoveryHero h1{font-size:29px}
  .kDiscoveryVisual{min-height:210px}
  .kDiscoveryFaces .kAv{width:46px!important;height:46px!important}
  .kDiscoveryCard{min-width:120px;padding:8px 9px}.kDiscoveryCard.three{left:8px}
  .kDiscoveryFacts{grid-template-columns:1fr 1fr}.kDiscoveryFacts span{min-height:45px;padding:8px;font-size:8.6px}.kDiscoveryFacts b{font-size:14px}
  .kTopicWrap .kTopicCard{grid-template-columns:86px minmax(0,1fr) 23px}
  .kTopicWrap .kTopicArt{min-height:84px}
}
@media(prefers-reduced-motion:reduce){.kDiscoveryFaces .kAv,.kDiscoveryCard,.kTopicWrap .kTopicCard{transform:none!important;transition:none!important}}

/* r183 continued — make every Kids setup step feel deliberately designed,
   while preserving the darker high-contrast question/answer surface. */
body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead{
  position:relative;overflow:hidden;margin-bottom:15px;padding:18px 18px 17px;border-radius:21px;
  background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(43,217,198,.075) 52%,rgba(240,80,155,.08));
  border:1px solid rgba(253,244,227,.12);box-shadow:0 15px 38px rgba(0,0,0,.17)
}
body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead:after{
  content:"";position:absolute;right:-24px;top:-34px;width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,241,53,.18),rgba(200,241,53,0) 68%);pointer-events:none
}
body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead .kBrandLockup{margin-bottom:10px}
body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead h1,
body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead h2{font-size:25px}
body.kidsGamePage .kMode{gap:9px}
body.kidsGamePage .kM{min-height:92px;padding:13px;border-radius:17px;box-shadow:0 10px 24px rgba(0,0,0,.10)}
body.kidsGamePage .kM.on{background:linear-gradient(145deg,rgba(43,217,198,.14),rgba(167,139,250,.09));border-color:rgba(43,217,198,.62);box-shadow:0 0 0 2px rgba(43,217,198,.07),0 12px 28px rgba(0,0,0,.14)}
body.kidsGamePage .kRow{padding:11px 12px;margin-bottom:9px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 10px 24px rgba(0,0,0,.10)}
body.kidsGamePage .kAdd{min-height:45px;border-radius:14px;background:linear-gradient(135deg,rgba(167,139,250,.11),rgba(240,80,155,.055))}
body.kidsGamePage .kRounds{gap:9px}
body.kidsGamePage .kR{min-height:76px;display:flex;flex-direction:column;justify-content:center;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 10px 23px rgba(0,0,0,.09)}
body.kidsGamePage .kR.on{box-shadow:0 0 0 3px rgba(200,241,53,.12),0 13px 28px rgba(0,0,0,.14)}
body.kidsGamePage .kMaths{border-radius:17px;background:linear-gradient(135deg,rgba(43,217,198,.12),rgba(79,195,247,.065))}
body.kidsGamePage .kInclusiveIntro{padding:15px 16px;border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.09)}
body.kidsGamePage .kPresetGrid{gap:9px}
body.kidsGamePage .kPreset{min-height:110px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 9px 22px rgba(0,0,0,.075)}
body.kidsGamePage .kPreset.on{background:linear-gradient(145deg,rgba(167,139,250,.16),rgba(43,217,198,.075));box-shadow:0 0 0 2px rgba(167,139,250,.09),0 12px 28px rgba(0,0,0,.11)}
body.kidsGamePage .kSettingBlock{margin:10px 0;padding:12px 13px;border:1px solid rgba(253,244,227,.095);border-radius:17px;background:rgba(255,255,255,.025)}
body.kidsGamePage .kSettingBlock>.kSectionHead:first-child{margin-top:2px}
body.kidsGamePage .kSeg button{border-radius:13px;background:rgba(255,255,255,.045)}
body.kidsGamePage .kSeg button.on{background:linear-gradient(145deg,rgba(200,241,53,.15),rgba(43,217,198,.07));box-shadow:inset 0 0 0 1px rgba(200,241,53,.06)}
body.kidsGamePage .kPlaySummary{padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(43,217,198,.10),rgba(200,241,53,.045))}
body.kidsGamePage .kQlist{gap:8px}
body.kidsGamePage .kQrow{padding:11px 12px;border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 8px 20px rgba(0,0,0,.075)}
body.kidsGamePage .kBig{min-height:50px;border-radius:14px;box-shadow:0 13px 28px rgba(0,0,0,.14)}
body.kidsGamePage .kBig2{min-height:44px;border-radius:13px}
@media(max-width:430px){
  body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead{padding:15px 14px;border-radius:18px}
  body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead h1,body.kidsGamePage .kidsWrap:not(.kTopicWrap)>.kHead h2{font-size:22px}
  body.kidsGamePage .kSettingBlock{padding:10px 9px}
}

/* r184 — scoped Kids / Schools / Pricing experience system.
   Existing Live, Solo and raffle selectors are deliberately not restyled. */
.k184,.m184,.r184Pair,.r184MiniDemo,.k184Dialog,.prxPage{--r-ink:#251332;--r-muted:#62556e;--r-line:#ded7e5;--r-paper:#fffdf8;--r-purple:#48305f;--r-lime:#c8f135;--r-turq:#2bd9c6;font-family:'Inter',sans-serif;line-height:1.5;letter-spacing:normal;text-align:left;box-sizing:border-box}
.k184 *,.m184 *,.k184Dialog *,.r184Pair *,.r184MiniDemo *{box-sizing:border-box}
.k184 button,.m184 button,.r184Pair button,.k184Dialog button,.r184MiniDemo button{font-family:'Inter',sans-serif;letter-spacing:normal;cursor:pointer;text-transform:none}
.k184 h1,.m184 h1{font:700 clamp(27px,3.4vw,42px)/1.2 'Unbounded','Inter',sans-serif;letter-spacing:-.055em;color:var(--r-ink);margin:0 0 16px;text-wrap:balance}
.k184 h2,.m184 h2{font:700 clamp(20px,2.2vw,28px)/1.3 'Unbounded','Inter',sans-serif;letter-spacing:-.04em;color:var(--r-ink);margin:0 0 12px;text-wrap:balance}
.k184 p,.m184 p,.k184Dialog p{font:400 16px/1.65 'Inter',sans-serif;color:var(--r-muted);margin:0 0 16px}
.k184 b,.m184 b,.k184Dialog b{font-weight:700}
.k184 small,.m184 small{font-family:'Inter',sans-serif}
.k184 svg,.m184 svg,.r184Pair svg,.k184Dialog svg,.r184MiniDemo svg{display:inline-block;flex-shrink:0;vertical-align:middle}
body.kidsGamePage:has(.k184){background:#fbf8f1;color:#251332}
body.kidsGamePage:has(.k184) .pattern,body.kidsGamePage:has(.k184) .bgPattern{display:none}
body.kidsGamePage:has(.k184) #app{max-width:1120px;width:100%;padding:24px;box-sizing:border-box}
.k184{width:100%;color:var(--r-ink);padding:44px 0 32px;margin:0 auto}
.k184Setup{max-width:720px;padding-top:56px}
.k184Logo{display:inline-flex;align-items:center;gap:14px;padding:10px 18px;background:#1d0e27;border-radius:16px;color:#fdf4e3;vertical-align:middle;width:max-content;max-width:100%;white-space:nowrap;box-shadow:none}
.k184Logo img{display:block;width:120px;height:46px;object-fit:contain;flex-shrink:0}
.k184Logo>span{font:700 22px/1 'Unbounded','Inter',sans-serif;letter-spacing:-.04em;border-left:1px solid #594466;padding-left:14px;color:#c8f135}
.k184Logo.small{gap:10px;padding:7px 13px;border-radius:12px}
.k184Logo.small img{width:93px;height:35px}.k184Logo.small>span{font-size:17px;padding-left:10px}
.k184Ey{display:block;color:#6e417c;font:700 11px/1.5 'Inter',sans-serif;letter-spacing:.12em;margin:22px 0 12px}
.k184Intro{position:relative;border-bottom:1px solid var(--r-line);padding:22px 0 28px}
.k184Intro h1{max-width:700px;margin-bottom:12px}.k184Intro p{max-width:580px;margin-bottom:8px}
.k184IntroLinks{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}
.k184Text{border:0;background:transparent;padding:10px 0;min-height:44px;color:#4d3465;font:600 14px/1.4 'Inter',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:6px;white-space:normal}
.k184Text:hover{text-decoration:underline;text-underline-offset:4px}.k184Text small{font-size:12px;color:var(--r-muted)}
.k184Steps{display:flex;align-items:center;gap:24px;margin:24px 0 32px;font:600 12px/1.4 'Inter',sans-serif}
.k184Steps>button,.k184Steps>span{display:flex;gap:9px;align-items:center;background:none;border:0;padding:4px 0;color:#84798a;font:inherit;min-height:36px;text-align:left;flex:0 1 auto}
.k184Steps em{display:grid;place-items:center;width:27px;height:27px;border:1px solid #d5ccdb;border-radius:50%;font-style:normal;background:white;flex:0 0 27px}
.k184Steps [aria-current=step]{color:var(--r-ink)}.k184Steps [aria-current=step] em{background:var(--r-purple);color:#fff;border-color:var(--r-purple)}.k184Steps button{color:#4d3465}
.k184SectionHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}.k184SectionHead h2{margin:0;font-size:21px}.k184SectionHead>span{font-size:13px;color:var(--r-muted)}
.k184Topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.k184TopicCard{display:flex;align-items:center;text-align:left;gap:16px;min-height:100px;background:#fff;border:1px solid var(--r-line);border-radius:19px;padding:19px 20px;color:var(--r-ink);box-shadow:0 3px 0 rgba(48,28,65,.025);transition:border-color .15s ease,background .15s ease}
.k184TopicCard>span:nth-child(2){min-width:0;flex:1}.k184TopicCard b{display:block;font:700 17px/1.3 'Inter',sans-serif}.k184TopicCard small{display:block;font:400 13px/1.45 'Inter',sans-serif;margin-top:5px;color:var(--r-muted)}
.k184TopicCard:hover{border-color:#9e89ad;background:#fffefa}.k184TopicCard:disabled{opacity:.6;cursor:default}
.k184TopicIcon{display:grid;place-items:center;border-radius:15px;flex:0 0 58px;width:58px;height:58px;color:#3c2450;background:#ece5fc}
.k184TopicCard.mint .k184TopicIcon{background:#d6f8ed;color:#075c4b}.k184TopicCard.peach .k184TopicIcon{background:#ffeadb;color:#934211}.k184TopicCard.lemon .k184TopicIcon{background:#f0f7c9;color:#536209}.k184TopicCard.pink .k184TopicIcon{background:#fce1ee;color:#912d5b}
.k184Arrow{color:#796286}.k184Comfort{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 30px;margin-top:28px;padding:20px 0;border-top:1px solid var(--r-line);font:600 13px/1.4 'Inter',sans-serif;color:#62536a}.k184Comfort span{display:flex;align-items:center;gap:8px}
.k184Foot{display:flex;justify-content:space-between;gap:20px;align-items:center}.k184Foot p,.k184Fine{font:400 13px/1.55 'Inter',sans-serif!important;color:var(--r-muted)!important;margin:14px 0!important}.k184Foot a{color:#58376f;font-weight:600;text-decoration:underline}.k184Foot p{max-width:65%}
.k184Head{margin-bottom:24px}.k184Head h1{font-size:clamp(25px,3vw,34px);margin-bottom:10px}.k184Head p{font-size:15px}
.k184Mode{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.k184Mode button{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:18px;border:1px solid var(--r-line);border-radius:16px;background:#fff;color:var(--r-ink);min-height:95px}
.k184Mode button[aria-pressed=true]{border-color:#7b608f;box-shadow:inset 0 0 0 1px #7b608f;background:#f3edf8}.k184Mode b{display:block;font-size:15px}.k184Mode small{display:block;color:var(--r-muted);font:400 12px/1.45 'Inter',sans-serif;margin-top:4px}
.k184Players{display:grid;gap:12px}.k184Player{display:grid;grid-template-columns:74px minmax(100px,1fr) 128px 24px;gap:12px 16px;position:relative;padding:20px;border:1px solid var(--r-line);border-radius:18px;background:#fff;align-items:start}
.k184Avatar{display:flex;flex-direction:column;align-items:center;grid-row:1 / 3}.k184 .kAvatarPick{padding:0;min-height:60px;border:0;background:none;display:block;width:60px}.k184 .kAv{display:block}.k184 .kAvEmpty{display:grid;color:#65477b;background:#f0eaf5;border:1px dashed #a693b6}
.k184Avatar .k184Text{font-size:11px;padding:5px 0;min-height:30px;gap:3px}.k184Name label,.k184Band legend{font:600 12px/1.5 'Inter',sans-serif;color:var(--r-muted);display:block;margin-bottom:6px}
.k184 input.kName{border:1px solid #cfc4d8;border-radius:10px;background:#fff;color:var(--r-ink);font:500 15px 'Inter',sans-serif;height:44px;box-sizing:border-box;width:100%;padding:10px;margin:0;min-width:0}
.k184Name .k184Text{min-height:32px;padding:6px 0;font-size:12px}.k184Band{border:0;padding:0;margin:0;min-width:0}.k184Band>div{display:flex;gap:5px}.k184Band button{min-height:44px;padding:8px;flex:1;border:1px solid var(--r-line);border-radius:10px;background:white;color:var(--r-ink);font:600 13px 'Inter',sans-serif}
.k184Band button[aria-pressed=true]{background:var(--r-purple);color:white;border-color:var(--r-purple)}.k184Remove{display:grid;place-items:center;border:0;background:none;color:#7b6886;padding:8px;width:36px;height:36px;margin-left:-6px}.k184Personal{grid-column:2/5;display:flex;align-items:center;gap:7px;justify-self:start;border:0;background:none;color:#654778;padding:0;min-height:30px;font:600 12px 'Inter',sans-serif}.k184Personal>span{color:#0b6556;background:#d9f4eb;border-radius:6px;padding:2px 6px;font-size:11px}
.k184Add{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;border:1px dashed #b3a3c0;border-radius:13px;color:#604477;background:transparent;min-height:46px;margin-top:12px;font:600 14px 'Inter',sans-serif}.k184Empty{text-align:center;padding:24px}
.k184Actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0}
.k184Primary,.k184Secondary{min-height:48px;display:inline-flex;justify-content:center;align-items:center;gap:12px;border-radius:12px;font:700 14px/1.4 'Inter',sans-serif;padding:13px 22px;max-width:100%;white-space:normal;text-align:center;text-decoration:none}
.k184Primary{border:1px solid #432655;background:#432655;color:#fff!important;box-shadow:0 4px 0 #d7cce2}.k184Primary:hover{background:#5a3871;border-color:#5a3871}.k184Secondary{border:1px solid #ccbdd6;background:white;color:#4b2e62!important}.k184Secondary:hover{background:#f2ecf7}.k184Primary svg,.k184Secondary svg{flex:0 0 auto}
.k184Summary{border:1px solid var(--r-line);background:#fff;border-radius:18px;overflow:hidden;margin-bottom:18px}.k184SummaryTopic{display:flex;align-items:center;gap:14px;padding:18px 20px}.k184SummaryTopic>div{min-width:0;flex:1}.k184SummaryTopic b{font-size:16px;display:block}.k184SummaryTopic small{font-size:13px;color:var(--r-muted);display:block;overflow-wrap:anywhere}.k184SummaryIcon{padding:11px;background:#f3f7d8;border-radius:13px;color:#4e5e0d}
.k184Details{border:1px solid var(--r-line);border-radius:14px;background:#fff;margin:10px 0}.k184Details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;min-height:56px;color:var(--r-ink)}.k184Details>summary::-webkit-details-marker{display:none}.k184Details>summary b{font:600 14px/1.45 'Inter',sans-serif;display:block}.k184Details>summary small{font-size:12px;color:var(--r-muted);display:block;margin-top:3px}.k184Details[open]>.k184DetailBody{border-top:1px solid #ece6f0;padding:16px 18px}.k184Details[open]>summary .k184Chevron{transform:rotate(45deg)}.k184Chevron{font-size:23px;line-height:1;flex-shrink:0;color:#735583}
.k184Summary>.k184Details{border:0;border-radius:0;border-top:1px solid #eee8f1;margin:0;background:#fcfafc}.k184Summary>.k184Details>summary{padding:12px 20px;min-height:50px}.k184Summary>.k184Details>summary small{display:inline;margin-left:8px}
.k184Essentials{background:white;border:1px solid var(--r-line);border-radius:18px;padding:4px 20px 18px}.k184Switch{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:transparent;border:0;padding:16px 0;text-align:left;color:var(--r-ink)}.k184Switch>span:first-child{min-width:0}.k184Switch b{display:block;font-size:14px}.k184Switch small{display:block;font-size:12px;line-height:1.5;color:var(--r-muted);margin-top:3px}.k184Track{width:42px;height:25px;border-radius:15px;background:#c7bfce;flex:0 0 42px;padding:3px}.k184Track i{display:block;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .12s}.k184Switch[aria-checked=true] .k184Track{background:#4c2f61}.k184Switch[aria-checked=true] .k184Track i{transform:translateX(17px)}
.k184Field{padding:0;border:0;margin:12px 0 4px;min-width:0}.k184Field legend{font-size:13px;font-weight:600;margin-bottom:9px;color:var(--r-ink)}.k184Segments{display:flex;gap:6px;flex-wrap:wrap}.k184Segments button{flex:1 1 70px;border:1px solid #d7cddd;border-radius:10px;background:#fff;min-height:42px;padding:9px 10px;color:var(--r-ink);font:600 13px 'Inter',sans-serif}.k184Segments button[aria-pressed=true]{background:#eee5f5;border-color:#795d8b;box-shadow:inset 0 0 0 1px #795d8b;color:#412b53}
.k184Presets{display:flex;flex-wrap:wrap;gap:8px}.k184Presets button{border:1px solid var(--r-line);border-radius:9px;background:#faf7fc;min-height:42px;padding:10px 13px;font:600 13px 'Inter',sans-serif;color:var(--r-ink)}.k184Presets button[aria-pressed=true]{border-color:#745282;background:#eee5f5}
.k184ChildSelector{padding:14px 0;border-bottom:1px solid #eee6f2}.k184ChildSelector>b{display:block;font-size:12px;margin-bottom:7px}.k184ChildSelector>div{display:flex;flex-wrap:wrap;gap:6px}.k184ChildSelector button{font:600 12px 'Inter',sans-serif;border:1px solid var(--r-line);border-radius:8px;background:#fff;padding:8px 12px;min-height:38px;color:var(--r-ink)}.k184ChildSelector button[aria-pressed=true]{background:#ece4f4;border-color:#9479a5}
.k184ProfileList{display:grid;gap:8px}.k184ProfileList button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--r-line);padding:12px;border-radius:12px;background:white;color:var(--r-ink)}.k184ProfileList button>span:nth-child(2){flex:1}.k184ProfileList b{display:block;font-size:14px}.k184ProfileList small{display:block;font-size:12px;color:var(--r-muted)}
.k184Dialog{background:#fffcf8!important;color:#251332!important;border:1px solid #ddcfdf;border-radius:22px!important;padding:30px!important;max-width:620px!important;max-height:calc(100dvh - 32px);overflow:auto!important;clip-path:none!important}.k184Dialog .xbtn{color:#503562;background:#f1eaf5;border-radius:50%;min-width:36px;min-height:36px}.k184DialogHead{display:flex;align-items:center;gap:14px;padding-right:30px;margin-bottom:12px}.k184DialogHead h2{font:700 24px 'Inter',sans-serif;margin:4px 0;color:#251332}.k184DialogHead .k184Ey{margin:0;font-size:10px}.k184Dialog p{font-size:14px}.k184Dialog .k184Actions{margin-bottom:6px}
.k184PreviewList{display:grid;gap:10px}.k184PreviewRow{display:flex;align-items:flex-start;gap:15px;padding:17px;background:#fff;border:1px solid var(--r-line);border-radius:14px}.k184PreviewRow>div{flex:1;min-width:0}.k184PreviewRow small{display:block;font-size:12px;color:var(--r-muted);margin-bottom:6px}.k184PreviewRow b{display:block;font-size:15px;line-height:1.5}.k184PreviewRow button{font-size:12px;padding:7px 12px;min-height:40px}.k184PreviewNum{display:grid;place-items:center;background:#ece6f3;border-radius:8px;width:28px;height:28px;flex:0 0 28px;font-size:12px;font-weight:700}
.k184 :focus-visible,.m184 :focus-visible,.r184Pair :focus-visible,.r184MiniDemo :focus-visible,.k184Dialog :focus-visible{outline:3px solid #755293;outline-offset:3px}
/* Accurate component boundaries: branded text is never a feature icon. */
.schFeatureGrid article>i{display:grid}.schFeatureGrid .bd i{display:inline!important;width:auto!important;height:auto!important;border:0!important;background:none!important;border-radius:0!important;padding:0!important;margin:0!important}
.kiPrimary,.kiSecondary,.schPrimary,.schSecondary{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;white-space:normal!important;line-height:1.4!important}.kiPrimary svg,.kiSecondary svg,.schPrimary svg,.schSecondary svg{flex-shrink:0}
/* Schools and explanatory Kids pages share a deliberate editorial system. */
.m184{color:var(--r-ink);max-width:1140px;margin:56px auto 24px;padding:0 8px}.m184Hero{padding:44px;border:1px solid #e4dae9;border-radius:28px;background:#fffcf8}.m184Hero.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}.m184Hero h1{font-size:clamp(27px,3.6vw,42px)}.m184Hero p{max-width:620px}.m184 .k184Ey{margin-top:0}.m184Hero .k184Logo{margin-bottom:24px}.m184Btns{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 12px}.m184Subnav{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 4px;border-bottom:1px solid #e4dce9}.m184Subnav a{font:600 13px 'Inter',sans-serif;color:#674279;padding:8px 0;text-decoration:none}.m184Subnav a:hover{text-decoration:underline}.m184Section{padding:42px 0;border-bottom:1px solid #e4dce9}.m184Section>header{max-width:730px;margin-bottom:24px}.m184Section>header .k184Ey{margin-top:0}.m184Section p{font-size:15px}.m184Grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.m184Card{padding:23px;background:#fff;border:1px solid #e4dce9;border-radius:18px;min-width:0}.m184Icon{display:grid;place-items:center;width:44px;height:44px;background:#ece5f4;border-radius:12px;color:#54366a;margin-bottom:18px}.m184Card h3{font:700 17px/1.35 'Inter',sans-serif;color:var(--r-ink);margin:0 0 10px}.m184Card p{font-size:14px;margin:0}.m184Card:nth-child(3n+2) .m184Icon{background:#e0f6ed;color:#176c59}.m184Card:nth-child(3n) .m184Icon{background:#fff0d7;color:#8e5b11}.m184Card .step{font:700 24px 'Inter',sans-serif;color:#6b457e;display:block;margin-bottom:18px}.m184Split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.m184Panel{background:#fff;border:1px solid #e4dce9;border-radius:20px;padding:28px}.m184Panel h2{font-size:22px}.m184Panel ul{padding-left:20px;font-size:14px;line-height:1.7;color:#62556e}.m184Panel li{margin:7px 0}.m184Callout{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#ede7f4;border:1px solid #dfd3e9;padding:30px;border-radius:20px;margin:26px 0}.m184Callout h2{font-size:23px}.m184Callout p{margin:0;max-width:750px}.m184Callout .k184Primary{flex-shrink:0}.m184Trust{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px;color:#64516c;margin-top:24px}.m184Trust span{display:flex;align-items:center;gap:7px}.m184 .k184Fine{max-width:850px}.m184Foot{display:flex;flex-wrap:wrap;gap:22px;padding:8px 0}.m184Foot a{color:#5e3974;font-size:13px;font-weight:600;text-decoration:underline}
.m184Preview{background:#281533;color:#fff9ee;border-radius:22px;padding:24px;box-shadow:0 14px 30px #321c4918}.m184PreviewTop{font-size:11px;letter-spacing:.08em;color:#cfbbdc;display:flex;justify-content:space-between;align-items:center;padding-bottom:20px}.m184PreviewTop>span{color:#c8f135;font-size:10px;border:1px solid #766637;padding:4px 7px;border-radius:6px}.m184Preview h3{font:600 22px/1.35 'Inter',sans-serif;margin:0 0 20px}.m184PreviewRow{display:flex;align-items:center;gap:12px;background:#ffffff0b;padding:14px;border-radius:12px;margin:9px 0;font-size:13px}.m184PreviewRow b{flex:1}.m184PreviewRow small{font-size:11px;color:#d1c0db}.m184PreviewRow svg{color:#c8f135}.m184Preview p{color:#d5c4de;font-size:12px;margin:16px 0 0}.m184Preview .k184Primary{background:#c8f135;color:#243000!important;box-shadow:none;border-color:#c8f135;width:100%;margin-top:15px}
.m184ContactForm label{display:block;font:600 13px/1.5 'Inter',sans-serif;color:#45314f;margin:0 0 7px}.m184FormGrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.m184ContactForm input,.m184ContactForm select,.m184ContactForm textarea{width:100%;font:400 15px 'Inter',sans-serif;min-height:45px;padding:10px 12px;border:1px solid #cdbfd6;border-radius:9px;background:white;color:#251332;margin-top:7px;box-shadow:none}.m184ContactForm textarea{min-height:100px;resize:vertical}.m184ContactForm .full{grid-column:1/-1}.m184ContactForm .k184Details{margin-top:16px}.m184ContactForm button:disabled{opacity:.65;cursor:wait}.m184Success{padding:28px 0;text-align:center}.m184Success h2{font:700 24px 'Inter',sans-serif}.m184Success .m184Icon{margin:0 auto 20px}
/* Pair on the main site: retain its dark parent brand, not a new site theme. */
.r184Pair{color:#fdf4e3;background:#2b1738;border:1px solid #5a3c65;border-radius:24px;padding:32px;margin:36px 0}.r184PairHead{max-width:760px;margin-bottom:24px}.r184PairHead>span{font:700 11px 'Inter',sans-serif;letter-spacing:.12em;color:#c8f135}.r184Pair h2{font:700 clamp(21px,2.4vw,29px)/1.35 'Unbounded','Inter',sans-serif;letter-spacing:-.04em;margin:12px 0;color:#fdf4e3}.r184PairHead p{font:400 15px/1.6 'Inter',sans-serif;color:#d0bfdc;margin:0}.r184PairGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.r184Product{padding:25px;border-radius:17px;background:#fff9ee;color:#251332;display:flex;flex-direction:column;gap:14px;min-width:0}.r184Product.school{background:#efe8f6}.r184Product .k184Ey{margin:0;font-size:10px}.r184Product h3{font:700 23px/1.2 'Inter',sans-serif;color:#251332;margin:0}.r184Product p{font:400 14px/1.6 'Inter',sans-serif;color:#63516c;margin:0}.r184Benefits{display:flex;flex-wrap:wrap;gap:8px}.r184Benefits span{border:1px solid #d7cddd;border-radius:8px;padding:7px 9px;font:500 12px 'Inter',sans-serif;color:#4c365b;background:#ffffff80}.r184Product .m184Btns{margin:auto 0 0;padding-top:8px;display:flex;gap:12px}.r184Product .k184Primary,.r184Product .k184Text{font-size:13px}.r184ActionFeatures{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 16px}.r184ActionFeatures>span{background:#ffffff08;border:1px solid #ffffff23;border-radius:7px;padding:7px 9px;font:500 12px/1.3 'Inter',sans-serif;color:#e3d3eb}
/* Interactive showcase and school demo are isolated sample state, not rooms. */
.r184MiniDemo{border:1px solid #cdbed8;border-radius:18px;background:#fffdf8;color:#251332;padding:20px;width:100%;display:flex;flex-direction:column;gap:14px}.r184MiniTop{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 11px 'Inter',sans-serif;color:#6e5879}.r184MiniDemo h4{font:700 21px/1.4 'Inter',sans-serif;margin:0;color:#251332}.r184MiniDemo p{font:400 13px/1.5 'Inter',sans-serif;margin:0;color:#665071}.r184MiniControls{display:flex;gap:7px;flex-wrap:wrap}.r184MiniControls button{border:1px solid #cbbbd6;background:white;color:#4b305d;border-radius:8px;font:600 12px 'Inter',sans-serif;min-height:38px;padding:8px 11px}.r184MiniControls button[aria-pressed=true]{background:#eee5f5;border-color:#705181}.r184MiniAnswers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.r184MiniAnswers button{min-height:48px;border:1px solid #d4c8df;background:#f6f1fa;color:#2c173d;border-radius:10px;font:600 14px 'Inter',sans-serif;padding:12px;text-align:left}.r184MiniAnswers button:disabled{opacity:.85}.r184MiniAnswers button[data-correct=true]{background:#daf3e9;border-color:#31826b;color:#174c3b}.r184MiniAnswers button[data-wrong=true]{background:#fff0dc;border-color:#b28040;color:#694811}.r184MiniStatus{font:600 13px/1.5 'Inter',sans-serif;color:#3e6454;min-height:40px}.r184MiniVisual{display:flex;gap:12px;align-items:center;background:#e9e2f5;border-radius:12px;padding:12px;font:400 13px 'Inter',sans-serif}.r184MiniVisual svg{color:#614487}.r184MiniDemo .k184Text{justify-content:flex-start;padding:5px 0;min-height:34px}.r184MiniDemo .r184MiniStatus:empty{min-height:30px}
#home-panel-kids .r184MiniDemo{max-width:460px}
.m184DemoShell{border:1px solid #dbcfe4;border-radius:24px;background:#fff;overflow:hidden;margin-top:26px}.m184DemoTabs{display:flex;flex-wrap:wrap;background:#f4eef8;border-bottom:1px solid #e4dbea;padding:12px;gap:6px}.m184DemoTabs button{flex:1 1 120px;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#6d557e;font:600 13px 'Inter',sans-serif}.m184DemoTabs button[aria-pressed=true]{background:white;border-color:#d8c9e2;color:#442753;box-shadow:0 2px 5px #341d4410}.m184DemoStage{padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:32px}.m184DemoStage h2{font-size:24px}.m184DemoStage .m184Card{margin-top:15px}.m184DemoStage .k184Ey{font-size:10px}.m184DemoCanvas{background:#f6f2fa;border:1px solid #dfd4e7;border-radius:16px;padding:24px;min-width:0}.m184DemoCanvas h3{font:700 19px 'Inter',sans-serif;color:#32203f;margin:0 0 15px}.m184DemoCanvas label{font-size:13px;font-weight:600;display:block;color:#4c375b;margin:12px 0 8px}.m184DemoCanvas select{padding:10px 12px;background:#fff;color:#32203f;border:1px solid #cdbdd7;border-radius:8px;min-height:42px;width:100%;font:500 14px 'Inter',sans-serif}.m184DemoCanvas p{font-size:13px}.m184DemoCanvas .r184MiniDemo{padding:16px}.m184DemoRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #ded3e7;font-size:13px}.m184DemoRow small{color:#725f80}.m184DemoTiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.m184DemoTiles>div{border:1px solid #e4d8eb;background:#fff;padding:18px;border-radius:12px}.m184DemoTiles b{display:block;font:700 25px 'Inter',sans-serif;color:#4b2e5e}.m184DemoTiles small{font-size:12px;color:#6e587b}.m184DemoNote{padding:14px 24px;border-top:1px solid #e1d6e9;background:#faf7fd;font:400 12px/1.6 'Inter',sans-serif;color:#6d5779}.m184DemoNav{display:flex;justify-content:space-between;gap:14px;padding:0 28px 26px}.m184DemoReview{padding:16px;border:1px solid #cbb5d8;background:#fff;border-radius:12px;margin:16px 0}.m184DemoReview b{font-size:13px;display:block;margin-bottom:8px}.m184DemoReview label{display:flex;align-items:center;gap:9px;font-size:13px}.m184DemoReview input{width:18px;height:18px;accent-color:#513466}
/* Pricing: names and availability have separate visual ranks. */
.prxPage{--r-ink:#281535;--r-muted:#68556f}.prxPage .prxHero h1{font:700 clamp(26px,3.5vw,42px)/1.25 'Unbounded','Inter',sans-serif;letter-spacing:-.05em;max-width:820px;margin:0 auto 16px}.prxPage .prxHero p{font:400 16px/1.65 'Inter',sans-serif;max-width:730px;margin:auto}.prxPage .prxCard h2{font:700 23px/1.3 'Inter',sans-serif;margin:15px 0 6px;letter-spacing:-.025em}.prxPage .prxAvailability{font:500 13px/1.5 'Inter',sans-serif;color:#785e86;margin:0 0 16px;min-height:20px}.prxPage .prxTag{font:700 10px 'Inter',sans-serif;letter-spacing:.09em}.prxPage .prxWho{font:400 13px/1.65 'Inter',sans-serif;min-height:68px;margin:12px 0}.prxPage .prxCapacity{font:600 12px/1.5 'Inter',sans-serif;min-height:48px;display:flex;gap:8px;align-items:center}.prxPage .prxCard ul{margin:10px 0 25px}.prxPage .prxCard li{font:400 13px/1.55 'Inter',sans-serif}.prxPage .prxCta{font:700 14px 'Inter',sans-serif;min-height:46px}.prxPage .prxCards{align-items:stretch}.prxPage .prxNotice{font-size:14px;line-height:1.6}.prxPage .prxCompare>p{font-size:14px;line-height:1.6}.r184PricingOffers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:32px 0}.r184Offer{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border:1px solid #decfe7;background:#fcf9ff;border-radius:17px;padding:26px;min-width:0}.r184Offer>span{font:700 10px 'Inter',sans-serif;letter-spacing:.1em;color:#765489}.r184Offer h2{font:700 21px/1.35 'Inter',sans-serif;color:#2f183e;letter-spacing:-.02em;margin:0}.r184Offer p{font:400 14px/1.6 'Inter',sans-serif;color:#6a5675;margin:0 0 8px;flex:1}.r184Offer button{font:700 13px 'Inter',sans-serif;min-height:44px;display:flex;align-items:center;gap:12px;border:1px solid #ccbad8;border-radius:10px;background:white;padding:11px 15px;color:#4e2f66}.r184Offer button svg{display:inline-block;flex-shrink:0}
@media(max-width:900px){.m184Hero.split{grid-template-columns:1fr}.m184Preview{max-width:600px}.m184Grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m184Hero{padding:30px}.m184DemoStage{gap:22px;padding:24px;grid-template-columns:1fr}.r184Pair{padding:26px}.r184PairGrid{gap:14px}}
@media(max-width:600px){body.kidsGamePage:has(.k184) #app{padding:16px}.k184{padding-top:48px}.k184Setup{padding-top:55px}.k184Intro{padding-top:4px}.k184Intro h1{font-size:27px}.k184Topics{grid-template-columns:1fr;gap:10px}.k184TopicCard{min-height:83px;padding:14px 16px;gap:13px}.k184TopicIcon{width:48px;height:48px;flex-basis:48px}.k184TopicCard b{font-size:16px}.k184TopicCard small{font-size:12px}.k184SectionHead{align-items:flex-start;flex-direction:column;gap:6px}.k184Steps{gap:12px;font-size:11px;margin:23px 0}.k184Steps>span,.k184Steps>button{gap:6px}.k184Steps em{width:24px;height:24px;flex-basis:24px}.k184Logo img{width:100px;height:38px}.k184Logo>span{font-size:19px}.k184Mode{gap:9px}.k184Mode button{padding:13px;gap:9px;flex-direction:column;min-height:100px}.k184Mode small{font-size:11px}.k184Player{grid-template-columns:62px minmax(0,1fr) 28px;padding:15px;gap:10px 12px}.k184Avatar{grid-row:1/4}.k184Band{grid-column:2;display:flex;align-items:center;gap:12px}.k184Band legend{float:left;margin:0;align-self:center}.k184Band>div{min-width:128px}.k184Remove{grid-column:3;grid-row:1;margin:0;width:30px}.k184Personal{grid-column:2/4}.k184Name .k184Text{font-size:11px}.k184Actions{gap:10px;margin:22px 0}.k184Actions>.k184Primary{flex:1 1 auto}.k184Actions>.k184Secondary{flex:1 1 auto}.k184Foot{display:block}.k184Foot p{max-width:100%}.k184Foot .k184Text{padding-top:0}.k184Comfort{gap:10px 18px;font-size:12px}.k184Essentials{padding:3px 15px 15px}.k184SummaryTopic{padding:15px}.k184Summary>.k184Details>summary{padding:12px 15px}.k184Details>summary{padding:14px}.k184Details[open]>.k184DetailBody{padding:14px}.k184Dialog{padding:24px 20px!important}.k184PreviewRow{padding:13px;gap:10px;flex-wrap:wrap}.k184PreviewRow>div{flex-basis:calc(100% - 43px)}.k184PreviewRow button{margin-left:38px}.m184{margin-top:68px;padding:0}.m184Hero{padding:24px 21px;border-radius:20px}.m184Hero h1{font-size:27px}.m184Hero p{font-size:15px}.m184Grid,.m184Split,.r184PairGrid,.r184PricingOffers{grid-template-columns:1fr}.m184Section{padding:30px 0}.m184Section>header{padding:0 4px}.m184Card{padding:21px}.m184Panel{padding:24px}.m184Callout{padding:23px;display:block}.m184Callout .k184Primary{margin-top:18px}.m184FormGrid{grid-template-columns:1fr}.m184FormGrid .full{grid-column:auto}.m184Btns{gap:9px}.m184Btns>.k184Primary,.m184Btns>.k184Secondary{width:100%}.m184Trust{font-size:12px;gap:12px}.r184Pair{padding:22px 18px;border-radius:20px}.r184Product{padding:21px}.r184Pair h2{font-size:22px}.m184DemoStage{padding:21px 16px}.m184DemoCanvas{padding:15px}.m184DemoTabs{padding:8px;gap:5px}.m184DemoTabs button{flex-basis:40%;font-size:12px}.m184DemoNav{padding:0 16px 20px}.m184DemoTiles>div{padding:14px}.r184MiniDemo{padding:15px}.r184MiniDemo h4{font-size:19px}.r184MiniAnswers button{font-size:13px;padding:10px}.r184Offer{padding:23px}.prxPage .prxWho{min-height:0}.prxPage .prxAvailability{min-height:0}}
@media(prefers-reduced-motion:reduce){.k184 *,.m184 *,.r184MiniDemo *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.k184 button,.m184 button,.k184Details,.k184Summary{border:1px solid ButtonText}.k184 [aria-pressed=true],.k184 [aria-checked=true]{outline:2px solid Highlight}.k184Track{border:1px solid ButtonText}.k184Track i{background:ButtonText}}

.m184Success h3{font:700 22px/1.35 Inter,sans-serif;color:#251332;margin:20px 0 14px}.m184Success:focus{outline:none}

/* Marketing/setup pages use document scrolling, not a viewport-height body
   scroller. This removes the nested scroll origin behind clipped page captures
   and keeps window-based focus/back-to-top behaviour coherent. Game routes
   retain their existing sizing rules. */
body.kidsGamePage:has(.k184){height:auto;min-height:100vh}
body.kidsHowPage .pattern,body.kidsInclusivePage .pattern,body.schoolsPage .pattern,body:has(.prxPage) .pattern{inset:0;animation:none}

/* Setup has its own read-aloud / sound preferences; global gameplay controls
   remain unchanged once a game starts. */
body.kidsGamePage:has(.k184) .sndbtn,body.kidsGamePage:has(.k184) .musbtn{display:none!important}
body.kidsGamePage:has(.k184) .beta{left:126px!important;top:20px!important}
@media(max-width:420px){body.kidsGamePage:has(.k184) .beta{left:108px!important;font-size:8px}}

.prxPage .prxAvailability{color:#c7b5d4}
body:has(.prxPage) .pattern{opacity:.025}
body.homePage .homeAuroraStable{contain:paint;width:min(860px,100vw)!important}
/* The interactive Kids preview must grow with real controls and enlarged text.
   Other product-preview panels keep their existing layout. */

/* A decorative :before extends 80px outside this panel. `hidden` created a
   horizontally scrollable ancestor that focus could shift. `clip` contains
   that decoration without a programmatically scrollable viewport. */
.homeShowcaseV7 .v7Shell{overflow:clip!important}
body.homePage #app{overflow-x:clip!important;overflow-y:visible!important}
body.homePage:has(#home-panel-kids.on) #fabJoin{display:none!important}
.k184 button:disabled,.m184 button:disabled,.k184Dialog button:disabled{cursor:not-allowed;opacity:.55}

/* r185 — warm/playful Kids. All gameplay styling is scoped to the Kids wrapper. */
body.kidsGamePage{background:#fffaf0!important}
body.kidsGamePage .profbtn.signed,body.kidsHowPage .profbtn.signed,body.kidsInclusivePage .profbtn.signed,body.schoolsPage .profbtn.signed{background:#fff4ea;border:1.5px solid #e5a778;color:#402448;box-shadow:0 3px 12px #39253b12}
body.kidsGamePage .profbtn .plab,body.kidsGamePage .profbtn .pcar,body.kidsHowPage .profbtn .plab,body.kidsHowPage .profbtn .pcar,body.kidsInclusivePage .profbtn .plab,body.kidsInclusivePage .profbtn .pcar,body.schoolsPage .profbtn .plab,body.schoolsPage .profbtn .pcar{color:#402448;opacity:1}
body.kidsGamePage .sndbtn,body.kidsGamePage .musbtn{display:none!important}
body.kidsPlaying185 .pattern{display:none}body.kidsPlaying185 .beta{display:none}
body.kidsPlaying185 #app{max-width:1080px!important;width:100%;padding:82px 22px 36px;overflow:visible}
.k185Intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:35px;align-items:center;padding:28px 34px;border-radius:28px;background:linear-gradient(125deg,#fff3d9 0%,#fff7ed 47%,#f4e7fd 100%);border:1px solid #efddc4;position:relative}
.k185Intro .k184Logo{margin-bottom:17px;transform:rotate(-1deg)}
.k185Intro h1{font-size:clamp(28px,3.1vw,38px);letter-spacing:-.045em;line-height:1.22;margin-bottom:14px}
.k185Intro h1>span{color:#795095}.k185Intro p{max-width:430px}.k185Intro .k184Ey{color:#775118;font-size:10px;margin-bottom:11px}
.k185Wonder{border-radius:24px;background:#fffdf4;box-shadow:0 9px 0 #dfcfee8a;padding:20px 15px 15px;position:relative;min-width:0;transform:rotate(1deg)}
.k185WonderLabel{display:block;text-align:center;font-size:12px;color:#785282;font-weight:700}.k185Orbit{height:165px;position:relative;max-width:310px;margin:auto}
.k185World{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;border:3px solid #fff;box-shadow:0 7px 15px #41284515;border-radius:22px;color:#281637;padding:14px;width:102px;min-height:101px}
.k185World b{font:700 12px 'Inter',sans-serif}.worldA{left:7px;top:25px;background:#c8ef99;transform:rotate(-9deg)}.worldB{right:4px;top:13px;background:#ffd999;transform:rotate(9deg)}.worldC{left:39%;top:64px;background:#bea9eb;transform:rotate(-2deg)}
.k185Star{position:absolute;left:43%;top:0;color:#c85589;font-style:normal;font-size:24px}.k185Dot{position:absolute;left:12px;bottom:3px;background:#e385b2;border-radius:50%;height:12px;width:12px}
.k185Friends{display:flex;align-items:center;justify-content:center;padding-top:8px;isolation:isolate}.k185Friends>.kAv{margin-left:-10px;border:3px solid white!important;box-sizing:content-box}.k185Friends>.kAv:first-child{margin-left:0}.k185Friends>span:last-child{font:400 11px/1.55 'Inter',sans-serif;margin-left:13px;color:#775681}.k185Friends b{color:#412850}
.k184Topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.k184TopicCard{--topic:#f6dcab;border:1px solid color-mix(in srgb,var(--topic),#5e3e52 12%);background:linear-gradient(115deg,var(--topic),#fffcf7);border-radius:20px;box-shadow:0 4px 0 color-mix(in srgb,var(--topic),#795374 16%);min-height:98px;transition:transform .15s,box-shadow .15s}
.k184TopicCard.lime{--topic:#e1efb7}.k184TopicCard.turq{--topic:#cbf1e7}.k184TopicCard.vio{--topic:#e2d6f6}.k184TopicCard.sun{--topic:#ffe3ac}.k184TopicCard.mag{--topic:#f7d3e1}
.k184TopicCard:hover{transform:translateY(-2px);box-shadow:0 6px 0 color-mix(in srgb,var(--topic),#795374 16%)}.k184TopicCard:active{transform:translateY(2px);box-shadow:0 1px 0 #dbcedf}.k184TopicIcon{background:#ffffffb8;border-radius:17px;box-shadow:0 3px 0 #67468412;color:#5b376f}.k184TopicCard small{color:#625267}.k184TopicCard b{font-size:17px}
.k184Steps [aria-current=step] em{background:#745091;box-shadow:0 3px 0 #503169;color:#fff}.k184Player{border-radius:23px;background:linear-gradient(110deg,#fffdf9,#f5efff);box-shadow:0 4px 0 #e8def0}.k184Summary{background:#fff7df;border-color:#edd5a0;box-shadow:0 4px 0 #f0e1bc}.k184SummaryIcon{background:#f9d981;color:#67491c}.k184Setup .k184Head h1{color:#59376d}.k184Primary{background:linear-gradient(105deg,#ee6d36,#dd4489);box-shadow:0 4px 0 #b84d6e;color:#fff;border:0}.k184Primary:hover{filter:brightness(1.04)}
.k184Foot{align-items:center;gap:20px}.k184Foot>p{flex:1}.k185InstallCard{display:flex;align-items:center;gap:13px;flex:1;border:1px solid #d3c4e5;background:#f2eafb;border-radius:18px;padding:16px;color:#4d3064;text-align:left;max-width:470px;min-width:0;cursor:pointer;margin:6px 0}.k185InstallCard>span:nth-child(2),.k185InstallCard>div{flex:1;min-width:0}.k185InstallCard b{display:block;font:700 14px/1.4 'Inter',sans-serif}.k185InstallCard small{display:block;font:400 12px/1.6 'Inter',sans-serif;color:#695773;margin-top:4px}.k185InstallIcon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:42px;background:#e0d0f2;border-radius:12px}
.k185Music legend>span{font-size:11px;font-weight:500;color:#796782}.k185Music .k184Segments{flex-wrap:wrap}.k185Music .k184Segments>button{flex:1 1 95px}.k185MusicNote{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;padding-top:10px}.k185MusicNote p{font-size:12px;margin:0;flex:1}.k185MusicNote button{font-size:12px;min-height:30px;padding:0;flex-shrink:0}
.k185PlayFrame{width:100%;max-width:820px;margin:auto;font-family:'Inter',sans-serif;color:#30203b;--r-ink:#30203b}.k185PlayBrand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px}.k185PlayBrand .k184Logo{transform:rotate(-1deg)}.k185TopicPill{display:flex;gap:8px;align-items:center;padding:10px 13px;background:#eae0fa;border-radius:99px;font:700 12px/1.4 'Inter',sans-serif;color:#5b3976;max-width:100%}.k185MusicToggle{display:flex;gap:8px;align-items:center;border:1px solid #cdbee0;border-radius:99px;background:#fff;color:#614474;padding:10px 12px;font:600 12px 'Inter',sans-serif;min-height:42px;margin-left:auto}.k185MusicToggle[aria-pressed=true]{background:#ecf7d8;border-color:#b4d888;color:#425a23}
.k185GameCard{border:2px solid #e1d3ec;background:#fff;border-radius:27px;padding:25px;box-shadow:0 9px 0 #ede4f3,0 12px 38px #543f6710;overflow:hidden}
.k185GameCard .kidsWrap,.k185GameCard .kPlay{max-width:none;width:100%;margin:0;padding:0;background:transparent;box-shadow:none;border:0;color:#30203b;font-family:'Inter',sans-serif;--ink:#30203b;--dim:#62536d;--mute:#75667f;--panel:#f5effb;--panel2:#ddd0e7}
.k185GameCard .kTop2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 15px;border-bottom:1px solid #efe6f6}.k185GameCard .kWho{flex:1;min-width:100px}.k185GameCard .kWho b{color:#473052;font-size:15px}.k185GameCard .kWho>span{color:#72617d}.k185GameCard .kClock{color:#7850a0}.k185GameCard .kTakeTime{background:#e8f4d3;color:#435929;border:1px solid #d5e8b5}.k185GameCard .kSkip{color:#675074;background:#f2ecf7;border:1px solid #e1d3eb;padding:9px 12px;min-height:40px;border-radius:12px;letter-spacing:0;text-transform:none}
.k185GameCard .kQ{font:700 clamp(22px,3.1vw,31px)/1.4 'Inter',sans-serif;color:#30203b;text-align:center;letter-spacing:-.025em;margin:24px auto;max-width:700px}.k185GameCard .kAnsWrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.k185GameCard .kAns{--answer:#fff0d8;display:flex;align-items:center;text-align:left;background:var(--answer)!important;border:2px solid color-mix(in srgb,var(--answer),#846085 23%);box-shadow:0 4px 0 color-mix(in srgb,var(--answer),#846085 26%);border-radius:18px;padding:17px 15px;min-height:91px;color:#38233f;font:700 18px/1.4 'Inter',sans-serif;clip-path:none!important;transition:transform .12s;gap:12px;min-width:0}
.k185GameCard .kAns:nth-child(4n+1){--answer:#ffdeb8}.k185GameCard .kAns:nth-child(4n+2){--answer:#ccece6}.k185GameCard .kAns:nth-child(4n+3){--answer:#e4d8f7}.k185GameCard .kAns:nth-child(4n+4){--answer:#f8d8e5}.k185GameCard .kAns:hover{transform:translateY(-2px)}.k185GameCard .kAns:active{transform:translateY(2px)}.k185GameCard .kAk{background:#ffffffb5;color:#4d335b;flex:0 0 30px;width:30px;height:30px;font-size:14px;border-radius:10px}.k185GameCard .kAnsText{min-width:0;overflow-wrap:anywhere}.k185GameCard .kHear,.k185GameCard .kHelp,.k185GameCard .kAnotherWay{color:#60447c;border:1px solid #dcccdf;background:#f5effc;border-radius:99px;padding:10px 13px;font:600 12px/1.5 'Inter',sans-serif;min-height:40px}.k185GameCard .kLearn{background:#f8f1e3;color:#4e3c31;border:1px solid #eddbb8}.k185GameCard .kLearn p{color:#55463c;font-size:15px;line-height:1.65}.k185GameCard .kRes h2{color:#67417e!important;font:800 clamp(23px,3vw,32px)/1.3 'Inter',sans-serif}.k185GameCard .kResQ{color:#6e5c79}.k185GameCard .kFam{background:#faf6fe;color:#654c78;border-top:1px solid #e8ddee;padding:16px;border-radius:15px}.k185GameCard .kFamL span,.k185GameCard .kFamL b{color:#624973}.k185GameCard .kHand{position:relative;inset:auto;min-height:0;padding:28px 15px;border-radius:22px}.k185GameCard .kHandIn{padding:12px 0}.k185GameCard .kHand h2{font-family:'Inter',sans-serif;font-weight:800}.k185GameCard .kHandBtn{border-radius:17px}.k185GameCard .kRes .kBig{border-radius:16px;clip-path:none;font-family:'Inter',sans-serif;letter-spacing:0}.k185Encourage{text-align:center;color:#7a6787;font:400 12px/1.6 'Inter',sans-serif;margin:19px 0}.k185GameCard .kPicked{color:#685371;background:#f5eef8}.k185GameCard .kTextLarge .kQ{font-size:34px}.k185GameCard .kTextLarge .kAns{font-size:23px}
.k185GameCard .kActInstructions,.k185GameCard .kActStatus{color:#604b70}.k185GameCard .kActPanel{background:#faf6fe;border-color:#e4d8ee}.k185GameCard .kDots i{background:#e0d3e9}.k185GameCard .kDots i.on{background:#805098}
/* Homepage sample is a contained miniature of the same playful card, not a full-width game. */
.r184MiniControls button[aria-pressed=true]{background:#795292;color:#fff}.r184MiniAnswers button{border-radius:13px;border:1px solid #d1bede;box-shadow:0 3px 0 #e5d7ef;min-height:48px}.r184MiniAnswers button:nth-child(4n+1){background:#ffe5bd}.r184MiniAnswers button:nth-child(4n+2){background:#cfefe8}.r184MiniAnswers button:nth-child(4n+3){background:#e4d6f7}.r184MiniAnswers button:nth-child(4n+4){background:#f8dce8}.r184MiniAnswers button[data-correct=true]{background:#d9f0b0;border:2px solid #648928}.r184MiniAnswers button[data-wrong=true]{background:#f6dacd}.r184MiniDemo h4{font-family:'Inter',sans-serif;font-size:22px;letter-spacing:-.02em}.heroBeta{margin-top:25px!important}
.uc185School{display:inline-flex;align-items:center;gap:9px;color:var(--lime);font:700 13px/1.5 'Inter',sans-serif;text-decoration:none;margin-top:16px;min-height:42px}.uc185School svg{display:inline;flex-shrink:0}.uc185School:hover{text-decoration:underline}
/* More separation between plan cards and the background, and a genuine Your plan marker. */
.prxPage .prxCard{background:linear-gradient(165deg,#392247,#281634);border:1px solid #765b86;border-radius:22px;box-shadow:0 10px 30px #10051e2b}.prxPage .prxCard.current{background:linear-gradient(160deg,#39482c,#263428);border:2px solid #c8f135;box-shadow:0 0 0 4px #c8f11110}.prxPage .prxCard.current .prxTag{display:inline-flex;background:#c8f135;color:#27320d;border-radius:99px;padding:7px 11px;letter-spacing:.05em}.prxPage .prxCard.current .prxAvailability{color:#d0dec3}.prxPage .prxCard.current .prxCta{background:#d5ec99;color:#374923;opacity:1}.prxPage .prxCta:not(:disabled){background:#c8f135;color:#2b350d;border-color:#c8f135}.prxPage .prxCapacity{color:#eee0f6}
.p185Compare{border:1px solid #745486;border-radius:18px;background:#382246;margin:25px 0;overflow:hidden}.p185Compare>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 25px}.p185Compare>summary::-webkit-details-marker{display:none}.p185Compare>summary b{display:block;color:#f6edff;font:700 20px/1.5 'Inter',sans-serif}.p185Compare>summary small{display:block;color:#c6b0d5;font:400 13px/1.6 'Inter',sans-serif;margin-top:3px}.p185Plus{display:grid;place-items:center;background:#573c66;border-radius:50%;width:38px;height:38px;flex:0 0 38px;font:400 25px 'Inter',sans-serif;color:#e9d9f5}.p185Compare[open] .p185Plus{transform:rotate(45deg)}.p185CompareBody{padding:0 22px 20px}.p185Compare .prxTableWrap{margin-top:0}
.r184PricingOffers .r184Offer{border:1px solid #e2c2a6;position:relative;overflow:hidden;border-radius:22px;padding:27px;background:linear-gradient(125deg,#ffdfb1,#fff1d9)}.r184PricingOffers .r184Offer:nth-child(2){background:linear-gradient(125deg,#d6c4f1,#eee5fb);border-color:#c3a9e3}.r184PricingOffers .r184Offer:nth-child(3){background:linear-gradient(125deg,#bfe9dc,#e0f5e9);border-color:#a1d4c4}.r184PricingOffers .r184Offer:nth-child(4){background:linear-gradient(125deg,#f3c1d7,#fde3ed);border-color:#e6aac6}.r184PricingOffers .r184Offer>span{color:#704260}.r184PricingOffers .r184Offer h2{color:#392046}.r184PricingOffers .r184Offer p{color:#624963}.r184PricingOffers .r184Offer button{background:#fff9f4b8;color:#48254f;border-color:#b699b1;box-shadow:0 3px 0 #59396313}.r184PricingOffers .r184Offer button:hover{background:white}
@media(max-width:760px){.k185Intro{grid-template-columns:1fr;gap:14px;padding:25px}.k185Wonder{display:none}.k185Intro h1{font-size:30px}.k185MusicNote{display:block}.k185MusicNote button{margin-top:7px}.k185GameCard{padding:18px}.k185PlayBrand{gap:9px}.k185PlayBrand .k184Logo img{width:78px;height:32px}.k185PlayBrand .k184Logo>span{font-size:17px}.k185TopicPill{font-size:11px;max-width:55%}.k185MusicToggle{font-size:11px;margin-left:0}.k185GameCard .kAns{font-size:16px;min-height:83px;padding:13px 10px;gap:8px}.k185GameCard .kQ{font-size:25px}.k185GameCard .kTextLarge .kQ{font-size:29px}.k185GameCard .kTextLarge .kAns{font-size:21px}.p185Compare>summary{padding:19px}.p185CompareBody{padding:0 12px 18px}.k185InstallCard{margin-top:16px;width:100%;max-width:none}}
@media(max-width:420px){.k185Intro{padding:23px 20px}.k185Intro h1{font-size:26px}.k184Topics{grid-template-columns:1fr}.k185GameCard{padding:15px;border-radius:23px}.k185GameCard .kAnsWrap{gap:10px}.k185GameCard .kAns{flex-direction:column;align-items:flex-start;min-height:100px}.k185GameCard .kTextLarge .kAnsWrap{grid-template-columns:1fr}.k185GameCard .kTextLarge .kAns{flex-direction:row;align-items:center;min-height:83px}.k185GameCard .kTop2 .kSkip{padding:8px;min-width:42px}.k185GameCard .kTop2 .kWho{min-width:80px}.k185GameCard .kQ{font-size:22px}}
@media(prefers-reduced-motion:reduce){.k185Intro *,.k184TopicCard,.k185PlayFrame *{animation:none!important;transition:none!important;transform:none!important;scroll-behavior:auto!important}}
.k185PlayFrame.kMotionNone *,.k185PlayFrame.kMotionReduced *{animation:none!important;transition:none!important}.k185PlayFrame.kMotionNone .kAns:hover,.k185PlayFrame.kMotionReduced .kAns:hover{transform:none}
@media(forced-colors:active){.k185GameCard,.k184TopicCard,.k185InstallCard,.r184Offer,.prxCard,.p185Compare{border:2px solid CanvasText}.k185GameCard .kAns{border:2px solid ButtonText}.k185GameCard .kAns:focus-visible,.p185Compare>summary:focus-visible{outline:3px solid Highlight}}

.s185Banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;border-radius:14px;border:2px solid #dda665;background:#fff0d7;color:#4d321d;margin:18px 0;flex:0 0 100%;width:100%;box-sizing:border-box;font-family:'Inter',sans-serif}.s185Banner b{display:block;font-size:14px}.s185Banner span{display:block;font-size:12px;line-height:1.6;margin-top:5px}.s185Banner button{flex-shrink:0;min-height:42px;background:#52315f;color:#fff;border:0;border-radius:9px;padding:11px;font:700 12px 'Inter',sans-serif}
.ws185Guide{border:1px solid #b59ad1;background:linear-gradient(120deg,#433051,#2b203b);border-radius:20px;padding:25px;margin:20px 0;color:#f5eafa;font-family:'Inter',sans-serif}.ws185Guide header>span{color:#c8f135;font:700 10px/1.5 'Inter',sans-serif;letter-spacing:.08em}.ws185Guide h3{font:700 23px/1.35 'Inter',sans-serif;letter-spacing:-.025em;margin:9px 0}.ws185Guide p{color:#d2c1db;font:400 13px/1.6 'Inter',sans-serif;margin:10px 0}.ws185GuideGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.ws185GuideGrid article{border:1px solid #735989;padding:17px;border-radius:12px;background:#ffffff06}.ws185GuideGrid b{font-size:14px}.ws185GuideGrid button{background:#c8f135;color:#324115;border:0;border-radius:9px;padding:11px;min-height:42px;font:700 12px/1.5 'Inter',sans-serif}.ws185Guide .ws185GuideFine{font-size:11px;margin:16px 0 0;color:#bca6ca}@media(max-width:700px){.ws185GuideGrid{grid-template-columns:1fr}.s185Banner{align-items:flex-start;flex-direction:column}.ws185Guide{padding:19px}}

/* The school demo offers several real supported question examples. */
.r185ExampleTopics{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.r185ExampleTopics button{border:1px solid #d9cbe5;background:#fff8f0;color:#452b5d;border-radius:99px;padding:8px 14px;font:600 13px/1.3 Inter,sans-serif;min-height:40px}.r185ExampleTopics button[aria-pressed="true"]{background:#def5b5;border-color:#87a72d;color:#294106}

/* Match the actual topic tone classes and keep result text legible on paper. */
.k184TopicCard.mint{--topic:#cff1e5}.k184TopicCard.peach{--topic:#ffe0bc}.k184TopicCard.lilac{--topic:#e0d5f5}.k184TopicCard.lemon{--topic:#eff4b8}.k184TopicCard.pink{--topic:#f7d5e6}
.k184TopicCard{background:linear-gradient(115deg,var(--topic,#ffdfb2),#fffdf8)!important;border-color:color-mix(in srgb,var(--topic,#ffdfb2),#665173 22%);box-shadow:0 4px 0 color-mix(in srgb,var(--topic,#ffdfb2),#665173 20%)}
.k185GameCard .kBigTot,.k185GameCard .kBestV{color:#70508b;font-family:'Inter',sans-serif;font-weight:800}.k185GameCard .kDoneHead .kEy{color:#785188!important}.k185GameCard .kDoneHead .kEy s{background:#785188!important}.k185GameCard .kDoneSub{color:#675372}.k185GameCard .kBest{background:#f7efd9;border-color:#dfc78f;color:#634b32}.k185GameCard .kBestL{color:#634b32}.k185GameCard .kZeroTotal,.k185GameCard .kNsRow{background:#f1eaf8;border-color:#ddcce9;color:#56366c}.k185GameCard .kActBadge{background:#ede4f8;color:#624276;border-color:#ceb7df}.k185GameCard .kActChoice,.k185GameCard .kSeqPool button,.k185GameCard .kMatchGrid button{background:#f5edfc;border:2px solid #d8c5e8;color:#46304f;border-radius:17px;box-shadow:0 3px 0 #e6d9ef;min-height:68px}.k185GameCard .kActChoice:nth-child(2n),.k185GameCard .kSeqPool button:nth-child(2n),.k185GameCard .kMatchGrid button:nth-child(2n){background:#e7f5ef;border-color:#bdded2}.k185GameCard .kMatchGrid button.sel{background:#ecf3cb;border-color:#7c9539;color:#374614}.k185GameCard .kMatchGrid button.done,.k185GameCard .kSeqPool button.done{background:#e5efd9;color:#425d2a;border-color:#b5d0a0;opacity:.8}.k185GameCard .kMatchHint,.k185GameCard .kMatchCount,.k185GameCard .kSeqPicked{color:#604972}.k185GameCard .kSeqPicked{background:#fff9e8;border-color:#ecd8b4}.k185GameCard .kSeqPicked>span{background:#f2e9fa;color:#5c4271}.k185GameCard .kActTools button,.k185GameCard .kListenFallback{background:#faf5ff;color:#5c4370;border-color:#d8c6e6;border-radius:10px}.k185GameCard .kListenHero{background:#e7def5;color:#50346b;border:2px solid #c7aee0;border-radius:18px}.k185GameCard .kListenHero span{color:#664f7a}.k185GameCard .kActCheck{background:#cce886;color:#344a19;border-radius:14px}.k185GameCard .kListenText{background:#fff5dd;border-color:#ead29d;color:#594524}

/* ===== r186 approved Option B (namespaced) ===== */
.c186{--plum:#1d0e27;--panel:#2c1738;--cream:#fdf4e3;--muted:#c5b5d0;--tang:#ff7a29;--pink:#f0509b;--lime:#c8f135;--mint:#2bd9c6;--lav:#a78bfa;--ink:#2b1938;--ink2:#62536b;--border:#dacfe0;--heading:"Unbounded","Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}
.c186 *{box-sizing:border-box}
.c186 button,.c186 input,.c186 select,.c186 textarea{font:inherit}
.c186 button,.c186 a{-webkit-tap-highlight-color:transparent}
.c186 button{cursor:pointer}
.c186 a{color:inherit;text-decoration:none}
.c186 button:disabled{cursor:default}
.c186 button:focus-visible,.c186 a:focus-visible,.c186 summary:focus-visible,.c186 input:focus-visible,.c186 select:focus-visible,.c186 textarea:focus-visible{outline:3px solid #a24908;outline-offset:4px}
.c186 svg.ico{width:22px;height:22px;display:inline-block;flex-shrink:0;vertical-align:middle}
.c186 h1,.c186 h2,.c186 h3,.c186 p{margin:0}
.c186 h1,.c186 h2{font-family:var(--heading);font-weight:700;letter-spacing:-.05em}
.c186 h1{font-size:clamp(32px,3.7vw,49px);line-height:1.23}
.c186 h2{font-size:clamp(25px,3vw,37px);line-height:1.3}
.c186 h3{letter-spacing:-.03em}
.c186 img{max-width:100%}
.c186 button{border:0}
.c186 [hidden]{display:none!important}
.c186 .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c186 .brand{display:inline-flex;align-items:center;gap:15px;background:var(--plum);padding:10px 16px;border-radius:14px;flex-shrink:0;width:max-content;max-width:100%;line-height:1}
.c186 .brand img{width:128px;height:auto;display:block}
.c186 .brand .kids-label{font-family:var(--heading);font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--lime);border-left:1px solid #725980;padding-left:15px}
.c186 .brand-small{padding:9px 13px;gap:10px;border-radius:11px}
.c186 .brand-small img{width:95px}
.c186 .brand-small .kids-label{font-size:16px;padding-left:10px}
.c186 .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.12em;font-weight:800;color:var(--lime);margin-bottom:22px}
.c186 .lead{font-size:17px;line-height:1.75;font-weight:400}
.c186 .button{display:inline-flex;align-items:center;justify-content:center;gap:13px;font-size:15px;font-weight:750;min-height:50px;padding:13px 21px;border-radius:12px;transition:transform .15s,box-shadow .15s;line-height:1.3}
.c186 .button svg{width:19px}
.c186 .primary{background:var(--tang);color:var(--plum);box-shadow:0 4px 0 #c05825}
.c186 .button:hover{transform:translateY(-2px)}
.c186 .button:active{transform:translateY(1px)}
.c186 .school-primary{background:var(--plum);color:var(--cream);box-shadow:0 4px 0 #776889}
.c186 .text-link{display:inline-flex;align-items:center;gap:7px;color:inherit;background:none;padding:10px 0;font-size:14px;font-weight:750;text-align:left;min-height:44px}
.c186 .text-link svg{width:18px}
.c186 .text-link:hover{text-decoration:underline;text-underline-offset:5px}
.c186 .faces{display:inline-flex;align-items:center;flex-shrink:0;padding-left:0}
.c186 .faces>span{width:49px;height:49px;background:#f9cc84;display:block;border-radius:50%;border:3px solid var(--plum);overflow:hidden}
.c186 .faces>span:nth-child(2){margin-left:-9px;background:#d8c9f8}
.c186 .faces>span:nth-child(3){margin-left:-9px;background:#c4ebde}
.c186 .faces svg{width:100%;height:100%;display:block}
.c186 .together{display:flex;align-items:center;gap:13px;margin:31px 0 21px}
.c186 .together>span:last-child{font-size:13px;color:var(--muted)}
.c186 .together strong{font-weight:550;color:var(--cream)}
.c186 .proof-line{display:flex;align-items:center;gap:23px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.c186 .proof-line>span{display:flex;align-items:center;gap:7px}
.c186 .proof-line .ico{width:16px;height:16px;color:var(--lime)}
.c186 .action{position:relative}
.c186 .play-stage{position:relative;padding:15px 5px 0}

.c186 .game-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.c186 .sample-label{display:flex;align-items:center;gap:6px;max-width:75%;font-size:9px;font-weight:800;letter-spacing:.075em;color:#776182}
.c186 .sample-label .ico{width:16px;height:16px;color:#9b4a00}
.c186 .time-label{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:600;color:#63596b}
.c186 .time-label .ico{width:14px;height:14px}
.c186 .topic-nav{display:flex;gap:6px;padding:5px;background:#f0e9f3;border-radius:12px;margin-bottom:22px}
.c186 .topic{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border-radius:8px;color:#655272;font-weight:700;font-size:12px;padding:7px 9px;border:1px solid transparent}
.c186 .topic .ico{width:17px;height:17px}
.c186 .topic[aria-pressed=true]{background:var(--plum);color:#fff6e8;box-shadow:0 2px 4px #1d0e2719}
.c186 .topic:not([aria-pressed=true]):hover{background:#e4d8ef}
.c186 .question-caption{display:flex;align-items:center;gap:10px;font-size:12px;color:#766182;font-weight:700;margin-bottom:12px}
.c186 .world-icon{height:34px;width:34px;background:#ece1f7;border-radius:50%;display:grid;place-items:center;color:#694a7e}
.c186 .world-icon .ico{width:20px}
.c186 .question{font-family:var(--body);font-size:25px;font-weight:800;line-height:1.32;letter-spacing:-.025em;min-height:67px}
.c186 .game-instruction{color:#776880;font-size:12px;margin:8px 0 18px}
.c186 .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.c186 .answer{display:flex;align-items:center;gap:10px;min-height:62px;padding:12px 13px;border-radius:13px;text-align:left;color:#332039;border:1.5px solid #d9c59b;box-shadow:0 3px 0 #d9c59b;font-size:15px;font-weight:700;transition:transform .12s,background .12s}
.c186 .answer:nth-child(4n/**/+1){background:#ffe5a0;border-color:#e5c77f;box-shadow:0 3px 0 #e5c77f}
.c186 .answer:nth-child(4n/**/+2){background:#c5ece2;border-color:#9fcebf;box-shadow:0 3px 0 #9fcebf}
.c186 .answer:nth-child(4n/**/+3){background:#e6d9fa;border-color:#cbb8e6;box-shadow:0 3px 0 #cbb8e6}
.c186 .answer:nth-child(4n/**/+4){background:#ffd7df;border-color:#e5b4c3;box-shadow:0 3px 0 #e5b4c3}
.c186 .answer:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.035)}
.c186 .answer .answer-letter{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#ffffff80;font-size:11px;flex-shrink:0}
.c186 .answer .mini-art{width:32px;height:32px;flex-shrink:0}
.c186 .answer.correct{border:2px solid #377355;background:#d1efd2!important;box-shadow:0 3px 0 #377355}
.c186 .answer.retry{border:2px solid #94480d}
.c186 .answer:disabled{color:#332039}
.c186 .answer:disabled:not(.correct){opacity:.67}
.c186 .feedback{display:flex;gap:10px;align-items:center;background:#f5efdf;border-radius:11px;padding:11px 12px;font-size:12px;line-height:1.5;min-height:61px;margin:19px 0 12px;color:#65545e}
.c186 .feedback-symbol .ico{width:18px;height:18px;color:#9c586a}
.c186 .feedback.good{background:#e2f3dc;color:#31573b}
.c186 .feedback.good .ico{color:#31573b}
.c186 .game-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}
.c186 .next-button{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;padding:8px 0;min-height:42px;color:#694782;font-size:12px;font-weight:750;white-space:nowrap}
.c186 .next-button .ico{width:17px;height:17px}
.c186 .next-button{color:var(--ink);border-radius:9px;padding:8px 12px;background:#ece0f4}

.c186 .support-disclosure{margin-top:12px;border-top:1px solid #e7dfe6;padding-top:6px}
.c186 .support-disclosure summary{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:8px 0;min-height:40px;cursor:pointer;font-size:12px;font-weight:700;color:#5f4f67;list-style:none}
.c186 .support-disclosure summary::-webkit-details-marker{display:none}
.c186 .support-disclosure summary>.ico:first-child{width:16px;height:16px}
.c186 .support-disclosure summary>.ico:last-child{margin-left:auto;width:17px;height:17px;transition:transform .2s}
.c186 .support-disclosure[open] summary>.ico:last-child{transform:rotate(180deg)}
.c186 .support-content{padding:4px 0}
.c186 .support-toggle{width:100%;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;min-height:56px;padding:10px 0;color:var(--ink);border-bottom:1px solid #ded3e1}
.c186 .support-toggle:last-child{border-bottom:0}
.c186 .support-toggle>.ico{width:19px;height:19px;color:#776087}
.c186 .support-toggle>span{font-size:13px;font-weight:700;flex:1}
.c186 .support-toggle small{display:block;font-size:10px;font-weight:400;color:#726779;margin-top:1px;line-height:1.4}
.c186 .switch{width:32px;height:20px;border-radius:20px;background:#d6c9df;position:relative;flex-shrink:0}
.c186 .switch:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:left .16s}
.c186 .support-toggle[aria-pressed=true] .switch{background:#665183}
.c186 .support-toggle[aria-pressed=true] .switch:before{left:15px}
.c186 .sample-note{font-size:11px;line-height:1.5;color:var(--muted);text-align:center;margin:21px 0 0}
.c186 .orbit{display:block;width:240px;height:240px;border:1px solid #f7b24e44;border-radius:50%;position:absolute;top:-13px;right:-28px;pointer-events:none}
.c186 .orbit:after{content:"";position:absolute;inset:17px;border:1px solid #f7b24e25;border-radius:50%}
.c186 .stage-spark{position:absolute;font-size:43px;color:var(--lime);z-index:2;pointer-events:none;line-height:1}
.c186 .spark-one{left:-29px;top:86px;transform:rotate(-10deg)}
.c186 .spark-two{right:-29px;bottom:86px;color:#fa91c0;font-size:56px}
.c186 .floating-tag{display:flex;gap:7px;align-items:center;position:absolute;right:-9px;top:-6px;padding:10px 15px;background:#c9f235;color:#334010;border-radius:9px;font-size:11px;font-weight:800;transform:rotate(5deg);z-index:3;box-shadow:0 3px 0 #5f6d26}
.c186 .floating-tag .ico{width:17px;height:17px}
.c186 .calm .floating-tag,.c186 .calm .stage-spark,.c186 .calm .orbit,.c186 .calm .wide-star{visibility:hidden}
.c186 .calm *{transition:none!important;animation:none!important}
.c186 .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:30px}
.c186 .section-heading .eyebrow{color:#b6ef5b;margin-bottom:14px}
.c186 .section-heading>p{font-size:16px;line-height:1.7;color:var(--muted);max-width:320px}
.c186 .pathways{padding:38px 0 70px;border-top:1px solid #4b3558}
.c186 .path-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.c186 .path-card{border-radius:23px;padding:28px;display:flex;flex-direction:column;min-width:0;color:var(--ink)}
.c186 .family-card{background:#fdf1d9}
.c186 .school-card{background:#e6dcf5}
.c186 .path-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:23px;flex-wrap:wrap}
.c186 .access-label{font-size:9px;font-weight:800;letter-spacing:.095em;color:#71562e;display:inline-flex;align-items:center;min-height:18px}
.c186 .school-card .access-label{color:#634580}
.c186 .school-mark{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;letter-spacing:-.035em}
.c186 .school-mark>.ico{width:32px;height:32px;color:#664689}
.c186 .path-card h3{font-size:25px;font-weight:800;line-height:1.25;margin-bottom:13px}
.c186 .path-description{font-size:14px;line-height:1.75;color:#68596d;max-width:480px;margin-bottom:23px}
.c186 .topic-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 22px}
.c186 .mosaic-tile{border-radius:13px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink);background:#fffaf0}
.c186 .mosaic-tile>.ico{width:25px;height:25px}
.c186 .tile-0{background:#fbd17e}
.c186 .tile-1{background:#e1d4f5}
.c186 .tile-2{background:#bee4c8}
.c186 .tile-3{background:#bcece8}
.c186 .tile-4{background:#f6c1da}
.c186 .tile-5{background:#fffdf5;border:1px dashed #c8b47c}
.c186 .benefit-line{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;margin-bottom:21px;font-size:11px;font-weight:650;color:#5d4a61}
.c186 .benefit-line>span{display:flex;align-items:center;gap:5px}
.c186 .benefit-line .ico{width:15px;height:15px}
.c186 .path-ctas{display:flex;align-items:center;gap:21px;margin-top:auto;padding-top:3px;flex-wrap:wrap}
.c186 .workspace-mini{margin-bottom:20px;background:#fffdf8;color:#302137;border:1px solid #cdbce0;border-radius:14px;overflow:hidden;box-shadow:0 4px 0 #d2c3e0;min-height:183px}
.c186 .workspace-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 9px}
.c186 .workspace-header>span{font-size:11px;font-weight:750;display:flex;align-items:center;gap:7px}
.c186 .workspace-header .ico{width:15px;height:15px;color:#725690}
.c186 .workspace-header small{font-size:8px;font-weight:800;letter-spacing:.08em;color:#827187}
.c186 .workspace-tabs{display:flex;gap:13px;margin:0 15px;border-bottom:1px solid #e6ddec}
.c186 .workspace-tabs button{background:transparent;border-bottom:2px solid transparent;padding:7px 2px;min-height:34px;font-size:10px;font-weight:700;color:#7b6b85;flex:1}
.c186 .workspace-tabs button[aria-pressed=true]{border-bottom-color:#7751a0;color:#4e3366}
.c186 .workspace-content{padding:7px 15px;min-height:74px}
.c186 .ws-row{display:flex;align-items:center;gap:8px;padding:6px 0;min-height:30px;font-size:10px}
.c186 .ws-row>.ico{width:14px;height:14px;color:#816995}
.c186 .ws-row strong{font-weight:600;flex:1}
.c186 .ws-status{font-size:8px;border-radius:4px;background:#dcf1d9;color:#326139;padding:3px 6px}
.c186 .ws-status.alt{background:#efe4f7;color:#6f4e86}
.c186 .workspace-foot{font-size:8px;color:#88748a;border-top:1px solid #ece4ee;padding:7px 15px}
.c186 .insight-line{font-size:10px;line-height:1.5;color:#6a576f;display:flex;align-items:center;gap:10px;padding:8px 0}
.c186 .insight-line>.ico{width:26px;height:26px;color:#865fac}
.c186 .insight-line b{display:block;color:#44304d;font-size:11px}
.c186 .workspace-mini button:focus-visible{outline-offset:-3px}
.c186 .action-b{background:#fff5e3;border-radius:28px;padding:33px 26px 29px;color:var(--ink);margin-bottom:57px;box-shadow:0 8px 0 #5c405d}
.c186 .studio-heading{text-align:center;margin-bottom:32px}
.c186 .studio-heading .eyebrow{color:#775324;margin-bottom:13px}

.c186 .studio-heading .lead{font-size:15px;color:#705c6e;margin-top:12px}
.c186 .studio-canvas{display:grid;grid-template-columns:146px minmax(0,1fr) 216px;gap:20px;align-items:start}
.c186 .worlds{padding-top:8px}
.c186 .micro-heading{font-size:9px;line-height:1.5;font-weight:800;letter-spacing:.095em;color:#786981}
.c186 .worlds .micro-heading{padding-left:8px}
.c186 .topic-nav.vertical{display:grid;gap:10px;padding:0;margin-top:14px;background:transparent}
.c186 .vertical .topic{justify-content:flex-start;border-radius:13px;padding:14px 12px;min-height:62px;font-size:12px;background:#f3eadc;border:1px solid #e6d8c8;color:#674f58}
.c186 .vertical .topic .ico{width:23px;height:23px;margin-right:4px}
.c186 .vertical .topic[aria-pressed=true]{background:#ffcb70;box-shadow:0 3px 0 #ca9846;color:#4c2a19;border-color:#dfb267}
.c186 .studio-avatars{padding:24px 4px}
.c186 .studio-avatars .faces>span{width:43px;height:43px;border-color:#fff5e3}
.c186 .studio-avatars p{font-size:11px;color:#7e6677;line-height:1.6;margin-top:10px}

.c186 .question{font-size:23px;min-height:63px}
.c186 .game-top{margin-bottom:22px}
.c186 .question-caption{margin-bottom:17px}
.c186 .sample-label{font-size:8px;letter-spacing:.04em}
.c186 .sample-note{color:#826b81;font-size:10px;margin-top:17px}
.c186 .answer{min-height:64px;padding:10px;font-size:14px}
.c186 .answer-letter{width:24px;height:24px}
.c186 .feedback{margin-top:20px}
.c186 .studio-support{padding:16px 15px;border-radius:17px;background:#f3e4df;min-width:0}
.c186 .support-direct>.micro-heading{color:#885a46;margin-bottom:10px}
.c186 .support-direct h3{font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.025em}
.c186 .support-intro{font-size:11px;color:#7f625d;margin-top:11px;line-height:1.7}
.c186 .support-direct .support-toggle{gap:7px;min-height:67px;padding:12px 0;border-color:#e4ccc6}
.c186 .support-direct .support-toggle>.ico{width:16px;height:16px;color:#925f4b}
.c186 .support-direct .support-toggle>span{font-size:11px}
.c186 .support-direct .support-toggle small{font-size:9px;line-height:1.6;max-width:100px;color:#80686a}
.c186 .support-direct .switch{width:28px;height:18px}
.c186 .support-direct .switch:before{width:12px;height:12px}
.c186 .support-direct .support-toggle[aria-pressed=true] .switch:before{left:13px}
.c186 .pathways{border:0;padding-top:0}
.c186 .paths-b .path-grid{gap:0;overflow:hidden;border-radius:24px;box-shadow:0 8px 0 #45304f}
.c186 .paths-b .path-card{border-radius:0;padding:31px}
.c186 .paths-b .family-card{background:#cde9dc}
.c186 .paths-b .school-card{background:#4c345f;color:#fff1e1}
.c186 .paths-b .path-card>.access-label{margin-bottom:24px;color:#456356;font-size:10px}
.c186 .paths-b .brand{margin-bottom:22px}
.c186 .paths-b .school-card>.access-label{color:#e0cdef}
.c186 .paths-b .school-mark{min-height:60px;margin-bottom:22px;color:#fff3e5;font-size:22px}
.c186 .paths-b .school-mark>.ico{color:#d4f680;width:29px;height:29px}
.c186 .paths-b .path-card h3{font-size:29px}
.c186 .paths-b .path-description{font-size:14px;margin-bottom:24px}
.c186 .paths-b .family-card .path-description{color:#486057}
.c186 .paths-b .school-card .path-description{color:#dfd0e8}
.c186 .family-scene{display:flex;align-items:center;gap:18px;background:#edf8ed80;padding:20px 17px;border-radius:18px;margin-bottom:20px}
.c186 .family-scene .faces>span{width:62px;height:62px;border-color:#e4f2e6}
.c186 .family-scene>div{font-size:12px;line-height:1.5;color:#506355}
.c186 .family-scene strong{font-size:14px;display:block;margin-bottom:3px;color:#2b4838}
.c186 .family-scene>div span{display:block}
.c186 .small-steps{display:flex;gap:10px;justify-content:space-between;font-size:10px;font-weight:650;color:#365647;margin-bottom:27px}
.c186 .small-steps>span{display:flex;align-items:center;gap:5px}
.c186 .small-steps b{background:#f6f9e9;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:10px}
.c186 .paths-b .school-primary{background:var(--lime);color:#2c3b12;box-shadow:0 4px 0 #8aa739}
.c186 .paths-b .workspace-mini{border-color:#75598b;box-shadow:0 4px 0 #382240}
.c186 .paths-b .path-ctas{padding-top:10px}
.c186 .wide-stage{padding:15px;background:#bd8fec;border-radius:28px;position:relative;border:1px solid #e0b9fc;box-shadow:0 7px 0 #64427f}
.c186 .wide-star{position:absolute;top:-22px;right:41px;z-index:3;color:#d5f346;font-size:66px;line-height:1;pointer-events:none}
.c186 .after-game{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:22px 3px 56px;font-size:11px;color:#c5accf}
.c186 .after-game>span:first-child{display:flex;align-items:center;gap:7px;color:#cfdf9e}
.c186 .after-game .ico{width:17px;height:17px}
.c186 .after-game a{display:flex;align-items:center;gap:6px;font-weight:700;color:#d6ed9c;min-height:40px}
.c186 .path-band{background:#ffc683;display:flex;align-items:center;justify-content:space-between;gap:17px;flex-wrap:wrap;padding:23px 26px}
.c186 .path-inside{display:flex;flex-direction:column;flex:1;padding:27px}
.c186 dialog{border:0;border-radius:23px;padding:0;background:#fffaf2;color:var(--ink);box-shadow:0 30px 100px #0006;width:min(510px,calc(100% - 32px));max-height:calc(100dvh - 36px);overflow:auto}
.c186 dialog::backdrop{background:#14091bd1;backdrop-filter:blur(6px)}
.c186 .preview-end-note{font-size:11px;color:var(--muted);text-align:center;padding:0 12px 22px}
@media (min-width:1350px){
.c186 .question{font-size:27px}
.c186 .path-top .access-label{font-size:10px}}
@media (max-width:1100px){
.c186 .game-top{gap:8px}
.c186 .sample-label{font-size:8px;letter-spacing:.03em}
.c186 .time-label{font-size:10px}
.c186 .question{font-size:23px}
.c186 .spark-one{left:-22px;font-size:30px}
.c186 .spark-two{right:-18px;font-size:40px}
.c186 .orbit{right:-13px}
.c186 .path-card{padding:24px}
.c186 .path-top{gap:14px;align-items:flex-start;flex-direction:column}
.c186 .path-top .access-label{min-height:0}
.c186 .path-card h3{font-size:23px}
.c186 .path-description{font-size:13px}
.c186 .path-ctas{gap:12px}
.c186 .path-ctas .button{font-size:13px;padding:13px 16px}
.c186 .text-link{font-size:12px}
.c186 .benefit-line{gap:9px;font-size:10px}
.c186 .section-heading>p{max-width:280px;font-size:14px}
.c186 .studio-canvas{grid-template-columns:120px minmax(0,1fr) 190px;gap:14px}
.c186 .action-b{padding:30px 20px 25px}

.c186 .sample-label{font-size:7px}
.c186 .studio-support{padding:14px 12px}
.c186 .support-direct h3{font-size:17px}
.c186 .support-direct .support-toggle{gap:5px}
.c186 .support-direct .support-toggle>span{font-size:10px}
.c186 .support-direct .support-toggle small{font-size:8px}
.c186 .support-direct .support-toggle>.ico{display:none}
.c186 .worlds .topic{font-size:11px;padding:12px 9px}
.c186 .vertical .topic .ico{width:20px}
.c186 .paths-b .path-card{padding:25px}
.c186 .paths-b .path-card h3{font-size:26px}
.c186 .family-scene .faces>span{width:52px;height:52px}
.c186 .family-scene{gap:10px;padding:17px 12px}
.c186 .paths-b .school-mark{font-size:20px}}
@media (max-width:900px){.c186 .studio-canvas{grid-template-columns:1fr 245px;gap:20px}
.c186 .worlds{grid-column:1/-1;display:flex;gap:20px;align-items:center;padding:0}
.c186 .worlds .micro-heading{white-space:nowrap;font-size:10px}
.c186 .worlds .topic-nav{display:flex;flex:1;margin:0;gap:10px}
.c186 .worlds .topic{min-height:49px}
.c186 .studio-avatars{display:none}

.c186 .sample-label{font-size:9px}
.c186 .studio-support{padding:20px}
.c186 .support-direct .support-toggle{gap:9px;min-height:73px}
.c186 .support-direct .support-toggle>.ico{display:block;width:18px}
.c186 .support-direct .support-toggle>span{font-size:12px}
.c186 .support-direct .support-toggle small{font-size:10px}
.c186 .support-direct h3{font-size:20px}
.c186 .question{font-size:25px}

.c186 .section-heading{align-items:flex-start;gap:28px}
.c186 .section-heading h2{font-size:28px}
.c186 .path-top .brand-small img{width:83px}
.c186 .path-inside{padding:24px}}
@media (max-width:760px){.c186 .together{margin:26px 0 19px}
.c186 .proof-line{font-size:11px}
.c186 .play-stage{max-width:500px;width:100%;margin:auto;padding:13px 8px 0}

.c186 .sample-label{font-size:9px;letter-spacing:.055em}
.c186 .time-label{font-size:11px}
.c186 .question{font-size:25px;min-height:66px}
.c186 .question-caption{margin-bottom:12px}
.c186 .answer{min-height:65px;font-size:15px}
.c186 .topic{font-size:12px}
.c186 .floating-tag{right:0;top:-5px;font-size:10px;padding:8px 12px}
.c186 .spark-one{left:-3px;top:90px;font-size:29px}
.c186 .spark-two{right:-2px;bottom:69px;font-size:36px}
.c186 .orbit{width:170px;height:170px;right:0;top:0}
.c186 .sample-note{font-size:11px}
.c186 .section-heading{display:block;margin-bottom:25px}
.c186 .section-heading>p{margin-top:17px;max-width:470px;font-size:14px}
.c186 .section-heading h2{font-size:29px;line-height:1.3}
.c186 .section-heading .eyebrow{font-size:10px;margin-bottom:14px}
.c186 .path-grid{grid-template-columns:1fr;gap:20px}
.c186 .path-card{padding:26px;border-radius:21px}
.c186 .path-top{flex-direction:row;align-items:center;flex-wrap:wrap;gap:15px;margin-bottom:19px}
.c186 .path-top .access-label{font-size:9px}
.c186 .path-card h3{font-size:25px}
.c186 .path-description{font-size:14px;max-width:none;margin-bottom:23px}
.c186 .benefit-line{font-size:11px;gap:16px}
.c186 .topic-mosaic{gap:10px}
.c186 .mosaic-tile{height:83px;font-size:12px}
.c186 .workspace-mini{min-height:196px}
.c186 .workspace-header>span{font-size:12px}
.c186 .workspace-header small{font-size:9px}
.c186 .workspace-tabs button{font-size:11px;min-height:38px}
.c186 .workspace-content{min-height:77px}
.c186 .ws-row{font-size:11px;min-height:32px}
.c186 .workspace-foot{font-size:9px}
.c186 .ws-status{font-size:9px}
.c186 .benefit-line{margin-top:4px}
.c186 .path-ctas{gap:20px}
.c186 .path-ctas .button{font-size:14px}
.c186 .text-link{font-size:13px}
.c186 .pathways{padding:35px 0 50px}
.c186 .action-b{padding:28px 18px 25px;border-radius:23px;margin-bottom:39px}

.c186 .studio-heading .lead{font-size:14px;margin-top:15px}
.c186 .studio-heading .eyebrow{font-size:10px}
.c186 .studio-canvas{grid-template-columns:1fr;gap:19px}
.c186 .worlds{display:block}
.c186 .worlds .micro-heading{display:none}
.c186 .worlds .topic-nav{gap:7px}
.c186 .worlds .topic{font-size:12px;min-height:47px;justify-content:center}
.c186 .vertical .topic .ico{width:20px;height:20px;margin-right:0}

.c186 .sample-label{font-size:9px}
.c186 .studio-support{padding:21px;background:#efe4ee}
.c186 .support-direct>h3{font-size:22px}
.c186 .support-direct h3 br{display:none}
.c186 .support-direct .micro-heading{font-size:9px}
.c186 .support-intro{font-size:12px;margin-top:9px}
.c186 .support-direct .support-content{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:6px}
.c186 .support-direct .support-toggle{min-height:76px}
.c186 .support-direct .support-toggle>span{font-size:12px}
.c186 .support-direct .support-toggle small{font-size:9px;max-width:130px}
.c186 .support-direct .support-toggle>.ico{display:none}
.c186 .paths-b .path-card{padding:27px}
.c186 .paths-b .path-card h3{font-size:29px}
.c186 .paths-b .school-mark{font-size:23px}
.c186 .paths-b .family-card .access-label{margin-bottom:19px}
.c186 .paths-b .brand{margin-bottom:20px}
.c186 .paths-b .school-card .access-label{margin-bottom:13px}
.c186 .paths-b .school-mark{margin-bottom:19px}
.c186 .paths-b .path-description{font-size:14px}
.c186 .family-scene{padding:20px}
.c186 .family-scene .faces>span{width:61px;height:61px}
.c186 .family-scene>div{font-size:13px;margin-left:auto}
.c186 .small-steps{font-size:11px}
.c186 .paths-b .school-card .path-ctas{padding-top:6px}
.c186 .wide-stage{padding:9px;border-radius:24px}
.c186 .wide-star{font-size:45px;right:18px;top:-15px}
.c186 .after-game{flex-wrap:wrap;padding:24px 3px 34px;gap:9px}
.c186 .after-game>span:first-child{width:100%;font-size:12px}
.c186 .after-game>span:nth-child(2){font-size:10px}
.c186 .after-game>a{font-size:12px;margin-left:auto}}
@media (max-width:380px){.c186 .brand img{width:115px}
.c186 .brand .kids-label{font-size:18px}

.c186 .sample-label{font-size:8px}
.c186 .time-label{font-size:10px}
.c186 .game-top{gap:7px}
.c186 .game-top .sample-label .ico{display:none}
.c186 .question{font-size:23px}
.c186 .topic{font-size:11px;padding:7px 6px}
.c186 .answer{font-size:14px;padding:11px 8px;gap:7px}
.c186 .game-bottom{gap:8px}
.c186 .next-button{font-size:11px}
.c186 .path-card{padding:23px}
.c186 .path-ctas{gap:15px}
.c186 .path-ctas .button{font-size:13px;padding:12px 15px}
.c186 .path-card h3{font-size:24px}
.c186 .path-description{font-size:13px}
.c186 .benefit-line{font-size:10px;gap:8px}
.c186 .family-scene{padding:14px 12px;gap:8px}
.c186 .family-scene .faces>span{width:51px;height:51px}
.c186 .family-scene>div{font-size:11px}
.c186 .small-steps{gap:7px;font-size:10px}
.c186 .paths-b .path-card{padding:24px}
.c186 .paths-b .path-card h3{font-size:27px}
.c186 .action-b{padding:25px 12px}

.c186 .worlds .topic{font-size:11px;gap:4px}

.c186 .question{font-size:23px}
.c186 .studio-support{padding:18px}
.c186 .support-direct .support-content{gap:0 13px}
.c186 .support-direct .support-toggle>span{font-size:11px}
.c186 .support-direct .support-toggle small{font-size:8px}
.c186 .path-inside{padding:22px}
.c186 .after-game a{margin-left:0}}
@media (prefers-reduced-motion:reduce){.c186 *,.c186 *::before,.c186 *::after{animation:none!important;transition:none!important}}
@media (forced-colors:active){.c186 .button,.c186 .answer,.c186 .topic,.c186 .support-toggle,.c186 .next-button,.c186 .workspace-tabs button,.c186 .switch{border:1px solid ButtonText}
.c186 .support-toggle[aria-pressed=true],.c186 .topic[aria-pressed=true]{outline:2px solid Highlight}
.c186 .answer.correct{outline:3px solid Highlight}
.c186 .brand{forced-color-adjust:none}}
.c186 .sample-label,.c186 .sample-label{font-size:10px;letter-spacing:.09em}
.c186 .time-label{font-size:12px}
.c186 .topic{font-size:13px}
.c186 .game-instruction{font-size:13px}
.c186 .next-button{font-size:13px}
.c186 .feedback{font-size:13px}
.c186 .answer .mini-art{width:37px;height:37px}
.c186 .answer{gap:12px;min-height:70px}
.c186 .game-bottom .ico{width:18px;height:18px}
.c186 .support-disclosure summary{font-size:13px}
.c186 .support-toggle>span{font-size:14px}
.c186 .support-toggle small{font-size:11px}
.c186 .access-label,.c186 .path-top .access-label{font-size:10px;letter-spacing:.065em}
.c186 .mosaic-tile{font-size:12px}
.c186 .benefit-line{font-size:12px;gap:13px}
.c186 .workspace-header>span{font-size:13px}
.c186 .workspace-header small{font-size:10px}
.c186 .workspace-tabs button{font-size:12px;min-height:40px}
.c186 .ws-row{font-size:12px;min-height:36px}
.c186 .ws-status{font-size:10px}
.c186 .workspace-foot{font-size:10px}
.c186 .workspace-mini{min-height:207px}
.c186 .insight-line{font-size:12px}
.c186 .insight-line b{font-size:13px}
.c186 .workspace-content{min-height:88px}
.c186 .vertical .topic{font-size:13px}
.c186 .support-direct .support-toggle>span{font-size:12px}
.c186 .support-direct .support-toggle small{font-size:10px;max-width:140px}
.c186 .support-direct .support-toggle>.ico{display:none}
.c186 .support-direct .support-toggle{gap:9px}
.c186 .support-direct .support-intro{font-size:12px}
.c186 .support-direct .micro-heading{font-size:10px}
@media (max-width:1100px){.c186 .workspace-header>span{font-size:12px}
.c186 .workspace-tabs button{font-size:11px}
.c186 .ws-row{font-size:11px}
.c186 .ws-status{font-size:9px}
.c186 .benefit-line{font-size:11px}
.c186 .support-direct .support-toggle>span{font-size:11px}
.c186 .support-direct .support-toggle small{font-size:9px}
.c186 .path-ctas .button{font-size:14px}}
@media (max-width:760px){.c186 .sample-label,.c186 .sample-label{font-size:9px}
.c186 .time-label{font-size:11px}
.c186 .topic{font-size:12px}
.c186 .next-button{font-size:12px}
.c186 .support-disclosure summary{font-size:13px}
.c186 .workspace-header>span{font-size:12px}
.c186 .workspace-tabs button{font-size:12px}
.c186 .ws-row{font-size:12px}
.c186 .ws-status{font-size:9px}
.c186 .workspace-foot{font-size:10px}
.c186 .benefit-line{font-size:11px}
.c186 .support-direct .support-toggle>span{font-size:12px}
.c186 .support-direct .support-toggle small{font-size:10px}
.c186 .path-ctas .button{font-size:14px}
.c186 .path-top .access-label{font-size:10px}
.c186 .answer .mini-art{width:32px;height:32px}}
@media (max-width:380px){.c186 .support-direct .support-content{grid-template-columns:1fr}
.c186 .support-direct .support-toggle{min-height:63px}
.c186 .support-direct .support-toggle small{max-width:none}
.c186 .support-direct .support-toggle>.ico{display:block}
.c186 .path-ctas .button{font-size:13px}
.c186 .ws-row{font-size:11px}
.c186 .ws-status{font-size:8px}
.c186 .workspace-header>span{font-size:11px}
.c186 .workspace-header small{font-size:9px}
.c186 .path-top .access-label{font-size:9px}
.c186 .access-label{font-size:9px}
.c186 .game-bottom{flex-wrap:wrap;gap:6px}
.c186 .game-instruction{font-size:12px}}
.c186 .together>span:last-child{min-width:0}
@media (max-width:760px){.c186 .spark-two{right:3px}
.c186 .floating-tag{right:8px}
.c186 .together{gap:10px}
.c186 .together>span:last-child{font-size:12px}}
/* r186 scope boundary: no .kAns, .ans, .board, .raffle, Live or Solo selectors. */
.c186{color:#fdf4e3;font-family:'Inter',system-ui,sans-serif;line-height:1.5;text-align:left;min-width:0}
.c186 *{box-sizing:border-box}
.c186 button{font-family:'Inter',system-ui,sans-serif;max-width:100%}
.c186 .faces{position:static!important;inset:auto!important;opacity:1;transform:none!important;display:inline-flex;margin:0;padding:0;width:auto;height:auto;pointer-events:none;overflow:visible}
.c186 .faces>span{position:static;transform:none;flex:0 0 auto}

.c186 .studio-heading p{max-width:none}
.c186 .action-b{margin:0;border-radius:20px;padding:30px 24px 26px;box-shadow:none;overflow:visible}
.c186 .studio-canvas{grid-template-columns:140px minmax(0,1fr) 208px;gap:20px}
.c186 .studio-heading{margin-bottom:28px}
.c186 .question{min-height:64px;max-width:none;font-family:'Inter',sans-serif;line-height:1.4;font-size:24px;letter-spacing:-.02em}
.c186 .sample-label{font-size:10px;line-height:1.5;max-width:75%}
.c186 .sample-label svg{flex:0 0 16px}
.c186 .question-caption{font-size:12px}

.c186 .answer{white-space:normal;overflow-wrap:anywhere;min-width:0;min-height:66px;font-size:14px}
.c186 .studio-support{border-radius:16px}
.c186 .support-toggle{min-height:67px}
.c186 .support-toggle>span{font-size:12px;min-width:0}
.c186 .support-toggle small{font-size:11px}
.c186 .switch{flex:0 0 32px}
.c186 .support-direct .support-toggle>.ico{display:none}
.c186 .studio-avatars .faces>span{width:40px;height:40px}

.c186 .game-bottom{flex-wrap:wrap}
.c186 .next-button{font-size:13px;min-height:44px}
.c186 .sample-note{margin-top:17px;text-align:center;font-size:11px;line-height:1.6}
.c186 .calm .world-icon,.c186 .calm .mini-art{filter:saturate(.6)}
.c186 .calm .answer{box-shadow:none}
.c186 .calm .answer:hover{transform:none}

.c186Pair{margin:46px 0 14px}
.c186Pair .pathways{padding:0 0 26px;border:0}
.c186Pair .section-heading{margin-bottom:27px}
.c186Pair .section-heading h2{font-size:clamp(22px,2.8vw,32px);line-height:1.38}
.c186Pair .path-card{padding:32px}
.c186Pair .path-card h3{font-family:'Inter',sans-serif;font-size:clamp(23px,2.45vw,30px);line-height:1.3;max-width:none;letter-spacing:-.035em}
.c186Pair .school-mark{font-family:'Inter',sans-serif}
.c186Pair .family-scene .faces>span{width:53px;height:53px}
.c186Pair .path-description{font-size:14px}
.c186Pair .workspace-mini{min-width:0;max-width:100%;overflow:visible}
.c186Pair .workspace-tabs{gap:3px}
.c186Pair .workspace-tabs button{font-size:12px;min-height:44px;min-width:0}
.c186Pair .workspace-tabs button:focus-visible{outline:2px solid #754986;outline-offset:-3px}
.c186Pair .workspace-content{min-height:102px}
.c186Pair .ws-row strong{white-space:normal;min-width:0}
.c186Pair .ws-row .ws-status{white-space:normal;text-align:center}
.c186Pair .path-ctas{gap:12px 20px}
.c186Pair .button{font-size:14px;min-height:48px}
/* The approved three-column preview occupies the whole Kids panel. Other demos unchanged. */

/* Top four shortcuts: retain existing join/create controls and move schools into row two. */
.home186Actions .acSchoolCard{--ac:#c8f135;--acT:#23300b;--tint:#281833;--line:#685473;--lnk:#352240;--lnkH:#493354;--ring:#64783e;--cDeep:#b9d879}
.home186Actions .acSchoolCard .acStrip{background:#40304e;color:#fdf4e3;--ct:#fdf4e3;--c1:#40304e;--c2:#40304e}
.home186Actions .acSchoolCard .acIco{background:#c8f135;color:#23300b;border-radius:12px}
.home186Actions .acSchoolCard .acArrow{color:#c8f135}
.home186Actions .acSchoolCard .acSub{color:#e2d8e9}
.home186Actions .acSchoolCard .acLink{color:#eaf2d1!important;border-color:#887493!important;background:#352240!important;min-height:42px}
.home186Actions .acSchoolCard .acLbl{color:#c9b8d2}
.home186Actions .acSchoolCard .acRow{gap:8px;flex-wrap:wrap}
.home186Actions .acSchoolCard [data-school186-status]{display:block;white-space:normal;margin-top:9px;font-size:11px;color:#c7b4cf;overflow-wrap:anywhere}
.home186Actions .acSchoolCard [data-school186-status][hidden]{display:none}
.home186Actions .acKidsCard .acLink{color:#ffe2a5!important;border-color:#9b7d56!important;background:#533729!important}
.home186Actions .acSchoolCard button[aria-busy=true]{cursor:wait;opacity:.7}
.home186Draw{max-width:940px;margin:18px auto 0;border:1px solid #71516f;border-radius:12px;display:flex;align-items:center;gap:16px;padding:17px 20px;text-align:left;background:#2b1835}
.home186Draw>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;background:#412345;color:#eebcda;border-radius:10px}
.home186Draw>div{flex:1;min-width:0}
.home186Draw b{display:block;color:#fdf4e3;font-size:14px;margin-bottom:3px;font-family:'Inter',sans-serif}
.home186Draw p{margin:0;color:#c8b5d3;font-size:12px;line-height:1.6}
.home186Draw a{display:inline-flex;align-items:center;gap:9px;color:#f3c1df;text-decoration:none;min-height:44px;font-size:13px;font-weight:700;flex-shrink:0}
.home186Draw a:hover{text-decoration:underline;text-underline-offset:4px}
.home186Draw a:focus-visible{outline:3px solid #c8f135;outline-offset:4px}
.home186Chooser h2{font:700 23px/1.4 'Inter',sans-serif;letter-spacing:-.02em}
.home186Chooser p{font-size:14px;color:var(--dim);line-height:1.6}
.home186Chooser>button{width:100%;min-height:64px;background:#352240;border:1px solid #715d7b;color:#fdf4e3;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px;margin-top:12px;text-align:left}
.home186Chooser small{display:block;font-size:12px;color:#d6c4de;margin-top:5px}
/* Institutional offers: restrained commercial design, not Kids cards. */
.prxPage .p186OfferIntro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin:46px 0 20px;border-top:1px solid #584261;padding-top:32px}
.prxPage .p186OfferIntro h2{font:700 clamp(22px,2.5vw,29px)/1.35 'Inter',sans-serif;color:#fdf4e3;letter-spacing:-.035em;margin:0}
.prxPage .p186OfferIntro p{font:400 14px/1.65 'Inter',sans-serif;color:#cbbbd2;max-width:385px;margin:0}
.prxPage .r184PricingOffers.p186Offers{gap:16px;margin:0 0 32px}
.prxPage .p186Offers .r184Offer{--offerAccent:#c8f135;background:#291b34!important;background-image:none!important;border:1px solid #624e6e!important;border-radius:14px;padding:28px 30px;box-shadow:none;overflow:visible;position:relative;gap:12px;min-height:252px}
.prxPage .p186Offers .r184Offer:nth-child(2){--offerAccent:#b9a5e3}
.prxPage .p186Offers .r184Offer:nth-child(3){--offerAccent:#76c9bc}
.prxPage .p186Offers .r184Offer:nth-child(4){--offerAccent:#e9b382}
.prxPage .p186Offers .r184Offer:before{content:'';position:absolute;left:30px;top:-1px;width:46px;height:3px;background:var(--offerAccent);border-radius:0}
.prxPage .p186Offers .r184Offer>span{font:600 10px/1.5 'Inter',sans-serif;letter-spacing:.11em;color:var(--offerAccent);margin:3px 0 2px}
.prxPage .p186Offers .r184Offer h2{font:700 22px/1.35 'Inter',sans-serif;color:#fdf4e3;letter-spacing:-.025em;margin:0;max-width:100%}
.prxPage .p186Offers .r184Offer p{font:400 14px/1.7 'Inter',sans-serif;color:#cbbbd2;margin:0 0 8px;max-width:46ch}
.prxPage .p186Offers .r184Offer button{background:transparent!important;background-image:none!important;color:#f9f0e5;border:1px solid #927b9c;border-radius:8px;padding:11px 15px;box-shadow:none;min-height:44px;gap:17px;max-width:100%;font:600 13px/1.4 'Inter',sans-serif}
.prxPage .p186Offers .r184Offer button:hover{background:#402d4c!important;border-color:#bba6c5}
.prxPage .p186Offers .r184Offer button:focus-visible{outline:3px solid #c8f135;outline-offset:4px}
@media(max-width:1100px){.c186 .studio-canvas{grid-template-columns:114px minmax(0,1fr) 180px;gap:14px}.c186 .action-b{padding:27px 18px}.c186 .support-toggle small{font-size:10px}.c186Pair .path-card{padding:28px}.c186Pair .family-scene{gap:10px;padding:17px 12px}.c186Pair .family-scene .faces>span{width:45px;height:45px}}
@media(max-width:900px){.c186 .studio-canvas{grid-template-columns:minmax(0,1fr) 210px;gap:20px}.c186 .worlds{grid-column:1/-1}.c186 .worlds .topic-nav{display:flex}.c186Pair .path-grid{grid-template-columns:1fr 1fr}.c186Pair .family-scene{flex-wrap:wrap}.c186Pair .family-scene>div{margin:0}.c186Pair .path-ctas{gap:9px}.c186Pair .workspace-mini{padding:13px}.c186Pair .ws-row{gap:6px}.c186Pair .ws-row strong{font-size:12px}.c186Pair .ws-status{font-size:9px}.prxPage .p186Offers .r184Offer{padding:24px}}
@media(max-width:700px){.c186 .studio-canvas{grid-template-columns:1fr;gap:18px}.c186 .worlds{display:block;grid-column:auto}.c186 .worlds .micro-heading{display:none}.c186 .action-b{padding:25px 17px}.c186 .studio-support{padding:18px}.c186 .support-content{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.c186 .support-toggle small{font-size:11px}.c186 .support-toggle>span{font-size:12px}.c186 .question{font-size:23px;min-height:0}.c186Pair .path-grid{grid-template-columns:1fr}.c186Pair .section-heading{display:block}.c186Pair .section-heading .lead{margin-top:16px;max-width:100%}.c186Pair .path-card{padding:26px}.c186Pair .family-scene .faces>span{width:49px;height:49px}.c186Pair .path-card h3{font-size:27px}.home186Draw{gap:12px;flex-wrap:wrap;padding:16px}.home186Draw a{margin-left:52px;flex-basis:calc(100% - 52px)}.prxPage .p186OfferIntro{display:block}.prxPage .p186OfferIntro p{margin-top:12px;max-width:100%}.prxPage .p186Offers .r184Offer{min-height:0}}
@media(max-width:390px){.c186 .action-b{padding:23px 12px}.c186 .studio-heading .lead{font-size:13px}.c186 .worlds .topic{gap:5px;font-size:11px;min-height:48px;padding:9px 6px}.c186 .worlds .topic .ico{width:17px}.c186 .support-content{grid-template-columns:1fr}.c186 .support-toggle{min-height:59px}.c186 .support-toggle small{font-size:12px}.c186 .support-toggle>span{font-size:13px}.c186 .answer{font-size:13px;gap:7px;padding:10px 8px}.c186 .answer .mini-art{width:25px;height:25px}.c186 .question{font-size:22px}.c186Pair .path-card{padding:22px}.c186Pair .family-scene{display:block}.c186Pair .family-scene>div{margin-top:12px}.c186Pair .path-ctas .button{font-size:13px}.home186Draw p{font-size:12px}.home186Actions .acSchoolCard .acSub{font-size:12px}}
@media(prefers-reduced-motion:reduce){.c186 *, .c186 *::before,.c186 *::after{animation:none!important;transition:none!important}.c186 .button:hover{transform:none}}
@media(forced-colors:active){.c186 button,.home186Draw,.home186Chooser>button,.prxPage .p186Offers .r184Offer,.prxPage .p186Offers .r184Offer button{border:1px solid CanvasText!important}.c186 .answer.correct{outline:2px solid Highlight}.prxPage .p186Offers .r184Offer h2,.prxPage .p186Offers .r184Offer p{color:CanvasText}.c186 .support-toggle[aria-pressed=true]{outline:2px solid Highlight}}

/* Interactive sample must be fully laid out before keyboard focus/measurement. */

/* ===== r186 Live mobile repair: local, opt-in controls and readable sheets ===== */
.live186Sheet{box-sizing:border-box!important;clip-path:none!important;border:1px solid #5a406b;border-radius:22px!important;background:#25142f!important;color:#fff7eb;max-width:570px!important;padding:0!important;display:flex;flex-direction:column;max-height:calc(100dvh - 40px)!important;overflow:hidden!important;animation:none!important;box-shadow:0 22px 70px #08040d66}
.live186Sheet *{box-sizing:border-box;min-width:0}
.live186Sheet .live186Head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 17px;border-bottom:1px solid #61466b66;flex:0 0 auto}
.live186Eyebrow{display:block;font:750 10px/1.4 Inter,system-ui,sans-serif;color:#c6e88a;letter-spacing:1.25px;margin-bottom:7px}
.live186Head h2{font-family:Inter,system-ui,sans-serif;font-size:24px;line-height:1.25;font-weight:760;margin:0;letter-spacing:-.45px;color:#fff7eb;overflow-wrap:anywhere}
.live186Close{width:44px;min-height:44px;flex:0 0 44px;display:grid;place-items:center;background:#3b2847;border:1px solid #70557f;color:#fff7eb;border-radius:12px;font:600 25px/1 Inter,sans-serif;cursor:pointer}
.live186Scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 22px 22px;flex:1 1 auto;min-height:0;scroll-padding-block:14px}
.live186Quiz{margin:0 0 15px;display:grid;gap:5px;overflow-wrap:anywhere}
.live186Quiz b{font-size:16px;line-height:1.45;color:#fff7eb;font-weight:700}
.live186Quiz span,.live186Intro{font-size:13px;line-height:1.6;color:#d3c3dd;margin:0 0 14px}
.live186Quiz span{margin:0}
.live186RoomSummary{display:grid;gap:5px;padding:13px 14px;background:#32243e;border:1px solid #594367;border-left:3px solid #c7ef59;border-radius:12px;margin:0 0 17px}
.live186RoomSummary b{font-size:13px;line-height:1.5;overflow-wrap:anywhere;font-weight:700;color:#f8f1e9}
.live186RoomSummary span{font-size:12px;line-height:1.5;color:#d3c3dd}
.live186Field{display:grid;gap:8px;margin:0 0 16px;width:100%;text-align:left;min-width:0}
.live186Field>span,.live186TeamNames label>span{color:#fff7eb;font-size:13px;line-height:1.5;font-weight:700;letter-spacing:0}
.live186Sheet select,.live186Sheet input[type=text]{font:500 16px/1.4 Inter,system-ui,sans-serif;color:#fff7eb;background:#160d20;border:1px solid #795e88;border-radius:10px;clip-path:none!important;appearance:auto;padding:11px 12px;min-height:46px;width:100%;max-width:100%;margin:0}
.live186Sheet select option{background:#21102e;color:#fff7eb}
.live186Field small,.live186Check small{font-size:12px;line-height:1.55;color:#d3c3dd;display:block;font-weight:450;letter-spacing:0;overflow-wrap:anywhere}
.live186Details{border:1px solid #624970;border-radius:13px;background:#2b1b37;margin:10px 0 0;overflow:clip}
.live186Details>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;min-height:58px;cursor:pointer;list-style:none;color:#fff7eb;font:700 14px/1.45 Inter,system-ui,sans-serif}
.live186Details>summary::-webkit-details-marker{display:none}
.live186Details>summary small{display:block;font-size:12px;line-height:1.5;font-weight:450;color:#d3c3dd;margin-top:3px;letter-spacing:0}
.live186Details>summary i{width:24px;height:24px;flex:0 0 24px;border:1px solid #745f80;border-radius:7px;position:relative}
.live186Details>summary i:before,.live186Details>summary i:after{content:'';position:absolute;top:10px;left:6px;width:10px;height:2px;background:#e3d5ed}
.live186Details>summary i:after{transform:rotate(90deg)}
.live186Details[open]>summary i:after{display:none}
.live186Details[open]>summary{border-bottom:1px solid #61466b66}
.live186DetailBody{padding:16px 14px}
.live186DetailBody>*:last-child{margin-bottom:0}
.live186Check{display:flex;align-items:flex-start;gap:12px;padding:13px 0;cursor:pointer;min-height:48px;font:650 14px/1.5 Inter,system-ui,sans-serif;text-align:left;color:#fff7eb;margin:0 0 12px}
.live186Check input[type=checkbox]{appearance:auto;flex:0 0 22px;width:22px;height:22px;min-height:22px;accent-color:#c7ef59;margin:0;border:0;clip-path:none;padding:0}
.live186Check span{flex:1;min-width:0}
.live186Check small{margin-top:4px}
.live186Enable{margin:0;padding:0 0 12px}
.live186Hint{font:450 12px/1.6 Inter,system-ui,sans-serif;color:#d3c3dd;margin:0 0 15px}
.live186TeamNames{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.live186TeamNames label{display:grid;gap:6px}
.live186School{padding:13px;border:1px solid #624970;border-radius:12px;margin-bottom:16px}
.live186School>.live186Field:last-child{margin-bottom:0}
.live186Foot{position:relative;background:#21112c;border-top:1px solid #61466b66;flex:0 0 auto;display:grid;gap:9px;padding:14px 22px max(16px,env(safe-area-inset-bottom));z-index:1}
.live186Foot>small{font-size:11px;line-height:1.5;font-weight:500;color:#d3c3dd;text-align:center}
.live186Sheet .live186Foot .btn{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;clip-path:none!important;border-radius:11px;margin:0;padding:12px 14px;width:100%;font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.45;font-weight:750;color:#1d2810;background:#c7ef59;border:1px solid transparent;box-shadow:none}
.live186Foot .btn svg{flex:0 0 auto}
.live186Text{background:none;border:0;color:#e7d4f2;text-decoration:underline;text-underline-offset:3px;font:650 13px/1.5 Inter,system-ui,sans-serif;cursor:pointer;min-height:44px;padding:9px 4px}
.live186Foot>.live186Text{min-height:32px;padding:4px}
.live186TimeNote{padding:12px 13px;background:#49352455;border:1px solid #90744570;border-radius:10px;font:450 12px/1.6 Inter,system-ui,sans-serif;margin:15px 0 10px;color:#f1dfc4}
.live186TimeNote b{display:block;font-weight:700;color:#ffedca}
.live186Privacy{font:450 11px/1.6 Inter,system-ui,sans-serif;color:#c8b7d3;margin:0}
.live186Sheet :is(button,select,input,summary):focus-visible{outline:3px solid #b4e6f1!important;outline-offset:3px;box-shadow:none}
.live186Lobby{padding:15px!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.live186Lobby .st b{font-size:15px!important}.live186Lobby .st small{font-size:13px!important;line-height:1.55!important}
.live186Lobby>button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:46px;font:700 13px/1.4 Inter,system-ui,sans-serif;color:var(--ink);background:var(--panel2);border:1px solid #775f83;border-radius:10px;padding:11px 14px;width:100%}
.live186Game{min-width:0;max-width:100%}
.live186Game .ans{min-width:0;overflow-wrap:anywhere;min-height:62px}
.live186Game .ansrow{min-width:0;grid-template-columns:minmax(0,1fr)}
.live186Game .gmeta{min-width:0}.live186Game .gpill{min-width:0;max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere;line-height:1.45}
.live186Game .qstage .qtext{overflow-wrap:anywhere}
.live186Game .livePlayerTools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.live186Game .livePlayerTools button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font:650 13px/1.5 Inter,system-ui,sans-serif;padding:9px 12px;flex:1 1 140px;border:1px solid #79608a;background:#352440;color:#f5ebff;border-radius:10px}
.live186Game .livePlayerTools button svg{flex:0 0 auto}
@media(min-width:720px){.live186Game .ansrow.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 #sheetWrap:has(.live186Sheet){padding:8px!important;align-items:center!important}
 #sheetWrap .live186Sheet{max-width:100%!important;margin:0!important;max-height:calc(100dvh - 16px)!important;border-radius:17px!important}
 .live186Sheet .live186Head{padding:17px 16px 13px}.live186Head h2{font-size:23px}
 .live186Scroll{padding:15px 16px 18px}.live186Foot{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
 .live186TeamNames{grid-template-columns:minmax(0,1fr)}
 .live186Game .qstage .qtext{font-size:clamp(19px,5.1vw,26px)!important;line-height:1.42}
 body.liveSupportLarge .live186Game .qstage .qtext{font-size:clamp(23px,6vw,30px)!important;line-height:1.4}
 .live186Game .ans{gap:10px;padding:13px;font-size:15px}.live186Game .ans .ltr{width:30px;height:30px;font-size:12px;border-radius:8px}
 .live186Game .qstage{margin-bottom:17px}.live186Game .qimg{max-width:100%}
 body.livePage .hostbar{width:calc(100% - 20px);max-width:470px;gap:4px;bottom:max(10px,env(safe-area-inset-bottom));padding:6px;border-radius:13px;justify-content:center;box-sizing:border-box}
 body.livePage .hostbar button{min-height:44px;min-width:0;flex:0 1 auto;font-size:12px;line-height:1.25;padding:8px;gap:5px;white-space:normal}
 body.livePage .hostbar button.go{flex:1 1 130px;justify-content:center}
 body.livePage .hostbar button svg{flex:0 0 auto}
}
@media(max-height:500px){.live186Sheet .live186Head{padding-block:10px}.live186Foot{padding-block:9px}.live186Foot>small{display:none}}
@supports not(height:100dvh){#sheetWrap .live186Sheet{max-height:calc(100vh - 20px)!important}}
@media(prefers-reduced-motion:reduce){.live186Sheet,.live186Sheet *{animation:none!important;transition:none!important}}

/* A consent choice must not cover an open dialog's actions. It returns on dismissal. */
body:has(#sheetWrap.on) #cookieBar{display:none!important}

/* r186: secondary modal actions remain easy to tap on phones. */
.live186Sheet .live186Foot>.live186Text{min-height:44px}

/* r187 approved narrow correction: exact former Raffle palette on Schools only. */
.home186Actions .acSchoolCard{--ac:var(--vio);--acT:var(--violT);--tint:rgba(167,139,250,.07);--line:rgba(167,139,250,.34);--lnk:rgba(167,139,250,.12);--lnkH:rgba(167,139,250,.24);--ring:rgba(167,139,250,.18);--cDeep:#67569B}
.home186Actions .acSchoolCard .acStrip{--c1:var(--vio);--c2:var(--mag);--ct:var(--violT);background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--ct)}
.home186Actions .acSchoolCard .acIco{background:rgba(0,0,0,.16);color:var(--violT);border-radius:13px}
.home186Actions .acSchoolCard .acSub,.home186Actions .acSchoolCard .acArrow{color:var(--violT)}
.home186Actions .acSchoolCard .acLink{color:#f2ebff!important;background:rgba(167,139,250,.17)!important;border-color:rgba(242,235,255,.52)!important}
.home186Actions .acSchoolCard .acLink:hover{background:rgba(167,139,250,.24)!important}
.home186Actions .acSchoolCard .acLbl{color:#f0e7f5}

.c186Pair .home187Slot{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;width:100%;align-items:stretch}
.c186Pair .home187Slot>*{grid-area:1/1;min-width:0}
.c186Pair .home187Sizer{visibility:hidden!important;pointer-events:none!important;user-select:none!important;animation:none!important;transition:none!important}

/* Hidden sample panels must never reveal their children through legacy rules. */

/* r187: use the shared frame, not an old miniature canvas pinned at its top.
   The same demonstrations remain; their content distributes within the frame. */

/* Legacy mobile rules hid the hint and constrained the inner results panel.
   Keep controls visible and let both Live subcards fill their shared rows. */

/* Enlarged text may wrap controls; it must not be cropped to preserve a box. */

/* Keep the real question a single DOM target; sizing alternatives have their
   own presentational class and share its responsive typography. */


/* ==========================================================================
   Otiya r199 fixes. Loaded after app.css and the r195-r198 sheets.
   Presentation only. No Live scoring, timing, joining or session rule lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. One document scroller on every route (root cause of page shift).

   Before: `html,body{height:100%}` plus `html,body{overflow-x:hidden!important}`.
   overflow-x:hidden forces overflow-y to compute to auto, and once <html> has a
   non-visible overflow, body's overflow no longer propagates to the viewport,
   so <body> became its own nested scroll box. Some routes were patched back to
   height:auto (schools, kids, raffle, build, pricing), others were not (join,
   profile, help...), so the scrolling element changed from route to route.
   window.scrollY read 0, scroll restore and focus scrolling hit the wrong box.

   After: overflow-x:clip trims decorative overflow WITHOUT creating a scroll
   container, so the document is always the scroller.
   -------------------------------------------------------------------------- */
html:root{height:auto;max-width:100%;overflow-x:clip!important;overflow-y:visible!important}
html:root body{height:auto;min-height:100vh;min-height:100dvh;max-width:100%;overflow-x:clip!important;overflow-y:visible!important}
/* Older engines without overflow:clip (Safari < 16): leave <html> visible so
   body's hidden overflow propagates to the viewport instead of nesting. */
@supports not (overflow:clip){
  html:root{overflow-x:visible!important}
  html:root body{overflow-x:hidden!important}
}

/* --------------------------------------------------------------------------
   2. Patterned background anchored to the viewport (the purple strip).

   Before: the layer was oversized (inset:-90px) and drifted with
   transform:translate(0 -> 70px,50px). The R15 overflow correction set the
   homepage layer to inset:0 but only stopped the drift at <=640px, so wider
   screens moved a viewport-sized layer up to 70px right / 50px down and showed
   a plain strip on the left and top edges. Switching route mid-drift made the
   strip appear suddenly.

   After: the layer box always equals the viewport. The drift moves the pattern
   inside the box (background-position), so no edge can ever be exposed and the
   layer never adds overflow. Pages that switched the drift off keep it off.
   -------------------------------------------------------------------------- */
html:root .pattern{inset:0!important;transform:none!important;animation-name:otiyaPatternDrift199}
@keyframes otiyaPatternDrift199{
  from{background-position:40px 0,40px 0,0 0,0 0}
  to{background-position:110px 50px,110px 50px,70px 50px,70px 50px}
}
@media (prefers-reduced-motion:reduce){html:root .pattern{animation:none!important}}

/* --------------------------------------------------------------------------
   3. Join screen: Join game on the same screen, reachable on every phone.
   -------------------------------------------------------------------------- */
/* #app used overflow-x:hidden, which makes it a (non-scrolling) scroll
   container and stops position:sticky from pinning to the viewport. clip keeps
   the same visual trimming without that side effect. Join screen only. */
#app:has(> .join199){overflow-x:clip!important;overflow-y:visible!important}
.join199Err{margin:2px 0 12px;background:var(--panel2);padding:14px 15px;font-size:14px;line-height:1.6}
.join199Err .btn{margin-top:10px}
/* One compact Otiya mark at the top of the join screen, at every width. The
   site header carries no logo, so this is how a player arriving from a QR code
   or shared link knows they are on Otiya. Small enough to keep Join game in
   view on a 375x667 phone. */
.join199Mark{display:flex;justify-content:center;align-items:center;margin:0 0 12px;line-height:1}
.join199Mark .otiyaWordmark{text-shadow:none}
@media (max-width:520px), (max-height:760px){
  .join199Mark{margin:2px 0 10px}
  .join199Mark .otiyaWordmark{--ow-size:22px!important}
}
@media (max-width:520px), (max-height:760px){
  /* The page header already carries the logo; the second logo and the
     decorative art pushed Join game below the fold on short phones. */
  .join199 .join199Deco{display:none}
  .join199{margin-top:8px!important}
  .join199 .card{padding-bottom:14px}
}

/* Join game stays in view on every width while the form scrolls, and above
   the on-screen keyboard. */
.join199 .join199Go{position:sticky;bottom:0;z-index:3;background:var(--panel);
  margin:0 calc(-1 * clamp(18px,3vw,28px));padding:10px clamp(18px,3vw,28px) max(12px,env(safe-area-inset-bottom));
  box-shadow:0 -12px 18px -8px rgba(0,0,0,.35)}
.join199 .join199Go .btn{margin:0}

/* --------------------------------------------------------------------------
   4. Quiz library states and workspace location note.
   -------------------------------------------------------------------------- */
.lib199Err{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:14px 16px;
  background:rgba(240,80,155,.10);border:1px solid rgba(240,80,155,.38);border-radius:12px}
.lib199ErrText{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.5}
.lib199ErrText span{color:var(--dim)}
.lib199Err .quiet{flex:0 0 auto}
.lib199Loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 18px;color:var(--dim);font-size:13.5px;font-weight:600}
.lib199Spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(253,244,227,.18);border-top-color:var(--mag);animation:lib199Spin .9s linear infinite;flex:0 0 auto}
@keyframes lib199Spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lib199Spin{animation:none;border-top-color:rgba(253,244,227,.18)}}
.lib199Ws{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:13px 16px;
  background:rgba(43,217,198,.08);border:1px solid rgba(43,217,198,.30);border-radius:12px}
.lib199WsText{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.5}
.lib199WsText span{color:var(--dim);white-space:normal;overflow-wrap:anywhere;min-width:0}
.lib199WsBtns{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.lib199WsBtns .quiet{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Save to: a view-only / inactive choice explains itself before saving. */
.w190Destination .w190DestWarn{color:#ffb4d3;font-weight:600}

/* r199 Batch H: School workspace dense mobile surfaces. Scoped to the workspace
   route and its drawers only; admin.html carries its own inline r199 block. */

/* Effective licence state: one label and one colour wherever it appears. */
.lic199{display:inline-flex;align-items:center;gap:6px;font:750 12px/1.4 Inter,sans-serif;white-space:nowrap;padding:3px 9px;border-radius:999px;border:1px solid currentColor;background:transparent;vertical-align:middle}
.lic199:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.lic199[data-licence=active]{color:#7ce0d4}
.lic199[data-licence=pending]{color:#eac56f}
.lic199[data-licence=suspended],.lic199[data-licence=expired]{color:#ff9caf}
.w190Role span .lic199{margin-left:4px}
.wsSettingCard b .lic199{font-size:13px}

/* Long school names, titles and emails wrap instead of truncating or pushing width. */
.w190Workspace .wsMain :is(b,strong,span,small,em,p,h3,h4),
.w190Workspace .wsSingleName{overflow-wrap:anywhere;min-width:0}
.w190Workspace :is(.wsMemberMain b,.wsMemberMain span,.wsPilotFinding small,.wsPilotFinding b,.wsRecentHead b,.wsContentRow b,.wsContentRow span,.wsTimelineRow b,.wsTimelineRow span){white-space:normal;overflow:visible;text-overflow:clip}
.w190Workspace .lic199{overflow-wrap:normal}
.w190Workspace .wsPilotFeedbackList>div{min-width:0;overflow-wrap:anywhere}

/* Workspace drawers: viewport-bounded, internal scroll, safe-area aware, text wraps. */
body[data-o189-screen="workspace"] #sheetWrap.on{padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
body[data-o189-screen="workspace"] #sheetWrap .sheet{margin-top:0!important;margin-bottom:0!important;max-height:100%!important;overflow-y:auto;overscroll-behavior:contain}
body[data-o189-screen="workspace"] #sheetWrap .sheet :is(p,.disp,b,small,span,label){overflow-wrap:anywhere}

@media(max-width:600px){
  /* Section heads with a side action stack so titles keep full width. */
  .w190Workspace :is(.wsSectionHead,.wsPilotFindHead,.wsPilotLaunchHead,.wsPilotNext,.wsPilotPackFoot){flex-direction:column;align-items:stretch;gap:12px}
  .w190Workspace :is(.wsSectionHead,.wsPilotFindHead,.wsPilotLaunchHead,.wsPilotNext)>:is(button,.btn,.quiet){align-self:flex-start;width:auto}
  .w190Workspace .wsPilotPackFoot>div{display:grid;grid-template-columns:1fr;gap:8px}
  .w190Workspace .wsPilotOpsActions{display:grid;grid-template-columns:1fr;gap:8px}
  /* Summary figures read as compact two-up cards rather than a tall single column. */
  .w190Workspace :is(.wsMetrics,.wsPilotEvidenceGrid,.wsPilotLaunchGrid,.wsPilotSignals){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .w190Workspace :is(.wsMetrics,.wsPilotEvidenceGrid,.wsPilotLaunchGrid,.wsPilotSignals)>div{min-width:0;padding:12px}
  .w190Workspace :is(.wsMetrics,.wsPilotEvidenceGrid,.wsPilotLaunchGrid,.wsPilotSignals)>div small{letter-spacing:.6px}
  /* Findings and checkpoints: labelled card rows, status beneath the title. */
  .w190Workspace .wsPilotFinding{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:12px 0}
  .w190Workspace .wsPilotFinding em,.w190Workspace .wsPilotCheckpoint>em{grid-column:2;justify-self:start}
  .w190Workspace .wsPilotCheckpoint{grid-template-columns:24px minmax(0,1fr);align-items:start;padding:12px}
  .w190Workspace .wsMemberRow{align-items:start}
}
@media(max-width:360px){
  .w190Workspace :is(.wsMetrics,.wsPilotEvidenceGrid)>div b{font-size:20px}
}

/* r199 dropdown/disclosure standard (handover section 10). Same tokens as the header Solutions
   dropdown and account menu in r199-header.css: surface #2c1738, 1px line border, 14px radius,
   one shadow, Inter, lime focus. Floating panels are opaque and never wider than the viewport;
   inline disclosures expand below a summary whose size never changes when opened. */

/* 1. Floating panels: custom select listbox (upgradeSelects) and workspace More nav */
.otSelectMenu,.w190MoreNav>div{background:var(--o189-surface,#2c1738)!important;border:1px solid var(--o189-line,#694f78)!important;border-radius:14px!important;box-shadow:0 18px 44px #000a!important;backdrop-filter:none!important;opacity:1;color:var(--o189-cream,#fdf4e3);font-family:var(--o189-font,Inter,sans-serif);box-sizing:border-box;max-width:calc(100vw - 24px)}
.otSelectMenu{padding:6px}
.otSelectSearchWrap{background:var(--o189-surface,#2c1738)!important}
.w190MoreNav>div{z-index:60;padding:6px;gap:2px;width:min(240px,calc(100vw - 24px))}
/* Items: one size, clear hover, focus-visible and selected states */
.otSelectOpt,.w190MoreNav>div button{font:650 14px/1.35 var(--o189-font,Inter,sans-serif)!important;color:var(--o189-cream,#fdf4e3);border-radius:8px;min-height:44px;padding:10px 12px}
.otSelectOpt:hover,.w190MoreNav>div button:hover{background:#ffffff0f;color:#fff}
.otSelectOpt:focus-visible,.w190MoreNav>div button:focus-visible{background:#ffffff0f;outline:2px solid var(--o189-lime,#c8f135);outline-offset:-2px}
.otSelectOpt.selected,.w190MoreNav>div button[aria-current=page]{background:#ffffff14;color:var(--o189-lime,#c8f135)}
.otSelectOpt:disabled{background:transparent;color:var(--o189-muted,#cbbbd4)}

/* 2. Triggers: custom select button and the native Save to select */
.otSelectTrigger:focus-visible,.w190Destination select:focus-visible,.w190MoreNav>summary:focus-visible{outline:3px solid var(--o189-lime,#c8f135)!important;outline-offset:2px}
.w190Destination select{background-color:var(--o189-surface,#2c1738);border:1px solid var(--o189-line,#694f78);border-radius:10px;color:var(--o189-cream,#fdf4e3);font:600 14px/1.35 var(--o189-font,Inter,sans-serif);padding:8px 12px;cursor:pointer}
.w190Destination select:hover{border-color:var(--turq,#2bd9c6)}
.w190Destination select option{background:var(--o189-surface,#2c1738);color:var(--o189-cream,#fdf4e3)}
.w190Destination select option:disabled{color:var(--o189-muted,#cbbbd4)}
.w190MoreNav>summary{box-sizing:border-box}
.w190MoreNav[open]>summary{border-color:var(--o189-lime,#c8f135)}

/* 3. Inline disclosures: opaque surface, same border/radius, stable summary, clear states */
.w190Sponsor{background:var(--o189-surface,#2c1738);border:1px solid var(--o189-line,#694f78);border-radius:14px;padding:0 16px}
.w190Sponsor[open]{padding-bottom:14px}
:is(.w190Disclosure,.w190QuestionNav,.p185Compare,.live186Details){border-color:var(--o189-line,#694f78)}
.w190Disclosure{background:var(--o189-surface,#2c1738);border-radius:14px}
.live186Details>summary{border-bottom:1px solid transparent}
:is(.w190Disclosure,.w190Sponsor,.w190QuestionNav,.p185Compare,.live186Details,.o189Menu details)>summary{box-sizing:border-box;font-family:var(--o189-font,Inter,sans-serif)}
:is(.w190Disclosure,.w190Sponsor,.w190QuestionNav,.p185Compare,.live186Details,.o189Menu details)>summary:focus-visible{outline:3px solid var(--o189-lime,#c8f135);outline-offset:2px;border-radius:12px}
:is(.w190Disclosure,.w190Sponsor,.w190QuestionNav,.p185Compare,.live186Details,.o189Menu details)[open]>summary{color:var(--o189-lime,#c8f135)}
@media(hover:hover){:is(.w190Disclosure,.w190QuestionNav,.p185Compare,.live186Details)>summary:hover{background:#ffffff0a}.w190Sponsor>summary:hover{color:var(--o189-cream,#fdf4e3)}.o189Menu details>summary:hover{color:var(--o189-lime,#c8f135)}}
:is(.w190Disclosure,.w190Sponsor,.w190QuestionNav,.p185Compare,.live186Details,.o189Menu details) :is(summary i,summary>span:last-child,.p185Plus){transition:transform .15s}
@media(prefers-reduced-motion:reduce){:is(.w190Disclosure,.w190Sponsor,.w190QuestionNav,.p185Compare,.live186Details,.o189Menu details) :is(summary i,summary>span:last-child,.p185Plus){transition:none}}
/* Sheets that hold disclosures grow downward from a fixed top, so opening one never moves its summary */
#sheetWrap#sheetWrap:has(.live186Sheet,.o189Menu){align-items:flex-start!important}

/* r199 header: approved layout. Left: sound, music, lime BETA. Right: Solutions beside Log in / account.
   No small logo, no centred navigation. Phones keep the Menu sheet. */
#o189Header#o189Header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;box-sizing:border-box}
body.homePage #o189Header#o189Header{background:transparent;border-bottom-color:transparent}
#o189Header#o189Header .o189Top{order:2;margin:0;padding:0;max-width:none;min-height:0;flex:0 1 auto;gap:10px}
#o189Header#o189Header .o189Utility{order:1;margin:0;padding:0;max-width:none;min-height:0;flex:none}
#o189Header#o189Header :is(.o189Brand,.o189StartLink,.o189Nav>a,.o189Nav>details:first-of-type){display:none!important}
#o189Header#o189Header .o189Nav{display:flex;flex:none;gap:0}
#o189Header#o189Header #o189Account,#o189Header#o189Header #authNav{margin-left:0;gap:10px!important}
#o189Header#o189Header #o189Audio{order:1}#o189Header#o189Header #o189Beta{order:2}
/* Lime BETA, beside the audio controls */
#o189Header#o189Header .beta{display:inline-flex!important;align-items:center;font:800 11px/1 Unbounded,Inter,sans-serif!important;letter-spacing:1.5px!important;padding:8px 12px!important;border:0!important;border-radius:0!important;background:var(--o189-lime)!important;color:var(--o189-plum)!important;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
/* One control family: Solutions, Log in, Create free account, account pill, Menu */
#o189Header#o189Header :is(.o189Nav summary,#authNav button,#profBtn,#o189MenuButton){height:46px!important;min-height:46px!important;padding:0 20px!important;border-radius:999px!important;font:700 14px/1 var(--o189-font)!important;box-sizing:border-box!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
#o189Header#o189Header :is(.o189Nav summary,#authNav .navlogin,#profBtn,#o189MenuButton){background:var(--o189-plum)!important;border:1.5px solid #5f4670!important;color:var(--o189-cream)!important}
#o189Header#o189Header #authNav .navsignup{display:inline-flex!important;background:var(--o189-lime)!important;border:1.5px solid var(--o189-lime)!important;color:var(--o189-plum)!important}
#o189Header#o189Header #profBtn{padding:0 14px 0 6px!important;max-width:220px}
#o189Header#o189Header .o189Nav summary::after{border-color:var(--o189-lime);margin:-4px 0 0 2px}
#o189Header#o189Header .o189Nav details[open]>summary,#o189Header#o189Header :is(.o189Nav summary,#authNav .navlogin,#profBtn):hover{border-color:var(--turq,#2bd9c6)!important}
#o189Header#o189Header :is(.o189Nav summary,#authNav button,#profBtn,#o189MenuButton):focus-visible{outline:3px solid var(--o189-lime)!important;outline-offset:2px}
#o189Header#o189Header .o189Nav details.o189Current>summary{color:var(--o189-lime)!important}
#o189Header#o189Header #o189MenuButton{display:none!important}
#o189Header#o189Header :is(.o189Nav summary,#authNav button){display:inline-flex!important}
/* Shared dropdown standard: Solutions and account menu */
#o189Header#o189Header .o189Dropdown,.amenu{background:var(--o189-surface)!important;border:1px solid var(--o189-line)!important;border-radius:14px!important;box-shadow:0 18px 44px #000a!important;backdrop-filter:none!important;opacity:1;font-family:var(--o189-font)}
#o189Header#o189Header .o189Dropdown{left:auto;right:0;top:calc(100% + 8px);width:300px;max-width:calc(100vw - 24px);z-index:60}
#o189Header#o189Header .o189Dropdown a{font:650 14px/1.35 var(--o189-font)}
#o189Header#o189Header .o189Dropdown .o189NavLast{font-size:14px;border-radius:8px}
#o189Header#o189Header .o189Dropdown a:focus-visible{outline:2px solid var(--o189-lime);outline-offset:-2px}
#o189Header#o189Header .o189Dropdown a[aria-current=page]{color:var(--o189-lime);background:#ffffff0f}
body.o189Chrome .amenu{top:70px;max-width:calc(100vw - 24px);box-sizing:border-box;z-index:60}
.amenu button{font:600 13.5px/1.3 var(--o189-font)}
.amenu .an,.amenu .ae{display:block}
.amenu button:focus-visible{outline:2px solid var(--o189-lime);outline-offset:-2px}
/* Tablet (720-1119): Solutions, Log in/account and the Menu sheet; Create free account moves into the page */
@media(max-width:1119px){#o189Header#o189Header.o189Ready #o189MenuButton{display:inline-flex!important}#o189Header#o189Header #authNav .navsignup{display:none!important}}
/* Phone: Menu sheet replaces Solutions; compact controls */
@media(max-width:719px){
 #o189Header#o189Header{padding:12px 16px;gap:8px}
 #o189Header#o189Header .o189Nav,#o189Header#o189Header #authNav .navsignup{display:none!important}
 #o189Header#o189Header.o189Ready #o189MenuButton{display:inline-flex!important}
 #o189Header#o189Header #o189Account,#o189Header#o189Header #authNav{gap:6px!important}
 #o189Header#o189Header :is(#authNav button,#profBtn,#o189MenuButton){height:40px!important;min-height:40px!important;padding:0 14px!important;font-size:12.5px!important}
 #o189Header#o189Header #profBtn{padding:0 10px 0 4px!important}
 #o189Header#o189Header .o189UtilityLeft,#o189Header#o189Header #o189Audio{gap:6px}
 #o189Header#o189Header :is(#backBtn,#homeBtn,#sndBtn,#musBtn){width:40px!important;height:40px!important;min-width:40px!important}
 #o189Header#o189Header .beta{font-size:9px!important;padding:7px 8px!important;letter-spacing:1px!important}
}
@media(max-width:380px){
 #o189Header#o189Header{padding:10px 10px;gap:6px}
 #o189Header#o189Header :is(#authNav button,#profBtn,#o189MenuButton){padding:0 11px!important;font-size:12px!important}
 #o189Header#o189Header .o189MenuLines{display:none}
 #o189Header#o189Header :is(#backBtn,#homeBtn,#sndBtn,#musBtn){width:38px!important;height:38px!important;min-width:38px!important}
 #o189Header#o189Header .o189UtilityLeft,#o189Header#o189Header #o189Audio{gap:5px}
}
/* Hero: breathing space between the chips row and the beta note (was 25px) */
.homeHero .heroBeta{margin-top:52px!important}
@media(max-width:540px){.homeHero .heroBeta{margin-top:38px!important}}
/* Phones: inner pages add Back + Home, so the row must be tighter.
   Menu becomes icon-only (its text stays as the accessible name) and BETA
   shows on the homepage only, where the approved header places it. */
@media(max-width:480px){
 #o189Header#o189Header.o189Ready #o189MenuButton{font-size:0!important;width:40px!important;min-width:40px!important;padding:0!important;justify-content:center}
 #o189Header#o189Header #o189MenuButton .o189MenuLines{display:inline-block!important;margin:0!important}
 body:not(.homePage) #o189Header#o189Header .beta{display:none!important}
 #o189Header#o189Header #profBtn{max-width:120px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:380px){#o189Header#o189Header.o189Ready #o189MenuButton{width:38px!important;min-width:38px!important}}

/* r199 homepage: top four shortcuts share one geometry, and the Schools
   shortcut keeps the approved former-Raffle palette. Loaded after app.css. */
/* r200: the card and header geometry that lived here now belongs to ui/r200-cards.css
   (approved "A · Clean" design, subgrid equal headers). Only the Schools palette stays. */
.home186Actions .acSchoolCard .acStrip{background:linear-gradient(135deg,#A78BFA 0%,#F0509B 100%);color:#1B1033;--ct:#1B1033}
.home186Actions .acSchoolCard .acStrip .acTitle,.home186Actions .acSchoolCard .acStrip .acSub,.home186Actions .acSchoolCard .acStrip .acArrow,.home186Actions .acSchoolCard .acStrip .acIco{color:#1B1033}

/* Schools and Kids are separate full-width sections (existing cards, one per section). */
.c186Pair.c199Single{margin:40px 0 0}
.c186Pair.c199Single+.c186Pair.c199Single{margin-top:28px}
.c186Pair.c199Single .pathways{padding-bottom:0}
.c186Pair.c199Single .path-grid{grid-template-columns:minmax(0,1fr)}

/* r200: signed-in home library card, titled by scope (personal vs workspace). */
.h200Lib{margin-top:26px;background:rgba(0,0,0,.22);border:1px solid rgba(253,244,227,.09);padding:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.h200LibText{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.h200LibText>b{font-weight:700;font-size:14px}
.h200LibText>span{color:var(--dim);font-size:12.8px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.h200LibActions{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0;max-width:100%}
.h200LibActions .quiet{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.h200LibActions .h200LibLink{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--dim);font:600 12.8px/1.3 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;text-align:left}
.h200LibActions .h200LibLink:hover{color:var(--ink)}
@media(max-width:520px){.h200LibActions{width:100%}.h200LibActions .quiet{flex:1 1 auto;justify-content:center}}

/* ==========================================================================
   Otiya r199 typography discipline and long-content sweep.
   Loaded after fixes-r199.css (the build appends ui/r199-*.css in name order).
   Presentation only. No gameplay rule lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand fonts on every control.
   Buttons, fields and selects had no family of their own, so the browser's
   default (Arial on most Android and Linux, system font elsewhere) showed on
   raffle setup, profile switches, header utility buttons and more. :where()
   keeps this at zero specificity: any family an author rule sets still wins.
   -------------------------------------------------------------------------- */
:where(button:not(.acStrip),input,select,textarea,optgroup){font-family:inherit}
/* Held back: the four homepage shortcut strips (.acStrip) also render in the
   browser button font, but switching them to Inter wraps the Schools strip at
   320px and breaks the locked equal-header rule (handover 4.4). Left for the
   homepage owner to fit with r199-home.css. */

/* Comfortaa belongs to the otiya wordmark only. These headings used it as a
   display face; display type is Unbounded. The wordmark rules (.bd, .logo
   .word, .bigword, .olwm, .prxWord, .otiyaWordmark, .hiw-olw) keep Comfortaa. */
.aivH1,.aivStatN,.cmH1,.cmH2,.ucH,.cmStep h3,.pkExT,.pfH{font-family:var(--heading,'Unbounded','Inter',system-ui,sans-serif)}

/* --------------------------------------------------------------------------
   2. Wordmark: one unbreakable unit, and only a logo where it is meant to be.
   -------------------------------------------------------------------------- */
.bd,.bdAI,.otiyaWordmark,.olwm,.prxWord,.bigword{white-space:nowrap}

/* Inside running text, buttons, links, labels and summaries the name reads as
   a word: same font as the sentence and no separately coloured "ya".
   Headings, the hero and logos keep the full treatment. The :not(#r199t)
   step lifts this above older per-section `.x .bd i{color:...!important}`
   rules without naming each one; no element carries that id. */
.bd:not(#r199t):not(:is(h1,h2,h3,h4,h5,h6,.disp,.logo,.bigword) .bd){font:inherit;letter-spacing:inherit;color:inherit}
.bd:not(#r199t):not(:is(h1,h2,h3,h4,h5,h6,.disp,.logo,.bigword) .bd) :is(i,u){font:inherit;font-style:normal;text-decoration:none;letter-spacing:inherit;color:inherit!important}

/* --------------------------------------------------------------------------
   3. Long user text wraps inside its box (names, emails, quiz titles).
   A grid/flex item defaults to min-width:auto, so one unbroken 60-character
   name made the whole profile column wider than a 320px phone and pushed
   Save, the selects and the switches off screen.
   -------------------------------------------------------------------------- */
.pgridw>*,.psec .quiet{min-width:0;max-width:100%}
.psec,.bhead .disp,.homeActionIntro .disp,.qcard h5,.slide .st{overflow-wrap:anywhere}
/* Controls keep whole words ("Save" must never become "Sa / ve"); the quiz
   title shortcut is user text and may break. */
.psec :is(button,.btn,label,.label),.psec :is(button,.btn) *{overflow-wrap:normal}
.psec .quiet,.psec .quiet *{overflow-wrap:anywhere}

/* --------------------------------------------------------------------------
   4. Touch targets: 44px minimum on phones for primary controls that were
   drawn at 30 to 39px (My quizzes card actions, profile Save/Open, Add).
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  #app .btn,#sheetWrap .btn,.qacts button,.otprof-go{min-height:44px}
}

/* r200 otiya AI sheet: creation form, soft walls and the shared container.
   Everything is scoped to the AI sheet. Brand tokens only. */

/* ---------- container (every .aiSheet, including the result list) ---------- */
#sheetWrap:has(>.aiSheet){padding:10px}
#sheetWrap>.aiSheet{
  position:relative;isolation:isolate;box-sizing:border-box;
  width:100%;max-width:620px;max-height:100%!important;margin:0!important;
  overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scroll-padding-bottom:104px;
  padding:20px 18px 18px;background:var(--panel);color:var(--ink);text-align:left;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  animation:sheetIn .34s cubic-bezier(.16,1.2,.3,1) both
}
#sheetWrap>.aiSheet.ai200{padding-bottom:0;font-family:'Inter',sans-serif}
@media(min-width:600px){
  #sheetWrap:has(>.aiSheet){padding:24px}
  #sheetWrap>.aiSheet{padding:30px 36px 26px}
  #sheetWrap>.aiSheet.ai200{padding-bottom:0}
}

/* the accent: a soft lime and magenta glow behind the eyebrow */
.aiSheet.ai200::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-150px;left:-150px;width:360px;height:300px;
  background:radial-gradient(closest-side,rgba(200,241,53,.2),rgba(200,241,53,0) 70%),
             radial-gradient(closest-side at 72% 60%,rgba(240,80,155,.15),rgba(240,80,155,0) 72%);
  animation:ai200Glow 9s ease-in-out infinite
}
@keyframes ai200Glow{0%,100%{opacity:.7;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(18px,8px,0) scale(1.06)}}

/* ---------- header ---------- */
.aiSheet.ai200 .aiTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.aiSheet.ai200 .aiEy{display:inline-flex;align-items:center;gap:10px;margin:0;
  font:700 11px/1 'Unbounded','Inter',sans-serif;letter-spacing:.16em;color:var(--lime)}
.aiSheet.ai200 .aiMark{width:28px;height:28px;display:grid;place-items:center;flex:none;
  background:rgba(200,241,53,.13);color:var(--lime)}
.aiSheet.ai200 .aiX{position:static;float:none;margin:-6px -8px -6px 0;width:40px;height:40px;flex:none;
  display:grid;place-items:center;border:0;border-radius:0;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--dim)}
.aiSheet.ai200 .aiX:hover{color:var(--ink)}
.aiSheet.ai200 .aiX:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.aiSheet.ai200 .aiH{font:700 20px/1.25 'Unbounded','Inter',sans-serif;letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}
.aiSheet.ai200 .aiP{font:400 14px/1.55 'Inter',sans-serif;color:var(--dim);margin:0 0 18px}
@media(min-width:600px){
  .aiSheet.ai200 .aiTop{margin-bottom:18px}
  .aiSheet.ai200 .aiH{font-size:23px}
  .aiSheet.ai200 .aiP{font-size:14.5px;margin-bottom:20px}
}

/* ---------- topic ---------- */
.aiSheet.ai200 .aiIn.aiInBig{display:block;width:100%;min-height:112px;max-height:240px;margin:0;
  padding:14px 16px;background:var(--bg);border:1px solid rgba(183,158,203,.3);
  font:500 16px/1.5 'Inter',sans-serif;color:var(--ink);resize:vertical;transition:border-color .16s,background-color .16s}
.aiSheet.ai200 .aiIn.aiInBig::placeholder{color:var(--mute);opacity:.85}
.aiSheet.ai200 .aiIn.aiInBig:focus{border-color:var(--lime);background:#1a0c23}
.aiSheet.ai200 .aiCount{margin:8px 2px 0;text-align:right;font:500 12px/1.3 'Inter',sans-serif;
  color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:0}
.aiSheet.ai200 .aiCount.aiCountFull{color:var(--sun)}

/* ---------- labels ---------- */
.aiSheet.ai200 :is(.aiExLbl,.aiLbl){display:block;margin:0 0 10px;
  font:600 13px/1.3 'Inter',sans-serif;color:var(--ink);letter-spacing:0;text-transform:none}
.aiSheet.ai200 .aiExLbl{margin-top:14px}

/* ---------- example chips ---------- */
.aiSheet.ai200 .aiChips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.aiSheet.ai200 .aiChip{display:inline-flex;align-items:center;min-height:38px;height:auto;padding:0 14px;
  border:0;border-radius:0;background:var(--panel2);color:var(--ink);
  font:500 13.5px/1.2 'Inter',sans-serif;transition:background-color .16s,color .16s}
.aiSheet.ai200 .aiChip:hover{background:#4a2a63;color:var(--lime)}
.aiSheet.ai200 .aiChip:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.aiSheet.ai200 .aiChip:disabled{opacity:.5;cursor:default}
@media(pointer:coarse){.aiSheet.ai200 .aiChip{min-height:44px}}

/* ---------- compact PDF row ---------- */
.aiSheet.ai200 .aiDoc{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;margin:0;
  padding:9px 9px 9px 12px;border:0;border-radius:0;background:var(--bg)}
.aiSheet.ai200 .aiDoc.has{background:rgba(200,241,53,.08)}
.aiSheet.ai200 .aiDocIc{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--panel2);color:var(--turq)}
.aiSheet.ai200 .aiDoc.has .aiDocIc{background:rgba(200,241,53,.16);color:var(--lime)}
.aiSheet.ai200 .aiDocTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.aiSheet.ai200 .aiDocTx>b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;font:600 14px/1.3 'Inter',sans-serif;color:var(--ink)}
.aiSheet.ai200 .aiDocT{white-space:nowrap}
.aiSheet.ai200 .aiDocTx>b.aiDocName{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiSheet.ai200 .aiOpt{margin:0;padding:3px 7px;border:0;border-radius:0;background:rgba(183,158,203,.14);
  font:600 10px/1.1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.aiSheet.ai200 .aiDocNote{margin:0;font:400 12.5px/1.4 'Inter',sans-serif;color:var(--mute)}
.aiSheet.ai200 :is(.aiDocPick,.aiDocClear){flex:none;width:auto;height:40px;min-height:40px;padding:0 16px;margin:0;
  border:0;border-radius:0;background:var(--panel2);color:var(--ink);font:600 13.5px/1 'Inter',sans-serif;
  white-space:nowrap;transition:background-color .16s}
.aiSheet.ai200 :is(.aiDocPick,.aiDocClear):hover{background:#4a2a63}
.aiSheet.ai200 :is(.aiDocPick,.aiDocClear):focus-visible{outline:2px solid var(--lime);outline-offset:-2px}

/* ---------- how many / difficulty ---------- */
.aiSheet.ai200 .aiOptsGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  margin:22px 0 0;padding:22px 0 0;border-top:1px solid rgba(183,158,203,.2)}
@media(min-width:700px){.aiSheet.ai200 .aiOptsGrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}}
.aiSheet.ai200 .aiSeg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;flex:none;
  background:var(--bg)}
.aiSheet.ai200 .aiSegN{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.55fr)}
.aiSheet.ai200 .aiSeg button{height:44px;min-width:0;padding:0 4px;border:0;border-radius:0;background:transparent;
  color:var(--dim);font:600 14.5px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;transition:color .16s,background-color .16s}
.aiSheet.ai200 .aiSeg button:hover:not(:disabled){color:var(--ink)}
.aiSheet.ai200 .aiSeg button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--lime)}
.aiSheet.ai200 .aiSeg button:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.aiSheet.ai200 .aiSeg button:disabled{cursor:not-allowed}
.aiSheet.ai200 .aiSeg button.out{opacity:.34}
.aiSheet.ai200 .aiSeg button.out:hover{background:transparent}
.aiSheet.ai200 .aiAllow{margin:9px 0 0;font:400 12.5px/1.45 'Inter',sans-serif;color:var(--mute)}
.aiSheet.ai200 .aiOwnRow{margin:12px 0 0}
.aiSheet.ai200 .aiOwnBox{display:flex;align-items:center;gap:10px;flex:none}
.aiSheet.ai200 .aiOwnUnit{font:500 13.5px/1 'Inter',sans-serif;color:var(--dim)}
.aiSheet.ai200 .aiOwnIn{width:76px!important;height:44px;min-height:44px;margin:0!important;padding:0 8px!important;
  border:1px solid var(--lime)!important;border-radius:0;background:var(--bg)!important;color:var(--ink)!important;
  font:600 16px/1 'Inter',sans-serif!important;text-align:center;box-shadow:none!important;
  -moz-appearance:textfield;appearance:textfield}
.aiSheet.ai200 .aiOwnIn::-webkit-inner-spin-button,.aiSheet.ai200 .aiOwnIn::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.aiSheet.ai200 .aiOwnIn:focus{outline:none;background:#1a0c23!important;box-shadow:0 0 0 3px rgba(200,241,53,.18)!important}
.aiSheet.ai200 .aiOwnNote{color:var(--ink);font-weight:500}

/* ---------- error and fallback ---------- */
.aiSheet.ai200 .aiErr{margin:20px 0 0;padding:12px 14px;border:0;border-radius:0;
  background:rgba(240,80,155,.1);box-shadow:inset 3px 0 0 var(--mag);
  font:500 13.5px/1.5 'Inter',sans-serif;color:var(--ink)}
.aiSheet.ai200 .aiFallback{margin:10px 0 0;padding:14px 16px;border:0;border-radius:0;
  background:rgba(43,217,198,.07);box-shadow:inset 3px 0 0 var(--turq)}
.aiSheet.ai200 .aiFallback b{font:700 14px/1.3 'Inter',sans-serif}
.aiSheet.ai200 .aiFallback>span{font:400 13px/1.55 'Inter',sans-serif}
.aiSheet.ai200 .aiFallback>span span{display:inline;margin:0;font:inherit;color:inherit}
.aiSheet.ai200 .aiFallbackBtns .btn{width:auto;min-height:44px;padding:0 18px;font:600 14px/1 'Inter',sans-serif}

/* ---------- action bar: sticky at the foot of the scrolling sheet ---------- */
.aiSheet.ai200 .aiActs{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  margin:22px -18px 0;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--panel);box-shadow:0 -1px 0 rgba(183,158,203,.2),0 -16px 24px -8px rgba(20,8,28,.55)}
.aiSheet.ai200 .aiActs .btn{width:auto;margin:0;min-height:52px;transform:none}
.aiSheet.ai200 .aiCancel{padding:0 18px;border:0;border-radius:0;background:var(--panel2);color:var(--ink);
  font:600 14.5px/1 'Inter',sans-serif;justify-content:center}
.aiSheet.ai200 .aiCancel:hover{background:#4a2a63;color:var(--ink)}
.aiSheet.ai200 .aiGo{padding:0 18px;gap:10px;font:700 15px/1.2 'Unbounded','Inter',sans-serif;letter-spacing:.01em;text-align:center}
.aiSheet.ai200 .aiGo:focus-visible,.aiSheet.ai200 .aiCancel:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.aiSheet.ai200 .aiGo svg{flex:none}
@media(max-width:359px){
  .aiSheet.ai200 .aiCancel{padding:0 14px}
  .aiSheet.ai200 .aiGo{padding:0 12px;font-size:14px}
  .aiSheet.ai200 .aiGo>svg{display:none!important}
  .aiSheet.ai200 .aiDocPick{padding:0 12px}
}
@media(min-width:600px){
  .aiSheet.ai200 .aiActs{display:flex;justify-content:flex-end;align-items:center;gap:12px;
    margin:26px -36px 0;padding:18px 36px 26px;box-shadow:0 -1px 0 rgba(183,158,203,.2)}
  .aiSheet.ai200 .aiCancel{background:transparent;color:var(--dim);padding:0 16px}
  .aiSheet.ai200 .aiCancel:hover{background:var(--panel2);color:var(--ink)}
  .aiSheet.ai200 .aiGo{min-width:220px;padding:0 26px}
}
.aiSheet.aiWall .aiP{margin-bottom:0}
@media(max-width:599px){
  .aiSheet.aiWall .aiActs{grid-template-columns:minmax(0,1fr)}
  .aiSheet.aiWall .aiGo{order:-1}
}

/* ---------- busy ---------- */
.aiSheet.ai200 .aiGo:disabled{opacity:1;filter:none;cursor:progress}
.aiSheet.ai200.isBusy .aiGo{background:rgba(200,241,53,.16);color:var(--lime);font:600 14px/1.3 'Inter',sans-serif}
.aiSheet.ai200.isBusy :is(.aiIn,.aiChips,.aiDoc,.aiOptsGrid){opacity:.55;transition:opacity .2s}
.aiSheet.ai200 .aiSpin{width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(200,241,53,.3);border-top-color:var(--lime);animation:ai200Spin .8s linear infinite}
@keyframes ai200Spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  #sheetWrap>.aiSheet,.aiSheet.ai200::before,.aiSheet.ai200 .aiSpin{animation:none}
}

/* r200 homepage action cards: owner-approved "A · Clean" design
   (previews/home-cards-options.html, section .optA2), then taken one step smaller with
   the owner-approved "A · Slightly smaller" option (previews/home-cards-smaller-options.html):
   titles 17px, subtitles 14px, 46px icons, 44px buttons, a narrower card area, and three
   equal Create buttons (From scratch, otiya AI, Template).
   Each card: gradient header (colours, gradients and icons unchanged) plus a body
   with one short line and its main controls. Every card carries a faint category
   tint across the whole card and tinted button fills and edges.
   Headers in the same row are exactly equal height: each card spans two rows of
   the parent grid (header, body) through CSS subgrid, so the tallest header in a
   row sets the height for both. Browsers without subgrid get a min-height fallback.
   Loaded after app.css (fixes sheet); higher specificity or !important only where
   app.css itself uses !important on the same property. */

.actquad.home186Actions{--acGap:18px;column-gap:var(--acGap);row-gap:0;grid-auto-rows:auto;align-items:stretch}
.home186Actions>.acCard{
  --acRGB:255,255,255;
  position:relative;box-sizing:border-box;min-width:0;height:auto;
  display:grid;grid-template-rows:auto 1fr;grid-row:auto;
  padding:8px;margin:0 0 var(--acGap);
  background:linear-gradient(165deg,rgba(var(--acRGB),.13) 0%,rgba(var(--acRGB),.05) 55%,rgba(var(--acRGB),.03) 100%),var(--panel,#2C1738);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  overflow:hidden
}
.home186Actions>.acCard.acJoinCard{--acRGB:255,122,41}
.home186Actions>.acCard.acCreateCard{--acRGB:43,217,198}
.home186Actions>.acCard.acKidsCard{--acRGB:255,197,61}
.home186Actions>.acCard.acSchoolCard{--acRGB:167,139,250}

/* Header */
.home186Actions>.acCard>.acStrip{
  box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;height:100%;min-height:0;
  padding:18px;margin:0;border:0;text-align:left;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))
}
.home186Actions>.acCard>.acStrip::after{display:none}
.home186Actions>.acCard>.acStrip .acIco{flex:none;width:46px;height:46px;margin:0;border-radius:12px;align-self:center;background:rgba(27,16,51,.14);box-shadow:none}
.home186Actions>.acCard>.acStrip .acIco svg{width:22px;height:22px}
.home186Actions>.acKidsCard>.acStrip .acIco{background:rgba(255,255,255,.55)}
.home186Actions>.acKidsCard>.acStrip .acIco svg{width:24px;height:24px}
.home186Actions>.acCard>.acStrip .acTxt{flex:1;min-width:0;overflow:visible}
.home186Actions>.acCard>.acStrip .acTitle{display:block;font-family:'Unbounded','Inter',system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.home186Actions>.acCard>.acStrip .acSub{display:block;margin-top:4px;font-size:14px;font-weight:600;line-height:1.4}
.homePage .home186Actions>.acCard>.acStrip .acSub{opacity:.86!important}
.home186Actions>.acCard>.acStrip .acArrow{flex:none;opacity:.8;line-height:0}
.home186Actions>.acCard>.acStrip .acArrow svg{width:19px;height:19px}

/* Body: one short line, then the controls */
.home186Actions>.acCard>.acBody{box-sizing:border-box;display:flex;flex-direction:column;gap:11px;padding:14px 8px 8px;margin:0;min-width:0}
.home186Actions .acLead{margin:0;font-size:14px;font-weight:500;line-height:1.45;color:rgba(253,244,227,.78)}
.home186Actions .acLead [data-school186-status]{display:block;margin-top:4px;font-size:13px;color:rgba(253,244,227,.7);overflow-wrap:anywhere}
.home186Actions .acLead [data-school186-status][hidden]{display:none}
.home186Actions .acChips{display:flex;flex-wrap:wrap;gap:8px}
.home186Actions .acChips>span{font-size:12.5px;font-weight:600;line-height:1.2;padding:6px 11px;border-radius:999px;background:rgba(255,197,61,.14);color:#ffe3a3}
.home186Actions>.acCard>.acBody>.acRow{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;margin-top:auto;min-height:0}

/* Tinted buttons, always side by side */
.home186Actions .acBtn{
  flex:1 1 0;min-width:0;min-height:44px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 12px;border-radius:11px;cursor:pointer;
  font:700 14px/1.2 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#FDF4E3;white-space:nowrap;text-align:center;
  background:rgba(var(--acRGB),.12);border:1px solid rgba(var(--acRGB),.40);
  transition:background-color .15s ease,border-color .15s ease
}
/* The standard labels fit on one line at every width. A longer signed-in school label
   ("Open school workspace", "Return to support workspace") wraps inside its button
   rather than being cut off, so the pair still sits side by side. */
.home186Actions .acBtn>span{min-width:0;white-space:normal;overflow-wrap:break-word;padding:4px 0}
.home186Actions .acBtn svg{flex:none;width:15px;height:15px}
.home186Actions .acBtn:hover{background:rgba(var(--acRGB),.2);border-color:rgba(var(--acRGB),.6)}
.home186Actions .acBtn:focus-visible{outline:3px solid #C8F135;outline-offset:2px}
.home186Actions .acBtn[aria-busy=true]{cursor:wait;opacity:.7}
.home186Actions>.acCreateCard .acBtn{color:#AEF3EA}
/* Create: three equal buttons; How it works is an inline link in the short line above. */
.home186Actions>.acCreateCard .acThree .acBtn{padding:0 8px}
.home186Actions .acLead .acInl{display:inline;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:700;color:#8EEADF;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.home186Actions .acLead .acInl:hover{color:#AEF3EA}
.home186Actions .acLead .acInl:focus-visible{outline:3px solid #C8F135;outline-offset:2px;border-radius:3px}

/* Join code box */
.home186Actions>.acJoinCard .acField{flex:1;display:flex;min-width:0;min-height:46px;border-radius:11px;overflow:hidden;background:#150A1D;border:1px solid rgba(253,244,227,.14)}
.home186Actions>.acJoinCard .acField input{flex:1;min-width:0;padding:0 16px;border:0;background:none;color:#FDF4E3;font:700 14px 'Unbounded','Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.home186Actions>.acJoinCard .acField input::placeholder{color:#A592B5;font-size:14px;font-weight:700;letter-spacing:.14em}
.actquad.home186Actions>.acCard.acJoinCard .acField button{padding:0 20px!important;min-width:0!important;font:800 14px Inter,system-ui,sans-serif;border:0!important}

/* Two columns: equal header heights per row through subgrid */
@media(min-width:860px){
  .actquad.home186Actions{grid-template-columns:1fr 1fr;grid-auto-rows:auto auto;max-width:980px}
  .home186Actions>.acCard{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  @supports not (grid-template-rows:subgrid){
    .home186Actions>.acCard{grid-row:auto;display:flex;flex-direction:column;height:100%}
    .home186Actions>.acCard>.acStrip{min-height:92px;height:auto}
    .home186Actions>.acCard>.acBody{flex:1}
  }
}
/* Between 860px and 1100px the header text column is narrow: a touch tighter still. */
@media(min-width:860px) and (max-width:1099.98px){
  .home186Actions>.acCard>.acStrip{gap:12px;padding:16px 14px}
  .home186Actions>.acCard>.acStrip .acIco{width:42px;height:42px}
  .home186Actions>.acCard>.acStrip .acTitle{font-size:16px}
  .home186Actions>.acCard>.acStrip .acSub{font-size:13.5px}
  .home186Actions>.acCard>.acBody{padding:12px 6px 6px}
  .home186Actions .acBtn{padding:0 8px;font-size:13.5px;gap:6px}
  .home186Actions>.acCreateCard .acThree .acBtn{padding:0 6px;gap:5px}
  .home186Actions>.acCreateCard .acThree .acBtn svg{width:13px;height:13px}
}
/* Narrow two-column band: the three Create buttons drop their icons so each label stays on one line. */
@media(min-width:860px) and (max-width:979.98px){
  .home186Actions>.acCreateCard .acThree .acBtn svg{display:none!important}
}
/* From 1100px the cards and the prize draw strip below them share one edge. */
@media(min-width:1100px){
  .homeActionCard .actquad.home186Actions,.homeActionCard .home186Draw{max-width:980px}
}

/* Phones: the buttons stay side by side, so the panel around the cards,
   the card padding and the button type all tighten as the screen narrows. */
@media(max-width:560px){
  .card.homeActionCard{padding-left:12px;padding-right:12px}
  .actquad.home186Actions{--acGap:14px}
  .home186Actions>.acCard{padding:7px}
  .home186Actions>.acCard>.acStrip{padding:16px 14px;gap:12px}
  .home186Actions>.acCard>.acStrip .acIco{width:42px;height:42px}
  .home186Actions>.acCard>.acStrip .acTitle{font-size:15.5px}
  .home186Actions>.acCard>.acStrip .acSub{font-size:13.5px}
  .home186Actions>.acCard>.acBody{padding:12px 4px 4px}
  .home186Actions>.acCard>.acBody>.acRow{gap:8px}
  .home186Actions .acBtn{padding:0 6px;font-size:13px;gap:5px}
  .home186Actions .acBtn svg{width:13px;height:13px}
  .home186Actions>.acCreateCard .acThree .acBtn{padding:0 4px}
}
@media(max-width:399.98px){
  .home186Actions>.acCreateCard .acThree .acBtn svg{display:none!important}
}
@media(max-width:374.98px){
  .home186Actions>.acCard>.acStrip{padding:14px 12px;gap:10px}
  .home186Actions>.acCard>.acStrip .acIco{width:40px;height:40px}
  .home186Actions>.acCard>.acStrip .acTitle{font-size:15px}
  .home186Actions>.acCard>.acStrip .acSub{font-size:13px}
  .home186Actions .acBtn{padding:0 5px;font-size:12.5px;gap:5px}
  .home186Actions>.acCreateCard .acThree .acBtn{padding:0 2px}
  .actquad.home186Actions>.acCard.acJoinCard .acField button{padding:0 16px!important}
  .home186Actions>.acJoinCard .acField input{padding:0 12px;letter-spacing:.1em}
  .home186Actions>.acJoinCard .acField input::placeholder{letter-spacing:.08em;font-size:13px}
}
@media(max-width:359.98px){
  .home186Actions .acBtn svg{display:none!important}
}
/* Stacked (one column): every coloured header has the same fixed minimum height, with
   its content centred, so a two-line title or subtitle does not make one header taller. */
@media(max-width:859.98px){.home186Actions>.acCard>.acStrip{min-height:var(--acHeadH,82px);height:auto}}
@media(max-width:560px){.actquad.home186Actions{--acHeadH:92px}}
@media(max-width:374.98px){.actquad.home186Actions{--acHeadH:104px}}
@media(forced-colors:active){.home186Actions .acBtn{border:1px solid ButtonText}}
@media(prefers-reduced-motion:reduce){.home186Actions .acBtn{transition:none}}
/* No trailing gap under the last row: the prize draw strip sets its own spacing. */
.home186Actions>.acCard:last-child{margin-bottom:0}
@media(min-width:860px){.home186Actions>.acCard:nth-last-child(2):nth-child(odd){margin-bottom:0}}

/* r200: workspace Shared content (non-school). Readable type, clear actions, tabs instead of an empty side panel. */
.wc200{--wc-ink:var(--w190-ink,#fdf4e3);--wc-muted:var(--w190-muted,#d0bfd8);--wc-line:rgba(253,244,227,.12);--wc-card:rgba(46,24,58,.92);--wc-card2:rgba(62,34,78,.95);max-width:1180px;margin:0 auto;color:var(--wc-ink)}
.wc200Head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:4px 0 28px}
.wc200Head>div:first-child{max-width:680px;min-width:0}
.wc200Eyebrow{margin:0 0 10px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--w190-turq,#7ce0d4)}
.wc200Head h3{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.wc200Head p:not(.wc200Eyebrow){margin:0;font-size:17px;line-height:1.6;color:var(--wc-muted)}
.wc200New{display:flex;gap:10px;flex-wrap:wrap}
.wc200 .btn,.wc200 .quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:700 15px/1.2 Inter,sans-serif;white-space:nowrap;width:auto;margin:0}
.wc200 .quiet{background:rgba(253,244,227,.06);border:1px solid rgba(253,244,227,.22);color:var(--wc-ink)}
.wc200 .quiet:hover{background:rgba(253,244,227,.12)}
.wc200Bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.wc200Tabs{display:inline-flex;padding:5px;gap:4px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--wc-line)}
.wc200Tabs button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:var(--wc-muted);font:700 15px/1 Inter,sans-serif;cursor:pointer}
.wc200Tabs button span{min-width:24px;padding:3px 7px;border-radius:99px;background:rgba(253,244,227,.1);font-size:13px;text-align:center}
.wc200Tabs button[aria-selected=true]{background:var(--wc-ink);color:#24112f}
.wc200Tabs button[aria-selected=true] span{background:#24112f;color:var(--wc-ink)}
.wc200Tabs button:focus-visible,.wc200 button:focus-visible,.wc200Search input:focus-visible{outline:3px solid var(--w190-lime,#d9f36b);outline-offset:2px}
.wc200Search{flex:1 1 240px;max-width:340px}
.wc200Search input{width:100%;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid rgba(253,244,227,.22);background:rgba(0,0,0,.28);color:var(--wc-ink);font:500 16px Inter,sans-serif;box-sizing:border-box}
.wc200Search input::placeholder{color:rgba(253,244,227,.55)}
.wc200List{display:grid;grid-template-columns:1fr;gap:12px}
.wc200Card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;background:var(--wc-card);border:1px solid var(--wc-line);box-shadow:0 10px 26px rgba(0,0,0,.18);transition:border-color .15s,background .15s}
.wc200Card[hidden]{display:none}
.wc200Card:hover{border-color:rgba(253,244,227,.28);background:var(--wc-card2)}
.wc200Icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.wc200Quiz{background:rgba(124,224,212,.16);color:#7ce0d4}
.wc200Raffle{background:rgba(255,168,76,.16);color:#ffb870}
.wc200Main{min-width:0}
.wc200Main h4{margin:0 0 6px;font:750 18px/1.35 Inter,sans-serif;color:var(--wc-ink);overflow-wrap:anywhere}
.wc200Main p{margin:0;font-size:14px;line-height:1.5;color:var(--wc-muted);overflow-wrap:anywhere}
.wc200Main p i{font-style:normal;margin:0 8px;opacity:.6}
.wc200Main p span{white-space:nowrap}
.wc200Main small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:rgba(208,191,216,.8);overflow-wrap:anywhere}
.wc200 .wc200Host{background:rgba(255,138,61,.16);border:1px solid rgba(255,138,61,.55);color:#ffb27a}
.wc200 .wc200Host:hover{background:rgba(255,138,61,.26)}
.wc200Tag{display:inline-block;margin:0 0 6px;padding:3px 9px;border-radius:99px;background:rgba(217,243,107,.14);color:var(--w190-lime,#d9f36b);font:700 12px/1.4 Inter,sans-serif}
.wc200Acts{display:flex;gap:8px;align-items:center}
.wc200Acts .btn,.wc200Acts .quiet{min-height:44px;padding:0 18px;font-size:15px}
.wc200Ro{font-size:13px;color:var(--wc-muted)}
.wc200Empty{padding:44px 24px;text-align:center;border-radius:18px;border:1px dashed rgba(253,244,227,.24);background:rgba(0,0,0,.18)}
.wc200Empty[hidden]{display:none}
.wc200Empty b{display:block;font:750 20px/1.3 Inter,sans-serif;margin-bottom:8px}
.wc200Empty p{margin:0 auto 18px;max-width:420px;font-size:16px;line-height:1.6;color:var(--wc-muted)}
.wc200Note{max-width:none;margin:26px 0 0;padding:16px 18px;border-radius:14px;background:rgba(124,224,212,.08);border:1px solid rgba(124,224,212,.2);font-size:15px;line-height:1.6;color:var(--wc-muted)}
@media(max-width:720px){
  .wc200Head{align-items:stretch;margin-bottom:22px}
  .wc200Head p:not(.wc200Eyebrow){font-size:16px}
  .wc200New{display:grid;grid-template-columns:1fr 1fr}
  .wc200New>:only-child{grid-column:1/-1}
  .wc200Bar{flex-direction:column;align-items:stretch}
  .wc200Tabs{display:grid;grid-template-columns:1fr 1fr}
  .wc200Tabs button{justify-content:center}
  .wc200Search{max-width:none;flex:none}
  .wc200Card{grid-template-columns:44px minmax(0,1fr);padding:16px}
  .wc200Icon{width:44px;height:44px}
  .wc200Acts{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .wc200Main h4{font-size:17px}
}
@media(max-width:360px){.wc200New{grid-template-columns:1fr}.wc200 .btn,.wc200 .quiet{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.wc200Card{transition:none}}
@media(forced-colors:active){.wc200Card,.wc200Tabs,.wc200Empty{border:1px solid CanvasText}.wc200Tabs button[aria-selected=true]{outline:2px solid Highlight}}

/* r200 controls: one dropdown chevron, one close button, styled selects in every context.
   Loaded last (r200-* sheets sort after the older ones), so these are the final word. */

/* 1. Dropdown chevron standard. Same as the header Solutions summary::after: a 6px
   corner, 1.5px lime stroke, pointing down, turning to point up when open. */
.otChev{display:inline-block;flex:none;box-sizing:content-box;width:6px;height:6px;padding:0;border:0;border-right:1.5px solid var(--o189-lime,#c8f135);border-bottom:1.5px solid var(--o189-lime,#c8f135);transform:rotate(45deg);margin:-4px 0 0 2px;font-size:0!important;line-height:0;opacity:1!important;color:transparent!important;transition:transform .15s}
[aria-expanded=true]>.otChev,details[open]>summary>.otChev,.w190MoreNav[open] summary>span.otChev{transform:rotate(225deg);margin-top:4px}
#o189Header #profBtn .pcar.otChev,.profbtn .pcar.otChev{font-size:0!important;opacity:1;color:transparent!important;border-color:var(--o189-lime,#c8f135)!important}
body:is(.kidsGamePage,.kidsHowPage,.kidsInclusivePage,.schoolsPage) .profbtn .pcar.otChev{border-color:var(--o189-lime,#c8f135)!important}
.wsPage .wf200Nav .w190MoreNav>summary>span.otChev{font-size:0}
.pfGoalBtn .pfGoalCar.otChev{position:static;margin-left:auto}
.rfGhost .otChev{margin-left:8px;vertical-align:middle}
/* The styled select uses the same chevron, kept at the trigger's right edge. */
.otSelectChevron{box-sizing:content-box;width:6px!important;height:6px!important;right:18px;border:0!important;border-right:1.5px solid var(--o189-lime,#c8f135)!important;border-bottom:1.5px solid var(--o189-lime,#c8f135)!important;transform:translateY(-75%) rotate(45deg)!important;transition:transform .15s}
.otSelectTrigger[aria-expanded="true"] .otSelectChevron{transform:translateY(-25%) rotate(225deg)!important}
@media(prefers-reduced-motion:reduce){.otChev,.otSelectChevron{transition:none}}
@media(forced-colors:active){.otChev,.otSelectChevron{border-color:ButtonText!important}}

/* 2. Styled selects in the contexts that used to keep the native control. */
.live186Sheet .otSelect{margin:0}
.live186Sheet .otSelectTrigger{min-height:46px;padding:11px 42px 11px 12px;font:500 16px/1.4 Inter,system-ui,sans-serif;color:#fff7eb;background:#160d20;border:1px solid #795e88;border-radius:10px;clip-path:none}
.live186Sheet .otSelectTrigger:hover{border-color:var(--turq,#2bd9c6);background:#1b1027}
.w190Destination .otSelect{margin:0}
.w190Destination .otSelectTrigger{min-height:44px;padding:8px 40px 8px 12px;font:600 14px/1.35 Inter,sans-serif;color:var(--w190-ink,#fdf4e3);background:var(--w190-surface,#2c1738);border:1px solid var(--w190-border,#694f78);border-radius:8px;clip-path:none}
.w190Destination .otSelectTrigger:hover{border-color:var(--turq,#2bd9c6)}
/* Light surfaces (school contact, school demo, Kids dialogs): light trigger, plum chevron. */
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelect{margin:7px 0 0}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectTrigger{min-height:45px;padding:10px 40px 10px 12px;font:500 15px/1.35 Inter,sans-serif;color:#251332;background:#fff;border:1px solid #cdbfd6;border-radius:9px;clip-path:none;box-shadow:none}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectTrigger:hover{border-color:#7b4f95;background:#fff}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectTrigger:focus-visible{outline:3px solid #7b4f95!important;outline-offset:2px}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectTrigger[aria-expanded="true"]{border-color:#7b4f95;box-shadow:0 0 0 3px #7b4f9522}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectTrigger.placeholder .otSelectText{color:#6b5a75}
:is(.k184Dialog,.m184ContactForm,.m184DemoCanvas) .otSelectChevron{border-color:#6b3f86!important}
.m184DemoCanvas label+.otSelect{margin-top:6px}

/* 3. Close buttons. One 44px square touch target, icon centred by grid, never by
   text metrics: no line-height, no padding, the SVG is a block. */
:is(.xbtn,.live186Close,.betaSheetClose,.aiX,.o189Close){display:grid!important;place-items:center!important;place-content:center!important;box-sizing:border-box!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;padding:0!important;margin:0;line-height:0!important;font-size:0!important;text-align:center;flex:0 0 44px!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(.xbtn,.live186Close,.betaSheetClose,.aiX,.o189Close)>svg{display:block!important;margin:0!important;flex:none;pointer-events:none}
.k184Dialog .xbtn{border-radius:50%}
.sheet>.xbtn{position:absolute;top:12px;right:12px;z-index:3;border:1px solid transparent;border-radius:12px;background:#ffffff0d;color:var(--o189-cream,#fdf4e3)}
.sheet>.xbtn:hover{background:#ffffff1a}
.k184Dialog.sheet>.xbtn{top:14px;right:14px;border-radius:50%;background:#f1eaf5;color:#503562}
.k184Dialog.sheet>.xbtn:hover{background:#e6daee}
:is(.xbtn,.live186Close,.betaSheetClose,.aiX,.o189Close):focus-visible{outline:3px solid var(--o189-lime,#c8f135);outline-offset:2px}
.k184Dialog .xbtn:focus-visible{outline-color:#7b4f95}
/* Raffle name removes centre their mark the same way. */
.rfName button{display:grid;place-items:center;line-height:1;min-width:32px;padding:0 6px}
/* Header Solutions: the open state moved the chevron up, not down, because the header
   margin rule outranked the [open] one. Same open offset as every other chevron. */
#o189Header#o189Header .o189Nav details[open]>summary::after{margin-top:4px}

/* r200: Help Centre topic chips are real buttons (see helpJump in app.js). */
.hcJump .hcChip{
  font:700 11.4px 'Inter',sans-serif;color:var(--dim);background:transparent;cursor:pointer;
  padding:6px 11px;min-height:32px;border-radius:999px;border:1px solid rgba(253,244,227,.14);
  line-height:1.3;text-align:left;
}
.hcJump .hcChip:hover,.hcJump .hcChip[aria-current="true"]{color:var(--turq);border-color:rgba(43,217,198,.45)}
.hcJump .hcChip:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.hcH2:focus{outline:none}
.hcH2:focus-visible{outline:2px solid var(--turq);outline-offset:4px}
@media (max-width:480px){.hcJump .hcChip{min-height:36px;padding:8px 12px}}

/* r200 Host live setup: "Build the room" (owner-approved Option D).
   Cream quiz card, four numbered steps, real buttons with aria-pressed.
   Step 2 is four tappable time cards (2x2 on narrow phones); the progress bar
   sits above the cards and never runs through them. */
.h200Sheet{--h2Card:#2f1c3c;--h2Card2:#1a0e24;--h2Line:rgba(253,244,227,.12);--h2Dim:#d3c3dd;--h2Lime:#c8f135;--h2Dark:#1b1033}
.h200Sheet .live186Scroll{padding-top:16px}

/* Quiz card */
.h200Sheet .h200Hero{border-radius:18px;background:#fdf4e3;color:var(--h2Dark);padding:14px 14px 14px 16px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;margin:0 0 6px}
.h200Sheet .h200Hero::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(240,80,155,.32),transparent 70%);pointer-events:none}
.h200Sheet .h200HeroTxt{flex:1;min-width:0;position:relative;z-index:1;display:grid;gap:4px}
.h200Sheet .h200HeroTxt small{font:800 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:.14em;color:#8a3b69}
.h200Sheet .h200HeroTxt b{font:800 17px/1.25 Inter,system-ui,sans-serif;color:var(--h2Dark);overflow-wrap:anywhere}
.h200Sheet .h200HeroTxt span{font:600 12.5px/1.45 Inter,system-ui,sans-serif;color:#5b4468}
.h200Sheet .h200Avs{display:flex;flex:none;position:relative;z-index:1;padding-left:9px}
.h200Sheet .h200Avs i{width:30px;height:30px;border-radius:50%;border:2.5px solid #fdf4e3;margin-left:-9px;display:grid;place-items:center;font:800 11px/1 Inter,system-ui,sans-serif;font-style:normal;color:var(--h2Dark)}
.h200Sheet .h200Sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}

/* School class and session */
.h200Sheet .h200School{margin:14px 0 0;padding:13px;border:1px solid #624970;border-radius:14px;background:#2a1936;display:grid;gap:4px}
.h200Sheet .h200SchoolHead{font:800 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#c6e88a;margin:0 0 6px}
.h200Sheet .h200School .live186Field{margin:0 0 10px}

/* Steps */
.h200Sheet .h200Steps{list-style:none;margin:16px 0 0;padding:0;display:grid}
.h200Sheet .h200Step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px;position:relative;padding:0 0 20px;margin:0}
.h200Sheet .h200Step:last-child{padding-bottom:4px}
.h200Sheet .h200Step::before{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(var(--sc),rgba(253,244,227,.08))}
.h200Sheet .h200Step:last-child::before{display:none}
.h200Sheet .h200N{width:30px;height:30px;border-radius:50%;background:var(--sc);color:var(--h2Dark);display:grid;place-items:center;font:800 13px/1 Inter,system-ui,sans-serif}
.h200Sheet .h200Body{min-width:0}
.h200Sheet .h200Body h3{font:800 15px/1.35 Inter,system-ui,sans-serif;color:#fff7eb;margin:5px 0 10px;letter-spacing:0}
.h200Sheet .h200Hint{font:450 12px/1.55 Inter,system-ui,sans-serif;color:var(--h2Dim);margin:8px 0 0}
.h200Sheet .h200Body>.live186Text{margin-top:2px}

/* Shared button reset */
.h200Sheet :is(.h200Card,.h200Time,.h200Pill){appearance:none;-webkit-appearance:none;clip-path:none!important;box-shadow:none;margin:0;cursor:pointer;font-family:Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;transition:background-color .15s,border-color .15s,color .15s}
.h200Sheet :is(.h200Card,.h200Time,.h200Pill):disabled{cursor:not-allowed;opacity:.5}

/* Two-up picture cards (steps 1, 3, 4) */
.h200Sheet .h200Two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.h200Sheet .h200Card{width:100%;min-height:72px;border-radius:14px;padding:11px;background:var(--h2Card);border:2px solid transparent;color:#fff7eb;display:grid;align-content:center;gap:8px;text-align:left}
.h200Sheet .h200Card b{font:800 13.5px/1.3 Inter,system-ui,sans-serif;color:inherit;overflow-wrap:anywhere}
.h200Sheet .h200Card:not(:disabled):hover{border-color:rgba(253,244,227,.22)}
.h200Sheet .h200Card[aria-pressed=true]{border-color:var(--sc);background:linear-gradient(160deg,color-mix(in srgb,var(--sc) 18%,transparent),transparent 85%),var(--h2Card)}
.h200Sheet .h200Dots{display:flex;gap:3px;flex-wrap:wrap}
.h200Sheet .h200Dots i{width:14px;height:14px;border-radius:50%}
.h200Sheet .h200End,.h200Sheet .h200Pod{justify-items:center;text-align:center}
.h200Sheet .h200End svg{width:44px;height:30px}
.h200Sheet :is(.h200End,.h200Pod) b{font-size:13px}
.h200Sheet .h200Bars{display:flex;align-items:flex-end;gap:3px;height:34px}
.h200Sheet .h200Bars i{width:13px;border-radius:4px 4px 0 0}

/* Segmented pills (team count, scoring, session type, question order) */
.h200Sheet .h200Sub{display:grid;gap:7px;margin:12px 0 0}
.h200Sheet .h200Sub>span,.h200Sheet .h200Order>span{font:700 12.5px/1.4 Inter,system-ui,sans-serif;color:#fff7eb}
.h200Sheet .h200Sub>small{font:450 12px/1.55 Inter,system-ui,sans-serif;color:var(--h2Dim)}
.h200Sheet .h200Pills{display:flex;gap:4px;padding:4px;background:var(--h2Card2);border:1px solid rgba(253,244,227,.1);border-radius:14px;min-width:0}
.h200Sheet .h200Pill{flex:1 1 0;min-width:0;min-height:44px;border-radius:10px;border:0;background:transparent;color:var(--h2Dim);font:700 13px/1.2 Inter,system-ui,sans-serif;padding:6px 8px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.h200Sheet .h200Pill:hover{color:#fff7eb;background:rgba(253,244,227,.06)}
.h200Sheet .h200Pill[aria-pressed=true]{background:var(--sc,var(--h2Lime));color:var(--h2Dark)}
.h200Sheet .h200School .h200Pill[aria-pressed=true]{background:var(--h2Lime)}
.h200Sheet .h200Order{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0}
.h200Sheet .h200Order>span{white-space:nowrap}
.h200Sheet .h200Order .h200Pills{flex:0 1 180px}

/* Teams */
.h200Sheet .h200TeamNames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
.h200Sheet .h200TeamName{display:grid;gap:5px;min-width:0}
.h200Sheet .h200TeamName>span{display:flex;align-items:center;gap:6px;font:700 12px/1.3 Inter,system-ui,sans-serif;color:var(--h2Dim)}
.h200Sheet .h200TeamName>span i{width:12px;height:12px;border-radius:50%;background:var(--tc);flex:none}
.h200Sheet .h200TeamName input[type=text]{min-height:44px;border-radius:999px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--tc) 55%,#795e88);background:var(--h2Card2)}
.h200Sheet .h200Switch{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;min-height:44px;cursor:pointer;font:650 13.5px/1.45 Inter,system-ui,sans-serif;color:#fff7eb;position:relative}
.h200Sheet .h200Switch input{position:absolute;opacity:0;width:46px;height:28px;margin:0;left:0;top:0;cursor:pointer}
.h200Sheet .h200Switch>i{width:46px;height:28px;flex:none;border-radius:999px;background:var(--h2Card2);border:1px solid rgba(253,244,227,.25);position:relative;transition:background .15s}
.h200Sheet .h200Switch>i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--h2Dim);transition:transform .18s,background .18s}
.h200Sheet .h200Switch input:checked+i{background:#2bd9c6;border-color:#2bd9c6}
.h200Sheet .h200Switch input:checked+i::after{transform:translateX(18px);background:var(--h2Dark)}
.h200Sheet .h200Switch input:focus-visible+i{outline:3px solid #b4e6f1;outline-offset:3px}
.h200Sheet .h200Switch small{display:block;font:450 12px/1.5 Inter,system-ui,sans-serif;color:var(--h2Dim);margin-top:2px}

/* Step 2: time cards. Progress bar ABOVE, never through the cards. */
.h200Sheet .h200Meter{height:6px;border-radius:999px;background:var(--h2Card2);margin:0 0 10px;overflow:hidden}
.h200Sheet .h200Meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff7a29,#2bd9c6,var(--h2Lime));transition:width .2s}
.h200Sheet .h200Times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.h200Sheet .h200Time{width:100%;min-height:60px;border-radius:13px;padding:9px 6px;background:var(--h2Card);border:2px solid rgba(253,244,227,.1);color:#fff7eb;display:grid;align-content:center;justify-items:center;gap:3px;text-align:center}
.h200Sheet .h200Time b{font:800 13px/1.2 Inter,system-ui,sans-serif;color:inherit}
.h200Sheet .h200Time small{font:600 11.5px/1.25 Inter,system-ui,sans-serif;color:var(--h2Dim)}
.h200Sheet .h200Time:hover{border-color:rgba(200,241,53,.45)}
.h200Sheet .h200Time[aria-pressed=true]{background:var(--h2Lime);border-color:var(--h2Lime);color:var(--h2Dark)}
.h200Sheet .h200Time[aria-pressed=true] small{color:#3a4a10}
.h200Sheet .h200Step:nth-child(2) .h200Pill[aria-pressed=true]{background:var(--h2Lime)}
.h200Sheet .h200Support{margin-top:12px}
.h200Sheet .h200Support>summary{min-height:52px;padding:11px 13px;font-size:13.5px}

@media(max-width:479px){
  .h200Sheet .h200Times{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h200Sheet .h200Time{min-height:56px}
}
@media(max-width:359px){
  .h200Sheet .h200Step{grid-template-columns:26px minmax(0,1fr);gap:0 9px}
  .h200Sheet .h200N{width:26px;height:26px;font-size:12px}
  .h200Sheet .h200Step::before{left:12px;top:30px}
  .h200Sheet .h200Card{padding:10px 9px}
  .h200Sheet .h200Card b{font-size:12.5px}
  .h200Sheet .h200Avs i{width:26px;height:26px}
  .h200Sheet .h200Dots i{width:12px;height:12px}
  .h200Sheet .h200Order{flex-wrap:wrap}
  .h200Sheet .h200Order .h200Pills{flex:1 1 100%}
}

/* r200 images: key content images are real, right-clickable <img> elements.
   The homepage hero faces sit in a pointer-events:none decorative layer; the
   photos themselves take pointer events again so the browser image menu
   ("Copy image address", "Save image") targets them. The layer stays inert. */
.homeHero .faces .face img{pointer-events:auto}
/* The gathering photo now carries width/height attributes; keep its CSS
   aspect-ratio (3/2) in charge of the height exactly as before. */
.pband .ph img{height:auto}

/* r200: Inclusive creator tools, "Review the suggestions" sheet.
   One clear row per suggestion: checkbox beside its label, one-line help,
   editable content underneath, all left aligned. Loaded after app.css. */
.incResults .incSummary{margin:6px 0 2px;font-size:13.6px;line-height:1.5;color:var(--ink);font-weight:600}
.incResults .incSubLead{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--dim)}
.incResults .incSubLead b{color:var(--ink);font-weight:700}
.incResults .incNextNote{margin:0 0 12px;font-size:11.6px;line-height:1.45;color:var(--dim)}
.incResults .incReviewList{gap:10px;margin:0 0 12px}
.incResults .incReviewCard{padding:12px 13px;display:flex;flex-direction:column;gap:0}
.incResults .incReviewTop{flex-wrap:nowrap;margin:0 0 4px}
.incResults .incReviewTop>div{min-width:0}
.incResults .incReviewTop b{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.incResults .incReviewTop small{font-size:11.6px;line-height:1.45;overflow-wrap:anywhere}
.incResults .incExisting,.incResults .incOkay{margin-left:0}

/* Suggestion rows, indented under the question number */
.incResults .incSug{margin:8px 0 0 36px;padding-top:9px;border-top:1px solid var(--panel2)}
.incResults .incSugNone{margin:8px 0 0 36px;padding-top:8px;border-top:1px solid var(--panel2);font-size:11.6px;line-height:1.45;color:var(--dim);display:flex;align-items:center;gap:6px}
.incResults .incPaceLine svg{flex:none}

.incResults label.incSugHead{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:flex-start!important;gap:9px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;cursor:pointer;width:100%;text-align:left}
.incResults label.incSugHead input[type=checkbox]{flex:0 0 auto!important;width:18px!important;height:18px!important;min-width:18px!important;margin:1px 0 0!important;padding:0!important;accent-color:var(--vio);cursor:pointer;position:static!important}
.incResults label.incSugHead>span{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;text-align:left}
.incResults label.incSugHead b{font-size:12.8px;font-weight:700;line-height:1.35;color:var(--ink)}
.incResults label.incSugHead small{font-size:11.4px;line-height:1.4;color:var(--dim)}

.incResults .incSugBody{margin:7px 0 0 27px}
.incResults .incBefore{font-size:11.4px;line-height:1.45;color:var(--dim);margin:0 0 5px;overflow-wrap:anywhere}
.incResults .incBefore span{display:inline-block;margin-right:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);opacity:.8}
.incResults textarea.incReviewText{display:block;margin:0!important;width:100%;min-height:0;height:auto;padding:8px 10px;font-size:13px;line-height:1.45;resize:vertical;box-sizing:border-box}
.incResults input.incReviewCue{display:block;width:120px;min-height:40px;margin:0!important;max-width:100%;padding:7px 10px;font-size:15px;box-sizing:border-box}

/* Optional answer symbols: collapsed until ticked */
.incResults .incOptBlock .incOptGrid{display:none}
.incResults .incOptBlock.open .incOptGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.incResults .incOptGrid label{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;margin:0;border:1px solid var(--panel2);border-radius:9px;padding:3px 3px 3px 9px;min-width:0;background:none}
.incResults .incOptGrid label span{flex:1 1 auto;min-width:0;margin:0;font-size:12px;line-height:1.3;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.incResults .incOptGrid input{flex:0 0 auto;width:52px!important;min-width:0;min-height:38px;height:38px;margin:0!important;padding:4px;font-size:14px;text-align:center;background:var(--bg);border:1px solid var(--panel2);color:var(--ink);border-radius:7px;box-sizing:border-box}
.incResults .incOptGrid input::placeholder{font-size:10.5px}
.incResults .incOptGrid input:focus{outline:2px solid rgba(139,92,246,.34);border-color:rgba(139,92,246,.55)}

/* Sticky footer: keep it solid so it never shows content through it */
.incResults .incApplyBar{z-index:2;padding-top:14px;background:linear-gradient(to bottom,rgba(44,23,56,0),var(--panel) 12px)}

@media (max-width:520px){
  .incResults .incSug,.incResults .incSugNone{margin-left:0}
  .incResults .incOptBlock .incSugBody{margin-left:0}
  .incResults textarea.incReviewText{font-size:16px}
  .incResults .incReviewTop{flex-wrap:wrap}
  .incResults .incReviewTop>div{flex:1 1 calc(100% - 40px)}
  .incResults .incExisting,.incResults .incOkay{margin-left:36px}
}
@media (max-width:359px){
  .incResults .incSugBody{margin-left:0}
  .incResults .incOptBlock.open .incOptGrid{grid-template-columns:1fr}
}

/* r200: approved support visible in the Studio */
.slide .incBadge{display:block;margin-top:5px;padding:3px 7px;border-radius:7px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);color:var(--dim);font-size:11px;line-height:1.4;font-weight:600;text-transform:none;letter-spacing:0;overflow-wrap:anywhere;width:fit-content;max-width:100%;box-sizing:border-box}
.slide .incBadge b{color:var(--vio);font-weight:800}
.slide .incBadge i{font-style:normal}
.incAttached.incEdPanel{flex-direction:column;align-items:stretch;gap:9px}
.incEdPanel>div{flex:none}
.incEdPanel>.incEdHead{display:flex;flex-direction:row;gap:10px;align-items:center;text-align:left}
.incEdPanel .incEdHead>span{color:var(--vio);flex:none}
.incEdPanel .incEdHead>div{display:flex;flex-direction:column;min-width:0;flex:1}
.incEdPanel>.incEdCompare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.incEdCompare>div,.incEdSym{min-width:0;padding:8px 10px;border-radius:9px;background:var(--bg);border:1px solid var(--panel2)}
.incEdCompare span,.incEdSym span{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.incEdCompare p,.incEdSym p{margin:0;font-size:12.6px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.incEdCompare>div:last-child{border-color:rgba(139,92,246,.4)}
.incEdPanel>.incEdActions{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px}
.incEdActions .quiet{flex:0 1 auto;width:auto;margin:0;padding:8px 13px;justify-content:center;min-height:40px;font-size:12px;white-space:normal;text-align:center}
.incEdPanel .incEdActions .quiet.incEdRemove{color:var(--mag);border-color:rgba(240,80,155,.4)}
.incResults .incEveryoneBtn{margin-top:7px;min-height:36px;font-size:11.8px;white-space:normal;text-align:left}
.incResults .incEveryoneDone{color:var(--ink)}
.incResults .incEveryoneDone svg{color:var(--lime);flex:none}
@media (max-width:520px){
  .incEdPanel>.incEdCompare{grid-template-columns:1fr}
  .incEdActions .quiet{flex:1 1 100%}
}
/* The undo toast must show above the review sheet, clear of its Apply bar. */
body:has(#sheetWrap.on .incResults) .snack{z-index:45;top:14px;bottom:auto}

/* r200 Otiya Kids pages: landing + topic picker, setup, How it works and Inclusive play.
   Scoped to the Kids body classes only, so the homepage Kids section (ui/r200-kids.css, .k200)
   and the Schools pages that share .m184 are not affected. Bright, rounded and tidy for ages 6 to 12.
   Decoration is CSS only; motion is transform-only and switched off for prefers-reduced-motion. */

body.kidsGamePage:has(.k184),body.kidsHowPage,body.kidsInclusivePage{
  --kp-plum:#2a1538;--kp-ink:#2a1538;--kp-muted:#5d4d69;--kp-cream:#fff8ec;
  --kp-turq:#2bd9c6;--kp-pink:#f0509b;--kp-orange:#ff7a2f;--kp-yellow:#ffc93c;--kp-lime:#c8f135;--kp-violet:#8b5cf6;
  background:var(--kp-cream)!important;color:var(--kp-ink)}
body.kidsHowPage .pattern,body.kidsHowPage .bgPattern,body.kidsInclusivePage .pattern,body.kidsInclusivePage .bgPattern{display:none}

/* ---------- Shared: headings and chunky buttons ---------- */
body.kidsGamePage .k184 h1,body.kidsHowPage .m184 h1,body.kidsInclusivePage .m184 h1{color:var(--kp-ink);letter-spacing:-.04em;line-height:1.15}
body.kidsGamePage .k184 .k184Ey,body.kidsHowPage .m184 .k184Ey,body.kidsInclusivePage .m184 .k184Ey{display:inline-block;width:auto;color:#6a2d86;background:#f3e8ff;border-radius:999px;padding:6px 12px;font-size:11px;letter-spacing:.1em}
body.kidsGamePage .k184 .k184Primary,body.kidsHowPage .m184 .k184Primary,body.kidsInclusivePage .m184 .k184Primary{min-height:52px;padding:14px 26px;border-radius:18px;border:0;background:linear-gradient(135deg,#ff7a2f,#f0509b)!important;color:#fff!important;font:700 16px/1.3 'Inter',sans-serif;box-shadow:0 5px 0 #b8325f;transition:transform .12s ease,box-shadow .12s ease}
body.kidsGamePage .k184 .k184Primary:hover,body.kidsHowPage .m184 .k184Primary:hover,body.kidsInclusivePage .m184 .k184Primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #b8325f}
body.kidsGamePage .k184 .k184Primary:active,body.kidsHowPage .m184 .k184Primary:active,body.kidsInclusivePage .m184 .k184Primary:active{transform:translateY(3px);box-shadow:0 2px 0 #b8325f}
body.kidsGamePage .k184 .k184Secondary,body.kidsHowPage .m184 .k184Secondary,body.kidsInclusivePage .m184 .k184Secondary{min-height:52px;padding:14px 22px;border-radius:18px;border:2px solid #d9c8ea;background:#fff;color:var(--kp-plum)!important;font:700 15px/1.3 'Inter',sans-serif;box-shadow:0 4px 0 #e6d9f1}
body.kidsGamePage .k184 .k184Secondary:hover,body.kidsHowPage .m184 .k184Secondary:hover,body.kidsInclusivePage .m184 .k184Secondary:hover{background:#faf5ff}

/* ---------- Landing hero ---------- */
body.kidsGamePage .k184 .k185Intro{isolation:isolate;overflow:hidden;border:0;border-radius:36px;padding:36px 40px;background:#fff;box-shadow:0 6px 0 #f1dfc6,0 20px 40px -26px rgba(42,21,56,.35)}
body.kidsGamePage .k184 .k185Intro::before,body.kidsGamePage .k184 .k185Intro::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
body.kidsGamePage .k184 .k185Intro::before{width:260px;height:260px;right:-90px;top:-110px;background:#c9f5ee}
body.kidsGamePage .k184 .k185Intro::after{width:200px;height:200px;right:-70px;bottom:-120px;background:#ffd9ea}
body.kidsGamePage .k184 .k185IntroCopy{position:relative;min-width:0}
body.kidsGamePage .k184 .k185Intro .k184Logo.k200Logo{display:block;margin:0 0 18px}
body.kidsGamePage .k184 .k185Intro .k184Ey{margin:0 0 14px;color:#8a4a00;background:#fff1c9}
body.kidsGamePage .k184 .k185Intro h1{font-size:clamp(32px,4.2vw,50px);margin-bottom:14px}
body.kidsGamePage .k184 .k185Intro h1>span{color:#c42a72}
body.kidsGamePage .k184 .k185Intro p{font-size:18px;line-height:1.55;color:var(--kp-muted);max-width:460px}
body.kidsGamePage .k184 .k184IntroLinks{gap:10px;margin-top:18px}
body.kidsGamePage .k184 .k184IntroLinks .k184Text{min-height:48px;padding:10px 18px;border-radius:999px;background:#fff;border:2px solid #e7dbf2;color:var(--kp-plum);font-size:15px;font-weight:700;box-shadow:0 3px 0 #eee3f6}
body.kidsGamePage .k184 .k184IntroLinks .k184Text:hover{text-decoration:none;background:#faf5ff}
body.kidsGamePage .k184 .k185Wonder{background:#fff8ec;box-shadow:0 8px 0 #f1dfc6;border-radius:28px}
body.kidsGamePage .k184 .k185World{border-radius:26px}

/* Gentle floating sparkle and dot in the illustration (decorative only). */
@keyframes kpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body.kidsGamePage .k184 .k185Star{display:inline-block;animation:kpBob 3.6s ease-in-out infinite}
body.kidsGamePage .k184 .k185Dot{animation:kpBob 4.4s ease-in-out infinite .6s}

/* ---------- Steps ---------- */
body.kidsGamePage .k184 .k184Steps{flex-wrap:wrap;gap:8px;margin:28px 0 30px}
body.kidsGamePage .k184 .k184Steps>button,body.kidsGamePage .k184 .k184Steps>span{min-height:44px;padding:6px 16px 6px 6px;border-radius:999px;background:#fff;border:2px solid #eee2f5;color:#6e5f78;font-size:13px}
body.kidsGamePage .k184 .k184Steps em{width:30px;height:30px;flex:0 0 30px;border:0;background:#f3ecf8;color:#6e5f78;font-weight:800}
body.kidsGamePage .k184 .k184Steps [aria-current=step]{background:var(--kp-plum);border-color:var(--kp-plum);color:#fff}
body.kidsGamePage .k184 .k184Steps [aria-current=step] em{background:var(--kp-yellow);color:var(--kp-plum)}
body.kidsGamePage .k184 .k184Steps>button{color:var(--kp-plum)}
body.kidsGamePage .k184 .k184Steps>button em{background:var(--kp-turq);color:var(--kp-plum)}

/* ---------- Topic tiles ---------- */
body.kidsGamePage .k184 .k184SectionHead h2{font-size:clamp(23px,2.6vw,30px)}
body.kidsGamePage .k184 .k184SectionHead>span{font-size:14px;font-weight:600;color:var(--kp-muted)}
body.kidsGamePage .k184 .k184Topics{gap:16px}
body.kidsGamePage .k184 .k184TopicCard{--tile:#e8defc;--edge:#c9b5f2;--badge:#7c4ddb;--badge-ink:#fff;min-height:108px;gap:16px;padding:18px 18px 18px 16px;border-radius:26px;border:2px solid var(--edge)!important;background:var(--tile)!important;box-shadow:0 5px 0 var(--edge)!important;transition:transform .14s ease,box-shadow .14s ease}
body.kidsGamePage .k184 .k184TopicCard.mint{--tile:#d6f7ef;--edge:#94dccf;--badge:#0f9e8f}
body.kidsGamePage .k184 .k184TopicCard.peach{--tile:#ffe6d1;--edge:#f7bd92;--badge:#ea6a1f}
body.kidsGamePage .k184 .k184TopicCard.lilac{--tile:#ebe2fd;--edge:#c9b5f2;--badge:#7c4ddb}
body.kidsGamePage .k184 .k184TopicCard.lemon{--tile:#f4f9cf;--edge:#d3e27f;--badge:#c8f135;--badge-ink:#2a1538}
body.kidsGamePage .k184 .k184TopicCard.pink{--tile:#ffe1ee;--edge:#f4a9cb;--badge:#e0408a}
body.kidsGamePage .k184 .k184TopicCard:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--edge)!important}
body.kidsGamePage .k184 .k184TopicCard:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)!important}
body.kidsGamePage .k184 .k184TopicIcon{width:62px;height:62px;flex:0 0 62px;border-radius:20px;background:var(--badge)!important;color:var(--badge-ink)!important;box-shadow:0 4px 0 rgba(42,21,56,.14)}
body.kidsGamePage .k184 .k184TopicCard b{font:800 18px/1.25 'Inter',sans-serif;color:var(--kp-ink)}
body.kidsGamePage .k184 .k184TopicCard small{font-size:14px;color:#4f4159}
body.kidsGamePage .k184 .k184Arrow{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#fff;color:var(--kp-plum)}

/* Reassurance chips under the tiles */
body.kidsGamePage .k184 .k184Comfort{gap:10px;border-top:0;padding:8px 0 16px;margin-top:30px}
body.kidsGamePage .k184 .k184Comfort span{padding:10px 16px;border-radius:999px;background:#fff;border:2px solid #efe4f6;color:var(--kp-plum);font-size:14px}
body.kidsGamePage .k184 .k184Comfort span:nth-child(1) svg{color:#0f9e8f}
body.kidsGamePage .k184 .k184Comfort span:nth-child(2) svg{color:#ea6a1f}
body.kidsGamePage .k184 .k184Comfort span:nth-child(3) svg{color:#e0408a}
body.kidsGamePage .k184 .k185InstallCard{border:2px solid #e2d4f1;border-radius:22px;background:#fff}

/* ---------- Setup: players, ready, preview ---------- */
body.kidsGamePage .k184Setup>.k184Logo.k200Logo{display:block}
body.kidsGamePage .k184Setup .k184Head h1{font-size:clamp(28px,3.4vw,40px)}
body.kidsGamePage .k184Setup .k184Head p{font-size:17px}
body.kidsGamePage .k184Setup .k184Mode{gap:14px}
body.kidsGamePage .k184Setup .k184Mode button{border:2px solid #eadff2;border-radius:24px;padding:20px;box-shadow:0 4px 0 #eee4f5;min-height:100px}
body.kidsGamePage .k184Setup .k184Mode button svg{color:var(--kp-violet)}
body.kidsGamePage .k184Setup .k184Mode button[aria-pressed=true]{border-color:#17b8a6;background:#e3faf5;box-shadow:0 4px 0 #94dccf}
body.kidsGamePage .k184Setup .k184Mode button[aria-pressed=true] svg{color:#0b7d70}
body.kidsGamePage .k184Setup .k184Mode b{font-size:17px}
body.kidsGamePage .k184Setup .k184Mode small{font-size:13px}
body.kidsGamePage .k184Setup .k184Player{border:2px solid #eadff2;border-radius:24px;box-shadow:0 4px 0 #eee4f5}
body.kidsGamePage .k184Setup input.kName{border:2px solid #dcd0e6;border-radius:14px;height:48px;font-size:16px}
body.kidsGamePage .k184Setup .k184Band button{min-height:48px;border:2px solid #eadff2;border-radius:14px}
body.kidsGamePage .k184Setup .k184Band button[aria-pressed=true]{background:var(--kp-plum);border-color:var(--kp-plum)}
body.kidsGamePage .k184Setup .k184Add{min-height:56px;border:2px dashed #c6b2dc;border-radius:20px;background:#fff;font-size:15px;color:var(--kp-plum)}
body.kidsGamePage .k184Setup .k184Add:hover{background:#faf5ff}
body.kidsGamePage .k184Setup .k184Empty{font-size:16px;color:var(--kp-muted)}
body.kidsGamePage .k184Setup .k184Actions .k184Text{min-height:48px;font-size:15px}
body.kidsGamePage .k184Setup .k184Summary,body.kidsGamePage .k184Setup .k184Details,body.kidsGamePage .k184Setup .k184Essentials,body.kidsGamePage .k184Setup .k184PreviewRow{border:2px solid #eadff2;border-radius:22px}
body.kidsGamePage .k184Setup .k184Summary>.k184Details{border:0;border-top:2px solid #f1e9f6;border-radius:0}
body.kidsGamePage .k184Setup .k184SummaryIcon{background:#fff1c9;color:#8a4a00;border-radius:16px}
body.kidsGamePage .k184Setup .k184Segments button,body.kidsGamePage .k184Setup .k184Presets button{min-height:48px;border-radius:14px}
body.kidsGamePage .k184Setup .k184Switch[aria-checked=true] .k184Track{background:#0f9e8f}

/* ---------- How it works + Inclusive play ---------- */
body.kidsHowPage .m184 .m184Hero,body.kidsInclusivePage .m184 .m184Hero{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:36px;background:#fff;box-shadow:0 6px 0 #f1dfc6,0 20px 40px -26px rgba(42,21,56,.35)}
body.kidsHowPage .m184 .m184Hero::before,body.kidsInclusivePage .m184 .m184Hero::before{content:"";position:absolute;z-index:-1;width:280px;height:280px;border-radius:50%;right:-100px;top:-120px;background:#c9f5ee;pointer-events:none}
body.kidsHowPage .m184 .m184Hero::after,body.kidsInclusivePage .m184 .m184Hero::after{content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-70px;bottom:-110px;background:#ffd9ea;pointer-events:none}
body.kidsHowPage .m184 .m184Hero .k184Logo.k200Logo,body.kidsInclusivePage .m184 .m184Hero .k184Logo.k200Logo{display:block;margin:0 0 20px}
body.kidsHowPage .m184 .m184Hero .k184Ey,body.kidsInclusivePage .m184 .m184Hero .k184Ey{margin-bottom:14px}
body.kidsHowPage .m184 .m184Hero h1,body.kidsInclusivePage .m184 .m184Hero h1{font-size:clamp(32px,4.2vw,50px)}
body.kidsHowPage .m184 .m184Hero p,body.kidsInclusivePage .m184 .m184Hero p{font-size:18px;line-height:1.55}
body.kidsHowPage .m184 .m184Trust,body.kidsInclusivePage .m184 .m184Trust{gap:10px}
body.kidsHowPage .m184 .m184Trust span,body.kidsInclusivePage .m184 .m184Trust span{padding:8px 14px;border-radius:999px;background:#fff8ec;border:2px solid #f1e3cc;color:var(--kp-plum);font-weight:600}
body.kidsHowPage .m184 .m184Section,body.kidsInclusivePage .m184 .m184Section{border-bottom:0;padding:40px 0 8px}
body.kidsHowPage .m184 .m184Section h2,body.kidsInclusivePage .m184 .m184Section h2{font-size:clamp(24px,2.8vw,32px)}
body.kidsHowPage .m184 .m184Card,body.kidsInclusivePage .m184 .m184Card{--tile:#ebe2fd;--edge:#c9b5f2;--badge:#7c4ddb;background:var(--tile);border:2px solid var(--edge);border-radius:26px;box-shadow:0 5px 0 var(--edge);padding:24px}
body.kidsHowPage .m184 .m184Card:nth-child(3n+1),body.kidsInclusivePage .m184 .m184Card:nth-child(3n+1){--tile:#d6f7ef;--edge:#94dccf;--badge:#0f9e8f}
body.kidsHowPage .m184 .m184Card:nth-child(3n+2),body.kidsInclusivePage .m184 .m184Card:nth-child(3n+2){--tile:#ffe6d1;--edge:#f7bd92;--badge:#ea6a1f}
body.kidsHowPage .m184 .m184Card:nth-child(3n),body.kidsInclusivePage .m184 .m184Card:nth-child(3n){--tile:#ffe1ee;--edge:#f4a9cb;--badge:#e0408a}
body.kidsHowPage .m184 .m184Card h3,body.kidsInclusivePage .m184 .m184Card h3{font-size:18px;font-weight:800}
body.kidsHowPage .m184 .m184Card p,body.kidsInclusivePage .m184 .m184Card p{font-size:15px;color:#4f4159}
body.kidsHowPage .m184 .m184Card .step{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--badge);color:#fff;font-size:20px;margin-bottom:16px;box-shadow:0 4px 0 rgba(42,21,56,.14)}
body.kidsHowPage .m184 .m184Card .m184Icon,body.kidsInclusivePage .m184 .m184Card .m184Icon{width:52px;height:52px;border-radius:18px;background:var(--badge)!important;color:#fff!important;box-shadow:0 4px 0 rgba(42,21,56,.14)}
body.kidsHowPage .m184 .m184Panel,body.kidsInclusivePage .m184 .m184Panel{border:2px solid #eadff2;border-radius:26px;box-shadow:0 4px 0 #eee4f5}
body.kidsHowPage .m184 .m184Callout,body.kidsInclusivePage .m184 .m184Callout{border:0;border-radius:30px;background:var(--kp-plum);box-shadow:0 6px 0 #d8c7e8}
body.kidsHowPage .m184 .m184Callout h2,body.kidsInclusivePage .m184 .m184Callout h2{color:#fff}
body.kidsHowPage .m184 .m184Callout p,body.kidsInclusivePage .m184 .m184Callout p{color:#e6d8f0}
body.kidsInclusivePage .m184 .m184Preview{border-radius:28px}
/* The hero intro size above also caught the footnote inside the preview card,
   so "These are preferences, not labels..." read as a headline. Keep it fine
   print on every width. */
body.kidsHowPage .m184 .m184Hero .m184Preview p,body.kidsInclusivePage .m184 .m184Hero .m184Preview p{font-size:13px;line-height:1.45;font-weight:500;color:#b3a0c0;margin:14px 0 0}

/* ---------- Phones ---------- */
@media(max-width:900px){
  body.kidsGamePage .k184 .k185Intro{grid-template-columns:1fr}
  body.kidsGamePage .k184 .k185Wonder{display:none}
}
@media(max-width:760px){
  body.kidsGamePage .k184 .k185Intro{padding:26px 22px;border-radius:30px}
  body.kidsGamePage .k184 .k185Intro::before{width:190px;height:190px;right:-80px;top:-90px}
  body.kidsGamePage .k184 .k185Intro p{font-size:17px}
}
@media(max-width:600px){
  body.kidsGamePage .k184 .k185Intro h1{font-size:30px}
  body.kidsGamePage .k184 .k184IntroLinks .k184Text{flex:1 1 auto}
  body.kidsGamePage .k184 .k184Steps{gap:6px}
  body.kidsGamePage .k184 .k184Steps>button,body.kidsGamePage .k184 .k184Steps>span{padding:4px 12px 4px 4px;font-size:12px}
  body.kidsGamePage .k184 .k184Steps em{width:28px;height:28px;flex-basis:28px}
  body.kidsGamePage .k184 .k184Topics{gap:12px}
  body.kidsGamePage .k184 .k184TopicCard{min-height:92px;padding:14px;gap:13px;border-radius:22px}
  body.kidsGamePage .k184 .k184TopicIcon{width:54px;height:54px;flex-basis:54px;border-radius:17px}
  body.kidsGamePage .k184 .k184TopicCard b{font-size:17px}
  body.kidsGamePage .k184 .k184Arrow{width:32px;height:32px;flex-basis:32px}
  body.kidsGamePage .k184Setup .k184Mode button{padding:16px;border-radius:20px}
  body.kidsHowPage .m184 .m184Hero,body.kidsInclusivePage .m184 .m184Hero{padding:26px 22px;border-radius:30px}
  body.kidsHowPage .m184 .m184Hero h1,body.kidsInclusivePage .m184 .m184Hero h1{font-size:30px}
  body.kidsHowPage .m184 .m184Hero p,body.kidsInclusivePage .m184 .m184Hero p{font-size:17px}
  body.kidsHowPage .m184 .m184Btns>*,body.kidsInclusivePage .m184 .m184Btns>*{flex:1 1 100%}
}
/* Phones: keep the mint blob in the corner, clear of the Otiya Kids lock-up. */
@media(max-width:600px){
  body.kidsHowPage .m184 .m184Hero::before,body.kidsInclusivePage .m184 .m184Hero::before{width:170px;height:170px;right:-84px;top:-104px}
}
@media(max-width:360px){
  body.kidsGamePage .k184 .k185Intro{padding:22px 18px}
  body.kidsGamePage .k184 .k185Intro h1{font-size:27px}
  body.kidsGamePage .k184 .k184Steps>button span,body.kidsGamePage .k184 .k184Steps>span span{font-size:11px}
  body.kidsGamePage .k184 .k184TopicCard{padding:12px;gap:11px}
  body.kidsGamePage .k184 .k184TopicIcon{width:48px;height:48px;flex-basis:48px}
  body.kidsGamePage .k184 .k184Arrow{display:none}
}

/* ---------- Motion and contrast safety ---------- */
@media(prefers-reduced-motion:reduce){
  body.kidsGamePage .k184 *,body.kidsHowPage .m184 *,body.kidsInclusivePage .m184 *{animation:none!important;transition:none!important}
  body.kidsGamePage .k184 .k184TopicCard:hover,body.kidsGamePage .k184 .k184Primary:hover,body.kidsHowPage .m184 .k184Primary:hover,body.kidsInclusivePage .m184 .k184Primary:hover{transform:none}
}
@media(forced-colors:active){
  body.kidsGamePage .k184 .k185Intro::before,body.kidsGamePage .k184 .k185Intro::after,body.kidsHowPage .m184 .m184Hero::before,body.kidsHowPage .m184 .m184Hero::after,body.kidsInclusivePage .m184 .m184Hero::before,body.kidsInclusivePage .m184 .m184Hero::after{display:none}
}

/* r200 Otiya Kids: homepage section (.k200) and the Otiya Kids lock-up on Kids pages (.k200Logo).
   Homepage keeps its Otiya logo image + coloured Kids label treatment. Animation is transform/opacity only inside a
   fixed frame; the static (reduced-motion) state is the answered question. */

/* ---------- The Otiya Kids lock-up: owner-approved "A · Sunny" (previews/kids-logo-options.html) ----------
   The official otiya wordmark component, a thin divider, then "Kids" in Unbounded 700 (-.04em) with one
   Otiya colour per letter: orange, sun yellow, lime, pink. On dark backgrounds the bright letters sit as they
   are; on cream or white they keep the bright colours and add the small plum shadow from the preview. */
.kBrandLockup{align-items:center}
.kBrandLockup .kKidsWord{display:inline-block;gap:0;margin:0 0 0 .6em;padding:0 0 0 .6em;border-left:1px solid #725980;font-family:'Unbounded','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;white-space:nowrap;text-shadow:none}
.kBrandLockup .kKidsWord i{display:inline;font-style:normal;transform:none}
.kBrandLockup .kKidsWord i:nth-child(1){color:#ff7a29}
.kBrandLockup .kKidsWord i:nth-child(2){color:#ffc53d}
.kBrandLockup .kKidsWord i:nth-child(3){color:#c8f135}
.kBrandLockup .kKidsWord i:nth-child(4){color:#f0509b}

/* Kids pages (landing, setup, in-game header, How it works, Inclusive play): cream/white, no pill. */
.k184Logo.k200Logo{display:inline-flex;align-items:center;width:max-content;max-width:100%;height:auto;padding:0;gap:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none;line-height:1;vertical-align:middle;flex:0 0 auto;white-space:nowrap;overflow:visible}
.k184Logo.k200Logo .kBrandLockup{display:inline-flex;align-items:center;gap:0;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;transform:none;font-size:52px}
.k184Logo.k200Logo .otiyaWordmark{--ow-size:1em!important;font-size:1em;text-shadow:none}
.k184Logo.k200Logo .owOti{color:#2a1538!important}
.k184Logo.k200Logo .owYa{color:#ff7a29!important}
.k184Logo.k200Logo .owGem{box-shadow:none}
.k184Logo.k200Logo .kKidsWord{font-size:.46em;margin-left:.62em;padding-left:.62em;border-left-color:#cdbfd6;text-shadow:none}
/* Cream/white Kids pages: option A's deeper tints, each letter at least 3:1 on cream (3.5 to 4.5). Bright set stays on dark. */
.k184Logo.k200Logo .kKidsWord i:nth-child(1){color:#d4520a}
.k184Logo.k200Logo .kKidsWord i:nth-child(2){color:#b77400}
.k184Logo.k200Logo .kKidsWord i:nth-child(3){color:#5b8a00}
.k184Logo.k200Logo .kKidsWord i:nth-child(4){color:#d02a78}
.k184Logo.k200Logo.small .kBrandLockup{font-size:28px}
/* Compact lock-up (Players step, setup): "Kids" cap height about 14.5px so it reads at a glance. */
.k184Logo.k200Logo.small .kKidsWord{font-size:.72em;margin-left:.5em;padding-left:.5em}
.k185Intro .k184Logo.k200Logo,.k185PlayBrand .k184Logo.k200Logo{transform:none}
@media(max-width:600px){.k184Logo.k200Logo .kBrandLockup{font-size:42px}.k184Logo.k200Logo.small .kBrandLockup{font-size:27px}}
@media(max-width:350px){.k184Logo.k200Logo .kBrandLockup{font-size:36px}}

/* Install sheet and in-game headers outside the .k200Logo wrapper: size "Kids" to the wordmark. */
.kBrandLockup:not(.k200Logo *) .kKidsWord{font-size:16px}
.kBrandLockup.compact:not(.k200Logo *) .kKidsWord{font-size:11.5px}
/* The install sheet stays plum on the cream Kids pages: keep its heading and lead readable. */
.kInstallSheet h2,.kInstallSheet>b{color:#FDF4E3}

/* Homepage Kids section: the official logo image on the plum pill, then the coloured "Kids". */
.c186 .brand.brand-kids .kids-label i{font-style:normal}
.c186 .brand.brand-kids .kids-label i:nth-child(1){color:#ff7a29}
.c186 .brand.brand-kids .kids-label i:nth-child(2){color:#ffc53d}
.c186 .brand.brand-kids .kids-label i:nth-child(3){color:#c8f135}
.c186 .brand.brand-kids .kids-label i:nth-child(4){color:#f0509b}

/* ---------- Homepage section ---------- */
.c186Pair.k200Home .k200{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:28px 20px 24px;border-radius:24px;border:1px solid rgba(253,244,227,.08);
 background:radial-gradient(420px 320px at -60px -80px,rgba(43,217,198,.20),transparent 70%),radial-gradient(380px 300px at calc(100% + 60px) calc(100% + 70px),rgba(240,80,155,.22),transparent 70%),linear-gradient(160deg,#321942 0%,#26122f 100%)}
.k200Copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.k200Ey{font:800 11.5px/1.4 var(--body);letter-spacing:.12em;color:var(--lime);margin:0 0 12px}
.c186 .k200 .brand{margin:0 0 16px;border:1px solid rgba(253,244,227,.1)}
.c186 .k200 h2{font-family:var(--heading);font-weight:700;font-size:clamp(25px,2.9vw,37px);line-height:1.14;letter-spacing:-.035em;color:var(--cream);margin:0 0 12px;text-wrap:balance}
.c186 .k200 h2 span{color:#FFC53D}
.c186 .k200 .k200Lead{font-size:16px;line-height:1.55;color:#d6c7e0;margin:0 0 18px;max-width:34em}
.c186 .k200 .k200Points{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px;width:100%}
.k200Points li{display:inline-flex;align-items:center;gap:8px;min-width:0;margin:0;padding:5px 12px 5px 5px;border-radius:99px;background:rgba(253,244,227,.08);font:700 13.5px/1.3 var(--body);color:var(--cream);white-space:nowrap}
.k200Points li::before{content:none}
.k200Ico{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lime);color:#2A3600}
.k200Ico svg{width:13px;height:13px}
.k200Points li:nth-child(2) .k200Ico{background:var(--pink);color:#3D0A22}
.k200Points li:nth-child(3) .k200Ico{background:#FFC53D;color:#3A2A00}
.k200Ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.c186 .k200Primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:13px;background:var(--tang);color:#2a1300;font:800 16px/1 var(--body);text-decoration:none;box-shadow:0 4px 0 #b9530f;transition:transform .15s ease,box-shadow .15s ease}
.c186 .k200Primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 #b9530f}
.c186 .k200Primary:active{transform:translateY(3px);box-shadow:0 1px 0 #b9530f}
.c186 .k200Primary:focus-visible,.c186 .k200Link:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.c186 .k200Link{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);font:700 15px/1 var(--body);text-decoration:underline;text-decoration-color:rgba(253,244,227,.35);text-underline-offset:5px}
.c186 .k200Link:hover{text-decoration-color:var(--lime)}

/* Example card */
.k200Demo{position:relative;margin:0;min-width:0;width:100%;max-width:440px;justify-self:center}
.k200Demo::before{content:"";position:absolute;inset:8px -4px -8px 4px;border-radius:24px;background:linear-gradient(135deg,var(--mint),#A78BFA 55%,var(--pink));transform:rotate(2.2deg);opacity:.9;z-index:-1}
.k200Card{position:relative;background:#FFFAF1;color:#2b1938;border-radius:22px;padding:18px;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.k200Top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.k200Topic{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:99px;background:#FFE3C9;color:#6a2f00;font:700 13px/1 var(--body)}
.k200Pips{display:flex;gap:5px}
.k200Pips i{position:relative;display:block;width:20px;height:6px;border-radius:3px;background:#8b5cf6;overflow:hidden}
.k200Pips i.k200Pip4{background:#e7ddf0}
.k200Pip4::after{content:"";position:absolute;inset:0;background:#8b5cf6;transform-origin:left center}
.k200Q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;margin:0 0 14px}
.c186 .k200Q p{margin:4px 0 0;font:700 clamp(17px,1.7vw,21px)/1.28 var(--heading);letter-spacing:-.025em;color:#2b1938}
.k200Read{display:flex}
.k200ReadBtn{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--mint);color:#00332D;box-shadow:0 3px 0 #16a192}
.k200Ring{position:absolute;inset:-5px;border-radius:19px;border:3px solid var(--mint);opacity:0;pointer-events:none}
.k200Opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.k200Opt{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px;border-radius:14px;font:700 15.5px/1.2 var(--body);min-width:0}
.k200Opt>span{min-width:0;overflow-wrap:break-word}
.k200Opt b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.7);font:800 12px/1 var(--body)}
.k200OptA{background:#FFDCC7;color:#3d1a00}
.k200OptB{background:#E7DDFF;color:#1b1033}
.k200OptC{background:#FFEDBD;color:#3a2a00}
.k200OptD{background:#C9F4EC;color:#00332D}
.k200OptA,.k200OptB,.k200OptC{opacity:.5}
.k200OptD::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #13998a;pointer-events:none}
/* The tick sits inside the tile, inset top-right within the tile's own padding (clear of the
   3px ring even at its 1.15 animation peak); the tile reserves room for it on the right. */
.k200OptD{padding-right:36px}
.k200Tick{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#13998a;color:#fff;box-shadow:none;transform-origin:center}
.k200Tick svg{width:14px;height:14px}

@media(prefers-reduced-motion:no-preference){
 .k200Ring{animation:k200Ring 10s ease-out infinite}
 .k200ReadBtn{animation:k200Talk 10s ease-in-out infinite}
 .k200OptA,.k200OptB,.k200OptC{animation:k200Dim 10s ease infinite}
 .k200OptD{animation:k200Press 10s ease infinite}
 .k200OptD::after{animation:k200On 10s ease infinite}
 .k200Tick{animation:k200Tick 10s ease infinite}
 .k200Pip4::after{animation:k200Fill 10s ease infinite}
}
@keyframes k200Ring{0%,8%{opacity:0;transform:scale(1)}10%{opacity:.8;transform:scale(1)}19%{opacity:0;transform:scale(1.4)}20%{opacity:.8;transform:scale(1)}29%,100%{opacity:0;transform:scale(1.4)}}
@keyframes k200Talk{0%,8%,32%,100%{transform:none}12%,20%,28%{transform:scale(1.06)}16%,24%{transform:scale(.98)}}
@keyframes k200Press{0%,38%{transform:none}41%{transform:scale(.95)}45%,100%{transform:none}}
@keyframes k200Dim{0%,42%{opacity:1}47%,92%{opacity:.5}97%,100%{opacity:1}}
@keyframes k200On{0%,42%{opacity:0}46%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes k200Tick{0%,42%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.15)}50%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.3)}}
@keyframes k200Fill{0%,42%{transform:scaleX(0)}50%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}

@media(max-width:479px){.c186Pair.k200Home .k200{gap:22px;padding:22px 18px 20px}.c186 .k200 h2 br{display:none}.k200Ctas{gap:8px 18px}.c186 .k200Primary{min-height:50px;padding:0 20px;font-size:15px}.k200Ey{margin-bottom:10px}.c186 .k200 .brand{margin-bottom:12px}.c186 .k200 h2{font-size:clamp(22px,6.6vw,26px);margin-bottom:10px}.c186 .k200 .k200Lead{font-size:15px;line-height:1.5;margin-bottom:14px}.c186 .k200 .k200Points{gap:6px;margin-bottom:18px}.k200Points li{font-size:13px}.k200Card{padding:14px}.k200Top{margin-bottom:10px}.k200Q{gap:10px;margin-bottom:12px}.c186 .k200Q p{font-size:17px}.k200ReadBtn{width:44px;height:44px;border-radius:13px}.k200Opts{gap:8px}.k200Opt{gap:8px;padding:8px 10px;min-height:48px;font-size:15px}.k200Opt b{width:22px;height:22px;border-radius:7px;font-size:11px}.k200OptD{padding-right:30px}.k200Tick{right:6px;top:6px;width:20px;height:20px}.k200Tick svg{width:12px;height:12px}}
@media(max-width:374.98px){.k200Opt{gap:6px;padding:8px 7px;font-size:14.5px}.k200OptD{padding-right:24px}.k200Tick{right:5px;top:5px;width:18px;height:18px}.k200Tick svg{width:11px;height:11px}}
@media(min-width:480px){.k200Card{padding:20px}.k200Opt{min-height:58px}}
@media(min-width:768px){.c186Pair.k200Home .k200{padding:36px 40px}}
@media(min-width:960px){.c186Pair.k200Home .k200{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:44px 52px}.k200Demo{justify-self:end}}

/* r200 speed: Kids topic tiles shown while the question bank is still loading
   (kidsTopicPending in src/app.js). Same size as the real tiles, so nothing
   shifts when they are swapped in; just quieter and not clickable. */
.k184 .k184TopicCard.k200TopicWait{opacity:.62;cursor:progress;pointer-events:none}
.k184 .k184TopicCard.k200TopicWait small{font-style:italic}
@media (prefers-reduced-motion:no-preference){
  .k184 .k184TopicCard.k200TopicWait{animation:k200TopicWait 1.4s ease-in-out infinite alternate}
  @keyframes k200TopicWait{from{opacity:.5}to{opacity:.75}}
}

/* ==========================================================================
   Otiya r200 visual integrity polish. Concatenated after fixes-r199.css and the
   r199-*.css sheets (after app.css and the r195-r198 gameplay sheets).
   Found by tests/r200/check-integrity.py (9 viewports, long content).
   Presentation only: no gameplay, timing or scoring rule lives here.
   #schools-section and #kids-section belong to the homepage redesign and are
   deliberately not touched.
   ========================================================================== */

/* 1. Live: one long unbroken word in a quiz title (host lobby, final results)
      ran past the viewport and was cut by main.wrap. */
body.livePage #app .disp{overflow-wrap:anywhere;min-width:0}

/* 2. Live results: names beyond the podium were ellipsised with no tooltip
      (320px), and podium tier names clipped at 768px+ where the r198 two-line
      rule does not apply. Wrap instead, at most two lines on the podium. */
body.livePage .finalExtraRow b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
body.livePage .stage .tier .tnm{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;height:auto!important;max-height:2.6em;line-height:1.25}

/* 3. Live play at 900-1239px: sound/music stay fixed above 900px on the
      assumption that the column leaves room either side, but the wide play
      column reaches under them and covered "Question 1 of 2". */
@media(min-width:900px) and (max-width:1239px){
  body.livePage.inGameChrome main.wrap.wide{padding-top:72px}
}

/* 4. Kids hand-off card: an 18-character name at display size ran off a
      320-360px phone, and the support summary chip overflowed the card. */
.k185PlayFrame .kHandIn h2{max-width:100%;overflow-wrap:anywhere}
.k185PlayFrame .kHandWay{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* 5. Kids family score bar: reduced motion sets transform:none on every
      .k185PlayFrame child, which removed the translateX(-50%) centring and
      pushed the fixed bar half off the right edge. Centre without transform,
      and leave room at the end of the page so the last line scrolls clear. */
.k185PlayFrame .kFam{margin-left:auto;margin-right:auto}
@media(min-width:521px){
  .k185PlayFrame .kFam{left:0!important;right:0!important;transform:none!important}
  body.kidsPlaying185 .k185PlayFrame .k185Encourage{margin-bottom:92px}
}

/* 6. Kids chrome at 320-359px: Log in overlapped the Home button by 8px. */
@media(max-width:359px){
  body.kidsGamePage .authnav{right:8px;gap:5px}
  body.kidsGamePage .authnav button{padding:0 9px}
  body.kidsGamePage .authnav .navsignup{padding:0 9px}
}

/* 7. Prize draw: entrant names were ellipsised with no tooltip; recent winners,
      saved raffle titles and history winners ran past a phone screen. */
body.rafflePage .rfName b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
body.rafflePage .rfHistory span{max-width:100%;overflow-wrap:anywhere}
body.rafflePage .qrow>b,body.rafflePage .qrow .qmeta span{max-width:100%;min-width:0;overflow-wrap:anywhere}
/* The plan pill was squeezed by the hero text at 768px and its count ran past its edge. */
body.rafflePage .rfHero .rfPlan{flex:none}
/* Wheel labels stop at the rim instead of running past the wheel edge. */
.rfWheelLabel{width:calc(min(320px,74vw) / 2 - 80px)!important}
.rfWheelLabel b{max-width:100%!important}
@media(max-width:650px){
  .rfWheelLabel{width:calc(min(286px,78vw) / 2 - 70px)!important}
}

/* 8. My quizzes: "Open <workspace>" buttons ellipsised long names with no tooltip. */
.lib199WsBtns .quiet{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;height:auto;min-height:44px}

/* 9. How it works mock-ups: answer and template labels ellipsised with no tooltip. */
.hwA span,.hwTplN{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

/* r200 pricing page (approved preview, handover sections 11, 10 and 24).
   Plans: Free, Starter, Plus, Pro in equal-height cards with CTAs on one line.
   Compare plans: r199 inline disclosure standard, collapsed until opened.
   Organisations: four routes, 2x2 on desktop, one column on phones, restrained accents.
   Scoped to .prxPage.pr200 so the compiled r184-r186 pricing rules cannot leak in. */
.prxPage.pr200{--pr-panel:var(--o189-surface,#2c1738);--pr-panel2:#3b2150;--pr-field:#24112f;--pr-line:rgba(183,158,203,.22);--pr-line2:var(--o189-line,#694f78);--pr-ink:var(--o189-cream,#fdf4e3);--pr-dim:#b79ecb;--pr-mute:#a691b6;--pr-disp:var(--o189-display,Unbounded,Inter,sans-serif);
  max-width:1180px;margin:18px auto 0;padding:0 0 56px;color:var(--pr-ink);font:400 15px/1.55 Inter,sans-serif}
.pr200 .pr200Logo{display:block;width:112px;height:auto;margin:0 0 24px}
.pr200 h1,.pr200 h2,.pr200 h3{font-family:var(--pr-disp);font-weight:700;color:var(--pr-ink);margin:0}

/* Hero and notice */
.pr200Kicker{font:700 11.5px/1 var(--pr-disp);letter-spacing:.14em;color:var(--lime,#c8f135)}
.pr200Hero h1{font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;margin:12px 0;text-wrap:balance}
.pr200Hero p{margin:0;color:var(--pr-dim);font-size:16px;max-width:56ch}
.pr200Notice{display:flex;gap:12px;align-items:flex-start;max-width:760px;margin:26px 0 22px;padding:14px 16px;background:rgba(200,241,53,.07);box-shadow:inset 3px 0 0 var(--lime,#c8f135)}
.pr200Notice svg{flex:none;color:var(--lime,#c8f135);margin-top:2px}
.pr200Notice p{margin:0;font-size:14px;color:var(--pr-dim)}
.pr200Notice b{color:var(--pr-ink)}

/* Plan cards */
.pr200Plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pr200Plan{display:flex;flex-direction:column;min-width:0;padding:24px 22px 22px;background:var(--pr-panel);box-shadow:inset 0 0 0 1px var(--pr-line);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.pr200Plan.free{background:linear-gradient(180deg,rgba(200,241,53,.08),transparent 38%),var(--pr-panel);box-shadow:inset 0 3px 0 var(--lime,#c8f135),inset 0 0 0 1px var(--pr-line)}
.pr200Plan.current{box-shadow:inset 0 0 0 2px var(--lime,#c8f135)}
.pr200Tag{font:700 10.5px/1.2 var(--pr-disp);letter-spacing:.14em;color:var(--pr-mute)}
.pr200Plan.free .pr200Tag,.pr200Plan.current .pr200Tag{color:var(--lime,#c8f135)}
.pr200Plan h2{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:10px 0 4px}
.pr200Avail{margin:0 0 16px;font-size:13.5px;font-weight:600;color:var(--pr-dim)}
.pr200Cap{display:flex;align-items:center;gap:8px;min-height:52px;margin-bottom:14px;padding:8px 11px;background:var(--pr-field);font-size:13px;line-height:1.3;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.pr200Cap svg{flex:none;color:var(--turq,#2bd9c6)}
.pr200Who{margin:0 0 16px;min-height:3.9em;font-size:13.5px;color:var(--pr-dim)}
.pr200Plan ul{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid var(--pr-line);display:grid;gap:9px}
.pr200Plan li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:13.5px;line-height:1.4}
.pr200Plan li svg{margin-top:2px;color:var(--lime,#c8f135)}
.pr200Foot{margin-top:auto}
.pr200Interest{margin:0 0 10px;font-size:12.5px;color:var(--turq,#2bd9c6)}
.pr200Cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:0;background:var(--pr-panel2);color:var(--pr-ink);font:700 15px/1.2 Inter,sans-serif;cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.pr200Cta.go{background:var(--lime,#c8f135);color:var(--limeT,#2a3600)}
.pr200Cta:disabled{cursor:default;background:rgba(200,241,53,.12);color:var(--lime,#c8f135)}
.pr200Cta:focus-visible,.pr200OrgFoot button:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
@media(hover:hover){.pr200Cta:not(:disabled):not(.go):hover{background:#4a2a63}.pr200Cta.go:hover{filter:brightness(1.06)}}

/* Compare plans: r199 inline disclosure standard (opaque surface, 1px line, 14px radius, one shadow) */
.pr200 .p185Compare{margin:22px 0 0;background:var(--pr-panel);border:1px solid var(--pr-line2);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);overflow:hidden}
.pr200 .p185Compare>summary{min-height:64px;padding:12px 20px;gap:16px}
.pr200 .p185Compare>summary b{font:700 15px/1.4 var(--pr-disp);color:inherit}
.pr200 .p185Compare>summary small{font:400 13px/1.45 Inter,sans-serif;color:var(--pr-dim);margin-top:2px}
.pr200 .p185Compare>summary:focus-visible{outline-offset:-3px}
.pr200 .p185Plus{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:var(--pr-panel2);color:var(--pr-ink);font-size:0}
.pr200 .p185Compare[open] .p185Plus{transform:none}
.pr200 .p185Plus svg{transition:transform .15s}
.pr200 .p185Compare[open] .p185Plus svg{transform:rotate(45deg)}
.pr200 .p185CompareBody{border-top:1px solid var(--pr-line);padding:6px 0 14px}
/* Closed: take the body out of layout entirely. Chromium only hides closed <details> content via
   ::details-content{content-visibility:hidden}, so descendants keep display:block and still report
   laid-out boxes (1000px+ at narrow widths) over the organisation cards below. */
.pr200 .p185Compare:not([open])>:not(summary){display:none}
.pr200 .prxTableWrap{margin:0;overflow-x:auto;border:0;border-radius:0;background:none}
/* Separate borders keep the sticky feature column pinned in Chrome; row lines are inset shadows. */
.pr200 .prxTable{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.pr200 .prxTable :is(th,td){padding:11px 14px;text-align:center;background:var(--pr-panel);box-shadow:inset 0 -1px 0 var(--pr-line)}
.pr200 .prxTable :is(tbody th[scope=row],thead th:first-child){position:sticky;left:0;z-index:2;min-width:170px;max-width:none;text-align:left;font-weight:500;color:var(--pr-ink);background:var(--pr-panel)}
.pr200 .prxTable thead th{position:static;padding-top:14px;font:700 13px/1.3 var(--pr-disp);letter-spacing:0}
.pr200 .prxTable thead th:first-child{position:sticky}
.pr200 .prxThName{color:var(--pr-ink)}
.pr200 .prxThPrice{display:block;margin-top:3px;font:600 11.5px/1.3 Inter,sans-serif;color:var(--pr-mute)}
.pr200 .prxGrp th{padding:18px 14px 8px!important;text-align:left!important;font:700 10.5px/1.3 var(--pr-disp)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--turq,#2bd9c6)!important;background:var(--pr-panel)!important}
.pr200 .prxY{width:auto;height:auto;border-radius:0;background:none;color:var(--lime,#c8f135);display:inline-flex}
.pr200 .prxN{color:var(--pr-mute);font-weight:600}
.pr200 .prxTable td b{font-weight:700;font-size:13.5px;color:var(--pr-ink)}
.pr200 .prxSwipe{display:none;margin:10px 20px 0;font-size:12.5px;color:var(--pr-mute)}

/* Organisation routes */
.pr200OrgHead{margin:64px 0 22px}
.pr200OrgHead h2{font-size:clamp(21px,2.4vw,28px);line-height:1.25;letter-spacing:-.015em;margin:0 0 6px;text-wrap:balance}
.pr200OrgHead p{margin:0;color:var(--pr-dim);max-width:52ch}
.prxPage .pr200Orgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.pr200Org{--ac:var(--turq,#2bd9c6);--acT:var(--turqT,#00332d);display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:4px 18px;min-width:0;padding:24px 24px 22px;background:radial-gradient(280px 170px at 100% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%),var(--pr-panel);box-shadow:inset 3px 0 0 var(--ac),inset 0 0 0 1px var(--pr-line);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.pr200Org.ent{--ac:var(--sky,#4fc3f7);--acT:var(--skyT,#052a3a)}
.pr200Org.par{--ac:var(--mag,#f0509b);--acT:var(--magT,#3d0a22)}
.pr200Org.evt{--ac:var(--tang,#ff7a29);--acT:var(--tangT,#3d1a00)}
.pr200Ico{grid-row:span 3;display:grid;place-items:center;width:48px;height:48px;background:var(--ac);color:var(--acT);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.pr200Ey{align-self:center;font:700 10.5px/1.3 var(--pr-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.pr200Org h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:2px 0 4px}
.pr200Org p{margin:0;max-width:46ch;font-size:14px;color:var(--pr-dim)}
.pr200OrgFoot{grid-column:2;align-self:end;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--pr-line)}
.pr200OrgFoot small{font-size:12.5px;color:var(--pr-mute)}
.pr200OrgFoot button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:0;background:var(--pr-panel2);color:var(--pr-ink);font:700 14px/1.2 Inter,sans-serif;white-space:nowrap;cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.pr200OrgFoot button svg{flex:none;color:var(--ac)}
@media(hover:hover){.pr200OrgFoot button:hover{background:#4a2a63}}
.pr200Includes{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:28px 0 0;padding:20px 0 0;border-top:1px dashed var(--pr-line);font-size:13px;color:var(--pr-dim)}
.pr200Includes li{display:inline-flex;align-items:center;gap:7px}
.pr200Includes svg{flex:none;color:var(--lime,#c8f135)}

/* Responsive */
@media(max-width:1100px){.pr200Plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.prxPage .pr200Orgs{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.pr200 .prxSwipe{display:block}.pr200 .prxTable{min-width:540px;font-size:13px}.pr200 .prxTable :is(th,td){padding:10px}.pr200 .prxTable tbody th[scope=row]{min-width:136px;padding-left:16px}}
@media(max-width:620px){.pr200Plans{grid-template-columns:minmax(0,1fr)}.pr200Plan{padding:20px 18px 18px}.pr200Who{min-height:0}.pr200Cap{min-height:40px}.pr200OrgHead{margin-top:48px}}
@media(max-width:460px){
  .pr200Org{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto;gap:4px 14px;padding:20px 18px 18px}
  .pr200Ico{width:40px;height:40px;grid-row:span 1}
  .pr200Org :is(h3,p),.pr200OrgFoot{grid-column:1/-1}
  .pr200OrgFoot button{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.pr200 .p185Plus,.pr200 .p185Plus svg{transition:none}}
@media(forced-colors:active){.pr200Plan,.pr200Org,.pr200Cta,.pr200OrgFoot button{border:1px solid CanvasText}}

/* r200 independent visual review fixes. Loaded last (after r199-* and other r200-* sheets).
   Selectors are kept narrow; no gameplay styles are touched. */

/* 1. "Creating in" workspace context bar (Profile, Prize Draw): readable, compact,
   select uses the r199 dropdown tokens instead of inheriting the tiny link-button style. */
.wsContextBar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--o189-line,#694f78);border-radius:14px;background:#ffffff08;box-sizing:border-box}
.wsContextBar>div:first-child{flex:0 1 auto;min-width:0}
.wsContextBar small{display:block;font:800 11px/1.2 var(--o189-font,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--o189-muted,#cbbbd4)}
.wsContextBar b{display:block;margin-top:3px;font:750 14px/1.3 var(--o189-font,Inter,sans-serif);color:var(--o189-cream,#fdf4e3);overflow-wrap:anywhere}
.wsContextBar .otSelect{flex:0 1 320px;width:auto;min-width:200px;max-width:320px;margin:0}
.wsContextBar .otSelect .otSelectTrigger{min-height:44px;padding:10px 40px 10px 12px;border:1px solid var(--o189-line,#694f78);border-radius:10px;clip-path:none;background:var(--o189-surface,#2c1738);color:var(--o189-cream,#fdf4e3);font:600 14px/1.35 var(--o189-font,Inter,sans-serif);text-align:left;cursor:pointer}
.wsContextBar .otSelect .otSelectTrigger:hover{border-color:var(--turq,#2bd9c6)}
.wsContextBar .otSelect .otSelectTrigger.placeholder .otSelectText{color:var(--o189-cream,#fdf4e3)}
.wsContextBar .otSelect .otSelectChevron{right:15px}
.wsContextBar>button{margin-left:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--turq,#2bd9c6);font:750 13px/1.2 var(--o189-font,Inter,sans-serif);cursor:pointer}
.wsContextBar>button:hover{text-decoration:underline}
.wsContextBar>button:focus-visible{outline:3px solid var(--o189-lime,#c8f135);outline-offset:2px;border-radius:6px}
@media(max-width:620px){
  .wsContextBar{gap:10px 12px;padding:10px 12px}
  .wsContextBar>div:first-child{flex:1 1 100%}
  .wsContextBar .otSelect{flex:1 1 100%;min-width:0;max-width:none;width:100%}
  .wsContextBar>button{margin-left:0;min-height:36px;padding:0}
}

/* 2. Prize Draw entrant tools on phones: search gets its own full-width row. */
@media(max-width:650px){
  .rfPage .rfToolbar>.rfSearch{flex:1 1 100%;min-width:100%}
  .rfPage .rfToolbar>.rfMini{flex:1 1 0;min-width:0}
}

/* 4. Home top action cards: row geometry moved to ui/r200-cards.css (subgrid). */
/* Between the phone layout and the two-column layout the single card column matched
   neither the prize-draw strip nor the panel around it; use the same full inner width. */
@media(min-width:561px) and (max-width:859.98px){.homeActionCard .actquad.home186Actions{max-width:100%}}

/* 5. Home hero: the static shimmer layer behind the wordmark painted a hard-edged box
   (overlay blend clipped to .wordwrap). Fade it out radially so no edge is visible. */
body.homePage .wordwrap::after{-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}

/* 7a. Podium cheer row at narrow widths: two even rows of three instead of 5 + 1. */
@media(max-width:340px){.reacts{display:grid;grid-template-columns:repeat(3,46px);justify-content:center;gap:10px 12px}}

/* 7b. AI sheet topic box: tall enough for the four-line placeholder on phones
   (the generic 44px phone input rule was overriding the sheet's own min-height). */
@media(pointer:coarse),(max-width:760px){#sheetWrap .aiSheet.ai200 #aiTopic.aiInBig{min-height:112px}}
@media(max-width:420px){#sheetWrap .aiSheet.ai200 #aiTopic.aiInBig{min-height:128px}}

/* 7c. Testimonials rail: the edge fade sat outside the section's clip, so cards were
   hard-cut. Fade inside the visible area instead. */
@media(prefers-reduced-motion:no-preference){
  .voicesSec .voiceRail{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 min(64px,14%),#000 calc(100% - min(64px,14%)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 min(64px,14%),#000 calc(100% - min(64px,14%)),transparent 100%)}
}

/* 8. Prize Draw (/raffle) type scale: labels were 9-11px. Labels 13px+, helper and body 14px+. */
.rfPage .rfSecHead h2,.rfPage .rfSettingsToggle h2{font-size:16px}
.rfPage .rfSecHead p,.rfPage .rfSettingsToggle p,.rfPage .rfEmptyList,.rfPage .rfImport span,.rfPage .rfSwitchRow span,.rfPage .rfWarn,.rfPage .rfLimit,.rfPage .rfEmpty small{font-size:14px;line-height:1.45}
.rfPage .rfCount,.rfPage .rfPlan,.rfPage .rfPlan span,.rfPage .rfPlan strong{font-size:13px}
.rfPage .rfMini,.rfPage .rfStyleMenu button,.rfPage .rfPresets button,.rfPage .rfWinnerActions button{font-size:13px}
.rfPage .rfMode b{font-size:14px}
.rfPage .rfMode span{font-size:13px;line-height:1.35}
.rfPage .rfField{font-size:15px}
.rfPage .rfUpload b{font-size:14px}
.rfPage .rfUpload span{font-size:13px}
.rfPage .rfName b{font-size:14px}
.rfPage .rfName>span{font-size:12px}
.rfPage .rfCapacity>div:first-child{font-size:13px}
.rfPage .rfSetting label{font-size:12px;letter-spacing:.06em}
.rfPage .rfDuration>small{font-size:13px;line-height:1.45}
.rfPage .rfAuto{font-size:13px}
.rfPage .rfStageLabel{font-size:12px!important}
.rfPage .rfDraw{font-size:14px}
.rfPage .rfHistory b,.rfPage .rfSaveNote b{font-size:14px}
.rfPage .rfHistory button,.rfPage .rfHistory small,.rfPage .rfHistory span{font-size:13px}
.rfPage .rfSaveNote span,.rfPage .rfSaveNote small{font-size:14px;line-height:1.45}
.rfPage .rfWinner small,.rfPage .rfWinner em,.rfPage .rfWinnerStack>em{font-size:12px!important}
.rfPage .rfDrawCard{font-size:12px}
.rfPage .rfHero p{font-size:15px;line-height:1.5}
@media(max-width:700px){.rfPage .rfHero p{font-size:14px}}
.raffleTabs.rtabs button{font-size:13px}

/* 9. Home: small pills, "View plans" and testimonial country tags raised to readable sizes. */
body.homePage .homeHero .micro span{font-size:13px!important}
body.homePage .homeHero .heroBeta{font-size:13px}
body.homePage .factPills .heropill{font-size:13px!important;line-height:1.3}
@media(max-width:600px){body.homePage .factPills{grid-template-columns:repeat(3,minmax(0,1fr))!important}body.homePage .factPills .heropill{padding:12px 8px!important;justify-content:center;text-align:center}}
body.homePage .nfPills .heropill{font-size:13px}
body.homePage .voiceCard figcaption span,body.homePage .voiceCard figcaption b{font-size:13px}
.homePricingLightText strong{font-size:15px}
.homePricingLightText p{font-size:14px}
.homePricingLightCta{font-size:14px}
@media(max-width:600px){
  .homePricingLightInner{flex-wrap:wrap}
  .homePricingLightCopy{flex:1 1 100%}
  .homePricingLightText strong{font-size:15px}
  .homePricingLightText p{font-size:14px}
  .homePricingLightCta{font-size:14px;height:44px;min-width:0;padding:0 16px;margin-left:41px}
}
@media(max-width:390px){.homePricingLightCta{margin-left:34px}.homePricingLightCta span{display:inline-flex}}
.tcard .tsub2,.tgrid .tsub2,.tcardSmall .tsub2{font-size:13px!important}

/* 10. Floating "Join a game" pill: leave room below the last content on phones so it can
   scroll clear, and sit above the home indicator. The hide-over-controls check is unchanged. */
.fabjoin{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media(max-width:760px){body.homePage{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* 11. Outline buttons and the pricing teaser: clip-path cut the border at the corners,
   leaving gaps in the frame. Use a rounded frame so the outline stays continuous. */
.ghost.cut12,.ghost.cut10{clip-path:none!important;border-radius:12px}
.homePricingLight{clip-path:none!important}
.homePricingLightInner{border-radius:16px}

/* 12. /join on wide screens: a compact, centred form; avatars sit on a lighter tile so
   dark emoji stay visible. */
.join199{width:100%;max-width:560px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.join199 .avbtn{background:rgba(253,244,227,.12);border-color:rgba(253,244,227,.16)}
.join199 .avbtn.sel{background:rgba(200,241,53,.18);border-color:var(--lime)}

/* 13. Home "The gathering": body copy at normal weight, one short phrase emphasised,
   and the three clauses as separate short paragraphs so the block is easier to read. */
.pband .gathClauses p{display:block;margin:0 0 10px;font-weight:400;line-height:1.6;color:var(--dim)}
.pband .gathClauses p:last-child{margin-bottom:0}
.pband .gathClauses strong{font-weight:700;color:var(--ink)}

/* r200: Otiya for Schools homepage section (homeSchoolsSection in src/app.js).
   Everything is scoped to .sch200. Animation is transform/opacity only and sits
   inside frames whose size never depends on the animation. */
.sch200{width:100%;max-width:100%;margin:40px 0 0;box-sizing:border-box}
.sch200 *,.sch200 *::before,.sch200 *::after{box-sizing:border-box}
.sch200Sec{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px 48px;background:linear-gradient(160deg,rgba(167,139,250,.10),rgba(44,23,56,0) 46%),var(--panel,#2C1738);box-shadow:inset 0 3px 0 var(--turq,#2BD9C6);color:var(--ink,#FDF4E3);font-family:Inter,system-ui,sans-serif;text-align:left;overflow:hidden}

/* Copy column */
.sch200Copy{min-width:0}
.sch200Ey{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:Unbounded,Inter,system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--turq,#2BD9C6);line-height:1.4}
.sch200Ey i{width:10px;height:10px;flex:none;background:var(--turq,#2BD9C6);transform:rotate(45deg)}
.sch200 h2{margin:0 0 14px;font-family:Unbounded,Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.015em;color:var(--ink,#FDF4E3);text-wrap:balance;overflow-wrap:break-word}
.sch200 h2 em{font-style:normal;color:var(--turq,#2BD9C6)}
.sch200Lead{margin:0 0 20px;max-width:42ch;font-size:16px;line-height:1.55;color:var(--dim,#B79ECB)}
.sch200Pts{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sch200Pts li{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 12px 6px 8px;font-size:13.5px;font-weight:700;line-height:1.3;white-space:nowrap;color:var(--ink,#FDF4E3);background:var(--panel2,#3B2150)}
.sch200Pts li::before{content:none}
.sch200K{display:inline-flex;flex:none;color:var(--turq,#2BD9C6)}
.sch200Ctas{display:flex;flex-wrap:wrap;gap:12px}
.sch200Btn{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;min-width:176px;margin:0;padding:0 24px;border:0;font:700 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .15s,background-color .15s}
.sch200Btn svg{flex:none;transition:transform .15s}
.sch200Btn.sch200Go{background:var(--turq,#2BD9C6);color:#00332D}
.sch200Btn.sch200Go:hover{filter:brightness(1.08)}
.sch200Btn.sch200Go:hover svg{transform:translateX(3px)}
.sch200Btn.sch200Ghost{background:var(--panel2,#3B2150);color:var(--ink,#FDF4E3);box-shadow:inset 0 0 0 1px rgba(183,158,203,.28)}
.sch200Btn.sch200Ghost:hover{background:#4A2A63}
.sch200Btn:focus-visible{outline:3px solid var(--lime,#C8F135);outline-offset:3px}

/* Product visual: one fixed window. All tab panels share one grid cell so switching
   tabs never changes its size. */
.sch200Vis{position:relative;min-width:0}
.sch200Win{position:relative;display:flex;flex-direction:column;background:#211029;box-shadow:inset 0 0 0 1px rgba(183,158,203,.22);filter:drop-shadow(0 22px 40px rgba(0,0,0,.35))}
.sch200Bar{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border-bottom:1px solid rgba(183,158,203,.18);background:rgba(29,14,39,.7)}
.sch200Sq{width:24px;height:24px;flex:none;display:grid;place-items:center;background:var(--turq,#2BD9C6);color:#00332D;font:800 11px/1 Unbounded,Inter,sans-serif}
.sch200Bar b{min-width:0;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink,#FDF4E3)}
.sch200Bar small{margin-left:auto;flex:none;padding:3px 8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--turq,#2BD9C6);background:rgba(43,217,198,.12)}
.sch200Tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid rgba(183,158,203,.18)}
.sch200Tabs button{position:relative;margin:0;padding:8px 12px 11px;border:0;background:none;font:600 12.5px/1.3 Inter,system-ui,sans-serif;color:#A691B6;white-space:nowrap;cursor:pointer;min-height:0;min-width:0;border-radius:0}
.sch200Tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--turq,#2BD9C6);transform:scaleX(0);transition:transform .2s}
.sch200Tabs button[aria-selected=true]{color:var(--ink,#FDF4E3)}
.sch200Tabs button[aria-selected=true]::after{transform:scaleX(1)}
.sch200Tabs button:hover{color:var(--ink,#FDF4E3)}
.sch200Tabs button:focus-visible{outline:2px solid var(--lime,#C8F135);outline-offset:-2px}
/* All panels share one grid cell, so the stage is as tall as the tallest panel
   and switching tabs never changes the frame size. */
.sch200Stage{display:grid;padding:14px}
.sch200Panel{grid-area:1/1;display:flex;flex-direction:column;gap:8px;min-width:0;visibility:hidden;opacity:0}
.sch200Panel.sch200On{visibility:visible;opacity:1;animation:sch200In .28s ease-out}
@keyframes sch200In{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sch200Row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:54px;padding:9px 12px 9px 10px;background:#2A1536}
.sch200Tile{width:36px;height:36px;display:grid;place-items:center;font:800 12.5px/1 Unbounded,Inter,sans-serif}
.sch200Tile.sch200C1{background:var(--sun,#FFC53D);color:#3A2A00}
.sch200Tile.sch200C2{background:var(--mag,#F0509B);color:#3D0A22}
.sch200Tile.sch200C3{background:var(--sky,#4FC3F7);color:#052A3A}
.sch200Tile.sch200C4{background:var(--lime,#C8F135);color:#2A3600}
.sch200Tile.sch200C5{background:var(--vio,#A78BFA);color:#1B1033}
.sch200Nm{min-width:0}
.sch200Nm b{display:block;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink,#FDF4E3)}
.sch200Nm span{display:block;font-size:12px;line-height:1.35;color:#A691B6}
.sch200Tag{padding:3px 8px;font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;color:var(--dim,#B79ECB);background:rgba(183,158,203,.12)}
.sch200Tag.sch200Go{color:var(--turq,#2BD9C6);background:rgba(43,217,198,.12)}
.sch200Row.sch200Glow::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1.5px var(--turq,#2BD9C6);background:rgba(43,217,198,.06);opacity:0;animation:sch200Glow 8s ease-in-out infinite}
@keyframes sch200Glow{0%,12%{opacity:0}24%,72%{opacity:1}86%,100%{opacity:0}}
.sch200Ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sch200Stat{padding:9px 11px;background:#2A1536;min-width:0}
.sch200Stat small{display:block;font-size:11px;line-height:1.3;color:#A691B6}
.sch200Stat b{display:block;margin-top:2px;font:700 17px/1.2 Unbounded,Inter,sans-serif;color:var(--ink,#FDF4E3)}
.sch200Chart{display:flex;align-items:flex-end;gap:8px;flex:1 1 auto;min-height:62px;padding:8px 11px;background:#2A1536}
.sch200Chart i{flex:1;height:100%;background:var(--turq,#2BD9C6);opacity:.85;transform:scaleY(var(--h));transform-origin:bottom}
.sch200Chart i.sch200Lo{background:var(--tang,#FF7A29)}
/* Mid desktop: tighter spacing. */
@media (max-width:1180px){.sch200Sec{gap:36px;padding:40px 36px}.sch200Btn{min-width:0;padding:0 20px}}
/* Stack under ~1000px. */
@media (max-width:999px){
 .sch200Sec{grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 32px}
 .sch200Lead{max-width:56ch}
 .sch200Vis{width:100%;max-width:560px}
}
/* Phones: one compact column, both CTAs on one row. */
@media (max-width:640px){
 .sch200{margin-top:24px}
 .sch200Sec{padding:24px 16px;gap:22px}
 .sch200Ey{margin-bottom:10px;font-size:11px}
 .sch200 h2{font-size:clamp(20px,6vw,24px);margin-bottom:10px;line-height:1.18}
 .sch200Lead{font-size:15px;line-height:1.5;margin-bottom:14px}
 .sch200Pts{gap:6px;margin-bottom:18px}
 .sch200Pts li{padding:5px 10px 5px 7px;font-size:13px}
 .sch200Ctas{flex-wrap:nowrap;gap:8px}
 .sch200Btn{flex:1 1 auto;min-width:0;min-height:48px;padding:0 12px;gap:6px;font-size:14px}
 .sch200Btn.sch200Ghost{flex:0 1 auto;padding:0 16px}
 .sch200Bar{min-height:40px;padding:8px 12px}
 .sch200Tabs{padding:6px 8px 0;gap:0}
 .sch200Tabs button{padding:7px 9px 9px;font-size:12px}
 .sch200Stage{padding:8px}
 .sch200Panel{gap:6px}
 .sch200Row{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;min-height:46px;padding:6px 10px 6px 8px}
 .sch200Tile{width:30px;height:30px;font-size:11px}
 .sch200Chart{min-height:44px}
}
@media (max-width:374px){
 .sch200Sec{padding:22px 14px}
 .sch200Btn{padding:0 10px;font-size:13.5px}
 .sch200Btn.sch200Ghost{padding:0 12px}
 .sch200Btn svg{display:none}
 .sch200Bar{gap:6px;padding:8px 10px}
 .sch200Bar b{font-size:12.5px}
 .sch200Bar small{padding:2px 6px;letter-spacing:.04em}
 .sch200Tag{display:none}
 .sch200Row{grid-template-columns:30px minmax(0,1fr)}
 .sch200Tabs button{padding:7px 7px 9px;font-size:11.5px}
 .sch200Ins{gap:6px}.sch200Stat{padding:8px}.sch200Stat b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
 .sch200 *,.sch200 *::before,.sch200 *::after{animation:none!important;transition:none!important}
 .sch200Row.sch200Glow::after{opacity:1}
}

/* r200 spacing sweep: awkward gaps, orphan words and unfinished formatting
   found in a page-by-page visual pass at 375, 768 and 1366. Layout only; no
   behaviour changes. */

/* 1. Headings wrap as balanced lines, so a title never ends on one lonely word
   ("CSR your staff would turn up / to"). Body copy avoids a one-word last line. */
#app :is(h1,h2,h3,h4),.pfH,.ucH,.cmH1,.cmH2,.hwHandsH{text-wrap:balance}
#app :is(p,li,.pfNote,.cmSub){text-wrap:pretty}

/* 2. Kids h1: the second sentence sits after a <br>. Balance runs over the whole
   block, so the full-width first line left "minds." alone on the last line.
   As its own block the second sentence balances by itself. The Business and
   Nonprofits heroes use the same <br><b> pattern ("turn up / for."). */
.k184 h1 > span,.cmH1 > br + b{display:block}

/* 3. How it works hero: at phone width "Four steps from an idea" breaks before
   the forced <br>, leaving "idea" alone on a line. One balanced sentence. */
@media (max-width:520px){
  .hwBig br{display:none}
  .hwBig b{display:inline}
}

/* 4. How it works tablet mock: the answer tiles broke words mid-word
   ("Urugu/ay", "Franc/e"). Tighter tile padding gives the words their room,
   and words only break between letters as a last resort. */
.hwTab .hwA{padding:6px 5px;gap:4px}
.hwTab .hwA span{overflow-wrap:normal;word-break:normal;hyphens:none;min-width:0}
@media (max-width:420px){.hwTab .hwA{font-size:9.2px}}

/* 5. Kids pages callout: the secondary button (Accessibility status) sat flush
   against the paragraph on phones; only the primary button had a top margin. */
@media (max-width:600px){.m184Callout > .k184Secondary{margin-top:18px}}

/* 6. Partner and reminder forms (Nonprofits, Business, Otiya Live): on phones
   the Start button sat beside the heading and squeezed the text into a narrow
   column. Stack it under the copy instead. */
@media (max-width:560px){
  .pfHead{flex-wrap:wrap;align-items:flex-start;row-gap:12px}
  .pfHeadT{flex:1 1 100%}
}

/* 7. Raffle "2. Draw settings" collapsed: the 0fr row trick only collapses the
   first grid row, so the other settings rows kept their full height and left
   ~300px of empty panel under the toggle at every width. */
.rfSettings:not(.open) .rfSettingsGrid{height:0;overflow:hidden;gap:0;margin:0;padding:0}

/* 8. Careers CV upload: the native "No file chosen" sat beside the button and
   the status line under it said "No file chosen yet." as well. After a
   re-render the native text could even contradict the status line. The status
   line is the one source of truth, so the native text is hidden (the button
   keeps its own colour). */
.crFile{color:transparent}

/* 9. Workspace section eyebrows: "SHARED CONTENT", "TEAM", "EDUCATORS",
   "SETTINGS", "SCHOOL INSIGHTS", "PILOT SNAPSHOT" rendered as thin grey 14px
   text because the generic `.w190Workspace p` body rule outranks the single-class
   eyebrow rules. Classes and Overview already showed the intended teal 12px
   label, so tabs looked unfinished next to each other. Same values, higher
   specificity. */
.w190Workspace p:is(.wc200Eyebrow,.wi200Eyebrow,.wt200Eyebrow){margin:0 0 10px;max-width:none;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--w190-turq,#7ce0d4)}
.w190Workspace .wi200Pilot p.wi200Eyebrow{margin-bottom:8px}

/* 10. Quiz Studio header: "Beta feedback" was a 10px pill beside two 13px,
   9px-radius buttons of the same height. Same type size and corner radius as
   its neighbours; the teal tint still marks it as feedback. */
.builderHeadActions .betaCreatorChip{font-size:13px;border-radius:9px;padding:11px 14px}

/* r200 owner feedback: join screen logo and layout, homepage phone card stack.
   ------------------------------------------------------------------------ */

/* 1. Join screen (/join and /join/CODE)
   The real Otiya logo image replaces the drawn wordmark. The decorative
   shapes art is gone at every width so the form, the full avatar grid and
   "More avatars" sit higher and Join game no longer lands on top of them. */
.join199Mark .join199Logo{display:block;height:28px;width:auto;max-width:none}
@media (max-width:520px), (max-height:760px){
  .join199Mark .join199Logo{height:24px}
}
.join199 .join199Deco{display:none!important}
.join199{margin-top:8px!important}

/* 2. Homepage "How people use Otiya": sticky stacking cards on phones.
   Each card pins just below the header and the next one slides over it.
   The script in app.js (homeStackTick) scales and dims the covered card;
   with reduced motion the cards still stack but nothing scales or dims. */
.ucStackCards{display:contents}
@media (max-width:600px){
  /* overflow:hidden on the section would make it the sticky scroller; clip
     trims the same way without that. */
  .sec.ucStackSec{overflow:clip}
  .ucGrid.ucStack{display:block}
  .ucStackCards{display:flex;flex-direction:column;gap:14px}
  .ucStackCards > .ucCard{position:sticky;top:calc(var(--ucStackTop,14px) + var(--i,0) * 10px);
    transform-origin:50% 0;box-shadow:0 -10px 24px rgba(0,0,0,.35);
    /* opaque, so a card sliding over another never shows the text beneath */
    background:#2a1c3e}
  /* The reveal animation's transform would fight the scale; the stack is the motion. */
  .ucStackCards > .ucCard.rv{opacity:1;transition:none}
  .ucStackCards > .ucCard.rv:not(.ucStackOn){transform:none}
  /* "See all the ways" follows the pile in normal flow. The pile releases
     when its last card is in place, so nothing covers this link. */
  .ucGrid.ucStack > .ucMore{margin-top:14px}
}
@media (max-width:600px){
  /* visibility, since the pill's pop-in animation holds its opacity */
  body.ucStacking #fabJoin{visibility:hidden}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .ucStackCards > .ucCard{transform:none!important;filter:none!important}
}

/* r200 Quiz Studio balance.
   Question type labels read as normal words, not shouty caps.
   On wide screens the "Your quiz" panel stays in view beside a long question list.
   On phones the question list is part of the page scroll, not a box inside a box. */
.w190Studio .slide .sb{text-transform:none;letter-spacing:0;font-weight:700;font-size:12px}
@media(min-width:821px){
  /* hidden turns the page wrapper into a scroll box, which stops sticky working; clip crops the same way without that */
  main.wrap:has(.w190Studio .w190EditorMain>.w190Ready){overflow-x:clip}
  .w190Studio .bwrap>.w190EditorMain:has(>.w190Ready){position:sticky;top:96px;align-self:start}
}
@media(max-width:820px){
  .w190Studio .w190QuestionNav .slides{max-height:none;overflow:visible}
}

/* r200: workspace frame, section nav, Overview (team + school), loading and no-workspace screens.
   Matches the r200 Shared content library (wc200): 1180px page, 16px cards, lime primary, 44px+ targets. */
.wsPage.wf200Page{--wf-ink:#fdf4e3;--wf-muted:#d0bfd8;--wf-line:rgba(253,244,227,.12);--wf-line2:rgba(253,244,227,.22);--wf-card:rgba(46,24,58,.92);--wf-card2:rgba(62,34,78,.95);--wf-lime:#d9f36b;--wf-turq:#7ce0d4;max-width:1180px;margin:16px auto 0;padding-bottom:48px;color:var(--wf-ink);font-family:Inter,sans-serif}
.wsPage.wf200Page .wsMain{padding-top:32px;min-width:0}

/* Frame */
.wsPage .wsTop.wf200Top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 18px;border-bottom:0}
.wf200Top .wsBrand{display:flex;align-items:center;gap:12px;min-width:0;flex:none}
.wf200Top .wsBrand>i{width:1px;height:24px;background:var(--wf-line2)}
.wsPage .wf200Top .wsBrand>span:last-child{font:700 15px/1.2 Inter,sans-serif;letter-spacing:0;color:var(--wf-ink)}
.wsPage .wf200Top .wsTopRight{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.wf200Switch{min-width:0;flex:0 1 300px}
.wsPage .wf200Switch .otSelect{width:100%!important;max-width:100%;margin:0;flex:none}
.wsPage .wf200Switch select.wsSwitcher{width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--wf-line2);background:rgba(0,0,0,.28);color:var(--wf-ink);font:600 15px Inter,sans-serif}
.wsPage .wf200Switch .wsSingleName{display:flex;align-items:center;gap:8px;min-height:46px;max-width:100%;padding:0 4px;border:0;background:none;border-radius:0;font:700 15px/1.3 Inter,sans-serif;color:var(--wf-ink);overflow-wrap:anywhere}
.wsPage .wf200Switch .wsSingleName::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--wf-turq)}
.wsPage .wf200Top .wsInviteNotice{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(124,224,212,.45);background:rgba(124,224,212,.1);color:var(--wf-turq);font:700 14px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap;flex:none}
.wsPage .wf200Top .wsInviteNotice b{font-weight:800}
.wsPage .wf200Top .wf200Account,.wsPage .wf200Top .wf200Account.quiet{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--wf-line2);background:rgba(253,244,227,.06);color:var(--wf-ink);font:700 15px/1 Inter,sans-serif;white-space:nowrap;width:auto;margin:0;flex:none}
.wsPage .wf200Top :is(.wf200Account,.wsInviteNotice):hover{background:rgba(253,244,227,.12)}

/* Section nav: one pill row. Scrolls sideways on small screens, never wraps. */
.wsPage .w190WorkspaceNav.wf200Nav{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px;border:1px solid var(--wf-line);border-bottom:1px solid var(--wf-line);border-radius:16px;background:rgba(0,0,0,.28);flex-wrap:nowrap}
.wsPage .wf200Nav>.wf200NavScroll{position:relative;display:flex;flex-wrap:nowrap;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:8px}
.wf200NavScroll::-webkit-scrollbar{display:none}
.wsPage .wf200Nav .wf200NavScroll>button.wf200Out,.wsPage .wf200Nav .w190MoreNav .wf200Dup:not(.wf200In){display:none}
.wf200TabShort{display:none}
.wf200NavScroll.wf200CanR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.wf200NavScroll.wf200CanL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.wf200NavScroll.wf200CanL.wf200CanR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.wsPage .wf200Nav .wf200NavScroll>button,.wsPage .wf200Nav .w190MoreNav>summary{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--wf-muted);font:700 15px/1 Inter,sans-serif;white-space:nowrap;cursor:pointer}
.wsPage .wf200Nav .wf200NavScroll>button:hover{color:var(--wf-ink);background:rgba(253,244,227,.07)}
.wsPage .wf200Nav .wf200NavScroll>button[aria-current=page]{background:var(--wf-ink);color:#24112f;border-color:var(--wf-ink)}
.wsPage .wf200Nav .w190MoreNav{flex:none;position:relative}
.wsPage .wf200Nav .w190MoreNav>summary{min-width:0;border-color:var(--wf-line2);color:var(--wf-ink);list-style:none}
.wsPage .wf200Nav .w190MoreNav>summary>span{font-size:18px;line-height:1;transition:transform .15s}
.wsPage .wf200Nav .w190MoreNav.wf200MoreOn>summary{background:var(--wf-ink);color:#24112f;border-color:var(--wf-ink)}
.wsPage .wf200Nav .w190MoreNav>summary{width:auto}
.wsPage .wf200Nav .w190MoreNav>div{position:absolute;right:0;top:calc(100% + 10px);width:min(240px,calc(100vw - 24px));margin-top:0;box-shadow:0 18px 44px #000a}
.wsPage .wf200Nav :is(button,summary):focus-visible{outline:3px solid var(--wf-lime);outline-offset:2px}

/* Shared page pieces */
.wsPage .wf200{max-width:1180px;margin:0 auto;color:var(--wf-ink)}
.wsPage .wf200 .wf200Eyebrow{margin:0 0 10px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-turq)}
.wsPage .wf200Head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 24px}
.wsPage .wf200HeadText{min-width:0;max-width:720px}
.wsPage .wf200 h1{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;color:var(--wf-ink);overflow-wrap:anywhere}
.wsPage .wf200 .wf200Lead{margin:0;max-width:62ch;font:400 17px/1.6 Inter,sans-serif;color:var(--wf-muted)}
.wsPage .wf200 .wf200Badge{display:grid;gap:4px;flex:none;min-width:200px;max-width:320px;padding:14px 18px;border-radius:16px;border:1px solid var(--wf-line);background:var(--wf-card)}
.wsPage .wf200 .wf200Badge b{font:750 16px/1.35 Inter,sans-serif;color:var(--wf-ink)}
.wsPage .wf200 .wf200Badge>span,.wsPage .wf200 .wf200Badge>small{font:500 14px/1.5 Inter,sans-serif;color:var(--wf-muted)}
.wsPage .wf200 .wf200Badge .lic199{margin-left:6px}
.wsPage .wf200 .btn,.wsPage .wf200 .quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:700 15px/1.2 Inter,sans-serif;white-space:nowrap;width:auto;max-width:100%;margin:0;clip-path:none}
.wsPage .wf200 .quiet{background:rgba(253,244,227,.06);border:1px solid var(--wf-line2);color:var(--wf-ink)}
.wsPage .wf200 .quiet:hover{background:rgba(253,244,227,.12)}
.wsPage .wf200 :is(button,a):focus-visible{outline:3px solid var(--wf-lime);outline-offset:2px}
.wsPage .wf200 .wf200Notice{margin:0 0 20px;padding:18px 20px;border-radius:16px;border:1px solid rgba(255,178,122,.55);background:rgba(255,138,61,.1)}
.wsPage .wf200 .wf200Notice b{font:750 17px/1.4 Inter,sans-serif}
.wsPage .wf200 .wf200Notice p{margin:6px 0 14px;font-size:16px;line-height:1.6;color:var(--wf-muted);max-width:70ch}

/* Overview */
.wsPage .wf200Actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.wsPage .wf200Stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px;padding:0}
.wsPage .wf200Stat{min-width:0;padding:18px 20px;border-radius:16px;border:1px solid var(--wf-line);background:var(--wf-card)}
.wsPage .wf200Stat dt{margin:0 0 8px;font:600 14px/1.4 Inter,sans-serif;color:var(--wf-muted)}
.wsPage .wf200Stat dd{margin:0;font:800 32px/1.1 Inter,sans-serif;letter-spacing:-.02em;color:var(--wf-ink)}
.wsPage .wf200Stat dd small{font:600 16px Inter,sans-serif;letter-spacing:0;color:var(--wf-muted)}
.wsPage .wf200 .wf200Stat p{margin:8px 0 0;font:400 14px/1.45 Inter,sans-serif;color:var(--wf-muted)}
.wsPage .wf200Cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.wsPage .wf200Panel{min-width:0;padding:20px;border-radius:16px;border:1px solid var(--wf-line);background:var(--wf-card)}
.wsPage .wf200PanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.wsPage .wf200 .wf200PanelHead h2{margin:0;font:750 20px/1.3 Inter,sans-serif;letter-spacing:-.01em;color:var(--wf-ink)}
.wsPage .wf200 .wf200Link{min-height:44px;padding:0 6px;border:0;background:none;color:var(--wf-lime);font:700 15px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap}
.wsPage .wf200 .wf200Link:hover{text-decoration:underline;text-underline-offset:3px}
.wsPage .wf200Rows{list-style:none;margin:0;padding:0}
.wsPage .wf200Row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--wf-line)}
.wsPage .wf200Rows>li:first-child{border-top:0}
.wsPage .wf200RowIcon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.wsPage .wf200IQuiz{background:rgba(124,224,212,.16);color:var(--wf-turq)}
.wsPage .wf200IGame{background:rgba(217,243,107,.14);color:var(--wf-lime)}
.wsPage .wf200IRaffle{background:rgba(255,168,76,.16);color:#ffb870}
.wsPage .wf200RowMain{display:block;min-width:0}
.wsPage .wf200 .wf200RowMain b{display:block;font:700 16px/1.4 Inter,sans-serif;color:var(--wf-ink);overflow-wrap:anywhere}
.wsPage .wf200 .wf200RowMain>span{display:block;margin-top:2px;font:400 14px/1.45 Inter,sans-serif;color:var(--wf-muted);overflow-wrap:anywhere}
.wsPage .wf200 .wf200RowBtn{min-height:44px;padding:0 16px}
.wsPage .wf200LinkRows>li{border-top:1px solid var(--wf-line)}
.wsPage .wf200 .wf200LinkRow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 0;margin:0;border:0;border-radius:12px;background:none;color:inherit;text-align:left;cursor:pointer}
.wsPage .wf200 .wf200LinkRow:hover b{color:var(--wf-lime)}
.wsPage .wf200 .wf200LinkRow:hover>i{color:var(--wf-ink);transform:translateX(2px)}
.wsPage .wf200 .wf200LinkRow>i{color:var(--wf-muted);display:grid}
.wsPage .wf200Empty{padding:18px 0 4px}
.wsPage .wf200Empty b{display:block;font:750 17px/1.35 Inter,sans-serif}
.wsPage .wf200 .wf200Empty p{margin:6px 0 16px;font-size:15px;line-height:1.6;color:var(--wf-muted)}
.wsPage .wf200 .wf200More{margin-top:16px;border-radius:16px;border-color:var(--wf-line);background:#2e183a}
.wsPage .wf200 .wf200More>summary b{font-size:16px}
.wsPage .wf200 .wf200More>summary small{font-size:14px;color:var(--wf-muted)}
.wsPage .wf200 .wf200Fine{margin:22px 0 0;max-width:80ch;font:400 14px/1.6 Inter,sans-serif;color:var(--wf-muted)}
/* Neutralise the older teaching-home box styles that share these hooks. */
.wsPage .wf200 .w190SchoolHead{margin-bottom:24px}
.wsPage .wf200 .w190Role{border-color:var(--wf-line);background:var(--wf-card)}

/* Loading */
.wsPage .wf200Loading{display:block;width:100%;min-height:0;padding:8px 0 0;font:inherit;text-align:left}
.wsPage .wf200Loading>*{width:100%}
.wf200LoadText{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.wsPage .wf200LoadText b{font:750 20px/1.3 Inter,sans-serif;color:var(--wf-ink)}
.wsPage .wf200LoadText>span:last-child{flex-basis:100%;padding-left:34px;font:400 16px/1.5 Inter,sans-serif;color:var(--wf-muted)}
.wf200Spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(253,244,227,.18);border-top-color:#d9f36b;animation:wf200spin .8s linear infinite}
@keyframes wf200spin{to{transform:rotate(360deg)}}
.wf200Skel{display:grid;gap:14px}
.wf200Skel i{display:block;border-radius:16px;background:linear-gradient(90deg,rgba(253,244,227,.05),rgba(253,244,227,.1),rgba(253,244,227,.05));background-size:200% 100%;animation:wf200shine 1.4s ease-in-out infinite}
.wf200Skel .wf200SkH{height:56px;border-radius:16px}
.wf200Skel .wf200SkT{height:40px;width:min(420px,70%);border-radius:10px}
.wf200Skel>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wf200Skel>div i{height:104px}
.wf200Skel>div:last-child{grid-template-columns:1.25fr 1fr}
.wf200Skel>div:last-child i{height:220px}
@keyframes wf200shine{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* No workspace yet */
.wsPage .wf200Start{max-width:980px;margin:0;text-align:left}
.wsPage .wf200StartHead{margin-bottom:28px}
.wsPage .wf200Invites{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.wsPage .wf200Invite{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;border:1px solid rgba(124,224,212,.35);background:rgba(124,224,212,.08)}
.wsPage .wf200InviteActs{display:flex;gap:8px}
.wsPage .wf200Options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wsPage .wf200Option{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:24px;border-radius:16px;border:1px solid var(--wf-line);background:var(--wf-card);text-align:left}
.wsPage .wf200OptIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:18px}
.wsPage .wf200 .wf200Option h2{margin:0 0 8px;font:750 22px/1.3 Inter,sans-serif;color:var(--wf-ink)}
.wsPage .wf200 .wf200Option>p:not(.wf200Eyebrow){margin:0 0 20px;font:400 16px/1.6 Inter,sans-serif;color:var(--wf-muted);max-width:none}
.wsPage .wf200Option>button{margin-top:auto}
.wsPage .wf200Help{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding:18px 20px;border-radius:16px;border:1px solid var(--wf-line);background:rgba(0,0,0,.2);text-align:left}
.wsPage .wf200Help>div{min-width:0}
.wsPage .wf200Help b{font:750 16px/1.4 Inter,sans-serif}
.wsPage .wf200 .wf200Help p{margin:4px 0 0;font:400 15px/1.6 Inter,sans-serif;color:var(--wf-muted);max-width:70ch}
.wsPage .wf200Help em{font-style:normal;color:var(--wf-turq);overflow-wrap:anywhere}

@media(max-width:1024px){
  .wsPage .wf200Stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .wsPage .wf200Cols{grid-template-columns:minmax(0,1fr)}
  .wf200Skel>div:last-child{grid-template-columns:1fr}
}
@media(max-width:720px){
  .wsPage.wf200Page{margin-top:8px}
  .wsPage.wf200Page .wsMain{padding-top:24px}
  .wsPage .wsTop.wf200Top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand inv acct" "sw sw sw";align-items:center;gap:12px 8px;padding:4px 0 16px}
  .wsPage .wf200Top .wsTopRight{display:contents}
  .wf200Top .wsBrand{grid-area:brand}
  .wf200Top .wsInviteNotice{grid-area:inv}
  .wf200Top .wf200Account{grid-area:acct}
  .wf200Switch{grid-area:sw;width:100%}
  .wsPage .wf200Switch .wsSingleName{min-height:0;padding:0}
  .wsPage .wf200Nav .wf200NavScroll>button,.wsPage .wf200Nav .w190MoreNav>summary{padding:0 14px}
  .wf200TabLong{display:none}.wf200TabShort{display:inline}
  .wsPage .wf200Head{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:20px}
  .wsPage .wf200 .wf200Lead{font-size:16px}
  .wsPage .wf200 .wf200Badge{max-width:none;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 16px}
  .wsPage .wf200Actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:22px}
  .wsPage .wf200Actions>*{white-space:normal;padding:8px 12px;line-height:1.25}
  .wsPage .wf200Actions>*>span{white-space:normal;min-width:0;text-align:center}
  .wsPage .wf200Actions>:first-child{grid-column:1/-1}
  .wsPage .wf200Actions>:only-child,.wsPage .wf200Actions>:nth-child(2):last-child{grid-column:1/-1}
  .wsPage .wf200Stats{gap:10px;margin-bottom:22px}
  .wsPage .wf200Stat{padding:14px 16px}
  .wsPage .wf200Stat dd{font-size:26px}
  .wsPage .wf200Panel{padding:16px}
  .wsPage .wf200Row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
  .wf200Skel>div{grid-template-columns:1fr 1fr}
  .wsPage .wf200Options{grid-template-columns:minmax(0,1fr)}
  .wsPage .wf200Option{padding:20px}
  .wsPage .wf200Option>button{width:100%}
  .wsPage .wf200Invite{grid-template-columns:40px minmax(0,1fr);padding:16px}
  .wsPage .wf200InviteActs{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .wsPage .wf200Help{flex-direction:column;align-items:stretch}
}
@media(max-width:420px){
  .wsPage .wf200Nav{gap:6px}
  .wsPage .wf200Nav .wf200NavScroll>button,.wsPage .wf200Nav .w190MoreNav>summary{padding:0 12px;font-size:14px}
  .wf200InvText,.wsPage .wf200Top .wf200Account>svg{display:none}
  .wsPage .wf200Actions{grid-template-columns:minmax(0,1fr)}
  .wsPage .wf200Actions>*{grid-column:1/-1}
  .wsPage .wf200Top .wsInviteNotice,.wsPage .wf200Top .wf200Account{padding:0 12px}
  .wsPage .wf200Stat dt{font-size:13.5px}
  .wsPage .wf200Row{grid-template-columns:36px minmax(0,1fr) auto}
  .wsPage .wf200RowIcon{width:36px;height:36px}
}
@media(max-width:350px){
  .wsPage .wf200Stats{grid-template-columns:minmax(0,1fr)}
  .wsPage .wf200 .btn,.wsPage .wf200 .quiet{padding:0 14px}
  .wf200Top:has(.wsInviteNotice) .wsBrand>:is(span:last-child,i){display:none}
  .wsPage .wf200Nav .wf200NavScroll>button,.wsPage .wf200Nav .w190MoreNav>summary{padding:0 12px;font-size:14px}
  .wsPage .wf200Row{grid-template-columns:36px minmax(0,1fr)}
  .wsPage .wf200Row>.wf200RowBtn{grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){.wf200Spin,.wf200Skel i{animation:none}.wsPage .wf200Nav .w190MoreNav>summary>span{transition:none}}
@media(forced-colors:active){.wsPage :is(.wf200Stat,.wf200Panel,.wf200Option,.wf200Badge,.wf200Nav){border:1px solid CanvasText}.wsPage .wf200Nav [aria-current=page],.wsPage .wf200Nav .wf200MoreOn>summary{outline:2px solid Highlight}}

/* r200 speed: a tab whose list is still arriving shows this inside the frame, never the full loader. */
.wsPage .wsSectionLoading{display:flex;align-items:center;gap:12px;min-height:120px;padding:24px;border:1px solid var(--wf-line,rgba(253,244,227,.12));border-radius:16px;color:var(--wf-muted,#d0bfd8);font:600 15px/1.4 Inter,sans-serif}
.wsPage .wsMain[aria-busy="true"]{opacity:.72;transition:opacity .15s}
@media(prefers-reduced-motion:reduce){.wsPage .wsMain[aria-busy="true"]{transition:none}}

/* r200: workspace Activity and Insights tabs (team and school). Matches the Shared content (wc200) look. */
.wi200{--wi-ink:var(--w190-ink,#fdf4e3);--wi-muted:var(--w190-muted,#d0bfd8);--wi-line:rgba(253,244,227,.12);--wi-card:rgba(46,24,58,.92);--wi-turq:var(--w190-turq,#7ce0d4);--wi-lime:var(--w190-lime,#d9f36b);--wi-orange:#ffb870;max-width:1180px;margin:0 auto;color:var(--wi-ink);font-family:Inter,sans-serif}
.wi200 *{box-sizing:border-box}
.wi200Head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:4px 0 26px}
.wi200Head>div:first-child{max-width:700px;min-width:0}
.wi200Eyebrow{margin:0 0 10px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wi-turq)}
.wi200Head h3{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.wi200Head p:not(.wi200Eyebrow){margin:0;font-size:17px;line-height:1.6;color:var(--wi-muted)}
.wi200 .btn,.wi200 .quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:700 15px/1.2 Inter,sans-serif;width:auto;margin:0;max-width:100%;white-space:normal;text-align:center}
.wi200 .quiet{background:rgba(253,244,227,.06);border:1px solid rgba(253,244,227,.22);color:var(--wi-ink);cursor:pointer}
.wi200 .quiet:hover{background:rgba(253,244,227,.12)}
.wi200 button:focus-visible{outline:3px solid var(--wi-lime);outline-offset:2px}
.wi200Badge{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:99px;font:700 14px/1 Inter,sans-serif;border:1px solid var(--wi-line);color:var(--wi-muted)}
.wi200Good{background:rgba(217,243,107,.12);border-color:rgba(217,243,107,.4);color:var(--wi-lime)}

/* Activity */
.wi200Chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.wi200Chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid rgba(253,244,227,.2);background:rgba(0,0,0,.24);color:var(--wi-muted);font:700 15px/1 Inter,sans-serif;cursor:pointer}
.wi200Chip span{min-width:24px;padding:3px 7px;border-radius:99px;background:rgba(253,244,227,.1);font-size:13px;text-align:center}
.wi200Chip[aria-pressed=true]{background:var(--wi-ink);border-color:var(--wi-ink);color:#24112f}
.wi200Chip[aria-pressed=true] span{background:#24112f;color:var(--wi-ink)}
.wi200Days{display:grid;gap:26px}
.wi200Day[hidden],.wi200Row[hidden]{display:none}
.wi200DayLabel{margin:0 0 12px;font:800 14px/1.2 Inter,sans-serif;letter-spacing:.02em;color:var(--wi-ink);display:flex;align-items:center;gap:12px}
.wi200DayLabel::after{content:"";flex:1;height:1px;background:var(--wi-line)}
.wi200List{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wi200Row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:var(--wi-card);border:1px solid var(--wi-line);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.wi200Ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.wi200Game{background:rgba(255,138,61,.16);color:#ffb27a}
.wi200Quiz{background:rgba(124,224,212,.16);color:var(--wi-turq)}
.wi200Raffle{background:rgba(217,243,107,.14);color:var(--wi-lime)}
.wi200RowMain{min-width:0}
.wi200Kind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 4px;font-size:14px;line-height:1.4;color:var(--wi-muted)}
.wi200Pill{display:inline-block;padding:3px 9px;border-radius:99px;font:800 12px/1.3 Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.wi200RowMain h4{margin:0;font:750 17px/1.35 Inter,sans-serif;color:var(--wi-ink);overflow-wrap:anywhere}
.wi200Meta{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--wi-muted);overflow-wrap:anywhere}
.wi200Meta i{font-style:normal;margin:0 8px;opacity:.6}
.wi200Time{font-size:14px;line-height:1.3;color:var(--wi-muted);white-space:nowrap;text-align:right}
.wi200Note{margin:22px 0 0;font-size:14px;line-height:1.5;color:var(--wi-muted)}
.wi200Empty{padding:44px 24px;text-align:center;border-radius:18px;border:1px dashed rgba(253,244,227,.24);background:rgba(0,0,0,.18)}
.wi200Empty b{display:block;font:750 20px/1.3 Inter,sans-serif;margin-bottom:8px}
.wi200Empty p{margin:0 auto 18px;max-width:440px;font-size:16px;line-height:1.6;color:var(--wi-muted)}
.wi200Locked p{margin-bottom:0}
.wi200EmptyIco{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 0 14px;border-radius:16px;background:rgba(124,224,212,.12);color:var(--wi-turq)}

/* Insights */
.wi200Stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.wi200Stat{padding:20px 22px;border-radius:16px;background:var(--wi-card);border:1px solid var(--wi-line);min-width:0}
.wi200Stat small{display:block;font:700 14px/1.3 Inter,sans-serif;color:var(--wi-muted)}
.wi200Stat b{display:block;margin:8px 0 6px;font:800 clamp(30px,3vw,40px)/1.05 Inter,sans-serif;letter-spacing:-.02em;color:var(--wi-ink);overflow-wrap:anywhere}
.wi200Stat span{display:block;font-size:14px;line-height:1.45;color:var(--wi-muted)}
.wi200Grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin:0 0 14px}
.wi200Card{padding:22px 24px;border-radius:16px;background:var(--wi-card);border:1px solid var(--wi-line);min-width:0}
.wi200Card h4{margin:0 0 4px;font:750 19px/1.3 Inter,sans-serif;color:var(--wi-ink)}
.wi200CardSub{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--wi-muted)}
.wi200Card>.quiet,.wi200Card .wi200Mini .btn{margin-top:16px}
.wi200Bars{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.wi200BarTop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:15px;line-height:1.35;color:var(--wi-ink)}
.wi200BarTop span{min-width:0;overflow-wrap:anywhere}
.wi200BarTop b{font:800 16px/1 Inter,sans-serif;white-space:nowrap}
.wi200Track{height:10px;border-radius:99px;background:rgba(253,244,227,.08);overflow:hidden}
.wi200Track i{display:block;height:100%;border-radius:99px;background:var(--wi-turq)}
.wi200Track i.wi200Lime{background:var(--wi-lime)}
.wi200Track i.wi200Orange{background:var(--wi-orange)}
.wi200Small{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--wi-muted)}
.wi200Mini{padding:22px 18px;border-radius:14px;border:1px dashed rgba(253,244,227,.22);background:rgba(0,0,0,.16);text-align:center}
.wi200Mini b{display:block;font:750 17px/1.3 Inter,sans-serif;margin-bottom:6px}
.wi200Mini p{margin:0;font-size:15px;line-height:1.55;color:var(--wi-muted)}
.wi200Plan{list-style:none;margin:12px 0 0;padding:0}
.wi200Plan li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--wi-line);font-size:15px;line-height:1.4;color:var(--wi-muted)}
.wi200Plan li:last-child{border-bottom:0}
.wi200Plan b{color:var(--wi-ink);font-weight:750;text-align:right}
.wi200Plan b.wi200Yes{color:var(--wi-lime)}
.wi200Plan b.wi200No{color:rgba(208,191,216,.75);font-weight:600}
.wi200Pilot{background:linear-gradient(160deg,rgba(124,224,212,.1),rgba(46,24,58,.92) 60%);border-color:rgba(124,224,212,.24)}
.wi200Pilot .wi200Eyebrow{margin-bottom:8px}
.wi200MiniStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.wi200MiniStats div{padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.2);min-width:0}
.wi200MiniStats b{display:block;font:800 26px/1.1 Inter,sans-serif;color:var(--wi-ink)}
.wi200MiniStats span{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:var(--wi-muted)}
.wi200Privacy{display:flex;gap:16px;align-items:flex-start}
.wi200Privacy .wi200EmptyIco{flex:none;margin:0;width:44px;height:44px;border-radius:14px}
.wi200Privacy p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--wi-muted)}

@media(max-width:1020px){.wi200Stats{grid-template-columns:repeat(2,minmax(0,1fr))}.wi200Grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .wi200Head{margin-bottom:20px}
  .wi200Head p:not(.wi200Eyebrow){font-size:16px}
  .wi200Row{grid-template-columns:44px minmax(0,1fr);padding:14px 16px;gap:12px 14px;align-items:start}
  .wi200Ico{width:44px;height:44px}
  .wi200Time{grid-column:2;text-align:left;margin-top:-4px}
  .wi200Stats{gap:10px}
  .wi200Stat{padding:16px}
  .wi200Stat b{font-size:30px}
  .wi200Card{padding:18px}
  .wi200Card>.quiet,.wi200Mini .btn,.wi200Empty .btn{width:100%}
}
@media(max-width:360px){.wi200Stats{grid-template-columns:1fr}.wi200Chip{padding:0 12px}.wi200MiniStats b{font-size:22px}}
@media(forced-colors:active){.wi200Row,.wi200Stat,.wi200Card,.wi200Empty,.wi200Chip{border:1px solid CanvasText}.wi200Track i{background:Highlight}.wi200Chip[aria-pressed=true]{outline:2px solid Highlight}}

/* r200: school-only workspace tabs (Shared content library, Classes, Pilot). Matches the r200 team Shared content design. */
.wss200Lib h1{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;color:var(--wc-ink);overflow-wrap:anywhere}
.wss200Lib .wc200Empty .quiet{margin-top:4px}

.w190Workspace .wss200{--ws-ink:var(--w190-ink,#fdf4e3);--ws-muted:var(--w190-muted,#d0bfd8);--ws-line:rgba(253,244,227,.12);--ws-card:rgba(46,24,58,.92);--ws-turq:var(--w190-turq,#7ce0d4);--ws-lime:var(--w190-lime,#d9f36b);max-width:1180px;margin:0 auto;color:var(--ws-ink);font-family:Inter,sans-serif}
.w190Workspace .wss200 .btn,.w190Workspace .wss200 .quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:700 15px/1.2 Inter,sans-serif;width:auto;margin:0;text-align:center}
.w190Workspace .wss200 .quiet{background:rgba(253,244,227,.06);border:1px solid rgba(253,244,227,.22);color:var(--ws-ink)}
.w190Workspace .wss200 .quiet:hover{background:rgba(253,244,227,.12)}
.w190Workspace .wss200 button:focus-visible{outline:3px solid var(--ws-lime);outline-offset:2px}
.w190Workspace .wss200Eyebrow{margin:0 0 10px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--ws-turq);text-transform:uppercase}
.w190Workspace .wss200 .wss200Head{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:4px 0 28px}
.w190Workspace .wss200 .wss200Head>div{max-width:680px;min-width:0}
.w190Workspace .wss200 .wss200Head h3{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;color:var(--ws-ink)}
.w190Workspace .wss200 .wss200Head p:not(.wss200Eyebrow){margin:0;font-size:17px;line-height:1.6;color:var(--ws-muted);max-width:none}
.w190Workspace .wss200 .wss200Head>button{align-self:flex-end}
.w190Workspace .wss200Note{margin:26px 0 0;padding:16px 18px;border-radius:14px;background:rgba(124,224,212,.08);border:1px solid rgba(124,224,212,.2);font-size:15px;line-height:1.6;color:var(--ws-muted)}
.w190Workspace .wss200Note b{color:var(--ws-ink)}

/* Classes */
.w190Workspace .wss200ClassGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.w190Workspace .wss200Class{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:16px;background:var(--ws-card);border:1px solid var(--ws-line);box-shadow:0 10px 26px rgba(0,0,0,.18);min-width:0}
.w190Workspace .wss200ClassTop{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.w190Workspace .wss200ClassIcon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(124,224,212,.16);color:var(--ws-turq)}
.w190Workspace .wss200Class h4{margin:0 0 4px;font:750 18px/1.35 Inter,sans-serif;color:var(--ws-ink);overflow-wrap:anywhere}
.w190Workspace .wss200Class p{margin:0;font-size:15px;line-height:1.5;color:var(--ws-muted);overflow-wrap:anywhere}
.w190Workspace .wss200Pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.w190Workspace .wss200Pills li{padding:6px 12px;border-radius:99px;background:rgba(253,244,227,.08);border:1px solid rgba(253,244,227,.14);font:600 14px/1.3 Inter,sans-serif;color:var(--ws-ink)}
.w190Workspace .wss200Pills li.on{background:rgba(217,243,107,.14);border-color:rgba(217,243,107,.35);color:var(--ws-lime)}
.w190Workspace .wss200 .wsClassFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--ws-line)}
.w190Workspace .wss200 .wsClassFoot>span{font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200 .wsClassFoot .quiet{min-height:44px;padding:0 22px}
.w190Workspace .wss200Empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 24px;text-align:center;border-radius:18px;border:1px dashed rgba(253,244,227,.24);background:rgba(0,0,0,.18)}
.w190Workspace .wss200Empty b{font:750 20px/1.3 Inter,sans-serif}
.w190Workspace .wss200Empty p{margin:0 auto 8px;max-width:440px;font-size:16px;line-height:1.6;color:var(--ws-muted)}

/* Pilot */
.w190Workspace .wss200Hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:20px 28px;padding:24px;border-radius:16px;background:var(--ws-card);border:1px solid var(--ws-line);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.w190Workspace .wss200HeroMain{min-width:0}
.w190Workspace .wss200Status{display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:99px;background:rgba(124,224,212,.16);color:var(--ws-turq);font:700 14px/1.4 Inter,sans-serif}
.w190Workspace .wss200Hero h4{margin:0 0 8px;font:800 22px/1.3 Inter,sans-serif;color:var(--ws-ink);overflow-wrap:anywhere}
.w190Workspace .wss200HeroMain>p{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--ws-muted)}
.w190Workspace .wss200Dates{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 14px}
.w190Workspace .wss200Dates div{min-width:0}
.w190Workspace .wss200Dates dt{font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200Dates dd{margin:2px 0 0;font:750 17px/1.3 Inter,sans-serif}
.w190Workspace .wss200Bar{height:10px;border-radius:99px;background:rgba(253,244,227,.1);overflow:hidden}
.w190Workspace .wss200Bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ws-turq),var(--ws-lime))}
.w190Workspace .wss200Next{min-width:0;padding:18px;border-radius:14px;background:rgba(217,243,107,.07);border:1px solid rgba(217,243,107,.25);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.w190Workspace .wss200Next .wss200Eyebrow{margin-bottom:4px}
.w190Workspace .wss200Next b{font:750 18px/1.35 Inter,sans-serif}
.w190Workspace .wss200Next p:not(.wss200Eyebrow){margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--ws-muted)}
.w190Workspace .wss200 .wss200Quick{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;padding-top:18px;border-top:1px solid var(--ws-line)}
.w190Workspace .wss200Stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.w190Workspace .wss200Stats>div{min-width:0;padding:18px;border-radius:16px;background:var(--ws-card);border:1px solid var(--ws-line)}
.w190Workspace .wss200Stats dt{font-size:14px;font-weight:600;color:var(--ws-muted)}
.w190Workspace .wss200Stats dd{margin:4px 0 2px;font:800 30px/1.1 Inter,sans-serif;color:var(--ws-ink)}
.w190Workspace .wss200Stats span{display:block;font-size:14px;line-height:1.45;color:var(--ws-muted);overflow-wrap:anywhere}
.w190Workspace .wss200Two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.w190Workspace .wss200Card{min-width:0;margin:0 0 16px;padding:22px;border-radius:16px;background:var(--ws-card);border:1px solid var(--ws-line);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.w190Workspace .wss200Two>.wss200Card{margin:0}
.w190Workspace .wss200 .wss200CardHead{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 16px}
.w190Workspace .wss200 .wss200CardHead>div{min-width:0}
.w190Workspace .wss200 .wss200CardHead .wss200Eyebrow{margin-bottom:8px;font-size:12px;letter-spacing:.14em;font-family:Inter,sans-serif}
.w190Workspace .wss200 .wss200CardHead h4{margin:0;font:800 20px/1.3 Inter,sans-serif;color:var(--ws-ink);overflow-wrap:anywhere}
.w190Workspace .wss200 .wss200CardHead p:not(.wss200Eyebrow){margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ws-muted);overflow-wrap:anywhere}
.w190Workspace .wss200 .wss200CardHead>button{flex:0 0 auto;align-self:flex-start;width:auto}
.w190Workspace .wss200Facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.w190Workspace .wss200Facts>div{min-width:0;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.2)}
.w190Workspace .wss200Facts dt{font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200Facts dd{margin:3px 0 0;font:750 16px/1.35 Inter,sans-serif;overflow-wrap:anywhere}
.w190Workspace .wss200Facts span{display:block;margin-top:2px;font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200Ticks{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.w190Workspace .wss200Ticks li{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px;line-height:1.4;color:var(--ws-muted)}
.w190Workspace .wss200Ticks li>span{min-width:0;overflow-wrap:anywhere}
.w190Workspace .wss200Ticks i{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(253,244,227,.3);font:900 13px/1 Inter,sans-serif;font-style:normal}
.w190Workspace .wss200Ticks li.done{color:var(--ws-ink)}
.w190Workspace .wss200Ticks li.done i{background:rgba(124,224,212,.2);border-color:var(--ws-turq);color:var(--ws-turq)}
.w190Workspace .wss200CardFoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ws-line);font-size:15px;color:var(--ws-muted)}
.w190Workspace .wss200CardFoot b{color:var(--ws-ink)}
.w190Workspace .wss200Rows{display:grid;gap:10px}
.w190Workspace .wss200 .wss200Row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0;padding:14px 16px;border-radius:12px;border:1px solid var(--ws-line);background:rgba(0,0,0,.18);color:var(--ws-ink);text-align:left;cursor:pointer;font-family:Inter,sans-serif;min-height:44px}
.w190Workspace .wss200 .wss200Row:hover:not(:disabled){border-color:rgba(253,244,227,.3);background:rgba(0,0,0,.28)}
.w190Workspace .wss200 .wss200Row:disabled{cursor:default}
.w190Workspace .wss200 .wss200Row>div{min-width:0}
.w190Workspace .wss200 .wss200Row b{display:block;font:700 16px/1.4 Inter,sans-serif;white-space:normal;overflow-wrap:anywhere}
.w190Workspace .wss200 .wss200Row small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--ws-muted);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.w190Workspace .wss200 .wss200Row em{grid-column:auto;font:700 14px/1.3 Inter,sans-serif;font-style:normal;padding:4px 10px;border-radius:99px;background:rgba(253,244,227,.08);color:var(--ws-ink);white-space:nowrap}
.w190Workspace .wss200 .wss200Row>i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(253,244,227,.3);font:900 13px/1 Inter,sans-serif;font-style:normal}
.w190Workspace .wss200 .wss200Row.done>i{background:rgba(124,224,212,.2);border-color:var(--ws-turq);color:var(--ws-turq)}
.w190Workspace .wss200 .wss200Row.wsPilotFinding{grid-template-columns:minmax(0,1fr) auto}
.w190Workspace .wss200 .wsPriority{display:inline-block;width:auto;height:auto;margin:0 0 6px;padding:3px 10px;border-radius:99px;font:700 13px/1.3 Inter,sans-serif;background:rgba(253,244,227,.08);border:1px solid rgba(253,244,227,.16);color:var(--ws-ink)}
.w190Workspace .wss200 .wsPriority:is(.sev-high,.sev-blocker){background:rgba(255,92,120,.16);border-color:rgba(255,92,120,.45);color:#ffb3c1}
.w190Workspace .wss200 .wsPriority.sev-medium{background:rgba(255,199,80,.14);border-color:rgba(255,199,80,.4);color:#ffd98a}
.w190Workspace .wss200None{margin:0;padding:18px;border-radius:12px;border:1px dashed rgba(253,244,227,.22);font-size:15px;line-height:1.6;color:var(--ws-muted)}
.w190Workspace .wss200Signals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.w190Workspace .wss200Signals>div{min-width:0;padding:14px;border-radius:12px;background:rgba(0,0,0,.2)}
.w190Workspace .wss200Signals small{display:block;font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200Signals b{display:block;margin:4px 0 2px;font:750 16px/1.35 Inter,sans-serif;overflow-wrap:anywhere}
.w190Workspace .wss200Signals span{display:block;font-size:14px;line-height:1.45;color:var(--ws-muted)}
.w190Workspace .wss200 .wsPilotFeedbackList{margin:16px 0 0;padding:0;border:0;background:none}
.w190Workspace .wss200Quote{display:block;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid var(--ws-line);background:rgba(0,0,0,.18);overflow-wrap:anywhere}
.w190Workspace .wss200Quote>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.w190Workspace .wss200Quote b{font:700 16px/1.4 Inter,sans-serif;min-width:0}
.w190Workspace .wss200Quote>div span,.w190Workspace .wss200Quote small{font-size:14px;color:var(--ws-muted)}
.w190Workspace .wss200Quote small{display:block;margin-top:2px}
.w190Workspace .wss200Quote p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--ws-ink)}

@media(max-width:900px){
  .w190Workspace .wss200Hero{grid-template-columns:1fr}
  .w190Workspace .wss200Stats,.w190Workspace .wss200Signals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w190Workspace .wss200Two{grid-template-columns:1fr}
}
@media(max-width:720px){
  .w190Workspace .wss200 .wss200Head{flex-direction:column;align-items:stretch;margin-bottom:22px}
  .w190Workspace .wss200 .wss200Head p:not(.wss200Eyebrow){font-size:16px}
  .w190Workspace .wss200 .wss200Head>button{align-self:stretch;width:100%}
  .w190Workspace .wss200ClassGrid{grid-template-columns:1fr}
  .w190Workspace .wss200Class{padding:16px}
  .w190Workspace .wss200 .wsClassFoot .quiet{min-width:112px}
  .w190Workspace .wss200Hero,.w190Workspace .wss200Card{padding:18px}
  .w190Workspace .wss200Next>button{align-self:stretch;width:100%}
  .w190Workspace .wss200 .wss200Quick{display:grid;grid-template-columns:1fr 1fr}
  .w190Workspace .wss200 .wss200Quick .quiet{padding:0 10px;white-space:normal;line-height:1.25}
  .w190Workspace .wss200 .wss200CardHead{flex-direction:column;align-items:stretch;gap:12px}
  .w190Workspace .wss200 .wss200CardHead>button{align-self:stretch;width:100%}
  .w190Workspace .wss200Facts{grid-template-columns:1fr}
  .w190Workspace .wss200CardFoot{flex-direction:column;align-items:stretch}
  .w190Workspace .wss200CardFoot .quiet{width:100%;white-space:normal}
  .w190Workspace .wss200 .wss200Row{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:14px}
  .w190Workspace .wss200 .wss200Row em{grid-column:2;justify-self:start}
  .w190Workspace .wss200 .wss200Row.wsPilotFinding{grid-template-columns:minmax(0,1fr)}
  .w190Workspace .wss200 .wss200Row.wsPilotFinding em{grid-column:1}
  .w190Workspace .wss200Stats dd{font-size:26px}
}
@media(max-width:350px){
  .w190Workspace .wss200Stats,.w190Workspace .wss200Signals,.w190Workspace .wss200 .wss200Quick{grid-template-columns:1fr}
}
@media(forced-colors:active){.w190Workspace :is(.wss200Class,.wss200Card,.wss200Hero,.wss200Row,.wss200Stats>div){border:1px solid CanvasText}}

/* r200: workspace Team / Educators and Settings tabs, plus their sheets. Matches the Shared content library (wc200). */
.wt200,.wt200Sheet{--wt-ink:var(--w190-ink,#fdf4e3);--wt-muted:var(--w190-muted,#d0bfd8);--wt-line:rgba(253,244,227,.12);--wt-card:rgba(46,24,58,.92);--wt-turq:var(--w190-turq,#7ce0d4);--wt-lime:var(--w190-lime,#d9f36b);--wt-danger:#ff9aa9;color:var(--wt-ink);font-family:Inter,sans-serif}
.wt200{max-width:1180px;margin:0 auto}
.wt200 *,.wt200Sheet *{box-sizing:border-box}
.wt200Eyebrow{margin:0 0 10px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--wt-turq)}
.wt200Head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:4px 0 26px}
.wt200Head>div:first-child{max-width:680px;min-width:0}
.wt200Head h3{margin:0 0 10px;font:800 clamp(28px,3.4vw,38px)/1.15 Inter,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--wt-ink)}
.wt200Head p:not(.wt200Eyebrow){margin:0;font-size:17px;line-height:1.6;color:var(--wt-muted)}
.wt200HeadActs{display:flex;gap:10px;flex-wrap:wrap}
.w190Workspace .wt200 :is(.btn,.quiet),.wt200 .btn,.wt200 .quiet,#sheetWrap .wt200Sheet :is(.btn,.quiet){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:700 15px/1.2 Inter,sans-serif;white-space:nowrap;width:auto;margin:0;clip-path:none;cursor:pointer}
.wt200 .quiet,.wt200Sheet .quiet{background:rgba(253,244,227,.06);border:1px solid rgba(253,244,227,.22);color:var(--wt-ink)}
.wt200 .quiet:hover,.wt200Sheet .quiet:hover{background:rgba(253,244,227,.12)}
.wt200 .quiet.wt200Danger,.wt200Sheet .quiet.wt200Danger{color:var(--wt-danger);border-color:rgba(255,154,169,.4);background:rgba(255,154,169,.06)}
.wt200 .quiet.wt200Danger:hover,.wt200Sheet .quiet.wt200Danger:hover{background:rgba(255,154,169,.14)}
.wt200 button:focus-visible,.wt200Sheet button:focus-visible,.wt200 input:focus-visible,.wt200 select:focus-visible,.wt200Sheet input:focus-visible{outline:3px solid var(--wt-lime);outline-offset:2px}
.wt200 button:disabled{opacity:.5;cursor:not-allowed}

/* Seat summary */
.wt200Seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 32px}
.wt200Seats>div{padding:18px 20px;border-radius:16px;background:var(--wt-card);border:1px solid var(--wt-line);min-width:0}
.wt200Seats small{display:block;font:700 14px/1.3 Inter,sans-serif;color:var(--wt-muted);margin-bottom:6px}
.wt200Seats b{display:block;font:800 30px/1.1 Inter,sans-serif;color:var(--wt-ink)}
.wt200Seats b i{font-style:normal;font-size:17px;font-weight:600;color:var(--wt-muted)}
.wt200Seats span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--wt-muted)}
.wt200Meter{height:8px;border-radius:99px;background:rgba(253,244,227,.1);overflow:hidden;margin-top:12px!important}
.wt200Meter i{display:block;height:100%;border-radius:inherit;background:var(--wt-lime)}

/* Blocks and rows */
.wt200Block{margin:0 0 32px}
.wt200BlockHead{margin:0 0 14px}
.wt200BlockHead h4{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:800 21px/1.3 Inter,sans-serif;color:var(--wt-ink)}
.wt200BlockHead h4 span{min-width:28px;padding:3px 9px;border-radius:99px;background:rgba(253,244,227,.1);font-size:14px;font-weight:700;text-align:center;color:var(--wt-ink)}
.wt200BlockHead p{margin:0;font-size:15px;line-height:1.55;color:var(--wt-muted)}
.wt200List{display:grid;gap:0;border-radius:16px;background:var(--wt-card);border:1px solid var(--wt-line);overflow:hidden}
.w190Workspace .wt200 .wt200Row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border:0;border-bottom:1px solid var(--wt-line);background:none;border-radius:0}
.w190Workspace .wt200 .wt200Row:last-child{border-bottom:0}
.wt200Avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:800 16px/1 Inter,sans-serif;letter-spacing:.02em;background:rgba(124,224,212,.16);color:var(--wt-turq);flex:0 0 auto}
.wt200Avatar[data-role=owner]{background:rgba(217,243,107,.16);color:var(--wt-lime)}
.wt200Avatar[data-role=member]{background:rgba(255,168,76,.16);color:#ffb870}
.wt200Avatar[data-role=viewer]{background:rgba(253,244,227,.1);color:var(--wt-muted)}
.wt200AvatarInvite{background:transparent!important;border:1.5px dashed rgba(253,244,227,.35);color:var(--wt-muted)}
.wt200Main{min-width:0}
.wt200Main b{display:block;font:750 17px/1.35 Inter,sans-serif;color:var(--wt-ink);overflow-wrap:anywhere}
.wt200Main span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--wt-muted);overflow-wrap:anywhere}
.wt200You{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;background:rgba(124,224,212,.16);color:var(--wt-turq);font:700 12px/1.4 Inter,sans-serif;font-style:normal;vertical-align:2px}
.wt200Side{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.w190Workspace .wt200 .wsRole,.wt200 .wsRole{display:inline-flex;align-items:center;min-height:30px;max-width:none;padding:4px 12px;border-radius:99px;font:700 14px/1.2 Inter,sans-serif;white-space:nowrap}
.wt200 .wsViewer{background:rgba(253,244,227,.1);color:var(--wt-muted)}
.w190Workspace .wt200 .wt200Side .quiet{min-height:44px;padding:0 18px;font-size:15px;color:var(--wt-ink)}
.w190Workspace .wt200 .wt200Side .quiet.wt200Danger{color:var(--wt-danger)}
.wt200Empty{padding:30px 22px;text-align:center;border-radius:16px;border:1px dashed rgba(253,244,227,.24);background:rgba(0,0,0,.18)}
.wt200Empty b{display:block;font:750 18px/1.3 Inter,sans-serif;margin-bottom:6px}
.wt200Empty p{margin:0 auto;max-width:420px;font-size:15px;line-height:1.6;color:var(--wt-muted)}

/* Role guide */
.wt200GuideGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wt200GuideGrid>div{padding:18px;border-radius:16px;background:rgba(0,0,0,.2);border:1px solid var(--wt-line);min-width:0}
.wt200GuideGrid b{display:flex;align-items:center;gap:8px;font:750 16px/1.3 Inter,sans-serif;margin:10px 0 6px;color:var(--wt-ink)}
.wt200GuideGrid span:not(.wt200Dot){display:block;font-size:15px;line-height:1.55;color:var(--wt-muted)}
.wt200Dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--wt-turq)}
.wt200Dot[data-role=owner]{background:var(--wt-lime)}.wt200Dot[data-role=member]{background:#ffb870}.wt200Dot[data-role=viewer]{background:var(--wt-muted)}

/* Settings */
.wt200SettingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.wt200Card{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:16px;background:var(--wt-card);border:1px solid var(--wt-line);min-width:0}
.wt200Wide{grid-column:1/-1}
.wt200CardHead h4{margin:0 0 6px;font:800 20px/1.3 Inter,sans-serif;color:var(--wt-ink)}
.wt200CardHead p{margin:0;font-size:15px;line-height:1.6;color:var(--wt-muted);overflow-wrap:anywhere}
.wt200Stat{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--wt-line)}
.wt200Stat b{font:750 16px/1.4 Inter,sans-serif;color:var(--wt-ink);overflow-wrap:anywhere}
.wt200StatLabel{font-size:15px;color:var(--wt-muted)}
.wt200 .lic199{font-size:14px!important}
.wt200CardActs{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.wt200Wide .wt200CardActs{margin-top:0}
.wt200Field{display:block;min-width:0}
.wt200Label{display:block;margin:0 0 8px;font:700 15px/1.3 Inter,sans-serif;color:var(--wt-ink);padding:0}
.wt200 .wt200Field input,.wt200 .wt200Field select,.wt200Sheet .wt200Field input{display:block;width:100%;min-height:48px;margin:0;padding:0 16px;border-radius:12px;border:1px solid rgba(253,244,227,.22);background:rgba(0,0,0,.28);color:var(--wt-ink);font:500 16px Inter,sans-serif;clip-path:none}
.wt200 .wt200Field input:disabled{opacity:.7}
.wt200Wide:not(.wt200Caution){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:16px 24px}
.wt200Can{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wt200Can li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--wt-ink)}
.wt200Can svg{flex:0 0 auto;margin-top:3px;color:var(--wt-lime)}
.wt200Muted{margin:0;font-size:15px;color:var(--wt-muted)}
.wt200Caution{border-color:rgba(255,154,169,.28);background:linear-gradient(0deg,rgba(255,154,169,.04),rgba(255,154,169,.04)),var(--wt-card)}
.wt200Caution .wt200Field{max-width:520px}

/* Sheets */
#sheetWrap .wt200Sheet{max-width:520px;padding:26px 24px 24px;border-radius:20px;clip-path:none;background:#2a1636;border:1px solid var(--wt-line)}
.wt200Sheet .wt200Eyebrow{margin-bottom:8px}
.wt200SheetTitle{margin:0 0 8px;font:800 24px/1.25 Inter,sans-serif;color:var(--wt-ink);overflow-wrap:anywhere}
.wt200SheetText{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--wt-muted)}
.wt200Sheet .wt200Field{margin-bottom:18px}
.wt200SheetPerson{display:flex;align-items:center;gap:14px;margin:0 0 20px;min-width:0}
.wt200SheetPerson>div{min-width:0}
.wt200SheetPerson .wt200SheetTitle{margin:0 0 2px;font-size:21px}
.wt200SheetPerson p{margin:0;font-size:14px;line-height:1.5;color:var(--wt-muted);overflow-wrap:anywhere}
.wt200Roles{border:0;margin:0 0 20px;padding:0;min-width:0}
.wt200RoleOpt{display:flex;align-items:flex-start;gap:12px;padding:14px;margin:0 0 8px;border-radius:14px;border:1px solid rgba(253,244,227,.18);background:rgba(0,0,0,.2);cursor:pointer}
.wt200RoleOpt:has(input:checked){border-color:var(--wt-lime);background:rgba(217,243,107,.08)}
.wt200RoleOpt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;min-height:0!important;margin:1px 0 0;padding:0;border-radius:50%;border:2px solid rgba(253,244,227,.5);background:transparent;display:grid;place-items:center;cursor:pointer}
.wt200RoleOpt input:checked{border-color:var(--wt-lime)}
.wt200RoleOpt input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--wt-lime)}
.wt200RoleOpt input:focus-visible{outline:3px solid var(--wt-lime);outline-offset:2px}
.wt200RoleOpt span{min-width:0}
.wt200RoleOpt b{display:block;font:750 16px/1.3 Inter,sans-serif;color:var(--wt-ink)}
.wt200RoleOpt small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--wt-muted)}
.wt200SheetActs{display:flex;gap:10px;flex-wrap:wrap}
.wt200SheetActs .btn{flex:1 1 auto}
.wt200SheetDanger{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--wt-line)}
.wt200SheetDanger b{display:block;font:750 16px/1.3 Inter,sans-serif;color:var(--wt-ink)}
.wt200SheetDanger p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--wt-muted)}

@media(max-width:900px){.wt200GuideGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.wt200Wide:not(.wt200Caution){grid-template-columns:1fr;align-items:stretch}}
@media(max-width:720px){
  .wt200Head{align-items:stretch;margin-bottom:22px}
  .wt200Head p:not(.wt200Eyebrow){font-size:16px}
  .wt200HeadActs,.wt200HeadActs .btn{width:100%}
  .wt200Seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:28px}
  .wt200Seats>div{padding:14px 16px}
  .wt200Seats b{font-size:26px}
  .w190Workspace .wt200 .wt200Row{grid-template-columns:44px minmax(0,1fr);gap:12px 14px;padding:16px}
  .wt200Avatar{width:44px;height:44px;font-size:15px}
  .wt200Side{grid-column:2;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .wt200SettingsGrid{grid-template-columns:1fr}
  .wt200Card{padding:20px}
  .wt200CardActs .btn,.wt200CardActs .quiet{flex:1 1 auto}
  .wt200SheetDanger{flex-direction:column;align-items:stretch}
  #sheetWrap .wt200Sheet{padding:22px 18px 18px}
}
@media(max-width:480px){.wt200GuideGrid{grid-template-columns:1fr}}
@media(max-width:360px){.wt200Seats{grid-template-columns:1fr}.wt200 .btn,.wt200 .quiet,.wt200Sheet .btn,.wt200Sheet .quiet{padding:0 14px}}
@media(forced-colors:active){.wt200List,.wt200Card,.wt200Seats>div,.wt200RoleOpt{border:1px solid CanvasText}.wt200RoleOpt:has(input:checked){outline:2px solid Highlight}}

/* r200 QA fixes (hero chips, Schools sheet, floating Join, Join avatars, home library card, host time cards). */

/* 1. Home hero: lift the cheering man and his +940 chip clear of the trust chips row at every desktop width. */
@media(min-width:880px){
  .homeHero .faces .face.a{top:25%}
  .homeHero .faces .gchip.g1{top:20%}
  .homeHero .faces .gchip.g2{top:29%}
}

/* 3. Schools "Speak to us" and other cream dialogs on phones: the sheet starts 26px down, so fit the rest of
   the viewport (minus the safe areas) and scroll inside rather than running past the bottom edge. */
@media(max-width:600px){
  #sheetWrap .sheet.k184Dialog{max-height:calc(100dvh - 44px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* 4. Floating Join: a compact pill tucked bottom right on a solid plum ring, faded in and out (no pop, no jump). */
#fabJoin.fabjoin.fab200{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:7px;min-height:44px;padding:0 16px 0 14px;font-size:13px;line-height:1;border-radius:999px;clip-path:none;
  background:linear-gradient(135deg,var(--tang),var(--mag));box-shadow:0 0 0 3px #1c0f26,0 8px 22px rgba(0,0,0,.45);
  animation:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
#fabJoin.fabjoin.fab200.fabOn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
#fabJoin.fabjoin.fab200 svg{width:16px;height:16px}
#fabJoin.fabjoin.fab200:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){#fabJoin.fabjoin.fab200,#fabJoin.fabjoin.fab200.fabOn{transition:none;transform:none}}

/* 5. Join avatars: fixed 52px tiles on an auto-fill grid (4 a row at 320, 5 at 360 to 414, 8 on wider cards). */
.av200Grid{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:8px;margin-bottom:10px}
.av200Grid .avbtn{width:52px;height:52px}

/* 6. Signed-in library card: sits inside the action card, right under the prize draw strip, on the same edges. */
.homeActionCard .h200Lib{box-sizing:border-box;width:100%;max-width:940px;margin:14px auto 0;text-align:left;border-radius:12px;clip-path:none}
@media(min-width:1100px){.homeActionCard .h200Lib{max-width:980px}}

/* 7. Host setup time cards: the second line is a quiet description, not a second option. */
.h200Sheet .h200Time{gap:4px}
.h200Sheet .h200Time b{font-size:13.5px}
.h200Sheet .h200Time small{font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--h2Dim);opacity:.9;letter-spacing:0;text-transform:none}
.h200Sheet .h200Time[aria-pressed=true] small{color:#3a4a10;opacity:1}

/* r200 blog typography: the blog function serves /blog-style.css (app.css + fixes + this). */
.blogPage .bpBody{font:400 17px/1.75 Inter,system-ui,sans-serif;color:#dccbe6;max-width:720px;margin:0 auto}
.blogPage .bpBody p{margin:0 0 20px}
.blogPage .bpBody h2{font:800 clamp(24px,3vw,30px)/1.25 Unbounded,Inter,sans-serif;letter-spacing:-.02em;color:#fdf4e3;margin:44px 0 14px;text-wrap:balance}
.blogPage .bpBody h3{font:750 21px/1.35 Inter,sans-serif;color:#fdf4e3;margin:32px 0 10px}
.blogPage .bpBody h4{font:750 18px/1.4 Inter,sans-serif;color:#fdf4e3;margin:24px 0 8px}
.blogPage .bpBody h2::after{content:"";display:block;width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,#d9f36b,#7ce0d4);margin-top:12px}
.blogPage .bpBody strong,.blogPage .bpBody b{font-weight:750;color:#fdf4e3}
.blogPage .bpBody em{font-style:italic}
.blogPage .bpBody a{color:#d9f36b;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.blogPage .bpBody ul,.blogPage .bpBody ol{margin:0 0 24px;padding:18px 22px 18px 44px;border-radius:16px;background:rgba(253,244,227,.05);border:1px solid rgba(253,244,227,.1)}
.blogPage .bpBody ul{list-style:none;padding-left:22px}
.blogPage .bpBody ul li{position:relative;padding-left:26px}
.blogPage .bpBody ul li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:#d9f36b}
.blogPage .bpBody ol{list-style:decimal}
.blogPage .bpBody li{margin:0 0 10px}
.blogPage .bpBody li:last-child{margin-bottom:0}
.blogPage .bpBody blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid #d9f36b;border-radius:0 14px 14px 0;background:rgba(217,243,107,.08);font:600 19px/1.55 Inter,sans-serif;color:#fdf4e3}
.blogPage .bpBody img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 20px}
.blogPage .bpBody code{font-size:.9em;padding:2px 6px;border-radius:6px;background:rgba(253,244,227,.1)}
@media(max-width:600px){.blogPage .bpBody{font-size:16px}.blogPage .bpBody h2{margin-top:36px}.blogPage .bpBody ul,.blogPage .bpBody ol{padding:14px 16px 14px 36px}.blogPage .bpBody ul{padding-left:14px}}