@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/barlow-condensed-latin-800-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #091119;
  --panel: #101923;
  --panel-hover: #162734;
  --paper: #eaf2f5;
  --muted: #b1c3ce;
  --dim: #8fa5b3;
  --line: #2a3b49;
  --strong-line: #4b6574;
  --signal: #64f2d3;
  --warm: #ff9b7a;
  --edge: clamp(14px, 4.6vw, 66px);
  --measure: min(1400px, calc(100% - 2 * var(--edge)));
  --system-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font: 100%/1.68 var(--system-ja);
  background: var(--ink);
  color: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
a { color: var(--signal); text-underline-offset: .24em; }
a:hover { color: #aeffeb; }
:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}
button, input, select { font: inherit; }
img { display: block; max-inline-size: 100%; user-select: none; -webkit-user-drag: none; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { line-height: 1.28; }
h2 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.09rem, 1.55vw, 1.35rem); }
::selection { color: var(--ink); background: var(--signal); }
.wrap { width: var(--measure); margin-inline: auto; }

.catalog-icon { width: 1.17em; height: 1.17em; flex: none; vertical-align: -.17em; }
.skip {
  position: fixed;
  inset: 0 auto auto var(--edge);
  z-index: 10;
  transform: translateY(-150%);
  padding: .46rem .8rem;
  color: var(--ink);
  background: var(--signal);
  font-weight: 800;
}
.skip:focus { transform: translateY(7px); }

