:root{color:#f4f4f4;background:#202020;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}html{overflow:hidden;overscroll-behavior:none;background:#202020}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 #727272;background:#181818;cursor:crosshair}.touch-surface.is-pop-chord-surface{display:block;background:#140c13;--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-core-background: oklch(38% .075 335);--pop-inversion-background: oklch(38% .085 350);--pop-sus-background: oklch(29% .075 335);--pop-modal-background: oklch(25% .055 292);--pop-seventh-background: oklch(25% .055 35);--pop-secondary-background: oklch(31% .085 62);position:absolute;top:var(--region-y);left:var(--region-x);display:grid;width:var(--region-width);height:var(--region-height);min-width:0;padding:clamp(.18rem,1.2vw,.38rem);place-content:center;border:1px solid rgb(255 255 255 / 16%);background:#3c2537;color:#f8eff6;line-height:1;text-align:center}.pop-chord-region.tier-core{background:var(--pop-core-background)}.pop-chord-region.tier-sus{background:var(--pop-sus-background);color:#fae9f5}.pop-chord-region.tier-color{background:var(--pop-modal-background);color:#e4e0ff;color:oklch(92% .045 292)}.pop-chord-region.tier-seventh{background:var(--pop-seventh-background);color:#ffdccd;color:oklch(92% .045 45)}.pop-chord-region.tier-secondary{z-index:1;padding:.1rem;background:var(--pop-secondary-background);color:#ffebd5;color:oklch(95% .04 70)}.pop-chord-region.family-related-ii{background:repeating-linear-gradient(135deg,transparent 0 .52rem,var(--pop-secondary-background) .52rem .7rem),var(--pop-seventh-background)}.pop-chord-region.family-modal{background:repeating-linear-gradient(135deg,transparent 0 .52rem,var(--pop-modal-background) .52rem .7rem),var(--pop-sus-background)}.pop-chord-region.tier-inversion{z-index:1;padding:.08rem;border-top-color:#ffffff7a;background:var(--pop-inversion-background);box-shadow:0 -.18rem .5rem #0003;color:#f8eff6}.pop-chord-region.tier-connector{z-index:2;padding:.06rem;border-color:#ffffff52;background:#092c31;box-shadow:0 .12rem .35rem #00000061;color:#d1f2f8}.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:3px;border:1px solid transparent;content:"";pointer-events:none;transition:border-color .12s ease,box-shadow .12s ease}.pop-chord-region.is-suggested:before{border-color:#ffffff6b;box-shadow:none}.pop-chord-region.is-strong-suggested:before{inset:1px;border-color:#fff7d0e5;box-shadow:inset 0 0 calc(.28rem + var(--pop-guide-pulse) * 1.55rem) #ffdd8eb3,inset 0 0 2px #ffffffd9;opacity:calc(.32 + var(--pop-guide-pulse) * .68)}.pop-chord-region.is-active:before{border-color:#fff;box-shadow:inset 0 0 1rem #ffffff38,0 0 .65rem #ffb9e161}.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-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}.glow-layer{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;--beat-pulse: 1}.touch-glow{position:absolute;width:clamp(4.75rem,22%,6rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklch,var(--glow-color) 92%,transparent) 0%,color-mix(in oklch,var(--glow-color) 68%,transparent) 24%,color-mix(in oklch,var(--glow-color) 36%,transparent) 48%,color-mix(in oklch,var(--glow-color) 12%,transparent) 65%,transparent 80%);filter:blur(.12rem) drop-shadow(0 0 .9rem color-mix(in oklch,var(--glow-color) 78%,transparent));opacity:.96;transform:translate(-50%,-50%) scale(var(--beat-pulse));transform-origin:center;will-change:transform}.duet-body{min-width:30rem;min-height:18rem;touch-action:none;background:radial-gradient(circle at 18% 12%,rgb(114 51 92 / 16%),transparent 36%),radial-gradient(circle at 82% 88%,rgb(210 188 108 / 10%),transparent 34%),#171318}.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:#ffffff3d}.duet-divider{position:relative;z-index:5;display:grid;place-items:center;background:#121012;box-shadow:0 0 .8rem #00000073}.duet-divider span{width:1px;height:18%;background:#ffffff6b}.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:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.32rem;min-width:0;padding:.25rem .32rem;border:1px solid rgb(255 255 255 / 18%);border-bottom:0;background:#19151af5}.tone-field{display:grid;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:1px solid rgb(255 255 255 / 24%);border-radius:.22rem;background:#302a31;color:#ffffffe0;font:inherit;font-size:clamp(.48rem,1.1vw,.64rem);touch-action:manipulation}.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:#302a31;color:#ffffffe0;font:inherit;font-size:clamp(.54rem,1.35vw,.72rem);font-variant-numeric:tabular-nums;touch-action:manipulation}.transpose-panel button{padding:0;cursor:pointer}.transpose-panel button:active{border-color:#ffe99fcc;background:#663d5d}.key-wheel{display:block;min-width:0}.key-wheel select{padding:0 1.2rem 0 .4rem;background-color:#3f301b;color:#f8eace;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:#181818}.melody-lane{position:relative;display:flex;min-width:0;min-height:0;overflow:hidden}.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(--key-height);min-width:0;border:1px solid #050505;border-top: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:1px solid #8a8a86;background:#fff}.duet-shell .melody-lane-major .melody-region.is-avoid-note{background:#9b9b97}.duet-shell .melody-lane-major .melody-key-black{border-right:1px solid #050505;background:linear-gradient(90deg,#0b0b0b,#292929 72%,#0a0a0a)}.duet-shell .melody-lane-major .melody-key-black.is-avoid-note{border-color:#565652;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:relative;z-index:2;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}.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}.duet-shell .touch-glow{width:clamp(3.5rem,24%,6rem)}@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{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}}