: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}*{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):is(:active,[data-pressed=true]){transform:translateY(1px) scale(.94);filter:brightness(.72);box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 .72rem #00000057}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;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.family-modal{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{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{font-size:clamp(.58rem,2.7vw,.78rem);line-height:1.2}.tier-inversion .pop-chord-roman{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 42%,rgb(255 255 255 / 28%) 100%);box-shadow:inset 0 0 .72rem #ffffff94}.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 1.35s 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 1.35s ease-in-out infinite}.pop-chord-region.is-strong-suggested .pop-chord-roman{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{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{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{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{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{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)}.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 select{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 select{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{background:var(--brand-pink);color:var(--brand-charcoal)}.key-wheel{display:block;min-width:0}.key-wheel select{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{font-size:clamp(.72rem,2.1vw,1.15rem)}.duet-shell .tier-core .pop-chord-roman{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-inversion .pop-chord-roman{font-size:clamp(.55rem,1.55vw,.8rem)}.duet-shell .pop-chord-region[data-chord-id=viiø7] .pop-chord-roman{font-size:clamp(.5rem,1.4vw,.74rem)}.duet-shell .tier-connector .pop-chord-roman{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 select,.layout-auto-button{height:1.5rem}.transpose-panel{padding-block:.12rem}.transpose-panel button,.key-wheel select{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:15rem;overflow:hidden;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)}.melody-control-card.is-loop-mode{width:min(80%,30rem)}#duet-performance-settings[hidden],.chord-loop-controls[hidden],.chord-loop-timeline-card[hidden],.chord-loop-edit-controls[hidden]{display:none!important}.duet-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.14rem;padding:.16rem;border-bottom:1px solid rgb(255 255 255 / 12%);background:#ffffff0d}.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)}#duet-performance-settings{display:grid}.chord-loop-controls{display:grid;min-width:0}.chord-loop-control-grid{display:grid;min-width:0;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,.95fr) repeat(2,minmax(0,1fr));gap:.1rem;padding:.18rem}.chord-loop-field{display:grid;min-width:0;grid-template-rows:auto 1.55rem;gap:.1rem;color:#ffffff94;font-size:clamp(.39rem,.84vw,.5rem)}.chord-loop-field input,.chord-loop-field select,.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-transport-status{min-width:0;padding:.18rem .28rem .24rem;border-top:1px solid rgb(255 255 255 / 10%);color:#ffffffa3;font-size:clamp(.42rem,.9vw,.54rem);font-variant-numeric:tabular-nums;text-align:center}.chord-loop-timeline-card{position:absolute;z-index:7;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;touch-action:none}.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(.62rem,1.42vw,.86rem);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-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;right:.5rem;bottom:.5rem;display:grid;min-width:13rem;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{grid-template-columns:repeat(4,minmax(2.25rem,1fr))}.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-edit-controls .is-cursor-step{height:2.05rem;font-size:clamp(.6rem,1.25vw,.78rem)}#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-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 select{height:1.38rem;padding:0 1rem 0 .25rem;font-size:clamp(.42rem,.92vw,.56rem)}.melody-control-card .transpose-panel{grid-template-columns:repeat(2,minmax(1.7rem,1fr)) minmax(3.4rem,1.5fr) repeat(2,minmax(1.7rem,1fr));gap:.18rem;padding:.2rem .22rem;border:0;border-top:1px solid rgb(255 255 255 / 12%);border-bottom:1px solid rgb(255 255 255 / 12%);background:transparent}.melody-control-card .transpose-panel button,.melody-control-card .key-wheel select{height:1.48rem;border-radius:.3rem;font-size:clamp(.46rem,1vw,.6rem)}.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:7.2rem;grid-template-columns:repeat(2,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)}#chord-surface[data-chord-notation] .pop-chord-hint,#chord-surface[data-chord-notation=roman] .pop-chord-symbol,#chord-surface[data-chord-notation=symbol] .pop-chord-roman{display:none}#chord-surface[data-chord-notation=roman] .pop-chord-roman,#chord-surface[data-chord-notation=symbol] .pop-chord-symbol{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{display:inline-block}.roman-quality-marker{position:relative;top:-.06em;display:inline-block;margin-inline:.02em;font-size:.72em;font-weight:720}.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 .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: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) 36%,var(--brand-charcoal)),color-mix(in oklch,var(--brand-warm-white) 24%,var(--brand-charcoal)) 58%,color-mix(in oklch,var(--brand-warm-white) 12%,var(--brand-charcoal)));color:#ffffffb8}.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 select{height:1.18rem}.duet-mode-switch button{height:1.05rem}.chord-loop-timeline-card{top:5.8rem;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{grid-template-rows:auto 1.34rem}.chord-loop-field input,.chord-loop-field select,.chord-loop-action{height:1.34rem}.chord-loop-edit-controls{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 select{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)}}