:root {
  color-scheme: dark;
  --bg: #07080b;
  --ink: #f5f5f1;
  --muted: #9b9ba4;
  --dim: #65656f;
  --surface: #111217;
  --surface-2: #18191f;
  --line: rgba(255, 255, 255, .105);
  --violet: #9b8cff;
  --cyan: #63dfff;
  --yellow: #f7c62f;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background:
  radial-gradient(70rem 46rem at 66% -10%, rgba(106, 83, 255, .16), transparent 58%),
  radial-gradient(38rem 30rem at -8% 28%, rgba(50, 167, 201, .08), transparent 65%), var(--bg); }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.site-header { position: relative; z-index: 5; height: 88px; display: flex; align-items: center; justify-content: space-between; max-width: 1500px; margin: 0 auto; padding: 0 46px; }
.brand { color: var(--ink); text-decoration: none; display: inline-flex; gap: 12px; align-items: center; }
.brand > span:last-child { display: grid; gap: 3px; line-height: 1; }
.brand strong { font-size: 18px; letter-spacing: -.03em; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.brand-mark { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 30px rgba(120, 97, 255, .2), inset 0 0 15px rgba(255,255,255,.04); }
.brand-mark::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--violet); border-radius: 50%; }
.brand-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 9px white; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.connection-status { display: inline-flex; gap: 7px; align-items: center; color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.connection-status i { width: 6px; height: 6px; border-radius: 50%; background: #62636c; box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.connection-status.connected { color: #9bbda5; }
.connection-status.connected i { background: #55db80; box-shadow: 0 0 9px rgba(85,219,128,.7); }
.access-button, .quiet { color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 11px; }
.access-button:hover, .quiet:hover { color: var(--ink); border-color: rgba(255,255,255,.24); }

main { max-width: 1500px; margin: 0 auto; padding: 0 46px 100px; }
.hero { position: relative; min-height: 680px; display: grid; align-items: center; padding: 70px 0 110px; }
.hero-copy { position: relative; z-index: 2; width: min(850px, 68%); }
.hero-art { position: absolute; z-index: 0; top: -88px; right: -46px; width: min(860px, 65vw); height: 760px; overflow: hidden; opacity: 0; animation: hero-reveal 1s .15s ease forwards; mask-image: linear-gradient(to left, #000 50%, transparent 95%), linear-gradient(to bottom, #000 72%, transparent 100%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08) brightness(.62); }
.hero-art span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0, transparent 35%), linear-gradient(0deg, var(--bg), transparent 40%); }
@keyframes hero-reveal { to { opacity: .62; } }
.eyebrow { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 17px 0 25px; max-width: 880px; font-size: clamp(62px, 7.1vw, 110px); line-height: .88; letter-spacing: -.07em; font-weight: 680; }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.42); }
.intro { max-width: 620px; margin: 0; color: #b2b2ba; font-size: 18px; line-height: 1.62; }
.search-shell { margin-top: 36px; display: flex; width: min(720px, 100%); padding: 7px; border-radius: 17px; background: rgba(17,18,24,.88); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 35px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(130,105,255,.045); backdrop-filter: blur(22px); }
.search-input { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.search-input svg { flex: 0 0 20px; width: 20px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.search-input input { min-width: 0; width: 100%; padding: 15px 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 15px; }
.search-input input::placeholder { color: var(--dim); }
.search-shell button, .access-panel button[type="submit"] { min-width: 108px; border: 0; border-radius: 11px; padding: 0 21px; color: white; font-weight: 700; background: linear-gradient(135deg, #796aff, #6350d9); box-shadow: 0 8px 25px rgba(83,62,220,.3); }
.search-shell button:hover, .access-panel button[type="submit"]:hover { filter: brightness(1.08); }
.hero-facts { display: flex; gap: clamp(30px, 5vw, 74px); margin-top: 42px; }
.hero-facts div { display: grid; gap: 4px; }
.hero-facts strong { font-size: 23px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero-facts span { color: var(--dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.access-panel { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 50px; align-items: end; margin: 0 0 40px; padding: 30px; border: 1px solid rgba(123,105,255,.3); border-radius: 20px; background: linear-gradient(120deg, rgba(105,84,255,.12), rgba(19,22,31,.84)); }
.access-panel[hidden] { display: none; }
.access-panel h2 { margin: 7px 0 6px; font-size: 28px; }
.access-panel p { margin: 0; color: var(--muted); }
.access-panel form { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: end; }
.access-panel label { color: var(--muted); font-size: 11px; display: grid; gap: 7px; }
.access-panel input { min-width: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #0b0d13; padding: 12px; }
.access-panel button { min-height: 42px; }

.source-rail { display: grid; grid-template-columns: minmax(230px, .75fr) 2fr; gap: 55px; align-items: center; margin: 0 0 105px; padding: 33px 0; border-block: 1px solid var(--line); }
.source-rail h2 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.035em; }
.provider-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.source-card { min-width: 0; min-height: 92px; display: grid; align-content: center; justify-items: start; gap: 5px; padding: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.source-card:not(:disabled):hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.055); }
.source-card:disabled { cursor: default; opacity: .42; }
.source-glyph { color: var(--violet); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.source-card strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.source-card small { color: var(--dim); font-size: 9px; white-space: nowrap; }
.source-imdb .source-glyph { color: var(--yellow); }
.source-rottentomatoes .source-glyph { color: #ff6974; }
.source-metacritic .source-glyph { color: #68df8b; }
.source-letterboxd .source-glyph { color: #45d58d; }
.source-tmdb .source-glyph { color: #61d7ff; }
.source-trakt .source-glyph { color: #e46068; }

.catalog-section { scroll-margin-top: 25px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.05em; }
.kind-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.kind-tabs button { border: 0; border-radius: 999px; color: var(--muted); background: transparent; padding: 9px 17px; font-size: 12px; }
.kind-tabs button.active { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.catalog-toolbar { display: flex; gap: 25px; align-items: end; justify-content: space-between; margin-top: 31px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.018); }
.filters { display: flex; gap: 10px; }
.filters label { display: grid; gap: 6px; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.filters select { min-width: 150px; appearance: none; color: var(--ink); padding: 10px 34px 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%239b9ba4'/%3E%3C/svg%3E") no-repeat right 11px center; font-size: 12px; }
.artwork-toggle { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.artwork-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.artwork-toggle span { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--line); background: #111217; transition: background .2s ease; }
.artwork-toggle span::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; content: ""; border-radius: 50%; background: var(--muted); transition: transform .2s ease, background .2s ease; }
.artwork-toggle input:checked + span { background: rgba(113,91,255,.26); border-color: rgba(144,127,255,.5); }
.artwork-toggle input:checked + span::after { transform: translateX(14px); background: white; }
.artwork-toggle input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.catalog-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin: 22px 2px 15px; }
.catalog-meta p { margin: 0; }
.error { margin: 16px 0; border: 1px solid rgba(255,90,110,.4); background: rgba(255,69,94,.1); color: #ff9aaa; padding: 15px 18px; border-radius: 12px; }

.catalog-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 17px; min-height: 360px; }
.title-card { min-width: 0; display: block; padding: 0; text-align: left; color: inherit; border: 0; background: transparent; }
.poster { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 2/3; border-radius: 13px; background: linear-gradient(145deg, #202129, #101116); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 34px rgba(0,0,0,.25); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.poster::after { position: absolute; inset: 45% 0 0; pointer-events: none; content: ""; background: linear-gradient(transparent, rgba(4,5,8,.45)); }
.title-card:hover .poster { transform: translateY(-5px) scale(1.012); border-color: rgba(143,126,255,.46); box-shadow: 0 25px 52px rgba(0,0,0,.4), 0 0 30px rgba(93,72,225,.13); }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.title-card:hover .poster img { transform: scale(1.025); }
.poster-placeholder { color: rgba(255,255,255,.2); font-size: 9px; font-weight: 850; letter-spacing: .23em; }
.card-rank { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 5px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: rgba(255,255,255,.86); background: rgba(5,6,9,.62); backdrop-filter: blur(10px); font-size: 9px; font-weight: 800; }
.poster-score { position: absolute; z-index: 2; right: 9px; bottom: 9px; display: grid; justify-items: end; gap: 1px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: white; background: rgba(5,6,9,.76); backdrop-filter: blur(10px); }
.poster-score small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.poster-score strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.poster-score.provider-imdb strong { color: #ffe06d; }
.poster-score.provider-rottentomatoes strong { color: #ff858e; }
.poster-score.provider-metacritic strong { color: #7fec9e; }
.poster-score.provider-tmdb strong { color: #71dfff; }
.poster-score.provider-letterboxd strong { color: #62dfa0; }
.card-body { display: grid; gap: 7px; padding: 12px 2px 0; }
.card-body > strong { font-size: 13px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; justify-content: space-between; color: var(--dim); text-transform: uppercase; font-size: 8px; letter-spacing: .1em; }
.card-meta .kind { color: var(--cyan); }
.ratings { display: flex; min-height: 20px; flex-wrap: wrap; gap: 4px; }
.rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 5px; color: #dfe1e8; background: rgba(255,255,255,.055); font-size: 9px; font-variant-numeric: tabular-nums; }
.rating b { color: var(--muted); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.rating.provider-imdb { color: #ffe06d; background: rgba(245,197,24,.1); }
.rating.provider-rottentomatoes { color: #ff8b92; background: rgba(255,74,85,.1); }
.rating.provider-metacritic { color: #7fec9e; background: rgba(63,214,111,.09); }
.rating.provider-letterboxd { color: #65e2a3; background: rgba(65,211,142,.09); }
.rating.provider-tmdb { color: #77dfff; background: rgba(70,195,230,.09); }
.card-updated { color: var(--dim); font-size: 8px; letter-spacing: .02em; }
.unrated { color: var(--dim); font-size: 9px; }
.empty { grid-column: 1/-1; min-height: 370px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--muted); }
.empty-mark { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 50%; color: var(--violet); font-size: 25px; }
.empty strong { color: var(--ink); font-size: 21px; }
.empty p { margin: 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 17px; margin-top: 56px; color: var(--muted); font-size: 11px; }
.pagination button { color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 10px 14px; }
.pagination button:disabled { opacity: .32; cursor: default; }

.skeleton { pointer-events: none; }
.skeleton .poster, .skeleton-line { border-color: transparent; background: linear-gradient(100deg, #121318 30%, #1b1c23 46%, #121318 62%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }
.skeleton-line { display: block; width: 80%; height: 10px; margin-top: 12px; border-radius: 4px; }
.skeleton-line.short { width: 48%; margin-top: 7px; }
@keyframes shimmer { to { background-position: -150% 0; } }

dialog { width: min(1040px, calc(100vw - 34px)); max-height: min(860px, calc(100vh - 34px)); padding: 0; overflow: auto; color: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 23px; background: #0d0e12; box-shadow: 0 55px 150px rgba(0,0,0,.74); }
dialog::backdrop { background: rgba(3,4,7,.78); backdrop-filter: blur(16px); }
.dialog-close { position: sticky; float: right; right: 16px; top: 14px; z-index: 5; width: 38px; height: 38px; margin: 14px 14px -52px 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); color: white; background: rgba(8,9,13,.72); backdrop-filter: blur(12px); font-size: 24px; line-height: 1; }
.title-detail { position: relative; min-height: 640px; }
.detail-backdrop { position: absolute; inset: 0 0 auto; height: 350px; overflow: hidden; opacity: .48; mask-image: linear-gradient(#000 25%, transparent 100%); }
.detail-backdrop::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(13,14,18,.85), transparent 60%); }
.detail-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); }
.detail-layout { position: relative; display: grid; grid-template-columns: 245px 1fr; gap: 42px; padding: 150px 50px 50px; }
.detail-art { align-self: start; overflow: hidden; aspect-ratio: 2/3; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: #14151b; box-shadow: 0 25px 55px rgba(0,0,0,.48); }
.detail-art img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy { min-width: 0; padding-top: 24px; }
.detail-copy h2 { margin: 10px 0 17px; max-width: 650px; font-size: clamp(38px, 5vw, 66px); line-height: .98; letter-spacing: -.055em; }
.detail-updated { margin: -7px 0 16px; color: var(--dim); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.overview { max-width: 670px; margin: 0; color: #aaaab3; font-size: 14px; line-height: 1.65; }
.detail-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 29px 0; }
.rating-row { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.rating-lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rating-source { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.rating-lead strong { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rating-row small { overflow: hidden; color: var(--dim); font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rating-row.provider-imdb .rating-lead strong { color: #ffe06d; }
.rating-row.provider-rottentomatoes .rating-lead strong { color: #ff8991; }
.rating-row.provider-metacritic .rating-lead strong { color: #7fec9e; }
.rating-row.provider-letterboxd .rating-lead strong { color: #65e2a3; }
.rating-row.provider-tmdb .rating-lead strong { color: #77dfff; }
.identity-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.identity-chip { display: inline-flex; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
a.identity-chip:hover { color: var(--ink); border-color: rgba(255,255,255,.25); }
.dialog-loading { padding: 130px 50px; text-align: center; color: var(--muted); }
.dialog-error { margin: 80px; }

footer { max-width: 1500px; margin: 0 auto; padding: 40px 46px 60px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 28px; color: var(--dim); font-size: 10px; }
footer p { flex: 1; }
footer a { color: var(--muted); }
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-brand .brand-mark::before { width: 14px; height: 14px; }
.footer-links { display: flex; gap: 14px; align-items: center; }
.footer-links span { color: #8db79a; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.login-page { display: grid; min-height: 100vh; place-items: center; }
.login-page::after { position: fixed; inset: -20%; z-index: -1; content: ""; background:
  radial-gradient(circle at 68% 26%, rgba(113,91,255,.2), transparent 24%),
  radial-gradient(circle at 25% 72%, rgba(62,195,230,.1), transparent 22%); filter: blur(20px); }
.login-main { width: 100%; max-width: none; min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.login-card { width: min(470px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(15,16,22,.9); box-shadow: 0 40px 120px rgba(0,0,0,.55); backdrop-filter: blur(24px); }
.login-brand { margin-bottom: 58px; }
.login-copy h1 { margin: 12px 0 16px; font-size: clamp(45px, 10vw, 64px); line-height: .94; letter-spacing: -.06em; }
.login-copy > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.login-form { display: grid; gap: 14px; margin-top: 31px; }
.login-form label { display: grid; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.login-form input { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #0a0b10; font-size: 16px; text-transform: none; letter-spacing: normal; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 70px; }
.password-toggle { position: absolute; right: 6px; bottom: 6px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--cyan); background: transparent; font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: none; }
.password-toggle:hover { background: rgba(255,255,255,.06); }
.password-toggle:focus-visible { outline-offset: -2px; }
.login-form button { min-height: 50px; margin-top: 7px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg, #796aff, #6350d9); box-shadow: 0 12px 30px rgba(83,62,220,.3); font-weight: 750; }
.login-form button:hover { filter: brightness(1.08); }
.login-error { margin: 22px 0 -8px; padding: 11px 13px; border: 1px solid rgba(255,90,110,.35); border-radius: 9px; color: #ffadb7; background: rgba(255,69,94,.08); font-size: 12px; }
.login-footnote { margin: 25px 0 0; color: var(--dim); font-size: 9px; line-height: 1.5; text-align: center; }

@media (max-width: 1180px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .provider-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .source-rail { grid-template-columns: minmax(210px, .7fr) 1.5fr; }
  .hero-copy { width: 78%; }
}
@media (max-width: 820px) {
  .site-header { height: 72px; padding: 0 22px; }
  main { padding: 0 22px 70px; }
  .hero { min-height: 670px; padding: 70px 0 90px; }
  .hero-copy { width: 100%; }
  .hero-art { top: -72px; right: -22px; width: 100vw; opacity: .18; }
  h1 { font-size: clamp(58px, 14vw, 90px); }
  .source-rail { grid-template-columns: 1fr; gap: 25px; margin-bottom: 80px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .filters { flex-wrap: wrap; }
  .artwork-toggle { align-self: flex-end; }
  .access-panel { grid-template-columns: 1fr; gap: 24px; }
  .detail-layout { grid-template-columns: 190px 1fr; gap: 28px; padding-inline: 30px; }
  footer { padding-inline: 22px; }
}
@media (max-width: 620px) {
  .connection-status { display: none; }
  .access-button { padding: 8px 11px; }
  .hero { min-height: 620px; padding-top: 58px; }
  h1 { font-size: clamp(52px, 17vw, 77px); }
  .intro { font-size: 15px; }
  .search-shell button { min-width: 82px; padding: 0 13px; }
  .hero-facts { gap: 24px; justify-content: space-between; }
  .hero-facts strong { font-size: 19px; }
  .hero-facts span { max-width: 72px; line-height: 1.35; }
  .provider-rail { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .source-card { min-width: 135px; scroll-snap-align: start; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .kind-tabs { align-self: flex-start; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters label:first-child { grid-column: 1/-1; }
  .filters select { width: 100%; min-width: 0; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .catalog-meta { gap: 15px; align-items: end; }
  .title-detail { min-height: auto; }
  .detail-backdrop { height: 250px; }
  .detail-layout { display: block; padding: 140px 22px 35px; }
  .detail-art { width: 122px; margin-bottom: 26px; }
  .detail-copy { padding-top: 0; }
  .detail-copy h2 { font-size: 40px; }
  .detail-ratings { grid-template-columns: 1fr; }
  .access-panel form { grid-template-columns: 1fr 1fr; }
  .access-panel form label { grid-column: 1/-1; }
  footer { align-items: flex-start; flex-wrap: wrap; }
  footer p { flex-basis: 100%; order: 3; }
  .login-main { padding: 18px; }
  .login-card { padding: 28px 24px; border-radius: 20px; }
  .login-brand { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .hero-art { opacity: .6; }
}