:root{--bg:#09090f;--bg2:#11111b;--card:rgba(255,255,255,.055);--stroke:rgba(255,255,255,.10);--text:#f5f5fa;--muted:#a0a0b8;--lime:#c8ff3d;--violet:#8a5cff;--pink:#ff4fa3;--cyan:#3de0ff;--grad:linear-gradient(135deg,#8a5cff,#ff4fa3);--grad-lime:linear-gradient(135deg,#c8ff3d,#3de0ff);--r:22px;--shadow:0 18px 50px rgba(0,0,0,.45);--font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Space Grotesk",var(--font)}
[data-theme=light]{--bg:#f4f3fb;--bg2:#fff;--card:rgba(255,255,255,.78);--stroke:rgba(20,20,60,.10);--text:#14142b;--muted:#5d5d7a;--lime:#4d7c00;--cyan:#0a8fb0;--shadow:0 14px 40px rgba(60,40,120,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.2}h1{font-size:clamp(26px,4.5vw,40px)}h2{font-size:20px}h3{font-size:17px}
.muted{color:var(--muted)}.tiny{font-size:12px}.center{text-align:center}[hidden]{display:none!important}.only-mobile{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.33;animation:fl 18s ease-in-out infinite}
.b1{width:420px;height:420px;background:var(--violet);top:-120px;left:-80px}.b2{width:380px;height:380px;background:var(--pink);bottom:-140px;right:-60px;animation-delay:-6s}.b3{width:300px;height:300px;background:var(--cyan);top:45%;left:55%;opacity:.15;animation-delay:-11s}[data-theme=light] .blob{opacity:.2}
@keyframes fl{50%{transform:translate(40px,-30px) scale(1.12)}}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-lime);z-index:60}
.shell{position:relative;z-index:1;display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.drawer{position:sticky;top:0;height:100vh;overflow:auto;padding:22px 16px;background:color-mix(in srgb,var(--bg2) 72%,transparent);backdrop-filter:blur(22px);border-right:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:12px;font:22px var(--display);padding:4px 8px;margin-bottom:18px}.brand b{background:var(--grad-lime);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-badge{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:16px;background:var(--grad);color:#fff;font-weight:700;font-size:22px;box-shadow:0 10px 30px rgba(138,92,255,.45)}.logo-badge.sm{width:40px;height:40px;font-size:19px}
#nav{display:flex;flex-direction:column;gap:5px}#nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;color:var(--muted);font-weight:500;transition:.2s}#nav a i{font-style:normal;width:24px;text-align:center}
#nav a:hover{background:var(--card);color:var(--text);transform:translateX(3px)}#nav a.active{background:var(--grad);color:#fff;box-shadow:0 10px 28px rgba(138,92,255,.4)}.nav-h{margin:16px 14px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.main{min-width:0;padding:0 clamp(14px,3vw,34px) 30px}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px 0;background:linear-gradient(var(--bg) 65%,transparent)}
.search-wrap{position:relative;flex:1;min-width:0}.search{display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:999px;background:var(--card);border:1px solid var(--stroke);backdrop-filter:blur(14px)}.search:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px rgba(138,92,255,.2)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:12px 0}.results{position:absolute;left:0;right:0;top:54px;background:var(--bg2);border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.results a{display:block;padding:12px 16px}.results a:hover{background:var(--card)}.results small{display:block;color:var(--muted)}
.icon-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--stroke);background:var(--card);cursor:pointer;font-size:18px;transition:.2s}.icon-btn:hover{border-color:var(--violet)}
.view{animation:rise .35s ease both;max-width:1100px}@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r);padding:20px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}.card.flat{box-shadow:none}.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{justify-content:space-between}.center-row{justify-content:center}
.grid{display:grid;gap:16px}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.gap-top{margin-top:16px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 14px}.page-head{margin:8px 0 22px}.page-head p{margin:6px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid var(--stroke);background:var(--card);cursor:pointer;font-weight:700;transition:.18s}.btn:hover{transform:translateY(-2px);border-color:var(--violet)}
.btn.primary{background:var(--grad);border:0;color:#fff;box-shadow:0 10px 26px rgba(138,92,255,.4)}.btn.lime{background:var(--grad-lime);border:0;color:#08110a}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--stroke);background:var(--card);font-size:12px;font-weight:500}.chip.alt{background:var(--grad);border:0;color:#fff}
.btn-chip{cursor:pointer;padding:8px 16px;font-size:13px}.btn-chip.on{background:var(--grad);border:0;color:#fff}.chips{margin-bottom:16px}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:clamp(20px,4vw,36px);margin-top:6px}.hero h1{margin-bottom:12px}.hero .row{margin-top:18px}
.trending h2{margin-bottom:10px}.trend{display:flex;gap:14px;align-items:center;padding:10px 6px;border-radius:14px}.trend:hover{background:var(--card)}.trend b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;background:var(--grad-lime);color:#08110a}.trend small{display:block}
.sr{display:flex;gap:14px;align-items:center}.sr:hover{border-color:var(--violet)}
.post{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:.2s}.post:hover{transform:translateY(-4px);border-color:var(--violet)}.pbody{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}.pbody p{margin:0;font-size:14px}.pbody .between{margin-top:auto}
.cover{display:grid;place-items:center;aspect-ratio:16/9;font-size:44px;background:var(--grad)}.cover.big{border-radius:var(--r);font-size:72px;margin:20px 0}
.c0{background:linear-gradient(135deg,#8a5cff,#3de0ff)}.c1{background:linear-gradient(135deg,#ff4fa3,#ffc83d)}.c2{background:linear-gradient(135deg,#3dffa2,#3de0ff)}.c3{background:linear-gradient(135deg,#3de0ff,#8a5cff)}.c4{background:linear-gradient(135deg,#ff4fa3,#8a5cff)}.c5{background:linear-gradient(135deg,#c8ff3d,#3dffa2)}
.bm{background:none;border:1px solid var(--stroke);border-radius:12px;padding:4px 8px;cursor:pointer;opacity:.6}.bm[aria-pressed=true]{opacity:1;background:var(--grad);border:0}.bm-btn{opacity:1;padding:6px 14px}.bm-btn[aria-pressed=true]{color:#fff}
.article{max-width:760px}.article h1{margin:10px 0}.toc{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.toc a{color:var(--muted)}.toc a:hover{color:var(--text)}.article aside ol{margin:8px 0 0;padding-left:20px}.article .cur{color:var(--pink);font-weight:700}
.prose{font-size:16.5px;line-height:1.75}.prose h2{margin:30px 0 10px}.prose p{max-width:70ch}code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--card);padding:2px 6px;border-radius:6px}
pre{background:#0d0d16;color:#e8e8f5;padding:16px;border-radius:16px;overflow-x:auto;border:1px solid var(--stroke);font-size:13.5px;line-height:1.6}pre code{background:none;padding:0}
textarea{width:100%;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:12px;resize:vertical}.out{margin:0;min-height:60px;white-space:pre-wrap;word-break:break-word}
.about,.follow{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(24px,5vw,44px)}.follow{max-width:460px;margin:20px auto}.about p{max-width:60ch;margin:0}
.avatar{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;background:var(--grad);color:#fff;font:700 48px var(--display);box-shadow:0 14px 40px rgba(138,92,255,.5)}.avatar.big{width:120px;height:120px;font-size:54px}
.ticks{padding-left:20px;line-height:2}.foot{margin-top:50px;padding-top:20px;border-top:1px solid var(--stroke);font-size:13px;color:var(--muted)}.foot a:hover{color:var(--text)}
.scrim{display:none}
@media(max-width:900px){.only-mobile{display:grid!important}.shell{grid-template-columns:1fr}.drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:280px;transform:translateX(-102%);transition:.25s;background:var(--bg2)}.drawer.open{transform:none}.scrim.show{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55)}
.hero,.cols-2,.cols-3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}