/* ==========================================================================
   DOC-025 Frontend Library · ThreeUI Inspired Light & Dark Themes
   Neutral gray base + single indigo accent (light #4f46e5 / dark #818cf8)
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f7f7f7;
  --surface-hover: #f0f0f0;
  --sidebar-bg: #fafafa;
  --line: #e5e5e5;
  --line-strong: #d4d4d4;
  --line-focus: #555555;
  --ink: #111111;
  --ink-secondary: #555555;
  --ink-muted: #777777;
  --ink-faint: #aaaaaa;
  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --accent-line: rgba(79, 70, 229, 0.38);
  /* Live typography: default/zh/en = A Phase Lock; ja/ko = C Signal Soft. CJK = A–D Noto stack. */
  --font-cjk: "Lab Noto Sans TC", "Lab Noto Sans JP", "Lab Noto Sans KR";
  --font-system-cjk: "PingFang TC", "Hiragino Sans", "Malgun Gothic", "Microsoft JhengHei", system-ui, sans-serif;
  --font-sans: "Lab Oxanium", var(--font-cjk), var(--font-system-cjk);
  --font-mono: "Lab Share Tech Mono", var(--font-cjk), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-ui: var(--font-sans);
  --font-display: var(--font-sans);
}

html[lang="ja"] {
  --font-cjk: "Lab Noto Sans JP", "Lab Noto Sans TC", "Lab Noto Sans KR";
  --font-sans: "Lab Exo 2", var(--font-cjk), var(--font-system-cjk);
  --font-ui: "Lab Chakra Petch", "Lab Exo 2", var(--font-cjk), var(--font-system-cjk);
  --font-mono: "Lab IBM Plex Mono", var(--font-cjk), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-ui);
}

html[lang="ko"] {
  --font-cjk: "Lab Noto Sans KR", "Lab Noto Sans TC", "Lab Noto Sans JP";
  --font-sans: "Lab Exo 2", var(--font-cjk), var(--font-system-cjk);
  --font-ui: "Lab Chakra Petch", "Lab Exo 2", var(--font-cjk), var(--font-system-cjk);
  --font-mono: "Lab IBM Plex Mono", var(--font-cjk), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-ui);
}

html[lang="en"] {
  --font-cjk: "Lab Noto Sans TC", "Lab Noto Sans JP", "Lab Noto Sans KR";
  --font-sans: "Lab Oxanium", var(--font-cjk), var(--font-system-cjk);
  --font-ui: var(--font-sans);
  --font-mono: "Lab Share Tech Mono", var(--font-cjk), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-sans);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surface: #111111;
  --surface-subtle: #161616;
  --surface-hover: #222222;
  --sidebar-bg: #111111;
  --line: #242424;
  --line-strong: #383838;
  --line-focus: #777777;
  --ink: #ffffff;
  --ink-secondary: #aaaaaa;
  --ink-muted: #777777;
  --ink-faint: #444444;
  --accent: #818cf8;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(129, 140, 248, 0.14);
  --accent-line: rgba(129, 140, 248, 0.5);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* CRITICAL FIX: Ensure [hidden] always hides elements regardless of display rule */
[hidden] {
  display: none !important;
}

html {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The library is a vertical-only surface: a wide embed inside the drawer must never turn the
     page into a horizontally scrollable document. */
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: clip;
}

/* Wide third-party embeds (X cards, videos, canvases) stay inside their column. */
.detail-content,
.detail-shell,
.detail-media,
.detail-embed,
.card-media {
  min-width: 0;
  max-width: 100%;
}

.detail-content img,
.detail-content video,
.detail-content iframe,
.detail-content canvas,
.detail-content svg,
.card-media img,
.card-media video,
.card-media canvas,
.card-media svg {
  max-width: 100%;
  height: auto;
}

.detail-content iframe,
.detail-embed iframe {
  width: 100%;
}

/* Screenreader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus {
  top: 20px;
}

/* ==========================================================================
   ThreeUI Full Layout Structure (Sidebar + Main)
   ========================================================================== */

.threeui-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Fixed Left Sidebar */
.threeui-sidebar {
  width: 250px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  overflow-y: auto;
  z-index: 30;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.brand-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 2px 8px;
  color: var(--ink-secondary);
}

.sidebar-search {
  position: relative;
  width: 100%;
}

.sidebar-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-search input:focus {
  outline: none;
  border-color: var(--line-focus);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 14px;
  pointer-events: none;
}

.clear-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
}

.sidebar-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-group-title {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 8px;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-link-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: left;
  font-size: 13px;
  opacity: 0.75;
}

.sidebar-link.active .sidebar-link-icon {
  opacity: 1;
}

.sidebar-link-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.sidebar-link.active {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.sidebar-link-count {
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--line);
  color: var(--ink-muted);
  padding: 1px 6px;
  border-radius: 9999px;
}

.sidebar-link.active .sidebar-link-count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--bg);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

.lang-toggle-btn {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: pointer;
}

.theme-switch-pill {
  display: flex;
  align-items: center;
  background: var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.theme-pill-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-pill-btn.active {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Main Content Area */
.threeui-main {
  flex: 1;
  min-width: 0;
  padding: 40px 48px;
  background: var(--bg);
}

.main-hero {
  margin-bottom: 24px;
}

.main-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;
}

.main-subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 780px;
  margin: 0;
}

/* ==========================================================================
   Horizontal Category Pills & Toolbar (Exact ThreeUI Strip)
   ========================================================================== */

.browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.pills-scroll-wrap {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.pills-scroll-wrap::-webkit-scrollbar {
  display: none;
}

.category-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.category-button:hover {
  background: var(--surface-hover);
  color: var(--ink);
  border-color: var(--line-strong);
}

.category-button[aria-current="page"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 600;
}

.category-count {
  font-size: 10px;
  opacity: 0.6;
  font-family: var(--font-mono);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sort-pills {
  display: inline-flex;
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 3px;
}

.sort-pill-btn {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.sort-pill-btn.active {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.filter-summary-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.filter-panel {
  position: absolute;
  right: 48px;
  margin-top: 8px;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 16px;
  width: 280px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.filter-panel-header button {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  cursor: pointer;
}

.filter-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-secondary);
}

.filter-panel select {
  height: 32px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  padding: 0 8px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.active-filter {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 9999px;
  color: var(--ink-secondary);
}

/* ==========================================================================
   Resource Cards Grid (3 Columns ThreeUI Layout)
   ========================================================================== */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1200px) {
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .threeui-layout {
    flex-direction: column;
  }
  .threeui-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .threeui-main {
    padding: 24px 16px;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

.resource-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.resource-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.card-media-button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: left;
}

.card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--surface-subtle);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--surface-subtle);
  transition: transform 0.3s ease;
  display: block;
}

.resource-card:hover .card-media img {
  transform: scale(1.02);
}

.card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.card-title-link {
  color: var(--ink);
  text-decoration: none;
}

.card-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--line);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card-badge.badge-lab {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

[data-theme="dark"] .card-badge.badge-lab {
  background: #ffffff;
  color: #111111;
  border-color: #ffffff;
}

.card-badge.badge-free {
  background: #f5f5f5;
  color: #333333;
  border-color: #d4d4d4;
}

[data-theme="dark"] .card-badge.badge-free {
  background: #161616;
  color: #aaaaaa;
  border-color: #333333;
}

.card-badge.badge-freemium {
  background: #e0e0e0;
  color: #111111;
  border-color: #888888;
}

[data-theme="dark"] .card-badge.badge-freemium {
  background: #2e2e2e;
  color: #ffffff;
  border-color: #666666;
}

.card-badge.badge-paid {
  background: #222222;
  color: #ffffff;
  border-color: #444444;
}

[data-theme="dark"] .card-badge.badge-paid {
  background: #222222;
  color: #ffffff;
  border-color: #555555;
}

.card-badge.badge-reference {
  background: transparent;
  color: #666666;
  border: 1px dashed #888888;
}

[data-theme="dark"] .card-badge.badge-reference {
  background: transparent;
  color: #888888;
  border-color: #555555;
}

.card-summary {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 6px;
}

.card-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  line-height: 1.2;
}

.card-footer {
  padding: 10px 16px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.direct-source-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.direct-source-link:hover {
  text-decoration: underline;
}

.detail-button {
  font-size: 11px;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}

.detail-button:hover {
  color: var(--ink);
}

/* ==========================================================================
   Detail Slide-Over Drawer (Right Edge Panel)
   ========================================================================== */

.three-shared-canvas {
  position: fixed;
  top: 0;
  left: 0;
  /* 100vw includes the scrollbar and forced a horizontal scrollbar inside the drawer. */
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1050;
  display: block;
  max-width: 100%;
}

.detail-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  margin: 0 0 0 auto;
  width: 640px;
  max-width: 90vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: none;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  overflow-y: auto;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.16);
  animation: slideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1000;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.detail-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
  animation: backdropFade 0.24s ease forwards;
}

@keyframes backdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 680px) {
  .detail-dialog {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
  }
}

.detail-shell {
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100vh;
  background: var(--surface);
  box-sizing: border-box;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 16px 28px 14px;
  margin: -24px -28px 0 -28px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
}

.detail-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-position {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  letter-spacing: 0.02em;
}

.icon-button {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  border-radius: 9999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-button:hover {
  background: var(--surface-hover);
  color: var(--ink);
  border-color: var(--line-strong);
}

.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
}

.detail-loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: pulseDot 1s infinite alternate;
}

.detail-loading span:nth-child(2) {
  animation-delay: 0.2s;
}

.detail-loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulseDot {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.1); }
}

.detail-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--surface-subtle);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-media video,
.detail-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
  display: block;
}

.three-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.three-toggle {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
  z-index: 2;
}

.three-toggle:hover {
  transform: scale(1.03);
  opacity: 0.95;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-main h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.detail-summary {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-secondary);
  margin: 0;
  white-space: pre-line;
}

.detail-author-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.detail-author-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink);
  letter-spacing: 0.02em;
}

.detail-raw-media {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
  background: var(--surface-subtle);
}

.detail-summary-wrapper {
  margin: 10px 0;
}

.detail-notes-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 6px 0;
}

.detail-note-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
}

.detail-note-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.detail-note-heading strong {
  font-weight: 700;
  color: var(--ink);
}

.detail-note-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-note-paragraph {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin: 0;
  white-space: pre-line;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail-actions a {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.detail-actions a:hover {
  transform: translateY(-1px);
}

.detail-actions a:first-child {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.detail-actions a:first-child:hover {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.detail-actions a:not(:first-child) {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink);
}

.detail-actions a:not(:first-child):hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.detail-quick-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
}

.spec-item dt {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.spec-item dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

.detail-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}

.detail-feature-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-feature-row dt {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.detail-feature-row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

.advanced-specs {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12px;
  background: var(--surface);
}

.advanced-specs summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 12px;
  user-select: none;
  outline: none;
}

.advanced-specs summary:hover {
  color: var(--ink);
}

.advanced-specs[open] summary {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.detail-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--surface-subtle);
}

.detail-section summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-secondary);
}

