*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#1c1924,#0f0c29);color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}#app{width:100%;max-width:800px}.glass-container{background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d;border-radius:20px;padding:2.5rem;transition:transform .3s ease}.glass-container:hover{transform:translateY(-5px)}h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(90deg,#bb86fc,#6200ea);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:#a0a0b0;margin-bottom:2rem;font-size:1.1rem}.input-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#e0e0e0}input[type=text]{width:100%;padding:1rem 1.5rem;border-radius:12px;background:#0003;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1rem;transition:border-color .3s,box-shadow .3s}input[type=text]:focus{outline:none;border-color:#bb86fc;box-shadow:0 0 10px #bb86fc4d}.preview-section{margin-top:2rem;animation:fadeIn .5s ease}h2,h3{margin-bottom:1rem;color:#e0e0e0}.iframe-wrapper{width:100%;height:350px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin-bottom:2rem;background:#000}iframe{width:100%;height:100%;border:none}.result-section p{color:#a0a0b0;margin-bottom:.5rem}.code-box{display:flex;margin-bottom:1.5rem;position:relative}.code-box input,.code-box textarea{flex:1;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#0fc;padding:1rem;border-radius:8px 0 0 8px;font-family:monospace;font-size:.95rem}.code-box textarea{resize:none;height:80px}.copy-btn{padding:0 1.5rem;background:#bb86fc;border:none;color:#fff;font-weight:600;cursor:pointer;border-radius:0 8px 8px 0;transition:background .3s}.copy-btn:hover{background:#9d4edd}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:30px;color:#fff;border:1px solid rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;z-index:1000;box-shadow:0 4px 15px #0003;opacity:0;pointer-events:none}.toast.show{transform:translate(-50%) translateY(0);opacity:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}