@font-face {
  font-family: "Monosten";
  src: url("fonts/Monosten/Monosten-A.woff2") format("woff2"), url("fonts/Monosten/Monosten-A.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LatoLatin";
  src: url("fonts/LatoLatin/LatoLatin-Regular.woff2") format("woff2"), url("fonts/LatoLatin/LatoLatin-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LatoLatin";
  src: url("fonts/LatoLatin/LatoLatin-Bold.woff2") format("woff2"), url("fonts/LatoLatin/LatoLatin-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  --canvas:#191321; --raised:#1e0b38; --text:#fff; --body:#d3d3d3;
  --muted:#a0a0a0; --purple:#973bfc; --cyan:#38d5e4;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.22);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--body); font:16px/1.6 LatoLatin, Lato, Arial, sans-serif; }
header { min-height:84px; display:flex; align-items:center; border-bottom:1px solid var(--line); background:rgba(18,11,29,.82); }
main, .bar { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
main { padding:40px 0 64px; }
.bar { display:flex; align-items:center; gap:14px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:30px; width:auto; display:block; }

/* Zone pill: the "you are here" badge next to the brand — a cyan LED dot + label naming this zone (Downloads). Twin of
   the Store app's purple pill; same shape, different hue, so the two sites read as one system with a zone toggle.
   An indicator, not a control. rgba() literals are --cyan (#38d5e4 = 56,213,228) at low alpha. */
.zone-pill { display:inline-flex; align-items:center; gap:7px; font-family:Monosten, Consolas, monospace; font-size:12.8px; font-weight:400; text-transform:uppercase; letter-spacing:.1em; line-height:1; padding:5px 11px 5px 9px; border-radius:999px; white-space:nowrap; user-select:none; }
.zone-pill-dot { flex:none; width:6px; height:6px; border-radius:50%; }
.zone-pill--downloads { color:var(--cyan); background:rgba(56,213,228,.12); border:1px solid rgba(56,213,228,.40); }
.zone-pill--downloads .zone-pill-dot { background:var(--cyan); box-shadow:0 0 0 3px rgba(56,213,228,.20); }
h1 span, h2 span { color:var(--purple); }
h1, h2 { font-family:Monosten, Consolas, monospace; font-weight:400; line-height:1.15; color:var(--text); letter-spacing:0; }
h1 { font-size:clamp(28px, 5vw, 38px); margin:0 0 12px; }
h2 { font-size:22px; margin:40px 0 14px; }
p { max-width:820px; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }

.notfound { margin:0 0 24px; padding:14px 18px; background:var(--raised); border:1px solid var(--line-strong); border-left:3px solid #e8a33d; border-radius:6px; color:var(--body); }
.notfound strong { color:var(--text); }
.notfound code { color:var(--cyan); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:4px; word-break:break-all; }

.breadcrumb { color:var(--muted); font-size:14px; margin:0 0 22px; }
.breadcrumb .sep { color:var(--muted); margin:0 8px; }
.breadcrumb span:last-child { color:var(--body); }
.intro { color:var(--body); margin:0 0 8px; }

table.downloads { width:100%; border-collapse:collapse; margin-top:28px; font-size:15px; }
table.downloads th { text-align:left; font-family:Monosten, Consolas, monospace; font-weight:400; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); padding:0 16px 12px; border-bottom:2px solid var(--line-strong); }
table.downloads td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.downloads tbody tr:hover { background:rgba(151,59,252,.06); }
.col-size, .col-date { white-space:nowrap; color:var(--muted); width:1%; }
.col-action { white-space:nowrap; width:1%; text-align:right; }
th.col-size, th.col-date, th.col-action { }
td.col-name a { font-weight:700; color:var(--text); }
td.col-name a:hover { color:var(--purple); }
.desc { color:var(--muted); font-size:13.5px; margin-top:4px; max-width:640px; }
.empty { color:var(--muted); font-style:italic; }
.col-action a { color:var(--cyan); font-weight:700; }

.instructions div { max-width:820px; }
.timestamp { margin-top:36px; color:var(--muted); font-size:12px; opacity:.7; }

@media (max-width: 640px) {
  main { padding:24px 0 48px; }
  table.downloads { font-size:14px; }
  table.downloads th, table.downloads td { padding-left:10px; padding-right:10px; }
  .col-date { display:none; }
}