/* Finite demonstrations of the work, with a static, link-driven fallback. */
.workbench {
  --wb-bg: #111316;
  --wb-panel: #191e26;
  --wb-panel-raised: #242a33;
  --wb-text: #f1f2f4;
  --wb-muted: #adb3bd;
  --wb-line: #495463;
  --wb-red: #ff574b;
  --wb-action: #d63027;
  --wb-ease: cubic-bezier(.22, 1, .36, 1);
  height: 470px;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #46505e;
  border-radius: 9px;
  background: var(--wb-bg);
  color: var(--wb-text);
  box-shadow: 0 20px 60px #0003;
  font-family: Onest, Arial, sans-serif;
}
.workbench *, .workbench *::before, .workbench *::after { box-sizing: border-box; }
.workbench .icon { display: inline-block; flex: none; width: 18px; height: 18px; fill: none; vertical-align: middle; pointer-events: none; }
.workbench-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 17px 8px 20px;
  border-bottom: 1px solid #353e4b;
  background: #171b22;
}
.workbench-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--wb-muted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.1px;
  line-height: 1.4;
}
.workbench-title { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -.15px; }
.workbench-replay {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #6e7886;
  border-radius: 50%;
  background: transparent;
  color: var(--wb-muted);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.workbench-replay[hidden] { display: none !important; }
.workbench-replay:hover { color: var(--wb-text); border-color: var(--wb-red); background: #252b34; }
.workbench-replay .icon { width: 17px; height: 17px; transition: transform .3s var(--wb-ease); }
.workbench-replay:hover .icon { transform: rotate(-35deg); }
.workbench-tabs { height: 48px; display: grid; grid-template-columns: .83fr 1.18fr 1.05fr; padding: 0 12px; border-bottom: 1px solid #353e4b; background: #14181e; }
.workbench-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  gap: 7px;
  padding: 0 6px;
  color: var(--wb-muted);
  background: transparent;
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.workbench-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: transparent; }
.workbench-tab .icon { width: 15px; height: 15px; }
.workbench-tab:hover { color: var(--wb-text); background: #20252d; }
.workbench-tab[aria-selected='true'] { color: var(--wb-text); background: #20252d; }
.workbench-tab[aria-selected='true'] .icon { color: var(--wb-red); }
.workbench-tab[aria-selected='true']::after { background: var(--wb-red); }
.workbench :focus-visible { outline: 2px solid var(--wb-red); outline-offset: -4px; }
.workbench-panels {
  display: flex;
  height: 312px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #6e7886 #14181e;
}
.workbench-panel {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  padding: 19px;
  position: relative;
  scroll-snap-align: start;
  scroll-margin-top: 110px;
  background: linear-gradient(135deg, #1a2028, #14181e);
}
.workbench.is-enhanced .workbench-panels { display: block; overflow: hidden; }
.workbench-panel[hidden] { display: none !important; }
.workbench-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  height: 44px;
  padding: 0 20px;
  border-top: 1px solid #353e4b;
  background: #171b22;
}
.workbench-footer p { margin: 0; color: var(--wb-muted); font-size: 10px; line-height: 1.5; }
.workbench-footer p:first-child { display: flex; align-items: center; gap: 7px; color: #d7dce3; }
.workbench-footer .icon { width: 13px; height: 13px; color: var(--wb-red); }
.workbench-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* Website: a real page structure, assembled from flat interface components. */
.wb-site-layout { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; height: 100%; }
.wb-tool-rail { display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 8px; border-right: 1px solid #394350; }
.wb-tool-rail span { width: 29px; height: 29px; display: grid; place-items: center; color: #adb8c7; border-radius: 4px; }
.wb-tool-rail span:first-child { color: var(--wb-red); background: #322321; }
.wb-tool-rail .icon { width: 16px; height: 16px; }
.wb-site-work { display: flex; flex-direction: column; min-width: 0; height: 100%; gap: 12px; }
.wb-browser { flex: 1; min-height: 0; overflow: hidden; border: 1px solid #697688; border-radius: 5px; background: var(--wb-panel-raised); }
.wb-browser-toolbar { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 11px; border-bottom: 1px solid #46515f; color: #c0c9d5; background: #191f27; font-size: 7px; line-height: 1.4; }
.wb-window-dots { display: flex; gap: 4px; }
.wb-window-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #79879a; }
.wb-browser-toolbar .icon { width: 11px; height: 11px; color: var(--wb-red); }
.wb-page { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 28px); padding: 14px; gap: 12px; }
.wb-page-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 7px; line-height: 1.4; }
.wb-page-nav strong { font-size: 8px; font-weight: 600; letter-spacing: -.1px; }
.wb-page-nav strong span { color: var(--wb-red); }
.wb-page-nav > span { color: #b4bfce; font-size: 6px; white-space: nowrap; }
.wb-page-hero { display: grid; grid-template-columns: 1.2fr .85fr; align-items: center; gap: 14px; }
.wb-page-eyebrow { display: block; margin-bottom: 7px; color: #b9c4d3; font-size: 5px; line-height: 1.5; letter-spacing: .6px; }
.wb-page-headline { display: block; font-size: 20px; line-height: 1.08; letter-spacing: -.85px; font-weight: 550; }
.wb-page-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 7px 9px; border-radius: 2px; background: var(--wb-action); color: #fff; font-size: 6px; line-height: 1.5; }
.wb-page-link .icon { width: 10px; height: 10px; }
.wb-page-code { padding: 13px 11px; border: 1px solid #6b4b45; border-radius: 3px; background: #2d2424; }
.wb-page-code > span { display: flex; align-items: center; gap: 6px; margin-bottom: 15px; font-size: 6px; color: #c8ced7; }
.wb-page-code .icon { width: 13px; height: 13px; color: var(--wb-red); }
.wb-page-code code { display: block; color: #ff9c8e; font-size: 8px; line-height: 1.9; font-family: Onest, Arial, sans-serif; }
.wb-page-code code span { color: #d4dbe6; }
.wb-page-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wb-page-module { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 33px; padding: 7px; border: 1px solid #536173; border-radius: 2px; background: #1b222c; color: #d5dde8; font-size: 6px; line-height: 1.4; }
.wb-page-module .icon { width: 11px; height: 11px; color: #bdc7d5; }
.wb-progress { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 19px; }
.wb-step { display: flex; align-items: center; gap: 5px; color: #c0cad7; font-size: 8px; line-height: 1.4; }
.wb-step .icon { width: 12px; height: 12px; color: var(--wb-red); }
.wb-running .wb-browser { animation: wb-browser-in .6s var(--wb-ease) both; }
.wb-running .wb-site-piece { animation: wb-piece-in .55s var(--wb-delay, 0s) var(--wb-ease) both; }
.wb-running .wb-step { animation: wb-step-in .4s var(--wb-delay, 0s) both; }
.wb-page-nav { --wb-delay: .4s; }
.wb-page-hero > .wb-site-piece { --wb-delay: .85s; }
.wb-page-code.wb-site-piece { --wb-delay: 1.4s; }
.wb-page-link { --wb-delay: 2.4s; }
.wb-page-module:nth-child(1) { --wb-delay: 1.75s; }
.wb-page-module:nth-child(2) { --wb-delay: 1.95s; }
.wb-page-module:nth-child(3) { --wb-delay: 2.15s; }
.wb-progress .wb-step:nth-child(1) { --wb-delay: .5s; }
.wb-progress .wb-step:nth-child(2) { --wb-delay: 1.8s; }
.wb-progress .wb-step:nth-child(3) { --wb-delay: 3s; }

/* Bot: illustrative messages stay outside the accessibility tree. */
.wb-bot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 103px; gap: 14px; height: 100%; }
.wb-chat { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; border: 1px solid #697688; border-radius: 5px; overflow: hidden; background: #151b23; }
.wb-chat-header { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 7px 11px; border-bottom: 1px solid #495463; background: #252c36; }
.wb-chat-avatar { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 7px; background: var(--wb-action); color: white; }
.wb-chat-avatar .icon { width: 17px; height: 17px; }
.wb-chat-header strong { display: block; font-size: 10px; font-weight: 500; line-height: 1.4; }
.wb-chat-header small { display: block; margin-top: 2px; color: #b3c0d0; font-size: 7px; line-height: 1.4; }
.wb-chat-messages { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; gap: 10px; padding: 12px; }
.wb-message { align-self: flex-start; max-width: 95%; padding: 9px 10px; border: 1px solid #526073; border-radius: 7px 7px 7px 2px; color: var(--wb-text); background: #252e3a; font-size: 10px; line-height: 1.5; }
.wb-message p { margin: 0; }
.wb-chat-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.wb-chat-choices span { padding: 4px 5px; border: 1px solid #77869a; border-radius: 3px; color: #e0e5ed; background: #303c4c; font-size: 7px; line-height: 1.3; }
.wb-chat-choices span:first-child { border-color: var(--wb-red); }
.wb-message-out { align-self: flex-end; border-color: #e46052; border-radius: 7px 7px 2px 7px; background: var(--wb-action); color: #fff; }
.wb-message-final strong { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; }
.wb-message-final strong .icon { width: 12px; height: 12px; color: var(--wb-red); }
.wb-message-final small { display: block; margin-top: 5px; color: #c1cbd9; font-size: 9px; line-height: 1.5; }
.wb-bot-notes { display: flex; flex-direction: column; justify-content: center; gap: 25px; padding-left: 3px; }
.wb-bot-notes .wb-step { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 6px; font-size: 9px; line-height: 1.6; }
.wb-bot-notes .wb-step .icon { margin-top: 1px; width: 13px; height: 13px; }
.wb-typing { display: none; position: absolute; left: 12px; bottom: 25px; align-items: center; gap: 4px; height: 27px; padding: 0 10px; border: 1px solid #526073; border-radius: 7px 7px 7px 2px; background: #252e3a; }
.wb-typing i { width: 4px; height: 4px; border-radius: 50%; background: #c1cbd9; }
.wb-running .wb-message { animation: wb-message-in .5s var(--wb-delay, 0s) var(--wb-ease) both; }
.wb-running .wb-typing { display: flex; animation: wb-typing-window 3s both; }
.wb-running .wb-typing i { animation: wb-typing-dot .5s 1s 3 alternate both; }
.wb-running .wb-typing i:nth-child(2) { animation-delay: 1.1s; }
.wb-running .wb-typing i:nth-child(3) { animation-delay: 1.2s; }
.wb-chat-messages > .wb-message:nth-child(1) { --wb-delay: .25s; }
.wb-chat-messages > .wb-message:nth-child(2) { --wb-delay: 1.15s; }
.wb-chat-messages > .wb-message:nth-child(3) { --wb-delay: 2.55s; }
.wb-bot-notes .wb-step:nth-child(1) { --wb-delay: .6s; }
.wb-bot-notes .wb-step:nth-child(2) { --wb-delay: 1.5s; }
.wb-bot-notes .wb-step:nth-child(3) { --wb-delay: 2.9s; }

/* Integrations: one finite passage through a flat chain of services. */
.wb-integration { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 28px; }
.wb-flow-heading { display: flex; align-items: center; gap: 8px; color: #bdc7d5; font-size: 8px; line-height: 1.5; letter-spacing: .5px; }
.wb-flow-heading .icon { width: 16px; height: 16px; color: var(--wb-red); }
.wb-flow { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; }
.wb-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-width: 0; min-height: 124px; padding: 14px 10px; border: 1px solid #727e90; border-radius: 5px; background: #252c36; }
.wb-node > .icon { width: 23px; height: 23px; color: var(--wb-red); }
.wb-node-copy strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -.2px; }
.wb-node-copy small { display: block; margin-top: 5px; color: #c0cbd9; font-size: 7px; line-height: 1.6; }
.wb-node-check { position: absolute; right: 7px; top: 8px; display: flex; color: #d9e0e9; }
.wb-node-check .icon { width: 12px; height: 12px; }
.wb-flow-route { position: relative; height: 1px; width: 100%; background: #758297; }
.wb-flow-route::after { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--wb-red); opacity: 0; }
.wb-flow-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #46515f; }
.wb-flow-summary p { display: flex; align-items: center; gap: 7px; margin: 0; color: #e1e6ed; font-size: 10px; line-height: 1.5; }
.wb-flow-summary p .icon { width: 13px; height: 13px; color: var(--wb-red); }
.wb-flow-summary > span { color: #b2becf; font-size: 7px; line-height: 1.5; }
.wb-running .wb-node { animation: wb-node-in .5s var(--wb-delay, 0s) var(--wb-ease) both; }
.wb-running .wb-node-check { animation: wb-piece-in .3s var(--wb-check-delay, 0s) both; }
.wb-running .wb-flow-route::after { animation: wb-packet-x .9s var(--wb-delay, 0s) linear both; }
.wb-running .wb-flow-summary { animation: wb-piece-in .5s 3.15s var(--wb-ease) both; }
.wb-flow > .wb-node:nth-child(1) { --wb-delay: .15s; --wb-check-delay: .65s; }
.wb-flow > .wb-flow-route:nth-child(2) { --wb-delay: .7s; }
.wb-flow > .wb-node:nth-child(3) { --wb-delay: 1.4s; --wb-check-delay: 1.9s; }
.wb-flow > .wb-flow-route:nth-child(4) { --wb-delay: 1.95s; }
.wb-flow > .wb-node:nth-child(5) { --wb-delay: 2.65s; --wb-check-delay: 3.15s; }

@keyframes wb-browser-in { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wb-piece-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wb-step-in { from { opacity: .3; } to { opacity: 1; } }
@keyframes wb-message-in { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wb-typing-window { 0%, 39% { opacity: 0; } 43%, 78% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes wb-typing-dot { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-3px); opacity: 1; } }
@keyframes wb-node-in { 0% { opacity: .4; transform: translateY(5px); border-color: #46515f; } 65% { opacity: 1; transform: translateY(0); border-color: #ff574b; } 100% { opacity: 1; transform: translateY(0); border-color: #727e90; } }
@keyframes wb-packet-x { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(21px); } }
@keyframes wb-packet-y { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

@media (max-width: 1150px) and (min-width: 621px) {
  .workbench { height: 450px; }
  .workbench-panels { height: 292px; }
  .workbench-panel { padding: 15px; }
  .wb-site-layout { grid-template-columns: 26px minmax(0, 1fr); gap: 9px; }
  .wb-tool-rail span { width: 23px; }
  .wb-page { padding: 11px; gap: 10px; }
  .wb-page-hero { gap: 9px; }
  .wb-page-headline { font-size: 17px; }
  .wb-page-code { padding: 10px 8px; }
  .wb-page-code code { font-size: 7px; }
  .wb-page-code > span { margin-bottom: 11px; font-size: 5px; }
  .wb-bot-layout { grid-template-columns: minmax(0, 1fr); }
  .wb-bot-notes { display: none; }
  .wb-message { max-width: 89%; }
  .wb-node { min-height: 116px; padding: 12px 8px; }
  .wb-node-copy strong { font-size: 11px; }
  .wb-node-copy small { font-size: 6px; }
}
@media (max-width: 850px) and (min-width: 621px) {
  .workbench { height: 410px; }
  .workbench-panels { height: 252px; }
  .workbench-header { padding-left: 14px; padding-right: 10px; }
  .workbench-title { font-size: 11px; }
  .workbench-tab { font-size: 8px; gap: 5px; padding-inline: 3px; }
  .workbench-tab .icon { width: 12px; height: 12px; }
  .wb-site-layout { grid-template-columns: minmax(0, 1fr); }
  .wb-tool-rail { display: none; }
  .wb-page-nav > span { display: none; }
  .wb-page-headline { font-size: 16px; }
  .wb-page-code { padding: 9px 6px; }
  .wb-page-code > span { gap: 3px; font-size: 4px; }
  .wb-page-module { padding: 5px; gap: 3px; font-size: 5px; }
  .wb-page-module .icon { width: 9px; height: 9px; }
  .wb-progress { gap: 4px; }
  .wb-step { gap: 3px; font-size: 7px; }
  .wb-flow { grid-template-columns: minmax(0, 1fr) 17px minmax(0, 1fr) 17px minmax(0, 1fr); }
  .wb-node { min-height: 110px; padding-inline: 6px; }
  .wb-node-copy strong { font-size: 10px; }
  .wb-node > .icon { width: 19px; height: 19px; }
  .wb-node-check { right: 5px; top: 6px; }
  .wb-node-check .icon { width: 10px; height: 10px; }
  .workbench-footer { padding-inline: 14px; }
  .workbench-footer p { font-size: 8px; }
  .workbench-footer p:last-child { display: none; }
}
@media (max-width: 620px) {
  .workbench { height: 350px; width: 100%; }
  .workbench-header { height: 56px; padding: 5px 11px 5px 15px; }
  .workbench-kicker { font-size: 7px; margin-bottom: 4px; }
  .workbench-title { font-size: 12px; }
  .workbench-tabs { height: 44px; padding-inline: 7px; }
  .workbench-tab { font-size: 10px; gap: 6px; }
  .workbench-tab .icon { width: 13px; height: 13px; }
  .workbench-panels { height: 204px; }
  .workbench-panel { padding: 11px 13px; scroll-margin-top: 100px; }
  .workbench-footer { height: 44px; padding-inline: 15px; gap: 8px; }
  .workbench-footer p { font-size: 9px; }
  .workbench-footer p:last-child { font-size: 8px; }
  .wb-site-layout { grid-template-columns: minmax(0, 1fr); }
  .wb-tool-rail { display: none; }
  .wb-site-work { gap: 7px; }
  .wb-browser-toolbar { height: 22px; font-size: 6px; padding-inline: 9px; }
  .wb-page { height: calc(100% - 22px); padding: 9px 11px; gap: 7px; }
  .wb-page-nav { font-size: 6px; }
  .wb-page-nav strong { font-size: 7px; }
  .wb-page-nav > span { font-size: 5px; }
  .wb-page-hero { grid-template-columns: 1.15fr .8fr; gap: 12px; }
  .wb-page-eyebrow { margin-bottom: 5px; font-size: 4px; letter-spacing: .4px; }
  .wb-page-headline { font-size: 16px; line-height: 1.09; letter-spacing: -.6px; }
  .wb-page-link { margin-top: 7px; padding: 5px 7px; gap: 7px; font-size: 5px; }
  .wb-page-link .icon { width: 8px; height: 8px; }
  .wb-page-code { padding: 8px 9px; }
  .wb-page-code > span { margin-bottom: 8px; font-size: 5px; gap: 5px; }
  .wb-page-code .icon { width: 10px; height: 10px; }
  .wb-page-code code { font-size: 6px; line-height: 1.75; }
  .wb-page-modules { gap: 6px; }
  .wb-page-module { min-height: 24px; padding: 5px; gap: 4px; font-size: 5px; }
  .wb-page-module .icon { width: 9px; height: 9px; }
  .wb-progress { min-height: 16px; padding-inline: 1px; }
  .wb-step { font-size: 7px; }
  .wb-step .icon { width: 10px; height: 10px; }
  .wb-bot-layout { grid-template-columns: minmax(0, 1fr); }
  .wb-bot-notes { display: none; }
  .wb-chat-header { min-height: 29px; padding: 4px 9px; gap: 7px; }
  .wb-chat-avatar { width: 21px; height: 21px; border-radius: 5px; }
  .wb-chat-avatar .icon { width: 14px; height: 14px; }
  .wb-chat-header strong { font-size: 9px; }
  .wb-chat-header small { display: none; }
  .wb-chat-messages { gap: 6px; padding: 7px 9px; }
  .wb-message { max-width: 88%; padding: 6px 8px; font-size: 9px; line-height: 1.35; }
  .wb-chat-choices { margin-top: 5px; gap: 4px; }
  .wb-chat-choices span { font-size: 6px; line-height: 1.3; padding: 3px 5px; }
  .wb-message-final strong { font-size: 9px; }
  .wb-message-final strong .icon { width: 10px; height: 10px; }
  .wb-message-final small { font-size: 8px; line-height: 1.4; margin-top: 4px; }
  .wb-typing { left: 9px; bottom: 17px; height: 24px; }
  .wb-integration { gap: 9px; }
  .wb-flow-heading { font-size: 7px; gap: 6px; }
  .wb-flow-heading .icon { width: 12px; height: 12px; }
  .wb-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: 38px 12px 38px 12px 38px; }
  .wb-node { min-height: 0; height: 38px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 5px 10px; }
  .wb-node > .icon { width: 19px; height: 19px; }
  .wb-node-copy { display: flex; align-items: baseline; justify-content: space-between; flex: 1; min-width: 0; gap: 10px; padding-right: 19px; }
  .wb-node-copy strong { font-size: 10px; letter-spacing: 0; }
  .wb-node-copy small { font-size: 8px; margin: 0; line-height: 1.4; }
  .wb-node-check { right: 10px; top: 12px; }
  .wb-node-check .icon { width: 12px; height: 12px; }
  .wb-flow-route { width: 1px; height: 12px; margin-inline: 20px; }
  .wb-flow-route::after { top: 0; left: -2px; }
  .wb-running .wb-flow-route::after { animation-name: wb-packet-y; }
  .wb-flow-summary { padding-top: 7px; }
  .wb-flow-summary p { font-size: 8px; gap: 5px; }
  .wb-flow-summary p .icon { width: 10px; height: 10px; }
  .wb-flow-summary > span { font-size: 6px; }
}
@media (max-width: 360px) {
  .workbench { height: 336px; }
  .workbench-panels { height: 190px; }
  .workbench-panel { padding: 9px 10px; }
  .workbench-tab { font-size: 9px; gap: 5px; padding-inline: 3px; }
  .workbench-tab .icon { width: 12px; height: 12px; }
  .wb-page-headline { font-size: 14px; }
  .wb-page { padding: 8px 9px; gap: 6px; }
  .wb-page-nav > span { font-size: 4px; }
  .wb-page-code { padding: 7px; }
  .wb-page-code > span { font-size: 4px; }
  .wb-message { font-size: 8px; padding: 5px 7px; }
  .wb-message-final strong { font-size: 8px; }
  .wb-message-final small { font-size: 7px; }
  .wb-integration { gap: 7px; }
  .wb-flow { grid-template-rows: 36px 10px 36px 10px 36px; }
  .wb-node { height: 36px; }
  .wb-node-copy small { font-size: 7px; }
  .wb-node-check { top: 11px; }
  .wb-flow-route { height: 10px; }
  .workbench-footer p:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .workbench-panels { scroll-behavior: auto; }
  .workbench *, .workbench *::before, .workbench *::after { animation: none !important; transition: none !important; }
  .workbench .wb-typing { display: none !important; }
  .workbench .wb-flow-route::after { display: none !important; }
}