/* Layout: a fixed WebGL abyss under a tall scroll track. Instruments pinned to the screen edges; specimen plates are holograms pinned in the 3D scene beside each chamber, revealed as the camera dwells. */
:root{
  --abyss:#04070a;
  --abyss-2:#0a1117;
  --bone:#d8d3c4;
  --dim:#7f8d92;
  --lumen:#9ef0ff;
  --spore:#ffb27a;
  --line:rgba(158,240,255,.16);
  --line-hi:rgba(158,240,255,.55);
  --glass:rgba(4,7,10,.62);
  --display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
html{background:var(--abyss)}
body{background:var(--abyss);color:var(--bone);font-family:var(--mono);font-size:12px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--lumen);color:var(--abyss)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--lumen);outline-offset:3px}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.no-gl #gl{display:none}
.no-gl body{background:radial-gradient(120% 80% at 70% 20%,#0d2a33 0%,var(--abyss) 60%) fixed}

/* ---------- instruments ---------- */
.hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.hud-top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;flex-direction:column;gap:2px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.brand b{font-weight:600;color:var(--bone)}
.brand span{color:var(--dim)}
.sound{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;width:max-content;margin-top:10px;padding:6px 10px;background:rgba(4,7,10,.55);border:1px solid var(--line-hi);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .25s,border-color .25s}
.sound:hover{color:var(--bone)}
.sound.on{color:var(--lumen);border-color:var(--lumen)}
.sound .eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound .eq i{display:block;width:2px;height:12px;background:currentColor;transform:scaleY(.18);transform-origin:bottom}
.telem{display:grid;grid-template-columns:repeat(3,auto);gap:4px 22px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;text-align:right}
.telem div{display:flex;flex-direction:column}
.telem dt{color:var(--dim);font-size:8.5px;letter-spacing:.2em}
.telem dd{margin:0;color:var(--bone);min-width:9ch}
.telem dd.hot{color:var(--lumen)}

.hud-bottom{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scope{display:flex;flex-direction:column;gap:4px}
.scope canvas{width:180px;height:38px;border:1px solid var(--line);background:rgba(4,7,10,.4)}
.now{text-align:right;display:flex;flex-direction:column;gap:2px}
.now b{color:var(--bone);font-weight:400;letter-spacing:.12em}
.now .music{color:var(--lumen);min-height:1.7em}

.reticle{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);opacity:.55}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--lumen)}
.reticle::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);clip-path:polygon(0 0,100% 0,100% 30%,0 30%,0 70%,100% 70%,100% 100%,0 100%)}
.reticle::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px);clip-path:polygon(0 0,30% 0,30% 100%,0 100%,0 0,70% 0,100% 0,100% 100%,70% 100%)}

.lock{position:absolute;left:0;top:0;width:100px;height:100px;opacity:0;will-change:transform,opacity}
.lock i{position:absolute;width:14px;height:14px;border:1px solid var(--spore)}
.lock i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.lock i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.lock i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.lock i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.lock span{position:absolute;left:0;top:-20px;white-space:nowrap;font-size:9px;letter-spacing:.16em;color:var(--spore);font-variant-numeric:tabular-nums}
.lock em{position:absolute;right:0;bottom:-18px;white-space:nowrap;font-style:normal;font-size:8.5px;letter-spacing:.16em;color:var(--dim);font-variant-numeric:tabular-nums}

/* real link laid exactly over the plate's call-to-action once the plate settles flat on screen */
.plate-link{position:fixed;left:0;top:0;z-index:6;display:block;transform-origin:0 0;border:1px solid transparent;text-indent:-9999px;overflow:hidden;white-space:nowrap}
.plate-link:hover,.plate-link:focus-visible{border-color:var(--plate-accent,var(--lumen));box-shadow:0 0 7px color-mix(in srgb,var(--plate-accent,var(--lumen)) 45%,transparent);outline:0}
.plate-shot{position:fixed;left:0;top:0;z-index:6;transform-origin:0 0;padding:0;background:transparent;border:1px solid transparent;cursor:zoom-in;text-indent:-9999px;overflow:hidden;white-space:nowrap}
.plate-shot:focus{outline:0}                                  /* its highlight is painted into the plate (plate-draw.js) */
.viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top,0px)) 16px;border:0;background:transparent;color:var(--bone)}
.viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.viewer::backdrop{background:rgba(2,4,6,.93)}
.viewer figure{margin:0;max-width:min(96vw,1800px)}
.viewer img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border:1px solid var(--line-hi)}
.viewer figcaption{margin-top:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ---------- scroll track ---------- */
.track{position:relative;z-index:2;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--lumen);margin:0 0 18px}
.sound-hero{color:var(--bone)}
.sound-hero[aria-pressed="true"]{color:var(--lumen);border-color:var(--lumen)}

.stage{min-height:280vh;position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.btn{background:transparent;border:1px solid var(--line-hi);padding:9px 14px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--lumen);color:var(--abyss)}

@media (max-width:760px){
  .telem{grid-template-columns:repeat(2,auto)}
  .telem .x-wide{display:none}
  .scope canvas{width:120px}
  .now{max-width:50vw}
}