/* Dark, legible foreground over the procedural 3D archive field. */
.intro .liquid-canvas{filter:none;transform:none;opacity:0;transition:opacity .65s ease}
.gpu-ready .intro .liquid-canvas{opacity:1}
.intro .vignette{background:linear-gradient(90deg,rgba(5,10,17,.85),rgba(5,10,17,.22) 49%,rgba(5,10,17,.12)),linear-gradient(0deg,#080d13 0%,transparent 43%,rgba(8,13,19,.4) 100%);pointer-events:none}
.intro-copy,.intro-caption,.intro-topline{text-shadow:0 2px 22px #040a12}
@media(max-width:700px){.intro .vignette{background:linear-gradient(0deg,#080d13 5%,rgba(8,13,19,.85) 34%,rgba(8,13,19,.12) 72%,rgba(8,13,19,.55))}}
@media(prefers-reduced-motion:reduce){.intro .liquid-canvas{transition:none}}
.matrix-open-button{position:absolute;right:8%;top:32%;padding:15px 22px;border:1px solid #72d8f566;border-radius:30px;background:#091621b8;font-size:11px;letter-spacing:2px}.matrix-preview{margin:auto 6% auto auto;width:min(470px,88vw);max-height:85svh;overflow:auto;border:1px solid #72d8f549;background:#0b1722ed;color:#eaf0f5;padding:28px;box-shadow:0 30px 100px #0009;border-radius:12px}.matrix-preview::backdrop{background:#030a124d}.matrix-preview[open]{animation:matrix-enter .4s ease both}.matrix-close{float:right;background:none;border:0;font-size:26px;width:44px;height:44px}.matrix-number{font-size:10px;letter-spacing:2px;color:#8eafbf;padding:15px 0 24px}.matrix-image{height:190px;position:relative;overflow:hidden;border:1px solid #72d8f528}.matrix-image img{width:100%;height:100%;object-fit:cover}.matrix-image .matrix-character{position:absolute;inset:0;object-fit:contain}.matrix-image[data-kind="1"]{margin:0 45px;border-radius:12px}.matrix-image[data-kind="4"]{filter:hue-rotate(25deg)}.matrix-image[data-kind="5"]{height:160px;opacity:.55}.matrix-preview h2{font-size:30px;font-weight:400;margin:22px 0 8px}.matrix-preview h3{font-size:15px;font-weight:400;color:#9bc9db}.matrix-preview p{font-size:13px;line-height:1.8;color:#adbdc9}.matrix-note{font-size:10px;color:#7d96a7}.matrix-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:20px 0}.matrix-tabs button,.matrix-preview footer button{border:1px solid #8daec62e;background:transparent;border-radius:5px;min-height:44px;padding:8px;font-size:11px}.matrix-tabs button[aria-pressed=true]{border-color:#72d8f5;color:#72d8f5;background:#72d8f512}.matrix-preview footer{display:flex;gap:10px}.matrix-preview footer .matrix-full{flex:1}.matrix-prev,.matrix-next{width:44px}@keyframes matrix-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@media(max-width:700px){.matrix-open-button{right:6%;top:37%;font-size:9px}.matrix-preview{margin:auto;padding:20px}.matrix-image{height:150px}}

/* Archive inspection replaces the introductory copy, retaining matrix interaction. */
.intro-copy,.intro-topline,.intro-caption,.matrix-open-button{transition:opacity .25s ease,visibility .25s ease}
.matrix-inspecting .intro-copy,.matrix-inspecting .intro-topline,.matrix-inspecting .intro-caption,.matrix-inspecting .matrix-open-button{opacity:0!important;visibility:hidden;pointer-events:none}
.matrix-preview{position:fixed;inset:120px auto auto 5.5%;margin:0;z-index:45;width:min(420px,88vw);max-height:calc(100svh - 205px);padding:22px;background:#081520f2;box-shadow:0 25px 90px #0008}
.matrix-preview .matrix-image{height:145px}.matrix-preview h2{font-size:26px;margin-top:16px}.matrix-preview .matrix-number{padding:12px 0 16px}
@media(max-width:700px){.matrix-preview{inset:135px 5% auto;width:90%;max-height:calc(100svh - 215px);padding:16px}.matrix-preview .matrix-image{height:115px}.matrix-preview h2{font-size:23px}.matrix-preview p{font-size:12px}.matrix-tabs{margin:12px 0}}
@media(prefers-reduced-motion:reduce){.matrix-preview[open]{animation:none}}
body:has(.matrix-preview[open]) :is(.intro-copy,.intro-topline,.intro-caption,.matrix-open-button){opacity:0!important;visibility:hidden!important;pointer-events:none}