:root {
  --cw-canvas: var(--tl-background);
  --cw-surface: var(--tl-surface);
  --cw-surface-raised: var(--tl-surface-muted);
  --cw-line: var(--tl-border);
  --cw-line-soft: rgb(var(--tl-divider-rgb));
  --cw-ink: var(--tl-text-primary);
  --cw-body: var(--tl-text-secondary);
  --cw-muted: var(--tl-text-muted);
  --cw-brand: var(--tl-accent);
  --cw-brand-hi: rgb(var(--tl-accent-hover-rgb));
  --cw-brand-soft: rgb(var(--tl-accent-rgb) / 0.12);
  --cw-good: var(--tl-success);
  --cw-danger: var(--tl-error);
  --cw-ease: var(--tl-ease-standard);
  --cw-control-height: var(--tl-control-md);
  --cw-control-radius: var(--tl-radius-md);
  --cw-panel-radius: var(--tl-radius-xl);
  --cw-panel-padding: var(--tl-space-5);
}

.cw-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tl-space-8);
  padding: var(--tl-space-1) 0 var(--tl-space-6);
}

.cw-page-head-compact {
  max-width: var(--tl-content);
}

.cw-page-head h1 {
  max-width: 18ch;
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-3xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: var(--tl-leading-tight);
  text-wrap: balance;
}

.cw-page-head > div > p:last-child {
  max-width: 65ch;
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-body);
  text-wrap: pretty;
}

.cw-context-label {
  margin-bottom: var(--tl-space-2);
  color: var(--cw-brand-hi);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-side-channel {
  padding: var(--tl-space-3);
  border: var(--tl-border-width) solid var(--cw-line-soft);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
}

.cw-side-channel label {
  display: block;
  margin-bottom: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-side-channel select {
  width: 100%;
  color: var(--cw-ink);
  border: 0;
  background: transparent;
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(var(--tl-space-96), 1.14fr);
  min-height: var(--tl-layout-onboarding-min);
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-2xl);
  background: var(--cw-surface);
  box-shadow: var(--tl-shadow-md);
}

.cw-onboarding-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-14);
  background:
    radial-gradient(
      circle at 18% 12%,
      rgb(var(--tl-accent-rgb) / 0.12),
      transparent 38%
    ),
    var(--cw-surface-raised);
}

.cw-step-mark {
  display: inline-grid;
  width: var(--tl-control-md);
  height: var(--tl-control-md);
  margin-bottom: var(--tl-space-6);
  place-items: center;
  color: rgb(var(--tl-on-accent-rgb));
  border-radius: var(--tl-radius-full);
  background: var(--cw-brand);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-xs);
  font-weight: 600;
}

.cw-step-mark svg {
  width: var(--tl-icon-md);
  height: var(--tl-icon-md);
  transform: translateX(var(--tl-border-width));
}

.cw-onboarding-copy h2 {
  max-width: 13ch;
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-2xl);
  font-weight: 800;
  line-height: var(--tl-leading-tight);
  text-wrap: balance;
}

.cw-onboarding-copy > p {
  max-width: 46ch;
  margin-top: var(--tl-space-4);
  color: var(--cw-body);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-body);
}

.cw-check-list {
  display: grid;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-8);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
}

.cw-check-list li {
  display: grid;
  grid-template-columns: var(--tl-space-5) 1fr;
  gap: var(--tl-space-3);
  line-height: var(--tl-leading-snug);
}

.cw-check-list li::before {
  content: "✓";
  color: var(--cw-brand-hi);
  font-weight: 800;
}

.cw-onboarding-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-8);
}

.cw-setup-back {
  align-self: flex-end;
  margin: -var(--tl-space-2) 0 var(--tl-space-4);
}

.cw-import-form {
  padding-bottom: var(--tl-space-8);
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-path-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--tl-space-3-5);
}

