.content-page { background: var(--paper); }
.content-hero { background: linear-gradient(135deg, #eef3f0 0%, #f5f6f2 50%, #e9f2f1 100%); border-bottom: 1px solid var(--line-light); padding: 80px 0 68px; }
.content-home-link { color: #3e606b; display: inline-block; font-size: 13px; margin-bottom: 54px; transition: color .2s ease; }
.content-home-link:hover { color: var(--cyan-deep); }
.content-hero .section-kicker { margin-bottom: 20px; }
.content-hero h1 { color: var(--ink); font-size: clamp(42px, 4.4vw, 62px); font-weight: 500; letter-spacing: -.075em; line-height: 1.18; margin: 0; }
.content-version { color: var(--muted); font-size: 13px; letter-spacing: .03em; margin: 22px 0 0; min-height: 20px; }
.document-section { min-height: 560px; padding: 94px 0 132px; }
.document-layout { display: block; }
.document-toc { border-left: 1px solid var(--line-light); padding: 2px 0 6px 21px; position: sticky; top: 112px; }
.document-toc > p { color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; margin: 0 0 18px; }
.document-toc nav { display: grid; gap: 10px; }
.document-toc a, .toc-empty { color: #70808a; font-size: 12px; line-height: 1.5; transition: color .2s ease; }
.document-toc a:hover { color: var(--cyan-deep); }
.document-toc a[data-level="3"] { font-size: 11px; padding-left: 12px; }
.document-body { color: #40515c; margin: 0 auto; max-width: 816px; min-width: 0; }
.document-body h1, .document-body h2, .document-body h3, .document-body h4 { color: var(--ink); font-weight: 600; letter-spacing: -.045em; scroll-margin-top: 112px; }
.document-body h1 { font-size: 32px; line-height: 1.3; margin: 0 0 28px; }
.document-body h2 { border-top: 1px solid var(--line-light); font-size: 25px; line-height: 1.38; margin: 58px 0 23px; padding-top: 28px; }
.document-body h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.document-body h3 { font-size: 19px; line-height: 1.45; margin: 35px 0 16px; }
.document-body h4 { font-size: 16px; line-height: 1.5; margin: 27px 0 13px; }
.document-body p, .document-body li { color: #53636d; font-size: 15px; line-height: 2; }
.document-body p { margin: 0 0 18px; }
.document-body ul, .document-body ol { margin: 0 0 21px; padding-left: 24px; }
.document-body li + li { margin-top: 7px; }
.document-body a { color: #117f94; text-decoration: underline; text-decoration-color: rgba(17, 127, 148, .35); text-underline-offset: 3px; }
.document-body blockquote { border-left: 2px solid var(--cyan-deep); color: #5b6971; margin: 30px 0; padding: 3px 0 3px 20px; }
.document-body blockquote p:last-child { margin-bottom: 0; }
.document-body pre { background: #e9eeeb; color: #273b45; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; padding: 18px; white-space: pre-wrap; }
.document-body table { border-collapse: collapse; font-size: 14px; line-height: 1.7; margin: 25px 0; width: 100%; }
.document-body th, .document-body td { border: 1px solid var(--line-light); padding: 10px 13px; text-align: left; vertical-align: top; }
.document-body th { background: #e8eeeb; color: var(--ink); font-weight: 600; }
.document-state { align-items: center; border: 1px solid var(--line-light); color: var(--body); display: flex; flex-direction: column; justify-content: center; min-height: 260px; padding: 40px; text-align: center; }
.document-state h2 { border: 0; font-size: 27px; margin: 0 0 13px; padding: 0; }
.document-state p { margin: 0; }
.document-state button { background: transparent; border: 1px solid #6e8d98; color: #284652; cursor: pointer; font-size: 13px; margin-top: 25px; padding: 10px 18px; transition: background .2s ease, color .2s ease; }
.document-state button:hover { background: #193b48; color: #fff; }
.loading-dot { animation: document-pulse 1s ease-in-out infinite; background: var(--cyan-deep); border-radius: 50%; height: 8px; margin-bottom: 18px; width: 8px; }
@keyframes document-pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 900px) { .document-body p, .document-body li { font-size: 14px; } }
@media (max-width: 760px) { .document-section { padding: 62px 0 78px; }.document-body h2 { font-size: 23px; margin-top: 45px; padding-top: 23px; }.document-body h3 { font-size: 18px; }.document-body p, .document-body li { font-size: 14px; line-height: 1.9; }.document-state { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .loading-dot { animation: none; } }