:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #080808; color: #f5f1e9; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 0%, #211d1820, transparent 34%), #080808; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; padding: 18px; }
.app-header { display: flex; justify-content: space-between; align-items: center; margin: 0 auto 18px; max-width: 1180px; }
.app-header div { display: grid; gap: 3px; }
.app-header strong { font-size: 18px; }
.app-header small, .status { color: #8e887f; font-size: 12px; }
.editor { display: grid; grid-template-columns: minmax(420px, 720px) minmax(320px, 1fr); gap: 30px; max-width: 1180px; margin: auto; }
.controls { display: grid; gap: 14px; align-content: start; }
.panel { display: grid; gap: 13px; padding: 16px; border: 1px solid #292724; border-radius: 17px; background: #11110ff2; box-shadow: inset 0 1px #ffffff08; }
.panel-title { display: flex; align-items: center; gap: 9px; color: #f3ede4; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.panel-title span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #f0e5d7; color: #15130f; font-size: 10px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading small { color: #777269; }
.controls label { display: grid; gap: 7px; color: #aaa49a; font-size: 12px; }
.controls input, .controls textarea { width: 100%; border: 1px solid #302e2a; border-radius: 11px; background: #181817; color: #fff; padding: 11px; outline: none; }
.controls input:focus, .controls textarea:focus { border-color: #968d80; box-shadow: 0 0 0 3px #fff1; }
.file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.transport { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; }
.play-button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f1e7dc; color: #111; font-weight: 800; }
.time-readout { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.time-readout strong { min-width: 82px; font-size: 17px; }
.time-readout span { color: #777269; font-size: 12px; }
.zoom-control { grid-template-columns: auto 1fr auto; align-items: center; margin-left: auto; min-width: 190px; }
.zoom-control input { padding: 0; }
.timeline { display: block; width: 100%; height: 116px; border: 1px solid #302e2b; border-radius: 12px; touch-action: none; }
.nudge-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #827d74; font-size: 11px; }
.nudge-buttons { display: flex; align-items: center; gap: 5px; }
.nudge-buttons button { border: 1px solid #37342f; border-radius: 7px; padding: 6px 8px; background: #1b1a18; color: #d8d0c5; font-size: 11px; }
.nudge-buttons button:hover { background: #ece2d5; color: #111; }
.nudge-buttons em { margin-left: 2px; font-style: normal; }
.line-editor { display: grid; gap: 7px; max-height: 340px; overflow: auto; padding-right: 3px; }
.line-row { display: grid; grid-template-columns: minmax(0, 1fr) 102px 112px; gap: 7px; align-items: stretch; padding: 6px; border: 1px solid transparent; border-radius: 11px; background: #171715; }
.line-row.selected { border-color: #8e8375; background: #201e1b; }
.line-row.unsynced .line-time { color: #d28d7e; }
.line-select, .stamp-button { border: 0; border-radius: 8px; background: transparent; color: #eee8df; }
.line-select { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; text-align: left; }
.line-select span { color: #756f66; font: 10px monospace; }
.line-select strong { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.line-time { padding: 8px !important; font: 11px ui-monospace, Consolas, monospace !important; text-align: center; }
.line-time.invalid { border-color: #e46969 !important; color: #ff9b9b; }
.stamp-button { background: #2a2723; font-size: 10px; }
.stamp-button:hover { background: #eee5da; color: #111; }
.transition-inputs { display: grid; grid-template-columns: 1fr 84px auto; align-items: center; gap: 8px; }
.transition-inputs input[type="range"] { padding: 0; }
.save-button { border: 0; border-radius: 13px; padding: 15px 18px; background: #f2eadf; color: #111; font-weight: 700; }
.save-button:disabled { cursor: wait; opacity: .55; }
.render-progress { display: grid; gap: 8px; padding: 13px 15px; border: 1px solid #36322d; border-radius: 13px; background: #151412; }
.render-progress[hidden] { display: none; }
.render-progress div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.render-progress span { color: #8f887e; font-variant-numeric: tabular-nums; }
.render-progress progress { width: 100%; height: 8px; accent-color: #f0e4d5; }
.render-progress[data-tone="success"] { border-color: #55705d; }
.render-progress[data-tone="error"] { border-color: #8d4d4d; }
.preview-wrap { display: flex; justify-content: center; }
.preview-sticky { position: sticky; top: 18px; align-self: start; }
.preview-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #817b72; font: 10px ui-monospace, monospace; letter-spacing: .11em; }
.preview { --transition-ms: 520ms; position: relative; width: min(360px, 90vw); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #292622; border-radius: 26px; background: #050505; box-shadow: 0 28px 80px #000; isolation: isolate; }
.preview canvas { display: block; width: 100%; height: 100%; }
.background { position: absolute; inset: -18%; width: 136%; height: 136%; object-fit: cover; filter: blur(48px) saturate(.7); opacity: .26; animation: background-drift 12s ease-in-out infinite alternate; }
.shade { position: absolute; inset: 0; background: linear-gradient(to bottom, #0004, #0008 52%, #000e); }
.artwork { position: absolute; top: 8%; left: 50%; width: 64%; aspect-ratio: 1; transform: translateX(-50%); object-fit: cover; border-radius: 7px; box-shadow: 0 24px 70px #000, 0 0 54px #f4e5d735; animation: cover-float 7s ease-in-out infinite; }
.notes span { position: absolute; left: var(--x); bottom: -10%; color: #fff3; font-family: Georgia, serif; font-size: var(--size); opacity: 0; animation: note-float var(--duration) ease-in-out infinite; animation-delay: var(--delay); }
.lyrics-stack { position: absolute; top: 49%; left: 5%; right: 5%; height: 45%; text-align: center; mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 94%, transparent); }
.lyrics-stack p { position: absolute; inset-inline: 0; min-height: 62px; margin: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 4vw, 27px); line-height: 1.06; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; transform-origin: center; transition: transform var(--transition-ms) cubic-bezier(.2,.72,.18,1), opacity var(--transition-ms) ease, filter var(--transition-ms) ease, text-shadow var(--transition-ms) ease; will-change: transform, opacity; }
.lyrics-stack .current { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); text-shadow: 0 0 3px #fff, 0 0 16px #fff, 0 0 36px #fff8; }
.lyrics-stack .previous { transform: translateY(-76px) scale(.78); opacity: .28; filter: blur(.25px); text-shadow: 0 0 8px #fff3; }
.lyrics-stack .next { transform: translateY(72px) scale(.82); opacity: .42; filter: blur(.1px); }
.lyrics-stack .future { transform: translateY(137px) scale(.7); opacity: .14; filter: blur(.65px); }
.lyrics-stack .gone { transform: translateY(-139px) scale(.61); opacity: 0; filter: blur(1px); }
.lyrics-stack .after { transform: translateY(202px) scale(.61); opacity: 0; filter: blur(1px); }
@keyframes cover-float { 0%,100% { transform: translateX(-50%) rotate(-.7deg); } 35% { transform: translateX(-50%) translateY(-5px) rotate(1deg) scale(1.018); } 68% { transform: translateX(-50%) translateY(2px) rotate(-1deg); } }
@keyframes background-drift { to { transform: scale(1.14) translate(3%, -2%); opacity: .34; } }
@keyframes note-float { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 4% { opacity: .08; } 42% { transform: translate(var(--drift), -360px) rotate(7deg); opacity: .16; } 78% { opacity: .09; } 92% { transform: translate(calc(var(--drift) * -.5), -720px) rotate(-5deg); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 850px) { .editor { grid-template-columns: 1fr; } .preview-wrap { order: -1; } .preview-sticky { position: static; } .preview { width: min(330px, 90vw); } }
@media (max-width: 560px) { .app-shell { padding: 12px; } .file-grid { grid-template-columns: 1fr; } .transport { grid-template-columns: auto 1fr; } .zoom-control { grid-column: 1 / -1; margin: 0; } .nudge-panel { align-items: flex-start; flex-direction: column; } .nudge-buttons { flex-wrap: wrap; } .line-row { grid-template-columns: minmax(0, 1fr) 96px; } .stamp-button { grid-column: 1 / -1; padding: 8px; } }