/* Native workbench component styles used by the website demonstrations. */
: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;}
:is(.project-inline-link, .workspace-text-link, .req-text-link, .docs-outline a){text-decoration-line: none; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-skip-ink: auto;}
:is(.project-inline-link, .workspace-text-link, .req-text-link, .docs-outline a):hover:not(:disabled):not([aria-disabled="true"]){color: var(--color-accent); text-decoration-line: underline;}
::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--primary{background: var(--color-primary); color: var(--color-on-primary);}
.ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]){background: var(--color-primary-hover);}
.ui-button--primary:active:not(:disabled):not([aria-disabled="true"]){opacity: .86;}
.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-hint{margin: 0; color: var(--color-subtle); font-size: 12px; line-height: 1.65;}
.ui-tabs{display: flex; align-items: center; gap: 20px; padding: 0; border-bottom: 1px solid var(--color-line);}
.ui-tabs > button{position: relative; min-height: 42px; border: 0; border-radius: 6px 6px 0 0; padding: 6px 3px 12px; color: var(--color-muted); background: transparent; font-size: 13px; white-space: nowrap;}
.ui-tabs > button:hover, .ui-tabs > button[aria-selected="true"]{color: var(--color-text);}
.ui-tabs > button::after{content: ''; position: absolute; bottom: -1px; left: 1px; right: 1px; height: 2px; border-radius: var(--radius-pill); background: transparent;}
.ui-tabs > button[aria-selected="true"]::after{background: var(--color-text);}
.ui-nav-item .ui-icon{color: var(--color-muted); width: 16px; height: 16px;}
@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-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;}
.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-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);}
.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;}
@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);}
@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);}}
@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; } }
.projects-page{position: relative; container: project-page / inline-size; max-width: 1120px; margin: 0 auto; padding: 28px clamp(24px, 3vw, 40px) 48px;}
.project-header{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px;}
.project-heading{min-width: 0; flex: 1;}
.project-heading h1{margin: 0; font-size: 23px; font-weight: 600; line-height: 1.4; letter-spacing: -.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.project-local-path{margin: 4px 0 0; color: var(--color-subtle); font: 11px/1.6 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 390px;}
.project-tabs{margin-bottom: 28px;}
@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; } }
@container project-page (max-width: 540px){
.project-header{align-items: flex-start; flex-wrap: wrap; gap: 18px;}
.project-tabs{gap: 18px;}}
.project-tabs{overflow-x: auto; scrollbar-width: none;}
.project-tabs::-webkit-scrollbar{display: none;}
.workspace-section-heading{display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px;}
.workspace-section-heading > div{min-width: 0;}
.workspace-section-heading h2{margin: 0; color: var(--color-text); font-size: 13px; font-weight: 550; line-height: 1.6;}
.workspace-section-heading .ui-hint{margin: 6px 0 0; max-width: 64ch; font-size: 12px; line-height: 1.75;}
.workspace-section-heading > button{flex: 0 0 auto; margin-top: -3px;}
@container project-page (max-width: 700px){
.workspace-section-heading{gap: 14px;}}
.composition-explorer{--map-edge: #9aa6ab; --map-dot: #dce2e4; display: grid; grid-template-columns: minmax(0, 1fr); height: clamp(440px, calc(100dvh - 288px), 680px); min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-surface);}
:root[data-theme="dark"] .composition-explorer{--map-edge: #555f61; --map-dot: #323738;}
.composition-explorer[data-inspector-open="true"]{grid-template-columns: minmax(0, 1fr) 310px;}
.composition-map-surface{min-width: 0; min-height: 0;}
.project-map{position: relative; display: grid; grid-template-rows: 50px minmax(0, 1fr) 44px; height: 100%; min-width: 0;}
.project-map-toolbar{display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--color-line);}
.project-map-search{display: flex; align-items: center; gap: 7px; width: 160px; min-width: 72px; color: var(--color-subtle);}
.project-map-search > .ui-icon{width: 14px; height: 14px; flex: 0 0 auto;}
.project-map-search > input{min-width: 0; width: 100%; border: 0; border-radius: 4px; outline: 0; background: transparent; color: var(--color-text); padding: 4px 2px; font: 12px/1.6 var(--font-ui);}
.project-map-search:focus-within{color: var(--color-accent);}
.project-map-search:focus-within > input{outline: 1px solid var(--color-focus); outline-offset: 2px;}
.project-map-search > input::placeholder{color: var(--color-subtle);}
.project-map-matches{flex: 0 0 auto; color: var(--color-subtle); font-size: 10px;}
.project-map-matches:empty{display: none;}
.project-map-tools{display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-left: auto; 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-focus{display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 7px; border: 0; border-radius: 7px; color: var(--color-muted); background: transparent; font-size: 11px; white-space: nowrap;}
.project-map-focus:hover:not(:disabled){background: var(--color-hover);}
.project-map-focus[aria-pressed="true"]{color: var(--color-accent); background: var(--color-accent-soft);}
.project-map-focus:disabled{opacity: .35;}
.project-map-viewport{position: relative; overflow: hidden; min-width: 0; min-height: 0; isolation: isolate; cursor: grab; touch-action: none; background-color: var(--color-group); background-image: radial-gradient(circle, var(--map-dot) .8px, transparent .9px); background-size: 22px 22px; outline-offset: -3px;}
.project-map-viewport[data-dragging="true"]{cursor: grabbing; user-select: none;}
.project-map-world{position: absolute; top: 0; left: 0; width: 1px; height: 1px; transform-origin: 0 0;}
.project-map-groups, .project-map-nodes{position: absolute; inset: 0;}
.project-map-lines{position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; z-index: 1;}
.project-map-edge{stroke: var(--map-edge); stroke-width: 1.4; opacity: .8; transition: opacity var(--duration-fast), stroke var(--duration-fast);}
.project-map-edge[data-active="true"]{stroke: var(--color-accent); stroke-width: 1.7; opacity: 1;}
.project-map-edge[data-dimmed="true"]{opacity: .17;}
.project-map-group{position: absolute; border: 1px dashed var(--color-field-focus); border-radius: 18px; background: color-mix(in srgb, var(--color-surface) 45%, transparent); transition: opacity var(--duration-fast);}
.project-map-group[data-selected="true"]{border-color: var(--color-accent);}
.project-map-group-header{position: absolute; z-index: 2; display: flex; align-items: center; padding: 7px 11px 0 14px;}
.project-map-group-title{flex: 1; min-width: 0; padding: 0; border: 0; color: var(--color-text); background: transparent; text-align: left; cursor: pointer; border-radius: 6px;}
.project-map-group-kind{display: block; margin: 4px 0 0 29px; color: var(--color-subtle); font-size: 10px;}
.project-map-node{position: absolute; z-index: 2; display: flex; border: 1px solid var(--color-field-line); border-radius: 13px; background: var(--color-surface); box-shadow: 0 2px 5px #00000004, 0 8px 20px #00000002; transition: border-color var(--duration-fast), opacity var(--duration-fast), box-shadow var(--duration-fast);}
:root[data-theme="dark"] .project-map-node{box-shadow: 0 3px 8px #00000016;}
.project-map-node:hover{border-color: var(--color-field-focus);}
.project-map-node[data-selected="true"]{border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent);}
.project-map-node[data-related="true"]:not([data-selected="true"]){border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-line));}
.project-map-node[data-dimmed="true"], .project-map-group-header[data-dimmed="true"], .project-map-group[data-dimmed="true"]{opacity: .45;}
.project-map-group-header[data-selected="true"]{color: var(--color-accent);}
.project-map-group-header[data-selected="true"] .project-map-node-title{color: var(--color-accent);}
.project-map-node-main{display: block; flex: 1; width: 100%; min-width: 0; padding: 13px 16px; border: 0; border-radius: 12px; color: var(--color-text); background: transparent; text-align: left; cursor: grab;}
.project-map-node-main:active, .project-map-group-title:active{cursor: grabbing;}
.project-map-node-main:focus-visible, .project-map-group-title:focus-visible{outline: 2px solid var(--color-focus); outline-offset: 3px;}
.project-map-node-title{display: flex; align-items: center; gap: 9px; min-width: 0;}
.project-map-node-title > strong{flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 550; line-height: 1.6;}
.project-map-node-mark{display: flex; color: var(--color-muted); flex: 0 0 auto;}
.project-map-node-mark > .ui-icon{width: 16px; height: 16px;}
.project-map-node[data-selected="true"] .project-map-node-mark{color: var(--color-accent);}
.project-map-reference{color: var(--color-subtle); font-size: 9px; font-weight: 400; flex: 0 0 auto;}
.project-map-node-kind{display: block; margin-top: 5px; padding-left: 25px; color: var(--color-subtle); font-size: 11px; line-height: 1.5;}
.project-map-node-path{display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-subtle); font: 10px/1.5 var(--font-mono);}
.project-map-node:has(> .project-map-group-toggle) .project-map-node-path{padding-right: 30px;}
.project-map-footer{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--color-line);}
.project-map-legend{display: flex; flex-wrap: wrap; gap: 16px; color: var(--color-subtle); font-size: 10px;}
.project-map-legend > span{display: inline-flex; align-items: center; gap: 7px;}
.project-map-dependency{position: relative; display: block; width: 20px; height: 1px; background: var(--map-edge);}
.project-map-dependency::after{content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--map-edge); border-right: 1px solid var(--map-edge); transform: rotate(45deg);}
.project-map-ownership{width: 13px; height: 10px; border: 1px dashed var(--color-field-focus); border-radius: 3px;}
.project-map-zoom{display: flex; align-items: center; gap: 1px; flex: 0 0 auto;}
.project-map-zoom > .ui-icon-button{width: 27px; height: 27px; color: var(--color-muted);}
.project-map-zoom .ui-icon{width: 14px; height: 14px;}
.project-map-percent{min-width: 43px; height: 27px; padding: 3px 5px; border: 0; border-radius: 5px; background: transparent; color: var(--color-muted); font: 10px var(--font-mono);}
.project-map-percent:hover{background: var(--color-hover);}
@container project-page (max-width: 850px){
.composition-explorer[data-inspector-open="true"]:not(.is-expanded){height: auto; grid-template-columns: minmax(0, 1fr);}
.composition-explorer[data-inspector-open="true"]:not(.is-expanded) .composition-map-surface{height: 400px;}}
@container project-page (max-width: 530px){
.project-map-focus > span{display: none;}
.project-map-matches{display: none;}
.project-map-legend{gap: 10px;}
.project-map-search{width: 135px;}}
@media (prefers-reduced-motion: reduce){
.project-map-edge, .project-map-group, .project-map-node{transition: none;}}
.requirements-page{container: requirements / inline-size; max-width: 1320px; margin: 0 auto; padding: 28px clamp(22px, 3vw, 40px) 48px;}
.requirements-page[data-layout="list"]{height: 100%; min-height: 0; display: flex; flex-direction: column; padding-bottom: 20px;}
.requirements-page[data-layout="list"] > .requirements-header{flex: 0 0 auto;}
#requirements-pool{display: flex; flex-direction: column; flex: 1; min-height: 0;}
.requirements-header{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px;}
.requirements-header h1{margin: 0; font-size: 23px; font-weight: 600; line-height: 1.4; letter-spacing: -.5px;}
.requirements-header p{margin: 5px 0 0; color: var(--color-subtle); font-size: 12px; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.requirements-header > div:first-child{min-width: 0; flex: 1;}
.req-muted{color: var(--color-subtle); font-size: 12px; line-height: 1.8;}
.req-text-link{display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: var(--color-muted); font-size: 12px; line-height: 1.7; text-align: left;}
.req-text-link > .ui-icon{width: 14px; height: 14px; flex: 0 0 auto;}
.req-layout{display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); border-top: 1px solid var(--color-line); align-items: stretch; min-height: 0; flex: 1; overflow: hidden;}
.req-list{padding: 18px 22px 24px 0; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.req-list-heading{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0 10px; color: var(--color-muted); font-size: 11px;}
.req-row{display: grid; gap: 7px; width: 100%; padding: 14px 12px; margin-bottom: 4px; border: 0; border-radius: 11px; text-align: left; color: var(--color-text); background: transparent;}
.req-row:hover{background: var(--color-group);}
.req-row[aria-pressed="true"]{background: var(--color-group); box-shadow: inset 2px 0 var(--color-accent);}
.req-row-title{display: flex; align-items: baseline; gap: 10px;}
.req-row-title > strong{font-size: 13px; font-weight: 500; line-height: 1.65; overflow-wrap: anywhere;}
.req-row-description{font-size: 11px; color: var(--color-subtle); line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.req-row-meta{display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-subtle); flex-wrap: wrap;}
.req-row-meta > span:first-child{display: inline-flex; align-items: center; gap: 5px;}
.req-row-meta .ui-icon{width: 12px; height: 12px;}
.req-row-meta > .req-badge{margin-left: auto;}
.req-badge{display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--color-group); color: var(--color-muted); font-size: 10px; font-weight: 450; line-height: 1.7; white-space: nowrap;}
.req-row .req-badge{background: var(--color-field);}
.req-badge[data-tone="success"]{background: var(--color-success-soft); color: var(--color-success);}
.req-badge[data-tone="warning"]{background: var(--color-warning-soft); color: var(--color-warning);}
.req-badge[data-tone="accent"]{background: var(--color-accent-soft); color: var(--color-accent);}
.req-detail{display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--color-line); min-height: 0; overflow: hidden;}
.req-detail-reading{flex: 1; min-height: 0; padding: 22px 8px 20px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.req-detail-top{display: flex; align-items: center; gap: 8px; margin-bottom: 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-detail-origin{display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 11px; color: var(--color-subtle);}
.req-detail-title{margin: 0 0 11px; font-size: 19px; font-weight: 550; line-height: 1.6; letter-spacing: -.3px; overflow-wrap: anywhere;}
.req-detail-status{display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;}
.req-detail-status > .req-muted{font-size: 11px;}
.req-section{margin: 0 0 22px; min-width: 0;}
.req-section > h3{display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: var(--color-subtle); font-size: 11px; font-weight: 500; line-height: 1.7;}
.req-section > p, .req-origin-record > p{margin: 0; font-size: 13px; line-height: 1.85; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere;}
.req-section > p.req-muted{color: var(--color-subtle);}
.req-acceptance{padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.85; color: var(--color-text);}
.req-acceptance li{padding-left: 3px; margin-bottom: 7px; overflow-wrap: anywhere;}
.req-acceptance{list-style: decimal;}
.req-acceptance li::marker{color: var(--color-subtle); font-size: 10px;}
.req-disclosure{margin: 18px 0; font-size: 12px;}
.req-disclosure > summary{list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--color-muted); cursor: pointer; font-size: 11px;}
.req-disclosure > summary::-webkit-details-marker{display: none;}
.req-disclosure > summary:hover{color: var(--color-text);}
.req-disclosure > summary:focus-visible{outline: 1px solid var(--color-focus); outline-offset: 2px; border-radius: 5px;}
.req-disclosure > summary > .ui-icon{width: 12px; height: 12px; margin-left: auto; flex: none; transition: transform var(--duration-fast);}
.req-disclosure > summary > span{min-width: 0; overflow-wrap: anywhere;}
.req-disclosure[open] > summary > .ui-icon{transform: rotate(90deg);}
.req-disclosure > :not(summary){margin-top: 10px;}
.req-disclosure .req-section{margin-bottom: 0;}
.req-disclosure .req-section > h3{display: none;}
.requirements-page .req-disclosure .req-section > h3{display: flex;}
.requirements-page .req-disclosure .req-section{margin-block: 12px;}
.requirements-page .req-disclosure > .req-section{margin: 0;}
.req-origin-record{padding: 10px 0; border-bottom: 1px solid var(--color-line);}
.req-origin-record > p{margin-top: 4px; font-size: 11px; color: var(--color-muted);}
.req-origin-record .req-disclosure{margin: 8px 0;}
.req-assessment{padding-top: 18px; border-top: 1px solid var(--color-line);}
.req-assessment > h3{display: flex; align-items: center; gap: 10px; color: var(--color-text);}
.req-assessment-conclusion{margin: 12px 0 8px !important; font-size: 13px !important; font-weight: 500;}
.req-assessment > .req-text-link{margin: 0 16px 6px 0;}
.req-task{margin-top: 24px;}
.req-task > .req-section{margin-bottom: 18px;}
.req-task > .req-disclosure{border-top: 1px solid var(--color-line); padding-top: 7px; margin: 18px 0 8px;}
.req-task .req-research-heading{align-items: baseline;}
.req-task-actions{display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 13px;}
.req-research-goal{font-size: 14px !important; max-width: 690px;}
.req-research-heading{display: flex; align-items: flex-start; gap: 16px;}
.req-research-heading h3{font-size: 14px; line-height: 1.8; font-weight: 500; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere;}
.req-research-heading > .req-badge{flex: none;}
.req-research-heading .req-badge{margin-top: 2px;}
.req-finding{padding: 18px 0 16px; border-bottom: 1px solid var(--color-line);}
.req-finding-heading{display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.req-finding-heading h3{margin: 0; font-size: 15px; font-weight: 500; line-height: 1.7; min-width: 0; overflow-wrap: anywhere;}
.req-finding-heading > .req-badge{flex: none;}
.req-finding > p{color: var(--color-muted); font-size: 13px; line-height: 1.85; margin: 9px 0 12px;}
.req-finding .req-disclosure{margin: 9px 0;}
.req-finding .req-section{margin-bottom: 12px;}
.req-finding .req-section > p{color: var(--color-muted); font-size: 12px;}
.req-source-intro{display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;}
.req-source-intro > div{min-width: 0; flex: 1;}
.req-source-intro h2{margin: 3px 0 6px; font-size: 14px; font-weight: 550; line-height: 1.6;}
.req-source-intro p{margin: 0; max-width: 60ch; color: var(--color-muted); font-size: 12px; line-height: 1.9;}
.req-source-intro > button{flex: 0 0 auto; margin-top: 2px;}
@container requirements (max-width: 720px){
.req-layout{grid-template-columns: minmax(0, 1fr);}
.req-list{padding-right: 0;}
.req-detail{display: none; border: 0;}
.req-detail-reading{padding-left: 0;}
.req-show-detail .req-detail{display: flex;}
.req-show-detail .req-list{display: none;}
.req-source-intro{flex-wrap: wrap;}
.req-source-intro > button{margin-left: 36px;}}
@container requirements (max-width: 560px){
.requirements-header{flex-wrap: wrap; gap: 14px;}
.req-finding-heading{flex-wrap: wrap; gap: 7px;}}
@media (max-width: 620px){
.requirements-header{align-items: flex-start; gap: 12px;}
.requirements-header h1{font-size: 21px;}
.req-finding-heading{flex-wrap: wrap; gap: 7px;}}
.execution-page{container: execution / inline-size; max-width: 1320px; margin: 0 auto; padding: 28px clamp(22px, 3vw, 40px) 20px; height: 100%; min-height: 0; display: flex; flex-direction: column;}
.execution-layout{display: grid; grid-template-columns: minmax(200px, .65fr) minmax(0, 1.65fr); align-items: stretch; border-top: 1px solid var(--color-line); flex: 1; min-height: 0; overflow: hidden;}
.exec-task-list{min-width: 0; min-height: 0; padding: 19px 22px 24px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.exec-list-count{padding: 0 10px 13px; color: var(--color-subtle); font-size: 11px;}
.exec-task{display: grid; justify-items: start; gap: 9px; width: 100%; text-align: left; padding: 16px 12px; margin-bottom: 6px; border: 0; border-radius: 12px; background: transparent; color: var(--color-text);}
.exec-task:hover, .exec-task[aria-pressed="true"]{background: var(--color-group);}
.exec-task[aria-pressed="true"]{box-shadow: inset 2px 0 var(--color-accent);}
.exec-task strong{font-size: 13px; line-height: 1.8; font-weight: 500; overflow-wrap: anywhere;}
.exec-task small{color: var(--color-subtle); font-size: 10px; line-height: 1.8;}
.exec-detail{min-width: 0; min-height: 0; border-left: 1px solid var(--color-line); padding: 23px 8px 32px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-field-line) transparent;}
.exec-detail-heading{display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 9px;}
.exec-detail-heading h2{flex: 1; margin: 0; min-width: 190px; font-size: 19px; font-weight: 550; line-height: 1.6; letter-spacing: -.3px; overflow-wrap: anywhere;}
.exec-detail-heading > .req-badge{margin-top: 5px;}
.exec-meta{display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; color: var(--color-subtle); font-size: 11px; line-height: 1.8;}
.exec-meta{margin-bottom: 23px;}
.exec-detail > .req-disclosure{margin-bottom: 24px;}
.exec-detail > .req-disclosure > div{padding: 8px 0 0;}
.exec-check{display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--color-line);}
.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-check > div{min-width: 0; flex: 1;}
.exec-check strong{display: block; font-size: 12px; font-weight: 450; line-height: 1.8;}
.exec-check small{display: block; color: var(--color-subtle); font-size: 10px; line-height: 1.9; margin-top: 5px;}
.exec-check > .req-badge{margin-top: 2px;}
.exec-detail > .exec-meta{margin-bottom: 14px;}
.exec-observation{min-width: 0; margin-bottom: 23px;}
.exec-console{background: var(--color-terminal); color: var(--color-terminal-text); border: 1px solid color-mix(in srgb, var(--color-terminal-muted) 23%, transparent); border-radius: var(--radius-popup); overflow: hidden; min-width: 0;}
.exec-console-header{min-height: 43px; padding: 7px 11px 7px 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #ffffff0c;}
.exec-console-identity{display: flex; align-items: center; gap: 9px; min-width: 0;}
.exec-console-identity > .ui-icon{width: 15px; height: 15px; color: var(--color-terminal-muted);}
.exec-console-identity strong{font-size: 11px; font-weight: 500; white-space: nowrap;}
.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);}
.exec-console-frame{position: relative; min-height: 0;}
.exec-console-output{height: clamp(290px, 42vh, 440px); min-height: 0; overflow: auto; padding: 21px 19px 20px 15px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff28 transparent; outline-offset: -3px;}
.exec-terminal-line{display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 6px; margin-bottom: 15px; color: var(--color-terminal-text);}
.exec-terminal-line:last-child{margin-bottom: 1px;}
.exec-terminal-line pre{margin: 0; min-width: 0; font: 11px/1.85 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;}
.exec-terminal-prefix{font: 13px/1.6 var(--font-mono); color: var(--color-terminal-muted); user-select: none;}
.exec-terminal-line[data-kind="brand"]{margin-bottom: 2px; font-weight: 550;}
.exec-terminal-line[data-kind="muted"]{color: var(--color-terminal-muted); margin-bottom: 8px;}
.exec-terminal-line[data-kind="user"]{margin-block: 21px;}
.exec-terminal-line[data-kind="user"] .exec-terminal-prefix{color: var(--color-terminal-success);}
.exec-terminal-line[data-kind="tool"]{margin-top: 18px; margin-bottom: 3px;}
.exec-terminal-line[data-kind="added"], .exec-terminal-line[data-kind="success"]{color: var(--color-terminal-success); margin-bottom: 6px;}
.exec-terminal-line[data-kind="removed"], .exec-terminal-line[data-kind="error"]{color: var(--color-terminal-error); margin-bottom: 6px;}
.exec-terminal-line[data-kind="question"], .exec-terminal-line[data-kind="warning"]{color: var(--color-terminal-warning);}
.exec-terminal-line mark{background: #6b581f; color: #fff3bd; border-radius: 2px;}
.exec-console-footer{display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 15px; border-top: 1px solid #ffffff0c; color: var(--color-terminal-muted); font: 10px/1.7 var(--font-mono);}
.exec-console-stage{display: flex; align-items: center; gap: 8px; min-width: 0;}
.exec-console-stage::before{content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;}
.exec-console-stage[data-live="true"]{color: var(--color-terminal-success);}
.exec-console-stage[data-waiting="true"]{color: var(--color-terminal-warning);}
@media (prefers-reduced-motion: no-preference){
:root:not([data-motion="reduced"]) .exec-console-stage[data-live="true"]::before{animation: exec-observe-pulse 2s ease-in-out infinite;}}
@keyframes exec-observe-pulse{ 50% { opacity: .35; } }
@container execution (max-width: 690px){
.execution-layout{grid-template-columns: minmax(0, 1fr);}
.exec-task-list{padding-right: 0;}
.exec-detail{display: none; border-left: 0; padding-left: 0;}
.exec-show-detail .exec-detail{display: block;}
.exec-show-detail .exec-task-list{display: none;}}
@container execution (max-width: 430px){
.exec-check{flex-wrap: wrap;}
.exec-check > .req-badge{margin-left: 24px;}}
.versions-page{container: versions / inline-size; max-width: 1320px; margin: 0 auto; padding: 28px clamp(22px, 3vw, 40px) 22px; min-height: 0; height: 100%; display: flex; flex-direction: column;}
.version-copy{color: var(--color-muted); font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0;}
.version-muted{color: var(--color-subtle); font-size: 11px; line-height: 1.8; margin: 4px 0; overflow-wrap: anywhere;}
.version-section{padding: 20px 0; border-top: 1px solid var(--color-line); min-width: 0;}
.version-section-heading{display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px;}
.version-section-heading h3{font-size: 12px; font-weight: 550; margin: 0;}
.version-section-heading > button{font-size: 11px;}
.versions-page .req-badge{flex: 0 0 auto; align-self: start; margin-top: 3px;}
.version-layout{display: grid; grid-template-columns: minmax(170px, .65fr) minmax(0, 2fr); gap: 24px; min-height: 0; flex: 1;}
.version-list{overflow: auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;}
.version-list-item{position: relative; display: block; color: var(--color-text); font: inherit; text-align: left; padding: 13px 14px; border: 0; border-radius: 11px; background: transparent; min-width: 0; cursor: pointer;}
.version-list-item:hover{background: var(--color-hover);}
.version-list-item[aria-pressed="true"]{background: var(--color-selected);}
.version-list-item strong{font-size: 12px; font-weight: 500; line-height: 1.8; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.version-list-item-meta{display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 6px 0;}
.version-list-item-meta code{color: var(--color-muted); font-size: 10px;}
.version-list-item > small{color: var(--color-subtle); font-size: 10px;}
.version-list-item .req-badge{font-size: 9px; padding: 1px 6px; margin-top: 0;}
.version-detail{min-width: 0; overflow: auto; border-left: 1px solid var(--color-line); padding: 2px 4px 35px 25px;}
.version-detail-heading{display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; min-width: 0;}
.version-detail-heading > div:first-child{min-width: 0; flex: 1;}
.version-detail-heading h2{font-size: 18px; line-height: 1.65; font-weight: 550; letter-spacing: -.3px; margin: 2px 0 0; overflow-wrap: anywhere;}
.version-description{color: var(--color-muted); font-size: 12px; line-height: 1.9; white-space: pre-wrap; margin: 8px 0 12px; overflow-wrap: anywhere;}
.version-content-row{display: flex; align-items: flex-start; gap: 11px; padding: 11px 0;}
.version-content-row > .ui-icon{width: 16px; height: 16px; margin-top: 5px; flex: 0 0 auto; color: var(--color-subtle);}
.version-content-row > div{min-width: 0; flex: 1;}
.version-content-row strong{font-size: 12px; font-weight: 500;}
.version-content-row .req-text-link{padding: 0; color: var(--color-text);}
.version-requirements{display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-top: 1px solid var(--color-line); padding-top: 12px; margin-top: 10px;}
.version-requirements button{font-size: 11px;}
.version-disclosure{border-top: 1px solid var(--color-line); margin: 8px 0; min-width: 0;}
.version-disclosure > summary{display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; font-size: 11px; color: var(--color-muted); cursor: pointer; padding: 13px 0;}
.version-disclosure > summary::-webkit-details-marker{display: none;}
.version-disclosure > summary .ui-icon{width: 12px; height: 12px; flex-shrink: 0;}
.version-disclosure[open] > summary .ui-icon{transform: rotate(90deg);}
.version-disclosure > div{padding-bottom: 12px;}
.version-disclosure h4{font-size: 11px; margin: 15px 0 3px; font-weight: 500;}
.versions-page :is(button,summary):focus-visible{outline: 1px solid var(--color-focus); outline-offset: 2px; border-radius: 7px;}
.versions-page .req-text-link{overflow-wrap: anywhere;}
@container versions (max-width: 720px){
.version-layout{display: block;}
.version-detail{display: none; border-left: 0; padding: 0 3px 28px 0; overflow: visible;}
.version-list{max-height: none;}
.version-detail-open .version-detail{display: block;}
.version-detail-open .version-list{display: none;}}
@container versions (max-width: 470px){
.version-detail-heading{flex-wrap: wrap;}
.version-detail-heading > div:first-child{flex-basis: 100%;}}
.version-detail > .req-text-link:not(.version-back){margin: 6px 14px 6px 0;}
.version-detail-heading h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}