/* Local material tuning. T21 owns navigation, hero and CTA geometry and motion. */
#top .lg.lg-new{isolation:isolate}
#top .lg.lg-new::before{opacity:1!important}
/* Use both mask families explicitly: WebKit keeps the standard mask reset
   separate from -webkit-mask, otherwise the hairline fills the whole foot. */
#top .lg.lg-new::before{mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0)!important;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0)!important;mask-origin:padding-box,border-box!important;mask-clip:padding-box,border-box!important;-webkit-mask-origin:padding-box,border-box!important;-webkit-mask-clip:padding-box,border-box!important;-webkit-mask-composite:xor!important;mask-composite:exclude!important}
#top .lg--button{overflow:visible;user-select:none}
#top .primary.lg{min-height:49px!important}
#top .lg__label{gap:8px}
#top dialog.lg{position:fixed!important;color:#fff!important;overflow:visible}
#top dialog .close.lg{position:absolute!important;right:14px;top:14px;width:36px!important;height:36px!important}
#top .notch-picker .lg{font-size:13px!important;line-height:20px!important;padding:10px 16px!important;color:#c2c2c2!important;--lg-blur:2px;--lg-depth:12px;--lg-wash:linear-gradient(172deg,rgba(255,255,255,.035),rgba(255,255,255,.006) 44%,rgba(255,255,255,.018));--lg-line:1;--lg-contour:linear-gradient(142deg,rgba(255,255,255,.25),rgba(255,255,255,.04) 24%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.16));}
#top .notch-picker .lg>.lg__lens{z-index:-1!important;opacity:1!important;box-shadow:inset 1px 2px 4px #ffffff0d,inset -1px -2px 5px #ffffff08!important}
#top .notch-picker .lg::after{opacity:.65!important;background:radial-gradient(ellipse 70% 60% at 22% -6%,#ffffff18,transparent 72%),radial-gradient(ellipse 70% 75% at 94% 116%,#ffffff10,transparent 70%)!important}
#top .notch-picker .lg[aria-pressed=true]{--lg-wash:linear-gradient(172deg,#ffffff10,#ffffff03 46%,#ffffff08);--lg-contour:linear-gradient(142deg,#ffffff66,#ffffff13 28%,#ffffff0a 60%,#ffffff42);color:#fff!important}
#top .notch-picker .lg[aria-pressed=true]::after{opacity:.8!important;background:radial-gradient(ellipse 80% 72% at 18% -8%,#ffffff23,transparent 72%),radial-gradient(ellipse 70% 85% at 92% 110%,#ffffff18,transparent 70%)!important}
/* T21 selection structure: plain text choices; only the active example has
   a glass surface. Keep the hit area and focus outline on every choice. */
#top .notch-picker .lg[aria-pressed=false]{background:none!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#aaa!important}
#top .notch-picker .lg[aria-pressed=false]::before,#top .notch-picker .lg[aria-pressed=false]::after,#top .notch-picker .lg[aria-pressed=false]>.lg__lens{display:none!important}
#top .notch-picker .lg[aria-pressed=false]:is(:hover,:focus-visible){color:#fff!important}
/* Curved reflections sit inside the original control rim. The orb still spreads
   under a stationary CTA label on hover/focus; no arrow or alternate press motion. */
#top :is(.primary,.island__cta,.secondary,.scene-switch__thumb)[data-glass]{background:radial-gradient(ellipse 80% 72% at 18% -8%,#ffffff30,transparent 72%),radial-gradient(ellipse 70% 85% at 92% 110%,#ffffff20,transparent 70%),linear-gradient(172deg,#ffffff13,#ffffff02 46%,#ffffff08);box-shadow:inset 1px 2px 5px #ffffff0d,inset -1px -2px 5px #ffffff08,0 5px 16px #0004}
#top :is(.primary,.island__cta,.secondary,.scene-switch__thumb)>.glass-rim{opacity:1}
#top [data-glass]{isolation:isolate;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#top .baseline-glass-lens{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;backdrop-filter:var(--glass-optics)!important;-webkit-backdrop-filter:var(--glass-optics)!important;background:radial-gradient(ellipse 80% 72% at 18% -8%,#ffffff30,transparent 72%),radial-gradient(ellipse 70% 85% at 92% 110%,#ffffff20,transparent 70%),linear-gradient(172deg,#ffffff13,#ffffff02 46%,#ffffff08);box-shadow:inset 1px 2px 5px #ffffff0d,inset -1px -2px 5px #ffffff08}
/* The existing outer frame still owns attached geometry and the spring. Its
   material is a separate skill notch body, so neither an SVG clip nor an
   ancestor fade/filter can cut refraction off from the page. */
