:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#f4f4f5;background-color:#09090b;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--header-height: 56px;--footer-height: 44px;--bg-primary: #09090b;--bg-secondary: #0f0f12;--bg-tertiary: #141418;--bg-elevated: #18181c;--bg-surface: #1c1c21;--border-subtle: rgba(255, 255, 255, .04);--border-default: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .12);--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-faint: #52525b;--accent-primary: #14b8a6;--accent-primary-hover: #0d9488;--accent-secondary: #eab308;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--bg-primary)}.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100vw;background:var(--bg-primary);overflow-x:hidden;overflow-y:auto;margin:0;padding:0}.layout-container{display:flex;flex-direction:column;min-height:100vh;overflow:visible}.app-main{display:flex;flex:1;min-height:0;background:var(--bg-primary)}.app-sidebar{width:220px;padding:16px 16px 20px;background:#050509;border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:16px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - var(--header-height))}.app-sidebar-logo{display:flex;align-items:center;gap:8px;padding:4px 4px 8px}.app-sidebar-logo-mark{width:22px;height:22px;border-radius:999px;background:radial-gradient(circle at 30% 20%,rgba(244,244,245,.35),transparent 55%),radial-gradient(circle at 80% 80%,rgba(20,184,166,.7),transparent 60%)}.app-sidebar-logo-text{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.app-sidebar-nav{display:flex;flex-direction:column;gap:4px}.app-sidebar-item{border:none;background:transparent;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:500;text-align:left;transition:background var(--transition-base),color var(--transition-base)}.app-sidebar-item:hover{background:#18181ce6;color:var(--text-primary)}.app-sidebar-item-active{background:#18181c;color:var(--text-primary)}.app-sidebar-item-dot{width:6px;height:6px;border-radius:999px;background:var(--accent-primary)}.app-sidebar-item-label{white-space:nowrap}.app-sidebar::-webkit-scrollbar{width:6px}.app-sidebar::-webkit-scrollbar-track{background:transparent}.app-sidebar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.app-sidebar::-webkit-scrollbar-thumb:hover{background:#fff3}.workspace-stacked{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;padding:16px 20px 100px}.controls-area{flex-shrink:0;padding:var(--space-2) var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--space-3);max-height:32vh;overflow-y:auto}.preview-actions-area{flex:1;display:flex;min-height:0;overflow:hidden}.preview-area-new{flex:0 0 auto;display:flex;justify-content:center;align-items:center;padding:12px;overflow:visible;min-width:0;min-height:0;position:relative;max-width:840px;max-height:340px;margin:8px auto 12px;border-radius:var(--radius-lg);animation:pulseGlow 2.5s ease-in-out infinite}.actions-sidebar{width:140px;flex-shrink:0;padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);background:var(--bg-secondary);border-left:1px solid var(--border-subtle);overflow-y:auto}.workspace{display:flex;flex:1;overflow:hidden;min-height:0}.preview-area{width:55%;position:sticky;top:0;height:calc(100vh - var(--header-height) - var(--footer-height));display:flex;justify-content:center;align-items:center;padding:20px;flex-shrink:0;overflow:hidden;max-width:900px}.options-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20px;min-width:0;gap:16px;background:var(--bg-secondary);border-left:1px solid var(--border-subtle)}.sidebar-scrollable{flex:1;overflow-y:auto;overflow-x:visible;min-height:0;width:100%;max-width:100%;padding:0;margin:0}.sidebar-scrollable::-webkit-scrollbar{width:6px}.sidebar-scrollable::-webkit-scrollbar-track{background:transparent}.sidebar-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.sidebar-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.options-panel-fixed{flex-shrink:0;display:flex;flex-direction:column;gap:12px}@media (max-width: 720px){.actions-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;border-left:none;border-top:1px solid var(--border-subtle);padding:12px}.preview-actions-area{flex-direction:column}}@media (max-width: 900px){.controls-area{padding:12px 16px;max-height:50vh}.workspace{flex-direction:column}.preview-area{width:100%;height:45vh;position:relative;max-width:100%;min-height:280px}.options-panel{width:100%;height:55vh;min-height:320px;border-left:none;border-top:1px solid var(--border-subtle)}}@media (max-width: 640px){:root{--header-height: 52px;--footer-height: 44px}.controls-area{padding:10px 12px;gap:12px}.preview-area{width:100%;height:38vh;min-height:240px;padding:12px}.options-panel{width:100%;height:62vh;padding:12px;gap:10px}.sidebar-scrollable{padding:0}.sidebar-container{width:100%!important;min-width:100%!important;max-width:100%!important}}@media (max-width: 480px){.preview-area{height:32vh;min-height:200px;padding:8px}.options-panel{height:68vh;padding:8px;gap:8px}}@media (max-width: 640px){.modal-overlay{padding:0!important;align-items:flex-end!important}.modal-content{max-width:100%!important;width:100%!important;max-height:90vh!important;border-radius:20px 20px 0 0!important;margin:0!important;animation:slideUp .3s ease-out!important}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}}@media (max-width: 640px){input,textarea,select{min-height:44px!important;font-size:16px!important}button{min-height:44px!important;min-width:44px!important}.form-grid{grid-template-columns:1fr!important}}.package-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}@media (max-width: 900px){.package-grid{grid-template-columns:repeat(2,1fr);gap:16px}}@media (max-width: 640px){.package-grid{grid-template-columns:1fr;gap:16px}}@media (max-width: 640px){.header-nav{display:none!important}.hamburger-menu{display:block!important}.studio-badge{display:none!important}}@media (min-width: 641px){.hamburger-menu{display:none!important}.studio-badge{display:inline-block!important}}.mobile-menu{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#000000b3;z-index:999;display:none;backdrop-filter:blur(4px)}.mobile-menu.open{display:block}.mobile-menu-content{background:var(--bg-secondary);width:80%;max-width:300px;height:100%;padding:20px;overflow-y:auto;box-shadow:2px 0 20px #0000004d}@media (max-width: 640px){a,button,[role=button]{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}.word-button-bar{padding:8px 12px!important}.options-panel-fixed{gap:10px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes successPulse{0%{box-shadow:0 0 #22c55e66}70%{box-shadow:0 0 0 10px #22c55e00}to{box-shadow:0 0 #22c55e00}}@media (min-width: 1200px){.controls-area{padding:12px 24px;max-height:24vh}.preview-area-new{padding:28px 36px}.actions-sidebar{width:160px;padding:16px 12px;gap:8px}}@media (min-width: 1600px){.controls-area{padding:14px 32px;max-height:22vh}.preview-area-new{padding:32px 44px}.actions-sidebar{width:180px;padding:18px 14px;gap:10px}.actions-sidebar button{padding:16px 20px;font-size:15px}}@media (min-width: 1920px){.preview-area-new{padding:40px 56px}.actions-sidebar{width:200px}}@media (min-width: 1200px){.word-button-bar{padding:16px 24px!important;border-radius:14px!important}}@media (min-width: 1600px){.word-button-bar{padding:18px 32px!important;border-radius:16px!important}}.word-button-bar-container{position:fixed!important;bottom:44px!important;left:220px!important;right:140px!important;z-index:9999!important;padding:16px 24px!important;background:#0f0f12!important;border-top:1px solid rgba(255,255,255,.04)!important;box-shadow:0 -4px 16px #0000004d!important;width:auto!important;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}body.intro-active .word-button-bar-container,body.intro-active .word-button-bar,body.intro-active [class*=word-button],.word-button-bar-container[data-intro-active=true]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:-1!important;transform:translateY(100vh)!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}@media (max-width: 1200px){.word-button-bar-container{left:0;right:0;bottom:44px}}@media (max-width: 768px){.word-button-bar-container{bottom:0;padding:12px 16px}}.category-chips-container{overflow-x:auto;flex-wrap:nowrap}.category-chip-wrapper{flex-shrink:0}@media (min-width: 1024px){.category-chips-container{flex-wrap:wrap!important;overflow-x:visible!important;gap:8px!important}.category-chip-wrapper{flex-shrink:1}}@media (min-width: 1200px){.category-chips-container{gap:10px!important}.category-chip-wrapper button{padding:8px 12px!important;font-size:12px!important;min-height:36px!important}}@media (min-width: 1400px){.category-chip-wrapper button{padding:9px 14px!important;font-size:13px!important;min-height:38px!important}}@keyframes breathingGradient{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.15}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.25}}.breathing-gradient{animation:breathingGradient 4s ease-in-out infinite}@keyframes rotateSpiral{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.rotating-spiral{animation:rotateSpiral 20s linear infinite}@keyframes waveMotion{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.wave-pattern{animation:waveMotion 3s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 #14b8a600}50%{box-shadow:0 0 20px #14b8a64d,0 0 40px #8b5cf633}}.pulsing-border-glow{animation:pulseGlow 2.5s ease-in-out infinite}.floating-particles{overflow:hidden}.hypnotic-background{pointer-events:none;user-select:none}
