:root{--bg: #0f172a;--panel: #111827;--text: #e5e7eb;--muted: #9ca3af;--border: #1f2937;--accent: #22d3ee;--accent-2: #a78bfa;--shadow: 0 10px 30px rgba(0,0,0,.35)}:root[data-theme=light]{--bg: #ffffff;--panel: #f8fafc;--text: #0b1220;--muted: #475569;--border: #e2e8f0;--accent: #0ea5e9;--accent-2: #7c3aed;--shadow: 0 10px 30px rgba(0,0,0,.06)}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1000px;margin:0 auto;padding:1.25rem}header{position:sticky;top:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in oklab,var(--bg),transparent 25%);border-bottom:1px solid var(--border);z-index:10}nav{display:flex;gap:1rem;align-items:center;justify-content:space-between}.brand{font-weight:700;letter-spacing:.2px}.navlinks{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.btn{display:inline-block;padding:.5rem .9rem;border-radius:.7rem;border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--panel),#000 2%),color-mix(in oklab,var(--panel),#000 7%));color:var(--text);box-shadow:var(--shadow)}.btn:hover{border-color:color-mix(in oklab,var(--border),#000 12%)}.grid{display:grid;gap:1rem}@media (min-width: 640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--panel),#000 2%),color-mix(in oklab,var(--panel),#000 7%));padding:1rem;border-radius:1rem;box-shadow:var(--shadow)}footer{border-top:1px solid var(--border);color:var(--muted)}input,textarea{width:100%;padding:.6rem .7rem;border-radius:.7rem;border:1px solid var(--border);background:color-mix(in oklab,var(--panel),#000 7%);color:var(--text)}label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.35rem}.field{margin-bottom:.9rem}.muted{color:var(--muted)}.hero{padding:3rem 0}.title{font-size:2rem;margin:0 0 .5rem}.subtitle{color:var(--muted);margin:0 0 1rem}.spacer{height:2rem}.toggle{cursor:pointer;font-size:.9rem;color:var(--muted)}