#root{height:100vh}:root{--bg: #f0f0f0;--bg-alt: #e8e8e8;--surface: #ffffff;--surface-hover: #eeeeee;--border: #dcdcdc;--border-strong: #a0a0a0;--text: #1a1a1a;--text-2: #4a4a4a;--text-3: #707070;--text-4: #aaaaaa;--accent: #4a4a4a;--accent-faint: #c8c8c8}[data-theme=dark]{--bg: #0d0d0d;--bg-alt: #1a1a1a;--surface: #1e1e1e;--surface-hover: #272727;--border: #2a2a2a;--border-strong: #555555;--text: #e8e8e8;--text-2: #b0b0b0;--text-3: #808080;--text-4: #505050;--accent: #c0c0c0;--accent-faint: #383838}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:14px;transition:background-color .2s,color .2s}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.app{display:flex;flex-direction:column;height:100vh;min-height:0;animation:pageFadeIn .25s ease}.app__header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#000;flex-shrink:0}.app__header .material-symbols-outlined{color:#fff;font-size:32px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 32}.app__header-logo{display:flex;align-items:center;gap:16px;background:none;border:none;cursor:pointer;padding:0;border-radius:6px;text-decoration:none;transition:opacity .15s}.app__header-logo:hover{opacity:.75}.app__header-nav{display:flex;align-items:center;gap:4px;margin-left:24px}.app__header-nav-link{padding:5px 12px;border-radius:5px;font-size:13px;font-weight:600;color:#ffffff8c;text-decoration:none;transition:color .15s,background .15s}.app__header-nav-link:hover{color:#fff;background:#ffffff14}.app__header-nav-link--active{color:#fff;background:#ffffff1f}.app__header-theme-btn{display:flex;align-items:center;justify-content:center;margin-left:auto;background:none;border:none;cursor:pointer;padding:5px;border-radius:6px;transition:background .15s}.app__header-theme-btn:hover{background:#ffffff1a}.app__header-theme-btn .material-symbols-outlined{font-size:20px;color:#ffffffb3;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 20}.app__title{font-size:18px;font-weight:700;letter-spacing:.04em;color:#fff;white-space:nowrap}.app__main{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden;background:var(--bg-alt)}.piano-roll-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;overflow:hidden;margin:0 25px}.piano-roll-column{display:flex;flex-direction:column;width:100%;max-width:calc(100vw * 2 / 3)}.piano-roll-toolbar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 0}.piano-roll-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden}.piano-roll-canvas{position:absolute;inset:0;width:100%;height:100%}.piano-roll-controls{position:absolute;bottom:0;left:0;right:0;padding:8px 16px;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 100%);opacity:0;pointer-events:none;transition:opacity .2s}.piano-roll-wrapper--ready:hover .piano-roll-controls,.piano-roll-wrapper--ready:fullscreen:hover .piano-roll-controls,.piano-roll-wrapper--ready.piano-roll-wrapper--fake-fs .piano-roll-controls{opacity:1;pointer-events:auto}.piano-roll-wrapper--fs-idle{cursor:none}.piano-roll-wrapper--fs-idle .piano-roll-controls{opacity:0!important;pointer-events:none!important}.piano-roll-controls .controls__time{color:#ffffffd9;text-align:center}.piano-roll-wrapper:fullscreen,.piano-roll-wrapper--fake-fs{background:#000;display:flex;align-items:center;justify-content:center;width:100vw;height:100dvh}.piano-roll-wrapper--fake-fs{position:fixed;inset:0;z-index:9998;height:100dvh}.piano-roll-wrapper:fullscreen .piano-roll-canvas,.piano-roll-wrapper--fake-fs .piano-roll-canvas{position:static;inset:unset;flex:none;max-width:100%;max-height:100%;width:auto;height:auto}.sidebar{flex:1;min-width:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:20px;padding:16px 12px;overflow-y:auto;max-width:clamp(0px,15vw,270px)}.sidebar__group{display:flex;flex-direction:column;gap:10px}.sidebar__label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px;white-space:nowrap}.sidebar__slider-row{display:flex;align-items:center;gap:12px}.dual-range{position:relative;flex:1;height:20px;display:flex;align-items:center}.dual-range:before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent-faint) var(--pct-low),var(--accent) var(--pct-low),var(--accent) var(--pct-high),var(--accent-faint) var(--pct-high));pointer-events:none}.dual-range input[type=range]{position:absolute;width:100%;height:100%;margin:0;padding:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}.dual-range input[type=range]::-webkit-slider-runnable-track{background:transparent;height:4px}.dual-range input[type=range]::-moz-range-track{background:transparent;height:4px}.dual-range input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;margin-top:-6px;box-shadow:0 1px 3px #0000004d}.dual-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;box-shadow:0 1px 3px #0000004d}.sidebar__slider{width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--pct, 0%),var(--accent-faint) var(--pct, 0%));outline:none;align-self:center}.sidebar__slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;box-shadow:0 1px 3px #0000004d}.sidebar__slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;box-shadow:0 1px 3px #0000004d}.sidebar__slider::-moz-range-track{height:4px;border-radius:2px;background:var(--accent-faint)}.sidebar__color-swatch{width:100%;height:24px;border-radius:5px;border:1px solid var(--accent-faint);cursor:pointer;padding:0;transition:box-shadow .1s,transform .1s}.sidebar__color-swatch:hover{box-shadow:0 0 0 2px #00000026;transform:scale(1.02)}.sidebar__value{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-2);text-align:left;white-space:nowrap;flex-shrink:0;width:5.5ch}.sidebar__toggle-group{display:flex;flex-direction:row;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:var(--bg)}.sidebar__toggle-btn{display:flex;justify-content:center;align-items:center;flex:1;padding:5px 0;border:none;border-right:1px solid var(--border);background:transparent;color:var(--text-3);font-size:11px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}.sidebar__toggle-btn:last-child{border-right:none}.sidebar__toggle-btn:hover{background:var(--surface-hover);color:var(--text-2)}.sidebar__toggle-btn--active{background:var(--border);color:var(--text);font-weight:600}.sidebar__export-btn{white-space:nowrap;display:flex;justify-content:center;align-items:center;overflow:hidden;gap:6px;width:auto;padding:6px 20px;background:var(--bg);border:1px solid var(--border-strong);border-radius:6px;color:var(--text-2);font-size:12px;font-weight:600;min-width:180px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.sidebar__export-btn .material-symbols-outlined{color:var(--text-2)}.sidebar__export-btn:hover:not(:disabled){background:var(--bg-alt);border-color:var(--border-strong);color:var(--text)}.sidebar__export-btn:disabled{opacity:.5;cursor:not-allowed}.toggle-switch{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch__track{position:relative;flex-shrink:0;width:30px;height:17px;background:var(--accent-faint);border-radius:9px;transition:background .15s}.toggle-switch--on .toggle-switch__track{background:var(--accent)}.toggle-switch__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .15s}.toggle-switch--on .toggle-switch__thumb{transform:translate(13px)}.toggle-switch__label{font-size:12px;color:var(--text-2)}.track-list__section{display:flex;flex-direction:column;gap:8px}.track-list__gradient-bar{height:10px;border-radius:5px;border:1px solid rgba(0,0,0,.08);margin-bottom:6px}.track-list__stops{display:flex;align-items:flex-start;justify-content:space-between}.track-list__stop{display:flex;flex-direction:column;align-items:center;gap:3px}.track-list__gradient-swatch{flex-shrink:0;width:22px;height:22px;border-radius:4px;border:1px solid var(--accent-faint);cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s}.track-list__gradient-swatch:hover{transform:scale(1.15);box-shadow:0 0 0 2px #00000026}.track-list__stop-remove{width:14px;height:14px;border-radius:50%;border:none;background:var(--bg-alt);color:var(--text-3);font-size:11px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}.track-list__stop:hover .track-list__stop-remove{opacity:1}.track-list__stop-remove:hover{background:var(--accent-faint)}.track-list__stop-add{width:22px;height:22px;border-radius:4px;border:1px dashed var(--accent-faint);background:transparent;color:var(--text-3);font-size:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}.track-list__stop-add:hover{border-color:var(--text-3);color:var(--text-2)}.track-list__stop-add:disabled{opacity:.5;cursor:not-allowed}.track-list__header{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px;white-space:nowrap}.track-list__empty{font-size:12px;color:var(--text-4)}.track-list__item{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:5px;transition:background .1s;font-weight:600}.track-list__item:hover{background:var(--surface-hover)}.track-list__swatch{flex-shrink:0;width:18px;height:18px;border-radius:4px;border:1px solid var(--accent-faint);cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s}.track-list__swatch:hover{transform:scale(1.15);box-shadow:0 0 0 2px #00000026}.track-list__name{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.track-list__reset-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;transition:color .15s}.track-list__reset-btn .material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--text-2)}.track-list__reset-btn:hover{color:var(--text)}.track-list__reset-btn .material-symbols-outlined{font-size:15px}.controls{display:flex;align-items:center;gap:12px}.controls__play-btn{display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:#3a3a3a00;color:#fff;cursor:pointer;transition:background .15s;flex-shrink:0;padding:6px}.controls__play-btn:hover:not(:disabled){background:#3a3a3aaa}.controls__time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-3);min-width:36px;flex-shrink:0}.controls__seek{flex:1;accent-color:var(--accent);cursor:pointer}.controls__fullscreen-btn{display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:#3a3a3a00;color:#fff;cursor:pointer;transition:background .15s;flex-shrink:0;padding:6px}.controls__fullscreen-btn:hover:not(:disabled){background:#3a3a3a80}.controls__fullscreen-btn:disabled{opacity:.35;cursor:not-allowed}.file-upload{display:flex;flex-direction:row;gap:10px;margin-right:10px}.drop-zone{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 20px;border:1px dashed var(--border-strong);border-radius:6px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s;font-weight:600;overflow:hidden;min-width:180px}.drop-zone:hover{border-color:var(--text-3);background:var(--surface-hover)}.drop-zone--active{border-color:var(--text-2);background:var(--bg-alt)}.drop-zone--loaded{border-color:#40aa70;background:#eef8f2;border-style:solid}.drop-zone .material-symbols-outlined{color:var(--text-3);font-size:24px}.drop-zone--loaded .material-symbols-outlined{color:#30aa60}.drop-zone--active .material-symbols-outlined{color:var(--text-3)}.drop-zone__label{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drop-zone--loaded .drop-zone__label{color:#208850}.export-modal-backdrop{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.export-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px 40px;min-width:420px;max-width:90vw;display:flex;flex-direction:column;gap:18px;box-shadow:0 8px 32px #0000001f}.export-modal__title{font-size:20px;font-weight:700;color:var(--text)}.export-modal__phase{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-3)}.export-modal__phase>span:first-child{min-width:120px}.export-modal__phase-time{text-align:left;font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-4)}.progress-bar{flex:1;height:8px;background:var(--bg-alt);border-radius:4px;overflow:hidden}.progress-bar__fill{height:100%;background:var(--accent);border-radius:4px;transition:width .2s ease}.export-modal__hint{font-size:12px;color:var(--text-4)}.export-modal__setting{display:flex;flex-direction:column;gap:6px}.export-modal__setting-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}.export-modal__actions{display:flex;gap:12px;align-items:center}.export-modal__download-btn{display:flex;justify-content:center;align-items:center;gap:6px;padding:6px 16px;background:#eef8f2;border:1px solid #40aa60;border-radius:6px;color:#1a7040;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s}.export-modal__download-btn:hover{background:#ddf0e8}.export-modal__download-btn .material-symbols-outlined{color:#1a7040}.export-modal__close-btn{display:flex;justify-content:center;align-items:center;padding:10px 16px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-3);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}.export-modal__close-btn:hover{border-color:var(--border-strong);color:var(--text-2)}.export-modal__start-btn{border-color:#2a9a5a;color:#1a7040;font-weight:600;background:#eef8f2}.export-modal__start-btn:hover{border-color:#1a7040;color:#115530;background:#edf7f2}.material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 24;color:#fff}.rotate-overlay{display:none}@media(orientation:portrait)and (pointer:coarse){.rotate-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:fixed;inset:0;background:var(--bg);z-index:9999}.rotate-overlay__icon{font-size:48px;color:var(--text-2);font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 48;animation:rotateHint 2s ease-in-out infinite}.rotate-overlay__text{font-size:16px;color:var(--text-2);font-weight:500}}@keyframes rotateHint{0%,to{transform:rotate(0)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}}.home{position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);animation:pageFadeIn .25s ease;color:var(--text);font-family:Segoe UI,system-ui,sans-serif}.home__bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:blur(2px);transform:scale(1.05)}.home__bg-overlay{position:fixed;inset:0;background:#0000;z-index:1}.home>*:not(.home__bg-video):not(.home__bg-overlay){position:relative;z-index:2}.home__main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 48px}.home__hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0;max-width:680px}.home__hero-title{font-size:52px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:24px}.home__hero-sub{font-size:17px;line-height:1.65;color:var(--text-3);margin-bottom:40px}.home__cta{display:inline-flex;align-items:center;gap:8px;padding:14px 36px;background:var(--text);color:var(--bg);border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}.home__cta:hover{background:var(--text-2)}.home__cta .material-symbols-outlined{color:var(--bg);font-size:20px}.home__features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;max-width:1000px}@media(max-width:860px){.home__features{grid-template-columns:repeat(2,1fr)}}.home__feature-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px 20px;display:flex;flex-direction:column;gap:10px}.home__feature-icon{font-size:28px;color:var(--text-2);font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 28}.home__feature-title{font-size:14px;font-weight:700;color:var(--text)}.home__feature-desc{font-size:13px;line-height:1.6;color:var(--text-3)}@media(pointer:coarse){.sidebar{min-width:20vw}.drop-zone,.sidebar__export-btn{min-width:0;padding:4px 8px;gap:4px}.drop-zone__label{display:none}.sidebar__export-btn span:not(.material-symbols-outlined){display:none}.sidebar__label{font-size:9px}.sidebar__value{font-size:11px}.toggle-switch__label{font-size:10px}.sidebar__toggle-btn{font-size:9px}.sidebar__export-btn,.track-list__name{font-size:10px}.track-list__header{font-size:9px}}