:root { --header-height: 56px; --artist-filter-height: 42px; --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;} @media (prefers-color-scheme: dark) { :root { --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,body > div { 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;} button { cursor: pointer;} button:disabled { cursor: wait; opacity: 0.55;} a { color: inherit; text-decoration: none;} .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;} .search-container { position: relative; display: block; width: clamp(14rem, 28vw, 30rem);} .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-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;} .search-button,.source-link { color: var(--color-text-secondary); text-decoration: none; text-transform: uppercase;} .search-button { height: 2rem; padding: 0 0.75rem; border: 1px solid var(--color-border); background: transparent; font-size: 0.78rem; font-family: var(--font-mono);} .search-button:hover { border-color: var(--color-brand); color: var(--color-text);} .artist-bar,.filter-bar,.status-strip { position: fixed; left: 0; right: 0; z-index: 25; display: flex; align-items: center; white-space: nowrap;} .artist-bar { top: var(--header-height); height: var(--artist-filter-height); gap: 0.4rem; overflow-x: auto; overflow-y: hidden; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background);} .filter-bar { top: calc(var(--header-height) + var(--artist-filter-height)); height: var(--filter-height); gap: 0.4rem; overflow-x: auto; overflow-y: hidden; 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;} .type-label { margin-left: 0.5rem;} .provider-chip { height: 1.75rem; padding: 0 0.65rem; 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 span { color: var(--color-text-tertiary);} .provider-chip:hover,.provider-chip.active { 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);} .status-strip { top: calc( var(--header-height) + var(--artist-filter-height) + var(--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);} .content-viewport { position: fixed; inset: calc( var(--header-height) + var(--artist-filter-height) + var(--filter-height) + var(--status-height) ) 0 0; overflow: auto; background: var(--color-background);} .artist-summary { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.4rem 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background);} .eyebrow { margin: 0 0 0.35rem; color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase;} .artist-summary h2 { margin: 0; font-size: clamp(2.4rem, 8vw, 6.4rem); line-height: 0.86; letter-spacing: -0.08em; text-transform: uppercase;} .tag-list { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.35rem; max-width: 32rem;} .tag-list span,.modality { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-mono); text-transform: uppercase;} .tag-list span { height: 1.6rem; padding: 0 0.5rem; font-size: 0.68rem;} .discography-table { min-width: max-content;} .release-grid { display: grid; grid-template-columns: 110px minmax(420px, 1.2fr) 150px 160px minmax( 320px, 0.8fr ); min-width: 1160px;} .header-row { position: sticky; top: 0; z-index: 20; background: var(--color-alpha-background);} .header-cell { display: flex; min-width: 0; min-height: 55px; align-items: center; padding: 0.65rem 0.75rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;} .release-row { height: 52px; align-items: stretch; background: var(--color-background); contain: layout style;} .release-row:hover { z-index: 2; background: color-mix( in srgb, var(--color-brand) 8%, var(--color-background) );} .cell { display: flex; min-width: 0; align-items: center; gap: 0.4rem; overflow: hidden; padding: 0 0.75rem; border-right: 1px solid color-mix(in srgb, var(--color-border) 56%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent); color: var(--color-text-tertiary); white-space: nowrap; text-overflow: ellipsis;} .cell.strong { color: var(--color-text);} .cell:not(.flags) { overflow: hidden; text-overflow: ellipsis;} .flags { gap: 0.25rem;} .mono { font-family: var(--font-mono); font-size: 0.77rem; letter-spacing: -0.03em;} .year-cell { font-size: 0.9rem;} .modality { height: 1.35rem; padding: 0 0.38rem; border-radius: 0.16rem; font-size: 0.62rem;} .empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.45rem; padding: 2rem; color: var(--color-text-tertiary); text-align: center;} .empty-state p { margin: 0; color: var(--color-text); font-weight: 700; letter-spacing: -0.03em;Lines 1–500 of 554. Load more
:root { --header-height: 56px; --artist-filter-height: 42px; --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; } @media (prefers-color-scheme: dark) { :root { --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, body > div { 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; } button { cursor: pointer; } button:disabled { cursor: wait; opacity: 0.55; } a { color: inherit; text-decoration: none; } .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; } .search-container { position: relative; display: block; width: clamp(14rem, 28vw, 30rem); } .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-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; } .search-button, .source-link { color: var(--color-text-secondary); text-decoration: none; text-transform: uppercase; } .search-button { height: 2rem; padding: 0 0.75rem; border: 1px solid var(--color-border); background: transparent; font-size: 0.78rem; font-family: var(--font-mono); } .search-button:hover { border-color: var(--color-brand); color: var(--color-text); } .artist-bar, .filter-bar, .status-strip { position: fixed; left: 0; right: 0; z-index: 25; display: flex; align-items: center; white-space: nowrap; } .artist-bar { top: var(--header-height); height: var(--artist-filter-height); gap: 0.4rem; overflow-x: auto; overflow-y: hidden; padding: 0 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background); } .filter-bar { top: calc(var(--header-height) + var(--artist-filter-height)); height: var(--filter-height); gap: 0.4rem; overflow-x: auto; overflow-y: hidden; 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; } .type-label { margin-left: 0.5rem; } .provider-chip { height: 1.75rem; padding: 0 0.65rem; 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 span { color: var(--color-text-tertiary); } .provider-chip:hover, .provider-chip.active { 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); } .status-strip { top: calc( var(--header-height) + var(--artist-filter-height) + var(--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); } .content-viewport { position: fixed; inset: calc( var(--header-height) + var(--artist-filter-height) + var(--filter-height) + var(--status-height) ) 0 0; overflow: auto; background: var(--color-background); } .artist-summary { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.4rem 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background); } .eyebrow { margin: 0 0 0.35rem; color: var(--color-text-tertiary); font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; } .artist-summary h2 { margin: 0; font-size: clamp(2.4rem, 8vw, 6.4rem); line-height: 0.86; letter-spacing: -0.08em; text-transform: uppercase; } .tag-list { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.35rem; max-width: 32rem; } .tag-list span, .modality { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-mono); text-transform: uppercase; } .tag-list span { height: 1.6rem; padding: 0 0.5rem; font-size: 0.68rem; } .discography-table { min-width: max-content; } .release-grid { display: grid; grid-template-columns: 110px minmax(420px, 1.2fr) 150px 160px minmax( 320px, 0.8fr ); min-width: 1160px; } .header-row { position: sticky; top: 0; z-index: 20; background: var(--color-alpha-background); } .header-cell { display: flex; min-width: 0; min-height: 55px; align-items: center; padding: 0.65rem 0.75rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; } .release-row { height: 52px; align-items: stretch; background: var(--color-background); contain: layout style; } .release-row:hover { z-index: 2; background: color-mix( in srgb, var(--color-brand) 8%, var(--color-background) ); } .cell { display: flex; min-width: 0; align-items: center; gap: 0.4rem; overflow: hidden; padding: 0 0.75rem; border-right: 1px solid color-mix(in srgb, var(--color-border) 56%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent); color: var(--color-text-tertiary); white-space: nowrap; text-overflow: ellipsis; } .cell.strong { color: var(--color-text); } .cell:not(.flags) { overflow: hidden; text-overflow: ellipsis; } .flags { gap: 0.25rem; } .mono { font-family: var(--font-mono); font-size: 0.77rem; letter-spacing: -0.03em; } .year-cell { font-size: 0.9rem; } .modality { height: 1.35rem; padding: 0 0.38rem; border-radius: 0.16rem; font-size: 0.62rem; } .empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.45rem; padding: 2rem; color: var(--color-text-tertiary); text-align: center; } .empty-state p { margin: 0; color: var(--color-text); font-weight: 700; letter-spacing: -0.03em;