/* A moving scale under a fixed convex glass lens. No continuous animation. */
.glass-slider{position:relative;isolation:isolate;flex:1;min-width:0;width:100%;height:44px;flex-shrink:0;margin:8px 0 12px;border-radius:999px;background:linear-gradient(180deg,#030405d9,#08090bd9);box-shadow:inset 0 1px 2px #000,inset 0 -1px 0 #ffffff0c;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.glass-slider-scale{position:absolute;inset:0;width:100%;height:44px;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.glass-slider-lens{position:absolute;z-index:1;left:50%;top:3px;width:var(--glass-lens-width,58%);height:38px;transform:translateX(-50%);border-radius:999px;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#14171aee,#0b0d10ee);border:1px solid #ffffff38;box-shadow:inset 0 1px 1px #ffffff30,inset 0 -1px 2px #a5bad134,0 1px 3px #0008;}
.glass-slider-lens canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.glass-slider-lens:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 2% 74%,#b5d9ff50,transparent 12%),radial-gradient(ellipse at 98% 76%,#ffe2a23b,transparent 12%),linear-gradient(180deg,#ffffff0d,transparent 33%,transparent 75%,#ffffff08);box-shadow:inset 2px 0 3px #e1efff16,inset -2px 0 3px #e1efff16}
.glass-slider-marker{position:absolute;z-index:2;left:calc(50% - 1px);top:25px;width:2px;height:16px;border-radius:2px;background:#ffe132;box-shadow:0 0 5px #ffe13280;pointer-events:none}
/* Retain one native focus/ARIA/label target and intercept its pointer behavior. */
.glass-slider input[type=range]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0!important;z-index:3;pointer-events:none;cursor:ew-resize;touch-action:pan-y}
.glass-slider.disabled{opacity:.35;pointer-events:none}
.color-opacity>div{flex-wrap:wrap;gap:6px}.color-opacity .glass-slider{flex-basis:100%;margin:0}.color-opacity output{margin-left:auto;background:transparent;padding:2px 0;font-size:12px;color:#b0b0b6}
@media(prefers-reduced-motion:reduce){.glass-slider *{transition:none!important}}
@media(forced-colors:active){.glass-slider{background:Canvas;outline:1px solid CanvasText}.glass-slider-scale,.glass-slider-lens,.glass-slider-marker{display:none}.glass-slider input[type=range]{opacity:1!important;position:relative!important;pointer-events:auto}}

.effect-setting .setting-row output,#intensity-value,.color-opacity output{display:none}

/* One segmented glass choice: native binary switches and multi-option tabs. */
.glass-choice{position:relative;display:block;width:100%;height:44px;flex-shrink:0;isolation:isolate;--choice-count:2;--choice-index:0}
.glass-choice.glass-toggle{display:inline-block;width:124px;flex:0 0 124px;vertical-align:middle}
.glass-choice input[type=checkbox]{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;touch-action:pan-y}
.glass-choice-track{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--choice-count),1fr);align-items:center;text-align:center;padding:3px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#030405d9,#08090bd9);box-shadow:inset 0 1px 2px #000,inset 0 -1px 0 #ffffff0c;pointer-events:none}
.glass-choice-option{position:relative;display:grid;place-items:center;height:38px;min-width:0;margin:0;padding:0 8px;border:0;border-radius:999px;background:transparent;font:600 14px -apple-system,BlinkMacSystemFont,sans-serif;color:#f4f3f8;transition:color .24s;user-select:none;-webkit-user-select:none}
button.glass-choice-option{cursor:pointer;pointer-events:auto;touch-action:pan-y}
button.glass-choice-option:hover{filter:none}
.glass-choice-option[aria-selected=true]{color:#ffdc46}
.glass-choice-lens{position:absolute;z-index:1;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/var(--choice-count));border-radius:999px;border:1px solid #ffffff38;overflow:hidden;background:linear-gradient(180deg,#14171aee,#0b0d10ee);box-shadow:inset 0 1px 1px #ffffff30,inset 0 -1px 2px #a5bad134,0 1px 3px #0008;transform:translateX(calc(var(--choice-index)*100% + var(--choice-drag,0px)));transition:transform var(--choice-snap-ms,280ms) cubic-bezier(.2,.8,.25,1.08),border-color .24s;pointer-events:none}
.glass-choice-lens:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 2% 74%,#b5d9ff50,transparent 16%),radial-gradient(ellipse at 98% 76%,#ffe2a23b,transparent 16%),linear-gradient(180deg,#ffffff0d,transparent 33%,transparent 75%,#ffffff08);box-shadow:inset 2px 0 3px #e1efff16,inset -2px 0 3px #e1efff16}
.glass-choice input+.glass-choice-track{--choice-index:0}
.glass-choice input:checked+.glass-choice-track{--choice-index:1}
.glass-choice input+.glass-choice-track [data-choice-index="0"]{color:#ff1258}
.glass-choice input:checked+.glass-choice-track [data-choice-index="0"]{color:#ff1258}
.glass-choice input+.glass-choice-track [data-choice-index="1"]{color:#ffdc46}
.glass-choice input:checked+.glass-choice-track .glass-choice-lens{border-color:#ffffff38}
.glass-choice input:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.glass-choice *{transition:none!important}}
@media(forced-colors:active){.glass-choice-lens{display:none}.glass-toggle .glass-choice-track{display:none}.glass-choice input[type=checkbox]{position:relative;opacity:1;appearance:auto;width:44px;accent-color:Highlight}.glass-choice-option[aria-selected=true]{outline:2px solid Highlight}}

@media(hover:hover) and (pointer:fine){
 .glass-slider:not(.disabled),.glass-slider:not(.disabled) *{cursor:ew-resize!important}
}

.glass-choice,.glass-choice-track{user-select:none;-webkit-user-select:none;touch-action:pan-y}

.glass-choice-lens canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.glass-choice-option:focus-visible{outline:none}

.glass-choice.choice-dragging .glass-choice-lens{transition:none}

/* Keep changing ruler pixels within their own compact control. */
.glass-slider,.glass-choice{contain:layout paint}