:root { --color-primary:#1e3a8a; --color-accent:#64748b; --color-bg:#0b1220; --color-text:#e5e7eb; --color-muted:#cbd5e1; --color-surface:#111827; --color-border:#1f2937; --color-link:#93c5fd; --color-link-hover:#bfdbfe; --radius:12px; --shadow:0 8px 30px rgba(0,0,0,.2); --font-sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif; --text-max:75ch; }
:root[data-mode='dark'] { --color-bg:#0b1220; --color-text:#e5e7eb; --color-muted:#cbd5e1; --color-surface:#111827; --color-border:#1f2937; --color-link:#93c5fd; --color-link-hover:#bfdbfe; }
:root[data-mode='light'] { --color-bg:#f8fafc; --color-text:#0f172a; --color-muted:#475569; --color-surface:#ffffff; --color-border:#e5e7eb; --color-link:#2563eb; --color-link-hover:#1d4ed8; }
*{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font-sans); background:var(--color-bg); color:var(--color-text); line-height:1.6; }
.page{ padding-inline:10%; } .container{ max-width:100%; margin:0 auto; } .section{ padding:4rem 0; } .section.alt{ background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 80%, transparent), transparent); }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--color-primary); color:#fff; padding:.5rem 1rem; border-radius:.5rem; z-index:1000; }
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background: color-mix(in oklab, var(--color-bg) 75%, transparent); border-bottom:1px solid var(--color-border); }
.nav{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.75rem 0; } .brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; color:inherit; } .brand img{ width:32px; height:32px; }
.navmenu{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; } :root[data-mode='light'] .navmenu a{ color:#000; } :root[data-mode='dark'] .navmenu a{ color:#fff; } .navmenu a{ padding:.5rem .75rem; border-radius:.5rem; text-decoration:none; } .navmenu a:hover{ text-decoration:underline; }
.nav-actions{ display:flex; align-items:center; gap:.5rem; justify-self:end; }
.nav-toggle{ display:none !important; }
.btn.icon{ padding:.45rem .65rem; border-radius:.6rem; border:1px solid var(--color-border); background:var(--color-surface); color:inherit; } .btn.icon img{ display:block; width:22px; height:22px; }
:root[data-mode='dark'] .btn.icon{ background:#ffffff; color:#0f172a; border-color: color-mix(in oklab, #ffffff 20%, var(--color-border)); }
@media (max-width:880px){ .navmenu{ display:none; position:absolute; right:10%; top:3.5rem; flex-direction:column; background:var(--color-surface); padding:.5rem; border:1px solid var(--color-border); border-radius:.75rem; box-shadow:var(--shadow); } .navmenu.open{ display:flex; } .nav-actions{ display:flex; gap:.5rem; justify-self:end; } .nav-toggle{ display:inline-flex !important; order:2; align-items:center; justify-content:center; } #modeToggle{ order:1; } }
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--color-border); padding:.65rem 1rem; border-radius:.7rem; cursor:pointer; transition: transform .02s ease-in-out; } .btn:hover{ transform: translateY(-1px); text-decoration:none; } .btn.primary{ background:var(--color-primary); color:white; border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border)); } .btn.secondary{ background:var(--color-surface); color:inherit; }
.grid{ display:grid; gap:1rem; } .grid.two-col{ grid-template-columns: 1.2fr .8fr; } @media (max-width:900px){ .grid.two-col{ grid-template-columns:1fr; } }
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:1rem; box-shadow:var(--shadow); }
.form{ display:grid; gap:1rem; max-width:720px; } .form-row label{ display:block; font-weight:600; margin-bottom:.3rem; } .form-row input, .form-row textarea{ width:100%; padding:.7rem .8rem; border:1px solid var(--color-border); border-radius:.6rem; background:var(--color-bg); color:inherit; } .form-row input:focus, .form-row textarea:focus{ outline:2px solid color-mix(in oklab, var(--color-primary) 50%, transparent); }
.checkbox{ display:inline-flex; align-items:center; gap:.5rem; line-height:1.2; } .checkbox input{ margin:0; inline-size:1.1rem; block-size:1.1rem; vertical-align:middle; }
.site-footer{ border-top:1px solid var(--color-border); margin-top:2rem; } .site-footer .page{ padding-inline:10%; } .foot{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 0; } .foot nav a{ margin-right:.5rem; }