:root {
    --ink: #273629;
    --ink-soft: #536052;
    --green-900: #2f7247;
    --green-700: #4e9a60;
    --green-600: #6daf76;
    --green-500: #8bca91;
    --green-300: #b9e4af;
    --green-100: #e8ffe4;
    --paper: #fbfcf7;
    --cream: #f9f4e6;
    --line: rgba(39, 54, 41, .14);
    --red: #ed6153;
    --shadow: 0 24px 80px rgba(48, 83, 47, .13);
    --round-xl: 34px;
    --round-lg: 24px;
    --round-md: 16px;
}

* { box-sizing: border-box; }
*, *::before, *::after { font-family: "Roboto", Arial, sans-serif !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Roboto", Arial, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 86px; padding: 8px max(24px, calc((100vw - 1160px) / 2)); background: rgba(232, 255, 228, .94); border-bottom: 1px solid rgba(78, 154, 96, .2); backdrop-filter: blur(16px); }
.page-daily .site-header, .page-settings .site-header { display: none; }
.brand { position: relative; display: inline-flex; align-items: center; width: 220px; height: 65px; overflow: hidden; }
.brand-image { width: 218px; height: 66px; object-fit: contain; object-position: center; }
.brand-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--green-900); font-family: Fraunces, Georgia, serif; font-size: 28px; font-weight: 700; pointer-events: none; opacity: 0; }
.site-nav { display: flex; align-items: center; gap: 28px; color: var(--green-900); font-size: 14px; font-weight: 600; }
.site-nav a { position: relative; padding: 12px 0; }
.site-nav a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 2px; background: var(--green-700); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-account { padding: 12px 18px; color: #fff; background: var(--green-700); border-radius: 999px; }
.site-nav .nav-account::after { display: none; }
.site-nav .nav-logout { color: var(--ink-soft); }
.menu-toggle { display: none; width: 43px; height: 43px; padding: 10px; background: transparent; border-radius: 50%; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--green-700); border-radius: 2px; }

