.wf { --wf-node-width: 196px; }
.wf .page-heading { margin-bottom: var(--space-5); }
.wf .wf-actions, .wf .wf-toolbar, .wf .wf-tabs, .wf .wf-zoom, .wf .wf-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.wf .wf-actions { justify-content: flex-end; }
.wf-toolbar { padding: var(--space-3) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.wf-toolbar select { max-width: 330px; min-width: 160px; }
.wf-toolbar .wf-spacer { flex: 1; }
.wf-tabs { margin-bottom: var(--space-4); }
.wf-tabs [aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
.wf-notice { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary); margin-bottom: var(--space-3); background: var(--color-surface); }
.wf-notice.warning { background: var(--color-warning-soft); border-color: var(--color-accent-warm); color: var(--color-warning); }
.wf-notice.error { background: var(--color-danger-soft); color: var(--color-danger); }
.wf-grid { display: grid; grid-template-columns: 140px minmax(300px, 1fr) 310px; gap: var(--space-3); align-items: start; }
.wf-palette, .wf-inspector, .wf-board { border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); min-width: 0; }
.wf-palette { padding: var(--space-4) var(--space-3); }
.wf-palette h2, .wf-inspector h2 { font-size: var(--text-h3); margin: 0 0 var(--space-3); }
.wf-palette button { font-size: 12px; padding: 8px; white-space: nowrap; width: 100%; display: flex; gap: var(--space-2); align-items: center; justify-content: flex-start; margin-bottom: var(--space-2); }
.wf-palette .wf-symbol { color: var(--color-accent); width: 20px; text-align: center; font-weight: 700; }
.wf-palette p, .wf-hint { color: var(--color-text-secondary); font-size: var(--text-caption); margin-top: var(--space-3); }
.wf-board { overflow: hidden; }
.wf-board-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line); min-height: 48px; gap: var(--space-2); }
.wf-board-head span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.wf-viewport { position: relative; height: 610px; overflow: auto; overscroll-behavior: contain; background-color: var(--color-canvas);
  background-image: radial-gradient(var(--color-control-line) .7px, transparent .7px); background-size: 20px 20px; }
.wf-plane { position: relative; width: 1600px; height: 1000px; }
.wf-scene { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; }
.wf-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wf-edges path { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.wf-edges .wf-ghost { stroke-dasharray: 6 4; opacity: .65; }
.wf-edges marker path { fill: var(--color-accent); stroke: none; }
.wf-node { position: absolute; width: var(--wf-node-width); min-height: 104px; border: 1px solid var(--color-control-line);
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); outline-offset: 4px; }
.wf-node.is-selected { border: 2px solid var(--color-accent); box-shadow: var(--shadow-md); }
.wf-node[data-status="failed"] { border-color: var(--color-danger); }
.wf-node[data-status="succeeded"] .wf-node-kind { color: var(--color-success); }
.wf-node-head { padding: 12px 14px 8px; font-weight: 600; cursor: grab; touch-action: none; overflow-wrap: anywhere; }
.wf-node-head:active { cursor: grabbing; }
.wf-node-kind { display: flex; justify-content: space-between; padding: 0 14px 12px; color: var(--color-text-secondary); font-size: 11px; }
.wf-start-label { color: var(--color-accent); position: absolute; right: 12px; top: 12px; font-size: 10px; }
.wf-node-out-label { position: absolute; right: 18px; font-size: 10px; color: var(--color-text-secondary); }
.wf-port { position: absolute; z-index: 2; width: 28px; height: 28px; min-height: 0; border: 0; padding: 0;
  background: transparent; border-radius: var(--radius-pill); }
