:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#102b35;background:#edf2f4;font-synthesis:none;font-size:16px;--ink:#102b35;--green:#145e55;--line:#d9e2e6}*{box-sizing:border-box}body{margin:0}header{max-width:640px;margin:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:24px 20px 18px;padding-top:max(24px,env(safe-area-inset-top))}.brand{font-weight:750;font-size:1.05rem;display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}.brandmark{background:var(--ink);color:#c0f2d3;font-size:1.1rem;border-radius:12px;padding:8px 12px}#month-label{font-size:.875rem;color:#50616a;text-align:right}main{max-width:600px;margin:auto;padding:0 20px 115px}.card{background:white;border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:16px}.hero{background:var(--ink);color:white;border:0;padding:28px 24px}.hero small{color:#c1d6dc}.hero .amount{color:#baf5d1;font-size:clamp(2.3rem,11vw,4.1rem);font-weight:650;letter-spacing:-.04em;margin:12px 0}.hero p{color:#d7e4e7}.eyebrow{font-size:.875rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600}h1{font-size:1.65rem;letter-spacing:-.035em;margin:12px 0 20px}h2{font-size:1.12rem;margin:0 0 14px}h3{font-size:1rem;margin:0 0 6px}p{line-height:1.5;margin:8px 0 16px}.muted,small{color:#546973;font-size:.875rem;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:13px;padding:13px 18px;font-weight:650;min-height:46px;background:var(--green);color:white}button:disabled{opacity:.5;cursor:default}button.secondary{color:var(--ink);background:#e9f0f3}button.danger{background:#a83228;color:white}button.link{background:none;color:var(--green);padding:8px 0;text-align:left}button.full{width:100%}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #438ab4;outline-offset:3px}label{display:block;font-weight:600;font-size:.9375rem;margin:18px 0 8px}input:not([type=checkbox]),select{width:100%;padding:14px 13px;border:1px solid #afc0c9;border-radius:12px;min-height:48px;background:white;color:var(--ink)}input[type=checkbox]{width:22px;height:22px;accent-color:var(--green);flex-shrink:0}form .full{margin-top:22px}.row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.row:last-child{border:0}.row strong{font-variant-numeric:tabular-nums}.row .description{min-width:0;overflow-wrap:anywhere}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button{padding:10px 12px;font-size:.875rem}.badge{font-size:.875rem;color:var(--green);font-weight:650}.warning{border:1px solid #e4af74;background:#fff4e4;color:#663b17;border-radius:16px;padding:16px;margin-bottom:16px}.warning p:last-child{margin-bottom:0}.critical{background:#fff0ed;border-color:#e6a89d;color:#8b3022}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.split .card{padding:18px}.split strong{display:block;font-size:1.3rem;margin-top:8px;overflow-wrap:anywhere}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}.chips button{background:#e5edf0;color:var(--ink);padding:10px 13px}.chips button[aria-pressed=true]{background:var(--green);color:white}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:4px;background:#ffffffed;border-top:1px solid var(--line);padding:10px 8px max(12px,env(safe-area-inset-bottom));backdrop-filter:blur(12px);z-index:5}nav button{color:#526770;background:none;padding:12px 10px;min-width:0;font-size:.875rem}nav button.active{color:var(--ink);background:#e1efeb}details summary{cursor:pointer;font-weight:600;padding:8px 0}dl{margin:12px 0}dt{color:#546973}dd{margin:6px 0 16px;font-weight:600}.check{display:flex;align-items:center;gap:12px;font-weight:500}.check small{display:block}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:15px 18px;border-radius:14px;z-index:20;max-width:calc(100% - 32px);width:max-content;box-shadow:0 6px 24px #102b3530}dialog{border:1px solid var(--line);border-radius:22px;padding:24px;max-width:calc(100% - 32px);width:480px;color:var(--ink);max-height:85dvh;overflow:auto}dialog::backdrop{background:#102b3570}dialog h2{font-size:1.3rem}.empty{padding:18px 0;color:#546973}.error{color:#a83228;font-size:.9375rem;margin:12px 0}hr{border:0;border-top:1px solid var(--line);margin:20px 0}.note{margin-top:20px}a{color:var(--green)}@media(min-width:750px){header{padding-top:40px}main{padding-top:12px}nav button{min-width:120px}}@media(prefers-reduced-motion:no-preference){.card{animation:in .18s ease-out}@keyframes in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}@media(max-width:340px){main{padding-left:12px;padding-right:12px}.split{grid-template-columns:1fr}.hero{padding:22px 18px}header{padding:20px 12px}nav button{padding:12px 7px}}
/* Simple perspective flow: quiet surfaces, three clear figures. */
[hidden]{display:none!important}:root{--ink:#183c3c;--green:#256558;--line:#dce6df;background:#fafbf7}body,body[data-view]{background:#fafbf7;color:var(--ink)}
header{padding:20px 20px 16px;align-items:center;gap:12px}.brand{font-size:.94rem;color:var(--ink)}.brandmark{background:#d8eddf;color:#225748;border-radius:12px;padding:8px 11px}.header-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}#month-label{font-size:.76rem;color:#66756c}
main{padding-bottom:110px}.welcome{margin:12px 0 22px}.welcome h1{font-size:1.9rem;margin:9px 0 8px;line-height:1.13}.welcome p{color:#61706b;margin:0;font-size:.95rem}.eyebrow{font-size:.68rem;letter-spacing:.09em;color:#5b796b}.heading-row{display:flex;justify-content:space-between;align-items:center}.help-button{min-height:36px;min-width:36px;border-radius:50%;padding:6px;background:#e9f0e7;color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 3px 15px #183c3c04}.spend-compass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:24px 0 12px}.compass-card{min-width:0;border-radius:20px;padding:22px 5px;text-align:center;border:1px solid #ffffff80}.month-card{background:#dcebf2}.week-card{background:#f8e5bf}.today-card{background:#dcefd6}.compass-card h2{font-size:.84rem;margin:0 0 16px}.compass-card strong{font-size:clamp(1rem,4.7vw,1.75rem);display:block;letter-spacing:-.05em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.compass-card small{display:block;font-size:.63rem;margin-top:12px;color:#49605b}.compass-note{font-size:.75rem;color:#61706b;text-align:center;margin-bottom:18px}.protection{background:#edf4e8;color:#405e41;border:1px solid #d9e6d4;border-radius:13px;padding:14px 16px;font-size:.81rem;line-height:1.5;margin-bottom:22px}.protection.at-risk{background:#fff0ed;color:#8b3022;border-color:#e6a89d}.quick-spend{background:#256558;color:white;min-height:58px;font-size:1.05rem;margin-bottom:12px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.quick-actions button{font-size:.84rem;background:#eaf0e7}.centered{text-align:center!important}.small-note{font-size:.72rem}.action-list{display:grid;gap:12px}.action-list button{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:17px 15px;background:#256558}.action-list button.secondary{background:#eaf0e7}.row h2{margin:3px 0 0}.row strong{white-space:nowrap}.actions button{font-size:.76rem;padding:8px 10px}.row .actions{gap:5px}.heading-explainer{display:block;font-size:.7rem;color:#546973;margin-top:5px}.warning{margin-top:10px}button.secondary{background:#eaf0e7}button.link{color:#256558}
nav{position:fixed;display:grid;grid-template-columns:repeat(3,minmax(0,160px));gap:8px;padding:10px 20px max(12px,env(safe-area-inset-bottom));background:#fafbf7f5;border-color:var(--line);z-index:5}nav button{background:transparent;color:#60776b;min-width:0;font-size:.85rem;padding:14px 10px}nav button.active{background:#dcebdc;color:#244d39}#toast{bottom:90px}.preference-pickers{display:flex;gap:14px;flex-wrap:wrap}.preference-pickers label{font-size:.72rem;margin:0 0 4px}.picker-button{background:#eaf0e7;color:var(--ink);padding:8px 12px;font-size:.8rem}.preference-help{margin:14px 0}.preference-menu{display:grid;gap:7px;margin:15px 0}.preference-option{display:flex;justify-content:space-between;background:#eaf0e7;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}#setup-preferences{margin:16px 0}.currency-confetti{display:none}dialog{background:#fff}dialog button.full+button.full{margin-top:12px}#setup-done{margin-top:6px}.welcome .eyebrow{display:inline-block}h1>.eyebrow{margin-bottom:10px}@media(max-width:360px){header,main{padding-left:14px;padding-right:14px}.compass-card{padding:20px 3px}.quick-actions button{font-size:.78rem;padding:13px 8px}}
/* Version 23: a small storybook world, with clear money at its centre. */
:root{--ink:#40364f;--green:#615184;--line:#e5dcca;background:#dceff0;font-family:ui-rounded,'Trebuchet MS',-apple-system,sans-serif}body,body[data-view]{background:transparent;color:var(--ink)}.storybook-world{position:fixed;inset:0;z-index:-1;background:linear-gradient(#dceff0,#edf5e8 65%);pointer-events:none}.storybook-world svg{width:100%;height:100%;display:block}header{max-width:640px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:10px}.brand{color:var(--ink);font-size:1rem}.brandmark{color:#fff8e9;background:#756396;border-radius:45% 55% 40% 60%;transform:rotate(-9deg);box-shadow:3px 3px 0 #40364f1a}#month-label{color:#64576e}main{padding-bottom:125px}.welcome{margin:16px 0 22px}.welcome h1{font-family:Georgia,serif;font-weight:700;color:#493b61;font-size:2.3rem;letter-spacing:-.045em;line-height:1.04}.welcome p{color:#5e5869;font-size:.91rem}.home-welcome{text-align:center;margin-bottom:22px}.heading-row{position:relative;justify-content:center}.heading-row .help-button{position:absolute;right:0;top:16px}.eyebrow{color:#70627f;font-size:.64rem;letter-spacing:.13em}.help-button{background:#fff8ed;color:#66527d;box-shadow:2px 3px 0 #64516e15}.world-caption{font-size:.6rem;letter-spacing:.2em;text-align:center;color:#716a76}.spend-compass{gap:10px;margin:18px 0 30px;padding-bottom:28px;position:relative}.compass-card{position:relative;isolation:isolate;min-height:150px;padding:30px 4px 24px;border-radius:48% 48% 44% 44% / 38% 38% 56% 56%;border:2px solid #fff9eac2;box-shadow:inset 8px 5px 0 #ffffff26,5px 7px 0 #59446413}.compass-card:after{content:'';position:absolute;z-index:-1;top:100%;height:37px;left:50%;width:1px;background:#796779}.balloon-knot{position:absolute;bottom:-8px;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #ccb7e7}.month-card{background:#d5c4ee;transform:rotate(-4deg)}.week-card{background:#f8d897;transform:translateY(14px) rotate(3deg)}.week-card .balloon-knot{border-bottom-color:#edc875}.today-card{background:#f0adb0;transform:rotate(-3deg)}.today-card .balloon-knot{border-bottom-color:#e99d9f}.compass-card h2{font-size:.84rem;color:#493b61;margin-bottom:12px}.compass-card strong{font-size:clamp(.95rem,4.4vw,1.7rem);color:#40364f;letter-spacing:-.055em}.compass-card small{font-size:.6rem;color:#605166;margin-top:10px}.compass-note{color:#655a6f;margin-top:-2px;font-size:.71rem}.protection{margin:14px 0 22px;background:#fff9e8e8;border:1px solid #e8dca9;color:#575244;border-radius:20px 15px 21px 11px;font-size:.77rem;box-shadow:3px 4px 0 #5644460a}.signpost-actions{display:grid;gap:11px;padding:0 8px}.signpost-actions button{position:relative;width:100%;text-align:left;padding:13px 23px;color:#493b61;font-size:1.04rem;border-radius:10px 25px 25px 10px;box-shadow:3px 5px 0 #6551681b;min-height:67px;transform:rotate(-1.5deg)}.signpost-actions button span{display:block;font-size:.69rem;font-weight:500;margin-top:4px}.signpost-actions .quick-spend{background:#f3bbac;margin:0}.signpost-actions .due-sign{background:#f5dfa5;transform:rotate(1.4deg)}.signpost-actions .money-sign{background:#d6c8ed;transform:rotate(-1deg)}button{background:#756396;border-radius:16px;box-shadow:2px 3px 0 #493b6114}button.secondary{background:#ece3f5;color:#493b61}button.link{color:#574470;box-shadow:none}.card{background:#fffaf1ed;border:2px solid #fffdf4;border-radius:25px 19px 29px 20px;box-shadow:4px 7px 0 #57445c0d}.muted,small{color:#6a6071}nav{grid-template-columns:repeat(4,minmax(0,145px));padding:10px 10px max(12px,env(safe-area-inset-bottom));gap:5px;background:#fff8edeF;border-top:2px solid #fffdf5;border-radius:24px 24px 0 0}nav button{padding:12px 4px;font-size:.74rem;color:#655572;box-shadow:none;border-radius:14px;min-height:48px}nav button.active{background:#dcd0ee;color:#493b61}.picker-button,.preference-option{background:#eee4f6;color:#493b61}dialog{background:#fffaf1;border:3px solid #fff;box-shadow:7px 9px 0 #493b6120}input:not([type=checkbox]),select{border-color:#cdbfda;background:#fffefa}.row{border-color:#e5dcca}.action-list button{background:#756396}.action-list button.secondary{background:#eee3f4}#toast{background:#493b61}.warning{background:#fff5dc;border:2px solid #d4a665;color:#6a431e}.critical,.protection.at-risk{background:#ffede8;color:#843321;border-color:#dca794}.small-note{color:#594e62}button.danger{background:#a23e3c;color:white}.currency-confetti{display:none}
@media(prefers-reduced-motion:no-preference){.compass-card{animation:bob 5s ease-in-out infinite}.week-card{animation-delay:-1.8s}.today-card{animation-delay:-3.2s}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}button:active{translate:0 2px}}
@media(max-width:360px){.welcome h1{font-size:2rem}.compass-card{padding-top:27px;min-height:140px}.spend-compass{gap:6px}.compass-card strong{font-size:.95rem}.compass-card small{font-size:.55rem}nav button{font-size:.69rem}.heading-row .help-button{right:-3px;top:12px}}
/* Three original guides hold the figures. */
.guide-character{position:absolute;left:50%;top:-82px;transform:translateX(-50%);width:88px;height:111px;z-index:-1;overflow:visible}.spend-compass{margin-top:88px;padding-bottom:0;margin-bottom:18px;gap:10px}.compass-card{border-radius:13px 10px 15px 9px;min-height:119px;padding:19px 4px 16px;border:3px solid #fff7e3;box-shadow:4px 5px 0 #5944641a;transform:rotate(-3deg)}.compass-card:after{height:17px;width:8px;background:#a27f64;left:calc(50% - 4px);border-radius:0 0 3px 3px}.week-card{transform:translateY(8px) rotate(2deg)}.today-card{transform:rotate(-2deg)}.compass-card h2{font-size:.72rem;margin-bottom:10px}.compass-card strong{font-size:clamp(.95rem,4.4vw,1.7rem)}.compass-card small{margin-top:8px}.world-caption{margin-top:24px}.compass-note{margin-top:30px}.home-welcome{margin-bottom:6px}@media(max-width:360px){.guide-character{width:79px;top:-76px}.compass-card{min-height:115px}.compass-card h2{font-size:.65rem}}

.elf-name{display:block;font-size:.52rem;letter-spacing:.05em;color:#63506d;margin-bottom:7px;font-weight:700}.compass-card{min-height:132px}