:root {
  --paper: #f7f5f0;
  --deep: #dfe8df;
  --ink: #28231e;
  --muted: #696057;
  --line: #c9c9b9;
  --gold: #b67b27;
  --gold-dark: #885916;
  --rust: #9d3b2f;
  --danger: #9d3b2f;
  --sage: #81917a;
  --lavender: #b9b0c9;
  --mist: #b9d0d4;
  --blush: #dfc0bd;
  --surface: rgba(255, 252, 247, .84);
  --surface-solid: #fdfaf4;
  --rail: rgba(224, 232, 222, .88);
  --editor: rgba(255, 253, 249, .90);
  --accent-soft: #e7dfec;
  --glow: rgba(108, 127, 115, .20);
  --backdrop-image: url('mystical-garden-v1.png');
  --diamond-a: #fff7d8;
  --diamond-b: #c7afe3;
  --diamond-c: #79b7bd;
  --diamond-glow: rgba(189, 156, 225, .72);
  --form-field: rgba(255, 255, 255, .84);
  --form-text: #28231e;
  --form-placeholder: #766f66;
  --form-panel: rgba(255, 255, 255, .34);
}

body[data-theme="moon"] {
  --paper: #202634;
  --deep: #2b3243;
  --ink: #f4eee4;
  --muted: #bbb9c7;
  --line: #5e6475;
  --gold: #c49a54;
  --gold-dark: #e0bd7c;
  --rust: #c87668;
  --danger: #df8a7e;
  --sage: #83978c;
  --surface: rgba(31, 36, 50, .90);
  --surface-solid: #252b3b;
  --rail: rgba(35, 42, 57, .94);
  --editor: rgba(27, 32, 45, .92);
  --accent-soft: #4b4760;
  --glow: rgba(132, 151, 180, .28);
}

body[data-theme="rosewater"] {
  --paper: #f5e9e8;
  --deep: #ead7d8;
  --ink: #382729;
  --muted: #7b6263;
  --line: #d9bbbb;
  --gold: #a86e45;
  --gold-dark: #78492c;
  --rust: #9d4f55;
  --surface: rgba(255, 248, 247, .88);
  --surface-solid: #fff8f6;
  --rail: rgba(235, 215, 217, .92);
  --editor: rgba(255, 250, 248, .92);
  --accent-soft: #eed6df;
  --glow: rgba(164, 101, 112, .18);
  --diamond-a: #fff0ef;
  --diamond-b: #e3a3b4;
  --diamond-c: #a85568;
  --diamond-glow: rgba(226, 130, 158, .72);
}

body[data-theme="greenhouse"] {
  --paper: #e8eee7;
  --deep: #d2dfd2;
  --ink: #263126;
  --muted: #5f6f61;
  --line: #b7c8b6;
  --gold: #a97931;
  --gold-dark: #76501d;
  --rust: #9b5040;
  --surface: rgba(249, 252, 246, .88);
  --surface-solid: #f7fbf4;
  --rail: rgba(211, 225, 211, .92);
  --editor: rgba(250, 253, 247, .92);
  --accent-soft: #d5e4d4;
  --glow: rgba(77, 114, 84, .18);
}

body[data-theme="secret-garden"] {
  --paper: #e8eee2;
  --deep: #d3dfd0;
  --ink: #1d2b20;
  --muted: #5f715f;
  --line: rgba(229, 237, 214, .48);
  --gold: #c19445;
  --gold-dark: #7a571d;
  --rust: #955344;
  --danger: #9d5145;
  --sage: #6f8c70;
  --surface: rgba(229, 240, 213, .76);
  --surface-solid: #edf2df;
  --rail: rgba(233, 239, 224, .88);
  --editor: rgba(237, 244, 224, .86);
  --accent-soft: rgba(196, 216, 183, .80);
  --glow: rgba(9, 42, 19, .36);
  --backdrop-image: url('secret-garden-v1.png');
  --diamond-a: #fff4b4;
  --diamond-b: #8dd7a0;
  --diamond-c: #247057;
  --diamond-glow: rgba(164, 237, 143, .72);
}

body[data-theme="midnight-studio"] {
  --paper: #070811;
  --deep: #0d1020;
  --ink: #f1f3fb;
  --muted: #9aa4bd;
  --line: rgba(108, 128, 174, .38);
  --gold: #bb8145;
  --gold-dark: #e2a969;
  --rust: #7b437e;
  --danger: #e98585;
  --sage: #579bb3;
  --lavender: #8361b2;
  --surface: rgba(7, 9, 20, .86);
  --surface-solid: #0c1020;
  --rail: rgba(6, 8, 17, .91);
  --editor: rgba(8, 11, 23, .94);
  --accent-soft: rgba(37, 59, 102, .72);
  --glow: rgba(26, 94, 171, .30);
  --backdrop-image: url('midnight-studio-v1.png');
  --diamond-a: #d9f6ff;
  --diamond-b: #4ec8ff;
  --diamond-c: #7a42cf;
  --diamond-glow: rgba(62, 185, 255, .90);
  --form-field: rgba(27, 39, 68, .92);
  --form-text: #f2f6ff;
  --form-placeholder: #a6b2ca;
  --form-panel: rgba(24, 36, 64, .72);
}

html, body { min-height: 100%; }
body {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), var(--backdrop-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body[data-theme="moon"] { background-blend-mode: multiply, soft-light; }
body[data-theme="secret-garden"] {
  background-image: linear-gradient(rgba(21, 45, 22, .04), rgba(21, 45, 22, .16)), var(--backdrop-image);
  background-blend-mode: multiply, normal;
}
body[data-theme="midnight-studio"] {
  background-image: linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.05)), var(--backdrop-image);
  background-blend-mode: normal;
}
button, input, textarea, select { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.card h1, .drawer h2, .modal h2, .title, .song strong, .privacy-home h1, .hover-preview h3 { font-family: Newsreader, Iowan Old Style, Baskerville, Georgia, serif; }

.gate { background: linear-gradient(135deg, transparent, rgba(255,255,255,.18)); }
.card, .modal, .drawer, .privacy-panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 28px 80px var(--glow);
  backdrop-filter: blur(20px) saturate(108%);
  -webkit-backdrop-filter: blur(20px) saturate(108%);
}
.mark, .brand { background: rgba(255,255,255,.28); border-color: var(--gold); }
.studio { background: rgba(255,255,255,.12); }
.rail { background: var(--rail); border-color: var(--line); backdrop-filter: blur(18px); }
.editor { margin: 18px; min-height: calc(100vh - 36px); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--editor); box-shadow: 0 24px 70px var(--glow); backdrop-filter: blur(18px); }
.head, .footer { background: rgba(255,255,255,.18); border-color: var(--line); }
.write { background: transparent; }
.studio > .editor { justify-self: center; }
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor {
  width: min(1320px, calc(100vw - 120px));
  height: min(760px, calc(100vh - 72px));
  min-height: 620px;
  margin: auto;
  align-self: center;
}
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write {
  justify-self: center;
  width: min(860px, calc(100% - 72px));
  padding: 30px 0 48px;
}
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .head { padding: 17px 30px 10px; }
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .tabs { margin-top: 8px; }
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .versions { margin-top: 8px; }
.title {
  color: var(--ink);
  font-size: clamp(27px, 2.6vw, 42px);
  line-height: 1.2;
  min-height: 58px;
  padding: 4px 0 9px;
  overflow: visible;
}
.search, .entry input, .share-entry input, .share-entry select, .credit-row input, .credit-row select, .credit-grid input, .credit-grid select, .copy-row input {
  color: var(--form-text); background: var(--form-field); border-color: var(--line);
}
.modal input::placeholder,
.drawer input::placeholder,
.card input::placeholder { color: var(--form-placeholder); opacity: 1; }
.modal select option,
.drawer select option,
.card select option { color: var(--form-text); background: var(--surface-solid); }
body[data-theme="midnight-studio"] .modal { color-scheme: dark; }
.primary, .new, .entry button, .tabset button.active { background: linear-gradient(135deg, var(--rust), var(--gold)); }
.account-button { background: var(--accent-soft); color: var(--ink); border-color: var(--gold); }
.versions button.active, .filters button.active { background: var(--accent-soft); color: var(--ink); border-color: var(--sage); }
.versions { align-items: center; flex-wrap: wrap; }
.version-caption { margin-right: 3px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drawer { background: var(--surface); }
.song { position: relative; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.song:hover, .song:focus-visible { transform: translateX(4px); border-color: var(--line); background: rgba(255,255,255,.36); }
.song.active { background: var(--accent-soft); }

.privacy-home { min-height: 100vh; display: grid; grid-template-columns: 68px 1fr; }
.privacy-stage { display: grid; place-items: center; padding: 36px; }
.privacy-panel { width: min(900px, 100%); padding: clamp(32px, 6vw, 72px); border: 1px solid var(--line); border-radius: 26px; }
.privacy-home h1 { margin: 12px 0 16px; max-width: 720px; font-size: clamp(48px, 7vw, 86px); font-weight: 500; line-height: .96; letter-spacing: -.035em; }
.privacy-copy { max-width: 620px; color: var(--muted); font: 18px/1.6 Newsreader, Georgia, serif; }
.privacy-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 12px; }
.privacy-note::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sage) 20%, transparent); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 36px; }
.category-card { min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.28); text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.category-card::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--rust), var(--lavender)); }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--glow); }
.category-card strong { display: block; font: 22px Newsreader, Georgia, serif; }
.category-card span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.privacy-actions button, .privacy-actions label { padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.30); cursor: pointer; font-size: 12px; }

.catalog-back { margin: 14px 0 8px; padding: 0; border: 0; background: transparent; color: var(--gold-dark); cursor: pointer; font-size: 12px; }
.catalog-category-grid { display: grid; gap: 8px; margin-top: 20px; }
.catalog-category { display: flex; align-items: center; justify-content: space-between; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.26); cursor: pointer; }
.catalog-category strong { font: 18px Newsreader, Georgia, serif; }
.catalog-category span { color: var(--muted); font-size: 11px; }
.catalog-caption { color: var(--muted); font-size: 11px; line-height: 1.45; }

