*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b1016;color:#f4f3e9;font-family:Arial,Helvetica,sans-serif}main{height:100svh;min-height:420px;position:relative;isolation:isolate}#images{position:absolute;inset:0;background:#14202b}.frame{position:absolute;overflow:hidden;opacity:0;transition:opacity 1.8s ease;will-change:opacity;background:#16212a}.frame.visible{opacity:1}.frame img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.56) brightness(.65);transform:scale(1.06);animation:drift 18s linear forwards}.frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07111a15,#050d1520 55%,#02090e6a)}#network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.grain{position:absolute;inset:0;pointer-events:none;opacity:.12;z-index:3;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#0006 3px,transparent 4px);mix-blend-mode:soft-light}header{position:absolute;z-index:4;left:3%;right:3%;top:27px;display:flex;justify-content:space-between;align-items:flex-start}header a{font-size:clamp(55px,8.7vw,154px);line-height:.8;letter-spacing:-.075em;color:#f4f3e9;text-decoration:none;font-weight:500;text-shadow:0 2px 30px #07101955}header a span{font:11px monospace;letter-spacing:0;vertical-align:top;margin-left:9px}header p{font:9px/1.6 monospace;letter-spacing:1.2px;margin:0;text-align:right}.index{position:absolute;right:3%;top:25%;z-index:4;font:8px monospace;letter-spacing:1px}.index #sequence{margin-left:26px}.dot{width:4px;height:4px;background:#e9f6dc;display:inline-block;margin-right:7px;box-shadow:0 0 10px #fff}.caption{position:absolute;left:3%;bottom:100px;z-index:4;font:9px/1.65 monospace;letter-spacing:1.1px;color:#e3e9e1b5}footer{position:absolute;z-index:4;bottom:23px;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;font:8px monospace;letter-spacing:1px;color:#e3e9e1b5}footer>div{display:flex;gap:28px}button{border:0;padding:10px 0;background:none;color:#f1f3e9;font:8px monospace;letter-spacing:1px;cursor:pointer}button:hover{opacity:.6}button:focus-visible,a:focus-visible{outline:1px solid white;outline-offset:8px}@keyframes drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.15) translate(-1%,.7%)}}body.paused .frame img{animation-play-state:paused}@media(max-width:650px){header{top:26px;left:5%;right:5%}header a{font-size:17vw}header p{display:none}.index{right:5%;top:18%}.caption{left:5%;bottom:95px;font-size:8px}footer{left:5%;right:5%;bottom:20px;font-size:6px}footer .demo{display:none}footer>div{gap:20px}button{font-size:7px}}@media(prefers-reduced-motion:reduce){.frame{transition:none}.frame img{animation:none}}
/* Optical instrumentation wordmark */
header{pointer-events:none}header a,header p{pointer-events:auto}.wordmark{position:relative;display:block;width:clamp(290px,43vw,780px);height:auto;overflow:visible;filter:drop-shadow(0 0 9px #baf7ec44)}header a{width:clamp(290px,43vw,780px);text-shadow:none}.logo-core{font:500 115px Arial,sans-serif;letter-spacing:-8px;fill:#e1fff518;stroke:#dafcf0;stroke-width:.65}.logo-echo{fill:#b5f9ec;opacity:.11;animation:logo-glitch 8s infinite}.logo-grid{stroke:#c1fff0;stroke-width:.4;opacity:.35;fill:none}.logo-grid .red{stroke:#ee799a}.logo-scan{animation:logo-scan 6s linear infinite;fill:#d2fff6;opacity:.23}.logo-data{font:4px monospace;letter-spacing:1px;fill:#d0f8eb;opacity:.75}.logo-flicker{animation:logo-flicker 9s linear infinite}.frame{cursor:grab;touch-action:none;user-select:none;outline:none}.frame img{pointer-events:none;animation:none;transform:none;filter:saturate(.48) brightness(.64)}.frame:focus-visible{outline:1px solid #d2fff6;outline-offset:-3px}.frame.dragging{cursor:grabbing}.frame.dragging:after{box-shadow:inset 0 0 0 1px #d3fff47a}.is-dragging,.is-dragging *{cursor:grabbing!important}.paused .wordmark *{animation-play-state:paused!important}.caption{pointer-events:none}.index{pointer-events:none}@keyframes logo-scan{0%{transform:translateX(-30px)}85%,100%{transform:translateX(630px)}}@keyframes logo-glitch{0%,90%,94%,100%{transform:translate(0);opacity:.08}91%{transform:translate(-4px,1px);opacity:.5}92%{transform:translate(3px,-1px);opacity:.25}93%{transform:translate(-2px);opacity:.4}}@keyframes logo-flicker{0%,40%,43%,75%,78%,100%{opacity:1}41%{opacity:.5}42%{opacity:.85}76%{opacity:.7}77%{opacity:.95}}@media(max-width:650px){header a,.wordmark{width:86vw}}@media(prefers-reduced-motion:reduce){.wordmark *{animation:none!important}.logo-scan{display:none}}
/* Persistent overlay plane: moving photographs never cover the signal. */
html,body{background:#020406}#images{z-index:0;isolation:isolate;background:#03070b}.frame{background:#050a10;transition:opacity .55s ease}.frame img{filter:saturate(.3) brightness(.36) contrast(1.15)}.frame:after{background:linear-gradient(180deg,#02071044,#02050955 55%,#00060bc0)}.frame img.incoming{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}.frame img.incoming.arrived{opacity:1}#network{z-index:20}.grain{z-index:21;opacity:.18}header,.index,.caption,footer{z-index:30}.logo-core{fill:#d3fff011;stroke:#bcded6}.wordmark{filter:drop-shadow(0 0 8px #a0ded033)}
#reflection[hidden]{display:none}#reflection{position:absolute;z-index:28;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8vh 10vw;background:linear-gradient(100deg,#020608f2,#020608c9 58%,#02060860);pointer-events:none;animation:reflection-in 2.5s ease both;backdrop-filter:blur(2px)}.reflection-meta{font:8px monospace;letter-spacing:2px;color:#9dc6bf;margin-bottom:25px}#reflection h1{margin:0;font-size:clamp(29px,4.8vw,76px);line-height:1.09;letter-spacing:-.045em;font-weight:400;color:#e4eee7}#reflection h1 em{font-family:Georgia,serif;font-weight:400;color:#abcac3}#reflection p{font:12px/1.95 monospace;color:#a3b6b2;margin-top:30px}.reflection-tags{font:7px/1.9 monospace;letter-spacing:1.4px;color:#788e89;margin-top:14px}.reflection-actions{display:flex;align-items:center;gap:30px;margin-top:28px}.reflection-actions button{pointer-events:auto;border-bottom:1px solid #64877d;padding-bottom:10px}.reflection-actions span{font:6px/1.5 monospace;color:#73867f}.reflection-open .caption,.reflection-open .index{opacity:0}footer>div{gap:20px}#sound[aria-pressed=true]{color:#b4eee1}@keyframes reflection-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:650px){footer{flex-wrap:wrap;gap:10px}footer>span:first-child{display:none}footer>div{width:100%;justify-content:space-between;gap:10px}#reflection{padding:100px 7vw 65px}#reflection p{font-size:10px}.reflection-actions{flex-direction:column;align-items:flex-start;gap:12px}.reflection-tags{font-size:6px}}@media(prefers-reduced-motion:reduce){#reflection{animation:none}}
#reflection{justify-content:flex-start;padding-top:max(170px,20vh);padding-bottom:70px}#reflection h1{font-size:clamp(29px,min(4.8vw,7vh),76px)}@media(max-height:650px){#reflection{padding-top:135px}.reflection-meta{margin-bottom:12px}#reflection p{margin-top:16px;font-size:10px}.reflection-tags{margin-top:4px}.reflection-actions{margin-top:12px}}@media(max-width:650px){#reflection{padding-top:145px}#reflection h1{font-size:clamp(29px,7vw,43px)}}
