:root {
    --accent: #8a1c3b;
    --accentDim: #c27b8f;
    --expense: #8a1c3b;
    --income: #2f5d6e;
    --bgCard: #fbf9f2;
    --bgCard2: #fffefa;
    --bgHeader: #f6f2e8;
    --bgMain: #f2eddf;
    --bgPopup: #fffefa;
    --border: #c9bd99;
    --borderHi: #9c8f66;
    --danger: #c4361c;
    --good: #4d6a1c;
    --textDim: #6e6247;
    --textPri: #2b1a1d;
    --textSec: #4f4130;
    --warn: #9a5c00;
    --radius: 10px;
    --radiusLg: 16px;
    --radiusSm: 6px;
    --actionWidth: 44px;
    --entryAmountWidth: 110px;
    --entryCategoryWidth: 200px;
    --entryDateWidth: 110px;
    --entrySpacing: 12px;
    --entryUserWidth: 120px;
    --categoryChipHeight: 44px;
    --chipHeight: 32px;
    --chipInset: 6px;
    --controlHeight: 40px;
    --paddingLg: 16px;
    --paddingMd: 10px;
    --paddingSm: 8px;
    --rowHeight: 36px;
    --keyGap: 3px;
    --keyHeight: 40px;
    --primaryHeight: 44px;
    --sidebarWidth: 260px;
    --wideWidth: 840px;
    --fontSizeLg: 21px;
    --fontSizeMd: 15px;
    --fontSizeSm: 13px;
    --fontSizeXl: 25px;
    --fontSizeXxl: 32px;
    --fontSizeXs: 12px;
    --fontSizeXxs: 11px;
    --cat-0: #0f9e3a;
    --cat-1: #c302ab;
    --cat-2: #978806;
    --cat-3: #0093be;
    --cat-4: #c00276;
    --cat-5: #7d9201;
    --cat-6: #017dc6;
    --cat-7: #c2054a;
    --cat-8: #459e03;
    --cat-9: #0048f3;
    --cat-10: #c10301;
    --cat-11: #02a05c;
    --cat-12: #5a15ff;
    --cat-13: #c75701;
    --cat-14: #059d80;
    --cat-15: #7f00e1;
    --cat-16: #bd7203;
    --cat-17: #049a96;
    --cat-18: #9b01c0;
    --cat-19: #aa7e06;
    --cat-20: #13702a;
    --cat-21: #840173;
    --cat-22: #6a5f01;
    --cat-23: #036786;
    --cat-24: #7e014c;
    --cat-25: #576603;
    --cat-26: #025487;
    --cat-27: #7f002d;
    --cat-28: #2e6f00;
    --cat-29: #002b9d;
    --cat-30: #7d0000;
    --cat-31: #00703f;
    --cat-32: #3800a8;
    --cat-33: #8a3a00;
    --cat-34: #006e59;
    --cat-35: #4f0190;
    --cat-36: #854f03;
    --cat-37: #026c69;
    --cat-38: #63007c;
    --cat-39: #785802;
}

:root[data-theme="dark"] {
    --accent: #b3bf63;
    --accentDim: #6f7a3a;
    --expense: #d65a72;
    --income: #84b8c9;
    --bgCard: #231f14;
    --bgCard2: #2c2719;
    --bgHeader: #1c1910;
    --bgMain: #17140d;
    --bgPopup: #1f1c12;
    --border: #4d4532;
    --borderHi: #73684a;
    --danger: #ff7a5c;
    --good: #7fc79a;
    --textDim: #8f8365;
    --textPri: #f3ecd9;
    --textSec: #c9bc98;
    --warn: #e8b04a;
    --radius: 10px;
    --radiusLg: 16px;
    --radiusSm: 6px;
    --cat-0: #26f55a;
    --cat-1: #fd00de;
    --cat-2: #f9e011;
    --cat-3: #0ac6fd;
    --cat-4: #ff3da4;
    --cat-5: #cff001;
    --cat-6: #04a2ff;
    --cat-7: #ff4d76;
    --cat-8: #72fd01;
    --cat-9: #6094ff;
    --cat-10: #ff5544;
    --cat-11: #1eff98;
    --cat-12: #8887fe;
    --cat-13: #fe7206;
    --cat-14: #06fed1;
    --cat-15: #ab75ff;
    --cat-16: #fd9902;
    --cat-17: #0cfef7;
    --cat-18: #d64eff;
    --cat-19: #fcbb04;
    --cat-20: #2bc93f;
    --cat-21: #c302ab;
    --cat-22: #c7b305;
    --cat-23: #0097c2;
    --cat-24: #cf037f;
    --cat-25: #a5c007;
    --cat-26: #067ac0;
    --cat-27: #d60553;
    --cat-28: #5ac906;
    --cat-29: #1f62ff;
    --cat-30: #da0602;
    --cat-31: #0dcb77;
    --cat-32: #664dfe;
    --cat-33: #be5303;
    --cat-34: #0ecaa6;
    --cat-35: #921dff;
    --cat-36: #c17404;
    --cat-37: #08cbc5;
    --cat-38: #b001d9;
    --cat-39: #c5920a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #b3bf63;
    --accentDim: #6f7a3a;
    --expense: #d65a72;
    --income: #84b8c9;
    --bgCard: #231f14;
    --bgCard2: #2c2719;
    --bgHeader: #1c1910;
    --bgMain: #17140d;
    --bgPopup: #1f1c12;
    --border: #4d4532;
    --borderHi: #73684a;
    --danger: #ff7a5c;
    --good: #7fc79a;
    --textDim: #8f8365;
    --textPri: #f3ecd9;
    --textSec: #c9bc98;
    --warn: #e8b04a;
    --radius: 10px;
    --radiusLg: 16px;
    --radiusSm: 6px;
    --cat-0: #26f55a;
    --cat-1: #fd00de;
    --cat-2: #f9e011;
    --cat-3: #0ac6fd;
    --cat-4: #ff3da4;
    --cat-5: #cff001;
    --cat-6: #04a2ff;
    --cat-7: #ff4d76;
    --cat-8: #72fd01;
    --cat-9: #6094ff;
    --cat-10: #ff5544;
    --cat-11: #1eff98;
    --cat-12: #8887fe;
    --cat-13: #fe7206;
    --cat-14: #06fed1;
    --cat-15: #ab75ff;
    --cat-16: #fd9902;
    --cat-17: #0cfef7;
    --cat-18: #d64eff;
    --cat-19: #fcbb04;
    --cat-20: #2bc93f;
    --cat-21: #c302ab;
    --cat-22: #c7b305;
    --cat-23: #0097c2;
    --cat-24: #cf037f;
    --cat-25: #a5c007;
    --cat-26: #067ac0;
    --cat-27: #d60553;
    --cat-28: #5ac906;
    --cat-29: #1f62ff;
    --cat-30: #da0602;
    --cat-31: #0dcb77;
    --cat-32: #664dfe;
    --cat-33: #be5303;
    --cat-34: #0ecaa6;
    --cat-35: #921dff;
    --cat-36: #c17404;
    --cat-37: #08cbc5;
    --cat-38: #b001d9;
    --cat-39: #c5920a;
  }
}
/* What dist/tokens.css cannot take from HetTheme.qml by a regular expression: Qt.rgba, references, tones, glow, and the shades changed for WCAG AA.
   A theme is chosen by prefers-color-scheme, or by data-theme on <html> once the switch was pressed, so every dark rule is written twice. */

:root {
    color-scheme: light;
    --glowTheme: 0;
    --glow: calc(var(--glowTheme) * var(--motion, 1));
    --bgScrim: rgba(42, 16, 24, 0.3); /* #4d2a1018 */
    --entryChevronWidth: var(--paddingLg);
    --sheetMargin: var(--paddingLg);
    --selected: color-mix(in srgb, var(--accent) 12%, transparent); /* selectedFill(accent) */
    --line: #8c8057; /* HetTheme borderHi #9c8f66, 2.75:1 on bgMain */
    --paper: var(--bgCard2);
    --ink: var(--textPri);
    --themeIcon: "\eaf8"; /* moon */
    --onlyDark: none;
    --onlyLight: block;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bgScrim: rgba(0, 0, 0, 0.6); /* #99000000 */
    --line: #8a7f5c; /* HetTheme borderHi #73684a, 2.7:1 on bgCard2 */
    --paper: var(--textPri);
    --ink: var(--bgMain);
    --themeIcon: "\eb30"; /* sun */
    --onlyDark: block;
    --onlyLight: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bgScrim: rgba(0, 0, 0, 0.6);
        --line: #8a7f5c;
        --paper: var(--textPri);
        --ink: var(--bgMain);
        --themeIcon: "\eb30"; /* sun */
        --onlyDark: block;
        --onlyLight: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion: 0;
    }
}

.c1 { --c: var(--cat-1); }
.c2 { --c: var(--cat-2); }
.c3 { --c: var(--cat-3); }
.c4 { --c: var(--cat-4); }
.c6 { --c: var(--cat-6); }
.c9 { --c: var(--cat-9); }
.c11 { --c: var(--cat-11); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: tabler; font-display: block; src: url(/fonts/tabler.woff2) format("woff2"); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: color-mix(in srgb, var(--bgMain), white 28%);
    color: var(--textPri);
    font: 16px/1.5 Poppins, sans-serif;
}

a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h2 { font-size: var(--fontSizeMd); letter-spacing: 3px; text-transform: uppercase; margin: 0 0 var(--paddingLg); }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
.theme, .pause, .viewer button, .cam, .fab, .x { display: grid; place-items: center; padding: 0; }

.i { font: normal 1.2em/1 tabler; font-style: normal; }

.skip { position: absolute; left: -999px; }
.skip:focus { display: inline-flex; align-items: center; min-height: 44px; left: var(--paddingLg); top: var(--paddingSm); background: var(--bgCard2); padding: var(--paddingSm); }

.top, .bottom, main { max-width: 1000px; margin: 0 auto; padding: 0 var(--paddingLg); }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--paddingLg); min-height: 64px; border-bottom: 1px solid var(--border); }
.top .links { display: contents; }
.top nav, .bottom nav { display: flex; flex-wrap: wrap; gap: var(--paddingSm) var(--paddingLg); }
.top nav a, .bottom nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--textSec); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: var(--fontSizeSm); padding: var(--paddingSm) 0; }
.top nav a:hover, .bottom nav a:hover, nav a[aria-current] { color: var(--accent); }
nav a[aria-current] { text-decoration: underline 2px; text-underline-offset: 6px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); font-weight: 700; font-size: var(--fontSizeLg); letter-spacing: 4px; text-decoration: none; text-shadow: 0 0 calc(12px * var(--glow)) var(--accent); }
main > section, main > article { margin: 48px 0; }
.bottom { border-top: 1px solid var(--border); padding-top: var(--paddingLg); padding-bottom: 32px; color: var(--textSec); font-size: var(--fontSizeSm); display: grid; gap: var(--paddingLg); }

/* HetPanel, HetNotice */
.panel, .notice { background: var(--bgCard); border: 1px solid var(--border); border-radius: var(--radiusLg); padding: var(--paddingLg); }
.label { display: flex; align-items: center; gap: 6px; color: var(--textSec); font-size: var(--fontSizeXs); letter-spacing: 2px; text-transform: uppercase; }
.notice .label { color: var(--accent); }
.notice.warn { border-color: var(--warn); }
.notice.warn .label { color: var(--warn); }
.notice p { margin: var(--paddingSm) 0 0; font-size: var(--fontSizeSm); }
.note { color: var(--textSec); }

/* HetActionButton */
.primary, .outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--paddingSm); min-height: 44px; padding: 0 var(--paddingLg); border-radius: var(--radius); letter-spacing: 2px; font-size: var(--fontSizeSm); }
.primary { background: var(--accent); color: var(--bgMain); border: 0; font-weight: 700; min-height: var(--primaryHeight); border-radius: 22px; box-shadow: 0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--accent) 50%, transparent); }
.primary.expense { background: var(--expense); box-shadow: none; }
.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 22px; }
.outline:hover { background: var(--selected); }

/* HetCategoryBadge */
.badge { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--c); border-radius: 50%; color: var(--c); }
.badge .src { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 50%; background: var(--bgPopup); color: var(--accent); font-size: 8px; }

/* HetExpenseCard */
.entries { list-style: none; margin: 0; padding: 0; }
.home .entries { height: 294px; overflow: hidden auto; margin-right: calc(-1 * var(--paddingSm)); padding-right: var(--paddingSm); }
.trash { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--textSec); font-size: 18px; }
.trash:hover { color: var(--danger); }
.entry { display: flex; align-items: center; gap: var(--entrySpacing); min-height: 56px; padding: 4px 0; }
.what { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.what b { text-transform: uppercase; }
.what span { font-size: var(--fontSizeSm); }
.what span:empty { display: none; }
.what small { color: var(--textSec); font-size: var(--fontSizeXs); }
.amount { color: var(--expense); white-space: nowrap; }

.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.store { position: relative; display: block; }
.store img { display: block; width: auto; height: 48px; }
.store .tag { position: absolute; top: -9px; right: -10px; padding: 0 8px; border-radius: 9px; background: var(--accent); color: var(--bgMain); font: 700 10px/18px Poppins, sans-serif; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 0 calc(10px * var(--glow)) var(--accent); }

.hero { text-align: center; }
.hero .stores { justify-content: center; }
@media (max-width: 599px) {
    .hero { text-align: left; }
    .hero .stores { justify-content: flex-start; }
}
/* HetBrand */
.lockup { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 32px; text-align: left; }
.lockup img { filter: drop-shadow(0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--accent) 35%, transparent)); }
.lockup p { margin: 0; color: var(--textSec); font-size: var(--fontSizeXs); letter-spacing: 1.5px; text-transform: uppercase; }
.lockup b { display: block; color: var(--accent); font-size: 30px; line-height: 1; letter-spacing: 5px; text-shadow: 0 0 calc(14px * var(--glow)) var(--accent); }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 24px; }
.hero .lead { font-size: var(--fontSizeLg); color: var(--textSec); margin: 0 0 36px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; grid-auto-rows: 1fr; }
@media (max-width: 599px) {
    .cards li { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; align-items: start; }
    .cards .i { grid-row: span 2; margin: 0; }
}
.cards .i { display: block; color: var(--accent); font-size: 28px; margin-bottom: var(--paddingSm); text-shadow: 0 0 calc(10px * var(--glow)) var(--accent); }
.cards h3 { margin: 0; font-size: var(--fontSizeMd); }
.cards p { margin: 4px 0 0; color: var(--textSec); font-size: var(--fontSizeSm); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; }
.gallery a { display: block; cursor: zoom-in; }
/* a screenshot in the frame of the phone mockup */
.gallery img, .viewer img { padding: 4px; border: 1px solid var(--line); border-radius: 8% / 3.7%; background: var(--bgMain); box-shadow: 0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--accent) 25%, transparent); }
.gallery img { display: var(--onlyDark); }
.gallery img.light { display: var(--onlyLight); }
.gallery a:hover img { border-color: var(--accent); }
.viewer { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: var(--paddingLg) 56px; border: 0; background: transparent; color: var(--textPri); text-align: center; }
.viewer::backdrop { background: rgba(0, 0, 0, 0.75); }
.viewer img { display: block; width: auto; max-height: calc(100dvh - 120px); margin: 0 auto; padding: 10px; }
.viewer p { margin: var(--paddingSm) 0 0; color: var(--textSec); font-size: var(--fontSizeSm); }
.viewer button { position: absolute; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--bgCard); color: var(--accent); }
.viewer .close { top: var(--paddingSm); right: var(--paddingSm); }
.viewer [data-step] { top: calc(50% - 22px); }
.viewer [data-step="-1"] { left: 6px; }
.viewer [data-step="1"] { right: 6px; }
.gallery figcaption { color: var(--textSec); font-size: var(--fontSizeSm); margin-top: var(--paddingSm); }

details { margin-bottom: 12px; }
details.panel { padding: 0; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: var(--paddingLg); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "\ea5f" / ""; font: 20px/1.2 tabler; color: var(--accent); } /* chevron-down */
details[open] summary::after { transform: rotate(180deg); }
details p, details pre { margin: 0 var(--paddingLg) var(--paddingLg); color: var(--textSec); }

/* The phone mockup, in real pixels. */
.demo { display: grid; justify-items: center; gap: var(--paddingLg); text-align: center; }
.demo h2 { margin: 0; }
.phone { position: relative; width: min(393px, 100%); min-height: 800px; overflow: hidden; text-align: left; background: var(--bgMain); border: 1px solid var(--line); border-radius: 36px; box-shadow: 0 0 calc(40px * var(--glow)) color-mix(in srgb, var(--accent) 25%, transparent); font-size: var(--fontSizeMd); }
.phone p { margin: 0; }
.home { display: flex; flex-direction: column; gap: 12px; min-height: 800px; padding: 0 12px 12px; }
.appbar { display: flex; justify-content: space-between; align-items: center; min-height: 56px; margin: 0 -12px; padding: 12px 20px 0; border-bottom: 1px solid var(--border); background: var(--bgHeader); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.appbar b { color: var(--accent); }
.home .panel { display: grid; gap: var(--paddingSm); }
.badge-ok { margin-left: auto; white-space: nowrap; padding: 0 6px; border: 1px solid var(--good); border-radius: var(--radiusSm); color: var(--good); font-weight: 700; letter-spacing: 1px; }
.big { font-size: 40px; font-weight: 700; line-height: 1.1; }
.per-day { color: var(--good); }
.meter { height: 8px; border-radius: 4px; background: var(--bgCard2); border: 1px solid var(--border); }
.meter i { display: block; height: 100%; width: 39%; border-radius: 4px; background: var(--good); }
.pair { color: var(--textSec); font-size: var(--fontSizeSm); }
.over .big, .over .left-label { color: var(--danger); }
.over .badge-ok, .over .daily { display: none; }
.over .meter i { background: var(--danger); }
.hint { position: relative; margin-top: auto; }
.primary { position: relative; }
.phone[data-screen="crop"] [data-act="agree"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 9px color-mix(in srgb, var(--accent) 15%, transparent); animation: ring 1.8s ease-out infinite; }
.sheet { overflow-y: auto; }
@media (max-width: 599px) {
    .phone, .home { min-height: 0; }
    .home .entries { height: 186px; }
    .hint { display: none; }
}
.hint::after { content: ""; position: absolute; right: 28px; bottom: -9px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--border); }
.tabbar { display: flex; align-items: center; gap: var(--paddingSm); }
.tabs { flex: 1; display: flex; justify-content: space-around; align-items: center; height: 56px; border: 1px solid var(--border); border-radius: 28px; background: var(--bgCard); color: var(--textSec); font-size: 18px; }
.tabs .on { color: var(--accent); }
.cam, .fab { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.cam { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.fab { background: var(--accent); border: 0; color: var(--bgMain); box-shadow: 0 0 calc(18px * var(--glow)) var(--accent); }
.ai { position: absolute; top: -6px; right: -6px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--bgMain); font: 800 10px/16px Poppins, sans-serif; letter-spacing: 1px; }

.sheet { display: none; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; top: 24px; flex-direction: column; gap: 12px; padding: var(--sheetMargin); background: var(--bgPopup); border-top: 1px solid var(--accent); border-radius: 20px 20px 0 0; }
.sheet.add { top: auto; }
.sheet > .primary { margin-top: auto; }
.phone .label { letter-spacing: 1.5px; }
.phone::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bgScrim); display: none; }
.phone:not([data-screen="home"])::after { display: block; }
.phone[data-screen="add"] .add, .phone[data-screen="crop"] .crop, .phone[data-screen="wait"] .wait, .phone[data-screen="result"] .result { display: flex; }
.sheet-head { display: flex; align-items: center; gap: var(--paddingSm); min-height: 40px; letter-spacing: 2px; text-transform: uppercase; font-size: var(--fontSizeXs); color: var(--textSec); }
.sheet-head b { color: var(--accent); font-size: var(--fontSizeSm); }
.x { margin-left: auto; width: 44px; height: 44px; background: transparent; border: 0; color: var(--textSec); }
.display { text-align: right; font-size: 40px; font-weight: 700; color: var(--expense); border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: var(--paddingSm); }
.chip { display: flex; align-items: center; gap: var(--paddingSm); height: var(--categoryChipHeight); padding: 0 var(--paddingLg) 0 var(--chipInset); border: 1px solid var(--line); border-radius: 22px; background: var(--bgCard2); font-size: var(--fontSizeSm); }
.chip .badge { width: 32px; height: 32px; }
.chip[aria-checked="true"] { border: 2px solid var(--accent); background: var(--selected); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); }
.keypad button { height: 44px; /* HetTheme keyHeight 40, WCAG 2.5.8 target */ background: transparent; border: 0 solid var(--line); font-size: var(--fontSizeLg); }
.keypad button:not(:nth-child(3n)) { border-right-width: 1px; }
.keypad button:nth-child(-n + 9) { border-bottom-width: 1px; }
.keypad button:active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.frame { position: relative; display: grid; place-items: center; padding: 16px; border-radius: var(--radiusLg); background: var(--bgCard); }
.frame::before { content: ""; position: absolute; inset: 8px calc(50% - 116px); }
.frame::before, .scan-stage .shot::before { --k: linear-gradient(var(--accent), var(--accent)); background: var(--k) top left / 18px 3px, var(--k) top left / 3px 18px, var(--k) top right / 18px 3px, var(--k) top right / 3px 18px, var(--k) bottom left / 18px 3px, var(--k) bottom left / 3px 18px, var(--k) bottom right / 18px 3px, var(--k) bottom right / 3px 18px; background-repeat: no-repeat; }
.receipt { width: 200px; padding: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--border); font-size: var(--fontSizeXs); }
.receipt b { display: block; text-align: center; margin-bottom: 6px; text-transform: uppercase; }
.receipt p { display: flex; justify-content: space-between; margin: 0; }
.receipt .sum { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--ink); font-weight: 700; }
.sheet .notice p a { color: var(--accent); }
.wait { align-items: center; justify-content: center; text-align: center; }
.spin { font-size: 72px; color: var(--accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent)); animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(0.8) rotate(-12deg); opacity: 0.6; } 50% { transform: scale(1.25) rotate(12deg); opacity: 1; } }
.progress { width: 70%; height: 6px; margin: var(--paddingMd) 0; border-radius: 3px; background: var(--bgCard2); border: 1px solid var(--border); overflow: hidden; }
.progress i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--accent); animation: slide 1.1s ease-in-out infinite alternate; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(150%); } }
.ai-pill { display: inline-flex; gap: 4px; align-items: center; padding: 0 10px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); font-weight: 700; }
.total { display: flex; justify-content: space-between; align-items: center; padding: var(--paddingLg); border: 1px solid var(--border); border-radius: var(--radiusLg); background: var(--bgCard); color: var(--textSec); }
.total b { font-size: var(--fontSizeXxl); color: var(--expense); }
.result .entry { padding: var(--paddingSm) 12px; border: 1px solid var(--border); border-radius: var(--radiusLg); background: var(--bgCard2); margin-bottom: var(--paddingSm); }
.result .what b { text-transform: none; }
.result .what span { color: var(--textSec); }
.toast { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; min-height: 56px; padding: var(--paddingMd) var(--paddingLg); border: 1px solid var(--good); border-left-width: 4px; border-radius: var(--radiusLg); background: var(--bgCard2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); font-size: var(--fontSizeMd); font-weight: 600; transform: translateY(-150%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); }
.toast.show { transform: none; }
.toast::before { content: "\ea5e" / ""; font: 1.5em/1 tabler; color: var(--good); margin-right: var(--paddingSm); } /* check */
.toast:empty { visibility: hidden; }
.restart .i { font-size: 16px; }

