:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07101d;
  color: #f5f8ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background:
  radial-gradient(circle at top left, rgba(73, 173, 255, .12), transparent 32rem),
  linear-gradient(180deg, #07101d 0%, #0b1422 48%, #07101d 100%); color: #f5f8ff; }
a { color: #8bd7ff; }
a:hover { color: #c8efff; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; font-weight:800; }
.brand img { width:46px; height:46px; object-fit:contain; }
.topnav { display:flex; flex-wrap:wrap; gap:16px; font-size:.95rem; }
.topnav a { color:#c8d6e8; text-decoration:none; }
.hero { padding:72px 0 52px; }
.eyebrow { margin:0 0 12px; color:#75d0ff; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
h1 { margin:0; font-size:clamp(2.35rem, 6vw, 4.8rem); line-height:1.02; max-width:900px; }
.hero .lead { max-width:780px; margin:24px 0 0; color:#cbd8e8; font-size:clamp(1.05rem, 2vw, 1.3rem); line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; text-decoration:none; font-weight:800; }
.button.primary { background:#eaf8ff; color:#07101d; }
.button.secondary { border:1px solid rgba(151,211,255,.28); background:rgba(255,255,255,.04); color:#dff5ff; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin:18px 0 70px; }
.card { display:block; padding:24px; border:1px solid rgba(151,211,255,.18); border-radius:18px; background:rgba(255,255,255,.035); text-decoration:none; color:inherit; }
.card:hover { border-color:rgba(151,211,255,.45); background:rgba(255,255,255,.055); }
.card small { color:#75d0ff; font-weight:800; }
.card h2 { margin:10px 0 10px; font-size:1.35rem; }
.card p { margin:0; color:#b9c8da; line-height:1.65; }
.article-layout { display:grid; grid-template-columns:minmax(0, 760px) minmax(220px, 1fr); gap:48px; align-items:start; padding-bottom:80px; }
.article { font-size:1.05rem; line-height:1.8; }
.article h2 { margin:42px 0 12px; font-size:1.7rem; line-height:1.2; }
.article h3 { margin:28px 0 10px; font-size:1.2rem; }
.article p { color:#d4deea; }
.article ul, .article ol { color:#d4deea; padding-left:22px; }
.article li + li { margin-top:8px; }
.note { margin:28px 0; padding:18px 20px; border-left:4px solid #75d0ff; border-radius:10px; background:rgba(117,208,255,.08); color:#dcecff; }
.sidebar { position:sticky; top:18px; padding:20px; border:1px solid rgba(151,211,255,.16); border-radius:16px; background:rgba(5,12,22,.72); }
.sidebar strong { display:block; margin-bottom:10px; }
.sidebar a { display:block; padding:8px 0; text-decoration:none; }
.breadcrumbs { padding-top:28px; color:#8ea2ba; font-size:.9rem; }
.breadcrumbs a { color:#a9c4da; text-decoration:none; }
.related { border-top:1px solid rgba(151,211,255,.14); padding:34px 0 70px; }
.related h2 { margin-top:0; }
.footer { border-top:1px solid rgba(151,211,255,.12); padding:28px 0 42px; color:#8193a8; font-size:.9rem; }
.meta { margin-top:18px; color:#8da1b8; font-size:.9rem; }
@media (max-width: 820px) {
  .site-header { align-items:flex-start; flex-direction:column; }
  .grid { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .hero { padding-top:48px; }
}