@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
}

:root {
  color-scheme: dark;
  --bg: #07070b;
  --bg2: #101018;
  --card: #181822;
  --line: rgba(255,255,255,.08);
  --ink: #f6f4ee;
  --muted: #9a9aa8;
  --yellow: #ffd84d;
  --pink: #ff6b9d;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab: calc(56px + var(--safe-b));
  --nav-h: 56px;
  --page-max: 1280px;
  --gutter: 24px;
  --rail-card-w: 160px;
  --poster-ratio: 3 / 4.2;
  --watch-side: 360px;
  --hero-h: 360px;
  --font: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050508; color: var(--ink); font-family: var(--font); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--yellow); color: #111;
  padding: 8px 12px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }