/* Accepted v7 native demonstration. See ../../DESIGN.md. Approved DESIGN.md anatomy and scene tokens take precedence.
   demo.js owns endpoint geometry and the single authored playback clock. */
.demo-component .product-demo { width: 100%; max-width: 1120px; margin: 0 auto; }
.demo-component .product-demo [hidden], .demo-component .demo-controls[hidden] { display: none; }
.demo-component .visually-hidden, .demo-component .tour-status, .demo-component [data-tour-label] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.demo-component .demo-controls { display: block; width: 100%; max-width: 900px; margin: 24px auto 0; }
.demo-component .scenario-nav { display: flex; align-items: stretch; gap: 7px; width: max-content; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 3px; margin: -3px auto; scroll-padding-inline: 3px; overscroll-behavior-inline: contain; scrollbar-width: none; }
.demo-component .scenario-nav::-webkit-scrollbar { display: none; }
.demo-component .scenario-nav button { --chapter-color: #AAF26D; position: relative; isolation: isolate; display: flex; flex: 0 0 112px; align-items: center; justify-content: center; gap: 7px; width: 112px; min-width: 112px; height: 44px; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 14px; color: #C2C6CF; background: transparent; font: 500 13px/1.35 var(--font-body); text-align: center; white-space: nowrap; cursor: pointer; }
.demo-component .scenario-nav button::before { content: ""; position: absolute; z-index: -2; inset: 3px 0; border: 1px solid #757A84; border-radius: 14px; background: linear-gradient(180deg,#32343899,#24262999); pointer-events: none; }
.demo-component .scenario-nav [data-scene="approve"] { --chapter-color: #E9BF73; }
.demo-component .scenario-nav [data-scene="ask"] { --chapter-color: #DC9DAE; }
.demo-component .scenario-nav [data-scene="organize"] { --chapter-color: #B49CE8; }
.demo-component .scenario-nav [data-scene="filter"] { --chapter-color: #9BAEEA; }
.demo-component .scenario-nav [data-scene="folder"] { --chapter-color: #72CABA; }
.demo-component .scenario-nav [data-scene="jump"] { --chapter-color: #86BFE1; }
.demo-component .chapter-icon, .demo-component .chapter-label { position: relative; z-index: 1; }
.demo-component .chapter-icon { flex: none; width: 16px; height: 16px; fill: currentColor; shape-rendering: crispEdges; }
.demo-component .chapter-track { position: absolute; z-index: -1; inset: 4px 1px; overflow: hidden; border-radius: 13px; pointer-events: none; }
.demo-component .chapter-fill { position: absolute; inset: 0; background: linear-gradient(115deg,#FFFFFF00 18%,#FFFFFF36 42%,#FFFFFF09 54%,#00000018 74%,#FFFFFF10),var(--chapter-color); opacity: .24; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.demo-component .scenario-nav button.is-active { color: var(--chapter-color); }
.demo-component .scenario-nav button.is-active::before { border-color: var(--chapter-color); }
.demo-component .scenario-nav button:active::before { background: #222427; }
.demo-component .scene-explanation { padding: 24px 24px 32px; text-align: center; }
.demo-component .scene-explanation h2 { min-height: 1.2em; margin: 0; font: 600 clamp(32px,3vw,40px)/1.2 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.demo-component .scene-explanation [data-scene-copy] { max-width: 65ch; min-height: 3.2em; margin: 16px auto 0; color: var(--color-support); font: 400 clamp(18px,1.6vw,20px)/1.6 var(--font-body); text-wrap: pretty; }
.demo-component .demo-summary { max-width: 1000px; margin-inline: auto; padding-top: 12px; border-top: 1px solid var(--color-border); }
.demo-component .demo-summary summary { width: fit-content; min-height: 44px; padding-block: 8px; font-size: 16px; cursor: pointer; }
.demo-component .demo-summary ol { margin-top: 16px; padding-left: 24px; }
.demo-component .demo-summary li { max-width: 65ch; margin-top: 16px; padding-left: 4px; font-size: 16px; line-height: 1.65; }
.demo-component .demo-summary li p { margin-top: 4px; font-size: 16px; line-height: 1.65; }

.demo-component .mac-frame { position: relative; padding: 7px; overflow: hidden; border: 1px solid #55575C; border-radius: 20px; background: #111214; }
.demo-component .desktop { --native-panel: #0E1013; --native-card: #1F2229; --native-ink: #EDEEF1; --native-secondary: #A6ACB8; --native-muted: #949AA6; --native-working: #43D08A; --native-done: #3BD1B0; --native-priority: #C98FB8; --native-pending: #8A96AC; --native-idle: #8FA0BD; --native-attention: #FFB042; position: relative; isolation: isolate; aspect-ratio: 16 / 10; min-height: 540px; overflow: hidden; border-radius: 12px; background: #34363B; color: var(--native-ink); font: 400 13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align: left; }
.demo-component .wallpaper { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.demo-component .desktop button, .demo-component .desktop input { font: inherit; }
.demo-component .desktop button { cursor: pointer; }
.demo-component .desktop svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-component .desktop :focus-visible { outline: 2px solid var(--native-working); outline-offset: 2px; box-shadow: 0 0 0 2px #000; }
.demo-component .desktop ::selection { color: #EDEEF1; background: #436857; }
.demo-component .desktop { scrollbar-width: thin; scrollbar-color: #59616C #0E1013; }
.demo-component .desktop {
  width: 100%;
  min-width: 0;
  container-name: cowork-mac;
  container-type: inline-size;
}
.demo-component .mac-menubar {
  --menu-reserve: 176px;
  position: absolute;
  z-index: 12;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--menu-reserve) minmax(0,1fr);
  column-gap: 8px;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  background: #27292A55;
  color: #F3F3F5;
  font: 500 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .mac-menubar {
  --menu-reserve: min(420px, calc(100cqw - 40px));
}
.demo-component .menubar-left,
.demo-component .menubar-right,
.demo-component .menubar-menus,
.demo-component .menubar-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.demo-component .menubar-left {
  grid-column: 1;
  overflow: hidden;
}
.demo-component .menubar-app { flex: none; font-weight: 600; }
.demo-component .menubar-menus { flex: none; }
.demo-component .mac-menubar .apple-mark {
  flex: none;
  width: 13px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.demo-component .menubar-right {
  grid-column: 3;
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
}
.demo-component .menubar-right > svg {
  flex: none;
  width: 18px;
  height: 14px;
  stroke-width: 1.6;
}
.demo-component .menubar-clock { flex: none; gap: 4px; font-variant-numeric: tabular-nums; }
.demo-component .menubar-time { flex: none; }

@container cowork-mac (max-width:999px) {
  .demo-component .menubar-right > svg { display: none; }
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menu-window,
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menu-help { display: none; }
}
@container cowork-mac (max-width:849px) {
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menubar-menus { display: none; }
}
@container cowork-mac (max-width:759px) {
  .demo-component .menu-window,
  .demo-component .menu-help { display: none; }
}
@container cowork-mac (max-width:649px) {
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menubar-app { display: none; }
}
@container cowork-mac (max-width:639px) {
  .demo-component .menubar-menus { display: none; }
}
@container cowork-mac (max-width:599px) {
  .demo-component .menubar-day { display: none; }
}
@container cowork-mac (max-width:479px) {
  .demo-component .mac-menubar { height: 26px; font-size: 10px; }
  .demo-component .menubar-app { display: none; }
  .demo-component .mac-menubar .apple-mark { width: 12px; }
}
@container cowork-mac (max-width:519px) {
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menubar-left,
  .demo-component :is(.desktop:has(.island-panel[data-open="true"]),.product-demo:not([data-ready="true"])) .menubar-right { visibility: hidden; }
}

.demo-component .hardware-notch { position: absolute; z-index: 31; top: -1px; left: 50%; width: 96px; height: 25px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #000; pointer-events: none; }
.demo-component .hardware-notch i { position: absolute; right: 14px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #131C21; box-shadow: inset 0 0 0 1px #28313A66; }
.demo-component .desktop:has(.island-panel[data-open="true"]) .hardware-notch { visibility: hidden; }
.demo-component .desktop-caption { display: none; }

.demo-component .app-window { position: absolute; z-index: 3; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 12px; background: #202324; box-shadow: 0 18px 52px #00000052,0 3px 10px #00000038; transform-origin: 50% 25%; opacity: .84; }
.demo-component .app-window[data-front="true"] { z-index: 9; opacity: 1; transform: translate(0,0) scale(1); box-shadow: 0 24px 64px #00000070,0 5px 18px #00000042; }
.demo-component .window-chrome { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; height: 36px; padding: 8px 14px; border-bottom: 1px solid #ffffff0b; background: #262829; color: #dadddc; font-size: 12px; font-weight: 500; white-space: nowrap; }
.demo-component .traffic-lights { position: absolute; display: flex; gap: 6px; left: 12px; }
.demo-component .traffic-lights i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fb645b; box-shadow: inset 0 0 0 1px #00000012; }
.demo-component .traffic-lights i:nth-child(2) { background: #efbb47; }
.demo-component .traffic-lights i:nth-child(3) { background: #39c765; }
.demo-component .chrome-detail { position: absolute; right: 14px; color: #a9adac; font-size: 12px; font-weight: 400; }
.demo-component .window-body { height: calc(100% - 36px); }
.demo-component .claude-window { left: 6%; top: 28%; width: 55%; height: 60%; background: #f3f0e9; transform: translate(-8px,8px) scale(.96); }
.demo-component .claude-window .window-chrome { background: #e8e5dd; border-bottom-color: #443e2914; color: #4a493f; }
.demo-component .claude-window .chrome-detail { color: #6f6e64; }
.demo-component .claude-body { display: grid; grid-template-columns: 138px minmax(0,1fr); color: #3b3d35; }
.demo-component .claude-sidebar { position: relative; padding: 20px 10px; border-right: 1px solid #645e3914; background: #eae7de; font-size: 12px; }
.demo-component .sidebar-brand { padding-inline: 8px; font-family: inherit; font-size: 22px; font-weight: 600; letter-spacing: -.04em; color: #4a463e; }
.demo-component .sidebar-compose { display: flex; align-items: center; gap: 7px; margin: 18px 6px 22px; font-size: 12px; }
.demo-component .sidebar-compose svg { width: 14px; height: 14px; }
.demo-component .sidebar-section { margin: 0 8px 6px; color: #66675c; font-size: 12px; }
.demo-component .sidebar-item { padding: 7px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #626155; }
.demo-component .sidebar-item.is-current { border-radius: 5px; background: #d6d3c8; color: #3b3d35; }
.demo-component .sidebar-bottom { position: absolute; bottom: 14px; left: 18px; display: flex; align-items: center; gap: 7px; }
.demo-component .person-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c1c8b2; font-size: 12px; }
.demo-component .workshop-document { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.demo-component .cowork-scroll, .demo-component .source-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 22px 6px; }
.demo-component .document-path { display: flex; gap: 8px; color: #686b5e; font-size: 12px; }
.demo-component .workshop-document h2 { margin-top: 14px; color: #34392f; font: 600 clamp(18px,1.7vw,25px)/1.22 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: -.025em; }
.demo-component .document-lead { margin-top: 8px; color: #696e60; font-size: 13px; line-height: 1.5; }
.demo-component .document-section { display: flex; gap: 10px; margin-top: 16px; }
.demo-component .document-bullet { flex: none; margin-top: 4px; width: 12px; height: 12px; border: 1px solid #a4aa93; border-radius: 3px; }
.demo-component .document-section h3 { color: #434a3b; font: 500 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; }
.demo-component .document-section p { margin-top: 3px; color: #626958; font-size: 12px; line-height: 1.4; }
.demo-component .document-input { position: static; flex: none; margin: 10px 22px 14px; display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 7px 10px; border: 1px solid #aaad9c; border-radius: 10px; color: #606858; font-size: 12px; }
.demo-component .input-arrow { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #777f68; color: #f7f8f0; font-size: 15px; }
.demo-component .herdr-window { top: 36%; right: 6%; width: 59%; height: 55%; transform: translate(10px,8px) scale(.96); }
.demo-component .herdr-body { background: #151a1c; }
.demo-component .workspace-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 8px 12px; border-bottom: 1px solid #b9c6ba17; color: #d3dad5; font-size: 12px; }
.demo-component .workspace-bar > span:last-child { margin-left: auto; color: #8f9e94; }
.demo-component .workspace-symbol { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #536551; color: #d9e7d4; font-size: 12px; }
.demo-component .terminal-panes { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: 1fr 1fr; height: calc(100% - 36px); }
.demo-component .terminal-pane { overflow: hidden; border-right: 1px solid #8b9e9129; }
.demo-component .terminal-pane:first-child { grid-row: 1 / 3; }
.demo-component .terminal-pane:last-child { border-top: 1px solid #8b9e9129; }
.demo-component .pane-heading { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px; background: #ffffff03; color: #c9d6cc; font-size: 12px; white-space: nowrap; }
.demo-component .pane-heading > span:last-child { margin-left: auto; color: #9dafa2; font-size: 12px; }
.demo-component .pane-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #43d08a; }
.demo-component .pane-dot.idle { background: #8fa0bd; }
.demo-component .terminal-output { padding: 10px; color: #a6b4ab; font-family: ui-monospace,"SFMono-Regular",Menlo,monospace; font-size: 12px; line-height: 1.65; }
.demo-component .terminal-output p { margin-bottom: 9px; font-size: inherit; line-height: inherit; }
.demo-component .terminal-output .terminal-prompt { color: #e1e8df; }
.demo-component .terminal-tool { color: #a6c8b1; }
.demo-component .terminal-tool span { color: #d4ddd3; }
.demo-component .terminal-muted { color: #8f9f93; }
.demo-component .terminal-caret { display: block; width: 6px; height: 11px; background: #aac7a7; }
.demo-component .finder-window { top: 28%; left: 18%; width: 58%; height: 57%; opacity: 0; transform: translateY(22px) scale(.95); pointer-events: none; }
.demo-component .finder-window[data-front="true"] { opacity: 1; transform: translateY(0) scale(1); }
.demo-component .finder-body { display: grid; grid-template-columns: 118px minmax(0,1fr); background: #24282a; }
.demo-component .finder-sidebar { padding: 16px 9px; background: #2d3435; font-size: 12px; }
.demo-component .finder-sidebar strong { display: block; padding: 0 8px 9px; color: #a3afb0; font-size: 12px; font-weight: 500; }
.demo-component .finder-sidebar > span { display: block; padding: 6px 8px; color: #d2dbda; }
.demo-component .finder-sidebar .is-current { background: #536e6970; border-radius: 5px; }
.demo-component .finder-files { position: relative; padding: 0 12px 30px; min-width: 0; }
.demo-component .finder-path { padding-block: 14px; color: #c2cecb; font-size: 12px; }
.demo-component .finder-path span { margin-inline: 8px; color: #8e9d98; }
.demo-component .finder-columns { display: flex; justify-content: space-between; padding: 6px 6px 6px 24px; border-block: 1px solid #b2c3b516; color: #98a8a0; font-size: 12px; }
.demo-component .finder-file { display: grid; grid-template-columns: 14px minmax(0,1fr) 65px; align-items: center; gap: 8px; min-height: 34px; padding-inline: 4px; border-bottom: 1px solid #abc1ae0a; color: #d2dad4; font-size: 12px; }
.demo-component .finder-file > span:last-child { color: #9aaca0; }
.demo-component .file-symbol { width: 11px; height: 14px; border: 1px solid #bfd0c5; border-radius: 2px; background: #c0d0c414; }
.demo-component .folder-symbol { width: 14px; height: 10px; border-color: #9aaec4; background: #9aaec42b; }
.demo-component .finder-bottom { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #98a99e; font-size: 12px; }

.demo-component .codex-window, .demo-component .terminal-window { left: 13%; top: 24%; width: 68%; height: 65%; opacity: 0; transform: translateY(20px) scale(.95); pointer-events: none; }
.demo-component .app-window[data-visible="false"] { opacity: 0; pointer-events: none; }
.demo-component .codex-window[data-front="true"], .demo-component .terminal-window[data-front="true"] { opacity: 1; transform: translateY(0) scale(1); }
.demo-component .codex-body { display: grid; grid-template-columns: 132px minmax(0,1fr); background: #222627; }
.demo-component .source-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 18px 10px; border-right: 1px solid #e7f0df13; background: #1b2020; }
.demo-component .source-sidebar strong { padding: 0 8px 14px; color: #e2e8df; font-size: 14px; font-weight: 600; }
.demo-component .source-sidebar span { padding: 7px 8px; color: #b1bbb3; font-size: 12px; }
.demo-component .source-sidebar .is-current { border-radius: 5px; background: #3c4640; color: #e1e7df; }
.demo-component .source-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.demo-component .source-thread-path { color: #a4b1a8; font-size: 12px; }
.demo-component .source-conversation h2 { margin-top: 20px; color: #e4eae3; font: 600 22px/1.25 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: -.02em; }
.demo-component .source-conversation p { margin-top: 14px; color: #c0cec2; font-size: 13px; }
.demo-component .source-user-message { padding: 10px 12px; border-radius: 10px; background: #39423b; }
.demo-component .source-conversation ul { margin-top: 12px; padding-left: 18px; color: #b5c4b8; font-size: 13px; }
.demo-component .source-conversation li { margin-top: 8px; }
.demo-component .source-composer { position: static; flex: none; margin: 10px 22px 14px; min-height: 35px; padding: 8px 10px; border: 1px solid #718070; border-radius: 10px; color: #a8b7a9; font-size: 12px; }
.demo-component .terminal-body { padding: 18px 24px; background: #151a1c; color: #b8c8bb; font: 13px/1.6 ui-monospace,Menlo,monospace; }
.demo-component .terminal-body p { margin-bottom: 14px; font-size: inherit; }
.demo-component .source-code { padding: 12px 14px; margin-bottom: 16px; border: 1px solid #a4b5a728; border-radius: 5px; background: #1c2521; }
.demo-component .source-code span { display: block; margin-bottom: 8px; color: #91b59c; font-size: 12px; }
.demo-component .source-code code { display: block; color: #d1dfd1; font: 13px/1.7 ui-monospace,Menlo,monospace; white-space: pre; }
.demo-component .held-request { color: #ffb042; }
.demo-component .terminal-pane[data-active="true"] { background: #304135; outline: 1px solid #a8c5a0; outline-offset: -1px; }

/* Native top-attached Island, its status filters and compact session anatomy. */
.demo-component .island-panel { position: absolute; z-index: 30; top: -1px; left: 50%; width: 176px; max-width: calc(100% - 24px); height: auto; overflow: hidden; transform: translateX(-50%); border: 1px solid #FFFFFF16; border-top: 0; border-radius: 0 0 20px 20px; background: #000; box-shadow: 0 14px 30px #0006,0 3px 8px #0007; color: var(--native-ink); }
.demo-component .island-panel[data-open="false"] { height: 32px; }
.demo-component .island-panel[data-open="true"] { width: var(--panel-open-width,416px); background: #000; }
.demo-component .island-compact { display: grid; grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr); align-items: center; width: 100%; height: 32px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 0 0 20px 20px; background: #000; color: var(--native-ink); text-align: left; }
.demo-component .island-panel[data-open="true"] .island-compact { display: none; }
.demo-component .compact-left { display: flex; align-items: center; gap: 4px; }
.demo-component .compact-left img { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.demo-component .compact-caret { width: 3px; height: 10px; border-radius: 1px; background: var(--native-working); }
.demo-component .compact-total { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-component .compact-total svg { width: 12px; height: 12px; color: var(--native-secondary); }
.demo-component .island-expanded { position: relative; width: calc(var(--panel-open-width,416px) - 2px); margin-left: calc((100% - var(--panel-open-width,416px) + 2px) / 2); padding: 0 9px 10px; transform-origin: center top; }
.demo-component .island-panel[data-open="false"] .island-expanded { display: none; }
.demo-component .island-tools { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 2px 3px; }
.demo-component .compact-usage { display: flex; align-items: center; gap: 5px; min-width: 0; margin-right: auto; color: var(--native-secondary); font-size: 10px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-component .compact-usage img { width: 10px; height: 10px; object-fit: contain; }
.demo-component .compact-usage b { color: var(--native-attention); font-weight: 500; }
.demo-component .compact-usage .header-five-hour { color: var(--native-working); }
.demo-component .compact-meter { display: block; width: 30px; height: 3px; overflow: hidden; border-radius: 2px; background: #FFFFFF18; }
.demo-component .compact-meter i { display: block; height: 100%; background: var(--native-working); }
.demo-component .island-tools [data-action="focus"] { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 0; border: 0; background: none; color: #C8CCD4; font-size: 11px; }
.demo-component .focus-knob { position: relative; width: 24px; height: 14px; border-radius: 10px; background: #494E59; }
.demo-component .focus-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #EDF0F2; }
.demo-component [data-action="focus"][aria-checked="true"] .focus-knob { background: var(--native-working); }
.demo-component [data-action="focus"][aria-checked="true"] .focus-knob::after { left: 12px; background: #0E1812; }
.demo-component .island-utilities { display: flex; align-items: center; gap: 10px; color: var(--native-muted); }
.demo-component .island-utilities svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #141414; }
.demo-component .state-strip { display: flex; align-items: center; gap: 4px; padding: 2px 2px 7px; overflow-x: auto; overflow-y: hidden; color: var(--native-secondary); scrollbar-width: none; }
.demo-component .state-strip > span, .demo-component .state-strip > button { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--native-secondary); font-size: 10px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
.demo-component .state-strip::-webkit-scrollbar { display: none; }
.demo-component .state-strip b { font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-component .state-strip :is([data-filter="working"],[data-filter="pending"],[data-filter="idle"],[data-filter="done"])[aria-pressed="false"] .state-dot { visibility: hidden; }
.demo-component .state-strip [data-filter="priority"][aria-pressed="true"] { color: var(--native-priority); }
.demo-component .state-dot:is(.pending,.idle,.done) { background: transparent; box-shadow: inset 0 0 0 1px var(--state-color); }
.demo-component .state-strip [data-empty="true"] .state-dot { --state-color: var(--native-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--state-color,var(--native-muted)); }
.demo-component .state-strip button:disabled { opacity: 1; color: var(--native-muted); cursor: default; }
.demo-component .state-dot { --state-color: var(--native-muted); display: block; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--state-color); }
.demo-component .state-dot.working { --state-color: var(--native-working); }
.demo-component .state-dot.pending { --state-color: var(--native-pending); }
.demo-component .state-dot.idle { --state-color: var(--native-idle); }
.demo-component .state-dot.done { --state-color: var(--native-done); }
.demo-component .state-dot.priority { --state-color: var(--native-priority); }
.demo-component .state-dot.needsYou, .demo-component .state-dot.attention { --state-color: var(--native-attention); }
.demo-component .island-stack { display: grid; align-content: start; gap: 5px; max-height: 420px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #59616C #0E1013; }
.demo-component .desktop .session-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.demo-component .group-header { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 25px; padding: 2px 3px 4px; border: 0; background: none; color: var(--native-secondary); font-size: 11px; text-align: left; }
.demo-component .group-mark { display: block; flex: none; width: 7px; height: 7px; margin-inline: 2px; border-radius: 2px; background: var(--group-color,#8FC7CC); font-size: 0; }
.demo-component .group-name { text-transform: uppercase; font-size: 11px; letter-spacing: .055em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-component .group-count { color: var(--native-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.demo-component .group-line { flex: 1; min-width: 8px; height: 1px; background: #FFFFFF15; }
.demo-component .group-chevron { display: block; width: 12px; height: 12px; transform: rotate(90deg); }
.demo-component .group-chevron svg { display: block; width: 12px; height: 12px; }
.demo-component .group-header[aria-expanded="false"] .group-chevron { transform: none; }
.demo-component .group-cards { display: grid; gap: 5px; }
.demo-component .session-card { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr) 24px; gap: 0 8px; min-height: 68px; padding: 8px; border: 1px solid #FFFFFF0E; border-radius: 10px; background: var(--native-card); color: var(--native-ink); cursor: pointer; }
.demo-component .creature { position: relative; display: block; flex: none; width: 32px; height: 32px; }
.demo-component .session-card > .creature { grid-column: 1; grid-row: 1; margin-top: 6px; }
.demo-component .session-card:has(> .card-bottom) > .creature { grid-row: 1 / 3; align-self: start; }
.demo-component .subagent-dots { position: absolute; display: flex; justify-content: center; gap: 3px; top: 36px; left: 0; width: 32px; }
.demo-component .subagent-dot { display: block; width: 6px; height: 6px; padding: 1px; border: 1px solid #637080; border-radius: 2px; background: #14181E; }
.demo-component .subagent-dot[data-live="true"] { border-color: #376B55; background: var(--native-working); box-shadow: inset 0 0 0 1px #203C2E,0 0 5px #43D08A55; }
.demo-component .session-card:has(.subagent-dots) { min-height: 82px; }
.demo-component .creature img, .demo-component .creature canvas { position: absolute; display: block; inset: 0; width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.demo-component .card-content { display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: start; align-items: start; column-gap: 7px; min-width: 0; grid-column: 2; grid-row: 1; }
.demo-component .session-heading { display: flex; flex-wrap: nowrap; align-items: baseline; align-content: start; gap: 1px 4px; min-width: 0; grid-column: 1; grid-row: 1; }
.demo-component .session-chevron { flex: none; align-self: center; width: 8px; height: 11px; }
.demo-component .session-chevron svg { display: block; width: 9px; height: 11px; }
.demo-component .session-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--native-ink); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.demo-component .session-state { text-transform: uppercase; letter-spacing: .025em; flex: none; display: inline-block; color: var(--native-idle); font-size: 10.5px; line-height: 1.5; white-space: nowrap; }
.demo-component .session-card[data-state="working"] .session-state { color: var(--native-working); }
.demo-component .session-card[data-state="done"] .session-state { color: var(--native-done); }
.demo-component .session-card[data-state="pending"] .session-state { color: var(--native-pending); }
.demo-component .session-card[data-state="needsYou"] .session-state { color: var(--native-attention); }
.demo-component .card-source { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 5px; min-width: 0; max-width: 146px; grid-column: 2; grid-row: 1; color: var(--native-muted); font-size: 10.5px; line-height: 1.45; text-align: right; }
.demo-component .model-badge { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; line-height: 1.45; }
.demo-component .model-badge img { display: block; width: 10px; height: 10px; object-fit: contain; }
.demo-component .model-fable { color: #A68CF2; }
.demo-component .model-astra { color: #C0C1C4; }
.demo-component .session-age { font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-component .source-label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 10.5px; }
.demo-component .terminal-mark { display: inline-block; color: var(--native-secondary); font: 500 10px/1 ui-monospace,Menlo,monospace; }
.demo-component .session-preview { display: block; min-width: 0; grid-column: 1 / -1; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--native-secondary); font-size: 11px; line-height: 1.45; }
.demo-component .card-detail { grid-column: 1 / -1; margin-top: 5px; color: var(--native-secondary); font-size: 9.5px; line-height: 1.45; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-component .card-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 6px; min-width: 0; grid-column: 2 / -1; grid-row: 2; }
.demo-component .session-card .card-bottom > :is(.card-detail,.session-preview,.cowork-folder) { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.demo-component .session-card .card-bottom > .cowork-folder { max-width: 100%; overflow: hidden; white-space: nowrap; }
.demo-component .card-rail { display: contents; }
.demo-component .card-rail [data-action="done"] { grid-column: 3; grid-row: 1; align-self: start; }
.demo-component .card-rail button, .demo-component .card-footer-actions button, .demo-component .card-reorder-actions button { display: inline-grid; flex: none; place-items: center; min-width: 24px; min-height: 24px; padding: 3px; border: 0; border-radius: 5px; background: none; color: var(--native-muted); font-size: 12px; line-height: 1; }
.demo-component .card-rail button svg { width: 17px; height: 17px; }
.demo-component .done-check { opacity: 0; }
.demo-component [data-action="done"][aria-pressed="true"] { color: var(--native-done); }
.demo-component [data-action="done"][aria-pressed="true"] .done-check { opacity: 1; }
.demo-component .card-footer-actions { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 0; }
.demo-component .card-footer-actions:empty { display: none; }
.demo-component .card-bottom:has(> .card-footer-actions:empty) { grid-template-columns: minmax(0,1fr); column-gap: 0; }
.demo-component .card-footer-actions svg, .demo-component .card-reorder-actions svg { width: 13px; height: 13px; }
.demo-component .card-footer-actions [data-action="folder"] svg { width: 17px; height: 17px; }
.demo-component .card-footer-actions button { opacity: 0; pointer-events: none; }
.demo-component .session-card:focus-within .card-footer-actions button, .demo-component .session-card.is-cued .card-footer-actions button, .demo-component .card-footer-actions [data-action="folder"], .demo-component .card-footer-actions [aria-pressed="true"] { opacity: 1; pointer-events: auto; }
.demo-component .card-footer-actions [data-action="priority"][aria-pressed="true"] { color: var(--native-priority); }
.demo-component .card-footer-actions [data-action="pin"][aria-pressed="true"] { color: #DBDEE5; }
.demo-component .card-reorder-actions { position: absolute; left: 50px; bottom: 8px; display: flex; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.demo-component .card-reorder-actions:focus-within { width: auto; height: 24px; clip-path: none; overflow: visible; background: var(--native-card); border-radius: 5px; }
.demo-component .card-reorder-actions button:disabled { color: #6F7580; cursor: default; }
@media (hover: none) {
  .demo-component .card-footer-actions button { opacity: 1; pointer-events: auto; }
}
.demo-component .session-card[data-dragging="true"] { z-index: 6; border-color: #A7B8AD; box-shadow: 0 8px 20px #0008; opacity: .94; }
.demo-component .desktop .cowork-folder { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 24px; grid-column: 1 / -1; margin-top: 4px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--native-secondary); font-size: 11px; letter-spacing: .02em; }
.demo-component .cowork-folder svg { width: 12px; height: 12px; }
.demo-component .focus-residue { margin: 6px 3px 0; color: var(--native-secondary); font-size: 11px; line-height: 1.5; text-align: center; }
.demo-component .desktop .filter-residue { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 24px; padding: 2px 0; border: 0; background: none; color: var(--native-secondary); font-size: 11px; }
.demo-component .filter-residue svg { width: 11px; height: 11px; }

/* Account consumption is always visible as two compact horizontal rows. */
.demo-component .usage-footer { display: block; margin: 7px 2px 0; padding: 8px 2px 0; border-top: 1px solid #FFFFFF20; }
.demo-component .usage-row { display: grid; grid-template-columns: 89px minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 13px; margin: 0; padding: 0; border: 0; font-variant-numeric: tabular-nums; }
.demo-component .usage-row + .usage-row { margin-top: 5px; }
.demo-component .usage-account { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: var(--native-secondary); font-size: 10px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.demo-component .usage-account img { width: 10px; height: 10px; object-fit: contain; }
.demo-component .usage-account small { padding: 1px 2px; border-radius: 2px; background: #32363F; color: #B8BDCA; font-size: 9.5px; line-height: 1; }
.demo-component .usage-window { display: grid; grid-template-columns: auto minmax(8px,1fr) auto; align-items: center; gap: 4px; min-width: 0; color: var(--native-secondary); font-size: 9.5px; line-height: 1.3; white-space: nowrap; }
.demo-component .usage-window-label { font-size: 9.5px; }
.demo-component .usage-value { font-size: 9.5px; }
.demo-component .meter-track { display: block; min-width: 8px; height: 3px; overflow: hidden; border-radius: 2px; background: #FFFFFF20; }
.demo-component .meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--meter-color,#43D08A); }
.demo-component .usage-reset { color: var(--native-muted); font-size: 9.5px; line-height: 1.3; white-space: nowrap; }

/* Ask/approval replace the list, retaining both toolbar and account footer. */
.demo-component .question-panel { padding: 1px 3px 0; }
.demo-component .request-heading { display: flex; justify-content: space-between; align-items: center; min-height: 23px; padding-bottom: 5px; border-bottom: 1px solid #FFFFFF16; color: var(--native-secondary); font-size: 11px; }
.demo-component .request-heading > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.demo-component .request-heading img { width: 12px; height: 12px; object-fit: contain; }
.demo-component .request-heading .terminal-mark { color: var(--native-ink); font-size: 12px; }
.demo-component .question-heading { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 10px; }
.demo-component .question-topic { flex: none; max-width: 35%; padding: 3px 5px; border-radius: 10px; background: #FFB04218; color: #FFB042; font-size: 11px; line-height: 1.3; }
.demo-component .question-heading h3 { min-width: 0; margin: 1px 0 0; color: var(--native-ink); font: 600 12px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: 0; text-wrap: balance; }
.demo-component .question-options { display: grid; gap: 5px; }
.demo-component .question-options button { display: flex; align-items: flex-start; gap: 7px; width: 100%; min-height: 51px; padding: 8px 10px; border: 1px solid #FFFFFF18; border-radius: 6px; background: #101112; color: var(--native-ink); text-align: left; }
.demo-component .question-options button:active:not(.is-selected) { border-color: #B38B4D; background: #322717; }
.demo-component .question-panel button.is-selected { border-color: #DCAF68; background: #3B2E1B; color: #FFE6BB; }
.demo-component .question-panel button.is-selected .option-number { color: #FFD18C; }
.demo-component .question-panel button.is-selected .option-content strong { color: #FFE6BB; }
.demo-component .question-panel button.is-selected .option-content small { color: #E9D1AD; }
.demo-component .question-panel button:focus-visible { outline-color: var(--native-attention); }

.demo-component .option-number { color: var(--native-attention); font-size: 11px; line-height: 1.4; }
.demo-component .option-content { display: block; min-width: 0; }
.demo-component .option-content strong { display: block; color: var(--native-ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
.demo-component .option-content small { display: block; margin-top: 3px; color: var(--native-secondary); font-size: 11px; line-height: 1.4; }
.demo-component .question-options .other-option { min-height: 30px; padding-block: 6px; }
.demo-component .custom-answer { display: block; margin: 4px 0; color: var(--native-secondary); font-size: 11px; line-height: 1.4; }
.demo-component .desktop .custom-answer input { display: block; width: 100%; min-height: 32px; margin-top: 4px; padding: 6px 8px; border: 1px solid #7F6B9F; border-radius: 5px; background: #202027; color: var(--native-ink); caret-color: #CBB3E6; font-size: 11px; }
.demo-component .request-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 11px; }
.demo-component .request-actions button { min-height: 28px; padding: 4px 8px; border: 1px solid #FFFFFF25; border-radius: 5px; background: #272A30; color: var(--native-secondary); font-size: 11px; font-weight: 500; letter-spacing: .025em; }
.demo-component .request-actions .allow-button { border-color: #8DA97A; background: #34402B; color: #CFECB7; }
.demo-component .request-actions button:active:not(.is-selected) { border-color: #A6ADBA; background: #343942; color: var(--native-ink); }
.demo-component .request-actions .allow-button:active:not(.is-selected) { border-color: #AAC890; background: #405235; }
.demo-component .request-actions .allow-button.is-selected { border-color: #AAF26D; background: #3D5630; color: #E1F8D1; }
.demo-component .request-actions .allow-button:focus-visible { outline-color: var(--native-working); }
.demo-component .permission-detail { margin-top: 9px; padding: 10px; border: 1px solid #726045; border-radius: 6px; background: #242119; }
.demo-component .permission-detail code { color: #E7C391; font: 11px/1.5 ui-monospace,Menlo,monospace; overflow-wrap: anywhere; }
.demo-component .permission-detail p { margin-top: 6px; color: var(--native-secondary); font-size: 11px; line-height: 1.45; }
.demo-component .attention-group { margin: 2px 0 4px; padding: 7px; border: 1px solid #8F6C36; border-radius: 11px; background: #2E291E; }
.demo-component .attention-heading { display: flex; align-items: center; gap: 5px; padding: 0 2px 5px; color: #F2BE70; font-size: 11px; font-weight: 500; line-height: 1.3; }
.demo-component .attention-pill { width: 6px; height: 6px; border-radius: 50%; background: var(--native-attention); }
.demo-component .desktop .attention-card { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 5px 2px; border: 0; border-radius: 5px; background: none; color: var(--native-ink); text-align: left; }
.demo-component .attention-copy { display: block; min-width: 0; flex: 1; }
.demo-component .attention-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; color: #E7C391; font-size: 11px; line-height: 1.5; }
.demo-component .attention-identity b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--native-ink); font-size: 11px; font-weight: 500; }
.demo-component .attention-source { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #C8B89C; font-size: 11px; white-space: nowrap; }
.demo-component .attention-source .terminal-mark { color: #C8B89C; }
.demo-component .attention-prompt { display: block; margin-top: 4px; color: #E4D8C5; font-size: 11px; line-height: 1.45; }

.demo-component .demo-cursor { position: absolute; z-index: 45; top: 0; left: 0; width: 24px; height: 30px; opacity: 0; transform-origin: 3px 2px; pointer-events: none; filter: drop-shadow(0 2px 2px #0008); }
.demo-component .demo-cursor > svg { display: block; width: 24px; height: 30px; fill: #F7F8F6; stroke: #161B18; stroke-width: 1.5; }
.demo-component .cursor-click { position: absolute; top: -10px; left: -10px; width: 26px; height: 26px; border: 1.5px solid #F7FFF0AA; border-radius: 50%; opacity: 0; }
.demo-component .desktop .window-title { overflow: hidden; text-overflow: ellipsis; }
.demo-component .input-arrow svg { width: 16px; height: 16px; }
.demo-component .terminal-question { padding: 10px; color: #DFE4DC; font-size: 11px; line-height: 1.5; }
.demo-component .terminal-question p { margin: 0 0 9px; font-size: inherit; }
.demo-component .terminal-option { display: block; padding: 4px 0; color: #BED0BC; font: 11px/1.5 ui-monospace,Menlo,monospace; }
.demo-component .terminal-pane[data-pane="request"][data-active="true"] { overflow-y: auto; }

/* HTML alone provides a readable snapshot and complete five-part transcript. */
.demo-component .product-demo:not([data-ready="true"]) button { display: none; }
.demo-component .product-demo:not([data-ready="true"]) .island-panel { width: min(416px,calc(100% - 24px)); height: auto; background: var(--native-panel); }
.demo-component .product-demo:not([data-ready="true"]) .island-expanded { display: block; width: 100%; margin: 0; }
.demo-component .product-demo:not([data-ready="true"]) .session-card { grid-template-columns: 32px minmax(0,1fr); cursor: default; }
.demo-component .product-demo:not([data-ready="true"]) .hardware-notch { visibility: hidden; }

@media (hover:hover) and (pointer:fine) {
  .demo-component .scenario-nav button:hover { color: var(--chapter-color); }
  .demo-component .scenario-nav button:hover::before { border-color: var(--chapter-color); }
  .demo-component .session-card:hover .card-footer-actions button { opacity: 1; pointer-events: auto; }
  .demo-component .session-card:hover { background: #252932; border-color: #FFFFFF28; }
  .demo-component .group-header:hover { color: var(--native-ink); }
  .demo-component .card-rail button:hover, .demo-component .card-footer-actions button:not(:disabled):hover, .demo-component .card-reorder-actions button:not(:disabled):hover { color: var(--native-ink); background: #FFFFFF12; }
  .demo-component .question-options button:hover:not(:active):not(.is-selected) { border-color: #947140; background: #241C11; }
  .demo-component .request-actions button:hover:not(:active):not(.is-selected) { color: var(--native-ink); border-color: #949AA6; }
  .demo-component .attention-card:hover { background: #FFB0420C; }
  .demo-component .island-compact:hover .compact-total { color: var(--native-working); }
}
@media (max-width:1023px) {
  .demo-component .desktop { min-height: 550px; }
  .demo-component .claude-window { left: 4%; top: 25%; width: 65%; height: 64%; }
  .demo-component .herdr-window { right: 3%; width: 67%; }
  .demo-component .claude-body { grid-template-columns: 110px minmax(0,1fr); }
  .demo-component .cowork-scroll { padding-inline: 20px; }
  .demo-component .document-input { margin-inline: 20px; }
  .demo-component .pane-heading > span:last-child { display: none; }
  .demo-component .scenario-nav button { gap: 7px; padding-inline: 8px; font-size: 13px; }
}
@media (max-width:767px) {
  .demo-component .mac-frame { padding: 4px; border-radius: 17px; }
  .demo-component .desktop { aspect-ratio: auto; height: 570px; min-height: 570px; border-radius: 12px; }
  .demo-component .claude-window { left: 12px; top: 29%; width: calc(100% - 24px); height: 62%; }
  .demo-component .claude-body { display: block; }
  .demo-component .claude-sidebar { display: none; }
  .demo-component .cowork-scroll, .demo-component .source-scroll { padding: 16px 20px 6px; }
  .demo-component .workshop-document h2 { margin-top: 13px; font-size: 21px; }
  .demo-component .document-lead { font-size: 13px; }
  .demo-component .document-section { margin-top: 12px; }
  .demo-component .document-section:last-of-type { display: none; }
  .demo-component .document-input { margin-bottom: 12px; }
  .demo-component .herdr-window { right: 10px; top: 38%; width: calc(100% - 20px); height: 56%; }
  .demo-component .herdr-window[data-front="true"] { top: 31%; height: 64%; }
  .demo-component .terminal-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .demo-component .terminal-pane:first-child { grid-row: auto; }
  .demo-component .terminal-pane:last-child { display: none; }
  .demo-component .terminal-panes:has([data-active="true"]) { grid-template-rows: 1fr; }
  .demo-component .terminal-panes:has([data-active="true"]) .terminal-pane { display: none; }
  .demo-component .terminal-panes:has([data-active="true"]) .terminal-pane[data-active="true"] { display: block; grid-row: 1; }
  .demo-component .terminal-output { padding: 8px 10px; font-size: 12px; }
  .demo-component .terminal-output p { margin-bottom: 6px; }
  .demo-component .terminal-pane:first-child .terminal-output p:nth-child(n+4) { display: none; }
  .demo-component .finder-window, .demo-component .finder-window[data-front="true"] { left: 10px; top: 33%; width: calc(100% - 20px); height: 59%; }
  .demo-component .finder-body { grid-template-columns: 76px minmax(0,1fr); }
  .demo-component .finder-sidebar { padding-inline: 4px; }
  .demo-component .finder-sidebar strong, .demo-component .finder-sidebar > span { padding-inline: 5px; font-size: 11px; }
  .demo-component .finder-files { padding-inline: 8px; }
  .demo-component .finder-file { grid-template-columns: 12px minmax(0,1fr); font-size: 11px; }
  .demo-component .finder-file > span:last-child, .demo-component .finder-columns > span:last-child { display: none; }
  .demo-component .finder-columns { padding-left: 22px; }
  .demo-component .chrome-detail { display: none; }
  .demo-component .codex-window, .demo-component .terminal-window { left: 10px; top: 30%; width: calc(100% - 20px); height: 64%; }
  .demo-component .codex-body { display: block; }
  .demo-component .source-sidebar { display: none; }
  .demo-component .source-scroll { padding-inline: 18px; }
  .demo-component .source-conversation h2 { margin-top: 12px; font-size: 20px; }
  .demo-component .source-composer { margin: 10px 18px 12px; }
  .demo-component .terminal-body { padding: 14px 16px; font-size: 12px; }
  .demo-component .source-code { padding: 9px 10px; }
  .demo-component .source-code code { font-size: 12px; }
  .demo-component .island-expanded { padding-inline: 7px; }
  .demo-component .island-tools { gap: 7px; padding-inline: 1px; }
  .demo-component .island-utilities { gap: 7px; }
  .demo-component .island-stack { max-height: 390px; }
  .demo-component .state-strip { gap: 9px; }
  .demo-component .session-card { gap: 0 6px; padding-inline: 6px; }
  .demo-component .card-content { column-gap: 4px; }
  .demo-component .card-source { max-width: 94px; column-gap: 4px; }
  .demo-component .usage-row { grid-template-columns: 76px minmax(0,1fr) minmax(0,1fr) auto; gap: 5px; }
  .demo-component .usage-window { gap: 3px; }
  .demo-component .usage-footer { padding-inline: 0; margin-inline: 0; }
  .demo-component .demo-controls { margin-top: 16px; }
  .demo-component .scenario-nav { gap: 7px; }
  .demo-component .scenario-nav button { flex: none; flex-direction: row; justify-content: center; gap: 6px; min-height: 44px; padding: 9px 11px; font-size: 12px; white-space: nowrap; }
  .demo-component .chapter-icon { width: 16px; height: 16px; }
  .demo-component .scene-explanation { padding: 24px 16px; }
  .demo-component .scene-explanation h2 { min-height: 2.4em; font-size: 32px; display: grid; place-items: center; }
  .demo-component .scene-explanation [data-scene-copy] { min-height: 4.8em; margin-top: 12px; font-size: 16px; }
}
@media (max-width:479px) {
  .demo-component .desktop { height: 580px; min-height: 580px; }
  .demo-component .island-tools { gap: 6px; }
  .demo-component .island-utilities { display: none; }
  .demo-component .island-utilities svg { width: 12px; height: 12px; }
  .demo-component .compact-usage { font-size: 9.5px; gap: 3px; }
  .demo-component .island-tools [data-action="focus"] { font-size: 11px; gap: 4px; }
  .demo-component .session-heading { display: block; }
  .demo-component .session-chevron { float: left; margin-right: 2px; margin-top: 2px; }
  .demo-component .session-name { line-height: 1.45; }
  .demo-component .session-state { display: block; font-size: 11px; }
  .demo-component .card-source { max-width: 73px; }
  .demo-component .source-label { width: 100%; justify-content: flex-end; }
  .demo-component .card-detail { font-size: 11px; }
  .demo-component .usage-row { grid-template-columns: 51px minmax(0,1fr) minmax(0,1.15fr); gap: 6px; }
  .demo-component .usage-account { gap: 2px; font-size: 9.5px; }
  .demo-component .usage-account img { width: 8px; height: 8px; }
  .demo-component .usage-account small { display: none; }
  .demo-component .usage-window { gap: 2px; }
  .demo-component .usage-reset { display: none; }
  .demo-component .question-heading { gap: 6px; margin-top: 10px; }
  .demo-component .question-topic { max-width: 33%; }
  .demo-component .question-options button { min-height: 58px; padding: 8px; }
  .demo-component .attention-source { width: 100%; margin-left: 11px; }
  .demo-component .attention-identity b { max-width: calc(100% - 40px); }
  .demo-component .scenario-nav button { min-height: 44px; font-size: 12px; }
}
/* Phone composition: a short native Island above two quiet source windows.
   Keep the approved desktop anatomy and type untouched above this breakpoint. */
@media (max-width:600px) {
  .demo-component .desktop { height: 460px; min-height: 460px; }
  .demo-component .app-window { border-radius: 10px; }
  .demo-component .window-chrome { height: 32px; padding-block: 6px; font-size: 11px; }
  .demo-component .window-body { height: calc(100% - 32px); }
  .demo-component .traffic-lights { left: 10px; gap: 5px; }
  .demo-component .traffic-lights i { width: 8px; height: 8px; }
  .demo-component .claude-window { left: 14px; top: 36%; width: calc(100% - 52px); height: 53%; }
  .demo-component .herdr-window { right: 14px; top: 47%; width: calc(100% - 52px); height: 45%; }
  .demo-component .herdr-window[data-front="true"] { top: 39%; height: 53%; }
  .demo-component .finder-window, .demo-component .finder-window[data-front="true"],
  .demo-component .codex-window, .demo-component .terminal-window { left: 20px; top: 37%; width: calc(100% - 40px); height: 55%; }
  .demo-component .desktop:has(.finder-window[data-front="true"]) .herdr-window,
  .demo-component .desktop:has(.codex-window[data-front="true"]) .herdr-window,
  .demo-component .desktop:has(.terminal-window[data-front="true"]) .herdr-window { visibility: hidden; }
  .demo-component .cowork-scroll, .demo-component .source-scroll { padding: 12px 14px 6px; }
  .demo-component .workshop-document h2 { margin-top: 10px; font-size: 18px; }
  .demo-component .document-lead { font-size: 12px; }
  .demo-component .document-section, .demo-component .document-path { display: none; }
  .demo-component .document-input { margin: 8px 14px 10px; min-height: 30px; font-size: 11px; }
  .demo-component .workspace-bar { height: 30px; padding: 5px 10px; font-size: 11px; }
  .demo-component .workspace-bar > span:last-child { display: none; }
  .demo-component .terminal-panes { height: calc(100% - 30px); grid-template-rows: 1fr; }
  .demo-component .terminal-pane:nth-child(2), .demo-component .terminal-pane:last-child { display: none; }
  .demo-component .terminal-panes:has([data-active="true"]) .terminal-pane { display: none; }
  .demo-component .terminal-panes:has([data-active="true"]) .terminal-pane[data-active="true"] { display: block; grid-row: 1; }
  .demo-component .terminal-panes:has([data-pane="request"][data-active="true"]) { grid-template-rows: 1fr; }
  .demo-component .pane-heading { min-height: 28px; font-size: 11px; }
  .demo-component .terminal-output { padding: 8px 10px; font-size: 11px; line-height: 1.5; }
  .demo-component .terminal-question { padding: 8px 10px; }
  .demo-component .source-conversation h2 { margin-top: 9px; font-size: 18px; }
  .demo-component .source-conversation p { margin-top: 9px; font-size: 12px; }
  .demo-component .source-conversation ul, .demo-component .source-thread-path { display: none; }
  .demo-component .source-composer { margin: 8px 14px 10px; min-height: 30px; padding-block: 6px; font-size: 11px; }

  .demo-component .island-expanded { padding: 0 7px 8px; }
  .demo-component .island-tools { min-height: 30px; gap: 6px; }
  .demo-component .island-utilities { display: none; }
  .demo-component .compact-usage { font-size: 9.5px; gap: 3px; }
  .demo-component .state-strip { gap: 10px; padding: 0 2px 4px; scrollbar-width: none; }
  .demo-component .state-strip::-webkit-scrollbar { display: none; }
  .demo-component .island-stack { gap: 4px; max-height: 224px; }
  .demo-component .group-header { min-height: 24px; padding-bottom: 3px; }
  .demo-component .session-card { gap: 0 6px; min-height: 65px; padding: 6px; }
  .demo-component .session-card > .creature { margin-top: 7px; }
  .demo-component .card-content { grid-template-columns: minmax(0,1fr) auto; column-gap: 6px; }
  .demo-component .session-heading { display: contents; }
  .demo-component .session-chevron { display: none; }
  .demo-component .session-name { grid-column: 1 / -1; grid-row: 1; line-height: 1.35; }
  .demo-component .session-state { grid-column: 1; grid-row: 2; font-size: 11px; line-height: 1.4; letter-spacing: 0; }
  .demo-component .card-source { grid-column: 2; grid-row: 2; max-width: none; flex-wrap: nowrap; gap: 0; line-height: 1.4; }
  .demo-component .model-badge { font-size: 11px; line-height: 1.4; }
  .demo-component .session-age, .demo-component .source-label, .demo-component .card-detail { display: none; }
  .demo-component .card-detail.subagent-count { display: block; grid-row: 4; margin-top: 2px; font-size: 9.5px; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
  .demo-component .subagent-total { display: none; }
  .demo-component .session-preview { grid-row: 3; margin-top: 2px; font-size: 11px; line-height: 1.4; }
  .demo-component .desktop .cowork-folder { margin-top: 2px; }
  .demo-component .focus-residue { margin-top: 4px; }

  .demo-component .usage-footer { margin-top: 5px; padding-top: 5px; }
  .demo-component .usage-row { grid-template-columns: 51px minmax(0,1fr) minmax(0,1.15fr); gap: 6px; min-height: 12px; }
  .demo-component .usage-row + .usage-row { margin-top: 3px; }
  .demo-component .usage-account { gap: 2px; font-size: 9.5px; }
  .demo-component .usage-account img { width: 8px; height: 8px; }
  .demo-component .usage-account small, .demo-component .usage-reset { display: none; }
  .demo-component .usage-window { gap: 3px; }

  .demo-component .question-panel { max-height: 252px; padding-inline: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .demo-component .request-heading { min-height: 22px; padding-bottom: 4px; }
  .demo-component .question-heading { gap: 6px; margin: 6px 0 5px; }
  .demo-component .question-topic { max-width: 33%; padding: 2px 5px; }
  .demo-component .question-heading h3 { margin-top: 0; font-size: 12px; line-height: 1.4; text-wrap: pretty; }
  .demo-component .question-options { gap: 4px; }
  .demo-component .question-options button, .demo-component .question-options .other-option { align-items: center; min-height: 34px; padding: 7px 8px; }
  .demo-component .option-content strong { font-size: 11px; line-height: 1.4; }
  .demo-component .option-content small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-component .request-actions { gap: 5px; margin-top: 7px; }
  .demo-component .request-actions button { padding-inline: 7px; min-height: 28px; font-size: 11px; letter-spacing: 0; }
  .demo-component .permission-detail { margin-top: 7px; padding: 8px; }
  .demo-component .attention-group { margin-bottom: 2px; padding: 6px; }
  .demo-component .attention-heading { padding-bottom: 3px; }
  .demo-component .desktop .attention-card { min-height: 48px; gap: 6px; padding-block: 3px; }
  .demo-component .attention-identity { gap: 2px; }
  .demo-component .attention-identity b { max-width: calc(100% - 36px); }
  .demo-component .attention-source { display: none; }
  .demo-component .attention-prompt { margin-top: 2px; line-height: 1.4; }

  .demo-component .demo-controls { margin-top: 12px; }
  .demo-component .scenario-nav { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 7px; margin: -3px auto; scroll-padding-inline: 3px; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .demo-component .scenario-nav button { flex: none; flex-direction: row; gap: 6px; min-height: 44px; padding: 9px 11px; border-radius: 14px; font-size: 12px; white-space: nowrap; }
  .demo-component .chapter-icon { width: 16px; height: 16px; }
}
@media (max-width:360px) {
  .demo-component .desktop { height: 440px; min-height: 440px; }
  .demo-component .compact-meter { width: 22px; }
  .demo-component .compact-usage { gap: 2px; }
  .demo-component .island-tools [data-action="focus"] { gap: 3px; }
  .demo-component .question-topic { max-width: 28%; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-component .demo-cursor { display: none; }
}
@media (prefers-reduced-transparency:reduce) {
  .demo-component .mac-menubar { background: #36383C; }
  .demo-component .scenario-nav button::before { background: #292A2C; }
  .demo-component .app-window { opacity: 1; }
  .demo-component .app-window[data-visible="false"] { opacity: 0; }
}
@media (prefers-contrast:more) {
  .demo-component .desktop { --native-secondary: #EDEEF1; --native-muted: #CBD2DE; }
  .demo-component .session-card, .demo-component .question-options button { border-color: #697484; }
  .demo-component .scenario-nav button { color: var(--color-text); }
  .demo-component .scenario-nav button::before { border-color: #85858F; }
}
/* Landing integration: one scoped component; stable controls and reading order. */
.demo-component .demo-controls { min-height: 44px; }
.demo-component .product-demo:not([data-ready="true"]) .demo-controls { visibility: hidden; }
.demo-component .demo-summary { text-align: left; }

@media(max-width:600px) {
  .landing .hero-media.demo-component { width: calc(100% + 32px); margin-inline: -16px; }
  .demo-component .demo-controls { min-height: 50px; }
  .demo-component .demo-summary { margin-inline: 16px; }
}


.demo-component .attention-return-label { display: flex; align-items: center; gap: 3px; margin-top: 3px; color: #C8B89C; font-size: 10px; line-height: 1.4; }
.demo-component .attention-return-label svg { width: 10px; height: 10px; }

/* Authored source content uses native typography and separate composer rows. */
.demo-component .cowork-scroll { scrollbar-color: #BBC0B1 transparent; color-scheme: light; }
.demo-component .cowork-request { margin: 14px 0 18px; padding: 10px 12px; border-radius: 9px; background: #E7E4DC; }
.demo-component .cowork-request p { margin: 0; color: #4D5046; font-size: 12px; line-height: 1.55; }
.demo-component .cowork-attachment { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #6A6C60; font-size: 10px; }
.demo-component .cowork-attachment svg { width: 11px; height: 14px; }
.demo-component .cowork-response-heading { display: flex; align-items: center; gap: 5px; color: #514E45; font-size: 11px; }
.demo-component .cowork-response-heading img { width: 13px; height: 13px; }
.demo-component .cowork-response-heading > span { margin-left: auto; color: #777A6D; font-size: 10px; }
.demo-component .cowork-brief { display: grid; gap: 11px; margin: 14px 0 0; }
.demo-component .cowork-brief dt { color: #44483D; font-size: 12px; font-weight: 600; }
.demo-component .cowork-brief dd { margin: 2px 0 0; color: #63695B; font-size: 12px; line-height: 1.5; }
.demo-component .cowork-artifacts { margin-top: 16px; border-top: 1px solid #CACDC0; }
.demo-component .cowork-artifact-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #D5D7CD; }
.demo-component .cowork-file-icon { display: grid; place-items: center; flex: none; width: 26px; height: 31px; border: 1px solid #BFC5B3; border-radius: 4px; color: #69735F; font-size: 8px; }
.demo-component .cowork-artifact-row > div { min-width: 0; }
.demo-component .cowork-artifact-row strong, .demo-component .cowork-artifact-row > div span { display: block; font-size: 11px; }
.demo-component .cowork-artifact-row strong { color: #4C5344; font-weight: 500; }
.demo-component .cowork-artifact-row > div span { margin-top: 2px; color: #757B6B; font-size: 10px; }
.demo-component .cowork-artifact-state { margin-left: auto; color: #657B53; font-size: 10px; }
.demo-component .source-file-activity { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #A5B8AA; font: 11px/1.5 ui-monospace,Menlo,monospace; }
.demo-component .source-file-activity strong { font-weight: 400; color: #D3DED4; }
@media(max-width:600px) {
  .demo-component .cowork-request { margin: 0 0 12px; padding: 8px 10px; }
  .demo-component .cowork-request p { font-size: 11px; }
  .demo-component .cowork-attachment, .demo-component .cowork-response-heading > span, .demo-component .cowork-artifact-state, .demo-component .cowork-artifact-row > div span { display: none; }
  .demo-component .cowork-brief dd { font-size: 11px; }
}

.demo-component .scenario-nav button:focus-visible { outline: 2px solid var(--color-text); outline-offset: -3px; }
@media (hover:none) {
  .demo-component .card-footer-actions button { opacity: 1; pointer-events: auto; }
}

.demo-component .terminal-pane:has(.terminal-question) { overflow-y: auto; scrollbar-width: thin; }
.demo-component .terminal-pane:has(.terminal-question) .terminal-output { padding: 8px 10px; font-size: 11px; line-height: 1.5; }
.demo-component .terminal-pane:has(.terminal-question) .terminal-prompt { margin: 0 0 4px; }
.demo-component .terminal-output .terminal-question { padding: 2px 0; }
.demo-component .terminal-output .terminal-option { margin: 0; padding: 0; }
.demo-component .terminal-pane:has(.terminal-question) .terminal-muted { margin: 4px 0 0; font-size: 10px; line-height: 1.4; }