* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #020503; color: #edf3e9; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
header, footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 28px clamp(20px, 5vw, 80px); }
header { border-bottom: 1px solid #192219; }
.wordmark { font-size: 14px; font-weight: 650; letter-spacing: .24em; }
.wordmark span { color: #a7b69d; font-weight: 400; }
.version { color: #a7b69d; font-size: 12px; letter-spacing: .08em; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 0 24px; }
.intro { text-align: center; padding: 0 20px 22px; }
.eyebrow { color: #a6bf8e; font-size: 12px; letter-spacing: .14em; }
h1 { font-size: clamp(21px, 3vw, 35px); font-weight: 350; letter-spacing: -.025em; margin: 12px 0 0; }
.portrait { position: relative; width: min(100%, 1600px); aspect-ratio: 2048 / 946; background: #000 url("assets/xenia-original.png") center / 100% 100% no-repeat; }
.lids { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lid-edge { fill: none; stroke: #7e7941; stroke-width: 2; opacity: 0; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 24px 20px 0; }
button { appearance: none; font: inherit; font-size: 13px; color: #dce9ce; background: #111c10; border: 1px solid #3d5031; border-radius: 999px; padding: 12px 20px; cursor: pointer; min-height: 44px; }
button:hover:not(:disabled) { background: #21301a; border-color: #8aa568; }
button:focus-visible { outline: 2px solid #d0ecaa; outline-offset: 4px; }
button:disabled { cursor: default; opacity: .5; }
#status, noscript { max-width: 620px; text-align: center; font-size: 12px; color: #a9b4a2; padding: 0 20px; line-height: 1.6; }
footer { border-top: 1px solid #192219; color: #91a18b; font-size: 11px; padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 600px) { header { padding-top: 22px; padding-bottom: 22px; } main { padding-top: 50px; } .intro { padding-bottom: 38px; } footer { flex-direction: column; text-align: center; gap: 7px; } .controls { padding-top: 38px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }