:root{
  --bg:#0D1117; --panel:#161B22; --panel-2:#1C2230; --line:#2A3240; --line-2:#3A4657;
  --ink:#E6EDF3; --ink-soft:#A9B6C6; --ink-mute:#7688A3;
  --v:#8B5CF6; --c:#22D3EE; --ok:#3FB950; --warn:#D29922; --bad:#F85149;
  --grad:linear-gradient(135deg,var(--v),var(--c));
  --mono:ui-monospace,"JetBrains Mono",Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 420px at 82% -8%,rgba(139,92,246,.12),transparent 60%),radial-gradient(700px 360px at 4% 0,rgba(34,211,238,.08),transparent 55%)}
a{color:var(--c);text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:6px}
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(16px,4vw,28px)}

.site{display:flex;align-items:center;gap:16px;max-width:960px;margin:0 auto;padding:16px clamp(16px,4vw,28px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink)}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.site nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.site nav a{color:var(--ink-soft);padding:8px 13px;border-radius:9px;font-size:14.5px;font-weight:500}
.site nav a:hover{background:var(--panel);color:var(--ink)}
.site nav a.cta{background:var(--grad);color:#0A0E14;font-weight:700}

.hero{text-align:center;padding:40px 0 20px}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.08;letter-spacing:-.02em;margin:.2em 0 .3em}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:620px;margin:0 auto 26px;color:var(--ink-soft);font-size:clamp(15px,2.3vw,18px)}
.hero__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);border-radius:11px;padding:12px 22px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);background:#232B3A}
.btn--primary{border-color:transparent;background:var(--grad);color:#0A0E14;box-shadow:0 14px 30px -12px rgba(139,92,246,.6)}
.hero__note{margin-top:16px;color:var(--ink-mute);font-size:13px}

section.block{padding:44px 0;border-top:1px solid var(--line)}
section.block h2{font-size:clamp(22px,3.6vw,30px);margin:0 0 6px;letter-spacing:-.01em}
section.block .lead{color:var(--ink-soft);margin:0 0 24px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.card h3{margin:0 0 6px;font-size:16px;color:#C4B5FD}
.card p{margin:0;color:var(--ink-soft);font-size:14px}
.steps{counter-reset:s;display:grid;gap:12px}
.step{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.step::before{counter-increment:s;content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#0A0E14;font-weight:800;display:flex;align-items:center;justify-content:center}
.step div{flex:1}.step h3{margin:0 0 2px;font-size:15px}.step p{margin:0;color:var(--ink-soft);font-size:14px}
pre.code{background:#0A0E14;border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow:auto;font-family:var(--mono);font-size:13.5px;color:#D6E2F0;line-height:1.7}
pre.code .c{color:var(--ink-mute)}
.callout{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--v);border-radius:12px;padding:16px 18px;color:var(--ink-soft);font-size:14px;margin-top:16px}
.callout strong{color:var(--ink)}

.forocta{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(34,211,238,.08));border:1px solid var(--line-2);border-radius:var(--radius);padding:26px;text-align:center}
.forocta h2{margin:0 0 6px}
.forocta p{color:var(--ink-soft);max-width:560px;margin:0 auto 18px}

.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:28px clamp(16px,4vw,28px) 44px;text-align:center;color:var(--ink-mute)}
.site-footer .mark{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px}
.site-footer p{font-size:13px;max-width:560px;margin:8px auto 12px}
.site-footer nav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.site-footer nav a{color:var(--ink-soft);font-size:13.5px}
.site-footer .author{font-size:12.5px;line-height:1.9}
.site-footer .author a{color:var(--ink-soft)}

/* ---------- Foro ---------- */
.foro-head{text-align:center;padding:26px 0 8px}
.foro-head h1{font-size:clamp(24px,4vw,34px);margin:0 0 6px}
.foro-head p{color:var(--ink-soft);margin:0 auto;max-width:600px}
.foro-note{color:var(--ink-mute);font-size:12.5px;text-align:center;margin:10px auto 0;max-width:640px}
.uploader{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin:22px 0}
.uploader .drop{border:2px dashed var(--line-2);border-radius:12px;padding:22px;text-align:center;color:var(--ink-soft);cursor:pointer;transition:.15s}
.uploader .drop.hover{border-color:var(--c);background:rgba(34,211,238,.06)}
.uploader .drop b{color:var(--ink)}
.uploader .row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.uploader input[type=text]{flex:1;min-width:180px;padding:11px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-size:14px}
.uploader .ok{color:var(--ok);font-size:13px;margin-top:8px}
.uploader .err{color:var(--bad);font-size:13px;margin-top:8px}
.tswrap{margin-top:12px}

.feed{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.15s}
.post:hover{border-color:var(--line-2);background:var(--panel-2)}
.post__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.post__title{font-weight:700;font-size:16px}
.post__time{color:var(--ink-mute);font-size:12px;font-family:var(--mono);white-space:nowrap}
.post__stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-soft)}
.chip b{color:var(--ink)}
.post__foot{margin-top:10px;color:var(--ink-mute);font-size:12.5px;display:flex;gap:14px}

.thread{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:20px;margin-top:8px}
.thread .back{color:var(--ink-soft);cursor:pointer;font-size:13.5px}
.thread h2{margin:8px 0 2px}
.thread .devs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.dev{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.dev b{display:block}.dev small{color:var(--ink-mute);font-family:var(--mono);font-size:11px}
.comments{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.comment{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px}
.comment .meta{color:var(--ink-mute);font-size:11px;font-family:var(--mono);margin-bottom:4px}
.cbox{display:flex;gap:10px;margin-top:12px}
.cbox textarea{flex:1;min-height:52px;resize:vertical;padding:10px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px}
.empty{text-align:center;color:var(--ink-mute);padding:40px 20px}
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:600}
.toast--ok{border-color:rgba(63,185,80,.5)} .toast--err{border-color:rgba(248,81,73,.5)}
.legal{max-width:720px;margin:0 auto;padding:10px clamp(16px,4vw,28px) 20px}
.legal .crumbs{color:var(--ink-mute);font-size:13px;margin:10px 0}
.legal .crumbs a{color:var(--ink-soft)}
.legal h1{font-size:clamp(24px,4vw,32px);margin:6px 0}
.legal .lead{color:var(--ink-soft);margin:0 0 20px}
.legal h2{font-size:18px;margin:24px 0 8px;color:#C4B5FD}
.legal p,.legal li{color:var(--ink-soft);font-size:14.5px;line-height:1.7}
.legal a{color:var(--c)}
.legal .back{display:inline-block;margin-top:24px;color:var(--ink-soft)}
[hidden]{display:none!important}
@media(max-width:560px){.site nav a:not(.cta){display:none}}