.tone-joystick{aspect-ratio:1;align-self:center;width:min(224px,100%);margin:6px 0;padding:20px;position:relative}.tone-joystick-well{background:radial-gradient(ellipse at 25% 25%, rgb(245 158 11/var(--tone-warm)), transparent 65%), radial-gradient(ellipse at 75% 75%, rgb(6 182 212/var(--tone-cool)), transparent 65%), #171c1e;touch-action:none;user-select:none;cursor:grab;border:1px solid #ffffff12;border-radius:50%;width:100%;height:100%;position:relative;box-shadow:inset 0 2px 5px #000000a6,inset 0 10px 24px #0000004d,0 1px #ffffff14}.tone-joystick-well:active,.tone-joystick-well[data-dragging=true]{cursor:grabbing}.tone-joystick-well:before{content:"";pointer-events:none;border:1px solid #ffffff0a;border-radius:50%;position:absolute;inset:22px}.tone-joystick-well:focus-visible,.tone-joystick-well:focus-within{outline:2px solid var(--tone-accent);outline-offset:4px}.tone-joystick-reference,.tone-joystick-head{left:calc(50% + (50% - 22px) * var(--tone-x));top:calc(50% + (50% - 22px) * var(--tone-y));pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.tone-joystick-reference{background:#0000002e;border:1px solid #ffffff47;border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 2px #00000059}.tone-joystick-head{z-index:1;filter:drop-shadow(0 5px 5px #00000073);width:32px;height:32px;transition:filter .18s}.tone-joystick-well[data-dragging=true] .tone-joystick-head{filter:drop-shadow(0 5px 5px #00000073) drop-shadow(0 0 5px color-mix(in srgb, var(--tone-accent) 35%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--tone-accent) 20%, transparent))}.tone-joystick-head>div{border-color:color-mix(in srgb, var(--tone-accent) 40%, transparent);box-shadow:inset 1px 2px 3px #ffffff40, inset -1px -2px 3px #0000004d, 0 0 8px color-mix(in srgb, var(--tone-accent) 12%, transparent);background:linear-gradient(145deg,#535f63,#30393d)}.tone-joystick-grip{--tone-grip-travel:0px;width:6px;height:6px;transform:translate(calc(-50% + clamp(-3px, var(--tone-x,0) * var(--tone-grip-travel), 3px)), calc(-50% + clamp(-3px, var(--tone-y,0) * var(--tone-grip-travel), 3px)));background:var(--tone-accent);box-shadow:0 0 5px var(--tone-accent);border-radius:50%;display:block;position:absolute;top:50%;left:50%}@media (width>=768px) and (hover:hover) and (pointer:fine){.tone-joystick-grip{--tone-grip-travel:3px}}.tone-joystick-axis-title{color:#869398;pointer-events:none;font-size:12px;line-height:12px;position:absolute}.tone-joystick-axis-top{color:#c0a16c;top:1px;left:50%;transform:translate(-50%)}.tone-joystick-axis-bottom{bottom:1px;left:50%;transform:translate(-50%)}.tone-joystick-axis-left{top:50%;left:-8px;transform:translateY(-50%)}.tone-joystick-axis-right{color:#7abcc5;top:50%;right:-14px;transform:translateY(-50%)}.segmented-pill-group{gap:8px;display:grid}.cadence-controller{border-top:1px solid #ffffff14;flex-direction:column;gap:16px;padding-top:16px;display:flex}.cadence-controller-header{justify-content:space-between;align-items:start;gap:8px;display:flex}.settings-section-heading{color:#c5ced2;flex-shrink:0;margin:0;font-family:inherit;font-size:12px;font-weight:400;line-height:1.5}.settings-section-heading label{font:inherit;color:inherit}.cadence-controller-description,.cadence-continuous-state{color:#929ea3;text-align:right;min-width:0;font-size:11px;line-height:1.5}.range-slider-values{color:#929ea3;justify-content:space-between;gap:8px;font-size:11px;display:flex}.range-slider-values output{color:#dce8eb;font-variant-numeric:tabular-nums}.range-slider-controls{height:32px;margin-top:8px;position:relative}.range-slider-track{background:linear-gradient(to right, #101416 var(--range-start), var(--ui-accent,#67e8f9) var(--range-start), var(--ui-accent,#67e8f9) var(--range-end), #101416 var(--range-end));border-radius:3px;height:5px;position:absolute;top:14px;left:7px;right:7px;box-shadow:inset 0 1px 3px #00000080,0 1px #ffffff14}.range-slider .range-slider-input[type=range]{appearance:none;pointer-events:none;background:0 0;width:100%;height:32px;margin:0;position:absolute;inset:0}.range-slider .range-slider-input:focus-visible{z-index:2;outline:none}.range-slider .range-slider-input[type=range]::-webkit-slider-runnable-track{height:5px;box-shadow:none;background:0 0}.range-slider .range-slider-input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;box-shadow:inset 0 1px 1px #ffffff80, 0 1px 3px #0009, 0 0 8px rgb(var(--cyan) / 15%);pointer-events:auto;cursor:ew-resize;background:linear-gradient(#94eef8,#35b2c5);border:1px solid #90e6f3;border-radius:50%;margin-top:-4.5px}.range-slider .range-slider-input[type=range]::-moz-range-track{height:5px;box-shadow:none;background:0 0}.range-slider .range-slider-input[type=range]::-moz-range-progress{height:5px;box-shadow:none;background:0 0}.range-slider .range-slider-input[type=range]::-moz-range-thumb{width:12px;height:12px;box-shadow:0 1px 3px #0009, 0 0 8px rgb(var(--cyan) / 15%);pointer-events:auto;cursor:ew-resize;background:linear-gradient(#94eef8,#35b2c5);border:1px solid #90e6f3;border-radius:50%}.range-slider .range-slider-input:focus-visible::-webkit-slider-thumb{outline-offset:3px;outline:2px solid #67e8f9}.range-slider .range-slider-input:focus-visible::-moz-range-thumb{outline-offset:3px;outline:2px solid #67e8f9}.range-slider-controls[data-overlap=true] .range-slider-input-min::-webkit-slider-thumb{transform:translate(-7px)}.range-slider-controls[data-overlap=true] .range-slider-input-max::-webkit-slider-thumb{transform:translate(7px)}.range-slider-controls[data-overlap=true] .range-slider-input-min::-moz-range-thumb{transform:translate(-7px)}.range-slider-controls[data-overlap=true] .range-slider-input-max::-moz-range-thumb{transform:translate(7px)}.settings-tray{--settings-tray-closed-transform:translateX(100%);top:calc(var(--workspace-toolbar-height,52px) + .75rem);z-index:150;width:min(320px,100vw);max-height:max(0px, calc(100dvh - var(--workspace-toolbar-height,52px) - var(--workspace-library-height,0px) - 1.5rem));border:1px solid var(--ui-edge);background:var(--ui-surface);color:#dce2e4;box-shadow:var(--ui-surface-shadow);visibility:hidden;opacity:0;pointer-events:none;transform:var(--settings-tray-closed-transform);color-scheme:dark;border-right:0;border-radius:8px 0 0 8px;flex-direction:column;transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s,visibility 0s .4s;display:flex;position:fixed;right:0}.settings-tray[data-mobile=true]{--settings-tray-closed-transform:translateY(100%);z-index:200;width:100%;max-height:min(75dvh, max(0px, calc(100dvh - var(--workspace-toolbar-height,52px) - .75rem)));border-right:1px solid var(--ui-edge);border-bottom:0;border-radius:8px 8px 0 0;inset:auto 0 0}.settings-tray[data-open=true]{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s;transform:translate(0)}@starting-style{.settings-tray[data-open=true]{transform:var(--settings-tray-closed-transform);opacity:0}}.settings-tray-header{border-bottom:1px solid #00000059;flex-shrink:0;align-items:center;gap:10px;padding:14px 16px;display:flex;box-shadow:0 1px #ffffff0a}.settings-tray-title{flex:1;min-width:0}.settings-tray-title h2{text-overflow:ellipsis;white-space:nowrap;color:#edf2f3;font-size:14px;font-weight:500;overflow:hidden}.settings-tray-title p{color:#929c9f;font-variant-numeric:tabular-nums;font-size:11px}.settings-tray-content{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#434b4f transparent;min-height:0;padding:16px;overflow-y:auto}.settings-tray[data-mobile=true] .settings-tray-content{padding-bottom:max(16px, env(safe-area-inset-bottom,0px))}.settings-tray-section+.settings-tray-section{margin-top:12px}.settings-tray-content section.rounded-lg{background:0 0;border:0;border-radius:0;padding:0}.settings-tray .border-t{border-color:var(--ui-edge);padding-top:12px}.settings-tray :is(.text-gray-300,.text-gray-400){color:#a7b1b5}.settings-tray .text-gray-500{color:#869195}.settings-sound-menu{overscroll-behavior:contain;scrollbar-width:thin;padding:6px}.settings-menu.settings-sound-menu{scrollbar-color:#434b4f #202527}.settings-menu .settings-sound-option{height:36px;box-shadow:none;background:0 0;border-color:#0000;gap:8px}.settings-menu .settings-sound-option:hover{background:#2b3336}.settings-menu .settings-sound-option:is(:has(input:checked),[aria-checked=true]){color:#67e8f9;background:#26363a;border-color:#67e8f940;box-shadow:inset 0 1px #67e8f914}.settings-menu .settings-sound-preview{width:32px;min-width:32px;height:32px}@media (prefers-reduced-motion:reduce){.tone-joystick-head,.settings-tray,.settings-tray .ui-control,.ui-input{transition:none}}