:root{--green:#76ff95;--green2:#2bff69;--ink:#020403;--paper:#d8e2d8;--line:rgba(118,255,149,.25)}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#102619 0,#050a07 36%,#010201 78%);color:var(--paper);font-family:"Courier New",monospace;overflow-x:hidden}
button,a{font:inherit}
#vaultMatrix{position:fixed;inset:0;width:100%;height:100%;opacity:.12;z-index:0;pointer-events:none}
.scanlines,.noise{position:fixed;inset:0;pointer-events:none;z-index:20}
.scanlines{background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.28) 4px);mix-blend-mode:multiply}
.noise{opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.vault-topbar{position:sticky;top:0;z-index:15;height:72px;padding:0 clamp(16px,4vw,52px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(1,4,2,.82);backdrop-filter:blur(14px)}
.vault-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;letter-spacing:.14em}
.vault-brand span{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--green);color:var(--green);font-weight:900;box-shadow:inset 0 0 16px rgba(118,255,149,.12),0 0 18px rgba(118,255,149,.08)}
.vault-brand b{font-size:20px}
.vault-status{font-size:11px;letter-spacing:.18em;color:var(--green)}
.vault-status i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.3s infinite}
main{position:relative;z-index:2;max-width:1440px;margin:auto;padding:0 clamp(14px,3vw,42px) 50px}
.vault-hero{text-align:center;padding:clamp(64px,10vw,130px) 0 clamp(38px,7vw,80px)}
.vault-hero>p:first-child{color:var(--green);font-size:11px;letter-spacing:.25em;margin:0 0 22px}
h1{position:relative;display:inline-block;margin:0;color:#f0f6f0;font-size:clamp(54px,12vw,150px);line-height:.8;letter-spacing:-.075em;text-shadow:5px 0 #153e25,-3px 0 #263a30}
h1:before,h1:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.55;clip-path:inset(0 0 62% 0)}
h1:before{color:#ff3157;transform:translate(-4px,2px);animation:glitchA 4.5s steps(1) infinite}
h1:after{color:#42f4ff;transform:translate(4px,-1px);animation:glitchB 3.8s steps(1) infinite}
.vault-rule{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;max-width:720px;margin:32px auto 22px;color:#9ca99e;font-size:11px;letter-spacing:.16em}
.vault-rule span{height:1px;background:linear-gradient(90deg,transparent,var(--line))}.vault-rule span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.vault-intro{color:#9ca99e;font-size:clamp(12px,2.5vw,15px);line-height:1.75;letter-spacing:.04em}
.vault-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.vault-empty{grid-column:1/-1;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;border:1px dashed var(--line);background:rgba(2,8,4,.56);text-align:center;color:#68756b;letter-spacing:.12em;font-size:10px}.vault-empty b{color:var(--green);font-size:14px}.vault-empty.vault-error b{color:#ff5661}
.vault-card{position:relative;min-width:0;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:#050806;cursor:pointer;padding:0;color:inherit;isolation:isolate;transition:border-color .2s,transform .2s,box-shadow .2s}
.vault-card:before,.vault-card:after{content:"";position:absolute;z-index:3;width:22px;height:22px;pointer-events:none}
.vault-card:before{top:8px;left:8px;border-top:2px solid var(--green);border-left:2px solid var(--green)}
.vault-card:after{right:8px;bottom:8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green)}
.vault-card img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.84) contrast(1.05);transition:transform .45s,filter .3s}
.vault-card .vault-main-image{transform:scale(1.07);will-change:transform}.vault-card.in-view .vault-main-image{animation:cinematicDrift var(--motion-time,18s) ease-in-out infinite alternate}
.glitch-copy{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transform:scale(1.08)}.glitch-red{mix-blend-mode:screen;filter:saturate(1.5) contrast(1.15) sepia(1) hue-rotate(300deg)}.glitch-cyan{mix-blend-mode:screen;filter:saturate(1.5) contrast(1.15) sepia(1) hue-rotate(120deg)}
.light-scan{position:absolute;z-index:3;inset:-60% -20%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,rgba(185,255,200,.13) 49%,rgba(255,255,255,.16) 50%,transparent 57%);transform:translateX(-55%);opacity:0}.vault-card.in-view .light-scan{animation:lightSweep 9s ease-in-out infinite}
.signal-code{position:absolute;z-index:4;right:10px;bottom:12px;color:rgba(118,255,149,.72);font-size:7px;letter-spacing:.14em;opacity:0;pointer-events:none}
.vault-card.signal-glitch .glitch-red{opacity:.36;clip-path:inset(13% 0 58% 0);transform:translate(-7px,1px) scale(1.08)}.vault-card.signal-glitch .glitch-cyan{opacity:.32;clip-path:inset(62% 0 18% 0);transform:translate(8px,-1px) scale(1.08)}.vault-card.signal-glitch .signal-code{opacity:1}.vault-card.signal-glitch{transform:translateY(-2px) skewX(-.25deg);filter:brightness(1.16)}
.vault-card .file-id{position:absolute;left:0;bottom:0;z-index:4;padding:9px 12px;background:rgba(1,4,2,.86);color:var(--green);font-size:10px;letter-spacing:.13em}
.vault-card .open-mark{position:absolute;right:12px;top:11px;z-index:4;opacity:0;color:#fff;font-size:18px;transition:opacity .2s}
.vault-card:hover,.vault-card:focus-visible{outline:none;border-color:var(--green);transform:translateY(-3px);box-shadow:0 0 24px rgba(118,255,149,.12)}
.vault-card:hover img,.vault-card:focus-visible img{transform:scale(1.035);filter:saturate(1) contrast(1.08)}
.vault-card:hover .open-mark,.vault-card:focus-visible .open-mark{opacity:1}
.viewer{position:fixed;inset:0;z-index:50;background:rgba(0,3,1,.96);display:grid;place-items:center;padding:70px 16px 18px;overflow:auto}
.viewer[hidden]{display:none}
.viewer.viewer-signal .viewer-frame{animation:viewerAcquire .55s steps(2)}
.viewer:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at center,rgba(42,255,101,.08),transparent 58%);pointer-events:none}
.viewer-close{position:fixed;right:18px;top:18px;z-index:2;border:1px solid var(--line);background:#050805;color:var(--green);padding:11px 14px;cursor:pointer}
.viewer-frame{position:relative;max-width:min(980px,96vw);border:1px solid var(--line);padding:8px;background:#020302;box-shadow:0 0 60px rgba(0,0,0,.8)}
.viewer-frame img{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:auto}
.viewer-data{display:flex;justify-content:space-between;padding:10px 4px 2px;color:var(--green);font-size:10px;letter-spacing:.14em}.viewer-data i{font-style:normal;color:#89978c}
.viewer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.viewer-actions a,.viewer-actions button{border:1px solid var(--green);background:#061008;color:var(--green);padding:13px 17px;text-decoration:none;cursor:pointer;font-weight:bold;font-size:11px;letter-spacing:.1em}
.viewer-actions a:hover,.viewer-actions button:hover{background:var(--green);color:#020403;box-shadow:0 0 25px rgba(118,255,149,.25)}
footer{display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding:28px 0 0;border-top:1px solid var(--line);font-size:10px;letter-spacing:.12em;color:#68756b}footer a{color:var(--green);text-decoration:none}
#vaultToast{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,20px);opacity:0;background:var(--green);color:#020403;padding:10px 14px;font-weight:bold;font-size:10px;letter-spacing:.1em;transition:.25s;pointer-events:none}#vaultToast.show{opacity:1;transform:translate(-50%,0)}
.load-zone{display:flex;justify-content:center;padding:34px 0 4px}.load-more{position:relative;min-width:230px;border:1px solid var(--green);background:rgba(4,15,7,.88);color:var(--green);padding:14px 22px;cursor:pointer;font-weight:bold;letter-spacing:.1em;box-shadow:inset 0 0 20px rgba(118,255,149,.04)}.load-more[hidden]{display:none}.load-more span,.load-more small{display:block}.load-more small{margin-top:5px;color:#657268;font-size:8px}.load-more:hover,.load-more:focus-visible{outline:none;background:var(--green);color:#020403;box-shadow:0 0 28px rgba(118,255,149,.2)}.load-more:hover small,.load-more:focus-visible small{color:#164822}
body.viewer-open{overflow:hidden}
@keyframes pulse{50%{opacity:.25;box-shadow:0 0 3px var(--green)}}
@keyframes glitchA{0%,92%,100%{transform:translate(-4px,2px)}93%{transform:translate(12px,-2px)}94%{transform:translate(-8px,4px)}95%{transform:translate(-4px,2px)}}
@keyframes glitchB{0%,88%,100%{transform:translate(4px,-1px)}89%{transform:translate(-11px,3px)}90%{transform:translate(8px,-4px)}91%{transform:translate(4px,-1px)}}
@keyframes cinematicDrift{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.14) translate(var(--motion-x),var(--motion-y))}}
@keyframes lightSweep{0%,66%,100%{transform:translateX(-58%);opacity:0}72%{opacity:1}82%{transform:translateX(58%);opacity:0}}
@keyframes viewerAcquire{0%{opacity:.2;transform:scale(.97) translateX(-8px);filter:contrast(1.8) hue-rotate(25deg)}35%{opacity:.8;transform:scale(1.01) translateX(7px);clip-path:inset(14% 0 46% 0)}65%{transform:scale(.995);clip-path:inset(57% 0 8% 0)}100%{opacity:1;transform:none;filter:none;clip-path:inset(0)}}
@media(max-width:760px){.vault-topbar{height:62px}.vault-brand span{width:38px;height:38px}.vault-brand b{font-size:16px}.vault-status{font-size:9px}.vault-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vault-card .file-id{font-size:8px;padding:7px 9px}.vault-hero{padding-top:65px}.vault-rule{gap:9px}.viewer-actions>*{flex:1 1 calc(50% - 8px);text-align:center}footer{flex-direction:column;text-align:center}}
@media(max-width:380px){.vault-status{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}