@font-face{font-family:'Cinzel';font-weight:900;font-style:normal;font-display:swap;src:url(/fonts/cinzel-900.woff2) format('woff2')}
@font-face{font-family:'VT323';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/vt323-400.woff2) format('woff2')}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#claim-dialog{padding:0;border:0;background:transparent;color:var(--c-fg);width:min(560px,calc(100vw - 24px));max-width:none;max-height:none;overflow:visible;margin:auto}
#claim-dialog::backdrop{background:var(--c-scrim,rgba(0,0,0,.8))}
#claim-dialog .sheet{position:relative;background:var(--c-bg);color:var(--c-fg);border:1px solid var(--c-line);border-radius:var(--c-radius,4px);padding:clamp(22px,5vw,36px);max-height:calc(100dvh - 24px);overflow:auto;font:17px/1.5 var(--c-font-b);box-shadow:var(--c-shadow,0 30px 80px rgba(0,0,0,.6))}
#claim-dialog h2{margin:0 0 6px;padding-right:32px;font:var(--c-h2,700 26px/1.15 var(--c-font-d));letter-spacing:.04em;text-wrap:balance}
#claim-dialog .lede{margin:0 0 20px;color:var(--c-dim)}
#claim-dialog .x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:none;color:var(--c-dim);font-size:28px;line-height:1;cursor:pointer}
#claim-dialog .x:hover{color:var(--c-fg)}
#claim-dialog .x:focus-visible{outline:2px solid var(--c-accent)}

#claim-dialog .fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px}
#claim-dialog .f{grid-column:span 6;min-width:0}
#claim-dialog .f.c3{grid-column:span 3}
#claim-dialog .f.c2{grid-column:span 2}
#claim-dialog .f.c1{grid-column:span 1}
@media(max-width:480px){
  #claim-dialog .f.c3{grid-column:span 6}
  #claim-dialog .f.c2,#claim-dialog .f.c1{grid-column:span 3}
}
#claim-dialog label{display:block;margin-bottom:4px;font-size:.85em;color:var(--c-dim)}
#claim-dialog input{width:100%;font:inherit;color:var(--c-fg);background:var(--c-field);border:1px solid var(--c-line);border-radius:var(--c-radius-in,3px);padding:.6em .75em}
#claim-dialog input::placeholder{color:var(--c-dim);opacity:.55}
#claim-dialog input:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
#claim-dialog .fine{margin:14px 0 0;font-size:.85em;color:var(--c-dim)}
#claim-dialog .err{margin:12px 0 0;min-height:1.4em;color:var(--c-err,#ff7b7b)}

#claim-dialog .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
#claim-dialog .btn{font:700 14px/1 var(--c-font-u,var(--c-font-d));letter-spacing:.08em;padding:1em 1.4em;border-radius:var(--c-radius-in,3px);border:1px solid var(--c-accent);cursor:pointer}
#claim-dialog .btn.primary{background:var(--c-accent);color:var(--c-on-accent,#fff)}
#claim-dialog .btn.quiet{background:transparent;color:var(--c-fg);border-color:var(--c-line)}
#claim-dialog .btn:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}

#claim-dialog .cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){#claim-dialog .cmp{grid-template-columns:1fr}}
#claim-dialog .cmp>div{padding:12px;border:1px solid var(--c-line);border-radius:var(--c-radius-in,3px)}
#claim-dialog .cmp .fix{border-color:var(--c-accent)}
#claim-dialog .cmp h3{margin:0 0 6px;font:400 .8em var(--c-font-b);color:var(--c-dim)}
#claim-dialog .cmp p{margin:0;white-space:pre-line}

