:root{
  --bg:#0a0612; --card:#140b24; --line:#2c1850;
  --pink:#ff2bd6; --cyan:#19f3ff; --lime:#b6ff3b; --text:#eae6ff; --muted:#9a8fc4;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  background-image:
    radial-gradient(60vw 40vw at 10% -10%, #5b0a8a55, transparent),
    radial-gradient(50vw 40vw at 100% 20%, #00b7c744, transparent);
  background-attachment:fixed;
  overflow-x:hidden;
}
body.shake{animation:shake .4s linear infinite}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.scan{position:fixed;inset:0;pointer-events:none;z-index:49;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px)}

.ticker{background:var(--pink);color:#000;font-weight:700;overflow:hidden;white-space:nowrap;border-bottom:2px solid #000}
.ticker__in{display:inline-flex;animation:tick 30s linear infinite}
.ticker__in span{padding:.35rem 0}
@keyframes tick{to{transform:translateX(-50%)}}

.lang{position:fixed;top:48px;right:12px;z-index:60;cursor:pointer;font:inherit;font-weight:900;
  background:var(--bg);color:var(--cyan);border:2px solid var(--cyan);border-radius:4px;padding:.3rem .6rem;
  box-shadow:3px 3px 0 var(--cyan)}
.lang:hover{background:var(--cyan);color:#000}
.lang:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

.hero{text-align:center;padding:12vh 1rem 8vh}
.hero__tag{color:var(--cyan);margin:0 0 1rem;letter-spacing:.15em;text-transform:uppercase;font-size:.85rem}
.hero__sub{font-size:1.3rem;margin:1rem 0 2rem;color:var(--muted)}
.hero__sub s{color:#ff5470;text-decoration-thickness:3px}

.glitch{position:relative;display:inline-block;margin:0;font-size:clamp(3.2rem,16vw,9rem);
  font-weight:900;letter-spacing:.04em;line-height:1;color:var(--text)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:var(--pink);transform:translate(3px,0);clip-path:inset(0 0 55% 0);animation:gl1 2.2s infinite steps(1)}
.glitch::after{color:var(--cyan);transform:translate(-3px,0);clip-path:inset(55% 0 0 0);animation:gl2 1.7s infinite steps(1)}
@keyframes gl1{0%{clip-path:inset(0 0 80% 0)}20%{clip-path:inset(40% 0 30% 0);transform:translate(6px,0)}40%{clip-path:inset(10% 0 60% 0)}60%{clip-path:inset(70% 0 5% 0);transform:translate(-5px,0)}80%{clip-path:inset(25% 0 50% 0)}100%{clip-path:inset(0 0 80% 0)}}
@keyframes gl2{0%{clip-path:inset(60% 0 10% 0)}25%{clip-path:inset(5% 0 75% 0);transform:translate(-6px,0)}50%{clip-path:inset(45% 0 35% 0)}75%{clip-path:inset(80% 0 0 0);transform:translate(5px,0)}100%{clip-path:inset(60% 0 10% 0)}}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-4px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,-4px)}100%{transform:translate(0,0)}}

main{max-width:880px;margin:0 auto;padding:0 1rem 4rem;display:grid;gap:1.5rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:6px;padding:1.5rem;
  box-shadow:6px 6px 0 var(--pink)}
.card:nth-child(even){box-shadow:6px 6px 0 var(--cyan)}
.card h2{margin:0 0 .5rem;color:var(--lime);font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em}
.muted{color:var(--muted)} .small{font-size:.85rem}

.btn{display:inline-block;cursor:pointer;font:inherit;font-weight:700;text-decoration:none;
  background:var(--pink);color:#000;border:2px solid #000;border-radius:4px;padding:.6rem 1.1rem;
  box-shadow:3px 3px 0 #000;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--cyan);box-shadow:3px 3px 0 var(--cyan)}
.btn--big{width:100%;font-size:1.3rem;padding:1rem;background:var(--lime);margin:1rem 0}
.row{display:flex;flex-wrap:wrap;gap:.75rem}

.meter{position:relative;height:38px;border:2px solid var(--text);border-radius:4px;background:#0006;overflow:hidden;margin-top:1rem}
.meter__fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--pink));transition:width .15s}
.meter__label{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;mix-blend-mode:difference;color:#fff}
.status{font-weight:700;color:var(--cyan);min-height:1.5em;margin:.25rem 0}

.cope{margin:1rem 0;padding:1rem 1.2rem;border-left:5px solid var(--pink);background:#0004;font-size:1.15rem;min-height:4.5em}

.maker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:start}
.maker canvas{width:100%;height:auto;border:2px solid var(--text);border-radius:4px;image-rendering:auto;background:#000}
.maker__ctl{display:grid;gap:.9rem}
label{display:grid;gap:.3rem;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
input,select{font:inherit;background:#0008;color:var(--text);border:2px solid var(--line);border-radius:4px;padding:.55rem .7rem}
@media (max-width:680px){.maker{grid-template-columns:1fr}}

.forecast{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.forecast li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding:.35rem 0}
.forecast b{color:var(--lime)}

details{border-top:1px dashed var(--line);padding:.6rem 0}
summary{cursor:pointer;font-weight:700}
details p{margin:.5rem 0 0;color:var(--muted)}

footer{text-align:center;color:var(--muted);padding:2rem 1rem 3rem;font-size:.85rem}
footer a{color:var(--cyan)}

.od{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,#ff2bd6 0 20px,#19f3ff 20px 40px);animation:strobe .25s steps(2) infinite}
.od[hidden]{display:none}
.od__box{background:#000d;padding:2rem 2.5rem;border:3px solid #fff;max-width:92vw}
.od .glitch{font-size:clamp(2.5rem,12vw,6rem)}
@keyframes strobe{50%{filter:hue-rotate(120deg) invert(.1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}