@font-face{font-family:Barlow;src:url(fonts/Barlow-Regular.ttf)}
@font-face{font-family:Barlow;font-weight:600;src:url(fonts/Barlow-SemiBold.ttf)}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(fonts/BarlowCondensed-Bold.ttf)}
@font-face{font-family:"Barlow Condensed";font-weight:800;src:url(fonts/BarlowCondensed-ExtraBold.ttf)}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.ttf)}
@font-face{font-family:"IBM Plex Mono";font-weight:700;src:url(fonts/IBMPlexMono-Bold.ttf)}
:root{--y:#FFD400;--bk:#0a0a0a;--g1:#161616;--g2:#2a2a2a;--tx:#f2f2f2;--mu:#9a9a9a}
*{box-sizing:border-box}
body{margin:0;background:var(--bk);color:var(--tx);font-family:Barlow,Arial,sans-serif}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin:0}
.mono{font-family:"IBM Plex Mono",Consolas,monospace}
header.top{display:flex;align-items:flex-end;justify-content:space-between;padding:18px 28px 12px;border-bottom:3px solid var(--y)}
header.top h1{font-size:40px;line-height:.95}
header.top h1 span{color:var(--y)}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;padding:2px 6px;border:1px solid var(--y);color:var(--y);text-transform:uppercase}
.tag.sample{background:#ff3b30;border-color:#ff3b30;color:#fff;font-weight:700}
.tag.real{border-color:#3ddc84;color:#3ddc84}
button,select{font-family:"IBM Plex Mono",monospace;font-size:12px;background:transparent;color:var(--tx);border:1px solid var(--g2);padding:7px 11px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;border-radius:0}
button:hover,button.on{background:var(--y);color:#000;border-color:var(--y)}
a{color:var(--y)}
.foot{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--mu);padding:10px 28px;border-top:1px solid var(--g2)}
.tagline{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;color:var(--mu);max-width:900px}
.tagline b{color:var(--y);font-weight:700}

/* ---- mobile ---- */
@media (max-width:820px){
html,body{overflow-x:hidden;max-width:100%}
header.top{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px 10px}
header.top > div[style]{text-align:left!important;width:100%}
header.top h1{font-size:32px}
.foot{padding:10px 16px}
.tagline{font-size:17px}
button,select{min-height:44px;font-size:13px}
a{overflow-wrap:anywhere}
}