:root{
  --g:clamp(20px,5.5vw,40px);
  --mint:#3dffa8; --mint-d:rgba(61,255,168,.28); --vio:#7a2cff; --pink:#ff5fa8; --ink:#fcfcfa; --bg:#000;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --ls:.18em; --mono:"Chivo Mono",ui-monospace,Menlo,monospace;
  --top:max(var(--g),env(safe-area-inset-top)); --bot:max(var(--g),env(safe-area-inset-bottom));
}
@font-face{font-family:"Chivo Mono";src:url("./fonts/ChivoMono.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Chivo Outline";src:url("./fonts/ChivoMono-800-solid.woff2") format("woff2");font-weight:800;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000;height:100%}
body{font-family:var(--mono);font-weight:600;color:var(--ink);background:#000;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}
button,input{font:inherit;color:inherit;background:none;border:0;letter-spacing:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
svg{display:block}

/* scene */
.bg{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 70% at 50% 64%,#1b0640 0%,#07010f 46%,#000 72%)}
.horizon{position:absolute;left:0;right:0;top:62%;height:1px;background:linear-gradient(90deg,transparent,rgba(122,44,255,.9) 20%,rgba(61,255,168,.7) 50%,rgba(122,44,255,.9) 80%,transparent);box-shadow:0 0 24px 6px rgba(122,44,255,.45)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:2;display:block}
.word{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--top) + 44px + var(--s3))}
.word__main,.word__echo{display:flex;flex-direction:column;align-items:center;font-family:"Chivo Outline",var(--mono);font-weight:800;font-size:min(20.5vw,27vh);line-height:.86;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:max(1px,.012em) var(--mint);text-transform:uppercase;white-space:nowrap}
.word__main span{display:block;opacity:0;transform:translateY(.25em);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.word__main span:nth-child(2){transition-delay:.12s}
.word__echo{transform:scaleY(-1);opacity:0;transition:opacity 1.2s .3s;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 70%);mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 70%);margin-top:.04em}
body.is-on .word__main span{opacity:1;transform:none}
body.is-on .word__echo{opacity:.55}
body.is-game .word,body.is-panel .word,body.is-band .word{opacity:.18;transition:opacity .6s}
body.is-over .word{opacity:0}
.word{transition:opacity .6s}
.nogl-box{display:none}
html.nogl .nogl-box{display:block;position:fixed;z-index:2;left:50%;top:58%;width:min(56vw,340px);transform:translate(-50%,-50%);filter:drop-shadow(0 18px 30px rgba(122,44,255,.5))}
html.nogl #gl{display:none}

/* top bar */
.top{position:fixed;z-index:5;top:var(--top);left:var(--g);right:var(--g);height:44px;display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:var(--ls);opacity:0;transition:opacity .6s}
body.is-on .top{opacity:1}
.top__name{display:inline-flex;align-items:center;min-height:44px}
.top__right{display:flex;align-items:center;gap:var(--s4)}
.top__clock{color:var(--mint);font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(61,255,168,.6)}

/* social */
.social{display:flex;gap:0}
.social a{width:44px;height:44px;display:grid;place-items:center;transition:color .2s,background .2s}
.social svg{width:20px;height:20px;fill:currentColor}
.social a:hover{background:var(--mint);color:#000}
.social--top{display:none}
.social--bottom{position:fixed;z-index:5;right:calc(var(--g) - 12px);bottom:calc(var(--bot) - 6px);opacity:0;transition:opacity .6s}
body.is-on .social--bottom{opacity:1}

/* menu */
.menu{position:fixed;z-index:5;left:calc(var(--g) - 8px);bottom:calc(var(--bot) - 6px);display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateY(12px);transition:opacity .6s .2s,transform .6s .2s}
body.is-on .menu{opacity:1;transform:none}
.menu__item{position:relative;display:flex;align-items:center;min-height:44px;padding:0 var(--s2);font-size:19px;letter-spacing:var(--ls);text-align:left;white-space:nowrap}
.menu__item span{position:relative;z-index:1;padding:2px 0}
.menu__item::before{content:"";position:absolute;left:0;right:0;top:8px;bottom:8px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.3,.7,.2,1)}
.menu__item.is-hot{color:#000}
.menu__item.is-hot::before{transform:none}
.keyhint{position:fixed;z-index:4;left:0;right:0;bottom:calc(var(--bot) + 6px);text-align:center;font-size:11px;letter-spacing:var(--ls);color:rgba(252,252,250,.42);opacity:0;transition:opacity .6s .4s;pointer-events:none}
body.is-on .keyhint{opacity:1}
body.is-game .menu,body.is-game .social--bottom,body.is-game .keyhint,body.is-panel .menu,body.is-panel .keyhint,body.is-panel .social--bottom,body.is-band .menu,body.is-band .keyhint,body.is-band .social--bottom,body.is-over .menu,body.is-over .keyhint,body.is-over .social--bottom{opacity:0;pointer-events:none}
body.is-game .top,body.is-band .top,body.is-over .top{opacity:0;pointer-events:none}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s4);font-size:13px;letter-spacing:var(--ls);border:1px solid rgba(252,252,250,.55);border-radius:999px;background:rgba(0,0,0,.35);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.pill:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.pill--go{background:var(--mint);color:#000;border-color:var(--mint)}
.pill--go:hover{background:var(--ink);border-color:var(--ink)}
.pill--sm{min-height:44px;padding:0 var(--s3);font-size:12px}
.pill--back{position:fixed;z-index:8;top:var(--top);left:var(--g)}
.outline{font-family:"Chivo Outline",var(--mono);font-weight:800;color:transparent;-webkit-text-stroke:max(1px,.012em) var(--mint);line-height:.86;letter-spacing:-.02em}

/* HUD */
.hud{position:fixed;inset:0;z-index:6;pointer-events:none}
.hud .pill{pointer-events:auto}
.hud__stats{position:fixed;top:var(--top);right:var(--g);display:flex;gap:var(--s5);text-align:right}
.hud__stats div{display:flex;flex-direction:column;gap:var(--s1)}
.hud__stats dt{font-size:11px;letter-spacing:var(--ls);color:rgba(252,252,250,.55)}
.hud__stats dd{font-size:22px;letter-spacing:.06em;color:var(--mint);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(61,255,168,.55)}
.lives{display:flex;gap:6px;justify-content:flex-end;align-items:center;height:28px}
.lives i{width:14px;height:14px;background:var(--pink);box-shadow:0 0 10px rgba(255,95,168,.7)}
.lives i.off{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,95,168,.6)}
.hud__pop{position:fixed;left:0;right:0;top:30%;text-align:center;font-size:clamp(18px,4vw,28px);letter-spacing:var(--ls);color:var(--mint);opacity:0;transition:opacity .25s;text-shadow:0 0 16px rgba(61,255,168,.7)}
.hud__pop.on{opacity:1}
.hud__hint{position:fixed;left:var(--g);right:var(--g);bottom:var(--bot);text-align:center;font-size:12px;letter-spacing:var(--ls);color:rgba(252,252,250,.7);transition:opacity .5s}

/* name band */
.band{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center}
.band__strip{background:var(--vio);padding:var(--s6) var(--g);display:flex;flex-direction:column;align-items:center;gap:var(--s4);box-shadow:0 0 60px rgba(122,44,255,.55)}
.band__q{font-size:15px;letter-spacing:var(--ls)}
#pname{width:100%;max-width:720px;text-align:center;font-weight:800;font-size:clamp(40px,9vw,104px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);caret-color:var(--mint);outline:none;border-bottom:2px solid rgba(252,252,250,.35);padding-bottom:var(--s1)}
#pname:focus{border-bottom-color:var(--mint)}
.band__hint{margin-top:var(--s5);text-align:center;padding:0 var(--g);font-size:13px;letter-spacing:.06em;color:rgba(252,252,250,.75);font-weight:500}

/* game over */
.over{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--g);text-align:center;background:rgba(5,0,14,.55)}
.over__title{font-size:min(24vw,30vh)}
.over__score{font-size:clamp(15px,3.6vw,20px);letter-spacing:var(--ls);color:var(--mint)}
.over__rank{font-size:13px;letter-spacing:var(--ls);color:rgba(252,252,250,.75);min-height:1em}
.over__btns{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s3)}

