:root{--canvas:#f2f2f7;--panel:#fff;--ink:#1c1c1e;--muted:#6e6e73;--tertiary:#8e8e93;--line:#3c3c432e;--accent:#e5724e;--clay:#e5724e;--sage:#5a88a5;--sand:#d6c370;--lilac:#7b4624;--success:#34c759;--safe-top:calc(env(safe-area-inset-top) + 12px);--safe-bottom:max(14px, env(safe-area-inset-bottom));--font-ui:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html{background:var(--canvas);min-width:320px;color:var(--ink);-webkit-text-size-adjust:100%}body{background:var(--canvas);min-height:100dvh;color:var(--ink);font-family:var(--font-ui);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.32}::selection{color:var(--ink);background:#e5724e4d}:focus-visible{outline-offset:3px;outline:3px solid #007aff}.app-shell{background:var(--canvas);min-height:100dvh;overflow-x:clip}.home-screen,.detail-screen{width:min(1080px,100%);min-height:100dvh;padding:var(--safe-top) max(18px, env(safe-area-inset-left)) calc(32px + var(--safe-bottom));margin:0 auto}.hero{grid-template-columns:1fr auto;align-items:start;gap:18px;padding:10px 0;display:grid;position:relative}.hero-title{min-width:0}.hero-date{color:var(--muted);margin:0 0 6px;font-size:.78rem;font-weight:600}.hero h1{letter-spacing:-.062em;margin:0 0 7px -2px;font-size:clamp(3.3rem,15vw,5.1rem);font-weight:750;line-height:.92}.identity{color:var(--muted);margin:0;font-size:.85rem;font-weight:500;line-height:1.35}.live-dot{background:var(--success);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #34c7591f}.live-dot.offline{background:var(--tertiary);box-shadow:none}.avatar-button{width:44px;height:44px;color:var(--ink);background:#e5e5ea;border:0;border-radius:50%;flex:none;place-items:center;padding:3px;font-size:.84rem;font-weight:750;display:grid;overflow:hidden}.avatar-button img{border-radius:inherit;object-fit:cover;width:100%;height:100%}.account-popover{z-index:70;border:.5px solid var(--line);width:min(310px,100vw - 36px);color:var(--ink);-webkit-backdrop-filter:blur(24px)saturate(1.5);backdrop-filter:blur(24px)saturate(1.5);background:#fffffff2;border-radius:18px;padding:18px;animation:.2s ease-out pop;position:absolute;top:62px;right:0;box-shadow:0 18px 55px #00000029}.account-popover strong{overflow-wrap:anywhere;margin:7px 0 17px;font-size:.92rem;font-weight:600;line-height:1.4;display:block}.account-popover button{color:#fff;background:#007aff;border:0;border-radius:12px;width:100%;min-height:44px;font-size:.86rem;font-weight:650}.eyebrow{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.68rem;font-weight:700}.hero-progress{border:.5px solid var(--line);background:#fffffff2;border-radius:20px;grid-column:1/-1;align-items:center;gap:13px;margin-top:9px;padding:13px;display:flex;box-shadow:0 8px 28px #0000000a}.progress-ring{--progress:0deg;background:conic-gradient(var(--accent) var(--progress), #e5e5ea 0);text-align:center;border-radius:50%;flex:0 0 58px;place-content:center;width:58px;height:58px;display:grid;position:relative}.progress-ring:after{content:"";border-radius:inherit;background:#fff;position:absolute;inset:5px}.progress-ring strong,.progress-ring small{z-index:1;display:block;position:relative}.progress-ring strong{font-size:1.1rem;font-weight:750;line-height:1}.progress-ring small{color:var(--muted);margin-top:2px;font-size:.58rem;font-weight:600}.hero-progress>div strong,.hero-progress>div span{display:block}.hero-progress>div strong{margin-bottom:3px;font-size:.96rem;font-weight:680}.hero-progress>div span{color:var(--muted);font-size:.76rem}.section-heading{justify-content:space-between;align-items:flex-end;gap:16px;margin:12px 0 17px;display:flex}.section-heading h2{letter-spacing:-.035em;margin:5px 0 0;font-size:1.65rem;font-weight:720;line-height:1}.section-heading h2 span{color:var(--tertiary);letter-spacing:-.01em;vertical-align:.18em;margin-left:4px;font-size:.92rem;font-weight:600}.text-button{color:#007aff;background:#e5e5ea;border:0;border-radius:999px;align-items:center;gap:6px;min-height:44px;padding:0 14px;font-size:.78rem;font-weight:650;display:flex}.text-button.active{color:#007aff;background:#e5e5ea}.habit-stack{width:100%;max-width:650px;margin-inline:auto;padding-bottom:6px;position:relative}.habit-card{--card-ink:#151515;--card-surface:#ffffff59;--card-check-bg:#151515;--card-check-ink:#fff;inset-inline:0;background:var(--card-bg);height:248px;color:var(--card-ink);cursor:pointer;transform-origin:top;border:.5px solid #ffffff52;border-radius:28px;flex-direction:column;padding:19px 21px 18px;transition:filter .18s,transform .18s;display:flex;position:absolute;top:0;overflow:hidden;box-shadow:0 14px 34px #00000017,inset 0 1px #ffffff4f}.habit-card:active{filter:brightness(.96);transform:scale(.985)}.habit-card.clay{--card-bg:var(--clay)}.habit-card.sage{--card-bg:var(--sage)}.habit-card.sand{--card-bg:var(--sand)}.habit-card.lilac{--card-bg:var(--lilac);--card-ink:#fffaf3;--card-surface:#ffffff24;--card-check-bg:#fffaf3;--card-check-ink:#5f321b}.habit-card.ink{--card-bg:#1c1c1e;--card-ink:#fffaf3;--card-surface:#ffffff1f;--card-check-bg:#fffaf3;--card-check-ink:#1c1c1e}.habit-stack.expanded{gap:15px;display:grid;height:auto!important}.habit-stack.expanded .habit-card{height:auto;min-height:220px;position:relative;box-shadow:0 9px 24px #00000012,inset 0 1px #ffffff40;transform:none!important}.card-top,.card-bottom{z-index:2;justify-content:space-between;align-items:center;gap:14px;display:flex;position:relative}.card-top{font-size:.68rem;font-weight:680}.category{background:var(--card-surface);letter-spacing:.055em;text-transform:uppercase;border-radius:999px;padding:7px 10px}.card-progress{opacity:.72}.habit-card h3{z-index:2;overflow-wrap:anywhere;letter-spacing:-.05em;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:86%;margin:13px 0 0;padding-bottom:.08em;font-size:clamp(2.1rem,8.7vw,3rem);font-weight:720;line-height:1.02;display:-webkit-box;position:relative;overflow:hidden}.habit-stack.expanded .habit-card h3{max-width:82%;margin-top:11px;font-size:clamp(1.7rem,6.7vw,2.2rem)}.card-bottom{flex:none;margin-top:14px;position:relative;bottom:auto;left:auto;right:auto}.card-bottom>div:first-child{align-items:flex-end;gap:7px;display:flex}.card-bottom strong{letter-spacing:-.04em;font-size:1.8rem;font-weight:700;line-height:.8}.card-bottom div>span{opacity:.68;font-size:.67rem;font-weight:600}.card-actions,.expanded-actions{align-items:center;gap:8px;display:flex}.drag-handle{color:currentColor;opacity:.48;cursor:grab;touch-action:none;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.drag-handle:active{background:var(--card-surface);opacity:.8;cursor:grabbing}.open-card,.complete-button,.edit-card{color:currentColor;border-radius:50%;place-items:center;display:grid}.open-card{background:var(--card-surface);width:46px;height:46px}.complete-button{background:0 0;border:2px solid;flex:none;width:46px;height:46px}.complete-button svg{opacity:0;transition:opacity .16s,transform .16s;transform:scale(.62)}.complete-button.done{border-color:var(--card-check-bg);background:var(--card-check-bg);color:var(--card-check-ink)}.complete-button.done svg{opacity:1;transform:scale(1)}.complete-button:active{transform:scale(.9)}.edit-card{background:var(--card-surface);border:0;width:44px;height:44px}.card-week-dots{z-index:2;flex:none;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:auto;padding-top:14px;display:grid;position:relative;bottom:auto;left:auto;right:auto}.card-week-dots span{color:currentColor;opacity:.62;justify-items:center;gap:5px;display:grid}.card-week-dots b{opacity:.8;font-size:.55rem;font-weight:650;line-height:1}.card-week-dots i{background:0 0;border:1.25px solid;border-radius:50%;width:8px;height:8px}.card-week-dots span.completed,.card-week-dots span.today{opacity:1}.card-week-dots span.completed i{background:currentColor}.card-week-dots span.today i{outline-offset:2px;outline:1.25px solid}.card-week-dots span.future{opacity:.38}.card-week-dots span.unavailable{opacity:.2}.add-button{color:#fff;background:#1c1c1e;border:0;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:52px;margin-top:14px;font-size:.88rem;font-weight:650;transition:transform .15s,opacity .15s;display:flex}.add-button:active{opacity:.82;transform:scale(.98)}.empty-state{border:.5px solid var(--line);background:var(--panel);border-radius:24px;max-width:650px;margin-inline:auto;padding:30px 24px;box-shadow:0 10px 34px #0000000c}.empty-state h3{letter-spacing:-.045em;margin:8px 0 7px;font-size:clamp(1.8rem,8vw,2.8rem);font-weight:700;line-height:1}.empty-state>p:last-of-type{max-width:31rem;color:var(--muted);margin:0;font-size:.86rem;line-height:1.5}.empty-state button{color:#fff;background:#007aff;border:0;border-radius:12px;min-height:44px;margin-top:20px;padding:0 16px;font-size:.83rem;font-weight:650}.sheet-backdrop{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000004a;justify-content:center;align-items:flex-end;animation:.2s fade;display:flex;position:fixed;inset:0}.editor-sheet{background:var(--canvas);width:min(100%,560px);max-height:calc(100dvh - 28px);padding:8px 18px calc(20px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;animation:.3s cubic-bezier(.2,.8,.2,1) rise;overflow-y:auto;box-shadow:0 -16px 60px #0003}.sheet-handle{background:#3c3c4352;border-radius:999px;width:36px;height:5px;margin:0 auto 18px}.sheet-title{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;display:flex}.sheet-title h2{letter-spacing:-.04em;margin:5px 0 0;font-size:1.8rem;font-weight:720;line-height:1}.close-button{width:36px;height:36px;color:var(--muted);background:#e5e5ea;border:0;border-radius:50%;place-items:center;display:grid}.editor-sheet label,.editor-sheet legend{color:var(--muted);letter-spacing:.02em;font-size:.72rem;font-weight:650;display:block}.editor-sheet input{border:.5px solid var(--line);width:100%;min-height:54px;color:var(--ink);letter-spacing:-.01em;text-transform:none;background:#fff;border-radius:14px;margin:8px 0 20px;padding:0 15px;font-size:1rem;font-weight:500;box-shadow:0 2px 8px #00000008}.editor-sheet input::placeholder{color:#8e8e93}.editor-sheet fieldset{border:0;margin:0 0 22px;padding:0}.category-field{margin-top:2px!important}.category-options{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.category-option{min-height:40px;color:var(--ink);background:#e5e5ea;border:0;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:580}.category-option.selected{color:#fff;background:#007aff}.legend-note{color:var(--tertiary);margin-left:4px;font-size:.64rem;font-weight:500}.palette-row{gap:14px;margin-top:12px;display:flex}.palette-swatch{border:0;border-radius:50%;width:46px;height:46px;position:relative;box-shadow:inset 0 0 0 .5px #00000024}.palette-swatch.clay{background:var(--clay);color:#151515}.palette-swatch.sage{background:var(--sage);color:#151515}.palette-swatch.sand{background:var(--sand);color:#151515}.palette-swatch.lilac{background:var(--lilac);color:#fff}.palette-swatch.ink{color:#fff;background:#1c1c1e}.palette-swatch.selected:after{content:"✓";border-radius:inherit;border:2px solid;place-items:center;font-size:.8rem;font-weight:800;display:grid;position:absolute;inset:5px}.primary-button{color:#fff;background:#007aff;border:0;border-radius:14px;width:100%;min-height:52px;font-size:.88rem;font-weight:650}.archive-button{color:#ff3b30;background:0 0;border:0;width:100%;min-height:46px;font-size:.82rem;font-weight:600}.toast{z-index:200;right:18px;bottom:calc(12px + env(safe-area-inset-bottom));color:#fff;text-align:center;background:#1c1c1ef2;border-radius:14px;width:min(430px,100% - 36px);margin:auto;padding:14px 18px;font-size:.8rem;font-weight:550;animation:.23s rise;position:fixed;left:18px;box-shadow:0 14px 42px #0005}.detail-theme.clay{--detail-color:var(--clay);--detail-ink:#151515;--detail-action:#151515;--detail-on-action:white}.detail-theme.sage{--detail-color:var(--sage);--detail-ink:#151515;--detail-action:#151515;--detail-on-action:white}.detail-theme.sand{--detail-color:var(--sand);--detail-ink:#151515;--detail-action:#151515;--detail-on-action:white}.detail-theme.lilac{--detail-color:var(--lilac);--detail-ink:#fffaf3;--detail-action:#fffaf3;--detail-on-action:#5f321b}.detail-theme.ink{--detail-color:#1c1c1e;--detail-ink:#fffaf3;--detail-action:#fffaf3;--detail-on-action:#1c1c1e}.detail-screen{flex-direction:column;display:flex}.detail-nav{z-index:20;height:56px;margin:calc(var(--safe-top) * -1) -8px 0;padding:var(--safe-top) 8px 0;-webkit-backdrop-filter:blur(20px)saturate(1.5);backdrop-filter:blur(20px)saturate(1.5);background:#f2f2f7d9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.detail-nav p{color:var(--muted);margin:0;font-size:.76rem;font-weight:650}.detail-nav button,.calendar-head button{color:#007aff;background:#e5e5ea;border:0;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.detail-hero{background:var(--detail-color);min-height:0;color:var(--detail-ink);border-radius:30px;margin-top:18px;padding:25px 22px 21px;box-shadow:0 14px 36px #00000014,inset 0 1px #ffffff3d}.detail-hero .eyebrow{color:currentColor;opacity:.65}.detail-title-row{flex-direction:column;justify-content:space-between;align-items:flex-start;gap:22px;margin-top:15px;display:flex}.detail-title-row>div{min-width:0}.detail-hero h1{overflow-wrap:anywhere;letter-spacing:-.058em;max-width:100%;margin:0;font-size:clamp(3.2rem,16vw,5.6rem);font-weight:740;line-height:.9}.title-check{color:currentColor;background:#ffffff30;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-width:148px;min-height:48px;padding:0 15px;font-weight:650;display:flex}.title-check svg{opacity:.68;border:1.5px solid;border-radius:50%;width:24px;height:24px;padding:4px}.title-check span{white-space:nowrap;font-size:.72rem}.title-check.done{background:var(--detail-action);color:var(--detail-on-action)}.title-check.done svg{opacity:1;border-color:currentColor}.title-check:active{transform:scale(.97)}.detail-stats{border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);border-bottom:1px solid color-mix(in srgb, currentColor 22%, transparent);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:25px;display:grid}.detail-stats>div{min-width:0;padding:15px 11px 14px 0}.detail-stats>div:nth-child(2n){border-left:1px solid color-mix(in srgb, currentColor 22%, transparent);padding-left:15px}.detail-stats>div:nth-child(n+3){border-top:1px solid color-mix(in srgb, currentColor 22%, transparent)}.detail-stats strong,.detail-stats span{display:block}.detail-stats strong{letter-spacing:-.035em;font-size:1.55rem;font-weight:720;line-height:1}.detail-stats span{opacity:.68;margin-top:5px;font-size:.64rem;font-weight:580}.detail-since{opacity:.55;margin:12px 0 0;font-size:.65rem;font-weight:550}.progress-panel{border:.5px solid var(--line);color:var(--ink);background:#fff;border-radius:24px;margin-top:18px;padding:21px 16px 18px;box-shadow:0 10px 32px #0000000c}.calendar-view{padding-top:0}.calendar-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;display:flex}.calendar-head p{letter-spacing:-.035em;margin:0;font-size:1.65rem;font-weight:720;line-height:1}.calendar-head span{color:var(--muted);margin-top:5px;font-size:.78rem;font-weight:550;display:block}.calendar-head>div:last-child{gap:6px;display:flex}.calendar-head button{background:#f2f2f7;width:38px;height:38px}.weekdays,.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(5px,1.8vw,9px);display:grid}.weekdays{margin-bottom:9px}.weekdays span{color:var(--tertiary);text-align:center;font-size:.61rem;font-weight:650}.day-dot{aspect-ratio:1;background:0 0;border:0;border-radius:50%;place-items:center;display:grid;position:relative}.day-dot i{color:var(--muted);font-size:.64rem;font-style:normal;font-weight:550}.day-dot.completed{background:var(--detail-color)}.day-dot.completed i{color:var(--detail-ink);font-weight:700}.day-dot.missed{background:#f2f2f7}.day-dot.missed i{color:var(--muted)}.day-dot.future{box-shadow:inset 0 0 0 1px #c7c7cc}.day-dot.future i{color:var(--tertiary)}.day-dot.unavailable{opacity:.22}.day-dot.today{box-shadow:inset 0 0 0 2px var(--detail-color), 0 0 0 2px white, 0 0 0 3px var(--detail-color)}.day-dot.today i{color:var(--ink);font-weight:750}.day-dot.today.completed i{color:var(--detail-ink)}.legend{border-top:.5px solid var(--line);gap:18px;margin-top:17px;padding-top:14px;display:flex}.legend span{color:var(--muted);align-items:center;gap:6px;font-size:.66rem;font-weight:550;display:flex}.key{border-radius:50%;width:8px;height:8px;display:inline-block}.key.completed{background:var(--detail-color)}.key.missed{background:#e5e5ea}.key.future{box-shadow:inset 0 0 0 1px #c7c7cc}.more-information{border:.5px solid var(--line);color:var(--ink);background:#fff;border-radius:16px;margin-top:18px;overflow:hidden}.more-information summary{cursor:pointer;justify-content:space-between;align-items:center;min-height:54px;padding:0 16px;font-size:.82rem;font-weight:600;list-style:none;display:flex}.more-information summary::-webkit-details-marker{display:none}.more-information summary span{align-items:center;gap:9px;display:flex}.more-information summary>svg{color:var(--tertiary);transition:transform .2s}.more-information[open] summary>svg{transform:rotate(45deg)}.information-list{border-top:.5px solid var(--line);padding:4px 16px 10px}.information-list p{border-bottom:.5px solid var(--line);justify-content:space-between;align-items:center;gap:20px;min-height:42px;margin:0;font-size:.76rem;display:flex}.information-list p:last-child{border-bottom:0}.information-list span{color:var(--muted)}.information-list strong{text-align:right;font-weight:600}@keyframes rise{0%{opacity:0;transform:translateY(22px)}}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(-4px)scale(.98)}}@media (min-width:800px){.home-screen{grid-template-columns:minmax(270px,.72fr) minmax(460px,1.28fr);grid-template-areas:"hero heading""hero stack""add stack";align-content:start;column-gap:clamp(42px,7vw,90px);padding-inline:32px;display:grid}.hero{grid-area:hero;align-self:start;min-height:510px;padding-top:36px;position:sticky;top:24px}.hero h1{font-size:clamp(4.8rem,7vw,6.6rem)}.hero-progress{align-self:end;margin-top:auto}.section-heading{grid-area:heading;margin-top:40px;margin-bottom:18px}.habit-stack{grid-area:stack}.empty-state{grid-area:stack;align-self:start;width:100%}.add-button{grid-area:add;align-self:end;max-width:300px;margin-bottom:6px}.editor-sheet{border-radius:28px;margin-bottom:18px;padding-bottom:20px}.detail-screen{grid-template-columns:minmax(340px,.9fr) minmax(480px,1.1fr);grid-template-areas:"nav nav""hero progress";align-content:center;column-gap:clamp(40px,7vw,90px);padding-inline:32px;display:grid}.detail-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;grid-area:nav;margin:0;padding:0;position:relative}.detail-hero{grid-area:hero;margin-top:24px;padding:30px 28px 23px}.detail-title-row{min-height:0}.detail-hero h1{font-size:clamp(4rem,6.7vw,6rem)}.progress-panel{grid-area:progress;align-self:center;margin-top:24px;padding:26px 28px 24px}.detail-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-stats>div{border-left:1px solid color-mix(in srgb, currentColor 22%, transparent);padding:16px 10px 14px}.detail-stats>div:first-child{border-left:0;padding-left:0}.detail-stats>div:nth-child(n+3){border-top:0}}@media (max-width:799px){input,textarea,select{font-size:16px}.home-screen{padding-bottom:calc(96px + var(--safe-bottom))}.add-button{z-index:60;right:18px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;margin:0;position:fixed;left:18px;box-shadow:0 8px 28px #00000038}.add-button span{display:inline}.detail-screen{padding-bottom:calc(28px + var(--safe-bottom))}}@media (max-width:390px){.habit-card{border-radius:25px;padding:18px 19px 17px}.habit-stack.expanded .habit-card{height:auto;min-height:216px}.habit-card h3{font-size:2.4rem}.habit-stack.expanded .habit-card h3{font-size:1.85rem}.progress-panel{padding-inline:13px}.weekdays,.calendar-grid{gap:5px}.detail-hero h1{font-size:3.35rem}}@media (hover:hover){.habit-card:hover{filter:brightness(1.025)}.text-button:hover,.detail-nav button:hover,.calendar-head button:hover{filter:brightness(.96)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
