.guide-hero { padding-block: 65px 55px; max-width: 1100px; }
.guide-hero h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.12; margin-bottom: 28px; }
.guide-hero > p { max-width: 780px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.guide-hero .guide-lead { font-size: 22px; color: var(--ink); line-height: 1.65; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 65px; padding-bottom: 65px; }
.guide-contents nav { position: sticky; top: 25px; padding-block: 20px; }
.guide-contents a { display: block; padding: 9px 0; font-size: 14px; line-height: 1.45; color: #354f66; }
.guide-contents a:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-content { min-width: 0; }
.guide-content > section { padding-block: 35px 40px; border-top: 1px solid #6b7c8940; scroll-margin-top: 25px; }
.guide-content h2 { margin: 0 0 25px; font-size: clamp(30px, 3.5vw, 43px); }
.guide-content h3 { margin: 30px 0 12px; font-size: 23px; }
.guide-content p, .guide-content li { font-size: 17px; line-height: 1.85; color: #414e59; }
.guide-content p { margin: 0 0 20px; }
.guide-content li { margin-bottom: 10px; }
.guide-content code { font-family: Consolas, 'Courier New', monospace; font-size: .86em; overflow-wrap: anywhere; }
.guide-note { border-left: 3px solid #a66c48; padding: 20px 24px; background: #fbf7efb5; border-radius: 0 9px 9px 0; line-height: 1.8; color: #414e59; margin: 28px 0; }
.guide-note strong { display: block; color: var(--ink); }
.library-picture { padding: 28px; border-radius: 12px; background: linear-gradient(145deg,#e2edf5,#fffaf0); margin: 28px 0; box-shadow: 0 12px 30px #34475b10; }
.library-picture > strong { font-size: 23px; }
.folder-branch { border-left: 2px solid #90a8bc; padding-left: 22px; margin: 22px 0 0 10px; }
.folder-branch strong, .folder-branch span, .folder-branch small { display: block; line-height: 1.7; overflow-wrap: anywhere; }
.folder-branch span, .folder-branch small { color: #4d6070; font-size: 14px; }
.folder-branch ul { padding-left: 20px; }
.catalog-example { white-space: pre; overflow: auto; padding: 28px; background: #203346; color: #f3eee3; border-radius: 10px; line-height: 1.8; max-height: 660px; }
.catalog-example code { font-size: 14px; overflow-wrap: normal; }
.reading-key { margin: 25px 0; }
.reading-key p { margin-bottom: 8px; }
.table-scroll { overflow-x: auto; margin-block: 22px; }
.guide-content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; text-align: left; background: #f9f7f0a0; }
.guide-content th, .guide-content td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid #8c9ca540; }
.guide-content thead { background: #dce7ee; }
.field-reference { border-bottom: 1px solid #8c9ca550; }
.field-reference summary { cursor: pointer; padding: 20px 5px; font-size: 18px; font-weight: 600; line-height: 1.8; }
.field-reference summary code { margin-left: 8px; color: #4d6375; }
.field-reference summary span { display: block; font-size: 12px; font-weight: 400; color: #536472; }
.field-reference table { min-width: 600px; }
.field-reference tbody th { width: 21%; }
.field-reference td:last-child { width: 24%; font-size: 13px; }
.field-values { margin-top: 8px; font-size: 13px; color: #526272; }
.layer-list article { display: flex; gap: 20px; margin-block: 25px; }
.layer-list article > span { display: grid; place-items: center; align-self: flex-start; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #e9f0f5; color: #456a88; }
.layer-list h3 { margin: 0 0 8px; }
.guide-downloads { display: flex; flex-wrap: wrap; gap: 22px; margin-block: 30px; }
.guide-content .guide-source { font-size: 13px; line-height: 1.8; }
@media(max-width:1000px) { .guide-layout { grid-template-columns: 1fr; gap: 15px; } .guide-contents nav { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .guide-contents .eyebrow { grid-column: 1/-1; } }
@media(max-width:760px) { .guide-hero { padding-block: 40px 25px; } .guide-hero .guide-lead { font-size: 19px; } .guide-content > section { padding-block: 30px; } .guide-contents nav { grid-template-columns: 1fr; } .catalog-example { padding: 20px; } .library-picture { padding: 20px; } }