:root {
  color-scheme: light;
  --paper: #f8f7f3;
  --surface: #eeeee8;
  --ink: #232725;
  --muted: #60645f;
  --line: #d6d8d1;
  --blue: #163e65;
  --blue-hover: #0f3152;
  --selected: #e5ebee;
  --error: #8c3028;
  --error-surface: #f6e9e5;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, input, select { min-height: 44px; }
button { cursor: pointer; color: inherit; }
button:disabled, select:disabled, input:disabled { cursor: default; opacity: .58; }
a { color: var(--blue); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
input, select { caret-color: var(--blue); }
::selection { color: var(--paper); background: var(--blue); }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: .025em; }
h1:focus { outline: none; }
h2 { font-size: 1.125rem; line-height: 1.65; }
h3 { font-size: 1rem; font-weight: 700; line-height: 1.6; margin-bottom: 12px; }
h4 { font-size: .9375rem; line-height: 1.6; margin-bottom: 8px; }
p { line-height: 1.75; }
.app-shell { width: min(100%, 620px); margin-inline: auto; padding: max(24px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-bottom: 30px; }
.topbar:has(.back-button) { display: grid; grid-template-columns: auto 1fr; gap: 18px; justify-content: initial; }
.topbar:has(.back-button) h1 { font-size: 1.1875rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 17px; border: 1px solid transparent; border-radius: 7px; font-size: 1rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.primary { color: #fff; background: var(--blue); }
.primary:hover:not(:disabled) { background: var(--blue-hover); }
.primary:active:not(:disabled) { background: #092944; }
.secondary { color: var(--ink); background: transparent; border-color: #b7bcb4; }
.secondary:hover:not(:disabled) { background: var(--surface); }
.secondary:active:not(:disabled) { background: #e1e3dc; }
.icon-button { width: 46px; padding: 10px; flex-shrink: 0; }
.back-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 7px 6px; border: 0; border-radius: 3px; background: transparent; color: var(--blue); font-size: 1rem; font-weight: 600; }
.back-button:hover { text-decoration: underline; text-underline-offset: .2em; }
.back-button:active { color: var(--ink); }
.list-switch { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 24px; gap: 22px; }
.list-tab { position: relative; flex: 1; min-height: 48px; padding: 8px 0 13px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 1rem; font-weight: 600; }
.list-tab[aria-pressed='true'] { border-bottom-color: var(--blue); color: var(--blue); }
.list-tab:hover { color: var(--ink); background: var(--surface); }
.list-tab:active { background: #e1e3dc; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 23px; min-width: 0; }
.field label { font-size: .9375rem; line-height: 1.6; font-weight: 600; }
input, select { display: block; width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #a9afa6; border-radius: 7px; background: #fffefa; color: var(--ink); font-size: 1rem; line-height: 1.5; }
input::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus { border-color: var(--blue); }
input[aria-invalid='true'] { border-color: var(--error); }
.filter-field { margin-bottom: 22px; }
.filter-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filter-field input { background: transparent; }
.song-list { border-top: 1px solid var(--line); }
.song-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 83px; padding: 17px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; }
.song-row:hover { background: var(--surface); }
.song-row:active { background: #e1e3dc; }
.song-row svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--muted); }
.song-words { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.song-title { font-size: 1.0625rem; line-height: 1.65; font-weight: 600; overflow-wrap: anywhere; }
.song-artist { font-size: .875rem; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.empty-state { padding: 45px 5px 50px; }
.empty-state h2 { margin-bottom: 10px; font-weight: 600; }
.empty-state p { font-size: .9375rem; color: var(--muted); }
.storage-note { margin-top: 46px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.8; }
.storage-note summary { width: fit-content; min-height: 44px; padding: 9px 4px 8px 0; cursor: pointer; }
.storage-note p { padding-top: 5px; }
.supporting-text { color: var(--muted); font-size: .8125rem; line-height: 1.8; }
.destination { margin-bottom: 24px; color: var(--muted); font-size: .9375rem; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; }
.search-form .field { margin-bottom: 0; }
.search-form .button { min-height: 50px; padding-inline: 18px; }
.search-credit { margin: 0; color: var(--muted); font-size: .8125rem; grid-column: 1 / -1; }
.search-credit summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; padding-block: 10px; }
.search-credit p { margin-bottom: 12px; }
.search-credit a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; vertical-align: middle; }
.search-results { margin-top: 22px; }
.search-results:empty { display: none; }
.section-title { font-size: .9375rem; font-weight: 600; margin-bottom: 12px; }
.manual-button { width: auto; min-height: 44px; margin-top: 16px; padding-inline: 0; font-size: .9375rem; }
.search-feedback { font-size: .9375rem; line-height: 1.8; }
.search-feedback + .search-feedback { margin-top: 8px; }
.loading-rows { border-top: 1px solid var(--line); margin-top: 14px; }
.loading-row { min-height: 74px; border-bottom: 1px solid var(--line); background: var(--surface); margin-bottom: 7px; }
.song-form { margin-top: 6px; }
.field-error { color: var(--error); font-size: .875rem; line-height: 1.7; }
.form-errors:not(:empty) { margin-bottom: 20px; }
.form-errors .button { margin-top: 10px; }
.save-button { width: 100%; margin-top: 9px; }
.message { padding: 14px 15px; margin: 0 0 24px; border-radius: 7px; }
.message p { font-size: .875rem; }
.message p + p { margin-top: 9px; }
.message .button { margin-top: 10px; font-size: .875rem; }
.error-message { background: var(--error-surface); color: var(--error); }
.error-message .supporting-text { color: var(--error); }
.notice-message { background: var(--surface); }
.notice-message .text-button { padding-left: 0; margin-top: 3px; }
.detail-title { font-size: 1.5rem; line-height: 1.65; font-weight: 700; margin-bottom: 9px; }
.detail-artist { color: var(--muted); font-size: 1rem; margin-bottom: 30px; }
.detail-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.range-status { font-size: 1rem; line-height: 1.7; margin-bottom: 7px; }
.range-entry + .range-entry { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.range-notes { display: flex; gap: 46px; margin: 17px 0 13px; font-variant-numeric: tabular-nums; }
.range-notes div { min-width: 0; }
.range-notes dt { color: var(--muted); font-size: .8125rem; }
.range-notes dd { margin: 5px 0 0; font-size: 1.25rem; font-weight: 600; }
.source-link { display: block; width: fit-content; min-height: 44px; padding-block: 10px; font-size: .9375rem; }
.external-link { margin: 1px 0 11px; }
.detail-actions { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 23px; margin-top: 30px; }
.text-button { background: transparent; border: 0; color: var(--blue); padding-inline: 9px; }
.text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: .2em; }
.text-button:active:not(:disabled) { background: var(--surface); }
.danger { color: var(--error); }
@media (min-width: 700px) { .app-shell { padding-top: 42px; } .topbar { margin-bottom: 34px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* The comparison control is independent of song state and stays in normal flow. */
.appearance { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: -12px 0 28px; }
.appearance-label { color: var(--muted); font-size: .75rem; letter-spacing: .06em; }
.theme-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); }
.theme-option { min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 22px; background: transparent; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.theme-option[aria-pressed='true'] { color: var(--blue); background: #fffefa; border-color: var(--line); box-shadow: 0 1px 3px #182d3810; }

/* Liquid Glass: a solid neutral canvas, fine rules and glass controls.
   Opaque bases work without backdrop-filter; transparency is progressively added. */
[data-utatou-app][data-theme='liquid'] {
  --paper: #f3f3f0;
  --surface: #e9eae7;
  --ink: #252a2d;
  --muted: #60696e;
  --line: #d4d8d8;
  --blue: #315469;
  --blue-hover: #244253;
  --selected: #e7edef;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
}
[data-theme='liquid'] .app-shell { padding-top: max(28px, env(safe-area-inset-top)); }
[data-theme='liquid'] .topbar { margin-bottom: 30px; }
[data-theme='liquid'] .topbar h1 { letter-spacing: .055em; }
[data-theme='liquid'] .theme-switch,
[data-theme='liquid'] .list-switch,
[data-theme='liquid'] .secondary,
[data-theme='liquid'] .back-button {
  background: #f6f7f5;
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px #38577a0a, 0 1px 3px #38577a12;
}
[data-theme='liquid'] .theme-switch { border-radius: 28px; }
[data-theme='liquid'] .theme-option { border-radius: 24px; }
[data-theme='liquid'] .theme-option[aria-pressed='true'] { background: #fff; border-color: #fff; box-shadow: 0 2px 6px #37577a16, inset 0 1px 0 #fff; }
[data-theme='liquid'] .list-switch { gap: 6px; padding: 6px; border-radius: 24px; margin-bottom: 22px; }
[data-theme='liquid'] .list-tab { padding: 10px 8px; min-height: 48px; border: 1px solid transparent; border-radius: 18px; color: var(--muted); }
[data-theme='liquid'] .list-tab[aria-pressed='true'] { color: var(--blue); background: #fff; border-color: #fff; box-shadow: 0 3px 9px #395b8015; }
[data-theme='liquid'] .list-tab[aria-pressed='true']::after { content: ''; display: block; width: 16px; height: 2px; margin: 4px auto -6px; border-radius: 2px; background: var(--blue); }
[data-theme='liquid'] .list-tab:hover { background: #ffffffb3; }
[data-theme='liquid'] .button { border-radius: 13px; }
[data-theme='liquid'] .primary { background: #303b42; border: 1px solid #303b42; box-shadow: inset 0 1px 0 #ffffff24; }
[data-theme='liquid'] .primary:hover:not(:disabled) { background: #263138; }
[data-theme='liquid'] .icon-button { width: 50px; height: 50px; border-radius: 18px; }
[data-theme='liquid'] .back-button { border-radius: 13px; padding-inline: 14px; }
[data-theme='liquid'] input,
[data-theme='liquid'] select { background: #fcfcfa; border-color: #a7b0b4; border-radius: 13px; box-shadow: inset 0 2px 3px #385b7505; }
[data-theme='liquid'] input[aria-invalid='true'] { border-color: var(--error); }
[data-theme='liquid'] .filter-field input { background: #fcfcfa; padding: 14px 17px; }
[data-theme='liquid'] .song-list { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding-inline: 0; box-shadow: none; }
[data-theme='liquid'] .song-row { padding-block: 19px; border-bottom-color: #d4d8d8; }
[data-theme='liquid'] .song-row:last-child { border-bottom: 1px solid var(--line); }
[data-theme='liquid'] .song-row:hover { background: #e9edeb; }
[data-theme='liquid'] .song-row:active { background: #e4e9e8; }
[data-theme='liquid'] .song-row svg { color: #6c787e; }
[data-theme='liquid'] .empty-state { padding: 40px 0 46px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-theme='liquid'] .message { border-radius: 13px; }
[data-theme='liquid'] .notice-message { background: #fcfcfa; border: 1px solid #fff; }
[data-theme='liquid'] .storage-note { margin-top: 36px; }
[data-theme='liquid'] .detail-section { border-top-color: #d4d8d8; }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  [data-theme='liquid'] .theme-switch,
  [data-theme='liquid'] .list-switch,
  [data-theme='liquid'] .secondary,
  [data-theme='liquid'] .back-button { background: #ffffff70; -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05); }
}
@media (min-width: 700px) {
  [data-theme='liquid'] .app-shell { padding-top: 48px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-utatou-app][data-theme='liquid'] { background: #f3f3f0; }
  [data-theme='liquid'] .theme-switch,
  [data-theme='liquid'] .list-switch,
  [data-theme='liquid'] .secondary,
  [data-theme='liquid'] .back-button { background: #f6f7f5; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #89969d; }
}
@media (forced-colors: active) {
  [data-theme='liquid'] .list-tab[aria-pressed='true'], .theme-option[aria-pressed='true'] { border: 2px solid Highlight; }
}

/* A separate composition: collection canvas + floating navigation, and focused
   add/detail workspaces. Both share the same controller and stable form nodes. */
.liquid-only { display: none; }
[data-theme='standard'] .appearance { margin: 0 0 22px; }
[data-theme='liquid'] .liquid-only { display: block; }
[data-theme='liquid'] .appearance { margin: 0 0 32px; }
[data-theme='liquid'] .workspace-eyebrow { display: none; }
[data-theme='liquid'] .app-shell { padding-bottom: calc(136px + env(safe-area-inset-bottom)); }
[data-theme='liquid'] [data-screen='list'] .topbar { min-height: 0; margin-bottom: 24px; }
[data-theme='liquid'] [data-screen='list'] .topbar h1 { font-size: 1.125rem; font-weight: 650; }
[data-theme='liquid'] [data-screen='list'] .topbar .icon-button,
[data-theme='liquid'] .list-switch { display: none; }
[data-theme='liquid'] .collection-intro { margin-bottom: 18px; }
[data-theme='liquid'] .collection-title { font-size: clamp(1.65rem, 6.6vw, 2.125rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
[data-theme='liquid'] .collection-summary { margin-top: 10px; color: var(--muted); font-size: .8125rem; line-height: 1.9; }
[data-theme='liquid'] .filter-field { margin-bottom: 28px; }
[data-theme='liquid'] .song-list { padding-inline: 0; }
[data-theme='liquid'] .song-row { min-height: 88px; }
[data-theme='liquid'] .song-list:has(> .empty-state) { padding: 0; background: transparent; border: 0; box-shadow: none; }
[data-theme='liquid'] .empty-state { text-align: left; padding: 24px 0; }
[data-theme='liquid'] .empty-add { display: inline-flex; margin-top: 24px; }
[data-theme='liquid'] .liquid-dock {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: fixed; z-index: 10; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 36px), 410px); gap: 5px; padding: 7px; border-radius: 30px;
  background: #f7f8f5; border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 10px 32px #26343b14, 0 2px 6px #26343b0c;
}
[data-theme='liquid'] .dock-item { position: relative; z-index: 1; display: flex; flex: 1; min-width: 0; min-height: 62px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 8px 4px; border: 1px solid transparent; border-radius: 23px; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 600; }
[data-theme='liquid'] .dock-item svg { width: 21px; height: 21px; stroke-width: 1.5; }
[data-theme='liquid'] .dock-item[aria-pressed='true'] { background: transparent; color: var(--blue); border-color: transparent; box-shadow: none; }
[data-theme='liquid'] .dock-item:hover { background: #e5ebeb; color: var(--blue); }
[data-theme='liquid'] .app-shell:not([data-screen='list']) .workspace { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
[data-theme='liquid'] .app-shell:not([data-screen='list']) .workspace-eyebrow { margin-bottom: 22px; }
[data-theme='liquid'] .app-shell:not([data-screen='list']) .topbar { gap: 12px; margin-bottom: 18px; }
[data-theme='liquid'] .app-shell:not([data-screen='list']) .search-form { grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-theme='liquid'] .app-shell:not([data-screen='list']) .search-form .button { width: 100%; }
[data-theme='liquid'] .detail-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -.015em; }
[data-theme='liquid'] .detail-artist { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
[data-theme='liquid'] .detail-actions { justify-content: space-between; }
[data-theme='liquid'] .detail-actions .secondary { flex: 1; }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  [data-theme='liquid'] .liquid-dock { background: #f7f8f5c9; -webkit-backdrop-filter: blur(24px) saturate(1.05); backdrop-filter: blur(24px) saturate(1.05); }
}
@media (max-width: 360px) {
  [data-theme='liquid'] .app-shell { padding-inline: 16px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-theme='liquid'] .liquid-dock { background: #f7f8f5; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #89969d; }
}
@media (forced-colors: active) {
  [data-theme='liquid'] .dock-item[aria-pressed='true'] { border: 2px solid Highlight; }
}

/* One persistent highlight moves between all three navigation items. */
[data-theme='liquid'] .liquid-dock::before {
  content: ''; box-sizing: border-box; position: absolute; pointer-events: none; z-index: 0;
  left: 7px; top: 7px; bottom: 7px; width: calc((100% - 24px) / 3);
  border: 1px solid #d3dadd; border-radius: 23px; background: #fff;
  box-shadow: 0 3px 9px #244f7512;
  transform: translateX(0); transition: transform 240ms cubic-bezier(.22, .68, 0, 1);
}
[data-theme='liquid'] .liquid-dock[data-active-list='practice']::before { transform: translateX(calc(100% + 5px)); }
[data-theme='liquid'] .dock-item[aria-pressed='true']:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  [data-theme='liquid'] .liquid-dock::before { transition: none; }
}
@media (forced-colors: active) {
  [data-theme='liquid'] .liquid-dock::before { display: none; }
}

[data-theme='liquid'] .liquid-dock[data-active-list='add']::before { transform: translateX(calc(200% + 10px)); }
[data-theme='liquid'] input, [data-theme='liquid'] select, [data-theme='liquid'] .save-button { scroll-margin-bottom: 140px; }

.range-summary { margin-top: 16px; }

.optional-field { padding-top: 18px; border-top: 1px solid var(--line); }
.optional-field label { color: var(--muted); font-size: .875rem; }
.optional-field .supporting-text { margin-top: 8px; }

[data-theme='liquid'] .app-shell:not([data-screen='list']) .back-button { background: transparent; border: 0; box-shadow: none; padding-inline: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme='liquid'] .destination { margin-bottom: 16px; font-size: .8125rem; }

/* Demo stays visible on every screen without competing with song actions. */
.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(104, 116, 128, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  color: #505967;
  font-size: .78rem;
  line-height: 1.6;
}
.demo-banner strong { color: #344357; white-space: nowrap; }
.demo-banner a { color: #315a77; text-underline-offset: .2em; }

/* Prototype pitches share the compact row typography. */
.demo-range-pitches { font-size: .875rem; font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }