:root{scroll-padding-block-start:calc(var(--size-bar) + var(--space-between-content))}body[data-layout=guide]{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar""main""footer";min-block-size:100dvh;display:grid;@media (width>=60rem){grid-template-columns:minmax(0, 1fr) var(--size-guide-nav) minmax(0, var(--size-guide-main)) minmax(0, 1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"bar bar bar bar"".nav main."".nav footer."}&>main{grid-area:main}&>footer{grid-area:footer}}.guide-bar{z-index:var(--z-index-bar);align-items:center;gap:var(--space-between-content);min-block-size:var(--size-bar);padding-inline:max(var(--space-padding-page), (100% - var(--size-guide-nav) - var(--size-guide-main)) / 2);border-block-end:var(--border-width-default) solid var(--color-border-subtle);background-color:var(--color-background-surface);grid-area:bar;display:flex;position:sticky;inset-block-start:0}.guide-brand{align-items:baseline;gap:var(--space-between-text);color:var(--color-text-primary);font-size:var(--font-size-title);font-weight:var(--font-weight-semi-bold);margin-inline-end:auto;text-decoration:none;display:flex}.guide-brand-tag{color:var(--color-text-secondary);font-weight:var(--font-weight-regular)}.guide-menu-button{@media (width>=60rem){display:none}}.guide-open{text-decoration:none;@media (width<40rem){display:none}}.guide-search-button:not([hidden]){align-items:center;gap:var(--space-between-text);min-block-size:var(--size-action-minimum);padding-inline:var(--space-padding-compact) var(--space-between-text);border:var(--border-width-default) solid var(--color-border-subtle);border-radius:var(--radius-medium);background-color:var(--color-background-page);color:var(--color-text-secondary);font:inherit;cursor:pointer;display:flex;&:hover{border-color:var(--color-border);color:var(--color-text-primary)}@media (width>=40rem){min-inline-size:15rem;& kbd{margin-inline-start:auto}}@media (width<40rem){padding-inline:var(--space-between-text);& .guide-search-label{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}& kbd{display:none}}}.guide-nav{align-content:start;gap:var(--space-between-blocks);padding:var(--space-between-blocks) var(--space-padding-container);color:var(--color-text-primary);border:0;&:popover-open{border-inline-end:var(--border-width-default) solid var(--color-border-subtle);background-color:var(--color-background-page);block-size:100dvh;max-block-size:none;inline-size:min(20rem,85vw);margin:0;display:grid;inset-block:0;inset-inline:0 auto;overflow-y:auto}&::backdrop{background-color:var(--color-backdrop)}@media (width>=60rem){inset:var(--size-bar) auto auto;block-size:auto;inline-size:auto;max-block-size:calc(100dvh - var(--size-bar));border-inline-end:var(--border-width-default) solid var(--color-border-subtle);background-color:#0000;grid-area:nav;align-self:start;margin:0;display:grid;position:sticky;overflow-y:auto}& ul{gap:.125rem;padding:0;list-style:none;display:grid}& a{padding:var(--space-between-lines) var(--space-padding-compact);border-radius:var(--radius-small);color:var(--color-text-primary);text-decoration:none;display:block;&:hover{background-color:var(--color-background-raised)}&[aria-current=page]{background-color:var(--color-background-raised);color:var(--color-text-accent);font-weight:var(--font-weight-semi-bold)}}}.guide-nav-head{font-weight:var(--font-weight-semi-bold);justify-content:space-between;align-items:center;display:flex;@media (width>=60rem){display:none}}.guide-nav-group{gap:var(--space-between-text);display:grid}.guide-nav-title{padding-inline:var(--space-padding-compact);color:var(--color-text-secondary);font-size:var(--font-size-small);font-weight:var(--font-weight-semi-bold);letter-spacing:.08em;text-transform:uppercase}.guide-nav .guide-nav-mixer{align-items:center;gap:var(--space-between-text);color:var(--color-text-accent);display:flex}.guide-page{grid-template-columns:minmax(0, var(--size-reading));gap:var(--space-between-blocks);padding:var(--space-between-blocks) var(--space-padding-page) var(--space-between-sections);justify-content:center;display:grid;@media (width>=80rem){grid-template-columns:minmax(0, var(--size-reading)) var(--size-guide-toc);column-gap:var(--space-between-sections);&>:not(.guide-toc){grid-column:1}}}.guide-title{gap:var(--space-between-text);display:grid;& h1{font-size:var(--font-size-display);letter-spacing:-.01em}}.guide-eyebrow{color:var(--color-text-accent);font-size:var(--font-size-small);font-weight:var(--font-weight-semi-bold)}.guide-lead{max-inline-size:38rem;color:var(--color-text-secondary)}.guide-toc{gap:var(--space-between-text);padding:var(--space-padding-compact) var(--space-padding-container);border:var(--border-width-default) solid var(--color-border-subtle);border-radius:var(--radius-medium);font-size:var(--font-size-small);display:grid;@media (width>=80rem){padding:0;border-width:0;border-inline-start-width:var(--border-width-default);border-radius:0;grid-area:1/2/span 4;align-self:start;padding-inline-start:var(--space-padding-container);position:sticky;inset-block-start:calc(var(--size-bar) + var(--space-between-blocks))}& h2{color:var(--color-text-secondary);font-size:var(--font-size-small);letter-spacing:.08em;text-transform:uppercase}& ul{gap:var(--space-between-lines);padding:0;list-style:none;display:grid}& a{color:var(--color-text-secondary);padding-block:.125rem;text-decoration:none;display:block;&:hover{color:var(--color-text-accent)}}}.guide-pager{gap:var(--space-between-content);grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));margin-block-start:var(--space-between-blocks);display:grid}.guide-pager-link{gap:var(--space-between-lines);color:var(--color-text-primary);font-weight:var(--font-weight-semi-bold);text-decoration:none;display:grid;&:hover{color:var(--color-text-accent)}}.guide-pager-next{text-align:end;grid-column:-2;& .guide-pager-label{justify-content:end}}.guide-pager-label{align-items:center;gap:var(--space-between-lines);color:var(--color-text-secondary);font-size:var(--font-size-small);font-weight:var(--font-weight-regular);display:flex}