#top .island.lg{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;opacity:1!important;box-shadow:none!important;clip-path:none!important;isolation:isolate}
#top .island.lg::before,#top .island.lg::after{display:none!important}
#top .island .island__material{position:absolute!important;top:0;bottom:0;left:20px;width:calc(100% - 40px);height:100%;padding:0!important;z-index:0!important;pointer-events:none;border-radius:0 0 var(--nav-corner,23px) var(--nav-corner,23px)!important}
#top .island__material>.lg__lens{position:absolute!important;z-index:-1!important}
/* Keep the navbar's original 20px shoulders; the skill recipe uses 18px for
   its larger product demo. The wash, clear lens and foot light are unchanged. */
#top .island .island__material::after{inset:0 -20px auto!important;height:20px!important;background:radial-gradient(circle at 0 100%,transparent 19.6px,#000 20.4px) left top / 20px 20px no-repeat,radial-gradient(circle at 100% 100%,transparent 19.6px,#000 20.4px) right top / 20px 20px no-repeat!important}
#top .island .island__drawer{filter:none!important}
#top .mobile-panel .mobile-surface.lg{position:relative!important;overflow:visible;min-height:0;padding:0 15px!important;transition:none!important;border-radius:0 0 var(--notch-corner,28px) var(--notch-corner,28px)!important}
#top .mobile-surface>.panel-top{position:absolute!important;left:15px!important;right:15px!important;z-index:3!important}
#top .mobile-surface>.panel-copy{width:var(--notch-content-width);max-width:none;position:relative!important;left:50%;transform:translateX(-50%);z-index:3!important}
#top .mobile-surface>.notch-foot{position:absolute!important;left:15px!important;right:15px!important;z-index:3!important}
#top .mobile-surface>.lg__lens{position:absolute!important;z-index:-1!important;opacity:1!important}
#top .mobile-surface .lg-notch-card{box-sizing:border-box}
#top .panel-meeting .meeting-header.lg-notch-card{width:var(--notch-content-width);position:relative;left:50%;transform:translateX(-50%);border-bottom:0!important;border-radius:var(--preview-radius,15px) var(--preview-radius,15px) 0 0!important;padding:calc(var(--preview-body,15px) * .6666667) var(--preview-body,15px) calc(var(--preview-body,15px) / 3)!important}
#top .panel-meeting .transcript-viewport.lg-notch-card{border-top:0!important;border-radius:0 0 var(--preview-radius,15px) var(--preview-radius,15px)!important;padding:0 var(--preview-body,15px) var(--preview-body,15px)!important}
#top .voice-native-panel .lg-notch-bubble{text-align:left!important;text-wrap:pretty!important}
/* Hide authored requests before the controller loads. During the opening
   phase, reserve the bubble's final layout without painting it ahead of speech. */
