:root{--px:calc(100vw / 1280);--accent:var(--color-accent);--accent-tone:#3b2a14}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);width:100%;height:100%;color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-kerning:normal;overflow:hidden}::selection{background:var(--accent);color:var(--color-on-accent)}svg{flex:none;display:block}.tint{background:var(--accent);opacity:.03;pointer-events:none;transition:background-color var(--track-crossfade) ease;position:fixed;top:0;bottom:0;left:0;right:0}.screen{padding:calc(36 * var(--px)) calc(64 * var(--px));gap:calc(28 * var(--px));grid-template-rows:auto 1fr auto;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.screen[hidden],.idle[hidden]{display:none}.header{justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:calc(12 * var(--px));display:flex}.logo{width:calc(36 * var(--px));height:calc(36 * var(--px));border-radius:calc(10 * var(--px));background:var(--accent);color:var(--color-on-accent);transition:background-color var(--track-crossfade) ease;place-items:center;display:grid}.logo svg{width:100%;height:100%}.wordmark{font:700 calc(22 * var(--px)) / 1 var(--font-display);letter-spacing:calc(-.5 * var(--px))}.pill{align-items:center;gap:calc(8 * var(--px));padding:calc(8 * var(--px)) calc(14 * var(--px));border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:calc(15 * var(--px));color:var(--color-muted);display:flex}.status-dot{width:calc(8 * var(--px));height:calc(8 * var(--px));background:var(--color-connected);border-radius:50%}.pill svg{width:calc(16 * var(--px));height:calc(16 * var(--px))}.main{grid-template-columns:calc(380 * var(--px)) minmax(0, 1fr);gap:calc(64 * var(--px));align-items:center;min-height:0;display:grid;position:relative}.art,.lyrics{transition:opacity .3s}.art{gap:calc(22 * var(--px));flex-direction:column;min-width:0;display:flex}.cover{width:calc(380 * var(--px));aspect-ratio:1;border-radius:calc(20 * var(--px));background:var(--color-surface);box-shadow:0 calc(18 * var(--px)) calc(40 * var(--px)) #00000073;position:relative;overflow:hidden}.cover img,.cover .initials{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity var(--track-crossfade) var(--ease-out);position:absolute;top:0;bottom:0;left:0;right:0}.cover [data-shown]{opacity:1}.initials{background:var(--accent-tone);color:var(--accent);font:700 calc(104 * var(--px)) / 1 var(--font-display);letter-spacing:calc(-3 * var(--px));place-items:center;display:grid}.text{gap:calc(6 * var(--px));flex-direction:column;min-width:0;display:flex}.title{font:700 calc(30 * var(--px)) / 1.15 var(--font-display);letter-spacing:calc(-.3 * var(--px));-webkit-line-clamp:2;text-wrap:balance;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.artist,.meta{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.artist{font-size:calc(20 * var(--px));color:var(--color-text-2);margin-top:calc(4 * var(--px))}.meta{font-size:calc(15 * var(--px));color:var(--color-muted)}.lyrics{align-items:center;min-width:0;height:100%;display:flex;position:relative;overflow:hidden}.lyric-col{gap:calc(22 * var(--px));flex-direction:column;width:100%;display:flex}.line{font:500 calc(30 * var(--px)) / 1.25 var(--font-body);color:var(--color-text-2);white-space:nowrap;text-overflow:ellipsis;transform-origin:0 0;min-height:1.25em;transition:color .45s var(--ease-out), opacity .45s var(--ease-out);overflow:hidden}.line[data-d="-3"],.line[data-d="3"],.line[data-leaving]{opacity:0}.line[data-d="-2"]{color:var(--color-lyric-past-far)}.line[data-d="-1"]{color:var(--color-lyric-past)}.line[data-d="0"]{font:700 calc(44 * var(--px)) / 1.2 var(--font-display);letter-spacing:calc(-.6 * var(--px));color:var(--accent);white-space:normal;-webkit-line-clamp:2;text-wrap:balance;-webkit-box-orient:vertical;display:-webkit-box}.line[data-d="0"][data-long]{font-size:calc(34 * var(--px));-webkit-line-clamp:3}.line[data-d="1"]{color:var(--color-text-2)}.line[data-d="2"]{color:var(--color-lyric-past)}.dots{gap:calc(14 * var(--px));padding:calc(14 * var(--px)) 0;display:flex}.dots span{width:calc(16 * var(--px));height:calc(16 * var(--px));background:var(--accent);opacity:.25;border-radius:50%}.plain{font:500 calc(30 * var(--px)) / 1.35 var(--font-body);color:var(--color-text-2);will-change:transform}.plain-line{text-indent:-1em;margin-bottom:calc(10 * var(--px));padding-left:1em}.plain-gap{height:calc(28 * var(--px))}.lyrics[data-mode=unsynced]{align-items:flex-start;-webkit-mask-image:linear-gradient(#0000,#000 14% 86%,#0000);mask-image:linear-gradient(#0000,#000 14% 86%,#0000)}.end-message{font:700 calc(44 * var(--px)) / 1.2 var(--font-display);color:var(--color-text)}.screen[data-lyrics=none] .main{grid-template-columns:minmax(0,1fr)}.screen[data-lyrics=none] .lyrics{display:none}.screen[data-lyrics=none] .art{grid-template-columns:calc(440 * var(--px)) minmax(0, 1fr);gap:calc(64 * var(--px));align-items:center;display:grid}.screen[data-lyrics=none] .cover{width:calc(440 * var(--px))}.screen[data-lyrics=none] .title{font-size:calc(48 * var(--px));-webkit-line-clamp:3}.screen[data-lyrics=none] .title[data-long]{font-size:calc(40 * var(--px));-webkit-line-clamp:4}.screen[data-lyrics=none] .artist{font-size:calc(26 * var(--px))}.screen[data-lyrics=none] .meta{font-size:calc(18 * var(--px))}.screen[data-state=paused] .art,.screen[data-state=paused] .lyrics{opacity:.6}.screen[data-state=loading] .title{color:var(--color-muted)}.screen[data-state=loading] .lyrics{opacity:0}.progress{height:calc(6 * var(--px));border-radius:calc(3 * var(--px));background:var(--color-border);position:relative;overflow:hidden}.fill{background:var(--accent);transform-origin:0;position:absolute;top:0;bottom:0;left:0;right:0;transform:scaleX(0)}.buffer{background:var(--color-text-2);opacity:0;width:18%;position:absolute;top:0;bottom:0}.progress[data-buffering] .buffer{opacity:.35;animation:1.4s linear infinite buffer-slide}@keyframes buffer-slide{0%{transform:translate(-100%)}to{transform:translate(560%)}}.footer-row{align-items:center;gap:calc(24 * var(--px));margin-top:calc(12 * var(--px));font-size:calc(15 * var(--px));color:var(--color-muted);grid-template-columns:1fr auto 1fr;display:grid}.time{align-items:center;gap:calc(10 * var(--px));font-variant-numeric:tabular-nums;display:flex}.paused-badge{align-items:center;gap:calc(8 * var(--px));padding:calc(5 * var(--px)) calc(12 * var(--px));border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font:700 calc(18 * var(--px)) / 1 var(--font-body);display:inline-flex}.paused-badge[hidden]{display:none}.paused-badge svg{width:calc(18 * var(--px));height:calc(18 * var(--px))}.badges{gap:calc(8 * var(--px));display:flex}.badge{background:var(--color-surface);border-radius:var(--radius-badge);padding:calc(4 * var(--px)) calc(10 * var(--px));white-space:nowrap}.next{white-space:nowrap;text-overflow:ellipsis;justify-self:end;max-width:100%;overflow:hidden}.next b{color:var(--color-text);font-weight:700}.chip,.notice{left:50%;bottom:calc(100 * var(--px));transform:translate(-50%, calc(12 * var(--px)));align-items:center;gap:calc(10 * var(--px));padding:calc(12 * var(--px)) calc(20 * var(--px));border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);font:700 calc(18 * var(--px)) / 1 var(--font-body);box-shadow:0 calc(8 * var(--px)) calc(24 * var(--px)) #00000073;opacity:0;transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);pointer-events:none;display:flex;position:fixed}.chip[data-shown],.notice[data-shown]{opacity:1;transform:translate(-50%)}.chip svg,.notice svg{width:calc(20 * var(--px));height:calc(20 * var(--px))}.notice{left:calc(444 * var(--px));transform:translateY(calc(12 * var(--px)));border-radius:var(--radius-chip);max-width:calc(100% - 444 * var(--px));font-weight:500;position:absolute;bottom:0}.notice[data-shown]{transform:none}.screen[data-lyrics=none] .notice{left:calc(504 * var(--px))}.notice svg{color:var(--color-warning)}.idle{justify-content:center;align-items:center;gap:calc(28 * var(--px));text-align:center;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.idle .logo{width:calc(96 * var(--px));height:calc(96 * var(--px));border-radius:calc(26 * var(--px));animation:4s ease-in-out infinite alternate breathe}.idle .wordmark{font-size:calc(56 * var(--px));letter-spacing:calc(-1.5 * var(--px))}.idle .hint{font-size:calc(22 * var(--px));color:var(--color-muted)}@keyframes breathe{0%{transform:scale(1)}to{transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){.idle .logo,.progress[data-buffering] .buffer{animation:none}}.pills{gap:calc(10 * var(--px));display:flex}.karaoke-pill{color:var(--accent);font-weight:700;display:none}.now-small{text-align:center;min-width:0;font-size:calc(18 * var(--px));color:var(--color-text-2);white-space:nowrap;text-overflow:ellipsis;padding:0 calc(24 * var(--px));flex:1;display:none;overflow:hidden}.screen[data-karaoke] .karaoke-pill,.screen[data-karaoke] .now-small{justify-content:center;align-items:center;display:flex}.screen[data-karaoke] .main{grid-template-columns:minmax(0,1fr)}.screen[data-karaoke] .art{display:none}.screen[data-karaoke] .lyric-col{text-align:center;align-items:center}.screen[data-karaoke] .line{font-size:calc(36 * var(--px));transform-origin:top;max-width:100%}.screen[data-karaoke] .line[data-d="0"]{font-size:calc(64 * var(--px));letter-spacing:calc(-1 * var(--px))}.screen[data-karaoke] .line[data-d="0"][data-long]{font-size:calc(48 * var(--px))}.screen[data-karaoke] .line[data-d="0"][data-words]{color:var(--color-text)}.word{transition:color .12s var(--ease-out)}.screen[data-karaoke] .line[data-d="0"] .word[data-sung]{color:var(--accent)}