/* Mario Kart DS title-screen colors, with quiet surfaces for the research. */
:root {
  --paper: #f7fbff;
  --ink: #172a43;
  --muted: #506780;
  --line: #d1e1ef;
  --green: #075fb6;
  --nav: #fff;
  --soft: #e0f0ff;
}
body {
  background: linear-gradient(180deg, #ffffff80, #eef8ffb3),
    repeating-conic-gradient(#d7efff 0% 25%, #eef9ff 0% 50%) 0 0 / 48px 48px;
}
header {
  height: 88px;
  background: #fff;
  color: var(--ink);
  border-bottom: 4px solid #ed2639;
  box-shadow: 0 3px 0 #ffce34, 0 6px 20px #183a5f15;
}
header::after {
  content: "";
  position: absolute;
  height: 7px;
  bottom: -10px;
  left: 0;
  right: 0;
  background: repeating-conic-gradient(#172a43 0% 25%, #fff 0% 50%) 0 0 / 14px 14px;
}
.brand { gap: 12px; letter-spacing: 0; }
.brand:hover { text-decoration: none; }
.brand-icon, .title-screen-icon { image-rendering: pixelated; object-fit: contain; }
.brand-icon { flex-shrink: 0; filter: drop-shadow(2px 2px 0 #b5d4ed); }
.brand-name { font-size: 21px; font-weight: 900; font-style: italic; line-height: 1.05; letter-spacing: -.035em; }
.brand-name .ds { color: #ed2639; margin-left: 3px; }
.brand-name b { display: block; margin-top: 7px; font: 700 9px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .16em; color: #536983; }
header nav a { color: #284b70; font-weight: 650; }
header nav a:hover { color: #d21a2e; }
.layout { background: #ffffffed; box-shadow: 0 0 40px #234d7810; }
aside { top: 98px; height: calc(100vh - 98px); background: linear-gradient(#f1f9ff, #fff); }
aside a { color: #3e5c79; border-radius: 5px; }
aside a:hover { background: #e6f3ff; text-decoration: none; }
aside a.selected { background: #dceeff; border-left: 3px solid #ed2639; color: #064c91; }
.nav-label { color: #627f9b; font-weight: 700; }
.explorer-link { background: #fff; border-color: #9dc4e5; box-shadow: 0 3px 0 #dceaf5; }
.snapshot, footer { color: #58708a; }
.snapshot strong { color: #244c73; }
main { padding-top: 42px; }
h1, h2 { color: #172a43; }
.eyebrow { color: #075fb6; font-weight: 700; }
.muted { color: #577795; }
.lead { color: #466582; }
.title-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 34px 30px;
  margin: 0 0 28px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: linear-gradient(90deg, #003d7feF 0%, #00549add 58%, #0078bf20 100%),
    url("mkds-checkerboard.png") center / auto 100% repeat-x;
  box-shadow: 0 0 0 1px #9ac6eb, 0 6px 0 #d7e9f8;
}
.title-screen::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-conic-gradient(#fff 0% 25%, #142e52 0% 50%) 0 0 / 16px 16px;
}
.title-screen-copy { position: relative; z-index: 1; max-width: 780px; }
.title-screen .eyebrow { color: #ffdf63; letter-spacing: .1em; }
.title-screen h1 { color: #fff; font-weight: 850; font-style: italic; text-shadow: 2px 3px 0 #00275d; }
.title-screen .muted { color: #b8e6ff; }
.title-screen .lead { color: #e7f6ff; font-size: 17px; max-width: 660px; }
.title-screen .hero-actions { margin: 24px 0 12px; gap: 22px; }
.title-screen .text-link { color: #fff; }
.title-screen-icon { position: absolute; right: 28px; top: 24px; opacity: .25; transform: rotate(-6deg); z-index: 0; }
.button { background: #e82036; border-color: #ff6373; border-radius: 6px; box-shadow: 0 3px 0 #970d24; }
.button:hover { background: #c8152b; }
.stats { background: #fff; border-top: 4px solid #0769bd; box-shadow: 0 4px 0 #edf5fc; border-radius: 7px; }
.stat strong { color: #064f95; font-weight: 700; }
.stat:nth-child(2) strong { color: #945d00; }
.stat:nth-child(3) strong { color: #217876; }
.stat:nth-child(4) strong { color: #5f6c80; }
.caption, .source-note { color: #526b82; }
.feature { background: #fff; border-top: 4px solid #0769bd; border-radius: 7px; box-shadow: 0 4px 0 #edf5fc; }
.feature:nth-child(2) { border-top-color: #e82036; }
.feature:nth-child(3) { border-top-color: #ffbf21; }
.feature:hover { border-color: #88bce6; box-shadow: 0 4px 0 #d7eaff; }
.feature-number { color: #536e86; }
.notice { background: #edf7ff; border-color: #f6b923; color: #405d78; }
.method p { color: #506780; }
.page-toc, .explorer-controls { background: #edf7ff; border-color: #c9e1f4; }
.explorer-controls label { color: #375874; }
input, select { border-color: #abc9e3; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline-color: #075fb6; }
th { background: #e4f2ff; color: #214c75; }
.function-table tbody tr:hover { background: #f0f8ff; }
.function-table { min-width: 830px; }
.function-table th:nth-child(1) { width: 175px; }
.function-table th:nth-child(2) { width: 180px; }
.function-table th:nth-child(3) { width: 90px; }
.function-table th:nth-child(4) { width: 145px; }
.column-sort { border: 0; padding: 4px 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; width: 100%; }
.column-sort:hover { color: #075fb6; }
.sort-indicator { margin-left: 4px; color: #476b90; font-size: 10px; }
th[aria-sort="ascending"], th[aria-sort="descending"] { background: #cde5ff; }
.function-table .address { margin-top: 0; font-size: 11px; }
.load-more-panel { text-align: center; padding: 18px 0 25px; font-size: 12px; color: #405f7c; }
.load-more-panel .button { font-size: 12px; }
[hidden] { display: none !important; }
.address { color: #61758b; }
.badge { color: #506074; background: #e9eef5; }
.badge.known { color: #17613c; background: #dff3e6; }
.badge.described { color: #775000; background: #fff1c9; }
.badge.inferred { color: #775000; background: #fff1c9; }
.badge.sdk { color: #16548c; background: #dceeff; }
#function-count { color: #405f7c; }
.pagination button { background: #fff; border-color: #abc9e3; }
.prose pre { background: #142d4c; color: #e8f4ff; }
.prose p code, .prose li code { background: #e7f1fb; }
.prose blockquote { border-color: #ffbf21; }
.local-reference { color: #4e6c88; }
dialog { border-color: #8ab8dd; background: #fff; border-top: 5px solid #e82036; }
dialog::backdrop { background: #092751a6; }
.dialog-close { color: #335b80; }
.prose h2, .prose h3 { scroll-margin-top: 114px; }
@media (min-width: 1450px) { main { padding-top: 42px; } }
@media (max-width: 1050px) {
  .brand-name { font-size: 18px; }
  header { padding-inline: 24px; }
  header nav { gap: 19px; }
  .title-screen { padding: 28px 26px; }
  .title-screen-icon { right: 12px; opacity: .16; }
}
@media (max-width: 720px) {
  header { height: 78px; padding: 0 16px; gap: 12px; }
  .brand { gap: 8px; }
  .brand-icon { width: 36px; height: 36px; }
  .brand-name { font-size: 16px; }
  .brand-name b { font-size: 7px; letter-spacing: .08em; margin-top: 5px; }
  header nav { display: none; }
  #menu-toggle { color: #075fb6; border: 1px solid #c3dbef; border-radius: 5px; padding: 4px 9px; }
  aside { top: 88px; height: calc(100vh - 88px); background: #f3faff; }
  main { padding: 29px 18px 0; }
  .title-screen { padding: 25px 20px; border-radius: 9px; }
  .title-screen h1 { font-size: 32px; }
  .title-screen .eyebrow { font-size: 9px; }
  .title-screen .lead { font-size: 15px; }
  .title-screen .hero-actions { gap: 18px; }
  .title-screen-icon { top: 14px; right: 8px; width: 64px; height: 64px; opacity: .12; }
  .stat strong { font-size: 24px; }
  .prose h2, .prose h3 { scroll-margin-top: 101px; }
}