:root {
      color-scheme: dark;
      --bg:      #0d0d0d;
      --surface: #161616;
      --border:  #2a2a2a;
      --text:    #e8e8e8;
      --muted:   #666;
      --accent:  #c8a96e;
      --hover:   #1e1e1e;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: "Georgia", "Times New Roman", serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4rem 1.5rem 6rem;
    }

    .container { width: 100%; max-width: 560px; }

    /* ── Header ── */
    header { margin-bottom: 3.5rem; }

    header h1 { margin-bottom: 1.2rem; }

    header p {
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--muted);
    }

    /* ── Songs heading row + filter ── */
    .songs-heading-row {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 0.6rem;
    }

    /* ── Albums heading row + filter ── */
    .albums-heading-row {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    /* Shared heading style for songs/albums rows */
    .songs-heading-row h1,
    .albums-heading-row h2 {
      font-size: 1.25rem;
      font-weight: normal;
      letter-spacing: 0.12em;
      text-transform: lowercase;
      color: var(--accent);
      min-width: 5.5rem;
    }

    .lang-filter {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }

    .lang-filter-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      padding: 0.15em 0.55em;
      border-radius: 3px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }

    .lang-filter-btn:hover { color: var(--text); border-color: #555; }
    .lang-filter-btn.active { color: var(--accent); border-color: var(--accent); }

    /* ── Album strip ── */
    .album-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      margin-bottom: 2.5rem;
    }

    .album-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-align: center;
    }

    .album-card-cover {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--border);
      display: block;
    }

    .album-card-cover--placeholder {
      background: var(--surface);
    }

    .album-card-name {
      font-size: 0.85rem;
      color: var(--text);
    }

    .album-card-year {
      font-size: 0.75rem;
      color: var(--muted);
    }

    /* ── Song list ── */
    .songs { list-style: none; }

    .songs li { border-top: 1px solid var(--border); }
    .songs li:last-child { border-bottom: 1px solid var(--border); }

    /* ── details / summary reset ── */
    .song-details { }
    .song-details > summary { list-style: none; cursor: pointer; }
    .song-details > summary::-webkit-details-marker { display: none; }

    .song-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0.25rem;
      transition: background 0.15s;
      border-radius: 2px;
      user-select: none;
    }

    .song-row:hover { background: var(--hover); }

    .song-title {
      font-size: 1rem;
      color: var(--text);
      flex: 1;
      transition: color 0.15s;
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    .song-title::before {
      content: "▸";
      font-size: 0.7rem;
      color: var(--muted);
      transition: transform 0.2s, color 0.15s;
      display: inline-block;
    }

    .song-details[open] .song-title::before {
      transform: rotate(90deg);
      color: var(--accent);
    }

    .song-row:hover .song-title { color: var(--accent); }

    .song-actions {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 0;
    }

    /* ── Icon button base ── */
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      border-radius: 4px;
      text-decoration: none;
      position: relative;
      transition: opacity 0.15s;
    }

    .icon-btn svg { display: block; }

    /* ── SoundCloud play button ── */
    .play-btn {
      background: none;
      padding: 0;
      width: 26px;
      height: 26px;
      color: #777;
      transition: color 0.15s;
    }

    .play-btn:hover { color: #ff5500; }

    /* ── Language / PDF badge ── */
    .lang-btn {
      background: var(--border);
      color: var(--muted);
      font-family: monospace;
      font-size: 0.65rem;
      letter-spacing: 0.05em;
      padding: 0 6px;
      border: 1px solid #333;
      height: 20px;
      flex-shrink: 0;
    }

    .lang-btn:hover { color: var(--accent); border-color: var(--accent); }

    /* ── Original-song subtext ── */
    .song-original {
      font-size: 0.68rem;
      font-family: sans-serif;
      font-style: italic;
      color: var(--muted);
      opacity: 0.6;
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 0.25em;
    }
    .lang-tag {
      font: normal 0.6rem monospace; letter-spacing: 0.05em;
      border: 1px solid var(--muted); border-radius: 3px; padding: 0 0.3em; line-height: 1.4;
    }

    /* ── Tooltip ── */
    .icon-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      right: 0;
      background: #1a1a1a;
      color: #ccc;
      font-size: 0.7rem;
      font-family: sans-serif;
      padding: 0.3em 0.6em;
      border-radius: 3px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.15s, transform 0.15s;
      border: 1px solid #333;
    }

    .icon-btn:hover::after { opacity: 1; transform: translateY(0); }

    /* ── Lyrics ── */
    .lyrics {
      padding: 0.75rem 0.25rem 1.25rem 1.4rem;
      border-top: 1px solid var(--border);
    }

    .sc-embed {
      display: block;
      width: 100%;
      height: 166px;
      margin-bottom: 0.75rem;
      border-radius: 4px;
      overflow: hidden;
      border: none;
    }

    .lyrics-credits {
      font-family: sans-serif;
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: 0.75rem;
    }

    .lyrics-credits a {
      color: var(--muted);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .lyrics-credits a:hover { color: var(--accent); }

    .lyrics-lang {
      font-family: monospace;
      font-size: 0.7rem;
      color: var(--border);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin: 1rem 0 0.4rem;
    }

    /* Lyrics as on the song page: sections, chorus bar, labels, automatic-translation note */
    .lyrics .sheet { font-size: 0.95rem; line-height: 1.5; color: var(--text); }
    .lyrics .sec { margin-bottom: 1.1rem; }
    .lyrics .sec--chorus { padding-left: 0.8rem; border-left: 2px solid var(--accent); }
    .lyrics .sec-label {
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: lowercase;
      color: var(--accent); margin-bottom: 0.2rem;
    }
    .lyrics .sec--ref .sec-label { font-style: italic; font-size: 0.8rem; letter-spacing: 0.04em; }
    .lyrics .gap { height: 0.7rem; }
    .lyrics .cmt { color: var(--muted); font-size: 0.8rem; margin: 0.2rem 0; }
    .lyrics .cmt--i { font-style: italic; }
    .lyrics .auto-note {
      margin: 0 0 1rem; padding: 0.45rem 0.7rem;
      border-left: 3px solid var(--accent); background: var(--surface);
      font-size: 0.78rem; font-style: italic; color: var(--text);
    }

    /* ── Author ── */
    .author {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .author-left {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .author img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      filter: grayscale(30%);
    }

    .author-name {
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* ── Social links ── */
    .social {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-left: auto;
    }

    .social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      overflow: hidden;
      border-radius: 6px;
      color: var(--muted);
      text-decoration: none;
      border: 1px solid var(--border);
      transition: color 0.15s, border-color 0.15s;
    }

    .social a:hover { color: var(--text); border-color: #555; }
    .social a svg { display: block; }

    /* ── Footer ── */
    footer {
      margin-top: 4rem;
      font-size: 0.75rem;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    footer a {
      color: var(--muted);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    footer a:hover { color: var(--accent); }

    .footer-made {
      margin-top: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .footer-tool {
      display: inline-flex;
      align-items: center;
      gap: 0.3em;
      text-decoration: none;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0.15em 0.5em;
      font-size: 0.7rem;
      font-family: sans-serif;
      transition: color 0.15s, border-color 0.15s;
    }

    .footer-tool:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

    .footer-sep { opacity: 0.3; }

    /* ── UI language switch, filters, album pages ── */
    .tagline-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
    .uilangs { font-family: monospace; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
    .uilangs a { color: var(--muted); text-decoration: none; }
    .uilangs a:hover { color: var(--text); }
    .uilangs .on { color: var(--accent); }
    .filter-label { font-size: 0.72rem; font-style: italic; color: var(--muted); margin-right: 0.2rem; cursor: help; }
    .sc-logo { opacity: 0.6; filter: grayscale(20%); display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
    a.album-card { text-decoration: none; }
    a.album-card:hover .album-card-name { color: var(--accent); }
    .top-nav { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; margin-bottom: 2.5rem; }
    .top-nav > a { color: var(--muted); text-decoration: none; }
    .top-nav > a:hover { color: var(--text); }
    .album-head { display: flex; gap: 1.4rem; align-items: center; margin-bottom: 2.5rem; }
    .album-cover { width: 140px; height: 140px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
    .album-year { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.08em; }
    .album-title { font-size: 1.8rem; font-weight: normal; margin: 0.2rem 0 0.3rem; }
    .album-author { font-size: 0.9rem; color: var(--muted); }
    @media (max-width: 480px) {
      .album-cover { width: 96px; height: 96px; }
      .album-title { font-size: 1.4rem; }
      .tagline-row { flex-direction: column; }
    }
    .footer-made { flex-wrap: wrap; row-gap: 0.4rem; }
    .footer-tool { white-space: nowrap; }
    .songbook-btn {
      margin-left: auto; align-self: center; white-space: nowrap;
      font-family: monospace; font-size: 0.72rem; letter-spacing: 0.05em; text-decoration: none;
      color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0.3em 0.7em;
      transition: background 0.15s, color 0.15s;
    }
    .songbook-btn:hover { background: var(--accent); color: var(--bg); }
    .songbook-btns { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1rem; }
    .songbook-btns .songbook-btn { margin-left: 0; }
    @media (max-width: 480px) { .songs-heading-row { flex-wrap: wrap; } }
    @media (max-width: 560px) {
      .song-row { flex-wrap: wrap; row-gap: 0.5rem; }
      .song-title { flex: 1 1 100%; flex-wrap: wrap; }
      .song-original { white-space: normal; }
      .song-actions { margin-left: auto; }
    }

    /* ── About ── */
    a.author-left { text-decoration: none; }
    a.author-left:hover .author-name { color: var(--accent); }
    .about { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .about-photo { width: 100%; max-width: 360px; height: auto; border-radius: 6px; border: 1px solid var(--border); }
    .about-name { font-size: 1.8rem; font-weight: normal; margin-top: 0.6rem; }
    .about-place { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; }
    .about-bio { font-size: 1rem; line-height: 1.7; color: var(--text); margin: 0.6rem 0 0.8rem; }
    .about-sc { display: inline-flex; align-items: center; gap: 0.5em; margin-left: 0; align-self: flex-start; }

    /* ── Light theme (screen only) ── */
    @media screen {
      :root[data-theme="light"] {
        color-scheme: light;
        --bg:      #faf8f4;
        --surface: #f1ede5;
        --border:  #dcd4c6;
        --text:    #1d1b18;
        --muted:   #7a7266;
        --accent:  #8c6a2c;
        --hover:   #f1ede5;
      }
    }
    .lang-btn { border-color: var(--border); }
    [data-theme="light"] .sc-logo { filter: invert(1) grayscale(100%); }

/* ── Theme switch (☀ / ☾ next to the UI language switch) ── */
.theme-toggle {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 0.95rem; line-height: 1; padding: 0 0 0 0.6rem; vertical-align: baseline;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle .to-dark { display: none; }
[data-theme="light"] .theme-toggle .to-light { display: none; }
[data-theme="light"] .theme-toggle .to-dark { display: inline; }

    /* ── Two columns on desktop (home, album pages): who / filters on the left, songs on the right ── */
    body.wide { padding: 2rem 1.5rem 4rem; }
    .layout2 {
      width: 100%; max-width: 1000px;
      display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: start;
    }
    .side {
      position: sticky; top: 1.5rem;
      display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
    }
    .side-author { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; text-decoration: none; }
    .side-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; filter: grayscale(20%); }
    .side-name { font-size: 1.3rem; color: var(--text); }
    .side-author:hover .side-name { color: var(--accent); }
    .side-tagline { font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
    .side .social { margin-left: 0; }
    .side .songbook-btns { flex-direction: column; align-self: stretch; justify-content: flex-start; margin: 0.25rem 0 0; }
    .side .songbook-btns .songbook-btn { text-align: center; align-self: stretch; margin-left: 0; }
    .side-h {
      margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: lowercase;
      color: var(--accent); cursor: default;
    }
    .side .lang-filter { flex-wrap: wrap; }
    .album-list { display: flex; flex-direction: column; gap: 0.3rem; align-self: stretch; }
    .album-row { display: flex; align-items: center; gap: 0.3rem; }
    .album-item {
      flex: 1; display: flex; align-items: center; gap: 0.6rem; text-align: left;
      background: none; border: 1px solid transparent; border-radius: 4px; padding: 0.25rem;
      color: var(--text); font: 0.85rem "Georgia", serif; cursor: pointer;
    }
    .album-item img { width: 36px; height: 36px; border-radius: 3px; object-fit: cover; border: 1px solid var(--border); }
    .album-item small { display: block; font-size: 0.72rem; color: var(--muted); }
    .album-item:hover { background: var(--hover); }
    .album-item.active { border-color: var(--accent); color: var(--accent); }
    .album-all { padding: 0.35rem 0.5rem; color: var(--muted); }
    .album-go { color: var(--muted); text-decoration: none; padding: 0.3rem 0.4rem; border-radius: 4px; }
    .album-go:hover { color: var(--accent); background: var(--hover); }
    .main { min-width: 0; }
    .main-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
    .main-head h1, .main-head h2 {
      font-size: 1.25rem; font-weight: normal; letter-spacing: 0.12em; text-transform: lowercase; color: var(--accent);
    }
    .main-head small { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }
    .side-back { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
    .side-back:hover { color: var(--text); }
    .side .album-cover { width: 100%; height: auto; aspect-ratio: 1; margin: 0.4rem 0 0.2rem; }
    .side .album-title { margin: 0; font-size: 1.6rem; }

    /* Phones and narrow windows: one column, compact header */
    @media (max-width: 800px) {
      body.wide { padding: 1.2rem 1rem 3rem; }
      .layout2 { display: block; }
      .side { position: static; display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.55rem; margin-bottom: 1.4rem; }
      .side > * { grid-column: 1 / -1; }
      .side-author { grid-column: 1 / -1; flex-direction: row; align-items: center; }
      .side-photo { width: 56px; height: 56px; }
      .side-name { font-size: 1.1rem; }
      .side .songbook-btns { flex-direction: row; flex-wrap: wrap; }
      .album-list { flex-direction: row; flex-wrap: wrap; }
      .album-row { flex: 0 0 auto; }
      .album-item { flex: 0 0 auto; }
      .side .album-cover { width: 140px; }
      .side .songbook-btns .songbook-btn { align-self: auto; }
      .album-all { align-self: center; }
      .album-item img { width: 28px; height: 28px; }
      .side-h { margin-top: 0.3rem; }
    }