:root{
--ground:#0D0A1C;--ground2:#120E26;--panel:#17122E;--panel2:#1E1840;--line:#3B2F6B;--line2:#4C3F8A;
--ink:#FFFFFF;--soft:#E9E6FF;--mute:#CFC8EE;
--pink:#FF3CAC;--pink-t:#FF5CBB;--cyan:#2DE2E6;--yellow:#FFD23F;--green:#5FD068;--live:#FF2D55;
--head:"Bungee","Chakra Petch",system-ui,sans-serif;--body:"Chakra Petch",system-ui,-apple-system,"Segoe UI",sans-serif;--term:"VT323",ui-monospace,Menlo,Consolas,monospace;
color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ground);color:var(--soft);font:500 17px/1.5 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
a{color:var(--cyan)}
a:hover{color:#8ff5f7}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--head);font-weight:400;color:var(--ink);margin:0;line-height:1.08;letter-spacing:.01em}
h2{font-size:clamp(26px,4vw,38px)}
h3{font-size:20px}
p{margin:0}
.k{font-family:var(--term);font-size:22px;color:var(--green);letter-spacing:.04em}
.mute{color:var(--mute)}
.top{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.brand img{width:44px;height:44px;border-radius:10px;box-shadow:0 0 0 2px #000,0 0 16px #ff3cac66;image-rendering:auto}
.brand b{font:400 22px/1 var(--head);background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:3px solid #000;background:var(--panel2);color:var(--ink);font:700 17px/1 var(--body);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--line2);transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line2);color:var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line2)}
.btn.go{background:var(--yellow);color:#14102a;box-shadow:5px 5px 0 var(--pink);font-size:20px}
.btn.go:hover{box-shadow:6px 6px 0 var(--pink);color:#14102a}
.btn.pink{background:var(--pink);color:#14102a;box-shadow:4px 4px 0 var(--cyan)}
.btn.cyan{background:var(--cyan);color:#0D0A1C;box-shadow:4px 4px 0 var(--pink)}
.btn.ghost{background:transparent;border-color:var(--line2);box-shadow:none}
.btn.sm{min-height:40px;padding:0 13px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.panel{position:relative;background:var(--panel);border:3px solid #000;box-shadow:0 0 0 2px var(--line),8px 8px 0 #000;padding:20px}
.panel.hot{box-shadow:0 0 0 2px var(--pink),8px 8px 0 var(--cyan)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:2px solid var(--line2);background:#0D0A1Ccc;color:var(--soft);font:600 15px/1.2 var(--body)}
.field{display:flex;align-items:stretch;background:#07051a;border:3px solid #000;box-shadow:0 0 0 2px var(--cyan)}
.field span{display:flex;align-items:center;padding:0 4px 0 14px;font:400 26px/1 var(--head);color:var(--cyan)}
.field input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:700 22px/1 var(--body);padding:16px 10px 16px 4px}
.field input::placeholder{color:#8f86c0}
.field input:focus{outline:none}
.field:focus-within{box-shadow:0 0 0 3px var(--yellow)}
input.f{width:100%;background:#07051a;border:2px solid var(--line2);color:var(--ink);font:600 17px var(--body);padding:12px}
input.f:focus{outline:none;border-color:var(--cyan)}
.err{color:#FFB3DA;font-weight:700;min-height:1.4em}
.ok{color:var(--green);font-weight:700}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#6c6590;box-shadow:0 0 0 2px #000}
.dot.live{background:var(--live);box-shadow:0 0 0 2px #000,0 0 12px var(--live);animation:mkPulse 1.2s ease-in-out infinite}
@keyframes mkPulse{50%{opacity:.45}}
dialog{background:var(--panel);color:var(--soft);border:3px solid #000;box-shadow:0 0 0 2px var(--cyan),10px 10px 0 var(--pink);padding:22px;width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:#05030fcc}
dialog h3{margin-bottom:10px}
dialog label{display:block;font-weight:700;margin:12px 0 6px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);z-index:100;background:#000;color:var(--green);border:2px solid var(--green);font:400 22px var(--term);padding:8px 16px;transition:transform .2s;pointer-events:none}
.toast{visibility:hidden}.toast.on{transform:translateX(-50%) translateY(0);visibility:visible}
footer{position:relative;z-index:1;margin-top:56px;padding:26px 0 40px;border-top:2px solid var(--line);color:var(--mute);font-size:15px}
footer a{color:var(--mute)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}