.demo{--demo-loop:11s;--demo-board:232px;gap:var(--s-3);flex-direction:column;min-width:0;margin:0;display:flex}.demo__stage{grid-template-columns:var(--demo-board) minmax(0, 1fr);gap:var(--s-4);padding:var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);align-items:stretch;display:grid}.demo__board{width:var(--demo-board);aspect-ratio:1;border-radius:var(--r-sm);position:relative;overflow:hidden}.demo__arrow{pointer-events:none;opacity:0;width:100%;height:100%;animation:demo-arrow var(--demo-loop) linear infinite;position:absolute;inset:0}.demo__arrow-line{stroke:var(--accent);stroke-width:.18px;stroke-linecap:round;opacity:.85}.demo__arrow-head{fill:var(--accent)}.demo__panel{min-width:0;min-height:100%;position:relative}.demo__idle,.demo__asked{flex-direction:column;min-width:0;display:flex;position:absolute;inset:0}.demo__idle{animation:demo-idle var(--demo-loop) linear infinite}.demo__prompt{margin:var(--s-2) 0 var(--s-3);color:var(--text);font-size:1.125rem;font-weight:600;line-height:1.3}.demo__ask{pointer-events:none;animation:demo-press var(--demo-loop) var(--ease-out-quint) infinite;align-self:flex-start}.demo__hint{margin:var(--s-2) 0 0;color:var(--text-muted)}.demo__progress{background:var(--border);border-radius:999px;height:4px;margin-top:auto;overflow:hidden}.demo__progress-fill{background:var(--accent-fill);transform-origin:0;height:100%;animation:demo-progress var(--demo-loop) linear infinite;border-radius:999px;display:block;transform:scaleX(0)}.demo__asked{opacity:0;animation:demo-asked var(--demo-loop) var(--ease-out-quint) infinite}.demo__row{justify-content:space-between;align-items:baseline;gap:var(--s-4);margin:var(--s-2) 0 var(--s-2);display:flex}.demo__move{color:var(--text);animation:demo-reveal var(--demo-loop) var(--ease-out-quint) infinite;font-size:36px}.demo__eval{color:var(--accent)}.demo__why{margin:0 0 var(--s-2);color:var(--text);text-wrap:pretty;font-size:14px;line-height:1.45}.demo__chips{gap:var(--s-2);flex-wrap:wrap;margin-top:auto;display:flex}.demo__badge{border-radius:var(--r-pill);background:var(--bg-subtle);height:26px;color:var(--text-secondary);align-items:center;padding:0 12px;font-size:12.5px;font-weight:500;display:inline-flex}.demo__badge--accent{background:var(--accent-subtle);color:var(--accent-on-subtle)}.demo__caption{color:var(--text-muted);text-wrap:pretty;margin:0}@keyframes demo-idle{0%,44%{opacity:1}48%,93%{opacity:0}97%,to{opacity:1}}@keyframes demo-press{0%,33%{background-color:var(--accent-fill);transform:scale(1)}34.5%{background-color:var(--accent-fill-hover);transform:scale(.95)}36%,to{background-color:var(--accent-fill);transform:scale(1)}}@keyframes demo-progress{0%,35%{opacity:0;transform:scaleX(0)}36%{opacity:1}44%{opacity:1;transform:scaleX(1)}47%,to{opacity:0;transform:scaleX(1)}}@keyframes demo-asked{0%,46%{opacity:0;transform:translateY(8px)}52%,90%{opacity:1;transform:translateY(0)}94%,to{opacity:0;transform:translateY(0)}}@keyframes demo-reveal{0%,46%{filter:blur(4px);transform:scale(.96)}53%,to{filter:blur();transform:scale(1)}}@keyframes demo-arrow{0%,46%{opacity:0}50%,90%{opacity:1}94%,to{opacity:0}}@media (width<=560px){.demo{--demo-board:148px}.demo__stage{gap:var(--s-3);padding:var(--s-3)}.demo__prompt{margin:var(--s-1) 0 var(--s-2);font-size:1rem}.demo__ask{height:36px;padding:0 12px;font-size:13px}.demo__move{font-size:30px}.demo__eval{font-size:24px}.demo__why{font-size:13px}.demo__chips{display:none}}@media (prefers-reduced-motion:reduce){.demo__arrow,.demo__idle,.demo__ask,.demo__progress-fill,.demo__asked,.demo__move{animation:none}.demo__idle{display:none}.demo__asked,.demo__arrow{opacity:1}}