@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --navy:#002033; --abyss:#000d16; --ink:#00172a;
  --sun:#fbce35; --fire:#e1571a; --volt:#2433e0;
  --paper:#f4efe6; --mute:#8ba0b3; --line:rgba(251,206,53,.18);
  --grad:linear-gradient(135deg,#fbce35 0%,#f39a22 55%,#e1571a 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--abyss);color:var(--paper)}
body{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.display{font-variation-settings:'wdth' 125;font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.01em}
.cond{font-variation-settings:'wdth' 62;font-weight:900;text-transform:uppercase}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
.tag{display:inline-flex;align-items:center;gap:.5em;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.tag::before{content:'';width:8px;height:8px;background:var(--sun);clip-path:polygon(40% 0,100% 0,60% 45%,100% 45%,20% 100%,45% 55%,0 55%)}
.btn{border:0;background:var(--grad);color:var(--navy);font-weight:900;font-variation-settings:'wdth' 115;text-transform:uppercase;letter-spacing:.02em;padding:18px 26px;font-size:16px;clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:disabled{opacity:.5;transform:none}
.btn.ghost{background:transparent;color:var(--sun);box-shadow:inset 0 0 0 2px var(--sun)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.inp{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);color:var(--paper);padding:15px 16px;font-size:16px;border-radius:0;outline:none;transition:border-color .15s,background .15s;appearance:none}
.inp:focus{border-color:var(--sun);background:rgba(251,206,53,.06)}
select.inp{background-image:linear-gradient(45deg,transparent 50%,var(--sun) 50%),linear-gradient(135deg,var(--sun) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select.inp option,select.inp optgroup{background:var(--navy);color:var(--paper)}
.stripes{background:repeating-linear-gradient(-55deg,var(--sun) 0 10px,transparent 10px 22px)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes flick{0%,100%{opacity:1}45%{opacity:1}48%{opacity:.3}50%{opacity:1}53%{opacity:.5}56%{opacity:1}}
.rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--sun);color:var(--navy);font-weight:800;padding:14px 20px;z-index:200;max-width:calc(100% - 32px)}