:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100vh;background:#05070c;color:#f4f2ee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.gammes__page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:4.5rem 1.5rem 2.5rem;text-align:center}.gammes__title{margin:0 0 .5rem;font-size:2rem;letter-spacing:.04em}.gammes__rootRow,.gammes__scaleRow{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:32rem}.gammes__rootBtn,.gammes__scaleBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:#f4f2ee;border-radius:.5rem;padding:.45rem .7rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease}.gammes__rootBtn:hover,.gammes__scaleBtn:hover{background:#ffffff1a}.gammes__rootBtn--active,.gammes__scaleBtn--active{border-color:#34d399;background:#34d39933;color:#a7f3d0}.gammes__notes{margin:0;min-height:1.3rem;color:#f4f2eeb3;font-size:.95rem;letter-spacing:.03em}.gammes__keys{position:relative;width:min(95vw,40rem);height:9rem;-webkit-user-select:none;user-select:none;touch-action:none}.gammes__whiteKeys{display:flex;width:100%;height:100%}.gammes__key{border:1px solid #0c0f16;cursor:pointer;transition:background .1s ease}.gammes__key--white{flex:1;background:#f4f2ee;border-radius:0 0 .4rem .4rem}.gammes__key--white-inScale{background:#a7f3d0}.gammes__key--black{position:absolute;top:0;height:60%;background:#14161f;border-radius:0 0 .3rem .3rem;z-index:2}.gammes__key--black-inScale{background:#059669}.gammes__key--root.gammes__key--white-inScale{background:#34d399}.gammes__key--root.gammes__key--black-inScale{background:#047857}.gammes__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:#f4f2ee;padding:.7rem 1.3rem;border-radius:.6rem;font-size:.95rem;cursor:pointer;transition:transform .1s ease,background .15s ease}.gammes__btn:hover{background:#ffffff1f;transform:translateY(-1px)}.gammes__btn--primary{background:linear-gradient(135deg,#a7f3d0,#34d399,#059669 60%,#064e3b);box-shadow:inset 0 1px #ffffff80;border-color:transparent;font-weight:600;color:#042f22}.gammes__btn--primary:hover{background:linear-gradient(135deg,#c9fbe4,#56dda9,#059669 60%,#064e3b)}.gammes__btn--playing{background:linear-gradient(135deg,#fecaca,#f87171,#dc2626 60%,#7f1d1d);color:#2d0a0a}.gammes__btn--playing:hover{background:linear-gradient(135deg,#fecaca,#f87171,#dc2626 60%,#7f1d1d)}