:root{--bg-app:#faf8f5;--bg-surface:#fff;--bg-surface-subtle:#f6f3ee;--bg-surface-tint:#f0f4ee;--border-color:#ede8df;--border-color-subtle:#f4efe6;--color-primary:#2b4739;--color-primary-hover:#22392e;--color-primary-active:#192c23;--color-primary-light:#ebf2ec;--color-primary-soft:#d7e3d8;--color-accent-sage:#8aa890;--color-accent-sage-light:#f0f5f1;--color-accent-gold:#e5bc58;--color-accent-peach:#f09e5a;--color-accent-coral:#e77764;--text-primary:#23382d;--text-secondary:#6b7b72;--text-muted:#9ba9a0;--text-on-primary:#fff;--mood-1-color:#e77764;--mood-1-bg:#fdf2ef;--mood-2-color:#f09e5a;--mood-2-bg:#fdf5ed;--mood-3-color:#e5bc58;--mood-3-bg:#fcf8ec;--mood-4-color:#8aa890;--mood-4-bg:#f1f6f2;--mood-5-color:#427b53;--mood-5-bg:#edf5f0;--font-serif:"Playfair Display", Georgia, "Times New Roman", serif;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--shadow-sm:0 2px 8px #2b47390a;--shadow-card:0 8px 24px -4px #2b47390f, 0 2px 6px -1px #2b473908;--shadow-hover:0 12px 28px -4px #2b473917;--shadow-elevated:0 16px 36px -6px #2b47391f;--radius-xs:8px;--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-smooth:.35s cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;background-color:var(--bg-app);width:100%;height:100dvh;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-size:15px;line-height:1.5;overflow:hidden}#root{overscroll-behavior:none;background-color:var(--bg-app);justify-content:center;align-items:flex-start;width:100%;height:100dvh;padding:0;display:flex;overflow:hidden}@media (width>=600px){html,body{background-color:#f1eee8}#root{background:radial-gradient(circle at 50% 20%,#f5f2eb 0%,#eae5dc 100%);justify-content:center;align-items:center;height:100vh;padding:24px 16px 36px;display:flex}}.app-container{background-color:var(--bg-app);overscroll-behavior:none;flex-direction:column;width:100%;max-width:440px;height:100dvh;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px -10px #23382d26}@media (width>=600px){.app-container{border-radius:var(--radius-xl);border:1px solid #ede8dfcc;height:92vh;max-height:940px;overflow:hidden}}.app-main-viewport{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;overscroll-behavior:contain;flex-direction:column;flex:1;width:100%;min-height:0;display:flex;position:relative;overflow:hidden auto}body.modal-open,body.modal-open .app-main-viewport{overscroll-behavior:none;overflow:hidden!important}.app-main-viewport::-webkit-scrollbar{width:5px}.app-main-viewport::-webkit-scrollbar-track{background:0 0}.app-main-viewport::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#2b473926}.app-main-viewport::-webkit-scrollbar-thumb:hover{background:#2b473940}.app-bottom-nav{flex-shrink:0;width:100%;position:relative}.screen-content{padding-top:max(20px, env(safe-area-inset-top,20px));padding-bottom:max(48px, env(safe-area-inset-bottom,36px));padding-left:max(20px, env(safe-area-inset-left,20px));padding-right:max(20px, env(safe-area-inset-right,20px));animation:fadeIn var(--transition-normal);flex-direction:column;flex:1;gap:20px;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}h1,h2,h3,.serif-heading{font-family:var(--font-serif);color:var(--text-primary);font-weight:600;line-height:1.25}.trace-card{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-card);transition:transform var(--transition-fast), box-shadow var(--transition-fast);padding:20px}.trace-card-subtle{background:var(--bg-surface-subtle);border-radius:var(--radius-lg);border:1px solid var(--border-color-subtle);padding:16px 20px}.trace-btn{font-family:var(--font-sans);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.trace-btn-primary{background-color:var(--color-primary);color:var(--text-on-primary);box-shadow:var(--shadow-button)}.trace-btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 8px 20px #2b473938}.trace-btn-primary:active{background-color:var(--color-primary-active);transform:translateY(0)}.trace-btn-ghost{color:var(--text-secondary);border-radius:var(--radius-full);background:0 0;padding:8px}.trace-btn-ghost:hover{color:var(--text-primary);background-color:#2b47390f}.trace-textarea{border:1px solid var(--border-color);background:var(--bg-surface);border-radius:var(--radius-md);width:100%;font-family:var(--font-sans);color:var(--text-primary);resize:vertical;min-height:130px;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:16px;font-size:14.5px;line-height:1.6}.trace-textarea::placeholder{color:var(--text-muted)}.trace-textarea:focus{border-color:var(--color-accent-sage);box-shadow:0 0 0 3px #8aa8902e}@media screen and (width<=768px){input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],textarea,select{font-size:16px!important}}