:root {
  color-scheme: dark;
  --paper: #212121;
  --sidebar: #191919;
  --surface: #2c2c2c;
  --hover: #333333;
  --ink: #ececec;
  --muted: #b0b0b0;
  --line: #393939;
  --header-height: 64px;
  --sidebar-width: 200px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif; line-height: 1.6; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid #ececec; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; background: var(--ink); color: var(--paper); padding: 8px 16px; }
.skip-link:focus { top: 8px; }
.site-header { height: var(--header-height); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; background: var(--sidebar); border-bottom: 1px solid #ffffff08; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: -.7px; background: #c62828; color: #ffffff; padding: 0 6px; }
.site-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { background: var(--sidebar); padding: 20px 12px; position: sticky; top: var(--header-height); height: calc(100dvh - var(--header-height)); }
.sidebar-link { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 8px; text-decoration: none; font-size: 13px; margin-bottom: 4px; }
.sidebar-link.active { background: var(--surface); font-weight: 600; }
.sidebar-link:hover { background: var(--hover); }
.sidebar-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; flex-shrink: 0; }
.content-area { min-width: 0; padding: 26px 32px 0; max-width: 1920px; width: 100%; margin-inline: auto; }
.section-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-top h1 { margin: 0; font-size: 20px; font-weight: 650; }
.provider-chip { font-size: 12px; background: var(--surface); border: 1px solid var(--line); padding: 4px 10px; border-radius: 7px; }
.update { margin: 0; justify-self: end; text-align: right; color: var(--muted); font-size: 11px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
.discovery-card { min-width: 0; }
.thumbnail { position: relative; display: block; aspect-ratio: 16 / 9; background: #303030; border-radius: 11px; text-decoration: none; overflow: hidden; }
.thumbnail:hover { background: #383838; }
.thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #191919; }
.image-placeholder { height: 100%; display: grid; place-items: center; }
.image-placeholder svg { width: 48px; height: 48px; fill: #777777; }
.status { position: absolute; bottom: 9px; right: 9px; background: #141414; color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.status.live { background: #b92d36; }
.card-body { display: flex; align-items: flex-start; gap: 10px; padding-top: 12px; }
.creator-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #3a3a3a; display: grid; place-items: center; color: #d1d1d1; font-size: 13px; }
.card-info { min-width: 0; }
.card-info h2 { font-size: 14px; font-weight: 600; line-height: 1.5; margin: 0 0 5px; }
.card-info h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-decoration: none; }
.card-info h2 a:hover { text-decoration: underline; }
.creator, .card-meta { color: var(--muted); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0 10px; }
.empty-state { padding: 72px 24px; text-align: center; background: #ffffff03; border-radius: 10px; }
.empty-state h2 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.empty-state p { color: var(--muted); font-size: 12px; margin: 6px 0; }
.delay-notice { color: var(--muted); font-size: 12px; margin-top: 20px; }
.text-page { max-width: 760px; margin: 10px auto 64px; }
.back-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.text-page h1 { font-size: 27px; margin: 24px 0; }
.text-page>p { color: #d0d0d0; font-size: 14px; line-height: 2; margin: 24px 0; }
.text-page>a:last-child { font-size: 13px; }
.contact-box { padding: 20px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
@media (min-width: 1600px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  :root { --sidebar-width: 80px; }
  .sidebar { padding: 16px 4px; }
  .sidebar-link { flex-direction: column; gap: 6px; padding: 12px 2px; font-size: 10px; }
  .content-area { padding: 24px 24px 0; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --header-height: 56px; }
  .site-header { padding: 0 16px; }
  .brand { font-size: 20px; }
  .site-layout { display: block; }
  .sidebar { display: none; }
  .content-area { padding: 20px 16px 0; }
  .section-top { gap: 8px 10px; margin-bottom: 14px; }
  .section-top h1 { font-size: 18px; }
  .update { font-size: 10px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .card-info h2 { font-size: 14px; }
  .thumbnail { border-radius: 9px; }
  .text-page h1 { font-size: 24px; }
}
.content-area { padding-bottom: 32px; min-height: calc(100dvh - var(--header-height)); display: flex; flex-direction: column; }
.site-footer { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 11px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.page-links { display: flex; flex-wrap: wrap; gap: 10px 20px; border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: 12px; }