.cw-path-heading h3 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-path-heading p {
  margin-top: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-path-icon {
  display: inline-grid;
  width: var(--tl-space-11);
  height: var(--tl-space-11);
  flex: 0 0 auto;
  place-items: center;
  color: var(--cw-brand-hi);
  border: var(--tl-border-width) solid rgb(var(--tl-accent-rgb) / 0.25);
  border-radius: var(--tl-radius-md);
  background: var(--cw-brand-soft);
}

.cw-path-icon svg {
  width: var(--tl-space-5);
  height: var(--tl-space-5);
}

.cw-import-form > label,
.cw-next-form > label,
.cw-ideas-form label {
  display: block;
  margin-top: var(--tl-space-5);
  margin-bottom: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-field-action {
  display: flex;
  align-items: stretch;
  gap: var(--tl-space-2-5);
}

.cw-field-action input,
.cw-next-form textarea,
.cw-ideas-form input {
  min-width: 0;
  color: var(--cw-ink);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-canvas);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-label);
  transition:
    border-color var(--tl-duration-base) var(--cw-ease),
    box-shadow var(--tl-duration-base) var(--cw-ease);
}

.cw-field-action input,
.cw-ideas-form input {
  flex: 1;
  min-height: var(--tl-control-lg);
  padding: var(--tl-space-3) var(--tl-space-3-5);
}

.cw-next-form textarea {
  width: 100%;
  min-height: var(--tl-field-multiline-min);
  padding: var(--tl-space-3-5) var(--tl-space-4);
  resize: vertical;
}

.cw-field-action input::placeholder,
.cw-next-form textarea::placeholder,
.cw-ideas-form input::placeholder {
  color: var(--tl-text-muted);
  opacity: 1;
}

.cw-field-action input:focus-visible,
.cw-next-form textarea:focus-visible,
.cw-ideas-form input:focus-visible {
  border-color: var(--cw-brand-hi);
  box-shadow: 0 0 0 3px rgb(var(--tl-accent-rgb) / 0.14);
}

.cw-help,
.cw-status {
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-status[data-state="error"] {
  color: var(--cw-danger);
}

.cw-status[data-state="success"] {
  color: var(--cw-good);
}

.cw-new-creator {
  padding-top: var(--tl-space-8);
}

.cw-new-actions {
  display: flex;
  align-items: center;
  gap: var(--tl-space-4);
  margin-top: var(--tl-space-5);
  padding-left: var(--tl-space-14);
}

.cw-channel-hero {
  display: grid;
  grid-template-columns: var(--tl-space-44) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-6);
  min-height: var(--tl-layout-channel-hero-min);
  padding: var(--tl-space-5);
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-2xl);
  background: var(--cw-surface);
}

.cw-channel-visual {
  position: relative;
  height: var(--tl-media-preview-height);
  overflow: hidden;
  border-radius: var(--tl-radius-lg);
  background: var(--cw-surface-raised);
}

.cw-channel-visual img {
  position: absolute;
  width: 75%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--tl-border-width) solid rgb(var(--tl-border-strong-rgb));
  border-radius: var(--tl-radius-md);
  box-shadow: var(--tl-shadow-md);
}

.cw-channel-visual img:nth-child(1) {
  inset: 0 auto auto 0;
  z-index: 3;
}

.cw-channel-visual img:nth-child(2) {
  inset: var(--tl-space-8) 0 auto auto;
  z-index: 2;
}

.cw-channel-visual img:nth-child(3) {
  inset: auto auto 0 var(--tl-space-6);
  z-index: 1;
}

.cw-channel-fallback {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--cw-brand-hi);
  border: var(--tl-border-width) solid var(--cw-line);
  background: var(--cw-surface-raised);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-3xl);
  font-weight: 800;
}

.cw-channel-line {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3-5);
}

.cw-source-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tl-space-7);
  padding: var(--tl-space-1) var(--tl-space-2-5);
  color: var(--cw-good);
  border: var(--tl-border-width) solid rgb(var(--tl-success-rgb) / 0.24);
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-success-rgb) / 0.08);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-channel-summary h2 {
  margin-top: var(--tl-space-2-5);
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cw-channel-summary > p {
  max-width: 64ch;
  margin-top: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-1-5);
  margin-top: var(--tl-space-3);
}

.cw-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tl-control-xs);
  padding: var(--tl-space-1) var(--tl-space-2-5);
  color: var(--cw-body);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-full);
  background: var(--cw-surface-raised);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-80);
  gap: var(--tl-space-8);
  margin-top: var(--tl-space-8);
}

.cw-home-main {
  min-width: 0;
}

