.normalization {
  --plot-w: var(--ink);
  --plot-m: var(--muted);
  --plot-y: #795000;
  --plot-p: #a03364;
  --plot-b: var(--olive);
  --plot-g: #216547;
  --plot-r: #963744;
  --plot-shade: #d7e8ff;
  --button-ink: #fff;
  --lab-gap: clamp(14px, 2vw, 26px);
  margin-block: 16px 32px;
  color: var(--ink);
  overflow-wrap: anywhere;
  scroll-margin-top: 10px;
}

.normalization:not(.is-ready) [data-interactive] { display: none; }

.normalization .normalization-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lab-gap);
  padding: clamp(18px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(125deg, var(--card), var(--soft));
}
.normalization :is(h1, h2, h3, p) { margin: 0; }
.normalization .eyebrow { color: var(--olive); margin-bottom: .5em; }
.normalization h1 { font-size: clamp(1.85em, 4.7vw, 3.45em); line-height: 1.08; text-wrap: balance; }
.normalization h2 { font-size: clamp(1.45em, 3.5vw, 2.2em); line-height: 1.14; text-wrap: balance; }
.normalization h3 { font-size: 1.2em; line-height: 1.25; }
.normalization p { max-width: 72ch; }
.normalization .normalization-hero h1 + p,
.normalization .slide p { margin-top: .55em; }

.normalization :is(button, select) {
  min-height: 44px;
  max-width: 100%;
  padding: .45em .8em;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
.normalization :is(button, select):enabled { cursor: pointer; }
.normalization :is(button, select):focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.normalization button:enabled:hover { border-color: var(--olive); }
.normalization button:disabled { opacity: .48; }
.normalization button:is(.main, [aria-pressed="true"]),
.normalization #next:enabled { border-color: var(--olive); background: var(--olive); color: var(--button-ink); }
.normalization .normalization-nav {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-block: var(--lab-gap);
}
.normalization .normalization-nav label { color: var(--muted); font-weight: 700; }
.normalization .normalization-nav select { flex: 1; min-width: 0; }
.normalization .normalization-arrows,
.normalization :is(.cases, .row) { display: flex; flex-wrap: wrap; gap: .5em; }
.normalization :is(.cases, .row) { margin-block: .75em .25em; }

.normalization .slide {
  padding: clamp(16px, 3vw, 36px);
  margin-block: var(--lab-gap);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.normalization :is(.duo, .duo2, .split, .cards) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lab-gap);
  margin-top: var(--lab-gap);
}
.normalization .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.normalization :is(.drawn, .cards > div) {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(10px, 2vw, 22px);
  background: var(--paper);
}
.normalization .slide > .drawn { margin-top: var(--lab-gap); }
.normalization .duo { max-width: 50rem; }
.normalization .mform { margin-block: .55em; font-family: ui-monospace, Consolas, monospace; }
.normalization ul { margin: 0; padding-left: 1.2em; }
.normalization li + li { margin-top: .3em; }
.normalization .hint { font-size: .9em; color: var(--muted); }
.normalization .b { color: var(--plot-b); }
.normalization .y { color: var(--plot-y); }
.normalization .g { color: var(--plot-g); }
.normalization .r { color: var(--plot-r); }
.normalization .cards b { display: block; color: var(--olive); margin-bottom: .35em; }

.normalization .case-table { margin-top: .6em; }
.normalization .tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.normalization .tbl :is(th, td) { padding: .35em; border-bottom: 1px solid var(--line); text-align: right; }
.normalization .tbl th:first-child { text-align: left; }
.normalization .tbl thead { background: var(--soft); }
.normalization canvas { display: block; width: 100%; aspect-ratio: 1; }
.normalization #cvData { aspect-ratio: 4 / 3; }
.normalization #cvBell { aspect-ratio: 16 / 7; min-height: 145px; }
.normalization .layers { display: flex; align-items: end; gap: 4px; height: 130px; margin: .6em 0; }
.normalization .layers i { flex: 1; border-radius: 4px 4px 0 0; transition: height .35s, background-color .35s; }
.normalization .layer-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35em; }
.normalization .n { font-variant-numeric: tabular-nums; font-weight: 700; }

body.normalization-board-open { overflow: hidden; }
body.normalization-board-open :is(.site-header, .site-footer, .skip-link, .breadcrumb, .reference-content) { visibility: hidden; }
.normalization.is-board {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: clamp(12px, 2.5vh, 48px) clamp(12px, calc(7vw - 24px), 16rem);
  background: var(--paper);
  font-size: clamp(1rem, .75rem + 1.05vw, 3.25rem);
}
.normalization.is-board .normalization-hero { padding: .55em .8em; }
.normalization.is-board .normalization-hero > div { flex: 1 1 16em; }
.normalization.is-board .normalization-hero h1 + p { display: none; }
.normalization.is-board h1 { font-size: clamp(1.4em, 3vw, 1.9em); }
.normalization.is-board .normalization-nav { margin-block: .55em; }
.normalization.is-board :is(.normalization-hero, .normalization-nav) { flex-shrink: 0; }
.normalization.is-board #normalization-deck {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}
.normalization.is-board .slide { margin-block: .55em; padding: .8em; }
.normalization.is-board .duo { max-width: min(100%, 100svh); }
.normalization.is-board .cards > div { padding: .65em; }
.normalization.is-board .case-table {
  max-height: 48svh;
  overflow: auto;
  font-size: .85em;
  line-height: 1.25;
}
.normalization.is-board .case-table thead { position: sticky; top: 0; }
.normalization.is-board .case-table :is(th, td) { padding: .2em .35em; }

.normalization.is-ready .slide > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 1000px) {
  .normalization.is-board #s-problema { font-size: min(.85em, 2.6svh); line-height: 1.35; }
  .normalization.is-board #s-problema .drawn { width: min(100%, 52svh); justify-self: center; }
  .normalization.is-board #s-campana {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "description chart"
      "summary chart"
      "controls chart";
    align-items: start;
    align-content: start;
    gap: .4em .8em;
    font-size: min(1em, 3svh);
    line-height: 1.35;
  }
  .normalization.is-board #s-campana > p { margin-top: 0; }
  .normalization.is-board #s-campana > p:first-of-type { grid-area: description; }
  .normalization.is-board #s-campana .drawn {
    grid-area: chart;
    width: min(100%, 110svh);
    margin: 0;
    justify-self: center;
  }
  .normalization.is-board #bellSummary { grid-area: summary; }
  .normalization.is-board #bellBtns { grid-area: controls; margin-top: .15em; }
}

@media (min-width: 1000px) and (max-height: 900px) {
  .normalization.is-board #s-campana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .normalization .normalization-nav { flex-wrap: wrap; }
  .normalization .normalization-arrows { width: 100%; }
  .normalization :is(.duo2, .split, .cards) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .normalization .layers i { transition: none; }
}
.normalization h2:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; border-radius: 4px; }