@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101514;--panel:#19211f;--panel2:#202a26;--line:#35423c;--text:#f1f4ec;--muted:#a1ada5;--accent:#cbf48b;--ink:#1d2b1c;--purple:#ceb9f4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px 'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select,summary{ -webkit-tap-highlight-color:transparent}button,a,select,summary{cursor:pointer}button{color:inherit;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 15px}button:hover{border-color:var(--accent);background:#304033}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}header{max-width:1440px;margin:auto;padding:27px 44px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;font:800 26px Manrope,sans-serif;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:var(--accent);color:var(--ink);border-radius:9px;font-size:33px;width:38px;height:38px;margin-right:12px;line-height:1}.brand-period{color:var(--accent)}.header-caption{color:var(--muted);font-size:14px;flex:1}.beta{font-size:12px;letter-spacing:2px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:38px 44px 28px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;color:var(--muted);margin:0 0 10px}h1,h2,h3,p{margin-top:0}h1{font:600 31px Manrope,sans-serif;letter-spacing:-1px;margin-bottom:25px}h2{font-family:Manrope,sans-serif}form{display:flex;align-items:center;padding:7px;background:var(--panel);border:1px solid #4b5a50;border-radius:12px;gap:12px}form:focus-within{border-color:var(--accent)}.link-icon{font-size:25px;color:var(--accent);padding-left:12px}#url{color:var(--text);width:100%;min-width:0;border:0;background:transparent;padding:11px 0;outline:none;font-size:16px}#url::placeholder{color:#a2afa5}.primary{background:var(--accent);color:var(--ink);font-weight:700;border-color:var(--accent);padding:15px 22px;white-space:nowrap}.primary:hover{background:#ddffaa;color:var(--ink)}.primary span{margin-left:16px}.import-foot{display:flex;align-items:center;gap:16px;margin-top:12px;color:var(--muted);font-size:14px}.import-foot>span:first-child{flex:1}.upload-label{cursor:pointer;color:var(--text);padding:4px}.upload-label:hover{color:var(--accent)}.upload-hint{font-size:12px}.notice{margin-top:15px;border:1px solid #786a45;background:#302d20;padding:13px 16px;border-radius:9px;color:#f1db9d}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;margin-top:35px}aside{padding-right:25px;border-right:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:5px 0 18px}.section-heading h2{font-size:15px;margin:0;font-weight:600}.section-heading>span{font-size:12px;color:var(--muted)}.library-item{width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:13px 10px;display:flex;gap:11px;align-items:center;margin-bottom:6px;line-height:1.4}.library-item.active{border-color:#536548;background:#263323}.mini-art{background:#363447;color:var(--purple);width:36px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:6px;font-size:21px}.library-item.active .mini-art{background:#465735;color:var(--accent)}.library-item .name{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.library-item small{font-size:12px;color:var(--muted);display:block;margin-top:5px}.demo-button{display:flex;align-items:center;text-align:left;width:100%;gap:10px;padding:14px 11px;background:transparent;margin-top:22px;border-style:dashed;font-size:14px}.demo-button>span{font-size:22px;color:var(--accent)}.demo-button small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}.demo-button b{margin-left:auto;color:var(--muted)}.aside-note{font-size:12px;color:var(--muted);line-height:1.7;margin:18px 10px}.studio{min-width:0}.empty{min-height:510px;display:flex;align-items:center;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#27362a,transparent 66%);text-align:center;border:1px solid var(--line);border-radius:15px;padding:30px}.empty h2{font-size:34px;font-weight:500;letter-spacing:-1px;line-height:1.25;margin-bottom:15px}.empty>p:not(.eyebrow){color:var(--muted);line-height:1.7}.empty .primary{margin-top:10px}.empty-art{display:flex;height:90px;gap:5px;align-items:center;margin-bottom:30px}.empty-art i{display:block;height:36px;width:12px;background:var(--accent);border-radius:10px;transform:rotate(15deg)}.empty-art i:nth-child(2),.empty-art i:nth-child(6){height:65px;background:#91b376}.empty-art i:nth-child(3),.empty-art i:nth-child(5){height:82px;background:#afcf8d}.empty-art i:nth-child(4){height:100px}.loading{padding:80px 30px;text-align:center;border:1px solid var(--line);border-radius:14px;min-height:510px}.loading h2{font-size:25px}.loading p{color:var(--muted);line-height:1.7}.loading progress{width:min(420px,100%);accent-color:var(--accent);margin:15px 0 25px}.listening-bars{display:flex;gap:6px;height:60px;align-items:center;justify-content:center;margin-bottom:30px}.listening-bars i{width:9px;height:35px;border-radius:10px;background:var(--accent);animation:pulse 1.1s infinite alternate}.listening-bars i:nth-child(2n){animation-delay:.3s}.listening-bars i:nth-child(3n){animation-delay:.6s}@keyframes pulse{to{height:12px;opacity:.4}}.track-heading{display:flex;align-items:center;gap:16px;margin-bottom:16px}.track-art{width:66px;height:66px;border-radius:12px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#374b37 0 2px,#2a372d 2px 12px);font-size:38px;color:var(--accent);flex-shrink:0}.track-details{min-width:0;flex:1}.track-details h2{font-size:22px;font-weight:600;margin:0 0 6px;line-height:1.3;overflow-wrap:anywhere}.track-details p:last-child{font-size:14px;color:var(--muted);margin:0}.track-details .eyebrow{font-size:12px;margin-bottom:5px}#original{font-size:12px;color:var(--muted);white-space:nowrap}.song-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.song-meta>span{font-size:12px;border:1px solid var(--line);padding:5px 9px;border-radius:5px;color:#c8d3c8}.song-meta>.estimate{border:0;margin-left:auto;color:var(--muted)}.player{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px 16px}.wave-area{height:60px;position:relative}#waveform{width:100%;height:60px}#seek{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;background:transparent;cursor:pointer}#seek::-webkit-slider-runnable-track{background:transparent}#seek::-webkit-slider-thumb{appearance:none;background:var(--accent);height:60px;width:3px;border-radius:3px;box-shadow:0 0 8px #cbf48b50}#seek::-moz-range-thumb{background:var(--accent);height:60px;width:3px;border:0}.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:5px;font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;gap:24px;margin-top:15px}.transport-buttons{display:flex;align-items:center;gap:16px}.play{border-radius:50%;width:46px;height:46px;background:var(--accent);color:var(--ink);font-size:19px;border:0;padding:0;display:grid;place-items:center}.play:hover{background:#dcffad}.icon-button{border:0;background:transparent;padding:0;position:relative;font-size:26px;width:28px;height:36px}.icon-button small{font-size:10px;position:absolute;top:14px;left:12px}.speed-setting{display:flex;gap:10px;align-items:center;margin-left:auto}.speed-setting label{font-size:14px;color:var(--muted)}select{padding:7px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:14px}.loop{font-size:14px;background:transparent}.loop[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.practice-controls{display:flex;align-items:center;gap:20px;margin:25px 0 16px}.segmented{display:flex;padding:4px;background:var(--panel);border-radius:9px;border:1px solid var(--line)}.segmented button{border:0;background:transparent;padding:8px 14px;font-size:14px}.segmented .selected{background:#d0ddc8;color:#253022}.transpose{display:flex;gap:10px;align-items:center;margin-left:auto;font-size:14px}.transpose>span{color:var(--muted);margin-right:3px}.transpose button{padding:0;width:30px;height:30px;font-size:20px}.transpose output{width:22px;text-align:center;font-variant-numeric:tabular-nums}.simplify{font-size:14px;display:flex;gap:7px;align-items:center;cursor:pointer}.simplify input{accent-color:var(--accent);width:16px;height:16px}.instrument-panel{display:grid;grid-template-columns:180px minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:240px;overflow:hidden}.chord-info{padding:27px 24px;border-right:1px solid var(--line)}.chord-name{font:600 64px Manrope,sans-serif;letter-spacing:-3px;line-height:1.2;color:var(--accent);margin:8px 0}.chord-info>p{font-size:14px;color:var(--muted);margin-bottom:10px}.chord-info>.eyebrow{font-size:12px}.confidence{display:block;font-size:12px;color:var(--muted);margin-bottom:13px}.hear{font-size:12px;padding:7px 10px;background:transparent}.diagram-container{padding:25px 22px 14px;display:flex;flex-direction:column;justify-content:center;min-width:0}#diagram svg{display:block;width:100%;max-height:240px;margin:auto}.diagram-container>p{color:var(--muted);font-size:12px;text-align:center;line-height:1.5;margin:14px 0 0}.timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px;margin-bottom:12px}.timeline-heading h3{font-size:15px;font-weight:500;margin:0}.timeline-heading span{font-size:12px;color:var(--muted)}.chord-timeline{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:10px;scroll-behavior:smooth}.chord-tile{min-width:78px;flex-shrink:0;padding:13px 10px;text-align:left;background:var(--panel)}.chord-tile strong{font:600 22px Manrope,sans-serif;display:block}.chord-tile small{font-size:12px;color:var(--muted);display:block;margin-top:8px;font-variant-numeric:tabular-nums}.chord-tile.current{background:var(--accent);color:var(--ink);border-color:var(--accent)}.chord-tile.current small{color:#465936}.melody{display:flex;align-items:center;gap:15px;padding:13px 16px;background:#242332;border:1px solid #3c384b;border-radius:9px;margin-top:10px}.melody .eyebrow{margin:0;color:var(--purple);font-size:12px}.melody strong{font-size:24px;color:var(--purple);min-width:42px}.melody>span:last-child{font-size:12px;color:#b2aabe}.analysis-details{color:var(--muted);font-size:12px;margin-top:20px;line-height:1.8}.analysis-details summary{display:inline-block;font-size:14px}.analysis-details summary:before{content:'+ ';color:var(--accent)}.analysis-details[open] summary{margin-bottom:12px}footer{max-width:1440px;padding:22px 44px;margin:0 auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}@media(min-width:1440px){.workspace{grid-template-columns:280px minmax(0,1fr);gap:38px}}@media(max-width:1050px){header{padding:22px 25px}main{padding:30px 25px}.workspace{grid-template-columns:210px minmax(0,1fr);gap:20px}aside{padding-right:15px}.practice-controls{flex-wrap:wrap;gap:12px}.simplify{margin-left:auto}.speed-setting label{display:none}.transport{gap:15px}.instrument-panel{grid-template-columns:145px minmax(0,1fr)}.chord-info{padding:20px 15px}.diagram-container{padding:20px 12px}.chord-name{font-size:52px}#original{display:none}footer{padding:20px 25px}}@media(max-width:760px){header{padding:20px}.header-caption{display:none}.beta{margin-left:auto;font-size:10px;letter-spacing:1px}.brand{font-size:23px}main{padding:25px 20px}.workspace{display:flex;flex-direction:column-reverse;margin-top:25px;gap:30px}aside{border-right:0;border-top:1px solid var(--line);padding:20px 0 0}.import-foot{flex-wrap:wrap;gap:6px 13px}.import-foot>span:first-child{flex-basis:100%;font-size:12px;margin-bottom:6px}.upload-label{padding-left:0}.upload-hint{margin-left:auto}form{flex-wrap:wrap;gap:4px 10px}.link-icon{padding-left:7px}#url{width:calc(100% - 40px);font-size:14px}form .primary{width:100%;margin-top:2px;padding:12px}h1{font-size:26px;margin-bottom:20px}.empty{min-height:440px;padding:28px 15px}.empty h2{font-size:30px}.track-heading{gap:12px}.track-art{height:52px;width:52px;font-size:30px}.track-details h2{font-size:19px}.track-details p:last-child{font-size:12px}.song-meta{gap:6px}.song-meta>.estimate{margin-left:0}.player{padding:16px 14px}.transport{gap:10px}.transport-buttons{gap:12px}.loop{padding:9px}.loop span{display:none}.speed-setting{margin-left:auto}.practice-controls{gap:10px;margin-top:20px}.segmented button{padding:8px 12px}.transpose{gap:8px}.transpose>span{font-size:12px}.simplify{width:100%;justify-content:flex-end;margin-top:2px;font-size:12px}.instrument-panel{grid-template-columns:110px minmax(0,1fr)}.chord-info{padding:20px 12px}.chord-info>.eyebrow{font-size:10px;letter-spacing:1px}.chord-name{font-size:44px;letter-spacing:-2px}.chord-info>p{font-size:12px}.confidence{font-size:10px}.diagram-container{padding:18px 9px}.diagram-container>p{font-size:10px}.melody{flex-wrap:wrap;gap:8px 12px}.melody>span:last-child{width:100%}.timeline-heading span{font-size:10px}.chord-tile{min-width:68px}.chord-tile strong{font-size:20px}footer{padding:20px;gap:15px;line-height:1.6}footer>span:last-child{text-align:right}.aside-note{margin-left:0}#library{display:grid;grid-template-columns:1fr 1fr;gap:6px}.library-item{margin:0}.demo-button{max-width:400px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}@media(max-width:370px){main{padding:22px 12px}header{padding:16px 12px}.beta{font-size:9px}.transpose>span{display:none}.instrument-panel{grid-template-columns:95px minmax(0,1fr)}.chord-info{padding:20px 9px}.chord-name{font-size:38px}.melody .eyebrow{font-size:10px}}

