:root {
  --bg: #eef2f0; --ink: #172629; --muted: #566a6e; --rule: #c6d1ce;
  --seal: #0d5c47; --seal-bg: #dde9e4;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0 auto; max-width: 44rem; padding: 3rem 1.25rem 4rem; font: 1.0625rem/1.6 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin: 0 0 .75rem; letter-spacing: -.01em; }
header p { color: var(--muted); max-width: 36rem; margin: 0; }
main { margin-top: 2.5rem; border-top: 2px solid var(--ink); }

.dl { display: inline-block; background: var(--ink); color: var(--bg); padding: .4rem .9rem; border-radius: 3px; text-decoration: none; font-weight: 600; word-break: break-all; }
.dl:hover { background: var(--seal); }
a:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; }
a { color: var(--seal); }
.verify { margin-top: 3rem; }
.verify h2 { font-size: 1.45rem; margin: 0 0 .5rem; }
.verify h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
pre { margin: 0; padding: .65rem .9rem; background: #fff; border: 1px solid var(--rule); font: .9rem/1.5 var(--mono); overflow-x: auto; }
.empty { padding: 2rem 0; color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .875rem; }

.crumbs { margin: 0 0 .75rem; font-size: .9375rem; color: var(--muted); }
.crumbs span { margin: 0 .3rem; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.folders a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--seal); color: var(--ink); text-decoration: none; }
.folders a:hover { border-color: var(--seal); }
.fname { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.fcount { color: var(--muted); font-size: .875rem; }

.challenge input:focus-visible, .challenge button:focus-visible { outline: 3px solid var(--seal); outline-offset: 2px; }
.challenge button { border: 0; cursor: pointer; font: inherit; font-weight: 600; transition: background-color .15s, opacity .15s; }
/* Knappen er grå indtil svaret er rigtigt (ren CSS, intet JavaScript) */
.challenge input:invalid + button { background: var(--rule); color: var(--muted); cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .challenge button { transition: none; } }

/* Kompakt filliste */
.filelist { list-style: none; margin: 0; padding: 0; }
.file { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; row-gap: .35rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.file h2 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin: 0; }
.meta { color: var(--muted); font-size: .8125rem; margin: .1rem 0 0; }
.challenge { display: flex; align-items: center; gap: .45rem; margin: 0; white-space: nowrap; }
.challenge label { font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.challenge input[type=text] { width: 3rem; padding: .35rem .3rem; font: 1rem var(--sans); text-align: center; color: var(--ink); background: #fff; border: 1px solid var(--muted); border-radius: 3px; }
.fp { grid-column: 1 / -1; margin: 0; padding: .2rem .55rem; background: var(--seal-bg); border-left: 3px solid var(--seal); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.fp span { font-weight: 600; color: var(--seal); margin-right: .35rem; }
.fp code { font-family: var(--mono); user-select: all; }
.error { grid-column: 1 / -1; color: #8a1c1c; background: #f6e3e1; border-left: 3px solid #8a1c1c; padding: .3rem .6rem; margin: 0; font-size: .875rem; }
@media (max-width: 34rem) {
  .file { grid-template-columns: 1fr; }
}