: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{z-index:2;inset:1px;border:1px solid rgb(255 239 169 / 84%);box-shadow:inset 0 0 .55rem #ffcd5257,inset 0 0 0 1px #ffffe133;opacity:.68;animation:pop-strong-resolution-pulse 1.35s ease-in-out infinite}.pop-chord-region.is-strong-suggested:after{background:radial-gradient(circle at 50% 50%,transparent 36%,rgb(255 208 88 / 14%) 100%);animation:pop-strong-resolution-wash 1.35s ease-in-out infinite}.pop-chord-region.is-strong-suggested .pop-chord-roman{color:#fff2bd;text-shadow:0 0 .18rem rgb(255 222 116 / 48%)}.pop-chord-region.is-active:before{border-color:#fff;box-shadow:inset 0 0 1rem #ffffff38,0 0 .65rem #ffb9e161}@keyframes pop-strong-resolution-pulse{0%,to{box-shadow:inset 0 0 .4rem #ffcd5242,inset 0 0 0 1px #ffffe129;opacity:.56}50%{box-shadow:inset 0 0 .82rem #ffcd5273,inset 0 0 0 1px #ffffe142;opacity:.82}}@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-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: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: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}.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:#d7bd68;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:1px solid rgb(255 255 255 / 22%);border-radius:.22rem;background:#302a31;color:#ffffffad;font:inherit;font-size:clamp(.42rem,1vw,.56rem);touch-action:manipulation}.layout-auto-button[aria-pressed=true]{border-color:#d7bd6894;background:#5b4b28b8;color:#fff2c5}.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: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: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: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}.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,.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 .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)}.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 78% 34%,rgb(215 190 110 / 9%),transparent 34%),radial-gradient(circle at 28% 84%,rgb(131 68 118 / 12%),transparent 38%),#161316;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:2px solid rgb(255 255 255 / 58%);border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff,#e5e1dc 58%,#bdb7b4);box-shadow:0 .28rem .65rem #0000006b,inset 0 0 0 1px #0000001f;color:#211c20;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{border-color:#ffffff47;background:radial-gradient(circle at 35% 28%,#a8a5a2,#797672 62%,#5e5b58);color:#ffffffd1}.melody-panel .melody-region.is-active{z-index:2;border-color:#fff1b9;box-shadow:0 0 0 .18rem #dbbd5b57,0 .35rem 1.1rem #0000007a,0 0 1.45rem #ffdc6e73;transform:translate(-50%,-50%) scale(1.1)}.melody-panel .melody-region.is-active:after{background:#ffe1844d}.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-group-lower{border-color:#cdb5e09e}.melody-panel .melody-group-upper{border-color:#eed072a8}.melody-panel .melody-region.melody-key-black-circle{z-index:3;width:clamp(1.8rem,8cqw,3rem);border-color:#746c72e0;background:radial-gradient(circle at 34% 25%,#575158,#211d22 56%,#090809);box-shadow:0 .32rem .7rem #0000009e,inset 0 0 0 1px #ffffff14;color:#ffffffeb}.melody-panel .melody-region.melody-key-black-circle.is-avoid-note{border-color:#7e787e7a;background:radial-gradient(circle at 34% 25%,#706c70,#474347 58%,#292629);color:#ffffffb8}.melody-panel .melody-region.melody-key-black-circle.is-active{z-index:4;border-color:#ffe59a;box-shadow:0 0 0 .16rem #dbbd5b61,0 .35rem 1rem #0000009e,0 0 1.35rem #ffdc6e6b}.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}.melody-control-card .transpose-panel button,.melody-control-card .key-wheel select{height:1.24rem}.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)}}