
/* LAB polish: distinguish hover from a selected function. */
#hero-lab button:not([aria-pressed=true]):is(:hover,:focus-visible) .glyph-active{opacity:0!important}
/* Preserve the common outline weight and open up the denser glyphs. */
#hero-lab [data-wlb-key=columns] .wl-lab-inner{stroke-width:1.45}
#hero-lab [data-wlb-key=containers] .wl-lab-inner,
#hero-lab [data-wlb-key=mono] :is(.glyph-rest,.glyph-active)>path{stroke-width:1.5}
#hero-lab .wlb-lab-btn::after{content:"";position:absolute;inset:0}
#hero-lab .wlb-lab-btn[aria-pressed=true]{color:var(--lab-gold)}
#hero-lab .wlb-lab-btn[aria-pressed=true]::before{border-radius:50%}
#wl-container-view{position:fixed;inset:0;pointer-events:none;z-index:10001}
#wl-container-view[hidden]{display:none}
.wl-container-box{position:absolute;border:1px dashed var(--gold,#c49b37);background:color-mix(in srgb,var(--gold,#c49b37) 3%,transparent)}
.wl-container-box>span{position:absolute;top:2px;inset-inline-start:4px;font:10px/1.4 ui-monospace,monospace;color:var(--ink,#171813);background:var(--paper,#fcfcf9)}
@media(min-width:601px) and (max-height:820px){#hero-lab{gap:0!important}#hero-lab .wlb-lab-btn::after{inset:-4px 0}#hero-lab .wlb-lab-item{height:44px!important}#hero-lab .wlb-lab-btn{height:44px!important;min-height:44px!important}#hero-lab .wlb-lab-btn::after{inset:0}}
@media(prefers-reduced-motion:reduce){#hero-lab .wlb-lab-btn svg{transition:none!important}}

@media(min-width:601px) and (max-height:820px){#hero-lab{display:grid!important;grid-template-columns:repeat(2,44px)!important;width:88px!important;gap:0!important}#hero-lab .wlb-lab-kicker{grid-column:1/-1}#hero-lab .wlb-lab-item:last-child{margin-top:0!important}}

/* Continuous on/off transition, no second decorative trace. */
#hero-lab .glyph-rest,#hero-lab .glyph-active{transition:opacity 480ms cubic-bezier(.25,.65,.3,1),transform 480ms cubic-bezier(.25,.65,.3,1)!important}
#hero-lab .glyph-gold-trace{display:none!important}
@media(prefers-reduced-motion:reduce){#hero-lab .glyph-rest,#hero-lab .glyph-active{transition:none!important}}

@media(min-width:601px) and (max-height:820px){#hero-lab .wlb-lab-item:has([data-wlb-key="motion"]),#hero-lab .wlb-lab-item:has([data-wlb-key="mono"]),#hero-lab .wlb-lab-item:has([data-wlb-key="reset"]){grid-column:1/-1;justify-self:end}}

html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important;scroll-behavior:auto!important}

/* Unified text group; arrows never separate the name from the description. */
html[data-wl-layout][data-wl-layout][data-wl-layout] #intro .type-lab-panel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
html #intro .type-lab-panel .type-lab-heading{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;padding:0!important;min-height:44px}
html #intro .type-lab-panel .type-lab-name{font:500 18px/1.25 var(--sans)!important;letter-spacing:-.02em;flex:1;min-width:0}
html #intro .type-lab-panel .type-lab-count{display:none!important}
html #intro .type-lab-panel .type-lab-controls{display:flex!important;align-items:center!important;gap:0!important;margin:0!important;padding:0!important;border:0!important;flex:none}
html #intro .type-lab-panel button{border:0!important;background:transparent!important;box-shadow:none!important;min-width:36px!important;width:36px!important;min-height:44px!important;height:44px!important;padding:0!important;margin:0!important;color:var(--ink)!important;font-size:18px!important}
html #intro .type-lab-panel .type-lab-close{color:var(--muted)!important}
html #intro .type-lab-panel .type-history{display:block!important;min-height:0!important;margin:4px 0 0!important;padding:0!important;border:0!important;max-width:38ch!important}
html #intro .type-lab-panel .type-history p{font:400 13px/1.55 var(--sans)!important;margin:0!important;max-width:none!important;color:var(--muted)!important}
html #intro .type-lab-panel .type-history-label{display:none!important}
html #intro .type-lab-panel button:focus-visible{outline:none!important;color:var(--gold)!important;text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){html #intro .type-lab-panel button{min-width:44px!important;width:44px!important}html #intro .type-lab-panel .type-lab-heading{gap:4px!important}html #intro .type-lab-panel .type-lab-name{font-size:16px!important}}

/* Wordmark and font commentary share their upper axis. */
html[data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout] #intro .type-lab-panel{inset-inline-start:auto!important;width:auto!important;max-width:580px!important}
html #intro .type-lab-panel .type-lab-heading{align-items:center!important;gap:8px!important}
html #intro .type-lab-panel .type-lab-name{font-size:18px!important;line-height:1.2!important}
html #intro .type-lab-panel button{min-width:44px!important;width:44px!important;min-height:44px!important;cursor:pointer}
html #intro .type-lab-panel .type-history{max-width:42ch!important;margin-top:6px!important}
html #intro .type-lab-panel .type-history p{font-size:14px!important;line-height:1.5!important}
@media(max-width:1000px){html[data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout] #intro .type-lab-panel{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;grid-column:1/-1!important;margin:16px 0 0!important}}

@media(min-width:1001px){html[data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout][data-wl-layout] #intro .type-lab-panel{inset-inline-start:var(--type-panel-left)!important;inset-inline-end:auto!important;width:var(--type-panel-width)!important;top:var(--type-panel-top)!important}}
