:root{
    --bg:#0a0908; --card:#13110f; --line:#2a2622;
    --ink:#ece6dc; --dim:#a39a8c; --faint:#655d52;
    --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 at 12% 6%, #2a1d1255 0%, transparent 45%),
      radial-gradient(ellipse at 88% 96%, #14202455 0%, transparent 50%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); min-height:100%; overflow-x:hidden;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) 60px;}

  /* ── hero ── */
  header.hero{margin-bottom:clamp(28px,4vw,44px);}
  .eyebrow{font:11px/1.4 var(--mono);letter-spacing:.42em;color:var(--faint);text-transform:uppercase;}
  h1{
    margin:14px 0 0;font-weight:800;letter-spacing:.1em;line-height:.95;
    font-size:clamp(24px,8.2vw,100px); overflow-wrap:anywhere;
    background:linear-gradient(180deg,#fff 0%,#d9c9ad 60%,#7a6a55 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sub{margin-top:16px;max-width:58ch;color:var(--dim);font-size:clamp(13px,1.5vw,16px);line-height:1.5;}
  .sub b{color:var(--ink);font-weight:700;}

  /* ── sections ── */
  section + section{margin-top:clamp(40px,5vw,60px);}
  h2{font:12px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--dim);
    padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  h2 .count{color:var(--faint);letter-spacing:.2em;}
  .aside{margin:-6px 0 16px;color:var(--faint);font-size:13px;line-height:1.5;max-width:60ch;}

  /* ── cards ── */
  .grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
  .card{
    --accent:var(--dim);
    display:flex;flex-direction:column;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,var(--card),#0e0c0b);
    border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
    color:var(--ink);font:inherit;padding:14px 16px 12px;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .card:hover,.card:focus-visible{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
    box-shadow:0 16px 36px -22px #000,0 0 30px -20px var(--accent);outline:none;
  }
  .card:focus-visible{box-shadow:0 0 0 2px var(--accent);}
  .no{font:10px var(--mono);letter-spacing:.2em;color:var(--accent);}
  .name{margin-top:6px;font-size:19px;font-weight:800;letter-spacing:.03em;line-height:1.15;}
  .tag{margin-top:6px;color:var(--dim);font-size:13px;line-height:1.45;flex:1;}
  .launch{margin-top:12px;font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
  .card:hover .launch{color:#fff;}
  .card[disabled]{cursor:default;opacity:.5;}
  .card[disabled]:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .card[disabled] .launch{color:var(--faint);}

  footer.foot{margin-top:44px;padding-top:18px;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 ── */
  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:44px;padding:0 14px;background:#0d0b0a;border-bottom:1px solid var(--line);flex:none;}
  .vtitle{display:flex;align-items:baseline;gap:10px;min-width:0;}
  #vno{font:10px var(--mono);letter-spacing:.2em;color:var(--faint);white-space:nowrap;}
  #vname{font-weight:800;letter-spacing:.05em;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .vactions{display:flex;gap:8px;flex:none;}
  .vbtn{font:10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
    background:none;border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;text-decoration:none;}
  .vbtn:hover,.vbtn:focus-visible{color:var(--ink);border-color:var(--faint);outline:none;}
  .vbtn kbd{font:inherit;color:var(--faint);margin-left:4px;}
  .vframe{flex:1;width:100%;border:0;background:#000;}
  @media (max-width:520px){ #vopen{display:none;} .vbtn kbd{display:none;} }
  @media (prefers-reduced-motion:reduce){ .card{transition:none;} .card:hover,.card:focus-visible{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; }