/* Shared navigation across the landing page and interactive sample. */
:root{--site-header-height:81px}
.site-header{position:sticky;top:0;z-index:40;background:var(--bg,var(--page));border-bottom:1px solid var(--ln,var(--line));font-family:var(--sans);color:var(--tx,var(--ink))}
.site-header .site-header-inner{max-width:1240px;height:calc(var(--site-header-height) - 1px);margin:auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-sizing:border-box}
.site-header .site-brand{display:inline-flex;align-items:center;white-space:nowrap;font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-.04em;color:inherit;text-decoration:none}
.site-header .site-brand b{background:#facc15;color:#101828;border-radius:5px;padding:.06em .18em;font-weight:800;margin-left:.06em}
.site-header .site-nav,.site-header .site-links{flex:0 0 auto;display:flex;align-items:center;gap:28px;margin:0;padding:0}
.site-header .site-links a{display:inline;white-space:nowrap;color:var(--mu,var(--mute));font:500 14px/1.5 var(--sans);text-decoration:none;padding:0;border-radius:0;background:transparent}
.site-header .site-links a:hover{color:var(--tx,var(--ink));background:transparent}
.site-header .site-action{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:#facc15;color:#101828;border-radius:10px;font:700 14px/1.5 var(--sans);text-decoration:none;white-space:nowrap;box-shadow:0 12px 28px -14px #facc15}
.site-header .site-action:hover{background:#fde047;color:#101828;text-decoration:none}
.site-header .site-theme{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid var(--ln,var(--line));border-radius:10px;background:transparent;color:var(--mu,var(--mute));cursor:pointer;padding:7px}
.site-header .site-theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.site-header :is(a,button):focus-visible{outline:2px solid var(--tx,var(--ink));outline-offset:4px}
.sample-page .app{min-height:calc(100vh - var(--site-header-height))}
.sample-page .side{top:var(--site-header-height);height:calc(100vh - var(--site-header-height))}
.sample-page .drawer,.sample-page .scrim{top:var(--site-header-height)}
.sample-page .toc{top:calc(var(--site-header-height) + 24px);max-height:calc(100vh - var(--site-header-height) - 48px)}
.sample-page .sec{scroll-margin-top:calc(var(--site-header-height) + 24px)}
@media(max-width:900px){.site-header .site-header-inner{padding-inline:24px;gap:16px}.site-header .site-nav,.site-header .site-links{gap:16px}.site-header .site-action{padding:11px 16px}}
@media(max-width:680px){
 :root{--site-header-height:109px}
 .site-header .site-header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 44px;gap:4px 8px;padding:8px 16px}
 .site-header .site-brand{font-size:19px;grid-column:1;grid-row:1;min-height:44px}
 .site-header .site-nav{display:contents}
 .site-header .site-links{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:0;width:calc(100% - 48px);padding-right:0;overflow-x:auto;scrollbar-width:none;min-width:0}
 .site-header .site-links::-webkit-scrollbar{display:none}
 .site-header .site-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;font-size:13px;border-radius:0;position:relative;touch-action:manipulation}
 .site-header .site-links a[aria-current="location"]{color:var(--tx,var(--ink));box-shadow:none}
 .site-header .site-links a[aria-current="location"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#facc15;border-radius:0}
 .site-header .site-action{grid-column:2;grid-row:1;min-height:44px;font-size:13px;padding:10px 14px;touch-action:manipulation}
 .site-header .site-theme{display:grid;grid-column:2;grid-row:2;justify-self:end;width:44px;height:44px;padding:12px;border:0;touch-action:manipulation}
}
@media print{.site-header{display:none}:root{--site-header-height:0px}}

body:not(.sample-page) [id]{scroll-margin-top:calc(var(--site-header-height) + 16px)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep language and appearance together across both header layouts. */
.site-header .site-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.site-header .site-tools .site-language{display:grid;place-items:center;min-width:34px;height:34px;color:var(--mu,var(--mute));font:600 12px/1 var(--sans);text-decoration:none;white-space:nowrap}
.site-header .site-tools .site-language:hover{color:var(--tx,var(--ink))}
@media(max-width:680px){
 .site-header .site-links{width:calc(100% - 96px)}
 .site-header .site-tools{grid-column:2;grid-row:2;justify-self:end;gap:0}
 .site-header .site-tools .site-language{min-width:44px;height:44px;touch-action:manipulation}
}

/* A light breadcrumb connects product entry points to the shared demo workspace. */
.demo-product-context{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0 0 22px;font:500 12px/1.6 var(--sans);color:var(--mute,var(--mu))}
.demo-product-name{color:var(--ink,var(--tx));font-weight:700;text-decoration:underline;text-decoration-color:#facc15;text-underline-offset:5px}
.demo-product-context>span[aria-hidden]{color:var(--faint,var(--mu))}
.demo-product-page{min-width:0}
@media(max-width:760px){.demo-product-context{font-size:11px;margin-bottom:16px;gap:6px 9px}}