/* Track Twelve web.css. Generated from the family's design tokens; do not edit. */

:root {
  color-scheme: light;
  --page: #fbfbfd; --surface: #ffffff; --sunken: #f5f5f7;
  --ink: #1d1d1f; --ink-2: #4a4a4f; --ink-3: #86868b; --ink-4: #aeaeb2;
  --hairline: rgba(0,0,0,0.08);
  --accent: #dd1932; --accent-soft: #fdeef0; --accent-deep: #ad1327;
  --shadow-page: 0 1px 2px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.08);
  --accent-fill: #dd1932; --on-accent: #ffffff;
  --stage-top: #28344c; --stage-bottom: #161e30;
  --stage-ink: #f2f2f5; --stage-ink-2: #b6b6bd;
  --shadow-stage: 0 18px 50px rgba(0,0,0,0.45);
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-caption: 13px; --leading-caption: 1.4;
  --text-body: 17px; --leading-body: 1.55;
  --text-lead: 21px; --leading-lead: 1.45;
  --text-title-3: 24px; --leading-title-3: 1.25;
  --text-title-2: 32px; --leading-title-2: 1.15;
  --text-title-1: 44px; --leading-title-1: 1.08;
  --text-display: 64px; --leading-display: 1.02;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-control: 10px; --radius-card: 16px; --radius-sheet: 22px; --radius-pill: 999px;
  --measure: 65ch; --page-max: 1120px;
  --record-svg-radius: 0.3125;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --page: #141416; --surface: #1c1c1f; --sunken: #0e0e10;
  --ink: #f2f2f5; --ink-2: #b6b6bd; --ink-3: #8a8a93; --ink-4: #676771;
  --hairline: rgba(255,255,255,0.12);
  --accent: #ea485d; --accent-soft: #341116; --accent-deep: #c3223a;
  --shadow-page: 0 1px 2px rgba(0,0,0,0.40), 0 10px 30px rgba(0,0,0,0.40);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #141416; --surface: #1c1c1f; --sunken: #0e0e10;
  --ink: #f2f2f5; --ink-2: #b6b6bd; --ink-3: #8a8a93; --ink-4: #676771;
  --hairline: rgba(255,255,255,0.12);
  --accent: #ea485d; --accent-soft: #341116; --accent-deep: #c3223a;
  --shadow-page: 0 1px 2px rgba(0,0,0,0.40), 0 10px 30px rgba(0,0,0,0.40);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font-text); font-size: var(--text-body); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-title-1); line-height: var(--leading-title-1); letter-spacing: -0.022em; }
h2 { font-size: var(--text-title-2); line-height: var(--leading-title-2); letter-spacing: -0.018em; }
h3 { font-size: var(--text-title-3); line-height: var(--leading-title-3); letter-spacing: -0.012em; font-weight: 600; }
p { margin: 0; max-width: var(--measure); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
code, kbd { font-family: var(--font-mono); font-size: 0.88em; }
img, svg { max-width: 100%; }

/* The one dark ground: the television's ink blue, the same in both themes because it
   belongs to the mark. Where the record appears, it appears here. */
.tt-stage {
  background: linear-gradient(var(--stage-top), var(--stage-bottom));
  color: var(--stage-ink); position: relative; overflow: hidden;
}
.tt-stage a:not(.tt-button) { color: var(--stage-ink); }

/* record.svg placed by its CENTRE and RADIUS: set --cx, --cy and --r on it (any CSS
   lengths). The disc is centred in a square viewBox at --record-svg-radius of its
   width, so the width follows from the radius. */
.tt-record {
  position: absolute; display: block; max-width: none;
  width: calc(var(--r) / var(--record-svg-radius));
  left: calc(var(--cx) - var(--r) / var(--record-svg-radius) / 2);
  top: calc(var(--cy) - var(--r) / var(--record-svg-radius) / 2);
  pointer-events: none; user-select: none;
}

/* A sheet laid ON the stage — the sign-in card, the TV's now-playing card. */
.tt-sheet {
  background: var(--surface); color: var(--ink); position: relative;
  border-radius: var(--radius-sheet); box-shadow: var(--shadow-stage);
  padding: var(--space-6) var(--space-6);
}
/* :not(.tt-button): a bare `.tt-sheet a` outranks `.tt-button` and turned a button's
   white label red, on red — invisible, and found only by looking at the specimen. */
.tt-sheet a:not(.tt-button) { color: var(--accent); }

/* A card on the page. */
.tt-card {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-page), 0 0 0 1px var(--hairline);
  padding: var(--space-5);
}

.tt-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-control);
  background: var(--accent-fill); color: var(--on-accent);
  font: 600 var(--text-body)/1 var(--font-text); text-decoration: none; cursor: pointer;
}
.tt-button:hover { background: var(--accent-deep); color: var(--on-accent); }
/* A wash of the ink rather than --sunken, which in dark is DARKER than the page and
   left the button nearly invisible there. */
.tt-button.quiet { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.tt-button.quiet:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }

.tt-eyebrow {
  font: 600 var(--text-caption)/var(--leading-caption) var(--font-text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.tt-stage .tt-eyebrow { color: var(--stage-ink-2); }

.tt-wrap {
  max-width: var(--page-max); margin-inline: auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}