:root{--bg-void:#0f1115;--surface:#1a1d24;--accent:#8a2be2;--text-primary:#f8f9fa;--text-secondary:#a0aab2;--font-heading:"Playfair Display", serif;--font-body:"Inter", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-void);color:var(--text-primary);font-family:var(--font-body);overscroll-behavior-y:none;flex-direction:column;min-height:100vh;line-height:1.6;display:flex}h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-primary);font-weight:600;line-height:1.2}p{color:var(--text-secondary)}#root{flex:1;justify-content:center;width:100%;display:flex}#app-container{width:100%;max-width:480px;height:100vh;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.view{flex-direction:column;width:100%;height:100%;animation:.4s ease-in-out fadeIn;display:none}.view.active{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app-header{flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex}.app-logo{object-fit:contain;mix-blend-mode:screen;border-radius:8px;width:38px;height:38px}.app-header h2{letter-spacing:2px;margin:0;font-size:1.6rem;font-style:normal;font-weight:600}.hero{text-align:center;flex-direction:column;flex:1;justify-content:center;margin-bottom:10vh;padding:32px 24px;display:flex}.hero h1{margin-bottom:16px;font-size:2.5rem}.hero p{color:var(--text-secondary);margin-bottom:48px;font-size:1.1rem}.btn-primary{background-color:var(--accent);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;flex-direction:column;align-items:center;width:100%;max-width:300px;margin:0 auto;padding:18px 32px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 20px #8a2be266}.btn-primary:active{transform:scale(.96)}.btn-subtitle{opacity:.8;margin-top:4px;font-size:.8rem;font-weight:400}.top-nav{z-index:10;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:relative}.btn-text{color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;margin:-8px;padding:8px;font-size:1rem}.nav-title{font-family:var(--font-heading);color:var(--text-primary);font-size:1.2rem;font-weight:600}.studio-content{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;margin-top:-10vh;display:flex}.studio-content h2{margin-bottom:8px;font-size:2rem}.mic-container{justify-content:center;align-items:center;width:120px;height:120px;margin-top:60px;display:flex;position:relative}.mic-btn{z-index:2;background-color:var(--surface);width:80px;height:80px;color:var(--accent);border:2px solid var(--accent);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:relative;box-shadow:0 4px 20px #00000080}.mic-btn:active{transform:scale(.9)}.mic-btn.recording{background-color:var(--accent);color:var(--text-primary)}.mic-btn.processing{background-color:var(--surface);color:#8a2be280;cursor:default;border-color:#8a2be21a}.mic-btn.processing:after{content:"";border:2px solid #0000;border-top-color:var(--accent);border-radius:50%;animation:1s linear infinite spin-processing;position:absolute;inset:-2px}@keyframes spin-processing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mic-pulse-ring{background-color:var(--accent);opacity:0;z-index:1;border-radius:50%;width:80px;height:80px;position:absolute}.mic-container.recording .mic-pulse-ring{animation:1.5s ease-out infinite pulse-animation}@keyframes pulse-animation{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2)}}.usage-footer{justify-content:center;padding:30px 24px;display:flex}.usage-pill{background-color:var(--surface);color:var(--text-secondary);border:1px solid #ffffff0d;border-radius:30px;padding:10px 20px;font-size:.9rem}.usage-pill span{color:var(--text-primary);font-weight:600}.result-scroll-area{-ms-overflow-style:none;scrollbar-width:none;flex:1;padding-bottom:40px;overflow-y:auto}.result-scroll-area::-webkit-scrollbar{display:none}.result-content{padding:0 24px 32px}#result-title{color:var(--text-primary);margin-bottom:32px;font-size:2.5rem}.label{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:2px;color:var(--accent);opacity:.9;margin-bottom:8px;font-size:.85rem;display:block}.vibe-box{border-left:2px solid var(--accent);margin-bottom:24px;padding-left:16px}#result-vibe{color:var(--text-primary);font-size:1.1rem;font-style:italic}.symbols-box{margin-bottom:32px}#result-symbols{padding:0;list-style:none}#result-symbols li{color:var(--text-secondary);background-color:var(--surface);border-radius:12px;margin-bottom:16px;padding:16px;font-size:1rem}#result-symbols li strong{color:var(--text-primary);margin-bottom:4px;display:block}.translation-box{margin-bottom:40px}#result-translation{color:var(--text-primary);font-size:1.15rem;line-height:1.7}.paywall-card{background-color:var(--surface);text-align:center;border:1px solid #8a2be233;border-radius:16px;margin:0 24px;padding:24px;box-shadow:0 10px 30px #0000004d}.paywall-card h3{margin-bottom:8px;font-size:1.3rem}.paywall-card p{font-size:.9rem}.journal-content{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;flex:1;padding:24px;display:flex;overflow-y:auto}.journal-content::-webkit-scrollbar{display:none}.vault-state{flex-direction:column;flex:1;display:none}.vault-state.active-state{display:flex}#journal-locked{text-align:center;justify-content:center;align-items:center;padding-bottom:10vh}.lock-icon{color:var(--accent);opacity:.8;margin-bottom:24px}#journal-locked h2{margin-bottom:16px;font-size:2rem}#journal-locked p{max-width:300px;margin:0 auto;font-size:1.05rem}.dream-list{flex-direction:column;gap:16px;padding-bottom:40px;display:flex}.dream-card{background-color:var(--surface);cursor:pointer;border:1px solid #ffffff0d;border-radius:12px;padding:20px;transition:transform .2s,background-color .2s}.dream-card:active{background-color:#1a1d24cc;transform:scale(.98)}.dream-card-header{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.dream-card-header h3{margin:0;font-size:1.3rem}.dream-date{font-family:var(--font-body);color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-size:.8rem}.dream-vibe{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.95rem;display:-webkit-box;overflow:hidden}.top-nav,.app-header{padding-top:max(20px, env(safe-area-inset-top))}.usage-footer,.result-scroll-area,.journal-content{padding-bottom:max(30px, env(safe-area-inset-bottom))}@media (width<=380px){.hero h1,#result-title{font-size:2rem}.btn-primary{padding:16px 24px;font-size:1rem}}@media (width>=481px){body{background-color:#000;justify-content:center;align-items:center;display:flex}#app-container{background-color:var(--bg-void);border:1px solid #8a2be233;border-radius:40px;height:90vh;min-height:800px;overflow:hidden;box-shadow:0 0 50px #000c}}.form-input{background-color:var(--bg-void);width:100%;color:var(--text-primary);font-family:var(--font-body);border:1px solid #ffffff1a;border-radius:12px;outline:none;margin-top:8px;padding:14px 16px;font-size:1rem;transition:border-color .3s,box-shadow .3s}.form-input:focus{border-color:var(--accent);box-shadow:0 0 10px #8a2be233}.form-input::placeholder{color:#a0aab266}.vault-toggle-container{background-color:var(--surface);border:1px solid #ffffff0d;border-radius:30px;margin-bottom:24px;padding:4px;display:flex}.vault-toggle{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:26px;flex:1;padding:10px 0;font-size:.95rem;font-weight:500;transition:all .3s}.vault-toggle.active{background-color:var(--accent);color:var(--text-primary);box-shadow:0 4px 12px #8a2be24d}.dream-transcript{color:var(--text-secondary);-webkit-line-clamp:3;border-left:2px solid #8a2be266;-webkit-box-orient:vertical;margin-top:8px;padding-left:12px;font-size:.95rem;font-style:italic;display:-webkit-box;overflow:hidden}.drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;background:#0009;transition:opacity .3s;position:fixed;inset:0}.drawer-overlay.active{opacity:1;pointer-events:auto}.drawer-bottom{background-color:var(--surface);z-index:9999;text-align:center;border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:24px 24px 40px;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);position:fixed;bottom:0;left:50%;transform:translate(-50%)translateY(100%);box-shadow:0 -10px 40px #00000080}.drawer-bottom.active{transform:translate(-50%)translateY(0)}.drawer-handle{background-color:#fff3;border-radius:3px;width:40px;height:5px;margin:0 auto 24px}.legal-content h1,.legal-content h2,.legal-content h3{color:var(--text-primary);font-family:var(--font-body);margin:24px 0 12px}.legal-content p{margin-bottom:16px}.legal-content{-ms-overflow-style:none;scrollbar-width:none}.legal-content::-webkit-scrollbar{display:none}