@import url("https://fonts.googleapis.com/css2?family=Kalnia:wght@200;300;500;700&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap");:root{--font-display:"Kalnia",Georgia,serif;--font-body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;--c1:#f0c36d;--c2:#d4572a;--c3:#7a1f3f;--c4:#2b0c2e;--c5:#140612;--ink:#f3ecde;--ink-dim:hsla(40,47%,91%,.62);--ink-mute:hsla(40,47%,91%,.34);--ink-whisper:hsla(40,47%,91%,.14);--glass:rgba(255,240,220,.06);--glass-hi:rgba(255,240,220,.14);--glass-lo:rgba(255,240,220,.03);--line:rgba(255,240,220,.14);--danger:#ff6a4d;--radius:22px;--radius-lg:28px}*{box-sizing:border-box;margin:0;padding:0}body,html{min-height:100vh;background:var(--c5);color:var(--ink);font-family:var(--font-body),-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;height:auto;width:auto;overflow-x:hidden}body{background:radial-gradient(1000px 700px at 15% 10%,var(--c1) 0,transparent 55%),radial-gradient(900px 700px at 85% 20%,var(--c2) 0,transparent 55%),radial-gradient(1200px 900px at 60% 110%,var(--c3) 0,transparent 60%),radial-gradient(800px 600px at 10% 90%,var(--c4) 0,transparent 60%),var(--c5);background-attachment:fixed;position:relative;transition:background 1.2s ease}body:before{inset:-10%;z-index:0;background:radial-gradient(600px 400px at var(--mx,40%) var(--my,30%),rgba(255,220,160,.18),transparent 60%);filter:blur(40px);animation:synesthetic-float 14s ease-in-out infinite alternate}body:after,body:before{content:"";position:fixed;pointer-events:none}body:after{inset:0;z-index:1;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:overlay;opacity:.9}@keyframes synesthetic-float{to{transform:translate(6%,-4%) scale(1.08)}}::-moz-selection{background:rgba(255,225,150,.35);color:var(--c5)}::selection{background:rgba(255,225,150,.35);color:var(--c5)}a{color:inherit;text-decoration:none}a:hover{color:var(--ink)}button{background:none;cursor:pointer}button,input,textarea{font:inherit;color:inherit;border:none}input,textarea{background:transparent;outline:none}.art-backdrop{position:fixed;inset:-14%;z-index:0;background-image:var(--album-image,none);background-size:cover;background-position:50%;filter:blur(80px) saturate(1.4) brightness(.55);opacity:.55;transform:scale(1.15);transition:opacity 1.2s ease,background-image 0s;pointer-events:none}.app-shell{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:24px 28px 64px;min-height:100vh}.topbar{justify-content:space-between;gap:16px;margin-bottom:28px}.brand,.topbar{display:flex;align-items:center}.brand{font-family:var(--font-display),serif;font-weight:200;font-size:22px;letter-spacing:.01em;gap:12px}.brand b,.brand em{font-weight:500}.brand em{font-style:italic}.brand .orb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--c1),var(--c2) 60%,var(--c3));box-shadow:0 0 24px rgba(255,180,100,.6);animation:orb-pulse 3s ease-in-out infinite;flex-shrink:0}@keyframes orb-pulse{50%{transform:scale(1.12);filter:brightness(1.2)}}.top-right{display:flex;font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.chip,.top-right{gap:8px;align-items:center}.chip{border:1px solid var(--line);padding:5px 12px;border-radius:999px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);white-space:nowrap;display:inline-flex}.chip.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#9be3a7;box-shadow:0 0 10px #9be3a7}.chip.danger{color:var(--danger);border-color:rgba(255,106,77,.3)}.chip.danger:hover{background:rgba(255,106,77,.12);color:#ffaa96}.chip:hover{background:var(--glass-hi)}.stage{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;min-height:520px;margin-top:16px}.cover-stage,.stage{position:relative;align-items:center}.cover-stage{display:flex;justify-content:center;aspect-ratio:1/1;max-height:560px}.cover{width:78%;aspect-ratio:1/1;border-radius:28px;background:radial-gradient(120% 90% at 30% 20%,var(--c1) 0,var(--c2) 38%,var(--c3) 72%,var(--c4) 100%);background-size:cover;background-position:50%;box-shadow:0 40px 120px rgba(180,60,40,.55),0 0 0 1px hsla(0,0%,100%,.08),inset 0 0 120px rgba(20,6,18,.35);position:relative;overflow:hidden;transform:rotate(-2deg);animation:cover-sway 9s ease-in-out infinite alternate}@keyframes cover-sway{to{transform:rotate(2deg) translateY(-8px)}}.cover-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.cover-img,.cover:before{position:absolute;inset:0}.cover:before{content:"";background:conic-gradient(from 20deg at 70% 20%,transparent 0deg,hsla(0,0%,100%,.18) 40deg,transparent 80deg),radial-gradient(60% 40% at 70% 20%,hsla(0,0%,100%,.2),transparent 70%);mix-blend-mode:screen;pointer-events:none}.cover-reflect{position:absolute;bottom:-42%;width:78%;aspect-ratio:1/1;border-radius:28px;background-image:var(--album-image,radial-gradient(120% 90% at 30% 20%,var(--c1),var(--c2),var(--c3),var(--c4)));background-size:cover;background-position:50%;transform:scaleY(-1) rotate(-2deg);filter:blur(30px);opacity:.45;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}.now-card{position:absolute;left:4%;bottom:4%;padding:14px 18px;border-radius:16px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--line);display:flex;gap:14px;align-items:center;min-width:260px;box-shadow:0 20px 50px rgba(0,0,0,.35)}.now-card .swatch{display:flex;gap:3px;flex-shrink:0}.now-card .swatch i{width:8px;height:34px;border-radius:3px;display:block}.now-card .swatch i:first-child{background:var(--c1)}.now-card .swatch i:nth-child(2){background:var(--c2)}.now-card .swatch i:nth-child(3){background:var(--c3)}.now-card .swatch i:nth-child(4){background:var(--c4)}.now-card .meta-t{font-family:var(--font-mono),monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}.now-card .meta-b{font-family:var(--font-display),serif;font-weight:300;font-size:17px;font-style:italic;line-height:1.2;margin-top:2px}.info{position:relative}.eyebrow{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);display:flex;gap:10px;align-items:center}.eyebrow:before{content:"";width:28px;height:1px;background:var(--ink-mute)}.song-title{font-family:var(--font-display),serif;font-weight:200;font-size:clamp(54px,7.5vw,112px);line-height:.9;letter-spacing:-.035em;margin:14px 0 8px;text-shadow:0 2px 30px rgba(0,0,0,.25);overflow-wrap:break-word}.song-title em{font-style:italic;font-weight:500;background:linear-gradient(90deg,var(--c1),#ffdca0 50%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}.byline{font-family:var(--font-display),serif;font-style:italic;font-weight:300;font-size:22px;color:var(--ink-dim)}.byline b{color:var(--ink);font-weight:500;font-style:normal;border-bottom:1px solid var(--line)}.player{margin-top:30px;padding:18px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);display:flex;gap:18px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.32);flex-wrap:wrap}.ctrls{display:flex;gap:8px}.ctrls button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--glass-hi);border:1px solid var(--line);transition:transform .2s,background .2s,filter .2s}.ctrls button:hover:not(:disabled){background:rgba(255,240,220,.22);transform:translateY(-1px)}.ctrls button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.3)}.ctrls button svg path{fill:currentColor}.ctrls button svg path:first-child{fill:transparent}.ctrls .play{width:58px;height:58px;background:linear-gradient(135deg,var(--c1),var(--c2));border:none;color:#1a0810;box-shadow:0 10px 30px rgba(212,87,42,.55)}.ctrls .play:hover:not(:disabled){filter:brightness(1.1)}.time{flex:1;display:flex;flex-direction:column;gap:8px;min-width:200px}.time .row{display:flex;justify-content:space-between;font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}.time .bar{height:3px;border-radius:2px;background:rgba(255,240,220,.14);position:relative;overflow:hidden}.time .bar .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--c1),#ffdca0,var(--c2));box-shadow:0 0 14px rgba(255,200,140,.7);transition:width .8s ease}.ts-chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.ts-chips button{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.08em;padding:5px 12px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--line);color:var(--ink);transition:background .15s,transform .15s}.ts-chips button:hover{background:rgba(255,240,220,.28);transform:translateY(-1px)}.notes{margin-top:38px;padding:30px 32px 32px;border-radius:var(--radius-lg);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative}.notes .notes-label{position:absolute;top:-10px;left:22px;font-family:var(--font-mono),monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);background:var(--c5);padding:3px 10px;border-radius:99px;border:1px solid var(--line)}.notes-editor{font-family:var(--font-display),serif;font-weight:300;font-size:19px;line-height:1.55;color:var(--ink);outline:none;min-height:220px}.notes-editor:empty:before{content:attr(data-placeholder);color:var(--ink-mute);font-style:italic}.notes-editor em{color:#ffdca0;font-style:italic}.notes-editor b,.notes-editor strong{color:var(--ink);font-weight:500}.notes-hint{margin-top:30px;padding:36px;text-align:center;color:var(--ink-mute);font-family:var(--font-display),serif;font-style:italic;font-size:22px}.notes-hint small{display:block;margin-top:10px;font-size:11px;font-style:normal}.foot,.notes-hint small{font-family:var(--font-mono),monospace;letter-spacing:.22em;text-transform:uppercase}.foot{margin-top:36px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-mute)}.foot a{border-bottom:1px solid var(--line);color:var(--ink-dim)}.foot a:hover{color:var(--ink)}.login-shell{z-index:2;min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:60px 32px}.login-hero,.login-shell{position:relative}.login-hero .kicker{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:20px}.login-hero h1{font-family:var(--font-display),serif;font-weight:200;font-size:clamp(58px,8vw,124px);line-height:.9;letter-spacing:-.035em;margin-bottom:22px}.login-hero h1 em{font-style:italic;font-weight:500;background:linear-gradient(90deg,var(--c1),#ffdca0 50%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}.login-hero .lede{font-family:var(--font-display),serif;font-weight:300;font-style:italic;font-size:24px;color:var(--ink-dim);max-width:480px;margin-bottom:36px}.login-button{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font-family:var(--font-mono),monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;background:linear-gradient(135deg,var(--c1),var(--c2));color:#1a0810;border:none;box-shadow:0 20px 60px rgba(212,87,42,.55);transition:transform .2s,filter .2s,box-shadow .2s}.login-button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 28px 70px rgba(212,87,42,.6)}.login-button .spotify-mark{width:22px;height:22px;border-radius:50%;background:#1a0810;color:var(--c1);display:grid;place-items:center;font-size:12px}.login-panel{padding:30px 32px;border-radius:var(--radius-lg);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 30px 80px rgba(0,0,0,.35)}.login-panel h2{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px}.login-panel .perms{display:flex;flex-direction:column;gap:14px}.login-panel .perms .row{display:flex;gap:12px;align-items:flex-start}.login-panel .perms code{flex-shrink:0;font-family:var(--font-mono),monospace;font-size:10.5px;letter-spacing:.08em;padding:3px 8px;border-radius:6px;background:var(--glass-hi);border:1px solid var(--line);color:var(--ink);margin-top:2px}.login-panel .perms p{font-size:14px;line-height:1.55;color:var(--ink-dim)}.login-panel .note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-mute);line-height:1.55}.login-panel .note a{color:var(--ink-dim);border-bottom:1px solid var(--line)}.login-footer{position:absolute;bottom:20px;left:32px;right:32px;display:flex;justify-content:space-between;font-family:var(--font-mono),monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}.fade{opacity:0;transform:translateY(18px) scale(.99);animation:fade-rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}.fade.d2{animation-delay:.12s}.fade.d3{animation-delay:.28s}.fade.d4{animation-delay:.44s}.fade.d5{animation-delay:.6s}@keyframes fade-rise{to{opacity:1;transform:none}}@media (max-width:960px){.stage{grid-template-columns:1fr;gap:28px;min-height:auto}.cover-stage{max-height:420px}.login-shell{grid-template-columns:1fr;padding:40px 22px 80px;min-height:auto;gap:32px}.login-footer{position:static;margin-top:30px;flex-wrap:wrap;gap:10px}}@media (max-width:600px){.app-shell{padding:18px 18px 48px}.topbar{flex-wrap:wrap;gap:10px}.notes{padding:24px 20px}.song-title{font-size:clamp(48px,12vw,72px)}.login-hero h1{font-size:clamp(48px,13vw,72px)}.player{padding:14px}}@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none}.cover,.fade,body:before{animation:none}}