/* Observatory visual direction: black instrument surfaces, clean signal colors. */
:root {
  color-scheme: dark;
  --taiyi-purple: #B83DFF;
  --taiyi-yellow: #FFD52A;
  --taiyi-red: #FF3F56;
  --taiyi-blue: #3E7BFF;
  --taiyi-blue-muted: #5775A8;
  --taiyi-ink: #F4F6FB;
  --taiyi-paper: #03050A;
  --taiyi-line: rgba(151, 174, 215, .18);
  --taiyi-surface: #0B1019;
  --taiyi-muted: #A4B0C4;
}

html { color-scheme: dark; }

body {
  position: relative;
  color: var(--taiyi-ink);
  background:
    radial-gradient(ellipse at 50% 3%, rgba(32, 47, 84, .25), transparent 42%),
    radial-gradient(ellipse at 88% 38%, rgba(37, 39, 91, .13), transparent 32%),
    radial-gradient(ellipse at 12% 70%, rgba(25, 52, 88, .12), transparent 30%),
    linear-gradient(180deg, #03050A 0%, #060913 48%, #03050A 100%);
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .37;
  background-image:
    radial-gradient(1px 1px at 8% 13%, rgba(240, 245, 255, .88) 0 45%, transparent 100%),
    radial-gradient(1px 1px at 27% 39%, rgba(183, 204, 255, .78) 0 45%, transparent 100%),
    radial-gradient(1px 1px at 68% 19%, rgba(255, 222, 147, .72) 0 45%, transparent 100%),
    radial-gradient(1px 1px at 84% 70%, rgba(221, 216, 255, .72) 0 45%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 82%, rgba(255, 255, 255, .7) 0 45%, transparent 100%);
  background-size: 337px 281px, 421px 389px, 509px 461px, 617px 577px, 733px 659px;
}

.particle-canvas {
  z-index: 0;
  opacity: .42;
  mix-blend-mode: screen;
}

/* Cursify-inspired dot grid: a quiet, translucent layer above the particle field. */
.interactive-dots-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
  mix-blend-mode: screen;
}

.topbar,
main,
footer { position: relative; z-index: 1; }

.topbar {
  background: rgba(4, 7, 13, .84);
  border-bottom-color: rgba(153, 174, 215, .14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}

.brand,
.brand small,
.nav-links,
.hero-manual-link { color: #E8ECF5; }
.brand small { color: #9AA8BF; }
.nav-links a:hover,
.hero-manual-link:hover { color: var(--taiyi-yellow); }
.brand-mark { box-shadow: 0 0 25px rgba(184, 61, 255, .24); }

.button {
  border-color: rgba(181, 197, 224, .24);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(27, 34, 49, .96), rgba(13, 18, 29, .96));
  color: #F6F7FB;
}
.button:hover { border-color: rgba(255, 213, 42, .6); background: #191D29; }
.button-primary,
.button-primary:hover {
  border-color: var(--taiyi-blue);
  background: linear-gradient(115deg, #3E7BFF, #6D5CFF);
  color: #fff;
  box-shadow: 0 8px 24px rgba(62, 123, 255, .24);
}
.button-primary:disabled,
.button-primary:disabled:hover {
  border-color: rgba(110, 131, 166, .24);
  background: #202838;
  color: #8E9BB0;
}

.hero { background: transparent; }
.original-hero {
  position: relative;
  min-height: clamp(380px, 48vw, 580px);
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(151, 174, 215, .12);
}
.original-hero::before {
  top: 50%;
  right: max(5%, calc((100vw - 1240px) / 2 + 20px));
  width: clamp(260px, 34vw, 430px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(175, 192, 231, .22);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -90deg, rgba(193, 207, 239, .45) 0deg .45deg, transparent .45deg 6deg),
    radial-gradient(circle, transparent 0 66%, rgba(172, 194, 239, .15) 66.2% 66.6%, transparent 67%),
    radial-gradient(circle, transparent 0 81%, rgba(171, 191, 229, .23) 81.2% 81.5%, transparent 82%);
  opacity: .45;
  transform: translateY(-50%);
  -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 72.5% 100%);
  mask: radial-gradient(circle, transparent 0 72%, #000 72.5% 100%);
}
.original-hero::after {
  display: none;
}
.original-hero .hero-copy-block { position: relative; z-index: 1; }
.original-hero h1 { color: #F6F7FB; }
.hero-brand-cn,
.original-hero .hero-brand-cn,
.demo-hero .title-accent { color: var(--taiyi-purple); text-shadow: 0 0 32px rgba(184, 61, 255, .22); }
.original-hero h1 em,
.demo-hero h1.hero-title { color: #F7F8FC; }
.original-hero h1 em {
  font-family: "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, serif;
  font-size: .94em;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}
.original-hero .hero-copy,
.demo-hero .hero-copy.hero-copy--lead { color: #CAD2E1; }
.eyebrow { color: var(--taiyi-yellow); }
.original-hero .eyebrow {
  color: #E8B77A;
}
.hero-meta { color: #A4B0C4; }
.meta-dot { background: var(--taiyi-blue); box-shadow: 0 0 9px rgba(62, 123, 255, .7); }
.demo-hero { padding-top: clamp(46px, 6vw, 74px); }

.task-composer > label { color: #F2F4F8; }
.task-input-shell {
  border-color: rgba(160, 181, 218, .27);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(15, 21, 33, .98), rgba(7, 10, 17, .98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.task-input-shell:focus-within {
  border-color: rgba(255, 213, 42, .7);
  box-shadow: 0 0 0 3px rgba(255, 213, 42, .08), 0 18px 44px rgba(0, 0, 0, .28);
}
.task-input-shell textarea { color: #F5F6FA; }
.task-input-shell textarea::placeholder { color: #7F8CA2; }
.task-submit,
.task-submit:hover {
  border: 1px solid rgba(142, 177, 255, .45);
  border-radius: 8px;
  background: linear-gradient(115deg, #3E7BFF, #735BFF);
  color: #fff;
  box-shadow: 0 8px 22px rgba(62, 123, 255, .25);
}
.example-chip {
  border-color: rgba(158, 178, 212, .22);
  border-radius: 5px;
  background: rgba(15, 21, 33, .82);
  color: #B5C0D2;
}
.example-chip:hover,
.example-chip[aria-pressed="true"] {
  border-color: rgba(184, 61, 255, .72);
  background: rgba(184, 61, 255, .12);
  color: #F2D7FF;
}

.workflow-demo,
.workflow-demo.is-revealed {
  --dial-progress: 0%;
  --dial-angle: 0deg;
  --dial-accent: var(--taiyi-purple);
  border: 1px solid rgba(150, 176, 224, .28);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(77, 88, 148, .2), transparent 42%),
    linear-gradient(145deg, rgba(16, 22, 34, .98), rgba(5, 8, 15, .99) 62%, rgba(9, 13, 22, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 -18px 48px rgba(0, 0, 0, .22);
}
.workflow-demo::after {
  display: block;
  top: -128px;
  right: -92px;
  width: 266px;
  height: 266px;
  border-color: rgba(184, 61, 255, .13);
  box-shadow: 0 0 0 9px rgba(255, 213, 42, .018), 0 0 0 24px rgba(62, 123, 255, .018);
}
.workflow-kicker { color: #98A8C0; }
.workflow-head-copy strong,
.workflow-task-copy strong,
.workflow-step-copy strong,
.workflow-result-head strong { color: #F4F6FB; }
.workflow-task-copy small,
.workflow-task-copy span,
.workflow-step-copy small,
.workflow-step-state,
.workflow-foot { color: #A5B1C4; }
.workflow-status {
  border-color: rgba(161, 181, 219, .24);
  background: rgba(6, 10, 18, .72);
  color: #D2DAE7;
}
.workflow-status[data-state="running"] { color: var(--taiyi-yellow); }
.workflow-status[data-state="complete"] { color: #F4F6FB; }
.workflow-status-dot { background: #7C879A; }
.workflow-status[data-state="running"] .workflow-status-dot {
  background: var(--taiyi-yellow);
  box-shadow: 0 0 12px rgba(255, 213, 42, .8);
}
.workflow-status[data-state="complete"] .workflow-status-dot { background: var(--taiyi-blue); }
.workflow-task-card {
  border-color: rgba(146, 170, 214, .21);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(8, 13, 22, .92), rgba(16, 22, 34, .75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.workflow-task-icon {
  border-color: rgba(62, 123, 255, .48);
  background: rgba(62, 123, 255, .13);
  color: #AFC8FF;
}
.workflow-local-badge,
.workflow-result-head span {
  background: rgba(184, 61, 255, .13);
  color: #E0B6FF;
}
.workflow-steps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(138px, 17vw, 164px);
  align-items: center;
  gap: 10px;
  min-height: 222px;
  margin: 15px 0 13px;
}
.workflow-steps { min-width: 0; }
.workflow-track { left: 20px; background: rgba(150, 174, 216, .23); }
.workflow-track span {
  background: linear-gradient(180deg, var(--taiyi-purple), var(--taiyi-yellow), var(--taiyi-red), var(--taiyi-blue));
  box-shadow: 0 0 10px rgba(62, 123, 255, .32);
}
.workflow-step {
  --step-color: var(--taiyi-purple);
  padding-right: 6px;
  border: 1px solid transparent;
}
.workflow-step:nth-child(2) { --step-color: var(--taiyi-yellow); }
.workflow-step:nth-child(3) { --step-color: var(--taiyi-red); }
.workflow-step:nth-child(4) { --step-color: var(--taiyi-blue); }
.workflow-step.is-active {
  border-color: color-mix(in srgb, var(--step-color) 34%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--step-color) 12%, transparent), transparent);
  transform: translateX(2px);
}
.workflow-node,
.workflow-step.is-active .workflow-node,
.workflow-step.is-done .workflow-node {
  border-color: transparent;
  background: transparent;
  color: var(--step-color);
  box-shadow: none;
}
.workflow-step.is-active .workflow-node {
  background: transparent;
  color: var(--step-color);
  box-shadow: none;
}
.workflow-step.is-done .workflow-node {
  background: transparent;
  color: var(--step-color);
  box-shadow: none;
}
.workflow-step.is-active .workflow-step-state,
.workflow-step.is-active .workflow-step-copy strong,
.workflow-step.is-done .workflow-step-state { color: var(--step-color); }

/* Four workflow positions become the markers on a watch-like instrument dial. */
.workflow-dial {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 158px);
  aspect-ratio: 1;
  border: 1px solid rgba(194, 207, 234, .36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .1), transparent 36%),
    radial-gradient(circle, #141C2A 0 35%, #080C14 36% 61%, #1B2534 62% 64%, #0A0F18 65% 100%);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -8px 20px rgba(0, 0, 0, .45),
    0 0 0 5px rgba(151, 174, 215, .045);
}
.workflow-dial::before,
.workflow-dial::after {
  position: absolute;
  z-index: 0;
  inset: 4px;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
.workflow-dial::before {
  background: repeating-conic-gradient(from -90deg, rgba(207, 218, 238, .64) 0deg .55deg, transparent .55deg 6deg);
  opacity: .68;
  -webkit-mask: radial-gradient(circle, transparent 0 82%, #000 83% 100%);
  mask: radial-gradient(circle, transparent 0 82%, #000 83% 100%);
}
.workflow-dial::after {
  inset: 1px;
  background: conic-gradient(from -90deg, var(--dial-accent) 0 var(--dial-progress), rgba(169, 185, 215, .2) var(--dial-progress) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 89%, #000 90% 100%);
  mask: radial-gradient(circle, transparent 0 89%, #000 90% 100%);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--dial-accent) 62%, transparent));
  transition: background .5s ease, filter .5s ease;
}
.workflow-dial-mark {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mark-color) 55%, #253148);
  border-radius: 50%;
  background: #0A101A;
  color: color-mix(in srgb, var(--mark-color) 86%, white);
  font-size: 8px;
  font-weight: 800;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.mark-01 { --mark-color: var(--taiyi-purple); top: 10px; left: 50%; transform: translateX(-50%); }
.mark-02 { --mark-color: var(--taiyi-yellow); top: 50%; right: 10px; transform: translateY(-50%); }
.mark-03 { --mark-color: var(--taiyi-red); bottom: 10px; left: 50%; transform: translateX(-50%); }
.mark-04 { --mark-color: var(--taiyi-blue); top: 50%; left: 10px; transform: translateY(-50%); }
.workflow-dial-hand {
  position: absolute;
  z-index: 3;
  bottom: 50%;
  left: calc(50% - 1px);
  width: 2px;
  height: 36%;
  border-radius: 99px;
  background: linear-gradient(180deg, #FFF7D9, var(--dial-accent) 38%, color-mix(in srgb, var(--dial-accent) 20%, transparent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--dial-accent) 55%, transparent);
  transform: rotate(var(--dial-angle));
  transform-origin: 50% 100%;
  transition: transform .65s cubic-bezier(.2, .85, .25, 1), background .3s ease, box-shadow .3s ease;
}
.workflow-dial-hub {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(245, 247, 252, .75);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #7E8AA0 46%, #202A39 72%);
  box-shadow: 0 0 0 4px rgba(4, 7, 13, .6), 0 0 12px color-mix(in srgb, var(--dial-accent) 38%, transparent);
  transform: translate(-50%, -50%);
  transition: box-shadow .4s ease;
}
.workflow-demo[data-active-step="1"] .mark-01,
.workflow-demo[data-active-step="2"] .mark-02,
.workflow-demo[data-active-step="3"] .mark-03,
.workflow-demo[data-active-step="4"] .mark-04 {
  background: var(--mark-color);
  color: #080A10;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mark-color) 14%, transparent), 0 0 18px color-mix(in srgb, var(--mark-color) 44%, transparent);
  transform: scale(1.08);
}

.workflow-result {
  border-color: rgba(148, 173, 219, .27);
  border-radius: 10px;
  background:
    linear-gradient(120deg, rgba(62, 123, 255, .09), rgba(184, 61, 255, .06) 60%, rgba(255, 213, 42, .035)),
    linear-gradient(145deg, #101722, #090E17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 10px 28px rgba(0, 0, 0, .18);
}
.workflow-result-head span { background: rgba(62, 123, 255, .14); color: #BBD0FF; }
.workflow-result-list li { color: #D7DFEB; }
.workflow-result-list li::before { background: var(--taiyi-yellow); box-shadow: 0 0 8px rgba(255, 213, 42, .5); }
.workflow-result-foot,
.workflow-result-detail,
.workflow-foot { border-color: rgba(151, 174, 215, .16); }
.workflow-result-foot,
.workflow-foot-note { color: #A4B0C4; }
.result-detail-toggle { color: #C5A0FF; }
.workflow-progress-meta strong { color: #F4F6FB; }
.workflow-progress-bar { background: rgba(151, 174, 215, .2); }
.workflow-progress-bar span { background: linear-gradient(90deg, var(--taiyi-purple), var(--taiyi-yellow), var(--taiyi-red), var(--taiyi-blue)); }
.workflow-foot-note i { background: var(--taiyi-blue); box-shadow: 0 0 9px rgba(62, 123, 255, .64); }
.workflow-result-detail { background: rgba(1, 3, 8, .42); color: #C0CAD9; }
.demo-disclaimer { color: #9DAABE; }
.demo-disclaimer strong { color: var(--taiyi-yellow); }

.section,
.product-showcase { background: transparent; border-top-color: rgba(151, 174, 215, .13); }
.section-head h2,
.gallery-intro h2 { color: #F5F7FB; }
.section-head p,
.gallery-kicker { color: #AAB5C7; }
.gallery-status { color: var(--taiyi-yellow); }
.platform-panel {
  border-color: rgba(148, 171, 211, .24);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 22, 33, .98), rgba(6, 9, 16, .98));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.platform-heading { color: #F1F3F8; }
.platform-heading span { color: #9CA9BD; }
.screen-tab {
  border-color: rgba(157, 177, 216, .21);
  border-radius: 6px;
  background: #101622;
  color: #BEC8D8;
}
.screen-tab:hover { border-color: var(--taiyi-purple); color: #F5DFFF; }
.screen-tab[aria-selected="true"],
.employee-ui-tab[aria-selected="true"] {
  border-color: var(--taiyi-purple);
  background: rgba(184, 61, 255, .14);
  color: #E6C4FF;
  box-shadow: 0 0 18px rgba(184, 61, 255, .12);
}

/* Product screens retain their content while adopting the same dark console surfaces. */
.mock-window,
.employee-ui-window {
  border-color: rgba(162, 180, 215, .34);
  background: #080D15;
  color: #E6EBF4;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .48), 0 0 40px rgba(62, 123, 255, .08);
}
.window-bar,
.employee-ui-chrome {
  border-bottom-color: rgba(152, 171, 207, .16);
  background: linear-gradient(180deg, #171E2A, #0E141F);
  color: #C9D1DE;
}
.window-title { color: #D5DCE8; }
.window-actions i,
.employee-ui-window-controls i { border-color: #39465A; background: #111925; }
.window-body { background: #090E16; }
.app-sidebar,
.employee-ui-sidebar {
  border-right-color: rgba(153, 173, 211, .16);
  background: #0E141F;
  color: #A6B2C4;
}
.app-logo,
.employee-ui-brand { color: #F0F3F8; }
.side-label,
.employee-ui-nav-label { color: #8290A7; }
.side-link,
.employee-ui-nav { color: #B0BAC9; }
.side-icon,
.employee-ui-nav-icon { color: #91A1B9; }
.side-link.active,
.employee-ui-nav.is-active { color: #DCC0FF; background: rgba(184, 61, 255, .16); }
.side-link-copy small { color: #9DAABD; }
.profile,
.employee-ui-account { border-top-color: rgba(153, 173, 211, .15); color: #A5B1C3; }
.screen-content,
.employee-ui-main { background: #080D15; color: #E8EDF5; }
.screen-heading h2,
.employee-ui-heading h3 { color: #F4F6FB; }
.screen-heading p,
.employee-ui-heading p { color: #A5B1C3; }
.screen-button,
.prompt-submit,
.employee-create-button,
.employee-send-button,
.mobile-compose b { background: var(--taiyi-blue); color: #fff; }
.prompt-box,
.task-row,
.quick-card,
.summary-card,
.employee-card,
.employee-config-form,
.employee-preview,
.employee-chat-card {
  border-color: rgba(151, 174, 215, .2);
  background: linear-gradient(145deg, #121A27, #0B111B);
  color: #DCE3EE;
}
.prompt-placeholder,
.prompt-footer,
.quick-card span,
.task-row small,
.summary-card span,
.summary-card small,
.employee-card p,
.employee-field-label,
.employee-preview-label,
.employee-preview p,
.employee-create-status,
.employee-chat-footer { color: #A7B2C3; }
.quick-title,
.list-title,
.quick-card b,
.task-row b,
.summary-card b,
.employee-card h3,
.employee-preview h4,
.employee-chat-head { color: #EFF2F7; }
.quick-title small,
.list-title small { color: #A0ACBF; }
.state { color: #C9D8FF; background: rgba(62, 123, 255, .17); }
.state.green { color: #D6C2FF; background: rgba(184, 61, 255, .14); }
.state.gold { color: #FFE49B; background: rgba(255, 213, 42, .13); }
.table-head { color: #9BA8BC; }
.employee-icon,
.employee-icon.mint,
.employee-icon.violet,
.employee-preview-avatar { color: var(--taiyi-blue); background: rgba(62, 123, 255, .17); }
.employee-icon.mint { color: var(--taiyi-yellow); background: rgba(255, 213, 42, .13); }
.employee-icon.violet { color: var(--taiyi-purple); background: rgba(184, 61, 255, .14); }
.employee-tag { color: #AAB5C6; }
.permission-note { color: #BBC5D5; background: #121A27; }
.permission-note b { color: var(--taiyi-yellow); }
.employee-ui-status { color: #DCC0FF; background: rgba(184, 61, 255, .15); }
.employee-ui-tabs { border-bottom-color: rgba(151, 174, 215, .18); }
.employee-ui-tab { color: #AAB5C6; }
.employee-config-form,
.employee-preview,
.employee-chat-card { background: #0D141F; }
.employee-name-input,
.employee-chat-compose { border-color: rgba(151, 174, 215, .24); background: #080D15; color: #E8EDF5; }
.employee-name-input:focus { border-color: var(--taiyi-yellow); box-shadow: 0 0 0 3px rgba(255, 213, 42, .1); }
.employee-scope-item { border-color: rgba(151, 174, 215, .18); background: #111925; }
.employee-scope-item small,
.employee-setting span { color: #9DAABD; }
.employee-scope-item b,
.employee-setting b,
.employee-chat-footer b { color: #E4E9F1; }
.employee-setting { background: #131B29; }
.employee-chat-head { border-bottom-color: rgba(151, 174, 215, .17); }
.employee-chat-bubble { color: #D4DCE8; background: #182232; }
.employee-chat-bubble.is-user { color: #E9DEFF; background: rgba(184, 61, 255, .17); }
.employee-chat-compose input { color: #D9E0EA; }

.mobile-device,
.mobile-task-device {
  border-color: #5A687A;
  background: #131C29;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}
.phone-screen { background: #0A1019; color: #EAF0F8; }
.mobile-task-screen { background: #F2F5FA; color: #26364C; }
.phone-status { color: #FFF; background: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }
.mobile-statusbar { color: #28374E; background: #FFF; }
.phone-brand { border-bottom-color: transparent; background: transparent; color: #FFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }
.mobile-appbar { border-bottom-color: #E8EDF3; background: #FFF; color: #344258; }
.phone-brand span:last-child { color: #FFF; }
.phone-intro small,
.mobile-app-title small,
.mobile-task-title small { color: #A4B0C3; }
.phone-intro small { color: #A4B0C3; }
.phone-intro strong { color: #F2F4F8; }
.mobile-app-title strong,
.mobile-task-title strong { color: #344760; }
.phone-state { border-color: rgba(255, 213, 42, .28); color: #FFE59D; background: rgba(255, 213, 42, .1); }
.mobile-task-state { border-color: #DBE8F9; color: #4779B8; background: #EEF5FF; }
.phone-state i,
.mobile-task-state i { background: #E4A848; }
.phone-summary { border-color: rgba(151, 174, 215, .2); background: #121B29; color: #DAE2ED; }
.phone-summary b { color: #DCE4EF; }
.phone-file { border-color: rgba(151, 174, 215, .2); background: #111925; color: #C1CBDA; }
.phone-file b { color: #B8CCFF; }
.phone-message-bubble,
.mobile-compose { border-color: #E4E9F0; background: #FFF; color: #43546B; }
.phone-message-meta b { color: #627187; }
.mobile-attachments span { color: #5477A6; }
.phone-reply { border-color: rgba(151, 174, 215, .2); background: #0E1622; color: #AEB9CA; }
.phone-nav { color: #AEB9CA; }
.phone-nav b { color: #7EA8FF; }
.phone-message-meta { color: #8290A2; }
.phone-message.user .phone-message-bubble { border-color: #4784E2; background: #4B84E3; color: #FFF; }
.phone-message-tags span { border-color: #E5EBF3; background: #F7F9FC; color: #64758B; }
.mobile-task-summary { border-bottom-color: #E8EDF3; background: linear-gradient(180deg, #FFF, #F8FAFF); }
.mobile-chat-list { background: linear-gradient(180deg, #F4F6FA, #EDF2F8); }
.mobile-attachments span { border-color: #E2EAF4; background: #F8FBFF; }
.mobile-compose { border-color: #E1E7EF; }
.mobile-home-indicator { background: #222B38; }

.cloud-visual svg { stroke: var(--taiyi-yellow); }
.cloud-visual strong { color: #F2F4F8; }
.cloud-visual small,
.cloud-note { color: #AAB6C8; }
.cloud-running { border-color: rgba(255, 213, 42, .3); background: rgba(255, 213, 42, .1); color: #FFE59D; }
.cloud-running i,
.cloud-note i { background: var(--taiyi-yellow); box-shadow: 0 0 9px rgba(255, 213, 42, .5); }
.cloud-step { border-color: rgba(151, 174, 215, .2); background: #101824; }
.cloud-step b,
.cloud-step.is-running b { color: #E9EDF5; }
.cloud-step.is-running { border-color: rgba(62, 123, 255, .56); background: rgba(62, 123, 255, .15); box-shadow: inset 0 0 16px rgba(62, 123, 255, .1); }
.cloud-arrow { color: var(--taiyi-yellow); }
.cloud-progress { background: rgba(151, 174, 215, .18); }
.cloud-progress span { background: linear-gradient(90deg, transparent, var(--taiyi-purple), var(--taiyi-yellow), transparent); }
.platform-panel.cloud-platform .cloud-visual svg { stroke: var(--taiyi-yellow); }
.platform-panel.cloud-platform .cloud-visual strong { color: #F2F4F8; }
.platform-panel.cloud-platform .cloud-visual small { color: #AAB6C8; }
.platform-panel.cloud-platform .cloud-running {
  border-color: rgba(255, 213, 42, .3);
  background: rgba(255, 213, 42, .1);
  color: #FFE59D;
}
.platform-panel.cloud-platform .cloud-running i,
.platform-panel.cloud-platform .cloud-note i { background: var(--taiyi-yellow); box-shadow: 0 0 9px rgba(255, 213, 42, .5); }
.platform-panel.cloud-platform .cloud-step { border-color: rgba(151, 174, 215, .2); background: #101824; }
.platform-panel.cloud-platform .cloud-step b,
.platform-panel.cloud-platform .cloud-step.is-running b { color: #E9EDF5; }
.platform-panel.cloud-platform .cloud-step.is-running {
  border-color: rgba(62, 123, 255, .56);
  background: rgba(62, 123, 255, .15);
  box-shadow: inset 0 0 16px rgba(62, 123, 255, .1);
}
.platform-panel.cloud-platform .cloud-arrow { color: var(--taiyi-yellow); text-shadow: none; }
.platform-panel.cloud-platform .cloud-progress { background: rgba(151, 174, 215, .18); }
.platform-panel.cloud-platform .cloud-progress span { background: linear-gradient(90deg, transparent, var(--taiyi-purple), var(--taiyi-yellow), transparent); }
.platform-panel.cloud-platform .cloud-note { color: #AAB6C8; }

.architecture-diagram { border-color: rgba(151, 174, 215, .22); background: #0A1019; }
.architecture-platform,
.architecture-systems,
.architecture-endpoint,
.architecture-steps span { border-color: rgba(151, 174, 215, .19); background: #111925; }
.architecture-platform h3,
.architecture-systems h3,
.architecture-orchestrator h3,
.architecture-endpoint h3 { color: #F1F4F8; }
.architecture-platform p,
.architecture-systems p,
.architecture-endpoint p { color: #AEB9C9; }
.architecture-endpoint[data-tone="blue"] { color: var(--taiyi-blue); background: rgba(62, 123, 255, .1); }
.architecture-endpoint[data-tone="green"] { color: var(--taiyi-yellow); background: rgba(255, 213, 42, .08); }
.architecture-endpoint[data-tone="violet"] { color: var(--taiyi-purple); background: rgba(184, 61, 255, .1); }
.architecture-connector { color: var(--taiyi-yellow); }
.architecture-orchestrator { border-color: rgba(184, 61, 255, .32); background: rgba(184, 61, 255, .09); }
.architecture-steps span { color: #E9EDF5; }
.advantage-item { border-top-color: rgba(151, 174, 215, .16); }
.advantage-item h3 { color: #F1F4F8; }
.advantage-item p { color: #B4BECE; }
.advantage-item[data-tone="green"] .advantage-icon { color: var(--taiyi-yellow); }
.advantage-item[data-tone="blue"] .advantage-icon { color: var(--taiyi-blue); }
.advantage-item[data-tone="violet"] .advantage-icon { color: var(--taiyi-purple); }
.cta-panel {
  border-color: rgba(151, 174, 215, .24);
  background: linear-gradient(115deg, rgba(184, 61, 255, .1), rgba(62, 123, 255, .1) 55%, rgba(255, 213, 42, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.cta-panel h2 { color: #F4F6FB; }
.cta-panel p,
footer { color: #AAB5C6; }
.footer-brand { color: #F2F4F8; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--taiyi-yellow);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .original-hero { min-height: 330px; }
  .original-hero::before { width: 190px; right: -75px; opacity: .35; }
  .workflow-steps-wrap { display: block; min-height: 0; }
  .workflow-dial { width: 138px; margin: 15px auto 2px; }
  .workflow-track { bottom: auto; height: 220px; }
  .workflow-demo,
  .workflow-demo.is-revealed { border-radius: 14px; }
  .workflow-task-card { align-items: flex-start; }
  .workflow-task-copy strong { white-space: normal; }
  .footer-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .workflow-head { align-items: flex-start; }
  .workflow-status { padding: 5px 7px; font-size: 8px; }
  .workflow-task-card { gap: 8px; }
  .workflow-local-badge { margin-top: 2px; }
  .workflow-step { grid-template-columns: 37px minmax(0, 1fr) auto; gap: 7px; }
  .workflow-node { width: 37px; height: 37px; }
  .workflow-track { left: 18px; }
  .workflow-step-copy strong { font-size: 10px; }
  .workflow-step-copy small,
  .workflow-step-state { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-dial-hand,
  .workflow-dial-mark,
  .workflow-dial::after { transition: none; }
}

/* A layered astrolabe dial: stepped hands, a slow orbit, and a small moon-phase window. */
.workflow-steps-wrap {
  grid-template-columns: minmax(0, 1fr) clamp(164px, 19vw, 190px);
  min-height: 238px;
}
.workflow-dial {
  --dial-orbit-angle: 0deg;
  width: min(100%, 184px);
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .14), transparent 35%),
    repeating-radial-gradient(circle, transparent 0 14px, rgba(201, 213, 234, .025) 14.5px 15px),
    radial-gradient(circle, #111A29 0 35%, #080C14 36% 61%, #202A3B 62% 64%, #090E17 65% 100%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -9px 22px rgba(0, 0, 0, .5),
    0 0 0 5px rgba(151, 174, 215, .05),
    0 0 0 7px rgba(255, 255, 255, .025);
}
.workflow-dial::before {
  inset: 5px;
  background:
    repeating-conic-gradient(from -90deg, rgba(218, 226, 241, .68) 0deg .48deg, transparent .48deg 6deg),
    conic-gradient(from -90deg, transparent 0deg 44deg, rgba(184, 61, 255, .35) 44.4deg 45deg, transparent 45.4deg 89deg, rgba(255, 213, 42, .35) 89.4deg 90deg, transparent 90.4deg 134deg, rgba(255, 63, 86, .35) 134.4deg 135deg, transparent 135.4deg 224deg, rgba(62, 123, 255, .35) 224.4deg 225deg, transparent 225.4deg 360deg);
  opacity: .72;
  -webkit-mask: radial-gradient(circle, transparent 0 80%, #000 81% 100%);
  mask: radial-gradient(circle, transparent 0 80%, #000 81% 100%);
}
.workflow-dial::after {
  z-index: 5;
  inset: 1px;
  background: conic-gradient(from -90deg, var(--dial-accent) 0 var(--dial-progress), rgba(169, 185, 215, .16) var(--dial-progress) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 91%, #000 92% 100%);
  mask: radial-gradient(circle, transparent 0 91%, #000 92% 100%);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dial-accent) 72%, transparent));
}
.workflow-dial-orbit {
  position: absolute;
  z-index: 1;
  inset: 28px 12px;
  border: 1px solid transparent;
  border-top-color: rgba(190, 198, 219, .42);
  border-bottom-color: rgba(62, 123, 255, .4);
  border-radius: 50%;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .04), 0 1px 0 rgba(0, 0, 0, .5);
  transform: rotate(-31deg);
  transform-origin: center;
  animation: dial-orbit-drift 72s linear infinite;
}
.workflow-dial-orbit::before,
.workflow-dial-orbit::after {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(235, 239, 250, .68);
  border-radius: 50%;
  background: #111A29;
  content: "";
}
.workflow-dial-orbit::before { top: 13%; left: 16%; box-shadow: 0 0 9px rgba(184, 61, 255, .42); }
.workflow-dial-orbit::after { right: 13%; bottom: 17%; width: 4px; height: 4px; background: var(--taiyi-yellow); box-shadow: 0 0 8px rgba(255, 213, 42, .62); }
.workflow-dial-rotor {
  position: absolute;
  z-index: 1;
  inset: 21px;
  border: 1px solid rgba(201, 213, 234, .18);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .018), 0 0 0 1px rgba(0, 0, 0, .3);
  transform: rotate(var(--dial-orbit-angle));
  transition: transform 1.08s cubic-bezier(.16, .9, .24, 1);
}
.workflow-dial-rotor::before {
  position: absolute;
  top: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: var(--dial-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dial-accent) 68%, transparent);
  content: "";
  transition: background .36s ease, box-shadow .36s ease;
}
.workflow-dial-moonphase {
  position: absolute;
  z-index: 2;
  top: 57%;
  left: 50%;
  width: 44px;
  height: 20px;
  overflow: hidden;
  border: 1px solid rgba(188, 202, 226, .4);
  border-radius: 12px;
  background: linear-gradient(180deg, #080C13, #121A27);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8), 0 2px 4px rgba(0, 0, 0, .4);
  transform: translateX(-50%);
}
.workflow-dial-moonphase::before,
.workflow-dial-moonphase::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  content: "";
}
.workflow-dial-moonphase::before {
  background: radial-gradient(circle at 34% 28%, #FFF9E8 0%, #D8D1BF 43%, #9297A2 78%, #5D6472 100%);
  box-shadow: 0 0 7px rgba(255, 234, 180, .2);
  transform: translate(-50%, -50%);
}
.workflow-dial-moonphase::after {
  left: 50%;
  background: linear-gradient(135deg, #101722, #090D15);
  box-shadow: -1px 0 3px rgba(0, 0, 0, .48);
  transform: translate(-50%, -50%);
  transition: transform .18s linear;
}
.workflow-demo.is-sweeping .workflow-dial-moonphase::after {
  animation: moon-phase-sweep var(--dial-sweep-duration, 4000ms) linear both;
}
.workflow-demo[data-flow-state="complete"] .workflow-dial-moonphase::after {
  transform: translate(calc(-50% - 14px), -50%);
}
.workflow-dial-hand {
  z-index: 3;
  left: calc(50% - 2px);
  width: 4px;
  height: 42%;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
  background: linear-gradient(90deg, #19212B 0 18%, #AEB9C8 22% 34%, #F7F8F6 38% 58%, var(--dial-accent) 62% 76%, #202833 82% 100%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--dial-accent) 38%, transparent), 0 0 1px #fff;
  transition: background .28s ease, box-shadow .28s ease;
  will-change: transform;
}
.workflow-dial-hub {
  z-index: 4;
  width: 19px;
  height: 19px;
  border: 2px solid #BBC4D1;
  background: radial-gradient(circle, #05070B 0 35%, #2B3542 39% 54%, #090D14 59% 100%);
  box-shadow: 0 0 0 4px rgba(4, 7, 13, .68), 0 0 12px color-mix(in srgb, var(--dial-accent) 38%, transparent), inset 0 1px 2px rgba(255, 255, 255, .26);
}
.workflow-dial-hub::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF, #8995A6 62%, #303947);
  box-shadow: 0 0 5px rgba(235, 241, 250, .42);
  content: "";
  transform: translate(-50%, -50%);
}
.workflow-dial-hand { transform: rotate(var(--dial-angle)); }
.workflow-demo.is-sweeping .workflow-dial-hand {
  animation: dial-second-sweep var(--dial-sweep-duration, 4000ms) linear both;
}
.workflow-demo[data-flow-state="idle"] .workflow-dial-hand,
.workflow-demo[data-flow-state="idle"] .workflow-dial-rotor,
.workflow-demo[data-flow-state="idle"] .workflow-dial-moonphase::after {
  transition-duration: .18s;
}
@keyframes dial-second-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes moon-phase-sweep {
  from { transform: translate(-50%, -50%); }
  to { transform: translate(calc(-50% - 14px), -50%); }
}
@keyframes dial-orbit-drift {
  to { transform: rotate(329deg); }
}
@media (max-width: 600px) {
  .workflow-steps-wrap { min-height: 0; }
  .workflow-dial { width: 164px; margin: 18px auto 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .interactive-dots-canvas { display: none; }
  .workflow-dial-orbit { animation: none; }
  .workflow-demo.is-sweeping .workflow-dial-hand { animation: none; }
  .workflow-dial-hand,
  .workflow-dial-mark,
  .workflow-dial-rotor,
  .workflow-dial-moonphase::after,
  .workflow-dial::after { transition: none !important; }
  .workflow-demo.is-sweeping .workflow-dial-moonphase::after { animation: none; }
}