/* SyncHead en la web: los colores, las letras y el tema de site/ (index.html). Las letras se
   sirven desde aquí (OFL): nada de terceros. */
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-wght.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2')}

:root{
  --red:#d23a2c; --red-deep:#a82a1f; --red-soft:#e8695c;
  --cream:#f4f1ea; --ink:#1c1c1e;
  --bg:#f4f1ea; --fg:#1c1c1e; --fg-2:#55514c; --rule:rgba(28,28,30,.14);
  --tagline:#a82a1f;
  --f-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --wrap:1280px;
  /* el reproductor */
  --sh-card:#fffdf8; --sh-fg:var(--fg); --sh-fg2:var(--fg-2); --sh-rule:var(--rule);
  --sh-red:#d23a2c; --sh-key-on:#a82a1f; --sh-key-on-fg:#f4f1ea;
  --sh-air:#353c5a; --sh-wave-on:#d23a2c; --sh-wave-off:rgba(28,28,30,.34);
  --sh-loop-tint:rgba(210,58,44,.13); --sh-mark:#55514c; --sh-well:#f4f1ea;
  --sh-row-on:rgba(210,58,44,.06); --sh-screen:#141416;
  --sh-ink-btn:#1c1c1e; --sh-ink-btn-fg:#f4f1ea;
  --sh-home:#2e7d32; /* el knob en su punto de partida: el verde «ok» del escritorio */
  --sh-grid:rgba(28,28,30,.11); --sh-pill-on:rgba(210,58,44,.12); /* la rejilla del espectro; el grupo elegido */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1c1e; --fg:#f4f1ea; --fg-2:#b9b4aa; --rule:rgba(244,241,234,.14); --tagline:#e8695c;
  --sh-card:#26262a; --sh-key-on:#e8695c; --sh-key-on-fg:#1c1c1e;
  --sh-air:#93a8c8; --sh-wave-on:#e8695c; --sh-wave-off:rgba(244,241,234,.34);
  --sh-loop-tint:rgba(232,105,92,.16); --sh-mark:#b9b4aa; --sh-well:#1f1f22;
  --sh-row-on:rgba(232,105,92,.08); --sh-screen:#1c1c1e; --sh-red:#e8695c;
  --sh-ink-btn:#f4f1ea; --sh-ink-btn-fg:#1c1c1e; --sh-home:#7ddc9a;
  --sh-grid:rgba(244,241,234,.11); --sh-pill-on:rgba(232,105,92,.18); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1c1e; --fg:#f4f1ea; --fg-2:#b9b4aa; --rule:rgba(244,241,234,.14); --tagline:#e8695c;
  --sh-card:#26262a; --sh-key-on:#e8695c; --sh-key-on-fg:#1c1c1e;
  --sh-air:#93a8c8; --sh-wave-on:#e8695c; --sh-wave-off:rgba(244,241,234,.34);
  --sh-loop-tint:rgba(232,105,92,.16); --sh-mark:#b9b4aa; --sh-well:#1f1f22;
  --sh-row-on:rgba(232,105,92,.08); --sh-screen:#1c1c1e; --sh-red:#e8695c;
  --sh-ink-btn:#f4f1ea; --sh-ink-btn-fg:#1c1c1e; --sh-home:#7ddc9a;
  --sh-grid:rgba(244,241,234,.11); --sh-pill-on:rgba(232,105,92,.18); color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;font-family:var(--f-sans);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
button{font:inherit;color:inherit}

/* ---------- la cabecera de la página ---------- */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px;letter-spacing:-.03em;flex:none}
.brand svg{width:34px;height:34px;flex:none}
.brand .bar{width:1px;height:22px;background:var(--rule)}
.brand .app{font-weight:700;letter-spacing:-.01em}
/* el icono y «TapeLeader» llevan a la portada (34c): se ven igual que sin enlace, y al pasar el
   ratón no cambian, como el logo de la web; el foco de teclado, el de siempre (:focus-visible) */
