:root {
  font:100%/1.5 var(--font-sans);
  background:var(--color-kumo-base);
  color:var(--text-color-kumo-default);
  color-scheme:light dark;
  --muted:var(--text-color-kumo-subtle);
  --line:var(--color-kumo-line);
  --orange:var(--color-kumo-brand);
  --panel:var(--color-kumo-control);
  --agent-width:360px;
  --terminal-height:240px;
  --mono:var(--font-mono);
  --shadow:var(--shadow-stack);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,textarea {
  font:inherit;
}
button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--color-kumo-control);
  border:1px solid var(--color-kumo-line);
  color:var(--text-color-kumo-default);
  padding:8px 12px;
  border-radius:7px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  font-size:var(--text-base);
  line-height:var(--text-base--line-height);
  min-height:36px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
button:hover,.button:hover {
  background:var(--color-kumo-tint);
  border-color:var(--color-kumo-fill);
}
button:disabled {
  opacity:.45;
  cursor:wait;
}
button:focus-visible,a:focus-visible,summary:focus-visible,[role=separator]:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px;
}
.primary {
  background:var(--orange);
  border-color:var(--orange);
  color:var(--color-kumo-control);
  font-weight:600;
  box-shadow:0 1px 2px #8a2b151a;
}
.primary:hover {
  background:var(--color-kumo-brand-hover);
  border-color:var(--color-kumo-brand-hover);
}
a {
  color:var(--text-color-kumo-brand);
}
input,textarea {
  font-size:var(--text-lg);
  line-height:var(--text-lg--line-height);
  background:var(--color-kumo-control);
  border:1px solid var(--color-kumo-line);
  border-radius:8px;
  color:var(--text-color-kumo-default);
  padding:12px;
  width:100%;
  outline:none;
}
input:focus,textarea:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-kumo-brand) 7%,transparent);
}
textarea {
  resize:vertical;
}
label {
  display:block;
  color:var(--text-color-kumo-subtle);
  margin-bottom:7px;
}
code,pre,kbd {
  font-family:var(--mono);
}
kbd {
  font-size:var(--text-base);
  color:var(--text-color-kumo-inactive);
  margin-left:6px;
}
button kbd {
  pointer-events:none;
}
.eyebrow {
  font:500 var(--text-base)/1.5 var(--font-sans);
  letter-spacing:normal;
  color:var(--text-color-kumo-inactive);
}
.topbar {
  height:62px;
  display:flex;
  align-items:center;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  gap:32px;
  background:var(--color-kumo-base);
}
.brand {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--orange);
  text-decoration:none;
  font-size:var(--text-xl);
  white-space:nowrap;
}
.brand-mark {
  font-size:var(--text-2xl);
  line-height:1;
}
.brand b {
  color:var(--text-color-kumo-default);
  letter-spacing:-.055em;
  font-size:var(--text-xl);
  font-weight:650;
}
.brand>span:not(.brand-mark) {
  font-size:var(--text-base);
  color:var(--text-color-kumo-subtle);
  margin-left:3px;
}
.host-status {
  color:var(--muted);
  font-size:var(--text-base);
  display:flex;
  gap:8px;
  align-items:center;
  min-width:0;
}
#status {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot {
  width:6px;
  height:6px;
  display:inline-block;
  background:#eb9a51;
  border-radius:50%;
  flex-shrink:0;
}
.dot.ready {
  background:var(--text-color-kumo-success);
  box-shadow:0 0 0 3px #4c9b7510;
}
.actions {
  margin-left:auto;
  display:flex;
  gap:8px;
}
.actions button,.actions a {
  font-size:var(--text-base);
  background:transparent;
}
#mobileGuideButton {
  display:none;
}
.actions #keepButton {
  border-color:transparent;
}
.app-shell {
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  height:calc(100dvh - 62px);
  min-height:550px;
}
.sidebar {
  display:flex;
  flex-direction:column;
  padding:27px 12px 20px;
  border-right:1px solid var(--line);
  background:var(--color-kumo-elevated);
  min-height:0;
}
.sidebar-label {
  display:flex;
  justify-content:space-between;
  margin:0 12px 17px;
  font:500 var(--text-base)/1.5 var(--font-sans);
  letter-spacing:normal;
  color:var(--text-color-kumo-inactive);
}
.sidebar-label>span {
  color:var(--text-color-kumo-inactive);
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sidebar nav button {
  position:relative;
  justify-content:flex-start;
  gap:11px;
  padding:13px 11px;
  border:1px solid transparent;
  background:none;
  white-space:normal;
  text-align:left;
  border-radius:9px;
  color:var(--text-color-kumo-subtle);
  font-size:var(--text-base);
  line-height:1.4;
  min-height:60px;
}
.sidebar nav button:hover {
  background:var(--color-kumo-tint);
}
.sidebar nav button.active {
  background:var(--color-kumo-control);
  border-color:var(--color-kumo-line);
  color:var(--text-color-kumo-default);
  box-shadow:0 2px 4px #3e2f1606;
}
.sidebar nav button.active:before {
  content:'';
  position:absolute;
  width:3px;
  background:var(--orange);
  height:20px;
  left:-13px;
  border-radius:0 3px 3px 0;
}
.topic-number {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--color-kumo-line);
  border-radius:7px;
  width:36px;
  height:36px;
  flex-shrink:0;
  color:var(--text-color-kumo-inactive);
  font:var(--text-base) var(--mono);
}
.active .topic-number {
  background:var(--color-selection-bg);
  border-color:color-mix(in srgb,var(--color-kumo-brand) 18%,transparent);
  color:var(--color-kumo-brand);
}
.topic-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.topic-copy b {
  font-size:var(--text-base);
  font-weight:550;
}
.topic-copy small {
  font-size:var(--text-base);
  color:var(--text-color-kumo-inactive);
}
.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:16px 5px 0;
}
.sidebar-bottom button {
  border:0;
  background:none;
  width:100%;
  justify-content:flex-start;
  font-size:var(--text-base);
  padding:6px;
  color:var(--text-color-kumo-subtle);
}
.end-arrow {
  margin-left:auto;
}
.workspace {
  padding:0 22px 20px;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--color-kumo-elevated);
}
.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:109px;
  flex-shrink:0;
}
.heading-copy {
  min-width:0;
}
.workspace-heading h1 {
  font-size:var(--text-xl);
  line-height:1.35;
  letter-spacing:-.035em;
  margin:0;
  font-weight:500;
  text-wrap:balance;
}
.build-actions {
  display:flex;
  gap:7px;
  flex-shrink:0;
}
.build-actions button {
  font-size:var(--text-base);
  padding:8px 11px;
  box-shadow:0 1px 2px #32260d04;
}
.workbench {
  display:grid;
  grid-template-columns:var(--agent-width) 14px minmax(0,1fr);
  flex:1;
  min-height:0;
  isolation:isolate;
}
.agent-panel {
  grid-column:1;
  display:flex;
  flex-direction:column;
  background:var(--color-kumo-base);
  border:1px solid var(--color-kumo-line);
  border-radius:12px;
  min-width:0;
  min-height:0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-title {
  height:51px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  border-bottom:1px solid var(--line);
  gap:8px;
  flex-shrink:0;
}
.panel-name {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.panel-name b {
  font-size:var(--text-base);
  font-weight:550;
  white-space:nowrap;
}
.agent-symbol {
  color:var(--orange);
  font-size:var(--text-xl);
  line-height:1;
}
.service-badge {
  font:var(--text-base) var(--mono);
  background:var(--color-kumo-tint);
  border:1px solid var(--color-kumo-line);
  color:var(--text-color-kumo-inactive);
  border-radius:4px;
  padding:3px 5px;
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation {
  overflow-y:auto;
  flex:1;
  padding:21px 20px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--color-kumo-fill) transparent;
}
.welcome {
  padding:clamp(16px,4vh,48px) 0 24px;
}
.welcome .welcome-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:var(--color-selection-bg);
  border:1px solid color-mix(in srgb,var(--color-kumo-brand) 18%,transparent);
  color:var(--orange);
  border-radius:12px;
  font-size:var(--text-2xl);
  margin-bottom:18px;
}
.welcome h2 {
  font-size:var(--text-2xl);
  line-height:1.2;
  font-weight:500;
  margin:0 0 14px;
  letter-spacing:-.045em;
  max-width:240px;
}
.welcome p {
  color:var(--text-color-kumo-subtle);
  font-size:var(--text-lg);
  line-height:1.85;
  margin:0 0 20px;
}
.welcome button {
  font-size:var(--text-base);
  text-align:left;
  justify-content:flex-start;
  white-space:normal;
}
.composer {
  margin:0 12px 12px;
  padding:12px;
  background:var(--color-kumo-control);
  border:1px solid var(--color-kumo-line);
  border-radius:11px;
  box-shadow:0 2px 4px #30241704,0 5px 20px #30241703;
}
.composer:focus-within {
  border-color:color-mix(in srgb,var(--color-kumo-brand) 18%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-kumo-brand) 7%,transparent);
}
.composer textarea {
  border:0;
  background:none;
  padding:2px;
  min-height:82px;
  font-size:var(--text-lg);
  line-height:1.7;
  resize:vertical;
  max-height:28vh;
  box-shadow:none;
}
.composer textarea::placeholder {
  color:var(--text-color-kumo-inactive);
}
.composer-footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}
.composer button {
  font-size:var(--text-base);
  padding:6px 12px;
}
.reasoning {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-base);
  color:var(--text-color-kumo-inactive);
  margin:8px 0 0;
  cursor:pointer;
}
.reasoning input {
  width:16px;
  height:16px;
  padding:0;
  accent-color:var(--orange);
}
.message {
  padding:14px 0;
  overflow-wrap:anywhere;
  font-size:var(--text-base);
  white-space:pre-wrap;
}
.message.user {
  font-size:var(--text-lg);
  background:var(--color-kumo-tint);
  border:1px solid var(--color-kumo-line);
  padding:12px 14px;
  border-radius:10px;
  margin:12px 0;
  color:var(--text-color-kumo-default);
  line-height:1.8;
}
.message.assistant {
  font-size:var(--text-lg);
  line-height:1.9;
  color:var(--text-color-kumo-default);
}
.message.status,.message.thinking {
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--text-color-kumo-inactive);
  padding:7px 0;
}
.message.tool,.message.command {
  font:var(--text-base)/1.8 var(--mono);
  color:var(--text-color-kumo-subtle);
  border:1px solid var(--color-kumo-line);
  border-radius:6px;
  padding:8px 10px;
  background:var(--color-kumo-elevated);
  margin-top:8px;
}
.message summary {
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.message summary:before {
  content:'›';
  display:inline-block;
  margin-right:7px;
  transition:transform .15s;
}
.message[open] summary:before {
  transform:rotate(90deg);
}
.message summary::marker {
  content:'';
}
.message pre {
  font:var(--text-base)/1.8 var(--mono);
  white-space:pre-wrap;
  margin:9px 0 2px;
  max-height:240px;
  overflow:auto;
}
.message.stdout,.message.stderr {
  font:var(--text-base)/1.7 var(--mono);
  background:var(--color-kumo-elevated);
  color:var(--text-color-kumo-success);
  padding:8px 10px;
  border-radius:6px;
  margin:5px 0;
}
.message.stderr {
  color:var(--text-color-kumo-subtle);
}
.message.error,.message.tool_error {
  color:var(--text-color-kumo-danger);
  border-left:2px solid var(--text-color-kumo-danger);
  padding-left:10px;
}
.message.exit {
  font:var(--text-base) var(--mono);
  color:var(--text-color-kumo-success);
  padding:8px 0;
}
.message.file {
  color:var(--text-color-kumo-success);
  font:var(--text-base)/1.6 var(--mono);
}
.message.deployment a {
  font-size:var(--text-base);
  line-height:1.8;
}
.resize-handle {
  position:relative;
  touch-action:none;
  z-index:4;
}
.agent-resize {
  grid-column:2;
  cursor:col-resize;
}
.agent-resize:after {
  content:'';
  position:absolute;
  left:6px;
  top:45%;
  width:2px;
  height:34px;
  background:var(--color-kumo-fill);
  border-radius:2px;
  opacity:0;
  transition:opacity .15s;
}
.agent-resize:hover:after,.agent-resize:focus-visible:after {
  opacity:1;
}
.workspace-surface {
  grid-column:3;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  border:1px solid var(--color-kumo-line);
  border-radius:12px;
  background:var(--color-kumo-control);
  box-shadow:0 1px 3px #30241705,0 16px 45px #3024170b;
  overflow:hidden;
}
.surface-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:51px;
  min-height:51px;
  padding:0 12px;
  background:var(--color-kumo-base);
  border-bottom:1px solid var(--color-kumo-line);
}
.view-tabs {
  display:flex;
  align-items:center;
  gap:3px;
  height:100%;
}
.view-tabs button {
  position:relative;
  height:34px;
  padding:6px 11px;
  border:0;
  background:transparent;
  color:var(--text-color-kumo-inactive);
  font-size:var(--text-base);
  gap:7px;
}
.view-tabs button[aria-selected=true] {
  background:var(--color-kumo-tint);
  color:var(--text-color-kumo-default);
  box-shadow:0 1px 2px #30241705;
}
.view-tabs button:hover {
  background:var(--color-kumo-tint);
  color:var(--text-color-kumo-default);
}
.mobile-agent-tab {
  display:none!important;
}
.surface-actions {
  display:flex;
  gap:3px;
}
.surface-actions button {
  border:0;
  background:none;
  padding:7px 9px;
  font-size:var(--text-base);
  color:var(--text-color-kumo-subtle);
}
.surface-actions button:hover,.surface-actions button[aria-expanded=true],.surface-actions button[aria-pressed=true] {
  background:var(--color-kumo-tint);
  color:var(--text-color-kumo-default);
}
#focusButton {
  gap:5px;
}
.surface-content {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  min-width:0;
  position:relative;
  background:var(--color-kumo-control);
}
.editor-panel {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  min-height:0;
  background:var(--editor-bg);
  color:var(--editor-fg);
}
.file-toolbar {
  height:48px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:0 10px;
  border-bottom:1px solid var(--editor-line);
  flex-shrink:0;
  background:var(--editor-panel);
  min-width:0;
}
.file-toolbar button {
  border:0;
  background:none;
  font-size:var(--text-base);
  color:var(--editor-muted);
  padding:4px 6px;
}
.file-toolbar button:hover {
  background:var(--color-kumo-fill-hover);
  color:var(--editor-fg);
}
.file-toolbar kbd {
  font-size:var(--text-base);
  color:var(--editor-muted);
}
.file-path {
  display:flex;
  gap:0;
  align-items:center;
  font:var(--text-base) var(--mono);
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.file-path>span:first-child {
  color:var(--editor-muted);
}
.file-path b {
  color:var(--editor-fg);
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
}
.file-path #unsavedDot {
  color:var(--text-color-kumo-brand);
  margin-left:7px;
  font-size:var(--text-base);
}
.file-actions {
  display:flex;
  gap:5px;
  margin-left:auto;
  flex-shrink:0;
}
.editor-body {
  display:flex;
  flex:1;
  min-height:0;
  position:relative;
}
#fileTree {
  width:182px;
  flex-shrink:0;
  border-right:1px solid var(--editor-line);
  overflow:auto;
  padding:12px 0;
  background:var(--editor-panel);
  scrollbar-width:thin;
  scrollbar-color:var(--color-kumo-fill-hover) transparent;
}
#fileTree button {
  display:block;
  width:100%;
  text-align:left;
  border:0;
  border-radius:0;
  background:transparent;
  padding:5px 12px;
  color:var(--editor-muted);
  font:var(--text-base)/1.7 var(--mono);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#fileTree button.active {
  background:var(--color-selection-bg);
  color:var(--text-color-kumo-brand);
  box-shadow:2px 0 var(--text-color-kumo-brand) inset;
}
#fileTree button:hover {
  background:var(--color-kumo-fill-hover);
}
#fileTree details summary {
  cursor:pointer;
  color:var(--editor-muted);
  font:var(--text-base) var(--mono);
  padding:8px 12px;
  letter-spacing:.01em;
  list-style:none;
}
#fileTree details summary:before {
  content:'›';
  display:inline-block;
  margin-right:8px;
}
#fileTree details[open] summary:before {
  transform:rotate(90deg);
}
#fileTree details summary::-webkit-details-marker {
  display:none;
}
#fileTree details button {
  padding-left:29px;
}
#editor {
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.cm-editor {
  height:100%;
  font:var(--text-base)/1.8 var(--mono);
  background:var(--editor-bg);
}
.cm-editor .cm-scroller {
  overflow:auto;
}
.cm-editor .cm-gutters {
  background:var(--editor-bg);
  color:var(--editor-muted);
  border-right:0;
  padding-left:5px;
}
.cm-editor .cm-content {
  padding-top:14px;
}
.cm-editor.cm-focused {
  outline:0;
}
.cm-editor .cm-activeLine {
  background:color-mix(in srgb,var(--color-kumo-base) 8%,transparent);
}
.cm-editor .cm-activeLineGutter {
  background:color-mix(in srgb,var(--color-kumo-base) 8%,transparent);
}
.editor-status {
  height:36px;
  border-top:1px solid var(--editor-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  color:var(--editor-muted);
  font:var(--text-base) var(--mono);
  flex-shrink:0;
}
.editor-status>span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.editor-status button {
  padding:0;
  border:0;
  background:none;
  font-size:var(--text-base);
  color:var(--editor-muted);
  flex-shrink:0;
}
.preview-panel {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.app-address {
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 15px;
  background:var(--color-kumo-elevated);
  color:var(--text-color-kumo-inactive);
  font-size:var(--text-base);
  flex-shrink:0;
}
.address-dot {
  width:5px;
  height:5px;
  background:var(--text-color-kumo-success);
  border-radius:50%;
}
.app-address>a {
  margin-left:auto;
  font-size:var(--text-base);
  text-decoration:none;
}
.app-ready {
  height:5px;
  width:5px;
  background:var(--text-color-kumo-success);
  border-radius:50%;
  display:inline-block;
}
.preview-empty {
  flex:1;
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--color-kumo-brand) 7%,transparent),transparent 70%);
}
.preview-empty .large-symbol {
  font-size:var(--text-3xl);
  color:var(--orange);
  width:62px;
  height:62px;
  border:1px solid color-mix(in srgb,var(--color-kumo-brand) 18%,transparent);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-selection-bg);
  margin-bottom:22px;
  box-shadow:0 7px 20px #e7c3a528;
}
.preview-empty .eyebrow {
  font-size:var(--text-base);
  color:var(--text-color-kumo-inactive);
}
.preview-empty h2 {
  font-size:var(--text-2xl);
  font-weight:450;
  letter-spacing:-.035em;
  margin:12px 0;
}
.preview-empty p {
  max-width:340px;
  color:var(--text-color-kumo-subtle);
  font-size:var(--text-lg);
  line-height:1.9;
  margin:0 0 20px;
}
.preview-empty button {
  font-size:var(--text-base);
}
.preview-empty .preview-hint {
  font-size:var(--text-base);
  color:var(--text-color-kumo-inactive);
  margin:20px 0 0;
  line-height:2;
}
.preview-empty code {
  font-size:var(--text-base);
  color:var(--text-color-kumo-subtle);
}
#preview {
  width:100%;
  border:0;
  flex:1;
  background:var(--color-kumo-control);
  min-height:0;
}
.preview-footer {
  height:36px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  font:var(--text-base) var(--mono);
  color:var(--text-color-kumo-inactive);
  flex-shrink:0;
}
.preview-footer button {
  border:0;
  padding:0;
  background:none;
  font-size:var(--text-base);
  color:var(--text-color-kumo-subtle);
}
.terminal-panel {
  position:relative;
  display:flex;
  flex-direction:column;
  height:var(--terminal-height);
  max-height:70%;
  min-height:160px;
  flex-shrink:0;
  background:var(--editor-bg);
  color:var(--editor-fg);
  box-shadow:0 -5px 22px #00000010;
  z-index:2;
  border-top:1px solid var(--editor-line);
}
.terminal-resize {
  position:absolute;
  top:-4px;
  left:0;
  right:0;
  height:8px;
  cursor:row-resize;
}
.terminal-resize:after {
  content:'';
  position:absolute;
  top:3px;
  left:calc(50% - 17px);
  height:2px;
  width:34px;
  background:var(--editor-muted);
  border-radius:3px;
  opacity:0;
}
.terminal-resize:hover:after,.terminal-resize:focus-visible:after {
  opacity:1;
}
.terminal-title {
  height:44px;
  background:var(--editor-panel);
  border-bottom:1px solid var(--editor-line);
  padding:0 14px;
}
.terminal-title .panel-name {
  gap:8px;
}
.terminal-title .panel-name>span {
  color:var(--text-color-kumo-brand);
}
.terminal-title b {
  font-size:var(--text-base);
  font-weight:500;
}
.terminal-title small {
  font:var(--text-base) var(--mono);
  color:var(--editor-muted);
  margin-left:6px;
}
.terminal-title button {
  font:var(--text-base) var(--font-sans);
  padding:3px 7px;
  border:0;
  background:none;
  color:var(--editor-muted);
}
.terminal-title button:hover {
  background:var(--color-kumo-fill-hover);
  color:var(--editor-fg);
}
#closeTerminal {
  font-size:var(--text-xl);
  line-height:1;
  margin-left:5px;
}
#terminal {
  flex:1;
  min-height:0;
  background:var(--editor-bg);
  padding:11px 8px 3px 14px;
  overflow:hidden;
}
.workbench[data-terminal=closed] .terminal-panel {
  display:none;
}
.focus-mode .app-shell {
  grid-template-columns:minmax(0,1fr);
}
.focus-mode .sidebar,.focus-mode .agent-panel,.focus-mode .agent-resize {
  display:none;
}
.focus-mode .workbench {
  grid-template-columns:minmax(0,1fr);
}
.focus-mode .workspace-surface {
  grid-column:1;
}
.is-resizing,.is-resizing * {
  user-select:none!important;
}
.is-resizing iframe {
  pointer-events:none;
}
.files-hidden #fileTree {
  display:none;
}
dialog {
  color:var(--text-color-kumo-default);
  background:var(--color-kumo-base);
  border:1px solid var(--color-kumo-line);
  border-radius:16px;
  max-width:760px;
  width:90vw;
  padding:34px;
  max-height:85dvh;
  box-shadow:0 25px 100px #38291b22;
}
dialog::backdrop {
  background:#342a2033;
  backdrop-filter:blur(6px);
}
dialog h2 {
  font-size:var(--text-2xl);
  letter-spacing:-.04em;
  font-weight:500;
  line-height:1.25;
}
dialog p {
  color:var(--text-color-kumo-subtle);
  line-height:1.8;
  font-size:var(--text-lg);
}
dialog pre {
  white-space:pre-wrap;
  font-size:var(--text-base);
  line-height:1.9;
  color:var(--editor-muted);
  background:var(--editor-bg);
  padding:22px;
  border-radius:9px;
  max-height:40vh;
  overflow:auto;
}
dialog .close {
  float:right;
  border:0;
  background:none;
  font-size:var(--text-2xl);
  padding:0;
  color:var(--text-color-kumo-subtle);
}
dialog label {
  font-size:var(--text-base);
}
dialog textarea {
  font:var(--text-base)/1.7 var(--mono);
}
dialog .button {
  display:inline-flex;
}
#toast {
  position:fixed;
  bottom:55px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(650px,90vw);
  background:var(--color-kumo-elevated);
  color:var(--text-color-kumo-subtle);
  border:1px solid var(--color-kumo-line);
  border-radius:10px;
  padding:13px 20px;
  box-shadow:0 10px 40px #46322019;
  z-index:20;
  font-size:var(--text-base);
}
.sr-only {
  position:absolute;
  clip:rect(0,0,0,0);
  width:1px;
  height:1px;
  overflow:hidden;
}
[hidden] {
  display:none!important;
}
@media(min-width:1700px) {
  .workspace {
    padding:0 30px 20px;
  }
  .workspace-heading {
    height:116px;
  }
  .workbench {
    --agent-width:390px;
  }
  .workspace-heading h1 {
    font-size:var(--text-xl);
  }
  .conversation {
    padding:22px 24px;
  }
}
@media(max-width:1250px) {
  .app-shell {
    grid-template-columns:76px minmax(0,1fr);
  }
  .sidebar {
    padding-left:10px;
    padding-right:10px;
  }
  .sidebar-label {
    font-size:0;
    justify-content:center;
    margin:0 0 14px;
  }
  .sidebar-label>span {
    font-size:var(--text-base);
  }
  .sidebar nav button {
    padding:12px 0;
    justify-content:center;
    min-height:58px;
  }
  .topic-copy {
    display:none;
  }
  .sidebar nav button.active:before {
    left:-11px;
  }
  .sidebar-bottom {
    margin-top:auto;
    padding:16px 0 0;
  }
  .sidebar-bottom button {
    font-size:0;
    justify-content:center;
  }
  .sidebar-bottom button>span:first-child {
    font-size:var(--text-xl);
  }
  .sidebar-bottom .end-arrow {
    display:none;
  }
  .workspace {
    padding:0 18px 18px;
  }
  .workbench {
    --agent-width:320px;
  }
  .workspace-heading h1 {
    font-size:var(--text-xl);
  }
  .build-actions button {
    font-size:var(--text-base);
    padding:8px;
  }
  .topbar {
    gap:24px;
  }
  .file-path>span:first-child {
    display:none;
  }
  #fileTree {
    width:155px;
  }
  .surface-toolbar {
    padding:0 9px;
  }
  .surface-actions button {
    padding:7px;
  }
  .view-tabs button {
    padding:6px 9px;
  }
  .focus-label {
    display:none;
  }
}
@media(max-width:1100px) {
  .workspace-heading {height:auto;min-height:144px;align-items:flex-start;justify-content:center;flex-direction:column;padding:18px 0;gap:12px}
}
@media(max-width:960px) {
  .topbar .brand>span:not(.brand-mark) {
    display:none;
  }
  .host-status {
    font-size:var(--text-base);
  }
  .workspace-heading {
    height:112px;
    gap:15px;
  }
  .workspace-heading h1 {
    font-size:var(--text-xl);
  }
  .build-actions {
    gap:5px;
  }
  .build-actions button {
    font-size:var(--text-base);
  }
  .workbench {
    --agent-width:285px;
    grid-template-columns:var(--agent-width) 10px minmax(0,1fr);
  }
  .conversation {
    padding:15px;
  }
  .panel-title {
    padding:0 13px;
  }
  .service-badge {
    max-width:110px;
    font-size:var(--text-base);
  }
  .surface-toolbar {
    gap:3px;
  }
  .view-tabs button {
    font-size:var(--text-base);
    padding:5px 7px;
  }
  .surface-actions button {
    font-size:var(--text-base);
    padding:6px;
  }
  .file-actions kbd {
    display:none;
  }
  #fileTree {
    width:137px;
  }
  #fileTree button {
    font-size:var(--text-base);
  }
  .file-path {
    font-size:var(--text-base);
  }
  .file-toolbar {
    gap:7px;
  }
  .terminal-title small {
    display:none;
  }
  .cm-editor {
    font-size:var(--text-base);
  }
}
@media(max-width:760px) {
  .surface-actions #focusButton {
    display:none;
  }
  .topbar {
    height:55px;
    padding:0 15px;
    gap:12px;
  }
  .brand b {
    font-size:var(--text-xl);
  }
  .host-status {
    margin-left:auto;
    max-width:120px;
    font-size:var(--text-base);
    line-height:1.4;
  }
  .actions {
    margin-left:0;
  }
  .actions button {
    font-size:var(--text-base);
    padding:6px 8px;
  }
  .actions .source-download {
    display:none;
  }
  .actions {
    gap:3px;
  }
  .actions #mobileGuideButton {
    display:inline-flex;
  }
  .host-status {
    max-width:80px;
  }
  .app-shell {
    height:calc(100dvh - 55px);
    min-height:480px;
    display:flex;
    flex-direction:column;
  }
  .sidebar {
    padding:7px 12px;
    border-right:0;
    border-bottom:1px solid var(--line);
    flex-direction:row;
    align-items:center;
    gap:7px;
    background:var(--color-kumo-base);
  }
  .sidebar-label,.sidebar-bottom {
    display:none;
  }
  .sidebar nav {
    flex:1;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  .sidebar nav button {
    min-height:32px;
    padding:6px;
    gap:5px;
    font-size:var(--text-base);
    white-space:nowrap;
    justify-content:center;
    border-radius:6px;
  }
  .sidebar nav button.active:before {
    display:none;
  }
  .topic-number {
    border:0;
    border-radius:0;
    background:transparent!important;
    width:auto;
    height:auto;
    font-size:var(--text-base);
  }
  .topic-copy {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topic-copy b {
    font-size:var(--text-base);
    font-weight:500;
  }
  .topic-copy small {
    display:none;
  }
  .workspace {
    padding:0 12px 12px;
    flex:1;
    min-height:0;
  }
  .workspace-heading {
    height:108px;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    padding:11px 0;
  }
  .workspace-heading h1 {
    font-size:var(--text-xl);
    margin:0;
    line-height:1.35;
    white-space:normal;
    text-wrap:pretty;
  }
  .build-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .build-actions button {
    font-size:var(--text-base);
    padding:5px 9px;
  }
  .build-actions #deployButton {
    margin-left:0;
  }
  .workbench {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:52px minmax(0,1fr);
    border:1px solid var(--color-kumo-line);
    border-radius:11px;
    background:var(--color-kumo-base);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .agent-panel {
    grid-column:1;
    grid-row:2;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .agent-title {
    display:none;
  }
  .agent-resize {
    display:none;
  }
  .workspace-surface {
    display:contents;
  }
  .surface-toolbar {
    grid-row:1;
    grid-column:1;
    padding:0 8px;
    height:52px;
    min-height:52px;
    z-index:3;
  }
  .mobile-agent-tab {
    display:inline-flex!important;
  }
  .view-tabs {
    gap:2px;
  }
  .view-tabs button {
    font-size:var(--text-base);
    padding:5px 9px;
    gap:5px;
    height:30px;
  }
  .view-tabs #appTab span:first-of-type {
    font-size:0;
  }
  .view-tabs #appTab span:first-of-type:after {
    content:'App';
    font-size:var(--text-base);
  }
  .surface-actions button {
    font-size:var(--text-base);
    padding:6px;
    gap:4px;
  }
  .surface-actions #terminalButton[aria-expanded=true] {
    background:transparent;
    color:var(--text-color-kumo-subtle);
  }
  .surface-actions #terminalButton[aria-pressed=true] {
    background:var(--color-kumo-tint);
    color:var(--text-color-kumo-default);
  }
  .surface-content {
    grid-row:2;
    grid-column:1;
    min-height:0;
  }
  .workbench[data-view=agent] .surface-content {
    display:none;
  }
  .workbench:not([data-view=agent]) .agent-panel {
    display:none;
  }
  .workbench:not([data-view=terminal]) .terminal-panel {
    display:none;
  }
  .workbench[data-view=terminal] .terminal-panel {
    display:flex;
    height:100%;
    max-height:none;
    flex:1;
    border-top:0;
    min-height:0;
  }
  .workbench[data-view=terminal] .editor-panel,.workbench[data-view=terminal] .preview-panel {
    display:none;
  }
  .terminal-resize {
    display:none;
  }
  .terminal-title {
    height:44px;
  }
  .terminal-title small {
    display:block;
  }
  .terminal-title #closeTerminal {
    display:none;
  }
  .conversation {
    padding:16px 20px;
  }
  .composer {
    margin:0 11px 11px;
  }
  .composer textarea {
    min-height:67px;
    max-height:20vh;
  }
  .composer-footer {
    margin-top:6px;
  }
  .welcome {
    padding:14px 0 20px;
  }
  .welcome h2 {
    font-size:var(--text-2xl);
    max-width:none;
  }
  .welcome p {
    font-size:var(--text-lg);
    max-width:400px;
  }
  .welcome .welcome-icon {
    width:35px;
    height:35px;
    font-size:var(--text-xl);
    margin-bottom:13px;
  }
  .message {
    font-size:var(--text-base);
  }
  .file-toolbar {
    height:48px;
    padding:0 7px;
    gap:7px;
  }
  .file-toolbar button {
    font-size:var(--text-base);
    padding:4px;
  }
  .file-path {
    font-size:var(--text-base);
  }
  .file-actions {
    gap:1px;
  }
  .file-toolbar #toggleFiles>span {
    display:none;
  }
  #fileTree {
    width:126px;
  }
  #fileTree button {
    font-size:var(--text-base);
    padding-left:9px;
  }
  #fileTree details summary {
    padding-left:9px;
  }
  #fileTree details button {
    padding-left:22px;
  }
  .cm-editor {
    font-size:var(--text-base);
  }
  .editor-status {
    font-size:var(--text-base);
    padding:0 8px;
  }
  .editor-status button {
    font-size:var(--text-base);
  }
  .preview-empty {
    padding:20px;
  }
  .preview-empty h2 {
    font-size:var(--text-xl);
  }
  .preview-empty p {
    font-size:var(--text-lg);
  }
  .preview-empty .large-symbol {
    margin-bottom:16px;
  }
  .app-address {
    font-size:var(--text-base);
    padding:0 11px;
  }
  .app-address>a {
    font-size:var(--text-base);
  }
  .focus-mode .sidebar {
    display:flex;
  }
  .focus-mode .agent-panel {
    display:flex;
  }
  .focus-mode .workbench {
    grid-template-columns:minmax(0,1fr);
  }
  dialog {
    padding:24px;
  }
  dialog h2 {
    font-size:var(--text-2xl);
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* Cloudflare OS shell: semantic surfaces, compact typography, themed code. */
:root {
  --editor-bg:#fffdfb;--editor-fg:#1f1d1a;--editor-panel:#faf6f1;
  --editor-line:#dedee3;--editor-muted:#65616b;
  -webkit-font-smoothing:antialiased;
}
[data-mode=dark] {
  color-scheme:dark;
  --editor-bg:#16151f;--editor-fg:#e8e6f0;--editor-panel:#1d1c29;
  --editor-line:#2a263b;--editor-muted:#b9b5c8;
}
:root[data-mode=light] {color-scheme:light}
button,.button {transition:background .15s,border-color .15s,color .15s,box-shadow .2s,transform .2s var(--ease-out-strong)}
button:active:not(:disabled),.button:active {transform:scale(.97)}
button:disabled {cursor:default}
.primary {color:#fff;box-shadow:0 1px 2px #00000012}
a {color:var(--text-color-kumo-link)}
input:focus,textarea:focus {box-shadow:0 0 0 3px var(--color-selection-bg)}
.topbar {background:var(--color-kumo-base);gap:24px;backdrop-filter:blur(12px)}
.brand b {font-weight:600;letter-spacing:-.045em}
.sidebar {background:var(--color-kumo-base)}
.sidebar nav button {transition:background .15s,color .15s,box-shadow .2s,transform .2s var(--ease-out-strong)}
.sidebar nav button.active {background:var(--color-kumo-tint);border-color:var(--color-kumo-line);box-shadow:inset 0 1px 0 var(--color-kumo-control)}
.sidebar nav button.active:before {animation:rail-in .25s var(--ease-out-strong)}
.topic-number {border:0;background:var(--color-kumo-tint);font:500 var(--text-base) var(--font-sans)}
.active .topic-number {background:var(--color-selection-bg);color:var(--text-color-kumo-brand)}
.workspace {background:var(--color-kumo-elevated)}
.workspace-heading {height:96px}
.workspace-heading h1 {font-weight:500;letter-spacing:-.035em}
.workbench-stack {position:relative;display:flex;flex:1;min-height:0;min-width:0}
.workbench {width:100%}
.agent-panel,.workspace-surface {background:var(--color-kumo-base);border-color:var(--color-kumo-line);box-shadow:var(--shadow-stack);border-radius:12px}
.agent-title {position:relative;background:var(--color-kumo-base)}
.agent-title:after {content:'';position:absolute;height:2px;bottom:-1px;left:0;width:32%;background:var(--color-kumo-brand);opacity:0;transform:scaleX(0)}
[data-agent-busy=true] .agent-title:after {opacity:1;animation:thinking 1.5s ease-in-out infinite}
[data-agent-busy=true] .agent-symbol {animation:agent-turn 6s linear infinite}
.service-badge {background:var(--color-kumo-tint);color:var(--text-color-kumo-subtle);border-color:var(--color-kumo-line);font:var(--text-base) var(--font-sans)}
.conversation {scrollbar-color:var(--color-kumo-fill) transparent}
.welcome h2 {font-weight:500}
.welcome p,.preview-empty p {color:var(--text-color-kumo-subtle)}
.welcome .welcome-icon,.preview-empty .large-symbol {background:var(--color-kumo-tint);border-color:var(--color-kumo-line);color:var(--text-color-kumo-default);box-shadow:var(--shadow-stack)}
.composer {background:var(--color-kumo-base);border-color:var(--color-kumo-line);border-radius:16px;box-shadow:var(--shadow-stack);transition:border-color .2s,box-shadow .2s}
.composer:focus-within {border-color:var(--color-kumo-brand);box-shadow:var(--shadow-stack),0 0 0 3px var(--color-selection-bg)}
.composer textarea::placeholder {color:var(--text-color-kumo-inactive)}
.message.user {background:var(--color-kumo-bubble-user);border:0;border-radius:14px;box-shadow:inset 0 1px 0 var(--color-kumo-line);color:var(--text-color-kumo-default)}
.message.assistant {color:var(--text-color-kumo-default)}
.message.tool,.message.command,.message.stdout,.message.stderr {border-color:var(--color-kumo-line);background:var(--color-kumo-tint);color:var(--text-color-kumo-subtle)}
.message.stderr,.message.exit.failed {color:var(--text-color-kumo-danger)}
.message.exit {color:var(--text-color-kumo-subtle)}
.message summary:before,#fileTree summary:before {transition:transform .18s var(--ease-out-strong)}
.message[open] pre {animation:content-in .2s var(--ease-out-strong)}
.surface-toolbar {background:var(--color-kumo-base);border-color:var(--color-kumo-line)}
.view-tabs {position:relative;gap:6px}
.view-tabs button {height:100%;border-radius:0;color:var(--text-color-kumo-subtle);letter-spacing:-.25px}
.view-tabs button[aria-selected=true] {background:transparent;color:var(--text-color-kumo-default);box-shadow:none;font-weight:500}
.view-tabs button:hover {background:transparent;color:var(--text-color-kumo-default)}
.tab-indicator {position:absolute;bottom:0;left:0;height:2px;border-radius:2px;background:color-mix(in srgb,var(--text-color-kumo-default) 70%,transparent);transition:width .22s var(--ease-out-strong),transform .22s var(--ease-out-strong),opacity .15s;pointer-events:none}
.surface-actions button:hover,.surface-actions button[aria-expanded=true],.surface-actions button[aria-pressed=true] {background:var(--color-kumo-tint);color:var(--text-color-kumo-default)}
.cm-editor .cm-scroller {font-family:var(--font-mono);line-height:1.5}
.cm-editor .cm-gutters {background:var(--editor-bg);color:var(--editor-muted)}
.cm-editor .cm-content {padding-top:12px}
#fileTree {background:var(--editor-bg);border-color:var(--editor-line);scrollbar-color:var(--color-kumo-fill) transparent}
#fileTree button {color:var(--editor-muted);transition:background .12s,color .12s}
#fileTree button.active {background:var(--color-kumo-tint);color:var(--text-color-kumo-default);box-shadow:2px 0 var(--color-kumo-brand) inset}
#fileTree button:hover,.file-toolbar button:hover {background:var(--color-kumo-tint);color:var(--text-color-kumo-default)}
.file-path b {color:var(--editor-fg)}
.app-address,.preview-footer {background:var(--color-kumo-base);color:var(--text-color-kumo-subtle)}
.preview-empty {background:var(--color-kumo-base)}
.terminal-panel {background:var(--editor-bg);color:var(--editor-fg);border-color:var(--editor-line);box-shadow:0 -4px 16px #00000005}
.terminal-title {background:var(--editor-panel);border-color:var(--editor-line)}
.terminal-title button,.terminal-title .panel-name>span {color:var(--editor-muted)}
.terminal-title button:hover {background:var(--color-kumo-tint);color:var(--text-color-kumo-default)}
#terminal {background:var(--editor-bg)}
.icon {width:16px;height:16px;flex-shrink:0;vertical-align:middle;display:inline-block}
.actions .icon-button {width:32px;height:32px;padding:6px;border:0;color:var(--text-color-kumo-subtle)}
#labButton {background:var(--color-kumo-control);border-color:var(--color-kumo-line);font-weight:500}
#labButton[aria-expanded=true] {background:var(--color-kumo-tint)}
#labButton>.icon:last-child {width:12px;transition:transform .2s var(--ease-out-strong)}
#labButton[aria-expanded=true]>.icon:last-child {transform:rotate(180deg)}
.lab-menu {position:fixed;inset:54px 20px auto auto;margin:0;width:360px;max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--color-kumo-line);border-radius:12px;background:var(--color-kumo-overlay);color:var(--text-color-kumo-default);box-shadow:0 14px 36px #00000018;overflow:visible}
.lab-menu:popover-open {animation:menu-in .2s var(--ease-out-strong)}
.lab-menu button,.lab-menu a {display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--text-color-kumo-default);text-decoration:none;text-align:left;justify-content:flex-start;padding:12px;border-radius:7px;white-space:normal}
.lab-menu :is(button,a):hover,.lab-menu :is(button,a):focus-visible {background:var(--color-kumo-tint)}
.lab-menu .icon {color:var(--text-color-kumo-subtle);width:18px;height:18px}
.lab-menu b {display:block;font-size:var(--text-base);font-weight:500}
.lab-menu small {display:block;font-size:var(--text-base);line-height:1.5;color:var(--text-color-kumo-subtle);margin-top:2px}
.menu-divider {height:1px;background:var(--color-kumo-line);margin:5px}
.dialog-icon {display:flex;width:42px;height:42px;align-items:center;justify-content:center;background:var(--color-kumo-tint);border:1px solid var(--color-kumo-line);border-radius:12px;margin-bottom:20px}
.dialog-icon .icon {width:22px;height:22px}
dialog {background:var(--color-kumo-overlay);color:var(--text-color-kumo-default);border-color:var(--color-kumo-line);border-radius:16px;box-shadow:0 24px 80px #00000030}
dialog[open] {animation:dialog-in .28s var(--ease-out-strong)}
dialog::backdrop {background:#100f0d66;backdrop-filter:blur(5px);animation:fade-in .2s ease-out}
dialog p {color:var(--text-color-kumo-subtle)}
#labDialog {max-width:460px;padding:28px}
#labDialog h2 {font-size:var(--text-2xl);letter-spacing:-.04em;font-weight:500;margin:10px 0 12px}
#labDialog p {font-size:var(--text-lg);line-height:1.7}
.action-note {background:var(--color-kumo-tint);border:1px solid var(--color-kumo-line);border-radius:10px;padding:14px;font-size:var(--text-base);line-height:1.8;color:var(--text-color-kumo-subtle);margin:20px 0 24px}
.dialog-actions {display:flex;justify-content:flex-end;gap:8px}
.lab-cover {position:absolute;inset:0;z-index:8;background:color-mix(in srgb,var(--color-kumo-elevated) 85%,transparent);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;border-radius:12px;padding:24px;animation:content-in .25s var(--ease-out-strong)}
.lab-cover-card {width:min(420px,100%);text-align:center;padding:32px 26px;border:1px solid var(--color-kumo-line);border-radius:20px;background:var(--color-kumo-base);box-shadow:var(--shadow-stack)}
.lab-cover-icon {display:flex;width:56px;height:56px;margin:0 auto 24px;align-items:center;justify-content:center;background:var(--color-kumo-tint);border-radius:18px;border:1px solid var(--color-kumo-line)}
.lab-cover-icon .icon {width:26px;height:26px}
.lab-cover-card h2 {font-size:var(--text-2xl);letter-spacing:-.04em;font-weight:500;margin:10px 0 14px;line-height:1.2}
.lab-cover-card p {font-size:var(--text-lg);line-height:1.8;color:var(--text-color-kumo-subtle);margin:0 0 24px}
#endedActions {display:flex;flex-direction:column;gap:8px}
#endedKeep {border:0;background:none;font-size:var(--text-base);color:var(--text-color-kumo-subtle)}
.lab-cover[data-working=true] .lab-cover-icon .icon {animation:agent-turn 1.4s linear infinite}
.lab-cover[data-working=true] .lab-cover-icon {color:var(--text-color-kumo-brand)}
#toast {background:var(--color-kumo-overlay);color:var(--text-color-kumo-default);border-color:var(--color-kumo-line);box-shadow:0 8px 30px #00000018;z-index:2000;animation:toast-in .25s var(--ease-out-strong)}
@keyframes content-in {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes rail-in {from{opacity:0;transform:scaleY(.5)}to{opacity:1;transform:scaleY(1)}}
@keyframes menu-in {from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-in {from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toast-in {from{opacity:0;translate:0 8px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes fade-in {from{opacity:0}to{opacity:1}}
@keyframes thinking {0%{transform:translateX(-100%)}100%{transform:translateX(415%)}}
@keyframes agent-turn {to{transform:rotate(360deg)}}
@media(max-width:760px) {
  .workspace-heading {height:auto;min-height:176px;padding:16px 0;gap:12px}
  .actions .icon-button {width:36px;height:36px;padding:8px}
  #labButton {padding:5px 7px;gap:4px;font-size:var(--text-base)}
  #labButton>.icon:first-child {display:none}
  .topbar {gap:4px;padding:0 8px}
  .actions #keepButton>[aria-hidden] {display:none}
  .host-status {display:none}
  .actions {margin-left:auto}
  .lab-menu {right:12px;top:54px}
  dialog {max-height:85dvh}
  #labDialog {position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;border-radius:20px 20px 0 0;padding:28px 24px calc(24px + env(safe-area-inset-bottom));animation:sheet-in .32s var(--ease-drawer)}
  .lab-cover {padding:12px}
  .lab-cover-card {padding:24px 20px}
  .lab-cover-card h2 {font-size:var(--text-2xl)}
}
@keyframes sheet-in {from{transform:translateY(100%);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
#labButton>[data-icon]:last-child .icon {width:12px;transition:transform .2s var(--ease-out-strong)}
#labButton[aria-expanded=true]>[data-icon]:last-child .icon {transform:rotate(180deg)}
@media(max-width:760px) {#labButton>[data-icon]:first-child {display:none}}