@font-face{font-family:Newsreader;src:url('fonts/newsreader-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('fonts/newsreader-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('fonts/newsreader-italic-400.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:DMSans;src:url('fonts/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DMSans;src:url('fonts/dm-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--canvas:#f7f5f2;--paper:#fffefa;--ink:#292938;--muted:#6b7271;--plum:#3a374a;--plum-wash:#ebe8ee;--blue:#4d6594;--blue-wash:#edf1f8;--clay:#a55c47;--clay-wash:#f7eae4;--line:#e5e4df;--serif:Newsreader,Georgia,serif;--sans:DMSans,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e7e5e1;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
.app{width:min(100%,430px);min-height:100vh;margin:auto;background:var(--canvas);padding:0 0 108px;position:relative;box-shadow:0 12px 50px #38354510}
.mast{padding:25px 22px 19px}.mast-top{display:flex;justify-content:space-between;align-items:center}.wordmark{font:italic 400 1.85rem/1 var(--serif);letter-spacing:-.065em}.wordmark span{color:var(--blue)}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e6e3e1;color:var(--plum);font-size:.7rem;font-weight:600}
.date{color:var(--muted);font-size:.69rem;letter-spacing:.03em;margin:36px 0 8px}.mast h1{font:400 2.45rem/1.04 var(--serif);letter-spacing:-.038em;margin:0;max-width:330px}.mast h1 em{font-weight:400;color:var(--blue)}
.recommend{display:block;margin:2px 16px 0;padding:19px 19px 18px;border-radius:23px;background:var(--plum-wash);position:relative;overflow:hidden;min-height:162px}.recommend:after{content:"";position:absolute;right:-36px;top:-42px;width:170px;height:170px;border-radius:50%;border:1px solid #d5cfd9;pointer-events:none}.recommend:before{content:"";position:absolute;right:-60px;top:-69px;width:230px;height:230px;border-radius:50%;border:1px solid #d5cfd9;pointer-events:none}.recommend-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.recommend-label{font-size:.7rem;font-weight:600;color:var(--plum)}.recommend-type{font-size:.64rem;color:#6e6879}.recommend h2{font:400 2.15rem/.98 var(--serif);letter-spacing:-.045em;margin:23px 50px 6px 0;position:relative;z-index:1}.recommend p{font-size:.71rem;color:#646071;margin:0;position:relative;z-index:1}.recommend-arrow{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;background:var(--plum);color:white;display:grid;place-items:center;font-size:1.05rem;z-index:1}
.section-title{display:flex;justify-content:space-between;align-items:baseline;margin:31px 20px 15px}.section-title h2{font:400 1.85rem/1 var(--serif);letter-spacing:-.035em;margin:0}.section-title a{color:var(--plum);font-size:.69rem;text-decoration:underline;text-underline-offset:3px}
.card-list{margin:0 16px}.reward-card{display:block;background:var(--paper);border-radius:22px;margin-bottom:12px;box-shadow:0 5px 24px #332e4310;overflow:hidden}.card-head{display:flex;justify-content:space-between;gap:8px;align-items:start;padding:18px 18px 0}.card-head strong{font-size:.86rem;line-height:1.22;font-weight:600}.card-kind{border-radius:100px;background:#f0eff0;padding:6px 9px;white-space:nowrap;font-size:.6rem;color:var(--muted)}
.earn{padding:18px 18px 3px;display:flex;justify-content:space-between;align-items:end;gap:6px}.earn .label{font-size:.64rem;color:var(--muted)}.earn .amount{display:block;font:400 2.35rem/.95 var(--serif);letter-spacing:-.045em;margin-top:4px}.earn .amount small{font:400 .45em var(--sans);letter-spacing:0}.earn .period{font-size:.64rem;color:var(--muted);text-align:right;padding-bottom:2px}
.progress{padding:13px 18px 17px}.progress-row+.progress-row{margin-top:16px}.progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.68rem}.progress-head .caption{display:flex;align-items:center;gap:6px}.progress-head strong{font-weight:600;font-size:.68rem;white-space:nowrap}.progress-row.eligible strong{color:var(--blue)}.progress-row.missed strong{color:var(--clay)}.dot{width:7px;height:7px;display:inline-block;background:var(--blue);border-radius:50%;flex:none}.missed .dot{background:var(--clay)}.bar{height:7px;border-radius:100px;overflow:hidden;background:#eceff1;margin-top:8px}.bar span{display:block;height:100%;background:var(--blue);border-radius:100px}.missed .bar{height:5px;background:#f2eae7}.missed .bar span{background:var(--clay)}.progress-hint{font-size:.63rem;color:var(--muted);margin:7px 0 0}
.categories{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 17px}.categories span{background:#f4f3f0;border-radius:100px;padding:6px 9px;font-size:.61rem;color:#585c62}.view{border-top:1px solid var(--line);padding:13px 18px;display:flex;justify-content:space-between;font-size:.68rem;font-weight:600;color:var(--plum)}
.legend{display:flex;gap:16px;margin:18px 20px 0;font-size:.62rem;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px}.legend .miss .dot{background:var(--clay)}.disclaimer{font-size:.63rem;color:var(--muted);line-height:1.45;margin:18px 20px 0}
.bottom{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),402px);background:#fffefaec;backdrop-filter:blur(20px);border:1px solid #e6e5e3;border-radius:19px;display:grid;grid-template-columns:repeat(4,1fr);padding:5px;box-shadow:0 10px 30px #24243918;z-index:5}.bottom a{min-height:47px;display:grid;place-items:center;border-radius:14px;font-size:.68rem;color:var(--muted)}.bottom a.active{background:var(--plum);color:#fff;font-weight:600}
@media(min-width:620px){.app{margin:30px auto 0;min-height:900px}}
@media(max-width:350px){.mast h1{font-size:2.15rem}.recommend h2{font-size:1.9rem}.earn .amount{font-size:2.05rem}.progress-head{font-size:.62rem}.progress-head strong{font-size:.62rem}}