:root {
  color-scheme: dark;
  --bg: #191919;
  --surface: #202020;
  --surface-2: #242424;
  --card: #292929;
  --text: #dcdcdc;
  --soft-text: #b8b8b8;
  --muted: #8f8f8f;
  --quiet: #5d5d5d;
  --line: rgba(255,255,255,.085);
  --primary: #a1d096;
  --progress: #d29090;
  --watch: #cbb492;
  --header: rgba(25,25,25,.87);
  --shadow: rgba(0,0,0,.32);
  --max: 1200px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e6e6e6;
  --surface: #dfdfdf;
  --surface-2: #e6e6e6;
  --card: #eeeeee;
  --text: #333333;
  --soft-text: #666666;
  --muted: #757575;
  --quiet: #999999;
  --line: rgba(0,0,0,.105);
  --header: rgba(230,230,230,.88);
  --shadow: rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background-color 180ms ease, color 180ms ease; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 9px 14px; color: #162016; background: var(--primary); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 15px max(22px, calc((100vw - var(--max))/2)); background: var(--header); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 9px; font-size: .95rem; font-weight: 650; letter-spacing: -.02em; }
.brand img { width: 29px; height: 29px; border-radius: 8px; }
.nav { display: flex; gap: 28px; color: var(--muted); font-size: .84rem; }
.nav a:hover, .nav a:focus-visible { color: var(--text); }
.theme-toggle { justify-self: end; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

.section { max-width: var(--max); margin: 0 auto; padding: 104px 22px; }
.hero { padding-top: 140px; padding-bottom: 72px; }
.hero-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 90px var(--shadow); }
.eyebrow { margin: 0; padding: 22px 28px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow span { padding: 0 7px; color: var(--quiet); }
.hero-main { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; min-height: 330px; padding: 54px; }
.hero-title { display: flex; align-items: center; gap: 28px; }
.app-icon { display: grid; flex: 0 0 auto; place-items: center; width: 108px; height: 108px; background: #171717; border: 1px solid var(--line); border-radius: 25px; }
.app-icon img { width: 82px; border-radius: 20px; }
h1 { margin: 0; font-size: clamp(4.2rem,8vw,7rem); font-weight: 590; line-height: .9; letter-spacing: -.068em; }
.hero-copy { max-width: 500px; margin: 0; color: var(--soft-text); font-size: 1.12rem; }
.hero-bottom { display: flex; align-items: center; min-height: 74px; padding: 0 28px; border-top: 1px solid var(--line); }
.version { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .8rem; }
.version span { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; }

.collection, .features { border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: end; margin-bottom: 44px; }
.section-label { margin: 0 0 17px; color: var(--muted); font-size: .74rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(2.3rem,4.2vw,4.1rem); font-weight: 570; line-height: 1.02; letter-spacing: -.05em; }
.section-heading > p { margin: 0; color: var(--muted); }

.collection-window { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 75px var(--shadow); }
.collection-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.collection-tab { min-height: 48px; color: var(--quiet); background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.collection-tab span { margin-left: 6px; opacity: .7; }
.collection-tab:hover { color: var(--soft-text); }
.collection-tab.is-active { color: var(--text); background: var(--card); border-color: var(--line); }
.collection-toolbar { display: flex; justify-content: center; gap: 8px; padding: 22px 0; }
.search-field { display: flex; align-items: center; width: min(360px,70%); height: 43px; padding: 0 13px; color: var(--quiet); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.search-field svg, .tool-button svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.search-field input { width: 100%; min-width: 0; margin-left: 9px; background: transparent; border: 0; outline: 0; }
.search-field input::placeholder { color: var(--quiet); }
.tool-button { display: grid; place-items: center; width: 43px; height: 43px; padding: 0; color: var(--quiet); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; cursor: default; }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.media-card { overflow: hidden; min-width: 0; min-height: 480px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.media-card[hidden] { display: none; }
.media-image { position: relative; overflow: hidden; aspect-ratio: 1.45/1; background: var(--surface-2); }
.media-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 300ms ease; }
.media-card:hover .media-image img { transform: scale(1.025); }
.media-body { display: flex; flex-direction: column; min-height: 255px; padding: 16px; }
.media-body h3 { margin: 0; font-size: .96rem; font-weight: 650; letter-spacing: -.015em; }
.type { align-self: flex-start; margin-top: 10px; padding: 4px 8px; color: #171717; border-radius: 6px; font-size: .67rem; }
.type.anime { background: var(--primary); }
.type.movie { background: #82a9c6; }
.group-badge { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 6px 9px; color: #f5f5f5; background: rgba(18,18,18,.78); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; font-size: .68rem; font-weight: 650; letter-spacing: .01em; backdrop-filter: blur(8px); }
.media-meta { margin-top: auto; color: var(--muted); font-size: .78rem; }
.media-meta p { margin: 4px 0 0; }
.media-meta .rating { color: #e8bc49; }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 10px; }
.progress-row > i { height: 5px; background: var(--surface); border-radius: 99px; }
.progress-row > i span { display: block; height: 100%; background: #f2a51a; border-radius: inherit; }
.progress-row b { color: #f2a51a; font-size: .74rem; }
.empty-state { padding: 60px 0; color: var(--muted); text-align: center; }

.features-heading { grid-template-columns: 1fr; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.feature-card { min-height: 190px; padding: 27px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.feature-card h3 { margin: 0; font-size: 1.04rem; font-weight: 640; letter-spacing: -.02em; }
.feature-card h3 span { margin-right: 7px; color: var(--quiet); font-size: .73rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; vertical-align: .08em; }
.feature-card p { max-width: 410px; margin: 12px 0 0; color: var(--muted); }

footer { max-width: var(--max); margin: 0 auto; padding: 26px 22px 42px; color: var(--quiet); border-top: 1px solid var(--line); font-size: .75rem; }
footer p { margin: 0; }
footer span { margin: 0 6px; }
footer a { color: inherit; text-decoration: none; transition: color 160ms ease; }
footer a:hover { color: var(--soft-text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; gap: 38px; }
  .hero-copy { max-width: 650px; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .site-header { grid-template-columns: 1fr auto; padding: 13px 17px; }
  .nav { display: none; }
  .section { padding: 76px 17px; }
  .hero { padding-top: 116px; padding-bottom: 56px; }
  .hero-card { border-radius: 17px; }
  .eyebrow { padding: 17px 19px; }
  .hero-main { min-height: auto; padding: 38px 20px 42px; }
  .hero-title { gap: 16px; }
  .app-icon { width: 72px; height: 72px; border-radius: 18px; }
  .app-icon img { width: 54px; border-radius: 14px; }
  h1 { font-size: clamp(3.8rem,19vw,6rem); }
  .hero-copy { font-size: 1rem; }
  .hero-bottom { padding-inline: 19px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .collection-window { padding: 8px; border-radius: 14px; }
  .collection-tabs { gap: 6px; }
  .collection-tab { min-height: 43px; font-size: .72rem; }
  .collection-tab span { display: none; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .media-card { min-height: 0; border-radius: 10px; }
  .media-image { aspect-ratio: 1.18/1; }
  .media-body { min-height: 180px; padding: 12px 11px; }
  .media-body h3 { font-size: .875rem; line-height: 1.3; }
  .type { margin-top: 8px; padding: 3px 6px; font-size: .75rem; }
  .media-meta { font-size: .75rem; line-height: 1.4; }
  .progress-row { gap: 6px; margin-top: 8px; }
  .progress-row b { font-size: .72rem; }
  .group-badge { top: 7px; right: 7px; padding: 4px 6px; font-size: .7rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 170px; padding: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}