.hover-preview { position: fixed; z-index: 35; width: min(320px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--gold); border-radius: 18px; background: var(--surface-solid); box-shadow: 0 22px 60px rgba(28,24,20,.22); pointer-events: none; animation: preview-arrive .14s ease-out both; }
.hover-preview::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--gold), var(--rust)); }
.hover-preview .preview-status { display: inline-block; padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.hover-preview h3 { margin: 14px 0 8px; font-size: 28px; font-weight: 500; line-height: 1.05; }
.hover-preview p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.preview-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
@keyframes preview-arrive { from { opacity: 0; transform: translateX(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .hover-preview { animation: none; }
}

.theme-picker { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.theme-picker h3 { margin: 0; font: 22px Newsreader, Georgia, serif; }
.theme-picker p { margin: 6px 0 14px; color: var(--muted); font-size: 12px; }
.theme-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.theme-option { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.24); text-align: left; cursor: pointer; }
.theme-option.active { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 18%, transparent); }
.theme-swatches { display: flex; gap: 4px; margin-bottom: 9px; }
.theme-swatches i { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.theme-option strong, .theme-option small { display: block; }
.theme-option small { margin-top: 3px; color: var(--muted); }
.theme-scene { display: block; height: 82px; margin: -7px -7px 11px; border-radius: 8px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.theme-scene[data-theme-preview="mystical"] { background-image: url('mystical-garden-v1.png'); }
.theme-scene[data-theme-preview="secret-garden"] { background-image: url('secret-garden-v1.png'); }
.theme-scene[data-theme-preview="midnight-studio"] { background-image: url('midnight-studio-v1.png'); }
.theme-scene[data-theme-preview="rosewater"] { background-image: linear-gradient(135deg, #f5e9e8, #d9b8c3 48%, #9f6268); }
.cleanup-button { margin-top: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--danger); cursor: pointer; }

/* Secret Garden is a scene, not a recolor. */
body[data-theme="secret-garden"] .privacy-stage { place-items: center end; padding: clamp(28px, 6vw, 96px); }
body[data-theme="secret-garden"] .privacy-panel {
  width: min(68vw, 960px);
  margin-left: auto;
  color: #f8fff1;
  background: linear-gradient(135deg, rgba(29, 100, 67, .73), rgba(90, 139, 63, .58));
  border-color: rgba(240, 247, 219, .42);
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(3, 25, 9, .36);
  backdrop-filter: blur(7px) saturate(118%);
}
body[data-theme="secret-garden"] .privacy-panel .eyebrow,
body[data-theme="secret-garden"] .privacy-copy,
body[data-theme="secret-garden"] .privacy-note,
body[data-theme="secret-garden"] .category-card span { color: rgba(255,255,246,.82); }
body[data-theme="secret-garden"] .category-card,
body[data-theme="secret-garden"] .privacy-actions button,
body[data-theme="secret-garden"] .privacy-actions label { background: rgba(236, 247, 217, .13); border-color: rgba(243, 249, 225, .34); color: white; }
body[data-theme="secret-garden"] .category-card::before { background: linear-gradient(90deg, #e4bf72, #c6a6d1, #eef2d0); }
body[data-theme="secret-garden"] .rail { box-shadow: 8px 0 40px rgba(7, 39, 15, .24); }
body[data-theme="secret-garden"] .editor {
  width: min(72vw, 1120px);
  margin-left: auto;
  background: linear-gradient(135deg, rgba(242, 247, 224, .91), rgba(209, 229, 190, .82));
  border-color: rgba(246, 249, 226, .60);
  border-radius: 3px;
  box-shadow: 0 32px 90px rgba(7, 42, 14, .42);
  backdrop-filter: blur(8px) saturate(112%);
}
body[data-theme="secret-garden"] .drawer { background: rgba(231, 240, 216, .90); }
body[data-theme="secret-garden"] .write { color: #17231a; }

/* Midnight Studio turns the writer into recording equipment. */
body[data-theme="midnight-studio"] .studio { background: transparent; }
body[data-theme="midnight-studio"] .rail { background: rgba(4, 5, 12, .90); border-color: rgba(73, 107, 165, .35); box-shadow: 8px 0 40px rgba(0,0,0,.55); }
body[data-theme="midnight-studio"] .brand,
body[data-theme="midnight-studio"] .account-button { color: #a7d9ff; border-color: #416d9f; background: rgba(16, 28, 51, .80); }
body[data-theme="midnight-studio"] .rail-actions button { color: #a7d9ff; border-color: rgba(75, 110, 170, .45); background: rgba(20, 34, 62, .58); }
body[data-theme="midnight-studio"] .privacy-stage { place-items: center start; padding: clamp(26px, 5vw, 80px); }
body[data-theme="midnight-studio"] .privacy-panel {
  width: min(58vw, 760px);
  color: #f2f5ff;
  background: linear-gradient(145deg, rgba(7, 9, 20, .94), rgba(19, 26, 54, .76));
  border: 1px solid rgba(82, 122, 193, .38);
  border-radius: 38px;
  box-shadow: inset 0 0 0 7px rgba(0,0,0,.56), 0 0 70px rgba(33, 104, 200, .17);
  backdrop-filter: blur(10px);
}
body[data-theme="midnight-studio"] .privacy-panel .eyebrow { color: #7fbde8; }
body[data-theme="midnight-studio"] .privacy-copy,
body[data-theme="midnight-studio"] .privacy-note,
body[data-theme="midnight-studio"] .category-card span { color: #aeb8d0; }
body[data-theme="midnight-studio"] .category-card,
body[data-theme="midnight-studio"] .privacy-actions button,
body[data-theme="midnight-studio"] .privacy-actions label { color: #eaf2ff; background: rgba(30, 48, 85, .46); border-color: rgba(89, 133, 205, .42); }
body[data-theme="midnight-studio"] .category-card::before { background: linear-gradient(90deg, #38a9e9, #7653b7, #c7834f); box-shadow: 0 0 16px rgba(61, 167, 232, .6); }
body[data-theme="midnight-studio"] .editor {
  position: relative;
  width: min(68vw, 1120px);
  margin: 24px auto 24px clamp(20px, 3vw, 58px);
  min-height: 0;
  color: #f2f4fb;
  background: linear-gradient(180deg, rgba(17, 21, 37, .96), rgba(7, 9, 18, .97));
  border: 1px solid rgba(100, 139, 207, .34);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 72px rgba(0, 0, 0, .38), 0 0 55px rgba(30, 115, 220, .12);
  overflow: hidden;
}
body[data-theme="midnight-studio"] .editor::before {
  display: none;
}
body[data-theme="midnight-studio"] .head { padding: 26px 36px 15px; background: rgba(24, 31, 53, .68); }
body[data-theme="midnight-studio"] .title,
body[data-theme="midnight-studio"] .write { color: #f3f5fb; }
body[data-theme="midnight-studio"] .write { background: linear-gradient(180deg, rgba(8, 11, 22, .4), rgba(5, 7, 14, .65)); text-shadow: 0 0 18px rgba(130, 188, 255, .08); }
body[data-theme="midnight-studio"] .footer { background: rgba(15, 20, 36, .88); }
body[data-theme="midnight-studio"] .actions button,
body[data-theme="midnight-studio"] .import,
body[data-theme="midnight-studio"] .delete,
body[data-theme="midnight-studio"] .versions button,
body[data-theme="midnight-studio"] .tabset button { color: #cbd6ee; background: rgba(34, 50, 83, .42); border-color: rgba(91, 123, 181, .38); }
body[data-theme="midnight-studio"] .tabset button.active,
body[data-theme="midnight-studio"] .versions button.active { color: white; background: linear-gradient(135deg, #176da4, #694c98); }
body[data-theme="midnight-studio"] .drawer,
body[data-theme="midnight-studio"] .modal { color: #edf2ff; background: rgba(9, 12, 24, .94); border-color: rgba(76, 112, 177, .42); }
body[data-theme="midnight-studio"] .theme-option { background: rgba(28, 38, 67, .44); }
body[data-theme="midnight-studio"] .owner-private {
  border: 1px solid rgba(84, 125, 191, .34);
  border-left: 3px solid #4ec8ff;
  background: linear-gradient(135deg, rgba(25, 43, 76, .72), rgba(25, 20, 53, .68));
  color: #e9f4ff;
}
body[data-theme="midnight-studio"] .owner-private p { color: #aab8d3; }
body[data-theme="midnight-studio"] .people-songs article,
body[data-theme="midnight-studio"] .people-empty { background: rgba(27, 42, 74, .44); border-color: rgba(79, 122, 190, .40); }
body[data-theme="secret-garden"] .owner-private {
  border: 1px solid rgba(75, 113, 65, .28);
  border-left: 3px solid #82ad6c;
  background: linear-gradient(135deg, rgba(213, 229, 198, .72), rgba(235, 237, 206, .66));
}
.owner-private { background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface-solid)); color: var(--ink); border-color: var(--gold); }

@media (max-width: 700px) {
  body { background-position: 37% center; }
  .editor { margin: 8px; min-height: calc(100vh - 16px); border-radius: 16px; }
  .privacy-home { grid-template-columns: 54px 1fr; }
  .privacy-stage { padding: 18px; }
  .privacy-panel { padding: 26px 22px; }
  .privacy-home h1 { font-size: 45px; }
  .category-grid { grid-template-columns: 1fr; }
  .theme-options { grid-template-columns: 1fr; }
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor { width: calc(100% - 16px); height: calc(100vh - 16px); min-height: 560px; margin: 8px; }
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write { width: calc(100% - 48px); padding: 24px 0 90px; }
  body[data-theme="secret-garden"] .privacy-panel,
  body[data-theme="secret-garden"] .editor,
  body[data-theme="midnight-studio"] .privacy-panel,
  body[data-theme="midnight-studio"] .editor { width: 100%; margin: 8px; border-radius: 18px; }
  body[data-theme="secret-garden"] .privacy-stage,
  body[data-theme="midnight-studio"] .privacy-stage { place-items: center; padding: 18px; }
}

/* V11: song roles, contributor tabs, line provenance, and treatment comparison. */
.top-status { display: flex; align-items: center; gap: 10px; }
.song-invite, .source-mode {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 68%, transparent); color: var(--gold-dark); cursor: pointer; font-size: 9px; font-weight: 750;
}
.access-role, .access-note { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.title:disabled, .category select:disabled { color: var(--ink); opacity: 1; cursor: default; -webkit-text-fill-color: var(--ink); }
.version-tab { position: relative; overflow: hidden; border-left: 5px solid var(--contributor); }
.version-tab::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--contributor); box-shadow: 0 0 13px var(--contributor); opacity: .6; }
.version-tab small { max-width: 190px; overflow: hidden; color: var(--contributor); font-size: 8px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.version-tab.active { border-color: var(--contributor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--contributor) 26%, transparent), 0 0 16px color-mix(in srgb, var(--contributor) 18%, transparent); }
.contributor-note { padding-left: 9px; border-left: 3px solid var(--contributor); color: var(--contributor); font-size: 9px; font-weight: 750; }
.source-mode.active { color: white; background: linear-gradient(135deg, var(--rust), var(--gold)); }
.provenance-reader {
  justify-self: center; width: min(860px, calc(100% - 72px)); min-height: 220px; max-height: min(58vh, 620px);
  overflow: auto; padding: 20px 0 38px; color: var(--ink); font: 18px/1.75 Newsreader, Georgia, serif;
}
.provenance-key { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 32%, transparent); font: 10px/1.3 Inter, sans-serif; }
.provenance-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--key-color); box-shadow: 0 0 10px var(--key-color); }
.provenance-key span { color: var(--muted); }
.provenance-lines { display: grid; }
.provenance-line { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); border-left: 3px solid transparent; outline: 0; transition: background .14s, border-color .14s; }
.provenance-line:hover, .provenance-line:focus-visible { z-index: 3; border-left-color: var(--line-author); background: color-mix(in srgb, var(--line-author) 10%, transparent); }
.line-number { padding-top: 3px; color: var(--muted); font: 8px/1.75 Inter, sans-serif; text-align: center; opacity: .5; }
.line-copy { min-height: 31px; padding: 0 8px; white-space: pre-wrap; }
.line-source { position: absolute; z-index: 5; top: calc(100% - 2px); left: 38px; display: none; max-width: min(520px, calc(100vw - 120px)); padding: 7px 9px; border: 1px solid var(--line-author); border-radius: 8px; background: var(--surface-solid); box-shadow: 0 10px 24px var(--glow); color: var(--ink); font: 9px/1.4 Inter, sans-serif; }
.provenance-line:hover .line-source, .provenance-line:focus-visible .line-source { display: block; }
.compare-modal { width: min(94vw, 1500px); max-height: 92vh; }
.compare-intro { max-width: 820px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.compare-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 390px); gap: 12px; margin-top: 20px; padding: 3px 3px 12px; overflow-x: auto; scroll-snap-type: x proximity; }
.compare-column { display: grid; grid-template-rows: auto minmax(260px, 1fr) auto; min-height: 450px; overflow: visible; border: 1px solid var(--line); border-top: 5px solid var(--contributor); border-radius: 13px; background: color-mix(in srgb, var(--surface-solid) 86%, transparent); scroll-snap-align: start; }
.compare-column > header { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare-column > header strong, .compare-column > header span, .compare-column > header small { display: block; }
.compare-column > header strong { font: 20px Newsreader, Georgia, serif; }
.compare-column > header span { margin-top: 3px; color: var(--gold-dark); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compare-column > header small { margin-top: 5px; color: var(--contributor); font-size: 9px; }
.compare-column > .provenance-lines { align-content: start; padding: 12px 6px; font: 13px/1.55 Newsreader, Georgia, serif; }
.compare-column .provenance-line { grid-template-columns: 26px minmax(0, 1fr); }
.compare-column .line-copy { min-height: 24px; }
.compare-column .line-source { left: 30px; }
.compare-column > button { margin: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.take-listen-only { grid-column: 3 / -1; justify-self: end; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body[data-theme="midnight-studio"] .provenance-reader { color: #f2f4fb; }
body[data-theme="midnight-studio"] .provenance-key, body[data-theme="midnight-studio"] .compare-column { background: rgba(15, 20, 36, .9); }
body[data-theme="midnight-studio"] .line-source { background: #111526; color: #f2f4fb; }

@media (max-width: 700px) {
  .top-status { gap: 5px; }
  .song-invite { padding: 6px; }
  .provenance-reader { width: calc(100% - 36px); }
  .compare-grid { grid-auto-columns: minmax(270px, 84vw); }
}

/* V10: version-scoped capture room and take playlist. */
.take-dock {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: 9px 12px;
  padding: 11px 30px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}
.take-dock-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.take-dock-head strong { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 550; }
.capture-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.capture-actions button, .take-upload {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.32);
  color: var(--ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}
.capture-actions button[data-record="audio"] { color: var(--rust); }
.capture-actions button[data-record="video"] { color: var(--gold-dark); }
.take-upload.uploading, .capture-disabled { cursor: wait; opacity: .55; pointer-events: none; }
.take-help { grid-column: 1 / -1; margin: 2px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.recorder-stage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-solid));
}
.recorder-stage[hidden] { display: none; }
.recorder-stage.video { grid-template-columns: minmax(220px, 440px) 1fr auto; }
.recorder-stage video { width: 100%; max-height: 230px; border-radius: 10px; background: #050505; transform: scaleX(-1); }
.recorder-status { display: flex; align-items: center; gap: 10px; }
.recorder-status i { width: 11px; height: 11px; border-radius: 50%; background: #d12e2e; box-shadow: 0 0 0 0 rgba(209,46,46,.55); animation: record-pulse 1.25s infinite; }
.recorder-status strong, .recorder-status time { display: block; }
.recorder-status strong { font-size: 11px; }
.recorder-status time { margin-top: 3px; color: var(--muted); font-size: 18px; font-variant-numeric: tabular-nums; }
.recorder-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.recorder-actions button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.36); cursor: pointer; font-size: 9px; }
.recorder-actions button:first-child { border-color: var(--danger); color: var(--danger); }
@keyframes record-pulse { 70% { box-shadow: 0 0 0 8px rgba(209,46,46,0); } 100% { box-shadow: 0 0 0 0 rgba(209,46,46,0); } }

.take-player { align-self: start; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.24); }
.now-playing { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; margin-bottom: 7px; }
.now-playing span, .now-playing em { color: var(--muted); font-size: 8px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.now-playing strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.take-player video { display: block; width: 100%; max-height: 225px; border-radius: 8px; background: #050505; }
.take-player audio { display: block; width: 100%; height: 32px; }
.playlist-transport { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 7px; color: var(--muted); font-size: 9px; }
.playlist-transport button { width: 26px; height: 23px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
.playlist-transport button:disabled, .take-order:disabled { opacity: .28; cursor: default; }

.take-playlist { display: grid; align-content: start; gap: 5px; min-width: 0; max-height: 255px; overflow-y: auto; padding-right: 2px; }
.take-row { display: grid; grid-template-columns: 31px minmax(105px, 1fr) repeat(4, 25px); align-items: center; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.20); }
.take-row.selected { border-color: var(--gold); background: var(--accent-soft); }
.take-play { display: grid; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--rust), var(--gold)); color: white; cursor: pointer; font-size: 10px; }
.take-name { min-width: 0; }
.take-name strong, .take-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.take-name strong { font-size: 10px; }
.take-name span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.take-name em { margin-right: 6px; padding: 2px 4px; border-radius: 4px; background: rgba(255,255,255,.38); color: var(--gold-dark); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.take-order, .take-rename, .take-delete { width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.take-delete { color: var(--danger); }
body.recording-take .rail button,
body.recording-take .version-organizer button,
body.recording-take .tabs button,
body.recording-take .footer,
body.recording-take .take-player,
body.recording-take .take-playlist { opacity: .42; pointer-events: none; }

body[data-theme="midnight-studio"] .take-dock { background: rgba(13, 20, 38, .84); border-color: rgba(91,123,181,.34); }
body[data-theme="midnight-studio"] .capture-actions button,
body[data-theme="midnight-studio"] .take-upload,
body[data-theme="midnight-studio"] .take-player,
body[data-theme="midnight-studio"] .take-row,
body[data-theme="midnight-studio"] .recorder-actions button { color: #cbd6ee; background: rgba(34, 50, 83, .42); border-color: rgba(91, 123, 181, .38); }
body[data-theme="midnight-studio"] .take-row.selected { border-color: #4ec8ff; background: rgba(43, 66, 112, .72); }
body[data-theme="secret-garden"] .take-dock { background: rgba(206, 225, 187, .48); }

@media (max-width: 850px) {
  .take-dock { grid-template-columns: 1fr; }
  .take-dock-head, .recorder-stage, .take-help { grid-column: 1; }
  .take-dock-head { align-items: flex-start; flex-direction: column; }
  .capture-actions { justify-content: flex-start; }
  .recorder-stage.video { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .take-dock { padding: 10px 18px; }
  .capture-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .take-upload { grid-column: 1 / -1; text-align: center; }
  .take-row { grid-template-columns: 31px minmax(90px, 1fr) repeat(2, 25px); }
  .take-order { display: none; }
}

/* V9: content-sized song desk, organized versions, and per-version audio. */
.editor {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto auto auto;
  align-self: center;
}
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor {
  height: auto;
  min-height: 0;
}
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write {
  min-height: 220px;
  height: 220px;
  padding: 24px 0 36px;
}
body[data-theme="secret-garden"] .editor,
body[data-theme="midnight-studio"] .editor { min-height: 0; }

.version-organizer { margin-top: 12px; }
.version-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 10px; }
.version-caption { color: var(--ink); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.version-tabs { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: thin; }
.version-tab, .version-add, .version-tools button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.24);
  color: var(--muted);
  cursor: pointer;
}
.version-tab { display: grid; min-width: 102px; gap: 2px; text-align: left; }
.version-tab span { max-width: 190px; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.version-tab em { font-size: 8px; font-style: normal; letter-spacing: .09em; text-transform: uppercase; }
.version-tab.current em { color: var(--gold-dark); }
.version-tab.idea em { color: #7c5a8a; }
.version-tab.active { border-color: var(--gold); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 15%, transparent); }
.version-tab.current { border-bottom: 3px solid var(--gold); }
.version-add { border-style: dashed; }
.version-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.version-tools button { padding: 5px 8px; border-radius: 8px; font-size: 9px; }
.current-note { color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .04em; }

.audio-dock { padding: 10px 30px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 24%, transparent); }
.audio-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.audio-dock-head strong { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 550; }
.audio-upload { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.30); color: var(--ink); cursor: pointer; font-size: 10px; font-weight: 700; }
.audio-upload.uploading { cursor: wait; opacity: .65; }
.audio-help { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.audio-tracks { display: grid; gap: 7px; margin-top: 8px; }
.audio-tracks article { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(220px, 1.3fr) 28px; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.24); }
.track-name { min-width: 0; }
.track-name strong, .track-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-name strong { font-size: 11px; }
.track-name span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.audio-tracks audio { width: 100%; height: 30px; }
.track-delete { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--danger); cursor: pointer; }

body[data-theme="midnight-studio"] .version-tab,
body[data-theme="midnight-studio"] .version-add,
body[data-theme="midnight-studio"] .version-tools button,
body[data-theme="midnight-studio"] .audio-upload,
body[data-theme="midnight-studio"] .audio-tracks article { color: #cbd6ee; background: rgba(34, 50, 83, .42); border-color: rgba(91, 123, 181, .38); }
body[data-theme="midnight-studio"] .version-tab span { color: #eef4ff; }
body[data-theme="midnight-studio"] .version-tab.active { background: linear-gradient(135deg, rgba(23,109,164,.72), rgba(105,76,152,.72)); }
body[data-theme="midnight-studio"] .audio-dock { background: rgba(13, 20, 38, .84); border-color: rgba(91,123,181,.34); }
body[data-theme="secret-garden"] .audio-dock { background: rgba(206, 225, 187, .48); }

/* Keep contributor identity stronger than the older generic active-tab rule. */
.version-tab { border-left-color: var(--contributor); }
.version-tab.active { border-color: var(--contributor); border-left-color: var(--contributor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--contributor) 26%, transparent), 0 0 16px color-mix(in srgb, var(--contributor) 18%, transparent); }

@media (max-width: 700px) {
  .editor,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor { height: auto; min-height: 0; }
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write { min-height: 240px; height: 240px; padding: 24px 0 44px; }
  .version-heading > span:last-child { display: none; }
  .audio-dock { padding: 10px 18px; }
  .audio-dock-head { align-items: flex-start; }
  .audio-tracks article { grid-template-columns: 1fr 28px; }
  .audio-tracks audio { grid-column: 1 / -1; grid-row: 2; }
}

/* V12: a calm desktop song desk instead of a phone-shaped control stack. */
.version-tools {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-top: 8px;
}
.version-state { min-width: 0; }
.version-view-actions { display: flex; align-items: center; gap: 6px; }
.version-settings { position: relative; z-index: 8; }
.version-settings > summary {
  list-style: none;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.22);
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.version-settings > summary::-webkit-details-marker { display: none; }
.version-settings[open] > summary { border-color: var(--gold); color: var(--ink); background: var(--accent-soft); }
.version-settings-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: 210px;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: 0 18px 44px var(--glow);
}
.version-settings-menu button { width: 100%; padding: 8px 9px; text-align: left; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.settings-row button { text-align: center; }
body[data-theme="midnight-studio"] .version-settings > summary {
  color: #b9c8e2;
  background: rgba(34, 50, 83, .42);
  border-color: rgba(91, 123, 181, .38);
}
body[data-theme="midnight-studio"] .version-settings-menu {
  background: #111629;
  border-color: rgba(91, 123, 181, .48);
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
}
body[data-theme="midnight-studio"] .title-line { align-items: center; }
body[data-theme="midnight-studio"] .title { width: min(800px, calc(100% - 190px)); font-size: clamp(30px, 3vw, 46px); }
body[data-theme="midnight-studio"] .take-dock { padding: 14px 36px; gap: 12px 16px; }
body[data-theme="midnight-studio"] .capture-actions button,
body[data-theme="midnight-studio"] .take-upload { padding: 9px 12px; font-size: 10px; }
body[data-theme="midnight-studio"] .write { padding-inline: clamp(48px, 7vw, 118px); font-size: 19px; line-height: 1.72; }
body[data-theme="midnight-studio"] .footer { padding: 11px 24px; }

@media (max-width: 950px) {
  .version-tools { grid-template-columns: 1fr auto; }
  .version-view-actions { grid-column: 1; grid-row: 2; justify-self: start; }
  .version-settings { grid-column: 2; grid-row: 1 / span 2; }
  body[data-theme="midnight-studio"] .editor { width: calc(100% - 32px); margin: 16px; }
}
@media (max-width: 700px) {
  .version-tools { display: flex; align-items: center; flex-wrap: wrap; }
  .version-state { width: 100%; }
  .version-settings-menu { position: fixed; inset: auto 14px 78px 68px; width: auto; }
  body[data-theme="midnight-studio"] .head { padding: 22px 18px 13px; }
  body[data-theme="midnight-studio"] .title { width: 100%; }
  body[data-theme="midnight-studio"] .take-dock { padding: 12px 18px; }
  body[data-theme="midnight-studio"] .write { padding-inline: 24px; }
}

/* V13: the writing desk never follows the length of a version's lyrics. */
.editor,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor {
  --take-dock-height: clamp(132px, 18dvh, 190px);
  height: min(820px, calc(100dvh - 36px));
  min-height: min(620px, calc(100dvh - 36px));
  grid-template-rows: auto var(--take-dock-height) minmax(0, 1fr) auto;
  align-self: center;
}

body[data-theme="secret-garden"] .editor {
  height: calc(100dvh - 36px);
  min-height: 0;
}

body[data-theme="midnight-studio"] .editor {
  height: calc(100dvh - 48px);
  min-height: 0;
  align-self: start;
}

.head { min-height: 0; }
.version-state { overflow: hidden; }
.version-state > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.take-dock {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.write,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write,
body[data-theme="secret-garden"] .write,
body[data-theme="midnight-studio"] .write {
  align-self: stretch;
  width: min(860px, calc(100% - 72px));
  height: 100%;
  min-height: 0;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.provenance-reader {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 700px) {
  .editor,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
  body[data-theme="secret-garden"] .editor,
  body[data-theme="midnight-studio"] .editor {
    --take-dock-height: clamp(124px, 18dvh, 156px);
    height: calc(100dvh - 16px);
    min-height: 0;
    align-self: start;
  }

  .write,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .write,
  body[data-theme="secret-garden"] .write,
  body[data-theme="midnight-studio"] .write {
    width: calc(100% - 36px);
    height: 100%;
    min-height: 0;
  }
}

/* V37X — the modal always has a visible launcher. */
body .version-view-actions .melody-launcher,
body .focus-actions .melody-launcher {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: color-mix(in srgb, var(--lavender) 66%, var(--line));
  background: color-mix(in srgb, var(--lavender) 16%, var(--surface-solid));
  color: var(--ink);
  font-weight: 800;
}
body .melody-launcher::before {
  content: "♪";
  color: color-mix(in srgb, var(--gold) 72%, var(--lavender));
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--lavender) 72%, transparent);
}
body .melody-launcher[aria-expanded="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lavender) 24%, transparent);
}

/* V38X — performance teleprompter. */
body .melodywriter-lite .melody-simple {
  width: min(940px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto auto 42px 58px minmax(210px, 1fr) 30px 34px 30px 52px 34px 72px 32px 58px auto;
  gap: 6px;
}
.melody-scope {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.melody-scope button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 800;
}
.melody-scope button.active {
  border-color: color-mix(in srgb, var(--gold) 72%, var(--lavender));
  background: linear-gradient(115deg, color-mix(in srgb, var(--rust) 54%, var(--surface-solid)), color-mix(in srgb, var(--lavender) 48%, var(--surface-solid)));
  color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lavender) 16%, transparent);
}
.melody-scope button:disabled { cursor: default; opacity: .4; }
.melody-teleprompter {
  display: grid;
  min-width: 0;
  min-height: 210px;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lavender) 52%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 82%, #050711);
  box-shadow: inset 0 0 36px color-mix(in srgb, var(--lavender) 9%, transparent);
}
.melody-teleprompter > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 38%, transparent);
}
.melody-teleprompter > header div span,
.melody-teleprompter > header div strong { display: block; }
.melody-teleprompter > header div span {
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.melody-teleprompter > header div strong { margin-top: 2px; color: var(--ink); font-size: 14px; }
.melody-teleprompter > header label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.melody-teleprompter > header select,
.melody-teleprompter > header button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--form-field);
  color: var(--form-text);
  cursor: pointer;
  font-size: 13px !important;
}
.melody-teleprompter > header select { padding-inline: 8px; }
.melody-teleprompter > header button { padding-inline: 10px; font-weight: 800; }
.melody-teleprompter-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 34px clamp(24px, 6vw, 66px) 55%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 58%, var(--lavender)) transparent;
}
.melody-teleprompter-scroll p {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 13px;
  margin: 0 0 17px;
  color: var(--ink);
  font: clamp(22px, 2.2vw, 31px)/1.42 Newsreader, Georgia, serif;
}
.melody-teleprompter-scroll p span { padding-top: .45em; color: var(--muted); font: 10px/1 system-ui, sans-serif; opacity: .68; }
.melody-teleprompter-scroll p strong { font-weight: 500; }
.melody-teleprompter-scroll h4 {
  margin: 13px 0 18px 41px;
  color: var(--gold-dark);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.teleprompter-break { height: 24px; }
.melody-teleprompter.line .melody-teleprompter-scroll { display: grid; align-content: center; padding-bottom: 34px; }
body.recording-melody .melody-teleprompter {
  border-color: color-mix(in srgb, #ff6671 62%, var(--lavender));
  box-shadow: inset 0 0 42px color-mix(in srgb, #d52d35 10%, transparent), 0 0 0 2px color-mix(in srgb, #d52d35 12%, transparent);
}

@media (max-width: 700px) {
  body .melodywriter-lite .melody-simple {
    grid-template-rows: auto 0 42px 54px minmax(220px, 1fr) 0 34px 28px 52px 34px 72px 32px 52px auto;
    gap: 5px;
  }
  .melody-simple-intro,
  .melody-direction { display: none; }
  .melody-scope button { font-size: 12px !important; }
  .melody-teleprompter > header { grid-template-columns: minmax(0, 1fr) auto; }
  .melody-teleprompter > header label { display: none; }
  .melody-teleprompter-scroll { padding-inline: 18px; }
  .melody-teleprompter-scroll p { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 22px; }
}

/* V33X — static capture matrix. Geometry is identical in every theme. */
.melodywriter-lite { container-type: size; }
.melody-simple {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 56px auto auto 52px 62px 34px auto;
  gap: 6px;
  overflow: hidden;
  padding: 12px;
}
.melody-simple-head h3 { font-size: 22px; }
.melody-simple-intro {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.melody-line-picker { gap: 3px; }
.melody-line-picker select,
.melody-writer-picker select { height: 34px; font-size: 13px !important; }
.melody-line-preview { min-height: 56px; max-height: 56px; padding: 7px 10px; font-size: 15px; }
.melody-pick-sheet {
  min-height: 30px;
  border: 1px dashed color-mix(in srgb, var(--lavender) 58%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.melody-writer-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.melody-writer-picker > span,
.melody-writer-label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.melody-writer-picker select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--form-field); color: var(--form-text); }
.melody-sing { min-height: 52px; }
.melody-sing.recording { border-color: #ff6671; background: linear-gradient(115deg, #a9192b, #d63e4a); }
.melody-simple .melody-recorder-stage,
.melody-simple .melody-recorder-stage[hidden] {
  display: grid;
  min-height: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 8px;
}
.melody-simple .melody-recorder-stage[hidden] { visibility: hidden; }
.melody-recording-live { min-width: 0; }
.melody-recording-live div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.melody-recording-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.melody-cancel { min-height: 25px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; }
body.recording-melody .melody-simple-intro,
body.recording-melody .melody-line-picker,
body.recording-melody .melody-direction,
body.recording-melody .melody-sing,
body.recording-melody .melody-take-slots,
body.recording-melody .melody-line-player,
body.recording-melody .melody-no-take,
body.recording-melody .melody-simple-foot { display: initial; }
body.recording-melody .melody-simple { display: grid; }
body.recording-melody .melody-take-slots { display: grid; }
body.recording-melody .melody-line-player { display: block; }
body.recording-melody .melody-simple-foot { display: flex; }
.melody-take-slot { min-height: 62px; }
.melody-take-slot.comp { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 68%, transparent); }
.melody-take-slot.private { border-style: dashed; }
.melody-take-slot > button:first-child { min-height: 38px; padding: 5px 5px 1px; }
.melody-slot-flags { position: absolute; right: 4px; bottom: 3px; display: flex; gap: 2px; }
.melody-slot-flags button {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  filter: grayscale(.7);
}
.melody-slot-flags button.active { background: color-mix(in srgb, var(--accent-soft) 72%, transparent); color: var(--gold-dark); filter: none; }
.melody-take-slot:not(:has(.melody-delete)) .melody-slot-flags button { pointer-events: none; }
.melody-delete { top: -5px; right: -4px; width: 19px; height: 19px; font-size: 12px !important; }
.melody-line-player { height: 30px; }
.melody-simple-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; white-space: normal; }
.melody-simple-foot span { font-size: 10px; }
.melody-simple-foot strong { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lyric-capture-sheet {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
}
.lyric-capture-sheet > header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.lyric-capture-sheet > header p,
.lyric-capture-sheet > header h3 { margin: 0; }
.lyric-capture-sheet > header p { color: var(--gold-dark); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lyric-capture-sheet > header h3 { color: var(--ink); font: 24px/1.1 Newsreader, Georgia, serif; }
.lyric-capture-sheet > header button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 800; }
.capture-lyric-list { height: calc(100% - 74px); overflow: auto; padding: 18px clamp(22px, 4vw, 52px) 42px; }
.capture-lyric-section { margin: 0 0 20px; }
.capture-lyric-section > div { display: grid; gap: 3px; padding-left: 14px; border-left: 1px solid var(--line); }
.capture-lyric-target { display: grid; width: 100%; gap: 2px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.capture-lyric-target span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.capture-lyric-target strong { font: var(--lyric-font-size)/var(--lyric-line-height) var(--lyric-font-family); }
.capture-lyric-target em { color: var(--muted); font-size: 12px; font-style: normal; }
.capture-lyric-target:hover,
.capture-lyric-target:focus-visible { border-color: color-mix(in srgb, var(--lavender) 58%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 54%, transparent); }
.capture-lyric-target.active { border-color: var(--gold); background: color-mix(in srgb, var(--accent-soft) 80%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 14%, transparent); }
.capture-lyric-target.section-target { margin-bottom: 5px; border-style: dashed; }

@container (max-height: 500px) {
  .melody-simple { grid-template-rows: auto auto 48px auto auto 46px 56px 30px auto; }
  .melody-simple-intro,
  .melody-direction { display: none !important; }
  .melody-line-preview { min-height: 48px; max-height: 48px; }
}

@media (max-width: 800px) {
  .lyric-capture-sheet { border-right: 0; }
  .lyric-capture-sheet > header { padding-inline: 16px; }
  .capture-lyric-list { padding-inline: 16px; }
}

/* V14: catalog snowman menus keep song management in the left drawer. */
.song-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.song-item:hover, .song-item:focus-within { border-color: var(--line); background: rgba(255,255,255,.30); }
.song-item.active { border-color: var(--line); background: var(--accent-soft); }
.song-item .song {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}
.song-item .song:hover, .song-item .song:focus-visible { transform: none; background: transparent; }
.song-menu-toggle {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 30px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.song-menu-toggle:hover, .song-menu-toggle:focus-visible {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--ink);
  outline: none;
}
.song-menu-popover {
  position: fixed;
  z-index: 45;
  display: grid;
  width: 270px;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: 0 18px 46px var(--glow);
}
.song-menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 3px; }
.song-menu-heading p { margin: 0; color: var(--gold-dark); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.song-menu-heading strong { display: block; max-width: 205px; margin-top: 4px; overflow: hidden; color: var(--ink); font: 16px/1.1 Newsreader, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.song-menu-heading button { flex: 0 0 auto; width: 28px; height: 28px; min-height: 0; padding: 0; justify-content: center; text-align: center; }
.song-menu-popover label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.song-menu-popover select, .song-menu-popover button {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 38%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  text-align: left;
}
.song-menu-popover button { display: flex; align-items: center; gap: 6px; }
.song-menu-popover .song-menu-heading button { flex: 0 0 auto; width: 28px; height: 28px; min-height: 0; padding: 0; justify-content: center; }
.song-menu-popover .song-menu-delete { color: var(--danger); }
.song-menu-popover > small { color: var(--muted); font-size: 8px; line-height: 1.45; }
body[data-theme="midnight-studio"] .song-menu-popover {
  background: #111629;
  border-color: rgba(91,123,181,.48);
  box-shadow: 0 22px 55px rgba(0,0,0,.58);
}
body[data-theme="midnight-studio"] .song-menu-popover select,
body[data-theme="midnight-studio"] .song-menu-popover button { color: #eaf2ff; background: rgba(34,50,83,.72); border-color: rgba(91,123,181,.42); }
body[data-theme="midnight-studio"] .song-menu-popover .song-menu-delete { color: #ff9eaa; }

@media (max-width: 779px) {
  .song-menu-popover.song-menu-sheet { right: 12px; width: auto; }
}

/* V16: quiet, theme-matched scrollbars replace the native white rails. */
.drawer,
.modal,
.write,
.take-dock,
.take-playlist,
.provenance-reader,
.compare-grid,
.melodywriter-lite {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 46%, var(--muted)) transparent;
  scrollbar-gutter: stable;
}
.drawer::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.write::-webkit-scrollbar,
.take-dock::-webkit-scrollbar,
.take-playlist::-webkit-scrollbar,
.provenance-reader::-webkit-scrollbar,
.compare-grid::-webkit-scrollbar,
.melodywriter-lite::-webkit-scrollbar { width: 8px; height: 8px; }
.drawer::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.write::-webkit-scrollbar-track,
.take-dock::-webkit-scrollbar-track,
.take-playlist::-webkit-scrollbar-track,
.provenance-reader::-webkit-scrollbar-track,
.compare-grid::-webkit-scrollbar-track,
.melodywriter-lite::-webkit-scrollbar-track { background: transparent; }
.drawer::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.write::-webkit-scrollbar-thumb,
.take-dock::-webkit-scrollbar-thumb,
.take-playlist::-webkit-scrollbar-thumb,
.provenance-reader::-webkit-scrollbar-thumb,
.compare-grid::-webkit-scrollbar-thumb,
.melodywriter-lite::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 46%, var(--muted));
  background-clip: padding-box;
}
.drawer::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.write::-webkit-scrollbar-thumb:hover,
.take-dock::-webkit-scrollbar-thumb:hover,
.take-playlist::-webkit-scrollbar-thumb:hover,
.provenance-reader::-webkit-scrollbar-thumb:hover,
.compare-grid::-webkit-scrollbar-thumb:hover,
.melodywriter-lite::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
body[data-theme="midnight-studio"] .drawer,
body[data-theme="midnight-studio"] .modal,
body[data-theme="midnight-studio"] .write,
body[data-theme="midnight-studio"] .take-dock,
body[data-theme="midnight-studio"] .take-playlist,
body[data-theme="midnight-studio"] .provenance-reader,
body[data-theme="midnight-studio"] .compare-grid,
body[data-theme="midnight-studio"] .melodywriter-lite { scrollbar-color: rgba(95, 144, 214, .68) transparent; }
body[data-theme="midnight-studio"] .drawer::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .modal::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .write::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .take-dock::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .take-playlist::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .provenance-reader::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .compare-grid::-webkit-scrollbar-thumb,
body[data-theme="midnight-studio"] .melodywriter-lite::-webkit-scrollbar-thumb {
  background: rgba(95, 144, 214, .68);
  background-clip: padding-box;
}

/* V18: the lyric scrollbar divides the page from MelodyWriter Lite. */
.writing-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.writing-workspace .write,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .writing-workspace .write,
body[data-theme="secret-garden"] .writing-workspace .write,
body[data-theme="midnight-studio"] .writing-workspace .write {
  width: 100%;
  max-width: none;
  height: 100%;
  padding-inline: clamp(44px, 6vw, 104px);
  border-right: 1px solid var(--line);
}
.melodywriter-lite {
  min-width: 0;
  overflow-y: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 92% 3%, color-mix(in srgb, var(--lavender) 28%, transparent), transparent 28%),
    linear-gradient(165deg, color-mix(in srgb, var(--accent-soft) 42%, var(--surface-solid)), color-mix(in srgb, var(--surface-solid) 78%, transparent));
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 46%, var(--muted)) transparent;
}
.melody-rack {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--lavender) 46%, var(--line));
  border-radius: 15px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--lavender) 10%, transparent), transparent),
    linear-gradient(155deg, color-mix(in srgb, var(--surface-solid) 88%, var(--accent-soft)), color-mix(in srgb, var(--surface-solid) 72%, var(--lavender)));
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 12px 30px rgba(21,22,28,.10);
}
.melody-rack::before,
.melody-rack::after { position: absolute; top: 7px; width: 5px; height: 5px; border: 1px solid color-mix(in srgb, var(--muted) 54%, transparent); border-radius: 50%; background: var(--surface-solid); content: ''; }
.melody-rack::before { left: 7px; }
.melody-rack::after { right: 7px; }
.melody-rack-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 4px 12px; }
.melody-rack-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.melody-rack-brand > i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #62d9c7; box-shadow: 0 0 7px #62d9c7, 0 0 16px color-mix(in srgb, #62d9c7 64%, transparent); }
.melody-rack-brand p { margin: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.melody-rack-brand h3 { margin: 0; color: var(--ink); font: 27px/1 Newsreader, Georgia, serif; }
.melody-rack-ready { padding: 5px 8px; border: 1px solid color-mix(in srgb, #62d9c7 48%, var(--line)); border-radius: 999px; color: color-mix(in srgb, #178c7c 80%, var(--ink)); font-size: 11px; font-weight: 800; }
.melody-rack-screen { padding: 15px 13px; border: 1px solid color-mix(in srgb, var(--lavender) 42%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--surface-solid) 84%, transparent); text-align: center; }
.melody-rack-screen strong { display: block; margin-top: 9px; color: var(--ink); font: 19px/1.2 Newsreader, Georgia, serif; }
.melody-rack-screen p { margin: 6px auto 0; max-width: 240px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.melody-rack-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.melody-rack-wave i { width: 3px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #62d9c7, var(--lavender)); box-shadow: 0 0 8px color-mix(in srgb, var(--lavender) 32%, transparent); }
.melody-rack-wave i:nth-child(3n) { height: 17px; }
.melody-rack-wave i:nth-child(4n) { height: 26px; }
.melody-rack-wave i:nth-child(7n) { height: 32px; }
.melody-rack-steps { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 10px 0; padding: 0; list-style: none; }
.melody-rack-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface-solid) 42%, transparent); }
.melody-rack-steps b { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--lavender) 54%, var(--line)); border-radius: 50%; color: var(--gold-dark); font-size: 12px; }
.melody-rack-steps span { min-width: 0; }
.melody-rack-steps strong,
.melody-rack-steps small { display: block; }
.melody-rack-steps strong { color: var(--ink); font-size: 14px; }
.melody-rack-steps small { margin-top: 1px; color: var(--muted); font-size: 12px !important; }
.melody-capture-actions { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7px; }
.melody-capture-actions button,
.melody-capture-actions label {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.28);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.melody-record { border-color: color-mix(in srgb, var(--rust) 58%, var(--line)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--rust) 22%, transparent), color-mix(in srgb, var(--lavender) 18%, transparent)) !important; }
.melody-record > span { display: inline-block; margin-right: 5px; color: #d52d35; animation: record-pulse 1.8s infinite; }
.melody-upload.uploading { cursor: wait; opacity: .6; }
.melody-recorder-stage {
  display: grid;
  gap: 10px;
  margin-top: 9px;
  padding: 13px;
  border: 2px solid color-mix(in srgb, #d52d35 68%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, #d52d35 8%, var(--surface-solid));
  box-shadow: 0 0 22px color-mix(in srgb, #d52d35 12%, transparent);
}
.melody-recorder-stage[hidden] { display: none; }
.melody-recording-live { display: flex; align-items: center; gap: 10px; }
.melody-recording-live > i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: #d52d35; box-shadow: 0 0 0 0 rgba(213,45,53,.54); animation: record-pulse 1.2s infinite; }
.melody-recording-live span,
.melody-recording-live strong { display: block; }
.melody-recording-live span { color: var(--ink); font-size: 14px; font-weight: 800; }
.melody-recording-live strong { margin-top: 2px; color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.melody-recorder-stage > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.melody-recorder-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.melody-recorder-actions button { min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface-solid) 74%, transparent); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 800; }
.melody-recorder-actions .melody-stop { border-color: #d52d35; background: #d52d35; color: white; }
.melody-voiceprint { margin-top: 11px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-solid) 58%, transparent); }
.melody-voiceprint canvas { display: block; width: 100%; height: 92px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--lavender) 10%, transparent), transparent); }
.melody-voiceprint canvas.unavailable { opacity: .35; }
.melody-voiceprint audio { display: block; width: 100%; height: 30px; margin-top: 7px; }
.melody-voiceprint p { margin: 7px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.melody-empty { margin-top: 11px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--lavender) 60%, var(--line)); border-radius: 12px; text-align: center; }
.melody-empty span { color: var(--ink); font: 16px Newsreader, Georgia, serif; }
.melody-empty p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.melody-ideas { display: grid; gap: 5px; margin-top: 10px; }
.melody-idea { display: grid; grid-template-columns: minmax(0, 1fr) 25px 25px; align-items: center; gap: 5px; padding: 5px; border: 1px solid transparent; border-radius: 9px; }
.melody-idea.selected { border-color: color-mix(in srgb, var(--lavender) 58%, var(--line)); background: color-mix(in srgb, var(--lavender) 13%, transparent); }
.melody-select { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.melody-select span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--gold)); color: white; font-size: 11px; }
.melody-select strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.melody-select small { color: var(--muted); font-size: 11px; }
.melody-rename, .melody-delete { width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.melody-delete { color: var(--danger); }
.melody-rack-foot { display: flex; align-items: center; gap: 6px; margin-top: 11px; padding: 9px 3px 1px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); color: var(--muted); font-size: 12px; }
.melody-rack-foot strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.melody-rack-foot i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #62d9c7; box-shadow: 0 0 8px #62d9c7; }
.melody-owner-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-solid) 54%, transparent); }
.melody-owner-slot span,
.melody-owner-slot strong { display: block; }
.melody-owner-slot span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.melody-owner-slot strong { margin-top: 2px; color: var(--ink); font: 15px Newsreader, Georgia, serif; }
.melody-owner-slot button { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--lavender) 52%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--lavender) 12%, var(--surface-solid)); color: var(--ink); cursor: pointer; font-size: 12px; }
.melody-modal-launch {
  border-color: color-mix(in srgb, var(--lavender) 62%, var(--gold)) !important;
  background: linear-gradient(115deg, color-mix(in srgb, var(--lavender) 36%, transparent), color-mix(in srgb, var(--gold) 30%, transparent)) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--lavender) 18%, transparent);
}
.melody-modal-launch { width: 100%; margin-top: 18px; }
.melody-room-open { overflow: hidden; }
.melody-room {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
  background: #070b13;
  color: #edf3fa;
}
.melody-room-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(111, 151, 190, .28);
  background: linear-gradient(90deg, #0b1320, #101a29 55%, #0b1320);
}
.melody-room-bar button { min-height: 40px; padding: 9px 13px; border: 1px solid rgba(111,151,190,.38); border-radius: 10px; background: rgba(31,49,72,.64); color: #eaf3fb; cursor: pointer; font-size: 13px; }
.melody-room-back { color: #66d6df !important; }
.melody-room-identity { min-width: 0; }
.melody-room-identity p { margin: 0; color: #66d6df; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.melody-room-identity strong { display: inline-block; max-width: min(54vw, 720px); overflow: hidden; color: #f5f8fc; font: 20px/1.15 Newsreader, Georgia, serif; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.melody-room-identity span { margin-left: 10px; color: #9fb1c1; font-size: 12px; }
.melody-room-actions { display: flex; align-items: center; gap: 12px; }
.melody-room-actions > span { color: #9fb1c1; font-size: 12px; }
.melody-room-body { display: grid; grid-template-columns: clamp(360px, 30vw, 520px) minmax(0, 1fr); min-height: 0; }
.melody-room.lyrics-hidden .melody-room-body { grid-template-columns: 0 minmax(0, 1fr); }
.melody-room-lyrics {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  transition: opacity .18s ease;
}
.melody-room.lyrics-hidden .melody-room-lyrics { visibility: hidden; opacity: 0; }
.melody-room-lyrics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.melody-room-lyrics-head h2 { margin: 4px 0 0; font: 26px/1.1 Newsreader, Georgia, serif; }
.melody-room-lyrics-head > span { color: var(--gold-dark); font-size: 12px; font-weight: 800; }
.melody-room-lyrics-text {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  overflow: auto;
  padding: 24px 28px 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--gold);
}
.melody-room-lyrics footer { display: grid; gap: 4px; padding: 13px 22px; border-top: 1px solid var(--line); background: var(--form-panel); }
.melody-room-lyrics footer span { color: var(--muted); font-size: 12px; }
.melody-room-lyrics footer strong { font: 15px/1.35 Newsreader, Georgia, serif; }
.melody-room-studio { min-width: 0; min-height: 0; overflow: hidden; background: #080d14; }
.melody-room-studio iframe { display: block; width: 100%; height: 100%; border: 0; background: #080d14; }
.pro-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.pro-boundary article { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.24); }
.pro-boundary span, .pro-boundary strong { display: block; }
.pro-boundary span { color: var(--gold-dark); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pro-boundary strong { margin-top: 5px; font: 19px Newsreader, Georgia, serif; }
.pro-boundary p, .modal-intro, .pro-coming { color: var(--muted); font-size: 11px; line-height: 1.55; }
.pro-coming { margin: 14px 0 0; }
body.recording-take .melodywriter-lite { opacity: .72; }
body.recording-take .melodywriter-lite button,
body.recording-take .melodywriter-lite label { pointer-events: none; }
body.recording-melody .rail button,
body.recording-melody .version-organizer button,
body.recording-melody .tabs button,
body.recording-melody .footer,
body.recording-melody .take-player,
body.recording-melody .take-playlist { opacity: .42; pointer-events: none; }
body[data-theme="midnight-studio"] .melodywriter-lite { background: radial-gradient(circle at 90% 2%, rgba(99,71,163,.30), transparent 30%), linear-gradient(165deg, rgba(15,24,45,.96), rgba(8,13,28,.98)); border-color: rgba(91,123,181,.34); scrollbar-color: rgba(95,144,214,.68) transparent; }
body[data-theme="midnight-studio"] .melody-rack-brand h3,
body[data-theme="midnight-studio"] .melody-rack-screen strong,
body[data-theme="midnight-studio"] .melody-rack-steps strong,
body[data-theme="midnight-studio"] .melody-rack-foot strong,
body[data-theme="midnight-studio"] .melody-owner-slot strong,
body[data-theme="midnight-studio"] .melody-empty span,
body[data-theme="midnight-studio"] .melody-select { color: #eef4ff; }
body[data-theme="midnight-studio"] .melody-rack-ready { color: #78e6d6; }
body[data-theme="midnight-studio"] .melody-capture-actions button,
body[data-theme="midnight-studio"] .melody-capture-actions label,
body[data-theme="midnight-studio"] .melody-owner-slot button { color: #eef4ff; background: rgba(34,50,83,.52); border-color: rgba(91,123,181,.46); }
body[data-theme="midnight-studio"] .melody-recorder-stage { background: rgba(54,17,28,.82); border-color: #ff6671; }
body[data-theme="midnight-studio"] .melody-recording-live span,
body[data-theme="midnight-studio"] .melody-recording-live strong { color: #f7f9ff; }
body[data-theme="midnight-studio"] .melody-recorder-actions button { color: #eef4ff; background: rgba(34,50,83,.72); border-color: rgba(91,123,181,.62); }
body[data-theme="midnight-studio"] .melody-recorder-actions .melody-stop { color: white; background: #d63e4a; border-color: #ff6671; }
body[data-theme="midnight-studio"] .melody-modal-launch { color: #eef4ff !important; }
body[data-theme="secret-garden"] .melodywriter-lite { background: linear-gradient(165deg, rgba(229,241,208,.86), rgba(192,218,177,.78)); }

/* V28: MelodyWriter is the default lyric companion; session capture lives in LIVE. */
.editor,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
body[data-theme="secret-garden"] .editor,
body[data-theme="midnight-studio"] .editor,
.editor.focus-mode,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor.focus-mode,
body[data-theme="secret-garden"] .editor.focus-mode,
body[data-theme="midnight-studio"] .editor.focus-mode {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.live-toggle { position: relative; padding-left: 21px !important; color: var(--ink) !important; font-weight: 850 !important; letter-spacing: .08em; }
.live-toggle::before { position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: #d52d35; box-shadow: 0 0 8px rgba(213,45,53,.62); content: ''; }
.live-drawer {
  min-height: 0;
  max-height: min(390px, 44dvh);
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow: inset 0 10px 24px color-mix(in srgb, var(--glow) 42%, transparent);
}
.live-drawer[hidden] { display: none; }
.live-drawer .take-dock,
.focus-mode .live-drawer .take-dock {
  height: auto;
  min-height: 128px;
  max-height: none;
  padding: 14px 30px;
  overflow: visible;
  visibility: visible;
  border-bottom: 0;
}
.melody-capture-actions { margin-top: 10px; }
.melody-playback { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; }
.melody-playback button { min-height: 39px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--lavender) 58%, var(--line)); border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--lavender) 20%, var(--surface-solid)), color-mix(in srgb, var(--gold) 14%, var(--surface-solid))); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 850; }
.melody-playback > button:first-child { grid-column: 1 / -1; min-height: 45px; }
.melody-playback button:disabled { cursor: wait; opacity: .64; }
.melody-take-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.melody-take-meta strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.melody-take-meta em { color: var(--muted); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
body[data-theme="midnight-studio"] .live-drawer { background: rgba(8,13,28,.98); border-color: rgba(91,123,181,.42); }
body[data-theme="midnight-studio"] .live-toggle { color: #f1f5ff !important; }
body[data-theme="midnight-studio"] .melody-playback button { color: #f1f5ff; background: rgba(38,54,91,.76); border-color: rgba(90,140,211,.62); }
body[data-theme="midnight-studio"] .melody-take-meta strong { color: #f1f5ff; }

@media (min-width: 851px) {
  .focus-mode .writing-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
  .focus-mode .melodywriter-lite {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    transform: none;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
  .focus-mode .melodywriter-lite::before { display: none; }
}

/* The compact Melody button opens the same simple catcher on phones. */
@media (max-width: 800px) {
  .editor .writing-workspace { position: static; }
  .editor .melodywriter-lite,
  .editor.focus-mode .melodywriter-lite {
    position: absolute;
    z-index: 34;
    inset: 0 0 0 auto;
    display: block;
    width: min(340px, calc(100% - 18px));
    height: 100%;
    transform: translateX(100%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .editor.melody-open .melodywriter-lite {
    transform: translateX(0);
    box-shadow: -18px 0 46px var(--glow);
  }
}

/* V32X — one dependable room layout; themes change atmosphere, never geometry. */
.privacy-stage,
body[data-theme="secret-garden"] .privacy-stage,
body[data-theme="midnight-studio"] .privacy-stage {
  place-items: center start;
  padding: clamp(26px, 5vw, 80px);
}
.privacy-panel,
body[data-theme="secret-garden"] .privacy-panel,
body[data-theme="midnight-studio"] .privacy-panel {
  width: min(58vw, 760px);
  margin: 0;
  border-radius: 38px;
}
.editor,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
body[data-theme="secret-garden"] .editor,
body[data-theme="midnight-studio"] .editor,
.editor.focus-mode,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor.focus-mode,
body[data-theme="secret-garden"] .editor.focus-mode,
body[data-theme="midnight-studio"] .editor.focus-mode {
  width: min(68vw, 1120px);
  height: calc(100dvh - 48px);
  min-height: 0;
  margin: 24px auto 24px clamp(20px, 3vw, 58px);
  align-self: start;
  border-radius: 24px;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.title-line,
body[data-theme="midnight-studio"] .title-line { align-items: center; }
.title,
body[data-theme="midnight-studio"] .title {
  width: min(800px, calc(100% - 190px));
  font-size: clamp(28px, 2.3vw, 38px);
}
.take-dock,
body[data-theme="midnight-studio"] .take-dock { padding-inline: 36px; }
.footer,
body[data-theme="midnight-studio"] .footer { padding: 11px 24px; }
.writing-workspace,
.focus-mode .writing-workspace {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.writing-workspace .write,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .writing-workspace .write,
body[data-theme="secret-garden"] .writing-workspace .write,
body[data-theme="midnight-studio"] .writing-workspace .write {
  width: 100%;
  height: 100%;
  margin: 0;
  border-right: 1px solid var(--line);
}

/* MelodyWriter for lyricists: choose one line, sing, and keep three tries. */
.melodywriter-lite,
body[data-theme="secret-garden"] .melodywriter-lite,
body[data-theme="midnight-studio"] .melodywriter-lite {
  display: block;
  min-width: 0;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  border-left: 0;
}
.melody-simple {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--lavender) 42%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(21,22,28,.10);
}
.melody-simple-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.melody-simple-head p,
.melody-simple-head h3 { margin: 0; }
.melody-simple-head p {
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}
.melody-simple-head h3 {
  margin-top: 2px;
  color: var(--ink);
  font: 25px/1 Newsreader, Georgia, serif;
}
.melody-simple-head > span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.melody-simple-head > button {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 20px !important;
}
.melody-simple-intro {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.melody-line-picker { display: grid; gap: 5px; }
.melody-line-picker > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.melody-line-picker select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--form-field);
  color: var(--form-text);
  font-size: 14px !important;
}
.melody-line-preview {
  display: -webkit-box;
  min-height: 50px;
  max-height: 68px;
  margin: 0;
  overflow: hidden;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
  color: var(--ink);
  font: 16px/1.45 Newsreader, Georgia, serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.melody-direction {
  display: -webkit-box;
  margin: -2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.melody-direction b { color: var(--gold-dark); }
.melody-sing {
  flex: 0 0 auto;
  width: 100%;
  min-height: 52px;
  border: 1px solid color-mix(in srgb, #d52d35 66%, var(--line));
  border-radius: 12px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--rust) 78%, #9f2741), color-mix(in srgb, var(--lavender) 60%, #4e3f95));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--rust) 24%, transparent);
  color: white;
  cursor: pointer;
  font-size: 17px !important;
  font-weight: 900;
  letter-spacing: .08em;
}
.melody-sing > span { margin-right: 8px; color: #ffbbc0; animation: record-pulse 1.8s infinite; }
.melody-sing:disabled { cursor: default; filter: saturate(.45); opacity: .68; }
.melody-take-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.melody-take-slot {
  position: relative;
  min-width: 0;
  min-height: 55px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid) 68%, transparent);
}
.melody-take-slot.selected { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 15%, transparent); }
.melody-take-slot > button:first-child {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 55px;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 5px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.melody-take-slot b { grid-row: 1 / span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--gold)); color: white; font-size: 10px; }
.melody-take-slot span { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.melody-take-slot em { color: var(--muted); font-size: 11px; font-style: normal; }
.melody-take-slot.empty { display: grid; align-content: center; padding: 7px; border-style: dashed; color: var(--muted); text-align: center; }
.melody-take-slot.empty span,
.melody-take-slot.empty em { display: block; }
.melody-take-slot.empty span { font-size: 12px; font-weight: 800; }
.melody-delete {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-solid);
}
.melody-line-player { display: block; width: 100%; height: 32px; }
.melody-no-take { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.melody-simple-foot { margin-top: auto; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.melody-simple-foot strong { color: var(--ink); }
.melody-simple .melody-recorder-stage { margin: 0; }
body.recording-melody .melody-simple-intro,
body.recording-melody .melody-line-picker,
body.recording-melody .melody-direction,
body.recording-melody .melody-sing,
body.recording-melody .melody-take-slots,
body.recording-melody .melody-line-player,
body.recording-melody .melody-no-take,
body.recording-melody .melody-simple-foot { display: none; }
body[data-theme="midnight-studio"] .melody-simple-head h3,
body[data-theme="midnight-studio"] .melody-line-preview,
body[data-theme="midnight-studio"] .melody-take-slot > button:first-child,
body[data-theme="midnight-studio"] .melody-simple-foot strong { color: #eef4ff; }
.version-view-actions [data-focus-melody] { display: none; }

@media (max-width: 950px) {
  .editor,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
  body[data-theme="secret-garden"] .editor,
  body[data-theme="midnight-studio"] .editor { width: calc(100% - 32px); margin: 16px; }
  .privacy-panel,
  body[data-theme="secret-garden"] .privacy-panel,
  body[data-theme="midnight-studio"] .privacy-panel { width: min(760px, 100%); }
  .writing-workspace,
  .focus-mode .writing-workspace { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 800px) {
  .writing-workspace,
  .focus-mode .writing-workspace { grid-template-columns: minmax(0, 1fr); }
  .writing-workspace .write,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .writing-workspace .write,
  body[data-theme="secret-garden"] .writing-workspace .write,
  body[data-theme="midnight-studio"] .writing-workspace .write { border-right: 0; }
  .melodywriter-lite,
  body[data-theme="secret-garden"] .melodywriter-lite,
  body[data-theme="midnight-studio"] .melodywriter-lite,
  .focus-mode .melodywriter-lite {
    position: absolute;
    z-index: 34;
    inset: 0 0 0 auto;
    display: block;
    width: min(340px, calc(100% - 18px));
    height: 100%;
    transform: translateX(100%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .editor.melody-open .melodywriter-lite { transform: translateX(0); box-shadow: -18px 0 46px var(--glow); }
  .melody-simple-head > button { display: block; }
  .version-view-actions [data-focus-melody] { display: inline-block; }
}
@media (max-width: 700px) {
  .privacy-stage,
  body[data-theme="secret-garden"] .privacy-stage,
  body[data-theme="midnight-studio"] .privacy-stage { place-items: center; padding: 18px; }
  .editor,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
  body[data-theme="secret-garden"] .editor,
  body[data-theme="midnight-studio"] .editor {
    width: calc(100% - 16px);
    height: calc(100dvh - 16px);
    margin: 8px;
    border-radius: 18px;
  }
  .title,
  body[data-theme="midnight-studio"] .title { width: 100%; }
  .take-dock,
  body[data-theme="midnight-studio"] .take-dock { padding-inline: 18px; }
}

/* V31X — v0-informed Scenario workspace. One writing surface, one Story Packet. */
.story-editor .version-heading > span:last-child,
.story-editor .version-view-actions { display: none; }
.story-editor .version-tools { min-height: 20px; }
.story-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 54%, transparent);
}
.story-page,
.story-packet {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 58%, transparent) transparent;
}
.story-page {
  padding: clamp(26px, 4vw, 54px) clamp(28px, 5vw, 70px) 50px;
}
.story-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.story-page-head p,
.story-page-head span { margin: 0; }
.story-page-head p {
  color: var(--ink);
  font: 600 24px/1.1 Newsreader, Georgia, serif;
}
.story-page-head span {
  max-width: 440px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: right;
}
.story-page .story-scenario,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .story-page .story-scenario,
body[data-theme="secret-garden"] .story-page .story-scenario,
body[data-theme="midnight-studio"] .story-page .story-scenario {
  display: block;
  width: 100%;
  height: clamp(270px, 38vh, 470px);
  min-height: 270px;
  padding: 0 10px 22px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: Newsreader, Iowan Old Style, Baskerville, Georgia, serif !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  resize: none;
}
.story-page .story-scenario:focus {
  border-bottom-color: color-mix(in srgb, var(--gold) 76%, var(--line));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--gold) 26%, transparent);
}
.story-anchors { margin-top: 30px; }
.story-anchors > header { margin-bottom: 4px; }
.story-anchors h3 {
  margin: 0;
  color: var(--ink);
  font: 600 23px/1.2 Newsreader, Georgia, serif;
}
.story-anchors header p {
  margin: 5px 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.story-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.story-anchors > .story-field {
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
}
.story-field > span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
}
.story-field input,
.story-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif;
  resize: vertical;
}
.story-field textarea { min-height: 54px; }
.story-field input:focus,
.story-field textarea:focus {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--gold) 78%, transparent);
  padding-left: 10px;
}
.story-field input[readonly],
.story-field textarea[readonly] { cursor: default; }
.story-packet {
  border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
}
.story-packet-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
}
.story-packet-head h3,
.story-packet-head p { margin: 0; }
.story-packet-head h3 {
  color: var(--ink);
  font: 600 25px/1 Newsreader, Georgia, serif;
}
.story-packet-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}
.story-packet-head > span {
  flex: 0 0 auto;
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 750;
}
.packet-provenance,
.packet-empty-note {
  margin: 0;
  padding: 15px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.packet-provenance { display: grid; gap: 2px; }
.packet-provenance strong { color: var(--ink); font-size: 14px; }
.packet-provenance time { font-size: 13px; }
.packet-section {
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.packet-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 24px;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 750;
  list-style: none;
}
.packet-section summary::-webkit-details-marker { display: none; }
.packet-section summary b {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s ease;
}
.packet-section[open] summary b { transform: rotate(180deg); }
.packet-section summary em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}
.packet-section-body {
  display: grid;
  gap: 15px;
  padding: 0 24px 22px;
}
.packet-section-body .story-field > span { font-size: 14px; }
.packet-section-body .story-field input,
.packet-section-body .story-field textarea {
  min-height: 45px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
  font-size: 15px;
  line-height: 1.5;
}
.packet-section-body .story-field input:focus,
.packet-section-body .story-field textarea:focus { padding-left: 10px; }
.story-handoff {
  padding: 22px 24px 26px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}
.story-handoff .story-field textarea { min-height: 70px; }
.story-sing {
  width: 100%;
  margin-top: 18px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--lavender) 74%, white 14%);
  border-radius: 10px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--lavender) 78%, #225c92), color-mix(in srgb, var(--lavender) 82%, #8c5fd2));
  box-shadow: 0 0 24px color-mix(in srgb, var(--lavender) 35%, transparent);
  color: white;
  cursor: pointer;
  font-size: 15px !important;
  font-weight: 800;
}
.story-handoff > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.melody-rack-screen blockquote {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--gold) 72%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.melody-rack-screen blockquote span {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-theme="midnight-studio"] .story-workspace { background: rgba(5, 8, 18, .82); }
body[data-theme="midnight-studio"] .story-page { background: rgba(8, 12, 25, .78); }
body[data-theme="midnight-studio"] .story-packet,
body[data-theme="midnight-studio"] .story-packet-head { background: rgba(14, 20, 38, .96); }
body[data-theme="midnight-studio"] .story-packet { border-left-color: rgba(91, 123, 181, .34); }
body[data-theme="midnight-studio"] .story-field input,
body[data-theme="midnight-studio"] .story-field textarea,
body[data-theme="midnight-studio"] .story-page .story-scenario,
body[data-theme="midnight-studio"] .story-page-head p,
body[data-theme="midnight-studio"] .story-anchors h3,
body[data-theme="midnight-studio"] .story-packet-head h3,
body[data-theme="midnight-studio"] .packet-section summary,
body[data-theme="midnight-studio"] .packet-provenance strong,
body[data-theme="midnight-studio"] .melody-rack-screen blockquote { color: #eef4ff; }
body[data-theme="midnight-studio"] .story-handoff { background: rgba(20, 26, 49, .86); }

@media (max-width: 980px) {
  .story-workspace { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); }
  .story-page { padding-inline: 28px; }
}
@media (max-width: 780px) {
  .story-workspace {
    display: block;
    overflow: auto;
  }
  .story-page,
  .story-packet { overflow: visible; }
  .story-packet { border-top: 1px solid var(--line); border-left: 0; }
  .story-page-head { display: block; }
  .story-page-head span { display: block; margin-top: 7px; text-align: left; }
  .story-anchors > .story-field { grid-template-columns: 1fr; gap: 6px; }
  .story-page .story-scenario,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .story-page .story-scenario,
  body[data-theme="secret-garden"] .story-page .story-scenario,
  body[data-theme="midnight-studio"] .story-page .story-scenario { height: 360px; }
}

/* V30 — voice-forward MelodyWriter playback controls. */
.melody-mixer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 10px 11px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--lavender) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}
.melody-mixer legend {
  padding: 0 6px;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.melody-mixer label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}
.melody-mixer label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.melody-mixer output {
  color: var(--gold-dark);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.melody-mixer input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 22px;
  margin: 0;
  accent-color: var(--lavender);
  cursor: ew-resize;
}
.melody-mixer input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, white 74%, var(--lavender));
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--lavender) 70%, transparent);
}
.melody-mixer input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, white 74%, var(--lavender));
  border-radius: 50%;
  background: var(--lavender);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lavender) 70%, transparent);
}
@media (max-width: 520px) {
  .melody-mixer { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .writing-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
  .melodywriter-lite { padding: 14px 12px; }
  .melody-capture-actions { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .writing-workspace { grid-template-columns: 1fr; }
  .melodywriter-lite { display: none; }
  .writing-workspace .write,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .writing-workspace .write,
  body[data-theme="secret-garden"] .writing-workspace .write,
  body[data-theme="midnight-studio"] .writing-workspace .write { border-right: 0; }
  .pro-boundary { grid-template-columns: 1fr; }
}

/* V19: a deliberate full-page writing focus, with setup one click away. */
.focus-bar { display: none; }
.focus-enter,
.focus-actions button {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.22);
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.focus-enter { color: var(--gold-dark); }
.editor.focus-mode,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor.focus-mode,
body[data-theme="secret-garden"] .editor.focus-mode,
body[data-theme="midnight-studio"] .editor.focus-mode {
  --take-dock-height: 0px;
  grid-template-rows: auto 0 minmax(0, 1fr) auto;
}
.focus-mode .head { padding: 9px 14px; }
.focus-mode .head > .title-line,
.focus-mode .head > .tabs,
.focus-mode .head > .version-organizer { display: none; }
.focus-mode .focus-bar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}
.focus-identity { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.focus-identity strong { overflow: hidden; color: var(--ink); font: 19px/1 Newsreader, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.focus-identity span { flex: 0 0 auto; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.focus-actions { display: flex; align-items: center; gap: 5px; }
.focus-actions .cowriter-diamond { width: 14px; height: 14px; margin: -3px 2px -3px -2px; }
.focus-actions .focus-exit { border-color: color-mix(in srgb, var(--gold) 54%, var(--line)); color: var(--gold-dark); }
.focus-mode .take-dock {
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  border: 0;
}
.version-settings-menu .remove-version {
  margin-top: 3px;
  border-color: color-mix(in srgb, var(--danger) 60%, var(--line));
  color: var(--danger);
}
body[data-theme="midnight-studio"] .focus-enter,
body[data-theme="midnight-studio"] .focus-actions button {
  color: #cbd6ee;
  background: rgba(34,50,83,.42);
  border-color: rgba(91,123,181,.38);
}
body[data-theme="midnight-studio"] .focus-identity strong { color: #eef4ff; }
body[data-theme="midnight-studio"] .focus-actions .focus-exit { color: #e1ad63; border-color: rgba(211,155,73,.58); }

@media (max-width: 850px) {
  .focus-mode .focus-bar { grid-template-columns: minmax(120px, 1fr) auto; }
  .focus-mode .focus-bar > .saved { display: none; }
  .focus-actions button:not(.focus-exit) { display: none; }
}

/* V20: Focus owns the whole viewport; navigation and MelodyWriter live on edges. */
.focus-studio {
  grid-template-columns: 0 minmax(0, 1fr);
}
.focus-studio .rail {
  position: fixed;
  z-index: 44;
  inset: 0 auto 0 0;
  width: 68px;
  transform: translateX(calc(-100% + 8px));
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 10px 0 30px transparent;
}
.focus-studio.rail-open .rail {
  transform: translateX(0);
  box-shadow: 12px 0 34px var(--glow);
}
.rail-peek {
  position: absolute;
  top: 50%;
  right: -24px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 52px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: var(--surface-solid);
  color: var(--gold-dark);
  box-shadow: 8px 0 22px var(--glow);
  cursor: pointer;
  font-size: 18px;
}
body .focus-studio .editor.focus-mode {
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  min-height: 0;
  margin: 12px;
  justify-self: stretch;
  align-self: start;
}
.focus-studio .focus-mode .head,
.focus-studio .focus-mode .footer { transition: padding-left .2s ease; }
.focus-studio.rail-open .focus-mode .head { padding-left: 82px; }
.focus-studio.rail-open .focus-mode .footer { padding-left: 82px; }
.focus-mode .writing-workspace { grid-template-columns: minmax(0, 1fr); }
.focus-mode .writing-workspace .write,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .focus-mode .writing-workspace .write,
body[data-theme="secret-garden"] .focus-mode .writing-workspace .write,
body[data-theme="midnight-studio"] .focus-mode .writing-workspace .write {
  width: 100%;
  padding-inline: clamp(56px, 12vw, 240px);
  border-right: 0;
}
.focus-mode .melodywriter-lite {
  position: absolute;
  z-index: 14;
  inset: 0 0 0 auto;
  display: block;
  width: min(320px, calc(100% - 48px));
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px transparent;
  transform: translateX(calc(100% - 16px));
  transition: transform .22s ease, box-shadow .22s ease;
}
.focus-mode .melodywriter-lite::before {
  content: "MW";
  position: absolute;
  top: 50%;
  left: 1px;
  color: var(--gold-dark);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.focus-mode .melodywriter-lite:hover,
.focus-mode .melodywriter-lite:focus-within,
.focus-mode.melody-open .melodywriter-lite {
  transform: translateX(0);
  box-shadow: -18px 0 46px var(--glow);
}
body[data-theme="midnight-studio"] .rail-peek { color: #a7d9ff; background: #101c33; border-color: rgba(75,110,170,.52); }
body[data-theme="midnight-studio"] .focus-mode .melodywriter-lite { border-left-color: rgba(91,123,181,.48); }

@media (max-width: 850px) {
  .focus-actions button[data-focus-melody] { display: block; }
  body .focus-studio .editor.focus-mode { width: calc(100vw - 12px); height: calc(100dvh - 12px); margin: 6px; }
  .focus-mode .writing-workspace .write,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .focus-mode .writing-workspace .write,
  body[data-theme="secret-garden"] .focus-mode .writing-workspace .write,
  body[data-theme="midnight-studio"] .focus-mode .writing-workspace .write { padding-inline: 28px; }
}

/* V22: compact workspace, readable interface type, and personal lyric typography. */
:root {
  --lyric-font-size: 20px;
  --lyric-line-height: 1.6;
  --lyric-font-family: Newsreader, Iowan Old Style, Baskerville, Georgia, serif;
}
body { font-size: 16px; }
body[data-lyric-font="serif"] { --lyric-font-family: Newsreader, Iowan Old Style, Baskerville, Georgia, serif; }
body[data-lyric-font="sans"] { --lyric-font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body[data-lyric-font="mono"] { --lyric-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.editor { position: relative; }

.write,
.provenance-reader,
.provenance-line,
.melody-room-lyrics-text {
  font-family: var(--lyric-font-family) !important;
  font-size: var(--lyric-font-size) !important;
  line-height: var(--lyric-line-height) !important;
}
body[data-lyric-measure="page"] .writing-workspace .write { padding-inline: clamp(34px, 6vw, 90px); }
body[data-lyric-measure="wide"] .writing-workspace .write { padding-inline: clamp(24px, 3vw, 48px); }
body[data-lyric-measure="page"] .focus-mode .writing-workspace .write { padding-inline: clamp(44px, 8vw, 150px); }
body[data-lyric-measure="wide"] .focus-mode .writing-workspace .write { padding-inline: clamp(24px, 4vw, 70px); }

.editor:not(.focus-mode) .head { padding: 10px 22px 7px; }
.editor:not(.focus-mode) .title {
  min-height: 46px;
  padding-block: 1px 5px;
  font-size: clamp(28px, 2.3vw, 38px);
}
.editor:not(.focus-mode) .tabs { margin-top: 2px; }
.editor:not(.focus-mode) .version-organizer { margin-top: 7px; }
.editor:not(.focus-mode) .version-heading { gap: 4px 10px; }
.editor:not(.focus-mode) .version-tabs { margin-top: 5px; padding-bottom: 1px; }
.editor:not(.focus-mode) .version-tab,
.editor:not(.focus-mode) .version-add { padding: 5px 8px; }
.editor:not(.focus-mode) .version-tools { min-height: 27px; margin-top: 3px; }
.editor.empty-takes:not(.focus-mode) { --take-dock-height: 76px; }
.take-dock.empty { padding: 9px 22px; }
.take-dock.empty .take-dock-head { height: 100%; }
.take-dock.empty .take-help { display: none; }

.text-tools-popover[hidden] { display: none; }
.text-tools-popover {
  position: absolute;
  z-index: 38;
  top: 170px;
  right: 18px;
  width: min(330px, calc(100% - 36px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-solid);
  box-shadow: 0 22px 58px var(--glow);
}
.focus-mode .text-tools-popover { top: 62px; }
.text-tools-popover header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.text-tools-popover h3 { margin: 4px 0 0; color: var(--ink); font: 24px/1 Newsreader, Georgia, serif; }
.text-tools-popover header button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px !important; }
.text-tools-popover section { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 13px; }
.text-tools-popover section > span { color: var(--muted); font-size: 12px; font-weight: 750; }
.text-choice-row, .text-stepper { display: flex; align-items: center; gap: 5px; }
.text-choice-row button,
.text-stepper button,
.text-setting-value,
.text-reset { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.24); color: var(--ink); cursor: pointer; font-size: 12px; }
.text-choice-row button { flex: 1; }
.text-choice-row button.active { border-color: var(--gold); background: var(--accent-soft); color: var(--gold-dark); }
.text-stepper { justify-content: space-between; }
.text-stepper button { width: 36px; font-size: 18px; }
.text-stepper strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.text-setting-value { width: 100%; }
.text-reset { width: 100%; margin-top: 15px; color: var(--gold-dark); }
.text-tools-popover > p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
body[data-theme="midnight-studio"] .text-tools-popover { background: #111629; border-color: rgba(91,123,181,.48); }
body[data-theme="midnight-studio"] .text-tools-popover h3,
body[data-theme="midnight-studio"] .text-stepper strong,
body[data-theme="midnight-studio"] .text-choice-row button,
body[data-theme="midnight-studio"] .text-setting-value { color: #eef4ff; }
body[data-theme="midnight-studio"] .text-choice-row button,
body[data-theme="midnight-studio"] .text-stepper button,
body[data-theme="midnight-studio"] .text-setting-value,
body[data-theme="midnight-studio"] .text-reset { background: rgba(34,50,83,.42); border-color: rgba(91,123,181,.38); }

/* No essential interface copy should require squinting. */
.editor button,
.drawer button,
.modal button,
.card button,
.editor label,
.drawer label,
.modal label,
.card label { font-size: 12px !important; }
.editor input:not(.title),
.editor select,
.drawer input,
.drawer select,
.modal input,
.modal select,
.card input,
.card select { font-size: 14px !important; }
.eyebrow,
.category,
.version-caption,
.saved,
.access-role,
.access-note,
.current-note,
.contributor-note,
.catalog-caption,
.hover-preview .preview-status,
.preview-meta,
.provenance-key,
.line-source,
.compare-column > header span,
.compare-column > header small,
.take-listen-only,
.take-dock-head strong,
.take-help,
.recorder-status strong,
.now-playing span,
.now-playing em,
.playlist-transport,
.take-name span,
.take-name em,
.version-heading,
.version-tab em,
.version-tab small,
.audio-dock-head strong,
.audio-help,
.track-name span,
.song-menu-heading p,
.song-menu-popover label,
.song-menu-popover > small,
.melody-voiceprint p,
.melody-empty p,
.melody-select small,
.pro-boundary span,
.focus-identity span,
.role-explainer,
.member-list span,
.people-songs span,
.credit-note,
.split-input span,
.note,
small { font-size: 12px !important; line-height: 1.4; }
.take-name strong,
.melody-select strong,
.now-playing strong,
.track-name strong { font-size: 13px !important; }
.song span,
.catalog-category span,
.category-card span,
.history time,
.shared-badge,
.role-badge,
.share-form label,
.member-list select,
.credit-total { font-size: 13px !important; }
.line-number { font-size: 11px !important; }
.close { font-size: 20px !important; }
.actions button,
.import,
.delete { font-size: 13px !important; }

@media (max-width: 850px) {
  .focus-actions button[data-text-tools],
  .focus-actions button[data-focus-melody] { display: block; }
  .text-tools-popover { inset: 58px 10px auto; width: auto; }
  .melody-room { grid-template-rows: auto minmax(0, 1fr); }
  .melody-room-bar { grid-template-columns: auto 1fr; }
  .melody-room-actions { grid-column: 1 / -1; justify-content: space-between; }
  .melody-room-body { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 35vh) minmax(0, 1fr); }
  .melody-room.lyrics-hidden .melody-room-body { grid-template-columns: 1fr; grid-template-rows: 0 minmax(0, 1fr); }
  .melody-room-lyrics { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Keep the V28 hierarchy last in the cascade. */
.editor,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor,
body[data-theme="secret-garden"] .editor,
body[data-theme="midnight-studio"] .editor,
.editor.focus-mode,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .editor.focus-mode,
body[data-theme="secret-garden"] .editor.focus-mode,
body[data-theme="midnight-studio"] .editor.focus-mode {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.live-drawer .take-dock,
.focus-mode .live-drawer .take-dock {
  height: auto;
  min-height: 128px;
  max-height: none;
  padding: 14px 30px;
  overflow: visible;
  visibility: visible;
  border-bottom: 0;
}
@media (min-width: 851px) {
  .focus-mode .writing-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
  .focus-mode .melodywriter-lite {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    transform: none;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
  .focus-mode .melodywriter-lite::before { display: none; }
}

/* V32X final focus guard. */
body .focus-studio .editor.focus-mode,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .focus-studio .editor.focus-mode,
body[data-theme="secret-garden"] .focus-studio .editor.focus-mode,
body[data-theme="midnight-studio"] .focus-studio .editor.focus-mode {
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  min-height: 0;
  margin: 12px;
  justify-self: stretch;
  align-self: start;
}
@media (max-width: 850px) {
  body .focus-studio .editor.focus-mode,
  body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .focus-studio .editor.focus-mode,
  body[data-theme="secret-garden"] .focus-studio .editor.focus-mode,
  body[data-theme="midnight-studio"] .focus-studio .editor.focus-mode {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    margin: 6px;
  }
}

/* V33X final geometry guard: hidden rows never shift the writing surface. */
.editor > .head { grid-row: 1; }
.editor > .live-drawer { grid-row: 2; }
.editor > .writing-workspace,
.editor > .provenance-reader,
.editor > .story-workspace { grid-row: 3; }
.editor > .footer { grid-row: 4; }
/* Midnight Studio is the structural master; themes change atmosphere only. */
body .editor:not(.focus-mode) .head { padding: 10px 22px 7px; }
body .editor:not(.focus-mode) .tabs { margin-top: 2px; }
body .editor:not(.focus-mode) .versions { margin-top: 8px; }
body .writing-workspace > .write {
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-self: stretch;
}
.melody-simple {
  display: grid;
  grid-template-rows: auto 32px 44px 56px 30px 30px 34px 48px 28px 72px 30px auto;
  align-content: start;
  gap: 4px;
  padding: 12px;
}
.melody-simple-intro { align-self: center; }
.melody-line-picker,
.melody-writer-picker,
.melody-writer-label,
.melody-pick-sheet,
.melody-direction,
.melody-sing,
.melody-take-carousel,
.melody-take-slots,
.melody-line-player,
.melody-no-take,
.melody-simple-foot { min-height: 0; margin-block: 0; }
.melody-direction {
  align-self: center;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.melody-direction.empty { opacity: .7; }
.melody-pick-sheet { height: 30px; }
.melody-writer-picker,
.melody-writer-label { align-self: center; }
.melody-sing { min-height: 48px; height: 48px; }
.melody-take-carousel {
  position: relative;
  min-width: 0;
  height: 72px;
  overflow: hidden;
}
.melody-take-slots {
  display: grid;
  width: 100%;
  height: 100%;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 3);
  grid-template-columns: none;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 8px;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--gold) transparent;
  scrollbar-width: thin;
}
.melody-take-slots::-webkit-scrollbar { height: 6px; }
.melody-take-slots::-webkit-scrollbar-track { background: transparent; }
.melody-take-slots::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 76%, var(--lavender));
}
.melody-take-slot {
  min-height: 58px;
  scroll-snap-align: start;
}
.melody-take-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow: 0 4px 16px var(--shadow);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-58%);
}
.melody-take-arrow.previous { left: 3px; }
.melody-take-arrow.next { right: 3px; }
.melody-take-arrow em {
  color: var(--gold-dark);
  font: 800 11px/1 Inter, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.melody-take-arrow span { font-size: 22px; line-height: 1; }
.melody-take-arrow.has-more {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 20%, transparent), 0 5px 22px color-mix(in srgb, var(--gold) 30%, transparent);
}
.melody-take-arrow:disabled {
  pointer-events: none;
  opacity: 0;
}
.melody-line-player { height: 30px; }
.melody-simple .melody-recorder-stage,
.melody-simple .melody-recorder-stage[hidden] { display: grid; }
.melody-simple .melody-recorder-stage[hidden] { visibility: hidden; }
body.recording-melody .melody-simple { display: grid; }
body.recording-melody .melody-simple-intro { display: -webkit-box; }
body.recording-melody .melody-line-picker,
body.recording-melody .melody-sing,
body.recording-melody .melody-line-player { display: block; }
body.recording-melody .melody-take-carousel { display: block; }
body.recording-melody .melody-take-slots,
body.recording-melody .melody-simple-foot { display: flex; }
body.recording-melody .melody-take-slots { display: grid; }
.melody-line-preview { white-space: pre-line; }

@container (max-height: 500px) {
  .melody-simple {
    grid-template-rows: auto 0 40px 48px 0 28px 30px 44px 26px 66px 28px auto;
    gap: 3px;
  }
  .melody-simple-intro,
  .melody-direction { display: none !important; }
  .melody-line-preview { min-height: 48px; max-height: 48px; }
  .melody-sing { min-height: 44px; height: 44px; }
  .melody-take-slot { min-height: 52px; }
  .melody-take-carousel { height: 66px; }
  .melody-line-player { height: 28px; }
}

/* V35X — readable target spacing and compact chord discovery. */
.melody-simple {
  grid-template-rows: auto 42px 62px 68px 30px 34px 30px 52px 28px 72px 32px 58px auto;
  gap: 6px;
}
.melody-simple-intro {
  align-self: start;
  line-height: 1.35;
}
.melody-line-picker {
  align-content: start;
  gap: 7px;
  padding-bottom: 2px;
}
.melody-line-picker > span { line-height: 1.2; }
.melody-line-picker select {
  height: 42px;
  padding-inline: 14px;
}
.melody-line-preview {
  min-height: 68px;
  max-height: 68px;
  padding: 12px 14px;
  line-height: 1.45;
}
.melody-harmony {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 30px minmax(0, 1fr);
  gap: 4px;
  margin: 0;
}
.melody-harmony > div {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 6px;
}
.melody-harmony button {
  min-width: 0;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lavender) 60%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px !important;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.melody-harmony button:first-child {
  border-color: color-mix(in srgb, var(--gold) 65%, var(--line));
  color: var(--gold-dark);
}
.melody-harmony button:disabled { cursor: wait; opacity: .65; }
.melody-harmony p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.melody-harmony.empty {
  display: grid;
  place-items: center;
}
.melody-harmony.empty p { white-space: normal; text-align: center; }

@container (max-height: 650px) {
  .melody-simple {
    grid-template-rows: auto 0 54px 58px 0 30px 28px 46px 26px 66px 28px 48px auto;
    gap: 3px;
  }
  .melody-simple-intro,
  .melody-direction { display: none !important; }
  .melody-line-picker { gap: 4px; padding-bottom: 0; }
  .melody-line-picker select { height: 36px; }
  .melody-line-preview { min-height: 58px; max-height: 58px; padding-block: 8px; }
  .melody-sing { min-height: 46px; height: 46px; }
  .melody-take-carousel { height: 66px; }
  .melody-take-slot { min-height: 52px; }
  .melody-line-player { height: 28px; }
  .melody-harmony { grid-template-rows: 27px minmax(0, 1fr); gap: 2px; }
}

/* V36X — MelodyWriter modal workspace. */
body.melody-modal-open { overflow: hidden; }

body .writing-workspace,
body .focus-mode .writing-workspace {
  grid-template-columns: minmax(0, 1fr);
}
body .writing-workspace .write,
body:not([data-theme="secret-garden"]):not([data-theme="midnight-studio"]) .writing-workspace .write,
body[data-theme="secret-garden"] .writing-workspace .write,
body[data-theme="midnight-studio"] .writing-workspace .write,
body .focus-mode .writing-workspace .write {
  border-right: 0;
}

body .editor .melodywriter-lite,
body .editor.focus-mode .melodywriter-lite,
body[data-theme="secret-garden"] .editor .melodywriter-lite,
body[data-theme="midnight-studio"] .editor .melodywriter-lite {
  position: fixed !important;
  z-index: 120;
  inset: 0 !important;
  display: none;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding: clamp(12px, 3vw, 34px);
  place-items: center;
  overflow: hidden;
  border: 0;
  background: rgba(3, 7, 18, .72);
  box-shadow: none !important;
  opacity: 1;
  transform: none !important;
  transition: none;
  backdrop-filter: blur(12px) saturate(.8);
  -webkit-backdrop-filter: blur(12px) saturate(.8);
}
body .editor.melody-open .melodywriter-lite,
body .editor.focus-mode.melody-open .melodywriter-lite {
  display: grid;
  transform: none !important;
}
body .editor .melodywriter-lite::before,
body .editor.focus-mode .melodywriter-lite::before { display: none; }

body .melodywriter-lite .melody-simple {
  box-sizing: border-box;
  width: min(820px, calc(100vw - 24px));
  height: min(780px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 24px 26px 26px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--lavender) 58%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--lavender) 22%, transparent), transparent 31%),
    color-mix(in srgb, var(--surface-solid) 96%, var(--accent-soft));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .18);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 66%, var(--lavender)) transparent;
}
body .melodywriter-lite .melody-simple::-webkit-scrollbar { width: 10px; }
body .melodywriter-lite .melody-simple::-webkit-scrollbar-track { background: transparent; }
body .melodywriter-lite .melody-simple::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 66%, var(--lavender));
  background-clip: padding-box;
}
body .melodywriter-lite .melody-simple-head > button {
  display: grid;
  place-items: center;
}

@media (max-width: 700px) {
  body .editor .melodywriter-lite,
  body .editor.focus-mode .melodywriter-lite {
    padding: 8px;
  }
  body .melodywriter-lite .melody-simple {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 16px 20px 20px;
    border-radius: 16px;
  }
}

/* V38X final geometry guard — later than every legacy console rule. */
body .melodywriter-lite .melody-simple {
  width: min(940px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto auto 42px 58px minmax(210px, 1fr) 30px 34px 30px 52px 34px 72px 32px 58px auto;
  gap: 6px;
}

@media (max-width: 700px) {
  body .melodywriter-lite .melody-simple {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    grid-template-rows: auto 0 42px 54px minmax(220px, 1fr) 0 34px 28px 52px 34px 72px 32px 52px auto;
    gap: 5px;
  }
}