@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color-scheme:dark;font-family:Manrope,system-ui,sans-serif;background:#0d0e12;color:#f7f7f2;font-synthesis:none;text-rendering:optimizeLegibility;--lime: #c8f31d;--ink: #0d0e12;--muted: #95969d;--line: rgba(255, 255, 255, .1);--panel: #15161b}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#0d0e12}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.overlay-html,.overlay-html body,.overlay-html #overlay{background:transparent!important}.setup-page{min-height:100vh;overflow-x:hidden}.setup-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 76% 10%,rgba(200,243,29,.12),transparent 28%),radial-gradient(circle at 4% 74%,rgba(67,63,113,.2),transparent 31%)}.noise{position:fixed;top:0;right:0;bottom:0;left:0;opacity:.025;pointer-events:none;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.topbar,.setup-main{width:min(1120px,calc(100% - 48px));margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;padding:29px 0}.brand{display:flex;gap:11px;align-items:center;color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:27px;height:27px;color:var(--ink);background:var(--lime);border-radius:50%;font-size:13px;line-height:1;box-shadow:0 0 24px #c8f31d3b}.brand-mark:before{content:"≋";transform:rotate(-10deg)}.status-badge{display:inline-flex;align-items:center;gap:8px;color:#b7b7be;font-size:11px;letter-spacing:.07em;text-transform:uppercase}.status-dot{width:7px;height:7px;border-radius:50%;background:#6f7179}.status-badge.connected{color:#d2f67d}.status-badge.connected .status-dot{background:var(--lime);box-shadow:0 0 10px var(--lime)}.setup-main{padding:48px 0 100px}.hero{max-width:760px}.eyebrow{margin:0 0 17px;color:var(--lime);font:500 11px/1 DM Mono,monospace;letter-spacing:.13em}h1,h2,p{margin-top:0}.hero h1{max-width:760px;margin-bottom:21px;font-size:clamp(42px,7.2vw,88px);line-height:.95;letter-spacing:-.075em;font-weight:800}.hero h1 em{color:var(--lime);font-style:normal}.hero-copy{max-width:580px;color:#a9abb2;font-size:16px;line-height:1.65}.setup-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:18px;align-items:start;margin-top:70px}.panel{border:1px solid var(--line);border-radius:18px;background:#15161be0;box-shadow:0 22px 80px #0000002e}.panel-inner{padding:27px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:27px}.panel h2{margin-bottom:8px;font-size:18px;letter-spacing:-.04em}.panel-heading p{margin-bottom:0;color:var(--muted);font-size:12px;line-height:1.5}.step-number{display:grid;place-items:center;min-width:26px;height:26px;color:var(--ink);background:var(--lime);border-radius:50%;font:500 12px DM Mono,monospace}.field{margin-top:21px}.field:first-of-type{margin-top:0}.field label{display:block;margin-bottom:9px;color:#e9e9e5;font-size:12px;font-weight:700}.field-note{margin:8px 0 0;color:#6f7179;font-size:11px;line-height:1.5}.input-wrap{display:flex;align-items:center;border:1px solid #2d2e35;border-radius:8px;background:#101115;transition:border-color .2s,box-shadow .2s}.input-wrap:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px #c8f31d14}.input-wrap input{width:100%;min-width:0;padding:12px 13px;border:0;outline:0;color:#fff;background:transparent;font-size:12px}.input-wrap input::placeholder{color:#5f6067}.input-suffix{padding-right:13px;color:#676970;font:10px DM Mono,monospace;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 17px;border:0;border-radius:7px;cursor:pointer;font-size:12px;font-weight:800;text-decoration:none;transition:transform .18s,background .18s,color .18s}.button:hover{transform:translateY(-1px)}.button-primary{color:var(--ink);background:var(--lime)}.button-primary:hover{background:#d7ff3f}.button-secondary{color:#e7e7e5;border:1px solid #34353d;background:transparent}.button-secondary:hover{border-color:#777981;background:#222329}.button-ghost{min-height:auto;padding:6px 0;color:#9899a0;background:transparent;font-size:11px}.button-ghost:hover{color:#fff}.button:disabled{cursor:not-allowed;opacity:.45;transform:none}.button-wide{width:100%;margin-top:26px}.connection-box{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #2d2e35;border-radius:9px;background:#101115}.connection-copy{display:flex;align-items:center;gap:11px;min-width:0}.spotify-icon{display:grid;place-items:center;width:25px;height:25px;flex:0 0 auto;color:var(--ink);background:#1ed760;border-radius:50%;font-size:17px;font-weight:800}.spotify-icon:before{content:"≋";transform:rotate(-12deg)}.connection-title{margin:0 0 2px;color:#e8e8e4;font-size:12px;font-weight:700}.connection-subtitle{margin:0;color:#777981;font-size:10px}.url-panel{overflow:hidden}.url-preview{--preview-primary: #c8f31d;--preview-secondary: #15161b;position:relative;margin:0 27px;min-height:178px;padding:23px;border:1px solid var(--preview-primary);border-radius:13px;background:linear-gradient(140deg,var(--preview-secondary),rgba(29,31,32,.6) 48%,rgba(77,50,92,.32));overflow:hidden}.url-preview:before{content:"";position:absolute;width:260px;height:260px;right:-80px;top:-120px;border:1px solid var(--preview-primary);border-radius:50%;opacity:.55;box-shadow:0 0 0 23px #ffffff0a,0 0 0 48px #ffffff08}.preview-top{position:relative;display:flex;justify-content:space-between;color:var(--preview-primary);font:10px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.preview-title{position:relative;max-width:295px;margin:30px 0 8px;font-size:25px;font-weight:800;letter-spacing:-.07em}.preview-meta{position:relative;margin:0;color:#b4b9a2;font-size:11px}.url-result{margin:20px 27px 27px}.url-result label{display:block;margin-bottom:9px;color:#96979e;font-size:11px;font-weight:700;letter-spacing:.02em}.url-line{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 12px;border:1px solid #34353d;border-radius:8px;background:#101115}.url-line code{min-width:0;flex:1;overflow:hidden;color:#a9aab0;font:10px/1.5 DM Mono,monospace;text-overflow:ellipsis;white-space:nowrap}.copy-button{min-height:32px;padding:0 11px;font-size:10px}.url-help{display:flex;align-items:center;gap:7px;margin:11px 0 0;color:#6f7179;font-size:10px}.url-help:before{content:"↳";color:var(--lime);font-size:13px}.theme-controls{margin:0 0 22px;padding:16px;border:1px solid #2d2e35;border-radius:11px;background:#101115}.theme-controls-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}.theme-controls h3{margin:0 0 4px;color:#e8e8e4;font-size:12px;letter-spacing:-.02em}.theme-controls-heading p{margin:0;color:#777981;font-size:10px}.theme-count{color:#808653;font:500 9px DM Mono,monospace;letter-spacing:.06em;white-space:nowrap}.theme-select-field>label{display:block;margin-bottom:7px;color:#a8a9ad;font-size:10px;font-weight:700}.theme-select-field select{width:100%;padding:10px 11px;border:1px solid #34353d;border-radius:7px;outline:0;color:#e8e8e4;background:#18191e;font-size:11px;cursor:pointer}.theme-select-field select:focus{border-color:var(--lime)}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.color-control{display:block;color:#a8a9ad;font-size:10px;font-weight:700}.color-input{display:flex;align-items:center;gap:8px;margin-top:7px;padding:5px 8px 5px 5px;border:1px solid #34353d;border-radius:7px;background:#18191e}.color-input input{width:25px;height:25px;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}.color-input code{color:#8c8e94;font:10px DM Mono,monospace;text-transform:uppercase}.resolution-card{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:17px;padding:17px 18px;border:1px solid rgba(200,243,29,.3);border-radius:11px;background:#c8f31d12;box-shadow:inset 0 0 24px #c8f31d06}.resolution-label{margin:0 0 6px;color:var(--lime);font:500 10px DM Mono,monospace;letter-spacing:.08em}.resolution-note{margin:0;color:#a1a38f;font-size:11px;line-height:1.4}.resolution-values{display:flex;align-items:center;gap:10px;flex:0 0 auto}.resolution-values span{display:flex;flex-direction:column;align-items:center;gap:2px}.resolution-values strong{color:#f0f4dd;font:700 22px/1 DM Mono,monospace;letter-spacing:-.08em}.resolution-values small{color:#8b916b;font:500 9px DM Mono,monospace;letter-spacing:.06em}.resolution-values>b{color:#7f8c4a;font:500 16px DM Mono,monospace}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.detail-item{padding:16px;border:1px solid var(--line);border-radius:11px;background:#15161b8c}.detail-item strong{display:block;margin-bottom:6px;color:#e7e7e3;font-size:11px}.detail-item span{color:#777981;font-size:10px;line-height:1.45}.footer-note{margin-top:55px;color:#62636a;font:10px DM Mono,monospace;text-align:center;letter-spacing:.02em}.toast{position:fixed;right:23px;bottom:23px;z-index:10;padding:12px 15px;color:var(--ink);border-radius:7px;background:var(--lime);font-size:11px;font-weight:800;box-shadow:0 10px 35px #0000004d;animation:toast-in .25s ease-out}@keyframes toast-in{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.hidden{display:none!important}.overlay-page{min-width:0;background:transparent!important;overflow:hidden}.overlay-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:22px}.overlay-card{--overlay-accent: #c8f31d;--overlay-secondary: #15161b;display:flex;align-items:center;gap:19px;width:min(600px,100%);padding:15px;color:#f8f8f5;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(115deg,var(--overlay-secondary),rgba(25,26,31,.91));box-shadow:0 18px 55px #0000005c;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.overlay-card.compact{width:min(465px,100%);gap:14px;padding:11px;border-radius:12px}.album-art{position:relative;width:112px;height:112px;flex:0 0 auto;overflow:hidden;border-radius:10px;background:#292b31;box-shadow:0 8px 24px #00000047}.compact .album-art{width:75px;height:75px;border-radius:7px}.album-art img{display:block;width:100%;height:100%;object-fit:cover}.album-art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(255,255,255,.13);border-radius:inherit}.overlay-copy{min-width:0;flex:1}.overlay-eyebrow{display:flex;align-items:center;gap:7px;margin:0 0 8px;color:var(--overlay-accent);font:500 10px DM Mono,monospace;letter-spacing:.09em;text-transform:uppercase}.equalizer{display:flex;align-items:end;gap:2px;height:11px}.equalizer i{display:block;width:2px;background:var(--overlay-accent);border-radius:3px;animation:eq 1s ease-in-out infinite alternate}.equalizer i:nth-child(1){height:5px;animation-delay:-.2s}.equalizer i:nth-child(2){height:10px;animation-delay:-.7s}.equalizer i:nth-child(3){height:7px;animation-delay:-.4s}.paused .equalizer i{animation-play-state:paused}@keyframes eq{to{height:3px}}.track-title{margin:0;overflow:hidden;font-size:clamp(17px,3vw,22px);font-weight:800;letter-spacing:-.055em;text-overflow:ellipsis;white-space:nowrap}.compact .track-title{font-size:17px}.track-artist{margin:4px 0 0;overflow:hidden;color:#a4a5ab;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.progress-wrap{margin-top:17px}.compact .progress-wrap{margin-top:12px}.progress-track{width:100%;height:3px;overflow:hidden;border-radius:3px;background:#ffffff21}.progress-fill{width:0;height:100%;background:var(--overlay-accent);border-radius:inherit;transition:width .35s linear}.time-row{display:flex;justify-content:space-between;margin-top:6px;color:#777981;font:9px DM Mono,monospace}.overlay-placeholder{width:min(360px,100%);padding:25px;color:#dfe0da;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:var(--overlay-secondary, rgba(18,19,22,.88));text-align:center;box-shadow:0 18px 55px #00000040}.overlay-placeholder .brand-mark{margin:0 auto 15px;background:var(--overlay-accent, var(--lime))}.overlay-placeholder h2{margin:0 0 7px;font-size:17px;letter-spacing:-.04em}.overlay-placeholder p{margin:0;color:#92949c;font-size:11px;line-height:1.55}.overlay-card.is-loading{border-color:transparent;background:#121316b3}.cover-skeleton{width:112px;height:112px;flex:0 0 auto;border-radius:10px;background:linear-gradient(110deg,#27292f 8%,#34363d 18%,#27292f 33%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.copy-skeleton{flex:1}.copy-skeleton span{display:block;height:11px;margin:12px 0;border-radius:5px;background:#303239}.copy-skeleton span:first-child{width:34%}.copy-skeleton span:nth-child(2){width:80%}.copy-skeleton span:last-child{width:94%;height:4px}@keyframes shimmer{to{background-position:-200% 0}}.callback-page{display:grid;min-height:100vh;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,rgba(200,243,29,.12),transparent 36%),#0d0e12}.callback-card{width:min(410px,100%);padding:40px 30px;border:1px solid var(--line);border-radius:17px;background:var(--panel);text-align:center}.callback-card .spotify-mark{margin:0 auto 24px;display:grid;place-items:center;width:44px;height:44px;color:var(--ink);border-radius:50%;background:#1ed760;font-size:27px;font-weight:800}.callback-card h1{margin-bottom:11px;font-size:25px;letter-spacing:-.06em}.callback-card p:not(.eyebrow){margin-bottom:24px;color:var(--muted);font-size:12px;line-height:1.6}@media(max-width:760px){.topbar,.setup-main{width:min(100% - 32px,600px)}.topbar{padding:21px 0}.setup-main{padding-top:40px}.setup-grid{grid-template-columns:1fr;margin-top:47px}.details{grid-template-columns:1fr}.hero h1{font-size:clamp(42px,13vw,70px)}}@media(max-width:430px){.panel-inner{padding:22px}.url-preview,.url-result{margin-left:22px;margin-right:22px}.overlay-shell{padding:12px}.overlay-card{gap:12px;padding:10px}.album-art{width:80px;height:80px;border-radius:7px}.overlay-eyebrow{margin-bottom:5px;font-size:8px}.track-title{font-size:15px}.track-artist{font-size:10px}.color-grid{grid-template-columns:1fr}}