html{width:100%;margin:0;padding:0;position:relative}body{color:#fff;background:radial-gradient(circle at top,#1f2937,#020617);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:system-ui,sans-serif;display:flex;overflow:hidden}.floating-table-btn{z-index:9999;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;backdrop-filter:blur(12px);border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:22px;display:flex;position:fixed;bottom:15px;right:15px;box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff1a}.floating-table-btn:hover{transform:scale(1.1)}.col-mp3{width:150px}.sheet-delete{cursor:pointer;color:red;text-align:left}.seq-pad{background:#ffffff38!important}.seq-pad.seq-on{border:2px solid #ef4444;background:#ef444474!important}.song-number{text-shadow:1px 1px #ffffff24;color:#131b2a;opacity:.8;pointer-events:none;z-index:-1;justify-content:center;align-items:center;font-size:5em;font-weight:700;line-height:1;display:flex;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.stop-pad{background:linear-gradient(145deg,#7f1d1d,#450a0a)}.stop-pad:hover{background:linear-gradient(145deg,#991b1b,#7f1d1d)}.sheet-table input{color:#fff;text-align:center;width:100%;font:inherit;background:0 0;border:none;outline:none}.pad-grid{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;width:95%;max-width:900px;max-height:calc(100vh - 120px);margin:0 auto;padding:10px 10px 80px;display:grid;overflow-y:auto}.pad{aspect-ratio:1;-webkit-backdrop-filter:blur(12px);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:5px;justify-content:flex-start;align-items:center;transition:all .2s;display:flex;position:relative;box-shadow:0 8px 40px #0006,inset 0 1px #fff3,inset 0 -1px #ffffff0d}.pad:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,#ffffff28,#ffffff0d 30%,#0000 60%);position:absolute;inset:0}.pad.selected{outline:3px solid #00ffcc32}.pad-key{text-shadow:1px 1px #ffffff24;z-index:0;color:#131b2a;opacity:.8;pointer-events:none;justify-content:end;align-items:center;font-size:110px;font-weight:700;line-height:1;display:flex;position:absolute;top:0;right:5px;overflow:hidden}.playstop{top:10px;font-size:20px!important}.pad:hover{background:linear-gradient(145deg,#374151,#1f2937)}.pad:active{transform:scale(.96)}.pad-title{word-break:break-word;overflow-wrap:anywhere;text-transform:uppercase;text-align:left;z-index:1;padding:10px;font-size:14px;line-height:1.2}.pad-info{z-index:1;text-align:center;opacity:.7;background:#131b2a;border-radius:3px;width:90%;margin:0 auto;padding:1px;font-size:11px;position:absolute;bottom:8px;left:0;right:0;box-shadow:1px 1px #ffffff24}.pad-note{z-index:5;cursor:pointer;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;display:flex;position:absolute;top:5px;left:5px}.notes-modal{backdrop-filter:blur(6px);z-index:9999;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.notes-box{backdrop-filter:blur(12px);color:#fff;background:#131b2ad6;border:1px solid #ffffff14;border-radius:5px;width:300px;max-width:90%;padding:15px;box-shadow:0 8px 40px #0006,inset 0 1px #fff3}.notes-close{cursor:pointer;background:#1e293b;border:1px solid #334155;border-radius:5px;margin-top:10px;padding:5px 10px}.pad-counter{color:#131b2a;z-index:0;text-shadow:1px 1px #ffffff24,-1px 1px #ffffff24,1px -1px #ffffff24,-1px -1px #ffffff24;opacity:.8;pointer-events:none;justify-content:center;align-items:center;margin-top:6px;font-size:40px;font-weight:700;line-height:1;display:flex;position:absolute;inset:0;overflow:hidden}.pad-counter .beat{color:#0fc;font-weight:700}.loader{z-index:999;backdrop-filter:blur(6px);background:#0009;justify-content:center;align-items:center;font-size:18px;display:flex;position:fixed;inset:0}.loader:after{content:"";border:4px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.pad.loading{opacity:.5;pointer-events:none;opacity:.7;pointer-events:none}.pad.loading:after{content:"";border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:10px;height:10px;animation:.8s linear infinite spin;position:absolute;top:8px;left:8px}.pad.queued{background:linear-gradient(145deg,#2563eb00,#1e40af7e)}.pad.active{background:linear-gradient(145deg,#16a34a00,#16653400)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.01)}to{transform:scale(1)}}.pad.active{background:linear-gradient(145deg,#16a34a00,#166534);animation:1s infinite pulse}.metro-volume{appearance:none;background:#ffffff26;border-radius:10px;outline:none;width:90%;height:4px;margin:0 auto;position:absolute;top:20px;left:0;right:0}.metro-volume::-webkit-slider-runnable-track{background:linear-gradient(90deg,#505d70,#4f5051);border-radius:10px;height:2px}.metro-volume::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#131b2a;border-radius:50%;width:14px;height:14px;margin-top:-5px;transition:transform .1s;box-shadow:0 0 1px #c1c1c1cc}.top-bar-wrapper{z-index:1000;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;top:10px;left:10px;right:10px}.top-menu-panel{backdrop-filter:blur(12px);flex-direction:column;gap:8px;padding:8px;display:flex;position:absolute;top:50px;left:0}.top-menu-panel.hidden{display:none}.top-bar{z-index:10;justify-content:space-between;align-items:center;width:95%;padding:12px 16px;display:flex;position:fixed;bottom:15px}.top-bar-menu{z-index:1000;gap:8px;display:flex;position:fixed;top:10px;right:10px}.top-menu-panel .pad-mini{white-space:nowrap;border-radius:0;width:auto;height:auto;padding:6px 10px;font-size:12px}.pad-mini{cursor:pointer;backdrop-filter:blur(12px);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:6px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex;box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff1a}.pad-mini:hover{background:linear-gradient(145deg,#374151,#1f2937)}.pad-mini:active{transform:scale(.92)}.song-nav{cursor:pointer;border:none;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.arrow{border-top:2px solid #fff;border-right:2px solid #fff;width:10px;height:10px}.arrow.right{transform:rotate(45deg)}.arrow.left{transform:rotate(-135deg)}.song-title{text-transform:uppercase;text-align:left;flex:1;font-size:16px;font-weight:600}.song-nav{color:#fff;cursor:pointer;background:#fff0;border:none;width:36px;height:36px;transition:all .2s}.song-nav:hover{background:#fff3}.sheet-drag{text-align:center;width:34px}.drag-handle{cursor:grab;-webkit-user-select:none;user-select:none;opacity:.65;font-size:18px}.drag-handle:hover{opacity:1}.dragging{opacity:.4}.pad.not-loaded{opacity:.5;filter:grayscale();background:linear-gradient(145deg,#16a34a00,#7d0909)}.pad-missing{background:#0009;border-radius:4px;padding:2px 5px;font-size:12px;position:absolute;top:5px;left:5px}.pad.needs-download{outline:2px solid orange}.sheet-editor{color:#e2e8f0;z-index:9999;background:linear-gradient(#0b1220,#05080f);padding:20px;font-family:system-ui,sans-serif;position:fixed;inset:0;overflow:auto}.sheet-title{color:#94a3b8;margin-bottom:12px;font-size:18px;font-weight:600}.sheet-close,.sheet-add{z-index:10000;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(12px);background:#ffffff0d;border-radius:6px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;transition:all .2s;display:flex;position:fixed;box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff1a}.sheet-close{font-size:14px;bottom:15px;right:15px}.sheet-add{font-size:26px;top:15px;right:15px}.sheet-close:hover,.sheet-add:hover{background:linear-gradient(145deg,#374151,#1f2937)}.sheet-close:active,.sheet-add:active{transform:scale(.92)}.sheet-move{display:flex}.sheet-move button{color:#e2e8f0;cursor:pointer;background-color:#0000;border:none;border-radius:6px;padding:6px 12px;position:sticky;top:0}.sheet-move button:hover{background:#334155}.sheet-table{border-collapse:collapse;width:100%;font-size:12px}.sheet-delete{width:40px}.sheet-move{width:80px;position:relative;top:8px}.sheet-drag{width:30px}.sheet-table th{color:#38bdf8;text-align:left;background:#020617;border-bottom:1px solid #1e293b;padding:8px;font-weight:600;position:sticky;top:0}.sheet-table tr{transition:background .15s}.sheet-table tr:nth-child(2n){background:#ffffff05}.sheet-table tr:hover{background:#38bdf814}.sheet-table td{background:0 0;border-bottom:1px solid #0f172a;min-width:60px;padding:1px 8px}.sheet-table td button{color:#e2e8f0;cursor:pointer;background-color:#0000;border:none;border-radius:6px;padding:6px 12px;position:sticky;top:0}.sheet-table td button:hover{background:#334155}.sheet-table td:focus{background:#38bdf826;outline:none;box-shadow:inset 0 0 0 1px #38bdf8}@media (width<=900px){.pad-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media (width<=600px){.pad-counter{color:#5f6164;text-shadow:none;font-size:20px}.pad-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.pad-key{justify-content:end;align-items:baseline;font-size:40px;display:flex;top:0;right:4px}.playstop{font-size:20px!important;top:10px!important}.pad-info{width:95%;font-size:8px;bottom:0}}