: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}
  html,body{height:100%}
  html{overflow-x:hidden;max-width:100%}
/* 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',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}}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(70px,50px)}}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
  .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',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',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',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',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',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',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',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',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',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',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',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',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 on mobile the band already fits, so tighten the spacing back up
     rather than making the section taller than it needs to be. */
  .gathClauses p{margin-bottom:8px}
}
  .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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',sans-serif;
    font-weight:700;font-size:9.5px;letter-spacing:1.5px;padding:5px 11px;border-radius:7px}
  .pname{font-family:'Unbounded',sans-serif;font-weight:800;font-size:16px}
  .pprice{font-family:'Unbounded',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',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',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',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',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',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',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',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',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',sans-serif;font-weight:700;font-size:14.5px;line-height:1.3}
  .wsc{font-family:'Unbounded',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',sans-serif;font-weight:800;font-size:17px;background:var(--bg);border:2px solid var(--acc);color:var(--acc)}
.hiw-lbl{font-family:'Unbounded',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',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',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',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',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',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',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',sans-serif;font-weight:800;font-size:14px;color:var(--lime);border:3px solid rgba(200,241,53,.28)}
.hiw-qtext{font-family:'Unbounded',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:2.1px;color:var(--lime)}.prxHero h1{font-family:'Unbounded',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',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',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',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',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',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',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',sans-serif;font-weight:700;font-size:8.5px;letter-spacing:1.3px;margin-bottom:4px}.prxEnterprise b{font-family:'Unbounded',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',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',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',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',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',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',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',sans-serif;font-size:15px;margin-top:3px}@keyframes rfSpin{to{transform:rotate(1800deg)}}.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',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',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',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',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',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',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',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',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',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',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',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',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,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,sans-serif;letter-spacing:-1.2px;margin:8px 0}.wsHero p{color:var(--dim);font-size:11px;margin:0}
.wsEyebrow{font:750 8px Unbounded,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,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,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,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,sans-serif;color:var(--turq);letter-spacing:1.4px}.wsSectionHead h3{font:700 clamp(18px,3vw,26px) Unbounded,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,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,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,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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',sans-serif;font-style:normal;margin-left:-10px;border:3px solid #1D0E27}
.fwFaces i:first-child{margin-left:0}
.fwH1{font-family:'Unbounded',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',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',sans-serif;background:var(--kc);color:var(--kct)}
.fwWho{font-family:'Unbounded',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',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',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',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',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',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',sans-serif;background:var(--ac);color:var(--acT)}
.rhStep b{display:block;font-family:'Unbounded',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',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',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',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',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',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',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',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',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',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',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',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. */
.homeLiveProof{max-width:760px;margin:26px auto 0;position:relative;z-index:3}
.homeLiveFrame{background:linear-gradient(145deg,rgba(44,23,56,.97),rgba(21,9,33,.98));border:1px solid rgba(253,244,227,.13);box-shadow:0 22px 65px rgba(0,0,0,.32);padding:13px;border-radius:18px;overflow:hidden;position:relative}
.homeLiveFrame:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 0,rgba(43,217,198,.12),transparent 32%),radial-gradient(circle at 92% 100%,rgba(240,80,155,.11),transparent 34%)}
.homeLiveTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;position:relative}
.homeLiveStatus{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--turq)}
.homeLiveStatus i{width:7px;height:7px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 0 rgba(43,217,198,.55);animation:homePulse 1.8s ease-out infinite}
.homeLiveMeta{font-size:10.5px;color:var(--dim);font-weight:700}
.homeLiveBody{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;position:relative}
.homeQuestion{background:#170B20;border:1px solid rgba(253,244,227,.08);padding:15px;border-radius:13px}
.homeQuestion small{display:block;color:var(--dim);font-weight:800;font-size:9px;letter-spacing:.1em;margin-bottom:7px}
.homeQuestion strong{display:block;font-size:15px;line-height:1.35;margin-bottom:11px}
.homeAns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.homeAns span{display:flex;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:8px;font-size:10.5px;font-weight:800;background:#332040;color:var(--ink);overflow:hidden;position:relative}
.homeAns span:before{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--c);animation:homeBar 1.1s cubic-bezier(.2,.8,.2,1) both}
.homeAns b{font-size:9px;color:var(--dim)}
.homeLiveSide{display:flex;flex-direction:column;gap:8px}
.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}
@keyframes homePulse{70%{box-shadow:0 0 0 7px rgba(43,217,198,0)}}
@keyframes homeBar{from{width:0}to{width:var(--w)}}

