/* ============================== Hero UI Kit · web (start) ==============================
   The shared design language of all Heroes (Stream Hero, Rig Hero, Track Hero), agreed 29.10.2026.
   Rules: HeroUI/docs/hero-ui.md and StreamHero/docs/designsprache.md; reference sketch "Hero Systemsprache".
   White = chosen, green = live only. Leuchttaste (.taste) for the few big choices, Leuchtschrift (.schrift) for long
   lists; .on = chosen/live, :active or .down = pressed (70 ms in, 210 ms out). A .taste needs its light inside:
   <span class="lit"><i></i><b></b><b></b><i></i></span> (the page adds it at start). A chosen row of a list (one chosen
   at a time) carries the same light over itself: .lit-row with that span inside, the row keeps its own words.
   Plain buttons: .btn grey, .btn.primary white filled (one per page or dialog), .btn.quiet only words.
   Section heads: .hero-head (small caps, calm green, no glow). Numbers: .hero-num (condensed face, tabular figures).
   Everything below this block only reads these tokens. */
:root {
  --ground: #090B0E; --panel: #12161C; --raised: #1A2028; --raised-hover: #222A34; --deep: #0D1014;
  --line: #252C36; --line-soft: rgba(255, 255, 255, .05); --hairline: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --text: #E9EDF1; --muted: #9AA3AD; --off: #727B86; --hover: #C9CFD6;
  --head: #00FF18; --focus: #4CD37B;
  --led-white: 255, 255, 255; --led-live: 0, 255, 24; --live-words: #5CFF6B;
  --heading: "Bahnschrift SemiCondensed", "Bahnschrift", "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-panel: 16px; --r-inner: 10px; --r-tile: 8px; --r-btn: 6px;
  --press: 70ms; --release: 210ms;
  color-scheme: dark;
}
.hero-head { font: 600 12px var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--head); }
.hero-num { font-family: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the two lights, white (chosen) or green (.live) */
.taste, .schrift {
  --led: var(--led-white);
  position: relative; display: inline-block; font: 600 14px var(--heading); letter-spacing: .02em; color: var(--off);
  background: transparent; border: 0; border-radius: var(--r-btn); padding: 9px 16px; cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent; user-select: none;
  /* no colour transition: Safari would fade every link in from its purple visited colour on each page load */
  transition: text-shadow var(--release) ease-out, background-color var(--release) ease-out;
}
.taste.live, .schrift.live { --led: var(--led-live); }
.lit-row { --led: var(--led-white); position: relative; transition: background-color var(--release) ease-out; }
.lit-row.live { --led: var(--led-live); }
.lit-row.on { background: rgba(var(--led), .06); }
.lit-row:is(:active, .down) { background: rgba(var(--led), .10); transition-duration: var(--press); }
:is(.taste, .schrift):is(:active, .down) { transition-duration: var(--press); }
@media (hover: hover) {
  .taste:not(.on):hover { color: var(--hover); text-shadow: 0 0 5px rgba(var(--led-white), .16); }
  .schrift:not(.on):hover { color: var(--muted); }
}
/* Leuchttaste: fine frame, LEDs left and right, glow */
.taste.on { color: var(--text); background: rgba(var(--led), .06); text-shadow: 0 0 5px rgba(var(--led), .22); }
.taste.live.on { color: var(--live-words); }
.taste:is(:active, .down) {
  color: #fff; background: rgba(var(--led), .10);
  text-shadow: 0 0 2px rgba(var(--led), .65), 0 0 6px rgba(var(--led), .45), 0 0 12px rgba(var(--led), .25);
}
.taste.live:is(:active, .down) { color: #CFFFD4; }
.lit {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 1px solid rgba(var(--led), .55);
  box-shadow: 0 0 6px rgba(var(--led), .14), inset 0 0 0 0 rgba(var(--led), .9), inset 0 0 0 0 rgba(var(--led), 0);
}
.taste:is(.on, :active, .down) > .lit, .lit-row.on > .lit { opacity: 1; }
:is(.taste, .lit-row.on):is(:active, .down) > .lit {
  border-color: rgba(var(--led), .9);
  box-shadow: 0 0 9px rgba(var(--led), .3), inset 0 0 0 1px rgba(var(--led), .9), inset 0 0 10px rgba(var(--led), .2);
}
.lit i {
  position: absolute; top: 50%; width: 3px; height: 84%; transform: translateY(-50%); opacity: .22;
  background: linear-gradient(rgba(var(--led), 0), rgba(var(--led), 1) 50%, rgba(var(--led), 0));
}
.lit i:first-child { left: -2px; }
.lit i:last-child { right: -2px; }
.lit i::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: max(12px, 56%);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--led), .42), rgba(var(--led), 0));
}
:is(.taste, .lit-row.on):is(:active, .down) > .lit i { opacity: 1; }
.lit b {
  position: absolute; left: 8px; right: 8px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--led), 1), rgba(var(--led), 0) 50%, rgba(var(--led), 1));
}
.lit b:first-of-type { top: -1px; }
.lit b:last-of-type { bottom: -1px; }
:is(.taste, .lit-row.on):is(:active, .down) > .lit b { opacity: .7; }
.lit, .lit i, .lit b {
  transition-property: opacity, border-color, box-shadow;
  transition-duration: var(--release); transition-timing-function: ease-out;
}
:is(:active, .down) > .lit, :is(:active, .down) > .lit i, :is(:active, .down) > .lit b { transition-duration: var(--press); }
/* Leuchtschrift: no frame, no LEDs, only the words light */
.schrift.on { color: var(--text); text-shadow: 0 0 6px rgba(var(--led), .4); }
.schrift.live.on { color: var(--live-words); text-shadow: 0 0 6px rgba(var(--led), .45); }
.schrift.on:is(:active, .down) { color: #fff; text-shadow: 0 0 2px rgba(var(--led), .75), 0 0 7px rgba(var(--led), .55), 0 0 14px rgba(var(--led), .3); }
.schrift.live.on:is(:active, .down) { color: #CFFFD4; }

/* buttons without light: grey, the one main action white filled, quiet words */
.btn {
  font: 600 13px var(--heading); letter-spacing: .02em; color: var(--text); background: var(--raised);
  border: 0; border-radius: var(--r-btn); padding: 6px 14px; cursor: pointer; transition: background-color var(--release) ease-out;
}
.btn.primary { background: var(--text); color: var(--ground); padding-inline: 22px; }
.btn.quiet { background: transparent; color: var(--muted); padding-inline: 4px; }
@media (hover: hover) {
  .btn:not(.primary):not(.quiet):hover { background: var(--raised-hover); }
  .btn.primary:hover { background: #fff; }
  .btn.quiet:hover { color: var(--hover); }
}
:is(.taste, .schrift, .btn, button, a, input, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .taste, .schrift, .btn, .lit, .lit i, .lit b { transition-duration: 1ms !important; }
}
/* ============================== Hero UI Kit · web (end) ============================== */

/* ============================== Hero web pages (start) ==============================
   The websites on top of the kit (simracingheroes.com, trackheroapp.com): the same file on both sites.
   Fonts are self-hosted on purpose (no Google Fonts). Headings Bahnschrift SemiCondensed (Windows), Barlow Condensed elsewhere.
   One white filled main action per section (.btn.primary), the rest grey (.btn) or quiet (.btn.quiet);
   .btn.big is the web size of the same buttons. Green stays for the brand marks and live; status dots use the status colours. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url(fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); }
:root { --brand: #00FF18; --wordmark: "Chakra Petch", var(--heading); --ok: #4CD37B; --warn: #F2C230; --page: 1200px; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 17px/1.6 var(--body); }
img, video { max-width: 100%; }
a { color: var(--text); text-decoration-color: rgba(233, 237, 241, .4); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: #fff; text-decoration-color: currentColor; } }
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap { padding-inline: 16px; } }

/* type */
.title { margin: 0; font: 700 clamp(40px, 6.4vw, 80px)/1 var(--heading); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; color: var(--text); }
.title em { font-style: normal; }
.title-2 { margin: 0; font: 700 clamp(30px, 4vw, 46px)/1.04 var(--heading); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.title-3 { margin: 0; font: 700 24px/1.1 var(--heading); text-transform: uppercase; letter-spacing: .02em; }
.hero-head.web { font-size: 13px; margin: 0; }
.lead { margin: 0; font-size: 19px; line-height: 1.55; color: #C5CCD4; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }

/* surfaces: panel 16, inner 10, tile 8, all straight with a fine hairline */
.panel { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--hairline); }
.inner { background: var(--deep); border-radius: var(--r-inner); }
.media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-panel); background: var(--deep); box-shadow: var(--hairline); }

/* buttons as links, the web size */
a.btn, a.taste { text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.big { font-size: 16px; padding: 12px 22px; min-height: 46px; }
.btn.big.primary { padding-inline: 26px; }
a.btn.primary, a.btn.primary:hover { color: var(--ground); }
a.btn:not(.primary):hover { color: var(--text); }
a.btn.quiet:hover { color: var(--hover); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* status: a small round dot before the word */
.status { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.status.ok::before { background: var(--ok); }
.status.warn::before { background: var(--warn); }
.status.new::before { background: var(--text); }

/* the brand marks keep their green */
.wordmark { display: inline-flex; flex-direction: column; font: 600 24px/.9 var(--wordmark); letter-spacing: .5px; white-space: nowrap; color: var(--text); text-decoration: none; }
.wordmark .g { color: var(--brand); }
.wordmark svg { width: .785em; height: .72em; vertical-align: baseline; margin: 0 .03em; }
.product-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 600 22px var(--wordmark); letter-spacing: .5px; white-space: nowrap; }
.product-mark b { color: var(--brand); font-weight: 600; }
.product-mark svg { width: 32px; height: 32px; flex: none; }

/* header and footer */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 20px; }
.site-head nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.site-foot { border-top: 1px solid var(--line); margin-top: 24px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center; padding-block: 32px 48px; font-size: 14px; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-foot nav a { color: var(--muted); text-decoration: none; padding: 10px 8px; }
@media (hover: hover) { .site-foot nav a:hover { color: var(--text); } }

/* the family bar on product pages: the Heroes as Leuchttasten, the page's own one chosen */
.family { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.family .wordmark { font-size: 15px; }
.family nav { display: flex; flex-wrap: wrap; gap: 4px; }
.family .taste { font-size: 13px; padding: 7px 12px; }
@media (max-width: 600px) { .family { flex-wrap: nowrap; gap: 10px; } .family .wordmark { font-size: 13px; } .family .taste { font-size: 12px; padding: 6px 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
/* ============================== Hero web pages (end) ============================== */