.cw-next-video {
  padding: var(--tl-space-6);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tl-space-4);
}

.cw-section-heading h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-section-heading p {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2-5);
  margin-top: var(--tl-space-3);
}

.cw-idea-starters,
.cw-recent-work {
  margin-top: var(--tl-space-10);
}

.cw-idea-list,
.cw-idea-results {
  margin-top: var(--tl-space-4);
  border-top: var(--tl-border-width) solid var(--cw-line);
}

.cw-idea-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tl-space-5);
  padding: var(--tl-space-4-5) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-idea-row h3 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
  line-height: var(--tl-leading-label);
}

.cw-idea-row p {
  max-width: 70ch;
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-idea-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2) var(--tl-space-3);
  margin-top: var(--tl-space-2-5);
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
}

.cw-idea-row-actions {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
}

.cw-idea-row-actions .cw-btn {
  white-space: nowrap;
}

.cw-recent-list {
  display: flex;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.cw-recent-item {
  width: min(var(--tl-space-60), 70vw);
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--cw-ink);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
  scroll-snap-align: start;
  text-align: left;
}

.cw-recent-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cw-recent-item span {
  display: block;
  overflow: hidden;
  padding: var(--tl-space-2-5) var(--tl-space-3);
  font-size: var(--tl-text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-empty-inline {
  padding: var(--tl-space-4) 0;
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-dna-rail {
  align-self: start;
  padding: var(--tl-space-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-dna-list {
  margin-top: var(--tl-space-5);
}

.cw-dna-list > div {
  padding: var(--tl-space-3) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-dna-list dt {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-dna-list dd {
  margin-top: var(--tl-space-1);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-brand-readiness {
  margin-top: var(--tl-space-5);
  padding-top: var(--tl-space-4);
}

.cw-readiness-head {
  display: flex;
  justify-content: space-between;
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-readiness-head strong {
  color: var(--cw-body);
}

.cw-readiness-list {
  display: grid;
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-3);
}

.cw-readiness-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tl-control-md);
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
}

.cw-readiness-state {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-readiness-state.is-ready {
  color: var(--cw-good);
}

.cw-create-context {
  min-height: 0;
  margin-bottom: var(--tl-space-4);
}

.cw-builder {
  padding: var(--tl-space-5);
  border-color: rgb(var(--tl-border-rgb));
  background: rgb(var(--tl-surface-rgb));
}

.cw-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-2);
  margin-bottom: var(--tl-space-4);
}

.cw-builder-tabs {
  width: max-content;
  max-width: 100%;
}

.cw-style-preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tl-duration-slow) var(--tl-ease-standard);
}

.group:hover .cw-style-preview-image {
  transform: scale(1.02);
}

.cw-style-check {
  position: absolute;
  top: var(--tl-space-2);
  right: var(--tl-space-2);
  display: grid;
  width: var(--tl-icon-md);
  height: var(--tl-icon-md);
  place-items: center;
  color: rgb(var(--tl-on-primary-rgb));
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-primary-rgb));
  box-shadow: 0 0 0 var(--tl-border-width-strong)
    rgb(var(--tl-overlay-rgb) / 0.36);
  font-size: var(--tl-text-2xs);
  font-weight: 800;
}

.cw-style-badge {
  position: absolute;
  top: var(--tl-space-1);
  left: var(--tl-space-1);
  min-height: var(--tl-control-xs);
  padding-inline: var(--tl-space-2);
  font-size: var(--tl-text-2xs);
}

.cw-style-add {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tl-space-1);
  color: var(--tl-text-muted);
  border: var(--tl-border-width) dashed rgb(var(--tl-border-strong-rgb));
  border-radius: var(--tl-radius-lg);
  background: rgb(var(--tl-surface-rgb));
  font-size: var(--tl-text-xs);
  font-weight: 700;
  transition:
    color var(--tl-duration-base) var(--tl-ease-standard),
    border-color var(--tl-duration-base) var(--tl-ease-standard),
    background-color var(--tl-duration-base) var(--tl-ease-standard);
}

.cw-style-add:hover {
  color: rgb(var(--tl-accent-hover-rgb));
  border-color: rgb(var(--tl-accent-rgb) / 0.55);
  background: var(--tl-interactive-selected);
}