.brand .home{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none}
.top .slot{margin-left:auto} /* el hueco de la derecha: «Report this content», «Get SyncHead» (encargo 10) */
.top .slot a,.sh-report a,.sh-foot a{color:var(--tagline);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.sh-report{margin:-8px 0 0;font-size:14px}
.sh-foot{border-top:1px solid var(--rule)}
.sh-foot .wrap{display:flex;align-items:center;min-height:64px}
/* el pie legal (encargo 13): Terms · Privacy · Legal notice · Report content */
.sh-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;color:var(--fg-2)}
/* el pie discreto de las páginas de un enlace (encargo 35): Report content · Legal notice · Privacy ·
   ©, en el gris del texto, sin negrita ni subrayado (subrayado al pasar el ratón y con el foco), al
   tamaño del «©», y más bajo. Mientras staging lo prueba, la plantilla lleva los dos pies: el nuevo
   con «hidden», que solo esta hoja enseña, y el viejo, que esta hoja esconde. Así producción, con
   su hoja de antes, sigue con el pie viejo entero hasta que se publique esta. */
.sh-foot.sh-foot-old{display:none}
.sh-foot.sh-quiet[hidden]{display:block!important}
.sh-quiet .wrap{min-height:48px;padding-block:10px}
.sh-quiet a{display:inline;min-height:0;color:inherit;font-weight:400;font-size:inherit;text-decoration:none;text-underline-offset:3px}
.sh-quiet a:hover,.sh-quiet a:focus-visible{text-decoration:underline}
/* ningún renglón del pie discreto acaba (ni empieza) en «·» (35, parte B): cada elemento lleva su
   «·» delante, en 24 px (lo que medían los 10 px de hueco a cada lado y el punto), y el que empieza
   renglón lo deja fuera del recorte. El recorte deja 8 px a la izquierda del texto: cabe el
   contorno del foco (2 px a 3 px) y el punto (de 10 a 14 px) queda fuera. El «·» va en un span
   aparte del enlace: así ni el subrayado ni el foco lo abarcan. Sin texto para los lectores. */
.sh-dots{gap:0;margin-left:-24px;clip-path:inset(-8px -8px -8px 16px)}
.sh-dots>span{white-space:nowrap}
.sh-dots>span::before{content:"·";content:"·"/"";display:inline-block;width:24px;text-align:center}
/* las páginas de un enlace caducado, retirado o que no existe */
.sh-gone{display:grid;gap:12px;max-width:40rem}
.sh-gone h1{margin:0;font-weight:800;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.03em}
.sh-gone p{margin:0;color:var(--fg-2)}

main.wrap{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px)}

/* ---------- el reproductor (encargo 29: como el SyncHead de escritorio 0.3.2) ----------
   Rejilla de 8 px. Una columna (tablet vertical y móvil): el transporte fijo arriba, los grupos,
   el grupo, la pista entera, las filas, el espectro y, al final, lo de la tanda. En un ordenador
   (más abajo): dos columnas a pantalla entera, sin desplazarse. */
.sh{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start} /* minmax: el título de una línea no ensancha la columna */
.sh-error{padding:24px;border:1px solid var(--rule);border-radius:14px;background:var(--sh-card);font-weight:700}
.sh-side,.sh-card{display:contents} /* en una columna, sus piezas se ordenan solas (order) */
.sh-transport{order:1} .sh-groups{order:2} .sh-ghead{order:3} .sh-ov-wrap{order:4} .sh-rows{order:5}
.sh-blindbox{order:6} .sh-analyzer{order:7} .sh-head{order:8} .sh-note{order:9} .sh-brandbox{order:10}
/* los créditos de una de mezclas enteras (encargo 34): en una columna, lo primero; en el ordenador,
   arriba de la columna de la izquierda (el orden del HTML). Las letras y colores, los de los datos */
