:root {
  --chain-bg: #f7f1e8;
  --chain-surface: #fffdfc;
  --chain-surface-soft: #f2eadf;
  --chain-ink: #24313d;
  --chain-muted: #66716f;
  --chain-blue: #415a77;
  --chain-sage: #44755d;
  --chain-coral: #d46a4c;
  --chain-line: #ddd1c4;
  --chain-line-strong: #cbbdaf;
  --chain-radius-sm: 10px;
  --chain-radius: 18px;
  --chain-radius-lg: 28px;
  --chain-shadow: 0 18px 46px rgba(60, 48, 38, .10);
  --chain-shadow-hover: 0 24px 58px rgba(60, 48, 38, .15);
  --chain-ease: cubic-bezier(.2, .7, .2, 1);
}

body.workbench-tool-entry,
body.workbench-tool-detail {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--chain-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(68, 117, 93, .055), transparent 31rem),
    radial-gradient(circle at 92% 2%, rgba(65, 90, 119, .055), transparent 29rem),
    var(--chain-bg) !important;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.workbench-tool-entry::before,
body.workbench-tool-detail::before {
  opacity: .16 !important;
  background-size: 96px 96px !important;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .36), transparent 76%) !important;
}

/* Shared entry-page shell */
body.workbench-tool-entry {
  --scene-rgb: 65, 90, 119;
  --mx: 50%;
  --my: 22%;
}

body.workbench-tool-entry .scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none !important;
}

body.workbench-tool-entry #ambientCanvas {
  opacity: .25 !important;
  filter: saturate(.62);
}

body.workbench-tool-entry > :not(.scene) {
  position: relative;
  z-index: 1;
}

body.workbench-tool-entry .topbar,
body.workbench-tool-detail .topbar,
body.workbench-tool-detail .site-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--chain-ink) !important;
  border-bottom: 1px solid rgba(203, 189, 175, .72) !important;
  background: rgba(247, 241, 232, .90) !important;
  box-shadow: 0 8px 26px rgba(60, 48, 38, .045);
  backdrop-filter: blur(18px) saturate(1.04);
}

body.workbench-tool-entry .nav,
body.workbench-tool-detail .nav,
body.workbench-tool-detail .site-nav {
  width: min(1180px, calc(100% - 40px));
  min-height: 66px;
  margin: 0 auto;
}

body.workbench-tool-entry :is(.brand, .links a),
body.workbench-tool-detail :is(.brand, .nav-links a, .site-brand, .site-links a) {
  color: var(--chain-ink) !important;
  text-decoration: none;
}

body.workbench-tool-entry :is(.brand, .site-brand),
body.workbench-tool-detail :is(.brand, .site-brand) {
  font-weight: 900;
  letter-spacing: -.01em;
}

body.workbench-tool-entry :is(.mark, .brand-mark),
body.workbench-tool-detail :is(.brand-mark, .site-mark) {
  border: 1px solid rgba(65, 90, 119, .22) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--chain-blue) !important;
  box-shadow: 0 8px 18px rgba(65, 90, 119, .13) !important;
}

body.workbench-tool-entry .subject-mark {
  overflow: hidden;
  background: var(--chain-surface-soft) !important;
}

body.workbench-tool-entry .subject-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.workbench-tool-entry .links,
body.workbench-tool-detail :is(.nav-links, .site-links) {
  color: var(--chain-muted) !important;
}

