:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b0b0d; color: #f2f2f2; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
a:hover { color: #ff6872; }
a:focus-visible, main:focus-visible { outline: 2px solid #ff6872; outline-offset: 4px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 12px max(16px, calc((100% - 1100px) / 2)); }
header { border-bottom: 1px solid #29292f; }
.logo { font-size: 1.15rem; font-weight: 850; letter-spacing: .06em; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.active { color: #ff6872; font-weight: 700; border-bottom: 2px solid #c3101b; }
main { position: relative; flex: 1; min-height: 360px; width: 100%; }
#flutter-host { position: absolute; inset: 0; overflow: hidden; }
#loading { position: absolute; top: 30%; width: 100%; text-align: center; pointer-events: none; }
footer { border-top: 1px solid #29292f; font-size: .8rem; color: #bfc0c8; padding-top: 4px; padding-bottom: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 5; padding: 12px; background: #0b0b0d; }
.skip-link:focus { top: 8px; }
@media (max-width: 600px) { header { gap: 0; padding-top: 12px; padding-bottom: 4px; } header nav { width: 100%; justify-content: space-between; gap: 4px; } footer { gap: 0; } footer nav { gap: 18px; } }