/* aptrouter a8 — light theme tokens, theme-flip transitions, responsive layout. */
:root { --surface: #101113; --surface-2: #181a1d; --border: #242729; --faint: #6b7177; }
html { --nav-bg: rgba(8, 9, 10, 0.72); scroll-padding-top: 76px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 5px; }
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
html[data-theme="light"] { --bg: #f7f7f4; --surface: #ffffff; --surface-2: #eceae1; --border: #d8d7cd; --fg: #16181b; --muted: #51565c; --faint: #868b8f; --amber: #a5650a; --amber-wash: rgba(165, 101, 10, 0.10); --green: #1d9b54; --neg: #cf4842; --nav-bg: rgba(247, 247, 244, 0.80); color-scheme: light; }
html[data-theme="light"] .btn-primary { color: #fff; }
html[data-theme="light"] ::selection { background: var(--amber-wash); }
body, .card, .code-window, .code-window-bar, .code-window-body, .input, header, footer, aside, .badge, .keybox { transition: background-color .32s ease, border-color .32s ease, color .32s ease; }
body { position: relative; }
body::before { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(640px circle at 14% 14%, var(--amber-wash), transparent 46%), radial-gradient(720px circle at 86% 82%, color-mix(in oklch, var(--green) 7%, transparent), transparent 50%), radial-gradient(560px circle at 64% 46%, color-mix(in oklch, var(--amber) 5%, transparent), transparent 55%); animation: aptDrift 32s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--faint) 1px, transparent 1px); background-size: 34px 34px; opacity: .05; }
@keyframes aptDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, -3%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }
img, svg, canvas { max-width: 100%; } .code-window-body { max-width: 100%; }
@media (min-width: 3200px) { html { zoom: 1.5; } } @media (min-width: 5000px) { html { zoom: 2.2; } } @media (min-width: 7000px) { html { zoom: 3.0; } }
@media (max-width: 400px) { h1 { font-size: clamp(30px, 8.4vw, 37px) !important; line-height: 1.08 !important; } [style*="padding: 0 24px"] { padding-left: 18px !important; padding-right: 18px !important; } }