.sh-credits{order:0;display:grid;gap:2px;min-width:0;font-size:13.5px;line-height:1.45}
.sh-credits p{margin:0;overflow-wrap:anywhere}
.sh-credits-line span{font-weight:700}
.sh-credits a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sh-credits-expiry{color:var(--fg-2)}
/* mezclas enteras (encargo 34): el cursor va encima de cada onda, que no se repinta al sonar */
.sh-full .sh-row,.sh-full .sh-ov-wrap{position:relative}
.sh-cursor{position:absolute;left:0;top:0;width:1.5px;height:0;margin-left:-.75px;background:var(--sh-fg);pointer-events:none;will-change:transform}
.sh-cursor[hidden]{display:none}

.sh-cap{margin:0;font:600 11.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.sh-head{display:grid;gap:8px;min-width:0}
.sh-eyebrow{margin:0;font:600 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tagline)}
.sh-title{margin:0;font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.02em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.sh-expl{margin:0;white-space:pre-line;color:var(--fg-2);font-size:13.5px;line-height:1.5}
.sh-facts{margin:0;display:grid;gap:0;font-size:13.5px}
.sh-facts div{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--rule);padding:4px 0}
.sh-facts dt{color:var(--fg-2)} .sh-facts dd{margin:0;font-weight:700;text-align:right}
.sh-note{margin:0;font-size:13px;line-height:1.5;color:var(--fg-2)}
.sh-more{justify-self:start;min-height:44px;margin:-14px 0 -8px;padding:0;border:0;background:none;color:var(--tagline);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sh-more[hidden]{display:none}

/* los grupos: en una columna, pastillas en una fila que se desplaza */
.sh-groups{display:flex;align-items:center;gap:8px 16px;min-width:0}
.sh-groups .sh-cap{display:none}
.sh-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;min-width:0;padding-bottom:2px}
.sh-pill{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.sh-pill[aria-pressed="true"]{background:var(--sh-ink-btn);color:var(--sh-ink-btn-fg);border-color:var(--sh-ink-btn)}
.sh-hint{font:500 12px var(--f-mono);color:var(--fg-2);white-space:nowrap}

/* el grupo: su nombre y, a la derecha, Monitor out y el medidor */
.sh-ghead{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-width:0}
.sh-gtitle{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.sh-gname{margin:0;font-weight:800;font-size:20px;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-listen{margin:0;padding:2px 10px;border:1px solid var(--rule);border-radius:8px;font-size:13px;color:var(--fg-2)}
.sh-out{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sh-label{font:600 11.5px var(--f-mono);color:var(--fg-2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sh-meter{display:block;width:150px;height:24px}
.sh-meternums{display:inline-flex;align-items:center;gap:6px}
/* cifras que no bailan: letra de números, casilla de ancho fijo, a la derecha */
.sh-num{display:inline-block;width:5.5ch;text-align:right;font:600 13px var(--f-mono);font-variant-numeric:tabular-nums}
.sh-num.quiet{color:var(--fg-2);opacity:.6}

.sh-ov-wrap{min-width:0}
.sh-overview{display:block;width:100%;height:56px;cursor:pointer;touch-action:none}

/* el transporte: en una columna, fijo arriba con el título en una línea */
.sh-transport{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter);background:var(--bg);border-bottom:1px solid var(--rule)}
.sh-bar-title{flex:1 0 100%;min-width:0;margin:0;font-weight:800;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-tp-play{display:flex;align-items:center;gap:8px}
.sh-play{width:44px;height:44px;border-radius:50%;border:0;background:#d23a2c;color:#f4f1ea;display:grid;place-items:center;cursor:pointer;flex:none}
.sh-play:hover{background:#a82a1f}
.sh-play svg{width:22px;height:22px}
.sh-time{display:inline-block;min-width:15ch;font:600 13px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-tp-toggles{display:flex;gap:8px;flex-wrap:wrap}
.sh-tog{min-height:44px;padding:0 12px;border-radius:8px;border:1.5px solid var(--fg);background:transparent;font:600 12.5px var(--f-mono);letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.sh-tog[aria-pressed="true"]{background:var(--sh-ink-btn);color:var(--sh-ink-btn-fg);border-color:var(--sh-ink-btn)}
.sh-tog:disabled{opacity:.4;cursor:not-allowed}
/* GAIN MATCH mientras se mide (encargo 12): el fondo se va y vuelve, como en SyncHead de escritorio
   (button_skin.py: un ciclo de 1,15 s, coseno, hasta el 22 % del fondo) */
.sh-tog.pending[aria-pressed="true"]{animation:sh-pulse 1.15s ease-in-out infinite}
@keyframes sh-pulse{50%{background:color-mix(in srgb,var(--sh-ink-btn) 22%,transparent);color:var(--fg)}}
@media (prefers-reduced-motion:reduce){.sh-tog.pending[aria-pressed="true"]{animation:none;opacity:.6}}
/* junto al ▶: lo que se descarga (y el aviso de los datos del móvil), o lo que se carga, con su barra */
.sh-status{flex:1 1 100%;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--fg-2);min-width:0}
.sh-status-wifi{font-weight:700;color:var(--fg)}
.sh-status-bar{display:block;width:120px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.sh-status-bar i{display:block;height:100%;width:0;background:#d23a2c;transition:width .2s}
.sh-help{display:none;margin:0;font-size:12px;color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sh-knobfield{display:flex;align-items:center;gap:4px}
.sh-knob{width:44px;height:44px;cursor:ns-resize;touch-action:none;flex:none;border-radius:50%}
.sh-knob svg{width:100%;height:100%;display:block}
.sh-knob .k-body{fill:var(--sh-well);stroke:var(--rule)}
.sh-knob .k-track{fill:none;stroke:var(--rule);stroke-width:2.5;stroke-linecap:round}
.sh-knob .k-arc{fill:none;stroke:var(--sh-red);stroke-width:2.5;stroke-linecap:round}
.sh-knob .k-tick{stroke:var(--fg);stroke-width:2.2;stroke-linecap:round}
.sh-knob.drag .k-body{stroke:var(--sh-red)}
.sh-knob .k-home{fill:var(--sh-home);stroke:var(--sh-card);stroke-width:1}
.sh-knob.home .k-arc{stroke:var(--sh-home)}
.sh-knob-val,.sh-knob-input{font:600 12.5px var(--f-mono);font-variant-numeric:tabular-nums;width:9ch;min-height:44px;text-align:right;padding:0 4px;white-space:nowrap}
.sh-knob-val{border:0;background:none;cursor:text}
.sh-knob-input{border:1.5px solid var(--sh-red);border-radius:6px;background:var(--sh-card)}

/* las filas: en una columna, compactas (nombre con su punto, el nivel; debajo, la onda y RMS/Peak) */
.sh-rows{display:grid;gap:8px;align-content:start;min-width:0}
.sh-card.busy .sh-rows,.sh-card.busy .sh-ov-wrap{opacity:.45;pointer-events:none}
.sh-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id trim" "wave lv";align-items:center;gap:4px 12px;
  padding:4px 8px;border:1.5px solid var(--rule);border-radius:10px;background:var(--sh-card);cursor:pointer;min-width:0}
.sh-row.on{border-color:var(--sh-red);background:color-mix(in srgb,var(--sh-card),var(--sh-red) 6%)}
.sh-row-id{grid-area:id;display:flex;align-items:center;gap:4px;min-width:0}
.sh-key{width:44px;height:44px;border-radius:8px;border:1.5px solid var(--fg);background:transparent;font:600 16px var(--f-mono);cursor:pointer;flex:none}
.sh-row.on .sh-key{background:var(--sh-key-on);border-color:var(--sh-key-on);color:var(--sh-key-on-fg)}
/* el punto de color (ScopeDot): 16 px a la vista, 44 px al dedo; encendido, lleno; apagado, un aro */
.sh-dot{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
/* encargo 38 (C2): el punto, más grande (como el de SyncHead 1.1.2: 22 px con 2,5 de margen) y,
   al pasar el ratón, un toque de su color; la zona de toque, los 44 px del botón */
.sh-dot i{width:17px;height:17px;border-radius:50%;border:1.6px solid color-mix(in srgb,var(--c) 55%,transparent);box-sizing:border-box}
.sh-dot:hover i{border-color:color-mix(in srgb,var(--c) 86%,transparent);background:color-mix(in srgb,var(--c) 28%,transparent)}
.sh-dot[aria-pressed="true"] i{background:var(--c);border-color:var(--c)}
.sh-dot:focus-visible{outline:none}
.sh-dot:focus-visible i{outline:2px solid var(--red);outline-offset:3px}
.sh-name{display:grid;min-width:0;line-height:1.3}
.sh-name b{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-info{font-size:12px;color:var(--fg-2);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-wave{grid-area:wave;display:block;width:100%;height:32px;min-width:0;cursor:pointer}
.sh-lv{grid-area:lv;display:grid;font:500 12px/1.35 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg-2);white-space:nowrap;text-align:right;min-width:11ch}
.sh-trim{grid-area:trim;display:flex;justify-content:flex-end}
/* TRACKS (encargo 14): la casilla «+» de sumar, con 44 px de zona al dedo; la REF, aparte */
.sh-plus{width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;padding:0;border:0;background:none;color:inherit}
.sh-plus span{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--fg-2);display:grid;place-items:center;font:600 18px/1 var(--f-mono);color:var(--fg-2);pointer-events:none}
/* «−»: la pista suena (está en la suma) y el botón la quita; «+», la suma */
.sh-plus.on span{background:var(--sh-key-on);border-color:var(--sh-key-on);color:var(--sh-key-on-fg)}
.sh-plus:focus-visible{outline:none}
.sh-plus:focus-visible span{outline:2px solid var(--red);outline-offset:3px}
.sh-plus:disabled{cursor:default}
.sh-plus:disabled span{opacity:.4} /* el «−» de la última: no se puede quitar */
.sh-refon .sh-plus.on span{opacity:.45} /* con la REF sonando, la suma espera */
.sh-row.ref{margin-top:8px}

/* el espectro en vivo, como el de FixEQ: en la tarjeta del tema, el rótulo y la leyenda arriba */
.sh-analyzer{display:flex;flex-direction:column;background:var(--sh-card);border:1px solid var(--rule);border-radius:14px;padding-top:8px;min-width:0;height:40svh;min-height:220px}
.sh-an-top{display:flex;align-items:center;justify-content:space-between;gap:4px 16px;padding:0 14px;min-height:24px;min-width:0}
.sh-an-top .sh-cap{flex:none}
.sh-legend{display:flex;justify-content:flex-end;gap:4px 16px;font:600 12px var(--f-mono);min-width:0;overflow:hidden}
.sh-leg{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:24ch}
.sh-leg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-leg i{flex:none;width:14px;height:0;border-top:2.2px solid var(--c)}
.sh-leg.filled i{height:10px;border:1.3px solid var(--c);border-radius:2px;background:color-mix(in srgb,var(--c) 43%,transparent)}
/* encargo 38 (C1): la leyenda de MIX se maneja. Cada versión, dos botones: la muestra (su curva) y
   el nombre (que suene). La que suena, en negrita y con la muestra rellena; las encendidas, una
   raya; las apagadas, en gris y con un círculo hueco. El margen, para que se vea el foco. */
.sh-legend.mix{flex:1 1 0;gap:4px 12px;padding:4px;margin:-4px -4px -4px 0}
.sh-leg[hidden]{display:none}
.sh-legend.mix .sh-leg{gap:0;max-width:none;flex:none}
.sh-leg button{display:inline-flex;align-items:center;min-height:24px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.sh-leg .sh-leg-sw{width:22px;justify-content:center}
.sh-leg .sh-leg-name{max-width:16ch;font-weight:500;padding-left:2px}
.sh-leg .sh-leg-name:hover span{text-decoration:underline;text-underline-offset:3px}
.sh-leg.now .sh-leg-name{font-weight:800}
.sh-leg.off .sh-leg-name{color:color-mix(in srgb,var(--sh-fg2) 75%,transparent)}
.sh-leg.on .sh-leg-sw i{width:14px;height:0;border:0;border-top:2.2px solid var(--c);border-radius:0;background:none}
.sh-leg.now .sh-leg-sw i{width:14px;height:10px;border:1.3px solid var(--c);border-radius:2px;background:color-mix(in srgb,var(--c) 43%,transparent)}
.sh-leg.off .sh-leg-sw i{width:9px;height:9px;border:1.5px solid var(--c);border-radius:50%;background:none;box-sizing:border-box}
.sh-leg .sh-leg-sw:hover i{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
@media (pointer:coarse),(max-width:640px){.sh-leg button{min-height:32px}.sh-leg .sh-leg-sw{width:32px}.sh-leg .sh-leg-name{min-width:32px}}
.sh-spectrum{display:block;width:100%;flex:1 1 auto;min-height:0}

.sh-brandbox{display:grid;gap:8px}
.sh-report{margin:0;font-size:14px}

/* ---------- a ciegas (encargo 23): letras, «My pick», el recuento ---------- */
.sh-blindline{margin:0;font-weight:700;font-size:14.5px}
.sh-name b.sh-letter{font:600 24px/1.1 var(--f-mono)}
.sh-yours{justify-self:start;margin:2px 0;padding:1px 8px;border-radius:999px;background:var(--sh-key-on);color:var(--sh-key-on-fg);font:600 12px var(--f-mono);letter-spacing:.02em}
.sh-hiding .sh-row{grid-template-areas:"id id" "pick trim"}
.sh-pickbox{grid-area:pick;display:flex;justify-content:flex-start}
.sh-pick{min-height:44px;padding:0 16px;border-radius:8px;border:1.5px solid var(--fg);background:transparent;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.sh-pick[aria-pressed="true"]{background:var(--sh-key-on);border-color:var(--sh-key-on);color:var(--sh-key-on-fg)}
.sh-blindbox{display:grid;gap:8px;justify-items:start}
.sh-tally{margin:0;font:600 14px var(--f-mono);font-variant-numeric:tabular-nums}
.sh-blindnote{margin:0;font-size:13.5px;color:var(--fg-2)}
.sh-blinderr{margin:0;font-size:13.5px;color:var(--tagline)}

/* ---------- el anuncio de las páginas de enlace (encargo 23): discreto, sin nada fijo ----------
   Sin el reproductor, debajo de la página; con él, abajo de su columna (encargo 29). */
.sh-promo{border-top:1px solid var(--rule)}
.sh-promo .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;padding-block:20px}
.sh-promo p{margin:0}
.sh-promo-sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-weight:700}
.sh-promo-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;border:1.5px solid var(--fg);color:inherit;text-decoration:none;font-weight:700;font-size:14.5px}
.sh-promo-btn:hover{background:var(--sh-ink-btn);color:var(--sh-ink-btn-fg);border-color:var(--sh-ink-btn)}
.sh-promo-tl{display:grid;gap:2px;max-width:40rem}
.sh-promo-tl-link a{color:var(--tagline);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.sh-promo-tl-text{font-size:14px;color:var(--fg-2)}
.sh-brandbox .sh-promo .wrap{display:grid;gap:4px;padding:12px 0 0;max-width:none;margin:0}
.sh-brandbox .sh-promo-sh{font-size:14px;gap:8px 12px}
.sh-brandbox .sh-promo-tl-text{font-size:12.5px;line-height:1.45}

@media (min-width:600px){
  /* tablet vertical: las filas en una línea, como en el ordenador */
  .sh-row{grid-template-columns:minmax(160px,240px) minmax(0,1fr) auto auto;grid-template-areas:"id wave lv trim";min-height:56px}
  .sh-hiding .sh-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"id pick trim"}
  .sh-wave{height:44px}
}
@media (max-width:560px){
  .brand{font-size:19px} .brand svg{width:30px;height:30px}
  .sh-tog{padding:0 10px;font-size:12px}
  .sh-meter{width:auto;flex:1;min-width:80px}
  .sh-out{flex:1 1 100%}
}

/* ---------- en un ordenador (y en tablet apaisada): dos columnas, a pantalla entera ---------- */
@media (min-width:1024px) and (orientation:landscape), (min-width:1280px){
  .sh-app .top .wrap{min-height:48px;max-width:none}
  .sh-app .brand{font-size:18px;gap:10px} .sh-app .brand svg{width:28px;height:28px}
  .sh-app .sh-foot .wrap{min-height:36px;max-width:none;font-size:12.5px}
  .sh-app .sh-foot a{min-height:0}
  .sh-app .sh-quiet .wrap{min-height:28px;padding-block:4px}
  .sh-app main.wrap.sh{max-width:none;margin:0;padding:12px 16px;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:stretch}
  .sh-side>*,.sh-card>*{order:0} /* el orden de una columna, fuera: aquí manda el del HTML */
  .sh-side{display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto;padding:20px;background:var(--sh-card);border:1px solid var(--rule);border-radius:14px}
  .sh-card{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
  .sh-groups{display:grid;gap:4px;justify-items:stretch}
  .sh-groups .sh-cap{display:block;margin-bottom:4px}
  .sh-pills{display:grid;gap:2px;overflow:visible;padding:0}
  .sh-pill{min-height:44px;padding:0 12px;border:0;border-radius:8px;text-align:left;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
  .sh-pill:hover{background:var(--sh-well)}
  .sh-pill[aria-pressed="true"]{background:var(--sh-pill-on);color:var(--fg);font-weight:800}
  .sh-hint{padding-left:12px}
  .sh-brandbox{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
  .sh-brandbox .sh-promo{border-top:0}
  .sh-brandbox .sh-promo .wrap{padding-top:0}
  .sh-gname{font-size:22px}
  .sh-transport{position:static;margin:0;padding:0;background:none;border:0;flex-wrap:nowrap;gap:12px}
  .sh-bar-title{display:none}
  .sh-tp-play{gap:12px}
  .sh-status{flex:1 1 auto;width:auto}
  .sh-status:not([hidden]) ~ .sh-help{display:none}
  .sh-tp-toggles{flex:none;flex-wrap:nowrap}
  .sh-help{display:block;flex:1 1 0;text-align:right}
  /* las filas encogen antes que nada (de 64 a 50 px: los botones siguen de 44, que una tablet
     apaisada es táctil); el espectro, con todo lo que queda (200 px como poco); con muchas filas,
     se desplazan ellas, no la página */
  .sh-rows{flex:0 1 auto;min-height:0;overflow:auto;grid-auto-rows:minmax(50px,64px);gap:6px}
  .sh-row{grid-template-columns:minmax(200px,280px) minmax(0,1fr) 11ch auto;grid-template-areas:"id wave lv trim";min-height:0;height:100%;padding:2px 8px}
  .sh-hiding .sh-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"id pick trim"}
  .sh-row-id{gap:0}
  .sh-wave{height:100%;max-height:56px;align-self:center}
  .sh-analyzer{flex:1 1 200px;min-height:200px;height:auto}
  .sh-overview{height:52px}
}
/* en una ventana de ordenador baja (encargo 30, la respuesta al 29): el anuncio de TapeLeader se
   tiene que ver sin desplazarse. La explicación, a 3 líneas con «More»; los datos, en una línea con
   «…»; «Report this content», en una línea pequeña (arriba no está: la barra de los enlaces no lo
   lleva); y si aun así no cabe, se desplaza la lista de grupos, no la columna. */
@media (min-width:1024px) and (orientation:landscape) and (min-height:540px) and (max-height:819.98px), (min-width:1280px) and (min-height:540px) and (max-height:819.98px){
  .sh-side{overflow:hidden;gap:10px;padding:14px 20px}
  .sh-side>*{flex:none}
  .sh-head{gap:4px}
  .sh-expl:not(.open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .sh-expl.open{max-height:12lh;overflow:auto}
  /* los datos en una línea; si uno no cabe, salta entero a la siguiente (34c). Cada dato lleva
     delante su «·», y el que empieza renglón lo tiene fuera del recorte: así ningún renglón empieza
     con «·». 9 px es lo que medía « · » (a 13.5 px), en píxeles enteros; y el recorte, solo a la izquierda (arriba, abajo y a la derecha, con margen: si no, la raya de debajo se pierde). */
  .sh-facts{display:flex;flex-wrap:wrap;margin-left:-9px;clip-path:inset(-2px -2px -2px 9px);border-bottom:1px solid var(--rule);padding:2px 0 4px}
  .sh-facts div{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding:0}
  .sh-facts dt,.sh-facts dd{display:inline}
  .sh-facts div::before{content:"·";display:inline-block;width:9px;text-align:center;color:var(--fg-2)}
  .sh-facts dd{margin-left:.35em}
  /* «GROUPS» y «PgUp / PgDn» en la misma línea; debajo, las pastillas, que se desplazan si hace
     falta (siempre se ve una entera) */
  .sh-side>.sh-groups{flex:0 1 auto;min-height:66px;display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative}
  .sh-groups .sh-cap{flex:none}
  .sh-groups .sh-hint{position:absolute;top:0;right:0;padding:0;line-height:1.2}
  .sh-groups .sh-pills{flex:0 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
  .sh-more{margin:-10px 0 -12px}
  .sh-brandbox{padding-top:10px;gap:4px}
  .sh-report{font-size:12.5px}
  .sh-report a{font-size:12.5px;min-height:28px}
  /* en una a ciegas, sin la nota de escucha: su línea ya lo dice (encargo 33) */
  .sh-note-blind{display:none}
}
/* encargo 34b: en las a ciegas de enteras, la misma regla de ventana baja (sin la nota de escucha)
   hasta 940 px de alto, para que «Report this content» se vea entero al cargar. Abajo de 820 ya la
   pone la de arriba; aquí, de 820 a 940, son las mismas reglas, solo para .sh-full-blind. */
@media (min-width:1024px) and (orientation:landscape) and (min-height:820px) and (max-height:939.98px), (min-width:1280px) and (min-height:820px) and (max-height:939.98px){
  .sh-full-blind .sh-side{overflow:hidden;gap:10px;padding:14px 20px}
  .sh-full-blind .sh-side>*{flex:none}
  .sh-full-blind .sh-head{gap:4px}
  .sh-full-blind .sh-expl:not(.open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .sh-full-blind .sh-expl.open{max-height:12lh;overflow:auto}
  .sh-full-blind .sh-facts{display:flex;flex-wrap:wrap;margin-left:-9px;clip-path:inset(-2px -2px -2px 9px);border-bottom:1px solid var(--rule);padding:2px 0 4px}
  .sh-full-blind .sh-facts div{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding:0}
  .sh-full-blind .sh-facts dt,.sh-full-blind .sh-facts dd{display:inline}
  .sh-full-blind .sh-facts div::before{content:"·";display:inline-block;width:9px;text-align:center;color:var(--fg-2)}
  .sh-full-blind .sh-facts dd{margin-left:.35em}
  .sh-full-blind .sh-side>.sh-groups{flex:0 1 auto;min-height:66px;display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative}
  .sh-full-blind .sh-groups .sh-cap{flex:none}
  .sh-full-blind .sh-groups .sh-hint{position:absolute;top:0;right:0;padding:0;line-height:1.2}
  .sh-full-blind .sh-groups .sh-pills{flex:0 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
  .sh-full-blind .sh-more{margin:-10px 0 -12px}
  .sh-full-blind .sh-brandbox{padding-top:10px;gap:4px}
  .sh-full-blind .sh-report{font-size:12.5px}
  .sh-full-blind .sh-report a{font-size:12.5px;min-height:28px}
  .sh-full-blind .sh-note-blind{display:none}
}
/* a pantalla entera solo si hay alto: si no, la página se desplaza como siempre */
@media (min-width:1024px) and (orientation:landscape) and (min-height:540px), (min-width:1280px) and (min-height:540px){
  html.sh-app,html.sh-app body{height:100%}
  html.sh-app body{display:flex;flex-direction:column;height:100dvh}
  html.sh-app body > *{flex:none}
  html.sh-app main.wrap.sh{flex:1 1 auto;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr);align-content:stretch}
}