@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{color-scheme:dark;font-family:DM Sans,system-ui,sans-serif;color:#f7f7f8;background:#09090b;font-synthesis:none;--bg: #09090b;--panel: rgba(24, 24, 29, .76);--panel-solid: #17171c;--line: rgba(255, 255, 255, .09);--muted: #9b9ba7;--purple: #a66cff;--pink: #ff6bb5;--green: #1ed760}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 80% 5%,rgba(120,65,220,.2),transparent 34rem),radial-gradient(circle at 10% 38%,rgba(255,67,153,.09),transparent 28rem),var(--bg)}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:20;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='.6'/%3E%3C/svg%3E")}.site-header{width:min(1180px,calc(100% - 40px));margin:0 auto;height:92px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font:700 17px Space Grotesk,sans-serif;letter-spacing:.09em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#08080a;background:linear-gradient(135deg,#e8d9ff,var(--purple) 55%,var(--pink));box-shadow:0 0 30px #a66cff59}.header-actions{display:flex;align-items:center;gap:14px}.creator-tag{color:#666671;font-size:10px;letter-spacing:.06em;white-space:nowrap}.creator-tag strong{color:#aaaab5;font-weight:700}.ghost-button{border:1px solid var(--line);color:#dddde5;background:#ffffff08;padding:10px 16px;border-radius:999px}.ghost-button:hover{background:#ffffff14}main{width:min(1180px,calc(100% - 40px));margin:0 auto}.hero{min-height:660px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px;padding:40px 0 90px}.eyebrow{margin:0 0 15px;color:#c7a7ff;font-size:12px;font-weight:700;letter-spacing:.18em}.hero h1,.dashboard-hero h1,.loading-state h1{margin:0;font:700 clamp(50px,7.2vw,92px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.055em}.hero h1 span{color:transparent;background:linear-gradient(110deg,#dcc7ff,var(--purple) 47%,var(--pink));background-clip:text;-webkit-background-clip:text}.hero-description{max-width:630px;margin:28px 0 34px;color:#b8b8c1;font-size:clamp(18px,2vw,22px);line-height:1.55}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.spotify-button,.upload-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:15px 24px;font-weight:800;transition:transform .2s,filter .2s,background .2s}.spotify-button{border:0;color:#07150c;background:var(--green);box-shadow:0 14px 45px #1ed7602e}.spotify-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.upload-button{border:1px solid rgba(199,167,255,.32);color:#e9dcff;background:#a66cff17}.upload-button:hover{transform:translateY(-2px);background:#a66cff29}.compact-upload{flex:0 0 auto}.spotify-dot{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--green);background:#07150c}.privacy-note{color:#71717c;font-size:12px;margin:14px 0 0}.history-link{display:inline-flex;align-items:center;gap:8px;margin-top:17px;color:#c9aaff;font-size:13px;font-weight:700}.history-link:hover{color:#eadfff}.notice{max-width:620px;padding:13px 15px;border-radius:12px;font-size:14px;line-height:1.5}.notice.error{background:#ff52771a;border:1px solid rgba(255,82,119,.25);color:#ffabbc}.notice.match{background:#a66cff1a;border:1px solid rgba(199,167,255,.25);color:#ddd0f4}.notice.match strong{color:#f3ebff}.dna-card{position:relative;aspect-ratio:1;max-width:470px;width:100%;justify-self:end;border:1px solid var(--line);border-radius:42px;background:linear-gradient(145deg,#ffffff0e,#ffffff03);overflow:hidden;box-shadow:0 50px 100px #00000059}.dna-card:before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#a66cff47,#a66cff00 65%);filter:blur(8px)}.orbit{position:absolute;inset:22%;border:1px solid rgba(198,166,255,.32);border-radius:50%;animation:spin 12s linear infinite}.orbit:after{content:"";position:absolute;width:10px;height:10px;top:-5px;left:50%;border-radius:50%;background:#d5b9ff;box-shadow:0 0 22px #b77cff}.orbit-two{inset:34%;animation-direction:reverse;animation-duration:8s;border-color:#ff6bb540}.orbit-two:after{background:var(--pink);box-shadow:0 0 20px var(--pink)}.dna-center{position:absolute;inset:41%;display:grid;place-items:center;border-radius:34%;color:#08080a;background:linear-gradient(135deg,#eee4ff,#a66cff 55%,#ff6bb5);font:700 58px Space Grotesk;transform:rotate(-8deg);box-shadow:0 15px 50px #a66cff61}.preview-stat{position:absolute;display:flex;flex-direction:column;padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:#0d0d11c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 30px #00000038}.preview-stat strong{font:700 15px Space Grotesk}.preview-stat span{color:var(--muted);font-size:10px;margin-top:3px}.preview-one{top:14%;left:8%}.preview-two{right:6%;top:42%}.preview-three{left:9%;bottom:11%}@keyframes spin{to{transform:rotate(360deg)}}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:80px}.feature-strip article{position:relative;padding:30px;border-right:1px solid var(--line)}.feature-strip article:last-child{border-right:0}.feature-strip article>span{color:var(--purple);font:600 11px Space Grotesk}.feature-strip h2{margin:15px 0 7px;font:600 20px Space Grotesk}.feature-strip p{margin:0;color:var(--muted);font-size:14px}.loading-state{min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.loading-state h1{margin-top:28px;font-size:clamp(34px,5vw,60px)}.loading-state p{color:var(--muted)}.loader{display:flex;align-items:center;gap:8px;height:50px}.loader span{width:7px;border-radius:10px;background:linear-gradient(var(--purple),var(--pink));animation:bounce .75s ease-in-out infinite alternate}.loader span:nth-child(2){animation-delay:.15s}.loader span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%{height:14px}to{height:50px}}.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:50px 0 52px}.profile-row{display:flex;align-items:center;gap:22px}.avatar{width:86px;height:86px;border-radius:28px;object-fit:cover;border:1px solid var(--line)}.avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));color:#09090b;font:700 32px Space Grotesk}.dashboard-hero h1{font-size:clamp(42px,6vw,72px)}.dashboard-hero .profile-row p:last-child{color:var(--muted);margin:8px 0 0}.range-tabs{display:flex;padding:4px;background:#ffffff0a;border:1px solid var(--line);border-radius:999px}.range-button{border:0;border-radius:999px;padding:9px 14px;background:transparent;color:var(--muted);font-size:13px}.range-button.active{background:#f3edf9;color:#111015;font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.stat-card,.panel{border:1px solid var(--line);border-radius:24px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.stat-card{min-height:170px;padding:23px;display:flex;flex-direction:column;justify-content:flex-end}.stat-card p{margin:0 auto auto 0;color:var(--muted);font-size:13px}.stat-card strong{font:700 clamp(27px,3vw,40px) "Space Grotesk";letter-spacing:-.04em}.stat-card strong.compact-stat{font-size:clamp(20px,2.1vw,28px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-card span{color:#a8a8b2;font-size:12px;margin-top:5px}.accent-card{background:linear-gradient(145deg,#a66cffeb,#6d37bfbd)}.accent-card p,.accent-card span{color:#ffffffc4}.panel{padding:28px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.section-heading.compact{margin-bottom:14px}.section-heading h2{margin:0;font:600 clamp(25px,3vw,36px) "Space Grotesk";letter-spacing:-.035em}.section-heading>p{max-width:390px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.listening-clock{margin-bottom:14px}.hour-chart{height:190px;display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:5px;padding:14px 0 0;border-bottom:1px solid var(--line)}.hour-column{height:100%;display:grid;grid-template-rows:1fr 18px;align-items:end;gap:6px}.hour-bar{width:100%;min-height:6px;border-radius:6px 6px 2px 2px;background:#ffffff1a;transition:height .4s}.hour-bar.peak{background:linear-gradient(var(--pink),var(--purple));box-shadow:0 0 18px #a66cff4d}.hour-column span{color:#6f6f79;font-size:9px;text-align:center}.chart-legend{display:none}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.rank-list{list-style:none;margin:0;padding:0}.rank-list li{display:grid;grid-template-columns:28px 44px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}.rank-list li:last-child{border-bottom:0}.rank-list img,.mini-fallback{width:44px;height:44px;border-radius:10px;object-fit:cover}.artist-list img{border-radius:50%}.mini-fallback{display:grid;place-items:center;background:#ffffff0f;color:var(--purple)}.rank-number{color:#6f6f79;font:500 11px Space Grotesk}.item-copy{min-width:0;display:flex;flex-direction:column}.item-copy strong,.item-copy span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.item-copy strong{font-size:13px}.item-copy span{color:var(--muted);font-size:11px;margin-top:3px}.rank-list a{color:#797985}.rank-list a:hover{color:#fff}.recent-panel{margin-bottom:14px}.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.recent-card{min-width:0;padding:10px;display:flex;gap:11px;align-items:center;background:#ffffff06;border:1px solid rgba(255,255,255,.05);border-radius:14px;transition:background .2s,transform .2s}.recent-card:hover{background:#ffffff0f;transform:translateY(-2px)}.recent-card img,.cover-fallback{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}.cover-fallback{display:grid;place-items:center;background:#ffffff0f}.recent-card div{min-width:0;display:flex;flex-direction:column}.recent-card strong,.recent-card span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.recent-card strong{font-size:12px}.recent-card span,.recent-card small{color:var(--muted);font-size:10px;margin-top:3px}.recent-card small{color:#6d6d77}.sample-warning{margin:18px auto 70px;max-width:720px;color:#757580;text-align:center;font-size:12px;line-height:1.5}.history-cta{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:50px;padding:40px;border:1px solid rgba(190,151,255,.22);border-radius:28px;background:linear-gradient(135deg,#a66cff24,#ff6bb50f)}.history-cta h2,.match-cta h2{max-width:700px;margin:0;font:600 clamp(28px,4vw,46px)/1.07 "Space Grotesk";letter-spacing:-.045em}.history-cta p:not(.eyebrow){max-width:700px;margin:18px 0 0;color:#aaaab4;line-height:1.55}.history-cta p strong{color:#ded1f4}.history-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.history-primary,.history-upload{display:inline-flex;justify-content:center;width:100%;padding:14px 18px;border-radius:999px;font-weight:800;text-align:center}.history-primary{color:#110b18;background:linear-gradient(110deg,#d9c3ff,var(--purple),var(--pink))}.history-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.history-upload{border:1px solid rgba(213,185,255,.34);color:#eadfff;background:#09090b5c;cursor:pointer}.history-upload:hover{background:#ffffff12}.history-actions span{color:#777782;font-size:11px;line-height:1.45}.local-data-note{margin:0 0 18px;padding:13px 16px;border:1px solid rgba(30,215,96,.2);border-radius:14px;color:#a3a3ad;background:#1ed7600e;font-size:12px;line-height:1.5}.local-data-note strong{color:#baf0cd}.history-mini-stats{margin-top:0}.imported-complete{margin:14px 0 70px}.match-cta{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:50px;margin:14px 0;padding:40px;border:1px solid rgba(30,215,96,.18);border-radius:28px;background:linear-gradient(135deg,#1ed76017,#a66cff13)}.match-cta p:not(.eyebrow){max-width:700px;margin:18px 0 0;color:#aaaab4;line-height:1.55}.match-primary{display:inline-flex;justify-content:center;width:100%;padding:14px 18px;border:0;border-radius:999px;color:#07150c;background:var(--green);font-weight:800;cursor:pointer}.match-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.match-result{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:34px;margin:14px 0;padding:34px;border:1px solid rgba(199,167,255,.24);border-radius:28px;background:linear-gradient(135deg,#a66cff2e,#ff6bb514)}.match-score{display:flex;aspect-ratio:1;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:radial-gradient(circle,#a66cff57,#09090b33)}.match-score strong{font:700 48px Space Grotesk;letter-spacing:-.06em}.match-score span{color:#aaaab4;font-size:11px}.match-result h2{margin:0;font:600 clamp(28px,4vw,46px)/1.05 "Space Grotesk"}.match-result p:not(.eyebrow){margin:15px 0 0;color:#aaaab4;line-height:1.55}.match-result p strong{color:#e9dcff}.match-clear{margin-top:18px;padding:0;border:0;color:#8d8d98;background:transparent;font-size:11px;cursor:pointer}.match-clear:hover{color:#fff}footer{width:min(1180px,calc(100% - 40px));margin:0 auto;display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:28px 0 38px;color:#666671;font-size:11px}footer p{margin:0}footer a:hover{color:#aaaab3}@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:70px;gap:55px}.dna-card{justify-self:center;max-width:520px}.stat-grid,.recent-grid{grid-template-columns:1fr 1fr}.dashboard-hero{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.site-header,main,footer{width:min(100% - 26px,1180px)}.site-header{height:72px}.header-actions{gap:8px}.creator-tag{font-size:9px}.hero{min-height:auto;padding:50px 0 70px}.hero h1{font-size:50px}.hero-actions>*{width:100%}.dna-card{border-radius:28px}.feature-strip{grid-template-columns:1fr}.feature-strip article{border-right:0;border-bottom:1px solid var(--line)}.feature-strip article:last-child{border-bottom:0}.profile-row{align-items:flex-start}.avatar{width:66px;height:66px;border-radius:20px}.dashboard-hero h1{font-size:42px}.range-tabs{width:100%}.range-button{flex:1;padding-inline:7px}.stat-grid,.two-column,.recent-grid{grid-template-columns:1fr}.history-cta,.match-cta{grid-template-columns:1fr;gap:28px;padding:26px}.match-result{grid-template-columns:1fr;padding:26px}.match-score{width:150px}.section-heading{align-items:flex-start;flex-direction:column;gap:10px}.panel{padding:20px;border-radius:20px}.hour-chart{gap:2px;height:150px}.hour-column span{font-size:7px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}