:root{--bg-primary:#121212;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e;--text-primary:#fff;--text-secondary:#8e8e93;--text-placeholder:#636366;--accent:#ff375f;--accent-disabled:#662231;--border:#38383a;--danger:#ff453a;--nav-height:70px;--nav-side-inset:24px;--nav-bottom-gap:0px}html,body,#root{width:100%;height:100vh;height:var(--app-height,100dvh);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;overflow:hidden}#root>div{flex-direction:column;width:100%;height:100%;display:flex}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}.view-container{-webkit-overflow-scrolling:touch;width:100%;min-height:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 40px);flex:1;overflow:hidden auto}.app-nav{z-index:100;left:calc(env(safe-area-inset-left,0px) + var(--nav-side-inset));right:calc(env(safe-area-inset-right,0px) + var(--nav-side-inset));bottom:calc(env(safe-area-inset-bottom,0px) + var(--nav-bottom-gap));height:var(--nav-height);-webkit-backdrop-filter:blur(20px);will-change:transform;background-color:#1e1e20bf;border:1px solid #ffffff14;border-radius:35px;align-items:center;padding:8px;display:flex;position:fixed;overflow:hidden;transform:translateZ(0);box-shadow:0 8px 32px #0000004d}.content-pad{width:100%;max-width:100vw;padding:0 20px}h1.title{margin-bottom:24px;font-size:28px;font-weight:700}h2.subtitle{margin-bottom:12px;font-size:20px;font-weight:600}textarea.journal-input{width:100%;min-height:220px;color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;padding:0;font-family:inherit;font-size:17px;line-height:1.5}textarea.journal-input::placeholder{color:var(--text-placeholder)}.divider{background-color:var(--border);height:1px;margin:20px 0}.animate-slide-left{animation:.3s cubic-bezier(.25,1,.5,1) forwards slideLeft}.animate-slide-right{animation:.3s cubic-bezier(.25,1,.5,1) forwards slideRight}@keyframes slideLeft{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}