.ds-bezel{--ds-bezel-width:var(--ds-space-1-5);--ds-bezel-radius:var(--ds-radius-lg);padding:var(--ds-bezel-width);border-radius:calc(var(--ds-bezel-radius) + var(--ds-bezel-width));background:linear-gradient(to bottom in oklab, color-mix(in oklab, var(--ds-color-surface-hover) 80%, transparent), color-mix(in oklab, var(--ds-color-surface) 45%, transparent));box-shadow:inset 0 0 0 var(--ds-hairline) color-mix(in oklab, var(--ds-color-border-subtle) 80%, transparent)}.ds-bezel__inner{border-radius:var(--ds-bezel-radius);position:relative}.ds-bezel__inner:after{content:"";z-index:1;border-radius:inherit;box-shadow:0 0 0 var(--ds-hairline) color-mix(in oklab, var(--ds-color-bg) 80%, transparent), inset 0 var(--ds-hairline) 0 color-mix(in oklab, var(--ds-neutral-light-1) 14%, transparent), inset 0 0 0 var(--ds-hairline) color-mix(in oklab, var(--ds-neutral-light-1) 6%, transparent);pointer-events:none;position:absolute;inset:0}.ds-bezel[data-beam]{--ds-bezel-beam:var(--ds-color-graphic);--ds-bezel-beam-rest:.5;--ds-bezel-beam-duration:calc(var(--ds-duration-ambient) / 4);--ds-bezel-beam-arc:conic-gradient(var(--ds-bezel-beam) 0deg, color-mix(in oklab, var(--ds-bezel-beam) 80%, transparent) 10deg, color-mix(in oklab, var(--ds-bezel-beam) 35%, transparent) 26deg, color-mix(in oklab, var(--ds-bezel-beam) 10%, transparent) 48deg, transparent 70deg 290deg, color-mix(in oklab, var(--ds-bezel-beam) 10%, transparent) 312deg, color-mix(in oklab, var(--ds-bezel-beam) 35%, transparent) 334deg, color-mix(in oklab, var(--ds-bezel-beam) 80%, transparent) 350deg, var(--ds-bezel-beam) 360deg);isolation:isolate;position:relative}.ds-bezel[data-beam=laser]{--ds-bezel-beam-rest:0;--ds-bezel-beam-arc:conic-gradient(in oklab, transparent 0deg 240deg, color-mix(in oklab, var(--ds-color-accent) 5%, transparent) 288deg, color-mix(in oklab, var(--ds-color-accent) 14%, transparent) 312deg, color-mix(in oklab, var(--ds-color-accent) 37%, transparent) 336deg, color-mix(in oklab, var(--ds-color-accent) 61%, transparent) 348deg, color-mix(in oklab, var(--ds-color-graphic-accent) 78%, transparent) 354deg, color-mix(in oklab, var(--ds-color-graphic-accent) 90%, transparent) 357.5deg, var(--ds-color-graphic) 359deg 360deg);--ds-bezel-beam-bloom:conic-gradient(in oklab, var(--ds-color-graphic-accent) 0deg, color-mix(in oklab, var(--ds-color-accent) 50%, transparent) 2deg, color-mix(in oklab, var(--ds-color-accent) 10%, transparent) 5deg, transparent 8deg 330deg, color-mix(in oklab, var(--ds-color-accent) 6%, transparent) 344deg, color-mix(in oklab, var(--ds-color-accent) 20%, transparent) 352deg, color-mix(in oklab, var(--ds-color-graphic-accent) 50%, transparent) 356deg, color-mix(in oklab, var(--ds-color-graphic-accent) 80%, transparent) 358deg, var(--ds-color-graphic-accent) 360deg)}.ds-bezel[data-beam=laser] .ds-bezel__beam{mix-blend-mode:screen;mix-blend-mode:plus-lighter}.ds-bezel[data-beam=laser] .ds-bezel__beam[data-layer=line]:before{opacity:1}.ds-bezel[data-beam=laser] .ds-bezel__beam[data-layer=wash]:before{opacity:.7;background:var(--ds-bezel-beam-bloom)}.ds-bezel[data-beam=laser] .ds-bezel__beam[data-layer=halo]:before{opacity:.35;background:var(--ds-bezel-beam-bloom)}.ds-bezel[data-beam=laser]:focus-within .ds-bezel__beam{opacity:.6}@media (hover:hover){.ds-bezel[data-beam=laser]:hover .ds-bezel__beam{opacity:.6}}.ds-bezel__beam{z-index:0;border-radius:inherit;pointer-events:none;opacity:var(--ds-bezel-beam-rest);transition:opacity var(--ds-duration-reveal) var(--ds-ease-standard);position:absolute;inset:0;overflow:clip;container-type:size}.ds-bezel__beam[data-layer=line]{inset:var(--ds-bezel-width);z-index:2;border-radius:var(--ds-bezel-radius);padding:var(--ds-hairline);-webkit-mask:linear-gradient(var(--ds-color-bg) 0 0) content-box, linear-gradient(var(--ds-color-bg) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--ds-color-bg) 0 0) content-box exclude, linear-gradient(var(--ds-color-bg) 0 0)}.ds-bezel__beam[data-layer=halo]{inset:var(--ds-bezel-width);z-index:2;border-radius:var(--ds-bezel-radius);padding:var(--ds-space-1);-webkit-mask:linear-gradient(var(--ds-color-bg) 0 0) content-box, linear-gradient(var(--ds-color-bg) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--ds-color-bg) 0 0) content-box exclude, linear-gradient(var(--ds-color-bg) 0 0)}.ds-bezel__beam:before{content:"";aspect-ratio:1;background:var(--ds-bezel-beam-arc);inline-size:calc(1.5*max(100cqw,100cqh));position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.ds-bezel__beam[data-layer=wash]:before{opacity:.3}.ds-bezel[data-beam]:focus-within .ds-bezel__beam{opacity:1}@media (hover:hover){.ds-bezel[data-beam]:hover .ds-bezel__beam{opacity:1}}@keyframes ds-bezel-beam{0%{transform:rotate(-1turn)}}@keyframes ds-bezel-beam-glow{0%{opacity:1}}@keyframes ds-bezel-beam-fade{0%,80%{opacity:1}}@media (prefers-reduced-motion:reduce){.ds-bezel__beam{transition:none}}@media (prefers-reduced-motion:no-preference){.ds-bezel[data-beam][data-state=play] .ds-bezel__beam:before{animation:ds-bezel-beam var(--ds-bezel-beam-duration) var(--ds-ease-standard) both}.ds-bezel[data-beam][data-state=play] .ds-bezel__beam{animation:ds-bezel-beam-glow var(--ds-bezel-beam-duration) var(--ds-ease-standard) backwards}.ds-bezel[data-beam=laser][data-state=play] .ds-bezel__beam{animation-name:ds-bezel-beam-fade}}