:root{
  --bg:#07080a; --panel:#0d0f13; --panel2:#111419; --line:#1e232b;
  --text:#e8eaee; --dim:#9aa3b2; --faint:#5c6672;
  --acc:#7c5cff; --acc2:#3ddc97; --warn:#ffb454;
  --display:'Space Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--display);line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 75% -10%, rgba(124,92,255,.14), transparent 60%),
             radial-gradient(700px 400px at 10% 110%, rgba(61,220,151,.07), transparent 60%);}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
header{position:sticky;top:0;z-index:10;background:rgba(7,8,10,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:60px}
.logo{font-family:var(--mono);font-weight:500;font-size:1rem;letter-spacing:.06em}
.logo b{color:var(--acc)}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{font-size:.86rem;color:var(--dim)} .nav nav a:hover,.nav nav a.on{color:var(--text)}
.btn{display:inline-block;padding:.72rem 1.3rem;border-radius:10px;font-weight:500;font-size:.9rem;border:1px solid var(--line)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.nav .btn{padding:.5rem 1rem}
.telnav{font-family:var(--mono);font-size:.86rem;color:var(--text);white-space:nowrap}
.telfoot{font-family:var(--mono);color:var(--dim)}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--faint);font-size:.82rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page{padding:56px 0 80px}
.page h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1.08;max-width:18ch}
.dek{color:var(--dim);font-size:1.12rem;max-width:62ch;margin:1rem 0 1.4rem}
.meta{font-family:var(--mono);font-size:.75rem;color:var(--faint);margin-bottom:2rem}
article.post{max-width:72ch}
article.post h2{font-size:1.45rem;margin:2rem 0 .6rem;letter-spacing:-.02em}
article.post p,article.post li{color:var(--dim);font-size:1.02rem}
article.post p{margin:.8rem 0}
article.post ul,article.post ol{margin:.6rem 0 1rem 1.2rem}
article.post li{margin:.35rem 0}
article.post a{color:var(--acc2);text-decoration:underline;text-underline-offset:2px}
article.post strong{color:var(--text);font-weight:600}
.refs{margin-top:2.4rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.refs h2{font-size:1rem;margin:0 0 .8rem}
.refs ol{margin:0 0 0 1.1rem}
.refs li{margin:.45rem 0;color:var(--dim);font-size:.92rem}
.list{display:flex;flex-direction:column;gap:14px;margin-top:1.6rem}
.item{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.item:hover{border-color:var(--acc)}
.item h2{font-size:1.25rem;margin:.35rem 0 .4rem}
.item p{color:var(--dim);font-size:.95rem}
.note{margin-top:1.6rem;border-left:3px solid var(--warn);padding:4px 0 4px 16px;color:var(--dim);max-width:70ch}
@media(max-width:760px){.nav nav{display:none}.telnav{margin-left:auto}.wrap{padding:0 18px}}