*{box-sizing:border-box}body,html{overflow-x:hidden;max-width:100vw}body{display:flex;height:100vh;margin:0;background:#040404;font-family:Arial,sans-serif}button,input[type=file]{margin:5px}.sheet-container{position:relative;width:100%;height:100vh;background:#040404;overflow:auto;min-width:0}.sticky-labels{position:-webkit-sticky;position:sticky;top:30px;z-index:1000;display:flex;min-width:1760px;width:max-content;background:#000;transform:translateY(-30px);border-bottom:1px solid #000}.key-label{width:20px;text-align:center;font-size:8px;border-right:1px solid #000;color:#fff;padding:2px 0}.sheet-vertical{position:relative;min-width:1760px;width:max-content;background-image:linear-gradient(90deg,#e0e0e0 1px,transparent 0),linear-gradient(180deg,#f8f8f8 1px,transparent 0);background-size:20px 100px}.sheet-a4{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:800px;height:1122px;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.1);border:2px solid #ccc;padding-top:10px;box-sizing:border-box;overflow:visible}.sheet-a4-clean,.sheet-horizontal-a4-clean,.sheet-horizontal-a4-extend-clean,.sheet-vertical-a4-clean,.sheet-vertical-a4-extend-clean{position:relative;width:100%;min-height:100%;background:transparent;overflow:auto;padding:0;margin:0}.sheet-container-clean{background:transparent!important;border-top:none!important}.light-mode .sheet-container-clean{background:#fff!important;border-top:none!important}.dark-mode .sheet-container-clean{background:#000!important;border-top:none!important}.note{font-size:10px;border-radius:2px;line-height:1}.duration-note,.note{position:absolute;width:20px;color:#fff;text-align:center;font-weight:700}.duration-note{font-family:serif}@media print{body{background:#fff!important;margin:0!important;padding:0!important;color:#000!important}.controls,.main-content,.midi-player,.no-print,.red-cursor,.sheet-container,.sidebar,.sticky-labels{display:none!important}.a4-page,.horizontal-page{display:block!important;margin:0!important;padding:10px!important;background:#fff!important;border:none!important;box-shadow:none!important;page-break-after:always;page-break-inside:avoid;width:100%!important;height:auto!important;position:relative!important;overflow:visible!important}.a4-page *{visibility:visible!important}.sheet-vertical{display:block!important;background:#fff!important;background-image:none!important;margin:0!important;padding:0!important}.bass-box,.treble-box{background:transparent!important;border:1px solid #000!important}.duration-bar,.note,.note-label{opacity:1!important;visibility:visible!important}.note-label{text-shadow:none!important;color:#000!important}}.a4-page{width:800px;height:1122px}.a4-page,.horizontal-page{margin:20px auto;position:relative;border:1px solid #ccc;box-shadow:0 0 5px rgba(0,0,0,.1);background-color:#fff;page-break-after:always;page-break-inside:avoid;overflow:hidden}.horizontal-page{width:1122px;height:794px}.a4-page.landscape{width:1122px;height:800px}.horizontal-line{background-color:#ccc}.horizontal-line,.middle-c-line-horizontal{position:absolute;height:1px;left:0;right:0}.middle-c-line-horizontal{top:50%;background-color:#888}.treble-box{border:1.5px solid #3498db!important;background-color:rgba(52,152,219,.05)}.bass-box{border:1.5px solid #9b59b6!important;background-color:rgba(155,89,182,.05)}.duration-bar{border-radius:4px;opacity:.7;box-shadow:0 1px 3px rgba(0,0,0,.2)}.duration-bar.horizontal{height:20px}.duration-bar.vertical{width:20px}.note-label{font-family:serif;font-size:12px;font-weight:700;pointer-events:none;z-index:10;text-shadow:1px 1px 2px hsla(0,0%,100%,.8)}button{background-color:#042b51;color:#fff;padding:2px 6px;margin:1px;border:none;border-radius:10px;font-size:14px;font-family:Segoe UI,sans-serif;cursor:pointer;transition:background-color .3s ease,transform .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}button:hover{background-color:#34495e;transform:translateY(-2px)}button:active{background-color:#1f2d3a;transform:translateY(0)}button:disabled{background-color:#666;cursor:not-allowed;transform:none}.light-mode body{background:#f5f5f5;color:#000}.light-mode h1{background:#e0e0e0;color:#000}.light-mode .sheet-container{background:#fff;border-top:30px solid #ccc}.light-mode .main-content,.light-mode .sticky-labels{background:#fff}.light-mode .key-label,.light-mode .note{color:#000}.dark-mode body{background:#040404;color:#fff}.dark-mode h1{background:#1a1a1a;color:#fff}.dark-mode .sheet-container{background:#000;border-top:10px solid #6b6b6b}.dark-mode .main-content,.dark-mode .sticky-labels{background:#000}.dark-mode .key-label,.dark-mode .note{color:#fff}.sidebar{width:280px;min-width:250px;max-width:20vw;background:#000;display:flex;flex-direction:column;padding:15px;box-shadow:2px 0 5px rgba(0,0,0,.3);box-sizing:border-box;overflow-y:auto}.sidebar h1{margin:0 0 20px;font-size:1.5rem;text-align:left;background:#000;color:#fff}.controls{display:flex;flex-direction:column;gap:10px}.controls button,.controls input[type=file]{padding:10px;font-size:1rem;border:none;border-radius:10px;cursor:pointer;background:#022f4e;color:#fff;transition:background-color .3s ease}.controls button:hover{background:#012136}.controls button:disabled{background:#666;cursor:not-allowed}.main-content{flex-grow:1;background:#000;overflow:auto;padding:15px;box-sizing:border-box;min-width:0}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:#fff;font-size:18px}.error{color:#e74c3c;text-align:center;padding:20px;background:rgba(231,76,60,.1);border:1px solid #e74c3c;border-radius:5px;margin:20px}@media (max-width:1024px){.sidebar{width:250px;max-width:250px}.main-content,.sidebar{padding:10px}.midi-player{padding:6px;margin:6px 0}.piano-roll{min-height:70px}}@media (max-width:768px){body{flex-direction:column}.sidebar{width:100%;max-width:100%;height:auto;max-height:200px;padding:10px}.main-content{padding:8px}.a4-page{width:100%;max-width:800px;transform:scale(.8);transform-origin:top center}.midi-player{padding:8px;margin:6px 0;max-width:100%}.piano-roll{min-height:60px;max-height:80px}}.midi-player{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;box-sizing:border-box}.midi-player button:hover{transform:scale(1.05)}.piano-roll{box-sizing:border-box;max-width:100%}.note-playing{background-color:#4a4a4a!important;opacity:1!important;transition:background-color .2s ease-in-out!important}@media print{.midi-player,.no-print{display:none!important;visibility:hidden!important}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}