@keyframes pulse { to { opacity: 0.4; } }
@keyframes ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
.phone:not([data-used]) .tabbar :is(.fab, .cam) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 9px color-mix(in srgb, var(--accent) 15%, transparent); animation: ring 1.8s ease-out infinite; }
.phone:not([data-used]) .cam { animation-delay: 0.9s; }


/* news: a phase per step, data-phase set by app.js every 2.8 s as HetNewsSheet does, the state without it is the last one */
.feature { display: grid; gap: var(--paddingLg); }
.feature h2 { margin: 0; color: var(--accent); font-size: var(--fontSizeLg); letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 calc(10px * var(--glow)) var(--accent); }
.feature .meta { margin: 0; color: var(--textSec); font-size: var(--fontSizeSm); }
.feature ol { margin: 0; padding-left: 20px; }
.feature ol li { margin-bottom: var(--paddingSm); transition: color 0.3s; }
.feature ol li span { display: block; color: var(--textSec); font-size: var(--fontSizeSm); }
.feature ol li[aria-current]::marker, .feature ol li[aria-current] b { color: var(--accent); }
.feature[data-paused] *, .feature[data-paused] *::before, .feature[data-paused] *::after, .feature[data-paused] .stage::after { animation-play-state: paused; }
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 260px; padding: var(--paddingLg); border-radius: var(--radiusLg); background: var(--bgCard2); }
.stage .pause { position: absolute; top: var(--paddingSm); right: var(--paddingSm); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--bgCard); color: var(--accent); }
.stage .pause::before { content: "\ed45" / ""; font: 20px/1 tabler; } /* player-pause */
.stage .pause[aria-pressed="true"]::before { content: "\ed46" / ""; } /* player-play */
@media (min-width: 720px) {
    .feature { grid-template-columns: 1fr 1fr; align-items: center; }
    .feature header { grid-column: 1 / -1; }
}

