:root{--bg-void: #06060a;--bg-deep: #0c0c14;--bg-card: rgba(255,255,255,.03);--bg-card-hover: rgba(255,255,255,.055);--purple-core: #7c3aff;--purple-bright: #9d6bff;--purple-glow: rgba(124, 58, 255, .35);--green-core: #1a6e4a;--green-bright: #2dba7e;--green-glow: rgba(45, 186, 126, .25);--text-primary: #f0eeff;--text-secondary: rgba(220, 215, 255, .55);--text-dim: rgba(180, 175, 220, .3);--border-subtle: rgba(255,255,255,.06);--border-purple: rgba(124, 58, 255, .3);--border-green: rgba(45, 186, 126, .2)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg-void);color:var(--text-primary);font-family:Syne,sans-serif;min-height:100vh;overflow-x:hidden}.bg-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none}.bg-atmosphere:before{content:"";position:absolute;top:-20%;left:-10%;width:60%;height:70%;background:radial-gradient(ellipse at center,rgba(124,58,255,.2) 0%,transparent 65%);animation:drift1 18s ease-in-out infinite alternate}.bg-atmosphere:after{content:"";position:absolute;bottom:-20%;right:-10%;width:55%;height:65%;background:radial-gradient(ellipse at center,rgba(26,110,74,.18) 0%,transparent 65%);animation:drift2 22s ease-in-out infinite alternate}.bg-mid-glow{position:absolute;top:35%;left:50%;transform:translate(-50%);width:40%;height:30%;background:radial-gradient(ellipse at center,rgba(100,50,200,.07) 0%,transparent 70%);animation:drift3 15s ease-in-out infinite alternate}@keyframes drift1{0%{transform:translate(0) scale(1)}to{transform:translate(3%,5%) scale(1.08)}}@keyframes drift2{0%{transform:translate(0) scale(1)}to{transform:translate(-4%,-3%) scale(1.1)}}@keyframes drift3{0%{opacity:.6}to{opacity:1}}.bg-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:128px 128px}.page{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:0 24px}nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:28px 40px;border-bottom:1px solid var(--border-subtle)}.nav-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;cursor:pointer;transition:color .2s}.nav-brand:hover{color:var(--text-primary)}.nav-brand .dot{width:6px;height:6px;border-radius:50%;background:var(--purple-bright);box-shadow:0 0 8px var(--purple-bright);animation:pulse-dot 2.5s ease-in-out infinite;flex-shrink:0}.nav-logo{height:3em;width:auto;display:inline-block;vertical-align:middle;margin:0 8px;filter:brightness(1.5) contrast(1.3) drop-shadow(0 0 6px rgba(157,107,255,.7)) drop-shadow(0 0 12px rgba(100,220,255,.4))}.nav-tabs{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}.nav-tab{font-family:Syne,sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;padding:7px 13px;border-radius:8px;transition:all .2s;border:1px solid transparent;white-space:nowrap}.nav-tab:hover{color:var(--text-primary);background:#ffffff0a}.nav-tab.active{color:var(--purple-bright);background:#7c3aff1a;border-color:var(--border-purple);box-shadow:0 0 14px #7c3aff2e,inset 0 0 8px #7c3aff0d}.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;animation:heroIn .9s cubic-bezier(.16,1,.3,1) both}.coming-soon-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:DM Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-bright);margin-bottom:28px;padding:6px 16px;border:1px solid var(--border-purple);border-radius:20px;background:#7c3aff14}.coming-soon-title{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--purple-bright) 0%,#b47fff 40%,var(--green-bright) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.coming-soon-sub{font-size:15px;color:var(--text-secondary);max-width:360px;line-height:1.6}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.nav-tag{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--green-bright);border:1px solid var(--border-green);padding:4px 10px;border-radius:20px;background:#2dba7e0f}.hero{padding:80px 0 60px;text-align:center;animation:heroIn .9s cubic-bezier(.16,1,.3,1) both}@keyframes heroIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:DM Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-bright);margin-bottom:28px;padding:6px 16px;border:1px solid var(--border-purple);border-radius:20px;background:#7c3aff14}.hero-eyebrow:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--purple-bright);box-shadow:0 0 6px var(--purple-bright)}h1{font-size:clamp(44px,7vw,76px);font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:20px}.h1-line1{color:var(--text-primary)}.h1-line2{background:linear-gradient(135deg,var(--purple-bright) 0%,#b47fff 40%,var(--green-bright) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-sub{font-size:16px;font-weight:400;color:var(--text-secondary);max-width:480px;margin:0 auto 52px;line-height:1.6}.input-area{animation:heroIn .9s .15s cubic-bezier(.16,1,.3,1) both}.url-row{display:flex;gap:0;background:#ffffff0a;border:1px solid var(--border-purple);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.url-row:focus-within{border-color:var(--purple-bright);box-shadow:0 0 0 3px var(--purple-glow),0 0 40px #7c3aff1a}.url-input{flex:1;background:transparent;border:none;outline:none;padding:18px 22px;font-family:DM Mono,monospace;font-size:14px;font-weight:300;color:var(--text-primary);letter-spacing:.02em}.url-input::placeholder{color:var(--text-dim)}.btn-analyze{background:linear-gradient(135deg,#7c3aff,#5a1fd1);border:none;padding:18px 32px;font-family:Syne,sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;cursor:pointer;transition:all .2s;white-space:nowrap;position:relative;overflow:hidden}.btn-analyze:hover{box-shadow:0 0 30px #7c3aff80}.divider-row{display:flex;align-items:center;gap:16px;margin:20px 0}.divider-line{flex:1;height:1px;background:var(--border-subtle)}.divider-text{font-family:DM Mono,monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}.dropzone{border:1px dashed rgba(124,58,255,.25);border-radius:14px;padding:36px;text-align:center;cursor:pointer;transition:all .25s;background:#7c3aff05;position:relative;overflow:hidden}.dropzone:hover{border-color:#7c3aff80;background:#7c3aff0d}.dropzone-icon{width:40px;height:40px;margin:0 auto 12px;border-radius:10px;background:#7c3aff1f;border:1px solid rgba(124,58,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px}.dropzone-label{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}.dropzone-sub{font-family:DM Mono,monospace;font-size:11px;color:var(--text-dim);letter-spacing:.05em}.platform-row{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap;justify-content:center}.platform-label{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-right:4px}.chip{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.08em;color:var(--text-secondary);border:1px solid var(--border-subtle);padding:4px 10px;border-radius:20px;background:#ffffff05;transition:all .2s}.chip:hover{border-color:var(--border-purple);color:var(--purple-bright);background:#7c3aff0f}.results-section{margin-top:60px;animation:heroIn .9s .3s cubic-bezier(.16,1,.3,1) both}.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.results-title{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.track-mismatch-badge{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.1em;color:#f59e0b;border:1px solid rgba(245,158,11,.3);padding:4px 10px;border-radius:20px;background:#f59e0b0f}.track-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:18px;padding:28px;margin-bottom:16px;display:flex;align-items:center;gap:24px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden}.track-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,255,.4),rgba(45,186,126,.3),transparent)}.track-art{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#7c3aff4d,#2dba7e33);border:1px solid var(--border-purple);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}.track-info{flex:1}.track-name{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}.track-artist{font-size:14px;color:var(--text-secondary);margin-bottom:10px}.track-tags{display:flex;gap:8px;flex-wrap:wrap}.tag{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px}.tag-genre{background:#7c3aff26;border:1px solid rgba(124,58,255,.3);color:var(--purple-bright)}.tag-mood{background:#2dba7e1a;border:1px solid rgba(45,186,126,.25);color:var(--green-bright)}.tag-preview{background:#f59e0b14;border:1px solid rgba(245,158,11,.2);color:#f59e0b}.track-bpm{text-align:right;flex-shrink:0}.bpm-value{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--purple-bright),var(--green-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bpm-label{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-top:2px}.key-badge{margin-top:8px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;color:var(--text-secondary);text-align:right}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.metric-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .2s}.metric-card:hover{background:var(--bg-card-hover);border-color:#7c3aff33;transform:translateY(-1px)}.metric-label{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}.metric-value{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}.metric-bar-track{height:3px;background:#ffffff0f;border-radius:2px;overflow:hidden}.metric-bar-fill{height:100%;border-radius:2px}.bar-purple{background:linear-gradient(90deg,#7c3aff,#9d6bff)}.bar-green{background:linear-gradient(90deg,#1a6e4a,#2dba7e)}.bar-mixed{background:linear-gradient(90deg,#7c3aff,#2dba7e)}.structure-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:22px;margin-bottom:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.structure-label{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}.timeline{display:flex;gap:3px;height:36px;border-radius:8px;overflow:hidden}.timeline-seg{display:flex;align-items:center;justify-content:center;font-family:DM Mono,monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-radius:4px;cursor:default}.seg-intro{background:#7c3aff40;color:var(--purple-bright);flex:.8}.seg-verse{background:#6432c833;color:#b48cffe6;flex:1.5}.seg-chorus{background:#7c3aff73;color:#fff;flex:1.2}.seg-verse2{background:#6432c833;color:#b48cffe6;flex:1.4}.seg-buildup{background:#50be8233;color:#64dca0e6;flex:.7}.seg-drop{background:#2dba7e73;color:#fff;flex:1.1}.seg-outro{background:#1e785033;color:#50b478cc;flex:.8}.timeline-legend{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-family:DM Mono,monospace;font-size:10px;color:var(--text-dim)}.legend-dot{width:6px;height:6px;border-radius:2px}.instruments-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:22px;margin-bottom:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.instruments-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.instrument-row{display:flex;align-items:center;gap:10px}.instrument-name{font-size:13px;font-weight:600;color:var(--text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.instrument-pct{font-family:DM Mono,monospace;font-size:11px;color:var(--text-dim);flex-shrink:0}.instrument-bar-track{flex:1.5;height:3px;background:#ffffff0d;border-radius:2px;overflow:hidden}.instrument-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#7c3aff,#9d6bff)}.hit-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:22px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;gap:24px}.hit-score-ring{width:80px;height:80px;flex-shrink:0;position:relative}.hit-score-ring svg{transform:rotate(-90deg)}.hit-score-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.hit-score-num{font-size:22px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--purple-bright),var(--green-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hit-score-label{font-family:DM Mono,monospace;font-size:8px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}.hit-info{flex:1}.hit-title{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}.hit-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.footer-area{margin-top:80px;padding:32px 0 48px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.footer-brand{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.footer-note{font-family:DM Mono,monospace;font-size:11px;color:var(--text-dim)}.analyzing-state{text-align:center;padding:60px 0}.waveform{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:20px;height:40px}.wave-bar{width:3px;background:var(--purple-bright);border-radius:2px;animation:wave 1.2s ease-in-out infinite}.wave-bar:nth-child(1){animation-delay:0s;height:20px}.wave-bar:nth-child(2){animation-delay:.1s;height:35px}.wave-bar:nth-child(3){animation-delay:.2s;height:40px;background:#9b6bff}.wave-bar:nth-child(4){animation-delay:.3s;height:30px;background:#5dba8e}.wave-bar:nth-child(5){animation-delay:.4s;height:20px;background:var(--green-bright)}.wave-bar:nth-child(6){animation-delay:.5s;height:35px}.wave-bar:nth-child(7){animation-delay:.6s;height:22px;background:#9b6bff}@keyframes wave{0%,to{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}.analyzing-text{font-family:DM Mono,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}.analyzing-sub{font-size:12px;color:var(--text-dim);margin-top:6px}@media(max-width:860px){.nav-tabs{gap:1px}.nav-tab{font-size:10px;padding:6px 9px;letter-spacing:.08em}}@media(max-width:600px){nav{padding:20px 16px;flex-wrap:wrap;gap:12px}.nav-tabs{order:3;width:100%;gap:2px}.nav-tag{display:none}.page{padding:0 16px}.url-row{display:block}.url-input{width:100%;border-radius:14px}.btn-analyze{display:block;width:100%;margin-top:10px;border-radius:14px;padding:16px 32px}.track-card{flex-direction:column;align-items:flex-start;gap:16px}.track-bpm{text-align:left;display:flex;flex-direction:row;align-items:baseline;gap:10px}.bpm-value{font-size:32px}.track-name{font-size:18px}.metrics-grid{grid-template-columns:repeat(3,1fr)}.metric-card{padding:14px}.metric-value{font-size:20px}.instruments-grid{grid-template-columns:1fr}.instrument-name{white-space:normal;overflow:visible;text-overflow:unset}.hit-desc{font-size:12px}}