:root {
  color-scheme: light;
  --ink: #14283b;
  --ink-light: #20384d;
  --paper: #f6f1e6;
  --paper-light: #fffdf6;
  --paper-dark: #ede5d4;
  --muted: #506073;
  --line: #d6cdb9;
  --orange: #ffad6d;
  --orange-dark: #973d19;
  --teal: #12564e;
  --teal-light: #dcebe0;
  --header-size: 4rem;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.55; }
body.menu-open { overflow: hidden; }
a { color: var(--teal); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .12em; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, a, select, input, summary, [tabindex="0"] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #a84515; outline-offset: 3px; }
.site-header :focus-visible, .sidebar :focus-visible, .hero :focus-visible { outline-color: #ffd4a9; }
svg { flex: none; vertical-align: middle; }
img { display: block; max-inline-size: 100%; height: auto; }
::selection { background: #ffca98; color: var(--ink); }
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.13; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -.03em; }
h3 { font-size: 1.12rem; }
li, td, th, dd, dt { overflow-wrap: anywhere; }
[id] { scroll-margin-top: calc(var(--header-size) + 1rem); }
table [id] { scroll-margin-top: 0; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: fixed; inset: .75rem auto auto .75rem; z-index: 20; padding: .75rem 1rem; background: var(--paper-light); }
.eyebrow { font: 700 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .095em; color: var(--teal); }
.icon-button {
  display: grid;
  inline-size: 2.75rem;
  min-block-size: 2.75rem;
  place-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: .5rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--ink);
  color: #fff8e9;
  box-shadow: 0 1px 0 #3a5061;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: var(--header-size);
  max-width: 96rem;
  padding: .5rem clamp(.9rem, 3.2vw, 2.5rem);
  margin: auto;
}
.network-brand, .handbook-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
  min-height: 2.75rem;
  line-height: 1.15;
}
.network-brand > span {
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: none;
  background: var(--orange);
  border-radius: .35rem;
  color: var(--ink);
  font: 900 1.2rem/1 var(--mono);
}
.network-brand b { font-size: .93rem; }
.handbook-brand {
  border-left: 1px solid #536776;
  padding-left: 1.15rem;
  font-weight: 720;
}
.handbook-brand svg { color: var(--orange); }
.handbook-brand small { display: block; margin-top: .17rem; color: #c3cdd5; font-size: .7rem; font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .38rem .7rem;
  border: 1px solid #617789;
  border-radius: .48rem;
  color: #f8f2e6;
  background: #253d51;
  font-size: .86rem;
}
.search-trigger:hover, .site-header .icon-button:hover { background: #35546c; }
.search-trigger svg { color: var(--orange); }
kbd { display: inline-block; padding: .12rem .38rem; border: 1px solid currentColor; border-radius: .24rem; font: .72rem/1.2 var(--mono); }
.search-trigger kbd { margin-left: 1rem; color: #dfdbd3; }
.menu-trigger { display: none; }
.site-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  max-width: 96rem;
  min-height: calc(100vh - var(--header-size));
  margin-inline: auto;
}
.sidebar {
  align-self: stretch;
  background: var(--ink);
  color: #f5f0e3;
  min-width: 0;
}
.sidebar-inner {
  position: sticky;
  top: var(--header-size);
  max-height: calc(100dvh - var(--header-size));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #627386 transparent;
  padding: 1.3rem .95rem 1.75rem;
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; min-height: 1.65rem; padding: 0 .6rem; margin-bottom: .5rem; }
.sidebar-head .eyebrow { color: #c0d3d4; }
.sidebar a { color: inherit; text-decoration: none; }
.sidebar a:hover { background: #284459; }
.sidebar a[aria-current="page"] { color: var(--ink); background: var(--orange); font-weight: 750; }
.nav-home, .steam-link, .nav-group li a { display: flex; align-items: center; padding: .36rem .65rem; border-radius: .38rem; min-height: 2rem; }
.nav-home, .steam-link { gap: .6rem; min-height: 2.5rem; }
.nav-group { margin-top: .8rem; padding-top: .68rem; border-top: 1px solid #405569; }
.nav-group h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .24rem;
  padding-inline: .6rem;
  color: #ebebdf;
  font: 700 .71rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.nav-group ul { list-style: none; padding: 0; margin: 0; }
.nav-group li a { margin-left: .4rem; font-size: .84rem; }
.nav-group .is-parent a { color: #ffbf89; }
.steam-link { justify-content: space-between; border: 1px solid #516679; margin-top: 1.2rem; font-size: .84rem; }
.drawer-close, .drawer-scrim { display: none; }
main { min-width: 0; padding: clamp(1.05rem, 3.4vw, 3.25rem); padding-bottom: 0; }
main:focus { outline: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.25rem, 3.3vw, 3.2rem);
  background: var(--ink);
  color: var(--paper-light);
  border-radius: .7rem;
  box-shadow: 0 3px 0 #c8ba9e;
}
.hero .eyebrow { display: flex; gap: .5rem; align-items: center; color: #dce7e2; }
.status-dot { width: .52rem; height: .52rem; border-radius: 100%; background: var(--orange); }
.hero h1 { margin: .7rem 0 .15rem; font-size: clamp(2.15rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.07em; }
.hero h1 span { color: var(--orange); }
.hero-subtitle { margin: .72rem 0 .52rem; color: #f7dbbc; font-size: clamp(.94rem, 1.35vw, 1.17rem); font-weight: 700; }
.hero-intro { max-width: 37ch; color: #f0eadb; font-size: clamp(.94rem, 1.28vw, 1.08rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .5rem .8rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  font-size: .86rem;
  font-weight: 760;
  text-decoration: none;
}
.button.primary { background: var(--orange); color: var(--ink); }
.button.primary:hover { background: #ffcb9c; }
.button.secondary { border-color: #8294a2; color: var(--paper-light); }
.button.secondary:hover { background: var(--ink-light); }
.hero-art { min-width: 0; }
.hero-art img {
  width: 100%;
  border: 1px solid #788d96;
  border-radius: .42rem;
  object-fit: contain;
}
.doodle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 14.5rem;
  padding: 1rem;
  background-color: #f5d7b3;
  background-image: repeating-linear-gradient(transparent 0 23px, #e5bd95 23px 24px);
  color: var(--ink);
  border: 1px solid #ffdcae;
  border-radius: .4rem;
}
.doodle-bell { color: var(--orange-dark); }
.doodle-main { font-size: clamp(1.75rem, 4vw, 3.5rem); font-weight: 900; line-height: .92; letter-spacing: -.08em; }
.doodle-main em { color: var(--orange-dark); font-style: normal; }
.record-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--paper-light);
}
.record-strip li + li { border-left: 1px solid var(--line); }
.record-strip a { display: flex; align-items: center; gap: .63rem; height: 100%; min-height: 3rem; padding: .55rem .8rem; color: var(--ink); text-decoration: none; }
.record-strip a:hover { background: var(--teal-light); }
.record-strip b { color: var(--teal); font: 850 clamp(1.25rem, 2.6vw, 1.85rem)/1 var(--mono); }
.record-strip span { font-size: .85rem; font-weight: 650; }
.home-section { margin-top: clamp(1.55rem, 4vw, 3.25rem); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: .7rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.section-title h2 { margin-top: .12rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; font-size: .86rem; font-weight: 700; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.role-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: .45rem;
}
.teacher-card { background: #f9e5d3; }
.student-card { background: #e1eee4; }
.role-card:hover { border-color: var(--teal); }
.role-icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .36rem; background: #f2c2a0; color: #753618; }
.student-card .role-icon { background: #c0dccd; color: var(--teal); }
.role-card h3 { margin-block: .24rem; font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.role-card p { font-size: .87rem; color: #3e4d5b; }
.lookup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.lookup-grid a, .jump-grid a {
  border: 1px solid var(--line);
  border-radius: .42rem;
  color: var(--ink);
  background: var(--paper-light);
  text-decoration: none;
}
.lookup-grid a { display: flex; flex-direction: column; gap: .3rem; align-items: start; padding: .78rem; }
.lookup-grid a:hover, .jump-grid a:hover { background: var(--teal-light); border-color: #879e92; }
.lookup-icon { display: grid; place-items: center; width: 2.05rem; height: 2.05rem; margin-bottom: .13rem; color: var(--teal); background: var(--teal-light); border-radius: .28rem; }
.lookup-grid b { font-size: .94rem; }
.lookup-grid a > span:last-child { color: var(--muted); font: .73rem/1.35 var(--mono); }
.jump-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .65rem; }
.jump-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .74rem; }
.jump-grid svg { color: var(--teal); }
.jump-grid b, .jump-grid small { display: block; }
.jump-grid small { margin-top: .22rem; color: var(--muted); font-size: .78rem; }
.game-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.game-info > div { border: 1px solid var(--line); border-radius: .45rem; padding: .9rem; background: var(--paper-light); }
.game-info h3 { margin-block: .3rem; }
.game-info p:not(.eyebrow) { color: var(--muted); margin-top: .45rem; font-size: .93rem; }
.text-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .55rem; }
.faq details { border-top: 1px solid var(--line); padding: .55rem 0; font-size: .9rem; }
.faq details:first-of-type { margin-top: .7rem; }
summary { color: var(--teal); cursor: pointer; font-weight: 680; }
.screenshots { margin-top: 1rem; }
.screenshots h3 { margin-bottom: .65rem; }
.screenshots > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); gap: .65rem; }
.screenshots img { aspect-ratio: 16 / 9; width: 100%; object-fit: contain; border-radius: .35rem; background: var(--paper-dark); }

.breadcrumbs { margin-bottom: 1rem; color: var(--muted); font-size: .84rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; gap: .5rem; align-items: baseline; }
.breadcrumbs li + li::before { content: "/"; color: #82684e; font: .8rem/1 var(--mono); }
.breadcrumbs span { font-weight: 650; }
.page-heading { margin-bottom: 1.15rem; padding: .8rem 0 .95rem; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: .26rem 0 .5rem; font-size: clamp(2.25rem, 5.5vw, 4.75rem); letter-spacing: -.065em; line-height: 1.01; }
.page-heading .lead { max-width: 75ch; color: var(--muted); font-size: clamp(.98rem, 1.8vw, 1.12rem); }
.record-heading { display: flex; align-items: center; gap: 1rem; }
.record-heading h1 { font-size: clamp(1.8rem, 4vw, 3.5rem); }
.thumbnail {
  display: grid;
  inline-size: 96px;
  block-size: 96px;
  place-items: center;
  flex: none;
  color: var(--teal);
  background: var(--teal-light);
  border-radius: .35rem;
}
.thumbnail img { inline-size: 96px; block-size: 96px; object-fit: contain; }
.detail-section { margin: 1.45rem 0 1.8rem; }
.detail-section h2 { margin-bottom: .65rem; }
.detail-section p { margin: .5rem 0 .75rem; max-width: 85ch; }
.on-page { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--paper-light); }
.on-page ul { display: flex; flex-wrap: wrap; gap: .3rem .85rem; margin: 0; padding: 0; list-style: none; }
.on-page a { font-size: .86rem; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  border-radius: .28rem;
  background: var(--line);
}
.stats-grid div { min-width: 0; padding: .6rem .72rem; background: var(--paper-light); }
.stats-grid div:nth-child(4n+2), .stats-grid div:nth-child(4n+3) { background: #e5ece1; }
.stats-grid dt { color: var(--muted); font: 700 .7rem/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.stats-grid dd { margin: .16rem 0 0; font-size: 1rem; font-weight: 680; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .35rem .8rem; list-style: none; padding: 0; }
.related-list a { min-height: 2.75rem; }
.classroom-photo { max-width: 48rem; margin: 1rem 0; }
.classroom-photo img { border-radius: .5rem; }
.classroom-grid, .item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.75rem), 1fr));
  align-items: start;
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
}
.classroom-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.classroom-grid li, .item-card { border: 1px solid var(--line); border-radius: .45rem; background: var(--paper-light); padding: .62rem; }
.classroom-grid li > a, .card-heading { display: flex; align-items: center; gap: .68rem; color: var(--ink); text-decoration: none; }
.classroom-grid li > a:hover h2, .card-heading:hover b { text-decoration: underline; }
.classroom-grid li > a > div, .card-heading > span:last-child { min-width: 0; }
.classroom-grid li > a > svg { margin-left: auto; color: var(--teal); }
.classroom-grid h2 { margin-top: .22rem; font-size: 1.08rem; }
.classroom-grid p { margin: .55rem .15rem .2rem; color: var(--muted); font-size: .88rem; }
.card-heading small { display: block; color: var(--teal); font: 700 .65rem/1.4 var(--mono); text-transform: uppercase; }
.card-heading b { display: block; margin-top: .22rem; line-height: 1.2; }
.item-card .stats-grid { grid-template-columns: 1fr; margin-top: .56rem; }
.item-card .stats-grid div { padding: .42rem .52rem; }
.item-card .stats-grid dd { font-size: .84rem; }
.category-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.category-tabs a { display: inline-flex; align-items: center; padding: .42rem .62rem; min-height: 2.75rem; background: var(--paper-light); border: 1px solid var(--line); border-radius: .4rem; color: var(--teal); font-size: .84rem; font-weight: 690; text-decoration: none; }
.category-tabs a[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: white; }
.category-tabs a:hover { text-decoration: underline; }
.catalog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--paper-dark);
}
.catalog-tools label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: .77rem; font-weight: 700; }
.catalog-input { flex: 1 1 13rem; }
.catalog-input span { display: flex; gap: .44rem; align-items: center; padding-inline: .52rem; }
.catalog-input span, .catalog-tools select { min-height: 2.75rem; border: 1px solid #a69b86; border-radius: .3rem; background: var(--paper-light); color: var(--ink); }
.catalog-input input { width: 100%; min-width: 0; min-height: 2.62rem; padding: .25rem; border: 0; background: transparent; color: inherit; font-size: .94rem; }
.catalog-tools select { padding: .2rem .35rem; }
.view-options { display: flex; }
.view-options button { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 2.75rem; padding: .25rem .52rem; border: 1px solid #a69b86; background: var(--paper-light); color: var(--ink); font-size: .8rem; }
.view-options button:first-child { border-radius: .3rem 0 0 .3rem; }
.view-options button:last-child { border-radius: 0 .3rem .3rem 0; }
.view-options button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper-light); }
.catalog-status { display: flex; align-items: center; gap: .7rem; min-height: 2.65rem; }
.catalog-status p { color: var(--muted); font-size: .88rem; }
.catalog-status button { border: 0; background: transparent; color: var(--teal); text-decoration: underline; min-height: 2.6rem; }
.empty-state { padding: 1.35rem 1rem; border: 1px dashed #a69b86; background: var(--paper-light); border-radius: .4rem; }
.empty-state p { margin-top: .4rem; }
.table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: .38rem;
  scrollbar-color: #9d9c8a var(--paper-dark);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--paper-light); font-size: .9rem; }
.sticky-table { min-width: 30rem; }
.comparison-table { min-width: max(46rem, 100%); }
.comparison-table td:nth-child(3) { min-width: 16rem; }
.comparison-table td:nth-child(4), .comparison-table td:nth-child(5) { min-width: 10rem; }
.table-properties { margin: 0; }
.table-properties div { display: flex; flex-wrap: wrap; gap: 0 .3rem; }
.table-properties div + div { margin-top: .28rem; }
.table-properties dt { color: var(--muted); }
.table-properties dt::after { content: ":"; }
.table-properties dd { margin: 0; font-weight: 650; }
th, td { vertical-align: top; text-align: left; padding: .64rem .72rem; border-bottom: 1px solid var(--line); }
thead th { background: #d5e4dc; color: #23413f; font-size: .77rem; font-weight: 760; }
tbody th { background: #eee6d6; min-width: 7.4rem; }
tbody td { min-width: 7.4rem; }
tbody tr:nth-child(even) td { background: #f4f0e3; }
tbody tr:nth-child(even) th { background: #e7decd; }
.sticky-table thead th:first-child, .sticky-table tbody th { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
.exam-list, .achievement-list { display: grid; gap: .48rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.exam-list > li, .achievement-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .68rem; padding: .78rem; border: 1px solid var(--line); border-radius: .38rem; background: var(--paper-light); }
.achievement-list > li:target, .exam-list > li:target { box-shadow: inset 4px 0 var(--orange-dark); background: #faeadb; }
.achievement-list svg { color: var(--orange-dark); }
.achievement-list img { width: 96px; height: 96px; object-fit: contain; border-radius: .26rem; }
.achievement-list p { margin: .35rem 0; }
.question-number { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: .32rem; color: var(--teal); background: var(--teal-light); font: 750 .88rem/1 var(--mono); }
.exam-answer { margin-top: .46rem; }
.exam-answer summary { padding: .4rem 0; }
.exam-answer p { background: var(--teal-light); border-left: 3px solid var(--teal); padding: .45rem .6rem; margin: .2rem 0; }
.exam-choices { padding-left: 1.15rem; margin-block: .5rem; color: var(--muted); }
.effects-list { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.effects-list li { border-left: 3px solid var(--teal); background: var(--paper-light); padding: .64rem .76rem; }
.effects-list p { margin: .25rem 0 0; }

.search-dialog {
  width: min(37rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 2rem);
  margin: min(12vh, 6rem) auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .65rem;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 0 1.2rem 4rem #05101959;
}
.search-dialog::backdrop { background: #081a2cd1; }
.search-inner { padding: 1rem; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dialog-heading .icon-button { border-color: var(--line); }
.search-field { display: flex; align-items: center; gap: .6rem; padding-inline: .68rem; border: 1px solid #a69b86; border-radius: .38rem; color: var(--teal); }
.search-field input { width: 100%; min-width: 0; padding: .58rem .05rem; min-height: 2.75rem; border: 0; color: var(--ink); background: transparent; }
.search-status { margin: .75rem 0 .45rem; color: var(--muted); font-size: .9rem; }
.search-results { margin: 0; padding: 0; list-style: none; max-height: min(55dvh, 23rem); overflow-y: auto; }
.search-results a { display: block; padding: .52rem .62rem; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--teal-light); }
.search-results a:focus-visible { outline-offset: -3px; }
.search-results b, .search-results small { display: block; overflow-wrap: anywhere; }
.search-results small { color: var(--muted); margin-top: .1rem; }
.search-results .search-kind { color: var(--teal); font: 700 .65rem/1.4 var(--mono); text-transform: uppercase; }
.search-hint { margin-top: .7rem; color: var(--muted); font-size: .75rem; }
.search-hint kbd:not(:first-child) { margin-left: .18rem; }

.site-footer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 2rem; padding: .85rem 0 1.35rem; color: var(--muted); font-size: .84rem; }
.site-footer > div { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; }
.analytics-ui > button { min-height: 2.75rem; padding: .32rem .55rem; color: var(--teal); border: 1px solid var(--line); border-radius: .35rem; background: var(--paper-light); }
.analytics-panel {
  position: fixed;
  inset: auto .9rem .9rem auto;
  z-index: 9;
  width: min(25rem, calc(100% - 1.8rem));
  padding: 1rem;
  border: 1px solid #958771;
  border-radius: .5rem;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 0 .7rem 2rem #15283736;
}
.analytics-panel h2 { padding-right: 2.75rem; font-size: 1.1rem; }
.analytics-panel p { margin-top: .45rem; }
.consent-close { position: absolute; top: .55rem; right: .55rem; border-color: var(--line); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.consent-actions button { min-height: 2.75rem; padding: .35rem .65rem; border: 1px solid var(--teal); border-radius: .35rem; color: var(--teal); background: var(--paper-light); }
.consent-actions button[data-consent="granted"] { color: white; background: var(--teal); }

@media (max-width: 63rem) {
  .site-layout { grid-template-columns: 13rem minmax(0, 1fr); }
  .sidebar-inner { padding-inline: .7rem; }
  .hero { gap: .9rem; }
  .jump-grid a { grid-template-columns: auto minmax(0, 1fr); }
  .jump-grid a > svg:last-child { display: none; }
}
@media (max-width: 49.99rem) {
  .header-inner { gap: .55rem; }
  .handbook-brand { padding-left: .55rem; font-size: .95rem; }
  .network-brand b { display: none; }
  .site-layout { display: block; }
  .sidebar-inner { position: static; max-height: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; }
  .nav-home { grid-column: 1 / -1; }
  .nav-group li a { min-height: 2.75rem; }
  .menu-trigger, .drawer-close, .drawer-scrim { display: grid; }
  .js .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 12;
    width: min(19.5rem, calc(100% - 2.4rem));
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: .45rem 0 2rem #07142155;
  }
  .js .sidebar:not(.is-open) { visibility: hidden; }
  .js .sidebar nav { display: block; }
  .js .drawer-scrim { position: fixed; inset: 0; z-index: 11; width: 100%; height: 100%; border: 0; background: #061727aa; }
  .record-strip a { gap: .38rem; padding-inline: .55rem; }
}
@media (max-width: 37rem) {
  .header-inner { padding-inline: .72rem; }
  .handbook-brand svg { display: none; }
  .header-actions { gap: .35rem; }
  .search-trigger { width: 2.75rem; padding: 0; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .menu-trigger { border-color: #617789; }
  main { padding-inline: .85rem; }
  .hero { grid-template-columns: 1fr; padding: 1.05rem; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.45rem); max-width: 10ch; }
  .hero-art img { max-height: 14rem; }
  .doodle { min-height: 8.6rem; padding: .7rem; }
  .doodle-bell { display: none; }
  .record-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
  .record-strip li:nth-child(3) { border-left: 0; }
  .record-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .record-strip a { min-height: 2.85rem; padding-inline: .68rem; }
  .section-title { align-items: start; }
  .role-grid, .game-info, .jump-grid { grid-template-columns: 1fr; }
  .jump-grid a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jump-grid a > svg:last-child { display: block; }
  .lookup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: 1fr; }
  .record-heading { gap: .6rem; }
}