.piano-dimensions-modal{position:fixed;z-index:1100;top:5.5rem;right:1rem;display:grid;width:min(28rem,calc(100vw - 2rem));max-height:calc(100vh - 7rem);overflow:hidden;border:1px solid rgb(34 211 238 / 28%);border-radius:.5rem;color:#dce5ed;background:linear-gradient(180deg,#121a24,#0b111b);box-shadow:0 1rem 3.2rem #00000061;font-size:.74rem}.piano-dimensions-modal,.piano-dimensions-modal *{box-sizing:border-box}.piano-dimensions-modal button,.piano-dimensions-modal input{font:inherit}.piano-dimensions-modal :is(button,input):focus-visible{outline:2px solid rgb(34 211 238 / 72%);outline-offset:1px}.piano-dimensions-modal__header,.piano-dimensions-modal__footer,.piano-dimensions-modal__control>div,.piano-dimensions-modal__footer>div{display:flex;align-items:center}.piano-dimensions-modal__header{justify-content:space-between;padding:.65rem .75rem;border-bottom:1px solid rgb(148 163 184 / 18%)}.piano-dimensions-modal__header>div{display:flex;align-items:baseline;gap:.55rem}.piano-dimensions-modal :is(h2,p){margin:0}.piano-dimensions-modal__header h2{color:#f8fafc;font-size:.9rem;font-weight:900}.piano-dimensions-modal__header p{color:#8fa0b2;font-size:.68rem}.piano-dimensions-modal__header button{width:1.65rem;height:1.65rem;border:1px solid rgb(148 163 184 / 24%);border-radius:.28rem;padding:0;color:#e2e8f0;background:#0f172ab8;cursor:pointer;font-weight:900}.piano-dimensions-modal__body{display:grid;gap:.5rem;overflow:auto;padding:.6rem}.piano-dimensions-modal__control,.piano-dimensions-modal__result{display:grid;gap:.38rem;border:1px solid rgb(148 163 184 / 16%);border-radius:.34rem;padding:.6rem;background:#0f172a52}.piano-dimensions-modal__control>div{justify-content:space-between;gap:.75rem}.piano-dimensions-modal__control label,.piano-dimensions-modal__result span{color:#dbeafe;font-weight:700}.piano-dimensions-modal__control output,.piano-dimensions-modal__result strong{color:#67e8f9;font-variant-numeric:tabular-nums}.piano-dimensions-modal__control input{width:100%;accent-color:#22d3ee}.piano-dimensions-modal__numeric{display:grid!important;grid-template-columns:minmax(0,6rem) auto;justify-content:end!important;gap:.35rem!important}.piano-dimensions-modal__numeric input{height:1.8rem;border:1px solid rgb(148 163 184 / 24%);border-radius:.28rem;padding:0 .42rem;color:#e2e8f0;background:#172033}.piano-dimensions-modal__control p,.piano-dimensions-modal__result p{color:#8fa0b2;font-size:.66rem}.piano-dimensions-modal__result{grid-template-columns:auto 1fr;background:#082f494d}.piano-dimensions-modal__result strong{text-align:right}.piano-dimensions-modal__result p{grid-column:1 / -1}.piano-dimensions-modal__footer{justify-content:space-between;gap:.5rem;padding:.55rem .65rem;border-top:1px solid rgb(148 163 184 / 18%);background:#0c1420b8}.piano-dimensions-modal__footer>div{gap:.45rem}.piano-dimensions-modal__footer button{min-height:1.8rem;border:1px solid rgb(148 163 184 / 25%);border-radius:.3rem;padding:0 .62rem;color:#dce5ed;background:#1b2938;cursor:pointer;font-size:.68rem;font-weight:650}.piano-dimensions-modal__footer button:hover,.piano-dimensions-modal__header button:hover{border-color:#22d3ee85;color:#ecfeff;background:#14b8a62e}.piano-dimensions-modal__footer .piano-dimensions-modal__primary{border-color:#2dd4bf61;color:#e7fffb;background:#176a73}@media(max-width:560px){.piano-dimensions-modal{inset:1rem 1rem auto;width:auto;max-height:calc(100vh - 2rem)}}