:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #e9e9e6; color: #252820; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.app {
  --bg:#fff8e8; --surface:#fffdf7; --surface-strong:#ffffff; --text:#283024; --muted:#687065;
  --primary:#ee6c32; --primary-dark:#a53e18; --secondary:#88ad36; --accent:#f2bd2e; --soft:#f8e6b7;
  --nav:#fffdf7ee; --focus:#176b43; --image-filter:sepia(.12) saturate(1.1) hue-rotate(350deg);
  position: relative; width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; overflow: hidden;
  background: var(--bg); color: var(--text); isolation: isolate;
}
.app::before { content:""; position:fixed; inset:0; max-width:430px; margin:auto; z-index:-3; background:url("assets/living-spring.jpg") center/cover; opacity:.42; filter:var(--image-filter); }
.app::after { content:""; position:fixed; inset:0; max-width:430px; margin:auto; z-index:-2; background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 34%,transparent),var(--bg) 94%); opacity:.84; }
.ambient { position:absolute; border-radius:50%; filter:blur(55px); opacity:.25; pointer-events:none; z-index:-1; }
.ambient-one { width:220px; height:220px; right:-90px; top:170px; background:var(--accent); animation:drift 9s ease-in-out infinite alternate; }
.ambient-two { width:190px; height:190px; left:-100px; top:520px; background:var(--secondary); animation:drift 12s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(22px,35px) scale(1.12); } }
.topbar { height:72px; padding:12px 16px 8px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.icon-button,.avatar,.bell { border:0; background:color-mix(in srgb,var(--surface-strong) 82%,transparent); box-shadow:0 9px 26px #332b1c16,inset 0 0 0 1px #ffffffaa; cursor:pointer; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; }
.icon-button svg,.bell svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.brand { display:flex; align-items:center; gap:9px; line-height:1; }
.brand-mark { width:29px; height:29px; border-radius:50% 48% 52% 45%; display:grid; place-items:center; color:white; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-family:Georgia,serif; font-weight:700; box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 30%,transparent); }
.brand b { display:block; font-size:10px; letter-spacing:.12em; }
.brand small { display:block; margin-top:4px; font:italic 14px Georgia,serif; color:var(--primary-dark); }
.avatar { width:44px; height:44px; padding:0; border-radius:50%; position:relative; }
.avatar span { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; font-size:11px; font-weight:700; background:linear-gradient(145deg,var(--soft),var(--surface)); }
.avatar i,.bell i { position:absolute; width:9px; height:9px; border:2px solid var(--surface); background:var(--secondary); border-radius:50%; right:1px; bottom:2px; }
.content { padding:8px 16px 110px; }
.welcome-row { display:flex; align-items:center; justify-content:space-between; margin:3px 2px 13px; }
.eyebrow,.soft-label { margin:0 0 5px; font-size:10px; letter-spacing:.13em; font-weight:760; color:var(--primary-dark); }
h1 { font-size:23px; line-height:1.12; letter-spacing:-.025em; margin:0; }
.bell { width:39px; height:39px; border-radius:14px; display:grid; place-items:center; position:relative; }
.bell svg { width:19px; }
.bell i { width:8px; height:8px; right:5px; top:5px; bottom:auto; background:var(--primary); }
.hero-card { height:178px; padding:20px; border-radius:27px; display:flex; position:relative; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--surface-strong) 94%,var(--soft)),color-mix(in srgb,var(--soft) 70%,var(--surface))); box-shadow:0 16px 38px color-mix(in srgb,var(--primary-dark) 13%,transparent),inset 0 0 0 1px #ffffffbd; }
.hero-copy { position:relative; z-index:2; }
.hero-copy h2 { font:600 29px/1.02 Georgia,serif; letter-spacing:-.035em; margin:0 0 5px; }
.hero-copy p { font-size:12px; color:var(--muted); margin:0 0 13px; }
.primary-button { border:0; border-radius:13px; padding:10px 14px; background:var(--primary); color:white; font-weight:700; font-size:12px; box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 34%,transparent); cursor:pointer; }
.primary-button span,.text-button span { margin-left:8px; }
.source-orb { position:absolute; width:155px; height:155px; right:-21px; top:7px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff 0 7%,color-mix(in srgb,var(--accent) 76%,white) 18%,var(--primary) 64%,var(--primary-dark)); box-shadow:inset 14px 16px 25px #ffffff7d,inset -15px -18px 30px #4e211c38,0 24px 40px color-mix(in srgb,var(--primary) 33%,transparent); animation:float 4.2s ease-in-out infinite; }
.source-orb::before,.source-orb::after { content:""; position:absolute; border:1px solid #ffffffae; border-radius:50%; inset:17px; transform:rotate(28deg) scaleY(.38); }
.source-orb::after { inset:32px; transform:rotate(-35deg) scaleY(.45); }
.source-orb span { position:absolute; width:42px; height:74px; border-radius:50% 50% 55% 45%; right:50px; top:40px; background:#ffffff5c; filter:blur(2px); transform:rotate(36deg); }
@keyframes float { 50% { transform:translateY(-7px) rotate(2deg); } }
.program-card { margin-top:12px; min-height:172px; display:flex; align-items:center; justify-content:space-between; padding:17px 15px 17px 19px; border-radius:25px; background:color-mix(in srgb,var(--surface) 87%,transparent); box-shadow:0 12px 32px #2b301919,inset 0 0 0 1px #ffffffc4; backdrop-filter:blur(13px); }
.program-copy { min-width:0; flex:1; }
.program-copy h2 { font-size:18px; margin:0 0 4px; }
.program-copy p { font-size:12px; margin:0 0 11px; color:var(--muted); }
.progress { width:130px; height:7px; overflow:hidden; border-radius:10px; background:color-mix(in srgb,var(--text) 11%,transparent); }
.progress span { display:block; height:100%; width:40%; border-radius:inherit; background:linear-gradient(90deg,var(--secondary),var(--accent)); }
.text-button { margin-top:10px; padding:0; border:0; background:none; color:var(--primary-dark); font-size:12px; font-weight:750; cursor:pointer; }
.habit-flower { --turn:0deg; width:142px; height:142px; flex:0 0 142px; position:relative; filter:drop-shadow(0 11px 14px color-mix(in srgb,var(--primary) 18%,transparent)); transform:rotate(var(--turn)); transition:transform .85s cubic-bezier(.2,.8,.2,1); }
.habit-flower::before { content:""; position:absolute; inset:23px; border-radius:50%; border:1px solid color-mix(in srgb,var(--primary) 42%,white); box-shadow:inset 0 0 20px #ffffff8a; }
.petal { --angle:calc(var(--i) * 45deg); position:absolute; width:31px; height:53px; left:55.5px; top:5px; border:0; border-radius:55% 55% 48% 48%; transform-origin:15.5px 66px; transform:rotate(var(--angle)); background:color-mix(in srgb,var(--surface-strong) 86%,var(--soft)); box-shadow:inset 4px 5px 8px #ffffffae,inset -3px -5px 7px #0000000d,0 4px 10px #0000000d; cursor:pointer; transition:filter .2s,background .2s; }
.petal.done { background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 72%,white),var(--primary)); }
.petal:active { filter:brightness(.9); }
.flower-core { position:absolute; inset:42px; border-radius:50%; border:0; display:grid; place-content:center; color:var(--text); background:radial-gradient(circle at 34% 24%,white,var(--soft)); box-shadow:inset 4px 5px 10px #ffffffcc,inset -5px -7px 12px #0000000b,0 7px 16px #00000014; cursor:grab; }
.flower-core b { font-size:17px; line-height:1; }
.flower-core small { font-size:8px; margin-top:3px; color:var(--muted); }
.practice-card { width:100%; min-height:82px; margin-top:12px; border:0; border-radius:22px; padding:12px 14px; display:flex; align-items:center; gap:12px; text-align:left; background:color-mix(in srgb,var(--surface-strong) 90%,transparent); box-shadow:0 10px 28px #27302213,inset 0 0 0 1px #ffffffcf; cursor:pointer; }
.practice-icon { width:50px; height:50px; flex:0 0 50px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(145deg,var(--secondary),color-mix(in srgb,var(--secondary) 65%,var(--accent))); color:white; box-shadow:0 9px 18px color-mix(in srgb,var(--secondary) 28%,transparent); }
.practice-icon svg { width:21px; fill:currentColor; }
.practice-card > span:nth-child(2) { display:grid; gap:2px; flex:1; }
.practice-card small { font-size:9px; font-style:normal; letter-spacing:.09em; color:var(--primary-dark); font-weight:750; }
.practice-card b { font-size:14px; }
.practice-card em { font-size:11px; font-style:normal; color:var(--muted); }
.practice-card > i { font:27px Georgia,serif; color:var(--primary); }
.daily-note { min-height:62px; margin-top:12px; padding:11px 14px; border-radius:20px; display:flex; align-items:center; gap:10px; background:color-mix(in srgb,var(--soft) 64%,var(--surface)); }
.daily-note > span { color:var(--primary); }
.daily-note p { display:grid; flex:1; margin:0; gap:2px; }
.daily-note small { font-size:9px; letter-spacing:.11em; color:var(--primary-dark); }
.daily-note b { font:italic 13px Georgia,serif; }
.daily-note button { border:0; background:none; color:var(--primary-dark); font-size:20px; cursor:pointer; }
.bottom-nav { position:fixed; z-index:8; bottom:max(8px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 16px),414px); height:79px; padding:7px 5px; border-radius:25px; display:flex; background:var(--nav); box-shadow:0 17px 40px #1b201c2c,inset 0 0 0 1px #ffffffbd; backdrop-filter:blur(22px); }
.nav-item { flex:1; min-width:0; border:0; border-radius:19px; display:grid; place-items:center; align-content:center; gap:4px; color:var(--muted); background:transparent; cursor:pointer; }
.nav-item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item span { font-size:9px; }
.nav-item.active { color:var(--primary-dark); background:color-mix(in srgb,var(--soft) 76%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent); }
.scrim { position:fixed; z-index:20; inset:0; max-width:430px; margin:auto; background:#17201966; opacity:0; pointer-events:none; backdrop-filter:blur(7px); transition:opacity .35s; }
.drawer { position:fixed; z-index:21; top:0; bottom:0; left:max(0px,calc(50% - 215px)); width:min(88vw,365px); padding:18px 17px 28px; overflow:auto; transform:translateX(-106%); transition:transform .4s cubic-bezier(.2,.85,.2,1); background:color-mix(in srgb,var(--surface-strong) 92%,transparent); box-shadow:24px 0 60px #18211832; backdrop-filter:blur(28px); border-radius:0 30px 30px 0; }
.menu-open .scrim { opacity:1; pointer-events:auto; }
.menu-open .drawer { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; }
.drawer-progress { padding:15px; border-radius:20px; background:linear-gradient(145deg,var(--soft),color-mix(in srgb,var(--surface) 75%,var(--secondary))); }
.drawer-progress small,.theme-panel p { display:block; font-size:9px; letter-spacing:.12em; color:var(--primary-dark); }
.drawer-progress b { display:block; margin:5px 0 10px; font-size:15px; }
.drawer-progress .progress { width:100%; }
.drawer-nav p { margin:20px 9px 7px; font-size:9px; letter-spacing:.15em; font-weight:750; color:var(--muted); }
.drawer-nav button { width:100%; border:0; border-radius:14px; padding:11px 10px; display:flex; align-items:center; gap:10px; background:transparent; font-weight:650; font-size:13px; text-align:left; cursor:pointer; }
.drawer-nav button:hover { background:var(--soft); }
.drawer-nav button span { width:22px; color:var(--primary-dark); text-align:center; }
.drawer-nav button i { margin-left:auto; font:18px Georgia; color:var(--muted); }
.theme-panel { margin-top:17px; padding:14px; border-radius:18px; background:color-mix(in srgb,var(--soft) 45%,transparent); }
.theme-panel p { margin:0 0 10px; }
.theme-panel b { display:block; margin-top:9px; font-size:11px; }
.theme-dots { display:flex; gap:7px; flex-wrap:wrap; }
.theme-dot { width:24px; height:24px; border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 0 1px #0002; cursor:pointer; }
.theme-dot.active { box-shadow:0 0 0 2px var(--text),0 0 0 4px #fff; }
.toast { position:fixed; z-index:30; left:50%; bottom:103px; transform:translate(-50%,18px); width:max-content; max-width:calc(100% - 40px); padding:10px 15px; border-radius:14px; color:white; background:#263127e9; box-shadow:0 10px 30px #0003; opacity:0; pointer-events:none; transition:.25s; font-size:12px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.app[data-theme="2"]{--bg:#effcf7;--surface:#fafffd;--surface-strong:#fff;--text:#173738;--muted:#587373;--primary:#ef6758;--primary-dark:#9e342e;--secondary:#12a7a2;--accent:#f5c84c;--soft:#c9f0e7;--focus:#145f72;--image-filter:hue-rotate(95deg) saturate(1.3)}
.app[data-theme="3"]{--bg:#fff2f2;--surface:#fffafb;--surface-strong:#fff;--text:#3d2030;--muted:#765d68;--primary:#d93d73;--primary-dark:#8b1644;--secondary:#78a932;--accent:#f59d42;--soft:#f6d4df;--focus:#315b20;--image-filter:hue-rotate(290deg) saturate(1.25)}
.app[data-theme="4"]{--bg:#fff5e9;--surface:#fffcf8;--surface-strong:#fff;--text:#313329;--muted:#6b6c60;--primary:#ec7d58;--primary-dark:#9d442d;--secondary:#547f55;--accent:#f2bd72;--soft:#f6ddc7;--focus:#315c43;--image-filter:sepia(.15) saturate(1.12)}
.app[data-theme="5"]{--bg:#f3f5ff;--surface:#fbfbff;--surface-strong:#fff;--text:#252b4a;--muted:#666c87;--primary:#5c64bd;--primary-dark:#343a88;--secondary:#ee9654;--accent:#f1c05f;--soft:#dfe1fa;--focus:#2c5d7d;--image-filter:hue-rotate(180deg) saturate(1.1)}
.app[data-theme="6"]{--bg:#fff1ee;--surface:#fffaf9;--surface-strong:#fff;--text:#40252a;--muted:#795e61;--primary:#b72f4d;--primary-dark:#77172d;--secondary:#4c9a79;--accent:#f19a68;--soft:#f6d2d5;--focus:#246548;--image-filter:hue-rotate(300deg) saturate(1.35)}
.app[data-theme="7"]{--bg:#f8f1ff;--surface:#fdfaff;--surface-strong:#fff;--text:#382844;--muted:#75647d;--primary:#9c58b5;--primary-dark:#643377;--secondary:#36aaa3;--accent:#edb55d;--soft:#ead7f3;--focus:#176a66;--image-filter:hue-rotate(215deg) saturate(1.15)}
.app[data-theme="8"]{--bg:#eef9ff;--surface:#f9fdff;--surface-strong:#fff;--text:#183848;--muted:#5d7883;--primary:#ef8c2e;--primary-dark:#9c4e12;--secondary:#2597c3;--accent:#f5c94f;--soft:#d7edf6;--focus:#11637e;--image-filter:hue-rotate(150deg) saturate(1.28)}
.app[data-theme="9"]{--bg:#f6faee;--surface:#fcfdf8;--surface-strong:#fff;--text:#2f3929;--muted:#687461;--primary:#d86879;--primary-dark:#93404e;--secondary:#8dab52;--accent:#edb96d;--soft:#e2eccb;--focus:#405f26;--image-filter:hue-rotate(40deg) saturate(.95)}
.app[data-theme="10"]{--bg:#fff3ed;--surface:#fffaf7;--surface-strong:#fff;--text:#45212d;--muted:#795f67;--primary:#c73265;--primary-dark:#851a3e;--secondary:#e47e4f;--accent:#f0bd64;--soft:#f5d4d8;--focus:#674078;--image-filter:hue-rotate(310deg) saturate(1.2)}

@media (min-width:700px){body{padding:32px}.app{min-height:860px;border-radius:38px;box-shadow:0 30px 80px #17201935}.app::before,.app::after,.bottom-nav,.scrim{top:32px;bottom:32px}.bottom-nav{bottom:42px}.drawer{top:32px;bottom:32px;left:calc(50% - 215px);border-radius:38px 30px 30px 38px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}