@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap";:root{--bg-color: #050505;--text-primary: #fff;--text-secondary: #444;--text-dim: rgb(128, 128, 128);--accent: #00ffff;--font-main: "Helvetica Neue", "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);cursor:crosshair;background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px}@media(max-width:767px){body{overflow-y:auto;overflow-x:hidden}}@media(min-width:768px){body{overflow:hidden}}.app-container{width:100vw;position:relative}@media(max-width:767px){.app-container{min-height:100vh;height:auto;overflow:visible}}@media(min-width:768px){.app-container{height:100vh;overflow:hidden}}.canvas-container{width:100%;height:100%;position:absolute;top:0;left:0;z-index:0}@media(max-width:767px){.canvas-container{height:120%;transform:translateY(-15%)}}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#050505e6;display:flex;justify-content:center;align-items:center;z-index:100;cursor:pointer;transition:opacity .5s ease}.overlay .start-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.overlay .start-content h1{font-size:2rem;letter-spacing:4px;font-weight:400}.overlay .start-content p{color:var(--text-secondary);font-size:.8rem;letter-spacing:2px}.overlay .start-content svg{margin-bottom:1rem;opacity:.8;transition:transform .2s ease}.overlay:hover svg{transform:scale(1.1);opacity:1}.ui-layer{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;max-width:1400px;height:100%;pointer-events:none;padding:2rem;display:flex;flex-direction:column;justify-content:space-between}.ui-layer .header,.ui-layer .footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1);pointer-events:auto}.ui-layer .header .header-right,.ui-layer .footer .header-right{display:flex;align-items:center;gap:15px}.ui-layer .header .header-right .version-badge,.ui-layer .footer .header-right .version-badge{border:1px solid #fff;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:400}.ui-layer .header .header-right .version-number,.ui-layer .footer .header-right .version-number{color:var(--text-dim);font-size:10px}.ui-layer .footer{padding-bottom:0;padding-top:1rem;border-bottom:none;border-top:1px solid rgba(255,255,255,.1)}.ui-layer .footer .footer-left{display:flex;align-items:center;gap:30px}.ui-layer .footer .badge-box{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:none;padding:0}.ui-layer .footer .badge-text{font-size:10px;font-weight:400;letter-spacing:1px;color:#fff}.ui-layer .footer .footer-links{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-dim)}.ui-layer .footer .footer-links a{color:var(--text-dim);text-decoration:none;transition:color .2s}.ui-layer .footer .footer-links a:hover{color:#fff}.ui-layer .footer .separator{color:var(--text-dim);opacity:.5}.ui-layer .footer .credits-text{display:flex;flex-direction:column;gap:2px;align-items:flex-end}.ui-layer .footer .credits-text p{font-size:10px;color:#fff;margin:0;letter-spacing:1px}.ui-layer .footer .credits-text .sub-credit{font-size:10px;opacity:1;color:var(--text-dim)!important;text-align:right}.ui-layer .logo{font-weight:400;letter-spacing:4px;font-size:14px}.ui-layer .status{color:var(--accent)}.ui-layer .instructions{color:var(--text-dim)}.ui-layer .credits{color:var(--text-dim);opacity:.8}.ui-layer .controls-panel{position:absolute;top:0;transform:none;width:280px;padding:0;display:flex;flex-direction:column;gap:24px;pointer-events:auto;margin-top:80px}.ui-layer .controls-panel.left{left:32px}.ui-layer .controls-panel.right{right:32px}.ui-layer .controls-panel .section{display:flex;flex-direction:column;gap:16px;width:100%;position:relative}.ui-layer .controls-panel .section .section-header{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:400;letter-spacing:1px;color:gray;padding-bottom:8px;width:100%}.ui-layer .controls-panel .section .section-header:after{content:"";position:absolute;left:0;right:0;margin-top:32px;border-bottom:1px solid rgba(255,255,255,.1)}.ui-layer .controls-panel .control-group{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.ui-layer .controls-panel .control-group label{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.05em;color:gray;width:120px;flex-shrink:0}.ui-layer .controls-panel .control-group label .value{margin-left:auto;font-family:Helvetica Neue;color:var(--text-dim);padding-right:0}.ui-layer .controls-panel .control-group input[type=range],.ui-layer .controls-panel .control-group select,.ui-layer .controls-panel .control-group .waveform-group{flex:1;width:auto;min-width:0;max-width:180px;margin-left:auto}.ui-layer .controls-panel .control-group input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:2px;background:#ffffff1a;outline:none}.ui-layer .controls-panel .control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#000;border:1px solid #fff;cursor:pointer;transition:transform .1s;border-radius:0}.ui-layer .controls-panel .control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.ui-layer .controls-panel .control-group input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#000;border:1px solid #fff;cursor:pointer;transition:transform .1s;border-radius:0}.ui-layer .controls-panel .control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.ui-layer .controls-panel .control-group select{flex:1;background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;padding:0;font-family:inherit;font-size:10px;outline:none;cursor:pointer;height:18px;line-height:16px}.ui-layer .controls-panel .control-group select option{background:#000}.ui-layer .controls-panel .control-group input[type=checkbox]{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;margin-left:auto;flex-shrink:0}.ui-layer .controls-panel .control-group input[type=checkbox]:checked{background:#fff}.ui-layer .controls-panel .control-group input[type=checkbox]:hover{border-color:#fff9}.ui-layer .controls-panel .waveform-group{flex-direction:column;align-items:stretch;gap:8px}.ui-layer .controls-panel .waveform-group label{min-width:auto}.ui-layer .controls-panel .waveform-group .waveform-canvas{width:100%!important;height:60px;cursor:ew-resize;border:1px solid rgb(50,50,50);border-radius:0}@media(max-width:768px){.ui-layer .app-container{overflow-y:auto;-webkit-overflow-scrolling:touch}.ui-layer .canvas-container{position:fixed;height:60vh}.ui-layer .ui-layer{position:relative;left:0;transform:none;width:100%;max-width:none;height:auto;min-height:100vh;display:block;padding:1rem;overflow:visible}.ui-layer .header{position:relative;margin-bottom:20vh}.ui-layer .controls-panel{position:relative;top:auto;left:auto!important;right:auto!important;transform:none;width:100%;margin-bottom:2rem;padding:1rem;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);gap:8px}.ui-layer .controls-panel.left{margin-top:25vh}.ui-layer .controls-panel.right{margin-top:0}.ui-layer .controls-panel .section{display:flex;flex-direction:column;gap:12px}.ui-layer .controls-panel .section .control-group:has(.power-button){order:-1;margin-top:0!important;margin-bottom:20px}.ui-layer .footer{position:relative;margin-top:2rem;padding-bottom:2rem}}
