/* Scope hero. The console is a dark physical object in both themes; its card pins itself to the dark palette. */
.sc-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:8px;padding:28px 0 36px}
@media(min-width:920px){.sc-hero{grid-template-columns:min(540px,44%) minmax(0,1fr);gap:40px;min-height:min(820px,calc(100svh - 66px));padding:20px 0 40px}}
.sc-gl{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);pointer-events:none;z-index:0}
.sc-ui{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);pointer-events:none;z-index:2}
.sc-copy{position:relative;z-index:1}
.sc-slot{position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:center;z-index:1}
@media(min-width:920px){.sc-slot{width:min(700px,50vw);max-width:none;justify-self:start}}
.sc-hero.is-gl .sc-fallback{visibility:hidden}

/* copy */
.sc-hero h1{font-size:clamp(38px,5.4vw,70px)}.sc-hero h1 em{font-style:normal;color:var(--acc)}
.sc-hero h1 .ln{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.08em;margin-bottom:-.08em}.sc-hero h1 .ln>*{display:block;animation:sc-rise .95s cubic-bezier(.2,.8,.2,1) both}.sc-hero h1 .ln+.ln>*{animation-delay:.09s}
.sc-hero .lead{color:var(--tx2);font-size:clamp(16px,2.2vw,19px);max-width:44ch;margin:18px 0 24px}
.sc-hero .hud,.sc-hero .lead,.sc-hero .ctas,.sc-hud{animation:sc-fade .8s cubic-bezier(.2,.8,.2,1) both}.sc-hero .lead{animation-delay:.22s}.sc-hero .ctas{animation-delay:.32s}.sc-hud{animation-delay:.42s}
@keyframes sc-rise{from{transform:translateY(105%)}}@keyframes sc-fade{from{opacity:0;transform:translateY(10px)}}