body.workbench-tool-entry .links a,
body.workbench-tool-detail :is(.nav-links a, .site-links a) {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

body.workbench-tool-entry .links a:hover,
body.workbench-tool-entry .links a.active,
body.workbench-tool-detail :is(.nav-links a, .site-links a):hover,
body.workbench-tool-detail :is(.nav-links a, .site-links a).active {
  color: var(--chain-blue) !important;
  border-color: var(--chain-line) !important;
  background: rgba(255, 253, 252, .92) !important;
}

body.workbench-tool-entry main {
  color: var(--chain-ink);
}

body.workbench-tool-entry .hero {
  padding: 52px 0 30px !important;
  border: 0 !important;
  background: transparent !important;
}

body.workbench-tool-entry :is(.crumb, .lead, .section-head .count) {
  color: var(--chain-muted) !important;
}

body.workbench-tool-entry :is(.eyebrow, .section-kicker, .meta) {
  color: var(--chain-sage) !important;
}

body.workbench-tool-entry h1 {
  max-width: 920px;
  margin-bottom: 12px;
  color: var(--chain-ink) !important;
  font-size: clamp(44px, 5.4vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

body.workbench-tool-entry .lead {
  font-size: 16px;
  font-weight: 700;
}

body.workbench-tool-entry :is(.stage-tab, .chip) {
  color: var(--chain-muted) !important;
  border-color: var(--chain-line) !important;
  background: rgba(255, 253, 252, .78) !important;
  box-shadow: none !important;
}

body.workbench-tool-entry :is(.stage-tab, .chip).active {
  color: #fff !important;
  border-color: var(--chain-sage) !important;
  background: var(--chain-sage) !important;
}

body.workbench-tool-entry .catalog {
  background: transparent !important;
}

body.workbench-tool-entry .section-head {
  border-color: rgba(203, 189, 175, .72) !important;
}

body.workbench-tool-entry .section-head h2 {
  color: var(--chain-ink) !important;
}

body.workbench-tool-entry .resource-grid {
  gap: 22px !important;
}

body.workbench-tool-entry .resource-card {
  overflow: hidden;
  color: var(--chain-ink) !important;
  border: 1px solid var(--chain-line) !important;
  border-radius: var(--chain-radius) !important;
  background: var(--chain-surface) !important;
  box-shadow: var(--chain-shadow) !important;
  transform: translateY(0) !important;
  transition: transform .24s var(--chain-ease), box-shadow .24s var(--chain-ease), border-color .24s ease !important;
}

body.workbench-tool-entry .resource-card:hover,
body.workbench-tool-entry .resource-card:focus-visible {
  border-color: rgba(68, 117, 93, .42) !important;
  box-shadow: var(--chain-shadow-hover) !important;
  transform: translateY(-5px) !important;
}

body.workbench-tool-entry .resource-card .cover {
  border: 0 !important;
  border-bottom: 1px solid var(--chain-line) !important;
  background: var(--chain-surface-soft) !important;
}

body.workbench-tool-entry .resource-card .cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.workbench-tool-entry .cover-index {
  color: #fff !important;
  background: rgba(65, 90, 119, .90) !important;
  box-shadow: none !important;
}

body.workbench-tool-entry .card-body {
  color: var(--chain-ink) !important;
  background: var(--chain-surface) !important;
}

body.workbench-tool-entry .card-body :is(h3, p) {
  color: inherit !important;
}

body.workbench-tool-entry .card-body p {
  color: var(--chain-muted) !important;
}

body.workbench-tool-entry .go {
  color: var(--chain-blue) !important;
}

body.workbench-tool-entry .go .arrow {
  color: #fff !important;
  background: var(--chain-blue) !important;
  transition: transform .2s ease;
}

body.workbench-tool-entry .resource-card:hover .arrow,
body.workbench-tool-entry .resource-card:focus-visible .arrow {
  transform: translateX(3px);
}

body.workbench-tool-entry .roadmap-section {
  border-top-color: var(--chain-line) !important;
}

body.workbench-tool-entry :is(.roadmap-section-head h2, .roadmap-title) {
  color: var(--chain-ink) !important;
}

body.workbench-tool-entry :is(.roadmap-intro, .roadmap-summary, .roadmap-meta) {
  color: var(--chain-muted) !important;
}

body.workbench-tool-entry .roadmap-card {
  border-color: var(--chain-line) !important;
  border-radius: var(--chain-radius) !important;
  background: var(--chain-surface) !important;
  box-shadow: 0 12px 34px rgba(60, 48, 38, .075) !important;
}

body.workbench-tool-entry .roadmap-card:hover,
body.workbench-tool-entry .roadmap-card:focus-visible {
  border-color: rgba(65, 90, 119, .38) !important;
  box-shadow: var(--chain-shadow) !important;
}

body.workbench-tool-entry footer,
body.workbench-tool-detail .site-footer,
body.workbench-tool-detail footer {
  color: var(--chain-muted) !important;
  border-top-color: rgba(203, 189, 175, .72) !important;
  background: rgba(242, 234, 223, .76) !important;
}

/* Shared detail-page shell: teaching visualizations retain their own semantic palette. */
body.workbench-tool-detail {
  --chain-page-width: 1180px;
}

body.workbench-tool-detail :is(.hero, .tool-heading) {
  color: var(--chain-ink) !important;
  background: transparent !important;
  text-shadow: none !important;
}

body.workbench-tool-detail :is(.hero, .tool-heading) h1 {
  color: var(--chain-ink) !important;
  text-shadow: none !important;
  letter-spacing: -.035em !important;
}

body.workbench-tool-detail :is(.hero, .tool-heading) :is(.lead, .tool-purpose) {
  color: var(--chain-muted) !important;
}

body.workbench-tool-detail :is(.hero, .tool-heading) :is(.eyebrow, .tool-kicker) {
  color: var(--chain-sage) !important;
}

body.workbench-tool-detail :is(.hero, .tool-heading) :is(.chip, .tool-tag) {
  color: var(--chain-muted) !important;
  border-color: var(--chain-line) !important;
  background: rgba(255, 253, 252, .78) !important;
  box-shadow: none !important;
}

body.workbench-tool-detail :is(.hero, .tool-heading) :is(.chip.is-live, .tool-tag.is-live) {
  color: #fff !important;
  border-color: var(--chain-sage) !important;
  background: var(--chain-sage) !important;
}

body.workbench-tool-detail :is(.lab, .lab-shell, .experiment-shell, .tool-shell) {
  border-radius: var(--chain-radius-lg) !important;
}

body.workbench-tool-detail :is(.control-panel, .control-deck) {
  border-color: var(--chain-line) !important;
  border-radius: var(--chain-radius) !important;
  box-shadow: var(--chain-shadow) !important;
}

body.workbench-tool-detail .resource-strip {
  border-color: var(--chain-line) !important;
  border-radius: 16px !important;
  color: var(--chain-ink) !important;
  background: rgba(255, 253, 252, .94) !important;
  box-shadow: var(--chain-shadow) !important;
}

body.workbench-tool-detail .trial-pill {
  color: #fff !important;
  background: var(--chain-sage) !important;
}

body.workbench-tool-detail .resource-code {
  color: var(--chain-muted) !important;
}

body.workbench-tool-detail .strip-button {
  min-height: 40px;
  color: var(--chain-blue) !important;
  border-color: var(--chain-line-strong) !important;
  border-radius: 10px !important;
  background: var(--chain-surface) !important;
}

body.workbench-tool-detail .strip-button.primary {
  color: #fff !important;
  border-color: var(--chain-sage) !important;
  background: var(--chain-sage) !important;
}

body.workbench-tool-detail .resource-modal {
  background: rgba(36, 49, 61, .46) !important;
}

body.workbench-tool-detail .resource-modal-card {
  color: var(--chain-ink) !important;
  border-color: var(--chain-line) !important;
  border-radius: 20px !important;
  background: var(--chain-surface) !important;
  box-shadow: 0 28px 80px rgba(36, 49, 61, .22) !important;
}

body.workbench-tool-detail .resource-modal-card :is(h2, h3, strong) {
  color: var(--chain-ink) !important;
}

body.workbench-tool-detail .resource-modal-card :is(p, ul, .modal-head p) {
  color: var(--chain-muted) !important;
}

body.workbench-tool-detail .resource-modal-card :is(.modal-head, .detail-block) {
  border-color: var(--chain-line) !important;
}

body.workbench-tool-detail .modal-close {
  color: var(--chain-ink) !important;
  border-color: var(--chain-line) !important;
  border-radius: 10px !important;
  background: var(--chain-surface-soft) !important;
}

body.workbench-tool-detail :where(button, input, select, textarea, a) {
  transition: transform .18s var(--chain-ease), box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

body.workbench-tool-detail :where(button:not(:disabled)):active,
body.workbench-tool-entry :where(a, button):active {
  transform: translateY(1px) scale(.99) !important;
}

body.workbench-tool-entry :where(a, button):focus-visible,
body.workbench-tool-detail :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(65, 90, 119, .68) !important;
  outline-offset: 3px !important;
}

@media (max-width: 720px) {
  body.workbench-tool-entry .nav,
  body.workbench-tool-detail .nav,
  body.workbench-tool-detail .site-nav {
    width: 100%;
    padding: 10px 14px 9px;
  }

  body.workbench-tool-entry .hero {
    padding: 34px 0 22px !important;
  }

  body.workbench-tool-entry h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  body.workbench-tool-entry .resource-grid {
    gap: 16px !important;
  }

  body.workbench-tool-entry .resource-card,
  body.workbench-tool-entry .roadmap-card {
    border-radius: 16px !important;
  }

  body.workbench-tool-detail .resource-strip {
    border-radius: 14px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.workbench-tool-entry .resource-card:hover,
  body.workbench-tool-detail :where(button:not(:disabled), .strip-button):hover {
    box-shadow: var(--chain-shadow-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workbench-tool-entry *,
  body.workbench-tool-entry *::before,
  body.workbench-tool-entry *::after,
  body.workbench-tool-detail *,
  body.workbench-tool-detail *::before,
  body.workbench-tool-detail *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.workbench-tool-entry .resource-card,
  body.workbench-tool-entry .roadmap-card,
  body.workbench-tool-detail :where(button, .strip-button) {
    transform: none !important;
  }
}