/* Edge-to-edge editorial preview, fading into the live archive field. */
.matrix-preview{position:fixed;inset:0 auto 0 0;margin:0;width:53vw;max-width:none;height:100svh;max-height:none;padding:100px clamp(24px,3.5vw,64px) 28px;border:0;border-radius:0;box-shadow:none;overflow:auto;color:#142c3a;background:linear-gradient(100deg,rgba(224,238,242,.95) 0%,rgba(218,236,242,.87) 76%,rgba(212,234,242,.55) 94%,rgba(212,234,242,.05));isolation:isolate;scrollbar-width:thin;z-index:35}
.matrix-preview::before{content:"";position:fixed;inset:0 auto 0 0;width:53vw;z-index:-1;pointer-events:none;backdrop-filter:blur(22px) saturate(.65);-webkit-backdrop-filter:blur(22px) saturate(.65);mask-image:linear-gradient(90deg,#000 0%,#000 65%,transparent 100%)}
.matrix-preview[open]{animation:matrix-sheet-in .65s cubic-bezier(.16,1,.3,1) both}
.matrix-orbit{display:none}
.matrix-panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;background:none;padding:0 0 18px;border-bottom:1px solid #244b5c30;margin-bottom:24px}
.matrix-preview .matrix-number{padding:0;color:#3b6577;font-size:10px;letter-spacing:2.5px}.matrix-close{float:none;background:none;border:0;color:#244654;width:44px;height:44px;font-size:26px;border-radius:0}
.matrix-preview .matrix-image,.matrix-preview .matrix-image[data-kind]{position:relative;width:100%;height:clamp(230px,35svh,440px);margin:0;border:0;border-radius:0;filter:none;opacity:1;overflow:hidden}
.matrix-image>img:first-child{object-position:center;transition:filter .6s,object-position .6s}.matrix-image[data-kind="1"]>img:first-child{filter:saturate(.5)}.matrix-image[data-kind="4"]>img:first-child{filter:hue-rotate(25deg)}
.matrix-image-label{position:absolute;bottom:16px;left:20px;color:#e5f6ff;font-size:9px;letter-spacing:3px;text-shadow:0 1px 6px #000}
.matrix-glass{padding:25px 0 0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.matrix-heading{display:flex;align-items:baseline;gap:18px;justify-content:space-between}.matrix-preview h2{font-size:clamp(30px,3.5vw,58px);font-weight:400;letter-spacing:-1.5px;line-height:1.18;margin:0;color:#112b3b;overflow:hidden}.matrix-note{font-size:9px;letter-spacing:1px;color:#526e7d;white-space:nowrap}
.matrix-title-char{display:inline-block;white-space:pre;animation:matrix-char-in .65s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--char)*35ms)}
.matrix-preview h3{font-weight:400;font-size:15px;color:#375b6c;margin:12px 0}.matrix-preview p{font-size:13px;line-height:1.8;color:#405b69;max-width:62ch;margin:12px 0 20px}
.matrix-tabs{display:flex;gap:0;flex-wrap:wrap;margin:18px 0;border-top:1px solid #2d5a702b;border-bottom:1px solid #2d5a702b}.matrix-tabs button{flex:1;padding:10px 5px;min-height:44px;border:0;border-bottom:2px solid transparent;border-radius:0;color:#526d7b;background:none;font-size:10px;white-space:nowrap}.matrix-tabs button[aria-pressed=true]{color:#076e92;background:#4f98b010;border-color:#087c9f}
.matrix-preview footer{display:flex;gap:10px;padding:0 0 20px}.matrix-preview footer button{min-height:44px;border:1px solid #2c52652e;border-radius:0;color:#26495c;background:none;font-size:11px}.matrix-preview footer .matrix-full{border:0;text-align:left;padding-left:10px;letter-spacing:1px;flex:1}.matrix-autoplay,.matrix-prev,.matrix-next{width:44px}
.matrix-timeline{height:2px;background:#285b701f;overflow:hidden;margin:0}.matrix-timeline i{display:block;height:100%;background:#087f9f;transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
body:has(.matrix-preview[open]) .navigation{background:transparent}body:has(.matrix-preview[open]) .navigation .brand{color:#17364a}body:has(.matrix-preview[open]) .navigation .brand img{filter:invert(1);mix-blend-mode:multiply}
@keyframes matrix-sheet-in{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:none}}
@keyframes matrix-char-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.matrix-preview,.matrix-preview::before{width:60vw}.matrix-heading{display:block}.matrix-note{display:block;margin-top:8px}.matrix-tabs button{flex:1 0 30%}}
@media(max-width:700px){.matrix-preview{width:94vw;padding:120px 22px 24px}.matrix-preview::before{width:94vw}.matrix-preview .matrix-image,.matrix-preview .matrix-image[data-kind]{height:29svh;min-height:190px}.matrix-panel-head{margin-bottom:18px;padding-bottom:10px}.matrix-preview h2{font-size:34px}.matrix-preview p{font-size:12px}.matrix-glass{padding-top:20px}body:has(.matrix-preview[open]) .navigation{background:#dbeaf1ee}body:has(.matrix-preview[open]) .navigation button,body:has(.matrix-preview[open]) .navigation summary{color:#163c50}}
@media(prefers-reduced-motion:reduce){.matrix-preview[open],.matrix-title-char{animation:none}.matrix-timeline i{transition:none}}
body:has(.matrix-preview[open]) .navigation .mark{mix-blend-mode:multiply}body:has(.matrix-preview[open]) .navigation nav button{color:#244c60}body:has(.matrix-preview[open]) .bottom-ui .scene-dots,body:has(.matrix-preview[open]) .bottom-ui .scene-status{visibility:hidden}

/* The atmospheric layer extends beyond the content column, without clipping at its edge. */
.matrix-atmosphere{position:fixed;inset:0 auto 0 0;width:82vw;z-index:34;pointer-events:none;opacity:0;visibility:hidden;background:linear-gradient(90deg,#e2eef2fa 0%,#dfedf1f2 35%,#daebf0d9 49%,#d4e9f09e 60%,#cce4ed50 73%,#cce4ed14 87%,transparent 100%);backdrop-filter:blur(25px) saturate(.7);-webkit-backdrop-filter:blur(25px) saturate(.7);mask-image:linear-gradient(90deg,#000 0%,#000 46%,#000c 61%,#0006 76%,transparent 100%);transition:opacity .55s ease,visibility .55s ease}
body:has(.matrix-preview[open]) .matrix-atmosphere{opacity:1;visibility:visible}
.matrix-preview{background:transparent;isolation:auto;padding-top:100px}
.matrix-preview::before{display:none}
.matrix-panel-head{border:0;margin-bottom:16px;padding-bottom:4px}
.matrix-close{border-radius:50%;background:#ffffff36;border:1px solid #fff6;font-size:23px;transition:background .2s}
.matrix-close:hover{background:#ffffff85}
.matrix-preview .matrix-image,.matrix-preview .matrix-image[data-kind]{width:96%;margin-left:4%;border-radius:5px 70px 5px 32px;height:clamp(220px,34svh,420px);mask-image:linear-gradient(125deg,#000 0%,#000 79%,#000c 92%,#0009 100%)}
.matrix-image-label{left:26px;bottom:20px;letter-spacing:2px}
.matrix-glass{padding-top:28px;padding-right:4%}
.matrix-heading{align-items:flex-end;gap:20px}
.matrix-preview h2{font-size:clamp(34px,3.8vw,62px);letter-spacing:-2px}
.matrix-note{padding-bottom:5px;font-size:9px}
.matrix-preview h3{margin:16px 0 10px}
.matrix-preview p{max-width:48ch;color:#385868;line-height:1.85}
.matrix-tabs{border:0;gap:6px;margin:23px 0 16px;justify-content:flex-start}
.matrix-tabs button{flex:0 1 auto;border:0;border-radius:30px;padding:10px 14px;color:#3e6477;background:transparent;transition:background .2s,color .2s}
.matrix-tabs button:hover{background:#ffffff50}
.matrix-tabs button[aria-pressed=true]{color:#f2fcff;background:#19475a}
.matrix-preview footer{align-items:center;gap:9px;padding-bottom:20px}
.matrix-preview footer button{border-radius:50%;border:1px solid #3b65702b;background:#ffffff26}
.matrix-preview footer .matrix-full{border-radius:28px;border:0;background:none;font-size:12px}
.matrix-timeline{height:2px;width:92%;border-radius:10px;background:linear-gradient(90deg,#315f7030,transparent)}
.matrix-timeline i{border-radius:10px;background:linear-gradient(90deg,#216e86,#45a9c2)}
@media(max-width:1100px){.matrix-atmosphere{width:94vw}.matrix-tabs button{flex:0 1 auto;padding:8px 12px}.matrix-heading{display:block}}
@media(max-width:700px){.matrix-atmosphere{width:100vw;background:linear-gradient(90deg,#e2eef2fa,#dfedf1ee 62%,#daebf0b3 85%,#daebf060);mask-image:linear-gradient(90deg,#000 0%,#000 68%,#000c 85%,#0005 100%)}.matrix-preview{padding-top:120px}.matrix-preview .matrix-image,.matrix-preview .matrix-image[data-kind]{height:28svh;width:100%;margin:0;border-radius:4px 44px 4px 24px}.matrix-glass{padding-top:24px;padding-right:0}.matrix-preview h2{font-size:37px}.matrix-tabs{gap:4px;margin-top:18px}.matrix-tabs button{padding:8px 11px}.matrix-timeline{width:100%}}
@media(prefers-reduced-motion:reduce){.matrix-atmosphere{transition:none}}


/* Pointer cue: one line-drawing pass followed by a short typed invitation. */
.matrix-open-button{right:6%;top:29%;width:290px;height:155px;padding:0;border:0;border-radius:0;background:transparent;color:#c5f1ff;text-align:right;cursor:pointer;filter:drop-shadow(0 2px 9px #020b14);letter-spacing:0}
.matrix-open-button .guide-label{position:absolute;right:8px;top:0;font:400 17px/1.5 Consolas,"Courier New",monospace;letter-spacing:1px;white-space:pre}
.guide-letter{opacity:1;animation:guide-type .01s steps(1,end) both;animation-delay:calc(1.2s + var(--letter)*65ms)}
.guide-cursor{display:inline-block;margin-left:4px;width:7px;height:16px;vertical-align:-2px;background:#b6eeff;animation:guide-cursor .7s step-end 4;animation-delay:2.1s;opacity:0}
.matrix-open-button .guide-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#9cdef4;stroke-width:1.2;pointer-events:none}
.guide-trace{stroke-dasharray:100;stroke-dashoffset:0;animation:guide-grow 1.1s .15s cubic-bezier(.4,0,.2,1) both}
.guide-arrow,.guide-target{animation:guide-appear .3s 1.1s both;transform-box:fill-box;transform-origin:center}
.guide-target{stroke-opacity:.45}.matrix-open-button:hover .guide-lines{stroke:#e4faff;filter:drop-shadow(0 0 4px #66d9ff)}
@keyframes guide-grow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes guide-appear{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes guide-type{from{opacity:0}to{opacity:1}}
@keyframes guide-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:700px){.matrix-open-button{top:28%;right:6%;width:215px;height:125px}.matrix-open-button .guide-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.guide-letter,.guide-trace,.guide-arrow,.guide-target,.guide-cursor{animation:none}.guide-cursor{display:none}}
.motion-off .guide-letter,.motion-off .guide-trace,.motion-off .guide-arrow,.motion-off .guide-target{opacity:1;stroke-dashoffset:0}