:root{--paper:#f3e9d8;--ink:#2a1c14;--soft:#6f5a4a;--accent:#e2562c;--card:#fffaf2db;color:var(--ink);background:var(--paper);font-family:Fraunces,Georgia,serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overflow:hidden}.stage{width:100%;height:100%;display:block;position:fixed;inset:0}.masthead{padding:20px 24px;position:fixed;top:0;left:0}.wordmark{all:unset;cursor:pointer;letter-spacing:-.02em;font-size:22px;font-style:italic;font-weight:800}.panel{padding:0 16px max(44px, env(safe-area-inset-bottom));pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.panel>*{pointer-events:auto}.fineprint{text-align:center;color:var(--soft);pointer-events:none;font-size:11px;position:fixed;bottom:12px;left:0;right:0}.card{background:var(--card);border:1.5px solid var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;width:min(560px,100%);padding:16px}.composer{gap:12px;display:grid}.field{gap:6px;display:grid}.field span{letter-spacing:-.01em;font-size:20px;font-weight:700}textarea,input{font:inherit;color:inherit;border:1.5px solid var(--ink);resize:none;background:#fffdf8;border-radius:10px;padding:10px 12px;font-size:16px}textarea::placeholder,input::placeholder{color:#a8978a}textarea:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.row{align-items:center;gap:10px;display:flex}.row.end{justify-content:space-between}.name{flex:1;min-width:0}button{font:inherit;color:inherit;cursor:pointer;white-space:nowrap;border-radius:999px;padding:10px 16px;font-size:15px;font-weight:650}.primary{background:var(--accent);color:#fff8ef;border:1.5px solid var(--ink)}.primary:disabled{opacity:.45;cursor:default}.ghost{border:1.5px solid var(--ink);background:0 0}.link{text-underline-offset:3px;background:0 0;border:none;padding:10px 4px;text-decoration:underline}.photo{align-items:center;gap:8px;display:flex}.photo img{object-fit:cover;border:1.5px solid var(--ink);border-radius:10px;width:56px;height:56px}.status,.message{text-align:center;margin:4px 0;font-size:20px;font-weight:650}.message{margin-bottom:14px}.card:has(.message){text-align:center}.dots:after{content:"";animation:1.4s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.player{justify-items:center;gap:14px;width:min(680px,100%);display:grid}.lyric{text-align:center;letter-spacing:-.02em;color:#b29c86;-webkit-text-stroke:7px var(--paper);paint-order:stroke fill;stroke-linejoin:round;text-wrap:balance;min-height:1.3em;margin:0;font-size:clamp(22px,4.4vw,38px);font-style:italic;font-weight:750;line-height:1.15}.lyric .sung{color:var(--ink)}.transport{align-items:center;gap:12px;width:100%;padding:12px;display:flex}.play{min-width:96px}.meta{flex:1;gap:8px;min-width:0;display:grid}.meta h1{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:700;overflow:hidden}.scrub{cursor:pointer;touch-action:none;align-items:center;height:14px;display:flex}.scrub:before{content:"";position:absolute}.fill{background:var(--accent);transform-origin:0;border-radius:2px;width:100%;height:4px;transform:scaleX(0);box-shadow:0 0 0 100vmax #0000}.scrub{background:linear-gradient(#2a1c142e,#2a1c142e) 50%/100% 4px no-repeat}@media (width<=560px){.transport{flex-wrap:wrap}.meta{flex-basis:100%;order:-1}.transport button{flex:1}}.making{gap:10px;display:grid}.making .status{margin:4px 0 0}.song-title{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-style:italic;font-weight:700;overflow:hidden}.progress{background:#2a1c1424;border-radius:3px;height:6px;overflow:hidden}.progress-fill{border-radius:inherit;background:var(--accent);transform-origin:0;will-change:transform;height:100%;transform:scaleX(0)}.time-left{text-align:center;color:var(--soft);margin:0;font-size:13px}