/* Earlibird Video Styles: showcase page. Dark, neutral UI; yellow only for brand moments. */
:root{--page:#0E0F11;--panel:#15161A;--panel2:#1B1C21;--line:#26272B;--line2:#34353A;--mute:#9A9B96;--bone:#F4F1EA;--y:#F3D053;
 --r:16px;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--bone);font:16px/1.55 var(--sans);overflow-x:hidden}
img,video{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:700px){.wrap{padding-left:28px;padding-right:28px}}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-left));
 background:rgba(14,15,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--bone)}
.brand img{display:block;height:26px;width:auto}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;font-weight:600;font-size:14px;color:#cfcdc6;padding:7px 10px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--panel2);color:#fff}
@media (max-width:520px){.brand img{height:22px}.nav a{padding:6px 8px;font-size:13px}}

/* hero */
.hero{padding-top:56px;padding-bottom:12px}
.eyebrow{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--y);margin-right:8px;vertical-align:1px}
h1{font:400 clamp(44px,8vw,84px)/1 var(--serif);letter-spacing:-.01em;margin:14px 0 14px}
h1 i{font-style:italic}
.lede{color:#c9c7c0;max-width:720px;font-size:clamp(16px,2vw,18.5px);margin:0}
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:600 14px var(--sans);color:var(--mute)}
.stats b{color:var(--bone);font-weight:800}

/* sections */
.block{padding-top:64px}
.head h2{font:800 clamp(26px,3.4vw,34px)/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 6px}
.head p{color:var(--mute);margin:0 0 20px;max-width:760px}

