/* Models: a leaderboard. Silver title on the grid, a filter bar, then one ruled table with context bars. */
.models-main{padding-bottom:140px}
.models-intro{padding:110px var(--gutter) 64px}
.models-intro-inner{max-width:var(--page);margin:0 auto}
.models-intro h1{font:700 clamp(48px,6vw,72px)/1.05 var(--display);letter-spacing:-.035em;background:linear-gradient(175deg,#fff 15%,#c4c4c4 55%,#7d7d7d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.models-updated{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:28px;color:var(--muted-2);font-size:14.5px}
.models-updated #price-updated{color:#cfcfcf;font-weight:500}
.models-updated button{display:grid;place-items:center;width:24px;height:24px;margin-left:2px;color:var(--muted);transition:color .2s}
.models-updated button:hover{color:#fff}
.models-updated svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.models-results{max-width:calc(var(--page) + 2 * 24px);margin:0 auto;padding:0 24px}
.models-filter-panel>summary{display:none}
.provider-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.provider-filter{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);color:#cfcfcf;font-size:13.5px;font-weight:500;transition:border-color .2s,color .2s,background .2s}
.provider-filter svg{width:16px;height:16px}
.provider-filter .provider-count{color:var(--muted-2);font-variant-numeric:tabular-nums}
.provider-filter:hover{border-color:#555;color:#fff}
.provider-filter[aria-pressed=true]{border-color:#fff;background:#fff;color:#000}
.provider-filter[aria-pressed=true] .provider-count{color:#555}

.models-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.capability-filters{display:flex;flex-wrap:wrap;margin:0;padding:0;border:0}
.capability-filters label{position:relative;cursor:pointer;margin-left:-1px}
.capability-filters label:first-of-type{margin-left:0}
.capability-filters input{position:absolute;opacity:0;pointer-events:none}
.capability-filters span{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border:1px solid var(--line-strong);color:#d4d4d4;font-size:14px;font-weight:500;transition:background .2s,color .2s}
.capability-filters label:hover span{background:#0d0d0d;color:#fff}
.capability-filters input:checked+span{position:relative;z-index:1;border-color:#fff;background:#fff;color:#000}
.capability-filters input:focus-visible+span{outline:1px solid #fff;outline-offset:3px}
.reset-filters{min-height:34px;padding:0 6px;color:var(--muted);font-size:13.5px;transition:color .2s}
.reset-filters:hover{color:#fff}
.models-sort{margin-left:auto}
.models-sort select{height:36px;padding:0 34px 0 12px;border:1px solid var(--line-strong);border-radius:0;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23bdbdbd' stroke-width='1.4'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:#ededed;font-size:14px;appearance:none;cursor:pointer}
.models-search input{width:240px;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:0;background:#000;color:#ededed;font-size:14px;outline:0}
.models-search input::placeholder{color:#6b6b6b}
.models-sort select:focus,.models-search input:focus{border-color:#8f8f8f}

/* Table */
.models-table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.models-table{min-width:900px}
.model-row{display:grid;grid-template-columns:56px minmax(220px,1.7fr) minmax(190px,1.2fr) repeat(3,minmax(92px,.62fr)) 84px;align-items:center;min-height:68px;border-bottom:1px solid var(--line);transition:background .2s}
.model-cards .model-row:hover{background:#080808}
.cell{padding:14px 12px;min-width:0}
.model-head{min-height:60px;color:var(--muted);font-size:12.5px;font-weight:500}
.model-head .cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:10px;color:var(--muted);font-size:12.5px;font-weight:500}
.model-head .cell-num{align-items:flex-end}
.model-head small{color:var(--muted-2);font-size:11.5px}
.cell-rank{text-align:center;color:#fff;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.model-head .cell-rank{align-items:center;color:var(--muted)}
.cell-model{display:flex;align-items:center;gap:12px}
.model-logo{display:grid;place-items:center;flex:none;width:24px;height:24px;color:#fff}
.model-logo svg{width:22px;height:22px}
.model-title{display:flex;flex-direction:column;min-width:0}
.model-title strong{overflow:hidden;color:#f2f2f2;font:700 15px/1.3 var(--display);text-overflow:ellipsis;white-space:nowrap}
.model-title small{overflow:hidden;color:var(--muted-2);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.model-feature{flex:none;padding:2px 7px;border:1px solid var(--line-strong);color:var(--muted);font-size:11.5px;white-space:nowrap}
.model-feature--free{border-color:#2f5a46;color:var(--mint)}
.cell-context{display:flex;align-items:center;gap:14px}
.model-head .cell-context{display:flex;flex-direction:column;align-items:flex-start}
.context-bar{position:relative;flex:1;max-width:200px;height:4px;background:#262626}
.context-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8a8a8a,#f2f2f2 85%,#cfcfcf)}
.cell-context b{flex:none;min-width:64px;color:#fff;font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.cell-num{text-align:right;color:#e6e6e6;font-size:15px;font-variant-numeric:tabular-nums}
.model-row>.cell-context{align-self:stretch;border-right:1px solid var(--line)}
.cell-dim{color:var(--muted)}
.cell-estimate::after{content:"*";margin-left:1px;color:var(--muted-2)}
.cell-auto{grid-column:span 3;color:var(--muted);font-size:14px;text-align:right}
.cell-go{text-align:right}
.model-try{color:#a3a3a3;font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .2s}
.model-try:hover{color:#fff}
.model-skeleton{height:68px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,#0f0f0f,transparent) 0 0/200% 100%;animation:model-skeleton 1.4s linear infinite}
@keyframes model-skeleton{to{background-position:-200% 0}}

.models-error{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:16px 20px;border:1px solid #4a2420;color:var(--danger);font-size:14.5px}
.models-error button{color:#fff;text-decoration:underline;text-underline-offset:4px}
.models-empty{padding:72px 0;text-align:center}
.models-empty h2{font-size:26px;font-weight:500;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.models-empty p{margin-top:10px;color:var(--muted)}
.models-empty .pill{margin-top:24px}
.models-more{display:flex;margin:32px auto 0}
.models-price-note{max-width:720px;margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.models-price-note h2{font-size:24px;font-weight:600;color:#f2f2f2}
.models-price-note p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.65}
.models-price-note a{display:inline-block;margin-top:20px;color:#fff;font-size:14.5px;font-weight:500}
.models-price-note a:hover{text-decoration:underline;text-underline-offset:5px}

@media(max-width:900px){
  .models-intro{padding:72px 20px 44px}
  .models-results{padding:0 20px}
  .models-filter-panel{margin-bottom:16px;border:1px solid var(--line)}
  .models-filter-panel>summary{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;cursor:pointer;list-style:none;color:#ededed;font-size:14.5px;font-weight:500}
  .models-filter-panel>summary::-webkit-details-marker{display:none}
  .models-filter-panel>summary span{position:relative;width:10px;height:10px}
  .models-filter-panel>summary span::before,.models-filter-panel>summary span::after{content:"";position:absolute;left:0;top:4.5px;width:10px;height:1px;background:currentColor}
  .models-filter-panel>summary span::after{transform:rotate(90deg)}
  .models-filter-panel[open]>summary span::after{transform:none}
  .models-filter-panel>:not(summary){margin-inline:14px}
  .models-toolbar{border-bottom:0;padding-bottom:14px}
  .models-sort{margin-left:0}
  .models-sort,.models-search,.models-sort select,.models-search input{width:100%}
}
@media(prefers-reduced-motion:reduce){.model-skeleton{animation:none}}