/* One card system for Design Guide and Building Concepts. */
#content .design-guide[data-screen=library]{--library-title-size:15px;--library-caption-size:10px}
#content .design-guide[data-screen=library] .guide-library-categories{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:center;gap:6px;padding:0 0 12px;min-height:var(--guide-category-height,0px)}
#content .design-guide[data-screen=library] .guide-library-categories button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:7px 11px;font:500 11px/1.35 Inter,Arial,sans-serif;border-radius:999px}
#content .design-guide[data-screen=library] .guide-library-categories button>span{font-size:10px;line-height:inherit;opacity:.75;font-variant-numeric:tabular-nums}
#content .design-guide[data-screen=library] .guide-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:6px 12px;align-content:start;align-items:start;width:100%;max-width:none;height:auto;padding:0;margin:0 auto;flex:none}
#content .design-guide[data-screen=library] .guide-topic-card{display:flex;flex-direction:column;align-self:start;min-width:0;min-height:0;height:auto;padding:0;border-radius:10px;overflow:hidden}
#content .design-guide[data-screen=library] .guide-card-image{display:block;flex:none;width:100%;height:auto;aspect-ratio:auto;margin:0;padding:0;border-bottom:1px solid var(--line);box-sizing:content-box}
#content .design-guide[data-screen=library] .guide-cover{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin:0;border:0}
#content .design-guide[data-screen=library] .guide-card-copy{display:block;flex:none;min-height:0;padding:8px 12px 9px;box-sizing:border-box}
#content .design-guide[data-screen=library] .guide-card-title{display:flex;align-items:flex-start;gap:10px;font-family:Inter,Arial,sans-serif;font-size:var(--library-title-size);font-weight:600;line-height:1.3;letter-spacing:-.025em;overflow-wrap:normal}
#content .design-guide[data-screen=library] .guide-card-caption{display:block;font:400 var(--library-caption-size)/1.45 Inter,Arial,sans-serif;margin-top:3px;color:var(--muted)}
#content .design-guide[data-screen=library] .guide-library-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;width:100%;max-width:none;min-height:54px;padding:10px 0;margin:0 auto}
#content .design-guide[data-screen=library] [data-guide-pagination]{display:flex;align-items:center;justify-content:center;justify-self:center;flex-wrap:wrap;gap:6px;grid-column:2;grid-row:1}
#content .design-guide[data-screen=library] [data-guide-pagination] button{display:grid;place-items:center;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border-radius:999px;font:500 11px/1.35 Inter,Arial,sans-serif}
#content .design-guide[data-screen=library] [data-guide-results]{grid-column:1;grid-row:1;justify-self:start;text-align:left;font-size:10px;line-height:1.5}
#content .design-guide[data-screen=library] .concept-gallery-note{grid-column:3;grid-row:1;justify-self:end;font-size:10px;line-height:1.5}
@media(min-width:1600px){#content .design-guide[data-screen=library]{--library-title-size:18px;--library-caption-size:12px}}
@media(min-width:850px) and (min-height:781px) and (max-width:1599px){#content .design-guide[data-screen=library]{--library-title-size:16px;--library-caption-size:11px}}
@media(max-width:1100px){#content .design-guide[data-screen=library] .concept-gallery-note{display:none}}
@media(max-width:849px){
 #content .design-guide[data-screen=library]{--library-title-size:16px;--library-caption-size:11px}
 #content .design-guide[data-screen=library] .guide-library-categories{min-height:0;gap:7px;padding-bottom:14px}
 #content .design-guide[data-screen=library] .guide-library-categories button{font-size:11px;padding:8px 12px}
 #content .design-guide[data-screen=library] .guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:10px 14px;height:auto;max-width:none}
 #content .design-guide[data-screen=library] .guide-card-copy{flex:none;min-height:0;padding:10px 12px 11px}
 #content .design-guide[data-screen=library] .guide-library-footer{grid-template-columns:1fr;gap:8px;max-width:none}
 #content .design-guide[data-screen=library] [data-guide-pagination]{grid-column:1;grid-row:1;gap:5px;max-width:100%}
 #content .design-guide[data-screen=library] [data-guide-results]{grid-column:1;grid-row:2;justify-self:center;text-align:center}
}
@media(max-width:650px){
 #content .design-guide[data-screen=library]{--library-title-size:17px;--library-caption-size:12px}
 #content .design-guide[data-screen=library] .guide-card-grid{grid-template-columns:1fr;gap:10px}
 #content .design-guide[data-screen=library] .guide-card-copy{min-height:0;padding:10px 12px 11px}
 #content .design-guide[data-screen=library] [data-guide-pagination] button{width:30px;min-width:30px;height:32px;min-height:32px}
}
@media print{#content .design-guide[data-screen=library] .guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;max-width:none}#content .design-guide[data-screen=library] .guide-topic-card{break-inside:avoid}}

/* Full illustrations float on the existing page; transparent borders preserve sizing. */
#content :is(.design-guide,.concept-library)[data-screen=library] .guide-topic-card,
#content :is(.design-guide,.concept-library)[data-screen=library] .guide-card-image,
#content :is(.design-guide,.concept-library)[data-screen=library] .guide-card-copy{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
#content :is(.design-guide,.concept-library)[data-screen=library] .guide-card-image{overflow:hidden}
#content :is(.design-guide,.concept-library)[data-screen=library] .guide-cover{transform-origin:50% 50%;transform:translate(var(--cover-x,0%),var(--cover-y,0%)) scale(var(--cover-scale,1))}