@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}html,body{min-width:320px}#root{min-height:100svh;text-align:initial;border:0}:root{color:#15223d;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;--bg:#f8faff;--surface:#ffffffc2;--surface-strong:#fff;--text:#15223d;--muted:#7888a6;--border:#e6ebf3;--soft:#f2f5fa;--accent:#396cff;--shadow:0 8px 30px #2a416c09;background:#e9edf4;font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:400}*{box-sizing:border-box}body{background:#e9edf4;min-width:360px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline-offset:3px;outline:2px solid #829eff}.app{background:radial-gradient(ellipse at 49% 0%, #e1e9ff33, transparent 46%), var(--bg);width:calc(100% - 48px);max-width:1800px;min-height:calc(100vh - 48px);color:var(--text);border:1px solid #ffffffe6;border-radius:18px;grid-template-rows:80px minmax(0,1fr);grid-template-columns:212px minmax(0,1fr) 340px;margin:24px auto;display:grid;position:relative;overflow:hidden;box-shadow:0 25px 90px #30406414}.sidebar{border-right:1px solid var(--border);background:#f7f9fdc7;flex-direction:column;grid-area:1/1/3;min-width:0;padding:31px 17px 20px;display:flex}.brand{color:#182745;letter-spacing:3px;white-space:nowrap;align-items:center;gap:12px;margin-bottom:39px;padding:0 10px;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;display:flex}.brand small{letter-spacing:1.5px;font-size:9px}.brand-mark{color:#416bff;font-size:28px;font-weight:400;line-height:1}.nav{flex-direction:column;gap:5px;display:flex}.nav-item{color:#273650;text-align:left;background:0 0;border:0;border-radius:12px;align-items:center;gap:13px;height:42px;padding:0 12px;font-size:12px;transition:background .2s,color .2s;display:flex}.nav-icon{text-align:center;width:17px;font-size:20px}.sidebar-promo{background:linear-gradient(145deg,#f8faff,#f0f3fb);border:1px solid #e6ebf4;border-radius:16px;margin-top:auto;padding:16px}.promo-icon{color:#fff;background:linear-gradient(140deg,#a8d4ff,#e4baff 60%,#f8d9f5);border-radius:11px;place-items:center;width:43px;height:43px;margin-bottom:14px;font-size:24px;display:grid;box-shadow:0 5px 18px #b5c9ff66}.sidebar-promo strong{font-size:12px;font-weight:500;line-height:1.7}.round-button{background:0 0;border:1px solid #d7dfec;border-radius:50%;place-items:center;width:31px;height:31px;margin-top:12px;font-size:17px;display:grid}.sidebar-bottom{color:#9aa6bc;letter-spacing:1.5px;margin-top:20px;padding:0 4px;font-size:8px}.topbar{border-bottom:1px solid var(--border);grid-area:1/2/auto/4;justify-content:space-between;align-items:center;gap:20px;padding:0 24px;display:flex}.search{color:#7f90ae;background:#f5f7fb;border:1px solid #e9edf4;border-radius:12px;align-items:center;gap:12px;width:min(485px,62%);height:39px;margin:0 auto;padding:0 14px;display:flex}.search>span{font-size:23px;line-height:1}.search input{width:100%;color:var(--text);background:0 0;border:0;outline:0;font-size:12px}.search input::placeholder{color:#8c99b1}.top-actions{align-items:center;gap:18px;display:flex}.icon-button{background:0 0;border:0;font-size:20px}.theme-toggle{font-size:21px}.avatar{color:#fff;background:linear-gradient(135deg,#283a59,#b4bdcd);border:2px solid #fff;border-radius:50%;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.main-content{border-right:1px solid var(--border);grid-area:2/2;min-width:0;padding:18px 30px 25px}.track-heading{margin-bottom:20px}.back-link{color:#6685c6;margin-bottom:16px;font-size:11px}.track-info{align-items:center;gap:24px;min-width:0;display:flex;position:relative}.cover-art{background:radial-gradient(#fff 0%,#c9d9ff 20%,#0000 48%),linear-gradient(135deg,#d5f2ff,#9bafff 48%,#eac5ff 78%,#c8f7ff);border-radius:16px;flex:0 0 116px;place-items:center;width:116px;height:116px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #fff8}.cover-orb{color:#fff;text-shadow:0 0 14px #fff;background:linear-gradient(140deg,#b6e7ffbb,#a18dffbb,#ffd7ffbb);border:2px solid #fffa;border-radius:26px;place-items:center;width:76px;height:76px;font-size:64px;display:grid;transform:rotate(-15deg);box-shadow:0 0 30px #fffb,inset 0 0 22px #fff}.cover-shine{pointer-events:none;background:linear-gradient(115deg,#0000 25%,#fff5 48%,#0000 64%);position:absolute;inset:0}.track-details{min-width:0;padding-right:4px}.track-details h1{letter-spacing:-.9px;overflow-wrap:anywhere;margin:0 0 10px;font-family:Manrope,sans-serif;font-size:clamp(24px,2.1vw,34px);font-weight:500;line-height:1.2}.artist{color:#344968;margin:0 0 19px;font-size:14px}.track-meta{color:var(--muted);flex-wrap:wrap;gap:12px 17px;font-size:11px;display:flex}.save-button{border:1px solid var(--border);background:var(--surface);white-space:nowrap;border-radius:22px;padding:10px 13px;font-size:11px;position:absolute;top:-17px;right:0}.save-button.saved{color:#396cff;background:#edf2ff}.player{background:linear-gradient(105deg,#f0f5ff,#fbf9ff 70%,#faf7ff);border:1px solid #dfe7ff;border-radius:21px;align-items:center;gap:17px;height:82px;padding:12px 17px;display:flex}.play-button{text-align:center;color:#fff;cursor:pointer;background:linear-gradient(145deg,#384a63,#17253d);border:0;border-radius:50%;flex:0 0 40px;place-items:center;width:40px;height:40px;padding:0;font-size:17px;line-height:1;display:grid;box-shadow:0 4px 10px #18294624}.play-button:disabled{opacity:.5;cursor:not-allowed}.waveform{flex:1;width:0;height:54px;overflow:visible}.duration{color:#687a9b;font-size:11px}.upload-strip{color:#7788a6;cursor:pointer;border:1px dashed #d9e1f2;border-radius:10px;align-items:center;gap:10px;min-width:0;margin:12px 0 6px;padding:9px 12px;font-size:10px;display:flex}.upload-strip>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.upload-strip>span:first-child{color:#5680ff;font-size:16px}.upload-strip strong{color:#436fff;white-space:nowrap;font-weight:600}.tabs{border-bottom:1px solid var(--border);align-items:center;gap:clamp(12px,2.4vw,34px);height:51px;margin-bottom:16px;display:flex;overflow-x:auto}.tabs button{color:#7283a3;background:0 0;border:0;flex-shrink:0;align-self:stretch;padding:0 4px;font-size:11px;position:relative}.tabs button.active:after{content:"";background:linear-gradient(90deg,#3975ff,#b98cff);border-radius:4px;height:3px;position:absolute;bottom:-1px;left:0;right:0}.panel{background:var(--surface);min-width:0;box-shadow:var(--shadow);border:1px solid #edf0f6;border-radius:19px}.dna-panel{padding:19px 20px 16px}.section-title{align-items:flex-start;gap:12px;min-width:0;display:flex}.section-symbol{color:#5984ff;flex:0 0 22px;place-items:center;width:22px;height:23px;font-size:21px;display:grid}.section-title h2{letter-spacing:-.25px;margin:0 0 5px;font-family:Manrope,sans-serif;font-size:14px;font-weight:600}.section-title p{color:var(--muted);margin:0;font-size:10px}.dna-content{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(70px,.85fr) minmax(100px,1fr);align-items:center;gap:10px;margin-top:17px;display:grid}.metric{background:linear-gradient(150deg,#fffa,#f5f7fc99);border:1px solid #e8edf5;border-radius:12px;flex-direction:column;justify-content:flex-start;gap:7px;min-width:0;min-height:111px;padding:13px 11px;display:flex}.metric small{color:#7486a7;font-size:10px}.metric strong{overflow-wrap:anywhere;font-size:11px;font-weight:500}.metric>span{color:#647695;font-size:10px}.metric em{color:#7b59f7;white-space:nowrap;background:#f0eaff;border-radius:10px;align-self:flex-start;margin-top:auto;padding:5px 8px;font-size:9px;font-style:normal}.energy-metric svg{width:100%;margin-top:auto}.radar{place-items:center;min-width:0;display:grid}.radar-ring{aspect-ratio:1;background:repeating-radial-gradient(circle,#e8e1ff 0 1px,#0000 1px 11px),radial-gradient(circle,#fff,#f4e8ff);border:1px solid #dcd4ff;border-radius:50%;place-items:center;width:clamp(65px,6.8vw,98px);display:grid;box-shadow:0 0 0 7px #f7f3ff,0 0 0 8px #e9dcff}.radar-core{background:conic-gradient(from 30deg,#7cddff,#7c8dff,#db82ff,#f2a8ed,#91d8ff);border-radius:50%;width:58%;height:58%;box-shadow:inset 0 0 14px #ffffffa0,0 0 15px #b2a1ff88}.traits{flex-direction:column;gap:13px;padding-left:4px;display:flex}.traits div{justify-content:space-between;align-items:center;gap:5px;display:flex}.traits span{color:#7182a0;font-size:9px}.traits strong{white-space:nowrap;font-size:10px;font-weight:500}.structure-panel{border-top:0;border-radius:0 0 18px 18px;margin-top:0;padding:17px 20px 18px}.structure-bar{background:var(--soft);border-radius:7px;height:17px;margin:18px 0 10px;display:flex;overflow:hidden}.structure-bar>div{height:100%;transition:opacity .2s}.structure-bar>div:hover{opacity:.7}.time-labels,.chart-times{color:#7b8bab;justify-content:space-between;font-size:9px;display:flex}.legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:20px;display:grid}.legend>div{align-items:flex-start;gap:8px;min-width:0;display:flex}.legend-dot{border-radius:50%;flex:0 0 9px;width:9px;height:9px;margin-top:2px}.legend strong{font-size:10px;font-weight:500;display:block}.legend small{color:#7485a5;margin-top:5px;font-size:9px;display:block}.chart-panel{border-top:0;border-radius:0 0 18px 18px;padding:17px 20px 18px}.chart-wrap{align-items:stretch;gap:10px;margin-top:12px;display:flex}.chart-labels{color:#7182a1;flex-direction:column;justify-content:space-between;padding:5px 0 14px;font-size:9px;display:flex}.energy-chart{flex:1;width:0;height:91px;overflow:visible}.chart-grid{stroke:#e8edf5;stroke-width:.8px;stroke-dasharray:2 3}.chart-times{margin-left:29px}.alternate-panel{min-height:300px;padding:23px}.alternate-panel>p{color:var(--muted);margin-top:22px;line-height:1.8}footer{color:#91a0b9;letter-spacing:.4px;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:22px;font-size:9px;display:flex}footer span{font-weight:400}.rightbar{background:#fafbff7a;grid-area:2/3;min-width:0;padding:24px 15px 22px}.stems-section{border-bottom:1px solid var(--border);padding:0 2px 18px}.stem-row{grid-template-columns:33px minmax(38px,.8fr) minmax(35px,1fr) 34px;align-items:center;gap:7px;margin-top:9px;display:grid}.stem-icon{cursor:pointer;border:0;border-radius:50%;place-items:center;width:32px;height:32px;padding:0;font-size:15px;display:grid;position:relative}.stem-icon:disabled{opacity:.35;cursor:not-allowed}.stem-glyph{line-height:1}.stem-muted .stem-glyph{opacity:.45}.stem-slash{background:currentColor;border-radius:2px;width:24px;height:2px;position:absolute;transform:rotate(-45deg)}.stem-unavailable .stem-name{opacity:.45}.stem-level{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:10px}.stem-name{text-overflow:ellipsis;font-size:11px;overflow:hidden}.mini-play{color:#273852;background:#edf1f7;border:0;border-radius:50%;place-items:center;width:27px;height:27px;font-size:10px;display:grid}.stem-row input[type=range]{accent-color:#7990de;cursor:pointer;width:100%;min-width:0;height:3px}.dots{letter-spacing:1px;background:0 0;border:0;padding:0;font-size:16px}.similar-panel{margin-top:19px;padding:17px 13px 12px}.similar-heading{justify-content:space-between;align-items:flex-start;gap:4px;display:flex}.similar-heading .section-title{gap:7px}.similar-heading .section-symbol{flex-basis:18px;width:18px}.similar-heading .section-title h2{font-size:13px}.similar-heading .section-title p{line-height:1.6}.similar-heading>button{color:#416cff;white-space:nowrap;background:0 0;border:0;padding:4px 0;font-size:9px}.similar-track{align-items:center;gap:11px;min-width:0;margin-top:12px;display:flex}.mini-cover{color:#fff;border-radius:8px;flex:0 0 42px;place-items:center;width:42px;height:42px;font-size:21px;display:grid;overflow:hidden;box-shadow:inset 0 0 10px #fff3}.sunset{background:linear-gradient(150deg,#e8b6ff,#896aff 45%,#ffbd85)}.ocean{background:linear-gradient(150deg,#8ac8df,#377e9b 50%,#ffd3a2)}.night{background:linear-gradient(150deg,#1e6e88,#172d55 60%,#74b4c3)}.amber{background:linear-gradient(150deg,#ffb557,#e86f37 50%,#ffe1a2)}.violet{background:linear-gradient(150deg,#a6baff,#6c63a5 50%,#f0bbd5)}.similar-info{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.similar-info strong{text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500;overflow:hidden}.similar-info small{color:#7a8ba8;font-size:9px}.score{white-space:nowrap;font-size:10px}.learn-card{text-align:left;background:linear-gradient(110deg,#f0f0ff,#e9edff);border:1px solid #e5e4ff;border-radius:13px;align-items:center;gap:10px;width:100%;margin-top:14px;padding:15px 12px;display:flex}.learn-spark{color:#7a7bff;font-size:26px}.learn-card>span:nth-child(2){flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.learn-card strong{font-size:10px;font-weight:500}.learn-card small{color:#7987a5;font-size:9px;line-height:1.5}.learn-arrow{background:#dfe5ff;border-radius:50%;place-items:center;width:27px;height:27px;font-size:16px;display:grid}.app.dark{--bg:#101522;--surface:#181f31e6;--surface-strong:#1b2335;--text:#edf1ff;--muted:#8f9fbe;--border:#293249;--soft:#252e43;--accent:#7895ff;--shadow:0 8px 28px #0000001f;color:var(--text);background:radial-gradient(at 47% 0,#20274755,#0000 48%),#101522;border-color:#293249}.dark .sidebar,.dark .rightbar{background:#111725e0}.dark .brand,.dark .nav-item,.dark .artist{color:#e1e8ff}.dark .sidebar-promo{background:linear-gradient(145deg,#202a40,#171f32);border-color:#29334b}.dark .search input{color:#edf1ff}.dark .topbar,.dark .main-content,.dark .stems-section{border-color:var(--border)}.dark .panel{background:var(--surface);border-color:#293249}.dark .metric strong,.dark .legend strong,.dark .similar-info strong,.dark .traits strong{color:#edf1ff}.dark .upload-strip{border-color:#38435f}.dark .save-button{color:#e0e7ff;background:#20283b;border-color:#34405a}.dark .mini-play{color:#e0e7ff;background:#2a3348}.dark .learn-arrow{background:#373e66}.dark .chart-grid{stroke:#30384d}.dark .structure-panel,.dark .chart-panel{border-color:var(--border)}.dark .search input::placeholder{color:#7f8eaa}.dark .time-labels,.dark .chart-times,.dark .legend small,.dark .traits span,.dark .metric small,.dark .metric>span{color:#94a3c0}.dark .cover-art{box-shadow:inset 0 0 0 1px #ffffff25}.dark .tabs button{color:#98a6c2}.dark .tabs button.active{color:#91aaff}@media (width>=1600px){.app{grid-template-columns:230px minmax(0,1fr) 365px}.main-content{padding-left:36px;padding-right:36px}.dna-content{gap:12px}.metric{padding:15px}.rightbar{padding-left:19px;padding-right:19px}}@media (width<=1250px){.app{grid-template-columns:180px minmax(0,1fr) 285px;width:calc(100% - 28px);min-height:calc(100vh - 28px);margin:14px auto}.sidebar{padding-left:12px;padding-right:12px}.main-content{padding-left:19px;padding-right:19px}.rightbar{padding-left:11px;padding-right:11px}.dna-content{grid-template-columns:repeat(5,minmax(0,1fr))}.radar{display:none}.traits{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:8px;display:grid}.save-button{align-self:flex-start;margin-left:auto;position:static}.track-info{flex-wrap:wrap}}@media (width<=900px){.app{border-radius:14px;grid-template-rows:66px minmax(0,1fr);grid-template-columns:72px minmax(0,1fr);width:calc(100% - 16px);margin:8px auto}.sidebar{grid-column:1;align-items:center;padding:22px 9px 12px}.brand{justify-content:center;margin-bottom:28px;padding:0}.brand>span:last-child,.nav-item:not(.selected){font-size:0}.brand small{display:none}.brand-mark{font-size:25px}.nav{align-items:center;width:100%}.nav-item{justify-content:center;width:46px;height:46px;padding:0;font-size:0}.nav-icon{font-size:20px}.sidebar-promo,.sidebar-bottom{display:none}.topbar{grid-column:2;padding:0 12px}.top-actions{gap:8px}.main-content{border-right:0;grid-area:2/2;padding:16px}.rightbar{border-top:1px solid var(--border);grid-area:3/2;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:15px;padding:15px;display:grid}.stems-section{border-bottom:0}.similar-panel{margin-top:0}.learn-card{grid-column:1/-1;margin-top:0}.app{grid-template-rows:66px auto auto}.track-info{gap:15px}.cover-art{flex-basis:86px;width:86px;height:86px}.cover-orb{width:57px;height:57px;font-size:45px}.track-details h1{font-size:25px}.track-meta{gap:9px}}@media (width<=560px){body{min-width:360px}.app{border:0;border-radius:0;width:100%;margin:0}.sidebar{padding:18px 5px}.topbar{gap:7px}.search{flex:1;width:auto;margin:0;padding:0 8px}.search input{font-size:10px}.top-actions{gap:5px}.avatar{width:24px;height:24px}.main-content{padding:13px 10px}.track-info{gap:12px}.cover-art{flex-basis:74px;width:74px;height:74px}.cover-orb{width:48px;height:48px;font-size:36px}.track-details{flex:1}.track-details h1{font-size:22px}.artist{margin-bottom:10px;font-size:12px}.track-meta{gap:7px;font-size:9px}.save-button{margin-left:0;padding:8px 10px;position:static}.player{border-radius:14px;gap:9px;height:65px;padding:9px}.play-button{flex-basis:34px;width:34px;height:34px}.waveform{height:43px}.tabs{gap:17px}.dna-panel,.structure-panel,.chart-panel{padding:14px 11px}.dna-content{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:91px}.traits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.legend{grid-template-columns:repeat(2,minmax(0,1fr))}.rightbar{grid-template-columns:minmax(0,1fr);padding:12px}.stems-section{padding-bottom:12px}.similar-panel{padding:15px}footer{line-height:1.6}}html{min-width:360px;overflow-x:clip}body{overflow-x:clip}#root{width:100%;min-height:100vh}.app{grid-template-columns:200px minmax(0,1fr) 310px;width:calc(100% - 64px);max-width:1800px;min-height:calc(100vh - 48px);margin:24px auto;overflow:clip}.main-content,.rightbar,.sidebar{min-width:0}.main-content{overflow:visible}.tabs{scrollbar-width:none;min-width:0;max-width:100%;overflow:auto hidden}.tabs::-webkit-scrollbar{display:none}.dna-content{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(75px,.85fr) minmax(105px,1fr);gap:8px}.metric{min-width:0;overflow:hidden}.metric strong{overflow-wrap:anywhere}.traits{min-width:0}.save-button{z-index:1}.player,.structure-bar,.energy-chart{max-width:100%}@media (width>=1500px){.app{grid-template-columns:220px minmax(0,1fr) 340px;width:calc(100% - 80px)}.main-content{padding-left:28px;padding-right:28px}.dna-content{gap:10px}}@media (width<=1350px){.app{grid-template-columns:180px minmax(0,1fr) 285px;width:calc(100% - 48px)}.main-content{padding-left:18px;padding-right:18px}.dna-content{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.metric{min-height:100px}.radar{display:none}.traits{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:10px 2px 2px;display:grid}.save-button{align-self:flex-start;margin-left:auto;position:static}.track-info{flex-wrap:wrap}}@media (width<=1000px){.app{grid-template-rows:66px auto auto;grid-template-columns:68px minmax(0,1fr);width:calc(100% - 28px);margin:14px auto}.sidebar{grid-area:1/1/4;align-items:center;padding:22px 8px}.brand{justify-content:center;padding:0}.brand>span:last-child{display:none}.nav-item{justify-content:center;padding:0;font-size:0}.nav-icon{font-size:20px}.sidebar-promo,.sidebar-bottom{display:none}.topbar{grid-area:1/2;padding:0 14px}.main-content{border-right:0;grid-area:2/2;padding:18px}.rightbar{border-top:1px solid var(--border);grid-area:3/2;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;display:grid}.stems-section{border-bottom:0}.similar-panel{margin-top:0}.learn-card{grid-column:1/-1}}@media (width<=600px){.app{border:0;border-radius:0;width:100%;margin:0}.main-content{padding:14px 10px}.rightbar{grid-template-columns:minmax(0,1fr);padding:12px}.dna-content,.traits{grid-template-columns:repeat(2,minmax(0,1fr))}.track-info{gap:12px}.cover-art{flex-basis:76px;width:76px;height:76px}.track-details h1{font-size:23px}.tabs{gap:18px}.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}:root{--bg:#f5f7fb;--surface:#fff;--surface-strong:#fff;--text:#202b43;--muted:#8794ac;--border:#e7ebf3;--soft:#f1f4f9;--accent:#5278f6;--sonance-blue:#5278f6;--sonance-violet:#a78bfa;--sonance-pink:#e5a0df;--sonance-cyan:#91d9f7;--sonance-mint:#83d8ce}.app{background:var(--bg);border:1px solid #e8ecf4;border-radius:18px;grid-template-columns:205px minmax(0,1fr) 320px;width:calc(100% - 48px);max-width:1920px;margin:24px auto;font-family:Inter,sans-serif;box-shadow:0 20px 70px #2b3b5f12}.app h1,.app h2,.app .brand{font-family:Manrope,sans-serif}.brand{letter-spacing:3px;gap:10px;font-size:12px;font-weight:700}.brand-mark{width:25px;height:25px;font-size:0;position:relative}.brand-mark:before{content:"";clip-path:polygon(0 38%,16% 38%,27% 0,43% 100%,56% 23%,68% 68%,79% 38%,100% 38%,100% 53%,86% 53%,67% 91%,55% 51%,42% 100%,27% 30%,21% 53%,0 53%);background:linear-gradient(135deg,#5278f6,#a78bfa 65%,#e5a0df);position:absolute;inset:3px 0}.brand small{color:#8b9cc0;letter-spacing:1.5px;font-size:9px}.nav-item{border-radius:10px;transition:background .18s,color .18s}.nav-item:hover,.nav-item.selected{color:#456cf0;background:#eaf0ff}.topbar,.sidebar,.rightbar{border-color:var(--border)}.search{background:#f0f3f9;border-color:#e9edf5;border-radius:10px}.track-details h1{letter-spacing:-1.2px;font-family:Manrope,sans-serif;font-weight:500}.cover-art{background:radial-gradient(at 50% 48%,#fff 0%,#dce8ff 22%,#0000 52%),linear-gradient(135deg,#d9f3ff,#b8c7ff 48%,#eacdfb 78%,#d5f6fa)}.cover-orb{background:linear-gradient(140deg,#bdeaffcc,#a99bffcc,#f5d8f5cc);border-radius:28px}.panel{border-color:#e8ecf4;box-shadow:0 5px 24px #32446e06}.metric{background:linear-gradient(145deg,#fff,#f8fafe);border-color:#e9edf5}.metric em{color:#8061d9;background:#f0eaff}.metric em.blue-tag{color:#4b78dc;background:#eaf1ff}.radar-ring{background:repeating-radial-gradient(circle,#e9e3fc 0 1px,#0000 1px 11px),#f8f5ff;border-color:#e2daff}.radar-core{background:conic-gradient(from 30deg,#91d9f7,#829bff,#c7a0ff,#e5a0df,#91d9f7)}.player{background:linear-gradient(105deg,#eff4ff,#fbf9ff 70%,#fcf8ff);border-color:#e4e8fa}.play-button{background:linear-gradient(145deg,#344563,#202c45)}.tabs button.active{color:#5278f6}.tabs button.active:after{background:linear-gradient(90deg,#5278f6,#a78bfa,#e5a0df)}.section-symbol{color:#718cf7}.structure-bar{border-radius:5px}.legend-dot{box-shadow:0 0 0 3px #7891dc12}.stem-icon.pink{color:#c66fb4;background:#f9eaf6}.stem-icon.orange{color:#cb9853;background:#fbf1e4}.stem-icon.green{color:#48a99a;background:#e6f6f2}.stem-icon.blue{color:#538dd6;background:#eaf3fc}.stem-icon.purple{color:#8b70d8;background:#f0ebfc}.stem-icon.gray{color:#8190a8;background:#edf1f7}.learn-card{background:linear-gradient(110deg,#f3f2ff,#edf1ff);border-color:#e5e4fa}.app.dark{--bg:#111522;--surface:#191f30;--surface-strong:#1c2437;--text:#e9eefc;--muted:#929fba;--border:#293147;--soft:#232b3f;--accent:#8da6ff;--sonance-blue:#8da6ff;--sonance-violet:#c1a5ff;--sonance-pink:#f0b0e8;--sonance-cyan:#8bdfff;--sonance-mint:#83e3d6;background:#111522;border-color:#293147}.dark .nav-item:hover,.dark .nav-item.selected{color:#a7b8ff;background:#252e45}.dark .search{background:#1a2132;border-color:#293147}.dark .metric{background:linear-gradient(145deg,#20283b,#191f30);border-color:#2c354b}.dark .player{background:linear-gradient(105deg,#1d2940,#27223d);border-color:#333955}.dark .learn-card{background:linear-gradient(110deg,#252742,#242d4b);border-color:#343752}.dark .radar-ring{background:repeating-radial-gradient(circle,#353152 0 1px,#0000 1px 11px),#211e35;border-color:#514177}.dark .brand-mark:before{background:linear-gradient(135deg,#8da6ff,#c1a5ff 65%,#f0b0e8)}@media (width>=1500px){.app{grid-template-columns:225px minmax(0,1fr) 340px;width:calc(100% - 64px)}}@media (width<=1350px){.app{grid-template-columns:180px minmax(0,1fr) 290px}.dna-content{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.radar{display:none}.traits{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}}@media (width<=1000px){.app{grid-template-columns:68px minmax(0,1fr);width:calc(100% - 24px)}}@media (width<=600px){.app{border-radius:0;width:100%;margin:0}.dna-content,.traits{grid-template-columns:repeat(2,minmax(0,1fr))}}.tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;display:grid}.tabs button{text-align:center;white-space:nowrap;width:100%;min-width:0;padding:0 6px;font-size:12px}@media (width<=900px){.tabs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}}@media (width<=480px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}.tabs,.tabs button{position:relative}.tabs button.active:after{transition:left .35s cubic-bezier(.22,1,.36,1),right .35s cubic-bezier(.22,1,.36,1),background .25s}.tabs{position:relative}.tabs button.active:after{display:none}.tabs .tabs-indicator{pointer-events:none;z-index:2;background:linear-gradient(90deg,#3975ff,#b98cff);border-radius:4px;height:3px;transition:transform .38s cubic-bezier(.22,1,.36,1);position:absolute;bottom:-1px;left:0}.topbar{justify-content:space-between}.topbar .back-link{margin-bottom:0}.top-actions{margin-left:auto}.track-heading{text-align:left;width:100%;margin-left:0;margin-right:auto}.back-link{text-align:left;justify-content:flex-start;display:flex}.track-info{text-align:left;justify-content:flex-start;margin-left:0}.app:not(.dark) .main-content{background:#fff}.app:not(.dark) .sidebar{background:#f1f4fa}.app:not(.dark) .rightbar{background:#f8f9fc;background:#fff!important}.landing-page{color:#171827;background:radial-gradient(at 50% 34%,#6f66ff1a,#0000 42%),#fff;grid-column:2/-1;min-width:0;min-height:100vh;padding:34px 6% 64px;overflow:hidden}.landing-logo{letter-spacing:1.8px;justify-content:center;align-items:center;gap:10px;font-size:20px;font-weight:800;display:flex}.landing-logo small{color:#8a7cff;letter-spacing:1px;font-size:11px}.landing-logo .brand-mark{color:#7564ff;font-size:30px}.landing-hero{text-align:center;max-width:820px;margin:100px auto 86px}.landing-eyebrow{color:#7869e8;letter-spacing:3px;margin-bottom:22px;font-size:11px;font-weight:800}.landing-hero h1{letter-spacing:-3.5px;margin:0;font-size:clamp(44px,6vw,76px);font-weight:750;line-height:1.06}.landing-description{color:#77798b;max-width:550px;margin:25px auto 30px;font-size:16px;line-height:1.8}.landing-cta{color:#fff;font:inherit;cursor:pointer;background:linear-gradient(110deg,#6557f5,#a16af5);border:0;border-radius:13px;align-items:center;gap:22px;padding:15px 23px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 10px 28px #715bf13d}.landing-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px #715bf152}.landing-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1060px;margin:0 auto;display:grid}.landing-feature{background:#ffffffd1;border:1px solid #ececf5;border-radius:20px;min-height:175px;padding:26px 24px;transition:transform .2s,border-color .2s;box-shadow:0 12px 40px #23204e09}.landing-feature:hover{border-color:#d8d0ff;transform:translateY(-4px)}.landing-feature>span{color:#7662f4;background:#f0edff;border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;font-size:20px;display:inline-flex}.landing-feature h2{margin:20px 0 9px;font-size:17px}.landing-feature p{color:#77798b;margin:0;font-size:13px;line-height:1.7}.app.dark .landing-page{color:#f6f5ff;background:radial-gradient(at 50% 34%,#6f66ff2e,#0000 42%),#10111a}.app.dark .landing-feature{background:#191a28d9;border-color:#2a2b40}.app.dark .landing-feature p,.app.dark .landing-description{color:#aaaabd}.app.dark .landing-feature>span{color:#b4a5ff;background:#292444}@media (width<=760px){.landing-page{padding:28px 22px 48px}.landing-hero{margin:76px auto 56px}.landing-hero h1{letter-spacing:-1.8px}.landing-features{grid-template-columns:1fr}}.landing-logo{z-index:10;position:absolute;top:18px;left:calc(50% + 110px);transform:translate(-50%)}.landing-page{padding-top:34px;position:relative}.landing-hero{margin-top:100px}.landing-logo{position:static;transform:none}.landing-page{padding-top:34px}.analysis-status,.analysis-error,.analysis-note{margin:12px 0;font-size:12px}.analysis-status{color:#777}.analysis-error{color:#e5484d}.genre-results{border:1px solid var(--border-color,#e7e7eb);border-radius:20px;margin:24px 0;padding:24px}.genre-results h3{margin:0 0 22px;font-size:16px;font-weight:600}.genre-result{margin-bottom:17px}.genre-result-label{text-transform:capitalize;justify-content:space-between;gap:16px;margin-bottom:8px;font-size:13px;display:flex}.genre-result-bar{background:#e9e7f0;border-radius:999px;height:6px;overflow:hidden}.genre-result-fill{border-radius:inherit;background:linear-gradient(90deg,#7965ff,#c05bff);height:100%;transition:width .4s}.analysis-note{color:#85838f;margin-top:18px;line-height:1.5}.track-cover-image{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}.player svg:focus,.player svg:focus-visible,.player svg :focus,.player svg :focus-visible{outline:none!important}@media (width>=1351px){.dna-content{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(190px,1.5fr);align-items:stretch;gap:12px}.metric{height:100%;min-height:112px}.radar{min-width:0;overflow:hidden}.radar-ring{aspect-ratio:1;width:min(100%,110px)}.traits{gap:16px;min-width:0;padding-left:8px}.traits div{gap:8px;min-width:0}.traits span{overflow-wrap:normal;min-width:0}}.sonance-mark{flex:0 0 25px;justify-content:center;align-items:center;gap:3px;width:25px;height:25px;display:inline-flex}.sonance-mark i{transform-origin:50%;background:linear-gradient(#5278f6,#a78bfa 65%,#e5a0df);border-radius:99px;width:4px;height:8px;display:block}.sonance-mark i:nth-child(2){height:22px}.sonance-mark-animated i{animation:.85s ease-in-out infinite alternate sonance-wave}.sonance-mark-animated i:nth-child(2){animation-delay:.15s}.sonance-mark-animated i:nth-child(3){animation-delay:.3s}@keyframes sonance-wave{0%{opacity:.72;transform:scaleY(.55)}to{opacity:1;transform:scaleY(1.25)}}.sonance-loading-overlay{z-index:999;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffd1;flex-direction:column;justify-content:center;align-items:center;gap:17px;display:flex;position:absolute;inset:0}.dark .sonance-loading-overlay{background:#0d1220d1}.sonance-loading-brand{align-items:center;gap:12px;display:flex}.sonance-loading-brand .sonance-mark{flex-basis:30px;gap:4px;width:30px;height:30px}.sonance-loading-brand .sonance-mark i{width:5px}.sonance-loading-brand .sonance-mark i:nth-child(2){height:25px}.sonance-loading-wordmark{color:#182745;letter-spacing:3px;align-items:baseline;gap:5px;font-family:Manrope,sans-serif;font-size:19px;font-weight:800;display:flex}.dark .sonance-loading-wordmark{color:#f3f5ff}.sonance-loading-wordmark small{color:#8a7cff;letter-spacing:1px;font-size:10px}.sonance-loading-label{color:#8994ad;letter-spacing:4px;font-size:10px;font-weight:700}@media (prefers-reduced-motion:reduce){.sonance-mark-animated i{animation:none}}.app{--sonance-sidebar-width:205px}@media (width>=1500px){.app{--sonance-sidebar-width:225px}}@media (width<=1350px){.app{--sonance-sidebar-width:180px}}@media (width<=1000px){.app{--sonance-sidebar-width:68px}}.sonance-loading-overlay{inset:0 0 0 var(--sonance-sidebar-width)}.nav-item:disabled{opacity:.42;cursor:not-allowed}.playback-progress{cursor:pointer;touch-action:none;background:#8791aa33;border-radius:999px;flex:1;min-width:80px;height:8px;position:relative;overflow:hidden}.playback-progress-fill{border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#8a7cff,#b18cff);height:100%;display:block}.empty-analysis-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:300px;padding:40px 24px;display:flex}.empty-analysis-state h2,.development-panel h2{margin:4px 0}.empty-analysis-state p,.development-panel p,.development-message p,.analysis-note{max-width:620px;color:var(--muted,#8994ad);line-height:1.65}.empty-analysis-mark{margin-bottom:4px}.development-panel{margin-top:18px;padding:24px}.development-tag{color:#8a7cff;letter-spacing:1.4px;border:1px solid #8a7cff47;border-radius:999px;align-items:center;width:fit-content;padding:5px 9px;font-size:9px;font-weight:800;display:inline-flex}.development-message{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 0 4px;display:flex}.analysis-note{margin:12px 0 0;font-size:11px}.back-link{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:0}.save-button:disabled{opacity:.58;cursor:not-allowed}.dark .playback-progress{background:#d2d7eb29}.dark .empty-analysis-state p,.dark .development-panel p,.dark .development-message p,.dark .analysis-note{color:#a0a9bf}@media (width>=1001px){.app{grid-template-rows:80px minmax(0,1fr)}.main-content,.rightbar{align-self:stretch}}.play-button{color:#fff;background:linear-gradient(145deg,#7187ff,#7655d9)!important}.play-icon{border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid #fff;width:0;height:0;display:block;transform:translate(1.5px)}.play-icon.is-playing{background:linear-gradient(90deg,#fff 0 4px,#0000 4px 8px,#fff 8px 12px);border:0;width:12px;height:14px;transform:none}.metric{text-align:left;border-radius:14px;align-items:flex-start;gap:8px;padding:15px 13px}.metric small{color:#7486a7;letter-spacing:0;font-size:10px;font-weight:400;line-height:1.35}.metric strong{color:#202e4b;letter-spacing:0;overflow-wrap:anywhere;font-size:11px;font-weight:500;line-height:1.25}.metric>span{color:#647695;font-size:10px;line-height:1.45}.metric em{white-space:normal;overflow-wrap:anywhere;border-radius:7px;align-self:flex-start;max-width:100%;margin-top:auto;padding:5px 8px;font-size:9px;font-weight:400;line-height:1.35}.metric em.blue-tag{color:#6571c9;background:#edf1ff;border:1px solid #e1e6ff}.traits{border-left:1px solid #e9edf5;justify-content:flex-start;gap:9px;padding-left:14px}.traits div{gap:8px}.traits span{color:#8491a9;font-size:9px;line-height:1.35}.traits strong{color:#354463;font-size:10px;font-weight:500}.back-link{color:#53678f;background:#fff;border:1px solid #e5eaf4;border-radius:10px;align-items:center;gap:9px;min-height:34px;margin-bottom:16px;padding:0 12px;font-size:10px;font-weight:600;transition:background .18s,border-color .18s,color .18s,transform .18s;display:inline-flex}.back-link span{margin-left:0}.back-link:hover{color:#5b63c9;background:#f5f6ff;border-color:#d8defe;transform:translate(-2px)}.back-chevron{border-bottom:1.6px solid;border-left:1.6px solid;flex:0 0 7px;width:7px;height:7px;display:block;transform:rotate(45deg)}.development-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:11px;min-height:164px;padding:28px 24px;display:flex}.development-panel .development-tag{align-self:center}.development-panel h2{color:var(--text);letter-spacing:-.35px;text-align:center;margin:0;font-size:17px;font-weight:700;line-height:1.3}.development-panel p{text-align:center;width:100%;max-width:560px;margin:0 auto;font-size:11px;line-height:1.65}.dark .metric strong,.dark .traits strong{color:#edf1ff}.dark .metric small,.dark .metric>span,.dark .traits span{color:#9ba9c5}.dark .traits{border-left-color:#303a52}.dark .metric em.blue-tag{color:#a9b5ff;background:#293452;border-color:#394467}.dark .back-link{color:#b8c5e4;background:#20283b;border-color:#303a52}.dark .back-link:hover{color:#c6c9ff;background:#292d49;border-color:#50558a}@media (width<=560px){.traits{border-left:0;padding-left:0}.metric{padding:12px 10px}.metric strong{font-size:14px}.development-panel{padding:24px 16px}.development-panel h2{font-size:15px}}.app,.app button,.app input{font-family:Inter,sans-serif}.app h1,.app h2,.app .brand,.app .development-panel h2{font-family:Manrope,sans-serif}.app .track-details h1{font-family:Manrope,sans-serif;font-weight:600}.metric small{letter-spacing:.55px;text-transform:uppercase;font-size:9px;font-weight:600}.metric strong{letter-spacing:-.25px;font-size:15px;font-weight:650;line-height:1.3}.metric>span{font-size:10px}.traits{justify-content:space-evenly}.traits strong{font-size:12px;font-weight:650;line-height:1.35}.traits span{letter-spacing:.25px;font-size:9px}@media (width>=1351px){.dna-content{align-items:stretch}.dna-content>.traits{justify-content:space-evenly;gap:10px;height:100%;min-height:112px;padding:4px 0}}@media (width<=560px){.player{gap:10px;height:auto;min-height:82px}.waveform{min-width:0;height:58px}.metric strong{font-size:14px}.traits{justify-content:space-between}.stem-row{grid-template-columns:36px minmax(75px,1fr) minmax(60px,1.15fr) 38px;gap:8px}.stem-icon{width:34px;height:34px}.stem-name{font-size:12px}.stem-level{font-size:11px}}.app.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.app:not(.dark){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.app.dark .upload-strip{color:#b1bdd6;background:#1a2234;border-color:#3a4560}.app.dark .duration,.app.dark .stem-name,.app.dark .stem-level{color:#b6c2dc}.app.dark .analysis-status,.app.dark .section-title p,.app.dark footer{color:#a6b2cc}.app.dark .development-message p,.app.dark .alternate-panel>p{color:#aeb9d0}.app.dark .stem-row input[type=range]{accent-color:#9aabff}.app.dark .search input{color:#eef2ff}.app.dark .metric em{color:#d0c2ff;background:#302a48}.app.dark .metric em.blue-tag{color:#b8c8ff;background:#293452}body:has(.app.dark){background:#111522}body:has(.app:not(.dark)){background:#e9edf4}.app.dark .stem-icon.pink{color:#ff91c8;background:#39243b;box-shadow:inset 0 0 0 1px #754365}.app.dark .stem-icon.orange{color:#ffc078;background:#3a2d25;box-shadow:inset 0 0 0 1px #765137}.app.dark .stem-icon.green{color:#79e2c7;background:#203b3a;box-shadow:inset 0 0 0 1px #376d68}.app.dark .stem-icon.blue{color:#8ebbff;background:#243451;box-shadow:inset 0 0 0 1px #405d8a}.app.dark .stem-icon.purple{color:#b9a0ff;background:#302a49;box-shadow:inset 0 0 0 1px #574a83}.app.dark .stem-icon.gray{color:#b8c5dd;background:#293348;box-shadow:inset 0 0 0 1px #46536d}.app.dark .stem-icon:not(:disabled):hover{filter:brightness(1.16);transform:translateY(-1px)}.app.dark .stem-icon.stem-muted{opacity:.55;filter:saturate(.55)}.app:not(.dark){--border:#e7ebf3}.app:not(.dark) .topbar,.app:not(.dark) .sidebar,.app:not(.dark) .rightbar{background:#f5f7fb!important}.app.dark{--bg:#111522;--border:#293147}.app.dark .topbar,.app.dark .sidebar,.app.dark .rightbar{background:#111725!important;border-color:#293147!important}.app.dark .topbar{border-bottom:1px solid #293147!important}.app:not(.dark){border-color:#e8ecf4!important}.app.dark{border-color:#111522!important}.app.dark>.topbar{background:#111522!important}.app:not(.dark){border:1px solid #e8ecf4!important}.app:not(.dark) .rightbar{background:#fff!important}.app.dark{border:1px solid #293147!important}:is(html:has(.app.dark),body:has(.app.dark)),.app.dark>.topbar{background:#111522!important}@media (width>=561px){.dna-content{align-items:stretch;gap:11px}.dna-content>.metric{justify-content:flex-start;gap:8px;min-height:116px;padding:14px 12px}.dna-content>.metric small{letter-spacing:.35px;min-height:24px;font-size:9px;font-weight:500;line-height:1.4}.dna-content>.metric strong{letter-spacing:-.15px;font-size:13px;font-weight:550;line-height:1.35}.dna-content>.metric>span{font-size:10px;line-height:1.4}.dna-content>.metric em{font-weight:400}.dna-content>.traits{justify-content:space-between;gap:10px;height:100%;min-height:116px;padding:8px 0 8px 20px}.dna-content>.traits div{align-items:center;gap:8px;width:100%}.dna-content>.traits span{letter-spacing:0;flex:1;min-width:0;font-size:9px;line-height:1.35}.dna-content>.traits strong{flex-shrink:0;font-size:11px;font-weight:500;line-height:1.35}}html,body,#root{width:100%;height:auto;min-height:100%}body{min-height:100svh}.app{grid-template-rows:80px auto;height:auto;min-height:calc(100svh - 48px);overflow:visible}.landing-page{height:auto;min-height:0;padding:clamp(24px,4vh,40px) clamp(20px,5vw,72px) clamp(36px,6vh,64px);overflow:visible}.landing-logo{margin:0 auto;position:static}.landing-hero{margin:clamp(32px,8vh,92px) auto clamp(32px,7vh,76px)}.landing-hero h1{overflow-wrap:anywhere;font-size:clamp(38px,5.5vw,76px)}.landing-description{width:100%}.landing-cta{flex-wrap:wrap;justify-content:center;max-width:100%}.landing-features{width:100%}.landing-feature{height:100%;min-height:0;padding:clamp(18px,2vw,26px)}@media (width<=1000px){.app{grid-template-rows:66px auto}.landing-page{grid-area:2/2}}@media (width<=760px){.landing-hero{margin:48px auto 40px}.landing-features{grid-template-columns:minmax(0,1fr)}}@media (width<=560px){.app{min-height:100svh}.landing-page{padding:24px 16px 36px}.landing-hero{margin:42px auto 36px}.landing-hero h1{letter-spacing:-1.8px;font-size:clamp(36px,10vw,52px)}.landing-description{font-size:14px;line-height:1.65}.landing-features{gap:12px}}@media (width>=561px) and (height<=760px){.landing-page{padding-top:20px;padding-bottom:32px}.landing-hero{margin-top:clamp(24px,4vh,48px);margin-bottom:clamp(24px,4vh,48px)}}@media (width<=560px){.landing-hero h1{font-size:clamp(34px,9vw,48px)}}.landing-hero h1{font-size:clamp(35px,4.9vw,67px)}@media (width<=560px){.landing-hero h1{font-size:clamp(33px,8.7vw,46px)}}