.demo-section{background:var(--color-bg)}.demo-header{text-align:center;margin-bottom:var(--space-12)}.demo-header .section-subtitle,.demo-frame-wrapper{margin:0 auto}.demo-frame-wrapper--desktop{border-radius:var(--radius-lg);background:var(--color-bg-alt);border:1px solid var(--color-border);width:98%;max-width:min(1920px,98vw);box-shadow:var(--shadow-xl);overflow:hidden}.demo-frame-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);height:40px;padding:0 var(--space-4);align-items:center;display:flex;position:relative}.demo-dots{gap:8px;display:flex}.demo-dots span{background:#e2e8f0;border-radius:50%;width:12px;height:12px;display:block}.demo-dots span:first-child{background:#ff5f56}.demo-dots span:nth-child(2){background:#ffbd2e}.demo-dots span:nth-child(3){background:#27c93f}.demo-url{background:var(--color-bg-alt);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-muted);padding:4px 16px;font-family:monospace;position:absolute;left:50%;transform:translate(-50%)}.demo-frame-wrapper--desktop .demo-iframe-container{aspect-ratio:16/10;width:100%;height:auto;max-height:min(92vh - 40px,1050px)}.demo-frame-wrapper--mobile{width:min(100%,320px);box-shadow:none;background:0 0;border:none;padding:0;overflow:visible}.demo-phone{background:linear-gradient(145deg,#48484a 0%,#2c2c2e 40%,#1c1c1e 100%);border:1.5px solid #636366;border-radius:44px;padding:10px;position:relative;box-shadow:inset 0 0 0 1px #ffffff0f,0 32px 64px #00000059,0 8px 20px #0003}.demo-phone-btn{z-index:2;background:#3a3a3c;border-radius:2px;position:absolute}.demo-phone-btn--silent{width:3px;height:28px;top:108px;left:-3px}.demo-phone-btn--volume-up{width:3px;height:52px;top:152px;left:-3px}.demo-phone-btn--volume-down{width:3px;height:52px;top:214px;left:-3px}.demo-phone-btn--power{width:3px;height:72px;top:168px;right:-3px}.demo-phone-screen{aspect-ratio:390/844;clip-path:inset(0 round 36px);isolation:isolate;background:#000;border:none;border-radius:36px;flex-direction:column;width:100%;max-height:min(80vh,780px);display:flex;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:inset 0 0 0 1.5px #1a1a1a}.demo-phone-island{z-index:20;pointer-events:none;background:#000;border-radius:999px;justify-content:flex-end;align-items:center;width:84px;height:24px;padding-right:10px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #ffffff0f,0 4px 12px #00000073}.demo-phone-island-cam{background:radial-gradient(circle at 35% 35%,#2a2a4a,#0a0a12 70%);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 1px #ffffff0f}.demo-phone-home-bar{z-index:20;pointer-events:none;background:#ffffffd1;border-radius:999px;width:96px;height:4px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.demo-frame-wrapper--mobile .demo-iframe-container{width:100%;min-height:0;aspect-ratio:unset;clip-path:inset(0 round 36px);isolation:isolate;background:#000;border-radius:36px;flex:1;height:100%;max-height:none;overflow:hidden;transform:translateZ(0)}.demo-frame-wrapper--mobile .demo-iframe{background:#0f2744;border:none;border-radius:0;width:100%;height:100%;display:block;position:absolute;inset:0}.demo-frame-wrapper--mobile .demo-overlay-capture{background:#0000001f;border-radius:36px}.demo-iframe-container{background:#f4f6f9;position:relative;overflow:hidden}.demo-iframe-container--interactive{overscroll-behavior:contain}.demo-iframe{pointer-events:none;border:none;width:100%;height:100%;display:block;position:absolute;inset:0}.demo-iframe.interactive{pointer-events:auto}.demo-overlay-capture{z-index:10;cursor:pointer;background:#0000000d;justify-content:center;align-items:center;transition:background .3s;display:flex;position:absolute;inset:0}.demo-overlay-capture:hover{background:#00000080}.demo-overlay-text{background:var(--color-accent);color:#fff;opacity:0;box-shadow:var(--shadow-lg);text-align:center;border-radius:30px;flex-direction:column;align-items:center;gap:6px;padding:12px 24px;font-weight:600;transition:all .3s;display:flex;transform:translateY(20px)}.demo-overlay-capture:hover .demo-overlay-text{opacity:1;transform:translateY(0)}.demo-frame-wrapper--mobile .demo-overlay-text{opacity:1;font-size:var(--text-xs);border-radius:20px;padding:8px 14px;transform:none}@media (width<=768px){.demo-header{margin-bottom:var(--space-8)}.demo-frame-wrapper--mobile{width:min(calc(100% - var(--space-8)), 300px)}}@media (height<=820px) and (width>=769px){.demo-frame-wrapper--desktop .demo-iframe-container{max-height:min(88vh - 40px,900px)}}