:root { color-scheme: dark; --surface: #1a202a; --edge: #ffffff24; --text: #f4f5f7; --muted: #aeb8c7; --accent: #c1dcff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0, #22334d, #0e1117 48%); color: var(--text); font: 15px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
main { width: min(1040px, calc(100% - 36px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .15em; }
h1 { margin: 8px 0 12px; font-size: clamp(32px, 7vw, 64px); line-height: 1; }
.intro { max-width: 720px; color: var(--muted); line-height: 1.8; }
#catalog-status { display: block; margin: 36px 0 14px; color: var(--muted); }
#model-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.model-card { min-height: 180px; padding: 24px; color: inherit; text-decoration: none; background: #151b24dc; border: 1px solid var(--edge); border-radius: 18px; transition: transform .18s ease, border-color .18s ease; }
.model-card:hover, .model-card:focus-visible { transform: translateY(-3px); border-color: #c1dcff88; outline: none; }
.model-card h2 { margin: 0 0 12px; font-size: 22px; }
.model-card p { min-height: 52px; color: var(--muted); line-height: 1.7; }
.model-card small { color: var(--accent); }
footer { margin-top: 42px; color: var(--muted); font-size: 12px; }