.detail-section[open] summary {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-size: 11px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-field span {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.detail-field strong {
  font-weight: 500;
  color: var(--ink);
}

.detail-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.detail-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cover-provenance-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-subtle);
  margin-bottom: 12px;
}

.cover-provenance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cover-provenance-heading h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.cover-provenance-note {
  margin: 0 0 10px 0;
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.cover-provenance-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 11px;
}

.cover-provenance-list dt {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.cover-provenance-list dd {
  margin: 0;
  color: var(--ink);
  word-break: break-all;
}

.cover-provenance-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Pagination & Skeleton States
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0 20px 0;
}

.pagination button {
  padding: 7px 16px;
  border-radius: 9999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}

.page-jump input {
  width: 44px;
  height: 28px;
  text-align: center;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
}

.state-panel {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-secondary);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.skeleton-card {
  height: 280px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ==========================================================================
   Pure Typographic Cover (Minimalist, High-Craft, Grayscale)
   Used when native capture is unavailable or in error states
   ========================================================================== */

.pure-typography-cover {
  width: 100%;
  height: 100%;
  background: #111111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  user-select: none;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

[data-theme="dark"] .pure-typography-cover {
  background: #111111;
  border-bottom-color: #222222;
}

.pure-cover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pure-cover-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #888888;
  text-transform: uppercase;
}

.pure-cover-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: #777777;
  border: 1px solid #333333;
  padding: 1px 6px;
  border-radius: 3px;
  background: #1a1a1a;
}

.pure-cover-body {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.pure-cover-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pure-cover-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pure-cover-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #aaaaaa;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 3px;
  padding: 2px 6px;
}

/* ==========================================================================
   Component Suite Showcase (React Bits, ThreeUI, Animista)
   ========================================================================== */

.suite-showcase-panel {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.suite-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.suite-showcase-heading h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.suite-license-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-secondary);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
}

.suite-showcase-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 8px 0 12px;
}

.suite-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.suite-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.suite-chip:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.suite-chip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.suite-chip-desc {
  font-size: 10px;
  color: var(--ink-muted);
  line-height: 1.3;
}

.suite-cta-wrap {
  margin-top: 12px;
  text-align: right;
}

.suite-full-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.suite-full-cta:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Aesthetic Deconstruction & Pairing Matrix Panel
   ========================================================================== */

.aesthetic-guide-panel {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.aesthetic-guide-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aesthetic-guide-heading h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.aesthetic-role-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
}

.aesthetic-rationale-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-secondary);
  margin: 10px 0 14px;
}

.aesthetic-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .aesthetic-guide-grid {
    grid-template-columns: 1fr;
  }
}

.aesthetic-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}

.aesthetic-box-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.aesthetic-pairings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aesthetic-pairing-item {
  font-size: 12px;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.aesthetic-pairing-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.pairing-meta {
  font-size: 10px;
  color: var(--ink-muted);
}

.pairing-note {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-top: 2px;
}

.aesthetic-meta-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aesthetic-meta-list dt {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2px;
}

.aesthetic-meta-list dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-secondary);
}


.automation-status {
  /* Two stats per row keeps the sidebar readable instead of a tall single column. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}

.automation-status-item {
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.automation-status-warn {
  border-style: dashed;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Automation stats + EGO.W 精選推薦 curation (grayscale, text-only markers)
   --------------------------------------------------------------------------- */
.automation-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 7px 5px;
  background: var(--surface-subtle);
}

.automation-stat-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.automation-stat-value {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #111111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.curation-hotspot {
  position: relative;
  display: block;
  width: 100%;
  height: 26px;
  border-top: 1px solid transparent;
  background: transparent;
  cursor: default;
}

