/* A stable surface with a nearby, 1px light-catching rim. */
[data-optical]{--light-angle:320deg;--light-strength:0}
.glass-surface,.ui-button[data-optical],.ui-field-glass{position:relative;isolation:isolate;-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35)}
.glass-surface{background:var(--glass-body);border:1px solid var(--glass-shade);border-radius:24px;box-shadow:var(--glass-shadow);color:var(--fp-text)}
.glass-surface>*{position:relative;z-index:1}.ui-button>*{position:relative;z-index:3}
/* The bloom is filtered after its child has been masked to a ring. This keeps
   the face clear and lets a narrow halo extend outside the actual 1px rim. */
[data-optical]>.optical-edge{position:absolute;inset:-1px;z-index:2;border-radius:inherit;pointer-events:none;opacity:var(--light-strength);transition:opacity 650ms cubic-bezier(.2,.7,.2,1);--optical-bloom-opacity:.9;--optical-bloom-width:3px;--optical-bloom-inset:-1px;--optical-bloom-blur:4px}
[data-light-nearby=true]>.optical-edge{transition-duration:160ms;transition-timing-function:ease-out}
.optical-edge:before,.optical-edge-bloom:before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--optical-rim-paint);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.optical-edge-bloom{position:absolute;inset:var(--optical-bloom-inset,0);border-radius:inherit;filter:blur(var(--optical-bloom-blur,3px));opacity:var(--optical-bloom-opacity)}
.optical-edge-bloom:before{padding:var(--optical-bloom-width,1px)}
.ui-primary>.optical-edge:before{inset:1px;--optical-paint-color:color-mix(in srgb,var(--optical-edge-color) 18%,white)}
.ui-button[data-optical]{box-shadow:0 2px 6px rgb(27 32 25/.04);transition:background var(--fp-standard),box-shadow var(--fp-standard),transform var(--fp-standard)}
.ui-button.ui-primary{background:var(--fp-primary-bg);color:var(--fp-primary-text);box-shadow:0 3px 10px color-mix(in srgb,var(--fp-primary-bg) 12%,transparent);border-color:transparent}
.ui-button.ui-primary:hover,.ui-button.ui-primary[data-preview-state=hover]{background:var(--fp-primary-hover)}
.ui-button.ui-primary:active,.ui-button.ui-primary[data-preview-state=pressed]{background:var(--fp-primary-active)}
.ui-button.ui-secondary{background:var(--glass-body);border-color:var(--glass-shade);color:var(--fp-text)}
.ui-button.ui-secondary:hover,.ui-button.ui-secondary[data-preview-state=hover]{background:var(--fp-secondary-hover);box-shadow:0 3px 12px var(--glass-shade)}
.ui-button.ui-secondary:active,.ui-button.ui-secondary[data-preview-state=pressed]{background:var(--fp-secondary-active)}
.ui-button.ui-outline{background:color-mix(in srgb,var(--glass-body) 28%,transparent);border-color:var(--fp-border);box-shadow:none}
.ui-button.ui-outline:hover,.ui-button.ui-outline[data-preview-state=hover]{background:var(--glass-body)}
.ui-button[data-optical]:active:not(:disabled):not([aria-disabled=true]){box-shadow:none}
.ui-button[data-optical]:where(:disabled,[aria-disabled=true]:not([aria-busy=true])){background:var(--fp-disabled-bg);color:var(--fp-disabled-text);box-shadow:none;backdrop-filter:none;border-color:var(--fp-line)}
.ui-button:where(:disabled,[aria-disabled=true])>.optical-edge,.ui-field-glass[data-invalid=true]>.optical-edge{display:none}
.ui-button.ui-outline:disabled{background:transparent;border-color:var(--fp-border)}
.ui-field-glass{border-radius:var(--fp-radius-control)}.ui-field-glass>.optical-edge{inset:0}
.ui-field-glass>.ui-input,.ui-field-glass>.ui-select{display:flex;background:var(--glass-field);position:relative;z-index:1;box-shadow:none}
.ui-field-glass>.ui-input{display:block}.ui-field-glass .ui-input:disabled{background:var(--fp-disabled-bg)}.ui-field-glass .ui-input[readonly]{background:var(--fp-subtle)}
.ui-select-menu,.ui-dialog,.ui-toast{background:var(--glass-veil);backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);box-shadow:var(--glass-shadow)}
/* Decorative light rays remain sharp. Only the planes soften what passes behind them. */
.optical-structure{position:absolute;inset:0;isolation:isolate;pointer-events:none;overflow:hidden;perspective:1000px;background:var(--fp-gradient-structure-ambient)}
.optical-ray{position:absolute;width:120%;height:2px;left:-10%;top:55%;transform:rotate(-28deg);background:var(--fp-gradient-ray);box-shadow:0 0 12px var(--glass-ray)}.ray-two{top:62%;height:1px;transform:rotate(-28deg) translateY(28px)}.ray-three{top:48%;transform:rotate(-28deg) translateY(-24px);opacity:.5}
.optical-pane{position:absolute;width:35%;height:70%;left:35%;top:12%;border-radius:clamp(18px,3vw,44px);background:var(--fp-gradient-pane);border:1px solid var(--glass-shade);box-shadow:inset 2px 2px 3px var(--glass-edge),inset -3px -2px 6px var(--glass-shade),18px 22px 45px rgb(0 0 0/.16);backdrop-filter:blur(5px) saturate(1.65);-webkit-backdrop-filter:blur(5px) saturate(1.65);transform:rotate(-23deg) skewY(10deg)}

.pane-back{left:54%;top:5%;transform:rotate(-23deg) skewY(10deg);opacity:.7}.pane-front{left:31%;top:22%;transform:rotate(-23deg) skewY(10deg);height:63%;background:var(--fp-gradient-pane-front);backdrop-filter:blur(8px) saturate(1.8);-webkit-backdrop-filter:blur(8px) saturate(1.8)}
.optical-caustic{position:absolute;left:20%;right:2%;height:5%;top:80%;background:var(--fp-gradient-caustic);filter:blur(12px);transform:rotate(-20deg);opacity:.64}
/* Preserve plain surfaces and native focus in fallback modes. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-surface,.ui-button.ui-secondary,.ui-field-glass .ui-input,.ui-field-glass .ui-select,.ui-select-menu,.ui-dialog,.ui-toast{background:var(--fp-surface)}}
@media(prefers-reduced-transparency:reduce){.glass-surface,.ui-button.ui-secondary,.ui-field-glass .ui-input,.ui-field-glass .ui-select,.ui-select-menu,.ui-dialog,.ui-toast{background:var(--fp-surface);backdrop-filter:none;-webkit-backdrop-filter:none}.optical-edge-bloom{display:none}}
@media(forced-colors:active){.glass-surface,.ui-button[data-optical],.ui-field-glass,.ui-select-menu,.ui-dialog,.ui-toast{background:Canvas;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:ButtonText}.optical-edge,.optical-structure{display:none}}