/* The desktop concept has its own native-app typography, palette and density. */
.desktop-demo {
  --app-bg: #fff;
  --app-text: #30343a;
  --app-muted: #656b73;
  --app-line: #e0e2e5;
  --app-selected: #eceef1;
  --app-accent: #a85a32;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--app-text);
  background: var(--app-bg);
  border: 1px solid #c9cbd0;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 25px 65px -35px #342c2555;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}
.desktop-demo button,
.desktop-demo select,
.desktop-demo a {
  font-family: inherit;
}
.desktop-demo p {
  color: var(--app-muted);
}
.desktop-demo h3,
.desktop-demo h4,
.desktop-demo h5 {
  letter-spacing: 0;
  font-family: inherit;
}
.desktop-demo .icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
}
.desktop-demo button:focus-visible,
.desktop-demo select:focus-visible,
.desktop-demo summary:focus-visible {
  outline-color: #955c3b;
  outline-offset: 2px;
}
.app-titlebar {
  height: 38px;
  background: #e9eaed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid #d2d4d8;
  position: relative;
  gap: 15px;
}
.window-controls {
  display: flex;
  gap: 7px;
  min-width: 112px;
}
.window-controls > i {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #b9bdc3;
  border: 1px solid #aeb3ba;
}
.window-controls > i:first-child {
  background: #cba18e;
  border-color: #ba8e7c;
}
.app-title {
  font-size: 13px;
  font-weight: 500;
  color: #41464e;
}
.app-title > span {
  font-weight: 400;
  color: #5c6068;
}
.app-preview-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: #53575e;
}
.app-menubar {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 21px;
  background: #f7f8f9;
  padding: 0 16px;
  border-bottom: 1px solid var(--app-line);
  font-size: 12px;
  color: #515761;
}
.app-shortcut {
  margin-left: auto;
  color: #60646c;
  font-size: 12px;
}
.app-body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 265px;
  min-height: 630px;
}
.app-explorer {
  background: #f3f4f6;
  border-right: 1px solid var(--app-line);
  padding: 19px 0 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.explorer-heading {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #5a5f67;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 23px;
}
.explorer-heading .icon {
  height: 14px;
  width: 14px;
}
.project-name {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px 12px;
  white-space: nowrap;
}
.project-name .icon {
  width: 15px;
  color: #717882;
}
.tree-group {
  padding: 10px 15px 6px;
  color: #59606a;
  font-size: 12px;
}
.tree-file {
  padding: 6px 15px 6px 27px;
  color: #5b5f66;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tree-file > span {
  font-size: 11px;
  margin-left: auto;
  background: #e2e5e9;
  border-radius: 3px;
  padding: 0 4px;
  color: #4c535d;
}
.app-file-tabs {
  display: flex;
  flex-direction: column;
}
.app-file-tabs > button {
  font-size: 12px;
  padding: 10px 9px 10px 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  color: #616975;
  white-space: nowrap;
  min-height: 37px;
}
.app-file-tabs > button .icon {
  width: 14px;
  height: 14px;
}
.app-file-tabs > button:hover {
  background: #e9ebef;
}
.app-file-tabs > button[aria-selected="true"] {
  background: #e4e7eb;
  border-left-color: #aa6e49;
  color: #343b43;
}
.explorer-note {
  padding: 20px 16px;
  margin-top: auto;
  border-top: 1px solid var(--app-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: #5c6068;
}
.explorer-note strong {
  font-size: 12px;
  color: #555d67;
  font-weight: 500;
}
.app-small-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}
.app-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.app-document-bar {
  height: 37px;
  background: #f4f5f7;
  border-bottom: 1px solid var(--app-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 0;
  color: #565d67;
  gap: 10px;
}
.active-document {
  background: white;
  border-right: 1px solid var(--app-line);
  border-top: 2px solid #ad7653;
  align-self: stretch;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 0 18px;
}
.active-document .icon {
  height: 14px;
  width: 14px;
  color: #7a818a;
}
.app-doc-state {
  font-size: 12px;
  color: #63676d;
}
.app-workbench {
  height: 593px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c6c9cf #f5f6f8;
  outline-offset: -3px !important;
}
.workbench-toolbar {
  padding: 21px 22px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 85px;
  border-bottom: 1px solid #eff0f2;
}
.workbench-toolbar h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #343a43;
}
.workbench-toolbar p {
  font-size: 12px;
  margin-top: 5px;
  color: #61656c;
}
.app-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid #dce0e5;
  background: #f5f6f8;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #626973;
}
.app-badge.complete {
  background: #f0f2f3;
  color: #596169;
}
.app-badge.running {
  background: #faf0e6;
  border-color: #e4ceb9;
  color: #92542e;
}
.app-agent {
  border-left: 1px solid var(--app-line);
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agent-panel-heading {
  display: flex;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid var(--app-line);
  padding: 16px;
  height: 52px;
}
.agent-mark {
  height: 22px;
  width: 22px;
  border-radius: 6px;
  background: #e5d6c8;
  color: #805239;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.agent-panel-heading strong {
  font-size: 13px;
  font-weight: 550;
}
.agent-context-label {
  font-size: 11px;
  margin-left: auto;
  color: #585f67;
  border: 1px solid #dfe3e8;
  padding: 2px 5px;
  border-radius: 3px;
}
.agent-content {
  padding: 19px 17px;
}
.agent-context {
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e8eb;
}
.agent-context > span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: #5c626a;
  margin-bottom: 8px;
}
.agent-context code {
  font-size: 12px;
  color: #525862;
  background: #eceef2;
  padding: 5px 7px;
  border-radius: 4px;
}
.agent-reply {
  padding: 23px 0;
}
.agent-reply-label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
  color: #505966;
}
.agent-reply p {
  font-size: 13px;
  line-height: 1.85;
  color: #555e6a;
}
.agent-consideration {
  border-left: 2px solid #c6b29e;
  background: #f2f1ef;
  padding: 12px 13px;
}
.agent-consideration > span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7a6959;
}
.agent-consideration p {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 7px;
  color: #6b665f;
}
.agent-detail {
  border-block: 1px solid #e3e6eb;
  margin-top: 20px;
}
.agent-detail summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 12px;
  list-style: none;
  color: #626a76;
}
.agent-detail summary::-webkit-details-marker {
  display: none;
}
.agent-detail[open] summary > span {
  transform: rotate(45deg);
}
.agent-detail p {
  font-size: 12px;
  line-height: 1.8;
  padding-bottom: 15px;
}
.agent-prompt-area {
  padding: 15px 17px;
  margin-top: auto;
  border-top: 1px solid var(--app-line);
  background: #f4f5f7;
}
.agent-prompt-area p {
  font-size: 12px;
  line-height: 1.8;
  color: #5c6169;
  margin-bottom: 10px;
}
.agent-prompt-area a {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #785239;
}
.app-statusbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 7px 13px;
  border-top: 1px solid #d9dce1;
  background: #eceef1;
  font-size: 11px;
  color: #646c78;
  min-height: 30px;
}
.pipeline-canvas {
  background-color: #fafbfc;
  background-image: radial-gradient(#d8dce2 0.7px, transparent 0.7px);
  background-size: 13px 13px;
  border-bottom: 1px solid #e0e4ea;
  padding: 15px 23px;
}
.canvas-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7c838d;
  letter-spacing: 0.025em;
}
.canvas-label > span:first-child {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.graph-nodes {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 21px 0 17px;
}
.graph-node {
  display: flex;
  align-items: center;
  text-align: left;
  background: #fff;
  border: 1px solid #d4d9e0;
  border-radius: 5px;
  width: 310px;
  max-width: 100%;
  min-height: 62px;
  padding: 11px 15px;
  position: relative;
  gap: 14px;
  box-shadow: 0 2px 6px #18253704;
}
.graph-node.selected {
  border-color: #ab7757;
  box-shadow: 0 0 0 2px #bf947324;
}
.node-index {
  font-size: 12px;
  border: 1px solid #e2e5e9;
  background: #f5f6f8;
  border-radius: 3px;
  padding: 4px;
  color: #6a6f76;
}
.node-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.node-text > small {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: #6d737b;
}
.node-text > strong {
  font-size: 12px;
  font-weight: 500;
  color: #414955;
}
.node-text > span {
  font-size: 11px;
  color: #656c74;
}
.node-port {
  position: absolute;
  height: 5px;
  width: 5px;
  border: 1px solid #b6bdc7;
  bottom: -3px;
  left: calc(50% - 2px);
  background: #fff;
  border-radius: 50%;
}
.graph-connector {
  height: 23px;
  line-height: 23px;
  font-size: 15px;
  color: #9ba4b0;
}
.canvas-caption {
  text-align: center;
  font-size: 11px;
  color: #7a818c;
}
.step-inspector {
  padding: 19px 22px 23px;
}
.inspector-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #626870;
}
.step-inspector h4 {
  font-size: 13px;
  font-weight: 550;
  margin-top: 8px;
  margin-bottom: 9px;
}
.step-inspector > p {
  font-size: 12px;
  line-height: 1.8;
  color: #6d7580;
}
.inspector-property {
  display: flex;
  gap: 16px;
  font-size: 12px;
  border-top: 1px solid #e8eaee;
  margin-top: 16px;
  padding-top: 13px;
}
.inspector-property > span {
  white-space: nowrap;
  color: #858c96;
}
.inspector-property strong {
  font-weight: 400;
  color: #69717c;
}
.desktop-demo select {
  border: 1px solid #d5dae0;
  background: #fff;
  color: #545c67;
  border-radius: 4px;
  padding: 5px 24px 5px 7px;
  font-size: 12px;
  max-width: 100%;
}
.app-select-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #646870;
}
.run-overview {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 14px;
  padding: 21px 22px;
  background: #fbfbfc;
  border-bottom: 1px solid #e7eaef;
}
.run-overview > div > span:first-child {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #6c7078;
  margin-bottom: 9px;
}
.run-overview strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
  color: #59626e;
}
.run-overview .app-badge {
  display: inline-flex !important;
  margin-bottom: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
  color: #92542e !important;
}
.run-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 14px;
  font-size: 11px;
  color: #636a73;
}
.run-table-head > span {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.run-table-head > label {
  display: flex;
  gap: 7px;
  align-items: center;
}
.run-table {
  padding: 0 22px;
}
.run-task {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e9ebef;
  background: #fff;
  padding: 15px 9px;
  text-align: left;
  color: #5f6874;
  font-size: 12px;
}
.run-task.selected {
  background: #f4f0eb;
}
.run-task > strong {
  font-size: 12px;
  font-weight: 500;
  margin-right: auto;
}
.task-state {
  font-size: 15px;
  color: #8d7661;
}
.run-task .app-badge {
  min-width: 71px;
  justify-content: center;
  font-size: 11px;
}
.log-console {
  background: #f6f7f9;
  border-block: 1px solid #e2e6eb;
  margin-top: 25px;
}
.log-console > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 22px;
  border-bottom: 1px solid #e3e7ec;
  font-size: 10px;
  color: #585f69;
  letter-spacing: 0.03em;
}
.log-console pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 2;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: #566272;
  padding: 14px 22px;
  margin: 0;
  min-height: 100px;
}
.log-console pre span {
  color: #5f6975;
}
.app-inline-note {
  padding: 14px 22px;
  font-size: 11px;
  line-height: 1.8;
  color: #686c74 !important;
}
.app-segmented {
  display: flex;
  background: #f1f3f5;
  border: 1px solid #e1e4e9;
  border-radius: 5px;
  padding: 3px;
}
.app-segmented > button {
  padding: 4px 12px;
  background: none;
  border: 0;
  font-size: 12px;
  border-radius: 3px;
  color: #5c636c;
}
.app-segmented > button[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 1px 4px #303d5012;
  color: #414b58;
}
.analysis-controls {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #eceef1;
  font-size: 11px;
  color: #5f6770;
}
.analysis-controls > label {
  display: flex;
  gap: 7px;
  align-items: center;
}
.highlight-count {
  margin-left: auto;
  color: #8c5c3b;
}
.analysis-chart-area {
  padding: 10px 16px 0;
}
.result-plot {
  display: block;
  width: 100%;
  height: 306px;
}
.plot-grid {
  stroke: #eff0f3;
  stroke-width: 1;
  fill: none;
}
.plot-axis {
  stroke: #bcc4cf;
  fill: none;
  stroke-width: 1;
}
.plot-threshold {
  stroke: #cebaa7;
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.plot-labels {
  fill: #5b6470;
  font-size: 12px;
}
.plot-point {
  fill: #7b8796;
  opacity: 0.9;
  cursor: pointer;
}
.plot-point.highlighted {
  fill: #b7825e;
  opacity: 0.95;
}
.plot-point.selected {
  stroke: #78492a;
  stroke-width: 1.5;
  fill: #c0926e;
  opacity: 1;
}
.plot-point:hover {
  stroke: #794827;
  stroke-width: 2;
}
.plot-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 11px;
  color: #656c75;
  margin-bottom: 18px;
}
.plot-legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plot-legend i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #aeb7c3;
}
.plot-legend i.signal {
  background: #ac7955;
}
.selected-feature {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-block: 1px solid #e5e9ee;
  background: #fbfbfc;
  padding: 14px 22px;
  align-items: center;
}
.selected-feature > label {
  font-size: 11px;
  color: #5c6570;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 7px;
}
.selected-feature > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.selected-feature > div > span {
  font-size: 11px;
  color: #626c76;
}
.selected-feature strong {
  font-size: 13px;
  font-weight: 500;
  color: #535d6a;
  font-variant-numeric: tabular-nums;
}
.results-table-wrap {
  overflow: auto;
  height: 306px;
}
.results-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.results-table caption {
  text-align: left;
  color: #5d6876;
  font-size: 11px;
  padding: 5px 10px 13px;
}
.results-table th {
  font-size: 12px;
  font-weight: 500;
  background: #f3f5f7;
  color: #586573;
  padding: 10px;
  white-space: nowrap;
}
.results-table td {
  border-bottom: 1px solid #eceef2;
  padding: 10px;
  color: #526170;
}
.results-table button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: #675241;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.results-table tr.selected {
  background: #f6efe7;
}
.manuscript-tabs {
  padding: 0 22px;
  display: flex;
  border-bottom: 1px solid #e6e9ed;
}
.manuscript-tabs > button {
  padding: 13px 17px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 12px;
  color: #626973;
}
.manuscript-tabs > button[aria-pressed="true"] {
  border-color: #b88967;
  color: #79553a;
}
.document-editor {
  padding: 28px 35px;
  background: #fff;
  max-width: 640px;
  margin: 0 auto;
}
.document-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #626a75;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
.document-editor h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 18px;
  color: #3e4753;
}
.document-editor h5 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #5f6a78;
}
.document-editor > p {
  font-size: 12px;
  line-height: 1.9;
  color: #5b6470;
}
.document-editor ul {
  padding-left: 17px;
  font-size: 12px;
  color: #58626d;
  line-height: 1.85;
  margin: 16px 0;
}
.document-editor li {
  padding-left: 3px;
  margin-block: 5px;
}
.document-callout {
  border-left: 2px solid #c7b7a7;
  background: #f7f4f0;
  padding: 11px 13px;
  margin-top: 20px;
}
.document-callout > span {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: #6e5a48;
}
.document-callout p {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 6px;
  color: #6c5949;
}
.document-artifact {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #e6e9ed;
  padding-top: 17px;
  margin-top: 23px;
  color: #68707a;
  font-size: 11px;
  flex-wrap: wrap;
}
.document-artifact .icon {
  height: 13px;
  width: 13px;
}
.document-artifact button {
  font-size: 12px;
  color: #78604b;
  border: 0;
  background: none;
  padding: 4px 0;
}
.editor-status {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #e7e9ed;
  padding: 11px 22px;
  font-size: 11px;
  color: #8b929c;
}
@media (min-width: 1500px) {
  .app-body {
    grid-template-columns: 200px minmax(0, 1fr) 280px;
  }
  .app-workbench {
    height: 635px;
  }
  .app-body {
    min-height: 672px;
  }
  .result-plot,
  .results-table-wrap {
    height: 330px;
  }
}
@media (max-width: 1100px) {
  .app-body {
    grid-template-columns: 175px minmax(0, 1fr) 220px;
  }
  .app-file-tabs > button {
    font-size: 11px;
    padding-left: 15px;
  }
  .project-name {
    font-size: 12px;
  }
  .agent-panel-heading {
    padding-inline: 13px;
  }
  .agent-context-label {
    display: none;
  }
  .agent-content {
    padding: 16px 13px;
  }
  .agent-reply p {
    font-size: 12px;
  }
  .workbench-toolbar {
    padding-inline: 18px;
  }
  .analysis-controls {
    padding-inline: 15px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .highlight-count {
    margin-left: 0;
  }
  .run-task {
    gap: 8px;
    padding-inline: 5px;
  }
  .run-task > strong {
    font-size: 12px;
  }
  .run-table {
    padding-inline: 14px;
  }
  .run-overview {
    padding-inline: 18px;
    gap: 10px;
  }
  .selected-feature {
    padding-inline: 17px;
    gap: 14px;
  }
  .app-titlebar {
    padding-inline: 13px;
  }
  .document-editor {
    padding-inline: 24px;
  }
}
@media (max-width: 950px) {
  .app-body {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .app-agent {
    display: none;
  }
  .app-workbench {
    height: 595px;
  }
  .app-body {
    min-height: 632px;
  }
  .app-file-tabs > button {
    font-size: 12px;
  }
  .workbench-toolbar h3 {
    font-size: 15px;
  }
  .selected-feature {
    justify-content: space-between;
  }
  .analysis-controls {
    gap: 13px;
  }
  .highlight-count {
    margin-left: auto;
  }
  .run-task > strong {
    font-size: 12px;
  }
  .run-table {
    padding-inline: 22px;
  }
}
@media (max-width: 650px) {
  .app-body {
    display: block;
    min-height: 0;
  }
  .app-explorer {
    display: none;
  }
  .app-titlebar {
    height: 35px;
    gap: 8px;
    padding-inline: 10px;
  }
  .window-controls {
    gap: 5px;
    min-width: 40px;
  }
  .window-controls > i {
    height: 7px;
    width: 7px;
  }
  .app-title {
    font-size: 12px;
  }
  .app-preview-label {
    font-size: 10px;
    letter-spacing: 0;
  }
  .app-menubar {
    gap: 19px;
    padding-inline: 11px;
    font-size: 12px;
    height: 28px;
  }
  .app-shortcut {
    display: none;
  }
  .app-document-bar {
    height: 35px;
    padding-right: 11px;
  }
  .active-document {
    font-size: 12px;
    padding-inline: 12px;
  }
  .app-doc-state {
    font-size: 11px;
  }
  .app-workbench {
    height: 580px;
  }
  .workbench-toolbar {
    padding: 19px 15px 15px;
    gap: 12px;
    min-height: 85px;
  }
  .workbench-toolbar h3 {
    font-size: 14px;
  }
  .workbench-toolbar p {
    font-size: 12px;
  }
  .app-badge {
    font-size: 11px;
    padding: 3px 6px;
  }
  .app-statusbar {
    font-size: 10px;
    padding-inline: 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .app-statusbar > span:last-child {
    display: none;
  }
  .app-agent {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--app-line);
  }
  .agent-panel-heading {
    height: 45px;
    padding-inline: 15px;
  }
  .agent-panel-heading strong {
    font-size: 13px;
  }
  .agent-context-label {
    display: block;
  }
  .agent-content {
    padding: 0 15px 16px;
  }
  .agent-context,
  .agent-consideration,
  .agent-prompt-area {
    display: none;
  }
  .agent-reply {
    padding: 15px 0 0;
  }
  .agent-reply-label {
    display: none;
  }
  .agent-reply p {
    font-size: 13px;
    line-height: 1.8;
  }
  .agent-detail {
    margin-top: 15px;
  }
  .agent-detail summary {
    font-size: 12px;
  }
  .agent-detail p {
    font-size: 12px;
  }
  .pipeline-canvas {
    padding: 14px 17px;
  }
  .graph-node {
    width: 280px;
  }
  .step-inspector {
    padding-inline: 17px;
  }
  .step-inspector > p {
    font-size: 13px;
  }
  .inspector-property {
    font-size: 12px;
  }
  .canvas-label {
    font-size: 10px;
    gap: 12px;
  }
  .graph-node .node-text > strong {
    font-size: 13px;
  }
  .graph-node .node-text > span {
    font-size: 12px;
  }
  .graph-node .node-text > small {
    font-size: 10px;
  }
  .run-overview {
    grid-template-columns: 1fr 1fr;
    padding: 17px 15px;
    gap: 17px;
  }
  .run-overview > div:last-child {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .run-overview > div:last-child > span:first-child {
    margin: 0;
  }
  .run-overview strong {
    font-size: 12px;
  }
  .run-table-head {
    padding: 15px;
  }
  .run-table {
    padding-inline: 10px;
  }
  .run-task {
    gap: 9px;
    padding-block: 14px;
  }
  .run-task > strong {
    font-size: 12px;
  }
  .run-task > span:nth-child(3) {
    display: none;
  }
  .run-task .app-badge {
    min-width: 66px;
    font-size: 10px;
  }
  .log-console > div {
    padding-inline: 15px;
    font-size: 10px;
  }
  .log-console pre {
    padding-inline: 15px;
    font-size: 12px;
  }
  .app-inline-note {
    padding: 12px 15px;
    font-size: 12px;
  }
  .analysis-controls {
    padding: 12px 15px;
    gap: 9px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .analysis-controls select {
    font-size: 12px;
  }
  .highlight-count {
    margin-left: auto;
  }
  .analysis-chart-area {
    padding-inline: 5px;
  }
  .result-plot {
    height: 245px;
  }
  .results-table-wrap {
    height: 245px;
  }
  .plot-labels {
    font-size: 13px;
  }
  .plot-legend {
    font-size: 10px;
    gap: 13px;
    flex-wrap: wrap;
  }
  .selected-feature {
    padding: 13px 15px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .selected-feature > label {
    font-size: 11px;
  }
  .selected-feature > div > span {
    font-size: 11px;
  }
  .selected-feature select {
    font-size: 12px;
    padding-right: 15px;
  }
  .selected-feature strong {
    font-size: 13px;
  }
  .manuscript-tabs {
    padding-inline: 15px;
  }
  .manuscript-tabs > button {
    font-size: 12px;
    padding-inline: 13px;
  }
  .document-editor {
    padding: 23px 22px;
  }
  .document-editor > p,
  .document-editor ul {
    font-size: 13px;
  }
  .document-editor h5 {
    font-size: 13px;
  }
  .document-callout p {
    font-size: 12px;
  }
  .document-meta {
    font-size: 10px;
  }
  .editor-status {
    font-size: 11px;
    padding-inline: 15px;
  }
  .app-select-label {
    font-size: 11px;
    gap: 5px;
    flex-direction: column;
    align-items: start;
  }
  .app-segmented > button {
    padding-inline: 8px;
  }
  .results-table th {
    font-size: 11px;
  }
  .results-table td {
    padding: 9px 7px;
    font-size: 12px;
  }
  .results-table th {
    padding-inline: 7px;
  }
}
@media (max-width: 360px) {
  .app-preview-label {
    display: none;
  }
  .app-title {
    margin-right: auto;
    margin-left: 7px;
  }
  .workbench-toolbar {
    padding-inline: 12px;
  }
  .workbench-toolbar h3 {
    font-size: 13px;
  }
  .workbench-toolbar p {
    font-size: 11px;
  }
  .highlight-count {
    margin-left: 0;
  }
  .analysis-controls {
    gap: 8px;
  }
  .selected-feature {
    gap: 10px;
  }
  .selected-feature > label {
    width: 100%;
    flex-direction: row;
    align-items: center;
  }
  .canvas-label > span:last-child {
    font-size: 10px;
  }
  .app-workbench {
    height: 590px;
  }
  .document-editor {
    padding-inline: 17px;
  }
  .graph-node {
    padding: 11px;
    gap: 10px;
  }
}

/* Native UI copy uses readable text sizes; file names retain a compact density. */
.app-body {
  grid-template-columns: 205px minmax(0, 1fr) 275px;
}
.app-file-tabs > button {
  padding-left: 17px;
  font-size: 11px;
}
.project-name {
  font-size: 11px;
}
.app-preview-label {
  font-size: 10px;
}
.agent-context > span,
.agent-consideration > span {
  font-size: 10px;
}
.node-text > small {
  font-size: 10px;
}
.node-text > strong {
  font-size: 12px;
}
.node-text > span {
  font-size: 11px;
}
.workbench-toolbar {
  flex-wrap: wrap;
}
.run-task {
  flex-wrap: wrap;
}
.run-task > strong {
  min-width: 125px;
}
.analysis-controls {
  flex-wrap: wrap;
}
.selected-feature {
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .app-body {
    grid-template-columns: 190px minmax(0, 1fr) 220px;
  }
  .app-file-tabs > button {
    font-size: 10px;
  }
}
@media (max-width: 950px) {
  .app-body {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .app-file-tabs > button {
    font-size: 11px;
  }
}
@media (max-width: 650px) {
  .app-body {
    display: block;
  }
  .app-title {
    font-size: 11px;
  }
  .app-preview-label {
    font-size: 8px;
  }
  .app-statusbar {
    font-size: 10px;
  }
  .run-task > strong {
    font-size: 11px;
    min-width: 110px;
  }
  .run-task .app-badge {
    font-size: 10px;
  }
  .app-file-tabs {
    display: none;
  }
}