:root {
  --sans: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  --ink: #f4f5f6;
  --body: #c8c6c2;
  --caption: #8a877f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 680px at 14% -10%, rgba(120, 132, 176, 0.28), transparent 58%),
    radial-gradient(720px 240px at 46% 92%, rgba(94, 106, 210, 0.2), transparent 70%),
    #07080b;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 40px;
  background: rgba(7, 8, 11, 0.78);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-portrait,
.desk-portrait {
  display: block;
  object-fit: contain;
  flex: none;
}
.brand-portrait { width: 28px; height: 28px; }
.brand-mark {
  display: block;
  height: 20px;
  width: auto;
}
.desk-portrait { width: 16px; height: 16px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav nav { display: flex; gap: 20px; }
.nav a { font-size: 14px; line-height: 1.5; color: var(--caption); }
.nav a:hover { color: var(--ink); }

.lang-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lang-btn:hover { border-color: #5e6ad2; color: #fff; }

.nav-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
a.nav-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.nav-btn:hover,
a.nav-btn:hover { border-color: #5e6ad2; color: #fff; }
.nav-btn.primary {
  background: #5e6ad2;
  border-color: #5e6ad2;
  color: #fff;
  font-weight: 600;
}
.nav-btn.primary:hover { background: #828fff; border-color: #828fff; }

.download-menu {
  position: relative;
  flex: none;
  width: 136px;
  scroll-margin-top: 80px;
}
.start-download {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #f4f5f6;
  color: #101012;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.start-download svg { display: block; width: 16px; height: 16px; flex: none; }
.start-download:hover { background: #ffffff; }
.os-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #f4f5f6;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.os-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #101012;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.os-option + .os-option { box-shadow: inset 0 1px 0 #e6e7ea; }
.os-option svg { display: block; width: 16px; height: 16px; flex: none; }
.os-option:hover:not(:disabled) { background: #ffffff; }
.os-option:disabled {
  color: #a3a3aa;
  cursor: default;
}

.site-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 40px 40px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 32px;
}
.foot-link {
  border: 0;
  padding: 0;
  background: none;
  color: #9aabc4;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.foot-link:hover { color: #d7e0ee; }
.foot-copy {
  color: #9aabc4;
  font-size: 14px;
  line-height: 1.5;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero-top h1 { min-width: 0; }
.hero-top .start-download { margin-top: 0; flex: none; }
.hero-lead {
  max-width: 22em;
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.hero-facts b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.hero-facts span {
  display: block;
  margin-top: 8px;
  color: var(--body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
.hero,
.block {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 40px 0;
}

.block { padding-top: 120px; }
.close { padding-bottom: 120px; }

h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.block > p:not(.caption) {
  max-width: 36em;
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--body);
}

.points {
  max-width: 52em;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
}

.points li + li { margin-top: 4px; }

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5e6ad2;
}

h1 {
  margin: 0;
  max-width: 14em;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.hero > p {
  max-width: 36em;
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--body);
}

.caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--caption);
}

.stage {
  position: relative;
  margin-top: 48px;
  padding-bottom: 28px;
}

.glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 160px;
  background: radial-gradient(closest-side, rgba(94, 106, 210, 0.55), rgba(94, 106, 210, 0) 70%);
  filter: blur(18px);
  pointer-events: none;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.instrument {
  position: relative;
  min-width: 860px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 1px, transparent 2px),
    #101012;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.bar,
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.bar { height: 48px; }
.status {
  height: 32px;
  justify-content: space-between;
  border-top: 1px solid #2a2a30;
  color: #9b9ba4;
  font-size: 12px;
  line-height: 1;
}

.bar-name {
  margin-right: 8px;
  font-size: 14px;
  font-weight: 600;
}

.spacer { flex: 1; }

.btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #101012;
  color: #f4f5f6;
  font-size: 14px;
  line-height: 1;
}

.btn.primary {
  background: #5e6ad2;
  border-color: #5e6ad2;
  color: #fff;
  font-weight: 600;
}

.body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  border-top: 1px solid #2a2a30;
}

.rail { border-right: 1px solid #2a2a30; background: #101012; }

.row {
  height: 52px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #2a2a30;
}

.row.on {
  background: #2a2a32;
  box-shadow: inset 3px 0 0 #5e6ad2;
}

.row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.row small {
  display: block;
  color: #9b9ba4;
  font-size: 12px;
  line-height: 1.25;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6e6e76;
}

.dot.live { background: #27a644; }

.well { display: flex; flex-direction: column; min-width: 0; background: #101012; }

.tabs {
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid #2a2a30;
}

.tab {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px 6px 0 0;
  color: #9b9ba4;
  font-size: 14px;
}

.tab.on {
  background: #2a2a32;
  color: #f4f5f6;
  box-shadow: inset 0 -2px 0 #5e6ad2;
}

.reader {
  background: #0c0c0e;
  padding: 10px 0 12px;
}

.line {
  display: grid;
  grid-template-columns: 13ch max-content max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 26px;
  color: #f4f5f6;
}

.hero .line { opacity: 0; animation: line-in 0.45s ease forwards; }
.hero .line:nth-child(1) { animation-delay: 0.48s; }
.hero .line:nth-child(2) { animation-delay: 0.62s; }
.hero .line:nth-child(3) { animation-delay: 0.76s; }
.hero .line:nth-child(4) { animation-delay: 0.9s; }
.hero .line:nth-child(5) { animation-delay: 1.04s; }

.t { color: #8d8d96; }
.n { font-weight: 600; }
.esc { color: #c9cdff; font-family: var(--mono); }
.codec {
  margin: 8px 16px 0;
  color: var(--caption);
  font-size: 13px;
  line-height: 1.5;
}
.macro {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: #101012;
}
.macro-head, .macro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid #2a2a30;
  font-size: 14px;
}
.macro-head { color: #9b9ba4; font-size: 12px; }
.macro > div + div { border-left: 1px solid #2a2a30; }
.macro-row.on { background: #2a2a32; box-shadow: inset 3px 0 0 #5e6ad2; }
.macro-row b { font-family: var(--mono); font-size: 13px; font-weight: 400; }
.macro-foot {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  color: #c8c6c2;
  font-size: 13px;
}
.macro-foot b { font-weight: 600; }
.macro-row span { color: #9b9ba4; font-size: 13px; }

.facets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--caption);
  font-size: 13px;
  line-height: 1.5;
}

.tag {
  justify-self: start;
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.tag.rx { background: rgba(0, 160, 170, 0.18); color: #8fd8df; }
.tag.tx { background: rgba(94, 106, 210, 0.24); color: #c9cdff; }
.tag.rx::before { content: "↓ "; }
.tag.tx::before { content: "↑ "; }

.send {
  padding: 12px;
  border-top: 1px solid #2a2a30;
}

.send-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #9b9ba4;
}

.who { font-weight: 600; }

.send-row { display: flex; gap: 8px; align-items: flex-end; }

.field {
  flex: 1;
  height: 44px;
  padding: 12px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #0c0c0e;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
}

.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 1px;
  background: #f4f5f6;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

.plate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 1px, transparent 2px),
    #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 56px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.reader-plate { padding: 18px 8px 20px; }
.say { font-size: inherit; font-family: inherit; }
.say.rx { color: #70c7d0; }
.say.tx { color: #a7aff9; }

.target-plate {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  background: #101012;
}

.assemble { padding: 28px 28px 18px; }
.plate-label {
  margin: 0 0 16px;
  color: var(--caption);
  font-size: 13px;
  line-height: 1.5;
}
.chunks { display: flex; gap: 10px; }
.chunks span {
  min-width: 7em;
  padding: 12px 14px;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.22;
}
.chunks span:nth-child(1) { animation: hold 5.4s infinite; }
.chunks span:nth-child(2) { animation: mid 5.4s infinite; }
.chunks span:nth-child(3) { animation: last 5.4s infinite; }
.formed {
  margin-top: 22px;
  border-top: 1px solid #2a2a30;
  padding: 14px 0 4px;
}
.formed .line { padding-left: 0; }
.formed .word { font-weight: 600; }

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.trio figcaption {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--caption);
}
.mini { min-height: 132px; padding: 14px 0; background: #0c0c0e; }
.mini .line {
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 26px;
  grid-template-columns: 13ch max-content max-content minmax(0, 1fr);
  white-space: nowrap;
}
.line.dim { opacity: 0.72; }
.fade { color: #d2d0cb; }
.file { padding: 18px 16px; }
.file p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 26px;
  color: #f4f5f6;
}
.file b { font-weight: 600; color: #9eb0ff; }

.capture { background: #101012; }
.cap-file { color: #9b9ba4; font-size: 13px; font-weight: 400; }
.btn.help { width: 32px; justify-content: center; padding: 0; color: #fff; background: #5e6ad2; border-color: #5e6ad2; }
.cap-summary, .cap-line, .cap-nav, .cap-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.cap-summary { height: 32px; justify-content: space-between; color: #9b9ba4; font-size: 12px; }
.cap-line { min-height: 40px; gap: 8px; }
.cap-k { width: 36px; flex: none; color: #9b9ba4; font-size: 12px; font-weight: 600; }
.chip, .check, .query {
  height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 13px;
}
.chip { padding: 0 10px; border: 1px solid #2a2a30; color: #f4f5f6; }
.check { gap: 6px; color: #c8c6c2; }
.check::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid #2a2a30;
  border-radius: 3px;
}
.check.on { color: #f4f5f6; }
.check.on::before { background: #5e6ad2; border-color: #5e6ad2; }
.query { flex: 1; min-width: 0; padding: 0 10px; border: 1px solid #2a2a30; background: #0c0c0e; color: #8a877f; }
.cap-head, .cap-row {
  display: grid;
  grid-template-columns: 3.2em 9.2em 6em 3.2em 3.2em minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 32px;
}
.cap-head { color: #8a877f; border-top: 1px solid #2a2a30; }
.cap-row.on { background: #2a2a32; }
.cap-row .rx { color: #8fd8df; }
.cap-row .tx { color: #c9cdff; }
.cap-detail { padding: 10px 12px 12px; border-top: 1px solid #2a2a30; background: #0c0c0e; }
.cap-detail b { display: block; height: 28px; font-size: 12px; line-height: 28px; }
.cap-detail p { margin: 0; color: #c8c6c2; font-family: var(--mono); font-size: 12px; line-height: 22px; }
.cap-detail .hex { color: #f4f5f6; letter-spacing: 0.04em; }
.cap-nav { height: 48px; border-top: 1px solid #2a2a30; }
.cap-foot { height: 48px; border-top: 1px solid #2a2a30; color: #9b9ba4; font-size: 12px; }

.prefs-pair {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 48px;
}
.prefs-pair .prefs {
  display: flex;
  flex-direction: column;
  width: min(460px, calc(50% - 24px));
  margin: 0;
}
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.prefs {
  width: min(560px, 100%);
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 1px, transparent 2px),
    #101012;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 56px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.prefs-head, .prefs-group, .prefs-row, .prefs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px;
}
.prefs-head { height: 48px; border-bottom: 1px solid #2a2a30; font-size: 15px; font-weight: 600; }
.prefs-group { height: 32px; border-bottom: 1px solid #2a2a30; justify-content: flex-start; color: #9b9ba4; font-size: 12px; }
.prefs-group i { margin-left: auto; font-style: normal; color: #c9cdff; }
.prefs-row.locked { color: #9b9ba4; }
.prefs-row.locked > span { color: #9b9ba4; }
.prefs-row.locked > span::after { content: none; }
.prefs-row.locked .mark { opacity: 0.45; }
.prefs-row { min-height: 44px; border-bottom: 1px solid #2a2a30; font-size: 14px; }
.prefs-row > div { min-width: 0; }
.session-sheet .prefs-row b { flex: 1; min-width: 0; padding-right: 12px; line-height: 1.35; }
.prefs-row b { font-weight: 600; }
.prefs-row > span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f4f5f6;
  font-weight: 400;
  white-space: nowrap;
}
.prefs-row span::after { content: "  ▾"; color: #9b9ba4; font-size: 11px; }
.prefs-row > .num::after { content: none; }
.mark {
  width: 16px;
  height: 16px;
  border: 1px solid #2a2a30;
  border-radius: 4px;
  background: transparent;
}
.mark.on { background: #5e6ad2; border-color: #5e6ad2; }
.prefs-row.tall { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.prefs-row small { display: block; margin-top: 4px; color: #9b9ba4; font-size: 12px; font-weight: 400; line-height: 16px; }
.prefs-gap { height: 16px; }
.prefs-foot { height: 48px; margin-top: auto; justify-content: flex-end; }
.mono { font-family: var(--mono); }

.mcp-scene {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding-bottom: 8px;
}
.source {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.source-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 205, 255, 0.42), rgba(94, 106, 210, 0.08) 68%);
  box-shadow: 0 0 16px 6px rgba(94, 106, 210, 0.45);
}
.source-mark svg { display: block; }
.source-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mcp-link {
  position: absolute;
  z-index: 2;
  left: 84px;
  top: 50%;
  width: 176px;
  height: 0;
  pointer-events: none;
}
.mcp-link-name {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  color: #c9cdff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.mcp-lanes {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}
.lane {
  position: relative;
  display: block;
  height: 2px;
}
.lane.to-tool { margin-right: 8px; }
.lane.to-ai { margin-left: 8px; }
.lane i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #d5dbff 0 7px, transparent 7px 15px);
  background-size: 15px 2px;
  animation: mcp-flow 1.35s linear infinite;
}
.lane.to-ai i { animation-direction: reverse; }
.lane::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.lane.to-tool::after { right: -7px; border-left: 6px solid #d5dbff; }
.lane.to-ai::after { left: -7px; border-right: 6px solid #d5dbff; }
@keyframes mcp-flow { to { background-position: 15px 0; } }
.rig { position: relative; z-index: 1; padding: 76px 4px 64px 36px; }
.pane {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 156px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(28, 30, 40, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.pane span { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.pane small { color: var(--caption); font-size: 12px; line-height: 1.5; }
.mcp-device {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 1px, transparent 2px),
    #101012;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.mcp-device .body { grid-template-columns: 168px minmax(0, 1fr); }
.mcp-device .line { font-size: 12px; line-height: 24px; grid-template-columns: 13ch max-content minmax(0, 1fr); gap: 8px; }
.lead {
  position: absolute;
  left: 42%;
  bottom: 16px;
  color: var(--caption);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.lead span {
  display: block;
  width: 1px;
  height: 22px;
  margin: 0 auto 4px;
  background: linear-gradient(#8ea0ff, rgba(142, 160, 255, 0));
}
.filecard {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 132px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.filecard b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; }
.filecard span { color: var(--caption); font-size: 12px; line-height: 1.5; }

.js .block {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-play-state: paused;
}
.js .block.in { animation-play-state: running; }

@keyframes flow { to { stroke-dashoffset: -280; } }
@keyframes hold { 0%, 100% { opacity: 1; } }
@keyframes mid {
  0%, 32% { opacity: 0.22; }
  33%, 100% { opacity: 1; }
}
@keyframes last {
  0%, 65% { opacity: 0.22; }
  66%, 100% { opacity: 1; }
}
@keyframes show {
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes blink { 50% { opacity: 0; } }

.desk { min-width: 980px; }
.desk-title,
.desk-tools,
.desk-tabs,
.desk-viewbar,
.send-top,
.desk-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.desk-title {
  position: relative;
  height: 32px;
  justify-content: center;
  color: #c8c6c2;
  font-size: 12px;
}
.wins { position: absolute; right: 14px; display: flex; align-items: center; gap: 14px; }
.wins svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #9b9ba4;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.desk-tools { height: 44px; padding: 0 10px; border-top: 1px solid #2a2a30; }
.desk .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.desk-body {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  border-top: 1px solid #2a2a30;
}
.desk-main { min-width: 0; }
.desk-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px max-content;
  align-content: start;
  border-right: 1px solid #2a2a30;
}
.srow {
  height: 56px;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 6px;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #2a2a30;
}
.srow.on { background: #2a2a32; box-shadow: inset 3px 0 0 #5e6ad2; }
.srow b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.srow small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9b9ba4;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.srow .dot { width: 6px; height: 6px; }
.dot.bad { background: #e5484d; }
.edit {
  width: 28px;
  height: 28px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #101012 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.2 3.2 12.8 6.8 6.2 13.4H2.6V9.8Z' fill='none' stroke='%23c8c6c2' stroke-width='1.2'/%3E%3Cpath d='M8.2 4.2 11.8 7.8' stroke='%23c8c6c2' stroke-width='1.2'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.desk-tabs { height: 40px; padding: 0 8px; border-bottom: 1px solid #2a2a30; }
.desk-tabs .tab { font-size: 12px; }
.desk-viewbar {
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid #2a2a30;
}
.chk, .find {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f4f5f6;
  font-size: 12px;
}
.chk::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1px solid #4a4a52;
  border-radius: 3px;
  background: #0c0c0e;
}
.chk.on::before {
  border-color: #5e6ad2;
  background-color: #5e6ad2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 9 10 3' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
.find {
  width: 88px;
  padding: 0 8px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  color: #9b9ba4;
}
.desk-reader {
  height: 312px;
  background: #0c0c0e;
  padding: 8px 0 10px;
  overflow: hidden;
}
.js .desk-feed { animation: feed 18s linear infinite; }
@keyframes feed {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.dline {
  display: grid;
  grid-template-columns: 13ch max-content max-content minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 22px;
  color: #f4f5f6;
  white-space: nowrap;
}
.dline .t { color: #8d8d96; }
.dline .n { font-weight: 600; }
.dir.rx { color: #3dbe86; }
.dir.tx { color: #6aa8ee; }
.line em,
.dline em,
.lamp-line em {
  font-style: normal;
  font-family: inherit;
  font-weight: 400;
}
#basics em { font-style: italic; }
.dline .ok { color: #3dbe86; font-style: normal; }
.dline .bad { color: #ff6b6b; font-style: normal; }
.dline .warn { color: #e2b340; font-style: normal; }
.dline .inv { padding: 0 3px; background: #f4f5f6; color: #101012; font-style: normal; }
.desk-send {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #2a2a30;
}
.send-top { grid-column: 1 / -1; min-height: 28px; }
.send-top .who { font-size: 13px; font-weight: 600; }
.composer {
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #0c0c0e;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
}
.send-side { display: flex; flex-direction: column; gap: 8px; }
.send-side .btn.primary { justify-content: center; }
.interval {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  color: #9b9ba4;
  font-size: 12px;
}
.interval b { color: #f4f5f6; font-weight: 400; }
.desk-status {
  height: 32px;
  padding: 0 12px;
  border-top: 1px solid #2a2a30;
  color: #9b9ba4;
  font-size: 11px;
  white-space: nowrap;
}
.desk-status b { color: #f4f5f6; font-size: 12px; font-weight: 600; }
.desk-status .clock { margin-left: 12px; }

@property --lamp-face { syntax: "<color>"; inherits: true; initial-value: #101012; }
@property --lamp-well { syntax: "<color>"; inherits: true; initial-value: #0c0c0e; }
@property --lamp-ink { syntax: "<color>"; inherits: true; initial-value: #f4f5f6; }
@property --lamp-muted { syntax: "<color>"; inherits: true; initial-value: #9b9ba4; }
@property --lamp-faint { syntax: "<color>"; inherits: true; initial-value: #6e6e76; }
@property --lamp-line { syntax: "<color>"; inherits: true; initial-value: #2a2a30; }
@property --lamp-chip { syntax: "<color>"; inherits: true; initial-value: #2a2a32; }
@property --lamp-name { syntax: "<color>"; inherits: true; initial-value: #3dbe86; }
@property --lamp-name2 { syntax: "<color>"; inherits: true; initial-value: #e6b450; }
@property --lamp-rx { syntax: "<color>"; inherits: true; initial-value: #70c7d0; }
@property --lamp-tx { syntax: "<color>"; inherits: true; initial-value: #a7aff9; }
@property --lamp-ok { syntax: "<color>"; inherits: true; initial-value: #3dbe86; }
@property --lamp-bad { syntax: "<color>"; inherits: true; initial-value: #ff6b6b; }

.lamp {
  --lamp-face: #101012;
  --lamp-well: #0c0c0e;
  --lamp-ink: #f4f5f6;
  --lamp-muted: #9b9ba4;
  --lamp-faint: #6e6e76;
  --lamp-line: #2a2a30;
  --lamp-chip: #2a2a32;
  --lamp-name: #3dbe86;
  --lamp-name2: #e6b450;
  --lamp-rx: #70c7d0;
  --lamp-tx: #a7aff9;
  --lamp-ok: #3dbe86;
  --lamp-bad: #ff6b6b;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
  background-color: var(--lamp-face);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 1px, transparent 2px);
  color: var(--lamp-ink);
  border-color: var(--lamp-line);
  animation: lamp 5.6s ease-in-out infinite;
}
.lamp-bar, .lamp-send {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
}
.lamp-send { height: 52px; border-top: 1px solid var(--lamp-line); }
.lamp-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-top: 1px solid var(--lamp-line); }
.lamp-rail { border-right: 1px solid var(--lamp-line); }
.lamp-row.quiet { background: transparent; box-shadow: none; }
.lamp-main { display: flex; flex-direction: column; min-width: 0; }
.lamp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 10px;
  background: var(--lamp-chip);
  box-shadow: inset 3px 0 0 var(--lamp-name);
}
.lamp-row b, .lamp-send .nm, .lamp-line .nm { color: var(--lamp-name); font-weight: 600; }
.lamp-line .nm2, .lamp-row .nm2 { color: var(--lamp-name2); font-weight: 600; }
.lamp-row small, .tm { display: block; color: var(--lamp-faint); font-size: 12px; font-weight: 400; }
.lamp-read { min-height: 248px; background: var(--lamp-well); padding: 10px 0 12px; }
.lamp-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--lamp-line);
  color: var(--lamp-muted);
  font-size: 12px;
}
.lamp-tools span { display: inline-flex; align-items: center; gap: 6px; }
.lamp-tools span::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid var(--lamp-faint);
  border-radius: 3px;
}
.lamp-tools .on::before { background: #5e6ad2; border-color: #5e6ad2; }
.lamp-line {
  display: grid;
  grid-template-columns: 13ch max-content max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 26px;
}
.lamp-line .rx { color: var(--lamp-rx); }
.lamp-line .tx { color: var(--lamp-tx); }
.lamp-line .ok { color: var(--lamp-ok); font-style: normal; }
.lamp-line .bad { color: var(--lamp-bad); font-style: normal; }
.lamp-go {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 6px;
  background: #5e6ad2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.lamp-switch {
  position: relative;
  display: inline-flex;
  width: 108px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--lamp-line);
  border-radius: 8px;
  background: var(--lamp-well);
  color: var(--lamp-muted);
  font-size: 12px;
}
.lamp-switch span { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; }
.lamp-switch i {
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 2px;
  width: 50px;
  height: 22px;
  border-radius: 6px;
  background: #5e6ad2;
  animation: lamp-knob 5.6s ease-in-out infinite;
}
.lamp-switch span:first-of-type { animation: lamp-dark-label 5.6s ease-in-out infinite; }
.lamp-switch span:last-of-type { animation: lamp-light-label 5.6s ease-in-out infinite; }
.lamp-glow.light {
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  animation: lamp-wash 5.6s ease-in-out infinite;
}
@keyframes lamp {
  0%, 28%, 100% {
    --lamp-face: #101012; --lamp-well: #0c0c0e; --lamp-ink: #f4f5f6; --lamp-muted: #9b9ba4;
    --lamp-faint: #6e6e76; --lamp-line: #2a2a30; --lamp-chip: #2a2a32;     --lamp-name: #3dbe86; --lamp-name2: #e6b450;
    --lamp-rx: #70c7d0; --lamp-tx: #a7aff9; --lamp-ok: #3dbe86; --lamp-bad: #ff6b6b;
  }
  50%, 78% {
    --lamp-face: #fcfcfd; --lamp-well: #ffffff; --lamp-ink: #20212a; --lamp-muted: #62636c;
    --lamp-faint: #92949f; --lamp-line: #e4e6ec; --lamp-chip: #eceef8; --lamp-name: #1b7a43; --lamp-name2: #946800;
    --lamp-rx: #087687; --lamp-tx: #515fc5; --lamp-ok: #237b41; --lamp-bad: #b92f40;
  }
}
@keyframes lamp-knob {
  0%, 28%, 100% { left: 2px; }
  50%, 78% { left: 54px; }
}
@keyframes lamp-dark-label {
  0%, 28%, 100% { color: #fff; }
  50%, 78% { color: #62636c; }
}
@keyframes lamp-light-label {
  0%, 28%, 100% { color: #9b9ba4; }
  50%, 78% { color: #fff; }
}
@keyframes lamp-wash {
  0%, 28%, 100% { opacity: 0; }
  50%, 78% { opacity: 1; }
}

@media (max-width: 860px) {
  .nav, .hero, .block, .site-foot { padding-left: 20px; padding-right: 20px; }
  .nav { height: auto; min-height: 56px; padding-top: 12px; padding-bottom: 12px; flex-direction: column; align-items: flex-start; }
  h1 { font-size: 36px; }
  .hero-top { align-items: flex-start; flex-direction: column; }
  .hero-facts { grid-template-columns: 1fr; gap: 18px; }
  .hero-lead { font-size: 18px; }
  h2 { font-size: 26px; }
  .target-plate, .trio, .macro { grid-template-columns: 1fr; }
  .prefs-pair { flex-direction: column; align-items: stretch; }
  .prefs-pair .prefs { width: 100%; }
  .capture { min-width: 720px; }
  .mcp-scene { grid-template-columns: 1fr; min-height: 0; }
  .mcp-link { display: none; }
  .rig { padding-left: 0; }
  .instrument { min-width: 720px; }
  .lamp { min-width: 0; }
  .stage { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .glow,
  .instrument,
  .hero .line,
  .caret,
  .chunks span,
  .formed,
  .lane i,
  .beam,
  .lamp,
  .lamp-switch i,
  .lamp-switch span,
  .lamp-glow.light,
  .desk-feed,
  .js .block { animation: none; }
  .hero .line,
  .chunks span,
  .formed,
  .js .block { opacity: 1; }
  .lamp {
    --lamp-face: #fcfcfd; --lamp-well: #ffffff; --lamp-ink: #20212a; --lamp-muted: #62636c;
    --lamp-faint: #92949f; --lamp-line: #e4e6ec; --lamp-chip: #eceef8; --lamp-name: #1b7a43; --lamp-name2: #946800;
    --lamp-rx: #087687; --lamp-tx: #515fc5; --lamp-ok: #237b41; --lamp-bad: #b92f40;
  }
  .lamp-switch i { left: 54px; }
  .lamp-switch span:first-of-type { color: #62636c; }
  .lamp-switch span:last-of-type { color: #fff; }
  .lamp-glow.light { opacity: 1; }
}