.ui-mockup{border-radius:8px;flex-direction:column;width:100%;height:160px;transition:transform .3s;display:flex;position:relative;overflow:hidden}.mockup-minimalism{background:#fafafa;gap:10px;padding:18px;font-family:Manrope,sans-serif}.mockup-minimalism .bar-lg{background:#111;width:50%;height:3px}.mockup-minimalism .bar-sm{background:#888;width:30%;height:2px}.mockup-minimalism .img{background:#e5e5e5;border-radius:4px;flex:1;margin-top:8px}.mockup-bento{background:#1a1a1a;grid-template-rows:1fr 1fr;grid-template-columns:2fr 1fr;gap:8px;padding:10px;display:grid}.mockup-bento div{border-radius:6px}.mockup-bento .b1{background:linear-gradient(135deg,#facc15,#eab308);grid-row:1/3}.mockup-bento .b2{background:#2a2a2a}.mockup-bento .b3{background:#3a3a3a}.mockup-editorial{background:#fff;padding:16px;font-family:Georgia,serif}.mockup-editorial .headline{color:#000;letter-spacing:-1px;font-size:26px;font-weight:900;line-height:.9}.mockup-editorial .sub{color:#666;text-transform:uppercase;letter-spacing:1px;margin-top:8px;font-size:10px}.mockup-editorial .line{background:#000;height:1px;margin-top:12px}.mockup-corporate{background:#fff;padding:14px}.mockup-corporate .nav{border-bottom:1px solid #e5e5e5;justify-content:space-between;align-items:center;padding-bottom:10px;display:flex}.mockup-corporate .logo{background:#1e40af;border-radius:2px;width:40px;height:10px}.mockup-corporate .menu{gap:6px;display:flex}.mockup-corporate .menu span{background:#666;width:22px;height:3px}.mockup-corporate .hero{gap:10px;margin-top:10px;display:flex}.mockup-corporate .hero-text{flex:1}.mockup-corporate .hero-text .l1{background:#1e3a8a;border-radius:2px;width:90%;height:10px;margin-bottom:4px}.mockup-corporate .hero-text .l2{background:#999;width:60%;height:4px;margin-bottom:2px}.mockup-corporate .hero-img{background:linear-gradient(135deg,#3b82f6,#1e40af);border-radius:4px;width:60px;height:50px}.mockup-tech{color:#fff;background:radial-gradient(circle at 30% 20%,#1e293b 0%,#020617 100%);padding:14px;position:relative}.mockup-tech:after{content:"";background:linear-gradient(#0000 0%,#22c55e0d 50%,#0000 100%);position:absolute;inset:0}.mockup-tech .glow{background:#22c55e;width:3px;height:60px;margin-top:10px;box-shadow:0 0 20px #22c55e}.mockup-tech .text{background:#fff;width:70%;height:3px;margin-top:10px}.mockup-tech .text-sm{background:#fff6;width:40%;height:2px;margin-top:4px}.mockup-luxurious{background:#0b0b0b;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:18px;display:flex}.mockup-luxurious .divider{background:#d4af37;width:40%;height:1px}.mockup-luxurious .brand{color:#d4af37;letter-spacing:4px;font-family:Georgia,serif;font-size:18px;font-weight:300}.mockup-luxurious .tag{color:#ffffff80;letter-spacing:3px;text-transform:uppercase;font-size:8px}.mockup-organic{background:linear-gradient(135deg,#f5f1e8 0%,#e8d9b5 100%);align-items:center;gap:10px;padding:16px;display:flex}.mockup-organic .shape{background:linear-gradient(135deg,#8b7355,#5e4b3c);border-radius:40% 60% 50% 50%/50% 40% 60% 50%;width:60px;height:60px}.mockup-organic .text-area{flex:1}.mockup-organic .line{background:#5e4b3c;border-radius:2px;height:3px;margin-bottom:4px}.mockup-organic .line.short{width:50%}.mockup-glassmorphism{background:linear-gradient(135deg,#6366f1 0%,#ec4899 50%,#f59e0b 100%);padding:16px;position:relative}.mockup-glassmorphism .glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #ffffff4d;border-radius:12px;height:100%;padding:14px}.mockup-glassmorphism .line{background:#ffffffb3;border-radius:2px;height:4px;margin-bottom:6px}.mockup-glassmorphism .line.short{width:60%}.mockup-neumorphism{background:#e0e5ec;align-items:center;gap:10px;padding:16px;display:flex}.mockup-neumorphism .btn{background:#e0e5ec;border-radius:50%;width:50px;height:50px;box-shadow:6px 6px 12px #a3b1c6,-6px -6px 12px #fff}.mockup-neumorphism .card{background:#e0e5ec;border-radius:12px;flex:1;padding:12px;box-shadow:inset 4px 4px 8px #a3b1c6,inset -4px -4px 8px #fff}.mockup-neumorphism .card .l{background:#8c9cb3;border-radius:2px;height:3px;margin-bottom:4px}.mockup-neumorphism .card .l.short{width:50%}.mockup-claymorphism{background:linear-gradient(135deg,#ffe4e1 0%,#e0e5ff 100%);align-items:center;gap:12px;padding:18px;display:flex}.mockup-claymorphism .blob{background:linear-gradient(135deg,#ff6b9d,#c44569);border-radius:16px;width:50px;height:50px;box-shadow:0 12px 0 -6px #c4456966,0 15px 25px #00000026}.mockup-claymorphism .blob.blue{background:linear-gradient(135deg,#4facfe,#00f2fe);box-shadow:0 12px 0 -6px #00f2fe4d,0 15px 25px #00000026}.mockup-brutalism{background:#ff0;border:4px solid #000;flex-direction:column;justify-content:space-between;padding:14px;display:flex}.mockup-brutalism .headline{color:#000;text-transform:uppercase;font-family:Manrope,sans-serif;font-size:24px;font-weight:900;line-height:.9}.mockup-brutalism .block{color:#ff0;text-transform:uppercase;letter-spacing:1px;background:#000;align-self:flex-start;padding:4px 8px;font-size:9px;font-weight:800}.mockup-playful{background:#fef3c7;padding:14px;position:relative;overflow:hidden}.mockup-playful .char{background:radial-gradient(circle at 30% 30%,#fca5a5,#ef4444);border-radius:50%;width:80px;height:80px;position:absolute;top:10px;right:10px}.mockup-playful .char:before{content:"●";color:#000;font-size:10px;position:absolute;top:28%;left:25%}.mockup-playful .char:after{content:"●";color:#000;font-size:10px;position:absolute;top:28%;left:58%}.mockup-playful .text{z-index:2;position:relative}.mockup-playful .line{background:#78350f;border-radius:4px;height:4px;margin-bottom:4px}.mockup-playful .line.short{width:60%}.style-card{transition:all .25s cubic-bezier(.22,1,.36,1)}.style-card:hover{border-color:#fff3;transform:translateY(-2px)}.style-card:hover .ui-mockup{transform:scale(1.02)}