/* counters double as filters */
.sc-hud{display:flex;margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.sc-k{position:relative;background:none;border:0;border-right:1px solid var(--line);padding:0 22px 8px 0;margin-right:22px;text-align:left;color:var(--tx);cursor:pointer;font:inherit}.sc-k:last-child{border-right:0;margin-right:0}
.sc-k span{display:block;font:600 10.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:4px;transition:color .2s}
.sc-k b{font:600 28px/1 var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.03em}.sc-k:nth-child(2) b{color:var(--acc)}
.sc-k::after{content:"";position:absolute;left:0;right:22px;bottom:0;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.sc-k:last-child::after{right:0}
.sc-k:hover span,.sc-k.on span,.sc-k:focus-visible span{color:var(--tx)}.sc-k:hover::after,.sc-k.on::after,.sc-k:focus-visible::after{transform:none}.sc-k:focus-visible{outline:none}
@media(max-width:560px){.sc-k{padding-right:14px;margin-right:14px}.sc-k::after{right:14px}.sc-k span{letter-spacing:.08em}}

/* overlay: labels sit on the page, the rest belongs to the device */
.sc-ui>*,.sc-dev>*{position:absolute;left:0;top:0;will-change:transform}.sc-dev{width:100%;height:100%;will-change:auto}
.sc-sl,.sc-rl{background:none;border:0;margin:0;cursor:pointer;pointer-events:auto;white-space:nowrap;text-transform:uppercase;opacity:0;transition:opacity .6s,color .2s}
.sc-sl{font:600 10.5px var(--fm);letter-spacing:.14em;color:var(--mut);padding:6px 4px}.sc-sl em{font-style:normal;color:var(--acc);opacity:.75;margin-left:8px}
.sc-rl{font:600 8.5px var(--fm);letter-spacing:.14em;color:#4ff0a0;padding:4px 2px}
.sc-sl:hover,.sc-sl.on,.sc-sl:focus-visible{color:var(--tx)}.sc-rl:hover,.sc-rl.on,.sc-rl:focus-visible{opacity:1!important;color:#c9ffe4}.sc-sl:focus-visible,.sc-rl:focus-visible{outline:1px solid var(--acc);outline-offset:2px;border-radius:4px}
.sc-hint{font:600 9.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap;opacity:0;transition:opacity .6s,color .2s}.sc-hint.on{color:var(--acc)}
.sc-brg{font:500 10px var(--fm);letter-spacing:.08em;color:var(--acc);white-space:nowrap;opacity:0}
.sc-hero.is-live .sc-sl,.sc-hero.is-live .sc-hint{opacity:1}.sc-hero.is-live .sc-rl{opacity:.5}
.sc-hero.is-hi .sc-sl:not(.on),.sc-hero.is-lock .sc-sl{color:color-mix(in srgb,var(--mut) 55%,transparent)}.sc-hero.is-lock .sc-rl{opacity:.2}.sc-hero.is-lock .sc-hint{opacity:0}
.sc-hit{width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;pointer-events:auto;outline:none}
.sc-hero.is-near{cursor:pointer}

/* lock-on */
.sc-lead{width:100%;height:100%;overflow:visible}
.sc-lead polyline{fill:none;stroke:var(--lc);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.sc-dev.on .sc-lead polyline{opacity:.85;animation:sc-draw .32s .06s cubic-bezier(.4,0,.2,1) forwards}.sc-dev.sheet .sc-lead{display:none}
@keyframes sc-draw{to{stroke-dashoffset:0}}
.sc-lock{width:0;height:0;opacity:0}.sc-lock i{position:absolute;width:8px;height:8px;border:0 solid var(--lc)}
.sc-lock i:nth-child(1){left:-15px;top:-15px;border-width:1.5px 0 0 1.5px}.sc-lock i:nth-child(2){right:-15px;top:-15px;border-width:1.5px 1.5px 0 0}
.sc-lock i:nth-child(3){left:-15px;bottom:-15px;border-width:0 0 1.5px 1.5px}.sc-lock i:nth-child(4){right:-15px;bottom:-15px;border-width:0 1.5px 1.5px 0}
.sc-lock span{position:absolute;inset:0}
.sc-dev.on .sc-lock{opacity:1}.sc-dev.on .sc-lock span{animation:sc-snap .3s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes sc-snap{from{transform:scale(2.4) rotate(45deg);opacity:0}}

.sc-card{width:248px;background:#0b1210;border:1px solid #2c3e38;border-radius:10px;padding:12px 12px 10px;color:#e6eee9;box-shadow:0 24px 50px -24px #000,inset 0 1px 0 rgba(255,255,255,.04);opacity:0;clip-path:inset(0 100% 0 0 round 10px)}
.sc-card.l{clip-path:inset(0 0 0 100% round 10px)}
.sc-dev.on .sc-card{opacity:1;clip-path:inset(0 0 0 0 round 10px);transition:clip-path .34s .16s cubic-bezier(.2,.8,.2,1),opacity .1s .16s}
.sc-card::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--lc);box-shadow:0 0 12px var(--lc)}
.sc-ch{display:flex;gap:10px;align-items:center;margin-bottom:10px}.sc-ch .av{width:36px;height:36px;border-radius:9px;font-size:12px}
.sc-ch b{display:block;font:700 15px/1.2 var(--fd);letter-spacing:-.01em}.sc-ch small{font:500 10px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#839890}
.sc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #1f2c28;font:600 9.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#839890}
.sc-row>span:first-child{white-space:nowrap}.sc-row .ship{font-size:11px;letter-spacing:0;text-transform:none;padding:2px 8px}.sc-row .ship em{font-style:normal}.sc-row .sc-v{color:#e6eee9;letter-spacing:.04em;min-height:1em}
.sc-go{margin:2px 0 0;font:500 10px var(--fm);color:#5d7068;letter-spacing:.06em}
/* phones: the card docks to the bottom of the screen */
.sc-card.sheet{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;z-index:50;opacity:1;clip-path:none;cursor:pointer;animation:sc-up .34s cubic-bezier(.2,.8,.2,1) both}
.sc-card.sheet .sc-go{color:#4ff0a0}
@keyframes sc-up{from{transform:translateY(calc(100% + 24px))}}

/* phones and tablets: the scope sits right under the headline, above the fold */
@media(max-width:919px){
  .sc-copy{display:contents}.sc-copy>*{position:relative;z-index:1}
  .sc-hero .hud{order:1}.sc-hero h1{order:2}.sc-slot{order:3;max-width:440px;margin:0 auto -6px}.sc-hero .lead{order:4;margin-top:6px}.sc-hero .ctas{order:5}.sc-hud{order:6}
}
@media(max-width:639px){.sc-slot{aspect-ratio:1/.88}}

@media(prefers-reduced-motion:reduce){.sc-hero *,.sc-hero *::before,.sc-card{animation:none!important;transition:none!important}}