/* A complete static catalog, progressively enhanced with filtering and one live frame. */
.catalog-section { --catalog-color:var(--brand-blue); }
.catalog-js { display:none; }
.catalog-enhanced .catalog-js { display:flex; }
.catalog-overview { display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;padding-block:20px;border-block:1px solid var(--land-border);font-size:12px;color:var(--land-muted);margin-bottom:24px; }
.catalog-overview strong { color:var(--land-text);font-size:25px;font-weight:800;margin-inline-end:7px; }
.catalog-panel-choices { flex-wrap:wrap;gap:8px;margin-bottom:24px; }
.catalog-panel-choice { display:flex;align-items:center;gap:8px;padding:10px 14px;min-height:44px;border:1px solid var(--land-border);border-radius:10px;background:var(--land-surface);color:var(--land-text);font-size:12px;font-weight:650; }
.catalog-panel-dot { width:9px;height:9px;flex:0 0 9px;background:var(--catalog-color);border-radius:50%; }
.catalog-panel-choice[aria-pressed="true"] { border-color:var(--catalog-color);box-shadow:inset 0 -3px var(--catalog-color); }
.catalog-preview { display:block!important;border:1px solid var(--land-border);background:var(--land-surface);border-radius:16px;overflow:hidden;scroll-margin-top:110px;margin-bottom:30px; }
.catalog-preview.catalog-js { display:none!important; }
.catalog-enhanced .catalog-preview.catalog-js { display:block!important; }
.catalog-preview-toolbar { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;flex-wrap:wrap;border-bottom:1px solid var(--land-border); }
.catalog-preview-toolbar h3 { font-size:15px;line-height:1.8;margin:3px 0 0; }
.catalog-preview-toolbar .intro-text-link { flex-shrink:0; }
.catalog-device-choices { display:flex;gap:5px;padding:4px;border:1px solid var(--land-border);border-radius:10px;background:var(--land-surface-2); }
.catalog-device-choices button { min-height:36px;padding:6px 12px;border:0;border-radius:6px;background:transparent;color:var(--land-muted);font-size:12px; }
.catalog-device-choices button[aria-pressed="true"] { background:var(--land-surface);color:var(--land-text);box-shadow:0 2px 6px #10213b14; }
.catalog-preview-viewport { position:relative;width:100%;height:560px;overflow:hidden;background:var(--land-surface-2);direction:ltr; }
.catalog-preview-canvas { position:absolute;top:0;left:50%;width:1440px;height:900px;transform:translateX(-50%) scale(.8);transform-origin:top center; }
.catalog-preview-canvas iframe { display:block;width:100%;height:100%;border:0;background:#fff; }
.catalog-preview-status { margin:0;padding:12px 22px;font-size:12px;color:var(--land-muted);border-top:1px solid var(--land-border); }
.catalog-tools { flex-wrap:wrap;align-items:end;gap:12px;margin:24px 0 12px; }
.catalog-tools label { display:flex;flex-direction:column;gap:7px;color:var(--land-muted);font-size:12px; }
.catalog-search { flex:1 1 300px; }
.catalog-category { flex:0 1 230px; }
.catalog-tools input,.catalog-tools select { width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--land-border);border-radius:9px;background:var(--land-surface);color:var(--land-text);font:inherit; }
.catalog-tools input::placeholder { color:var(--land-muted);opacity:1; }
.catalog-tools .btn { min-height:46px;gap:0;background:var(--land-surface);border-color:var(--land-border);color:var(--land-text); }
.catalog-result-count { flex:1 0 100%;font-size:12px;color:var(--land-muted);margin:3px 0 0; }
.catalog-help,.catalog-footnote { color:var(--land-muted);font-size:12px;line-height:2; }
.catalog-help { margin:0 0 24px; }
.catalog-panel { border:1px solid var(--land-border);border-radius:14px;background:var(--land-surface);padding:20px;margin-top:14px; }
.catalog-panel > summary { font-size:16px;font-weight:750;cursor:pointer;min-height:44px; }
.catalog-enhanced .catalog-panel { padding:0;border:0;background:transparent; }
.catalog-enhanced .catalog-panel > summary { display:none; }
.catalog-panel-intro { display:flex;justify-content:space-between;gap:28px;align-items:center;border-inline-start:3px solid var(--catalog-color);padding:8px 22px;margin:22px 0; }
.catalog-panel-intro h3 { font-size:23px;line-height:1.8;margin:5px 0 8px; }
.catalog-panel-intro p { max-width:760px;font-size:13px;line-height:2.2;color:var(--land-muted);margin:0; }
.catalog-metrics { display:flex;flex-direction:column;gap:6px;flex:0 0 auto;font-size:12px;color:var(--land-muted); }
.catalog-metrics strong { font-size:23px;color:var(--land-text);margin-inline-end:6px; }
.catalog-highlights { display:flex;gap:8px 18px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 30px; }
.catalog-highlights li { display:flex;gap:7px;align-items:center;font-size:12px;padding:6px 10px;border:1px solid var(--land-border);border-radius:8px;background:var(--land-surface); }
.catalog-group { margin-top:28px; }
.catalog-group-heading { display:flex;align-items:center;gap:14px;margin-bottom:14px; }
.catalog-group-heading h4 { margin:0;font-size:16px; }
.catalog-group-heading > span { font-size:11px;color:var(--land-muted); }
.catalog-page-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.catalog-page { display:flex;align-items:flex-start;gap:12px;min-width:0;padding:20px;border:1px solid var(--land-border);border-radius:12px;background:var(--land-surface);transition:border-color .2s,box-shadow .2s; }
.catalog-page:hover,.catalog-page[aria-current="page"] { border-color:var(--catalog-color);box-shadow:0 6px 20px -12px #10213b40; }
.catalog-page[aria-current="page"] { box-shadow:inset 0 -3px var(--catalog-color); }
.catalog-page-icon { display:grid;place-items:center;flex:0 0 36px;width:36px;height:38px;border-radius:10px;background:var(--land-surface-2);font-size:22px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.catalog-page-copy { display:flex;flex-direction:column;align-self:stretch;min-width:0; }
.catalog-page h5 { font-size:14px;line-height:1.9;margin:0 0 8px;color:var(--land-text); }
.catalog-page p { font-size:12px;line-height:2.1;margin:0 0 14px;color:var(--land-muted); }
.catalog-page-action { font-size:11px;font-weight:700;color:var(--land-primary);margin-top:auto; }
.catalog-page-action > span { margin-inline-start:8px; }
.catalog-empty { padding:28px;border:1px dashed var(--land-border);border-radius:12px;font-size:13px;color:var(--land-muted); }
.catalog-footnote { margin:28px 0 0; }
.catalog-section [hidden] { display:none!important; }
.catalog-section :focus-visible { outline:2px solid var(--land-primary);outline-offset:4px; }
@media(max-width:1023px) {
 .catalog-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .catalog-panel-intro { align-items:flex-start;flex-direction:column;gap:15px; }
 .catalog-metrics { flex-direction:row;gap:22px;flex-wrap:wrap; }
}
@media(max-width:639px) {
 .catalog-overview { gap:12px 20px; }
 .catalog-overview strong { font-size:22px; }
 .catalog-panel-choice { padding:8px 10px;font-size:11px; }
 .catalog-preview { scroll-margin-top:90px; }
 .catalog-preview-toolbar { padding:14px;gap:10px; }
 .catalog-preview-toolbar > div:first-child { flex-basis:100%; }
 .catalog-device-choices { gap:2px; }
 .catalog-device-choices button { padding:6px 9px;font-size:11px; }
 .catalog-preview-toolbar .intro-text-link { font-size:11px;gap:6px; }
 .catalog-category { flex:1 1 100%; }
 .catalog-tools .btn { width:100%; }
 .catalog-panel-intro { padding-inline:14px; }
 .catalog-panel-intro h3 { font-size:20px; }
 .catalog-page-grid { grid-template-columns:minmax(0,1fr); }
 .catalog-page { padding:18px; }
 .catalog-highlights { gap:8px; }
 .catalog-highlights li { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .catalog-page { transition:none; } }