:root{
  --bg:#0b0f14; --fg:#e6eef8; --muted:#a9bccf; --line:#1b2632;
  --card:#0f1821; --accent:#8ef0a6; --pad:clamp(10px,2.2svh,28px);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:radial-gradient(1200px 800px at 10% 8%, #14202c, transparent), var(--bg)}
body{
  margin:0; color:var(--fg); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  min-height:100svh; display:grid; grid-template-rows:1fr auto; overflow:hidden;
}
.stage{
  display:grid; gap:clamp(10px,2svw,24px);
  grid-template-columns: 1.2fr 1fr;
  align-items:center; padding:calc(var(--pad)*.8) var(--pad);
  max-width:1200px; margin:0 auto;
  height:calc(100svh - 8svh);
}
@media (max-width: 940px){
  .stage{grid-template-columns:1fr; height:auto; grid-auto-rows:min-content; overflow:auto}
}
.frame{
  position:relative; width:100%; height:100%; min-height:52svh;
  border-radius:16px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.4); overflow:hidden;
  aspect-ratio:9/16;
}
@media (min-aspect-ratio: 16/9){ .frame{aspect-ratio:16/9} }
.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center}
.badge{
  position:absolute; left:10px; bottom:10px; background:#0e141bcc; color:var(--accent);
  border:1px solid var(--line); border-radius:12px; padding:.45em .8em; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; font-size:clamp(12px,2.2svh,18px); backdrop-filter:saturate(120%) blur(6px);
}
.right{width:100%; max-height:100%; display:grid; align-content:start; gap:10px}
h1{font-size:clamp(24px,4.2svh,42px); margin:0 0 4px; color:var(--accent)}
.intro{margin:0; color:var(--fg); opacity:.95; font-size:clamp(14px,1.9svh,18px); line-height:1.4}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px;padding:0;list-style:none}
.pills li{border:1px solid var(--line);background:#0f1821b3;border-radius:999px;padding:.4em .75em;font-size:clamp(12px,1.7svh,14px);color:#cfe0f2}
.assets{display:flex;gap:10px;align-items:center;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:12px;background:#0f1821b3}
.assets img{height:64px; width:auto; object-fit:contain; border-radius:10px; background:#0e141b; border:1px solid var(--line)}
.assets::-webkit-scrollbar{height:8px}
.assets::-webkit-scrollbar-thumb{background:#203040;border-radius:99px}
.foot{text-align:center;color:var(--muted);padding:0 var(--pad) calc(var(--pad)*.9);font-size:clamp(12px,1.6svh,14px)}