:root{
    --bg:#08090c; --bg2:#0e1016; --card:#111319; --line:#232734;
    --ink:#e7e9ee; --dim:#9aa2b1; --faint:#5b6373;
    --sans:"Futura","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;
    --mono:"Cascadia Mono","Consolas",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, #16192200 0%, transparent 60%),
      radial-gradient(ellipse at 15% 8%, #14202a55 0%, transparent 45%),
      radial-gradient(ellipse at 85% 95%, #1d162355 0%, transparent 50%),
      var(--bg);
    color:var(--ink); font-family:var(--sans);
    min-height:100%; overflow-x:hidden;
  }
  /* faint grain */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
    background-image:radial-gradient(circle 1px at 25% 30%,#fff 99%,transparent),
      radial-gradient(circle 1px at 70% 60%,#fff 99%,transparent),
      radial-gradient(circle 1px at 45% 85%,#fff 99%,transparent);
    background-size:120px 120px,150px 150px,100px 100px;
  }
  .wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px) 60px;}

  /* ── hero ── */
  header.hero{margin-bottom:clamp(28px,4vw,48px);}
  .eyebrow{font:11px/1 var(--mono);letter-spacing:.42em;color:var(--faint);text-transform:uppercase;}
  h1{
    margin:14px 0 0;font-weight:800;letter-spacing:.14em;line-height:.9;
    font-size:clamp(44px,9vw,104px);
    background:linear-gradient(180deg,#fff 0%,#aeb6c6 62%,#5a6274 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sub{margin-top:16px;max-width:56ch;color:var(--dim);font-size:clamp(13px,1.5vw,16px);line-height:1.5;letter-spacing:.01em;}
  .sub b{color:var(--ink);font-weight:700;}
  .count{margin-top:14px;font:11px var(--mono);letter-spacing:.24em;color:var(--faint);text-transform:uppercase;}

  /* ── grid ── */
  .grid{
    display:grid;gap:clamp(14px,1.8vw,22px);
    grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  }
  .card{
    display:flex;flex-direction:column;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,var(--card),#0c0e13);
    border:1px solid var(--line);border-radius:12px;overflow:hidden;
    color:var(--ink);font-family:inherit;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
    position:relative;
  }
  .card::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
    box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .18s ease;}
  .card:hover,.card:focus-visible{
    transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
    box-shadow:0 18px 40px -20px #000, 0 0 34px -18px var(--accent);outline:none;
  }
  .card:focus-visible::after{box-shadow:inset 0 0 0 2px var(--accent);}
  .emblem{position:relative;aspect-ratio:320/200;background:#000;border-bottom:1px solid var(--line);}
  .emblem svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .4s ease;}
  .card:hover .emblem svg{transform:scale(1.045);}
  .emblem .kindchip{
    position:absolute;left:12px;top:11px;z-index:2;
    font:9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;
    color:#05070a;background:var(--accent);padding:3px 8px;border-radius:20px;font-weight:700;
    box-shadow:0 2px 8px -2px #000;
  }
  .meta{padding:15px 16px 6px;flex:1;}
  .name{font-size:19px;font-weight:800;letter-spacing:.04em;line-height:1.1;}
  .tag{margin-top:7px;color:var(--dim);font-size:12.5px;line-height:1.45;}
  .launch{
    display:flex;align-items:center;gap:8px;padding:12px 16px 15px;
    font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  }
  .launch .arrow{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
    border:1px solid var(--accent);font-size:9px;}
  .card:hover .launch{color:#fff;}
  .card:hover .launch .arrow{background:var(--accent);color:#05070a;}

  footer.foot{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
    font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

  /* ── viewer overlay ── */
  body.locked{overflow:hidden;}
  .viewer{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;}
  .viewer[hidden]{display:none;}
  .vbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:46px;padding:0 14px;background:linear-gradient(180deg,#0d0f14,#090a0e);
    border-bottom:1px solid var(--line);flex:none;
  }
  .vtitle{display:flex;align-items:baseline;gap:12px;min-width:0;}
  #vname{font-weight:800;letter-spacing:.06em;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .vkind{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
  .vactions{display:flex;gap:8px;flex:none;}
  .vbtn{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    background:#14171e;color:var(--ink);border:1px solid var(--line);border-radius:7px;
    font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;text-decoration:none;
  }
  .vbtn:hover{border-color:var(--dim);}
  .vbtn kbd{font:10px var(--mono);background:#000;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--dim);}
  .vframe{flex:1;width:100%;border:0;background:#000;display:block;}

  @media (prefers-reduced-motion:reduce){
    .card,.emblem svg{transition:none;}
    .card:hover{transform:none;}
    .card:hover .emblem svg{transform:none;}
  }

.foot .iamu-home { color: var(--dim); text-decoration: none; }
.foot .iamu-home:hover, .foot .iamu-home:focus-visible { color: var(--ink); outline: 1px solid var(--faint); outline-offset: 4px; }
.iamu-home svg { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.5em; vertical-align: -0.12em; overflow: visible; }
.iamu-home path { fill: none; stroke: currentColor; stroke-width: 27; stroke-linecap: round; }