:root{color-scheme:dark;--bg:#07131b;--panel:#0e202b;--line:#2b414b;--ink:#eaf1ed;--muted:#acc0c7;--gold:#efcea0;--mint:#acdfd7;--colour:#4299ec}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:#162c37;border:1px solid #3e5962;border-radius:8px;padding:9px 13px}button:hover{background:#213c48;border-color:#84b4be}button:disabled{opacity:.55;cursor:wait}a{color:var(--mint);text-underline-offset:5px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:absolute;top:-100px;z-index:20;background:var(--gold);color:var(--bg);padding:12px}.skip:focus{top:4px}.top{max-width:1480px;padding:15px 32px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263944}.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);text-decoration:none}.top nav{display:flex;gap:25px;font-size:.875rem}.top nav a{text-decoration:none}main{max-width:1480px;margin:auto;padding:28px 32px 0}.heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px}.eyebrow{font-size:.6875rem;letter-spacing:.16em;font-weight:650;color:var(--gold);margin:0 0 9px}h1{font:400 clamp(2.2rem,4vw,3.75rem)/1.08 Georgia,serif;letter-spacing:-.035em;margin:0}h1 em{font-weight:400;color:#b7d7e7}h2{font:400 1.9rem/1.16 Georgia,serif;margin:0 0 14px}p{margin:0 0 15px}.heading>p{color:var(--muted);font-size:.9375rem;margin:0 0 3px;max-width:320px}.heading strong{color:var(--ink);font-weight:450}.journey{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.journey nav{display:flex;gap:8px}.journey button{background:transparent;border-color:transparent;border-radius:0;padding:9px 15px;font-size:.9375rem}.journey button span{font-size:.6875rem;color:#8facbb;margin-right:7px}.journey button[aria-current]{border-bottom:2px solid var(--gold);color:var(--gold)}.journey-note{font-size:.75rem;color:var(--muted)}.exhibit{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.visual{min-width:0;background:radial-gradient(ellipse at 55% 45%,#182c3b,#071119 72%);display:flex;flex-direction:column}.stage{position:relative;height:490px;min-height:340px;flex:1;isolation:isolate;overflow:hidden}#flat,#three{position:absolute;width:100%;height:100%;inset:0}#flat{object-fit:contain}#three canvas{display:block;width:100%;height:100%;touch-action:pan-y}.stage-heading{position:absolute;left:24px;top:23px;pointer-events:none;z-index:2}.stage-heading h2{font:400 1.25rem/1.25 Georgia,serif;text-shadow:0 2px 8px #000}.stage-heading .eyebrow{font-size:.5625rem;color:#99b7c8}.stage-label{position:absolute;bottom:60px;left:20px;font-size:.6875rem;color:#bec9c9;pointer-events:none}.closer{position:absolute;bottom:58px;right:20px;background:#ead8b5;color:#142531;border:0;font-weight:600;font-size:.8125rem;z-index:3}.closer:hover{background:#fff0d5}.camera-tools{position:absolute;bottom:13px;left:20px;display:flex;gap:6px;z-index:3}.camera-tools button{padding:7px 10px;font-size:.6875rem;background:#0e202bd9;border-color:#3b5362}.render-status{position:absolute;right:18px;bottom:14px;font-size:.625rem;max-width:220px;color:#96adba;text-align:right;margin:0;pointer-events:none}.scene-footer{border-top:1px solid #263f4a;padding:15px 22px;min-height:111px;background:#0a1922bb;display:flex;flex-direction:column;justify-content:center}.scene-footer p{color:#bdcdd4;font-size:.875rem;max-width:700px;margin:0 0 10px}.scene-footer>span{font-size:.5625rem;letter-spacing:.12em;color:#8cabb9}.controls{padding:22px;background:#10232dd9;border-left:1px solid var(--line);min-width:0}.control-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.control-top>.eyebrow{font-size:.5625rem;margin-bottom:10px}.control-top button{font-size:.6875rem;padding:4px 8px;border:0;background:transparent;color:var(--muted)}.controls h2{font-size:2rem;margin:0 0 8px}.control-intro{font-size:.8125rem;color:var(--muted);margin-bottom:20px}.slider-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}.slider-heading label{font-size:.8125rem;font-weight:600}.slider-heading output{font:1.65rem/1.2 Georgia,serif;color:var(--gold);white-space:nowrap}.slider-heading output small{font: .75rem system-ui;color:var(--muted)}input[type=range]{width:100%;height:26px;cursor:ew-resize;accent-color:var(--gold);margin:0;touch-action:pan-y}.ends{display:flex;justify-content:space-between;font-size:.625rem;color:var(--muted);margin:0 0 12px}.hint{font-size:.6875rem;line-height:1.5;color:#abc1cb;margin:8px 0 15px}.colour-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.colour-pair figure{margin:0;background:#091820;border:1px solid #2a4250;border-radius:9px;overflow:hidden}.colour-pair canvas{width:100%;height:auto;display:block}.colour-pair figcaption{font-size:.6875rem;padding:0 9px 9px;color:#e0e7e4}.colour-pair figcaption span{display:block;color:var(--muted);font-size:.625rem}.insight{font-size:.8125rem;color:#dddccd;border-left:2px solid var(--gold);padding-left:11px;margin:16px 0}.controls details{border-top:1px solid var(--line);padding-top:10px;margin-top:13px;font-size:.8125rem}.controls summary{cursor:pointer;color:#c4dadf;font-size:.75rem;line-height:1.5;padding:3px 0 9px}.controls details label{display:flex;justify-content:space-between;font-size:.6875rem;margin:8px 0}.control-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.control-actions button{font-size:.6875rem;flex:1;padding:8px}.action-status{font-size:.6875rem;margin:8px 0 0;color:var(--gold);min-height:1em}.read-the-light{display:grid;grid-template-columns:1fr 1.45fr;gap:50px;padding:46px 0 32px;align-items:center}.spectrum-story{max-width:460px}.spectrum-story p:not(.eyebrow){font-size:.875rem;color:var(--muted)}.spectrum-story h2{font-size:2rem}.metric{display:flex;gap:16px;align-items:center;margin-top:22px}.metric strong{font:2.3rem/1.1 Georgia,serif;color:var(--gold);white-space:nowrap}.metric span{font-size:.6875rem}.spectrum-story .spectrum-note{font-size:.6875rem;color:#bacbd1}.spectrum-panel{background:#0b1c26;border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}.graph-heading{display:flex;justify-content:space-between;gap:10px;font-size:.6875rem;color:#b4cbd3;margin-bottom:8px}.spectrum-panel canvas{display:block;width:100%;height:auto;aspect-ratio:3}.spectrum-panel>p{font-size:.6875rem;color:var(--muted);margin:8px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.key-line{display:inline-block;width:16px;height:2px;background:var(--gold);margin-left:10px}.key-line:first-child{margin-left:0}.key-line.baseline{background:#83bace}.notice{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding:33px 0;gap:60px}.notice h2{font-size:1.6rem}.notice p:not(.eyebrow){font-size:.875rem;color:var(--muted)}.notice button,.notice a{font-size:.8125rem}.notice button{background:transparent}.notice>div{max-width:520px}#science{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:.875rem}#science summary{cursor:pointer;color:var(--ink)}.science-content{max-width:900px;padding-top:24px}.science-content h2{font-size:1.5rem}.science-content h3{font-size:1rem}.science-content li{margin:10px 0}footer{border-top:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.noscript{background:#243c48;padding:20px}#gap-drag{position:absolute;right:16%;top:35%;height:36%;width:65px;cursor:ns-resize;touch-action:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--gold);border-right:1px solid #efcea077;z-index:3}#gap-drag span:first-child{font-size:2.2rem}#gap-drag span:last-child{font-size:.625rem;background:#091923cc;padding:4px;border-radius:3px;white-space:nowrap}[hidden]{display:none!important}@media(min-width:1400px){.stage{height:540px}.controls{padding:25px}.exhibit{grid-template-columns:minmax(0,1fr) 355px}}@media(max-width:1100px){.exhibit{grid-template-columns:minmax(0,1fr) 310px}.controls{padding:17px}.stage-heading{left:17px}.stage-heading h2{font-size:1.05rem}.render-status{bottom:49px;right:auto;left:20px;max-width:170px;text-align:left}.stage-label{bottom:83px}.controls h2{font-size:1.8rem}.read-the-light{gap:25px}}@media(max-width:760px){.top{padding:12px 18px}.top nav{gap:16px}main{padding:23px 18px 0}.heading{display:block;margin-bottom:16px}.heading>p{margin-top:10px;font-size:.8125rem}.heading>p br{display:none}.heading h1{font-size:2.5rem}.heading .eyebrow{font-size:.625rem}.journey-note{display:none}.journey nav{width:100%;justify-content:space-between;gap:0}.journey button{padding:9px 8px;font-size:.8125rem}.journey button span{margin-right:3px}.exhibit{grid-template-columns:1fr}.visual{display:contents}.stage{height:330px;min-height:0;background:radial-gradient(ellipse at 50% 50%,#193244,#071119 72%);order:0}.controls{border-left:0;border-top:1px solid var(--line);padding:18px;order:1}.scene-footer{order:2;padding:16px 18px;min-height:0}.scene-footer p{font-size:.8125rem}.controls h2{font-size:1.75rem}.control-intro{margin-bottom:16px}.colour-pair{margin:10px 0;gap:12px}.colour-pair figure{display:flex;align-items:center}.colour-pair canvas{width:55%;height:auto}.colour-pair figcaption{padding:5px;font-size:.625rem}.colour-pair figcaption span{font-size:.5625rem}.colour-pair figure:last-child{border-color:#6b838a}.stage-heading{top:16px}.stage-heading h2{font-size:1.15rem}.stage-heading .eyebrow{font-size:.5rem}.stage-label{font-size:.5625rem;bottom:79px}.camera-tools{left:14px;bottom:12px}.closer{right:14px;bottom:51px;padding:8px 12px}.render-status{left:14px;bottom:49px;font-size:.5rem}.read-the-light{grid-template-columns:1fr;gap:16px;padding-top:30px}.metric{margin:15px 0}.spectrum-story h2{font-size:1.75rem}.spectrum-story{max-width:none}.spectrum-panel{padding:14px}.graph-heading{font-size:.5625rem}.spectrum-panel canvas{aspect-ratio:2.1}.notice{grid-template-columns:1fr;gap:25px}.notice>div{max-width:none}footer{flex-direction:column;gap:10px}#gap-drag{right:13%;font-size:.75rem;top:27%;height:40%}.slider-heading label{font-size:.875rem}.hint{font-size:.75rem}.control-actions button{font-size:.8125rem;min-height:44px}.controls details summary{font-size:.8125rem}.controls details label{font-size:.75rem}.insight{font-size:.875rem}.colour-pair canvas{min-width:0}}@media(max-width:380px){main{padding-inline:12px}.stage{height:285px}.heading h1{font-size:2.1rem}.stage-heading h2{font-size:1rem}.camera-tools button{padding:7px 8px}.colour-pair figure{display:block}.colour-pair canvas{width:100%;max-height:80px;object-fit:contain}.colour-pair figcaption{padding:0 9px 7px}.stage-label{max-width:190px}.render-status{max-width:140px}.graph-heading{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media(min-width:761px) and (max-height:800px){main{padding-top:18px}.heading{margin-bottom:14px}h1{font-size:2.9rem}.stage{height:450px}.controls{padding-top:16px;padding-bottom:12px}.control-intro{margin-bottom:13px}}

#colour-chip{display:inline-block;width:12px;height:12px;vertical-align:-2px;border:1px solid #bbc9c9;margin-right:5px;border-radius:2px;background:#1a86ff}.context-figure{margin:18px 0;max-width:520px}.context-figure img{display:block;width:100%;height:auto;border-radius:12px}.context-figure figcaption{font-size:.75rem;padding-top:8px}.spectrum-panel canvas{height:220px;aspect-ratio:auto}
@media(max-width:760px){.stage{height:285px}.controls{display:flex;flex-direction:column}.control-top{order:-6}.controls h2,.control-intro{display:none}.slider-heading{order:-5;margin-top:5px}#gap{order:-4}.ends{order:-3}#gap-help{order:-2}.colour-pair{order:-1}.spectrum-panel canvas{height:195px}.heading>p strong:before{content:' '}.action-status{min-height:0}.control-top>.eyebrow{margin-bottom:6px}.stage-label{max-width:205px}}
@media(max-width:760px) and (max-height:720px){main{padding-top:14px}.heading>.eyebrow,.heading .eyebrow{display:none}.heading h1{font-size:2rem}.heading{margin-bottom:8px}.heading>p{margin-top:6px;font-size:.75rem}.stage{height:220px}.stage-heading{top:12px}.stage-heading .eyebrow{display:none}.stage-heading h2{font-size:.9375rem}.journey button{padding-block:7px}.controls{padding-top:10px}.stage-label{bottom:78px;max-width:155px;font-size:.5rem}.render-status{max-width:125px}.camera-tools{bottom:10px}.closer{font-size:.6875rem}}

#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:50px 15px 55px;background:#07131b}.controls .action-status:empty{display:none}
.visual{align-self:start}.stage{flex:none}

.top{flex-wrap:wrap;gap:12px}.exhibit:fullscreen{background:var(--bg);border:0;border-radius:0;overflow:auto;padding:20px}.exhibit:fullscreen .stage{height:calc(100vh - 150px)}.exhibit:fullscreen .controls{align-self:start}

.stage-viewport{position:absolute;inset:0}h1,h2,p,a{overflow-wrap:break-word}.spectrum-story,.notice>div{min-width:0}.metric{flex-wrap:wrap}.metric strong{white-space:normal}.camera-tools{max-width:calc(100% - 28px);flex-wrap:wrap}
@media(max-width:760px){.metric strong{font-size:1.8rem}.large-text .stage{height:auto;display:flex;flex-direction:column}.large-text .stage-heading{position:relative;inset:auto;order:0;padding:16px 14px 0}.large-text .stage-viewport{position:relative;inset:auto;height:285px;order:1}.large-text .stage-label{position:relative;inset:auto;order:2;padding:8px 14px;max-width:none}.large-text .camera-tools{position:relative;inset:auto;order:3;padding:4px 14px;max-width:100%}.large-text .closer{position:relative;inset:auto;order:4;margin:12px 14px;align-self:start}.large-text .render-status{position:relative;inset:auto;order:5;padding:0 14px 12px;max-width:none;text-align:left}.large-text #gap-drag{display:none}.large-text .journey button{overflow-wrap:anywhere}.large-text .heading h1{overflow-wrap:anywhere}.large-text .spectrum-panel canvas{height:245px}}

/* Text enlargement uses a flowing layout at every viewport width. */
.stage-viewport:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
#peak-edge{display:block;max-width:24em;color:var(--gold);margin-top:5px}
.large-text .exhibit{grid-template-columns:1fr}
.large-text .visual{display:contents}
.large-text .stage{height:auto;display:flex;flex-direction:column;order:0}
.large-text .stage-heading{position:relative;inset:auto;order:0;padding:16px 20px 0}
.large-text .stage-viewport{position:relative;inset:auto;height:clamp(250px,38vw,420px);order:1}
.large-text .stage-label{position:relative;inset:auto;order:2;padding:8px 20px;max-width:none}
.large-text .camera-tools{position:relative;inset:auto;order:3;padding:4px 20px;max-width:100%}
.large-text .closer{position:relative;inset:auto;order:4;margin:12px 20px;align-self:start}
.large-text .render-status{position:relative;inset:auto;order:5;padding:0 20px 12px;max-width:none;text-align:left}
.large-text .controls{order:1;border-left:0;border-top:1px solid var(--line)}
.large-text .scene-footer{order:2}
.large-text #gap-drag{display:none}
.large-text .controls h2,.large-text .control-intro{display:block}
.large-text .read-the-light{grid-template-columns:1fr;gap:20px}
.large-text .spectrum-story{max-width:none}
.large-text .spectrum-panel canvas{height:260px}

/* Nature belongs to the opening view; optical close-ups retain their quiet backdrop. */
#nature-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .35s ease}
.stage[data-nature="true"][data-garden="ready"] #nature-background{opacity:1}
.stage-viewport:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#07140b99 0%,transparent 22%,transparent 80%,#06110e99 100%);opacity:0;transition:opacity .35s ease}
.stage[data-nature="true"] .stage-viewport:after{opacity:1}
.stage[data-nature="true"] .stage-heading h2,.stage[data-nature="true"] .stage-label,.stage[data-nature="true"] .render-status{text-shadow:0 1px 3px #020a04,0 0 9px #020a04}
.stage[data-nature="true"] .stage-label{color:#e0eadd}
.stage[data-nature="true"] .render-status{color:#d0ddcc}
@media(prefers-reduced-motion:reduce){#nature-background,.stage-viewport:after{transition:none}}

/* A top paint layer keeps keyboard focus visible over an opaque garden. */
.stage-viewport:focus-visible{outline:none}
.stage-viewport:focus-visible:after{opacity:1;z-index:6;background:transparent;box-shadow:inset 0 0 0 3px var(--gold)}

/* The same four tap controls remain available beside every 3D view. */
.camera-tools{align-items:center;overflow:visible}
.view-controls{position:relative}
.view-controls summary{list-style:none;cursor:pointer;border:1px solid #3b5362;border-radius:8px;padding:7px 10px;background:#0e202bf2;font-size:.6875rem;line-height:1.55}
.view-controls summary::-webkit-details-marker{display:none}
.view-controls summary:after{content:' ▴';font-size:.7em}
.view-controls[open] summary:after{content:' ▾'}
.view-panel{position:absolute;left:0;bottom:calc(100% + 8px);width:220px;padding:12px;background:#10232dfa;border:1px solid #6b8c95;border-radius:12px;box-shadow:0 8px 30px #0008;z-index:9}
.view-panel p{font-size:.75rem;color:#d4e2e5;line-height:1.45;margin:0 0 10px}
.view-directions{display:grid;grid-template-columns:44px 1fr 44px;gap:4px}
.view-directions button{min-width:44px;min-height:44px;padding:5px!important;font-size:1.2rem!important}
#view-up{grid-area:1/2}#view-left{grid-area:2/1}#view-reset{grid-area:2/2;font-size:.6875rem!important}#view-right{grid-area:2/3}#view-down{grid-area:3/2}
.scene-footer .camera-note{font-size:.75rem;color:#c7d4d8;margin:0 0 10px}
.large-text .view-panel{position:relative;inset:auto;max-width:100%;width:320px;margin-top:8px;box-shadow:none}
.large-text .camera-tools{align-items:flex-start}
.large-text .view-directions button{font-size:1rem!important}
.large-text #view-reset{font-size:.6875rem!important}

/* On phones, text and buttons flow below the image instead of covering it. */
@media(max-width:760px){
 body:not(.large-text) .stage{height:auto!important;display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:visible}
 body:not(.large-text) .stage-heading{position:relative;inset:auto;grid-column:1/-1;grid-row:1;padding:10px 12px 6px;background:#0b1c26}
 body:not(.large-text) .stage-heading h2{font-size:.875rem;line-height:1.3;margin:0}
 body:not(.large-text) .stage-heading .eyebrow{display:none}
 body:not(.large-text) .stage-viewport{position:relative;inset:auto;grid-column:1/-1;grid-row:2;height:230px}
 body:not(.large-text) .stage-label{position:relative;inset:auto;grid-column:1/-1;grid-row:3;padding:6px 12px 4px;max-width:none;font-size:.6875rem;line-height:1.35}
 body:not(.large-text) .camera-tools{position:relative;inset:auto;grid-column:1;grid-row:4;padding:4px 0 8px 10px;max-width:100%;gap:4px;flex-wrap:wrap;align-self:start}
 body:not(.large-text) .camera-tools>button,body:not(.large-text) .view-controls summary{font-size:.6875rem;padding:7px}
 body:not(.large-text) .closer{position:relative;inset:auto;grid-column:2;grid-row:4;font-size:.6875rem;margin:4px 10px 8px 6px;padding:8px 10px;align-self:start;max-width:125px}
 body:not(.large-text) .render-status{position:relative;inset:auto;grid-column:1/-1;grid-row:5;width:auto;height:auto;clip-path:none;overflow:visible;max-width:none;padding:0 12px 9px;margin:0;font-size:.6875rem;line-height:1.35;text-align:left}
 body:not(.large-text) #gap-drag{top:85px;height:125px;right:12%;width:48px}
 body:not(.large-text) #gap-drag span:last-child{white-space:normal;text-align:center}
 body:not(.large-text) .stage[data-nature="true"] .render-status{display:none}
 body:not(.large-text) .view-panel{width:220px;bottom:calc(100% + 6px)}
 .exhibit:fullscreen .stage{max-height:none}
}
@media(max-width:760px) and (max-height:720px){
 body:not(.large-text) main{padding-top:9px}
 body:not(.large-text) .top{padding-block:10px}
 body:not(.large-text) .heading h1{font-size:1.8rem}
 body:not(.large-text) .heading>p{font-size:0;margin-top:3px}
 body:not(.large-text) .heading>p strong{font-size:.75rem}
 body:not(.large-text) .stage-viewport{height:200px}
 body:not(.large-text) .stage-heading{padding-block:7px 5px}
}

/* A short camera drawer leaves the object visible while touch controls are used. */
.view-directions{grid-template-columns:repeat(4,minmax(44px,1fr))}
#view-left{grid-area:1/1}#view-up{grid-area:1/2}#view-down{grid-area:1/3}#view-right{grid-area:1/4}#view-reset{grid-area:2/1/3/5}
@media(max-width:760px){
 body:not(.large-text) .stage{z-index:2}
 body:not(.large-text) .view-panel{top:calc(100% + 7px);bottom:auto;left:0;width:220px}
 body:not(.large-text) .view-controls summary:after{content:' ▾'}
 body:not(.large-text) .view-controls[open] summary:after{content:' ▴'}
 body:not(.large-text) .render-status{position:absolute;inset:auto;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 body:not(.large-text) .stage .closer{font-size:0}
 body:not(.large-text) .stage .closer:after{font-size:.6875rem;content:'Look closer ↗'}
 body:not(.large-text) .stage[data-level="scales"] .closer:after{content:'See a ridge ↗'}
 body:not(.large-text) .stage[data-level="layers"] .closer:after{content:'The wing ↗'}
}
@media(max-width:760px) and (max-height:720px){
 body:not(.large-text) main{padding-top:7px}
 body:not(.large-text) .heading{margin-bottom:4px}
 body:not(.large-text) .controls{padding-top:6px}
}
.exhibit:fullscreen{align-content:start;grid-auto-rows:max-content}


/* Keep both physical controls visible, with the direct spectrum colour nearby. */
.gap-control,.angle-control{min-width:0}
.angle-control{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.angle-control .slider-heading output{font-size:1.4rem}
.angle-control .hint{margin-bottom:0}
.direct-colour{display:flex;align-items:center;gap:10px;margin:9px 0 12px;padding:10px;border:1px solid #3d5661;border-radius:8px;background:#091820}
#direct-chip{display:block;flex:0 0 34px;height:34px;border:1px solid #bacbd1;border-radius:5px;background:var(--colour)}
.direct-colour strong{display:block;font-size:.6875rem;font-weight:600}
.direct-colour span{display:block;font-size:.6875rem;color:var(--muted)}
.direct-colour p{font-size:.625rem;color:var(--muted);margin:0 0 0 auto;line-height:1.45}
.model-note{font-size:.6875rem;color:var(--muted);line-height:1.5;margin:12px 0 0}
#poster{padding:0;object-fit:cover}
.stage-label{right:175px;max-width:none;line-height:1.4}
.stage[data-level="layers"] .stage-label{right:170px}
@media(min-width:761px) and (max-width:1100px){
 .stage-label{bottom:100px;right:20px}
 .render-status{bottom:52px;left:20px;right:20px;max-width:none;padding-right:155px}
 .closer{bottom:52px}
}
@media(max-width:760px){
 .controls{display:flex;flex-direction:column}
 .controls>*{order:0}
 .controls .control-top{order:-3}
 .controls .gap-control{order:-2}
 .controls .direct-colour{order:-1}
 .controls .colour-pair,.controls #gap-help{order:0}
 .gap-control .slider-heading{margin-top:0}
 .direct-colour{margin:3px 0 6px;padding:8px}
 .angle-control{margin-top:5px;padding-top:10px}
 .angle-control .slider-heading label{font-size:.875rem}
 body:not(.large-text) .stage-label{right:auto;min-width:0}
 .model-note{font-size:.75rem}
}
@media(max-width:760px) and (max-height:720px){
 body:not(.large-text) .top{padding:9px 12px;gap:8px}
 body:not(.large-text) .top nav{gap:12px;font-size:.75rem}
 body:not(.large-text) .brand{font-size:.9375rem;gap:6px}
 body:not(.large-text) .heading h1{font-size:1.6rem}
 body:not(.large-text) .heading>p{display:none}
 body:not(.large-text) .journey{margin-bottom:7px}
 body:not(.large-text) .journey button{padding:7px 5px;font-size:.75rem}
 body:not(.large-text) .journey button span{font-size:.625rem}
 body:not(.large-text) .stage-viewport{height:160px}
 body:not(.large-text) .stage-heading{padding:6px 10px 5px}
 body:not(.large-text) .stage-heading h2{font-size:.8125rem}
 body:not(.large-text) .stage-label{padding:5px 10px 3px;font-size:.625rem}
 body:not(.large-text) .camera-tools{padding-left:8px}
 body:not(.large-text) .camera-tools>button,body:not(.large-text) .view-controls summary{font-size:.625rem;padding:7px 6px}
 body:not(.large-text) .closer{margin-right:8px;padding:8px}
 body:not(.large-text) .controls{padding:8px 12px 14px}
 body:not(.large-text) .control-top>.eyebrow{font-size:.5rem;letter-spacing:.1em;margin:0}
 body:not(.large-text) .control-top{margin-bottom:5px}
 body:not(.large-text) .slider-heading{margin-bottom:2px}
 body:not(.large-text) .slider-heading output{font-size:1.4rem}
 body:not(.large-text) #gap-drag{top:65px;height:85px}
}
/* Large text remains fully flowing, even when the compact phone rules match. */
.large-text .direct-colour{flex-wrap:wrap}
.large-text .direct-colour p{margin:0;flex-basis:100%;font-size:.75rem}
.large-text .direct-colour strong,.large-text .direct-colour span{font-size:.875rem}
.large-text .stage-label{right:auto;max-width:none}

/* A complete text row avoids collisions when tablet columns are narrow. */
@media(min-width:761px) and (max-width:1100px){
 body:not(.large-text) .stage{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:visible}
 body:not(.large-text) .stage-heading{position:relative;inset:auto;grid-column:1/-1;grid-row:1;padding:14px 14px 7px;background:#0b1c26}
 body:not(.large-text) .stage-heading h2{margin:0}
 body:not(.large-text) .stage-heading .eyebrow{font-size:.5rem;margin:0 0 5px}
 body:not(.large-text) .stage-viewport{position:relative;inset:auto;grid-column:1/-1;grid-row:2;height:330px}
 body:not(.large-text) .stage .stage-label{position:relative;inset:auto;grid-column:1/-1;grid-row:3;padding:8px 14px 4px;max-width:none}
 body:not(.large-text) .camera-tools{position:relative;inset:auto;grid-column:1;grid-row:4;padding:5px 0 9px 12px;max-width:100%;gap:4px;align-self:start}
 body:not(.large-text) .camera-tools>button,body:not(.large-text) .view-controls summary{font-size:.625rem;padding:7px}
 body:not(.large-text) .closer{position:relative;inset:auto;grid-column:2;grid-row:4;font-size:.6875rem;margin:5px 12px 9px 5px;padding:8px 10px;align-self:start;max-width:120px}
 body:not(.large-text) .render-status{position:relative;inset:auto;grid-column:1/-1;grid-row:5;max-width:none;text-align:left;padding:0 14px 10px;font-size:.6875rem}
 body:not(.large-text) #gap-drag{top:130px;right:12%;height:160px;width:48px}
}
.direct-colour{display:grid;grid-template-columns:34px minmax(0,1fr)}
.direct-colour p{grid-column:1/-1;margin:0;font-size:.625rem}
.direct-colour>div{display:flex;gap:10px;align-items:center;justify-content:space-between}
.direct-colour strong,.direct-colour span{white-space:nowrap}
@media(max-width:760px){body:not(.large-text) .stage .stage-label{inset:auto}}
.large-text .direct-colour>div{display:block}
.large-text .direct-colour strong,.large-text .direct-colour span{white-space:normal}