:root { --ink:#142033; --muted:#5b6677; --blue:#1457d9; --blue-dark:#0b347f; --green:#15945e; --line:#dbe3ef; --surface:#ffffff; --soft:#f2f6fb; --shadow:0 18px 50px rgba(22,45,82,.12); }
* { box-sizing:border-box; }
html { background:#eaf0f8; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; }
body { margin:0; min-width:320px; }
a { color:var(--blue-dark); }
.site-shell { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 18px; background:linear-gradient(170deg,#0b2556,#0b3f85 58%,#0a635c); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; margin:18px 4px 28px; color:#fff; text-decoration:none; font-size:1.1rem; font-weight:750; line-height:1.15; }
.brand img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 5px 12px rgba(0,0,0,.25)); }
.nav-toggle { width:100%; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:9px 12px; background:rgba(255,255,255,.08); color:#fff; text-align:left; cursor:pointer; }
nav { display:grid; gap:5px; }
nav a { padding:10px 12px; border-radius:9px; color:#dceaff; text-decoration:none; }
nav a:hover, nav a.active { background:#fff; color:#0b347f; }
main { min-width:0; padding:26px clamp(22px,4vw,70px) 48px; }
.local-banner { display:inline-block; margin-bottom:22px; padding:7px 12px; border:1px solid #e6a82c; border-radius:999px; background:#fff6d9; color:#6e4c00; font-weight:650; }
.hero, .page-head, section { max-width:1180px; }
.hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr); gap:38px; align-items:center; padding:clamp(28px,5vw,68px); border-radius:28px; background:linear-gradient(135deg,#fff,#edf4ff); box-shadow:var(--shadow); }
.hero-logo { width:min(100%,320px); justify-self:center; filter:drop-shadow(0 18px 24px rgba(18,55,110,.18)); }
h1 { margin:.2em 0; max-width:900px; font-size:clamp(2.1rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.045em; }
h2 { margin-top:0; font-size:clamp(1.45rem,2.5vw,2.1rem); }
h3 { margin:.25em 0 .55em; }
.lead { max-width:850px; color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.65; }
.eyebrow { margin:0; color:var(--green); font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
section { margin:28px 0; padding:clamp(24px,4vw,42px); border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.page-head { background:linear-gradient(135deg,#fff,#eaf2ff); box-shadow:var(--shadow); }
.feature-grid, .download-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.feature-grid article, .download-card, .command-list article, .hash-card { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.button { display:inline-block; padding:10px 16px; border:1px solid #aac0e5; border-radius:10px; background:#fff; color:var(--blue-dark); font-weight:700; text-decoration:none; }
.button.primary { border-color:var(--blue); background:var(--blue); color:#fff; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.meta { color:var(--muted); font-size:.9rem; }
code { overflow-wrap:anywhere; font-family:"Cascadia Mono",Consolas,monospace; }
pre { overflow:auto; padding:18px; border-radius:14px; background:#101a2b; color:#edf4ff; }
.steps article { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; margin:18px 0; }
.steps article > span { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#dce9ff; color:var(--blue-dark); font-weight:800; }
.steps h2 { margin:0; font-size:1.25rem; }
.command-list, .hash-list { display:grid; gap:12px; }
.faq-list details { margin:10px 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.faq-list summary { cursor:pointer; font-weight:750; }
address { font-style:normal; line-height:1.7; }
.notice { padding:16px; border-left:4px solid #e6a82c; background:#fff6d9; }
footer { max-width:1180px; margin-top:34px; padding:20px 4px; color:var(--muted); font-size:.9rem; }
.sidebar.collapsed { width:82px; padding-inline:12px; }
.sidebar.collapsed .brand span, .sidebar.collapsed .nav-toggle span, .sidebar.collapsed nav { display:none; }
.site-shell:has(.sidebar.collapsed) { grid-template-columns:82px minmax(0,1fr); }
@media (max-width:760px) { .site-shell { display:block; } .sidebar { position:relative; width:auto; height:auto; } .site-shell:has(.sidebar.collapsed) { display:block; } .sidebar.collapsed { width:auto; } .sidebar.collapsed .brand { display:none; } .hero { grid-template-columns:1fr; } .hero-logo { max-width:220px; } main { padding:18px 14px 36px; } section { padding:22px 18px; } }