/* Shared surfaces only. Layout and typography belong to their page components. */
:root { --on-dark-2: #bac2c9; --r: 8px; --r-lg: 12px; }
.brushed-dark { background-image: radial-gradient(ellipse at 85% 15%, #2c343b 0, transparent 65%), linear-gradient(135deg, #171c20, #101417); background-size: auto; }
.hdr { background: #171c20; border-bottom: 1px solid #343c42; backdrop-filter: none; }
.hdr__nav a { color: #c8ced3; }
.btn { border-radius: 5px; }
.btn--accent { background: var(--accent); box-shadow: none; }
.hero__stage { border-radius: 8px; box-shadow: none; border-color: #424c54; }
.hero__routes a { border-radius: 6px; }
.arts .xt { border-radius: 6px; box-shadow: none; }
@media (max-width: 380px) {
  .hdr__in.wrap { gap: 8px; padding-inline: 12px; }
  .hdr .logo__img { height: 34px; width: auto; }
  .hdr__act { gap: 0; }
  .hdr__act > button, .hdr__act > a { width: 40px; min-width: 40px; }
}