/* 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)}

.homeShowcase{margin-top:34px;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.homeShowcaseShell{background:linear-gradient(145deg,#23122F,#1A0C24);border:1px solid rgba(253,244,227,.1);border-radius:20px;padding:22px;overflow:hidden;position:relative}
.homeShowcaseShell:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:var(--mag);filter:blur(110px);opacity:.08;right:-80px;top:-100px;pointer-events:none}
.homeShowHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;position:relative}
.homeShowHead h2,.homeShowHead h4{margin:4px 0 0;font-size:22px}.homeShowHead p{max-width:510px;margin:6px 0 0;color:var(--dim);font-size:12.5px;line-height:1.55;font-weight:600}
.homeShowTabs{display:flex;gap:7px;flex-wrap:wrap;position:relative}
.homeShowTab{appearance:none;border:1px solid rgba(253,244,227,.12);background:rgba(253,244,227,.045);color:var(--dim);padding:9px 11px;border-radius:9px;font-size:10.5px;font-weight:850;cursor:pointer;transition:.18s}
.homeShowTab:hover{color:var(--ink);border-color:rgba(253,244,227,.24)}.homeShowTab.on{background:var(--lime);color:var(--limeT);border-color:var(--lime)}
.homeShowStage{min-height:300px;background:#12071A;border:1px solid rgba(253,244,227,.08);border-radius:16px;padding:18px;position:relative;overflow:hidden}
.homeDemo{display:none;min-height:264px;animation:homeDemoIn .34s ease both}.homeDemo.on{display:grid}
@keyframes homeDemoIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.demoQuiz{grid-template-columns:1.15fr .85fr;gap:18px;align-items:center}.demoCopy .tag{font-size:9.5px;font-weight:900;letter-spacing:.11em;color:var(--turq)}.demoCopy h5{font-family:var(--display,inherit);font-size:21px;margin:7px 0}.demoCopy p{font-size:12px;color:var(--dim);line-height:1.6;max-width:390px}.demoScreen{background:#2B1738;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.demoScreen .dq{font-size:14px;font-weight:850;margin:7px 0 11px}.demoScreen .da{padding:9px 10px;border-radius:8px;margin:6px 0;font-size:10.5px;font-weight:750;background:#3C274A;display:flex;justify-content:space-between}.demoScreen .da.good{background:linear-gradient(90deg,rgba(43,217,198,.88),rgba(200,241,53,.8));color:#0D302C}
.demoRaffle{grid-template-columns:.9fr 1.1fr;gap:20px;align-items:center}.miniWheel{width:210px;height:210px;border-radius:50%;margin:auto;background:conic-gradient(var(--tang) 0 25%,var(--mag) 25% 50%,var(--turq) 50% 75%,var(--lime) 75%);border:10px solid #34203F;box-shadow:0 18px 38px rgba(0,0,0,.3);position:relative;animation:miniWheelFloat 4s ease-in-out infinite}.miniWheel:after{content:"DRAW";position:absolute;inset:64px;border-radius:50%;background:#1D0E27;border:5px solid #FDF4E3;color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:950}.miniWheel:before{content:"";position:absolute;right:-9px;top:89px;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:24px solid var(--sun);z-index:2}@keyframes miniWheelFloat{50%{transform:rotate(5deg)}}
.demoKids{grid-template-columns:1fr 1fr;gap:18px;align-items:center}.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)}}
.demoTemplates{grid-template-columns:1fr 1fr;gap:18px;align-items:center}.miniTplGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.miniTpl{background:#2B1738;border:1px solid rgba(255,255,255,.08);padding:12px;border-radius:11px;min-height:86px;transition:.2s}.miniTpl:hover{transform:translateY(-3px);border-color:rgba(43,217,198,.35)}.miniTpl b{font-size:11px;display:block}.miniTpl span{display:block;color:var(--dim);font-size:9px;margin-top:5px}
@media(max-width:720px){.homeLiveBody{grid-template-columns:1fr}.homeLiveSide{display:grid;grid-template-columns:1fr 1fr}.homeShowHead{display:block}.homeShowTabs{margin-top:14px}.demoQuiz,.demoRaffle,.demoKids,.demoTemplates{grid-template-columns:1fr}.homeShowStage{min-height:430px}.miniWheel{width:170px;height:170px}.miniWheel:after{inset:50px}.homeQuestion strong{font-size:13px}}
@media(max-width:470px){.homeLiveProof{margin-top:20px}.homeLiveFrame{padding:10px}.homeAns{grid-template-columns:1fr}.homeLiveSide{grid-template-columns:1fr 1fr}.homeShowcaseShell{padding:15px}.homeShowTab{flex:1 1 46%;text-align:center}.homeShowStage{padding:14px}.homeShowHead h2,.homeShowHead h4{font-size:18px}}
@media(prefers-reduced-motion:reduce){.homeLiveStatus i,.homeAns span:before,.miniWheel,.kidsMiniAvatar,.kidsMiniCrown{animation:none!important}}

/* V2 visual prototype. No production logic is changed. */
.homeLiveProof{display:none!important}
.hs2Shell{padding:24px!important;background:linear-gradient(145deg,#24112f 0%,#17091f 58%,#20102b 100%)!important;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.hs2Head{align-items:center!important}.hs2Head h4{font-size:24px!important}.hs2Head p{max-width:540px!important;font-size:12.8px!important}
.hs2Tabs{justify-content:flex-end}.hs2Tabs .homeShowTab{padding:10px 13px;border-radius:999px}
.hs2Progress{height:2px;background:rgba(255,255,255,.07);margin:0 0 14px;border-radius:99px;overflow:hidden}.hs2Progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--turq),var(--lime),var(--tang),var(--mag));transform-origin:left;animation:hs2Progress 8s linear both}@keyframes hs2Progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hs2Stage{min-height:410px!important;padding:0!important;background:#100617!important;border-radius:20px!important}
.hs2Demo{grid-template-columns:290px 1fr!important;gap:0!important;min-height:410px!important;align-items:stretch!important}
.hs2Copy{padding:34px 28px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(255,255,255,.035),transparent)}
.hs2Kicker{font-size:9px;font-weight:950;letter-spacing:.14em}.hs2Copy h5{font-family:'Unbounded',sans-serif;font-size:22px;line-height:1.18;margin:9px 0 10px}.hs2Copy p{color:var(--dim);font-size:12.2px;line-height:1.62;margin:0}
.hs2MiniSteps{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.hs2MiniSteps span{border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 8px;color:var(--dim);font-size:8.5px;font-weight:850}.hs2MiniSteps span.on{background:rgba(200,241,53,.1);border-color:rgba(200,241,53,.35);color:var(--lime)}
.hs2Canvas{position:relative;min-width:0;overflow:hidden;background:radial-gradient(circle at 72% 18%,rgba(240,80,155,.12),transparent 31%),radial-gradient(circle at 18% 85%,rgba(43,217,198,.08),transparent 30%),#180b21}
.hs2Hint{text-align:center;color:var(--dim);font-size:9px;font-weight:700;margin-top:10px}.hs2Hint span{color:var(--lime);margin-right:5px}
/* 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}.hs2Spark{position:absolute;width:7px;height:12px;border-radius:2px;animation:confDrop 3.4s linear 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 confDrop{to{transform:translateY(430px) rotate(360deg)}}@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}.demoDrum{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:210px;height:145px;border-radius:48% 48% 32% 32%;background:linear-gradient(90deg,#71304a,#d36b45 25%,#f19b59 50%,#c95843 75%,#71304a);border:6px solid #4a2039;box-shadow:inset 0 10px rgba(255,255,255,.1),0 25px 42px rgba(0,0,0,.38);animation:drumBeat .7s ease-in-out infinite alternate}.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)}.demoDrum strong{position:absolute;left:0;right:0;top:69px;text-align:center;color:#4a2039;font-family:'Unbounded';font-size:13px;letter-spacing:.08em}.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 drumBeat{to{transform:translate(-50%,-54%) scale(1.018)}}@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:760px){.hs2Demo{grid-template-columns:1fr!important}.hs2Copy{padding:22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.hs2Stage{min-height:650px!important}.hs2Canvas{min-height:410px}.hs2Head{align-items:flex-start!important;flex-direction:column}.hs2Tabs{justify-content:flex-start}.hs2Tabs .homeShowTab{flex:1 1 42%;text-align:center}.hs2Hint{display:none}}
@media(max-width:470px){.hs2Shell{padding:14px!important}.hs2Stage{min-height:625px!important}.hs2Canvas{min-height:390px}.hs2Copy h5{font-size:18px}.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){.hs2Progress i,.qPhone,.qReveal,.lpPerson em,.hs2Spark,.demoDrum,.drumGlow,.drumStick,.kp em{animation:none!important}}

.homeShowcaseV3 .hs2Progress i{animation-duration:var(--hsdur,9000ms)}
.v3QuizCanvas{min-height:430px}.v3QuizQuestion{position:absolute;left:5%;top:7%;width:48%;padding:17px;border-radius:17px;background:#271536;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 42px rgba(0,0,0,.3);transform:rotate(-1.2deg);z-index:2}.v3QuizQuestion small{font-size:7px;color:var(--dim);letter-spacing:.12em;font-weight:900}.v3QuizQuestion>b{display:block;font-size:13px;line-height:1.35;margin:9px 0 12px}.v3LearnCard{position:absolute;right:4%;top:6%;width:38%;padding:14px;border-radius:15px;background:linear-gradient(145deg,#173d38,#1f2f35);border:1px solid rgba(43,217,198,.3);box-shadow:0 18px 36px rgba(0,0,0,.25);z-index:2}.v3LearnCard span{font-size:6.5px;color:var(--lime);font-weight:950;letter-spacing:.12em}.v3LearnCard b{display:block;font-family:'Unbounded';font-size:14px;margin:5px 0}.v3LearnCard p{font-size:8px;line-height:1.45;color:#c7d8d4;margin:0}.v3PodiumWrap{position:absolute;left:9%;right:6%;bottom:0;height:245px}.v3PodiumLabel{text-align:center;margin-bottom:-2px}.v3PodiumLabel small{display:block;color:var(--lime);font-size:6.5px;font-weight:900;letter-spacing:.14em}.v3PodiumLabel b{font-family:'Unbounded';font-size:10px}.hsLiveStage{margin:2px auto 0!important;max-width:430px!important;transform:scale(.78);transform-origin:50% 100%;height:205px}.hsLiveStage .tier{max-width:120px}.hsLiveStage .tier .tav{font-size:25px}.hsLiveStage .tier .tnm{font-size:9px}.hsLiveStage .tier .tsc{font-size:10px}.hsLiveStage .block.b1{height:112px!important}.hsLiveStage .block.b2{height:82px!important}.hsLiveStage .block.b3{height:62px!important}.hsLiveStage .podCrown{width:43px;top:-58px}
.v3RaffleCanvas{min-height:430px}.v3ActualDrum{position:absolute;left:6%;top:55px;width:55%;max-width:none;margin:0;padding:24px 15px;background:radial-gradient(circle at 50% 22%,rgba(255,122,41,.2),transparent 58%),#15091f}.v3ActualDrum .drumicon svg{width:112px;height:112px}.v3ActualDrum .drumcount{font-size:28px}.v3NameStream{position:absolute;left:4%;right:42%;bottom:24px;display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.v3NameStream span{padding:5px 8px;border-radius:999px;background:#342040;color:var(--dim);font-size:7px;font-weight:850}.v3NameStream .focus{background:var(--tang);color:var(--tangT)}.v3Winner{position:absolute!important;right:4%;top:29%;width:34%;padding:22px 14px!important;margin:0!important;align-items:center!important}.v3Winner b{font-size:18px!important}
.v3KidsCanvas{min-height:430px}.v3KidTopics{position:absolute;left:3%;top:5%;width:38%;display:grid;gap:7px}.v3KidTopics .kTopicCard{min-height:0!important;padding:9px 10px!important;display:grid!important;grid-template-columns:46px 1fr!important;grid-template-rows:auto auto!important;column-gap:9px!important}.v3KidTopics .kTopicArt{grid-row:1/3!important;min-height:42px!important;height:42px!important;margin:0!important}.v3KidTopics .kTopicCard>b{font-size:8.5px}.v3KidTopics .kTopicCard>small{font-size:7px;color:var(--dim)}.v3AvatarPanel{position:absolute;left:3%;bottom:5%;width:40%;padding:12px;border-radius:14px;background:linear-gradient(145deg,#352047,#25142f);border:1px solid rgba(255,255,255,.08)}.v3AvatarPanel>small{display:block;font-size:6.5px;font-weight:950;letter-spacing:.1em;color:var(--vio);margin-bottom:8px}.v3AvatarRow{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.v3AvatarRow .kAv{width:38px!important;height:38px!important}.v3GameName{display:flex;align-items:center;gap:6px;margin-top:9px}.v3GameName span{flex:1;background:var(--lime);color:#27320d;padding:7px 8px;border-radius:8px;font-size:8px;font-weight:900}.v3GameName i,.v3GameName b{font-style:normal;font-size:6.5px;color:var(--dim);font-weight:850}.v3KidsPodium{position:absolute;right:1%;top:3%;width:58%;height:400px;padding-top:34px}.v3KidsPodium .kPodiumGlow{top:65px;height:210px}.v3KidsPodium .kStageShell{transform:scale(.68);transform-origin:50% 70%;margin-top:15px}.v3KidsPodium .kWinnerCrown{z-index:9}.v3KidsPodium .kTier{opacity:1!important;transform:none!important}.v3FamilyTotal{text-align:center;font-size:9px;font-weight:750;color:var(--dim);margin-top:-58px}.v3FamilyTotal b{color:var(--lime);font-family:'Unbounded';font-size:12px}
.v3TplCanvas{padding:28px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:11px!important;align-content:center}.v3RealTpl{margin:0!important;min-height:82px;cursor:default}.v3TplMore{grid-column:1/-1;text-align:center;color:var(--dim);font-size:7.5px;line-height:1.5;padding-top:2px}
@media(max-width:760px){.v3QuizCanvas,.v3RaffleCanvas,.v3KidsCanvas{min-height:440px}.v3QuizQuestion{left:3%;width:57%}.v3LearnCard{right:2%;width:37%}.v3PodiumWrap{left:1%;right:0}.v3ActualDrum{left:2%;width:61%}.v3Winner{right:2%;width:36%}.v3KidTopics{left:2%;width:45%}.v3AvatarPanel{left:2%;width:45%}.v3KidsPodium{right:-4%;width:59%}}
@media(max-width:470px){.v3QuizCanvas,.v3RaffleCanvas,.v3KidsCanvas{min-height:480px}.v3QuizQuestion{width:63%}.v3LearnCard{top:5%;width:34%;padding:9px}.v3PodiumWrap{height:245px}.hsLiveStage{transform:scale(.66)}.v3ActualDrum{width:64%;left:-4%}.v3Winner{width:39%;padding:14px 8px!important}.v3KidTopics{width:49%}.v3AvatarPanel{width:49%}.v3AvatarRow{grid-template-columns:repeat(3,1fr)}.v3KidsPodium{right:-8%;width:57%;top:5%}.v3KidsPodium .kStageShell{transform:scale(.56)}.v3TplCanvas{grid-template-columns:1fr!important;padding:17px!important}.v3TplMore{display:none}}

.homeShowcaseV4 .hs4Shell{padding:24px;background:linear-gradient(145deg,#24112f,#17091f 60%,#21102c);box-shadow:0 28px 72px rgba(0,0,0,.24)}
.hs4Head{display:flex;justify-content:space-between;gap:22px;align-items:center}
.hs4Head h4{font-size:24px;margin-top:6px}.hs4Head p{max-width:540px;font-size:12.5px;color:var(--dim);line-height:1.55}
.hs4Tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.hs4Tabs .homeShowTab{border-radius:999px;padding:10px 13px}
.hs4Progress{height:2px;background:rgba(255,255,255,.07);margin:0 0 14px;border-radius:99px;overflow:hidden}.hs4Progress i{display:block;height:100%;background:linear-gradient(90deg,var(--turq),var(--lime),var(--tang),var(--mag));transform-origin:left;animation:hs4Progress var(--hsdur,10000ms) linear both}@keyframes hs4Progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hs4Stage{min-height:440px!important;padding:0!important;background:#100617!important;border-radius:20px!important;overflow:hidden}
.hs4Demo{grid-template-columns:300px 1fr!important;min-height:440px!important;gap:0!important;align-items:stretch!important}
.hs4Copy{padding:34px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(255,255,255,.035),transparent);border-right:1px solid rgba(255,255,255,.07)}
.hs4Kicker{font-size:9px;font-weight:950;letter-spacing:.14em}.hs4Copy h5{font-family:'Unbounded',sans-serif;font-size:21px;line-height:1.18;margin:9px 0 11px}.hs4Copy p{color:var(--dim);font-size:12px;line-height:1.62;margin:0}
.hs4Journey{display:flex;flex-wrap:wrap;gap:6px;margin-top:19px}.hs4Journey span{padding:6px 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--dim);font-size:8px;font-weight:850}.hs4Journey span.on{background:rgba(200,241,53,.10);border-color:rgba(200,241,53,.35);color:var(--lime)}
.hs4Canvas{position:relative;min-width:0;overflow:hidden;background:radial-gradient(circle at 78% 16%,rgba(240,80,155,.10),transparent 28%),radial-gradient(circle at 15% 86%,rgba(43,217,198,.07),transparent 28%),#180b21}
.hs4Hint{text-align:center;color:var(--dim);font-size:9px;font-weight:700;margin-top:10px}.hs4Hint span{color:var(--lime);margin-right:5px}
.homeShowcaseV4 .homeDemo:not(.on){pointer-events:none}
.homeShowcaseV4 .hs4Shell.isPaused *, .homeShowcaseV4 .hs4Shell.isPaused *:before, .homeShowcaseV4 .hs4Shell.isPaused *:after{animation-play-state:paused!important}
.homeShowcaseV4 .hs4Shell.isPaused #homeDemoProgress{animation-play-state:paused!important}

/* Live quiz. Question and reveal sit in their own row, podium has its own protected zone. */
.quiz4Canvas{padding:22px 26px 16px}
.quiz4Top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);gap:14px;min-height:178px}
.quiz4Question,.quiz4Reveal{border-radius:16px;border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 34px rgba(0,0,0,.22)}
.quiz4Question{background:#251331;padding:16px}.quiz4Question small{font-size:7.5px;color:var(--dim);font-weight:900;letter-spacing:.12em}.quiz4Question>b{display:block;font-size:13px;line-height:1.35;margin:9px 0 11px}
.quiz4Choices{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quiz4Choices i{position:relative;overflow:hidden;font-style:normal;color:#25142c;background:var(--c);padding:9px 8px;border-radius:8px;font-size:8.6px;font-weight:900;box-shadow:inset 0 -4px rgba(0,0,0,.12)}.quiz4Choices i.correct:after{content:'✓';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-weight:950}
.quiz4Reveal{background:linear-gradient(145deg,#173c37,#1e2f36);padding:16px}.quiz4Reveal span{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.1em}.quiz4Reveal b{display:block;font-family:'Unbounded';font-size:15px;margin:7px 0}.quiz4Reveal p{margin:0;color:#c9d9d5;font-size:8.5px;line-height:1.45}
.quiz4Results{position:absolute;left:24px;right:24px;bottom:10px;height:220px}.quiz4ResultHead{text-align:center;position:absolute;left:0;right:0;top:0;z-index:7;pointer-events:none}.quiz4ResultHead small{display:block;color:var(--lime);font-size:7px;font-weight:950;letter-spacing:.14em}.quiz4ResultHead b{display:block;font-family:'Unbounded';font-size:13px;margin-top:3px}.hs4LiveStage{position:absolute!important;left:8%!important;right:8%!important;bottom:0!important;height:178px!important;padding-top:52px!important;align-items:flex-end!important}.hs4LiveStage .tier{max-width:150px!important}.hs4LiveStage .podCrown{top:calc(-1 * clamp(45px,10vw,60px))!important}

/* Kids. Three calm zones, no element competes with the podium. */
.kids4Canvas{padding:19px;display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:210px 190px;gap:12px}
.kids4Flow{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}.kids4Topics,.kids4Identity,.kids4PlayCard,.kids4Podium{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#2f1a3d,#21122c);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.kids4Topics,.kids4Identity{padding:12px}.kids4Label{font-size:7px;color:#b995e6;font-weight:950;letter-spacing:.11em;margin-bottom:8px}
.kids4Topics button{width:100%;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;border:1px solid rgba(255,255,255,.07);background:#25142f;border-radius:10px;padding:7px;margin:5px 0;color:var(--ink)}.kids4Topics button.on{border-color:rgba(200,241,53,.35);box-shadow:inset 3px 0 var(--lime)}.kids4Topics button span{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--lime),var(--turq));color:#25321e}.kids4Topics b{font-size:8px}.kids4Topics small{font-size:6.7px;color:var(--dim);margin-top:2px}
.kids4AvatarRow{display:flex;gap:6px;flex-wrap:wrap}.kids4AvatarRow>span{width:39px;height:39px;border-radius:50%;padding:2px;border:2px solid rgba(255,255,255,.12);background:#2b1836}.kids4AvatarRow>span.on{border-color:var(--lime);box-shadow:0 0 0 2px rgba(200,241,53,.12)}.kids4AvatarRow svg{width:100%;height:100%}
.kids4NameCard{margin-top:10px;background:var(--lime);color:#263219;padding:9px 10px;border-radius:10px}.kids4NameCard small{font-size:6.5px;font-weight:950;letter-spacing:.1em}.kids4NameCard>b{display:block;font-family:'Unbounded';font-size:10px;margin:4px 0}.kids4NameCard div{display:flex;gap:10px;font-size:6.8px;font-weight:850}.kids4NameCard i{font-style:normal}
.kids4PlayCard{grid-column:2;grid-row:1/3;padding:16px;align-self:start;margin-top:4px;min-height:196px}.kids4PlayCard>small{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.12em}.kids4Player{display:flex;align-items:center;gap:8px;margin:9px 0}.kids4Player>svg{width:42px;height:42px}.kids4Player span b{display:block;font-size:9px}.kids4Player span i{display:block;font-style:normal;color:var(--dim);font-size:7px;margin-top:2px}.kids4PlayCard strong{display:block;font-size:11px;line-height:1.35;margin:10px 0}.kids4Answers{display:grid;grid-template-columns:1fr 1fr;gap:6px}.kids4Answers i{font-style:normal;color:#25142c;padding:8px;border-radius:8px;font-size:8px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}
.kids4Podium{grid-column:1;grid-row:2;padding:10px 12px;overflow:hidden}.kids4PodiumHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.kids4PodiumHead small{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.1em}.kids4PodiumHead b{font-size:7px;color:var(--dim)}.kids4PodiumHead em{font-style:normal;color:var(--lime)}.kids4Podium .kStageShell{height:138px}.kids4Podium .kStage{height:128px;padding-top:20px}.kids4Podium .kTn{font-size:6.5px}.kids4Podium .kTp{font-size:6px}.kids4Podium .kAvSlot{transform:scale(.8);transform-origin:center bottom}.kids4Podium .kPodCrown{transform:translateX(-50%) scale(.68)!important}

/* Raffle. One realistic talking drum, one winner card, no competing graphics. */
.raffle4Canvas{padding:24px}.raffle4Meta{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:4}.raffle4Meta span{font-size:8px;color:var(--tang);font-weight:950;letter-spacing:.12em}.raffle4Meta b{font-size:9px;color:var(--dim)}
.raffle4Stage{position:absolute;left:5%;top:46px;bottom:28px;width:62%}.raffle4Halo{position:absolute;left:50%;top:50%;width:330px;height:250px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,166,77,.23),rgba(255,122,41,.07) 46%,transparent 72%);filter:blur(5px);animation:r4Halo 2.4s ease-in-out infinite}
.raffle4Drum{position:absolute;left:50%;top:50%;width:230px;height:210px;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 30px rgba(0,0,0,.42));animation:r4Beat 1.35s ease-in-out infinite}.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}
.raffle4Winner{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:30%;display:flex;gap:12px;align-items:center;padding:18px 14px;border-radius:16px;background:linear-gradient(145deg,#382040,#25152f);border:1px solid rgba(200,241,53,.25);box-shadow:0 18px 40px rgba(0,0,0,.28)}.raffle4Winner>span{color:var(--lime)}.raffle4Winner small,.raffle4Winner em{display:block;font-size:7px;font-style:normal;color:var(--dim);letter-spacing:.08em}.raffle4Winner b{display:block;font-family:'Unbounded';font-size:18px;margin:4px 0}
@keyframes r4Beat{50%{transform:translate(-50%,-53%) scale(1.02)}}@keyframes r4Halo{50%{opacity:.65;transform:translate(-50%,-50%) scale(1.05)}}@keyframes r4StickL{50%{transform:rotate(11deg)}}@keyframes r4StickR{50%{transform:rotate(169deg)}}

/* Templates and solo. Real pack names come from POOLS. */
.templates4Canvas{padding:21px;display:grid;grid-template-columns:1.08fr .92fr;gap:14px}.templates4Grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:center}.v4RealTpl{margin:0!important;min-height:66px!important;box-shadow:0 12px 24px rgba(0,0,0,.15)}.v4RealTpl .tname{font-size:9px!important}.v4RealTpl .tsub2{font-size:7px!important}.solo4Card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:linear-gradient(145deg,#2f1a3c,#20112a);box-shadow:0 18px 36px rgba(0,0,0,.2)}.solo4Phone{width:150px;min-width:150px;padding:12px;border-radius:17px;background:#16091e;border:5px solid #4d3459;box-shadow:0 16px 28px rgba(0,0,0,.3)}.solo4Phone small{font-size:6.5px;color:var(--lime);font-weight:950;letter-spacing:.1em}.solo4Phone>b{display:block;font-family:'Unbounded';font-size:10px;margin:5px 0}.solo4Phone p{font-size:6.5px;color:var(--dim);margin:0 0 8px}.solo4Phone strong{display:block;font-size:8.5px;line-height:1.3;margin-bottom:8px}.solo4Phone div{display:grid;gap:4px}.solo4Phone i{font-style:normal;color:#25142c;font-size:6.5px;font-weight:900;padding:6px;border-radius:6px}.solo4Copy{min-width:0}.solo4Copy>span{display:grid;width:34px;height:34px;border-radius:50%;place-items:center;background:var(--lime);color:#243017;margin-bottom:10px}.solo4Copy>b{display:block;font-family:'Unbounded';font-size:12px}.solo4Copy small{display:block;color:var(--dim);font-size:7.5px;line-height:1.5;margin-top:5px}

@media(max-width:900px){
  .hs4Head{align-items:flex-start;flex-direction:column}.hs4Tabs{justify-content:flex-start}
  .hs4Demo{grid-template-columns:1fr!important}.hs4Copy{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:22px}
  .hs4Stage{min-height:720px!important}.hs4Canvas{min-height:470px}
}
@media(max-width:620px){
  .hs4Shell{padding:14px}.hs4Tabs .homeShowTab{flex:1 1 42%;text-align:center}
  .quiz4Top{grid-template-columns:1fr}.quiz4Reveal{display:none}.quiz4Results{left:10px;right:10px}
  .kids4Canvas{display:block;padding:12px}.kids4Flow{grid-template-columns:1fr;gap:8px}.kids4PlayCard{margin-top:8px;min-height:auto}.kids4Podium{margin-top:8px;height:180px}.kids4Podium .kStageShell{height:140px}
  .raffle4Stage{left:0;width:70%}.raffle4Winner{right:2%;width:36%;padding:12px 9px}
  .templates4Canvas{grid-template-columns:1fr}.templates4Grid{grid-template-columns:1fr 1fr}.solo4Card{margin-top:6px}.solo4Phone{width:135px;min-width:135px}
  .hs4Hint{display:none}
}
@media(max-width:430px){
  .hs4Stage{min-height:790px!important}.templates4Grid{grid-template-columns:1fr}.solo4Card{align-items:flex-start}.solo4Phone{width:126px;min-width:126px}
  .raffle4Stage{width:76%;left:-8%}.raffle4Winner{width:38%}
}
@media(prefers-reduced-motion:reduce){
  .homeShowcaseV4 *, .homeShowcaseV4 *:before, .homeShowcaseV4 *:after{animation:none!important;transition:none!important}
}

/* V5 layout fixes: protected zones, no overlapping components. */
.v5LiveCanvas{padding:22px!important;display:grid;grid-template-rows:170px 1fr;gap:12px}
.v5LiveUpper{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;min-height:0}
.v5QuestionCard,.v5RevealCard{border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:15px;min-width:0;background:#281735;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.v5QuestionCard small{font-size:7px;color:var(--dim);font-weight:900;letter-spacing:.12em}.v5QuestionCard>b{display:block;font-size:12.5px;line-height:1.35;margin:8px 0 10px}
.v5Choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}.v5Choices i{position:relative;font-style:normal;background:var(--c);color:#25142c;padding:8px;border-radius:8px;font-size:8px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}.v5Choices .correct:after{content:'✓';position:absolute;right:8px}
.v5RevealCard{background:linear-gradient(145deg,#183d38,#1f3036)}.v5RevealCard span{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v5RevealCard b{display:block;font-family:'Unbounded';font-size:15px;margin:7px 0}.v5RevealCard p{font-size:8.2px;line-height:1.45;color:#c9d9d5;margin:0}
.v5PodiumZone{position:relative;min-height:0;border:1px solid rgba(255,255,255,.06);border-radius:17px;background:linear-gradient(180deg,#16091e,#1a0c23);overflow:hidden;padding-top:34px}
.v5PodiumTitle{position:absolute;top:9px;left:0;right:0;text-align:center;z-index:8}.v5PodiumTitle small{display:block;color:var(--lime);font-size:6.5px;font-weight:950;letter-spacing:.13em}.v5PodiumTitle b{display:block;font-family:'Unbounded';font-size:11px;margin-top:2px}
.v5LiveStage{position:absolute!important;left:8%!important;right:8%!important;bottom:0!important;height:174px!important;padding-top:58px!important;align-items:flex-end!important}.v5LiveStage .tier{max-width:145px!important}.v5LiveStage .tnm{font-size:8px!important}.v5LiveStage .tsc{font-size:7px!important}.v5LiveStage .tav{transform:scale(.82);transform-origin:center bottom}.v5LiveStage .podCrown{transform:translateX(-50%) scale(.62)!important;top:-37px!important}

/* Kids */
.v5KidsCanvas{padding:16px!important;display:grid;grid-template-rows:190px 200px;gap:11px}
.v5KidsTop,.v5KidsBottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;min-height:0}.v5KidsCard{border:1px solid rgba(255,255,255,.08);border-radius:15px;background:linear-gradient(145deg,#301b3e,#21122b);padding:12px;min-width:0;overflow:hidden}
.v5TopicRow{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:9px;margin:5px 0}.v5TopicRow.on{border-color:rgba(200,241,53,.35);box-shadow:inset 3px 0 var(--lime)}.v5TopicRow span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--lime),var(--turq));color:#24301c}.v5TopicRow b{font-size:8px}.v5TopicRow small{font-size:6.5px;color:var(--dim)}
.v5AvatarRow{display:flex;gap:7px;flex-wrap:nowrap}.v5AvatarRow>span{width:40px;height:40px;border-radius:50%;padding:2px;border:2px solid rgba(255,255,255,.12);background:#2b1836}.v5AvatarRow>span.on{border-color:var(--lime);box-shadow:0 0 0 2px rgba(200,241,53,.12)}.v5AvatarRow svg{width:100%;height:100%}.v5NameBar{margin-top:12px;background:var(--lime);color:#25311a;padding:9px 10px;border-radius:10px;display:flex;justify-content:space-between;align-items:end;gap:8px}.v5NameBar small{display:block;font-size:6px;font-weight:950;letter-spacing:.1em}.v5NameBar b{display:block;font-family:'Unbounded';font-size:10px;margin-top:3px}.v5NameBar div{display:flex;gap:8px;font-size:6.5px;font-weight:850}.v5NameBar i,.v5NameBar em{font-style:normal}
.v5PlayerLine{display:flex;gap:8px;align-items:center}.v5PlayerLine>svg{width:38px;height:38px}.v5PlayerLine small{display:block;font-size:6px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v5PlayerLine b{display:block;font-size:9px;margin-top:2px}.v5PlayerLine i{display:block;font-style:normal;color:var(--dim);font-size:6.5px}.v5KidPlay strong{display:block;font-size:10px;line-height:1.35;margin:10px 0}.v5KidAnswers{display:grid;grid-template-columns:1fr 1fr;gap:6px}.v5KidAnswers i{font-style:normal;color:#25142c;padding:7px;border-radius:7px;font-size:7.5px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}
.v5KidPodHead{display:flex;justify-content:space-between;align-items:center}.v5KidPodHead small{font-size:6.5px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v5KidPodHead b{font-size:6.5px;color:var(--dim)}.v5KidPodHead em{font-style:normal;color:var(--lime)}.v5KidPodium .kStageShell{height:155px!important}.v5KidPodium .kStage{height:145px!important;padding-top:27px!important}.v5KidPodium .kTn{font-size:6.2px!important}.v5KidPodium .kTp{font-size:5.8px!important}.v5KidPodium .kAvSlot{transform:scale(.76);transform-origin:center bottom}.v5KidPodium .kPodCrown{transform:translateX(-50%) scale(.58)!important;top:-29px!important}

/* Raffle */
.v5RaffleCanvas{padding:18px!important;display:grid;grid-template-rows:auto 1fr auto;gap:11px}.v5RaffleHead{display:flex;justify-content:space-between;align-items:end}.v5RaffleHead small{font-size:6.5px;color:var(--tang);font-weight:950;letter-spacing:.12em}.v5RaffleHead b{font-size:9px;color:var(--dim)}
.v5DrawGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.v5DrawCard{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(145deg,#30203b,#201129);padding:10px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px}.v5DrawCard>b{font-family:'Unbounded';font-size:9px;margin-top:8px}.v5DrawCard>small{font-size:6.5px;color:var(--dim);line-height:1.35;margin-top:3px}
.v5Wheel{width:116px;height:116px;border-radius:50%;margin:auto;background:conic-gradient(var(--tang) 0 25%,var(--turq) 25% 50%,var(--lime) 50% 75%,var(--mag) 75%);border:7px solid #482855;position:relative;box-shadow:0 12px 25px rgba(0,0,0,.22);animation:v5WheelSpin 9s linear infinite}.v5Wheel:after{content:'▲';position:absolute;right:-14px;top:44px;color:var(--ink);font-size:16px;transform:rotate(-90deg)}.v5Wheel i{position:absolute;font-size:6px;font-style:normal;color:#27142d;font-weight:950}.v5Wheel i:nth-child(1){top:19px;left:48px}.v5Wheel i:nth-child(2){top:50px;right:7px}.v5Wheel i:nth-child(3){bottom:18px;left:43px}.v5Wheel i:nth-child(4){top:51px;left:5px}
.v5Reel{width:110px;margin:auto;border-radius:12px;background:#15091d;border:1px solid rgba(255,255,255,.08);padding:8px}.v5Reel i{display:block;font-style:normal;padding:8px 6px;margin:4px 0;border-radius:7px;background:#342040;color:var(--dim);font-size:7px;font-weight:850}.v5Reel .focus{background:var(--tang);color:#351824;animation:v5ReelPulse 1.3s ease-in-out infinite}
.v5Cards{display:flex;justify-content:center;gap:6px;align-items:center;height:120px}.v5Cards i{width:48px;height:68px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#4c2b5e,#2b1735);border:1px solid rgba(255,255,255,.1);font-style:normal;font-family:'Unbounded';font-size:17px;color:var(--lime);transform:rotate(-6deg)}.v5Cards i.mid{transform:translateY(-9px);background:linear-gradient(145deg,#6a3150,#34203f)}.v5Cards i:last-child{transform:rotate(6deg)}
.v5MiniDrum{width:110px;height:120px;position:relative;margin:auto}.v5MiniDrum .skin{position:absolute;left:10px;right:10px;top:7px;height:29px;border-radius:50%;background:radial-gradient(ellipse,#f5e3bd,#d1ae78);border:5px solid #572817;z-index:3}.v5MiniDrum .body{position:absolute;left:20px;right:20px;top:25px;bottom:15px;border-radius:35%;background:linear-gradient(90deg,#71301f,#dd7f48,#71301f);border:5px solid #572817}.v5MiniDrum .body:after{content:'';position:absolute;inset:8px;background:repeating-linear-gradient(62deg,transparent 0 11px,#f2d3a1 12px 14px,transparent 15px 24px),repeating-linear-gradient(-62deg,transparent 0 11px,#f2d3a1 12px 14px,transparent 15px 24px)}.v5MiniDrum strong{position:absolute;left:0;right:0;bottom:-3px;color:var(--lime);font-size:7px}
.v5RaffleWinner{justify-self:center;display:flex;gap:8px;align-items:center;border:1px solid rgba(200,241,53,.2);background:#2e1a37;border-radius:999px;padding:8px 14px}.v5RaffleWinner span{color:var(--lime)}.v5RaffleWinner b{font-family:'Unbounded';font-size:10px}.v5RaffleWinner small{font-size:6.5px;color:var(--dim)}
@keyframes v5WheelSpin{to{transform:rotate(360deg)}}@keyframes v5ReelPulse{50%{transform:scale(1.04)}}

/* Templates and Solo */
.v5TemplatesCanvas{padding:18px!important;display:grid;grid-template-columns:1.08fr .92fr;gap:14px}.v5TplArea,.v5SoloArea{border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,#2e1a3a,#21112b);min-width:0}.v5TplArea{padding:15px}.v5TplHeading{display:flex;justify-content:space-between;align-items:end;margin-bottom:11px}.v5TplHeading small{font-size:6.5px;color:var(--mag);font-weight:950;letter-spacing:.12em}.v5TplHeading b{font-size:9px;color:var(--dim)}.v5TplGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v5RealTpl{margin:0!important;min-height:70px!important}.v5RealTpl .tname{font-size:8.5px!important}.v5RealTpl .tsub2{font-size:6.8px!important}.v5TplMore{text-align:center;color:var(--dim);font-size:7px;margin-top:10px}
.v5SoloArea{padding:18px;display:grid;grid-template-columns:145px 1fr;align-items:center;gap:14px}.v5SoloPhone{padding:12px;border-radius:17px;background:#15091d;border:5px solid #4c3458;box-shadow:0 15px 28px rgba(0,0,0,.27)}.v5SoloPhone small{font-size:6px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v5SoloPhone>b{display:block;font-family:'Unbounded';font-size:9.5px;margin:5px 0}.v5SoloPhone p{font-size:6px;color:var(--dim);margin:0 0 7px}.v5SoloPhone strong{display:block;font-size:8px;line-height:1.3;margin-bottom:7px}.v5SoloPhone div{display:grid;gap:4px}.v5SoloPhone i{font-style:normal;color:#25142c;font-size:6.3px;font-weight:900;padding:5px;border-radius:6px}.v5SoloText>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#253018;margin-bottom:9px}.v5SoloText>b{display:block;font-family:'Unbounded';font-size:11px}.v5SoloText small{display:block;color:var(--dim);font-size:7px;line-height:1.5;margin-top:5px}

@media(max-width:900px){
  .v5LiveCanvas{grid-template-rows:190px 1fr}
  .v5DrawGrid{grid-template-columns:1fr 1fr}.v5DrawCard{min-height:190px}
  .v5TemplatesCanvas{grid-template-columns:1fr}.v5SoloArea{grid-template-columns:145px 1fr}
}
@media(max-width:620px){
  .v5LiveUpper{grid-template-columns:1fr}.v5RevealCard{display:none}.v5LiveCanvas{grid-template-rows:170px 1fr}.v5PodiumZone{min-height:225px}
  .v5KidsCanvas{display:block}.v5KidsTop,.v5KidsBottom{grid-template-columns:1fr}.v5KidsCard{margin-bottom:9px}
  .v5DrawGrid{grid-template-columns:1fr 1fr}.v5DrawCard{min-height:170px}.v5Wheel{width:90px;height:90px}.v5SoloArea{grid-template-columns:125px 1fr}
}
@media(max-width:430px){
  .v5DrawGrid{grid-template-columns:1fr}.v5TplGrid{grid-template-columns:1fr}.v5SoloArea{grid-template-columns:1fr}.v5SoloPhone{max-width:150px;margin:auto}
}
@media(prefers-reduced-motion:reduce){.v5Wheel,.v5Reel .focus{animation:none!important}}

/* Otiya in Action V6. Deliberately isolated from the real app components. */
.homeShowcaseV6 .v6Shell{padding:24px;background:linear-gradient(145deg,#24112f,#17091f 60%,#21102c);box-shadow:0 28px 72px rgba(0,0,0,.24)}
.v6Head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.v6Head h4{font-size:24px;margin-top:6px}.v6Head p{max-width:560px;color:var(--dim);font-size:12.5px;line-height:1.55}
.v6Tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.v6Tabs .homeShowTab{border-radius:999px;padding:10px 13px}
.v6Progress{height:2px;background:rgba(255,255,255,.07);margin:0 0 14px;border-radius:999px;overflow:hidden}.v6Progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--turq),var(--lime),var(--tang),var(--mag));transform-origin:left;animation:v6Progress 11s linear both}@keyframes v6Progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v6Stage{min-height:520px!important;padding:0!important;background:#100617!important;border-radius:20px!important;overflow:hidden}
.v6Demo{grid-template-columns:300px minmax(0,1fr)!important;gap:0!important;min-height:520px!important;align-items:stretch!important}
.v6Copy{padding:36px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(255,255,255,.035),transparent);border-right:1px solid rgba(255,255,255,.07)}
.v6Kicker{font-size:9px;font-weight:950;letter-spacing:.14em}.v6Copy h5{font-family:'Unbounded',sans-serif;font-size:21px;line-height:1.18;margin:9px 0 11px}.v6Copy p{color:var(--dim);font-size:12px;line-height:1.62;margin:0}
.v6Steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.v6Steps span{padding:6px 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--dim);font-size:8px;font-weight:850}.v6Steps span.on{background:rgba(200,241,53,.10);border-color:rgba(200,241,53,.35);color:var(--lime)}
.v6Canvas{min-width:0;padding:22px;background:radial-gradient(circle at 80% 16%,rgba(240,80,155,.09),transparent 28%),radial-gradient(circle at 15% 86%,rgba(43,217,198,.07),transparent 28%),#180b21}
.v6Hint{text-align:center;color:var(--dim);font-size:9px;font-weight:700;margin-top:10px}.v6Hint span{color:var(--lime);margin-right:5px}
.homeShowcaseV6 .v6Shell.isPaused *, .homeShowcaseV6 .v6Shell.isPaused *:before, .homeShowcaseV6 .v6Shell.isPaused *:after{animation-play-state:paused!important}
.homeShowcaseV6 .homeDemo:not(.on){pointer-events:none}

/* Live */
.v6Live{display:grid;grid-template-rows:176px 1fr;gap:13px}
.v6LiveTop{display:grid;grid-template-columns:1.28fr .72fr;gap:13px}
.v6Question,.v6Reveal,.v6PodiumCard{border:1px solid rgba(255,255,255,.09);border-radius:17px;background:#281735;box-shadow:0 14px 30px rgba(0,0,0,.18);overflow:hidden}
.v6Question,.v6Reveal{padding:16px}.v6Question small{font-size:7px;color:var(--dim);font-weight:900;letter-spacing:.12em}.v6Question>b{display:block;font-size:13px;line-height:1.35;margin:9px 0 11px}
.v6Answers{display:grid;grid-template-columns:1fr 1fr;gap:7px}.v6Answers i{position:relative;font-style:normal;color:#25142c;padding:8px;border-radius:8px;font-size:8.3px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}.v6Answers .correct:after{content:'✓';position:absolute;right:8px}
.v6Reveal{background:linear-gradient(145deg,#173c37,#1e3036)}.v6Reveal span{font-size:7px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v6Reveal b{display:block;font-family:'Unbounded';font-size:15px;margin:7px 0}.v6Reveal p{font-size:8.4px;line-height:1.45;color:#c9d9d5;margin:0}
.v6PodiumCard{position:relative;background:linear-gradient(180deg,#16091e,#1a0c23);padding:34px 18px 14px}
.v6PodiumHead{position:absolute;left:0;right:0;top:10px;text-align:center}.v6PodiumHead small{display:block;color:var(--lime);font-size:6.5px;font-weight:950;letter-spacing:.13em}.v6PodiumHead b{display:block;font-family:'Unbounded';font-size:10px;margin-top:2px}
.v6Podium{height:250px;display:flex;align-items:flex-end;justify-content:center;gap:22px;padding:42px 8% 0}.v6Place{width:27%;max-width:160px;text-align:center;position:relative}.v6Player{margin-bottom:7px}.v6Player span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 5px;background:#33203e;border:3px solid #bda8cb;font-size:19px}.v6Player b{display:block;font-size:9px}.v6Player small{display:block;color:var(--dim);font-size:7px;margin-top:2px}.v6Place.first .v6Player span{border-color:var(--tang)}
.v6Crown{position:absolute;left:50%;top:-47px;transform:translateX(-50%) scale(.55);transform-origin:center bottom;width:125px;height:90px;pointer-events:none}.v6Crown .podCrown{position:static!important;transform:none!important;display:block!important}.v6DrumPod{position:relative;width:100%;margin:auto}.v6DrumPod.second{height:auto}.v6DrumPod .v6DrumTop{position:absolute;left:-4%;right:-4%;top:-11px;height:26px;border-radius:50%;background:radial-gradient(ellipse,#f2dfb7,#d2b17e);border:5px solid #3c2218;z-index:3}.v6DrumPod .v6DrumBody{position:absolute;inset:7px 7% 0;border:4px solid #3c2218;border-radius:12px 12px 22px 22px;background:currentColor;overflow:hidden}.v6DrumPod .v6DrumBody:after{content:'';position:absolute;inset:9px;background:repeating-linear-gradient(62deg,transparent 0 13px,rgba(246,224,184,.75) 14px 16px,transparent 17px 28px),repeating-linear-gradient(-62deg,transparent 0 13px,rgba(246,224,184,.75) 14px 16px,transparent 17px 28px)}.v6DrumPod strong{position:absolute;left:0;right:0;top:49%;z-index:4;color:rgba(255,255,255,.75);font-family:'Unbounded';font-size:24px}.v6Place.second .v6DrumPod{height:104px}.v6Place.first .v6DrumPod{height:144px}.v6Place.third .v6DrumPod{height:78px}.v6DrumPod.teal{color:#24bdb1}.v6DrumPod.orange{color:#e86623}.v6DrumPod.lime{color:#91bd18}

/* Kids */
.v6Kids{display:grid;grid-template-rows:205px 1fr;gap:12px}.v6KidsTop,.v6KidsBottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v6KidPanel{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#301b3e,#21122b);padding:13px;overflow:hidden}.v6PanelTitle{font-size:7px;color:#b995e6;font-weight:950;letter-spacing:.11em;margin-bottom:8px}
.v6Topic{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:9px;margin:5px 0}.v6Topic.on{border-color:rgba(200,241,53,.35);box-shadow:inset 3px 0 var(--lime)}.v6Topic span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--lime),var(--turq));color:#24301c}.v6Topic b{font-size:8px}.v6Topic small{font-size:6.5px;color:var(--dim)}
.v6AvatarRow{display:flex;gap:7px}.v6AvatarRow>span{width:42px;height:42px;border-radius:50%;padding:2px;border:2px solid rgba(255,255,255,.12);background:#2b1836}.v6AvatarRow>span.on{border-color:var(--lime);box-shadow:0 0 0 2px rgba(200,241,53,.12)}.v6AvatarRow svg{width:100%;height:100%}.v6GameName{margin-top:15px;background:var(--lime);color:#25311a;padding:10px 11px;border-radius:10px;display:flex;align-items:end;justify-content:space-between;gap:8px}.v6GameName small{display:block;font-size:6px;font-weight:950;letter-spacing:.1em}.v6GameName b{display:block;font-family:'Unbounded';font-size:10px;margin-top:3px}.v6GameName div{display:flex;gap:8px;font-size:6.5px;font-weight:850}.v6GameName i,.v6GameName em{font-style:normal}
.v6Turn{display:flex;align-items:center;gap:9px}.v6Turn>svg{width:40px;height:40px}.v6Turn small{display:block;color:var(--lime);font-size:6px;font-weight:950;letter-spacing:.1em}.v6Turn b{display:block;font-size:9px;margin-top:2px}.v6Turn i{display:block;font-style:normal;color:var(--dim);font-size:6.5px}.v6PlayPanel>strong{display:block;font-size:10px;line-height:1.35;margin:12px 0}.v6KidAnswers{display:grid;grid-template-columns:1fr 1fr;gap:6px}.v6KidAnswers i{font-style:normal;color:#25142c;padding:7px;border-radius:7px;font-size:7.5px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}
.v6KidPodHead{display:flex;justify-content:space-between;align-items:center}.v6KidPodHead small{font-size:6.5px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v6KidPodHead b{font-size:6.5px;color:var(--dim)}.v6KidPodHead em{font-style:normal;color:var(--lime)}.v6KidsPodium{height:168px;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:40px 7px 0}.v6KPlace{width:29%;text-align:center;position:relative}.v6KPlace>span{display:block;height:40px}.v6KPlace>b{display:block;font-size:6.5px;margin-top:2px}.v6KPlace>small{display:block;color:var(--dim);font-size:6px;margin:2px 0 4px}.v6KPlace>i{display:grid;place-items:center;font-style:normal;font-family:'Unbounded';font-size:18px;font-weight:950;color:#25142c;border-radius:9px 9px 4px 4px;box-shadow:inset 0 -7px rgba(0,0,0,.12)}.v6KPlace.two>i{height:63px;background:var(--turq)}.v6KPlace.one>i{height:91px;background:var(--tang)}.v6KPlace.three>i{height:50px;background:var(--lime)}.v6KCrown{position:absolute;left:50%;top:-40px;transform:translateX(-50%) scale(.46);width:120px;height:82px;pointer-events:none}.v6KCrown .kPodCrown{position:static!important;transform:none!important}

/* Raffle */
.v6Raffle{display:flex;align-items:center}.v6DrawGrid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.v6DrawMethod{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#2f1a3b,#21112b);padding:13px;min-height:190px;overflow:hidden}.v6MethodTop{display:flex;justify-content:space-between;align-items:center}.v6MethodTop b{font-family:'Unbounded';font-size:10px}.v6MethodTop small{font-size:6.5px;color:var(--dim);border:1px solid rgba(255,255,255,.08);padding:4px 6px;border-radius:999px}.v6DrawMethod>p{text-align:center;color:var(--dim);font-size:6.8px;margin:8px 0 0}
.v6Wheel{width:112px;height:112px;border-radius:50%;margin:17px auto 0;position:relative;background:conic-gradient(var(--tang) 0 25%,var(--turq) 25% 50%,var(--lime) 50% 75%,var(--mag) 75%);border:7px solid #4b2c56;box-shadow:0 12px 24px rgba(0,0,0,.22);animation:v6Wheel 10s linear infinite}.v6Wheel:after{content:'▲';position:absolute;right:-16px;top:43px;color:var(--ink);font-size:18px;transform:rotate(-90deg)}.v6Wheel span{position:absolute;font-size:6px;font-weight:950;color:#25142c}.v6Wheel .w1{top:17px;left:46px}.v6Wheel .w2{right:6px;top:49px}.v6Wheel .w3{left:39px;bottom:18px}.v6Wheel .w4{left:4px;top:49px}
.v6Reel{width:128px;margin:28px auto 0;padding:8px;border-radius:12px;background:#15091d;border:1px solid rgba(255,255,255,.07)}.v6Reel span{display:block;padding:8px;margin:4px 0;border-radius:7px;background:#342040;color:var(--dim);font-size:7px;font-weight:850;text-align:center}.v6Reel .focus{background:var(--tang);color:#351824;animation:v6Pulse 1.6s ease-in-out infinite}
.v6Cards{height:112px;display:grid;grid-template-columns:repeat(3,43px);justify-content:center;align-content:center;gap:7px;margin-top:8px}.v6Cards span{height:54px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#4c2b5e,#2b1735);border:1px solid rgba(255,255,255,.1);font-family:'Unbounded';font-size:8px;color:var(--lime)}
.v6RealDrum{height:125px;position:relative;margin-top:6px}.v6RealDrum svg{display:block;width:116px;height:122px;margin:0 auto}.v6DrumPlate{position:absolute;left:50%;top:7px;transform:translateX(-50%);z-index:5;background:rgba(36,16,42,.92);border:1px solid rgba(253,244,227,.08);border-radius:999px;padding:4px 10px;min-width:68px;text-align:center}.v6DrumPlate b{font-size:7px;color:var(--ink)}
@keyframes v6Wheel{to{transform:rotate(360deg)}}@keyframes v6Pulse{50%{transform:scale(1.035)}}

/* Templates */
.v6Templates{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.v6PackSide,.v6SoloSide{border:1px solid rgba(255,255,255,.08);border-radius:17px;background:linear-gradient(145deg,#2f1a3b,#21112b);min-width:0}.v6PackSide{padding:16px}.v6PackHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.v6PackHead small{font-size:6.5px;color:var(--mag);font-weight:950;letter-spacing:.12em}.v6PackHead b{font-size:9px;color:var(--dim)}.v6PackGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.v6Tpl{margin:0!important;min-height:76px!important}.v6Tpl .tname{font-size:9px!important}.v6Tpl .tsub2{font-size:6.8px!important}.v6PackFoot{text-align:center;color:var(--dim);font-size:7px;margin-top:11px}
.v6SoloSide{padding:18px;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}.v6SoloPhone{padding:13px;border-radius:18px;background:#15091d;border:5px solid #4c3458;box-shadow:0 16px 30px rgba(0,0,0,.28)}.v6SoloPhone small{font-size:6px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v6SoloPhone>b{display:block;font-family:'Unbounded';font-size:10px;margin:5px 0}.v6SoloPhone>span{display:block;color:var(--dim);font-size:6px;margin-bottom:7px}.v6SoloPhone strong{display:block;font-size:8px;line-height:1.3;margin-bottom:7px}.v6SoloPhone div{display:grid;gap:4px}.v6SoloPhone i{font-style:normal;color:#25142c;font-size:6.3px;font-weight:900;padding:5px;border-radius:6px}.v6SoloText>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#253018;margin-bottom:10px}.v6SoloText>b{display:block;font-family:'Unbounded';font-size:12px}.v6SoloText p,.v6SoloText small{color:var(--dim);font-size:7.5px;line-height:1.5}.v6SoloText p{margin:6px 0 3px}.v6SoloText small{display:block}

@media(max-width:920px){
  .v6Head{align-items:flex-start;flex-direction:column}.v6Tabs{justify-content:flex-start}
  .v6Demo{grid-template-columns:1fr!important}.v6Copy{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:23px}
  .v6Stage{min-height:820px!important}.v6Canvas{min-height:520px}
}
@media(max-width:650px){
  .v6Shell{padding:14px}.v6Tabs .homeShowTab{flex:1 1 42%;text-align:center}
  .v6LiveTop,.v6KidsTop,.v6KidsBottom,.v6Templates{grid-template-columns:1fr}.v6Reveal{display:none}
  .v6Live{grid-template-rows:170px 270px}.v6Kids{display:block}.v6KidPanel{margin-bottom:9px}
  .v6DrawGrid{grid-template-columns:1fr}.v6Raffle{display:block}.v6DrawMethod{min-height:180px}
  .v6PackGrid{grid-template-columns:1fr}.v6SoloSide{grid-template-columns:135px 1fr;margin-top:10px}.v6Hint{display:none}
}
@media(max-width:430px){
  .v6Podium{gap:7px;padding-left:2%;padding-right:2%}.v6Place{width:31%}.v6SoloSide{grid-template-columns:1fr}.v6SoloPhone{max-width:150px;margin:auto}
}
@media(prefers-reduced-motion:reduce){
  .homeShowcaseV6 *, .homeShowcaseV6 *:before, .homeShowcaseV6 *:after{animation:none!important;transition:none!important}
}

.homeShowcaseV7 .v7Shell{padding:24px;background:linear-gradient(145deg,#24112f,#17091f 60%,#21102c);border-color:rgba(43,217,198,.22);box-shadow:0 28px 72px rgba(0,0,0,.24),0 0 0 1px rgba(43,217,198,.045),inset 0 0 0 1px rgba(253,244,227,.018)}
.v7Head{display:flex;justify-content:space-between;align-items:center;gap:24px}.v7Head h4{font-size:24px;margin-top:6px}.v7Head p{max-width:580px;color:var(--dim);font-size:12.5px;line-height:1.55}
.v7Tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.v7Tabs .homeShowTab{border-radius:999px;padding:10px 13px}
.v7Progress{height:2px;background:rgba(255,255,255,.07);margin:0 0 14px;border-radius:999px;overflow:hidden}.v7Progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--turq),var(--lime),var(--tang),var(--mag));transform-origin:left;animation:v7Progress 10s linear both}@keyframes v7Progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v7Stage{min-height:590px!important;padding:0!important;background:#100617!important;border-radius:20px!important;overflow:hidden}
.v7Demo{grid-template-columns:290px minmax(0,1fr)!important;gap:0!important;min-height:590px!important;align-items:stretch!important}
.v7Copy{padding:36px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(255,255,255,.035),transparent);border-right:1px solid rgba(255,255,255,.07)}
.v7Kicker{font-size:9px;font-weight:950;letter-spacing:.14em}.v7Copy h3,.v7Copy h5{font-family:'Unbounded',sans-serif;font-size:21px;line-height:1.18;margin:9px 0 11px}.v7Copy p{color:var(--dim);font-size:12px;line-height:1.62;margin:0}
.v7Steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.v7Steps span{padding:6px 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--dim);font-size:8px;font-weight:850}.v7Steps span.on{background:rgba(200,241,53,.1);border-color:rgba(200,241,53,.35);color:var(--lime)}
.v7Canvas{min-width:0;padding:20px;background:radial-gradient(circle at 80% 16%,rgba(240,80,155,.08),transparent 28%),radial-gradient(circle at 15% 86%,rgba(43,217,198,.06),transparent 28%),#180b21}
.v7Hint{text-align:center;color:var(--dim);font-size:9px;font-weight:700;margin-top:10px}.v7Hint span{color:var(--lime);margin-right:5px}
.homeShowcaseV7 .v7Shell.isPaused *, .homeShowcaseV7 .v7Shell.isPaused *:before, .homeShowcaseV7 .v7Shell.isPaused *:after{animation-play-state:paused!important}
.homeShowcaseV7 .homeDemo:not(.on){pointer-events:none}

/* live */
.v7Live{display:grid;grid-template-rows:235px 1fr;gap:12px}
.v7LiveQuestion{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px 16px;background:#20102b;overflow:hidden}
.v7QuizMeta{display:flex;justify-content:space-between;align-items:center;font-size:7px;color:var(--dim);font-weight:850}.v7QuizMeta b{font-size:8px;color:var(--ink);padding:5px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px}.v7TimeBar{height:4px;background:#0d0712;border-radius:999px;margin:8px 0 14px;overflow:hidden}.v7TimeBar i{display:block;width:72%;height:100%;background:linear-gradient(90deg,var(--lime),var(--turq),var(--tang),var(--mag))}
.v7LiveQuestion .demoQuestion{font-family:'Unbounded';font-size:14px;text-align:center;margin:0 0 12px}.v7QuizAnswers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v7QuizAnswers>div{display:flex;align-items:center;gap:9px;background:#2d193a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px;font-size:8px}.v7QuizAnswers i{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;background:var(--mag);font-style:normal;font-weight:950;color:#2b132c}.v7QuizAnswers>div:nth-child(2) i{background:var(--tang)}.v7QuizAnswers>div:nth-child(3) i{background:var(--turq)}.v7QuizAnswers>div:nth-child(4) i{background:var(--lime)}.v7QuizAnswers b{flex:1}.v7QuizAnswers .selected{box-shadow:inset 3px 0 var(--lime);border-color:rgba(200,241,53,.6)}.v7QuizAnswers .selected span{color:var(--lime);font-weight:950}.v7Points{display:block;text-align:center;color:var(--lime);font-size:9px;margin-top:11px}
.v7LiveBottom{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px;min-height:0}.v7Leaderboard,.v7PodiumScene{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#25132f;overflow:hidden}.v7BoardTitle{text-align:center;font-family:'Unbounded';font-size:10px;padding:12px}.v7Leaderboard>div:not(.v7BoardTitle){display:grid;grid-template-columns:24px 1fr 48px 45px;gap:6px;align-items:center;padding:8px 10px;background:#342143;margin:0 8px 6px;border-radius:6px;font-size:7px}.v7Leaderboard>div.me{background:var(--mag);color:#2b132c}.v7Leaderboard em{font-style:normal;color:var(--turq);font-weight:900;text-align:right}.v7Leaderboard strong{text-align:right}
.v7PodiumScene{position:relative;background:#16091e;padding:38px 10px 10px}.v7PodTitle{position:absolute;top:10px;left:0;right:0;text-align:center}.v7PodTitle small{display:block;color:var(--lime);font-size:6px;font-weight:950;letter-spacing:.12em}.v7PodTitle b{font-family:'Unbounded';font-size:9px}
.v7Podium{height:260px;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:54px 4% 0}.v7Place{width:29%;max-width:150px;text-align:center;position:relative}.v7PodPlayer{margin-bottom:6px}.v7PodPlayer span{display:grid;width:40px;height:40px;place-items:center;margin:auto;border-radius:50%;border:3px solid #bea8cb;background:#2d1a37;font-size:18px}.v7PodPlayer b{display:block;font-size:8px;margin-top:4px}.v7PodPlayer small{display:block;color:var(--dim);font-size:6.5px;margin-top:1px}.v7Place.first .v7PodPlayer span{border-color:var(--tang)}
.v7WinnerCrown{position:absolute;left:50%;top:-42px;transform:translateX(-50%) scale(.48);width:115px;height:80px}.v7WinnerCrown .podCrown{position:static!important;transform:none!important}
.v7PodBlock{position:relative;width:100%}.v7PodBlock .top{position:absolute;left:-3%;right:-3%;top:-10px;height:24px;border-radius:50%;background:radial-gradient(ellipse,#f3e1bb,#d3b27e);border:5px solid #3e2419;z-index:3}.v7PodBlock .body{position:absolute;inset:5px 6% 0;border:4px solid #3e2419;border-radius:10px 10px 20px 20px;background:currentColor;overflow:hidden}.v7PodBlock .body:after{content:'';position:absolute;inset:9px;background:repeating-linear-gradient(62deg,transparent 0 12px,rgba(246,224,184,.76) 13px 15px,transparent 16px 26px),repeating-linear-gradient(-62deg,transparent 0 12px,rgba(246,224,184,.76) 13px 15px,transparent 16px 26px)}.v7PodBlock strong{position:absolute;left:0;right:0;top:5px;bottom:0;z-index:4;display:grid;place-items:center;text-align:center;line-height:1;font-family:'Unbounded';font-size:20px;color:rgba(255,255,255,.78);pointer-events:none}.v7Place.second .v7PodBlock{height:104px}.v7Place.first .v7PodBlock{height:142px}.v7Place.third .v7PodBlock{height:80px}.v7PodBlock.teal{color:#2CBDB6}.v7PodBlock.orange{color:#F07125}.v7PodBlock.lime{color:#92C21B}

/* kids */
.v7Kids{display:grid;grid-template-rows:220px 1fr;gap:12px}.v7KidsTop,.v7KidsBottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v7KidCard{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#301b3e,#21122b);padding:13px;overflow:hidden}.v7KidLabel{font-size:7px;color:#b995e6;font-weight:950;letter-spacing:.11em;margin-bottom:8px}
.v7Challenge{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin:6px 0}.v7Challenge.on{border-color:var(--lime);box-shadow:inset 3px 0 var(--lime)}.v7Challenge>span{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:#24301c}.v7Challenge b{font-size:8px}.v7Challenge small{font-size:6.4px;color:var(--dim)}
.v7ModeRow{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}.v7ModeRow span{padding:9px 7px;border:1px solid rgba(255,255,255,.08);border-radius:9px;text-align:center;font-size:7px;font-weight:850}.v7ModeRow span.on{border-color:var(--tang);background:rgba(255,122,41,.08)}
.v7PlayerRow{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin:6px 0}.v7PlayerRow .av{width:38px;height:38px}.v7PlayerRow svg{width:100%;height:100%}.v7PlayerRow b{font-size:8px}.v7PlayerRow small{font-size:6.5px;color:var(--lime);padding:5px 7px;border:1px solid rgba(200,241,53,.28);border-radius:999px}
.v7TurnHead{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px}.v7TurnHead>svg{width:40px;height:40px}.v7TurnHead small{display:block;font-size:8px;font-weight:900}.v7TurnHead b{display:block;color:var(--dim);font-size:6.5px;margin-top:2px}.v7TurnHead em{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;border:4px solid var(--lime);font-style:normal;color:var(--lime);font-size:10px;font-weight:950}.v7KidQuestion .demoQuestion{font-family:'Unbounded';font-size:11px;line-height:1.35;margin:12px 0}.v7KAnswers{display:grid;gap:6px}.v7KAnswers i{font-style:normal;color:#27142d;padding:8px 10px;border-radius:9px;font-size:7.3px;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.12)}
.v7KidPodTop{display:flex;justify-content:space-between;align-items:center}.v7KidPodTop small{font-size:6.5px;color:var(--lime);font-weight:950;letter-spacing:.1em}.v7KidPodTop b{font-size:6.5px;color:var(--dim)}.v7KidPodTop em{font-style:normal;color:var(--lime)}.v7KidPodium{height:190px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:50px 12% 0}.v7KPlace{width:36%;text-align:center;position:relative}.v7KPlace>span{display:block;height:42px}.v7KPlace>b{display:block;font-size:7px;margin-top:3px}.v7KPlace>small{display:block;color:var(--dim);font-size:6px;margin:2px 0 5px}.v7KPlace>i{display:grid;place-items:center;font-style:normal;font-family:'Unbounded';font-size:20px;font-weight:950;color:#25142c;border-radius:10px 10px 4px 4px;box-shadow:inset 0 -8px rgba(0,0,0,.12)}.v7KPlace.second>i{height:78px;background:var(--lime)}.v7KPlace.first>i{height:105px;background:var(--tang)}.v7KidCrown{position:absolute;left:50%;top:-42px;transform:translateX(-50%) scale(.44);width:110px;height:78px}.v7KidCrown .kPodCrown{position:static!important;transform:none!important}

/* raffle */
.v7Raffle{display:flex;flex-direction:column;gap:12px}.v7RaffleIntro{display:flex;justify-content:space-between;align-items:end}.v7RaffleIntro small{font-size:6.5px;color:var(--tang);font-weight:950;letter-spacing:.12em}.v7RaffleIntro b{font-size:9px;color:var(--dim)}
.v7DrawGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v7DrawCard{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#2f1a3b,#21112b);padding:12px;min-height:215px;overflow:hidden}.v7DrawHead{display:flex;justify-content:space-between;align-items:center}.v7DrawHead b{font-family:'Unbounded';font-size:10px}.v7DrawHead small{font-size:6.3px;color:var(--dim)}
.v7Wheel{width:130px;height:130px;border-radius:50%;margin:18px auto 0;position:relative;background:conic-gradient(#D98455 0 20%,#C45D95 20% 40%,#8574C8 40% 60%,#43BDB8 60% 80%,#B9D64C 80%);border:7px solid #38213f;box-shadow:0 12px 24px rgba(0,0,0,.22);animation:v7Wheel 10s linear infinite}.v7Wheel:after{content:'▼';position:absolute;top:-18px;left:50%;transform:translateX(-50%);color:var(--lime);font-size:18px}.v7Wheel span{position:absolute;font-size:6px;font-weight:900;color:#221127}.v7Wheel span:nth-child(1){top:21px;left:55px}.v7Wheel span:nth-child(2){right:7px;top:58px}.v7Wheel span:nth-child(3){left:46px;bottom:18px}.v7Wheel span:nth-child(4){left:6px;top:58px}
.v7Reel{width:145px;margin:28px auto 0;padding:8px;border-radius:12px;background:#16091d;border:1px solid rgba(255,255,255,.07)}.v7Reel span{display:block;text-align:center;padding:10px 7px;margin:4px 0;border-radius:8px;background:#352143;color:var(--dim);font-size:7px;font-weight:850}.v7Reel .focus{border:1px solid var(--lime);background:linear-gradient(90deg,#6d3740,#64405a);color:var(--ink);animation:v7Pulse 1.7s ease-in-out infinite}
.v7Cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.v7Cards span{height:66px;border-radius:9px;padding:8px;font-family:'Unbounded';font-size:6px;color:#2a132b;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 -5px rgba(0,0,0,.1)}.v7Cards small{font-family:Inter;font-size:6.3px;font-weight:850}
.v7DrumScene{height:174px;position:relative}.v7DrumScene svg{width:128px;height:138px;display:block;margin:24px auto 0}.v7DrumName{position:absolute;left:50%;top:1px;transform:translateX(-50%);z-index:5;font-family:'Unbounded';font-size:8px;line-height:1.2;white-space:nowrap;pointer-events:none}.v7DrumScene>small{position:absolute;left:0;right:0;bottom:1px;text-align:center;color:var(--turq);font-size:6px;font-weight:950;letter-spacing:.1em}
@keyframes v7Wheel{to{transform:rotate(360deg)}}@keyframes v7Pulse{50%{transform:scale(1.035)}}

/* templates and solo */
.v7Templates{display:grid;grid-template-columns:1.03fr .97fr;gap:12px}.v7TemplatesList,.v7SoloPreview{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#2f1a3b,#21112b);padding:14px;min-width:0}
.v7TplTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.v7TplTitle small{font-size:6.5px;color:var(--mag);font-weight:950;letter-spacing:.12em}.v7TplTitle b{font-size:9px;color:var(--dim)}.v7TplGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v7Tpl{margin:0!important;min-height:68px!important}.v7Tpl .tname{font-size:8.5px!important}.v7Tpl .tsub2{font-size:6.5px!important}
.v7SoloPreview{display:grid;grid-template-rows:1fr auto;gap:10px}.v7SoloPhone{padding:12px;border-radius:15px;background:#16091d;border:4px solid #493255;box-shadow:0 14px 26px rgba(0,0,0,.24)}.v7SoloMeta{display:flex;justify-content:space-between;align-items:center;font-size:5.8px;color:var(--dim)}.v7SoloMeta b{font-size:7px;color:var(--ink);padding:4px 7px;border:1px solid rgba(255,255,255,.08);border-radius:999px}.v7SoloBar{height:3px;background:#0b0610;border-radius:999px;margin:7px 0 12px;overflow:hidden}.v7SoloBar i{display:block;width:64%;height:100%;background:linear-gradient(90deg,var(--lime),var(--turq),var(--tang),var(--mag))}.v7SoloPhone .demoQuestion{font-family:'Unbounded';font-size:9.5px;line-height:1.35;margin:0 0 9px;text-align:center}.v7SoloAnswers{display:grid;grid-template-columns:1fr 1fr;gap:5px}.v7SoloAnswers i{font-style:normal;padding:7px;background:#2d193a;border-radius:7px;border-left:3px solid var(--mag);font-size:6px}.v7SoloAnswers i:nth-child(2){border-left-color:var(--tang)}.v7SoloAnswers i:nth-child(3){border-left-color:var(--turq)}.v7SoloAnswers i:nth-child(4){border-left-color:var(--lime)}.v7SoloAnswers i.selected{outline:1px solid #fff}.v7SoloAnswers b{margin-left:5px}
.v7SoloBoard{padding:10px 11px;border-radius:13px;background:#25142f}.v7SoloBoard>b{display:block;text-align:center;font-family:'Unbounded';font-size:8px;margin-bottom:7px}.v7SoloBoard>div{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;background:#352143;margin:4px 0;padding:6px 8px;border-radius:6px;font-size:6px}.v7SoloBoard>div.me{background:var(--mag);color:#291329}.v7SoloBoard em{font-style:normal;font-weight:900}

@media(max-width:960px){
  .v7Head{align-items:flex-start;flex-direction:column}.v7Tabs{justify-content:flex-start}
  .v7Demo{grid-template-columns:1fr!important}.v7Copy{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:23px}
  .v7Stage{min-height:900px!important}.v7Canvas{min-height:560px}
}
@media(max-width:680px){
  .v7Shell{padding:14px}.v7Tabs .homeShowTab{flex:1 1 42%;text-align:center}
  .v7Live{grid-template-rows:auto auto}.v7LiveBottom,.v7KidsTop,.v7KidsBottom,.v7Templates{grid-template-columns:1fr}
  .v7QuizAnswers{grid-template-columns:1fr}.v7Podium{padding-left:2%;padding-right:2%;gap:7px}
  .v7Kids{display:block}.v7KidCard{margin-bottom:9px}
  .v7DrawGrid{grid-template-columns:1fr}.v7DrawCard{min-height:195px}
  .v7TplGrid{grid-template-columns:1fr}.v7Hint{display:none}
}
@media(max-width:430px){
  .v7PodPlayer span{width:34px;height:34px;font-size:15px}.v7PodPlayer b{font-size:7px}.v7Place{width:31%}.v7WinnerCrown{transform:translateX(-50%) scale(.4)}
}
@media(prefers-reduced-motion:reduce){
  .homeShowcaseV7 *, .homeShowcaseV7 *:before, .homeShowcaseV7 *:after{animation:none!important;transition:none!important}
}

/* Final Otiya in Action polish */

/* Live podium: strict vertical zones */
.v7PodiumScene{padding-top:46px!important}
.v7Podium{height:268px!important;padding-top:68px!important;gap:18px!important}
.v7PodPlayer{min-height:67px!important;margin-bottom:8px!important}
.v7PodPlayer span{position:relative;z-index:2}
.v7PodPlayer b,.v7PodPlayer small{position:relative;z-index:2}
.v7Place.first{padding-top:5px}
.v7WinnerCrown{
  top:-34px!important;
  width:100px!important;
  height:66px!important;
  transform:translateX(-50%) scale(.36)!important;
  z-index:1!important;
}
.v7Place.first .v7PodPlayer{padding-top:8px}
.v7Place.first .v7PodPlayer span{margin-top:0}
.v7PodBlock strong{top:10px!important;bottom:4px!important;display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important}
.v7PodTitle{z-index:10}

/* Kids podium: all 3 places, crown safely above winner */
.v8KidsPodium{
  height:190px!important;
  padding:55px 4% 0!important;
  gap:9px!important;
}
.v8KidsPodium .v7KPlace{width:30%!important}
.v8KidsPodium .v7KPlace>span{height:40px!important}
.v8KidsPodium .v7KPlace>b{
  font-size:6.4px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v8KidsPodium .v7KPlace>small{font-size:5.8px!important}
.v8KidsPodium .v7KPlace.second>i{height:68px!important;background:var(--turq)!important}
.v8KidsPodium .v7KPlace.first>i{height:92px!important;background:var(--tang)!important}
.v8KidsPodium .v7KPlace.third>i{height:56px!important;background:var(--lime)!important}
.v8KidCrown{
  top:-35px!important;
  width:92px!important;
  height:64px!important;
  transform:translateX(-50%) scale(.36)!important;
  z-index:1!important;
}
.v8KidsPodium .v7KPlace.first>span{position:relative;z-index:2}

/* Wheel: disc rotates, pointer does not */
.v8WheelWrap{
  width:142px;
  height:145px;
  margin:12px auto 0;
  position:relative;
  display:grid;
  place-items:center;
}
.v8WheelPointer{
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  color:var(--lime);
  font-style:normal;
  font-size:20px;
  line-height:1;
  z-index:5;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
.v8WheelDisc{
  margin:10px auto 0!important;
  width:126px!important;
  height:126px!important;
}
.v8WheelDisc:after{display:none!important}

/* Templates: remove dead space and make the choice feel inviting */
.v8Templates{
  display:grid!important;
  grid-template-columns:1.06fr .94fr!important;
  gap:14px!important;
  align-items:stretch!important;
}
.v8TemplateBrowser,
.v8SoloColumn{
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:linear-gradient(145deg,#301b3d,#21122c);
  padding:16px;
  min-width:0;
  min-height:515px;
}
.v8TemplateBrowser{
  display:flex;
  flex-direction:column;
}
.v8TplHead{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom:13px;
}
.v8TplHead small{
  display:block;
  color:var(--mag);
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.12em;
}
.v8TplHead b{
  display:block;
  font-family:'Unbounded';
  font-size:12px;
  margin-top:4px;
}
.v8TplHead em{
  font-style:normal;
  color:var(--dim);
  font-size:6.5px;
  white-space:nowrap;
}
.v8TplGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.v8TplCard{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:78px;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#341f42;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.v8TplCard:hover{
  transform:translateY(-2px);
  border-color:rgba(43,217,198,.35);
  background:#3a2448;
}
.v8TplIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:12px;
}
.v8TplCopy b{
  display:block;
  font-size:9px;
  line-height:1.2;
}
.v8TplCopy small{
  display:block;
  color:var(--dim);
  font-size:6.5px;
  margin-top:4px;
}
.v8TplArrow{color:var(--dim)}
.v8TplActions{
  margin-top:auto;
  padding-top:13px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.v8TplActions span{
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  color:var(--dim);
  font-size:6.5px;
  font-weight:850;
}
.v8SoloColumn{
  display:flex;
  flex-direction:column;
}
.v8SoloLabel{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.v8SoloPlayIcon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--lime);
  color:#253118;
  flex:0 0 auto;
}
.v8SoloLabel small{
  display:block;
  color:var(--lime);
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.12em;
}
.v8SoloLabel b{
  display:block;
  font-family:'Unbounded';
  font-size:10px;
  margin-top:3px;
}
.v8SoloDevice{
  flex:1;
  display:grid;
  grid-template-rows:minmax(260px,1fr) auto;
  gap:10px;
}
.v8SoloDevice .v7SoloPhone{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.v8SoloBoard{margin-top:0!important}

/* General responsive cleanup */
@media(max-width:960px){
  .v8Templates{grid-template-columns:1fr!important}
  .v8TemplateBrowser,.v8SoloColumn{min-height:auto}
  .v8SoloDevice{grid-template-columns:1fr 1fr;grid-template-rows:auto;align-items:start}
}
@media(max-width:680px){
  .v8TplGrid{grid-template-columns:1fr!important}
  .v8SoloDevice{grid-template-columns:1fr!important}
  .v8WheelWrap{width:128px;height:132px}
  .v8WheelDisc{width:112px!important;height:112px!important}
  .v8KidsPodium{padding-left:1%!important;padding-right:1%!important;gap:5px!important}
  .v7Podium{gap:7px!important;padding-left:1%!important;padding-right:1%!important}
}

/* Interaction fix: never pause a panel's visibility transition. */
.homeShowcaseV9{}
.homeShowcaseV7 .homeDemo,
.homeShowcaseV7 .homeDemo.on{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
.homeShowcaseV7 .homeDemo{display:none!important}
.homeShowcaseV7 .homeDemo.on{display:grid!important}
.homeShowcaseV7 .v7Shell.isPaused .homeDemo.on{
  opacity:1!important;
  transform:none!important;
}

/* 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. */
.v8TemplateBrowser{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:12px!important;
}
.v8TplHead{margin-bottom:0!important}
.v8TplGrid{
  min-height:0!important;
  height:100%!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
}
.v8TplCard{
  min-height:0!important;
  height:100%!important;
  align-self:stretch!important;
}
.v8TplActions{
  margin-top:0!important;
  padding-top:0!important;
}

/* Portrait Solo Play fills the available column. */
.v9SoloDevice{
  display:grid!important;
  grid-template-rows:minmax(350px,1fr) auto!important;
  gap:11px!important;
  min-height:0!important;
  height:100%!important;
}
.v9SoloPortrait{
  width:min(100%,330px);
  height:100%;
  min-height:350px;
  margin:0 auto;
  border:5px solid #4c3458;
  border-radius:20px;
  background:#15091d;
  box-shadow:0 18px 34px rgba(0,0,0,.30);
  padding:16px;
  display:flex;
  flex-direction:column;
}
.v9SoloTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--dim);
  font-size:6.2px;
}
.v9SoloTop b{
  color:var(--ink);
  font-size:8px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  white-space:nowrap;
}
.v9SoloBar{
  height:4px;
  margin:10px 0 24px;
  background:#09050d;
  border-radius:999px;
  overflow:hidden;
}
.v9SoloBar i{
  display:block;
  width:64%;
  height:100%;
  background:linear-gradient(90deg,var(--lime),var(--turq),var(--tang),var(--mag));
}
.v9SoloQuestion{
  margin:auto 0;
}
.v9SoloQuestion .demoQuestion{
  margin:0 0 18px;
  font-family:'Unbounded';
  font-size:13px;
  line-height:1.35;
  text-align:center;
}
.v9SoloAnswers{
  display:grid;
  gap:9px;
}
.v9SoloAnswers i{
  min-height:43px;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:10px;
  background:#2d193a;
  border-left:4px solid var(--mag);
  font-style:normal;
  font-size:7.5px;
}
.v9SoloAnswers i.b{border-left-color:var(--tang)}
.v9SoloAnswers i.c{border-left-color:var(--turq)}
.v9SoloAnswers i.d{border-left-color:var(--lime)}
.v9SoloAnswers i.selected{
  outline:2px solid rgba(253,244,227,.92);
  outline-offset:-2px;
}
.v9SoloAnswers span{
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  font-weight:950;
}
.v9SoloResult{
  margin-top:auto;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(145deg,#23172d,#1a1022);
  border:1px solid rgba(255,255,255,.07);
}
.v9SoloResult small{
  display:block;
  color:var(--lime);
  font-size:6px;
  font-weight:950;
  letter-spacing:.1em;
}
.v9SoloResult b{
  display:block;
  font-family:'Unbounded';
  font-size:9px;
  margin-top:5px;
}
.v9SoloResult p{
  color:var(--dim);
  font-size:6.5px;
  line-height:1.45;
  margin:5px 0 0;
}
.v9SoloBoard{margin:0!important}

/* Kids crown must remain visible and clearly belong to first place. */
.v8KidCrown{
  top:-47px!important;
  width:102px!important;
  height:72px!important;
  transform:translateX(-50%) scale(.40)!important;
  z-index:8!important;
  overflow:visible!important;
}
.v8KidCrown .kPodCrown{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
.v7KidPodiumCard,
.v8KidsPodium,
.v8KidsPodium .v7KPlace{
  overflow:visible!important;
}

/* Live winner crown spacing */
.v7PodiumScene,
.v7Podium,
.v7Place{
  overflow:visible!important;
}
.v7WinnerCrown{
  top:-44px!important;
  z-index:8!important;
}
.v7Place.first .v7PodPlayer{
  padding-top:15px!important;
}

/* Wheel pointer fixed above disc */
.v8WheelPointer{
  animation:none!important;
  transform:translateX(-50%)!important;
}
.v8WheelDisc{
  transform-origin:center center!important;
}

@media(max-width:960px){
  .v9SoloDevice{grid-template-rows:minmax(330px,1fr) auto!important}
  .v8TplGrid{grid-template-rows:auto!important}
  .v8TplCard{min-height:78px!important;height:auto!important}
}
@media(max-width:680px){
  .v9SoloPortrait{min-height:390px;width:min(100%,340px)}
}

/* Kids podium alignment correction:
   each place is a single centred vertical stack */
.v8KidsPodium{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:end!important;
  justify-items:center!important;
  gap:12px!important;
  padding:58px 18px 0!important;
}
.v8KidsPodium .v7KPlace{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:center!important;
  position:relative!important;
  margin:0!important;
  padding:0!important;
}
.v8KidsPodium .v7KPlace>span{
  width:46px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto 4px!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}
.v8KidsPodium .v7KPlace>span svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0 auto!important;
}
.v8KidsPodium .v7KPlace>b,
.v8KidsPodium .v7KPlace>small{
  width:100%!important;
  text-align:center!important;
  margin-left:0!important;
  margin-right:0!important;
}
.v8KidsPodium .v7KPlace>i{
  width:100%!important;
  max-width:118px!important;
  margin:0 auto!important;
}
.v8KidsPodium .v7KPlace.second>i{max-width:116px!important}
.v8KidsPodium .v7KPlace.first>i{max-width:122px!important}
.v8KidsPodium .v7KPlace.third>i{max-width:112px!important}
.v8KidCrown{
  left:50%!important;
  right:auto!important;
  margin:0!important;
  transform:translateX(-50%) scale(.40)!important;
}
@media(max-width:680px){
  .v8KidsPodium{
    gap:7px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .v8KidsPodium .v7KPlace>span{
    width:40px!important;
    height:40px!important;
  }
  .v8KidsPodium .v7KPlace>i{
    max-width:96px!important;
  }
}

/* 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){
  .v7Tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    gap:7px!important;
  }
  .v7Tabs .homeShowTab{
    width:100%!important;
    min-width:0!important;
    text-align:center!important;
    justify-content:center!important;
  }

  /* On phones, do not crush multiple Live Quiz result views side by side.
     Keep the question and podium as the main story. */
  .v7LiveBottom{
    display:block!important;
  }
  .v7Leaderboard{
    display:none!important;
  }
  .v7PodiumScene{
    min-height:300px!important;
    margin-top:0!important;
  }

  /* 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;
  }

  /* Product showcase copy stays compact above the demo. */
  .v7Copy{
    padding:20px 18px!important;
  }
  .v7Copy h3,.v7Copy h5{
    font-size:18px!important;
  }
}

/* Tablet: make the product showcase use width without awkward squeezing. */
@media(min-width:681px) and (max-width:960px){
  .v7Tabs{
    width:100%;
    justify-content:flex-start!important;
  }
  /* 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. */
.homeShowHead h2,.sechead h2,.v7Copy h3,.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;
  }
}

/* =========================================================
   OTIYA IN ACTION
   Equal-height panels + mobile containment preview

   Desktop: 590px stage
   Tablet:  770px stage
   Mobile:  760px stage

   All four tabs use the same stage height at each breakpoint,
   so switching tabs never changes the page length.
========================================================= */

/* ---------- all large screens ---------- */
.homeShowcaseV7 .v7Stage{
  height:590px!important;
  min-height:590px!important;
  max-height:590px!important;
}
.homeShowcaseV7 .homeDemo,
.homeShowcaseV7 .homeDemo.on{
  height:590px!important;
  min-height:590px!important;
  max-height:590px!important;
  overflow:hidden!important;
}
.homeShowcaseV7 .v7Copy,
.homeShowcaseV7 .v7Canvas{
  box-sizing:border-box!important;
  min-height:0!important;
}

/* Avoid any showcase child increasing the fixed panel height. */
.homeShowcaseV7 .v7Canvas{
  overflow:hidden!important;
}

/* ---------- tablet ---------- */
@media(min-width:681px) and (max-width:960px){
  .homeShowcaseV7 .v7Stage{
    height:770px!important;
    min-height:770px!important;
    max-height:770px!important;
  }
  .homeShowcaseV7 .homeDemo,
  .homeShowcaseV7 .homeDemo.on{
    height:770px!important;
    min-height:770px!important;
    max-height:770px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:190px 580px!important;
  }
  .homeShowcaseV7 .v7Copy{
    height:190px!important;
    padding:22px 24px!important;
  }
  .homeShowcaseV7 .v7Canvas{
    height:580px!important;
  }

  /* Keep Templates + Solo side by side on tablet so this panel
     uses the same 580px canvas as the others. */
  .homeShowcaseV7 .v8Templates{
    grid-template-columns:1.06fr .94fr!important;
    align-items:stretch!important;
  }
  .homeShowcaseV7 .v8TemplateBrowser,
  .homeShowcaseV7 .v8SoloColumn{
    min-height:0!important;
    height:100%!important;
  }
}

/* ---------- mobile ---------- */
@media(max-width:680px){
  /* One stable stage height for Live, Kids, Raffle and Templates. */
  .homeShowcaseV7 .v7Stage{
    height:760px!important;
    min-height:760px!important;
    max-height:760px!important;
    border-radius:16px!important;
  }
  .homeShowcaseV7 .homeDemo,
  .homeShowcaseV7 .homeDemo.on{
    height:760px!important;
    min-height:760px!important;
    max-height:760px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:138px 622px!important;
    overflow:hidden!important;
  }

  /* Compact copy zone. The tabs already explain the category, so on mobile
     the long explanatory paragraph is removed rather than shrinking the demo. */
  .homeShowcaseV7 .v7Copy{
    height:138px!important;
    min-height:138px!important;
    padding:15px 16px!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7Copy p{
    display:none!important;
  }
  .homeShowcaseV7 .v7Copy h3,
  .homeShowcaseV7 .v7Copy h5{
    font-size:17px!important;
    line-height:1.16!important;
    margin:6px 0 8px!important;
  }
  .homeShowcaseV7 .v7Kicker{
    font-size:7.5px!important;
  }
  .homeShowcaseV7 .v7Steps{
    margin-top:8px!important;
    gap:5px!important;
  }
  .homeShowcaseV7 .v7Steps span{
    padding:5px 7px!important;
    font-size:7px!important;
  }

  /* Use almost the full phone width for the actual product state. */
  .homeShowcaseV7 .v7Canvas{
    height:622px!important;
    min-height:622px!important;
    max-height:622px!important;
    padding:10px!important;
    overflow:hidden!important;
  }

  /* ---------------- LIVE QUIZ ---------------- */
  .homeShowcaseV7 .v7Live{
    display:grid!important;
    height:100%!important;
    grid-template-rows:260px 332px!important;
    gap:10px!important;
  }
  .homeShowcaseV7 .v7LiveQuestion{
    min-height:0!important;
    height:260px!important;
    padding:10px 11px!important;
  }
  .homeShowcaseV7 .v7LiveQuestion .demoQuestion{
    font-size:11px!important;
    line-height:1.25!important;
    margin-bottom:8px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers{
    gap:5px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers>div{
    min-height:36px!important;
    padding:6px 8px!important;
    font-size:7px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers i{
    width:24px!important;
    height:24px!important;
  }
  .homeShowcaseV7 .v7Points{
    margin-top:7px!important;
    font-size:7px!important;
  }
  .homeShowcaseV7 .v7LiveBottom{
    display:block!important;
    height:332px!important;
    min-height:332px!important;
  }
  .homeShowcaseV7 .v7Leaderboard{
    display:none!important;
  }

  /* Live podium is contained too, so none of its blocks can escape the card. */
  .homeShowcaseV7 .v7PodiumScene{
    height:332px!important;
    min-height:332px!important;
    max-height:332px!important;
    margin:0!important;
    padding:42px 7px 7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .homeShowcaseV7 .v7Podium{
    height:282px!important;
    min-height:282px!important;
    max-height:282px!important;
    padding:68px 2px 0!important;
    gap:5px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .homeShowcaseV7 .v7Place{
    width:32%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .homeShowcaseV7 .v7PodPlayer{
    min-height:58px!important;
    margin-bottom:5px!important;
  }
  .homeShowcaseV7 .v7PodPlayer span{
    width:32px!important;
    height:32px!important;
    font-size:14px!important;
  }
  .homeShowcaseV7 .v7PodPlayer b{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:6.5px!important;
  }
  .homeShowcaseV7 .v7PodPlayer small{
    font-size:5.6px!important;
  }
  .homeShowcaseV7 .v7Place.second .v7PodBlock{height:88px!important}
  .homeShowcaseV7 .v7Place.first .v7PodBlock{height:116px!important}
  .homeShowcaseV7 .v7Place.third .v7PodBlock{height:68px!important}
  .homeShowcaseV7 .v7WinnerCrown{
    top:-34px!important;
    width:88px!important;
    height:60px!important;
    transform:translateX(-50%) scale(.32)!important;
  }

  /* ---------------- OTIYA FOR KIDS ----------------
     On phones, challenge setup/player setup are represented by the step chips
     above. The canvas concentrates on Question + Podium, which are the most
     useful product states at this size. */
  .homeShowcaseV7 .v7Kids{
    display:block!important;
    height:100%!important;
  }
  .homeShowcaseV7 .v7KidsTop{
    display:none!important;
  }
  .homeShowcaseV7 .v7KidsBottom{
    display:grid!important;
    height:100%!important;
    grid-template-columns:1fr!important;
    grid-template-rows:260px 332px!important;
    gap:10px!important;
    min-height:0!important;
  }
  .homeShowcaseV7 .v7KidCard{
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }
  .homeShowcaseV7 .v7KidQuestion{
    height:260px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7TurnHead{
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    gap:7px!important;
  }
  .homeShowcaseV7 .v7TurnHead>svg{
    width:34px!important;
    height:34px!important;
  }
  .homeShowcaseV7 .v7TurnHead em{
    width:34px!important;
    height:34px!important;
    border-width:3px!important;
  }
  .homeShowcaseV7 .v7KidQuestion .demoQuestion{
    font-size:9.5px!important;
    line-height:1.28!important;
    margin:8px 0!important;
  }
  .homeShowcaseV7 .v7KAnswers{
    gap:4px!important;
  }
  .homeShowcaseV7 .v7KAnswers i{
    min-height:30px!important;
    padding:6px 8px!important;
    font-size:6.8px!important;
  }

  /* This is the critical containment fix from the mobile screenshot. */
  .homeShowcaseV7 .v7KidPodiumCard{
    height:332px!important;
    max-height:332px!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .homeShowcaseV7 .v7KidPodTop{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    align-items:center!important;
    min-width:0!important;
  }
  .homeShowcaseV7 .v7KidPodTop small{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:5.8px!important;
  }
  .homeShowcaseV7 .v7KidPodTop b{
    white-space:nowrap!important;
    font-size:5.6px!important;
  }

  .homeShowcaseV7 .v8KidsPodium{
    height:282px!important;
    min-height:282px!important;
    max-height:282px!important;
    padding:68px 3px 0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:end!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>span{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    margin-bottom:3px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>b{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:2px!important;
    font-size:5.8px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>small{
    font-size:5.3px!important;
    line-height:1.2!important;
    margin:2px 0 4px!important;
    white-space:nowrap!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>i{
    width:100%!important;
    max-width:84px!important;
    min-width:0!important;
    margin:0 auto!important;
    font-size:17px!important;
    border-radius:8px 8px 3px 3px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.second>i{
    height:64px!important;
    max-width:82px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.first>i{
    height:86px!important;
    max-width:86px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.third>i{
    height:50px!important;
    max-width:80px!important;
  }
  .homeShowcaseV7 .v8KidCrown{
    top:-35px!important;
    width:82px!important;
    height:58px!important;
    transform:translateX(-50%) scale(.31)!important;
    z-index:7!important;
  }

  /* ---------------- PRIZE DRAW ----------------
     All four methods remain visible, but in a compact 2 x 2 grid. */
  .homeShowcaseV7 .v7Raffle{
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }
  .homeShowcaseV7 .v7RaffleIntro{
    min-height:20px!important;
    flex:0 0 20px!important;
  }
  .homeShowcaseV7 .v7RaffleIntro b{
    display:none!important;
  }
  .homeShowcaseV7 .v7DrawGrid{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .homeShowcaseV7 .v7DrawCard{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7DrawHead b{
    font-size:7.5px!important;
  }
  .homeShowcaseV7 .v7DrawHead small{
    display:none!important;
  }
  .homeShowcaseV7 .v8WheelWrap{
    width:102px!important;
    height:108px!important;
    margin:15px auto 0!important;
  }
  .homeShowcaseV7 .v8WheelDisc{
    width:88px!important;
    height:88px!important;
  }
  .homeShowcaseV7 .v8WheelPointer{
    font-size:16px!important;
  }
  .homeShowcaseV7 .v7Wheel span{
    font-size:4.8px!important;
  }
  .homeShowcaseV7 .v7Reel{
    width:min(100%,112px)!important;
    margin:15px auto 0!important;
    padding:5px!important;
  }
  .homeShowcaseV7 .v7Reel span{
    padding:7px 4px!important;
    margin:3px 0!important;
    font-size:5.5px!important;
  }
  .homeShowcaseV7 .v7Cards{
    gap:4px!important;
    margin-top:14px!important;
  }
  .homeShowcaseV7 .v7Cards span{
    height:47px!important;
    padding:5px!important;
    font-size:5px!important;
  }
  .homeShowcaseV7 .v7DrumScene{
    height:142px!important;
  }
  .homeShowcaseV7 .v7DrumScene svg{
    width:92px!important;
    height:112px!important;
    margin:22px auto 0!important;
  }
  .homeShowcaseV7 .v7DrumName{
    top:1px!important;
    font-size:6.3px!important;
  }

  /* ---------------- TEMPLATES + SOLO ----------------
     Four template examples + a compact real Solo screen fit the same canvas.
     The extra two cards and mini leaderboard are secondary on a phone. */
  .homeShowcaseV7 .v8Templates{
    display:grid!important;
    height:100%!important;
    grid-template-columns:1fr!important;
    grid-template-rows:220px 372px!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  .homeShowcaseV7 .v8TemplateBrowser{
    min-height:0!important;
    height:220px!important;
    padding:9px!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v8TplHead{
    margin:0!important;
  }
  .homeShowcaseV7 .v8TplHead b{
    font-size:8px!important;
  }
  .homeShowcaseV7 .v8TplHead em{
    display:none!important;
  }
  .homeShowcaseV7 .v8TplGrid{
    display:grid!important;
    height:100%!important;
    min-height:0!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .homeShowcaseV7 .v8TplCard{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:6px!important;
    padding:6px!important;
  }
  .homeShowcaseV7 .v8TplCard:nth-child(n+5){
    display:none!important;
  }
  .homeShowcaseV7 .v8TplIcon{
    width:28px!important;
    height:28px!important;
    border-radius:8px!important;
  }
  .homeShowcaseV7 .v8TplCopy b{
    font-size:6.5px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .homeShowcaseV7 .v8TplCopy small,
  .homeShowcaseV7 .v8TplArrow,
  .homeShowcaseV7 .v8TplActions{
    display:none!important;
  }

  .homeShowcaseV7 .v8SoloColumn{
    min-height:0!important;
    height:372px!important;
    padding:9px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v8SoloLabel{
    min-height:38px!important;
    margin-bottom:6px!important;
  }
  .homeShowcaseV7 .v8SoloPlayIcon{
    width:30px!important;
    height:30px!important;
  }
  .homeShowcaseV7 .v8SoloLabel b{
    font-size:7.5px!important;
  }
  .homeShowcaseV7 .v9SoloDevice{
    display:block!important;
    height:310px!important;
    min-height:310px!important;
  }
  .homeShowcaseV7 .v9SoloPortrait{
    width:100%!important;
    height:310px!important;
    min-height:310px!important;
    max-height:310px!important;
    padding:10px!important;
    border-width:3px!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
  }
  .homeShowcaseV7 .v9SoloBar{
    margin:7px 0 10px!important;
  }
  .homeShowcaseV7 .v9SoloQuestion .demoQuestion{
    font-size:9px!important;
    line-height:1.25!important;
    margin-bottom:8px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers{
    gap:5px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers i{
    min-height:31px!important;
    padding:4px 7px!important;
    font-size:6px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers span{
    width:22px!important;
    height:22px!important;
  }
  .homeShowcaseV7 .v9SoloBoard{
    display:none!important;
  }
}

/* Very narrow phones: preserve containment without changing panel height. */
@media(max-width:360px){
  .homeShowcaseV7 .v7Canvas{padding:8px!important}
  .homeShowcaseV7 .v8KidsPodium{gap:2px!important;padding-left:1px!important;padding-right:1px!important}
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>i{max-width:76px!important}
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.first>i{max-width:78px!important}
  .homeShowcaseV7 .v8WheelWrap{width:92px!important}
  .homeShowcaseV7 .v8WheelDisc{width:80px!important;height:80px!important}
  .homeShowcaseV7 .v7DrumScene svg{width:84px!important;height:104px!important}
}

/* 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 .homeShowcaseV7,
  body.homePage .sec{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

@media(max-width:680px){

  /* The entire showcase is deliberately calmer and shorter on phones. */
  .homeShowcaseV7 .v7Shell{
    padding:15px!important;
  }
  .homeShowcaseV7 .v7Head{
    display:block!important;
    margin-bottom:10px!important;
  }
  .homeShowcaseV7 .v7Head h2{
    font-size:18px!important;
    line-height:1.18!important;
    margin:5px 0 0!important;
  }
  .homeShowcaseV7 .v7Head p{
    display:none!important;
  }
  .homeShowcaseV7 .v7Tabs{
    justify-content:flex-start!important;
    margin-top:11px!important;
    gap:5px!important;
  }
  .homeShowcaseV7 .v7Tabs .homeShowTab{
    padding:7px 9px!important;
    font-size:8.5px!important;
    line-height:1.15!important;
  }
  .homeShowcaseV7 .v7Progress{
    margin:0 0 9px!important;
  }

  /* All four panels remain exactly equal height.
     520px replaces the old 760px mobile stage. */
  .homeShowcaseV7 .v7Stage{
    height:520px!important;
    min-height:520px!important;
    max-height:520px!important;
  }
  .homeShowcaseV7 .homeDemo,
  .homeShowcaseV7 .homeDemo.on{
    height:520px!important;
    min-height:520px!important;
    max-height:520px!important;
    grid-template-rows:88px 432px!important;
  }

  .homeShowcaseV7 .v7Copy{
    height:88px!important;
    min-height:88px!important;
    padding:10px 12px!important;
    justify-content:center!important;
  }
  .homeShowcaseV7 .v7Copy p{
    display:none!important;
  }
  .homeShowcaseV7 .v7Copy h3,
  .homeShowcaseV7 .v7Copy h5{
    font-size:14px!important;
    line-height:1.15!important;
    margin:4px 0 6px!important;
  }
  .homeShowcaseV7 .v7Kicker{
    font-size:6.8px!important;
  }
  .homeShowcaseV7 .v7Steps{
    margin-top:4px!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7Steps span{
    padding:4px 6px!important;
    font-size:6.6px!important;
    white-space:nowrap!important;
  }

  .homeShowcaseV7 .v7Canvas{
    height:432px!important;
    min-height:432px!important;
    max-height:432px!important;
    padding:8px!important;
  }

  /* ---------------- LIVE QUIZ ----------------
     One question and one podium. The leaderboard remains hidden. */
  .homeShowcaseV7 .v7Live{
    grid-template-rows:190px 234px!important;
    gap:8px!important;
  }
  .homeShowcaseV7 .v7LiveQuestion{
    height:190px!important;
    min-height:190px!important;
    padding:8px 9px!important;
  }
  .homeShowcaseV7 .v7QuizMeta{
    font-size:5.7px!important;
  }
  .homeShowcaseV7 .v7QuizMeta b{
    font-size:6.2px!important;
    padding:3px 6px!important;
  }
  .homeShowcaseV7 .v7TimeBar{
    height:3px!important;
    margin:5px 0 7px!important;
  }
  .homeShowcaseV7 .v7LiveQuestion .demoQuestion{
    font-size:9px!important;
    line-height:1.2!important;
    margin:0 0 6px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers{
    gap:4px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers>div{
    min-height:30px!important;
    padding:4px 6px!important;
    gap:6px!important;
    font-size:6.4px!important;
  }
  .homeShowcaseV7 .v7QuizAnswers i{
    width:21px!important;
    height:21px!important;
    font-size:6px!important;
  }
  .homeShowcaseV7 .v7Points{
    margin-top:5px!important;
    font-size:6.4px!important;
  }
  .homeShowcaseV7 .v7LiveBottom{
    height:234px!important;
    min-height:234px!important;
  }
  .homeShowcaseV7 .v7Leaderboard{
    display:none!important;
  }
  .homeShowcaseV7 .v7PodiumScene{
    height:234px!important;
    min-height:234px!important;
    max-height:234px!important;
    padding:28px 6px 5px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7PodTitle{
    top:8px!important;
  }
  .homeShowcaseV7 .v7PodTitle small{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v7PodTitle b{
    font-size:7px!important;
  }
  .homeShowcaseV7 .v7Podium{
    height:196px!important;
    min-height:196px!important;
    max-height:196px!important;
    padding:52px 2px 0!important;
    gap:4px!important;
  }
  .homeShowcaseV7 .v7PodPlayer{
    min-height:43px!important;
    margin-bottom:3px!important;
  }
  .homeShowcaseV7 .v7PodPlayer span{
    width:27px!important;
    height:27px!important;
    font-size:11px!important;
  }
  .homeShowcaseV7 .v7PodPlayer b{
    font-size:5.8px!important;
  }
  .homeShowcaseV7 .v7PodPlayer small{
    font-size:4.9px!important;
  }
  .homeShowcaseV7 .v7Place.second .v7PodBlock{height:56px!important}
  .homeShowcaseV7 .v7Place.first .v7PodBlock{height:76px!important}
  .homeShowcaseV7 .v7Place.third .v7PodBlock{height:45px!important}
  .homeShowcaseV7 .v7WinnerCrown{
    top:-28px!important;
    width:72px!important;
    height:50px!important;
    transform:translateX(-50%) scale(.27)!important;
  }

  /* ---------------- OTIYA FOR KIDS ----------------
     Setup cards stay out of the mobile showcase.
     The useful story is one turn followed by the celebration. */
  .homeShowcaseV7 .v7KidsTop{
    display:none!important;
  }
  .homeShowcaseV7 .v7KidsBottom{
    grid-template-rows:190px 234px!important;
    gap:8px!important;
  }
  .homeShowcaseV7 .v7KidCard{
    padding:8px!important;
  }
  .homeShowcaseV7 .v7KidQuestion{
    height:190px!important;
  }
  .homeShowcaseV7 .v7TurnHead{
    grid-template-columns:29px minmax(0,1fr) 29px!important;
    gap:6px!important;
  }
  .homeShowcaseV7 .v7TurnHead>svg{
    width:29px!important;
    height:29px!important;
  }
  .homeShowcaseV7 .v7TurnHead em{
    width:29px!important;
    height:29px!important;
    border-width:2px!important;
    font-size:7px!important;
  }
  .homeShowcaseV7 .v7TurnHead small{
    font-size:5.8px!important;
  }
  .homeShowcaseV7 .v7TurnHead b{
    font-size:5.4px!important;
  }
  .homeShowcaseV7 .v7KidQuestion .demoQuestion{
    font-size:8.2px!important;
    line-height:1.22!important;
    margin:6px 0!important;
  }
  .homeShowcaseV7 .v7KAnswers{
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
  }
  .homeShowcaseV7 .v7KAnswers i{
    min-height:28px!important;
    padding:5px 6px!important;
    font-size:6.2px!important;
  }

  /* Podium containment remains strict. No 1, 2 or 3 block can escape. */
  .homeShowcaseV7 .v7KidPodiumCard{
    height:234px!important;
    min-height:234px!important;
    max-height:234px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v7KidPodTop small{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v7KidPodTop b{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v8KidsPodium{
    height:196px!important;
    min-height:196px!important;
    max-height:196px!important;
    padding:50px 2px 0!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>span{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    margin-bottom:2px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>b{
    font-size:5.1px!important;
    line-height:1.1!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>small{
    font-size:4.7px!important;
    margin:1px 0 3px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>i{
    font-size:14px!important;
    border-radius:7px 7px 3px 3px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.second>i{
    height:52px!important;
    max-width:76px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.first>i{
    height:70px!important;
    max-width:80px!important;
  }
  .homeShowcaseV7 .v8KidsPodium .v7KPlace.third>i{
    height:41px!important;
    max-width:72px!important;
  }
  .homeShowcaseV7 .v8KidCrown{
    top:-27px!important;
    width:68px!important;
    height:48px!important;
    transform:translateX(-50%) scale(.26)!important;
  }

  /* ---------------- PRIZE DRAW ----------------
     Show one strong reveal instead of four miniature demos.
     The tabs/chips still tell users the four available reveal styles. */
  .homeShowcaseV7 .v7Raffle{
    display:block!important;
    height:100%!important;
  }
  .homeShowcaseV7 .v7RaffleIntro{
    display:none!important;
  }
  .homeShowcaseV7 .v7DrawGrid{
    display:block!important;
    height:100%!important;
    position:relative!important;
  }
  .homeShowcaseV7 .v7DrawCard{
    display:none!important;
  }
  .homeShowcaseV7 .v7DrawCard:first-child{
    display:block!important;
    height:100%!important;
    padding:12px!important;
    position:relative!important;
  }
  .homeShowcaseV7 .v7DrawCard:first-child .v7DrawHead{
    justify-content:center!important;
  }
  .homeShowcaseV7 .v7DrawCard:first-child .v7DrawHead b{
    font-size:9px!important;
  }
  .homeShowcaseV7 .v8WheelWrap{
    width:205px!important;
    height:215px!important;
    margin:38px auto 0!important;
  }
  .homeShowcaseV7 .v8WheelDisc{
    width:190px!important;
    height:190px!important;
  }
  .homeShowcaseV7 .v8WheelPointer{
    font-size:22px!important;
  }
  .homeShowcaseV7 .v7Wheel span{
    font-size:7px!important;
  }
  .homeShowcaseV7 .v7DrawGrid:after{
    content:"Wheel  ·  Name Reel  ·  Cards  ·  Drum";
    position:absolute;
    left:12px;
    right:12px;
    bottom:13px;
    text-align:center;
    color:var(--dim);
    font-size:7px;
    font-weight:850;
    letter-spacing:.02em;
  }

  /* ---------------- TEMPLATES + SOLO ----------------
     Two real templates are enough to establish the library.
     Solo Play remains the main product state. */
  .homeShowcaseV7 .v8Templates{
    grid-template-rows:116px 308px!important;
    gap:8px!important;
  }
  .homeShowcaseV7 .v8TemplateBrowser{
    height:116px!important;
    min-height:116px!important;
    padding:7px!important;
    gap:5px!important;
  }
  .homeShowcaseV7 .v8TplHead b{
    font-size:7px!important;
  }
  .homeShowcaseV7 .v8TplHead small{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v8TplGrid{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:1fr!important;
    gap:5px!important;
  }
  .homeShowcaseV7 .v8TplCard{
    grid-template-columns:25px minmax(0,1fr)!important;
    padding:5px!important;
  }
  .homeShowcaseV7 .v8TplCard:nth-child(n+3){
    display:none!important;
  }
  .homeShowcaseV7 .v8TplIcon{
    width:25px!important;
    height:25px!important;
  }
  .homeShowcaseV7 .v8TplCopy b{
    font-size:5.8px!important;
  }

  .homeShowcaseV7 .v8SoloColumn{
    height:308px!important;
    min-height:308px!important;
    padding:7px!important;
  }
  .homeShowcaseV7 .v8SoloLabel{
    min-height:31px!important;
    margin-bottom:4px!important;
  }
  .homeShowcaseV7 .v8SoloPlayIcon{
    width:25px!important;
    height:25px!important;
  }
  .homeShowcaseV7 .v8SoloLabel b{
    font-size:6.5px!important;
  }
  .homeShowcaseV7 .v8SoloLabel small{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v9SoloDevice{
    height:258px!important;
    min-height:258px!important;
  }
  .homeShowcaseV7 .v9SoloPortrait{
    height:258px!important;
    min-height:258px!important;
    max-height:258px!important;
    padding:8px!important;
  }
  .homeShowcaseV7 .v9SoloTop{
    font-size:5px!important;
  }
  .homeShowcaseV7 .v9SoloTop b{
    font-size:5.5px!important;
  }
  .homeShowcaseV7 .v9SoloBar{
    margin:5px 0 7px!important;
  }
  .homeShowcaseV7 .v9SoloQuestion .demoQuestion{
    font-size:7.8px!important;
    line-height:1.2!important;
    margin-bottom:6px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers{
    gap:4px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers i{
    min-height:27px!important;
    padding:3px 5px!important;
    font-size:5.7px!important;
  }
  .homeShowcaseV7 .v9SoloAnswers span{
    width:19px!important;
    height:19px!important;
  }

  /* Desktop hover/focus helper is useful there, but adds noise on a phone. */
  .homeShowcaseV7 .v7Hint{
    display:none!important;
  }
}

/* Narrow phones keep the same 520px stage and tighter safe gutters. */
@media(max-width:360px){
  .homeShowcaseV7 .v7Shell{padding:12px!important}
  .homeShowcaseV7 .v7Canvas{padding:6px!important}
  .homeShowcaseV7 .v8WheelWrap{width:180px!important;height:190px!important}
  .homeShowcaseV7 .v8WheelDisc{width:168px!important;height:168px!important}
  .homeShowcaseV7 .v8KidsPodium{gap:2px!important}
}

/* =========================================================
   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. */
@media(min-width:681px){
  body.homePage .homeShowcaseV7 .v8SoloColumn{
    overflow:hidden!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloDevice{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloPortrait{
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
    box-sizing:border-box!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard>div{
    min-width:0!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard strong{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* =========================================================
   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. */
@media(min-width:961px){
  body.homePage .homeShowcaseV7 .v9SoloDevice{
    grid-template-rows:minmax(342px,1fr) auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloPortrait{
    min-height:342px!important;
    height:100%!important;
    max-height:100%!important;
    padding:14px!important;
    box-sizing:border-box!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBar{
    margin:8px 0 16px!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloQuestion{
    margin:0!important;
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard{
    padding:7px 9px!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard>b{
    margin-bottom:5px!important;
  }
  body.homePage .homeShowcaseV7 .v9SoloBoard>div{
    margin:3px 0!important;
    padding:4px 7px!important;
    line-height:1.15!important;
  }
}

/* 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. */
body.homePage .homeShowcaseV7 .v9SoloPortrait{
  box-sizing:border-box!important;
}
body.homePage .homeShowcaseV7 .v9SoloAnswers{
  min-height:0!important;
}
body.homePage .homeShowcaseV7 .v9SoloAnswers i{
  box-sizing:border-box!important;
}

/* ===== 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}
}

/* Otiya in Action: panels occupy one fixed layer. Rotation can never change
   document flow or move the footer. */
.homeShowcaseV7 .v7Stage{position:relative!important;overflow:hidden!important;contain:layout paint!important}
.homeShowcaseV7 .homeDemo,
.homeShowcaseV7 .homeDemo.on{position:absolute!important;inset:0!important;margin:0!important;display:grid!important;animation:none!important;transition:opacity .22s ease!important}
.homeShowcaseV7 .homeDemo{opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:0!important}
.homeShowcaseV7 .homeDemo.on{opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:1!important}

/* Kids podium: avatar -> clear gap -> name -> points -> clear gap -> block.
   Nothing is allowed to drift into the avatar. */
.homeShowcaseV7 .v8KidsPodium .v7KPlace{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important}
.homeShowcaseV7 .v8KidsPodium .v7KPlace>span{position:relative!important;z-index:2!important;margin:0 auto 7px!important}
.homeShowcaseV7 .v8KidsPodium .v7KPlace>b{position:relative!important;z-index:2!important;display:block!important;margin:0!important;line-height:1.22!important;min-height:1.22em!important}
.homeShowcaseV7 .v8KidsPodium .v7KPlace>small{position:relative!important;z-index:2!important;display:block!important;margin:2px 0 7px!important;line-height:1.2!important}
.homeShowcaseV7 .v8KidsPodium .v7KPlace>i{position:relative!important;z-index:1!important;margin:0 auto!important}
@media(max-width:680px){
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>span{margin-bottom:5px!important}
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>b{line-height:1.15!important;min-height:1.15em!important}
  .homeShowcaseV7 .v8KidsPodium .v7KPlace>small{margin:2px 0 5px!important;line-height:1.1!important}
}

/* R15 mobile viewport containment: decorative glow/patterns never create page-wide horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden!important}

/* R15 root overflow source correction. Keep the same visual treatment without geometry extending past the viewport. */
body.homePage .pattern{inset:0!important}
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',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',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',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',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',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',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',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',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',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',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))}
}

/* ---------- in-action draw cards on mobile ---------- */

/* .v7DrawCard has min-height:215px, which suits the four cards sitting side by
   side on a desktop grid. On a phone each card is full width and the wheel is
   only 130px tall, so about 67px of empty space sat underneath and read as a
   rendering fault rather than deliberate spacing.
   The floor is dropped on narrow screens and the content decides the height. */
@media(max-width:640px){
  .v7DrawCard{min-height:0;padding:12px 12px 14px}
  .v8WheelWrap{margin-top:8px}
  .v7Wheel{margin-top:10px}
}

/* ================= PRIZE DRAW, the real experiences =================
   Replaces the four miniature mock cards with the actual Otiya draw screens.
   Desktop shows two, the Wheel and the Drum, which are the two ends of the
   range: smaller groups and a big room. Mobile shows the Wheel alone, because
   two of these side by side on a phone would be unreadable.

   The four styles are still named in the .v7Steps chips above the canvas, so
   nothing is lost by showing two.

   Reduced motion is already handled globally: .homeShowcaseV7 * has
   animation:none under prefers-reduced-motion. */

.v9DrawPair{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1 1 auto;min-height:0}

.v9Draw{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:10px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0,#241130,#170a1f 70%)}

.v9DrawTop{display:flex;justify-content:space-between;align-items:center;gap:6px;flex:0 0 auto}
.v9DrawChip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:6.4px;font-weight:850;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v9DrawChip em{font-style:normal;color:var(--turq);font-weight:950}
.v9DrawStyle{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-size:6.4px;font-weight:850;color:var(--ink);white-space:nowrap}
.v9DrawStyle i{font-style:normal;font-size:6px;opacity:.7}

.v9DrawStage{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:6px}
.v9DrawKicker{font-size:6.2px;font-weight:950;letter-spacing:.16em;color:var(--dim);text-align:center}
.v9Strip{display:flex;gap:4px;justify-content:center;margin:6px 0 2px}
.v9Strip s{display:block;width:11px;height:2px;border-radius:2px;text-decoration:none;background:rgba(255,255,255,.14)}
.v9Strip s:nth-child(3n+1){background:rgba(224,138,74,.75)}
.v9Strip s:nth-child(3n+2){background:rgba(63,191,180,.7)}
.v9Strip s:nth-child(3n){background:rgba(215,94,147,.6)}

/* ---- the Wheel ---- */
.v9WheelWrap{position:relative;margin:auto;width:250px;height:264px;flex:0 0 auto}
.v9WheelPin{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:4;
  font-style:normal;font-size:21px;line-height:1;color:var(--lime);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.v9Wheel{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:250px;height:250px;border-radius:50%;overflow:hidden;
  border:6px solid #38213f;box-sizing:border-box;
  box-shadow:0 14px 30px rgba(0,0,0,.42),inset 0 0 0 2px rgba(0,0,0,.18)}
.v9WheelSpin{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -15deg,#E08A4A 0deg 30deg,#D75E93 30deg 60deg,#8E7BD0 60deg 90deg,#3FBFB4 90deg 120deg,#B6D64C 120deg 150deg,#E8A93C 150deg 180deg,#D75E93 180deg 210deg,#E08A4A 210deg 240deg,#8E7BD0 240deg 270deg,#3FBFB4 270deg 300deg,#B6D64C 300deg 330deg,#E8A93C 330deg 360deg);
  animation:v9Spin 18s linear infinite}
.v9Wheel i{position:absolute;left:50%;top:50%;width:50%;height:0;
  transform-origin:0 0;transform:rotate(calc(var(--a) - 90deg));
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.v9Wheel i b{transform:translateY(-50%);padding-right:15px;
  font-family:'Unbounded';font-size:10px;font-weight:700;color:#22101f;white-space:nowrap}
.v9WheelHub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 50% 35%,#2b1636,#160a1e);
  border:2px solid var(--lime);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.v9WheelHub em{font-style:normal;font-size:6px;font-weight:950;letter-spacing:.1em;color:var(--lime)}
.v9WheelHub b{font-family:'Unbounded';font-size:20px;line-height:1;color:var(--ink)}
@keyframes v9Spin{to{transform:rotate(360deg)}}

/* ---- the Drum ---- */
.v9DrumName{position:relative;height:34px;margin-top:8px;width:100%;flex:0 0 auto}
.v9DrumName span{position:absolute;left:0;right:0;top:0;text-align:center;
  font-family:'Unbounded';font-size:24px;line-height:1.35;color:var(--ink);
  opacity:0;animation:v9Name 9s linear infinite}
.v9DrumName span:nth-child(2){animation-delay:3s}
.v9DrumName span:nth-child(3){animation-delay:6s}
@keyframes v9Name{0%,2%{opacity:0}6%,30%{opacity:1}34%,100%{opacity:0}}
.v9DrumWrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;padding:4px 0 8px}
.v9DrumWrap svg{width:auto;height:100%;max-height:236px;max-width:100%;display:block;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
  animation:v9Shake 2.6s ease-in-out infinite;transform-origin:50% 88%}
@keyframes v9Shake{0%,100%{transform:rotate(0)}22%{transform:rotate(-2.2deg)}62%{transform:rotate(2.2deg)}}

/* ---- the button ---- */
.v9DrawGo{flex:0 0 auto;margin-top:8px;width:100%;border:0;border-radius:12px;
  padding:11px 10px;font-family:'Unbounded';font-size:9.5px;letter-spacing:.06em;
  color:#fff5e8;cursor:default;pointer-events:none;
  background:linear-gradient(90deg,#C4622F,#9A4A6B 52%,#5E3B86);
  box-shadow:0 8px 18px rgba(0,0,0,.34)}
.v9DrawGo.drawing{background:linear-gradient(90deg,#7d3f34,#6d3a53 52%,#462d63);
  color:rgba(255,245,232,.82);animation:v9Pulse 1.8s ease-in-out infinite}
@keyframes v9Pulse{0%,100%{opacity:.86}50%{opacity:1}}

/* Prize draw on a phone: one strong reveal, the Wheel, at a readable size. */
@media(max-width:680px){
  .homeShowcaseV7 .v9DrawPair{display:block!important;height:100%!important;position:relative!important}
  .homeShowcaseV7 .v9Draw{display:none!important}
  .homeShowcaseV7 .v9DrawWheel{display:flex!important;height:100%!important;padding:11px!important}
  .homeShowcaseV7 .v9DrawChip,
  .homeShowcaseV7 .v9DrawStyle{font-size:7px!important;padding:4px 7px!important}
  .homeShowcaseV7 .v9DrawKicker{font-size:7px!important}
  .homeShowcaseV7 .v9Strip s{width:13px!important}
  .homeShowcaseV7 .v9WheelWrap{width:215px!important;height:228px!important;margin-top:14px!important}
  .homeShowcaseV7 .v9Wheel{width:215px!important;height:215px!important}
  .homeShowcaseV7 .v9WheelPin{font-size:20px!important}
  .homeShowcaseV7 .v9Wheel i b{font-size:9px!important;padding-right:13px!important}
  .homeShowcaseV7 .v9WheelHub{width:64px!important;height:64px!important}
  .homeShowcaseV7 .v9WheelHub b{font-size:17px!important}
  .homeShowcaseV7 .v9DrawGo{font-size:10px!important;padding:12px 10px!important}
}

/* ================= 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}
  }
}

/* ================= otiya AI inside the in-action panel =================
   Folded into the existing Templates panel rather than added as a fifth tab.
   The mobile tab row is already at 8.5px type, so a fifth would have made the
   section busy, which he asked to avoid. The tab is renamed Templates & AI,
   shorter than Templates & solo, so the row gains room rather than losing it.

   Sized against the real container rather than by eye. Measured in Chromium,
   .v9AiBlock gets 368px inside the device. The first attempt used 150 of it
   and the parent centred the result, leaving a large gap above and below. Five
   rows at a readable size fill it properly.

   No entrance animation on the rows, deliberately. A staggered fade was
   measured leaving row two at opacity 0.29 and row three at 0 more than two
   seconds after the panel opened, because the delays restart when the panel
   becomes visible. A third of the content was invisible. Content that is
   always right beats an animation that sometimes hides it. The caret still
   blinks, which is enough life for a panel that rotates every ten seconds.

   The leaderboard that used to sit under this device was removed from the
   markup: it belonged to the solo-play mock and made no sense beside a list of
   questions being written. */
.v9AiBlock{flex:1 1 auto;display:flex!important;flex-direction:column!important;gap:7px;
  min-height:0;justify-content:flex-start!important}
.v9AiField{display:flex;align-items:center;gap:3px;padding:7px 8px;border-radius:8px;
  background:#160a1e;border:1px solid rgba(200,241,53,.42);flex:0 0 auto}
.v9AiField span{font-size:7.2px;font-weight:850;color:var(--ink)}
.v9AiCaret{width:1px;height:9px;background:var(--lime);animation:v9Caret 1.1s step-end infinite}
@keyframes v9Caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.v9AiList{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.v9AiList i{display:grid;grid-template-columns:10px minmax(0,1fr);gap:6px;align-items:start;
  padding:7px 8px;border-radius:8px;background:rgba(200,241,53,.07);
  border:1px solid rgba(200,241,53,.22);opacity:1}
.v9AiList s{width:10px;height:10px;border-radius:3px;text-decoration:none;background:var(--lime);
  position:relative;margin-top:1px;flex:0 0 auto}
.v9AiList s:after{content:"";position:absolute;left:2.6px;top:3.2px;width:3.4px;height:1.6px;
  border-left:1.3px solid #1d2a05;border-bottom:1.3px solid #1d2a05;transform:rotate(-45deg)}
.v9AiList b{display:block;font-size:6.6px;line-height:1.3;color:var(--ink);font-weight:800}
.v9AiList em{display:block;font-style:normal;font-size:6.1px;color:var(--lime);
  font-weight:850;margin-top:2px;line-height:1.25}

/* Writing progress, not a countdown, so it holds a partial width instead of
   draining like the live-quiz timer this bar is shared with. */
.v9AiBar i{width:46%!important;animation:none!important}
.v9AiFoot{margin-top:auto;padding-top:6px;text-align:center;font-size:6px;font-weight:900;
  letter-spacing:.1em;color:var(--dim);flex:0 0 auto}

@media(max-width:680px){
  .homeShowcaseV7 .v9AiField span{font-size:7.4px!important}
  .homeShowcaseV7 .v9AiList b{font-size:6.8px!important}
  .homeShowcaseV7 .v9AiList em{font-size:6.2px!important}
  .homeShowcaseV7 .v9AiFoot{font-size:6.2px!important}
}

/* =========================================================
   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}

.homeShowcaseV7 .v7Shell{
  border-top-color:rgba(253,244,227,.07)!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}
}

/* ---------- the step chips, and why the wordmark broke out of one ----------
   Reported: "Ask otiya AI" rendered with a second pill outline around the word
   otiya, overlapping the chip's own border.

   The cause is a descendant selector. brandify() replaces the word otiya with
   <span class="bd">, and it does that inside the chip, so
   `.v7Steps span { border; padding; border-radius }` styled the wordmark span
   as a chip in its own right: a pill inside a pill, padded outward until it
   crossed the parent's edge.

   Scoping to the direct child fixes it without touching brandify, which is
   used across the whole site. The chips also get room to breathe: 8px type in
   a 6px box was tight enough that any nested element had nowhere to go. */
.v7Steps{gap:7px!important;margin-top:18px!important}
.v7Steps>span{
  padding:7px 11px!important;
  line-height:1.35!important;
  display:inline-flex;align-items:center;gap:3px;
  white-space:nowrap;
}
/* Cancel the inherited chip treatment on anything nested inside a chip. */
.v7Steps span span,
.v7Steps .bd{
  padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;font-size:inherit!important;
}
.v7Steps>span.on .bd i{color:var(--lime)}

/* Checked the other two places the brand word sits inside a styled span:
   .hiw-u is the box itself rather than a descendant rule, and .v7Kicker sets
   only type. Neither can nest a pill inside a pill, so neither needs a rule. */

/* ---------- Otiya in action: the outline, properly this time ----------
   My first attempt neutralised the shell's border colour, which was the wrong
   fix because it left a line, just a paler one. There were three edges within
   a few pixels of each other, not two:

     1. the section's own accent, inset 0 3px 0 turquoise
     2. the shell's 1px border-top, inherited from .homeShowcaseShell
     3. the shell's box-shadow ring, 0 0 0 1px rgba(43,217,198,.045)

   The cause is that .homeShowcase is a transparent wrapper with no background
   of its own, so the accent draws on the wrapper's edge while the panel sits
   below it with its own border. Two boxes, so two outlines. Every other
   section paints its own background, which is why only this one doubles.

   The accent moves onto the panel edge, where there is one box and therefore
   one line. The drop shadow is kept; the turquoise ring is not, since that was
   the third edge. */
.homeShowcaseV7.secAcc-turq{box-shadow:none!important}
.homeShowcaseV7 .v7Shell{
  border-top:3px solid var(--turq)!important;
  border-left-color:rgba(253,244,227,.09)!important;
  border-right-color:rgba(253,244,227,.09)!important;
  border-bottom-color:rgba(253,244,227,.09)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.24)!important;
}

/* ---------- the in-action AI questions, readable ----------
   6.6px question text and 6.1px answers were below what anyone can read on a
   phone held at arm's length. Raised across the board, with the row padding
   and gaps raised to match so the box does not tighten around the larger type.
   The panel is a fixed-height device mock, so the five rows still have to fit:
   these sizes were chosen to leave the row count alone. */
.homeShowcaseV7 .v9AiField span{font-size:8.6px!important}
.homeShowcaseV7 .v9AiList{gap:5px!important}
.homeShowcaseV7 .v9AiList i{padding:6px 8px!important}
.homeShowcaseV7 .v9AiList b{font-size:8.2px!important;line-height:1.28!important}
.homeShowcaseV7 .v9AiList em{font-size:7.4px!important;margin-top:1.5px!important}
.homeShowcaseV7 .v9AiFoot{font-size:7px!important}
@media(max-width:680px){
  .homeShowcaseV7 .v9AiField span{font-size:8.8px!important}
  .homeShowcaseV7 .v9AiList b{font-size:8.4px!important}
  .homeShowcaseV7 .v9AiList em{font-size:7.6px!important}
  .homeShowcaseV7 .v9AiFoot{font-size:7.2px!important}
}

/* ---------- 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{
  /* "World facts" is 11 characters, stepped one per frame so it reads as
     typing rather than a wipe. Change the string and both numbers below
     change with it. Timing is shortened to match the shorter phrase, so it
     still types at a believable speed rather than crawling. */
  animation:soloTypeIn .75s steps(11,end) .2s both;
}
@keyframes soloTypeIn{
  from{max-width:0}
  to{max-width:11ch}
}

/* 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;
}

/* ---------- otiya AI in the in-action section, landscape ----------
   The old layout put a portrait phone mock, width:min(100%,330px), inside a
   panel far wider than 330px and beside a pack browser. Two consequences: most
   of the panel was empty, and the content was squeezed into a tall narrow
   strip whose height was pinned at 310px and 258px by !important rules, which
   is what clipped the fifth question. The empty space and the cut-off row were
   the same fault.

   This uses the width the panel already has. Subject across the top, questions
   in two columns on desktop and one on a phone, so the rows can be read at a
   normal size and nothing is fighting a fixed height. */
.v10AiCanvas{
  display:flex;flex-direction:column;gap:9px;
  padding:14px!important;border-radius:16px;
  background:linear-gradient(160deg,rgba(10,4,16,.5),rgba(10,4,16,.28));
  border:1px solid rgba(200,241,53,.16);
}
.v10AiHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v10AiWho{font:800 9px 'Inter',sans-serif;letter-spacing:.1em;color:var(--dim)}
.v10AiState{
  font:800 9px 'Inter',sans-serif;padding:4px 9px;border-radius:999px;
  background:rgba(200,241,53,.14);border:1px solid rgba(200,241,53,.34);color:var(--lime);
}
.v10AiOf{font:700 9px 'Inter',sans-serif;color:var(--mute)}

.v10AiBar{height:3px;border-radius:99px;background:rgba(253,244,227,.08);overflow:hidden}
/* Writing progress, not a countdown, so it holds a partial width. */
.v10AiBar i{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--turq),var(--lime))}

.v10AiField{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:11px;
  background:rgba(200,241,53,.07);border:1px solid rgba(200,241,53,.34);
}
.v10AiFieldIcon{display:flex;flex:none;color:var(--lime)}
.v10AiField b{font:800 12.5px 'Inter',sans-serif;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v10AiCaret{width:1.5px;height:14px;flex:none;background:var(--lime)}

.v10AiGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v10AiQ{
  display:grid;grid-template-columns:15px minmax(0,1fr);gap:8px;align-items:start;
  padding:9px 10px;border-radius:11px;
  background:rgba(200,241,53,.06);border:1px solid rgba(200,241,53,.2);
}
.v10AiQ s{
  width:15px;height:15px;border-radius:4px;text-decoration:none;background:var(--lime);
  position:relative;margin-top:1px;
}
.v10AiQ s:after{
  content:"";position:absolute;left:4px;top:5px;width:5px;height:2.4px;
  border-left:2px solid #1d2a05;border-bottom:2px solid #1d2a05;transform:rotate(-45deg);
}
.v10AiQ>span{min-width:0}
.v10AiQ b{display:block;font:700 11.6px 'Inter',sans-serif;line-height:1.35;color:var(--ink)}
.v10AiQ em{display:block;font-style:normal;font:800 10.6px 'Inter',sans-serif;
  color:var(--lime);margin-top:3px;line-height:1.3}

.v10AiFoot{
  margin-top:auto;padding-top:4px;text-align:center;
  font:900 8.4px 'Unbounded',sans-serif;letter-spacing:.12em;color:var(--dim);
}

@media(max-width:680px){
  /* One column, because two columns of question text in a 340px panel gives
     each about 150px and every question wraps to four lines. */
  .v10AiGrid{grid-template-columns:1fr;gap:7px}
  .v10AiCanvas{padding:11px!important;gap:8px}
  .v10AiQ{padding:8px 9px}
  .v10AiQ b{font-size:11.2px}
  .v10AiQ em{font-size:10.2px}
  .v10AiField b{font-size:12px}
}

/* ---------- 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. */
.v10AiFootNarrow{display:none}

@media(max-width:680px){
  .v10AiQ:nth-of-type(n+7){display:none}
  .v10AiBar i{width:60%}
  .v10AiFootWide{display:none}
  .v10AiFootNarrow{display:inline}
}

/* ---------- 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',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',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',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',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',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',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}

/* ============================================================================
   /how-it-works, rebuilt September 2026.

   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)}

/* Seven 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',sans-serif;font-weight:800;
  font-size:10.4px;color:var(--sc)}
.hwSteps a:hover{border-color:var(--sc)}

/* ---- one step ---- */
.hwAct{margin-top:74px;position:relative}
.hwTop{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.hwNo{font-family:'Unbounded',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}
.hwP{color:#DCCFE6;font-size:15px;line-height:1.62;max-width:64ch;margin-top:10px;font-weight:500}
.hwRule{height:3px;background:linear-gradient(90deg,var(--ac),transparent);margin-top:18px}

.hwNote{margin-top:20px;background:rgba(255,255,255,.035);
  border-left:4px solid var(--nc,var(--vio));padding:15px 18px;font-size:14.2px;
  font-weight:600;color:#E6DAEF;line-height:1.55}
.hwNote b{color:#fff}
.hwBox{background:var(--panel);border-left:4px solid var(--nc,var(--turq));padding:13px 15px;
  margin-top:14px;font-size:11.8px;line-height:1.55;font-weight:600;color:#DCCFE6}
.hwBox b{color:var(--nc,var(--turq));display:block;font-size:10.6px;letter-spacing:1.3px;
  text-transform:uppercase;margin-bottom:5px}

/* ---- 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',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}

/* ---- 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)}
.hwScreen.hwCentre{text-align:center}
.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}
.hwST{font-family:'Unbounded',sans-serif;font-weight:700;font-size:13.6px;letter-spacing:-.02em;
  text-align:center;margin:10px 0 12px}
.hwSub{color:var(--dim);font-size:10.4px;margin:-8px 0 8px;font-weight:600}
.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',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))}
.hwTiles.hwTilesS{gap:4px}
.hwTiles.hwTilesS i{width:27px;height:34px;font-size:15px}
.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}
.hwNameRow{background:var(--panel);border:1.5px solid var(--panel2);padding:8px 10px;
  font-size:11.4px;font-weight:700;text-align:left;display:flex;align-items:center;gap:7px}
.hwNameRow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwNameRow em{font-style:normal;background:var(--panel2);padding:3px 7px;font-size:11px;flex:none}
.hwAvs{display:flex;gap:4px;justify-content:center;margin-top:9px;font-size:15px}
.hwAvs span{background:var(--panel);padding:4px 6px}
.hwAvs .on{background:var(--turq)}
.hwIn{background:var(--turq);color:var(--turqT);font-family:'Unbounded',sans-serif;
  font-weight:800;font-size:11.6px;padding:10px;margin-top:11px}

/* ---- 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',sans-serif;font-size:10.4px}
.hwQText{font-family:'Unbounded',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}

/* ---- 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',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:22px}
.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}
.hwHero{font-size:30px;line-height:1}
.hwHero.num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:27px;color:var(--rcA)}
.hwHero.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',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',sans-serif;font-weight:700;font-size:12px;margin-top:9px;
  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}
.hwCardT{margin-bottom:11px}
.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',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',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 .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}
  .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:560px){
  .hwRooms{grid-template-columns:1fr}
  .hwLap{max-width:100%}
  .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
     three rows instead of four. */
  .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}
  .hwSteps{margin-top:20px;gap:6px}
  .hwSteps a{font-size:10.8px;padding:7px 9px 7px 8px;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .hwAiF s{animation:none}
}

/* A step landed flush against the top edge of the window when jumped to. */
.hwAct{scroll-margin-top:16px}

/* ============================================================================
   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',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}
.tmWin{max-width:420px;margin:0 auto 14px;padding:11px 15px;border:1.5px solid var(--panel2);
  border-radius:14px;background:rgba(255,255,255,.03);text-align:center}
.tmWinK{display:block;font:800 10px 'Inter',system-ui,sans-serif;letter-spacing:2.2px}
.tmWin b{display:block;margin-top:3px;
  font:800 19px 'Unbounded','Inter',system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.tmWinV{display:block;margin-top:2px;color:var(--dim);font:700 12.4px 'Inter',system-ui,sans-serif}

/* 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:18px;height:18px;flex:none;accent-color:var(--lime)}
.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))}
}