:root {
  --bg: #090a0f;
  --bg-deep: #06070b;
  --surface: #11131a;
  --surface-2: #151722;
  --surface-3: #1b1a29;
  --line: #2d2a3e;
  --line-soft: rgba(183, 171, 213, .16);
  --text: #f5f2ff;
  --text-soft: #c8c2d9;
  --muted: #8d879f;
  --mint: #9b6cff;
  --mint-deep: #7548d2;
  --blue: #83a9ff;
  --blue-deep: #587bd5;
  --amber: #f0b56b;
  --red: #ff7f86;
  --pink: #e69ad1;
  --success: #55d6a5;
  --success-soft: rgba(85, 214, 165, .13);
  --warning-soft: rgba(240, 181, 107, .13);
  --danger-soft: rgba(255, 127, 134, .13);
  --max: 1280px;
  --font: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  scrollbar-color: var(--line) var(--bg-deep);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

::selection { color: #07110e; background: var(--mint); }

.section-shell {
  width: calc(100% - 64px);
  max-width: var(--max);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid rgba(157, 175, 190, .14);
  background: rgba(9, 11, 15, .94);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: calc(100% - 64px);
  max-width: 1400px;
  height: 76px;
  margin-inline: auto;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand { gap: 10px; justify-self: start; }
.brand-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid rgba(238, 145, 197, .4);
  border-radius: 8px;
  background: #11131a;
}
.brand-mark img { display: block; width: 31px; height: 31px; object-fit: contain; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 15px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: 9px; line-height: 1.1; }

.desktop-nav { display: flex; align-items: center; gap: 34px; color: var(--text-soft); font-size: 13px; }
.desktop-nav a { position: relative; padding: 29px 0 27px; transition: color .2s ease; }
.desktop-nav a::after { position: absolute; right: 100%; bottom: 18px; left: 0; height: 2px; background: var(--mint); content: ""; transition: right .2s ease; }
.desktop-nav a:hover,
.desktop-nav a:focus-visible { color: var(--text); }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { right: 0; }

.header-actions { display: flex; align-items: center; justify-self: end; gap: 14px; }
.version-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.version-pill:hover,
.version-pill:focus-visible { color: var(--text-soft); }
.version-pill i,
.window-state i,
.live-state i,
.trace-table-foot i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(117, 232, 189, .12); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible,
.menu-button:focus-visible,
.modal-close:focus-visible,
.capability-nav button:focus-visible,
.older-releases summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.button span { font-size: 17px; line-height: 0; }
.button-primary { color: #08120f; background: var(--mint); box-shadow: 0 10px 28px rgba(54, 195, 143, .14); }
.button-primary:hover { background: #9af3d0; box-shadow: 0 14px 34px rgba(54, 195, 143, .2); }
.button-small { min-height: 40px; padding-inline: 16px; font-size: 12px; }
.button-quiet { color: var(--text-soft); border-color: var(--line); background: transparent; }
.button-quiet:hover { color: var(--text); border-color: var(--text-soft); background: var(--surface); }
.button-outline { color: var(--mint); border-color: var(--mint-deep); background: transparent; }
.button-outline:hover { color: #08120f; border-color: var(--mint); background: var(--mint); }

.menu-button,
.mobile-nav { display: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(560px, 1.16fr);
  align-items: center;
  gap: 72px;
  min-height: calc(100vh - 116px);
  overflow: clip;
  padding-block: 38px;
}

.hero-copy { min-width: 0; }
.eyebrow,
.section-index,
.signal-label,
.console-kicker,
.panel-top,
.visual-header,
.release-top,
.trace-table-head,
.trace-row-head { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.2; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; }
.eyebrow-mark { width: 26px; height: 1px; background: var(--mint); }

.hero h1 { max-width: 660px; margin: 0; font-size: 56px; font-weight: 750; line-height: 1.14; letter-spacing: 0; }
.hero h1 em,
.trace-copy h2 em,
.boundary-inner h2 em { color: var(--mint); font-style: normal; }
.hero-lead { max-width: 560px; margin: 23px 0 13px; color: var(--text-soft); font-size: 20px; font-weight: 500; line-height: 1.55; }
.hero-body { max-width: 540px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 34px 0 0; padding: 0; color: var(--text-soft); font-size: 12px; list-style: none; }
.hero-tags li { display: inline-flex; align-items: center; gap: 8px; }
.tag-dot { width: 7px; height: 7px; border-radius: 50%; }
.tag-dot-mint { background: var(--mint); }
.tag-dot-blue { background: var(--blue); }
.tag-dot-amber { background: var(--amber); }
.hero-definition { display: grid; gap: 4px; max-width: 540px; margin-top: 22px; padding: 12px 14px; border-left: 2px solid var(--mint); background: rgba(17, 24, 30, .72); }
.hero-definition span { color: var(--muted); font-size: 10px; }
.hero-definition strong { color: var(--text-soft); font-size: 12px; font-weight: 600; line-height: 1.5; }

.hero-visual { position: relative; min-width: 0; padding: 22px 20px 22px 24px; }
.console-window { position: relative; z-index: 2; overflow: hidden; border: 1px solid #3a4853; border-radius: 8px; background: var(--surface); box-shadow: 0 34px 70px rgba(0, 0, 0, .38); }
.window-bar { display: flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #0d1116; }
.window-controls { display: flex; gap: 6px; }
.window-controls i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #52606a; }
.window-controls i:first-child { background: var(--pink); }
.window-controls i:nth-child(2) { background: var(--amber); }
.window-controls i:nth-child(3) { background: var(--mint); }
.window-title { margin-left: 14px; color: var(--text-soft); font-size: 11px; }
.window-state { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 10px; }
.console-body { display: grid; grid-template-columns: 130px minmax(0, 1fr); min-height: 450px; }
.console-body.has-shot { display: block; min-height: 0; background: #0d1318; }
.product-shot { display: block; width: 100%; height: auto; object-fit: cover; }
.console-sidebar { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 20px 10px 14px; border-right: 1px solid var(--line); background: #0c1116; }
.console-brand { display: flex; align-items: center; gap: 7px; margin: 0 5px 22px; color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.05; }
.mini-logo { display: grid; place-items: center; width: 27px; height: 27px; color: #111; border-radius: 5px; background: var(--mint); font-size: 11px; font-weight: 800; }
.console-nav-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; color: var(--muted); border-left: 2px solid transparent; font-size: 10px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.console-nav-item:hover,
.console-nav-item.is-active { color: var(--text); border-left-color: var(--mint); background: #16201f; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin: auto 8px 2px; color: var(--muted); font-size: 9px; }
.sidebar-line { width: 20px; height: 1px; background: var(--line); }
.console-main { min-width: 0; padding: 24px 24px 20px; }
.console-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.console-kicker { display: block; margin-bottom: 7px; font-size: 8px; }
.console-heading h2 { margin: 0; font-size: 21px; font-weight: 700; }
.date-chip { padding: 6px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: 9px; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }
.metric { position: relative; min-width: 0; min-height: 100px; padding: 13px 12px 11px; border: 1px solid var(--line); border-top: 2px solid currentColor; border-radius: 5px; background: #131a21; }
.metric span, .metric small, .metric b { display: block; }
.metric span { color: var(--text-soft); font-size: 9px; }
.metric strong { display: block; margin: 8px 0 4px; font-size: 24px; line-height: 1; }
.metric small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.metric b { margin-top: 9px; font-size: 8px; font-weight: 600; }
.metric-mint { color: var(--mint); }
.metric-blue { color: var(--blue); }
.metric-amber { color: var(--amber); }
.console-columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; margin-top: 16px; }
.task-panel, .mini-panel { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #11181f; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; }
.panel-top a { color: var(--mint); font-size: 8px; }
.task-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 43px; border-bottom: 1px solid rgba(157, 175, 190, .1); }
.task-row:first-of-type { margin-top: 6px; }
.task-row:last-child { border-bottom: 0; }
.task-status { display: block; width: 6px; height: 6px; border-radius: 50%; }
.status-live { background: var(--mint); box-shadow: 0 0 0 3px rgba(117, 232, 189, .12); }
.status-wait { background: var(--amber); }
.status-ok { background: var(--blue); }
.task-row div { min-width: 0; }
.task-row strong, .task-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row strong { color: var(--text-soft); font-size: 9px; font-weight: 600; }
.task-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.task-row b { color: var(--text-soft); font-size: 8px; font-weight: 600; white-space: nowrap; }
.task-progress { height: 3px; margin: -1px 0 2px 16px; overflow: hidden; background: #263038; }
.task-progress i { display: block; height: 100%; background: var(--mint); }
.panel-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.panel-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.chart { display: flex; align-items: end; gap: 7px; height: 90px; margin-top: 12px; padding: 0 2px 1px; border-bottom: 1px solid var(--line); }
.chart i { display: block; flex: 1; min-width: 4px; background: #4c6681; }
.chart i.is-today { background: var(--blue); }
.chart-labels { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 7px; }
.chart-total { display: block; margin-top: 9px; color: var(--blue); font-size: 20px; line-height: 1; }
.chart-total small { color: var(--muted); font-size: 9px; font-weight: 500; }
.console-flow { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--muted); font-size: 8px; }
.console-flow i { flex: 1; height: 1px; background: var(--line); }
.console-flow .flow-current { color: var(--mint); }
.visual-note { position: absolute; z-index: 3; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; min-width: 160px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #11171d; box-shadow: 0 16px 30px rgba(0, 0, 0, .24); }
.visual-note strong, .visual-note small { display: block; grid-column: 2; }
.visual-note strong { font-size: 10px; }
.visual-note small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.note-line { grid-row: 1 / 3; width: 2px; height: 25px; background: var(--mint); }
.note-pulse { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 190, 112, .13); }
.visual-note-a { top: 4%; left: -7px; }
.visual-note-b { right: -9px; bottom: 7%; }

.journey-board {
  position: relative;
  overflow: hidden;
  border: 1px solid #3a4853;
  border-radius: 8px;
  background: #0d1318;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .38);
}
.journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #0b1015;
}
.journey-head div { display: grid; gap: 5px; }
.journey-head small,
.journey-source small,
.journey-steps small { color: var(--muted); font-size: 9px; }
.journey-head strong { font-size: 16px; font-weight: 680; }
.journey-head > span { padding: 6px 8px; color: var(--mint); border: 1px solid var(--mint-deep); border-radius: 4px; font-size: 9px; }
.journey-source { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.journey-source > div { display: grid; gap: 5px; padding: 17px 20px; }
.journey-source > div:last-child { border-left: 1px solid var(--line); }
.journey-source > i { display: grid; z-index: 1; place-items: center; align-self: center; width: 28px; height: 28px; margin-inline: -14px; color: #07110e; border-radius: 50%; background: var(--mint); font-size: 14px; font-style: normal; }
.journey-source strong { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.journey-source span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.journey-steps { padding: 3px 20px; }
.journey-steps article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 66px; border-bottom: 1px solid rgba(157, 175, 190, .12); }
.journey-steps article:last-child { border-bottom: 0; }
.journey-steps article > b { display: grid; place-items: center; width: 27px; height: 27px; color: var(--mint); border: 1px solid var(--mint-deep); border-radius: 50%; font-size: 9px; }
.journey-steps article:nth-child(2) > b { color: var(--blue); border-color: var(--blue-deep); }
.journey-steps article:nth-child(3) > b { color: var(--amber); border-color: #9a7041; }
.journey-steps article:nth-child(4) > b { color: var(--pink); border-color: #9f5981; }
.journey-steps article > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.journey-steps strong { grid-column: 1; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.journey-steps span { grid-column: 2; grid-row: 1 / 3; color: var(--muted); font-size: 9px; text-align: right; }
.journey-result { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 60px; padding: 12px 20px; border-top: 1px solid var(--line); background: #11181e; }
.journey-result > span { color: var(--text-soft); font-size: 10px; }
.journey-result > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.journey-result b { padding: 5px 7px; border-radius: 3px; font-size: 8px; font-weight: 700; }
.journey-ok { color: var(--mint); background: rgba(117, 232, 189, .1); }
.journey-fail { color: var(--red); background: rgba(255, 126, 131, .1); }
.journey-wait { color: var(--amber); background: rgba(255, 190, 112, .1); }

.autopilot-section { padding-block: 112px 118px; }
.autopilot-section .section-heading h2 em { color: var(--mint); font-style: normal; }
.autopilot-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr); gap: 78px; align-items: stretch; margin-top: 58px; }
.timing-reasons { display: grid; align-content: center; gap: 0; }
.timing-reasons article { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 16px; padding: 25px 0; border-top: 1px solid var(--line); }
.timing-reasons article:last-child { border-bottom: 1px solid var(--line); }
.timing-reasons article > span { display: grid; place-items: center; width: 27px; height: 27px; color: var(--mint); border: 1px solid var(--mint-deep); border-radius: 50%; font-size: 9px; }
.timing-reasons article:nth-child(2) > span { color: var(--blue); border-color: var(--blue-deep); }
.timing-reasons article:nth-child(3) > span { color: var(--amber); border-color: #9a7041; }
.timing-reasons h3 { margin: 0 0 8px; font-size: 18px; font-weight: 680; line-height: 1.4; }
.timing-reasons p { max-width: 450px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.autopilot-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid #3a4853; border-radius: 7px; background: #0d1318; box-shadow: 0 25px 58px rgba(0, 0, 0, .28); }
.autopilot-panel::before { position: absolute; top: 0; right: 0; width: 64px; height: 64px; border-top: 1px solid var(--mint); border-right: 1px solid var(--mint); content: ""; opacity: .8; }
.autopilot-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: #0b1015; }
.autopilot-panel-head div { display: grid; gap: 5px; }
.autopilot-panel-head small { color: var(--muted); font-size: 9px; }
.autopilot-panel-head strong { font-size: 17px; font-weight: 700; }
.autopilot-panel-head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: 9px; }
.autopilot-panel-head i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(117, 232, 189, .12); }
.monitor-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 72px; padding: 0 20px; border-bottom: 1px solid rgba(157, 175, 190, .12); }
.monitor-dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.monitor-live { background: var(--mint); box-shadow: 0 0 0 3px rgba(117, 232, 189, .1); }
.monitor-hit-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 190, 112, .1); }
.monitor-row div { min-width: 0; }
.monitor-row strong, .monitor-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-row strong { color: var(--text-soft); font-size: 11px; font-weight: 650; }
.monitor-row small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.monitor-row > b { color: var(--muted); font-size: 9px; font-weight: 600; white-space: nowrap; }
.monitor-hit { background: rgba(255, 190, 112, .045); }
.monitor-hit > b { color: var(--amber); }
.autopilot-arrow { display: grid; place-items: center; width: 27px; height: 27px; margin: -13px auto; position: relative; z-index: 2; color: #07110e; border-radius: 50%; background: var(--mint); font-size: 14px; }
.autopilot-actions { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 12px; align-items: center; padding: 30px 20px 24px; }
.autopilot-actions > div { display: grid; gap: 8px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: #11181e; }
.autopilot-actions > div:first-child { border-color: var(--blue-deep); }
.autopilot-actions > div:last-child { border-color: #9f5981; }
.autopilot-actions span { color: var(--muted); font-size: 9px; }
.autopilot-actions strong { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.autopilot-actions > i { display: grid; place-items: center; width: 28px; height: 28px; color: var(--mint); border: 1px solid var(--mint-deep); border-radius: 50%; font-size: 15px; font-style: normal; }
.autopilot-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.autopilot-panel-foot small { color: var(--line-soft); font-size: 8px; }

.signal-band { border-block: 1px solid var(--line); background: #0c1116; }
.signal-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); min-height: 168px; }
.signal-grid > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 26px 30px; border-right: 1px solid var(--line); }
.signal-grid > div:last-child { border-right: 0; }
.signal-intro { justify-content: flex-start !important; padding-top: 12px !important; padding-left: 0 !important; }
.signal-index { display: block; margin-bottom: 11px; color: var(--mint); font-size: 10px; }
.signal-intro strong { font-size: 20px; font-weight: 650; line-height: 1.3; }
.signal-label { display: block; margin-bottom: 10px; font-size: 9px; }
.signal-item:nth-child(2) .signal-label { color: var(--mint); }
.signal-item:nth-child(3) .signal-label { color: var(--blue); }
.signal-item:nth-child(4) .signal-label { color: var(--amber); }
.signal-item strong { font-size: 18px; font-weight: 650; }
.signal-item p { max-width: 210px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.loop-section { padding-block: 120px 105px; }
.section-heading { max-width: 760px; }
.section-heading .section-index { display: block; margin-bottom: 17px; color: var(--mint); }
.section-heading h2 { margin: 0; font-size: 48px; font-weight: 720; line-height: 1.15; }
.section-heading p { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.loop-rail { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr; align-items: center; margin: 68px 0 0; padding: 0; list-style: none; }
.loop-step { display: grid; justify-items: center; min-width: 0; text-align: center; }
.loop-number { display: block; margin-bottom: 12px; color: var(--muted); font-size: 10px; }
.loop-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.loop-step.is-first .loop-icon { color: var(--mint); border-color: var(--mint-deep); }
.loop-step:nth-of-type(5) .loop-icon { color: var(--amber); border-color: #9a7041; }
.loop-step strong { margin-top: 14px; font-size: 15px; font-weight: 650; }
.loop-step small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.loop-connector { display: flex; align-items: center; height: 1px; background: var(--line); }
.loop-connector i { display: block; width: 5px; height: 5px; margin-left: auto; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); }
.loop-foot { display: flex; align-items: center; gap: 15px; margin-top: 53px; padding-top: 23px; border-top: 1px solid var(--line); }
.loop-foot-mark { color: var(--mint); font-size: 25px; }
.loop-foot p { flex: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.loop-foot strong { color: var(--text-soft); font-weight: 600; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--mint); font-size: 12px; font-weight: 700; white-space: nowrap; }
.text-link:hover { color: #b2f7dc; }
.text-link span { font-size: 17px; line-height: 0; }

.feature-directory { padding-block: 110px 125px; }
.task-finder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.task-finder-heading, .task-finder > a { min-height: 112px; padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.task-finder-heading { display: flex; flex-direction: column; justify-content: space-between; background: #0d1318; }
.task-finder-heading span { color: var(--mint); font-size: 11px; font-weight: 700; }.task-finder-heading small { color: var(--muted); font-size: 10px; }
.task-finder > a { display: flex; flex-direction: column; justify-content: space-between; background: #10161c; transition: background .2s ease, border-color .2s ease; }
.task-finder > a:hover { background: #14211e; box-shadow: inset 0 -2px var(--mint); }
.task-finder > a strong { font-size: 14px; font-weight: 650; line-height: 1.45; }.task-finder > a span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.feature-groups { display: grid; gap: 62px; margin-top: 86px; }
.feature-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.feature-group-heading { position: sticky; top: 100px; align-self: start; display: flex; gap: 15px; }
.group-number { display: grid; flex: none; place-items: center; width: 31px; height: 31px; color: #08120f; border-radius: 4px; background: var(--mint); font-size: 10px; font-weight: 800; }
.feature-group-heading h3 { margin: 2px 0 7px; font-size: 17px; font-weight: 650; }.feature-group-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.feature-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { position: relative; min-width: 0; min-height: 285px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0f151b; scroll-margin-top: 98px; transition: background .2s ease; }
.feature-card:hover { background: #121a21; }
.feature-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--card-accent, var(--mint)); content: ""; opacity: .8; }
.feature-card-mint { --card-accent: var(--mint); }.feature-card-blue { --card-accent: var(--blue); }.feature-card-amber { --card-accent: var(--amber); }.feature-card-pink { --card-accent: var(--pink); }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.feature-card-top > span { color: var(--card-accent); font-size: 11px; font-weight: 750; }.feature-card-top b { padding: 4px 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font-size: 8px; font-weight: 600; }
.feature-card h4 { margin: 20px 0 11px; font-size: 19px; font-weight: 680; line-height: 1.35; }.feature-card > p { min-height: 66px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.feature-card > p::before { display: block; margin-bottom: 5px; color: var(--card-accent); font-size: 9px; font-weight: 750; letter-spacing: .03em; content: "功能作用"; }
.feature-detail, .feature-boundary { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(157, 175, 190, .12); color: var(--muted); font-size: 10px; line-height: 1.65; }.feature-detail span, .feature-boundary span { display: inline-block; min-width: 48px; margin-right: 7px; color: var(--text-soft); font-weight: 650; }.feature-boundary span { color: var(--amber); }
.feature-card:only-child { grid-column: 1 / -1; }
.feature-summary { display: flex; align-items: center; gap: 9px; margin-top: 62px; padding: 22px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }.feature-summary strong { color: var(--mint); font-weight: 700; }.feature-summary .text-link { margin-left: auto; }

.primary-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 58px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.primary-feature {
  --feature-accent: var(--mint);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 332px;
  padding: 27px 28px 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0f151b;
  scroll-margin-top: 98px;
  transition: background .2s ease;
}
.primary-feature:hover { background: #121a21; }
.primary-feature::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--feature-accent); content: ""; }
.primary-blue { --feature-accent: var(--blue); }
.primary-amber { --feature-accent: var(--amber); }
.primary-pink { --feature-accent: var(--pink); }
.primary-wide { grid-column: 1 / -1; min-height: 280px; }
.primary-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.primary-feature-top span { color: var(--muted); font-size: 10px; }
.primary-feature-top b { color: var(--feature-accent); font-size: 11px; font-weight: 750; }
.primary-feature h3 { max-width: 510px; margin: 24px 0 13px; font-size: 23px; font-weight: 700; line-height: 1.35; }
.primary-feature > p { max-width: 570px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.75; }
.primary-outcome { margin-top: auto; padding: 18px 0 12px; color: var(--text-soft); border-bottom: 1px solid rgba(157, 175, 190, .12); font-size: 11px; line-height: 1.6; }
.primary-outcome strong { color: var(--feature-accent); font-weight: 700; }
.primary-feature > small { margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.6; }

.support-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-top: 86px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.support-heading span { font-size: 22px; font-weight: 700; }
.support-heading p { max-width: 470px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: right; }
.support-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.support-features article { display: flex; flex-direction: column; min-width: 0; min-height: 230px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d1318; scroll-margin-top: 98px; }
.support-features article > span { color: var(--blue); font-size: 10px; font-weight: 700; line-height: 1.4; }
.support-features article:nth-child(4n + 2) > span { color: var(--mint); }
.support-features article:nth-child(4n + 3) > span { color: var(--amber); }
.support-features article:nth-child(4n + 4) > span { color: var(--pink); }
.support-features h3 { margin: 17px 0 10px; font-size: 16px; font-weight: 680; line-height: 1.45; }
.support-features p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.support-features small { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 9px; line-height: 1.6; }

.capabilities-section { padding-block: 105px 125px; }
.capability-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 530px; margin-top: 55px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-nav { padding: 15px 22px 15px 0; border-right: 1px solid var(--line); }
.capability-nav button { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; width: 100%; min-height: 70px; padding: 10px 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.capability-nav button:hover { border-color: var(--line); background: #10171d; }
.capability-nav button[aria-selected="true"] { border-color: var(--mint-deep); background: #12221e; }
.capability-nav button > span { color: var(--muted); font-size: 10px; }
.capability-nav button strong, .capability-nav button small { display: block; grid-column: 2; }
.capability-nav button strong { font-size: 14px; font-weight: 650; }
.capability-nav button small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.capability-nav button b { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: 16px; font-weight: 400; }
.capability-nav button[aria-selected="true"] > span,
.capability-nav button[aria-selected="true"] b { color: var(--mint); }
.capability-detail { display: grid; grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr); gap: 45px; align-items: center; padding: 44px 0 44px 50px; }
.detail-copy { min-width: 0; }
.detail-kicker { color: var(--mint); font-size: 10px; font-weight: 700; }
.detail-copy h3 { max-width: 390px; margin: 15px 0 14px; font-size: 30px; font-weight: 700; line-height: 1.25; }
.detail-copy > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.detail-list { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.detail-list li { position: relative; padding-left: 17px; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.detail-list li::before { position: absolute; top: 7px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); content: ""; }
.detail-note { max-width: 420px; margin-top: 28px; padding: 12px 14px; border-left: 2px solid var(--amber); background: #151615; }
.detail-note span { color: var(--amber); font-size: 10px; font-weight: 700; }
.detail-note p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.detail-visual { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #0d1318; }
.visual-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 9px; }
.live-state { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: 9px; }
.account-list { padding: 4px 16px; }
.account-list > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; column-gap: 10px; align-items: center; min-height: 63px; border-bottom: 1px solid rgba(157, 175, 190, .1); }
.account-list > div:last-child { border-bottom: 0; }
.avatar { display: grid; grid-row: 1 / 3; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #0c1210; font-size: 11px; font-weight: 800; }
.avatar-a { background: var(--mint); }.avatar-b { background: var(--blue); }.avatar-c { background: var(--amber); }.avatar-d { color: var(--text-soft); border: 1px dashed var(--line); background: transparent; }
.account-list strong, .account-list small { display: block; grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-list strong { font-size: 12px; font-weight: 600; }
.account-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.account-list b { grid-column: 3; grid-row: 1 / 3; color: var(--mint); font-size: 9px; font-weight: 600; }
.account-list b.add-account { color: var(--muted); font-size: 18px; font-weight: 400; }
.visual-footer { display: flex; align-items: center; gap: 8px; padding: 13px 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.visual-footer strong { color: var(--text-soft); font-size: 10px; }
.footer-rule { flex: 1; height: 1px; background: var(--line); }

.rule-preview { padding: 8px 16px 0; }
.rule-toolbar { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--muted); border-bottom: 1px solid rgba(157, 175, 190, .1); font-size: 9px; }
.rule-toolbar span:nth-of-type(2) { margin-left: auto; }
.rule-toolbar b { color: var(--text-soft); font-size: 10px; font-weight: 600; }
.rule-message { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 9px; align-items: center; min-height: 58px; border-bottom: 1px solid rgba(157, 175, 190, .1); }
.rule-message:last-child { border-bottom: 0; }
.rule-message > i { display: grid; place-items: center; width: 21px; height: 21px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font-size: 8px; font-style: normal; }
.rule-message.is-selected > i { color: #0b1510; border-color: var(--mint); background: var(--mint); }
.rule-message strong, .rule-message small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-message strong { color: var(--text-soft); font-size: 10px; font-weight: 600; }
.rule-message small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.rule-message > b { color: var(--mint); font-size: 12px; font-weight: 500; }
.execution-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 16px 10px; }
.execution-head strong { font-size: 12px; font-weight: 650; }.execution-head span { color: var(--mint); font-size: 14px; font-weight: 700; }
.execution-progress { height: 5px; margin: 0 16px; overflow: hidden; background: #263038; }.execution-progress i { display: block; width: 82%; height: 100%; background: var(--mint); }
.execution-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 18px 16px; }
.execution-stats > div { padding: 11px 9px; border: 1px solid var(--line); border-radius: 4px; background: #11181e; }.execution-stats small, .execution-stats strong { display: block; }.execution-stats small { color: var(--muted); font-size: 8px; }.execution-stats strong { margin-top: 7px; font-size: 18px; }.text-mint { color: var(--mint); }.text-amber { color: var(--amber); }
.execution-accounts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 0 16px 11px; color: var(--muted); font-size: 9px; }.execution-accounts b { color: var(--text-soft); font-size: 9px; font-weight: 600; }.execution-accounts i { grid-column: 1 / -1; height: 1px; background: var(--line); }
.growth-flow { display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr; align-items: center; gap: 5px; padding: 30px 15px 24px; }.growth-flow > div { min-width: 0; text-align: center; }.growth-flow > i { height: 1px; background: var(--line); }.flow-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 9px; color: var(--mint); border: 1px solid var(--mint-deep); border-radius: 50%; }.growth-flow strong, .growth-flow small { display: block; }.growth-flow strong { font-size: 10px; font-weight: 650; }.growth-flow small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }.growth-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 15px 11px; }.growth-tags span { padding: 5px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font-size: 8px; }
.route-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 57px; margin: 0 16px; border-bottom: 1px solid rgba(157, 175, 190, .1); }.route-dot { width: 6px; height: 6px; border-radius: 50%; }.route-good { background: var(--mint); }.route-warn { background: var(--amber); }.route-row strong, .route-row small { display: block; }.route-row strong { font-size: 10px; font-weight: 600; }.route-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }.route-row b { color: var(--mint); font-size: 8px; font-weight: 600; }.audit-meter { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; margin: 18px 16px 13px; color: var(--muted); font-size: 9px; }.audit-meter strong { color: var(--mint); font-size: 11px; }.audit-meter i { grid-column: 1 / -1; height: 4px; overflow: hidden; background: #263038; }.audit-meter i b { display: block; width: 100%; height: 100%; background: var(--mint); }
.service-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 22px 16px 13px; }.service-status > div { padding: 11px; border: 1px solid var(--line); border-radius: 4px; background: #11181e; }.service-status small, .service-status strong { display: block; }.service-status small { color: var(--muted); font-size: 8px; }.service-status strong { margin-top: 7px; font-size: 18px; }.service-check { display: grid; grid-template-columns: minmax(0, 1fr) auto 7px; gap: 9px; align-items: center; min-height: 34px; margin: 0 16px; border-bottom: 1px solid rgba(157, 175, 190, .1); color: var(--text-soft); font-size: 9px; }.service-check b { color: var(--mint); font-size: 8px; font-weight: 600; }.service-check i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

.trace-section { padding-block: 112px; border-block: 1px solid var(--line); background: #0c1116; }
.trace-layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr); align-items: center; gap: 80px; }
.trace-copy h2 { margin: 16px 0 19px; font-size: 42px; font-weight: 720; line-height: 1.2; }
.trace-copy > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.result-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 480px; margin: 30px 0 25px; }
.result-states > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #11181e; }
.state-dot { display: block; width: 7px; height: 7px; margin-bottom: 12px; border-radius: 50%; }
.state-success { background: var(--mint); }.state-fail { background: var(--red); }.state-pending { background: var(--amber); }
.result-states strong, .result-states small { display: block; }
.result-states strong { font-size: 12px; font-weight: 650; }
.result-states small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.trace-table-wrap { min-width: 0; overflow: hidden; border: 1px solid #3a4853; border-radius: 6px; background: #0e141a; box-shadow: 0 22px 48px rgba(0, 0, 0, .23); }
.trace-table-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.trace-filter { padding: 5px 8px; color: var(--text-soft); border: 1px solid var(--line); border-radius: 3px; font-size: 9px; font-weight: 500; }
.trace-row { display: grid; grid-template-columns: 1.25fr .8fr .9fr .62fr; gap: 12px; align-items: center; min-height: 61px; padding: 0 18px; border-bottom: 1px solid rgba(157, 175, 190, .11); color: var(--text-soft); font-size: 11px; }
.trace-row:last-of-type { border-bottom: 0; }
.trace-row-head { min-height: 35px; color: var(--muted); background: #10181f; font-size: 9px; }
.trace-row div strong, .trace-row div small { display: block; }
.trace-row div strong { font-size: 11px; font-weight: 600; }
.trace-row div small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.masked { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.log-status { justify-self: start; padding: 5px 7px; border-radius: 3px; font-size: 9px; font-weight: 700; }
.log-success { color: var(--mint); background: rgba(117, 232, 189, .1); }.log-fail { color: var(--red); background: rgba(255, 126, 131, .1); }.log-pending { color: var(--amber); background: rgba(255, 190, 112, .1); }
.trace-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.trace-table-foot span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); }

.updates-section { padding-block: 120px 130px; }
.release-layout { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); gap: 78px; margin-top: 57px; }
.release-feature { position: relative; min-height: 440px; padding: 28px 30px 30px; border: 1px solid var(--mint-deep); border-radius: 6px; background: #11201c; }
.release-feature::before { position: absolute; top: 0; right: 0; width: 52px; height: 52px; border-top: 1px solid var(--mint); border-right: 1px solid var(--mint); content: ""; }
.release-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.release-badge { padding: 4px 7px; color: #09140f; background: var(--mint); font-size: 9px; font-weight: 800; }
.release-version { margin-top: 32px; color: var(--mint); font-size: 42px; font-weight: 750; line-height: 1; }
.release-feature h3 { max-width: 330px; margin: 16px 0 13px; font-size: 22px; line-height: 1.35; }
.release-feature > p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.75; }
.release-feature ul { display: grid; gap: 9px; margin: 25px 0 28px; padding: 0; list-style: none; }
.release-feature li { position: relative; padding-left: 16px; color: var(--muted); font-size: 11px; }
.release-feature li::before { position: absolute; top: 6px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); content: ""; }
.release-timeline { position: relative; padding: 7px 0 0 35px; }
.timeline-line { position: absolute; top: 17px; bottom: 32px; left: 6px; width: 1px; background: var(--line); }
.timeline-item { position: relative; display: grid; grid-template-columns: 1fr; padding: 0 0 34px; }
.timeline-dot { position: absolute; top: 5px; left: -33px; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); }
.timeline-item.is-current .timeline-dot { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 5px rgba(117, 232, 189, .1); }
.timeline-item small { color: var(--muted); font-size: 10px; }
.timeline-item h3 { margin: 8px 0 7px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.older-releases { margin-top: 5px; border-top: 1px solid var(--line); }
.older-releases summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; color: var(--text-soft); font-size: 12px; cursor: pointer; list-style: none; }
.older-releases summary::-webkit-details-marker { display: none; }
.older-releases summary span { color: var(--mint); font-size: 18px; transition: transform .2s ease; }
.older-releases[open] summary span { transform: rotate(45deg); }
.older-release-content { display: grid; gap: 9px; padding: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.older-release-content p { margin: 0; }.older-release-content strong { color: var(--text-soft); font-weight: 600; }

.updates-page-main { padding-bottom: 22px; }
.updates-page-intro { padding-top: 62px; }
.updates-breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.updates-breadcrumb a { color: var(--text-soft); }
.updates-breadcrumb a:hover,
.updates-breadcrumb a:focus-visible { color: var(--mint); }
.updates-page-heading { max-width: 760px; margin-top: 50px; }
.updates-page-heading .section-index { display: block; margin-bottom: 18px; color: var(--mint); }
.updates-page-heading h1 { margin: 0; font-size: 54px; font-weight: 750; line-height: 1.14; }
.updates-page-heading p { max-width: 640px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.updates-page-section { padding-top: 64px; padding-bottom: 86px; }
.updates-page-section .release-layout { margin-top: 0; }
.updates-page-section .release-feature h2 { max-width: 330px; margin: 16px 0 13px; font-size: 22px; line-height: 1.35; }
.updates-page-note { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; align-items: center; gap: 28px; padding-block: 24px 74px; border-top: 1px solid var(--line); }
.updates-page-note > div { display: grid; gap: 8px; }
.updates-page-note .section-index { color: var(--mint); }
.updates-page-note strong { color: var(--text-soft); font-size: 14px; font-weight: 650; }
.updates-page-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.updates-page-note .text-link { white-space: nowrap; }

.boundary-section { border-block: 1px solid var(--line); background: #0d1217; }
.boundary-inner { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; min-height: 330px; padding-block: 66px; }
.boundary-inner .section-index { display: block; margin-bottom: 16px; color: var(--amber); }
.boundary-inner h2 { margin: 0; font-size: 40px; line-height: 1.2; }
.boundary-copy > p { max-width: 650px; margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; margin: 23px 0 25px; }
.boundary-grid span { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.boundary-grid span::before { margin-right: 8px; color: var(--amber); content: "•"; }

.cta-section { display: flex; align-items: center; gap: 28px; min-height: 270px; padding-block: 66px; }
.cta-mark { display: flex; flex: none; align-items: flex-end; gap: 5px; width: 55px; height: 58px; }
.cta-mark span { display: block; width: 12px; background: var(--mint); }
.cta-mark span:nth-child(1) { height: 27px; opacity: .55; }.cta-mark span:nth-child(2) { height: 43px; opacity: .75; }.cta-mark span:nth-child(3) { height: 58px; }
.cta-section > div:nth-child(2) { flex: 1; }
.cta-section .section-index { display: block; margin-bottom: 13px; color: var(--mint); }
.cta-section h2 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.25; }
.cta-section p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.site-footer { border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer-inner { padding-block: 32px 24px; }
.footer-brand { gap: 10px; }.footer-brand .brand-mark { width: 32px; height: 32px; }.footer-brand .brand-mark img { width: 27px; height: 27px; }
.footer-brand strong, .footer-brand small { display: block; }.footer-brand strong { font-size: 13px; font-weight: 650; }.footer-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 27px; color: var(--text-soft); font-size: 11px; }
.footer-inner nav a:hover { color: var(--mint); }
.footer-note { max-width: 620px; margin: 24px 0 26px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--line); color: #5f6b73; font-size: 10px; }

/* Small line icons are CSS marks so the page remains dependency-free. */
.ui-icon { position: relative; display: inline-block; flex: none; width: 17px; height: 17px; color: currentColor; }
.ui-icon-grid::before { position: absolute; inset: 2px; border: 1px solid currentColor; content: ""; box-shadow: 6px 0 0 -1px var(--surface), 6px 0 0 0 currentColor, 0 6px 0 -1px var(--surface), 0 6px 0 0 currentColor, 6px 6px 0 -1px var(--surface), 6px 6px 0 0 currentColor; }
.ui-icon-send::before { position: absolute; top: 3px; left: 2px; width: 12px; height: 10px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(-15deg); content: ""; }.ui-icon-send::after { position: absolute; top: 8px; left: 1px; width: 8px; height: 1px; background: currentColor; transform: rotate(-28deg); content: ""; }
.ui-icon-chat::before { position: absolute; inset: 2px 1px 4px; border: 1px solid currentColor; border-radius: 4px; content: ""; }.ui-icon-chat::after { position: absolute; bottom: 1px; left: 5px; width: 5px; height: 5px; border-left: 1px solid currentColor; transform: skew(-25deg); content: ""; }
.ui-icon-log::before { position: absolute; inset: 1px 3px; border: 1px solid currentColor; border-radius: 2px; content: ""; }.ui-icon-log::after { position: absolute; top: 5px; left: 6px; width: 6px; height: 1px; background: currentColor; box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; content: ""; }
.ui-icon-scan::before { position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; content: ""; }.ui-icon-scan::after { position: absolute; top: 7px; left: 0; width: 17px; height: 1px; background: currentColor; content: ""; }
.ui-icon-target::before { position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; content: ""; }.ui-icon-target::after { position: absolute; top: 7px; left: 7px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 -7px 0 -1px currentColor, 0 7px 0 -1px currentColor, -7px 0 0 -1px currentColor, 7px 0 0 -1px currentColor; content: ""; }
.ui-icon-rules::before { position: absolute; top: 3px; left: 2px; width: 12px; height: 1px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; content: ""; }.ui-icon-rules::after { position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; border: 1px solid currentColor; box-shadow: 0 4px 0 -1px var(--surface), 0 4px 0 0 currentColor, 0 8px 0 -1px var(--surface), 0 8px 0 0 currentColor; content: ""; }

.modal { position: fixed; z-index: 70; inset: 0; display: none; place-items: center; padding: 20px; }
.modal.is-open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 7, .78); }
.modal-card { position: relative; z-index: 1; width: min(100%, 470px); max-height: calc(100vh - 40px); overflow: auto; padding: 34px; border: 1px solid #43535d; border-radius: 7px; background: #11181e; box-shadow: 0 30px 90px rgba(0, 0, 0, .52); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }.modal-close:hover { color: var(--text); border-color: var(--text-soft); }
.modal-card .section-index { display: block; margin-bottom: 14px; color: var(--mint); }
.modal-card h2 { margin: 0; font-size: 28px; }.modal-card > p { margin: 13px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.modal-card form { display: grid; gap: 15px; }.modal-card label { display: grid; gap: 7px; color: var(--text-soft); font-size: 11px; font-weight: 650; }.modal-card input, .modal-card select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: #0c1116; outline: none; }.modal-card input:focus, .modal-card select:focus { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(117, 232, 189, .12); }.modal-card form .button { width: 100%; margin-top: 4px; }
.form-success { display: none; margin-bottom: 0 !important; padding: 12px; color: var(--mint) !important; border: 1px solid var(--mint-deep); background: #12221e; }.form-success.is-visible { display: block; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .header-inner { width: calc(100% - 40px); }
  .section-shell { width: calc(100% - 48px); }
  .desktop-nav { gap: 22px; }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 40px; }
  .hero h1 { font-size: 54px; }
  .hero-visual { padding-inline: 8px 10px; }
  .visual-note-a { left: -12px; }.visual-note-b { right: -5px; }
  .capability-detail { gap: 28px; padding-left: 34px; }
  .trace-layout { gap: 45px; }
}

@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-actions { display: none; }
  .menu-button { display: grid; justify-items: end; gap: 6px; width: 42px; height: 42px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
  .menu-button span { display: block; width: 22px; height: 1px; background: var(--text-soft); transition: transform .2s ease; }
  .menu-button.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-button.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { position: absolute; top: 76px; right: 20px; left: 20px; display: grid; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #0e141a; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav a { padding: 14px 12px; color: var(--text-soft); border-bottom: 1px solid rgba(157, 175, 190, .1); font-size: 13px; }.mobile-nav a:hover { color: var(--mint); }.mobile-nav .button { margin-top: 10px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-block: 70px 80px; }
  .hero-copy { max-width: 700px; }.hero h1 { font-size: 58px; }.hero-body { max-width: 650px; }
  .hero-visual { max-width: 760px; width: 100%; margin-inline: auto; padding-inline: 24px; }
  .signal-grid { grid-template-columns: repeat(3, 1fr); }.signal-intro { grid-column: 1 / -1; min-height: 110px; padding: 24px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--line); }.signal-intro strong br { display: none; }
  .support-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .autopilot-layout { grid-template-columns: 1fr; gap: 38px; }
  .timing-reasons { max-width: 700px; }
  .task-finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feature-group { grid-template-columns: 175px minmax(0, 1fr); gap: 25px; }.feature-cards { grid-template-columns: 1fr; }.feature-card { min-height: 0; }
  .capability-layout { grid-template-columns: 245px minmax(0, 1fr); }.capability-detail { grid-template-columns: 1fr; padding: 35px 0 35px 30px; }.detail-visual { max-width: 580px; }
  .trace-layout { grid-template-columns: 1fr; }.trace-copy > p, .result-states { max-width: 670px; }.trace-table-wrap { max-width: 720px; }
  .release-layout { gap: 45px; }
  .boundary-inner { gap: 40px; }
}

@media (max-width: 680px) {
  .section-shell { width: calc(100% - 36px); }
  .header-inner { width: calc(100% - 36px); }
  .brand-copy small { display: none; }
  .hero { align-content: start; height: auto; min-height: calc(100svh - 76px); max-height: none; overflow: visible; gap: 28px; padding-block: 36px 32px; }.eyebrow { margin-bottom: 18px; font-size: 9px; }.hero h1 { font-size: 40px; line-height: 1.15; }.hero-lead { margin: 16px 0 10px; font-size: 18px; }.hero-body { font-size: 12px; line-height: 1.65; }.hero-actions { margin-top: 18px; }.hero-actions .button { flex: 1; min-width: 145px; padding-inline: 12px; }.hero-tags { display: grid; grid-template-columns: 1fr; margin-top: 17px; gap: 7px; font-size: 10px; }.hero-definition { display: none; }
  .hero-visual { padding: 0; }.journey-head { min-height: 54px; padding: 11px 13px; }.journey-head div { gap: 3px; }.journey-head strong { font-size: 13px; }.journey-head > span { font-size: 8px; }.journey-source { display: none; }.journey-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 8px; }.journey-steps article { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 5px; min-height: 77px; padding: 9px 3px; border-right: 1px solid rgba(157, 175, 190, .12); border-bottom: 0; text-align: center; }.journey-steps article:last-child { border-right: 0; }.journey-steps article > b { width: 23px; height: 23px; font-size: 8px; }.journey-steps article > div { display: block; }.journey-steps article small { display: block; color: var(--text-soft); font-size: 8px; line-height: 1.35; }.journey-steps article strong, .journey-steps article span { display: none; }.journey-result { min-height: 48px; padding: 9px 11px; }.journey-result > span { max-width: 100px; font-size: 8px; line-height: 1.4; }.journey-result b { padding: 4px 5px; font-size: 7px; }
  .signal-grid { grid-template-columns: 1fr; }.signal-grid > div { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }.signal-grid > div:last-child { border-bottom: 0; }.signal-intro { min-height: 0; }.signal-item p { max-width: none; }
  .autopilot-section, .loop-section, .feature-directory, .capabilities-section, .updates-section { padding-block: 78px; }.section-heading h2 { font-size: 34px; }.section-heading p { font-size: 14px; }
  .autopilot-layout { gap: 28px; margin-top: 38px; }
  .timing-reasons article { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .timing-reasons h3 { font-size: 16px; }
  .timing-reasons p { font-size: 12px; }
  .autopilot-panel-head { min-height: 61px; padding: 12px 14px; }.autopilot-panel-head strong { font-size: 14px; }.monitor-row { min-height: 64px; padding-inline: 14px; }.monitor-row strong { font-size: 10px; }.monitor-row small { font-size: 8px; }.autopilot-actions { gap: 7px; padding: 24px 10px 18px; }.autopilot-actions > div { padding: 10px; }.autopilot-actions strong { font-size: 9px; }.autopilot-actions > i { width: 23px; height: 23px; font-size: 12px; }.autopilot-panel-foot { padding: 10px 14px; font-size: 8px; }
  .loop-rail { grid-template-columns: 1fr; gap: 0; margin-top: 43px; padding-left: 10px; }.loop-step { display: grid; grid-template-columns: 38px 45px 1fr; grid-template-rows: auto auto; justify-items: start; align-items: center; text-align: left; }.loop-number { grid-row: 1 / 3; margin: 0; }.loop-icon { grid-row: 1 / 3; width: 39px; height: 39px; }.loop-step strong { grid-column: 3; margin: 0; font-size: 14px; }.loop-step small { grid-column: 3; margin: 4px 0 0; }.loop-connector { width: 1px; height: 25px; margin-left: 28px; background: var(--line); }.loop-connector i { width: 5px; height: 5px; margin: auto auto 0; border-top: 0; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); }
  .loop-foot { display: grid; grid-template-columns: 28px 1fr; gap: 8px 10px; margin-top: 35px; }.loop-foot .text-link { grid-column: 2; }
  .primary-features { grid-template-columns: 1fr; margin-top: 40px; }.primary-feature, .primary-wide { grid-column: auto; min-height: 0; padding: 22px 19px; }.primary-feature h3 { margin-top: 19px; font-size: 20px; }.primary-feature > p { font-size: 12px; }.primary-outcome { margin-top: 22px; }.support-heading { display: block; margin-top: 58px; }.support-heading span { font-size: 20px; }.support-heading p { margin-top: 9px; text-align: left; }.support-features { grid-template-columns: 1fr; }.support-features article { min-height: 0; padding: 20px 19px; }.support-features small { margin-top: 18px; }.task-finder { grid-template-columns: 1fr; margin-top: 38px; }.task-finder-heading, .task-finder > a { min-height: 94px; padding: 17px; }.feature-groups { gap: 48px; margin-top: 60px; }.feature-group { grid-template-columns: 1fr; gap: 20px; }.feature-group-heading { position: static; }.feature-cards { grid-template-columns: 1fr; }.feature-card { padding: 19px; }.feature-card > p { min-height: 0; }.feature-summary { align-items: flex-start; flex-wrap: wrap; }.feature-summary .text-link { width: 100%; margin: 5px 0 0; }
  .capability-layout { grid-template-columns: 1fr; margin-top: 35px; border-bottom: 0; }.capability-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 10px 0 15px; border-right: 0; border-bottom: 1px solid var(--line); }.capability-nav button { min-height: 63px; padding: 8px; }.capability-nav button strong { font-size: 12px; }.capability-nav button small { font-size: 9px; }.capability-nav button b { font-size: 13px; }.capability-detail { padding: 32px 0 0; }.detail-copy h3 { font-size: 26px; }.detail-visual { max-width: none; }.account-list { padding-inline: 11px; }.visual-footer { flex-wrap: wrap; }
  .trace-section { padding-block: 80px; }.trace-copy h2 { font-size: 31px; }.trace-copy > p { font-size: 14px; }.result-states { gap: 5px; }.result-states > div { padding: 9px; }.result-states strong { font-size: 11px; }.result-states small { font-size: 9px; }.trace-row { grid-template-columns: 1.3fr .8fr .75fr .62fr; gap: 6px; padding-inline: 10px; font-size: 9px; }.trace-row-head { font-size: 8px; }.trace-table-head, .trace-table-foot { padding-inline: 10px; }
  .release-layout { grid-template-columns: 1fr; gap: 46px; }.release-feature { min-height: 0; }.release-timeline { padding-left: 31px; }.timeline-dot { left: -29px; }.release-version { font-size: 38px; }
  .boundary-inner { grid-template-columns: 1fr; gap: 27px; min-height: 0; padding-block: 60px; }.boundary-inner h2 { font-size: 33px; }.boundary-grid { gap: 0 14px; }.boundary-grid span { font-size: 10px; }
  .cta-section { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding-block: 60px; }.cta-section > .button { grid-column: 2; justify-self: start; }.cta-section h2 { font-size: 29px; }.cta-section p { font-size: 13px; line-height: 1.6; }
  .footer-inner nav { gap: 15px; }.footer-bottom { font-size: 9px; }
  .modal-card { padding: 27px 22px 24px; }.modal-card h2 { font-size: 24px; }
}

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

/* Dark editorial shell; the real product screenshots stay light so the UI is easy to inspect. */
html { scroll-padding-top: 84px; }
main#top { scroll-margin-top: 84px; }
::selection { color: #fff; background: var(--mint); }

.site-header {
  border-bottom-color: rgba(183, 171, 213, .14);
  background: rgba(9, 10, 15, .92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}

.brand-mark { border-color: rgba(155, 108, 255, .42); background: #11131a; }
.button-primary { color: #fff; background: #7c3aed; box-shadow: 0 10px 28px rgba(120, 72, 210, .28); }
.button-primary:hover { color: #fff; background: #6d28d9; box-shadow: 0 14px 34px rgba(120, 72, 210, .38); }
.button-outline { color: var(--mint); border-color: var(--mint-deep); background: transparent; }
.button-outline:hover { color: #fff; border-color: var(--mint); background: var(--mint); }
.button-quiet { background: transparent; }
.button-quiet:hover { border-color: var(--text-soft); background: var(--surface); }

.version-pill i,
.window-state i,
.live-state i,
.trace-table-foot i,
.status-live,
.monitor-live,
.autopilot-panel-head i,
.state-success,
.route-good,
.service-check i,
.shot-live-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
}

.live-state,
.autopilot-panel-head > span,
.journey-ok,
.log-success,
.text-mint,
.route-row b,
.service-check b,
.trace-table-foot span:first-child {
  color: var(--success);
}

.journey-ok,
.log-success { background: var(--success-soft); }
.journey-fail,
.log-fail { color: var(--red); background: var(--danger-soft); }
.journey-wait,
.log-pending { color: var(--amber); background: var(--warning-soft); }

.hero h1 em,
.trace-copy h2 em,
.boundary-inner h2 em { color: var(--mint); }

.hero-definition { background: rgba(25, 23, 37, .78); }

.signal-band,
.trace-section,
.boundary-section { background: var(--bg-deep); }

.console-window,
.journey-board,
.autopilot-panel,
.detail-visual,
.trace-table-wrap,
.modal-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}

.window-bar,
.journey-head,
.autopilot-panel-head,
.trace-row-head { background: var(--surface-3); }

.console-body.has-shot,
.console-sidebar { background: var(--surface-2); }
.console-nav-item.is-active { background: var(--surface-3); }
.metric,
.task-panel,
.mini-panel,
.visual-note,
.journey-result,
.autopilot-actions > div,
.task-finder-heading,
.task-finder > a,
.feature-card,
.primary-feature,
.support-features article,
.execution-stats > div,
.service-status > div,
.result-states > div { background: var(--surface); }

.task-finder > a:hover,
.feature-card:hover,
.primary-feature:hover { background: var(--surface-2); }
.task-progress,
.execution-progress,
.audit-meter i { background: #2a2737; }

.monitor-hit { background: var(--warning-soft); }
.autopilot-actions > i { color: var(--mint); border-color: #514269; background: var(--surface-3); }
.autopilot-arrow,
.journey-source > i,
.group-number { color: #fff; }

.capability-nav button:hover { border-color: var(--line); background: var(--surface-2); }
.capability-nav button[aria-selected="true"] { border-color: var(--mint); background: var(--surface-3); }
.detail-note { border-left-color: var(--amber); background: var(--warning-soft); }
.rule-message.is-selected > i { color: #fff; }

.release-feature { border-color: var(--mint-deep); background: rgba(27, 26, 41, .92); }
.release-badge { color: #fff; }
.timeline-dot { background: var(--bg); }
.site-footer { background: var(--bg-deep); }
.footer-bottom { color: #6c667b; }

.modal-backdrop { background: rgba(3, 4, 8, .78); backdrop-filter: blur(4px); }
.modal-card { border-color: #403951; background: var(--surface); }
.modal-card input,
.modal-card select { background: var(--bg-deep); }
.modal-card input:focus,
.modal-card select:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.form-success { color: var(--success) !important; border-color: #317e63; background: var(--success-soft); }

.hero-shot,
.real-shot-visual,
.trace-shot {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.hero-shot img,
.real-shot-image,
.real-shot-visual > img,
.trace-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-deep);
}

.shot-label,
.real-shot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
  font-size: 10px;
  line-height: 1.3;
}

.shot-label strong,
.real-shot-head span:first-child { color: var(--text); }
.shot-label > span:last-child,
.real-shot-head span:last-child { margin-left: auto; }
.shot-live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }

.hero-shot figcaption,
.real-shot-caption,
.trace-shot figcaption {
  padding: 10px 14px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  line-height: 1.55;
}

.trace-evidence-column {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.trace-shot { min-width: 0; }

.hero-visual {
  isolation: isolate;
  overflow: visible;
  padding: 42px 0 42px 28px;
}

.hero-light-stage {
  position: absolute;
  z-index: 0;
  inset: -20% -12% -22% 2%;
  overflow: hidden;
  pointer-events: none;
}

.hero-light-stage::before,
.hero-light-stage::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.hero-light-stage::before {
  inset: 10% -4% 8% 4%;
  background:
    radial-gradient(ellipse at 74% 42%, rgba(52, 132, 255, .26) 0, rgba(52, 132, 255, .1) 36%, transparent 68%),
    radial-gradient(ellipse at 40% 68%, rgba(119, 78, 219, .18) 0, rgba(119, 78, 219, .06) 38%, transparent 68%);
  filter: blur(36px);
  opacity: .78;
}

.hero-light-stage::after {
  left: -24%;
  bottom: 17%;
  width: 150%;
  height: 33%;
  background: linear-gradient(100deg, transparent 12%, rgba(90, 128, 255, 0) 31%, rgba(132, 111, 236, .14) 49%, rgba(72, 127, 230, .08) 61%, transparent 82%);
  filter: blur(28px);
  opacity: .38;
  transform: rotate(-8deg);
}

.hero-shot {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 9px;
  border-color: rgba(61, 157, 255, .56);
  background: linear-gradient(155deg, rgba(16, 47, 81, .96), rgba(4, 13, 27, .98));
  box-shadow: 0 0 48px rgba(39, 127, 255, .15), 0 32px 78px rgba(0, 0, 0, .56);
}

.hero-shot::before,
.hero-shot::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.hero-shot::before {
  z-index: 3;
  inset: 5px;
  border: 1px solid rgba(104, 167, 231, .2);
  border-radius: 5px;
}

.hero-shot::after {
  z-index: -1;
  right: 7%;
  bottom: -22px;
  left: 10%;
  height: 42px;
  border-radius: 50%;
  background: rgba(74, 105, 203, .18);
  filter: blur(22px);
  opacity: .7;
}

.hero-shot img {
  position: relative;
  z-index: 1;
  border-radius: 5px;
}

.hero-intent-callout {
  position: absolute;
  z-index: 6;
  top: -43px;
  left: 5%;
  display: grid;
  gap: 5px;
  min-width: 194px;
  padding: 9px 13px 10px;
  border-left: 2px solid var(--mint);
  background: rgba(10, 12, 21, .86);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
}

.hero-intent-kicker,
.hero-intent-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.2;
}

.hero-intent-kicker i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(85, 214, 165, .5);
}

.hero-intent-callout strong {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.hero-intent-meta { color: rgba(167, 139, 250, .82); }

.hero-scan-line {
  position: absolute;
  z-index: 4;
  top: 12%;
  right: 11px;
  left: 11px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 3%, rgba(124, 58, 237, .2) 22%, rgba(96, 165, 250, .68) 50%, rgba(167, 139, 250, .4) 78%, transparent 97%);
  box-shadow: 0 0 10px rgba(124, 58, 237, .34), 0 0 16px rgba(96, 165, 250, .18);
  opacity: .1;
  animation: hero-scan 6.2s ease-in-out infinite;
}

.hero-event-track {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: -31px;
  left: 7%;
  display: grid;
  grid-template-columns: max-content minmax(54px, 1fr) max-content;
  align-items: center;
  gap: 11px;
  pointer-events: none;
  color: rgba(200, 194, 217, .72);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
}

.hero-event-start,
.hero-event-end {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.hero-event-start { grid-template-columns: 5px auto; }
.hero-event-end { grid-template-columns: 5px auto; }

.hero-event-start b,
.hero-event-end b { grid-column: 2; color: var(--text-soft); font-size: 9px; font-weight: 650; }
.hero-event-start em,
.hero-event-end em { grid-column: 2; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 500; }

.hero-event-start::before,
.hero-event-end::before {
  grid-row: 1 / span 2;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
}

.hero-event-start::before {
  background: #a78bfa;
  box-shadow: 0 0 10px rgba(139, 92, 246, .62);
}

.hero-event-end { color: rgba(206, 224, 218, .78); }

.hero-event-end::before {
  background: var(--success);
  box-shadow: 0 0 10px rgba(85, 214, 165, .54);
}

.hero-event-line {
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .55), rgba(96, 165, 250, .38), rgba(85, 214, 165, .5));
}

.hero-event-line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9d0ff;
  box-shadow: 0 0 7px 2px rgba(139, 92, 246, .68), 0 0 14px rgba(96, 165, 250, .42);
  opacity: 0;
  transform: translateY(-50%);
  animation: hero-event-travel 6.2s ease-in-out infinite;
}

@keyframes hero-scan {
  0%, 100% { top: 10%; opacity: .08; }
  50% { top: 90%; opacity: .46; }
}

@keyframes hero-event-travel {
  0%, 52% { left: 0; opacity: 0; }
  57% { opacity: 1; }
  82% { left: calc(100% - 6px); opacity: 1; }
  88%, 100% { left: calc(100% - 6px); opacity: 0; }
}

@media (max-width: 980px) {
  .mobile-nav { background: var(--surface); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
}

@media (max-width: 640px) {
  .hero-light-stage { inset: -18% 0 -26% 14%; }
  .hero-light-stage::before { inset: 13% -6% 10% 8%; filter: blur(30px); opacity: .54; }
  .hero-light-stage::after { opacity: .2; }
  .hero-shot { padding: 6px; }
  .hero-shot::before { inset: 3px; opacity: .7; }
  .hero-scan-line { right: 8px; left: 8px; animation-duration: 8.2s; }
  .hero-intent-callout { top: -38px; left: 4%; min-width: 174px; padding: 7px 10px 8px; }
  .hero-intent-callout strong { font-size: 11px; }
  .hero-event-track { right: 2%; bottom: -36px; left: 2%; gap: 7px; }
  .hero-event-start em,
  .hero-event-end em { display: none; }
  .hero-shot img { min-width: 0; }
  .real-shot-image,
  .real-shot-visual > img,
  .trace-shot img { min-width: 680px; }

  .real-shot-visual,
  .trace-shot { overflow-x: auto; }

  .hero-shot { overflow: visible; }

  .shot-label,
  .real-shot-head,
  .hero-shot figcaption,
  .real-shot-caption,
  .trace-shot figcaption {
    position: sticky;
    left: 0;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .updates-page-intro { padding-top: 42px; }
  .updates-page-heading { margin-top: 38px; }
  .updates-page-heading h1 { font-size: 46px; }
  .updates-page-note { grid-template-columns: 1fr 1fr; }
  .updates-page-note .text-link { justify-self: start; }
}

@media (max-width: 640px) {
  .updates-page-intro { padding-top: 32px; }
  .updates-breadcrumb { font-size: 10px; }
  .updates-page-heading { margin-top: 32px; }
  .updates-page-heading h1 { font-size: 38px; line-height: 1.2; }
  .updates-page-heading p { margin-top: 16px; font-size: 13px; line-height: 1.7; }
  .updates-page-section { padding-top: 42px; padding-bottom: 58px; }
  .updates-page-note { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; padding-bottom: 54px; }
  .updates-page-note strong { font-size: 13px; }
  .updates-page-note p { font-size: 11px; }
}