.scan-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; }
.feature[data-phase="0"] .scan-stage::after { animation: flash 0.43s 1.4s; }
.scan-stage .shot { position: relative; flex: none; transform: rotate(-4deg) scale(0.8); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.4s 0.35s; }
.scan-stage .shot::before { content: ""; position: absolute; inset: -4px; opacity: 0; transition: inset 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s; }
.scan-stage .shot::after { content: ""; position: absolute; left: -12px; right: -12px; top: 0; height: 2px; background: var(--accent); box-shadow: 0 -10px 18px color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; }
.scan-stage .receipt { width: 132px; padding: 10px; }
.scan-stage .receipt b { margin: 0; letter-spacing: 2px; white-space: nowrap; }
.scan-stage .receipt small { display: block; margin-bottom: 4px; text-align: center; opacity: 0.6; font-size: var(--fontSizeXxs); }
.scan-stage .receipt p { padding: 1px 3px; border-radius: 2px; font-size: var(--fontSizeXxs); }
.scan-stage .receipt .sum { font-size: var(--fontSizeXs); }
.scan-stage ul { list-style: none; margin: 0 0 0 var(--paddingLg); padding: 0; display: grid; gap: 6px; max-width: 240px; overflow: hidden; font-size: var(--fontSizeSm); transition: max-width 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), margin 0.6s; }
.scan-stage li { display: flex; align-items: center; gap: var(--paddingSm); white-space: nowrap; transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }
.scan-stage li:nth-child(1) { transition-delay: 0.25s; }
.scan-stage li:nth-child(2) { transition-delay: 0.47s; }
.scan-stage li:nth-child(3) { transition-delay: 0.69s; }
.scan-stage li:nth-child(4) { transition-delay: 1s; }
.scan-stage .amount { margin-left: auto; padding-left: var(--paddingLg); }
.scan-stage .badge { width: 28px; height: 28px; font-size: 13px; }
.scan-stage .ok { color: var(--good); font-size: var(--fontSizeXs); letter-spacing: 1px; }
.feature:is([data-phase="0"], [data-phase="1"]) .shot { transform: rotate(-2deg); }
.feature:is([data-phase="0"], [data-phase="1"]) .shot::before { opacity: 1; }
.feature[data-phase="0"] .shot::before { inset: -14px; }
.feature[data-phase="1"] .shot::after { opacity: 1; animation: scan-line 1.8s ease-in-out both; }
.feature[data-phase="1"] .receipt p:not(.sum) { animation: read 0.25s both; }
.feature[data-phase="1"] .receipt p:nth-of-type(1) { animation-delay: 0.23s; }
.feature[data-phase="1"] .receipt p:nth-of-type(2) { animation-delay: 0.68s; }
.feature[data-phase="1"] .receipt p:nth-of-type(3) { animation-delay: 1.13s; }
.feature[data-phase="1"] .receipt p:nth-of-type(4) { animation-delay: 1.58s; }
.feature:is([data-phase="0"], [data-phase="1"]) .scan-stage ul { max-width: 0; margin-left: 0; }
.feature:is([data-phase="0"], [data-phase="1"]) .scan-stage li { opacity: 0; transform: translateX(-24px); transition-delay: 0s; }
.feature[data-phase="3"] .shot { opacity: 0; }
@keyframes flash { 19% { opacity: 0.85; } }
@keyframes scan-line { to { top: 100%; } }
@keyframes read { to { background: color-mix(in srgb, var(--accent) 28%, transparent); } }

