/* Loading demonstration is an honest placeholder, never a saved/generated artifact. */
.live-build-demo { position:absolute; inset:0 20px 14px; z-index:1; display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0; overflow:auto; padding:clamp(16px,3vw,32px); border:1px solid var(--line); border-radius:14px; background:var(--panel2); color:var(--text); }
.live-build-demo-label { display:flex; align-items:center; gap:12px; flex:none; }
.live-build-demo-label strong { font-size:14px; }
.live-build-demo-label p,.live-build-demo-caption { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.live-build-demo-page { position:relative; flex:1; min-height:210px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
.live-build-demo-page::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 25%,var(--panel) 48%,transparent 70%); opacity:.65; transform:translateX(-100%); animation:demo-build-sweep 3.5s ease-in-out infinite; }
.live-build-demo-topline { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line); }
.live-build-demo-page i,.live-build-demo-page span { display:block; background:var(--panel2); border-radius:5px; }
.live-build-demo-topline i { width:24px; height:24px; background:var(--accent-soft); margin-right:auto; }
.live-build-demo-topline span { width:12%; height:8px; }
.live-build-demo-layout { display:grid; grid-template-columns:18% minmax(0,1fr); min-height:230px; }
.live-build-demo-sidebar { border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:16px; }
.live-build-demo-sidebar i { width:100%; height:9px; }
.live-build-demo-sidebar i:first-child { background:var(--accent-soft); height:24px; }
.live-build-demo-content { display:grid; align-content:start; gap:22px; padding:clamp(16px,3vw,30px); }
.live-build-demo-heading { display:grid; gap:10px; }
.live-build-demo-heading i:first-child { width:22%; height:8px; background:var(--accent-soft); }
.live-build-demo-heading i:nth-child(2) { width:65%; height:21px; }
.live-build-demo-heading i:last-child { width:85%; height:8px; }
.live-build-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.live-build-demo-grid > div { padding:15px; display:grid; gap:9px; border:1px solid var(--line); border-radius:8px; }
.live-build-demo-grid i { height:7px; }
.live-build-demo-grid i:nth-child(2) { width:60%; height:19px; background:var(--accent-soft); }
.live-build-demo-grid i:last-child { width:75%; }
.live-build-demo-chart { display:flex; align-items:end; gap:8%; min-height:70px; padding:0 5%; border-bottom:1px solid var(--line); }
.live-build-demo-chart i { width:9%; height:45px; background:var(--accent-soft); transform-origin:bottom; animation:demo-build-column 4s ease-in-out infinite; }
.live-build-demo-chart i:nth-child(2n) { height:65px; animation-delay:.3s; }
.live-build-demo-chart i:nth-child(3n) { height:30px; animation-delay:.6s; }
.live-build-demo-heading,.live-build-demo-grid > div { animation:demo-build-reveal 5s ease-in-out infinite; }
.live-build-demo-grid > div:nth-child(2) { animation-delay:.4s; }
.live-build-demo-grid > div:nth-child(3) { animation-delay:.8s; }
.preview-build-badge { display:inline-flex; align-items:center; margin-left:5px; gap:4px; padding:3px 5px; border-radius:6px; color:var(--aqua); background:var(--accent-soft); font-size:10px; font-weight:650; line-height:1.25; }
.preview-build-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; animation:live-build-breathe 1.8s ease-in-out infinite; }
.preview-build-badge.has-error::before { animation:none; }
@keyframes demo-build-reveal { 0%,100% { opacity:.5; transform:translateY(3px); } 20%,75% { opacity:1; transform:translateY(0); } }
@keyframes demo-build-sweep { 55%,100% { transform:translateX(100%); } }
@keyframes demo-build-column { 50% { transform:scaleY(.65); } }
@media (max-width:700px) { .live-build-demo { inset:0 14px 14px; padding:16px; gap:12px; } .live-build-demo-sidebar { display:none; } .live-build-demo-layout { grid-template-columns:minmax(0,1fr); } .live-build-demo-content { padding:18px; gap:18px; } .live-build-demo-grid { gap:7px; } .live-build-demo-grid > div { padding:10px; } }
@media (max-height:460px) { .live-build-demo { gap:8px; padding:12px; } .live-build-demo-page { min-height:150px; } .live-build-demo-topline { padding:9px; } .live-build-demo-content { gap:12px; } .live-build-demo-chart { display:none; } }
@media (prefers-reduced-motion:reduce) { .live-build-demo-page::after,.live-build-demo-chart i,.live-build-demo-heading,.live-build-demo-grid > div,.preview-build-badge::before { animation:none; } }