:root{color-scheme: light;
  --color-shell: #f6f7f8;
  --color-sidebar: #f1f2f3;
  --color-surface: #ffffff;
  --color-group: #f8f9fa;
  --color-field: #eef0f2;
  --color-hover: #e8eaed;
  --color-selected: #e2e5e8;
  --color-segment-selected: #ffffff;
  --shadow-segment-selected: inset 0 0 0 1px #00000008, 0 1px 3px #00000012;
  --color-pressed: #d7dbdf;
  --color-text: #232628;
  --color-muted: #596168;
  --color-subtle: #60676d;
  --color-line: #e0e3e6;
  --color-field-line: #d5d9de;
  --color-field-focus: #989fa6;
  --color-primary: #232628;
  --color-on-primary: #ffffff;
  --color-primary-hover: #3d4246;
  --color-accent: #008c77;
  --color-accent-bright: #00ccac;
  --color-accent-soft: #e2f4ee;
  --color-focus: #008c77;
  --color-danger: #bd3939;
  --color-danger-soft: #fbe9e9;
  --color-warning: #8f620e;
  --color-warning-soft: #f9efd9;
  --color-success: #167764;
  --color-success-soft: #e4f2ed;
  --color-popup: #ffffff;
  --shadow-popup: 0 10px 36px #16202818, 0 2px 8px #1620280a;
  --color-terminal: #202224;
  --color-terminal-text: #d9dcdf;
  --color-terminal-muted: #a2a8ad;
  --color-terminal-success: #6cceb2;
  --color-terminal-warning: #e8be66;
  --color-terminal-error: #f28b82;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size: 14px;
  --size-control: 32px;
  --size-control-small: 28px;
  --size-control-large: 36px;
  --size-field: 36px;
  --size-textarea-max: 160px;
  --size-textarea-body-min: 104px;
  --size-textarea-body-max: 320px;
  --space-form-field: 20px;
  --space-dialog-inline: 24px;
  --size-icon-button: 32px;
  --size-rail-button: 36px;
  --size-assistant-entry: 24px;
  --size-assistant-entry-icon: 14px;
  --size-row: 36px;
  --radius-control: 9px;
  --radius-field: 10px;
  --radius-nav: 10px;
  --radius-pane: 14px;
  --radius-group: 16px;
  --radius-popup: 12px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --rail-width: 52px;
  --sidebar-width: 272px;
  --titlebar-height: 44px;
  --duration-fast: 120ms;}
:root[data-theme="dark"]{color-scheme: dark;
  --color-shell: #28282a;
  --color-sidebar: #1e1e1e;
  --color-surface: #181818;
  --color-group: #232323;
  --color-field: #2b2b2b;
  --color-hover: #303030;
  --color-selected: #353535;
  --color-segment-selected: #454545;
  --shadow-segment-selected: inset 0 0 0 1px #ffffff12, 0 1px 3px #00000026;
  --color-pressed: #3d3d3d;
  --color-text: #efefef;
  --color-muted: #adaeb0;
  --color-subtle: #9d9ea1;
  --color-line: #343434;
  --color-field-line: #424242;
  --color-field-focus: #727476;
  --color-primary: #efefef;
  --color-on-primary: #202020;
  --color-primary-hover: #ffffff;
  --color-accent: #56d5ba;
  --color-accent-soft: #203a32;
  --color-focus: #56d5ba;
  --color-danger: #ff7777;
  --color-danger-soft: #402829;
  --color-warning: #e8be66;
  --color-warning-soft: #3a3121;
  --color-success: #70cdb0;
  --color-success-soft: #23362e;
  --color-popup: #2c2c2c;
  --shadow-popup: 0 12px 40px #00000040, 0 2px 8px #00000020;
  --color-terminal: #141414;}
:root[data-density="compact"]{--size-control: 28px;
  --size-control-small: 26px;
  --size-control-large: 32px;
  --size-field: 32px;
  --size-icon-button: 28px;
  --size-row: 32px;}
*, *::before, *::after{box-sizing: border-box;}
body{margin: 0; font: var(--font-size)/1.5 var(--font-ui); color: var(--color-text); background: var(--color-shell); font-synthesis: none; -webkit-font-smoothing: antialiased;}
button, input, textarea, select{font: inherit;}
button{color: inherit; cursor: pointer;}
button, a, input, textarea{-webkit-tap-highlight-color: transparent;}
button{touch-action: manipulation;}
a{color: var(--color-accent); text-underline-offset: 3px;}
button:disabled{cursor: default;}
[hidden]{display: none !important;}
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible{outline: 2px solid var(--color-focus); outline-offset: 3px;}
::selection{background: var(--color-accent-soft); color: var(--color-text);}
.ui-sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;}
.ui-icon{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: middle;}
.ui-icon--small{width: 15px; height: 15px;}
.ui-button{display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--size-control); border: 1px solid transparent; border-radius: var(--radius-control); padding: 4px 12px; background: var(--color-hover); color: var(--color-text); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none;}
.ui-button:hover:not(:disabled):not([aria-disabled="true"]){background: var(--color-selected);}
.ui-button:active:not(:disabled):not([aria-disabled="true"]){background: var(--color-pressed);}
.ui-button--ghost{background: transparent; color: var(--color-muted);}
.ui-button--small{min-height: var(--size-control-small); padding: 3px 10px; font-size: 12px;}
.ui-button:disabled, .ui-button[aria-disabled="true"]:not([aria-busy="true"]){background: var(--color-field); color: var(--color-subtle); opacity: .55; border-color: transparent; cursor: default;}
.ui-button[aria-busy="true"]{opacity: .75; cursor: progress;}
.ui-icon-button{display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-button); height: var(--size-icon-button); flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted);}
.ui-icon-button:hover:not(:disabled):not([aria-disabled="true"]), .ui-icon-button[aria-expanded="true"]{background: var(--color-hover); color: var(--color-text);}
.ui-icon-button:active:not(:disabled):not([aria-disabled="true"]){background: var(--color-pressed);}
.ui-icon-button[aria-pressed="true"]{background: var(--color-selected); color: var(--color-text);}
.ui-icon-button:disabled{opacity: .32;}
@keyframes ui-spin{ to { transform: rotate(360deg); } }
.ui-nav-item{width: 100%; min-height: var(--size-row); padding: 7px 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-nav); color: var(--color-text); background: transparent; text-align: left; font-size: 13px; line-height: 1.5;}
.ui-nav-item:hover{background: var(--color-hover);}
.ui-nav-item[aria-current="page"], .ui-nav-item[aria-pressed="true"]{background: var(--color-selected);}
.ui-nav-item > span:first-of-type{min-width: 0; flex: 1;}
.ui-nav-item .ui-icon{color: var(--color-muted); width: 16px; height: 16px;}
.ui-nav-meta{margin-left: auto; color: var(--color-subtle); font: 11px/1.4 var(--font-mono);}
@media (prefers-reduced-motion: no-preference){@keyframes ui-confirm-in{ from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }}
@media (prefers-reduced-motion: no-preference){
.ui-button, .ui-icon-button, .ui-nav-item{transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);}}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before{transition: none !important; scroll-behavior: auto !important;}
html, body{width: 100%; height: 100%; overflow: hidden;}
.icon-sprite{position: absolute; width: 0; height: 0; overflow: hidden;}
.desktop{height: 100dvh; display: flex; flex-direction: column;}
.titlebar{height: var(--titlebar-height); min-height: var(--titlebar-height); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; user-select: none;}
.mac-decoration{display: flex; align-items: center; gap: 8px; width: 68px; flex: 0 0 auto;}
.mac-decoration span{width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px #0000000d;}
.mac-decoration span:nth-child(2){background: #febc2e;}
.mac-decoration span:nth-child(3){background: #28c840;}
.sidebar-toggle{width: 28px; height: 28px;}
.titlebar-name{display: flex; align-items: center; gap: 12px; color: var(--color-text); font-size: 12px; font-weight: 550; letter-spacing: -.1px;}
.titlebar-spacer{display: flex; justify-content: center; flex: 1; min-width: 0;}
.workbench-principle{display: flex; align-items: center; gap: 3px; flex: 0 1 auto; width: 24px; height: 24px; max-width: 100%; overflow: hidden; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius: var(--radius-pill); background: var(--color-accent-soft); line-height: 18px;}
.workbench-principle:has(.workbench-principle-toggle[aria-expanded="true"]){width: max-content;}
.workbench-principle:has(button:focus-visible){outline: 2px solid var(--color-focus); outline-offset: 3px;}
.workbench-principle button:focus-visible{outline: 0;}
.workbench-principle-toggle{display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; text-align: left;}
.workbench-principle-toggle:hover{background: color-mix(in srgb, var(--color-accent) 7%, transparent);}
.workbench-principle-mark{display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-accent);}
.workbench-principle-mark .ui-icon{width: 14px; height: 14px;}
.workbench-principle strong{min-width: 0; overflow: hidden; color: var(--color-text); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap;}
.titlebar-name, .sidebar-toggle, .preview-toggle, .windows-decoration{flex-shrink: 0;}
.preview-toggle{width: 30px; height: 28px;}
.windows-decoration{display: none; align-items: center; gap: 26px; margin-left: 14px; padding: 0 10px 0 6px; color: var(--color-muted);}
.windows-decoration .ui-icon{width: 13px; height: 13px; stroke-width: 1.4;}
:root[data-platform="windows"] .mac-decoration{display: none;}
:root[data-platform="windows"] .windows-decoration{display: flex;}
:root[data-platform="windows"] .titlebar{padding-left: 12px;}
:root[data-platform="windows"] .titlebar-name{order: -1; margin: 0 7px 0 1px;}
.desktop-body{position: relative; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); flex: 1; min-height: 0;}
.activity-rail{display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 12px;}
.rail-brand{width: var(--size-rail-button); height: var(--size-rail-button); border-radius: 10px; flex: 0 0 auto;}
.rail-brand[aria-current="page"]{background: var(--color-selected); color: var(--color-text);}
.rail-brand{display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; margin-bottom: 4px;}
.rail-brand:hover{background: var(--color-hover);}
.rail-brand img{width: 23px; height: 23px;}
.rail-navigation{display: flex; flex-direction: column; align-items: center; gap: 8px;}
.rail-item{width: var(--size-rail-button); height: var(--size-rail-button); border-radius: var(--radius-nav);}
.rail-item > .ui-icon{width: 20px; height: 20px;}
.rail-item[aria-current="page"]{background: var(--color-selected); color: var(--color-text);}
.rail-item[aria-current="page"]:hover{background: var(--color-pressed);}
.rail-settings{margin-top: auto;}
.rail-settings{position: relative;}
.work-surface{position: relative; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; margin: 0 6px 6px 0; border: 1px solid var(--color-line); border-radius: var(--radius-pane); background: var(--color-surface);}
.secondary-sidebar{min-width: 0; min-height: 0; background: var(--color-sidebar); border-right: 1px solid var(--color-line);}
.sidebar-view{height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 17px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.sidebar-heading{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; margin: 0 0 19px;}
.sidebar-heading h1{margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: -.3px;}
.sidebar-nav{display: grid; gap: 3px;}
.main-pane{grid-column: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--color-surface);}
.main-scroll{flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.doc-icon-button{width: 24px; height: 24px; flex: 0 0 auto; color: var(--color-subtle);}
@media (min-width: 1000px){
:root[data-preview="open"]{--sidebar-width: clamp(200px, 18vw, 248px);}
:root[data-preview="open"][data-preview-mode="side"] .desktop-body{grid-template-columns: var(--rail-width) minmax(0, 1fr) clamp(400px, 38vw, 560px);}
:root[data-preview="open"][data-preview-mode="side"] .work-surface{margin-right: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;}}
:root[data-sidebar="collapsed"] .work-surface{grid-template-columns: 0 minmax(0, 1fr);}
:root[data-sidebar="collapsed"] .secondary-sidebar{position: absolute; z-index: 70; top: 5px; right: auto; bottom: 5px; left: 5px; width: var(--sidebar-width); visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-6px); border: 1px solid var(--color-field-line); border-radius: var(--radius-pane); background: var(--color-popup); box-shadow: var(--shadow-popup); transition: opacity 140ms ease, transform 160ms ease, visibility 0s 160ms;}
:root[data-sidebar="collapsed"][data-sidebar-peek="open"] .secondary-sidebar{visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition: opacity 140ms ease, transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s;}
@media (prefers-reduced-motion: reduce){
:root[data-sidebar="collapsed"] .secondary-sidebar{transition: none;}}
@media (max-width: 1160px){
:root{--sidebar-width: 248px;}}
@media (max-width: 780px){
:root{--sidebar-width: min(272px, calc(100vw - var(--rail-width) - 48px));}
.work-surface{grid-template-columns: 0 minmax(0, 1fr);}
.secondary-sidebar{position: absolute; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); box-shadow: var(--shadow-popup);}}
@media (max-width: 480px){
.workbench-principle strong{font-size: 11px;}
.titlebar{padding-left: 10px; gap: 5px;}
.mac-decoration{width: 57px; gap: 6px;}
.mac-decoration span{width: 10px; height: 10px;}
.titlebar-name{display: none;}
.windows-decoration{gap: 17px; margin-left: 0;}}
@keyframes activity-focus-ring{ from { box-shadow: 0 0 0 2px var(--color-accent); } to { box-shadow: 0 0 0 2px transparent; } }
@keyframes project-reference-locate{ from { background: var(--color-accent-soft); box-shadow: 0 0 0 10px var(--color-accent-soft); } to { background: transparent; box-shadow: 0 0 0 10px transparent; } }
.project-map-search > .ui-icon{width: 14px; height: 14px; flex: 0 0 auto;}
.project-map-tools > .ui-icon-button{width: 28px; height: 28px; color: var(--color-muted);}
.project-map-tools .ui-icon{width: 15px; height: 15px;}
.project-map-node-mark > .ui-icon{width: 16px; height: 16px;}
.project-map-zoom > .ui-icon-button{width: 27px; height: 27px; color: var(--color-muted);}
.project-map-zoom .ui-icon{width: 14px; height: 14px;}
.req-text-link > .ui-icon{width: 14px; height: 14px; flex: 0 0 auto;}
.req-row-meta .ui-icon{width: 12px; height: 12px;}
.req-detail-top > .ui-icon-button{width: 28px; height: 28px; color: var(--color-subtle);}
.req-detail-top .ui-icon{width: 14px; height: 14px;}
.req-disclosure > summary > .ui-icon{width: 12px; height: 12px; margin-left: auto; flex: none; transition: transform var(--duration-fast);}
.req-disclosure[open] > summary > .ui-icon{transform: rotate(90deg);}
.exec-check > .ui-icon{width: 14px; height: 14px; color: var(--color-accent); flex: 0 0 auto; margin-top: 3px;}
.exec-check[data-state="failed"] > .ui-icon{color: var(--color-warning);}
.exec-console-identity > .ui-icon{width: 15px; height: 15px; color: var(--color-terminal-muted);}
.exec-console .ui-icon-button{width: 27px; height: 27px; min-height: 27px; color: var(--color-terminal-muted); border-radius: 7px;}
.exec-console .ui-icon-button > .ui-icon{width: 14px; height: 14px;}
.exec-console .ui-icon-button:hover:not(:disabled){background: #ffffff0d; color: var(--color-terminal-text);}
.exec-console .ui-icon-button:focus-visible{outline-color: var(--color-terminal-success);}
@keyframes exec-observe-pulse{ 50% { opacity: .35; } }
.capacity-notice-toggle{position: relative; flex: 0 0 auto; margin-right: 6px; -webkit-app-region: no-drag;}
.capacity-notice-dot{position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 5px; right: 5px; background: var(--color-accent);}
.version-content-row > .ui-icon{width: 16px; height: 16px; margin-top: 5px; flex: 0 0 auto; color: var(--color-subtle);}
.version-disclosure > summary .ui-icon{width: 12px; height: 12px; flex-shrink: 0;}
.version-disclosure[open] > summary .ui-icon{transform: rotate(90deg);}
:root{--assistant-width: 460px;}
.assistant-toggle{position: relative; display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 9px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); font: 12px/1.5 var(--font-ui); flex: 0 0 auto;}
.assistant-toggle:hover{background: var(--color-hover); color: var(--color-text);}
.assistant-toggle[aria-expanded="true"]{background: var(--color-selected); color: var(--color-text);}
.assistant-toggle > .ui-icon{width: 15px; height: 15px;}
.assistant-toggle[data-unread="true"]::after{content: ''; position: absolute; top: 4px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent);}
:root[data-assistant-resizing]{cursor: col-resize; user-select: none;}
:root[data-assistant="open"][data-assistant-mode="workspace"] #main-scroll{display: none;}
@media (min-width: 1000px){
:root[data-assistant="open"][data-assistant-mode="side"]{--sidebar-width: clamp(200px, 18vw, 248px);}
:root[data-assistant="open"][data-assistant-mode="side"] .desktop-body{grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--assistant-width);}
:root[data-assistant="open"][data-assistant-mode="side"] .work-surface{margin-right: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;}}
@media (max-width: 600px){
.assistant-toggle{padding-inline: 6px;}
.assistant-toggle > span{display: none;}}
@media (prefers-reduced-motion: no-preference){@keyframes assistant-in{ from { opacity: .3; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }}
.home-page{container: home / inline-size; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 28px clamp(22px, 2.8vw, 40px) 48px;}
.home-header{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px;}
.home-heading{min-width: 0;}
.home-heading h1{margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 25px; line-height: 1.45; font-weight: 600; letter-spacing: -.6px;}
.home-heading p{margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-subtle); font-size: 11px; line-height: 1.7;}
.home-header-actions{display: flex; align-items: center; gap: 8px; flex: 0 0 auto;}
.home-header-actions > .ui-icon-button{width: 28px; height: 28px;}
.home-metrics{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 25px;}
.home-metric{min-width: 0; padding-left: 18px; border-left: 1px solid var(--color-line);}
.home-metric:first-child{padding-left: 0; border: 0;}
.home-metric-label{display: flex; align-items: center; gap: 7px; color: var(--color-subtle); font-size: 11px; line-height: 1.7;}
.home-metric-label .ui-icon{width: 13px; height: 13px;}
.home-metric-value{display: flex; align-items: baseline; gap: 8px; margin-top: 8px;}
.home-metric-value strong{font-size: 28px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -1px;}
.home-metric-value > span{color: var(--color-subtle); font-size: 10px; white-space: nowrap;}
.home-metric[data-active="true"] .home-metric-value strong{color: var(--color-accent);}
.home-sidebar-label{margin: 27px 11px 10px; font-size: 10px; color: var(--color-subtle);}
.home-project-scope{display: flex; align-items: center; gap: 10px; width: 100%; min-height: 51px; padding: 9px 11px; border: 0; border-radius: var(--radius-nav); background: transparent; color: var(--color-text); text-align: left;}
.home-project-scope:hover{background: var(--color-hover);}
.home-project-scope[aria-current="page"]{background: var(--color-selected);}
.home-project-dot{width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--color-field-focus);}
.home-project-dot[data-state="running"]{background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft);}
.home-project-dot[data-state="waiting"]{background: var(--color-warning);}
.home-project-scope-copy{display: grid; gap: 4px; min-width: 0; flex: 1;}
.home-project-scope-copy strong{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.6; font-weight: 450;}
.home-project-scope-copy small{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-subtle); font-size: 10px; line-height: 1.5;}
.home-project-auto{width: 12px; height: 12px; color: var(--color-accent);}
.home-flow-shell{position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-surface); box-shadow: 0 6px 24px #00000004;}
.home-flow-header{display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 17px 22px; border-bottom: 1px solid color-mix(in srgb, var(--color-line) 65%, transparent);}
.home-flow-heading{display: flex; align-items: center; gap: 12px; min-width: 0;}
.home-flow-mark{display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--color-accent) 17%, transparent); border-radius: 10px; color: var(--color-accent); background: var(--color-accent-soft);}
.home-flow-mark .ui-icon{width: 17px; height: 17px;}
.home-flow-heading h2{margin: 0; font-size: 13px; font-weight: 550; line-height: 1.65;}
.home-flow-heading p{margin: 2px 0 0; color: var(--color-subtle); font-size: 10px; line-height: 1.65;}
.home-flow-actions{display: flex; align-items: center; gap: 3px; flex: 0 0 auto;}
.home-flow-actions > .ui-icon-button{width: 26px; height: 26px;}
.home-live-status{display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; color: var(--color-subtle); font-size: 10px; line-height: 1.7; white-space: nowrap;}
.home-live-status::before{content: ''; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--color-field-focus);}
.home-live-status[data-running="true"]{color: var(--color-accent);}
.home-live-status[data-running="true"]::before{background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft);}
.home-flow-scroll{min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.home-flow-scroll:focus-visible{outline-offset: -4px; border-radius: 8px;}
.home-flow-map{position: relative; width: 100%; min-width: 960px; height: 412px; isolation: isolate; background-image: radial-gradient(ellipse at 48% 45%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 65%), radial-gradient(color-mix(in srgb, var(--color-line) 80%, transparent) .7px, transparent .7px); background-size: 100% 100%, 19px 19px;}
.home-flow-map::before{content: ''; position: absolute; inset: 25% 13% 12% 21%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 65%); filter: blur(30px); opacity: .6; pointer-events: none;}
.home-source-caption{position: absolute; left: 27px; top: 12px; font-size: 9px; letter-spacing: 1px; color: var(--color-subtle);}
.home-source-node{position: absolute; z-index: 2; left: 24px; top: calc(9% + var(--source-index) * 21%); display: flex; align-items: center; gap: 10px; width: 146px; height: 60px; padding: 10px 11px; border: 1px solid var(--color-line); border-radius: 11px; color: var(--color-muted); background: var(--color-surface); text-align: left;}
.home-source-mark{display: grid; place-items: center; width: 25px; height: 27px; flex: 0 0 auto; border-radius: 7px; background: var(--color-group);}
.home-source-mark .ui-icon{width: 15px; height: 15px;}
.home-source-copy{min-width: 0; display: grid; gap: 4px;}
.home-source-copy strong{font-size: 12px; font-weight: 500; color: var(--color-text); line-height: 1.4;}
.home-source-copy small{overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: var(--color-subtle); line-height: 1.4; white-space: nowrap;}
.home-source-node:hover, .home-source-node[aria-pressed="true"]{border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-line)); background: color-mix(in srgb, var(--color-accent-soft) 30%, var(--color-surface));}
.home-source-node[data-state="running"] .home-source-mark{color: var(--color-accent); background: var(--color-accent-soft);}
.home-source-node[data-state="running"]{border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-line)); box-shadow: 0 0 15px color-mix(in srgb, var(--color-accent) 9%, transparent);}
.home-feedback-caption{position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; left: calc(34% + 13px); top: 51%; padding: 3px 7px; border-radius: 5px; color: var(--color-subtle); background: color-mix(in srgb, var(--color-surface) 90%, transparent); font-size: 9px; line-height: 1.6; pointer-events: none;}
.home-feedback-caption .ui-icon{width: 11px; height: 11px;}
.home-connections{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;}
.home-edge{--edge-color: var(--color-field-focus);}
.home-edge-track{stroke: color-mix(in srgb, var(--edge-color) 40%, var(--color-line)); stroke-width: 1.2;}
.home-edge-light{stroke: var(--edge-color); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 99; opacity: .65;}
.home-edge-glow{stroke: var(--edge-color); stroke-width: 7px; stroke-dasharray: 9 91; opacity: 0; filter: blur(3px);}
.home-edge[data-state="running"]{--edge-color: var(--color-accent);}
.home-edge[data-state="running"] .home-edge-track{stroke: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));}
.home-edge[data-state="running"] .home-edge-light{stroke: var(--color-accent-bright); stroke-width: 2.4; stroke-dasharray: 12 88; opacity: 1; filter: drop-shadow(0 0 3px var(--color-accent));}
.home-edge[data-state="running"] .home-edge-glow{opacity: .36;}
.home-edge[data-state="waiting"]{--edge-color: var(--color-warning);}
.home-edge[data-state="waiting"] .home-edge-light{stroke-dasharray: 2 8; opacity: .3;}
.home-edge[data-feedback="true"] .home-edge-track{stroke-dasharray: 4 5;}
.home-flow-node{--node-color: var(--color-subtle); position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 190px; height: 132px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface); box-shadow: 0 4px 14px #00000004; color: var(--color-text); text-align: left; scroll-margin-inline: 25px;}
.home-flow-node[data-stage="discovery"], .home-flow-node[data-stage="feedback"]{left: calc(34% - 95px);}
.home-flow-node[data-stage="review"], .home-flow-node[data-stage="delivery"]{left: calc(60% - 95px);}
.home-flow-node[data-stage="execution"], .home-flow-node[data-stage="verification"]{left: calc(86% - 95px);}
.home-flow-node[data-stage="discovery"], .home-flow-node[data-stage="review"], .home-flow-node[data-stage="execution"]{top: 13%;}
.home-flow-node[data-stage="feedback"], .home-flow-node[data-stage="delivery"], .home-flow-node[data-stage="verification"]{top: 65%;}
.home-flow-node[data-state="running"]{--node-color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-line)); background: linear-gradient(125deg, color-mix(in srgb, var(--color-accent-soft) 42%, var(--color-surface)), var(--color-surface) 70%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 8px 30px color-mix(in srgb, var(--color-accent) 10%, transparent);}
.home-flow-node[data-state="waiting"], .home-flow-node[data-state="warning"]{--node-color: var(--color-warning);}
.home-flow-node[data-state="success"]{--node-color: var(--color-accent);}
.home-flow-node:hover{border-color: color-mix(in srgb, var(--node-color) 70%, var(--color-line)); background-color: var(--color-group);}
.home-flow-node[aria-pressed="true"]{border-color: var(--node-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color) 8%, transparent), 0 6px 20px #00000008;}
.home-node-top{display: flex; align-items: center; gap: 8px; height: 18px;}
.home-node-icon{color: var(--node-color); display: inline-flex;}
.home-node-icon .ui-icon{width: 15px; height: 15px;}
.home-node-index{color: var(--color-subtle); font: 9px/1.5 var(--font-mono); opacity: .7;}
.home-node-state{display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 9px; color: var(--node-color);}
.home-node-state::before{content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor;}
.home-node-name{display: block; margin-top: 4px; font-size: 13px; font-weight: 550; line-height: 1.6;}
.home-node-number{display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-top: 1px;}
.home-node-number b{font-size: 27px; line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.7px;}
.home-node-number > span{font-size: 10px; color: var(--color-muted);}
.home-node-detail{display: block; font-size: 10px; color: var(--color-subtle); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.home-flow-footer{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; min-height: 38px; padding: 8px 22px; border-top: 1px solid color-mix(in srgb, var(--color-line) 65%, transparent);}
.home-flow-legend{display: flex; align-items: center; gap: 18px;}
.home-flow-legend > span{display: inline-flex; align-items: center; gap: 6px; color: var(--color-subtle); font-size: 9px;}
.home-flow-legend > span::before{content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-field-focus);}
.home-flow-legend > [data-state="running"]::before{background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft);}
.home-flow-legend > [data-state="waiting"]::before{background: var(--color-warning);}
.home-runtime{display: inline-flex; align-items: center; gap: 7px; color: var(--color-subtle); font-size: 9px;}
.home-runtime > .ui-icon{width: 12px; height: 12px;}
.home-runtime > span:last-child{margin-left: 5px; padding-left: 10px; border-left: 1px solid var(--color-line);}
.home-stage-detail{display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 23px; padding: 19px 22px 21px; border-top: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-group) 65%, var(--color-surface));}
.home-stage-eyebrow{font-size: 9px; color: var(--color-subtle);}
.home-stage-copy h3{margin: 6px 0 5px; font-size: 12px; line-height: 1.6; font-weight: 550;}
.home-stage-copy p{margin: 0; font-size: 10px; line-height: 1.85; color: var(--color-subtle);}
.home-stage-items{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 15px; min-width: 0; padding-top: 6px;}
.home-stage-items > .home-record{min-height: 68px; padding: 9px 6px;}
.home-stage-items > .home-record .home-record-mark{display: none;}
.home-stage-items > .home-record .home-record-copy strong{white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.75;}
.home-stage-items > .home-record .home-record-copy small{margin-top: 5px;}
.home-stage-items > .home-text-button{grid-column: 1 / -1; justify-self: start;}
.home-lower-grid{display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 28px; margin-top: 29px;}
.home-panel{min-width: 0;}
.home-panel-heading{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;}
.home-panel-heading h2{margin: 0; color: var(--color-text); font-size: 12px; font-weight: 550; line-height: 1.7;}
.home-panel-heading > span{color: var(--color-subtle); font-size: 10px;}
.home-record{display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 59px; padding: 9px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text); text-align: left;}
.home-record:hover{background: var(--color-hover);}
.home-record-mark{display: flex; align-self: flex-start; color: var(--color-subtle); padding-top: 3px;}
.home-record-mark .ui-icon{width: 13px; height: 13px;}
.home-record[data-tone="running"] .home-record-mark{color: var(--color-accent);}
.home-record[data-tone="waiting"] .home-record-mark, .home-record[data-tone="warning"] .home-record-mark{color: var(--color-warning);}
.home-record-copy{min-width: 0; flex: 1;}
.home-record-copy strong{display: block; color: var(--color-text); font-size: 11px; line-height: 1.7; font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.home-record-copy small{display: block; margin-top: 3px; color: var(--color-subtle); font-size: 9px; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.home-record-arrow{width: 11px; height: 11px; color: var(--color-subtle); opacity: 0;}
.home-record:hover .home-record-arrow, .home-record:focus-visible .home-record-arrow{opacity: 1;}
.home-text-button{border: 0; padding: 5px 7px; margin-top: 5px; color: var(--color-muted); background: transparent; border-radius: 5px; text-align: left; font-size: 10px; line-height: 1.8;}
.home-text-button:hover{color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;}
.home-activity-chart{display: flex; align-items: flex-end; gap: 5px; height: 34px; margin: 4px 0 18px;}
.home-activity-chart > span{flex: 1; min-width: 2px; height: max(2px, var(--bar-height)); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--color-accent) 42%, var(--color-accent-soft));}
.home-activity-chart > span[data-empty="true"]{background: var(--color-line);}
.home-activity-row{position: relative; display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding-bottom: 15px;}
.home-activity-row:not(:last-child)::before{content: ''; position: absolute; left: 2px; top: 10px; bottom: 2px; width: 1px; background: var(--color-line);}
.home-activity-dot{width: 5px; height: 5px; border-radius: 50%; background: var(--color-field-focus); flex: 0 0 auto; margin-top: 6px;}
.home-activity-row > div{min-width: 0; flex: 1;}
.home-activity-row strong{display: block; font-size: 10px; font-weight: 450; line-height: 1.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.home-activity-row small{display: block; font-size: 9px; line-height: 1.8; color: var(--color-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.home-activity-row time{flex: 0 0 auto; padding-top: 2px; color: var(--color-subtle); font-size: 9px; line-height: 1.8;}
:root[data-theme="dark"] .home-flow-node{box-shadow: 0 5px 18px #00000018;}
:root[data-theme="dark"] .home-flow-node[data-state="running"]{box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 8px 30px #00000028, 0 0 30px color-mix(in srgb, var(--color-accent) 8%, transparent);}
@container home (max-width: 980px){
.home-lower-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;}
.home-lower-grid > .home-panel:last-child{grid-column: 1 / -1;}
.home-stage-detail{grid-template-columns: 190px minmax(0, 1fr); gap: 16px;}
.home-stage-items{grid-template-columns: repeat(2, minmax(0, 1fr));}
.home-stage-items > .home-record:nth-child(3){grid-column: 1 / -1;}
.home-live-status{max-width: 145px; overflow: hidden; text-overflow: ellipsis;}}
@container home (max-width: 700px){
.home-header{align-items: flex-start; gap: 10px; margin-bottom: 22px;}
.home-heading h1{font-size: 23px;}
.home-header-actions{gap: 3px;}
.home-header-actions > .ui-button{padding-inline: 5px; font-size: 11px;}
.home-metrics{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 20px;}
.home-metric:nth-child(3){border: 0; padding-left: 0;}
.home-flow-header{padding: 15px; gap: 12px; align-items: flex-start; flex-wrap: wrap;}
.home-flow-heading{flex: 1 1 190px;}
.home-flow-actions{flex: 1 1 auto; justify-content: flex-end;}
.home-flow-mark{display: none;}
.home-flow-heading p{max-width: 24ch;}
.home-live-status{max-width: none; margin-right: auto; white-space: normal;}
.home-stage-detail{grid-template-columns: minmax(0, 1fr); padding: 17px 15px; gap: 10px;}
.home-stage-copy p{max-width: 68ch;}
.home-stage-items{grid-template-columns: minmax(0, 1fr);}
.home-stage-items > .home-record{min-height: 53px;}
.home-stage-items > .home-record .home-record-mark{display: flex;}
.home-flow-footer{padding-inline: 15px;}
.home-flow-legend{gap: 13px;}
.home-lower-grid{grid-template-columns: minmax(0, 1fr);}}
@media (prefers-reduced-motion: no-preference){
.home-edge-light{animation: home-flow-travel 17s linear infinite; animation-delay: var(--edge-delay);}
.home-edge[data-state="running"] .home-edge-light, .home-edge[data-state="running"] .home-edge-glow{animation: home-flow-travel 3.2s linear infinite; animation-delay: var(--edge-delay);}
.home-edge[data-state="waiting"] .home-edge-light{animation: none;}
.home-flow-map[data-running="true"]::before{animation: home-ambient-breath 6s ease-in-out infinite;}
.home-flow-node[data-state="running"] .home-node-state::before, .home-live-status[data-running="true"]::before{animation: home-status-pulse 2.4s ease-in-out infinite;}
.home-flow-node, .home-source-node{transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;}
.home-flow-shell[data-motion="paused"] *, .home-flow-shell[data-motion="paused"] ::before, .home-flow-shell[data-motion="paused"] ::after{animation-play-state: paused !important;}
@keyframes home-flow-travel{ from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes home-ambient-breath{ 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes home-status-pulse{ 0%, 100% { opacity: 1; } 50% { opacity: .4; } }}
.desktop{height:840px}
body{width:1512px;height:840px;overflow:hidden}
.desktop [inert]{pointer-events:none}
*{caret-color:transparent!important}
.preview-paused .home-edge-light, .preview-paused .home-edge-glow{animation-play-state:paused!important}