.challenge-stage { display: grid; place-items: center; }
.challenge-stage > .panel { grid-area: 1 / 1; width: min(280px, 100%); display: grid; gap: var(--paddingSm); font-size: var(--fontSizeSm); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
.challenge-stage p { display: flex; justify-content: space-between; gap: var(--paddingSm); margin: 0; }
.challenge-stage .form { opacity: 0; }
.challenge-stage .form small { color: var(--textSec); font-size: var(--fontSizeXs); letter-spacing: 1px; }
.challenge-stage .form .primary { min-height: 36px; font-size: var(--fontSizeXs); }
.challenge-stage .typed { white-space: nowrap; }
.challenge-stage .goal { border-color: var(--good); }
.challenge-stage .goal b .i { margin-right: 4px; color: var(--good); }
.challenge-stage .goal b .i:first-child { display: none; color: var(--accent); }
.challenge-stage .meter { height: 12px; overflow: hidden; }
.challenge-stage .meter i { width: 100%; transform-origin: left; background: var(--good); transition: transform 1s cubic-bezier(0.2, 0.8, 0.3, 1), background 0.3s; }
.challenge-stage .income { color: var(--income); }
.challenge-stage :is(.d1, .d2, .d3, .reached) { transition: opacity 0.3s, transform 0.45s; }
.challenge-stage .reached { color: var(--good); letter-spacing: 2px; font-size: var(--fontSizeXs); }
.feature[data-phase="0"] .form { opacity: 1; }
.feature[data-phase="0"] .typed { animation: typing 1.7s 0.9s steps(12) both; }
.feature[data-phase="0"] .goal { opacity: 0; transform: scale(0.92); }
.feature[data-phase]:not([data-phase="4"]) .goal { border-color: var(--border); }
.feature[data-phase]:not([data-phase="4"]) .goal b .i { display: none; }
.feature[data-phase]:not([data-phase="4"]) .goal b .i:first-child { display: inline; }
.feature[data-phase]:not([data-phase="4"]) .meter i { background: var(--accent); }
.feature:is([data-phase="0"], [data-phase="1"]) .meter i { transform: scaleX(0); }
.feature[data-phase="2"] .meter i { transform: scaleX(0.2); }
.feature[data-phase="3"] .meter i { transform: scaleX(0.35); }
.feature:is([data-phase="0"], [data-phase="1"]) .d1, .feature:is([data-phase="0"], [data-phase="1"], [data-phase="2"]) .d2, .feature[data-phase]:not([data-phase="4"]) :is(.d3, .reached) { opacity: 0; transform: translateY(14px); }
@keyframes typing { from { clip-path: inset(0 100% 0 0); } }

.transfer-stage { gap: var(--paddingLg); flex-wrap: wrap; }
.transfer-stage .tile { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--accent); border-radius: var(--radiusLg); background: var(--selected); color: var(--accent); font-weight: 700; letter-spacing: 2px; }
.transfer-stage .track { position: relative; flex: 1; min-width: 32px; max-width: 100px; height: 8px; border-top: 2px dashed var(--borderHi); }
.transfer-stage .packet { position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); opacity: 0; }
.transfer-stage .packet:nth-child(2) { animation-delay: 0.3s; }
.transfer-stage .packet:nth-child(3) { animation-delay: 0.6s; }
.transfer-stage .file { display: grid; gap: 6px; }
.transfer-stage small { color: var(--textSec); font-size: var(--fontSizeXs); letter-spacing: 1px; }
.transfer-stage table { border-collapse: collapse; font-size: var(--fontSizeXs); }
.transfer-stage th { color: var(--textSec); font-weight: 400; letter-spacing: 1px; text-align: left; }
.transfer-stage td, .transfer-stage th { padding: 2px 6px; border: 1px solid var(--border); white-space: nowrap; transition: background 0.25s; }
.transfer-stage .old { display: none; }
.transfer-stage .new-value { color: var(--accent); font-weight: 700; }
.transfer-stage .new { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); transition: opacity 0.4s; }
.transfer-stage .summary { color: var(--good); transition: opacity 0.4s; }
.feature:is([data-phase="0"], [data-phase="2"]) .packet { animation: transfer-fly 0.9s linear infinite; }
.feature[data-phase="2"] .packet { animation-direction: reverse; }
.feature[data-phase="0"] .old { display: inline; }
.feature[data-phase="0"] .new-value { display: none; }
.feature[data-phase="1"] .edited { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 1px solid var(--accent); }
.feature[data-phase="1"] .new-value::after { content: ""; margin-left: 1px; border-right: 2px solid var(--accent); animation: blink 1s steps(1) infinite; }
.feature:is([data-phase="0"], [data-phase="1"]) :is(.new, .summary) { opacity: 0; }
@keyframes transfer-fly { 20%, 80% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
@keyframes blink { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* privacy */
.policy { max-width: 70ch; line-height: 1.6; }
.policy ul { padding-left: 20px; }
.policy h1 { font-size: var(--fontSizeXl); }
.page-privacy .brand { text-shadow: none; }
.policy h2 { margin: 2em 0 0.5em; color: var(--accent); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; }
.policy li { margin-bottom: 0.4em; }

@media print {
    body { background: #fff; color: #000; }
    .top nav, .bottom, .skip { display: none; }
    .brand, a, .policy h2 { color: #000; text-shadow: none; }
}
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--paddingMd) var(--paddingLg); background: color-mix(in srgb, var(--accent) 7%, var(--bgCard2)); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radiusSm); font: var(--fontSizeSm)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--textPri); }
.steps li { margin-bottom: var(--paddingSm); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--paddingSm); }
.tiles .panel { display: grid; gap: 2px; padding: var(--paddingMd); }
.tiles .label { letter-spacing: 1px; }
.tiles b { font-size: var(--fontSizeSm); }
.tiles .income { color: var(--income); }
.tiles .balance { color: var(--good); }
.tiles .balance.negative { color: var(--danger); }

