/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, legacy, components, utilities, shell, blocks, pages;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Noto Sans", system-ui, sans-serif;
    --font-serif: "Noto Serif", Georgia, serif;
    --font-mono: "Noto Sans Mono", Menlo, monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-neutral-100: oklch(97% 0 0);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-olive-100: oklch(96.6% 0.005 106.5);
    --color-olive-200: oklch(93% 0.007 106.5);
    --color-olive-400: oklch(73.7% 0.021 106.9);
    --color-olive-500: oklch(58% 0.031 107.3);
    --color-olive-600: oklch(46.6% 0.025 107.3);
    --color-olive-800: oklch(28.6% 0.016 107.4);
    --color-mist-100: oklch(96.3% 0.002 197.1);
    --color-mist-200: oklch(92.5% 0.005 214.3);
    --color-mist-400: oklch(72.3% 0.014 214.4);
    --color-mist-500: oklch(56% 0.021 213.5);
    --color-mist-600: oklch(45% 0.017 213.2);
    --color-mist-800: oklch(27.5% 0.011 216.9);
    --color-taupe-100: oklch(96% 0.002 17.2);
    --color-taupe-200: oklch(92.2% 0.005 34.3);
    --color-taupe-400: oklch(71.4% 0.014 41.2);
    --color-taupe-500: oklch(54.7% 0.021 43.1);
    --color-taupe-600: oklch(43.8% 0.017 39.3);
    --color-taupe-800: oklch(26.8% 0.011 36.5);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-full {
    right: 100%;
  }
  .-bottom-8 {
    bottom: calc(var(--spacing) * -8);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .\!container {
    width: 100% !important;
    @media (width >= 640px) {
      max-width: 640px !important;
    }
    @media (width >= 768px) {
      max-width: 768px !important;
    }
    @media (width >= 1024px) {
      max-width: 1024px !important;
    }
    @media (width >= 1280px) {
      max-width: 1280px !important;
    }
    @media (width >= 1536px) {
      max-width: 1536px !important;
    }
  }
  .container {
    width: 100%;
    @media (width >= 640px) {
      max-width: 640px;
    }
    @media (width >= 768px) {
      max-width: 768px;
    }
    @media (width >= 1024px) {
      max-width: 1024px;
    }
    @media (width >= 1280px) {
      max-width: 1280px;
    }
    @media (width >= 1536px) {
      max-width: 1536px;
    }
  }
  .-m-2\.5 {
    margin: calc(var(--spacing) * -2.5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-base {
    font-size: 1rem;
    line-height: 1.75;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.9em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2222222em;
      line-height: 1.4545455;
      margin-top: 1.0909091em;
      margin-bottom: 1.0909091em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      padding-inline-start: 1em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.8333333em;
      line-height: 1;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.6666667em;
      margin-top: 1.8666667em;
      margin-bottom: 1.0666667em;
      line-height: 1.3333333;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.3333333em;
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      border-radius: 0.3125rem;
      padding-top: 0.2222222em;
      padding-inline-end: 0.4444444em;
      padding-bottom: 0.2222222em;
      padding-inline-start: 0.4444444em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8666667em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.75;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.375rem;
      padding-top: 1em;
      padding-inline-end: 1.5em;
      padding-bottom: 1em;
      padding-inline-start: 1.5em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      padding-inline-start: 1.5555556em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 3.1111111em;
      margin-bottom: 3.1111111em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.75em;
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
      margin-top: 1em;
    }
    :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-sm {
    font-size: 0.875rem;
    line-height: 1.7142857;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2857143em;
      line-height: 1.5555556;
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.1111111em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.1428571em;
      margin-top: 0;
      margin-bottom: 0.8em;
      line-height: 1.2;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.4285714em;
      margin-top: 1.6em;
      margin-bottom: 0.8em;
      line-height: 1.4;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2857143em;
      margin-top: 1.5555556em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.4285714em;
      margin-bottom: 0.5714286em;
      line-height: 1.4285714;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8571429em;
      border-radius: 0.3125rem;
      padding-top: 0.1428571em;
      padding-inline-end: 0.3571429em;
      padding-bottom: 0.1428571em;
      padding-inline-start: 0.3571429em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8571429em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.9em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.6666667;
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      border-radius: 0.25rem;
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.2857143em;
      margin-bottom: 0.2857143em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4285714em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4285714em;
    }
    :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }
    :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.1428571em;
    }
    :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.1428571em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.2857143em;
      padding-inline-start: 1.5714286em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2.8571429em;
      margin-bottom: 2.8571429em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.3333333;
      margin-top: 0.6666667em;
    }
    :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .-mr-72 {
    margin-right: calc(var(--spacing) * -72);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-10 {
    margin-right: calc(var(--spacing) * 10);
  }
  .-mb-2 {
    margin-bottom: calc(var(--spacing) * -2);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .form-input {
    appearance: none;
    background-color: #fff;
    border-color: oklch(55.1% 0.027 264.364);
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(54.6% 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(54.6% 0.245 262.881);
    }
    &::placeholder {
      color: oklch(55.1% 0.027 264.364);
      opacity: 1;
    }
    &::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
    }
    &::-webkit-date-and-time-value {
      min-height: 1.5em;
    }
    &::-webkit-date-and-time-value {
      text-align: inherit;
    }
    &::-webkit-datetime-edit {
      display: inline-flex;
    }
    &::-webkit-datetime-edit {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-year-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-month-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-day-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-hour-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-minute-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-second-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-millisecond-field {
      padding-top: 0;
      padding-bottom: 0;
    }
    &::-webkit-datetime-edit-meridiem-field {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-70 {
    height: calc(var(--spacing) * 70);
  }
  .h-full {
    height: 100%;
  }
  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }
  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-1\/5 {
    width: calc(1 / 5 * 100%);
  }
  .w-2\/5 {
    width: calc(2 / 5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\/5 {
    width: calc(3 / 5 * 100%);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-32 {
    max-width: calc(var(--spacing) * 32);
  }
  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }
  .max-w-\[1480px\] {
    max-width: 1480px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-top-right {
    transform-origin: 100% 0;
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-270 {
    rotate: 270deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-8 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-mute-border {
    :where(& > :not(:last-child)) {
      border-color: var(--mute-border);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-clip {
    overflow: clip;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .app-border-amber {
    border-color: var(--amber-border);
  }
  .app-border-blue {
    border-color: var(--blue-border);
  }
  .app-border-blush {
    border-color: var(--blush-border);
  }
  .app-border-brown {
    border-color: var(--brown-border);
  }
  .app-border-caution {
    border-color: var(--caution-border);
  }
  .app-border-coral {
    border-color: var(--coral-border);
  }
  .app-border-cyan {
    border-color: var(--cyan-border);
  }
  .app-border-earth {
    border-color: var(--earth-border);
  }
  .app-border-emerald {
    border-color: var(--emerald-border);
  }
  .app-border-experiment {
    border-color: var(--experiment-border);
  }
  .app-border-formula {
    border-color: var(--formula-border);
  }
  .app-border-gray {
    border-color: var(--gray-border);
  }
  .app-border-green {
    border-color: var(--green-border);
  }
  .app-border-indigo {
    border-color: var(--indigo-border);
  }
  .app-border-mist {
    border-color: var(--mist-border);
  }
  .app-border-negative {
    border-color: var(--negative-border);
  }
  .app-border-olive {
    border-color: var(--olive-border);
  }
  .app-border-orange {
    border-color: var(--orange-border);
  }
  .app-border-origin {
    border-color: var(--origin-border);
  }
  .app-border-positive {
    border-color: var(--positive-border);
  }
  .app-border-primary {
    border-color: var(--primary-border);
  }
  .app-border-primary-strong {
    border-color: var(--primary-strong-border);
  }
  .app-border-procedural {
    border-color: var(--procedural-border);
  }
  .app-border-purple {
    border-color: var(--purple-border);
  }
  .app-border-red {
    border-color: var(--red-border);
  }
  .app-border-reference {
    border-color: var(--reference-border);
  }
  .app-border-rose {
    border-color: var(--rose-border);
  }
  .app-border-sage {
    border-color: var(--sage-border);
  }
  .app-border-sky {
    border-color: var(--sky-border);
  }
  .app-border-slate {
    border-color: var(--slate-border);
  }
  .app-border-stone {
    border-color: var(--stone-border);
  }
  .app-border-structural {
    border-color: var(--structural-border);
  }
  .app-border-taupe {
    border-color: var(--taupe-border);
  }
  .app-border-teal {
    border-color: var(--teal-border);
  }
  .app-border-verify {
    border-color: var(--verify-border);
  }
  .app-border-yellow {
    border-color: var(--yellow-border);
  }
  .app-border-zinc {
    border-color: var(--zinc-border);
  }
  .border-mute {
    border-color: var(--mute);
  }
  .border-mute-border {
    border-color: var(--mute-border);
  }
  .border-transparent {
    border-color: transparent;
  }
  .app-bg-amber {
    background-color: var(--amber-bg);
    fill: var(--amber-bg);
  }
  .app-bg-blue {
    background-color: var(--blue-bg);
    fill: var(--blue-bg);
  }
  .app-bg-blush {
    background-color: var(--blush-bg);
    fill: var(--blush-bg);
  }
  .app-bg-brown {
    background-color: var(--brown-bg);
    fill: var(--brown-bg);
  }
  .app-bg-caution {
    background-color: var(--caution-bg);
    fill: var(--caution-bg);
  }
  .app-bg-coral {
    background-color: var(--coral-bg);
    fill: var(--coral-bg);
  }
  .app-bg-cyan {
    background-color: var(--cyan-bg);
    fill: var(--cyan-bg);
  }
  .app-bg-earth {
    background-color: var(--earth-bg);
    fill: var(--earth-bg);
  }
  .app-bg-emerald {
    background-color: var(--emerald-bg);
    fill: var(--emerald-bg);
  }
  .app-bg-experiment {
    background-color: var(--experiment-bg);
    fill: var(--experiment-bg);
  }
  .app-bg-formula {
    background-color: var(--formula-bg);
    fill: var(--formula-bg);
  }
  .app-bg-gray {
    background-color: var(--gray-bg);
    fill: var(--gray-bg);
  }
  .app-bg-green {
    background-color: var(--green-bg);
    fill: var(--green-bg);
  }
  .app-bg-indigo {
    background-color: var(--indigo-bg);
    fill: var(--indigo-bg);
  }
  .app-bg-mist {
    background-color: var(--mist-bg);
    fill: var(--mist-bg);
  }
  .app-bg-negative {
    background-color: var(--negative-bg);
    fill: var(--negative-bg);
  }
  .app-bg-olive {
    background-color: var(--olive-bg);
    fill: var(--olive-bg);
  }
  .app-bg-orange {
    background-color: var(--orange-bg);
    fill: var(--orange-bg);
  }
  .app-bg-origin {
    background-color: var(--origin-bg);
    fill: var(--origin-bg);
  }
  .app-bg-positive {
    background-color: var(--positive-bg);
    fill: var(--positive-bg);
  }
  .app-bg-primary {
    background-color: var(--primary-bg);
    fill: var(--primary-bg);
  }
  .app-bg-primary-strong {
    background-color: var(--primary-strong-bg);
    fill: var(--primary-strong-bg);
  }
  .app-bg-procedural {
    background-color: var(--procedural-bg);
    fill: var(--procedural-bg);
  }
  .app-bg-purple {
    background-color: var(--purple-bg);
    fill: var(--purple-bg);
  }
  .app-bg-red {
    background-color: var(--red-bg);
    fill: var(--red-bg);
  }
  .app-bg-reference {
    background-color: var(--reference-bg);
    fill: var(--reference-bg);
  }
  .app-bg-rose {
    background-color: var(--rose-bg);
    fill: var(--rose-bg);
  }
  .app-bg-sage {
    background-color: var(--sage-bg);
    fill: var(--sage-bg);
  }
  .app-bg-sky {
    background-color: var(--sky-bg);
    fill: var(--sky-bg);
  }
  .app-bg-slate {
    background-color: var(--slate-bg);
    fill: var(--slate-bg);
  }
  .app-bg-stone {
    background-color: var(--stone-bg);
    fill: var(--stone-bg);
  }
  .app-bg-structural {
    background-color: var(--structural-bg);
    fill: var(--structural-bg);
  }
  .app-bg-taupe {
    background-color: var(--taupe-bg);
    fill: var(--taupe-bg);
  }
  .app-bg-teal {
    background-color: var(--teal-bg);
    fill: var(--teal-bg);
  }
  .app-bg-verify {
    background-color: var(--verify-bg);
    fill: var(--verify-bg);
  }
  .app-bg-yellow {
    background-color: var(--yellow-bg);
    fill: var(--yellow-bg);
  }
  .app-bg-zinc {
    background-color: var(--zinc-bg);
    fill: var(--zinc-bg);
  }
  .app-canvas-bg {
    background-color: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--mute) 8%, var(--reader-bg));
    }
    fill: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--mute) 8%, var(--reader-bg));
    }
  }
  .tb-result {
    table[data-accent] tr& {
      --accent: var(--verify-text);
      --accent-bg: var(--verify-bg);
      --accent-border: var(--verify-border);
      --accent-mark: var(--verify-mark);
      border-top: 2px solid var(--accent-border);
      background-color: var(--accent-bg) !important;
    }
    table[data-accent] tr& td {
      color: var(--accent);
      font-weight: 600;
    }
  }
  .tb-negative {
    --accent: var(--negative-text);
    --accent-bg: var(--negative-bg);
    --accent-border: var(--negative-border);
    --accent-mark: var(--negative-mark);
    background-color: var(--accent-bg);
    color: var(--accent);
  }
  .tb-positive {
    --accent: var(--positive-text);
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
    --accent-mark: var(--positive-mark);
    background-color: var(--accent-bg);
    color: var(--accent);
  }
  .app-solid-amber {
    background-color: var(--amber-solid);
  }
  .app-solid-blue {
    background-color: var(--blue-solid);
  }
  .app-solid-blush {
    background-color: var(--blush-solid);
  }
  .app-solid-brown {
    background-color: var(--brown-solid);
  }
  .app-solid-caution {
    background-color: var(--caution-solid);
  }
  .app-solid-coral {
    background-color: var(--coral-solid);
  }
  .app-solid-cyan {
    background-color: var(--cyan-solid);
  }
  .app-solid-earth {
    background-color: var(--earth-solid);
  }
  .app-solid-emerald {
    background-color: var(--emerald-solid);
  }
  .app-solid-experiment {
    background-color: var(--experiment-solid);
  }
  .app-solid-formula {
    background-color: var(--formula-solid);
  }
  .app-solid-gray {
    background-color: var(--gray-solid);
  }
  .app-solid-green {
    background-color: var(--green-solid);
  }
  .app-solid-indigo {
    background-color: var(--indigo-solid);
  }
  .app-solid-mist {
    background-color: var(--mist-solid);
  }
  .app-solid-negative {
    background-color: var(--negative-solid);
  }
  .app-solid-olive {
    background-color: var(--olive-solid);
  }
  .app-solid-orange {
    background-color: var(--orange-solid);
  }
  .app-solid-origin {
    background-color: var(--origin-solid);
  }
  .app-solid-positive {
    background-color: var(--positive-solid);
  }
  .app-solid-primary {
    background-color: var(--primary-solid);
  }
  .app-solid-primary-strong {
    background-color: var(--primary-strong-solid);
  }
  .app-solid-procedural {
    background-color: var(--procedural-solid);
  }
  .app-solid-purple {
    background-color: var(--purple-solid);
  }
  .app-solid-red {
    background-color: var(--red-solid);
  }
  .app-solid-reference {
    background-color: var(--reference-solid);
  }
  .app-solid-rose {
    background-color: var(--rose-solid);
  }
  .app-solid-sage {
    background-color: var(--sage-solid);
  }
  .app-solid-sky {
    background-color: var(--sky-solid);
  }
  .app-solid-slate {
    background-color: var(--slate-solid);
  }
  .app-solid-stone {
    background-color: var(--stone-solid);
  }
  .app-solid-structural {
    background-color: var(--structural-solid);
  }
  .app-solid-taupe {
    background-color: var(--taupe-solid);
  }
  .app-solid-teal {
    background-color: var(--teal-solid);
  }
  .app-solid-verify {
    background-color: var(--verify-solid);
  }
  .app-solid-yellow {
    background-color: var(--yellow-solid);
  }
  .app-solid-zinc {
    background-color: var(--zinc-solid);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-gray-500\/75 {
    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
    }
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .app-mark-amber {
    color: var(--amber-mark);
    stroke: var(--amber-mark);
    fill: var(--amber-mark);
  }
  .app-mark-blue {
    color: var(--blue-mark);
    stroke: var(--blue-mark);
    fill: var(--blue-mark);
  }
  .app-mark-blush {
    color: var(--blush-mark);
    stroke: var(--blush-mark);
    fill: var(--blush-mark);
  }
  .app-mark-brown {
    color: var(--brown-mark);
    stroke: var(--brown-mark);
    fill: var(--brown-mark);
  }
  .app-mark-caution {
    color: var(--caution-mark);
    stroke: var(--caution-mark);
    fill: var(--caution-mark);
  }
  .app-mark-coral {
    color: var(--coral-mark);
    stroke: var(--coral-mark);
    fill: var(--coral-mark);
  }
  .app-mark-cyan {
    color: var(--cyan-mark);
    stroke: var(--cyan-mark);
    fill: var(--cyan-mark);
  }
  .app-mark-earth {
    color: var(--earth-mark);
    stroke: var(--earth-mark);
    fill: var(--earth-mark);
  }
  .app-mark-emerald {
    color: var(--emerald-mark);
    stroke: var(--emerald-mark);
    fill: var(--emerald-mark);
  }
  .app-mark-experiment {
    color: var(--experiment-mark);
    stroke: var(--experiment-mark);
    fill: var(--experiment-mark);
  }
  .app-mark-formula {
    color: var(--formula-mark);
    stroke: var(--formula-mark);
    fill: var(--formula-mark);
  }
  .app-mark-gray {
    color: var(--gray-mark);
    stroke: var(--gray-mark);
    fill: var(--gray-mark);
  }
  .app-mark-green {
    color: var(--green-mark);
    stroke: var(--green-mark);
    fill: var(--green-mark);
  }
  .app-mark-indigo {
    color: var(--indigo-mark);
    stroke: var(--indigo-mark);
    fill: var(--indigo-mark);
  }
  .app-mark-mist {
    color: var(--mist-mark);
    stroke: var(--mist-mark);
    fill: var(--mist-mark);
  }
  .app-mark-negative {
    color: var(--negative-mark);
    stroke: var(--negative-mark);
    fill: var(--negative-mark);
  }
  .app-mark-olive {
    color: var(--olive-mark);
    stroke: var(--olive-mark);
    fill: var(--olive-mark);
  }
  .app-mark-orange {
    color: var(--orange-mark);
    stroke: var(--orange-mark);
    fill: var(--orange-mark);
  }
  .app-mark-origin {
    color: var(--origin-mark);
    stroke: var(--origin-mark);
    fill: var(--origin-mark);
  }
  .app-mark-positive {
    color: var(--positive-mark);
    stroke: var(--positive-mark);
    fill: var(--positive-mark);
  }
  .app-mark-primary {
    color: var(--primary-mark);
    stroke: var(--primary-mark);
    fill: var(--primary-mark);
  }
  .app-mark-primary-strong {
    color: var(--primary-strong-mark);
    stroke: var(--primary-strong-mark);
    fill: var(--primary-strong-mark);
  }
  .app-mark-procedural {
    color: var(--procedural-mark);
    stroke: var(--procedural-mark);
    fill: var(--procedural-mark);
  }
  .app-mark-purple {
    color: var(--purple-mark);
    stroke: var(--purple-mark);
    fill: var(--purple-mark);
  }
  .app-mark-red {
    color: var(--red-mark);
    stroke: var(--red-mark);
    fill: var(--red-mark);
  }
  .app-mark-reference {
    color: var(--reference-mark);
    stroke: var(--reference-mark);
    fill: var(--reference-mark);
  }
  .app-mark-rose {
    color: var(--rose-mark);
    stroke: var(--rose-mark);
    fill: var(--rose-mark);
  }
  .app-mark-sage {
    color: var(--sage-mark);
    stroke: var(--sage-mark);
    fill: var(--sage-mark);
  }
  .app-mark-sky {
    color: var(--sky-mark);
    stroke: var(--sky-mark);
    fill: var(--sky-mark);
  }
  .app-mark-slate {
    color: var(--slate-mark);
    stroke: var(--slate-mark);
    fill: var(--slate-mark);
  }
  .app-mark-stone {
    color: var(--stone-mark);
    stroke: var(--stone-mark);
    fill: var(--stone-mark);
  }
  .app-mark-structural {
    color: var(--structural-mark);
    stroke: var(--structural-mark);
    fill: var(--structural-mark);
  }
  .app-mark-taupe {
    color: var(--taupe-mark);
    stroke: var(--taupe-mark);
    fill: var(--taupe-mark);
  }
  .app-mark-teal {
    color: var(--teal-mark);
    stroke: var(--teal-mark);
    fill: var(--teal-mark);
  }
  .app-mark-verify {
    color: var(--verify-mark);
    stroke: var(--verify-mark);
    fill: var(--verify-mark);
  }
  .app-mark-yellow {
    color: var(--yellow-mark);
    stroke: var(--yellow-mark);
    fill: var(--yellow-mark);
  }
  .app-mark-zinc {
    color: var(--zinc-mark);
    stroke: var(--zinc-mark);
    fill: var(--zinc-mark);
  }
  .app-text-amber {
    color: var(--amber-text);
    fill: var(--amber-text);
  }
  .app-text-blue {
    color: var(--blue-text);
    fill: var(--blue-text);
  }
  .app-text-blush {
    color: var(--blush-text);
    fill: var(--blush-text);
  }
  .app-text-brown {
    color: var(--brown-text);
    fill: var(--brown-text);
  }
  .app-text-caution {
    color: var(--caution-text);
    fill: var(--caution-text);
  }
  .app-text-coral {
    color: var(--coral-text);
    fill: var(--coral-text);
  }
  .app-text-cyan {
    color: var(--cyan-text);
    fill: var(--cyan-text);
  }
  .app-text-earth {
    color: var(--earth-text);
    fill: var(--earth-text);
  }
  .app-text-emerald {
    color: var(--emerald-text);
    fill: var(--emerald-text);
  }
  .app-text-experiment {
    color: var(--experiment-text);
    fill: var(--experiment-text);
  }
  .app-text-formula {
    color: var(--formula-text);
    fill: var(--formula-text);
  }
  .app-text-gray {
    color: var(--gray-text);
    fill: var(--gray-text);
  }
  .app-text-green {
    color: var(--green-text);
    fill: var(--green-text);
  }
  .app-text-indigo {
    color: var(--indigo-text);
    fill: var(--indigo-text);
  }
  .app-text-mist {
    color: var(--mist-text);
    fill: var(--mist-text);
  }
  .app-text-negative {
    color: var(--negative-text);
    fill: var(--negative-text);
  }
  .app-text-olive {
    color: var(--olive-text);
    fill: var(--olive-text);
  }
  .app-text-orange {
    color: var(--orange-text);
    fill: var(--orange-text);
  }
  .app-text-origin {
    color: var(--origin-text);
    fill: var(--origin-text);
  }
  .app-text-positive {
    color: var(--positive-text);
    fill: var(--positive-text);
  }
  .app-text-primary {
    color: var(--primary-text);
    fill: var(--primary-text);
  }
  .app-text-primary-strong {
    color: var(--primary-strong-text);
    fill: var(--primary-strong-text);
  }
  .app-text-procedural {
    color: var(--procedural-text);
    fill: var(--procedural-text);
  }
  .app-text-purple {
    color: var(--purple-text);
    fill: var(--purple-text);
  }
  .app-text-red {
    color: var(--red-text);
    fill: var(--red-text);
  }
  .app-text-reference {
    color: var(--reference-text);
    fill: var(--reference-text);
  }
  .app-text-rose {
    color: var(--rose-text);
    fill: var(--rose-text);
  }
  .app-text-sage {
    color: var(--sage-text);
    fill: var(--sage-text);
  }
  .app-text-sky {
    color: var(--sky-text);
    fill: var(--sky-text);
  }
  .app-text-slate {
    color: var(--slate-text);
    fill: var(--slate-text);
  }
  .app-text-stone {
    color: var(--stone-text);
    fill: var(--stone-text);
  }
  .app-text-structural {
    color: var(--structural-text);
    fill: var(--structural-text);
  }
  .app-text-taupe {
    color: var(--taupe-text);
    fill: var(--taupe-text);
  }
  .app-text-teal {
    color: var(--teal-text);
    fill: var(--teal-text);
  }
  .app-text-verify {
    color: var(--verify-text);
    fill: var(--verify-text);
  }
  .app-text-yellow {
    color: var(--yellow-text);
    fill: var(--yellow-text);
  }
  .app-text-zinc {
    color: var(--zinc-text);
    fill: var(--zinc-text);
  }
  .app-fill-amber {
    fill: var(--amber-fill);
  }
  .app-fill-blue {
    fill: var(--blue-fill);
  }
  .app-fill-blush {
    fill: var(--blush-fill);
  }
  .app-fill-brown {
    fill: var(--brown-fill);
  }
  .app-fill-caution {
    fill: var(--caution-fill);
  }
  .app-fill-coral {
    fill: var(--coral-fill);
  }
  .app-fill-cyan {
    fill: var(--cyan-fill);
  }
  .app-fill-earth {
    fill: var(--earth-fill);
  }
  .app-fill-emerald {
    fill: var(--emerald-fill);
  }
  .app-fill-experiment {
    fill: var(--experiment-fill);
  }
  .app-fill-formula {
    fill: var(--formula-fill);
  }
  .app-fill-gray {
    fill: var(--gray-fill);
  }
  .app-fill-green {
    fill: var(--green-fill);
  }
  .app-fill-indigo {
    fill: var(--indigo-fill);
  }
  .app-fill-mist {
    fill: var(--mist-fill);
  }
  .app-fill-negative {
    fill: var(--negative-fill);
  }
  .app-fill-olive {
    fill: var(--olive-fill);
  }
  .app-fill-orange {
    fill: var(--orange-fill);
  }
  .app-fill-origin {
    fill: var(--origin-fill);
  }
  .app-fill-positive {
    fill: var(--positive-fill);
  }
  .app-fill-primary {
    fill: var(--primary-fill);
  }
  .app-fill-primary-strong {
    fill: var(--primary-strong-fill);
  }
  .app-fill-procedural {
    fill: var(--procedural-fill);
  }
  .app-fill-purple {
    fill: var(--purple-fill);
  }
  .app-fill-red {
    fill: var(--red-fill);
  }
  .app-fill-reference {
    fill: var(--reference-fill);
  }
  .app-fill-rose {
    fill: var(--rose-fill);
  }
  .app-fill-sage {
    fill: var(--sage-fill);
  }
  .app-fill-sky {
    fill: var(--sky-fill);
  }
  .app-fill-slate {
    fill: var(--slate-fill);
  }
  .app-fill-stone {
    fill: var(--stone-fill);
  }
  .app-fill-structural {
    fill: var(--structural-fill);
  }
  .app-fill-taupe {
    fill: var(--taupe-fill);
  }
  .app-fill-teal {
    fill: var(--teal-fill);
  }
  .app-fill-verify {
    fill: var(--verify-fill);
  }
  .app-fill-yellow {
    fill: var(--yellow-fill);
  }
  .app-fill-zinc {
    fill: var(--zinc-fill);
  }
  .app-stroke-amber {
    stroke: var(--amber-stroke);
  }
  .app-stroke-blue {
    stroke: var(--blue-stroke);
  }
  .app-stroke-blush {
    stroke: var(--blush-stroke);
  }
  .app-stroke-brown {
    stroke: var(--brown-stroke);
  }
  .app-stroke-caution {
    stroke: var(--caution-stroke);
  }
  .app-stroke-coral {
    stroke: var(--coral-stroke);
  }
  .app-stroke-cyan {
    stroke: var(--cyan-stroke);
  }
  .app-stroke-earth {
    stroke: var(--earth-stroke);
  }
  .app-stroke-emerald {
    stroke: var(--emerald-stroke);
  }
  .app-stroke-experiment {
    stroke: var(--experiment-stroke);
  }
  .app-stroke-formula {
    stroke: var(--formula-stroke);
  }
  .app-stroke-gray {
    stroke: var(--gray-stroke);
  }
  .app-stroke-green {
    stroke: var(--green-stroke);
  }
  .app-stroke-indigo {
    stroke: var(--indigo-stroke);
  }
  .app-stroke-mist {
    stroke: var(--mist-stroke);
  }
  .app-stroke-negative {
    stroke: var(--negative-stroke);
  }
  .app-stroke-olive {
    stroke: var(--olive-stroke);
  }
  .app-stroke-orange {
    stroke: var(--orange-stroke);
  }
  .app-stroke-origin {
    stroke: var(--origin-stroke);
  }
  .app-stroke-positive {
    stroke: var(--positive-stroke);
  }
  .app-stroke-primary {
    stroke: var(--primary-stroke);
  }
  .app-stroke-primary-strong {
    stroke: var(--primary-strong-stroke);
  }
  .app-stroke-procedural {
    stroke: var(--procedural-stroke);
  }
  .app-stroke-purple {
    stroke: var(--purple-stroke);
  }
  .app-stroke-red {
    stroke: var(--red-stroke);
  }
  .app-stroke-reference {
    stroke: var(--reference-stroke);
  }
  .app-stroke-rose {
    stroke: var(--rose-stroke);
  }
  .app-stroke-sage {
    stroke: var(--sage-stroke);
  }
  .app-stroke-sky {
    stroke: var(--sky-stroke);
  }
  .app-stroke-slate {
    stroke: var(--slate-stroke);
  }
  .app-stroke-stone {
    stroke: var(--stone-stroke);
  }
  .app-stroke-structural {
    stroke: var(--structural-stroke);
  }
  .app-stroke-taupe {
    stroke: var(--taupe-stroke);
  }
  .app-stroke-teal {
    stroke: var(--teal-stroke);
  }
  .app-stroke-verify {
    stroke: var(--verify-stroke);
  }
  .app-stroke-yellow {
    stroke: var(--yellow-stroke);
  }
  .app-stroke-zinc {
    stroke: var(--zinc-stroke);
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-base {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-2xs {
    font-size: 0.71875rem;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-katex {
    font-size: 1.1rem;
  }
  .text-xs1 {
    font-size: 0.78125rem;
  }
  .text-xs2 {
    font-size: 13px;
  }
  .text-xs3 {
    font-size: 0.84375rem;
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .tb-warn {
    color: var(--caution-text);
    font-weight: 500;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-mute {
    color: var(--mute);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-sky-500 {
    color: var(--color-sky-500);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-dashed {
    text-decoration-style: dashed;
  }
  .decoration-2 {
    text-decoration-thickness: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .underline-offset-8 {
    text-underline-offset: 8px;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-gray-300 {
    --tw-ring-color: var(--color-gray-300);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .contain-layout {
    --tw-contain-layout: layout;
    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
  }
  .contain-paint {
    --tw-contain-paint: paint;
    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
  }
  .contain-style {
    --tw-contain-style: style;
    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
  }
  .content-box-amber {
    --accent: var(--amber-text);
    --accent-bg: var(--amber-bg);
    --accent-border: var(--amber-border);
    --accent-mark: var(--amber-mark);
  }
  .content-box-blue {
    --accent: var(--blue-text);
    --accent-bg: var(--blue-bg);
    --accent-border: var(--blue-border);
    --accent-mark: var(--blue-mark);
  }
  .content-box-blush {
    --accent: var(--blush-text);
    --accent-bg: var(--blush-bg);
    --accent-border: var(--blush-border);
    --accent-mark: var(--blush-mark);
  }
  .content-box-brown {
    --accent: var(--brown-text);
    --accent-bg: var(--brown-bg);
    --accent-border: var(--brown-border);
    --accent-mark: var(--brown-mark);
  }
  .content-box-caution {
    --accent: var(--caution-text);
    --accent-bg: var(--caution-bg);
    --accent-border: var(--caution-border);
    --accent-mark: var(--caution-mark);
  }
  .content-box-coral {
    --accent: var(--coral-text);
    --accent-bg: var(--coral-bg);
    --accent-border: var(--coral-border);
    --accent-mark: var(--coral-mark);
  }
  .content-box-cyan {
    --accent: var(--cyan-text);
    --accent-bg: var(--cyan-bg);
    --accent-border: var(--cyan-border);
    --accent-mark: var(--cyan-mark);
  }
  .content-box-earth {
    --accent: var(--earth-text);
    --accent-bg: var(--earth-bg);
    --accent-border: var(--earth-border);
    --accent-mark: var(--earth-mark);
  }
  .content-box-emerald {
    --accent: var(--emerald-text);
    --accent-bg: var(--emerald-bg);
    --accent-border: var(--emerald-border);
    --accent-mark: var(--emerald-mark);
  }
  .content-box-experiment {
    --accent: var(--experiment-text);
    --accent-bg: var(--experiment-bg);
    --accent-border: var(--experiment-border);
    --accent-mark: var(--experiment-mark);
  }
  .content-box-formula {
    --accent: var(--formula-text);
    --accent-bg: var(--formula-bg);
    --accent-border: var(--formula-border);
    --accent-mark: var(--formula-mark);
  }
  .content-box-gray {
    --accent: var(--gray-text);
    --accent-bg: var(--gray-bg);
    --accent-border: var(--gray-border);
    --accent-mark: var(--gray-mark);
  }
  .content-box-green {
    --accent: var(--green-text);
    --accent-bg: var(--green-bg);
    --accent-border: var(--green-border);
    --accent-mark: var(--green-mark);
  }
  .content-box-indigo {
    --accent: var(--indigo-text);
    --accent-bg: var(--indigo-bg);
    --accent-border: var(--indigo-border);
    --accent-mark: var(--indigo-mark);
  }
  .content-box-mist {
    --accent: var(--mist-text);
    --accent-bg: var(--mist-bg);
    --accent-border: var(--mist-border);
    --accent-mark: var(--mist-mark);
  }
  .content-box-negative {
    --accent: var(--negative-text);
    --accent-bg: var(--negative-bg);
    --accent-border: var(--negative-border);
    --accent-mark: var(--negative-mark);
  }
  .content-box-olive {
    --accent: var(--olive-text);
    --accent-bg: var(--olive-bg);
    --accent-border: var(--olive-border);
    --accent-mark: var(--olive-mark);
  }
  .content-box-orange {
    --accent: var(--orange-text);
    --accent-bg: var(--orange-bg);
    --accent-border: var(--orange-border);
    --accent-mark: var(--orange-mark);
  }
  .content-box-origin {
    --accent: var(--origin-text);
    --accent-bg: var(--origin-bg);
    --accent-border: var(--origin-border);
    --accent-mark: var(--origin-mark);
  }
  .content-box-positive {
    --accent: var(--positive-text);
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
    --accent-mark: var(--positive-mark);
  }
  .content-box-primary {
    --accent: var(--primary-text);
    --accent-bg: var(--primary-bg);
    --accent-border: var(--primary-border);
    --accent-mark: var(--primary-mark);
  }
  .content-box-primary-strong {
    --accent: var(--primary-strong-text);
    --accent-bg: var(--primary-strong-bg);
    --accent-border: var(--primary-strong-border);
    --accent-mark: var(--primary-strong-mark);
  }
  .content-box-procedural {
    --accent: var(--procedural-text);
    --accent-bg: var(--procedural-bg);
    --accent-border: var(--procedural-border);
    --accent-mark: var(--procedural-mark);
  }
  .content-box-purple {
    --accent: var(--purple-text);
    --accent-bg: var(--purple-bg);
    --accent-border: var(--purple-border);
    --accent-mark: var(--purple-mark);
  }
  .content-box-red {
    --accent: var(--red-text);
    --accent-bg: var(--red-bg);
    --accent-border: var(--red-border);
    --accent-mark: var(--red-mark);
  }
  .content-box-reference {
    --accent: var(--reference-text);
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
    --accent-mark: var(--reference-mark);
  }
  .content-box-rose {
    --accent: var(--rose-text);
    --accent-bg: var(--rose-bg);
    --accent-border: var(--rose-border);
    --accent-mark: var(--rose-mark);
  }
  .content-box-sage {
    --accent: var(--sage-text);
    --accent-bg: var(--sage-bg);
    --accent-border: var(--sage-border);
    --accent-mark: var(--sage-mark);
  }
  .content-box-sky {
    --accent: var(--sky-text);
    --accent-bg: var(--sky-bg);
    --accent-border: var(--sky-border);
    --accent-mark: var(--sky-mark);
  }
  .content-box-slate {
    --accent: var(--slate-text);
    --accent-bg: var(--slate-bg);
    --accent-border: var(--slate-border);
    --accent-mark: var(--slate-mark);
  }
  .content-box-stone {
    --accent: var(--stone-text);
    --accent-bg: var(--stone-bg);
    --accent-border: var(--stone-border);
    --accent-mark: var(--stone-mark);
  }
  .content-box-structural {
    --accent: var(--structural-text);
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
    --accent-mark: var(--structural-mark);
  }
  .content-box-taupe {
    --accent: var(--taupe-text);
    --accent-bg: var(--taupe-bg);
    --accent-border: var(--taupe-border);
    --accent-mark: var(--taupe-mark);
  }
  .content-box-teal {
    --accent: var(--teal-text);
    --accent-bg: var(--teal-bg);
    --accent-border: var(--teal-border);
    --accent-mark: var(--teal-mark);
  }
  .content-box-verify {
    --accent: var(--verify-text);
    --accent-bg: var(--verify-bg);
    --accent-border: var(--verify-border);
    --accent-mark: var(--verify-mark);
  }
  .content-box-yellow {
    --accent: var(--yellow-text);
    --accent-bg: var(--yellow-bg);
    --accent-border: var(--yellow-border);
    --accent-mark: var(--yellow-mark);
  }
  .content-box-zinc {
    --accent: var(--zinc-text);
    --accent-bg: var(--zinc-bg);
    --accent-border: var(--zinc-border);
    --accent-mark: var(--zinc-mark);
  }
  .info-card-amber {
    --accent: var(--amber-text);
    --accent-bg: var(--amber-bg);
    --accent-border: var(--amber-border);
    --accent-mark: var(--amber-mark);
  }
  .info-card-blue {
    --accent: var(--blue-text);
    --accent-bg: var(--blue-bg);
    --accent-border: var(--blue-border);
    --accent-mark: var(--blue-mark);
  }
  .info-card-blush {
    --accent: var(--blush-text);
    --accent-bg: var(--blush-bg);
    --accent-border: var(--blush-border);
    --accent-mark: var(--blush-mark);
  }
  .info-card-brown {
    --accent: var(--brown-text);
    --accent-bg: var(--brown-bg);
    --accent-border: var(--brown-border);
    --accent-mark: var(--brown-mark);
  }
  .info-card-caution {
    --accent: var(--caution-text);
    --accent-bg: var(--caution-bg);
    --accent-border: var(--caution-border);
    --accent-mark: var(--caution-mark);
  }
  .info-card-coral {
    --accent: var(--coral-text);
    --accent-bg: var(--coral-bg);
    --accent-border: var(--coral-border);
    --accent-mark: var(--coral-mark);
  }
  .info-card-cyan {
    --accent: var(--cyan-text);
    --accent-bg: var(--cyan-bg);
    --accent-border: var(--cyan-border);
    --accent-mark: var(--cyan-mark);
  }
  .info-card-earth {
    --accent: var(--earth-text);
    --accent-bg: var(--earth-bg);
    --accent-border: var(--earth-border);
    --accent-mark: var(--earth-mark);
  }
  .info-card-emerald {
    --accent: var(--emerald-text);
    --accent-bg: var(--emerald-bg);
    --accent-border: var(--emerald-border);
    --accent-mark: var(--emerald-mark);
  }
  .info-card-experiment {
    --accent: var(--experiment-text);
    --accent-bg: var(--experiment-bg);
    --accent-border: var(--experiment-border);
    --accent-mark: var(--experiment-mark);
  }
  .info-card-formula {
    --accent: var(--formula-text);
    --accent-bg: var(--formula-bg);
    --accent-border: var(--formula-border);
    --accent-mark: var(--formula-mark);
  }
  .info-card-gray {
    --accent: var(--gray-text);
    --accent-bg: var(--gray-bg);
    --accent-border: var(--gray-border);
    --accent-mark: var(--gray-mark);
  }
  .info-card-green {
    --accent: var(--green-text);
    --accent-bg: var(--green-bg);
    --accent-border: var(--green-border);
    --accent-mark: var(--green-mark);
  }
  .info-card-indigo {
    --accent: var(--indigo-text);
    --accent-bg: var(--indigo-bg);
    --accent-border: var(--indigo-border);
    --accent-mark: var(--indigo-mark);
  }
  .info-card-mist {
    --accent: var(--mist-text);
    --accent-bg: var(--mist-bg);
    --accent-border: var(--mist-border);
    --accent-mark: var(--mist-mark);
  }
  .info-card-negative {
    --accent: var(--negative-text);
    --accent-bg: var(--negative-bg);
    --accent-border: var(--negative-border);
    --accent-mark: var(--negative-mark);
  }
  .info-card-olive {
    --accent: var(--olive-text);
    --accent-bg: var(--olive-bg);
    --accent-border: var(--olive-border);
    --accent-mark: var(--olive-mark);
  }
  .info-card-orange {
    --accent: var(--orange-text);
    --accent-bg: var(--orange-bg);
    --accent-border: var(--orange-border);
    --accent-mark: var(--orange-mark);
  }
  .info-card-origin {
    --accent: var(--origin-text);
    --accent-bg: var(--origin-bg);
    --accent-border: var(--origin-border);
    --accent-mark: var(--origin-mark);
  }
  .info-card-positive {
    --accent: var(--positive-text);
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
    --accent-mark: var(--positive-mark);
  }
  .info-card-primary {
    --accent: var(--primary-text);
    --accent-bg: var(--primary-bg);
    --accent-border: var(--primary-border);
    --accent-mark: var(--primary-mark);
  }
  .info-card-primary-strong {
    --accent: var(--primary-strong-text);
    --accent-bg: var(--primary-strong-bg);
    --accent-border: var(--primary-strong-border);
    --accent-mark: var(--primary-strong-mark);
  }
  .info-card-procedural {
    --accent: var(--procedural-text);
    --accent-bg: var(--procedural-bg);
    --accent-border: var(--procedural-border);
    --accent-mark: var(--procedural-mark);
  }
  .info-card-purple {
    --accent: var(--purple-text);
    --accent-bg: var(--purple-bg);
    --accent-border: var(--purple-border);
    --accent-mark: var(--purple-mark);
  }
  .info-card-red {
    --accent: var(--red-text);
    --accent-bg: var(--red-bg);
    --accent-border: var(--red-border);
    --accent-mark: var(--red-mark);
  }
  .info-card-reference {
    --accent: var(--reference-text);
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
    --accent-mark: var(--reference-mark);
  }
  .info-card-rose {
    --accent: var(--rose-text);
    --accent-bg: var(--rose-bg);
    --accent-border: var(--rose-border);
    --accent-mark: var(--rose-mark);
  }
  .info-card-sage {
    --accent: var(--sage-text);
    --accent-bg: var(--sage-bg);
    --accent-border: var(--sage-border);
    --accent-mark: var(--sage-mark);
  }
  .info-card-sky {
    --accent: var(--sky-text);
    --accent-bg: var(--sky-bg);
    --accent-border: var(--sky-border);
    --accent-mark: var(--sky-mark);
  }
  .info-card-slate {
    --accent: var(--slate-text);
    --accent-bg: var(--slate-bg);
    --accent-border: var(--slate-border);
    --accent-mark: var(--slate-mark);
  }
  .info-card-stone {
    --accent: var(--stone-text);
    --accent-bg: var(--stone-bg);
    --accent-border: var(--stone-border);
    --accent-mark: var(--stone-mark);
  }
  .info-card-structural {
    --accent: var(--structural-text);
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
    --accent-mark: var(--structural-mark);
  }
  .info-card-taupe {
    --accent: var(--taupe-text);
    --accent-bg: var(--taupe-bg);
    --accent-border: var(--taupe-border);
    --accent-mark: var(--taupe-mark);
  }
  .info-card-teal {
    --accent: var(--teal-text);
    --accent-bg: var(--teal-bg);
    --accent-border: var(--teal-border);
    --accent-mark: var(--teal-mark);
  }
  .info-card-verify {
    --accent: var(--verify-text);
    --accent-bg: var(--verify-bg);
    --accent-border: var(--verify-border);
    --accent-mark: var(--verify-mark);
  }
  .info-card-yellow {
    --accent: var(--yellow-text);
    --accent-bg: var(--yellow-bg);
    --accent-border: var(--yellow-border);
    --accent-mark: var(--yellow-mark);
  }
  .info-card-zinc {
    --accent: var(--zinc-text);
    --accent-bg: var(--zinc-bg);
    --accent-border: var(--zinc-border);
    --accent-mark: var(--zinc-mark);
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .peer-hover\:opacity-100 {
    &:is(:where(.peer):hover ~ *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .peer-focus\:opacity-100 {
    &:is(:where(.peer):focus ~ *) {
      opacity: 100%;
    }
  }
  .hover\:bg-indigo-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-indigo-700);
      }
    }
  }
  .hover\:app-text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--primary-text);
        fill: var(--primary-text);
      }
    }
  }
  .hover\:text-gray-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-500);
      }
    }
  }
  .hover\:text-indigo-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-indigo-800);
      }
    }
  }
  .hover\:text-red-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-900);
      }
    }
  }
  .hover\:text-sky-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-600);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .focus\:border-b-highlight {
    &:focus {
      border-bottom-color: var(--highlight);
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-current {
    &:focus {
      --tw-ring-color: currentcolor;
    }
  }
  .focus\:ring-highlight {
    &:focus {
      --tw-ring-color: var(--highlight);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:outline-hidden {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:mx-0 {
    @media (width >= 640px) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:my-8 {
    @media (width >= 640px) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-0 {
    @media (width >= 640px) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .sm\:mt-4 {
    @media (width >= 640px) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .sm\:ml-4 {
    @media (width >= 640px) {
      margin-left: calc(var(--spacing) * 4);
    }
  }
  .sm\:block {
    @media (width >= 640px) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 640px) {
      display: flex;
    }
  }
  .sm\:inline-block {
    @media (width >= 640px) {
      display: inline-block;
    }
  }
  .sm\:h-10 {
    @media (width >= 640px) {
      height: calc(var(--spacing) * 10);
    }
  }
  .sm\:w-8 {
    @media (width >= 640px) {
      width: calc(var(--spacing) * 8);
    }
  }
  .sm\:w-10 {
    @media (width >= 640px) {
      width: calc(var(--spacing) * 10);
    }
  }
  .sm\:w-full {
    @media (width >= 640px) {
      width: 100%;
    }
  }
  .sm\:max-w-lg {
    @media (width >= 640px) {
      max-width: var(--container-lg);
    }
  }
  .sm\:max-w-md {
    @media (width >= 640px) {
      max-width: var(--container-md);
    }
  }
  .sm\:grid-cols-1 {
    @media (width >= 640px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 640px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-nowrap {
    @media (width >= 640px) {
      flex-wrap: nowrap;
    }
  }
  .sm\:items-baseline {
    @media (width >= 640px) {
      align-items: baseline;
    }
  }
  .sm\:items-start {
    @media (width >= 640px) {
      align-items: flex-start;
    }
  }
  .sm\:justify-end {
    @media (width >= 640px) {
      justify-content: flex-end;
    }
  }
  .sm\:p-0 {
    @media (width >= 640px) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .sm\:p-6 {
    @media (width >= 640px) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-left {
    @media (width >= 640px) {
      text-align: left;
    }
  }
  .md\:mt-0 {
    @media (width >= 768px) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:block {
    @media (width >= 768px) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 768px) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 768px) {
      display: none;
    }
  }
  .md\:w-38 {
    @media (width >= 768px) {
      width: calc(var(--spacing) * 38);
    }
  }
  .md\:max-w-2xl {
    @media (width >= 768px) {
      max-width: var(--container-2xl);
    }
  }
  .md\:min-w-\[230px\] {
    @media (width >= 768px) {
      min-width: 230px;
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 768px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 768px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:flex-col {
    @media (width >= 768px) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 768px) {
      flex-direction: row;
    }
  }
  .md\:flex-nowrap {
    @media (width >= 768px) {
      flex-wrap: nowrap;
    }
  }
  .md\:gap-0 {
    @media (width >= 768px) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .md\:rounded-none {
    @media (width >= 768px) {
      border-radius: 0;
    }
  }
  .md\:border-r {
    @media (width >= 768px) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .md\:px-0 {
    @media (width >= 768px) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:py-5 {
    @media (width >= 768px) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .md\:whitespace-normal {
    @media (width >= 768px) {
      white-space: normal;
    }
  }
  .lg\:block {
    @media (width >= 1024px) {
      display: block;
    }
  }
  .lg\:max-w-3xl {
    @media (width >= 1024px) {
      max-width: var(--container-3xl);
    }
  }
  .lg\:px-4 {
    @media (width >= 1024px) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .xl\:fixed {
    @media (width >= 1280px) {
      position: fixed;
    }
  }
  .xl\:top-16 {
    @media (width >= 1280px) {
      top: calc(var(--spacing) * 16);
    }
  }
  .xl\:right-0 {
    @media (width >= 1280px) {
      right: calc(var(--spacing) * 0);
    }
  }
  .xl\:w-72 {
    @media (width >= 1280px) {
      width: 18rem;
    }
  }
}
:root {
  --color-olive-50: #f7f8f0;
  --color-olive-100: #eaedd6;
  --color-olive-200: #d5dbb0;
  --color-olive-300: #b8c47e;
  --color-olive-400: #9aab56;
  --color-olive-500: #7d8f3b;
  --color-olive-600: #62712e;
  --color-olive-700: #4b5724;
  --color-olive-800: #3b4420;
  --color-olive-900: #2c331a;
  --color-taupe-50: #f9f7f5;
  --color-taupe-100: #efeae3;
  --color-taupe-200: #dcd2c5;
  --color-taupe-300: #bfb19e;
  --color-taupe-400: #a09078;
  --color-taupe-500: #7e7767;
  --color-taupe-600: #665e51;
  --color-taupe-700: #504a3f;
  --color-taupe-800: #3d3930;
  --color-taupe-900: #2c2922;
  --color-earth-50: #fbf7ee;
  --color-earth-100: #f4ead4;
  --color-earth-200: #e6d3a8;
  --color-earth-300: #cdb079;
  --color-earth-400: #b08c52;
  --color-earth-500: #8b6c3c;
  --color-earth-600: #6f5630;
  --color-earth-700: #554124;
  --color-earth-800: #41311b;
  --color-earth-900: #2c2113;
  --color-blush-50: #faf5f5;
  --color-blush-100: #f0e0e2;
  --color-blush-200: #e0c4c9;
  --color-blush-300: #c8a0a8;
  --color-blush-400: #ad7c87;
  --color-blush-500: #905f6d;
  --color-blush-600: #714b56;
  --color-blush-700: #573a44;
  --color-blush-800: #422c34;
  --color-blush-900: #2e1f24;
  --color-sage-50: #f5f7ed;
  --color-sage-100: #e7ecd1;
  --color-sage-200: #cdd5a8;
  --color-sage-300: #aeba79;
  --color-sage-400: #8c9a52;
  --color-sage-500: #6f7d3c;
  --color-sage-600: #586330;
  --color-sage-700: #434b25;
  --color-sage-800: #333a1c;
  --color-sage-900: #232813;
  --color-stone-50: #f6f6f6;
  --color-stone-100: #ebebeb;
  --color-stone-200: #d6d6d6;
  --color-stone-300: #b0b0b0;
  --color-stone-400: #8a8a8a;
  --color-stone-500: #797979;
  --color-stone-600: #5f5f5f;
  --color-stone-700: #4a4a4a;
  --color-stone-800: #3a3a3a;
  --color-stone-900: #2a2a2a;
  --color-mist-50: #f0f4f8;
  --color-mist-100: #d9e2ec;
  --color-mist-200: #bcccdc;
  --color-mist-300: #9fb3c8;
  --color-mist-400: #829ab1;
  --color-mist-500: #627d98;
  --color-mist-600: #486581;
  --color-mist-700: #334e68;
  --color-mist-800: #243b53;
  --color-mist-900: #102a43;
  --color-amber-50: #fdf8ec;
  --color-amber-100: #faefc8;
  --color-amber-200: #f5d87e;
  --color-amber-300: #ecba33;
  --color-amber-400: #d99c18;
  --color-amber-500: #bc800a;
  --color-amber-600: #976309;
  --color-amber-700: #734a09;
  --color-amber-800: #543608;
  --color-amber-900: #382407;
  --color-coral-50: #f9f6f5;
  --color-coral-100: #ede8e3;
  --color-coral-200: #d6cac2;
  --color-coral-300: #beb0a6;
  --color-coral-400: #a09080;
  --color-coral-500: #857066;
  --color-coral-600: #6c5a50;
  --color-coral-700: #564640;
  --color-coral-800: #433732;
  --color-coral-900: #342b27;
  --color-brown-50: #f8f4f1;
  --color-brown-100: #efe4dc;
  --color-brown-200: #e0c6b3;
  --color-brown-300: #cba486;
  --color-brown-400: #b5815a;
  --color-brown-500: #8e6443;
  --color-brown-600: #715038;
  --color-brown-700: #583f2d;
  --color-brown-800: #423124;
  --color-brown-900: #2e221a;
  --color-green-50: #f6f9f7;
  --color-green-100: #e9f1ec;
  --color-green-200: #d3e4d9;
  --color-green-300: #b1cdbc;
  --color-green-400: #8ab299;
  --color-green-500: #659a78;
  --color-green-600: #568065;
  --color-green-700: #446450;
  --color-green-800: #364e3f;
  --color-green-900: #26362c;
  --color-emerald-50: #f4fbf8;
  --color-emerald-100: #e3f7f0;
  --color-emerald-200: #c7f0e1;
  --color-emerald-300: #9ae4c9;
  --color-emerald-400: #69d3ac;
  --color-emerald-500: #3fc091;
  --color-emerald-600: #3a9d78;
  --color-emerald-700: #33765d;
  --color-emerald-800: #2b5a49;
  --color-emerald-900: #1f3c32;
  --color-teal-50: #f4fbfa;
  --color-teal-100: #e4f6f5;
  --color-teal-200: #c8efeb;
  --color-teal-300: #9ce2db;
  --color-teal-400: #6cd0c6;
  --color-teal-500: #42bdb0;
  --color-teal-600: #3c9a91;
  --color-teal-700: #34746e;
  --color-teal-800: #2c5954;
  --color-teal-900: #203c39;
  --color-cyan-50: #f4fafb;
  --color-cyan-100: #e4f4f6;
  --color-cyan-200: #c8eaef;
  --color-cyan-300: #9cdae2;
  --color-cyan-400: #6cc5d0;
  --color-cyan-500: #42aebd;
  --color-cyan-600: #3c8f9a;
  --color-cyan-700: #346d74;
  --color-cyan-800: #2c5459;
  --color-cyan-900: #20383c;
  --color-violet-50: #f6f4fb;
  --color-violet-100: #eae4f6;
  --color-violet-200: #d4c9ee;
  --color-violet-300: #b29ee1;
  --color-violet-400: #8b6ece;
  --color-violet-500: #6845ba;
  --color-violet-600: #593e98;
  --color-violet-700: #483673;
  --color-violet-800: #3a2d58;
  --color-violet-900: #29213b;
  --color-purple-50: #f8f4fb;
  --color-purple-100: #eee4f6;
  --color-purple-200: #ddc8ef;
  --color-purple-300: #c39ce2;
  --color-purple-400: #a36cd0;
  --color-purple-500: #8642bd;
  --color-purple-600: #703c9a;
  --color-purple-700: #573474;
  --color-purple-800: #452c59;
  --color-purple-900: #2f203c;
  --color-rose-50: #fbf4f5;
  --color-rose-100: #f6e4e8;
  --color-rose-200: #eec9d0;
  --color-rose-300: #e19eab;
  --color-rose-400: #ce6e81;
  --color-rose-500: #ba455d;
  --color-rose-600: #983e50;
  --color-rose-700: #733642;
  --color-rose-800: #582d35;
  --color-rose-900: #3b2126;
  --color-red-50: #fbf5f4;
  --color-red-100: #f6e6e4;
  --color-red-200: #eecbc9;
  --color-red-300: #e1a29e;
  --color-red-400: #ce756e;
  --color-red-500: #ba4d45;
  --color-red-600: #98443e;
  --color-red-700: #733a36;
  --color-red-800: #58302d;
  --color-red-900: #3b2321;
  --color-indigo-muted-50: #f4f4fb;
  --color-indigo-muted-100: #e4e4f6;
  --color-indigo-muted-200: #c9c9ee;
  --color-indigo-muted-300: #9e9ee1;
  --color-indigo-muted-400: #6e6ece;
  --color-indigo-muted-500: #4545ba;
  --color-indigo-muted-600: #3e3e98;
  --color-indigo-muted-700: #363673;
  --color-indigo-muted-800: #2d2d58;
  --color-indigo-muted-900: #21213b;
  --color-indigo-soft-50: #f6f6f9;
  --color-indigo-soft-100: #eaeaf1;
  --color-indigo-soft-200: #d4d4e3;
  --color-indigo-soft-300: #b3b3cc;
  --color-indigo-soft-400: #8c8cb1;
  --color-indigo-soft-500: #676798;
  --color-indigo-soft-600: #58587e;
  --color-indigo-soft-700: #464663;
  --color-indigo-soft-800: #38384d;
  --color-indigo-soft-900: #272735;
  --color-green-muted-50: #f4fbf6;
  --color-green-muted-100: #e3f7eb;
  --color-green-muted-200: #c7f0d6;
  --color-green-muted-300: #9ae4b5;
  --color-green-muted-400: #69d390;
  --color-green-muted-500: #3fc06e;
  --color-green-muted-600: #3a9d5e;
  --color-green-muted-700: #33764b;
  --color-green-muted-800: #2b5a3c;
  --color-green-muted-900: #1f3c2a;
  --color-green-soft-50: #f6f9f7;
  --color-green-soft-100: #e9f1ec;
  --color-green-soft-200: #d3e4d9;
  --color-green-soft-300: #b1cdbc;
  --color-green-soft-400: #8ab299;
  --color-green-soft-500: #659a78;
  --color-green-soft-600: #568065;
  --color-green-soft-700: #446450;
  --color-green-soft-800: #364e3f;
  --color-green-soft-900: #26362c;
  --color-red-muted-50: #fbf5f4;
  --color-red-muted-100: #f6e6e5;
  --color-red-muted-200: #edccc9;
  --color-red-muted-300: #e0a39f;
  --color-red-muted-400: #cc7670;
  --color-red-muted-500: #b84f47;
  --color-red-muted-600: #964640;
  --color-red-muted-700: #723b37;
  --color-red-muted-800: #57302e;
  --color-red-muted-900: #3b2321;
  --color-red-soft-50: #f8f6f6;
  --color-red-soft-100: #f0eaea;
  --color-red-soft-200: #e3d5d4;
  --color-red-soft-300: #ccb5b3;
  --color-red-soft-400: #b08f8c;
  --color-red-soft-500: #976b68;
  --color-red-soft-600: #7e5b58;
  --color-red-soft-700: #624846;
  --color-red-soft-800: #4d3938;
  --color-red-soft-900: #352827;
  --color-amber-muted-50: #fbf8f4;
  --color-amber-muted-100: #f7f0e3;
  --color-amber-muted-200: #f1e1c6;
  --color-amber-muted-300: #e6ca99;
  --color-amber-muted-400: #d6ad67;
  --color-amber-muted-500: #c3913c;
  --color-amber-muted-600: #9f7937;
  --color-amber-muted-700: #775e31;
  --color-amber-muted-800: #5b492a;
  --color-amber-muted-900: #3d321f;
  --color-amber-soft-50: #f9f8f6;
  --color-amber-soft-100: #f1eee9;
  --color-amber-soft-200: #e4ded3;
  --color-amber-soft-300: #cec3b1;
  --color-amber-soft-400: #b3a489;
  --color-amber-soft-500: #9c8763;
  --color-amber-soft-600: #817155;
  --color-amber-soft-700: #655943;
  --color-amber-soft-800: #4f4636;
  --color-amber-soft-900: #363026;
}
.theme-light {
  --paper: #fdfcfb;
  --paper-2: #f5f3f0;
  --paper-over: #fff;
  --ink: #1a1a1e;
  --ink-2: #45464d;
  --ink-3: #6c6d75;
  --rule: #e7e4df;
  --rule-2: #cecac3;
  --mark: #4f46c4;
  --mark-on: #fff;
  --mark-hover: #3d35a8;
  --mark-soft: #efedfb;
  --shadow-over: 0 12px 32px -8px rgb(26 26 30 / 18%), 0 0 0 1px rgb(26 26 30 / 6%);
  --h-note: #35618f;
  --h-why: #5a4fbd;
  --h-warn: #94620a;
  --h-good: #2c7355;
  --h-bad: #a3423b;
  --tint: 5%;
  --legend-1: #2f6ea8;
  --legend-2: #7a4fa8;
  --legend-3: #2b7f78;
  background-color: var(--paper);
  color: var(--ink);
  --reader-bg: var(--paper);
  --reader-text: var(--ink);
  --mute: var(--ink-3);
  --mute-light: var(--ink-3);
  --mute-hover: var(--ink-2);
  --mute-subtle: var(--rule);
  --mute-border: var(--rule);
  --heading: var(--ink);
  --links: var(--mark);
  --content-border: var(--rule);
  --content-title: var(--ink);
  --line-color: var(--rule-2);
  --highlight: var(--mark);
  --highlight-action: var(--mark);
  --highlight-green: var(--h-good);
  --highlight-text-bg: var(--primary-bg);
  --red-base: var(--color-rose-600);
  --red-text: var(--color-rose-800);
  --red-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --red-stroke: var(--color-rose-600);
  --red-fill: var(--color-rose-200);
  --red-solid: var(--color-rose-800);
  --red-mark: var(--color-rose-500);
  --orange-base: var(--color-amber-600);
  --orange-text: var(--color-amber-800);
  --orange-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --orange-stroke: var(--color-amber-600);
  --orange-fill: var(--color-amber-200);
  --orange-solid: var(--color-amber-800);
  --orange-mark: var(--color-amber-500);
  --yellow-base: var(--color-amber-600);
  --yellow-text: var(--color-amber-800);
  --yellow-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --yellow-stroke: var(--color-amber-600);
  --yellow-fill: var(--color-amber-200);
  --yellow-solid: var(--color-amber-800);
  --yellow-mark: var(--color-amber-500);
  --blue-base: var(--color-blue-600);
  --blue-text: var(--color-blue-800);
  --blue-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --blue-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --blue-stroke: var(--color-blue-600);
  --blue-fill: var(--color-blue-200);
  --blue-solid: var(--color-blue-800);
  --blue-mark: var(--color-blue-500);
  --cyan-base: var(--color-blue-600);
  --cyan-text: var(--color-blue-800);
  --cyan-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --cyan-stroke: var(--color-blue-600);
  --cyan-fill: var(--color-blue-200);
  --cyan-solid: var(--color-blue-800);
  --cyan-mark: var(--color-blue-500);
  --green-base: var(--color-emerald-600);
  --green-text: var(--color-emerald-800);
  --green-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --green-stroke: var(--color-emerald-600);
  --green-fill: var(--color-emerald-200);
  --green-solid: var(--color-emerald-800);
  --green-mark: var(--color-emerald-500);
  --amber-base: var(--color-amber-600);
  --amber-text: var(--color-amber-800);
  --amber-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --amber-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --amber-stroke: var(--color-amber-600);
  --amber-fill: var(--color-amber-200);
  --amber-solid: var(--color-amber-800);
  --amber-mark: var(--color-amber-500);
  --emerald-base: var(--color-emerald-600);
  --emerald-text: var(--color-emerald-800);
  --emerald-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --emerald-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --emerald-stroke: var(--color-emerald-600);
  --emerald-fill: var(--color-emerald-200);
  --emerald-solid: var(--color-emerald-800);
  --emerald-mark: var(--color-emerald-500);
  --teal-base: var(--color-emerald-600);
  --teal-text: var(--color-emerald-800);
  --teal-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --teal-stroke: var(--color-emerald-600);
  --teal-fill: var(--color-emerald-200);
  --teal-solid: var(--color-emerald-800);
  --teal-mark: var(--color-emerald-500);
  --sky-base: var(--color-blue-600);
  --sky-text: var(--color-blue-800);
  --sky-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --sky-stroke: var(--color-blue-600);
  --sky-fill: var(--color-blue-200);
  --sky-solid: var(--color-blue-800);
  --sky-mark: var(--color-blue-500);
  --indigo-base: var(--color-indigo-600);
  --indigo-text: var(--color-indigo-800);
  --indigo-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --indigo-border: color-mix(in srgb, oklch(39.8% 0.195 277.366) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-border: color-mix(in srgb, var(--color-indigo-800) 15%, transparent);
  }
  --indigo-stroke: var(--color-indigo-600);
  --indigo-fill: var(--color-indigo-200);
  --indigo-solid: var(--color-indigo-800);
  --indigo-mark: var(--color-indigo-500);
  --purple-base: var(--color-indigo-600);
  --purple-text: var(--color-indigo-800);
  --purple-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(39.8% 0.195 277.366) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-indigo-800) 15%, transparent);
  }
  --purple-stroke: var(--color-indigo-600);
  --purple-fill: var(--color-indigo-200);
  --purple-solid: var(--color-indigo-800);
  --purple-mark: var(--color-indigo-500);
  --rose-base: var(--color-rose-600);
  --rose-text: var(--color-rose-800);
  --rose-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --rose-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --rose-stroke: var(--color-rose-600);
  --rose-fill: var(--color-rose-200);
  --rose-solid: var(--color-rose-800);
  --rose-mark: var(--color-rose-500);
  --slate-base: var(--color-gray-600);
  --slate-text: var(--color-gray-800);
  --slate-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --slate-stroke: var(--color-gray-600);
  --slate-fill: var(--color-gray-200);
  --slate-solid: var(--color-gray-800);
  --slate-mark: var(--color-gray-500);
  --zinc-base: var(--color-gray-600);
  --zinc-text: var(--color-gray-800);
  --zinc-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --zinc-stroke: var(--color-gray-600);
  --zinc-fill: var(--color-gray-200);
  --zinc-solid: var(--color-gray-800);
  --zinc-mark: var(--color-gray-500);
  --gray-base: var(--color-gray-600);
  --gray-text: var(--color-gray-800);
  --gray-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --gray-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --gray-stroke: var(--color-gray-600);
  --gray-fill: var(--color-gray-200);
  --gray-solid: var(--color-gray-800);
  --gray-mark: var(--color-gray-500);
  --stone-base: var(--color-gray-600);
  --stone-text: var(--color-gray-800);
  --stone-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --stone-stroke: var(--color-gray-600);
  --stone-fill: var(--color-gray-200);
  --stone-solid: var(--color-gray-800);
  --stone-mark: var(--color-gray-500);
  --olive-base: var(--color-emerald-600);
  --olive-text: var(--color-emerald-800);
  --olive-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --olive-stroke: var(--color-emerald-600);
  --olive-fill: var(--color-emerald-200);
  --olive-solid: var(--color-emerald-800);
  --olive-mark: var(--color-emerald-500);
  --taupe-base: var(--color-gray-600);
  --taupe-text: var(--color-gray-800);
  --taupe-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --taupe-stroke: var(--color-gray-600);
  --taupe-fill: var(--color-gray-200);
  --taupe-solid: var(--color-gray-800);
  --taupe-mark: var(--color-gray-500);
  --mist-base: var(--color-gray-600);
  --mist-text: var(--color-gray-800);
  --mist-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --mist-stroke: var(--color-gray-600);
  --mist-fill: var(--color-gray-200);
  --mist-solid: var(--color-gray-800);
  --mist-mark: var(--color-gray-500);
  --coral-base: var(--color-rose-600);
  --coral-text: var(--color-rose-800);
  --coral-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --coral-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --coral-stroke: var(--color-rose-600);
  --coral-fill: var(--color-rose-200);
  --coral-solid: var(--color-rose-800);
  --coral-mark: var(--color-rose-500);
  --brown-base: var(--color-amber-600);
  --brown-text: var(--color-amber-800);
  --brown-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --brown-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --brown-stroke: var(--color-amber-600);
  --brown-fill: var(--color-amber-200);
  --brown-solid: var(--color-amber-800);
  --brown-mark: var(--color-amber-500);
  --earth-base: var(--color-amber-600);
  --earth-text: var(--color-amber-800);
  --earth-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --earth-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --earth-stroke: var(--color-amber-600);
  --earth-fill: var(--color-amber-200);
  --earth-solid: var(--color-amber-800);
  --earth-mark: var(--color-amber-500);
  --blush-base: var(--color-rose-600);
  --blush-text: var(--color-rose-800);
  --blush-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --blush-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --blush-stroke: var(--color-rose-600);
  --blush-fill: var(--color-rose-200);
  --blush-solid: var(--color-rose-800);
  --blush-mark: var(--color-rose-500);
  --sage-base: var(--color-emerald-600);
  --sage-text: var(--color-emerald-800);
  --sage-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --sage-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --sage-stroke: var(--color-emerald-600);
  --sage-fill: var(--color-emerald-200);
  --sage-solid: var(--color-emerald-800);
  --sage-mark: var(--color-emerald-500);
  --primary-base: var(--color-indigo-700);
  --primary-text: var(--color-indigo-700);
  --primary-bg: var(--color-indigo-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-bg: color-mix(in srgb, var(--color-indigo-soft-50) 60%, transparent);
  }
  --primary-border: var(--color-indigo-soft-200);
  --primary-stroke: var(--color-indigo-soft-600);
  --primary-fill: var(--color-indigo-soft-200);
  --primary-solid: var(--color-indigo-700);
  --primary-mark: var(--color-indigo-600);
  --primary-strong-base: var(--color-indigo-800);
  --primary-strong-text: var(--color-indigo-800);
  --primary-strong-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-strong-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --primary-strong-border: var(--color-indigo-200);
  --primary-strong-stroke: var(--color-indigo-300);
  --primary-strong-fill: var(--color-indigo-200);
  --primary-strong-solid: var(--color-indigo-700);
  --primary-strong-mark: var(--color-indigo-600);
  --structural-base: var(--color-gray-700);
  --structural-text: var(--color-gray-700);
  --structural-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --structural-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --structural-border: var(--color-gray-200);
  --structural-stroke: var(--color-gray-600);
  --structural-fill: var(--color-gray-200);
  --structural-solid: var(--color-gray-700);
  --structural-mark: var(--color-gray-500);
  --reference-base: var(--color-gray-700);
  --reference-text: var(--color-gray-700);
  --reference-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --reference-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --reference-border: var(--color-gray-200);
  --reference-stroke: var(--color-gray-600);
  --reference-fill: var(--color-gray-200);
  --reference-solid: var(--color-gray-700);
  --reference-mark: var(--color-gray-500);
  --procedural-base: var(--color-gray-700);
  --procedural-text: var(--color-gray-700);
  --procedural-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --procedural-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --procedural-border: var(--color-gray-200);
  --procedural-stroke: var(--color-gray-600);
  --procedural-fill: var(--color-gray-200);
  --procedural-solid: var(--color-gray-700);
  --procedural-mark: var(--color-gray-500);
  --origin-base: var(--color-gray-700);
  --origin-text: var(--color-gray-700);
  --origin-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --origin-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --origin-border: var(--color-gray-200);
  --origin-stroke: var(--color-gray-600);
  --origin-fill: var(--color-gray-200);
  --origin-solid: var(--color-gray-700);
  --origin-mark: var(--color-gray-500);
  --formula-base: var(--color-gray-700);
  --formula-text: var(--color-gray-700);
  --formula-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --formula-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --formula-border: var(--color-gray-200);
  --formula-stroke: var(--color-gray-600);
  --formula-fill: var(--color-gray-200);
  --formula-solid: var(--color-gray-700);
  --formula-mark: var(--color-gray-500);
  --experiment-base: var(--color-gray-700);
  --experiment-text: var(--color-gray-700);
  --experiment-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --experiment-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --experiment-border: var(--color-gray-200);
  --experiment-stroke: var(--color-gray-600);
  --experiment-fill: var(--color-gray-200);
  --experiment-solid: var(--color-gray-700);
  --experiment-mark: var(--color-gray-500);
  --caution-base: var(--color-amber-muted-700);
  --caution-text: var(--color-amber-muted-700);
  --caution-bg: var(--color-amber-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --caution-bg: color-mix(in srgb, var(--color-amber-soft-50) 60%, transparent);
  }
  --caution-border: var(--color-amber-soft-200);
  --caution-stroke: var(--color-amber-soft-600);
  --caution-fill: var(--color-amber-soft-200);
  --caution-solid: var(--color-amber-muted-600);
  --caution-mark: var(--color-amber-500);
  --positive-base: var(--color-green-muted-700);
  --positive-text: var(--color-green-muted-700);
  --positive-bg: var(--color-green-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --positive-bg: color-mix(in srgb, var(--color-green-soft-50) 60%, transparent);
  }
  --positive-border: var(--color-green-soft-200);
  --positive-stroke: var(--color-green-soft-600);
  --positive-fill: var(--color-green-soft-200);
  --positive-solid: var(--color-green-muted-600);
  --positive-mark: var(--color-green-500);
  --verify-base: var(--color-green-muted-700);
  --verify-text: var(--color-green-muted-700);
  --verify-bg: var(--color-green-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --verify-bg: color-mix(in srgb, var(--color-green-soft-50) 60%, transparent);
  }
  --verify-border: var(--color-green-soft-200);
  --verify-stroke: var(--color-green-soft-600);
  --verify-fill: var(--color-green-soft-200);
  --verify-solid: var(--color-green-muted-600);
  --verify-mark: var(--color-green-500);
  --negative-base: var(--color-red-700);
  --negative-text: var(--color-red-muted-700);
  --negative-bg: var(--color-red-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --negative-bg: color-mix(in srgb, var(--color-red-soft-50) 60%, transparent);
  }
  --negative-border: var(--color-red-soft-200);
  --negative-stroke: var(--color-red-soft-600);
  --negative-fill: var(--color-red-soft-200);
  --negative-solid: var(--color-red-muted-600);
  --negative-mark: var(--color-red-500);
  .prose {
    --tw-prose-body: var(--ink);
    --tw-prose-headings: var(--ink);
    --tw-prose-links: var(--mark);
    --tw-prose-bold: var(--ink);
    --tw-prose-lead: var(--ink-2);
    --tw-prose-counters: var(--ink-3);
    --tw-prose-bullets: var(--ink-3);
    --tw-prose-hr: var(--rule);
    --tw-prose-quotes: var(--ink-2);
    --tw-prose-quote-borders: var(--rule-2);
  }
  .btn-hover:hover {
    color: var(--mark-hover);
  }
}
.theme-light [data-palette="literal"] {
  --red-base: var(--color-red-600);
  --red-text: var(--color-red-800);
  --red-bg: color-mix(in srgb, oklch(93.6% 0.032 17.717) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-red-100) 60%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(44.4% 0.177 26.899) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-red-800) 15%, transparent);
  }
  --red-stroke: var(--color-red-600);
  --red-fill: var(--color-red-200);
  --red-solid: var(--color-red-800);
  --red-mark: var(--color-red-500);
  --orange-base: var(--color-orange-600);
  --orange-text: var(--color-orange-800);
  --orange-bg: color-mix(in srgb, oklch(95.4% 0.038 75.164) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-orange-100) 60%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(47% 0.157 37.304) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-orange-800) 15%, transparent);
  }
  --orange-stroke: var(--color-orange-600);
  --orange-fill: var(--color-orange-200);
  --orange-solid: var(--color-orange-800);
  --orange-mark: var(--color-orange-500);
  --yellow-base: var(--color-yellow-600);
  --yellow-text: var(--color-yellow-800);
  --yellow-bg: color-mix(in srgb, oklch(97.3% 0.071 103.193) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-yellow-100) 60%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(47.6% 0.114 61.907) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-yellow-800) 15%, transparent);
  }
  --yellow-stroke: var(--color-yellow-600);
  --yellow-fill: var(--color-yellow-200);
  --yellow-solid: var(--color-yellow-800);
  --yellow-mark: var(--color-yellow-500);
  --cyan-base: var(--color-cyan-600);
  --cyan-text: var(--color-cyan-800);
  --cyan-bg: color-mix(in srgb, oklch(95.6% 0.045 203.388) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-cyan-100) 60%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(45% 0.085 224.283) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-cyan-800) 15%, transparent);
  }
  --cyan-stroke: var(--color-cyan-600);
  --cyan-fill: var(--color-cyan-200);
  --cyan-solid: var(--color-cyan-800);
  --cyan-mark: var(--color-cyan-500);
  --green-base: var(--color-green-600);
  --green-text: var(--color-green-800);
  --green-bg: color-mix(in srgb, oklch(96.2% 0.044 156.743) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-green-100) 60%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(44.8% 0.119 151.328) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-green-800) 15%, transparent);
  }
  --green-stroke: var(--color-green-600);
  --green-fill: var(--color-green-200);
  --green-solid: var(--color-green-800);
  --green-mark: var(--color-green-500);
  --teal-base: var(--color-teal-600);
  --teal-text: var(--color-teal-800);
  --teal-bg: color-mix(in srgb, oklch(95.3% 0.051 180.801) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-teal-100) 60%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(43.7% 0.078 188.216) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-teal-800) 15%, transparent);
  }
  --teal-stroke: var(--color-teal-600);
  --teal-fill: var(--color-teal-200);
  --teal-solid: var(--color-teal-800);
  --teal-mark: var(--color-teal-500);
  --sky-base: var(--color-sky-600);
  --sky-text: var(--color-sky-800);
  --sky-bg: color-mix(in srgb, oklch(95.1% 0.026 236.824) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-sky-100) 60%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(44.3% 0.11 240.79) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-sky-800) 15%, transparent);
  }
  --sky-stroke: var(--color-sky-600);
  --sky-fill: var(--color-sky-200);
  --sky-solid: var(--color-sky-800);
  --sky-mark: var(--color-sky-500);
  --purple-base: var(--color-purple-600);
  --purple-text: var(--color-purple-800);
  --purple-bg: color-mix(in srgb, oklch(94.6% 0.033 307.174) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-purple-100) 60%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(43.8% 0.218 303.724) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-purple-800) 15%, transparent);
  }
  --purple-stroke: var(--color-purple-600);
  --purple-fill: var(--color-purple-200);
  --purple-solid: var(--color-purple-800);
  --purple-mark: var(--color-purple-500);
  --slate-base: var(--color-slate-600);
  --slate-text: var(--color-slate-800);
  --slate-bg: color-mix(in srgb, oklch(96.8% 0.007 247.896) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-slate-100) 60%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(27.9% 0.041 260.031) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-slate-800) 15%, transparent);
  }
  --slate-stroke: var(--color-slate-600);
  --slate-fill: var(--color-slate-200);
  --slate-solid: var(--color-slate-800);
  --slate-mark: var(--color-slate-500);
  --zinc-base: var(--color-zinc-600);
  --zinc-text: var(--color-zinc-800);
  --zinc-bg: color-mix(in srgb, oklch(96.7% 0.001 286.375) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-zinc-100) 60%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(27.4% 0.006 286.033) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-zinc-800) 15%, transparent);
  }
  --zinc-stroke: var(--color-zinc-600);
  --zinc-fill: var(--color-zinc-200);
  --zinc-solid: var(--color-zinc-800);
  --zinc-mark: var(--color-zinc-500);
  --stone-base: var(--color-stone-600);
  --stone-text: var(--color-stone-800);
  --stone-bg: color-mix(in srgb, oklch(97% 0.001 106.424) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-stone-100) 60%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(26.8% 0.007 34.298) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-stone-800) 15%, transparent);
  }
  --stone-stroke: var(--color-stone-600);
  --stone-fill: var(--color-stone-200);
  --stone-solid: var(--color-stone-800);
  --stone-mark: var(--color-stone-500);
  --olive-base: var(--color-olive-600);
  --olive-text: var(--color-olive-800);
  --olive-bg: color-mix(in srgb, oklch(96.6% 0.005 106.5) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-olive-100) 60%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(28.6% 0.016 107.4) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-olive-800) 15%, transparent);
  }
  --olive-stroke: var(--color-olive-600);
  --olive-fill: var(--color-olive-200);
  --olive-solid: var(--color-olive-800);
  --olive-mark: var(--color-olive-500);
  --taupe-base: var(--color-taupe-600);
  --taupe-text: var(--color-taupe-800);
  --taupe-bg: color-mix(in srgb, oklch(96% 0.002 17.2) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-taupe-100) 60%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(26.8% 0.011 36.5) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-taupe-800) 15%, transparent);
  }
  --taupe-stroke: var(--color-taupe-600);
  --taupe-fill: var(--color-taupe-200);
  --taupe-solid: var(--color-taupe-800);
  --taupe-mark: var(--color-taupe-500);
  --mist-base: var(--color-mist-600);
  --mist-text: var(--color-mist-800);
  --mist-bg: color-mix(in srgb, oklch(96.3% 0.002 197.1) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-mist-100) 60%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(27.5% 0.011 216.9) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-mist-800) 15%, transparent);
  }
  --mist-stroke: var(--color-mist-600);
  --mist-fill: var(--color-mist-200);
  --mist-solid: var(--color-mist-800);
  --mist-mark: var(--color-mist-500);
  --coral-base: var(--color-coral-600);
  --coral-text: var(--color-coral-800);
  --coral-bg: var(--color-coral-100);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-coral-100) 60%, transparent);
  }
  --coral-border: var(--color-coral-800);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-coral-800) 15%, transparent);
  }
  --coral-stroke: var(--color-coral-600);
  --coral-fill: var(--color-coral-200);
  --coral-solid: var(--color-coral-800);
  --coral-mark: var(--color-coral-500);
  --brown-base: var(--color-brown-600);
  --brown-text: var(--color-brown-800);
  --brown-bg: var(--color-brown-100);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-brown-100) 60%, transparent);
  }
  --brown-border: var(--color-brown-800);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-brown-800) 15%, transparent);
  }
  --brown-stroke: var(--color-brown-600);
  --brown-fill: var(--color-brown-200);
  --brown-solid: var(--color-brown-800);
  --brown-mark: var(--color-brown-500);
  --earth-base: var(--color-earth-600);
  --earth-text: var(--color-earth-800);
  --earth-bg: var(--color-earth-100);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-earth-100) 60%, transparent);
  }
  --earth-border: var(--color-earth-800);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-earth-800) 15%, transparent);
  }
  --earth-stroke: var(--color-earth-600);
  --earth-fill: var(--color-earth-200);
  --earth-solid: var(--color-earth-800);
  --earth-mark: var(--color-earth-500);
  --blush-base: var(--color-blush-600);
  --blush-text: var(--color-blush-800);
  --blush-bg: var(--color-blush-100);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-blush-100) 60%, transparent);
  }
  --blush-border: var(--color-blush-800);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-blush-800) 15%, transparent);
  }
  --blush-stroke: var(--color-blush-600);
  --blush-fill: var(--color-blush-200);
  --blush-solid: var(--color-blush-800);
  --blush-mark: var(--color-blush-500);
  --sage-base: var(--color-sage-600);
  --sage-text: var(--color-sage-800);
  --sage-bg: var(--color-sage-100);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-sage-100) 60%, transparent);
  }
  --sage-border: var(--color-sage-800);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-sage-800) 15%, transparent);
  }
  --sage-stroke: var(--color-sage-600);
  --sage-fill: var(--color-sage-200);
  --sage-solid: var(--color-sage-800);
  --sage-mark: var(--color-sage-500);
}
.theme-sepia {
  --paper: #faf6ef;
  --paper-2: #f2ece1;
  --paper-over: #fffdf8;
  --ink: #221f1a;
  --ink-2: #4b463d;
  --ink-3: #70695d;
  --rule: #e6ded0;
  --rule-2: #d0c5b2;
  --mark: #4f46c4;
  --mark-on: #fff;
  --mark-hover: #3d35a8;
  --mark-soft: #ece9f6;
  --shadow-over: 0 12px 32px -8px rgb(45 35 20 / 16%), 0 0 0 1px rgb(45 35 20 / 7%);
  --h-note: #345c85;
  --h-why: #574bb0;
  --h-warn: #8a5b09;
  --h-good: #2a6b4f;
  --h-bad: #9b3e37;
  --tint: 6%;
  --legend-1: #2e6a9f;
  --legend-2: #734aa0;
  --legend-3: #28776f;
  background-color: var(--paper);
  color: var(--ink);
  --reader-bg: var(--paper);
  --reader-text: var(--ink);
  --mute: var(--ink-3);
  --mute-light: var(--ink-3);
  --mute-hover: var(--ink-2);
  --mute-subtle: var(--rule);
  --mute-border: var(--rule);
  --heading: var(--ink);
  --links: var(--mark);
  --content-border: var(--rule);
  --content-title: var(--ink);
  --line-color: var(--rule-2);
  --highlight: var(--mark);
  --highlight-action: var(--mark);
  --highlight-green: var(--h-good);
  --highlight-text-bg: var(--primary-bg);
  --red-base: var(--color-rose-600);
  --red-text: var(--color-rose-800);
  --red-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --red-stroke: var(--color-rose-600);
  --red-fill: var(--color-rose-200);
  --red-solid: var(--color-rose-800);
  --red-mark: var(--color-rose-500);
  --orange-base: var(--color-amber-600);
  --orange-text: var(--color-amber-800);
  --orange-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --orange-stroke: var(--color-amber-600);
  --orange-fill: var(--color-amber-200);
  --orange-solid: var(--color-amber-800);
  --orange-mark: var(--color-amber-500);
  --yellow-base: var(--color-amber-600);
  --yellow-text: var(--color-amber-800);
  --yellow-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --yellow-stroke: var(--color-amber-600);
  --yellow-fill: var(--color-amber-200);
  --yellow-solid: var(--color-amber-800);
  --yellow-mark: var(--color-amber-500);
  --blue-base: var(--color-blue-600);
  --blue-text: var(--color-blue-800);
  --blue-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --blue-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --blue-stroke: var(--color-blue-600);
  --blue-fill: var(--color-blue-200);
  --blue-solid: var(--color-blue-800);
  --blue-mark: var(--color-blue-500);
  --cyan-base: var(--color-blue-600);
  --cyan-text: var(--color-blue-800);
  --cyan-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --cyan-stroke: var(--color-blue-600);
  --cyan-fill: var(--color-blue-200);
  --cyan-solid: var(--color-blue-800);
  --cyan-mark: var(--color-blue-500);
  --green-base: var(--color-emerald-600);
  --green-text: var(--color-emerald-800);
  --green-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --green-stroke: var(--color-emerald-600);
  --green-fill: var(--color-emerald-200);
  --green-solid: var(--color-emerald-800);
  --green-mark: var(--color-emerald-500);
  --amber-base: var(--color-amber-600);
  --amber-text: var(--color-amber-800);
  --amber-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --amber-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --amber-stroke: var(--color-amber-600);
  --amber-fill: var(--color-amber-200);
  --amber-solid: var(--color-amber-800);
  --amber-mark: var(--color-amber-500);
  --emerald-base: var(--color-emerald-600);
  --emerald-text: var(--color-emerald-800);
  --emerald-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --emerald-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --emerald-stroke: var(--color-emerald-600);
  --emerald-fill: var(--color-emerald-200);
  --emerald-solid: var(--color-emerald-800);
  --emerald-mark: var(--color-emerald-500);
  --teal-base: var(--color-emerald-600);
  --teal-text: var(--color-emerald-800);
  --teal-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --teal-stroke: var(--color-emerald-600);
  --teal-fill: var(--color-emerald-200);
  --teal-solid: var(--color-emerald-800);
  --teal-mark: var(--color-emerald-500);
  --sky-base: var(--color-blue-600);
  --sky-text: var(--color-blue-800);
  --sky-bg: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-blue-100) 60%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(42.4% 0.199 265.638) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-blue-800) 15%, transparent);
  }
  --sky-stroke: var(--color-blue-600);
  --sky-fill: var(--color-blue-200);
  --sky-solid: var(--color-blue-800);
  --sky-mark: var(--color-blue-500);
  --indigo-base: var(--color-indigo-600);
  --indigo-text: var(--color-indigo-800);
  --indigo-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --indigo-border: color-mix(in srgb, oklch(39.8% 0.195 277.366) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-border: color-mix(in srgb, var(--color-indigo-800) 15%, transparent);
  }
  --indigo-stroke: var(--color-indigo-600);
  --indigo-fill: var(--color-indigo-200);
  --indigo-solid: var(--color-indigo-800);
  --indigo-mark: var(--color-indigo-500);
  --purple-base: var(--color-indigo-600);
  --purple-text: var(--color-indigo-800);
  --purple-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(39.8% 0.195 277.366) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-indigo-800) 15%, transparent);
  }
  --purple-stroke: var(--color-indigo-600);
  --purple-fill: var(--color-indigo-200);
  --purple-solid: var(--color-indigo-800);
  --purple-mark: var(--color-indigo-500);
  --rose-base: var(--color-rose-600);
  --rose-text: var(--color-rose-800);
  --rose-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --rose-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --rose-stroke: var(--color-rose-600);
  --rose-fill: var(--color-rose-200);
  --rose-solid: var(--color-rose-800);
  --rose-mark: var(--color-rose-500);
  --slate-base: var(--color-gray-600);
  --slate-text: var(--color-gray-800);
  --slate-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --slate-stroke: var(--color-gray-600);
  --slate-fill: var(--color-gray-200);
  --slate-solid: var(--color-gray-800);
  --slate-mark: var(--color-gray-500);
  --zinc-base: var(--color-gray-600);
  --zinc-text: var(--color-gray-800);
  --zinc-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --zinc-stroke: var(--color-gray-600);
  --zinc-fill: var(--color-gray-200);
  --zinc-solid: var(--color-gray-800);
  --zinc-mark: var(--color-gray-500);
  --gray-base: var(--color-gray-600);
  --gray-text: var(--color-gray-800);
  --gray-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --gray-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --gray-stroke: var(--color-gray-600);
  --gray-fill: var(--color-gray-200);
  --gray-solid: var(--color-gray-800);
  --gray-mark: var(--color-gray-500);
  --stone-base: var(--color-gray-600);
  --stone-text: var(--color-gray-800);
  --stone-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --stone-stroke: var(--color-gray-600);
  --stone-fill: var(--color-gray-200);
  --stone-solid: var(--color-gray-800);
  --stone-mark: var(--color-gray-500);
  --olive-base: var(--color-emerald-600);
  --olive-text: var(--color-emerald-800);
  --olive-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --olive-stroke: var(--color-emerald-600);
  --olive-fill: var(--color-emerald-200);
  --olive-solid: var(--color-emerald-800);
  --olive-mark: var(--color-emerald-500);
  --taupe-base: var(--color-gray-600);
  --taupe-text: var(--color-gray-800);
  --taupe-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --taupe-stroke: var(--color-gray-600);
  --taupe-fill: var(--color-gray-200);
  --taupe-solid: var(--color-gray-800);
  --taupe-mark: var(--color-gray-500);
  --mist-base: var(--color-gray-600);
  --mist-text: var(--color-gray-800);
  --mist-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(27.8% 0.033 256.848) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-gray-800) 15%, transparent);
  }
  --mist-stroke: var(--color-gray-600);
  --mist-fill: var(--color-gray-200);
  --mist-solid: var(--color-gray-800);
  --mist-mark: var(--color-gray-500);
  --coral-base: var(--color-rose-600);
  --coral-text: var(--color-rose-800);
  --coral-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --coral-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --coral-stroke: var(--color-rose-600);
  --coral-fill: var(--color-rose-200);
  --coral-solid: var(--color-rose-800);
  --coral-mark: var(--color-rose-500);
  --brown-base: var(--color-amber-600);
  --brown-text: var(--color-amber-800);
  --brown-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --brown-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --brown-stroke: var(--color-amber-600);
  --brown-fill: var(--color-amber-200);
  --brown-solid: var(--color-amber-800);
  --brown-mark: var(--color-amber-500);
  --earth-base: var(--color-amber-600);
  --earth-text: var(--color-amber-800);
  --earth-bg: color-mix(in srgb, oklch(96.2% 0.059 95.617) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-amber-100) 60%, transparent);
  }
  --earth-border: color-mix(in srgb, oklch(47.3% 0.137 46.201) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-amber-800) 15%, transparent);
  }
  --earth-stroke: var(--color-amber-600);
  --earth-fill: var(--color-amber-200);
  --earth-solid: var(--color-amber-800);
  --earth-mark: var(--color-amber-500);
  --blush-base: var(--color-rose-600);
  --blush-text: var(--color-rose-800);
  --blush-bg: color-mix(in srgb, oklch(94.1% 0.03 12.58) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-rose-100) 60%, transparent);
  }
  --blush-border: color-mix(in srgb, oklch(45.5% 0.188 13.697) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-rose-800) 15%, transparent);
  }
  --blush-stroke: var(--color-rose-600);
  --blush-fill: var(--color-rose-200);
  --blush-solid: var(--color-rose-800);
  --blush-mark: var(--color-rose-500);
  --sage-base: var(--color-emerald-600);
  --sage-text: var(--color-emerald-800);
  --sage-bg: color-mix(in srgb, oklch(95% 0.052 163.051) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-emerald-100) 60%, transparent);
  }
  --sage-border: color-mix(in srgb, oklch(43.2% 0.095 166.913) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-emerald-800) 15%, transparent);
  }
  --sage-stroke: var(--color-emerald-600);
  --sage-fill: var(--color-emerald-200);
  --sage-solid: var(--color-emerald-800);
  --sage-mark: var(--color-emerald-500);
  --primary-base: var(--color-indigo-700);
  --primary-text: var(--color-indigo-700);
  --primary-bg: var(--color-indigo-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-bg: color-mix(in srgb, var(--color-indigo-soft-50) 60%, transparent);
  }
  --primary-border: var(--color-indigo-soft-200);
  --primary-stroke: var(--color-indigo-soft-600);
  --primary-fill: var(--color-indigo-soft-200);
  --primary-solid: var(--color-indigo-700);
  --primary-mark: var(--color-indigo-600);
  --primary-strong-base: var(--color-indigo-800);
  --primary-strong-text: var(--color-indigo-800);
  --primary-strong-bg: color-mix(in srgb, oklch(93% 0.034 272.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-strong-bg: color-mix(in srgb, var(--color-indigo-100) 60%, transparent);
  }
  --primary-strong-border: var(--color-indigo-200);
  --primary-strong-stroke: var(--color-indigo-300);
  --primary-strong-fill: var(--color-indigo-200);
  --primary-strong-solid: var(--color-indigo-700);
  --primary-strong-mark: var(--color-indigo-600);
  --structural-base: var(--color-gray-700);
  --structural-text: var(--color-gray-700);
  --structural-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --structural-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --structural-border: var(--color-gray-200);
  --structural-stroke: var(--color-gray-600);
  --structural-fill: var(--color-gray-200);
  --structural-solid: var(--color-gray-700);
  --structural-mark: var(--color-gray-500);
  --reference-base: var(--color-gray-700);
  --reference-text: var(--color-gray-700);
  --reference-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --reference-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --reference-border: var(--color-gray-200);
  --reference-stroke: var(--color-gray-600);
  --reference-fill: var(--color-gray-200);
  --reference-solid: var(--color-gray-700);
  --reference-mark: var(--color-gray-500);
  --procedural-base: var(--color-gray-700);
  --procedural-text: var(--color-gray-700);
  --procedural-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --procedural-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --procedural-border: var(--color-gray-200);
  --procedural-stroke: var(--color-gray-600);
  --procedural-fill: var(--color-gray-200);
  --procedural-solid: var(--color-gray-700);
  --procedural-mark: var(--color-gray-500);
  --origin-base: var(--color-gray-700);
  --origin-text: var(--color-gray-700);
  --origin-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --origin-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --origin-border: var(--color-gray-200);
  --origin-stroke: var(--color-gray-600);
  --origin-fill: var(--color-gray-200);
  --origin-solid: var(--color-gray-700);
  --origin-mark: var(--color-gray-500);
  --formula-base: var(--color-gray-700);
  --formula-text: var(--color-gray-700);
  --formula-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --formula-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --formula-border: var(--color-gray-200);
  --formula-stroke: var(--color-gray-600);
  --formula-fill: var(--color-gray-200);
  --formula-solid: var(--color-gray-700);
  --formula-mark: var(--color-gray-500);
  --experiment-base: var(--color-gray-700);
  --experiment-text: var(--color-gray-700);
  --experiment-bg: color-mix(in srgb, oklch(96.7% 0.003 264.542) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --experiment-bg: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
  }
  --experiment-border: var(--color-gray-200);
  --experiment-stroke: var(--color-gray-600);
  --experiment-fill: var(--color-gray-200);
  --experiment-solid: var(--color-gray-700);
  --experiment-mark: var(--color-gray-500);
  --caution-base: var(--color-amber-muted-700);
  --caution-text: var(--color-amber-muted-700);
  --caution-bg: var(--color-amber-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --caution-bg: color-mix(in srgb, var(--color-amber-soft-50) 60%, transparent);
  }
  --caution-border: var(--color-amber-soft-200);
  --caution-stroke: var(--color-amber-soft-600);
  --caution-fill: var(--color-amber-soft-200);
  --caution-solid: var(--color-amber-muted-600);
  --caution-mark: var(--color-amber-500);
  --positive-base: var(--color-green-muted-700);
  --positive-text: var(--color-green-muted-700);
  --positive-bg: var(--color-green-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --positive-bg: color-mix(in srgb, var(--color-green-soft-50) 60%, transparent);
  }
  --positive-border: var(--color-green-soft-200);
  --positive-stroke: var(--color-green-soft-600);
  --positive-fill: var(--color-green-soft-200);
  --positive-solid: var(--color-green-muted-600);
  --positive-mark: var(--color-green-500);
  --verify-base: var(--color-green-muted-700);
  --verify-text: var(--color-green-muted-700);
  --verify-bg: var(--color-green-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --verify-bg: color-mix(in srgb, var(--color-green-soft-50) 60%, transparent);
  }
  --verify-border: var(--color-green-soft-200);
  --verify-stroke: var(--color-green-soft-600);
  --verify-fill: var(--color-green-soft-200);
  --verify-solid: var(--color-green-muted-600);
  --verify-mark: var(--color-green-500);
  --negative-base: var(--color-red-700);
  --negative-text: var(--color-red-muted-700);
  --negative-bg: var(--color-red-soft-50);
  @supports (color: color-mix(in lab, red, red)) {
    --negative-bg: color-mix(in srgb, var(--color-red-soft-50) 60%, transparent);
  }
  --negative-border: var(--color-red-soft-200);
  --negative-stroke: var(--color-red-soft-600);
  --negative-fill: var(--color-red-soft-200);
  --negative-solid: var(--color-red-muted-600);
  --negative-mark: var(--color-red-500);
  .prose {
    --tw-prose-body: var(--ink);
    --tw-prose-headings: var(--ink);
    --tw-prose-links: var(--mark);
    --tw-prose-bold: var(--ink);
    --tw-prose-lead: var(--ink-2);
    --tw-prose-counters: var(--ink-3);
    --tw-prose-bullets: var(--ink-3);
    --tw-prose-hr: var(--rule);
    --tw-prose-quotes: var(--ink-2);
    --tw-prose-quote-borders: var(--rule-2);
  }
  .btn-hover:hover {
    color: var(--mark-hover);
  }
}
.theme-sepia [data-palette="literal"] {
  --red-base: var(--color-red-600);
  --red-text: var(--color-red-800);
  --red-bg: color-mix(in srgb, oklch(93.6% 0.032 17.717) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-red-100) 60%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(44.4% 0.177 26.899) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-red-800) 15%, transparent);
  }
  --red-stroke: var(--color-red-600);
  --red-fill: var(--color-red-200);
  --red-solid: var(--color-red-800);
  --red-mark: var(--color-red-500);
  --orange-base: var(--color-orange-600);
  --orange-text: var(--color-orange-800);
  --orange-bg: color-mix(in srgb, oklch(95.4% 0.038 75.164) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-orange-100) 60%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(47% 0.157 37.304) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-orange-800) 15%, transparent);
  }
  --orange-stroke: var(--color-orange-600);
  --orange-fill: var(--color-orange-200);
  --orange-solid: var(--color-orange-800);
  --orange-mark: var(--color-orange-500);
  --yellow-base: var(--color-yellow-600);
  --yellow-text: var(--color-yellow-800);
  --yellow-bg: color-mix(in srgb, oklch(97.3% 0.071 103.193) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-yellow-100) 60%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(47.6% 0.114 61.907) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-yellow-800) 15%, transparent);
  }
  --yellow-stroke: var(--color-yellow-600);
  --yellow-fill: var(--color-yellow-200);
  --yellow-solid: var(--color-yellow-800);
  --yellow-mark: var(--color-yellow-500);
  --cyan-base: var(--color-cyan-600);
  --cyan-text: var(--color-cyan-800);
  --cyan-bg: color-mix(in srgb, oklch(95.6% 0.045 203.388) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-cyan-100) 60%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(45% 0.085 224.283) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-cyan-800) 15%, transparent);
  }
  --cyan-stroke: var(--color-cyan-600);
  --cyan-fill: var(--color-cyan-200);
  --cyan-solid: var(--color-cyan-800);
  --cyan-mark: var(--color-cyan-500);
  --green-base: var(--color-green-600);
  --green-text: var(--color-green-800);
  --green-bg: color-mix(in srgb, oklch(96.2% 0.044 156.743) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-green-100) 60%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(44.8% 0.119 151.328) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-green-800) 15%, transparent);
  }
  --green-stroke: var(--color-green-600);
  --green-fill: var(--color-green-200);
  --green-solid: var(--color-green-800);
  --green-mark: var(--color-green-500);
  --teal-base: var(--color-teal-600);
  --teal-text: var(--color-teal-800);
  --teal-bg: color-mix(in srgb, oklch(95.3% 0.051 180.801) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-teal-100) 60%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(43.7% 0.078 188.216) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-teal-800) 15%, transparent);
  }
  --teal-stroke: var(--color-teal-600);
  --teal-fill: var(--color-teal-200);
  --teal-solid: var(--color-teal-800);
  --teal-mark: var(--color-teal-500);
  --sky-base: var(--color-sky-600);
  --sky-text: var(--color-sky-800);
  --sky-bg: color-mix(in srgb, oklch(95.1% 0.026 236.824) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-sky-100) 60%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(44.3% 0.11 240.79) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-sky-800) 15%, transparent);
  }
  --sky-stroke: var(--color-sky-600);
  --sky-fill: var(--color-sky-200);
  --sky-solid: var(--color-sky-800);
  --sky-mark: var(--color-sky-500);
  --purple-base: var(--color-purple-600);
  --purple-text: var(--color-purple-800);
  --purple-bg: color-mix(in srgb, oklch(94.6% 0.033 307.174) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-purple-100) 60%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(43.8% 0.218 303.724) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-purple-800) 15%, transparent);
  }
  --purple-stroke: var(--color-purple-600);
  --purple-fill: var(--color-purple-200);
  --purple-solid: var(--color-purple-800);
  --purple-mark: var(--color-purple-500);
  --slate-base: var(--color-slate-600);
  --slate-text: var(--color-slate-800);
  --slate-bg: color-mix(in srgb, oklch(96.8% 0.007 247.896) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-slate-100) 60%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(27.9% 0.041 260.031) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-slate-800) 15%, transparent);
  }
  --slate-stroke: var(--color-slate-600);
  --slate-fill: var(--color-slate-200);
  --slate-solid: var(--color-slate-800);
  --slate-mark: var(--color-slate-500);
  --zinc-base: var(--color-zinc-600);
  --zinc-text: var(--color-zinc-800);
  --zinc-bg: color-mix(in srgb, oklch(96.7% 0.001 286.375) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-zinc-100) 60%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(27.4% 0.006 286.033) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-zinc-800) 15%, transparent);
  }
  --zinc-stroke: var(--color-zinc-600);
  --zinc-fill: var(--color-zinc-200);
  --zinc-solid: var(--color-zinc-800);
  --zinc-mark: var(--color-zinc-500);
  --stone-base: var(--color-stone-600);
  --stone-text: var(--color-stone-800);
  --stone-bg: color-mix(in srgb, oklch(97% 0.001 106.424) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-stone-100) 60%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(26.8% 0.007 34.298) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-stone-800) 15%, transparent);
  }
  --stone-stroke: var(--color-stone-600);
  --stone-fill: var(--color-stone-200);
  --stone-solid: var(--color-stone-800);
  --stone-mark: var(--color-stone-500);
  --olive-base: var(--color-olive-600);
  --olive-text: var(--color-olive-800);
  --olive-bg: color-mix(in srgb, oklch(96.6% 0.005 106.5) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-olive-100) 60%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(28.6% 0.016 107.4) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-olive-800) 15%, transparent);
  }
  --olive-stroke: var(--color-olive-600);
  --olive-fill: var(--color-olive-200);
  --olive-solid: var(--color-olive-800);
  --olive-mark: var(--color-olive-500);
  --taupe-base: var(--color-taupe-600);
  --taupe-text: var(--color-taupe-800);
  --taupe-bg: color-mix(in srgb, oklch(96% 0.002 17.2) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-taupe-100) 60%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(26.8% 0.011 36.5) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-taupe-800) 15%, transparent);
  }
  --taupe-stroke: var(--color-taupe-600);
  --taupe-fill: var(--color-taupe-200);
  --taupe-solid: var(--color-taupe-800);
  --taupe-mark: var(--color-taupe-500);
  --mist-base: var(--color-mist-600);
  --mist-text: var(--color-mist-800);
  --mist-bg: color-mix(in srgb, oklch(96.3% 0.002 197.1) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-mist-100) 60%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(27.5% 0.011 216.9) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-mist-800) 15%, transparent);
  }
  --mist-stroke: var(--color-mist-600);
  --mist-fill: var(--color-mist-200);
  --mist-solid: var(--color-mist-800);
  --mist-mark: var(--color-mist-500);
  --coral-base: var(--color-coral-600);
  --coral-text: var(--color-coral-800);
  --coral-bg: var(--color-coral-100);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-coral-100) 60%, transparent);
  }
  --coral-border: var(--color-coral-800);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-coral-800) 15%, transparent);
  }
  --coral-stroke: var(--color-coral-600);
  --coral-fill: var(--color-coral-200);
  --coral-solid: var(--color-coral-800);
  --coral-mark: var(--color-coral-500);
  --brown-base: var(--color-brown-600);
  --brown-text: var(--color-brown-800);
  --brown-bg: var(--color-brown-100);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-brown-100) 60%, transparent);
  }
  --brown-border: var(--color-brown-800);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-brown-800) 15%, transparent);
  }
  --brown-stroke: var(--color-brown-600);
  --brown-fill: var(--color-brown-200);
  --brown-solid: var(--color-brown-800);
  --brown-mark: var(--color-brown-500);
  --earth-base: var(--color-earth-600);
  --earth-text: var(--color-earth-800);
  --earth-bg: var(--color-earth-100);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-earth-100) 60%, transparent);
  }
  --earth-border: var(--color-earth-800);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-earth-800) 15%, transparent);
  }
  --earth-stroke: var(--color-earth-600);
  --earth-fill: var(--color-earth-200);
  --earth-solid: var(--color-earth-800);
  --earth-mark: var(--color-earth-500);
  --blush-base: var(--color-blush-600);
  --blush-text: var(--color-blush-800);
  --blush-bg: var(--color-blush-100);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-blush-100) 60%, transparent);
  }
  --blush-border: var(--color-blush-800);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-blush-800) 15%, transparent);
  }
  --blush-stroke: var(--color-blush-600);
  --blush-fill: var(--color-blush-200);
  --blush-solid: var(--color-blush-800);
  --blush-mark: var(--color-blush-500);
  --sage-base: var(--color-sage-600);
  --sage-text: var(--color-sage-800);
  --sage-bg: var(--color-sage-100);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-sage-100) 60%, transparent);
  }
  --sage-border: var(--color-sage-800);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-sage-800) 15%, transparent);
  }
  --sage-stroke: var(--color-sage-600);
  --sage-fill: var(--color-sage-200);
  --sage-solid: var(--color-sage-800);
  --sage-mark: var(--color-sage-500);
}
.theme-dark {
  --paper: #15161a;
  --paper-2: #1e1f25;
  --paper-over: #21232a;
  --ink: #e8e7e4;
  --ink-2: #b6b8bf;
  --ink-3: #868890;
  --rule: #2a2c32;
  --rule-2: #3c3f47;
  --mark: #a79ef6;
  --mark-on: #15161a;
  --mark-hover: #beb7ff;
  --mark-soft: #22203a;
  --shadow-over: 0 16px 40px -8px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 8%);
  --h-note: #7cabdd;
  --h-why: #a79ef6;
  --h-warn: #dda63f;
  --h-good: #62b894;
  --h-bad: #e08a83;
  --tint: 11%;
  --legend-1: #74aade;
  --legend-2: #b490dd;
  --legend-3: #5fb5ad;
  background-color: var(--paper);
  color: var(--ink);
  --reader-bg: var(--paper);
  --reader-text: var(--ink);
  --mute: var(--ink-3);
  --mute-light: var(--ink-3);
  --mute-hover: var(--ink-2);
  --mute-subtle: var(--rule);
  --mute-border: var(--rule);
  --heading: var(--ink);
  --links: var(--mark);
  --content-border: var(--rule);
  --content-title: var(--ink);
  --line-color: var(--rule-2);
  --highlight: var(--mark);
  --highlight-action: var(--mark);
  --highlight-green: var(--h-good);
  --highlight-text-bg: var(--primary-bg);
  --cta-bg: var(--mark);
  --red-base: var(--color-rose-400);
  --red-text: var(--color-rose-200);
  --red-bg: color-mix(in srgb, oklch(64.5% 0.246 16.439) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-rose-500) 5%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-rose-500) 30%, transparent);
  }
  --red-stroke: var(--color-rose-400);
  --red-fill: color-mix(in srgb, oklch(45.5% 0.188 13.697) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-fill: color-mix(in srgb, var(--color-rose-800) 40%, transparent);
  }
  --red-solid: var(--color-rose-400);
  --red-mark: var(--color-rose-400);
  --orange-base: var(--color-amber-400);
  --orange-text: var(--color-amber-200);
  --orange-bg: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-amber-500) 30%, transparent);
  }
  --orange-stroke: var(--color-amber-400);
  --orange-fill: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-fill: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
  }
  --orange-solid: var(--color-amber-400);
  --orange-mark: var(--color-amber-400);
  --yellow-base: var(--color-amber-400);
  --yellow-text: var(--color-amber-200);
  --yellow-bg: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-amber-500) 30%, transparent);
  }
  --yellow-stroke: var(--color-amber-400);
  --yellow-fill: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-fill: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
  }
  --yellow-solid: var(--color-amber-400);
  --yellow-mark: var(--color-amber-400);
  --blue-base: var(--color-blue-400);
  --blue-text: var(--color-blue-200);
  --blue-bg: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-bg: color-mix(in srgb, var(--color-blue-500) 5%, transparent);
  }
  --blue-border: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-border: color-mix(in srgb, var(--color-blue-500) 30%, transparent);
  }
  --blue-stroke: var(--color-blue-400);
  --blue-fill: color-mix(in srgb, oklch(42.4% 0.199 265.638) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-fill: color-mix(in srgb, var(--color-blue-800) 40%, transparent);
  }
  --blue-solid: var(--color-blue-400);
  --blue-mark: var(--color-blue-400);
  --cyan-base: var(--color-blue-400);
  --cyan-text: var(--color-blue-200);
  --cyan-bg: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-blue-500) 5%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-blue-500) 30%, transparent);
  }
  --cyan-stroke: var(--color-blue-400);
  --cyan-fill: color-mix(in srgb, oklch(42.4% 0.199 265.638) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-fill: color-mix(in srgb, var(--color-blue-800) 40%, transparent);
  }
  --cyan-solid: var(--color-blue-400);
  --cyan-mark: var(--color-blue-400);
  --green-base: var(--color-emerald-400);
  --green-text: var(--color-emerald-200);
  --green-bg: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-emerald-500) 5%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  }
  --green-stroke: var(--color-emerald-400);
  --green-fill: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-fill: color-mix(in srgb, var(--color-emerald-800) 40%, transparent);
  }
  --green-solid: var(--color-emerald-400);
  --green-mark: var(--color-emerald-400);
  --amber-base: var(--color-amber-400);
  --amber-text: var(--color-amber-200);
  --amber-bg: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-bg: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
  }
  --amber-border: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-border: color-mix(in srgb, var(--color-amber-500) 30%, transparent);
  }
  --amber-stroke: var(--color-amber-400);
  --amber-fill: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --amber-fill: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
  }
  --amber-solid: var(--color-amber-400);
  --amber-mark: var(--color-amber-400);
  --emerald-base: var(--color-emerald-400);
  --emerald-text: var(--color-emerald-200);
  --emerald-bg: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-bg: color-mix(in srgb, var(--color-emerald-500) 5%, transparent);
  }
  --emerald-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-border: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  }
  --emerald-stroke: var(--color-emerald-400);
  --emerald-fill: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --emerald-fill: color-mix(in srgb, var(--color-emerald-800) 40%, transparent);
  }
  --emerald-solid: var(--color-emerald-400);
  --emerald-mark: var(--color-emerald-400);
  --teal-base: var(--color-emerald-400);
  --teal-text: var(--color-emerald-200);
  --teal-bg: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-emerald-500) 5%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  }
  --teal-stroke: var(--color-emerald-400);
  --teal-fill: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-fill: color-mix(in srgb, var(--color-emerald-800) 40%, transparent);
  }
  --teal-solid: var(--color-emerald-400);
  --teal-mark: var(--color-emerald-400);
  --sky-base: var(--color-blue-400);
  --sky-text: var(--color-blue-200);
  --sky-bg: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-blue-500) 5%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-blue-500) 30%, transparent);
  }
  --sky-stroke: var(--color-blue-400);
  --sky-fill: color-mix(in srgb, oklch(42.4% 0.199 265.638) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-fill: color-mix(in srgb, var(--color-blue-800) 40%, transparent);
  }
  --sky-solid: var(--color-blue-400);
  --sky-mark: var(--color-blue-400);
  --indigo-base: var(--color-indigo-400);
  --indigo-text: var(--color-indigo-200);
  --indigo-bg: color-mix(in srgb, oklch(58.5% 0.233 277.117) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-bg: color-mix(in srgb, var(--color-indigo-500) 5%, transparent);
  }
  --indigo-border: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-border: color-mix(in srgb, var(--color-indigo-500) 30%, transparent);
  }
  --indigo-stroke: var(--color-indigo-400);
  --indigo-fill: color-mix(in srgb, oklch(39.8% 0.195 277.366) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --indigo-fill: color-mix(in srgb, var(--color-indigo-800) 40%, transparent);
  }
  --indigo-solid: var(--color-indigo-400);
  --indigo-mark: var(--color-indigo-400);
  --purple-base: var(--color-indigo-400);
  --purple-text: var(--color-indigo-200);
  --purple-bg: color-mix(in srgb, oklch(58.5% 0.233 277.117) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-indigo-500) 5%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-indigo-500) 30%, transparent);
  }
  --purple-stroke: var(--color-indigo-400);
  --purple-fill: color-mix(in srgb, oklch(39.8% 0.195 277.366) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-fill: color-mix(in srgb, var(--color-indigo-800) 40%, transparent);
  }
  --purple-solid: var(--color-indigo-400);
  --purple-mark: var(--color-indigo-400);
  --rose-base: var(--color-rose-400);
  --rose-text: var(--color-rose-200);
  --rose-bg: color-mix(in srgb, oklch(64.5% 0.246 16.439) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-bg: color-mix(in srgb, var(--color-rose-500) 5%, transparent);
  }
  --rose-border: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-border: color-mix(in srgb, var(--color-rose-500) 30%, transparent);
  }
  --rose-stroke: var(--color-rose-400);
  --rose-fill: color-mix(in srgb, oklch(45.5% 0.188 13.697) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --rose-fill: color-mix(in srgb, var(--color-rose-800) 40%, transparent);
  }
  --rose-solid: var(--color-rose-400);
  --rose-mark: var(--color-rose-400);
  --slate-base: var(--color-gray-400);
  --slate-text: var(--color-gray-200);
  --slate-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --slate-stroke: var(--color-gray-400);
  --slate-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --slate-solid: var(--color-gray-400);
  --slate-mark: var(--color-gray-400);
  --zinc-base: var(--color-gray-400);
  --zinc-text: var(--color-gray-200);
  --zinc-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --zinc-stroke: var(--color-gray-400);
  --zinc-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --zinc-solid: var(--color-gray-400);
  --zinc-mark: var(--color-gray-400);
  --gray-base: var(--color-gray-400);
  --gray-text: var(--color-gray-200);
  --gray-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --gray-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --gray-stroke: var(--color-gray-400);
  --gray-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --gray-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --gray-solid: var(--color-gray-400);
  --gray-mark: var(--color-gray-400);
  --stone-base: var(--color-gray-400);
  --stone-text: var(--color-gray-200);
  --stone-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --stone-stroke: var(--color-gray-400);
  --stone-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --stone-solid: var(--color-gray-400);
  --stone-mark: var(--color-gray-400);
  --olive-base: var(--color-emerald-400);
  --olive-text: var(--color-emerald-200);
  --olive-bg: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-emerald-500) 5%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  }
  --olive-stroke: var(--color-emerald-400);
  --olive-fill: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-fill: color-mix(in srgb, var(--color-emerald-800) 40%, transparent);
  }
  --olive-solid: var(--color-emerald-400);
  --olive-mark: var(--color-emerald-400);
  --taupe-base: var(--color-gray-400);
  --taupe-text: var(--color-gray-200);
  --taupe-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --taupe-stroke: var(--color-gray-400);
  --taupe-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --taupe-solid: var(--color-gray-400);
  --taupe-mark: var(--color-gray-400);
  --mist-base: var(--color-gray-400);
  --mist-text: var(--color-gray-200);
  --mist-bg: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-gray-500) 5%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-gray-500) 30%, transparent);
  }
  --mist-stroke: var(--color-gray-400);
  --mist-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --mist-solid: var(--color-gray-400);
  --mist-mark: var(--color-gray-400);
  --coral-base: var(--color-rose-400);
  --coral-text: var(--color-rose-200);
  --coral-bg: color-mix(in srgb, oklch(64.5% 0.246 16.439) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-rose-500) 5%, transparent);
  }
  --coral-border: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-rose-500) 30%, transparent);
  }
  --coral-stroke: var(--color-rose-400);
  --coral-fill: color-mix(in srgb, oklch(45.5% 0.188 13.697) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-fill: color-mix(in srgb, var(--color-rose-800) 40%, transparent);
  }
  --coral-solid: var(--color-rose-400);
  --coral-mark: var(--color-rose-400);
  --brown-base: var(--color-amber-400);
  --brown-text: var(--color-amber-200);
  --brown-bg: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
  }
  --brown-border: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-amber-500) 30%, transparent);
  }
  --brown-stroke: var(--color-amber-400);
  --brown-fill: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-fill: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
  }
  --brown-solid: var(--color-amber-400);
  --brown-mark: var(--color-amber-400);
  --earth-base: var(--color-amber-400);
  --earth-text: var(--color-amber-200);
  --earth-bg: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
  }
  --earth-border: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-amber-500) 30%, transparent);
  }
  --earth-stroke: var(--color-amber-400);
  --earth-fill: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-fill: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
  }
  --earth-solid: var(--color-amber-400);
  --earth-mark: var(--color-amber-400);
  --blush-base: var(--color-rose-400);
  --blush-text: var(--color-rose-200);
  --blush-bg: color-mix(in srgb, oklch(64.5% 0.246 16.439) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-rose-500) 5%, transparent);
  }
  --blush-border: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-rose-500) 30%, transparent);
  }
  --blush-stroke: var(--color-rose-400);
  --blush-fill: color-mix(in srgb, oklch(45.5% 0.188 13.697) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-fill: color-mix(in srgb, var(--color-rose-800) 40%, transparent);
  }
  --blush-solid: var(--color-rose-400);
  --blush-mark: var(--color-rose-400);
  --sage-base: var(--color-emerald-400);
  --sage-text: var(--color-emerald-200);
  --sage-bg: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-emerald-500) 5%, transparent);
  }
  --sage-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  }
  --sage-stroke: var(--color-emerald-400);
  --sage-fill: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-fill: color-mix(in srgb, var(--color-emerald-800) 40%, transparent);
  }
  --sage-solid: var(--color-emerald-400);
  --sage-mark: var(--color-emerald-400);
  --primary-base: var(--color-indigo-400);
  --primary-text: var(--color-indigo-300);
  --primary-bg: var(--color-indigo-muted-700);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-bg: color-mix(in srgb, var(--color-indigo-muted-700) 22%, transparent);
  }
  --primary-border: var(--color-indigo-soft-700);
  --primary-stroke: var(--color-indigo-soft-400);
  --primary-fill: var(--color-indigo-soft-800);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-fill: color-mix(in srgb, var(--color-indigo-soft-800) 40%, transparent);
  }
  --primary-solid: var(--color-indigo-muted-400);
  --primary-mark: var(--color-indigo-400);
  --primary-strong-base: var(--color-indigo-300);
  --primary-strong-text: var(--color-indigo-300);
  --primary-strong-bg: color-mix(in srgb, oklch(39.8% 0.195 277.366) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-strong-bg: color-mix(in srgb, var(--color-indigo-800) 35%, transparent);
  }
  --primary-strong-border: var(--color-indigo-600);
  --primary-strong-stroke: var(--color-indigo-400);
  --primary-strong-fill: color-mix(in srgb, oklch(39.8% 0.195 277.366) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --primary-strong-fill: color-mix(in srgb, var(--color-indigo-800) 50%, transparent);
  }
  --primary-strong-solid: var(--color-indigo-500);
  --primary-strong-mark: var(--color-indigo-400);
  --structural-base: var(--color-gray-200);
  --structural-text: var(--color-gray-200);
  --structural-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --structural-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --structural-border: var(--color-gray-700);
  --structural-stroke: var(--color-gray-400);
  --structural-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --structural-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --structural-solid: var(--color-gray-400);
  --structural-mark: var(--color-gray-400);
  --reference-base: var(--color-gray-200);
  --reference-text: var(--color-gray-200);
  --reference-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --reference-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --reference-border: var(--color-gray-700);
  --reference-stroke: var(--color-gray-400);
  --reference-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --reference-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --reference-solid: var(--color-gray-400);
  --reference-mark: var(--color-gray-400);
  --procedural-base: var(--color-gray-200);
  --procedural-text: var(--color-gray-200);
  --procedural-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --procedural-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --procedural-border: var(--color-gray-700);
  --procedural-stroke: var(--color-gray-400);
  --procedural-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --procedural-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --procedural-solid: var(--color-gray-400);
  --procedural-mark: var(--color-gray-400);
  --origin-base: var(--color-gray-200);
  --origin-text: var(--color-gray-200);
  --origin-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --origin-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --origin-border: var(--color-gray-700);
  --origin-stroke: var(--color-gray-400);
  --origin-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --origin-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --origin-solid: var(--color-gray-400);
  --origin-mark: var(--color-gray-400);
  --formula-base: var(--color-gray-200);
  --formula-text: var(--color-gray-200);
  --formula-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --formula-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --formula-border: var(--color-gray-700);
  --formula-stroke: var(--color-gray-400);
  --formula-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --formula-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --formula-solid: var(--color-gray-400);
  --formula-mark: var(--color-gray-400);
  --experiment-base: var(--color-gray-200);
  --experiment-text: var(--color-gray-200);
  --experiment-bg: color-mix(in srgb, oklch(37.3% 0.034 259.733) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --experiment-bg: color-mix(in srgb, var(--color-gray-700) 22%, transparent);
  }
  --experiment-border: var(--color-gray-700);
  --experiment-stroke: var(--color-gray-400);
  --experiment-fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --experiment-fill: color-mix(in srgb, var(--color-gray-800) 40%, transparent);
  }
  --experiment-solid: var(--color-gray-400);
  --experiment-mark: var(--color-gray-400);
  --caution-base: var(--color-amber-muted-200);
  --caution-text: var(--color-amber-muted-200);
  --caution-bg: var(--color-amber-soft-700);
  @supports (color: color-mix(in lab, red, red)) {
    --caution-bg: color-mix(in srgb, var(--color-amber-soft-700) 22%, transparent);
  }
  --caution-border: var(--color-amber-soft-700);
  --caution-stroke: var(--color-amber-soft-400);
  --caution-fill: var(--color-amber-soft-800);
  @supports (color: color-mix(in lab, red, red)) {
    --caution-fill: color-mix(in srgb, var(--color-amber-soft-800) 40%, transparent);
  }
  --caution-solid: var(--color-amber-muted-400);
  --caution-mark: var(--color-amber-400);
  --positive-base: var(--color-green-muted-200);
  --positive-text: var(--color-green-muted-200);
  --positive-bg: var(--color-green-soft-700);
  @supports (color: color-mix(in lab, red, red)) {
    --positive-bg: color-mix(in srgb, var(--color-green-soft-700) 22%, transparent);
  }
  --positive-border: var(--color-green-soft-700);
  --positive-stroke: var(--color-green-soft-400);
  --positive-fill: var(--color-green-soft-800);
  @supports (color: color-mix(in lab, red, red)) {
    --positive-fill: color-mix(in srgb, var(--color-green-soft-800) 40%, transparent);
  }
  --positive-solid: var(--color-green-muted-400);
  --positive-mark: var(--color-green-400);
  --verify-base: var(--color-green-muted-200);
  --verify-text: var(--color-green-muted-200);
  --verify-bg: var(--color-green-soft-700);
  @supports (color: color-mix(in lab, red, red)) {
    --verify-bg: color-mix(in srgb, var(--color-green-soft-700) 22%, transparent);
  }
  --verify-border: var(--color-green-soft-700);
  --verify-stroke: var(--color-green-soft-400);
  --verify-fill: var(--color-green-soft-800);
  @supports (color: color-mix(in lab, red, red)) {
    --verify-fill: color-mix(in srgb, var(--color-green-soft-800) 40%, transparent);
  }
  --verify-solid: var(--color-green-muted-400);
  --verify-mark: var(--color-green-400);
  --negative-base: var(--color-red-muted-200);
  --negative-text: var(--color-red-muted-200);
  --negative-bg: var(--color-red-soft-700);
  @supports (color: color-mix(in lab, red, red)) {
    --negative-bg: color-mix(in srgb, var(--color-red-soft-700) 22%, transparent);
  }
  --negative-border: var(--color-red-soft-700);
  --negative-stroke: var(--color-red-soft-400);
  --negative-fill: var(--color-red-soft-800);
  @supports (color: color-mix(in lab, red, red)) {
    --negative-fill: color-mix(in srgb, var(--color-red-soft-800) 40%, transparent);
  }
  --negative-solid: var(--color-red-muted-400);
  --negative-mark: var(--color-red-400);
  .prose {
    --tw-prose-body: var(--ink);
    --tw-prose-headings: var(--ink);
    --tw-prose-links: var(--mark);
    --tw-prose-bold: var(--ink);
    --tw-prose-lead: var(--ink-2);
    --tw-prose-counters: var(--ink-3);
    --tw-prose-bullets: var(--ink-3);
    --tw-prose-hr: var(--rule);
    --tw-prose-quotes: var(--ink-2);
    --tw-prose-quote-borders: var(--rule-2);
  }
  .btn-hover:hover {
    color: var(--mark-hover);
  }
}
.theme-dark [data-palette="literal"] {
  --red-base: var(--color-red-400);
  --red-text: var(--color-red-200);
  --red-bg: color-mix(in srgb, oklch(63.7% 0.237 25.331) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-bg: color-mix(in srgb, var(--color-red-500) 5%, transparent);
  }
  --red-border: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-border: color-mix(in srgb, var(--color-red-500) 30%, transparent);
  }
  --red-stroke: var(--color-red-400);
  --red-fill: color-mix(in srgb, oklch(44.4% 0.177 26.899) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --red-fill: color-mix(in srgb, var(--color-red-800) 40%, transparent);
  }
  --red-solid: var(--color-red-400);
  --red-mark: var(--color-red-400);
  --orange-base: var(--color-orange-400);
  --orange-text: var(--color-orange-200);
  --orange-bg: color-mix(in srgb, oklch(70.5% 0.213 47.604) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-bg: color-mix(in srgb, var(--color-orange-500) 5%, transparent);
  }
  --orange-border: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-border: color-mix(in srgb, var(--color-orange-500) 30%, transparent);
  }
  --orange-stroke: var(--color-orange-400);
  --orange-fill: color-mix(in srgb, oklch(47% 0.157 37.304) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --orange-fill: color-mix(in srgb, var(--color-orange-800) 40%, transparent);
  }
  --orange-solid: var(--color-orange-400);
  --orange-mark: var(--color-orange-400);
  --yellow-base: var(--color-yellow-400);
  --yellow-text: var(--color-yellow-200);
  --yellow-bg: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-bg: color-mix(in srgb, var(--color-yellow-500) 5%, transparent);
  }
  --yellow-border: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-border: color-mix(in srgb, var(--color-yellow-500) 30%, transparent);
  }
  --yellow-stroke: var(--color-yellow-400);
  --yellow-fill: color-mix(in srgb, oklch(47.6% 0.114 61.907) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --yellow-fill: color-mix(in srgb, var(--color-yellow-800) 40%, transparent);
  }
  --yellow-solid: var(--color-yellow-400);
  --yellow-mark: var(--color-yellow-400);
  --cyan-base: var(--color-cyan-400);
  --cyan-text: var(--color-cyan-200);
  --cyan-bg: color-mix(in srgb, oklch(71.5% 0.143 215.221) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-bg: color-mix(in srgb, var(--color-cyan-500) 5%, transparent);
  }
  --cyan-border: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-border: color-mix(in srgb, var(--color-cyan-500) 30%, transparent);
  }
  --cyan-stroke: var(--color-cyan-400);
  --cyan-fill: color-mix(in srgb, oklch(45% 0.085 224.283) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --cyan-fill: color-mix(in srgb, var(--color-cyan-800) 40%, transparent);
  }
  --cyan-solid: var(--color-cyan-400);
  --cyan-mark: var(--color-cyan-400);
  --green-base: var(--color-green-400);
  --green-text: var(--color-green-200);
  --green-bg: color-mix(in srgb, oklch(72.3% 0.219 149.579) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-bg: color-mix(in srgb, var(--color-green-500) 5%, transparent);
  }
  --green-border: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-border: color-mix(in srgb, var(--color-green-500) 30%, transparent);
  }
  --green-stroke: var(--color-green-400);
  --green-fill: color-mix(in srgb, oklch(44.8% 0.119 151.328) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --green-fill: color-mix(in srgb, var(--color-green-800) 40%, transparent);
  }
  --green-solid: var(--color-green-400);
  --green-mark: var(--color-green-400);
  --teal-base: var(--color-teal-400);
  --teal-text: var(--color-teal-300);
  --teal-bg: color-mix(in srgb, oklch(70.4% 0.14 182.503) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-bg: color-mix(in srgb, var(--color-teal-500) 5%, transparent);
  }
  --teal-border: color-mix(in srgb, oklch(70.4% 0.14 182.503) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-border: color-mix(in srgb, var(--color-teal-500) 30%, transparent);
  }
  --teal-stroke: var(--color-teal-400);
  --teal-fill: color-mix(in srgb, oklch(43.7% 0.078 188.216) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --teal-fill: color-mix(in srgb, var(--color-teal-800) 40%, transparent);
  }
  --teal-solid: var(--color-teal-400);
  --teal-mark: var(--color-teal-400);
  --sky-base: var(--color-sky-400);
  --sky-text: var(--color-sky-300);
  --sky-bg: color-mix(in srgb, oklch(68.5% 0.169 237.323) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-bg: color-mix(in srgb, var(--color-sky-500) 5%, transparent);
  }
  --sky-border: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-border: color-mix(in srgb, var(--color-sky-500) 30%, transparent);
  }
  --sky-stroke: var(--color-sky-400);
  --sky-fill: color-mix(in srgb, oklch(44.3% 0.11 240.79) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --sky-fill: color-mix(in srgb, var(--color-sky-800) 40%, transparent);
  }
  --sky-solid: var(--color-sky-400);
  --sky-mark: var(--color-sky-400);
  --purple-base: var(--color-purple-400);
  --purple-text: var(--color-purple-200);
  --purple-bg: color-mix(in srgb, oklch(62.7% 0.265 303.9) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-bg: color-mix(in srgb, var(--color-purple-500) 5%, transparent);
  }
  --purple-border: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-border: color-mix(in srgb, var(--color-purple-500) 30%, transparent);
  }
  --purple-stroke: var(--color-purple-400);
  --purple-fill: color-mix(in srgb, oklch(43.8% 0.218 303.724) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --purple-fill: color-mix(in srgb, var(--color-purple-800) 40%, transparent);
  }
  --purple-solid: var(--color-purple-400);
  --purple-mark: var(--color-purple-400);
  --slate-base: var(--color-slate-400);
  --slate-text: var(--color-slate-200);
  --slate-bg: color-mix(in srgb, oklch(55.4% 0.046 257.417) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-bg: color-mix(in srgb, var(--color-slate-500) 5%, transparent);
  }
  --slate-border: color-mix(in srgb, oklch(55.4% 0.046 257.417) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-border: color-mix(in srgb, var(--color-slate-500) 30%, transparent);
  }
  --slate-stroke: var(--color-slate-400);
  --slate-fill: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --slate-fill: color-mix(in srgb, var(--color-slate-800) 40%, transparent);
  }
  --slate-solid: var(--color-slate-400);
  --slate-mark: var(--color-slate-400);
  --zinc-base: var(--color-zinc-400);
  --zinc-text: var(--color-zinc-200);
  --zinc-bg: color-mix(in srgb, oklch(55.2% 0.016 285.938) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-bg: color-mix(in srgb, var(--color-zinc-500) 5%, transparent);
  }
  --zinc-border: color-mix(in srgb, oklch(55.2% 0.016 285.938) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-border: color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
  }
  --zinc-stroke: var(--color-zinc-400);
  --zinc-fill: color-mix(in srgb, oklch(27.4% 0.006 286.033) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --zinc-fill: color-mix(in srgb, var(--color-zinc-800) 40%, transparent);
  }
  --zinc-solid: var(--color-zinc-400);
  --zinc-mark: var(--color-zinc-400);
  --stone-base: var(--color-stone-400);
  --stone-text: var(--color-stone-200);
  --stone-bg: color-mix(in srgb, oklch(55.3% 0.013 58.071) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-bg: color-mix(in srgb, var(--color-stone-500) 5%, transparent);
  }
  --stone-border: color-mix(in srgb, oklch(55.3% 0.013 58.071) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-border: color-mix(in srgb, var(--color-stone-500) 30%, transparent);
  }
  --stone-stroke: var(--color-stone-400);
  --stone-fill: color-mix(in srgb, oklch(26.8% 0.007 34.298) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --stone-fill: color-mix(in srgb, var(--color-stone-800) 40%, transparent);
  }
  --stone-solid: var(--color-stone-400);
  --stone-mark: var(--color-stone-400);
  --olive-base: var(--color-olive-400);
  --olive-text: var(--color-olive-200);
  --olive-bg: color-mix(in srgb, oklch(58% 0.031 107.3) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-bg: color-mix(in srgb, var(--color-olive-500) 5%, transparent);
  }
  --olive-border: color-mix(in srgb, oklch(58% 0.031 107.3) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-border: color-mix(in srgb, var(--color-olive-500) 30%, transparent);
  }
  --olive-stroke: var(--color-olive-400);
  --olive-fill: color-mix(in srgb, oklch(28.6% 0.016 107.4) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --olive-fill: color-mix(in srgb, var(--color-olive-800) 40%, transparent);
  }
  --olive-solid: var(--color-olive-400);
  --olive-mark: var(--color-olive-400);
  --taupe-base: var(--color-taupe-400);
  --taupe-text: var(--color-taupe-200);
  --taupe-bg: color-mix(in srgb, oklch(54.7% 0.021 43.1) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-bg: color-mix(in srgb, var(--color-taupe-500) 5%, transparent);
  }
  --taupe-border: color-mix(in srgb, oklch(54.7% 0.021 43.1) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-border: color-mix(in srgb, var(--color-taupe-500) 30%, transparent);
  }
  --taupe-stroke: var(--color-taupe-400);
  --taupe-fill: color-mix(in srgb, oklch(26.8% 0.011 36.5) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --taupe-fill: color-mix(in srgb, var(--color-taupe-800) 40%, transparent);
  }
  --taupe-solid: var(--color-taupe-400);
  --taupe-mark: var(--color-taupe-400);
  --mist-base: var(--color-mist-400);
  --mist-text: var(--color-mist-200);
  --mist-bg: color-mix(in srgb, oklch(56% 0.021 213.5) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-bg: color-mix(in srgb, var(--color-mist-500) 5%, transparent);
  }
  --mist-border: color-mix(in srgb, oklch(56% 0.021 213.5) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-border: color-mix(in srgb, var(--color-mist-500) 30%, transparent);
  }
  --mist-stroke: var(--color-mist-400);
  --mist-fill: color-mix(in srgb, oklch(27.5% 0.011 216.9) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --mist-fill: color-mix(in srgb, var(--color-mist-800) 40%, transparent);
  }
  --mist-solid: var(--color-mist-400);
  --mist-mark: var(--color-mist-400);
  --coral-base: var(--color-coral-400);
  --coral-text: var(--color-coral-200);
  --coral-bg: var(--color-coral-500);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-bg: color-mix(in srgb, var(--color-coral-500) 5%, transparent);
  }
  --coral-border: var(--color-coral-500);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-border: color-mix(in srgb, var(--color-coral-500) 30%, transparent);
  }
  --coral-stroke: var(--color-coral-400);
  --coral-fill: var(--color-coral-800);
  @supports (color: color-mix(in lab, red, red)) {
    --coral-fill: color-mix(in srgb, var(--color-coral-800) 40%, transparent);
  }
  --coral-solid: var(--color-coral-400);
  --coral-mark: var(--color-coral-400);
  --brown-base: var(--color-brown-400);
  --brown-text: var(--color-brown-200);
  --brown-bg: var(--color-brown-500);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-bg: color-mix(in srgb, var(--color-brown-500) 5%, transparent);
  }
  --brown-border: var(--color-brown-500);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-border: color-mix(in srgb, var(--color-brown-500) 30%, transparent);
  }
  --brown-stroke: var(--color-brown-400);
  --brown-fill: var(--color-brown-800);
  @supports (color: color-mix(in lab, red, red)) {
    --brown-fill: color-mix(in srgb, var(--color-brown-800) 40%, transparent);
  }
  --brown-solid: var(--color-brown-400);
  --brown-mark: var(--color-brown-400);
  --earth-base: var(--color-earth-400);
  --earth-text: var(--color-earth-200);
  --earth-bg: var(--color-earth-500);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-bg: color-mix(in srgb, var(--color-earth-500) 5%, transparent);
  }
  --earth-border: var(--color-earth-500);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-border: color-mix(in srgb, var(--color-earth-500) 30%, transparent);
  }
  --earth-stroke: var(--color-earth-400);
  --earth-fill: var(--color-earth-800);
  @supports (color: color-mix(in lab, red, red)) {
    --earth-fill: color-mix(in srgb, var(--color-earth-800) 40%, transparent);
  }
  --earth-solid: var(--color-earth-400);
  --earth-mark: var(--color-earth-400);
  --blush-base: var(--color-blush-400);
  --blush-text: var(--color-blush-200);
  --blush-bg: var(--color-blush-500);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-bg: color-mix(in srgb, var(--color-blush-500) 5%, transparent);
  }
  --blush-border: var(--color-blush-500);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-border: color-mix(in srgb, var(--color-blush-500) 30%, transparent);
  }
  --blush-stroke: var(--color-blush-400);
  --blush-fill: var(--color-blush-800);
  @supports (color: color-mix(in lab, red, red)) {
    --blush-fill: color-mix(in srgb, var(--color-blush-800) 40%, transparent);
  }
  --blush-solid: var(--color-blush-400);
  --blush-mark: var(--color-blush-400);
  --sage-base: var(--color-sage-400);
  --sage-text: var(--color-sage-200);
  --sage-bg: var(--color-sage-500);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-bg: color-mix(in srgb, var(--color-sage-500) 5%, transparent);
  }
  --sage-border: var(--color-sage-500);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-border: color-mix(in srgb, var(--color-sage-500) 30%, transparent);
  }
  --sage-stroke: var(--color-sage-400);
  --sage-fill: var(--color-sage-800);
  @supports (color: color-mix(in lab, red, red)) {
    --sage-fill: color-mix(in srgb, var(--color-sage-800) 40%, transparent);
  }
  --sage-solid: var(--color-sage-400);
  --sage-mark: var(--color-sage-400);
}
.light-color {
  background-color: #fdfcfb;
  color: #1a1a1e;
}
.sepia-color {
  background-color: #faf6ef;
  color: #221f1a;
}
.dark-color {
  background-color: #15161a;
  color: #e8e7e4;
}
@layer shell {
  [hidden] {
    display: none !important;
  }
  .shell {
    max-width: var(--content-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .main {
    min-width: 0;
    container-type: inline-size;
    container-name: doc;
  }
  .page-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 0;
  }
  .page-rail .browse-scroll {
    overflow: visible;
  }
  .page-rail > .rail {
    min-width: 0;
  }
  .rail-pagenav {
    display: contents;
  }
  .doc-measure {
    max-width: var(--w-doc);
    margin-inline: auto;
  }
  @media (width >= 64rem) {
    #reader-content:has(> .page-rail) > .reader-nav {
      padding-left: calc(var(--w-rail) + var(--rail-gap));
    }
  }
  .page-rail-body {
    min-width: 0;
  }
  @media (width >= 64rem) {
    .page-rail {
      grid-template-columns: var(--w-rail) minmax(0, 1fr);
      gap: 0 var(--rail-gap);
      align-items: start;
    }
    .page-rail > .rail {
      position: sticky;
      top: var(--sticky-top);
      max-height: calc(100vh - var(--sticky-top));
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
  }
  .rail-top {
    flex: none;
    padding: 0.875rem 0.875rem 0.75rem;
    background: var(--paper-2);
  }
  .rail-mid {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.875rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .rail-bot {
    flex: none;
    padding: 0.625rem 0.875rem 0.75rem;
    background: var(--paper-2);
  }
  .rail-mid > .rail-sec + .rail-sec {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rule);
  }
  .rail-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.1875rem 0;
    border: 0;
    background: none;
    font: 400 var(--t-sm) / 1.2 var(--font-body);
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
  }
  .rail-switch:hover {
    color: var(--ink);
  }
  .rail-switch[aria-pressed="true"] {
    color: var(--ink);
  }
  .rail-switch-track {
    flex: none;
    margin-left: auto;
    position: relative;
    width: 1.875rem;
    height: 1.0625rem;
    border-radius: 999px;
    background: var(--rule-2);
    transition: background 0.15s ease;
  }
  .rail-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    transition: transform 0.15s ease;
  }
  .rail-switch[aria-pressed="true"] .rail-switch-track {
    background: var(--mark);
  }
  .rail-switch[aria-pressed="true"] .rail-switch-knob {
    transform: translateX(0.8125rem);
  }
  .rail-group + .rail-group {
    margin-top: 1.5rem;
  }
  .rail-title {
    font: 500 var(--t-sm) / 1.4 var(--font-body);
    color: var(--ink);
    margin-bottom: 0.625rem;
  }
  .rail-group {
    display: block;
  }
  .rail-group + .rail-group {
    margin-top: 1.25rem;
  }
  .rail-btn-wide {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.625rem;
    padding: 0.5rem 0.6875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    font: 400 var(--t-sm) / 1.2 var(--font-body);
    color: var(--ink-2);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .rail-btn-wide:hover {
    border-color: var(--rule-2);
    color: var(--ink);
  }
  .rail-btn-wide.is-on {
    border-color: transparent;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, var(--paper));
    }
    color: var(--ink);
  }
  .rail-btn-ico {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ink-3);
  }
  .rail-btn-wide.is-on .rail-btn-ico {
    color: var(--mark);
  }
  .rail-qgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
    gap: 0.25rem;
    margin-top: 0.5rem;
  }
  .rail-qbtn {
    display: grid;
    place-items: center;
    min-height: 2rem;
    padding: 0 0.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }
  .rail-qbtn:hover {
    border-color: var(--rule-2);
    color: var(--ink);
  }
  .rail-qbtn.is-current {
    border-color: transparent;
    background: var(--mark);
    color: var(--mark-on);
  }
  @media (width < 64rem) {
    .page-rail > .rail {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.625rem 0.75rem;
    }
    .page-rail > .rail .rail-top {
      flex: 1 1 12rem;
      padding: 0;
      background: none;
    }
    .page-rail > .rail .rail-mid {
      display: contents;
    }
    .page-rail > .rail .rail-bot {
      display: none;
    }
    .page-rail > .rail .rail-sec {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
    }
    .page-rail > .rail .rail-sec:first-child {
      flex: none;
      margin-left: auto;
    }
    .page-rail > .rail .rail-sec + .rail-sec {
      flex: 1 1 100%;
      margin: 0;
      padding: 0;
      border-top: 0;
    }
    .page-rail > .rail .rail-title {
      display: none;
    }
    .page-rail > .rail .rail-switch {
      width: auto;
    }
    .page-rail > .rail .rail-btn-wide {
      width: auto;
      margin: 0;
      flex: none;
    }
    .page-rail > .rail .rail-qgrid, .page-rail > .rail .rail-marks {
      display: flex;
      flex: 1 1 auto;
      gap: 0.25rem;
      margin: 0;
      padding: 0;
      border-left: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .page-rail > .rail .rail-qgrid::-webkit-scrollbar, .page-rail > .rail .rail-marks::-webkit-scrollbar {
      display: none;
    }
    .page-rail > .rail .rail-qbtn {
      flex: none;
      min-width: 2rem;
    }
    .page-rail > .rail .rail-marks li {
      flex: none;
    }
    .page-rail > .rail .rail-sec.rail-outline, .page-rail > .rail .rail-sec:has(.rail-marks) {
      flex: 1 1 100%;
      margin-left: 0;
    }
    .page-rail > .rail .rail-sec.rail-outline {
      display: flex;
      gap: 0.25rem;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .page-rail > .rail .rail-outline::-webkit-scrollbar {
      display: none;
    }
    .page-rail > .rail .rail-outline .rail-group {
      display: contents;
    }
    .page-rail > .rail .rail-outline .rail-block {
      flex: none;
      padding: 0.3125rem 0.5rem;
      white-space: nowrap;
    }
    .page-rail > .rail .rail-outline .rail-head-t {
      display: none;
    }
  }
  .rail-mid {
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .rail-mid::-webkit-scrollbar {
    width: 0.375rem;
  }
  .rail-mid::-webkit-scrollbar-track {
    background: transparent;
  }
  .rail-mid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--rule-2);
  }
  .rail-mid:hover::-webkit-scrollbar-thumb {
    background: var(--ink-3);
  }
  .rail-parent {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    text-decoration: none;
  }
  .rail-parent-ico {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin-top: 0.0625rem;
    color: var(--ink-3);
  }
  .rail-parent:hover .rail-parent-ico {
    color: var(--ink-2);
  }
  .rail-parent-t {
    min-width: 0;
  }
  .rail-parent-name {
    display: block;
    font: 500 var(--t-sm) / 1.35 var(--font-body);
    color: var(--ink);
  }
  .rail-parent-kind {
    display: block;
    margin-top: 0.0625rem;
    font: 400 var(--t-xs) / 1.4 var(--font-body);
    color: var(--ink-3);
  }
  .rail-marks {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--rule);
  }
  .rail-marks li {
    margin: 0;
    padding: 0;
  }
  .rail-mark {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.6875rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font: 400 var(--t-sm) / 1.4 var(--font-body);
    color: var(--ink-2);
    text-decoration: none;
  }
  .rail-mark:hover {
    color: var(--ink);
    border-left-color: var(--rule-2);
  }
  .rail-mark-n {
    flex: none;
    margin-left: auto;
    padding-left: 0.5rem;
    text-align: right;
    font: 400 var(--t-xs) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .rail-mark-t {
    min-width: 0;
  }
  .rail-mark[aria-current="true"] {
    color: var(--ink);
    border-left-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, var(--paper));
    }
  }
  .rail-mark[aria-current="true"] .rail-mark-n {
    color: var(--mark);
  }
  .rail-sibs {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .rail-sib {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    font: 400 var(--t-xs) / 1.45 var(--font-body);
    color: var(--ink-2);
    text-decoration: none;
  }
  .rail-sib-ico {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    color: var(--ink-3);
  }
  .rail-sib:hover .rail-sib-ico {
    color: var(--ink-2);
  }
  .rail-sib-t {
    min-width: 0;
  }
  .rail-sib:hover {
    color: var(--ink);
  }
  .w-read, .w-page, .w-wide {
    --content-w: 46rem;
  }
  @media (width >= 64rem) {
    .w-read, .w-page, .w-wide {
      --content-w: calc(var(--w-doc) + var(--w-rail) + var(--rail-gap) + 2 * var(--gutter));
    }
  }
  .appbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .appbar-row {
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3rem;
  }
  .appbar-row {
    --doc-offset: max(0px, calc((100% + 2 * var(--gutter) - var(--content-w)) / 2));
    max-width: none;
    display: grid;
    grid-template-columns: minmax(min-content, var(--doc-offset)) minmax(0, 1fr) auto;
    column-gap: 0;
  }
  .appbar-lead {
    padding-right: 0.875rem;
  }
  .appbar-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  @media (width >= 64rem) {
    .appbar-nav > .rail-btn {
      position: absolute;
      right: 100%;
      top: 50%;
      margin: 0 0.375rem 0 0;
      transform: translateY(-50%);
    }
  }
  .appbar-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  .appbar-sub {
    border-top: 1px solid var(--rule);
  }
  .appbar-sub .appbar-row {
    min-height: 2.625rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    font: 500 0.9375rem/1 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  @media (width < 64rem) {
    .brand-word {
      display: none;
    }
  }
  .brand-mark {
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--mark);
    color: var(--mark-on);
    font: 500 0.6875rem/1 var(--font-label);
  }
  .tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  @media (width < 48rem) {
    .tabs {
      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
    }
  }
  .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.9375rem;
    margin-bottom: -1px;
    border: 0;
    background: none;
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .tab-ico {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }
  .tab:hover {
    color: var(--ink);
  }
  .tab[aria-selected="true"] {
    color: var(--mark);
    font-weight: 500;
    border-bottom-color: var(--mark);
  }
  .tab-count {
    font: 400 var(--t-label) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .tab[aria-selected="true"] .tab-count {
    color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--mark) 70%, var(--ink-3));
    }
  }
  .navbar {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
  }
  .navbar-inner {
    max-width: var(--w-shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  @media (width >= 1024px) {
    .navbar-inner {
      padding-inline: 1.5rem;
    }
  }
  .navbar-inner .tabs {
    border-bottom: 0;
  }
  .crumbs {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--ink-3);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .crumbs::-webkit-scrollbar {
    display: none;
  }
  .crumbs > * {
    flex: none;
  }
  .crumbs a {
    color: var(--ink-2);
  }
  .crumbs a:hover {
    color: var(--ink);
  }
  .crumbs .sep {
    display: inline-grid;
    place-items: center;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--ink-3);
  }
  .crumbs .sep svg, .crumbs .crumb-home svg {
    width: 100%;
    height: 100%;
  }
  .crumbs .crumb-home {
    display: inline-grid;
    place-items: center;
    width: 1.0625rem;
    height: 1.0625rem;
  }
  .account-ico {
    width: 1.25rem;
    height: 1.25rem;
  }
  .account-ico use {
    width: 100%;
    height: 100%;
  }
  .crumbs .here {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (width < 48rem) {
    .crumbs .trail {
      display: none;
    }
    .crumbs a.trail:last-of-type {
      display: inline;
    }
    .crumbs .sep.trail:has(+ .here) {
      display: inline-grid;
    }
  }
  @media (width < 40rem) {
    .topbar-optional {
      display: none;
    }
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font: 500 var(--t-sm) / 1 var(--font-body);
    padding: 0.5625rem 0.9375rem;
    border-radius: var(--r-md);
    border: 1px solid var(--rule-2);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
  }
  .btn:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
  }
  .btn-primary {
    background: var(--mark);
    border-color: var(--mark);
    color: var(--mark-on);
  }
  .btn-primary:hover {
    background: var(--mark-hover);
    border-color: var(--mark-hover);
  }
  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
  }
  .icon-btn:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .footnav {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
  }
  .footrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
  }
  .footrow > :last-child {
    justify-self: end;
    text-align: right;
  }
  .footlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--ink-2);
    font-size: var(--t-sm);
  }
  .footlink:hover {
    color: var(--ink);
  }
  .footlink svg {
    flex: none;
  }
  .footlink span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .footlink[data-empty] {
    visibility: hidden;
  }
  .footlink-n {
    font-family: var(--font-label);
    font-size: var(--t-xs);
  }
  .footlink[data-level="concept"] {
    color: var(--mark);
    font-weight: 500;
  }
  .footmid {
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .footrow > :first-child, .footrow > :last-child {
    justify-self: stretch;
    display: flex;
    min-width: 0;
  }
  .footrow > :first-child {
    justify-content: flex-start;
  }
  .footrow > :last-child {
    justify-content: flex-end;
  }
  .footlink {
    max-width: 100%;
  }
  .footlink-ico {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .footrow-mid {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
  }
  .mute {
    color: var(--ink-2);
  }
  .small {
    font-size: var(--t-sm);
  }
  .dot-sep {
    color: var(--rule-2);
    margin-inline: 0.4375rem;
  }
}
@layer blocks {
  .doc {
    padding-block: 2rem 6rem;
  }
  .doc > * {
    max-width: var(--w-block);
  }
  .doc > * + * {
    margin-top: var(--s-block);
  }
  .doc > p + p {
    margin-top: var(--s-para);
  }
  .eyebrow {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .doc-title {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    margin-top: 0.625rem !important;
  }
  .lede {
    color: var(--ink-2);
    font-size: var(--t-sm);
  }
  .doc > .sec {
    max-width: none;
    margin-top: var(--s-sec);
  }
  .subnav + .sec {
    margin-top: 2.5rem !important;
  }
  .subnav + .sec > .sec-head {
    border-top: 0;
    padding-top: 0;
  }
  .subnav + .sec > .sec-head .sec-n {
    top: 0.25rem;
  }
  .sec-head {
    position: relative;
    max-width: var(--w-block);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .sec-n {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  @media (width >= 1024px) {
    .sec-n {
      position: absolute;
      left: -2.75rem;
      top: 1.6875rem;
    }
  }
  .sec-h {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    line-height: 1.35;
    letter-spacing: -0.012em;
    margin-top: 0.375rem;
  }
  @media (width >= 1024px) {
    .sec-h {
      margin-top: 0;
    }
  }
  .sec-body > * {
    max-width: var(--w-block);
  }
  .sec-body > * + * {
    margin-top: var(--s-block);
  }
  .sec-body > p + p {
    margin-top: var(--s-para);
  }
  .sec-body {
    margin-top: 1.375rem;
  }
  h3.sub {
    font-family: var(--font-body);
    font-size: var(--t-h3);
    font-weight: 600;
    line-height: 1.45;
  }
  .sec-body > h3.sub + * {
    margin-top: 0.75rem;
  }
  .sec-body > * + h3.sub {
    margin-top: var(--s-sub);
  }
  .term {
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-2);
  }
  .doc strong, .sec-body strong, .concept strong, .notes strong {
    font-weight: 600;
    color: var(--ink);
  }
  .fig {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    padding: 1.25rem;
    background: var(--paper);
  }
  .fig > svg, .fig > img {
    display: block;
    margin-inline: auto;
    width: 100%;
    max-width: calc(var(--fig-vb, 100vw) * var(--fig-max-scale, 1.25));
    height: auto;
  }
  .fig > svg {
    font-size: var(--fig-fs, 12px);
  }
  .fig-fill > svg {
    max-width: 100%;
  }
  .fig-zoom {
    position: relative;
    cursor: zoom-in;
  }
  .fig-zoom::after {
    content: "Tap to enlarge";
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.3125rem 0.5625rem;
  }
  .fig-cap {
    margin-top: 0.75rem;
    padding-top: 0.6875rem;
    border-top: 1px solid var(--rule);
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .fig-cap b {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 0.5rem;
  }
  .fig-margin {
    max-width: var(--w-block);
  }
  @media (width >= 1440px) {
    .doc > .fig-margin, .sec-body > .fig-margin {
      float: right;
      clear: right;
      width: 13rem;
      max-width: 13rem;
      margin: 0.25rem 0 1.5rem 2rem;
      padding: 0.875rem;
      font-size: var(--t-xs);
    }
    .fig-margin .fig-cap {
      font-size: 0.75rem;
      margin-top: 0.625rem;
      padding-top: 0.5625rem;
    }
  }
  @media (width >= 40rem) and (width < 90rem) {
    .fig-margin {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: 1.25rem;
      align-items: center;
    }
    .fig-margin .fig-cap {
      margin-top: 0;
      padding: 0 0 0 1.25rem;
      border-top: 0;
      border-left: 1px solid var(--rule);
    }
  }
  .callout {
    --hue: var(--h-note);
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) var(--tint), var(--paper));
    }
    padding: 0.875rem 1.125rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink);
  }
  .callout-mark {
    --hue: var(--mark);
  }
  .callout-why {
    --hue: var(--h-why);
  }
  .callout-warn {
    --hue: var(--h-warn);
  }
  .callout-good {
    --hue: var(--h-good);
  }
  .callout-bad {
    --hue: var(--h-bad);
  }
  .callout-label {
    display: block;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--hue) 78%, var(--ink));
    }
    margin-bottom: 0.4375rem;
  }
  .callout p + p {
    margin-top: 0.6875rem;
  }
  .tablewrap {
    overflow-x: auto;
  }
  :is(.ap-qstem, .ap-restem, .rp-qbody, .qz-q) {
    & > p {
      font-size: var(--t-body);
      line-height: var(--lh-body);
    }
    & > p + p, & > p + table, & > table + p {
      margin-top: 0.9rem;
    }
  }
  :is(.ap-qstem, .ap-restem, .rp-qbody, .qz-q) table, table.tbl {
    --tbl-gutter: 1rem;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    line-height: 1.55;
    & th {
      text-align: left;
      font-weight: 600;
      color: var(--ink);
      padding: 0 var(--tbl-gutter) 0.625rem 0;
      border-bottom: 1px solid var(--rule-2);
      white-space: nowrap;
    }
    & td {
      padding: 0.6875rem var(--tbl-gutter) 0.6875rem 0;
      border-bottom: 1px solid var(--rule);
      color: var(--ink-2);
      vertical-align: top;
    }
    & td:first-child {
      color: var(--ink);
    }
    & :is(th, td):last-child {
      padding-right: 0;
    }
    & tbody tr:last-child td {
      border-bottom: 0;
    }
  }
  :is(.ap-qstem, .ap-restem, .rp-qbody, .qz-q) table {
    --tbl-gutter: 2.5rem;
    max-width: max-content;
  }
  :is(.ap-qstem, .ap-restem, .rp-qbody, .qz-q) td {
    padding-block: 0.75rem;
    line-height: var(--lh-body);
  }
  .num {
    font-variant-numeric: tabular-nums;
  }
  code, .mono {
    font-family: var(--font-label);
    font-size: 0.8125em;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    padding: 0.0625rem 0.3125rem;
    color: var(--ink);
  }
  .panel {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .panel-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 1.125rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .panel-body {
    padding: 1.125rem;
  }
  .step {
    position: relative;
    padding: 0 0 1.125rem 2.25rem;
    border-left: 1px solid var(--rule);
    margin-left: 0.6875rem;
  }
  .step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
  .step::before {
    counter-increment: seq;
    content: counter(seq);
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 0.625rem/1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .step-h {
    font-size: var(--t-sm);
    font-weight: 600;
    margin-bottom: 0.3125rem;
  }
  .step-b {
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .accordion {
    border-top: 1px solid var(--rule);
  }
  .acc-item {
    border-bottom: 1px solid var(--rule);
  }
  .acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.8125rem 0.25rem;
    border: 0;
    background: none;
    font: 500 var(--t-sm) / 1.4 var(--font-body);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .acc-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid var(--ink-3);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform 0.15s ease;
    flex: none;
  }
  .acc-item[open] .acc-btn::before {
    transform: rotate(90deg);
  }
  .acc-btn::-webkit-details-marker {
    display: none;
  }
  .acc-body {
    padding: 0 0.25rem 1rem 1.4375rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .part {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
  }
  .part + .part {
    margin-top: 3rem;
  }
  @container doc (width >= 38rem) {
    .part {
      grid-template-columns: 10rem minmax(0, 1fr);
      gap: 2rem;
      padding-top: 2.25rem;
    }
  }
  @container doc (width >= 52rem) {
    .part {
      grid-template-columns: 13rem minmax(0, 1fr);
      gap: 2.5rem;
    }
  }
  .part .rows .row:first-child {
    border-top: 0;
  }
  .part-label {
    font: 400 var(--t-label) / 1.5 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .part-h {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 1.25;
    letter-spacing: -0.018em;
  }
  .part-sub {
    margin-top: 0.5rem;
    color: var(--ink-2);
    font-size: var(--t-sm);
  }
  .rows {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
  }
  .row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0 0.875rem;
    align-items: baseline;
    padding: 0.9375rem 0.5rem 0.9375rem 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
  }
  .rows .row:first-child {
    border-top: 1px solid var(--rule);
  }
  .row:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .row-n {
    font: 400 var(--t-label) / 1.6 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .row-t {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .row-d {
    grid-column: 2;
    margin-top: 0.3125rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .row-meta {
    grid-row: 1;
    grid-column: 3;
    font-size: var(--t-xs);
    color: var(--ink-3);
    white-space: nowrap;
  }
  @media (width < 48rem) {
    .row-d {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
  }
  .row-meta .chip, .fold-meta .chip {
    min-width: 6.25rem;
    justify-content: center;
  }
  .chip::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--dot, var(--st-new));
    flex: none;
  }
  .chip-new {
    --dot: var(--st-new);
  }
  .chip-learning {
    --dot: var(--st-learning);
  }
  .chip-practising {
    --dot: var(--st-practising);
  }
  .chip-mastered {
    --dot: var(--st-mastered);
  }
  .chip-plain::before {
    display: none;
  }
  .meter {
    height: 3px;
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 10%, transparent);
    }
    overflow: hidden;
  }
  .meter > i {
    display: block;
    width: var(--fill, 100%);
    height: 100%;
    background: var(--dot, var(--st-learning));
  }
  .stat {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
  }
  .stat-v {
    font: 500 1.25rem/1 var(--font-display);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stat-l {
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 1.5rem 1.25rem;
    margin-top: 1.5rem;
  }
  .book-cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--paper-2);
    font: 500 var(--t-xs) / 1.4 var(--font-display);
    color: var(--ink-2);
    text-align: center;
    padding: 0.75rem;
  }
  .book-t {
    margin-top: 0.625rem;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink);
  }
  .book-m {
    margin-top: 0.1875rem;
    font-size: 0.75rem;
    color: var(--ink-3);
  }
  .stack {
    display: flex;
    flex-direction: column;
  }
  .rowflex {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
  }
  .clear {
    clear: both;
  }
}
@layer blocks {
  .formula-card {
    margin-top: 1.75rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
  }
  .fc-figure {
    margin: 0;
    padding: 1.5rem 1.25rem 1.125rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    border-bottom: 1px solid var(--rule);
  }
  .fc-figure svg {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    max-width: calc(var(--fig-vb, 100%) * 1.15);
  }
  .fc-figure figcaption {
    margin-top: 1rem;
    font-size: var(--t-xs);
    line-height: 1.65;
    color: var(--ink-3);
    text-align: center;
    max-width: 34rem;
    margin-inline: auto;
  }
  .sign-convention {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .sc-label {
    font: 400 var(--t-label) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: none;
  }
  .sc-rule {
    flex: 1 1 16rem;
    min-width: 0;
  }
  .sc-plus, .sc-minus {
    font-family: var(--font-label);
    color: var(--ink);
  }
  .fc-anatomy {
    padding: 0;
  }
  .fc-anatomy-formula {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
  }
  .fc-anatomy-vars {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 34rem) {
    .fc-anatomy-vars {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .fc-anatomy-var {
    display: grid;
    grid-template-columns: minmax(1.75rem, max-content) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  @container doc (width >= 34rem) {
    .fc-anatomy-var:nth-child(odd) {
      border-right: 1px solid var(--rule);
    }
    .fc-anatomy-vars > .fc-anatomy-var:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      border-right: 0;
    }
  }
  .fc-anatomy-var-sym {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--ink);
    line-height: 1.35;
  }
  .fc-anatomy-var-sym .katex {
    font-size: 1em !important;
  }
  .fc-anatomy-var-desc strong {
    font-weight: 600;
    color: var(--ink);
  }
  .fc-anatomy-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule);
  }
  .fc-cond-pill {
    padding: 0.3125rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .fc-anatomy-insight {
    padding: 0.9375rem 1.25rem;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .fc-specialization > summary {
    display: block;
    cursor: pointer;
    list-style: none;
  }
  .fc-specialization > summary::-webkit-details-marker {
    display: none;
  }
  .fc-spec-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--rule);
  }
  .fc-specialization[open] .fc-spec-head {
    border-bottom-color: var(--rule);
  }
  .fc-specialization > summary:hover .fc-spec-head {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .block-title {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .fc-spec-n {
    margin-left: auto;
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
  }
  .fc-spec-body {
    padding: 0 1.25rem 1.25rem;
  }
  .fc-spec-body .tablewrap {
    margin-top: 1.125rem;
  }
  .fc-specialization .hint {
    margin-top: 0.875rem;
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink-3);
  }
  .fc-variations {
    padding: 1.125rem 1.25rem 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .fc-variations > * + * {
    margin-top: 0.875rem;
  }
  .key-insight {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.75rem;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink);
  }
  .key-insight-icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.3125rem;
    border-radius: 50%;
    border: 1px solid var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 18%, var(--paper));
    }
  }
  .key-insight-text strong {
    font-weight: 600;
  }
  .t-good {
    --hue: var(--h-good);
  }
  .t-warn {
    --hue: var(--h-warn);
  }
  .t-bad {
    --hue: var(--h-bad);
  }
  .t-note {
    --hue: var(--h-note);
  }
  .info-card-structural, .info-card-primary, .info-card-formula, .info-card-positive, .info-card-negative, .info-card-caution, .info-card-verify, .info-card-experiment, .info-card-procedural, .info-card-reference, .info-card-origin, .content-box-structural, .content-box-primary, .content-box-formula, .content-box-positive, .content-box-negative, .content-box-caution, .content-box-verify, .content-box-experiment, .content-box-procedural, .content-box-reference, .content-box-origin {
    --hue: var(--rule-2);
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  :is(.grid, .cards, .compare-grid, .paired) > :is( [class^="info-card-"]:not(.info-card-title), [class^="content-box-"]:not(.content-box-header, .content-box-title, .content-box-body) ) {
    margin-top: 0;
  }
  .info-card-positive, .content-box-positive {
    --hue: var(--h-good);
  }
  .info-card-verify, .content-box-verify {
    --hue: var(--h-good);
  }
  .info-card-caution, .content-box-caution {
    --hue: var(--h-warn);
  }
  .info-card-negative, .content-box-negative {
    --hue: var(--h-bad);
  }
  .info-card-title, .content-box-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4375rem;
  }
  .info-card-title + *, .content-box-body > :first-child {
    margin-top: 0;
  }
  .content-box-header {
    padding-bottom: 0.625rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .content-box-header .content-box-title {
    margin-bottom: 0;
  }
  icon-box {
    --hue: var(--rule-2);
    --tone-ink: var(--ink-3);
    display: grid;
    grid-template-columns: 1.125rem minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1.125rem 0.875rem 0.9375rem;
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  icon-box[type="right"], icon-box[type="verify"] {
    --hue: var(--h-good);
    --tone-ink: var(--h-good);
  }
  icon-box[type="caution"], icon-box[type="edge-cases"] {
    --hue: var(--h-warn);
    --tone-ink: var(--h-warn);
  }
  icon-box[type="mistake"], icon-box[type="wrong"] {
    --hue: var(--h-bad);
    --tone-ink: var(--h-bad);
  }
  icon-box > svg, .ib-ico {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--tone-ink);
    margin-top: 0.1875rem;
  }
  .icon-box-content > * + * {
    margin-top: 0.5rem;
  }
  .icon-box-content p {
    margin: 0;
  }
  .icon-eyebrow {
    display: block;
    font: 400 var(--t-label) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.25rem;
  }
  .card-why {
    --hue: var(--rule-2);
    display: block;
    margin-top: 1.25rem;
    padding: 0.875rem 1.125rem;
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--h-why);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-why) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .card-why-label, .recall-strip-label {
    display: block;
    font: 400 var(--t-label) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.25rem;
  }
  .recall-strip {
    margin-top: 1.25rem;
    padding: 0.75rem 0;
    border-block: 1px solid var(--rule);
  }
  .recall-strip-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
  }
  .recall-chip {
    padding: 0.3125rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .recall-chip strong {
    color: var(--ink);
    font-weight: 500;
  }
  .recall-strip.recall-inline {
    padding: 0.5rem 0;
    border-top: 0;
  }
  .recall-strip.recall-inline .recall-strip-label:empty {
    display: none;
  }
  .hint {
    margin-top: 0.875rem;
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink-3);
  }
  .step-row, .reason-step, .exp-line, .why-node, .wb-step {
    position: relative;
    padding: 0 0 1.25rem 2.5rem;
    border-left: 1px solid var(--rule);
    margin-left: 0.6875rem;
  }
  .step-row:last-child, .reason-step:last-child, .exp-line:last-child, .why-node:last-child, .wb-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
  .step-row::before, .reason-step::before, .exp-line::before, .wb-step::before {
    counter-increment: seq;
    content: counter(seq);
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 0.625rem/1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .step-row-num {
    display: none;
  }
  .step-row-action, .why-ask, .wb-claim {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .step-row-rule, .why-because, .exp-line-why, .wb-numeric, .wb-why {
    margin-top: 0.4375rem;
    padding-block: 0.125rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
    overflow-wrap: anywhere;
    overflow-x: auto;
  }
  .step-row-math, .why-show, .wb-math {
    margin-top: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--r-sm);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, var(--paper));
    }
    overflow-x: auto;
  }
  .katex-display > .katex {
    font-size: calc(var(--reader-font-size) * 1.21);
  }
  .why-show:not(:has(.katex-display)) {
    background: none;
    padding: 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .why-because-label, .wb-why-label, .exp-line-label {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 0.4375rem;
  }
  .why-node > .why-rail {
    position: static;
  }
  .why-node .why-badge {
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 0.625rem/1 var(--font-label);
    color: var(--ink-2);
  }
  .why-node[data-accent="positive"] .why-badge {
    border-color: var(--h-good);
    color: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 14%, var(--paper));
    }
  }
  .why-dash {
    display: none;
  }
  .why-conclusion {
    padding: 0.875rem 1rem;
    border-left: 2px solid var(--h-good);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    line-height: 1.7;
  }
  .exp-line::before {
    content: "";
    counter-increment: none;
  }
  .exp-line-phase {
    position: absolute;
    left: -0.6875rem;
    top: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 0.5625rem/1 var(--font-label);
    color: var(--ink-3);
    text-transform: uppercase;
  }
  .factors, .diagram-checklist, .graph-spec, .case-rows, .comparison {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .factor-item, .check-item, .graph-feature, .case-rows-row, .comparison-row {
    display: grid;
    gap: 0.3125rem 1.5rem;
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  @container doc (width >= 34rem) {
    .factor-item, .check-item, .graph-feature, .case-rows-row {
      grid-template-columns: 13rem minmax(0, 1fr);
    }
    .comparison-row {
      grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .factor-item > :first-child, .check-item > :first-child, .graph-feature > :first-child, .case-rows-label, .comparison-label {
    font-weight: 500;
    color: var(--ink);
  }
  .check-item > :first-child {
    position: relative;
    padding-left: 1.5rem;
  }
  .check-item > :first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
  }
  .case-rows-title, .graph-spec-title, .factors-title {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 0.625rem;
  }
  .cards.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cards.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @container doc (width < 34rem) {
    .cards.cols-2, .cards.cols-3, .cards.cols-4 {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .card, .compare-card {
    padding: 0.9375rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .card-title, .compare-title {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.3125rem;
  }
  .card-sub {
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .compare-note {
    margin-top: 0.75rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .tbl td.tb-label, .tbl th.tb-label {
    font-weight: 500;
    color: var(--ink);
  }
  .tbl td.tb-code {
    font-family: var(--font-label);
    font-size: 0.8125em;
  }
  .tbl td.tb-positive, .tbl th.tb-positive, .tb-positive {
    color: var(--h-good);
  }
  .tbl td.tb-negative, .tbl th.tb-negative, .tb-negative {
    color: var(--h-bad);
  }
  .tbl td.tb-warn, .tbl th.tb-warn, .tb-warn {
    color: var(--h-warn);
  }
  .text-center {
    text-align: center;
  }
  .compact {
    padding-block: 0.375rem !important;
  }
  tr.tb-result td {
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) var(--tint), var(--paper));
    }
    font-weight: 500;
    color: var(--ink);
  }
  tr.tb-overview td {
    background: none;
    font-size: var(--t-xs);
    color: var(--ink-3);
    font-weight: 400;
  }
  .hl-key {
    font-weight: 500;
    color: var(--ink);
    box-shadow: inset 0 -0.4em 0 var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 -0.4em 0 color-mix(in srgb, var(--mark) 14%, transparent);
    }
  }
  .hl-index-1 {
    color: var(--h-note);
    font-weight: 500;
  }
  .hl-index-2 {
    color: var(--h-warn);
    font-weight: 500;
  }
  .hl-index-3 {
    color: var(--h-good);
    font-weight: 500;
  }
  .hl-positive {
    color: var(--h-good);
  }
  .hl-caution {
    color: var(--h-warn);
  }
  .hl-negative {
    color: var(--h-bad);
  }
  .worked-build {
    margin-top: 1.375rem;
  }
  .worked-build-header {
    margin-bottom: 1.5rem;
  }
  .wb-goal {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink);
  }
  .wb-given {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.8;
    color: var(--ink-2);
  }
  table[data-compare] th + th, table[data-compare] td + td {
    border-left: 1px solid var(--rule);
  }
  table[data-compare] thead th {
    color: var(--ink);
    font-weight: 600;
  }
  table[data-compare] thead th:first-child {
    font-weight: 400;
    color: var(--ink-3);
  }
  table[data-compare] tbody td:first-child {
    color: var(--ink);
    font-weight: 500;
  }
  .comparison-head {
    display: grid;
    gap: 0.3125rem 1.5rem;
    padding: 0 0 0.6875rem;
    font: 400 var(--t-label) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  @container doc (width >= 34rem) {
    .comparison-head {
      grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    }
    .comparison-head > * + *, .comparison-row > * + * {
      padding-left: 1.5rem;
      border-left: 1px solid var(--rule);
    }
    .comparison-row {
      gap: 0.3125rem 0;
    }
    .comparison-head {
      gap: 0.3125rem 0;
    }
  }
  .comparison-head > :nth-child(n + 2) {
    color: var(--ink);
  }
  .hl-index-1 {
    color: var(--legend-1);
    font-weight: 500;
  }
  .hl-index-2 {
    color: var(--legend-2);
    font-weight: 500;
  }
  .hl-index-3 {
    color: var(--legend-3);
    font-weight: 500;
  }
  .compare-grid, .paired {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.375rem;
    padding-block: 1.25rem;
    border-block: 1px solid var(--rule);
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 34rem) {
    .compare-grid, .paired {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
    }
    .compare-grid > * + *, .paired > * + * {
      padding-left: 1.75rem;
      border-left: 1px solid var(--rule);
    }
    .compare-grid > :first-child, .paired > :first-child {
      padding-right: 1.75rem;
    }
  }
  .compare-card {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .compare-title {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
  }
  .compare-card[data-verdict="positive"] .compare-title, .content-box-positive .content-box-title {
    color: var(--h-good);
  }
  .compare-card[data-verdict="negative"] .compare-title, .content-box-negative .content-box-title {
    color: var(--h-bad);
  }
  .compare-card[data-verdict]::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-bottom: 0.75rem;
    background: var(--rule-2);
  }
  .compare-card[data-verdict="positive"]::before {
    background: var(--h-good);
  }
  .compare-card[data-verdict="negative"]::before {
    background: var(--h-bad);
  }
  .anatomy-tour-figure {
    margin: 1.375rem 0 0;
  }
  .anatomy-tour-figure img, .anatomy-tour-figure svg {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
  }
  .anatomy-tour-figure figcaption {
    margin-top: 0.875rem;
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink-3);
    text-align: center;
  }
  .anatomy-tour-list {
    margin: 1.375rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
    counter-reset: tour;
  }
  .anatomy-tour-list > li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .tour-num {
    counter-increment: tour;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    font: 400 0.625rem/1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    margin-top: 0.125rem;
  }
  .tour-name {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .tour-name em {
    font-weight: 400;
    color: var(--ink-3);
    font-style: italic;
  }
  .tour-role {
    margin-top: 0.25rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .sibling-toggle {
    margin-top: 1.375rem;
  }
  .sibling-toggle-bar {
    display: inline-flex;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
  }
  .sibling-toggle-bar button {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    border: 0;
    border-radius: 999px;
    background: none;
    font: 500 var(--t-sm) / 1 var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
  }
  .sibling-toggle-bar button[aria-pressed="true"], .sibling-toggle-bar button.is-active {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  }
  .sibling-toggle-bar .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--vhue, var(--ink-3));
  }
  .sibling-toggle-bar button[data-view="1"] {
    --vhue: var(--legend-1);
  }
  .sibling-toggle-bar button[data-view="2"] {
    --vhue: var(--legend-2);
  }
  .sibling-figure {
    position: relative;
    margin: 1.25rem 0 0;
    padding: 1.25rem 1.25rem 1rem;
    border-left: 2px solid var(--vhue, var(--rule-2));
    background: var(--vhue, var(--ink));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--vhue, var(--ink)) 4%, var(--paper));
    }
  }
  .sibling-figure img, .sibling-figure svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .name-pill {
    display: inline-block;
    margin-top: 0.875rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vhue, var(--ink-3));
  }
  .sibling-caption {
    margin-top: 0.875rem;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .sibling-caption strong {
    color: var(--ink);
  }
  .diagnostic-cue {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-left: 2px solid var(--vhue, var(--rule-2));
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .diagnostic-cue::first-line {
    color: var(--ink);
  }
  .sibling-features {
    margin-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .sibling-features-head, .sibling-features-row {
    display: grid;
    gap: 0.3125rem 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  @container doc (width >= 34rem) {
    .sibling-features-head, .sibling-features-row {
      grid-template-columns: 9rem repeat(2, minmax(0, 1fr));
    }
    .sibling-features-head > * + *, .sibling-features-row > * + * {
      padding-left: 1.25rem;
      border-left: 1px solid var(--rule);
    }
  }
  .sibling-features-head {
    font: 400 var(--t-label) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 0;
  }
  .sibling-features-head > [data-view="1"] {
    color: var(--legend-1);
  }
  .sibling-features-head > [data-view="2"] {
    color: var(--legend-2);
  }
  .sibling-features-row .label {
    color: var(--ink);
    font-weight: 500;
  }
  .figrows {
    margin-top: 1.375rem;
    border-top: 1px solid var(--rule);
  }
  .figrow {
    display: grid;
    gap: 0.875rem 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
    grid-template-areas: "label" "fig" "body";
  }
  @container doc (width >= 34rem) {
    .figrow {
      grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
      grid-template-areas: "label body" "fig   body";
    }
  }
  @container doc (width >= 52rem) {
    .figrow {
      grid-template-columns: 10rem minmax(14rem, 18rem) minmax(0, 1fr);
      grid-template-areas: "label fig body";
    }
  }
  .figrow-label {
    grid-area: label;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .figrow-fig {
    grid-area: fig;
    margin: 0;
  }
  .figrow-fig svg, .figrow-fig img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
  }
  .figrow-fig figcaption {
    margin-top: 0.4375rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .figrow-body {
    grid-area: body;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .has-fig {
    display: grid;
    gap: 0.875rem 1.25rem;
    grid-template-areas: "fig" "text";
  }
  @container doc (width >= 40rem) {
    .has-fig {
      grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
      grid-template-areas: "fig text";
      align-items: start;
    }
  }
  .has-fig > figure {
    grid-area: fig;
    margin: 0;
  }
  .has-fig > figure svg, .has-fig > figure img {
    display: block;
    width: 100%;
    height: auto;
  }
  .has-fig > .has-fig-text {
    grid-area: text;
  }
  .compare-grid[data-figs] .compare-card > figure {
    margin: 0 0 0.875rem;
  }
  .compare-grid[data-figs] .compare-card > figure svg, .compare-grid[data-figs] .compare-card > figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--fig-ar, 2 / 1);
  }
  .card > figure {
    margin: 0 0 0.75rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.75rem;
  }
  .card > figure svg, .card > figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--fig-ar, 16 / 10);
  }
  .fig-inline {
    float: right;
    width: 10rem;
    max-width: 45%;
    margin: 0.25rem 0 0.875rem 1.25rem;
  }
  .fig-inline svg, .fig-inline img {
    display: block;
    width: 100%;
    height: auto;
  }
  @container doc (width < 30rem) {
    .fig-inline {
      float: none;
      width: 100%;
      max-width: 16rem;
      margin: 1rem 0;
    }
  }
  .schem {
    color: var(--ink-2);
  }
  .schem .drive {
    stroke: var(--mark);
    fill: none;
  }
  .schem .drive-t {
    fill: var(--mark);
  }
  .schem .moves {
    stroke: var(--h-bad);
    fill: none;
  }
  .schem .moves-t {
    fill: var(--h-bad);
  }
  .schem .body {
    fill: currentcolor;
    fill-opacity: 0.07;
    stroke: currentcolor;
    stroke-opacity: 0.65;
  }
  .schem .rule-l {
    stroke: currentcolor;
    stroke-opacity: 0.5;
    fill: none;
  }
  .schem .lbl {
    fill: currentcolor;
    fill-opacity: 0.85;
    font-style: italic;
  }
  @container doc (width >= 34rem) {
    .figrows[data-label="head"] .figrow {
      grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
      grid-template-areas: "label label" "fig   body";
    }
  }
  @container doc (width >= 52rem) {
    .figrows[data-label="head"] .figrow {
      grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
      grid-template-areas: "label label" "fig   body";
    }
  }
  .figrows[data-label="head"] .figrow-label {
    font-size: var(--t-body);
    padding-bottom: 0.25rem;
  }
  .worked-build-header {
    position: relative;
    margin: 0 0 0 0.6875rem;
    padding: 0 0 1.5rem 2.5rem;
    border-left: 1px solid var(--rule);
  }
  .worked-build-header::before {
    content: "";
    position: absolute;
    left: -0.6875rem;
    top: 0.0625rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px color-mix(in srgb, var(--ink) 30%, var(--paper));
    }
  }
  .worked-build .wb-goal {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink);
  }
  .worked-build .wb-given {
    margin-top: 0.625rem;
    padding-top: 0;
    border-top: 0;
    font-size: var(--t-sm);
    line-height: 1.8;
    color: var(--ink-2);
  }
  .worked-build .wb-result {
    position: relative;
    margin: 0 0 0 0.6875rem;
    padding: 0 0 0 2.5rem;
    border-left: 1px solid transparent;
    background: none;
    border-radius: 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink);
  }
  .worked-build .wb-result::before {
    content: "✓";
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 14%, var(--paper));
    }
    border: 1px solid var(--h-good);
    color: var(--h-good);
    font-size: 0.6875rem;
  }
  .worked-build .wb-result b {
    color: var(--h-good);
  }
  .worked-build .wb-steps > .wb-step:last-child {
    border-left-color: var(--rule);
    padding-bottom: 1.5rem;
  }
  .wb-steps {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .worked-build .wb-goal {
    padding: 0;
    border-left: 0;
    background: none;
  }
  .worked-steps, .step-rows, .steps, .reasoning, .experiment, .why-flow, .wb-steps {
    counter-reset: seq;
  }
}
@layer blocks {
  .section-card, .section-box, .sub-section-box {
    max-width: none;
    margin: var(--s-sub) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .section-card:first-child, .section-box:first-child {
    margin-top: 0;
  }
  .section-card > *, .section-box > *, .sub-section-body > * {
    max-width: var(--w-block);
  }
  .section-card > * + *, .section-box > * + * {
    margin-top: var(--s-block);
  }
  .section-card > p + p, .section-box > p + p {
    margin-top: var(--s-para);
  }
  .section-card-title, .section-heading, .section-title, .sub-section-title {
    position: relative;
    display: block;
    max-width: var(--w-block);
    margin: 0;
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .section-card:first-child > .section-card-title, .section-box:first-child > .section-heading {
    border-top: 0;
    padding-top: 0;
  }
  .sub-section-title {
    font-family: var(--font-body);
    font-size: var(--t-h3);
    font-weight: 600;
    border-top: 0;
    padding-top: 0;
  }
  .section-card-title + *, .section-heading + *, .section-title + * {
    margin-top: 1.375rem;
  }
  .section-num, .sub-section-num {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  @media (width >= 1024px) {
    .section-title-wrap {
      position: relative;
    }
    .section-title-wrap > .section-num {
      position: absolute;
      left: -2.75rem;
      top: 0.1875rem;
    }
  }
  .title-text {
    color: inherit;
    font: inherit;
  }
  .wb-step:has(> .wb-step-num)::before, .reason-step:has(> .reason-num)::before, .step-row:has(> .step-row-num)::before {
    content: none;
    counter-increment: none;
  }
  .wb-step > .wb-step-num, .reason-step > .reason-num, .step-row > .step-row-num {
    display: grid;
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 0.625rem/1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .wb-step-body, .reason-content, .step-row-content, .worked-steps-body, .why-body {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .worked-steps-problem {
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: 1.125rem;
  }
  .step > .step-num {
    display: none;
  }
  .step-content {
    min-width: 0;
  }
  .step-action {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .step-instruction {
    margin-top: 0.4375rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .card-why-text {
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .recall {
    --hue: var(--h-note);
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .recall-term {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4375rem;
  }
  .recall-definition + .recall-facts {
    margin-top: 0.75rem;
  }
  .recall-facts ul {
    margin: 0;
    padding-left: 1.125rem;
  }
  .recall-facts li + li {
    margin-top: 0.25rem;
  }
  .overview-grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 34rem) {
    .overview-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .mini-card {
    padding: 0.9375rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: none;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .mini-name {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.3125rem;
  }
  .mini-rule {
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .mini-step {
    margin-top: 0.5rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .pedagogy-cues {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .pedagogy-cue-row {
    display: grid;
    gap: 0.3125rem 1.5rem;
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  @container doc (width >= 34rem) {
    .pedagogy-cue-row {
      grid-template-columns: 13rem minmax(0, 1fr);
    }
  }
  .pedagogy-cue-tag {
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
  }
  .pedagogy-cue-body {
    min-width: 0;
  }
  svg.svg-figure {
    display: block;
    max-width: var(--w-block);
    width: 100%;
    height: auto;
    margin-inline: auto;
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .svg-align {
    display: block;
    margin-inline: auto;
  }
  .figure-font {
    font-family: var(--font-body);
  }
  .figure-font text {
    fill: currentcolor;
  }
  .cards {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .cards.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cards.c2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards.c3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @container doc (width < 34rem) {
    .cards.cols-5, .cards.c2, .cards.c3 {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .card-why {
    background: none;
    border-left-color: var(--h-why);
  }
}
@layer pages {
  .gauge {
    position: relative;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 3%, var(--paper));
    }
    padding: 0.5rem 1.125rem 0.625rem;
    display: block;
    color: inherit;
  }
  .gauge-dial {
    position: relative;
    width: 8.625rem;
    margin: 0 auto;
  }
  .gauge-dial svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .gauge-track {
    fill: none;
    stroke: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--ink) 11%, transparent);
    }
    stroke-width: 9;
    stroke-linecap: round;
  }
  .gauge-fill {
    fill: none;
    stroke: var(--mark);
    stroke-width: 9;
    stroke-linecap: round;
  }
  .gauge-dot {
    fill: var(--mark);
  }
  .gauge-val {
    position: absolute;
    inset: auto 0 0.375rem;
    text-align: center;
    font: 500 1.5rem/1 var(--font-display);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .gauge-val i {
    font: 400 var(--t-xs)/1 var(--font-body);
    font-style: normal;
    color: var(--ink-2);
  }
  .gauge-val small {
    display: block;
    margin-top: 0.25rem;
    font: 400 var(--t-nano)/1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .gauge-bars {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.375rem;
  }
  .gauge-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font: 400 var(--t-nano)/1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bar, var(--ink-2));
    margin-bottom: 0.1875rem;
  }
  .gauge-bar-head b {
    font: 500 var(--t-xs)/1 var(--font-body);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .gauge-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 9%, transparent);
    }
    overflow: hidden;
  }
  .gauge-bar > i {
    display: block;
    width: var(--fill, 100%);
    height: 100%;
    border-radius: 999px;
    background: var(--bar);
  }
  .ring {
    position: relative;
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
  }
  .ring svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .ring circle {
    fill: none;
    stroke-width: 2.5;
  }
  .ring .ring-track {
    stroke: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--ink) 11%, transparent);
    }
  }
  .ring .ring-fill {
    stroke: var(--dot, var(--st-learning));
    stroke-linecap: round;
  }
  .ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 400 var(--t-label)/1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .hero {
    display: grid;
    gap: 1.5rem 1.75rem;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
  }
  @container doc (width >= 24rem) {
    .hero > .hero-main {
      grid-template-columns: 8.5rem minmax(0, 1fr);
    }
  }
  @container doc (width >= 36rem) {
    .hero-book, .hero-chapter {
      grid-template-columns: minmax(0, 1fr) 15rem;
    }
  }
  .hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
  }
  .hero-cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0.75rem;
    background: var(--paper-2);
    font: 500 var(--t-xs)/1.4 var(--font-display);
    color: var(--ink-2);
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 1.2;
    letter-spacing: -0.018em;
    margin-top: 0.5rem;
  }
  .hero-sum {
    margin-top: 0.75rem;
    color: var(--ink-2);
    font-size: var(--t-sm);
    max-width: 34rem;
  }
  .hero-stats {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .hero-stats b {
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .hero-mastery {
    align-self: start;
    grid-column: 1 / -1;
    max-width: 26rem;
  }
  @container doc (width >= 36rem) {
    .hero-mastery {
      grid-column: auto;
      max-width: none;
    }
  }
  .board {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (width >= 46rem) {
    .board {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 72rem) {
    .board {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .group {
    --hue: var(--st-new);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .group-fix {
    --hue: var(--st-practising);
  }
  .group-practise {
    --hue: var(--st-learning);
  }
  .group-learn {
    --hue: var(--st-new);
  }
  .group-revise {
    --hue: var(--st-mastered);
  }
  .group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) 7%, var(--paper));
    }
  }
  .group-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hue);
    flex: none;
  }
  .group-name {
    font: 500 var(--t-sm)/1 var(--font-body);
    color: var(--ink);
  }
  .group-n {
    margin-left: auto;
    font: 400 var(--t-label)/1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .group-body {
    display: flex;
    flex-direction: column;
  }
  .task {
    display: block;
    padding: 0.75rem 0.875rem;
    color: inherit;
    border-bottom: 1px solid var(--rule);
  }
  .task:last-child {
    border-bottom: 0;
  }
  .task:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .task-top {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font: 400 var(--t-label)/1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.375rem;
  }
  .task-subj {
    color: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--hue) 70%, var(--ink-2));
    }
  }
  .task-time {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
  }
  .task-t {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
  }
  .task-d {
    margin-top: 0.1875rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
    line-height: 1.5;
  }
  .group-more {
    padding: 0.625rem 0.875rem;
    font-size: var(--t-xs);
    color: var(--ink-2);
    border-top: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, transparent);
    }
  }
  .next {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.375rem;
  }
  @media (width >= 40rem) {
    .next {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }
  .next-eyebrow {
    font: 400 var(--t-label)/1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .next-t {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
    margin-top: 0.4375rem;
  }
  .next-d {
    margin-top: 0.4375rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .streak {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    height: 1.5rem;
  }
  .streak i {
    display: block;
    width: 0.3125rem;
    border-radius: 1px;
    background: var(--st-practising);
  }
  .streak i[data-off] {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 14%, transparent);
    }
  }
  .doc > .full, .sec-body > .full {
    max-width: none;
  }
  .fold {
    border-bottom: 1px solid var(--rule);
  }
  .fold[open] > .fold-head {
    border-bottom: 1px solid var(--rule);
  }
  .fold-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 0.25rem;
    cursor: pointer;
    list-style: none;
  }
  .fold-head::-webkit-details-marker {
    display: none;
  }
  .fold-head::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid var(--ink-3);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform 0.15s ease;
    flex: none;
  }
  .fold[open] > .fold-head::before {
    transform: rotate(90deg);
  }
  .fold-t {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .fold-n {
    font: 400 var(--t-label)/1 var(--font-label);
    color: var(--ink-3);
  }
  .fold-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .fold-body {
    padding: 0.25rem 0 0.875rem;
  }
  .fold-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: 400 var(--t-xs)/1 var(--font-body);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    background: none;
    border-radius: var(--r-md);
    padding: 0.375rem 0.625rem;
    cursor: pointer;
  }
  .fold-all:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .filters {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .filter {
    font: 400 var(--t-xs)/1 var(--font-body);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    background: none;
    border-radius: 999px;
    padding: 0.4375rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .filter:hover {
    border-color: var(--rule-2);
    color: var(--ink);
  }
  .filter[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .filter-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--rule);
    margin-inline: 0.375rem;
  }
  .cards {
    display: grid;
    gap: 1.5rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    margin-top: 1.5rem;
  }
  .bookcard {
    display: block;
    color: inherit;
  }
  .bookcard-art {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0.875rem;
    background: var(--paper-2);
    font: 500 var(--t-sm)/1.35 var(--font-display);
    color: var(--ink-2);
    transition: transform 0.15s ease;
  }
  .bookcard:hover .bookcard-art {
    transform: translateY(-2px);
  }
  .bookcard-t {
    margin-top: 0.6875rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .bookcard-m {
    margin-top: 0.1875rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .bookcard-bar {
    margin-top: 0.5rem;
  }
  .seg {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 5%, var(--paper));
    }
    border: 1px solid var(--rule);
  }
  .seg button {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--ink-2);
    background: none;
    border: 0;
    border-radius: 999px;
    padding: 0.4375rem 0.875rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .seg button:hover {
    color: var(--ink);
  }
  .seg button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
    font-weight: 500;
  }
  .seg button svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .seg button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .seg-lg button {
    padding: 0.5625rem 1rem;
    font-size: var(--t-sm);
  }
  .seg-lg button svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }
  @media (width < 40rem) {
    .seg-lg button {
      padding: 0.5rem 0.625rem;
      font-size: var(--t-sm);
    }
    .seg-lg button svg {
      display: none;
    }
  }
  .qhead {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .qhead .spacer {
    margin-left: auto;
  }
  .qstem {
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }
  .opts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .opt {
    --edge: var(--rule);
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--edge);
    border-left: 2px solid var(--edge);
    border-radius: var(--r-md);
    background: var(--paper);
    font: 400 var(--t-sm) / 1.6 var(--font-body);
    color: var(--ink);
    cursor: pointer;
  }
  .opt:hover {
    --edge: var(--rule-2);
  }
  .opt-k {
    font: 400 var(--t-sm) / 1.6 var(--font-label);
    color: var(--ink-3);
  }
  .opt[aria-pressed="true"] {
    --edge: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
  }
  .opt[aria-pressed="true"] .opt-k {
    color: var(--mark);
  }
  .opt[data-verdict="right"] {
    --edge: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 6%, var(--paper));
    }
  }
  .opt[data-verdict="wrong"] {
    --edge: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 6%, var(--paper));
    }
  }
  .opt[data-verdict] .opt-k {
    color: var(--ink);
    font-weight: 500;
  }
  .opt-mark {
    grid-column: 2;
    margin-top: 0.375rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .opt[data-verdict="right"] .opt-mark, .opt-item[data-verdict="right"] .opt-mark {
    color: var(--h-good);
  }
  .opt[data-verdict="wrong"] .opt-mark, .opt-item[data-verdict="wrong"] .opt-mark {
    color: var(--h-bad);
  }
  .opt-item {
    --edge: var(--rule);
    border: 1px solid var(--edge);
    border-left: 2px solid var(--edge);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .opt-item > .opt {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .opt-why {
    margin: 0;
    padding: 0.6875rem 0.875rem 0.75rem 2.875rem;
    border-top: 1px dashed var(--rule-2);
    font: 400 var(--t-sm) / var(--lh-body) var(--font-body);
    color: var(--ink-2);
  }
  .opt-item[data-verdict="right"], .opt-item:has(> .opt[data-verdict="right"]) {
    --edge: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 6%, var(--paper));
    }
  }
  .opt-item[data-verdict="wrong"], .opt-item:has(> .opt[data-verdict="wrong"]) {
    --edge: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 6%, var(--paper));
    }
  }
  .opt-item[data-verdict] .opt-k, .opt-item:has(> .opt[data-verdict]) .opt-k {
    color: var(--ink);
    font-weight: 500;
  }
  .ladder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  .ladder::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: var(--rule);
  }
  .ladder > * {
    position: relative;
  }
  .beat {
    position: relative;
    padding: 0 0 1.25rem 2.25rem;
    border-left: 1px solid var(--rule);
    margin-left: 0.6875rem;
  }
  .beat:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
  .beat::before {
    content: attr(data-n);
    position: absolute;
    left: -0.6875rem;
    top: -0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--ink-2);
  }
  .beat[data-state="done"]::before {
    content: "✓";
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 16%, var(--paper));
    }
    border-color: var(--h-good);
    color: var(--h-good);
  }
  .beat[data-state="done"][data-stumble]::before {
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 16%, var(--paper));
    }
    border-color: var(--h-bad);
    color: var(--h-bad);
  }
  .beat[data-state="active"]::before {
    border-color: var(--mark);
    color: var(--mark);
    box-shadow: 0 0 0 3px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 14%, transparent);
    }
  }
  .beat-q {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .beat[data-state="locked"] .beat-q {
    color: var(--ink-3);
  }
  .beat-body {
    margin-top: 0.75rem;
  }
  .beat[data-state="locked"] > .beat-body {
    display: none;
  }
  .picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .pick {
    font: 400 var(--t-sm) / 1.4 var(--font-body);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    text-align: left;
  }
  .pick:hover {
    border-color: var(--rule-2);
  }
  .pick[data-verdict="right"] {
    border-color: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 8%, var(--paper));
    }
  }
  .pick[data-verdict="wrong"] {
    border-color: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 8%, var(--paper));
    }
    opacity: 0.75;
  }
  .because {
    --hue: var(--h-good);
    margin-top: 0.75rem;
    border-left: 2px solid var(--hue);
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) 5%, var(--paper));
    }
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: 0.6875rem 0.875rem;
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .because-bad {
    --hue: var(--h-bad);
  }
  .because-label {
    display: block;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--hue) 78%, var(--ink));
    }
    margin-bottom: 0.375rem;
  }
  .signal {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
  }
  .signal:last-child {
    border-bottom: 0;
  }
  .signal b {
    font-weight: 500;
    color: var(--mark);
  }
  .signal span {
    color: var(--ink-2);
    line-height: 1.55;
  }
  .ans-approach {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--rule);
  }
  .ans-final {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.125rem;
    border-left: 2px solid var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 6%, var(--paper));
    }
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .ans-final b {
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--h-good);
  }
  .pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .pager .spacer {
    margin-left: auto;
  }
  .pager-n {
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .qstrip + .sec {
    margin-top: 1.5rem !important;
  }
  .qstrip-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .qstrip-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
    color: var(--ink-3);
    cursor: pointer;
  }
  .qstrip-arrow:hover {
    color: var(--mark);
    background: var(--paper-2);
  }
  q-strip:not([data-scrolls="true"]) .qstrip-arrow {
    display: none;
  }
  .qstrip-arrow[data-off="true"] {
    visibility: hidden;
  }
  .qstrip-chev {
    width: 1rem;
    height: 1rem;
  }
  .qstrip {
    display: flex;
    gap: 0.3125rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.75rem 0 0.875rem;
    background: var(--paper);
  }
  .qstrip-bar > .qstrip {
    flex: 1 1 auto;
    min-width: 0;
  }
  q-strip[data-dragging] .qstrip, q-strip[data-dragging] .qstrip-item {
    cursor: grabbing;
  }
  .qstrip::-webkit-scrollbar {
    display: none;
  }
  .qstrip-item {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 2.125rem;
    padding: 0.3125rem 0.375rem 0.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }
  .qstrip-item:hover {
    border-color: var(--rule-2);
    color: var(--ink);
  }
  .qstrip-item[aria-current="true"] {
    background: var(--mark);
    border-color: var(--mark);
    color: var(--mark-on);
  }
  .qstrip-item i {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--rule-2);
  }
  .qstrip-item i[data-state="right"] {
    background: var(--st-mastered);
    box-shadow: none;
  }
  .qstrip-item i[data-state="wrong"] {
    background: var(--h-bad);
    box-shadow: none;
  }
  .qstrip-item i[data-state="seen"] {
    background: var(--ink-3);
    box-shadow: none;
  }
  .qstrip-item[aria-current="true"] i {
    box-shadow: inset 0 0 0 1px var(--mark-on);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark-on) 55%, transparent);
    }
  }
  .reveal {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .reveal-body {
    padding: 1.25rem;
  }
  .reveal-count {
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .handoff {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .handoff p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    margin: 0;
  }
  .menu {
    position: relative;
    display: inline-block;
  }
  .menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--ink-2);
    padding: 0.5rem 0.625rem;
    border-radius: var(--r-md);
    cursor: pointer;
    list-style: none;
  }
  .menu > summary::-webkit-details-marker {
    display: none;
  }
  .menu > summary:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .menu[open] > summary {
    background: var(--paper-2);
    color: var(--ink);
  }
  .menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    z-index: 50;
    min-width: 13rem;
    padding: 0.375rem;
    border-radius: var(--r-lg);
    background: var(--paper-over);
    box-shadow: var(--shadow-over);
  }
  .menu-title {
    padding: 0.4375rem 0.625rem 0.3125rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .menu-item {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: none;
    border-radius: var(--r-md);
    font: 400 var(--t-sm) / 1.3 var(--font-body);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .menu-item:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 5%, transparent);
    }
  }
  .menu-box {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    color: transparent;
  }
  .menu-item[aria-checked="true"] .menu-box {
    background: var(--mark);
    border-color: var(--mark);
    color: var(--mark-on);
  }
  .menu-sep {
    height: 1px;
    background: var(--rule);
    margin: 0.375rem 0.25rem;
  }
  .menu-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: none;
    border-radius: var(--r-md);
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--mark);
    cursor: pointer;
  }
  .menu-new:hover {
    background: var(--mark-soft);
  }
  .seg::-webkit-scrollbar {
    display: none;
  }
  .beat-foot {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
  }
  .linkbtn {
    font: 400 var(--t-xs) / 1 var(--font-body);
    color: var(--ink-2);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule-2);
    padding: 0 0 0.1875rem;
    cursor: pointer;
  }
  .linkbtn:hover {
    color: var(--ink);
    border-bottom-color: var(--ink-2);
  }
  .step-why {
    font-size: var(--t-xs);
    color: var(--ink-3);
    line-height: 1.6;
    margin-top: 0.25rem;
  }
  .step-math {
    margin-top: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-md);
    background: var(--paper-2);
    font-family: var(--font-label);
    font-size: var(--t-xs);
    line-height: 1.7;
    overflow-x: auto;
  }
  .step-watch {
    display: flex;
    gap: 0.4375rem;
    margin-top: 0.5rem;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-warn) 70%, var(--ink));
    }
  }
  .step-watch svg {
    flex: none;
    margin-top: 0.125rem;
  }
  .blur {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-md);
    padding: 0.1875rem 0.5rem;
    cursor: pointer;
    color: var(--ink-3);
    font: 400 var(--t-micro) / 1.4 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .blur > b {
    display: none;
    font: 400 var(--t-xs) / 1.4 var(--font-label);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
  }
  .blur[data-shown] {
    border-style: solid;
    border-color: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 7%, var(--paper));
    }
    cursor: default;
  }
  .blur[data-shown] > b {
    display: inline;
  }
  .blur[data-shown] > i {
    display: none;
  }
  .carry-rule {
    font-size: var(--t-sm);
    line-height: 1.65;
    padding: 0.875rem 1.125rem;
    border-left: 2px solid var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 5%, var(--paper));
    }
    border-radius: 0 var(--r-md) var(--r-md) 0;
    margin-bottom: 1rem;
  }
  .signal.sig-good b {
    color: var(--h-good);
  }
  .signal.sig-bad b {
    color: var(--h-bad);
  }
  .signal.sig-reach b {
    color: var(--h-warn);
  }
  .chain {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .chain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: baseline;
    padding: 0.5625rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
  }
  .chain-row:last-child {
    border-bottom: 0;
  }
  .chain-row b {
    font-weight: 400;
    color: var(--ink-2);
  }
  .chain-row span {
    font-family: var(--font-label);
    font-size: var(--t-xs);
    color: var(--ink);
    text-align: right;
  }
  .chain-row[data-stumble] b::after {
    content: " · missed once";
    color: var(--h-bad);
    font-size: var(--t-micro);
    font-family: var(--font-label);
  }
  .chain-close {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .shelf-group + .shelf-group {
    margin-top: 2.75rem;
  }
  .shelf-group-h {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.6875rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink);
  }
  .shelf-group-n {
    margin-left: auto;
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .shelf-group .cards {
    margin-top: 1.25rem;
  }
  .books-shelf-h {
    margin-top: 0 !important;
    font-size: var(--t-h1);
  }
  .books-shelf-sub {
    margin-top: 0.4375rem;
  }
  .shelf-group:first-of-type {
    margin-top: 0;
  }
  .shelf-group .cards.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @container doc (width >= 56rem) {
    .shelf-group .cards.cols-4 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  @container doc (width < 34rem) {
    .shelf-group .cards.cols-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @container doc (width < 24rem) {
    .shelf-group .cards.cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .hero-cta {
    margin-top: 1.25rem;
  }
  .gauge-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
  }
  .gauge-dash {
    color: var(--ink-3);
  }
  .gauge-chev {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--ink-3);
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .gauge:hover .gauge-chev {
    opacity: 1;
    color: var(--mark);
    transform: translateX(2px);
  }
  .btn, .btn:hover, .bookcard, .footlink, .tab, .crumbs a {
    text-decoration: none;
  }
  .chapter-hero {
    position: relative;
    display: grid;
    gap: 1.5rem 1.75rem;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin: 0;
    padding: 0 0 1.75rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    color: var(--ink);
  }
  @container doc (width >= 36rem) {
    .chapter-hero {
      grid-template-columns: minmax(0, 1fr) 15rem;
    }
  }
  .chapter-hero-content {
    min-width: 0;
    padding: 0;
  }
  .chapter-hero-title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0;
  }
  .chapter-hero-gauge {
    position: static;
    width: auto;
    margin: 0;
  }
  .opt[data-missed], .opt-item[data-missed] {
    border-style: dashed;
    background: var(--paper);
  }
  .opt[data-missed] .opt-mark, .opt-item[data-missed] .opt-mark {
    color: var(--h-good);
  }
  question-island {
    display: block;
  }
  question-island[data-state="loading"]::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-2), transparent);
    animation: qi-wait 1.1s ease-in-out infinite;
  }
  @keyframes qi-wait {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    question-island[data-state="loading"]::after {
      animation: none;
    }
  }
  .qi-note {
    padding: 2rem 0;
    color: var(--ink-2);
    font-size: 0.875rem;
    text-align: center;
  }
  .qi-note button {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-2);
    color: var(--ink);
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .qi-note button:hover {
    border-color: var(--mark);
    color: var(--mark);
  }
}
@layer pages {
  .ctabs {
    --ctabs-bar-gap: 1.5rem;
    --ctabs-bar-pinned: 4.5rem;
    --sticky-stack: calc(var(--sticky-top) + var(--ctabs-bar-pinned));
  }
  .ctabs-head {
    margin-bottom: 0.875rem;
  }
  .ctabs-bar {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    margin-bottom: var(--ctabs-bar-gap);
    background: var(--paper);
  }
  .ctabs-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
  }
  .ctabs-row > .tabs {
    flex: 1;
    min-width: 0;
  }
  .ctabs-row:not(:has(.tabs)) {
    border-bottom: 1px solid var(--rule);
  }
  @media (width < 64rem) {
    .ctabs-bar:not(:has(.tabs)) {
      display: none;
    }
  }
  .ctabs-crumb {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    font-size: var(--t-xs);
    color: var(--ink-3);
    transition: grid-template-rows 0.18s var(--ease-out, ease);
  }
  .ctabs-crumb-line {
    display: block;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ctabs[data-pinned] .ctabs-crumb {
    grid-template-rows: 1fr;
  }
  .ctabs[data-pinned] .ctabs-crumb-line {
    padding: 0.4375rem 0 0.1875rem;
  }
  .ctabs [id] {
    scroll-margin-top: var(--sticky-stack);
  }
  .ctabs-topic {
    margin-bottom: 0.3125rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ctabs-title {
    margin: 0;
    font: 500 var(--t-h1) / 1.25 var(--font-display);
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .ctabs-panel {
    min-width: 0;
  }
  .ctabs-panel[hidden] {
    display: none;
  }
  .ctabs-panel [x-ref="browseStickyHeader"] {
    top: var(--sticky-stack);
    z-index: 10;
  }
  .ctabs:has(> .ctabs-panel[data-ctab-panel="questions"]:not([hidden])) + .footnav {
    margin-top: 0.75rem;
  }
}
@layer pages {
  .cg-head {
    margin-bottom: var(--s-sec);
  }
  .cg-sec {
    margin-top: var(--s-sub);
    border-top: 1px solid var(--rule);
  }
  .cg-sec:first-of-type {
    margin-top: 0;
  }
  .cg-sum {
    display: block;
    padding: 1.25rem 0 0;
    cursor: pointer;
    list-style: none;
  }
  .cg-sum::-webkit-details-marker {
    display: none;
  }
  .cg-sum-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .cg-sum-n {
    flex: none;
    font: 400 var(--t-label) / 1.3 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .cg-sum-t {
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .cg-chev {
    flex: none;
    width: 1rem;
    height: 1rem;
    align-self: center;
    color: var(--ink-3);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }
  .cg-sec[open] > .cg-sum .cg-chev {
    transform: rotate(-90deg);
  }
  .cg-sum:hover .cg-chev {
    color: var(--ink);
  }
  .cg-peek {
    display: block;
    margin-top: 0.875rem;
    padding-left: 2.125rem;
  }
  .cg-sec[open] > .cg-sum .cg-peek {
    display: none;
  }
  .cg-peek-line {
    display: block;
    position: relative;
    margin-bottom: 0.4375rem;
    padding-left: 1rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .cg-peek-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875em;
    width: 0.375rem;
    height: 1px;
    background: var(--rule-2);
  }
  .cg-peek-cta {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: var(--t-sm);
    color: var(--mark);
  }
  .cg-peek-cta::after {
    content: " ↓";
    font-family: var(--font-label);
  }
  .cg-sum:hover .cg-peek-cta {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cg-body {
    padding-top: 0.25rem;
  }
  .cg-dial {
    display: inline-flex;
    gap: 1px;
    margin: 0.25rem 0 1.25rem;
    padding: 2px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
  }
  .cg-dial-stop {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.625rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }
  .cg-dial-stop:hover {
    color: var(--ink-2);
  }
  .cg-dial-stop[aria-pressed="true"] {
    background: var(--paper-over);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--rule);
  }
  .cg-dial-glyph {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .cg-dial-glyph i {
    display: block;
    width: 0.5rem;
    height: 2px;
    border-radius: 1px;
    background: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, currentcolor 22%, transparent);
    }
  }
  .cg-dial-glyph i.on {
    background: currentcolor;
  }
  .cg-sec[data-cg-depth="route"] .wb-math, .cg-sec[data-cg-depth="route"] .wb-numeric, .cg-sec[data-cg-depth="route"] .wb-why, .cg-sec[data-cg-depth="worked"] .wb-numeric, .cg-sec[data-cg-depth="worked"] .wb-why {
    display: none;
  }
  .cg-body .section-card-title {
    font-size: var(--t-h3);
    margin-top: var(--s-sub);
  }
  .cg-body > .section-card:first-child, .cg-dial + .section-card {
    margin-top: 0;
  }
  .cg-body > .section-card:first-child > .section-card-title:first-child, .cg-dial + .section-card > .section-card-title:first-child {
    margin-top: 1.25rem;
  }
  .bc-title {
    font-family: var(--font-display);
    font-weight: 500;
  }
  .bc-label, .bc-deco {
    font-family: var(--font-label);
    font-weight: 400;
  }
  .bc-glyph {
    font-family: var(--font-display);
    font-weight: 400;
  }
  .worked-unit {
    margin-top: var(--s-sub);
  }
  .worked-unit-head {
    margin-bottom: 1.125rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .worked-unit-tag {
    display: block;
    margin-bottom: 0.375rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .worked-unit-what {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
  }
  .overview-title {
    margin: var(--s-sub) 0 0.75rem;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
  }
}
@layer pages {
  .chapter-section {
    max-width: none;
    margin-top: var(--s-sub);
    padding: 0;
    border: 0;
    background: none;
  }
  .chapter-section-heading {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
  }
  .book-list-header, .module-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .chapter-section-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .topic-band {
    margin-top: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .topic-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0 0 0.6875rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .topic-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink);
  }
  .topic-count {
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .topic-chev {
    flex: none;
    align-self: center;
    color: var(--ink-3);
    transition: transform 0.15s ease;
  }
  .topic-band.is-open .topic-head .topic-chev {
    transform: rotate(90deg);
  }
  .topic-body, .mod-body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    border: 0;
    background: none;
    transition: grid-template-rows 0.22s ease;
  }
  .topic-band.is-open .topic-body, .mod-card.is-open .mod-body, .mod-item.is-open .mod-body {
    grid-template-rows: 1fr;
  }
  .topic-body > div, .mod-body > div {
    overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .topic-body, .mod-body {
      transition: none;
    }
  }
  .concept-row, .section-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: 0 0.875rem;
    align-items: baseline;
    padding: 0.9375rem 0.5rem 0.9375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }
  .concept-row:hover, .section-row:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .concept-main, .section-row-main {
    min-width: 0;
  }
  .concept-title-link, .section-row-title a, .section-row-title {
    text-decoration: none;
    color: inherit;
  }
  .concept-title, .section-row-title {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .concept-sub {
    margin-top: 0.3125rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .section-row-num {
    font: 400 var(--t-label) / 1.6 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .concept-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
  }
  .concept-q-btn {
    grid-column: 3;
  }
  .concept-arrow {
    grid-column: 4;
    align-self: center;
    color: var(--ink-3);
  }
  .section-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .section-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-decoration: none;
    white-space: nowrap;
  }
  .section-icon-btn:hover {
    color: var(--ink);
    border-color: var(--rule);
  }
  .section-icon-label {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
  }
  .mod-head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    width: 100%;
    padding: 0.9375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .mod-eyebrow {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mod-kicker {
    display: block;
    font: 400 var(--t-label) / 1.5 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .mod-kicker i {
    display: none;
  }
  .mod-titleline {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin-top: 0.1875rem;
  }
  .mod-title {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink);
  }
  .mod-meta {
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .mod-chev {
    flex: none;
    align-self: center;
    color: var(--ink-3);
    transition: transform 0.15s ease;
  }
  .mod-card.is-open .mod-head .mod-chev, .mod-item.is-open .mod-head .mod-chev {
    transform: rotate(90deg);
  }
  .mod-chapters {
    padding: 0;
    border: 0;
    background: none;
  }
  .mod-foldall {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .mod-foldall:hover {
    border-color: var(--rule-2);
    background: var(--paper-2);
    color: var(--ink);
  }
  .today-wrap {
    max-width: none;
  }
  .today-card, .today-salute, .today-chap-card, .today-recent {
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper-over);
    box-shadow: none;
  }
  .today-salute {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .today-salute-main {
    flex: 1 1 18rem;
    min-width: 0;
  }
  .today-eyebrow, .today-recent-h, .today-rec-eyebrow, .today-preview-h, .today-books-h {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-hi {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0.5rem 0 0;
  }
  .today-hi span {
    color: var(--mark);
  }
  .today-coach {
    margin: 0.4375rem 0 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .today-since {
    margin: 0.3125rem 0 0;
    font-size: var(--t-sm);
    color: var(--mark);
  }
  .today-tod {
    color: var(--h-warn);
  }
  .today-streak {
    flex: none;
    align-self: flex-start;
    text-align: right;
  }
  .today-streak-bars {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.1875rem;
    height: 2.25rem;
  }
  .today-bar {
    width: 0.375rem;
    height: calc(var(--h, 0) * 1%);
    border-radius: 2px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 12%, transparent);
    }
  }
  .today-bar.is-active {
    background: var(--h-warn);
  }
  .today-bar.is-today {
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) 45%, transparent);
    }
  }
  .today-streak-num {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3125rem;
    margin-top: 0.4375rem;
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--h-warn);
    white-space: nowrap;
  }
  .today-recent {
    padding: 0;
    border: 0;
    background: none;
    margin-top: 2rem;
  }
  .today-recent-h {
    margin-bottom: 0.75rem;
  }
  .today-rec-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 30rem) {
    .today-rec-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container doc (width >= 52rem) {
    .today-rec-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .today-rec-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-over);
    color: inherit;
    text-decoration: none;
  }
  .today-rec-card:hover {
    border-color: var(--rule-2);
  }
  .today-rec-spine {
    display: grid;
    place-items: center;
    align-self: start;
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    border-radius: var(--r-md);
    background: var(--sc, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sc, var(--mark)) 12%, var(--paper));
    }
    color: var(--sc, var(--mark));
  }
  .today-sglyph {
    width: 1.125rem;
    height: 1.125rem;
  }
  .today-sglyph use {
    width: 100%;
    height: 100%;
  }
  .today-rec-body {
    min-width: 0;
  }
  .today-rec-ttl {
    margin-top: 0.125rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .today-rec-sub {
    margin-top: 0.125rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .today-rec-chev {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    color: var(--ink-3);
  }
  .today-rec-chev use {
    width: 100%;
    height: 100%;
  }
  .today-subject {
    margin-top: 2rem;
  }
  .today-subjdiv {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
  }
  .today-subjname {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink);
  }
  .today-subjrule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule);
  }
  .today-chaps {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .today-chap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  .today-chap-title {
    font-size: var(--t-body);
    font-weight: 500;
    color: var(--ink);
  }
  .today-chap-book {
    display: block;
    margin-top: 0.1875rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .today-diag {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    margin-top: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-left: 2px solid var(--h-note);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--h-note);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-note) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .today-cbars {
    display: grid;
    gap: 0.625rem;
    margin-top: 0.875rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 40rem) {
    .today-cbars {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .today-cbar {
    display: block;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    color: inherit;
    text-decoration: none;
  }
  .today-cbar:hover {
    border-color: var(--rule-2);
    background: var(--paper-2);
  }
  .today-cbar-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4375rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-cbar-verb {
    color: var(--ink-2);
  }
  .today-cbar-meta {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    font-family: var(--font-body);
  }
  .today-cbar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .today-cbar-concept {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .today-cbar-chev {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--ink-3);
  }
  .today-cbar.is-done {
    opacity: 0.62;
  }
  .today-cbar.is-done .today-cbar-concept {
    text-decoration: line-through;
    color: var(--ink-3);
    font-weight: 400;
  }
  .today-cbar-check {
    color: var(--h-good);
    display: inline-flex;
  }
  .today-exam-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--h-warn);
  }
  .today-ic {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .today-ic use {
    width: 100%;
    height: 100%;
  }
  .today-mring {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
  }
  .today-mring svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .today-mring-t {
    fill: none;
    stroke: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--ink) 11%, transparent);
    }
    stroke-width: 3;
  }
  .today-mring-v {
    fill: none;
    stroke: var(--st-mastered);
    stroke-width: 3;
    stroke-linecap: round;
  }
  .today-mring-txt {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 400 var(--t-label) / 1 var(--font-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .today-btn, .today-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: var(--paper);
    font-size: var(--t-sm);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
  }
  .today-btn:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
  }
  .today-btn-primary {
    border-color: var(--mark);
    background: var(--mark);
    color: var(--mark-on);
    font-weight: 500;
  }
  .today-btn-primary:hover {
    background: var(--mark-hover);
    border-color: var(--mark-hover);
  }
  .today-btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .today-nudge {
    --hue: var(--h-warn);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    color: var(--ink);
  }
  .today-nudge .today-ic {
    color: var(--hue);
  }
  .today-nudge-text {
    flex: 1 1 auto;
    line-height: 1.5;
  }
  .today-nudge-cta {
    flex: none;
    color: var(--mark);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
  }
  .today-plan {
    width: 100%;
  }
  .today-blocks {
    display: flex;
    flex-direction: column;
  }
  .today-chap-id {
    flex: 1 1 auto;
    min-width: 0;
  }
  .today-subjglyph {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--sc, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sc, var(--mark)) 12%, var(--paper));
    }
    color: var(--sc, var(--mark));
    font: 500 var(--t-xs) / 1 var(--font-display);
  }
  .today-cbar-ico {
    display: inline-flex;
    color: var(--acc, var(--mark));
  }
  .today-acc-learn {
    --acc: var(--st-learning);
  }
  .today-acc-prac {
    --acc: var(--st-practising);
  }
  .today-acc-review {
    --acc: var(--mark);
  }
  .today-acc-fix {
    --acc: var(--h-bad);
  }
  .today-acc-plain {
    --acc: var(--ink-2);
  }
  .today-cbar-rec {
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 40%, var(--rule));
    }
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
  }
  .today-cleared {
    color: var(--h-good);
  }
  .today-time {
    font-variant-numeric: tabular-nums;
  }
  .today-planhead {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1.75rem 0 0.75rem;
  }
  .today-planhead-t {
    flex: none;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-planhead-n {
    order: 1;
    flex: none;
    font: 400 var(--t-nano) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
  .today-planhead::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule);
  }
  .today-hero {
    margin-bottom: 0.625rem;
    padding: 1.125rem 1.25rem 1rem;
    border-radius: var(--r-lg);
  }
  .today-hero-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .today-hero-q {
    margin: 0.5rem 0 0.375rem;
    font: 500 var(--t-h3) / 1.35 var(--font-display);
    color: var(--ink);
    text-wrap: balance;
  }
  .today-hero-why {
    font: 400 var(--t-sm) / 1.55 var(--font-body);
    color: var(--ink-2);
  }
  .today-hero-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin-top: 0.875rem;
  }
  .today-hero-side {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
  }
  .today-clock-h {
    margin-bottom: 0.5rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-clock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.3125rem 0;
    color: inherit;
    text-decoration: none;
  }
  .today-clock-row + .today-clock-row {
    border-top: 1px solid var(--rule);
  }
  .today-clock-row:hover .today-clock-x {
    color: var(--mark);
  }
  .today-clock-row:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 2px;
  }
  .today-clock-x {
    min-width: 0;
    font: 400 var(--t-xs) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .today-clock-when, .today-clock-n {
    font: 400 var(--t-xs) / 1.4 var(--font-label);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .today-clock-when {
    color: var(--ink-3);
  }
  .today-clock-n {
    min-width: 4.5rem;
    color: var(--ink);
  }
  .today-clock-past {
    color: var(--ink-3);
  }
  .today-stand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .today-stand-card {
    padding: 1rem 1.125rem;
  }
  .today-stand-h {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .today-stand-h .today-mring {
    margin-left: auto;
  }
  .today-stand-nums {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0.75rem 0 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-stand-weak {
    font: 400 var(--t-xs) / 1.5 var(--font-body);
    color: var(--ink-2);
  }
  .today-stand-weak b {
    font-weight: 500;
    color: var(--ink);
  }
  .today-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 18%, transparent);
    }
    border-radius: var(--r-lg);
    background: linear-gradient( 135deg, var(--mark) 0%, var(--mark) 45%, var(--mark) 100% ), var(--paper-over);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--mark) 14%, transparent) 0%, color-mix(in srgb, var(--mark) 6%, transparent) 45%, color-mix(in srgb, var(--mark) 1.5%, transparent) 100% ), var(--paper-over);
    }
  }
  .today-head > * {
    margin: 0;
  }
  .today-head-main {
    min-width: 0;
  }
  .today-head-side {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
  }
  .today-head-streak:not(:first-child) {
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
  }
  @container doc (width >= 46rem) {
    .today-head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.5rem;
    }
    .today-head-side {
      padding-left: 1.5rem;
      border-left: 1px solid var(--rule);
    }
  }
  .today-grid {
    display: grid;
    gap: 1.5rem;
  }
  .today-grid-main, .today-grid-rail {
    min-width: 0;
    container-type: inline-size;
    container-name: doc;
  }
  @container doc (width >= 52rem) {
    .today-grid {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
    .today-grid-rail > .today-planhead:first-child {
      margin-top: 0;
    }
  }
  @container doc (max-width: 46rem) {
    .today-stand {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container doc (max-width: 34rem) {
    .today-stand {
      grid-template-columns: minmax(0, 1fr);
    }
    .today-hero-q {
      font-size: var(--t-h2);
    }
  }
  .today-day {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: var(--r-md);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .today-day .today-ic {
    width: 1.125rem;
    height: 1.125rem;
  }
  .today-setup {
    margin-top: 1.5rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper-over);
  }
  .today-setup-step {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-setup-h {
    margin: 0.625rem 0 1.25rem;
    font: 500 var(--t-h2) / 1.25 var(--font-display);
    color: var(--ink);
  }
  .today-flabel {
    margin: 0 0 0.5rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-ask {
    margin: 0.25rem 0 0.625rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .today-classsel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .today-classsel small {
    display: block;
    margin-bottom: 0.25rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .today-classsel b {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .today-subjrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.5rem;
  }
  @container doc (width >= 34rem) {
    .today-subjrow {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .today-subj {
    display: block;
    padding: 0.875rem 0.5rem;
    text-align: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .today-subj:hover {
    border-color: var(--rule-2);
  }
  .today-subj.is-on {
    border-color: var(--mark);
    background: var(--mark-soft);
  }
  .today-subj-sw {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    margin: 0 auto 0.5rem;
    border-radius: var(--r-md);
    background: var(--sc, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sc, var(--mark)) 12%, var(--paper));
    }
    color: var(--sc, var(--mark));
    font: 500 var(--t-xs) / 1 var(--font-display);
  }
  .today-subj span {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink-2);
  }
  .today-subj.is-on span {
    color: var(--ink);
  }
  .today-chaplist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .today-chap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    cursor: pointer;
  }
  .today-chap:hover {
    border-color: var(--rule-2);
  }
  .today-chap-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .today-chap-n {
    flex: none;
    width: 1.25rem;
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .today-chap-t {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-sm);
    color: var(--ink);
  }
  .today-suggest {
    flex: none;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--h-warn) 30%, var(--rule));
    }
    border-radius: 999px;
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) var(--tint), var(--paper));
    }
    color: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-warn) 78%, var(--ink));
    }
  }
  .today-tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
  }
  .today-tick .today-ic {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--mark-on);
    opacity: 0;
  }
  .today-chap:has(.today-chap-radio:checked) {
    border-color: var(--mark);
    background: var(--mark-soft);
  }
  .today-chap:has(.today-chap-radio:checked) .today-chap-t {
    font-weight: 500;
  }
  .today-chap:has(.today-chap-radio:checked) .today-tick {
    background: var(--mark);
    border-color: var(--mark);
  }
  .today-chap:has(.today-chap-radio:checked) .today-tick .today-ic {
    opacity: 1;
  }
  .today-assure {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    margin-top: 1rem;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-3);
  }
  .today-assure .today-ic {
    margin-top: 0.125rem;
    color: var(--h-good);
  }
  .today-setup .today-btn-primary {
    margin-top: 1.25rem;
  }
  .today-explore {
    margin: 0.875rem 0 0;
    text-align: center;
  }
  .today-explore a {
    font-size: var(--t-sm);
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dashed var(--rule-2);
    padding-bottom: 1px;
  }
  .today-explore a:hover {
    color: var(--ink);
  }
  .today-preview {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .today-preview b {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .today-preview p {
    margin: 0.1875rem 0 0;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .today-ico {
    --hue: var(--h-note);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--r-md);
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) 12%, var(--paper));
    }
    color: var(--hue);
  }
  .today-ico .today-ic {
    width: 1rem;
    height: 1rem;
  }
  .today-ico--indigo {
    --hue: var(--h-why);
  }
  .today-ico--rose {
    --hue: var(--h-bad);
  }
  .today-ico--amber {
    --hue: var(--h-warn);
  }
  .today-preview-h, .today-books-h {
    margin: 2rem 0 0.875rem;
  }
  .today-books-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.375rem;
    scrollbar-width: none;
  }
  .today-books-row::-webkit-scrollbar {
    display: none;
  }
  .today-book {
    flex: none;
    width: 7rem;
  }
  .today-book-cover {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--paper-2);
    font: 500 var(--t-xs) / 1.4 var(--font-display);
    color: var(--ink-2);
    text-align: center;
  }
  .today-book-cover span {
    font-size: var(--t-h3);
    color: var(--sc, var(--ink-2));
  }
  .today-book-cover:not(.today-book-img) {
    background: var(--sc, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sc, var(--mark)) 12%, var(--paper-2));
    }
  }
  .today-book-cover.today-book-img {
    width: 100%;
    height: auto;
    padding: 0;
    object-fit: contain;
  }
  .today-book-t {
    margin-top: 0.625rem;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink);
  }
  .groups-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 0 0.875rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
  }
  .groups-page-title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0;
  }
  .groups-page-subtitle {
    margin-top: 0.3125rem;
    font-size: var(--t-sm);
    color: var(--ink-3);
  }
  .groups-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
  }
  .revision-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 0.75rem;
    padding: 0.875rem 0.25rem 0.875rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .revision-row:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .revision-row-link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.875rem;
    align-items: baseline;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .revision-row-num {
    font: 400 var(--t-label) / 1.6 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .revision-row-sub {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    flex-wrap: wrap;
    margin-top: 0.3125rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .revision-row-updated {
    color: var(--ink-3);
    font-weight: 400;
  }
  .groups-row-meta-empty {
    color: var(--ink-3);
    font-style: italic;
  }
  .list-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto auto;
    gap: 0 0.875rem;
    align-items: baseline;
    padding: 0.9375rem 0.5rem 0.9375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
  }
  .list-card:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .list-card-num {
    font: 400 var(--t-label) / 1.6 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .list-card-title {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .list-card-chevron {
    width: 0.875rem;
    height: 0.875rem;
    align-self: center;
    color: var(--ink-3);
  }
  .rev-help {
    margin-top: 1.5rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--h-note);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: none;
    box-shadow: none;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .rev-help-title {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.625rem;
  }
  .rev-help-hl {
    color: var(--ink);
    font-weight: 500;
  }
  .rev-help-point + .rev-help-point {
    margin-top: 0.625rem;
  }
  .rev-help-step-num {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    font: 400 var(--t-label) / 1 var(--font-label);
    color: var(--ink-2);
  }
  .bookcard-art, .hero-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 0;
  }
  .bookcard-art:not(:has(img, svg)) {
    border: 1px solid var(--rule);
    background: var(--paper-2);
  }
  .bookcard-art:not(:has(img, svg)), .hero-cover:not(:has(img, svg)) {
    display: grid;
    place-items: center;
    padding: 0;
    text-align: center;
    font: 500 var(--t-sm) / 1.35 var(--font-display);
    color: var(--ink-2);
  }
  .bookcard-art:not(:has(img, svg)) > *, .hero-cover:not(:has(img, svg)) > * {
    grid-area: 1 / 1;
  }
  .bookcard-art img {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
  }
  .bookcard-art svg, .hero-cover svg {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .bookcard-art:has(svg), .hero-cover:has(svg) {
    padding: 0;
    border: 0;
    background: none;
  }
  .hero-cover img {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
  }
  .hero-cover {
    aspect-ratio: 1 / 1;
    align-self: center;
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 8px 16px -8px rgb(0 0 0 / 18%);
  }
  .tab-ico use, .today-ic use, .footlink-ico use, .list-card-chevron use, .today-cbar-chev use, .concept-arrow use, .topic-chev use, .mod-chev use, .mod-foldall-icon use, .section-icon-btn svg use {
    width: 100%;
    height: 100%;
  }
  .appbar-solo .tabs {
    border-bottom: 0;
    margin-bottom: 0;
    align-self: stretch;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
  }
  .appbar-solo:has(.tabs) {
    padding-block: 0;
    min-height: 0;
  }
  .appbar-solo .tab {
    padding-block: 0.9375rem;
  }
  .book-chapter-row {
    padding: 0.9375rem 0.5rem 0.9375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .book-chapter-row:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .book-chapter-head {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
    gap: 0 0.875rem;
    align-items: baseline;
  }
  .book-chapter-num {
    font: 400 var(--t-label) / 1.6 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .book-chapter-title {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
  }
  .book-chapter-arrow {
    align-self: center;
    color: var(--ink-3);
  }
  .book-chapter-arrow svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .book-chapter-arrow use {
    width: 100%;
    height: 100%;
  }
  .book-chapter-sections {
    grid-column: 2 / -1;
    margin: 0.3125rem 0 0 2.875rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .book-section-pill {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
  }
  .book-section-pill:hover {
    color: var(--ink);
  }
  .book-chapter-sep {
    color: var(--rule-2);
    margin-inline: 0.3125rem;
  }
  .cov-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: conic-gradient(var(--mark) calc(var(--p, 0) * 1%), var(--ink) 0);
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient(var(--mark) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0);
    }
  }
  .cov-ring::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--paper);
  }
  .cov-ring-num {
    position: relative;
    z-index: 1;
    font: 500 var(--t-xs) / 1 var(--font-body);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .hero + .chapter-section, .hero + * > .chapter-section:first-child {
    margin-top: 2rem;
  }
  .mastery-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.4375rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: none;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .mastery-tag::before {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--rung, var(--st-new));
    flex: none;
  }
  .mastery-tag[data-tier="learning"] {
    --rung: var(--st-learning);
  }
  .mastery-tag[data-tier="practicing"] {
    --rung: var(--st-practising);
  }
  .mastery-tag[data-tier="mastered"] {
    --rung: var(--st-mastered);
  }
  .icon-box-content {
    grid-column: 2;
    min-width: 0;
  }
  .app-table table.flush, table.flush {
    margin: 1.25rem 0 0;
    width: 100%;
  }
  .section-card > table.flush, .section-card > div:has(> table.flush) {
    margin-inline: 0;
    width: auto;
  }
  .app-table table.flush thead th:first-child, .app-table table.flush tbody td:first-child {
    padding-left: 0;
  }
  .app-table table.flush thead th:last-child, .app-table table.flush tbody td:last-child {
    padding-right: 0;
  }
  .mod-card, .topic-band {
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
  }
  .mod-card + .mod-card, .topic-band + .topic-band {
    margin-top: 2rem;
  }
  .mod-head, .topic-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 0.75rem;
    align-items: start;
    border-bottom: 0;
    padding: 0;
  }
  .mod-head > .cov-ring, .mod-eyebrow, .topic-name, .topic-count {
    grid-column: 1;
  }
  .mod-chev, .topic-chev {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0.25rem;
  }
  .mod-kicker, .topic-count {
    font: 400 var(--t-label) / 1.5 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .mod-titleline {
    display: block;
    margin-top: 0.25rem;
  }
  .mod-title, .topic-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
  }
  .mod-meta {
    display: block;
    margin-top: 0.3125rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .topic-head .topic-name {
    margin-top: 0.25rem;
  }
  .topic-head .topic-count {
    display: block;
    margin-top: 0.3125rem;
  }
  @container doc (width >= 38rem) {
    .mod-card, .topic-band {
      display: grid;
      grid-template-columns: 12rem minmax(0, 1fr);
      column-gap: 2.25rem;
      align-items: start;
      padding-top: 2rem;
    }
    .mod-card > .mod-head, .topic-band > .topic-head {
      grid-column: 1;
    }
    .mod-card > .mod-body, .topic-band > .topic-body {
      grid-column: 2;
    }
  }
  @container doc (width >= 52rem) {
    .mod-card, .topic-band {
      grid-template-columns: 13rem minmax(0, 1fr);
      column-gap: 2.5rem;
    }
  }
  .mod-chapters > .book-chapter-row:first-child, .chapter-section-card > .concept-row:first-child, .chapter-section-card > .section-row:first-child {
    border-top: 0;
  }
  .mod-chapters > .book-chapter-row:last-child, .chapter-section-card > .concept-row:last-child, .chapter-section-card > .section-row:last-child {
    border-bottom: 0;
  }
  .group-peek {
    display: none;
  }
  .mod-card:not(.is-open) > .group-peek, .topic-band:not(.is-open) > .group-peek {
    display: block;
    padding-top: 0.125rem;
  }
  @container doc (width >= 38rem) {
    .mod-card > .group-peek, .topic-band > .group-peek {
      grid-column: 2;
    }
  }
  .group-peek-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.625rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
  }
  .group-peek-item:last-child {
    border-bottom: 0;
  }
  .group-peek-item:hover .group-peek-title {
    color: var(--mark);
  }
  .group-peek-num {
    font: 400 var(--t-label) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .group-peek-title {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .mod-card:first-child, .topic-band:first-child, .book-list-header + .mod-card, .book-list-header + .topic-band {
    margin-top: 0;
    border-top: 0;
    padding-top: 1.5rem;
  }
  .mod-foldall-icon, .topic-chev, .mod-chev, .concept-arrow, .book-chapter-arrow svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .mod-foldall-icon {
    color: var(--ink-3);
  }
  .mod-meter {
    display: block;
    margin-top: 0.75rem;
    max-width: 11rem;
  }
  .mod-meter > i {
    background: var(--st-practising);
  }
  .concept-row, .book-chapter-row {
    position: relative;
  }
  .concept-title-link::after, .book-chapter-title::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .concept-q-btn, .concept-arrow, .book-chapter-arrow, .book-chapter-sections, .mastery-tag {
    position: relative;
    z-index: 1;
  }
  #reader-content {
    padding-top: 2rem;
  }
  #reader-content:has(> .reader-nav) {
    padding-top: 0;
  }
  #reader-content > .reader-nav {
    padding-top: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .doc {
    margin-top: 0;
    padding-top: 0;
  }
  .hero, .chapter-hero {
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 1.5%, var(--paper));
    }
  }
  .hero-book, .hero-chapter {
    --w-mastery: 14.875rem;
  }
  @container doc (width >= 36rem) {
    .hero-book, .hero-chapter {
      grid-template-columns: minmax(0, 1fr) var(--w-mastery);
    }
  }
  .hero .gauge, .chapter-hero .gauge {
    --gauge-face: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      --gauge-face: color-mix(in srgb, var(--mark) 5%, var(--paper-over));
    }
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 24%, var(--rule));
    }
    background: var(--gauge-face);
    box-shadow: 0 6px 18px -10px rgb(0 0 0 / 28%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .theme-dark .hero .gauge, .theme-dark .chapter-hero .gauge {
    --gauge-face: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      --gauge-face: color-mix(in srgb, var(--mark) 5%, var(--paper));
    }
  }
  .hero .gauge:hover, .chapter-hero .gauge:hover {
    border-color: var(--mark);
    box-shadow: 0 14px 28px -14px rgb(0 0 0 / 40%);
  }
  @container doc (width < 36rem) {
    .hero, .chapter-hero {
      padding: 1.25rem;
    }
  }
  .hero, .chapter-hero {
    position: relative;
    overflow: hidden;
  }
  .book-hero-bg, .chapter-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: var(--mark);
    opacity: 0.4;
    pointer-events: none;
  }
  .hero > :not(.book-hero-bg, .chapter-hero-bg), .chapter-hero > :not(.book-hero-bg, .chapter-hero-bg) {
    position: relative;
  }
  .chapter-hero {
    align-items: center;
  }
  .hero, .chapter-hero {
    background: linear-gradient( 105deg, var(--mark) 0%, var(--mark) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 105deg, color-mix(in srgb, var(--mark) 6%, var(--paper)) 0%, color-mix(in srgb, var(--mark) 14%, var(--paper)) 100% );
    }
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 18%, var(--rule));
    }
  }
  .hero + *, .chapter-hero + * {
    margin-top: 1.5rem;
  }
  .appbar-solo .brand {
    margin-right: 0.25rem;
  }
  .appbar-solo .crumbs {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero + *, .chapter-hero + * {
    margin-top: 2.5rem;
  }
  #reader-content [id] {
    scroll-margin-top: calc(var(--sticky-top) + 1rem);
  }
  #reader-content .chapter-jump-nav ~ [id], #reader-content .chapter-jump-nav ~ * [id] {
    scroll-margin-top: calc(var(--sticky-top) + 4.25rem);
  }
  .ib-ico {
    display: block;
    flex: none;
  }
  .ib-ico svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .ib-ico use {
    width: 100%;
    height: 100%;
  }
  .appbar-lead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    min-width: 0;
  }
  .overview-card {
    --hue: var(--rule-2);
    display: block;
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--hue);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .overview-card-title {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4375rem;
  }
  .overview-card > .overview-card-title + * {
    margin-top: 0;
  }
  right-wrong-pairs table {
    table-layout: fixed;
    width: 100%;
  }
  right-wrong-pairs th {
    width: 50%;
  }
  .rw-cell {
    display: grid;
    grid-template-columns: 1.125rem minmax(0, 1fr);
    gap: 0.625rem;
    align-items: start;
  }
  .rw-ico {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
  }
  .rw-ico svg, .rw-ico use {
    width: 100%;
    height: 100%;
    display: block;
  }
  right-wrong-pairs .tb-negative .rw-ico {
    color: var(--h-bad);
  }
  right-wrong-pairs .tb-positive .rw-ico {
    color: var(--h-good);
  }
  .rw-body {
    min-width: 0;
  }
  .rw-body p {
    margin: 0;
  }
  .rw-body > * + * {
    margin-top: 0.5rem;
  }
  .topic-overview-link .concept-main {
    grid-column: 2;
  }
  .topic-overview-link .concept-title {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    letter-spacing: -0.008em;
  }
  .topic-why {
    display: block;
    margin-top: 0.375rem;
    font: 400 var(--t-xs) / 1.6 var(--font-display);
    font-style: italic;
    color: var(--ink-3);
    text-wrap: pretty;
  }
  .topic-over-go {
    align-self: center;
    color: var(--ink-3);
  }
  .topic-core {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 0.875rem;
    align-items: start;
    padding: 0.875rem 0;
  }
  .topic-core:first-of-type {
    padding-top: 1.25rem;
  }
  .topic-core-n {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    font: 400 var(--t-micro) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .topic-core-n[data-progress="seen"], .topic-core-n[data-progress="read"], .topic-core-n[data-progress="complete"] {
    position: relative;
    isolation: isolate;
    border-color: transparent;
    background: conic-gradient( var(--mark) calc(var(--p, 0) * 1%), var(--ink) 0 );
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient( var(--mark) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0 );
    }
    background-origin: border-box;
  }
  .topic-core-n[data-progress="seen"]::after, .topic-core-n[data-progress="read"]::after, .topic-core-n[data-progress="complete"]::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 50%;
    background: var(--paper);
  }
  .topic-kid[data-progress]::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--kid-rail) - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
  }
  .topic-kid[data-progress="read"]::before, .topic-kid[data-progress="complete"]::before {
    background: var(--mark);
  }
  .topic-kid[data-progress="seen"]::before {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 40%, transparent);
    }
  }
  .topic-core-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.75rem;
    gap: 0 0.75rem;
    align-items: baseline;
  }
  .topic-core-h a {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -0.008em;
    color: var(--ink);
  }
  .topic-core-h a:hover {
    color: var(--mark);
  }
  .topic-core-w {
    display: block;
    margin-top: 0.3125rem;
    font: 400 var(--t-xs) / 1.6 var(--font-display);
    font-style: italic;
    color: var(--ink-3);
    text-wrap: pretty;
  }
  .topic-kids {
    --kid-rail: 1.25rem;
    display: block;
    margin-top: 0.875rem;
    padding-left: var(--kid-rail);
    border-left: 1px solid var(--rule);
  }
  .topic-kid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.75rem;
    gap: 0 0.875rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
    color: inherit;
  }
  .topic-kid:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, transparent);
    }
  }
  .topic-kid-t {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.008em;
    color: var(--ink);
  }
  .topic-kid-n {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .chapter-map {
    display: block;
  }
  @container doc (width >= 38rem) {
    .topic-band:not(.is-open) {
      grid-template-columns: minmax(0, 1fr);
    }
    .topic-band:not(.is-open) > .topic-head, .topic-band:not(.is-open) > .topic-body {
      grid-column: 1;
    }
  }
  .so-builds {
    padding-block: 0;
  }
  .so-builds-sum {
    padding-block: 0.875rem;
    cursor: pointer;
    list-style: none;
  }
  .so-builds-sum::-webkit-details-marker {
    display: none;
  }
  .so-builds-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 0.75rem;
    gap: 0 0.625rem;
    align-items: baseline;
  }
  .so-builds-sum .callout-label {
    margin-bottom: 0;
  }
  .so-builds-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
  }
  .so-builds-name {
    padding: 0.125rem 0.4375rem;
    border: 1px solid var(--h-note);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--h-note) 28%, transparent);
    }
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .so-builds[open] .so-builds-names {
    display: none;
  }
  .so-builds-chev {
    align-self: center;
    color: var(--ink-3);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .so-builds[open] .so-builds-chev {
    transform: rotate(90deg);
  }
  .so-builds[open] .case-rows {
    padding-bottom: 0.875rem;
  }
  .browse-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .browse-strip > .qnav {
    flex: 1 1 auto;
    min-width: 0;
  }
  .browse-strip > :last-child {
    margin-left: auto;
    flex: none;
  }
  .today-ccards {
    display: grid;
    align-items: start;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 34rem) {
    .today-ccards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container doc (width >= 62rem) {
    .today-ccards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .today-ccard {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem 0.875rem;
    border-radius: var(--r-lg);
  }
  .today-ccard-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
  }
  .today-ccard-ring {
    margin-left: auto;
  }
  .today-ccard-name {
    margin-top: 0.625rem;
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    text-wrap: balance;
  }
  .today-ccard-where {
    margin-top: 0.25rem;
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--ink-3);
  }
  .today-ccard-foot {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: var(--t-xs);
  }
  .today-ccard-why {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-2);
  }
  .today-ccard-foot .today-time {
    flex: none;
  }
  .today-ccard-foot .today-cbar-chev {
    flex: none;
    align-self: center;
  }
  .today-ccard-check {
    display: inline-flex;
    color: var(--h-good);
  }
  .today-ccard-cleared {
    opacity: 0.62;
  }
  .today-ccard-cleared .today-ccard-name {
    text-decoration: line-through;
    font-weight: 400;
    color: var(--ink-3);
  }
  @container doc (width >= 36rem) {
    .chapter-hero > .chapter-hero-content, .chapter-hero > .chapter-map-pill {
      grid-column: 1;
    }
    .chapter-hero > .chapter-hero-gauge {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
    }
  }
  .chapter-map-pill {
    justify-self: start;
  }
  .chapter-hero-wrap {
    display: contents;
  }
  .chapter-hero-overview {
    margin-top: 0.625rem;
    max-width: 40em;
    font-size: var(--t-sm);
    line-height: 1.68;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .chapter-hero-overview p + p {
    margin-top: 0.5rem;
  }
  .chapter-map-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.75rem 0.4375rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-over);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .chapter-map-pill:hover {
    border-color: var(--mark);
  }
  .chapter-map-pill-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .chapter-map-pill-name {
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .chapter-map-pill-stat {
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .chapter-map-pill-chev {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--ink-3);
  }
}
@layer pages {
  .exam-row2 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }
  .exam-row2-ring {
    flex: none;
  }
  .exam-row2-main {
    min-width: 0;
    flex: 1 1 auto;
  }
  .exam-row2-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4375rem 0.625rem;
  }
  .exam-rw {
    margin-bottom: 1.5rem;
  }
  .exam-rw-track {
    position: relative;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 8%, transparent);
    }
  }
  .exam-rw-done {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: 999px;
    background: var(--mark);
  }
  .exam-rw-buffer {
    position: absolute;
    inset: 0 0 0 var(--x);
    border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient( 45deg, var(--mark) 0 4px, transparent 4px 8px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--mark) 22%, transparent) 0 4px, transparent 4px 8px );
    }
  }
  .exam-rw-now {
    position: absolute;
    top: 50%;
    left: var(--x);
    width: 0.875rem;
    height: 0.875rem;
    transform: translate(-50%, -50%);
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--mark);
  }
  .exam-rw-labels {
    position: relative;
    height: 1.25rem;
    margin-top: 0.375rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .exam-rw-labels > span {
    position: absolute;
    left: var(--x);
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .exam-rw-now-label {
    color: var(--ink);
  }
  .exam-rw-ticks {
    display: flex;
    justify-content: space-between;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .exam-sessions {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.75rem;
  }
  .exam-session {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    color: var(--ink);
    cursor: pointer;
  }
  .exam-session:hover {
    border-color: var(--rule-2);
    background: var(--paper-2);
  }
  .exam-session:has(input:checked) {
    border-color: var(--mark);
  }
  .exam-session:has(input:focus-visible) {
    outline: 2px solid var(--mark);
    outline-offset: 2px;
  }
  .exam-form-row {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @container doc (width >= 34rem) {
    .exam-form-row {
      grid-template-columns: minmax(0, 1fr) 12rem;
    }
  }
  .exam-form-label {
    display: block;
    margin-bottom: 0.25rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .exam-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    font-size: var(--t-sm);
    color: var(--ink);
  }
  .exam-form-input:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 1px;
  }
}
@layer pages {
  .chapter-hero-overview.is-clamped {
    max-height: 6.4em;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .chapter-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
  }
  @container doc (width >= 26rem) {
    .chapter-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container doc (width >= 56rem) {
    .chapter-actions {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .chapter-action-card {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    flex-wrap: wrap;
    align-content: start;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-lg);
    color: var(--reader-text);
    text-align: left;
  }
  .chapter-action-card:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 6%, var(--reader-bg));
    }
  }
  .chapter-action-icon {
    display: grid;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .chapter-action-info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
  }
  .chapter-action-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .chapter-action-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  .chapter-action-arrow {
    flex-shrink: 0;
    color: var(--mute);
  }
  .chapter-action-foot {
    flex: 0 0 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
    font: 500 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .chapter-action-stat {
    color: var(--ink-2);
  }
  .chapter-action-done {
    color: var(--ink-3);
  }
  .chapter-action-units {
    flex: 0 0 100%;
    display: flex;
    gap: 3px;
    margin-top: 0.375rem;
  }
  .chapter-action-units i {
    flex: 1 1 0;
    min-width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--paper-2);
  }
  .chapter-action-units i[data-done] {
    background: var(--st-practising);
  }
  .chapter-action-cov {
    flex: 0 0 100%;
    display: block;
    height: 3px;
    margin-top: 0.375rem;
    border-radius: 999px;
    background: var(--paper-2);
    overflow: hidden;
  }
  .chapter-action-cov i {
    display: block;
    width: var(--fill, 0%);
    height: 100%;
    border-radius: 999px;
    background: var(--st-practising);
    min-width: 2px;
  }
  .chapter-action-card:hover .chapter-action-arrow {
    color: var(--mark);
  }
  .chapter-jump-nav {
    position: sticky;
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    overflow-x: auto;
    padding-block: calc(var(--spacing) * 2);
    top: var(--sticky-top);
    z-index: 30;
    background: var(--paper);
    scrollbar-width: none;
  }
  .chapter-jump-nav::-webkit-scrollbar {
    display: none;
  }
  .chapter-jump-link {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--reader-bg);
    color: var(--reader-text);
  }
  .chapter-jump-link:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 6%, var(--reader-bg));
    }
    color: var(--mark);
  }
  .chapter-jump-link.is-active {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 14%, var(--reader-bg));
    }
    color: var(--mark);
  }
  .section-icon-btn-placeholder {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 14);
    flex-shrink: 0;
  }
  .ps-cards {
    --ps-red: #a83a4f;
    --ps-amber: #b0852e;
    --ps-green: #4f9b73;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .ps-card {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-radius: var(--r-lg);
  }
  .ps-card-head {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    text-decoration-line: none;
    color: var(--reader-text);
  }
  .ps-ring {
    position: relative;
    display: grid;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    background: conic-gradient(var(--ps-ring-c, var(--mute)) calc(var(--p, 0) * 3.6deg), var(--mute) 0);
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient(var(--ps-ring-c, var(--mute)) calc(var(--p, 0) * 3.6deg), color-mix(in srgb, var(--mute) 18%, transparent) 0);
    }
  }
  .ps-ring::before {
    content: "";
    position: absolute;
    border-radius: calc(infinity * 1px);
    inset: 0.25rem;
    background: var(--reader-bg);
  }
  .ps-ring-weak {
    --ps-ring-c: var(--ps-red);
  }
  .ps-ring-fair {
    --ps-ring-c: var(--ps-amber);
  }
  .ps-ring-strong {
    --ps-ring-c: var(--ps-green);
  }
  .ps-ring-pct {
    position: relative;
    z-index: 10;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--ps-ring-c);
  }
  .ps-ring-unit {
    font-size: 0.5rem;
  }
  .ps-ring-empty {
    border: 2px dashed var(--mute-border);
    background: none;
  }
  .ps-ring-empty::before {
    content: none;
  }
  .ps-ring-play {
    position: relative;
    z-index: 10;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--mark);
  }
  .ps-card-body {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .ps-card-line1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 1);
  }
  .ps-card-title {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .ps-card-count {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
  }
  .ps-card-line2 {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .ps-card-meta {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  .ps-bars {
    display: inline-flex;
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    align-items: flex-end;
    gap: calc(var(--spacing) * 0.5);
    --ps-bar-c: var(--mute);
  }
  .ps-bars-weak {
    --ps-bar-c: var(--ps-red);
  }
  .ps-bars-fair {
    --ps-bar-c: var(--ps-amber);
  }
  .ps-bars-strong {
    --ps-bar-c: var(--ps-green);
  }
  .ps-bar {
    position: relative;
    height: 100%;
    width: calc(var(--spacing) * 1);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 22%, transparent);
    }
  }
  .ps-bar-fill {
    position: absolute;
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    width: 100%;
    border-radius: calc(infinity * 1px);
    background: var(--ps-bar-c);
  }
  .ps-card-tagcol {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  .ps-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  .ps-diff {
    display: inline-flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.6875rem;
    --tw-leading: 1;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: var(--r-md);
    font: 400 0.6875rem/1 var(--font-label);
    letter-spacing: 0.06em;
  }
  .ps-diff-hard {
    color: var(--ps-red);
    border: 1px solid var(--ps-red);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--ps-red) 45%, transparent);
    }
    background: var(--ps-red);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ps-red) 8%, transparent);
    }
  }
  .ps-diff-medium {
    color: var(--ps-amber);
    border: 1px solid var(--ps-amber);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--ps-amber) 45%, transparent);
    }
    background: var(--ps-amber);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ps-amber) 8%, transparent);
    }
  }
  .ps-diff-easy {
    color: var(--ps-green);
    border: 1px solid var(--ps-green);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--ps-green) 45%, transparent);
    }
    background: var(--ps-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ps-green) 8%, transparent);
    }
  }
  .ps-diff-muted {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    color: var(--mute);
  }
  .ps-tag {
    display: inline-flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.6875rem;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--mute);
    border-radius: var(--r-md);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 12%, transparent);
    }
  }
  .ps-chip {
    display: inline-flex;
    align-items: center;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.625rem;
    --tw-leading: 1;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    font: 400 0.625rem/1 var(--font-label);
    letter-spacing: 0.06em;
  }
  .ps-chip-outline {
    border-color: var(--mute-border);
    color: var(--mute);
  }
  .ps-cta {
    display: inline-flex;
    width: 8rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    border-radius: var(--r-md);
    color: var(--mark-on);
    background: var(--mark);
  }
  .ps-cta:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 88%, black);
    }
  }
  .chapter-back {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .chapter-back-text {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .ps-meta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-radius: var(--r-lg);
  }
  .ps-meta-info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .ps-meta-titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .ps-meta-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .ps-meta-sub {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
  }
  .ps-meta-attempts {
    margin-top: calc(var(--spacing) * 5);
  }
  .ps-meta-empty {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    border-radius: var(--r-lg);
  }
  .exercise-groups {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .exercise-group {
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    border-radius: var(--r-lg);
  }
  .exercise-group-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .exercise-group-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .exercise-group-info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
  }
  .exercise-group-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .exercise-group-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  .exercise-group-blocks {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--mute-border);
    }
  }
  .exercise-block-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    color: var(--reader-text);
  }
  .exercise-block-row:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 5%, transparent);
    }
  }
  .exercise-block-num {
    display: grid;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    place-items: center;
    font-size: 11px;
    border-radius: var(--r-sm);
    font-family: var(--font-label);
    font-weight: 400;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 8%, transparent);
    }
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .exercise-block-title {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .exercise-block-count {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .exercise-block-chevron {
    flex-shrink: 0;
    color: var(--mute);
  }
  .exercise-block-row:hover .exercise-block-chevron {
    color: var(--mark);
  }
  .topic-actions-row {
    padding-block: 0.5rem;
  }
  .chapter-section-card > .topic-actions-row:first-child {
    padding-top: 0.875rem;
  }
  .topic-actions {
    grid-column: 2;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .topic-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.6875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
  }
  .topic-action:hover {
    border-color: var(--ink-3);
    color: var(--ink);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, transparent);
    }
  }
  .topic-action-ico {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ink-3);
  }
  .topic-action:hover .topic-action-ico {
    color: var(--mark);
  }
  .ps-list-head {
    margin-bottom: 0.75rem;
  }
  .ps-list-title {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--ink);
  }
  .ps-scope + .ps-scope {
    margin-top: 1.75rem;
  }
  .ps-scope-label {
    margin: 0 0 0.625rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}
@layer pages {
  .groups-page-info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .groups-page-cta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .groups-create-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    border-radius: var(--r-md);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
    border: none;
  }
  .groups-create-btn:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 20%, transparent);
    }
    color: var(--mark);
  }
  .groups-limit-chip {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    font: 400 0.6875rem/1 var(--font-label);
    letter-spacing: 0.06em;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 10%, transparent);
    }
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .groups-limit-chip-full {
    background: var(--caution-base, #d97706);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix( in srgb, var(--caution-base, #d97706) 14%, transparent );
    }
    color: var(--caution-text, #92400e);
  }
  .groups-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-style: var(--tw-border-style);
    border-width: 2px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    border-radius: var(--r-lg);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 3%, transparent);
    }
  }
  .groups-empty-icon {
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    place-items: center;
    border-radius: calc(infinity * 1px);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .groups-empty-title {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .groups-empty-text {
    max-width: var(--container-sm);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
  }
  .groups-empty-cta {
    margin-top: calc(var(--spacing) * 1);
  }
  .revision-book-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 8%, transparent);
    }
    color: var(--mute);
  }
  .rev-help-icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    place-items: center;
    border-radius: calc(infinity * 1px);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .rev-help-points {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    max-width: var(--container-md);
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    text-align: left;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .rev-help-point-ico {
    flex-shrink: 0;
  }
  .rev-help-types {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .rev-help-type {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 8%, transparent);
    }
    color: var(--mute);
  }
  .rev-help-steps {
    margin-top: calc(var(--spacing) * 6);
    width: 100%;
    max-width: var(--container-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
    border-radius: var(--r-lg);
  }
  .rev-help-steps-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-transform: uppercase;
    font: 400 var(--t-xs)/1.4 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--mute);
  }
  .rev-help-step {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--reader-text);
  }
  .rev-help-control {
    margin-inline: calc(var(--spacing) * 0.5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    vertical-align: middle;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border-radius: var(--r-md);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 10%, transparent);
    }
    color: var(--mark);
  }
  .rev-help-cta {
    margin-top: calc(var(--spacing) * 6);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    border-color: var(--mark);
    color: var(--mark);
  }
  .rev-help-cta:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, var(--reader-bg));
    }
  }
  .collection-book {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .collection-book-head {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    min-height: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .collection-book-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .collection-chapter-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .revision-card-source {
    display: inline-flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  .group-remove-btn {
    margin-left: auto;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--rose-bg);
    color: var(--rose-text);
  }
  .group-remove-btn:hover {
    background: var(--rose-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rose-text) 16%, transparent);
    }
  }
  .revision-reader-source {
    display: none;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    @media (width >= 640px) {
      display: flex;
    }
    color: var(--mute);
  }
  .coll-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .coll-listrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .coll-listrow-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .coll-row {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }
  .coll-row-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 6%, transparent);
    }
    color: var(--ink-2);
  }
  .coll-row-main {
    min-width: 0;
    flex: 1 1 auto;
  }
  .coll-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 0.875rem;
  }
  .coll-hero-meta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem 0.625rem;
  }
  .coll-hero-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }
  .coll-hero + .reader-nav {
    margin-bottom: 1.25rem;
  }
  .coll-do-n {
    font: 400 var(--t-nano) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
}
@layer pages {
  .strategy {
    --sg-drive: var(--legend-1, #4f46c4);
  }
  .app-fill-surface {
    fill: var(--paper);
    stroke: none;
  }
  [data-decision-index="0"] {
    --dc: var(--legend-1);
  }
  [data-decision-index="1"] {
    --dc: var(--legend-3);
  }
  [data-decision-index="2"] {
    --dc: var(--legend-2);
  }
  [data-decision-index="3"] {
    --dc: var(--color-brown-600);
  }
  [data-decision-index] {
    --dc-ink: var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      --dc-ink: color-mix(in srgb, var(--dc) 78%, var(--ink));
    }
    --dc-tint: var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      --dc-tint: color-mix(in srgb, var(--dc) var(--tint), var(--paper));
    }
    --dc-edge: var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      --dc-edge: color-mix(in srgb, var(--dc) 30%, var(--rule));
    }
  }
  .sg-dot {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--dc);
  }
  .sg-eyebrow {
    display: block;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .sg-block {
    margin-top: 2.5rem;
  }
  .sg-block:first-child {
    margin-top: 0;
  }
  .sg-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 1rem;
    margin: 0 0 1.125rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .sg-head > * {
    grid-column: 1 / -1;
  }
  .sg-block:first-child > .sg-head {
    border-top: 0;
    padding-top: 0;
  }
  .sg-head-t {
    grid-column: 1;
    margin: 0;
    font: 500 var(--t-h2) / 1.35 var(--font-display);
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .sg-head-s {
    max-width: 42rem;
    margin: 0.5rem 0 0;
    font-size: var(--t-md, 1rem);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .sg-head-note {
    max-width: 42rem;
    margin: 0.4375rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-3);
  }
  .sg-figbox {
    margin: 0 0 1.5rem;
    text-align: center;
  }
  .sg-fig {
    width: 100%;
    max-width: min(35rem, calc(var(--fig-vb, 35rem) * var(--fig-max-scale, 1.25)));
    height: auto;
  }
  .sg-figbox figcaption {
    max-width: var(--w-measure);
    margin: 0.625rem auto 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-3);
    text-align: left;
  }
  .sg-invs {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .sg-inv {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.375rem 1.25rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--rule-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .sg-inv-t {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .sg-inv-f {
    font: 400 var(--t-sm) / 1.5 var(--font-label);
    color: var(--ink-2);
  }
  .sg-symband {
    margin-top: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .sg-syms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin-top: 0.5rem;
  }
  .sg-sym {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    padding: 0.3125rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-3);
  }
  .sg-sym b {
    font: 500 var(--t-sm) / 1 var(--font-label);
    color: var(--ink);
  }
  .sg-callout {
    margin-top: 1.25rem;
    padding: 0.6875rem 0.875rem;
    border-left: 2px solid var(--h-warn);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) var(--tint), var(--paper));
    }
  }
  .sg-callout-l {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .sg-callout-l li + li {
    margin-top: 0.25rem;
  }
  .sg-callout-t {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .sg-callout-t b {
    font-weight: 500;
    color: var(--ink);
  }
  .sg-decs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .sg-dec {
    border: 1px solid var(--rule);
    border-left: 2px solid var(--dc);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    overflow: hidden;
  }
  .sg-dec-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.6875rem 1.125rem;
    border-bottom: 1px solid var(--rule);
    background: var(--dc-tint);
  }
  .sg-dec-lab {
    order: 1;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dc-ink);
  }
  .sg-dec-q {
    order: 4;
    flex: 0 0 100%;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .sg-dec-as {
    order: 5;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    line-height: 1.5;
  }
  .sg-dec-a {
    display: contents;
  }
  .sg-dec-a > * {
    padding-block: 0.4375rem;
  }
  .sg-dec-a > .sg-dec-a-nm {
    padding-right: 1.25rem;
  }
  .sg-dec-a:not(:first-child) > * {
    border-top: 1px solid var(--dc-edge);
  }
  .sg-dec-a-nm {
    font-weight: 500;
    color: var(--ink);
  }
  .sg-dec-a-do {
    color: var(--dc-ink);
  }
  @container doc (width < 40rem) {
    .sg-dec-as {
      grid-template-columns: minmax(0, 1fr);
    }
    .sg-dec-a > * {
      padding-block: 0;
    }
    .sg-dec-a > .sg-dec-a-nm {
      padding-top: 0.5rem;
      padding-right: 0;
    }
    .sg-dec-a > .sg-dec-a-do {
      padding-bottom: 0.5rem;
    }
    .sg-dec-a:not(:first-child) > .sg-dec-a-do {
      border-top: 0;
    }
  }
  .sg-a-fig {
    display: block;
    width: 100%;
    max-width: 9rem;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, var(--paper));
    }
  }
  .sg-a-so {
    margin: 0.25rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .sg-a-tell {
    margin: 0.5rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .sg-a-micro {
    margin: 0.625rem 0 0;
    font: 500 var(--t-sm) / 1.5 var(--font-body);
    color: var(--dc-ink);
  }
  .sg-a :is(.sg-a-so, .sg-a-tell, .sg-a-micro) .katex {
    --katex-scale: 1.1;
    font-size: 1.1em !important;
    line-height: 1;
  }
  .sb-board {
    position: relative;
    container-type: inline-size;
    container-name: board;
  }
  .sb-board > .expand-toggle-btn {
    position: absolute;
    top: calc(2px + 1.125rem + var(--t-micro) / 2);
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
  }
  :is(.sb-band-head, .sb-band-open, .sb-rung-h, .sg-dec-head) > .sg-dot {
    position: relative;
    top: -0.15em;
  }
  .sb-band {
    margin-top: 2.5rem;
    padding-top: 1.125rem;
    border-top: 2px solid var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 2px solid color-mix(in srgb, var(--dc) 45%, var(--paper));
    }
  }
  .sb-band:nth-child(1 of .sb-band) {
    margin-top: 0;
  }
  .sb-band-open {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 1.125rem;
    margin-bottom: 1.25rem;
  }
  .sb-band-eyebrow {
    grid-area: 1 / 1 / 2 / -1;
    margin: 0 0 0.25rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dc-ink);
  }
  .sb-band-open > .sb-band-t {
    grid-area: 2 / 1 / 3 / -1;
    margin: 0 0 0.625rem;
  }
  .sb-band-open > .sg-a {
    display: contents;
  }
  .sb-band-open > .sg-a > .sg-a-fig {
    grid-area: 3 / 1 / span 3 / 2;
    align-self: start;
  }
  .sb-band-open > .sg-a > .sg-a-tell {
    grid-area: 3 / 2;
    margin: 0;
  }
  .sb-band-open > .sg-a > .sg-a-so {
    grid-area: 4 / 2;
    margin-top: 0.375rem;
  }
  .sb-band-open > .sg-a > .sg-a-micro {
    grid-area: 5 / 2;
    margin-top: 0.5rem;
  }
  @container doc (width < 40rem) {
    .sb-band-open {
      grid-template-columns: 6rem minmax(0, 1fr);
      column-gap: 0.75rem;
    }
    .sb-band-open > .sg-a > .sg-a-fig {
      grid-area: 3 / 1 / 4 / 2;
      width: 6rem;
    }
    .sb-band-open > .sg-a > .sg-a-so {
      grid-area: 4 / 1 / 5 / -1;
      margin-top: 0.625rem;
    }
    .sb-band-open > .sg-a > .sg-a-micro {
      grid-area: 5 / 1 / 6 / -1;
    }
  }
  .sb-band-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dc-edge);
  }
  .sb-band-t {
    font: 500 var(--t-h3) / 1.3 var(--font-display);
    color: var(--ink);
  }
  .sb-band-s {
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ink-3);
  }
  .sb-band-n, .sb-rung-n {
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dc-ink);
  }
  .sb-rung {
    margin-top: 1rem;
  }
  .sb-rung-h {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .sb-rung-t {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dc-ink);
  }
  .sb-rung-s {
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  @container board (width < 34rem) {
    .sb-rung-h {
      flex-wrap: wrap;
      row-gap: 0.25rem;
    }
    .sb-rung-h > .sb-rung-s {
      flex: 0 0 100%;
      padding-left: 0.9375rem;
    }
  }
  .sb-rung-empty {
    margin-top: 0.75rem;
  }
  .sb-rung-empty .sg-dot {
    display: none;
  }
  .sb-rung-empty .sb-rung-h {
    display: block;
    margin: 0;
  }
  .sb-rung-empty .sb-rung-t {
    display: inline;
    width: auto;
    margin-right: 0.5rem;
  }
  .sb-rung-empty .sb-rung-s {
    display: inline;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .sb-empty-to {
    font-weight: 500;
    color: var(--ink);
  }
  .sb-empty-to::before {
    content: "\2192\00a0";
  }
  .sb-sit {
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    scroll-margin-top: calc(var(--sticky-top) + 0.75rem);
  }
  .sb-sit[open] {
    border-color: var(--rule-2);
    background: var(--paper-over);
  }
  .sb-sit > summary {
    display: block;
    padding: 0.625rem 0.75rem;
    list-style: none;
    cursor: pointer;
  }
  .sb-sit > summary::-webkit-details-marker {
    display: none;
  }
  .sb-sit > summary:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 2px;
  }
  .sb-sit > summary {
    display: grid;
    position: relative;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
  }
  .sb-thumb {
    grid-area: 1 / 1 / 3 / 2;
    width: 6rem;
    height: 4.5rem;
    border-radius: var(--r-sm);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, var(--paper));
    }
  }
  .sb-sit-nm {
    grid-area: 1 / 2 / 2 / 3;
  }
  .sb-cls {
    grid-area: 2 / 2 / 3 / 3;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
  }
  .sb-sit-ask {
    grid-area: 3 / 1 / 4 / 3;
  }
  .sb-sit-cue {
    grid-area: 4 / 1 / 5 / 3;
  }
  .sb-sit-ask {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .sb-sit:not([open]) .sb-thumb .sg-fig-label {
    display: none;
  }
  .sb-caret {
    position: absolute;
    top: 0.9375rem;
    right: 0.75rem;
  }
  .sb-sit-nm, .sb-sit-cue {
    display: block;
  }
  .sb-sit-nm {
    padding-right: 1rem;
  }
  .sb-sit[open] > summary {
    grid-template-columns: 13rem minmax(0, 1fr) fit-content(11rem) 1.75rem;
    gap: 0.5rem 1.25rem;
    padding: 1.25rem 1.375rem;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 7%, var(--paper));
    }
  }
  .sb-sit[open] .sb-cls {
    grid-area: 1 / 3 / 2 / 4;
    align-self: start;
    margin-top: 0.25rem;
  }
  .sb-sit[open] .sb-thumb {
    grid-area: 1 / 1 / 4 / 2;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-2);
  }
  .sb-sit[open] .sb-sit-nm {
    padding-right: 0;
    font: 500 var(--t-h2) / 1.25 var(--font-display);
    letter-spacing: -0.014em;
  }
  .sb-sit[open] .sb-sit-ask {
    grid-area: 2 / 2 / 3 / 5;
    margin-top: 0;
  }
  .sb-sit[open] .sb-sit-cue {
    grid-area: 3 / 2 / 4 / 5;
    margin-top: 0;
    color: var(--ink-2);
  }
  .sb-sit[open] .sb-sit-cue > span, .sb-sit[open] .sb-sit-cue > .sb-cue {
    padding-left: 1.125rem;
    line-height: 1.5;
  }
  .sb-sit[open] .sb-caret {
    position: static;
    grid-area: 1 / 4 / 2 / 5;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
  }
  .sb-sit-body {
    min-width: 0;
  }
  .sb-sit-nm {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
  }
  .sb-caret {
    display: grid;
    place-items: center;
    color: var(--ink-3);
  }
  .sb-caret::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-right: 1.5px solid currentcolor;
    border-bottom: 1.5px solid currentcolor;
    transform: translateX(-1px) rotate(-45deg);
    transition: transform 0.12s ease;
  }
  .sb-sit[open] .sb-caret::before {
    transform: translateY(-1px) rotate(45deg);
  }
  .sb-sit-cue {
    margin-top: 0.375rem;
    font-size: var(--t-sm);
    line-height: 1.5;
  }
  .sb-sit-cue > span, .sb-sit-cue > .sb-cue {
    display: block;
    position: relative;
    padding-left: 0.875rem;
  }
  .sb-sit-cue > span::before, .sb-sit-cue > .sb-cue::before {
    content: "\2022";
    position: absolute;
    left: 0;
    font: 400 var(--t-sm) / inherit var(--font-label);
    color: var(--mark);
  }
  .sb-sit-cue > span + span, .sb-sit-cue > .sb-cue + .sb-cue {
    margin-top: 0.25rem;
  }
  .sb-cl {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.4375rem;
    border: 1px solid var(--dc-edge);
    border-radius: 999px;
    background: var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dc) 5%, var(--paper));
    }
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--dc);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--dc) 75%, var(--ink));
    }
  }
  .sb-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--rule);
  }
  .sb-g-t {
    grid-row: 1;
  }
  .sb-givens {
    grid-row: 2;
  }
  .sb-rl {
    grid-row: 3;
  }
  .sb-route {
    grid-row: 4;
  }
  .sb-trap {
    grid-row: 5;
  }
  .sb-g-t, .sb-givens {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .sb-g-t, .sb-rl {
    margin: 0;
    padding: 1.125rem 1.375rem 0.75rem;
  }
  .sb-givens, .sb-route {
    padding: 0 1.375rem 1.125rem;
  }
  @container board (width < 34rem) {
    .sb-g-t, .sb-rl, .sb-givens, .sb-route {
      padding-inline: 0.9375rem;
    }
    .sb-sit[open] > summary {
      grid-template-columns: 6rem minmax(0, 1fr);
      gap: 0.375rem 0.75rem;
      padding: 0.9375rem;
    }
    .sb-sit[open] .sb-thumb {
      grid-area: 1 / 1 / 3 / 2;
      width: 6rem;
      padding: 0.25rem;
    }
    .sb-sit[open] .sb-sit-nm {
      grid-area: 1 / 2 / 2 / 3;
      padding-right: 2rem;
      font-size: var(--t-md);
    }
    .sb-sit[open] .sb-cls {
      grid-area: 2 / 2 / 3 / 3;
    }
    .sb-sit[open] .sb-sit-ask {
      grid-area: 3 / 1 / 4 / 3;
      margin-top: 0.5rem;
    }
    .sb-sit[open] .sb-sit-cue {
      grid-area: 4 / 1 / 5 / 3;
    }
    .sb-sit[open] .sb-caret {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
    }
  }
  .sb-rl, .sb-g-t {
    display: block;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .sb-givens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    column-gap: 1.75rem;
    margin-inline: 0;
    list-style: none;
  }
  .sb-g {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: 0.625rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .sb-g:not(:has(.sb-g-s)) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }
  .sb-g-s {
    grid-area: 1 / 1 / 2 / 2;
    font: 400 var(--t-sm) / 1.5 var(--font-label);
    color: var(--mark);
  }
  .sb-route {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    margin: 0;
    list-style: none;
    counter-reset: sbstep;
  }
  .sb-step {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.375rem 0.75rem;
    align-items: start;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rule);
    counter-increment: sbstep;
  }
  .sb-step:last-child {
    border-bottom: 0;
  }
  .sb-step::before {
    content: counter(sbstep, decimal-leading-zero);
    grid-row: 1;
    font: 400 var(--t-micro) / 1.9 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .sb-step-do {
    grid-column: 2;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--ink);
  }
  .sb-step-eq {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    padding: calc(var(--reader-font-size) / 2) 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
    overflow: auto hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
    color: var(--ink);
  }
  .sb-step-eq .katex-display, .sb-step-eq .katex-display > .katex {
    margin: 0 !important;
    text-align: left !important;
  }
  @container board (width >= 40rem) {
    .sb-route {
      grid-template-columns: 1.5rem minmax(0, 1fr) fit-content(17rem);
    }
    .sb-step-eq {
      grid-area: 1 / 3;
    }
    .sb-step--wide .sb-step-eq {
      grid-area: 2 / 2 / 3 / -1;
    }
  }
  @container board (width >= 56rem) {
    .sb-route {
      grid-template-columns: 1.5rem minmax(0, 1fr) fit-content(24rem);
    }
  }
  .sb-step[data-given]::before {
    color: var(--mark);
  }
  .sb-step[data-given] .sb-step-eq {
    padding-left: 0.625rem;
    border-left: 2px solid var(--mark);
  }
  .sb-trap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    padding: 0.875rem 1.375rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) var(--tint), var(--paper));
    }
  }
  .sb-trap-l {
    flex: 1 0 100%;
    margin-bottom: 0.125rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--h-bad);
  }
  .sb-trap-t {
    display: grid;
    flex: 1 1 13rem;
    grid-template-columns: 0.75rem minmax(0, 1fr);
    gap: 0.4375rem;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .sb-trap-t::before {
    content: "\2715";
    font: 400 var(--t-micro) / 1.6 var(--font-label);
    color: var(--h-bad);
  }
  @container board (width < 34rem) {
    .sb-trap {
      padding-inline: 0.9375rem;
    }
  }
  .sb-cards {
    display: grid;
    gap: 0.625rem;
  }
  @container board (width >= 40rem) {
    .sb-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sb-board .sb-sit[open] {
    grid-column: 1 / -1;
  }
  .sg-bxs {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sg-bx {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.5rem;
    padding: 1.125rem 0;
  }
  .sg-bx + .sg-bx {
    border-top: 1px solid var(--rule);
  }
  .sg-bx-n {
    padding-top: 0.3125rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .sg-bx-b {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .sg-bx-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "hd    hd   hd" "mineq mid  theirseq";
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .sg-bx-hd {
    grid-area: hd;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
  }
  .sg-bx-eq[data-cell="mine"] {
    grid-area: mineq;
  }
  .sg-bx-mid {
    grid-area: mid;
  }
  .sg-bx-eq[data-cell="theirs"] {
    grid-area: theirseq;
  }
  .sg-bx-g[data-parts="name"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hd";
  }
  .sg-bx-t {
    margin: 0;
    font: 500 var(--t-body) / 1.3 var(--font-display);
    letter-spacing: -0.008em;
    color: var(--ink);
  }
  .sg-bx-tag {
    padding: 0.1875rem 0.4375rem;
    border-radius: var(--r-sm);
    background: var(--mark-soft);
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mark);
    white-space: nowrap;
  }
  .sg-bx[data-bridge="look-alike"] .sg-bx-tag {
    background: var(--paper-2);
    color: var(--ink-3);
  }
  .sg-bx-eq {
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.4375rem 1.25rem 0.4375rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--paper-2);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.25rem), transparent 100%);
    font: 400 var(--t-sm) / 1.5 var(--font-display);
    font-style: italic;
    color: var(--ink);
    white-space: nowrap;
  }
  .sg-bx-eq[data-none] {
    background: none;
    padding-left: 0;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .sg-bx-eq::-webkit-scrollbar {
    display: none;
  }
  .sg-bx-eq sub, .sg-bx-eq sup {
    font-size: 0.72em;
    font-style: normal;
  }
  .sg-brf {
    font-style: normal;
  }
  .sg-bx-sub {
    margin-right: 0.4375rem;
    font-size: var(--t-micro);
    font-style: normal;
    font-family: var(--font-label);
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
  .sg-bx-sub sub {
    font-size: 0.72em;
  }
  .sg-brx {
    font-weight: 400;
    color: var(--mark);
  }
  .sg-bx-mid {
    width: 7.5rem;
    display: grid;
    grid-template-columns: 1fr 1rem 1.5rem 1fr;
    align-items: center;
    gap: 0.0625rem 0.25rem;
    padding: 0 0.125rem;
  }
  .sg-bx-arrow {
    grid-column: 2;
    justify-self: center;
  }
  .sg-bx-mid .sg-brx {
    grid-column: 3;
    justify-self: center;
  }
  .sg-bx-arrow {
    font-size: var(--t-body);
    line-height: 1;
    color: var(--rule-2);
  }
  .sg-bx-mid .sg-brx {
    line-height: 1.1;
  }
  .sg-bx-mid .sg-brx {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--t-body);
  }
  .sg-bx-q {
    grid-column: 1 / -1;
    max-width: 100%;
    font: 400 var(--t-micro) / 1.25 var(--font-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-3);
  }
  @container doc (width < 34rem) {
    .sg-bx-g {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "hd" "mineq" "mid" "theirseq";
      justify-items: start;
      gap: 0.375rem;
    }
    .sg-bx-g[data-parts="name"] {
      grid-template-areas: "hd";
    }
    .sg-bx-eq {
      justify-self: stretch;
    }
    .sg-bx-mid {
      width: auto;
      grid-template-columns: 1rem auto auto;
      justify-content: start;
      align-items: baseline;
      gap: 0.375rem;
      padding: 0.125rem 0;
    }
    .sg-bx-arrow {
      grid-column: 1;
    }
    .sg-bx-mid .sg-brx {
      grid-column: 2;
    }
    .sg-bx-q {
      grid-column: 3;
      text-align: left;
    }
    .sg-bx-arrow {
      rotate: 90deg;
    }
  }
  .sg-bx-why {
    margin: 0.5rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink);
  }
  .sg-bx-via {
    margin: 0.3125rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .sg-bx-via-l {
    margin-right: 0.5rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .sg-bx-m {
    font-family: var(--font-display);
    font-style: italic;
  }
  .sg-m .katex {
    --katex-scale: 1;
    font-size: 1em !important;
    line-height: 1;
  }
  .sg-m {
    font-style: normal;
    white-space: nowrap;
  }
  .rail-cards {
    margin: 0.125rem 0 0.375rem;
    padding: 0;
    list-style: none;
  }
  .rail-mid {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.15s ease;
  }
  .rail-mid:hover, .rail-mid:focus-within {
    scrollbar-color: var(--rule-2) transparent;
  }
  .rail-mid::-webkit-scrollbar {
    width: 0.25rem;
  }
  .rail-mid::-webkit-scrollbar-track {
    background: transparent;
  }
  .rail-mid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: transparent;
    transition: background 0.15s ease;
  }
  .rail-mid:hover::-webkit-scrollbar-thumb, .rail-mid:focus-within::-webkit-scrollbar-thumb {
    background: var(--rule-2);
  }
  .rail-mid[data-more] {
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  @container chapter-body (width >= 60rem) {
    .sb-band-open {
      column-gap: 1.5rem;
    }
  }
}
@layer pages {
  .cg-doc {
    --sg-drive: var(--legend-1, #4f46c4);
  }
  .sg-fig-struct, .sg-fig-body, .sg-fig-drive {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .sg-fig-struct {
    stroke: var(--ink-3);
  }
  .sg-fig-body {
    stroke: var(--ink-2);
  }
  .sg-fig-drive {
    stroke: var(--sg-drive);
  }
  .sg-fig-struct-head, .sg-fig-body-head, .sg-fig-drive-head {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .sg-fig-struct-head {
    stroke: var(--ink-3);
  }
  .sg-fig-body-head {
    stroke: var(--ink-2);
  }
  .sg-fig-drive-head {
    stroke: var(--sg-drive);
  }
  .sg-fig-region {
    fill: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--ink) 6%, transparent);
    }
    stroke: none;
  }
  .sg-fig-label {
    fill: var(--ink-2);
    font: 400 14px var(--font-label);
  }
  svg[viewBox="0 0 96 72"] .sg-fig-label {
    font-size: 8px;
  }
  .sg-fig-accent {
    fill: var(--sg-drive);
  }
  .fc-cond-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fc-cond-list li {
    position: relative;
    padding-left: 0.9375rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .fc-cond-list li + li {
    margin-top: 0.5rem;
  }
  .fc-cond-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--h-warn, #b9760a);
  }
  .cy-syms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
  }
  .cy-sym {
    display: inline-block;
    max-width: 100%;
    padding: 0.3125rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: var(--t-xs, 0.8125rem);
    line-height: 1.7;
    color: var(--ink-3);
  }
  .cy-sym b {
    margin-right: 0.375rem;
    font-weight: 500;
    color: var(--ink);
  }
  .cy-sym .katex {
    white-space: nowrap;
  }
  .cy-u {
    margin-left: 0.25em;
    font-style: normal;
    white-space: nowrap;
    color: var(--ink-4, var(--ink-3));
    opacity: 0.85;
  }
  .cy-u::before {
    content: "(";
  }
  .cy-u::after {
    content: ")";
  }
  .cg-doc .katex:not( .katex-display > .katex, .cy-sym > b .katex, .fc-anatomy-var-sym .katex, .cy-u .katex, .dv-lands .katex, .sym-tip .katex ) {
    --katex-scale: 1.1;
    font-size: 1.1em !important;
    line-height: 1;
  }
  .cy-u .katex {
    font-size: 0.9em !important;
  }
  .cg-doc mark {
    background: none;
    color: var(--ink);
    box-shadow: inset 0 -0.4em 0 var(--mark-soft);
  }
  .syms > summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    list-style: none;
    cursor: pointer;
  }
  .syms > summary::-webkit-details-marker {
    display: none;
  }
  .syms > summary .edges-l {
    flex: 1;
    margin: 0;
  }
  .syms-n {
    font: 400 var(--t-label) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .syms-v {
    flex: none;
    color: var(--ink-3);
    transition: transform 0.15s ease;
  }
  .syms[open] .syms-v {
    transform: rotate(180deg);
  }
  .syms > summary:hover .syms-n, .syms > summary:hover .syms-v {
    color: var(--ink-2);
  }
  .syms .cy-syms {
    margin-top: 0.875rem;
  }
  .syms .cy-syms {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0;
  }
  .syms .cy-sym {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    max-width: none;
    padding: 0.4375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .syms .cy-sym > b {
    margin: 0;
    padding-right: 0.875rem;
    font-weight: 500;
    color: var(--ink);
  }
  .cy-sym-m {
    min-width: 0;
  }
  @container doc (width >= 40rem) {
    .syms .cy-syms {
      grid-template-columns: max-content minmax(0, 1fr) 2.25rem max-content minmax(0, 1fr);
    }
    .syms .cy-sym:nth-child(odd) {
      grid-column: 1 / 3;
    }
    .syms .cy-sym:nth-child(even) {
      grid-column: 4 / 6;
    }
  }
  .cg-lbl {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-bottom: 0.75rem;
    font: 400 var(--t-micro, 0.6875rem) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .cg-lbl-i {
    flex: none;
    color: var(--ink-3);
  }
  .rel-p--der {
    padding: 1.125rem 1.25rem 1.25rem;
  }
  .der-h {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 1.125rem;
    align-items: center;
    margin-bottom: 1rem;
  }
  .der-h--nofig {
    display: block;
    margin-bottom: 0.875rem;
  }
  @container doc (width < 32rem) {
    .der-h {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.625rem;
    }
    .der-h .dv-fig {
      max-width: 9rem;
    }
  }
  .der-t {
    min-width: 0;
  }
  .der-n {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .der-h .dv-d {
    margin-top: 0.3125rem;
  }
  .der + .der {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .dvs {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .dv {
    border-bottom: 1px solid var(--rule);
  }
  .dv > summary {
    list-style: none;
    cursor: pointer;
  }
  .dv > summary::-webkit-details-marker {
    display: none;
  }
  .dv > summary:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .dv-h {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 1.125rem;
    align-items: start;
    padding: 1.125rem 0;
  }
  .dv[open] > .dv-h {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
  }
  .dv-fig {
    display: block;
    width: 100%;
  }
  .dv-fig svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .dv-t {
    display: block;
    min-width: 0;
  }
  .dv-n {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .dv-d {
    display: block;
    margin-top: 0.3125rem;
    font-size: var(--t-sm, 0.8125rem);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .dv-lands {
    display: block;
    margin-top: 0.375rem;
    font: 400 var(--t-micro, 0.6875rem) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  .dv-lands-l {
    text-transform: uppercase;
  }
  .dv-lands .katex {
    font-size: var(--t-sm) !important;
    line-height: 1;
    color: var(--ink-2);
  }
  .dv--nofig .dv-t {
    grid-column: 2;
  }
  .dvs:not(:has(.dv-fig)) :is(.dv-h, .dv[open] > .dv-h) {
    grid-template-columns: minmax(0, 1fr);
  }
  .dvs:not(:has(.dv-fig)) .dv--nofig .dv-t {
    grid-column: 1;
  }
  .dv-tl {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .dv-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.125rem 0.4375rem;
    border-radius: var(--r-sm);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 9%, var(--paper));
    }
    color: var(--mark);
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .dv-mark svg {
    transition: transform 0.15s ease;
  }
  .dv[open] .dv-mark svg {
    transform: rotate(180deg);
  }
  .dv-body {
    padding: 0 0 1.5rem;
  }
  .dv-steps {
    margin-top: 0.25rem;
    padding: 0 1.25rem;
    border-radius: var(--r-lg);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2.5%, var(--paper));
    }
  }
  .dv-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem 1.5rem;
    padding: 1.125rem 0;
    border-top: 1px solid var(--rule);
  }
  .dv-step:first-child {
    border-top: 0;
  }
  @container doc (width >= 40rem) {
    .dv-step {
      grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
      align-items: center;
    }
    .dv-step-t {
      grid-column: 1;
    }
    .dv-step-w {
      grid-column: 1;
    }
    .dv-step-e {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    .dv-step--wide {
      grid-template-columns: minmax(0, 1fr);
    }
    .dv-step--wide .dv-step-e {
      grid-column: 1;
      grid-row: auto;
      margin-top: 0.25rem;
    }
  }
  .dv-step-t {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink);
  }
  .dv-step-n {
    margin-right: 0.5rem;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .dv-step-w {
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-3);
  }
  .dv-step-e {
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
    overflow-x: auto;
  }
  .dv-step-e .katex-display, .dv-step-e .katex-display > .katex {
    margin: 0;
    text-align: left;
  }
  .dv-step-e--prose {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .dv-step--lands {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 -1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 4%, transparent);
    }
  }
  @container doc (width >= 40rem) {
    .dv-step--lands {
      grid-template-columns: minmax(0, 1fr);
    }
    .dv-step--lands .dv-step-e {
      grid-column: 1;
      grid-row: 1;
    }
  }
  .dv-step--lands .dv-step-e {
    padding: 0;
    border: 0;
    background: none;
  }
  .dv-step--lands .katex-display, .dv-step--lands .katex-display > .katex {
    text-align: center;
  }
  .dv-step--ends .dv-step-e {
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 4%, var(--paper));
    }
  }
  .cg-doc > .sec {
    margin-top: 2rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--rule);
  }
  .cg-doc > .sec:has(.cy-lead) {
    padding-top: 0.25rem;
  }
  .sec-sub {
    max-width: 42rem;
    margin: 0.5rem 0 0;
    font-size: var(--t-md, 1rem);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .sec-note {
    max-width: 42rem;
    margin: 0.4375rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-3);
  }
  .sec-body {
    margin-top: 1.5rem;
  }
  .traps {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .trap {
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .trap > summary {
    list-style: none;
    cursor: pointer;
  }
  .trap > summary::-webkit-details-marker {
    display: none;
  }
  .trap-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .trap-m::before {
    content: none;
  }
  .trap-m, .trap-f {
    position: relative;
    padding: 1rem 1.125rem 1rem 2.375rem;
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .trap-m {
    background: var(--h-bad, #983e50);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad, #983e50) 3%, var(--paper));
    }
    color: var(--ink);
  }
  .trap-f {
    background: var(--h-good, #2f8f6b);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good, #2f8f6b) 3%, var(--paper));
    }
    color: var(--ink-2);
  }
  .trap-mk {
    position: absolute;
    left: 1.125rem;
    top: 1rem;
    font-style: normal;
    font-size: 0.9em;
    line-height: 1.6;
  }
  .trap-m .trap-mk {
    color: var(--h-bad, #983e50);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-bad, #983e50) 70%, transparent);
    }
  }
  .trap-f .trap-mk {
    color: var(--h-good, #2f8f6b);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-good, #2f8f6b) 70%, transparent);
    }
  }
  .trap-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 1.125rem;
    border-bottom: 1px solid var(--rule);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .trap-ix, .trap-nm {
    font: 400 var(--t-micro, 0.6875rem) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .trap-ix::after {
    content: " \00b7";
  }
  .trap-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-left: auto;
    font: 400 var(--t-micro, 0.6875rem) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mark);
  }
  .trap-cta-c, .trap[open] .trap-cta-o {
    display: none;
  }
  .trap[open] .trap-cta-c {
    display: inline;
  }
  .trap[open] .trap-cta svg {
    transform: rotate(180deg);
  }
  .trap-body {
    padding: 0;
  }
  .trap-w, .trap-r {
    margin: 0;
    padding: 0.8125rem 1.125rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .trap-w {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 5%, var(--paper));
    }
  }
  .trap-r {
    padding-bottom: 1rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  @container doc (width < 40rem) {
    .trap-h {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .objs {
    max-width: 44rem;
    margin: 1.25rem 0 0;
  }
  .obj-l {
    margin: 0 0 0.4375rem;
    font: 400 var(--t-micro, 0.6875rem) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .obj-l + .obj-l, .obj-run + .obj-l {
    margin-top: 0.875rem;
  }
  .obj-run {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .obj-run--bare {
    margin-top: 1.125rem;
  }
  .obj-run--bare li::before {
    color: var(--ink-3);
  }
  .obj-run li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.0625rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .obj-run li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--mark);
  }
  .obj-run b {
    font-weight: 500;
    color: var(--mark);
  }
  .cg-recall {
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .cg-recall .cy-syms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.5rem 1.75rem;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .cg-recall .cy-sym {
    display: block;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: 1.6;
    color: var(--ink-2);
  }
  .cg-doc .katex[data-gloss] {
    cursor: help;
    border-bottom: 1px dotted var(--rule-2);
  }
  .cg-doc .katex-display .katex[data-gloss] {
    border-bottom: 0;
  }
  .cg-doc .katex .sym-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    display: block;
    width: max-content;
    max-width: 17rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-over);
    box-shadow: 0 2px 10px var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent);
    }
    font: 400 var(--t-xs) / 1.5 var(--font-body);
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    color: var(--ink-2);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }
  .sym-tip-row {
    display: block;
    text-indent: 0;
  }
  .sym-tip-row + .sym-tip-row {
    margin-top: 0.25rem;
  }
  .sym-tip-row .katex {
    margin-right: 0.375rem;
    font-size: 1em;
    color: var(--ink);
  }
  .cg-doc .katex[data-gloss]:hover > .sym-tip, .cg-doc .katex[data-gloss][data-gloss-open] > .sym-tip {
    visibility: visible;
    opacity: 1;
  }
  .edges-l {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 0.875rem;
    font: 400 var(--t-micro, 0.6875rem) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .edges-l::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
  }
  .edges-l:first-child {
    margin-top: 0.5rem;
  }
  .edges-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  @container doc (width >= 42rem) {
    .edges-g {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .edge {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .edge-h {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4375rem 0.9375rem;
    border-bottom: 1px solid var(--rule);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    font: 400 var(--t-micro, 0.6875rem) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .edge-ix::after {
    content: " \00b7";
  }
  .edge-nm {
    color: var(--ink-2);
  }
  .edge--keep {
    --edge-hue: var(--h-note);
  }
  .edge--break {
    --edge-hue: var(--h-warn);
  }
  :is(.edge--keep, .edge--break) {
    border-color: var(--edge-hue);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--edge-hue) 28%, var(--rule));
    }
  }
  :is(.edge--keep, .edge--break) > .edge-h {
    border-bottom-color: var(--edge-hue);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom-color: color-mix(in srgb, var(--edge-hue) 26%, var(--rule));
    }
    background: var(--edge-hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--edge-hue) 9%, var(--paper));
    }
  }
  :is(.edge--keep, .edge--break) .edge-ix {
    color: var(--edge-hue);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--edge-hue) 85%, var(--ink));
    }
  }
  .edge-b {
    padding: 0.875rem 0.9375rem 1rem;
  }
  .edge-part + .edge-part {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rule);
  }
  .edge-l {
    display: block;
    margin-bottom: 0.3125rem;
    font: 400 var(--t-nano, 0.625rem) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .edge-q {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink);
  }
  .edge-s, .edge-x {
    margin: 0.375rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .edge--break .edge-then {
    font-weight: 500;
    color: var(--ink);
  }
  .forms {
    margin-top: 0.25rem;
  }
  .form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1.75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
  }
  .form:first-child {
    border-top: 0;
  }
  @container doc (width >= 40rem) {
    .form {
      grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
    }
  }
  .form-n {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
  }
  .form-fig {
    display: block;
    margin-top: 0.75rem;
  }
  .form-fig svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 9.5rem;
  }
  .form-t {
    min-width: 0;
  }
  .form-e {
    margin-block: calc(var(--reader-font-size) / -2);
    padding-block: calc(var(--reader-font-size) / 2);
    font-size: var(--t-sm);
    overflow: auto hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .form-e .katex-display, .form-e .katex-display > .katex {
    margin: 0;
    text-align: left;
  }
  .form-e--prose {
    line-height: 1.7;
    color: var(--ink);
  }
  .form-w {
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-3);
  }
  .form-l {
    color: var(--ink-3);
  }
  .form-l-col {
    min-width: 0;
  }
  .rel-h {
    padding: 0.5rem 1.25rem 1.125rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    border-bottom: 1px solid var(--rule);
  }
  .rel-nm {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4375rem 0;
    font: 400 var(--t-micro, 0.6875rem) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rel-ix {
    font-variant-numeric: tabular-nums;
  }
  .rel-ix::after {
    content: " \00b7";
  }
  .rel-claim {
    margin: 0.125rem 0 0;
    font-family: var(--font-display);
    font-size: var(--t-sm);
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: var(--ink);
  }
  .rel-short {
    margin: 0.5rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .rel-tabs {
    display: flex;
    gap: 1.75rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--rule);
  }
  .rel-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.75rem 0 0.6875rem;
    font: 400 var(--t-micro, 0.6875rem) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
  }
  .rel-tab:hover {
    color: var(--ink-2);
  }
  .rel-tab.on {
    color: var(--mark);
    border-bottom-color: var(--mark);
  }
  .rel-p--cond {
    padding: 1.125rem 1.25rem 1.25rem;
  }
  .rel-p--parts .fc-anatomy-vars {
    display: grid;
    grid-template-columns: minmax(1.75rem, max-content) minmax(0, 1fr);
  }
  .rel-p--parts .fc-anatomy-var {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 0 1.25rem;
    border-right: 0;
  }
  .rel-p--parts .fc-anatomy-var:last-child {
    border-bottom: 0;
  }
  .fc-anatomy-formula .katex-display {
    margin: 0;
  }
  .cy-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
  }
  .cy-lead:not(:has(.cy-corefig)) {
    display: block;
  }
  @container doc (width >= 40rem) {
    .cy-lead {
      grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
      gap: 2rem;
    }
  }
  .cy-lead .sec-h {
    margin-top: 0.375rem;
  }
  .cy-corefig {
    margin: 0;
    padding: 0;
  }
  .cy-corefig svg {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    max-width: min(14rem, calc(var(--fig-vb, 100%) * 1.25));
  }
  .cy-cap {
    margin-top: 0.625rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
    text-align: center;
  }
  .cy-lead--figleft .cy-lead-t {
    order: 2;
  }
  .cy-lead--figleft .cy-corefig {
    order: 1;
  }
  @container doc (width >= 40rem) {
    .cy-lead--figleft {
      grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    }
  }
  @container chapter-body (width >= 60rem) {
    .cg-doc:has(> .lede + .objs) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 2.5rem;
      align-items: start;
    }
    .cg-doc:has(> .lede + .objs) > * {
      grid-column: 1 / -1;
    }
    .cg-doc:has(> .lede + .objs) > .lede {
      grid-column: 1;
    }
    .cg-doc:has(> .lede + .objs) > .lede + .objs {
      grid-column: 2;
      margin-top: 0;
    }
    .formula-card.rel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .formula-card.rel > * {
      grid-column: 1 / -1;
    }
    .formula-card.rel > .rel-h {
      grid-column: 1;
    }
    .formula-card.rel > .rel-h + .fc-anatomy-formula {
      grid-column: 2;
      display: grid;
      place-items: center;
      border-left: 1px solid var(--rule);
    }
    .dv-step:not(.dv-step--wide, .dv-step--lands) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    }
  }
}
@layer pages {
  .ap-page {
    max-width: var(--w-doc);
    margin-inline: auto;
  }
  .ap-flow {
    display: block;
    min-width: 0;
  }
  .ap-flow:not(:empty) {
    margin-top: 1.5rem;
  }
  .ap-flow[data-mode="solution"] .ap-bar, .ap-flow[data-mode="solution"] .ap-advance {
    display: none;
  }
  .ap-flow[data-mode="solution"] .ap-col {
    margin-top: 0;
  }
  .ap-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  .ap-flow .ap-col {
    min-height: min( calc(100dvh - var(--sticky-stack, 0px) - var(--ap-strip-h, 0px) - var(--ap-door-h, 0px) - 6rem), 32rem );
  }
  .ap-qtype {
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    padding: 0.25rem 0.4375rem;
  }
  .ap-door {
    position: sticky;
    top: calc(var(--sticky-stack) + var(--ap-strip-h, 0px));
    z-index: 19;
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    background: var(--paper);
  }
  .ap-door [aria-pressed="false"] [data-ap-eye="hide"], .ap-door [aria-pressed="true"] [data-ap-eye="show"] {
    display: none;
  }
  .ap-figure {
    margin: 1.25rem 0 0;
    padding: 0.875rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
  }
  .ap-figure[data-ap-interactive] {
    padding: 0;
    border: 0;
    overflow: visible;
  }
  .ap-figure:not([data-ap-interactive]) svg {
    display: block;
    margin: 0 auto;
    max-width: min(100%, calc(var(--fig-vb, 100%) * var(--fig-max-scale, 1.25)));
    height: auto;
  }
  .ap-figure-inset {
    --fig-vb: 96px;
    --fig-max-scale: 1.875;
    margin: 0 0 1.25rem;
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
  }
  .ap-qstem .qstem + .qstem {
    margin-top: 0.9rem;
  }
  .ap-qbody .opts {
    margin-top: 1.25rem;
  }
  .ap-qbody .opt {
    grid-template-columns: 1.875rem minmax(0, 1fr);
    align-items: baseline;
  }
  .ap-qbody .opt-k {
    font-variant-numeric: tabular-nums;
  }
  .ap-qbody .opt-mark {
    grid-column: 2;
  }
  .ap-qbody .opt > .opt-mark[data-ap-quick] {
    grid-column: 3;
    margin-top: 0;
    padding-left: 1.25rem;
    text-align: right;
    white-space: nowrap;
  }
  @media (width < 48rem) {
    .ap-qbody .opt > .opt-mark[data-ap-quick] {
      grid-column: 2;
      margin-top: 0.375rem;
      padding-left: 0;
      text-align: left;
      white-space: normal;
    }
  }
  .ap-bar {
    position: sticky;
    top: calc(var(--sticky-stack) + var(--ap-strip-h, 0px) + var(--ap-door-h));
    z-index: 18;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    margin-inline: -0.75rem;
    background: var(--paper);
  }
  @media (width >= 64rem) {
    .ap-bar {
      margin-inline: -1rem;
      padding-inline: 1rem;
    }
  }
  .ap-bar-list {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ap-bar-list::-webkit-scrollbar {
    display: none;
  }
  .ap-bar-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
  }
  .ap-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
  }
  .ap-bar-btn:disabled {
    cursor: not-allowed;
  }
  .ap-bar-node {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-3);
    font: 400 var(--t-nano) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
  }
  .ap-bar-node[data-state="open"] {
    border-color: var(--rule-2);
    color: var(--ink-2);
  }
  .ap-bar-node[data-state="current"] {
    border-color: var(--mark);
    background: var(--mark);
    color: var(--mark-on);
  }
  .ap-bar-node[data-state="done"] {
    border-color: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 10%, var(--paper));
    }
    color: var(--h-good);
  }
  .ap-bar-node[data-state="done"][data-slow] {
    border-color: var(--h-warn);
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) 10%, var(--paper));
    }
    color: var(--h-warn);
  }
  .ap-bar-name {
    font: 400 var(--t-micro) / 1.2 var(--font-label);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .ap-bar-btn[data-state="open"] .ap-bar-name, .ap-bar-btn[data-state="done"] .ap-bar-name {
    color: var(--ink-2);
  }
  .ap-bar-btn[data-state="current"] .ap-bar-name {
    color: var(--mark);
    font-weight: 500;
  }
  .ap-bar-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
  }
  .ap-bar-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--rule-2);
  }
  .ap-bar-dot[data-state="done"] {
    background: var(--h-good);
  }
  .ap-bar-dot[data-state="done"][data-slow] {
    background: var(--h-warn);
  }
  .ap-bar-reset {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
  }
  .ap-bar-reset svg {
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .ap-advance {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .ap-advance p {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--ink-3);
  }
  .ap-advance .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .ap-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .ap-flush {
    margin-top: 0;
  }
  .ap-dec > .callout, .ap-cue > .callout {
    margin-top: 1rem;
  }
  .ap-wash-after {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
    }
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-restem {
    margin: 1rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.85;
    color: var(--ink-2);
  }
  .ap-restem p {
    margin: 0;
  }
  .ap-restem p + p {
    margin-top: 0.6875rem;
  }
  .ap-mk, .ap-sig-s {
    color: var(--ink);
    box-shadow: inset 0 -0.5em 0 var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 -0.5em 0 color-mix(in srgb, var(--ink) 6%, transparent);
    }
    border-bottom: 1px solid var(--rule-2);
  }
  .ap-mk[data-key], .ap-sig[data-key] .ap-sig-s {
    font-weight: 500;
    box-shadow: inset 0 -0.5em 0 var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 -0.5em 0 color-mix(in srgb, var(--mark) 14%, transparent);
    }
    border-bottom: 2px solid var(--mark);
  }
  .ap-mk-n {
    font: 400 var(--t-nano) / 1 var(--font-label);
    vertical-align: super;
    color: var(--ink-3);
    padding-left: 2px;
  }
  .ap-mk[data-key] .ap-mk-n {
    color: var(--mark);
  }
  .ap-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.125rem;
  }
  .ap-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0 0.5rem 0.875rem;
    border-left: 1px solid var(--rule);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .ap-row[data-key] {
    border-left: 2px solid var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 5%, var(--paper));
    }
  }
  .ap-row-n {
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .ap-row[data-key] .ap-row-n {
    color: var(--mark);
  }
  .ap-row-t {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.55;
  }
  .ap-row[data-key] .ap-row-t {
    font-weight: 500;
  }
  .ap-row-note {
    margin: 0.3125rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .ap-dec {
    margin-top: 1.75rem;
  }
  .ap-dec-head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
  }
  .ap-dec-n {
    font: 400 var(--t-micro) / 1.4 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .ap-dec-ask {
    margin: 0;
    font: 500 var(--t-h3) / 1.4 var(--font-display);
    letter-spacing: -0.012em;
  }
  .ap-cands {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.875rem;
  }
  .ap-cand {
    position: relative;
    border: 1px solid var(--rule);
    border-left-width: 2px;
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .ap-cand-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.8125rem 2.25rem 0.8125rem 0.9375rem;
    border: 0;
    background: transparent;
    font: 400 var(--t-sm) / var(--lh-body) var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
  }
  .ap-cand-btn:disabled {
    cursor: default;
  }
  .ap-claim {
    min-width: 0;
  }
  .ap-mark {
    position: absolute;
    top: 0.6875rem;
    right: 0.75rem;
    font: 400 var(--t-sm) / 1 var(--font-label);
    color: var(--ink-3);
  }
  .ap-verdict {
    margin-left: 0.5rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .ap-cand-why {
    margin: 0;
    padding: 0 0.9375rem 0.8125rem;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }
  .ap-cand[data-verdict="ok"] {
    border-color: var(--h-good);
  }
  .ap-cand[data-verdict="ok"][data-picked] {
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 6%, var(--paper));
    }
  }
  .ap-cand[data-verdict="ok"] .ap-verdict, .ap-cand[data-verdict="ok"] .ap-mark {
    color: var(--h-good);
  }
  .ap-cand[data-verdict="wrong"] {
    border-color: var(--h-bad);
  }
  .ap-cand[data-verdict="wrong"][data-picked] {
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 6%, var(--paper));
    }
  }
  .ap-cand[data-verdict="wrong"] .ap-mark {
    color: var(--h-bad);
  }
  .ap-cand[data-verdict="slower"] {
    border-color: var(--h-warn);
  }
  .ap-cand[data-verdict="slower"][data-picked] {
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) 7%, var(--paper));
    }
  }
  .ap-cand[data-verdict="slower"] .ap-verdict, .ap-cand[data-verdict="slower"] .ap-mark {
    color: var(--h-warn);
  }
  .ap-cue {
    margin-top: 1.5rem;
  }
  .ap-cue-head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
  }
  .ap-cue-n {
    font: 400 var(--t-micro) / 1.4 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .ap-cue-ask {
    margin: 0;
    line-height: 1.5;
  }
  .ap-cue-body {
    margin-top: 0.75rem;
    margin-left: 1.875rem;
  }
  .ap-blur {
    display: block;
    width: auto;
    min-width: 0;
    text-align: left;
    padding: 0.75rem 0.9375rem;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-md);
    background: var(--paper-2);
    cursor: pointer;
  }
  .ap-blur[disabled] {
    cursor: default;
  }
  .ap-blur-val {
    display: block;
    min-width: 0;
    overflow-x: auto;
    font-size: var(--t-sm);
    line-height: 1.6;
    filter: blur(5px);
    user-select: none;
    transition: filter 0.15s var(--ease-out, ease);
  }
  [data-ap-blur][data-shown] .ap-blur-val {
    filter: none;
    user-select: auto;
  }
  .ap-blur-hint {
    display: block;
    margin-top: 0.5rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-mis-echo {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.7;
  }
  .ap-steps {
    --ap-step-n: 1.75rem;
    --ap-step-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  .ap-step {
    display: grid;
    grid-template-columns: var(--ap-step-n) minmax(0, 1fr);
    gap: var(--ap-step-gap);
  }
  .ap-step-n {
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 0.4375rem;
  }
  .ap-step-main {
    min-width: 0;
  }
  .ap-step-t {
    margin: 0;
    font: 500 var(--t-h3) / 1.35 var(--font-display);
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .ap-step .step-why {
    margin: 0.375rem 0 0;
    border-left: 1px solid var(--rule-2);
    padding-left: 0.6875rem;
    line-height: 1.55;
  }
  .ap-step-body {
    margin-top: 0.6875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
  }
  .ap-step-body p {
    margin: 0;
    min-width: 0;
    overflow-x: auto;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink);
  }
  .ap-step-blur {
    padding: 0.625rem 0.875rem;
    margin-top: 0.75rem;
  }
  .ap-step-main > .callout {
    margin-top: 0.75rem;
  }
  .ap-sol-result {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.875rem;
    border-left: 2px solid var(--rule-2);
    background: var(--paper-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .ap-steps {
    --ap-step-n: 1.75rem;
    --ap-step-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  .ap-step {
    display: grid;
    grid-template-columns: var(--ap-step-n) minmax(0, 1fr);
    gap: var(--ap-step-gap);
  }
  .ap-step-n {
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 0.4375rem;
  }
  .ap-step-main {
    min-width: 0;
  }
  .ap-step-t {
    margin: 0;
    font: 500 var(--t-h3) / 1.35 var(--font-display);
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .ap-step .step-why {
    margin: 0.375rem 0 0;
    border-left: 1px solid var(--rule-2);
    padding-left: 0.6875rem;
    line-height: 1.55;
  }
  .ap-step-body {
    margin-top: 0.6875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
  }
  .ap-step-body p {
    margin: 0;
    min-width: 0;
    overflow-x: auto;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink);
  }
  .ap-step-blur {
    padding: 0.625rem 0.875rem;
    margin-top: 0.75rem;
  }
  .ap-step-main > .callout {
    margin-top: 0.75rem;
  }
  .ap-sol-result {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.875rem;
    border-left: 2px solid var(--rule-2);
    background: var(--paper-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .ap-syms {
    margin: 1.25rem 0 2rem;
  }
  .ap-sym-means {
    color: var(--ink-2);
  }
  .ap-syms-btn {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .ap-syms-label {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-syms-count {
    font: 400 var(--t-nano) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .ap-syms-chev {
    margin-left: auto;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-syms-btn[aria-expanded="true"] .ap-syms-label {
    color: var(--ink-2);
  }
  .ap-syms-table {
    margin-top: 0.75rem;
  }
  .ap-syms-table[data-across] .tbl {
    width: 100%;
    table-layout: fixed;
  }
  .ap-syms-table[data-across] th {
    white-space: normal;
    padding-right: 1.25rem;
  }
  .ap-syms-table[data-across] td {
    padding-top: 0.5rem;
    font-size: var(--t-xs);
    line-height: 1.5;
  }
  .ap-syms-table:not([data-across]) .tbl {
    width: auto;
  }
  .ap-syms-table:not([data-across]) td {
    vertical-align: baseline;
  }
  .ap-syms-table:not([data-across]) .ap-sym {
    white-space: nowrap;
    padding-right: 1.5rem;
  }
  .ap-ans {
    margin-top: 2rem;
    margin-left: calc(var(--ap-step-n, 1.75rem) + var(--ap-step-gap, 0.75rem));
  }
  .ap-ans-meta {
    text-transform: none;
    letter-spacing: 0;
  }
  .ap-ans-text {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    line-height: 1.7;
    filter: blur(6px);
    user-select: none;
    cursor: pointer;
    transition: filter 0.15s var(--ease-out, ease);
  }
  .ap-ans[data-shown] .ap-ans-text {
    filter: none;
    user-select: auto;
    cursor: default;
  }
  .ap-mis {
    border: 1px solid var(--rule);
    border-left-width: 2px;
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .ap-mis[data-yours] {
    border-color: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) 5%, var(--paper));
    }
  }
  .ap-mis-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem 0.375rem;
  }
  .ap-mis-opt {
    flex: 1;
    min-width: 0;
    font: 400 var(--t-sm) / 1.6 var(--font-body);
    color: var(--ink);
  }
  .ap-mis-tag {
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--h-bad);
  }
  .ap-mis-body {
    padding: 0 0.875rem 0.875rem;
  }
  .ap-mis .ap-mark {
    position: static;
  }
  .ap-mis[data-verdict="ok"] {
    border-color: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 5%, var(--paper));
    }
  }
  .ap-mis[data-verdict="ok"] .ap-mark {
    color: var(--h-good);
  }
  .ap-mis[data-verdict="wrong"] {
    border-color: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--h-bad) 55%, var(--rule));
    }
  }
  .ap-mis[data-verdict="wrong"] .ap-mark {
    color: var(--h-bad);
  }
  .ap-mis-move {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .ap-mis-x {
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--h-bad);
    padding-right: 0.4375rem;
  }
  .ap-mis-ends {
    margin: 0.5rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.7;
  }
  .ap-carry {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .ap-carry-head {
    padding: 0.6875rem 1.125rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-carry-body {
    padding: 1.125rem;
  }
  .ap-carry-rule {
    margin: 0;
    font: 500 var(--t-h3) / 1.5 var(--font-display);
    letter-spacing: -0.012em;
  }
  .ap-carry-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.125rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .ap-carry-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.875rem;
    align-items: baseline;
  }
  .ap-carry-label {
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-carry-label[data-hue="good"] {
    color: var(--h-good);
  }
  .ap-carry-label[data-hue="bad"] {
    color: var(--h-bad);
  }
  .ap-carry-text {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .ap-carry-var {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .ap-carry-ask {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  @media (width < 52rem) {
    .ap-cue-body {
      margin-left: 0;
    }
  }
  .ap-q {
    min-width: 0;
    --ap-door-h: 3.25rem;
  }
  .ap-qbody {
    padding: 0.5rem 0.75rem 1rem;
  }
  @media (width >= 64rem) {
    .ap-qbody {
      padding-inline: 1rem;
    }
  }
  .ap-panel {
    padding: 0 0.75rem 1.25rem;
  }
  @media (width >= 64rem) {
    .ap-panel {
      padding-inline: 1rem;
    }
  }
  .ap-numeric {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
  }
  .ap-numeric-label {
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-numeric-input {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 20rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-md);
    background: var(--paper);
    font: 400 var(--t-body) / 1.4 var(--font-label);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .ap-numeric-input:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 1px;
  }
  .ap-numeric-input::placeholder {
    color: var(--ink-3);
    font-family: var(--font-body);
  }
  [data-ap-options] {
    margin-top: 1.25rem;
  }
  [data-ap-options] .opt {
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    cursor: pointer;
  }
  [data-ap-options] .opt-k {
    font-variant-numeric: tabular-nums;
  }
  [data-ap-options] .opt-item:not([data-verdict], :has(.opt[data-verdict])):has(.peer:checked) {
    --edge: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
  }
  [data-ap-options] .opt-item:not([data-verdict]) .opt:not([data-verdict]):has(.peer:checked) .opt-k {
    color: var(--mark);
  }
  [data-ap-options] .opt-item:has(.peer:focus-visible) {
    outline: 2px solid var(--mark);
    outline-offset: 1px;
  }
  [data-ap-options] .opt-why {
    display: none;
  }
  .ap-q:has([data-ap-open-answer][aria-pressed="true"]) [data-ap-options] .opt-why {
    display: block;
  }
  .ap-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
  }
  .ap-max:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 5%, transparent);
    }
    color: var(--ink);
  }
  .ap-max svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }
  .ap-max [data-ap-max-out] {
    display: none;
  }
  .ap-max[aria-pressed="true"] [data-ap-max-out] {
    display: block;
  }
  .ap-max[aria-pressed="true"] [data-ap-max-in] {
    display: none;
  }
  .ap-q[data-max] {
    --ap-gap: clamp(0.5rem, 1.4vmin, 1rem);
    --sticky-stack: 0px;
    --ap-strip-h: 0px;
    --ap-door-h: 0px;
    position: fixed;
    inset: var(--ap-gap);
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    z-index: 60;
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-over), 0 0 0 100vmax var(--paper-2);
    overflow: hidden;
  }
  .ap-q[data-max] > .ap-door {
    position: relative;
    top: auto;
    border-bottom: 1px solid var(--rule);
    border-top: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
  }
  .ap-q[data-max] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow-y: auto;
  }
  .ap-q[data-max] > .ap-door {
    grid-row: 1;
  }
  .ap-q[data-max] > .ap-pane {
    grid-row: 2;
  }
  .ap-q[data-max] > .ap-panel {
    grid-row: 3;
  }
  .ap-q[data-max] > .ap-pane, .ap-q[data-max] > .ap-panel {
    min-height: 0;
    padding: 1rem 1.125rem 2rem;
  }
  @media (width >= 72rem) {
    .ap-q[data-max] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    .ap-q[data-max] > .ap-door {
      grid-row: 1;
      grid-column: 1 / -1;
    }
    .ap-q[data-max] > .ap-pane {
      grid-row: 2;
      grid-column: 1;
      border-right: 1px solid var(--rule);
    }
    .ap-q[data-max] > .ap-panel {
      grid-row: 2;
      grid-column: 2;
    }
    .ap-q[data-max] > .ap-pane, .ap-q[data-max] > .ap-panel {
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
  .ap-roomnav {
    display: none;
  }
  .ap-q[data-room-slide="from-left"] {
    transform: translateX(-5%);
  }
  .ap-q[data-room-slide="from-right"] {
    transform: translateX(5%);
  }
  .ap-q[data-room-slide="home"] {
    transform: none;
    transition: transform 200ms var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-q[data-room-slide] {
      transition: none;
      transform: none;
    }
  }
  .ap-roomnav .qnav-btn[aria-current="true"] {
    background: var(--mark);
    border-color: var(--mark);
    color: var(--mark-on);
  }
  @media (width >= 60rem) {
    .ap-q[data-max] .ap-roomnav {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 0.3125rem;
      max-width: 40%;
      overflow-x: auto;
      scrollbar-width: none;
      padding-right: 0.875rem;
      background: var(--paper);
      padding-left: 0.75rem;
    }
    .ap-q[data-max] .ap-roomnav .qnav-btn {
      min-width: 1.75rem;
      height: 1.75rem;
      padding: 0 0.375rem;
      font-size: var(--t-xs);
    }
  }
  .ap-q[data-max]:has(> .ap-pane [data-ap-lifted][data-ap-figure]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-q[data-max]:has(> .ap-pane [data-ap-lifted][data-ap-figure]) > .ap-pane {
    border-right: 0;
  }
  .ap-q[data-max]:has(> .ap-pane [data-ap-lifted][data-ap-figure]) > .ap-panel {
    display: none;
  }
  .ap-q[data-max]:has(> .ap-pane [data-ap-lifted][data-ap-interactive]) > .ap-pane {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .ap-q[data-max] > .ap-pane [data-ap-lifted].ap-figure {
    margin-top: 1rem;
  }
  .ap-q[data-max] > .ap-pane [data-ap-lifted][data-ap-interactive] {
    margin: 0;
  }
  @media (width >= 72rem) and (height >= 30rem) {
    .ap-q[data-max] > .ap-pane [data-ap-lifted][data-ap-interactive] {
      flex: 0 0 auto;
      height: 100%;
    }
  }
  .ap-q[data-max] .wg-reason > [data-ap-lifted][data-ap-stage] {
    padding: 0.875rem 1.0625rem;
  }
  .ap-q[data-max] .wg-reason > [data-ap-lifted][data-ap-stage] > :first-child {
    margin-top: 0;
  }
  .ap-q[data-max] .wg-reason > [data-ap-lifted][data-ap-stage] + .wg-band:has(> .wg-reveal) {
    display: none;
  }
  .ap-q[data-max] .wg-reason > [data-ap-lifted][data-ap-stage] {
    position: relative;
    padding-bottom: 2.25rem;
  }
  .ap-q[data-max] .wg-reason > [data-ap-stage]:has(.ap-peek[aria-expanded="false"]) {
    max-height: 13rem;
    overflow: hidden;
  }
  .ap-peek {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 1.0625rem 0.625rem;
    border: 0;
    background: var(--paper);
    color: var(--ink-3);
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ap-peek:hover {
    color: var(--ink);
  }
  .ap-peek-ico {
    width: 0.875rem;
    height: 0.875rem;
  }
  .ap-peek[aria-expanded="true"] .ap-peek-ico {
    transform: rotate(180deg);
  }
  .ap-peek[aria-expanded="false"] [data-ap-peek-less], .ap-peek[aria-expanded="true"] [data-ap-peek-more] {
    display: none;
  }
  .ap-peek::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--paper));
    backdrop-filter: blur(1.5px);
    mask-image: linear-gradient(to bottom, transparent, #000 70%);
    pointer-events: none;
  }
  .ap-peek[aria-expanded="true"]::before {
    display: none;
  }
  .ap-q[data-max] > .ap-pane > [data-ap-lifted][data-ap-stage] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  .ap-q[data-max]:has(> .ap-pane [data-ap-lifted][data-ap-interactive]) > .ap-pane > [data-ap-lifted][data-ap-stage] {
    margin-top: 0;
    padding: 1rem 1.125rem 1.25rem;
  }
  .ap-q[data-max] .ap-qbody:not([hidden]) ~ [data-ap-lifted][data-ap-stage] .ap-restem {
    display: none;
  }
  .ap-q[data-max] .ap-qbody:not([hidden]) ~ [data-ap-lifted][data-ap-stage] .ap-rows {
    margin-top: 0;
  }
  .ap-q[data-max] [data-ap-lifted] :is(.wg, .wg-figure, .wg-reason) {
    overscroll-behavior: auto;
  }
  [data-approach-question] .wg-max {
    display: none;
  }
  [data-approach-question] .wg-reset {
    right: 0.5rem;
  }
  [data-approach-question] .wg:has(> .wg-head > .wg-reset) > .wg-head {
    padding-right: 3.25rem;
  }
  .ap-q[data-max] [data-ap-lifted] .ap-advance {
    display: none;
  }
  .ap-q[data-max]:has([data-ap-lifted][data-ap-stage]) [data-ap-rung="dissect"] {
    display: none;
  }
  .ap-q[data-max] .ap-flow .ap-col {
    min-height: 0;
  }
  .ap-q[data-max] .ap-flow {
    margin-top: 0;
  }
}
@layer pages {
  .so-step {
    --so-gut: 2.125rem;
    margin-top: var(--s-block);
  }
  .so-core {
    --hue: var(--mark);
    position: relative;
    border-top: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    padding: 1.125rem 1.25rem;
  }
  .so-head {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.375rem 0.625rem;
    align-items: baseline;
  }
  .so-head .chip {
    grid-column: 2;
    justify-self: start;
  }
  .so-head .so-go {
    grid-row: 1;
    grid-column: 3;
  }
  @container doc (width >= 34rem) {
    .so-head {
      grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    }
    .so-head .chip {
      grid-column: 3;
    }
    .so-head .so-go {
      grid-column: 4;
    }
  }
  .so-n {
    font: 400 var(--t-sm) / 1.3 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--mark);
  }
  .so-t {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -0.012em;
  }
  .so-t a {
    color: var(--ink);
  }
  .so-t a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .so-core:hover .so-t a {
    color: var(--mark);
  }
  .so-go {
    align-self: center;
    color: var(--ink-3);
  }
  .so-core:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
  }
  .so-body {
    margin-top: 0.375rem;
    padding-left: var(--so-gut);
  }
  .so-why {
    margin: 0;
    font: 400 var(--t-xs) / 1.55 var(--font-display);
    font-style: italic;
    color: var(--ink-3);
    text-wrap: pretty;
  }
  .so-core .so-why {
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .so-claim {
    margin: 0.5rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .so-rel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    margin-top: 0.875rem;
  }
  @container doc (width >= 34rem) {
    .so-rel {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .so-rel > span {
    padding: 0.75rem 0.875rem;
    font-family: var(--font-display);
    border-radius: var(--r-md);
    background: var(--paper-2);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--ink);
    text-align: center;
    overflow-x: auto;
  }
  .so-kids {
    margin-left: var(--so-gut);
    padding-left: 1.5rem;
    border-left: 1px solid var(--rule);
  }
  .so-kids-are {
    padding-top: 0.875rem;
    line-height: 1.6;
  }
  .so-kids .rows {
    margin-top: 0;
  }
  .so-kids .row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 0.875rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }
  .so-kids .row-meta {
    grid-column: 2;
  }
  .so-kids .row-meta .chip {
    min-width: 0;
  }
  .so-kids .so-go {
    grid-row: 1;
    grid-column: 3;
    place-self: baseline end;
  }
  .so-kid > span {
    display: block;
  }
  .so-kid .row-t {
    font-family: var(--font-display);
    line-height: 1.4;
    letter-spacing: -0.008em;
  }
  .so-kid .row-d {
    margin-top: 0.25rem;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .so-kid .so-why {
    margin-top: 0.1875rem;
  }
  .so-metas {
    margin-top: 0.5rem;
  }
  .so-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
    margin-top: 0.3125rem;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .so-meta-k {
    flex: none;
    font: 400 var(--t-nano) / 1.6 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .so-meta[data-meta="resolved"] .so-meta-k {
    color: var(--h-good);
  }
  @container doc (width >= 34rem) {
    .so-kid > .so-metas {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
    }
    .so-meta {
      display: inline-flex;
      align-items: baseline;
      gap: 0.375rem;
      max-width: 100%;
      margin-top: 0;
      padding: 0.25rem 0.5625rem;
      border: 1px solid var(--rule);
      border-radius: 999px;
      line-height: 1.5;
    }
    .so-meta[data-meta="resolved"] {
      border-color: var(--h-good);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--h-good) 35%, var(--rule));
      }
    }
  }
  .so-leads {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 0.5rem;
    align-items: start;
    margin-top: 1.25rem;
    padding-left: 0.75rem;
  }
  .so-leads-ico {
    justify-self: center;
    color: var(--rule-2);
    transform: rotate(90deg);
  }
  .so-leads p {
    margin: 0;
  }
  .so-leads .eyebrow {
    font-size: var(--t-nano);
    line-height: 1.6;
    letter-spacing: 0.08em;
  }
  .so-kids > .so-leads:first-child {
    margin-top: 0;
    padding-top: 0.875rem;
  }
  .so-leads-t {
    margin-left: 0.5rem;
    font: 400 var(--t-sm) / 1.6 var(--font-display);
    font-style: italic;
    color: var(--h-why);
    text-wrap: pretty;
  }
  .so-place {
    display: block;
    margin-top: 0.1875rem;
    line-height: 1.6;
    color: var(--h-note);
  }
  .so-place[data-place="section"]::before {
    content: "§ ";
  }
  .so-place[data-place="chapter"]::before {
    content: "¶ ";
  }
  .so-purpose {
    margin-top: 1rem;
    line-height: var(--lh-body);
  }
  .so-builds {
    margin-top: var(--s-block);
  }
  .so-builds .case-rows-row {
    padding: 0.5625rem 0;
    font-size: var(--t-xs);
  }
  @container doc (width >= 34rem) {
    .so-builds .case-rows-row {
      grid-template-columns: 14rem minmax(0, 1fr);
    }
  }
  .so-builds .case-rows {
    margin-top: 0.25rem;
    border-top: 0;
  }
  .so-builds .case-rows-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
@layer pages {
  .rc {
    --rc-verdict: var(--h-good);
  }
  .rc-x {
    margin-top: var(--s-sub);
    scroll-margin-top: calc(var(--sticky-top) + 4.125rem);
    padding: 1.875rem 2rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper);
  }
  .rc-x-eyebrow {
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }
  .rc-x-t {
    max-width: 38rem;
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -0.016em;
    color: var(--ink);
    text-wrap: balance;
  }
  .rc-nav {
    margin-bottom: 0;
    padding-inline: 0.125rem;
  }
  .rc-x-about {
    margin-block: 0.625rem 0;
    line-height: var(--lh-body);
    text-wrap: pretty;
  }
  .rc-feeders {
    margin-top: 1rem;
    border-bottom: 0;
  }
  .rc-feeders .recall-chip:hover {
    border-color: var(--mark);
    color: var(--mark);
  }
  .rc-rule {
    margin-top: 0.875rem;
    border-radius: var(--r-md);
  }
  .rc-rule-band {
    border-radius: 0;
  }
  .rc-rule-t {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink);
    text-wrap: pretty;
  }
  .rc-rule-pair {
    display: grid;
  }
  @container doc (width >= 34rem) {
    .rc-rule-pair {
      grid-template-columns: 1fr 1fr;
    }
    .rc-rule-pair > * + * {
      border-left: 1px solid var(--rule);
    }
  }
  @container doc (width < 34rem) {
    .rc-rule-pair > * + * {
      border-top: 1px solid var(--rule);
    }
  }
  .rc-rule-c {
    display: grid;
    align-content: start;
    row-gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rc-limit-l {
    padding-top: 0.25rem;
  }
  .rc-rule-l, .rc-limit-l, .rc-card-l {
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rc {
    --sg-drive: var(--legend-1, #4f46c4);
  }
  .rc-prob {
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-2);
  }
  .rc-prob[data-has-figure="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
    gap: 1.25rem;
    align-items: start;
  }
  .rc-prob-w {
    min-width: 0;
  }
  .rc-prob-fig {
    margin: 0;
  }
  .rc-prob-fig .sg-fig, .rc-route-fig .sg-fig {
    display: block;
    width: 100%;
    height: auto;
  }
  .rc-route-h[data-has-figure="true"] {
    display: grid;
    grid-template-columns: 11.25rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }
  .rc-route-h[data-has-figure="true"] .rc-route-top {
    grid-column: 1 / -1;
  }
  .rc-route-h[data-has-figure="true"] .rc-route-fig {
    grid-area: 2 / 1;
  }
  .rc-route-h[data-has-figure="true"] .rc-sketch {
    grid-area: 2 / 2;
  }
  .rc-route-fig {
    --fig-vb: 96px;
    --fig-max-scale: 1.875;
    margin: 0.5625rem 0 0;
  }
  @container doc (width < 34rem) {
    .rc-prob[data-has-figure="true"] {
      display: block;
    }
    .rc-prob-fig {
      margin-top: 1rem;
    }
    .rc-route-h[data-has-figure="true"] {
      display: block;
    }
  }
  .rc-prob-l {
    font-size: var(--t-nano);
    letter-spacing: 0.12em;
  }
  .rc-prob-t {
    margin-block: 0.5rem 0;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink);
    text-wrap: pretty;
  }
  .rc-routes {
    display: grid;
    gap: 0.875rem;
    margin-top: 1.25rem;
  }
  .rc-route {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .rc-route-h {
    padding: 0.8125rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .rc-route[data-take="true"] .rc-route-h {
    background: var(--rc-verdict);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rc-verdict) var(--tint), var(--paper));
    }
  }
  .rc-route-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.625rem;
  }
  .rc-route-nm {
    font-size: var(--t-nano);
    letter-spacing: 0.12em;
  }
  .rc-take {
    flex: none;
    border-color: var(--rc-verdict);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--rc-verdict) 35%, var(--rule));
    }
    background: var(--rc-verdict);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rc-verdict) 12%, var(--paper));
    }
    color: var(--rc-verdict);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--rc-verdict) 78%, var(--ink));
    }
  }
  .rc-sketch {
    margin-block: 0.5625rem 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rc-steps {
    padding: 0.75rem 1rem;
  }
  .rc-step {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
  }
  .rc-step:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .rc-step-n {
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .rc-step-e {
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--ink);
  }
  .rc-step-e, .rc-lands-v {
    margin-block: calc(var(--reader-font-size) / -2);
    padding-block: calc(var(--reader-font-size) / 2);
    overflow: auto hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .rc-step-do {
    margin-block: 0.5rem 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rc-step-e .katex-display, .rc-step-e .katex-display > .katex {
    margin: 0 !important;
    text-align: left !important;
  }
  .rc-fold {
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }
  .rc-fold-h {
    padding: 0.5625rem 1rem;
    font: 400 var(--t-label) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rc-fold-h::before {
    order: 2;
    border-left-color: var(--mark);
  }
  .rc-fold-h::after {
    content: "open";
    order: 1;
    margin-left: auto;
    color: var(--mark);
  }
  .rc-fold[open] .rc-fold-h::after {
    content: "close";
  }
  .rc-fold-b {
    display: grid;
    row-gap: 0.625rem;
    padding: 0.8125rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
  }
  .rc-why {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rc-lands {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    margin-top: 0.875rem;
  }
  .rc-lands .callout-label {
    margin-bottom: 0;
  }
  .rc-lands-v {
    font-size: var(--t-h3);
    line-height: 1.5;
    color: var(--ink);
  }
  .rc-lands-v .katex-display, .rc-lands-v .katex-display > .katex {
    margin: 0 !important;
    text-align: left !important;
  }
  .rc-bound {
    margin-top: 1.125rem;
    border-radius: var(--r-md);
  }
  .rc-cannot {
    border-radius: 0;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
  }
  .rc-cannot p {
    margin: 0;
  }
  .rc-bound-b {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
  }
  .rc-limits {
    margin-top: 0;
    border-top: 0;
  }
  @container doc (width >= 34rem) {
    .rc-limits .comparison-head, .rc-limits .comparison-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .rc-limits .comparison-row:last-child {
    border-bottom: 0;
  }
  .rc-breaks-h {
    color: var(--h-bad) !important;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-bad) 78%, var(--ink)) !important;
    }
  }
  .rc-breaks {
    color: var(--ink-2);
  }
  .rc-lim-l {
    display: block;
    margin-bottom: 0.25rem;
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rc-breaks .rc-lim-l {
    color: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--h-bad) 78%, var(--ink));
    }
  }
  @container doc (width >= 34rem) {
    .rc-lim-l {
      display: none;
    }
  }
  @container doc (width < 34rem) {
    .rc-limits .comparison-head {
      display: none;
    }
    .rc-limits .rc-breaks {
      margin-top: 0.5rem;
    }
  }
  .rc-leaves {
    display: grid;
    grid-template-columns: 3.625rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
    margin-block: 0.75rem 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink);
    text-wrap: pretty;
  }
  @container doc (width < 34rem) {
    .rc-leaves {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0.25rem;
    }
  }
  .rc-card {
    display: grid;
    gap: 0.875rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rule);
  }
  @container doc (width >= 34rem) {
    .rc-card {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 3rem;
    }
    .rc-card-c + .rc-card-c {
      position: relative;
    }
    .rc-card-c + .rc-card-c::before {
      content: "";
      position: absolute;
      inset-block: 0;
      left: -1.5rem;
      border-left: 1px solid var(--rule);
    }
  }
  .rc-card-c {
    display: grid;
    align-content: start;
    row-gap: 0.5rem;
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
}
@layer pages {
  .dr-deck > q-strip {
    margin-bottom: 0.75rem;
  }
  .dr-deck {
    display: block;
    overflow-x: clip;
  }
  .dr-n {
    margin: 0 0 0.625rem;
    font-variant-numeric: tabular-nums;
  }
  .dr-stem {
    margin: 0;
    font: 400 var(--t-body) / var(--lh-body) var(--font-body);
    color: var(--ink);
    text-wrap: pretty;
  }
  .dr-rule {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--rule);
  }
  .dr-ask {
    margin: 0 0 1.125rem;
    font: 500 var(--t-h3) / var(--lh-tight) var(--font-display);
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: pretty;
  }
  .dr-mode {
    margin: -0.5rem 0 0.875rem;
    font: 400 var(--t-sm) / 1.6 var(--font-body);
    color: var(--ink-3);
  }
  .dr .opts[role="group"] .opt-k {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
  }
  .dr .opts[role="group"] .opt[aria-pressed="true"] .opt-k {
    border-color: currentcolor;
  }
  .dr-settle {
    margin-top: 0.875rem;
  }
  [data-done="true"] > .dr-settle, [data-done="true"] > .beat-body > .dr-settle {
    display: none;
  }
  .dr-slide[data-done="false"] > .dr-fb, .dr .beat[data-done="false"] > .beat-body > .dr-fb {
    display: none;
  }
  .beat:not([data-state="locked"]) > .dr-lock {
    display: none;
  }
  .dr-tell {
    display: block;
    margin-bottom: 0.375rem;
    font: 400 var(--t-xs) / 1.6 var(--font-body);
    color: var(--ink-3);
  }
  .dr-carry {
    margin-top: 2rem;
  }
  .dr-fig {
    display: block;
    width: 100%;
    max-width: 10.5rem;
    height: auto;
    margin: 1.25rem 0 0;
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .dr-beats {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .dr-lock {
    margin: 0.625rem 0 0;
    font: 400 var(--t-sm) / 1.6 var(--font-body);
    color: var(--ink-3);
  }
  .dr-pager {
    margin-top: 2.5rem;
  }
  .dr-step {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font: 400 var(--t-sm) / 1 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .dr-step:hover {
    color: var(--mark);
  }
  .dr-chev {
    width: 0.875rem;
    height: 0.875rem;
  }
  .dr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .dr-restart {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--r-sm);
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink-3);
    cursor: pointer;
  }
  .dr-restart:hover {
    color: var(--mark);
    background: var(--paper-2);
  }
  .dr-restart-ico {
    width: 0.875rem;
    height: 0.875rem;
  }
  .dr-end {
    font: 400 var(--t-sm) / 1 var(--font-label);
    color: var(--rule-2);
  }
  .dl-lede {
    margin: 0.5rem 0 0;
    font: 400 var(--t-sm) / 1.6 var(--font-body);
    color: var(--ink-3);
    max-width: var(--w-measure);
  }
  .dl-rows {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
  }
  .dl-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid var(--rule);
  }
  .dl-row:last-child {
    border-bottom: 1px solid var(--rule);
  }
  .dl-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.125rem;
    color: var(--ink);
    text-decoration: none;
  }
  .dl-scope {
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .dl-title {
    font: 500 var(--t-body) / var(--lh-tight) var(--font-body);
  }
  .dl-row-main:hover .dl-title {
    color: var(--mark);
  }
  .dl-state {
    font: 400 var(--t-xs) / 1.5 var(--font-body);
    color: var(--ink-3);
  }
  .dl-actions {
    flex: none;
    display: grid;
    grid-template-columns: max-content 6.5rem;
    align-items: center;
    gap: 0.5rem;
  }
  .dl-over {
    grid-area: 1 / 1;
  }
  .dl-go {
    grid-area: 1 / 2;
  }
  .dl-go {
    width: 100%;
  }
  .dl-over {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-md);
    font: 400 var(--t-sm) / 1 var(--font-body);
    color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 10%, var(--paper));
    }
    cursor: pointer;
    white-space: nowrap;
  }
  .dl-over[data-off] {
    visibility: hidden;
  }
  .dl-over:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 18%, var(--paper));
    }
  }
  .dl-over-ico {
    width: 0.875rem;
    height: 0.875rem;
  }
}
@layer pages {
  .cm {
    --cpm-law: var(--h-note);
    --cpm-method: var(--h-why);
    --cpm-case: var(--h-warn);
    --cpm-table: var(--mute);
    --cpm-bridge: var(--h-good);
    --sg-drive: var(--legend-1, #4f46c4);
    --cpm-t1: var(--h-note);
    --cpm-t2: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      --cpm-t2: color-mix(in srgb, var(--h-good) 58%, var(--h-warn));
    }
    --cpm-t3: var(--h-why);
    --cpm-t4: var(--h-good);
    --cpm-t5: var(--h-why);
    @supports (color: color-mix(in lab, red, red)) {
      --cpm-t5: color-mix(in srgb, var(--h-why) 58%, var(--h-bad));
    }
    --tint: var(--mute);
    --cpm-wash: 7%;
    --cpm-card: 11%;
    --cpm-chip: 18%;
    --cpm-edge: 52%;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    font-size: 14px;
  }
  .theme-dark .cm {
    --cpm-wash: 17%;
    --cpm-card: 20%;
    --cpm-chip: 30%;
    --cpm-edge: 62%;
  }
  .theme-sepia .cm {
    --cpm-wash: 9%;
    --cpm-card: 13%;
    --cpm-chip: 20%;
  }
  .cm .katex {
    font-size: 1em !important;
  }
  .cpm-error {
    padding: 32px;
    color: var(--mute);
  }
  .cpm-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--content-border);
  }
  .cpm-lbl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .cpm-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-md);
    background: var(--paper-2);
    min-width: 0;
  }
  .cpm-seg button {
    padding: 6px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--mute-hover);
    font: 500 12.5px/1 var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
  }
  .cpm-seg button:hover {
    color: var(--reader-text);
  }
  .cpm-seg button[aria-pressed="true"] {
    background: var(--paper-over);
    color: var(--mark);
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  }
  .cpm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    min-height: 20px;
    padding: 10px 16px 0;
    font-size: 12.5px;
    color: var(--mute);
  }
  .cpm-bar b {
    font-weight: 500;
    color: var(--mute-hover);
  }
  .cpm-sw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .cpm-sw i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sc);
  }
  .cpm-step-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .cpm-step-nav button {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid var(--content-border);
    border-radius: var(--r-sm);
    background: var(--paper-over);
    color: var(--mute-hover);
    cursor: pointer;
  }
  .cpm-step-nav button:disabled {
    opacity: .35;
    cursor: default;
  }
  .cpm-pos {
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 48px;
    text-align: center;
  }
  .cpm-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .cpm-left {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cpm-stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-color) transparent;
  }
  .cpm-stage::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .cpm-stage::-webkit-scrollbar-track {
    background: transparent;
  }
  .cpm-stage::-webkit-scrollbar-thumb {
    background: var(--line-color);
    border: 3px solid var(--paper);
    border-radius: 999px;
  }
  .cpm-stage::-webkit-scrollbar-thumb:hover {
    background: var(--mute);
  }
  .cpm-stage.cpm-is-radial {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cpm-stage.cpm-is-radial .cpm-view {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .cpm-view {
    position: relative;
    height: clamp(360px, 100%, 900px);
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--content-border);
    border-radius: var(--r-lg);
    background: var(--paper);
    touch-action: none;
    cursor: grab;
  }
  .cpm-view.cpm-drag {
    cursor: grabbing;
  }
  .cpm-world {
    position: absolute;
    inset: 0 auto auto 0;
    transform-origin: 0 0;
  }
  .cpm-world.cpm-fly {
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  }
  .cpm-spokes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
  }
  .cpm-spokes path {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 1.4;
  }
  .cpm-spokes path.cpm-thin {
    stroke: var(--line-color);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--line-color) 60%, transparent);
    }
  }
  .cpm-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: opacity .13s;
  }
  .cpm-node.cpm-dim {
    opacity: .2;
  }
  .cpm-hub {
    width: 172px;
    cursor: default;
  }
  .cpm-hub-b {
    display: block;
    padding: 10px 17px;
    border-radius: 999px;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 88%, var(--ink));
    }
    color: var(--mark-on);
    font-weight: 600;
    line-height: 1.25;
  }
  .cpm-hub-s, .cpm-part-s {
    display: block;
    margin-top: 6px;
    font: 400 10.5px/1.4 var(--font-mono);
    color: var(--mute);
  }
  .cpm-back {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 11px;
    border: 1px solid var(--content-border);
    border-radius: 999px;
    background: var(--paper-over);
    font: 500 10.5px/1 var(--font-mono);
    color: var(--mark);
  }
  button.cpm-hub {
    cursor: pointer;
  }
  button.cpm-hub:hover .cpm-back {
    border-color: var(--mark);
  }
  .cpm-part {
    width: 178px;
  }
  .cpm-part-b {
    display: block;
    padding: 8px 14px;
    border: 1px solid var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--tint) var(--cpm-edge), var(--line-color));
    }
    border-radius: 999px;
    background: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--tint) var(--cpm-chip), var(--paper-over));
    }
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
  }
  .cpm-lens-role .cpm-part-b {
    border-color: var(--line-color);
    background: var(--paper-over);
  }
  .cpm-part:hover .cpm-part-b {
    border-color: var(--mark);
    color: var(--mark);
  }
  .cpm-concept {
    width: 134px;
  }
  .cpm-fg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    overflow: hidden;
    border: 1px solid var(--content-border);
    border-bottom: 2.5px solid var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 2.5px solid color-mix(in srgb, var(--tint) var(--cpm-edge), var(--paper));
    }
    border-radius: var(--r-md);
    background: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--tint) var(--cpm-card), var(--paper-over));
    }
  }
  .cpm-lens-role .cpm-fg {
    border-bottom-color: var(--role);
    background: var(--paper-over);
  }
  .cpm-concept:hover .cpm-fg, .cpm-concept.cpm-sel .cpm-fg {
    border-color: var(--mark);
    border-bottom-color: var(--mark);
  }
  .cpm-fg svg {
    width: 100%;
    height: 100%;
    padding: 6px;
  }
  .cpm-fg-none {
    border-style: dashed;
    border-bottom-style: solid;
  }
  .cpm-fg-why {
    align-items: flex-start;
    padding-top: 20px;
  }
  .cpm-fg .cpm-rel {
    padding: 0 9px;
    font-size: 14px;
    color: var(--mute-hover);
  }
  .cpm-fg .cpm-why {
    padding: 0 9px;
    font: italic 400 9.5px/1.35 var(--font-serif);
    color: var(--mute);
    text-align: left;
  }
  .cpm-name {
    display: block;
    margin-top: 7px;
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--reader-text);
  }
  .cpm-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
    min-height: 14px;
  }
  .cpm-bg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px solid var(--content-border);
    border-radius: 999px;
    background: var(--paper-over);
    font: 500 9.5px/1.55 var(--font-mono);
    color: var(--mute);
  }
  .cpm-bg-x {
    color: var(--cpm-bridge);
    border-color: var(--cpm-bridge);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cpm-bridge) 34%, transparent);
    }
  }
  .cpm-role {
    font: 500 9px/1.5 var(--font-mono);
    letter-spacing: .04em;
    color: var(--role);
    background: var(--role);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--role) 10%, transparent);
    }
    border-radius: var(--r-sm);
    padding: 1px 5px;
  }
  .cpm-ctl {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cpm-ctl-g {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--content-border);
    border-radius: var(--r-md);
    background: var(--paper-over);
  }
  .cpm-ctl button, .cpm-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mute-hover);
    cursor: pointer;
  }
  .cpm-ctl button {
    width: 33px;
    height: 30px;
  }
  .cpm-ctl button:hover, .cpm-nav button:hover {
    background: var(--paper-2);
    color: var(--mark);
  }
  .cpm-ctl button:disabled, .cpm-ctl button:disabled:hover {
    background: none;
    color: var(--mute-subtle);
    cursor: default;
  }
  .cpm-ctl svg, .cpm-nav svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cpm-zoom {
    padding: 4px 0;
    border-top: 1px solid var(--content-border);
    border-bottom: 1px solid var(--content-border);
    font: 400 10px/1 var(--font-mono);
    color: var(--mute);
    text-align: center;
  }
  .cpm-nav {
    position: absolute;
    left: 50%;
    bottom: 13px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: min(520px, calc(100% - 112px));
    padding: 4px 8px;
    border: 1px solid var(--content-border);
    border-radius: 999px;
    background: var(--paper-over);
    transform: translateX(-50%);
  }
  .cpm-nav button {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .cpm-nav-l {
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .cpm-nav-p {
    padding-right: 6px;
    font: 400 11px/1 var(--font-mono);
    color: var(--mute);
    flex: 0 0 auto;
  }
  .cpm-cols {
    display: flex;
    gap: 20px;
    align-items: stretch;
    min-width: min-content;
  }
  .cpm-col {
    flex: 1 0 300px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 18px;
    border-radius: var(--r-lg);
    background: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--tint) var(--cpm-wash), var(--paper));
    }
  }
  .cpm-col-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 2px solid color-mix(in srgb, var(--tint) 34%, var(--line-color));
    }
  }
  .cpm-col-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--tint) var(--cpm-chip), var(--paper));
    }
    color: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--tint) 55%, var(--ink));
    }
    font: 500 10.5px/1 var(--font-mono);
  }
  .cpm-col-t {
    font-weight: 600;
    font-size: 15px;
  }
  .cpm-col-s {
    flex: 1 0 100%;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mute);
  }
  .cpm-more {
    margin-top: 2px;
    padding: 9px 11px;
    border: 1px dashed var(--line-color);
    border-radius: var(--r-md);
    background: none;
    color: var(--mute);
    font: 400 12px/1.3 var(--font-sans);
    text-align: left;
    cursor: pointer;
  }
  .cpm-more:hover {
    border-color: var(--mark);
    color: var(--mark);
  }
  .cpm-partview {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    min-width: min-content;
  }
  .cpm-spine {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
  }
  .cpm-spine-h, .cpm-builds-h {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 11px;
  }
  .cpm-step {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 0 15px;
    border: 0;
    border-left: 2px solid var(--line-color);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .cpm-step::before {
    content: "";
    position: absolute;
    left: -5.5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--line-color);
    border-radius: 50%;
    background: var(--paper-2);
  }
  .cpm-step.cpm-on {
    border-left-color: var(--mark);
  }
  .cpm-step.cpm-on::before {
    background: var(--mark);
    border-color: var(--mark);
  }
  .cpm-step-n {
    display: block;
    font: 500 10px/1.4 var(--font-mono);
    color: var(--mute);
  }
  .cpm-step-c {
    display: block;
    font-size: 13px;
    line-height: 1.42;
    color: var(--mute-hover);
  }
  .cpm-step.cpm-on .cpm-step-c {
    color: var(--reader-text);
    font-weight: 500;
  }
  .cpm-step-i {
    display: block;
    margin-top: 4px;
    font: 400 11px/1.4 var(--font-mono);
    color: var(--mute);
  }
  .cpm-join {
    padding: 8px 0 8px 15px;
    border-left: 2px dotted var(--line-color);
    font: italic 400 12px/1.45 var(--font-serif);
    color: var(--mute);
  }
  .cpm-tree {
    position: relative;
    flex: 1 1 auto;
    min-width: 420px;
    max-width: 660px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cpm-edges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
  }
  .cpm-edges path {
    fill: none;
  }
  .cpm-e-req {
    stroke: var(--line-color);
    stroke-width: 1.5;
  }
  .cpm-e-res {
    stroke: var(--cpm-case);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .72;
  }
  .cpm-edges .cpm-dim {
    opacity: .07;
  }
  .cpm-builds {
    margin-bottom: 4px;
    padding: 12px 14px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-md);
    background: var(--paper-over);
  }
  .cpm-builds ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .cpm-builds li {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mute);
  }
  .cpm-builds b {
    font-weight: 500;
    color: var(--mute-hover);
  }
  .cpm-from {
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-sm);
    font: 400 10.5px/1 var(--font-mono);
    color: var(--mute);
    white-space: nowrap;
  }
  .cpm-card {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 13px 11px;
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 3px solid color-mix(in srgb, var(--tint) 42%, var(--paper));
    }
    border-radius: var(--r-md);
    background: var(--paper-over);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .13s, opacity .13s;
  }
  .cpm-lens-role .cpm-card {
    border-left-color: var(--role);
  }
  .cpm-card:hover {
    border-color: var(--mark);
  }
  .cpm-card.cpm-kid {
    margin-left: 26px;
    width: calc(100% - 26px);
  }
  .cpm-card.cpm-sel {
    border-color: var(--mark);
    box-shadow: 0 0 0 2.5px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--mark) 20%, transparent);
    }
  }
  .cpm-card.cpm-dim {
    opacity: .22;
  }
  .cpm-card.cpm-ghost {
    opacity: .42;
  }
  .cpm-card-b {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cpm-mini {
    flex: 0 0 60px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--paper-2);
  }
  .cpm-mini svg {
    width: 100%;
    height: 100%;
    padding: 4px;
  }
  .cpm-card-h {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 3px;
  }
  .cpm-ord {
    font: 500 10px/1.4 var(--font-mono);
    color: var(--mute);
  }
  .cpm-card-n {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
  }
  .cpm-card-rel {
    display: block;
    margin: 6px 0 5px;
    font-size: 13.5px;
    overflow-x: auto;
  }
  .cpm-card-w {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.42;
    color: var(--mute);
  }
  .cpm-card .cpm-badges {
    justify-content: flex-start;
    margin-top: 8px;
  }
  .cpm-kids-are {
    margin: -2px 0 0 26px;
    font: italic 400 12px/1.45 var(--font-serif);
    color: var(--mute);
  }
  .cpm-thumb text {
    display: none;
  }
  .cpm-thumb .sg-fig-struct, .cpm-thumb .sg-fig-body, .cpm-thumb .sg-fig-drive, .cpm-thumb .sg-fig-struct-head, .cpm-thumb .sg-fig-body-head, .cpm-thumb .sg-fig-drive-head {
    stroke-width: 1.05;
  }
  .cpm-panel {
    flex: 0 0 clamp(360px, 30%, 460px);
    min-width: 0;
    overflow-y: auto;
    padding: 0 0 40px;
    border-left: 1px solid var(--content-border);
    background: var(--paper-over);
  }
  .cpm-panel-body {
    padding: 0 22px;
  }
  .cpm-panel[hidden] {
    display: none;
  }
  .cpm-panel-top {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 22px 12px;
    background: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--tint) var(--cpm-wash), var(--paper-over));
    }
    border-bottom: 1px solid var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--tint) 34%, var(--content-border));
    }
  }
  .cpm-lens-role .cpm-panel-top {
    background: var(--paper-over);
    border-bottom-color: var(--content-border);
  }
  .cpm-panel-x {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 27px;
    height: 27px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-sm);
    background: none;
    color: var(--mute);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .cpm-panel h3 {
    margin: 8px 42px 0 0;
    font-size: 17px;
    line-height: 1.3;
  }
  .cpm-panel-sub {
    margin-top: 5px;
    font: 400 11px/1.4 var(--font-mono);
    color: var(--mute);
  }
  .cpm-panel-topic {
    color: var(--tint);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--tint) 55%, var(--ink));
    }
  }
  .cpm-lens-role .cpm-panel-topic {
    color: var(--mute);
  }
  .cpm-panel-fig {
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--r-md);
    background: var(--paper-2);
  }
  .cpm-panel-fig svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
  }
  .cpm-cap {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mute);
  }
  .cpm-lead {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mute-hover);
  }
  .cpm-fld {
    margin-top: 18px;
  }
  .cpm-k {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .cpm-k::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--content-border);
  }
  .cpm-v {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mute-hover);
  }
  .cpm-relbox {
    margin-bottom: 6px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    background: var(--paper-2);
    font-size: 13px;
    overflow-x: auto;
  }
  .cpm-obj {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cpm-obj li {
    position: relative;
    padding-left: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute-hover);
  }
  .cpm-obj li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cpm-law);
  }
  .cpm-obj b {
    margin-right: 5px;
    font: 500 11px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mute);
  }
  .cpm-forms {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cpm-form {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-md);
  }
  .cpm-form-f {
    flex: 0 0 76px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--paper-2);
  }
  .cpm-form-f svg {
    width: 100%;
    height: 100%;
    padding: 3px;
  }
  .cpm-form-b {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cpm-form-n {
    display: block;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.3;
  }
  .cpm-form-w {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.42;
    color: var(--mute);
  }
  .cpm-form-e {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    overflow-x: auto;
  }
  .cpm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 5px 5px 0;
    padding: 4px 8px;
    border: 1px solid var(--content-border);
    border-radius: var(--r-sm);
    background: none;
    color: var(--mute-hover);
    font: 400 12px/1.3 var(--font-sans);
    cursor: pointer;
  }
  .cpm-pill:hover {
    border-color: var(--mark);
    color: var(--mark);
  }
  .cpm-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role);
  }
  .cpm-x {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--cpm-bridge);
    border-radius: var(--r-md);
  }
  .cpm-x-t {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
  }
  .cpm-x-s {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--reader-text);
  }
  .cpm-x-lead {
    color: var(--mute);
  }
  .cpm-x-lead::after {
    content: "  \00b7  ";
  }
  .cpm-x-r {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mute);
  }
  .cpm-x-w {
    display: block;
    margin-top: 6px;
    font: 400 11px/1.4 var(--font-mono);
    color: var(--cpm-bridge);
  }
  .cpm-det {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--content-border);
  }
  .cpm-det summary {
    cursor: pointer;
    list-style: none;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .cpm-det summary::-webkit-details-marker {
    display: none;
  }
  .cpm-det summary::before {
    content: "\25B8  ";
    color: var(--line-color);
  }
  .cpm-det[open] summary::before {
    content: "\25BE  ";
  }
  .cpm-det summary:hover {
    color: var(--mark);
  }
  .cpm-var {
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .cpm-var-l {
    display: block;
    font-weight: 500;
    color: var(--reader-text);
  }
  .cpm-var-d {
    display: block;
    margin-top: 3px;
    color: var(--mute);
  }
  .cpm-trap {
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .cpm-trap-n {
    display: block;
    font-weight: 500;
    color: var(--reader-text);
  }
  .cpm-trap-w {
    display: block;
    margin-top: 3px;
    color: var(--mute);
  }
  .cpm-trap-f {
    display: block;
    margin-top: 3px;
    color: var(--mute-hover);
  }
  .cpm-trap-f::before {
    content: "\2192  ";
    color: var(--cpm-law);
  }
  @media (width <= 1024px) {
    .cpm-main {
      flex-direction: column;
    }
    .cpm-panel {
      flex: 0 0 46%;
      border-left: 0;
      border-top: 1px solid var(--content-border);
      padding: 0 0 28px;
    }
    .cpm-panel-top {
      padding: 14px 18px 10px;
    }
    .cpm-panel-body {
      padding: 0 18px;
    }
    .cpm-panel-x {
      top: 12px;
      right: 14px;
    }
  }
  @media (width <= 900px) {
    .cpm-partview {
      flex-direction: column;
    }
    .cpm-spine {
      flex: 1 1 auto;
      width: 100%;
    }
    .cpm-tree {
      max-width: none;
    }
  }
}
@layer pages {
  .cr-topic {
    padding-block: 0.875rem;
  }
  .cr-topic + .cr-topic {
    border-top: 1px solid var(--rule);
  }
  .cr-topic:not([data-open]) > .cr-cons {
    display: none;
  }
  .cr-thead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 0.25rem;
  }
  .cr-tlink {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
    text-decoration: none;
  }
  .cr-tnum {
    font-size: var(--t-nano);
    letter-spacing: 0.12em;
  }
  .cr-tname {
    font: 400 var(--t-sm) / 1.35 var(--font-display);
    color: var(--ink);
    text-wrap: balance;
  }
  .cr-tree[data-topic="heavier"] .cr-tname {
    font: 500 var(--t-body) / 1.3 var(--font-display);
  }
  .cr-tree[data-topic="mono"] .cr-tname {
    font: 400 var(--t-sm) / 1.4 var(--font-label);
    letter-spacing: -0.01em;
  }
  .cr-tlink:hover .cr-tname {
    color: var(--mark);
  }
  .cr-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }
  .cr-mark:hover {
    color: var(--ink);
  }
  .cr-mark--sm {
    height: 1.25rem;
  }
  .cr-mark-ico {
    width: 0.625rem;
    height: 0.625rem;
    transition: transform 0.15s var(--ease-out, ease);
  }
  .cr-topic[data-open] > .cr-thead .cr-mark-ico, .cr-node[data-open] > .cr-row .cr-mark-ico {
    transform: rotate(90deg);
  }
  .cr-cons {
    margin-top: 0.5rem;
  }
  .cr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .cr-node:not([data-open]) > .rail-kids {
    display: none;
  }
  .cr-node[data-here] {
    border-left: 2px solid var(--mark);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, transparent);
    }
  }
  .cr-node > .rail-kids {
    margin-left: 0.875rem;
  }
  .cr-tree [aria-current] {
    color: var(--mark);
    font-weight: 500;
  }
  .cr-tree .cr-tlink[aria-current] .cr-tname {
    color: var(--mark);
  }
  .rail-open, .rail-close, .rail-scrim {
    display: none;
  }
  @media (width < 64rem) {
    .cr-tree {
      display: block;
      flex: 1 1 100%;
      margin-left: 0;
    }
    .page-rail:has(.cr-tree) {
      display: block;
    }
    .page-rail:has(.cr-tree) > .rail {
      position: sticky;
      top: var(--sticky-top);
      z-index: 36;
      display: block;
      margin-bottom: 1.25rem;
      padding-block: 0.4375rem;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
    }
    .page-rail:has(.cr-tree):has(.ctabs-bar, .chapter-jump-nav) > .rail {
      position: static;
    }
    .page-rail:has(.cr-tree) > .rail .rail-top {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
      padding: 0;
      background: none;
    }
    .page-rail:has(.cr-tree) > .rail .rail-parent {
      flex: 1 1 auto;
      min-width: 0;
    }
    .page-rail:has(.cr-tree) > .rail .rail-parent-t {
      min-width: 0;
    }
    .page-rail:has(.cr-tree) > .rail .rail-parent {
      align-items: center;
    }
    .page-rail:has(.cr-tree) > .rail .rail-parent-kind {
      display: none;
    }
    .page-rail:has(.cr-tree) > .rail .rail-parent-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rail-open {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.375rem 0.625rem;
      border: 1px solid var(--rule);
      border-radius: var(--r-md);
      background: none;
      font: 500 var(--t-sm) / 1.2 var(--font-body);
      color: var(--ink-2);
      cursor: pointer;
    }
    .rail-open:hover {
      border-color: var(--ink-3);
      color: var(--ink);
    }
    .rail-open-ico {
      width: 1rem;
      height: 1rem;
      color: var(--ink-3);
    }
    .page-rail:has(.cr-tree) > .rail .rail-mid {
      position: fixed;
      top: var(--sticky-top);
      bottom: 0;
      left: 0;
      z-index: 35;
      width: min(87vw, 20.5rem);
      display: flex;
      flex-direction: column;
      padding: 0 var(--gutter) 1.25rem;
      background: var(--paper);
      border-right: 1px solid var(--rule);
      overflow-y: auto;
      overscroll-behavior: contain;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 0.22s var(--ease-out, ease), visibility 0s linear 0.22s;
    }
    .page-rail[data-drawer="open"] > .rail .rail-mid {
      transform: none;
      visibility: visible;
      transition-delay: 0s, 0s;
    }
    .page-rail:has(.cr-tree) > .rail .rail-head {
      padding-top: 0.875rem;
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
    }
    .rail-close {
      flex: none;
      display: grid;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      margin-top: -0.25rem;
      border: 0;
      border-radius: var(--r-md);
      background: none;
      color: var(--ink-3);
      cursor: pointer;
    }
    .rail-close:hover {
      color: var(--ink);
      background: var(--paper-2);
    }
    .rail-close-ico {
      width: 1.125rem;
      height: 1.125rem;
    }
    .rail-scrim {
      display: block;
      position: fixed;
      inset: var(--sticky-top) 0 0 0;
      z-index: 34;
      background: var(--scrim);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s ease, visibility 0s linear 0.22s;
    }
    .page-rail[data-drawer="open"] .rail-scrim {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s, 0s;
    }
    @media (prefers-reduced-motion: reduce) {
      .page-rail:has(.cr-tree) > .rail .rail-mid, .rail-scrim {
        transition: none;
      }
    }
  }
  .rail-group {
    display: flex;
    flex-direction: column;
  }
  .rail-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.375rem 0.75rem;
    background: var(--paper);
  }
  @media (width >= 64rem) {
    .page-rail:has(.chapter-tree) .rail-head {
      display: none;
    }
  }
  .rail-head-t {
    font: 500 var(--t-xs) / 1.35 var(--font-body);
    color: var(--ink-3);
    min-width: 0;
  }
  .rail-toggle {
    display: none;
  }
  @media (width >= 64rem) {
    .page-rail:has(> .rail .chapter-tree) .rail-toggle {
      flex: none;
      align-self: stretch;
      display: grid;
      place-items: center;
      width: 2.25rem;
      padding: 0;
      border: 0;
      border-bottom: 1px solid var(--rule);
      background: none;
      color: var(--ink-3);
      cursor: pointer;
    }
    .page-rail:has(> .rail .chapter-tree) .rail-toggle:hover {
      color: var(--mark);
      background: var(--mark);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--mark) 8%, transparent);
      }
    }
    .page-rail:has(> .rail .chapter-tree) .ctabs-row:not(:has(.tabs)) .rail-toggle {
      border-bottom: 0;
    }
    .rail-toggle > .rail-toggle-open, html[data-rail="hidden"] .rail-toggle > .rail-toggle-close {
      display: none;
    }
    html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) .rail-toggle > .rail-toggle-open {
      display: block;
    }
  }
  .rail-toggle-ico {
    width: 1.25rem;
    height: 1.25rem;
  }
  .page-rail:has(> .rail .chapter-tree) > .page-rail-body {
    container: chapter-body / inline-size;
  }
  @media (width >= 64rem) {
    html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) {
      grid-template-columns: minmax(0, 1fr);
    }
    html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) > .rail {
      display: none;
    }
    html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) > .page-rail-body {
      width: 100%;
      max-width: 64rem;
      margin-inline: auto;
    }
    html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) .doc-measure {
      max-width: none;
    }
    :where(html[data-rail="hidden"] .page-rail:has(> .rail .chapter-tree) > .page-rail-body) :where(p, h1, h2, h3, h4, h5, blockquote, dd, figcaption, ul:not([class]) > li, ol:not([class]) > li) {
      max-width: 45rem;
    }
  }
  .rail-band, .rail-rung {
    display: flex;
    align-items: baseline;
    padding: 0.25rem 0.375rem;
    border-left: 2px solid transparent;
    line-height: 1.45;
    color: var(--ink-3);
    text-decoration: none;
    font-family: var(--font-body);
  }
  .rail-band {
    font-size: var(--t-xs);
    color: var(--ink-2);
  }
  .cr-routes {
    margin-top: 0.375rem;
    padding-top: 0.4375rem;
    border-top: 1px solid var(--rule);
  }
  .rail-rung {
    font-size: var(--t-micro);
  }
  .rail-band:hover, .rail-rung:hover {
    color: var(--ink-2);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, transparent);
    }
  }
  .rail-t {
    display: block;
    min-width: 0;
  }
  .rail-t::first-letter {
    text-transform: uppercase;
  }
  .rail-kids {
    margin-left: 0.875rem;
  }
  @media (width < 64rem) {
    .rail-head {
      padding-bottom: 0.5rem;
    }
  }
}
@layer pages {
  .qz {
    margin-block: 1.5rem;
  }
  .qz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.625rem;
  }
  .qz-count {
    font: 400 var(--t-xs) / 1 var(--font-label);
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
  .qz-count b {
    font-weight: 500;
    color: var(--ink);
  }
  .qz-tools {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .qz-timer {
    font: 400 var(--t-sm) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    padding-right: 0.375rem;
  }
  .qz-timer-low {
    color: var(--h-warn);
  }
  .qz-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }
  .qz-tool:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 5%, transparent);
    }
    color: var(--ink);
  }
  .qz-tool svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .qz-progress {
    height: 3px;
    border-radius: 999px;
    background: var(--rule);
    overflow: hidden;
  }
  .qz-progress-fill {
    --done: 0%;
    display: block;
    width: var(--done);
    height: 100%;
    border-radius: 999px;
    background: var(--ink-3);
    transition: width 0.2s var(--ease-out, ease);
  }
  .qz-progress[data-waiting] .qz-progress-fill {
    width: 40%;
    animation: qz-waiting 1.1s ease-in-out infinite;
  }
  @keyframes qz-waiting {
    from {
      transform: translateX(-105%);
    }
    to {
      transform: translateX(255%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .qz-progress[data-waiting] .qz-progress-fill {
      width: 100%;
      animation: none;
    }
  }
  .qz-acts {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
  }
  .qz-act {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    font-size: var(--t-sm);
    color: var(--ink-3);
    cursor: pointer;
  }
  .qz-act:hover {
    color: var(--ink);
  }
  .qz-act svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .qz-act-flag {
    grid-column: 2;
    justify-self: end;
  }
  .qz-act-flag[aria-pressed="true"] {
    color: var(--mark);
  }
  .qz-foot {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
  .qz-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
  }
  .qz-move-back {
    grid-column: 1;
    justify-self: start;
  }
  .qz-move {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.8125rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: none;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
  }
  .qz-move:hover {
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .qz-move svg {
    width: 1rem;
    height: 1rem;
  }
  .qz-move-on, .qz-move-end {
    grid-column: 2;
    justify-self: end;
    border-color: var(--mark);
    background: var(--mark);
    color: var(--mark-on);
  }
  .qz-move-on:hover, .qz-move-end:hover {
    border-color: var(--mark);
    color: var(--mark-on);
  }
  .qz-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .qz-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: none;
    font: 400 var(--t-xs) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    cursor: pointer;
  }
  .qz-mark:hover {
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .qz-mark[data-state="seen"] {
    --qz-fill: var(--oc-wrong);
    @supports (color: color-mix(in lab, red, red)) {
      --qz-fill: color-mix(in srgb, var(--oc-wrong) 92%, var(--paper));
    }
    border-color: var(--qz-fill);
    background: var(--qz-fill);
    color: var(--paper);
  }
  .qz-mark[data-state="done"] {
    --qz-fill: var(--oc-right);
    @supports (color: color-mix(in lab, red, red)) {
      --qz-fill: color-mix(in srgb, var(--oc-right) 92%, var(--paper));
    }
    border-color: var(--qz-fill);
    background: var(--qz-fill);
    color: var(--paper);
  }
  .qz-mark[data-flag="true"] {
    border-color: var(--mark);
    background: var(--mark);
    color: var(--mark-on);
  }
  .qz-mark[data-flag="true"][data-state="done"]::after {
    content: "";
    position: absolute;
    right: -0.3125rem;
    bottom: -0.3125rem;
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    background: var(--oc-right);
    box-shadow: 0 0 0 0.125rem var(--paper);
  }
  .qz-mark[data-flag="true"][data-state="done"]::before {
    content: "";
    z-index: 1;
    position: absolute;
    right: -0.0625rem;
    bottom: 0.0625rem;
    width: 0.25rem;
    height: 0.4375rem;
    border: solid var(--paper);
    border-width: 0 0.09375rem 0.09375rem 0;
    transform: rotate(45deg);
  }
  .qz-mark[aria-current="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
  }
  .qz-panel {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 0.875rem;
  }
  .qz-key {
    margin-top: 0.875rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.75rem;
  }
  .qz-key-sum {
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
    list-style: none;
  }
  .qz-key-sum::-webkit-details-marker {
    display: none;
  }
  .qz-key-sum:hover {
    color: var(--ink-2);
  }
  .qz-key-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }
  .qz-key-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-xs);
    color: var(--ink-2);
    white-space: nowrap;
  }
  .qz-key-row .qz-mark {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    cursor: default;
  }
  .qz-key-row .qz-mark[data-flag="true"][data-state="done"]::after {
    right: -0.375rem;
    bottom: -0.375rem;
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .qz-key-row .qz-mark[data-flag="true"][data-state="done"]::before {
    right: -0.03125rem;
    bottom: 0.0625rem;
    width: 0.1875rem;
    height: 0.375rem;
  }
  .qz-key-t {
    min-width: 0;
  }
  .qz-q {
    margin-top: 1.5rem;
  }
  .qz-q .opts {
    margin-top: 1.25rem;
  }
  .qz-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .opt:has(.qz-radio) {
    cursor: pointer;
  }
  .qz-veil {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: var(--scrim-hide);
    backdrop-filter: blur(0.5rem);
  }
  .qz-veil-panel {
    min-width: min(20rem, 90vw);
    padding: 1.75rem;
    border-radius: var(--r-lg);
    background: var(--paper);
    text-align: center;
  }
  .qz-veil-t {
    margin: 0 0 0.5rem;
    font: 500 var(--t-h3) / 1.3 var(--font-display);
    color: var(--ink);
  }
  .qz-veil-note {
    margin: 0 0 1.125rem;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }
  .qz-multi-hint {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0 0 0.75rem;
    font: 400 var(--t-xs) / 1.5 var(--font-body);
    color: var(--ink-3);
  }
  .qz-multi-hint svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    fill: none;
  }
  .qz-multi-hint b {
    font-weight: 500;
    color: var(--ink-2);
  }
  .qz-q .opts[data-multi] .opt-k {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    line-height: 1;
  }
  .qz-q .opts[data-multi] .opt[aria-pressed="true"] .opt-k {
    border-color: var(--mark);
    background: var(--mark);
    color: var(--paper);
  }
}
@layer pages {
  .rp, .rp-crumbs {
    flex: none;
    margin-bottom: 0.75rem;
  }
  .rp-h {
    margin: 0;
    font: 500 var(--t-h2) / 1.2 var(--font-display);
    color: var(--ink);
  }
  .rp-pct {
    margin: 0.25rem 0 0;
    font: 500 2.75rem / 1 var(--font-display);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .rp-pct-u {
    font-size: var(--t-h1);
    color: var(--ink-3);
  }
  .rp-tier[data-tier="strong"] {
    color: var(--oc-right);
  }
  .rp-tier[data-tier="fair"] {
    color: var(--h-warn);
  }
  .rp-tier[data-tier="weak"] {
    color: var(--oc-wrong);
  }
  .rp-marks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: var(--t-sm);
    color: var(--ink-3);
  }
  .rp-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .rp-split {
    display: flex;
    gap: 2px;
    height: 0.625rem;
    margin-top: 1.25rem;
  }
  .rp-split-seg {
    --oc: var(--oc-skip);
    flex: var(--n, 1);
    border-radius: 999px;
    background: var(--oc);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--oc) var(--oc-wash), var(--paper));
    }
    min-width: 0.25rem;
  }
  .rp-split-seg[data-outcome="right"] {
    --oc: var(--oc-right);
  }
  .rp-split-seg[data-outcome="wrong"] {
    --oc: var(--oc-wrong);
  }
  .rp-key[data-outcome="right"] {
    --dot: var(--oc-right);
  }
  .rp-key[data-outcome="wrong"] {
    --dot: var(--oc-wrong);
  }
  .rp-key[data-outcome="skip"] {
    --dot: var(--oc-skip);
  }
  .rp-key[data-outcome="best"] {
    --dot: var(--mark);
  }
  .rp-key[data-outcome="rushed"] {
    color: var(--h-warn);
  }
  .rp-eq {
    margin: 0.75rem 0 0;
    font: 400 var(--t-xs) / 1.6 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .rp-eq b {
    font-weight: 500;
    color: var(--ink-2);
  }
  .rp-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .rp-sect {
    margin: 0;
    font: 500 var(--t-h3) / 1.3 var(--font-body);
    color: var(--ink);
  }
  h3.rp-sect {
    font-size: var(--t-body);
  }
  .rp-note {
    margin: 0 0 1rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .rp-sechead + .rp-note {
    margin-top: -0.5rem;
  }
  .rp-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1.25rem 1.5rem;
  }
  .rp-fig .eyebrow {
    display: block;
    margin-bottom: 0.375rem;
  }
  .rp-fig .stat {
    margin: 0;
  }
  .rp-fig-n {
    margin: 0.3125rem 0 0;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .rp-pace {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
  }
  .rp-pace-col {
    flex: 1 1 0;
    min-width: 0.875rem;
    max-width: 3rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3125rem;
    height: 6rem;
    justify-content: flex-end;
  }
  .rp-pace-b {
    --oc: var(--oc-skip);
    height: var(--h, 4%);
    min-height: 3px;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--oc);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--oc) var(--oc-wash), var(--paper));
    }
  }
  .rp-pace-b[data-outcome="right"] {
    --oc: var(--oc-right);
  }
  .rp-pace-b[data-outcome="wrong"] {
    --oc: var(--oc-wrong);
  }
  .rp-pace-b[data-rushed="true"] {
    background: var(--oc);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--oc) 14%, var(--paper));
    }
    border: 1px dashed var(--oc);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px dashed color-mix(in srgb, var(--oc) 70%, var(--paper));
    }
  }
  .rp-pace-i {
    font: 400 var(--t-nano) / 1 var(--font-label);
    color: var(--ink-3);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .rp-n {
    font-variant-numeric: tabular-nums;
    padding-left: 0.125rem;
    opacity: 0.65;
  }
  .rp-map {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin-bottom: var(--s-block);
  }
  .rp-cell {
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--oc-skip);
    border-radius: var(--r-sm);
    background: none;
    font: 400 var(--t-xs) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    cursor: pointer;
  }
  .rp-cell:hover {
    border-color: var(--rule-2);
    border-left-color: var(--oc-skip);
    color: var(--ink);
  }
  .rp-cell[data-outcome="right"] {
    border-left-color: var(--oc-right);
  }
  .rp-cell[data-outcome="wrong"] {
    border-left-color: var(--oc-wrong);
  }
  .rp-cell[data-outcome="right"]:hover {
    border-left-color: var(--oc-right);
  }
  .rp-cell[data-outcome="wrong"]:hover {
    border-left-color: var(--oc-wrong);
  }
  .rp-cell[aria-current="true"] {
    border-color: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .rp-cell[data-dim="true"] {
    opacity: 0.4;
  }
  .rp-cell[data-dim="true"]:hover {
    opacity: 1;
  }
  .rp-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.625rem;
    border-left-width: 1px;
    border-left-color: var(--rule);
  }
  .rp-back svg {
    width: 1rem;
    height: 1rem;
  }
  .rp-back:hover {
    border-color: var(--mark);
    border-left-color: var(--mark);
    color: var(--mark);
  }
  .rp-q {
    margin-top: var(--s-block);
  }
  .rp-qhead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
  }
  .rp-qn {
    font: 500 var(--t-sm) / 1 var(--font-label);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding-right: 0.25rem;
  }
  .rp-qc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .rp-qt {
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }
  .rp-qt[data-pace="guess"] {
    color: var(--h-warn);
  }
  .rp-qt[data-pace="slow"] {
    color: var(--ink-2);
  }
  .rp-qadd {
    margin-left: auto;
    flex: none;
  }
  .rp-qbody > p:first-child {
    margin-top: 0;
  }
  .rp-qbody .opts {
    margin-top: 1rem;
  }
  .rp-why {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
  .rp-why .eyebrow {
    display: block;
    margin-bottom: 0.4375rem;
  }
  .rp-why p {
    margin: 0;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }
  .rp-q .footnav {
    margin-top: var(--s-block);
  }
  .rp-key[data-outcome="partial"] {
    --dot: var(--oc-partial);
  }
  .rp-cell[data-outcome="partial"] {
    border-left-color: var(--oc-partial);
  }
  .rp-cell[data-outcome="partial"]:hover {
    border-left-color: var(--oc-partial);
  }
  .rp-split-seg[data-outcome="partial"] {
    --oc: var(--oc-partial);
  }
  .rp-award {
    font-variant-numeric: tabular-nums;
    text-transform: none;
    color: var(--ink-3);
  }
  .rp-award::before {
    display: none;
  }
  .rp:has(.rp-chrome-q) .rp-bar {
    display: none;
  }
  .rp-chrome-q {
    position: sticky;
    top: var(--sticky-top, 0);
    z-index: 3;
    padding-top: 0.625rem;
    background: var(--paper);
  }
  .rp-bar {
    position: sticky;
    top: var(--sticky-top, 0);
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--s-block);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule-2);
    background: var(--paper);
  }
  .rp-bar-id {
    flex: 0 1 auto;
    min-width: 0;
  }
  .rp-bar-id .rp-h {
    font-size: var(--t-h3);
  }
  .rp-bar-id .eyebrow {
    margin-top: 0.1875rem;
  }
  .rp-bar-split {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .rp-bar .rp-eq {
    margin: 0;
    font-size: var(--t-nano);
    letter-spacing: 0.04em;
  }
  .rp-acts {
    flex: none;
    margin-left: auto;
  }
  .rp-figs {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: var(--s-block);
  }
  .rp-fig {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
  }
  .rp-fig-n[data-tone="warn"] {
    color: var(--h-warn);
  }
  .rp-pace-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
    margin-bottom: 0;
  }
  .rp-pace-lede {
    flex: 0 1 13rem;
    min-width: 9rem;
  }
  .rp-pace-lede .rp-note {
    margin: 0.25rem 0 0;
  }
  .rp-pace-band .rp-pace {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
  }
  .rp-pace-band .rp-pace-col {
    height: 3.25rem;
  }
  .rp-pace-avg {
    flex: none;
    text-align: right;
  }
  .rp-pace-avg .stat {
    margin-top: 0.125rem;
  }
  .rp-qlist {
    display: flex;
    flex-direction: column;
    margin-top: 0.875rem;
  }
  .rp-qhd, .rp-qrow {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 6rem 3.25rem;
    align-items: center;
    gap: 0.625rem;
    text-align: left;
  }
  .rp-qhd {
    padding: 0 0.25rem 0.4375rem;
    border-bottom: 1px solid var(--rule-2);
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rp-r {
    text-align: right;
  }
  .rp-grp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 1.375rem 0 0;
    padding: 0 0.25rem 0.25rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .rp-qhd + .rp-grp {
    margin-top: 0.625rem;
  }
  .rp-grp b {
    flex: none;
    font: 400 var(--t-xs) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--ink-3);
  }
  .rp-grp b[data-tier="weak"] {
    color: var(--oc-wrong);
  }
  .rp-grp b[data-tier="fair"] {
    color: var(--h-warn);
  }
  .rp-grp b[data-tier="strong"] {
    color: var(--oc-right);
  }
  .rp-qrow {
    width: 100%;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
  }
  .rp-qrow:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 3%, var(--paper));
    }
  }
  .rp-qrow:has(+ .rp-grp:not([hidden])) {
    border-bottom: 0;
  }
  .rp-qi {
    font: 400 var(--t-xs) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .rp-qtx {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .rp-qs {
    font-size: var(--t-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rp-qm {
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rp-qv {
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rp-qsec {
    text-align: right;
    font: 400 var(--t-xs) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .rp-qrow[data-outcome="right"] .rp-qv {
    color: var(--oc-right);
  }
  .rp-qrow[data-outcome="wrong"] .rp-qv {
    color: var(--oc-wrong);
  }
  .rp-qrow[data-outcome="partial"] .rp-qv {
    color: var(--oc-partial);
  }
  .rp-qrow[data-outcome="rushed"] {
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) 6%, var(--paper));
    }
  }
  .rp-qrow[data-outcome="rushed"]:hover {
    background: var(--h-warn);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-warn) 11%, var(--paper));
    }
  }
  .rp-qrow[data-outcome="rushed"] .rp-qv, .rp-qrow[data-outcome="rushed"] .rp-qm {
    color: var(--h-warn);
  }
  @media (width < 34rem) {
    .rp-qhd {
      display: none;
    }
    .rp-qrow {
      grid-template-columns: 1.75rem minmax(0, 1fr) auto;
      row-gap: 0.25rem;
    }
    .rp-qv {
      grid-column: 3;
    }
    .rp-qsec {
      grid-column: 3;
    }
  }
  .rp-seg {
    display: inline-flex;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .rp-seg > button {
    padding: 0.3125rem 0.5rem;
    border: 0;
    border-left: 1px solid var(--rule-2);
    background: var(--paper);
    font: 400 var(--t-xs) / 1.2 var(--font-label);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
  }
  .rp-seg > button:first-child {
    border-left: 0;
  }
  .rp-seg > button:hover:not(:disabled) {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
    color: var(--ink);
  }
  .rp-seg > button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .rp-seg > button b {
    font-weight: 400;
    color: var(--ink-3);
  }
  .rp-seg > button[aria-pressed="true"] b {
    color: var(--paper);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--paper) 70%, var(--ink));
    }
  }
  .rp-seg > button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--ink-3);
  }
  .rp-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--rule);
  }
  .rp-toolset {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .rp-tools {
    row-gap: 0.625rem;
  }
  @media (width >= 64rem) {
    .rp-toolset-end {
      margin-left: auto;
    }
  }
  .rp-chrome {
    display: contents;
  }
  .rp-chrome-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .rp-chrome-q .rp-tools {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .rp-walk .rp-map {
    margin: 0;
  }
  @media (width < 48rem) {
    .rp-tools {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      place-items: center start;
      gap: 0.5rem 0.625rem;
    }
    .rp-seg {
      max-width: 100%;
    }
    .rp-toolset {
      display: contents;
    }
    .rp-seg {
      overflow-x: auto;
      scrollbar-width: none;
    }
    .rp-seg::-webkit-scrollbar {
      display: none;
    }
    .rp-chrome-q {
      display: contents;
    }
    .rp-walk {
      position: sticky;
      top: var(--sticky-top, 0);
      z-index: 3;
      padding: 0.4375rem 0;
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
    }
  }
  .rp-add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    font: 400 var(--t-xs) / 1.2 var(--font-body);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
  }
  .rp-add:hover {
    border-color: var(--rule-2);
    color: var(--ink);
  }
  .rp-add svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .rp-tier {
    margin-left: 0.375rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-2);
  }
  .rp-bar .rp-pct {
    margin: 0;
    flex: none;
    font-size: var(--t-h2);
  }
  .rp-sec {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .rp-seg > button {
    height: 1.625rem;
    padding-block: 0;
  }
}
@layer pages {
  .at-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin: 0.5rem 0 0;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .at-head {
    margin-bottom: 0.875rem;
  }
  .at-tbl td {
    vertical-align: middle;
  }
  .at-tbl th {
    font-weight: 500;
  }
  .at-when {
    display: block;
    font-size: var(--t-sm);
    color: var(--ink);
    text-decoration: none;
  }
  .at-when:hover {
    color: var(--mark);
  }
  .at-n {
    display: block;
    margin-top: 0.125rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .at-pct {
    font: 500 var(--t-h3) / 1 var(--font-display);
    color: var(--ink);
  }
  .at-neg {
    color: var(--oc-wrong);
  }
  .at-marks {
    display: block;
    margin-top: 0.1875rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .at-best {
    margin-top: 0.375rem;
  }
  .at-split {
    height: 0.375rem;
    min-width: 5rem;
    margin-top: 0;
  }
  .at-counts {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .at-counts b {
    font-weight: 500;
  }
  .at-counts b[data-outcome="right"] {
    color: var(--oc-right);
  }
  .at-counts b[data-outcome="partial"] {
    color: var(--oc-partial);
  }
  .at-counts b[data-outcome="wrong"] {
    color: var(--oc-wrong);
  }
  .at-counts b[data-outcome="skip"] {
    color: var(--ink-2);
  }
  .at-r {
    text-align: right;
  }
  .at-none {
    color: var(--ink-3);
    font-size: var(--t-xs);
  }
  .at-empty {
    margin: 0;
    padding: var(--s-block) 0;
    border-top: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink-3);
    max-width: var(--w-measure);
  }
  .at-topbar {
    margin-bottom: var(--s-sub);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
  }
  .at-topbar .ps-list-head {
    flex: 1 1 18rem;
  }
  .at-cta {
    flex: none;
    margin: 0;
  }
  .at-when {
    display: inline;
  }
  .at-n {
    display: inline;
    margin: 0 0 0 0.4375rem;
  }
  .at-marks {
    display: inline;
    margin: 0 0 0 0.4375rem;
  }
  .at-best {
    margin: 0 0 0 0.4375rem;
  }
  .at-tbl td:nth-child(2) {
    display: table-cell;
    white-space: nowrap;
  }
  .at-tbl td:nth-child(3) > * {
    vertical-align: middle;
  }
  .at-split {
    display: inline-flex;
    width: 6rem;
    min-width: 0;
  }
  .at-counts {
    display: inline;
    margin: 0 0 0 0.625rem;
    white-space: nowrap;
  }
  @media (width < 34rem) {
    .at-when, .at-n, .at-marks, .at-counts {
      display: block;
      margin-left: 0;
    }
    .at-n, .at-marks {
      margin-top: 0.1875rem;
    }
    .at-best {
      margin: 0.375rem 0 0;
    }
    .at-counts {
      margin-top: 0.375rem;
    }
    .at-split {
      display: flex;
      width: auto;
    }
  }
  .at-open {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
  }
}
@layer pages {
  .wg {
    container-type: inline-size;
    container-name: wg doc;
    position: relative;
    margin-top: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .wg > :first-child, .wg > :first-child > :first-child {
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
  }
  .wg > :last-child, .wg > :last-child > :last-child {
    border-end-start-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
  }
  .wg-figure, .wg-reason {
    display: contents;
  }
  .wg-figure[hidden], .wg-reason[hidden] {
    display: none;
  }
  :is(.wg, .wg-figure, .wg-reason) > * + * {
    border-top: 1px solid var(--rule);
  }
  .wg > * + :is(.wg-figure, .wg-reason) > :first-child {
    border-top: 1px solid var(--rule);
  }
  .wg-max {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 4;
    border-color: var(--rule);
    background: var(--paper);
    color: var(--ink-3);
  }
  .wg-reset {
    position: absolute;
    top: 0.5rem;
    right: 2.625rem;
    z-index: 4;
    border-color: var(--rule);
    background: var(--paper);
    color: var(--ink-3);
  }
  .wg-reset svg {
    width: 1rem;
    height: 1rem;
  }
  .wg-reset:hover {
    border-color: var(--rule-2);
    color: var(--ink);
    background: var(--paper);
  }
  .wg[data-max] .wg-reset {
    top: 0.75rem;
    right: 2.875rem;
  }
  .wg-max:hover {
    border-color: var(--rule-2);
    color: var(--ink);
    background: var(--paper);
  }
  .wg-max svg {
    width: 1rem;
    height: 1rem;
  }
  .wg[data-max] .wg-max {
    top: 0.75rem;
    right: 0.75rem;
  }
  .wg-max [data-wg-out] {
    display: none;
  }
  .wg[data-max] .wg-max [data-wg-out] {
    display: block;
  }
  .wg[data-max] .wg-max [data-wg-in] {
    display: none;
  }
  .wg:is([data-max], [data-room]) {
    --wg-stage-cap: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .wg[data-room] {
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .wg[data-max] {
    --wg-stage-w: clamp(22rem, 56vw, 64rem);
    --wg-gap: clamp(0.5rem, 1.4vmin, 1rem);
    position: fixed;
    inset: var(--wg-gap);
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    z-index: 60;
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-over), 0 0 0 100vmax var(--paper-2);
  }
  @media (width >= 72rem) and (height >= 30rem) {
    .wg:is([data-max], [data-room]) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
    }
    .wg:is([data-max], [data-room]) > .wg-head {
      grid-row: 1;
      grid-column: 1 / -1;
      border-bottom: 1px solid var(--rule);
    }
    .wg:is([data-max], [data-room]) > .wg-figure {
      border-top: 0;
    }
    .wg:is([data-max], [data-room]):has(> .wg-tabs) {
      grid-template-rows: auto auto minmax(0, 1fr);
    }
    .wg:is([data-max], [data-room]) > .wg-tabs {
      grid-row: 2;
      grid-column: 1 / -1;
      border-bottom: 1px solid var(--rule);
    }
    .wg:is([data-max], [data-room]):has(> .wg-tabs) > .wg-figure, .wg:is([data-max], [data-room]):has(> .wg-tabs) > .wg-reason {
      grid-row: 3;
    }
    .wg:is([data-max], [data-room]) > .wg-figure {
      grid-row: 2;
      grid-column: 2;
      border-left: 1px solid var(--rule);
      border-end-start-radius: 0;
      border-end-end-radius: var(--r-md);
    }
    .wg:is([data-max], [data-room]) > .wg-reason {
      grid-row: 2;
      grid-column: 1;
      border-top: 0;
      border-end-start-radius: var(--r-md);
      border-end-end-radius: 0;
    }
    .wg:is([data-max], [data-room]) > .wg-figure::after, .wg:is([data-max], [data-room]) > .wg-reason::after {
      content: "";
      display: block;
      min-height: 1rem;
    }
    .wg:is([data-max], [data-room]) {
      overflow: hidden;
    }
    .wg:is([data-max], [data-room]) > .wg-figure, .wg:is([data-max], [data-room]) > .wg-reason {
      display: block;
      container-type: inline-size;
      container-name: wg doc;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .wg:is([data-max], [data-room]) > :is(.wg-figure, .wg-reason) > :first-child {
      border-top: 0;
    }
    .wg:is([data-max], [data-room]) > .wg-figure {
      display: flex;
      flex-direction: column;
    }
    .wg:is([data-max], [data-room]) > .wg-figure > .wg-stage {
      min-height: min(calc(100cqw / var(--stage-ar)), var(--wg-stage-cap));
      max-height: min(calc(100cqw / var(--stage-ar)), var(--wg-stage-cap));
    }
    .wg:is([data-max], [data-room]) > .wg-figure > .wg-stage {
      position: sticky;
      top: 0;
      z-index: 1;
      flex: 1 1 auto;
      display: grid;
      place-items: center;
      padding: 1rem 1rem 1.5rem;
      border-top: 0;
      box-shadow: none;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) {
      grid-template-rows: auto repeat(20, min-content) 1fr;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > * {
      grid-column: 2;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-head {
      grid-column: 1 / -1;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-stage {
      grid-column: 1;
      grid-row: 2 / -1;
      position: sticky;
      top: 0;
      align-self: start;
      display: grid;
      place-items: center;
      height: 100%;
      max-height: calc(100vh - var(--wg-head-h, 4rem) - 2 * var(--wg-gap));
      padding-bottom: 2.75rem;
      border-top: 0;
      border-right: 1px solid var(--rule);
      box-shadow: none;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-caption {
      grid-column: 1;
      grid-row: 2 / -1;
      align-self: end;
      position: sticky;
      bottom: 0;
      border-top: 1px solid var(--rule);
      border-right: 1px solid var(--rule);
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-head + *, .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-caption + * {
      border-top: 0;
    }
  }
  .wg:is([data-max], [data-room]) .wg-stage[data-pinned] {
    box-shadow: none;
  }
  .wg:is([data-max], [data-room]) .wg-stage {
    overflow: visible;
    background: var(--paper);
  }
  .wg:is([data-max], [data-room]) .wg-stage > svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-height: none;
  }
  @media (width < 88rem) {
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-panels {
      grid-template-columns: 1fr;
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-panels > .wg-panel {
      border-left: 0;
      border-top: 1px solid var(--rule);
    }
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-panels > .wg-panel:first-child {
      border-top: 0;
    }
  }
  @media (width < 80rem) {
    .wg:is([data-max], [data-room]):not(:has(> .wg-figure)) > .wg-readout {
      grid-auto-flow: row;
      grid-template-columns: 1fr 1fr;
    }
  }
  body:has(.wg[data-max]) {
    overflow: hidden;
  }
  .wg-main, .wg-side {
    min-width: 0;
    container-type: inline-size;
    container-name: wg doc;
  }
  .wg-main > * + *, .wg-side > * + * {
    border-top: 1px solid var(--rule);
  }
  .wg-head {
    padding: 0.875rem 1.0625rem;
  }
  .wg-head:has(> .wg-max), .wg:has(> .wg-max) > .wg-head {
    padding-right: 3.25rem;
  }
  .wg-head:has(> .wg-reset), .wg:has(> .wg-reset) > .wg-head {
    padding-right: 3.25rem;
  }
  .wg-head:has(> .wg-reset):has(> .wg-max), .wg:has(> .wg-reset):has(> .wg-max) > .wg-head {
    padding-right: 5.375rem;
  }
  .wg-title {
    margin: 0;
    font: 500 var(--t-body) / 1.4 var(--font-display);
    color: var(--ink);
    text-wrap: pretty;
  }
  .wg-head .eyebrow + .wg-title {
    margin-top: 0.25rem;
  }
  .wg:is([data-max], [data-room]) > .wg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
    padding-block: 0.625rem;
  }
  .wg:is([data-max], [data-room]) > .wg-head > .eyebrow {
    flex: 0 0 auto;
  }
  .wg:is([data-max], [data-room]) > .wg-head .eyebrow + .wg-title {
    margin-top: 0;
  }
  @media (width >= 72rem) and (height >= 30rem) {
    .wg[data-room] > .wg-head {
      grid-column: 2;
      padding-left: 0.75rem;
      padding-right: 1.0625rem;
      border-left: 1px solid var(--rule);
    }
    .wg[data-room] > .wg-figure {
      grid-row: 2;
    }
    .wg[data-room] > .wg-reason {
      grid-row: 1 / -1;
      border-top: 0;
    }
    .wg[data-room] > .wg-head > .wg-reset {
      position: static;
      flex: 0 0 auto;
      margin-left: auto;
    }
  }
  .wg-stepv {
    flex: 0 1 auto;
    margin-left: auto;
    padding-left: 0.75rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-align: right;
  }
  .wg-sect {
    padding: 0.8125rem 1.0625rem 0.375rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  :is(.wg, .wg-figure, .wg-reason) > .wg-sect + * {
    border-top: 0;
  }
  .wg-band {
    padding: 0.875rem 1.0625rem;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .wg-band > :first-child {
    margin-top: 0;
  }
  .wg-band > p + p {
    margin-top: 0.6875rem;
  }
  .wg-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .wg-tab {
    display: grid;
    gap: 0.1875rem;
    justify-items: start;
    padding: 0.625rem 0.8125rem 0.6875rem;
    border: 0;
    border-right: 1px solid var(--rule);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s var(--ease-out);
  }
  .wg-tab:last-child {
    border-right: 0;
  }
  .wg-tab:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
  }
  .wg-tab-n {
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.1em;
    color: var(--ink-3);
  }
  .wg-tab-t {
    font: 400 var(--t-xs) / 1.35 var(--font-body);
    color: var(--ink-3);
    text-wrap: pretty;
  }
  .wg-tab[aria-selected="true"] {
    background: var(--mark-soft);
    box-shadow: inset 0 -2px 0 var(--mark);
  }
  .wg-tab[aria-selected="true"] .wg-tab-n {
    color: var(--mark);
  }
  .wg-tab[aria-selected="true"] .wg-tab-t {
    color: var(--ink);
  }
  @container wg (width < 34rem) {
    .wg-tabs {
      grid-auto-flow: row;
      grid-auto-columns: auto;
    }
    .wg-tab {
      grid-template-columns: auto 1fr;
      align-items: baseline;
      gap: 0 0.625rem;
      border-right: 0;
      border-bottom: 1px solid var(--rule);
    }
    .wg-tab:last-child {
      border-bottom: 0;
    }
    .wg-tab[aria-selected="true"] {
      box-shadow: inset 2px 0 0 var(--mark);
    }
  }
  .wg-stage {
    --stage-min: 26rem;
    --stage-ar: 2;
    padding: 0.5rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .wg-stage {
    --wg-stage-inline-cap: min(48vh, 26rem);
  }
  .wg-stage > svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: max( var(--stage-min, 26rem), calc(var(--wg-stage-inline-cap) * var(--stage-ar, 2)) );
    margin-inline: auto;
  }
  @container wg (width < 31.25rem) {
    .wg-stage {
      overflow-x: auto;
    }
    .wg-stage > svg {
      min-width: var(--stage-min);
    }
  }
  .wg-stage[data-sticky] {
    position: sticky;
    top: calc(var(--sticky-stack, 0px) + var(--ap-strip-h, 0px) + var(--ap-door-h, 0px));
    z-index: 2;
  }
  .wg-stage[data-sticky] {
    overflow-anchor: none;
  }
  .wg-stage[data-sticky] > svg {
    max-height: min(46vh, 24rem);
  }
  .wg-stage[data-sticky] {
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wg-stage[data-sticky][data-pinned] {
    box-shadow: 0 10px 18px -16px var(--ink), 0 1px 0 var(--rule);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 18px -16px color-mix(in srgb, var(--ink) 60%, transparent), 0 1px 0 var(--rule);
    }
  }
  .wg-sentinel {
    height: 1px;
    margin-bottom: -1px;
  }
  .wg-caption {
    display: block;
    padding: 0.375rem 0.6875rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wg-caption[data-split] {
    display: flex;
    justify-content: space-between;
    gap: 0.6875rem;
    flex-wrap: wrap;
  }
  .wg-caption b {
    font-weight: 400;
    color: var(--ink-2);
  }
  .wg-caption .katex {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1em !important;
  }
  .wg-controls {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.8125rem 1.0625rem;
  }
  .wg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-height: 2rem;
  }
  .wg-key {
    flex: none;
    width: 4.5rem;
    font: 400 var(--t-micro) / 1.3 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wg-row > .wg-grow {
    flex: 1 1 auto;
    min-width: 0;
  }
  @container wg (width < 32.5rem) {
    .wg-row {
      flex-wrap: wrap;
    }
    .wg-key {
      width: 100%;
    }
  }
  @container wg (width >= 68rem) {
    .wg-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.625rem 1.5rem;
    }
  }
  .wg-readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    overflow: hidden;
  }
  .wg-cell {
    padding: 0.625rem 0.875rem;
    box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
  }
  .wg:is([data-max], [data-room]) > :is(.wg-figure, .wg-reason) > :last-child {
    border-bottom: 1px solid var(--rule);
  }
  .wg-cell[data-live] {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) var(--tint), var(--paper));
    }
  }
  .wg-cell-k {
    display: block;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wg-cell-k[data-sym] {
    font-size: var(--t-xs);
    letter-spacing: 0;
    text-transform: none;
  }
  .wg-cell-v {
    display: block;
    margin-top: 0.3125rem;
    font: 400 var(--t-sm) / 1.2 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }
  .wg-cell[data-live] .wg-cell-v {
    color: var(--mark);
  }
  .wg-cell-n {
    display: block;
    margin-top: 0.1875rem;
    font: 400 var(--t-micro) / 1.45 var(--font-label);
    letter-spacing: 0.03em;
    color: var(--ink-3);
  }
  .wg-cell-v .katex, .wg-key .katex, .wg-cell-k .katex {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1em !important;
  }
  .wg-unit {
    margin-left: 0.25rem;
    font-size: var(--t-nano);
    color: var(--ink-3);
  }
  @container wg (width < 35rem) {
    .wg-readout {
      grid-auto-flow: row;
      grid-template-columns: 1fr 1fr;
    }
  }
  :is(.wg, .wg-figure, .wg-reason) > .callout {
    border-radius: 0;
    border-top: 1px solid var(--rule);
    border-left-width: 2px;
    padding: 0.875rem 1.0625rem;
  }
  :is(.wg, .wg-figure, .wg-reason) > .callout-mark {
    border-left-width: 0;
  }
  .wg .callout-label {
    font-size: var(--t-nano);
    margin-bottom: 0.375rem;
  }
  :is(.wg, .wg-reason) > .callout:last-child {
    border-end-start-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
  }
  .wg .acc-btn .wg-stepnode {
    flex: none;
  }
  .wg .accordion .acc-item[open] {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) var(--tint), var(--paper));
    }
  }
  .wg .accordion .acc-item[open] .acc-btn {
    color: var(--ink);
  }
  .wg .accordion {
    counter-reset: wg-step;
  }
  .wg .accordion .acc-item {
    counter-increment: wg-step;
  }
  .wg .accordion .wg-stepnode {
    display: inline;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 0;
    color: var(--ink-3);
  }
  .wg .accordion .wg-stepnode::before {
    content: counter(wg-step, decimal-leading-zero);
    font: 400 var(--t-nano) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
  }
  .wg .accordion .acc-item[open] .wg-stepnode {
    color: var(--mark);
  }
  .wg .accordion .wg-stepname {
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-2);
    white-space: normal;
  }
  .wg .accordion .acc-item[open] .wg-stepname {
    color: var(--ink);
  }
  .wg-reveal-btn {
    list-style: none;
    padding: 0.8125rem 1.0625rem 0.4375rem;
    cursor: pointer;
  }
  .wg-reveal-btn::-webkit-details-marker {
    display: none;
  }
  .wg-reveal-btn > span {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rule-2);
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wg-reveal-btn:hover > span {
    color: var(--ink);
    border-bottom-color: var(--ink-3);
  }
  .wg-reveal[open] > .wg-reveal-btn > span::before {
    content: "hide ";
  }
  .wg .case-rows q {
    font-style: italic;
    quotes: "\201C" "\201D";
  }
  .wg .case-rows-row[data-key] .case-rows-label {
    font-weight: 600;
  }
  :is(.wg, .wg-figure, .wg-reason) > .accordion {
    border-top: 0;
  }
  .wg .acc-body {
    line-height: 1.5;
  }
  .wg-prose + .wg-prose {
    margin-top: 0.6875rem;
  }
  .wg .acc-body > .wg-prose:first-child, .wg .callout > .wg-prose:first-child {
    margin-top: 0;
  }
  .wg-prose-dyn {
    font-variant-numeric: tabular-nums;
  }
  .wg p:has(.katex) span:has(> .katex) {
    line-height: 1.2;
  }
  .wg .acc-btn {
    padding-inline: 1.0625rem 0.9375rem;
  }
  .wg .acc-body {
    padding-inline: 2.25rem 1.0625rem;
  }
  .wg .wg-foldbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.4375rem 0.9375rem;
  }
  .wg .wg-foldbar .mod-foldall[aria-pressed="true"] {
    border-color: var(--mark);
    color: var(--mark);
  }
  .wg .wg-foldbar .mod-foldall[aria-pressed="true"] .mod-foldall-icon {
    transform: rotate(180deg);
  }
  .wg .acc-btn .eyebrow {
    margin-left: auto;
  }
  .wg-band > * + .wg-chips, .wg-band > * + .wg-layers, .wg-band > * + .opts, .wg-band > * + .wg-matrix {
    margin-top: 0.75rem;
  }
  .wg-band > :is(.wg-chips, .wg-layers, .opts, .wg-matrix) + .callout {
    margin-top: 0.875rem;
  }
  .wg .seg button[aria-pressed="true"] {
    background: var(--mark-soft);
    color: var(--mark);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 30%, transparent);
    }
  }
  .wg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
  }
  .wg-chip {
    --edge: var(--rule-2);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--paper);
    font: 400 var(--t-sm) / 1.3 var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wg-chip:hover {
    --edge: var(--ink-3);
    color: var(--ink);
  }
  .wg-chip[aria-pressed="true"] {
    --edge: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .wg-chip[data-verdict="right"] {
    --edge: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) var(--tint), var(--paper));
    }
    color: var(--h-good);
  }
  .wg-chip[data-verdict="wrong"] {
    --edge: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) var(--tint), var(--paper));
    }
    color: var(--h-bad);
  }
  .wg-chips[data-judged] .wg-chip:not([data-verdict]) {
    opacity: 0.45;
  }
  .wg .opt-mark[data-sym] {
    letter-spacing: 0;
    text-transform: none;
  }
  .wg .opts[data-judged] > .opt:not([data-verdict]) {
    opacity: 0.45;
  }
  :is(.wg, .ap-slide) .opt-item > .opt {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    border: 0;
    border-radius: 0;
    background: none;
  }
  :is(.wg, .ap-slide) .opt-item > .opt > .opt-mark {
    grid-column: 3;
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
  }
  @container wg (width < 34rem) {
    .wg .opt-item > .opt {
      grid-template-columns: 1.5rem minmax(0, 1fr);
    }
    .wg .opt-item > .opt > .opt-mark {
      grid-column: 2;
      margin-top: 0.375rem;
      text-align: left;
      white-space: normal;
    }
  }
  :is(.wg, .ap-slide) .opt-item:has(> .opt[aria-pressed="true"]) {
    box-shadow: inset 0 0 0 1px var(--edge);
  }
  .wg .opt-item > .callout-mark {
    padding: 0.6875rem 0.875rem 0.75rem 2.875rem;
    border: 0;
    border-top: 1px dashed var(--rule-2);
    border-radius: 0;
    background: none;
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }
  .wg .opt-item > .callout-mark > p {
    margin: 0;
  }
  .wg .opt-item[data-verdict="right"] .opt-mark {
    color: var(--h-good);
  }
  .wg .opt-item[data-verdict="wrong"] .opt-mark {
    color: var(--h-bad);
  }
  .wg .opts[data-judged] .opt-item:not([data-verdict]) {
    opacity: 0.45;
  }
  .wg-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .wg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 2rem;
    padding: 0.375rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: 400 var(--t-sm) / 1.3 var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
  }
  .wg-toggle::before {
    content: "";
    width: 0.6875rem;
    height: 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--paper);
  }
  .wg-toggle:hover {
    color: var(--ink);
  }
  .wg-toggle[aria-pressed="true"] {
    border-color: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .wg-toggle[aria-pressed="true"]::before {
    border-color: var(--mark);
    background: var(--mark);
  }
  input[type="range"].wgr {
    appearance: none;
    display: block;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    border-radius: 2px;
    background: linear-gradient(var(--rule-2), var(--rule-2)) center / 100% 2px no-repeat;
    cursor: pointer;
  }
  input[type="range"].wgr::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
  }
  input[type="range"].wgr::-moz-range-track {
    height: 2px;
    background: transparent;
  }
  input[type="range"].wgr::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    border: 2px solid var(--paper);
    border-radius: 999px;
    background: var(--mark);
  }
  input[type="range"].wgr::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--paper);
    border-radius: 999px;
    background: var(--mark);
  }
  .wg-scrub {
    min-width: 8rem;
  }
  .wg-scrub {
    position: relative;
  }
  .wg-scrub {
    --wg-at: 0;
    padding-bottom: 0.625rem;
  }
  .wg-scrub[data-min]::before, .wg-scrub[data-max]::after, .wg-now {
    position: absolute;
    bottom: 0;
    font: 400 var(--t-nano) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    pointer-events: none;
  }
  .wg-scrub[data-min]::before {
    left: 0;
    content: attr(data-min);
  }
  .wg-scrub[data-max]::after {
    right: 0;
    content: attr(data-max);
  }
  .wg-now {
    left: calc(7px + (100% - 14px) * var(--wg-at));
    transform: translateX(-50%);
    color: var(--mark);
  }
  .wg-scrub[data-min]::before {
    opacity: clamp(0, (var(--wg-at) - 0.06) * 14, 1);
  }
  .wg-scrub[data-max]::after {
    opacity: clamp(0, (0.94 - var(--wg-at)) * 14, 1);
  }
  .wg-snaps {
    position: absolute;
    inset: calc(0.75rem - 4px) 7px auto;
    height: 8px;
    pointer-events: none;
  }
  .wg-snap {
    --at: 100%;
    position: absolute;
    top: 0;
    left: var(--at);
    width: 2px;
    height: 8px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--rule-2);
  }
  .wg-jump {
    flex: none;
    padding: 0.375rem 0.6875rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: 400 var(--t-micro) / 1.3 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    cursor: pointer;
    min-height: 2rem;
  }
  .wg-jump:hover {
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .wg-jump[aria-pressed="true"] {
    border-color: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .wg-play {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
  }
  .wg-play:hover {
    border-color: var(--mark);
    color: var(--mark);
  }
  .wg-play svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .wg-play[aria-pressed="true"] {
    border-color: var(--mark);
    color: var(--mark);
  }
  .wg-select {
    position: relative;
    display: inline-block;
  }
  .wg-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2rem;
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: 400 var(--t-sm) / 1.3 var(--font-body);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  .wg-select-btn:hover {
    border-color: var(--ink-3);
  }
  .wg-select-btn[aria-expanded="true"] {
    border-color: var(--mark);
  }
  .wg-select-btn svg {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    color: var(--ink-3);
  }
  .wg-select-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  .wg-select-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-over);
    box-shadow: var(--shadow-over);
    list-style: none;
  }
  .wg-select-list[hidden] {
    display: none;
  }
  .wg-select-opt {
    padding: 0.4375rem 0.625rem;
    border-radius: var(--r-sm);
    font: 400 var(--t-sm) / 1.35 var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
  }
  .wg-select-opt[aria-selected="true"] {
    color: var(--mark);
    background: var(--mark-soft);
  }
  .wg-select-opt[data-cursor] {
    box-shadow: inset 0 0 0 1px var(--rule-2);
  }
  .wg-select-opt:hover {
    color: var(--ink);
    background: var(--paper-2);
  }
  .wg-select-opt[aria-selected="true"]:hover {
    color: var(--mark);
    background: var(--mark-soft);
  }
  .wg-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .wg-step-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: var(--paper);
    font: 400 var(--t-body) / 1 var(--font-body);
    color: var(--ink-2);
    cursor: pointer;
  }
  .wg-step-btn:hover:not(:disabled) {
    background: var(--paper-2);
    color: var(--ink);
  }
  .wg-step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .wg-step-val {
    min-width: 2.25rem;
    padding: 0 0.25rem;
    border-inline: 1px solid var(--rule-2);
    font: 400 var(--t-sm) / 2rem var(--font-label);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--ink);
  }
  .wg-field {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper);
  }
  .wg-field:focus-within {
    border-color: var(--mark);
  }
  .wg-input {
    width: 100%;
    min-width: 0;
    padding: 0.4375rem 0.625rem;
    border: 0;
    background: none;
    font: 400 var(--t-sm) / 1.4 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    outline: none;
  }
  .wg-suffix {
    display: grid;
    place-items: center;
    flex: none;
    padding: 0 0.625rem;
    border-left: 1px solid var(--rule-2);
    background: var(--paper-2);
    font: 400 var(--t-micro) / 1 var(--font-label);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .wg-field[data-verdict="right"] {
    border-color: var(--h-good);
  }
  .wg-field[data-verdict="wrong"] {
    border-color: var(--h-bad);
  }
  .wg-accepts {
    margin-top: 0.375rem;
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    color: var(--ink-3);
  }
  .wg-matrix {
    width: 100%;
    border-collapse: collapse;
    font: 400 var(--t-sm) / 1.3 var(--font-label);
  }
  .wg-matrix th {
    padding: 0.4375rem 0.5rem;
    font: 400 var(--t-nano) / 1.3 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: center;
    font-weight: 400;
  }
  .wg-matrix thead th {
    border-bottom: 1px solid var(--rule);
  }
  .wg-matrix tbody th {
    text-align: left;
    border-right: 1px solid var(--rule);
    font-size: var(--t-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
  }
  .wg-matrix td {
    padding: 0;
    border: 1px solid var(--rule);
  }
  .wg-mx-cell {
    --edge: transparent;
    display: block;
    width: 100%;
    padding: 0.5rem 0.375rem;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--edge);
    background: none;
    font: 400 var(--t-sm) / 1.3 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    text-align: center;
    cursor: pointer;
  }
  .wg-mx-cell:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .wg-mx-cell[aria-pressed="true"] {
    --edge: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .wg-mx-cell[data-verdict="right"] {
    --edge: var(--h-good);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) var(--tint), var(--paper));
    }
    color: var(--h-good);
  }
  .wg-mx-cell[data-verdict="wrong"] {
    --edge: var(--h-bad);
    background: var(--h-bad);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-bad) var(--tint), var(--paper));
    }
    color: var(--h-bad);
  }
  .wg-probe {
    width: 100%;
    border-collapse: collapse;
    font: 400 var(--t-sm) / 1.4 var(--font-label);
    font-variant-numeric: tabular-nums;
  }
  .wg-probe th {
    padding: 0.4375rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    font: 400 var(--t-nano) / 1.3 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: right;
    font-weight: 400;
  }
  .wg-probe th:first-child, .wg-probe td:first-child {
    text-align: left;
  }
  .wg-probe td {
    padding: 0.4375rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    text-align: right;
    color: var(--ink-2);
  }
  .wg-probe tr:last-child td {
    border-bottom: 0;
  }
  .wg-probe tbody tr {
    cursor: pointer;
  }
  .wg-probe tbody tr:hover td {
    background: var(--paper-2);
  }
  .wg-probe tbody tr[aria-selected="true"] td {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) var(--tint), var(--paper));
    }
    color: var(--ink);
  }
  .wg-probe [data-derived] {
    color: var(--ink);
  }
  :is(.wg, .wg-reason) > .wg-probe:last-child tr:last-child td:first-child {
    border-end-start-radius: var(--r-md);
  }
  :is(.wg, .wg-reason) > .wg-probe:last-child tr:last-child td:last-child {
    border-end-end-radius: var(--r-md);
  }
  .wg-meter {
    height: 4px;
    border-radius: 2px;
    background: var(--rule);
    overflow: hidden;
  }
  .wg-meter-fill {
    --fill: 0%;
    width: var(--fill);
    height: 100%;
    border-radius: 2px;
    background: var(--mark);
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wg-meter-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wg-bar {
    display: flex;
    height: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper-2);
  }
  .wg-bar-seg {
    --fill: 50%;
    width: var(--fill);
    transition: width 0.15s var(--ease-out);
  }
  .wg-bar-seg:first-child {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 22%, var(--paper));
    }
  }
  .wg-bar-seg + .wg-bar-seg {
    background: var(--mark);
  }
  @media (prefers-reduced-motion: reduce) {
    .wg-bar-seg {
      transition: none;
    }
  }
  .wg-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .wg-panel {
    padding: 0.625rem 0.875rem 0.75rem;
    border-left: 1px solid var(--rule);
    min-width: 0;
  }
  .wg-panel:first-child {
    border-left: 0;
  }
  .wg-panel-h {
    margin: 0;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wg-panel svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 11rem;
    margin-top: 0.375rem;
  }
  .wg-panel p {
    margin-top: 0.4375rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-2);
  }
  @container wg (width < 38.75rem) {
    .wg-panels {
      grid-template-columns: 1fr;
    }
    .wg-panel {
      border-left: 0;
      border-top: 1px solid var(--rule);
    }
    .wg-panel:first-child {
      border-top: 0;
    }
  }
  .wg-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: 0.875rem;
    align-items: start;
  }
  .wg-split-fig {
    padding-left: 0.75rem;
    border-left: 1px solid var(--rule);
  }
  .wg-split-fig svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .wg-split-fig p {
    margin-top: 0.25rem;
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
  @container wg (width < 38.75rem) {
    .wg-split {
      grid-template-columns: 1fr;
    }
    .wg-split-fig {
      max-width: 14rem;
      padding: 0.5rem 0 0;
      border-left: 0;
      border-top: 1px solid var(--rule);
    }
  }
  .wg-expr {
    padding: 0.75rem 1.0625rem;
    text-align: center;
    font-size: var(--t-sm);
    color: var(--ink);
    overflow-x: auto;
  }
  .wg-expr .katex {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1em !important;
  }
  .wg-steps {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 1.0625rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wg-steps::-webkit-scrollbar {
    display: none;
  }
  .wg-stepbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex: none;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
  }
  .wg-stepnode {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: var(--paper);
    font: 400 var(--t-micro) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .wg-stepname {
    font: 400 var(--t-xs) / 1.3 var(--font-body);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .wg-stepbtn[data-state="done"] .wg-stepnode {
    border-color: var(--h-good);
    color: var(--h-good);
  }
  .wg-stepbtn[data-state="current"] .wg-stepnode {
    border-color: var(--mark);
    background: var(--mark);
    color: var(--mark-on);
  }
  .wg-stepbtn[data-state="done"] .wg-stepname {
    color: var(--ink-2);
  }
  .wg-stepbtn[data-state="current"] .wg-stepname {
    color: var(--mark);
    font-weight: 500;
  }
  .wg-fig {
    color: var(--ink-2);
    font-family: var(--font-display);
  }
  .wg-structure {
    stroke: var(--rule-2);
    stroke-width: 1.2;
    fill: none;
    color: var(--ink-3);
  }
  .wg-body {
    stroke: var(--ink-2);
    stroke-width: 1.8;
    fill: none;
    color: var(--ink-2);
  }
  .wg-vector {
    stroke: var(--ink);
    stroke-width: 2;
    fill: none;
    color: var(--ink);
  }
  .wg-driver {
    stroke: var(--mark);
    stroke-width: 2.4;
    fill: none;
    color: var(--mark);
  }
  .wg-wrong {
    stroke: var(--h-bad);
    stroke-width: 2.4;
    fill: none;
    color: var(--h-bad);
  }
  :is(.wg-stage, .wg-panel, .wg-split-fig, .cslide-fig) svg :is(path, line, circle, ellipse, rect, polyline, polygon) {
    vector-effect: non-scaling-stroke;
  }
  .wg-s1 {
    stroke: var(--h-note);
    stroke-width: 1.8;
    fill: none;
    color: var(--h-note);
  }
  .wg-s2 {
    stroke: var(--h-warn);
    stroke-width: 1.8;
    fill: none;
    color: var(--h-warn);
  }
  .wg-s3 {
    stroke: var(--h-good);
    stroke-width: 1.8;
    fill: none;
    color: var(--h-good);
  }
  .wg-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.1875rem;
    margin-right: 0.375rem;
    vertical-align: 0.15em;
    border-radius: 999px;
    background: currentColor;
  }
  .wg-inert {
    stroke: var(--rule-2);
    stroke-width: 3.5;
    fill: none;
    color: var(--ink-3);
    opacity: 0.6;
  }
  .wg [data-wg-dim] {
    transition: opacity 0.15s var(--ease-out);
  }
  .wg [data-wg-dim="true"] {
    opacity: 0.22;
  }
  @media (prefers-reduced-motion: reduce) {
    .wg [data-wg-dim] {
      transition: none;
    }
  }
  .wg-solid {
    fill: currentColor;
    stroke: none;
  }
  .wg-wash {
    fill: currentColor;
    stroke: none;
    opacity: 0.12;
  }
  .wg-glyph {
    font: italic 400 15px var(--font-display);
    font-size: min(calc(15px / var(--fig-scale, 1)), 24px);
    fill: currentColor;
    stroke: none;
  }
  .wg-aside {
    font: 400 11px var(--font-label);
    font-size: min(calc(11px / var(--fig-scale, 1)), 17.6px);
    fill: currentColor;
    stroke: none;
    letter-spacing: 0.02em;
  }
  @media (prefers-reduced-motion: reduce) {
    .wg-meter-fill, .wg-chip {
      transition: none;
    }
  }
  radio-group {
    display: inline-block;
  }
  .rg-track {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.1875rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 5%, var(--paper));
    }
  }
  .rg-btn {
    font: 400 var(--t-sm) / 1 var(--font-body);
    padding: 0.4375rem 0.875rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .rg-btn:hover:not(:disabled, .rg-btn-active) {
    color: var(--ink);
  }
  .rg-btn-active {
    background: var(--mark-soft);
    color: var(--mark);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 30%, transparent);
    }
  }
  .rg-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .rg-track-dense .rg-btn {
    padding: 0.25rem 0.625rem;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
  }
  range-slider {
    display: block;
  }
  .rs-wrap {
    --rs-pct: 0%;
    user-select: none;
  }
  .rs-track {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 2px;
    background: linear-gradient(var(--rule-2), var(--rule-2)) center / 100% 2px no-repeat;
    cursor: pointer;
  }
  .rs-fill {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: var(--rs-pct);
    height: 2px;
    background: var(--mark);
    pointer-events: none;
  }
  .rs-thumb {
    position: absolute;
    top: 50%;
    left: var(--rs-pct);
    width: 14px;
    height: 14px;
    margin-left: -7px;
    transform: translateY(-50%);
    border: 2px solid var(--paper);
    border-radius: 999px;
    background: var(--mark);
    cursor: grab;
  }
  .rs-thumb-active {
    cursor: grabbing;
  }
  .rs-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .rs-label-min, .rs-label-max {
    color: var(--ink-3);
  }
  .rs-label-val {
    color: var(--mark);
  }
}
@layer pages {
  .ap-deck {
    --ap-fig-top: var(--sticky-stack, 0px);
    display: block;
    position: relative;
    min-width: 0;
  }
  .ap-deck[data-room] {
    --ap-fig-top: 0px;
  }
  .ap-q[data-max] > .ap-panel {
    container-type: size;
  }
  .ap-slide:has(> .ap-slide-pri[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-slide:has(> .ap-slide-pri[hidden]) > .ap-slide-sec {
    padding-left: 0;
    border-left: 0;
  }
  .ap-slide:has(> .ap-slide-sec[hidden]), .ap-slide:not(:has(> .ap-slide-sec)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-deck:not([data-room-split], [data-mode="solution"]) :is( .ap-slide:has(> .ap-slide-pri[hidden]), .ap-slide:has(> .ap-slide-sec[hidden]), .ap-slide:not(:has(> .ap-slide-sec)), .ap-slide:has(> .ap-slide-pri > .ap-ledger) ) {
    max-width: var(--w-measure);
  }
  .ap-deck[data-mode="solution"] .ap-slide {
    width: 100%;
    max-width: var(--w-doc);
  }
  .ap-deck[data-mode="solution"] .ap-slide :is(p, li):not(:has(.katex-display)) {
    max-width: var(--w-measure);
  }
  .ap-slide[data-kind="read"]:not(:has(> .ap-slide-sec)) {
    max-width: var(--w-measure);
    margin-inline: auto;
  }
  .ap-deck[data-quiet] > .ap-deck-fig {
    display: none;
  }
  .ap-q[data-max]:has(.ap-deck[data-room-split]) > .ap-pane {
    display: none;
  }
  .ap-q[data-max]:has(.ap-deck[data-room-split]) > .ap-panel {
    grid-column: 1 / -1;
  }
  @media (width < 72rem) {
    .ap-q[data-max]:has(.ap-deck[data-room-split]) > .ap-panel {
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
  @media (width >= 72rem) {
    .ap-deck[data-quiet][data-room-split] {
      grid-template: "flow" minmax(0, 1fr) "pager" auto / minmax(0, 1fr);
    }
    .ap-deck[data-quiet][data-room-split] > .ap-deck-flow {
      padding-right: 0;
      border-right: 0;
    }
    .ap-q[data-max]:has(.ap-deck[data-room-split]) > .ap-panel {
      overflow: hidden;
      padding-bottom: 0;
    }
    .ap-deck[data-room-split] {
      display: grid;
      grid-template: "flow fig" minmax(0, 1fr) "pager pager" auto / minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 1.75rem;
      height: 100%;
    }
    .ap-deck[data-room-split] > .ap-deck-flow {
      grid-area: flow;
      min-height: 0;
      padding-right: 1.75rem;
      border-right: 1px solid var(--rule);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .ap-deck[data-room-split] > .ap-deck-fig {
      position: static;
      grid-area: fig;
      height: auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      border-top: 0;
    }
    .ap-deck[data-room-split] > .ap-pager {
      grid-area: pager;
    }
    .ap-deck[data-room-split]:not([data-quiet]) .ap-slide {
      grid-template-columns: minmax(0, 1fr);
    }
    .ap-deck[data-room-split]:not([data-quiet]) .ap-slide-sec {
      margin-top: 1.25rem;
      padding-left: 0;
      border-left: 0;
    }
    .ap-deck[data-room-split] .ap-deck-fig {
      container-type: size;
    }
    .ap-deck[data-room-split] .ap-deck-fig .wg, .ap-deck[data-room-split] .ap-deck-fig .wg-figure {
      height: 100%;
    }
    .ap-deck[data-room-split] .ap-deck-fig .wg-figure {
      display: block;
    }
    .ap-deck[data-room-split] .ap-deck-fig .wg-main {
      display: contents;
    }
    .ap-deck[data-room-split] .ap-deck-fig .wg-side {
      display: contents;
    }
    .ap-deck[data-room-split] .ap-deck-fig .wg-readout {
      grid-auto-flow: column;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
    @container apfig (width < 35rem) {
      .ap-deck[data-room-split] .ap-deck-fig .wg-readout {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
      }
    }
    .ap-deck[data-room-split] .ap-deck-fig {
      --wg-stage-cap: max(10rem, calc(100cqh - 22rem));
    }
  }
  .ap-q:not([data-max]) > .ap-panel {
    container-type: inline-size;
    container-name: deck;
  }
  @media (height >= 40rem) {
    @container deck (width >= 54rem) {
      .ap-q:not([data-max]) .ap-deck:has(> .ap-deck-fig > *):not([data-mode="solution"], [data-quiet]) {
        display: grid;
        grid-template-areas: "flow fig";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2rem;
        align-items: start;
      }
      .ap-q:not([data-max]) .ap-deck[data-fig-wide]:has(> .ap-deck-fig > *):not([data-mode="solution"]) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      }
      .ap-q:not([data-max]) .ap-deck:has(> .ap-deck-fig > *):not([data-mode="solution"]) > .ap-deck-flow {
        grid-area: flow;
        padding-top: 0;
        padding-bottom: 3.75rem;
      }
      .ap-q:not([data-max]) .ap-deck:has(> .ap-deck-fig > *):not([data-mode="solution"]) > .ap-pager {
        grid-area: flow;
        align-self: end;
        margin-inline: -0.75rem;
      }
      .ap-q:not([data-max]) .ap-deck-fig .wg-row {
        flex-wrap: nowrap;
      }
      .ap-q:not([data-max]) .ap-deck-fig .wg-key {
        width: 4.5rem;
      }
      .ap-q:not([data-max]) .ap-deck-fig .wgr {
        width: 100%;
      }
      .ap-q:not([data-max]) .ap-deck:has(> .ap-deck-fig > *):not([data-mode="solution"]) > .ap-deck-fig {
        grid-area: fig;
        position: sticky;
        top: var(--ap-fig-top);
        z-index: 2;
        max-height: calc(100dvh - var(--ap-fig-top) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 0;
        border-radius: var(--r-md);
        box-shadow: inset 0 0 0 1px var(--rule);
      }
    }
  }
  .ap-deck-fig:empty {
    display: none;
  }
  .ap-deck-fig > .ap-figure {
    height: 100%;
    margin: 0;
  }
  .ap-deck-fig {
    position: relative;
    min-width: 0;
    container-type: inline-size;
    container-name: apfig;
    background: var(--paper);
    border-top: 1px solid var(--rule);
  }
  .ap-deck-flow {
    container-type: inline-size;
    container-name: doc slide;
    min-width: 0;
    padding: 1.25rem 0 1.75rem;
    position: relative;
    z-index: 1;
  }
  .ap-slide .katex-display {
    max-width: 100%;
    overflow: auto hidden;
    padding-bottom: 0.25rem;
  }
  .ap-deck[data-room] > .ap-deck-flow {
    padding-inline: 1.25rem;
  }
  .ap-slide {
    min-width: 0;
  }
  .ap-slide[data-slide-in="from-left"] {
    transform: translateX(-5%);
  }
  .ap-slide[data-slide-in="from-right"] {
    transform: translateX(5%);
  }
  .ap-slide[data-slide-in="home"] {
    transform: none;
    transition: transform 200ms var(--ease-out, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-slide[data-slide-in] {
      transition: none;
      transform: none;
    }
  }
  .ap-slide-k {
    color: var(--ink-3);
  }
  .ap-slide-h {
    margin: 0.25rem 0 0;
    font: 400 var(--t-h3) / 1.35 var(--font-display);
    color: var(--ink);
    text-wrap: balance;
  }
  .ap-slide-lede {
    margin-top: 0.625rem;
  }
  .ap-slide-pri, .ap-slide-sec {
    container-type: inline-size;
    container-name: doc;
    min-width: 0;
  }
  .ap-slide-pri {
    margin-top: 0.5rem;
  }
  .ap-slide-sec {
    margin-top: 1.5rem;
  }
  @container doc (width >= 54rem) {
    .ap-slide {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 2rem;
      align-items: start;
    }
    .ap-slide > :is(.ap-slide-k, .ap-slide-h, .ap-slide-lede) {
      grid-column: 1 / -1;
    }
    .ap-deck:not([data-room-split]) .ap-slide:has(> .ap-slide-pri > .ap-ledger) {
      grid-template-columns: minmax(0, 1fr);
    }
    .ap-deck:not([data-room-split]) .ap-slide:has(> .ap-slide-pri > .ap-ledger) > .ap-slide-sec {
      margin-top: 1.5rem;
      padding-left: 0;
      border-left: 0;
    }
    .ap-slide-sec {
      margin-top: 0.5rem;
      padding-left: 1.75rem;
      border-left: 1px solid var(--rule);
    }
  }
  .ap-slide-pri > .ap-ask + .ap-ask {
    margin-top: 1.25rem;
  }
  .ap-restem[data-ap-stem] {
    max-height: 9.5rem;
    overflow: hidden;
    mask-image: linear-gradient(var(--paper) 60%, transparent);
  }
  .ap-restem[data-ap-stem][data-shown] {
    max-height: none;
    mask-image: none;
  }
  @container slide (width >= 54rem) {
    .ap-slide .ap-restem[data-ap-stem] {
      max-height: none;
      mask-image: none;
    }
    .ap-slide .ap-restem-more {
      display: none;
    }
  }
  .ap-sig {
    display: block;
    margin: 0.75rem 0;
    padding: 0.5rem 0 0.5rem 0.875rem;
    border-left: 1px solid var(--rule);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .ap-sig[data-key] {
    border-left: 2px solid var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 5%, var(--paper));
    }
  }
  .ap-sig-n {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }
  .ap-sig[data-loose] {
    margin-top: 1.125rem;
  }
  .ap-restem-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem 0;
    border: 0;
    background: none;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
  }
  .ap-restem-more:hover {
    color: var(--mark);
  }
  .ap-restem-more svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.15s var(--ease-out, ease);
  }
  .ap-restem-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  @container slide (width < 54rem) {
    .ap-restem[data-ap-stem]:not([data-shown]) svg {
      display: none;
    }
  }
  .ap-slide .ap-restem svg {
    max-height: 16rem;
    margin-inline: auto;
  }
  .ap-ask {
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--rule);
  }
  .ap-ask-t {
    margin: 0;
    font: 500 var(--t-body) / 1.5 var(--font-display);
    color: var(--ink);
  }
  .ap-ask .ap-cands, .ap-ask .ap-blur {
    margin-top: 0.875rem;
  }
  .ap-slide-pri > .ap-ask:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ap-hint {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-md);
    background: none;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
  }
  .ap-hint[data-shown] {
    border-style: solid;
    border-color: var(--rule);
    cursor: default;
  }
  .ap-hint .ap-blur-val {
    display: inline;
  }
  .ap-hint-k {
    margin-right: 0.5rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-lockbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0.5625rem 0.75rem;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-md);
    font: 400 var(--t-xs) / 1.4 var(--font-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-lockbar-skip {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
  .ap-lockbar-skip:hover {
    color: var(--mark);
  }
  .ap-reveal {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.5rem;
  }
  .ap-reveal-btn {
    padding: 0;
    border: 0;
    background: none;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .ap-reveal-btn:hover {
    color: var(--mark);
  }
  .ap-ledger-grid {
    display: grid;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .ap-ledger-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
    padding: 0.5625rem 0.75rem;
    border-top: 1px solid var(--rule);
  }
  .ap-ledger-cell:first-child {
    border-top: 0;
  }
  .ap-ledger-v {
    font-size: var(--t-xs);
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-sm);
    color: var(--ink-3);
  }
  .ap-ledger-cell[data-used] {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
  }
  .ap-ledger-cell[data-used] .ap-ledger-v {
    color: var(--ink);
  }
  .ap-ledger + * {
    margin-top: 1.25rem;
  }
  .ap-ledger-from {
    flex: none;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
  }
  .ap-ledger-from:hover {
    color: var(--mark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .ap-ledger-cell[data-final] {
    display: block;
    border-top: 1px solid var(--rule);
    background: var(--h-good);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--h-good) 8%, var(--paper));
    }
    box-shadow: inset 2px 0 0 var(--h-good);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink);
  }
  .ap-ledger-cell[data-used] .ap-ledger-from {
    color: var(--mark);
  }
  .ap-slide .opt-item > .opt {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .ap-slide .opt-item > .opt > .opt-mark {
    grid-column: 3;
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
  }
  .ap-slide .opt-item:has(> .opt[aria-pressed="true"]) {
    box-shadow: inset 0 0 0 1px var(--edge);
  }
  .ap-slide .opt-item > .opt > .opt-mark {
    white-space: normal;
  }
  @container doc (width < 26rem) {
    .ap-slide .opt-item > .opt {
      grid-template-columns: 1.5rem minmax(0, 1fr);
    }
    .ap-slide .opt-item > .opt > .opt-mark {
      grid-column: 2;
      margin-top: 0.375rem;
      text-align: left;
    }
  }
  .ap-opt-l {
    margin: 0.6875rem 0 0.1875rem;
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-opt-l:first-child {
    margin-top: 0;
  }
  .ap-slide .case-rows-row > span > span {
    display: block;
  }
  .ap-edge-l {
    margin: 0 0 0.5rem;
  }
  .ap-edge-n {
    font-weight: 500;
  }
  .ap-edge-w {
    margin-left: auto;
    padding-left: 0.75rem;
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-align: right;
    white-space: nowrap;
  }
  .ap-edges .acc-item[data-break] .ap-edge-n {
    color: var(--h-bad);
  }
  .ap-pager {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem 1.25rem;
    border-top: 1px solid var(--rule);
    background: var(--paper);
  }
  .ap-pager-btn {
    background: var(--mark);
    color: var(--paper);
    border-color: var(--mark);
  }
  .ap-pager-btn:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 84%, black);
    }
    color: var(--paper);
  }
  .ap-pager-btn[disabled] {
    background: var(--rule-2);
    border-color: var(--rule-2);
  }
  .ap-pager-btn svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .ap-pips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  .ap-pip-run {
    display: flex;
    flex: var(--n, 1) 1 auto;
    gap: 0.1875rem;
    min-width: 0;
  }
  .ap-pip {
    position: relative;
    flex: 1 1 0;
    min-width: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .ap-pip > i {
    display: block;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--rule-2);
  }
  .ap-pip[data-state="done"] > i {
    background: var(--ink-3);
  }
  .ap-pip[data-state="now"] > i {
    background: var(--mark);
  }
  .ap-pip-l {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 0.25rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .ap-pip-run:first-child .ap-pip:first-child .ap-pip-l {
    left: 0;
    transform: none;
  }
  .ap-pip-run:last-child .ap-pip:last-child .ap-pip-l {
    right: 0;
    left: auto;
    transform: none;
  }
  .ap-pip[data-state="now"] .ap-pip-l {
    color: var(--mark);
  }
  .ap-pips {
    container-type: inline-size;
    container-name: pips;
  }
  @container pips (width < 24rem) {
    .ap-pip-l {
      display: none;
    }
    .ap-pip[data-state="now"] .ap-pip-l {
      display: block;
    }
  }
  .ap-deck-fig .wg-reason {
    display: none;
  }
  .ap-deck-fig .wg-head {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
  }
  .ap-deck-fig .wg-head > :not(.wg-reset) {
    display: none;
  }
  .ap-deck-fig .wg[data-max] {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-deck-fig .wg[data-max] > .wg-figure {
    grid-column: 1;
    border-left: 0;
  }
  .ap-deck-fig .wg {
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .ap-deck-fig .wg-figure {
    display: block;
    height: 100%;
  }
  .ap-deck-fig .wg-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .ap-deck-fig {
    --wg-stage-cap: 44vh;
  }
  .ap-deck-fig .wg-stage {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-height: min(calc(100cqw / var(--stage-ar, 2)), var(--wg-stage-cap));
    max-height: min(calc(100cqw / var(--stage-ar, 2)), var(--wg-stage-cap));
    padding: 0.875rem 1rem 1.125rem;
    background: var(--paper);
    box-shadow: none;
    overflow: visible;
  }
  .ap-deck-fig .wg-stage > svg {
    width: 100%;
    height: 100%;
    max-height: none;
    min-width: 0;
  }
  @container apfig (width >= 48rem) {
    .ap-deck-fig .wg-figure {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }
    .ap-deck-fig .wg-main {
      grid-area: 1 / 1;
    }
    .ap-deck-fig .wg-side {
      grid-area: 1 / 2;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      border-top: 0;
      border-left: 1px solid var(--rule);
    }
    .ap-deck-fig .wg-main .wg-row {
      flex-wrap: nowrap;
    }
    .ap-deck-fig .wg-main .wg-key {
      width: 4.5rem;
    }
    .ap-deck-fig .wg-main .wgr {
      width: 100%;
    }
  }
  @container wg (width >= 62rem) {
    .ap-deck-fig .wg-main .wg-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.625rem 1.5rem;
    }
  }
  :is(.ap-deck-fig, .ap-deck-flow, .wg-side, .ap-slide .katex-display, .ap-slide .tablewrap) {
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  :is(.ap-deck-fig, .ap-deck-flow, .wg-side, .ap-slide .katex-display, .ap-slide .tablewrap)::-webkit-scrollbar {
    width: 0.375rem;
    height: 0.375rem;
  }
  :is(.ap-deck-fig, .ap-deck-flow, .wg-side, .ap-slide .katex-display, .ap-slide .tablewrap)::-webkit-scrollbar-track {
    background: transparent;
  }
  :is(.ap-deck-fig, .ap-deck-flow, .wg-side, .ap-slide .katex-display, .ap-slide .tablewrap)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--rule-2);
  }
  .ap-deck-fig .wg-side .wg-readout {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .ap-deck-fig .wg-side .wg-readout > .wg-cell:last-child {
    box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule), 1px 0 0 var(--rule);
  }
  .ap-deck-fig .wg-side {
    container-type: inline-size;
  }
  .ap-deck-fig .wg-bar, .ap-deck-fig .wg-meter-legend {
    grid-column: 1 / -1;
  }
  .ap-deck[data-mode="solution"] .ap-pager {
    display: none;
  }
  .ap-step-n {
    display: none;
  }
  .ap-deck[data-mode="solution"] .ap-step-main {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }
  .ap-deck[data-mode="solution"] .ap-step-main > :not(.ap-step-n) {
    grid-column: 2;
  }
  .ap-deck[data-mode="solution"] .ap-step-n {
    display: block;
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.375rem;
  }
  .ap-deck[data-mode="solution"] .ap-slide {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-deck[data-mode="solution"] .ap-slide-sec {
    padding-left: 0;
    border-left: 0;
  }
  .ap-deck[data-mode="solution"] .ap-deck-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .ap-deck[data-mode="solution"] .ap-slide[data-kind="answer"] {
    order: -1;
  }
  .ap-deck[data-mode="solution"] .ap-slide:not([hidden]) {
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
  }
  .ap-deck[data-mode="solution"] .ap-slide[data-kind="answer"], .ap-deck[data-mode="solution"]:not(:has(.ap-slide[data-kind="answer"])) .ap-slide[data-role="step:0"] {
    border-top: 0;
    padding-top: 0;
  }
}
@layer pages {
  .cslide {
    --cs-pad-i: 1.5rem;
    --cs-pad-b: 1.5rem;
    --cs-strip-h: 3.25rem;
    --cs-canvas-max: 68rem;
    --cs-canvas-h: min(58vh, 34rem);
    --cs-title: 1.25rem;
    max-width: var(--w-doc);
    margin-inline: auto;
    padding-bottom: 2.5rem;
    background: var(--paper);
    color: var(--ink);
  }
  .cslide-read, .cslide-rig {
    display: contents;
  }
  .cslide-head, .cslide-relation, .cslide-argument, .cslide-foot, .cslide-strip, .cslide-canvas, .cslide-controls, .cslide-data {
    padding-inline: var(--cs-pad-i);
  }
  .cslide-head {
    padding-block: var(--cs-pad-b) 1rem;
  }
  .cslide-title {
    margin: 0.5rem 0 0;
    font: 500 var(--cs-title) / var(--lh-tight) var(--font-display);
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .cslide-head .lede {
    margin-top: 0.625rem;
  }
  .cslide-strip {
    position: sticky;
    top: var(--cs-sticky, 0);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--cs-strip-h);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
  }
  .cslide-strip .qstrip {
    padding-block: 0;
  }
  .cslide-rule {
    flex: none;
    align-self: center;
    width: 1px;
    height: var(--cs-rule-h, 1.125rem);
    background: var(--rule);
  }
  .cslide-end {
    margin-left: auto;
    flex: none;
  }
  .cslide-strip-title {
    min-width: 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (width < 60rem) {
    .cslide-strip .chip {
      display: none;
    }
  }
  @media (width < 34rem) {
    .cslide-strip {
      gap: 0.75rem;
    }
    .cslide-strip .eyebrow, .cslide-strip .cslide-rule {
      display: none;
    }
  }
  .cslide-up {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    font: 400 var(--t-label) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
  }
  .cslide-up:hover {
    color: var(--ink);
  }
  .cslide-up svg {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }
  @media (width < 34rem) {
    .cslide-up span {
      display: none;
    }
  }
  .cslide-relation {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    min-height: 3.5rem;
    padding-block: 0.625rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .cslide-relation .panel {
    display: contents;
  }
  .cslide-relation .panel-head {
    display: none;
  }
  .cslide-relation .wg-expr {
    flex: none;
    padding: 0;
    font-size: 1.375rem;
  }
  .cslide-relation {
    justify-content: center;
  }
  .cslide-relation .wg-readout {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: center;
    gap: 0.25rem 1.125rem;
  }
  .cslide-relation .wg-cell {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
  }
  .cslide-relation .wg-cell-v {
    margin-top: 0;
    font-size: var(--t-micro);
  }
  .cslide [data-sym] {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
  }
  .cslide-argument {
    container-type: inline-size;
    padding-block: 1.375rem 0;
    max-width: 64rem;
  }
  .cslide-argument > :first-child {
    margin-top: 0;
  }
  .cslide-pair {
    display: grid;
    gap: 1.5rem;
  }
  @container (width >= 44rem) {
    .cslide-pair {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
  }
  .cslide-claim, .cslide-ground {
    padding: 1.25rem 1.375rem;
    border-radius: var(--r-lg);
    background: var(--hue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue) var(--tint), var(--paper));
    }
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink);
  }
  .cslide-claim {
    --hue: var(--ink);
  }
  .cslide-ground {
    --hue: var(--h-why);
  }
  .cslide-claim > :first-child, .cslide-ground > :first-child {
    margin-top: 0;
  }
  .cslide-claim .callout-label, .cslide-ground .callout-label {
    margin-bottom: 0.5rem;
  }
  .cslide-claim .callout-label {
    color: var(--ink-3);
  }
  .cslide-claim .key-insight {
    margin-top: 1.125rem;
  }
  .cslide-ground ul, .cslide-read .callout ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
  }
  .cslide-ground li, .cslide-read .callout li {
    position: relative;
    padding-left: 0.9375rem;
  }
  .cslide-ground li::before, .cslide-read .callout li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: 50%;
    background: var(--hue, var(--ink-3));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hue, var(--ink-3)) 55%, var(--ink-3));
    }
  }
  .cslide-tour {
    margin-top: 1.75rem;
  }
  .cslide-tour-ico {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    transition: transform 0.15s ease;
  }
  .cslide-tour-btn[aria-expanded="true"] .cslide-tour-ico {
    transform: rotate(180deg);
  }
  .cslide-tour-n {
    margin-left: 0.4375rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .cslide-tour .rows {
    margin-top: 1rem;
  }
  .cslide-tour .rows .row:last-child {
    border-bottom: 1px solid var(--rule);
  }
  @container (width >= 44rem) {
    .cslide-tour .rows {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2.5rem;
    }
    .cslide-tour .rows .row:nth-child(-n + 2) {
      border-top: 1px solid var(--rule);
    }
  }
  @media (width < 48rem) {
    .cslide-tour .row-d {
      display: block;
      overflow: visible;
    }
  }
  .cslide-canvas {
    display: flex;
    justify-content: center;
    padding-block: 1.5rem;
  }
  .cslide-fig {
    position: relative;
    inline-size: min(100%, var(--cs-canvas-max), calc(var(--cs-canvas-h) * var(--stage-ar, 1.4)));
    aspect-ratio: var(--stage-ar, 1.4);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--cs-stage-ground, var(--ink));
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--cs-stage-ground, color-mix(in srgb, var(--ink) 2%, var(--paper)));
    }
    overflow: hidden;
  }
  .cslide-fig > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cslide-fig {
    --cs-label-min: 13px;
  }
  .cslide-fig .wg-aside {
    font-size: max(calc(11px / var(--stage-zoom, 1)), calc(var(--stage-upx, 1) * var(--cs-label-min)));
  }
  .cslide-fig .wg-glyph {
    font-size: max(calc(15px / var(--stage-zoom, 1)), calc(var(--stage-upx, 1) * var(--cs-label-min) * 1.364));
  }
  .cslide-fig > .wg-caption {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 1;
    padding: 0.6875rem 0.875rem;
    background: none;
  }
  .cslide-fig .wg-caption em {
    font-style: normal;
    color: var(--mark);
  }
  .cslide-controls {
    --cs-rule-h: 2.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
    padding-block: 0.875rem;
    border-top: 1px solid var(--rule);
  }
  .cslide-ctl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
  }
  .cslide-ctl[data-stack] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    flex: 1 1 16rem;
    max-width: 26rem;
  }
  .cslide-ctl-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.875rem;
  }
  .cslide-ctl-v {
    font: 400 var(--t-xs) / 1 var(--font-label);
    color: var(--ink);
    white-space: nowrap;
  }
  .cslide-data {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-block: 1.375rem;
    border-top: 1px solid var(--rule);
  }
  .cslide-ledger {
    flex: 1 1 20rem;
    min-width: 0;
  }
  .cslide-graph {
    flex: 1 1 17rem;
    min-width: 0;
  }
  .cslide-ledger .wg-readout {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
  .cslide-ledger .wg-cell {
    border-top: 1px solid var(--rule);
  }
  .cslide-ledger .wg-cell:nth-child(-n + 2) {
    border-top: 0;
  }
  .cslide-ledger .wg-cell:nth-child(odd) {
    border-left: 0;
  }
  .cslide-graph .wg-panel {
    border-left: 0;
    padding: 0.625rem 0.875rem 0.75rem;
  }
  .cslide-graph svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cslide-meta {
    margin-left: auto;
  }
  .cslide-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 1rem;
    border-top: 1px solid var(--rule);
  }
  .cslide-foot .icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  @media (width >= 80rem) and (height >= 44rem) {
    .cslide:where(:not(.cpg *), [data-max]) {
      --cs-read-w: clamp(28rem, 32vw, 38.75rem);
      --cs-pad-i: 2.5rem;
      --cs-pad-b: 2.375rem;
      --cs-strip-h: 3.75rem;
      --cs-data-h: 14.5rem;
      display: grid;
      grid-template-columns: var(--cs-read-w) minmax(0, 1fr);
      grid-template-rows: var(--cs-strip-h) minmax(0, 1fr) auto;
      max-width: none;
      margin-inline: 0;
      height: 100dvh;
      padding-bottom: 0;
      overflow: hidden;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-read {
      grid-area: 1 / 1 / 3 / 2;
      display: flex;
      flex-direction: column;
      min-width: 0;
      border-right: 1px solid var(--rule);
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-rig {
      grid-area: 2 / 2 / 4 / 3;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-strip {
      grid-area: 1 / 2;
      position: static;
      border-top: 0;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-foot {
      grid-area: 3 / 1;
      border-right: 1px solid var(--rule);
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-head {
      padding-block: var(--cs-pad-b) 0;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation {
      display: block;
      min-height: 0;
      padding-block: 1.375rem 0;
      border: 0;
      background: none;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .panel {
      display: block;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .panel-head {
      display: flex;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .wg-expr {
      font-size: 1.5rem;
      padding-block: 1.25rem 1.125rem;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .wg-readout {
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-left: 0;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .wg-cell {
      display: block;
      padding: 0.625rem 0.875rem;
      border-left: 1px solid var(--rule);
      text-align: center;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .wg-cell:first-child {
      border-left: 0;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-relation .wg-cell-v {
      margin-top: 0.3125rem;
      font-size: var(--t-sm);
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-argument {
      flex: 1;
      min-height: 0;
      max-width: none;
      overflow: hidden auto;
      padding-block: 1.375rem 1rem;
      overscroll-behavior: contain;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-canvas {
      flex: 1;
      min-height: 0;
      align-items: center;
      container-type: size;
      padding-block: 1.375rem;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-fig {
      inline-size: min(100%, var(--cs-canvas-max), calc(100cqh * var(--stage-ar, 1.4)));
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-controls {
      min-height: 6rem;
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-data {
      flex-wrap: nowrap;
      gap: 1.75rem;
      height: var(--cs-data-h);
    }
    .cslide:where(:not(.cpg *), [data-max]) .cslide-graph {
      flex: 0 0 29.375rem;
    }
  }
  .cpg {
    --reader-font-size: 1rem;
  }
  .cpg .cslide {
    max-width: none;
    --cs-canvas-max: 84rem;
    --cs-canvas-h: min(52vh, 30rem);
    --cs-sticky: var(--sticky-top);
  }
  .cpg > playground-deck {
    display: block;
  }
  .cpg .cslide:not([data-max]) .cslide-head .lede {
    max-width: var(--w-doc);
  }
  .cpg .cslide-strip {
    border-top: 0;
  }
  .cpg .cslide-data {
    border-top: 0;
  }
  .cpg .cslide-strip .chip {
    display: none;
  }
  .cslide[data-max] {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    max-width: none;
    border-radius: 0;
    background: var(--paper);
    --cs-sticky: 0px;
    overflow: auto;
  }
  @media (width >= 80rem) and (height >= 44rem) {
    .cslide[data-max] {
      overflow: hidden;
    }
  }
  .cslide-max {
    margin-left: auto;
    flex: none;
    border: 1px solid var(--rule);
    color: var(--ink-3);
  }
  .cslide-max:hover {
    border-color: var(--rule-2);
    background: var(--paper-2);
    color: var(--ink);
  }
  .cslide-max svg {
    width: 1rem;
    height: 1rem;
  }
  .cslide-max [data-out] {
    display: none;
  }
  .cslide[data-max] .cslide-max [data-out] {
    display: block;
  }
  .cslide[data-max] .cslide-max [data-in] {
    display: none;
  }
  @media (width < 34rem) {
    .cslide-strip .cslide-max {
      display: inline-flex;
    }
  }
  .cslide .wg-cell-k {
    font-size: var(--t-micro);
  }
  .cslide .wg-unit {
    font-size: var(--t-micro);
  }
  .cslide .wg-cell-k [data-sym] {
    font-size: var(--t-sm);
  }
}
@layer pages {
  .pgo-tally {
    margin: 0.4375rem 0 0;
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .pgo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }
  @media (width >= 80rem) {
    .pgo-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .pgo-list > li {
    display: grid;
  }
  .pgo-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }
  .pgo-card .panel-head {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, transparent);
    }
  }
  .pgo-card:hover, .pgo-card:focus-visible {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) var(--tint), var(--paper));
    }
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 30%, var(--rule));
    }
  }
  .pgo-count {
    margin-left: auto;
    padding-left: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .pgo-role .katex {
    font-size: var(--t-sm);
    letter-spacing: 0;
    text-transform: none;
  }
  .pgo-n {
    flex: none;
    margin-right: 0.25rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .pgo-name {
    display: block;
    min-width: 0;
    font-size: var(--t-base);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
  }
  .pgo-sub {
    display: block;
    max-width: var(--w-measure);
    margin-top: 0.4375rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .pgo-facts {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin-top: 0.75rem;
  }
  .pgo-lead {
    font: 400 var(--t-micro) / 1.55 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .pgo-fact {
    min-width: 0;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-2);
  }
  @media (width < 34rem) {
    .pgo-facts {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.125rem;
    }
    .pgo-lead:not(:first-child) {
      margin-top: 0.5rem;
    }
  }
}
@layer pages {
  .rs-page {
    --rs-row: 0.5rem;
  }
  .rs, .rs-md {
    --sg-drive: var(--legend-1, #4f46c4);
  }
  .rs-tally {
    padding-top: 0.4375rem;
    font: 400 var(--t-micro) / 1.5 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .rs-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    margin-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--rule);
  }
  .rs-ctl-l {
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-bar {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    margin-top: 1rem;
    background: var(--paper);
  }
  @container doc (width >= 34rem) {
    .rs-bar .tabs {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }
  .rs-lede {
    padding: 0.875rem 0 0.25rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-panel {
    scroll-margin-top: 5rem;
  }
  .rs-b {
    margin-top: 2rem;
    scroll-margin-top: 5rem;
  }
  .rs-b-t {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    padding-bottom: 0.875rem;
    font: 500 var(--t-h3) / 1.35 var(--font-display);
    color: var(--ink);
  }
  .rs-b-t::before {
    content: "";
    order: 1;
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule);
    transform: translateY(-0.3em);
  }
  .rs-lab, .rs-val {
    min-width: 0;
    text-wrap: pretty;
  }
  .rs-b-n, .rs-b-key, .rs-b-t > .rs-door {
    order: 2;
  }
  .rs-b-n {
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .rs-b-n::before {
    content: "· ";
  }
  .rs-b-key {
    margin-left: auto;
    padding-right: 1.75rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-b-note {
    padding-bottom: 0.5rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .rs-tbl {
    --tbl-gutter: 1.125rem;
    table-layout: auto;
  }
  .rs-tbl :is(th, td):first-child {
    min-width: 7.5rem;
  }
  .rs-tbl :is(th, td) {
    padding-top: var(--rs-row);
    padding-bottom: var(--rs-row);
  }
  .rs-tbl th {
    padding-bottom: 0.625rem;
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-tbl td[data-quoted] {
    color: var(--ink);
    min-width: 9rem;
    max-width: 16rem;
  }
  .rs-tbl th[data-quoted] {
    color: var(--ink);
  }
  @container doc (width < 34rem) {
    .rs-tbl, .rs-tbl tbody, .rs-tbl tr, .rs-tbl td {
      display: block;
    }
    .rs-tbl thead {
      display: none;
    }
    .rs-tbl tr {
      position: relative;
      padding: 0.75rem 2rem 0.75rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .rs-tbl tbody tr:last-child {
      border-bottom: 0;
    }
    .rs-tbl td {
      min-width: 0;
      max-width: none;
      padding: 0;
      border-bottom: 0;
    }
    .rs-tbl td:first-child {
      font-weight: 500;
      color: var(--ink);
    }
    .rs-tbl td[data-quoted] {
      padding-top: 0.25rem;
    }
    .rs-tbl td:not(:first-child, [data-quoted])::before {
      content: attr(data-label);
      display: block;
      padding-top: 0.4375rem;
      font: 400 var(--t-nano) / 1.5 var(--font-label);
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .rs-door-c {
      position: absolute;
      top: 0.625rem;
      right: 0;
      width: auto;
    }
  }
  .rs-door-h, .rs-door-c {
    width: 1.75rem;
    padding-right: 0;
    text-align: right;
  }
  .rs-door {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: -0.125rem;
    border-radius: var(--r-sm);
    color: var(--ink-3);
    opacity: 0.55;
    transition: opacity 0.12s ease, color 0.12s ease;
  }
  .rs-door-ico {
    width: 0.875rem;
    height: 0.875rem;
  }
  .rs-tbl tr:hover .rs-door, .rs-trap:hover .rs-door, .rs-rule:hover .rs-door, .rs-var:hover .rs-door, .rs-door:focus-visible {
    color: var(--mark);
    opacity: 1;
  }
  .rs-tbl tbody tr, .rs-trap, .rs-rule, .rs-var {
    cursor: pointer;
  }
  .rs-door:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 1px;
  }
  .rs-hero {
    margin-top: 1.25rem;
  }
  .rs-hero .rs-b-t {
    margin-bottom: 0.625rem;
  }
  .rs-card {
    margin-top: 0;
  }
  @container doc (width >= 40rem) {
    .rs-card {
      display: grid;
      grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
      align-items: stretch;
    }
    .rs-fig {
      border-bottom: 0;
      border-right: 1px solid var(--rule);
    }
  }
  .rs-fig {
    padding: 1rem 1rem 0.875rem;
    display: grid;
    align-content: center;
  }
  .rs-fig figcaption {
    margin-top: 0.625rem;
    font-size: var(--t-nano);
    line-height: 1.55;
  }
  .rs-when {
    display: grid;
    gap: 0.1875rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-when .eyebrow {
    font-size: var(--t-nano);
  }
  .rs-trap-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-2);
  }
  .rs-trap {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) 2.25rem 1.75rem;
    align-items: start;
    column-gap: 1.125rem;
    padding: calc(var(--rs-row) + 0.125rem) 0;
    border-bottom: 1px solid var(--rule);
  }
  .rs-trap-pair {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }
  .rs .trap-m, .rs .trap-f {
    width: max-content;
    max-width: 100%;
    padding: 0.125rem 0.625rem 0.125rem 1.375rem;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    line-height: 1.45;
  }
  .rs .trap-mk {
    left: 0.4375rem;
    top: 0.125rem;
    font-size: 0.8em;
    line-height: 1.75;
  }
  .rs-trap-why {
    padding-top: 0.1875rem;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-trap-seen {
    padding-top: 0.1875rem;
    font: 400 var(--t-sm) / 1.55 var(--font-label);
    color: var(--ink-3);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .rs-trap-seen::after {
    content: "×";
    margin-left: 0.0625rem;
    font-size: 0.85em;
    color: var(--ink-3);
  }
  .rs-trap .rs-door {
    margin-top: 0.1875rem;
  }
  @container doc (width < 40rem) {
    .rs-trap {
      grid-template-columns: minmax(0, 1fr) 2.25rem 1.75rem;
    }
    .rs-trap-pair {
      grid-column: 1 / -1;
    }
    .rs-trap-why {
      grid-column: 1;
    }
  }
  .rs-rule-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-2);
  }
  .rs-rule {
    display: grid;
    row-gap: 0.3125rem;
    padding: calc(var(--rs-row) + 0.25rem) 0;
    border-bottom: 1px solid var(--rule);
  }
  .rs-rule-t {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .rs-rule-t .rs-door {
    margin-left: auto;
  }
  .rs-rule-r {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-rule-c {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.625rem;
    padding-top: 0.125rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-3);
    text-wrap: pretty;
  }
  .rs-rule-c .eyebrow {
    font-size: var(--t-nano);
    padding-top: 0.1875rem;
  }
  @container doc (width < 34rem) {
    .rs-rule-c {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.125rem;
    }
  }
  .rs-rungs {
    display: flex;
    flex-direction: column;
  }
  .rs-rail-n {
    margin-left: auto;
    padding-left: 0.375rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    color: var(--ink-3);
  }
  .rs-page[data-show="relations"] .rs-b:not([data-kind="relations"]), .rs-page[data-show="traps"] .rs-b:not([data-kind="traps"]), .rs-page[data-show="rules"] .rs-b:not([data-kind="rules"]) {
    display: none;
  }
  .rs-page[data-show="relations"] .rs-panel:not(:has(.rs-b[data-kind="relations"])) .rs-lede, .rs-page[data-show="traps"] .rs-panel:not(:has(.rs-b[data-kind="traps"])) .rs-lede, .rs-page[data-show="rules"] .rs-panel:not(:has(.rs-b[data-kind="rules"])) .rs-lede {
    opacity: 0.55;
  }
  .rs-page[data-show="relations"] .rail-rung:not([data-kind="relations"]), .rs-page[data-show="traps"] .rail-rung:not([data-kind="traps"]), .rs-page[data-show="rules"] .rail-rung:not([data-kind="rules"]) {
    display: none;
  }
  @media print {
    .rs-filters, .rs-door-h, .rs-door-c, .rs-door, .bench-note, .bench-h {
      display: none;
    }
    .rs-bar {
      display: none;
    }
    .rs-panel[hidden] {
      display: block !important;
    }
    .rs-panel {
      break-before: page;
    }
    .rs-panel:first-of-type {
      break-before: auto;
    }
    .rs-b {
      break-inside: avoid;
    }
    .rs-trap, .rs-rule {
      break-inside: avoid;
    }
  }
  .rs-md {
    padding: 1.25rem 1.375rem 1.5rem;
    container-type: inline-size;
    container-name: doc;
  }
  .rs-md-fig {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .rs-md-fig .sg-fig {
    display: block;
    width: 100%;
    height: auto;
    max-width: calc(var(--fig-vb, 100%) * 1.1);
    margin-inline: auto;
  }
  .rs-md-claim {
    margin: 0;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink);
    text-wrap: pretty;
  }
  .rs-md-f {
    margin: 0.875rem 0 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    text-align: center;
    overflow-x: auto;
  }
  .rs-md-s {
    margin-top: 1.125rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rule);
  }
  .rs-md > .rs-md-s:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .rs-md-s .eyebrow {
    display: block;
    margin-bottom: 0.5rem;
  }
  .rs-md-s p {
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-md-claim + .rs-md-s {
    margin-top: 1rem;
  }
  .rs-md-l {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rs-md-l li {
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-md-l li:last-child {
    border-bottom: 0;
  }
  .rs-md-sym {
    float: right;
    margin-left: 0.75rem;
    color: var(--ink);
  }
  .rs-md-l li[data-here] {
    margin-inline: -0.625rem;
    padding-inline: 0.625rem;
    border-radius: var(--r-sm);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, transparent);
    }
    color: var(--ink);
  }
  .rs-md-a {
    display: grid;
    grid-template-columns: minmax(2rem, max-content) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .rs-md-a:last-child {
    border-bottom: 0;
  }
  .rs-md-a-s {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink);
  }
  .rs-md-a-m {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
    min-width: 0;
  }
  .rs-md-rs {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  @container doc (width >= 34rem) {
    .rs-md-rs {
      grid-template-columns: 1fr 1fr;
    }
  }
  .rs-md-r {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
  }
  .rs-md-r-t {
    margin: 0.375rem 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-md-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.375rem;
    border-top: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .rs-md-ref {
    margin: 0;
    min-width: 0;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--ink-3);
  }
  .rs-md[data-slide] {
    animation: rs-slide 0.16s ease-out;
  }
  .rs-md[data-slide="prev"] {
    animation-name: rs-slide-back;
  }
  @keyframes rs-slide {
    from {
      opacity: 0;
      transform: translateX(1.25rem);
    }
  }
  @keyframes rs-slide-back {
    from {
      opacity: 0;
      transform: translateX(-1.25rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rs-md[data-slide] {
      animation: none;
    }
  }
  .rs-md-nav {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .rs-md-step {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }
  .rs-md-step:hover:not(:disabled) {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    }
    color: var(--ink);
  }
  .rs-md-step:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .rs-md-step:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 1px;
  }
  .rs-md-at {
    min-width: 3.25rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .rs-md-go {
    margin-left: auto;
    flex: none;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mark);
    white-space: nowrap;
  }
  .rs-md-go::after {
    content: " →";
  }
  .rs-cards {
    display: grid;
    gap: 0.875rem;
    margin-top: 1rem;
  }
  @container doc (width >= 40rem) {
    .rs-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .rs-c {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
  }
  .rs-c-h {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
  }
  .rs-c-ix {
    font: 400 var(--t-nano) / 1 var(--font-label);
    color: var(--ink-3);
  }
  .rs-c-k {
    margin-left: auto;
    flex: none;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-c-r {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rule);
  }
  .rs-c-r:last-child {
    border-bottom: 0;
  }
  .rs-c-n {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--ink-3);
  }
  .rs-c-n .rs-door {
    margin-left: auto;
  }
  .rs-c-q {
    padding: 0.25rem 0 0.3125rem;
    color: var(--ink);
    overflow-x: auto;
  }
  .rs-c-w {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl, .rs-page[data-conditions="hidden"] .rs-tbl tbody, .rs-page[data-conditions="hidden"] .rs-tbl tr, .rs-page[data-conditions="hidden"] .rs-tbl td {
    display: block;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl thead {
    display: none;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    column-gap: 1.75rem;
    align-items: start;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.375rem;
    align-items: baseline;
    padding: 0.5rem 0 0.5625rem;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl td {
    min-width: 0;
    max-width: none;
    padding: 0;
    border-bottom: 0;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl td:first-child {
    grid-column: 1;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ink-3);
  }
  .rs-page[data-conditions="hidden"] .rs-door-c {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    text-align: right;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl td[data-quoted] {
    grid-column: 1 / -1;
    padding-top: 0.125rem;
    color: var(--ink);
  }
  .rs-page[data-conditions="hidden"] .rs-tbl td[data-label]:not(:first-child, [data-quoted]) {
    grid-column: 1 / -1;
    height: 0;
    overflow: hidden;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl tr[data-open] td[data-label]:not(:first-child, [data-quoted]) {
    height: auto;
    padding-top: 0.375rem;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl td:first-child::after {
    content: "⌄";
    margin-left: 0.4375rem;
    font-size: 1.1em;
    color: var(--ink-3);
  }
  .rs-page[data-conditions="hidden"] .rs-tbl tr[data-open] td:first-child::after {
    content: "⌃";
    color: var(--mark);
  }
  .rs-page[data-conditions="hidden"] .rs-b[data-kind="relations"]:not(.rs-hero) .rs-b-t::after {
    content: "conditions hidden";
    order: 3;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .rs-page[data-conditions="hidden"] .rs-trap-why {
    height: 0;
    overflow: hidden;
    padding-top: 0;
  }
  .rs-page[data-conditions="hidden"] .rs-trap[data-open] .rs-trap-why {
    height: auto;
    padding-top: 0.1875rem;
  }
  .rs-switch {
    width: auto;
    gap: 0.4375rem;
    padding: 0.4375rem 0;
    font-size: var(--t-xs);
  }
  .rs-switch .rail-switch-track {
    margin-left: 0;
  }
  .rs-deck {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1.125rem;
    padding: 0.625rem 1.125rem;
    border-bottom: 1px solid var(--rule);
  }
  .rs-deck-g {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }
  .rs-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-2);
    min-width: 0;
  }
  .rs-seg-b {
    padding: 0.3125rem 0.625rem;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: 400 var(--t-xs) / 1 var(--font-body);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
  }
  .rs-seg-b:hover {
    color: var(--ink);
  }
  .rs-seg-b:disabled {
    color: var(--ink-3);
    opacity: 0.55;
    cursor: default;
  }
  .rs-seg-b[aria-pressed="true"] {
    background: var(--paper-over);
    color: var(--mark);
    font-weight: 500;
  }
  .rs-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .rs-stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2.5rem;
    container-type: inline-size;
    container-name: doc;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .rs-drawer {
    flex: 0 0 clamp(22.5rem, 30%, 28.75rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--rule);
    background: var(--paper-over);
  }
  .rs-drawer[hidden] {
    display: none;
  }
  .rs-drawer-top {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.125rem 0.75rem;
    padding: 0.875rem 1.125rem 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .rs-drawer-top .mmd-kicker, .rs-drawer-top .rs-md-ref {
    grid-column: 1;
  }
  .rs-drawer-top .mmd-kicker {
    font: 400 var(--t-nano) / 1.4 var(--font-label);
    letter-spacing: 0.1em;
    color: var(--ink-3);
  }
  .rs-drawer-top .mmd-close {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }
  .rs-drawer-t {
    margin: 0;
    font: 500 var(--t-h3) / 1.3 var(--font-display);
    color: var(--ink);
    text-wrap: pretty;
  }
  .rs-drawer .rs-md {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .rs-drawer .rs-md-foot {
    padding-inline: 1.125rem;
  }
  .rs-stage .rs-panel > .rs-lede {
    padding-top: 0;
  }
  .rs-var-g {
    margin-top: 1.25rem;
  }
  .rs-var-g-t {
    margin: 0;
    padding-bottom: 0.4375rem;
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-var-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rs-var {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.125rem;
    grid-template-areas: "name door" "tell tell";
    gap: 0.25rem 1.25rem;
    margin-inline: -0.625rem;
    padding: calc(var(--rs-row) + 0.125rem) 0.625rem;
    border-bottom: 1px solid var(--rule);
    border-radius: var(--r-sm);
  }
  .rs-var:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  @container doc (width >= 34rem) {
    .rs-var {
      grid-template-columns: 13rem minmax(0, 1fr) 1.125rem;
      grid-template-areas: "name tell door";
      align-items: start;
    }
  }
  .rs-var-shape {
    grid-area: name;
    display: grid;
    gap: 0.125rem;
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    text-wrap: pretty;
  }
  .rs-var > .rs-door {
    grid-area: door;
  }
  .rs-var-tell {
    grid-area: tell;
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .rs-md-law {
    margin: 0 0 1.125rem;
    padding: 0.875rem 1rem 1rem;
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  .rs-md-s + .rs-md-s .rs-md-law {
    margin-top: 0.25rem;
  }
  .rs-md-law .rs-md-sig {
    margin: 0 0 1rem;
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink);
    text-align: center;
  }
  .rs-md-rel {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.375rem;
  }
  .rs-md-rel li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.875rem;
  }
  .rs-md-eq {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink);
  }
  .rs-md-holds {
    font-size: var(--t-micro);
    line-height: 1.6;
    color: var(--ink-3);
  }
  .rs-md-slips {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.1875rem;
    width: 100%;
  }
  .rs-md-slips li {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--h-bad, #983e50);
  }
  .rs-md-slips li::before {
    content: "≠";
    flex: none;
    font-size: 0.9em;
    color: var(--mute);
  }
  .rs-md-steps {
    list-style: decimal outside;
    margin: 0.125rem 0 0.25rem;
    padding: 0 0 0 1.625rem;
    display: grid;
    gap: 0.3125rem;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .rs-md-steps li {
    padding-left: 0.1875rem;
  }
  .rs-md-steps li::marker {
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .rs-md-sub {
    margin-top: 0.75rem;
    font: 400 var(--t-nano) / 1.5 var(--font-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .rs-row-card > td {
    padding: 0.5rem 0 1rem;
  }
  .rs-rowcard .rs-fig[data-size="inset"] .sg-fig, .rs-rowcard .rs-fig[data-size="thumb"] .sg-fig {
    width: calc(96px * 1.875);
    max-width: 100%;
  }
  .rs-rowcard {
    margin: 0;
  }
  .rs-rowcard-n {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: 0 0 0.5rem;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .rs-rowcard-n .rs-door {
    margin-left: auto;
  }
  .rs-rowcard .fc-anatomy > :last-child {
    border-bottom: 0;
  }
  .rs-page[data-conditions="hidden"] .rs-tbl .rs-row-card {
    display: none;
  }
}
@layer pages {
  .study-panel > :first-child {
    margin-top: 0;
  }
  .study-hero-content {
    container: study-hero / inline-size;
  }
  .study-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }
  .study-hero-head > .chapter-map-pill {
    justify-self: stretch;
    margin-top: 0.375rem;
  }
  .study-hero-head > .chapter-map-pill .chapter-map-pill-name {
    flex: 1;
    text-align: left;
  }
  .study-facts {
    margin-top: 0.625rem;
  }
  .study-hero-head > .study-facts {
    margin-top: 0;
  }
  .study-hero-content > .study-go {
    margin-top: 1.25rem;
  }
  @container study-hero (width >= 28rem) {
    .study-hero-head {
      grid-template-columns: minmax(0, max-content) auto;
      grid-template-areas: "title pill" "facts facts";
      justify-content: start;
      align-items: center;
      column-gap: 1rem;
    }
    .study-hero-head > .chapter-hero-title {
      grid-area: title;
    }
    .study-hero-head > .study-facts {
      grid-area: facts;
    }
    .study-hero-head > .chapter-map-pill {
      grid-area: pill;
      justify-self: start;
      margin-top: 0;
    }
    .study-hero-head > .chapter-map-pill .chapter-map-pill-name {
      flex: none;
    }
  }
  .study-go {
    display: flex;
    min-width: 0;
    max-width: 100%;
  }
  @container study-hero (width < 28rem) {
    .study-go-btn {
      flex: 1;
    }
  }
  .study-go-btn {
    align-items: flex-start;
    max-width: 100%;
    padding-block: 0.6875rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
  }
  .study-go-btn > svg {
    flex: none;
    margin-top: 0.0625rem;
  }
  .study-go-verb {
    flex: none;
    margin-top: 0.225rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .study-go-t {
    min-width: 0;
    font-weight: 500;
    text-wrap: pretty;
  }
  .study-summary {
    margin: 0 0 1.5rem;
  }
  .study-summary > .chapter-hero-overview {
    max-width: none;
    margin-top: 0;
  }
  .study-panel .book-list-header > .chapter-section-heading {
    display: none;
  }
  .study-panel .book-list-header {
    justify-content: flex-end;
  }
  .study-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  .study-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
    margin-top: 1rem;
    font: 400 var(--t-nano) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .study-key-i {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .study-key-i::before {
    content: "";
  }
  .study-topics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
  }
  @container doc (width >= 34rem) {
    .study-topics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container doc (width >= 58rem) {
    .study-topics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .study-topic {
    position: relative;
    container: study-card / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem 1.125rem 0.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper);
    transition: border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
  }
  .study-topic:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--paper));
    }
  }
  .study-topic:has(.study-topic-t a:focus-visible) {
    outline: 2px solid var(--mark);
    outline-offset: 2px;
  }
  .study-topic > .eyebrow {
    margin: 0;
    font-size: 0.625rem;
  }
  .study-topic-t {
    margin: 0.375rem 0 0;
    font: 500 var(--t-body) / 1.3 var(--font-display);
    text-wrap: pretty;
  }
  .study-topic > .study-dots {
    margin-top: 0.75rem;
  }
  .study-topic > .study-doors {
    margin: 0.75rem 0 1rem;
  }
  @container doc (width >= 34rem) {
    .study-topic-t {
      min-height: calc(2em * 1.3);
    }
    .study-topic .study-next-t {
      min-height: calc(2em * 1.35);
    }
  }
  .study-topic-t a {
    color: var(--ink);
    text-decoration: none;
  }
  .study-topic-t a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .study-topic-t a:focus-visible {
    outline: none;
  }
  .study-topic:hover .study-topic-t a {
    color: var(--mark);
  }
  .study-topic > .study-doors, .study-topic > .study-next {
    position: relative;
    z-index: 1;
  }
  .study-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3125rem;
  }
  .study-dots > i, .study-row-rung, .study-key-i::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--st-new);
  }
  .study-key-i::before {
    width: 0.4375rem;
    height: 0.4375rem;
  }
  .study-dots > i[data-rung="learning"], .study-row-rung[data-rung="learning"], .study-key-i[data-rung="learning"]::before {
    background: var(--st-learning);
  }
  .study-dots > i[data-rung="practising"], .study-row-rung[data-rung="practising"], .study-key-i[data-rung="practising"]::before {
    background: var(--st-practising);
  }
  .study-dots > i[data-rung="mastered"], .study-row-rung[data-rung="mastered"], .study-key-i[data-rung="mastered"]::before {
    background: var(--st-mastered);
  }
  .study-dots-n {
    margin-left: 0.3125rem;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .study-doors {
    align-self: flex-start;
    gap: 0.375rem;
  }
  .study-doors .topic-action {
    padding: 0.3125rem 0.5625rem;
    background: var(--paper);
    font-size: var(--t-xs);
  }
  .study-doors .topic-action:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, var(--paper));
    }
  }
  .study-door-n {
    font: 400 var(--t-micro) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  @container study-card (width < 17.5rem) {
    .study-topic > .study-doors {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-self: stretch;
    }
    .study-doors .study-door-n {
      margin-left: auto;
    }
  }
  .study-next {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: auto 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }
  .study-next-k {
    flex: none;
    font: 400 var(--t-micro) / 1 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mark);
  }
  .study-next-t {
    flex: 1;
    min-width: 0;
    font-size: var(--t-sm);
    line-height: 1.35;
  }
  .study-next-chev {
    flex: none;
    align-self: flex-start;
    margin-top: 0.125rem;
    width: 1rem;
    height: 1rem;
    color: var(--ink-3);
  }
  a.study-next:hover .study-next-t, a.study-next:hover .study-next-chev {
    color: var(--mark);
  }
  .study-tophead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 1.25rem;
  }
  .study-tophead > .study-facts {
    margin-top: 0;
  }
  .study-tophead > .study-go {
    margin-top: 0.875rem;
  }
  .study-rows {
    display: grid;
    gap: 0.75rem;
  }
  .study-group {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .study-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem;
    grid-template-areas: "lead main main chev" "lead surfs rung chev";
    gap: 0.625rem 0.75rem;
    align-items: center;
    padding: 0.875rem 1rem 0.875rem 0.75rem;
  }
  .study-row + .study-row {
    border-top: 1px solid var(--rule);
  }
  .study-row[data-kid] {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 2%, var(--paper));
    }
  }
  @container doc (width >= 40rem) {
    .study-row {
      grid-template-columns: 2.25rem minmax(0, 1fr) auto 0.5rem 1rem;
      grid-template-areas: "lead main surfs rung chev";
    }
    .study-row[data-kid] {
      padding-block: 0.625rem;
    }
  }
  .study-row > .topic-core-n, .study-row-kid {
    grid-area: lead;
    align-self: start;
  }
  .study-row-kid {
    justify-self: center;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
  }
  .study-row-kid[data-progress="seen"] {
    border-color: var(--mark);
  }
  .study-row-kid[data-progress="read"], .study-row-kid[data-progress="complete"] {
    border-color: var(--mark);
    background: var(--mark);
  }
  @container doc (width >= 40rem) {
    .study-row > .topic-core-n, .study-row > .study-row-kid {
      align-self: center;
      margin-top: 0;
    }
  }
  .study-row-main {
    grid-area: main;
    min-width: 0;
  }
  .study-row-t {
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
  }
  .study-row[data-kid] .study-row-t {
    font-size: var(--t-sm);
  }
  .study-row-t::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .study-row:hover .study-row-t {
    color: var(--mark);
  }
  .study-surfs {
    grid-area: surfs;
    display: flex;
    gap: 0.25rem;
  }
  .study-surf {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.4375rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-3);
    text-decoration: none;
  }
  .study-surf[data-absent] {
    visibility: hidden;
  }
  .study-surf:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, var(--paper));
    }
    color: var(--mark);
  }
  .study-surf[data-progress="seen"] {
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 45%, var(--rule));
    }
    color: var(--mark);
  }
  .study-surf[data-progress="read"], .study-surf[data-progress="complete"] {
    border-color: var(--mark);
    background: var(--mark-soft);
    color: var(--mark);
  }
  .study-surf-ico {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .study-surf-n {
    font: 400 var(--t-micro) / 1 var(--font-label);
    font-variant-numeric: tabular-nums;
  }
  .study-surf-q {
    min-width: 4.25rem;
  }
  .study-row-rung {
    grid-area: rung;
    justify-self: end;
  }
  .study-row-chev {
    grid-area: chev;
    width: 1rem;
    height: 1rem;
    color: var(--ink-3);
  }
  .study-row:hover .study-row-chev {
    color: var(--mark);
  }
  .part-tabs .dr-head > .eyebrow {
    visibility: hidden;
  }
}
@layer components {
  qr-sheet {
    display: block;
    color: var(--reader-text);
    font-size: 0.9rem;
    line-height: 1.5;
    --qr-accent: var(--mute);
    --qr-lead: var(--mark);
  }
  qr-sheet[data-skin="chem"] {
    --qr-lead: var(--positive-mark);
  }
  qr-sheet[data-skin="physics"] {
    --qr-lead: var(--structural-mark);
  }
  qr-sheet[data-skin="math"] {
    --qr-lead: var(--mark);
  }
  qr-sheet[data-skin="bio"] {
    --qr-lead: var(--positive-mark);
  }
  .qr-sheet-head {
    display: none;
  }
  .qr-eyebrow {
    display: none;
  }
  .qr-sheet-title {
    font-size: clamp(0.78rem, 1.7vw, 1.05rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--heading);
  }
  .qr-grad {
    color: var(--qr-lead);
    background: linear-gradient(94deg, var(--qr-lead), var(--formula-mark) 120%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .qr-grad {
      -webkit-text-fill-color: currentColor;
    }
  }
  .qr-sheet-title.qr-grad {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--heading);
  }
  .qr-legend {
    display: none;
  }
  .qr-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }
  .qr-legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
  }
  qr-poster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 16px;
    align-items: start;
  }
  qr-tile {
    display: block;
    break-inside: avoid;
    margin: 0;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    border-radius: 11px;
    padding: 14px 15px 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgb(0 0 0 / 2%), 0 10px 26px -22px rgb(0 0 0 / 50%);
  }
  qr-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--qr-accent);
  }
  qr-tile[kind="formula"] {
    --qr-accent: var(--formula-mark);
  }
  qr-tile[kind="rule"] {
    --qr-accent: var(--structural-mark);
  }
  qr-tile[kind="trap"] {
    --qr-accent: var(--negative-mark);
  }
  qr-tile[kind="values"] {
    --qr-accent: var(--mark);
  }
  qr-tile[kind="mnemonic"] {
    --qr-accent: var(--caution-mark);
  }
  qr-tile[kind="figure"] {
    --qr-accent: var(--positive-mark);
  }
  qr-tile[kind="worked"] {
    --qr-accent: var(--procedural-mark);
  }
  qr-tile[kind="recall"] {
    --qr-accent: var(--reference-mark);
  }
  .qr-tile-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
  }
  .qr-tile-no {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--qr-accent);
    flex: 0 0 auto;
    line-height: 1.4;
  }
  .qr-tile-title {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--heading);
    flex: 1;
  }
  .qr-tile-flag {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qr-accent);
    background: var(--qr-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--qr-accent) 13%, transparent);
    }
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .qr-src {
    margin-left: 6px;
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.82rem;
    line-height: 1;
    text-decoration: none;
    color: var(--mute-light);
    opacity: 0;
    transition: opacity 0.15s;
  }
  qr-tile:hover .qr-src, .qr-src:focus {
    opacity: 1;
  }
  .qr-src:hover {
    color: var(--mark);
  }
  .qr-eqs {
    display: flex;
    flex-direction: column;
  }
  .qr-eq {
    padding: 6px 0;
    border-bottom: 1px dashed var(--mute-border);
  }
  .qr-eq:last-child {
    border-bottom: 0;
  }
  .qr-eq .qr-eq-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--mute);
    margin-bottom: 1px;
  }
  .qr-eq .katex-display {
    margin: 0.25em 0;
    text-align: left;
  }
  .qr-eq .katex-display > .katex {
    text-align: left;
  }
  .qr-note {
    font-size: 0.82rem;
    color: var(--reader-text);
    margin-top: 9px;
  }
  .qr-note + .qr-note {
    margin-top: 6px;
  }
  .qr-trap {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 0.82rem;
    color: var(--negative-text);
  }
  .qr-trap + .qr-trap {
    margin-top: 8px;
  }
  .qr-trap b {
    color: var(--negative-text);
    font-weight: 700;
  }
  .qr-trap::before {
    content: "✕";
    font-weight: 700;
    margin-right: 6px;
    color: var(--negative-mark);
  }
  table.qr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 2px;
  }
  table.qr-table th, table.qr-table td {
    padding: 5px 7px;
    border-bottom: 1px solid var(--mute-border);
    text-align: left;
  }
  table.qr-table thead th {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
  }
  table.qr-table tbody td:first-child, table.qr-table th:first-child {
    font-weight: 600;
    color: var(--heading);
  }
  table.qr-table tr:last-child td {
    border-bottom: 0;
  }
  table.qr-table.tcenter td:not(:first-child), table.qr-table.tcenter th:not(:first-child) {
    text-align: center;
  }
  .qr-key {
    background: var(--mark-soft);
    color: var(--mark);
    padding: 0.02em 0.26em;
    border-radius: 3px;
    font-weight: 600;
  }
  .qr-cau {
    background: var(--caution-bg);
    color: var(--caution-text);
    padding: 0.02em 0.26em;
    border-radius: 3px;
    font-weight: 600;
  }
  .qr-pos {
    color: var(--positive-text);
    font-weight: 600;
  }
  .qr-neg {
    color: var(--negative-text);
    font-weight: 600;
  }
  .qr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
  }
  .qr-chip {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 18px;
    border: 1px dashed var(--caution-border);
    background: var(--caution-bg);
    color: var(--caution-text);
  }
  .qr-flow {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.9;
    color: var(--heading);
    word-spacing: 0.05em;
  }
  .qr-flow b {
    color: var(--caution-text);
  }
  .qr-steps {
    display: flex;
    flex-direction: column;
  }
  .qr-step {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mute-border);
  }
  .qr-step:last-child {
    border-bottom: 0;
  }
  .qr-step .qr-step-n {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--procedural-bg);
    color: var(--procedural-text);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    display: grid;
    place-items: center;
  }
  .qr-step .qr-step-a {
    font-size: 0.8rem;
    color: var(--reader-text);
  }
  .qr-prob {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 7px;
    padding: 6px 9px;
    background: var(--procedural-bg);
    border-radius: 6px;
  }
  .qr-figure svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .qr-figure .qr-cap {
    font-size: 0.72rem;
    color: var(--mute);
    margin-top: 6px;
    text-align: center;
  }
  qr-ledger {
    display: block;
    border: 1px solid var(--mute-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--reader-bg);
  }
  .qr-collegend {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(150px, 1.5fr) minmax( 150px, 1.5fr );
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 9px 16px;
    background: var(--reference-bg);
    border-bottom: 1px solid var(--mute-border);
  }
  qr-group {
    display: block;
    border-bottom: 1px solid var(--mute-border);
  }
  qr-group:last-child {
    border-bottom: 0;
  }
  .qr-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--reference-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--reference-bg) 60%, transparent);
    }
  }
  .qr-group-no {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--reader-bg);
    background: var(--heading);
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }
  .qr-group-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--heading);
  }
  .qr-group-tally {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--mute-light);
  }
  qr-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(150px, 1.5fr) minmax( 150px, 1.5fr );
    align-items: center;
    border-top: 1px solid var(--mute-border);
    min-height: 46px;
  }
  qr-row:first-of-type {
    border-top: 0;
  }
  .qr-row-name {
    padding: 9px 12px 9px 16px;
    border-right: 1px solid var(--mute-border);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .qr-row-name b {
    font-weight: 600;
    font-size: 0.83rem;
    color: var(--heading);
  }
  .qr-row-name em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .qr-row-formula {
    padding: 9px 14px;
    border-right: 1px solid var(--mute-border);
    font-size: 0.96rem;
    overflow-x: auto;
  }
  .qr-row-use {
    padding: 8px 16px;
    font-size: 0.76rem;
    color: var(--reader-text);
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: baseline;
  }
  .qr-trigger {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    color: var(--sky-text);
  }
  .qr-trigger::before {
    content: "▸";
    color: var(--sky-mark);
    flex: 0 0 auto;
  }
  .qr-row-trap {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    color: var(--negative-text);
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    border-radius: 4px;
    padding: 2px 6px;
  }
  .qr-const {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--mute-border);
    background: var(--reference-bg);
  }
  .qr-const .qr-c {
    flex: 1 1 130px;
    padding: 10px 15px;
    border-right: 1px solid var(--mute-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .qr-const .qr-c:last-child {
    border-right: 0;
  }
  .qr-const .qr-ck {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .qr-const .qr-cv {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--formula-text);
  }
  @media (width <=600px) {
    qr-poster {
      grid-template-columns: 1fr;
    }
    .qr-collegend {
      display: none;
    }
    qr-row {
      grid-template-columns: 1fr;
    }
    .qr-row-name, .qr-row-formula {
      border-right: 0;
      border-bottom: 1px solid var(--mute-border);
    }
  }
  .qr-foot {
    display: none;
  }
  .qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 18px;
  }
  .qr-overlay[hidden] {
    display: none;
  }
  .qr-backdrop {
    position: absolute;
    inset: 0;
    background: var(--heading);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--heading) 55%, transparent);
    }
    backdrop-filter: blur(2px);
  }
  .qr-panel {
    position: relative;
    width: min(1180px, 95vw);
    height: min(880px, 92vh);
    display: flex;
    flex-direction: column;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 90px -40px rgb(0 0 0 / 60%);
  }
  .qr-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 0;
  }
  .qr-head .qr-kicker {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .qr-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .qr-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--mute-border);
    background: var(--reader-bg);
    color: var(--mute);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .qr-close:hover {
    color: var(--heading);
    border-color: var(--content-border);
  }
  .qr-close svg {
    width: 18px;
    height: 18px;
  }
  .qr-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--mute-border);
    flex-wrap: wrap;
  }
  .qr-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    position: relative;
    top: 1px;
  }
  .qr-tab svg {
    width: 15px;
    height: 15px;
  }
  .qr-tab[aria-selected="true"] {
    color: var(--heading);
    background: var(--reader-bg);
    border-color: var(--mute-border);
  }
  .qr-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--qr-lead, var(--mark));
  }
  .qr-tab:not([aria-selected="true"]):hover {
    color: var(--heading);
  }
  .qr-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 26px;
    background: radial-gradient( 120% 60% at 100% 0%, var(--reference-bg), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 120% 60% at 100% 0%, color-mix(in srgb, var(--reference-bg) 50%, transparent), transparent 60% );
    }
  }
  .qr-pane[hidden] {
    display: none;
  }
}
.mmd-overlay.cpm-modal {
  padding: 0;
}
.mmd-overlay.cpm-modal .mmd-panel {
  width: 100dvw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
.mmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
}
.mmd-overlay[hidden] {
  display: none;
}
.mmd-backdrop {
  position: absolute;
  inset: 0;
  background: var(--heading, #1f2328);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--heading, #1f2328) 55%, transparent);
  }
  backdrop-filter: blur(2px);
}
.mmd-panel {
  position: relative;
  width: min(1280px, 96vw);
  height: min(900px, 94vh);
  display: flex;
  flex-direction: column;
  background: var(--reader-bg, #fff);
  border: 1px solid var(--mute-border, #e3e7ed);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 60%);
}
.mmd-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--mute-border, #e3e7ed);
  background: var(--reader-bg, #fff);
  z-index: 2;
}
.mmd-kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-light, #8a93a3);
}
.mmd-head h2 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--reader-text, #1f2328);
  margin: 0;
  line-height: 1.1;
}
.mmd-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  }
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.mmd-close:hover {
  background: var(--ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--ink) 11%, var(--paper));
  }
  color: var(--ink);
}
.mmd-close svg {
  width: 18px;
  height: 18px;
}
.mmd-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.mmd-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mute, #5b6573);
  font-size: 14px;
}
.rs-modal .mmd-panel {
  width: min(46rem, 94vw);
  height: min(46rem, 88vh);
}
.rs-modal .mmd-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
}
.rs-modal .mmd-kicker {
  order: 2;
  margin-left: auto;
  font: 400 var(--t-nano) / 1.4 var(--font-label);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  flex: none;
}
.rs-modal .mmd-close {
  order: 3;
  margin-left: 0;
}
.rs-modal .mmd-head {
  gap: 0.75rem;
}
.rs-modal .mmd-body {
  overflow-y: auto;
}
.rs-full {
  padding: 0;
}
.rs-full .mmd-panel {
  width: 100dvw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
.rs-full .mmd-head {
  flex: none;
  gap: 0.75rem;
}
.rs-full .mmd-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
}
.rs-full .mmd-kicker {
  font: 400 var(--t-nano) / 1.4 var(--font-label);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  flex: none;
}
.app-fill-white {
  fill: #fff;
}
.app-text-white {
  color: #fff;
  fill: #fff;
}
.app-stroke-white {
  stroke: #fff;
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
  :root {
    --font-scale-factor: 1;
    --reader-font-size: calc(1rem * var(--font-scale-factor));
    --reader-font-size-sm: calc(0.875rem * var(--font-scale-factor));
    --reader-font-family: var(--font-sans);
    --text-sm: 14px;
    --font-display: "Noto Serif", Georgia, serif;
    --font-body: "Noto Sans", system-ui, sans-serif;
    --font-label: "Noto Sans Mono", ui-monospace, Menlo, monospace;
    --t-display: clamp(1.25rem, 0.9921rem + 1.0582vw, 1.5rem);
    --t-h1: clamp(1.1875rem, 0.994rem + 0.7937vw, 1.375rem);
    --t-h2: clamp(1.125rem, 0.996rem + 0.5291vw, 1.25rem);
    --t-h3: clamp(1.0625rem, 0.998rem + 0.2646vw, 1.125rem);
    --t-body: 1rem;
    --t-sm: 0.875rem;
    --t-xs: 0.75rem;
    --t-label: 0.75rem;
    --t-micro: 0.6875rem;
    --t-nano: 0.5625rem;
    --lh-body: 1.72;
    --lh-tight: 1.25;
    --w-measure: 40rem;
    --w-block: 100%;
    --w-rail: 15rem;
    --w-aside: 12.5rem;
    --w-shell: 90rem;
    --w-doc: 48rem;
    --rail-gap: 2rem;
    --gutter: 1.5rem;
    --sticky-top: calc(3rem + 1px);
    --sticky-stack: var(--sticky-top);
    --s-para: 1.1em;
    --s-block: 1.75rem;
    --s-sub: 2.5rem;
    --s-sec: 4rem;
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 10px;
    --st-new: #8b8d95;
    --st-learning: #3a83a6;
    --st-practising: #b9760a;
    --st-mastered: #2f8f6b;
    --subj-maths: #4a5bd8;
    --subj-physics: #7a5bd0;
    --subj-chemistry: #b9760a;
    --subj-biology: #2f9d76;
    --subj-science: #3a83a6;
    --scrim: rgb(0 0 0 / 42%);
    --scrim-hide: rgb(0 0 0 / 96%);
  }
  @media (width < 40rem) {
    :root {
      --lh-body: 1.65;
      --gutter: 1.25rem;
    }
  }
  body {
    --oc-right: var(--h-good);
    --oc-wrong: var(--h-bad);
    --oc-skip: var(--ink-3);
    --oc-partial: var(--h-warn);
    --oc-wash: 46%;
  }
  .theme-dark {
    --subj-maths: #8f9bf0;
    --subj-physics: #b09ae8;
    --subj-chemistry: #dda63f;
    --subj-biology: #62c49f;
    --subj-science: #7cabdd;
  }
  [popover] {
    color: var(--ink);
    background: var(--paper);
  }
  svg {
    display: inline;
  }
}
@layer legacy {
  button {
    -webkit-tap-highlight-color: transparent;
  }
  input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select {
    background-color: var(--reader-bg) !important;
    color: var(--reader-text) !important;
    border-color: var(--mute-border) !important;
  }
  input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    background-color: var(--reader-bg) !important;
    color: var(--reader-text) !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 0 1px var(--highlight) !important;
  }
  input[type="checkbox"], input[type="radio"] {
    background-color: var(--reader-bg) !important;
    border-color: var(--mute-border) !important;
  }
  input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: var(--highlight) !important;
    border-color: var(--highlight) !important;
  }
  input[type="checkbox"]:focus, input[type="radio"]:focus {
    box-shadow: 0 0 0 2px var(--highlight) !important;
  }
  .canvas-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient( to right, var(--highlight) 0%, var(--highlight) 50%, rgb(212 160 73 / 30%) 50%, rgb(212 160 73 / 30%) 100% );
    outline: none;
    border-radius: 3px;
  }
  .canvas-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--highlight);
    cursor: grab;
    border-radius: 50%;
    border: 3px solid var(--reader-bg);
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }
  .canvas-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
  }
  .canvas-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--highlight);
    cursor: grab;
    border-radius: 50%;
    border: 3px solid var(--reader-bg);
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }
  .canvas-slider-input::-moz-range-thumb:active {
    cursor: grabbing;
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
  }
  .canvas-slider-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .canvas-slider-input:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
  }
  .canvas-slider-input:disabled::-moz-range-thumb {
    cursor: not-allowed;
  }
  .canvas-stepper-control {
    box-sizing: border-box;
    display: flex;
    max-width: 140px;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
  }
  .canvas-stepper-btn {
    margin: calc(var(--spacing) * 0);
    display: flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    background-color: var(--reader-bg);
    padding: calc(var(--spacing) * 0);
    color: var(--reader-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .canvas-stepper-btn:hover:not(:disabled) {
    background-color: var(--mute-border);
  }
  .canvas-stepper-btn:active:not(:disabled) {
    background-color: var(--highlight);
    color: var(--reader-text);
  }
  .canvas-stepper-btn:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .canvas-stepper-input {
    pointer-events: auto;
    position: relative;
    z-index: 10;
    margin: calc(var(--spacing) * 0);
    box-sizing: border-box;
    height: calc(var(--spacing) * 9);
    width: 68px;
    cursor: text;
    --tw-border-style: none;
    border-style: none;
    background-color: var(--reader-bg);
    padding-inline: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-outline-style: none;
    outline-style: none;
    user-select: text;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    touch-action: manipulation;
  }
  .canvas-stepper-input::-webkit-outer-spin-button, .canvas-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .canvas-stepper-input:hover:not(:disabled) {
    background-color: var(--mute-border);
  }
  .canvas-stepper-input:focus {
    background-color: var(--reader-bg);
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 1px var(--highlight);
    outline: 1px solid var(--highlight);
    outline-offset: -1px;
  }
  .canvas-stepper-input:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  #reader-content {
    touch-action: pan-y pinch-zoom;
    overflow: hidden;
  }
  #quiz-attempt-report {
    overflow: hidden;
    transition: transform 300ms ease;
    transform: translateX(0);
    --color-emerald-500: #57b894;
    --color-rose-500: #b04a5d;
    --color-amber-500: #bf9a3f;
  }
  #questions-slide-container {
    touch-action: pan-y pinch-zoom;
    position: relative;
    min-height: 0;
  }
  .questions-carousel {
    user-select: none;
    height: 100%;
    min-height: 100%;
  }
  .questions-carousel.smooth-transition {
    transition: transform 300ms ease-out;
  }
  .questions-carousel > div {
    user-select: text;
    min-height: 100%;
    height: 100%;
  }
  .qnav {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
  }
  .qnav-arrow {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    color: var(--mute);
  }
  .qnav-arrow:hover {
    color: var(--highlight);
  }
  .qnav-btn {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    color: var(--mute);
    border: 1px solid var(--mute-border);
  }
  .qnav-btn:hover {
    color: var(--highlight);
    border-color: var(--highlight);
  }
}
@layer utilities {
  .accent-bg-subtle {
    background-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent) 8%, transparent);
    }
  }
  .accent-bg-strong {
    background-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent) 20%, transparent);
    }
  }
  [x-cloak] {
    display: none !important;
  }
  .reader-bg {
    background-color: var(--reader-bg) !important;
  }
  .reader-text {
    color: var(--reader-text) !important;
    font-size: var(--reader-font-size);
  }
  .reader-text-hover:hover {
    color: var(--reader-text) !important;
  }
  .mute-text {
    color: var(--mute) !important;
  }
  .mute-text-hover {
    color: var(--mute-hover) !important;
  }
  .mute-bg {
    background-color: var(--mute-subtle) !important;
  }
  .mute-border {
    border-color: var(--mute-border) !important;
  }
  .mute-border-soft {
    border-color: var(--mute-subtle) !important;
  }
  .dropdown-border {
    border: 1px solid var(--mute-border);
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .highlight {
    color: var(--highlight) !important;
  }
  .highlight-hover:hover {
    color: var(--highlight) !important;
  }
  .highlight-focus:focus {
    color: var(--highlight) !important;
  }
  .highlight-action {
    color: var(--highlight-action) !important;
  }
  .highlight-green {
    color: var(--highlight-green) !important;
  }
  .highlight-bg {
    background-color: var(--highlight) !important;
  }
  .highlight-green-bg {
    background-color: var(--highlight-green) !important;
  }
  .highlight-text-bg {
    background-color: var(--highlight-text-bg) !important;
  }
  .highlight-outline {
    outline-color: var(--highlight) !important;
  }
  .highlight-border {
    border-color: var(--highlight) !important;
  }
  .line-color {
    color: var(--line-color) !important;
  }
  .dashed-link {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .form-input {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    width: calc(var(--spacing) * 64);
    border-radius: var(--radius-md);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 640px) {
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
    }
    border-color: var(--mute-border);
  }
  .form-input:focus {
    border-color: var(--highlight);
    --tw-ring-color: var(--highlight);
  }
  .dropdown-menu {
    position: absolute;
    right: calc(var(--spacing) * 0);
    z-index: 50;
    margin-top: calc(var(--spacing) * 2);
    transform-origin: 100% 0;
    border-radius: var(--radius-xs);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
    background-color: var(--reader-bg);
    --tw-ring-color: color-mix(in srgb, var(--highlight) 5%, transparent);
  }
  .nav-icon-left {
    margin-right: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .nav-icon-right {
    margin-left: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .truncate-text {
    min-width: calc(var(--spacing) * 0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .toc-children {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    padding-left: calc(var(--spacing) * 2);
    border-color: var(--mute-border);
  }
  .max-w-prose {
    max-width: 96ch;
  }
  .hide-title .title {
    display: none;
  }
  .cc {
    h1 {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
      color: var(--content-title);
    }
    h2 {
      margin-block: calc(var(--spacing) * 3);
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
  }
  .reader-sticky-header {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 2);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--reader-bg);
  }
  .reader-sticky-header .header-title {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .reader-header-title {
    pointer-events: none;
    position: absolute;
    left: calc(1 / 2 * 100%);
    max-width: 40%;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .mute-action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    color: var(--mute) !important;
  }
  .mute-action:hover {
    color: var(--highlight) !important;
  }
  .mute-link {
    display: flex;
    align-items: center;
    text-decoration-line: none;
    color: var(--mute) !important;
  }
  .mute-link:hover {
    color: var(--highlight) !important;
  }
  .menu-link {
    display: block;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: 14px;
    line-height: calc(var(--spacing) * 6);
    color: var(--reader-text) !important;
    font-size: var(--reader-font-size);
  }
  .menu-link:hover {
    color: var(--highlight) !important;
  }
  ul:not(:where(.cg-doc *, .strategy *, .topic-overview *, .wg *, .rc *, .dr *, .cpg *, .rs *)) {
    margin-block: 0.5rem !important;
  }
  p:not(:where(.cg-doc *, .strategy *, .topic-overview *, .wg *, .rc *, .dr *, .cpg *, .rs *)) {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  figure {
    img {
      margin-bottom: 0 !important;
    }
    & > br {
      display: none !important;
    }
    figcaption:not(:where(.cg-doc *, .strategy *, .topic-overview *, .wg *, .rc *, .dr *, .cpg *, .rs *)) {
      text-align: center !important;
    }
    figcaption p {
      margin: 0 !important;
    }
  }
  .prose-list {
    p {
      margin: 0.25rem 0 !important;
    }
  }
  p:has(.katex) span:has(> .katex) {
    line-height: 2.5;
  }
  .prose {
    font-size: var(--reader-font-size) !important;
    & li > p {
      margin: 8px 0 !important;
    }
    & ul {
      margin-block-end: 0.25rem !important;
    }
    & ul > li {
      padding-inline-start: 0.15em !important;
    }
    & li {
      margin-top: 0.2em !important;
      margin-bottom: 0.2em !important;
    }
    & :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 400;
    }
    & li > ul {
      margin: 0 !important;
    }
    #reader-content & img {
      max-width: 100%;
      height: auto;
      border-radius: 0.375rem;
      margin: 1rem auto;
      display: block;
    }
    @media (width <= 768px) {
      #reader-content & img {
        max-width: 100%;
        margin: 0.75rem auto;
      }
    }
    @media (width >= 769px) {
      #reader-content & img {
        max-width: 100%;
        margin: 1.5rem auto;
      }
    }
    #reader-content & img[width] {
      max-width: min(100%, var(--original-width, 100%)) !important;
      width: auto !important;
    }
    #reader-content & img[height] {
      height: auto !important;
    }
  }
  img.blur-up {
    background-color: var(--lqip, var(--mute-subtle));
    clip-path: inset(0 round 0.375rem);
    transition: filter 0.4s ease;
  }
  img.blur-up.blurring {
    filter: blur(8px);
  }
  .today-book-img.blur-up {
    clip-path: inset(0 round 6px);
  }
  .exdb-cover.blur-up {
    clip-path: inset(0 round 9px);
  }
  #reader-content figure img.blur-up:not([width]) {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  @media (prefers-reduced-motion: reduce) {
    img.blur-up {
      transition: none;
    }
    img.blur-up.blurring {
      filter: none;
    }
  }
  #reader-content table {
    width: 100%;
    table-layout: auto;
  }
  #reader-content table thead tr:has(> th:nth-child(2)):not(:has(> th:nth-child(3))) {
    th:first-child, td:first-child {
      vertical-align: top;
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    th:last-child, td:last-child {
      vertical-align: top;
    }
  }
  .toc {
    & li.active > a {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & li:has(.active) > a {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & ul > li:hover > a {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & ul > li > ul > li:hover > a {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & ul > li > ul > li > ul > li:hover > a {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & a:hover {
      color: var(--highlight);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & .toc-group {
      display: block;
      cursor: default;
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--mute);
    }
  }
  .option-item {
    position: relative;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-block: calc(var(--spacing) * 1);
    text-align: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .option-item-inactive {
    border-color: var(--mute-border);
  }
  .option-item-active {
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--highlight);
    color: var(--highlight);
  }
  .icon-24 {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    fill: currentcolor;
  }
  .icon-20 {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    fill: currentcolor;
  }
  .icon-16 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    fill: currentcolor;
  }
  .icon-8 {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    fill: currentcolor;
  }
  .mcq-option {
    display: flex;
    cursor: pointer;
    align-items: baseline;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-block: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        border-color: var(--mute-border);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .mcq-option-letter {
    flex-shrink: 0;
    padding-inline: calc(var(--spacing) * 2);
    color: var(--mute);
  }
  .mcq-option-text {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .mcq-option-correct, .mcq-option-correct:hover {
    background-color: var(--positive-bg);
    border-color: transparent;
    box-shadow: 0 0 0 1.5px var(--positive-mark);
  }
  .mcq-option-incorrect, .mcq-option-incorrect:hover {
    background-color: var(--negative-bg);
    border-color: transparent;
    box-shadow: 0 0 0 1.5px var(--negative-mark);
  }
  .mcq-option-user-selected, .mcq-option-user-selected:hover {
    background-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--mark) 8%, transparent);
    }
    border-color: transparent;
    box-shadow: 0 0 0 1.5px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mark) 60%, transparent);
    }
  }
  .def-box {
    margin-block: calc(var(--spacing) * 4);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
    border-color: var(--content-title);
  }
  .content-box {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing) * 2);
    background-color: var(--reader-bg);
    border-color: var(--content-border);
  }
  .example {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
  }
  .label-gray, .alert-gray {
    background-color: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--mute) 14%, transparent);
    }
    color: var(--mute);
  }
  .label-red, .alert-red {
    background-color: var(--negative-bg);
    color: var(--negative-text);
  }
  .label-green, .alert-green {
    background-color: var(--positive-bg);
    color: var(--positive-text);
  }
  .label-indigo, .alert-indigo {
    background-color: var(--primary-base);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--primary-base) 14%, transparent);
    }
    color: var(--primary-text);
  }
  .label-gray, .label-red, .label-green, .label-indigo {
    display: inline-block;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    text-align: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .action-link {
    display: block;
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .action-link:hover {
    color: var(--highlight);
  }
  .text-underline {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    &:hover {
      color: var(--highlight);
    }
  }
  .icon-link {
    margin-block: calc(var(--spacing) * 1);
    display: block;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--highlight);
      }
    }
  }
  .mute-button {
    color: var(--mute);
    &:hover {
      @media (hover: hover) {
        color: var(--highlight);
      }
    }
  }
  .cloze-text {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    text-decoration-color: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in srgb, var(--mute) 50%, transparent);
    }
  }
  .cloze {
    opacity: 0.5;
    filter: blur(5px);
    user-select: none;
    transition: filter 0.2s ease-in-out;
  }
  .error-message {
    margin-block: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
  }
  [id^="question-"], [id^="exercise-"] {
    scroll-margin-top: 120px;
  }
  .question-card {
    margin-bottom: calc(var(--spacing) * 4);
    max-width: 100%;
    overflow: visible;
    border-radius: var(--radius-md);
    text-align: left;
    .qcard-header {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--mute-border);
      padding: calc(var(--spacing) * 2);
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
      @media (width >= 1024px) {
        padding: calc(var(--spacing) * 3);
      }
      color: var(--mute) !important;
    }
    .qcard-body {
      padding-top: calc(var(--spacing) * 0);
    }
    .qcard-question {
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 2);
      padding-bottom: calc(var(--spacing) * 4);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
    }
    .qcard-question-highlight {
      background-color: var(--structural-bg);
      margin-bottom: calc(var(--spacing) * -4);
      padding-bottom: calc(var(--spacing) * 8);
    }
    .qcard-toggle-section {
      position: relative;
      padding-bottom: calc(var(--spacing) * 2);
    }
    .qcard-question-tinted {
      margin-bottom: calc(var(--spacing) * 3);
      border-radius: var(--radius-md);
      background-color: var(--structural-bg);
    }
    .qcard-explanation-label {
      margin-bottom: calc(var(--spacing) * 1);
      padding-inline: calc(var(--spacing) * 3);
      font-size: 11px;
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-widest);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
      color: var(--mute);
    }
    .qcard-steps {
      .qcard-step-title {
        margin-block: calc(var(--spacing) * 1);
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide);
        color: var(--mute-light);
        font-size: calc(0.84375rem * var(--font-scale-factor)) !important;
      }
      .qcard-step-body {
        margin-left: calc(var(--spacing) * 3);
      }
    }
    .qcard-approach {
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 2);
      padding-bottom: calc(var(--spacing) * 1);
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
      color: var(--mute);
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
    }
    .qcard-diagram {
      display: block;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--mute-border);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      text-align: center;
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
      --sg-drive: var(--legend-1, #4f46c4);
    }
    .qcard-answer {
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 3);
      padding-bottom: calc(var(--spacing) * 3);
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
      .flex.items-start {
        align-items: baseline !important;
      }
    }
    .qcard-notes {
      margin-bottom: calc(var(--spacing) * -2);
      border-bottom-right-radius: var(--radius-md);
      border-bottom-left-radius: var(--radius-md);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--mute-border);
      padding-inline: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 2);
      padding-bottom: calc(var(--spacing) * 2);
      padding-bottom: calc(var(--spacing) * 3);
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
      @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 4);
      }
      background-color: var(--structural-bg);
      .caution {
        background-color: transparent !important;
        color: var(--negative-text);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in srgb, var(--negative-text) 80%, var(--reader-text));
        }
        margin: calc(var(--spacing) * 0);
        border-radius: 0;
        padding: calc(var(--spacing) * 0);
      }
      .note {
        background-color: transparent !important;
        opacity: 0.7;
        margin: calc(var(--spacing) * 0);
        border-radius: 0;
        padding: calc(var(--spacing) * 0);
      }
    }
    .qcard-step-title .katex, .qcard-approach .katex, .qcard-notes .katex {
      font-size: 1em !important;
      line-height: 1.2 !important;
    }
    .qcard-step-title p:has(.katex), .qcard-approach p:has(.katex), .qcard-notes p:has(.katex) {
      line-height: 1.2 !important;
    }
    .qcard-step-title p:has(.katex) span:has(> .katex), .qcard-approach p:has(.katex) span:has(> .katex), .qcard-notes p:has(.katex) span:has(> .katex) {
      line-height: 1.2 !important;
    }
  }
  .action-browse {
    width: 80px;
    justify-content: flex-start;
    @media (width <= 640px) {
      width: 60px;
    }
  }
  .action-review {
    width: 120px;
    justify-content: flex-start;
    @media (width <= 640px) {
      width: 70px;
    }
  }
  .fade-out {
    &.htmx-swapping {
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }
  }
  .htmx-swapping {
    &.slide-up {
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
  }
  .slide-out-left {
    &#reader-content {
      transform: translateX(-100%);
      transition: transform 300ms ease-out;
    }
    &#quiz-attempt-report {
      transform: translateX(-100%);
    }
    &#questions-slide-container {
      transform: translateX(-100%);
      transition: transform 300ms ease-out;
    }
  }
  .slide-out-right {
    &#reader-content {
      transform: translateX(100%);
      transition: transform 300ms ease-out;
    }
    &#quiz-attempt-report {
      transform: translateX(100%);
    }
    &#questions-slide-container {
      transform: translateX(100%);
      transition: transform 300ms ease-out;
    }
  }
  .swiping {
    &#reader-content {
      transition: transform 0.1s ease-out;
    }
  }
  .boundary-shake {
    animation: shake-horizontal 300ms ease;
  }
  .blur-loading {
    filter: blur(1px);
    transition: filter 0.2s ease;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    cursor: not-allowed;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 32px;
      height: 32px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid var(--highlight);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: spin 1s linear infinite, fade-in-spinner 0.3s ease-in forwards;
      animation-delay: 0s, 1s;
      opacity: 0;
    }
  }
  .svg-flow-figure {
    svg path {
      fill: none;
      stroke: var(--line-color);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
    svg polygon {
      fill: var(--line-color);
      stroke: var(--line-color);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .svg-text-sm {
      font-size: calc(0.85rem * var(--font-scale-factor, 1));
      fill: var(--mute);
    }
    .svg-text-md {
      font-size: calc(1rem * var(--font-scale-factor, 1));
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      fill: var(--reader-text);
    }
    .svg-text-lg {
      font-size: calc(1rem * var(--font-scale-factor, 1));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      fill: var(--reader-text);
    }
  }
  .katex .mord.text {
    font-family: var(--reader-font-family) !important;
    font-size: calc(1em / var(--katex-scale, 1.21)) !important;
    color: inherit !important;
  }
  .katex {
    text-indent: 0;
    text-rendering: auto;
    margin: 0 0.15em !important;
    vertical-align: baseline !important;
    display: inline-block !important;
  }
  .katex-display > .katex {
    display: block !important;
    margin: 0 !important;
  }
  .katex-display .aligned, .katex-display .array {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  .scroll-to-top-btn {
    position: fixed;
    bottom: calc(var(--spacing) * 8);
    z-index: 40;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: max(1rem, calc(max(0px, (100% - var(--content-w)) / 2) + var(--gutter) - 2.75rem));
    background-color: transparent;
    color: var(--mute);
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    &:hover {
      border-color: var(--highlight);
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
      color: var(--highlight);
    }
    &:focus {
      --tw-ring-color: var(--highlight);
    }
    @media (width <= 640px) {
      display: none !important;
    }
    &.show {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    &.hide {
      transform: translateY(20px) scale(0.8);
      opacity: 0;
      pointer-events: none;
    }
  }
  .reader-peek-panel {
    pointer-events: none;
    z-index: 40;
    display: flex;
    align-items: flex-start;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    width: 5rem;
    color: var(--highlight);
  }
  .reader-peek-panel.peek-prev {
    text-align: right;
  }
  .reader-peek-panel.peek-next {
    text-align: left;
  }
  @media (width >= 768px) {
    .reader-peek-panel {
      width: 7rem;
    }
  }
  @media (width >= 1024px) {
    .reader-peek-panel {
      width: 9rem;
    }
  }
  @media (width >= 1280px) {
    .reader-peek-panel {
      width: 11rem;
    }
  }
  .bg-sepia {
    background-color: var(--color-stone-50);
  }
  .text-sepia {
    color: var(--color-zinc-700);
  }
  .notes {
    .title {
      display: none;
    }
  }
  .notes > .section-box {
    margin-bottom: 0;
  }
  .notes > .section-box + .section-box {
    margin-top: calc(var(--spacing) * 8);
  }
  .notes > .section-box:not([open]) + .section-box:not([open]) {
    margin-top: calc(var(--spacing) * 3);
  }
  .instruction {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute) !important;
  }
  .or-choice {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--mute) !important;
  }
  .approach {
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--zinc-border);
    padding: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute) !important;
  }
  .caution {
    border-radius: var(--radius-sm);
    background-color: var(--rose-bg);
    fill: var(--rose-bg);
    color: var(--rose-text);
    fill: var(--rose-text);
    padding: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .note {
    border-radius: var(--radius-sm);
    background-color: var(--zinc-bg);
    fill: var(--zinc-bg);
    color: var(--zinc-text);
    fill: var(--zinc-text);
    padding: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .expl {
    color: var(--zinc-text);
    fill: var(--zinc-text);
    padding: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    font-style: italic;
  }
  .question-options {
    margin-top: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * 1);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .question-option {
    margin-bottom: calc(var(--spacing) * 1);
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .header-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-right: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute) !important;
  }
  .section-line-left {
    margin-top: 18px;
    margin-bottom: calc(var(--spacing) * 2.5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-tracking: 0.05em;
    letter-spacing: 0.05em;
    color: var(--mute);
  }
  .section-line-left::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--mute-subtle);
  }
  .section-content-box {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
  }
  .section-content-box-title {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    --tw-border-style: dotted;
    border-style: dotted;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mute);
  }
  .section-content-box-body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1);
  }
  .sub-section-content-box {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .sub-section-content-box > .sub-section-content-box-header {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .sub-section-content-box > .sub-section-content-box-header::-webkit-details-marker {
    display: none;
  }
  .sub-section-content-box .sub-section-toggle {
    flex-shrink: 0;
    opacity: 40%;
  }
  .sub-section-content-box[open] .sub-section-icon-plus {
    display: none;
  }
  .sub-section-content-box[open] .sub-section-icon-minus {
    display: block;
  }
  .sub-section-content-box:not([open]) .sub-section-icon-plus {
    display: block;
  }
  .sub-section-content-box:not([open]) .sub-section-icon-minus {
    display: none;
  }
  .sub-section-content-box > .sub-section-content-box-body {
    padding: calc(var(--spacing) * 1);
  }
  .title-num {
    margin-top: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    opacity: 40%;
  }
  .sub-section-content-box .section-line-left {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .pattern-steps ul {
    list-style-type: decimal;
  }
  .pattern-steps ul ul {
    list-style-type: disc;
  }
  .table-border-0 table {
    margin-inline: calc(var(--spacing) * 1);
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
    border-collapse: collapse !important;
  }
  .table-border-0 table tr:last-child {
    border-bottom: 0 !important;
  }
  .table-border-0 thead {
    display: none !important;
  }
  .table-border-0 thead tr, .table-border-0 thead th {
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
  }
  .table-border-0 tbody, .table-border-0 tbody tr {
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
  }
  .table-border-0 tbody td {
    border-right: 1px dotted var(--mute-border) !important;
    border-bottom: 1px dotted var(--mute-border) !important;
    border-top: 0 !important;
    border-left: 0 !important;
  }
  .table-border-0 tbody td:last-child {
    border-right: 0 !important;
  }
  .table-border-0 tbody tr:first-child td {
    border-top: 0 !important;
  }
  .table-border-0 tbody tr:last-child td {
    border-bottom: 0 !important;
  }
  icon-box {
    display: block;
  }
  .icon-box {
    margin-block: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
    & strong {
      color: inherit;
    }
  }
  .section-content-box-body table {
    width: 100%;
    table-layout: auto !important;
  }
  .section-content-box-body td:nth-child(2), .section-content-box-body th:nth-child(2) {
    white-space: nowrap !important;
    width: 1% !important;
  }
  .canvas-container {
    width: 100%;
    overflow: hidden;
    background-color: var(--reader-bg);
    padding: 0;
    margin: 0;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  .canvas-container canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  .figure-card {
    margin-block: calc(var(--spacing) * 4);
    text-align: center;
  }
  .figure-card img {
    max-width: 100%;
    border-radius: 8px;
  }
  .figure-card .figure-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
  .figure-card .hint {
    margin-top: 0.5rem;
  }
  .svg-font-family {
    font-family: var(--font-serif) !important;
  }
  .svg-bg-fill {
    fill-color: var(--color-neutral-100);
  }
  .fig-sw-hair {
    stroke-width: 0.4;
  }
  .fig-sw-thin {
    stroke-width: 0.8;
  }
  .fig-sw-base {
    stroke-width: 1;
  }
  .fig-sw-md {
    stroke-width: 1.5;
  }
  .fig-sw-lg {
    stroke-width: 2;
  }
  .fig-sw-xl {
    stroke-width: 3;
  }
  .fig-fs-3xs {
    font-size: calc(5px * var(--font-scale-factor, 1));
  }
  .fig-fs-2xs {
    font-size: calc(6px * var(--font-scale-factor, 1));
  }
  .fig-fs-xs {
    font-size: calc(8px * var(--font-scale-factor, 1));
  }
  .fig-fs-sm {
    font-size: calc(9px * var(--font-scale-factor, 1));
  }
  .fig-fs-base {
    font-size: calc(10px * var(--font-scale-factor, 1));
  }
  .fig-fs-md {
    font-size: calc(12px * var(--font-scale-factor, 1));
  }
  .fig-fs-lg {
    font-size: calc(14px * var(--font-scale-factor, 1));
  }
  .fig-fs-xl {
    font-size: calc(16px * var(--font-scale-factor, 1));
  }
  .fig-fs-2xl {
    font-size: calc(18px * var(--font-scale-factor, 1));
  }
  .fig-fs-3xl {
    font-size: calc(20px * var(--font-scale-factor, 1));
  }
  .fig-fs-4xl {
    font-size: calc(24px * var(--font-scale-factor, 1));
  }
  @media (width <= 768px) {
    .canvas-container {
      padding: 0;
      margin: 0;
    }
  }
  @media (width <= 480px) {
    .canvas-container {
      margin: 0;
    }
  }
  .concept-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .concept-card h2 {
    margin-block: calc(var(--spacing) * 2) !important;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .illustrate {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .section-stepper {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-top: calc(var(--spacing) * 2);
  }
  .stepper-scroll {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .stepper-scroll::-webkit-scrollbar {
    display: none;
  }
  .stepper-scroll.stepper-dragging, .stepper-scroll.stepper-dragging .stepper-pill {
    cursor: grabbing !important;
  }
  .stepper-pill {
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    -webkit-user-select: none;
    user-select: none;
    color: var(--mute);
    border-color: var(--mute-border);
    cursor: pointer;
  }
  .stepper-pill .katex {
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: middle;
  }
  .stepper-pill .katex .mord.text {
    font-size: 1em !important;
  }
  .stepper-pill:hover {
    border-color: var(--primary-border);
    color: var(--primary-text);
    fill: var(--primary-text);
  }
  .stepper-pill-active {
    color: var(--mark);
    background-color: var(--mark-soft);
    border-color: var(--mark);
  }
  .compare-body {
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    &:has(ul, ol) {
      text-align: left;
    }
  }
  .formula-table {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .formula-row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    background-color: var(--accent-bg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .formula-body {
    min-width: calc(var(--spacing) * 0);
    color: var(--reader-text);
    flex: 0 0 calc(70% - 0.375rem);
    & > p {
      --tw-leading: 1;
      line-height: 1;
    }
  }
  .formula-label {
    text-align: right;
    font-size: 13px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--accent);
    text-transform: uppercase;
    flex: 0 0 calc(30% - 0.375rem);
  }
  .formula-info {
    padding-inline: calc(var(--spacing) * 4);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
    border-top: 1px solid var(--mute-border);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--mute-border) 60%, transparent);
    }
    & > p {
      --tw-leading: 1;
      line-height: 1;
    }
  }
  .key-points {
    margin-block: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--accent-bg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    opacity: 90%;
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .flowchart {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    padding: calc(var(--spacing) * 4);
  }
  .flowchart-title {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
  }
  .flowchart-body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  svg.flowchart .node rect, svg.flowchart .node polygon, svg.flowchart .node path {
    stroke-width: 1.5;
  }
  svg.flowchart .node path:not([class]) {
    fill: var(--mute-subtle);
    stroke: var(--mute-border);
  }
  svg.flowchart .nodeLabel, svg.flowchart .edgeLabel {
    line-height: 1.3;
  }
  svg.flowchart .nodeLabel p, svg.flowchart .edgeLabel p {
    margin: calc(var(--spacing) * 0);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--reader-text);
    line-height: 1.3;
  }
  svg.flowchart foreignObject > div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    line-height: 1.3;
  }
  svg.flowchart .node foreignObject {
    overflow: visible;
  }
  svg.flowchart .flowchart-link {
    fill: none;
    stroke-width: 1.5;
  }
  svg.flowchart marker path {
    fill: var(--gray-stroke);
  }
  svg.svg-figure marker path.app-fill-gray {
    fill: var(--gray-stroke);
  }
  svg.svg-figure marker path.app-fill-indigo {
    fill: var(--indigo-stroke);
  }
  svg.svg-figure marker path.app-fill-teal {
    fill: var(--teal-stroke);
  }
  svg.svg-figure marker path.app-fill-blue {
    fill: var(--blue-stroke);
  }
  svg.svg-figure marker path.app-fill-emerald {
    fill: var(--emerald-stroke);
  }
  svg.svg-figure marker path.app-fill-amber {
    fill: var(--amber-stroke);
  }
  svg.svg-figure marker path.app-fill-rose {
    fill: var(--rose-stroke);
  }
  svg.svg-figure marker path.app-fill-sky {
    fill: var(--sky-stroke);
  }
  svg.svg-figure marker path.app-fill-purple {
    fill: var(--purple-stroke);
  }
  svg.flowchart .edgeLabel {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  svg.flowchart .label > rect:not([class]) {
    opacity: 0;
  }
  .flow-node {
    position: relative;
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .flow-node-badge-col {
    display: flex;
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
  }
  .flow-node-letter {
    display: flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--accent);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--mute);
  }
  .flow-node-content {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .flow-node-label {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    opacity: 80%;
  }
  .flow-node-question {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
    & > p {
      --tw-leading: 1;
      line-height: 1;
    }
  }
  .flow-node-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .flow-node-yes {
    display: inline-block;
    border-radius: var(--radius-md);
    background-color: var(--green-bg);
    fill: var(--green-bg);
    color: var(--green-text);
    fill: var(--green-text);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    & > p {
      margin: calc(var(--spacing) * 0);
      --tw-leading: 1;
      line-height: 1;
    }
    .katex {
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
      --tw-leading: 1;
      line-height: 1;
    }
  }
  .flow-node-fallback {
    display: inline-block;
    border-radius: var(--radius-md);
    border-color: var(--mute-border);
    background-color: var(--highlight-text-bg);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
    & > p {
      margin: calc(var(--spacing) * 0);
    }
  }
  .flow-node-connector {
    min-height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 0.5);
    flex-grow: 1;
    background-color: var(--mute-border);
  }
  .flow-node-jump {
    margin-top: calc(var(--spacing) * 1.5);
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1);
    font-size: .72rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .045em;
    letter-spacing: .045em;
    color: var(--mute);
    text-transform: uppercase;
    text-decoration-line: none;
    border-bottom: 1px dashed var(--mute-border);
    &::after {
      content: "↓";
    }
    &:hover {
      color: var(--accent);
      border-bottom-color: var(--accent-border);
    }
  }
  .route-group > th {
    text-align: left;
    font-size: .82rem;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    padding: 0.45rem 0.75rem;
    color: var(--reader-text);
    background-color: var(--reference-bg);
    box-shadow: inset 3px 0 0 var(--reference-border);
  }
  .satellite {
    margin-block: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 3.5);
    border-left: 2px solid var(--mute-border);
  }
  .satellite-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: .66rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: .08em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute-light);
  }
  .worked-steps-method {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 1);
    font-size: 13px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: var(--mute);
    text-transform: uppercase;
  }
  .worked-steps > icon-box.icon-box, .worked-steps > [class^="info-card-"]:not(.info-card-title) {
    background-color: transparent;
    border: none;
    border-top: 1px solid var(--mute-border);
    border-radius: 0;
    margin: 0;
    padding: 0.75rem 1rem;
  }
  .error-spot {
    --accent-bg: var(--caution-bg);
    --accent-text: var(--caution-text);
    --accent-border: var(--caution-border);
    margin-bottom: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--accent-border);
  }
  .error-spot-title {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .error-spot-wrong {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--negative-bg);
    border-color: var(--negative-border);
    color: var(--negative-text);
  }
  .error-spot-right {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--positive-bg);
    border-color: var(--positive-border);
    color: var(--positive-text);
  }
  .error-spot-explain {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
  }
  .mistake-card {
    margin-block: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .mistake-title {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--caution-bg);
    color: var(--caution-text);
  }
  .mistake-wrong {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--negative-bg);
    color: var(--negative-text);
  }
  .mistake-right {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--positive-bg);
    color: var(--positive-text);
  }
  .mistake-explain {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--gray-bg);
    color: var(--mute);
    font-size: 13px;
  }
  .reasoning-question {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
  }
  .reason-principle {
    margin-top: calc(var(--spacing) * 1.5);
    margin-left: calc(var(--spacing) * 1.5);
    display: inline-block;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: .65rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
  }
  .reason-step > .reason-principle {
    grid-column-start: 2;
    margin-left: calc(var(--spacing) * 0);
    justify-self: flex-start;
  }
  .experiment-activity {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
  }
  .exp-icon {
    margin-top: 1px;
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .exp-phase {
    margin-bottom: calc(var(--spacing) * 0.5);
    font-size: .6rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .exp-text {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .diagram-subject {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
  }
  .diagram-subject-label {
    margin-bottom: calc(var(--spacing) * 0.5);
    font-size: .6rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .check-num {
    margin-top: calc(var(--spacing) * 0.5);
    display: flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    font-size: .65rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    background-color: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
  }
  .check-text {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .check-why {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 13px;
    color: var(--mute);
  }
  .graph-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
  }
  .graph-axes {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .graph-shape {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--accent-text);
  }
  .graph-feature-label {
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: .65rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
  }
  .graph-feature-text {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    font-size: .84rem;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .comparison-header {
    display: grid;
    font-size: .7rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    grid-template-columns: minmax(90px, 0.8fr) 1fr 1fr;
  }
  .comparison-header > div {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--mute);
  }
  .comparison-header > div:nth-child(2) {
    color: var(--procedural-text);
    border-left: 1px solid var(--accent-border);
  }
  .comparison-header > div:nth-child(3) {
    color: var(--caution-text);
    border-left: 1px solid var(--accent-border);
  }
  .factors-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .factor-direction {
    margin-top: 1px;
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .factor-direction.up {
    background-color: var(--positive-bg);
    color: var(--positive-text);
  }
  .factor-direction.down {
    background-color: var(--negative-bg);
    color: var(--negative-text);
  }
  .factor-name {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .factor-effect {
    font-size: 13px;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--mute);
  }
  .answer-cue {
    margin-block: calc(var(--spacing) * 3);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--accent-border, var(--mute-border));
  }
  .answer-cue-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--accent-bg, var(--structural-bg));
    border-color: var(--accent-border, var(--mute-border));
  }
  .answer-cue-icon {
    flex-shrink: 0;
    font-size: .9rem;
    filter: grayscale(100%);
  }
  .answer-cue-icon::before {
    content: var(--cue-icon, "");
  }
  .answer-cue[data-type="experiment"] {
    --cue-icon: "🧪";
    --accent-bg: var(--verify-bg);
    --accent-border: var(--verify-border);
    --accent-text: var(--verify-text);
  }
  .answer-cue[data-type="definition"] {
    --cue-icon: "📝";
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
    --accent-text: var(--structural-text);
  }
  .answer-cue[data-type="diagram"] {
    --cue-icon: "✏️";
    --accent-bg: var(--procedural-bg);
    --accent-border: var(--procedural-border);
    --accent-text: var(--procedural-text);
  }
  .answer-cue[data-type="graph"] {
    --cue-icon: "📈";
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
    --accent-text: var(--reference-text);
  }
  .answer-cue[data-type="factors"] {
    --cue-icon: "⚙️";
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
    --accent-text: var(--positive-text);
  }
  .answer-cue[data-type="comparison"] {
    --cue-icon: "⚖️";
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
    --accent-text: var(--structural-text);
  }
  .answer-cue-body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .answer-cue-body ul {
    margin: calc(var(--spacing) * 0);
    list-style-type: none;
    padding: calc(var(--spacing) * 0);
  }
  .answer-cue-body li {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-block: calc(var(--spacing) * 1);
    font-size: .82rem;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    border-color: var(--accent-border, var(--mute-border));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--accent-border, var(--mute-border)) 50%, transparent );
    }
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    &::before {
      content: "→ ";
      color: var(--accent-text, var(--mute));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      margin-right: 0.25rem;
    }
  }
  .answer-cue-body strong {
    color: var(--accent-text, var(--mute));
  }
  .key-insight .icon-20 {
    color: var(--caution-text);
  }
  .cascade {
    position: relative;
    margin-block: calc(var(--spacing) * 4);
    padding-left: 30px;
  }
  .cascade::before {
    content: "";
    position: absolute;
    border-radius: calc(infinity * 1px);
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--reference-border);
  }
  .cascade-step {
    position: relative;
    padding: 12px 0 14px 18px;
  }
  .cascade-step:not(:last-child) {
    border-bottom: 1px dashed var(--reference-border);
  }
  .cascade-step-num {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    left: -30px;
    top: 14px;
    width: 26px;
    height: 26px;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    color: var(--reference-text);
  }
  .cascade-step-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--mute);
  }
  .cascade-pair {
    display: grid;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: 1fr auto 1fr;
  }
  .cascade-precursor, .cascade-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius-lg);
    text-align: center;
    padding: 9px 14px;
    border: 1px solid;
    line-height: 1.25;
  }
  .cascade-precursor {
    background: transparent;
    border-color: var(--reference-border);
    border-style: dashed;
    color: var(--mute);
  }
  .cascade-active {
    background: var(--positive-bg);
    border-color: var(--positive-border);
    color: var(--positive-text);
  }
  .cascade-pair .pill-eyebrow {
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 3px;
  }
  .cascade-pair .pill-name {
    display: block;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cascade-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-width: 104px;
  }
  .cascade-bridge .bridge-catalyst {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .cascade-bridge .bridge-line {
    position: relative;
    width: 100%;
    height: 1px;
    background: var(--reference-border);
  }
  .cascade-bridge .bridge-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid var(--reference-border);
    border-block: 3px solid transparent;
  }
  .cascade-bridge .bridge-cofactor {
    border-radius: calc(infinity * 1px);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 2px 7px;
    color: var(--reference-text);
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
  }
  .capstone-card {
    margin-top: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    padding: 11px 14px;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
  }
  .capstone-card p {
    margin: calc(var(--spacing) * 0);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--reader-text);
  }
  .capstone-card .capstone-title {
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .cascade-cofactors {
    margin-bottom: calc(var(--spacing) * 4);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: calc(infinity * 1px);
    padding: 8px 12px;
    background: var(--primary-bg);
    border: 1px dashed var(--primary-border);
    color: var(--reference-text);
    font-size: 13px;
  }
  .cascade-cofactors .cofactor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    width: 24px;
    height: 24px;
    background: var(--primary-mark);
    font-size: 0.71875rem;
  }
  .compartment-pathway {
    margin-block: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background: var(--reader-bg);
    border-color: var(--reference-border);
  }
  .compartment-region {
    padding: 20px 22px 22px;
    background: var(--reader-bg);
  }
  .compartment-region-eyebrow {
    margin-bottom: calc(var(--spacing) * 3.5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 4px 10px 4px 8px;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
  }
  .compartment-region-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-mark);
  }
  .envelope-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding: 14px 22px;
    background: var(--reader-bg);
    border-top: 1px solid var(--reference-border);
    border-bottom: 1px solid var(--reference-border);
  }
  .envelope-band-label {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--mute);
  }
  .envelope-pore {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    padding: 6px 14px;
    background: var(--caution-bg);
    border: 1px solid var(--caution-border);
    color: var(--caution-text);
  }
  .envelope-pore::before {
    content: "↓";
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    line-height: 0.8;
  }
  .cycle-stage {
    margin-block: calc(var(--spacing) * 3);
  }
  .cycle-stage svg {
    display: block;
    height: auto;
    width: 100%;
  }
  .taxon-tree {
    margin-block: calc(var(--spacing) * 3);
  }
  .taxon-tree svg {
    display: block;
    height: auto;
    width: 100%;
  }
  .case-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3.5);
    padding: 14px 18px;
    background: var(--accent-bg);
    border-bottom: 1px solid var(--accent-border);
  }
  .case-card-header .case-card-eyebrow {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.85;
    margin-bottom: 2px;
  }
  .case-card-header .case-card-title {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
  }
  .case-card-tags {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .case-card-tag {
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    background: var(--reader-bg);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    padding: 3px 10px;
    font-size: 0.71875rem;
  }
  .case-card-stamp {
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    background: var(--caution-bg);
    color: var(--caution-text);
    border: 1px solid var(--caution-border);
    padding: 4px 12px;
    font-size: 0.71875rem;
  }
  .case-card-section {
    padding: 16px 18px;
    border-top: 1px solid var(--reference-border);
  }
  .case-card-section .case-card-eyebrow {
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--reference-text);
    margin: 0 0 10px;
  }
  .case-card-section .section-summary {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 3);
    color: var(--mute);
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .case-card-section .section-summary strong {
    color: var(--reader-text);
  }
  .case-sequence {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
    counter-reset: cs;
  }
  .case-sequence-row {
    display: grid;
    align-items: flex-start;
    counter-increment: cs;
    grid-template-columns: 56px 1fr;
    padding: 12px 14px 12px 0;
    border-top: 1px solid var(--reference-border);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    line-height: 1.5;
  }
  .case-sequence-row:first-child {
    border-top: 0;
  }
  .case-sequence-row::before {
    content: counter(cs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 28px;
    height: 28px;
    background: var(--reference-bg);
    color: var(--reference-text);
    border: 1px solid var(--reference-border);
    font-size: 0.78125rem;
    margin: 2px 0 0 14px;
  }
  .case-sequence-row > div {
    padding: 2px 4px 0 0;
  }
  .case-sequence-row.alert {
    background: var(--negative-bg);
    color: var(--negative-text);
  }
  .case-sequence-row.alert::before {
    background: var(--negative-bg);
    color: var(--negative-text);
    border-color: var(--negative-border);
  }
  .case-sequence-row strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .card-zone {
    padding: 10px 12px;
    background: var(--accent-bg);
    color: var(--accent);
    border-top: 1px solid var(--reference-border);
    text-align: left;
    margin: 0 -1.125rem;
  }
  .card-zone:first-child {
    border-top: 0;
  }
  .card-zone:last-child {
    margin-bottom: -1.125rem;
    padding-bottom: 14px;
  }
  .card-zone .card-zone-eyebrow {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
  }
  .anatomy-tour {
    margin-block: calc(var(--spacing) * 4);
    display: grid;
    gap: calc(var(--spacing) * 0);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    grid-template-columns: minmax(0, 1fr);
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
  }
  .anatomy-tour-figure .figure-svg {
    display: block;
    height: auto;
    width: 100%;
    max-width: 100%;
  }
  .anatomy-tour-list .tour-body {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .zoom-stack {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .zoom-stack .zoom-frame {
    margin: calc(var(--spacing) * 0);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
  }
  .zoom-stack .zoom-frame img {
    margin-inline: auto;
    display: block;
    height: auto;
    max-width: 100%;
  }
  .zoom-stack .zoom-frame figcaption {
    text-align: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 8px 12px 10px;
    font-size: 0.84375rem;
    color: var(--reader-text);
    background: var(--reference-bg);
    border-top: 1px solid var(--reference-border);
  }
  .zoom-stack .zoom-arrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    align-self: center;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: 8px auto;
    padding: 4px 12px;
    font-size: 0.71875rem;
    color: var(--mark);
    background: var(--mark-soft);
    border: 1px dashed var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px dashed color-mix(in srgb, var(--mark) 25%, transparent);
    }
  }
  .phase-strip {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .phase-strip .phase-frame {
    margin: calc(var(--spacing) * 0);
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    width: 188px;
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
    scroll-snap-align: start;
  }
  .phase-strip .phase-frame .phase-num {
    align-self: flex-start;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: 8px 0 0 8px;
    padding: 2px 9px;
    font-size: 0.71875rem;
    color: var(--mark);
    background: var(--mark-soft);
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
  }
  .phase-strip .phase-frame img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 8px auto 0;
  }
  .phase-strip .phase-frame figcaption {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    padding: 8px 10px 10px;
    font-size: 0.78125rem;
    color: var(--mute);
  }
  .phase-strip .phase-frame figcaption strong {
    display: block;
    font-size: 0.84375rem;
    color: var(--reader-text);
    margin-bottom: 2px;
  }
  .concept-brief {
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    border-radius: 10px;
    padding: 16px 20px 14px;
    margin: 14px 0;
    --accent: var(--structural-text);
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
  }
  .concept-brief[data-kind="reaction"] {
    --accent: var(--procedural-text);
    --accent-bg: var(--procedural-bg);
    --accent-border: var(--procedural-border);
  }
  .concept-brief[data-kind="principle"] {
    --accent: var(--verify-text);
    --accent-bg: var(--verify-bg);
    --accent-border: var(--verify-border);
  }
  .concept-brief[data-kind="structure"] {
    --accent: var(--reference-text);
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
  }
  .concept-brief[data-kind="process"] {
    --accent: var(--positive-text);
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
  }
  .concept-brief[data-kind="classification"] {
    --accent: var(--caution-text);
    --accent-bg: var(--caution-bg);
    --accent-border: var(--caution-border);
  }
  .concept-brief .cb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .concept-brief .cb-kind {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .concept-brief .cb-lede {
    margin: 0 0 10px;
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--reader-text);
  }
  .concept-brief .cb-lede strong {
    color: var(--accent);
  }
  .concept-brief .cb-body {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    line-height: 1.6;
    color: var(--reader-text);
  }
  .concept-brief .cb-body p {
    margin: 0 0 8px;
  }
  .concept-brief .cb-body p:last-child {
    margin: 0;
  }
  .concept-brief .cb-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--accent-border);
  }
  .concept-brief .cb-anchor {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    font-size: 0.78125rem;
    line-height: 1.4;
  }
  .concept-brief .cb-anchor-key {
    color: var(--accent);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    font-size: 0.71875rem;
    letter-spacing: 0.06em;
  }
  .concept-brief .cb-anchor-val {
    color: var(--reader-text);
  }
  .key-fact {
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 12px 0;
    --accent: var(--reference-text);
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
  }
  .key-fact .kf-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .key-fact .kf-kind {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .key-fact .kf-label {
    font-size: 0.78125rem;
    color: var(--mute);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .key-fact .kf-body {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    line-height: 1.6;
    color: var(--reader-text);
    font-style: italic;
  }
  .key-fact .kf-body p {
    margin: 0 0 6px;
  }
  .key-fact .kf-body p:last-child {
    margin: 0;
  }
  .equation-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--verify-border);
    margin: 12px 0;
    background: var(--reader-bg);
  }
  .equation-card .equation-header {
    padding: 8px 14px;
    background: var(--verify-bg);
    color: var(--verify-text);
    font-size: 0.84375rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--verify-border);
  }
  .equation-card .equation-body {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0;
  }
  .equation-card .equation-row {
    display: contents;
  }
  .equation-card .equation-key, .equation-card .equation-val {
    padding: 10px 14px;
    font-size: 0.84375rem;
    border-bottom: 1px solid var(--verify-border);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--verify-border) 60%, transparent);
    }
  }
  .equation-card .equation-key {
    background: var(--verify-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--verify-bg) 50%, transparent);
    }
    color: var(--verify-text);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .equation-card .equation-row:last-child .equation-key, .equation-card .equation-row:last-child .equation-val {
    border-bottom: none;
  }
  .equation-card .equation-row.equation-final {
    background: var(--positive-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--positive-bg) 30%, transparent);
    }
  }
  .equation-card .equation-row.equation-final .equation-val {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--positive-text);
  }
  .nomenclature-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--structural-border);
    margin: 12px 0;
    background: var(--reader-bg);
  }
  .nomenclature-card .nomenclature-header {
    padding: 8px 14px;
    background: var(--structural-bg);
    color: var(--structural-text);
    font-size: 0.84375rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--structural-border);
  }
  .nomenclature-card .nomenclature-rules {
    padding: 10px 14px;
    border-bottom: 1px solid var(--structural-border);
    font-size: 0.84375rem;
    background: var(--reader-bg);
  }
  .nomenclature-card .nomenclature-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nomenclature-card .nomenclature-rules li {
    padding: 4px 0;
    line-height: 1.55;
  }
  .nomenclature-card .nomenclature-rules li::before {
    content: "→ ";
    color: var(--structural-text);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin-right: 4px;
  }
  .nomenclature-card .nomenclature-example {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    line-height: 1.5;
    border-bottom: 1px solid var(--mute-border);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--mute-border) 60%, transparent);
    }
  }
  .nomenclature-card .nomenclature-example:last-child {
    border-bottom: none;
  }
  .nomenclature-card .nomenclature-example.correct {
    background: var(--positive-bg);
    color: var(--positive-text);
  }
  .nomenclature-card .nomenclature-example.wrong {
    background: var(--negative-bg);
    color: var(--negative-text);
  }
  .nomenclature-card .nomenclature-example .icon {
    flex-shrink: 0;
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .nomenclature-card .nomenclature-example .tag {
    display: inline-block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 8px;
    opacity: 0.85;
  }
  .btn-quiet {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.25rem;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .btn-quiet:hover {
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .btn-quiet:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .phase-scrubber {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .phase-scrubber-figure {
    position: relative;
    margin-block: calc(var(--spacing) * 2) !important;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding-block: calc(var(--spacing) * 3);
    background: var(--reference-bg);
  }
  .phase-scrubber-figure img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: opacity 0.18s ease;
  }
  .phase-scrubber-figure .step-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    top: 0.625rem;
    left: 0.625rem;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.71875rem;
    letter-spacing: 0.04em;
    background: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
  }
  .phase-scrubber-figure .step-pill::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--accent-mark);
  }
  .phase-scrubber-caption {
    display: grid;
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    gap: 0.25rem;
    background: var(--accent-bg);
  }
  .phase-scrubber-caption .name {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--accent-text);
  }
  .phase-scrubber-caption .body {
    font-size: 0.84375rem;
    color: var(--reader-text);
    line-height: 1.55;
  }
  .phase-scrubber-caption .key-events {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
  }
  .phase-scrubber-caption .key-events > span {
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgb(255 255 255 / 60%);
    border: 1px solid var(--accent-border);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
  }
  .phase-stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.25rem 0;
    row-gap: 0.4rem;
  }
  .phase-step {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .phase-connector {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 2px;
    margin: 0 0.25rem;
    background: var(--mute-border);
    transition: background 0.18s ease;
  }
  .phase-step.is-past .phase-connector {
    background: var(--accent-mark);
  }
  .phase-chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: calc(infinity * 1px);
    gap: 0.4rem;
    padding: 0.3rem 0.625rem 0.3rem 0.4rem;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .phase-chip:hover {
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .phase-chip[aria-pressed="true"] {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent-text);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .phase-step.is-past .phase-chip {
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .phase-chip .num {
    display: inline-grid;
    place-items: center;
    border-radius: calc(infinity * 1px);
    width: 1.25rem;
    height: 1.25rem;
    background: var(--mute-border);
    color: var(--reader-bg);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    transition: background 0.15s ease;
  }
  .phase-step.is-past .phase-chip .num, .phase-chip[aria-pressed="true"] .num {
    background: var(--accent-mark);
  }
  .label-reveal-tour {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  @media (width <= 720px) {
    .label-reveal-tour {
      grid-template-columns: 1fr;
    }
  }
  .label-tour-figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--reference-bg);
    aspect-ratio: 2 / 3;
  }
  .label-tour-figure:has(> svg) {
    aspect-ratio: auto;
  }
  .label-tour-figure img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .label-tour-figure > svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .label-reveal-tour[data-mode="quiz"] .label-tour-figure svg text {
    filter: blur(4px);
    opacity: 0.6;
    user-select: none;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  .label-reveal-tour[data-mode="quiz"] .label-tour-figure svg text.is-revealed {
    filter: none;
    opacity: 1;
    user-select: auto;
  }
  .label-tour-hotspot {
    position: absolute;
    display: grid;
    cursor: pointer;
    place-items: center;
    border-radius: calc(infinity * 1px);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    transform: translate(-50%, -50%);
    background: var(--reader-bg);
    border: 2px solid var(--accent-mark);
    color: var(--accent-text);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    transition: all 0.15s ease;
  }
  .label-tour-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--accent-mark);
    color: var(--reader-bg);
  }
  .label-tour-hotspot[aria-pressed="true"] {
    background: var(--accent-mark);
    color: var(--reader-bg);
    box-shadow: 0 0 0 4px var(--accent-bg), 0 1px 4px rgb(0 0 0 / 15%);
  }
  .label-reveal-tour[data-mode="quiz"] .label-tour-hotspot {
    color: transparent;
    background: var(--reader-bg);
  }
  .label-reveal-tour[data-mode="quiz"] .label-tour-hotspot:hover {
    background: var(--accent-bg);
  }
  .label-tour-hotspot.is-correct {
    background: var(--positive-bg) !important;
    border-color: var(--positive-mark) !important;
    color: var(--positive-text) !important;
    animation: label-tour-pulse-pos 0.4s ease;
  }
  .label-tour-hotspot.is-wrong {
    background: var(--negative-bg) !important;
    border-color: var(--negative-mark) !important;
    color: var(--negative-text) !important;
    animation: label-tour-pulse-neg 0.4s ease;
  }
  @keyframes label-tour-pulse-pos {
    0% {
      box-shadow: 0 0 0 0 var(--positive-mark);
    }
    100% {
      box-shadow: 0 0 0 12px transparent;
    }
  }
  @keyframes label-tour-pulse-neg {
    0% {
      box-shadow: 0 0 0 0 var(--negative-mark);
    }
    100% {
      box-shadow: 0 0 0 12px transparent;
    }
  }
  .label-tour-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }
  .label-tour-modes:not(:has(.rg-track)) {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding: 0.2rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    width: fit-content;
  }
  .label-tour-modes:not(:has(.rg-track)) button {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: none;
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .label-tour-modes:not(:has(.rg-track)) button[aria-pressed="true"] {
    background: var(--reader-bg);
    color: var(--accent-text);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  }
  .label-tour-info {
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.875rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    flex: 1;
    min-height: 9rem;
  }
  .label-tour-info-empty {
    font-style: italic;
    font-size: 0.84375rem;
    line-height: 1.5;
    color: var(--mute-light);
  }
  .label-tour-info-num {
    display: inline-grid;
    place-items: center;
    border-radius: calc(infinity * 1px);
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.4rem;
    background: var(--accent-mark);
    color: var(--reader-bg);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .label-tour-info-name {
    display: inline;
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--accent-text);
  }
  .label-tour-info-role {
    font-size: 0.84375rem;
    color: var(--reader-text);
    margin-top: 0.4rem;
    line-height: 1.55;
  }
  .label-tour-info-progress {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.625rem;
    font-size: 0.71875rem;
    color: var(--mute);
  }
  .label-tour-info-dots {
    display: inline-flex;
    gap: 0.2rem;
    margin-left: 0.4rem;
  }
  .label-tour-info-dot {
    border-radius: calc(infinity * 1px);
    width: 0.45rem;
    height: 0.45rem;
    background: var(--mute-border);
  }
  .label-tour-info-dot.is-seen {
    background: var(--accent-mark);
  }
  .quiz-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    gap: 0.5rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .quiz-prompt strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .quiz-prompt .target {
    border-radius: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: var(--reader-bg);
    border: 1px solid var(--accent-border);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .quiz-feedback {
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    font-size: 0.84375rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .quiz-feedback.is-correct {
    background: var(--positive-bg);
    color: var(--positive-text);
    border: 1px solid var(--positive-border);
  }
  .quiz-feedback.is-wrong {
    background: var(--negative-bg);
    color: var(--negative-text);
    border: 1px solid var(--negative-border);
  }
  .branching-explorer {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .tree-wrap {
    border-radius: var(--radius-lg);
    padding: 0.625rem;
    background: var(--reference-bg);
  }
  .tree-svg {
    display: block;
    height: auto;
    width: 100%;
    max-height: 420px;
    font-family: inherit;
  }
  .tree-node-pill {
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .tree-node-pill:hover {
    filter: brightness(0.96);
  }
  .tree-node-pill .pill-bg {
    stroke-width: 1;
    transition: all 0.18s ease;
  }
  .tree-node-pill text {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    pointer-events: none;
    user-select: none;
  }
  .tree-node-pill .pill-tag {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .tree-node-pill.is-active .pill-bg {
    filter: drop-shadow(0 0 1px currentColor);
    stroke-width: 1;
  }
  .tree-line {
    fill: none;
    stroke: var(--mute-border);
    stroke-width: 1.5;
    transition: stroke 0.18s ease, stroke-width 0.18s ease;
  }
  .tree-line.is-highlighted {
    stroke: var(--accent-mark);
    stroke-width: 2.5;
  }
  .tree-criterion {
    fill: var(--mute);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-style: italic;
    pointer-events: none;
    user-select: none;
  }
  .tree-criterion.is-highlighted {
    fill: var(--accent-text);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .br-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }
  .br-modes:not(:has(.rg-track)) {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding: 0.2rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    width: fit-content;
  }
  .br-modes:not(:has(.rg-track)) button {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: none;
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .br-modes:not(:has(.rg-track)) button[aria-pressed="true"] {
    background: var(--reader-bg);
    color: var(--accent-text);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  }
  .br-info {
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.875rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    flex: 1;
    min-height: 14rem;
    --leaf-text: var(--mute);
    --leaf-border: var(--mute-border);
    --leaf-bg: var(--reader-bg);
  }
  .br-info:has(.br-info-name .label.app-text-emerald) {
    --leaf-text: var(--emerald-text);
    --leaf-border: var(--emerald-border);
    --leaf-bg: var(--emerald-bg);
  }
  .br-info:has(.br-info-name .label.app-text-blue) {
    --leaf-text: var(--blue-text);
    --leaf-border: var(--blue-border);
    --leaf-bg: var(--blue-bg);
  }
  .br-info:has(.br-info-name .label.app-text-amber) {
    --leaf-text: var(--amber-text);
    --leaf-border: var(--amber-border);
    --leaf-bg: var(--amber-bg);
  }
  .br-info:has(.br-info-name .label.app-text-rose) {
    --leaf-text: var(--rose-text);
    --leaf-border: var(--rose-border);
    --leaf-bg: var(--rose-bg);
  }
  .br-info:has(.br-info-name .label.app-text-teal) {
    --leaf-text: var(--teal-text);
    --leaf-border: var(--teal-border);
    --leaf-bg: var(--teal-bg);
  }
  .br-info:has(.br-info-name .label.app-text-indigo) {
    --leaf-text: var(--indigo-text);
    --leaf-border: var(--indigo-border);
    --leaf-bg: var(--indigo-bg);
  }
  .br-info:has(.br-info-name .label.app-text-purple) {
    --leaf-text: var(--purple-text);
    --leaf-border: var(--purple-border);
    --leaf-bg: var(--purple-bg);
  }
  .br-info:has(.br-info-name .label.app-text-sky) {
    --leaf-text: var(--sky-text);
    --leaf-border: var(--sky-border);
    --leaf-bg: var(--sky-bg);
  }
  .br-info-empty {
    font-style: italic;
    font-size: 0.84375rem;
    color: var(--mute-light);
  }
  @media (width >= 720px) {
    .br-info-twocol {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.75rem 1.5rem;
    }
    .br-info-twocol > div:not(.br-info-section) {
      display: contents;
    }
    .br-info-twocol > .br-info-section:nth-of-type(1) {
      grid-column: 1;
      grid-row: 1;
    }
    .br-info-twocol > div > .br-info-section:nth-of-type(1) {
      grid-column: 2;
      grid-row: 1;
    }
    .br-info-twocol > div > .br-info-section:nth-of-type(2) {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }
  .br-info-name {
    display: flex;
    align-items: center;
    margin-bottom: 0.375rem;
  }
  .br-info-name .label {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .br-info-tagline {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mute);
    margin-bottom: 0.625rem;
  }
  .br-info-section {
    margin-top: 0.6rem;
  }
  .br-info-section h4 {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--leaf-text);
    opacity: 0.8;
    margin-top: 0;
    margin-bottom: 0.3rem;
  }
  .br-info-section ul {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--reader-text);
    line-height: 1.5;
  }
  .br-info-section ul > li {
    padding-inline-start: 1.1rem !important;
    position: relative;
    margin-bottom: 0.2rem;
  }
  .br-info-section ul > li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    top: 0;
    color: var(--leaf-text);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    line-height: inherit;
  }
  .br-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .br-member-chip {
    border-radius: calc(infinity * 1px);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    padding: 0.2rem 0.55rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--reader-bg);
    color: var(--reader-text);
    border: 1px solid var(--leaf-border);
  }
  .br-member-chip em {
    font-style: italic;
  }
  .placeit-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    gap: 0.5rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .placeit-prompt strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .placeit-prompt em {
    font-style: italic;
  }
  .placeit-prompt .target {
    border-radius: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: var(--reader-bg);
    border: 1px solid var(--accent-border);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-style: italic;
  }
  .placeit-feedback {
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    font-size: 0.84375rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .placeit-feedback.is-correct {
    background: var(--positive-bg);
    color: var(--positive-text);
    border: 1px solid var(--positive-border);
  }
  .placeit-feedback.is-wrong {
    background: var(--negative-bg);
    color: var(--negative-text);
    border: 1px solid var(--negative-border);
  }
  .mechanism-stepper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .cascade-wrap {
    border-radius: var(--radius-lg);
    padding: 0.625rem;
    background: var(--reference-bg);
    overflow-x: auto;
  }
  .cascade-svg {
    display: block;
    height: auto;
    width: 100%;
    min-width: 720px;
    font-family: inherit;
  }
  .step-box {
    cursor: pointer;
    transition: filter 0.18s ease, opacity 0.18s ease;
  }
  .step-box:hover {
    filter: brightness(0.96);
  }
  .step-box rect.box-bg {
    transition: all 0.18s ease;
  }
  .step-box text {
    pointer-events: none;
    user-select: none;
  }
  .step-box[data-state="future"] rect.box-bg {
    fill: var(--reader-bg);
    stroke: var(--mute-border);
    stroke-width: 1.2;
  }
  .step-box[data-state="future"] text {
    fill: var(--mute);
  }
  .step-box[data-state="active"] rect.box-bg {
    fill: var(--accent-bg);
    stroke: var(--accent-border);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--accent-mark));
  }
  .step-box[data-state="active"] text {
    fill: var(--accent-text);
  }
  .step-box[data-state="past"] rect.box-bg {
    fill: var(--positive-bg);
    stroke: var(--positive-border);
    stroke-width: 1.5;
  }
  .step-box[data-state="past"] text {
    fill: var(--positive-text);
  }
  .step-box[data-state="blocked"] rect.box-bg {
    fill: var(--negative-bg);
    stroke: var(--negative-border);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--negative-mark));
  }
  .step-box[data-state="blocked"] text {
    fill: var(--negative-text);
  }
  .step-box[data-state="downstream-blocked"] rect.box-bg {
    fill: var(--reader-bg);
    stroke: var(--mute-border);
    stroke-width: 1;
    stroke-dasharray: 4 3;
  }
  .step-box[data-state="downstream-blocked"] text {
    fill: var(--mute-light);
  }
  .step-box[data-state="downstream-blocked"] {
    opacity: 0.55;
  }
  .cascade-grid {
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.625rem;
    background: var(--reference-bg);
  }
  .step-card {
    cursor: pointer;
    border-radius: var(--radius-md);
    position: relative;
    flex: 1 1 140px;
    min-width: 140px;
    padding: 0.75rem 0.875rem 0.625rem;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    font-size: 0.78125rem;
    line-height: 1.4;
    transition: all 0.18s ease;
  }
  .step-card:hover {
    filter: brightness(0.98);
  }
  .step-card .step-num {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--mute-border);
    color: var(--mute);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 0.4rem;
  }
  .step-card .step-card-title {
    font-size: 13px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--reader-text);
  }
  .step-card .step-card-caption {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    line-height: 1.35;
    color: var(--mute);
  }
  .step-card[data-state="future"] {
    background: var(--reader-bg);
    border-color: var(--mute-border);
  }
  .step-card[data-state="active"] {
    background: var(--positive-bg);
    border-color: var(--positive-border);
    box-shadow: 0 0 0 2px var(--positive-mark);
  }
  .step-card[data-state="active"] .step-num {
    background: var(--positive-mark);
    color: var(--reader-bg);
  }
  .step-card[data-state="active"] .step-card-title {
    color: var(--positive-text);
  }
  .step-card[data-state="past"] {
    background: var(--positive-bg);
    border-color: var(--positive-border);
  }
  .step-card[data-state="past"] .step-num {
    background: var(--positive-mark);
    color: var(--reader-bg);
  }
  .step-card[data-state="past"] .step-card-title {
    color: var(--positive-text);
  }
  .step-card[data-state="blocked"] {
    background: var(--negative-bg);
    border-color: var(--negative-border);
    box-shadow: 0 0 0 1px var(--negative-border);
  }
  .step-card[data-state="blocked"] .step-num {
    background: var(--negative-mark);
    color: var(--reader-bg);
  }
  .step-card[data-state="blocked"] .step-card-title {
    color: var(--negative-text);
  }
  .step-card[data-state="downstream-blocked"] {
    border-style: dashed;
    opacity: 0.55;
  }
  .step-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    align-self: center;
    color: var(--mute);
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
  }
  @media (width <= 540px) {
    .step-card {
      flex-basis: 100%;
    }
    .step-arrow {
      transform: rotate(90deg);
      padding: 0.15rem 0;
    }
  }
  .stepper-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .stepper-controls .icon-btn {
    display: grid;
    cursor: pointer;
    place-items: center;
    border-radius: var(--radius-md);
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
    color: var(--reader-text);
    font-size: 0.84375rem;
    line-height: 1;
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .stepper-controls .icon-btn:hover:not(:disabled) {
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .stepper-controls .icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .stepper-controls .progress {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mute);
    font-variant-numeric: tabular-nums;
    padding-left: 0.25rem;
  }
  .stepper-controls .reset-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    margin-left: auto;
    padding: 0.35rem 0.75rem;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    font-family: inherit;
  }
  .stepper-controls .reset-btn:hover {
    border-color: var(--accent-border);
    color: var(--accent-text);
  }
  .stepper-detail-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  @media (width <= 720px) {
    .stepper-detail-grid {
      grid-template-columns: 1fr;
    }
  }
  .step-detail {
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.875rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    min-height: 11rem;
  }
  .step-detail-empty {
    font-style: italic;
    font-size: 0.84375rem;
    color: var(--mute-light);
  }
  .step-detail-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
  }
  .step-detail-head .num-badge {
    display: inline-grid;
    place-items: center;
    border-radius: calc(infinity * 1px);
    width: 1.5rem;
    height: 1.5rem;
    background: var(--positive-mark);
    color: var(--reader-bg);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .step-detail.is-blocked .step-detail-head .num-badge {
    background: var(--negative-mark);
  }
  .step-detail-head .name {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--positive-text);
  }
  .step-detail.is-blocked .step-detail-head .name {
    color: var(--negative-text);
  }
  .step-detail-section {
    margin-top: 0.55rem;
  }
  .step-detail-section h4 {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute-light);
    margin-bottom: 0.25rem;
  }
  .step-detail-section .body {
    font-size: 13px;
    color: var(--reader-text);
    line-height: 1.5;
  }
  .cofactor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .cofactor-chip {
    border-radius: calc(infinity * 1px);
    padding: 0.2rem 0.55rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--reader-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    transition: all 0.15s ease;
  }
  .cofactor-chip.is-blocked {
    background: var(--negative-bg);
    color: var(--negative-text);
    border-color: var(--negative-border);
    text-decoration: line-through;
  }
  .step-detail-output {
    border-radius: 0.25rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.625rem;
    background: var(--positive-bg);
    border-left: 3px solid var(--positive-border);
    font-size: 13px;
    color: var(--positive-text);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .step-detail.is-blocked .step-detail-output {
    background: var(--negative-bg);
    border-left-color: var(--negative-border);
    color: var(--negative-text);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .step-detail.is-blocked .step-detail-output::before {
    content: "✗ ";
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .perturbations {
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.875rem;
    background: var(--reader-bg);
    border: 1px solid var(--reference-border);
  }
  .perturbations h3 {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute-light);
    margin-bottom: 0.6rem;
  }
  .perturbation-row {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--reference-border);
  }
  .perturbation-row:last-child {
    border-bottom: none;
  }
  .perturbation-row:hover .label {
    color: var(--accent-text);
  }
  .perturbation-row .switch {
    border-radius: calc(infinity * 1px);
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 1.1rem;
    margin-top: 2px;
    background: var(--mute-border);
    transition: background 0.15s ease;
  }
  .perturbation-row .switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--reader-bg);
    transition: left 0.15s ease;
  }
  .perturbation-row[aria-pressed="true"] .switch {
    background: var(--negative-mark);
  }
  .perturbation-row[aria-pressed="true"] .switch::after {
    left: calc(100% - 0.8rem - 2px);
  }
  .perturbation-row .text-col {
    flex: 1;
    min-width: 0;
  }
  .perturbation-row .label {
    font-size: 13px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
    transition: color 0.15s ease;
  }
  .perturbation-row[aria-pressed="true"] .label {
    color: var(--negative-text);
  }
  .perturbation-row .note {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    font-style: italic;
    line-height: 1.4;
  }
  .outcome-banner {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    font-size: .85rem;
    --tw-leading: 1.6;
    line-height: 1.6;
    --tw-tracking: .01em;
    letter-spacing: .01em;
    padding: 0.5rem 0.875rem;
    border-left: 3px solid var(--verify-border);
    background: var(--verify-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--verify-bg) 70%, transparent);
    }
    color: var(--reader-text);
  }
  .outcome-banner.is-ok {
    border-left-color: var(--positive-border);
    background: var(--positive-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--positive-bg) 70%, transparent);
    }
  }
  .outcome-banner.is-broken {
    border-left-color: var(--negative-border);
    background: var(--negative-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--negative-bg) 70%, transparent);
    }
  }
  .outcome-banner strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--verify-solid);
  }
  .outcome-banner.is-ok strong {
    color: var(--positive-text);
  }
  .outcome-banner.is-broken strong {
    color: var(--negative-text);
  }
  .parameter-explorer {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .pe-equation {
    border-radius: 0.25rem;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    align-self: flex-start;
    padding: 0.4rem 0.75rem;
    background: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    letter-spacing: 0.02em;
  }
  .pe-equation .op {
    color: var(--mute);
    padding: 0 0.15em;
  }
  .pe-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--reference-border);
  }
  .pe-slider-label {
    font-size: 0.78125rem;
    color: var(--mute);
    font-family: "SF Mono", Monaco, monospace;
    min-width: 6rem;
  }
  .pe-slider-label strong {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--accent-text);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    padding-left: 0.25rem;
  }
  .pe-slider {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient( to right, var(--accent-mark) 0%, var(--accent-mark) calc(var(--p-pct, 50%) * 1), var(--mute-border) calc(var(--p-pct, 50%) * 1), var(--mute-border) 100% );
    cursor: pointer;
    outline: none;
  }
  .pe-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-mark);
    border: 2px solid var(--reader-bg);
    box-shadow: 0 0 0 1px var(--accent-mark);
    cursor: grab;
  }
  .pe-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-mark);
    border: 2px solid var(--reader-bg);
    cursor: grab;
  }
  .pe-slider-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 0.71875rem;
    color: var(--mute-light);
    font-family: "SF Mono", Monaco, monospace;
  }
  .pe-bar {
    display: flex;
    overflow: hidden;
    border-radius: 0.25rem;
    height: 1.8rem;
    border: 1px solid var(--reference-border);
    transition: all 0.2s ease;
  }
  .pe-bar-segment {
    display: grid;
    place-items: center;
    transition: width 0.18s ease;
    min-width: 2px;
    padding: 0 0.25rem;
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--reader-text);
    white-space: nowrap;
  }
  .pe-bar-segment[data-geno="AA"] {
    background: var(--verify-mark);
  }
  .pe-bar-segment[data-geno="Aa"] {
    background: var(--caution-mark);
  }
  .pe-bar-segment[data-geno="aa"] {
    background: var(--negative-mark);
  }
  .pe-bar-axis {
    display: flex;
    margin-top: 0.35rem;
  }
  .pe-bar-axis .axis-tick {
    text-align: center;
    transition: width 0.18s ease;
    min-width: 0;
    padding: 0 0.15rem;
    font-size: 13px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--reader-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .pe-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 0.55rem;
  }
  .pe-bar-legend .pe-legend-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    gap: 0.45rem;
  }
  .pe-bar-legend .pe-legend-swatch {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 3px;
    flex: 0 0 auto;
    border: 1px solid rgb(0 0 0 / 8%);
  }
  .pe-bar-legend .pe-legend-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .pe-bar-legend .pe-legend-val {
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .pe-meter {
    position: relative;
    height: 1.9rem;
    margin-top: 1.4rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    border-radius: 6px;
  }
  .pe-meter .pe-meter-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 0.18s ease, left 0.18s ease;
  }
  .pe-meter .pe-meter-seg.is-base {
    left: 0;
    border-radius: 6px 0 0 6px;
  }
  .pe-meter .pe-meter-deficit {
    background: repeating-linear-gradient( 45deg, var(--negative-bg), var(--negative-bg) 4px, var(--negative-bg) 4px, var(--negative-bg) 9px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( 45deg, var(--negative-bg), var(--negative-bg) 4px, color-mix(in srgb, var(--negative-bg) 55%, #fff) 4px, color-mix(in srgb, var(--negative-bg) 55%, #fff) 9px );
    }
    border-right: 1px solid var(--negative-border);
  }
  .pe-meter .pe-meter-thresh {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 2px;
    background: var(--reader-text);
  }
  .pe-meter .pe-meter-thresh .cap {
    position: absolute;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    top: -1.2rem;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--reader-text);
  }
  .pe-meter-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.71875rem;
    margin-top: 0.25rem;
    color: var(--mute);
  }
  .pe-meter-cap {
    font-size: 13px;
    margin-top: 0.5rem;
  }
  .pe-bars {
    display: grid;
    gap: 0.42rem;
  }
  .pe-bars .pe-bars-row {
    display: grid;
    align-items: center;
    font-size: 13px;
    grid-template-columns: 3.2rem 1fr 4.5rem;
    gap: 0.6rem;
  }
  .pe-bars .pe-bars-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .pe-bars .pe-bars-track {
    height: 0.95rem;
    background: var(--reference-bg);
    border-radius: 4px;
    overflow: hidden;
  }
  .pe-bars .pe-bars-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--reference-border);
    transition: width 0.18s ease;
  }
  .pe-bars .pe-bars-val {
    text-align: right;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .pe-bars .pe-bars-row.is-active .pe-bars-name, .pe-bars .pe-bars-row.is-active .pe-bars-val {
    color: var(--accent-text, var(--positive-text));
    font-weight: 700;
  }
  .pe-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
  }
  .pe-stat {
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
  }
  .pe-stat .label {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute-light);
    margin-bottom: 0.2rem;
  }
  .pe-stat .formula {
    font-family: "SF Mono", Monaco, monospace;
    font-size: 0.78125rem;
    color: var(--mute);
    margin-bottom: 0.15rem;
  }
  .pe-stat .value {
    font-size: 1.05rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
  }
  .pe-stat .pct {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    font-family: "SF Mono", Monaco, monospace;
    padding-left: 0.375rem;
  }
  .pe-stat .meaning {
    font-size: 0.71875rem;
    color: var(--mute);
    font-style: italic;
    margin-top: 0.15rem;
  }
  .pe-stat[data-geno="AA"] {
    background: var(--verify-bg);
    border-color: var(--verify-border);
  }
  .pe-stat[data-geno="AA"] .value {
    color: var(--verify-text);
  }
  .pe-stat[data-geno="Aa"] {
    background: var(--caution-bg);
    border-color: var(--caution-border);
  }
  .pe-stat[data-geno="Aa"] .value {
    color: var(--caution-text);
  }
  .pe-stat[data-geno="aa"] {
    background: var(--negative-bg);
    border-color: var(--negative-border);
  }
  .pe-stat[data-geno="aa"] .value {
    color: var(--negative-text);
  }
  .pe-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--reference-border);
  }
  .pe-presets-label {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute-light);
    padding-right: 0.25rem;
  }
  .pe-preset-chip {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    padding: 0.3rem 0.625rem;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .pe-preset-chip:hover {
    border-color: var(--accent-border);
    color: var(--accent);
  }
  .pe-preset-chip[aria-pressed="true"], .pe-preset-chip[data-active="true"] {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .rxn {
    margin-block: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 3);
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    line-height: 1.5;
    color: var(--reader-text);
  }
  .rxn-species {
    display: inline-flex;
    align-items: baseline;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    font-feature-settings: "tnum";
  }
  .rxn-species sub, .rxn-species sup {
    font-size: 0.72em;
    line-height: 0;
  }
  .rxn-state {
    margin-left: calc(var(--spacing) * 0.5);
    display: inline-block;
    font-size: 0.72em;
    color: var(--mute);
    font-style: italic;
    vertical-align: baseline;
  }
  .rxn-plus {
    margin-inline: calc(var(--spacing) * 0.5);
    display: inline-block;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
  }
  .rxn-arrow {
    position: relative;
    margin-inline: calc(var(--spacing) * 1);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
    padding: 0 0.25rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .rxn-arrow::before {
    content: attr(data-reagent);
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute-text, var(--mute));
    line-height: 1.1;
    text-align: center;
  }
  .rxn-arrow::after {
    content: "⟶";
    display: block;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    line-height: 1;
    min-width: 3rem;
    text-align: center;
    margin-top: -0.15em;
  }
  .rxn-arrow[data-equilibrium="true"]::after {
    content: "⇌";
    border-bottom: 0;
    font-size: 1.4rem;
  }
  .rxn-arrow .rxn-conditions {
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute-text, var(--mute));
    line-height: 1.1;
    text-align: center;
    margin-top: 0.1rem;
  }
  .rxn-species .rxn-up::after {
    content: " ↑";
    color: var(--mute);
  }
  .rxn-species .rxn-down::after {
    content: " ↓";
    color: var(--mute);
  }
  .rxn-block {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background: var(--reference-bg, var(--accent-bg));
    border: 1px solid var(--reference-border, var(--accent-border));
  }
  .rxn-block .rxn-step-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
  }
  .periodic-table {
    display: grid;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background: var(--card-bg, #fff);
    border: 1px solid var(--reference-border);
    overflow-x: auto;
  }
  .pt-grid {
    display: grid;
    grid-template-columns: repeat(18, minmax(2.4rem, 1fr));
    grid-template-rows: repeat(7, minmax(2.6rem, auto));
    gap: 0.15rem;
    min-width: 720px;
  }
  .pt-fblock {
    display: grid;
    grid-template-columns: repeat(15, minmax(2.4rem, 1fr));
    gap: 0.15rem;
    min-width: 600px;
  }
  .pt-fblock-label {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    grid-column: 1 / -1;
    font-size: 0.71875rem;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin-top: 0.25rem;
  }
  .pt-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    border-radius: 0.25rem;
    padding: 0.2rem 0.25rem 0.15rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--mute-border);
    font-size: 0.71875rem;
    color: var(--reader-text);
    min-height: 2.6rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .pt-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    z-index: 1;
  }
  .pt-number {
    font-size: 0.71875rem;
    color: var(--mute);
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .pt-symbol {
    text-align: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--ink-strong, var(--reader-text));
    margin: 0.1rem 0;
  }
  .pt-mass {
    text-align: center;
    font-size: 0.71875rem;
    color: var(--mute);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pt-cell[data-block="s"] {
    background: var(--rose-bg, #ffe4e6);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rose-bg, #ffe4e6) 70%, transparent);
    }
    border-color: var(--rose-text, #9f1239);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--rose-text, #9f1239) 25%, transparent );
    }
  }
  .pt-cell[data-block="s"] .pt-symbol {
    color: var(--rose-text, #9f1239);
  }
  .pt-cell[data-block="p"] {
    background: var(--indigo-bg, #dbeafe);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--indigo-bg, #dbeafe) 70%, transparent);
    }
    border-color: var(--indigo-text, #1e40af);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--indigo-text, #1e40af) 25%, transparent );
    }
  }
  .pt-cell[data-block="p"] .pt-symbol {
    color: var(--indigo-text, #1e40af);
  }
  .pt-cell[data-block="d"] {
    background: var(--emerald-bg, #d1fae5);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--emerald-bg, #d1fae5) 70%, transparent);
    }
    border-color: var(--emerald-text, #065f46);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--emerald-text, #065f46) 22%, transparent );
    }
  }
  .pt-cell[data-block="d"] .pt-symbol {
    color: var(--emerald-text, #065f46);
  }
  .pt-cell[data-block="f"] {
    background: var(--violet-bg, #ede9fe);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--violet-bg, #ede9fe) 70%, transparent);
    }
    border-color: var(--violet-text, #6b21a8);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--violet-text, #6b21a8) 25%, transparent );
    }
  }
  .pt-cell[data-block="f"] .pt-symbol {
    color: var(--violet-text, #6b21a8);
  }
  .pt-cell[data-family="alkali"] {
    background: color-mix(in srgb, #fecaca 75%, transparent);
    border-color: color-mix(in srgb, #b91c1c 30%, transparent);
  }
  .pt-cell[data-family="alkali"] .pt-symbol {
    color: #b91c1c;
  }
  .pt-cell[data-family="alkaline-earth"] {
    background: color-mix(in srgb, #fed7aa 75%, transparent);
    border-color: color-mix(in srgb, #c2410c 28%, transparent);
  }
  .pt-cell[data-family="alkaline-earth"] .pt-symbol {
    color: #c2410c;
  }
  .pt-cell[data-family="halogen"] {
    background: color-mix(in srgb, #fef08a 70%, transparent);
    border-color: color-mix(in srgb, #a16207 28%, transparent);
  }
  .pt-cell[data-family="halogen"] .pt-symbol {
    color: #a16207;
  }
  .pt-cell[data-family="noble-gas"] {
    background: color-mix(in srgb, #ddd6fe 70%, transparent);
    border-color: color-mix(in srgb, #5b21b6 28%, transparent);
  }
  .pt-cell[data-family="noble-gas"] .pt-symbol {
    color: #5b21b6;
  }
  .pt-cell[data-active="true"] {
    box-shadow: 0 0 0 2px var(--accent-strong, var(--reader-text)), 0 2px 4px rgb(0 0 0 / 10%);
    transform: translateY(-1px);
    z-index: 2;
  }
  .pt-cell[data-dim="true"] {
    opacity: 0.32;
  }
  .pt-cell[data-trend="1"] {
    background: color-mix(in srgb, #0e7490 22%, white);
    border-color: color-mix(in srgb, #0e7490 35%, transparent);
  }
  .pt-cell[data-trend="2"] {
    background: color-mix(in srgb, #14b8a6 22%, white);
    border-color: color-mix(in srgb, #14b8a6 35%, transparent);
  }
  .pt-cell[data-trend="3"] {
    background: color-mix(in srgb, #84cc16 22%, white);
    border-color: color-mix(in srgb, #84cc16 35%, transparent);
  }
  .pt-cell[data-trend="4"] {
    background: color-mix(in srgb, #f59e0b 22%, white);
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
  }
  .pt-cell[data-trend="5"] {
    background: color-mix(in srgb, #ef4444 22%, white);
    border-color: color-mix(in srgb, #ef4444 35%, transparent);
  }
  .pt-cell[data-trend="6"] {
    background: color-mix(in srgb, #be123c 22%, white);
    border-color: color-mix(in srgb, #be123c 35%, transparent);
  }
  .pt-cell[data-trend] .pt-symbol {
    color: var(--ink-strong, var(--reader-text));
  }
  .pt-cell[data-trend] .pt-mass {
    color: var(--reader-text);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .pt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--reference-border);
  }
  .pt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--reader-text);
  }
  .pt-legend-swatch {
    display: inline-block;
    border-radius: var(--radius-sm);
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid;
  }
  .pt-legend-label strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .pt-legend-label small {
    color: var(--mute);
    font-size: 0.7rem;
  }
  .pt-trend-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.71875rem;
    color: var(--mute);
  }
  .pt-trend-bar-track {
    flex: 1;
    border-radius: 0.25rem;
    height: 0.5rem;
    background: linear-gradient( to right, color-mix(in srgb, #be123c 35%, white), color-mix(in srgb, #f59e0b 35%, white), color-mix(in srgb, #0e7490 35%, white) );
    border: 1px solid var(--mute-border);
  }
  .pt-caption {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    margin-top: 0.5rem;
    font-style: italic;
    line-height: 1.5;
  }
  .pt-caption em {
    font-style: normal;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  @media (width <= 800px) {
    .pt-grid {
      min-width: 540px;
    }
    .pt-cell {
      font-size: 0.6rem;
    }
    .pt-symbol {
      font-size: 0.75rem;
    }
  }
  .live-builder {
    display: grid;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    grid-template-columns: minmax(0, 1fr);
    background: var(--card-bg, #fff);
    border: 1px solid var(--reference-border);
  }
  @media (width >= 720px) {
    .live-builder, .live-builder[data-layout="canvas"] {
      grid-template-columns: 1.4fr 1fr;
    }
    .live-builder[data-layout="stack"] {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .lb-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    gap: 0.5rem;
    padding: 0.875rem;
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    min-height: 280px;
  }
  .lb-figure > .param-row {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .lb-figure > .param-row > .param-row-control {
    justify-content: flex-start;
  }
  .lb-canvas-svg {
    width: 100%;
    height: 240px;
    display: block;
  }
  .lb-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.25rem;
    padding: 0.4rem 0.6rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--mute-border);
    font-size: 0.78125rem;
  }
  .lb-counter-label {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--mute);
    font-size: 0.71875rem;
    letter-spacing: 0.06em;
  }
  .lb-counter-value {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--ink-strong, var(--reader-text));
  }
  .lb-counter-value[data-balanced="true"] {
    color: var(--emerald-text, #065f46);
  }
  .lb-counter-value[data-balanced="false"] {
    color: var(--rose-text, #991b1b);
  }
  .lb-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    align-content: start;
  }
  .lb-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mute-border);
    border-radius: 0.375rem;
    background: var(--card-bg, #fff);
  }
  .lb-control-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-strong, var(--reader-text));
  }
  .lb-control-label small {
    display: block;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--mute);
    font-size: 0.71875rem;
    margin-top: 0.05rem;
  }
  .lb-section-label {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
    padding: 0.4rem 0 0.1rem;
  }
  .lb-section-label small {
    display: block;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--mute);
    font-size: 0.71875rem;
    margin-top: 0.05rem;
  }
  .lb-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--mute-border);
    border-radius: 0.3rem;
    overflow: hidden;
    background: var(--card-bg, #fff);
  }
  .lb-stepper-btn {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg, #fff);
    color: var(--mute);
    border: none;
    font-size: 0.84375rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .lb-stepper-btn:hover:not(:disabled) {
    background: var(--mute-subtle, #f3f4f6);
    color: var(--ink-strong, var(--reader-text));
  }
  .lb-stepper-btn:disabled {
    color: var(--mute-light);
    cursor: not-allowed;
  }
  .lb-stepper-value {
    min-width: 1.6rem;
    text-align: center;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    font-size: 0.84375rem;
    color: var(--ink-strong, var(--reader-text));
    border-left: 1px solid var(--mute-border);
    border-right: 1px solid var(--mute-border);
    padding: 0 0.25rem;
  }
  .lb-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--reference-border);
  }
  .lb-status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.375rem;
    border: 1px solid var(--mute-border);
    background: var(--card-bg, #fff);
    min-width: 5rem;
  }
  .lb-status-label {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }
  .lb-status-line {
    font-size: 0.71875rem;
    color: var(--reader-text);
    line-height: 1.2;
    text-align: center;
  }
  .lb-status-line strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .lb-status-pill {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
  }
  .lb-status-pill[data-state="success"] {
    background: var(--emerald-bg, #d1fae5);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--emerald-bg, #d1fae5) 60%, transparent);
    }
    color: var(--emerald-text, #065f46);
  }
  .lb-status-pill[data-state="info"] {
    background: var(--sky-bg, #e0f2fe);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sky-bg, #e0f2fe) 60%, transparent);
    }
    color: var(--sky-text, #0369a1);
  }
  .lb-status-pill[data-state="warn"] {
    background: var(--amber-bg, #fef3c7);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--amber-bg, #fef3c7) 60%, transparent);
    }
    color: var(--amber-text, #92400e);
  }
  .lb-status-pill[data-state="error"] {
    background: var(--rose-bg, #fee2e2);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rose-bg, #fee2e2) 60%, transparent);
    }
    color: var(--rose-text, #991b1b);
  }
  .lb-verdict {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    line-height: 1.45;
  }
  .lb-verdict[data-status="success"] {
    background: var(--emerald-bg, #d1fae5);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--emerald-bg, #d1fae5) 60%, transparent);
    }
    border: 1px solid var(--emerald-text, #065f46);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--emerald-text, #065f46) 25%, transparent);
    }
    color: var(--emerald-text, #065f46);
  }
  .lb-verdict[data-status="info"] {
    background: var(--sky-bg, #e0f2fe);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--sky-bg, #e0f2fe) 60%, transparent);
    }
    border: 1px solid var(--sky-text, #075985);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--sky-text, #075985) 25%, transparent);
    }
    color: var(--sky-text, #075985);
  }
  .lb-verdict[data-status="warn"] {
    background: var(--amber-bg, #fef3c7);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--amber-bg, #fef3c7) 60%, transparent);
    }
    border: 1px solid var(--amber-text, #92400e);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--amber-text, #92400e) 25%, transparent);
    }
    color: var(--amber-text, #92400e);
  }
  .lb-verdict[data-status="error"] {
    background: var(--rose-bg, #fee2e2);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--rose-bg, #fee2e2) 60%, transparent);
    }
    border: 1px solid var(--rose-text, #991b1b);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--rose-text, #991b1b) 25%, transparent);
    }
    color: var(--rose-text, #991b1b);
  }
  .lb-verdict-icon {
    font-size: 0;
    line-height: 1;
  }
  .lb-verdict-icon::before {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }
  .lb-verdict[data-status="success"] .lb-verdict-icon::before {
    content: "✓";
  }
  .lb-verdict[data-status="info"] .lb-verdict-icon::before {
    content: "i";
  }
  .lb-verdict[data-status="warn"] .lb-verdict-icon::before {
    content: "!";
  }
  .lb-verdict[data-status="error"] .lb-verdict-icon::before {
    content: "✗";
  }
  .lb-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--reference-border);
  }
  .live-builder > .lb-presets {
    grid-column: 1 / -1;
  }
  .lb-preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    border: 1px solid var(--mute-border);
    background: var(--card-bg, #fff);
    color: var(--mute);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .lb-preset-chip:hover {
    color: var(--accent, var(--reader-text));
    border-color: var(--accent-border, var(--mute-border));
  }
  .lb-preset-chip[data-active="true"] {
    background: var(--accent-bg, var(--mute-subtle));
    border-color: var(--accent-border, var(--mute-border));
    color: var(--accent, var(--reader-text));
  }
  .network-explorer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--mute-border);
    border-radius: 0.75rem;
    background: var(--reader-bg);
  }
  .ne-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .ne-header-title {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--reader-text);
    margin: 0;
  }
  .ne-header-title small {
    display: block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
    margin-top: 0.1rem;
  }
  .ne-header-controls {
    display: flex;
    gap: 0.4rem;
    align-items: center;
  }
  .ne-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--mute-border);
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--reader-bg);
  }
  .ne-mode-btn {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mute);
    background: transparent;
    border: none;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.15s, background 0.15s;
  }
  .ne-mode-btn + .ne-mode-btn {
    border-left: 1px solid var(--mute-border);
  }
  .ne-mode-btn:hover {
    color: var(--reader-text);
  }
  .ne-mode-btn.is-on {
    color: var(--reader-bg);
    background: var(--accent, var(--indigo-text));
  }
  .ne-mode-btn .ne-mode-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
  }
  .ne-mode-btn.is-on.is-remove {
    background: var(--rose-text, #be123c);
  }
  .ne-reset {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mute);
    background: transparent;
    border: 1px solid var(--mute-border);
    border-radius: 0.4rem;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .ne-reset:hover {
    color: var(--rose-text, #be123c);
    border-color: var(--rose-text, #be123c);
    background: var(--rose-bg, #ffe4e6);
  }
  .ne-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0.85rem;
    align-items: stretch;
  }
  .ne-canvas {
    position: relative;
    width: 100%;
    border: 1px solid var(--mute-border);
    border-radius: 0.55rem;
    background: radial-gradient( circle at 50% 0%, var(--amber-text, #92400e) 0%, transparent 45% ), linear-gradient( 180deg, var(--sky-text, #0369a1) 0%, var(--reader-bg) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( circle at 50% 0%, color-mix(in srgb, var(--amber-text, #92400e) 6%, transparent) 0%, transparent 45% ), linear-gradient( 180deg, color-mix(in srgb, var(--sky-text, #0369a1) 4%, transparent) 0%, var(--reader-bg) 100% );
    }
    overflow: hidden;
  }
  .ne-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 440;
  }
  .ne-band-label {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--mute);
    opacity: 0.55;
  }
  .ne-band-line {
    stroke: var(--mute-border);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: 0.5;
  }
  .ne-edge {
    fill: none;
    stroke: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--mute) 55%, transparent);
    }
    stroke-width: 1.5;
    transition: stroke 0.18s, stroke-width 0.18s, opacity 0.18s;
  }
  .ne-edge.is-dim {
    opacity: 0.18;
  }
  .ne-edge.is-highlighted {
    stroke: var(--accent, var(--indigo-text));
    stroke-width: 2.5;
    opacity: 1;
  }
  .ne-edge.is-removed {
    stroke: var(--rose-text, #be123c);
    stroke-dasharray: 3 4;
    opacity: 0.55;
  }
  .ne-arrow-fill {
    fill: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--mute) 65%, transparent);
    }
  }
  .ne-arrow-fill-hi {
    fill: var(--accent, var(--indigo-text));
  }
  .ne-arrow-fill-cut {
    fill: var(--rose-text, #be123c);
  }
  .ne-node {
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .ne-node:hover {
    transform: translate(0, -1px);
  }
  .ne-node-rect {
    stroke-width: 1.5;
    rx: 14;
    ry: 14;
    transition: fill 0.18s, stroke 0.18s, stroke-width 0.18s;
  }
  .ne-node-text {
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    transition: fill 0.18s;
  }
  .ne-node-sub {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-anchor: middle;
    pointer-events: none;
    fill: var(--mute);
  }
  .ne-node.is-energy .ne-node-rect {
    fill: var(--amber-bg, #fef3c7);
    stroke: var(--amber-text, #92400e);
  }
  .ne-node.is-energy .ne-node-text {
    fill: var(--amber-text, #92400e);
  }
  .ne-node.is-producer .ne-node-rect {
    fill: var(--emerald-bg, #d1fae5);
    stroke: var(--emerald-text, #047857);
  }
  .ne-node.is-producer .ne-node-text {
    fill: var(--emerald-text, #047857);
  }
  .ne-node.is-primary .ne-node-rect {
    fill: var(--amber-bg, #fef3c7);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--amber-bg, #fef3c7) 60%, var(--reader-bg));
    }
    stroke: var(--amber-text, #92400e);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix( in srgb, var(--amber-text, #92400e) 60%, var(--mute-border) );
    }
  }
  .ne-node.is-primary .ne-node-text {
    fill: var(--reader-text);
  }
  .ne-node.is-secondary .ne-node-rect {
    fill: var(--indigo-bg, #e0e7ff);
    stroke: var(--indigo-text, #4338ca);
  }
  .ne-node.is-secondary .ne-node-text {
    fill: var(--indigo-text, #4338ca);
  }
  .ne-node.is-apex .ne-node-rect {
    fill: var(--rose-bg, #ffe4e6);
    stroke: var(--rose-text, #be123c);
  }
  .ne-node.is-apex .ne-node-text {
    fill: var(--rose-text, #be123c);
  }
  .ne-node.is-active .ne-node-rect {
    stroke-width: 3;
    filter: drop-shadow( 0 2px 6px var(--reader-text) );
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow( 0 2px 6px color-mix(in srgb, var(--reader-text) 25%, transparent) );
    }
  }
  .ne-node.is-connected .ne-node-rect {
    stroke-width: 2.5;
  }
  .ne-node.is-dim .ne-node-rect {
    opacity: 0.35;
  }
  .ne-node.is-dim .ne-node-text {
    opacity: 0.55;
  }
  .ne-node.is-removed .ne-node-rect {
    fill: var(--mute-subtle, #f3f4f6);
    stroke: var(--mute-border);
  }
  .ne-node.is-removed .ne-node-text {
    fill: var(--mute);
    text-decoration: line-through;
  }
  .ne-node-x {
    stroke: var(--rose-text, #be123c);
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
  }
  .ne-status-ring {
    fill: none;
    stroke-width: 2.5;
    rx: 18;
    ry: 18;
    pointer-events: none;
  }
  .ne-status-ring.is-starving {
    stroke: #ea580c;
    animation: ne-pulse 1.3s ease-in-out infinite;
  }
  .ne-status-ring.is-stressed {
    stroke: #d97706;
    stroke-dasharray: 4 3;
  }
  .ne-status-ring.is-overpop {
    stroke: var(--rose-text, #be123c);
    stroke-width: 3;
  }
  @keyframes ne-pulse {
    0%, 100% {
      opacity: 0.55;
      stroke-width: 2.5;
    }
    50% {
      opacity: 1;
      stroke-width: 4;
    }
  }
  .ne-node-badge {
    pointer-events: none;
  }
  .ne-node-badge-circ {
    stroke: var(--reader-bg);
    stroke-width: 1.5;
  }
  .ne-node-badge-circ.is-starving {
    fill: #ea580c;
  }
  .ne-node-badge-circ.is-stressed {
    fill: #d97706;
  }
  .ne-node-badge-circ.is-overpop {
    fill: var(--rose-text, #be123c);
  }
  .ne-node-badge-text {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
  }
  .ne-panel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.85rem 0.75rem;
    border: 1px solid var(--mute-border);
    border-radius: 0.55rem;
    background: var(--reader-bg);
    min-height: 0;
  }
  .ne-panel-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
    line-height: 1.45;
    padding: 1.5rem 0.5rem;
  }
  .ne-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--mute-border);
  }
  .ne-panel-name {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
    margin: 0;
    line-height: 1.2;
  }
  .ne-panel-chip {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--mute-subtle, #f3f4f6);
    color: var(--mute);
    border: 1px solid var(--mute-border);
    white-space: nowrap;
  }
  .ne-panel-chip.is-energy {
    background: var(--amber-bg, #fef3c7);
    color: var(--amber-text, #92400e);
    border-color: var(--amber-text, #92400e);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--amber-text, #92400e) 30%, transparent );
    }
  }
  .ne-panel-chip.is-producer {
    background: var(--emerald-bg, #d1fae5);
    color: var(--emerald-text, #047857);
    border-color: var(--emerald-text, #047857);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--emerald-text, #047857) 30%, transparent );
    }
  }
  .ne-panel-chip.is-primary {
    background: var(--amber-bg, #fef3c7);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix( in srgb, var(--amber-bg, #fef3c7) 60%, var(--reader-bg) );
    }
    color: var(--amber-text, #92400e);
    border-color: var(--amber-text, #92400e);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--amber-text, #92400e) 25%, transparent );
    }
  }
  .ne-panel-chip.is-secondary {
    background: var(--indigo-bg, #e0e7ff);
    color: var(--indigo-text, #4338ca);
    border-color: var(--indigo-text, #4338ca);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--indigo-text, #4338ca) 30%, transparent );
    }
  }
  .ne-panel-chip.is-apex {
    background: var(--rose-bg, #ffe4e6);
    color: var(--rose-text, #be123c);
    border-color: var(--rose-text, #be123c);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--rose-text, #be123c) 30%, transparent );
    }
  }
  .ne-panel-body {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    line-height: 1.45;
    color: var(--reader-text);
  }
  .ne-panel-section {
    margin-top: 0.4rem;
  }
  .ne-panel-section h5 {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin: 0 0 0.25rem;
  }
  .ne-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .ne-panel-list-item {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--mute-subtle, #f3f4f6);
    color: var(--reader-text);
    border: 1px solid var(--mute-border);
  }
  .ne-panel-list-item.is-empty {
    background: transparent;
    color: var(--mute);
    font-style: italic;
    border-style: dashed;
  }
  .ne-cascade-strip {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mute-border);
    border-radius: 0.55rem;
    background: var(--reader-bg);
  }
  .ne-cascade-empty {
    font-size: 0.71875rem;
    color: var(--mute);
    font-style: italic;
    text-align: center;
    padding: 0.15rem 0;
  }
  .ne-cascade-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.65rem;
    align-items: center;
  }
  .ne-cascade-row-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ne-cascade-row-label .ne-cascade-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
  }
  .ne-cascade-row.is-starving .ne-cascade-row-label {
    color: #ea580c;
  }
  .ne-cascade-row.is-starving .ne-cascade-dot {
    background: #ea580c;
  }
  .ne-cascade-row.is-stressed .ne-cascade-row-label {
    color: #d97706;
  }
  .ne-cascade-row.is-stressed .ne-cascade-dot {
    background: #d97706;
  }
  .ne-cascade-row.is-overpop .ne-cascade-row-label {
    color: var(--rose-text, #be123c);
  }
  .ne-cascade-row.is-overpop .ne-cascade-dot {
    background: var(--rose-text, #be123c);
  }
  .ne-cascade-row-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .ne-cascade-chip {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.12rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--mute-subtle, #f3f4f6);
    border: 1px solid var(--mute-border);
    color: var(--reader-text);
  }
  .ne-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    padding: 0.4rem 0.1rem 0;
    border-top: 1px dashed var(--mute-border);
  }
  .ne-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mute);
  }
  .ne-legend-swatch {
    width: 0.8rem;
    height: 0.6rem;
    border-radius: 0.2rem;
    border: 1.5px solid currentColor;
  }
  .ne-legend-swatch.is-energy {
    background: var(--amber-bg, #fef3c7);
    color: var(--amber-text, #92400e);
  }
  .ne-legend-swatch.is-producer {
    background: var(--emerald-bg, #d1fae5);
    color: var(--emerald-text, #047857);
  }
  .ne-legend-swatch.is-primary {
    background: var(--amber-bg, #fef3c7);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix( in srgb, var(--amber-bg, #fef3c7) 60%, var(--reader-bg) );
    }
    color: var(--amber-text, #92400e);
  }
  .ne-legend-swatch.is-secondary {
    background: var(--indigo-bg, #e0e7ff);
    color: var(--indigo-text, #4338ca);
  }
  .ne-legend-swatch.is-apex {
    background: var(--rose-bg, #ffe4e6);
    color: var(--rose-text, #be123c);
  }
  @media (width <= 780px) {
    .ne-stage {
      grid-template-columns: minmax(0, 1fr);
    }
    .ne-cascade-row {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }
  }
  @media (width <= 520px) {
    .ne-node-text {
      font-size: 11px;
    }
    .ne-node-sub {
      font-size: 8px;
    }
  }
  .anim-wrap {
    display: grid;
    transition-property: grid-template-rows;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 320ms;
    transition-duration: 320ms;
    --tw-ease: cubic-bezier(0.4,0,0.2,1);
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    grid-template-rows: 0fr;
  }
  details[open] > .anim-wrap {
    grid-template-rows: 1fr;
  }
  .anim-wrap > * {
    overflow: hidden;
  }
  .chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  details[open] > summary .chevron {
    transform: rotate(180deg);
  }
  .section-title-wrap:has(.section-desc) {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 0.5);
  }
  .section-desc {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--mute);
  }
  .section-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  details.section-box[open] .section-hint {
    display: none;
  }
  .section-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .section-body > * {
    margin-top: calc(var(--spacing) * 0) !important;
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .section-body > table[data-accent], .section-body > [class^="info-card-"]:not(.info-card-title), .section-body > [class^="content-box-"]:not( .content-box-header, .content-box-title, .content-box-body ) {
    margin-top: calc(var(--spacing) * 0) !important;
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .section-body > right-wrong-pairs table, .section-body > right-wrong-pairs {
    margin-top: calc(var(--spacing) * 0) !important;
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .section-body > .font-medium + * {
    margin-top: -1rem !important;
  }
  .sub-sections {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .sub-sections > .section-box {
    margin-block: calc(var(--spacing) * 2);
  }
  .sub-sections-header {
    margin-bottom: calc(var(--spacing) * 1);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .sub-sections-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--mute);
    text-transform: uppercase;
  }
  .sub-sections-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 3);
  }
  .expand-toggle-btn {
    display: grid;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    cursor: pointer;
    place-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    color: var(--mute);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .expand-toggle-btn:hover {
    border-color: var(--content-border);
    background-color: var(--highlight-text-bg);
  }
  .expand-toggle-btn .expand-ico-expand {
    display: none;
  }
  .expand-toggle-btn .expand-ico-collapse {
    display: block;
  }
  .expand-toggle-btn.all-collapsed .expand-ico-expand {
    display: block;
  }
  .expand-toggle-btn.all-collapsed .expand-ico-collapse {
    display: none;
  }
  .example-box {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--accent-border);
    background-color: var(--accent-bg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
  }
  .example-label {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .example-expr {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .illustration-card {
    margin-bottom: calc(var(--spacing) * 8);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  details.illustration-card[open] {
    border-color: var(--content-border);
  }
  .illustration-header {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    background-color: var(--accent-bg);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    -webkit-tap-highlight-color: transparent;
  }
  .illustration-header::-webkit-details-marker {
    display: none;
  }
  details.illustration-card[open] > .illustration-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .illustration-num {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--accent-bg);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--mute);
  }
  .illustration-title {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .illustration-toggle {
    display: grid;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--highlight-text-bg);
    color: var(--mute);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 250ms;
    transition-duration: 250ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  details.illustration-card[open] > .illustration-header .illustration-toggle {
    transform: rotate(45deg);
  }
  .illustration-body {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .bullet-list {
    display: flex;
    list-style-type: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
  }
  .bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .bullet-list li::before {
    margin-top: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 1);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: var(--accent);
  }
  .connector-divider {
    height: 1px;
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-800) 7%, transparent);
    }
  }
  .section-interactive-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--primary-text);
  }
  .interactive-zone {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--slate-border);
    background-size: 20px 20px;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .interactive-zone .katex {
    font-size: max(14px, 1em);
  }
  .interactive-zone .step-row .katex {
    font-size: max(14px, 0.95em);
  }
  .interactive-zone .step-rows {
    min-width: 280px;
  }
  .interact-hint {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: .85rem;
    --tw-leading: 1.55;
    line-height: 1.55;
    --tw-tracking: .01em;
    letter-spacing: .01em;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    margin-inline: 0;
    border-left: 3px solid var(--mute-border);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 8%, transparent);
    }
    color: var(--reader-text);
  }
  .interact-conclude {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: .85rem;
    --tw-leading: 1.5;
    line-height: 1.5;
    --tw-tracking: .01em;
    letter-spacing: .01em;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    margin-inline: 0;
    border-left: 3px solid var(--verify-border);
    background: var(--verify-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--verify-bg) 70%, transparent);
    }
    color: var(--reader-text);
  }
  .interact-conclude > strong:first-child {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: .92rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--verify-solid);
  }
  .interact-conclude ul {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 0);
    padding-left: calc(var(--spacing) * 5);
    list-style: disc;
  }
  .interact-conclude li {
    --tw-leading: 1.55;
    line-height: 1.55;
    margin-block: 0.35rem;
  }
  .interact-conclude li::marker {
    color: var(--verify-solid);
  }
  .interactive-zone .interact-hint, .interactive-zone .interact-conclude {
    margin-inline: calc(-1 * var(--spacing) * 2);
  }
  .wb-box {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    padding-inline: 14px;
    padding-block: 10px;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1.58;
    line-height: 1.58;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
  }
  .ctrl-card {
    margin-top: calc(var(--spacing) * 2);
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 8%, transparent);
    }
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-800) 3%, transparent);
    }
    padding-inline: 14px;
    padding-block: calc(var(--spacing) * 3);
  }
  .ctrl-card-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .ctrl-label {
    font-size: .69rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .06em;
    letter-spacing: .06em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .ctrl-val {
    font-size: 1.2rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
  }
  input[type="range"] {
    height: 5px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    border-radius: 0.25rem;
    background-color: var(--accent-bg);
    --tw-outline-style: none;
    outline-style: none;
    -webkit-appearance: none;
  }
  input[type="range"]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 3px;
    border-color: var(--mute-border);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 130ms;
    transition-duration: 130ms;
    -webkit-appearance: none;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
  }
  input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.22);
  }
  .sl-accent::-webkit-slider-thumb {
    background-color: var(--accent);
  }
  .bar-track {
    height: calc(var(--spacing) * 9);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--reader-bg);
  }
  .bar-fill {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    border-radius: var(--radius-lg);
    padding-right: 10px;
    font-size: .8rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--reader-text);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bar-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: .68rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .05em;
    letter-spacing: .05em;
  }
  take-aways {
    display: block;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  take-away {
    display: block;
  }
  take-away-point {
    display: block;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--primary-text) 75%, var(--reader-text));
    }
    padding-left: 1.25em;
    text-indent: -1.25em;
  }
  take-away-point::before {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-right: 0.625em;
    border-radius: 9999px;
    background: var(--primary-base);
    vertical-align: 0.15em;
  }
  take-away-detail {
    display: block;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
    padding-left: 1.25em;
  }
  .prop-grid {
    margin-bottom: calc(var(--spacing) * 3.5);
    gap: calc(var(--spacing) * 2.5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  .prop-card {
    min-width: 140px;
    flex: 1;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 10%, transparent);
    }
    background-color: var(--reader-bg);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    font-size: .83rem;
    --tw-leading: 1.6;
    line-height: 1.6;
  }
  .prop-card-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: .72rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .06em;
    letter-spacing: .06em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .prop-card-math {
    overflow-x: auto;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .prop-card-math .katex-display {
    margin-block: calc(var(--spacing) * 0);
  }
  .prop-card-math .katex, .step-row-math .katex {
    white-space: normal;
  }
  .prop-card-math .katex .base, .step-row-math .katex .base {
    white-space: nowrap;
  }
  .prop-card-status {
    margin-top: calc(var(--spacing) * 1.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 7%, transparent);
    }
    padding-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .rbadge {
    display: inline-block;
    border-radius: var(--radius-md);
    background-color: var(--accent);
    padding-inline: 10px;
    padding-block: 2px;
    font-size: .92rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(-reader-text);
  }
  .sq {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
  }
  input[type="number"] {
    width: 100%;
    border-radius: 10px;
    background-color: var(--reader-bg);
    padding: calc(var(--spacing) * 2);
    text-align: center;
    font-family: var(--font-sans);
    font-size: .95rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-800);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 180ms;
    transition-duration: 180ms;
    --tw-outline-style: none;
    outline-style: none;
    appearance: textfield;
    border: 1.5px solid #dde3ee;
  }
  input[type="number"]:focus {
    border-color: var(--accent);
  }
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
  }
  .toggle-btn {
    cursor: pointer;
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1.5px;
    --tw-border-style: solid;
    border-style: solid;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: 9px;
    font-family: var(--font-sans);
    font-size: .85rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 160ms;
    transition-duration: 160ms;
  }
  .sub-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: .67rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .07em;
    letter-spacing: .07em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .fc-formula-display {
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
  }
  .fc-formula-display .katex {
    font-size: 1.4em !important;
  }
  .fc-var-sym .katex {
    font-size: 1.15em !important;
  }
  .fc-unit {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--mute);
  }
  .fc-cond-pill .katex .mord.text {
    font-size: 1em !important;
  }
  .fc-insight {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--highlight-text-bg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
  }
  .fc-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: 1fr 1fr;
  }
  @media (width <= 540px) {
    .fc-grid {
      grid-template-columns: 1fr;
    }
  }
  .fc-anatomy-title {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mute-border);
    background: var(--mute-border);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute-border) 25%, transparent);
    }
    color: var(--reader-text);
  }
  .fc-anatomy-single-col .fc-anatomy-vars {
    grid-template-columns: 1fr;
  }
  .fc-anatomy-single-col .fc-anatomy-var:nth-child(odd) {
    border-right: none;
  }
  .fc-anatomy-single-col .fc-anatomy-var:last-child {
    border-bottom: none;
  }
  .fc-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
  }
  @media (width <= 540px) {
    .fc-side {
      grid-template-columns: 1fr;
    }
    .fc-side-left {
      border-right: none !important;
      border-bottom: 1px solid var(--mute-border);
    }
  }
  .fc-side-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--highlight-text-bg);
    padding: calc(var(--spacing) * 6);
  }
  .fc-side-title {
    text-align: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1rem;
  }
  .fc-side-formula {
    text-align: center;
  }
  .fc-side-formula .katex {
    font-size: 1.5em !important;
  }
  .fc-side-note {
    margin-top: calc(var(--spacing) * 4);
    max-width: 280px;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
  }
  .fc-side-conditions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    margin-top: 1rem;
  }
  .fc-side-right {
    padding: calc(var(--spacing) * 5);
  }
  .fc-side-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--mute);
    text-transform: uppercase;
  }
  .fc-side-var {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-block: 10px;
  }
  .fc-side-var:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .fc-side-var-head {
    margin-bottom: 2px;
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
  }
  .fc-side-var-name {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fc-side-var-desc {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--mute);
  }
  .fc-side-var-desc strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .fc-side-insight {
    grid-column: 1 / -1;
    margin-inline: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--mute-border);
    padding-top: calc(var(--spacing) * 3);
  }
  .div-ladder {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 2.1;
  }
  .dl-row {
    display: flex;
  }
  .dl-div {
    min-width: calc(var(--spacing) * 7);
    border-right-style: var(--tw-border-style);
    border-right-width: 1.5px;
    border-color: var(--mute-border);
    padding-right: 7px;
    text-align: right;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
  }
  .dl-num {
    padding-left: 9px;
    color: var(--mute);
  }
  .dl-num-final {
    padding-left: 9px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .step-seq-wrap {
    overflow-x: auto;
    padding: 4px 0;
    margin: 12px 0;
  }
  .step-seq {
    display: flex;
    align-items: center;
    min-width: max-content;
  }
  .step-seq-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .step-seq-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
    gap: 2px;
  }
  .step-seq-box {
    display: flex;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1.5px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    font-family: var(--font-mono);
    font-size: .8rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--mute);
    transition-property: background,border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .step-seq-box.seq-start {
    border-color: var(--accent-border);
    background-color: var(--accent-bg);
    color: var(--accent);
  }
  .step-seq-box.seq-zero {
    animation: seq-pop 0.3s ease;
  }
  .step-seq-arrow-bar {
    height: 1.5px;
    width: calc(var(--spacing) * 5);
    background-color: var(--mute-border);
  }
  .step-seq-sub-lbl, .step-seq-step-lbl {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--mute);
  }
  @keyframes seq-pop {
    0% {
      transform: scale(0.82);
    }
    65% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  .pipe-badge-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
    flex-shrink: 0;
  }
  .pipe-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
  }
  .pipe-connector-dashed {
    margin-block: 3px;
    min-height: calc(var(--spacing) * 3.5);
    width: 1px;
    flex: 1;
    border-left-style: var(--tw-border-style);
    border-left-width: 1.5px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--mute-border);
  }
  .pipe-body {
    flex: 1;
    padding-bottom: 18px;
    padding-top: 4px;
  }
  .pipe-body:last-of-type {
    padding-bottom: 0;
  }
  .pipe-body h4 {
    margin-bottom: 5px;
    font-size: .9rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .pipe-body p {
    font-size: .83rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .why-branch {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px;
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .why-branch-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    font-size: .83rem;
    --tw-leading: 1.6;
    line-height: 1.6;
    padding: 10px 12px;
    background-color: var(--accent-bg);
    border-color: var(--accent-border);
  }
  .why-branch-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: .6rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .1em;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .wb-math .katex {
    font-size: 1.02em;
  }
  .wb-result-prefix {
    margin-right: calc(var(--spacing) * 2);
    font-size: .66rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: .12em;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .objectives {
    padding-top: .65rem;
    border-top: 1px dashed var(--mute-border);
  }
  .objectives ul {
    margin: calc(var(--spacing) * 0);
    display: flex;
    list-style-type: none;
    flex-direction: column;
    gap: .4rem;
    padding: calc(var(--spacing) * 0);
  }
  .objectives ul > li {
    position: relative;
    padding-inline-start: calc(var(--spacing) * 4) !important;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1.55;
    line-height: 1.55;
  }
  .objectives ul > li::before {
    content: "•";
    position: absolute;
    left: calc(var(--spacing) * 0);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--primary-text);
  }
  .objectives li strong {
    margin-right: .2rem;
    color: var(--primary-text);
  }
  .preset-row {
    margin-block: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
  }
  .preset-lbl {
    margin-right: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 1.5px;
    letter-spacing: 1.5px;
    color: var(--mute);
    text-transform: uppercase;
  }
  .preset-chip {
    cursor: pointer;
    border-radius: 5px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: transparent;
    padding-inline: 10px;
    padding-block: 3px;
    font-family: var(--font-mono);
    font-size: .77rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--mute);
  }
  .preset-chip:hover {
    border-color: var(--primary-border);
  }
  .preset-chip-active {
    border-color: var(--primary-border);
    background-color: var(--primary-bg);
    fill: var(--primary-bg);
    color: var(--primary-text);
    fill: var(--primary-text);
  }
  .preset-chip-disabled {
    cursor: not-allowed;
    --tw-border-style: dashed;
    border-style: dashed;
    opacity: 35%;
  }
  .sbf-row-input {
    position: relative;
    padding-left: 5.5rem;
    margin-bottom: 0.65rem;
  }
  .sbf-row-input .preset-lbl {
    position: absolute;
    left: 0;
    top: 0.5rem;
  }
  .param-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 6%, transparent);
    }
    padding-block: calc(var(--spacing) * 2.5);
  }
  .param-row:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .param-row-label {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--reader-text);
  }
  .param-row-caption {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--mute);
  }
  .param-row-control {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .param-slider {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 6%, transparent);
    }
    padding-block: calc(var(--spacing) * 2.5);
  }
  .param-slider:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .param-slider-head {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .param-slider-val {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .param-slider > range-slider {
    margin-top: auto;
    width: 100%;
  }
  .param-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 6);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-800) 6%, transparent);
    }
    padding-block: calc(var(--spacing) * 0);
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .param-grid:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .param-grid > .param-row {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .param-grid > .param-row > .param-row-control {
    justify-content: flex-start;
  }
  .tool-row {
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .tool-title {
    font-size: .88rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--reader-text);
  }
  .tool-input-row {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  input[type="number"].tool-num-input {
    width: 110px;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    padding-inline: 11px;
    padding-block: 6px;
    font-family: var(--font-mono);
    font-size: .88rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-outline-style: none;
    outline-style: none;
    appearance: textfield;
  }
  input[type="number"].tool-num-input:focus {
    border-color: var(--accent);
  }
  input[type="number"].tool-num-input::-webkit-inner-spin-button, input[type="number"].tool-num-input::-webkit-outer-spin-button {
    appearance: none;
  }
  .run-btn {
    cursor: pointer;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--primary-border);
    background-color: var(--primary-bg);
    fill: var(--primary-bg);
    color: var(--primary-text);
    fill: var(--primary-text);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .run-btn:hover {
    opacity: 0.87;
  }
  .illus-table {
    width: 100%;
    font-size: .84rem;
    border-collapse: collapse;
  }
  .illus-table th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 2%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-800) 2%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs) !important;
    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
    font-size: 9.5px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 2px;
    letter-spacing: 2px;
    color: var(--mute);
    text-transform: uppercase;
  }
  .illus-table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: 10px;
    vertical-align: top;
    --tw-leading: 1.55;
    line-height: 1.55;
    color: var(--reader-text);
  }
  .illus-table tr:last-child td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .illus-table-key {
    width: 130px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--reader-text);
  }
  .illus-table-num {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    width: 72px;
  }
  .illus-table-reveal {
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: .75rem;
    --tw-leading: 1.9;
    line-height: 1.9;
    color: var(--mute);
  }
  .verdict-container {
    overflow-x: auto;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
  }
  .verdict-badge {
    display: inline-block;
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
  }
  .verify-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .verify-tick {
    display: flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
  }
  .section-divider {
    margin-block: calc(var(--spacing) * 1);
    height: 1px;
    background: linear-gradient( 90deg, transparent, var(--mute-border) 30%, var(--mute-border) 70%, transparent );
  }
  .text-mute {
    color: var(--mute) !important;
  }
  table[data-accent] {
    margin-block: calc(var(--spacing) * 4);
    width: 100%;
    border-collapse: separate;
    overflow: visible;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    border-spacing: 0;
    border: 0 solid var(--accent-border);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-radius: 0;
  }
  p + div:has(> table[data-accent]), p + table[data-accent] {
    margin-top: 0.5rem;
  }
  table[data-accent].tb-border-2 {
    overflow: clip;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--accent-border);
  }
  [class^="info-card-"] table[data-accent] {
    margin-block: calc(var(--spacing) * 0);
    overflow: visible;
    border-radius: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  [class^="info-card-"]:has(> div > table[data-accent]) {
    overflow: hidden;
    padding-inline: calc(var(--spacing) * 0);
    padding-bottom: calc(var(--spacing) * 0);
  }
  table[data-accent] thead th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--accent-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    vertical-align: bottom;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
  }
  table[data-accent] thead th :is(.katex, .katex-html, math) {
    text-transform: none;
    letter-spacing: normal;
  }
  table[data-accent] tbody td, table[data-accent] tbody th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    vertical-align: top;
  }
  table[data-accent] tbody tr + tr td, table[data-accent] tbody tr + tr th {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--accent-border);
  }
  table[data-accent] tbody tr {
    background-color: var(--app-surface,var(--reader-bg));
  }
  table[data-accent] thead > tr > :first-child, table[data-accent] tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  table[data-accent] thead > tr > :first-child {
    background-color: var(--app-surface, var(--reader-bg));
    background-image: linear-gradient(var(--accent-bg), var(--accent-bg));
  }
  table[data-accent] tbody > tr > :first-child {
    background: var(--app-surface, var(--reader-bg));
  }
  table[data-accent].tb-flow thead th, table[data-accent].tb-flow tbody td {
    text-align: center;
  }
  table[data-accent].tb-flow tbody td + td::before, table[data-accent].tb-flow thead th + th::before {
    margin-right: calc(var(--spacing) * 2);
    font-family: system-ui,sans-serif;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--accent);
    opacity: 40%;
    content: "→ ";
  }
  table[data-accent] code {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--accent-border);
    background-color: var(--accent-bg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 1.05em;
    --tw-font-weight: var(--font-mono);
    font-weight: var(--font-mono);
    color: var(--accent);
  }
  .card .card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card .card-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    border: 1px solid var(--accent-border);
    background-color: var(--accent-bg);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
  }
  .hl {
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .warn-pill {
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: 1px;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    background-color: var(--negative-bg);
    color: var(--negative-text);
  }
  .error-card {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    background: var(--negative-bg);
    color: var(--negative-text);
    border: 1px solid var(--negative-base);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--negative-base) 22%, transparent);
    }
  }
  .error-card-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    background: var(--negative-base);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--negative-base) 14%, transparent);
    }
    color: var(--negative-base);
  }
  .error-card-body {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .error-card-title {
    font-size: var(--reader-font-size);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--negative-text);
  }
  .error-card-message {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--negative-text);
    opacity: 0.9;
  }
  .error-card-action {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: flex-start;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--negative-base);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--negative-base) 14%, transparent);
    }
    color: var(--negative-text);
  }
  .error-card-action:hover {
    background: var(--negative-base);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--negative-base) 22%, transparent);
    }
    color: var(--negative-text);
  }
  @media (width <= 480px) {
    .error-card {
      flex-direction: column;
    }
    .error-card-action {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .toast-error {
    background-color: var(--reader-bg);
    background-image: linear-gradient(var(--negative-bg), var(--negative-bg));
    color: var(--negative-text);
    border: 1px solid var(--negative-base);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--negative-base) 22%, transparent);
    }
  }
  .quiz-settings-form {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    background-color: var(--reader-bg);
  }
  .quiz-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    @media (width >= 640px) {
      padding-inline: calc(var(--spacing) * 6);
    }
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--reader-bg));
    }
  }
  .quiz-settings-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--reader-text);
  }
  .quiz-settings-subtitle {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--mute);
    @media (width >= 640px) {
      font-size: 14px;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .quiz-settings-close {
    display: grid;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--mute);
  }
  .quiz-settings-close:hover {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 10%, transparent);
    }
    color: var(--reader-text);
  }
  .quiz-settings-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    @media (width >= 640px) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .quiz-settings-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .quiz-settings-section:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
    padding-bottom: calc(var(--spacing) * 0);
  }
  .quiz-settings-section-head {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 10%, transparent);
    }
    color: var(--mark);
    align-self: flex-start;
  }
  .quiz-settings-section-icon {
    color: var(--mark);
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .quiz-settings-section-title {
    line-height: 1;
  }
  .quiz-settings-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .quiz-settings-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .quiz-settings-label {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .quiz-settings-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 160px;
  }
  .quiz-settings-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--reader-bg);
    color: var(--reader-text);
    font-variant-numeric: tabular-nums;
    max-width: 140px;
  }
  .quiz-settings-input:focus {
    outline: none;
    border-color: var(--mark);
    box-shadow: 0 0 0 3px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 18%, transparent);
    }
  }
  .quiz-settings-input-wrap > .quiz-settings-input {
    max-width: none;
  }
  .quiz-settings-input-num {
    padding-right: calc(var(--spacing) * 10);
  }
  .quiz-settings-input-suffix {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
  }
  .quiz-settings-help {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--mute);
  }
  .quiz-settings-error {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--negative-text, #b91c1c);
  }
  .quiz-settings-toggle-group {
    display: flex;
    flex-direction: column;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--mute-border);
    }
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
  }
  .quiz-settings-toggle {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .quiz-settings-toggle:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, transparent);
    }
  }
  .quiz-settings-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .quiz-settings-toggle-track {
    position: relative;
    margin-top: calc(var(--spacing) * 0.5);
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 28%, transparent);
    }
  }
  .quiz-settings-toggle-input:checked + .quiz-settings-toggle-track {
    background: var(--mark);
  }
  .quiz-settings-toggle-input:focus-visible + .quiz-settings-toggle-track {
    box-shadow: 0 0 0 3px var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 25%, transparent);
    }
  }
  .quiz-settings-toggle-thumb {
    position: absolute;
    top: calc(var(--spacing) * 0.5);
    left: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, black 25%, transparent);
  }
  .quiz-settings-toggle-input:checked + .quiz-settings-toggle-track .quiz-settings-toggle-thumb {
    transform: translateX(16px);
  }
  .quiz-settings-toggle-text {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .quiz-settings-toggle-label {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
  }
  .quiz-settings-toggle-help {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--mute);
  }
  .quiz-settings-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    @media (width >= 640px) {
      padding-inline: calc(var(--spacing) * 6);
    }
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 3%, var(--reader-bg));
    }
  }
  .quiz-settings-cancel {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--mute);
  }
  .quiz-settings-cancel:hover {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 10%, transparent);
    }
    color: var(--reader-text);
  }
  .quiz-settings-start {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--cta-bg, var(--mark));
    color: #fff;
    border: none;
    box-shadow: 0 1px 2px var(--cta-bg, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in srgb, var(--cta-bg, var(--mark)) 35%, transparent);
    }
  }
  .quiz-settings-start:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }
  .quiz-settings-start:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }
  #revision-list {
    counter-reset: revrow;
  }
  .book-overview {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .book-overview-nav {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 4);
  }
  .book-overview-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .book-hero-cover .book-card-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block;
  }
  .books-page {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-bottom: calc(var(--spacing) * 8);
  }
  .books-grade-section {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .books-grade-heading {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--reader-bg);
    color: var(--reader-text);
    border-bottom: 1px dashed var(--mute-border);
  }
  .books-subject-block {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .books-subject-heading {
    margin-top: calc(var(--spacing) * 2);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: var(--mute);
    text-transform: uppercase;
  }
  .books-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 7);
    @media (width >= 640px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 768px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .book-card {
    display: flex;
    flex-direction: column;
    text-decoration-line: none;
    color: var(--reader-text);
  }
  .book-card-cover {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    color: var(--mark);
    transition: box-shadow 0.15s ease;
  }
  .book-card-cover::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .book-card-svg-bg {
    fill: var(--mark-soft);
  }
  .book-card:hover .book-card-cover {
    box-shadow: 0 0 0 2px var(--mark);
  }
  .book-card-img, .book-card-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block;
  }
  .book-card-img {
    object-fit: cover;
    object-position: center;
  }
  .book-card-caption {
    margin-top: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .book-card-title {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--reader-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .book-card:hover .book-card-title {
    color: var(--highlight);
  }
  .reader-settings-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--reader-bg);
  }
  .reader-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--reader-bg);
  }
  .reader-settings-close {
    display: grid;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    place-items: center;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--mute);
  }
  .reader-settings-close:hover {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 10%, transparent);
    }
    color: var(--reader-text);
  }
  .reader-settings-content {
    display: flex;
    flex-direction: column;
  }
  .reader-settings-settings {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .reader-settings-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .reader-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    @media (width >= 640px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .reader-settings-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    border-color: var(--mute-border);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--reader-bg));
    }
    backdrop-filter: blur(6px);
  }
  .reader-settings-status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--mute);
  }
  .reader-settings-status-saved {
    color: var(--mute-light);
  }
  .reader-settings-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .reader-settings-cancel {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--mute);
  }
  .reader-settings-cancel:hover {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 10%, transparent);
    }
    color: var(--reader-text);
  }
  .reader-settings-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    background: var(--cta-bg, var(--mark));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px var(--cta-bg, var(--mark));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in srgb, var(--cta-bg, var(--mark)) 30%, transparent);
    }
  }
  .reader-settings-save:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }
  .reader-settings-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
  }
  .reader-settings-preview {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 4%, var(--reader-bg));
    }
  }
  .reader-settings-preview-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: var(--mute);
    text-transform: uppercase;
  }
  .reader-settings-preview-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--mute-border);
    padding: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    background-color: var(--reader-bg);
    color: var(--reader-text);
  }
  .reader-settings-preview-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .reader-settings-preview-text {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .reader-settings-preview-grid {
    margin-top: calc(var(--spacing) * 2);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
@layer legacy {
  .cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: "Noto Sans", system-ui, sans-serif;
  }
  .cm-overlay[hidden] {
    display: none;
  }
  .cm-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 55%);
    backdrop-filter: blur(2px);
  }
  .cm-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(96vw, 64rem);
    height: min(92vh, 900px);
    background: var(--reader-bg);
    color: var(--reader-text);
    border: 1px solid var(--mute-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgb(15 23 42 / 45%);
    overflow: hidden;
  }
  .cm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 10px;
  }
  .cm-kicker {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
  }
  .cm-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 3px 0 0;
    font-size: clamp(18px, 3vw, 22px);
    line-height: 1.15;
    color: var(--reader-text);
  }
  .cm-close {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--mute-border);
    color: var(--mute);
  }
  .cm-close:hover {
    color: var(--reader-text);
    border-color: var(--mute);
  }
  .cm-close svg {
    width: 18px;
    height: 18px;
  }
  .cm-colhead {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 18px;
    border-bottom: 1px solid var(--mute-border);
  }
  .cm-ch {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .cm-c1 {
    width: 20%;
    flex: none;
  }
  .cm-c2 {
    width: 30%;
    flex: none;
  }
  .cm-c3 {
    flex: 1;
  }
  .cm-scroll {
    flex: 1;
    overflow: auto;
    padding: 6px 18px 14px;
  }
  .cm-map {
    position: relative;
    width: 100%;
    min-width: 520px;
  }
  .cm-map::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 14px;
    bottom: 16px;
    width: 2px;
    background: var(--mute-border);
    border-radius: 2px;
  }
  .cm-band {
    position: relative;
  }
  .cm-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .cm-brow {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
  }
  .cm-hub {
    position: relative;
    z-index: 2;
    flex: none;
    width: 20%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 8px 16px;
    border-radius: 11px;
    background: var(--mark-soft);
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 35%, var(--mute-border));
    }
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s;
  }
  .cm-hub:hover {
    transform: translateY(-1px);
  }
  .cm-hn {
    position: absolute;
    left: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 26%, transparent);
    }
    color: var(--mark);
    font-size: 0.78125rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cm-ht {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    margin-left: 30px;
    color: var(--mark);
    line-height: 1.18;
  }
  .cm-hub.cm-sel {
    box-shadow: 0 0 0 2px var(--reader-bg), 0 0 0 4px var(--mark);
  }
  .cm-branches {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .cm-branch {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .cm-cnode {
    position: relative;
    z-index: 2;
    flex: none;
    width: 37.5%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--reader-bg);
    border: 1.5px solid var(--kc-stroke);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1.5px solid color-mix(in srgb, var(--kc-stroke) 40%, var(--mute-border));
    }
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s;
  }
  .cm-cnode:hover {
    transform: translateY(-1px);
  }
  .cm-ci {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--kc-text);
    background: var(--kc-bg);
    border: 1px solid var(--kc-border);
  }
  .cm-ci svg {
    width: 14px;
    height: 14px;
  }
  .cm-cl {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1;
    min-width: 0;
    line-height: 1.18;
    color: var(--reader-text);
  }
  .cm-cnode.cm-sel {
    box-shadow: 0 0 0 2px var(--kc-bg), 0 0 0 3.4px var(--kc-stroke);
  }
  .cm-cbadge {
    flex: none;
    margin-left: auto;
    display: grid;
    place-items: center;
  }
  .cm-cbadge[data-mastery="mastered"] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tier-mastered);
    color: var(--reader-bg);
  }
  .cm-cbadge[data-mastery="mastered"] svg {
    width: 13px;
    height: 13px;
  }
  .cm-cbadge[data-mastery="practicing"], .cm-cbadge[data-mastery="learning"] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .cm-cbadge[data-mastery="practicing"] {
    background: var(--tier-practicing);
  }
  .cm-cbadge[data-mastery="learning"] {
    background: var(--tier-learning);
  }
  .cm-hbody {
    margin-left: 30px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cm-hbody .cm-ht {
    margin-left: 0;
  }
  .cm-hsqs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
  .cm-hsq {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 22%, transparent);
    }
  }
  .cm-hsq[data-mastery="mastered"] {
    background: var(--tier-mastered);
  }
  .cm-hsq[data-mastery="practicing"] {
    background: var(--tier-practicing);
  }
  .cm-hsq[data-mastery="learning"] {
    background: var(--tier-learning);
  }
  .cm-lsep {
    width: 1px;
    height: 13px;
    background: var(--mute-border);
    margin: 0 2px;
  }
  .cm-cbadge-li {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tier-mastered);
    color: var(--reader-bg);
  }
  .cm-cbadge-li svg {
    width: 10px;
    height: 10px;
  }
  .cm-mdot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .cm-mdot[data-mastery="practicing"] {
    background: var(--tier-practicing);
  }
  .cm-mdot[data-mastery="learning"] {
    background: var(--tier-learning);
  }
  .cm-mdot[data-mastery="new"] {
    box-shadow: inset 0 0 0 1.5px var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mute) 55%, transparent);
    }
  }
  .bm-panel {
    width: min(96vw, 64rem);
  }
  .cm-ch-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .cm-expand-all {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 22px;
    padding: 0;
    color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 8%, transparent);
    }
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.14s;
  }
  .cm-expand-all:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 15%, transparent);
    }
  }
  .cm-ea-ic {
    width: 15px;
    height: 15px;
  }
  .cm-expand-all[data-open="true"] .cm-ea-expand {
    display: none;
  }
  .cm-expand-all[data-open="false"] .cm-ea-collapse {
    display: none;
  }
  @media (width <= 640px) {
    .cm-head {
      padding: 12px 14px 8px;
    }
    .cm-title {
      font-size: 15px;
    }
    .cm-colhead {
      gap: 10px;
      padding: 6px 14px;
    }
    .cm-colhead .cm-c1, .cm-colhead .cm-c2, .cm-colhead .cm-c3, .bm-colhead > :nth-child(1), .bm-colhead > :nth-child(2) {
      width: auto;
      flex: none;
    }
    .cm-ch-group {
      gap: 7px;
    }
    .cm-scroll {
      padding: 6px 14px 12px;
    }
    .cm-map {
      min-width: 760px;
    }
    .bm-map {
      min-width: 900px;
    }
    .cm-cnode {
      flex-wrap: wrap;
      align-items: center;
      row-gap: 5px;
    }
    .cm-cl {
      order: 2;
      flex-basis: 100%;
      min-width: 0;
    }
    .cm-hub {
      flex-wrap: wrap;
      align-items: center;
      row-gap: 6px;
    }
    .cm-hbody {
      display: contents;
    }
    .cm-hn {
      position: static;
    }
    .cm-ht {
      order: 2;
      flex-basis: 100%;
      min-width: 0;
    }
    .cm-hsqs {
      margin-left: auto;
    }
    .cm-hub .cm-xtoggle {
      margin-left: 0;
    }
  }
  .cm-xtoggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: var(--mute);
    cursor: pointer;
    transition: background 0.13s;
  }
  .cm-hub .cm-xtoggle {
    margin-left: auto;
  }
  .cm-xtoggle:hover {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 14%, transparent);
    }
    color: var(--mute-hover);
  }
  .cm-hub[data-expanded="true"] .bm-chev, .cm-cnode[data-expanded="true"] .bm-chev {
    transform: rotate(90deg);
  }
  .bm-map {
    min-width: 720px;
  }
  .bm-map .cm-link {
    stroke: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--mute) 45%, transparent);
    }
  }
  .bm-colhead > :nth-child(1) {
    width: 30%;
    flex: none;
  }
  .bm-colhead > :nth-child(2) {
    width: 32%;
    flex: none;
  }
  .cm-branches[hidden], .cm-cvars[hidden] {
    display: none;
  }
  .bm-chnode {
    position: relative;
    z-index: 2;
    flex: none;
    width: 30%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    background: var(--reader-bg);
    border: 1.5px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1.5px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
  }
  .bm-chnode[data-expandable="true"] {
    cursor: pointer;
  }
  .bm-chmain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .bm-chhead {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bm-chnum {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 14%, transparent);
    }
    color: var(--mark);
  }
  .bm-chtitle {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mark);
  }
  .bm-chbars {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .bm-bar {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .bm-barl {
    flex: none;
    width: 9px;
    font-size: 9px;
    font-weight: 600;
    color: var(--mute);
  }
  .bm-bart {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 16%, transparent);
    }
    overflow: hidden;
  }
  .bm-bart i {
    display: block;
    height: 100%;
    border-radius: 999px;
  }
  .bm-bar[data-axis="L"] i {
    background: var(--tier-learning);
  }
  .bm-bar[data-axis="P"] i {
    background: var(--tier-practicing);
  }
  .bm-ring {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient( var(--tier-mastered) calc(var(--p, 0) * 3.6deg), var(--mute) 0 );
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient( var(--tier-mastered) calc(var(--p, 0) * 3.6deg), color-mix(in srgb, var(--mute) 16%, transparent) 0 );
    }
  }
  .bm-ringn {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--reader-bg);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tier-mastered-text);
  }
  .bm-secnode {
    position: relative;
    z-index: 2;
    flex: none;
    width: 46%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--reader-bg);
    border: 1.5px solid var(--mute-border);
    cursor: default;
    transition: border-color 0.14s;
  }
  .bm-secnode[data-expandable="true"] {
    cursor: pointer;
  }
  .bm-secnode[data-expandable="true"]:hover {
    border-color: var(--mute);
  }
  .bm-sectitle {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--reader-text);
  }
  .bm-secnode .cm-hsqs {
    flex: none;
  }
  .bm-chev {
    flex: none;
    width: 13px;
    height: 13px;
    color: var(--mute);
    transition: transform 0.15s;
  }
  .bm-secnode[data-expanded="true"] .bm-chev, .bm-chnode[data-expanded="true"] .bm-chev {
    transform: rotate(90deg);
  }
  .bm-concepts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-width: 0;
  }
  .bm-concepts[hidden] {
    display: none;
  }
  .bm-connode {
    position: relative;
    z-index: 2;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
  }
  .cm-cvars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-width: 0;
  }
  .cm-vnode {
    position: relative;
    z-index: 2;
    align-self: stretch;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
    color: var(--mute-hover);
    background: var(--reader-bg);
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--mute-border);
    border-radius: 999px;
    padding: 4px 11px;
    cursor: pointer;
    transition: 0.13s;
  }
  .cm-vnode:hover {
    border-color: var(--mute);
    transform: translateY(-1px);
  }
  .cm-vd {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 55%, transparent);
    }
  }
  .cm-vt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .cm-vnode.cm-sel {
    border-color: var(--kc-stroke);
    box-shadow: 0 0 0 2px var(--kc-bg);
  }
  .cm-link {
    fill: none;
    stroke-width: 1.6;
    opacity: 0.5;
    transition: opacity 0.18s, stroke-width 0.18s;
  }
  .cm-link.cm-faint {
    opacity: 0.32;
    stroke-width: 1.4;
  }
  .cm-link.cm-lit {
    opacity: 1;
    stroke-width: 2.6;
  }
  .cm-detail {
    border-top: 1px solid var(--mute-border);
    padding: 13px 18px;
    max-height: 30%;
    overflow: auto;
    background: var(--mute-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute-subtle) 50%, transparent);
    }
  }
  .cm-dhead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .cm-dtrail {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    letter-spacing: 0.01em;
  }
  .cm-dcrumb {
    color: var(--mute);
  }
  .cm-dcrumb:last-child {
    color: var(--mark);
  }
  .cm-dsep {
    color: var(--mute-border);
    font-weight: 400;
  }
  .cm-dname {
    font-size: 14px;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    line-height: 1.18;
    color: var(--reader-text);
    margin-bottom: 8px;
  }
  .cm-dformula {
    background: var(--reader-bg);
    border: 1px solid var(--mute-border);
    border-radius: 9px;
    padding: 9px;
    text-align: center;
    margin-bottom: 9px;
    overflow-x: auto;
  }
  .cm-dlede {
    font-size: 0.78125rem;
    line-height: 1.55;
    color: var(--mute-hover);
    margin: 0;
  }
  .cm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    justify-content: center;
    align-items: center;
    padding: 9px 16px 12px;
    border-top: 1px solid var(--mute-border);
  }
  .cm-li {
    font-size: 0.71875rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mute-hover);
  }
  .cm-lic {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--kc-text);
    background: var(--kc-bg);
    border: 1px solid var(--kc-border);
  }
  .cm-lic svg {
    width: 12px;
    height: 12px;
  }
  .cmk-indigo {
    --kc-text: var(--indigo-text);
    --kc-bg: var(--indigo-bg);
    --kc-border: var(--indigo-border);
    --kc-stroke: var(--indigo-stroke);
  }
  .cmk-teal {
    --kc-text: var(--teal-text);
    --kc-bg: var(--teal-bg);
    --kc-border: var(--teal-border);
    --kc-stroke: var(--teal-stroke);
  }
  .cmk-amber {
    --kc-text: var(--amber-text);
    --kc-bg: var(--amber-bg);
    --kc-border: var(--amber-border);
    --kc-stroke: var(--amber-stroke);
  }
  .cmk-rose {
    --kc-text: var(--rose-text);
    --kc-bg: var(--rose-bg);
    --kc-border: var(--rose-border);
    --kc-stroke: var(--rose-stroke);
  }
  .cmk-emerald {
    --kc-text: var(--emerald-text);
    --kc-bg: var(--emerald-bg);
    --kc-border: var(--emerald-border);
    --kc-stroke: var(--emerald-stroke);
  }
  .cmk-purple {
    --kc-text: var(--purple-text);
    --kc-bg: var(--purple-bg);
    --kc-border: var(--purple-border);
    --kc-stroke: var(--purple-stroke);
  }
  .cmk-sky {
    --kc-text: var(--sky-text);
    --kc-bg: var(--sky-bg);
    --kc-border: var(--sky-border);
    --kc-stroke: var(--sky-stroke);
  }
  .cmk-orange {
    --kc-text: var(--orange-text);
    --kc-bg: var(--orange-bg);
    --kc-border: var(--orange-border);
    --kc-stroke: var(--orange-stroke);
  }
  .cmk-cyan {
    --kc-text: var(--cyan-text);
    --kc-bg: var(--cyan-bg);
    --kc-border: var(--cyan-border);
    --kc-stroke: var(--cyan-stroke);
  }
  .cmk-slate {
    --kc-text: var(--slate-text);
    --kc-bg: var(--slate-bg);
    --kc-border: var(--slate-border);
    --kc-stroke: var(--slate-stroke);
  }
  @media (width <= 640px) {
    .cm-overlay {
      padding: 0;
    }
    .cm-panel {
      width: 100vw;
      height: 100dvh;
      border-radius: 0;
      border: 0;
    }
    .cm-c1, .cm-hub {
      width: 116px;
    }
    .cm-c2, .cm-cnode {
      width: 150px;
    }
    .cm-map {
      min-width: 440px;
    }
  }
}
@layer legacy {
  .rv {
    display: flex;
    flex-direction: column;
  }
  .rv-cstrips {
    padding-top: 8px;
  }
  .rv-cstrip {
    margin: 0;
  }
  .rv-progress {
    height: 2px;
    margin: 8px -8px -8px;
    overflow: hidden;
  }
  .rv-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--mark);
    transition: width 0.35s ease;
  }
  .rv-scroll {
    padding: 0;
  }
  .rv-empty {
    padding: 28px 4px;
    text-align: center;
    color: var(--mute);
  }
  .rv-check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1.5px solid var(--mute-border);
    color: transparent;
    flex: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .rv-check.is-on {
    background: var(--mark);
    border-color: var(--mark);
    color: #fff;
  }
  .rv-check.is-partial {
    background: var(--mark-soft);
    border-color: var(--mark);
    color: var(--mark);
  }
  .rv-block .rv-check.is-on {
    background: var(--mark-soft);
    border-color: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--mark) 25%, transparent);
    }
    color: var(--mark);
  }
  .rv-allrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
    background: var(--mark-soft);
    cursor: pointer;
  }
  .rv-allrow-txt {
    font-weight: 600;
    color: var(--reader-text);
  }
  .rv-allrow-meta {
    margin-left: auto;
    font-size: 0.74rem;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .rv-group {
    margin-bottom: 12px;
  }
  .rv-group-head, .rv-block {
    cursor: pointer;
  }
  .rv-group .rv-blockcol > .rv-block + .rv-block {
    border-top: 1px solid var(--mute-border);
  }
  .rv-group .rv-blockcol + .rv-blockcol {
    border-top: 1px solid var(--mute-border);
  }
  @media (width >= 640px) {
    .rv-group .exercise-group-blocks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rv-group .rv-blockcol + .rv-blockcol {
      border-top: 0;
      border-left: 1px solid var(--mute-border);
    }
  }
  .rv-opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--mute-border);
    cursor: pointer;
  }
  .rv-opt .rv-check {
    margin-top: 1px;
  }
  .rv-opt-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .rv-opt-title {
    font-weight: 600;
    color: var(--reader-text);
  }
  .rv-opt-hint {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--mute);
    line-height: 1.5;
  }
  .rv-opt-hint svg {
    flex: none;
    margin-top: 1px;
    color: #d97706;
  }
  .rv-scroller {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0;
  }
  .qnav-arrow[hidden] {
    display: none;
  }
  .rv-stat {
    display: flex;
    flex-direction: column;
  }
  .rv-stat-n {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--mark);
  }
  .rv-stat-l {
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--mute);
  }
  .rv-deckmap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 10px 0 14px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
    background-color: var(--reader-bg);
    background-image: linear-gradient(135deg, var(--mark-soft) 0%, var(--mark) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(135deg, var(--mark-soft) 0%, color-mix(in srgb, var(--mark) 12%, var(--paper)) 100%);
    }
  }
  .rv-deckmap::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -64px;
    right: -44px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 22%, var(--paper));
    }
    opacity: 0.45;
  }
  .rv-deckmap-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--reader-text);
  }
  .rv-deckmap-stats {
    display: flex;
    gap: 26px;
    margin: 14px 0 12px;
  }
  .rv-deckmap-desc {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mute);
  }
  .rv-deckmap-desc b {
    font-weight: 600;
    color: var(--reader-text);
  }
  .rv-deckmap-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--mark) 0%, var(--mark-hover) 100%);
  }
  .rv-deckmap-start:disabled {
    opacity: 0.5;
    cursor: default;
  }
  .rv-deckmap-count {
    font-weight: 500;
    font-size: 0.92em;
    opacity: 0.82;
  }
  .rv-deckmap-sticky {
    position: sticky;
    top: 48px;
    z-index: 5;
  }
  .rv-deckmap-help {
    margin: 10px 2px 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--mute);
  }
  .rv-deckmap-help b {
    font-weight: 600;
    color: var(--reader-text);
  }
  .rv-ov-stepper {
    position: sticky;
    top: 47px;
    z-index: 9;
    margin: 2px 0 6px;
    padding: 6px 2px;
    background: var(--reader-bg);
    border-bottom: 1px solid var(--mute-border);
  }
  .rv-ov-seclabel {
    margin: 18px 2px 8px;
    scroll-margin-top: 96px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mute);
  }
  .rv-ov-card {
    margin: 0 0 12px;
    border-radius: 14px;
    border: 1px solid var(--mute-border);
    background: var(--reader-bg);
    overflow: hidden;
  }
  .rv-ov-conlabel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
  }
  .rv-ov-conname {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--reader-text);
  }
  .rv-ov-count {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--mark);
    background: var(--mark-soft);
    padding: 2px 8px;
    border-radius: 999px;
  }
  .rv-ov-qtotal {
    font-size: 0.7rem;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .rv-ov-rows {
    display: flex;
    flex-direction: column;
  }
  .rv-ov-row {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border: 0;
    border-top: 1px solid var(--mute-border);
    background: var(--reader-bg);
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .rv-ov-row:hover {
    background: var(--mark-soft);
  }
  .rv-ov-body {
    flex: 1;
    min-width: 0;
  }
  .rv-ov-preview {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--reader-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rv-ov-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 0.72rem;
    color: var(--mute);
  }
  .rv-ov-vlabel {
    color: var(--mute);
    font-weight: 500;
  }
  .rv-ov-q {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--mark);
  }
  .rv-ov-chev {
    flex: none;
    color: var(--mute);
  }
  .rv-slidesview {
    overflow-x: clip;
  }
  .rv-slide {
    padding: 14px 0 10px;
  }
  .rv-vtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }
  .rv-tab-count {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mute-border);
    color: var(--mute);
  }
  .stepper-pill-active .rv-tab-count {
    background: var(--reader-bg);
    color: var(--mark);
  }
  .rv-vhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 4px;
  }
  .rv-vlabel {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--reader-text);
  }
  .rv-vhead-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }
  .rv-conceptbtn, .rv-showanswers {
    flex: none;
  }
  .rv-vdesc {
    margin-bottom: 10px;
    color: var(--mute);
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .rv-qlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
  }
  .rv-qcard {
    border: 1px solid var(--mute-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--reader-bg);
  }
  .rv-approachcard {
    position: relative;
    padding: 10px;
  }
  .rv:not([data-reveal-all="true"]) .rv-slide:not(.is-revealed) .rv-approachcard {
    cursor: pointer;
    min-height: 84px;
  }
  .rv-approach-reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
    }
    background: var(--reader-bg);
    color: var(--mark);
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  }
  .rv-approach-reveal:hover {
    background: var(--mark-soft);
  }
  .rv-slide.is-revealed .rv-approachcard .rv-approach-reveal, .rv[data-reveal-all="true"] .rv-approachcard .rv-approach-reveal {
    display: none;
  }
  .rv-approach {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
    transition: filter 0.2s ease;
  }
  .rv-slide.is-revealed .rv-approachcard .rv-approach, .rv[data-reveal-all="true"] .rv-approachcard .rv-approach {
    filter: none;
    user-select: auto;
    pointer-events: auto;
  }
  .rv-approach .worked-steps {
    border: 0;
    margin: 0;
  }
  .rv-approach .step {
    align-items: baseline;
  }
  .rv-approach .rv-trap {
    margin: 10px 0 0;
  }
  .rv-trap {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #fff7ed;
    border: 1px solid #f3d4a3;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #8a5a08;
  }
  .rv-trap b {
    color: #b45309;
    font-weight: 600;
  }
  .rv-dev {
    display: none;
    padding: 8px 14px 0;
  }
  .rv-slide.is-revealed .rv-dev, .rv[data-reveal-all="true"] .rv-dev {
    display: block;
  }
  .rv-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .rv-chip--step {
    background: #fef3c7;
    color: #b45309;
  }
  .rv-chip--bridge {
    background: var(--mark-soft);
    color: var(--mark);
  }
  .rv-chip--edge {
    background: #ffe4e6;
    color: #be123c;
  }
  .rv-chip--alt {
    background: #e0f2fe;
    color: #0369a1;
  }
  .rv-dev-note {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--mute);
  }
  .rv-steer-wrap {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 2px solid var(--mark);
    background: var(--mark-soft);
    border-radius: 0 8px 8px 0;
  }
  .rv-steer-label {
    margin-bottom: 5px;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mark);
  }
  .rv-steer {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--reader-text);
    list-style: decimal;
  }
  .rv-steer-one {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--reader-text);
  }
  .rv-deck-nav {
    display: flex;
    align-items: center;
    padding: 8px 2px 14px;
  }
  .rv-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--mute);
    font-weight: 500;
    font-size: 0.85rem;
  }
  .rv-nav-link:hover {
    color: var(--mark);
  }
  .rv-nav-link svg {
    flex: none;
  }
  .rv-nav-next {
    margin-left: auto;
    text-align: right;
  }
  .rv-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 8rem;
  }
  @media (width >= 1024px) {
    .rv-nav-label {
      max-width: 20rem;
    }
  }
  .rv-nav-link[disabled] {
    opacity: 0;
    pointer-events: none;
  }
  .rv-modal-loading {
    padding: 24px;
    text-align: center;
    color: var(--mute);
  }
  .rv-modal .mmd-panel {
    width: min(48rem, 94vw) !important;
    height: auto !important;
    max-height: 88vh !important;
  }
  .rv-modal .mmd-body.rv-modalbody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 24px;
  }
}
:root {
  --tier-mastered: var(--color-emerald-500);
  --tier-mastered-text: var(--color-emerald-700);
  --tier-mastered-bg: oklch(69.6% 0.17 162.48);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-mastered-bg: color-mix(in srgb, var(--color-emerald-500) 14%, var(--reader-bg));
  }
  --tier-mastered-border: color-mix(in srgb, oklch(69.6% 0.17 162.48) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-mastered-border: color-mix(in srgb, var(--color-emerald-500) 32%, transparent);
  }
  --tier-practicing: var(--color-amber-400);
  --tier-practicing-text: var(--color-amber-700);
  --tier-practicing-bg: oklch(82.8% 0.189 84.429);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-practicing-bg: color-mix(in srgb, var(--color-amber-400) 16%, var(--reader-bg));
  }
  --tier-practicing-border: color-mix(in srgb, oklch(82.8% 0.189 84.429) 36%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-practicing-border: color-mix(in srgb, var(--color-amber-400) 36%, transparent);
  }
  --tier-learning: var(--color-sky-500);
  --tier-learning-text: var(--color-sky-700);
  --tier-learning-bg: oklch(68.5% 0.169 237.323);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-learning-bg: color-mix(in srgb, var(--color-sky-500) 14%, var(--reader-bg));
  }
  --tier-learning-border: color-mix(in srgb, oklch(68.5% 0.169 237.323) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tier-learning-border: color-mix(in srgb, var(--color-sky-500) 32%, transparent);
  }
}
.theme-dark {
  --tier-mastered-text: var(--color-emerald-300);
  --tier-practicing-text: var(--color-amber-300);
  --tier-learning-text: var(--color-sky-300);
}
.bp-bar i[data-seg="mastered"] {
  background: var(--tier-mastered);
}
.bp-bar i[data-seg="practicing"] {
  background: var(--tier-practicing);
}
.bp-bar i[data-seg="learning"] {
  background: var(--tier-learning);
}
.bp-metric {
  flex: 1;
  min-width: 180px;
}
.bp-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.bp-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bp-metric-val {
  font-size: 12px;
  font-weight: 600;
}
.bp-metric-label[data-track="covered"], .bp-metric-val[data-track="covered"] {
  color: var(--mark);
}
.bp-bar {
  height: 8px;
  border-radius: 9999px;
  background: var(--mute);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mute) 14%, transparent);
  }
  overflow: hidden;
}
.bp-bar i {
  display: block;
  width: var(--fill, 100%);
  height: 100%;
}
.bp-bar i[data-seg="cov"] {
  background: var(--mark);
}
.resume-strip {
  margin: 0 0 18px;
}
.resume-strip-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mark);
}
.resume-strip-arrow {
  color: var(--mark);
}
.resume-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.resume-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--mute-border);
  border-radius: var(--r-lg);
  background: var(--reader-bg);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.resume-card:hover {
  border-color: var(--mark);
  background: var(--mark);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mark) 5%, var(--reader-bg));
  }
}
.resume-card-primary {
  border-color: var(--mark);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--mark) 25%, transparent);
  }
  background: var(--mark-soft);
}
.resume-card-ic {
  height: 34px;
  width: 34px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--mark);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mark) 12%, transparent);
  }
  color: var(--mark);
}
.resume-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.resume-card-ch {
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-card-sec {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--reader-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pg-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.pg-mwrap {
  position: relative;
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 18px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--mark);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
  }
  background: var(--mark);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mark) 7%, var(--reader-bg));
  }
  transition: box-shadow 0.15s, border-color 0.15s;
}
.pg-mwrap:hover {
  border-color: var(--mark);
  box-shadow: 0 14px 28px -14px rgb(15 23 42 / 42%);
}
.pg-mbars {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-mbars .bp-metric-head {
  margin-bottom: 4px;
}
.pg-semiwrap {
  position: relative;
  width: 106px;
  height: 60px;
}
.pg-semi {
  width: 106px;
  height: 60px;
  overflow: visible;
}
.pg-semi-track {
  fill: none;
  stroke: var(--mute);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--mute) 18%, transparent);
  }
  stroke-width: 11;
  stroke-linecap: round;
}
.pg-semi-val {
  fill: none;
  stroke: var(--mark);
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
.pg-semi-c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
}
.pg-semi-num {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--reader-text);
}
.pg-semi-pct {
  margin-left: 1px;
  font-size: 0.7em;
  font-weight: 400;
  color: var(--mute);
}
.pg-semi-cap {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.18;
  text-align: center;
  color: var(--mute);
}
.pg-detail-chevron {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  color: var(--mute);
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s, transform 0.15s;
}
.pg-mwrap:hover .pg-detail-chevron {
  opacity: 1;
  color: var(--mark);
  transform: translateX(2px);
}
.pg-semi-dash {
  color: var(--mute);
  font-weight: 400;
}
.pg-panel {
  width: min(94vw, 30rem);
  height: auto;
  max-height: 88vh;
}
.pg-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.pg-block + .pg-block {
  border-top: 1px solid var(--mute-border);
  padding-top: 15px;
}
.pg-mhead {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute-light);
}
.pg-headline {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.pg-headline b {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mark);
}
.pg-headline span {
  font-size: 12.5px;
  color: var(--mute);
}
.pg-subline {
  margin-top: 4px;
  font-size: 12px;
  color: var(--mute);
}
.pg-readings {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pg-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--mute);
}
.pg-concept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pg-concept::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute);
}
.pg-concept b {
  font-weight: 600;
  color: var(--reader-text);
}
.pg-concept[data-tier="strong"]::before {
  background: var(--tier-mastered);
}
.pg-concept[data-tier="weak"]::before {
  background: var(--tier-learning);
}
.pg-concept[data-tier="new"]::before {
  background: var(--mute);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mute) 45%, transparent);
  }
}
.pg-cov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.pg-cov-grid .bp-metric {
  min-width: 0;
}
@media (width <= 480px) {
  .pg-cov-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.pg-stat {
  display: flex;
  flex-direction: column;
}
.pg-stat b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--reader-text);
}
.pg-stat span {
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
}
@layer legacy {
  .pg-gauge-static {
    cursor: default;
    background: none;
    border: 0;
    width: 100%;
    padding: 0;
  }
  .exd-f2-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--mute) 11%, transparent);
    }
  }
  .exd-f2-item:first-child {
    border-top: none;
  }
  .exd-f2-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--subj, var(--mark));
  }
  .exd-f2-main {
    flex: 1;
    min-width: 0;
  }
  .exd-f2-name {
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .exd-f2-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--mute);
  }
  .exd-f2-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--mark) 30%, transparent);
    }
    color: var(--mark);
    background: var(--reader-bg);
    text-decoration: none;
  }
  .exd-f2-go:hover {
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 6%, var(--reader-bg));
    }
  }
  [data-subject="maths"] {
    --subj: #3f51d6;
  }
  [data-subject="mathematics"] {
    --subj: #3f51d6;
  }
  [data-subject="physics"] {
    --subj: #6845ba;
  }
  [data-subject="chemistry"] {
    --subj: #b8455a;
  }
  [data-subject="biology"] {
    --subj: #2f8f6b;
  }
  .exdb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .exdb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--mute-border);
    border-radius: 16px;
    background: var(--reader-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
  }
  .exdb-row:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--reader-bg));
    }
  }
  .exdb-cover {
    width: 68px;
    height: 68px;
    border-radius: 9px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgb(16 20 45 / 18%);
  }
  .exdb-cover-fallback {
    display: grid;
    place-items: center;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 12%, transparent);
    }
    color: var(--mark);
  }
  .exdb-cover-fallback svg {
    width: 30px;
    height: 30px;
  }
  .exdb-main {
    flex: 1;
    min-width: 0;
  }
  .exdb-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--reader-text);
  }
  .exdb-sub {
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 2px;
  }
  .exdb-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 13%, transparent);
    }
    overflow: hidden;
    margin-top: 8px;
  }
  .exdb-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 55%, transparent);
    }
  }
  .exdb-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
    background: conic-gradient(#52b98a calc(var(--p) * 1%), var(--mute) 0);
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient(#52b98a calc(var(--p) * 1%), color-mix(in srgb, var(--mute) 13%, transparent) 0);
    }
  }
  .exdb-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--reader-bg);
  }
  .exdb-ring span {
    position: relative;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    color: var(--reader-text);
  }
  .exdb-ring-empty {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 13%, transparent);
    }
  }
  .exdb-ring-empty span {
    color: var(--mute);
  }
  .exdb-arrow {
    color: var(--mute);
    flex-shrink: 0;
    display: grid;
    place-items: center;
  }
  .exam-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 2px;
  }
  .exam-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .exam-row-menu {
    flex-shrink: 0;
  }
  .exam-row-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(#52b98a calc(var(--p) * 1%), var(--mute) 0);
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient(#52b98a calc(var(--p) * 1%), color-mix(in srgb, var(--mute) 13%, transparent) 0);
    }
  }
  .exam-row-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--reader-bg);
  }
  .exam-row-ring span {
    position: relative;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    color: var(--reader-text);
  }
  .exam-row-ring-empty {
    background: var(--mute);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mute) 13%, transparent);
    }
  }
  .exam-row-ring-empty span {
    color: var(--mute);
  }
  .adopt-intro {
    text-align: center;
    padding: 22px 8px 18px;
  }
  .adopt-intro-emoji {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 10%, transparent);
    }
    color: var(--mark);
  }
  .adopt-intro-emoji svg {
    width: 26px;
    height: 26px;
  }
  .adopt-intro h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--reader-text);
  }
  .adopt-intro p {
    font-size: 13px;
    color: var(--mute);
    margin: 0 auto;
    max-width: 32ch;
  }
  .adopt-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--reader-text);
    margin: 18px 2px 8px;
  }
  .adopt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }
  .adopt-card {
    border: 1px solid var(--mute-border);
    border-radius: 16px;
    padding: 13px;
    background: var(--reader-bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
  }
  .adopt-card:hover {
    border-color: var(--mark);
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 4%, var(--reader-bg));
    }
  }
  .adopt-card-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--reader-text);
  }
  .adopt-card-name svg {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 8px;
    background: var(--mark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--mark) 10%, transparent);
    }
    color: var(--mark);
    flex-shrink: 0;
  }
  .adopt-card-meta {
    font-size: 11.5px;
    color: var(--mute);
  }
  .adopt-card-follow {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mark);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .adopt-card-follow svg {
    width: 14px;
    height: 14px;
  }
  @media (width <= 400px) {
    .adopt-grid {
      grid-template-columns: 1fr;
    }
  }
  .lead {
    font-size: 14px !important;
    line-height: var(--tw-leading, 1.25rem) !important;
  }
}
@layer base {
  input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: oklch(55.1% 0.027 264.364);
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(54.6% 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(54.6% 0.245 262.881);
    }
  }
  input::placeholder,textarea::placeholder {
    color: oklch(55.1% 0.027 264.364);
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  input:where([type='checkbox']),input:where([type='radio']) {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: oklch(54.6% 0.245 262.881);
    background-color: #fff;
    border-color: oklch(55.1% 0.027 264.364);
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  input:where([type='checkbox']) {
    border-radius: 0px;
  }
  input:where([type='radio']) {
    border-radius: 100%;
  }
  input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: oklch(54.6% 0.245 262.881);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@layer base {
  [data-accent="red"] {
    --accent: var(--red-text);
    --accent-bg: var(--red-bg);
    --accent-border: var(--red-border);
    --accent-mark: var(--red-mark);
  }
  [data-accent="orange"] {
    --accent: var(--orange-text);
    --accent-bg: var(--orange-bg);
    --accent-border: var(--orange-border);
    --accent-mark: var(--orange-mark);
  }
  [data-accent="yellow"] {
    --accent: var(--yellow-text);
    --accent-bg: var(--yellow-bg);
    --accent-border: var(--yellow-border);
    --accent-mark: var(--yellow-mark);
  }
  [data-accent="blue"] {
    --accent: var(--blue-text);
    --accent-bg: var(--blue-bg);
    --accent-border: var(--blue-border);
    --accent-mark: var(--blue-mark);
  }
  [data-accent="cyan"] {
    --accent: var(--cyan-text);
    --accent-bg: var(--cyan-bg);
    --accent-border: var(--cyan-border);
    --accent-mark: var(--cyan-mark);
  }
  [data-accent="green"] {
    --accent: var(--green-text);
    --accent-bg: var(--green-bg);
    --accent-border: var(--green-border);
    --accent-mark: var(--green-mark);
  }
  [data-accent="amber"] {
    --accent: var(--amber-text);
    --accent-bg: var(--amber-bg);
    --accent-border: var(--amber-border);
    --accent-mark: var(--amber-mark);
  }
  [data-accent="emerald"] {
    --accent: var(--emerald-text);
    --accent-bg: var(--emerald-bg);
    --accent-border: var(--emerald-border);
    --accent-mark: var(--emerald-mark);
  }
  [data-accent="teal"] {
    --accent: var(--teal-text);
    --accent-bg: var(--teal-bg);
    --accent-border: var(--teal-border);
    --accent-mark: var(--teal-mark);
  }
  [data-accent="sky"] {
    --accent: var(--sky-text);
    --accent-bg: var(--sky-bg);
    --accent-border: var(--sky-border);
    --accent-mark: var(--sky-mark);
  }
  [data-accent="indigo"] {
    --accent: var(--indigo-text);
    --accent-bg: var(--indigo-bg);
    --accent-border: var(--indigo-border);
    --accent-mark: var(--indigo-mark);
  }
  [data-accent="purple"] {
    --accent: var(--purple-text);
    --accent-bg: var(--purple-bg);
    --accent-border: var(--purple-border);
    --accent-mark: var(--purple-mark);
  }
  [data-accent="rose"] {
    --accent: var(--rose-text);
    --accent-bg: var(--rose-bg);
    --accent-border: var(--rose-border);
    --accent-mark: var(--rose-mark);
  }
  [data-accent="slate"] {
    --accent: var(--slate-text);
    --accent-bg: var(--slate-bg);
    --accent-border: var(--slate-border);
    --accent-mark: var(--slate-mark);
  }
  [data-accent="zinc"] {
    --accent: var(--zinc-text);
    --accent-bg: var(--zinc-bg);
    --accent-border: var(--zinc-border);
    --accent-mark: var(--zinc-mark);
  }
  [data-accent="gray"] {
    --accent: var(--gray-text);
    --accent-bg: var(--gray-bg);
    --accent-border: var(--gray-border);
    --accent-mark: var(--gray-mark);
  }
  [data-accent="stone"] {
    --accent: var(--stone-text);
    --accent-bg: var(--stone-bg);
    --accent-border: var(--stone-border);
    --accent-mark: var(--stone-mark);
  }
  [data-accent="olive"] {
    --accent: var(--olive-text);
    --accent-bg: var(--olive-bg);
    --accent-border: var(--olive-border);
    --accent-mark: var(--olive-mark);
  }
  [data-accent="taupe"] {
    --accent: var(--taupe-text);
    --accent-bg: var(--taupe-bg);
    --accent-border: var(--taupe-border);
    --accent-mark: var(--taupe-mark);
  }
  [data-accent="mist"] {
    --accent: var(--mist-text);
    --accent-bg: var(--mist-bg);
    --accent-border: var(--mist-border);
    --accent-mark: var(--mist-mark);
  }
  [data-accent="coral"] {
    --accent: var(--coral-text);
    --accent-bg: var(--coral-bg);
    --accent-border: var(--coral-border);
    --accent-mark: var(--coral-mark);
  }
  [data-accent="brown"] {
    --accent: var(--brown-text);
    --accent-bg: var(--brown-bg);
    --accent-border: var(--brown-border);
    --accent-mark: var(--brown-mark);
  }
  [data-accent="earth"] {
    --accent: var(--earth-text);
    --accent-bg: var(--earth-bg);
    --accent-border: var(--earth-border);
    --accent-mark: var(--earth-mark);
  }
  [data-accent="blush"] {
    --accent: var(--blush-text);
    --accent-bg: var(--blush-bg);
    --accent-border: var(--blush-border);
    --accent-mark: var(--blush-mark);
  }
  [data-accent="sage"] {
    --accent: var(--sage-text);
    --accent-bg: var(--sage-bg);
    --accent-border: var(--sage-border);
    --accent-mark: var(--sage-mark);
  }
  [data-accent="primary"] {
    --accent: var(--primary-text);
    --accent-bg: var(--primary-bg);
    --accent-border: var(--primary-border);
    --accent-mark: var(--primary-mark);
  }
  [data-accent="primary-strong"] {
    --accent: var(--primary-strong-text);
    --accent-bg: var(--primary-strong-bg);
    --accent-border: var(--primary-strong-border);
    --accent-mark: var(--primary-strong-mark);
  }
  [data-accent="structural"] {
    --accent: var(--structural-text);
    --accent-bg: var(--structural-bg);
    --accent-border: var(--structural-border);
    --accent-mark: var(--structural-mark);
  }
  [data-accent="reference"] {
    --accent: var(--reference-text);
    --accent-bg: var(--reference-bg);
    --accent-border: var(--reference-border);
    --accent-mark: var(--reference-mark);
  }
  [data-accent="procedural"] {
    --accent: var(--procedural-text);
    --accent-bg: var(--procedural-bg);
    --accent-border: var(--procedural-border);
    --accent-mark: var(--procedural-mark);
  }
  [data-accent="origin"] {
    --accent: var(--origin-text);
    --accent-bg: var(--origin-bg);
    --accent-border: var(--origin-border);
    --accent-mark: var(--origin-mark);
  }
  [data-accent="formula"] {
    --accent: var(--formula-text);
    --accent-bg: var(--formula-bg);
    --accent-border: var(--formula-border);
    --accent-mark: var(--formula-mark);
  }
  [data-accent="experiment"] {
    --accent: var(--experiment-text);
    --accent-bg: var(--experiment-bg);
    --accent-border: var(--experiment-border);
    --accent-mark: var(--experiment-mark);
  }
  [data-accent="caution"] {
    --accent: var(--caution-text);
    --accent-bg: var(--caution-bg);
    --accent-border: var(--caution-border);
    --accent-mark: var(--caution-mark);
  }
  [data-accent="positive"] {
    --accent: var(--positive-text);
    --accent-bg: var(--positive-bg);
    --accent-border: var(--positive-border);
    --accent-mark: var(--positive-mark);
  }
  [data-accent="verify"] {
    --accent: var(--verify-text);
    --accent-bg: var(--verify-bg);
    --accent-border: var(--verify-border);
    --accent-mark: var(--verify-mark);
  }
  [data-accent="negative"] {
    --accent: var(--negative-text);
    --accent-bg: var(--negative-bg);
    --accent-border: var(--negative-border);
    --accent-mark: var(--negative-mark);
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-size {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-layout {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-paint {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-style {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-contain-size: initial;
      --tw-contain-layout: initial;
      --tw-contain-paint: initial;
      --tw-contain-style: initial;
    }
  }
}