*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #000000;--color-panelBg: #243941;--color-panelBorder: #497582;--color-panelBorderLight: #828282;--color-panelBorderDark: #282828;--color-buttonFace: #515151;--color-buttonHighlight: #828282;--color-buttonShadow: #282828;--color-buttonText: #C2C2C2;--color-buttonActive: #414120;--color-buttonHover: #619AB6;--color-text: #C2C2C2;--color-textBright: #FFFFFF;--color-textDim: #515151;--color-textAccent: #619AB6;--color-headerBg: #243941;--color-headerText: #C2C2C2;--color-scrollbarBg: #282828;--color-scrollbarThumb: #515151;--font-family: "DotGothic16", "Consolas", "Courier New", monospace;--font-size-small: 11px;--font-size: 13px;--font-size-large: 15px;--font-size-title: 16px}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-scrollbarBg)}::-webkit-scrollbar-thumb{background:var(--color-scrollbarThumb);border:1px solid var(--color-panelBorderDark)}::-webkit-scrollbar-thumb:hover{background:var(--color-buttonHighlight)}.panel{background-color:var(--color-panelBg);border:1px solid var(--color-panelBorder);border-top-color:var(--color-panelBorderLight);border-left-color:var(--color-panelBorderLight);border-bottom-color:var(--color-panelBorderDark);border-right-color:var(--color-panelBorderDark)}.panel-inset{background-color:var(--color-bg);border:1px solid var(--color-panelBorderDark);border-top-color:var(--color-panelBorderDark);border-left-color:var(--color-panelBorderDark);border-bottom-color:var(--color-panelBorderLight);border-right-color:var(--color-panelBorderLight)}.ft2-button{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-buttonFace);color:var(--color-buttonText);border:1px solid;border-top-color:var(--color-buttonHighlight);border-left-color:var(--color-buttonHighlight);border-bottom-color:var(--color-buttonShadow);border-right-color:var(--color-buttonShadow);font-family:var(--font-family);font-size:var(--font-size-small);padding:4px 10px;cursor:pointer;min-width:28px;min-height:24px;transition:none}.ft2-button:hover{background-color:var(--color-buttonHover)}.ft2-button:active,.ft2-button.active{background-color:var(--color-buttonActive);border-top-color:var(--color-buttonShadow);border-left-color:var(--color-buttonShadow);border-bottom-color:var(--color-buttonHighlight);border-right-color:var(--color-buttonHighlight)}.label{color:var(--color-textDim);font-size:var(--font-size-small);text-transform:uppercase;letter-spacing:.5px}.value{color:var(--color-textBright);font-size:var(--font-size)}.panel-header,.header-bar{background-color:var(--color-headerBg);color:var(--color-headerText);padding:0 8px;height:22px;min-height:22px;font-size:var(--font-size-small);border-bottom:1px solid var(--color-panelBorderDark);display:flex;align-items:center;gap:8px;flex-shrink:0;letter-spacing:.5px}.panel-body{flex:1;min-height:0;overflow:hidden}.transport-bar{flex-shrink:0}.transport-controls{display:flex;align-items:center;gap:12px;padding:6px 8px;flex-wrap:wrap}.transport-logo{font-weight:700;color:var(--color-textBright);font-size:var(--font-size);letter-spacing:1px;white-space:nowrap}.transport-filename{color:var(--color-textAccent);font-size:var(--font-size-small);overflow:hidden;white-space:nowrap;flex:1;min-width:0}.transport-filename-inner{display:inline-block}.transport-filename.overflowing .transport-filename-inner{animation:filename-bounce 4s ease-in-out infinite alternate;animation-delay:1s}@keyframes filename-bounce{0%{transform:translate(0)}to{transform:translate(var(--scroll-distance))}}.transport-buttons{display:flex;gap:2px}.transport-buttons .ft2-button{font-size:14px;min-width:32px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}.transport-buttons .ft2-button svg{display:block;image-rendering:pixelated}.load-button{cursor:pointer!important}.transport-right .ft2-button{display:inline-flex;align-items:center;justify-content:center}.transport-right .ft2-button svg{display:block;image-rendering:pixelated}.transport-info{display:flex;gap:12px;align-items:center;white-space:nowrap}.transport-position,.transport-tempo{display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--color-bg);border:1px solid;border-top-color:var(--color-panelBorderDark);border-left-color:var(--color-panelBorderDark);border-bottom-color:var(--color-panelBorderLight);border-right-color:var(--color-panelBorderLight)}.transport-position .label,.transport-tempo .label{font-size:10px;text-transform:uppercase;letter-spacing:.5px}.transport-position .value,.transport-tempo .value{font-size:var(--font-size);min-width:28px;color:var(--color-textBright)}.transport-right{display:flex;align-items:center;gap:6px}.transport-volume{display:flex;align-items:center;gap:4px}.transport-volume .label{color:var(--color-textBright)}.volume-slider{-webkit-appearance:none;appearance:none;width:80px;height:4px;background:var(--color-panelBorderDark);outline:none;border:1px solid var(--color-panelBorder)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:18px;background:var(--color-buttonFace);border:1px solid;border-top-color:var(--color-buttonHighlight);border-left-color:var(--color-buttonHighlight);border-bottom-color:var(--color-buttonShadow);border-right-color:var(--color-buttonShadow);cursor:pointer}.volume-value{min-width:24px;text-align:right;font-size:var(--font-size-small)}@media(max-width:768px){.transport-controls{gap:6px;padding:4px 6px;justify-content:center}.transport-right .ft2-button[title]{display:none}.transport-right .ft2-button:last-child{display:inline-flex}.transport-info{gap:6px}.transport-info .transport-position,.transport-info .transport-tempo{padding:2px 4px;gap:3px}.volume-slider{width:50px}.transport-filename{order:8;flex:0 1 auto;max-width:140px}.transport-right{order:9}}.pattern-view{flex:1;overflow:hidden;position:relative;min-height:200px}.pattern-view canvas{display:block;width:100%;height:100%;touch-action:none}.visualizer{display:flex;flex-direction:column;overflow:hidden}.visualizer-canvas{cursor:pointer;position:relative}.visualizer-canvas canvas{display:block;width:100%;height:100%}.module-info{display:flex;flex-direction:column;overflow:hidden}.module-info-empty{padding:12px;text-align:center}.module-info-content{padding:6px 8px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}.info-row{display:flex;align-items:center;gap:8px}.info-row .label{min-width:60px;color:var(--color-textBright)}.info-title{color:var(--color-textAccent);font-weight:700}.info-tabs{display:flex;gap:2px;margin-top:6px;padding-top:4px;border-top:1px solid var(--color-panelBorderDark)}.info-tab{font-size:10px!important;padding:2px 8px!important;min-height:18px!important;min-width:0!important}.info-list{flex:1;overflow-y:auto;padding:2px;font-size:var(--font-size-small)}.info-list-item{display:flex;gap:6px;padding:1px 4px;line-height:1.4}.info-list-item:hover{background-color:var(--color-panelBg)}.info-list-clickable{cursor:pointer}.info-list-active{background-color:var(--color-currentRow)!important;color:var(--color-textBright)}.info-list-active .info-list-index{color:var(--color-textAccent);font-weight:700}.info-list-index{color:var(--color-textDim);min-width:20px}.info-list-name{color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.confirm-overlay{position:fixed;inset:0;z-index:9999;background:#00000080;display:flex;align-items:center;justify-content:center}.confirm-dialog{background:var(--color-panelBg);border:2px solid;border-color:var(--ft2-border-light, var(--color-panelBorderLight)) var(--ft2-border-dark, var(--color-panelBorderDark)) var(--ft2-border-dark, var(--color-panelBorderDark)) var(--ft2-border-light, var(--color-panelBorderLight));box-shadow:2px 2px #00000080;padding:16px 20px;min-width:220px;max-width:360px;text-align:center}.confirm-message{color:var(--color-text);font-size:var(--font-size);margin-bottom:14px;line-height:1.4}.confirm-buttons{display:flex;gap:8px;justify-content:center}.confirm-btn-yes,.confirm-btn-no{min-width:64px;padding:3px 12px;font-size:var(--font-size-small);cursor:pointer}.library{display:flex;flex-direction:column;height:100%}.library .panel-header{display:flex;align-items:center;justify-content:space-between}.library-title{flex:1}.library-toolbar{display:flex;gap:2px;align-items:center}.library-toolbar-btn{background:none;border:1px solid;border-color:var(--ft2-border-light) var(--ft2-border-dark) var(--ft2-border-dark) var(--ft2-border-light);color:var(--color-text);cursor:pointer;font-size:12px;padding:1px 4px;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:18px}.library-toolbar-btn:hover{background:var(--color-libraryHover)}.library-toolbar-btn:disabled{opacity:.3;cursor:default}.library-toolbar-btn svg{image-rendering:pixelated}.library-breadcrumb{padding:3px 6px;font-size:var(--font-size-small);color:var(--color-textDim);border-bottom:1px solid var(--ft2-border-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-breadcrumb-item{cursor:pointer;color:var(--color-text)}.library-breadcrumb-item:hover{color:var(--color-textBright)}.library-breadcrumb-sep{color:var(--color-textAccent);padding:0 2px;font-weight:700}.library-content{overflow-y:auto;padding:0}.library-item{display:flex;align-items:center;gap:6px;padding:3px 6px;cursor:pointer;font-size:var(--font-size-small)}.library-item:hover{background-color:var(--color-libraryHover)}.library-item-selected{background-color:var(--color-librarySelected)!important}.library-item-active{background-color:var(--color-libraryPlaying)!important;color:var(--color-textBright)}.library-item-active .library-item-index,.library-item-active .library-item-playing{color:var(--color-textBright)}.library-item-playing{color:var(--color-libraryPlaying);font-size:10px;margin-left:auto}.library-item-icon{font-size:12px;min-width:16px;text-align:center}.library-item-folder{cursor:pointer}.library-item-builtin{color:var(--color-textAccent)}.library-item-index{color:var(--color-textDim);min-width:20px}.library-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-rename-input{flex:1;background:var(--color-libraryBg);border:1px solid var(--ft2-border-dark);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-small);padding:1px 4px;outline:none}.library-separator{height:1px;background:var(--ft2-border-dark);margin:0 6px}.library-empty{padding:16px;text-align:center}.file-drop-zone{width:100%;height:100%;position:relative}.file-drop-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none}.file-drop-message{padding:40px 60px;text-align:center;animation:dropPulse 1s ease-in-out infinite alternate}.file-drop-icon{font-size:48px;margin-bottom:12px}.file-drop-text{color:var(--color-textBright);font-size:var(--font-size-large);font-weight:700;margin-bottom:8px}.file-drop-formats{color:var(--color-textDim);font-size:var(--font-size-small);letter-spacing:2px}@keyframes dropPulse{0%{transform:scale(1);opacity:.9}to{transform:scale(1.05);opacity:1}}.settings-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:900}.settings-dialog{width:440px;max-height:80vh;display:flex;flex-direction:column}.settings-dialog .header-bar,.settings-dialog .panel-header{display:flex;align-items:center;justify-content:space-between}.settings-close{min-width:18px!important;min-height:16px!important;padding:0!important;position:relative;display:inline-flex;align-items:center;justify-content:center}.settings-close:before,.settings-close:after{content:"";position:absolute;width:8px;height:1.5px;background:currentColor}.settings-close:before{transform:rotate(45deg)}.settings-close:after{transform:rotate(-45deg)}.settings-content{padding:8px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.settings-section{display:flex;flex-direction:column;gap:6px}.settings-section>.label{color:var(--color-textBright)}.settings-buttons{display:flex;gap:4px;flex-wrap:wrap}.settings-buttons .ft2-button{font-size:11px}.settings-scale{display:flex;align-items:center;gap:8px}.settings-scale .volume-slider{flex:1}.settings-scale .value{min-width:36px;text-align:right;font-size:var(--font-size-small)}.mobile-tab-bar{display:none}@media(max-width:768px){.mobile-tab-bar{display:flex;flex-shrink:0;gap:2px;padding:2px}.mobile-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 0;min-height:40px;font-size:10px}.mobile-tab-btn svg{display:block;image-rendering:pixelated}.mobile-tab-label{font-size:10px;letter-spacing:.5px}}.toast{position:fixed;bottom:60px;left:50%;transform:translate(-50%);z-index:10000;padding:8px 18px;font-size:12px;color:#e0e0e0;background:#1a1a2e;border:1px solid #444;box-shadow:0 2px 8px #00000080;animation:toast-in .2s ease-out,toast-out .3s ease-in 2.7s forwards;pointer-events:none;white-space:nowrap}.toast-error{color:#ff6b6b}.toast-success{color:#69db7c}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}.app{width:100%;height:100%;display:flex;flex-direction:column;background-color:var(--color-bg);padding:2px;gap:2px}.app-main{flex:1;display:flex;gap:2px;overflow:hidden;min-height:0}.app-left{width:220px;min-width:220px;flex-shrink:0}.app-center{flex:1;display:flex;flex-direction:column;min-width:0}.app-right{width:280px;min-width:280px;display:flex;flex-direction:column;gap:2px}.app-right .module-info{flex:1;min-height:0}.app-right .visualizer{height:180px;flex-shrink:0}.panel-hidden{display:none!important}@media(max-width:1024px){.app-left{width:200px;min-width:200px}.app-right{width:240px;min-width:240px}}@media(max-width:768px){.app{padding:1px;gap:1px}.app-main{flex-direction:column;overflow:hidden}.app-left,.app-center,.app-right{display:none!important;width:100%;min-width:0}.app-left.mobile-active,.app-center.mobile-active{display:flex!important;flex:1;flex-direction:column;min-height:0}.app-right.mobile-active{display:flex!important;flex:1;flex-direction:column;min-height:0;gap:1px}.app-right.mobile-active .module-info{flex:1;min-height:0;overflow-y:auto}.app-right.mobile-active .visualizer{height:140px;flex-shrink:0}}