.curation-hotspot:focus-visible {
  outline: 1px dashed var(--line-strong, #111111);
  outline-offset: -4px;
}

html.curation-mode .curation-hotspot {
  border-top-color: var(--line-strong, #111111);
}

html.curation-mode .resource-grid {
  outline: 1px dashed var(--line-strong, #111111);
  outline-offset: 10px;
}

.resource-card.curation-target {
  cursor: pointer;
}

.resource-card.curation-picked {
  box-shadow: inset 0 0 0 2px var(--ink, #111111);
}

.curation-tick {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong, #111111);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink, #111111);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.curation-picked .curation-tick {
  background: var(--ink, #111111);
  color: var(--surface, #fff);
}

.curation-hotspot:empty::after {
  content: "";
}

.curation-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong, #111111);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.18);
  font-size: 12px;
}

.curation-bar-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.curation-bar-count {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.curation-btn {
  border: 1px solid var(--line-strong, #111111);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #111111);
  padding: 5px 12px;
  font: inherit;
  cursor: pointer;
}

.curation-btn.primary {
  background: var(--ink, #111111);
  color: var(--surface, #fff);
}

.curation-btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.curation-toast {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(520px, 88vw);
  padding: 9px 14px;
  border: 1px solid var(--line-strong, #111111);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--ink, #111111);
  font-size: 12px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.16);
}

.sidebar-link#featured-nav .sidebar-link-icon {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   DOC-025 Home v2 · full-bleed hero, Three.js stage, bilingual typography
   Original media colors; neutral interface. Light by default, dark via [data-theme="dark"].
   ========================================================================== */

.home-intro[hidden] { display: none; }
.home-intro {
  --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --home-pad: clamp(20px, 3.4vw, 56px);
  display: block;
  margin: -40px -48px 0;
  color: var(--ink);
  font-family: var(--font-sans);
}
.home-intro :where(h1, h2, h3, p, dl, dd, ol, ul) { margin: 0; }
.home-intro :where(ol, ul) { padding: 0; list-style: none; }
.home-intro :where(button) { font: inherit; color: inherit; }
.home-intro :where(*) { min-width: 0; }
.home-intro :focus-visible { outline: 2px solid var(--line-focus); outline-offset: 3px; }

/* ---------- hero ---------- */
.home-hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(620px, 100svh, 880px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  isolation: isolate;
}
.home-hero-stage { position: absolute; inset: 0; z-index: 0; }
.home-hero-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 48%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 75% at 72% 48%, #000 0%, transparent 78%);
  pointer-events: none;
}
.home-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.home-hero::after {
  /* legibility scrim under the copy column */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 34%, transparent 58%);
  pointer-events: none;
}

.home-hero-fallback { display: none; }
.no-webgl .home-hero-canvas { display: none; }
.no-webgl .home-hero-fallback {
  position: absolute; top: 10%; right: var(--home-pad); bottom: 22%; width: min(46%, 560px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center;
}
.home-hero-fallback img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line-strong); filter: none;
}

.home-hero-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-chip {
  position: absolute; left: 0; top: 0;
  display: grid; gap: 2px;
  padding: 7px 11px;
  max-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  white-space: nowrap;
  transition: opacity 0.4s var(--home-ease);
  will-change: transform;
}
.hero-chip strong { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.hero-chip span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; }
.hero-chip.unk { border-style: dashed; background: var(--surface-subtle); }
.hero-chip.unk strong { color: var(--ink-secondary); font-weight: 500; }

.home-hero-hint {
  position: absolute; right: var(--home-pad); bottom: 18px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-muted);
  pointer-events: none;
}

.home-hero-copy {
  position: relative; z-index: 3;
  align-self: center;
  width: min(640px, 54%);
  padding: clamp(72px, 10vh, 120px) 0 clamp(40px, 6vh, 72px) var(--home-pad);
  display: flex; flex-direction: column; align-items: flex-start;
}
.home-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.home-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--ink-muted); }
.home-hero-title {
  margin-top: 22px;
  font-weight: 600; color: var(--ink);
  text-wrap: balance; overflow-wrap: normal; word-break: keep-all; line-break: strict;
}
.hero-seg { display: inline-block; max-width: 100%; }
.home-hero-title:lang(zh-Hant) { font-size: clamp(38px, 4.6vw, 76px); line-height: 1.14; letter-spacing: 0.005em; }
.home-hero-title:lang(en)      { font-size: clamp(40px, 4.9vw, 80px); line-height: 1.02; letter-spacing: -0.035em; }
.home-hero-lede {
  margin-top: 24px; max-width: 34em;
  color: var(--ink-secondary); text-wrap: pretty;
}
.home-hero-lede:lang(zh-Hant) { font-size: 16px; line-height: 1.85; letter-spacing: 0.02em; }
.home-hero-lede:lang(en)      { font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; }
.home-hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.home-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background 0.25s var(--home-ease), color 0.25s var(--home-ease), border-color 0.25s var(--home-ease), transform 0.25s var(--home-ease);
}
.home-btn:hover { background: var(--surface-hover); border-color: var(--ink-muted); }
.home-btn:active { transform: scale(0.98); }
.home-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.home-btn.primary:hover { background: var(--ink-secondary); border-color: var(--ink-secondary); }
.home-btn-arrow { display: inline-block; transition: transform 0.3s var(--home-ease); }
.home-btn:hover .home-btn-arrow { transform: translateY(2px); }
.home-btn.after-open:hover .home-btn-arrow { transform: translate(2px, -2px); }

/* ---------- hero bar: stats + before/after ---------- */
.home-hero-bar {
  position: relative; z-index: 3;
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: 18px var(--home-pad);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.home-stats { display: flex; gap: clamp(20px, 3.2vw, 48px); }
.home-stats > div { display: grid; gap: 4px; align-content: center; }
.home-stats dt { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.home-stats dd {
  font-family: var(--font-mono); font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.home-mode { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.home-mode-toggle {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-subtle);
}
.home-mode-toggle button {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background 0.3s var(--home-ease), color 0.3s var(--home-ease), transform 0.2s var(--home-ease);
}
.home-mode-toggle button:hover { color: var(--ink); }
.home-mode-toggle button:active { transform: scale(0.98); }
.home-mode-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.home-mode-cap { display: grid; width: min(340px, 34vw); font-size: 13px; line-height: 1.6; color: var(--ink-secondary); }
.home-mode-cap > span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--home-ease), transform 0.4s var(--home-ease); }
.home-hero[data-mode="before"] .cap-before,
.home-hero[data-mode="after"] .cap-after { opacity: 1; transform: none; }

/* ---------- marquee ---------- */
.home-marquee {
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--home-pad); height: 56px;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.home-marquee-label { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.home-marquee-viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-marquee-track { display: flex; width: max-content; animation: home-marquee 70s linear infinite; }
.home-marquee-viewport:hover .home-marquee-track { animation-play-state: paused; }
.home-marquee-track li { flex: none; padding: 0 22px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }
.home-marquee-track li::before { content: "/"; margin-right: 22px; color: var(--ink-faint); }
@keyframes home-marquee { to { transform: translateX(-50%); } }

/* ---------- blocks ---------- */
.home-block { padding: clamp(64px, 9vw, 112px) var(--home-pad) 0; }
.home-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.home-block-head > div { flex: 1 1 360px; }
.home-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.home-block h2 { margin-top: 14px; font-weight: 600; text-wrap: balance; color: var(--ink); }
.home-block h2:lang(zh-Hant) { font-size: clamp(26px, 3vw, 42px); line-height: 1.25; letter-spacing: 0.005em; }
.home-block h2:lang(en)      { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.home-block-lede { margin-top: 14px; max-width: 38em; color: var(--ink-secondary); text-wrap: pretty; }
.home-block-lede:lang(zh-Hant) { font-size: 15px; line-height: 1.8; letter-spacing: 0.02em; }
.home-block-lede:lang(en)      { font-size: 16px; line-height: 1.6; }

/* ---------- strip ---------- */
.home-strip-scroller {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  margin-right: calc(var(--home-pad) * -1);
  padding-right: var(--home-pad);
}
.strip-card {
  position: relative; flex: 0 0 clamp(248px, 25vw, 320px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  padding: 10px 10px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; overflow: hidden;
  transition: border-color 0.3s var(--home-ease), transform 0.3s var(--home-ease);
}
.strip-card:hover { border-color: var(--ink-muted); transform: translateY(-3px); }
.strip-card:active { transform: scale(0.99); }
.strip-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--surface-subtle); }
.strip-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; transition: transform 0.6s var(--home-ease); }
.strip-card:hover .strip-img img { transform: scale(1.04); }
.strip-title { padding: 0 6px; font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strip-meta { padding: 0 6px; display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.strip-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-lic { flex: none; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-secondary); white-space: nowrap; }

/* ---------- spotlight (pointer driven) ---------- */
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(128, 128, 128, 0.16), transparent 62%);
  opacity: 0; transition: opacity 0.4s var(--home-ease);
}
.spot:hover::after { opacity: 1; }
.spot { position: relative; }

/* ---------- compare ---------- */
.home-brief {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 14px; color: var(--ink-secondary);
}
.home-brief-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
/* 02 compare layers: shared type for both states (frame/slider rules live in the "02 comparison slider" block below) */
.cmp-layer dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.cmp-layer dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; }
.cmp-layer dd { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.cmp-after-body { display: flex; flex-direction: column; gap: 18px; flex: 1; align-items: flex-start; }
.cmp-after-body dl { align-self: stretch; }
.after-record { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.after-open { margin-top: auto; }

/* ---------- steps ---------- */
.home-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-steps li {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden;
  transition: border-color 0.3s var(--home-ease);
}
.home-steps li:hover { border-color: var(--ink-muted); }
.step-no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.1em; }
.home-steps strong { margin-top: 18px; font-size: 18px; font-weight: 600; }
.home-steps p { font-size: 14px; line-height: 1.7; color: var(--ink-secondary); text-wrap: pretty; }
.home-steps code {
  margin-top: auto; padding: 8px 10px; border-radius: 8px; background: var(--surface-subtle); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ink-muted); overflow-wrap: anywhere;
}

/* ---------- close ---------- */
.home-close { padding-bottom: clamp(56px, 8vw, 96px); }
.home-close h2 { margin-bottom: 28px; }
.home-close-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.home-close-chips button {
  min-height: 42px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; cursor: pointer; font-size: 14px;
  transition: background 0.25s var(--home-ease), color 0.25s var(--home-ease), transform 0.2s var(--home-ease);
}
.home-close-chips button:hover { background: var(--ink); color: var(--bg); }
.home-close-chips button:active { transform: scale(0.98); }
.home-note { margin-top: 28px; font-size: 13px; color: var(--ink-muted); }
.home-intro.no-script .home-hero-stage { display: none; }

/* ---------- dark: stronger edges so 3D never melts into the background ---------- */
[data-theme="dark"] .home-hero-stage::before { opacity: 0.8; }
[data-theme="dark"] .hero-chip { border-color: #555555; }
[data-theme="dark"] .cmp-frame { border-color: var(--ink-muted); }
[data-theme="dark"] .strip-card { background: var(--surface); }

/* ---------- sidebar polish ---------- */
.automation-stat { background: transparent; border-color: var(--line); border-radius: 6px; }
.automation-stat-label { color: var(--ink-muted); }
.sidebar-link { transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; }
.sidebar-link:not(.active):hover { padding-left: 15px; }
[data-theme="dark"] .sidebar-link.active .sidebar-link-count { background: rgba(0, 0, 0, 0.18); color: var(--bg); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .home-hero-copy { width: min(620px, 64%); }
  .home-hero::after { background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 34%, transparent 72%); }
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-mode-cap { width: min(300px, 100%); }
}

@media (max-width: 768px) {
  .home-intro { margin: -24px -16px 0; --home-pad: 20px; }
  .home-hero { display: flex; flex-direction: column; min-height: 0; }
  .home-hero::after { display: none; }
  .home-hero-stage { position: relative; inset: auto; height: min(52svh, 420px); order: -1; flex: none; }
  .home-hero-stage::before { -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%); background-size: 48px 48px; }
  .no-webgl .home-hero-fallback { position: absolute; inset: 16px var(--home-pad); width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero-hint { display: none; }
  .hero-chip { padding: 5px 8px; max-width: 150px; }
  .hero-chip strong { font-size: 11px; }
  .hero-chip span { display: none; }
  .home-hero-copy { width: 100%; padding: 28px var(--home-pad) 36px; }
  .home-hero-title:lang(zh-Hant) { font-size: clamp(32px, 9vw, 40px); }
  .home-hero-title:lang(en)      { font-size: clamp(34px, 9.6vw, 44px); }
  .home-hero-actions { width: 100%; }
  .home-hero-actions .home-btn { flex: 1 1 100%; }
  .home-hero-bar { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px var(--home-pad) 24px; }
  .home-stats { justify-content: space-between; gap: 12px; }
  .home-stats dt { white-space: normal; font-size: 11px; }
  .home-mode { flex-direction: column; align-items: stretch; gap: 14px; }
  .home-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; }
  .home-mode-cap { width: 100%; min-height: 3.4em; }
  .home-marquee { gap: 14px; }
  .home-marquee-label { display: none; }
  .home-block-head { align-items: flex-start; }
  .home-strip-scroller { margin-right: calc(var(--home-pad) * -1); }
  .home-brief { border-radius: 14px; }

  /* Mobile top bar: brand, search and toggles only; the library comes first. */
  .threeui-sidebar { padding: 12px 16px; position: sticky; top: 0; z-index: 40; overflow: visible; }
  .sidebar-header { margin-bottom: 0; flex-direction: row; align-items: center; gap: 12px; }
  .sidebar-search { flex: 1; min-width: 0; }
  .sidebar-body,
  .automation-status { display: none; }
  .sidebar-footer { margin-top: 10px; padding-top: 10px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .sidebar-footer .theme-switch-pill { width: auto; flex: 1; max-width: 190px; }
  .sidebar-status-row { flex: 1; min-width: 0; gap: 8px; justify-content: flex-start; }
  .curation-hotspot { display: none; }
}

@media (max-width: 480px) {
  .home-steps { grid-template-columns: 1fr; }
  .cmp-layer dl > div { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro *, .home-intro *::before, .home-intro *::after { transition: none !important; }
  .home-marquee-track { animation: none; }
  .home-marquee-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .home-strip-scroller { scroll-behavior: auto; }
}

/* ==========================================================================
   DOC-025 Front-end v3 · sidebar, status, cards and drawer refinement
   Original media colors; neutral interface. Light by default; dark keeps rim light.
   ========================================================================== */
.threeui-sidebar { padding: 22px 14px 16px; gap: 0; }
[data-theme="dark"] .threeui-sidebar { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05); }

.sidebar-header { gap: 18px; margin-bottom: 26px; }
.sidebar-brand { gap: 11px; padding: 0 4px; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--ink); border-radius: 9px;
  background: var(--ink); color: var(--bg);
}
[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 14px rgba(255, 255, 255, 0.10); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-code { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-muted); }
.brand-logo { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }

.sidebar-search input { height: 38px; padding: 0 56px 0 34px; border-radius: 10px; background: var(--surface); font-size: 13px; }
.sidebar-search input:focus { box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.22); }
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 5px;
  color: var(--ink-muted); background: var(--surface-subtle); pointer-events: none;
}
.sidebar-search input:not(:placeholder-shown) ~ .search-kbd { display: none; }
.clear-search-btn { right: 10px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.clear-search-btn:hover { background: var(--surface-hover); color: var(--ink); }

.sidebar-body { gap: 26px; }
.sidebar-group-title { font-size: 10.5px; letter-spacing: 0.14em; margin: 0 0 8px; padding-left: 12px; color: var(--ink-muted); }
.sidebar-menu { gap: 2px; }
.sidebar-link { padding: 8px 12px; border-radius: 8px; gap: 10px; font-size: 13px; line-height: 1.3; position: relative; }
.sidebar-link:not(.active):hover { padding-left: 12px; background: var(--surface-hover); }
.sidebar-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sidebar-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; opacity: 0.7; }
.sidebar-link#featured-nav .sidebar-link-icon { font-family: inherit; font-size: inherit; letter-spacing: 0; }
.sidebar-link-text { white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar-link-count {
  min-width: 26px; text-align: center; background: transparent; padding: 0;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.sidebar-link.active { background: var(--ink); color: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
[data-theme="dark"] .sidebar-link.active { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.sidebar-link.active .sidebar-link-count,
[data-theme="dark"] .sidebar-link.active .sidebar-link-count { background: transparent; color: var(--bg); opacity: 0.75; }

.sidebar-footer { padding-top: 14px; gap: 12px; }
.sidebar-status-row { justify-content: flex-start; font-size: 11px; letter-spacing: 0.01em; }
.index-status { display: inline-flex; align-items: center; gap: 7px; }
.index-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }

.automation-status { display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
.automation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.automation-stat { padding: 7px 9px 8px; gap: 3px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.automation-stat-label { font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--ink-muted); white-space: normal; line-height: 1.25; }
.automation-stat-value { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.automation-status-warn {
  margin: 0; padding: 7px 9px; border: 1px dashed var(--line-strong); border-radius: 8px;
  font-size: 11px; line-height: 1.45; font-weight: 600; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere;
}

.sidebar-controls { display: flex; align-items: center; gap: 8px; }
.sidebar-controls .theme-switch-pill { flex: 1; min-width: 0; padding: 3px; border-radius: 10px; background: var(--surface-hover); }
.theme-pill-btn { padding: 6px 0; border-radius: 8px; font-size: 12px; }
.theme-pill-btn.active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
[data-theme="dark"] .theme-pill-btn.active { background: var(--ink); color: var(--bg); box-shadow: none; }
.theme-pill-btn:focus-visible, .lang-toggle-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-toggle-btn {
  flex: none; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 10px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  transition: background 0.15s ease;
}
.lang-toggle-btn:hover { background: var(--surface-hover); }

/* main heading */
.main-hero { margin-bottom: 26px; }
.main-eyebrow { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-muted); }
.main-title { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.035em; line-height: 1.12; }
.main-subtitle { font-size: 15px; line-height: 1.7; }

/* cards */
.resource-card { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.resource-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
[data-theme="dark"] .resource-card { border-color: #2e2e2e; }
[data-theme="dark"] .resource-card:hover { border-color: #5a5a5a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.5); }
.card-tag { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.category-count { font-variant-numeric: tabular-nums; margin-left: 6px; opacity: 0.65; font-size: 11px; }

/* drawer */
[data-theme="dark"] .detail-drawer,
[data-theme="dark"] .detail-shell { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.10); }

@media (hover: none), (max-width: 768px) { .search-kbd { display: none; } .sidebar-search input { padding-right: 34px; } }

@media (max-width: 768px) {
  .threeui-sidebar { padding: 10px 14px; }
  .sidebar-header { gap: 10px; }
  .brand-text { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .sidebar-controls { flex: none; gap: 6px; }
  .sidebar-controls .theme-switch-pill { flex: none; width: auto; max-width: none; }
  .theme-pill-btn { padding: 6px 12px; }
  .sidebar-footer .theme-switch-pill { flex: none; max-width: none; }
  .sidebar-status-row { display: none; }
  .sidebar-footer { margin-top: 8px; padding-top: 8px; justify-content: flex-end; }
  .main-title { font-size: 26px; }
}

/* compact desktop sidebar so the footer controls stay in view at 900px height */
@media (min-width: 769px) {
  .threeui-sidebar { padding-top: 18px; }
  .sidebar-header { margin-bottom: 18px; gap: 14px; }
  .sidebar-body { gap: 16px; }
  .sidebar-group-title { margin-bottom: 4px; }
  .sidebar-link { padding: 6px 12px; }
  .sidebar-footer { padding-top: 10px; gap: 8px; }
  .automation-stat { padding: 5px 9px 6px; }
}
@media (min-width: 769px) and (max-height: 820px) {
  .automation-status { display: none; }
}

@media (max-width: 768px) {
  .automation-status { display: none !important; }
  .sidebar-footer { flex-direction: row; }
}

/* v3: drawer title breathing room */
.detail-main { padding-top: 10px; }
.detail-main h2 { margin-top: 2px; }

/* v4: indigo accent (primary actions, focus, selection only) */
::selection { background: var(--accent-soft); color: var(--ink); }
:root { --line-focus: var(--accent); }
[data-theme="dark"] { --line-focus: var(--accent); }
.sidebar-link.active,
.category-button[aria-current="page"],
.sort-pill-btn.active,
.home-btn.primary,
.home-mode-toggle button[aria-pressed="true"],
[data-theme="dark"] .theme-pill-btn.active,
.theme-pill-btn.active,
.detail-actions a:first-child,
.brand-mark,
.three-toggle,
.aesthetic-role-badge {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.home-btn.primary:hover { filter: brightness(1.06); }
.home-close-chips button:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.index-status::before { background: var(--accent); }
.sidebar-link:focus-visible,
.theme-pill-btn:focus-visible,
.lang-toggle-btn:focus-visible,
.home-intro :focus-visible,
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link { background: var(--accent); color: var(--accent-ink); }
.home-btn:not(.primary):hover,
.resource-card:hover { border-color: var(--accent-line); }
.hero-chip strong { color: var(--ink); }
.home-hero-stage::before {
  background-image:
    linear-gradient(var(--accent-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-line) 1px, transparent 1px);
}
[data-theme="dark"] .resource-card,
[data-theme="dark"] .hero-chip,
[data-theme="dark"] .automation-stat { box-shadow: var(--rim); }

.publication-activity { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr) auto; align-items: center; gap: 12px 36px; padding: 22px 28px; margin-bottom: 36px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface, #fff)) 0%, var(--surface, #fff) 70%); }
.pub-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pub-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink-secondary); }
.pub-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: pub-pulse 2.4s ease-out infinite; }
.pub-line { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.pub-line strong { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 1.35em; margin-inline: 2px; }
.pub-bars { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; height: 56px; padding: 0; margin: 0; }
.pub-bars li { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.pub-bar { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--ink-muted) 38%, transparent); transform-origin: bottom; animation: pub-grow .6s cubic-bezier(.2,.8,.2,1) both; transition: background .2s; }
.pub-bar[data-empty="1"] { background: var(--line); }
.pub-bar[data-today="1"] { background: var(--accent); }
.pub-bars li:hover .pub-bar { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.pub-today { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: 8px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pub-today strong { font-size: 22px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.pub-today span { font-size: 11px; color: var(--ink-secondary); }
.publication-note { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-secondary); }
.publication-activity:not([hidden]) + .home-intro { margin-top: 0; }
[data-theme="dark"] .publication-activity { box-shadow: var(--rim); }
@keyframes pub-grow { from { transform: scaleY(.15); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes pub-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .pub-bar, .pub-eyebrow::before { animation: none; } }
@media (max-width: 900px) {
  .publication-activity { grid-template-columns: 1fr auto; padding: 18px 20px; }
  .pub-bars { grid-column: 1 / -1; order: 3; }
}

body.archive-library-open .threeui-main> :not(#archive-library-panel):not(#archive-library-mobile-nav):not(.collapsed-brand){display:none!important}
body.archive-library-open .threeui-main{padding:0;min-width:0}
#archive-library-panel{height:100dvh;min-width:0}#archive-library-frame{display:block;width:100%;height:100%;border:0;background:var(--bg,#fff)}
#archive-library-nav.active{box-shadow:inset 0 0 0 1px currentColor}
#archive-library-unavailable{padding:28px}

@media(max-width:800px){body.archive-library-open .theme-switch-pill{min-width:90px}body.archive-library-open .theme-pill-btn{min-width:40px}}

#archive-library-mobile-nav{display:none}@media(max-width:800px){#archive-library-mobile-nav{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border,#ddd)}#archive-library-mobile-nav button{min-height:44px;min-width:80px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:8px;padding:6px 12px;background:transparent;color:inherit}}


/* v3: collapsible sidebar + icon tooltip */
.sidebar-toggle { position: relative; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-secondary); cursor: pointer; transition: color .15s, background .15s; }
.sidebar-toggle:hover { color: var(--ink); background: var(--surface-hover); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="dark"] .sidebar-toggle { box-shadow: var(--rim); }
.sidebar-toggle[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 5px 9px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.sidebar-toggle:hover::after, .sidebar-toggle:focus-visible::after { opacity: 1; }
.threeui-sidebar { transition: width .25s cubic-bezier(.2,.8,.2,1), padding .25s, opacity .2s; }
body.sidebar-collapsed .threeui-sidebar { width: 0; padding-left: 0; padding-right: 0; border-right-width: 0; opacity: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: width .25s cubic-bezier(.2,.8,.2,1), padding .25s, opacity .2s, visibility 0s .25s; }
@media (hover: none) { .sidebar-toggle[data-tip]::after { display: none; } }
@media (max-width: 800px) { .sidebar-toggle { display: none; } body.sidebar-collapsed .threeui-sidebar { width: auto; opacity: 1; visibility: visible; pointer-events: auto; padding: 20px 16px; } body.sidebar-collapsed .threeui-main { padding-left: 20px; } }
@media (prefers-reduced-motion: reduce) { .threeui-sidebar, .sidebar-toggle { transition: none; } }

/* Keep the full project name clear of the desktop collapse control. */
@media (min-width: 801px) {
  .threeui-layout { --sidebar-width: 340px; }
  .threeui-sidebar { width: var(--sidebar-width); }
  .sidebar-brand { min-width: 0; }
}

/* Curation password / confirm dialogs + bookmark control */
.curation-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #6b7280);
}
.curation-picked .curation-bookmark,
.curation-bookmark[aria-pressed="true"] {
  color: var(--accent, #4f46e5);
}
.curation-bookmark-icon { display: block; }
.curation-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: calc(100vw - 2rem);
}
.curation-dialog::backdrop { background: rgba(17, 24, 39, 0.45); }
.curation-dialog-card {
  width: min(420px, 100%);
  margin: 0;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-elevated, #fff);
  color: var(--text, #111827);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
  display: grid;
  gap: 0.7rem;
}
.curation-dialog-title { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.curation-dialog-body,
.curation-dialog-label { margin: 0; color: var(--text-muted, #6b7280); font-size: 0.9rem; }
.curation-dialog-input {
  width: 100%;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-muted, #f8f9fa);
  color: inherit;
}
.curation-dialog-error { margin: 0; color: #b91c1c; font-size: 0.85rem; }
.curation-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}
/* Dialog card is always a light surface; theme --ink flips to white in dark mode,
   which made the outline Cancel button text invisible. Pin dialog button colours to the card. */
.curation-dialog .curation-btn {
  color: var(--text, #111827);
  border-color: var(--text, #111827);
  background: transparent;
}
.curation-dialog .curation-btn.primary {
  background: var(--text, #111827);
  color: var(--bg-elevated, #fff);
}
/* Featured-mode bar: keep label + count + Cancel + Save & exit on one row on phones. */
.curation-bar { width: max-content; max-width: calc(100vw - 20px); }
.curation-bar .curation-btn,
.curation-bar-label { white-space: nowrap; }
@media (max-width: 520px) {
  .curation-bar {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
    justify-content: center;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    padding: 7px 10px;
  }
  .curation-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .curation-bar .curation-btn { flex: none; padding: 7px 12px; min-height: 34px; }
  .curation-toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* Curation hotspot progress: five dots, 1/5..5/5 */
.curation-progress {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  display: inline-flex; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); pointer-events: none;
}
.curation-progress[hidden] { display: none; }
.curation-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #d1d5db); transition: background .15s; }
.curation-dot.on { background: var(--accent, #4f46e5); }
@media (prefers-reduced-motion: reduce) { .curation-dot { transition: none; } }

/* ===== Home below-hero redesign (Ego 14:18): banded sections, 3D cover flow, comparison ledger ===== */
.home-block { position: relative; padding-bottom: clamp(64px, 9vw, 112px); border-top: 1px solid var(--line); }
.home-strip, .home-steps-block { background: var(--surface-subtle); }
.home-compare, .home-close { background: var(--bg); }
.home-block-head .home-kicker { display: inline-flex; align-items: center; gap: 12px; }
.home-block-head .home-kicker::after { content: ""; width: 48px; height: 1px; background: var(--accent-line); }
.home-block::before {
  content: attr(data-no); position: absolute; top: clamp(24px, 4vw, 48px); right: var(--home-pad);
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(64px, 11vw, 148px); line-height: 0.8;
  letter-spacing: -0.06em; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none;
}
.home-block > * { position: relative; }

/* 01 cover flow */
.home-strip-scroller.is-coverflow {
  position: relative; display: block; margin: 0 calc(var(--home-pad) * -1); padding: 0;
  /* clip (not hidden): hidden is still a scroll container that wheel/focus can shift, which pushed every card off-screen */
  overflow: hidden; overflow: clip; scroll-snap-type: none;
  height: clamp(380px, 31vw, 440px); perspective: 1400px; perspective-origin: 50% 40%;
  touch-action: pan-y; user-select: none; outline: none;
}
.home-strip-scroller.is-coverflow::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 6%; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 16%, transparent), transparent); pointer-events: none;
}
.is-coverflow .strip-card {
  scroll-snap-align: none;
  --w: clamp(220px, 24vw, 320px);
  position: absolute; left: calc(50% - var(--w) / 2); top: 4%; width: var(--w); flex: none;
  transform: translateX(calc(var(--o) * var(--w) * 0.62)) translateZ(calc(var(--a) * -150px)) rotateY(calc(var(--s) * -38deg)) scale(calc(1 - var(--a) * 0.04));
  z-index: calc(20 - var(--a)); opacity: calc(1 - var(--a) * 0.18);
  transition: transform 0.7s var(--home-ease), opacity 0.7s var(--home-ease), border-color 0.3s, box-shadow 0.7s;
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink) 35%, transparent);
  -webkit-box-reflect: below 6px linear-gradient(transparent 72%, color-mix(in srgb, var(--bg) 22%, transparent));
}
.is-coverflow .strip-card:not(.is-center) { filter: saturate(0.6); }
.is-coverflow .strip-card:not(.is-center) .strip-meta, .is-coverflow .strip-card:not(.is-center) .strip-title { opacity: 0.45; }
.is-coverflow .strip-card.is-far { opacity: 0; pointer-events: none; }
.is-coverflow .strip-card.is-center { border-color: var(--accent-line); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 1px var(--accent-line); }
.is-coverflow .strip-card:hover { transform: translateX(calc(var(--o) * var(--w) * 0.62)) translateZ(calc(var(--a) * -150px + 20px)) rotateY(calc(var(--s) * -32deg)); }
.is-coverflow .strip-card:hover .strip-img img { transform: none; }

/* 02 comparison slider: both states share ONE grid cell (frame height = taller layer); "before" sits on top and is clipped by --pos */
.cmp-frame {
  --pos: 50%;
  position: relative; display: grid; border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden;
  background: var(--surface); touch-action: pan-y; user-select: none; cursor: ew-resize;
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 30%, transparent);
}
.cmp-layer { grid-area: 1 / 1; min-width: 0; padding: clamp(64px, 6vw, 76px) clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px); align-content: start; }
.cmp-after { background: var(--surface); }
.cmp-after .after-record { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; }
.cmp-after dd { color: var(--ink); font-weight: 500; }
.cmp-after dd::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0.75em 0.12em 0.1em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cmp-before {
  background: repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--ink) 5%, transparent) 9px 10px), var(--surface-subtle);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cmp-before dd { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink-muted); }
.cmp-before dd::before { content: "\00D7"; display: inline-block; width: 1.4em; text-decoration: none; color: var(--ink-faint); font-family: var(--font-mono); }
.cmp-tag {
  position: absolute; top: 20px; z-index: 3; margin: 0; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-muted);
}
.cmp-tag-before { left: 20px; }
.cmp-tag-after { right: 20px; color: var(--accent); border-color: var(--accent-line); }
.cmp-divider { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.cmp-handle {
  position: absolute; z-index: 5; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--bg);
  font-size: 18px; line-height: 1; cursor: grab; outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 80%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: box-shadow 0.25s var(--home-ease);
}
.cmp-frame.is-dragging .cmp-handle { cursor: grabbing; }
.cmp-handle:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }

/* 03 steps: connected track */
.home-steps { counter-reset: s; gap: 0; border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; background: var(--surface); }
.home-steps li { border: 0; border-radius: 0; border-right: 1px solid var(--line); background: transparent; }
.home-steps li:last-child { border-right: 0; }
.home-steps li:hover { background: var(--accent-soft); }
.home-steps .step-no { color: var(--accent); }

/* closing chips band */
.home-close { text-align: center; }
.home-close h2 { margin-inline: auto; }
.home-close .home-close-chips { justify-content: center; }

@media (max-width: 1100px) {
  .home-steps li:nth-child(2) { border-right: 0; }
  .home-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .cmp-layer { padding: 60px 18px 20px; }
  .cmp-tag { top: 14px; font-size: 11px; padding: 5px 10px; letter-spacing: 0.04em; text-transform: none; }
  .cmp-tag-before { left: 14px; } .cmp-tag-after { right: 14px; }
  .cmp-after-body { gap: 14px; }
  .home-steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-steps li:last-child { border-bottom: 0; }
  .home-strip-scroller.is-coverflow { height: 400px; }
  .is-coverflow .strip-card { --w: min(68vw, 280px); transform: translateX(calc(var(--o) * var(--w) * 0.5)) translateZ(calc(var(--a) * -140px)) rotateY(calc(var(--s) * -42deg)); }
  .home-block::before { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-coverflow .strip-card { transition: none; }
}

/* ===== v2 section backdrops (Ego 14:40) ===== */
.home-block, .home-close { overflow: hidden; isolation: isolate; }
.home-close { position: relative; }
.hb-layer { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transform: translate3d(0, calc((var(--hb-p, 0.5) - 0.5) * -40px), 0); }
.hb-layer > canvas, .hb-layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-block > :not(.hb-layer), .home-close > :not(.hb-layer) { position: relative; z-index: 1; }
.home-block::before { z-index: 1; transform: translate3d(0, calc((var(--hb-p, 0.5) - 0.5) * 140px), 0); }
.hb-dots { -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%); }
.hb-threads { opacity: 0.9; }
.hb-route {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
.hb-rings { opacity: 0.8; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.home-steps { box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 30%, transparent); }
.home-close .home-close-chips button { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .hb-layer, .home-block::before { transform: none; }
}

/* ===== v3/v4: scroll reveals + depth parallax ===== */
.home-intro { position: relative; }
/* depth parallax composes with reveal transforms via the independent translate property */
.home-block-head, .cmp-frame, .home-steps, .home-close h2 { translate: 0 var(--py, 0px); }
/* reveals only when JS armed them (html.rv-on); otherwise content is static and visible */
html.rv-on .home-intro [data-rv] {
  transition: opacity .9s var(--home-ease), transform .9s var(--home-ease), filter .9s var(--home-ease), clip-path 1.1s var(--home-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.rv-on .home-intro [data-rv="fade-up"]:not(.is-in) { opacity: 0; transform: translateY(28px); }
html.rv-on .home-intro [data-rv="blur-in"]:not(.is-in) { opacity: 0; filter: blur(10px); transform: translateY(12px); }
html.rv-on .home-intro [data-rv="rise"]:not(.is-in) { opacity: 0; transform: translateY(60px) scale(0.96); }
.home-intro [data-rv="split"] .rv-w { display: inline-block; white-space: pre; }
html.rv-on .home-intro [data-rv="split"] .rv-w {
  transition: opacity .7s var(--home-ease), transform .8s var(--home-ease), filter .7s var(--home-ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
html.rv-on .home-intro [data-rv="split"]:not(.is-in) .rv-w { opacity: 0; transform: translateY(0.6em) rotate(2deg); filter: blur(6px); }
html.rv-on .home-block:has([data-rv="split"]:not(.is-in))::before { opacity: 0; }
.home-block::before { transition: opacity 1.2s var(--home-ease); }
@media (prefers-reduced-motion: reduce) {
  .home-block-head, .cmp-frame, .home-steps, .home-close h2 { translate: none; }
}
/* v5 integration: on wider screens each state lays out in its own half, so both read fully at the 50% rest position;
   dragging then covers one side with the other. Narrow screens keep full-width overlap (drag to either end to read). */
@media (min-width: 769px) {
  .cmp-before dl { max-width: calc(50% - 44px); }
  .cmp-after .cmp-after-body { margin-left: calc(50% + 44px); }
}
/* v6 (Ego 17:10): minimal prev/next under the 01 cover flow; drives the cover-flow index only */
.cf-nav { display: flex; justify-content: center; gap: 14px; margin-top: 8px; position: relative; z-index: 2; }
.cf-nav[hidden] { display: none; }
.cf-btn {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-secondary); cursor: pointer;
  transition: border-color .25s var(--home-ease), color .25s var(--home-ease), background .25s var(--home-ease), transform .2s var(--home-ease);
}
.cf-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.cf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; color: var(--accent); }
.cf-btn:active { transform: scale(0.94); }
@media (max-width: 768px) { .cf-nav { margin-top: 4px; } .cf-btn { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cf-btn { transition: none; } }

/* ===== v7 (Ego 17:11): sidebar fixed header/footer with scrolling middle, clear group separation, new brand mark ===== */
.brand-mark, [data-theme="dark"] .brand-mark { width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; }
.brand-mark svg { display: block; }
.brand-mark .brand-mark-code { stroke: var(--accent); }
@media (min-width: 801px) {
  .threeui-sidebar { overflow: hidden; }
  .sidebar-header, .sidebar-footer { flex: none; }
  .sidebar-header { margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .sidebar-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -14px; padding: 14px 14px 18px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
    /* soft fade at both scroll edges */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
  }
  .sidebar-footer { margin-top: 0; }
}
.sidebar-body { gap: 0; }
.sidebar-nav-group { padding: 16px 0; }
.sidebar-nav-group + .sidebar-nav-group { border-top: 1px solid var(--line); }
.sidebar-nav-group:first-child { padding-top: 4px; }
.sidebar-group-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-left: 12px;
  font-family: var(--font-sans, inherit); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink);
}
.sidebar-group-title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); flex: none; }

/* v8 (Ego 17:33): distinct-item group totals beside group headings */
.sidebar-group-title .sidebar-group-count { margin-left: auto; padding-right: 10px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-tertiary, var(--ink-secondary)); cursor: help; }

/* v9 (Ego 17:45): high-contrast mono brand mark = same tile as the app icon */
.brand-mark, [data-theme="dark"] .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #0a0a0a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); display: grid; place-items: center; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark .brand-mark-code { stroke: #fff; }
[data-theme="dark"] .brand-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* v10 (Ego 18:00): hero sized to the organized card grid; no empty band above the headline in either state */
@media (min-width: 769px) {
  .home-hero { min-height: calc(clamp(620px, 100svh, 880px) * 0.72); }
  .home-hero-copy { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(36px, 5vh, 56px); }
}

/* ===== v11 (Ego 18:16): mobile top bar + off-canvas drawer with the full sidebar (<=800px). Desktop untouched. ===== */
.mobile-topbar, .mnav-scrim, .mnav-close { display: none; }
@media (max-width: 800px) {
  .threeui-layout { flex-direction: column; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 60;
    min-height: 56px; padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .mtb-btn {
    flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mtb-btn:active { background: var(--surface-hover, rgba(127,127,127,.12)); }
  .mtb-btn:focus-visible, .mnav-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .mtb-brand { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
  .mtb-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtb-brand .brand-mark { width: 28px; height: 28px; border-radius: 7px; flex: none; }
  .mtb-brand .brand-mark svg { width: 18px; height: 18px; }

  #main-sidebar.threeui-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(86vw, 340px); height: 100vh; height: 100dvh; margin: 0;
    padding: calc(14px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    display: flex; flex-direction: column; overflow: hidden; opacity: 1; pointer-events: auto;
    background: var(--bg); border: 0; border-right: 1px solid var(--line);
    transform: translateX(-104%); visibility: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
  }
  body.mnav-open #main-sidebar.threeui-sidebar { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 24px 64px rgba(0,0,0,.28); }
  #main-sidebar .sidebar-header { position: relative; flex: none; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
  #main-sidebar .sidebar-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 52px; }
  #main-sidebar .brand-text { display: inline; }
  #main-sidebar .brand-mark { width: 30px; height: 30px; }
  #main-sidebar .sidebar-search { width: 100%; }
  #main-sidebar .sidebar-search input { min-height: 44px; font-size: 16px; }
  .mnav-close { display: inline-grid; place-items: center; position: absolute; top: 0; right: -6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink-secondary); cursor: pointer; }
  #main-sidebar .sidebar-body {
    display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 6px 16px 16px; gap: 0;
  }
  #main-sidebar .sidebar-link { min-height: 44px; padding: 8px 12px; }
  #main-sidebar .sidebar-footer { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
  #main-sidebar .sidebar-status-row { display: flex; }
  #main-sidebar .sidebar-controls { display: flex; gap: 8px; }
  #main-sidebar .sidebar-controls .theme-switch-pill { flex: 1; max-width: none; }
  #main-sidebar .theme-pill-btn, #main-sidebar .lang-toggle-btn { min-height: 44px; }
  #main-sidebar .lang-toggle-btn { min-width: 52px; }
  .mnav-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }
  body.mnav-open { position: fixed; left: 0; right: 0; overflow: hidden; }
  body.mnav-open .curation-bar {
    left: auto;
    right: 8px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: calc(100vw - min(86vw, 340px) - 16px);
    min-width: 0;
    transform: none;
    gap: 0;
    padding: 6px;
    pointer-events: none;
  }
  body.mnav-open .curation-bar > :not(#curation-count) { display: none; }
  body.mnav-open .curation-bar-count { min-width: 0; padding: 0; }
  #archive-library-mobile-nav { display: none !important; }
  .threeui-main { overflow-x: clip; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  #main-sidebar.threeui-sidebar, body.mnav-open #main-sidebar.threeui-sidebar, .mnav-scrim { transition: none; }
}

/* v12 (Ego 18:35 / 18:36): in-page logo = glyph only in currentColor (black in light, white in dark; favicons keep the tile).
   Mobile top bar: no search button; 44px | 1fr | 44px grid, empty right column = spacer so the logo is truly centred. */
.brand-mark, [data-theme="dark"] .brand-mark, .mtb-brand .brand-mark { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; color: var(--ink) !important; }
.brand-mark .brand-mark-code { stroke: currentColor !important; }
.brand-mark svg { width: 26px; height: 26px; }
@media (max-width: 800px) {
  .mobile-topbar { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #mnav-open { grid-column: 1; }
  .mtb-brand { grid-column: 2; justify-self: center; justify-content: center; max-width: 100%; padding: 0 8px; }
  .mtb-brand .brand-mark svg { width: 24px; height: 24px; }
}

/* ===== v13 (Ego 19:58): 03 steps rotating swipe deck (Gemini gemini-3.8-flash, reviewed) ===== */
.sd {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: pan-y;
  outline: none;
}

.sd:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 20px;
}

.home-steps.is-deck {
  --card-w: 360px;
  --peek: 300px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: clip;
  overflow-clip-margin: 24px;
  perspective: 1200px;
  touch-action: pan-y;
  background: transparent;
  box-shadow: none;
  display: block;
  border: none;
  border-radius: 0;
}

@media (max-width: 800px) {
  .home-steps.is-deck {
    --card-w: min(78vw, 320px);
    --peek: calc(var(--card-w) * 0.62);
  }
}

.home-steps.is-deck > li.spot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  user-select: none;
  z-index: calc(10 - var(--a, 0));
  height: auto;
  opacity: calc(1 - var(--a, 0) * 0.45);
  transform: translateX(calc(var(--o, 0) * var(--peek) + var(--drag, 0px)))
    translateZ(calc(var(--a, 0) * -120px))
    rotateY(calc(var(--o, 0) * -18deg))
    scale(calc(1 - var(--a, 0) * 0.08));
  transition: transform 0.55s var(--home-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
    opacity 0.4s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

[data-theme="dark"] .home-steps.is-deck > li.spot {
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.45);
}

.sd.is-dragging .home-steps.is-deck > li.spot {
  transition: none;
}

.home-steps.is-deck > li.spot[aria-current="step"] {
  border-color: var(--accent);
  cursor: default;
  box-shadow: 0 14px 38px -8px var(--accent-soft, rgba(0, 0, 0, 0.2));
}

.sd-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.sd-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.sd-btn:hover,
.sd-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.sd-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sd-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.sd-dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}

.sd-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--line-strong);
  transition: width 0.3s var(--home-ease, ease), background 0.3s ease;
}

.sd-dot[aria-selected="true"]::before {
  width: 22px;
  background: var(--accent);
}

.sd-dot:focus-visible::before {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* the reveal tagger skips deck cards; the whole deck reveals as one block */
.home-steps.is-deck > li.spot:hover { border-color: var(--line-strong); }
.home-steps.is-deck > li.spot[aria-current="step"]:hover { border-color: var(--accent); }
.home-steps.is-deck > li.spot[style*="--a: 2"], .home-steps.is-deck > li.spot[style*="--a:2"] { pointer-events: none; }
/* v13 review: neighbours stay opaque (no see-through text); only their content dims, far cards hide */
.home-steps.is-deck > li.spot { opacity: calc(1 - max(0, var(--a, 0) - 1)); }
.home-steps.is-deck > li.spot > * { opacity: calc(1 - var(--a, 0) * 0.5); transition: opacity .4s ease; }
.home-steps.is-deck > li.spot:not([aria-current]) { box-shadow: 0 8px 24px -14px rgba(0,0,0,.18); }
.sd:focus:not(:focus-visible) { outline: none; }

/* v15 editorial card face (Gemini gemini-3.8-flash proposal, reviewed) */
.home-steps.is-deck > li.spot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: radial-gradient(circle at 100% 0%, var(--accent-soft) 0%, transparent 60%);
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

[data-theme="dark"] .home-steps.is-deck > li.spot {
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
}

.home-steps.is-deck > li.spot[aria-current="step"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.home-steps.is-deck > li.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -2;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at top right, #000 15%, transparent 75%);
}

.home-steps.is-deck > li.spot::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  pointer-events: none;
}

.home-steps.is-deck > li.spot .step-no {
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: -1;
  font-family: var(--font-mono);
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
  pointer-events: none;
}

.home-steps.is-deck > li.spot[aria-current="step"] .step-no {
  -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 60%, var(--line-strong));
}

.home-steps.is-deck > li.spot strong {
  display: block;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.home-steps.is-deck > li.spot strong::before {
  display: block;
  margin-bottom: 10px;
  padding-left: 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 50% / 14px 1.5px;
}

.home-steps.is-deck > li.spot:nth-child(1) strong::before { content: "STEP 01 · SEARCH"; }
.home-steps.is-deck > li.spot:nth-child(2) strong::before { content: "STEP 02 · READ"; }
.home-steps.is-deck > li.spot:nth-child(3) strong::before { content: "STEP 03 · REUSE"; }
.home-steps.is-deck > li.spot:nth-child(4) strong::before { content: "STEP 04 · VERIFY"; }

.home-steps.is-deck > li.spot p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-secondary);
  max-width: 28ch;
}

.home-steps.is-deck > li.spot code {
  position: relative;
  display: block;
  margin-top: auto;
  padding: 10px 12px 10px 30px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #0d0d0f;
  color: #e7e7ea;
}

[data-theme="dark"] .home-steps.is-deck > li.spot code {
  background-color: #16161a;
  border: 1px solid #2a2a30;
}

.home-steps.is-deck > li.spot code::before {
  content: "$";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 800px) {
  .home-steps.is-deck > li.spot {
    min-height: 280px;
    padding: 22px 20px 18px;
  }
  .home-steps.is-deck > li.spot .step-no {
    font-size: 96px;
    top: -8px;
    right: -4px;
  }
  .home-steps.is-deck > li.spot strong {
    font-size: 38px;
  }
}
.home-steps.is-deck > li.spot > .step-no { opacity: calc(1 - var(--a, 0) * 0.6); }
@media (prefers-reduced-motion: reduce) { .home-intro [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; } }
/* v16: pull title+description down toward the chip */
.home-steps.is-deck > li.spot strong { margin-top: auto; }
.home-steps.is-deck > li.spot code { margin-top: 8px; }
.home-steps.is-deck > li.spot p { margin-top: -2px; }
/* v17: kicker pinned top, title+desc centred, chip bottom; no arrow buttons */
.home-steps.is-deck > li.spot strong::before { position: absolute; top: 26px; left: 24px; margin: 0; }
.home-steps.is-deck > li.spot { padding-top: 52px; }
.home-steps.is-deck > li.spot strong { margin-top: auto; }
.home-steps.is-deck > li.spot p { margin-bottom: auto; }
.home-steps.is-deck > li.spot code { margin-top: 8px; }
.sd-ctrl .sd-btn { display: none; }
@media (max-width: 800px) {
  .home-steps.is-deck > li.spot strong::before { top: 22px; left: 20px; }
  .home-steps.is-deck > li.spot { padding-top: 46px; }
}
/* v18 mobile: visual + 使用前/使用後 toggle together, then stats, then copy + CTAs */
@media (max-width: 800px) {
  .home-hero > .home-hero-stage { order: 1; }
  .home-hero > .home-hero-bar { order: 2; margin-top: 0; }
  .home-hero > .home-hero-bar .home-mode { order: -1; }
  .home-hero > .home-hero-copy { order: 3; }
}

/* v19 mobile detail header: label+close on row1, KR id pill full-width wrap on row2 */
@media (max-width: 800px) {
  .detail-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 16px 12px;
    margin: -24px -16px 0;
  }
  .detail-header > div {
    display: contents;
  }
  .detail-header .detail-label {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .detail-header #close-detail,
  .detail-header .icon-button {
    grid-column: 2;
    grid-row: 1;
  }
  .detail-header .detail-position {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    padding: 4px 8px;
  }
}

/* v21: star (featured) + bookmark (EGO.W 推薦) edit-mode icons, filter checkbox */
.curation-icons { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 6px; }
.curation-icons .curation-tick { position: static; }
.curation-icons .curation-tick[aria-pressed="true"] { background: var(--ink, #111111); color: var(--surface, #fff); }
.curation-picked .curation-icons .curation-tick[aria-pressed="false"] { background: rgba(255, 255, 255, 0.94); color: var(--ink, #111111); }
.curation-star-icon { display: block; }
.resource-card.curation-rec-picked { outline: 2px dashed var(--ink, #111111); outline-offset: -5px; }
.detail-curation-row { display: flex; margin-bottom: 8px; }
.detail-curation-icons { position: static; }
.detail-curation-icons .curation-tick { width: 34px; height: 34px; }
.filter-panel .filter-check { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.filter-panel .filter-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink, #111111); }

/* v22 (Ego 14:2x): the collapse control lives in the sidebar header row, never floating.
   Open: same row as the brand, right side. Collapsed: a slim rail keeps the button at the
   same spot and the main content starts after the rail, so no title is covered. Mobile (<=800px) unchanged. */
.sidebar-brand-row { display: contents; }
@media (min-width: 801px) {
  .threeui-layout { --sidebar-rail: 60px; }
  .sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .sidebar-brand-row .sidebar-brand { flex: 1 1 auto; min-width: 0; }
  .sidebar-brand-row .brand-logo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar-toggle[data-tip]::after { left: auto; right: 0; top: calc(100% + 6px); transform: none; z-index: 2; }
  body.sidebar-collapsed .threeui-sidebar {
    width: var(--sidebar-rail); padding-left: 0; padding-right: 0; border-right-width: 1px;
    opacity: 1; visibility: visible; pointer-events: auto; overflow: visible;
    transition: width .25s cubic-bezier(.2,.8,.2,1), padding .25s;
  }
  body.sidebar-collapsed .threeui-sidebar > :not(.sidebar-header):not(.sidebar-rail-tools):not(.language-menu),
  body.sidebar-collapsed .sidebar-header > :not(.sidebar-brand-row),
  body.sidebar-collapsed .sidebar-brand-row > :not(.sidebar-toggle) { display: none; }
  body.sidebar-collapsed .sidebar-header { padding-bottom: 0; border-bottom-color: transparent; }
  body.sidebar-collapsed .sidebar-brand-row { justify-content: center; }
  body.sidebar-collapsed .sidebar-toggle[data-tip]::after { right: auto; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
}

/* v23 (Ego 14:5x): collapsed rail shortcuts at the bottom: search, language, theme. Desktop/tablet only. */
.sidebar-rail-tools { display: none; }
@media (min-width: 801px) {
  body.sidebar-collapsed .threeui-sidebar { padding-bottom: 16px; }
  body.sidebar-collapsed .sidebar-rail-tools { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; }
  .rail-lang-text { font-size: 12px; font-weight: 650; letter-spacing: .02em; line-height: 1; }
  .rail-btn .rail-icon-sun { display: none; }
  [data-theme="dark"] .rail-btn .rail-icon-sun { display: block; }
  [data-theme="dark"] .rail-btn .rail-icon-moon { display: none; }
}

/* v23 (Ego 14:58): collapsed sidebar → line-art logo glitches into the top-centre of the main area (in flow, so it never covers titles). */
.collapsed-brand { display: none; }
@media (min-width: 801px) {
  body.sidebar-collapsed .collapsed-brand, .collapsed-brand.is-out { display: flex; justify-content: center; align-items: center; height: 44px; margin: -26px 0 14px; position: relative; z-index: 2; }
  body.archive-library-open.sidebar-collapsed .collapsed-brand, body.archive-library-open .collapsed-brand.is-out { margin: 0; height: 52px; }
  body.archive-library-open.sidebar-collapsed #archive-library-panel, body.archive-library-open:has(.collapsed-brand.is-out) #archive-library-panel { height: calc(100dvh - 52px); }
  .collapsed-brand-inner { position: relative; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
  .collapsed-brand-inner svg { display: block; flex: none; }
  .collapsed-brand-inner::after { content: ""; position: absolute; inset: -4px -8px; pointer-events: none; opacity: 0; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 22%, transparent) 0 1px, transparent 1px 3px); mix-blend-mode: normal; }
  body.sidebar-collapsed .collapsed-brand-inner { animation: cb-glitch-in .42s steps(1, end) both; }
  body.sidebar-collapsed .collapsed-brand-inner::after { animation: cb-scan .42s steps(1, end) both; }
  .collapsed-brand.is-out .collapsed-brand-inner { animation: cb-glitch-out .38s steps(1, end) both; }
  .collapsed-brand.is-out .collapsed-brand-inner::after { animation: cb-scan .38s steps(1, end) both; }
}
@keyframes cb-glitch-in {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; filter: none; }
  8%   { opacity: 1; clip-path: inset(42% 0 44% 0); transform: translateX(-7px); filter: drop-shadow(3px 0 #ff1f5a) drop-shadow(-3px 0 #00e1ff); }
  18%  { opacity: .25; clip-path: inset(8% 0 72% 0); transform: translateX(6px); }
  28%  { opacity: 1; clip-path: inset(66% 0 6% 0); transform: translateX(-4px) skewX(-8deg); }
  40%  { opacity: .55; clip-path: inset(0 0 48% 0); transform: translateX(4px); filter: drop-shadow(-2px 0 #ff1f5a) drop-shadow(2px 0 #00e1ff); }
  54%  { opacity: 1; clip-path: inset(28% 0 18% 0); transform: translateX(-2px); }
  68%  { opacity: .8; clip-path: inset(0 0 0 0); transform: translateX(2px); filter: drop-shadow(1.5px 0 #ff1f5a) drop-shadow(-1.5px 0 #00e1ff); }
  82%  { opacity: 1; clip-path: inset(0); transform: translateX(-1px); filter: drop-shadow(1px 0 #ff1f5a) drop-shadow(-1px 0 #00e1ff); }
  100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
}
@keyframes cb-glitch-out {
  0%   { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
  14%  { opacity: 1; clip-path: inset(0); transform: translateX(2px); filter: drop-shadow(2px 0 #ff1f5a) drop-shadow(-2px 0 #00e1ff); }
  28%  { opacity: .6; clip-path: inset(30% 0 22% 0); transform: translateX(-4px) skewX(8deg); }
  42%  { opacity: 1; clip-path: inset(0 0 55% 0); transform: translateX(6px); filter: drop-shadow(-3px 0 #ff1f5a) drop-shadow(3px 0 #00e1ff); }
  58%  { opacity: .3; clip-path: inset(62% 0 8% 0); transform: translateX(-6px); }
  74%  { opacity: .8; clip-path: inset(44% 0 46% 0); transform: translateX(8px); }
  88%  { opacity: .15; clip-path: inset(48% 0 50% 0); transform: translateX(-3px); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; filter: none; }
}
@keyframes cb-scan { 0% { opacity: 0; } 10% { opacity: .9; } 30% { opacity: .3; } 50% { opacity: .8; } 75% { opacity: .4; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.sidebar-collapsed .collapsed-brand-inner, .collapsed-brand.is-out .collapsed-brand-inner { animation: cb-fade .2s ease both; }
  .collapsed-brand.is-out .collapsed-brand-inner { animation-direction: reverse; }
  body.sidebar-collapsed .collapsed-brand-inner::after, .collapsed-brand.is-out .collapsed-brand-inner::after { animation: none; }
}
@keyframes cb-fade { from { opacity: 0; } to { opacity: 1; } }

/* v24 (Ego 14:59): sound toggle + click glitch burst. */
.sound-toggle-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 8px; }
.snd-off { display: none; }
[data-sound="off"] .snd-on { display: none; }
[data-sound="off"] .snd-off { display: block; }
[data-sound="off"] [data-sound-toggle] { color: var(--ink-muted, var(--ink-secondary)); }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; contain: strict; }
/* v26 (Ego 16:18): subtle ripple instead of the RGB pixel burst. Dark ring on light, light ring on dark. */
.fx-ripple { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(10, 10, 10, .42); box-shadow: 0 0 6px rgba(10, 10, 10, .10), inset 0 0 6px rgba(10, 10, 10, .06);
  transform: scale(.15); opacity: 0; animation: fx-ripple .42s cubic-bezier(.2, .7, .3, 1) forwards; }
[data-theme="dark"] .fx-ripple { border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 6px rgba(255, 255, 255, .10), inset 0 0 6px rgba(255, 255, 255, .06); }
.fx-ripple.fx-lite { width: 36px; height: 36px; margin: -18px 0 0 -18px; box-shadow: none; }
@keyframes fx-ripple { 0% { transform: scale(.15); opacity: .9; } 60% { opacity: .45; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-ripple { display: none; } }

/* v25 (Ego 15:47): ambient (layer sits over the solid page bg only, so normal blending = multiply/screen look; cheaper)  ink/fluid background video (opt4) on the bookmark/category library pages only.
   Fixed full-viewport layer behind the layout; cards keep their opaque surfaces. */
:root { --bgfx-opacity: .12; --bgfx-blend: multiply; --bgfx-scan-opacity: .035; --bgfx-grain-opacity: .05; }
[data-theme="dark"] { --bgfx-opacity: .14; --bgfx-blend: screen; --bgfx-scan-opacity: .06; --bgfx-grain-opacity: .06; }
/* v27 (Ego 16:18): opt4 more prominent — stronger opacity + slight contrast lift; scanlines/grain kept. */
:root { --bgfx-opacity: .28; }
[data-theme="dark"] { --bgfx-opacity: .32; }
.bgfx { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
body.bgfx-on .bgfx { display: block; }
body.bgfx-on .threeui-layout { position: relative; z-index: 1; }
body.bgfx-on .threeui-main { background: transparent; }
.bgfx__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--bgfx-opacity); filter: var(--bgfx-filter, none); transform: translateZ(0); transition: opacity .6s ease; }
.bgfx__scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,var(--bgfx-scan-opacity)) 0 1px, transparent 1px 4px); }
[data-theme="dark"] .bgfx__scan { background: repeating-linear-gradient(to bottom, rgba(255,255,255,var(--bgfx-scan-opacity)) 0 1px, transparent 1px 4px); }
.bgfx__grain { position: absolute; inset: -50%; opacity: var(--bgfx-grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: bgfx-grain 1.2s steps(6) infinite; }
@keyframes bgfx-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.bgfx.is-glitch .bgfx__video { animation: bgfx-glitch .18s steps(2) 1; }
@keyframes bgfx-glitch { 0% { transform: translate(0,0); filter: none; } 50% { transform: translate(-6px,0) skewX(-2deg); filter: hue-rotate(25deg) saturate(1.6); } 100% { transform: translate(0,0); filter: none; } }
.bgfx--poster { background: var(--bgfx-poster) center / cover no-repeat; }
.bgfx--poster::before { content: none; }
.bgfx--poster .bgfx__video { display: none; }
.bgfx--poster { opacity: var(--bgfx-opacity); }
@media (prefers-reduced-motion: reduce) { .bgfx__grain { animation: none; } .bgfx.is-glitch .bgfx__video { animation: none; } }

/* v28c (Ego 17:38): equal-width footer controls + neutral Instagram card glyphs. */
.sidebar-controls { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; width: 100%; }
.sidebar-controls .theme-switch-pill[hidden] { display: none; flex: none; }
.sidebar-controls > .lang-toggle-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: 40px; min-height: 40px; padding: 0; }
#theme-toggle .rail-icon-sun { display: none; }
html[data-theme="dark"] #theme-toggle .rail-icon-sun { display: block; }
html[data-theme="dark"] #theme-toggle .rail-icon-moon { display: none; }
#ig-toggle svg, #rail-ig svg { display: block; flex: none; }
.ig-dialog { position: fixed; inset: 0; width: min(92vw, 420px); max-width: 92vw; max-height: 90dvh; box-sizing: border-box; margin: auto; padding: 20px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.ig-dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.language-menu { position: fixed; inset: auto; z-index: 10000; width: 216px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; box-sizing: border-box; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); box-shadow: 0 18px 40px rgba(0,0,0,.18); --language-accent: #4f46e5; }
.language-menu[hidden] { display: none; }
[data-theme="dark"] .language-menu { --language-accent: #818cf8; }
.language-menu-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.language-menu-option:hover, .language-menu-option:focus-visible { background: var(--surface-hover); border-color: var(--language-accent); outline: none; }
.language-menu-option[aria-checked="true"] { color: var(--language-accent); }
.language-menu-code { margin-inline-start: auto; color: var(--ink-secondary); font-size: 11px; }
.language-menu-check { width: 12px; height: 12px; flex: none; position: relative; }
.language-menu-option[aria-checked="true"] .language-menu-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ig-dialog-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ig-dialog-heading { flex: 1; min-width: 0; }
#ig-dialog-title { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; }
#ig-dialog-subtitle { margin: 6px 0 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.5; }
.ig-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-secondary); font: inherit; font-size: 22px; cursor: pointer; }
.ig-dialog-options { display: grid; gap: 10px; }
.ig-dialog-options a { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.5; text-decoration: none; }
.ig-card-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-hover); color: var(--ink); }
.ig-card-icon svg { display: block; flex: none; }
.ig-profile-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ig-profile-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ig-profile-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ig-language-badge { flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.ig-language-zh { color: #6833ac; background: #f1e9fb; }
.ig-language-en { color: #275e9b; background: #e9f2fc; }
html[data-theme="dark"] .ig-language-zh { color: #d5b9ff; background: #322345; }
html[data-theme="dark"] .ig-language-en { color: #b2d5ff; background: #20334a; }
.ig-profile-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-secondary); font-size: 12px; }
.ig-profile-action { color: var(--accent); font-size: 11px; font-weight: 600; }
.ig-dialog-options a:hover, .ig-dialog-options a:focus-visible { border-color: var(--accent); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.ig-dialog-close:hover { background: var(--surface-hover); border-color: var(--accent); }
.ig-dialog-options a:focus-visible, .ig-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes ig-dialog-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .ig-dialog[open] { animation: ig-dialog-in 160ms ease-out; }
  .ig-dialog-options a { transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out; }
  .ig-dialog-options a:hover, .ig-dialog-options a:focus-visible { transform: translateY(-1px); }
}
@media (max-width: 800px) {
  #main-sidebar .sidebar-controls { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
  #main-sidebar .sidebar-controls > .lang-toggle-btn { flex: 1 1 0; min-width: 0; height: 44px; min-height: 44px; }
}

/* v28 live: logo C + intro C auto-enter + smooth fade-out */
/* v28 intro (Claude Sonnet) */
#site-intro{position:fixed;inset:0;z-index:2147483000;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;animation:si-safety 0s 12s forwards;--si-acc:var(--accent,#7c3aed)}
#site-intro[hidden]{display:none}
@keyframes si-safety{to{opacity:0;visibility:hidden;pointer-events:none}}
#site-intro.si-ready{animation:none}
#site-intro .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.si-fx{position:absolute;inset:0;pointer-events:none}
.si-scan{background:repeating-linear-gradient(0deg,transparent 0 2px,color-mix(in srgb,var(--ink) 7%,transparent) 2px 3px);opacity:.7}
.si-grain{opacity:.07;background-image:radial-gradient(var(--ink) .5px,transparent .6px),radial-gradient(var(--ink) .5px,transparent .6px);background-size:3px 3px,5px 5px;background-position:0 0,1px 2px;animation:si-grain .6s steps(4) infinite}
@keyframes si-grain{25%{background-position:1px 1px,3px 0}50%{background-position:2px 0,0 3px}75%{background-position:0 2px,2px 1px}}
.si-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:5;background:transparent;border:1px solid var(--line);color:var(--ink-secondary);font:600 12px/1 inherit;font-family:inherit;letter-spacing:.08em;padding:9px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.si-skip:hover,.si-skip:focus-visible{color:var(--ink);border-color:var(--si-acc)}
.si-skip:focus-visible,.si-enter:focus-visible{outline:2px solid var(--si-acc);outline-offset:3px}
.si-stage{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 16px;text-align:center}
.si-zone{position:relative;width:min(78vw,720px);min-height:clamp(60px,12vw,120px);display:flex;align-items:center;justify-content:center}
.si-box{position:relative;width:100%}
.si-logo{width:100%;opacity:0;position:relative;color:var(--ink)}
.si-logo svg{display:block;width:100%;height:auto;max-height:30vh;overflow:visible}
.si-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:none}
.si-a-line{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-weight:700;letter-spacing:.14em;font-size:clamp(14px,3.6vw,30px);white-space:nowrap;color:var(--ink)}
.si-a-line .si-cl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply;pointer-events:none}
html[data-theme="dark"] .si-a-line .si-cl{mix-blend-mode:screen}
.si-a-line .si-cl.c{color:#00e5ff;transform:translateX(-4px)}
.si-a-line .si-cl.m{color:#ff2bd6;transform:translateX(4px)}
.si-a-line .si-sl{position:absolute;left:0;right:0;overflow:hidden}
.si-bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--si-acc);box-shadow:0 0 12px var(--si-acc);opacity:0;display:none}
.si-crt{position:absolute;inset:-40px -10%;display:none;pointer-events:none}
.si-crt-flash{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--si-acc);box-shadow:0 0 18px var(--si-acc);transform:scale(0,.01);opacity:0}
.si-boot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:94%;text-align:left;font-size:clamp(11px,2.9vw,15px);line-height:1.8;color:var(--ink-secondary);white-space:pre}
.si-boot b{color:var(--si-acc);font-weight:600}
.si-credit{margin:0;min-height:1.2em;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-secondary);opacity:0;transition:opacity .5s}
.si-credit.on{opacity:1}
.si-credit em{font-style:normal;color:var(--si-acc)}
.si-gate{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;visibility:hidden}
#site-intro[data-state="gate"] .si-gate,#site-intro[data-state="exit"] .si-gate{opacity:1;transform:none;visibility:visible}
.si-enter{font:600 15px/1 inherit;font-family:inherit;letter-spacing:.18em;color:var(--ink);background:transparent;border:1.5px solid var(--si-acc);border-radius:999px;padding:15px 34px;min-height:48px;cursor:pointer;animation:si-pulse 2s ease-in-out infinite}
.si-enter:hover{background:color-mix(in srgb,var(--si-acc) 14%,transparent)}
@keyframes si-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--si-acc) 45%,transparent)}60%{box-shadow:0 0 0 12px transparent}}
.si-hint,.si-sound{margin:0;font-size:11px;letter-spacing:.14em;color:var(--ink-secondary)}
.si-sound{opacity:.8}
.si-zone{min-height:clamp(84px,14vw,130px)}
.si-a-line .si-sl{inset:0;display:flex;align-items:center;justify-content:center}
.si-a-line .si-sl>span,.si-a-line .si-cl>span,.si-a-line .si-t{display:block;white-space:pre}
.si-a-line .si-sl>span{will-change:transform}
.si-logo .si-lc{position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:multiply}
html[data-theme="dark"] .si-logo .si-lc{mix-blend-mode:screen}
.si-logo .si-lc.c{color:#00e5ff;transform:translateX(-5px)}
.si-logo .si-lc.m{color:#ff2bd6;transform:translateX(5px)}
.si-logo.si-show{opacity:1}
.si-logo.si-fade{transition:opacity .45s ease}
.si-logo.si-jit{animation:si-jit .36s steps(1) 1}
@keyframes si-jit{0%{transform:translate(-4px,1px)}20%{transform:translate(5px,-2px)}40%{transform:translate(-2px,0)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,-1px)}100%{transform:none}}
.si-logo.si-wipe{opacity:1;animation:si-wipe .75s linear forwards}
@keyframes si-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.si-bar.run{display:block;animation:si-bar .75s linear forwards}
@keyframes si-bar{0%{top:0;opacity:1}100%{top:calc(100% - 2px);opacity:1}}
.si-crt.run{display:block}
.si-crt.run .si-crt-flash{animation:si-crt-on .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes si-crt-on{0%{transform:scale(0,.01);opacity:1}35%{transform:scale(1,.01);opacity:1}100%{transform:scale(1,1);opacity:0}}
.si-boot{transition:opacity .3s}
#site-intro{transition:opacity .5s ease}
#site-intro[data-state="exit"]{pointer-events:none;opacity:0}
#site-intro.si-rm{transition:opacity .25s ease}
#site-intro.si-rm *{animation-duration:0s!important}
#site-intro.si-rm .si-enter{animation:none}
#site-intro.si-rm:not([data-state=exit]){animation:si-rmfade .2s ease both}
@keyframes si-rmfade{from{opacity:0}to{opacity:1}}
#site-intro.si-rm .si-logo{opacity:1}
#site-intro.si-rm .si-credit{opacity:1;transition:none}
#site-intro.si-rm .si-gate{transition:opacity .2s}
@media (max-width:520px){.si-credit{letter-spacing:.22em;font-size:10px}.si-stage{gap:18px}.si-enter{padding:14px 28px}.si-zone{width:min(86vw,720px)}}
@media (prefers-reduced-motion:reduce){.si-grain,.si-enter{animation:none}}

/* v28c-introC-auto (Claude Sonnet): variant C auto-enter, ghost code layers behind logo */
#site-intro.si-auto .si-gate{display:none!important}
.si-ghost{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;font-size:clamp(10px,2.4vw,14px);color:var(--ink)}
.si-ghost .si-gl{position:absolute;white-space:pre;opacity:0;letter-spacing:.04em;animation:si-gin var(--d,3s) ease-out var(--dl,0s) both}
.si-ghost .si-gl.l1{font-size:.85em;filter:blur(1px);--o:.18}
.si-ghost .si-gl.l2{--o:.28}
.si-ghost .si-gl.l3{font-size:1.1em;color:var(--si-acc);--o:.36}
@keyframes si-gin{0%{opacity:0;transform:translate(0,10px)}25%{opacity:var(--o,.15)}85%{opacity:var(--o,.15)}100%{opacity:0;transform:translate(var(--dx,-24px),-14px)}}
.si-ghost::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--si-acc) 14%,transparent),transparent);animation:si-sweep 2.4s linear .2s 1 both}
@keyframes si-sweep{to{top:105%}}
#site-intro.si-auto .si-logo.si-show{animation:si-cin .5s ease-out both}
@keyframes si-cin{0%{opacity:0;transform:translateY(6px);filter:blur(3px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
#site-intro.si-rm .si-ghost{display:none}

.sidebar-brand .brand-mark,.mtb-brand .brand-mark,.collapsed-brand .brand-mark{display:block;flex:none;color:currentColor}

/* v35 (Ego): desktop only - 03 steps deck had ~180px of empty grid below the cards
   (24px dots gap + 44px dot row + 112px section padding). Trim it; mobile untouched. */
@media (min-width: 801px) {
  .home-steps-block { padding-bottom: clamp(36px, 3.5vw, 52px); }
  .home-steps-block .sd-ctrl { margin-top: 12px; }
}