:root{--color-primary: #06b6d4;--color-primary-dark: #0891b2;--color-gray-50: #f7fafc;--color-gray-100: #f3f3f3;--color-gray-200: #e2e8f0;--color-gray-300: #cbd5e0;--color-gray-400: #a0aec0;--color-gray-500: #718096;--color-gray-600: #64748b;--color-gray-700: #2d3748;--color-gray-800: #252525;--color-error: #e53e3e;--color-error-dark: #dc2626;--color-success: #10b981;--color-track-1: #3b82f6;--color-track-2: #10b981;--color-track-3: #f97316;--color-track-4: #ef4444;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.875rem;--space-8: 2.5rem;--text-xs: .75rem;--text-sm: .85rem;--text-base: 1rem;--text-md: 1.1rem;--text-lg: 1.5rem;--text-xl: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-full: 50%;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .2);--shadow-glow-error: 0 0 12px rgba(239, 68, 68, .6);--transition-fast: .1s;--transition-normal: .3s;--transition-ease: ease-in-out;--container-max-width: 900px;--piano-roll-height: 650px;--piano-roll-label-width: 35px}*{margin:0;padding:0;box-sizing:border-box}html{background:var(--color-primary)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--color-primary);min-height:100vh;padding:var(--space-5)}.container{max-width:var(--container-max-width);margin:0 auto}#app{background:#fff;border-radius:var(--radius-lg);padding:var(--space-7)}.hidden{display:none!important}.loading{text-align:center;padding:var(--space-8)}.spinner{width:50px;height:50px;border:4px solid var(--color-gray-100);border-top:4px solid var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-5)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{text-align:center;padding:var(--space-8);color:var(--color-error)}.error-message{font-size:var(--text-md);margin-bottom:var(--space-5)}.url-input{text-align:center;padding:var(--space-8) var(--space-5)}.url-input h2{margin-bottom:var(--space-5);color:var(--color-gray-700)}.url-input input{width:100%;max-width:500px;padding:var(--space-3) var(--space-4);font-size:var(--text-base);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);margin-bottom:var(--space-4);transition:border-color var(--transition-normal)}.url-input input:focus{outline:none;border-color:var(--color-primary)}.btn{padding:var(--space-1) var(--space-2);font-size:var(--text-sm);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-normal),transform .1s;background:var(--color-gray-200);color:var(--color-gray-700);display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;touch-action:manipulation}.btn:hover{background:var(--color-gray-300)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.btn--primary,.btn-primary{background:var(--color-primary);color:#fff}.btn--primary:hover,.btn-primary:hover{background:var(--color-primary-dark)}.btn--large{padding:var(--space-4) var(--space-7);font-size:var(--text-lg);height:48px}#play-pause-btn{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;padding:0;flex-shrink:0}#play-pause-btn:hover{background:var(--color-primary-dark)}.play-icon,.pause-icon{display:block;width:24px;height:24px}.play-icon{margin-left:2px}#restart-btn svg,.tempo-reset-btn svg{display:block;width:14px;height:14px}.loop-btn.active{background:var(--color-primary);color:#fff}.loop-btn.active:hover{background:var(--color-primary-dark)}.autoplay-btn.active{background:var(--color-primary);color:#fff}.autoplay-btn.active:hover{background:var(--color-primary-dark)}.hold-btn.active{background:var(--color-error);color:#fff;box-shadow:var(--shadow-glow-error)}.hold-btn.active:hover{background:var(--color-error-dark)}.metronome-toggle-btn.active{background:var(--color-primary);color:#fff}.metronome-toggle-btn.active:hover{background:var(--color-primary-dark)}.metronome-division-btn.active{background:var(--color-primary);color:#fff}.metronome-division-btn.active:hover{background:var(--color-primary-dark)}.track-btn{width:100%;background:color-mix(in srgb,var(--track-color) 15%,white)}.track-btn:hover{background:color-mix(in srgb,var(--track-color) 30%,white)}.track-btn.active{background:var(--track-color);color:#fff;font-weight:700}.track-btn.active:hover{background:color-mix(in srgb,var(--track-color) 85%,black)}.player{display:flex;flex-direction:column;gap:var(--space-6)}.midi-title{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5);background:var(--color-gray-50);border-radius:var(--radius-md)}.midi-title .app-name{margin:0;color:var(--color-primary);font-size:var(--text-xl);font-weight:700;flex-shrink:0}.midi-title h2{margin:0;color:var(--color-gray-700);font-size:var(--text-lg);font-weight:700;flex:1}.midi-title h2:empty{display:none}.playlist-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);flex:1}.playlist-header{display:none}.playlist-current-song{font-size:var(--text-sm);color:var(--color-gray-700);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%;display:none}.playlist-toggle{padding:var(--space-1) var(--space-2);background:transparent;border:none;cursor:default;color:var(--color-gray-700);font-size:var(--text-sm);font-weight:600;flex-shrink:0}.playlist-count,.playlist-toggle .toggle-arrow,.playlist-icon,.playlist-backdrop{display:none}.playlist-drawer{position:static;background:#fff;border:2px solid var(--color-gray-200);border-radius:var(--radius-md);max-height:128px;overflow:hidden;width:100%}.playlist-items{max-height:128px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-gray-300) var(--color-gray-50)}.playlist-items::-webkit-scrollbar{width:6px}.playlist-items::-webkit-scrollbar-track{background:var(--color-gray-50)}.playlist-items::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:3px}.playlist-items::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}.playlist-item{padding:var(--space-1) var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-700);background:#fff;border-bottom:1px solid var(--color-gray-200);cursor:pointer;transition:background-color var(--transition-normal);min-height:28px;display:flex;align-items:center}.playlist-item:last-child{border-bottom:none}.playlist-item:hover{background:var(--color-gray-50)}.playlist-item.active{background:#e0f2fe;color:var(--color-primary-dark);font-weight:700}.playlist-item.active:hover{background:#bae6fd}.controls{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--color-gray-50);border-radius:var(--radius-md);flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:var(--space-2);height:auto}.control-group:first-child{gap:var(--space-3);flex:40}.control-group:nth-child(2){flex:15}.control-group:nth-child(3){flex:15}.control-group:nth-child(4){flex:30}.playback-main{display:flex;align-items:center;gap:var(--space-3);height:auto}.time-and-nav{display:flex;flex-direction:column;gap:var(--space-1-5);align-items:stretch;flex:1}.time-song-row{display:flex;gap:var(--space-2);align-items:center}.time-display{flex:1;font-size:var(--text-sm);font-weight:500;color:var(--color-gray-700);font-variant-numeric:tabular-nums;text-align:center;padding:var(--space-1) var(--space-2);background:var(--color-gray-200);border-radius:var(--radius-md);box-sizing:border-box;height:28px;display:flex;align-items:center;justify-content:center;min-width:0}.song-indicator{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;font-size:.75rem;font-weight:600;background:var(--color-gray-200);border-radius:var(--radius-sm);color:var(--color-gray-700);height:28px;box-sizing:border-box}.nav-buttons{display:flex;gap:var(--space-2);align-items:center}.nav-buttons button{flex:1}.mode-controls{display:flex;flex-direction:column;gap:var(--space-1-5);height:auto}.mode-controls button{width:100%}.ab-loop-controls{display:flex;flex-direction:column;gap:var(--space-1-5);height:auto}.ab-loop-row{display:flex;gap:var(--space-2);align-items:center;width:100%}.ab-loop-row button{flex:1}.ab-loop-controls #hold-btn{width:100%}.tempo-section{gap:var(--space-2);height:auto}.tempo-controls-wrapper{display:grid;grid-template-columns:74px 1fr 1fr 1fr;column-gap:var(--space-2);row-gap:var(--space-1-5);align-items:center;width:100%}.tempo-row{display:contents}.tempo-reset-btn{width:74px}.input-with-unit{position:relative;width:100%}input[type=number]{width:100%;padding:var(--space-1) 28px var(--space-1) var(--space-2);font-size:var(--text-sm);border:2px solid var(--color-gray-200);border-radius:var(--radius-sm);background:#fff;color:var(--color-gray-700);font-weight:500;transition:border-color var(--transition-normal);height:28px;box-sizing:border-box;appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield}input[type=number]:focus{outline:none;border-color:var(--color-primary)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-moz-appearance:none;appearance:none;-webkit-appearance:none;margin:0}.input-unit{position:absolute;right:var(--space-1-5, 5px);top:50%;transform:translateY(-50%);font-size:var(--text-xs);font-weight:500;color:var(--color-gray-500);pointer-events:none}.seek-container{position:relative;height:8px;background:var(--color-gray-200);border-radius:var(--radius-sm);cursor:pointer}.seek-bar{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.seek-progress{height:100%;background:var(--color-primary);border-radius:var(--radius-sm);transition:width var(--transition-fast) linear;pointer-events:none}.ab-loop-region{position:absolute;top:0;height:100%;background:#fbbf244d;pointer-events:none;display:none;z-index:0}.loop-point-marker{position:absolute;top:-4px;width:3px;height:16px;pointer-events:none;display:none;z-index:1;transform:translate(-50%)}.loop-point-a{background:var(--color-success);box-shadow:0 0 4px #10b98199}.loop-point-b{background:var(--color-error);box-shadow:0 0 4px #ef444499}.piano-roll-container{display:flex;flex-direction:row;height:var(--piano-roll-height);padding:var(--space-5);background:var(--color-gray-50);border-radius:var(--radius-md);gap:var(--space-4);overflow:hidden}.track-controls{display:flex;flex-direction:column;width:100px;min-height:0;gap:0}.track-control-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);flex:1;min-height:0;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-gray-200)}.track-control-row:last-child{border-bottom:none}.track-label{font-weight:700;font-size:var(--text-lg);color:var(--color-gray-700);margin-bottom:var(--space-1)}.soprano-label{color:var(--color-track-1)}.alto-label{color:var(--color-track-2)}.tenor-label{color:var(--color-track-3)}.bass-label{color:var(--color-track-4)}.track-buttons{display:flex;flex-direction:column;gap:var(--space-1);width:100%}#piano-roll-canvas{flex:1;min-width:0;min-height:0;background:#fff;border-radius:var(--radius-md);border:1px solid var(--color-gray-200);cursor:grab;display:block}#piano-roll-canvas:active{cursor:grabbing}.info-card{padding:var(--space-3) var(--space-4);background:var(--color-gray-50);border-radius:var(--radius-sm);font-size:.8rem;color:var(--color-gray-600);display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.quick-reference{display:grid;grid-template-columns:minmax(120px,auto) minmax(80px,auto) minmax(110px,auto) 1fr;gap:2px var(--space-4);align-items:center}.quick-reference .ref-header{font-size:.7rem;font-weight:700;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.5px;padding-bottom:var(--space-1)}.quick-reference .ref-center{text-align:center}.quick-reference .ref-category{grid-column:1 / -1;font-size:var(--text-sm);font-weight:700;color:var(--color-gray-700);margin:0;padding-top:var(--space-3);margin-top:var(--space-2);padding-bottom:var(--space-1);border-top:1px solid var(--color-gray-300)}.quick-reference .ref-category:nth-child(5){margin-top:0}.quick-reference .ref-feature,.quick-reference .ref-button,.quick-reference .ref-shortcut,.quick-reference .ref-desc{padding:2px 0;line-height:1.3}.quick-reference .ref-button{display:flex;align-items:center;justify-content:center;text-align:center}.quick-reference .ref-btn{display:inline-flex;align-items:center;justify-content:center;padding:3px 6px;font-size:.75rem;font-weight:600;background:var(--color-gray-200);border:none;border-radius:var(--radius-sm);color:var(--color-gray-700);min-width:22px;height:22px}.quick-reference .ref-btn-primary{background:var(--color-primary);color:#fff}.quick-reference .ref-btn-round{border-radius:var(--radius-full);width:24px;height:24px;min-width:24px;padding:0}.quick-reference .ref-btn svg{display:block;flex-shrink:0}.quick-reference kbd{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--space-1-5);font-size:var(--text-xs);font-family:monospace;background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);color:var(--color-gray-700);font-weight:600;min-width:22px;height:18px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:var(--color-gray-700);color:#fff;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:.95rem;font-weight:500;box-shadow:0 4px 12px #0000004d;opacity:0;pointer-events:none;transition:opacity var(--transition-normal) var(--transition-ease);z-index:1000;max-width:90%;text-align:center}.toast.show{opacity:1;pointer-events:auto}@media(max-width:900px)and (min-width:746px){.controls{gap:var(--space-2);padding:var(--space-3)}.control-group,.control-group:first-child,.time-and-nav,.time-song-row,.nav-buttons,.ab-loop-row,.tempo-controls-wrapper{gap:var(--space-1-5)}}@media(max-width:745px){body{padding:var(--space-2)}#app{padding:var(--space-2-5)}.player{gap:var(--space-3)}.midi-title{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);padding:var(--space-2-5)}.midi-title .app-name{font-size:var(--text-lg);grid-column:1;grid-row:1}.midi-title h2{font-size:1.2rem;grid-column:1 / -1;grid-row:2}.playlist-container{grid-column:1 / -1;grid-row:2;display:contents}.playlist-header{display:contents}.playlist-current-song{display:block;font-size:var(--text-sm);grid-column:1 / -1;grid-row:2}.playlist-toggle{background:var(--color-gray-200);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-normal);grid-column:2;grid-row:1;align-self:start;height:28px;width:28px;display:flex;align-items:center;justify-content:center;padding:0}.playlist-toggle:hover{background:var(--color-gray-300)}.playlist-icon{display:block}.playlist-backdrop{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999;opacity:0;pointer-events:none;transition:opacity var(--transition-normal) ease-out}.playlist-backdrop:not(.collapsed){opacity:1;pointer-events:auto}.playlist-drawer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1000;max-height:75vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--transition-normal) ease-out,box-shadow var(--transition-normal) ease-out}.playlist-drawer:not(.collapsed){transform:translateY(0);box-shadow:0 -4px 20px #00000040}.playlist-items{flex:1;overflow-y:auto;max-height:75vh}.playlist-item{min-height:44px;padding:var(--space-3) var(--space-4);font-size:var(--text-base)}.controls{display:grid;grid-template-columns:repeat(20,1fr);column-gap:var(--space-3);row-gap:var(--space-3);padding:var(--space-2)}.control-group,.control-group:first-child,.control-group:nth-child(2),.control-group:nth-child(3),.control-group:nth-child(4){gap:var(--space-1);flex:unset}.control-group:first-child{grid-column:1 / 16}.control-group:nth-child(2){grid-column:16 / 21}.control-group:nth-child(3){grid-column:1 / 8}.control-group:nth-child(4){grid-column:8 / 21}.time-and-nav,.time-song-row,.nav-buttons,.ab-loop-row{gap:var(--space-1)}.time-display{min-width:80px;padding:var(--space-1)}.tempo-controls-wrapper{gap:var(--space-1)}.piano-roll-container{flex-direction:column-reverse;height:auto;padding:var(--space-2)}.track-controls{width:100%;flex-direction:column;gap:0}.track-control-row{flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--space-1);padding:2px var(--space-1);border-bottom:none;background:transparent!important}.track-label{flex:0 0 auto;font-size:1.1rem;margin-bottom:0;margin-right:0}.track-buttons{flex-direction:row;flex:1;width:auto;gap:var(--space-1)}.track-btn{flex:1}#piano-roll-canvas{height:350px;flex:none}.quick-reference{grid-template-columns:1fr auto auto;gap:var(--space-1) var(--space-2);font-size:.9rem}.quick-reference .ref-header{display:none}.quick-reference .ref-category{grid-column:1 / -1;font-size:.95rem;padding-top:var(--space-3);margin-top:var(--space-2);padding-bottom:var(--space-1-5)}.quick-reference .ref-category:first-of-type{padding-top:0;margin-top:0}.quick-reference .ref-feature{grid-column:1;font-size:1rem;padding-bottom:0}.quick-reference .ref-button{grid-column:2;justify-content:flex-end}.quick-reference .ref-shortcut{grid-column:3;text-align:right}.quick-reference .ref-desc{grid-column:1 / -1;padding-top:0;padding-bottom:var(--space-3)}.quick-reference .ref-btn{font-size:.7rem;padding:2px 4px;min-width:20px;height:20px}.quick-reference .ref-btn-round{width:22px;height:22px;min-width:22px}.quick-reference .ref-btn svg{width:10px;height:10px}.quick-reference .ref-btn-round svg{width:12px;height:12px}.quick-reference kbd{font-size:.7rem;padding:2px 5px;min-width:20px;height:16px}.ios-notice{padding:var(--space-2) var(--space-3)}}