.graphics-page{max-width:1560px;margin:auto;padding:35px 4.2% 65px}
.graphics-heading h1{font-family:'Serious Advance White',Segoe UI,sans-serif;font-size:40px;font-weight:400;letter-spacing:0;line-height:1.25}
.graphics-heading .eyebrow{margin-bottom:12px}.graphics-heading p{max-width:760px;color:var(--muted)}
.graphics-controls{position:sticky;top:8px;z-index:5;display:flex;align-items:end;gap:14px;flex-wrap:wrap;padding:20px;background:var(--panel);border:1px solid var(--border);border-radius:8px;margin:24px 0;max-height:45dvh;overflow:auto;box-shadow:0 8px 20px #0005}
.graphics-card,#graphics-count,#graphics-detail,#graphics-title{scroll-margin-top:calc(var(--graphics-filter-height,110px) + 24px)}
.graphics-controls label,.graphics-preview-controls label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
.graphics-controls input,.graphics-controls select,.graphics-preview-controls select{font:14px Segoe UI,sans-serif;background:#101611;color:var(--ink);border:1px solid #52634b;border-radius:5px;padding:10px;min-height:42px;max-width:100%}
.graphics-search-label{flex:1;min-width:180px}.graphics-controls select{max-width:290px}.graphics-controls button{min-height:42px}
.graphics-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}.graphics-browse{grid-column:1;grid-row:1}.graphics-inspector{grid-column:2;grid-row:1}
.graphics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
.graphics-card{padding:0;overflow:hidden;text-align:left;min-width:0;background:#172019}
.graphics-card[aria-pressed=true]{outline:2px solid var(--lime);outline-offset:2px}
.graphics-thumb{height:132px;display:flex;align-items:center;justify-content:center;padding:10px;background:repeating-conic-gradient(#1b281e 0 25%,#24362a 0 50%) 0/16px 16px}
.graphics-thumb img{object-fit:contain;max-width:100%;max-height:100%;width:auto;height:auto;image-rendering:pixelated}
.graphics-card strong,.graphics-card small{display:block;padding:10px 12px 0;overflow-wrap:anywhere}
.graphics-card strong{font-size:15px;line-height:1.4}.graphics-card small{font-size:14px;color:var(--muted);padding-bottom:12px;line-height:1.5}
.graphics-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:10px}.graphics-card .graphics-chips{margin:0 12px 10px}.graphics-chips:not(:has(> :not([hidden]))){display:none}
.graphics-unused,.graphics-palette-variant,.graphics-resolution,.graphics-brightness{display:inline-block;padding:1px 6px;border:1px solid #9b8657;border-radius:10px;background:#302a1d;color:#f2dca8;font:11px/1.25 Segoe UI,sans-serif}
.graphics-palette-variant{border-color:#638c99;background:#1b3038;color:#c0e4ed}
.graphics-resolution{border-color:#6e8062;background:#253020;color:#d1e4c2}.graphics-brightness{border-color:#8d7b9e;background:#302739;color:#e4d1f4}
.graphics-inspector{position:sticky;top:calc(var(--graphics-filter-height,110px) + 24px);max-height:calc(100dvh - var(--graphics-filter-height,110px) - 40px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px;min-width:0}
.graphics-inspector h2{font-size:23px;line-height:1.4;overflow-wrap:anywhere}.graphics-inspector .eyebrow{margin-bottom:8px}
.graphics-preview-area{height:360px;overflow:auto;display:grid;align-items:safe center;justify-items:safe center;border:1px solid #52634b;background:repeating-conic-gradient(#1b281e 0 25%,#314737 0 50%) 0/20px 20px;margin:15px 0}
.graphics-preview-area[data-background=dark]{background:#080e0a}.graphics-preview-area[data-background=light]{background:#eee}
#graphics-preview{image-rendering:pixelated;object-fit:contain;max-width:100%;max-height:340px}
.graphics-preview-controls{display:flex;gap:10px;flex-wrap:wrap}.graphics-preview-controls label{flex:1;min-width:100px}
.graphics-inspector .actions{flex-wrap:wrap;gap:10px;margin:18px 0}.graphics-inspector .button{padding:11px 13px;gap:8px}
.graphics-inspector p{font-size:14px;color:var(--muted)}.graphics-inspector code{display:block;overflow-wrap:anywhere;white-space:normal;margin:10px 0;font-size:12px;color:var(--muted)}
.graphics-image-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0}
.graphics-image-nav button{font-size:12px}
.graphics-page button:disabled{opacity:.4;cursor:default}.graphics-page details{font-size:12px;color:var(--muted)}
@media(max-width:1150px){.site-header{gap:16px}.site-header nav{gap:15px}.brand span{display:none}.graphics-layout{grid-template-columns:minmax(0,1fr) 310px}}
@media(max-width:800px){.graphics-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.graphics-controls label{min-width:0}.graphics-controls input,.graphics-controls select{width:100%;min-width:0}.graphics-layout{display:flex;flex-direction:column}.graphics-inspector{position:static;width:100%;height:calc(100dvh - var(--graphics-filter-height,110px) - 40px);min-height:220px;max-height:600px;overflow:auto}.graphics-browse{width:100%}.graphics-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.graphics-preview-area{height:280px}.graphics-heading h1{font-size:32px}}
.graphics-controls label,.graphics-preview-controls label,.graphics-image-nav button,.graphics-page details{font-size:14px}
@media(prefers-reduced-motion:reduce){.graphics-page *{scroll-behavior:auto}}