:root {
  --bg: #000; --panel: rgba(8, 11, 15, .62); --line: rgba(255, 255, 255, .08); --line-hi: rgba(120, 220, 255, .35);
  --text: #e8eef4; --body: #c3ccd5; --dim: #7d8a97; --faint: #7b8794; --accent: #4fd8ff; --accent-glow: rgba(79, 216, 255, .45); --warn: #ffb547;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif; --sans: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 70% at 70% -10%, #0f1620 0%, #000 60%) fixed, #000; color: var(--body); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #9be9ff; }

/* Logo: same mark, size and spot as /hq and /shop. */
.top { display: flex; align-items: center; gap: 14px; padding: 18px 22px 12px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 41px; color: var(--text); text-decoration: none; }
.mark { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.2; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.mark circle:nth-child(2) { stroke-opacity: .45; }
.mark .sweep { stroke-width: 1.6; transform-origin: 16px 16px; animation: spin 4s linear infinite; }
.mark .dot { fill: var(--accent); stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.wordmark { font-family: var(--cond); font-size: 21px; letter-spacing: .32em; line-height: 1; display: flex; gap: .45em; white-space: nowrap; }
.wordmark b { font-weight: 700; }
.wordmark span { color: var(--accent); font-weight: 500; text-shadow: 0 0 14px var(--accent-glow); }

.tabs { display: flex; gap: 6px; margin-left: auto; }
.tabs a { font: 600 13px var(--cond); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--dim); padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; }
.tabs a:hover, .tabs a[aria-current] { color: var(--text); border-color: var(--line); background: var(--panel); }

main { max-width: 760px; margin: 0 auto; padding: 28px 22px 64px; }
h1 { font: 700 44px/1.05 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--text); margin: 0 0 6px; }
h2 { font: 700 21px/1.25 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 38px 0 10px; scroll-margin-top: 20px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 1.2em; }
li { margin: 0 0 8px; }
li::marker { color: var(--accent); }
strong { color: var(--text); font-weight: 600; }
.updated { font: 12px var(--mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin-bottom: 26px; }
.short { border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 10px; background: var(--panel); padding: 4px 20px 6px; margin: 0 0 8px; }
.short h2 { margin-top: 16px; font-size: 17px; letter-spacing: .16em; color: var(--accent); }
.short.warn { border-left-color: var(--warn); }
.short.warn h2 { color: var(--warn); }
.caps { text-transform: uppercase; font-size: 14.5px; letter-spacing: .02em; line-height: 1.6; }
.addr { font: 14px/1.7 var(--mono); color: var(--text); }
.cards { display: grid; gap: 14px; margin-top: 24px; }
.cards a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-decoration: none; color: var(--body); }
.cards a:hover { border-color: var(--line-hi); box-shadow: 0 0 24px rgba(79, 216, 255, .12); }
.cards b { display: block; font: 700 24px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
footer { max-width: 760px; margin: 0 auto; padding: 18px 22px 40px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--faint); letter-spacing: .06em; }
footer a { color: var(--dim); }

@media (max-width: 760px) {
  .top { padding: 10px 10px 8px; flex-wrap: wrap; row-gap: 6px; }
  .brand { min-height: 30px; }
  .wordmark { font-size: 16px; }
  main { padding: 18px 16px 48px; }
  h1 { font-size: 34px; }
}
@media (max-width: 420px) { .tabs { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mark .sweep { animation: none; } }
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .top .tabs, .mark { display: none; }
  h1, h2, strong, .wordmark, .addr { color: #000; }
  .short { background: none; border: 1px solid #999; }
  a { color: #000; }
}

/* iPhone Safari: a pinned page background can paint black boxes; scroll it normally on phones and touch screens. */
@media (hover: none), (max-width: 760px) { body { background-attachment: scroll; } }

/* ---- Light theme (html[data-mode="light"] from /assets/mode.js; dark by default) --------------
   Same palette as the shop and /apps: every text color 5.2:1 or better (WCAG AA is 4.5:1). */
html[data-mode="light"] {
  --bg: #eef2f5; --panel: rgba(255, 255, 255, .85); --line: rgba(20, 45, 70, .14); --line-hi: rgba(0, 102, 138, .45);
  --text: #0e1620; --body: #2c3844; --dim: #45515e; --faint: #56626f; --accent: #00668a; --accent-glow: rgba(0, 102, 138, .2); --warn: #8f4c00;
  color-scheme: light;
}
html[data-mode="light"] body { background: radial-gradient(120% 70% at 70% -10%, #ffffff 0%, var(--bg) 60%) fixed, var(--bg); }
html[data-mode="light"] a:hover { color: #004d69; }
html[data-mode="light"] .wordmark span { text-shadow: none; }
html[data-mode="light"] .cards a:hover { box-shadow: 0 6px 20px rgba(20, 40, 60, .12); }

/* Theme switch (footer) */
.theme-toggle { background: none; border: 0; padding: 0; font: inherit; color: var(--dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.theme-toggle b { font-weight: 500; color: var(--text); }