.guide-article{margin-inline:auto;max-width:76ch}
.guide-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--muted);font-size:14px;margin-bottom:20px}
.guide-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.guide-intro{padding-bottom:28px}
.guide-intro h1{margin:0 0 16px;line-height:1.4;text-wrap:balance}
.guide-lead{font-size:18px;color:var(--muted);max-width:62ch}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.guide-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;text-decoration:none;line-height:1.4}
.guide-actions a.primary-button{color:var(--surface)}
.guide-action-note,.guide-example-note{font-size:14px;color:var(--muted)}
.guide-toc{padding:20px 0;border-block:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.guide-toc strong{margin-bottom:6px;font-weight:600}
.guide-toc a{display:flex;align-items:center;min-height:44px;padding-block:6px;text-underline-offset:4px}
.guide-article section{scroll-margin-top:24px}
.guide-article h2{line-height:1.5}
.guide-steps{padding-left:24px}
.guide-steps li{padding-left:6px;margin-block:20px}
.guide-steps li::marker{color:var(--accent);font-weight:600}
.guide-steps p{margin:6px 0 0}
.guide-article strong{font-weight:600}
.guide-table-wrap{margin:20px 0}
.guide-table-wrap table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.guide-table-wrap th,.guide-table-wrap td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:14px 12px;overflow-wrap:anywhere;word-break:normal}
.guide-table-wrap thead th{background:var(--soft);font-weight:600}
.guide-table-wrap tbody th{font-weight:600}
.guide-table-wrap th:first-child{width:31%}
.guide-table-wrap table:has(th:nth-child(3)) th:first-child{width:18%}
.size-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.size-comparison figure{margin:0;min-width:0}
.size-diagram{height:170px;background:var(--soft);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.size-shape{display:flex;align-items:center;justify-content:center;width:120px;max-width:75%;background:var(--accent-soft);border:2px solid var(--accent);color:var(--accent);font-size:14px;font-weight:600}
.size-shape--fit{aspect-ratio:4/3}
.size-shape--crop{aspect-ratio:1}
.size-comparison figcaption{display:flex;flex-direction:column;line-height:1.7;padding-top:12px}
.size-comparison small{color:var(--muted)}
.guide-start{border-top:2px solid var(--accent);padding-top:10px}
.guide-article .guide-related{margin-top:36px}
.guide-article .guide-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none}
.guide-sources{font-size:14px;color:var(--muted)}
.guide-sources a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:560px){.guide-lead{font-size:16px}.guide-table-wrap th,.guide-table-wrap td{padding:12px 8px;font-size:14px}.size-comparison{gap:12px}.size-diagram{height:140px}.guide-actions{gap:8px}.guide-actions a{padding-inline:14px}}