:root{color-scheme:dark;background:#191713;color:#faf5ec;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
#story{height:660vh;height:660svh}
#stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;background:#413b31;isolation:isolate}
canvas,#compare-ui{position:absolute;inset:0;width:100%;height:100%}
#finale{position:absolute;left:0;right:0;bottom:0;padding:6rem clamp(1rem,5vw,5rem) 8rem;background:linear-gradient(transparent,#17140fdf 62%,#17140ff8);pointer-events:none}
.eyebrow,legend{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#e1ca9e}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.01;margin:.35em 0 .25em}
h1{font-size:clamp(2rem,5.5vw,5.8rem);max-width:16ch}
h2{font-size:clamp(2rem,5vw,4rem)}
p{margin:0 0 1.15rem}
.cta,button,fieldset span{border:1px solid #fff5;border-radius:.25rem;padding:.55rem .8rem;color:inherit;background:#242019;text-decoration:none;font:inherit;cursor:pointer}
.cta{display:inline-flex;gap:1.1rem;background:#eedbc0;color:#231a12;pointer-events:auto}
.cta:hover{background:#fff0dc}
#controls{display:flex;gap:.6rem 1rem;align-items:end;flex-wrap:wrap;position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:clamp(1rem,5vw,5rem);right:clamp(1rem,5vw,5rem);font-size:.8rem}
fieldset{margin:0;padding:0;border:0;display:flex;gap:.3rem;flex-wrap:wrap}
legend{margin:0 0 .28rem}
fieldset label{display:flex;position:relative}
fieldset input,.sr{position:absolute;width:1px;height:1px;opacity:0}
fieldset input:checked+span,button[aria-pressed=true]{background:#eedbc0;color:#231a12}
:focus-visible,fieldset input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
#compare-ui{--split:50%;pointer-events:none}
#compare-ui span{position:absolute;top:1rem;background:#211b14dc;padding:.35rem .65rem;border-radius:.2rem}
.before{left:1rem}.after{right:1rem}
#divider{position:absolute;left:var(--split);top:0;bottom:0;border-left:2px solid #fff}
#split{position:absolute;top:36%;left:0;width:100%;margin:0;appearance:none;background:transparent;pointer-events:auto;cursor:ew-resize;height:48px;touch-action:pan-y}
#split::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border:2px solid white;border-radius:50%;background:#403528}
#split::-moz-range-thumb{width:26px;height:26px;border:2px solid white;border-radius:50%;background:#403528}
#kontakt{min-height:52vh;padding:clamp(2rem,8vw,8rem) clamp(1rem,5vw,5rem)}
#failure{position:absolute;top:1rem;left:1rem;right:1rem;background:#221a14;padding:1rem}
#failure a{color:inherit}
@media(max-width:680px){#finale{padding-bottom:10rem}#controls{gap:.45rem .6rem;font-size:.71rem}fieldset span,button{padding:.43rem .52rem}#finale p{font-size:.83rem}}
@media(max-height:540px){#finale{padding-top:1.5rem;padding-bottom:5rem}h1{font-size:clamp(1.65rem,5vh,3rem)}}
@media(max-width:680px) and (max-height:540px){#finale{padding-bottom:7rem}}
@media(prefers-reduced-motion:reduce){#story{height:auto}}
@media(min-width:681px){#finale{background:linear-gradient(0deg,#17140ff2,#17140f65 46%,transparent 100%);padding-top:2.6rem}h1{font-size:clamp(2rem,4.8vw,5.2rem)}}