:root{--paper:#f7f7f2;--white:#fffefa;--ink:#263e37;--muted:#728078;--green:#456957;--soft:#e9eee5;--line:#e3e7dd;--sand:#eee8d9;--amber:#806744;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit}button,textarea,select,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b18c4f}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,3.7vw,52px);letter-spacing:-1.6px;line-height:1.12;margin-bottom:18px}h2{font-size:24px;letter-spacing:-.7px;line-height:1.25;margin-bottom:12px}h3{font-size:18px;margin-bottom:7px}p{color:var(--muted);font-size:15px;line-height:1.65}small{font-size:12px;line-height:1.6;color:var(--muted)}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#f1f2eb;border-right:1px solid var(--line);padding:45px 26px;display:flex;flex-direction:column}.brand{font-size:39px;font-weight:600;letter-spacing:-2px;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-mark{color:var(--green);font-size:43px;font-weight:400}.brand-dot{margin-left:-10px;color:#a5b59b}.byline{font-size:9px;letter-spacing:2.2px;margin:12px 0 57px 45px;color:var(--muted)}.sidebar nav{display:grid;gap:10px}.nav-item{display:flex;align-items:center;gap:14px;padding:15px 17px;border:0;background:transparent;color:var(--muted);border-radius:10px;text-align:left;font-size:14px}.nav-item.active{background:#e0e7d9;color:var(--green);font-weight:600}.nav-item:hover{background:#e8ece1}.sidebar-bottom{margin-top:auto;padding:25px 10px 0}.sidebar-bottom p{font-family:Georgia,serif;font-size:18px;line-height:1.5;color:#708073}.sidebar-bottom span{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.sidebar-bottom svg{width:16px}.workspace{margin-left:240px;padding:0 5.3%;max-width:1570px}header{height:100px;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);margin-bottom:42px}.header-label{font-size:10px;letter-spacing:2px;color:#7d887e;margin-right:auto}.demo-pill{border:1px solid var(--line);border-radius:30px;font-size:11px;padding:8px 12px;color:var(--muted);white-space:nowrap;display:flex;gap:6px;align-items:center}.demo-pill i{width:5px;height:5px;background:#a5ad73;border-radius:100%}.avatar{width:36px;height:36px;border:1px solid var(--line);background:transparent;border-radius:50%;color:var(--green);display:grid;place-items:center}.avatar svg{width:18px}.eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:1.6px;color:#71816c;margin-bottom:17px}.page-intro{margin-bottom:30px}.page-intro p{margin-bottom:0}.hero,.welcome{position:relative;display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden}.hero{border-radius:17px;background:#e9eee2;min-height:350px;padding:38px 42px;margin-bottom:23px}.hero h2{font-family:Georgia,serif;font-size:38px;letter-spacing:-1px}.hero p{font-size:14px;line-height:1.8}.hero small{display:block;font-size:10px;margin-top:15px}.primary,.secondary,.soft,.danger{border:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 21px;border-radius:9px;font-size:13px;line-height:1.4;font-weight:500;min-height:46px}.primary{background:var(--green);color:#fffefa}.primary:hover{background:#355342}.secondary{background:#f2f3ed;color:var(--ink);border:1px solid var(--line)}.soft{background:#fffdfa;color:var(--amber)}.danger{background:#f7eae4;color:#9b5748}.text-button{padding:7px 0;border:0;background:none;color:var(--green);display:inline-flex;align-items:center;gap:10px;font-size:13px;text-align:left;min-height:36px}.text-button:hover{text-decoration:underline}.text-button svg{width:18px}.art{position:relative;min-height:260px;isolation:isolate}.art .orb{position:absolute;width:116px;height:116px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#e2ce96,#c4bd80);top:7%;left:47%;box-shadow:0 0 60px #e6d9ad66}.arch{position:absolute;bottom:-110px;border-radius:210px 210px 0 0;left:50%;transform:translateX(-50%)}.a1{width:285px;height:340px;background:linear-gradient(115deg,#d7dfca,#b9c8ae)}.a2{width:223px;height:285px;background:linear-gradient(100deg,#b4c6a4,#9baf90);bottom:-110px}.a3{width:162px;height:230px;background:linear-gradient(120deg,#829e7a,#59775f);bottom:-110px}.art:after{content:'';position:absolute;bottom:5px;left:4%;width:95%;height:35px;border-radius:50%;background:#58705115;filter:blur(15px);z-index:-1}.art>span{position:absolute;bottom:15px;width:100%;text-align:center;color:#fff9ed;font-family:Georgia,serif;font-size:17px;line-height:1.5;z-index:3}.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px}.home-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:23px;margin-bottom:23px}.mood-card h2{margin-bottom:7px}.mood-card p{font-size:13px;margin-bottom:15px}.moods{display:flex;justify-content:space-between;gap:10px;margin:15px 0 8px}.mood{background:transparent;border:1px solid transparent;border-radius:50%;width:48px;height:48px;padding:3px;color:#a0aa98;display:grid;place-items:center}.mood svg{width:38px;height:38px;stroke-width:1.1}.mood.selected{background:#e5ecdd;color:#48684b;border-color:#b4c4a6}.mood:hover{background:#eff1e7}.mood-labels{display:flex;justify-content:space-between;color:#929a8e;font-size:10px;margin-bottom:19px}.mood-card small{display:block;font-size:10px;margin-top:8px}.icon-tile{width:42px;height:42px;display:grid;place-items:center;background:#edf0e5;border-radius:11px;color:var(--green);margin-bottom:19px}.practice-card{position:relative;background:linear-gradient(120deg,#fffefa,#f2f3e9)}.practice-card .eyebrow{font-size:9px;letter-spacing:1px}.practice-card p{max-width:290px;font-size:13px}.urgent{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#f0eadd;border:1px solid #e9e0ce;padding:22px 27px;border-radius:13px;margin:24px 0 32px}.urgent>div{display:flex;align-items:center;gap:18px}.urgent>div>svg{width:29px;height:29px;color:#9b8b64}.urgent h3{font-size:18px;color:#736245;margin-bottom:5px}.urgent p{font-size:12px;color:#96876d;margin:0}.urgent button{font-size:12px;white-space:nowrap}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 18px;gap:14px}.section-heading h2{font-size:22px;margin:0}.section-heading span{font-size:11px;color:var(--muted)}.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.topic{text-align:left;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:22px;color:var(--green)}.topic>svg{margin-bottom:22px;width:25px;height:25px}.topic h3{font-size:15px}.topic p{font-size:11px;line-height:1.5}.topic>span{font-size:11px;display:flex;align-items:center;justify-content:space-between;margin-top:22px}.topic>span svg{width:16px}.topic:hover,.exercise-choice:hover{border-color:#a6b298;background:#f9faf2}footer{text-align:center;color:#8d9588;font-size:10px;line-height:1.8;padding:40px 0 35px}footer span{color:#a1a89b}.mobile-nav{display:none}.welcome{padding:5px 0 40px;gap:20px}.welcome h1{font-size:45px;margin-top:22px}.lead{font-size:16px}.welcome .art{margin-top:10px;border-radius:120px 120px 14px 14px;overflow:hidden;background:#edf0e6;max-width:330px}.welcome .art .orb{width:90px;height:90px;top:5%;left:49%}.welcome .arch{bottom:-70px}.welcome .a1{height:260px;width:260px}.welcome .a2{height:215px;width:200px}.welcome .a3{height:170px;width:140px}.pill-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.pill-row span{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--green)}.pill-row svg{width:15px}.onboarding{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;margin-top:5px}.onboarding p{font-size:13px}.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}.role{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:13px;cursor:pointer}.role:has(input:checked){border-color:#9daf90;background:#f0f4e9}input[type=checkbox],input[type=radio]{accent-color:var(--green);width:17px;height:17px;flex-shrink:0}.check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.65;color:var(--muted)}.check input{margin-top:3px}.check .text-button{font-size:12px;display:inline;min-height:0;padding:0}.fine{font-size:11px;line-height:1.65;color:#8c9586;margin:16px 0}.chat-panel{padding:0;overflow:hidden}.chat-head{display:flex;align-items:center;gap:12px;padding:20px 25px;border-bottom:1px solid var(--line)}.chat-logo{display:grid;place-items:center;width:39px;height:39px;background:#e6eddf;border-radius:50%;font-size:28px;color:var(--green)}.chat-head b{font-size:15px;font-weight:500}.chat-head small{display:block;font-size:10px}.memory-badge{margin-left:auto;font-size:10px;color:var(--muted)}.conversation{height:380px;overflow:auto;padding:26px;display:flex;flex-direction:column;gap:18px}.bubble{max-width:85%;border-radius:0 15px 15px 15px;padding:16px 20px;background:#f0f3ea;align-self:flex-start}.bubble small{font-size:10px;color:#84917c}.bubble p{color:var(--ink);font-size:14px;line-height:1.7;margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.user{background:#e2eada;align-self:flex-end;border-radius:15px 0 15px 15px}.suggestions{display:flex;gap:8px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:20px;background:transparent;padding:9px 12px;font-size:11px;color:var(--muted)}#chat-form{display:flex;align-items:center;gap:12px;margin:0 24px;padding-top:18px;border-top:1px solid var(--line)}textarea{resize:vertical;width:100%;border:1px solid var(--line);background:#fafbf6;padding:15px;border-radius:9px;color:var(--ink);font-size:14px;line-height:1.6;min-height:70px}textarea::placeholder{color:#a2aa9b}#chat-form textarea{resize:none;border:0;background:none;padding:5px;min-height:50px}#chat-form button{padding:12px;min-width:46px}.chat-panel>.fine{margin:8px 28px 20px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.exercise-choice{color:var(--ink);text-align:left}.exercise-choice>span:last-child{display:flex;align-items:center;justify-content:space-between;color:var(--green);font-size:13px}.exercise-choice p{font-size:14px}.human{margin:24px 0}.human p{max-width:650px}.human .text-button{margin-left:20px}.emergency{padding:28px;background:#f5ebe4;border:1px solid #e5d9ce;border-radius:14px;margin:24px 0}.emergency .eyebrow{color:#957353}.emergency h3{font-size:23px}.emergency p{font-size:13px;color:#847466}.emergency .primary{background:#87654c;margin-bottom:18px}.emergency small{font-size:11px}.exercise{max-width:800px;margin:0 auto 24px;padding:38px}.exercise h2{font-family:Georgia,serif;font-size:32px}.exercise p{font-size:17px;max-width:650px;line-height:1.9}.actions{display:flex;gap:12px;margin-top:28px}.progress{height:4px;background:#e8eddf;border-radius:5px;margin:24px 0 30px;overflow:hidden}.progress span{height:100%;display:block;background:#8da77e}.step-1{width:25%}.step-2{width:50%}.step-3{width:75%}.step-4{width:100%}.breath-circle{width:155px;height:155px;margin:42px auto;display:grid;place-items:center;border-radius:50%;background:#e4eddc;border:12px solid #f0f4e9;color:var(--green);transition:transform 2s ease;box-shadow:0 0 0 13px #f6f8f1;font-size:13px}.breath-circle.inhale{transform:scale(1.12)}.diary-form{max-width:750px}.diary-form .moods,.diary-form .mood-labels{max-width:400px}.diary-form label{font-size:13px;display:block;margin:25px 0 12px}.muted{color:var(--muted);font-size:11px}.empty{text-align:center;padding:45px}.empty>svg{width:32px;height:32px;margin-bottom:20px;color:#9aa98b}.entries{display:grid;gap:12px}.entry>div{display:flex;align-items:center;justify-content:space-between}.entry-score{padding:8px 12px;background:#e8eedf;border-radius:20px;font-size:12px}.entry time{font-size:11px;color:var(--muted)}.entry p{white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0}.settings-form{max-width:800px}.settings-form>label{display:block;font-size:13px;margin-top:20px}select{display:block;margin:10px 0 20px;width:100%;max-width:300px;border:1px solid var(--line);padding:12px;border-radius:8px;background:#f8faf2;color:var(--ink)}.settings-form>.setting{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:23px}.setting b{font-size:16px;font-weight:500}.setting small{display:block;margin:9px 0;max-width:550px}.setting input{width:23px;height:23px}.settings-actions,.plan{margin-top:22px}.settings-actions button{margin-right:8px;margin-top:10px}.plan{background:#eef1e7}.plan h2{display:flex;justify-content:space-between;gap:15px}.plan h2 span{white-space:nowrap}.plan h2 small{font-family:Arial;font-size:12px}.prose{max-width:850px}.prose h2:not(:first-child){margin-top:30px}.prose p{font-size:15px}.loading{display:grid;place-content:center;min-height:90vh;gap:20px}#notice{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:100;max-width:calc(100% - 32px);width:max-content;background:#324d40;color:white;padding:15px 22px;border-radius:10px;font-size:13px;line-height:1.5;transition:.2s;box-shadow:0 5px 30px #1f362122}#notice.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.sidebar{display:none}.workspace{margin-left:0;padding:0 22px}header{height:75px;margin-bottom:28px;gap:12px}.header-label{font-size:8px;letter-spacing:1px;max-width:140px;line-height:1.5}header:before{content:'◒';font-size:34px;color:var(--green)}.avatar{display:none}.demo-pill{font-size:10px;margin-left:auto}.mobile-nav{display:flex;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;background:#fcfdf8f5;border-top:1px solid var(--line);padding:10px 6px calc(10px + env(safe-area-inset-bottom));z-index:10;backdrop-filter:blur(12px)}.mobile-nav button{display:grid;justify-items:center;gap:6px;border:0;background:none;color:#93a08c;font-size:9px;min-width:54px;min-height:42px;padding:0 5px}.mobile-nav button.active{color:var(--green)}.mobile-nav svg{width:21px;height:21px}h1{font-size:36px;letter-spacing:-1.2px}h2{font-size:22px}.eyebrow{font-size:9px;letter-spacing:1.2px}.page-intro{margin-bottom:25px}.page-intro p{font-size:13px;max-width:340px}.hero{grid-template-columns:1fr;min-height:340px;padding:28px 25px}.hero>div:first-child{position:relative;z-index:2}.hero h2{font-size:31px;max-width:270px}.hero p{max-width:255px;font-size:12px}.hero .eyebrow{font-size:8px;letter-spacing:.9px}.hero .art{position:absolute;right:-45px;bottom:0;width:180px;height:240px;opacity:.28;z-index:0}.hero .art>span{display:none}.hero small{max-width:240px;line-height:1.7}.home-grid{grid-template-columns:1fr;gap:16px}.card{padding:23px}.mood-card .moods{max-width:330px}.mood-card .mood-labels{max-width:330px}.practice-card{padding-left:83px;min-height:175px}.practice-card .icon-tile{position:absolute;top:26px;left:23px}.practice-card h2{font-size:21px}.urgent{display:block;padding:22px}.urgent>div{gap:13px}.urgent p{max-width:none;font-size:11px}.urgent h3{font-size:18px}.urgent button{margin-top:18px;width:100%}.section-heading{align-items:flex-start}.section-heading h2{font-size:20px}.section-heading>span{display:none}.topics{grid-template-columns:1fr;gap:10px}.topic{padding:20px 22px 16px 65px;position:relative}.topic>svg{position:absolute;left:23px;top:22px;width:22px;height:22px}.topic h3{font-size:15px}.topic p{margin-bottom:10px}.topic>span{margin-top:9px}.topic>span svg{position:absolute;right:20px;top:30px}.welcome{display:block;padding-bottom:25px}.welcome h1{font-size:38px;max-width:350px;margin-top:18px}.welcome .art{display:none}.welcome .lead{font-size:14px}.pill-row{margin-top:22px;gap:14px}.pill-row span{font-size:9px}.onboarding{margin-top:0;padding:23px;gap:8px}.roles{gap:8px}.role{padding:12px 8px;font-size:12px}.onboarding h2{font-size:24px}.onboarding .primary{width:100%}.check{font-size:11px}.chat-head{padding:16px;gap:9px}.memory-badge{font-size:9px;max-width:90px;text-align:right}.chat-head small{font-size:9px}.chat-panel{padding:0}.conversation{height:45vh;min-height:290px;padding:17px}.bubble{max-width:94%;padding:13px 15px}.bubble p{font-size:13px}.suggestions{gap:5px}.chip{font-size:10px}#chat-form{margin:0 16px;gap:8px}#chat-form textarea{font-size:16px}.chat-panel>.fine{margin:10px 16px 17px;font-size:10px}.help-grid{grid-template-columns:1fr;gap:14px}.exercise-choice{padding-left:82px;position:relative}.exercise-choice .icon-tile{position:absolute;left:23px;top:23px}.exercise-choice h2{font-size:21px}.exercise-choice p{font-size:12px}.human .text-button{margin-left:0;display:block;margin-top:12px}.human p{font-size:13px}.human .secondary{width:100%}.emergency{padding:23px}.emergency .eyebrow{font-size:8px}.emergency p{font-size:12px}.emergency h3{font-size:22px}.exercise{padding:25px}.exercise h2{font-size:28px}.exercise p{font-size:15px}.actions{gap:8px}.actions button{padding:13px 15px}.settings-actions button{display:flex;width:100%;margin-right:0}.plan h2{display:block}.plan h2 span{display:block;margin-top:15px}.plan p{font-size:13px}.prose p{font-size:14px}.entry time{font-size:10px}.entry p{font-size:13px}footer{font-size:9px;line-height:1.8;padding-bottom:110px}#notice{bottom:90px;font-size:12px}textarea,select{font-size:16px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
#content>.danger{margin-bottom:22px}.check+.check{margin-top:12px}

/* A single Mini App canvas at every viewport size; no desktop website layout. */
html{background:#e8ece3}body{margin:0;background:#e8ece3}#app{max-width:480px;min-height:100dvh;margin:0 auto;background:var(--paper);box-shadow:0 0 60px #233a2910}.sidebar{display:none}.workspace{margin:0;max-width:100%;padding:0 21px}.mobile-nav{left:50%;right:auto;transform:translateX(-50%);width:min(100%,480px);padding-bottom:calc(10px + max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px)))}header{height:74px;margin-bottom:25px;border-bottom:1px solid var(--line);padding-top:var(--tg-content-safe-area-inset-top,0px)}header:before{display:none}.app-brand{font-size:28px;letter-spacing:-1px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:7px}.app-brand>span{font-size:32px;color:var(--green)}.app-brand small{font-size:8px;letter-spacing:1px;margin-left:4px;padding-top:7px}.avatar{display:grid;width:34px;height:34px;background:#edf1e7}.app-back{border:0;background:transparent;color:var(--green);width:32px;height:40px;padding:4px;display:grid;place-items:center}.app-back svg{transform:rotate(180deg)}.demo-pill{padding:6px 9px;font-size:9px;gap:5px}.page-intro h1{font-size:31px;line-height:1.15}.page-intro .eyebrow{font-size:8px;letter-spacing:1.1px}.hero{min-height:278px;padding:25px 23px;margin-bottom:17px}.hero h2{font-size:29px}.hero .eyebrow{font-size:7px}.hero small{font-size:9px}.hero .primary{font-size:12px}.hero .art{opacity:.35;right:-42px;width:175px;height:230px}.urgent{margin:18px 0 25px}.card{border-radius:17px}.home-grid{gap:14px;margin-bottom:16px}.conversation{height:calc(var(--tg-viewport-stable-height,100dvh) - 365px);min-height:220px;max-height:520px}.welcome h1{font-size:34px}.welcome{padding-bottom:25px}.welcome .eyebrow{font-size:8px;letter-spacing:1px}.onboarding{padding:22px}.roles{gap:7px}.role{font-size:11px}.prose h2{font-size:21px}.prose p{font-size:13px}.settings-form h2{font-size:22px}#notice{max-width:440px;width:calc(100% - 36px)}.app-brand small{display:none}footer{padding-bottom:105px;font-size:9px}body[data-keyboard="open"] .mobile-nav{display:none}body[data-keyboard="open"] footer{display:none}body[data-keyboard="open"] .conversation{height:180px;min-height:140px}body[data-keyboard="open"] #chat-form{padding-bottom:10px}.mobile-nav button{border-radius:10px;padding:5px 8px}.mobile-nav button.active{background:#e9eedf}.help-grid .exercise-choice h2{font-size:20px}.page-intro{margin-bottom:23px}
@media(max-width:360px){.workspace{padding:0 15px}.app-brand{font-size:25px}.demo-pill{font-size:8px}.page-intro h1{font-size:29px}.card{padding:20px}.role{font-size:10px;padding:11px 6px}.mobile-nav button{min-width:48px;padding:5px}.urgent{padding:19px}}
.onboarding{grid-template-columns:1fr}

.confirm-dialog{border:1px solid #dce1d5;border-radius:20px;background:#fcfdf8;color:#263f38;padding:24px;max-width:380px;width:calc(100% - 40px);box-sizing:border-box}.confirm-dialog::backdrop{background:rgba(24,39,33,.45)}.confirm-dialog h2{margin-top:0}.confirm-dialog p{line-height:1.5}.confirm-actions{display:flex;gap:12px;flex-wrap:wrap}.confirm-actions button{flex:1}

/* Visual system · Opora Mini App · October 2026 */
:root{--paper:#f6f5f0;--white:#fffefa;--ink:#243e36;--muted:#62736b;--green:#315e4d;--soft:#e8eee6;--line:#e1e6dd;--sand:#eee5d5;--amber:#765d3c;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{background:#e8ece7}#app{background:var(--paper);max-width:480px}.workspace{padding:0 20px}header{height:76px;margin-bottom:25px;border:0;gap:10px}.app-brand{font-size:27px;font-weight:700;letter-spacing:-1.2px}.app-brand>span{width:35px;height:35px;background:var(--green);color:#fffaf0;font-size:30px;border-radius:12px;display:grid;place-items:center;box-shadow:0 4px 10px #244e3c12}.demo-pill{border:0;background:#e9eee7;color:#53695c;font-size:10px;padding:7px 10px}.demo-pill i{background:#6d8d73}.avatar{width:40px;height:40px;border:1px solid var(--line);background:var(--white)}.app-back{width:34px;min-height:44px}
h1{font-family:inherit;font-weight:650;letter-spacing:-1.1px;line-height:1.15}.page-intro h1{font-size:30px;line-height:1.18;margin-bottom:10px}.page-intro{margin-bottom:23px}.page-intro p{font-size:14px;line-height:1.6;max-width:100%;color:var(--muted)}h2{font-weight:600;letter-spacing:-.65px}h3{font-weight:600}.eyebrow,.page-intro .eyebrow{font-size:9px;letter-spacing:1.45px;color:#657866;margin-bottom:12px}.fine{color:#68756c;font-size:12px;line-height:1.6}small{color:#68756c}
button,a,input,textarea,select{touch-action:manipulation}.primary,.secondary,.soft,.danger{min-height:52px;border-radius:16px;font-size:14px;font-weight:600;letter-spacing:.05px;padding:14px 20px;gap:10px;transition:background .16s,transform .16s,box-shadow .16s}.primary{background:var(--green);box-shadow:0 5px 12px #234d3a16}.primary:hover{background:#274e40}.primary:active,.secondary:active,.soft:active,.danger:active{transform:scale(.98)}button:disabled{opacity:.58;transform:none;box-shadow:none}.secondary{background:#f3f5ee;border-color:#dce3d7}.soft{background:#fffdf6;border:1px solid #e5dcca;color:#705b3e}.danger{background:#f8ebe5;color:#884734;border:1px solid #ebd4ca}.text-button{min-height:44px;font-size:13px;font-weight:500}.chip{min-height:40px;font-size:12px;background:#fffefa;border-color:#dce4d6;color:#4d6758;padding:9px 13px}.card{padding:22px;border-radius:24px;border-color:#e1e6dc;box-shadow:0 3px 12px #243d3004}.icon-tile{width:44px;height:44px;border-radius:15px;background:#e8eee2}
.hero{background:linear-gradient(120deg,#e9eee0 0%,#e1e8d8 100%);border:1px solid #dce4d2;border-radius:27px;min-height:265px;padding:25px;margin-bottom:18px}.hero h2{font-size:32px;line-height:1.12;font-weight:400;font-family:Georgia,serif;max-width:270px;margin-bottom:13px}.hero .eyebrow{font-size:8px;letter-spacing:1.1px}.hero p{font-size:14px;line-height:1.6;max-width:260px}.hero .primary{font-size:14px;margin-top:3px}.hero small{font-size:11px;margin-top:12px}.hero .art{opacity:.45;right:-65px;bottom:-20px}.hero .a1{background:#c5d2b7}.hero .a2{background:#adbf9d}.hero .a3{background:#849f7d}.home-grid{gap:14px}.mood-card h2{font-size:22px}.mood-card p,.practice-card p{font-size:13px}.mood-card .moods,.mood-card .mood-labels{max-width:none}.moods{gap:6px;margin-top:20px}.mood{width:48px;height:48px;border-radius:16px;color:#7c9279;background:#f3f5ee;transition:background .15s,transform .15s}.mood svg{width:34px;height:34px;stroke-width:1.4}.mood.selected{background:#dfe9d7;border-color:#97ad8b;color:#345b3b;box-shadow:0 3px 8px #3c5f2910;transform:translateY(-2px)}.mood-labels{font-size:11px;color:#6c7a6b}.mood-card small{font-size:11px}.practice-card{padding-left:80px;min-height:158px}.practice-card h2{font-size:21px}.practice-card .eyebrow{font-size:8px}.urgent{padding:20px;background:#efe8da;border:1px solid #e6dcc9;border-radius:23px;margin:18px 0 24px}.urgent h3{color:#66553b;font-size:18px}.urgent p{font-size:12px;color:#7c6b51;line-height:1.5}.urgent>div>svg{width:28px}.urgent button{font-size:13px;margin-top:15px}.topics{gap:10px}.topic{border-radius:20px;padding:18px 42px 15px 62px;transition:background .16s}.topic>svg{left:20px;top:21px;color:#6a846b}.topic h3{font-size:16px;margin-bottom:5px}.topic p{font-size:12px;margin:0}.topic>span{font-size:11px;margin-top:8px}.topic>span svg{top:29px;right:18px}.section-heading h2{font-size:21px}.section-heading{margin-top:25px}
.welcome{padding-bottom:22px}.welcome h1{font-family:Georgia,serif;font-size:36px;font-weight:400;line-height:1.14;margin-top:16px}.welcome .lead{font-size:15px}.pill-row{gap:10px}.pill-row span{font-size:10px;padding:7px 9px;border-radius:20px;background:#eaf0e4}.onboarding h2{font-size:23px}.role{border-radius:13px;min-height:50px;font-size:12px}.role:has(input:checked){background:#e8efdf;border-color:#8fa77f}.check{font-size:12px;line-height:1.6}.check .text-button{font-size:12px;text-decoration:underline;text-underline-offset:3px}.onboarding .fine{font-size:11px}
textarea,select{background:#f8f9f3;border-radius:16px;border-color:#dce3d7;padding:14px;font-size:16px;color:var(--ink)}textarea::placeholder{color:#7d8d80}textarea:focus,select:focus{border-color:#7f9b80;background:#fffefa}.settings-form>.setting{gap:16px;padding-top:20px;padding-bottom:3px}.setting b{font-size:16px;font-weight:600}.setting small{font-size:12px;line-height:1.6;margin-top:7px}.setting input[type=checkbox]{appearance:none;-webkit-appearance:none;width:48px;height:28px;border:1px solid #a9b7a8;background:#dce3d8;border-radius:18px;position:relative;cursor:pointer;flex-shrink:0;transition:background .18s;margin:0}.setting input[type=checkbox]:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fffefa;box-shadow:0 1px 4px #23372b22;transition:transform .18s}.setting input[type=checkbox]:checked{background:var(--green);border-color:var(--green)}.setting input[type=checkbox]:checked:before{transform:translateX(20px)}.settings-form>.primary{width:100%}.settings-actions .danger{margin-top:16px}.plan{background:#edf0e6;box-shadow:none}.plan h2{font-size:21px}.plan p{font-size:13px}.entry-score{background:#e3ecdc;color:#355c3e;font-weight:600}.entry p{font-size:14px}.entry time{font-size:11px}.entry .text-button{color:#8b5646}.empty{padding:32px 23px}.empty h3{font-size:19px}.empty p{font-size:13px;margin-bottom:0}.diary-form label{font-size:14px}.diary-form .primary,.diary-form .secondary{width:100%}
.mobile-nav{width:min(100%,480px);background:#fcfdf8f5;border-top:1px solid #dde4d7;padding-top:8px;gap:2px;box-shadow:0 -5px 24px #29412f06}.mobile-nav button{font-size:10px;color:#6b7e6c;min-height:49px;min-width:50px;border-radius:17px;gap:4px;padding:6px 8px;flex:1;transition:background .18s,color .18s}.mobile-nav button.active{background:#e3ecda;color:#2b563b;font-weight:600}.mobile-nav svg{width:22px;height:22px;stroke-width:1.65}footer{font-size:10px;line-height:1.65;color:#778276;padding-top:30px}footer span{color:#778276}#notice{border-radius:17px;background:#2b503f;font-size:13px;padding:15px 18px;box-shadow:0 8px 24px #18372c24}
.chat-panel{padding:0;border-radius:23px;box-shadow:0 4px 18px #28402c06}.chat-head{padding:14px 16px;gap:10px}.chat-head b{font-weight:600;font-size:15px}.chat-head small{font-size:10px}.chat-logo{background:#e5eddc;width:38px;height:38px}.memory-badge{font-size:10px;max-width:98px;line-height:1.4}.conversation{padding:17px 14px;gap:13px;overscroll-behavior:contain;scrollbar-width:thin}.bubble{border-radius:18px 18px 18px 5px;background:#f0f3ea;padding:14px 16px;max-width:94%}.bubble.user{background:#e4eddd;border-radius:18px 18px 5px 18px}.bubble small{font-size:10px;color:#60785d}.bubble p{font-size:15px;line-height:1.6;margin-top:5px}#chat-form{background:#f0f4eb;border:1px solid #dce5d5;border-radius:19px;margin:8px 12px 0;padding:6px;align-items:flex-end;gap:5px}#chat-form textarea{padding:9px 8px;line-height:1.4;min-height:48px;max-height:110px;background:transparent}#chat-form button{min-width:46px;min-height:46px;padding:11px;border-radius:14px}.chat-panel>.fine{font-size:10px;line-height:1.45;margin:8px 16px 12px}.typing{display:flex;gap:9px;align-items:center;color:#62765d;font-size:12px;padding:9px 5px;flex-shrink:0}.typing-dots{display:flex;gap:4px}.typing-dots i{width:5px;height:5px;border-radius:50%;background:#77956c;animation:opora-pulse 1.2s ease-in-out infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes opora-pulse{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
body[data-view=chat] .workspace{height:var(--tg-viewport-stable-height,100dvh);display:flex;flex-direction:column;padding-bottom:calc(80px + env(safe-area-inset-bottom))}body[data-view=chat] header{flex-shrink:0;height:66px;margin-bottom:0}body[data-view=chat] #content{min-height:0;flex:1;display:flex;flex-direction:column}body[data-view=chat] .page-intro{display:none}body[data-view=chat] footer{display:none}body[data-view=chat] .chat-panel{min-height:0;flex:1;display:flex;flex-direction:column}body[data-view=chat] .chat-head,body[data-view=chat] #chat-form,body[data-view=chat] .chat-panel>.fine{flex-shrink:0}body[data-view=chat] .conversation{height:auto;min-height:0;max-height:none;flex:1}body[data-view=chat] .urgent{flex-shrink:0;margin:10px 0 0;padding:0;border:0;background:none;display:block}body[data-view=chat] .urgent>div{display:none}body[data-view=chat] .urgent button{margin:0;min-height:42px;font-size:12px;background:#eee7d9;border:0}body[data-keyboard=open][data-view=chat] .workspace{height:var(--opora-visible-height,100dvh);padding-bottom:8px}body[data-keyboard=open][data-view=chat] header{height:50px}body[data-keyboard=open][data-view=chat] .chat-panel>.fine{display:none}
.help-grid{gap:12px}.exercise-choice{padding:22px 20px 22px 80px}.exercise-choice .icon-tile{left:20px;top:22px}.help-grid .exercise-choice h2{font-size:21px}.exercise-choice p{font-size:13px}.exercise-choice>span:last-child{font-size:12px}.exercise{padding:24px}.exercise h2{font-family:inherit;font-weight:600;font-size:26px;line-height:1.2}.exercise p{font-size:16px;line-height:1.75}.actions{gap:10px;flex-wrap:wrap}.actions button{flex:1;min-width:110px}.progress{height:5px;margin:19px 0 25px}.progress span{background:#6c9163;border-radius:6px}.breath-circle{background:#e5eddd;border-color:#f0f4e9;color:#3f643f;font-weight:500}.human p{font-size:14px}.emergency{border-radius:23px;background:#f4e9e1;border-color:#e5d4c7}.emergency h3{font-size:23px}.emergency p{font-size:14px;color:#725e50}.emergency small{color:#735f50;font-size:12px}.emergency .primary{background:#805c43;width:100%}.prose p{font-size:14px;line-height:1.75}.confirm-dialog{border-radius:24px;padding:24px}.confirm-dialog h2{font-size:23px;line-height:1.25}.confirm-actions{margin-top:20px}.confirm-actions button{font-size:13px;padding:13px;min-width:110px}
@media(max-width:360px){.workspace{padding:0 14px}header{gap:7px}.app-brand{font-size:24px}.app-brand>span{width:30px;height:30px;font-size:27px}.demo-pill{font-size:8px;padding:6px}.avatar{width:34px;height:34px}.page-intro h1{font-size:27px}.hero{padding:21px}.hero h2{font-size:29px}.card{padding:19px}.chat-panel{padding:0}.practice-card,.exercise-choice{padding-left:74px}.moods{gap:3px}.mood{width:43px;height:46px}.mobile-nav button{font-size:9px;min-width:45px;padding:6px 4px}.check{font-size:12px}.hero .primary{width:100%}.confirm-dialog{padding:20px}.role{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Mobile input: visible viewport rather than the platform's stable pre-keyboard height. */
body[data-view=chat] .workspace{height:var(--opora-visible-height,100dvh)}
body[data-keyboard=open][data-view=chat]{overflow:hidden}
body[data-keyboard=open][data-view=chat] .workspace{position:fixed;top:var(--opora-visible-top,0px);left:50%;transform:translateX(-50%);width:min(100%,480px);height:var(--opora-visible-height,100dvh);padding-bottom:8px;background:var(--paper)}
body[data-keyboard=open][data-view=chat] header{height:44px;padding-top:0}
body[data-keyboard=open][data-view=chat] .chat-head{padding:7px 12px}
body[data-keyboard=open][data-view=chat] #chat-form{padding:5px;margin-top:5px}
body[data-keyboard=open][data-view=chat] .urgent{margin-top:5px}
body[data-keyboard=open][data-view=chat] .urgent button{min-height:44px}
.conversation>.bubble,.conversation>.suggestions{flex-shrink:0}
#chat-form textarea{min-width:0;resize:none;font-size:16px}
#chat-form button{flex-shrink:0}
.avatar,.app-back{min-width:44px;width:44px;min-height:44px;height:44px;flex-shrink:0}
button.chip,.text-button{min-height:44px}
.mood{min-width:44px;min-height:44px}
button,a,input,textarea,select{touch-action:manipulation}
@media(max-width:360px){header{gap:5px}.demo-pill{display:none}.app-brand{margin-right:auto}}
@media(max-height:400px){body[data-keyboard=open][data-view=chat] .chat-head{display:none}}
@media(max-height:480px){body[data-view=chat] header{height:44px}body[data-view=chat] .chat-head{display:none}body[data-view=chat] .chat-panel>.fine{display:none}}
@media(max-width:420px){header:has(.app-back) .demo-pill{display:none}header:has(.app-back) .app-brand{margin-right:auto}}
/* Gentle motion. Layout and tap targets remain fixed throughout transitions. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1)}
.mobile-nav button{position:relative;z-index:1;transition:color .2s,transform .16s var(--motion-ease)}
.mobile-nav button.active{background:transparent}
.nav-marker{position:absolute;pointer-events:none;border-radius:17px;background:#e3ecda;z-index:0}
.nav-marker[hidden]{display:none}
button,.primary,.secondary,.soft,.danger,.topic,.exercise-choice,.role{transition:background-color .2s,border-color .2s,box-shadow .2s,transform .16s var(--motion-ease)}
button:active,a.primary:active{transform:scale(.97)}
.mobile-nav button:active{transform:scale(.94)}
.mood svg{transition:transform .24s var(--motion-ease),color .2s}
.mood.selected svg{transform:scale(1.06)}
#chat-form{transition:border-color .2s,box-shadow .2s}
#chat-form:focus-within{border-color:#91ad91;box-shadow:0 0 0 3px #53795110}
.progress span{transform-origin:left center}
.confirm-dialog[open]{animation:opora-dialog-in .22s var(--motion-ease)}
.confirm-dialog::backdrop{animation:opora-backdrop-in .2s ease}
@keyframes opora-dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes opora-backdrop-in{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){.topic:hover,.exercise-choice:hover{transform:translateY(-2px);box-shadow:0 6px 18px #28402c09}.primary:hover svg,.text-button:hover svg{transform:translateX(2px)}.primary svg,.text-button svg{transition:transform .2s var(--motion-ease)}}
@media(prefers-reduced-motion:reduce){button:active,a.primary:active,.mood.selected svg,.topic:hover,.exercise-choice:hover,.primary:hover svg,.text-button:hover svg{transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Small, silent celebrations; never cover a tap target or create scroll overflow. */
.delight-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none!important;z-index:25;contain:strict}
.delight-layer *{pointer-events:none!important}
.delight-burst{position:absolute;width:0;height:0}
.delight-ring{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border:2px solid #a8c294;border-radius:50%;animation:opora-kind-ring .8s ease-out both}
.delight-burst.calm .delight-ring{border-color:#b0c3aa;background:#bccfb21a;animation-duration:1s}
.delight-spark{position:absolute;left:-3px;top:-4px;width:6px;height:9px;border-radius:5px 1px 5px 1px;opacity:0;animation:opora-kind-spark .85s cubic-bezier(.16,.6,.3,1) var(--delay) both}
@keyframes opora-kind-ring{0%{opacity:0;transform:scale(.65)}20%{opacity:.65}100%{opacity:0;transform:scale(1.8)}}
@keyframes opora-kind-spark{0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}18%{opacity:.85}75%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.65) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.delight-layer{display:none}}
/* Calm motion: no bounce, no moving targets, no staggered flashes. */
:root{--motion-ease:cubic-bezier(.4,0,.2,1)}
button,.primary,.secondary,.soft,.danger,.topic,.exercise-choice,.role,.mobile-nav button{transition:background-color .4s var(--motion-ease),border-color .4s var(--motion-ease),box-shadow .4s var(--motion-ease),color .4s var(--motion-ease)}
button:active,a.primary:active,.mobile-nav button:active,.mood.selected svg{transform:none}
.mood svg{transition:color .45s var(--motion-ease)}
.setting input[type=checkbox],.setting input[type=checkbox]:before{transition:background-color .4s var(--motion-ease),border-color .4s var(--motion-ease),transform .4s var(--motion-ease)}
#chat-form{transition:border-color .4s var(--motion-ease),box-shadow .4s var(--motion-ease)}
.confirm-dialog[open]{animation:opora-dialog-in .4s var(--motion-ease)}
.confirm-dialog::backdrop{animation:opora-backdrop-in .4s var(--motion-ease)}
@keyframes opora-dialog-in{from{opacity:0}to{opacity:1}}
#notice,#notice.show{transform:translateX(-50%);transition:opacity .45s var(--motion-ease)}
.typing-dots i{animation-duration:2.2s}
@keyframes opora-pulse{0%,100%{opacity:.4}50%{opacity:.85}}
.breath-circle{transition:transform 3s ease-in-out}
.delight-ring,.delight-burst.calm .delight-ring{animation-duration:1.8s;animation-timing-function:ease-in-out}
.delight-spark{animation-duration:1.8s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@keyframes opora-kind-ring{0%{opacity:0;transform:scale(.9)}40%{opacity:.35}100%{opacity:0;transform:scale(1.45)}}
@keyframes opora-kind-spark{0%{opacity:0;transform:translate(0,0) rotate(0)}35%{opacity:.45}70%{opacity:.35}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}}
@media(hover:hover) and (pointer:fine){.topic:hover,.exercise-choice:hover,.primary:hover svg,.text-button:hover svg{transform:none}}
/* Distinct rhythms: immediate controls, continuous navigation, lively small accents. */
:root{--motion-ease:cubic-bezier(.22,.68,.3,1)}
button,.primary,.secondary,.soft,.danger,.topic,.exercise-choice,.role,.mobile-nav button{transition:background-color .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out,color .2s ease-out}
.mood svg{transition:color .18s ease-out}
.mood:active{box-shadow:inset 0 0 0 2px #91ad9140}
.setting input[type=checkbox],.setting input[type=checkbox]:before{transition:background-color .2s ease-out,border-color .2s ease-out,transform .24s var(--motion-ease)}
#chat-form{transition:border-color .18s ease-out,box-shadow .18s ease-out}
.confirm-dialog[open],.confirm-dialog::backdrop{animation-duration:.24s}
#notice,#notice.show{transition:opacity .22s ease-out}
.delight-ring{animation:opora-kind-ring .6s cubic-bezier(.16,.7,.3,1) both}
.delight-burst.calm .delight-ring{animation-duration:.9s}
.delight-spark{animation:opora-kind-spark var(--life,.85s) linear var(--delay) both}
@keyframes opora-kind-ring{0%{opacity:0;transform:scale(.8)}18%{opacity:.5}100%{opacity:0;transform:scale(1.6)}}
@keyframes opora-kind-spark{
  0%{opacity:0;transform:translate(0,0) scale(.6) rotate(0);animation-timing-function:cubic-bezier(.12,.65,.25,1)}
  12%{opacity:.85}
  60%{opacity:.75;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--turn));animation-timing-function:ease-in}
  100%{opacity:0;transform:translate(calc(var(--dx) * 1.12),calc(var(--dy) + var(--fall))) scale(.8) rotate(calc(var(--turn) * 1.4))}
}
/* Home, step 1: conversation and mood on the first mobile screen. */
body[data-view=home]:has(.home-intro) header{height:64px;margin-bottom:14px}
.home-intro{margin-bottom:16px}
.home-intro h1{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin-bottom:7px}
.home-intro p{font-size:13px;line-height:1.5;margin:0}
.home-hero{min-height:0;padding:20px 22px;margin-bottom:12px;border-radius:24px}
.home-hero h2{font-size:29px;line-height:1.08;letter-spacing:-.8px;margin-bottom:10px;max-width:100%}
.home-hero p{font-size:12px;line-height:1.5;margin-bottom:14px;max-width:100%}
.home-hero .primary{min-height:48px;width:100%;font-size:13px;justify-content:space-between;padding:12px 16px}
.home-hero small{font-size:10px;line-height:1.4;margin-top:9px;max-width:100%}
.home-hero .art{height:180px;width:135px;right:-40px;opacity:.23}
.home-mood{padding:18px 20px;border-radius:24px}
.home-mood h2{font-size:20px;margin-bottom:10px}
.home-mood .moods{margin:0 0 6px;max-width:none}
.home-mood .mood-labels{margin-bottom:5px;max-width:none;font-size:10px}
.home-mood .text-button{font-size:12px;justify-content:space-between;width:100%}
.home-mood small{font-size:10px;line-height:1.5;margin-top:0}
@media(max-width:360px){.home-hero{padding:18px}.home-hero h2{font-size:27px}.home-hero .primary{font-size:12px}.home-mood{padding:16px}.home-intro h1{font-size:27px}}
/* Step 2: distinct expressions and an explicit selected-state label. */
.moods{gap:7px;align-items:center}
.mood{position:relative;width:48px;height:52px;min-width:44px;flex:0 0 auto;padding:4px;border-radius:16px;background:#f1f3ed;color:#667c6c;border:1px solid transparent}
.mood svg{width:36px;height:36px;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mood .mood-face-fill{fill:#fafbf5;stroke:#9caf9b;stroke-width:1.25}
.mood.selected{background:#e1ead8;border-color:#7f9d72;color:#355b41;box-shadow:0 2px 6px #304b3210}
.mood.selected .mood-face-fill{fill:#edf3e4;stroke:#73946c}
.mood-selection-mark{display:none;position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;align-items:center;justify-content:center;background:#42684c;color:#fff;border:2px solid var(--white);border-radius:50%;font-size:10px;line-height:1;font-weight:600}
.mood.selected .mood-selection-mark{display:flex}
.mood-caption{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:11px 0 4px;font-size:12px;line-height:1.5;min-height:18px}
.mood-caption>span{color:#778477;font-size:10px}
.mood-caption strong{font-weight:600;color:#3c5d46}
.home-mood .moods{margin-bottom:0}
.home-mood .mood-caption{margin-top:10px;margin-bottom:1px;font-size:12px}
.diary-form .mood-caption{max-width:400px}
@media(max-width:360px){.moods{gap:4px}.mood{width:44px;height:48px;padding:3px}.mood svg{width:34px;height:34px}}
/* Step 4: a quieter, readable conversation with distinct speaker styles. */
.chat-head{background:#fbfcf7;padding:12px 14px;gap:10px}
.chat-head b{font-size:15px;letter-spacing:-.2px}
.memory-badge{font-size:9px;line-height:1.45;color:#647462;max-width:86px}
.conversation{background:#f7f8f2;padding:16px 12px;gap:16px;scroll-padding-block:16px}
.bubble{max-width:94%;padding:13px 15px;border-radius:18px 18px 18px 5px}
.bubble.assistant{background:#fffefa;border:1px solid #e5e9de;box-shadow:0 2px 6px #31452d04}
.bubble.user{max-width:88%;background:#3b604d;color:#fffefa;border:1px solid #3b604d;border-radius:18px 18px 5px 18px}
.bubble.user small{color:#d1dfd1}
.bubble.user p{color:#fffefa}
.bubble small{font-size:10px;font-weight:600;letter-spacing:.15px;color:#62765e}
.bubble p{font-size:15px;line-height:1.65;margin:5px 0 0;overflow-wrap:anywhere}
.chat-welcome{max-width:100%;width:100%;padding:17px}
.chat-welcome h2{font-family:Georgia,serif;font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.5px;margin:10px 0}
.chat-welcome p{font-size:14px;line-height:1.6}
.suggestions{gap:7px;align-items:flex-start}
.suggestions .chip{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:10px 13px;background:#fffefa;color:#526e52;border-color:#dce5d5;font-size:12px;border-radius:14px}
.suggestions .chip svg{width:15px;height:15px;opacity:.65}
#chat-form{background:#fffefa;border-color:#dce5d5;margin:9px 10px 0;border-radius:18px;padding:5px}
#chat-form textarea{padding:10px;line-height:1.45;min-height:46px}
#chat-form textarea::placeholder{color:#7e8e7c}
#chat-form button{border-radius:13px;box-shadow:none}
#chat-form button svg{transform:rotate(-90deg)}
.chat-panel>.fine{margin:8px 14px 11px;color:#697965;font-size:10px;line-height:1.5}
@media(max-width:360px){.chat-head{gap:8px;padding:10px 12px}.chat-head small{font-size:9px}.chat-logo{width:32px;height:32px}.memory-badge{max-width:75px}.chat-welcome{padding:14px}.chat-welcome h2{font-size:23px}.bubble{padding:12px 13px}.suggestions .chip{font-size:11px;padding:9px 11px}}

/* Step 5: diary timeline, clear dates and quiet mood marks. */
.entries{position:relative;padding-left:17px;border-left:1px solid #dce4d5;margin-left:5px}
.entry-day{position:relative;font-size:12px;font-weight:600;letter-spacing:.15px;color:#687c63;margin:24px 0 12px}
.entry-day:first-child{margin-top:0}
.entry-day:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#8fa586;border:3px solid var(--paper);box-sizing:content-box;left:-24px;top:1px}
.timeline-entry{padding:17px;margin-bottom:12px;border-radius:20px;background:#fffefa;box-shadow:none}
.timeline-entry .entry-top{display:flex;align-items:center;gap:10px}
.entry-face{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#edf1e6;border-radius:14px;color:#5d7959}
.entry-face svg{width:34px;height:34px;stroke-width:1.4}
.entry-face circle{fill:#f8faef}
.entry-meta{min-width:0;flex:1}
.entry-meta h3{font-size:14px;font-weight:500;line-height:1.3;margin:0 0 4px;letter-spacing:0}
.timeline-entry time{font-size:11px;color:#7b8878}
.timeline-entry .entry-score{font-size:10px;white-space:nowrap;background:#f0f3ea;padding:5px 7px;border-radius:8px;font-weight:400}
.timeline-entry .entry-note{margin:14px 0 5px;font-size:14px;line-height:1.65;color:#50634f;white-space:pre-wrap;overflow-wrap:anywhere}
.timeline-entry .entry-no-note{font-size:12px;margin:12px 0 0;color:#84907f}
.timeline-entry .text-button{font-size:11px;min-height:44px;margin:3px 0 -7px;padding:10px 0;color:#7d7968}
.entries:has(.empty){padding-left:0;border-left:0;margin-left:0}
@media(max-width:360px){.timeline-entry{padding:14px}.entry-top{gap:8px}.entry-meta h3{font-size:13px}.entry-face{width:36px;height:36px}}

/* Step 6: a quiet arch, light and leaf shared by the home and empty diary. */
.calm-motif{display:block;width:120px;height:120px;stroke:none;pointer-events:none}
.home-hero{position:relative;isolation:isolate;overflow:hidden}
.home-hero>div:first-child{position:relative;z-index:1}
.home-motif{position:absolute;right:18px;top:12px;z-index:0;pointer-events:none;opacity:.65}
.home-motif .calm-motif{width:160px;height:160px}
.empty>.calm-motif{width:92px;height:92px;margin:0 auto 18px}
@media(max-width:600px){.home-motif{right:-14px;top:1px;opacity:.48}.home-motif .calm-motif{width:110px;height:110px}}