:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #d8dfc9; background: #19221d; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
.diorama { width: 100%; height: 100svh; min-height: 220px; position: relative; display: grid; place-items: center; padding: 22px 24px 64px; isolation: isolate; background: radial-gradient(ellipse at 48% 45%, #35402a 0, #232e23 42%, #18221d 77%, #141c18 100%); }
html[data-bg="water"] .diorama { background: radial-gradient(ellipse at 26% 8%, #345256, #28444b 54%, #1e353f); }
html[data-bg="water"] .scene-frame::before { opacity: .22; }
#scene.scene-fullscreen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 650ms ease; }
.is-ready #scene.scene-fullscreen { opacity: 1; }
#scene[hidden] { display: none; }
html[data-bg="space"] .diorama { background: linear-gradient(180deg, #060c1205, #020a1029), url('./background-space.webp') center / cover, #0b151d; }
html[data-bg="space"] .scene-frame::before { opacity: .45; }
.scene-frame { position: relative; width: min(100%, calc((100svh - 84px) * 1.5), 1450px); aspect-ratio: 3 / 2; user-select: none; -webkit-user-select: none; touch-action: none; }
.scene-frame::before { content: ""; position: absolute; left: 8%; right: 2%; top: 75%; height: 29%; background: radial-gradient(ellipse at center, #0208059c 0%, #040b0773 26%, #050c0838 48%, #050c0812 62%, transparent 75%); transform: rotate(-3deg); pointer-events: none; }
.scene-frame > img, .scene-frame > canvas { position: absolute; display: block; inset: 0; width: 100%; height: 100%; }
.scene-frame > [hidden] { display: none; }
#scene { cursor: default; }
.scene-frame { opacity: 0; transition: opacity 650ms ease; }
.is-ready .scene-frame, .is-fallback .scene-frame { opacity: 1; }
.footer { position: absolute; z-index: 2; bottom: max(24px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 13px; color: #c4cdb3a8; }
.github { width: 36px; height: 36px; display: grid; place-items: center; color: #c4cdb38f; border-radius: 50%; }
.github:hover { color: #e0e8d1; }
.github:focus-visible { outline: 2px solid #c8dba7; outline-offset: 4px; }
.loader { position: absolute; width: 20px; height: 20px; border: 1px solid #d6dec12a; border-top-color: #d6dec199; border-radius: 50%; animation: loading 1s linear infinite; }
@keyframes loading { to { transform: rotate(360deg); } }
.is-ready .loader, .is-fallback .loader { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.region-overlay { pointer-events: none; }
@media (max-width: 640px) {
  .diorama { padding: 0 2px 70px; }
  .scene-frame { width: min(100%, calc((100svh - 105px) * 1.5)); }
  .footer { right: 20px; bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-height: 480px) and (min-width: 641px) {
  .diorama { padding: 8px 16px 42px; }
  .scene-frame { width: min(100%, calc((100svh - 50px) * 1.5)); }
  .footer { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }