/* ─── /demo ──────────────────────────────────────────────────────────────────
   Sits on top of cx-run.css, which supplies the tokens, the nav, the wrap and
   the footer. Everything here is the interactive part.

   The model cards borrow the workspace's own colours (Anthropic's clay,
   Google's blue, OpenAI's green) so a reader who opens the app afterwards
   recognises what they already used. That is the only job this page has:
   teach the shape of the product before anybody has a key.
   ──────────────────────────────────────────────────────────────────────────── */

.dm-banner {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid rgba(200, 168, 119, 0.30);
    background: rgba(200, 168, 119, 0.06);
    border-radius: 12px;
    padding: 15px 18px;
    margin: 26px 0 0;
    font-size: 14.5px; color: var(--fg2); line-height: 1.6;
}
.dm-banner b { color: var(--fg) }
.dm-banner svg { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--amber); fill: none; stroke-width: 2 }

/* ── Section shell ───────────────────────────────────────────────────────── */
.dm-sec { margin-top: 72px }
.dm-sec__n {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--fg3); margin: 0 0 6px;
}
.dm-sec h2 { margin: 0 }
.dm-sec__lead { margin: 10px 0 0; color: var(--fg2); font-size: 15.5px; max-width: 68ch }

/* ── Chips: the preset inputs ────────────────────────────────────────────── */
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 }
.dm-chip {
    font: inherit; font-size: 13px; font-weight: 500;
    color: var(--fg2); background: transparent;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 15px; cursor: pointer; text-align: left;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.dm-chip:hover { color: var(--fg); border-color: rgba(224, 195, 184, .45) }
.dm-chip.is-on {
    color: var(--fg); border-color: var(--accent);
    background: rgba(206, 159, 141, .12);
}
.dm-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── The question, as the app shows it ───────────────────────────────────── */
.dm-q {
    margin: 16px 0 0; padding: 16px 18px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: rgba(206, 159, 141, .05);
    font-size: 14.5px; line-height: 1.6; color: var(--fg);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.dm-run {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 18px 0 0; padding: 12px 22px;
    font: inherit; font-size: 14.5px; font-weight: 600;
    border: none; border-radius: 11px; cursor: pointer;
    background: var;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.dm-run:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 32px -14px rgba(224, 195, 184, .8) }
.dm-run:disabled { opacity: .55; cursor: default }
.dm-run:focus-visible { outline: 2px solid #fff; outline-offset: 2px }

/* ── The narration. This is the page's actual job: say what is happening
      at each stage, while it happens. ──────────────────────────────────────── */
.dm-stage {
    margin: 18px 0 0; padding: 14px 18px;
    border: 1px solid var(--line2); border-radius: 12px;
    background: var(--panel);
    font-size: 14px; line-height: 1.65; color: var(--fg2);
    transition: border-color .3s ease, background .3s ease;
}
.dm-stage b { color: var(--fg) }
.dm-stage--read { border-color: rgba(224, 195, 184, .35); background: rgba(224, 195, 184, .06) }
.dm-stage--done { border-color: rgba(99, 159, 107, .35); background: rgba(99, 159, 107, .06) }

/* ── Four model cards ────────────────────────────────────────────────────── */
.dm-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px; margin: 20px 0 0;
}
.dm-card {
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); padding: 0; overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.dm-card.is-live   { border-color: var(--m); box-shadow: 0 0 0 1px var(--m) inset, 0 14px 40px -26px var(--m) }
.dm-card.is-done   { border-color: rgba(255, 255, 255, .16) }
.dm-card.is-reading{ border-color: rgba(224, 195, 184, .5) }

.dm-card__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--line2);
}
.dm-card__mark {
    width: 24px; height: 24px; border-radius: 7px; flex: none;
    display: grid; place-items: center;
    background: var(--m); color: #0c0c0c;
    font-size: 12px; font-weight: 700; line-height: 1;
}
.dm-card__names { display: grid; line-height: 1.25; min-width: 0 }
.dm-card__names b { font-size: 13.5px; font-weight: 600; color: var(--fg) }
.dm-card__names span { font-size: 11px; color: var(--fg3) }
.dm-card__state {
    margin-left: auto; flex: none;
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--fg3);
}
.dm-card.is-live .dm-card__state { color: var(--m) }
.dm-card.is-reading .dm-card__state { color: var(--accent2) }
.dm-card__body {
    padding: 14px; font-size: 13.5px; line-height: 1.68; color: var(--fg2);
    white-space: pre-wrap; min-height: 96px; overflow-wrap: anywhere;
}
/* The caret only exists while a card is writing, so a finished card does not
   sit there pretending to still be thinking. */