.eyebrow, .app-kicker, .modal-kicker { margin: 0 0 14px; color: var(--green-700); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; }
em { color: var(--green-700); font-family: Fraunces, Georgia, serif; font-style: normal; font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; padding: 0 23px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button span { font-size: 19px; line-height: 1; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(47, 114, 71, .17); }
.button-primary, .button-green { color: #fff; background: var(--green-700); }
.button-light { color: var(--green-900); background: var(--green-100); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--green-900); font-size: 13px; font-weight: 700; }
.text-link span { font-size: 18px; transition: transform .2s ease; }
.text-link:hover span { transform: translateY(3px); }

.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: 72px; min-height: 690px; padding-top: 74px; padding-bottom: 74px; }
.home-hero::before { position: absolute; top: 7%; right: -7%; width: 430px; height: 430px; background: radial-gradient(circle, rgba(185, 228, 175, .45), rgba(185, 228, 175, 0) 68%); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { max-width: 610px; margin: 0 0 24px; color: var(--ink); font-size: clamp(54px, 7vw, 90px); font-weight: 400; line-height: .95; }
.hero-copy h1 em { display: inline-block; margin-left: 54px; font-family: "Roboto", Arial, sans-serif; font-size: .92em; font-style: italic; font-weight: 400; }
.hero-lede { max-width: 445px; margin-bottom: 32px; color: var(--ink-soft); font-size: 18px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.hero-note { display: flex; align-items: center; gap: 13px; margin-top: 38px; color: var(--ink-soft); font-size: 12px; }
.mini-avatars { display: flex; }
.mini-avatars span { display: grid; width: 27px; height: 27px; margin-left: -5px; place-items: center; color: var(--green-900); background: var(--green-300); border: 2px solid var(--paper); border-radius: 50%; font-size: 12px; }
.mini-avatars span:first-child { margin-left: 0; background: var(--green-700); color: #fff; }
.hero-art { position: relative; min-height: 500px; }
.mascot-frame { position: absolute; top: 44px; left: 54px; z-index: 1; display: grid; width: min(430px, 86%); aspect-ratio: 1 / 1; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #cff5bd 0 20%, #8bca91 57%, #4e9a60 100%); border: 9px solid #fff; border-radius: 50% 46% 50% 44%; box-shadow: 0 24px 70px rgba(45, 111, 67, .25); transform: rotate(5deg); }
.mascot-hero { width: 124%; max-width: none; height: auto; mix-blend-mode: multiply; transform: rotate(-5deg); }
.hero-orbit { position: absolute; border: 1px solid rgba(78, 154, 96, .33); border-radius: 50%; }
.orbit-one { top: 10px; left: -8px; width: 480px; height: 480px; transform: rotate(26deg) scaleY(.37); }
.orbit-two { right: -28px; bottom: -30px; width: 390px; height: 390px; transform: rotate(-27deg) scaleY(.28); }
.hero-sticker { position: absolute; z-index: 2; display: grid; place-items: center; color: var(--green-900); background: var(--green-100); border: 2px solid var(--green-300); border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1.1; text-align: center; transform: rotate(-13deg); }
.sticker-top { top: 4px; right: 24px; width: 94px; height: 94px; }
.sticker-top strong { font-family: Fraunces, Georgia, serif; font-size: 17px; }
.sticker-bottom { right: 4px; bottom: 34px; display: flex; gap: 8px; width: 115px; height: 65px; border-radius: 35px; transform: rotate(9deg); }
.check-mark { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 17px; }

.app-preview-wrap { padding: 80px 0 120px; }
.section-intro { max-width: 500px; margin-bottom: 38px; }
.intro-centered { margin-inline: auto; text-align: center; }
.section-intro h2, .feature-heading h2, .support-copy h2 { margin-bottom: 16px; font-size: clamp(35px, 5vw, 58px); line-height: .99; }
.section-intro h2 span { color: var(--green-700); font-family: Fraunces, Georgia, serif; font-weight: 600; }
.section-intro > p:last-child, .support-copy > p:last-child { color: var(--ink-soft); font-size: 15px; }
.app-preview { position: relative; max-width: 965px; min-height: 530px; margin: auto; padding: 39px 60px 58px; overflow: hidden; background: #fff; border: 1px solid rgba(78, 154, 96, .12); border-radius: 30px; box-shadow: var(--shadow); }
.app-preview::after { position: absolute; right: 30px; bottom: -140px; width: 340px; height: 340px; border: 1px solid rgba(139, 202, 145, .46); border-radius: 50%; content: ""; }
.preview-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 3px solid var(--green-500); }
.preview-logo { display: flex; align-items: center; color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 24px; font-weight: 700; }
.preview-logo img { width: 43px; height: 43px; margin-right: 7px; object-fit: contain; }
.preview-menu { color: var(--green-700); font-size: 24px; }
.preview-tagline { margin: 8px 0 28px 50px; color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 12px; }
.preview-buttons { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.period-button { position: relative; display: flex; min-height: 127px; flex-direction: column; justify-content: center; padding: 22px 29px; color: #fff; border-radius: 23px; transition: transform .2s ease, filter .2s ease; }
.period-button:hover { filter: saturate(1.1); transform: translateY(-3px); }
.period-button span { font-size: clamp(25px, 3vw, 38px); font-weight: 400; letter-spacing: -.035em; }
.period-button small { margin-top: 2px; opacity: .85; font-size: 11px; }
.period-button b { position: absolute; right: 28px; bottom: 26px; font-size: 20px; font-weight: 400; }
.period-day { background: #87cb91; }.period-week { background: #77b680; }.period-month { background: #6ca574; }.period-year { background: #5d8e65; }
.preview-mascot { position: absolute; right: 41px; bottom: -39px; z-index: 2; width: 115px; height: 115px; overflow: hidden; background: var(--green-100); border-radius: 50%; }
.mascot-preview { width: 145px; max-width: none; margin: -10px 0 0 -16px; mix-blend-mode: multiply; }

.feature-section { padding: 20px 0 125px; }
.feature-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 38px; }
.feature-heading h2 { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 305px; padding: 30px; overflow: hidden; border-radius: var(--round-lg); }
.feature-card h3 { max-width: 210px; margin: 35px 0 12px; font-size: 23px; letter-spacing: -.04em; }
.feature-card p { max-width: 250px; margin-bottom: 18px; color: var(--ink-soft); font-size: 13px; }
.feature-card a { color: var(--green-700); font-size: 13px; font-weight: 700; }
.feature-card a span { margin-left: 7px; }
.feature-card-green { background: var(--green-100); }.feature-card-cream { background: var(--cream); }.feature-card-dark { color: #e8ffe4; background: var(--green-900); }
.feature-card-dark p { color: rgba(232, 255, 228, .76); }.feature-card-dark h3 { max-width: 175px; }.feature-card-dark::after { position: absolute; right: -34px; bottom: -65px; width: 175px; height: 175px; border: 1px solid rgba(232,255,228,.35); border-radius: 50%; content: ""; }
.feature-icon { display: grid; width: 43px; height: 43px; place-items: center; color: #fff; background: var(--green-700); border-radius: 13px; font-size: 20px; font-weight: 700; }.feature-card-cream .feature-icon { color: var(--green-700); background: var(--green-300); }
.mascot-card { position: absolute; right: -10px; top: -8px; width: 160px; height: 160px; object-fit: cover; mix-blend-mode: screen; opacity: .9; }

.cta-section { padding-bottom: 120px; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; min-height: 380px; padding: 55px 78px; overflow: hidden; color: #fff; background: var(--green-700); border-radius: var(--round-xl); }
.cta-panel .eyebrow { color: var(--green-100); }.cta-panel h2 { margin-bottom: 27px; font-size: clamp(37px, 5vw, 60px); line-height: .97; }.cta-panel em { color: var(--green-100); }
.cta-mascot-wrap { position: relative; width: 300px; height: 290px; }
.mascot-cta { position: absolute; right: -10px; bottom: -125px; width: 360px; max-width: none; mix-blend-mode: screen; opacity: .95; }
.cta-spark { position: absolute; color: var(--green-100); font-size: 30px; }.spark-one { top: 4px; right: 40px; }.spark-two { bottom: 50px; left: 0; font-size: 20px; }

.site-footer { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 22px; padding: 28px max(24px, calc((100vw - 1160px) / 2)); color: var(--green-900); border-top: 1px solid var(--line); font-size: 12px; }
.footer-brand { display: flex; align-items: center; font-family: Fraunces, Georgia, serif; font-size: 19px; font-weight: 700; }.footer-brand img { width: 35px; height: 35px; margin-right: 7px; object-fit: contain; }.site-footer p { margin: 0; text-align: center; }.footer-links { display: flex; justify-content: flex-end; gap: 20px; font-weight: 600; }

.app-page { padding: 38px 24px 100px; background: linear-gradient(180deg, var(--green-100) 0 115px, #f4f4f5 115px 100%); }
.app-shell { width: min(100%, 880px); margin: 0 auto; background: #fff; border: 1px solid rgba(78, 154, 96, .16); border-radius: 32px; box-shadow: 0 18px 50px rgba(30, 67, 35, .1); }
.app-brand-line { position: relative; display: flex; min-height: 127px; align-items: flex-start; padding: 16px 34px 12px; background: var(--green-100); border-bottom: 7px solid var(--green-500); border-radius: 32px 32px 0 0; }
.app-logo-link { display: block; width: 310px; height: 85px; overflow: hidden; }.app-logo-link img { width: 310px; height: 90px; object-fit: contain; object-position: left center; }
.app-tagline { position: absolute; top: 98px; left: 76px; color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 13px; }
.app-menu { position: absolute; top: 45px; right: 35px; color: var(--green-600); background: transparent; font-size: 30px; line-height: 1; }
.task-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 30px 38px 20px; }.task-toolbar h1, .settings-heading h1 { margin: 0; color: #444; font-family: "Roboto", Arial, sans-serif; font-size: clamp(33px, 4vw, 46px); font-weight: 400; letter-spacing: -.035em; }.app-kicker { margin-bottom: 4px; color: var(--green-700); font-size: 10px; }
.task-actions { display: flex; align-items: center; gap: 12px; }.task-count, .round-action { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; }.task-count { color: #fff; background: var(--red); font-size: 21px; font-weight: 700; }.task-count.is-zero { background: #999b9b; }.round-action { color: #fff; background: var(--green-500); font-size: 30px; line-height: 1; }.round-action:hover { background: var(--green-700); }.round-action.action-menu { font-size: 34px; transform: rotate(90deg); }
.task-progress { height: 8px; margin: 0 38px 13px; overflow: hidden; background: #e9f0e9; border-radius: 999px; }.task-progress span { display: block; height: 100%; background: var(--green-700); border-radius: inherit; transition: width .2s ease; }
.task-sync-note { margin: 0 38px 13px; padding: 10px 13px; color: var(--green-900); background: var(--green-100); border: 1px solid var(--green-300); border-radius: 11px; font-size: 11px; }.task-sync-note a { color: var(--green-700); font-weight: 700; }.task-error-note { color: #9b3b33; background: #fff0ec; border-color: #f3c4bb; }
.task-list { min-height: 265px; }.task-row { position: relative; display: flex; min-height: 62px; align-items: center; padding: 0 34px 0 28px; border-bottom: 3px solid var(--green-300); background: #fff; transition: background .2s ease; }.task-row:first-child { border-top: 1px solid #f2f2f2; }.task-row:hover { background: #fbfffa; }.task-check { width: 38px; flex: 0 0 38px; padding: 0; color: #111; background: transparent; font-size: 26px; text-align: left; }.task-icon-person { font-size: 26px; }.task-icon-spark { font-size: 26px; }.task-divider { width: 3px; height: 39px; margin-right: 18px; background: var(--green-300); }.task-title { color: #4d4d4d; font-size: 23px; }.task-more, .task-delete { margin-left: auto; color: var(--green-600); background: transparent; font-size: 29px; line-height: 1; }.task-delete { display: none; color: var(--red); font-size: 31px; }.task-row.is-complete .task-check { color: var(--green-700); }.task-row.is-complete .task-title { color: #a2a2a2; text-decoration: line-through; }.task-row.is-complete .task-divider { background: var(--green-500); }.task-list.is-editing .task-delete { display: block; }.task-list.is-editing .task-more { display: none; }.task-list.is-editing .task-row { cursor: grab; }.task-list.is-editing .task-row::before { content: "↕"; margin-right: 17px; color: #555; font-size: 20px; }.task-list.is-editing .task-check { display: none; }.task-list.is-editing .task-divider { margin-left: 0; }
.empty-task-state { display: grid; min-height: 350px; place-items: center; align-content: center; padding: 30px; text-align: center; }.empty-task-state[hidden] { display: none; }.empty-icon { display: grid; width: 60px; height: 60px; place-items: center; margin-bottom: 17px; color: var(--green-700); background: var(--green-100); border-radius: 50%; font-size: 25px; }.empty-task-state h2 { margin-bottom: 8px; color: #555; font-size: 34px; font-weight: 400; }.empty-task-state p { max-width: 310px; color: var(--ink-soft); font-size: 13px; }.task-footnote { display: flex; justify-content: center; gap: 10px; padding: 22px; color: #889388; font-size: 11px; }.task-footnote a { color: var(--green-700); font-weight: 700; }
.task-row[data-syncing="true"] { opacity: .62; }.task-row[data-sync-error="true"] { background: #fff5f2; }
.task-reorder-controls { display: none; align-items: center; gap: 3px; margin-left: 10px; }.task-list.is-editing .task-reorder-controls { display: flex; }.task-reorder-controls button { width: 27px; height: 27px; color: var(--green-700); background: var(--green-100); border-radius: 8px; font-size: 16px; }.task-reorder-controls button:hover { color: #fff; background: var(--green-700); }.task-row.is-dragging { opacity: .4; }.task-list.is-editing .task-row { cursor: grab; }
.task-support { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: center; padding-top: 100px; }.support-copy h2 { font-size: clamp(36px, 5vw, 54px); }.support-copy > p:last-child { max-width: 350px; line-height: 1.75; }.task-detail-card { padding: 25px; background: var(--green-100); border: 1px solid var(--green-300); border-radius: 28px; box-shadow: var(--shadow); }.detail-card-head { display: flex; justify-content: space-between; padding-bottom: 18px; color: var(--green-900); border-bottom: 1px solid var(--green-300); font-family: Fraunces, Georgia, serif; font-size: 20px; }.detail-card-head button { color: var(--green-700); background: transparent; font-size: 23px; }.detail-action { display: flex; width: 100%; align-items: center; gap: 17px; padding: 15px 0; color: var(--ink); background: transparent; text-align: left; }.detail-icon { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; color: var(--green-700); background: #fff; border-radius: 12px; font-size: 18px; }.detail-action strong, .detail-action small { display: block; }.detail-action strong { font-size: 14px; }.detail-action small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }.toggle-on { margin-left: auto; padding: 8px 11px; color: #fff; background: var(--green-700); border-radius: 999px; font-size: 10px; }.mini-checklist { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 0 0 10px 54px; color: var(--ink-soft); font-size: 11px; }.mini-checklist span { color: var(--green-700); font-weight: 700; }.mini-checklist .check-empty { color: #888; }.detail-section-label { margin-top: 10px; color: var(--green-700); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.color-row { display: flex; align-items: center; gap: 7px; padding: 10px 0 16px 54px; color: var(--ink-soft); font-size: 11px; }.color-row i { width: 15px; height: 15px; background: #d9dfcc; border-radius: 50%; }.color-row i:nth-of-type(2) { background: #e5c5a7; }.color-row i:nth-of-type(3) { background: #a9caad; }.color-row i:nth-of-type(4) { background: #9dbcc0; }.color-row i:nth-of-type(5) { background: #9b85aa; }.detail-delete { width: 100%; padding: 14px 0 0; color: var(--red); background: transparent; border-top: 1px solid rgba(237, 97, 83, .23); font-size: 13px; font-weight: 700; text-align: left; }.detail-delete span { margin: 0 12px 0 3px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(28, 45, 31, .54); backdrop-filter: blur(5px); }.modal-backdrop[hidden] { display: none; }.modal-card { position: relative; width: min(100%, 460px); padding: 38px; background: var(--green-100); border: 2px solid var(--green-500); border-radius: 30px; box-shadow: 0 24px 70px rgba(20, 62, 26, .25); }.modal-close { position: absolute; top: 16px; right: 18px; width: 32px; height: 32px; color: var(--green-700); background: transparent; font-size: 28px; }.modal-card h2 { margin: 0 0 25px; color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 50px; font-weight: 600; text-align: center; }.modal-add form { display: grid; gap: 15px; }.modal-card input { width: 100%; min-height: 56px; padding: 0 18px; color: var(--ink); background: #fff; border: 1px solid var(--green-700); border-radius: 9px; outline: none; }.modal-card input:focus { box-shadow: 0 0 0 3px rgba(78,154,96,.2); }.modal-card .button { justify-self: center; min-width: 180px; }.modal-actions { padding-top: 46px; }.modal-option-list { display: grid; gap: 4px; }.modal-option-list button { display: flex; align-items: center; gap: 16px; padding: 14px; color: var(--ink); background: #fff; border-radius: 13px; text-align: left; }.modal-option-list button > span:first-child { display: grid; width: 35px; height: 35px; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 10px; }.modal-option-list strong, .modal-option-list small { display: block; }.modal-option-list strong { font-size: 14px; }.modal-option-list small { color: var(--ink-soft); font-size: 11px; }
.modal-open { overflow: hidden; }.modal-edit, .modal-notes { max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }.modal-edit form, .inline-detail-form { display: grid; gap: 8px; }.modal-edit label, .inline-detail-form label, .form-label { margin-top: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }.modal-card textarea { width: 100%; resize: vertical; padding: 13px 15px; color: var(--ink); background: #fff; border: 1px solid var(--green-700); border-radius: 9px; outline: none; }.modal-card textarea:focus { box-shadow: 0 0 0 3px rgba(78,154,96,.2); }.icon-picker, .color-picker { display: flex; flex-wrap: wrap; gap: 8px; }.icon-choice { display: grid; width: 42px; height: 42px; place-items: center; color: var(--green-700); background: #fff; border: 1px solid var(--green-300); border-radius: 11px; font-size: 20px; }.icon-choice.is-selected, .icon-choice:hover { color: #fff; background: var(--green-700); border-color: var(--green-700); }.color-choice { width: 28px; height: 28px; padding: 0; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--green-300); }.color-choice.is-selected, .color-choice:hover { box-shadow: 0 0 0 2px var(--green-700); }.color-choice-green { background: #8bca91; }.color-choice-blue { background: #9dbcc0; }.color-choice-purple { background: #9b85aa; }.color-choice-red { background: #d77d7d; }.color-choice-neutral { background: #d9dfcc; }.modal-edit .button { margin-top: 13px; }.form-hint { margin: 4px 0 7px; color: var(--ink-soft); font-size: 11px; }.detail-loading { padding: 9px 0; color: var(--green-700); font-size: 11px; }.notes-list, .checklist-list { display: grid; gap: 7px; margin-bottom: 17px; }.detail-note { padding: 12px 13px; color: var(--ink); background: #fff; border-radius: 11px; font-size: 12px; white-space: pre-wrap; }.detail-empty { margin: 0; color: var(--ink-soft); font-size: 11px; }.checklist-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 9px; color: var(--ink); font-size: 13px; }.checklist-heading span { color: var(--ink-soft); font-size: 10px; }.checklist-item { display: grid; grid-template-columns: 28px 1fr 25px; align-items: center; gap: 8px; padding: 9px 11px; background: #fff; border-radius: 10px; font-size: 12px; }.checklist-item.is-complete span { color: #8d998e; text-decoration: line-through; }.checklist-item-toggle, .checklist-item-delete { padding: 0; color: var(--green-700); background: transparent; font-size: 18px; }.checklist-item-delete { color: var(--red); font-size: 19px; }.inline-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.inline-input-row input { min-width: 0; }.inline-input-row .button { min-width: 47px; padding: 0; }.modal-danger-option { color: var(--red) !important; }.modal-danger-option > span:first-child { color: var(--red) !important; background: #fff0ec !important; }

.settings-page { background: linear-gradient(180deg, var(--green-100) 0 115px, #f3f2f6 115px 100%); }.app-shell-settings { background: #f5f4f7; }.settings-heading { padding: 38px 38px 22px; }.settings-heading-support { padding-top: 54px; }.settings-heading h1 { color: #161817; font-size: clamp(28px, 4vw, 42px); font-weight: 700; }.settings-group { display: grid; gap: 15px; padding: 0 38px; }.settings-card { position: relative; display: grid; grid-template-columns: 74px 1fr auto; min-height: 108px; align-items: center; gap: 14px; padding: 20px 22px; background: #fff; border: 1px solid rgba(39,54,41,.05); border-radius: 24px; box-shadow: 0 10px 23px rgba(45,48,49,.08); }.settings-card h2 { margin: 0 0 2px; color: #111; font-size: clamp(21px, 3vw, 29px); letter-spacing: -.045em; }.settings-card p { margin: 0; color: #141414; font-size: 16px; }.settings-icon { display: grid; width: 55px; height: 55px; place-items: center; color: #fff; background: #666c74; border-radius: 16px; font-size: 28px; font-weight: 700; }.person-icon { color: var(--green-700); background: var(--green-100); font-size: 42px; }.gear-icon { font-size: 31px; }.hand-icon { color: #68747d; background: var(--green-100); font-size: 28px; }.share-icon { font-size: 41px; }.settings-chevron { color: #545b63; font-size: 49px; line-height: 1; }.account-card { grid-template-rows: auto auto; }.account-card .settings-icon { grid-row: span 2; }.free-pill { display: inline-block; margin-left: 6px; padding: 5px 13px; color: #fff; background: var(--green-700); border-radius: 9px; font-size: 18px; }.upgrade-link { grid-column: 2 / 4; justify-self: stretch; padding: 9px 13px; color: var(--ink); background: var(--green-100); border: 1px solid var(--green-300); border-radius: 11px; font-size: 15px; text-align: center; }.night-card { min-height: 106px; }.moon-icon { font-size: 39px; }.theme-toggle { display: flex; align-items: center; justify-content: space-between; width: 105px; height: 46px; padding: 4px; color: #4d5357; background: #666c74; border-radius: 999px; }.theme-toggle span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; font-size: 22px; }.theme-toggle span:first-child { color: #444; background: #fff; }.theme-toggle.is-dark span:first-child { color: #fff; background: transparent; }.theme-toggle.is-dark span:last-child { color: #fff; background: #31383c; }.support-card { background: var(--green-100); border-color: var(--green-500); }.settings-mascot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px 28px; color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 16px; }.mascot-settings { width: 58px; height: 58px; object-fit: cover; background: var(--green-300); border-radius: 50%; mix-blend-mode: multiply; }.share-button { padding: 0; background: transparent; }

.space-page { padding-top: 75px; padding-bottom: 120px; }.space-hero { display: flex; align-items: center; justify-content: space-between; min-height: 370px; padding: 58px 76px; overflow: hidden; background: var(--green-100); border-radius: var(--round-xl); }.space-hero h1 { margin-bottom: 20px; font-size: clamp(46px, 6vw, 78px); line-height: .96; }.space-hero p:last-child { max-width: 390px; color: var(--ink-soft); }.mascot-space { width: 260px; height: 260px; object-fit: cover; background: var(--green-300); border-radius: 48% 52% 45% 55%; mix-blend-mode: multiply; }.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }.space-card, .space-stat { position: relative; min-height: 210px; padding: 27px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 14px 30px rgba(45, 83, 48, .08); }.space-card-primary { color: #fff; background: var(--green-700); }.space-card h2 { margin: 25px 0 7px; font-size: 25px; }.space-card p, .space-stat > span:last-of-type { color: var(--ink-soft); font-size: 13px; }.space-card-primary p { color: var(--green-100); }.space-card-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 12px; font-size: 18px; font-weight: 700; }.space-card-primary .space-card-icon { color: var(--green-900); }.space-card-arrow { position: absolute; right: 27px; bottom: 24px; font-size: 24px; }.space-stat { display: flex; flex-direction: column; }.space-stat .eyebrow { margin-bottom: 18px; }.space-stat strong { color: var(--green-700); font-family: Fraunces, Georgia, serif; font-size: 70px; line-height: .9; }.stat-line { height: 7px; margin-top: auto; overflow: hidden; background: var(--green-100); border-radius: 99px; }.stat-line i { display: block; height: 100%; background: var(--green-700); border-radius: inherit; }

.auth-page { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 86px); background: var(--paper); }.auth-panel { position: relative; display: flex; min-height: 690px; align-items: center; justify-content: center; overflow: hidden; padding: 50px; background: var(--green-100); }.auth-panel::after { position: absolute; right: -90px; bottom: -160px; width: 430px; height: 430px; border: 1px solid rgba(78,154,96,.35); border-radius: 50%; content: ""; }.auth-art { position: absolute; top: 46px; right: 44px; width: 300px; height: 300px; }.auth-blob { position: absolute; inset: 0; background: var(--green-300); border-radius: 48% 52% 45% 55%; transform: rotate(10deg); }.mascot-auth { position: relative; z-index: 1; width: 340px; max-width: none; margin: -22px 0 0 -13px; mix-blend-mode: multiply; }.auth-spark { position: absolute; top: -15px; right: -18px; z-index: 2; color: var(--green-700); font-size: 45px; }.auth-copy { position: relative; z-index: 1; align-self: flex-end; width: min(100%, 470px); margin-bottom: 70px; }.auth-copy h1 { margin: 0 0 19px; font-size: clamp(44px, 5vw, 70px); line-height: .97; }.auth-copy p:last-child { color: var(--ink-soft); }.auth-form-wrap { display: flex; flex-direction: column; justify-content: center; width: min(440px, calc(100% - 100px)); margin: 0 auto; padding: 60px 0; }.auth-form-wrap h2 { margin: 0 0 29px; font-size: 49px; line-height: .97; }.auth-form-wrap h2 span { color: var(--green-700); font-family: Fraunces, Georgia, serif; font-weight: 600; }.auth-form { display: grid; gap: 8px; }.auth-form label { margin-top: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }.auth-form input { min-height: 52px; padding: 0 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; outline: none; }.auth-form input:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(78,154,96,.16); }.auth-form .button { margin-top: 15px; }.auth-switch { margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; }.auth-switch a { color: var(--green-700); font-weight: 700; }.auth-note { margin: 18px 0 0; color: #899189; font-size: 11px; }.form-alert, .form-success { margin-bottom: 16px; padding: 12px 14px; border-radius: 11px; font-size: 12px; }.form-alert { color: #9b3b33; background: #fff0ec; border: 1px solid #f3c4bb; }.form-success { color: var(--green-900); background: var(--green-100); border: 1px solid var(--green-300); }.auth-mobile-logo { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.dark-mode { --paper: #152019; --ink: #e8ffe4; --ink-soft: #b8c8b8; --line: rgba(232,255,228,.14); background: #152019; }.dark-mode .site-header, .dark-mode .app-brand-line { background: #d5f3cd; }.dark-mode .settings-page { background: #101712; }.dark-mode .app-shell-settings, .dark-mode .settings-card, .dark-mode .app-shell { background: #1e2c22; }.dark-mode .settings-card h2, .dark-mode .settings-card p, .dark-mode .task-title, .dark-mode .task-toolbar h1, .dark-mode .settings-heading h1 { color: var(--ink); }.dark-mode .task-row { background: #1e2c22; border-color: #49644d; }.dark-mode .task-detail-card, .dark-mode .modal-card { background: #d5f3cd; }.dark-mode .auth-page { background: #152019; }.dark-mode .auth-form input { color: var(--ink); background: #1e2c22; }.dark-mode .site-footer { color: var(--green-300); }

@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 58px; }.hero-copy { max-width: 700px; }.hero-art { width: min(620px, 100%); min-height: 480px; margin: 0 auto; }.mascot-frame { left: 16%; }.feature-heading { display: block; }.feature-heading h2 { margin-top: 8px; }.cta-panel { padding-inline: 50px; }.task-support { grid-template-columns: 1fr; gap: 40px; }.space-hero { padding-inline: 54px; }.auth-panel { padding-inline: 34px; }.auth-form-wrap { width: min(440px, calc(100% - 62px)); }
}
@media (max-width: 700px) {
    .shell { width: min(100% - 32px, 560px); }.site-header { min-height: 70px; padding: 6px 16px; }.brand { width: 170px; height: 55px; }.brand-image { width: 170px; height: 55px; }.menu-toggle { display: block; }.site-nav { position: absolute; top: 68px; right: 14px; left: 14px; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 12px 17px; background: #fff; border: 1px solid var(--green-300); border-radius: 18px; box-shadow: var(--shadow); }.site-nav.is-open { display: flex; }.site-nav a { padding: 12px 0; }.site-nav .nav-account { padding: 12px 16px; text-align: center; }.site-nav a::after { display: none; }
    .home-hero { padding-top: 48px; padding-bottom: 46px; }.hero-copy h1 { font-size: clamp(47px, 14vw, 67px); }.hero-copy h1 em { margin-left: 22px; }.hero-lede { font-size: 16px; }.hero-art { min-height: 350px; }.mascot-frame { top: 34px; left: 13%; width: 76%; border-width: 6px; }.hero-sticker { transform: scale(.86) rotate(-13deg); }.sticker-top { top: 0; right: 2%; }.sticker-bottom { right: -2%; bottom: 18px; }.orbit-one { top: 5px; left: 4%; width: 340px; height: 340px; }.orbit-two { right: 0; bottom: -15px; width: 270px; height: 270px; }
    .app-preview-wrap { padding: 60px 0 80px; }.app-preview { min-height: 470px; padding: 24px 18px 38px; border-radius: 24px; }.preview-topbar { padding-bottom: 4px; }.preview-logo { font-size: 17px; }.preview-logo img { width: 34px; height: 34px; }.preview-menu { font-size: 19px; }.preview-tagline { margin: 5px 0 20px 41px; font-size: 10px; }.preview-buttons { grid-template-columns: 1fr; gap: 10px; }.period-button { min-height: 78px; padding: 15px 20px; border-radius: 16px; }.period-button span { font-size: 28px; }.period-button small { font-size: 9px; }.period-button b { right: 22px; bottom: 21px; }.preview-mascot { right: 20px; bottom: -18px; width: 77px; height: 77px; }.mascot-preview { width: 97px; }
    .feature-section { padding-bottom: 80px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 240px; }.feature-card-dark { min-height: 270px; }.cta-section { padding-bottom: 80px; }.cta-panel { min-height: 420px; padding: 35px 26px; border-radius: 27px; }.cta-mascot-wrap { width: 130px; height: 260px; }.mascot-cta { right: -105px; bottom: -80px; width: 280px; }.site-footer { grid-template-columns: 1fr; justify-items: center; padding: 26px 22px; text-align: center; }.site-footer p { max-width: 310px; }.footer-links { justify-content: center; }
    .app-page { padding: 0 0 70px; background: #f4f4f5; }.app-shell { border-radius: 0; border: 0; box-shadow: none; }.app-brand-line { min-height: 126px; padding: 12px 18px; border-radius: 0; }.app-logo-link { width: 240px; height: 84px; }.app-logo-link img { width: 240px; height: 86px; }.app-tagline { top: 96px; left: 53px; font-size: 11px; }.app-menu { top: 45px; right: 20px; font-size: 28px; }.task-toolbar { align-items: flex-end; padding: 24px 18px 16px; }.task-toolbar h1 { font-size: 35px; }.task-actions { gap: 8px; }.task-count, .round-action { width: 39px; height: 39px; font-size: 20px; }.round-action.action-menu { font-size: 29px; }.task-progress { margin-right: 18px; margin-left: 18px; }.task-sync-note { margin-right: 18px; margin-left: 18px; }.task-row { min-height: 58px; padding-right: 18px; padding-left: 17px; }.task-title { font-size: 21px; }.task-divider { margin-right: 13px; }.task-more { font-size: 25px; }.task-support { width: min(100% - 32px, 560px); padding-top: 72px; }.task-detail-card { padding: 20px 17px; }.detail-card-head { font-size: 17px; }.mini-checklist { margin-left: 53px; }.settings-heading { padding: 30px 18px 17px; }.settings-heading-support { padding-top: 45px; }.settings-group { padding: 0 18px; }.settings-card { grid-template-columns: 53px 1fr auto; min-height: 90px; padding: 15px 13px; gap: 10px; border-radius: 20px; }.settings-icon { width: 45px; height: 45px; border-radius: 13px; font-size: 23px; }.settings-card h2 { font-size: 20px; }.settings-card p { font-size: 13px; }.settings-chevron { font-size: 40px; }.free-pill { padding: 4px 9px; font-size: 14px; }.upgrade-link { font-size: 12px; }.theme-toggle { width: 85px; height: 39px; }.theme-toggle span { width: 31px; height: 31px; font-size: 18px; }.settings-mascot { padding-top: 31px; }.space-page { padding-top: 35px; }.space-hero { min-height: 420px; flex-direction: column; align-items: flex-start; padding: 37px 26px; }.mascot-space { align-self: flex-end; width: 180px; height: 180px; margin-top: -35px; }.space-grid { grid-template-columns: 1fr; }.space-card, .space-stat { min-height: 165px; }.auth-page { grid-template-columns: 1fr; min-height: 0; }.auth-panel { display: none; }.auth-form-wrap { width: min(100% - 40px, 440px); padding: 48px 0 70px; }.auth-mobile-logo { display: block; width: 190px; height: 58px; margin: 0 auto 38px; overflow: hidden; }.auth-mobile-logo img { width: 190px; height: 60px; object-fit: contain; }.auth-form-wrap h2 { font-size: 45px; }.auth-page + .site-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }