:root { --nat: #1e2547; --nat-2: #2b3363; --lys: #fff4dc; --papir: #fffaf0; --side: #fbf3e2; --blaek: #1b2140; --blaek-2: #4d5372; --guld: #f5b83d; --kant: #e6dbc2; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--side); color: var(--blaek); font: 18px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.nat { background: var(--nat); color: var(--lys); padding: 32px 0; }
.top { display: flex; align-items: center; gap: 20px; }
.ikon { border-radius: 22px; flex: none; }
h1 { margin: 0; font-size: 2.2rem; line-height: 1.1; }
.sub { margin: 6px 0 0; color: #c7cae6; }
h2 { font-size: 1.35rem; margin: 32px 0 8px; }
main section { margin-bottom: 8px; }
.kort { background: var(--papir); border: 2px solid var(--kant); border-radius: 20px; padding: 4px 20px 8px; margin-top: 24px; }
.bekraeft { border-color: var(--guld); }
.bekraeft h2 { margin-top: 16px; }
a { color: var(--blaek); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fod { color: var(--blaek-2); font-size: .95rem; padding-top: 24px; padding-bottom: 40px; border-top: 2px solid var(--kant); margin-top: 32px; }
@media (prefers-color-scheme: dark) {
  :root { --side: #10142c; --papir: #232a4e; --blaek: #f5eedf; --blaek-2: #bdbad0; --kant: #323a66; --nat: #0b0e22; }
}
.knap { display: inline-block; background: var(--guld); color: #1b2140; border: 2.5px solid #1b2140; border-radius: 16px; padding: 14px 28px; font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.knap:active { transform: translateY(1px); }
.start { border-color: var(--kant); }