.catalog-header {
  border-block-end: 1px solid var(--line);
  background: #0c151e;
}
.site-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px 32px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.045em;
  font-size: 1.17rem;
  font-weight: 850;
  line-height: 1;
}
.brand img { width: 42px; height: 42px; }
.brand small {
  display: block;
  margin-block-start: .25em;
  font-size: .52em;
  font-weight: 750;
  letter-spacing: .25em;
  color: var(--dim);
}
.wordmark-z { color: var(--signal); }
.tabs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.tabs a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .43rem;
  min-height: 44px;
  padding: .46rem clamp(.55rem, .9vw, .86rem);
  border: 1px solid transparent;
  border-radius: 9px;
  white-space: nowrap;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  line-height: 1.3;
}
.tabs a:hover { color: var(--paper); background: #14222d; }
.tabs a[aria-current] { color: var(--signal); background: #132b31; border-color: #2d5356; }
.tabs a .catalog-icon { font-size: 1.05rem; }
.tab-short { display: none; }

#content { padding-block-end: clamp(36px, 7vw, 94px); outline: 0; }
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .58rem;
  margin: 0;
  padding: .78rem 0;
  list-style: none;
  color: var(--dim);
  font-size: .75rem;
  font-weight: 650;
}
.crumb a { color: var(--muted); }
.crumb [aria-current] { color: var(--paper); }
.catalog-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .47fr) minmax(0, .53fr);
  isolation: isolate;
  align-items: stretch;
  min-height: clamp(310px, 32vw, 442px);
  background: #101e2a;
  border: 1px solid var(--line);
  border-radius: 19px 19px 0 0;
  overflow: hidden;
}
.catalog-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #101e2a 40%, #101e2af0 47%, #101e2a23 64%, transparent 80%);
}
.catalog-hero-copy {
  grid-area: 1 / 1 / 2 / -1;
  align-self: center;
  width: min(60%, 645px);
  padding: clamp(25px, 4.7vw, 67px);
}
.catalog-hero-image {
  grid-area: 1 / 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 62% center;
  z-index: -2;
  color: transparent;
}
.cinema-guide .catalog-hero-image { object-position: 57% center; }
.catalog-emblem {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  margin-block-end: clamp(.65rem, 1.08vw, 1.25rem);
  border: 1px solid #3f686f;
  border-radius: 10px;
  background: #132831;
  color: var(--signal);
  font-size: 1.34rem;
}
.catalog-hero-title {
  color: var(--paper);
  font-size: clamp(2.5rem, 5.55vw, 5.35rem);
  font-weight: 850;
  line-height: 1.07;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.lede {
  max-width: 27rem;
  margin-block: .8rem 1.34rem;
  color: #c5d5dc;
  font-size: clamp(.89rem, 1.55vw, 1.04rem);
  line-height: 1.68;
  text-wrap: pretty;
}
.catalog-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.primary, .catalog-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .48rem;
  min-height: 45px;
  padding: .49rem .86rem;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 850;
  line-height: 1.35;
}
.primary { color: var(--ink); background: var(--signal); }
.primary:hover { color: var(--ink); background: #a5ffee; }
.catalog-secondary { color: var(--paper); background: #13222dde; border-color: #4b6474; }
.catalog-secondary:hover { color: var(--paper); background: #203847; }

.catalog-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: .18rem 0;
  border: 1px solid var(--line);
  border-block-start: 0;
  border-radius: 0 0 19px 19px;
  list-style: none;
  background: var(--panel);
}
.cinema-cars .catalog-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-overview li { min-width: 0; }
.catalog-overview li + li { border-inline-start: 1px solid var(--line); }
.catalog-overview a {
  display: grid;
  align-content: center;
  gap: .31rem;
  min-height: clamp(68px, 7.2vw, 100px);
  padding: .62rem clamp(.52rem, 1.8vw, 1.5rem);
  color: var(--muted);
  font-size: .75rem;
  text-decoration: none;
  font-weight: 740;
  line-height: 1.25;
}
.catalog-overview a:hover { color: var(--paper); background: #152631; }
.catalog-overview a:focus-visible { outline-offset: -3px; }
.catalog-overview strong {
  color: var(--signal);
  font: italic 800 clamp(1.56rem, 3.2vw, 2.65rem)/.91 'Barlow Condensed', sans-serif;
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-start { margin: clamp(32px, 5vw, 65px) 0 .85rem; scroll-margin-block-start: 16px; }
.filter {
  display: grid;
  gap: .55rem;
  padding: clamp(.79rem, 2vw, 1.32rem);
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.catalog-filter-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: .62rem .9rem;
}
.catalog-filter-fields label { display: grid; gap: .26rem; min-width: 0; color: var(--muted); font-size: .8rem; font-weight: 750; }
.filter input, .filter select {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: .46rem .63rem;
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  color: var(--paper);
  background: #09151f;
  font-size: 1rem;
}
.filter input::placeholder { color: var(--dim); opacity: 1; }
.catalog-input { position: relative; }
.catalog-input .catalog-icon {
  position: absolute;
  inset: 50% auto auto .69rem;
  transform: translateY(-50%);
  color: var(--signal);
  pointer-events: none;
}
.catalog-input input { padding-inline-start: 2.2rem; }
.catalog-result-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .28rem .78rem;
  min-height: 2rem;
  color: var(--muted);
  font-size: .84rem;
}
.catalog-result-line button {
  min-height: 44px;
  padding: .34rem .67rem;
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  color: var(--paper);
  background: #14222c;
  cursor: pointer;
  font-size: .8rem;
}
.catalog-result-line button:hover { border-color: var(--signal); color: var(--signal); }
.jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: .67rem 0 0;
  padding: 0;
  list-style: none;
}
.jumps li { min-width: 0; }
.jumps a {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 44px;
  padding: .48rem .71rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--paper);
  background: #101d27;
  text-decoration: none;
  line-height: 1.43;
  font-size: .82rem;
  font-weight: 710;
}
.jumps a:hover { background: #19323c; border-color: #40737a; }
.jumps svg { color: var(--signal); }

.catalog-group { margin-block-start: clamp(33px, 4.7vw, 66px); scroll-margin-block-start: 16px; }
.catalog-section-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .33em .57em;
  min-height: 50px;
  margin-block-end: .86rem;
  padding: .38rem 0 .72rem;
  border-block-end: 1px solid var(--line);
  color: var(--paper);
}
.catalog-section-heading .catalog-icon { color: var(--signal); }
.catalog-section-heading small {
  color: var(--dim);
  font: italic 800 .88em/1 'Barlow Condensed', var(--system-ja);
  font-variant-numeric: tabular-nums;
}
.catalog-group > p, .catalog-note { margin-block: .65rem; color: var(--dim); font-size: .84rem; }
.row-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 278px), 1fr));
  gap: clamp(10px, 1.46vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.row-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1rem .56rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 250px;
}
.row-list li:hover, .row-list li:focus-within { border-color: var(--strong-line); background: var(--panel-hover); }
.row-list h3 { margin-block: .27rem .47rem; }
.row-list p {
  margin-block: 0 .49rem;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.63;
}
.row-list .facts { display: flex; flex-wrap: wrap; gap: .28rem; margin-block: 0 .7rem; }
.catalog-fact {
  padding: .18rem .38rem;
  color: #bfd1d9;
  background: #17242e;
  border: 1px solid #2e4551;
  border-radius: 4px;
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.23;
}
.catalog-fact-critical { color: #a8efde; border-color: #34565d; background: #13272e; }
.catalog-fact-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catalog-vehicle-mark {
  display: grid;
  width: 36px;
  height: 33px;
  place-content: center;
  margin-block: 0 .2rem;
  color: var(--signal);
  border: 1px solid #35535f;
  border-radius: 8px;
  background: #102833;
  font-size: 1.12rem;
}
.row-list .catalog-reward { margin-block: .11rem .42rem; color: var(--warm); font-size: .88rem; font-weight: 800; }
.row-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .62rem;
  width: 100%;
  min-height: 44px;
  margin-block-start: auto;
  padding-block: .39rem;
  border-block-start: 1px solid var(--line);
  color: var(--signal);
  font-size: .84rem;
  font-weight: 790;
  text-decoration: none;
  line-height: 1.38;
}
.row-list a:hover { color: #aeffeb; }
.row-list a:focus-visible { outline-offset: 0; }
.cinema-courses .row-list li { contain-intrinsic-size: auto 395px; }
.catalog-track-image {
  width: calc(100% + 2rem);
  max-width: none;
  height: auto;
  aspect-ratio: 420 / 226;
  object-fit: cover;
  margin: -1rem -1rem .73rem;
  border-block-end: 1px solid var(--line);
  background: #152430;
}
.cinema-courses :is(#endurance, #technique) .row-list { grid-template-columns: minmax(0, min(660px, 100%)); }
.cinema-courses :is(#endurance, #technique) .catalog-track-image { max-height: 230px; object-position: center 46%; }

.catalog-guide-layout {
  display: grid;
  grid-template-columns: minmax(165px, .29fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(15px, 3.2vw, 47px);
  margin-block-start: clamp(25px, 4.7vw, 63px);
}
.catalog-guide-index {
  position: sticky;
  inset-block-start: 14px;
  padding: .88rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.catalog-guide-index-title { font-size: 1.07rem; }
.catalog-guide-index .jumps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .31rem; }
.catalog-guide-index .jumps a { width: 100%; }
.catalog-guide-content { display: grid; min-width: 0; gap: clamp(14px, 2.4vw, 27px); }
.guide-section {
  --guide-padding: clamp(.85rem, 2.55vw, 1.42rem);
  padding: 0 var(--guide-padding) 1.23rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  scroll-margin-block-start: 16px;
}
.guide-section p, .guide-section li { color: #c4d3db; font-size: .94rem; }
.guide-section p + p { margin-block-start: .63rem; }
.guide-section > ol { margin-block-start: .61rem; padding-inline-start: 1.48rem; }
.guide-section > ol li { padding-inline-start: .24rem; }
.guide-section > ol li + li { margin-block-start: .5rem; }
.guide-section ol li::marker { color: var(--signal); font-weight: 800; }
.guide-section > .catalog-section-heading {
  min-height: 90px;
  margin-inline: calc(-1 * var(--guide-padding));
  padding-inline: var(--guide-padding);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #12202c 0%, #12202ce8 42%, #12202c55), var(--section-art) center 59%/cover;
}
#first { --section-art: url('./reel-hero.webp'); }
#controls { --section-art: url('./reel-technical.webp'); }
#modes { --section-art: url('./reel-routes.webp'); }
#grand-prix-help { --section-art: url('./enkan-circuit.webp'); }
#garage-help { --section-art: url('./reel-garage.webp'); }
#online-help { --section-art: url('./shiosaki.webp'); }
.chips { display: grid; gap: 7px; margin: .58rem 0 .84rem; padding: 0; list-style: none; }
.chips li { display: block; padding: .58rem .68rem; border-inline-start: 2px solid #43757a; border-radius: 0 6px 6px 0; background: #142430; }
.chips strong { color: #acefde; }
.controls { display: grid; gap: .58rem; }
.controls details { border: 1px solid var(--line); border-radius: 8px; background: #0e1b26; }
.controls details[open] { border-color: #44717a; }
.controls summary {
  display: flex;
  align-items: center;
  gap: .56rem;
  min-height: 46px;
  padding: .46rem .7rem;
  color: var(--paper);
  cursor: pointer;
  font-size: .92rem;
  font-weight: 800;
  list-style: none;
}
.controls summary::-webkit-details-marker { display: none; }
.controls summary .catalog-icon { color: var(--signal); }
.controls summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border: solid var(--signal);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.controls details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.controls dl { margin: 0; padding: .2rem .68rem .58rem; }
.controls dl > div {
  display: grid;
  grid-template-columns: minmax(114px, .77fr) minmax(0, 1.23fr);
  align-items: start;
  gap: .34rem .7rem;
  padding: .46rem 0;
  border-block-start: 1px solid var(--line);
}
.controls dt { font-size: .85rem; font-weight: 800; }
.controls dd { margin: 0; color: var(--muted); font-size: .86rem; }
kbd {
  display: inline-block;
  vertical-align: 1px;
  padding: 0 .33em;
  margin: 1px;
  border: 1px solid #54717f;
  border-block-end-width: 2px;
  border-radius: 4px;
  color: var(--paper);
  background: #1a2d3a;
  font: inherit;
  font-size: .8em;
  line-height: 1.52;
  white-space: nowrap;
}

footer {
  display: grid;
  gap: .4rem;
  padding: clamp(.73rem, 1.75vw, 1.55rem) 0;
  border-block-start: 1px solid var(--line);
  color: var(--dim);
  background: #0d1720;
  font-size: .77rem;
}
.catalog-return a { display: inline-flex; align-items: center; gap: .43rem; min-height: 44px; font-weight: 760; }

@media (max-width: 760px) {
  .site-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 10px 7px; }
  .brand { justify-self: start; }
  .brand img { width: 37px; height: 37px; }
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .tabs a { padding-inline: .15rem; }
  .catalog-hero-copy { width: min(75%, 550px); }
  .catalog-guide-layout { display: block; }
  .catalog-guide-index { position: static; margin-block-end: .91rem; }
  .catalog-guide-index .jumps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); }
}

@media (max-width: 530px) {
  .tabs a { flex-direction: column; gap: .21rem; min-height: 50px; padding-block: .38rem; font-size: .7rem; }
  .tabs a .catalog-icon { font-size: 1rem; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  .catalog-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(155px, 40vw) auto; min-height: 0; border-radius: 13px 13px 0 0; }
  .catalog-hero-image { grid-area: 1 / 1; object-position: 61% 49%; }
  .catalog-hero-copy { position: relative; grid-area: 2 / 1; width: 100%; padding: 1.29rem .91rem 1.15rem; }
  .catalog-hero::after { inset: 0 0 auto; height: max(155px, 40vw); background: linear-gradient(0deg, #101e2a96, transparent 68%); }
  .catalog-emblem { position: absolute; inset: -.87rem auto auto .93rem; width: 34px; height: 34px; margin: 0; font-size: 1.04rem; }
  .catalog-hero-title { font-size: clamp(2.06rem, 10.5vw, 3.3rem); }
  .lede { margin-block: .59rem .91rem; }
  .catalog-hero-actions { gap: 6px; }
  .catalog-hero-actions :is(.primary, .catalog-secondary) { padding-inline: .56rem; font-size: .78rem; }
  .catalog-overview { border-radius: 0 0 13px 13px; }
  .catalog-overview a { font-size: .68rem; }
  .catalog-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-search { grid-column: 1 / -1; }
  .controls dl > div { grid-template-columns: minmax(0, 1fr); }
  .row-list li { contain-intrinsic-size: auto 223px; }
}

@media (max-width: 340px) {
  .tabs a { font-size: .63rem; }
  .catalog-overview a { padding-inline: .36rem; }
}

@media (forced-colors: active) {
  .catalog-hero::after, .catalog-track-image { opacity: .43; }
  .primary, .catalog-secondary, .catalog-section-heading, .row-list li, .guide-section { border: 1px solid CanvasText; }
  .tabs a[aria-current] { border-color: Highlight; }
}

/* Finish and lighting shared across the catalogs and the driver's guide. */
.cinema-catalog {
  --signal: #f4cb82;
  --signal-pale: #ffe3ad;
  --signal-deep: #bd8d54;
  --accent-line: #785b42;
  --accent-surface: #302435;
  --catalog-band: #181c2c;
  --catalog-glow: #7f4e3038;
  --catalog-cool-glow: #3b5e9038;
  --bevel: inset 0 1px #ffffff12;
  --cast: 0 14px 34px #03071155;
  background: radial-gradient(ellipse at 88% 15rem,var(--catalog-glow),transparent 40rem),
              radial-gradient(ellipse at 4% 38rem,var(--catalog-cool-glow),transparent 37rem),
              #0a111b;
}
.cinema-cars {
  --signal: #f5bf8c;
  --signal-pale: #ffe0be;
  --signal-deep: #cf835a;
  --accent-line: #785644;
  --accent-surface: #2d2427;
  --catalog-band: #1d1d2c;
  --catalog-glow: #9a583e3b;
}
.cinema-courses {
  --signal: #9ed9ff;
  --signal-pale: #d1ebff;
  --signal-deep: #5d9ac4;
  --accent-line: #466a87;
  --accent-surface: #162b40;
  --catalog-band: #172437;
  --catalog-glow: #3e779457;
  --catalog-cool-glow: #45508842;
}
.cinema-guide {
  --signal: #a9e6bf;
  --signal-pale: #d9f6e5;
  --signal-deep: #669f8e;
  --accent-line: #4a746b;
  --accent-surface: #1a302e;
  --catalog-band: #172a2e;
  --catalog-glow: #35685b4d;
  --catalog-cool-glow: #5057833b;
}
.cinema-catalog :is(.brand:hover,.crumb a:hover,.row-list a:hover) { color: var(--signal-pale); }
.catalog-header {
  background: linear-gradient(116deg,#131f31 0%,#101825 37%,#111827 67%,var(--catalog-band));
  box-shadow: var(--bevel),0 8px 21px #0005;
}
.brand img { filter: drop-shadow(0 2px 7px #03070dbc); }
.tabs a:hover { color: var(--signal-pale); background: #243247; }
.tabs a[aria-current] {
  background: linear-gradient(150deg,var(--accent-surface),#192231);
  border-color: var(--accent-line);
  box-shadow: var(--bevel),0 3px 10px #02060c66;
}
.catalog-hero {
  border-color: var(--accent-line);
  background: linear-gradient(155deg,var(--catalog-band),#0d1622 59%,#151f33);
  box-shadow: var(--bevel),0 21px 48px #0006;
}
.catalog-hero::after {
  z-index: -1;
  background: linear-gradient(90deg,#101825 26%,var(--catalog-band) 42%,#1420349c 54%,#111d3030 68%,transparent 84%),
              linear-gradient(0deg,#0a101dbb,transparent 27%);
}
.catalog-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,var(--signal-deep),var(--signal-pale) 17%,transparent 52%);
  opacity: .7;
  pointer-events: none;
}
.catalog-hero-title {
  color: #fff5ed;
  text-shadow: 0 9px 29px #0008;
}
.catalog-emblem {
  color: var(--signal);
  border-color: var(--accent-line);
  background: linear-gradient(160deg,var(--accent-surface),#142332 85%);
  box-shadow: var(--bevel),0 6px 15px #040807a0;
}
.primary {
  color: #111521;
  background: linear-gradient(158deg,var(--signal-pale),var(--signal) 57%,var(--signal-deep));
  border-color: var(--signal-pale);
  box-shadow: var(--bevel),0 5px 12px #02060e80;
}
.primary:hover { color: #111521; background: var(--signal-pale); }
.catalog-secondary {
  background: linear-gradient(150deg,#233245e8,#141e2ce8);
  border-color: #526078;
  box-shadow: var(--bevel),0 4px 11px #03061355;
}
.catalog-secondary:hover { color: var(--signal-pale); background: var(--accent-surface); border-color: var(--accent-line); }
.catalog-overview {
  border-color: var(--accent-line);
  background: linear-gradient(110deg,var(--catalog-band),#101a29 54%,#172237);
  box-shadow: var(--bevel),var(--cast);
}
.catalog-overview a:hover { color: var(--signal-pale); background: var(--accent-surface); }
.catalog-overview li + li { border-color: #ffffff17; }
.catalog-overview strong { text-shadow: 0 2px 12px #0009; }
.filter,.catalog-guide-index {
  background: radial-gradient(ellipse at 7% 0%,var(--catalog-band),transparent 70%),#121c2a;
  border-color: #3a4a5e;
  box-shadow: var(--bevel),var(--cast);
}
.filter input,.filter select {
  background: #0b1421;
  border-color: #46576d;
  box-shadow: inset 0 2px 5px #02061071;
}
.catalog-result-line button,.jumps a {
  background: linear-gradient(145deg,#223249,#142132 79%);
  border-color: #3b4e62;
  box-shadow: var(--bevel),0 3px 8px #03060d45;
}
.jumps a:hover,.catalog-result-line button:hover { background: var(--accent-surface); border-color: var(--accent-line); }
.catalog-section-heading {
  border-image: linear-gradient(90deg,var(--accent-line),#2e3f5580 50%,transparent) 1;
}
.catalog-section-heading small { color: var(--signal); }
.row-list li {
  background: linear-gradient(153deg,var(--catalog-band),#142032 58%,#101924);
  border-color: #34475a;
  box-shadow: var(--bevel),0 7px 17px #04081062;
}
.row-list li:hover,.row-list li:focus-within {
  background: linear-gradient(143deg,var(--accent-surface),#182637 61%,#131d2a);
  border-color: var(--accent-line);
}
.catalog-vehicle-mark {
  color: var(--signal);
  background: linear-gradient(145deg,var(--accent-surface),#152132);
  border-color: var(--accent-line);
  box-shadow: var(--bevel),0 3px 7px #070c12a6;
}
.catalog-fact { background: #1a2b3f; border-color: #395068; }
.catalog-fact-critical {
  color: var(--signal-pale);
  background: var(--accent-surface);
  border-color: var(--accent-line);
}
.row-list a { border-color: #7895b937; }
.catalog-track-image { border-color: var(--accent-line); }
.cinema-cars #omoji-z-original .row-list li {
  background: linear-gradient(155deg,#3b2b30,#191c2a 58%,#111a27);
  border-color: var(--accent-line);
}
.cinema-courses :is(#technique,#endurance,#bonus-z) { --warm: #ffd49d; }
.guide-section {
  background: linear-gradient(153deg,#18292f,#142131 57%,#101924);
  border-color: #3a4a5e;
  box-shadow: var(--bevel),0 8px 20px #04081058;
}
.guide-section > .catalog-section-heading {
  background: linear-gradient(90deg,#111d2af4 10%,#13272de3 44%,#172b3a48),var(--section-art) center 56%/cover;
}
.chips li { background: #192b38; border-color: var(--signal-deep); }
.chips strong { color: var(--signal-pale); }
.controls details { background: #111e2d; }
.controls details[open] { border-color: var(--accent-line); }
footer {
  background: radial-gradient(ellipse at 0 100%,var(--catalog-band),transparent 62%),#0d1522;
  border-color: #34465a;
}
@media (max-width: 530px) {
  .catalog-hero-copy { background: linear-gradient(160deg,var(--catalog-band),#121e2d 82%); }
  .catalog-hero::after { background: linear-gradient(0deg,#0b131fcc,transparent 71%); }
  .catalog-hero::before { z-index: 1; }
}
@media (forced-colors: active) {
  .catalog-hero::before { display: none; }
  .catalog-section-heading { border-image: none; }
  .tabs a[aria-current] { border-color: Highlight; }
}