/* Finish and edge are independent. Narrow specular reflections do not imply thickness. */
.finish-lab{padding-block:70px;scroll-margin-top:100px}.finish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.finish-card{min-width:0;border:0;border-radius:24px;background:var(--glass-dense);overflow:hidden;box-shadow:var(--glass-shadow)}.finish-scene{height:265px;position:relative;isolation:isolate;overflow:hidden;background:#191a38}.finish-checker{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 21px,#e4faff40 21px 22px),repeating-linear-gradient(0deg,transparent 0 21px,#e4faff40 21px 22px)}.finish-orb{position:absolute;width:160px;height:160px;left:-20px;top:22px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#dfffff,#39d9e5 40%,#3843b0 90%)}.finish-ribbon{position:absolute;width:190px;height:60px;right:-55px;top:160px;background:linear-gradient(100deg,#c2ff72,#ee80ed);transform:rotate(-40deg)}.finish-background-word{position:absolute;left:65px;top:80px;font-size:100px;font-weight:800;line-height:1;color:#f8fbff}.finish-pane{position:absolute;inset:42px 25px 35px;border-radius:24px;transform:rotate(-7deg);padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:#2639574a;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);box-shadow:0 18px 22px -18px #0007;isolation:isolate;border:0}.finish-pane>span{font-size:.62rem;letter-spacing:.1em}.finish-pane>b{font-size:2.4rem;font-weight:550;letter-spacing:-.06em;align-self:start;background:#101932b8;border-radius:8px;padding:2px 8px}.finish-pane>small{align-self:start;background:#101932b8;border-radius:5px;padding:4px 6px;font-size:.65rem}.finish-pane:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff26,transparent 45%)}
.finish-card[data-finish-sample=clear] .finish-pane{background:#c5eeff0e;backdrop-filter:blur(.8px) saturate(112%);-webkit-backdrop-filter:blur(.8px) saturate(112%)}.finish-card[data-finish-sample=clear] .finish-pane:after{background:linear-gradient(118deg,transparent 14%,#ffffff05 25%,#ffffff73 25.5%,#ffffff24 27%,transparent 35%,transparent 73%,#d5f7ff1a 74%,transparent 85%)}.finish-card[data-edge-sample=depth] .finish-pane{box-shadow:inset 3px 4px 3px -3px #fff,inset -4px -6px 7px -4px #69c5e8b3,0 5px 2px -3px #d4f5ff66,0 22px 24px -16px #0008}
.finish-description{padding:22px}.finish-description .eyebrow{font-size:.62rem;margin-bottom:12px}.finish-description h3{font-size:1.1rem;letter-spacing:-.025em;line-height:1.4}.finish-description p{font-size:.86rem;line-height:1.6;color:var(--muted);min-height:5.2em;margin:12px 0 20px}.finish-description .btn{min-height:44px;width:100%;justify-content:center}.finish-description .btn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.finish-selected{visibility:hidden}.finish-description .btn[aria-pressed=true] .finish-selected{visibility:visible}.finish-status{font-size:.82rem;color:var(--muted);margin-top:22px;max-width:80ch}
/* Clear controls keep dense text wells; the surrounding optical surface stays transparent. */
:root[data-finish=clear]{--glass-fill:rgba(38,57,83,.17);--glass-reflection:linear-gradient(118deg,transparent 18%,#ffffff1c 27%,#ffffff28 27.3%,#ffffff05 32%,transparent 55%);--glass-filter:blur(.8px) saturate(112%);--glass-control:rgba(35,51,74,.76)}
:root[data-theme=light][data-finish=clear]{--glass-fill:rgba(255,255,255,.12);--glass-reflection:linear-gradient(118deg,transparent 18%,#ffffff30 27%,#ffffff40 27.3%,#ffffff10 32%,transparent 55%);--glass-filter:blur(.8px) saturate(112%);--glass-control:rgba(255,255,255,.76)}
:root[data-finish=clear] .ui-atlas{--ui-fill:rgba(23,37,58,.13);--ui-optics:blur(.8px) saturate(112%)}:root[data-theme=light][data-finish=clear] .ui-atlas{--ui-fill:rgba(255,255,255,.14)}
.ui-atlas{--ui-optics:blur(14px) saturate(130%)}.ui-example-card:before{background:var(--glass-reflection),var(--ui-fill);backdrop-filter:var(--ui-optics);-webkit-backdrop-filter:var(--ui-optics)}.ui-search-shell,.ui-map a{backdrop-filter:var(--ui-optics);-webkit-backdrop-filter:var(--ui-optics)}
:root[data-finish=clear] :is(.board-art-film,.board-art-edge,.board-art-back),:root[data-finish=clear] .luma-site :is(.instrument,.rear-pane,.float-chip,.motion-tile,.glass-segments){background:var(--glass-reflection),var(--glass-fill);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
:root[data-material-edge=film] :is(.instrument,.float-chip,.board-art-edge){box-shadow:var(--glass-shadow)}:root[data-material-edge=depth] :is(.instrument,.float-chip,.board-art-film,.board-art-edge){box-shadow:var(--glass-edge-shadow)}
@media(max-width:1100px){.finish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finish-scene{height:290px}.finish-pane{inset:42px 16% 35px}.finish-description p{min-height:3.3em}}
@media(max-width:600px){.finish-lab{padding-block:45px}.finish-grid{grid-template-columns:1fr;gap:20px}.finish-scene{height:260px}.finish-pane{inset:40px 15% 30px}.finish-description p{min-height:0}.finish-description{padding:22px}.finish-lab h2{font-size:clamp(2rem,9vw,3rem)}}
/* Keep every newly introduced surface inside the same accessibility contract. */
:root[data-solid=true] .finish-pane,:root[data-solid=true] :is(.ui-example-card:before,.ui-search-shell,.ui-map a){background:var(--solid);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-solid=true][data-finish]{--glass-fill:var(--solid);--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent);--glass-control:var(--solid)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-finish]{--glass-fill:var(--solid);--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent)}.finish-pane{background:var(--solid)!important;color:var(--ink)}}
@media(prefers-reduced-transparency:reduce){:root[data-finish]{--glass-fill:var(--solid);--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent)}.finish-pane,.ui-example-card:before,.ui-search-shell,.ui-map a{background:var(--solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.finish-pane{color:var(--ink)}}
@media(forced-colors:active){:root[data-finish]{--glass-fill:Canvas;--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent);--glass-control:Canvas}.finish-card,.finish-pane,.finish-description .btn,.ui-example-card:before{background:Canvas!important;color:CanvasText;box-shadow:none!important;border:1px solid CanvasText;backdrop-filter:none!important}.finish-pane:after,.finish-orb,.finish-checker,.finish-ribbon,.finish-background-word{display:none}.finish-pane>b,.finish-pane>small{background:Canvas;color:CanvasText}.finish-description .btn[aria-pressed=true]{outline:2px solid Highlight;outline-offset:3px}}

.ui-atlas[data-ui-edge=depth] .ui-example-card:before{background:var(--glass-reflection),var(--ui-fill)}
/* These tokens must outrank both light+clear and the depth-specific optical layer. */
:root[data-solid=true][data-finish] .ui-atlas{--ui-fill:var(--solid);--ui-optics:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-theme][data-finish]{--glass-fill:var(--solid);--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent)}:root[data-theme][data-finish] .ui-atlas{--ui-fill:var(--solid);--ui-optics:none}}
@media(prefers-reduced-transparency:reduce){:root[data-theme][data-finish]{--glass-fill:var(--solid);--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent)}:root[data-theme][data-finish] .ui-atlas{--ui-fill:var(--solid);--ui-optics:none}}
@media(forced-colors:active){:root[data-theme][data-finish]{--glass-fill:Canvas;--glass-filter:none;--glass-reflection:linear-gradient(transparent,transparent);--glass-control:Canvas}:root[data-theme][data-finish] .ui-atlas{--ui-fill:Canvas;--ui-well:Canvas;--ui-control:ButtonFace;--ui-optics:none}}
/* Keep V4's compositor repair: content hosts never acquire a second blur plane. */
:root[data-finish=clear] .luma-site .motion-tile{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-finish=clear] .luma-site .motion-tile:not(#custom-material)::before{background:var(--glass-reflection),var(--glass-fill);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
:root[data-solid=true][data-finish] .luma-site .motion-tile{background:var(--solid)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-finish=clear] .luma-site .motion-tile{background:var(--solid)}}
@media(prefers-reduced-transparency:reduce){:root[data-finish=clear] .luma-site .motion-tile{background:var(--solid)}}
@media(forced-colors:active){:root[data-finish=clear] .luma-site .motion-tile{background:Canvas}}

/* Sticky navigation keeps text readable over the moving page. */
@media(forced-colors:active){:root[data-finish=clear] .topbar :is(.brand,nav a,.actions .btn){background:Canvas;box-shadow:none}}