.demo-hero{padding-bottom:40px}.demo-box{position:relative;overflow:hidden}.demo-box::before{content:'';position:absolute;inset:-80px auto auto 58%;width:280px;height:280px;border-radius:50%;background:#dff0e744;filter:blur(12px);pointer-events:none}.demo-tabs{position:relative}.demo-tab{transition:transform .18s,background .18s,border-color .18s,color .18s}.demo-tab:hover{transform:translateY(-2px);border-color:#8ccfae;color:var(--green)}.demo-tab.active{box-shadow:0 6px 14px #a7e81140}.demo-event{position:relative;min-height:105px;box-shadow:0 12px 24px #287b6012;transition:transform .3s,box-shadow .3s}.demo-event.is-changing{transform:translateY(-4px);box-shadow:0 18px 32px #287b6026}.demo-event small{font-size:13px}.demo-status{padding:6px 10px;border-radius:999px;background:#fff;color:var(--green);white-space:nowrap}.demo-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.demo-meta span{padding:5px 8px;border-radius:7px;background:#fff;color:#607067;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.demo-notify{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;margin-top:16px;padding:14px 16px;border:1px solid #b9d8c4;border-radius:14px;background:#f8fcf9;box-shadow:0 10px 24px #287b6015;animation:demoIn .4s both}.demo-notify strong{display:block;font-size:13px}.demo-notify small{color:var(--muted)}.demo-notify-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--lime);color:var(--ink);font-weight:900}.dark .flow-line{gap:12px}.dark .flow-node{background:#294c3d;border:1px solid #587d68;color:#f1f8f2;box-shadow:inset 0 1px #ffffff12;transition:transform .2s,border-color .2s,background .2s}.dark .flow-node:hover{transform:translateY(-3px);background:#35614d;border-color:var(--lime)}.dark .flow-arrow{color:var(--lime);font-weight:900}.flow-node small{display:block;margin-top:4px;color:#b9d0c0;font-size:11px;font-weight:400}.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.demo-actions .button{border:1px solid #8ccfae}.demo-actions .button.secondary{background:transparent;color:#fff;border-color:#658875}.demo-caption{margin-top:15px;color:#b7c8bc;font-size:13px}.dark .section-head{max-width:760px}@keyframes demoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:520px){.demo-status{grid-column:2;justify-self:start}.demo-notify{grid-template-columns:32px 1fr}.demo-notify-icon{width:32px;height:32px}.demo-actions .button{width:100%}}