:root{color-scheme:light;--ink: #111418;--muted: #65727d;--paper: #fff8f2;--surface: #ffffff;--surface-pop: #f7fbff;--line: #dde4ea;--deep: #181b2b;--hot: #ff3d81;--orange: #ff7a1a;--lemon: #ffd23f;--cyan: #00b8d9;--green: #2fcb70;--violet: #7c4dff;--shadow: 0 24px 70px rgba(17, 20, 24, .12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:0}*{box-sizing:border-box}html,body,#root{max-width:100%;overflow-x:hidden}body{margin:0;background:linear-gradient(135deg,#ff7a1a1f,#00b8d91a 42%,#2fcb701a),var(--paper);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}.appShell{min-height:100vh;overflow-x:hidden;position:relative}.appShell:before{background:linear-gradient(90deg,var(--hot),var(--orange),var(--lemon),var(--cyan),var(--green),var(--violet));content:"";height:6px;left:0;position:fixed;right:0;top:0;z-index:20}.topbar{align-items:center;display:flex;justify-content:space-between;padding:24px clamp(16px,4vw,56px) 16px}.brand,.account,.sectionTitle,.formFooter,.inlineTitle,.panelHeader,.heroModes,.introStats,.audioChips{align-items:center;display:flex;gap:12px}.brandMark,.panelIcon{align-items:center;border-radius:8px;display:inline-flex;flex:0 0 auto;height:44px;justify-content:center;width:44px}.brandMark{background:var(--deep);box-shadow:inset 0 -4px 0 var(--hot);color:#fff}.brand strong{display:block;font-size:19px;line-height:1.1}.brand span,.account span,.summary,.empty{color:var(--muted);font-size:14px;min-width:0;overflow-wrap:anywhere}.iconButton,.quietButton,.promptRail button,.heroModes span,.introStats span,.links a{align-items:center;border-radius:8px;display:inline-flex;gap:8px;min-height:38px}.iconButton,.quietButton{background:#ffffffb8;border:1px solid var(--line);color:var(--ink);padding:8px 10px}.authBand,.studioBand,.resultsBand,.historyBand{padding:24px clamp(16px,4vw,56px)}.authBand,.studioBand{display:grid;gap:22px;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);min-width:0}.authHero,.studioIntro,.authPanel,.searchForm,.resultsBand,.historyBand{border:1px solid rgba(17,20,24,.08);border-radius:8px;box-shadow:var(--shadow);min-width:0}.authHero,.studioIntro{background:linear-gradient(120deg,#ff3d8147,#ffd23f2e,#00b8d942),var(--deep);color:#fff;display:grid;min-height:620px;overflow:hidden;padding:46px;position:relative}.authHero:after,.studioIntro:after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 28px);content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}.authHero>*,.studioIntro>*{position:relative;z-index:1}.eyebrow{align-items:center;background:#ffffff24;border:1px solid rgba(255,255,255,.2);border-radius:8px;display:inline-flex;font-size:13px;font-weight:850;gap:8px;justify-self:start;min-height:34px;padding:7px 10px;text-transform:uppercase}.authHero h1,.studioIntro h1{align-self:end;font-size:64px;line-height:.98;margin:34px 0 16px;max-width:760px}.authHero p,.studioIntro p{color:#ffffffd1;font-size:18px;line-height:1.55;margin:0;max-width:620px}.heroModes{align-self:end;flex-wrap:wrap;margin-top:22px}.heroModes span,.introStats span{background:#ffffff21;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:800;padding:9px 11px}.authPanel,.searchForm{align-self:stretch;background:#ffffffeb;display:grid;gap:16px;max-width:100%;min-width:0;padding:22px}.authPanel{align-content:center}.panelIcon{background:var(--lemon);color:var(--deep)}.hotIcon{background:var(--hot);color:#fff}.panelHeader .panelIcon{color:var(--deep)}.panelHeader .hotIcon{color:#fff}.panelHeader{flex-wrap:wrap;justify-content:flex-start;min-width:0}.panelHeader>div{min-width:0}.panelHeader span{color:var(--muted);font-size:13px;font-weight:850;text-transform:uppercase}.panelHeader h2{font-size:28px;line-height:1;margin:4px 0 0;overflow-wrap:anywhere}.searchHeader{align-items:flex-start}.modeBadge{background:var(--surface-pop);border:1px solid var(--line);border-radius:8px;color:var(--deep);margin-left:auto;max-width:100%;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap}.panelHeader .modeBadge{color:var(--deep)}.segmented,.strength,.vibeLock{background:#eef3f8;border:1px solid var(--line);border-radius:8px;display:flex;gap:4px;padding:4px}.vibeLock{align-items:center;color:var(--deep);font-size:14px;font-weight:850;gap:8px;min-height:46px;padding:8px 12px}.segmented button,.strength button{background:transparent;border:0;border-radius:6px;color:var(--muted);flex:1;min-height:38px;padding:8px 10px;text-transform:capitalize}.segmented .active,.strength .active{background:var(--surface);box-shadow:0 8px 18px #11141814;color:var(--deep);font-weight:850}label{color:var(--muted);display:grid;gap:7px;font-size:13px;font-weight:850}input,select,textarea{background:#fbfdff;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:44px;padding:11px 12px;width:100%}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(0,184,217,.25);outline-offset:2px}textarea{min-height:162px;resize:vertical}input[type=range]{accent-color:var(--hot)}.audioChoiceGrid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.recordPad,.uploadPad{align-items:flex-start;border:1px solid rgba(17,20,24,.09);border-radius:8px;color:#fff;display:grid;gap:8px;min-height:132px;min-width:0;overflow:hidden;padding:18px;position:relative;text-align:left}.recordPad{background:linear-gradient(135deg,var(--hot),var(--orange))}.uploadPad{background:linear-gradient(135deg,var(--cyan),var(--violet));cursor:pointer}.recordPad:after,.uploadPad:after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 6px,transparent 6px 14px);bottom:0;content:"";height:12px;left:0;position:absolute;right:0}.recordPad strong,.uploadPad strong{font-size:24px;line-height:1;overflow-wrap:anywhere}.recordPad span,.uploadPad span{color:#ffffffd6;font-size:14px;overflow-wrap:anywhere}.recordPad{border:0}.recording{animation:pulseRecord 1s ease-in-out infinite}.uploadPad input{height:1px;opacity:0;overflow:hidden;padding:0;position:absolute;width:1px}.audioStatus{align-items:center;background:#f5f8fb;border:1px dashed #cdd8e2;border-radius:8px;color:var(--muted);display:flex;flex-wrap:wrap;font-size:14px;gap:10px;justify-content:space-between;min-height:48px;padding:10px 12px}.audioStatus.ready{background:#2fcb701c;border-color:#2fcb7073;color:#166238}.audioChips{flex-wrap:wrap;gap:7px}.audioChips span,.attributeRail span,.tags span{border-radius:8px;font-size:13px;font-weight:750;max-width:100%;overflow-wrap:anywhere;padding:6px 9px}.audioChips span{background:#fff;border:1px solid rgba(47,203,112,.28)}.promptRail{display:flex;flex-wrap:wrap;gap:8px}.promptRail button{background:#fff6d4;border:1px solid rgba(255,210,63,.65);color:#6b4b00;font-size:13px;font-weight:850;padding:8px 10px}.controls{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));min-width:0}.primaryButton{align-items:center;background:linear-gradient(135deg,var(--deep),#2a214f);border:0;border-radius:8px;color:#fff;display:inline-flex;font-weight:850;gap:8px;justify-content:center;min-height:46px;padding:10px 16px}.formFooter{justify-content:space-between}.message{background:#ecf8ff;border:1px solid rgba(0,184,217,.24);border-radius:8px;color:#06677a;margin:0;padding:10px 12px}.message.success{background:#2fcb701f;border-color:#2fcb7047;color:#166238}.sectionTitle h1,.sectionTitle h2{margin:0}.sectionTitle h2{font-size:28px}.inlineTitle{flex-wrap:wrap;justify-content:flex-start}.inlineTitle .quietButton{margin-left:auto}.resultsBand,.historyBand{background:#ffffffd1}.attributeRail,.tags,.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-width:100%;min-width:0}.attributeRail span{background:#ecf8ff;border:1px solid rgba(0,184,217,.2);color:#06677a}.resultGrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px}.resultCard{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:254px;overflow:hidden;padding:18px;position:relative}.resultCard:before{content:"";height:7px;left:0;position:absolute;right:0;top:0}.tone0:before{background:linear-gradient(90deg,var(--hot),var(--orange))}.tone1:before{background:linear-gradient(90deg,var(--cyan),var(--violet))}.tone2:before{background:linear-gradient(90deg,var(--green),var(--lemon))}.tone3:before{background:linear-gradient(90deg,var(--orange),var(--violet))}.resultCard h3{font-size:21px;line-height:1.12;margin:42px 0 6px}.resultCard p{color:#3f4b55;line-height:1.5}.artist{color:#5438dc;font-weight:850;margin:0 0 12px}.scoreLine{align-items:center;background:#f6f8fb;border:1px solid var(--line);border-radius:8px;display:flex;gap:8px;justify-content:space-between;min-width:92px;padding:7px 9px;position:absolute;right:14px;top:16px}.scoreLine span{color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase}.scoreLine strong{color:var(--deep);font-size:16px}.tags span{background:#fff3f8;border:1px solid rgba(255,61,129,.18);color:#9f174d}.links a{background:#f0fbf5;border:1px solid rgba(47,203,112,.2);color:#166238;font-size:13px;font-weight:850;padding:8px 10px;text-decoration:none;text-transform:capitalize}.historyList{display:grid;gap:10px;margin-top:14px}.historyItem,.emptyState{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;display:flex;gap:12px;justify-content:space-between;padding:13px 14px}.historyItem strong{line-height:1.35;min-width:0}.historyItem span{background:#f5f8fb;border-radius:8px;color:var(--muted);flex:0 0 auto;font-size:13px;padding:6px 9px;text-transform:capitalize}.emptyState{color:var(--muted);justify-content:flex-start}.introVisual{align-self:end;display:grid;gap:18px;margin-top:28px}.introStats{flex-wrap:wrap}.sonicVisual{align-self:end;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:grid;gap:14px;margin-top:34px;max-width:560px;padding:18px}.sonicVisual.compact{margin-top:0;max-width:430px;padding:14px}.visualDeck{align-items:stretch;display:grid;gap:16px;grid-template-columns:112px 1fr;min-height:176px}.compact .visualDeck{grid-template-columns:86px 1fr;min-height:126px}.visualDisc{align-items:center;background:radial-gradient(circle at center,var(--deep) 0 18%,transparent 19%),conic-gradient(from 30deg,var(--hot),var(--lemon),var(--cyan),var(--violet),var(--hot));border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#fff;display:flex;justify-content:center}.waveBars{align-items:end;background:#ffffff14;border-radius:8px;display:flex;gap:7px;justify-content:center;padding:18px}.waveBars span{animation:barFloat 1.8s ease-in-out infinite;background:linear-gradient(180deg,var(--lemon),var(--hot));border-radius:6px 6px 2px 2px;display:block;flex:1;max-width:18px;min-width:8px}.waveBars .bar0{height:38%}.waveBars .bar1{height:68%}.waveBars .bar2{height:48%}.waveBars .bar3{height:92%}.waveBars .bar4{height:58%}.waveBars .bar5{height:76%}.waveBars .bar6{height:42%}.waveBars .bar7{height:84%}.waveBars .bar8{height:52%}.waveBars .bar9{height:70%}.waveBars .bar10{height:34%}.waveBars .bar11{height:62%}.compact .waveBars .bar0{height:28%}.compact .waveBars .bar1{height:44%}.compact .waveBars .bar2{height:72%}.compact .waveBars .bar3{height:38%}.compact .waveBars .bar4{height:88%}.compact .waveBars .bar5{height:54%}.compact .waveBars .bar6{height:66%}.compact .waveBars .bar7{height:32%}.waveBars span:nth-child(2n){animation-delay:.18s;background:linear-gradient(180deg,var(--cyan),var(--green))}.waveBars span:nth-child(3n){animation-delay:.34s;background:linear-gradient(180deg,var(--orange),var(--violet))}.visualFooter{display:grid;gap:8px;grid-template-columns:1fr 1.6fr .7fr}.visualFooter span{background:#ffffff29;border-radius:8px;height:10px}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulseRecord{50%{transform:translateY(-2px)}}@keyframes barFloat{50%{transform:scaleY(.82)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}@media(max-width:1320px){.authBand,.studioBand{grid-template-columns:1fr}.studioBand .searchForm{order:-1}.authHero,.studioIntro{min-height:460px}.controls{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.audioChoiceGrid{grid-template-columns:1fr}}@media(max-width:760px){.topbar,.formFooter,.searchHeader{align-items:stretch;flex-direction:column}.modeBadge,.inlineTitle .quietButton{margin-left:0}.authHero,.studioIntro,.authPanel,.searchForm,.resultsBand,.historyBand{padding:18px}.authHero h1,.studioIntro h1{font-size:44px}.controls{grid-template-columns:1fr}.visualDeck,.compact .visualDeck{grid-template-columns:74px 1fr;min-height:118px}}@media(max-width:520px){.topbar,.account{align-items:stretch;flex-direction:column}.authBand,.studioBand,.resultsBand,.historyBand{padding:14px}.authHero h1,.studioIntro h1{font-size:34px}.authHero{min-height:300px}.authHero .sonicVisual{display:none}.authHero p,.studioIntro p{font-size:16px}.panelHeader{align-items:flex-start}.panelHeader h2,.sectionTitle h2{font-size:24px}.resultGrid{grid-template-columns:1fr}.historyItem{align-items:flex-start;flex-direction:column}}
