:root {
    /* cool light field, white panels */
    --paper:    #eceef1;
    --paper-2:  #e4e7eb;
    --panel:    #ffffff;
    --panel-2:  #f6f8fa;

    /* cool dark ink */
    --ink:      #10141c;
    --body:     #2a313c;
    --muted:    #57606f;
    --faint:    #828c9b;

    /* institutional navy: the identity color */
    --navy:     #142844;
    --navy-2:   #1f3d63;   /* links / steel accent */
    --navy-deep:#0b1726;

    /* signal red: alerts and reporting only */
    --signal:   #b1281d;
    --signal-2: #8c1c13;

    --line:     rgba(16,20,28,.16);
    --line-soft:rgba(16,20,28,.08);
    --shadow:   0 14px 38px rgba(11,23,38,.12);
    --maxw:     1080px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .wrap { width: min(var(--maxw), calc(100% - 40px)); margin: 0 auto; }
  .measure { max-width: 64ch; }
  a { color: var(--navy-2); text-underline-offset: 3px; }
  a:hover { color: var(--navy); }
  p { margin: 0 0 1.05em; color: var(--body); }
  strong { font-weight: 600; color: var(--ink); }
  img, svg { max-width: 100%; }

  h1, h2, h3, h4, .brand { font-family: "Libre Franklin", system-ui, Arial, sans-serif; color: var(--ink); }
  h1, h2 { font-weight: 800; letter-spacing: -.018em; }
  h3, h4 { font-weight: 700; letter-spacing: -.01em; }

  .eyebrow, .label, .data, .btn, .topnav a, .toc a, .state-mini, label, select,
  .stamp, .crumbs, .result-kicker, .sit-readout label, .tl-item .yr, .sec-no, .stat .k, .compare-tabs button {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }

  /* dossier field label */
  .eyebrow {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em;
    color: var(--navy-2); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  }
  .eyebrow .sec-no { color: var(--signal); }
  .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--navy-2); display: inline-block; }
  .eyebrow.alert { color: var(--signal); }
  .eyebrow.alert::before { background: var(--signal); }

  /* ---- top bar ---- */
  .topbar { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; border-bottom: 2px solid var(--signal); }
  .nav { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .brand { font-weight: 800; font-size: 21px; letter-spacing: -.01em; text-decoration: none; color: #fff; line-height: 1; white-space: nowrap; }
  .brand:hover, .brand:active, .brand:visited, .brand:focus, .brand:focus-visible { color: #fff; }
  .brand .sucks { color: #ff8d80; }
  .brand:hover .sucks, .brand:active .sucks, .brand:focus .sucks { color: #ff8d80; }
  .topnav { display: flex; align-items: center; gap: 2px; overflow: hidden; }
  .topnav a { font-size: 13.5px; letter-spacing: .04em; color: rgba(255,255,255,.74); text-decoration: none; padding: 8px 9px; border-radius: 3px; white-space: nowrap; }
  .topnav a:hover { color: #fff; background: rgba(255,255,255,.1); }
  .nav-actions { display: flex; align-items: center; gap: 8px; }

  /* ---- buttons ---- */
  .btn {
    font-size: 12px; font-weight: 500; letter-spacing: .05em;
    min-height: 44px; padding: 0 17px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink);
    text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .05s;
  }
  .btn:hover { background: var(--ink); color: #fff; }
  .btn:active { transform: translateY(1px); }
  .btn.alert { border-color: var(--signal-2); background: var(--signal); color: #fff; }
  .btn.alert:hover { background: var(--signal-2); }
  .btn.navy { border-color: var(--navy-deep); background: var(--navy); color: #fff; }
  .btn.navy:hover { background: var(--navy-deep); }
  .btn.ghost { border-color: var(--line); color: var(--muted); }
  .btn.ghost:hover { background: var(--line-soft); color: var(--ink); border-color: var(--ink); }
  .btn.sm { min-height: 36px; padding: 0 13px; font-size: 11px; }
  /* the language switch: a clear navy control on the dark bar */
  #langToggle { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); min-height: 36px; padding: 0 14px; font-weight: 600; letter-spacing: .08em; }
  #langToggle:hover { background: #fff; color: var(--navy); border-color: #fff; }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

  /* ---- masthead ---- */
  .masthead { padding: 50px 0 8px; }
  .mast-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 44px; align-items: start; }
  .mast-title { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.0; margin: 0 0 8px; max-width: 17ch; }
  .mast-title .sci { display: block; font-family: "Source Serif 4", serif; font-style: italic; font-weight: 400; font-size: clamp(16px, 2vw, 21px); color: var(--muted); letter-spacing: 0; margin-top: 16px; }
  .mast-lead { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.42; color: var(--body); max-width: 52ch; margin: 22px 0 0; }
  .mast-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

  .status { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
  .status-bar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; background: var(--signal); color: #fff; }
  .status-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; animation: pulse 2.4s infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
  @media (prefers-reduced-motion: reduce){ .status-bar .dot{ animation: none; } }
  .status-bar .label { font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
  .status-body { padding: 18px; }
  .status-body h2 { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
  .status-body p { font-size: 15.5px; line-height: 1.5; margin: 0 0 12px; }
  .status-meta { font-family:"IBM Plex Mono",monospace; font-size: 10.5px; color: var(--faint); letter-spacing: .03em; border-top: 1px solid var(--line-soft); padding-top: 10px; line-height: 1.5; }

  .emergency { border: 1px solid var(--navy); border-radius: 4px; background: var(--panel-2); margin-top: 16px; }
  .emergency-h { background: var(--navy); color: #fff; font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; }
  .emergency ol { margin: 0; padding: 14px 16px 16px 32px; }
  .emergency li { font-size: 15px; line-height: 1.42; margin-bottom: 9px; color: var(--body); }
  .emergency li:last-child { margin-bottom: 0; }

  /* ---- sections ---- */
  section { padding: 58px 0; border-top: 1px solid var(--line); }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2 { font-size: clamp(27px, 3.9vw, 44px); line-height: 1.07; margin: 0 0 14px; max-width: 22ch; }
  .sec-head .measure p:last-child { margin-bottom: 0; }

  /* index / toc: bordered cells, gaps, no gray block */
  .toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .toc a { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 14px 15px; text-decoration: none; color: var(--ink); display: flex; gap: 11px; align-items: baseline; font-size: 12.5px; letter-spacing: .02em; transition: background .15s, border-color .15s; }
  .toc a:hover { background: var(--panel-2); border-color: var(--navy); }
  .toc a .n { color: var(--signal); font-size: 11px; }

  .prose p { font-size: 19px; }
  .prose .measure { max-width: 66ch; }
  .pull { font-family:"Libre Franklin",sans-serif; font-weight: 700; font-size: clamp(21px, 2.5vw, 28px); line-height: 1.3; color: var(--navy); border-left: 3px solid var(--signal); padding: 2px 0 2px 20px; margin: 24px 0; max-width: 32ch; letter-spacing: -.01em; }

  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
  .cols2.tight { gap: 16px; }

  /* specimen */
  .specimen { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
  .plate { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 20px; box-shadow: var(--shadow); }
  .plate .stamp { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; margin-bottom: 12px; }
  .plate figcaption { font-family:"IBM Plex Mono",monospace; font-size: 11px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
  .id-list { list-style: none; margin: 0; padding: 0; }
  .id-list li { padding: 15px 0; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 132px 1fr; gap: 18px; }
  .id-list li:last-child { border-bottom: none; }
  .id-list dt { font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--navy-2); padding-top: 2px; }
  .id-list dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }

  /* compare */
  .compare-tabs { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
  .compare-tabs button { font-size: 11.5px; letter-spacing: .03em; padding: 11px 15px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
  .compare-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
  .compare-panel { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 22px; }
  .compare-panel h3 { font-size: 23px; margin: 0 0 4px; }
  .compare-panel .tag { font-family:"IBM Plex Mono",monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
  .compare-panel .tag.bad { color: var(--signal); }
  .compare-panel .tag.ok { color: var(--navy-2); }
  .compare-panel ul { margin: 15px 0 0; padding-left: 18px; }
  .compare-panel li { font-size: 16px; margin-bottom: 8px; color: var(--body); }

  /* life cycle */
  .cycle-wrap { display: grid; grid-template-columns: minmax(280px,1fr) 1fr; gap: 42px; align-items: center; }
  .svg-block { width: 100%; height: auto; display: block; }
  .cnode { cursor: pointer; }
  .cnode circle { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
  .cnode text { font-family:"IBM Plex Mono",monospace; font-size: 12px; fill: var(--muted); letter-spacing: .03em; }
  .cnode .num { font-size: 13px; fill: var(--ink); font-weight: 600; }
  .cnode.active circle { fill: var(--navy); stroke: var(--navy-deep); }
  .cnode.active text { fill: var(--navy); font-weight: 600; }
  .cnode.active .num { fill: #fff; }
  .cyc-ring { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
  .cyc-arrow { fill: var(--faint); }
  .cyc-break { opacity: 0; transition: opacity .3s; }
  .cyc-break.show { opacity: 1; }
  .cyc-break line { stroke: var(--signal); stroke-width: 2.5; }
  .cyc-break text { font-family:"IBM Plex Mono",monospace; font-size: 10px; fill: var(--signal-2); letter-spacing: .05em; }
  .cycle-detail { min-height: 240px; }
  .cycle-detail .step { font-family:"IBM Plex Mono",monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
  .cycle-detail h3 { font-size: clamp(25px,3vw,34px); line-height: 1.05; margin: 8px 0 4px; }
  .cycle-detail .timing { font-family:"IBM Plex Mono",monospace; font-size: 12px; color: var(--navy-2); letter-spacing: .03em; margin-bottom: 13px; }
  .cycle-detail p { font-size: 17px; line-height: 1.55; }
  .cycle-controls { display: flex; gap: 9px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
  .cycle-dots { display: flex; gap: 6px; margin-left: auto; }
  .cycle-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
  .cycle-dots i.on { background: var(--navy); }

  /* SIT */
  .sit { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 24px; }
  .sit-top { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: center; }
  .sit-chart { width: 100%; height: 200px; display: block; }
  .sit-readout label { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--navy-2); margin-bottom: 8px; }
  .sit-ratio { font-family:"Libre Franklin",sans-serif; font-size: 50px; line-height: 1; color: var(--ink); font-weight: 800; }
  .sit-ratio small { font-size: 16px; color: var(--muted); font-family:"IBM Plex Mono",monospace; font-weight: 400; }
  input[type="range"] { width: 100%; margin: 16px 0 6px; accent-color: var(--navy); }
  .sit-scale { display: flex; justify-content: space-between; font-family:"IBM Plex Mono",monospace; font-size: 10px; color: var(--faint); }
  .sit-verdict { margin-top: 18px; font-family:"IBM Plex Mono",monospace; font-size: 12.5px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--line); line-height: 1.45; }
  .sit-verdict.win { border-color: var(--navy); color: var(--navy); background: rgba(20,40,68,.06); }
  .sit-verdict.lose { border-color: var(--signal); color: var(--signal-2); background: rgba(177,40,29,.07); }

  /* stat tiles (economy) */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
  .stat { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 18px 18px 16px; }
  .stat .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 8px; }
  .stat .v { font-family:"Libre Franklin",sans-serif; font-weight: 800; font-size: clamp(28px,3.4vw,40px); line-height: 1; color: var(--navy); letter-spacing: -.02em; }
  .stat .d { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

  /* timeline */
  .timeline { border-left: 2px solid var(--line); margin-left: 6px; }
  .tl-item { position: relative; padding: 0 0 24px 28px; }
  .tl-item::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy); }
  .tl-item.now::before { background: var(--signal); border-color: var(--signal-2); }
  .tl-item .yr { font-size: 12.5px; font-weight: 600; color: var(--navy-2); letter-spacing: .02em; }
  .tl-item.now .yr { color: var(--signal-2); }
  .tl-item h3 { font-size: 18px; margin: 2px 0 4px; }
  .tl-item p { font-size: 15px; line-height: 1.5; margin: 0; }

  /* signs */
  .signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sign { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 20px; }
  .sign .n { font-family:"IBM Plex Mono",monospace; font-size: 10.5px; color: var(--signal); letter-spacing: .1em; }
  .sign h3 { font-size: 19px; line-height: 1.15; margin: 6px 0 8px; }
  .sign p { font-size: 15px; line-height: 1.46; margin: 0; color: var(--muted); }
  .rule-note { border: 1px solid var(--signal-2); background: rgba(177,40,29,.07); border-radius: 4px; padding: 17px 20px; margin-top: 18px; }
  .rule-note p { margin: 0; font-size: 16.5px; color: var(--signal-2); }

  .hosts { display: flex; flex-wrap: wrap; gap: 8px; }
  .hosts span { font-family:"IBM Plex Mono",monospace; font-size: 12px; letter-spacing: .02em; border: 1px solid var(--line); border-radius: 3px; padding: 7px 11px; color: var(--body); background: var(--panel); }

  .panel { border: 1px solid var(--line); border-radius: 4px; padding: 22px; background: var(--panel); }
  .panel.dont { background: var(--navy); border-color: var(--navy-deep); }
  .panel.dont h3 { color: #fff; }
  .panel.dont li { color: #d6dde7; }
  .panel.dont li::marker { color: #ff8d80; }
  .panel h3 { font-size: 22px; margin: 0 0 14px; }
  .panel ul { margin: 0; padding-left: 18px; }
  .panel li { font-size: 16px; margin-bottom: 10px; line-height: 1.45; color: var(--body); }

  /* router */
  .router { border: 1.5px solid var(--navy); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
  .router-top { background: var(--navy); color: #fff; padding: 20px 22px; }
  .router-top h2 { color: #fff; font-size: clamp(23px,3vw,32px); margin: 0 0 6px; }
  .router-top p { color: rgba(255,255,255,.8); margin: 0; font-size: 14.5px; max-width: 60ch; }
  .router-body { display: grid; grid-template-columns: 310px 1fr; }
  .selector { padding: 22px; border-right: 1px solid var(--line); background: var(--panel-2); }
  label { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-2); margin-bottom: 7px; }
  select { width: 100%; min-height: 48px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; font-family:"IBM Plex Mono",monospace; font-size: 13px; padding: 0 12px; margin-bottom: 18px; }
  .state-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 4px; }
  .state-mini { min-height: 32px; border: 1px solid var(--line); background: var(--panel); font-size: 10.5px; font-weight: 500; cursor: pointer; border-radius: 2px; color: var(--body); }
  .state-mini:hover { border-color: var(--ink); }
  .state-mini.hot { background: rgba(177,40,29,.1); border-color: var(--signal); color: var(--signal-2); }
  .state-mini.active { background: var(--navy); color: #fff; border-color: var(--navy-deep); }
  .result { padding: 24px; min-height: 320px; }
  .result-kicker { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; }
  .result h3 { font-size: clamp(23px,3.3vw,36px); line-height: 1.05; margin: 0 0 12px; }
  .result p { font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
  .actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
  .source { display: block; font-family:"IBM Plex Mono",monospace; color: var(--faint); margin-top: 18px; font-size: 11px; line-height: 1.5; }

  /* faq */
  .faq details { border-bottom: 1px solid var(--line); }
  .faq details:first-of-type { border-top: 1px solid var(--line); }
  .faq summary { font-family:"Libre Franklin",sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 18px 38px 18px 0; list-style: none; position: relative; letter-spacing: -.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 2px; top: 15px; font-family:"IBM Plex Mono",monospace; font-size: 24px; color: var(--signal); transition: transform .2s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .ans { padding: 0 0 20px; max-width: 72ch; }
  .faq .ans p { font-size: 16.5px; margin: 0; }

  .glossary { columns: 2; column-gap: 40px; }
  .glossary dt { font-family:"Libre Franklin",sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); margin-top: 15px; }
  .glossary dt:first-child { margin-top: 0; }
  .glossary dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--body); break-inside: avoid; }

  .sources { display: grid; gap: 9px; }
  .src { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; background: var(--panel); transition: background .15s, border-color .15s; }
  .src:hover { background: var(--panel-2); border-color: var(--navy); }
  .src .tag { font-family:"IBM Plex Mono",monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 9px 4px; background: var(--navy); color: #fff; border-radius: 3px; }
  .src .tag.red { background: var(--signal); }
  .src h3 { font-size: 17px; margin: 0 0 3px; }
  .src p { font-size: 13.5px; margin: 0; color: var(--muted); }

  footer { padding: 38px 0 60px; border-top: 1px solid var(--line); }
  footer .measure { max-width: 80ch; }
  footer p { font-size: 13px; color: var(--muted); line-height: 1.6; }
  .foot-brand { font-family:"Libre Franklin",sans-serif; font-weight: 700; color: var(--ink); }
  .credit { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-family:"IBM Plex Mono",monospace; font-size: 12px; letter-spacing: .03em; color: var(--faint); }
  .credit a { color: var(--navy-2); font-weight: 500; text-decoration: none; }
  .credit a:hover { color: var(--navy); text-decoration: underline; }

  [data-lang="es"] .en-only { display: none !important; }
  [data-lang="en"] .es-only { display: none !important; }

  /* ---- responsive ---- */
  @media (max-width: 980px) { .topnav { display: none; } }
  @media (max-width: 900px) {
    .mast-grid, .cols2, .specimen, .cycle-wrap, .sit-top, .router-body { grid-template-columns: 1fr; }
    .selector { border-right: none; border-bottom: 1px solid var(--line); }
    .toc, .signs, .stats { grid-template-columns: repeat(2, 1fr); }
    .plate { max-width: 340px; }
    .masthead { padding-top: 36px; }
  }
  @media (max-width: 560px) {
    body { font-size: 18px; }
    .wrap { width: calc(100% - 28px); }
    .nav { min-height: 54px; }
    .brand { font-size: 18px; }
    .toc, .signs, .stats { grid-template-columns: 1fr; }
    .glossary { columns: 1; }
    .id-list li { grid-template-columns: 1fr; gap: 3px; }
    .src { grid-template-columns: 64px 1fr; gap: 14px; }
    section { padding: 44px 0; }
    .prose p, .mast-lead { font-size: 17.5px; }
    .mast-actions .btn, .btn { width: auto; }
    .state-buttons { grid-template-columns: repeat(6, 1fr); }
  }