.cw-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--tl-space-8);
  text-align: center;
}

.cw-view-section {
  padding-top: var(--tl-space-1);
}

.cw-account-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-6);
}

.cw-account-metric {
  display: flex;
  min-height: calc(var(--tl-control-lg) * 2);
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-4);
  border: var(--tl-border-width) solid rgb(var(--tl-border-rgb));
  border-radius: var(--tl-radius-lg);
  background: rgb(var(--tl-surface-rgb));
}

.cw-account-metric[data-tone="accent"] {
  border-color: rgb(var(--tl-accent-rgb) / 0.34);
  background: rgb(var(--tl-accent-rgb) / 0.08);
}

.cw-account-metric-label {
  color: var(--tl-text-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-account-metric-value {
  margin-top: var(--tl-space-1);
  color: var(--tl-text-primary);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xl);
  font-weight: 700;
  line-height: var(--tl-leading-tight);
}

.cw-account-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-6);
  margin-top: var(--tl-space-6);
}

.cw-account-panel {
  padding: var(--tl-space-5);
}

.cw-account-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-3);
}

.cw-account-panel-head h2 {
  color: var(--tl-text-primary);
  font-family: var(--tl-font-sans);
  font-size: var(--tl-text-lg);
  font-weight: 750;
}

@media (min-width: 40rem) {
  .cw-account-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .cw-account-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cw-library-card {
  overflow: hidden;
}

.cw-library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-2);
  color: var(--tl-text-muted);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xs);
}

.cw-library-title {
  margin-top: var(--tl-space-1);
  color: var(--tl-text-primary);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-create-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-4);
  padding: var(--tl-space-3) var(--tl-space-4);
  color: var(--cw-body);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
}

.cw-create-channel strong {
  color: var(--cw-ink);
}

.cw-create-channel p {
  margin-top: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-ideas-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-72);
  gap: var(--tl-space-5);
  padding: var(--tl-space-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-ideas-form {
  min-width: 0;
}

.cw-ideas-form > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--tl-space-3);
}

.cw-ideas-form label {
  margin: 0;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-ideas-form > div:first-child p {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-ideas-form .cw-field-action {
  margin-top: var(--tl-space-2-5);
}

.cw-ideas-context {
  padding-left: var(--tl-space-5);
  border-left: var(--tl-border-width) solid var(--cw-line);
}

.cw-ideas-context strong {
  display: block;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-ideas-context p {
  margin-top: var(--tl-space-1-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-ideas-status {
  min-height: var(--tl-space-6);
}

.cw-ideas-empty {
  padding: var(--tl-space-18) var(--tl-space-4);
  text-align: center;
}

.cw-ideas-empty h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-lg);
  font-weight: 800;
}

.cw-ideas-empty p {
  max-width: 48ch;
  margin: var(--tl-space-2) auto 0;
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-result-idea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-68);
  gap: var(--tl-space-8);
  padding: var(--tl-space-6) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-result-idea h2 {
  max-width: 48ch;
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
  line-height: var(--tl-leading-label);
}

.cw-result-hook {
  margin-top: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-result-why {
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-result-support {
  display: grid;
  align-content: start;
  gap: var(--tl-space-2-5);
}

.cw-result-support div {
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-result-support span {
  display: block;
  margin-bottom: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-2xs);
  font-weight: 700;
}

.cw-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-4);
}

.cw-skeleton-row {
  padding: var(--tl-space-6) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-skeleton-line {
  height: var(--tl-space-3);
  overflow: hidden;
  border-radius: var(--tl-radius-full);
  background: var(--cw-surface-raised);
}

.cw-skeleton-line + .cw-skeleton-line {
  width: 72%;
  margin-top: var(--tl-space-2-5);
}

.cw-skeleton-line::after {
  display: block;
  width: 40%;
  height: 100%;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--tl-text-primary-rgb) / 0.08),
    transparent
  );
  animation: cw-shimmer var(--tl-duration-loop) ease-in-out infinite;
}

@keyframes cw-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (max-width: 72rem) {
  .cw-home-layout {
    grid-template-columns: minmax(0, 1fr) var(--tl-space-72);
  }

  .cw-channel-hero {
    grid-template-columns: var(--tl-space-36) minmax(0, 1fr);
  }

  .cw-channel-hero > .cw-btn {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 62rem) {
  .cw-onboarding {
    grid-template-columns: 1fr;
  }

  .cw-onboarding-copy {
    padding: var(--tl-space-9);
  }

  .cw-onboarding-copy h2 {
    max-width: 18ch;
  }

  .cw-home-layout {
    grid-template-columns: 1fr;
  }

  .cw-dna-rail {
    order: initial;
  }

  .cw-dna-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--tl-space-6);
  }

  .cw-ideas-workbench {
    grid-template-columns: 1fr;
  }

  .cw-ideas-context {
    padding: var(--tl-space-4) 0 0;
    border-top: var(--tl-border-width) solid var(--cw-line);
    border-left: 0;
  }
}

