:root { color-scheme: light; --bg:#f7f7fb; --card:#fff; --text:#14141f; --muted:#66677a; --line:#e7e7ef; --brand:#4f46e5; }
* { box-sizing: border-box; } body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
.shell { max-width:1120px; margin:0 auto; padding:32px 18px; } .hero { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:22px; }
h1 { margin:6px 0 8px; font-size:38px; letter-spacing:-.03em; } h2 { margin-top:0; } .eyebrow { color:var(--brand); text-transform:uppercase; font-weight:700; letter-spacing:.12em; font-size:12px; }
.muted { color:var(--muted); } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(20,20,31,.05); overflow:hidden; }
.badge { background:#eef2ff; color:#3730a3; padding:8px 12px; border-radius:999px; font-weight:700; }
button { background:var(--brand); color:white; border:0; border-radius:12px; padding:11px 14px; font-weight:700; cursor:pointer; } button:hover { filter:brightness(.95); }
input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
pre, code { background:#10111a; color:#d7e1ff; border-radius:12px; padding:12px; display:block; overflow:auto; white-space:pre-wrap; }
.wide { grid-column: 1 / -1; }
iframe { width:100%; min-height:680px; border:1px solid var(--line); border-radius:14px; background:white; }
@media (max-width:760px){ .grid,.hero{grid-template-columns:1fr; display:block;} h1{font-size:30px;} }