/* ============================================================
     SO WHAT SCALE — sistema visual
     Identidad: tapas de jazz de mediados de siglo (títulos condensados,
     notas de contratapa en mono). Interfaz: controles nativos al estilo
     Apple (segmentados, hojas, popovers, switches, blur), objetivos táctiles
     de 44 px y movimiento suave.
     ============================================================ */

  /* ============================================================
     TOKENS — valores de "Blue" (disco por defecto). app.js los pisa con el
     disco elegido; acá quedan para el primer pintado y las páginas legales.
     Dos acentos y nada más: --shu = tónica, --ai = notas de la escala.
     ============================================================ */
  :root {
    --paper: #eef2f8;
    --paper-2: #f8fafd;
    --ink: #0b1a33;
    --ink-2: #3a4b6b;
    --ink-3: #7b89a3;
    --hair: rgba(11, 26, 51, .10);
    --hair-2: rgba(11, 26, 51, .18);
    --shu: #b8730f;            /* tónica */
    --ai:  #1d5fd6;            /* notas de la escala */
    --white-key: #fdfdff;
    --white-key-2: #e1e7f1;
    --black-key: #0d1830;
    --black-key-2: #263450;
    --tint-in: 0.16;
    --tint-root: 0.24;
    --key-ratio: 5.4;
    --bkey-ratio: 0.58;
    --bkey-h: 62%;
    --r: 10px;                /* radio de controles */
    --r-tag: 999px;           /* radio de la etiqueta de nota */
    --r-frame: 18px;          /* radio del marco del teclado */
    --r-card: 18px;           /* radio de tarjetas y hojas */
    --rule: 1px;
    --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --title-font: var(--display);
    --title-weight: 800;
    --title-stretch: 68%;
    --title-style: normal;
    --title-transform: uppercase;
    --title-tracking: -.005em;
    --title-size: clamp(36px, 5.4vw, 74px);
    --eyebrow-tracking: .16em;
    --frame-bg: var(--paper-2);
    --frame-glow: none;
    --paper-texture: none;
    --fill: color-mix(in srgb, var(--ink) 6%, transparent);      /* relleno de controles (como systemFill) */
    --fill-2: color-mix(in srgb, var(--ink) 10%, transparent);
    --glass: color-mix(in srgb, var(--paper) 72%, transparent);  /* barras translúcidas */
    --shadow-pop: 0 1px 0 var(--hair) inset, 0 24px 60px -12px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.08);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.34, 1.4, .64, 1);
    --t: 220ms;
    --page: 1240px;                      /* ancho máximo del contenido */
    --gutter: clamp(16px, 4vw, 56px);    /* margen lateral */
    /* UI: la tipografía del sistema (SF en Apple) y Archivo en el resto */
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Archivo", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0a1324; --paper-2: #0f1b31; --ink: #e9eef7; --ink-2: #a7b4cc; --ink-3: #687a99;
      --hair: rgba(233, 238, 247, .10); --hair-2: rgba(233, 238, 247, .18);
      --shu: #f0b44c; --ai: #4d8dff;
      --white-key: #e8edf5; --white-key-2: #c7d1e0; --black-key: #070d19; --black-key-2: #1d2940;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0a1324; --paper-2: #0f1b31; --ink: #e9eef7; --ink-2: #a7b4cc; --ink-3: #687a99;
    --hair: rgba(233, 238, 247, .10); --hair-2: rgba(233, 238, 247, .18);
    --shu: #f0b44c; --ai: #4d8dff;
    --white-key: #e8edf5; --white-key-2: #c7d1e0; --black-key: #070d19; --black-key-2: #1d2940;
  }

  /* ============================================================
     BASE
     ============================================================ */
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  html { color-scheme: light dark; -webkit-tap-highlight-color: transparent; }
  body {
    background: var(--paper-texture), var(--paper); background-attachment: fixed; color: var(--ink); min-height: 100vh;
    font: 400 15px/1.5 var(--sans);
    font-feature-settings: "tnum";
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    padding: 0 0 max(28px, env(safe-area-inset-bottom));
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  ::selection { background: color-mix(in srgb, var(--ai) 25%, transparent); }
  svg { width: 20px; height: 20px; flex: none; display: block; }

  .eyebrow { margin: 0; font: 600 11px/1.2 var(--sans); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); }
  .eyebrow span { letter-spacing: .04em; text-transform: none; font-weight: 400; margin-left: 6px; opacity: .8; }

  /* ============================================================
     CONTROLES BASE
     ============================================================ */
  button, input {
    font: 500 14px/1 var(--sans); color: var(--ink); background: transparent;
    border: 0; border-radius: var(--r); padding: 0 14px; min-height: 40px;
    touch-action: manipulation; outline: none;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  button:hover { background: var(--fill); }
  button:active { transform: scale(.96); }
  button:focus-visible, input:focus-visible, .title-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai) 45%, transparent); }
  input::placeholder { color: var(--ink-3); font-weight: 400; }

  /* Botón de ícono redondo (toolbar) */
  button.icon { width: 40px; padding: 0; border-radius: 999px; color: var(--ink-2); }
  button.icon:hover { color: var(--ink); }
  button.icon.on, button.icon.active, .disc-btn.active { background: var(--fill-2); color: var(--ink); }
  #wake.on, #float.on { background: var(--shu); color: var(--on-shu, #fff); }

  /* Acción principal: Escuchar */
  button.play {
    background: var(--shu); color: var(--on-shu, #fff); border-radius: 999px; padding: 0 22px 0 18px; min-height: 48px;
    font: 700 15px/1 var(--sans); letter-spacing: .01em;
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--shu) 80%, transparent);
  }
  button.play svg { width: 18px; height: 18px; }
  button.play:hover { background: color-mix(in srgb, var(--shu) 88%, var(--ink)); }

  /* Control segmentado (UISegmentedControl) */
  .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--fill); }
  .seg button { min-height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .seg button:hover { background: transparent; color: var(--ink); }
  .seg button.on { background: var(--paper-2); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); }
  :root[data-theme="dark"] .seg button.on { background: color-mix(in srgb, var(--ink) 18%, var(--paper)); }

  /* Switch (UISwitch) */
  input.switch {
    appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 0; padding: 0; flex: none;
    border-radius: 999px; background: var(--fill-2); position: relative; cursor: pointer;
  }
  input.switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
    background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform 260ms var(--spring);
  }
  input.switch:checked { background: var(--ai); }
  input.switch:checked::after { transform: translateX(20px); }

  /* ============================================================
     BARRA SUPERIOR — translúcida, fija
     ============================================================ */
  header.bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))) 10px;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hair);
  }
  .brand { display: inline-flex; align-items: baseline; gap: .2em; color: var(--ink); text-decoration: none; line-height: 1; white-space: nowrap; }
  .brand b { font: 900 25px/1 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .01em; }
  .brand i { font: italic 400 25px/1 var(--serif); color: var(--shu); }
  .tools { display: flex; align-items: center; gap: 2px; }
  .tools .sep { width: 1px; height: 20px; background: var(--hair-2); margin: 0 6px; }
  .disc-btn { min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
  .disc-btn:hover { color: var(--ink); }

  /* ============================================================
     ESCENA PRINCIPAL
     ============================================================ */
  .stage, footer { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
  .stage { padding-top: clamp(18px, 3vw, 32px); }

  /* Tónica: control segmentado de 12 */
  .roots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 4px; border-radius: 14px; background: var(--fill); }
  .roots button {
    flex-direction: column; gap: 3px; min-height: 48px; padding: 0; border-radius: 10px;
    font: 600 16px/1 var(--sans); color: var(--ink-2);
  }
  .roots button small { font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }
  .roots button:hover { background: transparent; color: var(--ink); }
  .roots button.on { background: var(--shu); color: var(--on-shu, #fff); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--shu) 70%, transparent); }
  .roots button.on small { color: inherit; opacity: .75; }

  /* Título: ‹ D DÓRICO ⌄ › — el título abre la hoja de escalas */
  .headline { margin: clamp(22px, 3.4vw, 40px) 0 16px; }
  .title-row { display: flex; align-items: center; gap: 6px; margin-left: -8px; }
  .title { margin: 0; min-width: 0; flex: 0 1 auto; font: inherit; }
  .title-btn {
    display: inline-block; min-height: 0; padding: 4px 10px 6px; border-radius: 16px; text-align: left; text-wrap: balance;
    font-family: var(--title-font); font-weight: var(--title-weight); font-stretch: var(--title-stretch); font-style: var(--title-style);
    font-size: var(--title-size); line-height: .92; letter-spacing: var(--title-tracking); text-transform: var(--title-transform); color: var(--ink);
  }
  .title-btn:hover { background: var(--fill); }
  .title-btn:active { transform: scale(.985); }
  .title-btn .root { color: var(--shu); margin-right: .08em; }
  .title-btn .chev { display: inline-block; width: .42em; height: .42em; margin-left: .14em; vertical-align: .12em; color: var(--ink-3); transition: transform var(--t) var(--ease); }
  .title-btn.long { font-size: calc(var(--title-size) * .78); }
  .title-btn .chev svg { width: 100%; height: 100%; stroke-width: 2.4; }
  .title-btn:hover .chev { transform: translateY(2px); color: var(--ink-2); }
  #title { display: inline; }
  #title .acc { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .5em; vertical-align: .62em; margin: 0 .04em 0 .02em; letter-spacing: 0; }
  button.step { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 999px; flex: none; color: var(--ink-3); background: var(--fill); }
  button.step:hover { color: var(--ink); background: var(--fill-2); }
  button.step svg { width: 22px; height: 22px; }
  .headline .meta { margin: 12px 0 0 2px; font: 400 11.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
  .headline .meta b { font-weight: 500; color: var(--ink-2); padding: 4px 9px; border-radius: 999px; background: var(--fill); letter-spacing: .06em; }

  .note { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: -4px 0 16px; padding: 10px 14px; background: color-mix(in srgb, var(--shu) 9%, transparent); border-radius: 12px; animation: fade 300ms var(--ease) both; }
  .note[hidden] { display: none; }
  .note .mark { color: var(--shu); font-weight: 600; flex: none; }
  body.compact .note { display: none; }

  /* ============================================================
     TECLADO
     ============================================================ */
  .kb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
  .legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-3); }
  .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
  .legend .lg-root { background: var(--shu); }
  .legend .lg-in { background: var(--ai); }

  .kb-frame { padding: 14px; border: 1px solid var(--hair); border-radius: var(--r-frame); background: var(--frame-glow), var(--frame-bg); box-shadow: 0 1px 0 var(--hair) inset, 0 30px 60px -36px rgba(0,0,0,.5); }
  .keyboard {
    position: relative; display: flex; width: 100%; max-height: min(44vh, 300px);
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
    border-radius: 3px 3px 9px 9px; overflow: hidden;
  }
  body.compact .keyboard { max-height: calc(100vh - 150px); }
  body.pip .keyboard { max-height: calc(100vh - 96px); }
  .key { position: relative; cursor: pointer; transition: transform 90ms var(--ease), filter 90ms var(--ease), background 260ms var(--ease); transform-origin: top; }
  .key.white {
    flex: 1 1 0; z-index: 1;
    background: linear-gradient(180deg, var(--white-key) 0%, var(--white-key) 82%, var(--white-key-2) 100%);
    border-right: 1px solid var(--hair-2);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 -1px 0 rgba(0,0,0,.08) inset;
  }
  .key.white:last-child { border-right: 0; }
  .key.black {
    position: absolute; top: 0; height: var(--bkey-h); z-index: 2;
    background: linear-gradient(180deg, var(--black-key-2) 0%, var(--black-key) 12%, var(--black-key) 100%);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.12) inset;
  }
  .key.white.in   { background: linear-gradient(180deg, color-mix(in srgb, var(--ai) calc(var(--tint-in) * 100%), var(--white-key)), color-mix(in srgb, var(--ai) calc(var(--tint-in) * 110%), var(--white-key-2))); }
  .key.black.in   { background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 28%, var(--black-key-2)), color-mix(in srgb, var(--ai) calc(var(--tint-in) * 90%), var(--black-key)) 14%); }
  .key.white.root { background: linear-gradient(180deg, color-mix(in srgb, var(--shu) calc(var(--tint-root) * 100%), var(--white-key)), color-mix(in srgb, var(--shu) calc(var(--tint-root) * 110%), var(--white-key-2))); }
  .key.black.root { background: linear-gradient(180deg, color-mix(in srgb, var(--shu) 32%, var(--black-key-2)), color-mix(in srgb, var(--shu) calc(var(--tint-root) * 90%), var(--black-key)) 14%); }
  @media (hover: hover) { .key:hover { filter: brightness(.97); } }
  .key:active, .key.playing { transform: scaleY(.985) translateY(1px); filter: brightness(.93); }
  .key.white.playing { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai) 60%, transparent) inset, 0 0 22px color-mix(in srgb, var(--ai) 40%, transparent); }
  .key.root.playing { box-shadow: 0 0 0 1px color-mix(in srgb, var(--shu) 60%, transparent) inset, 0 0 22px color-mix(in srgb, var(--shu) 45%, transparent); }

  .key .tag {
    position: absolute; left: 50%; transform: translateX(-50%);
    min-width: 1.85em; height: 1.85em; padding: 0 .42em; border-radius: var(--r-tag);
    display: flex; align-items: center; justify-content: center;
    font: 600 var(--tag-fs, 12px)/1 var(--sans); letter-spacing: 0; white-space: nowrap;
    background: var(--ai); color: var(--on-ai, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    animation: pop 460ms var(--spring) both; animation-delay: calc(var(--i, 0) * 26ms);
  }
  .key.root .tag { background: var(--shu); color: var(--on-shu, #fff); }
  .key.white .tag { bottom: 7%; }
  .key.black .tag { bottom: 8%; font-size: calc(var(--tag-fs, 12px) * .88); }
  .key .name { position: absolute; left: 0; right: 0; bottom: 27%; text-align: center; font: 400 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .02em; }
  .key.black .name { color: rgba(255,255,255,.45); bottom: 31%; }
  .kb-hint { margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-3); }

  /* Notas + grado, y Escuchar */
  .kb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
  .seq { display: flex; flex-wrap: wrap; gap: 6px; }
  .seq .n {
    display: inline-grid; justify-items: center; gap: 5px; min-width: 50px; padding: 10px 10px 9px;
    border-radius: 12px; background: var(--fill);
    animation: rise 380ms var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms);
  }
  .seq .n b { font: 600 19px/1 var(--sans); color: var(--ink); }
  .seq .n small { font: 400 11px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
  .seq .n.root { background: color-mix(in srgb, var(--shu) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--shu) 45%, transparent) inset; }
  .seq .n.root b { color: var(--shu); }
  .seq .n.ghost { opacity: .45; }

  /* ============================================================
     INFO — tarjetas agrupadas
     ============================================================ */
  .info { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 14px; margin-top: 32px; }
  .card { padding: 20px 22px 18px; border-radius: var(--r-card); background: color-mix(in srgb, var(--paper-2) 80%, transparent); border: 1px solid var(--hair); animation: fade 400ms var(--ease) both; }
  .card .eyebrow { margin-bottom: 16px; }

  .ruler { display: flex; gap: 3px; height: 38px; }
  .ruler .step {
    display: flex; align-items: center; justify-content: center;
    font: 500 12px/1 var(--mono); color: var(--ink-2);
    border-radius: 8px; background: var(--fill);
    animation: rise 360ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);
  }
  .ruler .step.s { background: color-mix(in srgb, var(--ai) 20%, transparent); color: var(--ai); font-weight: 600; }
  .semis { font: 400 13px/1 var(--mono); color: var(--ink-3); margin-top: 14px; letter-spacing: .12em; }
  .semis b { color: var(--ink); font-weight: 500; }

  table.deg { border-collapse: collapse; width: 100%; font-size: 13.5px; }
  table.deg th { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--hair); }
  table.deg td { padding: 8px 0; border-bottom: 1px solid var(--hair); font-family: var(--mono); color: var(--ink-2); }
  table.deg tr:last-child td { border-bottom: 0; }
  table.deg td:first-child { color: var(--ink); font-family: var(--sans); font-weight: 600; }
  table.deg tr.root td { color: var(--shu); }
  table.deg tr { animation: fade 300ms var(--ease) both; }

  .related ul { list-style: none; margin: 0 -10px; padding: 0; }
  .related li { display: flex; }
  .related a {
    flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 10px;
    color: var(--ink); cursor: pointer; text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background-color var(--t) var(--ease);
  }
  .related a:hover { background: var(--fill); }
  .related a small { color: var(--ink-3); white-space: nowrap; font-size: 11.5px; font-weight: 400; }
  .related .empty { color: var(--ink-3); padding: 9px 10px; font-size: 14px; }

  footer { color: var(--ink-3); font-size: 12px; margin-top: 44px; line-height: 1.7; }
  footer::before { content: ""; display: block; height: 1px; background: var(--hair); margin-bottom: 18px; }
  footer p { margin: 0 0 8px; max-width: 880px; }
  footer kbd, .page kbd { font: 500 11px/1 var(--mono); border-radius: 5px; padding: 3px 6px; background: var(--fill); color: var(--ink-2); }
  footer nav { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
  footer nav a, footer nav button { color: var(--ink-2); font: inherit; background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; text-decoration: none; }
  footer nav a:hover, footer nav button:hover { color: var(--ink); background: none; text-decoration: underline; text-underline-offset: 3px; }
  code { font-family: var(--mono); font-size: .92em; }

  /* ============================================================
     POPOVERS (Disco y Vista)
     ============================================================ */
  .pop-wrap { position: relative; }
  .pop {
    position: absolute; right: -4px; top: calc(100% + 10px); z-index: 50;
    background: color-mix(in srgb, var(--paper-2) 95%, transparent); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
    border: 1px solid var(--hair); border-radius: 20px; padding: 10px; box-shadow: var(--shadow-pop);
    display: none; transform-origin: top right;
  }
  .pop.open { display: block; animation: popin 240ms var(--spring) both; }

  /* Vista */
  .view-pop { width: min(380px, calc(100vw - 24px)); padding: 6px 16px; }
  .opt { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .opt:last-child { border-bottom: 0; }
  .opt > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .opt .seg { display: flex; }
  .opt .seg button { flex: 1; padding: 0 8px; }
  .opt .seg.wide { flex-wrap: wrap; }
  .opt .seg.wide button { flex: 1 0 auto; }
  .switch-row { grid-template-columns: 1fr auto; align-items: center; cursor: pointer; }

  /* Disco */
  .pal-pop { width: min(600px, calc(100vw - 24px)); }
  .pal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .pal {
    position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; text-align: left;
    padding: 10px; border-radius: 14px; min-height: 0; justify-content: stretch; font: inherit; color: var(--ink);
  }
  .pal:hover { background: var(--fill); }
  .pal-pop .pal.on { background: var(--fill-2); }
  .pal-pop .pal.on::after { content: ""; position: absolute; right: 12px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--shu); }
  /* "Tapa" abstracta: bloques de color, nunca la tapa real */
  .sleeve { position: relative; display: block; width: 72px; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--p-paper); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 18px -4px rgba(0,0,0,.4); transition: transform 300ms var(--spring); }
  .pal:hover .sleeve { transform: rotate(-3deg) scale(1.04); }
  .sleeve i { position: absolute; display: block; }
  .sleeve[data-id="blue"] { background: var(--p-bk); }
  .sleeve[data-id="blue"] i:nth-child(1) { inset: 14% 34% 26% 10%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--p-ai) 70%, #fff), var(--p-ai) 60%); }
  .sleeve[data-id="blue"] i:nth-child(2) { left: 10%; right: 10%; bottom: 12%; height: 5%; background: var(--p-paper); opacity: .85; }
  .sleeve[data-id="blue"] i:nth-child(3) { width: 16%; aspect-ratio: 1; border-radius: 50%; right: 12%; top: 14%; background: var(--p-shu); }
  .sleeve[data-id="midnight"] { background: #0b0304; }
  .sleeve[data-id="midnight"] i:nth-child(1) { inset: 0; background: radial-gradient(circle at 55% 45%, var(--p-shu), color-mix(in srgb, var(--p-shu) 35%, #000) 55%, #000 90%); }
  .sleeve[data-id="midnight"] i:nth-child(2) { left: 22%; right: 22%; top: 38%; height: 9%; background: #000; border-radius: 2px; }
  .sleeve[data-id="midnight"] i:nth-child(3) { left: 10%; bottom: 10%; width: 36%; height: 4%; background: var(--p-paper); opacity: .8; }
  .sleeve[data-id="sketches"] { background: var(--p-paper); }
  .sleeve[data-id="sketches"] i:nth-child(1) { width: 92%; aspect-ratio: 1; left: 4%; top: 46%; border-radius: 50%; background: var(--p-ai); }
  .sleeve[data-id="sketches"] i:nth-child(2) { left: -10%; right: -10%; top: 30%; height: 16%; background: var(--p-shu); transform: rotate(-12deg); }
  .sleeve[data-id="sketches"] i:nth-child(3) { left: 14%; top: 12%; width: 40%; height: 3%; background: var(--p-ink); transform: rotate(-12deg); }
  .sleeve[data-id="brew"] { background: var(--p-bk); }
  .sleeve[data-id="brew"] i:nth-child(1) { inset: -20%; background: conic-gradient(from 200deg at 45% 55%, var(--p-ai), #1a0f4a, var(--p-shu), #ffd36a, var(--p-ai)); filter: blur(5px); }
  .sleeve[data-id="brew"] i:nth-child(2) { width: 34%; aspect-ratio: 1; left: 33%; top: 33%; border-radius: 50%; background: var(--p-bk); box-shadow: 0 0 12px var(--p-shu); }
  .sleeve[data-id="brew"] i:nth-child(3) { width: 12%; aspect-ratio: 1; left: 44%; top: 44%; border-radius: 50%; background: var(--p-shu); }
  .pal-txt { display: block; min-width: 0; padding-top: 2px; }
  .pal-txt b { display: inline; font: 800 20px/1 var(--display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
  .pal-txt small { font: 400 11px/1 var(--mono); color: var(--ink-3); margin-left: 6px; letter-spacing: .06em; }
  .pal-txt span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--ink-3); font-weight: 400; }
  .modes { display: flex; padding: 3px; gap: 2px; margin: 8px 4px 4px; border-radius: 12px; background: var(--fill); }
  .modes button { flex: 1; min-height: 32px; font-size: 13px; border-radius: 9px; color: var(--ink-2); }
  .modes button:hover { background: transparent; color: var(--ink); }
  .modes button.on { background: var(--paper-2); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); }
  :root[data-theme="dark"] .modes button.on { background: color-mix(in srgb, var(--ink) 18%, var(--paper)); }

  /* ============================================================
     HOJA DE ESCALAS (dialog)
     ============================================================ */
  dialog.sheet {
    width: min(680px, calc(100vw - 32px)); max-height: min(78vh, 760px); margin: auto; padding: 0;
    border: 1px solid var(--hair); border-radius: 24px; color: var(--ink);
    background: color-mix(in srgb, var(--paper-2) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    box-shadow: var(--shadow-pop); overflow: hidden;
  }
  dialog.sheet[open] { display: flex; flex-direction: column; animation: sheetin 320ms var(--spring) both; }
  dialog.sheet::backdrop { background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade 200ms var(--ease) both; }
  .sheet-grab { display: none; }
  .sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
  .search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--fill); color: var(--ink-3); }
  .search input { flex: 1; min-width: 0; min-height: 42px; padding: 0; background: transparent; font-size: 16px; }
  .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .search input:focus-visible { box-shadow: none; }
  .search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai) 40%, transparent); }
  button.done { font-weight: 600; color: var(--ai); padding: 0 10px; }
  .fam-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 12px; scrollbar-width: none; flex: none; }
  .fam-chips::-webkit-scrollbar { display: none; }
  .fam-chips[hidden] { display: none; }
  .fam-chips button { flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
  .fam-chips button:hover { background: var(--fill-2); color: var(--ink); }
  .sheet-list { overflow-y: auto; padding: 0 8px 16px; border-top: 1px solid var(--hair); overscroll-behavior: contain; position: relative; }
  .sheet-list section h3 {
    position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 10px 6px;
    font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
    background: var(--paper-2); box-shadow: 0 6px 8px -6px var(--paper-2);
  }
  .row {
    width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main dots" "notes dots"; gap: 4px 16px; align-items: center;
    min-height: 0; padding: 10px 10px; border-radius: 12px; text-align: left; justify-content: stretch;
  }
  .row:active { transform: none; background: var(--fill-2); }
  .row.on { background: color-mix(in srgb, var(--shu) 13%, transparent); }
  .row-main { grid-area: main; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .row-main b { font-size: 15px; font-weight: 600; white-space: nowrap; }
  .row-main small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-notes { grid-area: notes; font: 400 12px/1.2 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
  .row.on .row-main b { color: var(--shu); }
  .dots { grid-area: dots; display: grid; grid-template-columns: repeat(12, 7px); gap: 3px; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-2); }
  .dots i.on { background: var(--ai); }
  .dots i.r { background: var(--shu); }
  .sheet-list .empty { padding: 28px 12px; color: var(--ink-3); text-align: center; }

  /* ============================================================
     DOCK — barra inferior en el celular
     ============================================================ */
  .dock { display: none; }
  @media (max-width: 640px) {
    .dock {
      position: fixed; z-index: 40; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
      display: flex; align-items: center; gap: 6px; padding: 6px;
      border-radius: 999px; border: 1px solid var(--hair);
      background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
      box-shadow: 0 14px 40px -12px rgba(0,0,0,.4);
    }
    .dock button.icon { width: 48px; height: 48px; background: var(--fill); }
    .dock button.play { min-height: 48px; padding: 0 26px 0 22px; }
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .kb-foot #play { display: none; }
    body.compact .dock { display: none; }
  }

  /* ============================================================
     MODO ESCENA
     ============================================================ */
  body.compact { padding-top: 12px; }
  body.compact .stage { max-width: none; }
  body.compact header.bar, body.compact .roots, body.compact .info, body.compact footer, body.compact .kb-foot #play, body.compact .kb-toolbar, body.compact .kb-hint, body.compact .step { display: none; }
  body.compact .headline { margin: 4px 0 12px; }
  body.compact .title-btn { font-size: clamp(30px, 5vw, 56px); }
  body.compact .kb-frame { padding: 10px; }
  .scene-bar { display: none; gap: 8px; align-items: center; margin-bottom: 12px; }
  body.compact .scene-bar { display: flex; }
  .scene-bar button { min-height: 40px; font-size: 13px; }
  .scene-bar button:not(.play):not(.icon) { background: var(--fill); }
  .scene-bar .grow { flex: 1; }
  .scene-bar .group { display: flex; gap: 2px; }
  .scene-bar .group button { border-radius: 4px; }
  .scene-bar .group button:first-child { border-radius: 999px 4px 4px 999px; }
  .scene-bar .group button:last-child { border-radius: 4px 999px 999px 4px; }
  .scene-bar button.play { min-height: 40px; }

  /* ============================================================
     VENTANA FLOTANTE
     ============================================================ */
  body.pip { padding: 10px 12px; background: var(--paper); max-width: none; }
  body.pip .pip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  body.pip .pip-head h2 { font: var(--title-style) var(--title-weight) 24px/1 var(--title-font); font-stretch: var(--title-stretch); text-transform: var(--title-transform); margin: 0 0 0 4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.pip .pip-head h2 .root { color: var(--shu); }
  body.pip .pip-head button { min-height: 30px; padding: 0 10px; font-size: 12px; background: var(--fill); border-radius: 999px; }
  body.pip .pip-head #p-play { background: var(--shu); color: var(--on-shu, #fff); font-weight: 700; }
  body.pip .kb-frame { padding: 8px; }
  body.pip .seq { margin-top: 8px; }
  body.pip .seq .n { min-width: 34px; padding: 5px 6px 4px; gap: 2px; }
  body.pip .seq .n b { font-size: 13px; }
  body.pip .seq .n small { font-size: 9px; }

  /* ============================================================
     DISCOS — cada tema cambia más que el color: tipografía del título,
     radios, forma de las etiquetas, luz detrás del teclado y fondo.
     ============================================================ */

  /* BLUE — cool y modal: condensada, sobria, luz azul fría desde arriba y la
     tónica en bronce. */
  :root[data-palette="blue"] {
    --paper-texture: radial-gradient(1100px 520px at 85% -10%, color-mix(in srgb, var(--ai) 13%, transparent), transparent 70%);
    --frame-glow: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--ai) 13%, transparent), transparent 60%);
  }
  :root[data-palette="blue"] .key.root .tag { box-shadow: 0 0 0 3px color-mix(in srgb, var(--shu) 28%, transparent), 0 1px 2px rgba(0,0,0,.25); }

  /* MIDNIGHT — cuarto oscuro: condensada pesada y alta, ángulos rectos, regla
     roja bajo la barra; las notas de la escala son anillos y sólo la tónica
     va llena, como el rojo único de la foto. */
  :root[data-palette="midnight"] {
    --title-weight: 900; --title-stretch: 62%; --title-tracking: 0;
    --r: 3px; --r-frame: 4px; --r-card: 4px; --tint-in: 0.07; --tint-root: 0.26;
    --paper-texture: radial-gradient(1000px 520px at 50% 115%, color-mix(in srgb, var(--shu) 16%, transparent), transparent 70%);
    --frame-glow: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--shu) 14%, transparent));
  }
  :root[data-palette="midnight"] header.bar { border-bottom: 2px solid var(--shu); }
  :root[data-palette="midnight"] .brand i { font-style: normal; font-family: var(--display); font-weight: 300; font-stretch: 62%; text-transform: uppercase; }
  :root[data-palette="midnight"] .roots, :root[data-palette="midnight"] .roots button, :root[data-palette="midnight"] .seg, :root[data-palette="midnight"] .seg button,
  :root[data-palette="midnight"] .seq .n, :root[data-palette="midnight"] button.step, :root[data-palette="midnight"] .ruler .step { border-radius: 3px; }
  :root[data-palette="midnight"] .key.in:not(.root) .tag { background: transparent; color: var(--black-key); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai) 70%, var(--black-key)) inset; }
  :root[data-palette="midnight"] .key.black.in:not(.root) .tag { color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset; }
  :root[data-palette="midnight"] .key.root .tag { box-shadow: 0 0 14px color-mix(in srgb, var(--shu) 70%, transparent); }
  :root[data-palette="midnight"] .seq .n:not(.root) { background: transparent; box-shadow: 0 0 0 1px var(--hair-2) inset; }

  /* SKETCHES — boceto al sol: serif itálica grande, papel con grano, esquinas
     de sello y marco teñido de ocre. */
  :root[data-palette="sketches"] {
    --title-font: var(--serif); --title-weight: 400; --title-stretch: 100%; --title-style: italic; --title-transform: none; --title-tracking: -.015em;
    --title-size: clamp(42px, 6.2vw, 86px);
    --r: 8px; --r-tag: 6px; --r-frame: 10px; --r-card: 10px;
    --paper-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .28  0 0 0 0 .12  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --frame-glow: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--ai) 16%, transparent), transparent 60%);
  }
  :root[data-palette="sketches"] .kb-frame { border-color: color-mix(in srgb, var(--ai) 35%, transparent); }
  :root[data-palette="sketches"] .title-btn .root { font-style: normal; }
  :root[data-palette="sketches"] .eyebrow { color: color-mix(in srgb, var(--shu) 70%, var(--ink-3)); }
  :root[data-palette="sketches"] .ruler .step.s { background: color-mix(in srgb, var(--ai) 26%, transparent); color: var(--ink); }
  :root[data-palette="sketches"] .dots i.on { background: var(--ai); }

  /* BREW — eléctrico: itálica condensada con degradado de fuego a violeta,
     auroras detrás del teclado y etiquetas que brillan. */
  :root[data-palette="brew"] {
    --title-weight: 900; --title-stretch: 72%; --title-style: italic;
    --r-frame: 24px; --r-card: 22px;
    --paper-texture: radial-gradient(900px 560px at 0% 0%, color-mix(in srgb, var(--ai) 18%, transparent), transparent 70%), radial-gradient(800px 520px at 100% 100%, color-mix(in srgb, var(--shu) 13%, transparent), transparent 70%);
    --frame-glow: radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--ai) 24%, transparent), transparent 60%), radial-gradient(70% 130% at 100% 100%, color-mix(in srgb, var(--shu) 22%, transparent), transparent 60%);
  }
  :root[data-palette="brew"] #title, :root[data-palette="brew"] .brand i {
    background: linear-gradient(100deg, var(--shu), color-mix(in srgb, var(--shu) 45%, var(--ai)) 35%, var(--ai) 75%);
    -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
  }
  :root[data-palette="brew"] #title .root { color: inherit; }
  :root[data-palette="brew"] .key .tag { box-shadow: 0 0 12px color-mix(in srgb, var(--ai) 60%, transparent); }
  :root[data-palette="brew"] .key.root .tag { box-shadow: 0 0 14px color-mix(in srgb, var(--shu) 70%, transparent); }
  :root[data-palette="brew"] .key.white.playing { box-shadow: 0 0 0 1px var(--ai) inset, 0 0 26px color-mix(in srgb, var(--ai) 65%, transparent); }
  :root[data-palette="brew"] .key.root.playing { box-shadow: 0 0 0 1px var(--shu) inset, 0 0 26px color-mix(in srgb, var(--shu) 70%, transparent); }
  :root[data-palette="brew"] .roots button.on, :root[data-palette="brew"] button.play { background: linear-gradient(120deg, var(--shu), color-mix(in srgb, var(--shu) 55%, var(--ai))); }
  :root[data-palette="brew"] .ruler .step { border-radius: 999px; }
  :root[data-palette="brew"] .seq .n { border-radius: 16px; }

  /* ============================================================
     ANIMACIONES
     ============================================================ */
  @keyframes pop    { from { opacity: 0; transform: translateX(-50%) scale(.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
  @keyframes rise   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes popin  { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes sheetin { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 960px) {
    .info { grid-template-columns: 1fr 1fr; }
    .info > .related { grid-column: 1 / -1; }
    .related ul { columns: 2; column-gap: 20px; }
    .related li { break-inside: avoid; }
  }
  @media (max-width: 760px) {
    .tools .sep, #scene, .disc-btn span { display: none; }
    .disc-btn { width: 40px; padding: 0; }
    .legend { display: none; }
  }
  @media (max-width: 640px) {
    body { font-size: 15px; }
    .brand b, .brand i { font-size: 23px; }
    #float { display: none; }
    .roots { grid-template-columns: repeat(6, 1fr); row-gap: 4px; }
    .roots button { min-height: 46px; }
    .title-row { margin-left: -4px; gap: 2px; }
    button.step { display: none; }
    .title-btn { padding: 4px 6px 6px; }
    .kb-toolbar { justify-content: center; }
    .kb-toolbar .seg { width: 100%; }
    .kb-toolbar .seg button { flex: 1; }
    .kb-frame { padding: 8px; border-radius: 14px; }
    .kb-hint { text-align: center; }
    .kb-foot { margin-top: 16px; }
    .seq { width: 100%; gap: 5px; }
    .seq .n { flex: 1 1 0; min-width: 38px; padding-inline: 4px; }
    .seq .n.ghost { display: none; }
    .info { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
    .related ul { columns: 1; }
    .card { padding: 18px 16px 14px; }
    /* hoja desde abajo, como en iOS */
    dialog.sheet { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
    dialog.sheet[open] { animation: sheetup 380ms var(--ease) both; }
    .sheet-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 8px auto 0; flex: none; }
    .sheet-head { padding-top: 10px; }
    .dots { grid-template-columns: repeat(12, 5px); gap: 2px; }
    .dots i { width: 5px; height: 5px; }
    .row-main small { display: none; }
    .pop { position: fixed; left: 12px; right: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 58px); width: auto; transform-origin: top center; background: var(--paper-2); }
    .opt .seg.wide { display: grid; grid-template-columns: repeat(3, 1fr); }
    .pal-grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     AVISO DE MEDICIÓN (js/analytics.js) y páginas legales
     ============================================================ */
  .consent {
    position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
    max-width: 520px; margin: 0 auto; padding: 16px 18px;
    background: color-mix(in srgb, var(--paper-2) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    color: var(--ink-2); border: 1px solid var(--hair);
    border-radius: 20px; box-shadow: var(--shadow-pop);
    font: 14px/1.5 var(--sans); animation: sheetin 320ms var(--spring) both;
  }
  .consent p { margin: 0 0 12px; }
  .consent a { color: var(--ink); }
  .consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .consent button {
    font: 600 14px/1 var(--sans); min-height: 40px; padding: 0 16px; border-radius: 999px;
    border: 0; background: var(--fill); color: var(--ink); cursor: pointer;
  }
  .consent button.primary { background: var(--ink); color: var(--paper); }
  .page { max-width: 680px; margin: 0 auto; padding: 48px 0 64px; color: var(--ink-2); font: 16px/1.7 var(--sans); }
  .page h1 { font: 800 56px/.92 var(--display); font-stretch: 66%; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
  .page h2 { font: 600 17px/1.4 var(--sans); color: var(--ink); margin: 34px 0 6px; }
  .page a { color: var(--ai); }
  .page .back { font-size: 14px; display: inline-block; margin-bottom: 28px; text-decoration: none; }
  .page .meta { color: var(--ink-3); font-size: 14px; margin: 0 0 24px; }