#claim-dialog .bar{height:3px;margin-top:18px;overflow:hidden;background:var(--c-line)}
#claim-dialog .bar::after{content:"";display:block;width:40%;height:100%;background:var(--c-accent);animation:claim-slide 1s ease-in-out infinite alternate}
@keyframes claim-slide{to{transform:translateX(150%)}}
@media(prefers-reduced-motion:reduce){#claim-dialog .bar::after{animation:none;width:100%}}

#claim-dialog .ref{margin:18px 0 0;font:700 22px/1 var(--c-font-d);letter-spacing:.12em}
#claim-dialog .stamp{display:none}


:root{
  --void:#06020a;
  --neon:#ff2145;
  --pink:#ffd3da;
  --amber:#ff8a3d;
  --bone:#f0e5d4;
  --display:'Cinzel',Georgia,serif;
  --osd:'VT323','Courier New',monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#0d0a10}
body{
  margin:0;
  min-height:100vh;
  padding-inline:12px;
  padding-block:clamp(14px,3vw,36px) 24px;
  color:var(--pink);
  font:400 26px/1.25 var(--osd);
  background:radial-gradient(70% 50% at 50% 30%,#1b1420,#0d0a10);
  overflow-x:hidden;
}
a{color:inherit}

.tv{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(8px,1.8vw,20px);
  background:linear-gradient(180deg,#1f1a25,#141017);
  border-radius:34px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px rgba(0,0,0,.7);
}
.screen{
  position:relative;
  overflow:hidden;
  padding:clamp(16px,4vw,52px) clamp(16px,4vw,56px) clamp(20px,4vw,44px);
  background:var(--void);
  border-radius:26px / 34px;
  box-shadow:inset 0 0 0 2px #000,inset 0 0 140px rgba(0,0,0,.95);
  animation:poweron 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.65));
}
@keyframes poweron{
  0%{transform:scale(.2,.006);filter:brightness(7)}
  45%{transform:scale(1,.006);filter:brightness(7)}
  100%{transform:none;filter:none}
}
.bars{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,#f2f2f2 0 14.28%,#f2d600 0 28.56%,#00d2d2 0 42.84%,#10c83c 0 57.12%,#d010d0 0 71.4%,#e01020 0 85.68%,#1020d0 0);
  animation:bars 1.5s linear both;
}
@keyframes bars{0%,58%{opacity:0}60%,78%{opacity:1}80%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.screen{animation:none}.bars{display:none;animation:none}}

.osd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.5)}
.rec{display:inline-flex;align-items:center;gap:10px}
.rec i{width:12px;height:12px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:blink 1.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.rec i{animation:none}}

.mark{
  margin:clamp(22px,4vw,48px) 0 0;
  font:900 clamp(46px,13.4vw,184px)/.9 var(--display);
  color:#ffe6ea;
  text-shadow:3px 0 rgba(255,33,69,.9),-3px 0 rgba(255,255,255,.2),0 0 18px rgba(255,33,69,.85),0 0 60px rgba(255,33,69,.5);
  animation:tear 9s steps(1) 2s infinite;
}
@keyframes tear{
  0%,93%,100%{transform:none;filter:none}
  94%{transform:translateX(-12px) skewX(-6deg);filter:blur(.6px)}
  95%{transform:translateX(16px) skewX(5deg)}
  96%{transform:translateX(-5px)}
  97%{transform:none}
}
@media(prefers-reduced-motion:reduce){.mark{animation:none}}
.tag{max-width:44ch;margin:10px 0 0;font-size:clamp(24px,2.6vw,30px);line-height:1.2;color:var(--pink)}
.tag span{color:var(--amber);white-space:nowrap}

