:root{
  --bg:#080a14;
  --bg2:#0e1224;
  --panel:#141a2e;
  --panel2:#1a2138;
  --line:#2a3452;
  --ink:#e8ecff;
  --ink-dim:#93a0c8;
  --amber:#ffb347;
  --amber-hot:#ff7a3d;
  --mint:#5ef0c0;
  --rose:#ff6b8a;
  --violet:#8b7bff;
  --sky:#54b8ff;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 12% -8%, #1b2450 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #331d4a 0%, transparent 55%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  min-height:100vh;
  padding:0 clamp(16px,4vw,54px) 40px;
  -webkit-font-smoothing:antialiased;
}
.scan{
  position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.glow{
  position:fixed;left:50%;top:-260px;width:900px;height:460px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,150,60,.16),transparent 70%);
  pointer-events:none;z-index:0;
}

/* ---------- masthead ---------- */
.masthead{position:relative;z-index:2;padding:46px 0 26px;max-width:1180px;margin:0 auto}
.logoRow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.badge{
  font:700 11px/1 "Courier New",monospace;letter-spacing:.22em;color:#0c0f1c;
  background:linear-gradient(180deg,var(--amber),var(--amber-hot));
  padding:7px 11px;border-radius:4px;box-shadow:0 0 22px rgba(255,140,60,.45);
  transform:translateY(4px);
}
h1{
  margin:0;font-family:"Courier New",ui-monospace,monospace;
  font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.02em;font-weight:700;
  text-shadow:0 0 30px rgba(255,140,60,.25);
}
h1 .a{color:var(--amber)}
.blurb{margin:14px 0 0;max-width:62ch;color:var(--ink-dim);font-size:1.02rem;line-height:1.55}
.statline{
  margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;
  font:600 11.5px/1 "Courier New",monospace;letter-spacing:.12em;color:var(--ink-dim);
}
.statline .chip{
  border:1px solid var(--line);background:rgba(20,26,46,.7);border-radius:999px;
  padding:8px 12px;text-transform:uppercase;
}
.statline .chip b{color:var(--amber);font-weight:700}

/* ---------- sections ---------- */
.library{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.section{margin:38px 0 0}
.sectionHead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.sectionHead h2{
  margin:0;font:700 13px/1 "Courier New",monospace;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);
}
.sectionHead .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sectionHead .hint{margin:0;color:var(--ink-dim);font-size:.86rem}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid.featured{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}

/* ---------- cards ---------- */
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;color:inherit;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -28px #000;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent,var(--amber));
  box-shadow:0 26px 50px -30px #000,0 0 0 1px var(--accent,var(--amber)) inset,0 0 34px -10px var(--accent,var(--amber));
  outline:none;
}
.thumb{
  position:relative;height:132px;display:flex;align-items:center;justify-content:center;
  color:var(--accent,var(--amber));
  background:var(--art,linear-gradient(135deg,#243056,#131a2e));
  border-bottom:1px solid var(--line);
}
.thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,10,20,.72) 100%);
}
.thumb svg{position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.num{
  position:absolute;top:10px;left:12px;z-index:2;
  font:700 11px/1 "Courier New",monospace;color:#0c0f1c;background:rgba(255,255,255,.82);
  border-radius:4px;padding:4px 6px;letter-spacing:.06em;
}
.flags{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px}
.flag{
  font:700 9.5px/1 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 7px;border-radius:4px;background:rgba(8,10,20,.72);border:1px solid rgba(255,255,255,.18);color:#dfe6ff;
}
.flag.pub{color:#0c0f1c;background:var(--mint);border-color:transparent}
.cardBody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.cardBody h3{margin:0;font-size:1.16rem;letter-spacing:-.01em}
.cardBody .sub{margin:0;color:var(--accent,var(--amber));font:600 10.5px/1.4 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}
.cardBody p{margin:0;color:var(--ink-dim);font-size:.925rem;line-height:1.55}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag{
  font:600 10.5px/1 "Courier New",monospace;color:#c3cdee;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:999px;padding:6px 9px;
}
.cardFoot{
  margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px dashed rgba(255,255,255,.09);
}
.controls{font:600 10.5px/1.35 "Courier New",monospace;color:#7f8cb8;max-width:60%}
.play{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font:700 11px/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#0c0f1c;background:linear-gradient(180deg,#fff,var(--accent,var(--amber)));
  padding:9px 12px;border-radius:6px;
}
.card:hover .play{box-shadow:0 0 20px -4px var(--accent,var(--amber))}
.history{
  position:absolute;bottom:0;left:0;right:0;z-index:1;
  padding:7px 14px;font:600 10px/1 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#0c0f1c;background:rgba(255,255,255,.6);
}
.tile{display:flex;flex-direction:column;gap:9px;min-width:0}
.tile .card{flex:1}
.share{
  align-self:flex-start;
  font:700 10px/1 "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint);text-decoration:none;
  border:1px solid rgba(94,240,192,.35);border-radius:999px;padding:8px 11px;
  transition:background .15s ease,border-color .15s ease;
}
.share:hover{background:rgba(94,240,192,.12);border-color:var(--mint)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;max-width:1180px;margin:46px auto 0;padding-top:22px;border-top:1px solid var(--line)}
.footLinks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.footLinks a{
  color:var(--ink-dim);text-decoration:none;font:600 11px/1 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 12px;transition:color .15s,border-color .15s;
}
.footLinks a:hover{color:var(--amber);border-color:var(--amber)}
.fineprint{margin:0;color:#6c78a4;font-size:.82rem}
.key{font:700 .95rem/1 "Courier New",monospace;color:var(--amber);letter-spacing:.04em}
@media (max-width:520px){
  .thumb{height:112px}
  .controls{max-width:100%}
  .cardFoot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}