/* ═══════════════════════════════════════════
   MUSICAL-SCALE-IMPROMPTU — dümdüz
   white page, black helvetica, thin gray lines.
   rainbow lives only as text color on the theory chips.
   pink = your selections. one object on the desk: the pink ipod.
   ═══════════════════════════════════════════ */

:root {
      --bg: #ffffff;
      --fg: #000000;
      --mut: #555555;
      --line: #d9d9d9;
      --line-strong: #999999;
      --pink: #e91e90;
      --pink-deep: #ad1457;
      --font: Helvetica, Arial, sans-serif;
}

.dark-mode {
      --bg: #131313;
      --fg: #f2f2f2;
      --mut: #a5a5a5;
      --line: #333333;
      --line-strong: #666666;
      --pink: #f0439f;
      --pink-deep: #c2186b;
}

/* flat rainbow, readable on white */
:root {
      --r1: hsl(335 75% 42%);
      --r2: hsl(15 80% 42%);
      --r3: hsl(42 90% 33%);
      --r4: hsl(145 65% 30%);
      --r5: hsl(192 85% 30%);
      --r6: hsl(248 65% 48%);
      --r7: hsl(283 55% 42%);
}

body.dark-mode {
      --r1: hsl(335 85% 68%);
      --r2: hsl(15 90% 66%);
      --r3: hsl(42 95% 60%);
      --r4: hsl(145 60% 58%);
      --r5: hsl(192 80% 60%);
      --r6: hsl(248 85% 74%);
      --r7: hsl(283 70% 70%);
}

* { box-sizing: border-box; }

html {
      background: var(--bg);
}

body {
      font-family: var(--font);
      font-weight: 400;
      margin: 0;
      padding: 0 20px 240px;
      color: var(--fg);
      background: transparent;
      line-height: 1.5;
      font-size: 15px;
}

.container { max-width: 1080px; margin: 0 auto; }
.hidden { display: none !important; }
::selection { background: #000; color: #fff; }
button { font-family: var(--font); font-weight: 400; font-size: inherit; }
a { color: var(--fg); }

:is(button, a, .chord-card, .prog-common-item, .blog-card, .player-track):focus-visible {
      outline: 2px solid #000;
      outline-offset: 2px;
}

/* ── nav: one line, black text, pink active ── */
.plainnav {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      max-width: 1080px;
      margin: 0 auto;
      padding: 18px 0 10px;
      border-bottom: 1px solid var(--fg);
}

.brand { font-size: 0.95rem; }

.plainnav-links { display: flex; align-items: baseline; gap: 18px; }

.plainnav-links a {
      text-decoration: none;
      color: var(--fg);
      font-size: 0.9rem;
}

.plainnav-links a:hover { color: var(--mut); }

.theme-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      padding: 0;
}

/* ── intro ── */
.intro { margin: 22px 0 16px; }

.intro h1 {
      font-size: 1.5rem;
      font-weight: 400;
      margin: 0 0 4px;
}

.intro h1 em { font-style: normal; }

.intro p { margin: 0; color: var(--mut); font-size: 0.92rem; }

/* ── workbench: instrument left, key right ── */
.workbench {
      display: flex;
      gap: 24px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 16px 0;
}

.bench-left { flex: 1; min-width: 0; }

.bench-controls {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
}

.pick-button { display: flex; gap: 14px; }

.pick {
      background: none;
      border: none;
      padding: 2px 0;
      font-size: 1.1rem;
      color: var(--mut);
      cursor: pointer;
}

.pick:hover { color: var(--fg); }
.pick.active { color: var(--fg); }

.octave-selector {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--mut);
}

.octave-btn {
      background: none;
      border: 1px solid var(--line-strong);
      width: 26px;
      height: 26px;
      padding: 0;
      font-size: 0.8rem;
      color: var(--mut);
      cursor: pointer;
}

.octave-btn:hover { color: var(--fg); border-color: var(--fg); }
.octave-btn.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ── piano: stark, flat ── */
.piano-section, .guitar-section { margin-top: 14px; }

.piano-container {
      display: block;
      width: fit-content;
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid var(--fg);
      padding: 6px;
}