.guide{list-style:none;margin:clamp(22px,4vw,40px) 0 0;padding:0}
.guide a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:3px 14px;
  text-decoration:none;
  font-size:clamp(28px,3.2vw,36px);
  line-height:1.15;
}
.ch{color:var(--amber);flex:none}
.nm{flex:none;color:#fff}
.dots{flex:1;min-width:20px;border-bottom:3px dotted rgba(255,33,69,.55);transform:translateY(-.25em)}
.hd{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--pink)}
.guide a:hover,.guide a:focus-visible{background:var(--neon);color:#14060a}
.guide a:hover .ch,.guide a:hover .nm,.guide a:hover .hd,.guide a:focus-visible .ch,.guide a:focus-visible .nm,.guide a:focus-visible .hd{color:#14060a}
.guide a:hover .dots,.guide a:focus-visible .dots{border-color:#14060a}
.guide a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:640px){.dots,.ch{display:none}.guide a{justify-content:space-between;font-size:22px}}
@media(max-width:360px){.guide a{font-size:19px;gap:10px;padding-inline:8px}}

.prompt{
  margin-top:clamp(28px,5vw,56px);
  padding:clamp(16px,3vw,28px);
  border:3px solid var(--neon);
  box-shadow:0 0 18px rgba(255,33,69,.4),inset 0 0 18px rgba(255,33,69,.18);
}
.prompt h2{margin:0;font:400 clamp(34px,4vw,46px)/1 var(--osd);color:#fff;letter-spacing:.04em;text-shadow:0 0 10px rgba(255,33,69,.8)}
.prompt p{margin:4px 0 14px}
#code-form{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
#code-input{
  flex:1 1 260px;
  min-width:0;
  padding:.1em .4em;
  font:400 clamp(38px,4.6vw,52px)/1.1 var(--osd);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--neon);
  caret-color:var(--neon);
  text-shadow:0 0 10px rgba(255,33,69,.8);
  background:#000;
  border:2px solid rgba(255,33,69,.5);
  border-radius:0;
}
#code-input::placeholder{color:#5e1a28;text-shadow:none}
#code-input:focus-visible{outline:0;border-color:var(--neon);box-shadow:0 0 16px rgba(255,33,69,.55)}
#code-input[aria-invalid]{border-color:#ff9a9a}
.go{
  padding:0 1.2em;
  min-height:56px;
  font:400 clamp(30px,3.4vw,38px)/1 var(--osd);
  letter-spacing:.06em;
  color:#14060a;
  background:var(--neon);
  border:0;
  border-radius:0;
  cursor:pointer;
}
.go:hover{background:#fff}
.go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.err{min-height:1.3em;margin:10px 0 0!important;color:#ff9a9a!important}
.foot{margin-top:clamp(16px,3vw,28px)}


#claim-dialog{
  --c-bg:#05020a;
  --c-fg:var(--pink);
  --c-dim:#c9a3ab;
  --c-accent:var(--neon);
  --c-line:rgba(255,33,69,.5);
  --c-field:#000;
  --c-font-d:var(--osd);
  --c-font-b:var(--osd);
  --c-radius:0;
  --c-radius-in:0;
  --c-scrim:rgba(2,0,4,.88);
  --c-shadow:0 0 0 3px var(--neon),0 0 40px rgba(255,33,69,.45);
}
#claim-dialog .sheet{font-size:26px;line-height:1.2}
#claim-dialog h2{font:400 40px/1 var(--osd);letter-spacing:.04em;color:#fff;text-shadow:0 0 10px rgba(255,33,69,.8)}
#claim-dialog label{font-size:22px}
#claim-dialog input{padding:.35em .5em}
#claim-dialog .btn{font:400 28px/1 var(--osd);letter-spacing:.04em}
#claim-dialog .btn.primary{color:#14060a}
#claim-dialog .ref{font-size:36px}

.ts-wrap{margin-top:12px}
#override{margin-top:14px;padding:12px;border:1px dashed var(--c-line)}
#override p{margin:0 0 10px}
.go:disabled,#claim-dialog .btn:disabled{opacity:.55;cursor:wait}

.credit{display:flex;justify-content:center;padding:20px 16px 8px}
.pill{
  display:inline-block;
  max-width:100%;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  font:400 22px/1.25 var(--osd);
  letter-spacing:.04em;
  color:#ffe6ea;
  text-shadow:0 0 8px var(--neon);
  text-decoration:none;
  border:2px solid #ff8da0;
  border-radius:999px;
  background:#0a0510;
  padding:.3em 1.1em .25em;
  box-shadow:0 0 6px var(--neon),0 0 18px var(--neon),inset 0 0 8px rgba(255,33,69,.5);
  animation:buzz 9s linear infinite;
}
.pill:hover,.pill:focus-visible{
  animation:none;
  opacity:1;
  box-shadow:0 0 8px var(--neon),0 0 28px var(--neon),inset 0 0 12px rgba(255,33,69,.7);
}
.pill:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes buzz{
  0%,11%{opacity:1}
  12%{opacity:.55}
  13%,16%{opacity:1}
  17%{opacity:.75}
  18%,51%{opacity:1}
  52%{opacity:.6}
  53%,79%{opacity:1}
  80%{opacity:.85}
  81%,100%{opacity:1}
}
@media(prefers-reduced-motion:reduce){.pill{animation:none}}

@media(max-width:400px){
  #code-input{font-size:30px;letter-spacing:.1em;flex:1 1 100%}
  .go{flex:1 1 100%;white-space:nowrap;padding:0 .6em}
  .pill{font-size:18px;padding:.3em .8em .25em}
}

.cc{display:flex;align-items:center;justify-content:center;gap:.6em;margin:clamp(24px,4vw,44px) auto 0;padding:.35em .9em .3em;width:fit-content;max-width:100%;background:rgba(0,0,0,.85);color:#fff;font:400 clamp(24px,3.4vw,40px)/1.15 var(--osd);letter-spacing:.04em;text-align:center;text-shadow:0 0 6px rgba(255,255,255,.5);box-shadow:0 0 0 2px #000,0 0 24px rgba(255,33,69,.25)}
.cc .note{color:#ff2145;text-shadow:0 0 10px #ff2145}
.cc .line{min-width:0;overflow-wrap:anywhere;animation:typed 3.2s steps(46,end) .6s both}
@keyframes typed{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:400px){.cc{font-size:22px;gap:.4em;padding-inline:.6em}.cc .line{text-wrap:balance}}
@media(prefers-reduced-motion:reduce){.cc .line{animation:none}}
.ts-wrap{max-width:100%}
@media(max-width:400px){.ts-wrap{transform:scale(.8);transform-origin:0 0;margin-bottom:-14px}}
@media(max-width:340px){.ts-wrap{transform:scale(.66);margin-bottom:-22px}}
