*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,Noto Sans TC,sans-serif;color:#557087;background:#f8fbff;font-synthesis:none;line-height:1.5;--navy:#123F78;--sky:#5A9FE3;--pale:#EEF7FD;--line:#DCE9F3;--muted:#7890A4;--income:#4F7F69;--expense:#B76861}body{margin:0;background:linear-gradient(180deg,#eef8ff 0,#fff 35rem)}main{width:min(100%,680px);margin:auto;padding:18px 18px max(26px,env(safe-area-inset-bottom));overflow-wrap:anywhere}.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:470px;overflow:hidden;background:linear-gradient(180deg,#dff2ff,#edf8ff 46%,#f7fbff);border-radius:0}.hero-clouds{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.cloud{position:absolute;height:22px;background:#fffffff0;border-radius:999px}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:40px;height:40px;left:13px;bottom:3px}.cloud:after{width:52px;height:52px;right:14px;bottom:0}.cloud-a{width:118px;left:-32px;top:16px;opacity:.74}.cloud-b{width:88px;left:37%;top:7px;opacity:.56}.cloud-c{width:126px;right:-30px;top:22px;opacity:.76}.cloud-d{width:112px;left:-36px;top:96px;opacity:.42}.hero header{position:absolute;inset:0;z-index:5;height:auto;padding:0;background:transparent;pointer-events:none}.hero .eyebrow,.hero h1,.hero header>p:last-of-type{position:absolute;left:24px;margin:0}.hero .eyebrow{top:47px;font-size:16px;line-height:1;font-weight:500;color:#1881ff}.hero h1{top:73px;font-size:28px;line-height:1;font-weight:800;letter-spacing:.1px;color:#0d47b6;white-space:nowrap}.hero header>p:last-of-type{top:108px;font-size:15px;line-height:1.2;font-weight:600;color:#667786}h2{font-size:1.18rem;line-height:1.3;margin:0 0 13px;color:var(--navy)}p{margin:6px 0}.hero-boy,.hero-girl{position:absolute;z-index:4;height:auto;pointer-events:none}.hero-boy{left:138px;top:105px;width:149px}.hero-girl{left:252px;top:153px;width:137px}section{background:#fff;border:1px solid var(--line);border-radius:17px;padding:19px 20px;margin:12px 0;box-shadow:0 2px 8px #1c568208}.balance{position:absolute;z-index:3;left:12px;right:12px;top:170px;height:237px;margin:0;padding:0;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}.balance-left{position:absolute;z-index:0;inset:23px 297px 5px 10px;background:#f6fbff;border-left:1.2px solid #A8D6FF;border-top:1.2px solid #A8D6FF;border-bottom:1.2px solid #A8D6FF;border-radius:10px 0 0 10px;pointer-events:none}.balance-shape{position:absolute;z-index:0;right:7px;top:0;width:290px;height:237px;overflow:visible;pointer-events:none}.balance>p{position:absolute;z-index:1;left:18px;top:68px;margin:0;font-size:16px;line-height:1;font-weight:800;color:#0d47b6}.balance>strong{position:absolute;z-index:1;left:18px;top:101px;display:block;margin:0;font-size:45px;line-height:1;font-weight:900;letter-spacing:0;color:#0d47b6;font-variant-numeric:tabular-nums}.pair{position:absolute;z-index:1;left:18px;right:18px;top:170px;display:grid;grid-template-columns:168px 1fr;gap:0;margin:0}.pair>div+div{position:relative;margin-left:0;padding-left:25px;border-left:1px solid #BFE1FF}.pair dt{font-size:13px;line-height:1;color:#7d8fa5}.pair dd{margin-top:7px;font-size:18px;line-height:1;font-weight:800;color:#0d47b6}dt{color:var(--muted)}dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}.note,.updated,footer{font-size:.84rem;color:var(--muted)}.hero>.updated{position:absolute;z-index:5;left:20px;top:415px;margin:0;font-size:14px;color:#72849a}.totals{margin:0}.totals>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #e7eef5}.totals>div:last-child{border:0}.totals dd{color:var(--navy)}.transactions{list-style:none;margin:0;padding:0}.transactions li{display:grid;grid-template-columns:3.1rem minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #e7eef5}.transactions li:last-child{border:0}.transactions time,.transactions small{color:var(--muted);font-size:.8rem}.transactions span{min-width:0}.transactions b,.transactions small{display:block}.transactions b{font-size:.94rem;color:var(--navy);overflow-wrap:anywhere}.transactions strong{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.94rem}.transactions .income{color:var(--income)}.transactions .expense{color:var(--expense)}.collection-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--navy)}.collection-head p{margin:0}.collection-head strong{font-variant-numeric:tabular-nums}progress{width:100%;height:10px;border:0;margin:9px 0;accent-color:#5A9FE3}progress::-webkit-progress-bar{background:#e6f1fa}progress::-webkit-progress-value{background:#5a9fe3}progress::-moz-progress-bar{background:#5a9fe3}.complete-state{margin-top:8px;padding:10px 12px;border-radius:13px;background:#f1f7fc}.complete-state>b{font-size:1.05rem;color:#154a8a}.complete-state p{font-weight:650;color:var(--navy)}.complete-state small{color:#5d8db9}footer{text-align:center;padding:28px 16px 15px;margin-top:2px;position:relative;color:#587a9b}footer:before{content:"";position:absolute;left:-18px;right:-18px;top:6px;height:34px;background:linear-gradient(168deg,transparent 47%,#d7efff 49%);opacity:.75;z-index:-1}@media(max-width:375px){.hero{height:454px}.hero-boy{left:130px;top:110px;width:141px}.hero-girl{left:237px;top:155px;width:130px}.balance{left:10px;right:10px;top:176px}.balance>p{top:65px}.balance>strong{top:98px;font-size:44px}.pair{top:160px}.hero>.updated{top:402px;left:18px;font-size:15px}}@media(max-width:360px){main{padding-left:14px;padding-right:14px}section:not(.balance){padding:16px}.pair>div+div{padding-left:13px}.transactions li{grid-template-columns:2.7rem minmax(0,1fr) auto;gap:6px}.transactions strong{font-size:.84rem}}@media(max-width:320px){.hero{height:448px}.hero .eyebrow,.hero h1,.hero header>p:last-of-type{left:15px}.hero .eyebrow{font-size:15px}.hero h1{font-size:27px}.hero-boy{left:116px;top:108px;width:128px}.hero-girl{left:211px;top:151px;width:116px}.balance{left:8px;right:8px;top:176px}.balance>p{left:14px;top:59px;font-size:15px}.balance>strong{left:14px;top:91px;font-size:40px}.pair{left:14px;right:14px;top:151px}.pair dt{font-size:12px}.pair dd{font-size:17px}.hero>.updated{left:15px;top:391px;font-size:13px}}@media(min-width:430px){.hero{height:470px}.hero-boy{left:auto;right:103px;top:105px;width:149px}.hero-girl{left:auto;right:1px;top:153px;width:137px}.balance{left:14px;right:14px;top:166px}.balance>p{top:68px}.balance>strong{top:101px;font-size:45px}.pair{top:166px}.hero>.updated{left:22px;top:413px}.balance-left{right:297px}}@media(min-width:680px){.hero{width:100%;margin-left:0}}@media(max-width:429px){.balance>p,.balance>strong{left:27px}.pair>div:first-child{transform:translate(9px)}}@media(max-width:375px){.balance>p,.balance>strong{left:29px}.pair>div:first-child{transform:translate(11px)}}@media(max-width:360px){.balance>p,.balance>strong{left:21px}.pair>div:first-child{transform:translate(3px)}}@media(max-width:320px){.balance>p,.balance>strong{left:23px}.pair>div:first-child{transform:translate(9px)}}@media(min-width:430px)and (max-width:679px){.balance>p,.balance>strong{left:25px}.pair>div:first-child{transform:translate(7px)}}@media(min-width:680px){.balance>p,.balance>strong{left:26px}.pair>div:first-child{transform:translate(8px)}}@media(max-width:360px){footer:before{left:0;right:0}}