/* Isolated t25 experiment: the control island shares the product notch silhouette. */
#top .bar{height:52px;transform:none;--bar-top:0px}
#top .bar .bar__notch-preview{position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);display:grid;grid-template-rows:52px 0fr;width:min(440px,calc(100vw - 24px));padding:0 30px;border-radius:0;overflow:hidden;--lg-wash:rgba(255,255,255,.10);--lg-blur:5px;--lg-depth:24px;--lg-pull:1.65;--lg-curve:2.7;box-shadow:none;transition:grid-template-rows .48s cubic-bezier(.22,1,.36,1),background .45s ease}
#top .bar .bar__notch-preview[data-open=true]{grid-template-rows:52px 1fr;--lg-blur:25px}
#top .bar__notch-preview .bar__row{height:52px;gap:6px;padding:0 2px}
#top .bar__notch-preview .bar__mark{position:relative;inset:auto;height:44px;line-height:44px;margin-right:auto;font-size:24px;color:#fff}
#top .bar__notch-preview .bar__name{display:none}
#top .bar__notch-preview .bar__cta{min-height:36px!important;height:36px!important;padding:0 20px!important}
#top .bar__notch-preview .bar__links-in{padding:4px 0 8px;gap:3px;grid-template-columns:1fr;}
#top .bar__notch-preview .bar__links-in a{min-height:48px;padding:12px 16px;border-radius:14px;font-size:15px;text-decoration:none;display:flex;gap:12px;align-items:center;color:rgba(255,255,255,.78);transition:background .2s,color .2s}
#top .bar__notch-preview .bar__links-in a:hover{background:rgba(255,255,255,.07);color:#fff}
#top .bar__notch-preview .bar__links-in svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
html.is-light #top .bar .bar__notch-preview{--lg-wash:rgba(8,8,12,.76);box-shadow:none}
html.is-light #top .bar__notch-preview .bar__mark{color:#fff}
html.is-light #top .bar__notch-preview .bar__mark-k{display:none}
html.is-light #top .bar__notch-preview .bar__links-in a,html.is-light #top .bar__notch-preview .bar__menu{color:rgba(255,255,255,.86)!important}
html.is-light #top .bar__notch-preview .bar__links-in a:hover{background:rgba(255,255,255,.08);color:#fff!important}
@media(max-width:759px){#top .bar{height:56px}#top .bar .bar__notch-preview{width:min(440px,calc(100vw - 64px));padding:0 26px;border-radius:0;grid-template-rows:56px 0fr}#top .bar .bar__notch-preview[data-open=true]{grid-template-rows:56px 1fr}#top .bar__notch-preview .bar__row{height:56px}#top .bar__notch-preview .bar__mark{font-size:20px}#top .bar__notch-preview .bar__cta{padding:0 14px!important;font-size:14px!important}#top .bar__notch-preview .bar__links-in{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#top .bar .bar__notch-preview,#top .bar__notch-preview .bar__links-in{transition:none}}

#top .bar__notch-preview{user-select:none;-webkit-user-select:none}
html.is-light #top .bar__notch-preview .bar__cta{--lg-wash:rgba(255,255,255,.04);background:var(--lg-wash)!important;color:#fff!important}

html.is-light #top .bar__notch-preview :is(.bar__mark,.bar__menu):focus-visible{outline-color:rgba(255,255,255,.7)}

/* Outward shoulders join the screen edge; the lens follows this same outline. */
#top .bar__notch-preview::before{display:none}
#top .bar__notch-preview > .bar__notch-contour{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
html.is-light #top .bar__notch-preview > .bar__notch-contour{stroke:rgba(0,0,0,.22)}
#top .bar__notch-preview .bar__menu{width:36px;height:36px;flex:0 0 36px}
/* A direct menu jump exposes the completed reading frame, not its rewind. */
.nav-reading-landing :is(.why__q .w,.why__q .w--letters>span,#letter .w,#letter .w--letters>span){transition:none!important}
.nav-reading-landing :is(.why__copy,#letter .letter__col){visibility:hidden}

/* An open contour has no top edge; side and bottom light fades along the rim. */
#top .bar__notch-preview > .bar__notch-contour{color:#fff;stroke:url(#nav-notch-edge);stroke-width:1}
html.is-light #top .bar__notch-preview > .bar__notch-contour{color:#fff;stroke:url(#nav-notch-edge)}

/* A quiet lift belongs to the shell; only the menu target expands its contents. */
#top .bar .bar__notch-preview{transition:grid-template-rows .48s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.4,0,.2,1),filter .38s ease}
#top .bar.notch-hover .bar__notch-preview:not([data-open=true]){transform:translateX(-50%) scale(1.012)}
#top .bar::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;left:50%;transform:translateX(-50%);width:min(408px,calc(100vw - 56px));height:var(--notch-height,52px);border-radius:0 0 28px 28px;transition:box-shadow .38s ease}
#top .bar.notch-hover::after{box-shadow:0 5px 12px rgba(255,255,255,.12)}
html.is-light #top .bar.notch-hover::after{box-shadow:0 5px 12px rgba(0,0,0,.22)}
#top .bar__notch-preview .bar__cta.lg.lg--button,html.is-light #top .bar__notch-preview .bar__cta.lg.lg--button{--lg-wash:rgba(255,255,255,.04);background:rgba(255,255,255,.04)!important;color:#fff!important}
@media(prefers-reduced-motion:reduce){#top .bar.notch-hover .bar__notch-preview:not([data-open=true]){transform:translateX(-50%)}}
/* The shell supplies the lens; a second nested backdrop would sample its dark wash. */
#top .bar__notch-preview .bar__cta.lg.lg--button,html.is-light #top .bar__notch-preview .bar__cta.lg.lg--button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.04)!important}

#top .bar .bar__notch-preview{cursor:pointer}
#top .bar__notch-preview > .bar__notch-contour{opacity:var(--notch-edge-opacity,.5)}

/* Animate frost independently of the settled displacement-map rebuild. */
@property --notch-live-blur{syntax:"<length>";inherits:false;initial-value:5px}
#top .bar .bar__notch-preview{--notch-live-blur:5px;backdrop-filter:blur(var(--notch-live-blur)) var(--notch-lens-filter,)!important;-webkit-backdrop-filter:blur(var(--notch-live-blur)) var(--notch-lens-filter,)!important;transition:grid-template-rows .48s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.4,0,.2,1),--notch-live-blur .48s cubic-bezier(.4,0,.2,1),--notch-wash .48s cubic-bezier(.4,0,.2,1)}
#top .bar .bar__notch-preview[data-open=true]{--notch-live-blur:25px}
#top .bar .bar__notch-preview[data-lg-state=opaque]{--notch-live-blur:0px}
@media(prefers-reduced-motion:reduce){#top .bar .bar__notch-preview{transition:none}}

@property --notch-wash{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.10)}
#top .bar .bar__notch-preview{--lg-wash:var(--notch-wash)!important}

/* Compact menu: icon aligns to the brand, highlight reaches toward the glass rim. */
#top .bar__notch-preview .bar__links{margin-inline:-6px}
#top .bar__notch-preview .bar__links-in a{padding-inline:8px!important}
@media(max-width:759px){#top .bar__notch-preview .bar__links{margin-inline:-2px}#top .bar__notch-preview .bar__links-in a{padding-inline:4px!important}}

#top .bar__notch-preview .bar__links-in a{border-radius:20px!important}
/* Compact options give gently on hover, with extra breathing room on the left. */
#top .bar__notch-preview .bar__links-in a{transform-origin:center;transition:transform .28s cubic-bezier(.4,0,.2,1),color .22s ease,background .22s ease!important}
@media(hover:hover){#top .bar__notch-preview .bar__option-hit:hover > a{transform:scale(.985);background:rgba(255,255,255,.08)!important;color:#fff!important}}
@media(prefers-reduced-motion:reduce){#top .bar__notch-preview .bar__links-in a{transition:none!important}}

#top .bar__notch-preview .bar__option-content{display:flex;align-items:center;gap:12px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
#top .bar__notch-preview .bar__option-content svg{flex:none;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){#top .bar__notch-preview .bar__option-hit:hover .bar__option-content{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){#top .bar__notch-preview .bar__option-content{transition:none}}

/* Short phone/landscape viewports keep every menu choice reachable. */
#top .bar .bar__notch-preview{max-height:calc(100dvh - 8px - env(safe-area-inset-bottom,0px))}
#top .bar__notch-preview .bar__links{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#top .bar__notch-preview .bar__links::-webkit-scrollbar{display:none}

@media(hover:hover){#top .bar__notch-preview .bar__links-in{padding-bottom:var(--notch-menu-bottom,10.58px)}}

html.is-light #top .bar__notch-preview .bar__cta.lg.lg--button{--lg-wash:rgba(255,255,255,.10);background:rgba(255,255,255,.10)!important}

@media(max-width:759px){#top .bar::after{width:min(408px,calc(100vw - 96px))}}

/* The 10.5px menu strokes sit in a 34.5px-wide touch target: 12px to CTA,
   16px to the straight rim (16px inside the shoulder silhouette). */
@media(max-width:759px){#top .bar__notch-preview .bar__row{gap:5.25px}#top .bar__notch-preview .bar__menu{width:34.5px;flex-basis:34.5px;margin-left:-5.25px;margin-right:-8px}}

@media(max-width:759px){#top .bar{height:56px}#top .bar .bar__notch-preview{grid-template-rows:56px 0fr}#top .bar .bar__notch-preview[data-open=true]{grid-template-rows:56px 1fr}#top .bar__notch-preview .bar__row{height:56px}#top .bar__notch-preview .bar__cta{height:40px!important;min-height:40px!important}}

@media(max-width:359px){#top .bar .bar__notch-preview .bar__cta.lg.lg--button{padding-inline:6px!important}}