/* A complete opening composition that scales with the visible viewport. */
:root { --nav-height: 68px; scroll-padding-top: calc(var(--nav-height) + 16px); }
.site-header { height: var(--nav-height); position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; background: #080d14ed; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.site-header.is-scrolled { border-bottom-color: #bcb4de25; }
.header-mark { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; }
.header-mark img { display: block; height: auto; }
.header-nebula { justify-self: start; }
.header-nebula img { width: 105px; }
.header-orbion { justify-self: end; }
.header-orbion img { width: 117px; }
.site-header nav { justify-content: center; gap: 30px; font-size: 11px; }
.site-header nav > a { align-items: center; line-height: 1.2; padding-block: 12px; }
.site-header .nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0; width: fit-content; line-height: 1.2; border-bottom: 0; }
.site-header .nav-cta .nav-label { font-size: inherit; line-height: inherit; }
.site-header .nav-arrow { width: 16px; height: 16px; flex: none; display: block; }
.skip { z-index: 40; }
.panorama-hero { display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 9px; height: calc(100svh - var(--nav-height)); min-height: 495px; padding: clamp(40px, 6svh, 68px) 0 10px; overflow: clip; background: radial-gradient(ellipse at 50% 65%, #22253d45, transparent 56%), #080d14; }
.panorama-hero .hero-text { z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 25px; text-align: center; }
.panorama-hero h1 { font-size: clamp(40.8px, min(4.25vw, 7.48svh), 68.85px); line-height: .96; letter-spacing: -.045em; }
.panorama-hero h1 span, .panorama-hero h1 em { display: block; }
.panorama-hero h1 em { margin-top: 7px; font-size: .89em; line-height: 1.06; }
.panorama-hero .hero-description { max-width: 680px; margin: 15px auto 0; color: #a9afc0; font-size: 13px; line-height: 1.7; }
.panorama-stage { position: relative; width: 100%; max-width: 1720px; min-height: 0; height: auto; margin: 0 auto; isolation: isolate; }
.panorama-stage:before { content: ''; position: absolute; inset: 0 10% 20%; background: radial-gradient(ellipse at 49% 55%, #b7a5e70d, transparent 59%); pointer-events: none; }
.panorama-stage .panorama-webgl { inset: 0 -2% 95px; cursor: grab; touch-action: pan-y; z-index: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 8%, #000 94%, transparent); mask-composite: intersect; }
.panorama-webgl:active { cursor: grabbing; }
.panorama-webgl:focus-visible { outline: none; }
.panorama-stage:has(.panorama-webgl:focus-visible) { outline: 1px solid #bcb4de77; outline-offset: -8px; }
.panorama-fallback { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 65%; height: calc(100% - 95px); object-fit: contain; transition: opacity .5s; }
.panorama-stage.has-webgl .panorama-fallback { opacity: 0; pointer-events: none; }
.panorama-stage:not(.has-webgl) .field-indicator, .panorama-stage:not(.has-webgl) .emission-readout { display: none; }
.scene-corner { position: absolute; top: 17px; z-index: 2; display: flex; gap: 12px; align-items: center; font-size: 8px; letter-spacing: .12em; pointer-events: none; }
.scene-corner-left { left: 7%; color: #9ccbed; }
.scene-corner-right { right: 7%; color: #d3e59c; }
.scene-corner i { width: 22px; height: 1px; background: currentColor; opacity: .5; }
.field-indicator { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); display: grid; gap: 7px; z-index: 3; width: 190px; padding: 6px 0; color: #929eaf; font-size: 10px; text-align: center; white-space: nowrap; pointer-events: none; }
.field-meter { display: block; opacity: .75; height: 3px; border-radius: 4px; background: #bcb4de26; }
.field-meter-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a8fbf, #d8bff5); box-shadow: 0 0 13px #bda2e96b; transform: scaleX(var(--field-strength, 0)); transform-origin: left; }
.panorama-stage[data-field="on"] .field-label { color: #d8c8ed; }
.emission-readout { position: absolute; right: 9%; top: 38%; z-index: 3; width: 190px; padding: 12px; background: #080d14d9; pointer-events: none; font-size: 9px; color: #b9c995; letter-spacing: .02em; }
.emission-readout strong { display: block; font-weight: 400; color: #e6f2b7; font-size: 13px; margin-top: 6px; }
.emission-readout > i { display: block; height: 4px; background: #d3e29818; margin: 10px 0 7px; }
.emission-readout b { display: block; width: 100%; height: 4px; background: #d3e298; box-shadow: 0 0 16px #d3e29888; transform: scaleX(var(--emission-level, 0)); transform-origin: left; }
.emission-readout small { font-size: 9px; color: #969eb0; }
.emission-readout > i { position: relative; }
.emission-readout > i:after { content: ''; position: absolute; left: 55%; top: -3px; width: 1px; height: 10px; background: #cbd1d78c; }
.response-example { color: #b8bad0; font-size: 8px; letter-spacing: .02em; }
.hero-path { position: absolute; bottom: 0; left: 9%; right: 9%; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; list-style: none; padding: 0; margin: 0; text-align: center; pointer-events: none; }
.hero-path li { padding: 0; }
.path-number { display: block; color: #8993a7; font-size: 8px; letter-spacing: .09em; margin-bottom: 7px; }
.hero-path h2 { font-size: clamp(17px, 1.45vw, 23px); letter-spacing: -.02em; line-height: 1.15; color: #d7d7e2; }
.hero-path p { font-size: 10px; line-height: 1.5; color: #8993a6; margin: 6px 0 0; }
.hero-path li[data-active="true"] h2 { color: #f2edf7; }
.hero-path li[data-phase-label="light"][data-active="true"] .path-number { color: #a5d4ff; }
.hero-path li[data-phase-label="fluorescence"][data-active="true"] .path-number { color: #e1eba8; }
.hero-path li[data-phase-label="field"][data-active="true"] .path-number { color: #d0b8f6; }
.hero-enter { display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 7px 0; margin: 0; color: #e4daca; font-size: 10px; }
.hero-enter span { font-size: 17px; }
.scene-mode { justify-self: end; text-align: right; color: #a4adc1; font-size: 9px; padding: 10px 0 10px 12px; }
#panorama-notes { grid-column: 1 / -1; position: static; text-align: center; margin: 0; color: #76849b; font-size: 8px; line-height: 1.5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a.contact-address { display: inline-flex; gap: 20px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eee3d25c; }
a.contact-address:hover { color: #fff4e1; }
@media (min-width: 701px) and (max-height: 680px) {
 .panorama-hero { padding-top: 32px; gap: 6px; }
 .panorama-hero h1 { font-size: clamp(36.55px, 6.545svh, 47.6px); }
 .panorama-hero .hero-description { margin-top: 10px; font-size: 12px; }
 .hero-path p { display: none; }
 .panorama-stage .panorama-webgl { bottom: 60px; }
 .scene-corner, .field-indicator { top: 2px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
 .site-header { gap: 23px; }
 .site-header nav { gap: 23px; }
 .header-nebula img { width: 96px; }
 .header-orbion img { width: 107px; }
 .panorama-hero .hero-description { max-width: 590px; font-size: 12px; }
 .hero-path { left: 5%; right: 5%; gap: 3%; }
 .emission-readout { right: 5%; width: 175px; }
}
@media (max-width: 700px) {
 :root { --nav-height: 60px; }
 .site-header { grid-template-columns: auto minmax(0, 1fr); gap: 25px; }
 .site-header nav { justify-content: flex-end; gap: 18px; font-size: 10px; }
 .header-nebula img { width: 90px; }
 .header-orbion { display: none; }
 .site-header .nav-cta { gap: 8px; }
 .panorama-hero { min-height: 560px; padding: 19px 0 10px; gap: 8px; }
 .panorama-hero .hero-text { padding: 0 20px; }
 .panorama-hero h1 { font-size: clamp(29.75px, 7.905vw, 50.15px); line-height: 1; }
 .panorama-hero h1 em { font-size: .92em; line-height: 1.04; margin-top: 7px; }
 .panorama-hero .hero-description { max-width: 440px; font-size: 11px; line-height: 1.65; margin-top: 14px; }
 .panorama-stage .panorama-webgl { inset: 0 -29% 145px; }
 .panorama-fallback { height: calc(100% - 145px); width: 90%; }
 .scene-corner { top: 15px; font-size: 6px; letter-spacing: .05em; gap: 4px; }
 .scene-corner i { display: none; }
 .scene-corner-left { left: 6%; }
 .scene-corner-right { right: 6%; }
 .field-indicator { top: 26px; width: 150px; font-size: 9px; gap: 5px; }
 .emission-readout { left: 50%; right: auto; top: auto; bottom: 85px; transform: translateX(-50%); width: 195px; padding: 8px; background: transparent; text-align: center; font-size: 8px; }
 .emission-readout strong { font-size: 11px; margin-top: 5px; }
 .emission-readout small { font-size: 8px; }
 .emission-readout > i, .emission-readout b { height: 3px; }
 .hero-path { bottom: 1px; left: 5%; right: 5%; gap: 10px; }
 .path-number { font-size: 6.5px; letter-spacing: .01em; margin-bottom: 8px; }
 .hero-path h2 { font-size: 16px; line-height: 1.17; }
 .hero-path p { display: none; }
 .response-example { font-size: 7px; }
 .site-header .nav-arrow { width: 14px; height: 14px; }
 .scene-mode { grid-column: 2; grid-row: 1; font-size: 8px; padding: 8px 0; }
 .hero-enter { grid-column: 1 / -1; grid-row: 2; font-size: 9px; padding: 5px 0; }
 #panorama-notes { font-size: 7px; max-width: 300px; margin: auto; }
}
@media (max-width: 360px) {
 .site-header { gap: 18px; }
 .header-nebula img { width: 80px; }
 .site-header nav { gap: 13px; font-size: 9px; }
 .panorama-hero .hero-text { padding: 0 16px; }
 .panorama-hero h1 { font-size: 28.05px; }
 .hero-path h2 { font-size: 14px; }
 .path-number { font-size: 5.8px; }
 .field-indicator { font-size: 8px; }
}
@media (max-width: 700px) and (max-height: 700px) {
 .panorama-stage .panorama-webgl { top: 38px; }
}

/* v11: readable scene labels and a flexible opening on smaller screens. */
.panorama-hero { --hero-tail: clamp(72px, 10svh, 120px); --hero-row-gap: 9px; gap: var(--hero-row-gap); height: calc(100svh - var(--nav-height) + var(--hero-tail) + var(--hero-row-gap)); min-height: calc(650px + var(--hero-tail) + var(--hero-row-gap)); grid-template-rows: auto minmax(330px, 1fr) var(--hero-tail); }
/* Continue the hero background below the scene without stretching its composition. */
.panorama-hero::after { content: ''; grid-column: 1; grid-row: 3; pointer-events: none; }
.panorama-hero .hero-description { font-size: 16px; line-height: 1.6; color: #bcc3d1; max-width: 740px; }
.scene-corner { font-size: 12px; letter-spacing: .05em; }
.field-indicator { font-size: 13px; width: 210px; color: #bec6d7; }
.emission-readout { width: 230px; right: 6%; padding: 12px 16px; background: #080d14b8; }
.emission-readout strong { font-size: 15px; }
.emission-readout small, .response-example { font-size: 12px; }
.response-example { color: #c0bdd8; }
.path-number { font-size: 11px; color: #a7b1c3; letter-spacing: .04em; }
.hero-path p { font-size: 12px; color: #aab4c7; }
@media (min-width: 701px) and (max-width: 1100px) {
 .panorama-hero { min-height: calc(730px + var(--hero-tail) + var(--hero-row-gap)); }
 .emission-readout { right: 3%; width: 210px; }
}
@media (min-width: 701px) and (max-height: 680px) {
 .panorama-hero { --hero-row-gap: 6px; height: auto; min-height: calc(670px + var(--hero-tail) + var(--hero-row-gap)); grid-template-rows: auto 360px var(--hero-tail); }
 .panorama-stage .panorama-webgl { bottom: 85px; }
}
@media (max-width: 700px) {
 .panorama-hero { --hero-tail: 64px; --hero-row-gap: 14px; height: auto; min-height: calc(100svh - var(--nav-height) + var(--hero-tail) + var(--hero-row-gap)); grid-template-rows: auto 550px var(--hero-tail); padding: 44px 0 18px; }
 .panorama-hero .hero-text { padding-inline: 24px; }
 .panorama-hero .hero-description { font-size: 16px; line-height: 1.6; max-width: 440px; margin-top: 22px; }
 .panorama-stage .panorama-webgl { inset: 50px -29% 170px; }
 .panorama-fallback { top: 65px; height: 310px; }
 .scene-corner { top: 8px; font-size: 12px; letter-spacing: 0; }
 .scene-corner-left { left: 6%; }
 .scene-corner-right { right: 6%; }
 .field-indicator { top: 49px; width: 210px; font-size: 13px; gap: 7px; }
 .emission-readout { left: 50%; right: auto; bottom: 100px; width: 240px; padding: 8px 12px; background: #080d1473; }
 .emission-readout strong { font-size: 15px; }
 .response-example, .emission-readout small { font-size: 12px; }
 .hero-path { bottom: 1px; left: 5%; right: 5%; gap: 14px; }
 .path-number { font-size: 10px; line-height: 1.5; letter-spacing: 0; min-height: 30px; margin-bottom: 7px; }
 .hero-path h2 { font-size: 17px; line-height: 1.2; }
 .site-header nav { font-size: 12px; }
}
@media (max-width: 360px) {
 .panorama-hero .hero-text { padding-inline: 18px; }
 .panorama-hero { grid-template-rows: auto 530px var(--hero-tail); }
 .panorama-stage .panorama-webgl { inset-inline: -35%; }
 .hero-path { gap: 8px; }
 .hero-path h2 { font-size: 16px; }
 .path-number { font-size: 10px; }
 .site-header { gap: 14px; }
 .site-header nav { gap: 10px; font-size: 11px; }
}
@media (min-width: 701px) {
 .field-indicator { top: 10px; }
}