.sm-panel{position:fixed;z-index:170;left:50%;top:50%;transform:translate(-50%,-50%);width:min(790px,94vw);max-height:90vh;overflow:auto;background:#1b232c!important;color:#eee4ce;border:2px solid #b7a581;box-shadow:0 22px 100px #060c13d9;font-family:inherit;padding:0!important}
.sm-panel button,.sm-panel select,.sm-panel textarea{font:inherit;color:#eee4ce;background:#29343d;border:1px solid #63716c;border-radius:2px}.sm-panel button{padding:10px 15px;cursor:pointer;touch-action:manipulation}.sm-panel button:hover{background:#394b50}.sm-panel button:disabled{opacity:.42;cursor:default}.sm-panel button:focus-visible,.sm-panel select:focus-visible,.sm-panel textarea:focus-visible{outline:2px solid #efd390;outline-offset:2px}
.sm-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;background:#26363c;border-bottom:1px solid #667773}.sm-heading small{font-size:10px;letter-spacing:2px;color:#a0b9b1}.sm-heading h2{font-size:27px;margin:8px 0 0;color:#f1dfbb;line-height:1.3}.sm-heading button{font-size:23px;padding:3px 13px}.sm-place{padding:13px 28px;color:#b3c1b4;font-size:13px;border-bottom:1px solid #39494d}.sm-place span{float:right;color:#ead097}
.sm-tabs{display:flex;padding:16px 28px 0;gap:8px}.sm-tabs button{flex:1;background:#202b34;color:#98aba8}.sm-tabs button.selected{background:#43635f;color:#fff0cc;border-color:#b7b990}.sm-body{padding:20px 28px}.sm-body p{font-size:12px;line-height:1.7;color:#adbbb5}.sm-controls{display:flex;gap:18px}.sm-controls label{font-size:11px;color:#adbbb5;display:grid;gap:7px}.sm-controls label:first-child{flex:1}.sm-controls select{padding:10px;max-width:100%}.sm-instrument-stage{display:flex;gap:30px;align-items:center;padding:24px;margin:20px 0;background:repeating-linear-gradient(0deg,#25333b 0px,#25333b 3px,#233039 3px,#233039 6px);border:1px solid #405352}.sm-big-note{font-size:67px;color:#c9aa74;text-shadow:3px 4px #101b27}.sm-instrument-stage h3{margin:0;font-size:20px}.sm-keyboard{display:flex;gap:3px;height:130px;padding:11px;background:#111b25;border:1px solid #57635d}.sm-keyboard .sm-key{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:13px;padding-bottom:11px;background:#e9e2cd;color:#334149;border-bottom:6px solid #a4a393;user-select:none;touch-action:none}.sm-keyboard .black{background:#35434b;color:#ded8bf;height:77%;border-bottom-color:#101b26}.sm-keyboard .playing,.sm-keyboard .sm-key:active{background:#80b3a6;color:#142733}.sm-key strong{font-size:12px}.sm-key small{font-size:10px;opacity:.65}.sm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.sm-actions .primary{background:#a0b59d;color:#1b3232;border-color:#dfdfb4;font-weight:bold}.sm-help{font-size:11px!important}.sm-score-title{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.sm-score-title h3{font-size:17px}.sm-score-title button{font-size:11px;padding:7px 10px}.sm-body textarea{display:block;width:100%;min-height:210px;box-sizing:border-box;resize:vertical;padding:18px;font-family:monospace;font-size:15px;line-height:1.9;background:#111e29;color:#bbd4bd}.sm-shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sm-shop-grid article{background:#25323a;border:1px solid #465754;padding:15px}.sm-shop-grid h4{font-size:13px;margin:9px 0}.sm-shop-grid article>span:not(.sm-icon){font-size:12px;color:#d2bc90}.sm-shop-grid article>div{display:flex;gap:8px;margin-top:13px}.sm-shop-grid button{padding:7px;font-size:11px;flex:1}.sm-icon{float:right;font-size:29px}.sm-status{padding:0 28px 18px;margin:0;color:#dfc68d;font-size:12px;min-height:18px}
@media(max-width:560px){.sm-heading,.sm-body{padding:17px}.sm-tabs{padding:14px 17px 0}.sm-place{padding:12px 17px}.sm-heading h2{font-size:23px}.sm-panel button{padding:9px}.sm-keyboard{gap:2px;height:116px;padding:7px}.sm-key strong{font-size:10px}.sm-instrument-stage{padding:18px;gap:18px}.sm-instrument-stage h3{font-size:17px}.sm-shop-grid{gap:8px}.sm-shop-grid article{padding:11px}}