/* Generated by scope_css.py — reference vignette styles scoped under .cairn-demos. Do not hand-edit; regenerate from the reference demo. */
.cairn-demos {
      --paper: var(--ks-color-paper);
      --paper-warm: var(--ks-color-paper-warm);
      --paper-deep: var(--ks-color-paper-deep);
      --ink: var(--ks-color-ink);
      --indigo: var(--ks-color-indigo);
      --indigo-2: var(--ks-color-indigo-2);
      --indigo-deep: var(--ks-color-indigo-deep);
      --ochre: var(--ks-color-ochre);
      --green: var(--ks-color-green);
      --bluegray: var(--ks-color-bluegray);
      /* Food-family data colors from the color.food token group. Fixed literals by design: data semantics do not drift with theme, and the old formulas resolved near-black through the v2 compat shims. */
      --ks-nutrition-viz-slate: var(--ks-color-food-ring);
      --ks-nutrition-viz-clay: var(--ks-color-food-protein);
      --ks-nutrition-viz-sage: var(--ks-color-food-fat);
      --on-dark: var(--ks-color-on-dark);
      --on-dark-soft: var(--ks-color-on-dark-soft);
      --on-dark-muted: var(--ks-color-on-dark-muted);
      --on-dark-line: var(--ks-color-on-dark-line);
      --shadow: var(--ks-shadow-page);
      --ease: var(--ks-ease-out);
      --font-ui: var(--ks-font-ui);
      --font-display: var(--ks-font-display);
      --font-today: var(--ks-font-ui);
    }
.cairn-demos * {
      box-sizing: border-box;
    }
.cairn-demos .page {
      width: min(1220px, calc(100% - 32px));
      margin: 0 auto;
      padding: 44px 0 76px;
    }
.cairn-demos .intro {
      min-height: 360px;
      display: grid;
      align-content: end;
      color: var(--on-dark);
    }
