@font-face {
  font-family: "TrekPixelCN";
  src: url("slides/fonts/changban-diansong-16-sc.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TrekPixelMono";
  src: url("slides/fonts/milky-mono-cn-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --trek-ink: #07070a;
  --trek-ink-2: #101018;
  --trek-panel: #181824;
  --trek-panel-2: #232335;
  --trek-paper: #f4f0dc;
  --trek-muted: #a59f8c;
  --trek-line: #4a4455;
  --trek-red: #d43a4e;
  --trek-gold: #f3bf59;
  --trek-mint: #72d69f;
  --trek-blue: #68b7ff;
  --trek-shadow: #000;
  --trek-font-cn: "TrekPixelCN", "PixelCN", "SimHei", "Microsoft YaHei", monospace;
  --trek-font-mono: "TrekPixelMono", "PixelMono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--trek-font-cn) !important;
  font-weight: 400 !important;
  color: var(--trek-paper);
  background-color: var(--trek-ink);
  background-image:
    linear-gradient(rgba(244, 240, 220, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 220, .045) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(212, 58, 78, .18), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(114, 214, 159, .10), transparent 26%);
  background-size: 16px 16px, 16px 16px, 100% 100%, 100% 100%;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  letter-spacing: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .035) 0,
    rgba(255, 255, 255, .035) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: .38;
  mix-blend-mode: soft-light;
}

body :is(h1, h2, h3, h4, h5, h6, strong, b, button, .btn, .btn-sm, .pixel-btn, .badge, .tag, .label, .value, .stat, .stat-pill, .rank-num, .group-id, .team-name, .total-score, .score, .metric, .meter-value, .chip, .track-name, .prize-title, .stage-mode, .timer-display) {
  font-weight: 400 !important;
}

body :is(code, pre, kbd, samp, table, th, td, input, textarea, select, .mono, .badge, .tag, .label, .formula, .score, .timer-display, .rank-num, .total-score, .group-id, .token-display, .audit-log) {
  font-family: var(--trek-font-mono) !important;
}

body :is(h1, h2, h3) {
  letter-spacing: .04em !important;
  text-shadow: 3px 3px 0 var(--trek-shadow) !important;
}

body :is(.topbar, header, .header) {
  border-bottom: 4px solid var(--trek-red) !important;
  background: rgba(7, 7, 10, .92) !important;
  box-shadow: 0 6px 0 var(--trek-shadow) !important;
  backdrop-filter: blur(2px);
}

body :is(.panel, .card, .stat-pill, .metric, .basket, .group-card, .score-card, .submission-card, .tool-card, .feature-card, .rank-row, .track-card, .prize-card, .timeline-item, .row, .modal-content) {
  border-radius: 0 !important;
  border-color: var(--trek-line) !important;
  box-shadow: 6px 6px 0 var(--trek-shadow) !important;
}

body :is(.panel, .card, .stat-pill, .metric, .basket, .group-card, .score-card, .submission-card, .tool-card, .feature-card, .track-card, .prize-card, .timeline-item, .modal-content) {
  background-color: rgba(24, 24, 36, .96) !important;
}

body :is(button, .btn, .btn-sm, .pixel-btn, .link-card, a.button) {
  border-radius: 0 !important;
  font-family: var(--trek-font-cn) !important;
  letter-spacing: .04em !important;
  text-shadow: 1px 1px 0 var(--trek-shadow) !important;
  box-shadow: 4px 4px 0 var(--trek-shadow) !important;
  transition: transform .08s, box-shadow .08s, filter .08s !important;
}

body :is(button, .btn, .btn-sm, .pixel-btn, .link-card, a.button):hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--trek-shadow) !important;
  filter: saturate(1.08);
}

body :is(button, .btn, .btn-sm, .pixel-btn, .link-card, a.button):active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--trek-shadow) !important;
}

body :is(input, textarea, select) {
  border-radius: 0 !important;
  border: 3px solid var(--trek-line) !important;
  background: #0b0b10 !important;
  color: var(--trek-paper) !important;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .05), inset -3px -3px 0 rgba(0, 0, 0, .28) !important;
}

body :is(table) {
  border-collapse: collapse;
}

body :is(th) {
  background: var(--trek-red) !important;
  color: white !important;
}

body :is(img, canvas, video) {
  image-rendering: auto;
}

body :is(.logo, .brand-logo, img[src*="logo"], img[src*="Logo"]) {
  max-width: min(220px, 48vw);
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55));
}

body :is(.gold, .accent, .value, .rank-num, .total-score) {
  color: var(--trek-gold) !important;
}

body :is(.danger, .alert.error) {
  color: #ff6b72 !important;
}

body :is(.ok, .success, .alert.ok) {
  color: var(--trek-mint) !important;
}

@media (max-width: 720px) {
  body {
    background-size: 12px 12px, 12px 12px, 100% 100%, 100% 100%;
  }

  body :is(h1, h2, h3) {
    text-shadow: 2px 2px 0 var(--trek-shadow) !important;
  }

  body :is(.panel, .card, .stat-pill, .metric, .basket, .group-card, .score-card, .submission-card, .tool-card, .feature-card, .rank-row) {
    box-shadow: 4px 4px 0 var(--trek-shadow) !important;
  }
}