:root {
  --ink: #0d0e10;
  --ink-raised: #16181b;
  --ink-line: #2a2e34;
  --ink-line-2: #1e2126;
  --selected: #333940;
  --text: #e6e8ea;
  --text-muted: #9aa0a8;
  --text-dim: #878f99;
  --text-faint: #7d8590;
  --ink-mid: #646b74;
  --ink-ghost: #454b53;
  --keep: #5f9e8f;
  --reject: #c0574a;
  --star: #d9a441;
  --selection: #5b8fc9;
  --edge-print: #f09a3e;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 34px;
  --space-6: 56px;
  --space-7: 88px;
  --space-8: 140px;
  --accent: rgb(240, 154, 62);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: inherit; }
.bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--ink-line-2); }
.bar .mark { font-weight: 600; text-decoration: none; }
.bar .mark span { color: var(--text-dim); font-weight: 400; }
.bar nav { display: flex; gap: var(--space-3); margin-left: auto; align-items: center; }
.langs { display: flex; border: 1px solid var(--ink-line); border-radius: 99px; overflow: hidden; }
.langs a { padding: 3px 12px; font: 500 12px/1.6 var(--sans); color: var(--text-muted); text-decoration: none; }
.langs a[aria-current] { background: var(--selected); color: var(--text); }
.store { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.store:hover { color: var(--text); }
main { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); }
h1 { font: 600 clamp(36px, 5.5vw, 60px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 var(--space-3); }
.lede { color: var(--text-muted); max-width: 62ch; margin: 0; }
article { margin-top: var(--space-6); scroll-margin-top: 72px; }
article > h2 { font: 600 30px/1.1 var(--display); letter-spacing: -.015em; margin: 0;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-line); }
article > h2 a { text-decoration: none; }
section.platform { margin-top: var(--space-5); padding: var(--space-4); background: var(--ink-raised);
  border: 1px solid var(--ink-line-2); border-radius: 14px; }
section.platform > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
section.platform h3 { font: 600 21px/1.2 var(--display); margin: 0; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 11px;
  border-radius: 99px; border: 1px solid var(--ink-line); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--keep); } .status.review { color: var(--selection); }
.status.older { color: var(--text-dim); }
.listing { margin: var(--space-3) 0 0; color: var(--text-muted); }
.listing b { color: var(--text); font-weight: 600; }
h4 { margin: var(--space-4) 0 var(--space-2); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted); }
.whatsnew { white-space: pre-wrap; max-width: 72ch; margin: 0; }
.whatsnew.first { color: var(--text-muted); }
details { margin-top: var(--space-4); }
summary { cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--text-muted); }
summary span { color: var(--text-faint); margin-left: 6px; }
.slot h5 { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: var(--space-4) 0 var(--space-2); }
.gallery { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2);
  scroll-snap-type: x proximity; scrollbar-color: var(--ink-line) transparent; }
.gallery a { flex: none; scroll-snap-align: start; display: block; }
.gallery img { height: 260px; width: auto; display: block; border-radius: 8px;
  border: 1px solid var(--ink-line-2); background: var(--ink); }
footer { color: var(--text-faint); font-size: 13px; text-align: center; padding: var(--space-6) var(--space-5); }
footer a { color: var(--text-muted); }
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--space-3); margin: 0; background: color-mix(in srgb, #050607 95%, transparent); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 6px; }
.lightbox figcaption { font-size: 13px; color: var(--text-muted); }
.lightbox button { position: absolute; appearance: none; border: 0; background: transparent;
  color: var(--text-muted); font-size: 40px; cursor: pointer; padding: 20px; }
.lightbox .prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .close { right: 8px; top: 8px; font-size: 32px; }
@media (max-width: 640px) { main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .bar { padding: var(--space-3) var(--space-4); } .gallery img { height: 200px; } }