.controls-row{box-sizing:border-box;height:40px;font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#000000e6;background:#0000000d;border:1px solid #0000000d;border-radius:10px;font-size:14px;position:relative}.controls-labeled-row,.controls-select-trigger,.controls-color-control,.controls-text-control{justify-content:space-between;align-items:center;gap:8px;width:100%;height:40px;padding:0 12px;display:flex}.controls-label,.controls-select-label,.controls-color-label,.controls-text-label{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#000000e6;white-space:nowrap;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:14px;font-weight:400;line-height:20px}.controls-select-row{height:40px;position:relative}.controls-select-trigger{font:inherit;color:inherit;cursor:pointer;background:#0000000d;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px #0000000d}.controls-select-right{flex:1;justify-content:flex-end;align-items:center;gap:6px;min-width:0;display:inline-flex}.controls-select-label{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#000000e6;white-space:nowrap;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:14px;font-weight:400;line-height:20px}.controls-select-value,.controls-select-option{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#0009;font-size:14px;font-weight:400;line-height:20px}.controls-select-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:108px;overflow:hidden}.controls-color-hex,.controls-text-input{color:#0009}.controls-select-chevron{color:#00000080;flex-shrink:0;width:14px;height:14px}.controls-select-dropdown{z-index:50;box-sizing:border-box;background:#fff;border:1px solid #0000000f;border-radius:10px;flex-direction:column;gap:2px;padding:4px;display:flex;box-shadow:0 1px 0 -1px #0000000f,0 0 0 1px #0000000f,0 4px 12px #00000014}.controls-select-option{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;width:100%;height:36px;padding:0 8px;display:flex}.controls-select-option[data-selected=true],.controls-select-option:hover{background:#0000000f}.controls-segmented{background:#0000000f;border-radius:8px;flex-shrink:0;align-items:center;height:28px;padding:2px;display:inline-flex;position:relative}.controls-segmented-pill{background:#fff;border-radius:6px;position:absolute;top:2px;bottom:2px;box-shadow:0 1px 2px #00000014}.controls-segmented-button{z-index:1;height:24px;font:inherit;color:#0000008c;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:0 9px;font-size:13px;position:relative}.controls-segmented-button[data-active=true]{color:#000000e6}.controls-color-inputs{flex-shrink:0;align-items:center;gap:10px;display:inline-flex}.controls-color-hex{text-align:right;min-width:68px;font-family:var(--font-geist-mono), ui-monospace, monospace;letter-spacing:.04em;cursor:text;font-size:13px}.controls-color-hex-input{text-align:right;width:78px;font-family:var(--font-geist-mono), ui-monospace, monospace;letter-spacing:.04em;color:#000000e6;background:0 0;border:0;border-bottom:1px solid #0009;outline:none;padding:0 0 1px;font-size:13px}.controls-color-swatch{cursor:pointer;border:1px solid #00000026;border-radius:999px;flex-shrink:0;width:22px;height:22px;padding:0}.controls-color-picker-native{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.controls-text-input{text-align:right;min-width:0;font:inherit;background:0 0;border:0;outline:none;flex:auto;padding:0}.controls-toggle{z-index:2;background:var(--bg-surface);font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;letter-spacing:-.01em;color:var(--text-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;border-radius:9999px;margin:0;padding:6px 12px;font-size:14px;line-height:20px;position:absolute}.controlled-demo{background:#fafafa;border-radius:24px;width:100%;overflow:clip}.controlled-demo__preview{background:var(--bg-surface);border-radius:24px;justify-content:center;align-self:stretch;align-items:center;min-height:326px;display:flex;position:relative;overflow:clip}.controlled-demo__toggle{bottom:12px;right:12px}.toggle-switch{cursor:pointer;border:none;border-radius:999px;flex-shrink:0;width:32px;height:18px;padding:0;transition:background .15s;position:relative}.toggle-switch__knob{background:#fff;border-radius:50%;width:14px;height:14px;transition:left .15s;position:absolute;top:2px;box-shadow:0 1px 1px #0000000d}.demo-trigger{all:unset;cursor:pointer;width:100%;height:100%;min-height:inherit;justify-content:center;align-items:center;display:flex}.controls-section+.controls-section{border-top:1px solid #0000000f;padding-top:16px}.controls-section__title{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#00000073;margin:0 0 12px;font-size:11px;font-weight:500}.controls-section__fields{flex-direction:column;gap:12px;display:flex}
.controls-slider-wrapper{height:40px;position:relative}.controls-slider{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:#0000000d;border:1px solid #0000000d;border-radius:10px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.controls-slider-hashmarks{pointer-events:none;position:absolute;inset:0}.controls-slider-hashmark{background:0 0;border-radius:50%;width:2px;height:2px;transition:background .2s;position:absolute;top:50%;transform:translate(-50%,-50%)}.controls-slider-active .controls-slider-hashmark{background:#00000026}.controls-slider-active .controls-slider-value{color:#000000e6}.controls-slider-fill{pointer-events:none;position:absolute;top:0;bottom:0;left:0}.controls-slider-active .controls-slider-fill{background:#7d7d7d38}.controls-slider-handle{pointer-events:none;background:#1a1a1ad9;border-radius:999px;width:3px;height:20px;position:absolute;top:50%}.controls-slider-label{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#000000e6;pointer-events:none;font-size:14px;font-weight:400;line-height:20px;transition:color .15s;position:absolute;top:50%;left:12px;transform:translateY(calc(-50% - .5px))}.controls-slider-value{font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#0009;pointer-events:auto;border-bottom:1px solid #0000;padding-bottom:1px;font-size:14px;font-weight:400;line-height:20px;transition:color .15s,border-color .15s;position:absolute;top:50%;right:16px;transform:translateY(calc(.5px - 50%))}.controls-slider-value-editable{border-bottom-color:#0009}.controls-slider-input{width:4ch;min-width:3ch;max-width:6ch;font-family:var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;color:#000000e6;text-align:right;background:0 0;border:none;border-bottom:1px solid #000000e6;outline:none;padding:0 0 1px;font-size:14px;font-weight:400;line-height:20px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}