@import url('fontfaces.css?v=2');
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.preview{min-height:100vh;max-width:470px;margin:auto;background:var(--surface);box-shadow:0 0 0 1px var(--line)}.top{padding:24px 23px 6px}.brand-row{display:flex;align-items:center;justify-content:space-between}.brand{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.07em}.brand i{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:1px}.avatar{height:32px;width:32px;border-radius:50%;background:var(--avatar);color:var(--avatar-ink);display:grid;place-items:center;font-size:.68rem;font-weight:800}.eyebrow{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--sub);margin:28px 0 8px}.top h1{font-family:var(--display);font-size:2.05rem;line-height:1.03;letter-spacing:-.055em;margin:0 0 20px;font-weight:700}.content{padding:0 18px 100px}.recommend{background:var(--recommend);color:var(--recommend-ink);border:1px solid var(--recommend-line);border-radius:var(--radius);padding:17px 18px;display:flex;align-items:center;gap:12px;min-height:89px}.recommend .icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--small-radius);background:var(--icon-bg);color:var(--icon-ink);font-weight:800;flex:none}.recommend small,.recommend strong{display:block}.recommend small{font-size:.7rem;opacity:.77}.recommend strong{font-family:var(--display);font-size:1.2rem;letter-spacing:-.04em;line-height:1.12;margin:3px 0}.recommend .arrow{margin-left:auto;font-size:1.15rem}.section-head{display:flex;align-items:center;justify-content:space-between;margin:25px 2px 12px}.section-head h2{font-family:var(--display);font-size:1.28rem;letter-spacing:-.045em;margin:0}.section-head a{font-size:.7rem;font-weight:800;color:var(--accent)}.reward-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:var(--shadow)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-name{font-family:var(--display);font-size:.93rem;font-weight:700;letter-spacing:-.03em}.type{font-size:.63rem;font-weight:800;color:var(--type-ink);background:var(--type-bg);border-radius:100px;padding:6px 9px;white-space:nowrap}.earned{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}.earned small{display:block;color:var(--sub);font-size:.69rem}.earned strong{font-family:var(--display);display:block;font-size:2rem;letter-spacing:-.065em;line-height:1.1;margin-top:3px;font-weight:700}.meter{margin-top:18px}.meter-head{display:flex;justify-content:space-between;gap:10px;font-size:.7rem}.meter-head strong{font-weight:800;color:var(--ink);white-space:nowrap}.track{height:8px;background:var(--track);border-radius:100px;overflow:hidden;margin:7px 0}.track span{height:100%;display:block;background:var(--eligible);border-radius:100px}.meter-foot{display:flex;justify-content:space-between;color:var(--sub);font-size:.67rem}.meter-head.no-bonus{margin-top:13px;color:var(--ineligible)}.meter-head.no-bonus strong{color:var(--ineligible)}.track.no-bonus span{background:var(--ineligible)}.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}.tags span{padding:5px 8px;border:1px solid var(--tag-line);background:var(--tag);color:var(--tag-ink);border-radius:var(--tag-radius);font-size:.64rem;font-weight:700}.note{color:var(--sub);font-size:.64rem;line-height:1.4;margin:11px 0 0}.footer-note{font-size:.63rem;color:var(--sub);line-height:1.45;padding:5px 2px 0}.bottom{position:fixed;bottom:0;width:min(470px,100%);padding:10px 15px max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:var(--nav);border-top:1px solid var(--line);backdrop-filter:blur(18px);z-index:2}.bottom a{text-align:center;font-size:.65rem;min-height:39px;display:grid;place-items:center;color:var(--sub);border-radius:var(--small-radius)}.bottom a.active{color:var(--accent);background:var(--nav-active);font-weight:800}
.direction-a{--body:'Manrope',sans-serif;--display:'Manrope',sans-serif;--page:#eeeae0;--surface:#f7f5ee;--ink:#252a23;--sub:#697167;--accent:#27614a;--line:#e4e3d9;--card:#fffefa;--recommend:#dcebe0;--recommend-ink:#1f3c2c;--recommend-line:#c7ddce;--icon-bg:#245d45;--icon-ink:#fff;--avatar:#e8e5d8;--avatar-ink:#465145;--type-bg:#eaf3e9;--type-ink:#2a6849;--track:#e9eae3;--eligible:#277353;--ineligible:#c58c53;--tag:#f4f5ed;--tag-line:#dce3d6;--tag-ink:#435347;--tag-radius:100px;--radius:20px;--small-radius:11px;--nav:#f7f5eef2;--nav-active:#e5ede4;--shadow:0 8px 28px #283b2110}
.direction-b{--body:'Space Grotesk',sans-serif;--display:'Space Grotesk',sans-serif;--page:#070c0b;--surface:#0d1412;--ink:#f4f8f4;--sub:#a3b4a9;--accent:#a8f5ba;--line:#2c3932;--card:#17221c;--recommend:#b7f2bf;--recommend-ink:#14231b;--recommend-line:#b7f2bf;--icon-bg:#193524;--icon-ink:#b7f2bf;--avatar:#254532;--avatar-ink:#c9f7d2;--type-bg:#294235;--type-ink:#b3f5c1;--track:#34453a;--eligible:#a8f5ba;--ineligible:#ff9e6e;--tag:#253a2b;--tag-line:#3d5542;--tag-ink:#c3f5ca;--tag-radius:6px;--radius:12px;--small-radius:6px;--nav:#101a15f2;--nav-active:#294333;--shadow:none}.direction-b .eyebrow,.direction-b .meter-foot,.direction-b .footer-note{font-family:'DM Mono',monospace}.direction-b .recommend strong{font-size:1.32rem}
.direction-c{--body:'Outfit',sans-serif;--display:'Outfit',sans-serif;--page:#e9e9e4;--surface:#fafaf7;--ink:#181b1e;--sub:#62686a;--accent:#d23f34;--line:#171b1d;--card:#fff;--recommend:#f4dd65;--recommend-ink:#181b1e;--recommend-line:#171b1d;--icon-bg:#d23f34;--icon-ink:#fff;--avatar:#181b1e;--avatar-ink:#fff;--type-bg:#f8e6df;--type-ink:#a3332c;--track:#e3e5e3;--eligible:#d23f34;--ineligible:#617a8a;--tag:#fff;--tag-line:#171b1d;--tag-ink:#181b1e;--tag-radius:3px;--radius:4px;--small-radius:3px;--nav:#fafaf7f2;--nav-active:#f4dd65;--shadow:3px 3px 0 #1b1d1d}.direction-c .reward-card{border-width:1.5px}.direction-c .eyebrow{color:#b3372e}.direction-c .section-head h2{font-size:1.45rem}
@media(min-width:650px){.preview{margin:30px auto 0;min-height:900px;border-radius:24px 24px 0 0;overflow:hidden}.bottom{margin-left:0}}