html,body{margin:0;width:100%;min-height:100%;background:#111;font-family:Inter,system-ui,sans-serif}#hero-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}#audio-ui{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:14px;padding:14px 16px;border-radius:14px;background:#0000008c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);font-size:13px;letter-spacing:.04em;z-index:20;isolation:isolate}.ui-buttons{display:flex;gap:8px}.ui-buttons button{padding:8px 14px;border-radius:8px;border:none;background:#ffffff14;color:#fff;cursor:pointer;transition:all .18s ease}.ui-buttons button:hover{background:#ffffff2e}.ui-buttons button:active{transform:translateY(1px)}.ui-sliders{display:flex;flex-direction:column;gap:10px}.slider{display:flex;flex-direction:column;gap:2px}.slider label{font-size:11px;color:#ffffffb3}.slider input[type=range]{width:160px;accent-color:#4aa3ff}.hidden{display:none!important}#devPanel{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:14px;background:#0000008c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);z-index:30;min-width:160px;isolation:isolate}.meter label{font-size:11px;color:#ffffffb3}.meter-bar{height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.meter-fill{height:100%;width:0%;background:#6cf;transition:width .08s ease-out}