.sound-lab{--lab-accent:#c62f3f;--lab-panel:#f3eee6;--lab-ink:#292420;color:var(--lab-ink);max-width:1100px;margin:0 auto 3rem;background:#fbf8f3;border:1px solid #d9cfc2;border-radius:18px;padding:clamp(16px,3vw,32px)}.sound-lab button,.sound-lab select{font:inherit;border:1px solid #b9ada1;border-radius:8px;padding:8px 12px;background:#fff;color:#292420}.sound-lab button:focus-visible,.sound-lab input:focus-visible,.sound-lab select:focus-visible{outline:3px solid #c62f3f;outline-offset:3px}.lab-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.lab-eyebrow{font-size:.72rem;letter-spacing:.15em;color:#8d2632;font-weight:700}.lab-top p{margin:.5rem 0}.sound-lab .lab-primary{background:#c62f3f;color:white;border-color:#c62f3f;white-space:nowrap}#status,.lab-hint,.lab-footnote{font-size:.85rem;color:#65594f}.lab-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin:22px 0}.lab-toolbar label{display:grid;gap:5px;font-size:.8rem;font-weight:600}.sound-lab input[type=range]{accent-color:#c62f3f;display:block;width:100%}.scope-wrap{position:relative;background:#252321;border-radius:10px;overflow:hidden;margin-bottom:24px}.scope-wrap canvas{width:100%;height:130px;display:block}.scope-wrap span{position:absolute;top:10px;left:14px;color:#bfb5aa;letter-spacing:.13em;font-size:.6rem}.keyboard-scroll{overflow-x:auto;padding:4px 3px 14px}#keys{position:relative;height:190px;min-width:650px;display:flex;user-select:none;touch-action:none}#keys button{padding:0;border-radius:0 0 7px 7px;display:flex;flex-direction:column;justify-content:end;align-items:center;padding-bottom:12px;font-size:.7rem;touch-action:none}#keys .white{flex:1;height:190px;background:linear-gradient(#fff,#f1ede6);border:1px solid #bcb3a8;color:#62574e}#keys .black{position:absolute;top:0;height:118px;width:4.2%;background:linear-gradient(#38332e,#171514);color:#d8d0c7;border:1px solid #171514;z-index:2}#keys .active{background:#c62f3f;color:#fff;box-shadow:inset 0 3px 12px #75232a}#keys small{opacity:.7;font-size:.62rem}.effects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}.effects section{background:var(--lab-panel);padding:20px;border-radius:12px}.effects h2{font-size:1.25rem;margin:0 0 8px;border:0;padding:0}.effects p{font-size:.83rem;min-height:65px;line-height:1.5}.effects label{display:block;font-size:.8rem;font-weight:600;margin-top:17px}.effects output{float:right;font-weight:400}.effects input{margin-top:8px}.lab-footnote{margin:24px 0 0}@media(max-width:650px){.effects{grid-template-columns:1fr}.effects p{min-height:0}.lab-top{align-items:start;flex-direction:column}.lab-toolbar label{flex:1;min-width:125px}}

/* Keep the instrument at hand on wide screens while exploring the effects. */
.voice-info{font-size:.86rem;border-left:3px solid #c62f3f;padding:9px 14px;background:#f3eee6;border-radius:0 8px 8px 0;margin:0 0 20px;line-height:1.5;min-height:48px}.effects-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:30px}.effects-heading h2{font-size:1.4rem;border:0;margin:0;padding:0}.effects-heading span{font-size:.72rem;color:#65594f}.effects{counter-reset:effect;margin-top:16px}.effects section{border:1px solid transparent;position:relative;transition:border-color .15s,background .15s}.effects section h2:before{counter-increment:effect;content:counter(effect,decimal-leading-zero);font-size:.65rem;color:#87766a;display:block;letter-spacing:.15em;margin-bottom:10px}.effects section.effect-on{border-color:#c62f3f;background:#f7e9e5}.effects section.effect-on h2:after{content:'ON';float:right;font-size:.6rem;letter-spacing:.08em;background:#c62f3f;color:white;padding:4px 7px;border-radius:20px}.effects output{font-variant-numeric:tabular-nums}.sound-lab input[type=range]{min-height:28px;cursor:pointer}.lab-toolbar button{font-size:.8rem}.lab-toolbar select{max-width:100%}.lab-hint{line-height:1.6}.keyboard-scroll{border-radius:10px;background:#e8e0d6;padding:10px 8px 15px}.scope-wrap canvas{height:110px}.sound-lab #stop{color:#8d2632}.sound-lab button:hover{filter:brightness(.96)}@media(min-width:1000px){.lab-toolbar label{flex:1}.lab-toolbar{gap:12px}}@media(max-width:650px){.effects-heading{display:block}.effects-heading span{display:block;margin-top:6px}.effects{gap:12px}.lab-top{gap:12px}.effects p{min-height:0}}@media(prefers-reduced-motion:reduce){.effects section{transition:none}}