@media (max-width: 44rem) {
  .cw-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--tl-space-4);
    padding-bottom: var(--tl-space-5);
  }

  .mobile-tab {
    min-height: var(--tl-space-14);
    padding-bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
  }

  .cw-page-head h1 {
    max-width: 20ch;
    font-size: var(--tl-text-2xl);
  }

  .cw-page-head > .cw-btn {
    width: 100%;
  }

  .cw-builder,
  .cw-loading-panel {
    padding: var(--tl-space-4);
  }

  .cw-builder-tabs {
    width: 100%;
  }

  .cw-builder-tabs .tl-tab {
    flex: 1 1 0;
  }

  .cw-mode-cost {
    display: none;
  }

  .cw-onboarding {
    min-height: 0;
    border-radius: var(--tl-radius-xl);
  }

  .cw-onboarding-copy,
  .cw-onboarding-actions {
    padding: var(--tl-space-5);
  }

  .cw-onboarding-actions {
    order: -1;
    border-bottom: var(--tl-border-width) solid var(--cw-line);
  }

  .cw-onboarding-copy h2 {
    font-size: var(--tl-text-2xl);
  }

  .cw-check-list {
    margin-top: var(--tl-space-6);
  }

  .cw-field-action,
  .cw-new-actions,
  .cw-action-row,
  .cw-idea-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cw-new-actions {
    padding-left: 0;
  }

  .cw-field-action .cw-btn,
  .cw-action-row .cw-btn,
  .cw-idea-row-actions .cw-btn {
    width: 100%;
  }

  .cw-channel-hero {
    grid-template-columns: 1fr;
    gap: var(--tl-space-4);
  }

  .cw-channel-visual {
    height: var(--tl-space-40);
  }

  .cw-channel-hero > .cw-btn {
    grid-column: auto;
    width: 100%;
  }

  .cw-channel-line {
    align-items: flex-start;
    justify-content: space-between;
  }

  .cw-home-layout {
    gap: var(--tl-space-6);
    margin-top: var(--tl-space-6);
  }

  .cw-dna-list {
    grid-template-columns: 1fr;
  }

  .cw-idea-row {
    grid-template-columns: 1fr;
    gap: var(--tl-space-3);
  }

  .cw-ideas-form > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--tl-space-1);
  }

  .cw-result-idea {
    grid-template-columns: 1fr;
    gap: var(--tl-space-4);
  }

  .cw-result-support {
    padding-top: var(--tl-space-3-5);
    border-top: var(--tl-border-width) solid var(--cw-line);
  }

  .cw-create-channel {
    align-items: flex-start;
    flex-direction: column;
  }

  #builderCard > div:first-child > div:first-child {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #builderCard [data-mode] {
    min-height: var(--tl-space-12);
    padding-inline: var(--tl-space-2-5);
    line-height: var(--tl-leading-snug);
  }

  #channelModalBody > div:last-child {
    gap: var(--tl-space-2);
  }

  #chDelete,
  #chCancel,
  #chSave {
    padding-inline: var(--tl-space-3);
    font-size: var(--tl-text-xs);
    white-space: nowrap;
  }
}

@media (pointer: coarse) {
  .cw-text-btn {
    min-height: var(--tl-space-11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-btn,
  .cw-text-btn,
  .cw-icon-btn {
    transition: none;
  }

  .cw-skeleton-line::after {
    animation: none;
    opacity: 0.35;
  }
}