/* roadmap: a timeline of phases, a glowing node on the line per phase */
.roadmap { list-style: none; margin: var(--paddingLg) 0 0; padding: 0; }
.phase { position: relative; padding: 0 0 32px 32px; --tone: var(--accent); }
.phase::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px; width: 2px; background: linear-gradient(var(--tone), var(--line)); }
.phase:last-child::before { display: none; }
.phase h2 { position: relative; margin: 0 0 var(--paddingLg); color: var(--tone); font-size: var(--fontSizeSm); letter-spacing: 3px; text-transform: uppercase; }
.node { position: absolute; left: -32px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--tone); border-radius: 50%; background: var(--bgMain); box-shadow: 0 0 calc(12px * var(--glow)) var(--tone); }
.now .node { background: var(--tone); }
.next { --tone: var(--good); }
.idea { --tone: var(--warn); }
.phase .cards .i { color: var(--tone); text-shadow: 0 0 calc(10px * var(--glow)) var(--tone); }
.phase .panel { border-left: 2px solid var(--tone); }
.trust { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.phase .cards { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.later { --tone: var(--cat-15); }
.both { --tone: var(--cat-3); }
.both .panel > * { filter: blur(6px); opacity: 0.7; user-select: none; }
.theme { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--accent); }
.theme::before { content: var(--themeIcon) / ""; font: 20px/1 tabler; }
.bottom nav { row-gap: 0; }
@media (max-width: 599px) {
    .bottom { justify-items: center; text-align: center; }
    .bottom nav { justify-content: center; }
    .top { position: relative; }
    .top .burger { display: block; order: 1; }
    .top nav { margin-left: auto; gap: 0 var(--paddingSm); }
    .top .links { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: var(--paddingSm) var(--paddingLg); background: var(--bgMain); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
    .top .links.open { opacity: 1; visibility: visible; transform: none; }
    .top .links a { justify-content: flex-start; }
    .stores { justify-content: center; }
}
.top nav { align-items: center; }
.contact p { font-size: var(--fontSizeMd); }
.sheet:focus { outline: none; }

.burger { display: none; position: relative; width: 44px; height: 44px; border: 0; background: transparent; color: var(--accent); }
.burger::before, .burger::after, .burger i { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.25s, opacity 0.25s; }
.burger::before { top: 15px; }
.burger i { top: 21px; }
.burger::after { top: 27px; }
.burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i { opacity: 0; }
.burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

html { scroll-behavior: smooth; }
#demo-note { scroll-margin-top: 8px; }
.try { display: flex; width: fit-content; margin: 44px auto 0; text-transform: uppercase; box-shadow: none; text-decoration: none; animation: try-pulse 2.4s ease-in-out infinite; }

:root[data-theme="dark"] body { background: var(--bgMain); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body { background: var(--bgMain); }
}
main > .hero { margin-bottom: 24px; }
main > .hero + .demo { margin-top: 24px; }
@keyframes try-pulse { 50% { transform: scale(1.04); } }