:root{color-scheme:light dark;--theme-1: rgb(6, 6, 40);--theme-2: rgb(119, 119, 3);--theme-grid-transparency: 10%;--color-bg: var(--theme-1);--color-fg: var(--theme-2);--color-bg-fade: color-mix(in oklch, var(--color-bg), transparent 40%);--color-fg-fade: oklch(from var(--color-fg) calc(l*.8) c h);--color-accent: var(--theme-3);--color-border: color-mix(in oklch, var(--color-fg), transparent var(--theme-grid-transparency));--freq-bass: oklch(from var(--theme-2) calc(l - .4) calc(c/5) h);--freq-mid: oklch(from var(--theme-2) l calc(c/2) h);--freq-treble: oklch(from var(--theme-2) calc(l + .15) calc(c*.8) h);--border-width: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px}@font-face{font-family:Space Mono;src:url(/fonts/SpaceMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Space Mono;src:url(/fonts/SpaceMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Space Mono;src:url(/fonts/SpaceMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Space Mono;src:url(/fonts/SpaceMono-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic;font-display:swap}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:Space Mono,monospace;font-size:14px;line-height:1.4;background-color:light-dark(white,black)}#app{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-bg);color:var(--color-fg)}button{font-family:inherit;font-size:inherit;background:var(--color-bg);color:var(--color-fg);border:var(--border-width) solid var(--color-border);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:background .1s,color .1s}button:hover{background:var(--color-fg);color:var(--color-bg)}button:active{opacity:.8}button.active{background:var(--color-fg);color:var(--color-bg)}button:disabled{opacity:.3;cursor:not-allowed}input{font-family:inherit;font-size:inherit;background:var(--color-bg);color:var(--color-fg);border:var(--border-width) solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm)}input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--color-fg)}.header{display:flex;justify-content:space-between;gap:var(--spacing-sm);padding:var(--spacing-md);border-bottom:var(--border-width) solid var(--color-border);flex-shrink:0}.header-left-group,.header-right-group{display:flex;gap:var(--spacing-xs)}.footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-top:var(--border-width) solid var(--color-border);flex-shrink:0;font-variant-numeric:tabular-nums}.mode-footer{display:flex;justify-content:center;align-items:center;padding:var(--spacing-md);border-top:var(--border-width) solid var(--color-border);flex-shrink:0;font-variant-numeric:tabular-nums}.mode-buttons{display:flex;gap:var(--spacing-xs)}.mode-buttons{display:flex;gap:.5rem}.mode-buttons button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:none;color:var(--color-fg-fade);opacity:.8;cursor:pointer;transition:all .2s ease}.mode-buttons button:hover{color:var(--color-fg-fade);opacity:1}.mode-buttons button.active{font-weight:700;opacity:1;color:var(--color-fg)}.mode-buttons button svg{width:1rem;height:1rem;flex-shrink:0}@media(max-width:700px){.mode-buttons button{padding:.5rem}.mode-buttons button span{display:none}}.footer-time{flex-shrink:0}.footer-actions{display:flex;gap:var(--spacing-sm)}.minimap{flex:0 0 10%;border-bottom:var(--border-width) solid var(--color-border);position:relative;overflow:hidden}.minimap svg{width:100%;height:100%;display:block}.minimap-overlay-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.minimap-overlay-svg rect{fill:var(--color-bg-fade)}.minimap-overlay-svg line{stroke:var(--color-fg);stroke-width:2}.minimap-overlay-svg polygon{fill:var(--color-bg)}.chop-container{flex:1;display:flex;min-height:0}.mode-container{flex:1;display:flex;flex-direction:column;min-height:0}.mode-container>.hidden{display:none}.project-container,.settings-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg);text-align:center}.mode-title{font-size:24px;text-transform:uppercase;margin:0}.mode-info{color:var(--color-fg);opacity:.7;margin:0}.project-chop-list{padding:var(--spacing-md);border:var(--border-width) solid var(--color-border);min-width:300px;min-height:100px}.delete-all-btn{margin-top:var(--spacing-md)}.settings-form{padding:var(--spacing-md);border:var(--border-width) solid var(--color-border);min-width:300px;min-height:100px}.settings-section{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);text-align:left}.settings-label{font-size:12px;text-transform:uppercase;opacity:.8}.settings-select{font-family:inherit;font-size:inherit;background:var(--color-bg);color:var(--color-fg);border:var(--border-width) solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;width:100%}.settings-checkbox{width:20px;height:20px;cursor:pointer;accent-color:var(--color-fg)}.chop-controls-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-sm) 0;flex:0 0 auto}.zoom-slider{width:200px;height:40px;appearance:none;background:var(--color-bg);border:var(--border-width) solid var(--color-border);border-radius:0;outline:none;cursor:ns-resize}.zoom-slider::-webkit-slider-track{background:var(--color-bg);border:var(--border-width) solid var(--color-border);border-radius:0}.zoom-slider::-webkit-slider-thumb{appearance:none;width:36px;height:20px;background:var(--color-bg);border:var(--border-width) solid var(--color-fg);cursor:ns-resize}.zoom-slider::-webkit-slider-thumb:hover{background:var(--color-fg)}.zoom-slider::-moz-range-track{background:var(--color-bg);border:var(--border-width) solid var(--color-border);border-radius:0;height:8px}.zoom-slider::-moz-range-thumb{background:var(--color-bg);border:var(--border-width) solid var(--color-border);width:36px;height:20px;cursor:ns-resize}@media(min-width:768px){.minimap{flex:0 0 30%}}.box{border-bottom:var(--border-width) solid var(--color-border)}.chop-box{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}@media(min-width:768px){.chop-box{border-bottom:none;border-right:var(--border-width) solid var(--color-border)}.chop-box:last-child{border-right:none}}.chop-waveform-scroller{flex:1 1 0;min-height:0;overflow-x:auto;overflow-y:hidden;cursor:ns-resize;touch-action:pan-x;-webkit-overflow-scrolling:touch;position:relative;z-index:0;scrollbar-width:none}.chop-box-overlay{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;align-content:center;justify-content:space-between;z-index:10;pointer-events:none}.chop-overlay-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:2}.chop-overlay-svg rect{fill:var(--color-bg-fade)}.chop-inner-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.chop-inner-svg rect{fill:var(--color-bg-fade)}.chop-center-line-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.chop-center-line-svg .chop-center-line{stroke:var(--color-fg);stroke-width:2}.chop-box-overlay>*{pointer-events:auto}.chop-time-input{width:100px;text-align:center}.chop-play-btn{padding:var(--spacing-xs) var(--spacing-sm)}.chop-waveform-inner{height:100%;min-width:100%;width:100%;display:flex}.chop-waveform-spacer{height:100%}.chop-waveform-inner svg{height:100%;display:block;stroke:var(--color-fg)}.waveform-path{stroke:var(--color-fg)}.drop-overlay{position:fixed;inset:0;background:oklch(from var(--color-bg) calc(l - .2) c h / .95);color:var(--color-fg);display:flex;align-items:center;justify-content:center;font-size:24px;text-transform:uppercase;z-index:1000;pointer-events:none}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);text-transform:uppercase}.hidden-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}@media(orientation:portrait){.chop-container{flex-direction:column}}@media(orientation:landscape){.chop-container{flex-direction:row}.chop-controls-container{padding:var(--spacing-md) var(--spacing-md)}.zoom-slider{width:40px;height:200px;writing-mode:vertical-lr;min-height:120px}}
