:root {
  --bg: #05070b;
  --panel: #0d1017;
  --panel2: #101622;
  --line: #253044;
  --text: #f5f7fb;
  --muted: #96a0b2;
  --red: #b72c33;
  --red-deep: #82151d;
  --cyan: #19d8ed;
  --blue: #476dff;
  --purple: #7655ff;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 18px;
  --radius-panel: 24px;
  --ui-ease: 220ms ease;
}

body {
  color: var(--text);
  background-color: var(--bg);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

a,
button,
summary {
  transition: color var(--ui-ease), border-color var(--ui-ease), background var(--ui-ease), transform var(--ui-ease), box-shadow var(--ui-ease), filter var(--ui-ease);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(25,216,237,.34);
  outline-offset: 4px;
}

.eyebrow,
.code,
.step-label,
.panel-label,
.commerce-case-kicker {
  color: var(--cyan);
  font-family: Consolas, ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: .12em;
}

h1,
h2,
h3 {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 900;
  text-wrap: balance;
}

.back,
.backlink {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.055);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.back:hover,
.backlink:hover {
  border-color: rgba(25,216,237,.58);
  background: rgba(25,216,237,.08);
  transform: translateX(-2px);
}

.top,
.topbar {
  border-bottom-color: var(--line);
  background: rgba(5,7,11,.9);
  backdrop-filter: blur(16px);
}
.nav a,
.section-nav a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.nav a:hover,
.nav a.on,
.nav a.active,
.section-nav a:hover,
.section-nav a.active {
  color: #fff;
  border-color: var(--cyan);
}

.media,
.action,
.asset,
.hudnode,
.promptbox,
.shotcard,
.sop,
.pain-card,
.fit-card,
.method-panel,
.result-panel,
.diagnosis-panel,
.priority,
.flow-node,
.process-step,
.asset-card,
.architecture-panel,
.workflow-preview,
.console-preview,
.publish-card,
.image-preview,
.hero-process,
.excel-viewer {
  border-color: var(--line);
  background-color: var(--panel);
}

.media,
.promptbox,
.result-panel,
.diagnosis-panel,
.method-panel,
.hero-process,
.excel-viewer,
.architecture-panel,
.workflow-preview,
.console-preview,
.publish-card,
.image-preview {
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.action,
.asset,
.hudnode,
.shotcard,
.sop,
.pain-card,
.fit-card,
.priority,
.flow-node,
.process-step,
.asset-card,
.workflow-step {
  border-radius: var(--radius-card);
}

.badge,
.modelnote,
.hero-path span,
.tab-nav button {
  border-radius: 999px;
}

.cta,
.publish-open-link {
  color: #fff;
  border: 1px solid rgba(255,92,101,.36);
  border-radius: var(--radius-card);
  background: linear-gradient(118deg, #9a1b22 0%, #7c141b 50%, #521016 100%);
  box-shadow: 0 18px 38px rgba(88,0,7,.28), 0 0 28px rgba(183,44,51,.12);
}
.cta:hover,
.publish-open-link:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(88,0,7,.34), 0 0 34px rgba(183,44,51,.16);
}
.cta-icon,
.cta-arrow {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
}

.copy,
.dialog-close {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  color: #fff;
  background: rgba(255,255,255,.055);
}
.copy:hover,
.dialog-close:hover {
  border-color: rgba(25,216,237,.58);
  background: rgba(25,216,237,.08);
}

@media (max-width: 680px) {
  .media,
  .promptbox,
  .result-panel,
  .diagnosis-panel,
  .method-panel,
  .hero-process,
  .excel-viewer,
  .architecture-panel,
  .workflow-preview,
  .console-preview,
  .publish-card,
  .image-preview { border-radius: var(--radius-card); }
  .action,
  .asset,
  .hudnode,
  .shotcard,
  .sop,
  .pain-card,
  .fit-card,
  .priority,
  .flow-node,
  .process-step,
  .asset-card,
  .workflow-step { border-radius: var(--radius-md); }
  .cta,
  .publish-open-link { border-radius: var(--radius-md); }
}

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