@font-face{font-family:"Geist";src:url("fonts/geist-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/geist-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/geist-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/geist-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}


:root{--serif:'Instrument Serif',serif;--yel:#fadb4a;--yel2:#fbe56f;--lil:#d3c6fa;--lil2:#e6defc;--ink:#17160a;--olive:#1d1c0b;--mut:#77756a;--pur:#6a3fe6;--grn:#2fa66a;--line:#00000012;--r:22px}
*{box-sizing:border-box}
html,body{height:100%}body{margin:0;background:#fffdf7;color:var(--ink);font:15px/1.42 Geist,-apple-system,"SF Pro Text",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible{outline:3px solid #17160a;outline-offset:2px}





.app{container-type:inline-size;position:relative;height:100vh;height:100dvh;display:flex;background:#fffdf7;overflow:hidden}
/* grain over everything */
.app:after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.9;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .62 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* liquid glass */
.glass{background:linear-gradient(135deg,#ffffff8c,#ffffff33);backdrop-filter:blur(18px) saturate(1.9) brightness(1.04);-webkit-backdrop-filter:blur(18px) saturate(1.9);border:1px solid #ffffffa6;box-shadow:inset 0 1.5px 0 #fffdf8,inset 0 -1.5px 1px #ffffff55,inset 1px 0 0 #ffffff55,0 10px 28px #3a2a0a26}
.glass.dark{background:linear-gradient(135deg,#34321bd9,#1d1c0bd9);border-color:#ffffff30;color:#fffdf8;box-shadow:inset 0 1px 0 #ffffff45,0 12px 30px #0006}
/* sidebar */
.side{width:230px;flex:none;padding:22px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:#fffdf7;position:relative;z-index:2}
.brand{display:flex;gap:10px;align-items:center;font:400 30px var(--serif);padding:6px 12px 20px}.mark{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fffdf8 0 8%,transparent 14%),conic-gradient(from 20deg,var(--yel),var(--lil),var(--yel))}
.nav{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:99px;font-size:16px;font-weight:500;text-align:left;width:100%}
.nav svg,.tb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav[aria-current=page]{background:#ebe9e1}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px 12px;font-weight:500}.av{width:34px;height:34px;border-radius:50%;background:#17160a;color:var(--yel);display:grid;place-items:center;font-size:12px;font-weight:700}
.main{flex:1;min-width:0;overflow:auto;position:relative}
.tabbar{display:none}
/* hero */
.hero{position:relative;padding:34px 34px 30px;overflow:hidden;background:radial-gradient(90% 130% at 18% -20%,var(--yel) 0,#fbe27c 36%,transparent 70%),radial-gradient(80% 120% at 100% 10%,#c6b2fb 0,#dacffb 45%,transparent 80%),#f5efd4;min-height:230px}
/* Faded royalty-free backdrop: an Aura-style wash behind the hero, never a picture. */
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:70% 40%;opacity:.14;mix-blend-mode:multiply;filter:saturate(.62) brightness(1.04) contrast(.86);-webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.9) 0%,transparent 58%);mask-image:linear-gradient(105deg,rgba(0,0,0,.9) 0%,transparent 58%);animation:bgdrift 42s ease-in-out infinite alternate;pointer-events:none}
@keyframes bgdrift{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(-14px)}}
.hero[data-bg="city"] .bg{background-image:url(assets/urban-vintage.jpg)}
.hero[data-bg="fog"] .bg{background-image:url(assets/fog-calm.jpg)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .ph{position:absolute;right:30px;top:24px;width:150px;height:190px;border-radius:80px 80px 24px 24px;background:linear-gradient(#fbe27c,#d3c6fa);box-shadow:0 14px 34px #4a380a40;border:3px solid #ffffffb0}
.hero h1{position:relative;font:400 64px/.98 var(--serif);letter-spacing:-.015em;margin:6px 0 12px;max-width:620px}
.hero p{position:relative;margin:0 0 18px;max-width:470px;font-size:17px;color:#3b3818}
.chips{position:relative;display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;font-weight:600;font-size:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px #2fa66a30}.dot.y{background:#e6a100;box-shadow:0 0 0 3px #e6a10033}
.wrap{padding:22px 34px 120px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.col{display:grid;gap:18px;min-width:0}
h2{font:400 32px/1.05 var(--serif);letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--mut);margin:0 0 14px;font-size:14px}
.blk{border-radius:var(--r);padding:22px}.y{background:var(--yel2)}.l{background:var(--lil)}.w{background:#fffdf8;border:1px solid var(--line);box-shadow:0 1px 2px #0000000a}.o{background:var(--olive);color:#f4f0d8}
.l h2,.y h2{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
.stat{background:#ffffffb5;border-radius:16px;padding:12px}.stat b{display:block;font:400 46px/1 var(--serif)}.stat span{font-size:12.5px;color:#4b4825;display:block;margin-top:5px;line-height:1.25}
.stat.neg b{color:#b4361e}
/* paths */
.opt{display:flex;gap:12px;width:100%;text-align:left;background:#fffffff0;border-radius:18px;padding:14px;margin-bottom:8px;border:2px solid transparent;transition:.2s}
.opt[aria-pressed=true]{border-color:var(--pur);box-shadow:0 8px 22px #6a3fe633;transform:translateY(-1px)}
.rad{width:26px;height:26px;border-radius:50%;border:2px solid #b8b3a6;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.opt[aria-pressed=true] .rad{background:var(--pur);border-color:var(--pur);color:#fffdf8}
.opt b{display:block;font-size:17px;font-weight:600}.opt span{color:var(--mut);font-size:14px;display:block}
.opt .tag{display:inline-block;margin-top:7px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:#efecff;color:#4d2fb8}
.opt.c{opacity:.88}
/* week */
.week{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.day{background:#f6f3ea;border-radius:14px;padding:8px 6px;min-height:128px;font-size:12px}
.day b{display:block;font-size:11px;font-weight:600;color:var(--mut);margin-bottom:6px;text-align:center}
.ev{border-radius:9px;padding:6px;margin-bottom:5px;font-size:11.5px;line-height:1.2;font-weight:500;animation:pop .35s both}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.ev.rel{background:var(--yel)}.ev.jor{background:var(--lil)}.ev.mtg{background:#e5e1d4;color:#4f4c40}.ev.due{background:#fffdf8;border:1.5px dashed #c24a2d;color:#a33a20;font-weight:600}
.leg{display:flex;gap:14px;font-size:12px;color:var(--mut);margin-top:10px;flex-wrap:wrap}.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* hours */
.hrs{display:flex;gap:6px;margin:12px 0 10px}.hrs i{flex:1;height:34px;border-radius:9px;background:#ffffff14;border:1.5px dashed #ffffff40;transition:.3s}.hrs i.rel{background:var(--yel);border:0}.hrs i.jor{background:var(--lil);border:0}
.o .big{font:400 56px/1 var(--serif)}.o .big small{font-size:16px;font-weight:500;color:#cbc7a8;letter-spacing:0;margin-left:4px}
.o p{margin:8px 0 0;color:#d9d5b6;font-size:14px}
/* chips as in Bee */
.act{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{color:var(--ink);display:inline-flex;align-items:center;gap:8px;background:#fffdf8;border:1px solid #00000014;border-radius:99px;padding:9px 14px;font-weight:600;font-size:14px;box-shadow:0 1px 2px #0001}
.chip svg{width:18px;height:18px;stroke:var(--pur);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chip.on{background:var(--ink);color:#fffdf8!important;border-color:var(--ink)}.chip.on svg{stroke:#fffdf8}
.sheet{margin-top:14px;background:#fffdf8;border-radius:18px;padding:16px;animation:pop .3s both}
.sheet label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:10px 0 4px}.sheet .f{background:#f6f3ea;border-radius:12px;padding:10px 12px;font-size:14.5px}
.go{display:inline-block;margin-top:14px;padding:12px 20px;border-radius:99px;background:var(--ink);color:#fffdf8;font-weight:600}
.fine{font-size:12.5px;color:var(--mut);margin:10px 0 0}
/* log */
.log{list-style:none;margin:10px 0 0;padding:0}.log li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}.log li:first-child{border:0}
.ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}.ic svg{width:18px;height:18px;stroke:#2a2606;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tg{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.tg.ok{background:#dff3e8;color:#17714a}.tg.need{background:var(--yel);color:#4a3a00}.tg.draft{background:var(--lil2);color:#4d2fb8}
/* grow / reconcile */
.goal{display:flex;gap:14px;align-items:center;padding:14px;background:#fffdf8;border-radius:18px;margin-bottom:8px}.goal input{flex:1;min-width:0;font:400 24px var(--serif);border:0;background:none;color:var(--ink)}
.ring{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700}
.bar{height:8px;border-radius:9px;background:#0000000f;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--pur);border-radius:9px}
.pair{display:grid;gap:8px}.card{background:#fffdf8;border-radius:16px;padding:14px;font-weight:500}.card small{display:block;color:var(--mut);font-weight:400;margin-top:2px}
.seg{display:inline-flex;padding:4px;border-radius:99px;gap:4px;margin:14px 0 0}.seg button{padding:8px 16px;border-radius:99px;font-weight:600;font-size:14px}.seg button[aria-pressed=true]{background:var(--ink);color:#fffdf8}
.rhero{background:var(--lil);}
.rhero:before{background:none}
.toast{position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:35;padding:12px 18px;border-radius:99px;font-weight:600;font-size:14px;display:flex;gap:9px;align-items:center;transition:.35s;white-space:nowrap}
.toast.hide{opacity:0;translate:-50% 20px}
/* phone */
@container (max-width:760px){.hero h1{font-size:46px}
 .side{display:none}.hero{padding:calc(env(safe-area-inset-top) + 18px) 20px 24px;min-height:0}.hero p{font-size:15px}.hero .ph{display:none}
 .wrap{grid-template-columns:minmax(0,1fr);padding:16px 14px 150px}
 .tabbar{display:flex;position:absolute;left:14px;right:14px;bottom:20px;z-index:35;padding:6px;border-radius:99px;justify-content:space-around}
 .tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 6px;border-radius:99px;font-size:11px;font-weight:600;color:#4b4825}.tb[aria-current=page]{background:#ffffffb0;color:var(--ink);box-shadow:inset 0 1px 0 #fffdf8,0 2px 8px #0002}
 .toast{bottom:104px}.hide-m{display:none}.stat b{font-size:28px}.week{gap:4px}.day{padding:6px 3px}.ev{font-size:10.5px;padding:5px 4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

:root{--done:#2fa66a;--need:#f0892a;--wait:#9b7fe6;--later:#cdc6b2}
/* faded, slowly drifting photography for depth */

@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,1.5%)}}
.hero .row{position:relative;display:flex;gap:28px;align-items:center;justify-content:space-between}
.hero .txt{min-width:0;flex:1}
/* glass sync pill */
.sync{position:absolute;top:18px;right:22px;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:99px;font-size:13px;font-weight:600}
.sync .band{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fffdf8 0 9%,transparent 15%),conic-gradient(from 30deg,#fadb4a,#d3c6fa,#fadb4a);box-shadow:inset 0 0 0 1px #fff8}
.sync .live{width:7px;height:7px;border-radius:50%;background:var(--done);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #2fa66a66}70%{box-shadow:0 0 0 8px #2fa66a00}100%{box-shadow:0 0 0 0 #2fa66a00}}
/* ring */
.ringcard{flex:none;display:flex;gap:18px;align-items:center;padding:16px 18px;border-radius:26px;margin-top:26px}
.ring{position:relative;width:150px;height:150px;flex:none}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1),stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.ring .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1}
.ring .ctr b{font:400 46px/1 var(--serif);display:block}.ring .ctr span{font-size:11.5px;color:#4b4825;font-weight:600}
.legend{display:grid;gap:4px;min-width:186px}
.lg{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:12px;font-size:13.5px;font-weight:500;text-align:left;width:100%}
.lg i{width:10px;height:10px;border-radius:50%;flex:none}.lg b{margin-left:auto;font:400 20px/1 var(--serif)}
.lg[aria-pressed=true]{background:#ffffffb8;box-shadow:inset 0 1px 0 #fffdf8}
/* activity */
.item{display:flex;gap:12px;width:100%;text-align:left;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}.item:first-of-type{border:0}
.item .sd{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px}
.item .t{font-weight:600;font-size:14.5px;line-height:1.3}.item .s{font-size:12.5px;color:var(--mut);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.item .go2{margin-left:auto;font-size:12px;color:var(--mut);white-space:nowrap;align-self:center}
.who{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px}
.who.me{background:var(--yel);color:#3d3000}.who.them{background:var(--lil);color:#3a2580}.who.sys{background:#ece8dc;color:#5e5b4f}
.more{font-size:13px;color:var(--mut);margin-top:6px}
/* models */
.models{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.mdl{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:5px 10px;border-radius:99px;background:#ffffffb0}.mdl b{font-weight:700}
.mdl.agree{background:#dff3e8;color:#17714a;font-weight:600}.mdl.split{background:#ffe6cf;color:#8a4300;font-weight:600}
/* hive at work: action run */
.run{margin-top:14px;background:var(--olive);color:#f4f0d8;border-radius:18px;padding:16px;overflow:hidden;position:relative}
.lane{height:22px;position:relative;font:600 12px ui-monospace,Menlo,monospace;color:#fadb4a99;white-space:nowrap;overflow:hidden;margin-bottom:8px}
.lane span{position:absolute;animation:fly 2.2s linear infinite}
@keyframes fly{from{transform:translateX(-12vw)}to{transform:translateX(60vw)}}
.step{display:flex;gap:10px;align-items:center;font-size:14px;padding:5px 0;color:#bdb99c;transition:.3s}.step.ok{color:#f4f0d8}.step .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid #ffffff40;display:grid;place-items:center;font-size:11px;flex:none}.step.ok .ck{background:#1f7a4c;border-color:#1f7a4c;color:#fffdf8}
.step.cur .ck{border-color:var(--yel);animation:pulse 1s infinite}
.result{margin-top:14px;background:#fffdf8;border-radius:18px;padding:16px;animation:pop .4s both;border:1px solid #00000014}
.result .rt{font:400 24px/1.1 var(--serif)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin-top:10px}.kv span{color:var(--mut)}
/* receipt sheet */
.scrim{position:absolute;inset:0;z-index:36;background:#17160a55;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.rc{width:min(520px,100%);max-height:92%;overflow:auto;background:#fffdf7;border-radius:26px;padding:24px;box-shadow:0 30px 70px #0005;animation:pop .3s both}
.rc h3{font:400 30px/1.05 var(--serif);margin:6px 0 10px}
.quote{font:400 22px/1.25 var(--serif);font-style:italic;background:var(--yel2);border-radius:16px;padding:14px 16px;margin:12px 0}
.quote.them{background:var(--lil)}
.sec{font-size:12px;font-weight:700;color:var(--mut);margin:14px 0 6px;letter-spacing:.02em}
.x{float:right;width:34px;height:34px;border-radius:50%;background:#ece8dc;font-size:16px}
/* range control */
.seg2{position:relative;display:inline-flex;padding:4px;border-radius:99px;gap:2px;margin-top:4px}
.seg2 button{padding:8px 18px;border-radius:99px;font-weight:600;font-size:14px}
/* hive grows */
.hex{width:100%;display:block}.hex polygon{transition:fill .4s}
.cellin{animation:grow .5s both}
@keyframes grow{from{opacity:0;transform:scale(.4)}}
.rule{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.rule>div{border-radius:16px;padding:14px;font-size:14px}.rule b{display:block;margin-bottom:4px;font-size:15px}
.count{font:400 64px/1 var(--serif);position:relative}.count s{opacity:.35;font-size:40px;margin-right:10px}

/* inline-icon sentence */
.ii{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink);white-space:nowrap}.ii svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* daily question faces */
.faces{display:flex;justify-content:space-between;gap:6px;margin:14px 0 12px}
.face{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;transition:.25s;filter:saturate(.85)}
.face svg{width:26px;height:26px;stroke:#2a2410;fill:none;stroke-width:1.8;stroke-linecap:round}
.face[aria-pressed=true]{transform:scale(1.14);filter:none;box-shadow:0 0 0 3px #fffdf8,0 0 0 5px var(--ink)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}.tg2{padding:6px 12px;border-radius:99px;border:1px solid #00000018;font-size:13px;font-weight:500;background:#fffdf8}.tg2[aria-pressed=true]{background:var(--ink);color:#fffdf8}
/* finance-style dark toggle + wave */
.seg2 button[aria-pressed=true]{background:var(--ink)!important;color:#fffdf8}
.wave{width:100%;display:block;margin-top:12px}

/* section labels + layout */
.lbl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.09em;color:#5a5640;margin-bottom:8px;text-transform:uppercase}.lbl i{width:8px;height:8px;border-radius:50%;flex:none}
.o .lbl{color:#cbc7a8}.l .lbl{color:#4a3f78}
.span{grid-column:1/-1}.sticky{position:sticky;top:18px}
.note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mut);padding:4px 2px}
@container (max-width:760px){.sticky{position:static}
 .hero .row{flex-direction:column;align-items:stretch;gap:0}.ringcard{margin-top:16px;padding:14px}.ring{width:122px;height:122px}.ring .ctr b{font-size:38px}.legend{min-width:0;flex:1}
 .sync{position:relative;top:auto;right:auto;margin-bottom:12px}.rule{grid-template-columns:1fr}.count{font-size:48px}
}

.live .wavebars{display:flex;gap:3px;align-items:center;height:34px;margin:6px 0 10px}
.live .wavebars i{flex:1;background:var(--yel);border-radius:3px;height:30%;opacity:.8;animation:wv 1.1s ease-in-out infinite}
}
.said{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.typed{font:400 26px/1.2 var(--serif);color:#fffdf8}
.caret{display:inline-block;width:2px;height:22px;background:var(--yel);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.ghost{opacity:.35;filter:grayscale(.6);pointer-events:none}
.pop{animation:pop .5s both}.pop2{animation:pop .5s .15s both}
.via{font-size:12px;color:#17714a;font-weight:600;margin-top:3px}
.sugg{background:#fffdf7;border:1.5px dashed #00000025;border-radius:18px;padding:14px;margin-top:4px}
.fkm{display:none}
@container (max-width:760px){
 .wrap{padding:16px 16px 140px;gap:16px}.col{gap:16px}
 .blk{padding:18px 16px;border-radius:24px}
 .hero{padding:calc(env(safe-area-inset-top) + 18px) 20px 22px}.hero h1{font-size:40px;line-height:1}.hero p{font-size:16px;line-height:1.45}
 h2{font-size:28px}.sub{font-size:15px}.fine{font-size:13px}
 .lg{min-height:40px;font-size:14px}
 .chip{min-height:44px;padding:10px 16px;font-size:15px}.go{min-height:50px;width:100%;text-align:center;font-size:16px}
 .opt{padding:14px 12px;border-radius:18px}.opt b{font-size:17px}.opt span{font-size:15px}
 .blk .blk.w{margin-left:-6px;margin-right:-6px;padding:14px 12px!important}
 .week{grid-template-columns:1fr!important;gap:6px}.hide-m{display:flex!important}
 .day{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px}.day b{width:72px;flex:none;text-align:left;margin:0;font-size:13px}
 .ev{margin:0;font-size:14px;padding:7px 10px}.day .ev+.ev{margin-left:0}
 .fkd{display:none}.fkm{display:block}
 .stat{padding:12px 10px}.stat span{font-size:12.5px}
 .item{min-height:56px}.item .t{font-size:15px}
 .scrim{align-items:flex-end;padding:0}.rc{width:100%;max-height:90%;border-radius:28px 28px 0 0;padding:14px 20px 40px}.rc:before{content:"";display:block;width:38px;height:5px;border-radius:9px;background:#0002;margin:0 auto 14px}
 .rule{grid-template-columns:1fr}.note{font-size:14px}
 .typed{font-size:24px}
}

.ringcard{margin-top:18px;padding:8px 14px 8px 8px;border-radius:99px;gap:14px;display:inline-flex;flex-wrap:wrap;max-width:100%}
.ring{width:54px;height:54px}.ring .ctr b{font-size:26px}.ring .ctr span{display:none}
.legend{display:flex;flex-wrap:wrap;gap:2px 4px;min-width:0;align-items:center}
.lg{width:auto;padding:5px 10px;gap:7px;font-size:13px}.lg b{font-size:17px;margin-left:2px}
.legend .more{display:none}
@container (max-width:760px){.ringcard{border-radius:26px;display:flex;padding:10px 12px;margin-top:14px}.legend{flex:1}.lg{min-height:36px}}
@container (max-width:760px){.legend{display:grid;grid-template-columns:1fr 1fr;gap:0}.lg{font-size:12.5px;padding:4px 6px;min-height:32px;white-space:nowrap}.lg b{font-size:16px}.ring{width:50px;height:50px}.ringcard{gap:8px}}

/* app chrome: mode switch, settings, live inputs */
.top{position:absolute;top:18px;right:22px;z-index:4;display:flex;gap:8px;align-items:center}
.top .sync{position:static}
.modes{display:inline-flex;padding:3px;border-radius:99px;gap:2px}.modes button{padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600}.modes button[aria-pressed=true]{background:var(--ink);color:#fffdf8}
.gear{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.gear svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8}
.fld{display:block;width:100%;font:15px Geist,sans-serif;padding:10px 12px;border-radius:12px;border:1px solid #00000018;background:#fffdf8;color:var(--ink)}
textarea.fld{min-height:110px;resize:vertical;line-height:1.4}
.form label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:12px 0 4px}
.err{background:#ffe6cf;color:#8a4300;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:10px}
.okmsg{background:#dff3e8;color:#17714a;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:10px}
.pick{display:flex;gap:6px;flex-wrap:wrap}.pick button{padding:7px 12px;border-radius:99px;border:1px solid #00000018;background:#ffffffc0;font-size:13.5px;font-weight:600}.pick button[aria-pressed=true]{background:var(--ink);color:#fffdf8;border-color:var(--ink)}
.muted{color:var(--mut)}.small{font-size:13px}
.spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rot .8s linear infinite;vertical-align:-1px;margin-right:6px}@keyframes rot{to{transform:rotate(360deg)}}
.rows .card{margin-bottom:8px;background:#f6f3ea}
@container (max-width:760px){.top{position:relative;top:auto;right:auto;margin-bottom:12px;flex-wrap:wrap}}
.goal input{width:100%}

.quiet .ev,.quiet .pop,.quiet .pop2,.quiet .cellin,.quiet .sheet,.quiet .result,.quiet .rc,.quiet .scrim{animation:none!important}
.logo{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 8px #6a3fe633,inset 0 0 0 1px #fff6;flex:none}
.brand .mark{display:none}.wm{font:400 30px/1 var(--serif);letter-spacing:-.01em}
.mbrand{display:none;align-items:center;gap:8px}
@container (max-width:760px){.mbrand{display:flex;width:100%;margin-bottom:2px}.mbrand .logo{width:28px;height:28px}.mbrand .wm{font-size:26px}}

/* Desktop: each view gets its own color world and the hero sits as an inset card. Phone layout is unchanged. */

@container (min-width:761px){
 .side{background:#f6f2e4;border-right:1px solid #00000010}
 .main{padding:16px 16px 0}
 .hero{border-radius:30px;box-shadow:0 1px 0 #ffffff80 inset,0 10px 40px #2a240612}
 .wrap{padding-left:18px;padding-right:18px}
 
 .nav[aria-current=page]{background:var(--tabtint);box-shadow:inset 0 1px 0 #fff8}
 .nav[aria-current=page] svg{stroke:var(--tabink)}
}
.app{--tabtint:#f3e4a0;--tabink:#7a5c00}
.app[data-tab=compass]{--tabtint:#d6ebcd;--tabink:#2f6b3f}
.app[data-tab=rec]{--tabtint:#d4e6f7;--tabink:#1f5f8f}
@container (min-width:761px){
 .app[data-tab=compass] .hero{background:radial-gradient(90% 130% at 15% -20%,#bfe2ae 0,#d2eac6 36%,transparent 70%),radial-gradient(80% 120% at 100% 10%,#9ccfd8 0,#c5e2e6 45%,transparent 80%),#eef2e2}
 .app[data-tab=compass] 
 .app[data-tab=rec] .hero{background:radial-gradient(90% 130% at 15% -20%,#bfe0f5 0,#d3e9f7 36%,transparent 70%),radial-gradient(80% 120% at 100% 10%,#9ec9ec 0,#c4def2 45%,transparent 80%),#eef4f8}
 .app[data-tab=rec] 
}
.wm i{font-style:normal;color:#b8ab6a;margin:0 1px}.wm b{font-weight:400;background:linear-gradient(90deg,#c99a06,#8a6ad8);-webkit-background-clip:text;background-clip:text;color:transparent}
.app[data-tab=compass] .sticky{position:static}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@container (min-width:761px){
 .reveal .hero{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
 .reveal .wrap>*>.blk,.reveal .wrap>.blk,.reveal .wrap>.span{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
 .reveal .wrap>.col:nth-child(1)>.blk:nth-child(1){animation-delay:.08s}.reveal .wrap>.col:nth-child(1)>.blk:nth-child(2){animation-delay:.16s}.reveal .wrap>.col:nth-child(1)>.blk:nth-child(3){animation-delay:.24s}
 .reveal .wrap>.col:nth-child(2)>.blk:nth-child(1){animation-delay:.12s}.reveal .wrap>.col:nth-child(2)>.blk:nth-child(2){animation-delay:.2s}.reveal .wrap>.span{animation-delay:.3s}
}
@media (prefers-reduced-motion:reduce){.reveal *{animation:none!important}.blk:hover{transform:none!important}}
@container (max-width:760px){.mbrand .logo{display:none}}

/* ===== Design audit pass ===== */
/* 5. Paper grain gradient behind every header; the CSS gradient stays as the fallback. */
.grainbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.grainbg canvas{width:100%!important;height:100%!important;display:block}
.hero canvas[data-swarm]{z-index:1}
/* 1. Labels: sentence case, no tracking; only "needs you" keeps one. Dark cards get a quiet kicker. */
.lbl{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.kicker{font-size:13px;font-weight:500;color:#cbc7a8;margin-bottom:8px}
.sec{text-transform:none;letter-spacing:0;font-size:13px}
/* 3. Contrast: each card color carries its own tinted secondary text (>= 4.5:1). */
.y{--mut:#5c5418}.y .sub,.y .fine,.y .small{color:#5c5418!important}
.l{--mut:#463a73}.l .sub,.l .fine{color:#463a73!important}
/* 2. No cards inside cards: inner surfaces become rows and bare grids. */
.blk .opt{background:transparent;border:0;border-top:1px solid #00000014;border-radius:0;margin:0;padding:14px 6px;box-shadow:none;transform:none}
.blk .opt:first-of-type{border-top:0}
.blk .opt[aria-pressed=true]{background:#ffffff59;border-radius:16px;border-top-color:transparent}
.blk .opt[aria-pressed=true]+.opt{border-top-color:transparent}
.blk .blk.w{background:transparent!important;border:0!important;box-shadow:none!important;padding:14px 0 0!important;margin-top:8px!important;border-top:1px solid #00000014!important;border-radius:0!important}
.blk .day{background:#ffffff59}
.blk .goal{background:transparent;border-radius:0;border-top:1px solid #00000014;margin:0;padding:14px 4px}
.blk .goal:first-of-type{border-top:0}
.blk .card .card{background:transparent!important;border-radius:0;padding:4px 0}
.blk .card .pair{gap:10px}
/* 4. Purple means "your choice" only: Compass goals go sage, Reconcile proposals go blue. */
.app[data-tab=compass] .blk.l{background:#d6ebcd}.app[data-tab=compass] .blk.l{--mut:#2f5a35}.app[data-tab=compass] .blk.l .sub{color:#2f5a35!important}
.app[data-tab=rec] .blk.l{background:#cfe3f4}.app[data-tab=rec] .blk.l .sub{color:#1f4d70!important}
/* 8. Numbers in Geist with tabular figures; the serif stays for headlines. */
.stat b,.o .big,.ring .ctr b,.lg b,.count{font-family:Geist,sans-serif!important;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.stat b{font-size:38px}.o .big{font-size:46px}.lg b{font-size:15px}.ring .ctr b{font-size:22px}
.o .big small,.count span{font-family:Geist,sans-serif;font-weight:500;letter-spacing:0}
/* 9. Sync pill uses the a· icon. */

/* 6. Fluted glass on the phone tab bar and the desktop mode switch. */

/* 7. Desktop: compact hero so the decision sits above the fold. */
@container (min-width:761px){.hero{min-height:0!important;padding-bottom:22px}.hero h1{font-size:54px}.ringcard{margin-top:12px}}
/* Impeccable fixes: static live dot, tinted labels on yellow, darker secondary text. */
.sync .live{animation:none!important;box-shadow:none}
:root{--mut:#625f54}
.y .lbl{color:#5c4a00}

/* Hallmark fixes */
html,body{overflow-x:clip}
.ev.mtg{color:#4f4c40}
.chip{white-space:nowrap}
.lg{min-height:32px}
.step.ok .ck{background:#1f7a4c;border-color:#1f7a4c}
.result{border-left:0;border:1px solid #00000014}
.blk .card .card{border-left:0;padding:4px 0}
h1,h2{text-wrap:balance}.stat b,.count,.count s{font-variant-numeric:tabular-nums}
button:focus-visible{outline:3px solid #17160a;outline-offset:2px}
/* Two-tone focus ring: visible on light and dark cards alike. */
button:focus-visible{outline:2px solid #17160a;outline-offset:2px;box-shadow:0 0 0 5px #fadb4a}
button:active:not(:disabled){transform:scale(.98)}

/* Fork timeline: one 9-to-5 track per day; block length is hours. */
.verdict{font-size:15px;font-weight:600;margin:0 0 10px;color:#2c2357}
.tl{display:grid;gap:8px}
.tl-axis,.tl-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px}
.tl-axis div{display:flex;justify-content:space-between;font-size:11px;color:#463a73}.tl-axis b{font-weight:500}
.tl-row>span{font-size:13px;font-weight:600}
.tl-track{position:relative;height:30px;border-radius:9px;background:#fffdf880;overflow:hidden}
.tl-track i{position:absolute;top:3px;bottom:3px;border-radius:6px;font:600 11.5px/24px Geist;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.tl-goal{background:var(--yel);color:#3d3000}.tl-promise{background:#5b3fc4;color:#fffdf8}.tl-busy{background:#cfc9b8;color:#4f4c40}
.tl-flags{grid-column:2;display:flex;gap:6px;margin-top:-2px}
.tl-due{font:600 11px Geist;font-style:normal;color:#a33a20;border:1.5px dashed #c24a2d;border-radius:99px;padding:1px 8px}.tl-due.p{color:#3d2a8a;border-color:#5b3fc4}
@container (max-width:760px){.tl-axis,.tl-row{grid-template-columns:52px 1fr}}
@container (min-width:761px){.hero .top{position:relative;top:auto;right:auto;justify-content:flex-end;margin:-14px -12px 4px}}