.dm-card.is-live .dm-card__body::after {
    content: ''; display: inline-block; width: 7px; height: 15px;
    margin-left: 2px; vertical-align: -2px; background: var(--m);
    animation: dm-blink 1s steps(2, start) infinite;
}
@keyframes dm-blink { 50% { opacity: 0 } }

/* ── The merged answer ───────────────────────────────────────────────────── */
.dm-merged {
    margin: 20px 0 0; border: 1px solid rgba(99, 159, 107, .32);
    border-radius: 16px; overflow: hidden;
    background: rgba(99, 159, 107, .06);
}
.dm-merged__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid rgba(99, 159, 107, .2);
}
.dm-merged__head h3 { margin: 0; font-size: 16px; font-weight: 700 }
.dm-merged__agree {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mint);
    border: 1px solid rgba(99, 159, 107, .4); border-radius: 999px; padding: 4px 10px;
}
.dm-merged__body { padding: 18px }
.dm-merged__verdict {
    font-size: 15px; line-height: 1.72; color: var(--fg);
    white-space: pre-wrap; min-height: 60px;
}
.dm-merged__gap {
    margin: 18px 0 0; padding: 15px 17px;
    border: 1px solid var(--line2); border-left: 3px solid var(--accent2);
    border-radius: 0 10px 10px 0; background: rgba(224, 195, 184, .05);
    font-size: 13.8px; line-height: 1.68; color: var(--fg2);
}
.dm-merged__gap h4 {
    margin: 0 0 6px; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent2); font-weight: 700;
}
.dm-merged__gap b { color: var(--fg) }

/* ── Two-up panels, used by Prompt Creator and Prompt Boost ──────────────── */
.dm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0 }
.dm-pane {
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); overflow: hidden; display: flex; flex-direction: column;
}
.dm-pane__head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--line2);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg3);
}
.dm-pane__role {
    margin-left: auto; text-transform: none; letter-spacing: 0;
    font-family: var(--font); font-size: 12px; color: var(--fg2);
}
.dm-pane__body {
    padding: 14px; font-size: 13px; line-height: 1.66; color: var(--fg2);
    white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; min-height: 120px;
}
.dm-pane--in .dm-pane__body { color: var(--fg3); font-style: italic }
.dm-pane--out { border-color: rgba(99, 159, 107, .28) }
.dm-pane--out .dm-pane__body { font-family: var(--mono); font-size: 12.2px; color: var(--fg) }
.dm-why {
    margin: 16px 0 0; padding: 14px 17px;
    border: 1px solid var(--line2); border-left: 3px solid var(--mint);
    border-radius: 0 10px 10px 0; background: rgba(99, 159, 107, .05);
    font-size: 13.8px; line-height: 1.66; color: var(--fg2);
}

/* ── The rest of the AI Center, locked ───────────────────────────────────── */
.dm-locks {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin: 22px 0 0;
}
.dm-lock {
    position: relative; padding: 15px 16px;
    border: 1px dashed var(--line); border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    display: grid; gap: 3px;
}
.dm-lock b { font-size: 13.5px; font-weight: 600; color: var(--fg3) }
.dm-lock span { font-size: 12px; color: rgba(255, 255, 255, .3); line-height: 1.5 }
.dm-lock__ico { position: absolute; top: 13px; right: 13px }
.dm-lock__ico svg {
    width: 15px; height: 15px; fill: none;
    stroke: rgba(255, 255, 255, .28); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 720px) {
    .dm-two { grid-template-columns: 1fr }
}

/* The stage narration and the typing caret are the two things that move.
   Under a reduced-motion preference the script fills text instantly, so the
   caret would sit blinking on a finished card forever. */
@media (prefers-reduced-motion: reduce) {
    .dm-card.is-live .dm-card__body::after { animation: none; opacity: 0 }
    .dm-run:hover:not(:disabled) { transform: none }
}

/* ── Hero actions ────────────────────────────────────────────────────────
   The page has two audiences: someone who will click into the workspace and
   someone who wants to read first. Both get a button, and the reading one is
   ghosted because the workspace is the thing worth doing. */
.dm-hero-cta {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 24px 0 0;
}
.dm-hero-note {
    margin: 18px 0 0; max-width: 66ch;
    font-size: 13.8px; line-height: 1.65; color: var(--fg3);
}