:root {
  color-scheme: dark;
  --ink: #f7f3ff;
  --muted: #aaa0bd;
  --panel: rgba(26, 20, 39, 0.84);
  --line: rgba(255, 255, 255, 0.11);
  --violet: #a985ff;
  --pink: #ff6fae;
  --cyan: #64e8e0;
  --danger: #ff6b72;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #0c0912;
  color: var(--ink);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(169, 133, 255, 0.2), transparent 34rem),
    radial-gradient(circle at 90% 20%, rgba(255, 111, 174, 0.17), transparent 30rem),
    #0c0912;
}
button, input, select { font: inherit; }
.brand { color: var(--ink); font-size: 1.15rem; font-weight: 900; letter-spacing: -0.025em; text-decoration: none; }
.site-header { min-height: 3rem; }
.site-nav { display: flex; align-items: center; gap: 1rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.shell { width: min(1080px, calc(100% - 2rem)); margin: auto; padding: 2rem 0 5rem; }
header, .section-heading, .hero, .input-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -0.055em; }
h2 { margin-bottom: 0.9rem; letter-spacing: -0.025em; }
.eyebrow { margin-bottom: 0.25rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 800; }
.status, .pill { padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.panel { padding: 1.4rem; margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 1.25rem; backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); }
.hero { min-height: 9rem; background: linear-gradient(125deg, rgba(169, 133, 255, 0.19), rgba(255, 111, 174, 0.08)); }
.hero-copy { flex: 1; min-width: 0; }
.hero-copy h2 { overflow: hidden; margin-top: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-copy > p { margin-bottom: 0; }
.room-now-playing { width: min(44rem, 100%); margin-top: 1.15rem; }
.room-progress-details { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
#room-performance-state { color: var(--cyan); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.room-song-progress { position: relative; height: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45); }
.room-song-progress-fill { position: absolute; inset: -1px auto -1px -1px; width: 0; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--pink)); box-shadow: 0 0 1rem rgba(255, 111, 174, 0.35); transition: width 100ms linear; }
.room-song-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.42) 48%, transparent 72%); transform: translateX(-110%); animation: room-progress-shine 2.4s linear infinite; }
.room-song-progress-indicator { position: absolute; top: 50%; left: 0; z-index: 1; width: 1rem; height: 1rem; border: 2px solid #0c0912; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 232, 224, 0.2), 0 0 0.8rem rgba(100, 232, 224, 0.55); transform: translate(-50%, -50%); transition: left 100ms linear; }
.room-now-playing.is-paused .room-song-progress-fill::after { animation-play-state: paused; }
@keyframes room-progress-shine { to { transform: translateX(110%); } }
.landing-hero { min-height: 24rem; padding: clamp(2rem, 7vw, 5rem); }
.landing-hero > div { max-width: 50rem; }
.landing-hero h1 { margin-bottom: 1rem; }
.landing-lede { max-width: 43rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature-card { display: block; color: inherit; text-decoration: none; transition: transform 120ms ease, border-color 120ms ease; }
.feature-card:hover { border-color: rgba(169, 133, 255, 0.55); transform: translateY(-2px); }
.feature-card p { color: var(--muted); line-height: 1.6; }
.feature-card .eyebrow, .feature-link { color: var(--cyan); }
.landing-copy { line-height: 1.65; }
.landing-copy code { padding: 0.15rem 0.35rem; border: 1px solid var(--line); border-radius: 0.35rem; background: rgba(0, 0, 0, 0.22); }
.standalone-shell { width: min(980px, calc(100% - 2rem)); }
.standalone-calibration { margin-top: 2rem; }
.compact-hero { padding: 2rem; }
.compact-hero h1 { margin-bottom: 0.75rem; font-size: clamp(2rem, 6vw, 3.5rem); }
.compact-hero p:last-child { margin-bottom: 0; color: var(--muted); }
.library-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1rem; }
.library-list { display: grid; gap: 0.5rem; }
.library-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.library-item > div { display: grid; gap: 0.2rem; min-width: 0; }
.library-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-item span { color: var(--muted); font-size: 0.82rem; }
.library-editor { scroll-margin-top: 1rem; }
.revision, .message, .track-meta, .empty { color: var(--muted); }
.columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; }
.columns .panel { margin-bottom: 0; }
label { display: block; color: var(--muted); font-size: 0.9rem; }
input[type="url"], input[type="text"], select { width: 100%; padding: 0.83rem 1rem; color: var(--ink); background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); border-radius: 0.75rem; outline: none; }
input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(169, 133, 255, 0.15); }
.input-row { margin-top: 0.55rem; }
.input-row input[type="url"] { flex: 1; min-width: 0; }
.song-source-choice { display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 0; margin: 0 0 1rem; border: 0; }
.song-source-choice legend { width: 100%; margin-bottom: 0.1rem; color: var(--muted); font-size: 0.9rem; }
.song-source-choice label { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; color: var(--ink); border: 1px solid var(--line); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.song-source-choice input { accent-color: var(--pink); }
#library-source-fields { margin-top: 0.25rem; }
#library-source-fields select { flex: 1; min-width: 0; }
.track-preview { display: grid; gap: 0.8rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); }
.track-preview > div:first-child { display: flex; align-items: center; gap: 0.7rem; }
.track-preview progress { flex: 1; }
.track-preview audio { display: none; }
.preview-title-row { display: flex; align-items: center; gap: 0.7rem; }
.preview-title-row input { flex: 1; min-width: 0; }
.preview-player { display: flex; align-items: center; gap: 0.75rem; }
.preview-playback-toggle { width: 2.4rem; height: 2.4rem; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); }
.preview-playback-toggle::before { content: ""; display: block; }
.preview-playback-toggle[data-playing="false"]::before { width: 0; height: 0; border-top: 0.38rem solid transparent; border-bottom: 0.38rem solid transparent; border-left: 0.62rem solid currentColor; transform: translateX(0.06rem); }
.preview-playback-toggle[data-playing="true"]::before { width: 0.62rem; height: 0.72rem; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.preview-timeline { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.preview-player input.preview-seek { flex: 1; min-width: 0; width: auto; height: 1rem; margin: 0; padding: 0; display: block; accent-color: var(--pink); cursor: pointer; }
.preview-player input.preview-seek:disabled { cursor: default; }
.preview-volume-control { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-volume-control label { font-size: inherit; }
.preview-player input.preview-volume-slider { width: 5rem; height: 1rem; margin: 0; padding: 0; display: block; accent-color: var(--cyan); cursor: pointer; }
.preview-player input.preview-volume-slider:disabled { cursor: default; }
.preview-volume-control output { width: 2.4rem; text-align: right; }
.preview-lyrics-choice-row { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem; }
.preview-lyrics-choice-row select { flex: 1; min-width: 0; }
.preview-lyrics-choice-row .button { flex: 0 0 auto; }
.preview-lyrics-action-status { margin: 0.55rem 0 0; }
.auto-lyrics-status { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.auto-lyrics-status progress { width: 100%; }
.custom-lyrics-editor { padding: 0.85rem; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(0, 0, 0, 0.14); }
.custom-lyrics-editor > p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.86rem; }
.custom-lyrics-editor > .track-error { color: var(--danger); }
.custom-lyrics-lines-field { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.82rem; }
.custom-lyrics-lines-field textarea { box-sizing: border-box; width: 100%; min-height: 12rem; padding: 0.7rem; resize: vertical; color: var(--ink); font: 0.9rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); border-radius: 0.6rem; outline: none; }
.custom-lyrics-lines-field textarea:focus { border-color: var(--violet); }
.lyrics-alignment-analysis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 0.7rem; }
.lyrics-alignment-analysis .message { flex: 1 1 16rem; margin: 0; }
.lyrics-language-field { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.82rem; }
.lyrics-language-field input { width: 4.5rem; padding: 0.4rem 0.5rem; color: var(--ink); background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); border-radius: 0.55rem; }
.custom-lyrics-word-highlighting { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.65rem; color: var(--ink); font-size: 0.86rem; }
.preview-lyrics, .performance-lyrics-box { position: relative; overflow: hidden; padding: 0.9rem 0.9rem 1.25rem; text-align: center; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(0, 0, 0, 0.18); }
.preview-lyrics { --lyric-line-progress: 0%; min-height: 7.5rem; }
.preview-lyrics::after, .performance-lyrics-box::after { content: ""; position: absolute; inset: auto auto 0 0; width: var(--lyric-line-progress); height: 10px; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.preview-lyrics .lyric-lines { height: 5.35rem; }
.manual-lyrics-controls { position: absolute; z-index: 2; right: 0.9rem; bottom: 0.9rem; left: 0.9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.manual-lyric-button { min-height: 3.5rem; font-size: 1rem; font-weight: 800; }
.preview-lyrics.has-manual-controls { min-height: 11.75rem; }
.preview-lyrics.has-manual-controls .lyric-lines { height: 6rem; }
#preview-current-lyric { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
#preview-previous-lyric, #preview-next-lyric { color: var(--muted); font-size: 0.82rem; }
#preview-previous-lyric { top: 12%; }
#preview-current-lyric { top: 50%; }
#preview-next-lyric { top: 88%; }
.preview-lyrics-offset { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; color: var(--muted); font-size: 0.82rem; }
.preview-lyrics-offset .button { padding: 0.4rem 0.65rem; }
.lyrics-delay-field { display: flex; align-items: center; gap: 0.35rem; }
.lyrics-delay-field input { width: 6.5rem; padding: 0.4rem 0.55rem; color: var(--ink); text-align: right; font-size: 0.82rem; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); border-radius: 0.55rem; outline: none; }
.preview-advanced-settings { padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: 0.75rem; background: rgba(0, 0, 0, 0.14); }
.preview-advanced-settings summary { color: var(--ink); font-weight: 700; cursor: pointer; }
.preview-advanced-settings > p { margin: 0.65rem 0; color: var(--muted); font-size: 0.82rem; }
.song-time-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.song-time-setting { display: grid; gap: 0.45rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.song-time-enable { display: flex; align-items: center; gap: 0.4rem; color: var(--ink); }
.song-time-setting input[type="checkbox"] { accent-color: var(--pink); }
.song-time-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.song-time-input label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
.song-time-input input { width: 4.8rem; padding: 0.45rem 0.55rem; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); border-radius: 0.55rem; }
.personal-track-settings { display: grid; gap: 0.7rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.personal-track-settings h3 { margin: 0; font-size: 1rem; }
.personal-track-settings p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.82rem; }
.personal-track-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.personal-track-heading-row .button[aria-pressed="true"] { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }
.personal-track-status { display: flex; align-items: center; gap: 0.7rem; }
.personal-track-status progress { flex: 1; }
.track-alignment-analysis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-bottom: 0.8rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.7rem; }
.track-alignment-analysis .message { flex: 1 1 18rem; margin: 0; white-space: pre-line; }
#personal-track-alignment { display: grid; gap: 0.7rem; }
.preview-isolation { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.preview-isolation input { width: 1.1rem; height: 1.1rem; accent-color: var(--pink); }
#preview-singer-field select { margin-top: 0.4rem; }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.room-output-controls { padding: 0.85rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(0, 0, 0, 0.18); }
.room-output-controls h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.output-volume-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.output-volume-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.output-volume-heading output { color: var(--cyan); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.output-volume-control input[type="range"] { width: 100%; margin: 0.45rem 0 0; accent-color: var(--cyan); cursor: pointer; }
.button { border: 1px solid var(--line); border-radius: 0.7rem; padding: 0.72rem 0.95rem; color: var(--ink); background: rgba(255, 255, 255, 0.06); cursor: pointer; text-decoration: none; white-space: nowrap; }
.button:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { color: #100b17; font-weight: 800; border-color: transparent; background: linear-gradient(125deg, var(--violet), var(--pink)); }
.warning { color: #ffd0b0; }
.danger-button { color: #ffd1d3; border-color: rgba(255, 107, 114, 0.4); }
.subtle { padding: 0.4rem 0.65rem; color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.queue { padding: 0; margin: 0; list-style: none; }
.queue-entry { display: grid; grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto auto; gap: 0.9rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.queue-entry.is-done > :not(.queue-actions) { opacity: 0.45; filter: grayscale(0.75); }
.queue-entry.is-done .track-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.queue-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.readd-singer { max-width: 11rem; padding: 0.42rem 1.8rem 0.42rem 0.55rem; }
.queue-number { color: var(--violet); font-size: 1.25rem; font-weight: 800; }
.singer-avatar { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.track-copy { display: grid; gap: 0.25rem; min-width: 0; }
.track-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-meta, .track-error { font-size: 0.82rem; }
.track-error { color: var(--danger); }
progress { width: min(18rem, 100%); accent-color: var(--violet); }
.performance { border-color: rgba(100, 232, 224, 0.35); }
.calibration-panel { border-color: rgba(169, 133, 255, 0.35); }
.calibration-panel .section-heading { align-items: flex-start; }
.calibration-visual { padding: 1rem 0.75rem; margin: 1rem 0; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(0, 0, 0, 0.18); }
.calibration-lane { position: relative; height: 2.75rem; margin: 0 0.7rem; }
.calibration-lane::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 0.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.13); transform: translateY(-50%); }
.calibration-center-mark { position: absolute; top: 0; bottom: 0; left: 50%; width: 0.2rem; border-radius: 999px; background: var(--pink); transform: translateX(-50%); box-shadow: 0 0 0.8rem rgba(255, 111, 174, 0.35); }
.calibration-ball { position: absolute; top: 50%; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0.35rem rgba(100, 232, 224, 0.13), 0 0 1rem rgba(100, 232, 224, 0.5); transform: translate(-50%, -50%); }
.calibration-visual:not(.is-running) .calibration-ball { opacity: 0.55; }
.calibration-visual.is-crossing .calibration-center-mark { background: var(--cyan); box-shadow: 0 0 1.2rem rgba(100, 232, 224, 0.8); }
.debug-panel { border-color: rgba(255, 111, 174, 0.45); }
.debug-panel .section-heading { align-items: flex-start; }
.debug-toggle { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.debug-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--pink); }
.consent { margin: 1rem 0; color: var(--ink); }
.meters { display: grid; gap: 0.8rem; margin-bottom: 1.2rem; }
meter { width: 100%; height: 1.5rem; }
input[type="range"] { width: min(30rem, 100%); display: block; margin: 0.5rem 0 1.2rem; accent-color: var(--violet); }
.countdown { display: grid; min-height: 16rem; place-items: center; font-size: clamp(5rem, 22vw, 12rem); font-weight: 900; color: var(--cyan); }
.lyrics { --lyric-line-progress: 0%; min-height: 17rem; text-align: center; }
.lyric-lines { position: relative; overflow: hidden; }
.lyric-lines p { position: absolute; left: 0; right: 0; width: 100%; margin: 0; transform: translateY(-50%); }
.performance-lyrics-box { height: 17rem; }
.performance-lyrics-box > .lyric-lines { height: 100%; }
.performance-lyrics-box.has-manual-controls > .lyric-lines { height: calc(100% - 4.5rem); }
.performance-lyrics-box > .lyric-lines p { white-space: nowrap; }
#current-lyric { font-size: clamp(1.7rem, 5vw, 3.2rem); font-weight: 800; }
.lyric-word { color: inherit; opacity: 1; transition: color 80ms linear; }
.lyric-word.is-active { color: var(--violet); opacity: 1; }
.lyric-word.is-sung { color: inherit; opacity: 1; }
#previous-lyric, #next-lyric { color: var(--muted); }
#previous-lyric { top: 12%; }
#current-lyric { top: 50%; }
#next-lyric { top: 88%; }
.timeline-layout { width: min(50rem, 100%); margin: 0 auto 1.5rem; display: flex; align-items: flex-end; gap: 0.85rem; }
.song-timeline { flex: 1; min-width: 0; }
.timeline-toggle { width: 2.65rem; height: 2.65rem; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); font-size: 1.15rem; }
.timeline-times { display: flex; justify-content: space-between; margin-bottom: 0.45rem; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.timeline-track { position: relative; height: 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.timeline-fill { position: absolute; inset: -1px auto -1px -1px; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.timeline-indicator { position: absolute; top: 50%; right: 0; width: 1rem; height: 1rem; border: 2px solid #0c0912; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 232, 224, 0.2); transform: translate(50%, -50%); }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  .custom-lyrics-lines-field textarea { padding: 0.5rem; font-size: 0.78rem; }
}
@media (max-width: 760px) { .columns, .feature-grid, .library-layout { grid-template-columns: 1fr; } .site-header { align-items: flex-start; } .site-nav { gap: 0.7rem; } .landing-hero { min-height: 20rem; padding: 2rem 1.4rem; } .preview-player, .preview-title-row { flex-wrap: wrap; } .preview-volume-control { margin-left: 3.15rem; } .song-time-settings, .output-volume-grid { grid-template-columns: 1fr; } .queue-entry { grid-template-columns: 1.5rem 2.5rem minmax(0, 1fr) auto; } .queue-actions { grid-column: 3 / -1; justify-content: flex-start; flex-wrap: wrap; } }