:root{color-scheme:light;font-family:Inter,Manrope,Arial,sans-serif;color:#071729;background:#f7fbff}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 14% 12%,rgba(14,195,211,.12),transparent 24rem),linear-gradient(180deg,#fff 0,#eefbfc 100%)}.demo-embed,.demo-embed body{min-width:0;min-height:0;overflow:hidden;background:0 0}.demo-embed .demo-page,.demo-embed .demo-shell{width:100%;margin:0;padding:0}.demo-embed .demo-controls,.demo-embed .demo-header{display:none}.demo-embed .demo-backdrop{display:none}.demo-embed .demo-interface,.demo-embed .demo-popout{box-shadow:none}.demo-embed .demo-popout--quick{right:.2%}button,input{font:inherit}.demo-page{width:min(1520px,100%);margin:0 auto;padding:34px clamp(18px,4vw,72px) 48px}.demo-header{display:flex;align-items:end;justify-content:space-between;gap:24px;width:min(1210px,100%);margin:0 auto 24px}.demo-kicker{margin:0 0 7px;color:#008b9b;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}h1{margin:0;font-size:clamp(1.55rem, 3vw, 2.45rem);line-height:1.08}.demo-description{max-width:34rem;margin:0;color:#607086;line-height:1.55;text-align:right}.demo-shell{width:min(1210px,100%);margin:0 auto}.demo-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:1210/756;overflow:visible}.demo-backdrop{position:absolute;inset:0;overflow:hidden;border-radius:clamp(20px,2.2vw,34px);background:radial-gradient(circle at 20% 28%,rgba(255,255,255,.92),transparent 27%),linear-gradient(150deg,#f5fdff 0 44%,#c8f3f5 44% 59%,#61d3de 59% 76%,#13bdcc 76% 100%);box-shadow:0 24px 70px rgba(16,76,101,.14)}.demo-backdrop::before{position:absolute;inset:-18%;border:3px dotted rgba(69,143,180,.2);border-radius:50%;content:"";transform:rotate(-8deg)}.demo-interface{position:absolute;top:4%;left:4%;z-index:1;width:92%;aspect-ratio:8/5;overflow:visible;border:1px solid rgba(204,218,232,.95);border-radius:15px;background:#fff;box-shadow:0 16px 44px rgba(7,23,41,.18)}.demo-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:15px;opacity:0;transition:opacity 260ms ease}.demo-frame.is-current{opacity:1}.demo-popout{position:absolute;z-index:3;overflow:hidden;border:1px solid rgba(208,220,232,.98);border-radius:15px;background:#fff;box-shadow:0 26px 70px rgba(7,23,41,.25);opacity:0;pointer-events:none;will-change:opacity,transform}.demo-popout img{display:block;width:100%;height:auto}.demo-popout--figure{top:11%;left:.6%;width:18.5%}.demo-popout--quick{top:1.4%;right:-1.4%;width:34%;padding:clamp(9px,.7vw,11px) clamp(8px,.6vw,10px) 0;box-shadow:none}.demo-popout.is-visible{opacity:1}.demo-cursor{position:absolute;top:0;left:0;z-index:5;width:clamp(18px,1.65vw,26px);opacity:0;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0, 0, 0, .35));transform:translate(-80px,-80px);will-change:transform}.demo-cursor.is-visible{opacity:1}.demo-cursor svg{display:block;width:100%;height:auto}.demo-click-ring{position:absolute;top:-7px;left:-7px;width:22px;height:22px;border:3px solid #04bed0;border-radius:50%;opacity:0}.demo-click-ring.is-active{animation:demo-click 380ms ease-out}@keyframes demo-click{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(1.55)}}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding:16px 18px;border:1px solid #dbe6ef;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(7,23,41,.07)}.demo-detail,.demo-status{margin:0}.demo-status{font-weight:750}.demo-detail{margin-top:4px;color:#718096;font-size:.82rem}.demo-actions{display:flex;align-items:center;gap:9px}.demo-actions button{min-width:78px;padding:9px 14px;border:1px solid #cbd8e5;border-radius:10px;color:#09213c;background:#fff;cursor:pointer}.demo-actions button:disabled{cursor:wait;opacity:.52}.demo-actions .demo-primary-action{border-color:#071729;color:#fff;background:#071729}.demo-loop-control{display:inline-flex;align-items:center;gap:7px;margin-right:4px;color:#52657a;font-size:.84rem}@media (max-width:720px){.demo-page{padding-inline:14px}.demo-controls,.demo-header{align-items:flex-start;flex-direction:column}.demo-description{text-align:left}.demo-actions,.demo-controls{width:100%}.demo-actions{justify-content:flex-end}}@media (max-width:643px){.demo-embed .demo-frame,.demo-embed .demo-interface,.demo-embed .demo-popout{border-radius:10px}}@media (prefers-reduced-motion:reduce){.demo-frame{transition:none}}