@import 'tailwindcss';@plugin '@tailwindcss/typography'; :root { --header-height: 56px; --provider-filter-height: 42px; --status-height: 32px; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace; --color-brand: hsl(0 0% 10%); --color-background: #fff; --color-alpha-background: rgb(255 255 255 / 0.86); --color-border: #ddd; --color-surface: #f3f3f1; --color-surface-strong: #e9e8e4; --color-text: #272727; --color-text-secondary: #636363; --color-text-tertiary: #999; --color-text-invert: #fff;} /* matte black dark mode (krisyotam.com palette) */html.dark { --color-background: hsl(0 0% 7%); --color-alpha-background: hsl(0 0% 7% / 0.86); --color-border: hsl(0 0% 17%); --color-surface: hsl(0 0% 9%); --color-surface-strong: hsl(0 0% 5%); --color-text: hsl(0 0% 98%); --color-text-secondary: hsl(0 0% 70%); --color-text-tertiary: hsl(0 0% 45%); --color-text-invert: hsl(0 0% 7%); --color-brand: hsl(0 0% 98%);} /* system preference fallback when no explicit theme class is set */@media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --color-background: hsl(0 0% 7%); --color-alpha-background: hsl(0 0% 7% / 0.86); --color-border: hsl(0 0% 17%); --color-surface: hsl(0 0% 9%); --color-surface-strong: hsl(0 0% 5%); --color-text: hsl(0 0% 98%); --color-text-secondary: hsl(0 0% 70%); --color-text-tertiary: hsl(0 0% 45%); --color-text-invert: hsl(0 0% 7%); --color-brand: hsl(0 0% 98%); }} * { box-sizing: border-box;} html,body,#svelte { height: 100%;} html { color-scheme: light dark; background: var(--color-background);} body { margin: 0; color: var(--color-text); background: var(--color-background); font-family: Rubik, Aptos, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden;} button,input { font: inherit;} a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--color-text-tertiary); text-underline-offset: 0.2em;} .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;} .page-shell { height: 100vh; overflow: hidden; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-border) 36%, transparent) 1px, transparent 1px ) 0 0 / 64px 64px, var(--color-background);} .app-header { height: var(--header-height); position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background);} .header-left,.header-right,.status-strip { display: flex; align-items: center; min-width: 0;} .header-left { flex: 1 1 auto; align-items: baseline;} .header-right { flex: 0 0 auto; gap: 0.75rem;} .app-header h1 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; text-transform: uppercase;} .app-header p { margin: 0; min-width: 0; overflow: hidden; color: var(--color-text-tertiary); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap;} .slash { display: block; width: 0; height: 0.8rem; margin: 0 0.55rem; border-right: 2px solid var(--color-border); transform: rotate(20deg); transform-origin: top center;} .icon-link,.source-link { color: var(--color-text-secondary); text-decoration: none; text-transform: uppercase;} .icon-link { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;} .source-link { font-size: 0.78rem; font-family: var(--font-mono);} .icon-link:hover,.source-link:hover { color: var(--color-text);} .search-container { position: relative; display: block; width: clamp(14rem, 26vw, 28rem);} .search-container input { width: 100%; height: 2rem; padding: 0.4rem 2.8rem 0.4rem 0.65rem; border: 1px solid var(--color-border); border-radius: 0.25rem; outline: none; background: transparent; color: var(--color-text); font-size: 0.82rem; line-height: 1;} .search-container input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);} .search-container input:disabled { cursor: wait; color: var(--color-text-tertiary);} .search-shortcut { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); pointer-events: none;} .copy-button { cursor: pointer; border: 0;} .provider-filter-bar,.status-strip { position: fixed; left: 0; right: 0; z-index: 25; display: flex; align-items: center; white-space: nowrap;} .provider-filter-bar { top: var(--header-height); height: var(--provider-filter-height); gap: 0.4rem; overflow: visible; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background);} .filter-label { margin-right: 0.25rem; color: var(--color-text-tertiary); font-size: 0.68rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;} .provider-chip,.provider-picker-trigger { height: 1.75rem; border: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text-secondary); font-size: 0.72rem; font-family: var(--font-mono); line-height: 1;} .provider-chip,.provider-picker-trigger { cursor: pointer; padding: 0 0.65rem;} .provider-chip:hover,.provider-chip.active,.provider-picker-trigger:hover { border-color: color-mix(in srgb, var(--color-brand) 65%, var(--color-border)); background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-text);} .provider-chip.active { border-left: 3px solid var(--color-brand);} .provider-picker { position: relative; flex: 0 0 auto;} .provider-picker-scrim { position: fixed; inset: 0; z-index: 40; cursor: default; border: 0; background: transparent;} .provider-picker-menu { position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 50; width: min(28rem, calc(100vw - 1.5rem)); border: 1px solid var(--color-border); background: var(--color-background); box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.24);} .provider-picker-search { width: 100%; height: 2.5rem; padding: 0 0.75rem; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; outline: none; background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-size: 0.82rem;} .provider-picker-search:focus { background: var(--color-background); box-shadow: inset 3px 0 0 var(--color-brand);} .provider-picker-options { max-height: min(30rem, calc(100vh - 10rem)); overflow: auto; padding: 0.25rem;} .provider-option { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.6rem; cursor: pointer; border: 0; border-radius: 0; background: transparent; color: var(--color-text); font-size: 0.86rem; line-height: 1; text-align: left;} .provider-option:hover,.provider-option:focus-visible,.provider-option.is-highlighted { background: var(--color-brand); color: var(--color-text-invert); outline: none;} .provider-option small { flex: 0 0 auto; color: currentColor; opacity: 0.62; font-family: var(--font-mono); font-size: 0.68rem;} .provider-empty { margin: 0; padding: 1rem 0.75rem; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 0.78rem;} .status-strip { top: calc(var(--header-height) + var(--provider-filter-height)); height: var(--status-height); gap: 0.8rem; overflow: hidden; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase;} .status-strip span:not(:last-child)::after { content: '/'; margin-left: 0.8rem; color: var(--color-border);} .performance-note { color: var(--color-brand);} .table-viewport { position: fixed; inset: calc(var(--header-height) + var(--provider-filter-height) + var(--status-height)) 0 0; overflow: auto; background: var(--color-background);} .model-grid { display: grid; grid-template-columns: 180px 260px 150px 300px 140px 140px 140px 150px 170px 175px 170px 130px 150px 105px 105px 112px 112px 170px 180px 130px 165px 130px 115px 130px 140px; min-width: max-content;} .header-row { position: sticky; top: 0; z-index: 20; background: var(--color-alpha-background);} .header-cell { display: flex; min-width: 0; min-height: 55px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0.65rem 0.75rem; border: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.1; text-align: left; text-transform: uppercase; white-space: nowrap;} .header-cell:hover { background: color-mix(in srgb, var(--color-brand) 10%, transparent); color: var(--color-text);} .header-label { display: flex; gap: 0.25rem; align-items: center;} .header-description { display: block; margin-top: 0.35rem; color: var(--color-text-tertiary); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.04em;} .sort-indicator { color: var(--color-brand); font-family: var(--font-mono);} .virtual-body { min-width: max-content;} .virtual-spacer { min-width: 1px; pointer-events: none;} Lines 1–500 of 731. Load more
@import 'tailwindcss'; @plugin '@tailwindcss/typography'; :root { --header-height: 56px; --provider-filter-height: 42px; --status-height: 32px; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace; --color-brand: hsl(0 0% 10%); --color-background: #fff; --color-alpha-background: rgb(255 255 255 / 0.86); --color-border: #ddd; --color-surface: #f3f3f1; --color-surface-strong: #e9e8e4; --color-text: #272727; --color-text-secondary: #636363; --color-text-tertiary: #999; --color-text-invert: #fff; } /* matte black dark mode (krisyotam.com palette) */ html.dark { --color-background: hsl(0 0% 7%); --color-alpha-background: hsl(0 0% 7% / 0.86); --color-border: hsl(0 0% 17%); --color-surface: hsl(0 0% 9%); --color-surface-strong: hsl(0 0% 5%); --color-text: hsl(0 0% 98%); --color-text-secondary: hsl(0 0% 70%); --color-text-tertiary: hsl(0 0% 45%); --color-text-invert: hsl(0 0% 7%); --color-brand: hsl(0 0% 98%); } /* system preference fallback when no explicit theme class is set */ @media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --color-background: hsl(0 0% 7%); --color-alpha-background: hsl(0 0% 7% / 0.86); --color-border: hsl(0 0% 17%); --color-surface: hsl(0 0% 9%); --color-surface-strong: hsl(0 0% 5%); --color-text: hsl(0 0% 98%); --color-text-secondary: hsl(0 0% 70%); --color-text-tertiary: hsl(0 0% 45%); --color-text-invert: hsl(0 0% 7%); --color-brand: hsl(0 0% 98%); } } * { box-sizing: border-box; } html, body, #svelte { height: 100%; } html { color-scheme: light dark; background: var(--color-background); } body { margin: 0; color: var(--color-text); background: var(--color-background); font-family: Rubik, Aptos, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden; } button, input { font: inherit; } a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--color-text-tertiary); text-underline-offset: 0.2em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .page-shell { height: 100vh; overflow: hidden; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-border) 36%, transparent) 1px, transparent 1px ) 0 0 / 64px 64px, var(--color-background); } .app-header { height: var(--header-height); position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background); } .header-left, .header-right, .status-strip { display: flex; align-items: center; min-width: 0; } .header-left { flex: 1 1 auto; align-items: baseline; } .header-right { flex: 0 0 auto; gap: 0.75rem; } .app-header h1 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; } .app-header p { margin: 0; min-width: 0; overflow: hidden; color: var(--color-text-tertiary); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; } .slash { display: block; width: 0; height: 0.8rem; margin: 0 0.55rem; border-right: 2px solid var(--color-border); transform: rotate(20deg); transform-origin: top center; } .icon-link, .source-link { color: var(--color-text-secondary); text-decoration: none; text-transform: uppercase; } .icon-link { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; } .source-link { font-size: 0.78rem; font-family: var(--font-mono); } .icon-link:hover, .source-link:hover { color: var(--color-text); } .search-container { position: relative; display: block; width: clamp(14rem, 26vw, 28rem); } .search-container input { width: 100%; height: 2rem; padding: 0.4rem 2.8rem 0.4rem 0.65rem; border: 1px solid var(--color-border); border-radius: 0.25rem; outline: none; background: transparent; color: var(--color-text); font-size: 0.82rem; line-height: 1; } .search-container input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent); } .search-container input:disabled { cursor: wait; color: var(--color-text-tertiary); } .search-shortcut { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); pointer-events: none; } .copy-button { cursor: pointer; border: 0; } .provider-filter-bar, .status-strip { position: fixed; left: 0; right: 0; z-index: 25; display: flex; align-items: center; white-space: nowrap; } .provider-filter-bar { top: var(--header-height); height: var(--provider-filter-height); gap: 0.4rem; overflow: visible; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background); } .filter-label { margin-right: 0.25rem; color: var(--color-text-tertiary); font-size: 0.68rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .provider-chip, .provider-picker-trigger { height: 1.75rem; border: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text-secondary); font-size: 0.72rem; font-family: var(--font-mono); line-height: 1; } .provider-chip, .provider-picker-trigger { cursor: pointer; padding: 0 0.65rem; } .provider-chip:hover, .provider-chip.active, .provider-picker-trigger:hover { border-color: color-mix(in srgb, var(--color-brand) 65%, var(--color-border)); background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-text); } .provider-chip.active { border-left: 3px solid var(--color-brand); } .provider-picker { position: relative; flex: 0 0 auto; } .provider-picker-scrim { position: fixed; inset: 0; z-index: 40; cursor: default; border: 0; background: transparent; } .provider-picker-menu { position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 50; width: min(28rem, calc(100vw - 1.5rem)); border: 1px solid var(--color-border); background: var(--color-background); box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.24); } .provider-picker-search { width: 100%; height: 2.5rem; padding: 0 0.75rem; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; outline: none; background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-size: 0.82rem; } .provider-picker-search:focus { background: var(--color-background); box-shadow: inset 3px 0 0 var(--color-brand); } .provider-picker-options { max-height: min(30rem, calc(100vh - 10rem)); overflow: auto; padding: 0.25rem; } .provider-option { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.6rem; cursor: pointer; border: 0; border-radius: 0; background: transparent; color: var(--color-text); font-size: 0.86rem; line-height: 1; text-align: left; } .provider-option:hover, .provider-option:focus-visible, .provider-option.is-highlighted { background: var(--color-brand); color: var(--color-text-invert); outline: none; } .provider-option small { flex: 0 0 auto; color: currentColor; opacity: 0.62; font-family: var(--font-mono); font-size: 0.68rem; } .provider-empty { margin: 0; padding: 1rem 0.75rem; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 0.78rem; } .status-strip { top: calc(var(--header-height) + var(--provider-filter-height)); height: var(--status-height); gap: 0.8rem; overflow: hidden; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; } .status-strip span:not(:last-child)::after { content: '/'; margin-left: 0.8rem; color: var(--color-border); } .performance-note { color: var(--color-brand); } .table-viewport { position: fixed; inset: calc(var(--header-height) + var(--provider-filter-height) + var(--status-height)) 0 0; overflow: auto; background: var(--color-background); } .model-grid { display: grid; grid-template-columns: 180px 260px 150px 300px 140px 140px 140px 150px 170px 175px 170px 130px 150px 105px 105px 112px 112px 170px 180px 130px 165px 130px 115px 130px 140px; min-width: max-content; } .header-row { position: sticky; top: 0; z-index: 20; background: var(--color-alpha-background); } .header-cell { display: flex; min-width: 0; min-height: 55px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0.65rem 0.75rem; border: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.1; text-align: left; text-transform: uppercase; white-space: nowrap; } .header-cell:hover { background: color-mix(in srgb, var(--color-brand) 10%, transparent); color: var(--color-text); } .header-label { display: flex; gap: 0.25rem; align-items: center; } .header-description { display: block; margin-top: 0.35rem; color: var(--color-text-tertiary); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.04em; } .sort-indicator { color: var(--color-brand); font-family: var(--font-mono); } .virtual-body { min-width: max-content; } .virtual-spacer { min-width: 1px; pointer-events: none; }