@font-face{font-family:"DitMarker";src:url("../fonts/permanent-marker-400.woff") format("woff");font-display:swap}
/* DidIThrow Streamer Mode: intro + control (sm-/ct-), stream screen at 1920×1080 (scr-), viewer phone (pl-). */
.sm-brand{font:900 1.15rem/1 var(--display);font-stretch:condensed;letter-spacing:.01em;white-space:nowrap}
.sm-brand i{font-style:normal;color:var(--brand)}
.sm-brand em{font-style:normal;font-size:.62em;font-weight:800;letter-spacing:.08em;background:var(--brand);color:var(--brand-ink);border-radius:6px;padding:.25em .5em;margin-left:.35em;vertical-align:.2em}
.sm-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 18px;font-weight:700;box-shadow:var(--shadow);transition:.2s;z-index:50;max-width:min(92vw,520px);text-align:center}
.sm-toast.show{opacity:1;transform:translate(-50%,0)}
.sm-page button,.pl-grid button,.pl-roles button,.pl-send,.ct .btn{font:800 15px/1.1 var(--body);border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sm-page button:hover:not(:disabled){border-color:var(--brand)}
.sm-page button:disabled{opacity:.45;cursor:not-allowed}
.sm-page button.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.sm-page button.ghost,.ct .btn.ghost{background:transparent}
.sm-page button.danger{color:var(--guilty);border-color:#FF6B6B66}
.sm-page button[aria-pressed="true"],.pl-grid button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.hint{color:var(--muted);font-size:15px;margin:6px 0}
.eyebrow{font:800 13px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 4px}

.t-S{color:#FF6B6B;--tc:#FF6B6B}.t-A{color:#FFA24C;--tc:#FFA24C}.t-B{color:#FFC940;--tc:#FFC940}.t-C{color:#4FD8A0;--tc:#4FD8A0}.t-D{color:#5CB8FF;--tc:#5CB8FF}


/* ---------- stream screen (designed at 1920×1080, scales with the window) ---------- */

.heat-mutiny b,.heat-fume b{color:var(--guilty)}.heat-agree b{color:var(--innocent)}
.k-map .scr-opts{grid-template-columns:repeat(2,1fr)}


/* patch changes with the official ability and perk icons (the site's component, ability-icon.css) */
.sm-change{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line-2);border-left:4px solid var(--brand);border-radius:12px;padding:8px 12px 8px 8px}
.sm-change.k-buff{border-left-color:var(--innocent)}.sm-change.k-nerf{border-left-color:var(--guilty)}
.sm-change .ab-icon{--ab-s:44px}
.sm-change .ab-portrait{border-radius:50%}
.sm-change .nm{font:900 16px/1.1 var(--display);text-transform:uppercase;color:var(--ink)}
.sm-change .st{font-size:13px;color:var(--muted);line-height:1.2}
.sm-change .kd{font:900 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.sm-change.k-buff .kd{color:var(--innocent)}.sm-change.k-nerf .kd{color:var(--guilty)}

/* ---------- stream screen v2: header drain, join card, tier vote, tier board ---------- */




/* =====================================================================================================
   STREAM SCREEN · designed at 1920×1080 (1rem = 16px there) and scaled with the window
   ===================================================================================================== */
html:has(body.sm-screen){font-size:calc(100vw / 120)}
body.sm-screen{--pn:#0F131CEB;--pn2:#151A25;--rc:var(--brand);min-height:100vh;height:100vh;overflow:hidden;background:#090B10;font-size:1rem}
body.sm-screen::before{content:"";position:fixed;inset:-20%;z-index:-1;background:radial-gradient(40% 40% at 78% 8%,#FFC94024,transparent 70%),radial-gradient(45% 45% at 8% 92%,#5CB8FF1C,transparent 70%),radial-gradient(30% 30% at 50% 60%,#FF6B6B10,transparent 70%);animation:scrAmbient 26s ease-in-out infinite alternate}
@keyframes scrAmbient{to{transform:translate(3%,-2%) rotate(4deg) scale(1.05)}}
body.sm-screen.is-clear{background:transparent}body.sm-screen.is-clear::before{display:none}
.scr{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 25rem;grid-template-rows:auto 1fr;gap:1.6rem 2rem;height:100vh;padding:2rem 2.4rem;box-sizing:border-box}
.scr-wait{grid-column:1/-1;display:grid;place-items:center;font-size:2rem;color:var(--ink-2)}

/* motion vocabulary */
@keyframes sIn{from{opacity:0;transform:translateY(1.6rem)}to{opacity:1;transform:none}}
@keyframes sPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes sSlam{0%{opacity:0;transform:rotate(var(--rot,-6deg)) scale(2.6)}70%{opacity:1;transform:rotate(var(--rot,-6deg)) scale(.94)}100%{transform:rotate(var(--rot,-6deg)) scale(1)}}
@keyframes sGlow{50%{box-shadow:0 0 3.4rem color-mix(in srgb,var(--tc,var(--brand)) 45%,transparent)}}
@keyframes sShine{to{background-position:-200% 0}}
@keyframes sPulse{50%{opacity:.35;transform:scale(.8)}}
.s-steps li,.tv-row,.ob,.pc,.tl-row,.pod,.gp-faces span,.tv-tile,.tl-face{animation:sIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.tv-tile,.pod{animation-name:sPop}

/* header */
.scr-top{grid-column:1/-1;display:flex;align-items:center;gap:2rem;background:var(--pn);border:.1rem solid var(--line-2);border-radius:1.6rem;padding:1.1rem 1.4rem 1.1rem 2rem;box-shadow:0 1.6rem 4rem -2rem #000}
.scr-brand{font:900 2.4rem/1 var(--display);font-stretch:condensed;white-space:nowrap;padding-right:2rem;border-right:.1rem solid var(--line-2)}
.scr-brand i{font-style:normal;color:var(--brand)}
.scr-title{flex:1;min-width:0}
.scr-title p{margin:0 0 .3rem;font:800 1.3rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.scr-title h1{margin:0;font:900 3.4rem/1 var(--display);font-stretch:condensed;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-votes{font:700 1.6rem/1 var(--body);color:var(--ink-2);white-space:nowrap}
.scr-votes b{font:900 2.8rem/1 var(--display);color:var(--ink);margin-right:.3rem;font-variant-numeric:tabular-nums}
.scr-status{font:900 1.6rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border:.15rem solid var(--line-2);border-radius:99rem;padding:.9rem 1.4rem}
.scr-status.hot{color:var(--brand);border-color:var(--brand)}
.sm-ring{position:relative;display:grid;place-items:center;width:6.4rem;height:6.4rem;flex:none}
.sm-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sm-ring circle{fill:none;stroke-width:5}.sm-ring .bg{stroke:#ffffff14}.sm-ring .fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:163.4;transition:stroke-dashoffset .2s linear,stroke .3s}
.sm-ring b{font:900 2.6rem/1 var(--display);font-variant-numeric:tabular-nums}
.sm-ring.hot .fg{stroke:var(--guilty)}.sm-ring.hot b{color:var(--guilty);animation:sPulse 1s infinite}

/* main panel and side */
.scr-main{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:center;background:var(--pn);border:.1rem solid var(--line);border-radius:2rem;padding:2.4rem 2.8rem;overflow:hidden}
.scr-main::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff07,transparent 30%)}
.sk{margin:0;font:800 1.4rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.sk::before{content:"";display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:currentColor;margin-right:.7rem;vertical-align:.15em}
.scr-side{display:flex;flex-direction:column;gap:1.6rem;min-height:0}
.scr-join{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--pn);border:.15rem solid var(--brand);border-radius:2rem;padding:1.8rem 1.8rem 1.6rem;box-shadow:0 0 4rem -1rem #FFC94040}
.scr-join p{margin:0 0 1.2rem;font:900 2.1rem/1 var(--display);font-stretch:condensed;text-transform:uppercase;color:var(--brand)}
.scr-qr{width:100%;background:#fff;border-radius:1.2rem;padding:1rem;box-sizing:border-box}
.scr-qr svg{display:block;width:100%;height:auto}
.scr-join b{margin-top:1.1rem;font:800 1.5rem/1.1 var(--display);color:var(--ink-2);word-break:break-all}
.scr-join small{margin-top:.9rem;font:800 1.1rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.scr-code{display:flex;gap:.35rem;margin-top:.6rem}
.scr-code i{font:900 2.4rem/1 var(--display);font-style:normal;background:var(--pn2);border:.1rem solid var(--line-2);border-radius:.6rem;padding:.45rem .2rem;width:2.8rem}
.scr-board{flex:1;min-height:0;background:var(--pn);border:.1rem solid var(--line-2);border-radius:2rem;padding:1.4rem 1.6rem;overflow:hidden}
.scr-board p{margin:0 0 .8rem;font:800 1.3rem var(--display);letter-spacing:.18em;color:var(--brand);text-transform:uppercase}
.scr-board ol{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.scr-board li:nth-child(n+4){display:none}
.scr-board li{display:flex;align-items:center;gap:.8rem;background:var(--pn2);border-radius:.9rem;padding:.6rem .8rem;font:700 1.3rem/1.2 var(--body)}
.scr-board .n{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#ffffff10;font:900 1.3rem var(--display);flex:none}
.scr-board .gold .n{background:#FFC940;color:#1A1405}.scr-board .silver .n{background:#C9D1E0;color:#11151E}.scr-board .bronze .n{background:#D9925A;color:#1A0E05}
.scr-board .a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-board .p{font:900 1.7rem var(--display);color:var(--brand)}

/* hero card (role colour) */
.hc{--rc:var(--brand);position:relative;flex:none}
.hc.role-tank{--rc:#5CB8FF}.hc.role-damage{--rc:#FF6B6B}.hc.role-support{--rc:#4FD8A0}
.hc-img{border-radius:2.2rem;padding:.35rem;background:linear-gradient(155deg,var(--rc),transparent 72%);box-shadow:0 0 4.4rem -1rem color-mix(in srgb,var(--rc) 55%,transparent)}
.hc-img img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:1.9rem;background:#0B0D12}
.hc.xl{width:27rem}.hc.lg{width:19rem}.hc.md{width:11rem}.hc.sm{width:8.6rem}
.hc.md .hc-img,.hc.sm .hc-img{border-radius:1.4rem;padding:.25rem}.hc.md img,.hc.sm img{border-radius:1.2rem}
.hc-role{position:absolute;left:50%;bottom:-1.5rem;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;white-space:nowrap;background:#0B0D12;border:.15rem solid var(--rc);color:var(--rc);border-radius:99rem;padding:.5rem 1.1rem;font:900 1.3rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.hc-role svg{width:1.5rem;height:1.5rem;fill:currentColor}
.hc.md .hc-role{display:none}
.s-name{font:900 5rem/.9 var(--display);font-stretch:condensed;text-transform:uppercase;text-align:center}

/* generic answer bar */
.ob{--tc:var(--brand);display:grid;grid-template-columns:minmax(0,15rem) 1fr 7rem;align-items:center;gap:1.2rem;height:6rem;padding:0 1.4rem;background:var(--pn2);border:.12rem solid var(--line);border-radius:1.2rem;transition:opacity .4s,border-color .4s,transform .4s,box-shadow .4s}
.ob-l{display:flex;align-items:center;gap:.8rem;min-width:0;font:900 2.1rem/1 var(--display);font-stretch:condensed;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-l small{font:700 1.2rem var(--body);color:var(--muted);text-transform:none}
.ob-l .g{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.7rem;background:var(--tc);color:#0B0D12;font:900 2rem/1 var(--display)}
.ob-t{position:relative;height:1.8rem;border-radius:1rem;background:repeating-linear-gradient(135deg,#ffffff06 0 .8rem,transparent .8rem 1.6rem),#0B0D12;overflow:hidden}
.ob-t i{position:absolute;inset:0 auto 0 0;border-radius:1rem;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 50%,transparent),var(--tc));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.ob-t i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff40,transparent) 0 0/200% 100%;animation:sShine 2.4s linear infinite}
.ob > em{font:900 2.6rem/1 var(--display);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.ob.up{--tc:var(--innocent)}.ob.down{--tc:var(--guilty)}
.ob.win{--tc:var(--innocent);border-color:var(--innocent);transform:scale(1.02);animation:sGlow 2s ease-in-out infinite}
.ob.win > em{color:var(--innocent)}
.ob.dim{opacity:.4}
.s-right{margin:.4rem 0 0;font:800 1.7rem var(--display);color:var(--ink-2);text-align:center}
.s-right b{color:var(--innocent);font-size:2.4rem}
.stamp{--rot:-6deg;display:inline-block;font:400 3.4rem/1 "DitMarker","Permanent Marker",cursive;text-transform:uppercase;border:.35rem solid currentColor;border-radius:.9rem;padding:.5rem 1.4rem;transform:rotate(var(--rot));animation:sSlam .5s cubic-bezier(.2,1.3,.4,1) both;background:#0B0D12CC}

/* lobby */
.s-lobby{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.s-lobby h2{margin:0;font:900 7rem/.95 var(--display);font-stretch:condensed;animation:sIn .6s both}
.s-sub{margin:0;font-size:2rem;color:var(--ink-2);max-width:60rem}
.s-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;width:100%;max-width:80rem}
.s-steps li{display:flex;flex-direction:column;align-items:center;gap:.6rem;background:var(--pn2);border:.12rem solid var(--line);border-radius:1.6rem;padding:2rem 1.4rem}
.s-ic{display:grid;place-items:center;width:5.6rem;height:5.6rem;border-radius:50%;background:#FFC9401A;border:.15rem solid #FFC94066;margin-bottom:.4rem}
.s-ic svg{width:2.8rem;height:2.8rem;fill:var(--brand)}
.s-steps b{font:900 2.2rem/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.s-steps small{font-size:1.4rem;color:var(--muted)}
.s-joined{margin:1.6rem 0 0;display:inline-flex;align-items:center;gap:1rem;font:900 2.2rem/1 var(--display);color:var(--innocent);background:#4FD8A014;border:.15rem solid #4FD8A055;border-radius:99rem;padding:1rem 2rem}
.s-joined i{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--innocent);animation:sPulse 1.4s infinite}

/* tier vote */
.s-tier{display:grid;grid-template-columns:27rem 1fr;gap:4rem;align-items:center}
.s-hero{display:flex;flex-direction:column;align-items:center;gap:2.6rem;animation:sIn .6s both}
.tv-board{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.tv-q{margin:0;font:900 3rem/1 var(--display);font-stretch:condensed;text-transform:uppercase;color:var(--ink-2)}
.is-reveal .tv-q{color:var(--brand)}
.tv-rows{display:flex;flex-direction:column;gap:.9rem}
.tv-row{display:grid;grid-template-columns:7.5rem 1fr 8rem;align-items:stretch;height:7.6rem;border-radius:1.2rem;background:var(--pn2);border:.12rem solid var(--line);overflow:hidden;transition:height .5s cubic-bezier(.2,.8,.2,1),opacity .4s,border-color .4s,transform .4s}
.tv-lbl{display:grid;place-items:center;background:var(--tc);color:#0B0D12;font:900 5rem/1 var(--display);transition:font-size .5s}
.tv-track{position:relative;margin:1.4rem;border-radius:.8rem;background:repeating-linear-gradient(135deg,#ffffff06 0 .8rem,transparent .8rem 1.6rem),#0B0D12;overflow:hidden;transition:margin .5s}
.tv-track i{position:absolute;inset:0 auto 0 0;border-radius:.8rem;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 50%,transparent),var(--tc));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.tv-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff40,transparent) 0 0/200% 100%;animation:sShine 2.4s linear infinite}
.tv-row > em{display:grid;place-items:center;font:900 3rem/1 var(--display);font-style:normal;font-variant-numeric:tabular-nums;transition:font-size .5s}
.tv-row.lead{border-color:var(--tc);transform:scale(1.015);animation:sIn .55s both,sGlow 2.2s ease-in-out infinite}
.tv-row.lead > em{color:var(--tc)}
.is-reveal .tv-row{height:4.6rem}.is-reveal .tv-lbl{font-size:3.2rem}.is-reveal .tv-track{margin:.9rem 1.2rem}.is-reveal .tv-row > em{font-size:2.2rem}
.is-reveal .tv-row:not(.lead){opacity:.45}
.tv-verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:.4rem}
.tv-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;border-radius:1.4rem;padding:1rem 1rem 1.2rem;background:color-mix(in srgb,var(--tc) 14%,#11151E);border:.15rem solid color-mix(in srgb,var(--tc) 60%,transparent);animation-delay:calc(var(--i) * 160ms + 200ms)}
.tv-tile span{font:900 1.5rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.tv-tile b{font:900 7.4rem/.9 var(--display);color:var(--tc)}
.tv-tile.none{--tc:#5B6478}.tv-tile.none b{color:var(--muted)}
.tv-tile.chat::after{content:"★";position:absolute;top:.7rem;right:1rem;font-size:1.6rem;color:var(--tc)}
.tv-meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem 2.4rem;margin-top:.6rem;animation:sIn .5s .7s both}
.tv-meter p{grid-column:1;margin:0;font:800 1.4rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.tv-gauge{grid-column:1;position:relative;height:1.6rem;border-radius:1rem;background:linear-gradient(90deg,#4FD8A0,#FFC940 40%,#FFA24C 65%,#FF6B6B)}
.tv-gauge i{position:absolute;top:50%;width:3rem;height:3rem;border-radius:50%;background:#fff;border:.4rem solid #0B0D12;box-shadow:0 0 1.4rem #0008;transform:translate(-50%,-50%);transition:left 1.2s cubic-bezier(.2,1.3,.4,1)}
.tv-meter .stamp{--rot:-4deg;grid-column:2;grid-row:1/3;font-size:2.6rem;animation-delay:1s}
.tv-meter.heat-agree .stamp{color:#4FD8A0}.tv-meter.heat-grumble .stamp{color:#FFC940}.tv-meter.heat-fume .stamp{color:#FFA24C}.tv-meter.heat-mutiny .stamp{color:#FF6B6B}

/* chat vs streamer board */
.tl-board{display:flex;flex-direction:column;gap:.7rem}
.tl-head,.tl-row{display:grid;grid-template-columns:1fr 7rem 1fr;gap:1rem;align-items:center}
.tl-head h3{margin:0;font:900 2.6rem/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.tl-head h3:first-child{text-align:right}
.tl-row{min-height:7.4rem}
.tl-lbl{height:100%;display:grid;place-items:center;border-radius:1rem;background:var(--tc);color:#0B0D12;font:900 4.4rem/1 var(--display)}
.tl-side{height:100%;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;align-content:center;background:var(--pn2);border:.12rem solid var(--line);border-radius:1rem;padding:.6rem .8rem;box-sizing:border-box}
.tl-side.chat{justify-content:flex-end;background:linear-gradient(270deg,color-mix(in srgb,var(--tc) 12%,var(--pn2)),var(--pn2) 70%)}
.tl-side.me{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 12%,var(--pn2)),var(--pn2) 70%)}
.tl-face{animation-name:sPop}
.tl-face img{display:block;width:5.6rem;height:5.6rem;border-radius:.9rem;border:.2rem solid #FF6B6B88}
.tl-face.same img{border-color:#4FD8A0}
.tl-foot{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;margin-top:.8rem;animation:sIn .6s .5s both}
.tl-stat,.tl-fight{display:flex;align-items:center;gap:1.2rem;background:var(--pn2);border:.12rem solid var(--line-2);border-radius:1.2rem;padding:1rem 1.6rem}
.tl-stat b{font:900 4.6rem/1 var(--display);color:#4FD8A0}.tl-stat b small{font-size:2.4rem;color:var(--ink-2)}
.tl-stat span,.tl-fight span{display:block;font:800 1.3rem/1.1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.tl-fight img{width:5.6rem;height:5.6rem;border-radius:.9rem}
.tl-fight > div:first-of-type{flex:1}
.tl-fight b{display:block;font:900 3rem/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.tl-fight.calm b{color:#4FD8A0}
.tl-vs{display:flex;flex-direction:column;align-items:center}.tl-vs i{font:900 4.4rem/1 var(--display);font-style:normal}
.tl-vs small{font:800 1.1rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tl-fight em{font:400 2.4rem "DitMarker",var(--display);color:var(--guilty);font-style:normal}

/* chat poll: pick or ban */
.s-poll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.4rem;align-content:center}
.s-poll.n2{grid-template-columns:repeat(2,minmax(0,26rem));justify-content:center}.s-poll.n3{grid-template-columns:repeat(3,minmax(0,24rem));justify-content:center}
.pc{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;background:var(--pn2);border:.15rem solid var(--line);border-radius:1.6rem;padding:1.6rem 1.4rem 1.4rem;transition:opacity .4s,transform .4s,border-color .4s}
.s-poll.n2 .hc.md,.s-poll.n3 .hc.md{width:15rem}
.pc-n{font:900 2.2rem/1 var(--display);font-stretch:condensed;text-transform:uppercase;text-align:center}
.pc .ob-t{width:100%;height:1.2rem}
.pc > em{font:900 2.6rem/1 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
.pc.lead{border-color:var(--brand)}
.pc.win{--tc:var(--innocent);border-color:var(--innocent);transform:scale(1.06);animation:sIn .5s both,sGlow 2s ease-in-out infinite}
.k-ban .pc.win{--tc:var(--guilty);border-color:var(--guilty)}
.pc.win .ob-t i{--tc:var(--innocent)}.k-ban .pc.win .ob-t i{--tc:var(--guilty)}
.pc.dim{opacity:.35}
.pc-stamp{position:absolute;top:30%;color:var(--innocent);font-size:3rem}.k-ban .pc-stamp{color:var(--guilty)}

/* higher or lower */
.s-hilo{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto auto;gap:1.6rem 2.4rem;align-items:center;height:100%}
.hl{display:flex;flex-direction:column;align-items:center;gap:2rem;animation:sIn .6s both}
.hl.b{animation-delay:.12s}
.hl > b{font:900 3.6rem/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.hl em{font:900 6.4rem/1 var(--display);font-style:normal;color:var(--brand);margin-top:-1rem}
.hl em small{font-size:.5em}
.hl em.q{color:var(--muted);animation:sPulse 1.6s infinite}
.hl em.shown{color:var(--innocent);animation:sPop .6s both}
.hl-vs{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.hl-vs span{display:grid;place-items:center;width:8rem;height:8rem;border-radius:50%;background:var(--brand);color:#1A1405;font:900 3.4rem/1 var(--display);box-shadow:0 0 4rem #FFC94055;animation:sPop .6s .2s both}
.hl-vs p{margin:.6rem 0 0;font:900 2rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.hl-vs small{font-size:1.4rem;color:var(--muted)}
.hl-opts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.s-hilo .s-right{grid-column:1/-1}

/* guess the map */
.s-map{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center;height:100%}
.mp{position:relative;display:flex;flex-direction:column;align-items:center;animation:sIn .6s both}
.mp-photo{position:relative;width:100%;aspect-ratio:16/10;border-radius:1.6rem;overflow:hidden;background:var(--pn2);border:.2rem solid var(--line-2)}
.mp-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter 1.4s}
.mp-c{position:absolute;width:3rem;height:3rem;border:.4rem solid var(--brand);opacity:.9}
.mp-c.tl{left:1.2rem;top:1.2rem;border-right:0;border-bottom:0}.mp-c.tr{right:1.2rem;top:1.2rem;border-left:0;border-bottom:0}
.mp-c.bl{left:1.2rem;bottom:1.2rem;border-right:0;border-top:0}.mp-c.br{right:1.2rem;bottom:1.2rem;border-left:0;border-top:0}
.is-reveal .mp-c{border-color:var(--innocent)}
.mp-lvl{margin-top:-1.6rem;position:relative;font:900 1.8rem var(--display);background:var(--brand);color:#1A1405;border-radius:.8rem;padding:.4rem 1.2rem;text-transform:uppercase;letter-spacing:.08em}
.mp-name{--rot:-3deg;margin-top:-2.4rem;position:relative;color:var(--innocent);font-size:3.4rem}
.mp-opts{display:flex;flex-direction:column;gap:1rem}
.mp-opts .sk{margin-bottom:.4rem}
.mp-opts .ob{grid-template-columns:minmax(0,1fr) 10rem 6rem;height:6.4rem}

/* buff or nerf */
.s-patch{display:flex;flex-direction:column;gap:2rem;justify-content:center;height:100%}
.pt{display:flex;align-items:center;gap:3rem;animation:sIn .6s both}
.pt-tx{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.pt-tx .s-name{text-align:left}
.pt-tx p{margin:0;font:700 1.8rem var(--body);color:var(--ink-2)}
.pt-stamp{align-self:flex-start;margin-top:.6rem}.pt-stamp.up{color:var(--innocent)}.pt-stamp.down{color:var(--guilty)}
.is-reveal .pt .hc.lg{width:13rem}
.pt-opts{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.pt-line{margin:0;font:800 2rem var(--body)}
.scr-changes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.scr-changes .sm-change{gap:1rem;padding:.7rem 1.2rem .7rem .7rem;border-radius:1.1rem;border-left-width:.4rem;animation:sIn .5s both}
.scr-changes .sm-change:nth-child(2){animation-delay:.1s}.scr-changes .sm-change:nth-child(3){animation-delay:.2s}.scr-changes .sm-change:nth-child(4){animation-delay:.3s}
.scr-changes .sm-change .ab-icon{--ab-s:4.8rem}
.scr-changes .sm-change .nm{font-size:1.8rem}.scr-changes .sm-change .st{font-size:1.3rem}.scr-changes .sm-change .kd{font-size:1.3rem}

/* hero pool review */
.s-grade{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;height:100%}
.gp{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;animation:sIn .6s both}
.gp h2{margin:0;font:900 4.6rem/1 var(--display);font-stretch:condensed;color:var(--brand)}
.gp-role{margin:-.4rem 0 .6rem;font:800 1.5rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gp-faces{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.gp-faces span{display:flex;flex-direction:column;align-items:center;gap:.6rem;animation-name:sPop}
.gp-faces b{font:900 1.6rem/1 var(--display);text-transform:uppercase}
.is-reveal .gp-faces .hc.sm{width:6.6rem}
.gp-score{display:flex;align-items:center;gap:2rem;margin-top:1rem;text-align:left;animation:sIn .5s .2s both}
.gp-dial{--v:0;position:relative;display:grid;place-items:center;width:13rem;height:13rem;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--v) * 1%),#ffffff12 0);animation:sPop .7s both}
.gp-dial::before{content:"";position:absolute;inset:1.1rem;border-radius:50%;background:#0F131C}
.gp-dial b{position:relative;font:900 5rem/1 var(--display)}.gp-dial small{position:relative;margin-top:-3rem;font:800 1.4rem var(--display);color:var(--muted)}
.gp-score em{font:900 3.4rem/1 var(--display);font-style:normal;color:var(--brand);text-transform:uppercase}
.gp-score p{margin:.5rem 0 0;font:700 1.4rem var(--body);color:var(--ink-2)}
.gp-stamp{--rot:-5deg;display:inline-block;margin-top:1rem;color:var(--guilty);font-size:2.4rem;line-height:1.05}
.gp-opts{display:flex;flex-direction:column;gap:.8rem}
.gp-opts .sk{margin-bottom:.4rem}
.gp-opts .ob{height:5.2rem;grid-template-columns:minmax(0,17rem) 1fr 6rem}
.gp-opts .ob-l b{font-size:1.9rem}

/* champion */
.s-champ{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem}
.s-champ h2{margin:0;font:900 7rem/1 var(--display);font-stretch:condensed;color:var(--brand);animation:sPop .7s both}
.podium{display:grid;grid-template-columns:repeat(3,22rem);align-items:end;gap:1.4rem;margin-top:1.4rem}
.pod{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.pod i{display:block;width:100%;border-radius:1.2rem 1.2rem 0 0;background:linear-gradient(180deg,#ffffff14,#ffffff05);border:.12rem solid var(--line-2);border-bottom:0}
.pod.p1 i{height:16rem;background:linear-gradient(180deg,#FFC94040,#FFC94008);border-color:#FFC94088}.pod.p2 i{height:11rem}.pod.p3 i{height:8rem}
.pod-m{display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;font:900 2.2rem var(--display);background:#C9D1E0;color:#11151E}
.pod.p1 .pod-m{background:var(--brand);color:#1A1405;width:5.4rem;height:5.4rem;font-size:2.8rem}.pod.p3 .pod-m{background:#D9925A;color:#1A0E05}
.pod b{font:900 2.2rem/1.1 var(--display);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod em{font:800 1.5rem var(--display);font-style:normal;color:var(--muted)}
.s-champ .stamp{color:var(--innocent);margin-top:1rem;animation-delay:.8s}


/* =====================================================================================================
   VIEWER PHONE
   ===================================================================================================== */
body.sm-play{min-height:100vh;background:radial-gradient(120% 60% at 50% -10%,#FFC94022,transparent 60%),var(--bg)}
body.sm-play .sm-toast{bottom:20px}
@keyframes pIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pPop{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes pDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
.pl-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#0E1015E6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pl-brand{color:var(--ink);text-decoration:none}.pl-brand .sm-brand{font-size:17px}
.pl-me{font:800 13px/1.2 var(--display);letter-spacing:.04em;color:var(--brand);text-align:right;background:#FFC94014;border:1px solid #FFC94044;border-radius:99px;padding:6px 12px;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-me:empty{display:none}
.pl{max-width:560px;margin:0 auto;padding:16px;width:100%;box-sizing:border-box;display:grid;gap:14px;align-content:start}
.pl-join{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:22px;display:grid;gap:12px;animation:pIn .4s both}
.pl-join h1{font:900 36px/1 var(--display);font-stretch:condensed;margin:0}
.pl-join p{margin:0;color:var(--ink-2)}
.pl-join input{font:900 34px var(--display);letter-spacing:.3em;text-transform:uppercase;text-align:center;padding:14px;border-radius:var(--r);border:2px solid var(--line-2);background:var(--bg-2);color:var(--ink)}
.pl-join input:focus{outline:none;border-color:var(--brand)}
.pl-join button{justify-content:center;background:var(--brand);color:var(--brand-ink);border:0;font:900 20px var(--display);text-transform:uppercase;padding:15px;border-radius:var(--r)}
#pl-view{display:grid;gap:14px}
.pl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;animation:pIn .4s both}
.pl-card h2{font:900 26px/1.05 var(--display);font-stretch:condensed;margin:0 0 6px}
.pl-card p{margin:0;color:var(--ink-2)}
.pl-kind{margin:0 0 4px!important;font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)!important}
.pl-wait{text-align:center;padding:28px 18px}
.pl-dots{display:inline-flex;gap:6px;margin-bottom:12px}.pl-dots i{width:9px;height:9px;border-radius:50%;background:var(--brand);animation:pDot 1.2s infinite}.pl-dots i:nth-child(2){animation-delay:.15s}.pl-dots i:nth-child(3){animation-delay:.3s}
.pl-you{margin-top:14px!important;font-size:14px}.pl-you b{display:block;margin-top:4px;font:900 22px var(--display);color:var(--brand)}
.pl-q-card{border-color:var(--line-2)}
.pl-q-card.phase-vote{border-color:#FFC94066;box-shadow:0 0 0 1px #FFC94022,0 18px 40px -20px #FFC94040}
.pl-q-card.is-right{border-color:var(--innocent);box-shadow:0 0 0 1px #4FD8A033}
.pl-q-card.is-wrong{border-color:#FF6B6B88}
.pl-q{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pl-question{font:900 23px/1.12 var(--display)!important;font-stretch:normal!important;margin:0!important}
.pl-q .sm-ring{width:56px;height:56px}.pl-q .sm-ring b{font-size:22px}
.pl-closed{flex:none;font:800 12px var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:7px 11px}
.phase-reveal .pl-closed{color:var(--brand);border-color:#FFC94066}
.pl-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-opt{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:800 16px/1.15 var(--body);color:var(--ink);background:var(--surface-2);border:2px solid var(--line-2);border-radius:14px;padding:12px 8px;cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
.pl-opt:active:not(:disabled){transform:scale(.97)}
.pl-opt:disabled{cursor:default}
.pl-opt img{width:56px;height:56px;border-radius:12px}
.pl-opt small{color:var(--muted);font-weight:700;font-size:12px}
.pl-opt.mine{border-color:var(--brand);background:#FFC94022;animation:pPop .25s}
.pl-opt.mine::before{content:"✓";position:absolute;top:6px;right:8px;font:900 15px var(--display);color:var(--brand)}
.pl-opt.right{border-color:var(--innocent);background:#4FD8A022}
.pl-opt.right::before{content:"✓";color:var(--innocent)}
.pl-opt.wrong{border-color:var(--guilty);background:#FF6B6B1A}
.pl-opt.wrong::before{content:"✕";color:var(--guilty)}
.phase-reveal .pl-opt:not(.right):not(.mine){opacity:.45}
.pl-hint{margin-top:12px!important;font-size:14px;color:var(--muted)!important;text-align:center}
.pl-sent{display:flex;align-items:center;gap:8px;margin-top:12px!important;font-size:14px}
.pl-sent i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--innocent);color:#04140D;font:900 12px/1 var(--display);font-style:normal;flex:none}
/* tier */
.pl-hero{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.pl-hero img{width:72px;height:72px;border-radius:16px;border:2px solid var(--brand)}
.pl-hero b{display:block;font:900 30px/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.pl-hero small{font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pl-opts-tier{grid-template-columns:1fr;gap:8px}
.pl-opts-tier .pl-opt{min-height:0;flex-direction:row;justify-content:flex-start;gap:14px;padding:0;overflow:hidden}
.pl-opts-tier .pl-opt span{font:800 17px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pl-tier{display:grid;place-items:center;width:64px;height:54px;background:var(--tc);color:#0B0D12;font:900 32px/1 var(--display)}
.pl-opts-tier .pl-opt.mine{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 20%,var(--surface-2))}
.pl-opts-tier .pl-opt.mine span{color:var(--ink)}
.pl-opts-tier .pl-opt.mine::before{top:50%;right:16px;transform:translateY(-50%);font-size:20px;color:var(--tc)}
/* other kinds */
.pl-opts-hilo .pl-opt,.pl-opts-patch .pl-opt{min-height:110px;font:900 20px var(--display);text-transform:uppercase;letter-spacing:.04em}
.pl-big{font:900 38px/1 var(--display)}
.pl-big.good{color:var(--innocent)}.pl-big.bad{color:var(--guilty)}
.pl-opts-hilo .pl-opt:first-child .pl-big{color:var(--innocent)}.pl-opts-hilo .pl-opt:last-child .pl-big{color:var(--guilty)}
.pl-opts-map{grid-template-columns:1fr}
.pl-opts-map .pl-opt{min-height:58px;align-items:flex-start;padding:12px 16px;font:900 19px var(--display);text-transform:uppercase}
.pl-opts-grade{grid-template-columns:1fr 1fr}
.pl-opts-grade .pl-opt{min-height:62px}
.pl-grade{font:900 16px var(--display);letter-spacing:.04em}
.pl-opts-pick .pl-opt,.pl-opts-ban .pl-opt{min-height:118px}
.pl-opts-pick .pl-opt b,.pl-opts-ban .pl-opt b{font:900 16px var(--display);text-transform:uppercase}
/* results */
.pl-res{margin-top:14px;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.pl-res b{color:var(--innocent)}
.pl-miss{color:var(--guilty);font-weight:800}
.pl-tls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.pl-tl{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:8px 6px;text-align:center;font:800 11px var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.pl-tl .v{margin-top:2px;font:900 32px/1 var(--display)}
.pl-heat{font:900 15px var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--guilty)}
.pl-stamp{display:inline-block;justify-self:start;font:400 18px "DitMarker",cursive;color:var(--guilty);border:2px solid currentColor;border-radius:8px;padding:2px 10px;transform:rotate(-4deg)}
.pl-changes{display:grid;gap:6px;width:100%}
/* leaderboard */
.pl-board-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pl-mine{font:800 13px var(--display);color:var(--innocent)}
.pl-board ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pl-board li{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:8px 10px}
.pl-board .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff10;font:900 13px var(--display);flex:none}
.pl-board .m1 .n{background:#FFC940;color:#1A1405}.pl-board .m2 .n{background:#C9D1E0;color:#11151E}.pl-board .m3 .n{background:#D9925A;color:#1A0E05}
.pl-board .a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pl-board .p{font:900 17px var(--display);color:var(--brand)}
.pl-board li.me{outline:2px solid var(--brand);background:#FFC94014}
/* hero pool form */
.pl-who{display:flex;gap:8px;align-items:baseline;font:900 20px var(--display);color:var(--brand);margin:0 0 8px}.pl-who .r{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pl-faces{display:flex;gap:8px;margin-bottom:12px}.pl-faces img{border-radius:12px;border:2px solid var(--line-2)}
.pl-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:14px 0 10px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:4px}
.pl-roles button{justify-content:center;border:0!important;background:transparent!important;color:var(--ink-2)!important;font:800 14px var(--display)!important;text-transform:uppercase;letter-spacing:.06em;padding:9px!important;border-radius:9px!important}
.pl-roles button[aria-pressed="true"]{background:var(--brand)!important;color:var(--brand-ink)!important}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin:10px 0}
.pl-grid button{position:relative;flex-direction:column;gap:4px;padding:8px 2px!important;font-size:12px!important;border-radius:12px!important}
.pl-grid img{border-radius:9px}
.pl-grid button[aria-pressed="true"]{background:#FFC94022!important;color:var(--ink)!important;border-color:var(--brand)!important}
.pl-grid button[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:6px;font:900 12px var(--display);color:var(--brand)}
.pl-send{position:sticky;bottom:12px;width:100%;justify-content:center;background:var(--brand)!important;color:var(--brand-ink)!important;border:0!important;font:900 18px var(--display)!important;text-transform:uppercase;padding:15px!important;border-radius:14px!important;box-shadow:0 10px 30px -8px #000}
.pl-onair{border-color:var(--brand)!important;background:linear-gradient(160deg,#FFC94022,var(--surface))!important}
.pl-foot{text-align:center;color:var(--muted);font-size:13px;padding:10px 16px 30px}
.pl-foot a{color:var(--ink-2)}


/* =====================================================================================================
   STREAMER CONTROL
   ===================================================================================================== */
.sm-app{max-width:1240px;margin:0 auto;padding:14px var(--gutter) 48px;width:100%;box-sizing:border-box}
.ct{display:grid;gap:16px}
.ct-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0 4px}
.ct-top .sm-brand{font-size:20px;margin-right:6px}
.ct-chip{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--body);color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:99px;padding:8px 13px}
.ct-chip b{font:900 16px/1 var(--display);color:var(--ink);letter-spacing:.06em}
.ct-chip.live b{letter-spacing:.14em}
.ct-chip.ct-online b{color:var(--innocent)}
.ct-grow{flex:1}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--guilty);box-shadow:0 0 0 0 #FF6B6B88;animation:sm-pulse 1.6s infinite}
@keyframes sm-pulse{70%{box-shadow:0 0 0 9px #FF6B6B00}100%{box-shadow:0 0 0 0 #FF6B6B00}}
.ct-cols{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:18px;align-items:start}
.ct-main,.ct-aside{display:grid;gap:16px;min-width:0}
.ct-aside{position:sticky;top:76px}
.ct-card,.ct-live{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px}
.ct-k{margin:0;font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.ct h2{font:900 26px/1.05 var(--display);font-stretch:condensed;margin:4px 0 8px}
.ct .eyebrow{font-size:12px;letter-spacing:.16em}
.ct .hint{font-size:14px}
/* live card */
.ct-live{position:relative;overflow:hidden;background:linear-gradient(160deg,#1B2030,var(--surface) 60%);border-color:var(--line-2)}
.ct-live::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--line-2)}
.ct-live.phase-vote{border-color:#FFC94077;box-shadow:0 20px 50px -30px #FFC94066}.ct-live.phase-vote::before{background:var(--brand)}
.ct-live.phase-reveal::before{background:var(--innocent)}
.ct-live-head{display:flex;align-items:center;gap:12px}
.ct-phase{font:900 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--surface-3);color:var(--ink-2);border-radius:99px;padding:6px 10px}
.phase-vote .ct-phase{background:var(--brand);color:var(--brand-ink)}.phase-reveal .ct-phase{background:var(--innocent);color:#04140D}.phase-closed .ct-phase{background:#FFA24C;color:#1A0E05}
.ct-live-head .ct-k{flex:1}
.ct-live .sm-ring{width:52px;height:52px}.ct-live .sm-ring b{font-size:20px}
.ct-what{display:flex;align-items:center;gap:10px;font:800 19px/1.25 var(--body);margin:14px 0 12px}
.ct-what img{width:44px;height:44px;border-radius:10px}
.ct-empty{font:600 16px var(--body);color:var(--muted)}
.ct-dist{display:grid;gap:6px}
.ct-dist .row{position:relative;display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;background:var(--surface-2);overflow:hidden;font-weight:800}
.ct-dist .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#FFC94022,#FFC94044);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ct-dist b,.ct-dist em{position:relative;font-style:normal}
.ct-dist em{font:900 16px var(--display)}
.ct-total{color:var(--muted);margin:8px 0 0;font-size:14px}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ct-actions button{font-size:16px!important;padding:12px 18px!important}
.ct-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
/* format tabs */
.ct-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ct-tabs button{flex-direction:column;align-items:flex-start!important;gap:4px!important;padding:12px 14px!important;border-radius:14px!important;background:var(--surface)!important;text-align:left}
.ct-tabs b{font:900 18px/1 var(--display);font-stretch:semi-condensed;text-transform:uppercase}
.ct-tabs small{font:600 12px/1.2 var(--body);color:var(--muted)}
.ct-tabs button[aria-selected="true"]{background:linear-gradient(160deg,#FFC94026,var(--surface))!important;border-color:var(--brand)!important;color:var(--ink)!important}
.ct-tabs button[aria-selected="true"] b{color:var(--brand)}
/* panes */
.ct-pane .chips{margin:10px 0}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin:10px 0;max-height:420px;overflow-y:auto;padding:2px}
.ct-grid button{position:relative;flex-direction:column;padding:8px 4px!important;font-size:12px!important;border-radius:12px!important}
.ct-grid img{width:46px;height:46px;border-radius:10px}
.ct-grid span{text-align:center;line-height:1.1}
.ct-grid button[aria-pressed="true"]{background:#FFC94022!important;color:var(--ink)!important;border-color:var(--brand)!important}
.ct-go{justify-content:space-between}
.ct-mine{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:linear-gradient(160deg,#FFC9401A,var(--surface-2));border:1px solid #FFC94077;border-radius:14px;padding:14px;margin:12px 0}
.ct-mine p{margin:0}.ct-mine small{display:block;color:var(--muted)}
.ct-tiers{display:flex;gap:6px}
.ct-tiers button{font:900 24px var(--display)!important;width:50px;height:50px;justify-content:center;padding:0!important;border:2px solid var(--line-2)!important;background:var(--surface)!important;color:var(--tc)!important}
.ct-tiers button[aria-pressed="true"]{background:var(--tc)!important;color:#0B0D12!important;border-color:var(--tc)!important}
.ct-more{margin:14px 0;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.ct-more summary{cursor:pointer;font-weight:800;color:var(--ink-2)}
.ct-list{display:grid;gap:8px;margin:10px 0}
.ct-list .row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.ct-list .row img{width:38px;height:38px;border-radius:9px}
.ct-list .row .grow{flex:1;min-width:0}
.ct-list .row small{color:var(--muted);display:block}
.ct-list .row .t{font-weight:800}.ct-list .row .s{color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:0 8px}.ct-list .row .s b{color:var(--ink)}
.ct-hot{font:900 18px var(--display);color:var(--guilty)}
.ct-check{display:inline-flex;gap:8px;align-items:center;font-weight:700;cursor:pointer}
.ct-check input{width:20px;height:20px;accent-color:var(--brand)}
/* share + settings */
.ct-share-top{display:flex;align-items:center;gap:14px;margin:12px 0}
.ct-qr{width:104px;flex:none;background:#fff;border-radius:12px;padding:7px;box-sizing:border-box}
.ct-qr svg{display:block;width:100%;height:auto}
.ct-code{display:block;font:900 30px/1 var(--display);letter-spacing:.16em;color:var(--brand)}
.ct-share-top small{display:block;margin-top:6px;color:var(--muted);font-size:13px;word-break:break-all}
.ct-msg{display:grid;gap:8px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:12px}
.ct-msg p{margin:0;font-size:13px;color:var(--ink-2)}
.ct-msg code{display:block;font:700 13px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--surface);border:1px dashed var(--line-2);border-radius:9px;padding:9px 10px;word-break:break-all}
.ct-msg button{justify-content:center}
.ct a.btn{text-transform:none;font:800 15px/1.1 var(--body)}
.ct-linkrow{display:flex;align-items:center;gap:8px;margin-top:14px}
.ct-linkrow > div{flex:1;min-width:0}
.ct-linkrow b{display:block;font-size:15px}.ct-linkrow small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.ct-label{margin:14px 0 6px;font:800 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ct-seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:3px}
.ct-seg button{justify-content:center;border:0!important;background:transparent!important;color:var(--ink-2)!important;padding:8px 2px!important;font:800 13px var(--display)!important;border-radius:8px!important}
.ct-seg button[aria-pressed="true"]{background:var(--brand)!important;color:var(--brand-ink)!important}
.ct-help{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.ct-switch{display:flex;align-items:flex-start;gap:12px;margin-top:14px;cursor:pointer;font-weight:700;font-size:14px}
.ct-switch input{position:absolute;opacity:0;pointer-events:none}
.ct-switch > span{position:relative;flex:none;width:42px;height:24px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line-2);transition:background-color .2s}
.ct-switch > span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink-2);transition:transform .2s,background-color .2s}
.ct-switch input:checked + span{background:var(--brand);border-color:var(--brand)}
.ct-switch input:checked + span::after{transform:translateX(18px);background:var(--brand-ink)}
.ct-switch input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.ct-switch small{display:block;font-weight:400;color:var(--muted);font-size:12px;line-height:1.4;margin-top:2px}
@media (max-width:980px){.ct-cols{grid-template-columns:1fr}.ct-aside{position:static}.ct-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ct-seg{grid-template-columns:repeat(3,minmax(0,1fr))}.ct-top .sm-brand{width:100%}}


/* =====================================================================================================
   INTRO PAGE
   ===================================================================================================== */
@keyframes iIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sm-intro{max-width:1180px;margin:0 auto;padding:12px var(--gutter) 40px;width:100%;box-sizing:border-box}
.sm-crumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;margin:6px 0 10px}.sm-crumbs a{color:var(--ink-2)}
.sm-hero{display:grid;grid-template-columns:1fr 1.02fr;gap:44px;align-items:center;padding:18px 0 40px}
.sm-hero-copy{animation:iIn .6s both}
.sm-eyebrow{margin:14px 0 6px;font:800 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.sm-hero h1{font:900 clamp(42px,6vw,76px)/.93 var(--display);font-stretch:condensed;margin:0 0 18px;letter-spacing:-.005em}
.sm-hero h1 i{font-style:normal;color:var(--brand);display:block}
.sm-lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:54ch;margin:0}
.sm-lead b{color:var(--ink)}
.sm-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0 14px}
.sm-start,.sm-continue{display:inline-flex;align-items:center;gap:10px;font:900 19px/1 var(--display);font-stretch:semi-condensed;letter-spacing:.03em;text-transform:uppercase;padding:17px 24px;border-radius:14px;text-decoration:none;transition:transform .15s,box-shadow .2s}
.sm-start{background:var(--brand);color:var(--brand-ink);box-shadow:0 12px 30px -12px #FFC940AA}
.sm-start:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px #FFC940CC}
.sm-continue{border:1px solid var(--line-2);color:var(--ink)}
.sm-how{font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:10px 6px}
.sm-how::after{content:" ↓"}
.sm-note{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:14px;margin:0}
.sm-note span::before{content:"✓ ";color:var(--innocent);font-weight:900}
.t-S{color:#FF6B6B;--tc:#FF6B6B}.t-A{color:#FFA24C;--tc:#FFA24C}.t-B{color:#FFC940;--tc:#FFC940}.t-C{color:#4FD8A0;--tc:#4FD8A0}.t-D{color:#5CB8FF;--tc:#5CB8FF}

/* animated illustration: the tier vote fills, the phone taps A */
@keyframes mkR0{0%,8%{width:4%}40%,100%{width:30%}}
@keyframes mkR1{0%,8%{width:4%}45%,100%{width:88%}}
@keyframes mkR2{0%,8%{width:4%}50%,100%{width:42%}}
@keyframes mkR3{0%,8%{width:4%}38%,100%{width:16%}}
@keyframes mkR4{0%,8%{width:2%}30%,100%{width:6%}}
@keyframes mkLead{0%,48%{border-color:var(--line);box-shadow:none}55%,100%{border-color:var(--tc);box-shadow:0 0 14px color-mix(in srgb,var(--tc) 40%,transparent)}}
@keyframes mkRing{from{stroke-dashoffset:0}to{stroke-dashoffset:163}}
@keyframes mkTap{0%,14%{opacity:0;transform:scale(.3)}18%{opacity:.9;transform:scale(.6)}30%,100%{opacity:0;transform:scale(1.6)}}
@keyframes mkOn{0%,16%{border-color:var(--line-2);background:var(--surface-2)}20%,100%{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 25%,var(--surface-2))}}
@keyframes mkFloat{50%{transform:translateY(-8px)}}
.sm-mock{position:relative;padding:0 46px 58px 0;animation:iIn .7s .15s both}
.sm-mock-screen{aspect-ratio:16/9;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:radial-gradient(ellipse at 85% 0%,#FFC94026,transparent 55%),#0B0D12;box-shadow:0 40px 80px -40px #000,0 0 0 6px #ffffff06;overflow:hidden}
.mk-top{display:flex;align-items:center;gap:12px;background:#11151E;border:1px solid var(--line);border-radius:10px;padding:7px 8px 7px 10px}
.mk-brand{font:900 12px/1 var(--display);font-stretch:condensed}.mk-brand i{font-style:normal;color:var(--brand)}
.mk-top b{flex:1;font:900 16px/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.mk-join{display:flex;align-items:center;gap:6px;border:1px solid var(--brand);border-radius:7px;padding:3px 7px 3px 3px}
.mk-qr{width:26px;height:26px;background:#fff;border-radius:3px;fill:#0B0D12}
.mk-join small{font:800 9px/1 var(--display);color:var(--ink-2)}.mk-join em{font-style:normal;color:var(--brand)}
.mk-timer svg{display:block;width:26px;height:26px;transform:rotate(-90deg)}
.mk-timer circle{fill:none;stroke:var(--brand);stroke-width:6;stroke-dasharray:163;animation:mkRing 6s linear infinite}
.mk-body{flex:1;min-height:0;display:grid;grid-template-columns:30% 1fr;gap:14px;align-items:center;padding-right:24%}
.mk-hero{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mk-hero img{width:100%;aspect-ratio:1;height:auto;border-radius:12px;border:2px solid #4FD8A0;box-shadow:0 0 22px #4FD8A033}
.mk-hero span{margin-top:-12px;background:#0B0D12;border:1px solid #4FD8A0;color:#4FD8A0;border-radius:99px;padding:2px 7px;font:900 8px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.mk-hero b{font:900 20px/1 var(--display);font-stretch:condensed;text-transform:uppercase}
.mk-rows{display:flex;flex-direction:column;gap:5px;min-width:0}
.mk-row{display:grid;grid-template-columns:24px 1fr;align-items:center;height:22px;border-radius:5px;background:#151A24;border:1px solid var(--line);overflow:hidden}
.mk-row b{height:100%;display:grid;place-items:center;background:var(--tc);color:#0B0D12;font:900 14px/1 var(--display)}
.mk-row span{margin:0 7px;height:9px;border-radius:3px;background:#0B0D12;overflow:hidden}
.mk-row span i{display:block;height:100%;width:4%;background:var(--tc);animation:mkR0 6s cubic-bezier(.2,.8,.2,1) infinite}
.mk-row.r1 span i{animation-name:mkR1}.mk-row.r2 span i{animation-name:mkR2}.mk-row.r3 span i{animation-name:mkR3}.mk-row.r4 span i{animation-name:mkR4}
.mk-row.r1{animation:mkLead 6s infinite}
.sm-mock-phone{position:absolute;right:0;bottom:0;width:132px;display:flex;flex-direction:column;gap:5px;background:#0B0D12;border:3px solid var(--line-2);border-radius:24px;padding:14px 9px 12px;box-shadow:0 24px 50px -10px #000C;animation:mkFloat 6s ease-in-out infinite}
.sm-mock-phone p{margin:0 0 2px;font-size:10px;font-weight:800;color:var(--brand);text-align:center}
.mk-ph{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.mk-ph img{width:26px;height:26px;border-radius:6px;border:1px solid var(--brand)}
.mk-ph b{font:900 14px/1 var(--display);text-transform:uppercase}
.sm-mock-phone span{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line-2)}
.sm-mock-phone span b{width:26px;display:grid;place-items:center;background:var(--tc);color:#0B0D12;font:900 12px/1 var(--display)}
.sm-mock-phone span.on{animation:mkOn 6s infinite}
.mk-tap{position:absolute;left:58%;top:94px;width:30px;height:30px;border-radius:50%;background:#ffffffaa;pointer-events:none;animation:mkTap 6s infinite}
@media (prefers-reduced-motion:reduce){.sm-mock *,.sm-mock-phone{animation:none!important}.mk-row span i{width:40%}}

/* sections */
.sm-sec{padding:44px 0;border-top:1px solid var(--line)}
.sm-kicker{margin:0;font:800 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.sm-sec h2,.sm-band h2{font:900 clamp(30px,4.4vw,46px)/.98 var(--display);font-stretch:condensed;margin:8px 0 12px}
.sm-intro-p{max-width:70ch;color:var(--ink-2);font-size:17px;line-height:1.55;margin:0 0 22px}
.sm-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sm-why article{background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-xl);padding:20px}
.sm-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#FFC9401A;border:1px solid #FFC94055;margin-bottom:14px}
.sm-ic svg{width:21px;height:21px;fill:var(--brand)}
.sm-why h3{font:900 20px/1.05 var(--display);font-stretch:condensed;text-transform:uppercase;margin:0 0 6px}
.sm-why p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.sm-feats{display:grid;gap:16px;margin-top:10px}
.sm-feat{--tone:var(--brand);display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px 26px;position:relative;overflow:hidden}
.sm-feat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tone)}
.sm-feat.tone-carry{--tone:var(--carry,#5CB8FF)}.sm-feat.tone-innocent{--tone:var(--innocent)}
.sm-tag{display:inline-block;font:800 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tone);border:1px solid color-mix(in srgb,var(--tone) 45%,transparent);border-radius:99px;padding:6px 10px}
.sm-feat h3{font:900 28px/1.02 var(--display);font-stretch:condensed;margin:12px 0 8px}
.sm-feat p{margin:0;color:var(--ink-2);line-height:1.55}
.sm-feat-art{position:relative;min-height:150px;display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tone) 14%,transparent),transparent 70%),var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:18px}
.art-tier > div{display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:8px 0 10px;border-radius:12px;background:color-mix(in srgb,var(--tc) 14%,#11151E);border:1px solid color-mix(in srgb,var(--tc) 55%,transparent)}
.art-tier small{font:800 10px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.art-tier b{font:900 44px/1 var(--display);color:var(--tc)}
.art-stamp{position:absolute;right:12px;bottom:10px;font:400 17px/1 "DitMarker",cursive;text-transform:uppercase;color:#FFA24C;border:2px solid currentColor;border-radius:7px;padding:3px 8px;transform:rotate(-5deg);background:#0B0D12}
.art-pool{flex-direction:column}
.art-pool .faces{display:flex;gap:8px}.art-pool .faces img{width:52px;height:52px;border-radius:12px;border:2px solid var(--line-2)}
.art-pool .dial{display:flex;align-items:baseline;gap:2px}.art-pool .dial b{font:900 40px/1 var(--display);color:var(--carry,#5CB8FF)}.art-pool .dial small{color:var(--muted);font-weight:800}
.art-pool .art-stamp{color:var(--innocent)}
.art-quiz{gap:14px}
.art-quiz{flex-wrap:wrap}
.art-quiz .hl{display:flex;flex-direction:column;align-items:center;gap:4px}.art-quiz .hl img{width:58px;height:58px;border-radius:12px;border:2px solid #4FD8A0}.art-quiz .hl b{font:900 20px/1 var(--display);color:var(--brand)}
.art-quiz .vs{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font:900 13px var(--display)}
.art-quiz .opts{display:flex;gap:6px;width:100%;justify-content:center}
.art-quiz .opts span{font:900 13px var(--display);text-transform:uppercase;background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:6px 9px}
.art-quiz .opts .up{border-color:var(--innocent);color:var(--innocent)}.art-quiz .opts .down{color:var(--guilty)}

/* phone viewers band */
.sm-band{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;margin:8px 0 6px;padding:30px;border-radius:24px;background:radial-gradient(ellipse at 100% 0%,#5CB8FF1F,transparent 60%),linear-gradient(170deg,#161B28,var(--surface));border:1px solid var(--line-2)}
.sm-band p{color:var(--ink-2);line-height:1.55}
.sm-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.sm-checks li{position:relative;padding-left:32px;color:var(--ink-2);line-height:1.5}
.sm-checks li::before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--innocent);color:#04140D;font:900 13px/1 var(--display)}
.sm-checks b{color:var(--ink)}
.sm-band-art .chat{display:grid;gap:8px;background:#0B0D12;border:1px solid var(--line-2);border-radius:18px;padding:16px;font-size:14px;line-height:1.4;box-shadow:0 30px 60px -30px #000}
.sm-band-art .chat p{margin:0;color:var(--ink-2)}
.sm-band-art .chat p:nth-child(2){background:#FFC94014;border:1px solid #FFC94055;border-radius:10px;padding:8px 10px;color:var(--ink)}
.sm-band-art .u1{color:#5CB8FF}.sm-band-art .u2{color:var(--brand)}.sm-band-art .u3{color:#FF6B6B}

/* steps */
.sm-steps ol{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.sm-steps ol::before{content:"";position:absolute;left:18px;right:18px;top:18px;height:2px;background:linear-gradient(90deg,var(--brand),#FFC94022)}
.sm-steps li{position:relative}
.sm-dot{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font:900 19px var(--display);box-shadow:0 0 0 6px var(--bg)}
.sm-steps h3{font:900 21px/1.1 var(--display);text-transform:uppercase;margin:14px 0 6px}
.sm-steps p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.sm-start-2{margin-top:26px}
/* faq */
.sm-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.sm-faq-grid details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 18px;transition:border-color .2s}
.sm-faq-grid details[open]{border-color:var(--line-2)}
.sm-faq-grid summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.sm-faq-grid summary::-webkit-details-marker{display:none}
.sm-faq-grid summary::after{content:"+";font:900 22px/1 var(--display);color:var(--brand);transition:transform .2s}
.sm-faq-grid details[open] summary::after{transform:rotate(45deg)}
.sm-faq-grid summary h3{display:inline;font:800 17px/1.3 var(--body);margin:0}
.sm-faq-grid p{color:var(--ink-2);margin:10px 0 0;line-height:1.55}
.sm-review{color:var(--muted);font-size:13px;margin-top:24px}
.sm-footer{text-align:center;color:var(--muted);font:800 13px/1 var(--display);letter-spacing:.1em;padding:22px 16px calc(var(--tabbar-h) + 22px)}
.sm-footer a{color:var(--ink-2)}
@media (max-width:980px){.sm-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.sm-hero{grid-template-columns:1fr;gap:28px}.sm-feat,.sm-band{grid-template-columns:1fr}.sm-steps ol{grid-template-columns:1fr 1fr}.sm-steps ol::before{display:none}.sm-faq-grid{grid-template-columns:1fr}}
@media (max-width:520px){.sm-why,.sm-steps ol{grid-template-columns:1fr}.sm-mock{padding:0 22px 74px 0}.mk-brand,.mk-join{display:none}.mk-body{padding-right:20%}.sm-mock-phone{width:104px;padding:10px 7px}.mk-row{height:17px}.mk-hero b{font-size:15px}.mk-tap{top:76px}.sm-band{padding:20px}.sm-feat{padding:20px}}