/* Demo explainer: real text over and beside a still or a video. Uses the tokens in furcate-os.css. */
.demo { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin-inline: 0; margin-bottom: 0; }
@media (min-width: 1000px) { .demo.has-media { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }

.demo-stage { position: relative; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.demo-stage img, .demo-stage video { display: block; width: 100%; height: auto; }
.demo-stage .still { display: none; }
.demo-stage .still.on { display: block; }

.demo-pins { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.demo-pins li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.5rem; opacity: 0.55; transition: opacity var(--t) var(--ease); }
.demo-pins li.on { opacity: 1; }
.demo-pins .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--amber); background: rgba(14, 14, 15, 0.72); color: #f2f2f0; font-family: var(--mono); font-size: 11px; display: grid; place-items: center; line-height: 1; flex: none; }
.demo-pins li.on .dot { background: var(--amber); color: #1a1a1a; }
.demo-pins .lbl { font-family: var(--mono); font-size: var(--f-number); letter-spacing: 0.02em; text-transform: uppercase; color: #f2f2f0; background: rgba(14, 14, 15, 0.72); border-radius: var(--radius); padding: 0.3rem 0.5rem; white-space: nowrap; line-height: 1; }
.demo-pins li.left { flex-direction: row-reverse; }
@media (max-width: 699px) { .demo-pins .lbl { display: none; } }

.demo-status { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0; max-width: calc(100% - 1.5rem); font-family: var(--mono); font-size: var(--f-number); letter-spacing: 0.02em; text-transform: uppercase; color: #f2f2f0; background: rgba(14, 14, 15, 0.78); border-left: 2px solid var(--amber); border-radius: var(--radius); padding: 0.45rem 0.6rem; line-height: 1.3; }

.demo-key { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
@media (min-width: 700px) { .demo-key { display: none; } }
.demo.no-media .demo-key { display: none; }

.demo-side { display: grid; gap: var(--s-2); align-content: start; }
.demo-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.demo-steps li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--gutter); padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
.demo-steps .n { font-family: var(--mono); font-size: var(--f-number); letter-spacing: 0.02em; color: var(--ink-2); line-height: 1.8; }
.demo-steps h3 { font-size: var(--f-body); font-weight: 500; line-height: 1.35; }
.demo-steps p { font-size: var(--f-caption); line-height: 1.5; color: var(--ink-2); margin-top: 0.35rem; max-width: var(--measure); }
.demo-steps li[aria-current="step"] .n { color: var(--accent); }
.demo-steps li[aria-current="step"] h3 { color: var(--ink); }
.demo.has-media .demo-steps li { cursor: pointer; }
.demo.has-media .demo-steps li:not([aria-current="step"]) h3 { color: var(--ink-2); }
.demo.no-media .demo-steps { display: grid; grid-template-columns: 1fr; column-gap: var(--gutter); }
@media (min-width: 900px) { .demo.no-media .demo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.demo-ctl { display: flex; gap: var(--gutter); align-items: center; }
.demo figcaption { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) { .demo-pins li { transition: none; } }