.keys { position: relative; display: flex; }
.white-keys { display: flex; flex-wrap: nowrap; }

.white-key {
      background: #fff;
      border: 1px solid #000;
      margin-right: -1px;
      color: #777;
      cursor: pointer;
      font-size: 11px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 7px;
}

.white-key:hover { background: #f2f2f2; }

.black-keys { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }

.black-key {
      position: absolute;
      background: #000;
      border: 1px solid #000;
      color: #bbb;
      cursor: pointer;
      pointer-events: auto;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 5px;
}

.black-key:hover { background: #333; }

.white-key.scale { background: #efefef; }
.black-key.scale { background: #4a4a4a; }

.white-key.root, .black-key.root {
      background: var(--fg);
      color: var(--bg);
}

.dark-mode .white-key.root { background: #fff; color: #000; }

/* pressed notes wear damla's rainbow */
.white-key.selected, .black-key.selected, .fret-dot.selected {
      background: var(--note-c, var(--pink)) !important;
      border-color: #000 !important;
      color: #fff !important;
}

.white-key.keyboard-active, .black-key.keyboard-active {
      background: var(--note-c, var(--pink)) !important;
      color: #fff !important;
}

/* ── guitar ── */
.guitar-strings {
      width: 100%;
      max-width: 840px;
      border: 1px solid var(--fg);
      padding: 12px 8px;
}

.guitar-string { position: relative; height: 34px; display: flex; align-items: center; width: 100%; }

.string-line {
      position: absolute;
      left: 6px;
      right: 6px;
      height: 2px;
      background: var(--line-strong);
      top: 50%;
      transform: translateY(-50%);
}

.guitar-string:nth-child(5) .string-line,
.guitar-string:nth-child(6) .string-line { height: 1px; }

.fret-dot {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--bg);
      border: 1px solid var(--line-strong);
      cursor: pointer;
      font-size: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      top: 50%;
      transform: translateY(-50%);
      color: var(--mut);
}

.fret-dot:hover { border-color: var(--fg); color: var(--fg); }
.fret-dot.scale { background: #efefef; color: #000; }
.dark-mode .fret-dot.scale { background: #4a4a4a; color: #fff; }
.fret-dot.root { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.fret-dot[data-fret="0"] { border-radius: 0; width: 32px; }

.fret-dot[data-fret="0"] { left: 1.5%; }
.fret-dot[data-fret="1"] { left: 13%; }
.fret-dot[data-fret="2"] { left: 20.5%; }
.fret-dot[data-fret="3"] { left: 28%; }
.fret-dot[data-fret="4"] { left: 35.5%; }
.fret-dot[data-fret="5"] { left: 43%; }
.fret-dot[data-fret="6"] { left: 50.5%; }
.fret-dot[data-fret="7"] { left: 58%; }
.fret-dot[data-fret="8"] { left: 65.5%; }
.fret-dot[data-fret="9"] { left: 73%; }
.fret-dot[data-fret="10"] { left: 80.5%; }
.fret-dot[data-fret="11"] { left: 88%; }
.fret-dot[data-fret="12"] { left: 95%; }

/* ── selected notes ── */
.selected-notes-bar {
      display: flex;
      align-items: baseline;
      gap: 10px;
      border-top: 1px solid var(--line);
      margin-top: 14px;
      padding-top: 10px;
      font-size: 0.9rem;
}

.bar-label { color: var(--mut); font-size: 0.85rem; }


.clear-btn {
      margin-left: auto;
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--mut);
      font-size: 0.8rem;
      padding: 3px 12px;
      cursor: pointer;
}

.clear-btn:hover { color: var(--fg); border-color: var(--fg); }

/* ── rail ── */
.bench-rail {
      width: 250px;
      min-width: 250px;
      border-left: 1px solid var(--line);
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: flex-start;
      position: sticky;
      top: 14px;
}

.rail-label { font-size: 1.05rem; color: #000; }
.dark-mode .rail-label { color: #fff; }

.key-current {
      background: var(--fg);
      color: var(--bg);
      font-size: 1.3rem;
      line-height: 1.25;
      padding: 12px 14px;
}

.key-current.empty {
      background: transparent;
      border: 1px dashed var(--line-strong);
      color: var(--mut);
      font-size: 0.88rem;
      font-style: italic;
}

.keys-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.key-btn {
      background: none;
      border: 1px solid var(--line-strong);
      padding: 4px 9px;
      cursor: pointer;
      text-align: left;
      color: var(--mut);
      font-size: 0.6rem;
}

.key-btn .key-name { font-size: 0.95rem; color: var(--fg); line-height: 1.2; }
.key-btn:hover { border-color: var(--fg); }
.key-btn.active { border-color: #000; border-width: 2px; padding: 3px 8px; }
.dark-mode .key-btn.active { border-color: #fff; }

.synesthesia-note { display: none; }

/* ── result strips ── */
.strip {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 18px;
      border-bottom: 1px solid var(--line);
      padding: 14px 0;
      align-items: start;
}

.strip > * { min-width: 0; }

.strip-label { font-size: 1.15rem; color: #000; padding-top: 0; }
.dark-mode .strip-label { color: #fff; }

#results .panel {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 6px 18px;
      border-bottom: 1px solid var(--line);
      padding: 14px 0;
      align-items: start;
}

#results .panel > :not(.panel-title) { grid-column: 2; }

#results .panel .panel-title {
      grid-column: 1;
      grid-row: 1 / span 9;
      font-size: 1.15rem;
      color: #000;
      padding-top: 0;
}

.dark-mode #results .panel .panel-title { color: #fff; }

#results .panel h3 { display: none; }

#scale-title { font-size: 1rem; font-weight: 400; margin: 0 0 8px; }

.scale-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }

.scale-note {
      padding: 5px 10px;
      font-size: 0.9rem;
      border: 1px solid var(--line-strong);
      background: var(--bg);
}


.scale-note.root-note { border-color: var(--fg); background: var(--fg); }
.scale-note.root-note { color: var(--bg) !important; }
.scale-note.selected-note { border: 2px solid #000; }
.dark-mode .scale-note.selected-note { border-color: #fff; }

.scale-hints { font-size: 0.8rem; color: var(--mut); display: grid; gap: 3px; }
.hint-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; }
.hint-dot.scale-dot { background: #efefef; border: 1px solid var(--line-strong); }
.hint-dot.root-dot { background: var(--fg); }

/* modes */
.modes-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.mode-btn {
      background: none;
      border: 1px solid var(--line-strong);
      padding: 6px 10px;
      cursor: pointer;
      text-align: left;
      color: var(--fg);
}


.mode-root { font-size: 0.85rem; }
.mode-desc { font-size: 0.7rem; color: var(--mut); }
.mode-btn:hover { border-color: var(--fg); }
.mode-btn.active { border-color: #000; border-width: 2px; padding: 5px 9px; }
.dark-mode .mode-btn.active { border-color: #fff; }

/* chords */
.chord-type-tabs { display: flex; gap: 14px; margin-bottom: 8px; }

.chord-type-btn {
      background: none;
      border: none;
      padding: 2px 0;
      font-size: 0.85rem;
      color: var(--mut);
      cursor: pointer;
}

.chord-type-btn:hover { color: var(--fg); }
.chord-type-btn.active { color: var(--fg); }

.chords-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
      gap: 6px;
      max-width: 760px;
}

.chord-card {
      border: 1px solid var(--line-strong);
      padding: 7px 5px;
      text-align: center;
      cursor: pointer;
      background: none;
}

.chord-card:hover { border-color: var(--fg); }


.chord-degree { font-size: 0.65rem; color: var(--mut); }
.chord-name { font-size: 1rem; margin: 1px 0; }
.chord-quality { font-size: 0.65rem; color: var(--mut); }
.chord-notes-display { font-size: 0.6rem; color: var(--mut); margin-top: 2px; }

/* progressions */
.progressions-list { display: flex; flex-wrap: wrap; gap: 6px; }

.progression-chip {
      border: 1px solid var(--line-strong);
      padding: 6px 11px;
      font-size: 0.88rem;
}

.progression-label { font-size: 0.68rem; color: var(--mut); display: block; }

/* songs */
.player-track {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 6px 0;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      max-width: 560px;
}

.player-track:last-child { border-bottom: none; }

.track-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.track-title { font-size: 0.9rem; }
.track-artist { font-size: 0.78rem; color: var(--mut); }
.player-track:hover .track-title { color: var(--mut); }
.player-track.playing .track-title { color: var(--fg); }
.track-play-btn { color: var(--fg); font-size: 0.72rem; flex-shrink: 0; }
.songs-empty { font-size: 0.85rem; color: var(--mut); font-style: italic; }

/* ── progressions page ── */
.prog-panel { padding: 4px 0 0; }
.prog-panel h2 { font-size: 1.3rem; font-weight: 400; margin: 20px 0 14px; }
.prog-panel h3 { font-size: 0.85rem; font-weight: 400; color: var(--mut); margin: 18px 0 8px; }
.prog-hint { color: var(--mut); font-size: 0.85rem; font-style: italic; }

.prog-key-select { border: 1px solid var(--line); padding: 12px; }
.prog-key-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.prog-key-row:last-child { margin-bottom: 0; }
.prog-key-row span { min-width: 44px; color: var(--mut); font-size: 0.82rem; }

.prog-key-btn, .prog-mode-btn {
      background: none;
      border: 1px solid var(--line-strong);
      padding: 4px 10px;
      color: var(--fg);
      font-size: 0.82rem;
      cursor: pointer;
}

.prog-key-btn:hover, .prog-mode-btn:hover { border-color: var(--fg); }
.prog-key-btn.active, .prog-mode-btn.active { border-color: #000; border-width: 2px; padding: 3px 9px; }
.dark-mode .prog-key-btn.active, .dark-mode .prog-mode-btn.active { border-color: #fff; }

.prog-available-chords { display: flex; flex-wrap: wrap; gap: 6px; }

.prog-chord-btn {
      background: none;
      border: 1px solid var(--line-strong);
      padding: 8px 14px;
      color: var(--fg);
      font-size: 0.95rem;
      cursor: pointer;
}

.prog-chord-btn:hover { border-color: var(--fg); }

.progression-slots {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      min-height: 48px;
      border: 1px dashed var(--line-strong);
      padding: 10px;
      margin-bottom: 10px;
}

.progression-empty { color: var(--mut); font-style: italic; font-size: 0.85rem; }

.prog-slot {
      background: var(--fg);
      color: var(--bg);
      padding: 7px 13px;
      font-size: 0.92rem;
      border: none;
      cursor: pointer;
}

.prog-slot:hover { background: var(--mut); }
.prog-arrow { color: var(--mut); }

.prog-actions { display: flex; gap: 8px; }

.prog-action-btn {
      background: none;
      border: 1px solid var(--line-strong);
      padding: 6px 14px;
      color: var(--mut);
      font-size: 0.82rem;
      cursor: pointer;
}

.prog-action-btn:hover { color: var(--fg); border-color: var(--fg); }
.prog-action-btn.save-btn { border-color: var(--fg); color: var(--fg); }
.prog-action-btn.save-btn:hover { background: var(--fg); color: var(--bg); }

.saved-prog-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid var(--line);
}

.saved-prog-chords { font-size: 0.9rem; }

.saved-prog-delete {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--mut);
      cursor: pointer;
      font-size: 0.7rem;
      padding: 2px 7px;
}

.saved-prog-delete:hover { color: var(--fg); border-color: var(--fg); }

.prog-common-item {
      display: inline-block;
      border: 1px solid var(--line-strong);
      padding: 6px 11px;
      margin: 0 6px 6px 0;
      font-size: 0.88rem;
      cursor: pointer;
}

.prog-common-item:hover { border-color: var(--fg); }
.prog-common-label { font-size: 0.68rem; color: var(--mut); display: block; }

/* ── blog: dense list ── */
.blog-head { margin: 20px 0 12px; }
.blog-head h2 { font-size: 1.3rem; font-weight: 400; margin: 0 0 4px; }
.blog-head p { margin: 0; font-size: 0.88rem; color: var(--mut); }

.blog-grid { display: block; border-top: 1px solid var(--line); }

.blog-card {
      display: grid;
      grid-template-columns: 70px auto 1fr auto;
      gap: 0 12px;
      align-items: baseline;
      padding: 6px 4px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
}

.blog-card:hover { background: #f4f4f4; }
.dark-mode .blog-card:hover { background: #222; }

.blog-tag { font-size: 0.72rem; }
.blog-card:nth-child(6n+1) .blog-tag { color: var(--r1); }
.blog-card:nth-child(6n+2) .blog-tag { color: var(--r7); }
.blog-card:nth-child(6n+3) .blog-tag { color: var(--r7); }
.blog-card:nth-child(6n+4) .blog-tag { color: var(--r5); }
.blog-card:nth-child(6n+5) .blog-tag { color: var(--r5); }
.blog-card:nth-child(6n+6) .blog-tag { color: var(--r6); }

.blog-card h3 { font-size: 0.9rem; font-weight: 400; margin: 0; white-space: nowrap; }

.blog-card p {
      margin: 0;
      font-size: 0.78rem;
      color: var(--mut);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.blog-readmore { font-size: 0.72rem; color: var(--mut); white-space: nowrap; }

.blog-back {
      background: none;
      border: none;
      color: var(--fg);
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0;
      margin: 18px 0 10px;
}

.philosophy-panel { max-width: 680px; margin-bottom: 22px; }
.philosophy-panel .panel-title { font-size: 0.8rem; color: var(--mut); margin-bottom: 10px; }
.philosophy-content { line-height: 1.7; font-size: 0.95rem; }
.philosophy-content p { margin: 0 0 13px; }
.philosophy-content h3 { font-size: 1rem; font-weight: 500; color: var(--fg); margin: 18px 0 6px; }


/* ── footer ── */
.site-footer {
      color: var(--mut);
      font-size: 0.82rem;
      margin: 32px 0 0;
      text-align: center;
      display: grid;
      gap: 3px;
}
.site-footer a { color: var(--mut); }

/* ── our ipod: the one object allowed on the desk ── */
.dock {
      position: fixed;
      right: 22px;
      bottom: 20px;
      width: 224px;
      padding: 14px 12px 16px;
      border-radius: 18px;
      background: linear-gradient(105deg, #ff8fce 0%, #f857ae 45%, #e91e90 100%);
      border: 1px solid #ad1457;
      box-shadow:
            inset 2px 2px 3px rgba(255, 255, 255, 0.65),
            inset -3px -4px 8px rgba(160, 30, 100, 0.35),
            8px 12px 24px rgba(60, 10, 40, 0.35);
      transform: rotate(-4deg);
      transform-origin: 50% 100%;
      transition: transform 0.25s ease;
      z-index: 60;
}

.dock:hover { transform: rotate(0deg); }

.dock-bar {
      display: block;
      text-align: center;
      padding: 0 0 8px;
      font-size: 0.68rem;
      color: #7e1d55;
      cursor: pointer;
}

.dock-bar #dock-label {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.dock-screen {
      border: 5px solid #1d1d21;
      border-radius: 6px;
      background: #000;
      overflow: hidden;
      box-shadow: inset 0 0 4px #000, 0 1px 0 rgba(255, 255, 255, 0.5);
}

#yt-player { display: block; width: 100%; height: 152px; border: none; }
.dock-screen iframe { display: block; width: 100%; height: 152px; border: none; }

.click-wheel {
      position: relative;
      width: 152px;
      height: 152px;
      margin: 14px auto 0;
      border-radius: 50%;
      background: radial-gradient(circle at 45% 38%, #ffffff 0%, #f6e6f0 65%, #ecd0e1 100%);
      border: 1px solid #d898bf;
      box-shadow: inset 0 2px 4px rgba(150, 40, 100, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8);
}

.wheel-btn {
      position: absolute;
      background: none;
      border: none;
      color: #c95c9d;
      font-size: 0.62rem;
      cursor: pointer;
      padding: 6px;
      line-height: 1;
}

.wheel-btn:hover { color: var(--pink-deep); }

.wheel-menu { top: 8px; left: 50%; transform: translateX(-50%); }
.wheel-prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; }
.wheel-next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; }
.wheel-play { bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; }

.wheel-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 1px solid #d898bf;
      background: radial-gradient(circle at 45% 35%, #ffffff, #f7dceb);
      cursor: pointer;
      box-shadow: inset 0 -2px 4px rgba(150, 40, 100, 0.15), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.wheel-center:active { box-shadow: inset 0 2px 5px rgba(150, 40, 100, 0.3); }

.dock.collapsed { width: 168px; padding: 8px 12px 10px; }
.dock.collapsed .dock-screen, .dock.collapsed .click-wheel { display: none; }
.dock.collapsed .dock-bar { padding-bottom: 0; }

/* ── mobile ── */
@media (max-width: 820px) {
      body { padding: 0 12px 240px; }

      .plainnav { flex-direction: column; gap: 6px; padding-top: 14px; }
      .plainnav-links { flex-wrap: wrap; gap: 12px; }

      .workbench { flex-direction: column; gap: 16px; }

      .bench-rail {
            width: 100%;
            min-width: 0;
            border-left: none;
            border-top: 1px solid var(--line);
            padding-left: 0;
            padding-top: 12px;
            position: static;
      }

      .strip, #results .panel { grid-template-columns: 1fr; gap: 6px; }
      #results .panel .panel-title { grid-row: auto; }
      #results .panel > :not(.panel-title) { grid-column: 1; }

      .guitar-strings { overflow-x: auto; }
      .guitar-string { min-width: 520px; height: 38px; }

      .blog-card { grid-template-columns: auto 1fr auto; }
      .blog-card p { display: none; }

      .dock { right: 12px; bottom: 12px; width: 210px; }
      .click-wheel { width: 120px; height: 120px; }
      .wheel-center { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
      * { transition-duration: 0.01ms !important; }
}


/* static blog pages */
.post-h1 { font-size: 1.5rem; font-weight: 400; margin: 22px 0 4px; }
.blog-grid a.blog-card { text-decoration: none; color: inherit; }


/* blog post pages: centered column */
.post-h1 {
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
}

.philosophy-panel {
      margin-left: auto;
      margin-right: auto;
}


/* try an example */
.linklike {
      background: none;
      border: none;
      padding: 0;
      font-size: inherit;
      color: var(--fg);
      cursor: pointer;
}

.linklike:hover { color: var(--mut); }

/* song search */
.song-search {
      width: 100%;
      border: 1px solid var(--line-strong);
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font);
      font-size: 0.9rem;
      padding: 7px 10px;
      outline: none;
}

.song-search:focus { border-color: var(--fg); }

.search-hit {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      border-bottom: 1px solid var(--line);
      padding: 6px 2px;
      font-size: 0.82rem;
      color: var(--fg);
      cursor: pointer;
}

.search-hit:hover { color: var(--mut); }

.search-empty {
      font-size: 0.8rem;
      color: var(--mut);
      font-style: italic;
      padding: 6px 2px;
}

/* ear trainer */
.ear-intro { margin: 0 0 10px; font-size: 0.9rem; color: var(--mut); }
#ear-options { margin-top: 10px; }
.ear-msg { margin-top: 8px; font-size: 0.9rem; }


/* tiny notes living in the background, damla's rainbow, very quiet */
.backdrop {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
}

.backdrop span {
      position: absolute;
      user-select: none;
}

/* sprinkles falling from the cursor */
.sprinkle {
      position: fixed;
      z-index: 90;
      pointer-events: none;
      font-size: 11px;
      user-select: none;
      animation: sprinkleFall 0.9s ease-in forwards;
}

@keyframes sprinkleFall {
      from { opacity: 0.85; transform: translateY(0); }
      to { opacity: 0; transform: translateY(48px); }
}

.curriculum-path {
      font-size: 0.82rem;
      color: var(--mut);
      margin: 4px 0 0;
}