/* The reference reuses the landing-page tokens and rhythm from styles.css. */
.docs-page .site-header nav { justify-content: center; }
.docs-hero { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7rem) 0; background: radial-gradient(circle at 78% 10%, rgb(174 179 255 / 42%), transparent 29rem), radial-gradient(circle at 12% 90%, rgb(176 247 220 / 31%), transparent 30rem), linear-gradient(180deg, #f8f9fd, #f3f6fb); }
.docs-hero::before { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgb(90 101 129 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(90 101 129 / 5%) 1px, transparent 1px); background-size: 40px 40px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.docs-hero .shell { position: relative; }
.docs-hero .eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: #1bc48b; box-shadow: 0 0 0 .3rem rgb(27 196 139 / 12%); }
.docs-hero h1 { max-width: 13ch; }
.docs-hero > .shell > p:last-of-type { max-width: 44rem; margin: 1.5rem 0 0; color: #4b566c; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.doc-layout { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; gap: clamp(2.5rem, 7vw, 7rem); padding-top: clamp(3.5rem, 7vw, 6rem); }
.doc-toc { position: sticky; top: 6rem; border-left: 1px solid var(--line); padding-left: 1rem; }
.doc-toc > p { margin: 0 0 .75rem; color: #66728a; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.doc-toc nav { display: grid; gap: .1rem; }
.doc-toc a { border-radius: .4rem; padding: .36rem .5rem; color: #56637a; font-size: .78rem; font-weight: 650; text-decoration: none; }
.doc-toc a:hover { color: var(--indigo-dark); background: #f1f2ff; }
.doc-content { min-width: 0; padding-bottom: 1rem; }
.doc-section { padding: 0 0 clamp(4rem, 8vw, 7rem); scroll-margin-top: 6.2rem; }
.doc-section-heading { max-width: 48rem; }
.doc-section-heading h2 { margin: 0; color: #0d1322; font-size: clamp(2.25rem, 4vw, 4rem); font-weight: 700; letter-spacing: -.06em; line-height: .98; }
.doc-section-heading > p:last-child { max-width: 46rem; margin: 1rem 0 0; color: #637087; }
.doc-section-heading strong { color: #2b354a; }
.doc-steps { display: grid; gap: 1px; margin: 2.5rem 0 0; padding: 1px; border: 1px solid #dbe1eb; border-radius: 1rem; overflow: hidden; background: #dbe1eb; list-style: none; }
.doc-steps li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .8rem; padding: 1.35rem 1.45rem; background: white; }
.doc-steps span { color: var(--indigo-dark); font: .68rem JetBrains Mono, monospace; }
.doc-steps strong, .panel-cards h3, .workflow-cards h3, .two-column-list h3, .format-grid h3, .privacy-doc-card h3 { color: #182033; font-size: 1rem; }
.doc-steps p, .panel-cards p, .workflow-cards p, .format-grid p, .privacy-doc-card p { margin: .4rem 0 0; color: #687388; font-size: .82rem; }
.tool-reference-grid, .panel-cards, .workflow-cards, .format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.tool-reference-grid section, .panel-cards article, .workflow-cards article, .format-grid article, .two-column-list section { border: 1px solid var(--line); border-radius: .9rem; padding: 1.25rem; background: #fbfcfe; }
.tool-reference-grid h3, .menu-card h3 { margin: 0; color: #182033; font-size: .95rem; }
.tool-reference-grid ul, .two-column-list ul { display: grid; gap: .65rem; margin: .9rem 0 0; padding: 0; color: #58657b; font-size: .76rem; list-style: none; }
kbd { display: inline-block; border: 1px solid #cdd5e3; border-bottom-color: #acb7ca; border-radius: .28rem; padding: .06rem .3rem; color: #34415b; background: #f7f9fd; box-shadow: 0 1px 0 #d5dce8; font: .65rem JetBrains Mono, monospace; line-height: 1.25; white-space: nowrap; }
.doc-note { max-width: 52rem; margin: 1rem 0 0; border-left: 3px solid #9298f4; padding: .8rem 1rem; color: #59677d; background: #f6f7ff; font-size: .8rem; }
.doc-note strong { color: #303a67; }
.panel-cards { grid-template-columns: repeat(2, 1fr); }
.workflow-cards { grid-template-columns: repeat(3, 1fr); }
.two-column-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.two-column-list h3 { margin: 0; }
.menu-reference-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; }
.menu-card { border: 1px solid var(--line); border-radius: .9rem; padding: 1.15rem; background: #fff; }
.menu-card ul { margin: .7rem 0 0; padding: 0; list-style: none; }
.menu-card li { display: flex; min-height: 1.85rem; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #edf0f5; color: #4c596f; font-size: .75rem; }
.menu-card li:first-child { border-top: 0; }
.menu-card .menu-child span::before { margin-right: .5rem; color: #94a0b3; content: "↳"; }
.format-grid { grid-template-columns: repeat(2, 1fr); }
.limits-doc { margin-inline: calc(50% - 50vw); padding: clamp(4rem, 8vw, 7rem) max(1.25rem, calc((100vw - var(--shell)) / 2)); background: var(--surface); }
.limits-doc .limits-list { margin-top: 2.5rem; }
.privacy-doc-card { margin-top: 1rem; border: 1px solid #aee9d4; border-radius: 1rem; padding: 1.4rem; background: linear-gradient(120deg, #effcf8, #fff); }
.privacy-doc-card h3 { margin: 0; color: #13654f; }
.docs-page .site-footer { margin-top: 0; }
@media (max-width: 1000px) { .doc-layout { grid-template-columns: 1fr; } .doc-toc { position: static; display: flex; align-items: baseline; gap: 1rem; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 0 1rem; } .doc-toc > p { flex: none; margin: 0; } .doc-toc nav { display: flex; gap: .2rem; white-space: nowrap; } }
@media (max-width: 720px) { .docs-hero h1 { font-size: clamp(3rem, 14vw, 5rem); } .tool-reference-grid, .panel-cards, .workflow-cards, .format-grid, .two-column-list, .menu-reference-grid { grid-template-columns: 1fr; } .docs-hero-actions { flex-direction: column; align-items: stretch; } }
@media (forced-colors: active) { .tool-reference-grid section, .panel-cards article, .workflow-cards article, .format-grid article, .two-column-list section, .menu-card, .privacy-doc-card { border: 1px solid CanvasText; } }