/* LAB / measured, Egyptian-inspired glyph family. */
:root{--wl-lab-accent:#85620e;--wl-lab-tint:rgba(180,139,44,.11)}
html[data-theme=dark]{--wl-lab-accent:#e2ba50;--wl-lab-tint:rgba(226,186,80,.1)}
#hero-lab .wl-lab-devices{display:flex;justify-content:flex-end;width:132px;align-self:flex-end;margin-block:0 12px;direction:ltr;flex:none;grid-column:1/-1;justify-self:end}
#hero-lab .wl-lab-devices .wlb-lab-btn{flex:none}
#hero-lab .wl-lab-devices [data-wlb-key=desktop]>svg{translate:0 -2px}
@media(min-width:601px){
 #hero-lab .wl-lab-devices{width:136px;column-gap:2px}
 html.wl-workshop-ready #hero-lab{margin-block-start:var(--wl-lab-cap-offset,0px)!important}
 #hero-lab .lab-system-reset{margin-inline-start:0!important}
}
#hero-lab .wlb-lab-item:has([data-wlb-key=motion]){margin-top:12px}
#hero-lab .wlb-lab-item:last-child{margin-top:0!important}
.wl-glyph-detail{transform-origin:12px 12px}
#hero-lab [data-wlb-key=direction][aria-pressed=true] .wl-glyph-detail{transform:scaleX(-1)}
#hero-lab .wlb-lab-btn:focus-visible{outline:1px solid var(--wl-lab-accent)!important;outline-offset:-3px!important}
.wl-workshop-tip{position:fixed;z-index:20020;width:216px;padding:10px 12px;background:var(--paper,#fcfcf9);color:var(--ink,#171813);pointer-events:none;border-inline-start:2px solid var(--wl-lab-accent);text-align:start;box-sizing:border-box}
.wl-workshop-tip strong,.wl-workshop-tip span{display:block;font:500 12px/1.45 var(--mono,monospace)}
.wl-workshop-tip span{font:400 12px/1.5 var(--sans,sans-serif);margin-top:4px;color:var(--muted,#686960)}
.wl-workshop-tip[hidden],#wl-workshop-info[hidden],#wl-reading-note[hidden]{display:none!important}
#wl-workshop-layer{position:fixed;inset:0;z-index:10002;pointer-events:none;color:var(--wl-lab-accent);overflow:hidden}
.wl-inspect-box{position:absolute;box-sizing:border-box;border:1px solid currentColor;background:var(--wl-lab-tint)}
.wl-inspect-box[style*="--wl-level:1"]{background:rgba(180,139,44,.075);border-style:dashed}
.wl-inspect-box[style*="--wl-level:2"]{background:rgba(180,139,44,.04)}
.wl-inspect-label,.wl-inspect-number{position:absolute;padding:4px 7px;background:var(--paper,#fcfcf9);color:var(--wl-lab-accent);font:500 11px/1.4 var(--mono,monospace);white-space:nowrap}
.wl-inspect-number{font-size:20px;letter-spacing:-.04em}
.wl-container-band{position:absolute;background:repeating-linear-gradient(135deg,transparent 0 7px,var(--wl-lab-tint) 7px 8px)}
.wl-type-baseline{position:absolute;border-top:1px solid currentColor;opacity:.5}
.wl-relation-measure{position:absolute;border:0 solid currentColor}
.wl-relation-measure.is-vertical{border-inline-start-width:1px}
.wl-relation-measure.is-horizontal{border-block-start-width:1px}
.wl-relation-measure::before,.wl-relation-measure::after{content:"";position:absolute;width:9px;height:9px;border:0 solid currentColor}
.is-vertical::before,.is-vertical::after{left:-5px;border-top-width:1px}.is-vertical::after{bottom:0}
.is-horizontal::before,.is-horizontal::after{top:-5px;border-left-width:1px}.is-horizontal::after{right:0}
#wl-workshop-info{position:fixed;z-index:10006;bottom:24px;inset-inline-start:24px;max-width:520px;width:calc(100vw - 48px);box-sizing:border-box;background:var(--paper,#fcfcf9);color:var(--ink,#171813);padding:18px 42px 16px 20px;border-inline-start:2px solid var(--wl-lab-accent);box-shadow:0 4px 30px #0000000c}
.wl-info-body>strong{font:500 17px/1.3 var(--sans,sans-serif);letter-spacing:-.025em}
.wl-info-body>p{font:400 13px/1.5 var(--sans,sans-serif);color:var(--muted,#686960);margin:7px 0 12px}
.wl-info-body dl{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0}.wl-info-body dl>div{display:grid;gap:3px}.wl-info-body dt{font:400 10px/1.4 var(--mono,monospace)}.wl-info-body dd{font:500 19px/1.2 var(--mono,monospace);margin:0;color:var(--wl-lab-accent)}
.wl-info-close{position:absolute;inset-inline-end:0;top:0;width:44px;height:44px;border:0;background:none;color:inherit;font-size:24px;cursor:pointer}
html[data-workshop-inspect=containers] #wl-container-view,html[data-workshop-inspect=typ] #wonderla-typography-inspector{display:none!important}
#wl-reading-note{position:fixed;z-index:10006;bottom:24px;left:24px;max-width:calc(100vw - 48px);border:0;border-inline-start:2px solid var(--wl-lab-accent);background:var(--paper,#fcfcf9);color:var(--ink,#171813);padding:14px 18px;font:400 12px/1.5 var(--mono,monospace);cursor:pointer}
html.wl-reading-reversed #intro .hero-bottom{direction:rtl!important;text-align:start!important}
html[dir=rtl].wl-reading-reversed #intro .hero-bottom{direction:ltr!important}
html.wl-reading-reversed #intro #hero-title,html.wl-reading-reversed #intro .hero-description{text-align:right!important;align-items:flex-end!important}
html[dir=rtl].wl-reading-reversed #intro #hero-title,html[dir=rtl].wl-reading-reversed #intro .hero-description{text-align:left!important;align-items:flex-start!important}
.wl-workshop-dialog{position:fixed;inset:20px;width:calc(100vw - 40px);height:calc(100dvh - 40px);max-width:none;max-height:none;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--ink,#171813) 16%,transparent);box-sizing:border-box;background:var(--paper,#fcfcf9);color:var(--ink,#171813);overflow:hidden}
.wl-workshop-dialog::backdrop{background:#1718138c}
.wl-workshop-dialog:not([open]){display:none}.wl-workshop-dialog[open]{display:flex;flex-direction:column}
.wl-dialog-head{display:flex;align-items:center;gap:20px;padding:8px 12px 8px 24px;min-height:60px;box-sizing:border-box;border-bottom:1px solid color-mix(in srgb,var(--ink,#171813) 12%,transparent);flex:none}
.wl-dialog-head>strong{font:500 14px/1.35 var(--sans,sans-serif);margin-inline-end:auto}
.wl-dialog-close{border:0;background:none;color:inherit;font-size:27px;min-width:44px;height:44px;cursor:pointer;flex:none}
.wl-workshop-dialog button:focus-visible,.wl-workshop-dialog pre:focus-visible,.wl-info-close:focus-visible,#wl-reading-note:focus-visible{outline:2px solid var(--wl-lab-accent);outline-offset:-2px}
.wl-viewport-controls{display:flex;direction:ltr}.wl-viewport-controls button{border:0;background:none;color:inherit;width:44px;height:44px;padding:9px;cursor:pointer}
.wl-viewport-controls svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linejoin:miter}.wl-viewport-controls .glyph-active{display:none}.wl-viewport-controls button[aria-pressed=true]{color:var(--wl-lab-accent);background:var(--wl-lab-tint)}
.wl-viewport-controls button[aria-pressed=true] .glyph-rest{display:none}.wl-viewport-controls button[aria-pressed=true] .glyph-active{display:block}
.wl-viewport-status{font:400 11px/1.4 var(--mono,monospace);white-space:nowrap;min-width:70px}
.wl-viewport-canvas{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:12px 0;box-sizing:border-box;background:color-mix(in srgb,var(--ink,#171813) 4%,var(--paper,#fcfcf9))}
.wl-viewport-shell{position:relative;flex:none;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink,#171813) 16%,transparent);background:var(--paper,#fcfcf9)}
.wl-viewport-shell iframe{display:block;border:0;transform-origin:top left;max-width:none!important;background:var(--paper,#fcfcf9)}
.wl-preview-tools{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;padding:4px 12px;flex:none;border-top:1px solid color-mix(in srgb,var(--ink,#171813) 12%,transparent)}
.wl-preview-tools button,.wl-code-tabs button{font:400 12px/1.4 var(--mono,monospace);min-height:44px;padding:8px 12px;border:0;background:none;color:inherit;cursor:pointer}
.wl-preview-tools button[aria-pressed=true],.wl-code-tabs button[aria-pressed=true]{color:var(--wl-lab-accent);background:var(--wl-lab-tint)}
html.wl-dialog-open{overflow:hidden!important}
html.wl-lab-preview .wlb-lab-captions,html.wl-lab-preview .wl-workshop-tip{display:none!important}
.wl-code-intro{font:400 14px/1.5 var(--sans,sans-serif);margin:18px 24px 8px;color:var(--muted,#686960)}
.wl-code-tabs{display:flex;gap:4px;margin:0 12px 12px}
.wl-code-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;flex:1;min-height:0;padding:0 24px 24px}
.wl-code-visual{min-width:0;overflow:auto;padding:24px;background:var(--wl-lab-tint);display:flex;flex-direction:column;justify-content:center;gap:20px;pointer-events:none}
.wl-code-visual h1{font:500 clamp(28px,4vw,60px)/1.08 var(--sans,sans-serif);letter-spacing:-.035em;margin:0}.wl-code-visual p{font:400 16px/1.5 var(--sans,sans-serif);margin:0}.wl-code-visual .chesh-cta{position:relative!important;inset:auto!important;transform:none!important;width:180px!important;align-self:center}
.wl-code-content pre{margin:0;overflow:auto;padding:20px;background:color-mix(in srgb,var(--ink,#171813) 5%,var(--paper,#fcfcf9));color:var(--ink,#171813);font:400 12px/1.7 var(--mono,monospace);direction:ltr;text-align:left;tab-size:2}
@media(min-width:601px) and (max-height:820px){#hero-lab .wl-lab-devices{margin-bottom:4px}#hero-lab .wlb-lab-item:has([data-wlb-key=motion]){margin-top:8px}#hero-lab{row-gap:0!important}}
@media(max-width:600px){#hero-lab .wl-lab-devices{grid-column:1/-1;justify-self:start;width:auto;justify-content:flex-start;margin-bottom:8px}#wl-workshop-info{bottom:12px;inset-inline-start:12px;width:calc(100vw - 24px);padding:12px 40px 12px 14px}.wl-info-body>p{font-size:12px;margin-bottom:8px}.wl-info-body dl{gap:8px 16px}.wl-info-body dd{font-size:16px}.wl-workshop-dialog{inset:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px)}.wl-dialog-head{flex-wrap:wrap;gap:4px 8px;padding:8px}.wl-dialog-head>strong{flex-basis:calc(100% - 52px);order:0}.wl-dialog-close{order:1}.wl-viewport-controls{order:2}.wl-viewport-status{order:3;margin-inline-start:auto}.wl-code-content{grid-template-columns:1fr;grid-template-rows:minmax(120px,.8fr) minmax(0,1fr);gap:12px;padding:0 12px 12px}.wl-code-visual{padding:18px}.wl-code-intro{margin-inline:16px}}
@media(prefers-reduced-motion:reduce){.wl-workshop-dialog *,#wl-workshop-layer *{animation:none!important;transition:none!important}}

/* Keep the complete workshop inside the hero at desktop heights. */
@media(min-width:601px){html.wl-workshop-ready #hero-lab{display:grid!important;grid-template-columns:repeat(2,44px)!important;width:88px!important;gap:0!important}html.wl-workshop-ready #hero-lab .wlb-lab-kicker{grid-column:1/-1}html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=motion]){grid-row:auto!important;grid-column:1!important;justify-self:center;margin-top:8px}html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=mono]){grid-row:auto!important;grid-column:2!important;justify-self:center;margin-top:8px}html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=reset]){grid-row:auto!important;grid-column:2!important;justify-self:center}}
#hero-lab [data-device][aria-pressed=true] .wl-glyph-detail,.wl-viewport-controls button[aria-pressed=true] .wl-glyph-detail{stroke-width:1.75;transform:translateY(1px)}
/* One name, one place. Old tooltip nodes remain only for controller compatibility. */
html.wl-workshop-ready #intro .wlb-lab-captions,html.wl-workshop-ready .wl-workshop-tip{display:none!important}
#wl-lab-label{position:fixed;z-index:20020;width:max-content;max-width:192px;padding:0;border:0;box-shadow:none;background:var(--paper,#fcfcf9);color:var(--ink,#171813);font:400 11px/16px var(--mono,monospace);text-align:start;white-space:normal;overflow-wrap:anywhere;pointer-events:auto}
#wl-lab-label[hidden]{display:none!important}
html.wl-responsive-on #wl-lab-label{display:none!important}
@media(max-width:600px){html.wl-workshop-ready #intro#intro#intro #hero-lab{padding-bottom:28px!important}#wl-lab-label{font-size:12px;line-height:18px}}
/* State belongs to the drawing: reversible light, contours and a rising fill. */
#hero-lab .wlb-lab-btn,.wl-viewport-controls .wlb-lab-btn{transition:color 420ms cubic-bezier(.25,.65,.3,1)!important}
#hero-lab .wlb-lab-btn>svg,.wl-viewport-controls .wlb-lab-btn>svg{filter:drop-shadow(0 0 0 transparent)!important;transition:filter 520ms ease,transform 320ms ease!important}
#hero-lab .wlb-lab-btn:is([aria-pressed=true],[data-lab-feedback=true])>svg,.wl-viewport-controls .wlb-lab-btn[aria-pressed=true]>svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--lab-gold,var(--wl-lab-accent)) 27%,transparent))!important}
#hero-lab .glyph-rest,#hero-lab .glyph-active,.wl-viewport-controls .glyph-rest,.wl-viewport-controls .glyph-active{display:block!important;transition:opacity 420ms cubic-bezier(.25,.65,.3,1)!important}
#hero-lab .glyph-rest,.wl-viewport-controls .glyph-rest{opacity:1!important}
#hero-lab .glyph-active,.wl-viewport-controls .glyph-active{opacity:0!important}
#hero-lab button:is([aria-pressed=true],[data-lab-feedback=true]) .glyph-rest,.wl-viewport-controls button[aria-pressed=true] .glyph-rest{opacity:0!important}
#hero-lab button:is([aria-pressed=true],[data-lab-feedback=true]) .glyph-active,.wl-viewport-controls button[aria-pressed=true] .glyph-active{opacity:1!important}
#hero-lab .wl-lab-contour,.wl-viewport-controls .wl-lab-contour{stroke-dasharray:var(--wl-contour) var(--wl-contour);stroke-dashoffset:var(--wl-contour);transition:stroke-dashoffset 560ms cubic-bezier(.25,.65,.3,1)!important}
#hero-lab button:is([aria-pressed=true],[data-lab-feedback=true]) .wl-lab-contour,.wl-viewport-controls button[aria-pressed=true] .wl-lab-contour{stroke-dashoffset:0;transition-duration:620ms!important;transition-delay:var(--wl-path-delay,0ms)!important}
#hero-lab svg .wl-fill-mask,.wl-viewport-controls svg .wl-fill-mask{stroke:none!important;transform:scaleY(0);transform-origin:12px 24px;transition:transform 420ms cubic-bezier(.25,.65,.3,1)!important}
#hero-lab button:is([aria-pressed=true],[data-lab-feedback=true]) .wl-fill-mask,.wl-viewport-controls button[aria-pressed=true] .wl-fill-mask{transform:scaleY(1);transition-duration:520ms!important;transition-delay:100ms!important}
#hero-lab .lab-fill,.wl-viewport-controls .lab-fill{fill:var(--lab-gold,var(--wl-lab-accent));stroke:none;opacity:.72}
#hero-lab button[data-lab-feedback=true]{color:var(--lab-gold,var(--wl-lab-accent))!important}
#hero-lab button::before{transition:opacity 420ms ease!important;opacity:0}
#hero-lab button[aria-pressed=true]::before{opacity:1}
#hero-lab button:disabled{cursor:default!important}
#wl-lab-label{background:transparent;transition:opacity 140ms ease}
@media(prefers-reduced-motion:reduce){#hero-lab .wlb-lab-btn,#hero-lab .wlb-lab-btn>svg,#hero-lab .glyph-rest,#hero-lab .glyph-active,#hero-lab .wl-lab-contour,#hero-lab svg .wl-fill-mask,.wl-viewport-controls .wlb-lab-btn,.wl-viewport-controls .wlb-lab-btn>svg,.wl-viewport-controls .glyph-rest,.wl-viewport-controls .glyph-active,.wl-viewport-controls .wl-lab-contour,.wl-viewport-controls svg .wl-fill-mask{transition:none!important;transition-delay:0ms!important}}
html.motion-paused #hero-lab *,html.motion-paused .wl-viewport-controls *{transition:none!important;transition-delay:0ms!important}

@media(min-width:601px){html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=code]){grid-column:1/-1;justify-self:start}}
#hero-lab .wlb-lab-btn::before{content:"";position:absolute;inset-inline-start:1px;top:20px;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:0;transition:opacity 420ms ease!important}
#hero-lab .wlb-lab-btn[aria-pressed=true]::before{opacity:1}
#hero-lab button[data-lab-feedback=true][data-lab-feedback=true] .glyph-active{opacity:1!important}
#hero-lab button[data-lab-feedback=true][data-lab-feedback=true] .glyph-rest{opacity:0!important}
/* The responsive document contains its own native LAB and controls. */
html.wl-responsive-on{overflow:hidden!important}
#wl-responsive-stage{position:fixed;inset:0;z-index:10000;display:flex;justify-content:flex-start;align-items:stretch;box-sizing:border-box;padding:0;overflow:auto;background:var(--paper,#fcfcf9);scrollbar-width:thin}
#wl-responsive-frame{display:block;flex:none;border:0;max-width:none!important;height:100%;margin-inline:auto;background:var(--paper,#fcfcf9);transform:none!important;transition:width 520ms cubic-bezier(.25,.65,.3,1)}
@media(prefers-reduced-motion:reduce){#wl-responsive-frame{transition:none!important}}
html.motion-paused #wl-responsive-frame{transition:none!important}
/* Type and spacing belong to one relationship view. */
#hero-lab .wlb-lab-item[data-merged-into=relations]{display:none!important}


/* Functional pairs read left to right; DOM and visual order agree. */
html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=mono]){grid-column:auto!important;grid-row:auto!important;margin-top:0!important}
html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=code]){grid-column:1!important;justify-self:start}
html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=motion]){grid-column:2!important;grid-row:auto!important;margin-top:0!important}
html.wl-workshop-ready #hero-lab .wlb-lab-item:has([data-wlb-key=reset]){grid-column:1/-1!important;grid-row:auto!important;justify-self:end!important;margin-top:8px!important}
@media(max-width:600px){html.wl-workshop-ready #intro#intro#intro #hero-lab{grid-template-columns:repeat(6,44px)!important;column-gap:0!important;justify-content:space-between!important}}
@media(max-width:600px){html.wl-workshop-ready #hero-lab .wlb-lab-item:has(:is([data-wlb-key=code],[data-wlb-key=motion])){grid-column:auto!important}}