:root {
  --ink: #14171b;
  --muted: #5e646d;
  --line: #dfe2e6;
  --surface: #f5f6f7;
  --white: #ffffff;
  --blue: #1967d2;
  --blue-dark: #0f4da8;
  --green: #16a36a;
  --orange: #f08735;
  --red: #e45151;
  --max: 1240px;
  --header-h: 72px;
  font-family: "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#experience, #codex-tools, #mail-tools, #workflow, #details { scroll-margin-top: 84px; }
body { margin: 0; overflow-x: hidden; background: var(--white); }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 4px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
  padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #fff;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, height .25s ease;
}
.site-header.is-scrolled {
  height: 62px;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 rgba(20,23,27,.1);
  backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.brand img { width: 34px; height: 34px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.desktop-nav a { opacity: .82; transition: opacity .2s ease; }
.desktop-nav a:hover { opacity: 1; }
.header-download { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; font-size: 13px; font-weight: 600; background: rgba(15,17,19,.12); backdrop-filter: blur(12px); }
.header-download img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.site-header.is-scrolled .header-download { color: #fff; border-color: var(--ink); background: var(--ink); }
.site-header.is-scrolled .header-download img { filter: brightness(0) invert(1); }
.menu-button, .mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: max(680px, calc(100svh - 32px));
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.hero-wallpaper, .hero-shade { position: absolute; inset: 0; }
.hero-wallpaper {
  z-index: -3;
  background: url("assets/product/desktop-wallpaper.png") center 46% / cover no-repeat;
  transform: scale(1.015);
  animation: hero-breathe 18s ease-in-out infinite alternate;
}
.hero-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(5,11,16,.76) 0%, rgba(5,11,16,.48) 39%, rgba(5,11,16,.06) 70%), linear-gradient(0deg, rgba(5,9,13,.48) 0%, transparent 26%, rgba(5,9,13,.18) 100%);
}
@keyframes hero-breathe { to { transform: scale(1.035) translate3d(-.4%, -.2%, 0); } }

.hero-copy {
  position: absolute;
  z-index: 3;
  left: max(28px, calc((100vw - var(--max)) / 2));
  top: 50%;
  width: min(610px, 48vw);
  transform: translateY(-48%);
}
.eyebrow, .section-kicker { margin: 0 0 20px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.hero .eyebrow { color: #cde1ff; }
.hero h1 { margin: 0; font-size: 96px; line-height: .98; font-weight: 680; letter-spacing: 0; }
.hero-lead { max-width: 580px; margin: 28px 0 0; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 34px; }
.primary-button, .secondary-button {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 650;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.primary-button { color: #101317; background: #fff; }
.primary-button img { width: 18px; height: 18px; }
.secondary-button { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); backdrop-filter: blur(12px); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.secondary-button:hover { background: rgba(255,255,255,.18); }
.release-line { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: rgba(255,255,255,.64); font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #57d69a; box-shadow: 0 0 0 4px rgba(87,214,154,.14); }

.desktop-tools { position: absolute; z-index: 4; right: 26px; top: 104px; display: grid; gap: 12px; }
.desktop-tools button { width: 98px; min-height: 86px; padding: 9px 7px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; color: #fff; background: rgba(9,20,31,.34); box-shadow: 0 8px 20px rgba(0,0,0,.12); backdrop-filter: blur(10px); cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.desktop-tools button:hover { transform: translateX(-4px); background: rgba(9,20,31,.56); border-color: rgba(255,255,255,.58); }
.desktop-tools button > i, .module-title-row > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; font-style: normal; font-weight: 800; text-shadow: none; }
.desktop-tools .relay-mark, .module-title-row .relay-mark { color: #9a4e0c; background: #ffdfba; }
.desktop-tools .pool-mark, .module-title-row .pool-mark { color: #087458; background: #c9f3e5; }
.desktop-tools button > span { font-size: 11px; font-weight: 650; }
.desktop-tools button > small { color: rgba(255,255,255,.62); font-size: 8px; }

.orb-demo {
  position: absolute;
  z-index: 5;
  right: 4.6vw;
  top: 50%;
  width: 176px;
  height: 122px;
  transform: translateY(-18%);
}
.orb-widget {
  position: relative;
  width: 176px;
  height: 76px;
}
.orb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(155deg, #3a3f4a 0%, #2a2d34 48%, #22252c 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.orb:hover {
  transform: scale(1.05);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.48),
    0 0 0 5px rgba(43, 125, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.orb-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.orb-ring-track,
.orb-ring-prog {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
}
.orb-ring-track { stroke: rgba(255, 255, 255, 0.14); }
.orb-ring-prog {
  stroke: #2b7de9;
  filter: drop-shadow(0 0 4px rgba(43, 125, 233, 0.55));
}
.orb-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.orb-core strong {
  display: inline-flex;
  align-items: baseline;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.orb-core b { font-weight: 700; }
.orb-core em {
  font-style: normal;
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}
.orb-quota-badge {
  min-width: 48px;
  padding: 2px 4px 2px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(96, 220, 178, 0.38);
  border-radius: 4px;
  color: #a7f3d0;
  background: rgba(16, 94, 75, 0.55);
  line-height: 1;
  white-space: nowrap;
}
.orb-quota-badge b { font-size: 8px; font-weight: 750; font-variant-numeric: tabular-nums; }
.orb-quota-badge small { font-size: 5px; font-weight: 650; color: rgba(220, 255, 241, 0.82); }
.speed-tail {
  position: absolute;
  left: 34px;
  top: 12px;
  z-index: 1;
  width: 124px;
  height: 52px;
  box-sizing: border-box;
  padding: 6px 16px 6px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: 0 26px 26px 0;
  background: rgba(31, 41, 55, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 34%);
}
.speed-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.speed-row i {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  flex-shrink: 0;
}
.speed-row.up { color: #50e3c2; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.speed-row.up i { border-bottom: 5px solid #50e3c2; }
.speed-row.down { color: #7dd3fc; }
.speed-row.down i { border-top: 5px solid #7dd3fc; }
.orb-tip {
  position: absolute;
  top: 90px;
  left: 0;
  width: max-content;
  max-width: 190px;
  padding: 8px 11px;
  border-radius: 4px;
  background: rgba(6, 14, 23, 0.7);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.orb-demo:hover .orb-tip,
.orb-demo:focus-within .orb-tip,
.orb-demo.is-tip .orb-tip {
  opacity: 1;
  visibility: visible;
}
.orb-demo.is-releasing .orb { animation: orb-release .7s ease; }
.orb-demo.is-releasing .orb::after {
  content: "";
  position: absolute;
  left: 30px;
  top: -38px;
  width: 16px;
  height: 42px;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(#eaf7ff, #ffac3d 52%, transparent);
  animation: rocket .9s ease forwards;
}
@keyframes orb-release { 40% { transform: scale(.9); } 70% { transform: scale(1.1); } }
@keyframes rocket { from { opacity: 0; transform: translateY(18px) scale(.6); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-65px) scale(1); } }

.quick-panel {
  position: absolute;
  z-index: 4;
  top: calc(50% - 190px);
  right: calc(4.6vw + 186px);
  width: 360px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(249,251,253,.9);
  box-shadow: 0 26px 70px rgba(2,14,27,.36);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  transform: translateX(26px) scale(.96);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.quick-panel.is-open { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.panel-topline { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #dfe3e7; }
.panel-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.panel-brand img { width: 24px; height: 24px; border-radius: 5px; }
.panel-status { display: flex; align-items: center; gap: 6px; color: #4f5964; font-size: 10px; }
.panel-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.quick-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 0; }
.quick-meters div { padding: 11px; border: 1px solid #e1e4e8; border-radius: 6px; background: rgba(255,255,255,.7); }
.quick-meters span { display: block; color: #727982; font-size: 9px; }
.quick-meters b { display: block; margin-top: 3px; font-size: 18px; }
.quick-meters i { display: block; height: 3px; margin-top: 8px; background: #e7eaee; border-radius: 2px; overflow: hidden; }
.quick-meters i::after { content: ""; display: block; width: var(--value); height: 100%; background: var(--blue); }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-actions button { min-height: 42px; border: 1px solid #d9dde2; border-radius: 5px; background: #fff; cursor: pointer; font-size: 11px; text-align: left; padding: 0 12px; transition: border .2s, color .2s, transform .2s; }
.quick-actions button:hover { color: var(--blue); border-color: #8bb7ee; transform: translateY(-1px); }

.hero-foot { position: absolute; z-index: 2; left: max(28px, calc((100vw - var(--max)) / 2)); bottom: 26px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.62); font-size: 11px; }
.hero-foot i { width: 24px; height: 1px; background: rgba(255,255,255,.25); }

.product-intro, .detail-section { max-width: var(--max); margin: 0 auto; padding: 118px 28px; }
.product-intro > h2, .detail-section > h2 { max-width: 1120px; margin: 0; font-size: 72px; line-height: 1.08; font-weight: 660; letter-spacing: 0; }
.section-lead { max-width: 680px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.feature-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 62px; border-top: 1px solid var(--line); }
.feature-tabs button { position: relative; min-height: 70px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; color: #737981; font-weight: 600; text-align: left; }
.feature-tabs button + button { border-left: 1px solid var(--line); }
.feature-tabs button span { color: #9ba0a6; font-size: 10px; }
.feature-tabs button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 3px; background: var(--blue); transition: right .35s ease; }
.feature-tabs button[aria-selected="true"] { color: var(--ink); }
.feature-tabs button[aria-selected="true"]::after { right: 0; }
.module-note { margin: 13px 0 0; color: #838991; font-size: 11px; text-align: right; }

.product-stage { min-height: 640px; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(600px, 1.65fr); gap: 58px; align-items: center; margin-top: 52px; }
.stage-copy { min-height: 360px; display: grid; align-items: center; }
.feature-copy { grid-area: 1 / 1; animation: copy-enter .45s ease both; }
@keyframes copy-enter { from { opacity: 0; transform: translateY(14px); } }
.feature-index { color: var(--blue); font-size: 11px; font-weight: 800; }
.feature-copy h3 { margin: 14px 0 18px; font-size: 35px; line-height: 1.22; font-weight: 650; }
.feature-copy > p:not(.feature-index) { margin: 0; color: var(--muted); line-height: 1.85; }
.feature-copy ul { margin: 24px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; font-size: 13px; }
.feature-copy li { display: flex; align-items: center; gap: 9px; }
.feature-copy li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }

.stage-screen { position: relative; min-width: 0; aspect-ratio: 1.42; border: 1px solid #cfd4d9; border-radius: 8px; overflow: hidden; background: #eef0f2; box-shadow: 0 28px 80px rgba(20,34,48,.17), 0 2px 10px rgba(20,34,48,.08); }
.screen-chrome { height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #d5d9de; background: rgba(250,251,252,.92); color: #777d84; }
.screen-chrome span { width: 8px; height: 8px; border-radius: 50%; background: #c9cdd2; }
.screen-chrome span:first-child { background: #ef7676; }
.screen-chrome span:nth-child(2) { background: #efc35e; }
.screen-chrome span:nth-child(3) { background: #63bd7f; }
.screen-chrome b { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; }
.screen-body { height: calc(100% - 38px); display: grid; grid-template-columns: 50px 1fr; }
.app-sidebar { padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-right: 1px solid #d8dce0; background: #f8f9fa; }
.app-sidebar img { width: 27px; height: 27px; margin-bottom: 10px; border-radius: 6px; }
.app-sidebar span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; color: #717881; font-size: 15px; }
.app-sidebar span.is-current { color: #fff; background: var(--blue); }
.app-sidebar i { flex: 1; }
.screen-view { position: relative; min-width: 0; padding: 24px; overflow: hidden; background: #f5f6f7; animation: view-enter .45s ease both; }
@keyframes view-enter { from { opacity: 0; transform: translateX(12px); } }
.view-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.view-heading small { display: block; margin-bottom: 3px; color: #7d848c; font-size: 9px; }
.view-heading h4 { margin: 0; font-size: 20px; }
.view-heading > span { color: #848a91; font-size: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric-card { position: relative; min-height: 116px; padding: 14px; border: 1px solid #e0e3e6; border-radius: 6px; background: #fff; overflow: hidden; }
.metric-card > span { color: #767d85; font-size: 9px; }
.metric-card > b { display: block; margin-top: 8px; font-size: 24px; line-height: 1; }
.metric-card > b small { font-size: 10px; }
.metric-card > p { position: absolute; left: 14px; bottom: 10px; margin: 0; color: #8a9097; font-size: 8px; }
.metric-primary { color: #fff; border-color: #1a64c1; background: linear-gradient(145deg, #1b6ed6, #174b9b); }
.metric-primary > span, .metric-primary > p { color: rgba(255,255,255,.72); }
.ring-chart { position: absolute; right: 14px; top: 20px; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#fff 0 84%, rgba(255,255,255,.18) 84%); }
.ring-chart i { position: absolute; inset: 7px; border-radius: 50%; background: #1a5eb8; }
.spark { position: absolute; right: 13px; bottom: 16px; width: 96px; height: 46px; display: flex; gap: 3px; align-items: end; opacity: .75; }
.spark i { flex: 1; background: #7aafea; border-radius: 2px 2px 0 0; }
.spark i:nth-child(1) { height: 23%; }.spark i:nth-child(2) { height: 42%; }.spark i:nth-child(3) { height: 31%;}.spark i:nth-child(4) { height: 70%;}.spark i:nth-child(5) { height: 48%;}.spark i:nth-child(6) { height: 86%;}.spark i:nth-child(7) { height: 54%;}
.bar { position: absolute; left: 14px; right: 14px; bottom: 28px; height: 5px; border-radius: 3px; background: #edf0f2; overflow: hidden; }.bar i { display: block; width: 41%; height: 100%; background: var(--orange); }
.network-card b { color: #1373c8; font-size: 17px; }.network-card > p { bottom: 22px; color: var(--green); }.network-line { position: absolute; right: -4px; bottom: 8px; width: 62%; height: 48px; opacity: .38; background: linear-gradient(145deg, transparent 45%, #1c8bd2 46% 49%, transparent 50%), linear-gradient(35deg, transparent 48%, #1c8bd2 49% 52%, transparent 53%); }
.system-bottom { margin-top: 10px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; border: 1px solid #e0e3e6; border-radius: 6px; background: #fff; }
.system-bottom div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.system-bottom small { grid-column: 1/-1; color: #81878e; font-size: 8px; }.system-bottom b { font-size: 11px; }.system-bottom span { color: #737980; font-size: 8px; align-self: end; }
.system-bottom button, .optimize-run { padding: 9px 12px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); font-size: 9px; cursor: pointer; }

.desktop-view { padding: 0; }
.desktop-canvas { position: absolute; inset: 0; background: linear-gradient(rgba(5,12,18,.12),rgba(5,12,18,.12)), url("assets/product/desktop-wallpaper.png") center/cover; }
.fence { position: absolute; padding: 10px; border: 1px solid rgba(255,255,255,.38); border-radius: 6px; background: rgba(234,244,250,.38); box-shadow: 0 10px 26px rgba(13,27,39,.16); backdrop-filter: blur(14px) saturate(120%); color: #152331; transition: inset .5s ease, width .5s ease, height .5s ease, opacity .4s ease; }
.fence > b { display: flex; justify-content: space-between; font-size: 10px; }.fence > b span { color: #526273; font-size: 8px; }.fence > div { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.fence i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.76); font-style: normal; font-size: 9px; box-shadow: 0 2px 7px rgba(0,0,0,.1); }
.fence-a { left: 5%; top: 7%; width: 42%; height: 57%; }.fence-b { left: 50%; top: 7%; width: 28%; height: 42%; }.fence-b > div { grid-template-columns: repeat(2,1fr); }.fence-c { right: 4%; bottom: 10%; width: 29%; height: 31%; }
.fence-stats { display: grid !important; grid-template-columns: auto 1fr auto 1fr !important; align-items: end; gap: 3px !important; }.fence-stats strong { font-size: 16px; }.fence-stats span { font-size: 7px; color: #5d6872; }
.layout-switch { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; padding: 3px; border: 1px solid rgba(255,255,255,.45); border-radius: 5px; background: rgba(15,27,38,.62); backdrop-filter: blur(10px); }
.layout-switch button { min-width: 58px; padding: 6px 8px; border: 0; border-radius: 3px; color: rgba(255,255,255,.7); background: transparent; font-size: 8px; cursor: pointer; }.layout-switch button.is-on { color: #18202a; background: #fff; }
.desktop-canvas[data-layout="stack"] .fence-a { left: 8%; top: 11%; width: 48%; height: 62%; }.desktop-canvas[data-layout="stack"] .fence-b { left: 44%; top: 17%; width: 42%; height: 56%; }.desktop-canvas[data-layout="stack"] .fence-c { left: 27%; right: auto; top: 31%; bottom: auto; width: 45%; height: 39%; }
.desktop-canvas[data-layout="work"] .fence-a { left: 5%; top: 8%; width: 29%; height: 68%; }.desktop-canvas[data-layout="work"] .fence-b { left: 37%; top: 8%; width: 58%; height: 68%; }.desktop-canvas[data-layout="work"] .fence-c { opacity: 0; }

.capture-view { padding: 0; background: #1a1f24; }
.capture-canvas { position: absolute; inset: 0; background: linear-gradient(rgba(5,11,16,.62),rgba(5,11,16,.62)), url("assets/product/desktop-wallpaper.png") center/cover; }
.selection-box { position: absolute; inset: 13% 11% 20% 12%; border: 2px solid #fff; background: linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)), url("assets/product/desktop-wallpaper.png") center/cover; box-shadow: 0 0 0 999px rgba(0,0,0,.08); }
.selection-box > i { position: absolute; width: 8px; height: 8px; border: 1px solid #fff; background: var(--blue); }.selection-box > i:nth-of-type(1) { left:-5px;top:-5px}.selection-box > i:nth-of-type(2) { right:-5px;top:-5px}.selection-box > i:nth-of-type(3) { left:-5px;bottom:-5px}.selection-box > i:nth-of-type(4) { right:-5px;bottom:-5px}
.selection-size { position: absolute; left: -2px; top: -24px; padding: 4px 6px; color: #fff; background: #1d242c; font-size: 8px; }
.annotation-line { position: absolute; z-index: 2; width: 25%; height: 3px; left: 36%; top: 42%; border-radius: 2px; background: #f04444; transform: rotate(-17deg); }.annotation-line::after { content:""; position:absolute; right:-2px; top:-4px; border-left:9px solid #f04444; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.capture-toolbar-live { position: absolute; z-index: 3; left: 50%; bottom: 8%; transform: translateX(-50%); height: 42px; padding: 5px 7px; display: flex; align-items: center; gap: 2px; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.capture-toolbar-live button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 4px; color: #363b40; background: transparent; cursor:pointer; font-size: 15px; }.capture-toolbar-live button:hover { background: #edf3fa; }.capture-toolbar-live > i { width: 1px; height: 22px; margin: 0 3px; background: #d7dade; }.capture-toolbar-live .record-button { color: var(--red); }.capture-toolbar-live .record-button.is-recording { animation: rec-pulse 1s infinite; background: #fff0f0; }.capture-toolbar-live .done-button { color: #15a05d; font-weight: 800; }
@keyframes rec-pulse { 50% { opacity: .52; } }
.recording-pill { position: absolute; z-index: 4; right: 6%; top: 7%; min-height: 36px; padding: 0 6px 0 10px; display: flex; align-items: center; gap: 9px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 8px; }.recording-pill > i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: rec-pulse 1s infinite; }.recording-pill b { font-variant-numeric: tabular-nums; }.recording-pill span { color: #777; }.recording-pill button { height: 26px; padding: 0 9px; border: 0; border-radius: 13px; color: #fff; background: var(--red); cursor: pointer; font-size: 8px; }

.optimize-view { padding: 24px; }
.optimize-run { min-width: 74px; }
.optimize-run:disabled { opacity: .7; cursor: progress; }
.health-row { padding: 15px; display: flex; gap: 16px; align-items: center; border-radius: 6px; color: #fff; background: linear-gradient(110deg, #243346, #11735f); }
.health-score { width: 68px; height: 68px; display: grid; place-items: center; align-content: center; border: 5px solid rgba(255,255,255,.22); border-top-color: #6be0ad; border-radius: 50%; }.health-score span { font-size: 22px; font-weight: 700; line-height: 1; }.health-score small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 7px; }.health-row h5 { margin: 0 0 6px; font-size: 14px; }.health-row p { margin: 0; color: rgba(255,255,255,.68); font-size: 8px; }
.optimize-list { margin-top: 10px; display: grid; gap: 7px; }.optimize-list button { min-height: 52px; padding: 8px 11px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; border: 1px solid #e0e3e6; border-radius: 5px; background: #fff; text-align: left; cursor: pointer; }.optimize-list button > i { width: 30px; height: 30px; display:grid;place-items:center;border-radius:5px;font-style:normal;font-size:10px;font-weight:700}.clean-memory { color:#1264ba;background:#e8f2ff}.clean-trash { color:#9b6417;background:#fff1dc}.clean-start { color:#167757;background:#e4f7ef}.optimize-list button span { display: grid; gap: 2px; }.optimize-list button b { font-size: 10px; }.optimize-list button small { color:#848a91;font-size:7px}.optimize-list button strong { color:var(--blue);font-size:8px}.optimize-progress { height:3px;margin-top:10px;border-radius:2px;background:#dfe3e7;overflow:hidden}.optimize-progress i { display:block;width:0;height:100%;background:var(--green)}.optimize-progress.is-running i { animation: optimize-run 1.8s ease forwards; }.optimize-progress.is-done i { width:100%; }
.optimize-capabilities { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 5px; }.optimize-capabilities span { padding: 4px 6px; border: 1px solid #dfe4e8; border-radius: 3px; color: #68717a; background: #f7f8f9; font-size: 8px; }
@keyframes optimize-run { to { width:100%; } }

.codex-section { padding: 124px max(28px, calc((100vw - var(--max)) / 2)); background: #eef1f3; }
.codex-heading { display: grid; grid-template-columns: 1.2fr .65fr; gap: 80px; align-items: end; }
.codex-heading h2 { margin: 0; font-size: 68px; line-height: 1.08; font-weight: 650; letter-spacing: 0; }
.codex-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.codex-module-grid { margin-top: 68px; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.codex-module { min-width: 0; padding-top: 22px; border-top: 3px solid #c8cdd2; transition: border-color .25s ease, transform .25s ease; }
.codex-module.is-focused { transform: translateY(-5px); }
.relay-module { border-top-color: #e49a4b; }
.pool-module { border-top-color: #35a884; }
.module-title-row { min-height: 46px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; }
.module-title-row > i { width: 38px; height: 38px; }
.module-title-row div > span { color: #8a9097; font-size: 9px; font-weight: 800; }
.module-title-row h3 { margin: 2px 0 0; font-size: 21px; }
.module-ready, .module-scope { padding: 5px 8px; border-radius: 4px; font-size: 9px; }
.module-ready { color: #087458; background: #d9f5eb; }
.module-scope { color: #8a5715; background: #fff0d8; }
.module-summary { min-height: 52px; margin: 18px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.relay-console, .pool-console { min-height: 354px; padding: 16px; border: 1px solid #d7dce0; border-radius: 7px; background: #fff; box-shadow: 0 16px 44px rgba(37,48,58,.09); }
.console-status { min-height: 54px; padding-bottom: 13px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e5e8ea; }
.console-status > i { width: 9px; height: 9px; border-radius: 50%; background: #a7adb3; box-shadow: 0 0 0 4px #eff1f3; }
.console-status.is-tested > i { background: #e1933d; box-shadow: 0 0 0 4px #fff1df; }
.console-status.is-connected > i { background: var(--green); box-shadow: 0 0 0 4px #e1f6ed; }
.console-status span { display: grid; gap: 3px; }
.console-status b { font-size: 12px; }
.console-status small { color: #81878e; font-size: 9px; }
.relay-profile { min-height: 58px; margin-top: 9px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e2e5e8; border-radius: 5px; }
.relay-profile.is-selected { border-color: #e3a968; background: #fff9f2; }
.relay-profile div { min-width: 0; display: grid; gap: 3px; }
.relay-profile b { font-size: 11px; }
.relay-profile small { overflow: hidden; color: #7b828a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.relay-profile > span { flex-shrink: 0; padding: 4px 6px; border-radius: 3px; color: #8a5715; background: #ffecd2; font-size: 8px; }
.relay-result { min-height: 30px; margin-top: 10px; padding: 8px 10px; color: #777f87; background: #f4f5f6; border-radius: 4px; font-size: 9px; }
.relay-result.is-ok { color: #087458; background: #e5f7f0; }
.quota-card { margin-top: 10px; padding: 11px 12px; border: 1px solid #dce3e5; border-radius: 5px; background: #f8fbfa; }
.quota-head { display: flex; justify-content: space-between; align-items: center; color: #374047; font-size: 10px; font-weight: 700; }
.quota-head button { padding: 3px 6px; border: 1px solid #c7d4cf; border-radius: 3px; color: #16745b; background: #fff; cursor: pointer; font-size: 8px; }
.quota-head button:disabled { opacity: .6; cursor: progress; }
.quota-metrics { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.quota-metrics div { display: grid; gap: 3px; }.quota-metrics b { color: #116b55; font-size: 15px; font-variant-numeric: tabular-nums; }.quota-metrics div:nth-child(2) b { color: #6c747b; }.quota-metrics div:nth-child(3) b { color: #263039; }.quota-metrics small { color: #8a9299; font-size: 8px; }
.quota-bar { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #dfeae5; }.quota-bar i { display: block; width: 16%; height: 100%; border-radius: inherit; background: #d89b45; transition: width .35s ease; }
.quota-message { display: block; margin-top: 7px; color: #6f7c76; font-size: 8px; }
.console-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.console-actions button, .pool-write-button { min-height: 38px; border: 1px solid #d7dade; border-radius: 5px; background: #fff; cursor: pointer; font-size: 10px; font-weight: 650; }
.console-actions button.is-primary { color: #fff; border-color: #b46b21; background: #b46b21; }
.console-actions button:disabled, .pool-write-button:disabled { opacity: .65; cursor: progress; }
.module-points { margin: 20px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; color: #4f565e; font-size: 11px; }
.module-points li { display: flex; align-items: center; gap: 8px; }
.module-points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8f969d; }
.module-points code { padding: 2px 4px; border-radius: 3px; background: #dde1e4; font-family: Consolas, monospace; font-size: 9px; }
.pool-warning { padding: 9px 10px; border: 1px solid #f0d49e; border-radius: 4px; color: #835814; background: #fff8e9; font-size: 9px; line-height: 1.55; }
.pool-status-row { margin: 12px 0 7px; display: flex; justify-content: space-between; color: #626971; font-size: 10px; }
.pool-status-row span { display: flex; align-items: center; gap: 6px; }
.pool-status-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pool-account { margin-top: 8px; padding: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; border: 1px solid #e1e4e7; border-radius: 5px; background: #fff; }
.pool-account.is-active { border-color: #7dcbb1; background: #f1fbf7; }
.pool-acc-main { min-width: 0; min-height: 72px; padding: 4px 6px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pool-acc-main > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #087458; background: #d9f4eb; font-style: normal; font-size: 10px; font-weight: 700; }
.pool-acc-main > span { min-width: 0; display: grid; gap: 3px; }
.pool-acc-main b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pool-acc-main small { color: #80878f; font-size: 8px; }
.pool-acc-quota { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pool-acc-meter { position: relative; min-width: 0; padding: 5px 6px 7px; border-radius: 4px; background: #eef6f2; overflow: hidden; }
.pool-acc-meter em { color: #6a747c; font-size: 7px; font-style: normal; font-weight: 700; }
.pool-acc-meter b { display: block; margin-top: 2px; color: #116b55; font-size: 12px; font-variant-numeric: tabular-nums; }
.pool-acc-meter > i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 0 2px 0 0; background: #35a884; }
.pool-acc-badge { color: #168366; font-size: 8px; font-style: normal; font-weight: 700; }
.pool-acc-refresh { align-self: center; min-height: 30px; padding: 0 10px; border: 1px solid #c7d4cf; border-radius: 4px; color: #16745b; background: #fff; cursor: pointer; font-size: 9px; font-weight: 650; }
.pool-acc-refresh:hover { border-color: #7eb9a7; }
.pool-acc-refresh:disabled { opacity: .65; cursor: progress; }
.pool-port { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; color: #666e76; font-size: 9px; }
.pool-port code { padding: 5px 7px; border-radius: 3px; color: #1d5648; background: #e6f5ef; font-family: Consolas, monospace; }
.pool-write-button { width: 100%; margin-top: 12px; color: #fff; border-color: #167f62; background: #167f62; }
.pool-write-result { margin-top: 9px; padding: 7px 9px; border-radius: 4px; color: #087458; background: #e5f7f0; font-size: 9px; }
.scope-note { margin: 16px 0 0; padding-left: 10px; border-left: 2px solid #d89b45; color: #747b83; font-size: 10px; line-height: 1.65; }
.scope-note b { color: #8a5715; }

.mail-section { padding: 124px max(28px, calc((100vw - var(--max)) / 2)); background: #fff; }
.mail-heading { display: grid; grid-template-columns: 1.1fr .7fr; gap: 80px; align-items: end; }
.mail-heading h2 { margin: 0; font-size: 68px; line-height: 1.08; font-weight: 650; }
.mail-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.85; }.mail-heading code { padding: 2px 4px; border-radius: 3px; color: #265d50; background: #e8f5f0; font-family: Consolas, monospace; font-size: 11px; }
.mail-layout { margin-top: 68px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.mail-copy { padding-top: 6px; }.mail-callout { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #d7e7e1; border-radius: 6px; background: #f3faf7; }.mail-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #0d795b; background: #d4f2e6; font-size: 17px; font-weight: 800; }.mail-callout > div { display: grid; gap: 3px; }.mail-callout b { font-size: 13px; }.mail-callout small { color: #6f7d76; font-size: 9px; }.mail-callout strong { color: #16745b; font-variant-numeric: tabular-nums; }.mail-callout > i { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #18a36d; box-shadow: 0 0 0 4px #d9f5e9; }
.mail-points { margin: 26px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; color: #5d6670; font-size: 12px; line-height: 1.75; }.mail-points li { padding-left: 17px; position: relative; }.mail-points li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: #35a884; }.mail-points b { color: #28323a; }.mail-points code { padding: 2px 4px; border-radius: 3px; color: #2e5f52; background: #edf6f2; font-family: Consolas, monospace; font-size: 10px; }
.mail-console { min-width: 0; padding: 18px; border: 1px solid #d9dfe2; border-radius: 7px; background: #f7f8f9; box-shadow: 0 16px 44px rgba(37,48,58,.08); }.mail-console-top { min-height: 47px; padding-bottom: 12px; display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid #e1e5e7; }.mail-console-top div { display: grid; gap: 4px; min-width: 0; }.mail-console-top small, .mail-import-row small { color: #879099; font-size: 8px; }.mail-console-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.mail-console-top > span { flex-shrink: 0; padding: 4px 7px; border-radius: 3px; color: #126a53; background: #dff5eb; font-size: 8px; font-weight: 700; }
.mail-import-row { margin-top: 13px; padding: 9px 10px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; border: 1px dashed #cbd6d2; border-radius: 5px; background: #fff; }.mail-import-row > div { min-width: 0; display: grid; gap: 4px; }.mail-import-row code { overflow: hidden; color: #5f6a72; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-size: 8px; }.mail-import-row button, .mail-selector-row select, .mail-folder-row button, .mail-actions button, .mail-code-card button, .mail-console-footer button { min-height: 30px; padding: 0 9px; border: 1px solid #d1d8dc; border-radius: 4px; color: #4e5961; background: #fff; cursor: pointer; font-size: 9px; font-weight: 650; }.mail-import-row button:hover, .mail-folder-row button:hover, .mail-actions button:hover, .mail-code-card button:hover, .mail-console-footer button:hover { border-color: #7eb9a7; }.mail-selector-row { margin-top: 13px; display: grid; gap: 5px; }.mail-selector-row label, .mail-folder-row > span { color: #7b858d; font-size: 9px; }.mail-selector-row select { width: 100%; text-align: left; }.mail-folder-row { margin-top: 11px; display: flex; justify-content: space-between; align-items: center; }.mail-folder-row > div { display: flex; gap: 4px; }.mail-folder-row button { min-height: 27px; padding: 0 10px; }.mail-folder-row button.is-active { color: #126a53; border-color: #83c6b0; background: #e4f7ef; }.mail-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.mail-actions button.is-primary { color: #fff; border-color: #167f62; background: #167f62; }.mail-actions button:disabled { opacity: .65; cursor: progress; }
.mail-code-card { margin-top: 12px; padding: 13px; text-align: center; border: 1px solid #d6e8e1; border-radius: 5px; background: #effaf6; }.mail-code-card small { display: block; color: #789189; font-size: 8px; }.mail-code-card strong { display: block; margin-top: 5px; color: #0d6e53; font-family: Consolas, monospace; font-size: 24px; letter-spacing: .12em; }.mail-code-card span { display: block; margin-top: 4px; color: #74847d; font-size: 8px; }.mail-code-card button { margin-top: 9px; min-height: 27px; color: #146a54; border-color: #b7dbcd; }
.mail-console-footer { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 9px; }.mail-console-footer span { min-width: 0; overflow: hidden; color: #7c868e; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-size: 8px; }.mail-console-footer button { min-height: 27px; flex-shrink: 0; color: #8a5a1b; border-color: #e6d5bd; background: #fffaf2; }

.workflow-section { padding: 120px 28px; color: #fff; background: #10151a; }
.workflow-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.25fr; gap: 82px; align-items: center; }
.section-kicker.light { color: #8fc1ff; }
.workflow-copy h2 { margin: 0; font-size: 68px; line-height: 1.08; font-weight: 640; }
.workflow-copy > p:not(.section-kicker) { max-width: 500px; margin: 25px 0 0; color: #9fa7b0; line-height: 1.85; }
.behavior-list { margin-top: 38px; border-top: 1px solid #30363c; }
.behavior-list button { width: 100%; min-height: 74px; padding: 0 10px; display: grid; grid-template-columns: 34px 1fr; align-content: center; gap: 4px 8px; border: 0; border-bottom: 1px solid #30363c; color: #8b939c; background: transparent; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.behavior-list button span { grid-row: 1 / 3; align-self: center; font-size: 10px; }.behavior-list button b { font-size: 14px; }.behavior-list button small { font-size: 10px; }.behavior-list button.is-active { color: #fff; background: #182029; }
.behavior-stage { min-width: 0; }
.behavior-monitor { position: relative; aspect-ratio: 1.38; overflow: hidden; border: 1px solid #353d45; border-radius: 8px; background: #0d1217; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.monitor-wall { position:absolute;inset:18px;background:linear-gradient(90deg,rgba(5,11,16,.26),transparent),url("assets/product/desktop-wallpaper.png") center/cover; border-radius:4px; }
.monitor-wall::after { content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:rgba(18,23,30,.78);backdrop-filter:blur(8px)}
.edge-orb {
  position: absolute;
  right: -130px;
  top: 42%;
  width: 176px;
  height: 76px;
  transition: right .55s cubic-bezier(.2, .8, .2, 1), transform .45s ease;
}
.edge-orb-tail {
  position: absolute;
  left: 34px;
  top: 12px;
  z-index: 1;
  width: 124px;
  height: 52px;
  box-sizing: border-box;
  padding: 6px 16px 6px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: 0 26px 26px 0;
  background: rgba(31, 41, 55, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 34%);
  pointer-events: none;
}
.edge-orb-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.edge-orb-row i {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  flex-shrink: 0;
}
.edge-orb-row.up { color: #50e3c2; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.edge-orb-row.up i { border-bottom: 5px solid #50e3c2; }
.edge-orb-row.down { color: #7dd3fc; }
.edge-orb-row.down i { border-top: 5px solid #7dd3fc; }
.edge-orb-disc {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(155deg, #3a3f4a 0%, #2a2d34 48%, #22252c 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28);
}
.edge-orb-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.edge-orb-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.edge-orb-face strong {
  display: inline-flex;
  align-items: baseline;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.edge-orb-face em {
  font-style: normal;
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.edge-orb-face .orb-quota-badge { min-width: 46px; }
.cursor-hand {
  position: absolute;
  right: 118px;
  top: 59%;
  font-size: 28px;
  color: #fff;
  filter: drop-shadow(0 2px 3px #000);
  transform: rotate(-35deg);
  opacity: 0;
  transition: opacity .3s, transform .45s;
}
.release-result {
  position: absolute;
  right: 118px;
  top: 31%;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(11, 18, 26, 0.82);
  font-size: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s;
}
.release-result.is-visible { opacity: 1; transform: translateY(0); }
.behavior-stage[data-state="peek"] .edge-orb,
.behavior-stage[data-state="release"] .edge-orb {
  right: 22px;
}
.behavior-stage[data-state="peek"] .edge-orb-tail,
.behavior-stage[data-state="release"] .edge-orb-tail {
  opacity: 1;
  transform: none;
}
.behavior-stage[data-state="peek"] .cursor-hand,
.behavior-stage[data-state="release"] .cursor-hand {
  opacity: 1;
  transform: rotate(-35deg) translate(-8px, -10px);
}
.behavior-stage[data-state="release"] .edge-orb {
  transform: scale(.96);
  animation: release-pop .7s ease;
}
.behavior-stage[data-state="release"] .edge-orb-disc::after {
  content: "";
  position: absolute;
  left: 30px;
  top: -40px;
  width: 16px;
  height: 42px;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(#e9f7ff, #ff9e36 55%, transparent);
  animation: rocket 1s ease forwards;
}
@keyframes release-pop { 50% { transform:scale(1.12); } }
.behavior-stage > p { margin:16px 0 0;color:#8f98a1;font-size:12px;text-align:center}

.detail-section { padding-top: 130px; padding-bottom: 140px; }
.detail-grid { margin-top: 68px; display: grid; gap: 92px; }
.detail-item { display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: center; }
.detail-item:nth-child(even) { grid-template-columns: .65fr 1.35fr; }.detail-item:nth-child(even) .detail-visual { order: 2; }
.detail-item h3 { margin: 13px 0 14px; font-size: 29px; line-height: 1.25; }.detail-item p { margin:0;color:var(--muted);line-height:1.8;font-size:14px}.detail-no { color:var(--blue);font-size:10px;font-weight:800}
.detail-visual { position:relative;aspect-ratio:1.65;border-radius:7px;overflow:hidden;background:#eef1f3; }
.capture-visual img { display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%; }
.crop-frame,.toolbar-crop { display:none; }
.timer-visual { display:grid;place-items:center;background:#151b21;color:#fff}.timer-dial { position:relative;width:190px;height:190px;display:grid;place-items:center;align-content:center;border:1px solid #3c4650;border-radius:50%;box-shadow:inset 0 0 0 12px #1e252c}.timer-dial::before { content:"";position:absolute;inset:11px;border:6px solid #28333d;border-top-color:#45bca1;border-right-color:#45bca1;border-radius:50%;transform:rotate(28deg)}.timer-dial span { font-size:34px;font-variant-numeric:tabular-nums}.timer-dial small { margin-top:6px;color:#7f8b96}.timer-dial i { position:absolute;top:-5px;width:10px;height:10px;border-radius:50%;background:#45bca1;box-shadow:0 0 12px #45bca1}.lap-row { position:absolute;right:8%;bottom:10%;display:grid;gap:4px;padding:10px 12px;border-left:2px solid #45bca1;background:#222a31;font-size:9px}.lap-row span{color:#8f9ba6}
.settings-visual { padding:8% 10%;display:grid;align-content:center;gap:10px;background:#f2f3f4}.settings-visual > div { min-height:52px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border:1px solid #e0e3e6;border-radius:5px;background:#fff;font-size:12px}.toggle { width:34px;height:19px;padding:3px;border-radius:10px;background:#c8cdd2}.toggle::after { content:"";display:block;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}.toggle.on { background:var(--blue)}.toggle.on::after { transform:translateX(15px)}.slider { position:relative;width:90px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 0 70%,#dce0e4 70%)}.slider b { position:absolute;left:calc(70% - 6px);top:-4px;width:12px;height:12px;border:2px solid var(--blue);border-radius:50%;background:#fff}

.download-section { position:relative;min-height:680px;display:grid;place-items:center;overflow:hidden;color:#fff;text-align:center;isolation:isolate}.download-backdrop { position:absolute;z-index:-2;inset:0;background:url("assets/product/desktop-wallpaper.png") center/cover}.download-section::after { content:"";position:absolute;z-index:-1;inset:0;background:rgba(6,13,19,.65)}.download-copy > img { width:68px;height:68px;margin:0 auto 22px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.32)}.download-copy > p { margin:0 0 16px;color:#bddaff;font-size:11px;font-weight:800}.download-copy h2 { margin:0;font-size:72px;line-height:1.08;font-weight:650}.download-large { min-height:52px;margin:30px auto 0;padding:0 22px;width:max-content;display:flex;align-items:center;gap:10px;border-radius:6px;color:#11161b;background:#fff;font-weight:650}.download-large img { width:18px;height:18px}.download-large b { font-weight:650}.download-copy small { display:block;margin-top:14px;color:rgba(255,255,255,.62)}

footer { min-height:180px;padding:42px max(28px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:1fr auto;align-items:start;background:#0c1014;color:#fff}.footer-brand { grid-column:1;font-size:17px}.footer-brand img { width:28px;height:28px}.footer-brand + p { grid-column:1;margin:18px 0 0;color:#777f87;font-size:12px}footer > div { grid-column:2;grid-row:1/3;display:grid;gap:7px;justify-items:end;color:#777f87;font-size:10px}

.reveal-item { opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal-item.is-visible { opacity:1;transform:none}.detail-item:nth-child(2){transition-delay:.08s}.detail-item:nth-child(3){transition-delay:.12s}

@media (max-width: 1050px) {
  .desktop-nav { gap:20px}.hero-copy{width:56vw}.orb-demo{right:3vw}.quick-panel{right:calc(3vw + 90px)}
  .hero h1 { font-size: 72px; }
  .product-intro > h2, .detail-section > h2 { font-size: 56px; }
  .workflow-copy h2, .download-copy h2 { font-size: 54px; }
  .product-stage{grid-template-columns:1fr;gap:30px}.stage-copy{min-height:250px}.stage-screen{max-width:850px;width:100%;margin:0 auto}.feature-copy{max-width:680px}
  .workflow-inner{gap:48px}.detail-item,.detail-item:nth-child(even){grid-template-columns:1.15fr .85fr;gap:38px}
  .codex-heading, .mail-heading { grid-template-columns: 1fr; gap: 24px; }.codex-heading h2, .mail-heading h2 { font-size: 54px; }.codex-heading > p, .mail-heading > p { max-width: 680px; }.codex-module-grid { gap: 28px; }.mail-layout { gap: 42px; }
}

@media (max-width: 760px) {
  :root { --header-h:62px; }
  .site-header{height:62px;padding:0 18px;grid-template-columns:1fr auto}.site-header.is-scrolled{height:58px}.desktop-nav,.header-download{display:none}.brand{font-size:18px}.brand img{width:30px;height:30px}
  .menu-button{display:grid;gap:6px;width:38px;height:38px;padding:10px;border:0;border-radius:4px;background:rgba(255,255,255,.1)}.site-header.is-scrolled .menu-button{background:#eef0f2}.menu-button i{display:block;width:18px;height:1px;background:currentColor;transition:.2s}.menu-button[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mobile-nav{position:fixed;z-index:90;inset:58px 0 auto;padding:14px 18px 20px;display:grid;background:rgba(255,255,255,.97);box-shadow:0 14px 30px rgba(0,0,0,.12);backdrop-filter:blur(18px);color:var(--ink)}.mobile-nav a{padding:14px 4px;border-bottom:1px solid #e5e7e9}.mobile-nav a:last-child{margin-top:10px;padding:13px;text-align:center;color:#fff;background:var(--ink);border:0;border-radius:5px}.menu-open{overflow:hidden}
  .hero{min-height:max(720px,calc(100svh - 28px))}.hero-wallpaper{background-position:62% center}.hero-shade{background:linear-gradient(180deg,rgba(5,11,16,.7) 0%,rgba(5,11,16,.28) 48%,rgba(5,11,16,.7) 100%)}.desktop-tools{display:none}
  .hero-copy{left:22px;right:22px;top:112px;width:auto;transform:none}.hero h1{font-size:54px}.hero-lead{margin-top:20px;font-size:15px;line-height:1.7}.hero-actions{margin-top:24px}.primary-button,.secondary-button{min-height:46px;padding:0 15px;font-size:13px}.release-line{font-size:10px}
  .orb-demo{right:24px;top:auto;bottom:92px;transform:none}.quick-panel{top:auto;left:18px;right:18px;bottom:190px;width:auto;transform:translateY(18px) scale(.97)}.quick-panel.is-open{transform:none}.hero-foot{left:22px;bottom:22px;font-size:9px;gap:8px}
  .product-intro,.detail-section{padding:84px 20px}.product-intro>h2,.detail-section>h2{font-size:40px}.section-lead{font-size:15px}.feature-tabs{margin-top:42px;grid-template-columns:1fr 1fr}.feature-tabs button:nth-child(3){border-left:0}.feature-tabs button{min-height:60px;font-size:12px}
  .module-note { text-align: left; line-height: 1.6; }
  .product-stage{margin-top:38px;min-height:0}.stage-copy{min-height:330px}.feature-copy h3{font-size:29px}.stage-screen{aspect-ratio:1.08}.screen-body{grid-template-columns:39px 1fr}.app-sidebar{padding:9px 4px}.app-sidebar span{width:27px;height:27px}.screen-view{padding:15px}.metric-card{padding:11px}.ring-chart{width:52px;height:52px}.system-bottom{grid-template-columns:1fr 1fr}.system-bottom button{grid-column:1/-1}.capture-toolbar-live{max-width:92%;overflow-x:auto}.capture-toolbar-live button{width:27px;min-width:27px}.capture-toolbar-live button:nth-child(5),.capture-toolbar-live button:nth-child(6){display:none}.recording-pill span{display:none}
  .workflow-section{padding:84px 20px}.workflow-inner{grid-template-columns:1fr}.workflow-copy h2{font-size:40px}.behavior-stage{max-width:650px;width:100%;margin:auto}
  .codex-section, .mail-section { padding: 84px 20px; }.codex-heading h2, .mail-heading h2 { font-size: 40px; }.codex-module-grid { margin-top: 44px; grid-template-columns: 1fr; gap: 64px; }.module-summary { min-height: 0; }.relay-console,.pool-console { min-height: 0; }.mail-layout { margin-top: 44px; grid-template-columns: 1fr; gap: 44px; }.mail-copy { max-width: 680px; }
  .detail-grid{gap:72px}.detail-item,.detail-item:nth-child(even){grid-template-columns:1fr;gap:26px}.detail-item:nth-child(even) .detail-visual{order:0}.detail-item h3{font-size:25px}.timer-dial{width:150px;height:150px}.detail-visual{aspect-ratio:1.42}
  .download-section{min-height:600px;padding:60px 20px}.download-copy h2{font-size:42px}
  footer{grid-template-columns:1fr;padding:38px 20px}footer>div{grid-column:1;grid-row:auto;margin-top:28px;justify-items:start}
}

@media (max-width: 430px) {
  .hero h1{font-size:47px}.hero-lead{font-size:14px}.hero-actions{align-items:stretch}.primary-button,.secondary-button{flex:1;padding:0 10px}.hero-foot i{width:10px}.orb-demo{right:18px}
  .product-intro>h2,.detail-section>h2,.workflow-copy h2,.download-copy h2,.mail-heading h2{font-size:36px}.stage-copy{min-height:370px}.stage-screen{aspect-ratio:.92}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:104px}.spark{width:60px}.fence-a{width:50%}.fence-b{left:57%;width:38%}.fence-c{width:40%}.layout-switch button{min-width:50px}.optimize-view{padding:14px}.optimize-list button{grid-template-columns:30px 1fr auto}.health-score{width:58px;height:58px}.screen-chrome b{display:none}.mail-console{padding:13px}.mail-import-row{grid-template-columns:1fr 1fr}.mail-import-row > div{grid-column:1/-1}.mail-import-row button{width:100%}.mail-console-footer{align-items: stretch; flex-direction: column}.mail-console-footer button{width:100%}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }.hero-wallpaper,.orb-demo.is-releasing .orb,.orb-demo.is-releasing .orb::after,.behavior-stage[data-state="release"] .edge-orb,.behavior-stage[data-state="release"] .edge-orb-disc::after,.capture-toolbar-live .record-button.is-recording,.recording-pill>i{animation:none!important}.reveal-item{opacity:1;transform:none;transition:none}
}