.creative-toolbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.creative-toolbar label{flex:1;min-width:170px}.creative-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}.creative-card{border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;background:var(--glass-bg)}.creative-copy{padding:20px}.creative-copy h2{font-size:1.15rem;margin:0 0 10px}.creative-copy p{color:var(--glass-text-muted);line-height:1.6}.demo{height:220px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;isolation:isolate;overflow:hidden;background:#111827;color:#f8fafc;perspective:700px}.demo>*{position:relative;z-index:1}.demo .tile{background:#fb9362;padding:24px;border-radius:18px;color:#111827;font-weight:800;display:grid;gap:8px}.demo .bar{height:10px;width:100px;border-radius:8px;background:#ffffff55}.demo .small{font-size:12px;opacity:.7}.demo .dot{width:22px;height:22px;background:#6ee7cf;border-radius:50%}.demo .word{font-size:30px;font-weight:800}.demo .tiles{display:grid;grid-template-columns:repeat(3,45px);gap:8px}.demo .tiles i{background:#ff9767;border-radius:9px;height:45px}.demo button{background:#ff9767;color:#111827;border:0;border-radius:20px;padding:10px;cursor:pointer}.demo details{background:#293449;padding:8px;border-radius:8px;width:190px}.demo ul{list-style:none;padding:0;margin:0}.demo li{padding:8px}.demo svg{width:90px;height:90px}.paused .demo *,.paused.demo *{animation-play-state:paused!important}.creative-actions{display:flex;gap:10px;flex-wrap:wrap}.creative-card button{cursor:pointer}#creative-detail{width:min(900px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--glass-border);border-radius:24px;background:var(--glass-bg,#fff);color:var(--glass-text-main);padding:24px}#creative-detail::backdrop{background:#101624aa;backdrop-filter:blur(8px)}.dialog-close{float:inline-end}.prompt-output{white-space:pre-wrap;padding:20px;border-radius:15px;background:var(--glass-bg-subtle);font:14px/1.7 monospace}.demo-glass{background:radial-gradient(at 20% 30%,#9333ea,transparent 60%),radial-gradient(at 80% 60%,#0d9488,transparent 60%),#101827}.demo-glass .tile{background:#ffffff22;color:white;backdrop-filter:blur(15px);border:1px solid #ffffff66;animation:float 5s ease-in-out infinite}.demo-bento .tiles{grid-template-columns:repeat(3,55px)}.demo-bento .tiles i:first-child{grid-column:span 2;grid-row:span 2;height:auto}.demo-bento i:nth-child(2n){background:#6ee7cf}.demo-soft{background:#d8e0e9}.demo-soft .tile{background:#d8e0e9;box-shadow:12px 12px 24px #a9b3bf,-12px -12px 24px #fff}.demo-clay{background:#d8b4fe}.demo-clay .tile{background:#fbbf87;border-radius:40px;box-shadow:inset 7px 7px 15px #fff8,inset -8px -8px 14px #cb704aaa,12px 12px 0 #9a6ac3}.demo-dial .tile{width:80px;height:80px;border-radius:50%;background:conic-gradient(#ccc,#fff,#888,#ddd);border:7px solid #404756;box-shadow:0 12px 20px #0008;animation:spin 9s linear infinite}.demo-brutal{background:#fef08a}.demo-brutal .tile{background:#c4b5fd;border:4px solid black;border-radius:0;box-shadow:10px 10px 0 black}.demo-aurora::before,.demo-mesh::before{content:'';position:absolute;inset:-40%;background:conic-gradient(#a78bfa,#6ee7cf,#fca5a5,#a78bfa);filter:blur(35px);animation:spin 12s linear infinite;opacity:.7}.demo-grain{background-color:#b9a2dd;background-image:radial-gradient(#2228 .5px,transparent .6px);background-size:3px 3px}.demo-dots{background-image:radial-gradient(#ffffff66 1px,transparent 1px);background-size:15px 15px}.demo-command .tile{background:#243044;color:white;padding:14px;border:1px solid #fff3;width:210px}.demo-pills .tile{display:flex;gap:10px;background:#30394b;color:white;padding:8px}.demo-pills span:first-child{background:#ff9767;color:#111;padding:8px;border-radius:22px}.demo-dock .tiles{display:flex;background:#fff2;padding:10px;border-radius:20px}.demo-dock i{width:40px;transition:transform .2s}.demo-dock i:hover{transform:translateY(-10px) scale(1.3)}.demo-sidebar .tile{grid-template-columns:35px 140px;background:#203448;color:white}.demo-sidebar .tile::before{content:'☰';grid-row:span 3;background:#111827;height:100%}.demo-masonry .tiles{align-items:start}.demo-masonry i:nth-child(2){height:90px}.demo-masonry i:nth-child(3){height:65px}.demo-split .tile{grid-template-columns:80px 70px}.demo-split .tile::after{content:'✦';font-size:65px;grid-column:2;grid-row:1/3;animation:spin 10s linear infinite}.demo-skeleton .tile{background:#243044}.demo-skeleton .bar{background:linear-gradient(90deg,#ffffff11,#ffffff77,#ffffff11);background-size:200%;animation:shine 2s linear infinite}.demo-stepper .tiles{display:flex}.demo-stepper i{width:34px;height:34px;border-radius:50%;background:#6ee7cf;display:grid;place-items:center}.demo-toast .tile{animation:slide 4s infinite;background:#1f493f;color:white}.demo-tilt .tile{animation:tilt 4s ease-in-out infinite}.demo-spotlight{background:radial-gradient(circle at var(--x,50%) var(--y,50%),#7c3aed,#111827 65%)}.demo-ring .tile{border-radius:50%;width:80px;height:80px;place-items:center;background:conic-gradient(#6ee7cf 75%,#334155 0);border:8px solid #334155}.demo-flip .tile{animation:flip 4s ease-in-out infinite}.demo-stagger .tiles i{animation:slide 3s infinite}.demo-stagger i:nth-child(2){animation-delay:.2s}.demo-stagger i:nth-child(3){animation-delay:.4s}.demo-blur .word{animation:focus 3s infinite}.demo-bounce .dot{animation:bounce 1.2s infinite}.demo-slide .tile{animation:slide 3s infinite}.demo-zoom .tile{animation:zoom 3s infinite}.demo-type .word{width:8ch;overflow:hidden;white-space:nowrap;border-right:2px solid #ff9767;animation:type 4s steps(8) infinite;font-family:monospace}.demo-gradient .word{color:transparent;background:linear-gradient(90deg,#6ee7cf,#ff9767,#a78bfa,#6ee7cf);background-size:250%;background-clip:text;animation:shine 4s linear infinite}.demo-letters .word span{display:inline-block;animation:bounce 2s infinite}.demo-letters span:nth-child(2n){animation-delay:.3s}.demo-wipe .word{animation:wipe 3s infinite}.demo-orbit .tiles{width:130px;height:130px;border:1px solid #fff4;border-radius:50%;display:block;animation:spin 5s linear infinite}.demo-orbit i{width:20px;height:20px;border-radius:50%;position:absolute;top:0;left:55px;background:#6ee7cf}.demo-particles .dot{animation:float 3s infinite}.demo-particles .dot:nth-child(2n){animation-delay:-1.2s;opacity:.5}.demo-ripple .dot{width:60px;height:60px;animation:ripple 2s infinite}.demo-blob .tile{width:90px;height:90px;animation:blob 4s infinite}.demo-cube .tile{width:80px;height:80px;animation:cube 5s linear infinite;border-radius:0;border:2px solid #fff8;box-shadow:20px 20px 0 #6ee7cf88}.demo-wave .tiles{display:flex;align-items:center}.demo-wave i{width:12px;height:70px;animation:wave 1s infinite}.demo-wave i:nth-child(2n){animation-delay:.2s}.demo-liquid .tile{width:100px;height:100px;border-radius:50%;background:linear-gradient(to top,#6ee7cf 50%,#334155 50%);background-size:100% 200%;animation:fill 4s infinite;overflow:hidden}.demo-shimmer .tile{background:linear-gradient(110deg,#334155 30%,#94a3b8 50%,#334155 70%);background-size:250%;animation:shine 3s infinite}.demo-loading .dot{animation:bounce 1s infinite}.demo-loading .dot:nth-child(2){animation-delay:.15s}.demo-loading .dot:nth-child(3){animation-delay:.3s}.demo-check path{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 3s infinite}.demo-progress .bar{width:190px;position:relative;overflow:hidden}.demo-progress .bar::after{content:'';position:absolute;inset:0;background:#6ee7cf;transform-origin:left;animation:progress 3s infinite}.demo-beam .tile{border:3px solid transparent;background:linear-gradient(#111827,#111827) padding-box,conic-gradient(from var(--beam),#111827,#6ee7cf,#111827) border-box;animation:beam 3s linear infinite;color:white}.demo-glow .tile{animation:glow 3s infinite}.demo-marquee .word{white-space:nowrap;animation:marquee 5s linear infinite}
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes beam{to{--beam:360deg}}@keyframes float{50%{transform:translateY(-15px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes tilt{50%{transform:rotateY(20deg) rotateX(-10deg)}}@keyframes flip{50%{transform:rotateY(180deg)}}@keyframes slide{0%,100%{transform:translateY(25px);opacity:.3}40%,70%{transform:none;opacity:1}}@keyframes focus{0%,100%{filter:blur(10px);opacity:.3}50%{filter:none;opacity:1}}@keyframes bounce{50%{transform:translateY(-28px)}}@keyframes zoom{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1)}}@keyframes shine{to{background-position:250% 0}}@keyframes type{0%,15%{width:0}65%,85%{width:8ch}100%{width:0}}@keyframes wipe{0%,100%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0)}}@keyframes ripple{0%{box-shadow:0 0 0 0 #6ee7cf88}100%{box-shadow:0 0 0 50px #6ee7cf00}}@keyframes blob{0%,100%{border-radius:30% 70% 60% 40%}50%{border-radius:70% 30% 40% 60%}}@keyframes cube{to{transform:rotateX(360deg) rotateY(360deg)}}@keyframes wave{50%{transform:scaleY(.3)}}@keyframes fill{50%{background-position:0 100%}}@keyframes draw{30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}@keyframes progress{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}@keyframes glow{50%{box-shadow:0 0 45px #fb9362aa}}@keyframes marquee{from{transform:translateX(80%)}to{transform:translateX(-80%)}}@media(prefers-reduced-motion:reduce){.demo *,.demo::before{animation:none!important}}@media print{.creative-toolbar,.dialog-close,.creative-actions{display:none}.creative-grid{display:block}dialog{position:static;display:block}}