*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#30261d;color:#f7edd8;font:13px/1.5 system-ui}body{background:linear-gradient(#281b1344,#281b1366),url('../alpenlicht-20261016-r18/landscape.webp') center/cover}#spin-stage{position:absolute;inset:90px 0 42px;touch-action:none}#spin-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#spin-stage canvas:active{cursor:grabbing}#spin-status[hidden]{display:none}.spin-header{position:absolute;inset:0 0 auto;height:84px;padding:14px 160px 14px 20px;display:flex;align-items:center;gap:18px;background:#30261de8}.spin-header img{width:100px;height:48px;object-fit:contain}.spin-header h1{font:400 24px/1.2 Georgia,serif;margin:0}.spin-tip{position:absolute;left:16px;right:16px;bottom:12px;text-align:center;font:12px/1.4 system-ui;margin:0;color:#ead9bc;pointer-events:none}#spin-status{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border:1px solid #89705099;border-radius:10px;background:#30261ded;text-align:center}.spin-header a{color:inherit}html[data-embedded] .spin-header{display:none}html[data-embedded] #spin-stage{inset:0 0 42px}canvas:focus-visible{outline:2px solid #e6c080;outline-offset:-4px}@media(max-width:599px){.spin-header{padding-left:14px;gap:10px}.spin-header img{width:68px}.spin-header h1{font-size:18px}.spin-tip{font-size:11px}}



/* Own backdrop inside the WebGL view, independent of iframe transparency. */
body{position:relative;isolation:isolate;background:#30261d}
body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#241b134d,#241b1324 50%,#241b134d),linear-gradient(0deg,#241b1333,transparent 60%),url('../alpenlicht-20261016-r18/landscape.webp') 65% 72%/cover no-repeat;transform:scale(1.3);transform-origin:65% 72%}
#spin-stage{z-index:1}.spin-header{z-index:3}.spin-tip,#spin-status{z-index:2}
.spin-tip{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:6px 12px;border-radius:14px;background:#30251dbb;text-shadow:0 1px 3px #21190d}

@keyframes spin-landscape-enter{from{transform:scale(1)}to{transform:scale(1.3)}}
@keyframes spin-cube-enter{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){body::before{animation:spin-landscape-enter 950ms cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--spin-entry-delay,0ms)}#spin-stage canvas{animation:spin-cube-enter 450ms ease-out both}}
@media(prefers-reduced-motion:reduce){body::before,#spin-stage canvas{animation:none}}
/* Canvas becomes visible only after its first complete render. */
#spin-stage canvas{visibility:hidden}
html[data-spin-state="ready"] #spin-stage canvas{visibility:visible}