/* ============================================================
   Key 20 — live demo styling
   Inherits --o (brand orange), --panel, --line etc. from the host
   page, so the same four scenes take on each direction's look.
   ============================================================ */

[data-demo] {
  position: relative;
  overflow: hidden;
  background: var(--panel, #131316);
  border: 1px solid var(--line, #26262c);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 230px;
}
/* Fade the bottom so scenes read as ambient rather than cropped. */
[data-demo]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(transparent, var(--panel, #131316));
  pointer-events: none;
}

/* ---------- 1. code ---------- */
.demo-code {
  margin: 0; padding: 20px 22px;
  font: inherit; font-size: 12.5px; line-height: 1.75;
  color: #b9c2cf; white-space: pre-wrap; word-break: break-word;
  min-height: 230px;
}
.demo-code .tk-kw  { color: var(--o, #f76518); }
.demo-code .tk-fn  { color: #7fd1ff; }
.demo-code .tk-str { color: #9ae6a0; }
.demo-code .tk-cm  { color: #5b6675; font-style: italic; }
.demo-caret {
  display: inline-block; width: 7px; height: 15px; vertical-align: -3px;
  background: var(--o, #f76518); animation: demo-blink 1.05s step-end infinite;
}
@keyframes demo-blink { 50% { opacity: 0; } }

/* ---------- 2. agentic OS ---------- */
.demo-os { display: grid; grid-template-columns: 128px 1fr; min-height: 230px; position: relative; }
.demo-os__side { border-right: 1px solid var(--line, #26262c); padding: 14px 0; background: rgba(0,0,0,.22); }
.demo-os__item {
  font-size: 10.5px; letter-spacing: .05em; color: #6b7280;
  padding: 7px 14px; border-left: 2px solid transparent; transition: all .25s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-os__item.on { color: var(--o, #f76518); border-left-color: var(--o, #f76518); background: rgba(247,101,24,.09); }
.demo-os__main { padding: 14px 16px; }
.demo-os__bar { height: 26px; border-radius: 5px; background: rgba(247,101,24,.14); border: 1px solid rgba(247,101,24,.25); margin-bottom: 12px; }
.demo-os__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-os__tile {
  height: 42px; border-radius: 5px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line, #26262c); opacity: .3;
  transition: opacity .4s, background .4s, border-color .4s;
}
.demo-os__tile.lit { opacity: 1; background: rgba(255,255,255,.055); border-color: var(--line2, #35353d); }
.demo-os__note { margin-top: 12px; font-size: 10.5px; letter-spacing: .06em; color: #6b7280; text-transform: uppercase; }
.demo-os__cursor {
  position: absolute; top: 0; left: 0; width: 11px; height: 15px; pointer-events: none;
  background: #fff; clip-path: polygon(0 0, 0 100%, 26% 76%, 44% 100%, 62% 90%, 44% 62%, 100% 58%);
  transition: transform .58s cubic-bezier(.4,0,.2,1); opacity: .92;
}
.demo-os__cursor.click { transform-origin: 0 0; filter: drop-shadow(0 0 7px var(--o, #f76518)); }

/* ---------- 3. inbox ---------- */
.demo-inbox { padding: 14px 16px; min-height: 230px; }
.demo-mail {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 10px; margin-bottom: 6px; border-radius: 6px;
  background: rgba(255,255,255,.022); border: 1px solid transparent;
  transition: background .45s, border-color .45s, transform .45s;
}
.demo-mail__dot { width: 7px; height: 7px; border-radius: 50%; background: #444a55; transition: background .45s; }
.demo-mail__s { font-size: 11.5px; color: #8d95a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .45s; }
.demo-mail__tag {
  font-size: 9.5px; letter-spacing: .09em; padding: 3px 8px; border-radius: 999px;
  color: #5b6675; border: 1px solid var(--line, #26262c); white-space: nowrap;
  opacity: 0; transform: translateX(7px); transition: all .45s;
}
.demo-mail.sorted { background: rgba(247,101,24,.055); border-color: rgba(247,101,24,.22); }
.demo-mail.sorted .demo-mail__dot { background: var(--o, #f76518); }
.demo-mail.sorted .demo-mail__s { color: #cbd2dc; }
.demo-mail.sorted .demo-mail__tag { opacity: 1; transform: none; color: var(--o, #f76518); border-color: rgba(247,101,24,.4); }

/* ---------- 4. replies ---------- */
.demo-replies { padding: 14px 16px; min-height: 230px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; }
.demo-reply {
  border: 1px solid var(--line, #26262c); border-radius: 7px; padding: 10px 12px;
  background: rgba(255,255,255,.022); position: relative;
  animation: demo-in .45s cubic-bezier(.22,1,.36,1);
}
@keyframes demo-in { from { opacity: 0; transform: translateY(10px); } }
.demo-reply__to { font-size: 10px; letter-spacing: .07em; color: #5b6675; margin-bottom: 5px; }
.demo-reply__b {
  font-size: 11.5px; color: #b9c2cf; line-height: 1.5;
  max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip;
  transition: max-width 1.15s steps(46, end);
}
.demo-reply.typed .demo-reply__b { max-width: 100%; }
.demo-reply__st {
  position: absolute; right: 11px; top: 9px;
  font-size: 9px; letter-spacing: .1em; color: var(--o, #f76518);
  opacity: 0; transform: translateY(-3px); transition: all .35s;
}
.demo-reply.sent .demo-reply__st { opacity: 1; transform: none; }
.demo-reply.sent { border-color: rgba(247,101,24,.28); }

/* ---------- labels ---------- */
.demo-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim, #66635d); padding: 10px 14px;
  border-bottom: 1px solid var(--line, #26262c);
}
.demo-label i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--o, #f76518);
  animation: demo-pulse 2.2s ease-in-out infinite; flex: none;
}
@keyframes demo-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

@media (max-width: 560px) {
  .demo-os { grid-template-columns: 96px 1fr; }
  .demo-os__tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-caret { animation: none; }
  .demo-label i { animation: none; }
  .demo-reply { animation: none; }
  .demo-reply__b { max-width: 100%; transition: none; }
  .demo-os__cursor { display: none; }
}