:root { font-family: system-ui, sans-serif; color: #172033; background: #f4f6fa; } * { box-sizing: border-box; } body { margin: 0; } main { max-width: 960px; margin: 0 auto; padding: 40px 22px 80px; } .back { color: #2454bb; text-decoration: none; font-weight: 700; } .label { display: inline-block; margin-top: 22px; padding: 5px 8px; color: #2454bb; border: 1px solid #bfd0fa; border-radius: 5px; background: #e8f0ff; font-size: 12px; font-weight: 800; } h1 { margin: 10px 0 12px; font-size: 30px; } h2 { margin-top: 38px; padding-bottom: 9px; border-bottom: 2px solid #dbe4f1; font-size: 20px; } .lead { color: #4c5668; line-height: 1.8; } .callout { margin-top: 22px; padding: 15px 17px; border-left: 5px solid #2d61d7; border-radius: 8px; background: #e8f0ff; line-height: 1.7; } a { color: #2454bb; } .diagram, .model { display: grid; gap: 7px; padding: 18px; border: 1px solid #dfe5ee; border-radius: 10px; background: white; text-align: center; } .diagram b, .model b { padding: 8px; border-radius: 6px; background: #2d61d7; color: white; } .diagram span, .model span { color: #667085; font-size: 14px; } .diagram i, .model i { color: #2d61d7; font-style: normal; font-weight: 900; } ul, ol { line-height: 1.8; } table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 10px; background: white; } th, td { padding: 12px; border: 1px solid #dfe5ee; text-align: left; vertical-align: top; line-height: 1.6; } th { background: #e8f0ff; } footer { margin-top: 44px; padding-top: 16px; border-top: 1px solid #dfe5ee; color: #667085; font-size: 13px; } @media (max-width: 620px) { main { padding: 26px 14px 70px; } h1 { font-size: 24px; } table { display: block; overflow-x: auto; white-space: normal; } th, td { min-width: 165px; } }