@font-face{font-family:LT Superior Mono;src:url(/assets/LTSuperiorMono-Regular-CUWawdGW.otf)format("opentype");font-weight:400;font-style:normal}@font-face{font-family:LT Superior Mono;src:url(/assets/LTSuperiorMono-Medium-BRwC3K0G.otf)format("opentype");font-weight:500;font-style:normal}@font-face{font-family:LT Superior Mono;src:url(/assets/LTSuperiorMono-Semibold-Blq5wkL9.otf)format("opentype");font-weight:600;font-style:normal}@font-face{font-family:LT Superior Mono;src:url(/assets/LTSuperiorMono-Bold-CrgN2c3E.otf)format("opentype");font-weight:700;font-style:normal}@font-face{font-family:LT Superior Mono;src:url(/assets/LTSuperiorMono-Bold-CrgN2c3E.otf)format("opentype");font-weight:900;font-style:normal}@property --accent-orange{syntax:"<color>";inherits:true;initial-value:#fd5d21}@property --hover-orange{syntax:"<color>";inherits:true;initial-value:#fa4b09}@property --panel-green{syntax:"<color>";inherits:true;initial-value:#003917}@property --text-dark{syntax:"<color>";inherits:true;initial-value:#003917}@property --bg-track{syntax:"<color>";inherits:true;initial-value:#002910}@property --play-green{syntax:"<color>";inherits:true;initial-value:#19bd5c}@property --char-mid{syntax:"<color>";inherits:true;initial-value:#10783a}@property --char-light{syntax:"<color>";inherits:true;initial-value:#17a34f}@property --grid-green{syntax:"<color>";inherits:true;initial-value:#0b582a}@property --num-high{syntax:"<color>";inherits:true;initial-value:#003917}@property --num-low{syntax:"<color>";inherits:true;initial-value:#d9d9d9}:root{--bg-cream:#faf5ef;--panel-green:#003917;--accent-orange:#fd5d21;--text-dark:#003917;--text-light:#faf5ef;--text-muted:#8e9b93;--bg-track:#002910;--play-green:#19bd5c;--char-mid:#10783a;--char-light:#17a34f;--grid-green:#0b582a;--hover-orange:#fa4b09;--radius-sm:8px;--radius-md:16px;--radius-lg:32px;--radius-full:9999px;--font-main:"Helvetica Neue", Arial, sans-serif;--font-mono:"LT Superior Mono", "Courier New", Courier, monospace;--playhead-color:var(--accent-orange);--fluid-ratio:clamp(0, calc((100vw - 1440px) / 288px), 1);--sidebar-width:calc(80px + 20px * var(--fluid-ratio));--header-height:calc(80px + 20px * var(--fluid-ratio));--footer-height:calc(115px + 65px * var(--fluid-ratio));--disc-diameter:calc(76px + 16px * var(--fluid-ratio));--sidebar-pad:calc(2px + 2px * var(--fluid-ratio));--playback-controls-width:calc(238px + 102px * var(--fluid-ratio));--outer-padding:calc(16px + 4px * var(--fluid-ratio));--sidebar-add-btn-height:calc(115px + 63px * var(--fluid-ratio));--center-controls-gap:calc(4px + 4px * var(--fluid-ratio));--center-controls-pad:calc(4px + 4px * var(--fluid-ratio));--header-title-font:calc(32px + 12px * var(--fluid-ratio));--header-title-line-height:calc(32px + 8px * var(--fluid-ratio));--header-meta-font:calc(12px + 2px * var(--fluid-ratio));--header-pad-left:calc(24px + 8px * var(--fluid-ratio));--header-pad-right:calc(4px + 4px * var(--fluid-ratio));--header-pad-y:calc(4px + 4px * var(--fluid-ratio));--icon-btn-pad-x:calc(12px + 4px * var(--fluid-ratio));--numeral-height:calc(52px + 20px * var(--fluid-ratio));--playback-btn-radius:calc(16px + 8px * var(--fluid-ratio));--center-controls-radius:calc(20px + 4px * var(--fluid-ratio));--playback-btn-font-size:calc(14px + 4px * var(--fluid-ratio));--playback-btn-line-height:calc(16px + 4px * var(--fluid-ratio));--playback-icon-size:calc(18px + 6px * var(--fluid-ratio));--numeral-digit-height:calc(40px + 20px * var(--fluid-ratio));--playback-btn-icon-top:calc(8px + 4px * var(--fluid-ratio));--navbar-height:104px;--navbar-padding:20px;--nav-btn-height:64px;--chrome-gap:20px;--zoom-slider-width:24px;--header-radius:32px;--icon-btn-icon-size:24px;--icon-btn-top-offset:12px;--icon-btn-radius:24px;--slider-btn-height:64px;--slider-btn-radius:24px;--slider-btn-font-size:18px;--slider-btn-line-height:24px;--slider-btn-padding:12px;--slider-rail-height:24px;--slider-tick-height:18px;--slider-tick-gap:4px;--slider-wrapper-gap:16px;--slider-head-icon-size:24px;--slider-head-text-font-size:18px;--slider-head-text-line-height:24px;--slider-section-justify:center;--slider-btn-circle-size:12px;--slider-head-height:50px;--slider-rail-container-height:calc(2 * var(--slider-tick-height) + 2 * var(--slider-tick-gap) + var(--slider-rail-height));--slider-rail-top:calc(var(--slider-tick-height) + var(--slider-tick-gap));--slider-ticks-bottom-top:calc(var(--slider-tick-height) + 2 * var(--slider-tick-gap) + var(--slider-rail-height));--slider-head-top:calc(var(--slider-rail-container-height) / 2);--slider-head-width:calc(var(--slider-head-height) * 94 / 50);--numeral-digit-width:calc(var(--numeral-digit-height) * 32 / 60);--wf-padding:20px;--wf-track-thickness:24px;--wf-track-radius:12px;--wf-col-gap:20px;--wf-gap-marker-loop:8px;--wf-gap-loop-grid:8px;--wf-gap-grid-scroll:20px;--wf-hthumb-height:calc(var(--wf-track-thickness) - 4px);--wf-zoom-thumb-width:20px;--wf-zoom-thumb-left:calc((var(--zoom-slider-width) - var(--wf-zoom-thumb-width)) / 2)}@media (width<=1728px){:root{--navbar-height:72px;--navbar-padding:16px;--nav-btn-height:40px;--chrome-gap:12px;--zoom-slider-width:20px;--slider-btn-height:48px;--slider-btn-radius:12px;--slider-btn-font-size:14px;--slider-btn-line-height:16px;--slider-btn-padding:8px;--slider-rail-height:16px;--slider-tick-height:12px;--slider-wrapper-gap:16px;--slider-head-icon-size:18px;--slider-head-text-font-size:14px;--slider-head-text-line-height:16px;--slider-section-justify:flex-end;--slider-btn-circle-size:8px;--slider-head-height:40px;--wf-padding:16px;--wf-track-thickness:20px;--wf-track-radius:8px;--wf-col-gap:12px;--wf-gap-marker-loop:4px;--wf-gap-loop-grid:12px;--wf-gap-grid-scroll:12px}}@media (width<=1440px){:root{--header-radius:20px;--icon-btn-icon-size:18px;--icon-btn-top-offset:8px;--icon-btn-radius:16px}}[data-scrim=true]{--accent-orange:#d9d9d9;--hover-orange:#d9d9d9;--panel-green:#d9d9d9;--text-dark:#d9d9d9;--bg-track:#d9d9d9;--play-green:#d9d9d9;--char-mid:#d9d9d9;--char-light:#d9d9d9;--grid-green:#d9d9d9;--playhead-color:var(--bg-cream)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-cream);color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}.modal-overlay,.dialog-overlay,.setup-modal-overlay,.add-audio-modal-container{--accent-orange:#fd5d21;--hover-orange:#fa4b09;--panel-green:#003917;--text-dark:#003917;--bg-track:#002910;--play-green:#19bd5c;--char-mid:#10783a;--char-light:#17a34f;--grid-green:#0b582a}[data-scrim=true] .visualizer-container{background-color:#faf5ef;border-color:#d9d9d9}[data-scrim=true] .visualizer-bar{background-color:#faf5ef}[data-scrim=true] .nav-profile-btn,[data-scrim=true] .track-title,[data-scrim=true] .track-meta,[data-scrim=true] .dot,[data-scrim=true] .tabs-link{color:#faf5ef}[data-scrim=true] .sidebar-item.active{background-color:#faf5ef}[data-scrim=true] .sidebar-item.active .circular-text{fill:#d9d9d9}[data-scrim=true] .sidebar-item.active .center-star{color:#d9d9d9}[data-scrim=true] .sidebar-add-btn .add-icon,[data-scrim=true] .sidebar-add-btn .add-text{color:#faf5ef}[data-scrim=true] .slider-rail,[data-scrim=true] .slider-btn:not(.selected){background-color:#ffffff61}[data-scrim=true] .slider-head-icon,[data-scrim=true] .slider-head-text{color:#fff}[data-scrim=true] .slider-head-path{stroke:#faf5ef}[data-scrim=true] .control-btn,[data-scrim=true] .play-btn{background-color:#faf5ef}[data-scrim=true] .numeral-container{--num-high:#d9d9d9;--num-low:#fff}.app-container{background-color:var(--bg-cream,#f5efeb);flex-direction:column;width:100vw;height:100vh;padding:0;display:flex}.main-layout{grid-template-columns:var(--sidebar-width) minmax(0, 1fr);grid-template-rows:minmax(var(--header-height), auto) minmax(0, 1fr) var(--footer-height);height:calc(100vh - var(--navbar-height));padding:0 var(--outer-padding) var(--outer-padding) var(--outer-padding);box-sizing:border-box;gap:var(--chrome-gap);grid-template-areas:"sidebar header""sidebar main""sidebar footer";transition:gap .2s;display:grid}.sidebar{grid-area:sidebar}.header{grid-area:header}.main-content{background-color:var(--panel-green,var(--panel-green));border-radius:var(--radius-lg,16px);grid-area:main;transition:background-color .3s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.footer{grid-area:footer}.navbar{height:var(--navbar-height);padding:var(--navbar-padding);box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;transition:height .2s,padding .2s;display:flex}.nav-info-btn,.nav-profile-btn{height:var(--nav-btn-height);box-sizing:border-box;width:max-content;color:var(--panel-green);cursor:pointer;font-family:var(--font-mono);background-color:#d9d9d9;border:none;border-radius:24px;flex-direction:row;justify-content:center;align-items:center;gap:8px;padding:0 16px;transition:color .3s,background-color .3s;display:inline-flex}.nav-hbtn-icon{width:24px;height:24px;color:var(--panel-green);flex-shrink:0;justify-content:center;align-items:center;display:flex}.nav-hbtn-icon svg{width:24px;height:24px;display:block}.nav-hbtn-label{font-family:var(--font-mono);white-space:nowrap;font-size:14px;font-weight:700;line-height:16px}.nav-avatar{object-fit:cover;border-radius:50%;width:24px;height:24px;display:block}.nav-avatar-placeholder{background-color:#c4c4c4}@media (width<=1728px){.nav-info-btn,.nav-profile-btn{border-radius:16px;padding:0 12px}.nav-hbtn-icon,.nav-avatar,.nav-hbtn-icon svg{width:20px;height:20px}.nav-hbtn-label{font-size:12px}}@property --amplitude{syntax:"<number>";inherits:true;initial-value:0}.visualizer-container{background-color:var(--accent-orange);border:1px solid var(--panel-green);box-sizing:border-box;--amplitude:0;border-radius:24px;align-items:flex-end;width:300px;height:64px;transition:--amplitude .6s cubic-bezier(.2,0,0,1);display:flex;overflow:hidden}.visualizer-container.is-playing{--amplitude:1}@media (width<=1728px){.visualizer-container{border-radius:16px;width:238px;height:40px}}.visualizer-bar{background-color:var(--panel-green);transform-origin:bottom;width:10px;height:100%;animation:1.2s ease-in-out infinite alternate sineWave;animation-delay:calc(var(--i) * -.15s);will-change:transform}@keyframes sineWave{0%{transform:scaleY(calc(.3333 + (-.1333) * var(--amplitude)))}to{transform:scaleY(calc(.3333 + (.3667) * var(--amplitude)))}}.sidebar-wrapper{height:100%;width:var(--sidebar-width);justify-content:space-between;gap:var(--chrome-gap);flex-direction:column;display:flex}.sidebar-container{width:var(--sidebar-width);padding:var(--sidebar-pad);box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none;background-color:#d9d9d9;border-radius:50px;flex-direction:column;flex-grow:1;align-items:center;gap:4px;display:flex;overflow-y:auto}.sidebar-container::-webkit-scrollbar{display:none}.sidebar-item{width:var(--disc-diameter);height:var(--disc-diameter);cursor:pointer;background-color:#faf5ef;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex;position:relative}.sidebar-item:hover{transform:scale(1.05)}.sidebar-item.active{background-color:var(--accent-orange);color:var(--panel-green)}.sidebar-item.active .circular-text{fill:var(--panel-green);transition:fill .3s}.sidebar-item.active .center-star{color:var(--panel-green);transition:color .3s}.circular-text-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.circular-text-svg{width:100%;height:100%;position:absolute;top:0;left:0}.morphing-path{transition:d .4s cubic-bezier(.175,.885,.32,1.275)}.circular-text{fill:var(--panel-green);letter-spacing:1px;font-size:12px;font-weight:600}.center-star{color:var(--panel-green);z-index:2;justify-content:center;align-items:center;display:flex}.center-star svg{width:22px;height:22px}.sidebar-add-btn{width:var(--sidebar-width);height:var(--sidebar-add-btn-height);background-color:var(--accent-orange);cursor:pointer;box-sizing:border-box;border:none;border-radius:24px;flex-direction:column;flex-shrink:0;justify-content:space-between;padding:12px;transition:height .4s cubic-bezier(.2,0,0,1);display:flex;position:relative}.sidebar-add-btn:hover{height:calc(var(--sidebar-add-btn-height) + 10px)}.add-grid-container{z-index:1;border-radius:22px;flex-wrap:wrap;place-content:center;gap:1px;display:flex;position:absolute;inset:1px;overflow:hidden}.add-grid-square{aspect-ratio:1;background-color:var(--hover-orange);opacity:0;width:calc(16.6667% - .833333px);transition-property:transform,opacity,background-color;transition-duration:.4s,.4s,.8s;transition-timing-function:cubic-bezier(.2,0,0,1),ease,linear;transform:scale(0)}.sidebar-add-btn:hover .add-grid-square{opacity:1;transform:scale(1)}.sidebar-add-btn .add-grid-square:hover{background-color:var(--accent-orange);transition-duration:.4s,.4s,50ms}.sidebar-add-btn .add-icon{width:24px;height:24px;color:var(--panel-green);z-index:2;pointer-events:none;align-self:flex-start;transition:color .3s;position:relative}.sidebar-add-btn .add-text{color:var(--panel-green);letter-spacing:1px;z-index:2;pointer-events:none;align-self:flex-end;font-size:14px;font-weight:700;transition:color .3s;position:relative}.header-container{width:100%;min-height:var(--header-height);border-radius:var(--header-radius);padding:var(--header-pad-y) var(--header-pad-right) var(--header-pad-y) var(--header-pad-left);box-sizing:border-box;background-color:#d9d9d9;justify-content:space-between;align-items:center;gap:20px;display:flex}.header-center{flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;min-width:0;max-width:100%;display:flex}.track-title{font-size:var(--header-title-font);line-height:var(--header-title-line-height);text-transform:uppercase;color:var(--panel-green);letter-spacing:0;white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin:0 0 4px;font-family:BBH Hegarty,Nunito Sans,sans-serif;font-weight:900;transition:color .3s;overflow:hidden}.track-meta{font-size:var(--header-meta-font);color:var(--text-dark);font-weight:600;line-height:18px;font-family:var(--font-mono);align-items:center;gap:8px;transition:color .3s;display:flex}.dot{color:#a1a7a4;transition:color .3s}.header-right{align-self:stretch;align-items:center;display:flex}.action-icons{align-items:center;gap:8px;height:100%;display:flex}.icon-btn{border-radius:var(--icon-btn-radius);width:54px;height:100%;padding:var(--icon-btn-top-offset) var(--icon-btn-pad-x) 0;box-sizing:border-box;cursor:pointer;color:var(--text-dark);background-color:#faf5ef;border:none;flex-direction:column;justify-content:flex-start;align-items:center;transition:transform .1s;display:flex}.icon-btn svg{width:var(--icon-btn-icon-size);height:var(--icon-btn-icon-size)}.icon-btn:hover{transform:scale(1.05)}.icon-btn.delete{color:var(--accent-orange)}.tabs-link{color:var(--accent-orange);cursor:pointer;text-decoration:none;transition:color .3s}.tabs-link:hover{text-decoration:underline}.has-hover-grid{position:relative}.has-hover-grid>:not(.hover-grid-container){z-index:2;pointer-events:none}.hover-grid-container{z-index:1;border-radius:22px;flex-wrap:wrap;place-content:center;gap:1px;display:flex;position:absolute;inset:1px;overflow:hidden}.hover-grid-square{width:calc((100% - ((var(--cols) - 1) * 1px)) / var(--cols));aspect-ratio:1;background-color:var(--grid-color);opacity:0;transition-property:transform,opacity,background-color;transition-duration:.4s,.4s,.8s;transition-timing-function:cubic-bezier(.2,0,0,1),ease,linear;transform:scale(0)}.has-hover-grid:hover .hover-grid-container.mounted .hover-grid-square{opacity:1;transform:scale(1)}.has-hover-grid .hover-grid-container.mounted .hover-grid-square:hover{background-color:var(--illuminate-color);transition-duration:.4s,.4s,50ms}.custom-slider-wrapper{gap:var(--slider-wrapper-gap);-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;display:flex;position:relative}.slider-rail-container{width:100%;height:var(--slider-rail-container-height);align-items:center;display:flex;position:relative}.slider-rail{width:100%;height:var(--slider-rail-height);background-color:var(--panel-green);top:var(--slider-rail-top);border-radius:12px;transition:opacity .2s,background-color .3s;position:absolute}.slider-ticks-top,.slider-ticks-bottom{width:100%;height:var(--slider-tick-height);display:flex;position:absolute;left:0}.slider-ticks-top{top:0}.slider-ticks-bottom{top:var(--slider-ticks-bottom-top)}.tick-line{width:1px;height:var(--slider-tick-height);background-color:var(--accent-orange);border-radius:9999px;transition:width .4s cubic-bezier(.2,0,0,1),transform .4s cubic-bezier(.2,0,0,1);position:absolute;transform:translate(-.5px)}.tick-line.is-active{width:3px;transform:translate(-1.5px)}.slider-head{top:var(--slider-head-top);cursor:grab;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.slider-head:active{cursor:grabbing}.slider-head>svg{width:var(--slider-head-width);height:var(--slider-head-height)}.slider-head-path{d:path("M80.748 1.07324C85.3251 0.298362 89.4997 3.82569 89.5 8.46777V41.5322C89.4997 46.1743 85.3251 49.7016 80.748 48.9268L78.7998 48.5967C57.7499 45.0329 36.2501 45.0329 15.2002 48.5967L13.25195 48.9268C8.67477 49.7017 4.5 46.1736 4.5 41.5312V8.46777C4.500292 3.82569 8.67493 0.298366 13.25195 1.07324L15.2002 1.40332C36.2501 4.96713 57.7499 4.96713 78.7998 1.40332L80.748 1.07324Z");transition:d .4s cubic-bezier(.2,0,0,1),stroke .3s,fill .3s}.slider-head.is-dragging .slider-head-path{d:path("M84.8516 0.922852C89.3971 0.218777 93.5 3.73522 93.5 8.33496V41.665C93.5 46.2648 89.3971 49.7812 84.8516 49.0771L76.1592 47.7305C56.835 44.7373 37.165 44.7373 17.8408 47.7305L9.14844 49.0771C4.6029 49.7812 0.5 46.2648 0.5 41.665V8.33496C0.5 3.73522 4.6029 0.218777 9.14844 0.922852L17.8408 2.26953C37.165 5.26269 56.835 5.26269 76.1592 2.26953L84.8516 0.922852Z")}.slider-buttons{gap:8px;width:100%;display:flex}.slider-btn{height:var(--slider-btn-height);border-radius:var(--slider-btn-radius);padding:var(--slider-btn-padding);cursor:pointer;font-size:var(--slider-btn-font-size);line-height:var(--slider-btn-line-height);color:var(--text-dark);background-color:#fff;border:none;flex-direction:column;flex:1;justify-content:flex-start;align-items:flex-start;font-weight:600;transition:flex .4s cubic-bezier(.2,0,0,1),background-color .3s,color .3s;display:flex;position:relative}.slider-btn:hover{flex:1.15}.slider-btn.selected{background-color:var(--panel-green);color:#fff}.slider-btn-circle{width:var(--slider-btn-circle-size);height:var(--slider-btn-circle-size);z-index:2;pointer-events:none;background-color:#fff;border-radius:50%;position:absolute;bottom:12px;right:12px}.slider-btn-text{z-index:2;pointer-events:none;position:relative}.slider-head-content{pointer-events:none;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.slider-head-icon{color:var(--panel-green);justify-content:center;align-items:center;padding-left:14px;transition:padding-left .4s cubic-bezier(.2,0,0,1),color .3s;display:flex}.slider-head.is-dragging .slider-head-icon{padding-left:10px}.slider-head-icon svg{width:var(--slider-head-icon-size)!important;height:var(--slider-head-icon-size)!important}.slider-head-text{font-size:var(--slider-head-text-font-size);line-height:var(--slider-head-text-line-height);color:var(--panel-green);padding-right:16px;font-weight:800;transition:padding-right .4s cubic-bezier(.2,0,0,1),color .3s}.slider-head.is-dragging .slider-head-text{padding-right:12px}.add-audio-modal-container{background-color:var(--accent-orange);border-radius:var(--radius-lg,32px);z-index:50;box-sizing:border-box;flex-direction:column;gap:20px;padding:20px;display:flex;position:absolute;inset:0;overflow:hidden}.modal-close-btn{color:#faf5ef;cursor:pointer;z-index:10;background-color:#f84300;border:none;border-radius:24px;justify-content:center;align-items:flex-start;width:100px;height:100px;padding:16px 0 0;transition:opacity .2s;display:flex;position:absolute;top:20px;right:20px}.modal-close-btn:active{opacity:.85}.add-modal-top-grid{flex:1;justify-content:center;align-items:center;min-height:0;margin-right:108px;display:flex}.grid-panel-inner{box-sizing:content-box;background-image:linear-gradient(90deg,#fff3 1px,#0000 1px),linear-gradient(#fff3 1px,#0000 1px);border:1px solid #fff3;border-radius:16px;flex-shrink:0}.add-modal-bottom-area{flex:1;align-items:stretch;gap:8px;display:flex}.add-modal-headline{flex:0 0 33.33%;margin-right:12px;container-type:size}.headline-text-wrapper{color:#faf5ef;letter-spacing:0;text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;font-family:BBH Hegarty,Nunito Sans,sans-serif;font-size:26cqh;font-weight:900;line-height:.96;display:flex}.headline-line{opacity:0;animation:.6s cubic-bezier(.2,0,0,1) forwards slideUpFadeIn;transform:translateY(20px)}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.add-modal-inputs{flex-direction:column;flex:1;gap:8px;display:flex}.add-input-box,.add-file-box{box-sizing:border-box;background-color:#f84300;border-radius:24px;flex:1;position:relative}.add-file-box{cursor:pointer;transition:opacity .2s}.add-file-box:hover,.add-file-box.drag-active{opacity:.9}.add-input-box label,.add-file-box label{font-family:var(--font-mono);color:#faf5ef;text-transform:uppercase;font-size:18px;font-weight:900;line-height:24px;position:absolute;top:24px;left:24px}.youtube-input{color:#faf5ef;width:calc(100% - 16px);font-family:var(--font-mono);box-sizing:border-box;background:0 0;border:1px solid #faf5ef61;border-radius:16px;padding:0 16px;font-size:16px;transition:border-color .2s;position:absolute;inset:62px 8px 8px}.youtube-input:focus{border-color:#faf5ef;outline:none}.youtube-input::placeholder{color:#ffffff80}.add-file-button-area{background-color:#fd5d21;border-radius:16px;position:absolute;inset:62px 8px 8px;overflow:hidden}.add-file-button-area .plus-icon{font-family:var(--font-mono);color:#faf5ef;font-size:24px;line-height:1;position:absolute;top:12px;left:12px}.add-file-button-area .add-file-text{font-family:var(--font-main);letter-spacing:1px;color:#faf5ef;text-transform:uppercase;font-size:14px;font-weight:700;position:absolute;bottom:12px;right:12px}.add-file-button-area .plus-icon,.add-file-button-area .add-file-text{z-index:2;pointer-events:none}.file-grid-square{aspect-ratio:1;opacity:0;background-color:#fa4b09;width:calc(2% - .98px);transition-property:transform,opacity,background-color;transition-duration:.4s,.4s,.8s;transition-timing-function:cubic-bezier(.2,0,0,1),ease,linear;transform:scale(0)}.add-file-box:hover .file-grid-square{opacity:1;transform:scale(1)}.add-file-box .file-grid-square:hover{background-color:#fd5d21;transition-duration:.4s,.4s,50ms}.add-modal-submit-btn{cursor:pointer;color:#faf5ef;background-color:#003917;border:none;border-radius:24px;width:100px;transition:width .4s cubic-bezier(.2,0,0,1);position:relative;overflow:hidden}.add-modal-submit-btn:hover{width:110px}.submit-plus{font-family:var(--font-mono);z-index:2;pointer-events:none;font-size:24px;line-height:1;position:absolute;top:12px;left:12px}.submit-text{font-family:var(--font-main);letter-spacing:1px;text-transform:uppercase;z-index:2;pointer-events:none;font-size:14px;font-weight:700;position:absolute;bottom:12px;right:12px}.submit-grid-container{z-index:1;border-radius:22px;flex-wrap:wrap;place-content:center;gap:1px;display:flex;position:absolute;inset:1px;overflow:hidden}.submit-grid-square{aspect-ratio:1;opacity:0;background-color:#002910;width:calc(16.6667% - .833333px);transition-property:transform,opacity,background-color;transition-duration:.4s,.4s,.8s;transition-timing-function:cubic-bezier(.2,0,0,1),ease,linear;transform:scale(0)}.add-modal-submit-btn:hover .submit-grid-square{opacity:1;transform:scale(1)}.add-modal-submit-btn .submit-grid-square:hover{background-color:#003917;transition-duration:.4s,.4s,50ms}.add-loading-overlay{color:#fff;font-family:var(--font-mono);z-index:100;border-radius:var(--radius-lg,32px);background:#0009;justify-content:center;align-items:center;font-size:24px;display:flex;position:absolute;inset:0}.add-error-toast{color:#fff;font-family:var(--font-mono);z-index:100;background:#ff7440;border-radius:12px;padding:12px 24px;font-size:14px;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.marker-speed-slider{position:absolute;bottom:24px;left:24px;right:24px}.app-container.mobile .marker-speed-slider{bottom:12px}.marker-speed-slider .slider-rail-container,.marker-speed-slider .slider-head{touch-action:none}.marker-modal .marker-speed-slider .tick-line{background-color:#faf5ef}.marker-modal .marker-speed-slider .slider-rail{background-color:#fd5d21}.marker-modal .marker-speed-slider .slider-head-path{fill:#003917;stroke:#f84300}.marker-modal .marker-speed-slider .slider-head-text,.marker-modal .marker-speed-slider .slider-head-icon{color:#faf5ef}.waveform-container{background-color:var(--panel-green);width:100%;height:100%;padding:var(--wf-padding);box-sizing:border-box;border-radius:var(--radius-lg);grid-template-columns:minmax(0, 1fr) var(--zoom-slider-width);grid-template-rows:38px var(--wf-gap-marker-loop) var(--wf-track-thickness) var(--wf-gap-loop-grid) 1fr var(--wf-gap-grid-scroll) var(--wf-track-thickness);column-gap:var(--wf-col-gap);row-gap:0;display:grid}.top-empty-track{background-color:var(--bg-track);border-radius:12px;grid-area:1/1/2/2;width:100%;height:38px}.loop-track-container{width:100%;height:var(--wf-track-thickness);background-color:var(--bg-track);border-radius:8px;grid-area:3/1/4/2;position:relative}.loop-slider-thumb{width:50px;height:var(--wf-hthumb-height);background-color:var(--play-green);cursor:grab;z-index:10;touch-action:none;box-sizing:border-box;border-radius:6px;justify-content:center;align-items:center;gap:3px;padding:0 8px;transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:2px;overflow:hidden;transform:translate(-50%)}.loop-slider-thumb.offscreen-left{width:20px;padding:0;transform:translate(0)}.loop-slider-thumb.offscreen-right{width:20px;padding:0;transform:translate(-100%)}.loop-slider-thumb:active{cursor:grabbing}.loop-stem{background-color:var(--play-green);width:1px;left:50%;top:var(--wf-hthumb-height);pointer-events:none;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s;position:absolute;transform:translate(-50%)}.loop-slider-thumb.offscreen-left .loop-stem,.loop-slider-thumb.offscreen-right .loop-stem{opacity:0;height:0!important}.waveform-layout-center{grid-area:5/1/6/2;justify-content:flex-start;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.waveform-inner{border:1px solid var(--grid-green);box-sizing:content-box;border-radius:12px;transition:border-color .3s;position:relative;overflow:hidden}@keyframes waveform-enter{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.bar-wrapper.intro-animate .bar{transform-origin:50%;animation:.4s cubic-bezier(.175,.885,.32,1) both waveform-enter}.marker-container{background-color:var(--accent-orange);outline:1px solid var(--panel-green);cursor:grab;z-index:15;touch-action:none;border-radius:6px;justify-content:center;align-items:center;gap:4px;max-width:264px;height:34px;padding:2px;transition:background-color .3s;display:flex;position:absolute;top:2px;transform:translate(-50%)}.marker-enter{animation:.45s cubic-bezier(.22,1,.36,1) both marker-pop-in}@keyframes marker-pop-in{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.marker-container:hover,.marker-container.expanded{z-index:20}.marker-container:active{cursor:grabbing}.marker-text-wrapper{align-items:center;max-width:196px;padding:0 6px;display:flex;overflow:hidden}.marker-num,.marker-name-inner{font-family:var(--font-mono);color:var(--panel-green);-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:16px;font-weight:600;line-height:30px}.marker-num{opacity:1;max-width:40px;transition:max-width .35s cubic-bezier(.22,1,.36,1),opacity .2s;display:block;overflow:hidden}.marker-name{opacity:0;max-width:0;transition:max-width .35s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1);display:block;overflow:hidden}.marker-container:hover .marker-num,.marker-container.expanded .marker-num{opacity:0;max-width:0}.marker-container:hover .marker-name,.marker-container.expanded .marker-name{opacity:1;max-width:196px}.marker-name-inner{display:inline-block}.marker-name-marquee{animation:8s linear infinite marquee-horizontal}@keyframes marquee-horizontal{0%{transform:translate(0)}to{transform:translate(-50%)}}.marker-icon{background-color:var(--bg-track);color:var(--accent-orange);cursor:pointer;opacity:0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:0;min-width:0;height:30px;transition:width .35s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1),background-color .3s;display:flex;overflow:hidden}.marker-container:hover .marker-icon,.marker-container.expanded .marker-icon{opacity:1;width:30px}.marker-stem{border-left:1px dashed var(--accent-orange);pointer-events:none;width:1px;position:absolute;top:100%;left:50%}.grid-overlay{background-size:var(--cell-size,20px) var(--cell-size,20px);background-image:linear-gradient(to right, var(--grid-green) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-green) 1px, transparent 1px);z-index:3;pointer-events:none;position:absolute;inset:0}.hover-overlay{z-index:4;pointer-events:none;height:100%;display:grid;position:absolute;top:0;left:20px}.hover-cell{pointer-events:auto;background-color:#0000;width:100%;height:100%;transition:background-color .8s linear}.hover-cell:hover{background-color:rgba(from var(--play-green) r g b / .2);transition:background-color 50ms}.waveform-bars{z-index:2;align-items:center;width:100%;height:100%;display:flex;position:relative}.bar-wrapper{flex:0 0 var(--cell-size,20px);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:0;display:flex;position:relative}.bar{background-color:var(--bg-track);border-radius:0;width:100%;transition:background-color .3s}.bar.in-loop{background-color:var(--char-mid)}.bar.played{background-color:var(--play-green)}.bar.marker{background-color:var(--accent-orange);justify-content:center;align-items:center;display:flex;position:relative}.playhead-container{z-index:20;pointer-events:none;position:absolute;top:0}.playhead-triangle{border-left:10px solid #0000;border-right:10px solid #0000;border-top:20px solid var(--accent-orange);width:0;height:0;position:absolute;top:0;left:-10px}.playhead-svg-path{fill:var(--playhead-color);transition:fill .3s}.playhead-line{background-color:var(--playhead-color);transition:background-color .3s}.h-slider-container{width:100%;height:var(--wf-track-thickness);background-color:var(--bg-track);border-radius:var(--wf-track-radius);grid-area:7/1/8/2;position:relative}.v-slider-wrapper{width:var(--zoom-slider-width);flex-direction:column;grid-area:5/2/6/3;justify-content:space-between;align-items:center;height:100%;display:flex}.zoom-icon{width:var(--zoom-slider-width);height:var(--zoom-slider-width);color:var(--accent-orange);flex-shrink:0;transition:color .3s}.v-slider-container{width:var(--zoom-slider-width);background-color:var(--bg-track);border-radius:var(--wf-track-radius);flex:1;margin:8px 0;transition:background-color .3s;position:relative}.slider-thumb{background-color:var(--accent-orange);cursor:grab;touch-action:none;border-radius:6px;justify-content:center;align-items:center;gap:3px;transition:background-color .3s;display:flex;position:absolute}.slider-thumb:active{cursor:grabbing}.h-slider-thumb{width:50px;height:var(--wf-hthumb-height);box-sizing:border-box;padding:0 8px;top:2px;left:0}.v-slider-thumb{width:var(--wf-zoom-thumb-width);height:50px;left:var(--wf-zoom-thumb-left);box-sizing:border-box;flex-direction:column;padding:8px 0;top:0}.grip-line-v{background-color:var(--bg-track);flex-shrink:0;width:1px;height:calc(100% - 8px);transition:background-color .3s}.grip-line-h{background-color:var(--bg-track);flex-shrink:0;width:calc(100% - 8px);height:1px;transition:background-color .3s}.footer-container{justify-content:space-between;align-items:center;gap:20px;width:100%;height:100%;display:flex}.slider-section{justify-content:var(--slider-section-justify);flex-direction:column;flex:1;min-width:0;height:100%;display:flex}.center-controls{width:var(--playback-controls-width);height:100%;padding:var(--center-controls-pad);border-radius:var(--center-controls-radius);box-sizing:border-box;gap:var(--center-controls-gap);background-color:#d9d9d9;flex-direction:column;flex-shrink:0;display:flex}.numeral-container{width:100%;height:var(--numeral-height);box-sizing:border-box;background-color:#faf5ef;border-radius:16px;justify-content:space-between;align-items:center;padding:0 12px;display:flex;position:relative}.numeral-group{font-family:var(--font-mono);color:var(--panel-green);align-items:center;gap:0;font-size:32px;font-weight:900;transition:color .3s;display:flex}.numeral-group svg,.numeral-equals svg{width:var(--numeral-digit-width);height:var(--numeral-digit-height);transition:width .2s,height .2s}.numeral-equals{font-family:var(--font-mono);color:var(--panel-green);font-size:32px;font-weight:900;transition:color .3s;position:absolute;left:50%;transform:translate(-50%)}.playback-controls{flex:1;align-items:center;gap:4px;width:100%;min-height:0;display:flex}.control-btn{border-radius:var(--playback-btn-radius);min-width:60px;height:100%;padding-top:var(--playback-btn-icon-top);cursor:pointer;color:var(--panel-green);background-color:#fff;border:none;flex:1;justify-content:center;align-items:flex-start;transition:flex .4s cubic-bezier(.2,0,0,1),min-width .4s cubic-bezier(.2,0,0,1);display:flex}.playback-controls:has(.play-btn:hover) .control-btn{min-width:54px}.control-btn svg{width:var(--playback-icon-size);height:var(--playback-icon-size)}.control-btn:hover{flex:1.2}.control-btn:active{flex:.95}.play-btn{background-color:var(--accent-orange);border-radius:var(--playback-btn-radius);padding:var(--playback-btn-icon-top);color:var(--panel-green);cursor:pointer;box-sizing:border-box;border:none;flex-direction:column;flex:3 0;justify-content:space-between;align-items:flex-start;width:auto;height:100%;font-weight:800;transition:flex .4s cubic-bezier(.2,0,0,1),background-color .3s,color .3s;display:flex}.play-btn:hover{flex:3.4}.play-btn:active{flex:2.8}.play-btn .play-icon{z-index:2;pointer-events:none;width:var(--playback-icon-size);height:var(--playback-icon-size);flex-shrink:0;align-self:flex-start;position:relative}.play-btn .play-text{font-size:var(--playback-btn-font-size);line-height:var(--playback-btn-line-height);letter-spacing:1px;z-index:2;pointer-events:none;align-self:flex-end;position:relative}.modal-overlay{z-index:1000;z-index:1000;background:0 0;justify-content:center;align-items:center;position:fixed;inset:0}.modal-content{background:var(--bg-cream);box-sizing:border-box;border-radius:24px;flex-direction:column;gap:20px;width:400px;max-width:calc(100vw - 32px);padding:32px;display:flex;box-shadow:0 10px 30px #0003}.modal-content h2{color:var(--panel-green);margin:0;font-weight:900}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{color:var(--panel-green);font-family:inherit;font-size:14px;font-weight:700}.input-group input{color:var(--text-dark);background:#faf5ef;border:1px solid #a1a7a4;border-radius:12px;padding:12px;font-family:inherit;font-size:16px}.modal-actions{justify-content:flex-end;gap:12px;margin-top:12px;display:flex}.btn-save{cursor:pointer;background:var(--accent-orange);color:var(--panel-green);border:none;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700}.projects-drawer-overlay{z-index:1000;box-sizing:border-box;background-color:#00291059;justify-content:flex-start;align-items:flex-start;padding:96px 12px 12px;display:flex;position:fixed;inset:0}.projects-drawer{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none;background-color:#d9d9d9;border-radius:24px;width:100%;max-height:calc(100vh - 108px);padding:16px;overflow-y:auto}.projects-drawer::-webkit-scrollbar{display:none}.projects-drawer-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));justify-items:center;gap:12px;display:grid}.projects-drawer-item{cursor:pointer}.projects-drawer-add{background-color:var(--accent-orange);width:88px;height:88px;color:var(--panel-green);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .15s;display:flex}.projects-drawer-add:hover{transform:scale(1.05)}.projects-drawer-add svg{width:32px;height:32px}.app-container.mobile{height:100dvh;position:fixed;top:0;left:0;right:0;overflow:hidden}.app-container.mobile .navbar.navbar-mobile{justify-content:space-between;align-items:center;gap:8px;height:64px;padding:12px;display:flex}.app-container.mobile .nav-projects-btn{height:40px;color:var(--panel-green);letter-spacing:.5px;cursor:pointer;background-color:#d9d9d9;border:none;border-radius:20px;flex-shrink:0;align-items:center;gap:8px;padding:2px 16px 2px 2px;font-family:inherit;font-size:12px;font-weight:600;line-height:16px;display:flex}.app-container.mobile .nav-projects-disc{background-color:var(--accent-orange);width:36px;height:36px;color:var(--panel-green);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.app-container.mobile .nav-projects-disc svg{width:18px;height:18px}.app-container.mobile .nav-projects-text{white-space:nowrap}.app-container.mobile .nav-mobile-right{flex-shrink:0;align-items:center;gap:4px;display:flex}.app-container.mobile .nav-add-btn,.app-container.mobile .nav-info-btn{cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;height:40px;padding:12px 16px;font-family:inherit;font-size:12px;font-weight:600;line-height:16px;display:flex}.app-container.mobile .nav-add-btn{background-color:var(--accent-orange);color:var(--panel-green)}.app-container.mobile .nav-info-btn{color:var(--panel-green);background-color:#d9d9d9;width:auto}.app-container.mobile .nav-account-btn{background-color:var(--panel-green);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.app-container.mobile .nav-account-dot{background-color:#faf5ef;border-radius:50%;width:12px;height:12px}.app-container.mobile .nav-account-avatar{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.app-container.mobile .nav-account-google{color:#faf5ef;width:20px;height:20px}.app-container.mobile .main-layout{box-sizing:border-box;flex-direction:column;gap:4px;height:calc(100dvh - 64px);padding:4px 12px 12px;display:flex}.app-container.mobile .sidebar{display:none}.app-container.mobile .header{flex:none}.app-container.mobile .main-content{flex:auto;min-height:0}.app-container.mobile .footer{flex:none}.app-container.mobile .header-container{cursor:pointer;border-radius:20px;gap:8px;min-height:0;padding:14px 16px}.app-container.mobile .header-container .track-title{font-size:32px;line-height:32px}.app-container.mobile .header-container .track-meta{font-size:12px}.app-container.mobile .header-container .header-right{display:none}.app-container.mobile .waveform-container{grid-template-columns:minmax(0,1fr);grid-template-rows:36px var(--wf-gap-marker-loop) var(--wf-track-thickness) var(--wf-gap-loop-grid) 1fr;touch-action:none;column-gap:0;padding:16px}.app-container.mobile .waveform-container .v-slider-wrapper,.app-container.mobile .waveform-container .h-slider-container{display:none}.app-container.mobile .waveform-container .top-empty-track{height:36px}.app-container.mobile .footer-container{flex-direction:column;gap:12px;height:auto}.app-container.mobile .footer-container .center-controls{order:1;width:100%;height:auto}.app-container.mobile .footer-container .playback-controls{flex:0 0 80px;height:80px}.app-container.mobile .footer-container .slider-section:first-child{order:2;justify-content:center;width:100%}.app-container.mobile .footer-container .slider-rail-container,.app-container.mobile .footer-container .slider-head{touch-action:none}.app-container.mobile .footer-container .slider-section:last-child,.app-container.mobile .footer-container .slider-buttons{display:none}.app-container.mobile .add-audio-modal-container{top:68px;left:12px;right:12px;bottom:calc(var(--slider-rail-container-height) + 24px);border-radius:24px;gap:12px;padding:20px;animation:.55s cubic-bezier(.22,1,.36,1) both mobileDialogReveal;position:fixed}@keyframes mobileDialogReveal{0%{clip-path:inset(40% 0 round 24px)}to{clip-path:inset(0 round 24px)}}.app-container.mobile .add-modal-top-grid{display:none}.app-container.mobile .add-modal-bottom-area{flex-direction:column;align-items:stretch;gap:4px;display:flex}.app-container.mobile .add-modal-headline{flex:none;margin-right:0;container-type:normal}.app-container.mobile .add-modal-headline .headline-text-wrapper{height:auto;font-size:48px;line-height:.94}.app-container.mobile .add-modal-inputs{flex:none;gap:4px;margin-top:auto}.app-container.mobile .step-1-inputs,.app-container.mobile .step-2-inputs{gap:4px!important}.app-container.mobile .add-input-box,.app-container.mobile .add-file-box{flex:none;height:112px}.app-container.mobile .add-modal-submit-btn{flex:none;width:100%;height:84px}.app-container.mobile .add-modal-submit-btn:hover{width:100%}.app-container.mobile .add-input-box label,.app-container.mobile .add-file-box label{font-size:14px;line-height:18px;top:12px}.app-container.mobile .youtube-input,.app-container.mobile .add-file-button-area{top:38px}.app-container.mobile .modal-close-btn{border-radius:10px;align-items:center;width:47px;height:47px;padding:0}