.document-article,.guide-library{--document-color:var(--accent);& [data-tone=water],&[data-tone=water]{--document-color:light-dark(#276579,#9bd2df)}& [data-tone=weight],&[data-tone=weight]{--document-color:light-dark(#66528a,#cbb9e9)}& [data-tone=record],&[data-tone=record]{--document-color:light-dark(#855638,#e6b58e)}& [data-tone=light],&[data-tone=light]{--document-color:light-dark(#806018,#dfc477)}}.document-heading,.guide-library-heading{background:linear-gradient(120deg, var(--surface), var(--surface-soft));border:1px solid var(--line);border-radius:var(--radius);align-items:center;gap:clamp(1rem,3vi,2rem);padding:clamp(1.2rem,3vi,2.5rem);display:flex;& h1{margin-block:.4rem 1rem}& .eyebrow{color:var(--document-color)}}.document-emblem{background:var(--surface);border:1px solid var(--line);block-size:96px;inline-size:96px;box-shadow:var(--shadow);border-radius:24px;flex:none;place-items:center;display:grid}.document-metadata{color:var(--muted);flex-wrap:wrap;gap:.65rem;font-size:.75rem;display:flex;&>span,&>a{background:var(--surface);border:1px solid var(--line);border-radius:8px;align-items:center;gap:.4rem;padding:.4rem .7rem;display:inline-flex}}.guide-library-grid{grid-template-columns:[start]repeat(2,[column-start]minmax(0,1fr)[column-end])[end];gap:1.3rem;margin-block:2rem;display:grid}.guide-library-card{background:var(--surface);border:1px solid var(--line);border-block-start:4px solid var(--document-color);border-radius:var(--radius);min-inline-size:0;box-shadow:var(--shadow);flex-direction:column;gap:1rem;padding:clamp(1.2rem,2.4vi,2rem);display:flex;& header{align-items:center;gap:1rem;display:flex}& h2{margin:.3rem 0 0;font-size:1.75rem}& h2 a{color:var(--ink);text-decoration:none}& .eyebrow{color:var(--document-color);margin:0}& p{margin:0;line-height:1.625}& ul{gap:.4rem;margin:0;padding-inline-start:1.2rem;font-size:.875rem;display:grid}@supports selector(::marker){& li::marker{color:var(--document-color)}}& footer{border-block-start:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:.7rem;margin-block-start:auto;padding-block-start:1rem;font-size:.75rem;display:flex}}.document-article .article-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;& a{align-items:baseline;gap:.6rem;padding-block:.2rem;display:flex}& .toc-number{font-variant-numeric:tabular-nums;color:var(--document-color);font-size:.75rem}}.document-contents{& summary{cursor:pointer;padding-block:.35rem;font-size:.75rem;font-weight:750}& summary span{color:var(--muted);margin-inline-start:.5rem;font-size:.625rem;font-weight:500}&[open] summary{margin-block-end:.8rem}}.document-body{gap:1.5rem;display:grid}.document-introduction,.document-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-inline-size:0;box-shadow:var(--shadow);padding:clamp(1rem,2.5vi,2rem)}.document-introduction{background:linear-gradient(140deg, var(--surface), var(--surface-soft));border-inline-start:4px solid var(--document-color)}.document-section{border-block-start:3px solid var(--document-color)}.document-section-marker{color:var(--document-color);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:.6rem;margin-block-end:.9rem;font-size:.625rem;font-weight:750;display:flex}.document-section-content{&>h2:first-child{margin-block:0 1.25rem;padding:0;font-size:clamp(1.5rem,2.3vi,2rem);line-height:1.25}& h3{color:var(--document-color);border-block-end:1px solid var(--line);padding-block-end:.5rem}&>:last-child{margin-block-end:0}@supports selector(::marker){& li::marker{color:var(--document-color)}}& strong,& table th{color:var(--document-color)}& table tbody tr:nth-child(2n){background:color-mix(in srgb, var(--surface-soft) 50%, transparent)}}.setup-links .setup-link-icon{block-size:42px;inline-size:42px;margin-block-end:.75rem}@media (width<=700px){.document-heading,.guide-library-heading{align-items:start}.document-emblem{border-radius:14px;block-size:54px;inline-size:54px;& img{block-size:40px;inline-size:40px}}.guide-library-grid{grid-template-columns:[start]minmax(0,1fr)[end]}}@media (width<=450px){.document-heading,.guide-library-heading{flex-direction:column}}@media print{.document-heading,.document-introduction,.document-section{box-shadow:none;background:0 0;border:0;padding:0}.document-section{margin-block:1.5rem}.document-metadata,.document-emblem,.document-section-marker{display:none}.document-section-content h2{break-after:avoid}}