:root { color-scheme:dark;--bg:#101012;--surface:#18181b;--raised:#222225;--border:#3d3d45;--control-border:#73737f;--text:#f7f7f8;--muted:#b8b8c1;--blue:#1688ff;--action:#0869c7;--focus:#79bcff;font-family:Manrope,'Segoe UI',sans-serif;background:var(--bg);color:var(--text); }
* { box-sizing:border-box; }
body { margin:0;min-width:320px; }
body.dialog-open { overflow:hidden; }
button,input,select { font:inherit;color:inherit; }
button,a,summary { touch-action:manipulation; }
button,select,summary { cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit;text-underline-offset:4px; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--focus);outline-offset:4px; }
.visually-hidden { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.skip-link { position:fixed;z-index:20;top:12px;left:12px;transform:translateY(-180%);padding:14px 20px;background:var(--action);border-radius:6px; }
.skip-link:focus { transform:none; }
.library-header { max-width:1344px;min-height:85px;margin:auto;display:flex;align-items:center;gap:28px;padding:0 32px;border-bottom:1px solid var(--border); }
.brand { display:inline-flex;align-items:center;gap:7px;font-size:25px;font-weight:750;letter-spacing:-1.2px;text-decoration:none;white-space:nowrap; }
.brand span { color:var(--blue);font-size:29px; }
.header-location { color:var(--muted);font-size:13px; }
.back-link { margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;font-weight:600;text-decoration:none; }
.back-link:hover { color:#91c1ff; }
main,.library-footer { width:calc(100% - 64px);max-width:1280px;margin:auto; }
.library-intro { padding:44px 0 30px;max-width:820px; }
.eyebrow { font-size:11px;letter-spacing:1.6px;color:#91c1ff;font-weight:600; }
h1 { font-size:38px;line-height:1.2;letter-spacing:-1.3px;margin:10px 0 12px;font-weight:600; }
.intro-description { font-size:17px;line-height:1.6; }
.intro-note { margin:12px 0 20px;color:var(--muted);font-size:14px;line-height:1.65;max-width:770px; }
.button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 16px;border:1px solid transparent;border-radius:6px;text-align:center;text-decoration:none;font-size:14px;font-weight:500;line-height:1.35;transition:background .16s,border-color .16s; }
.button-primary { background:var(--action);color:#fff; }
.button-primary:hover { background:#075aaa; }
.button-secondary { background:transparent;border-color:var(--control-border);color:var(--text); }
.button-secondary:hover { background:#29292e; }
.button:disabled { background:#252529;border-color:#666670;color:#c4c4cc; }
.sources-summary { border:1px solid var(--border);border-radius:10px;background:var(--surface); }
.sources-summary summary { min-height:58px;padding:16px 20px;font-size:14px; }
.sources-summary summary::marker { color:#91c1ff; }
#sources-count { color:var(--muted);margin-left:18px;font-size:13px; }
.sources-note { padding:0 20px 16px;font-size:13px;line-height:1.6;color:var(--muted); }
.sources-list { list-style:none;margin:0;padding:0 20px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.sources-list li { padding:14px;border:1px solid var(--border);border-radius:6px;line-height:1.5; }
.source-name { display:block;font-size:14px; }
.source-status { display:block;margin-top:5px;font-size:12px;color:var(--muted); }
.catalog { padding:28px 0 48px; }
.catalog-controls { display:grid;grid-template-columns:minmax(0,1fr) 260px auto;align-items:end;gap:16px; }
.catalog-controls label { display:block;font-size:13px;margin-bottom:8px; }
.catalog-controls input,.catalog-controls select { display:block;width:100%;height:48px;min-width:0;border:1px solid var(--control-border);border-radius:6px;padding:0 14px;background:var(--surface); }
.catalog-controls input::placeholder { color:#a7a7b2; }
.catalog-controls .button { height:48px; }
.result-status { min-height:22px;margin:22px 0 16px;font-size:13px;line-height:1.6;color:var(--muted); }
.catalog-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px; }
.design-card { display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--surface); }
.design-picture { display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;width:100%;overflow:hidden;background:#222225; }
.design-picture img { display:block;width:100%;height:100%;object-fit:cover;object-position:top; }
.missing-picture { padding:26px;text-align:center;max-width:300px;font-size:14px;line-height:1.6;color:var(--muted); }
.card-body { flex:1;display:flex;flex-direction:column;padding:18px; }
.card-source { font-size:12px;color:#91c1ff;line-height:1.5; }
.design-card h3 { margin-top:7px;font-size:19px;font-weight:600;line-height:1.4;overflow-wrap:anywhere; }
.card-description { margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.card-meta { margin:12px 0 16px;font-size:12px;line-height:1.6;color:var(--muted); }
.card-actions { margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.card-actions .button { width:100%;height:52px;padding:8px; }
.selection-note { margin-top:10px;color:var(--muted);font-size:12px;line-height:1.5; }
.load-more-container { display:flex;justify-content:center;padding-top:26px; }
.notice,.empty-state { padding:28px;border:1px solid var(--border);border-radius:10px;line-height:1.6;background:var(--surface); }
.notice { margin-bottom:20px; }
.notice .button { margin-top:14px; }
.empty-state h3 { font-size:19px;margin-bottom:10px; }
.empty-state p { color:var(--muted); }
.library-footer { padding:24px 0 32px;border-top:1px solid var(--border);font-size:13px;color:var(--muted); }
#design-overview { width:min(1150px,calc(100% - 48px));max-height:90dvh;padding:0;border:1px solid var(--control-border);border-radius:12px;background:var(--surface);color:var(--text);overflow:auto; }
#design-overview::backdrop { background:rgb(0 0 0 / .76); }
.overview-header { position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:var(--surface);border-bottom:1px solid var(--border); }
.overview-header h2 { font-size:22px;line-height:1.4;overflow-wrap:anywhere; }
.overview-header .button { flex-shrink:0; }
.overview-status { padding:16px 24px 0;color:var(--muted);font-size:13px;line-height:1.6; }
.overview-status:empty { display:none; }
.overview-content { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);gap:26px;padding:24px; }
.overview-image { margin:0;min-width:0;background:#222225;border:1px solid var(--border);border-radius:6px;overflow:hidden;align-self:start; }
.overview-image .design-picture { aspect-ratio:auto;min-height:220px; }
.overview-image img { height:auto;max-height:none;object-fit:contain; }
.overview-image figcaption { padding:14px;font-size:12px;line-height:1.6;color:var(--muted); }
.overview-details { min-width:0;font-size:14px;line-height:1.65; }
.overview-details h3 { font-size:16px;margin:22px 0 8px; }
.overview-details p { color:var(--muted);overflow-wrap:anywhere; }
.overview-details dl { margin:20px 0; }
.overview-details dt { margin-top:14px;font-size:12px;color:var(--muted); }
.overview-details dd { margin:3px 0 0; }
.overview-details .button { width:100%;margin-top:18px;min-height:52px; }
.source-description { margin:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted);font-size:13px;line-height:1.6; }
.source-description summary { padding:12px 0;cursor:pointer;min-height:44px; }
.source-description-content { padding:0 0 14px;overflow-wrap:anywhere; }
.source-description-content ul { padding-left:20px;margin:10px 0 0; }
.overview-retry-container { padding:0 24px 24px; }
@media(max-width:1000px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.sources-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.header-location { display:none; }.overview-content { grid-template-columns:minmax(0,1fr) minmax(240px,.85fr); } }
@media(max-width:640px) { .library-header { padding:0 18px;min-height:72px;gap:12px; }.brand { font-size:22px; }.back-link { font-size:12px;max-width:125px;line-height:1.5; }.back-link span { display:none; }main,.library-footer { width:calc(100% - 36px); }.library-intro { padding:30px 0 24px; }h1 { font-size:30px;letter-spacing:-.8px; }.intro-description { font-size:16px; }.intro-note { font-size:13px; }.catalog-controls { grid-template-columns:minmax(0,1fr) 100px;gap:14px 12px; }.search-control { grid-column:1/-1; }.catalog { padding-top:24px; }.catalog-grid,.sources-list { grid-template-columns:minmax(0,1fr); }.catalog-grid { gap:18px; }.sources-summary summary { padding:16px; }#sources-count { display:block;margin:6px 0 0 14px; }.sources-list { padding:0 16px 16px; }.sources-note { padding:0 16px 16px; }.card-body { padding:17px; }.card-actions .button { height:52px; }.overview-content { grid-template-columns:minmax(0,1fr);padding:18px;gap:20px; }#design-overview { width:calc(100% - 20px);max-height:94dvh; }.overview-header { padding:14px 18px;gap:12px; }.overview-header h2 { font-size:19px; }.overview-header .button { font-size:12px;padding:10px; }.overview-status { padding:14px 18px 0; }.overview-image img { max-height:55dvh;object-fit:contain;object-position:top; }.overview-image .design-picture { min-height:180px; }.overview-details h3 { margin-top:18px; }.overview-retry-container { padding:0 18px 18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }
@media(prefers-contrast:more) { :root { --border:#898994;--control-border:#aaaab4;--muted:#e0e0e7; }.design-card,.sources-summary,.sources-list li { border-width:2px; } }
@media(forced-colors:active) { .button,.design-card,.sources-summary,.sources-list li,input,select,#design-overview { border:1px solid ButtonText; }:focus-visible { outline:3px solid Highlight; }.button-primary { color:ButtonText;background:ButtonFace; }.overview-header { background:Canvas; }.design-picture { background:Canvas; } }