:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #091d2a; color: #f4f8f8; }
body.start { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(155deg, #183e4e, #071622 75%); }
.intro { max-width: 860px; padding: 3rem 1.5rem; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.04em; margin: .1em 0 .35em; }
p { line-height: 1.55; }
.intro > p:not(.source):not(.eyebrow) { max-width: 65ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; font-weight: 700; color: #9cd7d4; }
.choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; margin: 2rem 0; }
.choices a { border: 1px solid #80aaa9; border-radius: .6rem; color: white; padding: 1.4rem; text-decoration: none; background: #ffffff0d; }
.choices a:hover,.choices a:focus-visible { background: #ffffff20; outline: 2px solid #c6f3ed; }
.choices strong,.choices span { display: block; } .choices strong { font-size: 1.35rem; } .choices span { margin-top: .6rem; color: #b8d5d4; }
.details,.source { font-size: .85rem; color: #c4d7d8; } a { color: #bbefeb; }
.viewer { overflow: hidden; } #view, #view canvas { width: 100vw; height: 100vh; display: block; } #view canvas { touch-action: none; cursor: grab; } #view canvas:active { cursor: grabbing; }
.overlay { position: absolute; top: 0; left: 0; padding: 1.2rem 1.5rem; max-width: 470px; pointer-events: none; text-shadow: 0 1px 4px #001b29; }
.overlay a { pointer-events: auto; } .overlay h1 { font-size: 2rem; } .overlay p { font-size: .8rem; }
.credit { position: absolute; bottom: 0; left: 0; right: 0; padding: .55rem 1rem; font-size: .7rem; background: #071622c9; }
#error { color: #ffe0a8; }
.kystnote { position: absolute; right: 1rem; top: 1rem; width: min(285px, 40vw); padding: .8rem 1rem; border-radius: .5rem; background: #092634dd; color: #e5f3f2; font-size: .76rem; line-height: 1.45; }
@media (max-width: 700px) { .kystnote { top: auto; right: .6rem; bottom: 3.6rem; width: min(300px, 75vw); } .overlay { max-width: 100%; } }
.knap { pointer-events: auto; font: inherit; font-size: .8rem; color: #f4f8f8; background: #092634dd; border: 1px solid #80aaa9; border-radius: .4rem; padding: .35rem .7rem; cursor: pointer; }
.knap:hover, .knap:focus-visible { background: #164357; outline: 2px solid #c6f3ed; }