:root{--paper:#f3e9d8;--ink:#1d140e;--fg:#fffaf0;--fg-soft:#fffaf0b8;--fg-faint:#fffaf057;--glass:#181e1a42;--lift:0 1px 2px #120e0880, 0 2px 14px #120e0861;font-variation-settings:"SOFT" 100, "WONK" 0;font-optical-sizing:auto;color:var(--fg);-webkit-font-smoothing:antialiased;background:#1c2620;font-family:Fraunces,Georgia,serif}.paper{--fg:var(--ink);--fg-soft:#1d140eb3;--fg-faint:#1d140e40;--glass:#fffdf8b3;--lift:none;color:var(--fg)}*{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}.app:not(.paper):before{content:"";pointer-events:none;background:linear-gradient(#0000 58%,#0e141229 78%,#0e141280),linear-gradient(#0e141242,#0000 16%);position:fixed;inset:0}.toast{background:var(--glass);border:1px solid var(--fg-faint);-webkit-backdrop-filter:blur(18px)saturate(1.3);white-space:nowrap;pointer-events:none;border-radius:999px;margin:0;padding:9px 18px;font-size:13.5px;font-weight:500;animation:3.2s both toast;position:fixed;top:20px;left:50%;transform:translate(-50%)}@keyframes toast{0%{opacity:0;transform:translate(-50%,-6px)}8%,86%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%)}}.chrome{transition:opacity .6s}.quiet .chrome{opacity:0;pointer-events:none}.quiet .stage{cursor:none}.masthead{pointer-events:none;text-shadow:var(--lift);align-items:baseline;gap:14px;padding:20px 26px;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:-.015em;font-size:21px;font-weight:900}.now-playing{white-space:nowrap;text-overflow:ellipsis;letter-spacing:.005em;min-width:0;color:var(--fg-soft);font-size:15px;font-weight:400;overflow:hidden}.panel{padding:0 20px max(26px, 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:1.5px solid var(--fg);outline-offset:4px}.outline:focus-visible,.write:focus-visible{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg), 0 0 0 5px var(--fg-faint), 0 8px 40px #120e0838;outline:none}.text{letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--fg);text-shadow:var(--lift);opacity:.86;background:0 0;border:none;padding:8px 0;font-size:11.5px;font-weight:600;transition:opacity .2s}.text:hover{opacity:1}.round{background:var(--fg);width:46px;height:46px;color:var(--ink);border:none;border-radius:50%;flex:none;place-items:center;padding:0;transition:transform .2s,opacity .2s;display:grid;box-shadow:0 2px 18px #120e0852}.paper .round{color:var(--paper);box-shadow:none}.round:hover:not(:disabled){transform:scale(1.06)}.round:disabled{opacity:.4;cursor:default}.composer{grid-template-columns:minmax(0,1fr);gap:10px;width:min(540px,100%);display:grid}.recap{max-width:100%;color:var(--fg);text-shadow:var(--lift);opacity:.86;background:0 0;border:none;justify-self:center;align-items:center;gap:9px;padding:4px 10px;font-size:15px;font-style:normal;font-weight:400;transition:opacity .2s;display:flex}.recap:hover{opacity:1}.recap-text{white-space:nowrap;text-overflow:ellipsis;min-width:0;display:block;overflow:hidden}.ask{background:var(--glass);border:1px solid var(--fg-faint);-webkit-backdrop-filter:blur(18px)saturate(1.3);border-radius:999px;align-items:center;gap:8px;min-height:60px;padding:6px 6px 6px 24px;transition:border-color .25s,box-shadow .25s;animation:.32s cubic-bezier(.2,.7,.2,1) both step-in;display:flex;box-shadow:0 8px 40px #120e0838}@keyframes step-in{0%{opacity:0;transform:translateY(6px)}}.ask:focus-within{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg), 0 8px 40px #120e0838}.prompt:focus,.prompt:focus-visible{outline:none}.prompt{letter-spacing:.005em;background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:18px;font-weight:400}.prompt::placeholder{color:var(--fg-soft)}.choose{justify-content:center;align-items:center;gap:16px;min-height:60px;animation:.32s cubic-bezier(.2,.7,.2,1) both step-in;display:flex}.outline{border:1px solid var(--fg-soft);background:var(--glass);-webkit-backdrop-filter:blur(18px)saturate(1.3);height:52px;color:var(--fg);white-space:nowrap;border-radius:999px;align-items:center;gap:10px;padding:0 26px 0 22px;font-size:17px;font-weight:500;transition:border-color .2s,background .2s,transform .2s;display:inline-flex;box-shadow:0 8px 40px #120e0838}.outline:hover{border-color:var(--fg);transform:scale(1.02)}.photo{object-fit:cover;border:1px solid var(--fg);border-radius:50%;flex:none;width:22px;height:22px}.photo.big{width:52px;height:52px;box-shadow:0 8px 30px #120e084d}.icon{width:36px;height:36px;color:var(--fg);filter:drop-shadow(0 1px 3px #120e088c);opacity:.86;background:0 0;border:none;border-radius:50%;flex:none;place-items:center;margin:0 -8px;padding:0;transition:opacity .2s,background .2s,transform .2s;display:grid}.icon:hover{opacity:1;background:var(--glass);transform:translate(-2px)}.write{background:var(--fg);height:54px;color:var(--ink);letter-spacing:.005em;white-space:nowrap;border:none;border-radius:999px;flex:none;padding:0 34px;font-size:17px;font-weight:700;transition:transform .2s,opacity .2s;box-shadow:0 6px 30px #120e0857}.paper .write{color:var(--paper);box-shadow:none}.write:hover:not(:disabled){transform:scale(1.03)}.write:disabled{opacity:.5;cursor:default}.below{grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:34px;padding:0 24px;display:grid}.below.centred{grid-template-columns:1fr;justify-items:center}.hint{min-width:0;color:var(--fg);text-shadow:var(--lift);text-align:center;justify-content:center;align-items:center;gap:10px;margin:0;font-size:13.5px;font-weight:400;display:flex}.dots-of{flex:none;gap:5px;display:flex}.dots-of i{background:var(--fg);opacity:.35;border-radius:50%;width:5px;height:5px;box-shadow:0 1px 4px #120e0880}.dots-of .done{opacity:.7}.dots-of .on{opacity:1;transform:scale(1.3)}.spacer{visibility:hidden}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.ask{animation:none}}.notice{text-align:center;width:min(360px,100%);text-shadow:var(--lift);justify-items:center;gap:10px;display:grid}.status,.message{font-variation-settings:"SOFT" 100, "WONK" 1;letter-spacing:-.01em;margin:0;font-size:22px;font-weight:900}.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(--fg-soft);margin:0;font-size:15px;font-weight:400;overflow:hidden}.progress{background:var(--fg-faint);border-radius:1px;width:100%;height:2px;overflow:hidden}.progress-fill{background:var(--fg);transform-origin:0;will-change:transform;height:100%;transform:scaleX(0)}.time-left{letter-spacing:.14em;text-transform:uppercase;min-height:1.3em;color:var(--fg-soft);margin:0;font-size:11.5px;font-weight:600}.player{pointer-events:none;justify-items:center;gap:16px;width:min(820px,100%);display:grid}.lyric{text-align:center;font-variation-settings:"SOFT" 100, "WONK" 1;letter-spacing:-.018em;text-wrap:balance;color:#fff;text-shadow:0 1px 1px #120e088c,0 3px 10px #120e0873,0 10px 44px #120e0880;min-height:1.06em;margin:0;font-size:clamp(27px,5.2vw,54px);font-style:normal;font-weight:900;line-height:1.04}.paper .lyric{text-shadow:none;-webkit-text-stroke:.17em var(--ink);paint-order:stroke fill;stroke-linejoin:round}.lyric span{opacity:.5;transition:opacity .12s ease-out}.lyric .sung{opacity:1}.transport{pointer-events:auto;align-items:center;gap:16px;width:min(460px,100%);display:flex}.actions{pointer-events:auto;gap:26px;padding:16px 26px;display:flex;position:fixed;top:0;right:0}.scrub{cursor:pointer;touch-action:none;background:linear-gradient(var(--fg-faint), var(--fg-faint)) center / 100% 2px no-repeat;filter:drop-shadow(0 1px 6px #120e0866);flex:1;align-items:center;height:30px;display:flex}.fill{background:var(--fg);transform-origin:0;width:100%;height:2px;transform:scaleX(0)}.player .message{pointer-events:auto;font-size:15px}@media (width<=520px){.masthead{padding:16px 18px}.ask{padding-left:20px}.prompt{font-size:16px}.below{gap:10px;padding:0 14px}.hint{text-wrap:balance;font-size:12.5px}.choose{gap:12px}.now-playing{display:none}.actions{gap:18px;padding:12px 18px}}