/* panels */
.panel{position:fixed;inset:0;z-index:7;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(4,0,12,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:crtIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes crtIn{0%{opacity:0;transform:scaleY(.02) scaleX(.6);filter:brightness(3)}55%{opacity:1;transform:scaleY(1.02) scaleX(1)}100%{transform:none;filter:none}}
.panel__in{max-width:1120px;margin:0 auto;padding:calc(var(--top) + 44px + var(--s6)) var(--g) calc(var(--bot) + var(--s7))}
.panel .pill--back{position:fixed}
.panel__title{font-size:min(15vw,168px);margin-bottom:var(--s5);white-space:nowrap}
.br-m{display:none}
.panel__lede{font-size:15px;line-height:1.55;font-weight:500;letter-spacing:.02em;color:rgba(252,252,250,.82);max-width:56ch;margin-bottom:var(--s6)}
.panel__note{margin-top:var(--s5);font-size:12px;letter-spacing:.08em;color:rgba(252,252,250,.55);font-weight:500}
.panel__you{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5);font-size:13px;letter-spacing:var(--ls)}
.panel__you b{font-size:28px;color:var(--mint);font-weight:800;letter-spacing:.04em}

.table{border-top:1px solid var(--mint-d)}
.row{display:grid;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) var(--s3);border-bottom:1px solid var(--mint-d);font-size:15px;letter-spacing:.06em;transition:background .18s,color .18s}
a.row:hover,a.row:focus-visible{background:var(--mint);color:#000}
a.row:hover .dim,a.row:focus-visible .dim{color:rgba(0,0,0,.7)}
.dim{color:rgba(252,252,250,.68);font-weight:500;letter-spacing:.02em;line-height:1.45}
.num{color:var(--mint);font-variant-numeric:tabular-nums}
a.row:hover .num{color:#000}
.go{justify-self:end;font-size:18px}
.table--products .row{grid-template-columns:48px minmax(140px,1fr) 2fr 32px}
.row__name{font-size:19px;font-weight:800;letter-spacing:.06em}
.row__url{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;color:rgba(252,252,250,.5);margin-top:2px}
a.row:hover .row__url{color:rgba(0,0,0,.6)}
.series{padding:var(--s5) var(--s3) var(--s2);font-size:12px;letter-spacing:var(--ls);color:var(--mint);border-bottom:1px solid var(--mint-d)}
.table--sites .row{grid-template-columns:96px minmax(180px,1fr) 1.4fr 32px}
.table--scores .row{grid-template-columns:72px 1fr 80px 120px;font-variant-numeric:tabular-nums}
.table--scores .row--head{min-height:40px;font-size:11px;letter-spacing:var(--ls);color:rgba(252,252,250,.55)}
.table--scores .row--me{background:rgba(61,255,168,.14)}
.r{text-align:right}
.table--contact .row{grid-template-columns:140px 1fr auto;min-height:72px;font-size:17px}
.c-k{font-size:12px;letter-spacing:var(--ls);color:var(--mint)}
a.row:hover .c-k{color:#000}
.c-v{font-weight:700;overflow-wrap:anywhere}
.row--mail .c-v{display:inline-flex;align-items:center;min-height:44px}
.row--mail .c-v:hover{color:var(--mint)}
.c-go{font-size:18px;justify-self:end}

/* intro */
.intro{position:fixed;inset:0;z-index:9;background:#000;display:grid;place-items:center}
.crt{position:relative;width:min(92vw,1100px);aspect-ratio:16/10;max-height:78vh;border-radius:5%/8%;overflow:hidden;background:radial-gradient(ellipse at center,#1a0a33 0%,#07010f 70%);box-shadow:inset 0 0 80px rgba(0,0,0,.9),0 0 0 1px rgba(252,252,250,.06);display:grid;place-items:center;animation:flick 3.2s steps(1) infinite}
@keyframes flick{0%,100%{filter:brightness(1)}47%{filter:brightness(1.18)}48%{filter:brightness(.92)}}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);pointer-events:none}
.intro__card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);text-align:center;padding:var(--g);opacity:0;transform:scale(1.04);transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.intro__card.on{opacity:1;transform:none}
.intro__by{font-size:clamp(18px,3.4vw,34px);letter-spacing:var(--ls);font-weight:800}
.intro__sub{font-size:clamp(11px,1.6vw,14px);letter-spacing:var(--ls);color:rgba(252,252,250,.7)}
.intro__big{font-size:clamp(56px,14vw,190px)}
.intro__count{font-size:clamp(140px,40vh,360px)}
.intro__skip{position:fixed;left:50%;bottom:var(--bot);transform:translateX(-50%)}

/* loader */
.loader{position:fixed;inset:0;z-index:10;background:#000;display:grid;place-items:center;transition:opacity .6s}
.loader.out{opacity:0;pointer-events:none}
.badge{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;animation:spin 14s linear infinite}
.badge text{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.2em;fill:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__pct{position:relative;font-size:14px;letter-spacing:var(--ls);color:var(--mint);font-variant-numeric:tabular-nums}
.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:120px;min-height:64px;font-size:19px;line-height:1.05;letter-spacing:var(--ls);color:var(--mint);text-shadow:0 0 14px rgba(61,255,168,.7);animation:blink 1.1s steps(1) infinite}
.start:hover{color:var(--ink)}
@keyframes blink{50%{opacity:.25}}
.loader.ready .loader__pct{opacity:0}

/* fx */
.fx-grain{position:fixed;inset:-50%;z-index:20;pointer-events:none;opacity:.13;background-size:160px 160px;animation:grain .6s steps(4) infinite;mix-blend-mode:screen}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-2%,3%)}}
.fx-scan{position:fixed;inset:0;z-index:19;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.5}
.fx-vig{position:fixed;inset:0;z-index:18;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%)}
.fx-flash{position:fixed;inset:0;z-index:17;pointer-events:none;background:rgba(255,40,90,.35);opacity:0;transition:opacity .35s}
.fx-flash.on{opacity:1;transition:none}
.toast{position:fixed;z-index:30;left:50%;bottom:calc(var(--bot) + 56px);transform:translate(-50%,8px);background:var(--mint);color:#000;font-size:12px;letter-spacing:var(--ls);padding:var(--s2) var(--s4);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;width:max-content;max-width:calc(100vw - 2 * var(--g));text-align:center;line-height:1.5}
.toast.on{opacity:1;transform:translate(-50%,0)}
.nojs{position:fixed;inset:0;z-index:40;background:#000;display:grid;place-items:center;padding:var(--g);text-align:center;font-size:15px;line-height:1.6}
.nojs a{color:var(--mint)}

@media (max-width:760px){
  .social--bottom,.keyhint{display:none}
  .social--top{display:flex;margin-right:-12px}
  .top__clock{display:none}
  .menu{left:var(--g);right:var(--g);display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
  .menu__item{font-size:15px;padding:0 var(--s2);margin-left:calc(-1 * var(--s2));justify-self:start}
  .table--products .row{grid-template-columns:32px 1fr 24px;row-gap:var(--s1)}
  .table--products .row .dim{grid-column:2 / 3;font-size:13px}
  .table--products .row .go{grid-column:3;grid-row:1}
  .table--sites .row{grid-template-columns:1fr 24px;row-gap:2px}
  .table--sites .row .s-k{display:none}
  .table--sites .row .dim{grid-column:1;font-size:13px}
  .table--sites .row .go{grid-column:2;grid-row:1 / span 2}
  .table--scores .row{grid-template-columns:48px 1fr 48px 84px;gap:var(--s2);font-size:14px}
  .table--contact .row{grid-template-columns:1fr auto;row-gap:var(--s1)}
  .table--contact .c-k{grid-column:1}
  .table--contact .c-v{grid-column:1}
  .table--contact .c-go,.table--contact .pill{grid-column:2;grid-row:1 / span 2}
  .br-m{display:inline}
  .u-d{display:none}
  .panel__title{font-size:min(17vw,96px)}
  .hud__stats{gap:var(--s4)}
  .hud__stats dd{font-size:17px}
  .hud__stats .pill{display:none}
  .row{padding:var(--s3) 0}
  .series{padding-left:0;padding-right:0}
  .hud .pill--back{padding:0 var(--s3)}
}
@media (max-width:380px){
  .hud__stats{gap:var(--s3)}
  .hud__stats dd{font-size:15px}
  .lives i{width:11px;height:11px}
}
@media (prefers-reduced-motion:reduce){
  .badge,.fx-grain,.crt,.start{animation:none}
}