.diagram-library main{max-width:1180px}
.diagram-library header{align-items:center}.diagram-library header>a:last-child{font-size:14px;min-height:44px;align-content:center}
.diagram-library h1 span{display:inline-block;font-size:18px;font-weight:400;color:var(--muted);margin-left:8px}
.library-intro{margin:8px 0 24px;color:var(--muted)}
.library-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;max-width:900px}
.library-controls label{font-size:16px}.library-note{font-size:14px;color:var(--muted);max-width:760px}
.diagram-group{margin-top:32px}.diagram-group h2{margin-bottom:16px}.diagram-group h2 span{font-size:16px;font-weight:400;color:var(--muted);margin-left:8px}
.diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.diagram-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.diagram-card h3{margin:0 0 6px;font-size:19px}.diagram-meta{margin:0 0 14px;font-size:14px;color:var(--muted)}
.diagram-thumbnail{width:100%;height:270px;object-fit:contain;background:white;display:block;border:1px solid #edf0f3;border-radius:6px}
.diagram-expand{margin:14px 0}.diagram-expand summary{color:#08776c;min-height:44px}
.diagram-full img{width:100%;height:auto;display:block;margin:12px 0}.diagram-full a{display:inline-block;min-height:44px;align-content:center;font-size:14px}
.diagram-practice{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.diagram-practice label{flex:1;min-width:120px;margin:0}
.diagram-practice a,.diagram-source,.diagram-animation a{display:inline-block;min-height:44px;padding:9px 12px;border-radius:8px;text-decoration:none}
.diagram-practice a{background:#087f71;color:white;font-weight:600}.diagram-source{padding-left:0;font-size:14px;text-decoration:underline}
.diagram-animation{margin-top:8px;padding:12px;background:#eaf7f4;border-radius:8px}.diagram-animation a{font-weight:600;color:#07675d;padding:0}.diagram-animation p{font-size:14px;margin:4px 0}
.diagram-empty{padding:20px;background:#fff;border:1px dashed #b7c7d5;border-radius:10px;color:var(--muted)}
.diagram-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.diagram-tags span{font-size:14px;padding:2px 8px;background:#edf5fa;color:#385570;border-radius:4px}
#diagram-more{display:block;margin:24px auto;min-height:44px}#diagram-results{margin-top:24px}
@media(max-width:650px){.library-controls{grid-template-columns:1fr;gap:4px}.diagram-grid{grid-template-columns:1fr}.diagram-library h1 span{display:block;margin:5px 0}.diagram-thumbnail{height:240px}.diagram-card{padding:16px}.diagram-group h2 span{display:block;margin:4px 0}.diagram-library header{align-items:flex-start}}