: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{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:#5a3252}.pop-chord-region.tier-color{background:#221c3a;color:#e4e0ff;color:oklch(92% .045 292)}.pop-chord-region.tier-seventh{background:#38170e;color:#ffdccd;color:oklch(92% .045 45)}.pop-chord-region.tier-secondary{z-index:1;padding:.1rem;background:#492600;background:oklch(31% .085 62);color:#ffebd5;color:oklch(95% .04 70)}.pop-chord-region.tier-inversion{z-index:1;padding:.08rem;border-top-color:#ffffff7a;background:#00313c;background:oklch(29% .075 218);box-shadow:0 -.18rem .5rem #0003;color:#d8f9fd}.pop-chord-region.tier-inversion.is-contextual-hidden{display:none}.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}.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:inset 0 0 .8rem #ffffff14}.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-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-seventh .pop-chord-hint{margin-top:.14rem}.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:2.2rem 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}.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 .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-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}.melody-lane-major .melody-region:before{content:none}.melody-lane-major .melody-note-label{background:linear-gradient(transparent,#ffffff85);color:#171318;font-weight:680}.melody-degree-markers{position:absolute;z-index:3;top:50%;left:50%;display:flex;flex-direction:column;gap:.18rem;pointer-events:none;transform:translate(-50%,-50%)}.melody-degree-markers i{width:.24rem;height:.24rem;border-radius:50%;background:#171318}.melody-note-label{position:relative;z-index:2;width:100%;padding:.36rem .05rem;background:linear-gradient(transparent,#0000006b);color:#ffffffad;font-size:clamp(.44rem,1.1vw,.62rem);text-align:center}.melody-region.role-tonic .melody-note-label{color:#1b1b1b;font-weight:760}.melody-region.is-upper-octave:after{position:absolute;top:0;right:0;left:0;height:.22rem;background:#ffffff29;content:""}.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.8rem 1.4rem minmax(0,1fr)}.tone-menu{padding-block:.14rem}.tone-field select{height:1.5rem}.panel-badge{padding:.16rem .3rem}.duet-shell .pop-chord-hint{display:none}}