.demo-body #content{min-width:0;scroll-behavior:smooth}.demo-body #content h1{font-size:24px;margin:4px 0 12px}.demo-body .demo-intro{max-width:65ch;line-height:1.5;color:var(--muted)}
.demo-body .explore-row{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}.demo-body .explore-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted);margin:12px 0;min-width:0;max-width:100%}.demo-body .explore-field input,.demo-body .explore-field select,.demo-body .explore-field textarea{width:100%;box-sizing:border-box;color:var(--aeon-ink);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px;min-height:36px}.demo-body .explore-field input[type=color]{height:42px;padding:4px}.demo-body .explore-field input[type=range]{padding:0;accent-color:#F97316}.demo-body textarea{min-height:86px;resize:vertical}.demo-body .explore-row>.explore-field{flex:1;min-width:130px}
.demo-body .sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.demo-body .sample-card{padding:12px;border:1px solid var(--border);border-radius:16px;overflow:hidden}.demo-body .sample-card video{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#151515;border-radius:10px}.demo-body .sample-card h2{font-size:15px;margin:14px 0 8px}.demo-body .sample-card p{font-size:12px;line-height:1.5;color:var(--muted)}.demo-body .sample-card button{margin:4px 4px 4px 0}.demo-body .more-in-plugin{display:inline-flex;padding:7px 12px;border-radius:99px;background:var(--accent-soft);color:var(--ink-accent);font-size:12px}
.demo-body .effect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin:14px 0}.demo-body .effect-card{display:flex;flex-direction:column;gap:9px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.demo-body .effect-card small{color:var(--muted)}.demo-body .effect-card button{margin-top:auto}.demo-body .tool-form{max-width:650px}.demo-body .source-preview{max-width:100%;max-height:240px;display:block;margin-top:16px}.demo-body .beat-plot{width:100%;height:auto;border-radius:12px;display:block}.demo-body .mask-stage{max-width:100%;overflow:auto;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0/16px 16px;border-radius:12px}.demo-body .mask-stage canvas{max-width:100%;height:auto;touch-action:none}.demo-body #content>.row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.demo-body #content>.row label{display:flex;flex-direction:column;gap:5px;font-size:12px;max-width:140px}.demo-body #content>.row input{max-width:100%}.demo-body .jsx-editor{margin-top:20px}.demo-body .caption-display{padding:24px;min-height:150px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:#151515;color:#fff;border-radius:16px;font-size:36px;white-space:pre-wrap;line-height:1.25}.demo-body #content>button{margin:6px 6px 6px 0}.demo-body #content>details{margin:20px 0;padding:16px;border:1px solid var(--border);border-radius:12px}.demo-body summary{cursor:pointer}.demo-body .motion-echo{position:absolute;inset:0;pointer-events:none}.demo-body .text-pack-art>span{position:relative}.demo-body .motion-timing-help{font-size:11px;line-height:1.5;color:var(--muted)}.demo-body .preset-list small{display:block;font-size:9px;opacity:.65;margin-top:4px}.demo-body .motion-art.text-art{max-width:100%}.demo-body .motion-art.text-art>span{white-space:pre}.demo-body .glass-component-content{z-index:2}
@container aeon-panel (max-width:520px){.demo-body .sample-grid,.demo-body .effect-grid{grid-template-columns:1fr}.demo-body .explore-row{display:block}.demo-body .scripts-workspace{grid-template-columns:1fr}.demo-body .script-list{display:flex;flex-wrap:wrap}.demo-body .caption-display{font-size:28px}}
/* Browser exploration keeps the preview unobstructed, with creation controls below it. */
.demo-body .carousel-source{position:static;box-shadow:none}.demo-body .carousel-layouts{max-height:none;overflow:visible}.demo-body .carousel-workspace{flex-shrink:0}
@container aeon-panel (max-width:850px){.demo-body .carousel-stage{height:220px}}
@media(prefers-reduced-motion:reduce){.demo-body #content{scroll-behavior:auto}}