:root{--brand-pink-hue: 2.884;--brand-pink: oklch(71.742% .1301 var(--brand-pink-hue));--brand-pink-inversion: oklch(76.727% .1051 var(--brand-pink-hue));--brand-pink-sus: oklch(80.715% .0851 var(--brand-pink-hue));--brand-pink-seventh: oklch(84.703% .0651 var(--brand-pink-hue));--brand-warm-white: #F7F3F1;--brand-charcoal: #1A1A1C;--brand-mint: #50BCA9;--brand-haze-blue: #5B82A6;--surface-raised: color-mix(in oklch, var(--brand-warm-white) 8%, var(--brand-charcoal));color:var(--brand-charcoal);background:var(--brand-warm-white);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}.audio-log{display:block;min-width:0;margin-left:auto;overflow:hidden;color:#ffffffad;font:600 clamp(.5rem,1.12vw,.66rem) / 1.2 system-ui,sans-serif;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.audio-log[data-level=progress]{color:#fff0b8}.audio-log[data-level=error]{color:#ffe2df}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}button{border:0;appearance:none;-webkit-appearance:none;transform:translateY(0) scale(1);transform-origin:center;transition:transform 60ms ease-out,filter 60ms ease-out,box-shadow 60ms ease-out}button:not(:disabled){cursor:pointer}button:not(:disabled):not(.auto-accompaniment-tempo-wheel):not(.chord-loop-playhead-wheel):is(:active,[data-pressed=true]){transform:translateY(1px) scale(.985);filter:brightness(.72);box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 .72rem #00000057}.custom-select{position:relative;width:100%;min-width:0}.custom-select-trigger{position:relative;display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:.35rem;padding-right:1.2rem;text-align:left;touch-action:manipulation}.custom-select-trigger:after{position:absolute;top:50%;right:.45rem;width:.34rem;height:.34rem;border-right:1.5px solid currentcolor;border-bottom:1.5px solid currentcolor;content:"";opacity:.68;transform:translateY(-66%) rotate(45deg);transition:transform .14s ease}.custom-select[data-open=true] .custom-select-trigger:after{transform:translateY(-34%) rotate(225deg)}.custom-select-value{display:block;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-select-prefix{flex:0 0 auto;color:#ffffff8a;font-weight:620;white-space:nowrap}.custom-select-trigger:focus-visible,.custom-select[data-open=true] .custom-select-trigger{outline:1px solid rgb(255 181 212 / 64%);outline-offset:1px}.custom-select.is-disabled .custom-select-trigger{cursor:default;opacity:.42}.custom-select-listbox{position:fixed;z-index:1000;display:grid;width:max-content;gap:.08rem;padding:.22rem;overflow-x:hidden;overflow-y:auto;border:1px solid rgb(255 255 255 / 22%);border-radius:.48rem;background:#1b171cfa;box-shadow:0 .65rem 1.5rem #00000085;color:var(--brand-warm-white);overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}.custom-select-listbox[hidden],.custom-select-listbox::-webkit-scrollbar{display:none}.custom-select-option{position:relative;width:100%;min-height:1.9rem;padding:.38rem 1.65rem .38rem .52rem;border-radius:.3rem;background:transparent;color:#ffffffd1;font:650 clamp(.52rem,1.1vw,.66rem) / 1.18 system-ui,sans-serif;text-align:left;white-space:normal;touch-action:manipulation}.custom-select-option:after{position:absolute;top:50%;right:.55rem;width:.28rem;height:.5rem;border-right:1.5px solid currentcolor;border-bottom:1.5px solid currentcolor;content:"";opacity:0;transform:translateY(-62%) rotate(45deg)}.custom-select-option.is-selected{background:color-mix(in oklch,var(--brand-pink) 82%,var(--brand-charcoal));color:var(--brand-warm-white)}.custom-select-option.is-selected:after{opacity:1}.custom-select-option:focus-visible{outline:1px solid rgb(255 181 212 / 72%);outline-offset:-1px}html{overflow:hidden;overscroll-behavior:none;background:var(--brand-warm-white)}body{height:100dvh;margin:0;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.touch-surface{position:relative;display:flex;min-width:0;overflow:hidden;border:1px solid color-mix(in oklch,var(--brand-charcoal) 18%,transparent);background:var(--brand-warm-white);cursor:crosshair}.touch-surface.is-pop-chord-surface{display:block;border-radius:.5rem;background:var(--brand-warm-white);--pop-guide-pulse: 0}.touch-surface,.touch-surface *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}.note-region{position:relative;flex:1 1 0;min-width:0;pointer-events:none}.note-region:after{position:absolute;inset:0;content:"";background:transparent}.note-region.is-active:after{background:#fff3}.pop-chord-region{--pop-card-gap: clamp(2px, .24vw, 3px);--pop-card-radius: clamp(.38rem, .72vw, .68rem);--pop-core-background: var(--brand-pink);--pop-inversion-background: var(--brand-pink-inversion);--pop-sus-background: var(--brand-pink-sus);--pop-seventh-background: var(--brand-pink-seventh);--pop-modal-background: var(--brand-haze-blue);--pop-secondary-background: var(--brand-mint);position:absolute;top:calc(var(--region-y) + var(--pop-card-gap));left:calc(var(--region-x) + var(--pop-card-gap));display:grid;width:calc(var(--region-width) - (2 * var(--pop-card-gap)));height:calc(var(--region-height) - (2 * var(--pop-card-gap)));min-width:0;padding:clamp(.18rem,1.2vw,.38rem);place-content:center;overflow:hidden;border:0;border-radius:var(--pop-card-radius);background:var(--brand-warm-white);box-shadow:0 .08rem .22rem color-mix(in oklch,var(--brand-charcoal) 24%,transparent);color:var(--brand-warm-white);line-height:1;text-align:center}.pop-chord-region.is-diatonic.tier-core{background:var(--pop-core-background);color:var(--brand-charcoal)}.pop-chord-region.is-diatonic.tier-sus{background:var(--pop-sus-background);color:var(--brand-charcoal)}.pop-chord-region.is-chromatic.tier-color{background:var(--pop-modal-background);color:var(--brand-charcoal)}.pop-chord-region.is-diatonic.tier-seventh{background:var(--pop-seventh-background);color:var(--brand-charcoal)}.pop-chord-region.is-chromatic.tier-secondary{z-index:1;padding:.1rem;background:var(--pop-secondary-background);color:var(--brand-charcoal)}.pop-chord-region.is-chromatic.family-related-ii{background:repeating-linear-gradient(135deg,transparent 0 .52rem,var(--pop-secondary-background) .52rem .7rem),color-mix(in oklch,var(--brand-mint) 58%,var(--brand-warm-white));color:var(--brand-charcoal)}.pop-chord-region.is-chromatic.tier-sus{background:repeating-linear-gradient(135deg,transparent 0 .52rem,var(--pop-modal-background) .52rem .7rem),var(--pop-sus-background);color:var(--brand-charcoal)}.pop-chord-region.is-diatonic.tier-inversion{z-index:1;padding:.08rem;background:var(--pop-inversion-background);box-shadow:0 .12rem .4rem color-mix(in oklch,var(--brand-charcoal) 28%,transparent);color:var(--brand-charcoal)}.pop-chord-region.is-chromatic.tier-connector{z-index:2;padding:.06rem;background:repeating-linear-gradient(135deg,transparent 0 .46rem,var(--brand-mint) .46rem .62rem),var(--brand-haze-blue);box-shadow:0 .12rem .35rem color-mix(in oklch,var(--brand-charcoal) 42%,transparent);color:var(--brand-charcoal)}.tier-connector .pop-chord-roman,.tier-connector .pop-chord-numeric{font-size:clamp(.5rem,2.25vw,.72rem);line-height:1}.tier-connector .pop-chord-symbol,.tier-connector .pop-chord-hint,.tier-secondary .pop-chord-symbol,.tier-secondary .pop-chord-hint,.tier-inversion .pop-chord-symbol,.tier-inversion .pop-chord-hint{display:none}.pop-chord-region[data-chord-id=viiø7]{padding:.08rem}.pop-chord-region[data-chord-id=viiø7] .pop-chord-symbol,.pop-chord-region[data-chord-id=viiø7] .pop-chord-hint{display:none}.tier-secondary .pop-chord-roman,.tier-secondary .pop-chord-numeric{font-size:clamp(.58rem,2.7vw,.78rem);line-height:1.2}.tier-inversion .pop-chord-roman,.tier-inversion .pop-chord-numeric{font-size:clamp(.72rem,3.5vw,1.05rem);line-height:1}.pop-chord-region:before{position:absolute;inset:0;border:0;border-radius:inherit;background:transparent;content:"";pointer-events:none;transition:background .12s ease,box-shadow .12s ease,opacity .12s ease}.pop-chord-region.is-suggested:before{background:radial-gradient(circle at 50% 50%,transparent 34%,rgb(255 255 255 / 42%) 100%);box-shadow:inset 0 0 1rem .08rem #ffffffc2,inset 0 0 2px #ffffffeb}.pop-chord-region.is-strong-suggested:before{background:radial-gradient(circle at 50% 50%,transparent 25%,rgb(255 255 255 / 46%) 100%);box-shadow:inset 0 0 1.45rem .28rem #ffffffe0;opacity:.9;animation:pop-strong-resolution-pulse .9s ease-in-out infinite}.pop-chord-region.is-strong-suggested:after{border-radius:inherit;background:radial-gradient(circle at 50% 50%,transparent 34%,rgb(255 255 255 / 32%) 100%);animation:pop-strong-resolution-wash .9s ease-in-out infinite}.pop-chord-region.is-strong-suggested .pop-chord-roman,.pop-chord-region.is-strong-suggested .pop-chord-numeric{color:inherit;text-shadow:none}.pop-chord-region.is-active:before{background:radial-gradient(circle at 50% 50%,color-mix(in oklch,var(--brand-warm-white) 10%,transparent),color-mix(in oklch,var(--brand-warm-white) 28%,transparent));box-shadow:inset 0 0 1rem color-mix(in oklch,var(--brand-warm-white) 34%,transparent)}@keyframes pop-strong-resolution-pulse{0%,to{box-shadow:inset 0 0 1rem .12rem #ffffffa3;opacity:.74}50%{box-shadow:inset 0 0 1.55rem .34rem #fffffff5;opacity:.96}}@keyframes pop-strong-resolution-wash{0%,to{opacity:.05}50%{opacity:.14}}@media(prefers-reduced-motion:reduce){.pop-chord-region.is-strong-suggested:before,.pop-chord-region.is-strong-suggested:after{animation:none}}.pop-chord-region>*{position:relative;z-index:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pop-chord-region.is-label-vertical>.pop-chord-label{display:grid;place-content:center;overflow:visible;transform:rotate(90deg);transform-origin:center}.pop-chord-label>*{min-width:0;white-space:nowrap}.pop-chord-roman,.pop-chord-numeric{font-family:Iowan Old Style,Palatino Linotype,Palatino,Times New Roman,serif;font-size:clamp(.82rem,4.2vw,1.35rem);font-weight:760;letter-spacing:-.02em}.tier-core .pop-chord-roman,.tier-core .pop-chord-numeric{font-size:clamp(1.15rem,6vw,2rem)}.pop-chord-symbol{margin-top:.18rem;font-size:clamp(.56rem,2.7vw,.8rem);opacity:.86}.tier-core .pop-chord-symbol{font-size:clamp(.72rem,3.4vw,1rem)}.pop-chord-hint{margin-top:.22rem;font-size:clamp(.46rem,2.2vw,.66rem);opacity:.62}.tier-color .pop-chord-hint,.tier-sus .pop-chord-hint,.tier-seventh .pop-chord-hint{margin-top:.14rem}.tier-sus .pop-chord-hint,.tier-seventh .pop-chord-hint,.pop-chord-region[data-chord-id=iv] .pop-chord-hint,.pop-chord-region[data-chord-id=bIII] .pop-chord-hint,.pop-chord-region[data-chord-id=v7] .pop-chord-hint,.pop-chord-region[data-chord-id=bVI] .pop-chord-hint,.pop-chord-region[data-chord-id=bVII] .pop-chord-hint,.tier-sus .pop-chord-roman,.tier-sus .pop-chord-numeric{display:none}.tier-sus .pop-chord-symbol{margin-top:0}.pop-chord-region[data-chord-id=bVII]>.pop-chord-label,.pop-chord-region[data-chord-id=viiø7]>.pop-chord-label{display:inline-flex;width:max-content;gap:.24rem;align-items:baseline}.pop-chord-region[data-chord-id=bVI]{display:flex;gap:.24rem;align-items:center;justify-content:center}.pop-chord-region[data-chord-id=bVI]>*,.pop-chord-region[data-chord-id=bVII]>.pop-chord-label>*,.pop-chord-region[data-chord-id=viiø7]>.pop-chord-label>*{flex:0 0 auto}.pop-chord-region[data-chord-id=bVI] .pop-chord-symbol,.pop-chord-region[data-chord-id=bVII] .pop-chord-symbol,.pop-chord-region[data-chord-id=viiø7] .pop-chord-symbol{display:inline;margin-top:0;font-weight:400}.pop-chord-region.is-compact{padding:.08rem}.pop-chord-region.is-compact .pop-chord-roman,.pop-chord-region.is-compact .pop-chord-numeric{font-size:clamp(.68rem,3.2vw,.95rem)}.pop-chord-region.is-compact .pop-chord-symbol{margin-top:.08rem}.pop-chord-region.is-compact .pop-chord-hint{margin-top:.06rem}.touch-input-layer{position:absolute;z-index:2;inset:0;background:transparent}.duet-body{min-width:30rem;min-height:18rem;touch-action:none;background:radial-gradient(circle at 50% 0%,rgb(255 255 255 / 72%),transparent 42%),var(--brand-warm-white)}.duet-shell{display:grid;width:100dvw;height:100dvh;grid-template-columns:minmax(0,1fr) .42rem minmax(0,1fr);padding:max(.35rem,env(safe-area-inset-top)) max(.35rem,env(safe-area-inset-right)) max(.35rem,env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left));overflow:hidden;touch-action:none}.duet-panel{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:1.65rem minmax(0,1fr);overflow:hidden}.melody-panel{container-type:inline-size;grid-template-rows:2rem 2.9rem 1.65rem minmax(0,1fr)}.duet-surface{width:100%;height:100%;aspect-ratio:auto;border-color:color-mix(in oklch,var(--brand-charcoal) 18%,transparent)}.duet-divider{position:relative;z-index:5;display:grid;place-items:center;background:transparent;box-shadow:none}.duet-divider span{display:none}.diagnostic-badge{position:fixed;z-index:20;top:max(.42rem,env(safe-area-inset-top));right:max(.5rem,env(safe-area-inset-right));padding:.2rem .42rem;border:1px solid rgb(255 255 255 / 32%);border-radius:.25rem;background:#120f12e0;color:#ffffffd1;font-size:clamp(.45rem,1vw,.58rem);letter-spacing:.03em;pointer-events:none}.panel-badge{position:relative;z-index:4;display:flex;width:100%;min-width:0;align-items:baseline;gap:.42rem;padding:.28rem .48rem .24rem;border:1px solid rgb(255 255 255 / 18%);border-bottom:0;background:#110e12e0;color:#ffffffe0;pointer-events:none}.panel-badge h2,.panel-badge output{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.panel-badge h2{font-size:clamp(.64rem,1.45vw,.82rem);letter-spacing:.08em}.panel-badge output{color:#ffffff8f;font-size:clamp(.54rem,1.2vw,.7rem)}.panel-badge>.audio-log{width:auto;flex:1 1 auto;margin:0}.tone-menu{position:relative;z-index:5;display:flex;gap:.32rem;min-width:0;align-items:center;padding:.25rem .32rem;overflow-x:auto;overflow-y:hidden;border:1px solid rgb(255 255 255 / 18%);border-bottom:0;background:#19151af5;overscroll-behavior-inline:contain;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}.tone-menu::-webkit-scrollbar{display:none}.tone-field{display:grid;flex:0 0 clamp(10.25rem,43%,13rem);min-width:0;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.24rem;color:#ffffff8f;font-size:clamp(.42rem,1vw,.58rem);white-space:nowrap}.tone-field .custom-select-trigger{width:100%;min-width:0;height:1.68rem;padding:0 1.25rem 0 .34rem;border:0;border-radius:.22rem;background:var(--surface-raised);color:color-mix(in oklch,var(--brand-warm-white) 88%,transparent);font:inherit;font-size:clamp(.48rem,1.1vw,.64rem);touch-action:manipulation}.melody-layout-controls{display:flex;flex:0 0 auto;align-items:center;gap:.28rem;padding-left:.36rem;border-left:1px solid rgb(255 255 255 / 18%)}.layout-field{display:grid;flex:0 0 auto;grid-template-columns:auto 4.2rem 3.1rem;align-items:center;gap:.22rem;color:#ffffff9e;font-size:clamp(.42rem,1vw,.58rem);white-space:nowrap}.layout-field:last-child{grid-template-columns:auto 4.2rem 2.3rem}.layout-field input[type=range]{width:4.2rem;height:1.3rem;margin:0;accent-color:var(--brand-pink);cursor:ew-resize;touch-action:none}.layout-field output{color:#ffffffdb;font-size:clamp(.44rem,1vw,.6rem);font-variant-numeric:tabular-nums;text-align:right}.layout-auto-button{flex:0 0 auto;height:1.68rem;padding:0 .34rem;border:0;border-radius:.22rem;background:var(--surface-raised);color:#ffffffad;font:inherit;font-size:clamp(.42rem,1vw,.56rem);touch-action:manipulation}.layout-auto-button[aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.transpose-panel{position:relative;z-index:6;display:grid;min-width:0;grid-template-columns:repeat(2,minmax(2.4rem,1fr)) minmax(4.6rem,1.35fr) repeat(2,minmax(2.4rem,1fr));gap:.26rem;padding:.24rem .32rem;border:1px solid rgb(255 255 255 / 18%);border-bottom:0;background:#141115f5}.transpose-panel button,.key-wheel .custom-select-trigger{width:100%;min-width:0;height:2.36rem;border:1px solid rgb(255 255 255 / 24%);border-radius:.24rem;background:var(--surface-raised);color:color-mix(in oklch,var(--brand-warm-white) 88%,transparent);font:inherit;font-size:clamp(.54rem,1.35vw,.72rem);font-variant-numeric:tabular-nums;touch-action:manipulation}.transpose-panel button{padding:0;border:0;cursor:pointer}.transpose-panel button:active,.transpose-panel [data-melody-octave][aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.key-wheel{display:block;min-width:0}.key-wheel .custom-select-trigger{padding:0 1.2rem 0 .4rem;border:0;background-color:var(--brand-pink);color:var(--brand-charcoal);font-weight:720;text-align:center}.duet-shell .pop-chord-region{padding:clamp(.1rem,.7vw,.3rem)}.duet-shell .pop-chord-roman,.duet-shell .pop-chord-numeric{font-size:clamp(.72rem,2.1vw,1.15rem)}.duet-shell .tier-core .pop-chord-roman,.duet-shell .tier-core .pop-chord-numeric{font-size:clamp(1rem,3.1vw,1.72rem)}.duet-shell .pop-chord-symbol{margin-top:.12rem;font-size:clamp(.52rem,1.45vw,.78rem)}.duet-shell .tier-core .pop-chord-symbol{font-size:clamp(.64rem,1.75vw,.9rem)}.duet-shell .pop-chord-hint{margin-top:.12rem;font-size:clamp(.42rem,1.15vw,.62rem)}.duet-shell .tier-secondary .pop-chord-roman,.duet-shell .tier-secondary .pop-chord-numeric,.duet-shell .tier-inversion .pop-chord-roman,.duet-shell .tier-inversion .pop-chord-numeric{font-size:clamp(.55rem,1.55vw,.8rem)}.duet-shell .pop-chord-region[data-chord-id=viiø7] .pop-chord-roman,.duet-shell .pop-chord-region[data-chord-id=viiø7] .pop-chord-numeric{font-size:clamp(.5rem,1.4vw,.74rem)}.duet-shell .tier-connector .pop-chord-roman,.duet-shell .tier-connector .pop-chord-numeric{font-size:clamp(.46rem,1.3vw,.68rem)}.melody-surface{display:grid;grid-template-rows:minmax(0,1fr);background:var(--brand-warm-white)}.melody-lane{position:absolute;top:50%;left:50%;display:flex;width:var(--keyboard-diagonal, 100%);height:var(--keyboard-depth, 100%);min-width:0;min-height:0;overflow:hidden;transform:translate(-50%,-50%) rotate(var(--keyboard-angle, 0deg));transform-origin:center}.melody-lane:after{position:absolute;z-index:3;top:.2rem;left:.25rem;padding:.08rem .2rem;background:#0000007a;color:#ffffffa3;content:attr(data-label);font-size:clamp(.38rem,.9vw,.52rem);letter-spacing:.04em;pointer-events:none}.melody-region{position:relative;display:grid;min-width:0;flex:1 1 0;align-items:end;justify-items:center;overflow:hidden;border-right:1px solid rgb(0 0 0 / 32%);background:#fff}.melody-key-black{position:absolute;z-index:2;top:0;left:var(--key-left);width:var(--key-width);height:var(--black-key-end, var(--key-height));min-width:0;border:0;border-radius:0 0 .22rem .22rem;background:linear-gradient(90deg,#0b0b0b,#292929 72%,#0a0a0a);box-shadow:0 .22rem .3rem #0000006b;transform:translate(-50%)}.melody-region:before{position:absolute;top:50%;left:50%;width:.22rem;height:.22rem;border-radius:50%;background:#ffffff42;content:"";transform:translate(-50%,-50%)}.melody-region.is-active:before{width:.46rem;height:.46rem;background:#fff;box-shadow:0 0 1.2rem #ffe99fd1}.duet-shell .melody-region.is-active:after{z-index:1;background:#0000006b}.duet-shell .melody-lane-major .melody-region{border-right:0;background:#fff}.duet-shell .melody-lane-major .melody-region.is-avoid-note{background:#9b9b97}.duet-shell .melody-lane-major .melody-key-black{border-right:0;background:linear-gradient(90deg,#0b0b0b,#292929 72%,#0a0a0a)}.duet-shell .melody-lane-major .melody-key-black.is-avoid-note{background:linear-gradient(90deg,#5e5e5a,#858580 72%,#555552)}.duet-shell .melody-key-black.is-active:after{z-index:1;background:#ffffff47}.melody-lane-major .melody-region:before{content:none}.melody-lane-major .melody-key-white .melody-note-label{background:linear-gradient(transparent,#ffffff85);color:#171318;font-weight:680}.melody-lane-major .melody-key-black .melody-note-label{padding:.3rem .02rem;background:linear-gradient(transparent,#00000094);color:#ffffffd1;font-size:clamp(.36rem,.88vw,.5rem);font-weight:650}.melody-lane-major .melody-key-black.is-avoid-note .melody-note-label{color:#f4f4f1}.melody-note-label{position:absolute;z-index:2;top:50%;left:0;display:grid;width:100%;grid-template-rows:.22rem 1em .22rem;align-items:center;justify-items:center;padding:.36rem .05rem;background:linear-gradient(transparent,#0000006b);color:#ffffffad;font-size:clamp(.44rem,1.1vw,.62rem);line-height:1;text-align:center;transform:translateY(-50%) rotate(var(--keyboard-counter-angle, 0deg))}.melody-note-label:before,.melody-note-label:after{width:.18rem;height:.18rem;border-radius:50%;content:""}.melody-region.is-upper-octave .melody-note-label:before,.melody-region.is-lower-octave .melody-note-label:after{background:currentcolor}.melody-region.role-tonic .melody-note-label{color:#1b1b1b;font-weight:760}@media(max-height:330px){.duet-panel{grid-template-rows:1.4rem minmax(0,1fr)}.melody-panel{grid-template-rows:1.65rem 2.5rem 1.4rem minmax(0,1fr)}.tone-menu{padding-block:.14rem}.tone-field .custom-select-trigger,.layout-auto-button{height:1.5rem}.transpose-panel{padding-block:.12rem}.transpose-panel button,.key-wheel .custom-select-trigger{height:2.2rem}.panel-badge{padding:.16rem .3rem}.duet-shell .pop-chord-hint{display:none}}.melody-panel{display:block;isolation:isolate}.melody-control-card{position:absolute;z-index:8;top:.42rem;left:.42rem;display:grid;width:min(60%,22rem);min-width:min(15rem,calc(100% - .84rem));max-width:calc(100% - .84rem);box-sizing:border-box;overflow:visible;border:1px solid rgb(255 255 255 / 24%);border-radius:.55rem;background:#161217f0;box-shadow:0 .45rem 1.25rem #00000061;-webkit-backdrop-filter:blur(.7rem);backdrop-filter:blur(.7rem);container:melody-controls / inline-size}.melody-control-card.has-open-settings,.melody-control-card.has-open-accompaniment-editor{z-index:16}.chord-tutorial-open{position:absolute;z-index:12;top:50%;left:clamp(.45rem,1.25vw,.8rem);display:flex;width:clamp(8.8rem,36%,10.5rem);min-height:clamp(3.2rem,15vh,4.4rem);padding:clamp(.5rem,1.2vw,.78rem);align-items:center;gap:clamp(.42rem,1vw,.68rem);border:2px solid rgb(255 255 255 / 92%);border-radius:.78rem;background:var(--brand-charcoal);box-shadow:0 0 0 .24rem color-mix(in oklch,var(--brand-pink) 72%,transparent),0 .75rem 1.6rem #00000061;color:var(--brand-warm-white);text-align:left;transform:translateY(-50%);cursor:grab;touch-action:none}.chord-tutorial-open:not(:disabled):is(:active,[data-pressed=true]){transform:translateY(-50%) scale(.96)}.chord-tutorial-open[hidden]{display:none!important}.chord-tutorial-open[data-positioned=true]{transform:none}.chord-tutorial-open[data-positioned=true]:not(:disabled):is(:active,[data-pressed=true]){transform:scale(.96)}.chord-tutorial-open[data-dragging=true],.chord-tutorial-open[data-dragging=true]:not(:disabled):is(:active,[data-pressed=true]){cursor:grabbing;filter:brightness(1.06);transform:scale(1.03);box-shadow:0 0 0 .28rem color-mix(in oklch,var(--brand-mint) 78%,transparent),0 1rem 2rem #00000070}.chord-tutorial-open-mark{display:grid;width:clamp(1.8rem,4.2vw,2.5rem);aspect-ratio:1;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--brand-pink);color:var(--brand-charcoal);font:850 clamp(1.05rem,2.5vw,1.45rem) / 1 system-ui,sans-serif}.chord-tutorial-open>span:last-child{display:grid;min-width:0;gap:.14rem}.chord-tutorial-open strong{font-size:clamp(.72rem,1.75vw,1rem);letter-spacing:.02em;white-space:nowrap}.chord-tutorial-open small{color:#ffffffa8;font-size:clamp(.5rem,1.15vw,.66rem);font-weight:650}#duet-performance-settings[hidden],.duet-settings-popover[hidden],.auto-accompaniment-editor[hidden],.auto-accompaniment-controls[hidden],.chord-loop-controls[hidden],.chord-loop-timeline-card[hidden],.chord-loop-edit-controls[hidden]{display:none!important}.duet-control-header{display:grid;min-width:0;grid-template-columns:1.58rem minmax(0,1fr);gap:.14rem;padding:.16rem;border-bottom:1px solid rgb(255 255 255 / 12%);border-radius:.55rem .55rem 0 0;background:#ffffff0d}.duet-mode-switch{display:grid;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:.14rem}.duet-mode-switch button{height:1.26rem;padding:0 .36rem;border-radius:.28rem;background:transparent;color:#ffffff94;font:inherit;font-size:clamp(.43rem,.92vw,.56rem);font-weight:680;touch-action:manipulation}.duet-mode-switch button[aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.performance-layer-toggle{min-width:0;min-height:1.42rem;border-radius:.34rem;background:var(--surface-raised)}.performance-layer-toggle{display:flex;padding:.12rem .34rem;align-items:center;justify-content:space-between;gap:.24rem;color:#ffffffb3;font:inherit;font-size:clamp(.43rem,.92vw,.56rem);touch-action:manipulation}.performance-layer-toggle strong{color:#ffffff75;font-weight:760}.performance-layer-toggle[aria-checked=true]{background:color-mix(in oklch,var(--brand-mint) 24%,var(--surface-raised));color:var(--brand-warm-white)}.performance-layer-toggle[aria-checked=true] strong{color:var(--brand-mint)}.performance-chord-loop-transport span{color:inherit;font-size:.62rem;line-height:1}.performance-chord-loop-transport-icon{width:.7rem;height:.7rem;flex:0 0 auto;fill:none;color:inherit;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.performance-chord-loop-transport-icon [hidden]{display:none}.performance-chord-loop-transport{display:flex;min-width:0;min-height:1.42rem;padding:.12rem .34rem;align-items:center;justify-content:center;gap:.16rem;border:1px solid rgb(255 255 255 / 14%);border-radius:.34rem;background:var(--surface-raised);color:#ffffffb3;font:inherit;font-size:clamp(.43rem,.92vw,.56rem);font-size:clamp(.38rem,4cqi,.56rem);white-space:normal;touch-action:manipulation}.performance-chord-loop-transport strong{min-width:0;overflow:visible;font-weight:760;line-height:1.05;overflow-wrap:anywhere;text-align:center;text-overflow:clip;white-space:normal}.performance-chord-loop-transport.is-play[aria-pressed=true]{background:color-mix(in oklch,var(--brand-mint) 24%,var(--surface-raised));color:var(--brand-warm-white)}.performance-chord-loop-transport.is-play[aria-pressed=true] strong{color:var(--brand-mint)}.performance-chord-loop-transport.is-stop[data-active=true]{background:color-mix(in oklch,var(--brand-pink) 20%,var(--surface-raised));color:var(--brand-warm-white)}.performance-chord-loop-transport:disabled{color:#ffffff47}.performance-chord-loop-progress{position:absolute;z-index:13;top:4.5rem;left:.42rem;display:grid;width:min(40%,14.667rem);min-width:0;container:performance-loop-progress / inline-size;grid-template-rows:minmax(1.72rem,auto) 1.72rem;overflow:hidden;border:1px solid rgb(255 255 255 / 22%);border-radius:.5rem;background:#141115e5;box-shadow:0 .42rem 1rem #0000004d;-webkit-backdrop-filter:blur(.58rem);backdrop-filter:blur(.58rem);cursor:default;pointer-events:auto;touch-action:none}.performance-chord-loop-progress[data-dragging=true]{z-index:15;cursor:grabbing;border-color:#50bca9b8;box-shadow:0 .55rem 1.4rem #0000006b,0 0 .7rem #50bca947}.performance-chord-loop-progress[data-snapping=true]{pointer-events:none}.performance-chord-loop-progress[hidden]{display:none!important}.performance-chord-loop-progress header{display:grid;min-width:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:.14rem;padding:.14rem .18rem;border-bottom:1px solid rgb(255 255 255 / 12%);color:#ffffff94;font-size:clamp(.43rem,.92vw,.56rem);font-weight:680}.performance-chord-loop-bars{position:relative;display:block;min-width:0;overflow:hidden;padding:.12rem;background:#ffffff0d;cursor:ew-resize;touch-action:none}.performance-chord-loop-bars[data-scrubbing=true]{background:#50bca917;cursor:grabbing}.performance-chord-loop-bars:after{position:absolute;z-index:6;top:0;right:0;bottom:0;width:.72rem;background:linear-gradient(to right,transparent,rgb(6 5 7 / 78%));box-shadow:inset -.12rem 0 .28rem #00000061;content:"";pointer-events:none}.performance-chord-loop-bars:before{position:absolute;z-index:7;top:.12rem;bottom:.12rem;left:.12rem;width:2px;background:#fff3a6;box-shadow:0 0 .32rem #ffef88bd;content:"";opacity:0;pointer-events:none}.performance-chord-loop-bars:is([data-scrubbing=true],[data-snapping=true]):before{opacity:1}.performance-chord-loop-bars:is([data-scrubbing=true],[data-snapping=true]) .performance-chord-loop-playhead{opacity:0}.performance-chord-loop-track{display:grid;width:125%;height:100%;grid-template-columns:repeat(5,minmax(0,1fr));transform:translate(0);will-change:transform}.performance-chord-loop-track.is-scrubbing-track{width:150%;grid-template-columns:repeat(6,minmax(0,1fr))}.performance-chord-loop-track.is-snapping{transition:transform .22s cubic-bezier(.16,.76,.18,1)}.performance-chord-loop-track.is-advancing{transform:translate(-20%);transition:transform .18s linear}.performance-chord-loop-track.is-pause-snapping{transition:transform .14s cubic-bezier(.18,.72,.22,1)}.performance-chord-loop-track.is-pause-snapping .performance-chord-loop-playhead{transition:left .14s cubic-bezier(.18,.72,.22,1)}.performance-chord-loop-bars[data-pause-snapping=true]{pointer-events:none}.performance-chord-loop-bar{position:relative;min-width:0;overflow:hidden;border-left:1px solid rgb(255 255 255 / 20%);background:linear-gradient(to right,transparent 24.4%,rgb(255 255 255 / 11%) 24.4% 25.6%,transparent 25.6% 49.4%,rgb(255 255 255 / 11%) 49.4% 50.6%,transparent 50.6% 74.4%,rgb(255 255 255 / 11%) 74.4% 75.6%,transparent 75.6%),#0a090bb8}.performance-chord-loop-bar:last-child{border-right:1px solid rgb(255 255 255 / 20%)}.performance-chord-loop-bar-number{position:absolute;z-index:3;top:.06rem;left:.12rem;color:#ffffff94;font-size:clamp(.31rem,.66vw,.4rem);font-variant-numeric:tabular-nums;font-weight:680;line-height:1}.performance-chord-loop-segment{position:absolute;z-index:1;top:.43rem;bottom:.08rem;display:grid;min-width:1px;place-items:center;overflow:hidden;background:var(--brand-pink);color:var(--brand-charcoal);transition:filter .11s ease-out,opacity .18s ease-out,box-shadow .11s ease-out}.performance-chord-loop-segment.tier-inversion{background:var(--brand-pink-inversion)}.performance-chord-loop-segment.tier-sus{background:var(--brand-pink-sus)}.performance-chord-loop-segment.tier-seventh{background:var(--brand-pink-seventh)}.performance-chord-loop-segment.tier-color{background:var(--brand-haze-blue)}.performance-chord-loop-segment.tier-secondary{background:var(--brand-mint)}.performance-chord-loop-segment.tier-connector,.performance-chord-loop-segment.family-related-ii{background:repeating-linear-gradient(135deg,transparent 0 .18rem,rgb(117 205 188 / 62%) .18rem .25rem),var(--brand-haze-blue)}.performance-chord-loop-segment.family-modal{background:repeating-linear-gradient(135deg,transparent 0 .18rem,rgb(143 165 191 / 58%) .18rem .25rem),var(--brand-pink-sus)}.performance-chord-loop-bar.is-next-cycle .performance-chord-loop-segment{filter:brightness(.72);opacity:.5}.performance-chord-loop-bar.is-next-cycle .performance-chord-loop-bar-number{opacity:.48;transition:opacity .18s ease-out}.performance-chord-loop-bar.is-next-cycle.is-cycle-ready .performance-chord-loop-segment{filter:brightness(1);opacity:1}.performance-chord-loop-bar.is-next-cycle.is-cycle-ready .performance-chord-loop-bar-number{opacity:.82}.performance-chord-loop-segment-label{min-width:0;max-width:100%;overflow:hidden;padding:0 .08rem;font-family:Iowan Old Style,Palatino Linotype,Palatino,Times New Roman,serif;font-size:clamp(.54rem,1.14vw,.71rem);font-weight:780;line-height:1;text-overflow:clip;white-space:nowrap}.performance-chord-loop-playhead{position:absolute;z-index:4;top:0;bottom:0;width:2px;background:#fff3a6;box-shadow:0 0 .32rem #ffef88bd;transform:none}.global-accompaniment-context{display:grid;width:100%;max-width:100%;min-width:0;min-height:1.38rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.32rem;padding:.16rem .34rem;border-bottom:1px solid rgb(255 255 255 / 10%);background:#ffffff08;color:#ffffffc7;overflow:hidden}.global-accompaniment-label{color:#ffffff7a;font-size:clamp(.4rem,.84vw,.5rem);font-weight:650;white-space:nowrap}.global-accompaniment-context strong{min-width:0;overflow:hidden;font-size:clamp(.44rem,.94vw,.58rem);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.global-accompaniment-context output{color:inherit;font-size:clamp(.45rem,.98vw,.6rem);font-variant-numeric:tabular-nums;font-weight:760;white-space:nowrap}.melody-control-card[data-accompaniment-enabled=false] .global-accompaniment-context{color:#ffffff94}.duet-settings-toggle{display:grid;width:1.58rem;height:1.26rem;padding:.18rem .28rem;place-items:center;border-radius:.28rem;background:#ffffff14;color:#ffffffa8;touch-action:manipulation}.duet-settings-toggle svg{width:100%;height:100%;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.duet-settings-toggle[aria-expanded=true]{background:var(--brand-pink);color:var(--brand-charcoal)}#duet-performance-settings{display:grid;width:100%;max-width:100%;min-width:0;overflow:hidden}.chord-loop-controls{display:grid;min-width:0}.auto-accompaniment-controls{display:grid;grid-template-columns:minmax(3.4rem,.72fr) minmax(4.8rem,1fr) minmax(6.8rem,1.45fr);align-items:center;gap:.1rem .14rem;padding:.14rem .18rem}.auto-accompaniment-transport{display:grid;min-width:0;min-height:1.42rem;place-items:stretch}.auto-accompaniment-prompt{display:grid;min-width:0;min-height:1.42rem;padding:.08rem .28rem;place-items:center;color:#ffffff9e;font-size:clamp(.46rem,.98vw,.6rem);font-weight:680;line-height:1;text-align:center;white-space:nowrap}.auto-accompaniment-style{display:grid;min-width:0;height:1.42rem;min-height:1.42rem;padding:.08rem .28rem;place-items:center;border:1px solid rgb(255 255 255 / 14%);border-radius:.38rem;background:var(--surface-raised);color:var(--brand-warm-white);text-align:center;touch-action:manipulation}.auto-accompaniment-style em{color:var(--brand-pink);font-size:clamp(.5rem,1.05vw,.64rem);font-style:normal;font-weight:760}.auto-accompaniment-style[aria-pressed=true]{border-color:color-mix(in oklch,var(--brand-pink) 72%,transparent);background:color-mix(in oklch,var(--brand-pink) 18%,var(--surface-raised))}.auto-accompaniment-prompt[hidden],.auto-accompaniment-style[hidden]{display:none}.auto-accompaniment-beats{display:grid;grid-template-columns:repeat(4,1fr);gap:.13rem}.global-transport-beats{width:2.8rem;flex:0 0 2.8rem;margin-left:auto;align-self:center}.auto-accompaniment-beats i{position:relative;aspect-ratio:1;border:1px solid rgb(255 255 255 / 12%);border-radius:50%;background:#fff3}.auto-accompaniment-beats i.is-active{border-color:#ffffff7a;background:var(--brand-pink)}.auto-accompaniment-editor-toggle{display:flex;min-width:0;height:1.42rem;align-items:center;justify-content:space-between;gap:.3rem;width:100%;min-height:1.42rem;padding:.08rem .34rem;border:1px solid rgb(255 255 255 / 14%);border-radius:.38rem;background:var(--surface-raised);color:#ffffffb8;font-size:clamp(.46rem,.98vw,.6rem);font-weight:680;text-align:left;touch-action:manipulation}.auto-accompaniment-editor-toggle svg{width:.72rem;height:.72rem;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .16s ease}.auto-accompaniment-editor-toggle[aria-expanded=true]{background:color-mix(in oklch,var(--brand-pink) 16%,transparent);color:var(--brand-warm-white)}.auto-accompaniment-editor-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.auto-accompaniment-editor{position:absolute;z-index:20;top:calc(100% + .34rem);right:calc(var(--auto-accompaniment-editor-right, 0px) + .42rem);left:0;display:grid;grid-template-rows:minmax(0,1fr);max-width:none;max-height:var(--floating-menu-max-height, none);overflow:hidden;border:1px solid rgb(255 255 255 / 24%);border-radius:.55rem;background:#161217;box-shadow:0 .55rem 1.35rem #00000075;-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem);transition:left .18s cubic-bezier(.2,.75,.3,1)}.melody-control-card.has-open-settings .auto-accompaniment-editor{left:calc(50% + .34rem)}.auto-accompaniment-editor-scroll,.duet-settings-scroll{display:grid;min-width:0;min-height:0;grid-auto-rows:max-content;align-content:start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}.auto-accompaniment-editor-scroll::-webkit-scrollbar,.duet-settings-scroll::-webkit-scrollbar{display:none}.floating-menu-scroll-fade{position:absolute;z-index:4;right:0;left:0;height:clamp(1.15rem,4.5vh,1.9rem);opacity:0;pointer-events:none;transition:opacity .14s ease}.floating-menu-scroll-fade:after{position:absolute;left:50%;width:1.2rem;height:.24rem;content:"";filter:drop-shadow(0 .08rem .14rem rgb(0 0 0 / 48%));transform:translate(-50%)}.floating-menu-scroll-fade.is-top{top:0;border-radius:.5rem .5rem 0 0;background:linear-gradient(to bottom,rgb(0 0 0 / 88%),transparent)}.floating-menu-scroll-fade.is-top:after{top:.2rem;background:linear-gradient(to bottom,var(--brand-pink),transparent);clip-path:polygon(50% 0,100% 100%,0 100%)}.floating-menu-scroll-fade.is-bottom{bottom:0;border-radius:0 0 .5rem .5rem;background:linear-gradient(to bottom,transparent,rgb(0 0 0 / 88%))}.floating-menu-scroll-fade.is-bottom:after{bottom:.2rem;background:linear-gradient(to top,var(--brand-pink),transparent);clip-path:polygon(0 0,100% 0,50% 100%)}:is(.duet-settings-popover,.auto-accompaniment-editor).has-scroll-above>.floating-menu-scroll-fade.is-top{opacity:1}:is(.duet-settings-popover,.auto-accompaniment-editor).has-scroll-below>.floating-menu-scroll-fade.is-bottom{opacity:1}.auto-accompaniment-preset-bar{display:flex;min-width:0;align-items:center;gap:.22rem;padding:.34rem .4rem 0}.floating-menu-heading{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:.3rem;padding:.2rem .28rem .08rem .4rem}.floating-menu-close{display:grid;width:1.18rem;height:1.18rem;flex:0 0 1.18rem;padding:0;place-items:center;border:1px solid rgb(255 255 255 / 14%);border-radius:50%;background:#ffffff12;color:#ffffff9e;font:650 .76rem/1 system-ui,sans-serif;touch-action:manipulation}.floating-menu-close:is(:hover,:focus-visible){border-color:#ffb5d47a;background:#ffb5d424;color:var(--brand-warm-white)}.auto-accompaniment-preset-switch{display:grid;min-width:0;flex:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:.16rem;padding:.12rem;border-radius:.34rem;background:#ffffff12}.auto-accompaniment-preset-switch button,.auto-accompaniment-preset-reset{min-width:0;height:1.42rem;padding:0 .26rem;border:0;border-radius:.26rem;background:transparent;color:#ffffff9e;font:650 clamp(.38rem,.82vw,.5rem) / 1 system-ui,sans-serif;white-space:nowrap;touch-action:manipulation}.auto-accompaniment-preset-switch button[aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.auto-accompaniment-preset-reset{flex:0 0 auto;align-self:center;border:1px solid rgb(255 181 212 / 34%);color:var(--brand-pink)}.auto-accompaniment-preset-reset[hidden]{display:none}.auto-accompaniment-sequencer-section{display:grid;gap:.22rem;padding:.34rem .4rem .4rem;container:accompaniment-sequencer / inline-size}.auto-accompaniment-sequencer-section>strong{color:#ffffffd1;font-size:clamp(.46rem,.95vw,.6rem)}.auto-accompaniment-sequencer{--sequencer-cell-gap: .5cqi;display:grid;min-width:0;aspect-ratio:2.18 / 1;grid-template-columns:1fr .1fr .34fr repeat(8,1fr);grid-template-rows:.35fr repeat(4,1fr);gap:var(--sequencer-cell-gap);align-items:stretch}.auto-accompaniment-start-label,.auto-accompaniment-step-label,.auto-accompaniment-voice-label{display:grid;min-width:0;min-height:0;place-items:center;overflow:hidden;color:#ffffff8a;font-size:clamp(.3rem,2.2cqi,.48rem);line-height:1}.auto-accompaniment-voice-label{justify-content:start}.auto-accompaniment-step-label.is-current{border-radius:.18rem;background:#ffffff1a;color:var(--brand-warm-white)}.auto-accompaniment-start-note,.auto-accompaniment-pattern-note{width:100%;height:100%;min-width:0;min-height:0;padding:0;border:1px solid rgb(255 255 255 / 14%);border-radius:.24rem;background:#ffffff12;touch-action:manipulation}.auto-accompaniment-start-note[aria-pressed=true],.auto-accompaniment-pattern-note[aria-pressed=true]{border-color:color-mix(in oklch,var(--brand-pink) 78%,transparent);background:color-mix(in oklch,var(--brand-pink) 68%,var(--surface-raised))}.auto-accompaniment-pattern-note.is-current:not([aria-pressed=true]){background:#ffffff1f}.auto-accompaniment-start-note.is-triggered,.auto-accompaniment-pattern-note.is-triggered{animation:auto-accompaniment-note-glow .52s ease-out}@keyframes auto-accompaniment-note-glow{0%{filter:brightness(1.78);box-shadow:0 0 .5rem color-mix(in oklch,var(--brand-pink) 88%,transparent)}24%{filter:brightness(1.5);box-shadow:0 0 .42rem color-mix(in oklch,var(--brand-pink) 66%,transparent)}to{filter:brightness(1);box-shadow:0 0 0 transparent}}.auto-accompaniment-editor-controls{display:grid;gap:.28rem;padding:.36rem .4rem .4rem;border-top:1px solid rgb(255 255 255 / 10%)}.auto-accompaniment-drum-setting,.auto-accompaniment-swing-setting{display:grid;min-width:0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.3rem;color:#ffffff9e;font-size:clamp(.4rem,.86vw,.52rem)}.auto-accompaniment-drum-setting .custom-select{grid-column:2 / -1}.auto-accompaniment-drum-setting .custom-select-trigger{min-width:0;height:1.35rem;padding:0 1.1rem 0 .28rem;border:1px solid rgb(255 255 255 / 15%);border-radius:.28rem;background-color:#272228;color:var(--brand-warm-white);font:inherit}.auto-accompaniment-drum-setting .custom-select-trigger:focus-visible{border-color:#ffb5d4a3;outline:1px solid rgb(255 181 212 / 30%);outline-offset:1px}.auto-accompaniment-tempo-controls{display:grid;min-width:0;grid-template-columns:minmax(0,2fr) minmax(3.5rem,1fr);gap:.22rem}.auto-accompaniment-tempo-wheel{position:relative;display:grid;min-width:0;height:2.25rem;overflow:hidden;place-items:center;border:1px solid rgb(255 255 255 / 15%);border-radius:.34rem;background:#ffffff12;color:var(--brand-warm-white);touch-action:pan-y;transition:filter 90ms ease-out,transform 90ms ease-out,box-shadow 90ms ease-out}.auto-accompaniment-tempo-wheel *,.auto-accompaniment-swing-slider *{touch-action:pan-y}.auto-accompaniment-tempo-wheel:not(:disabled)[data-pressed=true]{filter:brightness(.9);transform:translateY(1px) scale(.985);transition-duration:45ms;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 0 .6rem #0000003d}.auto-accompaniment-tempo-wheel:before,.auto-accompaniment-tempo-wheel:after{position:absolute;z-index:2;top:0;bottom:0;width:24%;content:"";pointer-events:none}.auto-accompaniment-tempo-wheel:before{left:0;background:linear-gradient(90deg,rgb(13 11 14 / 78%),transparent)}.auto-accompaniment-tempo-wheel:after{right:0;background:linear-gradient(270deg,rgb(13 11 14 / 78%),transparent)}.auto-accompaniment-tempo-wheel:not(:disabled)[data-dragging=true]{border-color:#ffb5d485;background:#ffb5d41a;filter:brightness(.9);transform:translateY(1px) scale(.985);transition-duration:45ms;box-shadow:inset 0 0 0 1px #ffb5d41f,0 0 .5rem #ff81b729}.auto-accompaniment-tempo-track{position:absolute;top:.24rem;bottom:.2rem;left:50%;display:flex;align-items:end;will-change:transform}.auto-accompaniment-tempo-track.is-animated{transition:transform .18s cubic-bezier(.2,.72,.2,1)}.auto-accompaniment-tempo-tick{position:relative;width:.72rem;height:.42rem;flex:0 0 .72rem;border-left:1px solid rgb(255 255 255 / 30%)}.auto-accompaniment-tempo-tick.is-major{height:.7rem;border-left-color:#ffffff85}.auto-accompaniment-tempo-marker{position:absolute;z-index:2;top:.2rem;bottom:.2rem;left:50%;border-left:1px solid var(--brand-pink);pointer-events:none}.auto-accompaniment-tempo-wheel output{position:relative;z-index:3;display:grid;gap:.02rem;padding:.11rem .3rem .1rem;border-radius:.24rem;background:#161217db;color:var(--brand-warm-white);font-size:clamp(.58rem,1.25vw,.76rem);font-weight:760;line-height:1}.auto-accompaniment-tempo-hint{display:block;color:#ffffff94;font-size:clamp(.36rem,.72vw,.44rem);font-weight:560;letter-spacing:.02em;white-space:nowrap}.auto-accompaniment-tap-tempo{min-width:0;border:1px solid rgb(255 255 255 / 15%);border-radius:.34rem;background:#ffffff14;color:var(--brand-warm-white);font:700 clamp(.4rem,.85vw,.52rem) / 1 system-ui,sans-serif;touch-action:manipulation}.auto-accompaniment-swing-slider{position:relative;display:block;width:100%;min-width:0;height:1.35rem;padding:0 .44rem;background:transparent;touch-action:pan-y;transition:filter .16s ease,opacity .16s ease}.auto-accompaniment-swing-rail{position:relative;display:block;width:100%;height:.22rem;overflow:visible;border-radius:999px;background:#ffffff29}.auto-accompaniment-swing-fill{position:absolute;inset:0 auto 0 0;width:var(--auto-accompaniment-swing-position, 0%);border-radius:inherit;background:var(--brand-pink)}.auto-accompaniment-swing-thumb{position:absolute;top:50%;left:var(--auto-accompaniment-swing-position, 0%);width:.72rem;height:.72rem;border:1px solid rgb(255 255 255 / 54%);border-radius:50%;background:var(--brand-pink);box-shadow:0 .12rem .32rem #00000061;transform:translate(-50%,-50%)}.auto-accompaniment-swing-setting.is-fixed .auto-accompaniment-swing-slider{cursor:not-allowed;filter:grayscale(1);opacity:.34}.auto-accompaniment-swing-setting.is-fixed>span{color:#ffffff61}.auto-accompaniment-swing-setting output{min-width:2.2rem;color:var(--brand-warm-white);text-align:right}.auto-accompaniment-anticipation-setting{padding-inline:0}@media(prefers-reduced-motion:reduce){.auto-accompaniment-start-note.is-triggered,.auto-accompaniment-pattern-note.is-triggered{animation-duration:1ms}.auto-accompaniment-tempo-track.is-animated,.auto-accompaniment-tempo-wheel,.performance-chord-loop-track.is-snapping,.performance-chord-loop-track.is-pause-snapping,.performance-chord-loop-track.is-pause-snapping .performance-chord-loop-playhead{transition-duration:1ms}}.chord-loop-control-grid{display:grid;min-width:0;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:.1rem;padding:.18rem}.chord-loop-field{display:block;min-width:0;color:#ffffff94;font-size:clamp(.39rem,.84vw,.5rem)}.chord-loop-bars-control{display:flex;min-width:0;gap:.1rem}.chord-loop-bars-control .custom-select{min-width:0;flex:1 1 auto}.chord-loop-bars-control input:not([hidden]){width:min(3.4rem,46%);flex:0 0 min(3.4rem,46%)}.chord-loop-bars-control:has(input:not([hidden])) .custom-select-value{display:none}.chord-loop-field input,.chord-loop-field .custom-select-trigger,.chord-loop-action{width:100%;min-width:0;height:1.55rem;padding:0 .3rem;border:0;border-radius:.28rem;background:var(--surface-raised);color:#ffffffd6;font:inherit;font-size:clamp(.43rem,.94vw,.58rem);font-variant-numeric:tabular-nums;text-align:center;touch-action:manipulation}.chord-loop-action{align-self:end;cursor:pointer}.chord-loop-action[aria-pressed=true]{background:color-mix(in oklch,var(--brand-pink) 76%,var(--brand-charcoal));color:var(--brand-warm-white)}.chord-loop-action.is-record[aria-pressed=true]{background:#d64f61}.chord-loop-action.is-play[aria-pressed=true]{background:var(--brand-mint);color:var(--brand-charcoal)}.chord-loop-timeline-card{position:absolute;z-index:7;top:var(--chord-loop-timeline-top, 7.2rem);left:.42rem;width:min(80%,30rem);height:clamp(2.8rem,12%,3.5rem);overflow:hidden;border:1px solid rgb(255 255 255 / 20%);border-radius:.55rem;background:#141115f0;box-shadow:0 .45rem 1.25rem #00000057;-webkit-backdrop-filter:blur(.7rem);backdrop-filter:blur(.7rem);pointer-events:none;transition:height .16s ease}.chord-loop-timeline-card.is-multi-row{height:clamp(4.4rem,18%,5.8rem)}.chord-loop-timeline-card.is-four-row{height:clamp(7.6rem,32%,10.4rem)}.chord-loop-timeline-header{display:flex;height:1.2rem;align-items:center;justify-content:space-between;padding:0 .36rem;border-bottom:1px solid rgb(255 255 255 / 12%);color:#ffffffad;font-size:clamp(.43rem,.92vw,.56rem)}.chord-loop-timeline-header strong{color:#ffffffd6;font-weight:680}.chord-loop-timeline-header output{font-variant-numeric:tabular-nums}.chord-loop-timeline-viewport{width:100%;height:calc(100% - 1.2rem);overflow:hidden;pointer-events:auto;touch-action:none}.chord-loop-timeline-card:not(.is-seekable) .chord-loop-timeline-viewport{pointer-events:none}.chord-loop-timeline-card.is-seekable .chord-loop-timeline-row{cursor:pointer}.chord-loop-timeline-content{position:relative;display:grid;width:100%;height:100%;background:#141216;transition:transform .15s ease-out;will-change:transform}.chord-loop-timeline-row{position:relative;min-height:0;overflow:hidden;border-bottom:1px solid rgb(255 255 255 / 13%)}.chord-loop-timeline-row:last-child{border-bottom:0}.chord-loop-grid,.chord-loop-events{position:absolute;inset:0}.chord-loop-grid-line{position:absolute;z-index:0;top:0;bottom:0;width:1px;background:#ffffff1c}.chord-loop-grid-line.is-bar{width:2px;background:#ffffff47}.chord-loop-event{position:absolute;z-index:1;top:0;bottom:0;display:flex;min-width:0;align-items:center;justify-content:center;padding:0 .34rem;overflow:hidden;border-radius:.22rem;background:var(--brand-pink);box-shadow:0 .16rem .38rem #00000052;color:var(--brand-charcoal)}.chord-loop-event.tier-inversion{background:var(--brand-pink-inversion)}.chord-loop-event.tier-sus{background:var(--brand-pink-sus)}.chord-loop-event.tier-seventh{background:var(--brand-pink-seventh)}.chord-loop-event.tier-color{background:var(--brand-haze-blue)}.chord-loop-event.tier-secondary{background:var(--brand-mint)}.chord-loop-event.tier-connector{background:repeating-linear-gradient(135deg,transparent 0 .4rem,var(--brand-mint) .4rem .54rem),var(--brand-haze-blue)}.chord-loop-event.family-related-ii{background:repeating-linear-gradient(135deg,transparent 0 .4rem,var(--brand-mint) .4rem .54rem),color-mix(in oklch,var(--brand-mint) 58%,var(--brand-warm-white))}.chord-loop-event.family-modal{background:repeating-linear-gradient(135deg,transparent 0 .4rem,var(--brand-haze-blue) .4rem .54rem),var(--brand-pink-sus)}.chord-loop-event-label{min-width:0;overflow:hidden;font-family:Iowan Old Style,Palatino Linotype,Palatino,Times New Roman,serif;font-size:clamp(.93rem,2.13vw,1.29rem);font-weight:760;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chord-loop-playhead{position:absolute;z-index:4;top:0;bottom:0;width:2px;background:#fff3a6;box-shadow:0 0 .45rem #ffef88bd;pointer-events:none;transform:none}.chord-loop-playhead:before{position:absolute;top:0;left:0;width:0;height:0;border-top:.36rem solid #fff3a6;border-right:.48rem solid transparent;border-left:0;content:"";transform:none}.chord-loop-timeline-card.is-editing .chord-loop-playhead{top:0;bottom:0;box-sizing:border-box;width:var(--chord-loop-edit-range);border:2px dashed #fff3a6;border-radius:.18rem;background:#fff3a61f;box-shadow:0 0 .48rem #ffef888f,inset 0 0 .32rem #ffef882e}.chord-loop-timeline-card.is-editing .chord-loop-playhead:before{content:none}.chord-loop-timeline-card.is-editing.is-scrubbing .chord-loop-playhead{width:2px;border:0;border-radius:0;background:#fff3a6;box-shadow:0 0 .45rem #ffef88bd}.chord-loop-timeline-card.is-editing.is-scrubbing .chord-loop-playhead:before{content:""}.chord-loop-snap-ghost{position:absolute;z-index:3;top:0;bottom:0;width:2px;background:#fff3a6;box-shadow:0 0 .36rem #ffef886b;opacity:.34;pointer-events:none}.chord-loop-snap-ghost[hidden]{display:none!important}.chord-loop-snap-ghost:before{position:absolute;top:0;left:0;width:0;height:0;border-top:.36rem solid #fff3a6;border-right:.48rem solid transparent;border-left:0;content:""}.chord-loop-timeline-card.is-editing .chord-loop-snap-ghost{box-sizing:border-box;width:var(--chord-loop-snap-range);border:2px dashed rgb(255 243 166 / 72%);border-radius:.18rem;background:#fff3a61a;box-shadow:0 0 .4rem #ffef8852,inset 0 0 .28rem #ffef881f;opacity:.58}.chord-loop-timeline-card.is-editing .chord-loop-snap-ghost:before{content:none}.chord-loop-ruler{position:absolute;z-index:2;inset:0;pointer-events:none}.chord-loop-bar-number{position:absolute;bottom:.1rem;padding:.02rem .16rem;border-radius:.18rem;background:#1411159e;color:#ffffffad;font-size:clamp(.38rem,.8vw,.48rem);font-variant-numeric:tabular-nums;line-height:1.15;-webkit-backdrop-filter:blur(.18rem);backdrop-filter:blur(.18rem)}.chord-loop-edit-controls{position:absolute;z-index:8;left:.5rem;right:.5rem;bottom:.5rem;display:grid;min-width:0;gap:.18rem;padding:0;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.chord-loop-transport-controls,.chord-loop-cursor-controls{display:grid;gap:.18rem;pointer-events:auto}.chord-loop-transport-controls{grid-template-columns:repeat(4,2.4rem);width:max-content;justify-self:end}.chord-loop-cursor-controls{width:100%;grid-template-columns:minmax(0,1fr) repeat(2,minmax(2.25rem,3rem));align-items:end}.chord-loop-playhead-wheel-shell{min-width:0;height:2.05rem}.chord-loop-edit-controls button{min-width:0;height:1.65rem;padding:0 .32rem;border-radius:.3rem;background:var(--surface-raised);color:#ffffffc2;font:inherit;font-size:clamp(.46rem,1vw,.6rem);font-weight:680;touch-action:manipulation}.chord-loop-edit-controls button[aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.chord-loop-playhead-wheel{position:relative;display:flex;min-width:0;width:100%;height:100%!important;padding:0!important;overflow:hidden;align-items:center;justify-content:center;gap:.4rem;border:1px solid rgb(255 255 255 / 16%);background:#141115f0!important;touch-action:pan-y!important;transition:border-color .1s ease-out,filter .1s ease-out,box-shadow .1s ease-out,transform .1s ease-out}.chord-loop-playhead-wheel *{touch-action:pan-y}.chord-loop-playhead-wheel:before,.chord-loop-playhead-wheel:after{position:absolute;z-index:2;top:0;bottom:0;width:24%;content:"";pointer-events:none}.chord-loop-playhead-wheel:before{left:0;background:linear-gradient(90deg,rgb(13 11 14 / 90%),transparent)}.chord-loop-playhead-wheel:after{right:0;background:linear-gradient(270deg,rgb(13 11 14 / 90%),transparent)}.chord-loop-playhead-wheel:not(:disabled)[data-pressed=true],.chord-loop-playhead-wheel:not(:disabled)[data-dragging=true]{border-color:#ffb5d494;filter:brightness(.94);transform:translateY(1px) scale(.99);box-shadow:inset 0 0 0 1px #ffb5d424,0 0 .52rem #ff81b733}.chord-loop-playhead-wheel[data-inertia=true]{border-color:#b3ffe17a;box-shadow:0 0 .58rem #85ffcf2e}.chord-loop-playhead-wheel-grip{position:relative;z-index:3;display:flex;align-items:center;gap:.12rem;pointer-events:none}.chord-loop-playhead-wheel-grip i{width:.12rem;height:.8rem;border-radius:999px;background:#ffffff6b;box-shadow:0 0 .2rem #ffffff1a}.chord-loop-playhead-wheel-label{position:relative;z-index:3;color:#ffffffb8;font-size:clamp(.42rem,.88vw,.54rem);font-weight:680;letter-spacing:.02em;pointer-events:none;white-space:nowrap}#chord-loop-edit,#chord-loop-erase{display:inline-flex;gap:.22rem;align-items:center;justify-content:center}.chord-loop-control-icon{display:inline-block;width:1em;height:1em;font-size:clamp(.72rem,1.45vw,.94rem);line-height:1;vertical-align:middle}svg.chord-loop-control-icon{fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}svg.chord-loop-control-icon [data-stop-icon][hidden]{display:none}#chord-loop-erase .chord-loop-control-icon,.chord-loop-edit-controls .is-record .chord-loop-control-icon{color:#ef6574}.chord-loop-edit-controls .is-record[aria-pressed=true]{background:#d64f61;color:var(--brand-warm-white)}.chord-loop-edit-controls .is-record[aria-pressed=true] .chord-loop-control-icon{color:currentcolor}.chord-loop-edit-controls .is-play[aria-pressed=true]{background:var(--brand-mint);color:var(--brand-charcoal)}.chord-loop-edit-controls .is-stop.is-running{background:color-mix(in oklch,var(--brand-haze-blue) 62%,var(--surface-raised));color:var(--brand-warm-white)}.chord-loop-edit-controls button:disabled{opacity:.35}.melody-control-card .tone-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.24rem;padding:.22rem;overflow:hidden;border:0;background:transparent;touch-action:auto}.melody-control-card .tone-menu.is-single{grid-template-columns:minmax(0,1fr)}.melody-control-card .tone-field[hidden],.duet-settings-popover .duet-toggle-setting[hidden],.strum-sustain-setting[hidden]{display:none}.strum-sustain-setting{display:grid;min-width:0;gap:.16rem;padding:.18rem .22rem;border-bottom:1px solid rgb(255 255 255 / 12%);color:#ffffff9e;font-size:clamp(.42rem,.9vw,.56rem)}.strum-sustain-switch{display:grid;width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:.14rem;padding:.12rem;border-radius:.34rem;background:#ffffff12}.strum-sustain-switch button{min-width:0;height:1.55rem;padding:0 .28rem;border:0;border-radius:.26rem;background:transparent;color:#ffffff94;font:inherit;font-weight:650;touch-action:manipulation}.strum-sustain-switch button[hidden]{display:none}.strum-sustain-switch:not([data-has-infinite=true]) button[data-strum-sustain=natural]{grid-column:span 2}.strum-sustain-switch button[aria-pressed=true]{background:var(--brand-mint);color:var(--brand-charcoal)}.melody-control-card .tone-field{display:grid;width:auto;min-width:0;grid-template-columns:auto minmax(0,1fr);gap:.18rem;font-size:clamp(.4rem,.85vw,.52rem)}.melody-control-card .tone-field .custom-select-trigger{height:1.38rem;padding:0 1rem 0 .25rem;font-size:clamp(.42rem,.92vw,.56rem)}.melody-control-card .transpose-panel{width:100%;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(2.4rem,1.5fr) repeat(2,minmax(0,1fr));gap:.18rem;padding:.2rem .22rem;overflow:hidden;border:0;border-top:0;border-bottom:0;background:transparent}.melody-control-card .transpose-panel button,.melody-control-card .key-wheel .custom-select-trigger{overflow:hidden;height:1.48rem;border-radius:.3rem;font-size:clamp(.46rem,1vw,.6rem)}.melody-control-card .transpose-panel [data-melody-octave]{font-size:clamp(.42rem,.9vw,.54rem);letter-spacing:-.02em}@container melody-controls (max-width: 15rem){.melody-control-card .transpose-panel{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(2.4rem,1.5fr) repeat(2,minmax(0,1fr));gap:.1rem;padding-inline:.14rem}.global-accompaniment-context{grid-template-columns:minmax(0,1fr) auto;gap:.18rem;padding-inline:.22rem}.global-accompaniment-label{display:none}.auto-accompaniment-controls{grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,1.45fr)}.auto-accompaniment-prompt{overflow:hidden;text-overflow:ellipsis}}.chord-notation-panel{display:flex;min-width:0;min-height:1.7rem;gap:.35rem;align-items:center;justify-content:space-between;padding:.18rem .22rem;border-bottom:1px solid rgb(255 255 255 / 12%);color:#ffffff9e;font-size:clamp(.42rem,.9vw,.56rem)}.chord-notation-switch{display:grid;min-width:9.6rem;grid-template-columns:repeat(3,minmax(0,1fr));gap:.14rem;padding:.12rem;border-radius:.34rem;background:#ffffff12}.chord-notation-switch button{min-width:0;height:1.25rem;padding:0 .35rem;border:0;border-radius:.26rem;background:transparent;color:#ffffff94;font:inherit;font-weight:650;touch-action:manipulation}.chord-notation-switch button[aria-pressed=true]{background:var(--brand-pink);color:var(--brand-charcoal)}.duet-settings-popover{position:absolute;z-index:20;top:calc(100% + .34rem);left:0;display:grid;grid-template-rows:minmax(0,1fr);width:50%;min-width:7.5rem;max-height:var(--floating-menu-max-height, none);overflow:hidden;border:1px solid rgb(255 255 255 / 24%);border-radius:.55rem;background:#161217;box-shadow:0 .55rem 1.35rem #00000075;-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.duet-settings-title{min-width:0;padding:0;color:#ffffffd1;font-size:clamp(.48rem,1vw,.62rem);letter-spacing:.04em}.duet-settings-popover .tone-menu{grid-template-columns:minmax(0,1fr);gap:.14rem;padding:.12rem .22rem .18rem}.duet-settings-popover .tone-field{grid-template-columns:auto minmax(0,1fr);gap:.08rem}.duet-settings-popover .tone-field .custom-select-trigger{height:1.24rem}.duet-settings-popover .chord-notation-panel{display:grid;min-height:0;justify-content:stretch;gap:.1rem;padding-block:.12rem;border-top:1px solid rgb(255 255 255 / 12%)}.duet-settings-popover .chord-notation-switch{width:100%;min-width:0;padding:.08rem}.duet-settings-popover .chord-notation-switch button{height:1.1rem}.duet-toggle-setting{display:grid;width:100%;min-width:0;min-height:1.8rem;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.12rem .4rem;border:0;border-top:1px solid rgb(255 255 255 / 8%);border-radius:0;background:transparent;color:#ffffffdb;cursor:pointer;font:inherit;text-align:left;touch-action:manipulation}.duet-toggle-setting:not(:disabled):is(:active,[data-pressed=true]){transform:none;filter:none;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff14}.duet-toggle-copy{display:block;min-width:0;color:#ffffff9e;font-size:clamp(.42rem,.9vw,.56rem);font-weight:400}.settings-switch-track{position:relative;display:block;width:1.72rem;height:.96rem;padding:.1rem;border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:color-mix(in oklch,var(--brand-charcoal) 78%,var(--brand-warm-white));transition:background .12s ease,border-color .12s ease}.settings-switch-track span{display:block;width:.62rem;height:.62rem;border-radius:50%;background:#ffffffb8;box-shadow:0 .1rem .24rem #00000057;transform:translate(0);transition:background .12s ease,transform .12s ease}.duet-toggle-setting[aria-checked=true] .settings-switch-track{border-color:color-mix(in oklch,var(--brand-pink) 78%,var(--brand-warm-white));background:var(--brand-pink)}.duet-toggle-setting[aria-checked=true] .settings-switch-track span{background:var(--brand-warm-white);transform:translate(.7rem)}.duet-toggle-setting:focus-visible .settings-switch-track{outline:2px solid var(--brand-warm-white);outline-offset:2px}#chord-surface[data-chord-notation] .pop-chord-hint{display:none}#chord-surface[data-chord-notation=roman] :is(.pop-chord-symbol,.pop-chord-numeric),#chord-surface[data-chord-notation=symbol] :is(.pop-chord-roman,.pop-chord-numeric),#chord-surface[data-chord-notation=numeric] :is(.pop-chord-roman,.pop-chord-symbol){display:none}#chord-surface[data-chord-notation=roman] .pop-chord-roman,#chord-surface[data-chord-notation=symbol] .pop-chord-symbol,#chord-surface[data-chord-notation=numeric] .pop-chord-numeric{display:inline-block;width:max-content;max-width:none;margin:0;overflow:visible;text-overflow:clip;opacity:1}#chord-surface[data-chord-notation=symbol] .pop-chord-symbol{font-size:clamp(.64rem,1.8vw,.96rem);font-weight:680;letter-spacing:-.015em}#chord-surface[data-chord-notation=symbol] .tier-core .pop-chord-symbol{font-size:clamp(.82rem,2.35vw,1.18rem)}#chord-surface[data-chord-notation=roman] .tier-sus .pop-chord-roman,#chord-surface[data-chord-notation=numeric] .tier-sus .pop-chord-numeric{display:inline-block}.roman-quality-marker{position:relative;top:-.06em;display:inline-block;margin-inline:.02em;font-size:.72em;font-weight:720}.numeric-quality-marker{position:relative;top:-.14em;display:inline-block;margin-inline-start:.025em;font-size:.62em;font-weight:720;letter-spacing:-.025em}.numeric-bass-degree{display:inline-block;margin-inline-start:.02em;font-size:.86em}.roman-accidental{display:inline-block}.roman-accidental.is-flat{margin-inline:-.24em}.roman-accidental.is-flat.is-leading{margin-inline-start:0}.melody-control-card .panel-badge{min-height:1.35rem;padding:.2rem .32rem;border:0;background:transparent}.melody-control-card .panel-badge h2{font-size:clamp(.52rem,1.1vw,.68rem)}.melody-control-card .panel-badge output{font-size:clamp(.44rem,.95vw,.58rem)}.melody-panel>.melody-surface{position:absolute;inset:0;border-radius:.5rem;background:radial-gradient(circle at 76% 28%,rgb(255 255 255 / 86%),transparent 34%),radial-gradient(circle at 28% 82%,color-mix(in oklch,var(--brand-charcoal) 4%,transparent),transparent 42%),var(--brand-warm-white);container-type:size}.melody-panel .melody-lane{position:absolute;inset:0;display:block;width:auto;height:auto;overflow:visible;transform:none}.melody-panel .melody-lane:after{content:none}.melody-panel .strum-lane{position:absolute;z-index:1;inset:0;display:none;grid-template-columns:repeat(13,minmax(0,1fr));overflow:hidden;background:linear-gradient(90deg,rgb(255 255 255 / 58%),transparent 34%),color-mix(in oklch,var(--brand-warm-white) 94%,var(--brand-charcoal))}.melody-surface.is-strum-mode .melody-lane{display:none}.melody-surface.is-strum-mode .strum-lane{display:grid}.melody-panel .strum-stop-button{position:absolute;z-index:7;top:.55rem;right:.62rem;min-width:6.6rem;min-height:4.5rem;padding:.6rem 1rem;border:1px solid rgb(255 255 255 / 46%);border-radius:999px;background:#1a1a1ce0;box-shadow:0 .32rem .8rem #00000040;color:var(--brand-warm-white);font-size:clamp(.68rem,1.5vw,.82rem);font-weight:760;touch-action:manipulation}.melody-panel .strum-stop-button:not(:disabled):active{background:var(--brand-pink);color:var(--brand-charcoal);transform:scale(.96)}.melody-panel .strum-stop-button:disabled{opacity:.38}.melody-panel .strum-zone{position:relative;min-width:0;min-height:0;background:transparent}.melody-panel .strum-string-visual{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.melody-panel :is(.strum-string-static,.strum-string-wave){fill:none;vector-effect:non-scaling-stroke}.melody-panel .strum-string-static{stroke:#1a1a1c6b;stroke-width:1;transition:stroke-width 45ms ease,stroke 45ms linear}.melody-panel .strum-string-wave{display:none;stroke:var(--brand-pink);stroke-linecap:round}.melody-panel .strum-string-wave.is-main{stroke-width:1.35}.melody-panel .strum-zone.is-root .strum-string-static{stroke:#1a1a1cb8;stroke-width:3}.melody-panel .strum-zone.is-active .strum-string-static{display:none}.melody-panel .strum-zone.is-active .strum-string-wave{display:block}.melody-panel .strum-zone.is-active.is-root .strum-string-wave.is-main{stroke-width:3}.melody-panel .strum-zone.is-pressed .strum-string-static,.melody-panel .strum-zone.is-pressed .strum-string-wave.is-main{stroke-width:2.2}.melody-panel .strum-zone.is-pressed.is-root .strum-string-static,.melody-panel .strum-zone.is-pressed.is-root .strum-string-wave.is-main{stroke-width:4}.melody-panel .strum-zone.is-transitioning .strum-string-visual{opacity:0}.melody-panel .strum-transition-layer{position:absolute;z-index:2;inset:0;pointer-events:none}.melody-panel .strum-transition-string{position:absolute;top:0;bottom:0;width:calc(100% / 13);transform:translate(-50%)}.melody-panel .strum-transition-string.is-root .strum-string-static{stroke:#1a1a1cb8;stroke-width:3}.melody-panel .strum-transition-string.is-sounding .strum-string-static{display:none}.melody-panel .strum-transition-string.is-sounding .strum-string-wave{display:block;filter:blur(1.1px);stroke-width:.85}.melody-panel .strum-transition-string.is-active .strum-string-static{display:none}.melody-panel .strum-transition-string.is-active .strum-string-wave{display:block}.melody-panel .strum-transition-string.is-active.is-root .strum-string-wave{stroke-width:3}.melody-panel .strum-zone.is-active .strum-string-visual,.melody-panel .strum-transition-string:is(.is-active,.is-sounding) .strum-string-visual{animation:strum-string-vibrate 58ms linear infinite}@keyframes strum-string-vibrate{0%,to{transform:translate(0)}25%{transform:translate(-.65px)}75%{transform:translate(.65px)}}@media(prefers-reduced-motion:reduce){.melody-panel .strum-string-visual{animation:none!important}.melody-panel :is(.strum-zone.is-active,.strum-transition-string.is-active,.strum-transition-string.is-sounding) .strum-string-wave{display:none}.melody-panel :is(.strum-zone.is-active,.strum-transition-string.is-active,.strum-transition-string.is-sounding) .strum-string-static{display:block;stroke:var(--brand-pink)}}.melody-panel .strum-lane:after{position:absolute;right:.72rem;bottom:.55rem;padding:.22rem .38rem;border-radius:999px;content:attr(data-label);background:#ffffffc2;color:#1a1a1c9e;font-size:clamp(.46rem,1.1vw,.64rem);font-weight:680;pointer-events:none}.melody-panel .melody-region{position:absolute;z-index:1;top:var(--key-y);left:var(--key-x);display:grid;width:clamp(2.5rem,12cqw,4.4rem);aspect-ratio:1;min-width:0;padding:0;place-items:center;overflow:hidden;border:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#FFFFFF,var(--brand-warm-white) 58%,color-mix(in oklch,var(--brand-warm-white) 84%,var(--brand-charcoal)) 100%);box-shadow:0 .28rem .65rem #00000047;color:var(--brand-charcoal);transform:translate(-50%,-50%);transition:transform 90ms ease,border-color 90ms ease,box-shadow 90ms ease}.melody-panel .melody-region:before{content:none}.melody-panel .melody-region.is-chord-tone{background:radial-gradient(circle at 35% 28%,var(--brand-pink-seventh),var(--brand-pink-sus) 62%,var(--brand-pink-sus) 100%);color:var(--brand-charcoal)}.melody-panel .melody-region:after{border-radius:50%}.melody-panel .melody-region.is-avoid-note{background:radial-gradient(circle at 35% 28%,color-mix(in oklch,var(--brand-warm-white) 68%,var(--brand-charcoal)),color-mix(in oklch,var(--brand-warm-white) 42%,var(--brand-charcoal)) 62%,color-mix(in oklch,var(--brand-warm-white) 26%,var(--brand-charcoal)));color:color-mix(in oklch,var(--brand-warm-white) 82%,transparent)}.melody-panel .melody-region.is-active{z-index:2;box-shadow:0 .35rem 1.1rem #0000005c;transform:translate(-50%,-50%) scale(1.1)}.melody-panel .melody-region.is-active:after{background:#1a1a1c1a}.melody-panel .melody-note-label,.melody-panel .melody-key-white .melody-note-label{position:relative;top:auto;left:auto;width:auto;padding:0;background:none;color:inherit;font-size:clamp(.72rem,2.6cqw,1.22rem);font-weight:760;transform:none}.melody-panel .melody-region.role-tonic .melody-note-label{color:inherit}.melody-panel .melody-region.melody-key-black-circle{z-index:3;width:clamp(1.8rem,8cqw,3rem);background:radial-gradient(circle at 34% 25%,color-mix(in oklch,var(--brand-warm-white) 22%,var(--brand-charcoal)),var(--brand-charcoal) 56%,color-mix(in oklch,var(--brand-charcoal) 96%,var(--brand-warm-white)) 100%);box-shadow:0 .32rem .7rem #0000007a;color:#ffffffeb}.melody-panel .melody-region.melody-key-black-circle.is-avoid-note{background:radial-gradient(circle at 34% 25%,color-mix(in oklch,var(--brand-warm-white) 60%,var(--brand-charcoal)),color-mix(in oklch,var(--brand-warm-white) 46%,var(--brand-charcoal)) 58%,color-mix(in oklch,var(--brand-warm-white) 32%,var(--brand-charcoal)));color:#ffffffb8}.melody-panel .melody-region.melody-key-black-circle.is-chord-tone{background:radial-gradient(circle at 34% 25%,var(--brand-pink-inversion),var(--brand-pink) 56%,var(--brand-pink) 100%);color:var(--brand-warm-white)}.melody-panel .melody-region.melody-key-black-circle.is-active{z-index:4;box-shadow:0 .35rem 1rem #00000085}.melody-panel .melody-key-black-circle .melody-note-label{color:inherit;font-size:clamp(.54rem,1.8cqw,.82rem)}@media(max-height:330px){.melody-control-card{top:.25rem;left:.25rem;width:min(62%,20rem)}.melody-control-card .tone-field .custom-select-trigger{height:1.18rem}.duet-mode-switch button{height:1.05rem}.global-accompaniment-context{min-height:1.16rem;padding-block:.1rem}.performance-layer-toggle{min-height:1.2rem}.duet-settings-toggle{height:1.05rem}.duet-settings-title{padding-block:.24rem .1rem}.melody-panel .strum-stop-button{top:.35rem;right:.42rem;min-width:6.2rem;min-height:3.7rem}.chord-loop-timeline-card{left:.25rem;height:2.8rem}.chord-loop-timeline-card.is-multi-row{height:4.4rem}.chord-loop-timeline-card.is-four-row{height:7.6rem}.chord-loop-control-grid{padding-block:.16rem}.chord-loop-field input,.chord-loop-field .custom-select-trigger,.chord-loop-action{height:1.34rem}.chord-loop-edit-controls{left:.3rem;right:.3rem;bottom:.3rem}.chord-loop-edit-controls button{height:1.42rem}.chord-loop-edit-controls .is-cursor-step{height:1.78rem}.melody-control-card .transpose-panel button,.melody-control-card .key-wheel .custom-select-trigger{height:1.24rem}.chord-notation-panel{min-height:1.4rem;padding-block:.1rem}.chord-notation-switch button{height:1.05rem}.melody-panel .melody-region{width:clamp(2rem,9.5cqw,3.3rem)}.melody-panel .melody-region.melody-key-black-circle{width:clamp(1.55rem,7.2cqw,2.5rem)}}.chord-tutorial-overlay[hidden]{display:none!important}.chord-tutorial-overlay{position:fixed;z-index:100;inset:0;pointer-events:none}.chord-tutorial-backdrop,.chord-tutorial-interaction-blocker,.chord-tutorial-focus-rings{position:fixed;inset:0;width:100%;height:100%}.chord-tutorial-backdrop{z-index:100;overflow:visible}.chord-tutorial-mask-fill{width:100%;height:100%;fill:#1f2125c7}.chord-tutorial-interaction-blocker{z-index:101;background:transparent;pointer-events:auto;touch-action:none}.chord-tutorial-focus-rings{z-index:112;pointer-events:none}.chord-tutorial-focus-ring{position:fixed;border:0;border-radius:clamp(.4rem,.72vw,.7rem);box-shadow:none;pointer-events:none}.chord-tutorial-focus-ring.is-expected{border:0;box-shadow:0 0 1.05rem .22rem #ffec86eb;animation:chord-tutorial-expected-pulse .9s ease-in-out infinite}.chord-tutorial-focus-ring.is-expected.is-fading-in{animation:chord-tutorial-expected-fade-in .24s ease-out both,chord-tutorial-expected-pulse .9s ease-in-out .24s infinite}@keyframes chord-tutorial-expected-fade-in{0%{filter:brightness(.9);opacity:0}to{filter:brightness(.9);opacity:.76}}@keyframes chord-tutorial-expected-pulse{0%,to{filter:brightness(.9);opacity:.76}50%{filter:brightness(1.18);opacity:1}}.duet-body.is-chord-tutorial-active #chord-input-layer{z-index:110}.duet-body.is-chord-tutorial-active .pop-chord-region.is-tutorial-unrevealed{visibility:hidden;pointer-events:none}.duet-body.is-chord-tutorial-active .chord-tutorial-open{visibility:hidden}.chord-tutorial-card{position:fixed;z-index:120;top:max(.55rem,env(safe-area-inset-top));right:max(.55rem,env(safe-area-inset-right));bottom:max(.55rem,env(safe-area-inset-bottom));display:grid;width:calc(50vw - .9rem - env(safe-area-inset-right));min-width:0;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgb(255 255 255 / 26%);border-radius:clamp(.72rem,1.4vw,1rem);background:#141518f5;box-shadow:0 1rem 2.8rem #0000008a;color:var(--brand-warm-white);font-family:system-ui,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;text-align:left;pointer-events:auto}.chord-tutorial-header{display:flex;min-height:clamp(2.6rem,9vh,3.6rem);padding:clamp(.55rem,1.2vw,.78rem) clamp(.65rem,1.55vw,1rem);align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid rgb(255 255 255 / 12%);background:#ffffff0a}.chord-tutorial-header>div{display:flex;min-width:0;align-items:baseline;gap:.58rem}.chord-tutorial-section{color:#fff1a3;font-size:clamp(.56rem,1.25vw,.72rem);font-weight:820;letter-spacing:.08em}.chord-tutorial-progress{color:#ffffff7a;font-size:clamp(.5rem,1.05vw,.64rem);font-weight:700}.chord-tutorial-close{display:grid;width:clamp(1.8rem,4vw,2.35rem);aspect-ratio:1;flex:0 0 auto;place-items:center;border:1px solid rgb(255 255 255 / 18%);border-radius:50%;background:#ffffff14;color:var(--brand-warm-white);font:500 clamp(1rem,2.4vw,1.4rem) / 1 system-ui,sans-serif;touch-action:manipulation}.chord-tutorial-copy{min-height:0;padding:clamp(.7rem,1.7vw,1.12rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.chord-tutorial-copy h2{max-width:16em;margin:0;color:#fff;font-size:clamp(1.08rem,2.35vw,1.55rem);font-weight:760;letter-spacing:.01em;line-height:1.3}.chord-tutorial-paragraphs{display:grid;gap:.55rem;margin-top:clamp(.62rem,1.45vw,.92rem)}.chord-tutorial-paragraphs p{max-width:38em;margin:0;color:#ffffffdb;font-size:clamp(.74rem,1.5vw,.94rem);font-weight:520;letter-spacing:.025em;line-height:1.65}.chord-tutorial-note{display:block;max-width:40em;margin-top:.42rem;color:#ffffff85;font-size:clamp(.56rem,1.12vw,.7rem);font-weight:520;letter-spacing:.02em;line-height:1.45}.chord-tutorial-note[hidden]{display:none}.chord-tutorial-examples{display:grid;gap:.28rem;margin-top:clamp(.62rem,1.5vw,.95rem)}.chord-tutorial-example{display:block;margin:0;padding:.38rem .52rem;border-left:3px solid var(--brand-mint);border-radius:.18rem .38rem .38rem .18rem;background:#ffffff14;color:#ffffffe5;font-family:inherit;font-size:clamp(.72rem,1.48vw,.92rem);font-weight:700;letter-spacing:.025em;line-height:1.4}.chord-tutorial-example-label{margin-right:.5em;color:var(--brand-mint);font-size:.74em;font-weight:820;letter-spacing:.05em}.chord-tutorial-example-sequence{display:inline-flex;align-items:flex-end;gap:.34em;white-space:nowrap}.chord-tutorial-example-ruby{min-width:1.7em;color:#ffffffe5;ruby-align:center;ruby-position:over;text-align:center}.chord-tutorial-example-ruby rt{color:#ffffff94;font-size:.62em;font-weight:720;letter-spacing:0;line-height:1;white-space:nowrap}.chord-tutorial-example-ruby.is-highlighted,.chord-tutorial-example-ruby.is-highlighted rt{color:var(--brand-mint)}.chord-tutorial-example-ruby.is-highlighted{text-shadow:0 0 .6rem color-mix(in oklch,var(--brand-mint) 42%,transparent)}.chord-tutorial-example-ruby.is-numeric,.chord-tutorial-chord-ruby.is-numeric{display:inline-block}.chord-tutorial-example-arrow{color:#ffffff6b}.chord-tutorial-instruction{min-height:2.5em;margin:clamp(.68rem,1.55vw,1rem) 0 0;padding:.58rem .68rem;border:1px solid rgb(255 236 134 / 44%);border-radius:.55rem;background:#ffec861a;color:#fff3b0;font-size:clamp(.72rem,1.46vw,.9rem);font-weight:720;letter-spacing:.02em;line-height:1.55}.chord-tutorial-instruction[hidden]{display:none}.chord-tutorial-ruby-sequence{display:inline-flex;margin-left:.28em;align-items:flex-end;gap:.34em;white-space:nowrap}.chord-tutorial-chord-ruby{min-width:1.5em;color:#fff7c8;font-weight:780;line-height:1.2;ruby-align:center;ruby-position:over;text-align:center}.chord-tutorial-chord-ruby rt{color:#fff7c8b3;font-size:.62em;font-weight:720;letter-spacing:0;line-height:1;white-space:nowrap}.chord-tutorial-ruby-arrow{color:#fff7c894}.chord-tutorial-instruction.is-complete{border-color:color-mix(in oklch,var(--brand-mint) 68%,white);background:color-mix(in oklch,var(--brand-mint) 16%,transparent);color:#cafff3}.chord-tutorial-instruction.is-rejected{animation:chord-tutorial-rejected .28s ease-out}@keyframes chord-tutorial-rejected{0%,to{transform:translate(0)}35%{transform:translate(-.3rem)}70%{transform:translate(.3rem)}}.chord-tutorial-navigation{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.42rem;padding:clamp(.48rem,1.1vw,.72rem);border-top:1px solid rgb(255 255 255 / 12%);background:#0a0b0d9e}.chord-tutorial-scroll-hint{position:absolute;z-index:3;right:clamp(.7rem,1.5vw,1rem);bottom:clamp(3.35rem,10.5vh,4.15rem);padding:.34rem .56rem;border:1px solid rgb(255 255 255 / 18%);border-radius:999px;background:#090a0ceb;box-shadow:0 .35rem .8rem #00000057;color:#ffffffc7;font-size:clamp(.48rem,1.05vw,.62rem);font-weight:720;pointer-events:none}.chord-tutorial-scroll-hint[hidden]{display:none}.chord-tutorial-navigation button{min-height:clamp(2.1rem,8vh,2.8rem);padding:.45rem .7rem;border:1px solid rgb(255 255 255 / 16%);border-radius:.55rem;background:#ffffff14;color:#ffffffd1;font:inherit;font-size:clamp(.58rem,1.25vw,.76rem);font-weight:760;touch-action:manipulation}.chord-tutorial-navigation button.is-primary{border-color:color-mix(in oklch,var(--brand-pink) 74%,white);background:var(--brand-pink);color:var(--brand-charcoal)}.chord-tutorial-navigation button:disabled{border-color:#ffffff14;background:#ffffff0a;color:#ffffff47;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.chord-tutorial-focus-ring.is-expected,.chord-tutorial-focus-ring.is-expected.is-fading-in,.chord-tutorial-instruction.is-rejected{animation:none}}@media(max-height:330px){.chord-tutorial-open{min-height:2.8rem}.chord-tutorial-card{top:.3rem;right:.3rem;bottom:.3rem;width:calc(50vw - .55rem)}.chord-tutorial-header{min-height:2rem;padding-block:.34rem}.chord-tutorial-copy{padding-block:.55rem}.chord-tutorial-paragraphs{gap:.34rem;margin-top:.48rem}.chord-tutorial-examples,.chord-tutorial-instruction{margin-top:.48rem}.chord-tutorial-navigation{padding-block:.34rem}.chord-tutorial-navigation button{min-height:1.75rem}}