:root{--bg-dark: #05101a;--bg-mid: #0a1f33;--bg-light: #0f2e4d;--accent-primary: #FF6B00;--accent-secondary: #00A4B4;--text-primary: #ffffff;--text-secondary: #e0e0e0;--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--error-color: #ff4b4b;--success-color: #00e676}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;width:100vw;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column}@media(max-width:768px){body{position:fixed;width:100%;height:100%}#app{overflow-y:auto;-webkit-overflow-scrolling:touch}}.background-mesh{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(135deg,var(--bg-dark),var(--bg-mid),var(--bg-light));background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:100%;min-height:100vh;display:flex;flex-direction:column}header{padding:.9rem 2rem;flex-shrink:0;display:flex;justify-content:center;border-bottom:1px solid rgba(255,255,255,.1)}.logo-img{height:50.6px;width:auto;object-fit:contain}main{flex-grow:1;display:flex;align-items:flex-start;justify-content:center;padding:1rem;padding-top:5vh;position:relative}main:before{content:"";position:fixed;top:calc(1.8rem + 51.6px);left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:0}.container{width:100%;max-width:480px;display:flex;flex-direction:column;gap:1rem;padding-bottom:2rem;position:relative;z-index:1}.hero-section{text-align:center;margin-bottom:1rem;animation:slideDown .5s ease-out}.hero-title{font-family:var(--font-heading);font-size:34px;font-weight:700;color:#fff;margin-bottom:.75rem;line-height:1.2}.hero-subtitle{font-family:var(--font-body);font-size:15px;font-weight:400;color:#fffc;max-width:600px;margin:0 auto;line-height:1.5}.question-section{display:flex;flex-direction:column;gap:1rem;animation:slideDown .5s ease-out}.custom-dropdown{position:relative;width:100%;font-family:var(--font-heading)}.dropdown-trigger{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--glass-shadow)}.dropdown-trigger:hover{background:#ffffff1a;border-color:#fff3}.selected-text{font-weight:600;font-size:.9rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chevron{width:20px;height:20px;transition:transform .3s ease;color:var(--text-secondary)}.custom-dropdown.open .chevron{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#0f2e4df2;border:1px solid var(--glass-border);border-radius:12px;max-height:60vh;overflow-y:auto;z-index:1000;box-shadow:0 10px 40px #00000080;padding:0;animation:fadeIn .2s ease-out}.dropdown-group-title{padding:.75rem 1rem .25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:700;background:#0003}.dropdown-item{padding:1rem;cursor:pointer;transition:background .2s;color:var(--text-primary);font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.1)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.selected{background:var(--accent-primary);color:#fff}#custom-question{width:100%;padding:.8rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;outline:none;transition:all .3s}#custom-question:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px #ff6b0033}#input-area{display:flex;flex-direction:column;gap:2rem;animation:fadeInUp .5s ease-out}.word-inputs{display:flex;flex-direction:column;gap:1rem;width:90%;margin:0 auto}.input-group{position:relative}.word-input{width:100%;padding:.8rem;background:#0003;border:1px solid var(--glass-border);border-radius:12px;color:var(--text-primary);font-family:var(--font-heading);font-weight:700;font-size:1rem;text-align:center;letter-spacing:.05em;outline:none;transition:all .3s}.word-input:focus{border-color:var(--accent-primary);background:#0000004d;transform:scale(1.02)}.word-input.error{border-color:var(--error-color);animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}.controls{display:flex;flex-direction:column;gap:1.5rem}.format-toggle{display:flex;background:#ffffff1a;padding:6px;border-radius:30px;gap:6px;width:90%;margin:0 auto}.toggle-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:.6rem;border-radius:30px;cursor:pointer;font-family:var(--font-heading);font-weight:600;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s}.toggle-btn svg{width:18px;height:18px}.toggle-btn.active{background:#8db2e3;color:#0f4c81;box-shadow:0 2px 8px #0000001a}.primary-btn{position:relative;width:100%;padding:1rem;background:linear-gradient(135deg,#ff8c42,#ff6b00);border:1px solid rgba(255,255,255,.3);border-radius:30px;color:#fff;font-family:var(--font-heading);font-weight:800;font-size:1.1rem;letter-spacing:.05em;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #ff6b0066}.primary-btn:before{content:"";position:absolute;top:0;left:-50%;width:200%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);transform:skew(-25deg);animation:shine 3s infinite}@keyframes shine{0%{left:-50%}20%{left:100%}to{left:100%}}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ff6b0099}.primary-btn:active{transform:translateY(0)}.primary-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}#preview-area{width:100%;aspect-ratio:4 / 3;background:#0000004d;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);box-shadow:0 20px 50px #0000004d}#preview-area img,#preview-area video{width:100%;height:100%;object-fit:cover}#share-section{animation:fadeIn .5s ease-out}.share-container{display:flex;align-items:center;justify-content:center;gap:1rem;background:var(--glass-bg);padding:1rem;border-radius:16px;border:1px solid var(--glass-border)}.share-label{font-family:var(--font-heading);font-weight:600;color:var(--text-secondary);font-size:1rem}.share-buttons{display:flex;gap:.75rem}.share-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-border);background:#ffffff0d;color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;padding:10px}.share-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary);transform:translateY(-3px) rotate(8deg);box-shadow:0 5px 15px #ff6b004d}.share-btn svg{width:100%;height:100%}.hidden{display:none!important}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:768px){main{padding:1rem 2.5rem}.selected-text,.dropdown-item,#custom-question{font-size:.8rem}.word-input{font-size:16px}.primary-btn{font-size:1rem}.logo-img{height:36.8px}.toggle-btn,.share-label{font-size:.9rem}.hero-title{font-size:26px}.hero-subtitle{font-size:12px;padding:0 1rem}}