/* chips + buttons */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;color:#dedcd5;line-height:1.2}
.chip:hover{border-color:#55565c}
.chip[aria-pressed="true"]{background:var(--bone);color:#111;border-color:var(--bone)}
.chip.ghost{background:transparent}
.linkbtn{background:none;border:0;padding:6px 4px;color:var(--mute);font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--bone)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--bone);color:#111;border:0;border-radius:999px;padding:10px 18px;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{background:#fff}
.btn.sm{padding:8px 14px;font-size:14px}

/* picker */
.picker{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.plab{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);width:64px;flex:0 0 auto}
@media (max-width:560px){.plab{width:100%}}
.count{color:var(--mute);font-size:14px;margin:14px 0 12px}

/* format grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}
.card:hover{border-color:#4a4b51;transform:translateY(-2px)}
.card.dim{display:none}
.thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb.tall img,.thumb.tall video{object-fit:contain;background:#0a0a0b}
.thumb .play{position:absolute;left:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(14,15,17,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:13px;padding-left:2px}
.thumb .snd{position:absolute;right:10px;top:10px;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:99px;background:rgba(14,15,17,.75);border:1px solid rgba(255,255,255,.18)}
.cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.cname{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cname h3{font:800 19px/1.15 var(--sans);margin:0;letter-spacing:-.01em}
.star{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:#77787d;padding:4px;margin:-4px}
.star[aria-pressed="true"]{color:var(--y)}
.cline{color:#c3c1ba;font-size:14.5px;margin:0;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font:600 11px/1 var(--mono);letter-spacing:.06em;color:#bdbbb4;border:1px solid var(--line2);border-radius:6px;padding:5px 7px}

/* modal */
dialog{border:0;padding:0;background:transparent;color:var(--bone);max-width:min(1100px,100vw - 24px);width:100%;max-height:calc(100dvh - 24px)}
dialog::backdrop{background:rgba(5,5,6,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mwrap{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--line2);border-radius:20px;overflow:hidden;max-height:calc(100dvh - 24px)}
.mwrap.tall{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.mwrap,.mwrap.tall{grid-template-columns:1fr;overflow:auto}}
.mvid{background:#000;display:flex;align-items:center;justify-content:center;min-height:200px}
.mvid video{display:block;width:100%;max-height:calc(100dvh - 24px);background:#000}
.mwrap.tall .mvid video{max-height:min(78dvh,760px);width:auto;max-width:100%}
@media (max-width:820px){.mwrap.tall .mvid video{max-height:62dvh}}
.mbody{padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.mbody h3{font:800 28px/1.1 var(--sans);margin:0;letter-spacing:-.02em}
.mline{margin:0;color:#d6d4cd}
.mdl{margin:4px 0 0;display:grid;gap:4px}
.mdl dt{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.mdl dd{margin:0;color:#d6d4cd}
.mnote{margin:4px 0 0;font-size:13.5px;color:var(--mute);border-left:2px solid var(--line2);padding-left:10px}
.mact{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mnav{display:flex;justify-content:space-between;margin-top:auto;padding-top:8px}
.x{position:absolute;right:10px;top:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(14,15,17,.7);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* tray + toast */
.tray{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;
 background:rgba(27,28,33,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:999px;padding:8px 10px 8px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);white-space:nowrap;font-weight:700;font-size:14px}
.tray[hidden],[hidden]{display:none!important}
.toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-20px);opacity:0;z-index:60;background:var(--bone);color:#111;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* effects */
.fx{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.fx.tall{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
@media (max-width:860px){.fx,.fx.tall{grid-template-columns:1fr}}
.fxv{background:#000;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.fxv video{display:block;width:100%;max-height:78vh;margin:auto}
.fxl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;max-height:min(78vh,720px)}
@media (max-width:860px){.fxl{max-height:420px}}
.fxl input{width:100%;background:#0f1013;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--bone);font:500 15px var(--sans)}
.fxl ol{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.fxl li button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;font-size:14px;font-weight:600;color:#d4d2cb}
.fxl li button:hover{background:var(--panel2)}
.fxl li button.cur{background:var(--panel2);color:#fff;box-shadow:inset 2px 0 0 var(--bone)}
.fxl .n{font:700 11px var(--mono);color:var(--mute);min-width:22px}
.fxl .t{margin-left:auto;font:500 11.5px var(--mono);color:var(--mute)}
.fxl .empty{color:var(--mute);font-size:14px;padding:8px 10px}

/* start here */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);font:700 13px var(--mono)}
.step h3{margin:12px 0 4px;font:800 19px/1.2 var(--sans)}.step p{margin:0;color:#c3c1ba;font-size:15px}
.cta{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line2);border-radius:var(--r);padding:20px 22px;
 background:radial-gradient(60% 120% at 0% 0%,rgba(243,208,83,.14),transparent 60%),var(--panel)}
.cta h3{margin:0 0 2px;font:400 30px/1.1 var(--serif)}.cta p{margin:0;color:#c3c1ba}
.own{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;border:1px solid var(--line2);border-radius:var(--r);padding:22px;background:var(--panel)}
@media (max-width:820px){.own{grid-template-columns:1fr}}
.own h3{margin:10px 0 6px;font:800 22px/1.2 var(--sans)}.own p{margin:0;color:#c3c1ba}
.own-steps{margin:12px 0 16px;padding-left:20px;color:#d6d4cd}.own-steps li{margin:4px 0}
.own-kit{margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--line2);font-size:14.5px}
.own-kit b{color:var(--bone)}.own-kit a{color:var(--bone);text-underline-offset:3px}
.own-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.own-r{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.own pre{margin:0;width:100%;white-space:pre-wrap;background:#0f1013;border:1px solid var(--line2);border-radius:12px;padding:14px;font:500 13px/1.6 var(--mono);color:#dedcd5}
.brand .txt{font:800 20px/1 var(--sans);letter-spacing:-.01em;text-decoration:none}
.foot{padding-top:48px;padding-bottom:110px;color:var(--mute);font-size:13.5px;border-top:1px solid var(--line);margin-top:64px}

/* ── skins (ported from the studio's skin gallery) ── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.tab{background:var(--panel);color:var(--bone);border:1px solid var(--line2);border-radius:999px;padding:7px 14px;font:600 14px var(--sans);cursor:pointer}
.tab[aria-selected="true"]{background:var(--bone);color:#111;border-color:var(--bone)}
.over{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;margin-bottom:10px}
.ocard{flex:0 0 auto;scroll-snap-align:start;cursor:pointer;display:flex;flex-direction:column;gap:8px;width:170px;background:none;border:0;padding:0;text-align:left}
.ocard .nm{font:800 15px/1.1 var(--sans)}.ocard .ib{font-size:12px;color:var(--mute);line-height:1.3}
.ocard.sel .phone{box-shadow:0 0 0 2px var(--bone),0 20px 50px rgba(0,0,0,.5)}
.phone{position:relative;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;container-type:inline-size;box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.45);isolation:isolate}
.phone>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.L{position:absolute;inset:0;pointer-events:none}
.scrim{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));display:none}
.cap-karaoke .scrim{display:block}
.mk{position:absolute;top:6.5%;left:6%;font:700 2.7cqw/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--text);opacity:.8}
.mk::before{content:"";display:inline-block;width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--acc);margin-right:2cqw;vertical-align:.2cqw}
.big{position:absolute;left:0;right:0;top:9%;text-align:center;line-height:1;white-space:nowrap}
.big-serif .big{font:400 37cqw/1 var(--fs);color:var(--text);letter-spacing:-.02em}
.big-head .big{font:900 27cqw/1 var(--fs);color:#fff;text-transform:uppercase}
.big-condensed .big{font:400 44cqw/1 var(--fs);text-transform:uppercase;background:linear-gradient(180deg,#fff,#c9c9c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.big-chrome .big{font:700 30cqw/1 var(--fs);text-transform:uppercase;background:linear-gradient(180deg,#fff 0%,#9a9da3 55%,#f2f2f2 70%,#7d8086 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.big .p{color:var(--acc);-webkit-text-fill-color:var(--acc)}
.cap{position:absolute;left:50%;top:var(--capy);transform:translate(-50%,-50%);white-space:nowrap;font:var(--fcw) 5.9cqw/1.15 var(--fc)}
.cap .dot{color:var(--acc)}
.cap-pill .cap{background:var(--glass);backdrop-filter:blur(4cqw);-webkit-backdrop-filter:blur(4cqw);border:1px solid var(--rim);border-radius:3.7cqw;padding:1.8cqw 3.7cqw;color:var(--dim)}
.cap-pill .cap .on{color:var(--text)}.cap-pill .cap .key.on{color:var(--acc)}
.cap-box .cap{background:var(--raise);border-radius:1.2cqw;padding:1.2cqw 3.2cqw 1.6cqw;color:var(--dim);font-size:7.2cqw}
.cap-box .cap .on{color:var(--text)}.cap-box .cap .key.on{color:var(--acc)}
.cap-upper .cap{text-transform:uppercase;font-size:6.3cqw;color:#fff;text-shadow:0 .6cqw 0 #000,0 0 2.5cqw rgba(0,0,0,.6)}.cap-upper .cap .key.on{color:var(--acc)}
.cap-wordbox .cap{color:#fff;text-shadow:0 .5cqw 2cqw rgba(0,0,0,.45);font-size:6.6cqw}.cap-wordbox .cap span{padding:.05em .22em;border-radius:.28em}
.cap-wordbox .cap .cur{background:var(--acc);color:var(--acc-text);text-shadow:none}
.cap-karaoke .cap{color:#fff;font-size:6.6cqw}.cap-karaoke .cap .cur{color:var(--acc)}
.cap-blur .cap{color:#fff;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.4)}.cap-blur .cap .w{display:inline-block;opacity:0;filter:blur(1.8cqw);transform:translateY(1.4cqw);transition:opacity .16s,filter .16s,transform .16s}
.cap-blur .cap .w.on{opacity:1;filter:blur(0);transform:none}.cap-blur .cap .key.on{color:var(--acc)}
.cap-keyword .cap{color:#fff;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.5)}.cap-keyword .cap .key{color:var(--acc)}
.cap .ts{position:absolute;left:50%;top:-6cqw;transform:translateX(-50%);font:500 2.6cqw/1 var(--mono);color:var(--acc);letter-spacing:.08em;display:none}
.cap-keyword .cap .ts{display:block}.pcap .ts{display:none}
.hl{position:absolute;left:6%;right:6%;top:11%}
.hl .l1{font:var(--fhw) 10.5cqw/1 var(--fh);text-transform:var(--fhc);color:var(--text);letter-spacing:-.02em;transform-origin:0 100%}
.hl .l2w{overflow:hidden;margin-top:1.2cqw;padding-bottom:1cqw}.hl .l2{font:400 italic 12.3cqw/1.05 var(--fs);color:var(--text)}
.hl .mark{position:relative;white-space:nowrap;color:var(--acc)}.hl .mark b{position:absolute;left:0;right:0;bottom:-.3cqw;height:.9cqw;border-radius:1cqw;background:var(--acc);transform-origin:0 50%}
.hl .dot{color:var(--acc)}
.hl-sticker .hl .l1{font-size:9.6cqw}.hl-sticker .hl .l2{font:900 9.2cqw/1 var(--fh);text-transform:uppercase}
.hl-sticker .hl .l2w{overflow:visible}.hl-sticker .hl .mark{display:inline-block;background:var(--acc);color:var(--acc-text);padding:.06em .3em;transform:rotate(-4deg)}
.hl-sticker .hl .mark b,.hl-sticker .hl .dot{display:none}
.hl-plate .hl .l1{display:inline-block;background:var(--raise);padding:.08em .22em .04em;font-size:9.6cqw}.hl-plate .hl .l2{color:var(--acc)}.hl-plate .hl .mark b{display:none}
.hl-glass .hl{background:var(--glass);backdrop-filter:blur(5cqw);-webkit-backdrop-filter:blur(5cqw);border:1px solid var(--rim);border-radius:5cqw;padding:4.5cqw 5cqw;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.hl-glass .hl .l1{font-size:8.6cqw;letter-spacing:-.01em}.hl-glass .hl .l2{font:600 6.6cqw/1.15 var(--fh);color:var(--dim)}.hl-glass .hl .mark b{display:none}
.hl-twotone .hl .l1{font-size:8.6cqw}.hl-twotone .hl .l2{font:var(--fhw) 8.6cqw/1.05 var(--fh)}.hl-twotone .hl .mark b{display:none}
.hl-clean .hl{text-align:center}.hl-clean .hl .l1,.hl-clean .hl .l2{font:var(--fhw) 8.6cqw/1.1 var(--fh)}.hl-clean .hl .l2w{overflow:visible}
.hl-clean .hl .mark{color:var(--acc-text)}.hl-clean .hl .mark b{height:96%;bottom:-.2cqw;left:-1.2cqw;right:-1.2cqw;z-index:-1;border-radius:1.2cqw}.hl-clean .hl .l2{position:relative;z-index:0}
.hl-chrome .hl .l1{font-size:12cqw;background:linear-gradient(180deg,#fff 0%,#9a9da3 55%,#f2f2f2 70%,#7d8086 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-chrome .hl .l2{font:500 4.2cqw/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}.hl-chrome .hl .mark b{display:none}
.stat{position:absolute;left:50%;top:47%;width:62%;transform:translateX(-50%);padding:4.3cqw 5cqw;border-radius:6cqw;color:var(--text)}
.stat .lab{font:700 2.8cqw/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:2cqw}
.stat .lab::before{content:"";display:inline-block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--acc);margin-right:1.6cqw;vertical-align:.1cqw}
.stat .n{font:800 14cqw/1 var(--fh);letter-spacing:-.03em}.stat .u{font:400 italic 8cqw var(--fs);color:var(--acc);margin-left:1.2cqw}
.card-glass .stat{background:var(--glass);backdrop-filter:blur(5cqw);-webkit-backdrop-filter:blur(5cqw);border:1px solid var(--rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.card-solid .stat{background:var(--raise);border-radius:1.5cqw}
.card-sticker .stat{background:var(--acc);color:var(--acc-text);border-radius:0}.card-sticker .stat .lab{color:rgba(0,0,0,.6)}.card-sticker .stat .lab::before{background:#000}
.card-sticker .stat .u{font:900 7cqw Poppins;color:var(--acc-text)}
.card-pill .stat{background:var(--raise);border-radius:99cqw;padding:3.2cqw 6cqw;width:auto;white-space:nowrap;text-align:center}.card-pill .stat .n{font-size:11cqw}.card-pill .stat .u{font:600 6cqw var(--fh);color:var(--acc)}
.card-outline .stat{background:var(--glass);border:1px solid var(--acc);border-radius:0}.card-outline .stat .n{font:500 12cqw/1 var(--mono)}.card-outline .stat .u{font:500 5cqw var(--mono);color:var(--acc)}
.detail{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}.detail .dphone{max-width:300px;width:100%;margin:0 auto}}
.info h3{font:800 28px/1.1 var(--sans);margin:0}.info .ib{color:var(--mute);margin:4px 0 10px}.info p{margin:0 0 12px;color:#dcdad3}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.sw{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.sw div{width:76px}.sw span{display:block;height:42px;border-radius:9px;border:1px solid rgba(255,255,255,.1)}
.sw small{display:block;font:500 10.5px/1.3 var(--mono);color:var(--mute);margin-top:4px;word-break:break-all}
.spec .a{font-size:30px;line-height:1.05;overflow-wrap:anywhere}.spec .b{font-size:13px;color:var(--mute);margin:2px 0 10px}
.fonts{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.fonts label{font-size:12.5px;color:var(--mute);display:flex;flex-direction:column;gap:4px}
select{background:#0f1013;color:var(--bone);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px;max-width:100%}
.info ul{margin:6px 0 0;padding-left:18px;color:#d6d4cd}.info li{margin:3px 0}
.pick{margin-top:4px}
.stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin-top:22px;container-type:inline-size;isolation:isolate;
 background:var(--sbg);color:var(--stext);box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.45)}
.s{position:absolute}
.pk{left:5.4%;top:8%;font:700 1.15cqw/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--sdim)}
.pk::before{content:"";display:inline-block;width:.7cqw;height:.7cqw;border-radius:50%;background:var(--acc);margin-right:.8cqw;vertical-align:.1cqw}
.ph{left:5.4%;top:13%;width:44%;font:var(--fhw) 4.2cqw/1.06 var(--fh);text-transform:var(--fhc);letter-spacing:-.02em;isolation:isolate}
.ph .mark{position:relative;white-space:nowrap}.ph .mark b{position:absolute;left:-.3cqw;right:-.3cqw;bottom:.35cqw;height:42%;background:var(--shl);z-index:-1;transform-origin:0 50%}
.ph .dot{color:var(--acc)}.stage.dark .ph .mark{color:var(--acc)}.stage.dark .ph .mark b{height:.3cqw;bottom:-.2cqw;z-index:0}
.spk{left:50%;top:0;width:50%;height:100%;overflow:hidden;background:#111}.spk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .32cqw var(--ring);opacity:0}
.win{left:31%;top:25%;width:62%;border-radius:1.1cqw;overflow:hidden;background:#fff;box-shadow:0 2.4cqw 6cqw rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08)}
.win .bar{height:2.2cqw;display:flex;align-items:center;gap:.5cqw;padding:0 1cqw;background:#f1f0ec;border-bottom:1px solid rgba(0,0,0,.07)}.win .bar i{width:.8cqw;height:.8cqw;border-radius:50%;background:#d8d6cf;display:block}
.win img{display:block;width:100%}
.chip2{left:75%;top:58%;padding:1cqw 1.4cqw;border-radius:1.6cqw;background:var(--scard);color:var(--scardt);border:var(--scardb);box-shadow:var(--scards);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:800 2.6cqw/1 var(--fh)}
.chip2 .lab{font:700 .9cqw/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:.5cqw}
.note{left:7%;top:61%;font:600 2.1cqw/1.1 Caveat;color:var(--sdim);transform:rotate(-3deg)}
.pcap{left:0;right:0;bottom:6.5%;text-align:center;font:var(--fcw) 2.3cqw/1 var(--fc);color:var(--sdim);isolation:isolate}
.pcap .on{color:var(--stext)}.pcap .key{position:relative}.pcap .key b{position:absolute;left:-.25cqw;right:-.25cqw;bottom:.1cqw;height:45%;background:var(--shl);z-index:-1;transform-origin:0 50%}
.stage.dark .pcap .key.on{color:var(--acc)}.stage.dark .pcap .key b{display:none}.pcap .dot{color:var(--acc)}
.stagecap{color:var(--mute);font-size:13.5px;margin:10px 0 0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.toast{transition:none}}