:root{
--bg:#000;
--fg:#e8e8e8;
--muted:rgba(232,232,232,.62);
--muted2:rgba(232,232,232,.38);
--glass:rgba(0,0,0,.38);
--glass2:rgba(0,0,0,.58);
--radius:18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
margin:0;
background:var(--bg);
color:var(--fg);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
overflow:hidden;
}

.topbar{
position:fixed;
top:0; left:0; right:0;
padding: calc(env(safe-area-inset-top) + 14px) 18px 10px;
z-index:20;
background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
}

.brand-title{
letter-spacing:.38em;
font-weight:600;
font-size:14px;
}
.brand-sub{
margin-top:6px;
color:var(--muted);
font-size:12px;
letter-spacing:.06em;
}

.stage{
position:fixed;
inset:0;
padding-top: 70px;
}

.image-wrap{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
}

#artImg{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
opacity:0;
transition:opacity .35s ease;
user-select:none;
-webkit-user-drag:none;
}

#artImg.is-ready{ opacity:1; }

.fade{
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(1200px 800px at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.55) 70%, rgba(0,0,0,.85) 100%),
linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.0) 55%);
}

.meta{
position:absolute;
left:18px;
right:18px;
top: 110px;
z-index:10;
max-width:720px;
pointer-events:none;
text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.exh-title{
letter-spacing:.55em;
font-size:22px;
font-weight:600;
}

.art-line{
margin-top:10px;
font-size:13px;
color:var(--muted);
letter-spacing:.04em;
}

.art-loc{
margin-top:6px;
font-size:12px;
color:var(--muted2);
letter-spacing:.03em;
}

.loading{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
letter-spacing:.35em;
font-size:12px;
color:var(--muted);
z-index:12;
padding:10px 14px;
border-radius:999px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.06);
}

.ai-card{
position:absolute;
left:18px;
right:18px;
bottom: calc(env(safe-area-inset-bottom) + 18px);
z-index:15;
max-width:720px;
margin:0 auto;
padding:14px 14px 14px;
border-radius: var(--radius);
background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.78));
border:1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
}

.ai-kicker{
font-size:11px;
letter-spacing:.28em;
color:var(--muted2);
margin-bottom:8px;
}
.ai-text{
font-size:13px;
color:var(--muted);
line-height:1.35;
}

.tap{
position:absolute;
top:0;
bottom:0;
width:50%;
border:0;
background:transparent;
padding:0;
margin:0;
z-index:25;
}
.tap-left{ left:0; }
.tap-right{ right:0; }

@media (max-width:420px){
.meta{ top: 102px; }
.exh-title{ font-size:20px; }
}