:root{--paper:#f3e9d8;--ink:#2a1c14;--soft:#6f5a4a;--accent:#e2562c;font-variation-settings:"SOFT" 100, "WONK" 0;color:var(--ink);background:var(--paper);font-family:Fraunces,Georgia,serif}*{box-sizing:border-box}html,body,#root,.app{height:100%;margin:0}body{overflow:hidden}.stage{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:fixed;inset:0}.stage:active{cursor:grabbing}.chrome{transition:opacity .5s}.quiet .chrome{opacity:0;pointer-events:none}.quiet .stage{cursor:none}.masthead{pointer-events:none;align-items:baseline;gap:12px;padding:18px 22px;display:flex;position:fixed;top:0;left:0;right:0}.wordmark{all:unset;cursor:pointer;pointer-events:auto;font-variation-settings:"SOFT" 100, "WONK" 1;letter-spacing:-.02em;font-size:20px;font-weight:900}.now-playing{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--soft);font-size:15px;font-weight:500;overflow:hidden}.panel{padding:0 18px max(22px, 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}button,input{font:inherit;color:inherit}button{cursor:pointer}input:focus-visible,button:focus-visible,.wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.text{white-space:nowrap;background:0 0;border:none;padding:8px 2px;font-size:14px;font-weight:600}.text:hover{text-underline-offset:3px;text-decoration:underline}.round{background:var(--ink);width:44px;height:44px;color:var(--paper);border:none;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.round:disabled{opacity:.35;cursor:default}.composer{gap:6px;width:min(520px,100%);display:grid}.ask{border:1.5px solid var(--ink);background:#fffdf8;border-radius:999px;align-items:center;gap:8px;padding:5px 5px 5px 20px;display:flex}.ask:focus-within{outline:2px solid var(--accent);outline-offset:2px}.prompt{background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:17px;font-weight:500}.prompt::placeholder,.name::placeholder{color:#a8978a}.extras{align-items:center;gap:14px;padding:0 20px;display:flex}.name{background:0 0;border:none;border-bottom:1.5px solid #0000;border-radius:0;flex:1;min-width:0;padding:8px 0 6px;font-size:14px;font-weight:600}.name:hover,.name:focus{border-bottom-color:var(--ink);outline:none}.photo{object-fit:cover;border:1.5px solid var(--ink);border-radius:50%;width:30px;height:30px}.notice{text-align:center;justify-items:center;gap:8px;width:min(360px,100%);display:grid}.status,.message{margin:0;font-size:18px;font-weight:700}.dots:after{content:"";animation:1.4s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.song-title{white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--soft);margin:0;font-size:14px;font-weight:500;overflow:hidden}.progress{background:#2a1c1429;border-radius:2px;width:100%;height:3px;overflow:hidden}.progress-fill{background:var(--ink);transform-origin:0;will-change:transform;height:100%;transform:scaleX(0)}.time-left{min-height:1.3em;color:var(--soft);margin:0;font-size:13px}.player{pointer-events:none;justify-items:center;gap:10px;width:min(760px,100%);display:grid}.lyric{text-align:center;font-variation-settings:"SOFT" 100, "WONK" 1;letter-spacing:-.015em;text-wrap:balance;color:#fff;-webkit-text-stroke:.17em var(--ink);paint-order:stroke fill;stroke-linejoin:round;min-height:1.06em;margin:0;font-size:clamp(26px,5.2vw,50px);font-style:normal;font-weight:900;line-height:1.06}.lyric span{opacity:.5}.lyric .sung{opacity:1}.transport{pointer-events:auto;align-items:center;gap:14px;width:min(520px,100%);display:flex}.transport .text{-webkit-text-stroke:4px var(--paper);paint-order:stroke fill;stroke-linejoin:round}.transport .round{box-shadow:0 0 0 2px var(--paper)}.scrub{cursor:pointer;touch-action:none;background:linear-gradient(var(--paper), var(--paper)) center / 100% 5px no-repeat;flex:1;align-items:center;height:28px;display:flex}.fill{background:var(--ink);transform-origin:0;width:100%;height:3px;transform:scaleX(0)}.player .message{pointer-events:auto;font-size:15px}@media (width<=520px){.extras{flex-wrap:wrap;gap:2px 14px}.name{flex-basis:100%}.now-playing{display:none}}
