.demo{max-width:1180px;margin:0 auto;padding:0 16px 40px}.demo-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding:22px 0 8px}.demo-brand{font-family:var(--serif);font-size:1.6rem;color:var(--ink);text-decoration:none}.demo-top p{margin:0;color:var(--ink-soft)}.narrow-only{display:none}.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"pult screen";gap:24px;align-items:start}.demo-pult{grid-area:pult;min-width:0}.demo-pult .panel:first-child{margin-top:18px}.demo-screen-wrap{grid-area:screen;position:sticky;top:16px;margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}.demo-screen{container-type:inline-size;position:relative;width:100%;aspect-ratio:844 / 390;overflow:hidden;border-radius:22px;border:8px solid #2a221d;box-shadow:0 18px 40px #3c2d2338;transition:background-color .6s;cursor:default;user-select:none;-webkit-user-select:none}.demo-screen[data-mode=running]{cursor:pointer}.demo-dot{position:absolute;left:50%;top:50%;border-radius:50%;will-change:transform;visibility:hidden}.demo-screen[data-mode=running] .demo-dot{visibility:visible}.demo-waiting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.demo-screen[data-mode=running] .demo-waiting{display:none}.demo-waiting .w-ring{position:relative;width:56px;height:56px;border-radius:50%;border:1px solid currentColor;opacity:.6}.demo-waiting .w-ring i{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:currentColor;animation:breathe 6s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.35;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}.demo-waiting-text{font-family:var(--serif);font-style:italic;font-size:1.3rem}.demo-screen-caption{text-align:center}.demo-warning{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 22px;text-align:center;background:#f6f1eaf5;color:var(--ink);line-height:1.45}.demo-warning p{margin:0;max-width:34em}.demo-warning b{font-weight:500;color:var(--clay)}.demo-warning button{margin-top:8px;background:var(--earth);border-color:var(--earth);color:var(--cream);padding:9px 30px}.demo-cta{display:inline-block;margin-left:auto;padding:9px 22px;border-radius:999px;background:var(--earth);color:var(--cream);text-decoration:none;font-weight:500;white-space:nowrap}.demo-cta:hover{background:#3a2e26}.demo-signup{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:32px;padding:22px 26px;border:1px solid var(--line);border-radius:22px;background:var(--panel);text-align:center}.demo-signup p{margin:0;max-width:40em;color:var(--ink-soft)}.demo-signup .demo-cta{margin-left:0}.demo-signup a:not(.demo-cta){color:var(--ink-soft);text-underline-offset:3px}.demo-foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.92rem;text-align:center}@media(prefers-reduced-motion:reduce){.demo-waiting .w-ring i{animation:none}}@media(max-width:768px){.demo-top p{font-size:.92rem}.demo-top .demo-cta{display:none}.demo-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"screen" "pult";gap:0}.wide-only{display:none}.narrow-only{display:block}.demo-screen-wrap{top:0;z-index:5;margin-top:12px;padding:6px 0 4px;background:var(--paper);box-shadow:0 10px 12px -12px #3c2d2359}.demo-screen-caption{font-size:.68rem}.demo-screen{border-width:6px;border-radius:16px}.demo-warning{padding:10px 12px;font-size:.85rem;gap:4px}.demo-warning .small{display:none}.demo-warning button{margin-top:4px;padding:7px 24px}.demo-waiting .w-ring{width:36px;height:36px}.demo-waiting-text{font-size:1.05rem}}