:root{
  --ground:#121315;--panel:#191b1e;--raised:#22252a;--hover:#2b2f35;--line:#33373e;--ctl:#5a616c;
  --ink:#ecebe6;--ink2:#c9cbc6;--mute:#979ca5;--dim:#6b717a;
  --amb:#ffc53d;--amb2:#ffd76e;--red:#ff6a55;--blue:#59a8ff;--grn:#6fdc9b;
  --serif:"Newsreader",Georgia,serif;--sans:"IBM Plex Sans",system-ui,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--px:"Silkscreen",monospace;
  --max:1240px;--g:20px;--nav:68px;--cut:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--ground);color-scheme:dark;scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--sans);overflow-x:clip;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(#ffffff0a 1px,transparent 1.2px);background-size:22px 22px}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button,[role=button],a[href],label[for]{cursor:pointer}
::selection{background:var(--amb);color:#111}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g);width:100%}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;padding:14px 0 0;background:linear-gradient(var(--ground) 70%,#12131500)}
.bar{display:flex;align-items:center;gap:18px;height:58px;padding:0 10px 0 14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.logo{display:flex;align-items:center;gap:9px;font:400 22px/1 var(--px);letter-spacing:.02em;white-space:nowrap}
.logo svg{width:26px;height:30px;flex:none}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:9px 13px;font-size:14.5px;color:var(--ink2);position:relative}
.nav a:hover{color:var(--ink);background:var(--raised)}
.nav a.on{color:var(--amb);background:var(--raised)}
.nav a.on:after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--amb)}
.act{display:flex;align-items:center;gap:8px}
.ca{display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;font:500 12px var(--mono);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.ca b{color:var(--ink);font-weight:500}
.ca:hover{box-shadow:inset 0 0 0 1px var(--ctl)}
.xb{width:38px;height:38px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.xb:hover{background:var(--raised)}
.xb svg{width:15px;height:15px;fill:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;font:500 14.5px var(--sans);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--ctl);color:var(--ink);transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--raised);box-shadow:inset 0 0 0 1px var(--ink2)}
.btn.pri{background:var(--amb);color:#17140a;box-shadow:none;clip-path:var(--cut);font-weight:600}
.btn.pri:hover{background:var(--amb2)}
.btn.sm{height:34px;padding:0 13px;font-size:13.5px}
.burger{display:none;width:38px;height:38px;box-shadow:inset 0 0 0 1px var(--line);place-items:center}
.burger i{display:block;width:16px;height:2px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}

/* ---------- page heads ---------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:34px 0 22px}
.ph h1{font:400 clamp(34px,4.2vw,50px)/1 var(--serif);letter-spacing:-.015em}
.ph p{color:var(--mute);margin-top:10px;max-width:640px}
.ulink{font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ctl)}
.ulink:hover{color:var(--amb);text-decoration-color:var(--amb)}
.lbl{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mono{font-family:var(--mono)}
.up{color:var(--grn)} .dn{color:var(--red)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;font:500 11.5px var(--sans);box-shadow:inset 0 0 0 1px var(--ctl);color:var(--ink2);white-space:nowrap}
.tag.amb{box-shadow:inset 0 0 0 1px var(--amb);color:var(--amb)}

/* ---------- tabs / chips ---------- */
.seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{height:38px;padding:0 14px;font-size:13.5px;color:var(--ink2);position:relative;white-space:nowrap;flex:none}
.seg button:hover{color:var(--ink);background:var(--raised)}
.seg button[aria-selected=true]{background:var(--raised);color:var(--ink)}
.seg button[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amb)}

/* ---------- inputs ---------- */
.inp{height:42px;padding:0 12px;width:100%;background:var(--ground);box-shadow:inset 0 0 0 1px var(--ctl);outline:none;font:400 15px var(--sans)}
.inp:focus,textarea.inp:focus{box-shadow:inset 0 0 0 1.5px var(--amb)}
textarea.inp{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}

/* ---------- footer ---------- */
.foot{margin-top:auto;padding:46px 0 34px}
.foot .r1{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot .r1 .logo{font-size:15px}
.foot .r1 span{color:var(--mute);font-size:14px}
.foot .r2{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.foot .r2 a{font-size:14px;color:var(--ink2);padding:4px 0}
.foot .r2 a:hover,.foot .r2 a.on{color:var(--amb)}
.foot .r2 .xb{margin-left:auto}

/* ---------- loader ---------- */
.skel{background:linear-gradient(90deg,var(--raised),var(--hover),var(--raised));background-size:200% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{padding:40px 20px;text-align:center;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);background:var(--panel)}

@media (max-width:1000px){
  .nav{display:none;position:absolute;top:66px;left:var(--g);right:var(--g);flex-direction:column;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);padding:8px}
  .nav.open{display:flex}
  .nav a.on:after{display:none}
  .burger{display:grid}
  .act .ca{display:none}
}
@media (max-width:560px){
  :root{--g:14px}
  .bar{gap:8px;padding:0 8px 0 10px}
  .logo{font-size:18px}
  .act .btn.pri{padding:0 12px;font-size:13px}
  .act .xb{display:none}
  .ph{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}