:root{
  --a:#d8b76a;--a2:#fff1bd;--b1:#050505;--b2:#211a0d;--ov:.38;--rad:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;
  background:#050505;color:#fff;-webkit-tap-highlight-color:transparent}

#bg,#bgi,#ov,#fx{position:fixed;inset:0;pointer-events:none}
#bg{z-index:-4}
#bg.g-diag{background:linear-gradient(135deg,var(--b1),var(--b2),#050505);background-size:220% 220%;animation:g 14s ease infinite}
#bg.g-radial{background:radial-gradient(circle at 50% 35%,var(--b2),var(--b1) 65%,#050505);background-size:160% 160%;animation:gr 16s ease infinite}
#bg.g-vert{background:linear-gradient(180deg,var(--b1),var(--b2),#050505);background-size:100% 240%;animation:gv 14s ease infinite}
#bg.g-horiz{background:linear-gradient(90deg,var(--b1),var(--b2),#050505);background-size:240% 100%;animation:gh 14s ease infinite}
#bgi{z-index:-3;background:center/cover no-repeat;opacity:.3}
#ov{z-index:-2;background:rgba(0,0,0,var(--ov))}
#fx{z-index:-1;overflow:hidden}
@keyframes g{50%{background-position:100% 50%}}
@keyframes gr{50%{background-position:60% 60%}}
@keyframes gv{50%{background-position:50% 100%}}
@keyframes gh{50%{background-position:100% 50%}}
.s{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--a);
  box-shadow:0 0 12px var(--a);animation:fl 10s linear infinite}
@keyframes fl{from{transform:translateY(110vh);opacity:0}15%{opacity:.5}to{transform:translateY(-10vh) translateX(60px);opacity:0}}

header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:12px 14px;background:#0009;backdrop-filter:blur(16px);border-bottom:1px solid #fff2}
.brand{display:flex;gap:10px;align-items:center;min-width:0}
.logoWrap{flex:none;width:42px;height:42px;border-radius:12px;overflow:hidden;background:#fff;
  display:grid;place-items:center;border:1px solid var(--a)}
.logoWrap img{width:100%;height:100%;object-fit:contain}
.brand h1{font-size:13px;letter-spacing:2px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:#aaa;font-size:8px;letter-spacing:1px}

.hero{text-align:center;padding:26px 16px 14px}
.k{font-size:9px;letter-spacing:4px;color:var(--a)}
h2{font-size:clamp(26px,7vw,42px);margin:8px 0;background:linear-gradient(90deg,#fff,var(--a2),#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#bbb;font-size:12px;margin:0}

#gallery{max-width:1400px;margin:auto;padding:6px 12px 60px;display:grid;grid-template-columns:1fr;gap:14px}
.media{position:relative;border:1px solid #fff2;border-radius:var(--rad);overflow:hidden;
  background:#0006;box-shadow:0 15px 40px #0007;animation:pin .5s ease}
.media img,.media video{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;background:#111}
.media.pdf{padding:26px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.media.pdf .pico{font-size:38px}
@keyframes pin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.label{position:absolute;bottom:10px;left:10px;background:#000a;padding:6px 10px;border-radius:20px;font-size:9px;letter-spacing:1px}
.media.pdf .label{position:static;display:inline-block;margin-top:2px}

.media.pdf-doc{background:#111}
.media.pdf-doc .cap{padding:9px 12px;font-size:9px;letter-spacing:1px;color:#ddd;background:#000a}
.pdf-pages{display:flex;flex-direction:column;gap:3px;background:#0006}
.pdf-pages canvas{width:100%;height:auto;display:block;background:#fff}
.pdf-pages .pdf-loading{padding:30px 16px;text-align:center;color:#bbb;font-size:11px}

.empty{margin:30px 16px;padding:50px 20px;text-align:center;border:1px dashed #fff4;border-radius:var(--rad);background:#fff1}
.empty b{font-size:44px;color:var(--a);display:block}

footer{text-align:center;color:#777;font-size:9px;letter-spacing:2px;padding:10px 0 26px}

#viewer{display:none;position:fixed;inset:0;z-index:100;background:#000f;align-items:center;justify-content:center;padding:14px}
#viewer.open{display:flex}
#viewer img,#viewer video{max-width:96vw;max-height:82vh;border-radius:12px}
#viewer iframe{width:96vw;height:86vh;border:0;background:#fff;border-radius:10px}
.vbtn{position:fixed;background:#0008;border:1px solid #fff3;color:#fff;width:42px;height:42px;
  border-radius:50%;font-size:18px;display:grid;place-items:center;cursor:pointer}
.vclose{top:14px;right:14px}
.vprev{left:8px;top:50%;transform:translateY(-50%)}
.vnext{right:8px;top:50%;transform:translateY(-50%)}

@media(min-width:700px){
  #gallery{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
  .media img,.media video{max-height:420px}
}