.sound-design-controller{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:800px;height:400px;background-color:#626262;border-radius:10px}.sound-design-controller .sample-buttons{display:flex;flex-direction:column;justify-content:center;margin-left:20px;min-width:20px;width:fit-content;padding:0 50px}.sound-design-controller .button{width:45px;height:45px;background-color:#d9d9d9;border-radius:2px}.sound-design-controller .record-button{background-color:#ff3131}.sound-design-controller .sample-button{background-color:#15f7ff}.sound-design-controller .backing-button{background-color:#fb9623}.sound-design-controller .button.active{background-color:#0f0}html[data-interactive-enabled=true] .sound-design-controller .button,html[data-interactive-enabled=true] .sound-design-controller .slider,html[data-interactive-enabled=true] .sound-design-controller .knob-container{cursor:pointer}html[data-interactive-enabled=true] .sound-design-controller .button.is-pressing{transform:translateY(1px);filter:brightness(1.18)}.sound-design-controller .sliders{display:flex;flex-direction:row;justify-content:space-between}.sound-design-controller .slider{position:relative;width:30px;height:300px;background-color:#4a4a4a;border-radius:10px;cursor:default;border:2px solid transparent;margin-left:20px;margin-right:20px}.sound-design-controller .dot{position:absolute;top:280px;left:50%;transform:translate(-50%);width:20px;height:20px;background-color:#d9d9d9;border-radius:10px}.sound-design-controller .knobs-section{display:flex;flex-direction:column;gap:20px;width:100%;height:100%;padding:50px 0;justify-content:center;align-items:center}.sound-design-controller .knobs-row{display:flex;gap:20px;width:100%;height:100%;justify-content:center;align-items:center}.sound-design-controller .knob-container{display:flex;align-items:center;justify-content:center;position:relative;width:70px;height:70px;cursor:default;border:2px solid transparent;border-radius:50%;transition:all .2s ease}.sound-design-controller .ring{position:absolute;background:conic-gradient(#545c64 140deg,#fff0 0,#fff0 220deg,#545c64 0deg);border-radius:50%;width:100%;height:100%}.sound-design-controller .ring-fill{position:absolute;background:conic-gradient(var(--accent) 140deg,rgba(255,255,255,0) 0 360deg,var(--accent) 0deg);border-radius:50%;width:100%;height:100%}.sound-design-controller .space{position:absolute;background-color:#32383f;border-radius:50%;width:calc((100%) - var(--ring-width));height:calc((100%) - var(--ring-width))}.sound-design-controller .knob{display:flex;align-items:center;justify-content:center;position:absolute;background:linear-gradient(#6d757f,#596067);border-radius:50%;width:calc((100%) - (var(--ring-width) + var(--ring-space)));height:calc((100%) - (var(--ring-width) + var(--ring-space)))}.sound-design-controller .knob-indicator-container{display:flex;justify-content:center;width:100%;height:100%}.sound-design-controller .knob-indicator{background:#16181a;width:9%;height:35%;margin-top:4%}main{flex:1;padding:var(--header-height) 20px 20px 20px;max-width:1200px;margin:0 auto;width:100%}:root{--ring-width: 10%;--ring-space: 20%;--accent: #04C5F7}p{padding:0}.tool-bar{display:flex;align-items:center;justify-content:flex-start;padding:15px;background:#1a1a1a;border-radius:8px;margin-bottom:20px;border:1px solid #333}.Product-select{display:flex;align-items:center;gap:10px}.Sync-status{margin-left:16px;padding:6px 12px;border-radius:999px;border:1px solid #333;background:#111;color:#b9b9b9;font-size:12px;letter-spacing:.3px;text-transform:uppercase}.Sync-status.is-syncing{color:#f0c454;border-color:#6b4f00;background:#1a1404}.Sync-status.is-synced{color:#5fe39c;border-color:#135c3a;background:#081b12}.Sync-status.is-failed{color:#ff8a8a;border-color:#7a1f1f;background:#220a0a}label{color:#fff;font-weight:600;white-space:nowrap}.sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;border:none;color:red}select{padding:8px 12px;border-radius:4px;border:1px solid #ccc;background-color:#fff;min-width:200px}.Product-select select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.Microphone-select{padding-left:20px}.Output-record-select{display:flex;align-items:center;gap:10px;margin-left:auto}.Output-record-select .em-button{min-width:auto;width:auto;padding:8px 16px;font-size:14px}.em-button--delete{background-color:#171717}@media(max-width:700px){.tool-bar{flex-direction:column;align-items:stretch;gap:15px}.Product-select{flex-direction:column;align-items:stretch}.Sync-status{margin-left:0;text-align:center}.Product-select select{min-width:auto;width:100%}.Output-record-select{margin-left:0;width:100%;justify-content:center}.Output-record-select .em-button{width:100%}}.main-content{display:flex;gap:40px;align-items:flex-start}.sample-buttons{padding:20px;min-width:300px;flex:0 0 auto;text-align:left}.sample-buttons h2{color:#fff;margin-bottom:20px;font-size:1.5rem;font-weight:600}.backings-container,.sample-select-section{padding:20px;background-color:#252525}.buttons-container{gap:15px}.sample-button-container{display:flex;flex-direction:column;gap:20px}.buttons-container{display:flex;flex-direction:column;gap:15px;align-items:flex-start}.em-button{margin:0}em-button{width:100%}.record-section{display:flex}.record-section em-button{padding:20px}.sample-select-section select,.buttons-container select{width:100%}.em-button--record{background-color:#ff3131}.fx-controls{padding:20px;background:#1a1a1a;border-radius:8px;border:1px solid #333;flex:1;min-width:350px;max-height:80vh;overflow-y:auto}.fx-controls h2{color:#fff;margin-bottom:20px;font-size:1.5rem;font-weight:600;border-bottom:2px solid #007bff;padding-bottom:10px;position:sticky;top:0;background:#1a1a1a;z-index:10}.fx-section{margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid #333}.fx-section:last-child{border-bottom:none}.fx-section h3{color:#fff;margin-bottom:15px;font-size:1.2rem;font-weight:600;color:#007bff}.fx-control{display:flex;align-items:center;gap:15px;margin-bottom:10px;padding:6px 0}.fx-control label{color:#fff;font-weight:500;min-width:90px;font-size:.9rem}.fx-control input[type=range]{flex:1;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none}.fx-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#007bff;border-radius:50%;cursor:pointer}.fx-control input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#007bff;border-radius:50%;cursor:pointer;border:none}.fx-control select{flex:1;padding:6px 8px;background:#333;color:#fff;border:1px solid #555;border-radius:4px;font-size:.9rem}.fx-control span{color:#ccc;font-size:.85rem;min-width:60px;text-align:right}.ControllerDesign{padding:20px;display:flex;flex-direction:column}.display{padding:5px;margin-bottom:20px;height:50px;width:100%;display:flex;align-items:center;justify-content:center;background-color:#262e38;border-radius:10px;border-color:#c0bfbf}.lsd-controller-focus-toggle{position:fixed;right:18px;bottom:18px;z-index:1200;width:44px;height:44px;border:1px solid #3a3a3a;border-radius:8px;background:#111;color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px #00000059}.lsd-internal-interactive .lsd-controller-focus-toggle{display:flex}.lsd-orientation-notice{display:none}.lsd-mobile-device.lsd-portrait .lsd-orientation-notice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;background:#07080af0;color:#fff;font-size:1rem;font-weight:700;text-align:center}body.lsd-controller-focus{overflow:hidden}body.lsd-controller-focus header,body.lsd-controller-focus footer,body.lsd-controller-focus .tool-bar,body.lsd-controller-focus main>.main-content>.sample-buttons,body.lsd-controller-focus main>.main-content>.fx-controls{display:none}body.lsd-controller-focus main{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;width:100%;max-width:none;height:var(--lsd-visible-height, 100dvh);margin:0;padding:clamp(6px,2.5vmin,16px);background:#080a0d;display:flex;align-items:center;justify-content:center}body.lsd-controller-focus .main-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:0}body.lsd-controller-focus .ControllerDesign{width:100%;height:100%;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;--lsd-focus-padding: clamp(12px, 5vmin, 32px);--lsd-focus-display-height: clamp(30px, 10vmin, 44px);--lsd-focus-display-gap: clamp(6px, 2vmin, 12px);--lsd-focus-scale: min( calc((100vw - var(--lsd-focus-padding)) / 800), calc((var(--lsd-visible-height, 100dvh) - var(--lsd-focus-padding) - var(--lsd-focus-display-height) - var(--lsd-focus-display-gap)) / 400) )}body.lsd-controller-focus .ControllerDesign>.display{display:flex;width:min(800px,calc(100vw - var(--lsd-focus-padding)));max-width:100%;height:var(--lsd-focus-display-height);min-height:var(--lsd-focus-display-height);margin:0 0 var(--lsd-focus-display-gap) 0;padding:4px 10px;flex:0 0 auto;font-size:clamp(.75rem,2.8vmin,.95rem);border-radius:8px}body.lsd-controller-focus .ControllerDesign .sound-design-controller{width:800px;height:400px;margin:0;transform:scale(max(.38,min(1,var(--lsd-focus-scale))));transform-origin:center center}@media(max-height:430px){body.lsd-controller-focus .lsd-controller-focus-toggle{right:8px;bottom:8px;width:36px;height:36px}}@media(max-width:700px){main{max-width:none;width:100%;padding:var(--header-height) 12px 12px 12px}.main-content{flex-direction:column;gap:12px}.ControllerDesign{order:1;width:100%;padding:0;--lsd-scale: clamp( .62, min( calc((100vw - 24px)/800) , calc((100dvh - 350px)/400) ), 1 )}.display{margin-bottom:10px;min-height:44px;font-size:.9rem}.ControllerDesign .sound-design-controller{width:800px;height:400px;margin:0 auto;transform-origin:top center;transform:scale(var(--lsd-scale))}.ControllerDesign{min-height:calc(400px * var(--lsd-scale) + 54px)}.sample-buttons{order:2;min-width:100%;max-width:100%;padding:10px 0 0}.fx-controls,.em-button{min-width:100%}.fx-control{flex-direction:column;align-items:stretch;gap:8px}.fx-control label{min-width:auto}.fx-control span{text-align:left}}@media(max-width:900px)and (orientation:landscape){.lsd-internal-interactive main{max-width:none}.lsd-internal-interactive .main-content{gap:12px}.lsd-internal-interactive .sample-buttons{min-width:220px;padding:8px}}