/* Marine atmosphere shared by these three fossil groups. Decorative, not a reconstruction. */
:root{--sky:#09252e;--sky-deep:#20515a;--ink:#f0e8d5;--ink-soft:#b3c7c6;--accent:#d6b47b;--line:#c6d9d82b;--water-light:#457b7a;--seabed:#6d6651;color-scheme:dark}
body[data-habitat=trilobite]{--sky:#102b2b;--sky-deep:#31534b;--water-light:#5b7d68;--seabed:#797157}
body[data-habitat=shark-tooth]{--sky:#081e2d;--sky-deep:#214359;--water-light:#3f708d;--seabed:#56626b}
body{background:var(--sky)}
.welcome-world{background:radial-gradient(ellipse at 79% 13%,color-mix(in srgb,var(--water-light) 42%,transparent),transparent 58%),linear-gradient(180deg,transparent 35%,#030e1699 100%);transition:opacity .55s,filter .55s,transform .8s,background-color .7s}
.ocean-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 68% 49%,#8a9d7912,transparent 37%)}
.ocean-rays{position:absolute;inset:-38% -15% -15% 10%;transform:rotate(-21deg);background:linear-gradient(90deg,transparent 34%,#dcead407 37%,transparent 40%,transparent 48%,#dcead40b 52%,transparent 55%,transparent 65%,#dcead407 68%,transparent 72%);mask-image:linear-gradient(#000,transparent 85%)}
.sediment-landscape{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
.sediment-far{fill:var(--seabed);opacity:.15}.sediment-middle{fill:var(--seabed);opacity:.20}.sediment-near{fill:var(--seabed);opacity:.27}
.sediment-lines{fill:none;stroke:#d8ccad;stroke-width:1;opacity:.11}
.world-grain{z-index:-1;opacity:.018}
.scene-glow{background:radial-gradient(ellipse,color-mix(in srgb,var(--water-light) 48%,transparent),transparent 68%);opacity:.45}
.scene-shell #fossil-canvas{opacity:1}
.scene-loading{position:absolute;z-index:3;top:42%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:86%;color:var(--ink-soft);font-size:11px;line-height:1.8;text-align:center}
.loading-orbit{width:15px;height:15px;border:1px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:loading-turn 1s linear infinite;flex-shrink:0}
.scene-shell[data-model-state=ready] .scene-loading{display:none}
.scene-shell[data-has-model=true] .scene-loading{top:auto;bottom:24%;transform:translateX(-50%);padding:5px 10px;background:#09252ee6;border-radius:20px}
.scene-shell[data-model-state=error] .loading-orbit,.scene-shell[data-model-state=context-lost] .loading-orbit{display:none}
#scene-retry{border:1px solid var(--line);border-radius:20px;background:transparent;padding:4px 12px;font-size:11px}
#scene-retry[hidden]{display:none}
@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(max-width:560px){.scene-loading{font-size:10px}.scene-shell[data-has-model=true] .scene-loading{bottom:26%}}
.welcome-description,.welcome-detail{color:var(--ink-soft)}
.welcome-location>span{background:var(--accent);box-shadow:0 0 10px #c5e1c33b}
.direct-link:hover{background:var(--ink);color:var(--sky)}
.scene-topline{color:#bbcecc}.scene-topline i{border-color:var(--accent)}
.model-switcher>button{background:#ffffff08;border-color:#d3e3de3d}
.model-switcher>button:hover{background:#ffffff1c}
.model-kicker{color:#c3cebf;letter-spacing:1.8px}
.model-dots button{background:var(--ink)}
.model-dots button[aria-pressed=true]{box-shadow:0 0 0 3px var(--sky),0 0 0 4px #e0ddbd55}
.enter-button{background:#e5d4ac;color:#162f32;box-shadow:0 5px 0 #0003}
.enter-button:hover{background:#f1e1bd;box-shadow:0 8px 0 #0003}
.enter-arrow{background:#173c42;color:#eadaba}
.welcome-footer{color:#b3c6c3}.welcome-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.welcome-brand svg{stroke:var(--ink)}
/* Never frame the scene, including after keyboard navigation or inherited focus. */
button:focus-visible,a:focus-visible{outline-color:var(--accent)}
#fossil-canvas,#fossil-canvas:focus,#fossil-canvas:focus-visible,#fossil-canvas:active,#fossil-canvas.dragging{outline:none!important;border:0!important;box-shadow:none!important}
.scene-shell:has(#fossil-canvas:focus-visible) #habitat-label{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
@media(max-width:560px){.sediment-landscape{opacity:.34}.ocean-rays{inset:-10% -70% -10% -70%}.scene-glow{inset:1% -12% 17%}.enter-button{box-shadow:0 4px 0 #0003}.welcome-footer>span{font-size:5px}.welcome-footer p{color:#b6c8c5}}

/* Compact the opening after removing the overline above the title. */
.welcome-copy h1{margin-top:0}
@media(min-width:561px){.welcome-copy{padding-bottom:142px}}
@media(min-width:561px) and (max-height:800px){.welcome-copy{padding-bottom:119px}}
@media(max-width:560px){.welcome-copy{top:21px}.welcome-copy h1{margin:0}.scene-shell{top:96px}.welcome-main{min-height:680px}}
@media(max-width:370px){.scene-shell{top:86px}.welcome-main{min-height:650px}}

body[data-habitat=amber]{--sky:#202b20;--sky-deep:#5a613d;--water-light:#ac9857;--seabed:#927744}
body[data-habitat=amber] .ocean-rays{opacity:.8}
body[data-habitat=amber] .ocean-atmosphere{background:radial-gradient(ellipse at 76% 18%,#bd9a4320,transparent 50%),repeating-linear-gradient(94deg,transparent 0 12%,#07170d10 12.5% 13%,transparent 14% 27%)}
.header-actions{display:flex;align-items:center;gap:12px}
.model-info-link{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font:italic 16px Georgia,serif;color:var(--ink-soft);flex-shrink:0}
.model-info-link:hover{color:var(--ink);background:#fff1}
@media(min-width:561px){.welcome-main{height:calc(100svh - 106px)}}
@media(min-width:1600px){.welcome-main{height:calc(100svh - 115px)}}
@media(max-width:560px){.header-actions{gap:9px}.model-info-link{width:35px;height:35px}}

@media(min-width:561px) and (max-width:1050px){.welcome-main{height:calc(100svh - 92px)}}
@media(min-width:561px) and (max-width:740px){.welcome-main{height:calc(100svh - 80px)}}

.model-info-link svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}.model-info-link svg circle{fill:currentColor;stroke:none}