/* DoReSol — Handoff v2 (CSS LITERAL del design handoff)
   Este archivo contiene EL CSS TAL CUAL aparece en cada uno de los
   5 HTML del handoff. NO se modifica — solo se concatenan en orden:
     1. DoReSol Web Homepage.html
     2. DoReSol Internal Screens.html
     3. DoReSol Internal Screens v2.html
     4. DoReSol Brandbook.html
     5. DoReSol Search.html
   Se carga después de app.css para que sus reglas tengan prioridad.
   El layout principal NO modifica este archivo.
*/


/* ╔══════════════════════════════════════════════════════════
   ║ DoReSol Web Homepage.html (literal, sin modificar)
   ╚══════════════════════════════════════════════════════════ */

  :root {
    --gold: #C8A96E;
    --gold-hover: #B8965A;
    --ink: #141412;
    --night: #0F0F0D;
    --cream: #F8F7F4;
    --warm-gray: #5C5B56;
    --soft-gray: #9C9B95;
    --surface: #F0EEE9;
    --green: #1D9E75;
    --blue: #185FA5;
    --red: #C0392B;
    --bg: var(--night);
    --fg: #EDEBE5;
    --muted: #9A9890;
    --hint: #66645E;
    --card: #1A1A17;
    --card-2: #222220;
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.16);
  }
  [data-theme="light"] {
    --bg: var(--cream);
    --fg: var(--ink);
    --muted: var(--warm-gray);
    --hint: var(--soft-gray);
    --card: #ffffff;
    --card-2: var(--surface);
    --line: rgba(20,20,18,.10);
    --line-strong: rgba(20,20,18,.18);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--fg);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background .35s, color .35s;
  }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
  @media (max-width: 720px) { .wrap { padding: 0 24px; } }
  a { color: inherit; text-decoration: none; }
  .lab { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .lab b { color: var(--fg); font-weight: 500; }
  .gold { color: var(--gold); }

  /* ------------ Topbar ------------ */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-inner {
    max-width: 1240px; margin: 0 auto; padding: 16px 56px;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  }
  @media (max-width: 980px) { .topbar-inner { padding: 14px 24px; gap: 18px; grid-template-columns: auto 1fr auto; } }
  .brand { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .brand i { font-style: normal; color: var(--gold); font-weight: 600; }
  .topnav { display: flex; gap: 4px; flex-wrap: wrap; }
  @media (max-width: 980px) { .topnav { display: none; } }
  .topnav a {
    padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--muted);
    transition: background .15s, color .15s;
  }
  .topnav a:hover { background: var(--card-2); color: var(--fg); }
  .topnav a.premium { color: var(--gold); }
  .top-actions { display: flex; align-items: center; gap: 12px; }
  .search {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--muted); font-size: 13px; cursor: pointer; background: transparent;
  }
  .search svg { width: 14px; height: 14px; }
  .search .kbd {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    border: 1px solid var(--line-strong); padding: 2px 6px; border-radius: 4px;
    color: var(--hint); letter-spacing: .05em;
  }
  @media (max-width: 720px) { .search .kbd, .search .lbl { display: none; } }
  .lang {
    display: inline-flex; gap: 4px; font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint);
  }
  .lang a.active { color: var(--fg); }
  @media (max-width: 720px) { .lang { display: none; } }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: 999px;
    font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--line-strong);
    background: transparent; color: var(--fg);
    transition: background .15s, color .15s, border-color .15s;
  }
  .btn:hover { background: var(--card-2); }
  .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 500; }
  .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .btn-ghost { border-color: transparent; color: var(--muted); }
  .btn-sm { padding: 7px 14px; font-size: 13px; }
  .theme-toggle { background: none; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; padding: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
  .theme-toggle:hover { color: var(--fg); }
  .theme-toggle svg { width: 14px; height: 14px; }

  /* ------------ Hero ------------ */
  .hero {
    position: relative; height: clamp(560px, 86vh, 820px); overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.85); }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,13,.45) 0%, rgba(15,15,13,.05) 30%, rgba(15,15,13,.35) 60%, rgba(15,15,13,.92) 100%); }
  .hero-body {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 56px;
    color: #EDEBE5;
  }
  @media (max-width: 720px) { .hero-body { padding: 32px 24px; } }
  .hero-inner { max-width: 1240px; margin: 0 auto; width: 100%; padding-bottom: 24px; }
  .hero .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
  .hero .eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
  .hero h1 {
    font-size: clamp(48px, 8vw, 112px); font-weight: 300;
    letter-spacing: -0.035em; line-height: 0.96; margin: 0;
    max-width: 14ch;
  }
  .hero h1 em { font-style: normal; color: var(--gold); font-weight: 400; }
  .hero .lede {
    margin-top: 24px; font-size: 19px; line-height: 1.45; color: rgba(237,235,229,.75);
    max-width: 52ch; font-weight: 300;
  }
  .hero-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
  .hero .btn { color: #EDEBE5; border-color: rgba(255,255,255,.22); }
  .hero .btn:hover { background: rgba(255,255,255,.08); }
  .hero .btn-primary { color: var(--night); background: var(--gold); border-color: var(--gold); }
  .hero-credit {
    position: absolute; right: 24px; bottom: 14px; z-index: 2;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(237,235,229,.5);
  }
  .hero-meta {
    position: absolute; left: 56px; right: 56px; top: 32px; z-index: 2;
    display: flex; justify-content: space-between; gap: 24px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(237,235,229,.6);
  }
  @media (max-width: 720px) { .hero-meta { left: 24px; right: 24px; top: 20px; font-size: 9px; } }

  /* ------------ Marquee ------------ */
  .marquee {
    overflow: hidden; border-bottom: 1px solid var(--line);
    padding: 22px 0; background: var(--bg);
  }
  .marquee-track {
    display: flex; gap: 56px; animation: scroll 40s linear infinite;
    white-space: nowrap;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 28px; font-weight: 300; letter-spacing: -0.02em;
    color: var(--muted);
  }
  .marquee-track i { font-style: normal; color: var(--gold); font-weight: 400; }
  .marquee-track .dot { color: var(--gold); margin: 0 .25em; }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ------------ Section base ------------ */
  section.block { padding: 96px 0; border-bottom: 1px solid var(--line); }
  @media (max-width: 720px) { section.block { padding: 64px 0; } }
  .sec-head {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    padding-bottom: 32px; margin-bottom: 36px;
    border-bottom: 1px solid var(--line);
  }
  .sec-head h2 { margin: 0; font-size: clamp(32px, 4.5vw, 52px); font-weight: 300; letter-spacing: -0.025em; line-height: 1; }
  .sec-head h2 em { font-style: normal; color: var(--gold); font-weight: 400; }
  .sec-head .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .sec-head a.more { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .sec-head a.more:hover { color: var(--gold); }
  .sec-head a.more::after { content: " →"; color: var(--gold); }

  /* ------------ Instrumentos ------------ */
  .inst-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 320px 320px;
    gap: 16px;
  }
  @media (max-width: 980px) { .inst-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 260px 260px; } .inst:nth-child(1) { grid-column: span 2; } }
  @media (max-width: 600px) { .inst-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; grid-template-rows: none; } .inst:nth-child(1) { grid-column: span 1; } }
  .inst {
    position: relative; overflow: hidden; border-radius: 18px;
    background: var(--card); border: 1px solid var(--line);
    cursor: pointer;
  }
  .inst:nth-child(1) { grid-row: span 2; }
  .inst img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.9); transition: transform .6s ease, filter .35s ease; }
  .inst:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.05) brightness(.95); }
  .inst::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(15,15,13,.85) 100%); }
  .inst-body {
    position: absolute; inset: 0; padding: 26px; z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between;
    color: #EDEBE5;
  }
  .inst-tag {
    align-self: flex-start;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(237,235,229,.25);
    color: rgba(237,235,229,.85);
    backdrop-filter: blur(8px);
    background: rgba(15,15,13,.4);
  }
  .inst-tag.featured { background: var(--gold); border-color: var(--gold); color: var(--night); }
  .inst-tag.new { background: rgba(29,158,117,.85); border-color: transparent; color: #fff; }
  .inst-bottom .ttl {
    font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
    margin: 0 0 6px;
  }
  .inst-bottom .ttl em { font-style: normal; color: var(--gold); font-weight: 500; }
  .inst-bottom .sub {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(237,235,229,.65);
  }
  .inst:nth-child(1) .inst-bottom .ttl { font-size: clamp(36px, 4.2vw, 56px); font-weight: 300; letter-spacing: -0.03em; }

  /* ------------ Canciones ------------ */
  .songs-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
  @media (max-width: 900px) { .songs-wrap { grid-template-columns: 1fr; gap: 24px; } }
  .songs-side .lab { display: block; margin-bottom: 16px; }
  .songs-side .filters { display: flex; flex-direction: column; gap: 6px; }
  @media (max-width: 900px) { .songs-side .filters { flex-direction: row; flex-wrap: wrap; } }
  .filter {
    padding: 8px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
    border: 1px solid transparent; color: var(--muted); background: transparent; text-align: left;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .filter .ct { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--hint); }
  .filter:hover { background: var(--card); color: var(--fg); }
  .filter.active { background: var(--gold); color: var(--night); border-color: var(--gold); }
  .filter.active .ct { color: rgba(15,15,13,.6); }

  .songs-list { border-top: 1px solid var(--line); }
  .song {
    display: grid; grid-template-columns: 44px 56px 1fr auto auto auto;
    gap: 24px; align-items: center; padding: 22px 8px;
    border-bottom: 1px solid var(--line); transition: background .15s;
    cursor: pointer;
  }
  .song:hover { background: var(--card); }
  @media (max-width: 720px) { .song { grid-template-columns: 32px 1fr auto; gap: 14px; } .song .ch, .song .yr, .song .play { display: none; } }
  .song .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--hint); }
  .song .cover { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--card-2); }
  @media (max-width: 720px) { .song .cover { display: none; } }
  .song .cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .song .info .ttl { font-size: 19px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }
  .song .info .meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-top: 4px; }
  .song .ch { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gold); }
  .song .ch .sep { color: var(--hint); margin: 0 4px; }
  .song .yr { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--hint); width: 50px; text-align: right; }
  .badge {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 4px;
  }
  .badge.easy { background: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--gold); }
  .badge.mid  { background: color-mix(in oklab, var(--blue) 22%, transparent); color: #79B6E6; }
  .badge.hard { background: color-mix(in oklab, var(--red) 22%, transparent); color: #E89A91; }
  [data-theme="light"] .badge.mid { color: var(--blue); }
  [data-theme="light"] .badge.hard { color: var(--red); }
  .song .play {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: transparent; cursor: pointer; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
  }
  .song:hover .play { background: var(--gold); color: var(--night); border-color: var(--gold); }
  .song .play svg { width: 12px; height: 12px; fill: currentColor; }

  /* ------------ Quote / Featured ------------ */
  .feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    background: var(--card);
  }
  @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
  .feature-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1816; }
  @media (max-width: 900px) { .feature-img { aspect-ratio: 16 / 10; } }
  .feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .feature-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.0) 60%, rgba(15,15,13,.55) 100%); }
  .feature-body { padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
  @media (max-width: 720px) { .feature-body { padding: 32px 28px; } }
  .feature-body .qmark {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 80px; line-height: .6;
    color: var(--gold); font-weight: 300;
  }
  .feature-body blockquote {
    margin: 0; font-size: clamp(24px, 3vw, 36px); font-weight: 300;
    letter-spacing: -0.015em; line-height: 1.25; color: var(--fg);
    text-wrap: pretty;
  }
  .feature-body .attr {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
  }
  .feature-body .attr b { color: var(--fg); font-weight: 500; }
  .feature-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
  .feature-stats .st .v { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
  .feature-stats .st .v sup { color: var(--gold); font-size: .55em; vertical-align: top; margin-left: 2px; }
  .feature-stats .st .lbl {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-top: 4px;
  }

  /* ------------ Hallazgo ------------ */
  .hallazgo {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
    background: var(--card);
  }
  @media (max-width: 900px) { .hallazgo { grid-template-columns: 1fr; } }
  .hallazgo-img { position: relative; aspect-ratio: 1 / 1; background: var(--gold); overflow: hidden; }
  @media (max-width: 900px) { .hallazgo-img { aspect-ratio: 4 / 3; } }
  .hallazgo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15) brightness(1.05); }
  .hallazgo-img::before { content: ""; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: lighten; }
  .hallazgo-img .week {
    position: absolute; top: 24px; left: 24px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink); font-weight: 500;
    z-index: 2;
  }
  .hallazgo-body { padding: 48px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
  @media (max-width: 720px) { .hallazgo-body { padding: 32px 28px; } }
  .hallazgo-body .pre { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
  .hallazgo-body h3 { margin: 0; font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; }
  .hallazgo-body h3 em { font-style: normal; color: var(--gold); font-weight: 500; }
  .hallazgo-body .credits {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted);
    display: flex; gap: 14px; flex-wrap: wrap;
  }
  .hallazgo-body .credits span b { color: var(--fg); font-weight: 500; }
  .hallazgo-body .quote {
    border-left: 2px solid var(--gold); padding: 6px 0 6px 18px;
    font-size: 17px; line-height: 1.55; color: var(--muted); font-style: italic;
    text-wrap: pretty;
  }
  .hallazgo-body .by {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--hint);
  }
  .hallazgo-body .by b { color: var(--fg); font-weight: 500; }
  .hallazgo-body .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .hallazgo-body .tags .t {
    padding: 4px 10px; border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid var(--line-strong); color: var(--muted);
  }
  .hallazgo-body .read {
    align-self: flex-start;
    color: var(--gold); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; padding: 10px 0;
  }
  .hallazgo-body .read::after { content: " →"; }

  /* ------------ Cumpleaños + Historias side by side ------------ */
  .two-col { display: grid; grid-template-columns: .9fr 1.4fr; gap: 56px; }
  @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 64px; } }

  .bday-list { display: flex; flex-direction: column; }
  .bday {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 18px; align-items: center; padding: 18px 0;
    border-top: 1px solid var(--line); transition: padding .15s;
  }
  .bday:hover { padding-left: 8px; padding-right: 8px; background: var(--card); }
  .bday:first-child { border-top: 0; }
  .bday .av {
    width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    background: var(--card-2);
  }
  .bday .av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .bday .nm { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; }
  .bday .meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }
  .bday .age { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 300; color: var(--gold); }
  .bday.featured {
    grid-template-columns: 1fr;
    background: var(--card); border-radius: 14px; padding: 24px; gap: 12px;
    border: 1px solid var(--line); margin-bottom: 8px;
  }
  .bday.featured:first-child { border-top: 1px solid var(--line); }
  .bday.featured:hover { background: var(--card); padding-left: 24px; padding-right: 24px; }
  .bday.featured .top { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center; }
  .bday.featured .av { width: 80px; height: 80px; }
  .bday.featured .nm { font-size: 22px; }
  .bday.featured .age { font-size: 32px; }
  .bday.featured .desc { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 52ch; }
  .bday.featured .curio {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px;
  }
  .bday.featured .curio b { color: var(--fg); font-weight: 500; display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; letter-spacing: -0.005em; text-transform: none; margin-top: 4px; }

  /* ------------ Historias ------------ */
  .stories { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  @media (max-width: 900px) { .stories { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .stories { grid-template-columns: 1fr; } }
  .story {
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    background: var(--card); cursor: pointer; display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s;
  }
  .story:hover { border-color: var(--gold); transform: translateY(-2px); }
  .story-img { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: #1a1816; }
  .story-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .story-img .tag {
    position: absolute; top: 16px; left: 16px;
    background: var(--night); color: var(--gold);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 4px;
  }
  .story-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .story-body .by { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .story-body .by b { color: var(--fg); font-weight: 500; }
  .story-body h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; text-wrap: pretty; }
  .story-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); flex: 1; }
  .story-body .read { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-top: 8px; border-top: 1px solid var(--line); }
  .story-body .read::after { content: " →"; }

  /* ------------ CTA ------------ */
  .cta-block {
    background: var(--ink); color: #EDEBE5;
    border-radius: 24px; padding: 96px 56px;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end;
    margin: 64px 0 0; position: relative; overflow: hidden;
  }
  [data-theme="light"] .cta-block { background: var(--ink); }
  @media (max-width: 900px) { .cta-block { grid-template-columns: 1fr; padding: 64px 32px; gap: 32px; } }
  .cta-block::before {
    content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 160%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 40%, transparent), transparent 70%);
    pointer-events: none;
  }
  .cta-block .pre { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; position: relative; }
  .cta-block h2 { font-size: clamp(48px, 7vw, 96px); font-weight: 300; letter-spacing: -0.035em; line-height: 0.96; margin: 0; position: relative; }
  .cta-block h2 em { font-style: normal; color: var(--gold); font-weight: 400; }
  .cta-block .copy { font-size: 17px; line-height: 1.55; color: rgba(237,235,229,.75); margin-bottom: 24px; }
  .cta-block .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; position: relative; }
  .cta-block .btn { color: #EDEBE5; border-color: rgba(255,255,255,.22); }
  .cta-block .btn-primary { background: var(--gold); color: var(--night); border-color: var(--gold); }

  /* ------------ Footer ------------ */
  footer { padding: 96px 0 56px; background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
  footer .footer-grid .col h4 { color: var(--soft-gray); }
  footer .footer-grid .col a { color: var(--warm-gray); }
  footer .footer-grid .col p { color: var(--warm-gray); }
  footer .footer-grid .col .brand-mk { color: var(--ink); }
  footer .footer-bottom { color: var(--soft-gray); border-top: 1px solid rgba(20,20,18,.10); }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; }
  @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
  .footer-grid .col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); margin: 0 0 16px; font-weight: 500; }
  .footer-grid .col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-grid .col a { font-size: 14px; color: var(--muted); }
  .footer-grid .col a:hover { color: var(--gold); }
  .footer-grid .col p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 36ch; }
  .footer-grid .col .brand-mk { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 12px; line-height: 1; }
  .footer-grid .col .brand-mk i { font-style: normal; color: var(--gold); font-weight: 600; }
  .footer-bottom {
    margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--hint);
  }
  .footer-bottom .right { display: flex; gap: 20px; }
  .footer-bottom .right a:hover { color: var(--gold); }


/* ╔══════════════════════════════════════════════════════════
   ║ DoReSol Internal Screens.html (literal, sin modificar)
   ╚══════════════════════════════════════════════════════════ */

  :root {
    --gold: #C8A96E; --gold-hover: #B8965A;
    --ink: #141412; --night: #0F0F0D; --cream: #F8F7F4;
    --warm-gray: #5C5B56; --soft-gray: #9C9B95; --surface: #F0EEE9;
    --green: #1D9E75; --blue: #185FA5; --red: #C0392B;
    --bg: var(--cream); --fg: var(--ink); --muted: var(--warm-gray); --hint: var(--soft-gray);
    --card: #fff; --card-2: var(--surface);
    --line: rgba(20,20,18,.10); --line-strong: rgba(20,20,18,.18);
  }
  [data-theme="dark"] {
    --bg: var(--night); --fg: #EDEBE5; --muted: #9A9890; --hint: #66645E;
    --card: #1A1A17; --card-2: #222220;
    --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--fg);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
    transition: background .35s, color .35s;
  }
  a { color: inherit; text-decoration: none; }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
  @media (max-width: 720px) { .wrap { padding: 0 24px; } }
  .lab { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .lab b { color: var(--fg); font-weight: 500; }

  /* Screen-switch nav (chrome only — not part of the design) */
  .screens-nav {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 100;
    background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 6px; display: flex; gap: 4px; box-shadow: 0 12px 32px rgba(20,20,18,.18);
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  }
  .screens-nav button {
    border: 0; background: transparent; padding: 8px 14px; border-radius: 999px;
    color: var(--muted); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
  }
  .screens-nav button.active { background: var(--gold); color: var(--night); }
  .screens-nav button:hover:not(.active) { color: var(--fg); }

  /* Topbar */
  .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
  .topbar-inner { max-width: 1240px; margin: 0 auto; padding: 16px 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  @media (max-width: 980px) { .topbar-inner { padding: 14px 24px; gap: 18px; } }
  .brand { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .brand i { font-style: normal; color: var(--gold); font-weight: 600; }
  .topnav { display: flex; gap: 2px; flex-wrap: wrap; }
  @media (max-width: 980px) { .topnav { display: none; } }
  .topnav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
  .topnav a:hover, .topnav a.active { background: var(--card-2); color: var(--fg); }
  .topnav a.premium { color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
  .top-actions { display: flex; align-items: center; gap: 12px; }
  .search { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; cursor: pointer; background: transparent; }
  .search svg { width: 14px; height: 14px; }
  .search .kbd { font-family: 'IBM Plex Mono', monospace; font-size: 10px; border: 1px solid var(--line-strong); padding: 2px 6px; border-radius: 4px; color: var(--hint); letter-spacing: .05em; }
  @media (max-width: 720px) { .search .kbd, .search .lbl { display: none; } }
  .lang { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  .lang a { padding: 4px 8px; border-radius: 999px; color: var(--hint); }
  .lang a.active { background: var(--ink); color: var(--cream); }
  [data-theme="dark"] .lang a.active { background: var(--cream); color: var(--ink); }
  @media (max-width: 720px) { .lang { display: none; } }
  .theme-toggle { background: none; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
  .theme-toggle:hover { color: var(--fg); }
  .theme-toggle svg { width: 16px; height: 16px; }
  .user-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; cursor: pointer; }
  .user-pill .av { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
  [data-theme="dark"] .user-pill .av { background: var(--gold); color: var(--night); }
  .user-pill svg { width: 12px; height: 12px; color: var(--hint); }
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); transition: background .15s, color .15s, border-color .15s; }
  .btn:hover { background: var(--card-2); }
  .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 500; }
  .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .btn-sm { padding: 7px 14px; font-size: 13px; }
  .btn-lg { padding: 14px 28px; font-size: 15px; }

  /* Footer */
  footer { border-top: 1px solid var(--line); padding: 80px 0 40px; margin-top: 96px; }
  footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
  @media (max-width: 720px) { footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
  footer .brand-blk .b { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
  footer .brand-blk .b i { font-style: normal; color: var(--gold); font-weight: 600; }
  footer .brand-blk p { color: var(--muted); margin-top: 14px; max-width: 32ch; font-size: 14px; }
  footer h5 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); margin: 0 0 16px; font-weight: 500; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  footer ul a { color: var(--muted); font-size: 14px; }
  footer ul a:hover { color: var(--fg); }
  footer .bottom { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 24px; display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--hint); letter-spacing: .12em; text-transform: uppercase; }
  footer .bottom .doresol-mark { color: var(--gold); }
  footer .bottom .doresol-mark .dot { color: var(--hint); margin: 0 6px; }

  /* Page section header */
  .page-head { padding: 64px 0 48px; }
  .page-head .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .page-head h1 { font-size: clamp(48px, 7vw, 88px); font-weight: 300; letter-spacing: -0.035em; line-height: 1; margin: 0; }
  .page-head h1 em { font-style: normal; color: var(--gold); font-weight: 400; }
  .page-head .lede { color: var(--muted); font-size: 18px; margin-top: 20px; max-width: 60ch; }
  .page-head .stats { display: flex; gap: 28px; margin-top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
  .page-head .stats b { color: var(--fg); font-weight: 500; }

  /* ----- DESCUBRIR ----- */
  .feat-mood { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 24 / 9; min-height: 280px; }
  .feat-mood img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .feat-mood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%); }
  .feat-mood .body { position: absolute; left: 40px; right: 40px; bottom: 36px; z-index: 2; color: #EDEBE5; }
  @media (max-width: 720px) { .feat-mood .body { left: 22px; right: 22px; bottom: 24px; } }
  .feat-mood .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
  .feat-mood h2 { font-size: clamp(40px, 6vw, 72px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; color: #fff; }
  .feat-mood h2 .e { font-size: .7em; }
  .feat-mood .meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,235,229,.7); margin-bottom: 22px; }
  .feat-mood .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .feat-mood .btn { color: #EDEBE5; border-color: rgba(255,255,255,.25); }
  .feat-mood .btn:hover { background: rgba(255,255,255,.08); }
  .feat-mood .btn-primary { color: var(--night); border-color: var(--gold); }

  .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 16px; }
  .filter-row .chip { padding: 8px 16px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line-strong); color: var(--muted); cursor: pointer; transition: all .15s; }
  .filter-row .chip.active { background: var(--gold); border-color: var(--gold); color: var(--night); }
  .filter-row .chip:hover:not(.active) { color: var(--fg); border-color: var(--fg); }

  .row-head { display: flex; justify-content: space-between; align-items: baseline; margin: 56px 0 20px; }
  .row-head h3 { font-size: 28px; font-weight: 400; letter-spacing: -0.02em; margin: 0; }
  .row-head h3 em { font-style: normal; color: var(--gold); font-weight: 500; }
  .row-head .all { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .row-head .all:hover { color: var(--gold); }

  .mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .mood-grid { grid-template-columns: repeat(2, 1fr); } }
  .mood-card { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--card-2); }
  .mood-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .5s ease, filter .35s; }
  .mood-card:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }
  .mood-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85) 100%); }
  .mood-card .body { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #EDEBE5; }
  .mood-card .tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(237,235,229,.65); margin-bottom: 6px; }
  .mood-card .ttl { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
  .mood-card .ttl .e { font-size: 18px; }
  .mood-card .count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }

  /* Themed (no-photo) cards for moments / época / región / nivel */
  .theme-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
  @media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 600px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
  .theme-card { aspect-ratio: 3 / 4; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; overflow: hidden; transition: transform .25s; color: #EDEBE5; }
  .theme-card:hover { transform: translateY(-3px); }
  .theme-card .tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,235,229,.6); }
  .theme-card .body .ttl { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
  .theme-card .body .ttl .e { font-size: 14px; }
  .theme-card .body .count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,235,229,.55); }
  .theme-card .glyph { position: absolute; right: -20px; bottom: -30px; font-size: 140px; font-family: 'IBM Plex Sans', sans-serif; font-weight: 200; color: rgba(255,255,255,.06); letter-spacing: -0.04em; line-height: 1; pointer-events: none; }

  .nivel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 720px; }
  @media (max-width: 600px) { .nivel-row { grid-template-columns: 1fr; } }

  .instr-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 720px) { .instr-row { grid-template-columns: repeat(2, 1fr); } }
  .instr-card { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; background: var(--card-2); }
  .instr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .35s, transform .5s; }
  .instr-card:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.04); }
  .instr-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.8) 100%); }
  .instr-card .body { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #EDEBE5; }
  .instr-card .tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(237,235,229,.65); margin-bottom: 4px; }
  .instr-card .ttl { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
  .instr-card .count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold); }

  /* ----- MOOD DETAIL ----- */
  .mood-hero { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 24 / 8; min-height: 320px; margin-top: 32px; }
  .mood-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .mood-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.85) 100%); }
  .mood-hero .body { position: absolute; left: 40px; right: 40px; bottom: 36px; z-index: 2; color: #EDEBE5; }
  @media (max-width: 720px) { .mood-hero .body { left: 22px; right: 22px; bottom: 24px; } }
  .mood-hero .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
  .mood-hero h1 { font-size: clamp(56px, 9vw, 120px); font-weight: 300; letter-spacing: -0.04em; line-height: .92; margin: 0 0 20px; color: #fff; }
  .mood-hero h1 .e { font-size: .65em; margin-right: 12px; }
  .mood-hero .stats { display: flex; gap: 32px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,235,229,.7); margin-bottom: 24px; }
  .mood-hero .stats b { color: #fff; font-weight: 500; }
  .mood-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

  .tracklist-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); margin-top: 48px; flex-wrap: wrap; gap: 16px; }
  .tracklist-toolbar .left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .sort { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--muted); cursor: pointer; }
  .sort svg { width: 12px; height: 12px; }
  .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
  .seg button { background: transparent; border: 0; padding: 5px 12px; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .seg button.active { background: var(--ink); color: var(--cream); }
  [data-theme="dark"] .seg button.active { background: var(--cream); color: var(--ink); }

  .tracklist { margin-top: 8px; }
  .track-head { display: grid; grid-template-columns: 56px 1fr 240px 100px 80px 40px; gap: 24px; padding: 14px 12px; align-items: center; border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }
  @media (max-width: 980px) { .track-head { display: none; } }
  .track { display: grid; grid-template-columns: 56px 1fr 240px 100px 80px 40px; gap: 24px; padding: 16px 12px; align-items: center; border-bottom: 1px solid var(--line); transition: background .15s; cursor: pointer; }
  @media (max-width: 980px) { .track { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 14px 8px; } .track .chords, .track .album, .track .more { display: none; } }
  .track:hover { background: var(--card-2); }
  .track .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--hint); text-align: center; }
  .track:hover .num { color: var(--gold); }
  .track .info .title { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }
  .track.gold .info .title { color: var(--gold); }
  .track .info .artist { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-top: 4px; }
  .track .album { font-size: 13px; color: var(--muted); }
  .track .chords { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gold); letter-spacing: .04em; }
  .track .level { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
  .track .level.b { color: var(--green); }
  .track .level.i { color: var(--gold); }
  .track .level.a { color: var(--red); }
  .track .duration { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); text-align: right; }
  .track .more { color: var(--hint); text-align: center; }
  .track .more:hover { color: var(--fg); }

  .related-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; }
  @media (max-width: 980px) { .related-row { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px) { .related-row { grid-template-columns: repeat(2, 1fr); } }
  .related-card { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; background: var(--card-2); }
  .related-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .35s, transform .5s; }
  .related-card:hover img { filter: grayscale(0); transform: scale(1.04); }
  .related-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%); }
  .related-card .body { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #EDEBE5; }
  .related-card .ttl { font-size: 14px; font-weight: 500; line-height: 1.2; margin: 0; display: flex; align-items: center; gap: 6px; }
  .related-card .ttl .e { font-size: 13px; }
  .related-card .count { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: rgba(237,235,229,.65); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

  /* ----- MIS LISTAS ----- */
  .lists-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
  .lists-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  @media (max-width: 900px) { .lists-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .lists-grid { grid-template-columns: 1fr; } }
  .list-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; }
  .list-card .cover { aspect-ratio: 1 / 1; border-radius: 14px; background: var(--card-2); position: relative; overflow: hidden; border: 1px solid var(--line); transition: transform .25s, border-color .15s; }
  .list-card:hover .cover { transform: translateY(-3px); border-color: var(--gold); }
  .list-card .cover.empty { display: flex; align-items: center; justify-content: center; }
  .list-card .cover.empty svg { width: 48px; height: 48px; color: var(--hint); }
  .list-card .cover.tiles { display: grid; grid-template-columns: 1fr 1fr; }
  .list-card .cover.tiles img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .list-card .cover.gold { background: var(--gold); display: flex; align-items: center; justify-content: center; }
  .list-card .cover.gold svg { width: 48px; height: 48px; color: var(--night); stroke-width: 1.5; fill: none; stroke: currentColor; }
  .list-card .meta-row { display: flex; justify-content: space-between; align-items: baseline; }
  .list-card .name { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; }
  .list-card .submeta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .08em; margin-top: 4px; }
  .list-card .submeta .priv { color: var(--gold); }
  .list-card.create .cover { background: transparent; border: 1.5px dashed var(--line-strong); }
  .list-card.create .cover svg { color: var(--gold); }
  .list-card.create:hover .cover { border-color: var(--gold); }

  /* Empty state */
  .empty-state { padding: 80px 0; text-align: center; max-width: 560px; margin: 0 auto; }
  .empty-state .ic { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; background: var(--card-2); display: flex; align-items: center; justify-content: center; color: var(--gold); }
  .empty-state .ic svg { width: 32px; height: 32px; stroke-width: 1.5; fill: none; stroke: currentColor; }
  .empty-state h3 { font-size: 28px; font-weight: 400; letter-spacing: -0.015em; margin: 0 0 12px; }
  .empty-state h3 em { font-style: normal; color: var(--gold); font-weight: 500; }
  .empty-state p { color: var(--muted); margin: 0 0 28px; font-size: 16px; }

  /* ----- MIS FAVORITOS ----- */
  .tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); margin-top: 16px; }
  .tabs button { background: transparent; border: 0; padding: 14px 0; font-family: inherit; font-size: 16px; color: var(--muted); cursor: pointer; position: relative; display: inline-flex; gap: 8px; align-items: baseline; }
  .tabs button .n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--hint); }
  .tabs button.active { color: var(--fg); }
  .tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); border-radius: 2px; }
  .tabs button.active .n { color: var(--gold); }

  /* ----- MI CUENTA ----- */
  .breadcrumb { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); padding: 32px 0 0; }
  .breadcrumb a { color: var(--muted); }
  .breadcrumb a:hover { color: var(--fg); }
  .breadcrumb .sep { margin: 0 12px; color: var(--hint); }
  .breadcrumb .here { color: var(--fg); }

  .profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 48px 0 40px; border-bottom: 1px solid var(--line); }
  @media (max-width: 720px) { .profile-head { grid-template-columns: auto 1fr; gap: 20px; } .profile-head .actions { grid-column: 1 / -1; } }
  .profile-head .av { width: 96px; height: 96px; border-radius: 50%; background: var(--ink); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 36px; letter-spacing: -0.02em; }
  [data-theme="dark"] .profile-head .av { background: var(--gold); color: var(--night); }
  .profile-head .who h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
  .profile-head .who .em { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--muted); }
  .profile-head .who .meta { display: flex; gap: 14px; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
  .profile-head .who .meta b { color: var(--fg); font-weight: 500; }

  .account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding: 40px 0; }
  @media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; gap: 24px; } }
  .side-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 100px; align-self: start; }
  .side-nav a { padding: 10px 14px; border-radius: 8px; color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
  .side-nav a.active { background: var(--card-2); color: var(--fg); }
  .side-nav a:hover { color: var(--fg); }
  .side-nav .group { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); padding: 18px 14px 8px; }
  .side-nav .group:first-child { padding-top: 0; }

  .panel h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 8px; }
  .panel p.lede { color: var(--muted); margin: 0 0 28px; max-width: 56ch; font-size: 15px; }
  .panel + .panel { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
  .lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; }
  @media (max-width: 720px) { .lang-grid { grid-template-columns: 1fr 1fr; } }
  .lang-card { padding: 24px; border: 1px solid var(--line-strong); background: var(--card); border-radius: 14px; cursor: pointer; transition: all .15s; text-align: center; }
  .lang-card:hover { border-color: var(--gold); }
  .lang-card.active { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 10%, var(--card)); }
  .lang-card .code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .lang-card .name { font-size: 17px; font-weight: 500; }
  .help { font-size: 13px; color: var(--hint); margin-top: 16px; }

  .pref-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); gap: 24px; }
  .pref-row:first-of-type { border-top: 0; }
  .pref-row .lbl b { display: block; font-size: 15px; font-weight: 500; margin-bottom: 4px; }
  .pref-row .lbl span { color: var(--muted); font-size: 13px; }
  .switch { width: 44px; height: 24px; background: var(--card-2); border-radius: 999px; border: 1px solid var(--line-strong); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
  .switch::after { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: all .2s; }
  .switch.on { background: var(--gold); border-color: var(--gold); }
  .switch.on::after { left: 22px; background: var(--night); }

  .danger { padding: 24px; border: 1px solid var(--line-strong); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .danger b { display: block; margin-bottom: 4px; }
  .danger span { color: var(--muted); font-size: 13px; }
  .danger .btn { color: var(--red); border-color: color-mix(in oklab, var(--red) 50%, var(--line-strong)); }
  .danger .btn:hover { background: color-mix(in oklab, var(--red) 15%, transparent); }

  /* Show only active screen */
  .screen { display: none; padding-bottom: 80px; }
  .screen.active { display: block; }

/* ╔══════════════════════════════════════════════════════════
   ║ DoReSol Internal Screens v2.html (literal, sin modificar)
   ╚══════════════════════════════════════════════════════════ */

  :root {
    --gold: #C8A96E; --gold-hover: #B8965A; --gold-soft: #E8D9B8;
    --ink: #141412; --night: #0F0F0D; --cream: #F8F7F4;
    --warm-gray: #5C5B56; --soft-gray: #9C9B95; --surface: #F0EEE9;
    --green: #1D9E75; --blue: #185FA5; --red: #C0392B;
    --bg: var(--cream); --fg: var(--ink); --muted: var(--warm-gray); --hint: var(--soft-gray);
    --card: #fff; --card-2: var(--surface);
    --line: rgba(20,20,18,.10); --line-strong: rgba(20,20,18,.18);
  }
  [data-theme="dark"] { --bg: var(--night); --fg: #EDEBE5; --muted: #9A9890; --hint: #66645E; --card: #1A1A17; --card-2: #222220; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); }
  *{box-sizing:border-box}html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--fg);font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
  a{color:inherit;text-decoration:none}
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
  .wrap{max-width:1240px;margin:0 auto;padding:0 56px}
  @media(max-width:720px){.wrap{padding:0 24px}}
  .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .lab b{color:var(--fg);font-weight:500}

  /* Screen nav */
  .screens-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:100;background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:6px;display:flex;gap:2px;box-shadow:0 12px 32px rgba(20,20,18,.18);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;max-width:calc(100vw - 32px);justify-content:center}
  .screens-nav button{border:0;background:transparent;padding:8px 12px;border-radius:999px;color:var(--muted);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
  .screens-nav button.active{background:var(--gold);color:var(--night)}
  .screens-nav button:hover:not(.active){color:var(--fg)}

  /* Topbar */
  .topbar{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:1240px;margin:0 auto;padding:16px 56px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
  @media(max-width:980px){.topbar-inner{padding:14px 24px;gap:18px}}
  .brand{font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1}
  .brand i{font-style:normal;color:var(--gold);font-weight:600}
  .topnav{display:flex;gap:2px;flex-wrap:wrap}
  @media(max-width:980px){.topnav{display:none}}
  .topnav a{padding:8px 12px;border-radius:999px;font-size:14px;color:var(--muted)}
  .topnav a:hover,.topnav a.active{background:var(--card-2);color:var(--fg)}
  .topnav a.premium{color:var(--gold);display:inline-flex;align-items:center;gap:6px}
  .top-actions{display:flex;align-items:center;gap:12px}
  .search{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);font-size:13px;cursor:pointer;background:transparent}
  .search svg{width:14px;height:14px}
  .search .kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;border:1px solid var(--line-strong);padding:2px 6px;border-radius:4px;color:var(--hint)}
  @media(max-width:720px){.search .kbd,.search .lbl{display:none}}
  .lang{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line-strong);border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  .lang a{padding:4px 8px;border-radius:999px;color:var(--hint)}
  .lang a.active{background:var(--ink);color:var(--cream)}
  [data-theme="dark"] .lang a.active{background:var(--cream);color:var(--ink)}
  @media(max-width:720px){.lang{display:none}}
  .theme-toggle{background:none;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
  .theme-toggle svg{width:16px;height:16px}
  .user-pill{display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;cursor:pointer}
  .user-pill .av{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
  [data-theme="dark"] .user-pill .av{background:var(--gold);color:var(--night)}
  .user-pill svg{width:12px;height:12px;color:var(--hint)}

  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line-strong);background:transparent;color:var(--fg);transition:all .15s}
  .btn:hover{background:var(--card-2)}
  .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--night);font-weight:500}
  .btn-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover)}
  .btn-sm{padding:7px 14px;font-size:13px}
  .btn-lg{padding:14px 28px;font-size:15px}

  /* Footer */
  footer{border-top:1px solid var(--line);padding:80px 0 40px;margin-top:96px}
  footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
  @media(max-width:720px){footer .grid{grid-template-columns:1fr 1fr;gap:32px}}
  footer .b{font-size:24px;font-weight:500;letter-spacing:-0.02em}
  footer .b i{font-style:normal;color:var(--gold);font-weight:600}
  footer .blurb{color:var(--muted);margin-top:14px;max-width:32ch;font-size:14px}
  footer h5{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);margin:0 0 16px;font-weight:500}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  footer ul a{color:var(--muted);font-size:14px}
  footer ul a:hover{color:var(--fg)}
  footer .bottom{border-top:1px solid var(--line);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint);letter-spacing:.12em;text-transform:uppercase}
  footer .doresol-mark{color:var(--gold)}
  footer .doresol-mark .dot{color:var(--hint);margin:0 6px}

  /* Page head shared */
  .page-head{padding:64px 0 40px}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
  .page-head h1{font-size:clamp(48px,7vw,88px);font-weight:300;letter-spacing:-0.035em;line-height:1;margin:0}
  .page-head h1 em{font-style:normal;color:var(--gold);font-weight:400}
  .page-head .lede{color:var(--muted);font-size:18px;margin-top:20px;max-width:60ch}
  .breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);padding:32px 0 0}
  .breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--fg)}
  .breadcrumb .sep{margin:0 12px}.breadcrumb .here{color:var(--fg)}

  /* ============ PREMIUM ============ */
  .pricing-hero{text-align:center;padding:80px 0 56px;border-bottom:1px solid var(--line)}
  .pricing-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;justify-content:center}
  .pricing-hero h1{font-size:clamp(56px,8vw,104px);font-weight:300;letter-spacing:-0.04em;line-height:.95;margin:0 0 24px}
  .pricing-hero h1 em{font-style:normal;color:var(--gold);font-weight:400}
  .pricing-hero .lede{color:var(--muted);font-size:20px;max-width:46ch;margin:0 auto}
  .pricing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:880px;margin:48px auto 0;text-align:center}
  @media(max-width:720px){.pricing-stats{grid-template-columns:repeat(2,1fr);gap:24px}}
  .pricing-stats b{display:block;font-size:48px;font-weight:300;letter-spacing:-0.03em;color:var(--gold)}
  .pricing-stats span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);margin-top:6px;display:block}

  .what-section{padding:72px 0;background:var(--card-2)}
  .what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:900px){.what-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.what-grid{grid-template-columns:1fr}}
  .what-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px}
  .what-card .ic{width:40px;height:40px;border-radius:10px;background:color-mix(in oklab,var(--gold) 18%,var(--card-2));color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:20px}
  .what-card h4{font-size:18px;font-weight:500;letter-spacing:-0.01em;margin:0 0 8px}
  .what-card p{color:var(--muted);font-size:14px;margin:0}
  .section-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);text-align:center;margin-bottom:32px}

  .plans{padding:72px 0}
  .billing-toggle{display:inline-flex;padding:4px;border:1px solid var(--line-strong);border-radius:999px;margin:0 auto 40px;background:var(--card)}
  .billing-toggle button{border:0;background:transparent;padding:10px 20px;border-radius:999px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .billing-toggle button.active{background:var(--ink);color:var(--cream)}
  [data-theme="dark"] .billing-toggle button.active{background:var(--cream);color:var(--ink)}
  .billing-toggle .save{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--gold);background:color-mix(in oklab,var(--gold) 18%,transparent);padding:2px 6px;border-radius:4px}
  .center{display:flex;justify-content:center}

  .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}
  @media(max-width:720px){.plan-grid{grid-template-columns:1fr}}
  .plan{background:var(--card);border:1px solid var(--line-strong);border-radius:18px;padding:32px;position:relative}
  .plan.pro{border-color:var(--gold);box-shadow:0 24px 48px -24px color-mix(in oklab,var(--gold) 50%,transparent)}
  .plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--night);padding:5px 12px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
  .plan .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
  .plan .price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
  .plan .price .cur{font-size:24px;color:var(--muted)}
  .plan .price .num{font-size:64px;font-weight:300;letter-spacing:-0.04em;line-height:1;color:var(--fg)}
  .plan .price .per{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
  .plan .billed{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint);letter-spacing:.08em;margin-bottom:24px}
  .plan .cta{width:100%;padding:14px;border-radius:12px}
  .plan .cta.current{background:var(--card-2);border-color:var(--line-strong);color:var(--muted);cursor:default}
  .plan ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  .plan ul li{display:flex;gap:10px;font-size:14px}
  .plan ul li.on{color:var(--fg)}
  .plan ul li.off{color:var(--hint)}
  .plan ul li b{font-weight:500}
  .check{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:color-mix(in oklab,var(--green) 16%,transparent);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px}
  .dash{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--hint)}
  .plan .fineprint{margin-top:24px;padding-top:20px;border-top:1px dashed var(--line);font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint);display:flex;flex-direction:column;gap:6px}
  .plan .fineprint span{display:inline-flex;gap:8px;align-items:center}

  .vscompet{padding:48px 0 0;text-align:center}
  .vscompet .row{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px auto 0;max-width:680px}
  @media(max-width:600px){.vscompet .row{grid-template-columns:1fr}}
  .vsc{background:var(--card);border:1px solid var(--line-strong);border-radius:14px;padding:24px}
  .vsc.win{border-color:var(--gold);position:relative}
  .vsc h5{font-size:14px;margin:0 0 12px;font-weight:500}
  .vsc .pp{font-size:32px;font-weight:300;letter-spacing:-0.02em;color:var(--fg)}
  .vsc .pp small{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);font-weight:400}
  .vsc .crown{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--gold);background:color-mix(in oklab,var(--gold) 16%,transparent);padding:5px 10px;border-radius:6px;display:inline-block;margin-top:10px}

  .compare{padding:72px 0}
  .compare table{width:100%;border-collapse:collapse}
  .compare th,.compare td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
  .compare th{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);font-weight:500}
  .compare .head{background:var(--card-2);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;border-bottom:0}
  .compare td:nth-child(2),.compare td:nth-child(3){text-align:center}
  .compare td.yes{color:var(--green)}.compare td.no{color:var(--hint)}
  .compare .row-pro td:nth-child(3){color:var(--gold)}

  .faq{padding:72px 0;border-top:1px solid var(--line)}
  .faq .q{padding:24px 0;border-bottom:1px solid var(--line);cursor:pointer}
  .faq .q h4{font-size:17px;font-weight:500;letter-spacing:-0.005em;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
  .faq .q h4 .ic{color:var(--gold);font-weight:300;font-size:24px}
  .faq .q p{color:var(--muted);margin:0;font-size:15px;max-width:80ch}

  .cta-final{padding:96px 0;text-align:center;background:var(--card-2)}
  .cta-final h2{font-size:clamp(40px,6vw,64px);font-weight:300;letter-spacing:-0.03em;margin:0 0 12px}
  .cta-final h2 em{font-style:normal;color:var(--gold);font-weight:400}
  .cta-final p{color:var(--muted);margin:0 0 32px}

  /* ============ ARTIST DETAIL ============ */
  .artist-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;padding:32px 0 56px}
  @media(max-width:900px){.artist-grid{grid-template-columns:1fr;gap:32px}}
  .artist-photo{aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;background:var(--card-2);position:sticky;top:100px;align-self:start}
  @media(max-width:900px){.artist-photo{position:static}}
  .artist-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
  .artist-photo .country{position:absolute;left:14px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:6px;letter-spacing:.08em}
  .artist-info h1{font-size:clamp(48px,6vw,72px);font-weight:300;letter-spacing:-0.035em;line-height:1;margin:0 0 20px;display:flex;align-items:center;gap:18px}
  .artist-info h1 .fav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;font-size:18px}
  .artist-info h1 .fav.on{background:var(--gold);border-color:var(--gold);color:var(--night)}
  .artist-info .tags{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
  .pill{padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--muted)}
  .pill.gold{border-color:var(--gold);color:var(--gold);background:color-mix(in oklab,var(--gold) 10%,transparent)}
  .section-bio{padding:32px 0 0;border-top:1px solid var(--line)}
  .section-bio h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin:0 0 20px;font-weight:500}
  .bio-text p{font-size:16px;line-height:1.7;color:var(--fg);margin:0 0 18px}
  .bio-text p b{font-weight:500}
  .bio-text em{color:var(--gold);font-style:italic}

  .awards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:600px){.awards{grid-template-columns:1fr}}
  .award{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card)}
  .award .em{font-size:24px;flex-shrink:0}
  .award.win{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 8%,var(--card))}
  .award b{font-weight:500;font-size:15px}
  .award .sub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px}

  .data-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .data-cell{padding:18px;background:var(--card-2);border-radius:12px}
  .data-cell .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);margin-bottom:6px}
  .data-cell .val{font-size:18px;font-weight:500;letter-spacing:-0.005em}

  .links-row{display:flex;gap:10px;flex-wrap:wrap}
  .link-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;color:var(--fg);background:var(--card)}
  .link-pill:hover{border-color:var(--gold)}

  .artist-songs{padding:48px 0;border-top:1px solid var(--line);margin-top:48px}
  .artist-songs h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin:0 0 24px;font-weight:500}
  .song-row{display:grid;grid-template-columns:48px 56px 1fr auto auto auto;gap:20px;padding:16px 12px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
  .song-row:hover{background:var(--card-2)}
  .song-row .num{font-family:'IBM Plex Mono',monospace;color:var(--hint);text-align:center;font-size:13px}
  .song-row .cov{width:56px;height:56px;border-radius:8px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px}
  .song-row .ttl{font-size:16px;font-weight:500;display:flex;align-items:center;gap:8px}
  .song-row .lvl,.song-row .ins,.song-row .dur{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
  .song-row .ins{padding:5px 10px;border:1px solid var(--line);border-radius:6px}

  /* ============ SONG PAGE ============ */
  .song-hero{background:linear-gradient(180deg,#1a1816 0%,#2a1f18 50%,#0F0F0D 100%);color:#EDEBE5;padding:48px 0 32px;border-radius:0}
  .song-hero .breadcrumb{color:rgba(237,235,229,.5);padding-top:0}
  .song-hero .breadcrumb a{color:rgba(237,235,229,.7)}
  .song-hero .breadcrumb .here{color:#fff}
  .song-hero-grid{display:grid;grid-template-columns:140px 1fr auto;gap:32px;align-items:end;margin-top:24px}
  @media(max-width:720px){.song-hero-grid{grid-template-columns:1fr;gap:18px}}
  .song-cover{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#2a1f18}
  .song-cover img{width:100%;height:100%;object-fit:cover}
  .song-hero h1{font-size:clamp(36px,5vw,56px);font-weight:400;letter-spacing:-0.025em;line-height:1;margin:0 0 12px;color:#fff}
  .song-hero .meta-row{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(237,235,229,.65);letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
  .song-hero .meta-row b{color:#fff;font-weight:500}
  .song-hero .meta-row .gold{color:var(--gold)}
  .song-hero .actions{display:flex;gap:10px;flex-wrap:wrap}
  .song-hero .btn{color:#EDEBE5;border-color:rgba(255,255,255,.2)}
  .song-hero .btn:hover{background:rgba(255,255,255,.06)}
  .song-hero .btn-primary{color:var(--night);border-color:var(--gold)}

  .instr-pick{display:flex;gap:12px;padding:24px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .instr-pick .pick{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);min-width:180px;cursor:pointer}
  .instr-pick .pick.active{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 10%,var(--card))}
  .instr-pick .pick .em{font-size:22px}
  .instr-pick .pick b{display:block;font-size:15px;font-weight:500;line-height:1.2}
  .instr-pick .pick small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

  .video-block{margin:32px 0;aspect-ratio:16/9;max-width:720px;border-radius:14px;overflow:hidden;background:#000;position:relative}
  .video-block img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
  .video-block .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
  .video-block .label{position:absolute;left:18px;bottom:18px;background:rgba(0,0,0,.55);color:#fff;padding:6px 12px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em}

  .song-toolbar{position:sticky;top:72px;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:color-mix(in oklab,var(--card) 92%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 6px 24px -12px rgba(0,0,0,.18);flex-wrap:wrap;gap:14px;margin:18px 0 8px}
  .toolbar-left{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .toolbar-left .seg-btn{padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--muted);background:transparent;cursor:pointer}
  .toolbar-left .seg-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  [data-theme="dark"] .toolbar-left .seg-btn.active{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .transp{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
  .transp .step{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--fg)}
  .transp .step:hover{border-color:var(--gold);color:var(--gold)}
  .transp .key{padding:4px 10px;background:color-mix(in oklab,var(--gold) 16%,transparent);color:var(--gold);border-radius:6px;font-weight:500;letter-spacing:.04em}

  /* Song layout: page split with chord rail extending to footer */
  .song-page{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
  @media (max-width:980px){.song-page{grid-template-columns:1fr;gap:24px}}
  .song-main{min-width:0}
  .chord-rail{align-self:stretch;padding-left:24px;border-left:1px solid var(--line);min-height:100%}
  .chord-rail .rail-inner{position:sticky;top:140px}
  @media (max-width:980px){.chord-rail{border-left:0;padding-left:0;margin-top:8px}.chord-rail .rail-inner{position:static}}
  .chord-rail::-webkit-scrollbar{width:6px}
  .chord-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
  .chord-rail .rail-head{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin-bottom:14px}
  .chord-rail .inst-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .chord-rail .inst-tabs button{background:transparent;border:0;padding:10px 4px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;flex:1;position:relative}
  .chord-rail .inst-tabs button.active{color:var(--fg);font-weight:500}
  .chord-rail .inst-tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);border-radius:2px}
  .chord-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .chord-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 12px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s}
  .chord-card:hover{border-color:var(--gold)}
  .chord-card .nm{font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:-0.01em}
  .chord-card .diag{width:100%;display:flex;justify-content:center}
  .chord-card svg{display:block}
  .chord-card .pager{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--hint)}
  .chord-card .pager button{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:11px;line-height:1}
  .chord-card .pager button:hover{color:var(--fg)}
  .chord-card .play-mini{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;margin-top:2px}
  .chord-card .play-mini:hover{color:var(--gold);border-color:var(--gold)}
  .chordsheet{padding:32px 0 0;font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:2.1}
  /* Two-column lyric/chord layout */
  .lc-row{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
  .lc-row .lc-chords{display:flex;flex-wrap:wrap;gap:6px;color:var(--gold);font-weight:500}
  .lc-row .lc-chord{background:color-mix(in oklab,var(--gold) 14%,transparent);padding:2px 8px;border-radius:5px}
  .lc-row .lc-lyr{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;color:var(--fg);line-height:1.6}
  .lc-row.section{grid-template-columns:1fr;border-bottom:0;padding-top:24px;padding-bottom:6px}
  .lc-row.section .lc-section{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);font-weight:500}
  @media(max-width:680px){.lc-row{grid-template-columns:1fr;gap:4px}}
  .chordsheet h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin:32px 0 12px;font-weight:500}
  .chordsheet h4:first-child{margin-top:0}
  .chordsheet .chord{display:inline-block;color:var(--gold);font-weight:500;background:color-mix(in oklab,var(--gold) 12%,transparent);padding:1px 6px;border-radius:4px;margin-right:6px;letter-spacing:.02em}
  .chordsheet .lyr{display:block;color:var(--fg);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;line-height:1.7;margin-bottom:18px;letter-spacing:0}
  .chordsheet .chord-row{margin-bottom:4px;line-height:1.4;color:var(--gold)}
  .chordsheet .empty{color:var(--hint);font-style:italic}
  .tab-block{background:var(--card-2);border-radius:10px;padding:18px 20px;margin:8px 0 22px;font-size:13px;line-height:1.7;white-space:pre;overflow-x:auto;color:var(--fg)}
  .sync-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--ink);color:var(--cream);border:1px solid var(--ink);font:inherit;font-size:12px;font-weight:500;cursor:pointer;letter-spacing:.02em}
  [data-theme="dark"] .sync-btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .sync-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 30%,transparent)}
  .sync-btn .kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;opacity:.7;margin-left:2px}
  .sync-btn.alt{background:transparent;color:var(--fg);border-color:var(--line-strong)}
  .sync-btn.alt:hover{border-color:var(--gold);color:var(--gold)}

  .song-data{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding:32px 0;border-top:1px solid var(--line)}
  .song-data .row{display:contents}
  .song-data .lbl{padding:14px 0;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--hint);letter-spacing:.06em}
  .song-data .val{padding:14px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:500}

  /* ============ ALBUM DETAIL ============ */
  .album-hero{background:linear-gradient(135deg,#1a1816 0%,#3a2620 30%,#5b3528 60%,#0F0F0D 100%);color:#EDEBE5;padding:48px 0 64px;border-radius:0;position:relative;overflow:hidden}
  .album-hero::after{content:"";position:absolute;right:-20%;top:-20%;width:60%;height:140%;background:radial-gradient(ellipse,color-mix(in oklab,var(--gold) 30%,transparent),transparent 70%);pointer-events:none}
  .album-hero-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:end;position:relative;z-index:1}
  @media(max-width:720px){.album-hero-grid{grid-template-columns:1fr;gap:24px}}
  .album-cover{aspect-ratio:1/1;border-radius:8px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4)}
  .album-cover img{width:100%;height:100%;object-fit:cover}
  .album-hero .eyebrow{color:var(--gold)}
  .album-hero h1{font-size:clamp(48px,7vw,80px);font-weight:400;letter-spacing:-0.03em;line-height:.95;margin:8px 0 14px;color:#fff}
  .album-hero .artist{font-size:24px;color:#fff;font-weight:400;margin:0 0 16px}
  .album-hero .specs{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(237,235,229,.65);letter-spacing:.06em;margin-bottom:20px}
  .album-hero .tags{display:flex;gap:8px;margin-bottom:24px}
  .album-hero .pill{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(0,0,0,.3)}

  .album-body{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:48px 0}
  @media(max-width:900px){.album-body{grid-template-columns:1fr}}
  .tracklist h3{font-size:24px;font-weight:500;margin:0 0 16px;display:flex;justify-content:space-between;align-items:baseline}
  .tracklist h3 .ct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.08em}
  .alb-track{display:grid;grid-template-columns:32px 1fr auto auto;gap:18px;padding:14px 8px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
  .alb-track:hover{background:var(--card-2)}
  .alb-track .num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--hint);text-align:center}
  .alb-track .info b{display:block;font-weight:500;font-size:16px;letter-spacing:-0.005em}
  .alb-track .info small{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.06em;display:block;margin-top:3px}
  .alb-track .badge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:4px 10px;border-radius:999px}
  .alb-track .dur{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}

  .side-panel{display:flex;flex-direction:column;gap:16px}
  .panel-card{padding:24px;border:1px solid var(--line-strong);border-radius:14px;background:var(--card)}
  .panel-card h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin:0 0 16px;font-weight:500}
  .panel-card .data-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
  .panel-card .data-line:last-child{border-bottom:0}
  .panel-card .data-line b{font-weight:500}
  .panel-card .data-line .v{color:var(--fg)}

  /* ============ ARTISTS INDEX ============ */
  .alpha-bar{display:flex;gap:6px;flex-wrap:wrap;margin:24px 0 16px;padding:12px;background:var(--card-2);border-radius:14px}
  .alpha-bar .ab{padding:6px 11px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);cursor:pointer;letter-spacing:.06em;font-weight:500}
  .alpha-bar .ab.active{background:var(--gold);color:var(--night)}
  .alpha-bar .ab.dim{color:var(--hint)}
  .alpha-bar .ab:hover:not(.dim):not(.active){color:var(--fg);background:var(--card)}

  .genre-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
  .genre-bar .gb{padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer}
  .genre-bar .gb.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  [data-theme="dark"] .genre-bar .gb.active{background:var(--cream);color:var(--ink);border-color:var(--cream)}

  .artist-grid-idx{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 16px}
  @media(max-width:900px){.artist-grid-idx{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:480px){.artist-grid-idx{grid-template-columns:repeat(2,1fr)}}
  .artist-tile{text-align:center;cursor:pointer}
  .artist-tile .av{aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--card-2);position:relative;margin-bottom:12px;transition:transform .25s}
  .artist-tile:hover .av{transform:scale(1.04)}
  .artist-tile .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .35s}
  .artist-tile:hover .av img{filter:grayscale(0)}
  .artist-tile.empty .av{display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:32px}
  .artist-tile .gn{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
  .artist-tile .nm{font-size:14px;font-weight:500;letter-spacing:-0.005em;display:flex;align-items:center;justify-content:center;gap:6px}
  .artist-tile.gold .nm{color:var(--gold)}
  .alpha-section{margin:48px 0 24px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
  .alpha-section .letter{font-size:48px;font-weight:300;letter-spacing:-0.03em;color:var(--gold);line-height:1}
  .alpha-section .ct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint);letter-spacing:.12em}

  /* ============ ALBUMS INDEX ============ */
  .album-section{margin:48px 0 24px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
  .album-section h3{font-size:28px;font-weight:500;letter-spacing:-0.015em;margin:0;display:flex;align-items:baseline;gap:12px}
  .album-section h3 .ct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold);font-weight:400;letter-spacing:.06em}
  .album-row-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:20px}
  @media(max-width:900px){.album-row-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:480px){.album-row-grid{grid-template-columns:repeat(2,1fr)}}
  .alb-tile{cursor:pointer}
  .alb-tile .cov{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--card-2);margin-bottom:10px;transition:transform .25s}
  .alb-tile:hover .cov{transform:translateY(-3px)}
  .alb-tile .cov img{width:100%;height:100%;object-fit:cover}
  .alb-tile.empty .cov{display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:28px}
  .alb-tile .nm{font-size:13px;font-weight:500;letter-spacing:-0.005em;line-height:1.3;margin-bottom:2px}
  .alb-tile .yr{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.06em}

  /* ============ CANCIONERO ============ */
  .canc-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
  .canc-filters .gb{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer}
  .canc-filters .gb.active{background:var(--gold);color:var(--night);border-color:var(--gold)}
  .canc-filters .gb .n{font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.7}

  .canc-art-section{margin:32px 0 8px}
  .canc-art-head{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
  .canc-art-head h4{font-size:18px;font-weight:500;letter-spacing:-0.005em;margin:0;display:flex;align-items:center;gap:10px}
  .canc-art-head .ct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.08em}
  .canc-row{display:grid;grid-template-columns:48px 1fr auto auto auto;gap:18px;padding:12px 8px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
  .canc-row:hover{background:var(--card-2)}
  .canc-row .cov{width:40px;height:40px;border-radius:6px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px}
  .canc-row .info b{display:block;font-weight:500;font-size:15px}
  .canc-row .info small{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.06em;margin-top:2px;display:block}
  .canc-row .lvl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
  .canc-row .lvl.b{color:var(--green);background:color-mix(in oklab,var(--green) 14%,transparent)}
  .canc-row .lvl.i{color:var(--gold);background:color-mix(in oklab,var(--gold) 14%,transparent)}
  .canc-row .lvl.a{color:var(--red);background:color-mix(in oklab,var(--red) 14%,transparent)}
  .canc-row .ins{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.06em}
  .canc-row .dur{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
  .canc-row.gold .info b{color:var(--gold)}

  .screen{display:none;padding-bottom:80px}.screen.active{display:block}

/* ╔══════════════════════════════════════════════════════════
   ║ DoReSol Brandbook.html (literal, sin modificar)
   ╚══════════════════════════════════════════════════════════ */

  :root {
    --gold: #C8A96E;
    --gold-hover: #B8965A;
    --ink: #141412;
    --night: #0F0F0D;
    --cream: #F8F7F4;
    --warm-gray: #5C5B56;
    --soft-gray: #9C9B95;
    --surface: #F0EEE9;
    --green: #1D9E75;
    --blue: #185FA5;
    --red: #C0392B;
    --bg: var(--cream);
    --fg: var(--ink);
    --muted: var(--warm-gray);
    --hint: var(--soft-gray);
    --card: #ffffff;
    --line: rgba(20,20,18,.10);
    --line-strong: rgba(20,20,18,.18);
  }
  [data-theme="dark"] {
    --bg: var(--night);
    --fg: #EDEBE5;
    --muted: #9A9890;
    --hint: #66645E;
    --card: #1A1A17;
    --surface: #222220;
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.16);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--fg);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background .35s ease, color .35s ease;
  }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
  @media (max-width: 720px) { .wrap { padding: 0 24px; } }
  section { padding: 88px 0; border-top: 1px solid var(--line); }
  section:first-of-type { border-top: 0; }

  .sec-head {
    display: grid; grid-template-columns: 200px 1fr;
    gap: 48px; margin-bottom: 56px; align-items: baseline;
  }
  @media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; } }
  .sec-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--hint);
  }
  .sec-num b { color: var(--fg); font-weight: 500; margin-right: 14px; }
  .sec-title { font-size: 44px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
  .sec-title em { font-style: normal; color: var(--gold); }
  .sec-lede { font-size: 17px; color: var(--muted); max-width: 62ch; margin: 16px 0 0; line-height: 1.55; }

  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-inner {
    max-width: 1240px; margin: 0 auto; padding: 14px 56px;
    display: flex; align-items: center; gap: 24px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  }
  @media (max-width: 720px) { .topbar-inner { padding: 12px 24px; gap: 12px; } }
  .topbar-logo {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 500;
    font-size: 15px; letter-spacing: -0.01em; color: var(--fg); text-transform: none;
  }
  .topbar-logo i { color: var(--gold); font-style: normal; font-weight: 600; }
  .topbar-spacer { flex: 1; }
  .topbar button {
    color: var(--muted); background: none; border: 0; cursor: pointer;
    font: inherit; text-transform: inherit; letter-spacing: inherit;
  }
  .theme-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-strong) !important;
    border-radius: 999px; padding: 6px 12px !important;
  }
  .theme-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

  .hero { padding: 120px 0 96px; }
  .hero-meta {
    display: flex; gap: 24px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--hint); text-transform: uppercase; letter-spacing: .14em;
    margin-bottom: 40px;
  }
  .hero-meta span b { color: var(--fg); font-weight: 500; }
  .hero-mark {
    font-size: clamp(96px, 18vw, 240px);
    font-weight: 300; letter-spacing: -0.045em; line-height: .92; margin: 0;
  }
  .hero-mark i { color: var(--gold); font-style: normal; font-weight: 400; }
  .hero-tag {
    margin-top: 36px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .hero-tag b { color: var(--fg); font-weight: 500; }
  .hero-line {
    margin-top: 40px; border-top: 1px solid var(--line-strong); padding-top: 28px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
    font-size: 13px; font-family: 'IBM Plex Mono', monospace; color: var(--muted);
  }
  @media (max-width: 720px) { .hero-line { grid-template-columns: 1fr 1fr; } }
  .hero-line div b { display: block; color: var(--fg); font-weight: 500; margin-bottom: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

  .concept { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; }
  @media (max-width: 900px) { .concept { grid-template-columns: 1fr; gap: 32px; } }
  .concept p { font-size: 22px; line-height: 1.45; font-weight: 300; margin: 0 0 20px; text-wrap: pretty; }
  .concept p strong { color: var(--gold); font-weight: 400; }
  .concept aside { border-left: 1px solid var(--line-strong); padding-left: 32px; }
  .concept aside h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); margin: 0 0 16px; font-weight: 500; }
  .concept aside ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.7; color: var(--muted); }
  .concept aside ul li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 16px; }
  .concept aside ul li:first-child { border-top: 0; }
  .concept aside ul li b { flex: 0 0 80px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg); font-weight: 500; padding-top: 3px; }

  .word-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media (max-width: 720px) { .word-grid { grid-template-columns: 1fr; } }
  .word-card { background: var(--card); padding: 56px 48px 28px; display: flex; flex-direction: column; gap: 24px; min-height: 280px; position: relative; border: 1px solid var(--line); border-radius: 18px; }
  .word-card.dark { background: var(--night); color: #EDEBE5; }
  .word-card.dark .word-meta { color: rgba(237,235,229,.55); border-top-color: rgba(255,255,255,.10); }
  .word-card.dark .word-meta b { color: rgba(237,235,229,.9); }
  .word-card .stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
  .word-meta { display: flex; gap: 18px; align-items: baseline; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--hint); border-top: 1px solid var(--line); padding-top: 16px; flex-wrap: wrap; }
  .word-meta b { color: var(--fg); font-weight: 500; }
  .word-meta .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); }
  .word-card.dark .word-meta .pill { border-color: rgba(255,255,255,.18); color: rgba(237,235,229,.7); }

  .wm { font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
  .wm i { font-style: normal; color: var(--gold); }
  .wm-1 { font-size: 84px; }
  .wm-1 i { font-weight: 600; }
  .wm-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .wm-stack .tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  .wm-row { display: flex; align-items: baseline; gap: 18px; }
  .wm-row .bar { width: 1px; height: 56px; background: var(--line-strong); }
  .wm-row .tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

  .symbol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .symbol-grid { grid-template-columns: repeat(2, 1fr); } }
  .sym-card { background: var(--card); aspect-ratio: 1 / 1; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; }
  .sym-card .stage { flex: 1; display: flex; align-items: center; justify-content: center; }
  .sym-card .label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); display: flex; justify-content: space-between; }
  .sym-card .label b { color: var(--fg); font-weight: 500; }

  .icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
  @media (max-width: 720px) { .icon-row { grid-template-columns: repeat(2, 1fr); } }
  .icon-card { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
  .app-icon { width: 132px; height: 132px; border-radius: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(20,20,18,.06); }
  .app-icon.cream { background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
  .app-icon.night { background: var(--night); }
  .app-icon.gold  { background: var(--gold); color: var(--night); }
  .app-icon.ink   { background: var(--ink); color: var(--gold); }
  .icon-card .cap { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }

  .construct { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: stretch; margin-top: 64px; }
  @media (max-width: 900px) { .construct { grid-template-columns: 1fr; } }
  .construct-board { background: var(--card); border: 1px solid var(--line); padding: 56px; position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }
  .construct-grid { position: absolute; inset: 56px; pointer-events: none; background: linear-gradient(to right, var(--gold) 0 1px, transparent 1px) 0 0/25% 100%, linear-gradient(to bottom, var(--gold) 0 1px, transparent 1px) 0 0/100% 25%; opacity: .15; }
  .construct-board .wm { font-size: 96px; font-weight: 500; letter-spacing: -0.035em; z-index: 1; }
  .construct-board .x-mark { position: absolute; width: 18px; height: 18px; border: 1px solid var(--gold); background: color-mix(in oklab, var(--gold) 14%, transparent); }
  .construct-board .x-tl { top: 38px; left: 38px; } .construct-board .x-tr { top: 38px; right: 38px; }
  .construct-board .x-bl { bottom: 38px; left: 38px; } .construct-board .x-br { bottom: 38px; right: 38px; }
  .construct-board .x-label { position: absolute; top: 12px; left: 60px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }
  .construct-notes { display: flex; flex-direction: column; gap: 16px; }
  .construct-notes .row { border-top: 1px solid var(--line); padding-top: 14px; }
  .construct-notes .row:first-child { border-top: 0; padding-top: 0; }
  .construct-notes .row b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
  .construct-notes .row span { color: var(--muted); font-size: 14px; line-height: 1.55; }

  .sizes-row { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  @media (max-width: 720px) { .sizes-row { grid-template-columns: 1fr 1fr; } }
  .sizes-row .cell { padding: 28px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; justify-content: space-between; min-height: 160px; }
  .sizes-row .cell:first-child { border-left: 0; }
  .sizes-row .cell .sm-mark { font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--fg); }
  .sizes-row .cell .sm-mark i { color: var(--gold); font-style: normal; font-weight: 600; }
  .sizes-row .cell .meta { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }
  .sizes-row .cell .meta b { color: var(--fg); font-weight: 500; }

  .palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  @media (max-width: 900px) { .palette { grid-template-columns: repeat(2, 1fr); } }
  .swatch { border: 1px solid var(--line); overflow: hidden; background: var(--card); border-radius: 14px; }
  .swatch .chip { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
  .swatch .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
  .swatch .name { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
  .swatch .hex { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); }
  .swatch .role { color: var(--hint); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; margin-top: 4px; font-family: 'IBM Plex Mono', monospace; }
  .palette-extras { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 720px) { .palette-extras { grid-template-columns: 1fr; } }

  .type-block { display: grid; grid-template-columns: 200px 1fr; gap: 48px; border-top: 1px solid var(--line); padding: 28px 0; align-items: baseline; }
  .type-block:first-of-type { border-top: 1px solid var(--line-strong); }
  .type-block:last-of-type { border-bottom: 1px solid var(--line); }
  @media (max-width: 720px) { .type-block { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; } }
  .type-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); line-height: 1.7; }
  .type-meta b { display: block; color: var(--fg); font-weight: 500; }
  .type-sample { color: var(--fg); }
  .t-display { font-size: 88px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
  .t-h1 { font-size: 56px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; }
  .t-h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
  .t-h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; }
  .t-body { font-size: 17px; line-height: 1.55; max-width: 60ch; color: var(--fg); }
  .t-body em { font-style: normal; color: var(--muted); }
  .t-small { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
  .t-mono { font-family: 'IBM Plex Mono', monospace; font-size: 16px; }
  .t-mono i { color: var(--gold); font-style: normal; font-weight: 500; }
  .t-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

  .voice { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  @media (max-width: 720px) { .voice { grid-template-columns: 1fr; } }
  .voice-col { padding: 36px 36px 32px; background: var(--card); }
  .voice-col + .voice-col { border-left: 1px solid var(--line); }
  @media (max-width: 720px) { .voice-col + .voice-col { border-left: 0; border-top: 1px solid var(--line); } }
  .voice-head { display: flex; align-items: baseline; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
  .voice-head .dot { width: 7px; height: 7px; border-radius: 50%; }
  .yes .dot { background: var(--green); } .no .dot { background: var(--red); }
  .yes .voice-head { color: var(--green); } .no .voice-head { color: var(--red); }
  .voice-row { border-top: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: baseline; }
  .voice-row:first-of-type { border-top: 0; padding-top: 0; }
  .voice-row b { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .voice-row p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fg); }

  .voice-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
  @media (max-width: 720px) { .voice-three { grid-template-columns: 1fr; } }
  .voice-three .word { border: 1px solid var(--line); padding: 32px 28px; background: var(--card); border-radius: 18px; }
  .voice-three .word .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .voice-three .word .term { font-size: 36px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; }
  .voice-three .word .term i { font-style: normal; color: var(--gold); font-weight: 500; }
  .voice-three .word .desc { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }

  .context-stack { display: flex; flex-direction: column; gap: 36px; }
  .ctx-card { border: 1px solid var(--line); background: var(--card); overflow: hidden; border-radius: 18px; }
  .ctx-head { padding: 14px 24px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }
  .ctx-head b { color: var(--fg); font-weight: 500; }
  .ctx-body { padding: 32px; }

  .demo-header { display: flex; align-items: center; gap: 32px; padding: 22px 28px; border: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
  .demo-header .brand { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
  .demo-header .brand i { color: var(--gold); font-style: normal; font-weight: 600; }
  .demo-header nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
  .demo-header nav a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 15px; }
  .demo-header nav a.active { background: var(--surface); color: var(--fg); }
  .demo-header .actions { display: flex; gap: 8px; }
  .btn { padding: 10px 20px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); transition: background .15s, color .15s, border-color .15s; }
  .btn:hover { background: var(--surface); }
  .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--night); }
  .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

  .song { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 20px; align-items: center; padding: 22px 4px; border-top: 1px solid var(--line); }
  .song:first-of-type { border-top: 0; }
  .song .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--hint); }
  .song .info .title { font-size: 19px; font-weight: 500; letter-spacing: -0.005em; }
  .song .info .title.gold { color: var(--gold); }
  .song .info .meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-top: 4px; }
  .song .chords { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gold); }
  .song .chords .dot { color: var(--hint); margin: 0 4px; }
  .badge { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
  .badge.easy { background: color-mix(in oklab, var(--gold) 16%, var(--bg)); color: var(--gold); border-color: transparent; }
  .badge.mid  { background: color-mix(in oklab, var(--blue) 14%, var(--bg)); color: var(--blue); border-color: transparent; }
  .badge.hard { background: color-mix(in oklab, var(--red) 14%, var(--bg));  color: var(--red);  border-color: transparent; }
  .badge.genre { color: var(--fg); }

  .pills-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .pills-row .pill { padding: 6px 14px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line-strong); color: var(--fg); }
  .pills-row .pill.active { background: var(--gold); border-color: var(--gold); color: var(--night); }
  .pills-row .pill .mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--hint); margin-left: 8px; }
  .pills-row .pill.active .mono { color: rgba(15,15,13,.55); }

  .btns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  @media (max-width: 720px) { .btns-grid { grid-template-columns: 1fr 1fr; } }
  .btns-grid .group { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .btns-grid .group .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }

  .mood { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 240px 240px; gap: 12px; }
  @media (max-width: 900px) { .mood { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; grid-template-rows: none; } }
  @media (max-width: 480px) { .mood { grid-template-columns: 1fr 1fr; } }
  .mood-tile { position: relative; overflow: hidden; background: #2a2723; border: 1px solid var(--line); border-radius: 14px; }
  .mood-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.95); }
  .mood-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.62) 100%); z-index: 1; }
  .mood-tile .cap { position: absolute; left: 18px; bottom: 14px; right: 18px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); z-index: 2; }
  .mood-tile .cap b { color: #fff; font-weight: 500; display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; letter-spacing: -0.005em; text-transform: none; margin-bottom: 2px; }
  .mood-tile .credit { position: absolute; top: 12px; right: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 2; }
  .mt-1 { grid-column: span 3; }
  .mt-2 { grid-column: span 3; }
  .mt-3 { grid-column: span 2; }
  .mt-4 { grid-column: span 2; }
  .mt-5 { grid-column: span 2; }

  /* Tratamientos de imagen */
  .photo-treatments { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; margin-top: 36px; }
  @media (max-width: 900px) { .photo-treatments { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .photo-treatments { grid-template-columns: 1fr; } }
  .pt-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
  .pt-card .canvas { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: #1a1816; }
  .pt-card .canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pt-card .meta { padding: 14px 18px; display: flex; justify-content: space-between; align-items: baseline; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); border-top: 1px solid var(--line); }
  .pt-card .meta b { color: var(--fg); font-weight: 500; }
  .pt-1 .canvas img { filter: grayscale(1) contrast(1.06); }
  .pt-1 .canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.7) 100%); }
  .pt-1 .canvas .meta-top { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(237,235,229,.6); z-index: 2; }
  .pt-1 .canvas .body { position: absolute; bottom: 28px; left: 24px; right: 24px; z-index: 2; color: #EDEBE5; }
  .pt-1 .canvas .body .ed { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .pt-1 .canvas .body .h { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 8px; }
  .pt-1 .canvas .body .h em { font-style: normal; color: var(--gold); font-weight: 400; }
  .pt-1 .canvas .body .wm { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
  .pt-1 .canvas .body .wm i { font-style: normal; color: var(--gold); font-weight: 600; }
  .pt-2 .canvas img { filter: grayscale(1) contrast(1.05); }
  .pt-2 .canvas .accent { position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; background: var(--gold); z-index: 2; }
  .pt-2 .canvas .label { position: absolute; left: 18px; top: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); z-index: 2; }
  .pt-2 .canvas .ttl { position: absolute; left: 18px; bottom: 22px; right: 22px; font-size: 22px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: #EDEBE5; z-index: 2; margin: 0; }
  .pt-2 .canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.75) 100%); }
  .pt-3 .canvas img { filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; }
  .pt-3 .canvas { background: var(--gold); }
  .pt-3 .canvas::before { content: ""; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: lighten; z-index: 0; }
  .pt-3 .canvas .body { position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 2; }
  .pt-3 .canvas .body .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
  .pt-3 .canvas .body .ttl { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0; }

  .photo-rules { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
  @media (max-width: 720px) { .photo-rules { grid-template-columns: 1fr 1fr; } }
  .photo-rules .ru b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); font-weight: 500; margin-bottom: 8px; }
  .photo-rules .ru span { color: var(--muted); font-size: 13px; line-height: 1.55; }

  /* Iconografía UI */
  .icons-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  @media (max-width: 900px) { .icons-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 480px) { .icons-grid { grid-template-columns: repeat(3, 1fr); } }
  .ico-cell { background: var(--card); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
  .ico-cell svg { width: 32px; height: 32px; stroke: var(--fg); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ico-cell .nm { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); text-align: center; }
  .icon-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
  @media (max-width: 720px) { .icon-rules { grid-template-columns: 1fr 1fr; } }
  .icon-rules .ru { border-top: 1px solid var(--line-strong); padding-top: 14px; }
  .icon-rules .ru b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); font-weight: 500; margin-bottom: 6px; }
  .icon-rules .ru span { color: var(--muted); font-size: 13px; line-height: 1.55; }

  /* Grid + espaciado */
  .system-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; }
  @media (max-width: 900px) { .system-grid { grid-template-columns: 1fr; } }
  .sys-card { border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
  .sys-card h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); margin: 0; font-weight: 500; }
  .sys-card h4 b { color: var(--fg); margin-right: 12px; font-weight: 500; }
  .grid-vis { position: relative; aspect-ratio: 16 / 7; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .grid-vis .col { position: absolute; top: 0; bottom: 0; width: calc((100% - 11 * 1.6%) / 12); background: color-mix(in oklab, var(--gold) 22%, transparent); }
  .spacing-list { display: flex; flex-direction: column; gap: 10px; }
  .spacing-list .row { display: grid; grid-template-columns: 60px 1fr 70px; align-items: center; gap: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
  .spacing-list .row b { color: var(--fg); font-weight: 500; }
  .spacing-list .bar { height: 12px; background: var(--gold); border-radius: 2px; }
  .radii-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  @media (max-width: 720px) { .radii-row { grid-template-columns: repeat(3, 1fr); } }
  .rad { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .rad .shape { width: 100%; aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--line-strong); }
  .rad .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); text-align: center; line-height: 1.5; }
  .rad .lbl b { color: var(--fg); font-weight: 500; display: block; }

  /* Aplicaciones */
  .apps-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 24px; }
  @media (max-width: 900px) { .apps-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .apps-grid { grid-template-columns: 1fr; } }
  .app-card { border: 1px solid var(--line); background: var(--card); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
  .app-card .stage { flex: 1; padding: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface); position: relative; min-height: 320px; }
  .app-card .meta { padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); border-top: 1px solid var(--line); }
  .app-card .meta b { color: var(--fg); font-weight: 500; }

  .ig-post { width: 280px; aspect-ratio: 1 / 1; background: var(--night); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 16px 40px rgba(20,20,18,.16); }
  .ig-post .top { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,235,229,.55); display: flex; justify-content: space-between; }
  .ig-post .mid .ttl { font-size: 38px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; color: #EDEBE5; margin: 0 0 10px; }
  .ig-post .mid .ttl em { font-style: normal; color: var(--gold); font-weight: 400; }
  .ig-post .mid .sub { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .ig-post .bot { display: flex; align-items: center; justify-content: space-between; }
  .ig-post .bot .wm { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: #EDEBE5; }
  .ig-post .bot .wm i { color: var(--gold); font-style: normal; font-weight: 600; }
  .ig-post .bot .tag { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(237,235,229,.45); }

  .biz-stack { display: flex; flex-direction: column; gap: 12px; transform: rotate(-2deg); }
  .biz { width: 280px; height: 168px; border-radius: 6px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 14px 36px rgba(20,20,18,.18); }
  .biz.front { background: var(--cream); color: var(--ink); }
  .biz.back { background: var(--night); color: #EDEBE5; transform: translateX(28px); }
  .biz .wm { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; }
  .biz .wm i { font-style: normal; color: var(--gold); font-weight: 600; }
  .biz.back .wm { color: #EDEBE5; }
  .biz .who { font-size: 13px; font-weight: 500; }
  .biz .role { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
  .biz.back .role { color: rgba(237,235,229,.55); }
  .biz .det { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--muted); line-height: 1.6; }
  .biz.back .det { color: rgba(237,235,229,.6); }

  .sticker { width: 220px; height: 220px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--night); box-shadow: 0 14px 36px rgba(20,20,18,.18); transform: rotate(-6deg); position: relative; }
  .sticker::before { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(15,15,13,.25); border-radius: 50%; }
  .sticker .wm { font-size: 28px; font-weight: 500; letter-spacing: -0.025em; }
  .sticker .wm i { color: var(--night); font-style: normal; font-weight: 700; opacity: .55; }
  .sticker .tag { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; }

  .email-sig { width: 100%; max-width: 460px; padding: 22px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
  .email-sig .av { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; color: var(--gold); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .email-sig .who { font-size: 15px; font-weight: 500; }
  .email-sig .role { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 2px 0 12px; }
  .email-sig .line { height: 1px; background: var(--line); margin: 8px 0; }
  .email-sig .row { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
  .email-sig .row b { color: var(--fg); font-weight: 500; }
  .email-sig .row a { color: var(--gold); text-decoration: none; }

  .donts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 900px) { .donts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .donts { grid-template-columns: 1fr; } }
  .dont { border: 1px solid var(--line); background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 16px; aspect-ratio: 1 / 1; border-radius: 18px; }
  .dont .stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; position: relative; overflow: hidden; }
  .dont .stage .strike { position: absolute; inset: 16px; background: linear-gradient(135deg, transparent calc(50% - 1px), var(--red) 50%, transparent calc(50% + 1px)); opacity: .55; z-index: 2; }
  .dont .cap { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); border-top: 1px solid var(--line); padding-top: 14px; }
  .dont .cap b { color: var(--fg); display: block; font-weight: 500; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 13px; font-family: 'IBM Plex Sans', sans-serif; }

  footer { border-top: 1px solid var(--line); padding: 96px 0 64px; }
  footer .closer { font-size: clamp(56px, 8vw, 120px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin: 0; }
  footer .closer i { color: var(--gold); font-style: normal; font-weight: 400; }
  footer .closer .dot { color: var(--soft-gray); margin: 0 .15em; }
  footer .meta { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
  @media (max-width: 720px) { footer .meta { grid-template-columns: 1fr 1fr; } }
  footer .meta b { display: block; color: var(--fg); font-weight: 500; margin-bottom: 6px; }

/* ╔══════════════════════════════════════════════════════════
   ║ DoReSol Search.html (literal, sin modificar)
   ╚══════════════════════════════════════════════════════════ */

  :root{
    --gold:#C8A96E; --gold-hover:#B8965A; --gold-soft:#E8D9B8;
    --ink:#141412; --night:#0F0F0D; --cream:#F8F7F4;
    --warm-gray:#5C5B56; --soft-gray:#9C9B95; --surface:#F0EEE9;
    --green:#1D9E75; --blue:#185FA5; --red:#C0392B;
    --paper:var(--cream); --paper-2:var(--surface); --paper-3:#E6E3DC;
    --ink-2:#2A2620;
    --line:rgba(20,20,18,.10); --line-strong:rgba(20,20,18,.18);
    --gold-bg:color-mix(in oklab,var(--gold) 14%,transparent);
    --gold-soft:#E8D9B8;
    --muted:var(--warm-gray); --hint:var(--soft-gray);
    --shadow:0 1px 2px rgba(20,20,18,.04),0 8px 24px rgba(20,20,18,.06);
    --shadow-lg:0 2px 4px rgba(20,20,18,.04),0 24px 60px rgba(20,20,18,.18)
  }
  [data-theme="dark"]{
    --paper:var(--night); --paper-2:#1A1A17; --paper-3:#222220;
    --ink:#EDEBE5; --ink-2:#cfcabf;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
    --muted:#9A9890; --hint:#66645E;
    --gold-bg:color-mix(in oklab,var(--gold) 18%,transparent);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6)
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
  ::selection{background:var(--gold);color:var(--paper)}

  /* ------------ TOP NAV ------------ */
  .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:1440px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;gap:24px}
  .topbar-logo{font-size:22px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);line-height:1}
  .topbar-logo i{color:var(--gold);font-style:normal;font-weight:600}
  .topnav{display:flex;align-items:center;gap:22px;flex:1;font-size:14px;color:var(--muted)}
  .topnav a.active{color:var(--ink);font-weight:500}
  .topnav a.premium{color:var(--gold);display:inline-flex;align-items:center;gap:6px}
  .top-actions{display:flex;align-items:center;gap:12px}
  .search-trigger{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);font-size:13px;cursor:pointer;background:transparent;transition:all .15s}
  .search-trigger:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
  .search-trigger svg{width:14px;height:14px}
  .search-trigger .lbl{padding-right:36px}
  .search-trigger .kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;border:1px solid var(--line-strong);padding:2px 6px;border-radius:4px;color:var(--hint);letter-spacing:.05em}
  .lang{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line-strong);border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hint)}
  .lang a{padding:4px 8px;border-radius:999px;color:var(--hint);cursor:pointer}
  .lang a.active{background:var(--ink);color:var(--paper)}
  .theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;background:transparent}
  .theme-toggle:hover{color:var(--ink)}
  .theme-toggle svg{width:16px;height:16px}
  .btn-pill{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer}
  .btn-pill.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn-pill.gold{background:var(--gold);color:#fff;border-color:var(--gold)}

  /* ------------ VIEW SWITCHER ------------ */
  .view-switcher{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:200;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px;display:inline-flex;gap:2px;box-shadow:var(--shadow-lg);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .view-switcher button{padding:10px 18px;border-radius:999px;color:rgba(255,255,255,.55);transition:all .2s}
  .view-switcher button.active{background:var(--gold);color:#fff;font-weight:600}
  .view-switcher button:hover:not(.active){color:#fff}

  /* =====================================================
     OVERLAY (command palette style search)
     ===================================================== */
  .overlay{position:fixed;inset:0;z-index:100;display:none;background:color-mix(in srgb,#1a1814 78%,transparent);backdrop-filter:blur(8px);padding:80px 24px 40px;overflow-y:auto;animation:fadeIn .18s ease}
  .overlay.open{display:flex;justify-content:center;align-items:flex-start}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .overlay-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .15s}
  .overlay-close:hover{background:rgba(255,255,255,.14);color:#fff}
  .overlay-close svg{width:18px;height:18px}

  .palette{width:100%;max-width:720px;display:flex;flex-direction:column;gap:14px;animation:slideDown .25s cubic-bezier(.2,.8,.2,1)}
  @keyframes slideDown{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}

  .palette-input{background:var(--paper);border-radius:18px;display:flex;align-items:center;gap:14px;padding:18px 20px;box-shadow:var(--shadow-lg);position:relative}
  .palette-input svg.icon{width:20px;height:20px;color:var(--gold);flex-shrink:0}
  .palette-input input{flex:1;border:none;outline:none;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:20px;font-weight:400;color:var(--ink);background:transparent;letter-spacing:-.015em}
  .palette-input input::placeholder{color:var(--hint)}
  .palette-input .clear{width:30px;height:30px;border-radius:50%;background:var(--paper-3);color:var(--muted);display:none;align-items:center;justify-content:center}
  .palette-input.has-value .clear{display:inline-flex}
  .palette-input .clear svg{width:13px;height:13px}
  .palette-input .live-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint);letter-spacing:.08em;text-transform:uppercase;display:none}
  .palette-input.has-value .live-count{display:inline-block}

  /* Quick chips (empty state) */
  .palette-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 4px}
  .chip{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:13px;border:1px solid rgba(255,255,255,.12);transition:all .15s;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);color:#fff}
  .chip svg{width:12px;height:12px;opacity:.7}
  .chip.cat-instrument{color:var(--gold-soft)}
  .chip.cat-instrument svg{opacity:1}

  /* Results panel */
  .palette-panel{background:var(--paper);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;display:none;flex-direction:column;max-height:calc(100vh - 220px);overflow-y:auto}
  .palette.has-query .palette-panel{display:flex}
  .palette.has-query .palette-chips{display:none}
  .palette.has-query .palette-recents{display:none}

  .palette-section{padding:18px 22px 14px}
  .palette-section + .palette-section{border-top:1px solid var(--line)}
  .palette-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint)}
  .palette-section-head .count{font-weight:500}
  .palette-section-head .lbl{display:inline-flex;align-items:center;gap:8px}
  .palette-section-head .lbl::before{content:"";width:14px;height:1px;background:var(--gold);display:inline-block}

  .res-row{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:background .12s;position:relative}
  .res-row:hover,.res-row.kb-active{background:var(--paper-2)}
  .res-row.kb-active::before{content:"";position:absolute;left:-2px;top:10px;bottom:10px;width:2px;background:var(--gold);border-radius:2px}
  .res-thumb{width:44px;height:44px;border-radius:8px;background:var(--paper-3);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:18px;font-weight:600;color:var(--gold)}
  .res-thumb.circle{border-radius:50%}
  .res-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .res-thumb .play{position:absolute;inset:0;background:rgba(26,24,20,.55);color:#fff;display:none;align-items:center;justify-content:center}
  .res-row:hover .res-thumb .play{display:flex}
  .res-thumb .play svg{width:16px;height:16px}
  .res-body{flex:1;min-width:0}
  .res-title{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .res-title mark{background:transparent;color:var(--gold);font-weight:600;padding:0}
  .res-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px;letter-spacing:.02em}
  .res-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
  .res-meta mark{background:transparent;color:var(--gold);font-weight:600}
  .res-tags{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
  .tag{padding:3px 10px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;background:var(--gold-bg);color:var(--gold);text-transform:lowercase}
  .tag.diff-easy{background:#e6efde;color:#5d7244}
  .tag.diff-int{background:var(--gold-bg);color:var(--gold)}
  .tag.diff-hard{background:#f1dcd8;color:#a85a4d}
  .tag.kind{background:var(--paper-3);color:var(--muted);text-transform:uppercase}
  [data-theme="dark"] .tag.diff-easy{background:#22301c;color:#a0bf85}
  [data-theme="dark"] .tag.diff-hard{background:#3a221d;color:#d8a097}
  .res-key{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--hint);padding:3px 8px;border:1px solid var(--line-strong);border-radius:5px}
  .res-arrow{width:18px;height:18px;color:var(--hint);opacity:0;transition:opacity .12s}
  .res-row:hover .res-arrow,.res-row.kb-active .res-arrow{opacity:1}

  .palette-see-all{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);cursor:pointer}
  .palette-see-all:hover{color:var(--ink)}
  .palette-see-all svg{width:13px;height:13px}

  .palette-recents{padding:6px 0 0;display:flex;flex-direction:column;gap:6px}
  .recents-head{display:flex;align-items:center;justify-content:space-between;padding:0 22px 8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .recents-head .clear{color:rgba(255,255,255,.55);cursor:pointer;transition:color .15s}
  .recents-head .clear:hover{color:#fff}
  .palette-recents .res-row{margin:0 14px;color:rgba(255,255,255,.92)}
  .palette-recents .res-row .res-title{color:rgba(255,255,255,.92)}
  .palette-recents .res-row .res-meta{color:rgba(255,255,255,.55)}
  .palette-recents .res-row:hover{background:rgba(255,255,255,.08)}
  .palette-recents .res-row .res-arrow{color:rgba(255,255,255,.6)}
  .palette-recents .res-thumb{background:rgba(255,255,255,.08);color:var(--gold-soft)}
  .palette-recents .recent-time{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.4)}

  /* Footer with keyboard hints */
  .palette-foot{display:flex;align-items:center;justify-content:center;gap:22px;padding:6px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.55)}
  .palette-foot .k{display:inline-flex;align-items:center;gap:6px}
  .palette-foot .k kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:3px 7px;border-radius:5px;color:rgba(255,255,255,.85);min-width:22px;text-align:center}

  /* Empty state */
  .palette-empty{padding:48px 24px;text-align:center;color:var(--hint)}
  .palette-empty .glyph{font-family:'IBM Plex Mono',monospace;font-size:36px;color:var(--gold);font-style:normal;line-height:1;margin-bottom:14px;letter-spacing:.05em}
  .palette-empty .ttl{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:20px;color:var(--ink);margin-bottom:6px}
  .palette-empty .sub{font-size:13px;max-width:340px;margin:0 auto}

  /* =====================================================
     FULL RESULTS PAGE
     ===================================================== */
  .results-page{display:none;max-width:1280px;margin:0 auto;padding:40px 32px 96px}
  body.view-results .results-page{display:block}
  body.view-overlay .overlay{display:flex;justify-content:center;align-items:flex-start}
  body.view-overlay-empty .overlay{display:flex;justify-content:center;align-items:flex-start}

  .results-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:32px}
  .results-form{display:flex;gap:10px;align-items:center}
  .results-input{flex:1;display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;border:1px solid var(--line-strong);background:var(--paper);box-shadow:var(--shadow);transition:border-color .15s}
  .results-input:focus-within{border-color:var(--ink)}
  .results-input svg{width:18px;height:18px;color:var(--gold)}
  .results-input input{flex:1;border:none;outline:none;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:20px;color:var(--ink);background:transparent}
  .results-input input::placeholder{color:var(--hint)}
  .results-input .clear{width:26px;height:26px;border-radius:50%;background:var(--paper-3);color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
  .results-input .clear svg{width:11px;height:11px;color:var(--muted)}
  .btn-search{padding:0 28px;height:54px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;letter-spacing:.02em;align-self:stretch}
  .btn-search:hover{background:var(--ink-2)}

  .results-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .results-summary .count-block{display:flex;align-items:baseline;gap:12px}
  .results-summary .num{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:32px;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1}
  .results-summary .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.06em}
  .results-summary .lbl b{color:var(--ink);font-weight:500}

  .results-tabs{display:inline-flex;background:var(--paper-2);padding:4px;border-radius:999px;border:1px solid var(--line)}
  .results-tabs button{padding:8px 16px;border-radius:999px;font-size:13px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
  .results-tabs button.active{background:var(--ink);color:var(--paper)}
  .results-tabs button .tag-count{font-family:'IBM Plex Mono',monospace;font-size:10px;background:rgba(255,255,255,.12);padding:2px 7px;border-radius:999px;letter-spacing:.04em}
  .results-tabs button:not(.active) .tag-count{background:var(--paper-3);color:var(--hint)}

  /* Filter rail */
  .results-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
  .filter-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:24px}
  .filter-block h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
  .filter-block h4 span{color:var(--gold)}
  .filter-list{display:flex;flex-direction:column;gap:2px}
  .filter-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;transition:background .12s}
  .filter-item:hover{background:var(--paper-2)}
  .filter-item.active{background:var(--ink);color:var(--paper)}
  .filter-item .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hint)}
  .filter-item.active .num{color:rgba(255,255,255,.55)}
  .filter-chips{display:flex;flex-wrap:wrap;gap:6px}
  .filter-chip{padding:5px 10px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;border:1px solid var(--line-strong);color:var(--muted);cursor:pointer;background:transparent}
  .filter-chip:hover{border-color:var(--ink);color:var(--ink)}
  .filter-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .filter-chip.gold.active{background:var(--gold);border-color:var(--gold);color:#fff}
  .applied-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 4px}
  .applied-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 11px;border-radius:999px;background:var(--gold-bg);color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em}
  .applied-tag button{width:18px;height:18px;border-radius:50%;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center}
  .applied-tag button svg{width:9px;height:9px}
  .applied-tag.clear-all{background:transparent;color:var(--muted);padding-right:11px;text-decoration:underline}

  /* Results column */
  .results-col{display:flex;flex-direction:column;gap:48px}
  .res-block-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .res-block-head h3{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
  .res-block-head .ct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}
  .res-block-head .sort{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:6px}
  .res-block-head .sort:hover{background:var(--paper-2);color:var(--ink)}
  .res-block-head .sort svg{width:11px;height:11px}

  /* Songs list */
  .songs-list{display:flex;flex-direction:column}
  .song-row{display:grid;grid-template-columns:24px 56px 1fr auto auto auto;gap:18px;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .12s}
  .song-row:hover{background:var(--paper-2)}
  .song-row .idx{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--hint);text-align:center}
  .song-row:hover .idx{color:var(--gold)}
  .song-thumb{width:56px;height:56px;border-radius:8px;background:var(--paper-3);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:22px;font-weight:600;color:var(--gold);position:relative}
  .song-thumb img{width:100%;height:100%;object-fit:cover}
  .song-thumb .play-ov{position:absolute;inset:0;background:rgba(26,24,20,.6);color:#fff;display:none;align-items:center;justify-content:center}
  .song-row:hover .song-thumb .play-ov{display:flex}
  .song-thumb .play-ov svg{width:18px;height:18px}
  .song-info{min-width:0}
  .song-title{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .song-title mark{background:transparent;color:var(--gold);font-weight:600;padding:0}
  .song-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
  .song-sub mark{background:transparent;color:var(--gold);font-weight:600}
  .song-row .duration{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);min-width:42px;text-align:right}
  .icon-action{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--hint);opacity:0;transition:all .15s}
  .song-row:hover .icon-action{opacity:1}
  .icon-action:hover{background:var(--paper-3);color:var(--ink)}
  .icon-action svg{width:14px;height:14px}

  /* Artists row */
  .artists-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .artist-card{text-align:center;padding:24px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);transition:all .2s;cursor:pointer}
  .artist-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow)}
  .artist-thumb{width:128px;height:128px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:var(--paper-3);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:48px;font-weight:500;color:var(--gold);position:relative;filter:grayscale(.2)}
  .artist-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .2s}
  .artist-card:hover .artist-thumb img{filter:grayscale(0) contrast(1)}
  .artist-thumb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
  .artist-name{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
  .artist-name mark{background:transparent;color:var(--gold);font-weight:600;padding:0}
  .artist-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.04em}
  .artist-meta b{color:var(--ink);font-weight:500}

  /* Albums grid */
  .albums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .album-card{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);display:flex;gap:14px;align-items:center;transition:all .15s;cursor:pointer}
  .album-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
  .album-thumb{width:64px;height:64px;border-radius:8px;flex-shrink:0;background:var(--paper-3);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:24px;color:var(--gold);font-weight:600}
  .album-thumb img{width:100%;height:100%;object-fit:cover}
  .album-info{min-width:0;flex:1}
  .album-title{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .album-title mark{background:transparent;color:var(--gold);font-weight:600;padding:0}
  .album-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
  .album-sub mark{background:transparent;color:var(--gold);font-weight:600}

  /* Empty state */
  .results-empty{display:none;text-align:center;padding:80px 24px}
  .results-empty .glyph{font-family:'IBM Plex Mono',monospace;font-size:48px;color:var(--gold);font-style:normal;line-height:1;margin-bottom:18px;letter-spacing:.04em}
  .results-empty h2{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
  .results-empty p{color:var(--muted);font-size:15px;max-width:420px;margin:0 auto 24px}
  .results-empty .sugs{display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:420px}
  .results-empty .sugs .chip{background:var(--paper-2);color:var(--ink);border-color:var(--line)}

  /* Notes panel */
  .ds-notes{position:fixed;top:80px;left:24px;width:240px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--hint);line-height:1.7;letter-spacing:.02em;z-index:30;border-left:1px solid var(--gold);padding:6px 0 6px 14px}
  .ds-notes b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
  @media(max-width:1500px){.ds-notes{display:none}}

  @media(max-width:980px){
    .results-grid{grid-template-columns:1fr}
    .filter-rail{position:static}
    .artists-row{grid-template-columns:repeat(2,1fr)}
    .albums-grid{grid-template-columns:repeat(2,1fr)}
  }