:root {
  --page-bg: #f7f6f3;
  --page-fg: #111418;
  --page-fg-2: rgba(20, 20, 25, .62);
  --page-line: rgba(20, 20, 25, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #141519;
    --page-fg: #eceef3;
    --page-fg-2: rgba(236, 238, 243, .62);
    --page-line: rgba(236, 238, 243, .13);
  }
}
:root[data-theme="dark"] {
  --page-bg: #141519;
  --page-fg: #eceef3;
  --page-fg-2: rgba(236, 238, 243, .62);
  --page-line: rgba(236, 238, 243, .13);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); color: var(--page-fg); }

.nav-wrap { position: sticky; top: 0; z-index: 20; padding: 14px 24px; }
.nav-inner { max-width: 1240px; margin: 0 auto; }
.nav-word { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; flex: none; }
.nav-word .dot { color: var(--sk-ink-3); }
.nav-search { flex: 1; max-width: 360px; }
.nav-count { font-size: var(--sk-t-foot); color: var(--sk-ink-2); flex: none; }

.hero { max-width: 1240px; margin: 0 auto; padding: 40px 24px 8px; }
.eyebrow { font: 700 .72rem/1 var(--sk-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--page-fg-2); margin: 0 0 12px; }
.hero h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.35; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }

.grid-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 90px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.card { position: relative; aspect-ratio: 4/5; border-radius: var(--sk-r-l); overflow: hidden; cursor: pointer; box-shadow: 0 1px 0 var(--page-line); transition: transform .4s var(--sk-ease), box-shadow .4s var(--sk-ease); text-decoration: none; display: block; }
.card-bg { position: absolute; inset: 0; background-size: cover; background-position: top center; transform: scale(1.1); transition: transform .3s ease-out; }
.card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .15) 45%, transparent 70%); }
.card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.card-cat { display: flex; align-items: center; gap: 6px; font: 600 .68rem/1 var(--sk-mono); color: rgba(255, 255, 255, .75); }
.card-cat .sk-dot { background: currentColor; }
.card-name { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.card-desc { font-size: .74rem; line-height: 1.5; color: rgba(255, 255, 255, .72); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.is-active { transform: scale(1.035); z-index: 2; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .45); }
.card.is-dim { opacity: .25; filter: grayscale(.5); }

.footer-note { max-width: 1240px; margin: 0 auto; padding: 0 24px 60px; color: var(--page-fg-2); font-size: .8rem; line-height: 1.7; }