.task-demo { max-width: 1100px; margin: 0 auto; padding: 64px 24px; color: rgb(var(--txt)); }
.td-heading { max-width: 740px; margin-bottom: 28px; }
.td-heading h2 { margin: 10px 0 16px; font-size: clamp(26px, 4vw, 38px); line-height: 1.25; letter-spacing: -.03em; }
.td-heading p, .td-boundary { color: rgb(var(--txt-2)); font-size: 14px; line-height: 1.8; }
.td-heading .td-eyebrow { color: rgb(var(--brand)); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.td-heading .td-meta { margin-top: 12px; font-size: 12px; }
.td-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.task-demo button { font: inherit; cursor: pointer; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); color: rgb(var(--txt-1)); padding: 12px 16px; font-size: 13px; line-height: 1.6; }
.task-demo button:hover { border-color: rgb(var(--brand)); }
.task-demo button:focus-visible, .td-window:focus-visible, .td-cta:focus-visible { outline: 3px solid rgb(var(--brand)); outline-offset: 3px; }
.td-tabs button[aria-selected=true], .task-demo button[aria-pressed=true] { border-color: rgb(var(--brand)); background: rgb(var(--brand) / .08); color: rgb(var(--brand)); }
.task-demo button:disabled { opacity: .45; cursor: default; }
.td-window { overflow: hidden; border: 1px solid rgb(var(--line)); border-radius: 16px; background: rgb(var(--surface)); box-shadow: var(--shadow-lg); }
.td-chrome { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--surface-alt)); font-size: 12px; color: rgb(var(--txt-2)); }
.td-chip { border: 1px solid rgb(var(--line)); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.td-stage { min-height: 350px; padding: 28px; }
.td-counter { margin: 0 0 12px; color: rgb(var(--brand)); font-size: 12px; font-weight: 600; }
.td-stage h3 { margin: 0 0 22px; font-size: clamp(18px, 2.5vw, 23px); line-height: 1.5; }
.td-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.td-panels section { min-width: 0; padding: 18px; border: 1px solid rgb(var(--line)); border-radius: 10px; background: rgb(var(--input-bg)); }
.td-panels h4 { font-size: 12px; color: rgb(var(--txt-2)); margin: 0 0 14px; font-weight: 500; }
.td-panels p { margin: 10px 0 0; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.td-panels pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 13px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; }
.td-note { margin: 20px 0 0; color: rgb(var(--txt-2)); font-size: 12px; line-height: 1.8; }
.td-controls { display: flex; justify-content: center; gap: 10px; margin: 20px 0 14px; }
.td-boundary { max-width: 840px; margin: 0 auto 18px; text-align: center; font-size: 12px; }
.td-cta { display: block; width: fit-content; margin: 0 auto; font-size: 14px; font-weight: 600; color: rgb(var(--brand)); }
@media (max-width: 640px) {
  .task-demo { padding: 40px 16px; }
  .td-tabs { grid-template-columns: 1fr; gap: 6px; }
  .td-tabs button { text-align: left; }
  .td-stage { padding: 20px 16px; }
  .td-chrome { padding: 12px 16px; }
  .td-panels { grid-template-columns: 1fr; }
  .td-panels section { padding: 16px; }
  .td-controls { gap: 6px; }
  .td-controls button { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .task-demo *, .task-demo *::before, .task-demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.td-recording { margin: 20px 0; border: 1px solid rgb(var(--line)); border-radius: 12px; padding: 16px; background: rgb(var(--surface)); }
.td-recording summary { cursor: pointer; color: rgb(var(--brand)); font-size: 14px; font-weight: 600; }
.td-recording-title { margin: 16px 0 8px; font-size: 14px; }
.td-recording-meta, .td-recording-status { color: rgb(var(--txt-2)); font-size: 12px; line-height: 1.8; }
.td-recording video { display: block; margin-top: 12px; width: 100%; aspect-ratio: 8 / 5; background: #101827; border-radius: 8px; }
.td-recording:not([open]) video { display: none; }