#top .mobile-panel:not([data-phase]) .panel-copy{visibility:hidden}
#top .voice-native-panel[data-phase=opening] .notch-bubble{visibility:hidden}
#top .voice-native-panel[data-phase=opening] .notch-card{display:none}
#top .voice-native-panel[data-voice-room=false] .panel-copy{visibility:hidden}
#top .voice-native-panel .notch-bubble .voice-word:first-child{transition:none}
#top .mobile-surface .lg-notch-button{font-size:15px!important;line-height:20px!important}
#top .privacy-lock.lg{width:100%;height:100%;background:none!important}
/* No faded wrapper around glass: opacity/filter on an ancestor blocks its backdrop. */
#top .privacy-emblem{filter:none!important;opacity:1!important;animation:none!important}
#top .mobile-product{opacity:1!important;filter:none!important}
#top .mobile-surface .panel-edge,#top .mobile-surface .glass-rim{display:none!important}
#top .lg-grid{position:relative;scroll-margin-top:100px;gap:0!important;padding:0!important;background-color:#000!important;background-image:none;background-size:100% 100%!important;background-repeat:no-repeat!important}
#top .lg-grid>*{background:transparent!important}
#top .lg-grid::before,#top .lg-grid::after,#top .lg-grid>*::before,#top .lg-grid>*::after{display:none!important}
#top .fgrid.lg-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:48px!important}
#top #privacy .fgrid--rows.lg-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#top .fgrid.lg-grid>li{padding:28px 20px 32px!important;min-height:142px;justify-content:center}
#top .lg-grid>*{opacity:1!important;filter:none!important;animation:none!important;transform:none!important}
#top .connector-groups.lg-grid{margin-top:48px!important;padding:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#top .connector-groups>.connector-group{padding:28px 8px!important}
#top .vocab-columns{border-top:0;position:relative}
#top .vocab-columns::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 30%,rgba(255,255,255,.08) 75%,transparent)}
#top .privacy-details,#top .privacy-details details{border:0;position:relative}
#top .privacy-details details::before,#top .privacy-details::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 30%,rgba(255,255,255,.08) 75%,transparent)}
#top .privacy-details::after{top:auto;bottom:0}
#top :is(#meetings,#dictation,#memory) .display-environment::before{background-image:url('assets/wallpaper-golden-gate-dark.png');background-position:50% 42%}
/* Darken the image itself so the glass samples the same quieter wallpaper. */
#top :is(#voice,#meetings,#dictation,#memory) .display-environment::before{background-image:linear-gradient(#0000003d,#0000003d),url('assets/wallpaper-golden-gate-dark.png')}
/* Same dimensions, image and scrim as the old pseudo-element. The explicit
   node is also the source for Safari's refracted wallpaper replica. */
#top .display-environment::before{display:none!important}
#top .display-environment>.glass-wallpaper{position:absolute;inset:10px 10px 0;border-radius:17px 17px 0 0;background:#0b0b16 linear-gradient(#0000003d,#0000003d) 50% 50%/cover no-repeat;background-image:linear-gradient(#0000003d,#0000003d),url('assets/wallpaper-golden-gate-dark.png');pointer-events:none}
#top .mobile-surface>.lg__mirror{position:absolute!important;z-index:-1!important;opacity:1!important}
@media(max-width:600px){#top .display-environment>.glass-wallpaper{inset:8px 8px 0;border-radius:13px 13px 0 0}}
@media(max-width:1180px){#top .fgrid.lg-grid,#top #privacy .fgrid.lg-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){
 #top .notch-picker{gap:6px}
 #top .notch-picker .lg{font-size:11px!important;padding:10px 12px!important}
 #top .mobile-surface .lg-notch-button{height:36px!important;font-size:13px!important;padding-inline:11px!important}
 #top .fgrid.lg-grid>li{display:flex;flex-direction:column;gap:0;padding:24px 14px!important;min-height:135px;font-size:14px;line-height:21px;text-align:center}
 #top .connector-groups.lg-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 #top .lg,#top .lg>.lg__lens{background:#171717!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #top .lg-notch-card{background:#161616!important}
 #top .lg-notch-bubble{background:#303030!important}
 #top .lg-notch-tool,#top .lg-notch-button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #top .lg--glyph{background:none!important}
}
html[data-lg-preview=opaque] #top .lg,html[data-lg-preview=opaque] #top .lg>.lg__lens{background:#171717!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-lg-preview=opaque] #top .lg--glyph{background:none!important}
html[data-glass-mode=solid] #top .baseline-glass-lens{background:#171a22!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#top .baseline-glass-lens{background:#171a22!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(forced-colors:active){#top .lg,#top .lg>.lg__lens,#top .lg-notch-card,#top .lg-notch-button,#top .lg-notch-tool{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(forced-colors:active){#top .baseline-glass-lens{background:Canvas!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}