.cairn-demos .eyebrow, .cairn-demos .section-kicker {
      margin: 0 0 12px;
      color: var(--on-dark-muted);
      font-size: 11px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .intro h1 {
      max-width: 880px;
      margin: 0;
      color: var(--on-dark);
      font-family: var(--font-display);
      font-size: clamp(42px, 7vw, 90px);
      line-height: 0.98;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .intro p {
      max-width: 700px;
      margin: 22px 0 0;
      color: var(--on-dark-soft);
      font-size: 17px;
      line-height: 1.62;
    }
.cairn-demos .demo-stack {
      display: grid;
      gap: 42px;
      margin-top: 42px;
    }
.cairn-demos .vignette {
      --duration: 7600ms;
      min-height: 780px;
      display: grid;
      grid-template-columns: minmax(300px, 0.9fr) minmax(390px, 1fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      padding: clamp(24px, 4vw, 46px);
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 12px;
      background: rgba(246, 245, 239, 0.92);
      box-shadow: 0 18px 54px rgba(16, 18, 32, 0.14);
      overflow: hidden;
    }
.cairn-demos .vignette:nth-child(even) {
      grid-template-columns: minmax(390px, 1fr) minmax(300px, 0.9fr);
    }
.cairn-demos .vignette:nth-child(even) .demo-copy {
      order: 2;
    }
.cairn-demos .vignette:nth-child(even) .demo-stage {
      order: 1;
    }
.cairn-demos .section-kicker {
      color: rgba(32, 28, 24, 0.52);
    }
.cairn-demos .demo-copy h2 {
      max-width: 560px;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1.02;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .demo-copy p {
      max-width: 570px;
      margin: 18px 0 0;
      color: rgba(32, 28, 24, 0.68);
      font-size: 16px;
      line-height: 1.64;
    }
.cairn-demos .motion-note {
      display: grid;
      gap: 8px;
      margin-top: 22px;
    }
.cairn-demos .motion-note span {
      display: block;
      padding: 9px 10px;
      border: 1px solid rgba(39, 42, 82, 0.12);
      border-radius: 7px;
      background: rgba(251, 248, 241, 0.72);
      color: rgba(32, 28, 24, 0.62);
      font-size: 12px;
      line-height: 1.4;
    }
.cairn-demos .demo-stage {
      display: grid;
      justify-items: center;
      gap: 14px;
    }
.cairn-demos .phone {
      width: 390px;
      height: 844px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(246, 245, 239, 0.34);
      border-radius: 32px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: var(--shadow);
      isolation: isolate;
    }
.cairn-demos .phone::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      opacity: 0.52;
      background:
        repeating-linear-gradient(7deg, rgba(32, 28, 24, 0.018) 0, rgba(32, 28, 24, 0.018) 1px, transparent 1px, transparent 5px),
        radial-gradient(circle at 38% 18%, rgba(96, 119, 126, 0.06), transparent 28%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--green) 6%, transparent), transparent 26%);
      mix-blend-mode: multiply;
    }
.cairn-demos .phone > * {
      position: relative;
      z-index: 5;
    }
.cairn-demos .status {
      height: 36px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      padding: 0 24px 8px;
      color: rgba(32, 28, 24, 0.72);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .status.on-dark {
      color: var(--on-dark-soft);
    }
.cairn-demos .battery {
      width: 28px;
      height: 11px;
      border: 1.5px solid currentColor;
      border-radius: 3px;
      position: relative;
    }
.cairn-demos .battery::before {
      content: "";
      position: absolute;
      right: -4px;
      top: 3px;
      width: 2px;
      height: 4px;
      border-radius: 0 2px 2px 0;
      background: currentColor;
    }
.cairn-demos .battery::after {
      content: "";
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      width: 17px;
      border-radius: 2px;
      background: currentColor;
    }
.cairn-demos .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 22px 12px;
    }
.cairn-demos .app-kicker {
      margin: 0 0 6px;
      color: rgba(32, 28, 24, 0.54);
      font-size: 11px;
      line-height: 1;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .app-title {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 27px;
      line-height: 1.04;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .header-status {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 11px;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 999px;
      background: rgba(246, 245, 239, 0.72);
      color: rgba(32, 28, 24, 0.62);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .on-dark-ui .app-header, .cairn-demos .on-dark-ui .app-kicker, .cairn-demos .on-dark-ui .app-title {
      color: var(--on-dark);
    }
.cairn-demos .on-dark-ui .header-status {
      border-color: var(--on-dark-line);
      background: rgba(246, 245, 239, 0.13);
      color: var(--on-dark-soft);
    }
.cairn-demos .card-line {
      margin: 0;
      color: var(--ks-today-ink);
      font-size: 13px;
      line-height: 1.32;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .card-small {
      margin: 4px 0 0;
      color: var(--ks-today-ink-soft);
      font-size: 11px;
      line-height: 1.42;
      font-weight: 520;
    }
.cairn-demos .soft-card, .cairn-demos .meal-user-line, .cairn-demos .meal-card, .cairn-demos .state-card, .cairn-demos .today-card {
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 8px;
      background: rgba(249, 248, 242, 0.88);
      box-shadow: 0 10px 22px rgba(39, 42, 82, 0.07);
    }
.cairn-demos .soft-card {
      padding: 11px;
    }
.cairn-demos .label {
      margin: 0 0 8px;
      color: rgba(32, 28, 24, 0.54);
      font-size: 10px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
.cairn-demos .chip {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(39, 42, 82, 0.16);
      border-radius: 5px;
      background: var(--paper-warm);
      color: var(--indigo);
      padding: 0 9px;
      font-size: 11px;
      font-weight: var(--ks-weight-title);
      transition: background-color 240ms ease, color 240ms ease;
    }
.cairn-demos .chip.active {
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .speech {
      margin: 0;
      color: rgba(32, 28, 24, 0.76);
      font-size: 12px;
      line-height: 1.46;
    }
.cairn-demos .progress-rail {
      width: min(390px, 100%);
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.1);
    }
.cairn-demos .progress-rail span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--indigo);
      transform-origin: left center;
      animation: fill-loop var(--duration) linear infinite;
    }
.cairn-demos .mind-screen {
      background:
        linear-gradient(180deg, var(--indigo) 0 49%, var(--paper) 49% 100%);
    }
.cairn-demos .mind-body, .cairn-demos .meal-body {
      display: grid;
      gap: 12px;
      padding: 0 18px 90px;
    }
.cairn-demos .mind-star-map {
      min-height: 256px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(246, 245, 239, 0.18);
      border-radius: 10px;
      background:
        radial-gradient(circle at 20% 20%, rgba(246, 245, 239, 0.26) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 36%, rgba(246, 245, 239, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 72%, rgba(246, 245, 239, 0.14) 0 1px, transparent 2px),
        linear-gradient(180deg, var(--indigo-deep), var(--indigo-2));
      box-shadow: 0 16px 34px rgba(16, 18, 32, 0.2);
    }
.cairn-demos .mind-star {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: var(--s, 9px);
      height: var(--s, 9px);
      border-radius: 50%;
      background: rgba(246, 245, 239, 0.9);
      box-shadow: 0 0 0 5px rgba(246, 245, 239, 0.07);
      opacity: 0.64;
    }
.cairn-demos .mind-star.new {
      width: 15px;
      height: 15px;
      background: var(--ochre);
      opacity: 1;
      box-shadow: 0 0 0 8px rgba(201, 130, 45, 0.18);
      animation: mind-star 7600ms var(--ease) infinite;
    }
.cairn-demos .mind-note {
      position: absolute;
      right: 14px;
      bottom: 14px;
      width: 164px;
      padding: 10px;
      border: 1px solid rgba(246, 245, 239, 0.18);
      border-radius: 7px;
      background: rgba(246, 245, 239, 0.12);
      color: var(--on-dark-soft);
      font-size: 11px;
      line-height: 1.36;
    }
.cairn-demos .mind-note strong {
      display: block;
      margin-bottom: 4px;
      color: var(--on-dark);
      font-size: 12px;
    }
.cairn-demos .mind-input-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
.cairn-demos .mind-screen .soft-card, .cairn-demos .mind-screen .mind-note {
      opacity: 0;
      transform: translateY(10px);
      animation: mind-reveal 7600ms var(--ease) infinite;
    }
.cairn-demos .mind-screen .mind-input-grid .soft-card:first-child {
      animation-delay: 0ms;
    }
.cairn-demos .mind-screen .mind-input-grid .soft-card:nth-child(2) {
      animation-delay: 900ms;
    }
.cairn-demos .mind-screen .mind-note {
      animation-delay: 1700ms;
    }
.cairn-demos .mind-screen .mind-result {
      animation-delay: 2400ms;
    }
.cairn-demos .meals-screen {
      background:
        linear-gradient(180deg, rgba(39, 42, 82, 0.1), rgba(246, 245, 239, 0.96) 34%),
        var(--paper);
    }
.cairn-demos .meal-user-line {
      min-height: 62px;
      display: grid;
      align-content: center;
      padding: 13px;
      color: rgba(32, 28, 24, 0.72);
      font-size: 13px;
      line-height: 1.42;
      opacity: 0;
      transform: translateY(10px);
      animation: show-hold 8200ms var(--ease) infinite;
    }
.cairn-demos .meal-card {
      min-height: 232px;
      position: relative;
      padding: 15px;
      background: var(--paper-warm);
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      animation: show-hold 8200ms var(--ease) infinite 900ms;
    }
.cairn-demos .meal-version {
      position: absolute;
      inset: 15px;
      opacity: 0;
      transform: translateY(8px);
    }
.cairn-demos .meal-version.initial {
      animation: meal-initial 8200ms var(--ease) infinite;
    }
.cairn-demos .meal-version.final {
      animation: meal-final 8200ms var(--ease) infinite;
    }
.cairn-demos .meal-card h3 {
      margin: 0 0 9px;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 25px;
      line-height: 1.06;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .meal-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 13px;
    }
.cairn-demos .meal-meta span {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(39, 42, 82, 0.08);
      color: rgba(32, 28, 24, 0.62);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .macro-line {
      display: grid;
      grid-template-columns: 62px 1fr 36px;
      gap: 9px;
      align-items: center;
      margin-top: 9px;
      color: rgba(32, 28, 24, 0.66);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .macro-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.1);
    }
.cairn-demos .macro-track span {
      display: block;
      width: var(--fill);
      height: 100%;
      border-radius: inherit;
      background: var(--bluegray);
    }
.cairn-demos .meal-chip-row {
      opacity: 0;
      transform: translateY(8px);
      animation: show-hold 8200ms var(--ease) infinite 1800ms;
    }
.cairn-demos .meal-chip-row .chip:nth-child(2) {
      animation: chip-select 8200ms ease infinite;
    }
.cairn-demos .chat-screen {
      background:
        linear-gradient(180deg, var(--indigo) 0 142px, var(--paper) 142px);
    }
.cairn-demos .chat-thread {
      display: grid;
      gap: 12px;
      padding: 14px 18px 92px;
    }
.cairn-demos .bubble, .cairn-demos .care-context, .cairn-demos .state-card {
      opacity: 0;
      transform: translateY(10px);
      animation: chat-reveal 9800ms var(--ease) infinite;
    }
.cairn-demos .chat-thread > *:nth-child(1) { animation-delay: 0ms; }
.cairn-demos .chat-thread > *:nth-child(2) { animation-delay: 900ms; }
.cairn-demos .chat-thread > *:nth-child(3) { animation-delay: 1800ms; }
.cairn-demos .chat-thread > *:nth-child(4) { animation-delay: 2800ms; }
.cairn-demos .chat-thread > *:nth-child(5) { animation-delay: 3900ms; }
.cairn-demos .chat-thread > *:nth-child(6) { animation-delay: 5600ms; }
.cairn-demos .bubble {
      width: fit-content;
      max-width: 83%;
      padding: 12px 13px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.45;
    }
.cairn-demos .bubble.user {
      justify-self: end;
      border-color: var(--on-dark-line);
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .bubble.agent {
      justify-self: start;
      background: var(--paper-warm);
      color: rgba(32, 28, 24, 0.78);
    }
.cairn-demos .care-context {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
    }
.cairn-demos .context-chip {
      min-height: 68px;
      padding: 10px;
      border: 1px solid var(--on-dark-line);
      border-radius: 8px;
      background: rgba(246, 245, 239, 0.08);
      color: var(--on-dark);
    }
.cairn-demos .context-chip span {
      display: block;
      margin-bottom: 6px;
      color: var(--on-dark-muted);
      font-size: 9px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .context-chip strong {
      display: block;
      font-size: 11px;
      line-height: 1.25;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .state-card {
      padding: 14px;
      border-color: rgba(246, 245, 239, 0.22);
      background: rgba(246, 245, 239, 0.1);
      color: var(--on-dark);
    }
.cairn-demos .state-card .card-small {
      color: var(--on-dark-muted);
    }
.cairn-demos .state-card h3 {
      margin: 8px 0 8px;
      color: var(--on-dark);
      font-family: var(--font-display);
      font-size: 22px;
      line-height: 1.08;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .button-row, .cairn-demos .mini-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }
.cairn-demos .primary-button, .cairn-demos .secondary-button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 6px;
      padding: 0 14px;
      font-size: 12px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .primary-button {
      background: var(--paper-warm);
      color: var(--indigo);
    }
.cairn-demos .secondary-button {
      background: rgba(246, 245, 239, 0.12);
      color: var(--on-dark);
    }
.cairn-demos .today-screen {
      background:
        linear-gradient(180deg, rgba(39, 42, 82, 0.78) 0 232px, rgba(246, 245, 239, 0.94) 232px 100%),
        var(--ks-hero-image);
      background-position: center bottom;
      background-size: cover;
    }
.cairn-demos .today-lead, .cairn-demos .today-card {
      opacity: 0;
      transform: translateY(10px);
      animation: today-reveal 8400ms var(--ease) infinite;
    }
.cairn-demos .today-lead {
      margin: 12px 22px 18px;
      padding: 16px;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 8px;
      background: rgba(246, 245, 239, 0.92);
      color: var(--ink);
      box-shadow: 0 18px 36px rgba(39, 42, 82, 0.16);
    }
.cairn-demos .today-lead p {
      margin: 0 0 7px;
      color: rgba(32, 28, 24, 0.56);
      font-size: 11px;
      line-height: 1.35;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .today-lead h3 {
      margin: 0 0 8px;
      font-family: var(--font-display);
      font-size: 27px;
      line-height: 1.04;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .today-lead span {
      display: block;
      color: rgba(32, 28, 24, 0.68);
      font-size: 13px;
      line-height: 1.45;
    }
.cairn-demos .today-feed {
      height: calc(100% - 296px);
      padding: 0 16px 142px;
      overflow: hidden;
      mask-image: linear-gradient(180deg, #000 0 calc(100% - 54px), transparent 100%);
    }
.cairn-demos .card-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
    }
.cairn-demos .today-card {
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px 13px;
      background: rgba(249, 248, 242, 0.9);
    }
.cairn-demos .today-card.primary {
      background: var(--ks-today-card-decision);
      border-color: var(--ks-today-decision-line);
    }
.cairn-demos .today-card.completed {
      background: color-mix(in srgb, var(--ks-color-paper-warm) 76%, var(--green) 24%);
    }
.cairn-demos .today-card:nth-child(1) { animation-delay: 900ms; }
.cairn-demos .today-card:nth-child(2) { animation-delay: 1800ms; }
.cairn-demos .today-card:nth-child(3) { animation-delay: 2700ms; }
.cairn-demos .span-6 {
      grid-column: span 6;
    }
.cairn-demos .mini-actions {
      margin-top: 0;
    }
.cairn-demos .mini-actions button {
      min-height: 30px;
      border: 1px solid rgba(39, 42, 82, 0.16);
      border-radius: 5px;
      background: var(--paper-warm);
      color: var(--indigo);
      padding: 0 10px;
      font-size: 11px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .mini-actions .yes {
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .bottom-nav {
      position: absolute;
      left: var(--ks-app-nav-left);
      bottom: var(--ks-app-nav-bottom);
      width: var(--ks-app-nav-width);
      height: var(--ks-app-nav-height);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      padding: var(--ks-app-nav-padding);
      border-radius: var(--ks-app-nav-radius);
      background: var(--ks-app-nav-bg);
      border: 1px solid var(--ks-app-nav-line);
      box-shadow:
        var(--ks-app-nav-shadow),
        var(--ks-app-nav-inset-light);
      z-index: 28;
    }
.cairn-demos .bottom-nav button {
      display: grid;
      grid-template-rows: var(--ks-app-nav-icon-size) auto;
      place-items: center;
      gap: var(--ks-app-nav-button-gap);
      height: 100%;
      border: 0;
      border-radius: var(--ks-app-nav-button-radius);
      background: transparent;
      color: var(--ks-app-nav-inactive);
      font-family: var(--font-ui);
      font-size: var(--ks-app-nav-label-size);
      font-weight: var(--ks-app-nav-label-weight);
      letter-spacing: 0;
      cursor: pointer;
      transition: color 150ms var(--ease), background-color 150ms var(--ease);
    }
.cairn-demos .bottom-nav svg {
      width: var(--ks-app-nav-icon-size);
      height: var(--ks-app-nav-icon-size);
      fill: none;
      stroke: currentColor;
      stroke-width: var(--ks-app-nav-icon-stroke);
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .bottom-nav button span {
      line-height: var(--ks-app-nav-label-leading);
      white-space: nowrap;
    }
.cairn-demos .bottom-nav .active {
      color: var(--ks-app-nav-active);
      background: transparent;
      font-weight: var(--ks-app-nav-label-active-weight);
    }
.cairn-demos .caption {
      width: min(390px, 100%);
      padding: 13px 14px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 8px;
      background: rgba(246, 245, 239, 0.9);
      color: rgba(32, 28, 24, 0.64);
      font-size: 12px;
      line-height: 1.45;
    }
.cairn-demos .caption strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 13px;
    }
.cairn-demos .vignette-player {
      --step-progress: 0;
    }
.cairn-demos .player-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 22px;
    }
.cairn-demos .stage-chip, .cairn-demos .replay-button {
      min-height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(39, 42, 82, 0.14);
      background: rgba(251, 248, 241, 0.7);
      color: rgba(32, 28, 24, 0.6);
      font: var(--ks-weight-action) 11px/1 var(--font-ui);
      letter-spacing: 0;
      padding: 0 10px;
      cursor: pointer;
      transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
    }
.cairn-demos .stage-chip[aria-current="step"] {
      background: var(--indigo);
      color: var(--on-dark);
      border-color: rgba(39, 42, 82, 0.28);
    }
.cairn-demos .replay-button {
      margin-left: 2px;
      color: var(--indigo);
      background: rgba(80, 97, 125, 0.08);
    }
.cairn-demos .stage-chip:active, .cairn-demos .replay-button:active {
      transform: scale(0.97);
    }
.cairn-demos .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
.cairn-demos .progress-rail span {
      transform: scaleX(var(--step-progress));
      animation: none;
      transition: transform 360ms var(--ease);
    }
.cairn-demos .product-phone {
      background:
        linear-gradient(180deg, rgba(246, 245, 239, 0.97), rgba(251, 248, 241, 0.98) 58%, var(--ks-color-paper-warm));
    }
.cairn-demos .w1-phone {
      --w1-ease: cubic-bezier(0.18, 0.82, 0.2, 1);
      --w1-amber: #d9b66f;
      --w1-stone: #667984;
      --w1-sage: #8f9b9a;
      --w1-sky-top: #52617e;
      background:
        linear-gradient(180deg, var(--night) 0 57%, var(--paper-soft) 57% 100%);
      box-shadow: 0 24px 60px rgba(18, 20, 42, 0.28);
    }
.cairn-demos .w1-phone .status {
      position: absolute;
      left: 22px;
      right: 22px;
      top: 18px;
      z-index: 18;
      height: auto;
      padding: 0;
      align-items: center;
      color: var(--on-dark);
      font-size: 12px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .w1-phone .app-header {
      position: absolute;
      left: 22px;
      right: 22px;
      top: 58px;
      z-index: 15;
      display: flex;
      justify-content: space-between;
      align-items: start;
      color: var(--on-dark);
    }
.cairn-demos .w1-phone .app-header span {
      display: block;
      margin-bottom: 4px;
      color: rgba(246, 241, 230, 0.62);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .w1-phone .app-header b {
      font-family: var(--font-display);
      font-size: 31px;
      line-height: 1;
    }
.cairn-demos .w1-phone .privacy {
      padding: 9px 12px;
      border: 1px solid rgba(246, 241, 230, 0.18);
      border-radius: 999px;
      color: rgba(246, 241, 230, 0.76);
      background: rgba(246, 241, 230, 0.08);
      font-size: 11px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .w1-phone .sky {
      position: absolute;
      inset: 0 0 41% 0;
      overflow: hidden;
      border-radius: 32px 32px 22px 22px;
      background:
        radial-gradient(circle at 52% 50%, rgba(96, 119, 126, 0.25), transparent 0 102px),
        radial-gradient(circle at 18% 20%, rgba(180, 122, 60, 0.12), transparent 0 74px),
        linear-gradient(180deg, var(--w1-sky-top) 0%, #2d3561 45%, #1d254d 100%);
    }
.cairn-demos .w1-phone .sky::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 10% 24%, rgba(246, 241, 230, 0.56) 0 0.8px, transparent 1.6px),
        radial-gradient(circle at 31% 12%, rgba(246, 241, 230, 0.32) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 72% 18%, rgba(246, 241, 230, 0.48) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 87% 35%, rgba(180, 122, 60, 0.55) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 14% 78%, rgba(246, 241, 230, 0.3) 0 0.8px, transparent 1.5px);
      background-size: 96px 84px, 132px 118px, 150px 130px, 124px 104px, 138px 116px;
      opacity: 0.72;
      mix-blend-mode: screen;
    }
.cairn-demos .w1-phone .planet-svg {
      position: absolute;
      inset: 82px 0 0;
      width: 100%;
      height: 360px;
    }
.cairn-demos .w1-phone .orbit {
      fill: none;
      stroke: rgba(246, 241, 230, 0.24);
      stroke-width: 0.7;
      stroke-dasharray: 1 7;
    }
.cairn-demos .w1-phone .target-orbit {
      fill: none;
      stroke: rgba(216, 182, 108, 0);
      stroke-width: 1.2;
      stroke-dasharray: 2 7;
      transition: stroke 240ms var(--w1-ease);
    }
.cairn-demos .w1-phone[data-phase="4"] .target-orbit, .cairn-demos .w1-phone[data-phase="5"] .target-orbit {
      stroke: rgba(216, 182, 108, 0.58);
    }
.cairn-demos .w1-phone .planet {
      fill: var(--w1-stone);
    }
.cairn-demos .w1-phone .planet-line {
      fill: none;
      stroke: rgba(246, 241, 230, 0.22);
      stroke-linecap: round;
      stroke-width: 0.7;
    }
.cairn-demos .w1-phone .moon {
      fill: var(--w1-sage);
      opacity: 0.78;
    }
.cairn-demos .w1-phone .moon.warm {
      fill: var(--ochre);
    }
.cairn-demos .w1-phone .moon.bone {
      fill: #d8c8b8;
      opacity: 0.95;
    }
.cairn-demos .w1-phone .mini-io {
      position: absolute;
      left: var(--ks-quick-chat-surface-inline-start);
      right: var(--ks-quick-chat-surface-inline-end-with-orb);
      bottom: var(--ks-quick-chat-surface-bottom);
      z-index: 22;
      display: grid;
      gap: var(--ks-quick-chat-surface-gap);
      min-height: var(--ks-quick-chat-surface-min-height);
      padding: var(--ks-quick-chat-surface-padding);
      border: 1px solid rgba(246, 241, 230, 0.18);
      border-radius: var(--ks-quick-chat-surface-radius);
      background: var(--ks-quick-chat-surface-bg);
      box-shadow: 0 18px 44px rgba(11, 13, 30, 0.24);
      color: rgba(32, 28, 24, 0.78);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.98);
      transition: opacity 260ms var(--w1-ease), transform 360ms var(--w1-ease);
    }
.cairn-demos .w1-phone[data-phase="1"] .mini-io, .cairn-demos .w1-phone[data-phase="2"] .mini-io, .cairn-demos .w1-phone[data-phase="5"] .mini-io {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
.cairn-demos .w1-phone[data-phase="3"] .mini-io, .cairn-demos .w1-phone[data-phase="4"] .mini-io {
      opacity: 0.28;
      transform: translateY(16px) scale(0.97);
    }
.cairn-demos .w1-phone[data-chat="open"] .chat-fab {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      z-index: 34;
    }
.cairn-demos .w1-phone[data-chat="open"] .mini-io {
      left: var(--ks-quick-chat-surface-inline-start);
      right: var(--ks-quick-chat-surface-inline-end-with-orb);
      bottom: var(--ks-quick-chat-surface-bottom);
      z-index: 32;
      gap: 9px;
      min-height: var(--ks-quick-chat-surface-min-height);
      padding: var(--ks-quick-chat-surface-padding);
      border-color: var(--ks-quick-chat-surface-line);
      border-radius: var(--ks-quick-chat-surface-radius);
      box-shadow: 0 18px 44px rgba(11, 13, 30, 0.2);
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
.cairn-demos .w1-phone[data-phase="2"][data-chat="closed"] .mini-io {
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.98);
    }
.cairn-demos .w1-phone .io-head {
      display: none;
    }
.cairn-demos .w1-phone .io-label {
      color: rgba(32, 28, 24, 0.5);
      font-size: 10px;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
      letter-spacing: 0;
      text-transform: uppercase;
    }
.cairn-demos .w1-phone .reject-mini {
      border: 0;
      border-radius: 8px;
      padding: 8px 10px;
      color: var(--indigo);
      background: rgba(39, 42, 82, 0.08);
      font: inherit;
      font-size: 10.5px;
      font-weight: var(--ks-weight-action);
      cursor: pointer;
    }
.cairn-demos .w1-phone .io-line, .cairn-demos .w1-phone .io-output {
      display: flex;
      align-items: center;
      gap: 8px;
    }
.cairn-demos .w1-phone .io-line {
      padding-right: 50px;
    }
.cairn-demos .w1-phone[data-chat="open"] .io-line {
      display: none;
      order: 4;
      min-height: var(--ks-quick-chat-input-height);
      padding: 7px 9px;
      border: 1px solid rgba(32, 28, 24, 0.09);
      border-radius: 999px;
      background: var(--ks-quick-chat-input-bg);
    }
.cairn-demos .w1-phone[data-chat="open"][data-composer="open"] .io-line {
      display: flex;
    }
.cairn-demos .w1-phone[data-chat="open"] .typed-note:empty::before {
      content: "Add another note";
      color: var(--ks-quick-chat-placeholder-color);
    }
.cairn-demos .w1-phone[data-chat="open"] .io-output {
      display: none;
    }
.cairn-demos .w1-phone .mini-thread {
      display: none;
    }
.cairn-demos .w1-phone[data-chat="open"] .mini-thread {
      display: grid;
      gap: 7px;
      padding-top: 2px;
    }
.cairn-demos .w1-phone .mini-turn {
      display: none;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(8px);
      transition: max-height 320ms var(--w1-ease), opacity 240ms var(--w1-ease), transform 280ms var(--w1-ease);
    }
.cairn-demos .w1-phone[data-chat="open"][data-thread-step="1"] .mini-turn:nth-child(1), .cairn-demos .w1-phone[data-chat="open"][data-thread-step="2"] .mini-turn:nth-child(-n + 2), .cairn-demos .w1-phone[data-chat="open"][data-thread-step="3"] .mini-turn:nth-child(-n + 3), .cairn-demos .w1-phone[data-chat="open"][data-thread-step="4"] .mini-turn:nth-child(-n + 4), .cairn-demos .w1-phone[data-chat="open"][data-thread-step="5"] .mini-turn:nth-child(-n + 4) {
      display: flex;
      max-height: 96px;
      opacity: 1;
      transform: translateY(0);
      animation: w1-thread-reveal 280ms var(--w1-ease) both;
    }
.cairn-demos .w1-phone .mini-turn.user {
      justify-self: stretch;
    }
.cairn-demos .w1-phone .mini-turn.agent {
      justify-self: start;
      align-items: center;
    }
.cairn-demos .w1-phone .mini-turn p {
      margin: 0;
      padding: 8px 10px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 11px;
      background: var(--ks-quick-chat-answer-bg);
      color: var(--ks-quick-chat-answer-color);
      font-size: var(--ks-quick-chat-answer-size);
      line-height: 1.32;
      font-weight: var(--ks-quick-chat-answer-weight);
    }
.cairn-demos .w1-phone .mini-turn.user p {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ks-quick-chat-question-color);
      font-size: var(--ks-quick-chat-question-size);
      line-height: 1.34;
      font-weight: var(--ks-quick-chat-question-weight);
    }
.cairn-demos .w1-phone .mini-agent-avatar {
      flex: 0 0 auto;
      width: var(--ks-quick-chat-avatar-width);
      height: var(--ks-quick-chat-avatar-height);
      border-radius: 10px;
      object-fit: cover;
      transform: rotate(-7deg);
      filter: drop-shadow(0 4px 8px rgba(39, 42, 82, 0.12));
    }
.cairn-demos .w1-phone .mini-thinking {
      display: none;
      width: var(--ks-quick-chat-thinking-size);
      height: var(--ks-quick-chat-thinking-size);
      border-radius: 50%;
      border: 2px solid rgba(80, 97, 125, 0.16);
      border-top-color: rgba(80, 97, 125, 0.72);
      background: rgba(246, 245, 239, 0.62);
      animation: w1-thinking-spin 820ms linear infinite;
    }
.cairn-demos .w1-phone[data-thinking="1"] .mini-turn:nth-child(2) .mini-thinking, .cairn-demos .w1-phone[data-thinking="2"] .mini-turn:nth-child(4) .mini-thinking {
      display: block;
    }
.cairn-demos .w1-phone[data-thinking="1"] .mini-turn:nth-child(2) p, .cairn-demos .w1-phone[data-thinking="2"] .mini-turn:nth-child(4) p {
      display: none;
    }
.cairn-demos .w1-phone .io-voice-wave {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
      align-items: center;
      justify-items: center;
      border-radius: 50%;
      background: rgba(180, 122, 60, 0.12);
    }
.cairn-demos .w1-phone .io-voice-wave i {
      width: 3px;
      height: var(--h);
      border-radius: 999px;
      background: var(--ochre);
      animation: voice-meter 760ms var(--w1-ease) infinite alternate;
    }
.cairn-demos .w1-phone .io-voice-wave i:nth-child(2) { animation-delay: 120ms; }
.cairn-demos .w1-phone .io-voice-wave i:nth-child(3) { animation-delay: 220ms; }
.cairn-demos .w1-phone .io-voice-wave i:nth-child(4) { animation-delay: 80ms; }
.cairn-demos .w1-phone:not([data-phase="1"]) .io-voice-wave i {
      animation: none;
      background: rgba(39, 42, 82, 0.24);
    }
.cairn-demos .w1-phone[data-chat="open"][data-composer="open"] .io-voice-wave i {
      animation: voice-meter 760ms var(--w1-ease) infinite alternate;
      background: var(--ochre);
    }
.cairn-demos .w1-phone .io-text, .cairn-demos .w1-phone .agent-line {
      margin: 0;
      min-width: 0;
      color: rgba(32, 28, 24, 0.76);
      font-size: var(--ks-quick-chat-question-size);
      line-height: 1.35;
      font-weight: var(--ks-quick-chat-question-weight);
    }
.cairn-demos .w1-phone .agent-line {
      color: rgba(32, 28, 24, 0.84);
      font-weight: var(--ks-quick-chat-answer-weight);
    }
.cairn-demos .w1-phone .caret {
      display: inline-block;
      width: 1px;
      height: 14px;
      margin-left: 2px;
      vertical-align: -2px;
      background: rgba(32, 28, 24, 0.42);
      animation: w1-caret-blink 900ms steps(1) infinite;
    }
.cairn-demos .w1-phone:not([data-phase="1"]) .caret {
      opacity: 0;
      animation: none;
    }
.cairn-demos .w1-phone[data-composer="open"] .caret {
      opacity: 1;
      animation: w1-caret-blink 900ms steps(1) infinite;
    }
.cairn-demos .w1-phone .io-output {
      display: none;
      padding-top: 2px;
    }
.cairn-demos .w1-phone[data-phase="2"] .io-output, .cairn-demos .w1-phone[data-phase="5"] .io-output {
      display: flex;
    }
.cairn-demos .w1-phone[data-chat="open"] .io-output {
      display: none;
    }
.cairn-demos .w1-phone[data-chat="open"][data-thread-step="5"] .io-output {
      display: flex;
    }
.cairn-demos .w1-phone .io-actions {
      display: none;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 1px;
    }
.cairn-demos .w1-phone[data-phase="2"] .io-actions, .cairn-demos .w1-phone[data-phase="5"] .io-actions {
      display: flex;
    }
.cairn-demos .w1-phone[data-chat="open"] .io-actions {
      display: none;
    }
.cairn-demos .w1-phone[data-chat="open"][data-thread-step="5"] .io-actions {
      display: flex;
    }
.cairn-demos .w1-phone[data-phase="5"] .approve-mini {
      display: none;
    }
.cairn-demos .w1-phone .io-actions button {
      border: 0;
      border-radius: 999px;
      min-height: 30px;
      padding: 7px 11px;
      font: inherit;
      font-size: 10.5px;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
      cursor: pointer;
    }
.cairn-demos .w1-phone .chat-fab {
      position: absolute;
      right: var(--ks-quick-chat-orb-right);
      bottom: var(--ks-quick-chat-surface-bottom);
      z-index: 30;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--ks-quick-chat-orb-size);
      height: var(--ks-quick-chat-orb-size);
      padding: 0;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(216, 200, 184, 0.14)),
        rgba(246, 245, 239, 0.94);
      color: var(--indigo);
      box-shadow:
        0 12px 24px rgba(39, 42, 82, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      font: inherit;
      overflow: visible;
      isolation: isolate;
      cursor: pointer;
      transition: opacity 180ms ease, transform 180ms var(--w1-ease), background-color 150ms ease, box-shadow 180ms ease;
    }
.cairn-demos .w1-phone .chat-fab::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 1;
      border-radius: inherit;
      background:
        radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.7px),
        radial-gradient(circle at 64% 38%, rgba(80, 97, 125, 0.08) 0 2px, transparent 2.8px),
        linear-gradient(135deg, rgba(216, 200, 184, 0.24), rgba(255, 255, 255, 0));
      background-size: 18px 16px, 26px 22px, 100% 100%;
      opacity: 0.78;
      pointer-events: none;
    }
.cairn-demos .w1-phone .chat-fab::after {
      content: "";
      position: absolute;
      left: 13px;
      right: 14px;
      bottom: 8px;
      z-index: 1;
      height: 10px;
      border-radius: 50%;
      background: rgba(80, 97, 125, 0.09);
      pointer-events: none;
    }
.cairn-demos .w1-phone .fab-mascot-window {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      border-radius: 50%;
      pointer-events: none;
    }
.cairn-demos .w1-phone .chat-fab img {
      position: absolute;
      left: 102%;
      top: 64%;
      width: 88px;
      height: 96px;
      border-radius: 16px;
      object-fit: cover;
      transform: translate(-50%, -50%) rotate(-14deg);
      transform-origin: 48% 58%;
    }
.cairn-demos .w1-phone .fab-bubble {
      position: absolute;
      left: 5px;
      top: 6px;
      width: 18px;
      height: 14px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2.5px;
      border: 1px solid rgba(246, 245, 239, 0.68);
      border-radius: 999px;
      background: rgba(39, 42, 82, 0.92);
      box-shadow: 0 5px 12px rgba(39, 42, 82, 0.16);
      pointer-events: none;
    }
.cairn-demos .w1-phone .fab-bubble i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--on-dark);
    }
.cairn-demos .w1-phone .fab-bubble::before {
      content: "";
      display: none;
    }
.cairn-demos .w1-phone .chat-fab.is-voice {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(143, 155, 154, 0.12)),
        rgba(246, 245, 239, 0.94);
    }
.cairn-demos .w1-phone .chat-fab.is-voice .fab-bubble {
      left: 4px;
      top: 6px;
      width: 25px;
      height: 20px;
      border: 1px solid rgba(246, 245, 239, 0.42);
      border-radius: 999px;
      background: var(--indigo);
      box-shadow: 0 5px 12px rgba(39, 42, 82, 0.14);
    }
.cairn-demos .w1-phone .chat-fab.is-voice .fab-bubble i {
      position: absolute;
      display: block;
      width: 2.2px;
      height: 10px;
      border-radius: 999px;
      background: rgba(246, 241, 230, 0.95);
    }
.cairn-demos .w1-phone .chat-fab.is-voice .fab-bubble i:first-child {
      left: 7px;
      top: 5px;
    }
.cairn-demos .w1-phone .chat-fab.is-voice .fab-bubble i:last-child {
      right: 7px;
      top: 7px;
      height: 6px;
    }
.cairn-demos .w1-phone .chat-fab.is-voice .fab-bubble::before {
      position: absolute;
      left: 50%;
      top: 3px;
      display: block;
      width: 2.4px;
      height: 14px;
      border-radius: 999px;
      background: rgba(246, 241, 230, 0.98);
      transform: translateX(-50%);
    }
.cairn-demos .w1-phone .chat-fab.is-listening {
      box-shadow:
        0 0 0 8px rgba(180, 122, 60, 0.14),
        0 12px 24px rgba(39, 42, 82, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      transform: scale(1.04);
    }
.cairn-demos .w1-phone .chat-fab:active {
      transform: scale(0.97);
    }
.cairn-demos .w1-phone .io-actions .approve, .cairn-demos .w1-phone .center-confirm {
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .w1-phone .io-actions .reject-mini {
      background: rgba(39, 42, 82, 0.08);
      color: var(--indigo);
    }
.cairn-demos .w1-phone .global-motion-layer {
      position: absolute;
      inset: 0;
      z-index: 17;
      pointer-events: none;
    }
.cairn-demos .w1-phone[data-phase="3"] .global-motion-layer, .cairn-demos .w1-phone[data-phase="4"] .global-motion-layer {
      z-index: 30;
      pointer-events: auto;
    }
.cairn-demos .w1-phone .focus-field {
      position: absolute;
      inset: 0;
      opacity: 0;
      background:
        radial-gradient(circle at 50% 43%, rgba(246, 241, 230, 0.08), transparent 0 98px),
        rgba(12, 15, 33, 0.54);
      transition: opacity 360ms var(--w1-ease);
      pointer-events: none;
    }
.cairn-demos .w1-phone[data-phase="3"] .focus-field, .cairn-demos .w1-phone[data-phase="4"] .focus-field {
      opacity: 1;
    }
.cairn-demos .w1-phone .source-tether {
      position: absolute;
      left: 58px;
      right: 58px;
      top: 514px;
      height: 112px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms var(--w1-ease);
    }
.cairn-demos .w1-phone[data-phase="3"] .source-tether {
      opacity: 0.72;
    }
.cairn-demos .w1-phone .source-tether svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
.cairn-demos .w1-phone .source-tether path {
      fill: none;
      stroke: rgba(216, 182, 108, 0.42);
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-dasharray: 2 7;
    }
.cairn-demos .w1-phone .center-satellite {
      position: absolute;
      left: 50%;
      top: 386px;
      width: 104px;
      height: 104px;
      margin: -52px 0 0 -52px;
      border: 1px solid rgba(246, 241, 230, 0.58);
      border-radius: 50%;
      background:
        linear-gradient(160deg, rgba(246, 241, 230, 0.26), transparent 38%),
        radial-gradient(circle at 48% 38%, #f1dcaa 0 13%, var(--w1-amber) 14% 58%, var(--ochre) 59% 100%);
      box-shadow:
        0 0 0 26px rgba(216, 182, 108, 0.12),
        0 18px 46px rgba(8, 10, 22, 0.38);
      opacity: 0;
      transform: scale(0.35);
      pointer-events: none;
      transition: opacity 340ms var(--w1-ease), transform 520ms var(--w1-ease);
      z-index: 4;
    }
.cairn-demos .w1-phone .center-satellite::before {
      content: "";
      position: absolute;
      left: 32px;
      top: 43px;
      width: 42px;
      height: 2px;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.24);
      box-shadow: 5px 12px 0 rgba(32, 28, 24, 0.16);
      transform: rotate(-7deg);
    }
.cairn-demos .w1-phone .center-satellite::after {
      content: "Restless";
      position: absolute;
      left: 50%;
      top: calc(100% + 16px);
      transform: translateX(-50%);
      padding: 7px 11px;
      border: 1px solid rgba(246, 241, 230, 0.22);
      border-radius: 999px;
      background: rgba(39, 42, 82, 0.72);
      color: var(--on-dark);
      font-size: 11px;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
    }
.cairn-demos .w1-phone[data-phase="3"] .center-satellite {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
.cairn-demos .w1-phone .center-confirm {
      position: absolute;
      left: 50%;
      top: 480px;
      transform: translateX(-50%);
      min-height: 34px;
      padding: 8px 13px;
      border: 0;
      border-radius: 999px;
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 12px 24px rgba(8, 10, 22, 0.26);
      font: inherit;
      font-size: 11px;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
      transition: opacity 280ms var(--w1-ease), transform 340ms var(--w1-ease);
      z-index: 5;
      cursor: pointer;
    }
.cairn-demos .w1-phone[data-phase="3"] .center-confirm {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
.cairn-demos .w1-phone .flight-path {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
    }
.cairn-demos .w1-phone .flight-path path {
      fill: none;
      stroke: rgba(216, 182, 108, 0.54);
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-dasharray: 3 8;
    }
.cairn-demos .w1-phone[data-phase="4"] .flight-path {
      opacity: 1;
      animation: w1-path-fade 3200ms var(--w1-ease) forwards;
    }
.cairn-demos .w1-phone .travel-satellite {
      position: absolute;
      left: 0;
      top: 0;
      width: 72px;
      height: 72px;
      margin: 0;
      border: 1px solid rgba(246, 241, 230, 0.58);
      border-radius: 50%;
      background:
        linear-gradient(160deg, rgba(246, 241, 230, 0.26), transparent 38%),
        radial-gradient(circle at 48% 38%, #f1dcaa 0 13%, var(--w1-amber) 14% 58%, var(--ochre) 59% 100%);
      box-shadow: 0 0 0 22px rgba(216, 182, 108, 0.16), 0 16px 36px rgba(8, 10, 22, 0.32);
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
      transform-origin: center;
      pointer-events: none;
      will-change: left, top, transform, opacity;
    }
.cairn-demos .w1-phone .travel-satellite::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 31px;
      width: 29px;
      height: 2px;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.24);
      box-shadow: 4px 9px 0 rgba(32, 28, 24, 0.14);
      transform: rotate(-7deg);
    }
.cairn-demos .w1-phone[data-phase="4"] .center-satellite, .cairn-demos .w1-phone[data-phase="4"] .center-confirm {
      opacity: 0;
      pointer-events: none;
    }
.cairn-demos .w1-phone[data-phase="4"] .travel-satellite {
      opacity: 1;
    }
.cairn-demos .w1-phone .settled-node {
      position: absolute;
      left: var(--settled-x, 234px);
      top: var(--settled-y, 218px);
      z-index: 16;
      width: 15px;
      height: 15px;
      margin: -7px 0 0 -7px;
      border: 1px solid rgba(246, 241, 230, 0.66);
      border-radius: 50%;
      background: #d8c8b8;
      opacity: 0;
      box-shadow: 0 0 0 0 rgba(216, 200, 184, 0);
      transform: scale(0.5);
    }
.cairn-demos .w1-phone[data-phase="5"] .settled-node {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 0 0 9px rgba(216, 200, 184, 0.14);
    }
.cairn-demos .cycle-full-chat-phone {
      --w1-amber: #d9b66f;
      background:
        linear-gradient(
          180deg,
          rgba(246, 245, 239, 0.98),
          rgba(251, 248, 241, 0.98) 62%,
          var(--ks-color-paper-warm)
        ),
        repeating-linear-gradient(
          7deg,
          rgba(32, 28, 24, 0.018) 0,
          rgba(32, 28, 24, 0.018) 1px,
          transparent 1px,
          transparent 5px
        );
      color: var(--ink);
    }
.cairn-demos .cycle-full-chat-phone .status {
      color: rgba(32, 28, 24, 0.72);
    }
.cairn-demos .cycle-full-topbar {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(32, 28, 24, 0.08);
      background: rgba(251, 248, 241, 0.78);
      backdrop-filter: blur(12px);
    }
.cairn-demos .cycle-full-avatar {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid rgba(32, 28, 24, 0.1);
      background: transparent;
    }
.cairn-demos .cycle-full-avatar img {
      width: 54px;
      height: 54px;
      object-fit: contain;
      transform: translateX(-5px);
      filter: drop-shadow(0 4px 7px rgba(41, 45, 87, 0.1));
    }
.cairn-demos .cycle-full-title h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 19px;
      line-height: 1.1;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .cycle-full-title p {
      margin: 3px 0 0;
      color: rgba(32, 28, 24, 0.56);
      font-size: 11px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.cairn-demos .cycle-full-status {
      height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      background: rgba(80, 97, 125, 0.08);
      color: var(--indigo);
      font-size: 10px;
      font-weight: var(--ks-weight-title);
      white-space: nowrap;
    }
.cairn-demos .cycle-full-thread {
      position: absolute;
      left: 0;
      right: 0;
      top: 101px;
      bottom: 0;
      z-index: 2;
      padding: 12px 18px 132px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      mask-image: linear-gradient(180deg, #000 0 calc(100% - 58px), transparent 100%);
    }
.cairn-demos .cycle-full-thread::-webkit-scrollbar {
      display: none;
    }
.cairn-demos .cycle-full-turn, .cairn-demos .cycle-full-card {
      opacity: 0;
      max-height: 0;
      margin: 0;
      overflow: hidden;
      transform: translateY(8px);
      transition:
        opacity 260ms var(--ease),
        transform 280ms var(--ease),
        max-height 320ms var(--ease),
        margin 220ms var(--ease);
    }
.cairn-demos .cycle-full-turn.is-visible, .cairn-demos .cycle-full-card.is-visible {
      opacity: 1;
      max-height: 180px;
      margin: 8px 0;
      transform: translateY(0);
    }
.cairn-demos .cycle-full-turn.is-open, .cairn-demos .cycle-full-card.is-open {
      max-height: none;
      overflow: visible;
    }
.cairn-demos .cycle-full-turn {
      display: flex;
      gap: 9px;
      align-items: flex-start;
    }
.cairn-demos .cycle-full-turn.user {
      justify-content: flex-end;
    }
.cairn-demos .cycle-full-turn.agent {
      justify-content: flex-start;
    }
.cairn-demos .cycle-full-agent {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid rgba(32, 28, 24, 0.08);
      background: transparent;
      box-shadow: 0 4px 10px rgba(41, 45, 87, 0.07);
    }
.cairn-demos .cycle-full-agent img {
      width: 38px;
      height: 38px;
      object-fit: contain;
      transform: translateX(-4px);
    }
.cairn-demos .cycle-full-bubble, .cairn-demos .cycle-full-card-body {
      border: 1px solid rgba(32, 28, 24, 0.11);
      border-radius: 14px;
      background: rgba(251, 248, 241, 0.84);
      box-shadow: 0 10px 20px rgba(39, 42, 82, 0.055);
      color: rgba(32, 28, 24, 0.76);
      font-size: 12.5px;
      line-height: 1.36;
    }
.cairn-demos .cycle-full-bubble {
      max-width: min(284px, 82%);
      padding: 10px 12px;
    }
.cairn-demos .cycle-full-turn.user .cycle-full-bubble {
      border-color: rgba(91, 111, 138, 0.3);
      background: var(--indigo);
      color: var(--paper);
      box-shadow: 0 9px 22px rgba(40, 48, 82, 0.22);
    }
.cairn-demos .cycle-full-bubble b, .cairn-demos .cycle-full-card b {
      color: rgba(32, 28, 24, 0.9);
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .cycle-full-thinking {
      display: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(80, 97, 125, 0.16);
      border-top-color: rgba(80, 97, 125, 0.72);
      background: rgba(246, 245, 239, 0.62);
      animation: w1-thinking-spin 820ms linear infinite;
    }
.cairn-demos .cycle-full-turn.is-thinking .cycle-full-text {
      display: none;
    }
.cairn-demos .cycle-full-turn.is-thinking .cycle-full-thinking {
      display: block;
    }
.cairn-demos .cycle-full-card {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
    }
.cairn-demos .cycle-full-card-icon {
      width: 30px;
      padding-top: 9px;
      display: grid;
      place-items: start center;
      color: rgba(156, 92, 80, 0.74);
    }
.cairn-demos .cycle-full-card-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .cycle-full-card-body {
      padding: 11px;
      max-width: 274px;
    }
.cairn-demos .cycle-full-standard-card {
      grid-template-columns: 30px minmax(0, 1fr);
    }
.cairn-demos .cycle-full-standard-card .cycle-full-card-body {
      max-width: 292px;
      padding: 11px 13px;
      border-color: var(--ks-today-line);
      border-radius: 8px;
      background: var(--ks-today-card-surface);
      box-shadow: var(--ks-shadow-card);
      font-family: var(--font-today);
    }
.cairn-demos .cycle-full-action-card .cycle-full-card-body {
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "head"
        "line"
        "actions";
      gap: 8px;
      align-content: center;
    }
.cairn-demos .cycle-full-action-card .cycle-full-card-head {
      grid-area: head;
    }
.cairn-demos .cycle-full-card-line {
      grid-area: line;
      margin: 0;
      color: var(--ks-today-ink);
      font-size: 13px;
      line-height: 1.3;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .cycle-record-added, .cairn-demos .cycle-record-undo {
      display: none;
    }
.cairn-demos .cycle-full-action-card.is-added .cycle-record-draft, .cairn-demos .cycle-full-action-card.is-added .cycle-record-add, .cairn-demos .cycle-full-action-card.is-added .cycle-record-dismiss {
      display: none;
    }
.cairn-demos .cycle-full-action-card.is-added .cycle-record-added {
      display: inline;
    }
.cairn-demos .cycle-full-action-card.is-added .cycle-record-undo {
      display: inline-flex;
    }
.cairn-demos .cycle-record-card {
      --scope-color: var(--scope-mood-color, #5b6f8a);
      --scope-soft: var(--scope-mood-soft, rgba(91, 111, 138, 0.30));
    }
.cairn-demos .cycle-record-card .cycle-full-card-icon {
      color: color-mix(in srgb, var(--scope-color) 64%, rgba(32, 28, 24, 0.32));
    }
.cairn-demos .cycle-record-card .cycle-full-card-head > span:first-child {
      color: var(--scope-color);
      font-size: 9.5px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
    }
.cairn-demos .cycle-mood-chat-demo .cycle-full-card:not(.cycle-record-card) .cycle-full-card-icon {
      color: rgba(32, 28, 24, 0.38);
    }
.cairn-demos .cycle-record-card .cycle-full-actions {
      max-height: 34px;
      transition:
        opacity 240ms var(--ease),
        max-height 300ms var(--ease),
        margin 300ms var(--ease);
    }
.cairn-demos .cycle-record-card.is-settled .cycle-full-actions {
      opacity: 0;
      max-height: 0;
      margin-top: -8px;
      overflow: hidden;
      pointer-events: none;
    }
.cairn-demos .cycle-record-card.is-settled .cycle-full-card-body {
      min-height: 0;
    }
.cairn-demos .cycle-record-card .cycle-full-actions button {
      min-height: 28px;
      border-radius: 999px;
      border-color: rgba(32, 28, 24, 0.10);
      background: rgba(251, 248, 241, 0.78);
      color: rgba(32, 28, 24, 0.72);
    }
.cairn-demos .cycle-record-card .cycle-full-actions .primary {
      border-color: var(--scope-color);
      background: var(--scope-color);
      color: var(--ks-today-button-primary-on);
      box-shadow: 0 6px 14px color-mix(in srgb, var(--scope-color) 30%, transparent);
    }
.cairn-demos .cycle-record-card .cycle-full-actions .cycle-record-undo {
      align-items: center;
      justify-content: center;
      padding: 0 11px;
      background: transparent;
      box-shadow: none;
    }
.cairn-demos .cycle-full-standard-card b {
      color: var(--ks-today-ink-strong);
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .cycle-full-card-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: rgba(32, 28, 24, 0.44);
      font-size: 10px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .cycle-full-card h4 {
      margin: 7px 0 5px;
      color: rgba(32, 28, 24, 0.88);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1.08;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .cycle-full-card p {
      margin: 0;
      color: rgba(32, 28, 24, 0.62);
      font-size: 11px;
      line-height: 1.34;
    }
.cairn-demos .cycle-full-context-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 9px;
    }
.cairn-demos .cycle-full-context-grid span {
      min-height: 42px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 7px;
      border-radius: 8px;
      background: rgba(80, 97, 125, 0.08);
      color: rgba(32, 28, 24, 0.5);
      font-size: 8.8px;
      line-height: 1.08;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .cycle-full-context-grid b {
      display: block;
      font-size: 10.5px;
      line-height: 1;
    }
.cairn-demos .cycle-full-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
.cairn-demos .cycle-full-action-card .cycle-full-actions {
      grid-area: actions;
      gap: 6px;
      margin-top: 0;
      justify-content: flex-end;
    }
.cairn-demos .cycle-full-actions button {
      min-height: 31px;
      border: 1px solid var(--ks-today-button-secondary-line);
      border-radius: 5px;
      padding: 0 12px;
      background: var(--ks-today-button-secondary-bg);
      color: var(--ks-today-button-secondary-on);
      font: var(--ks-weight-action) 12px/1 var(--font-today);
    }
.cairn-demos .cycle-full-actions .primary {
      border-color: transparent;
      background: var(--ks-today-button-primary-bg);
      color: var(--ks-today-button-primary-on);
      box-shadow: none;
    }
.cairn-demos .cycle-full-composer {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 22px;
      z-index: 26;
    }
.cairn-demos .cycle-full-composer-shell {
      min-height: 58px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px 48px;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 999px;
      background: rgba(251, 248, 241, 0.94);
      box-shadow:
        0 14px 30px rgba(39, 42, 82, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(14px);
    }
.cairn-demos .cycle-full-composer button {
      border: 0;
      cursor: pointer;
    }
.cairn-demos .cycle-full-icon-button {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: transparent;
      color: rgba(32, 28, 24, 0.56);
    }
.cairn-demos .cycle-full-send {
      width: 48px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--indigo);
      color: var(--on-dark);
      box-shadow: 0 9px 18px rgba(80, 97, 125, 0.22);
    }
.cairn-demos .cycle-full-icon-button svg, .cairn-demos .cycle-full-send svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .cycle-full-send svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.4;
    }
.cairn-demos .cycle-full-input {
      min-width: 0;
      color: rgba(32, 28, 24, 0.68);
      font-size: 13px;
      line-height: 1.25;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .cycle-full-input.is-empty::before {
      content: "Message Cairn";
      color: rgba(32, 28, 24, 0.4);
    }
.cairn-demos .cycle-full-caret {
      display: inline-block;
      width: 1px;
      height: 14px;
      margin-left: 2px;
      vertical-align: -2px;
      background: rgba(32, 28, 24, 0.42);
      animation: w1-caret-blink 900ms steps(1) infinite;
    }
.cairn-demos .cycle-full-input.is-empty .cycle-full-caret {
      display: none;
    }
.cairn-demos .recovery-chat-phone .cycle-full-status {
      color: color-mix(in srgb, var(--ks-color-clay) 88%, var(--paper));
      background: color-mix(in srgb, var(--ks-color-clay) 8%, transparent);
    }
.cairn-demos .recovery-chat-phone .cycle-full-thread {
      padding-bottom: 140px;
    }
.cairn-demos .recovery-chat-phone .cycle-full-turn.is-visible, .cairn-demos .recovery-chat-phone .cycle-full-card.is-visible {
      max-height: 238px;
    }
.cairn-demos .recovery-chat-phone .cycle-full-card {
      display: block;
      margin-left: 39px;
    }
.cairn-demos .recovery-chat-phone .cycle-full-card-body {
      max-width: 286px;
    }
.cairn-demos .recovery-chat-phone .recovery-atom {
      color: var(--ks-today-ink);
      font-size: 13px;
      line-height: 1.32;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .recovery-chat-phone .cycle-full-card-head {
      margin-top: 7px;
    }
.cairn-demos .recovery-chat-phone .recovery-data-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-top: 9px;
    }
.cairn-demos .recovery-chat-phone .recovery-data-grid span {
      min-height: 42px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 7px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--ks-color-clay) 8%, transparent);
      color: rgba(32, 28, 24, 0.5);
      font-size: 8.8px;
      line-height: 1.08;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .recovery-chat-phone .recovery-data-grid b {
      display: block;
      color: rgba(32, 28, 24, 0.88);
      font-family: var(--ks-font-metric);
      font-size: 14px;
      line-height: 1;
      font-weight: var(--ks-weight-metric);
    }
.cairn-demos .recovery-chat-phone .recovery-plan-card .cycle-full-card-body {
      border-color: color-mix(in srgb, var(--green) 24%, transparent);
      background: color-mix(in srgb, var(--ks-color-paper-warm) 84%, var(--green) 16%);
    }
.cairn-demos .recovery-chat-phone .recovery-plan-card h4 {
      margin-top: 0;
    }
.cairn-demos .cycle-save-motion {
      position: absolute;
      inset: 0;
      z-index: 34;
      opacity: 0;
      pointer-events: none;
      transition: opacity 280ms var(--ease);
    }
.cairn-demos .cycle-save-motion.is-visible {
      opacity: 1;
    }
.cairn-demos .cycle-save-focus {
      position: absolute;
      inset: 0;
      opacity: 0;
      background:
        radial-gradient(circle at 50% 78%, rgba(246, 241, 230, 0.08), transparent 0 108px),
        rgba(12, 15, 33, 0.44);
      transition: opacity 340ms var(--ease);
    }
.cairn-demos .cycle-save-motion.is-visible .cycle-save-focus {
      opacity: 1;
    }
.cairn-demos .cycle-save-motion.is-flying .cycle-save-focus, .cairn-demos .cycle-save-motion.is-settled .cycle-save-focus {
      opacity: 0;
    }
.cairn-demos .cycle-save-center-satellite {
      position: absolute;
      border: 1px solid rgba(246, 241, 230, 0.58);
      border-radius: 50%;
      background:
        linear-gradient(160deg, rgba(246, 241, 230, 0.26), transparent 38%),
        radial-gradient(circle at 48% 38%, #f1dcaa 0 13%, var(--w1-amber) 14% 58%, var(--ochre) 59% 100%);
    }
.cairn-demos .cycle-save-center-satellite {
      left: 50%;
      top: 456px;
      width: 104px;
      height: 104px;
      margin: 0;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.35);
      transform-origin: center;
      box-shadow:
        0 0 0 26px rgba(216, 182, 108, 0.12),
        0 18px 46px rgba(8, 10, 22, 0.36);
      transition: opacity 340ms var(--ease), transform 520ms var(--ease);
      will-change: left, top, transform, opacity;
    }
.cairn-demos .cycle-save-center-satellite::before {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.24);
      transform: rotate(-7deg);
    }
.cairn-demos .cycle-save-center-satellite::before {
      left: 32px;
      top: 43px;
      width: 42px;
      height: 2px;
      box-shadow: 5px 12px 0 rgba(32, 28, 24, 0.16);
    }
.cairn-demos .cycle-save-center-satellite::after {
      content: "Overwhelmed";
      position: absolute;
      left: 50%;
      top: calc(100% + 16px);
      transform: translateX(-50%);
      padding: 7px 11px;
      border: 1px solid rgba(246, 241, 230, 0.22);
      border-radius: 999px;
      background: rgba(39, 42, 82, 0.72);
      color: var(--on-dark);
      font-size: 11px;
      font-weight: var(--ks-chat-thread-weight-badge, 560);
      white-space: nowrap;
    }
.cairn-demos .cycle-save-motion.is-visible:not(.is-flying):not(.is-settled) .cycle-save-center-satellite {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
.cairn-demos .cycle-save-motion.is-flying .cycle-save-center-satellite {
      opacity: 1;
      transition: none;
    }
.cairn-demos .cycle-save-motion.is-settled .cycle-save-center-satellite {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.04);
    }
@keyframes w1-path-fade {
      0% { opacity: 0; }
      16% { opacity: 0.86; }
      78% { opacity: 0.74; }
      100% { opacity: 0; }
    }
@keyframes w1-listen-pulse {
      0% { box-shadow: 0 0 0 0 rgba(180, 122, 60, 0.3); transform: scale(0.92); }
      62% { box-shadow: 0 0 0 10px rgba(180, 122, 60, 0); transform: scale(1); }
      100% { box-shadow: 0 0 0 0 rgba(180, 122, 60, 0); transform: scale(0.92); }
    }
@keyframes w1-caret-blink {
      0%, 48% { opacity: 1; }
      49%, 100% { opacity: 0; }
    }
@keyframes w1-thread-reveal {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
@keyframes w1-thinking-spin {
      to { transform: rotate(360deg); }
    }
.cairn-demos .module-scroll, .cairn-demos .confirm-scroll, .cairn-demos .today-scroll {
      height: calc(100% - 126px);
      padding: 4px 18px 112px;
      display: grid;
      align-content: start;
      gap: 12px;
      overflow: hidden;
      mask-image: linear-gradient(180deg, #000 0 calc(100% - 48px), transparent 100%);
    }
.cairn-demos .module-card, .cairn-demos .module-lead-card, .cairn-demos .write-card {
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 10px;
      background: rgba(249, 248, 242, 0.9);
      box-shadow: 0 12px 28px rgba(39, 42, 82, 0.08);
      color: var(--ink);
    }
.cairn-demos .module-card, .cairn-demos .write-card {
      padding: 13px;
    }
.cairn-demos .module-lead-card {
      padding: 15px;
    }
.cairn-demos .module-card h3, .cairn-demos .module-lead-card h3, .cairn-demos .write-card h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 21px;
      line-height: 1.08;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .module-card p, .cairn-demos .module-lead-card p, .cairn-demos .write-card p {
      margin: 7px 0 0;
      color: rgba(32, 28, 24, 0.62);
      font-size: 12px;
      line-height: 1.42;
    }
.cairn-demos .product-phone .primary-button {
      border-color: var(--ks-action-emphasis-line);
      background: var(--ks-action-emphasis-bg);
      color: var(--ks-action-emphasis-on);
      box-shadow: var(--ks-action-emphasis-shadow);
    }
.cairn-demos .product-phone .secondary-button {
      border-color: var(--ks-action-standard-line);
      background: var(--ks-action-standard-bg);
      color: var(--ks-action-standard-on);
    }
.cairn-demos .mood-product-phone {
      background:
        linear-gradient(180deg,
          var(--ks-page-shell-object-first-chrome-bg) 0 126px,
          rgba(246, 245, 239, 0.97) 126px 100%);
    }
.cairn-demos .mood-product-phone .status, .cairn-demos .mood-product-phone .app-header {
      color: var(--on-dark);
    }
.cairn-demos .mood-product-phone .app-kicker {
      color: var(--on-dark-muted);
    }
.cairn-demos .mood-product-phone .app-title {
      color: var(--on-dark);
    }
.cairn-demos .mood-product-phone .header-status {
      border-color: var(--on-dark-line);
      background: rgba(246, 245, 239, 0.12);
      color: var(--on-dark-soft);
    }
.cairn-demos .mood-planet-card {
      position: relative;
      height: 306px;
      margin: -4px -18px 10px;
      padding: 0;
      overflow: hidden;
      border-width: 0 0 1px;
      border-radius: 0 0 20px 20px;
      border-color: rgba(246, 245, 239, 0.16);
      background:
        radial-gradient(circle at 50% 50%, rgba(96, 119, 126, 0.26), transparent 0 96px),
        radial-gradient(circle at 28% 22%, rgba(180, 122, 60, 0.13), transparent 0 68px),
        linear-gradient(180deg,
          var(--ks-page-shell-object-first-chrome-bg) 0%,
          color-mix(in srgb, var(--indigo-deep) 90%, var(--paper) 10%) 34%,
          color-mix(in srgb, var(--indigo) 88%, var(--ink) 12%) 100%);
      box-shadow: 0 12px 28px rgba(39, 42, 82, 0.14);
      isolation: isolate;
    }
.cairn-demos .mood-planet-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 11% 21%, rgba(246, 245, 239, 0.52) 0 0.8px, transparent 1.6px),
        radial-gradient(circle at 31% 13%, rgba(246, 245, 239, 0.32) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 74% 17%, rgba(246, 245, 239, 0.46) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 89% 35%, rgba(180, 122, 60, 0.52) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 14% 78%, rgba(246, 245, 239, 0.28) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 82% 86%, rgba(246, 245, 239, 0.38) 0 0.9px, transparent 1.6px);
      background-size: 96px 84px, 132px 118px, 150px 130px, 124px 104px, 138px 116px, 112px 98px;
      opacity: 0.66;
      mix-blend-mode: screen;
      pointer-events: none;
    }
.cairn-demos .mood-planet-chart {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 2;
    }
.cairn-demos .mood-orbit-cw, .cairn-demos .mood-orbit-ccw, .cairn-demos .mood-orbit-slow {
      transform-origin: 187.5px 139px;
      transition: transform 900ms var(--ease);
    }
.cairn-demos .vignette-player[data-step="2"] .mood-orbit-cw, .cairn-demos .vignette-player[data-step="3"] .mood-orbit-cw {
      transform: rotate(16deg);
    }
.cairn-demos .vignette-player[data-step="2"] .mood-orbit-ccw, .cairn-demos .vignette-player[data-step="3"] .mood-orbit-ccw {
      transform: rotate(-11deg);
    }
.cairn-demos .mood-born-node {
      position: absolute;
      left: 305px;
      top: 114px;
      z-index: 6;
      width: 13px;
      height: 13px;
      border: 1px solid rgba(246, 245, 239, 0.55);
      border-radius: 50%;
      background: #d8c8b8;
      box-shadow: 0 0 0 0 rgba(216, 200, 184, 0);
      opacity: 0;
      transform: translate(-58px, 128px) scale(0.18);
      transition: opacity 340ms var(--ease), transform 720ms var(--ease), box-shadow 520ms var(--ease);
    }
.cairn-demos .vignette-player[data-step="3"] .mood-born-node {
      opacity: 1;
      transform: translate(0, 0) scale(1);
      box-shadow: 0 0 0 10px rgba(216, 200, 184, 0.16);
    }
.cairn-demos .module-tools {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }
.cairn-demos .tool-tile {
      min-height: 76px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(32, 28, 24, 0.11);
      background: rgba(246, 245, 239, 0.84);
      box-shadow: 0 8px 18px rgba(39, 42, 82, 0.05);
    }
.cairn-demos .tool-tile strong {
      display: block;
      color: rgba(32, 28, 24, 0.82);
      font-size: 12px;
      line-height: 1.2;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .tool-tile span {
      display: block;
      margin-top: 5px;
      color: rgba(32, 28, 24, 0.56);
      font-size: 10px;
      line-height: 1.28;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .mood-sheet {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 18px;
      z-index: 29;
      min-height: 318px;
      padding: 10px 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(32, 28, 24, 0.14);
      background: rgba(251, 248, 241, 0.97);
      box-shadow: 0 -18px 42px rgba(16, 18, 32, 0.24);
      color: var(--ink);
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(100% + 22px));
      transition: opacity 220ms ease, transform 260ms var(--ease);
    }
.cairn-demos .vignette-player[data-step="1"] .mood-sheet, .cairn-demos .vignette-player[data-step="2"] .mood-sheet, .cairn-demos .vignette-player[data-step="3"] .mood-sheet {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
.cairn-demos .sheet-grabber {
      width: 42px;
      height: 5px;
      margin: 0 auto 10px;
      border-radius: 999px;
      background: rgba(32, 28, 24, 0.16);
    }
.cairn-demos .sheet-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 0 2px 10px;
      border-bottom: 1px solid rgba(32, 28, 24, 0.08);
    }
.cairn-demos .sheet-head b {
      display: block;
      color: rgba(32, 28, 24, 0.82);
      font-size: 13px;
      line-height: 1.1;
    }
.cairn-demos .sheet-head span {
      display: block;
      margin-top: 3px;
      color: rgba(32, 28, 24, 0.52);
      font-size: 10.5px;
      line-height: 1.2;
    }
.cairn-demos .sheet-log {
      display: grid;
      gap: 7px;
      padding: 10px 0 9px;
    }
.cairn-demos .sheet-message, .cairn-demos .node-created, .cairn-demos .latent-bubble, .cairn-demos .latent-card {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 260ms var(--ease), transform 260ms var(--ease);
    }
.cairn-demos .vignette-player[data-step="1"] .sheet-message.user, .cairn-demos .vignette-player[data-step="2"] .sheet-message, .cairn-demos .vignette-player[data-step="3"] .sheet-message, .cairn-demos .vignette-player[data-step="3"] .node-created {
      opacity: 1;
      transform: translateY(0);
    }
.cairn-demos .sheet-message {
      max-width: 268px;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px solid rgba(32, 28, 24, 0.09);
      background: rgba(246, 245, 239, 0.78);
      color: rgba(32, 28, 24, 0.72);
      font-size: 11.5px;
      line-height: 1.35;
    }
.cairn-demos .sheet-message.user {
      justify-self: end;
      background: var(--indigo);
      color: var(--on-dark);
      border-color: rgba(246, 245, 239, 0.16);
    }
.cairn-demos .node-created {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      max-width: 286px;
      padding: 8px 9px;
      border-radius: 10px;
      background: rgba(216, 200, 184, 0.28);
      color: rgba(32, 28, 24, 0.62);
      font-size: 10.5px;
      line-height: 1.25;
    }
.cairn-demos .node-created i {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(32, 28, 24, 0.12);
      background: #d8c8b8;
    }
.cairn-demos .composer-mini {
      min-height: 52px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 32px 42px;
      align-items: center;
      gap: 7px;
      padding: 6px 7px 6px 8px;
      border: 1px solid rgba(32, 28, 24, 0.14);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(246, 245, 239, 0.22)),
        rgba(80, 97, 125, 0.08);
    }
.cairn-demos .composer-mini span {
      color: rgba(32, 28, 24, 0.48);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.cairn-demos .composer-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 0;
      background: rgba(80, 97, 125, 0.09);
      color: var(--indigo);
    }
.cairn-demos .composer-send {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 0;
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .composer-dot svg, .cairn-demos .composer-send svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .mini-chat-fab {
      position: absolute;
      right: 18px;
      bottom: 24px;
      z-index: 28;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(216, 200, 184, 0.14)),
        rgba(246, 245, 239, 0.94);
      color: var(--indigo);
      box-shadow: 0 12px 24px rgba(39, 42, 82, 0.14);
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: opacity 180ms ease, transform 180ms var(--ease);
    }
.cairn-demos .mini-chat-fab img {
      position: absolute;
      left: 102%;
      top: 64%;
      width: 88px;
      height: 96px;
      border-radius: 16px;
      object-fit: cover;
      transform: translate(-50%, -50%) rotate(-14deg);
      transform-origin: 48% 58%;
    }
.cairn-demos .mini-chat-fab span {
      position: absolute;
      left: 5px;
      top: 6px;
      width: 18px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2.5px;
      border-radius: 999px;
      border: 1px solid rgba(246, 245, 239, 0.68);
      background: rgba(39, 42, 82, 0.92);
      box-shadow: 0 5px 12px rgba(39, 42, 82, 0.16);
    }
.cairn-demos .mini-chat-fab i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--on-dark);
    }
.cairn-demos .mind-demo[data-step="1"] .mini-chat-fab, .cairn-demos .mind-demo[data-step="2"] .mini-chat-fab, .cairn-demos .mind-demo[data-step="3"] .mini-chat-fab {
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(0.92);
    }
.cairn-demos .mini-chat-fab.is-voice span {
      width: 20px;
      height: 20px;
      top: 4px;
      left: 4px;
      border-radius: 50%;
      background: var(--green);
    }
.cairn-demos .mini-chat-fab.is-voice span svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: var(--on-dark);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .meal-voice-phone {
      --meal-ease: cubic-bezier(0.18, 0.82, 0.2, 1);
    }
.cairn-demos .meal-voice-phone .meal-quick-io {
      position: absolute;
      left: var(--ks-quick-chat-surface-inline-start);
      right: var(--ks-quick-chat-surface-inline-end-with-orb);
      bottom: var(--ks-quick-chat-surface-bottom);
      z-index: 30;
      display: grid;
      gap: var(--ks-quick-chat-surface-gap);
      min-height: var(--ks-quick-chat-surface-min-height);
      padding: var(--ks-quick-chat-surface-padding);
      border: 1px solid var(--ks-quick-chat-surface-line);
      border-radius: var(--ks-quick-chat-surface-radius);
      background: var(--ks-quick-chat-surface-bg);
      box-shadow: var(--ks-quick-chat-surface-shadow);
      color: rgba(32, 28, 24, 0.78);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.98);
      transition: opacity 260ms var(--meal-ease), transform 360ms var(--meal-ease);
    }
.cairn-demos .meal-voice-phone[data-meal-composer="open"] .meal-quick-io, .cairn-demos .meal-voice-phone[data-meal-chat="open"] .meal-quick-io {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
.cairn-demos .meal-voice-phone .meal-thread {
      display: grid;
      gap: var(--ks-quick-chat-turn-gap);
    }
.cairn-demos .meal-voice-phone .meal-turn {
      display: none;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(8px);
      transition: max-height 320ms var(--meal-ease), opacity 240ms var(--meal-ease), transform 280ms var(--meal-ease);
    }
.cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="1"] .meal-turn:nth-child(1), .cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="2"] .meal-turn:nth-child(-n + 2), .cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="3"] .meal-turn:nth-child(-n + 3), .cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="4"] .meal-turn:nth-child(-n + 4), .cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="5"] .meal-turn:nth-child(-n + 4) {
      display: flex;
      max-height: 104px;
      opacity: 1;
      transform: translateY(0);
      animation: w1-thread-reveal 280ms var(--meal-ease) both;
    }
.cairn-demos .meal-voice-phone .meal-turn.user {
      justify-self: stretch;
    }
.cairn-demos .meal-voice-phone .meal-turn.agent {
      justify-self: start;
    }
.cairn-demos .meal-voice-phone .meal-turn p {
      margin: 0;
      padding: 8px 10px;
      border: 1px solid var(--ks-quick-chat-answer-line);
      border-radius: 11px;
      background: var(--ks-quick-chat-answer-bg);
      color: var(--ks-quick-chat-answer-color);
      font-size: var(--ks-quick-chat-answer-size);
      line-height: 1.32;
      font-weight: var(--ks-quick-chat-answer-weight);
    }
.cairn-demos .meal-voice-phone .meal-turn.user p {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ks-quick-chat-question-color);
      font-size: var(--ks-quick-chat-question-size);
      line-height: 1.36;
      font-weight: var(--ks-quick-chat-question-weight);
    }
.cairn-demos .meal-voice-phone .meal-agent-avatar {
      flex: 0 0 auto;
      width: var(--ks-quick-chat-avatar-width);
      height: var(--ks-quick-chat-avatar-height);
      object-fit: contain;
      filter: drop-shadow(0 5px 8px rgba(41, 45, 87, 0.14));
      transform: rotate(-8deg);
    }
.cairn-demos .meal-voice-phone .meal-thinking {
      display: none;
      width: var(--ks-quick-chat-thinking-size);
      height: var(--ks-quick-chat-thinking-size);
      border-radius: 50%;
      border: 2px solid rgba(80, 97, 125, 0.16);
      border-top-color: rgba(80, 97, 125, 0.72);
      background: rgba(246, 245, 239, 0.62);
      animation: w1-thinking-spin 820ms linear infinite;
    }
.cairn-demos .meal-voice-phone[data-meal-thinking="1"] .meal-turn:nth-child(2) .meal-thinking, .cairn-demos .meal-voice-phone[data-meal-thinking="2"] .meal-turn:nth-child(4) .meal-thinking {
      display: block;
    }
.cairn-demos .meal-voice-phone[data-meal-thinking="1"] .meal-turn:nth-child(2) p, .cairn-demos .meal-voice-phone[data-meal-thinking="2"] .meal-turn:nth-child(4) p {
      display: none;
    }
.cairn-demos .meal-voice-phone .meal-io-line {
      display: none;
      align-items: center;
      gap: 8px;
      min-height: var(--ks-quick-chat-input-height);
      padding: 7px 9px;
      padding-right: 22px;
      border-radius: 999px;
      background: var(--ks-quick-chat-input-bg);
    }
.cairn-demos .meal-voice-phone[data-meal-composer="open"] .meal-io-line {
      display: flex;
    }
.cairn-demos .meal-voice-phone .io-voice-wave {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
      align-items: center;
      justify-items: center;
      border-radius: 50%;
      background: rgba(180, 122, 60, 0.12);
    }
.cairn-demos .meal-voice-phone .io-voice-wave i {
      width: 3px;
      height: var(--h);
      border-radius: 999px;
      background: var(--ochre);
      animation: voice-meter 760ms var(--meal-ease) infinite alternate;
    }
.cairn-demos .meal-voice-phone .io-voice-wave i:nth-child(2) { animation-delay: 120ms; }
.cairn-demos .meal-voice-phone .io-voice-wave i:nth-child(3) { animation-delay: 220ms; }
.cairn-demos .meal-voice-phone .io-voice-wave i:nth-child(4) { animation-delay: 80ms; }
.cairn-demos .meal-voice-phone .meal-typed-note:empty::before {
      content: "Tell me what sounds good";
      color: var(--ks-quick-chat-placeholder-color);
    }
.cairn-demos .meal-voice-phone .meal-io-text {
      min-width: 0;
      margin: 0;
      color: var(--ks-quick-chat-question-color);
      font-size: var(--ks-quick-chat-question-size);
      line-height: 1.28;
      font-weight: var(--ks-quick-chat-question-weight);
    }
.cairn-demos .meal-voice-phone .meal-actions {
      display: none;
      gap: 8px;
      align-items: center;
      padding-top: 2px;
    }
.cairn-demos .meal-voice-phone[data-meal-chat="open"][data-meal-thread-step="5"] .meal-actions {
      display: flex;
    }
.cairn-demos .meal-voice-phone .meal-approve, .cairn-demos .meal-voice-phone .meal-reject {
      min-height: 30px;
      padding: 0 14px;
      border-radius: 999px;
      border: 0;
      font-size: 11.5px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .meal-voice-phone .meal-approve {
      background: var(--indigo);
      color: var(--on-dark);
    }
.cairn-demos .meal-voice-phone .meal-reject {
      background: rgba(32, 28, 24, 0.07);
      color: var(--indigo);
    }
.cairn-demos .meal-voice-phone .meal-chat-fab {
      position: absolute;
      right: var(--ks-quick-chat-orb-right);
      bottom: var(--ks-quick-chat-surface-bottom);
      z-index: 31;
      width: var(--ks-quick-chat-orb-size);
      height: var(--ks-quick-chat-orb-size);
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(216, 200, 184, 0.14)),
        rgba(246, 245, 239, 0.94);
      color: var(--indigo);
      box-shadow: 0 12px 24px rgba(39, 42, 82, 0.14);
      transition: opacity 180ms ease, transform 180ms var(--meal-ease), box-shadow 180ms ease;
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-mascot-window {
      position: absolute;
      inset: 0;
      display: block;
      overflow: hidden;
      border-radius: inherit;
    }
.cairn-demos .meal-voice-phone .meal-chat-fab img {
      position: absolute;
      left: 102%;
      top: 64%;
      width: 88px;
      height: 96px;
      border-radius: 16px;
      object-fit: cover;
      transform: translate(-50%, -50%) rotate(-14deg);
      transform-origin: 48% 58%;
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-bubble {
      position: absolute;
      left: 4px;
      top: 6px;
      width: 25px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid rgba(246, 245, 239, 0.68);
      background: rgba(39, 42, 82, 0.92);
      box-shadow: 0 5px 12px rgba(39, 42, 82, 0.16);
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-bubble i {
      position: absolute;
      display: block;
      width: 2.2px;
      height: 10px;
      border-radius: 999px;
      background: rgba(246, 241, 230, 0.95);
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-bubble i:first-child {
      left: 7px;
      top: 5px;
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-bubble i:last-child {
      right: 7px;
      top: 7px;
      height: 6px;
    }
.cairn-demos .meal-voice-phone .meal-chat-fab .fab-bubble::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 3px;
      width: 2.6px;
      height: 14px;
      border-radius: 999px;
      background: rgba(246, 241, 230, 0.95);
      transform: translateX(-50%);
    }
.cairn-demos .meal-voice-phone .meal-chat-fab.is-listening {
      box-shadow:
        0 0 0 8px rgba(180, 122, 60, 0.14),
        0 12px 24px rgba(39, 42, 82, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      transform: scale(1.04);
    }
.cairn-demos .meal-voice-phone .bottom-nav {
      transition: opacity 220ms var(--meal-ease), transform 260ms var(--meal-ease);
    }
.cairn-demos .meal-voice-phone[data-meal-composer="open"] .bottom-nav, .cairn-demos .meal-voice-phone[data-meal-chat="open"] .bottom-nav {
      opacity: 0;
      pointer-events: none;
      transform: translateY(16px) scale(0.98);
    }
.cairn-demos .pre-draft-state, .cairn-demos .draft-state {
      display: inline;
    }
.cairn-demos .meals-demo[data-step="0"] .draft-state, .cairn-demos .meals-demo[data-step="1"] .draft-state, .cairn-demos .meals-demo[data-step="2"] .draft-state, .cairn-demos .meals-demo[data-step="3"] .pre-draft-state {
      display: none;
    }
.cairn-demos .draft-only {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      margin: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-width: 0;
      transform: translateY(10px);
      transition: opacity 260ms var(--ease), transform 260ms var(--ease), max-height 260ms var(--ease), padding 260ms var(--ease);
    }
.cairn-demos .meals-demo[data-step="3"] .draft-only {
      max-height: 140px;
      opacity: 1;
      padding: 13px;
      border-width: 1px;
      transform: translateY(0);
    }
@keyframes voice-meter {
      from { transform: scaleY(0.62); opacity: 0.62; }
      to { transform: scaleY(1.18); opacity: 1; }
    }
.cairn-demos .meal-path-phone .screen-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateX(16px);
      pointer-events: none;
      transition: opacity 320ms var(--ease), transform 360ms var(--ease);
    }
.cairn-demos .meal-path-phone[data-meal-step="0"] .calories-layer, .cairn-demos .meal-path-phone[data-meal-step="1"] .recipe-layer, .cairn-demos .meal-path-phone[data-meal-step="2"] .confirm-layer, .cairn-demos .meal-path-phone[data-meal-step="3"] .saved-layer {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
.cairn-demos .meal-path-phone .status.on-dark, .cairn-demos .meal-voice-phone .status.on-dark, .cairn-demos .today-product-phone .status.on-dark, .cairn-demos .today-static-phone .status.on-dark {
      color: rgba(32, 28, 24, 0.72);
    }
.cairn-demos .nutrition-summary-card {
      min-height: 174px;
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      background:
        radial-gradient(circle at 21% 42%, rgba(180, 122, 60, 0.13), transparent 36%),
        linear-gradient(180deg, rgba(249, 248, 242, 0.96), rgba(239, 235, 224, 0.9));
    }
.cairn-demos .calorie-meter {
      display: grid;
      gap: 9px;
      align-content: center;
    }
.cairn-demos .calorie-number {
      color: var(--ink);
      font-family: var(--ks-font-metric);
      font-size: 32px;
      line-height: 0.95;
      font-weight: var(--ks-weight-metric);
    }
.cairn-demos .calorie-number span {
      display: block;
      margin-top: 4px;
      color: rgba(32, 28, 24, 0.54);
      font-family: var(--font-ui);
      font-size: 10px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calorie-rail {
      height: 6px;
      position: relative;
      border-radius: 2px;
      background: rgba(32, 28, 24, 0.1);
    }
.cairn-demos .calorie-rail::before, .cairn-demos .calorie-rail::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 2px;
    }
.cairn-demos .calorie-rail::before {
      left: 0;
      width: var(--used);
      background: rgba(180, 122, 60, 0.58);
    }
.cairn-demos .calorie-rail::after {
      left: var(--plan);
      width: 2px;
      background: var(--indigo);
    }
.cairn-demos .module-chip, .cairn-demos .nutrition-chip-row span, .cairn-demos .ingredient-tags span {
      min-height: 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 0 9px;
      border: 1px solid rgba(39, 42, 82, 0.1);
      background: rgba(39, 42, 82, 0.06);
      color: rgba(32, 28, 24, 0.64);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
      line-height: 1;
    }
.cairn-demos .nutrition-chip-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-top: 12px;
    }
.cairn-demos .nutrition-chip-row span {
      min-height: 34px;
      padding: 0 7px;
      text-align: center;
    }
.cairn-demos .plan-entry-card {
      min-height: 118px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border-color: rgba(180, 122, 60, 0.22);
      background:
        linear-gradient(180deg, rgba(249, 248, 242, 0.96), rgba(243, 235, 219, 0.92));
    }
.cairn-demos .meal-log, .cairn-demos .macro-review-grid, .cairn-demos .write-routing-grid {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }
.cairn-demos .meal-log {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.cairn-demos .meal-row {
      min-height: 54px;
      padding: 9px;
      border-radius: 8px;
      border: 1px solid rgba(32, 28, 24, 0.08);
      background: rgba(246, 245, 239, 0.78);
    }
.cairn-demos .meal-row b {
      display: block;
      color: rgba(32, 28, 24, 0.8);
      font-size: 12px;
      line-height: 1.1;
    }
.cairn-demos .meal-row span {
      display: block;
      margin-top: 5px;
      color: rgba(32, 28, 24, 0.52);
      font-size: 10px;
      line-height: 1.2;
      font-weight: 520;
    }
.cairn-demos .dinner-thumb, .cairn-demos .detail-thumb, .cairn-demos .food-record-thumb {
      width: 78px;
      height: 78px;
      padding: 3px;
      border-radius: 12px;
      border: 1px solid rgba(32, 28, 24, 0.075);
      background: linear-gradient(180deg, rgba(249, 248, 242, 0.98), rgba(238, 236, 228, 0.92));
      overflow: hidden;
    }
.cairn-demos .dinner-thumb img, .cairn-demos .detail-thumb img, .cairn-demos .food-record-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      object-fit: cover;
      filter: saturate(0.9) contrast(0.96);
      transform: scale(1.08);
    }
.cairn-demos .recipe-preview-card, .cairn-demos .recipe-hero-card {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;
    }
.cairn-demos .recipe-hero-card {
      grid-template-columns: 86px minmax(0, 1fr);
    }
.cairn-demos .recipe-preview-card .dinner-thumb {
      width: 74px;
      height: 74px;
    }
.cairn-demos .recipe-hero-card .detail-thumb {
      width: 86px;
      height: 86px;
    }
.cairn-demos .recipe-fit-grid, .cairn-demos .recipe-list {
      display: grid;
      gap: 7px;
      margin-top: 12px;
    }
.cairn-demos .recipe-fit-row, .cairn-demos .recipe-step, .cairn-demos .write-route, .cairn-demos .source-request {
      border-radius: 8px;
      background: rgba(220, 215, 202, 0.44);
      border: 1px solid rgba(32, 28, 24, 0.06);
      color: rgba(32, 28, 24, 0.6);
      font-size: 10.5px;
      line-height: 1.28;
    }
.cairn-demos .recipe-fit-row {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 10px;
      padding: 8px;
    }
.cairn-demos .recipe-fit-row b, .cairn-demos .write-route b, .cairn-demos .source-request b {
      color: rgba(32, 28, 24, 0.78);
    }
.cairn-demos .nutrition-detail-grid, .cairn-demos .macro-review-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-top: 12px;
    }
.cairn-demos .macro-review-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
.cairn-demos .nutrition-detail-grid span, .cairn-demos .macro-review-grid span {
      min-height: 46px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(32, 28, 24, 0.08);
      background: rgba(246, 245, 239, 0.72);
      color: rgba(32, 28, 24, 0.54);
      font-size: 9.5px;
      line-height: 1.1;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .nutrition-detail-grid b, .cairn-demos .macro-review-grid b {
      color: rgba(32, 28, 24, 0.82);
      font-size: 14px;
      line-height: 1;
    }
.cairn-demos .ingredient-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 14px;
    }
.cairn-demos .recipe-step {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 8px;
      padding: 9px;
      font-size: 11.5px;
      line-height: 1.35;
    }
.cairn-demos .recipe-step b {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(39, 42, 82, 0.1);
      color: var(--indigo);
      font-size: 10px;
    }
.cairn-demos .diary-target-row, .cairn-demos .food-record-row {
      display: grid;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border-radius: 9px;
      border: 1px solid rgba(32, 28, 24, 0.08);
      background: rgba(246, 245, 239, 0.82);
    }
.cairn-demos .diary-target-row {
      grid-template-columns: minmax(0, 1fr) auto;
      background: rgba(39, 42, 82, 0.06);
      color: rgba(32, 28, 24, 0.66);
      font-size: 11px;
      line-height: 1.25;
    }
.cairn-demos .diary-target-row b {
      display: block;
      color: rgba(32, 28, 24, 0.82);
      font-size: 12px;
    }
.cairn-demos .diary-target-row span {
      color: rgba(32, 28, 24, 0.54);
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .food-record-row {
      min-height: 64px;
      grid-template-columns: 48px minmax(0, 1fr) auto;
    }
.cairn-demos .food-record-thumb {
      width: 48px;
      height: 48px;
      padding: 2px;
      border-radius: 9px;
    }
.cairn-demos .food-record-copy b {
      display: block;
      color: rgba(32, 28, 24, 0.82);
      font-size: 13px;
      line-height: 1.12;
    }
.cairn-demos .food-record-copy span {
      display: block;
      margin-top: 4px;
      color: rgba(32, 28, 24, 0.54);
      font-size: 10.5px;
      line-height: 1.22;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .food-record-cal {
      color: rgba(32, 28, 24, 0.78);
      font-family: var(--ks-font-metric);
      font-size: 18px;
      line-height: 1;
      text-align: right;
    }
.cairn-demos .food-record-cal span {
      display: block;
      margin-top: 3px;
      color: rgba(32, 28, 24, 0.45);
      font-family: var(--font-ui);
      font-size: 9px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .portion-control {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) 28px;
      gap: 7px;
      align-items: center;
      margin-top: 8px;
    }
.cairn-demos .portion-control button {
      min-height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      background: rgba(80, 97, 125, 0.08);
      color: rgba(32, 28, 24, 0.62);
      font: 520 10.5px/1 var(--font-ui);
    }
.cairn-demos .portion-control strong {
      min-height: 28px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(220, 215, 202, 0.52);
      color: rgba(32, 28, 24, 0.66);
      font-size: 10.5px;
      line-height: 1;
    }
.cairn-demos .write-routing-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.cairn-demos .write-route {
      min-height: 54px;
      padding: 8px;
    }
.cairn-demos .write-route b, .cairn-demos .source-request b {
      display: block;
      margin-bottom: 4px;
      font-size: 11.5px;
      line-height: 1.1;
    }
.cairn-demos .source-request {
      margin: 0 0 10px;
      padding: 9px 10px;
      background: rgba(39, 42, 82, 0.07);
    }
.cairn-demos .saved-layer {
      display: grid;
      place-items: center;
      padding: 28px;
      background:
        radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--green) 16%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(246, 245, 239, 0.97), rgba(251, 248, 241, 0.98));
    }
.cairn-demos .saved-card {
      padding: 24px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--ks-color-paper-warm) 76%, var(--green) 24%);
      border: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
      box-shadow: 0 20px 42px rgba(39, 42, 82, 0.14);
      text-align: left;
    }
.cairn-demos .saved-card h3 {
      margin: 0 0 10px;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 30px;
      line-height: 1.02;
    }
.cairn-demos .saved-card p {
      margin: 0;
      color: rgba(32, 28, 24, 0.66);
      font-size: 13px;
      line-height: 1.48;
    }
.cairn-demos .latent-chat-phone {
      background:
        linear-gradient(180deg, var(--ks-title-header-night-surface) 0 138px, var(--paper) 138px 100%),
        var(--paper);
    }
.cairn-demos .latent-chat-phone .status {
      color: var(--ks-title-header-night-subtitle);
    }
.cairn-demos .chat-title-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      padding: 6px 22px 0;
      color: var(--ks-title-header-night-title);
    }
.cairn-demos .chat-title-header p {
      margin: 0 0 5px;
      color: var(--ks-title-header-night-eyebrow);
      font-size: 10px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .chat-title-header h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 0.98;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .chat-title-header .header-status {
      min-height: 29px;
      border-color: color-mix(in srgb, var(--night-on) 22%, transparent);
      background: color-mix(in srgb, var(--night-on) 13%, transparent);
      color: var(--ks-title-header-night-subtitle);
    }
.cairn-demos .mascot-status-strip {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      margin: 8px 22px 0;
      color: var(--ks-title-header-night-subtitle);
    }
.cairn-demos .mascot-status-avatar {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid rgba(246, 245, 239, 0.22);
      background: rgba(246, 245, 239, 0.14);
    }
.cairn-demos .mascot-status-avatar img {
      width: 45px;
      height: 45px;
      object-fit: contain;
      transform: translateY(3px);
    }
.cairn-demos .mascot-status-strip span {
      display: block;
      margin-bottom: 3px;
      color: var(--ks-title-header-night-eyebrow);
      font-size: 9.5px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .mascot-status-strip strong {
      display: block;
      color: var(--ks-title-header-night-subtitle);
      font-size: 12px;
      line-height: 1.25;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .latent-thread {
      position: absolute;
      top: 150px;
      left: 16px;
      right: 16px;
      bottom: 168px;
      display: grid;
      align-content: start;
      gap: 10px;
      overflow: hidden;
      mask-image: linear-gradient(180deg, #000 0 calc(100% - 28px), transparent 100%);
    }
.cairn-demos .latent-turn {
      width: 100%;
      display: grid;
      gap: 8px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    }
.cairn-demos .latent-turn.agent {
      grid-template-columns: 31px minmax(0, 1fr);
      align-items: end;
    }
.cairn-demos .latent-avatar {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid rgba(32, 28, 24, 0.08);
      background: rgba(249, 248, 242, 0.92);
      box-shadow: 0 8px 16px rgba(39, 42, 82, 0.08);
    }
.cairn-demos .latent-avatar img {
      width: 42px;
      height: 42px;
      object-fit: contain;
      transform: translateY(3px);
    }
.cairn-demos .latent-bubble {
      width: fit-content;
      max-width: 276px;
      min-height: 42px;
      display: flex;
      align-items: center;
      padding: 11px 13px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 20px;
      background: rgba(251, 248, 241, 0.88);
      color: rgba(32, 28, 24, 0.78);
      box-shadow: 0 10px 20px rgba(41, 45, 87, 0.06);
      font-size: 13px;
      line-height: 1.38;
    }
.cairn-demos .latent-turn.agent .latent-bubble, .cairn-demos .latent-turn.agent .latent-card, .cairn-demos .latent-turn.agent .latent-context {
      grid-column: 2;
    }
.cairn-demos .latent-bubble.user {
      justify-self: stretch;
      width: 100%;
      max-width: none;
      border-radius: 24px;
      background: rgba(251, 248, 241, 0.72);
      color: rgba(32, 28, 24, 0.72);
    }
.cairn-demos .latent-context {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
    }
.cairn-demos .context-chip {
      min-height: 54px;
      padding: 9px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      border-radius: 8px;
      background: rgba(249, 248, 242, 0.88);
      color: rgba(32, 28, 24, 0.72);
      box-shadow: 0 8px 18px rgba(41, 45, 87, 0.05);
    }
.cairn-demos .context-chip span {
      display: block;
      margin-bottom: 5px;
      color: rgba(32, 28, 24, 0.46);
      font-size: 8.5px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
      text-transform: uppercase;
    }
.cairn-demos .context-chip strong {
      display: block;
      font-size: 10.5px;
      line-height: 1.22;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .latent-card {
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
      border-radius: 12px;
      background: color-mix(in srgb, var(--ks-color-paper-warm) 82%, var(--green) 18%);
      color: var(--ink);
      box-shadow: 0 10px 20px rgba(41, 45, 87, 0.07);
    }
.cairn-demos .latent-card h3 {
      margin: 7px 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 21px;
      line-height: 1.06;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .latent-card .card-small {
      color: rgba(32, 28, 24, 0.62);
    }
.cairn-demos .latent-card .primary-button {
      border-color: var(--ks-action-emphasis-line);
      background: var(--ks-action-emphasis-bg);
      color: var(--ks-action-emphasis-on);
      box-shadow: var(--ks-action-emphasis-shadow);
    }
.cairn-demos .latent-card .secondary-button {
      border-color: var(--ks-action-standard-line);
      background: var(--ks-action-standard-bg);
      color: var(--ks-action-standard-on);
    }
.cairn-demos .latent-composer {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 92px;
      z-index: 24;
    }
.cairn-demos .latent-composer-shell {
      min-height: 58px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px 48px;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 999px;
      background: rgba(251, 248, 241, 0.93);
      box-shadow:
        0 14px 30px rgba(39, 42, 82, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(14px);
    }
.cairn-demos .latent-composer button {
      border: 0;
      cursor: pointer;
    }
.cairn-demos .composer-plus, .cairn-demos .composer-mic {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: transparent;
      color: rgba(32, 28, 24, 0.56);
    }
.cairn-demos .composer-plus svg, .cairn-demos .composer-mic svg, .cairn-demos .composer-send svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .composer-placeholder {
      min-width: 0;
      color: rgba(32, 28, 24, 0.44);
      font-size: 14px;
      line-height: 1;
      font-weight: 520;
    }
.cairn-demos .composer-send {
      width: 48px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--indigo);
      color: var(--on-dark);
      box-shadow: 0 9px 18px rgba(80, 97, 125, 0.22);
    }
.cairn-demos .composer-send svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.4;
    }
.cairn-demos .latent-chat-phone .bottom-nav {
      bottom: 18px;
    }
.cairn-demos .vignette-player[data-step="0"] .latent-thread > *:nth-child(-n + 2), .cairn-demos .vignette-player[data-step="1"] .latent-thread > *:nth-child(-n + 4), .cairn-demos .vignette-player[data-step="2"] .latent-thread > *:nth-child(-n + 5), .cairn-demos .vignette-player[data-step="3"] .latent-thread > * {
      opacity: 1;
      transform: translateY(0);
    }
.cairn-demos .vignette-player[data-step="3"] .latent-card .primary-button {
      background: color-mix(in srgb, var(--ks-color-paper-warm) 76%, var(--green) 24%);
      color: var(--indigo);
    }
.cairn-demos .today-product-phone, .cairn-demos .today-static-phone {
      background: var(--paper);
    }
.cairn-demos .today-static-phone {
      --ks-page-shell-fixed-header-scroll-height: calc(100% - 116px);
      --ks-page-shell-fixed-header-scroll-padding: 4px 16px 142px;
      --ks-page-shell-fixed-header-scroll-mask: linear-gradient(180deg, #000 0 calc(100% - 54px), transparent 100%);
      background: var(--paper);
    }
.cairn-demos .today-static-phone .kicker {
      margin: 0 0 6px;
      font-size: 11px;
      line-height: 1;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .today-static-phone .title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 27px;
      line-height: 1.04;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .today-scroll {
      height: calc(100% - 126px);
      padding: 4px 16px 142px;
      gap: 10px;
    }
.cairn-demos .sparse-lead {
      margin: 0 6px 12px;
      padding: 16px;
      border-radius: 8px;
      background: rgba(246, 245, 239, 0.92);
      border: 1px solid rgba(32, 28, 24, 0.12);
      box-shadow: 0 18px 36px rgba(39, 42, 82, 0.16);
      color: var(--ink);
    }
.cairn-demos .sparse-lead h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 27px;
      line-height: 1.04;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .sparse-lead span {
      display: block;
      color: rgba(32, 28, 24, 0.68);
      font-size: 13px;
      line-height: 1.45;
    }
.cairn-demos .today-product-phone .today-card, .cairn-demos .today-product-phone .sparse-lead {
      opacity: 0;
      transform: translateY(10px);
      animation: none;
      transition: opacity 320ms var(--ease), transform 320ms var(--ease), background-color 220ms ease;
    }
.cairn-demos .vignette-player[data-step="0"] .sparse-lead, .cairn-demos .vignette-player[data-step="1"] .sparse-lead, .cairn-demos .vignette-player[data-step="2"] .sparse-lead, .cairn-demos .vignette-player[data-step="3"] .sparse-lead, .cairn-demos .vignette-player[data-step="1"] .today-card:nth-child(-n + 4), .cairn-demos .vignette-player[data-step="2"] .today-card, .cairn-demos .vignette-player[data-step="3"] .today-card {
      opacity: 1;
      transform: translateY(0);
    }
.cairn-demos .vignette-player[data-step="3"] .today-card.actionable {
      background: color-mix(in srgb, var(--ks-color-paper-warm) 76%, var(--green) 24%);
    }
.cairn-demos .today-product-phone .today-card.has-meal {
      grid-template-columns: 78px minmax(0, 1fr) auto;
    }
.cairn-demos .today-static-phone .sparse-feed {
      height: var(--ks-page-shell-fixed-header-scroll-height);
      padding: var(--ks-page-shell-fixed-header-scroll-padding);
      overflow-y: auto;
      scrollbar-width: none;
      mask-image: var(--ks-page-shell-fixed-header-scroll-mask);
    }
.cairn-demos .today-static-phone .sparse-feed::-webkit-scrollbar {
      display: none;
    }
.cairn-demos .today-static-phone .card-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      align-content: start;
    }
.cairn-demos .today-static-phone .today-card {
      min-height: 82px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(32, 28, 24, 0.1);
      background: rgba(249, 248, 242, 0.9);
      box-shadow: 0 8px 20px rgba(39, 42, 82, 0.06);
      overflow: hidden;
      font-family: var(--font-today);
      transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms ease;
    }
.cairn-demos .today-static-phone .span-6 { grid-column: span 6; }
.cairn-demos .today-static-phone .span-3 { grid-column: span 3; }
.cairn-demos .today-static-phone .span-2 { grid-column: span 2; }
.cairn-demos .today-static-phone .thin { min-height: 50px; }
.cairn-demos .today-static-phone .confirm-card, .cairn-demos .today-static-phone .proactive-card, .cairn-demos .today-static-phone .invite-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }
.cairn-demos .today-static-phone .confirm-card {
      min-height: 86px;
      background: var(--ks-today-card-decision);
      border-color: var(--ks-today-decision-line);
    }
.cairn-demos .today-static-phone .plan-card .card-line {
      font-size: 15px;
      line-height: 1.26;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .today-static-phone .mini-actions {
      display: flex;
      gap: 6px;
    }
.cairn-demos .today-static-phone .mini-actions button {
      position: relative;
      min-width: 40px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid var(--ks-today-control-line);
      background: var(--ks-color-paper-warm);
      color: var(--indigo);
      font-family: var(--font-today);
      font-weight: var(--ks-weight-action);
      overflow: hidden;
      isolation: isolate;
      transition: transform 150ms var(--ease), background-color 150ms ease;
    }
.cairn-demos .today-static-phone .mini-actions .yes {
      background: var(--indigo);
      color: var(--ks-today-on-dark);
    }
.cairn-demos .today-static-phone .evidence-card {
      min-height: 104px;
      padding: 12px;
      display: grid;
      grid-template-rows: auto 22px auto;
      gap: 9px;
      background: rgba(249, 248, 242, 0.88);
    }
.cairn-demos .today-static-phone .evidence-card.span-2 {
      grid-template-rows: auto 22px;
      align-content: space-between;
    }
.cairn-demos .today-static-phone .evidence-head strong, .cairn-demos .today-static-phone .evidence-head small {
      display: block;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.cairn-demos .today-static-phone .evidence-head strong {
      color: var(--ks-today-ink-strong);
      font-size: 18px;
      line-height: 1.05;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .today-static-phone .evidence-head small {
      margin-top: 3px;
      color: rgba(32, 28, 24, 0.54);
      font-size: 10px;
      line-height: 1.12;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .today-static-phone .evidence-note {
      margin: 0;
      color: rgba(32, 28, 24, 0.6);
      font-size: 10px;
      line-height: 1.18;
      font-weight: 520;
    }
.cairn-demos .today-static-phone .sleep-ruler, .cairn-demos .today-static-phone .calorie-rail, .cairn-demos .today-static-phone .mood-trace {
      align-self: center;
    }
.cairn-demos .today-static-phone .sleep-ruler {
      display: grid;
      grid-template-columns: 1.25fr 0.52fr 0.9fr 1fr;
      gap: 3px;
      align-items: center;
    }
.cairn-demos .today-static-phone .sleep-ruler i {
      display: block;
      height: 5px;
      border-radius: 2px;
      background: rgba(96, 119, 126, 0.34);
    }
.cairn-demos .today-static-phone .sleep-ruler .deep { background: rgba(96, 119, 126, 0.72); }
.cairn-demos .today-static-phone .sleep-ruler .awake { background: rgba(180, 122, 60, 0.74); }
.cairn-demos .today-static-phone .mood-trace {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1px;
    }
.cairn-demos .today-static-phone .mood-trace i {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background: rgba(96, 119, 126, 0.34);
      transform: translateY(var(--y));
    }
.cairn-demos .today-static-phone .mood-trace .steady { background: rgba(96, 119, 126, 0.78); }
.cairn-demos .today-static-phone .mood-trace .rough { background: rgba(180, 122, 60, 0.66); }
.cairn-demos .today-static-phone .secondary-card {
      min-height: 82px;
      grid-template-rows: auto auto;
      align-content: space-between;
      gap: 10px;
    }
.cairn-demos .today-static-phone .dinner-plan-card {
      min-height: 104px;
      padding: 12px;
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }
.cairn-demos .today-static-phone .dinner-copy {
      min-width: 0;
    }
.cairn-demos .today-static-phone .dinner-plan-card .card-line {
      font-size: 15px;
      line-height: 1.2;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .today-static-phone .dinner-meta {
      margin: 5px 0 0;
      color: rgba(32, 28, 24, 0.58);
      font-size: 11px;
      line-height: 1.32;
      font-weight: 520;
    }
.cairn-demos .today-static-phone .proactive-card {
      min-height: 74px;
      padding: 12px 13px;
      background: rgba(249, 248, 242, 0.84);
    }
.cairn-demos .today-static-phone .proactive-card .card-line {
      font-size: 14px;
      line-height: 1.28;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .today-static-phone .invite-card {
      min-height: 56px;
      background: var(--ks-today-card-invite);
      border-color: var(--ks-today-green-line);
    }
.cairn-demos .today-static-phone .invite-card .card-line {
      max-width: 230px;
      color: var(--ks-today-button-dark);
      font-size: 13px;
      line-height: 1.32;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .today-static-phone .invite-card button {
      width: 54px;
      height: 32px;
      border: 1px solid var(--ks-today-invite-line);
      border-radius: 5px;
      background: var(--ks-today-button-dark);
      color: var(--ks-today-button-on-dark);
      font: var(--ks-weight-action) 12px/1 var(--font-today);
      cursor: pointer;
    }
.cairn-demos .today-static-phone .mascot-invite {
      min-height: 64px;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      background: var(--ks-today-card-invite);
      border-color: var(--ks-today-green-line);
    }
.cairn-demos .today-static-phone .mascot-avatar {
      width: 46px;
      height: 46px;
      object-fit: contain;
      align-self: center;
      justify-self: center;
      transform: scale(1.28);
      filter: drop-shadow(0 5px 8px var(--ks-today-avatar-shadow));
    }
.cairn-demos .today-static-phone .chat-fab {
      position: absolute;
      right: 18px;
      bottom: 24px;
      z-index: 30;
      width: var(--ks-quick-chat-orb-size);
      height: var(--ks-quick-chat-orb-size);
      display: grid;
      place-items: center;
      border: 1px solid rgba(32, 28, 24, 0.12);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(216, 200, 184, 0.14)),
        rgba(246, 245, 239, 0.94);
      color: var(--indigo);
      box-shadow: 0 12px 24px rgba(39, 42, 82, 0.14);
    }
.cairn-demos .today-static-phone .fab-mascot-window {
      position: absolute;
      inset: 0;
      display: block;
      overflow: hidden;
      border-radius: inherit;
    }
.cairn-demos .today-static-phone .chat-fab img {
      position: absolute;
      left: 102%;
      top: 64%;
      width: 88px;
      height: 96px;
      border-radius: 16px;
      object-fit: cover;
      transform: translate(-50%, -50%) rotate(-14deg);
      transform-origin: 48% 58%;
    }
.cairn-demos .today-static-phone .fab-bubble {
      position: absolute;
      left: 5px;
      top: 6px;
      width: 18px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2.5px;
      border-radius: 999px;
      border: 1px solid rgba(246, 245, 239, 0.68);
      background: rgba(39, 42, 82, 0.92);
      box-shadow: 0 5px 12px rgba(39, 42, 82, 0.16);
    }
.cairn-demos .today-static-phone .fab-bubble i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--on-dark);
    }
.cairn-demos .span-3 {
      grid-column: span 3;
    }
.cairn-demos .span-2 {
      grid-column: span 2;
    }
@keyframes fill-loop {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
@keyframes mind-reveal {
      0%, 9% { opacity: 0; transform: translateY(10px); }
      17%, 83% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }
@keyframes mind-star {
      0%, 28% { opacity: 0; transform: scale(0.5); }
      40%, 82% { opacity: 1; transform: scale(1); }
      52% { transform: scale(1.18); }
      100% { opacity: 0; transform: scale(0.9); }
    }
@keyframes show-hold {
      0%, 10% { opacity: 0; transform: translateY(10px); }
      18%, 82% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }
@keyframes meal-initial {
      0%, 16% { opacity: 0; transform: translateY(8px); }
      23%, 44% { opacity: 1; transform: translateY(0); }
      53%, 100% { opacity: 0; transform: translateY(-6px); }
    }
@keyframes meal-final {
      0%, 49% { opacity: 0; transform: translateY(8px); }
      59%, 84% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }
@keyframes chip-select {
      0%, 48% { background: var(--paper-warm); color: var(--indigo); }
      58%, 84% { background: var(--indigo); color: var(--on-dark); }
      100% { background: var(--paper-warm); color: var(--indigo); }
    }
@keyframes chat-reveal {
      0%, 7% { opacity: 0; transform: translateY(10px); }
      13%, 86% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }
@keyframes today-reveal {
      0%, 8% { opacity: 0; transform: translateY(10px); }
      18%, 82% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }
@media (prefers-reduced-motion: reduce) {
.cairn-demos *, .cairn-demos *::before, .cairn-demos *::after {
        animation: none !important;
        transition: none !important;
      }
.cairn-demos .mind-screen .soft-card, .cairn-demos .mind-screen .mind-note, .cairn-demos .meal-user-line, .cairn-demos .meal-card, .cairn-demos .meal-version.final, .cairn-demos .meal-chip-row, .cairn-demos .chat-thread > *, .cairn-demos .today-lead, .cairn-demos .today-card {
        opacity: 1 !important;
        transform: none !important;
      }
.cairn-demos .meal-version.initial {
        opacity: 0 !important;
      }
}
/* ============ W2 Calories: mirrors kepsle_calories_screen.html S5A-S7 ====
       The website layer presents finalized app states only. */
    @property --cal-ring-p { syntax: "<number>"; inherits: false; initial-value: 50; }
.cairn-demos .calories-plan-phone { background: var(--ks-color-paper); }
.cairn-demos /* ---- header band (app-shell-header) ---- */
    /* Tier 1 paper plane per guidelines/cairn-title-header.md; the retired dark band read as a teal block through the v2 shims. */
    .calories-plan-phone .cal-band { position: absolute; left: 0; right: 0; top: 0; height: 108px; z-index: 0; overflow: hidden; background: var(--ks-title-header-surface); border-bottom: var(--ks-title-header-divider-size) solid var(--ks-title-header-divider); }
.cairn-demos .calories-plan-phone .status { position: relative; z-index: 1; color: var(--ks-title-header-eyebrow); }
.cairn-demos .calories-plan-phone .app-header { position: relative; z-index: 1; padding: 10px 22px 14px; align-items: flex-end; }
.cairn-demos .calories-plan-phone .app-title { margin: 0; color: var(--ks-title-header-title); font-family: var(--ks-font-display); font-size: var(--ks-type-phone-title); line-height: 1.04; font-weight: var(--ks-weight-title); }
.cairn-demos .calories-plan-phone .header-status { min-height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--action-fill) 22%, transparent); border-radius: var(--ks-radius-pill); background: var(--action-subtle); color: color-mix(in srgb, var(--text-primary) 66%, var(--action-fill) 34%); font-size: 11px; font-weight: var(--ks-weight-card); }
.cairn-demos .calories-plan-phone .bottom-nav { grid-template-columns: repeat(4, 1fr); }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .bottom-nav, .cairn-demos .calories-plan-phone[data-cal-step="6"] .bottom-nav, .cairn-demos .calories-plan-phone[data-cal-step="7"] .bottom-nav { opacity: 0; pointer-events: none; }
.cairn-demos .cp-title-plan { display: none; }
.cairn-demos .cp-pill-chat, .cairn-demos .cp-pill-card, .cairn-demos .cp-pill-detail, .cairn-demos .cp-pill-adjust, .cairn-demos .cp-pill-accepted, .cairn-demos .cp-pill-diary, .cairn-demos .cp-pill-logged { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="1"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="2"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="4"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-pill-open, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-pill-open { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="1"] .cp-pill-chat { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="2"] .cp-pill-card { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-pill-detail { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="4"] .cp-pill-adjust { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-pill-accepted { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-pill-diary { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-pill-logged { display: inline; }
.cairn-demos /* ---- screen viewport + cross-fade ---- */
    .cp-viewport { position: absolute; left: 0; right: 0; top: 108px; bottom: 0; z-index: 1; }
.cairn-demos .cp-screen { position: absolute; inset: 0; overflow: auto; padding: 14px 16px 110px; display: grid; gap: 12px; align-content: start; opacity: 0; pointer-events: none; transition: opacity 380ms var(--ease), transform 380ms var(--ease), filter 380ms var(--ease); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 46px), transparent 100%); }
.cairn-demos .cp-screen::-webkit-scrollbar { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="0"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="1"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="2"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="4"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-home, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-home { opacity: 1; pointer-events: auto; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-home { opacity: 0; pointer-events: none; filter: blur(1.2px); transform: scale(0.985); }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-viewport { z-index: 7; pointer-events: none; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-plan { opacity: 1; pointer-events: auto; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cal-band, .cairn-demos .calories-plan-phone[data-cal-step="3"] > .status, .cairn-demos .calories-plan-phone[data-cal-step="3"] > .app-header {
      filter: blur(3px);
      opacity: 0.68;
    }
.cairn-demos /* ---- module card ---- */
    .calories-plan-phone .module-card { padding: 14px; border-radius: var(--ks-radius-card); border: 1px solid var(--ks-today-line); background: var(--ks-today-card-default); box-shadow: var(--ks-shadow-card); }
.cairn-demos .calories-plan-phone .module-card h3 { margin: 0 0 4px; font-family: var(--ks-font-display); font-size: 15px; font-weight: var(--ks-weight-card); color: var(--ks-today-ink-strong); }
.cairn-demos /* ---- canonical Calories dashboard surface ---- */
    .calories-plan-phone .dashboard-board, .cairn-demos .calories-plan-phone .dinner-slot-card, .cairn-demos .calories-plan-phone .selected-dinner-card, .cairn-demos .calories-plan-phone .meal-card, .cairn-demos .calories-plan-phone .signal-tile {
      border-radius: var(--ks-radius-card);
      border: 1px solid var(--ks-module-card-line);
      background: var(--ks-module-card-surface);
      box-shadow: var(--ks-module-card-shadow);
    }
.cairn-demos .calories-plan-phone .dashboard-board {
      padding: 15px 14px 14px;
      display: grid;
      gap: 13px;
      background: var(--ks-module-card-surface);
    }
.cairn-demos .calories-plan-phone .dash-section-head, .cairn-demos .calories-plan-phone .meal-card-head, .cairn-demos .calories-plan-phone .signal-head, .cairn-demos .calories-plan-phone .compact-action-card, .cairn-demos .calories-plan-phone .more-calories-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }
.cairn-demos .calories-plan-phone .dash-section-head h3, .cairn-demos .calories-plan-phone .meal-card-head h3, .cairn-demos .calories-plan-phone .signal-head h3, .cairn-demos .calories-plan-phone .compact-action-card h3, .cairn-demos .calories-plan-phone .more-calories-head h3 {
      margin: 0;
      font-family: var(--ks-font-display);
      font-size: 17px;
      line-height: var(--ks-module-card-title-leading);
      font-weight: 820;
      color: var(--ks-color-food-ink);
    }
.cairn-demos .calories-plan-phone .dash-section-head a, .cairn-demos .calories-plan-phone .meal-card-head a, .cairn-demos .calories-plan-phone .signal-head a {
      color: #5c6f7b;
      font-size: 10px;
      font-weight: 740;
      text-decoration: none;
    }
.cairn-demos .calories-plan-phone .remaining-summary {
      --food-carb: var(--ks-color-food-carb);
      --food-protein: var(--ks-color-food-protein);
      --food-fat: var(--ks-color-food-fat);
      --food-ink: var(--ks-color-food-ink);
      --food-muted: var(--ks-color-food-muted);
      --food-cream: var(--ks-color-food-cream);
      --food-track: var(--ks-color-food-track);
      --food-ring: var(--ks-color-food-ring);
      display: grid;
      grid-template-columns: 106px minmax(0, 1fr);
      gap: 15px;
      align-items: center;
      padding: 4px 0 2px;
      border-radius: 10px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
.cairn-demos .calories-plan-phone .remaining-ring {
      --ring-inset: 10px;
      width: 106px;
      height: 106px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--food-ring) 50%, var(--food-track) 0);
      box-shadow: inset 0 0 0 1px rgba(81, 65, 46, 0.08), inset 0 2px 9px rgba(32, 28, 24, 0.10);
      position: relative;
    }
.cairn-demos .calories-plan-phone .remaining-ring::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-image: var(--ks-material-limestone-mask);
      background-size: var(--ks-material-control-size);
      background-position: 56% 46%;
      mix-blend-mode: var(--ks-material-limestone-blend);
      opacity: var(--ks-material-control-strong-opacity);
      filter: var(--ks-material-control-filter);
      pointer-events: none;
    }
.cairn-demos .calories-plan-phone .remaining-ring::after {
      content: "";
      position: absolute;
      inset: var(--ring-inset, 12px);
      border-radius: 50%;
      background: var(--ks-color-paper-warm);
      box-shadow: inset 0 0 0 1px var(--ks-module-card-line-soft);
      z-index: 1;
    }
.cairn-demos .calories-plan-phone .remaining-ring .ring-copy {
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      gap: 2px;
      text-align: center;
    }
.cairn-demos .calories-plan-phone .remaining-ring b {
      font-family: var(--ks-font-metric);
      font-size: 28px;
      line-height: .96;
      font-weight: var(--ks-weight-metric);
      color: var(--food-ink);
    }
.cairn-demos .calories-plan-phone .remaining-ring span {
      color: var(--food-ink);
      font-size: 9.5px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .progress-stack {
      display: grid;
      gap: 9px;
      min-width: 0;
    }
.cairn-demos .calories-plan-phone .progress-row {
      display: grid;
      gap: 4px;
    }
.cairn-demos .calories-plan-phone .progress-label {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-size: 11px;
      line-height: 1;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .progress-name {
      display: grid;
      grid-template-columns: 15px minmax(0, 1fr);
      gap: 6px;
      align-items: center;
      min-width: 0;
      color: var(--bar-color);
    }
.cairn-demos .calories-plan-phone .macro-icon {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos .calories-plan-phone .progress-label b {
      color: var(--food-ink);
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .progress-amount {
      min-width: 32px;
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-end;
      color: var(--food-muted);
      font-family: var(--ks-font-metric);
      line-height: 1;
    }
.cairn-demos .calories-plan-phone .progress-amount strong {
      color: var(--food-ink);
      font-size: 11px;
      font-weight: 520;
    }
.cairn-demos .calories-plan-phone .progress-amount small {
      margin-left: 1px;
      font-family: var(--ks-font-ui);
      font-size: 9px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .progress-track {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(32,28,24,0.035)), var(--food-track);
      box-shadow: inset 0 0 0 1px rgba(81, 65, 46, 0.08);
    }
.cairn-demos .calories-plan-phone .progress-track i {
      display: block;
      width: var(--fill);
      height: 100%;
      border-radius: inherit;
      background: var(--ks-material-limestone-edge), linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 72%, var(--ks-color-paper-warm) 28%), var(--bar-color));
      background-blend-mode: soft-light, normal;
    }
.cairn-demos .calories-plan-phone .remaining-context {
      grid-column: 1 / -1;
      margin: 0;
      padding-top: 2px;
      color: var(--food-muted);
      font-size: 11px;
      line-height: 1.35;
      font-weight: var(--ks-weight-action);
      text-align: center;
    }
.cairn-demos .calories-plan-phone .calorie-snapshot {
      display: grid;
      grid-template-columns: 1fr 118px 1fr;
      gap: 10px;
      align-items: center;
    }
.cairn-demos .calories-plan-phone .calorie-stat-stack { display: grid; gap: 8px; }
.cairn-demos .calories-plan-phone .calorie-stat {
      min-height: 54px;
      display: grid;
      align-content: center;
      gap: 2px;
      padding: 8px 9px;
      border-radius: 8px;
      border: 1px solid var(--ks-today-line-soft);
      background: rgba(246, 245, 239, 0.72);
    }
.cairn-demos .calories-plan-phone .calorie-stat b {
      font-family: var(--ks-font-metric);
      font-size: 20px;
      line-height: 1;
      font-weight: var(--ks-weight-metric);
      color: var(--ks-color-ink);
    }
.cairn-demos .calories-plan-phone .calorie-stat span {
      color: var(--ks-today-ink-muted);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .calorie-ring {
      width: 118px;
      height: 118px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: conic-gradient(var(--ks-color-indigo) 50%, var(--ks-today-viz-track-soft) 0);
    }
.cairn-demos .calories-plan-phone .calorie-ring::after {
      content: "";
      position: absolute;
      inset: 13px;
      border-radius: 50%;
      background: var(--ks-color-paper-warm);
    }
.cairn-demos .calories-plan-phone .ring-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 2px;
      text-align: center;
    }
.cairn-demos .calories-plan-phone .ring-copy b {
      font-family: var(--ks-font-metric);
      font-size: 27px;
      line-height: 1;
      font-weight: var(--ks-weight-metric);
      color: var(--ks-color-ink);
    }
.cairn-demos .calories-plan-phone .ring-copy span {
      color: var(--ks-today-ink-muted);
      font-size: 10px;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .calories-plan-phone .macro-rings {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
.cairn-demos .calories-plan-phone .macro-ring-card {
      min-height: 82px;
      display: grid;
      place-items: center;
      gap: 4px;
      padding: 9px 6px;
      border-radius: 9px;
      border: 1px solid var(--ks-today-line-soft);
      background: rgba(246, 245, 239, 0.74);
      text-align: center;
    }
.cairn-demos .calories-plan-phone .macro-mini-ring {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: conic-gradient(var(--ring-color) var(--value), var(--ks-today-viz-track-soft) 0);
    }
.cairn-demos .calories-plan-phone .macro-mini-ring::after, .cairn-demos .calories-plan-phone .meal-ring::after, .cairn-demos .calories-plan-phone .signal-ring::after {
      content: "";
      position: absolute;
      inset: var(--ring-inset, 8px);
      border-radius: 50%;
      background: var(--ks-color-paper-warm);
    }
.cairn-demos .calories-plan-phone .macro-mini-ring b, .cairn-demos .calories-plan-phone .meal-ring b, .cairn-demos .calories-plan-phone .signal-ring b {
      position: relative;
      z-index: 1;
      font-family: var(--ks-font-metric);
      font-size: 12px;
      line-height: 1;
      font-weight: var(--ks-weight-metric);
      color: var(--ks-color-ink);
    }
.cairn-demos .calories-plan-phone .macro-name {
      color: var(--ks-today-ink);
      font-size: 10.5px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .macro-total {
      color: var(--ks-today-ink-muted);
      font-size: 9px;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .calories-plan-phone .meal-card {
      min-height: 340px;
      display: grid;
      position: static;
      padding: 0;
      overflow: hidden;
      opacity: 1;
      transform: none;
      animation: none;
      background: var(--ks-today-card-default);
    }
.cairn-demos .calories-plan-phone .meal-card-head { padding: 13px 14px 10px; }
.cairn-demos .calories-plan-phone .meal-list {
      display: grid;
      border-top: 1px solid var(--ks-today-line-soft);
    }
.cairn-demos .calories-plan-phone .meal-entry {
      min-height: 74px;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr) 44px;
      gap: 12px;
      align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid var(--ks-today-line-soft);
    }
.cairn-demos .calories-plan-phone .meal-entry:last-child { border-bottom: 0; }
.cairn-demos .calories-plan-phone .meal-ring {
      --ring-inset: 8px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: conic-gradient(var(--ring-color) var(--value), var(--ks-today-viz-track-soft) 0);
      position: relative;
    }
.cairn-demos .calories-plan-phone .meal-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
.cairn-demos .calories-plan-phone .meal-copy b {
      font-family: var(--ks-font-display);
      font-size: 14px;
      line-height: 1.05;
      font-weight: var(--ks-weight-card);
      color: var(--ks-today-ink-strong);
    }
.cairn-demos .calories-plan-phone .meal-copy span {
      color: var(--ks-today-ink-muted);
      font-size: 12px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .calories-plan-phone .meal-add-button {
      width: var(--ks-action-inline-size);
      height: var(--ks-action-inline-size);
      display: grid;
      place-items: center;
      border: 1px solid var(--ks-action-inline-line);
      border-radius: var(--ks-action-inline-radius);
      background: var(--ks-action-inline-bg);
      color: var(--ks-action-inline-on);
      font-size: var(--ks-action-inline-icon-size);
      font-weight: var(--ks-action-inline-icon-weight);
      line-height: 1;
      box-shadow: var(--ks-action-inline-shadow);
      cursor: pointer;
      transition:
        transform var(--ks-motion-fast) var(--ks-ease-out),
        background-color var(--ks-motion-fast) ease,
        border-color var(--ks-motion-fast) ease;
    }
.cairn-demos .calories-plan-phone .meal-add-button:hover { background: var(--ks-action-inline-bg-hover); }
.cairn-demos .calories-plan-phone .meal-add-button:active { transform: scale(var(--ks-motion-press-scale)); }
.cairn-demos .calories-plan-phone .signal-panel { display: grid; gap: 10px; }
.cairn-demos .calories-plan-phone .signal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
.cairn-demos .calories-plan-phone .signal-tile {
      min-height: 92px;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 11px 12px;
    }
.cairn-demos .calories-plan-phone .signal-ring {
      --ring-inset: 9px;
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--ring-color) var(--value), var(--ks-today-viz-track-soft) 0);
      position: relative;
    }
.cairn-demos .calories-plan-phone .signal-ring b { font-size: 14px; }
.cairn-demos .calories-plan-phone .signal-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
.cairn-demos .calories-plan-phone .signal-copy b {
      font-family: var(--ks-font-display);
      font-size: 13px;
      line-height: 1.05;
      font-weight: var(--ks-weight-card);
      color: var(--ks-today-ink-strong);
    }
.cairn-demos .calories-plan-phone .signal-copy span {
      color: var(--ks-today-ink-muted);
      font-size: 10.5px;
      line-height: 1.3;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .compact-action-card {
      padding: 13px 14px;
      align-items: center;
    }
.cairn-demos .calories-plan-phone .compact-action-buttons { display: flex; gap: 7px; }
.cairn-demos .calories-plan-phone .compact-action-buttons button {
      min-width: 62px;
      min-height: var(--ks-action-standard-height-compact);
      padding: 0 var(--ks-action-standard-padding-inline);
      border-radius: var(--ks-action-standard-radius);
      border: 1px solid var(--ks-action-standard-line);
      background: var(--ks-action-standard-bg);
      color: var(--ks-action-standard-on);
      font: var(--ks-action-standard-font-weight) var(--ks-action-standard-font-size-compact)/1 var(--ks-font-ui);
      cursor: pointer;
    }
.cairn-demos .calories-plan-phone .compact-action-buttons .primary {
      border-color: var(--ks-action-emphasis-line);
      background: var(--ks-action-emphasis-bg);
      color: var(--ks-action-emphasis-on);
      box-shadow: var(--ks-action-emphasis-shadow);
    }
.cairn-demos .calories-plan-phone .more-calories-card {
      padding: 13px 14px 14px;
      display: grid;
      gap: 10px;
    }
.cairn-demos .calories-plan-phone .more-calories-head span {
      color: var(--ks-today-ink-muted);
      font-size: 10.5px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .more-calories-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
.cairn-demos .calories-plan-phone .more-link {
      min-height: 68px;
      display: grid;
      align-content: center;
      gap: 4px;
      padding: 10px;
      border: 1px solid var(--ks-today-line-soft);
      border-radius: 8px;
      background: rgba(246, 245, 239, 0.74);
      text-align: left;
      font-family: var(--ks-font-ui);
      cursor: pointer;
    }
.cairn-demos .calories-plan-phone .more-link b {
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 13px;
      line-height: 1.05;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .calories-plan-phone .more-link span {
      color: var(--ks-today-ink-muted);
      font-size: 10.5px;
      line-height: 1.3;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .calories-plan-phone .more-link.recipe-preview {
      grid-column: 1 / -1;
      min-height: 78px;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      align-content: initial;
      gap: 11px;
    }
.cairn-demos .calories-plan-phone .more-link .thumb {
      width: 72px;
      height: 56px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--ks-today-line-soft);
      background: var(--ks-color-paper-warm);
    }
.cairn-demos .calories-plan-phone .more-link .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.cairn-demos .calories-plan-phone .more-link .copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
.cairn-demos .calories-plan-phone .dinner-slot-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 76px;
      gap: 11px;
      align-items: center;
      min-height: 78px;
      padding: 13px 14px;
      overflow: hidden;
      border-color: rgba(180, 122, 60, 0.28);
      background: linear-gradient(180deg, rgba(249, 248, 242, 0.98), color-mix(in srgb, var(--ks-color-state-draft) 16%, var(--ks-color-paper-warm) 84%));
      cursor: pointer;
    }
.cairn-demos .calories-plan-phone .dinner-slot-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--ks-color-ochre);
    }
.cairn-demos .calories-plan-phone .slot-tag {
      display: block;
      margin: 0 0 3px;
      color: var(--ks-color-ochre-text);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
.cairn-demos .calories-plan-phone .slot-copy p, .cairn-demos .calories-plan-phone .selected-copy p {
      margin: 0;
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 14px;
      line-height: 1.18;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .calories-plan-phone .slot-copy small, .cairn-demos .calories-plan-phone .selected-copy small {
      display: block;
      margin-top: 4px;
      color: var(--ks-today-ink-muted);
      font-size: 10.5px;
      line-height: 1.35;
      font-weight: 520;
    }
.cairn-demos .calories-plan-phone .slot-start {
      min-width: 66px;
      min-height: 32px;
      padding: 0 14px;
      border: 1px solid var(--action-fill);
      border-radius: var(--ks-radius-pill);
      background: var(--action-fill);
      color: var(--action-on);
      font: var(--ks-weight-action) 11px/1 var(--ks-font-ui);
      cursor: pointer;
      box-shadow: var(--ks-action-emphasis-shadow);
    }
.cairn-demos .calories-plan-phone .accepted-slot-card {
      display: none;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 10px;
    }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .accepted-slot-card, .cairn-demos .calories-plan-phone[data-cal-step="6"] .accepted-slot-card { display: grid; }
.cairn-demos .calories-plan-phone .cp-meal-dinner-accepted, .cairn-demos .calories-plan-phone .cp-meal-dinner-logged { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-meal-dinner-default, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-meal-dinner-default, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-meal-dinner-default { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-meal-dinner-accepted, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-meal-dinner-accepted { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-meal-dinner-logged { display: inline; }
.cairn-demos .calories-plan-phone .accepted-slot-card .slot-start {
      padding: 0 13px;
      background: var(--action-fill);
      box-shadow: var(--ks-action-emphasis-shadow-strong);
    }
.cairn-demos .calories-plan-phone .slot-thumb {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--ks-today-line-soft);
    }
.cairn-demos .calories-plan-phone .slot-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      object-fit: cover;
    }
.cairn-demos .calories-plan-phone .icon-button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: var(--ks-color-indigo);
      color: var(--ks-color-on-dark);
      display: grid;
      place-items: center;
      cursor: pointer;
    }
.cairn-demos .calories-plan-phone .icon-button svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.cairn-demos /* ---- cross-fade number swaps ---- */
    .cal-swap-steer, .cairn-demos .cal-swap-save { display: inline-grid; vertical-align: bottom; }
.cairn-demos .cal-swap-steer > span, .cairn-demos .cal-swap-save > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 360ms var(--ease); }
.cairn-demos .cal-swap-steer .s-steer { opacity: 0; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cal-swap-steer .s-base, .cairn-demos .calories-plan-phone[data-cal-step="4"] .cal-swap-steer .s-base { opacity: 0; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cal-swap-steer .s-steer, .cairn-demos .calories-plan-phone[data-cal-step="4"] .cal-swap-steer .s-steer { opacity: 1; }
.cairn-demos .cal-swap-save .s-saved { opacity: 0; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cal-swap-save .s-base { opacity: 0; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cal-swap-save .s-saved { opacity: 1; }
.cairn-demos /* ---- calorie hero (ring + breakdown) ---- */
    .calories-plan-phone .cal-hero { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: var(--ks-radius-card); background: var(--ks-color-paper-warm); border: 1px solid var(--ks-today-line); box-shadow: 0 1px 2px rgba(40, 45, 80, 0.06), 0 14px 28px -14px rgba(40, 45, 80, 0.20); }
.cairn-demos .calories-plan-phone .cal-ring { position: relative; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; --cal-ring-p: 50; background: conic-gradient(var(--ks-color-indigo) calc(var(--cal-ring-p) * 1%), var(--ks-today-viz-track-soft) 0); transition: --cal-ring-p 620ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cal-ring, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cal-ring { --cal-ring-p: 22; }
.cairn-demos .calories-plan-phone .cal-ring::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--ks-color-paper-warm); }
.cairn-demos .calories-plan-phone .cal-ring .v { position: relative; z-index: 1; text-align: center; }
.cairn-demos .calories-plan-phone .cal-ring .v b { display: block; font-family: var(--ks-font-metric); font-size: 27px; line-height: 1; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); }
.cairn-demos .calories-plan-phone .cal-ring .v small { font-size: 10px; font-weight: var(--ks-weight-card); color: var(--ks-today-ink-muted); }
.cairn-demos .calories-plan-phone .cal-breakdown { display: grid; gap: 9px; }
.cairn-demos .calories-plan-phone .cal-breakdown .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cairn-demos .calories-plan-phone .cal-breakdown .k { color: var(--ks-today-ink-soft); font-size: 12px; font-weight: 520; }
.cairn-demos .calories-plan-phone .cal-breakdown .n { font-family: var(--ks-font-metric); font-size: 14px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); white-space: nowrap; }
.cairn-demos .calories-plan-phone .cal-breakdown .n small { font-family: var(--ks-font-ui); font-size: 10px; color: var(--ks-today-ink-muted); margin-left: 2px; }
.cairn-demos .cp-draftrow { transition: opacity 420ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-draftrow, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-draftrow { opacity: 0; }
.cairn-demos /* ---- dual-state rail ---- */
    .calories-plan-phone .calorie-rail { position: relative; height: 12px; border-radius: 6px; background: var(--ks-today-viz-track-soft); --used: 50%; --plan: 72%; }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .calorie-rail, .cairn-demos .calories-plan-phone[data-cal-step="4"] .calorie-rail { --plan: 78%; }
.cairn-demos .calories-plan-phone .rail-eaten { position: absolute; left: 0; top: 0; bottom: 0; width: var(--used); border-radius: 6px; background: var(--ks-color-state-eaten); transition: width 450ms var(--ease); }
.cairn-demos .calories-plan-phone .rail-draft { position: absolute; top: 0; bottom: 0; left: var(--used); width: calc(var(--plan) - var(--used)); border: 1px dashed var(--ks-color-state-draft-line); border-left: none; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(45deg, var(--ks-color-state-draft-line) 0 4px, var(--ks-color-state-draft) 4px 8px); transition: width 450ms var(--ease), left 450ms var(--ease); }
.cairn-demos .calories-plan-phone .rail-tick { position: absolute; top: -4px; bottom: -4px; left: var(--plan); width: 2px; border-radius: 2px; background: var(--ks-color-state-landing); transform: translateX(-1px); transition: left 450ms var(--ease); }
.cairn-demos /* diary write: the dashed draft segment converts to solid eaten fill once the confirm sheet has settled */
    .calories-plan-phone[data-cal-step="7"] .calorie-rail { --used: var(--plan); }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .rail-eaten { transition: width 780ms var(--ease) 400ms; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .rail-draft { opacity: 0; transition: width 780ms var(--ease) 400ms, left 780ms var(--ease) 400ms, opacity 620ms var(--ease) 560ms; }
.cairn-demos /* ---- macros ---- */
    .calories-plan-phone .macro-rows { display: grid; gap: 9px; }
.cairn-demos .calories-plan-phone .macro-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) 50px; gap: 10px; align-items: center; }
.cairn-demos .calories-plan-phone .macro-line .ml { color: var(--ks-today-ink-soft); font-size: 11px; font-weight: var(--ks-weight-action); }
.cairn-demos .calories-plan-phone .macro-line .mt { height: 6px; border-radius: 3px; background: var(--ks-today-viz-track-soft); overflow: hidden; }
.cairn-demos .calories-plan-phone .macro-line .mt i { display: block; height: 100%; width: var(--fill); border-radius: inherit; background: color-mix(in srgb, var(--ks-color-indigo) 58%, transparent); }
.cairn-demos .calories-plan-phone .macro-line .mv { text-align: right; font-family: var(--ks-font-metric); font-size: 12.5px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); }
.cairn-demos .calories-plan-phone .macro-line .mv small { font-family: var(--ks-font-ui); font-size: 9px; color: var(--ks-today-ink-muted); margin-left: 1px; }
.cairn-demos .calories-plan-phone .macro-chips { display: flex; gap: 7px; margin-top: 11px; }
.cairn-demos .calories-plan-phone .macro-chips span { flex: 1; min-height: 30px; display: grid; align-content: center; text-align: center; border-radius: 7px; background: rgba(39, 42, 82, 0.06); color: var(--ks-today-ink-soft); font-size: 10px; font-weight: var(--ks-weight-action); }
.cairn-demos /* ---- capture ---- */
    .calories-plan-phone .capture-primary { width: 100%; min-height: var(--ks-action-emphasis-height-large); display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--ks-action-emphasis-line); border-radius: var(--ks-action-emphasis-radius); background: var(--ks-action-emphasis-bg); color: var(--ks-action-emphasis-on); font-family: var(--ks-font-ui); font-weight: var(--ks-action-emphasis-font-weight); font-size: var(--ks-action-emphasis-font-size-large); box-shadow: var(--ks-action-emphasis-shadow-strong); box-sizing: border-box; cursor: pointer; transition: transform var(--ks-motion-fast) var(--ks-ease-out); }
.cairn-demos .calories-plan-phone .capture-primary:active { transform: scale(var(--ks-motion-press-scale)); }
.cairn-demos .calories-plan-phone .capture-primary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cairn-demos .calories-plan-phone .capture-primary small { font-weight: var(--ks-action-emphasis-font-weight); font-size: 11px; opacity: 0.78; }
.cairn-demos .calories-plan-phone .capture-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.cairn-demos .calories-plan-phone .capture-secondary button { min-height: var(--ks-action-standard-height); border: 1px solid var(--ks-action-standard-line); border-radius: var(--ks-action-standard-radius); background: var(--ks-action-standard-bg); color: var(--ks-action-standard-on); font: var(--ks-action-standard-font-weight) var(--ks-action-standard-font-size-compact)/1 var(--ks-font-ui); cursor: pointer; transition: transform var(--ks-motion-fast) var(--ks-ease-out), background-color var(--ks-motion-fast) ease; }
.cairn-demos .calories-plan-phone .capture-secondary button:active { transform: scale(var(--ks-motion-press-scale)); }
.cairn-demos /* ---- meal log ---- */
    .calories-plan-phone .meal-log { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 4px; }
.cairn-demos .calories-plan-phone .meal-row { min-height: 56px; padding: 9px 8px; border-radius: 8px; border: 1px solid var(--ks-today-line-soft); background: rgba(246, 245, 239, 0.78); display: grid; gap: 3px; align-content: center; }
.cairn-demos .calories-plan-phone .meal-row .slot { color: var(--ks-today-ink); font-size: 10.5px; font-weight: var(--ks-weight-action); line-height: 1.1; }
.cairn-demos .calories-plan-phone .meal-row .kcal { font-family: var(--ks-font-metric); font-size: 16px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); line-height: 1; }
.cairn-demos .calories-plan-phone .meal-row .kcal small { font-family: var(--ks-font-ui); font-size: 9px; font-weight: 520; color: var(--ks-today-ink-muted); margin-left: 2px; }
.cairn-demos .calories-plan-phone .meal-row .kcal.empty { font-family: var(--ks-font-ui); font-size: 12px; font-weight: 520; color: var(--ks-today-ink-muted); }
.cairn-demos .calories-plan-phone .cal-dinner-saved { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cal-dinner-open, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cal-dinner-open { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cal-dinner-saved, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cal-dinner-saved { display: inline; }
.cairn-demos /* ---- dinner slot card ---- */
    .calories-plan-phone .cp-slot-entry { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 11px; align-items: center; cursor: pointer; }
.cairn-demos .calories-plan-phone[data-cal-step="2"] .cp-slot-entry, .cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-slot-entry, .cairn-demos .calories-plan-phone[data-cal-step="4"] .cp-slot-entry, .cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-slot-entry, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-slot-entry, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-slot-entry { display: none; }
.cairn-demos .calories-plan-phone .cp-slot-suggested, .cairn-demos .calories-plan-phone .cp-slot-editing { display: none; }
.cairn-demos .calories-plan-phone .cp-slot-editing { grid-template-columns: minmax(0, 1fr) auto; }
.cairn-demos .calories-plan-phone[data-cal-step="2"] .cp-slot-suggested, .cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-slot-suggested { display: grid; }
.cairn-demos .calories-plan-phone[data-cal-step="4"] .cp-slot-editing { display: grid; }
.cairn-demos .calories-plan-phone .slot-state {
      min-width: 72px;
      min-height: 34px;
      display: inline-grid;
      place-items: center;
      padding: 0 13px;
      border-radius: var(--ks-radius-pill);
      border: 1px solid color-mix(in srgb, var(--ks-color-ochre) 34%, var(--ks-today-line));
      background: color-mix(in srgb, var(--ks-color-state-draft) 22%, var(--ks-color-paper-warm) 78%);
      color: var(--ks-color-ochre-text);
      font-size: 10.5px;
      font-weight: var(--ks-weight-action);
    }
.cairn-demos .cp-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--ks-today-line-soft); background: rgba(249, 248, 242, 0.9); position: relative; }
.cairn-demos .cp-ava img { position: absolute; left: 50%; top: 58%; width: 50px; height: 50px; object-fit: contain; transform: translate(-50%, -50%); }
.cairn-demos .cp-slot-entry p { margin: 0; color: var(--ks-today-ink-strong); font-family: var(--ks-font-display); font-size: 14px; line-height: 1.18; font-weight: var(--ks-weight-card); }
.cairn-demos .cp-slot-entry small { display: block; margin-top: 4px; color: var(--ks-today-ink-muted); font-size: 10.5px; line-height: 1.35; }
.cairn-demos .cp-slot-entry button { min-height: 42px; border: 0; border-radius: var(--ks-radius-control); background: var(--ks-color-ochre); color: var(--ks-color-on-dark); font: var(--ks-weight-action) 12px/1 var(--ks-font-ui); cursor: pointer; }
.cairn-demos .calories-plan-phone kepsle-instant-chat.cp-idle-chat {
      position: absolute;
      inset: 0;
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      transition: opacity 220ms var(--ease), visibility 220ms var(--ease);
      z-index: 6;
    }
.cairn-demos .calories-plan-phone[data-cal-step="1"] kepsle-instant-chat.cp-idle-chat, .cairn-demos .calories-plan-phone[data-cal-step="2"] kepsle-instant-chat.cp-idle-chat, .cairn-demos .calories-plan-phone[data-cal-step="3"] kepsle-instant-chat.cp-idle-chat, .cairn-demos .calories-plan-phone[data-cal-step="4"] kepsle-instant-chat.cp-idle-chat, .cairn-demos .calories-plan-phone[data-cal-step="6"] kepsle-instant-chat.cp-idle-chat, .cairn-demos .calories-plan-phone[data-cal-step="7"] kepsle-instant-chat.cp-idle-chat {
      opacity: 0;
      visibility: hidden;
    }
.cairn-demos .calories-plan-phone kepsle-instant-chat.cp-chat {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 260ms var(--ease);
      z-index: 4;
    }
.cairn-demos .calories-plan-phone[data-cal-step="1"] kepsle-instant-chat.cp-slot-chat, .cairn-demos .calories-plan-phone[data-cal-step="2"] kepsle-instant-chat.cp-recipe-chat, .cairn-demos .calories-plan-phone[data-cal-step="4"]:not(.cal-adjusted) kepsle-instant-chat.cp-adjust-chat, .cairn-demos .calories-plan-phone[data-cal-step="4"].cal-adjusted kepsle-instant-chat.cp-adjusted-chat {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
.cairn-demos /* adjusted-recipe copy swaps: the cal-adjusted flag flips every number the
       lighter version changes so accept/diary/logged all stay consistent */
    .calories-plan-phone .cp-adj-alt { display: none; }
.cairn-demos .calories-plan-phone.cal-adjusted .cp-adj-base { display: none; }
.cairn-demos .calories-plan-phone.cal-adjusted .cp-adj-alt { display: inline; }
.cairn-demos .cp-recipe-chat-slot {
      height: 100%;
      min-height: 0;
      overflow: auto;
      display: grid;
      align-content: start;
      gap: 9px;
      padding: 2px 2px 4px 0;
      color: var(--ks-today-ink);
    }
.cairn-demos .cp-recipe-chat-slot::-webkit-scrollbar { display: none; }
.cairn-demos .cp-slot-chat-brief {
      display: none;
      gap: 10px;
      padding: 12px;
      border-radius: var(--ks-radius-card);
      border: 1px solid var(--ks-today-line);
      background: var(--ks-today-card-default);
      box-shadow: var(--ks-shadow-card);
    }
.cairn-demos .cp-slot-chat-brief .eyebrow {
      color: var(--ks-color-ochre-text);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
      letter-spacing: .03em;
      text-transform: uppercase;
    }
.cairn-demos .cp-slot-chat-brief h3 {
      margin: 0;
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 15px;
      line-height: 1.1;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .cp-slot-chat-brief p {
      margin: 0;
      color: var(--ks-today-ink-soft);
      font-size: 11px;
      line-height: 1.4;
    }
.cairn-demos .cp-slot-chat-cues {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }
.cairn-demos .cp-slot-chat-cues button {
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid var(--ks-today-line);
      background: var(--ks-color-paper-warm);
      color: var(--ks-color-indigo);
      font: var(--ks-weight-action) 11px/1 var(--ks-font-ui);
      cursor: pointer;
    }
.cairn-demos .calories-plan-phone[data-cal-step="1"] .cp-slot-chat .cp-slot-chat-brief {
      display: grid;
    }
.cairn-demos .cp-chat-underlay {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 220px;
      bottom: 28px;
      z-index: 4;
      display: grid;
      align-content: end;
      gap: 9px;
      opacity: 0;
      pointer-events: none;
      filter: blur(3px);
      transform: scale(0.985);
      transition: opacity 260ms var(--ease);
    }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-chat-underlay {
      opacity: 0.68;
    }
.cairn-demos .cp-chat-line {
      max-width: 86%;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid var(--ks-today-line-soft);
      background: var(--ks-color-paper-warm);
      color: var(--ks-today-ink-soft);
      font-size: 11.5px;
      line-height: 1.38;
    }
.cairn-demos .cp-chat-line.user {
      justify-self: end;
      border-color: color-mix(in srgb, var(--ks-color-indigo) 24%, transparent);
      background: var(--ks-color-indigo);
      color: var(--ks-color-on-dark);
    }
.cairn-demos .cp-demo-card {
      position: relative;
      display: grid;
      gap: 10px;
      padding: 12px 42px 12px 12px;
      border-radius: var(--ks-radius-card);
      border: 1px solid var(--ks-today-line);
      background: var(--ks-today-card-default);
      box-shadow: var(--ks-shadow-card);
    }
.cairn-demos .cp-card-dismiss {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid var(--ks-today-line-soft);
      border-radius: 50%;
      background: var(--ks-color-paper-warm);
      color: var(--ks-today-ink-muted);
      cursor: pointer;
    }
.cairn-demos .cp-card-dismiss svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }
.cairn-demos .cp-demo-recipe-row {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
    }
.cairn-demos .cp-demo-thumb {
      width: 62px;
      height: 62px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--ks-today-line-soft);
      background: var(--ks-color-paper-warm);
    }
.cairn-demos .cp-demo-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.cairn-demos .cp-demo-copy { min-width: 0; display: grid; gap: 4px; }
.cairn-demos .cp-demo-copy .eyebrow, .cairn-demos .cp-demo-card .eyebrow {
      color: var(--ks-color-ochre-text);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
      letter-spacing: .03em;
      text-transform: uppercase;
    }
.cairn-demos .cp-demo-copy h3, .cairn-demos .cp-demo-card h3 {
      margin: 0;
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 15px;
      line-height: 1.08;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .cp-demo-copy p, .cairn-demos .cp-demo-card p {
      margin: 0;
      color: var(--ks-today-ink-soft);
      font-size: 11px;
      line-height: 1.4;
    }
.cairn-demos .cp-demo-actions, .cairn-demos .cp-home-recipe-actions, .cairn-demos .cp-quick-replies {
      display: grid;
      gap: 7px;
    }
.cairn-demos .cp-demo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cairn-demos .cp-home-recipe-actions { grid-template-columns: minmax(44px, auto); }
.cairn-demos .cp-quick-replies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cairn-demos .cp-demo-actions button, .cairn-demos .cp-home-recipe-actions button, .cairn-demos .cp-quick-replies button {
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid var(--ks-today-line);
      background: var(--ks-color-paper-warm);
      color: var(--ks-color-indigo);
      font: var(--ks-weight-action) 11px/1 var(--ks-font-ui);
      cursor: pointer;
    }
.cairn-demos .cp-demo-actions .primary, .cairn-demos .cp-home-recipe-actions .primary {
      border-color: transparent;
      background: var(--ks-color-indigo);
      color: var(--ks-color-on-dark);
    }
.cairn-demos /* saved note on home (step4) */
    .calories-plan-phone .cp-savednote { display: none; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: start; border-color: var(--ks-today-green-line); background: var(--ks-today-card-invite); }
.cairn-demos .calories-plan-phone[data-cal-step="5"] .cp-savednote, .cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-savednote { display: grid; }
.cairn-demos .cp-savednote .cp-ava { width: 38px; height: 38px; }
.cairn-demos .cp-savednote .cp-ava img { width: 48px; height: 48px; }
.cairn-demos .cp-savednote .ent { margin: 0 0 3px; font-size: 10px; font-weight: var(--ks-weight-title); letter-spacing: 0.03em; color: var(--ks-color-tertiary); }
.cairn-demos .cp-savednote p { margin: 0; color: var(--ks-today-ink-soft); font-size: 12px; line-height: 1.42; }
.cairn-demos .cp-saved-actions { display: flex; gap: 7px; margin-top: 10px; }
.cairn-demos .cp-saved-actions button { min-height: 32px; padding: 0 10px; border-radius: 8px; font: var(--ks-weight-action) 10.5px/1 var(--ks-font-ui); cursor: pointer; }
.cairn-demos .cp-saved-actions .secondary { border: 1px solid var(--ks-today-line); background: rgba(255,255,255,0.48); color: var(--ks-today-ink-soft); }
.cairn-demos .cp-saved-actions .primary { border: 0; background: var(--ks-color-tertiary); color: var(--ks-color-on-dark); }
.cairn-demos .cp-savednote p b { color: var(--ks-today-ink); font-weight: var(--ks-weight-action); }
.cairn-demos /* ---- plan screen (S2) ---- */
    .calories-plan-phone .cp-plan {
      inset: auto 18px auto 18px;
      top: calc(50% - 54px);
      max-height: min(600px, calc(100% - 96px));
      padding: 10px 18px 18px;
      gap: 10px;
      border-radius: var(--ks-radius-sheet);
      border: 1px solid var(--ks-today-line);
      background: var(--ks-color-paper);
      box-shadow: var(--ks-shadow-control);
      transform: translateY(calc(-50% + 18px)) scale(0.97);
      -webkit-mask-image: none;
      mask-image: none;
      overscroll-behavior: contain;
      z-index: 8;
    }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .cp-plan { transform: translateY(-50%) scale(1); }
.cairn-demos .calories-plan-phone .cp-plan .module-card { padding: 10px 12px; }
.cairn-demos .calories-plan-phone .cp-plan .cp-stat-cell { padding: 9px 6px; }
.cairn-demos .calories-plan-phone .cp-plan .cp-recipe-detail-head { grid-template-columns: 68px minmax(0, 1fr) auto; }
.cairn-demos .calories-plan-phone .cp-plan .card-detail-link {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      align-self: start;
      border: 1px solid var(--ks-module-card-line-soft);
      border-radius: 50%;
      background: color-mix(in srgb, var(--ks-color-paper-warm) 88%, white 12%);
      color: var(--ks-today-ink-muted);
    }
.cairn-demos .calories-plan-phone .cp-plan .card-detail-link span { font-size: 22px; line-height: 1; }
.cairn-demos .calories-plan-phone .cp-plan .cp-recipe-detail-head .recipe-thumb { width: 68px; height: 68px; }
.cairn-demos .calories-plan-phone .cp-plan .cp-recipe-detail-head .copy h3 { font-size: 18px; }
.cairn-demos .cp-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(32, 28, 24, 0.18); justify-self: center; }
.cairn-demos .cp-recipe-detail-head {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
.cairn-demos .cp-recipe-detail-head .recipe-thumb {
      width: 76px;
      height: 76px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--ks-today-line-soft);
      background: var(--ks-color-paper-warm);
    }
.cairn-demos .cp-recipe-detail-head .recipe-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.cairn-demos .cp-recipe-detail-head .copy {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
.cairn-demos .cp-recipe-detail-head .copy .eyebrow {
      color: var(--ks-color-ochre-text);
      font-size: 10px;
      font-weight: var(--ks-weight-action);
      letter-spacing: .03em;
      text-transform: uppercase;
    }
.cairn-demos .cp-recipe-detail-head .copy h3 {
      margin: 0;
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 19px;
      line-height: 1.08;
      font-weight: var(--ks-weight-card);
    }
.cairn-demos .cp-recipe-detail-head .copy p {
      margin: 0;
      color: var(--ks-today-ink-soft);
      font-size: 11px;
      line-height: 1.4;
    }
.cairn-demos .cp-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ks-today-line); border-radius: var(--ks-radius-card); background: var(--ks-today-card-default); overflow: hidden; }
.cairn-demos .cp-stat-cell { display: grid; justify-items: center; gap: 5px; padding: 12px 6px; text-align: center; }
.cairn-demos .cp-stat-cell + .cp-stat-cell { border-left: 1px solid var(--ks-today-line-soft); }
.cairn-demos .cp-stat-cell b { font-family: var(--ks-font-metric); font-size: 15px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); }
.cairn-demos .cp-stat-cell span { font-size: 10px; font-weight: 520; color: var(--ks-today-ink-muted); }
.cairn-demos .calories-plan-phone .recipe-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.cairn-demos .calories-plan-phone .recipe-tag-cloud span {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 11px;
      border-radius: var(--ks-radius-pill);
      background: rgba(39, 42, 82, 0.06);
      color: rgba(32, 28, 24, 0.72);
      font-size: 10.5px;
      font-weight: var(--ks-weight-title);
    }
.cairn-demos .calories-plan-phone .cp-plan .recipe-tag-cloud { margin-top: 4px; }
.cairn-demos .calories-plan-phone .cp-plan .recipe-tag-cloud span { min-height: 22px; padding: 0 9px; font-size: 9.5px; }
.cairn-demos .calories-plan-phone .est-chip {
      display: inline-flex; align-items: center; width: fit-content; padding: 2px 8px;
      border-radius: var(--ks-radius-pill); border: 1px solid var(--ks-today-line);
      background: rgba(246, 245, 239, 0.7); color: var(--ks-today-ink-muted);
      font-family: var(--ks-font-ui); font-size: 9.5px; font-weight: 520; line-height: 1.3;
      white-space: nowrap; justify-self: center;
    }
.cairn-demos .calories-plan-phone .cp-plan .direction-group { display: grid; gap: 9px; padding: 2px 0 0; }
.cairn-demos .calories-plan-phone .cp-plan .direction-group h3 {
      margin: 0;
      color: var(--ks-today-ink-strong);
      font-family: var(--ks-font-display);
      font-size: 15px;
      line-height: 1.2;
      font-weight: 540;
    }
.cairn-demos .calories-plan-phone .cp-plan .direction-list { display: grid; border-top: 1px solid var(--ks-today-line-soft); }
.cairn-demos .calories-plan-phone .cp-plan .direction-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: baseline;
      padding: 9px 0;
      border-bottom: 1px solid var(--ks-today-line-soft);
      color: var(--ks-today-ink-soft);
      font-size: 12.5px;
      line-height: 1.38;
      font-weight: 460;
    }
.cairn-demos .calories-plan-phone .cp-plan .direction-row b { color: var(--ks-today-ink); font-weight: 540; }
.cairn-demos .cp-ing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cairn-demos .cp-ing-head .lbl b { display: block; font-family: var(--ks-font-display); font-size: 15px; font-weight: var(--ks-weight-card); color: var(--ks-today-ink-strong); }
.cairn-demos .cp-ing-head .lbl span { font-size: 11px; color: var(--ks-today-ink-muted); }
.cairn-demos .calories-plan-phone .cp-plan-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
      padding: 2px 2px 0;
    }
.cairn-demos .calories-plan-phone .cp-plan-head h3 {
      margin: 0;
      font-family: var(--ks-font-display);
      font-size: 17px;
      font-weight: var(--ks-weight-card);
      color: var(--ks-today-ink-strong);
    }
.cairn-demos .calories-plan-phone .cp-plan-head p {
      margin: 2px 0 0;
      color: var(--ks-today-ink-muted);
      font-size: 11px;
      line-height: 1.35;
    }
.cairn-demos .calories-plan-phone .plan-context-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cairn-demos .calories-plan-phone .plan-context-chips span { padding: 5px 10px; border-radius: var(--ks-radius-pill); border: 1px solid var(--ks-today-line); background: rgba(246, 245, 239, 0.7); color: var(--ks-today-ink-soft); font-size: 10.5px; font-weight: 520; }
.cairn-demos .calories-plan-phone .plan-object { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.cairn-demos .calories-plan-phone .plan-thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ks-today-line-soft); }
.cairn-demos .calories-plan-phone .plan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cairn-demos .calories-plan-phone .plan-object .copy h3 { margin: 0 0 5px; font-family: var(--ks-font-display); font-size: 15px; font-weight: var(--ks-weight-card); color: var(--ks-today-ink-strong); }
.cairn-demos .calories-plan-phone .plan-object .copy .amt { font-family: var(--ks-font-metric); font-size: 15px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); }
.cairn-demos .calories-plan-phone .plan-object .copy .amt small { font-family: var(--ks-font-ui); font-size: 10px; color: var(--ks-today-ink-muted); margin-left: 3px; }
.cairn-demos /* recipe nutrition strip + ingredients (S9) — the recipe-shaping surface */
    .calories-plan-phone .nutri-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cairn-demos .calories-plan-phone .nutri-cell { padding: 11px 6px; border-radius: 8px; background: rgba(39, 42, 82, 0.05); text-align: center; display: grid; gap: 3px; transition: background 260ms var(--ease); }
.cairn-demos .calories-plan-phone .nutri-cell b { font-family: var(--ks-font-metric); font-size: 15px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); line-height: 1; }
.cairn-demos .calories-plan-phone .nutri-cell span { font-size: 9.5px; font-weight: var(--ks-weight-action); color: var(--ks-today-ink-muted); }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .nutri-cell.boost { background: color-mix(in srgb, var(--ks-color-indigo) 12%, transparent); }
.cairn-demos .calories-plan-phone .ing-list { display: grid; }
.cairn-demos .calories-plan-phone .ing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ks-today-line-soft); }
.cairn-demos .calories-plan-phone .ing-row .name { color: var(--ks-today-ink); font-size: 12.5px; font-weight: var(--ks-weight-card); }
.cairn-demos .calories-plan-phone .ing-row .name .conf { display: block; margin-top: 2px; color: var(--ks-today-ink-muted); font-size: 10px; font-weight: 500; }
.cairn-demos .calories-plan-phone .ing-row .cal { font-family: var(--ks-font-metric); font-size: 13px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); white-space: nowrap; }
.cairn-demos .calories-plan-phone .ing-row .cal small { font-family: var(--ks-font-ui); font-size: 10px; color: var(--ks-today-ink-muted); margin-left: 3px; }
.cairn-demos .calories-plan-phone .ing-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 11px 0 0; }
.cairn-demos .calories-plan-phone .ing-total .name { font-size: 12px; font-weight: var(--ks-weight-title); color: var(--ks-today-ink-strong); }
.cairn-demos .calories-plan-phone .ing-total .cal { font-family: var(--ks-font-metric); font-size: 18px; font-weight: var(--ks-weight-metric); }
.cairn-demos .calories-plan-phone .ing-total .cal small { font-family: var(--ks-font-ui); font-size: 10px; color: var(--ks-today-ink-muted); margin-left: 4px; }
.cairn-demos /* the ingredient the agent adds when you boost protein */
    .calories-plan-phone .ing-added { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; transform: translateY(-4px); transition: max-height 360ms var(--ease), opacity 320ms var(--ease), padding 360ms var(--ease), transform 360ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .ing-added { max-height: 52px; opacity: 1; padding: 9px 0; transform: none; }
.cairn-demos .calories-plan-phone .ing-added .name { color: var(--ks-color-indigo); font-weight: var(--ks-weight-action); }
.cairn-demos .calories-plan-phone .ing-added .name .conf { color: var(--ks-today-ink-soft); }
.cairn-demos .calories-plan-phone .plan-adjusted { margin: 10px 0 0; opacity: 0; transform: translateY(-2px); color: var(--ks-color-indigo); font-size: 11px; font-weight: var(--ks-weight-card); line-height: 1.4; transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="3"] .plan-adjusted { opacity: 1; transform: none; }
.cairn-demos .calories-plan-phone .button-row { display: flex; gap: 9px; margin-top: 4px; }
.cairn-demos .calories-plan-phone .cp-plan > .button-row {
      position: sticky;
      bottom: -1px;
      margin-top: 0;
      padding-top: 8px;
      background: linear-gradient(180deg, rgba(246, 245, 239, 0), var(--ks-color-paper) 34%);
    }
.cairn-demos .calories-plan-phone .cp-plan > .recipe-bottom-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
.cairn-demos .calories-plan-phone .primary-button, .cairn-demos .calories-plan-phone .secondary-button { height: var(--ks-action-emphasis-height); flex: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; padding: 0 var(--ks-action-emphasis-padding-inline); border-radius: var(--ks-action-emphasis-radius); font-family: var(--ks-font-ui); font-weight: var(--ks-action-emphasis-font-weight); font-size: var(--ks-action-emphasis-font-size); cursor: pointer; transition: transform var(--ks-motion-fast) var(--ks-ease-out); }
.cairn-demos .calories-plan-phone .primary-button { border-color: var(--ks-action-emphasis-line); background: var(--ks-action-emphasis-bg); color: var(--ks-action-emphasis-on); box-shadow: var(--ks-action-emphasis-shadow); }
.cairn-demos .calories-plan-phone .secondary-button { border-color: var(--ks-action-standard-line); background: var(--ks-action-standard-bg); color: var(--ks-action-standard-on); box-shadow: none; }
.cairn-demos .calories-plan-phone .primary-button:active, .cairn-demos .calories-plan-phone .secondary-button:active { transform: scale(var(--ks-motion-press-scale)); }
.cairn-demos /* ---- confirm sheet (S7) ---- */
    .cp-scrim { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 0 18px; background: rgba(24, 22, 34, 0.46); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-scrim, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-scrim { opacity: 1; pointer-events: auto; }
.cairn-demos .cp-modal { position: relative; width: 100%; max-height: min(600px, calc(100% - 96px)); overflow: auto; padding: 10px 18px 18px; border-radius: var(--ks-radius-sheet); background: var(--ks-color-paper); box-shadow: var(--ks-shadow-sheet); display: grid; gap: 13px; align-content: start; transform: scale(0.93); opacity: 0; transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
.cairn-demos .calories-plan-phone[data-cal-step="6"] .cp-modal, .cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-modal { transform: scale(1); opacity: 1; }
.cairn-demos .cp-diary-done { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-diary-ask { display: none; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-diary-done { display: inline; }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-draft-card {
      border-style: solid;
      border-color: var(--ks-today-green-line);
      background: var(--ks-today-card-invite);
      transition: border-color 420ms var(--ease) 400ms, background-color 420ms var(--ease) 400ms;
    }
.cairn-demos .calories-plan-phone[data-cal-step="7"] .cp-modal .button-row { display: none; }
.cairn-demos .cp-modal::-webkit-scrollbar { display: none; }
.cairn-demos .cp-modal-close { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ks-today-line-soft); background: var(--ks-color-paper-warm); color: var(--ks-today-ink-muted); display: grid; place-items: center; cursor: pointer; }
.cairn-demos .cp-modal-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cairn-demos .cp-sheet-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; }
.cairn-demos .cp-sheet-head h3 { margin: 0; font-family: var(--ks-font-display); font-size: 17px; font-weight: var(--ks-weight-card); color: var(--ks-today-ink-strong); }
.cairn-demos .cp-sheet-head p { margin: 2px 0 0; color: var(--ks-today-ink-muted); font-size: 11px; }
.cairn-demos .cp-draft-card { padding: 14px; border-radius: var(--ks-radius-card); border: 1px dashed var(--ks-color-state-draft-line); background: color-mix(in srgb, var(--ks-color-state-draft) 16%, transparent); display: grid; gap: 12px; }
.cairn-demos .cp-draft-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cairn-demos .cp-draft-line .what { color: var(--ks-today-ink-strong); font-size: 14px; font-weight: var(--ks-weight-action); }
.cairn-demos .cp-draft-line .what small { display: block; margin-top: 3px; color: var(--ks-today-ink-soft); font-size: 11px; font-weight: 500; }
.cairn-demos .cp-draft-line .amt { font-family: var(--ks-font-metric); font-size: 20px; font-weight: var(--ks-weight-metric); color: var(--ks-color-ink); white-space: nowrap; }
.cairn-demos .cp-draft-line .amt small { font-family: var(--ks-font-ui); font-size: 10px; color: var(--ks-today-ink-muted); margin-left: 3px; }
.cairn-demos .cp-draft-impact { display: grid; gap: 7px; }
.cairn-demos .cp-draft-impact .lbl { color: var(--ks-today-ink-soft); font-size: 11px; font-weight: 520; }
.cairn-demos .calories-plan-phone .diary-field-grid { display: grid; gap: 8px; }
.cairn-demos .calories-plan-phone .diary-field { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--ks-today-line-soft); background: var(--ks-color-paper-warm); }
.cairn-demos .calories-plan-phone .diary-field .k { display: grid; gap: 2px; color: var(--ks-today-ink); font-size: 12px; line-height: 1.15; font-weight: var(--ks-weight-action); }
.cairn-demos .calories-plan-phone .diary-field .k small { color: var(--ks-today-ink-muted); font-size: 9.5px; line-height: 1.2; font-weight: var(--ks-weight-card); }
.cairn-demos .calories-plan-phone .diary-field .v { color: var(--ks-color-indigo); font-family: var(--ks-font-metric); font-size: 14px; font-weight: var(--ks-weight-metric); white-space: nowrap; }
.cairn-demos .cp-sheet-fine { margin: 0; color: var(--ks-today-ink-muted); font-size: 10.5px; text-align: center; }