@media (min-width: 0px) {
    .models { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .models .model { display:grid; grid-template-columns: minmax(148px,34%) minmax(0,1fr); gap:20px; padding:12px; min-height:216px; box-sizing:border-box; border-radius:16px; transition:border-color .18s ease,background .18s ease; }
    .models .model:hover { transform:none; border-color:#608f7b; }
    .models .model.selected { border-color:#7cf7ca; background:#14201c; box-shadow:none; }
    .models .model:focus-visible { outline:2px solid #b4ffe2; outline-offset:3px; }
    .catalog-copy { min-width:0; padding:16px 8px 12px 0; display:flex; flex-direction:column; align-items:flex-start; }
    .models .model-type { font-size:11px; margin-bottom:10px; padding-right:76px; line-height:1.4; color:#b8c8bf; }
    .models .model-name { font-size:20px; line-height:1.18; letter-spacing:-.025em; margin-bottom:10px; max-width:100%; }
    .models .model-desc { font-size:14px; line-height:1.5; color:#c0c6ce; }
    .models .model-trial { font-size:12px; margin:0 0 8px; }
    .models .model .badge { right:16px; top:16px; font-size:9px; letter-spacing:.04em; }
    .catalog-media { position:relative; overflow:hidden; border-radius:10px; background:#1d252a; align-self:stretch; min-height:192px; }
    .catalog-media img, .catalog-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .catalog-media img { object-fit:contain; filter:none; }
    .catalog-pending { height:100%; min-height:192px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; box-sizing:border-box; text-align:center; color:#d5eee3; font-weight:600; }
    .catalog-pending span { font-size:12px; font-weight:400; line-height:1.5; color:#bac5c0; }
    .catalog-media video { opacity:0; transition:opacity .12s ease; }
    .catalog-media.is-playing video { opacity:1; }
    .catalog-media-note { position:absolute; left:8px; bottom:8px; z-index:2; color:#fff; font-size:10px; font-weight:500; padding:5px 7px; border-radius:5px; background:rgba(0,0,0,.78); line-height:1.3; pointer-events:none; }
    .catalog-play { position:absolute; left:50%; top:50%; translate:-50% -50%; width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid #ffffffa6; border-radius:50%; background:#122019db; color:white; cursor:pointer; z-index:3; }
    .catalog-play svg { width:18px; height:18px; fill:currentColor; }
    .catalog-play:focus-visible { outline:3px solid #b4ffe2; outline-offset:4px; }
    .catalog-media.is-playing .catalog-play { opacity:0; }
    .catalog-media.is-playing:focus-within .catalog-play, .catalog-media.is-playing:hover .catalog-play { opacity:1; }
    .catalog-hint { margin:0 0 18px; font-size:13px; line-height:1.5; color:#aeb9bf; max-width:700px; }
    .models .model.disabled .catalog-media { filter:grayscale(.6); }
}

@media (min-width:641px) and (max-width:1023px) {
 .models { gap:12px; }
 .models .model { grid-template-columns:100px minmax(0,1fr); gap:12px; padding:10px; min-height:210px; }
 .catalog-copy { padding:24px 0 6px; }
 .catalog-media { min-height:0; height:112px; align-self:center; }
 .models .model-name { font-size:17px; line-height:1.23; }
 .models .model-desc { font-size:13px; }
 .models .model-type { padding-right:0; margin-bottom:7px; }
 .models .model .badge { top:10px; right:10px; }
 .catalog-media-note { font-size:8px; left:4px; bottom:4px; padding:3px 4px; }
}
@media (max-width:640px) {
 .models { grid-template-columns:minmax(0,1fr); gap:12px; }
 .models .model { grid-template-columns:100px minmax(0,1fr); gap:12px; padding:10px; min-height:190px; }
 .catalog-copy { padding:22px 0 6px; }
 .catalog-media { min-height:0; height:112px; align-self:center; }
 .models .model-name { font-size:17px; line-height:1.23; margin-bottom:8px; }
 .models .model-desc { font-size:13px; line-height:1.45; }
 .models .model-type { padding-right:0; margin-bottom:7px; font-size:10px; }
 .models .model-trial { font-size:11px; }
 .models .model .badge { top:10px; right:10px; font-size:8px; }
 .catalog-media-note { font-size:8px; left:4px; bottom:4px; padding:3px 4px; }
 .catalog-hint { font-size:12px; margin-bottom:14px; }
}
@media (max-width:359px) {
 .models .model { grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; }
 .catalog-media { width:100%; height:auto; aspect-ratio:1/1; }
 .catalog-copy { padding:0; }
 .models .model .badge { position:static; align-self:flex-end; margin-bottom:8px; }
 .catalog-media-note { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .models .model { transition:none; }
}