* { box-sizing: border-box; }
:root { color-scheme: dark; background: #020713; color: #6b9ac9; font-family: monospace; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-width: 320px; }
.scroll-track { height: 320svh; }
.scene { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.atmosphere { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 51% 44%, #10346166 0%, #091b3438 33%, #02071300 65%); }
.scene::after { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 36%, #01040b99 100%); }
.sculpture-wrap { position: absolute; inset: 0 -2%; pointer-events: none; }
#sculpture { position: absolute; width: 100%; height: 100%; overflow: visible; }
.ground-shadow { position: absolute; width: 80%; height: 8%; top: 71%; left: 10%; background: #000208; filter: blur(22px); border-radius: 50%; opacity: .95; transform: rotate(-5deg); }
.fallback-title { position: absolute; inset: 35% 0 auto; margin: 0; text-align: center; font-size: clamp(40px, 15vw, 220px); font-weight: 400; letter-spacing: -.08em; }
.is-ready .fallback-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; font: 10px/1.5 monospace; color: #506784; }
.contact button, .contact a { color: inherit; font: inherit; letter-spacing: .03em; background: none; border: 0; padding: 10px 0 10px 10px; text-decoration: none; cursor: pointer; }
.contact button:hover, .contact a:hover, .contact :focus-visible { color: #9fbbd8; }
.contact :focus-visible { outline: 1px solid #7b9bbd; outline-offset: 5px; }
@media (max-width: 700px) {
  .scroll-track { height: 290svh; }
  .sculpture-wrap { inset: 0 -4%; }
  .ground-shadow { top: 79%; width: 88%; left: 6%; height: 6%; }
}