.chord-timeline{position:relative}.hear[aria-pressed=true]{color:var(--purple);border-color:var(--purple)}

@media(max-width:760px){.instrument-panel{display:block}.chord-info{display:grid;grid-template-columns:auto 1fr auto;gap:5px 13px;align-items:center;padding:16px;border-right:0;border-bottom:1px solid var(--line)}.chord-info>.eyebrow{grid-column:1/-1;font-size:12px;margin:0 0 5px}.chord-name{grid-column:1;grid-row:2/4;font-size:44px;margin:0}.chord-info>#chord-notes{grid-column:2;grid-row:2;font-size:14px;margin:0}.confidence{grid-column:2;grid-row:3;font-size:12px;margin:0}.chord-info>.hear{grid-column:3;grid-row:2/4;white-space:nowrap}.diagram-container{padding:22px 14px 16px}.diagram-container>p{font-size:12px}.diagram-container svg{min-height:130px}.timeline-heading span{font-size:12px}.timeline-heading{align-items:flex-start}}
/* Separate harmony and note surfaces share a clock, not a display mode. */
.tempo-strip{display:flex;align-items:center;gap:25px;padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line)}.tempo-readout .tempo-label{display:block;font-size:12px;letter-spacing:1.4px;color:var(--muted);margin-bottom:3px}.tempo-readout strong{font:600 27px Manrope,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}.bpm-unit{font-size:13px;margin-left:7px;color:var(--muted)}.tempo-speed{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:4px}.tempo-speed>span{font-size:12px;color:var(--muted)}.tempo-speed strong{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}.beat-pulse{width:11px;height:11px;border:1px solid #71945b;border-radius:50%;background:#283b27;transition:background .05s}.beat-pulse.on{background:var(--accent);box-shadow:0 0 10px #cbf48b66}.chord-pace-row{display:flex;align-items:center;gap:10px;margin:18px 0 14px;flex-wrap:wrap}.chord-pace-row label{font-size:14px}.chord-pace-row>span{margin-left:auto;color:var(--muted);font-size:12px}.instrument-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.instrument-pair .instrument-panel{display:flex;flex-direction:column;min-width:0}.instrument-pair .chord-info,.note-info{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:18px;border-right:0;border-bottom:1px solid var(--line)}.instrument-pair .eyebrow{grid-column:1/-1;font-size:12px;margin:0 0 10px;color:var(--accent)}.instrument-pair .eyebrow>span{font-size:10px;color:var(--muted);letter-spacing:1px;margin-left:7px}.instrument-pair .chord-name,.note-name{grid-column:1;grid-row:2/4;margin:0;font:600 42px Manrope,sans-serif;letter-spacing:-1.5px;line-height:1.2}.instrument-pair #chord-notes,#note-detail{grid-column:2;grid-row:2;font-size:13px;margin:0;color:var(--muted)}.instrument-pair .confidence,.note-estimate{grid-column:2;grid-row:3;font-size:12px;margin:0;color:var(--muted)}.instrument-pair .hear{grid-column:3;grid-row:2/4;white-space:nowrap;font-size:12px;padding:8px}.note-panel{background:#201f29;border-color:#484054}.note-panel .note-info{border-color:#484054}.note-panel .eyebrow,.note-name{color:var(--purple)}.note-panel .hear{border-color:#51475f;color:var(--purple)}.instrument-pair .diagram-container{padding:22px 15px 16px;flex:1}.instrument-pair .diagram-container svg{min-height:125px;max-height:225px}.instrument-pair .diagram-container>p{font-size:12px;line-height:1.6;min-height:38px;margin-top:10px}.note-panel #note-diagram{min-height:125px}
@media(min-width:761px) and (max-width:1190px){.instrument-pair{grid-template-columns:1fr}.instrument-pair .diagram-container{padding-left:28px;padding-right:28px}.instrument-pair .diagram-container svg{max-height:185px}}@media(max-width:760px){.instrument-pair{grid-template-columns:1fr;gap:16px}.instrument-pair .chord-info,.note-info{padding:16px}.instrument-pair .eyebrow>span{font-size:10px}.instrument-pair .diagram-container{padding:18px 14px 10px}.instrument-pair .diagram-container>p{min-height:0}.chord-pace-row>span{width:100%;margin:0;line-height:1.5}.tempo-strip{gap:15px}.tempo-readout strong{font-size:25px}.tempo-speed>span{font-size:12px}.tempo-speed strong{font-size:15px}.instrument-pair .chord-name,.note-name{font-size:40px}}@media(max-width:370px){.instrument-pair .chord-info,.note-info{grid-template-columns:auto 1fr;gap:5px 12px}.instrument-pair .hear{grid-row:4;grid-column:1/-1;justify-self:start;margin-top:8px}.tempo-strip{gap:10px}.tempo-speed>span{max-width:110px}.instrument-pair #chord-notes,#note-detail{font-size:13px}}

.studio-nav{display:flex;gap:15px;align-items:center;font-size:14px}.studio-nav a{padding:9px 12px;border-radius:7px;white-space:nowrap}.studio-nav a:last-child{background:var(--panel2);color:var(--accent)}@media(max-width:640px){header:has(.studio-nav){flex-wrap:wrap;gap:12px}.studio-nav{margin-left:auto;font-size:12px;gap:3px}.studio-nav a{padding:8px}.header-caption{display:none}}