.wf-port::after { content: ""; display: block; width: 12px; height: 12px; margin: 8px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-accent); }
.wf-port:hover, .wf-port.is-linking { background: var(--color-accent-soft); }
.wf-port.is-linking::after { background: var(--color-accent); }
.wf-port-in { left: -15px; top: 60px; }
.wf-port-out { right: -15px; }
.wf-inspector { padding: var(--space-4); max-height: 710px; overflow: auto; }
.wf-inspector label.form-field, .wf-dialog label.form-field { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.wf-inspector input, .wf-inspector select, .wf-inspector textarea, .wf-dialog input, .wf-dialog textarea { width: 100%; min-width: 0; }
.wf-inspector textarea, .wf-dialog textarea { min-height: 90px; resize: vertical; }
.wf-inspector .wf-json, .wf-dialog .wf-json, .wf-result, .wf-command { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.wf-checks { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.wf-checks label { display: flex; align-items: start; gap: var(--space-2); font-size: 12px; overflow-wrap: anywhere; }
.wf-checks input { width: auto; flex: none; margin-top: 4px; }
.wf-inspector details { border-top: 1px solid var(--color-line); padding-top: var(--space-3); margin-top: var(--space-3); }
.wf-inspector summary { cursor: pointer; font-size: 12px; color: var(--color-text-label); }
.wf-edge-row { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; font-size: 12px; padding: var(--space-2) 0; }
.wf-result, .wf-command { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-subtle);
  border: 1px solid var(--color-line); padding: var(--space-3); border-radius: var(--radius-md); max-height: 280px; overflow: auto; }
.wf-run-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.wf-attempt { border-top: 1px solid var(--color-line); padding: var(--space-3) 0; }
.wf-attempt-head { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; font-size: 12px; }
.wf-run-list { display: grid; gap: var(--space-3); }
.wf-run-card { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.wf-run-card .sub { overflow-wrap: anywhere; }
.wf-dialog { width: min(620px, 90vw); }
.wf-dialog .wf-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.wf-inspector .error, .wf-dialog .error { white-space: pre-wrap; overflow-wrap: anywhere; }
.wf .wf-success { color: var(--color-success); }
.wf .wf-failed { color: var(--color-danger); }
.wf-run-grid { grid-template-columns: minmax(300px, 1fr) 340px; }
@media (max-width: 1199px) {
  .wf-grid { grid-template-columns: minmax(300px, 1fr) 290px; }
  .wf-palette { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .wf-palette h2 { margin: 0 8px 0 0; }
  .wf-palette button { font-size: 12px; padding: 8px; white-space: nowrap; width: auto; margin: 0; }
  .wf-palette p { width: 100%; margin: 0; }
}
@media (max-width: 800px) {
  .wf-grid, .wf-run-grid { grid-template-columns: 1fr; }
  .wf-inspector { max-height: none; }
  .wf-viewport { height: 470px; }
  .wf .page-heading { align-items: flex-start; }
  .wf-toolbar select { max-width: 100%; width: 100%; }
  .wf-toolbar .wf-spacer { display: none; }
}

/* The studio is a dedicated workspace; the rest of Hub keeps its design tokens. */
.shell:has(.wf-studio) { display: block; background: #19191a; }
.shell:has(.wf-studio) > .sidebar, .main:has(.wf-studio) > .topbar { display: none; }
.main:has(.wf-studio) { min-width: 0; }
.workspace:has(.wf-studio) { padding: 0; }
.wf-studio {
  --color-surface: #1a1a1a; --color-surface-subtle: #232323; --color-line: #303030;
  --color-control-line: #3d3d3d; --color-canvas: #0a0a0a; --color-text-primary: #e7e7e7;
  --color-text-secondary: #939393; --color-text-label: #bcbcbc; --color-accent: #c9c9c9;
  --color-accent-soft: #2d2d2d; --color-success: #92b59e; --color-danger: #e79494;
  display: grid; grid-template-columns: clamp(210px, 16vw, 326px) minmax(0, 1fr);
  height: 100dvh; min-height: 600px; overflow: hidden; color: #dedede;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  background: #19191a;
}
.wf-studio *, .wf-studio *::before, .wf-studio *::after { box-sizing: border-box; }
.wf-studio img { user-select: none; }
.wf-studio button, .wf-studio select { background: transparent; color: #bdbdbd; border: 1px solid transparent; border-radius: 9px; font-size: 13px; min-height: 34px; padding: 5px 9px; cursor: pointer; }
.wf-studio button:hover { background: #2b2b2b; color: #f4f4f4; }
.wf-studio button:disabled { opacity: .35; cursor: default; }
.wf-studio button:focus-visible, .wf-studio [tabindex]:focus-visible, .wf-studio select:focus-visible { outline: 2px solid #c5b8ed; outline-offset: 3px; }
.wf-studio button > img, .wc-group-caption > img { width: 20px; height: 20px; opacity: .8; filter: invert(1); pointer-events: none; flex-shrink: 0; }
.wc-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 32px 16px 16px; border-right: 1px solid #272727; }
.wc-brand { display: flex; align-items: center; gap: 10px; color: #ddd; margin: 5px 2px 27px; }
.wc-brand > img { width: 25px; height: 25px; filter: invert(1); }
.wc-brand strong { font-size: 17px; font-weight: 600; letter-spacing: -.5px; }
.wc-brand strong span { font-weight: 400; }
.wf-studio .wc-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start; margin-bottom: 6px; min-height: 38px; font-size: 14px; }
.wc-project-heading { margin: 27px 5px 8px; display: flex; align-items: center; justify-content: space-between; color: #737373; font-size: 13px; }
.wc-project-heading button { opacity: .55; }
.wc-sidebar h1 { font-size: 12px; font-weight: 400; color: #929292; margin: 0 12px 10px; }
.wc-projects { padding: 0 0 0 10px; }
.wf-studio .wc-current { display: flex; align-items: center; gap: 9px; background: #282828; width: 100%; text-align: left; min-height: 38px; }
.wc-current span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-projects select { width: 100%; margin-top: 8px; color: #7f7f7f; font-size: 11px; }
.wc-sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #272727; }
.wc-sidebar-footer > button { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; text-align: left; }
.wc-sidebar-footer > div { display: flex; align-items: center; gap: 10px; padding: 8px; color: #a0a0a0; }
.wc-sidebar-footer > div img { width: 25px; height: 25px; filter: invert(1); }
.wc-local-label { margin-left: auto; font-size: 10px; color: #6f6f6f; }
.wc-stage { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #0a0a0a; border: 1px solid #303030; border-radius: 18px; }
.wc-view-switch, .wc-top-controls, .wc-dock { position: absolute; display: flex; align-items: center; z-index: 6; background: #1a1a1a; border: 1px solid #343434; box-shadow: 0 2px 12px #0002; border-radius: 14px; padding: 3px; gap: 1px; }
.wc-view-switch { top: 12px; left: 10px; }
.wc-view-switch button { display: flex; gap: 7px; align-items: center; }
.wc-view-switch button:first-child { background: #333; }
.wc-view-switch button:last-child img:last-child { width: 12px; }
.wc-top-controls { right: 16px; top: 12px; padding: 3px 5px; }
.wc-top-controls button { display: flex; align-items: center; gap: 7px; padding: 4px 7px; min-height: 28px; }
.wc-top-controls button > img { width: 16px; height: 16px; }
.wc-top-controls [aria-pressed="true"] { background: #303030; box-shadow: inset 0 0 0 1px #424242; }
.wc-top-controls #wf-zoom-value { font-size: 12px; color: #aaa; min-width: 34px; text-align: center; }
.wc-dock { bottom: 17px; left: 50%; transform: translateX(-50%); border-radius: 32px; padding: 5px; gap: 4px; }
.wc-dock button { display: grid; place-items: center; width: 32px; height: 32px; padding: 5px; border-radius: 50%; }
.wf-studio .wc-dock .wc-add { color: #111; background: #dedede; width: 36px; height: 36px; }
.wf-studio .wc-dock .wc-add img { filter: none; width: 23px; height: 23px; opacity: 1; }
.wc-dock [aria-pressed="true"] { background: #2b2b2b; }
.wc-divider { height: 20px; width: 1px; background: #353535; margin: 0 3px; }
.wc-document-bar { position: absolute; top: 65px; left: 20px; right: 220px; z-index: 5; display: flex; align-items: center; gap: 15px; color: #999; }
.wc-document-title { min-width: 100px; display: flex; flex-direction: column; padding: 2px 0; }
.wc-document-title strong { font-size: 12px; font-weight: 500; color: #aaa; }
.wc-document-title #wf-save-state { font-size: 10px; color: #646464; }
.wc-document-actions { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.wc-document-actions button { font-size: 11px; min-height: 29px; padding: 4px 7px; }
.wc-document-actions button img { width: 15px; height: 15px; }
.wf-studio .wc-run { display: flex; gap: 3px; align-items: center; border: 1px solid #454545; }
.wc-status-line { position: absolute; bottom: 14px; left: 18px; display: flex; align-items: center; gap: 6px; color: #696969; font-size: 10px; pointer-events: none; }
.wc-status-line > span:last-child { margin-left: 8px; }
.wc-status-dot { width: 5px; height: 5px; background: #879b8b; border-radius: 50%; }
.wf-studio .wf-board { position: absolute; inset: 0; border: 0; border-radius: 18px; background: #0a0a0a; }
.wf-studio .wf-board-head { display: none; }
.wf-studio .wf-viewport { width: 100%; height: 100%; background: #0a0a0a; background-image: none; overflow: auto; scrollbar-width: none; }
.wf-studio .wf-viewport::-webkit-scrollbar { display: none; }
.wf-studio .wf-viewport.is-panning { cursor: grabbing; }
.wf-studio .wf-plane { min-width: 100%; min-height: 100%; }
.wf-studio .wf-scene { transform-origin: 0 0; }
.wf-studio .wf-node { background: #222; border: 1px solid #424242; border-radius: 9px; box-shadow: 0 3px 15px #0002; }
.wf-studio .wf-node.is-selected { border: 1px solid #b5acc9; box-shadow: 0 0 0 2px #9a8dbb22; }
.wf-studio .wf-node-head { padding-top: 15px; font-size: 13px; padding-right: 30px; }
.wf-studio .wf-start-label { position: static; color: #adadad; font-size: 9px; }
.wf-studio .wf-node-kind { gap: 6px; }
.wf-studio .wf-edges path { stroke: #686868; stroke-width: 1.5; }
.wf-studio .wf-edges marker path { fill: #686868; stroke: none; }
.wf-studio .wf-port::after { width: 9px; height: 9px; border: 1px solid #aaa; background: #202020; }
.wf-studio .wf-node-out-label { color: #8c8c8c; }
.wf-studio .wf-inspector { position: absolute; right: 18px; top: 230px; bottom: 80px; width: 330px; z-index: 7; max-height: none; background: #1a1a1a; box-shadow: 0 15px 50px #0005; border: 1px solid #343434; border-radius: 16px; padding: 20px; }
.wf-studio .wf-inspector[hidden], .wc-minimap[hidden] { display: none; }
.wf-studio .wf-inspector h2 { color: #dedede; font-size: 16px; padding-right: 25px; }
.wc-inspector-close { position: absolute; top: 12px; right: 10px; }
.wf-studio .wf-inspector input, .wf-studio .wf-inspector select, .wf-studio .wf-inspector textarea { background: #111; color: #ddd; border: 1px solid #393939; padding: 8px; border-radius: 7px; }
.wf-studio .wf-inspector input[type="checkbox"] { accent-color: #b6a7cf; }
.wf-studio .wf-inspector .primary { background: #dedede; color: #111; }
.wc-empty { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: min(440px,80%); text-align: center; color: #646464; }
.wc-empty > div > img { width: 36px; height: 36px; filter: invert(1); opacity: .35; }
.wc-empty h2 { color: #9e9e9e; font-size: 18px; font-weight: 500; margin: 20px 0 10px; }
.wc-empty p { font-size: 12px; margin: 0 0 20px; }
.wc-empty button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #333; margin: 3px; }
.wc-group { position: absolute; }
.wc-group.is-selected .wc-group-content { border-color: #555; }
.wc-group-label { display: flex; align-items: center; width: 100%; height: 36px; gap: 0; margin-bottom: 7px; cursor: grab; touch-action: none; }
.wc-group-label > button { font-size: 13px; min-height: 28px; padding: 2px 6px; border: 1px solid #292929; background: #0d0d0d; }
.wc-group-label > button:first-child { border-radius: 15px 0 0 15px; border-right: 0; padding-right: 0; }
.wc-group-label > button:first-child img { width: 13px; height: 13px; }
.wc-group-label > button:last-child { border-radius: 0 15px 15px 0; border-left: 0; }
.wc-group-label > button > span { color: #777; padding-left: 5px; }
.wc-group-content { padding: 14px; background: #232323; border: 1px solid #333; border-radius: 5px; }
.wc-group-caption { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #8f8f8f; margin: 0 0 6px; }
.wc-group-caption > img { width: 11px; height: 11px; }
.wc-material-grid { display: grid; gap: 9px; padding: 10px; background: #0c0c0c; border-radius: 5px; }
.wf-studio .wc-material { padding: 0; border: 0; display: flex; min-width: 0; flex-direction: column; border-radius: 4px; align-items: stretch; text-align: left; background: #101010; }
.wc-material-label { display: flex; gap: 3px; align-items: center; color: #999; font-size: 7px; line-height: 1.5; min-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-material-label img { width: 7px; height: 7px; filter: invert(1); opacity: .6; }
.wc-image-wrap { position: relative; display: block; aspect-ratio: .58; border-radius: 4px; overflow: hidden; background: #161616; border: 1px solid #2b2b2b; }
.wc-image-wrap > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-image-wrap > img[hidden] { display: none; }
.wc-image-error { display: block; padding: 25px 8px; color: #aaa; font-size: 10px; text-align: center; }
.wc-image-error[hidden] { display: none; }
.wc-text-card { grid-column: span 1; }
.wc-note { color: #c7c7c7; padding: 13px 10px; min-height: 100px; white-space: pre-wrap; font-size: 12px; overflow-wrap: anywhere; }
.wf-studio .wc-empty-group { width: 100%; color: #7d7d7d; font-size: 12px; min-height: 160px; }
.wc-add-menu { position: absolute; top: 34%; left: 62%; width: 250px; max-height: min(660px, calc(100% - 100px)); overflow: auto; z-index: 8; background: #1a1a1a; border: 1px solid #343434; border-radius: 20px; padding: 13px 10px 9px; box-shadow: 0 15px 50px #0003; }
.wc-menu-title { display: flex; align-items: center; justify-content: space-between; color: #999; font-size: 12px; padding: 0 6px 5px; }
.wc-menu-title button { min-height: 20px; padding: 2px; }
.wc-menu-title button > img { width: 13px; height: 13px; }
.wf-studio .wc-add-menu > button { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 9px 7px; min-height: 48px; font-size: 15px; color: #eee; }
.wc-add-menu > button > img { background: #2c2c2c; border-radius: 9px; padding: 7px; width: 34px; height: 34px; box-sizing: content-box; filter: none; }
.wc-add-menu > button img { filter: invert(1); }
.wc-add-menu small { display: block; color: #888; font-size: 10px; margin-top: 1px; }
.wc-menu-divider { height: 1px; background: #292929; margin: 6px 0; }
.wc-minimap { position: absolute; right: 16px; top: 57px; width: 190px; height: 148px; border: 8px solid #262626; background: #181818; border-radius: 8px; z-index: 5; cursor: crosshair; overflow: hidden; }
.wc-minimap-world { position: absolute; inset: 0; }
.wc-minimap-world > span { position: absolute; background: #8b8b8b; border: 1px solid #565656; }
.wc-minimap-view { position: absolute; border: 1px solid #bdbdbd66; background: #ffffff05; pointer-events: none; }
.wc-focus-save { display: none; }
.wf-studio.is-sidebar-hidden, .wf-studio.is-focus { grid-template-columns: minmax(0,1fr); }
.wf-studio.is-sidebar-hidden .wc-sidebar, .wf-studio.is-focus .wc-sidebar { display: none; }
.wf-studio #wf-error { position: absolute; z-index: 10; top: 115px; left: 20px; right: 220px; background: #301f1f; color: #e8aaaa; border-color: #644141; }
.wf-studio .wf-run-summary { position: absolute; top: 115px; left: 20px; right: 220px; z-index: 5; background: #1a1a1a; font-size: 12px; }
.wf-studio .wf-run-list { position: absolute; inset: 140px 25px 80px; overflow: auto; align-content: start; }
.wf-studio .wf-run-card { background: #1a1a1a; }
#dialog:has(.wf-dialog) { background: #1c1c1c; color: #d5d5d5; border: 1px solid #3b3b3b; border-radius: 17px; }
.wf-dialog input, .wf-dialog textarea, .wf-dialog select { background: #111; color: #ddd; border: 1px solid #444; border-radius: 6px; padding: 9px; }
.wf-dialog button { background: #2c2c2c; border-color: #444; color: #ddd; }
.wf-dialog button.primary { background: #ddd; color: #111; border-color: #ddd; }
.wf-dialog h2 { color: #eee; }
.wf-dialog .error { color: #efa0a0; }
.wc-preview { display: block; max-width: 100%; max-height: 55vh; object-fit: contain; margin: 15px auto; }
.wc-import-results { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; max-height: 130px; overflow: auto; }
.wc-import-files { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 340px; overflow: auto; }
.wc-import-files label { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 5px; padding: 6px; border: 1px solid #333; border-radius: 6px; font-size: 10px; overflow-wrap: anywhere; }
.wc-import-files img { width: 100%; height: 85px; object-fit: contain; }
.wc-import-files span { grid-column: 1/-1; }
@media (max-width: 1000px) {
  .wc-document-bar { right: 15px; top: 61px; align-items: flex-start; }
  .wc-document-actions { justify-content: flex-end; }
  .wc-document-actions button { font-size: 10px; }
  .wc-minimap { top: 120px; width: 140px; height: 118px; }
  .wc-status-line { display: none; }
  .wc-top-controls { right: 10px; }
  .wc-top-controls button span { display: none; }
  .wf-studio .wf-run-summary { top: 155px; right: 15px; }
}
@media (max-width: 700px) {
  .wf-studio { grid-template-columns: minmax(0,1fr); min-height: 600px; }
  .wc-sidebar { display: none; }
  .wc-stage { border-radius: 0; }
  .wf-studio .wf-board { border-radius: 0; }
  .wc-view-switch { left: 7px; top: 8px; }
  .wc-view-switch button:first-child { display: none; }
  .wc-view-switch button { font-size: 11px; }
  .wc-top-controls { top: 9px; gap: 0; padding: 2px; }
  .wc-top-controls button { padding: 4px; }
  .wc-top-controls button > img { width: 14px; }
  .wc-top-controls #wf-zoom-value { min-width: 28px; font-size: 10px; }
  .wc-document-bar { left: 12px; right: 12px; top: 60px; flex-direction: column; gap: 7px; }
  .wc-document-actions { justify-content: flex-start; gap: 1px; }
  .wc-minimap { top: 155px; width: 110px; height: 90px; border-width: 5px; opacity: .8; }
  .wc-add-menu { left: auto; right: 12px; top: 190px; width: 240px; max-height: calc(100% - 270px); }
  .wc-dock { bottom: 15px; gap: 2px; }
  .wc-dock button { width: 29px; height: 29px; }
  .wf-studio .wf-inspector { left: 10px; right: 10px; width: auto; top: 250px; bottom: 70px; }
  .wf-studio .wf-run-summary { top: 155px; left: 12px; }
  .wf-studio #wf-error { left: 12px; right: 12px; top: 120px; }
  .wc-sidebar-footer { margin-top: 8px; }
  .wf-studio.is-sidebar-hidden .wc-sidebar { display: flex; position: absolute; z-index: 12; background: #19191a; height: 100%; width: 240px; }
}
.workspace:has(.wf-studio) { max-width: none; margin: 0; width: 100%; }
.wc-menu-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #272727; flex-shrink: 0; }
.wc-menu-icon img { width: 24px; height: 24px; filter: invert(1); opacity: .9; }
.wc-group-label { height: 28px; }
.wc-wide-material .wc-image-wrap { aspect-ratio: 1.75; }
.wc-wide-material .wc-image-wrap > img { object-fit: contain; }
.wc-material-grid > .wc-material { padding: 0 6px; }
.wc-material-grid > .wc-material:only-child { padding: 0; }
.wc-material:only-child .wc-image-wrap { aspect-ratio: 1; }
.wc-material:only-child .wc-image-wrap > img { object-fit: contain; }
.wc-add-menu { left: 62.5%; width: 287px; max-height: calc(100% - 130px); }
.wc-add-menu > button { min-height: 48px; }
.wc-add-menu .wc-menu-icon { width: 38px; height: 38px; }
.wc-more-nodes { border-top: 1px solid #292929; margin: 6px 0 0; padding: 8px 6px 3px; color: #888; font-size: 12px; }
.wc-more-nodes summary { cursor: pointer; }
.wc-more-nodes button { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 5px; }
.wc-add-menu { max-height: min(630px, calc(66% - 80px)); }
.wc-group-content { padding: 10px 14px; }
.wc-group-caption { margin-bottom: 3px; }
.wc-material-grid { gap: 6px 9px; padding-top: 6px; padding-bottom: 6px; }
.wc-top-controls { right: 170px; gap: 4px; padding: 4px 8px; }
.wc-top-controls button { min-width: 30px; }
.wc-minimap { right: 170px; }
.wc-dock { gap: 8px; padding: 5px 9px; }
.wc-dock button { width: 34px; height: 34px; }
@media (max-width: 1280px) { .wc-top-controls { right: 16px; } .wc-minimap { right: 16px; } }
@media (max-width: 700px) { .wc-dock { gap: 2px; padding: 5px; } .wc-dock button { width: 29px; height: 29px; } .wc-add-menu { max-height: calc(100% - 265px); } }
.wf-studio [hidden] { display: none !important; }
.wc-mobile-tabs { display: none; }
@media (max-width: 700px) {
  .wc-mobile-tabs { position: absolute; z-index: 6; display: flex; gap: 3px; left: 12px; top: 139px; }
  .wc-mobile-tabs button { font-size: 10px; min-height: 25px; padding: 3px 8px; }
  .wc-mobile-tabs [aria-selected="true"] { background: #272727; }
  .wf-studio .wf-inspector { top: auto; bottom: 70px; max-height: 42dvh; }
  .wf-studio.is-focus .wc-mobile-tabs { display: none; }
}
.wc-sidebar-close { display: none; }
@media (max-width: 700px) {
  .wc-view-switch button:first-child { display: flex; }
  .wc-view-switch button:last-child > span { display: none; }
  .wf-studio.is-sidebar-hidden .wc-sidebar { display: none; }
  .wf-studio.is-mobile-sidebar-open .wc-sidebar { display: flex; position: absolute; z-index: 12; background: #19191a; height: 100%; width: 250px; }
  .wc-sidebar .wc-sidebar-close { display: grid; place-items: center; margin-left: auto; padding: 4px; }
  .wc-sidebar-close img { width: 18px; height: 18px; }
}