:root{--bg:#f9fafb;--fg:#0f172a;--muted:#64748b;--card:#ffffff;--stroke:#e2e8f0;--shadow:0 16px 50px rgba(2,6,23,0.06);--primary:#111827;--primary-ink:#fff;--accent1:#3b82f6;--accent2:#9333ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body,html{height:100%;margin:0;padding:0}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);background:radial-gradient(1200px 500px at 10% -10%,rgba(99,102,241,.12),transparent 50%),radial-gradient(1000px 600px at 110% 0,rgba(59,130,246,.1),transparent 55%),var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;min-height:100vh}main{flex:1 1}.container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3,h4{margin:0 0 10px;line-height:1.15}p{margin:0 0 12px;color:var(--muted)}.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:800;border:1px solid transparent;transition:filter .15s ease,transform .05s ease}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 10px 26px rgba(2,6,23,.12)}.btn--light{background:#fff;color:#111827;border-color:var(--stroke)}.btn--ghost{border-color:var(--fg);color:var(--fg);background:transparent}.btn--sm{padding:8px 12px;font-weight:700}.btn--block{display:block;width:100%;text-align:center}.section{padding:56px 0}.section.dark{background:#0b1020;color:#cfe3ff}.section.dark p{color:#a9c1ff}.section__title{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:10px}.section__intro{margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px}.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.section.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);box-shadow:none}@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid{grid-template-columns:1fr}}a{color:inherit;text-decoration:none}label{font-weight:600;font-size:.95rem}input,select{padding:12px 14px;border-radius:10px;border:1px solid #cbd5e1;background:#f8fafc;transition:border-color .2s ease;width:100%}input:focus,select:focus{border-color:#6366f1;outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.15)}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.toast{position:fixed;top:24px;right:24px;background:#0f172a;color:white;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow);animation:fadeInOut 3.5s ease forwards}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.gradient{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.nav{position:-webkit-sticky;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);background:rgba(249,250,251,.7);border-bottom:1px solid rgba(226,232,240,.6);a{text-decoration:none}a,a:visited{color:inherit}a:focus,a:hover{color:inherit;text-decoration:none}a:active{color:inherit}}.nav__content{display:flex;align-items:center;justify-content:space-between;height:64px}.logo{font-weight:800;letter-spacing:.2px;font-size:1.1rem}.logo span{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.nav__links{display:flex;gap:16px;align-items:center}@media (max-width:560px){.nav__links{display:none}}.footer{position:fixed;bottom:0;left:0;width:100%;background:#0f172a;color:#f1f5f9;border-top:1px solid #1e293b;box-shadow:0 -6px 16px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:space-between;padding:10px 24px;font-size:.9rem;z-index:100}.footer p{margin:0;color:#cbd5e1;font-weight:500}.footer__links{display:flex;gap:16px}.footer__links a{color:#93c5fd;text-decoration:none;font-weight:500;transition:color .2s ease}.footer__links a:hover{color:#fff}@media (max-width:700px){.footer{flex-direction:column;text-align:center;gap:8px;padding:14px}.footer__links{justify-content:center}}