@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap'); :root{color-scheme:light;--bg:#f8f7fc;--surface:#fff;--surface-2:#f0eef6;--surface-3:#e9e5f2;--ink:#262331;--muted:#716c80;--primary:#6a4bc5;--primary-ink:#fff;--tint:#eae2ff;--on-tint:#493478;--line:#e7e3ee;--glass:rgba(248,247,252,.84);--green:#386746;--green-bg:#e9f1e5;--hero:#eae3f7;--shadow:0 24px 64px #3225520b;--spring:cubic-bezier(.2,.85,.25,1.25)} [data-theme=dark]{color-scheme:dark;--bg:#101014;--surface:#1b1a20;--surface-2:#24222b;--surface-3:#302b3a;--ink:#f3effa;--muted:#b0a8bd;--primary:#c5afff;--primary-ink:#30204e;--tint:#3c2e56;--on-tint:#dfd0ff;--line:#34303e;--glass:rgba(16,16,20,.84);--green:#b7d8ab;--green-bg:#283527;--hero:#282236;--shadow:0 24px 64px #0002} [data-accent=rose]{--primary:#a43b65;--tint:#fce0eb;--on-tint:#782745;--hero:#f6e6ed} [data-accent=rose][data-theme=dark]{--primary:#f5accc;--tint:#502a3c;--on-tint:#ffd5e6;--hero:#32232d} [data-accent=teal]{--primary:#28665e;--tint:#d9efe8;--on-tint:#225b50;--hero:#deeee7} [data-accent=teal][data-theme=dark]{--primary:#9adacc;--tint:#26473e;--on-tint:#c4f3e5;--hero:#202f2b} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Montserrat','Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,a,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default;opacity:.55}button,a,input,textarea{outline-offset:4px}button:focus-visible,a:focus-visible{outline:3px solid var(--primary)}button{transition:background .2s,transform .3s var(--spring),border-radius .3s var(--spring)}button:not(:disabled):active{transform:scale(.96)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}h1,h2,h3,p{margin:0}.rail{position:fixed;inset:0 auto 0 0;width:100px;border-right:1px solid var(--line);background:var(--surface);display:flex;align-items:center;flex-direction:column;z-index:10}.brand{margin:30px 0 58px;font-size:43px;font-weight:800;color:var(--ink);letter-spacing:-5px;text-decoration:none;line-height:1}.brand span{color:var(--primary)}.rail-links{width:100%;display:flex;align-items:center;flex-direction:column;gap:26px}.rail-item{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;color:var(--muted);width:88px}.rail-item svg{box-sizing:content-box;padding:12px 20px;border-radius:20px}.rail-item.selected{color:var(--on-tint);font-weight:700}.rail-item.selected svg{background:var(--tint)}.rail-bottom{margin-top:auto;padding-bottom:26px;display:flex;flex-direction:column;align-items:center;gap:24px}.rail-bottom>span{font-size:8px;letter-spacing:1px;color:var(--muted)}.avatar{width:38px;height:38px;display:grid;place-items:center;background:var(--tint);color:var(--on-tint);border-radius:15px;font-weight:700}.small{width:34px;height:34px;border-radius:50%}.workspace{margin-left:100px}.topbar{height:85px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{margin:0 12px;color:var(--muted);opacity:.5}.breadcrumb strong{font-weight:500;color:var(--ink)}.top-actions{display:flex;align-items:center;gap:18px}.prototype-label{font-size:10px;color:var(--muted);letter-spacing:.5px}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}.icon-button:hover{background:var(--surface-3)}main{max-width:1360px;margin:auto;padding:42px 48px 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--primary)}h1{font-size:32px;letter-spacing:-1.2px;margin:9px 0 10px;font-weight:700}.heading-dot{display:inline-block;margin-left:14px;color:var(--primary);font-size:35px;vertical-align:middle}.page-heading p{font-size:13px;color:var(--muted)}.text-button{display:inline-flex;align-items:center;gap:12px;color:var(--primary);font-size:12px;min-height:44px}.text-button svg{width:18px}.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;min-height:346px;overflow:hidden;border-radius:30px;background:var(--hero);isolation:isolate}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 90% 30%,#fff8,transparent 65%)}[data-theme=dark] .hero:after{opacity:.1}.hero-copy{padding:32px 0 30px 36px;z-index:2}.hero-tag{font-size:10px;letter-spacing:1px;display:inline-flex;gap:7px;align-items:center;background:var(--glass);border:1px solid #fff3;border-radius:24px;padding:7px 11px;color:var(--on-tint)}.hero-tag>span{width:5px;height:5px;background:var(--primary);border-radius:50%}.hero h2{font-size:36px;line-height:1.42;letter-spacing:-1.5px;margin:15px 0 13px;font-weight:800}.underline{position:relative;white-space:nowrap}.underline:after{content:'';position:absolute;bottom:-6px;left:0;width:100%;height:8px;border-top:3px solid var(--primary);border-radius:50%;transform:rotate(-4deg);opacity:.5}.hero p{color:var(--muted);font-size:12px;line-height:1.95}.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:0 23px;background:var(--primary);color:var(--primary-ink);border-radius:24px;font-size:13px;font-weight:600}.primary:hover{border-radius:15px;filter:brightness(1.04)}.hero-button{margin-top:23px}.hero-footnote{font-size:10px;color:var(--muted);margin-top:13px}.hero-art{position:relative;min-height:350px;align-self:stretch;transform:translateX(-12px)}.orbit{position:absolute;width:370px;height:270px;border:1px solid var(--primary);opacity:.13;border-radius:50%;top:55px;left:5%;transform:rotate(-27deg)}.orbit-two{transform:rotate(35deg);width:390px;height:220px;top:83px;left:1%}.art-card{position:absolute;width:214px;height:264px;border-radius:18px;padding:21px;color:#423650;box-shadow:0 16px 26px #32255219}.art-card.week{background:#fcfbf4;top:39px;left:8%;transform:rotate(-14deg)}.art-card.month{background:#c5b0ec;top:82px;left:39%;transform:rotate(12deg);color:#33244e}.art-card-top{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1.3px;font-weight:600}.art-card-top svg{width:18px}.art-pro{font-size:56px;letter-spacing:-4px;font-weight:700;margin-top:25px;line-height:1}.art-pro>span{display:block;font-size:11px;letter-spacing:5px;font-weight:500;margin-top:6px}.art-card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:36px}.art-card-bottom>b{font-size:39px;letter-spacing:-2px;font-weight:500;white-space:nowrap}.art-card-bottom>b>span{font-size:12px;letter-spacing:0;margin-left:4px}.art-card-bottom>span{font-size:8px;line-height:1.7;letter-spacing:.1px}.ticket-dash{position:absolute;left:0;right:0;bottom:82px;border-top:1px dashed currentColor;opacity:.25}.ticket-dash:before,.ticket-dash:after{content:'';width:16px;height:16px;border-radius:50%;position:absolute;background:var(--hero);top:-8px;left:-8px}.ticket-dash:after{left:auto;right:-8px}.art-star{position:absolute;right:5%;top:14px;color:#76559b;font-size:95px;transform:rotate(10deg);line-height:1}.mini-star{position:absolute;left:0;bottom:29px;font-size:50px;color:#7c648e}.art-dot{position:absolute;width:11px;height:11px;right:0;bottom:58px;background:#a2b589;border-radius:50%}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;margin-top:39px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-heading h2{font-size:20px;letter-spacing:-.5px}.section-heading h2>span{font-size:13px;color:var(--muted);font-weight:400;margin-left:9px}.section-heading p{font-size:11px;color:var(--muted);margin-top:7px}.season{font-size:10px;color:var(--muted);white-space:nowrap}.tabs{display:flex;align-items:center;gap:6px;padding:5px;background:var(--surface-2);border-radius:25px;width:max-content;margin:22px 0 16px}.tabs button{height:38px;padding:0 17px;border-radius:20px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px #20103906;font-weight:600}.tabs button>span{font-size:10px;background:var(--tint);color:var(--on-tint);border-radius:9px;padding:1px 5px}.task-list{display:grid;gap:10px}.task-card{background:var(--surface);padding:22px;border:1px solid var(--line);border-radius:22px;position:relative;transition:border-color .25s,transform .3s var(--spring);animation:enter .35s both}.task-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}.task-card.claimable{border-color:color-mix(in srgb,var(--green) 28%,var(--line))}.task-top{display:flex;align-items:flex-start;gap:15px}.task-icon{width:47px;height:47px;display:grid;place-items:center;flex-shrink:0;background:var(--tint);color:var(--on-tint);border-radius:17px 17px 17px 7px}.task-icon.lime{background:var(--green-bg);color:var(--green);border-radius:50%}.task-icon.peach{background:#f9e9e0;color:#965f40;border-radius:15px}.task-icon.blue{background:#e6edf9;color:#516795;border-radius:17px 7px 17px 17px}[data-theme=dark] .task-icon.peach{background:#423027;color:#e8b695}[data-theme=dark] .task-icon.blue{background:#293248;color:#b4c7ee}.task-copy{flex:1;min-width:0}.task-meta{display:flex;gap:7px;align-items:center;font-size:9px;letter-spacing:.2px;color:var(--muted);margin:1px 0 7px}.task-meta .state{color:var(--primary)}.task-meta .state.ready{color:var(--green)}.task-copy h3{font-size:15px;line-height:1.5;font-weight:600}.task-copy p{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.8}.reward-pill{display:flex;gap:4px;align-items:baseline;padding:7px 10px;border-radius:12px;background:var(--surface-2);white-space:nowrap;color:var(--on-tint);font-size:9px}.reward-pill b{font-size:18px;line-height:1}.reward-pill span{font-size:9px}.task-bottom{margin-top:19px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-left:62px}.progress-area{flex:1;max-width:220px}.progress-caption{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.progress-caption>b{font-size:10px;color:var(--ink);font-weight:500}.progress-track{height:4px;background:var(--surface-3);margin-top:8px;border-radius:8px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--primary);border-radius:8px;transition:width .5s}.claimable .progress-track span{background:var(--green)}.task-cta{font-size:11px;min-height:40px;border-radius:22px;padding:0 16px;background:var(--tint);color:var(--on-tint);white-space:nowrap;font-weight:600;display:flex;align-items:center;gap:8px}.task-cta svg{width:14px;height:14px}.claimable .task-cta{background:var(--primary);color:var(--primary-ink)}.task-cta:hover{border-radius:12px}.gentle-note{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:10px;line-height:1.6;margin:22px 0}.gentle-note svg{width:13px;height:13px}.side-column{padding-top:0}.reward-summary{background:var(--surface);border:1px solid var(--line);padding:24px;border-radius:24px}.summary-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}.summary-heading svg{color:var(--primary)}.reward-number{display:flex;align-items:baseline;gap:9px;margin:22px 0 24px;position:relative}.reward-number>strong{font-size:55px;font-weight:500;letter-spacing:-3px;line-height:1}.reward-number>span{font-size:10px;color:var(--muted)}.reward-number>.tiny-star{position:absolute;font-size:38px;right:4px;top:0;color:var(--tint)}.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:23px}.summary-stats>div{display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--line);align-items:center}.summary-stats>div:first-child{align-items:flex-start}.summary-stats>div:last-child{border:0}.summary-stats strong{font-size:19px;font-weight:500}.summary-stats span{font-size:9px;color:var(--muted)}.wallet-button{width:100%;height:44px;display:flex;justify-content:center;align-items:center;gap:23px;border:1px solid var(--line);border-radius:24px;font-size:11px;color:var(--on-tint);font-weight:500}.wallet-button:hover{background:var(--tint)}.wallet-button svg{width:16px}.reward-summary>p{text-align:center;font-size:9px;color:var(--muted);margin-top:13px}.journey{padding:28px 14px 21px}.journey .eyebrow{font-size:8px;letter-spacing:1.1px}.journey h3{font-size:19px;margin:10px 0 23px}.journey ol{padding:0;list-style:none;margin:0}.journey li{display:flex;gap:13px;padding-bottom:24px;position:relative}.journey li:not(:last-child):before{content:'';position:absolute;top:28px;bottom:0;left:14px;width:1px;background:var(--line)}.journey li>span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);font-size:10px;color:var(--primary);flex-shrink:0}.journey strong{font-size:11px;font-weight:600}.journey p{font-size:10px;color:var(--muted);line-height:1.6;margin-top:6px}.journey .text-button{font-size:11px;margin-left:42px}.friend-note{border-top:1px solid var(--line);margin:0 14px;position:relative;padding:22px 0}.friend-note>span:first-child{position:absolute;right:6px;top:22px;font-size:49px;color:var(--primary);opacity:.65}.friend-note p{font-size:15px;line-height:1.8;font-weight:500}.signature{display:block;font-size:7px;letter-spacing:1.5px;color:var(--muted);margin-top:12px}footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);padding:23px 0 28px;color:var(--muted);font-size:9px;margin-top:15px}footer>div{display:flex;align-items:center;gap:12px}footer button{font-size:9px;min-height:44px;padding:0}.color-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--primary);vertical-align:middle;margin-left:3px}.mobile-nav{display:none}dialog{border:1px solid var(--line);border-radius:30px;padding:34px;width:480px;max-width:calc(100% - 28px);max-height:88dvh;color:var(--ink);background:var(--surface);box-shadow:0 40px 120px #0004;overflow:auto}dialog[open]{animation:sheet-in .3s var(--spring)}dialog::backdrop{background:#0e091d70;backdrop-filter:blur(6px)}.close-sheet{position:absolute;right:13px;top:13px}.sheet-handle{display:none}dialog .eyebrow{margin-top:8px;margin-bottom:15px}dialog h2{font-size:26px;line-height:1.4;letter-spacing:-.7px;padding-right:16px}dialog .lead{font-size:12px;color:var(--muted);line-height:1.9;margin:13px 0 23px}dialog .primary{width:100%;margin-top:17px}dialog h3{font-size:14px;margin:23px 0 10px}dialog p{font-size:12px;line-height:1.9;color:var(--muted)}.detail-reward{padding:19px;background:var(--tint);border-radius:19px;display:flex;align-items:center;gap:14px;color:var(--on-tint);margin:20px 0}.detail-reward>strong{font-size:36px;letter-spacing:-1px}.detail-reward small{font-size:14px}.detail-reward p{color:var(--on-tint);font-size:11px}.detail-steps{padding-left:22px;font-size:12px;line-height:2;color:var(--muted)}.link-box{border:1px solid var(--line);padding:15px;border-radius:16px;background:var(--surface-2);font-size:12px;margin:18px 0;overflow-wrap:anywhere}.link-box b{display:block;margin-bottom:8px;font-size:10px;color:var(--muted);font-weight:400}.sheet-secondary{width:100%;border:1px solid var(--line);min-height:46px;border-radius:23px;margin-top:10px;font-size:12px}.sheet-secondary:hover{background:var(--surface-2)}.note-box{padding:15px;background:var(--surface-2);border-radius:15px;font-size:11px;color:var(--muted);line-height:1.9}.form-field{display:block;margin-top:18px;font-size:12px}.form-field input,.form-field textarea{display:block;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:13px;padding:12px;color:var(--ink);margin-top:8px;font-size:12px;min-height:46px;resize:vertical}.form-field textarea{min-height:92px}.form-error{color:#b63243!important;font-size:11px!important;min-height:18px;margin-top:10px}.success-shape{width:86px;height:86px;background:var(--green-bg);color:var(--green);border-radius:32% 44% 34% 44%;display:grid;place-items:center;margin:8px auto 24px;transform:rotate(-8deg)}.success-shape svg{width:39px;height:39px}.celebration{text-align:center}.celebration h2{padding:0}.wallet-list{display:grid;gap:12px;margin-top:24px}.wallet-card{padding:23px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.wallet-card-top{display:flex;justify-content:space-between;align-items:center}.wallet-card h3{font-size:18px}.wallet-card p{font-size:11px;color:var(--muted);margin:10px 0;line-height:1.8}.wallet-card .primary{min-height:42px;font-size:11px;margin-top:8px}.empty-state{padding:48px 24px;border:1px dashed var(--line);border-radius:22px;text-align:center;color:var(--muted);background:var(--surface)}.empty-state svg{width:40px;height:40px;color:var(--primary);margin-bottom:16px}.empty-state h3{font-size:16px;color:var(--ink);margin-bottom:9px}.empty-state p{font-size:12px;line-height:1.9}.empty-state button{margin-top:20px}.demo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}.demo-row button{background:var(--tint);color:var(--on-tint);padding:10px 12px;border-radius:20px;font-size:11px;min-height:44px}.demo-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.rules-list{padding:0;list-style:none}.rules-list li{font-size:12px;color:var(--muted);line-height:1.9;border-bottom:1px solid var(--line);padding:12px 0}.rules-list strong{color:var(--ink);display:block;margin-bottom:3px}.material-card{background:var(--surface-2);border-radius:18px;padding:17px;margin-top:12px}.material-card h3{margin:0 0 8px}.material-card .text-button{margin-top:5px}#toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%,20px);z-index:50;background:var(--ink);color:var(--bg);padding:13px 21px;border-radius:17px;font-size:12px;box-shadow:0 8px 30px #0002;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 36px);text-align:center;width:max-content}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes sheet-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media(min-width:1500px){main{padding-top:52px}.hero{min-height:380px}.hero-copy{padding-top:39px}.hero-art{transform:translateX(12px)}.hero h2{font-size:40px}.hero-art .week{left:12%}.hero-art .month{left:43%}} @media(max-width:1180px){main{padding:32px 28px 0}.topbar{padding:0 28px}.rail{width:84px}.workspace{margin-left:84px}.rail-item{width:78px}.content-grid{grid-template-columns:minmax(0,1fr) 268px;gap:20px}.reward-summary{padding:20px}.hero h2{font-size:32px}.hero-copy{padding-left:28px}.hero-art{transform:scale(.9);transform-origin:center}.art-card.week{left:0}.art-card.month{left:32%}.hero-footnote{font-size:9px}.task-card{padding:18px}.task-top{gap:12px}.task-bottom{padding-left:59px}.task-copy h3{font-size:14px}.reward-pill{padding:7px}.orbit{left:-10%;width:330px}.orbit-two{left:-10%;width:350px}} @media(max-width:980px) and (min-width:761px){.content-grid{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr;gap:24px}.friend-note{display:none}.hero-art{transform:scale(.82);transform-origin:left center}.hero h2{font-size:30px}.hero-copy{padding-left:25px}.hero-footnote{max-width:220px;line-height:1.8}.hero-art .month{left:28%}.top-actions{gap:9px}} @media(max-width:760px){.rail{display:none}.workspace{margin:0}.topbar{height:64px;padding:0 22px;border:0}.breadcrumb{font-size:12px}.breadcrumb span,.breadcrumb strong{display:none}.top-actions{gap:6px}.prototype-label{font-size:8px}.top-actions .avatar{display:none}main{padding:18px 20px 0}.page-heading{margin-bottom:23px}.page-heading .eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:28px;margin:9px 0}.heading-dot{font-size:29px;margin-left:8px}.page-heading p{font-size:11px}.rules-top{font-size:10px;gap:4px;align-self:flex-start;margin-top:24px}.rules-top svg{width:13px}.hero{display:block;min-height:0;border-radius:26px}.hero-copy{padding:26px 24px 25px}.hero h2{font-size:31px;line-height:1.4;position:relative;z-index:2}.hero p{font-size:11px}.hero-tag{font-size:9px}.hero-art{position:absolute;width:250px;height:290px;min-height:0;right:-95px;top:55px;transform:scale(.62);transform-origin:center;z-index:0;opacity:.88}.hero-art .week{left:-35px;top:10px}.hero-art .month{left:55px;top:90px}.art-star{top:-35px;right:20px}.hero-art .mini-star{display:none}.hero-art .orbit{left:-60px;top:20px}.hero-copy p{position:relative;z-index:2}.hero-button{margin-top:24px;min-height:46px;font-size:12px;padding:0 19px;gap:15px}.hero-footnote{position:relative;z-index:2;font-size:9px;max-width:240px;line-height:1.7;margin-top:12px}.content-grid{display:flex;flex-direction:column;gap:12px;margin-top:29px}.section-heading h2{font-size:19px}.section-heading p{font-size:10px}.season{font-size:9px}.tabs{margin-top:19px;margin-bottom:13px}.tabs button{font-size:11px;padding:0 14px}.task-card{padding:18px 16px;border-radius:21px}.task-icon{width:40px;height:40px;border-radius:14px 14px 14px 5px}.task-icon svg{width:21px}.task-top{gap:11px}.task-copy h3{font-size:13px}.task-copy p{font-size:10px}.task-meta{font-size:8px;gap:4px;margin-bottom:6px}.reward-pill{gap:2px;padding:7px;border-radius:10px}.reward-pill b{font-size:16px}.reward-pill>span{font-size:8px}.reward-pill .pro-label{display:none}.task-bottom{padding-left:51px;gap:12px;margin-top:17px}.progress-caption,.progress-caption>b{font-size:9px}.task-cta{min-height:44px;font-size:10px;padding:0 12px;gap:6px}.progress-area{max-width:none}.gentle-note{font-size:9px;gap:6px;margin:21px 0}.reward-summary{padding:22px}.reward-number{margin:18px 0}.journey{padding:28px 10px 0}.journey h3{font-size:21px}.journey li{padding-bottom:25px}.journey strong{font-size:12px}.journey p{font-size:11px}.friend-note{display:none}footer{flex-direction:column;padding:22px 0 102px;margin-top:24px;gap:8px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(20px);border-top:1px solid var(--line);z-index:10;justify-content:center;gap:42px;padding:10px 15px calc(10px + env(safe-area-inset-bottom))}.mobile-nav button{display:flex;align-items:center;gap:8px;padding:11px 18px;min-height:44px;border-radius:24px;font-size:11px;color:var(--muted)}.mobile-nav button.selected{background:var(--tint);color:var(--on-tint)}.mobile-nav svg{width:19px;height:19px}.mobile-nav button>span{font-size:10px}dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:92dvh;border-radius:28px 28px 0 0;padding:34px 24px calc(28px + env(safe-area-inset-bottom))}.sheet-handle{display:block;position:absolute;top:10px;left:calc(50% - 16px);width:32px;height:4px;background:var(--line);border-radius:8px}.close-sheet{top:20px;right:13px}#toast{bottom:91px;font-size:11px}dialog h2{font-size:24px}} @media(max-width:375px){main{padding-left:14px;padding-right:14px}.hero-copy{padding-left:19px}.hero h2{font-size:28px}.hero-art{right:-112px;opacity:.7}.task-card{padding:16px 12px}.task-top{gap:8px}.task-bottom{padding-left:0;margin-top:18px}.task-copy h3{font-size:12px}.rules-top{display:none}.mobile-nav{gap:14px}.reward-pill{padding:6px}.hero-footnote{font-size:8px}.heading-dot{font-size:24px}.gentle-note{font-size:8px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* V3 typography: Montserrat Latin/numerals + CJK fallback. Preserve the approved composition; give functional text a readable hierarchy. */ body { font-synthesis: none; } h1 { font-weight: 700; letter-spacing: -.6px; } .hero h2 { font-weight: 800; letter-spacing: -.7px; } .art-pro { font-weight: 800; letter-spacing: -2px; } .reward-number > strong { font-weight: 600; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; } .task-copy h3 { color: var(--ink); font-size: 16px; font-weight: 600; } .task-copy p { font-size: 13px; line-height: 1.8; } .task-meta, .progress-caption, .progress-caption > b { font-size: 11px; } .task-cta, .tabs button { font-size: 12px; } .reward-pill b { font-weight: 700; } .hero p { font-size: 13px; } .hero-footnote { font-size: 11px; } .summary-stats span, .reward-summary > p { font-size: 11px; } .reward-number > span { font-size: 12px; } .journey strong { font-size: 13px; } .journey p { font-size: 12px; } @media(max-width:760px) { .task-copy h3 { font-size: 15px; } .task-copy p { font-size: 12px; } .task-meta, .progress-caption, .progress-caption > b { font-size: 11px; } .task-cta { font-size: 12px; } .task-bottom { padding-left: 0; flex-wrap: wrap; } .progress-area { min-width: 140px; } .hero p { font-size: 12px; max-width: 210px; } .hero-footnote { max-width: 210px; font-size: 10px; } .hero-art { top: 94px; right: -95px; } .section-heading p, .page-heading p { font-size: 12px; } .reward-summary > p { font-size: 11px; } } :root { --on-hero: #625b72; } [data-theme=dark] { --on-hero: #b0a8bd; } .hero p, .hero-footnote { color: var(--on-hero); } @media(max-width:760px) { .hero p, .hero-footnote { max-width: 185px; font-size: 12px; } } :root { --danger: #a93443; } [data-theme=dark] { --danger: #ffb2b9; } .form-error { color: var(--danger)!important; } @media(max-width:760px) { .page-heading { position: relative; } .page-heading > div { width: 100%; } .page-heading .rules-top { position: absolute; top: -12px; right: 0; margin: 0; white-space: nowrap; } } /* Referral artwork has a measured slot; both seven-day passes stay inside it. */ .hero { display: block; min-height: 0; } .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding: 32px 36px; } .hero-tag { grid-column: 1; justify-self: start; } .hero h2, .hero-copy > p { grid-column: 1; } .hero-copy > p, .hero-footnote { max-width: none; } .hero-footer { display: contents; } .hero-actions { grid-column: 1; } .hero .hero-art { position: relative; grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: center; width: 100%; max-width: 428px; height: auto; min-height: 0; aspect-ratio: 428 / 370; top: auto; right: auto; transform: none; opacity: 1; container-type: inline-size; } .hero-deck { position: absolute; inset: 0; } .hero .art-card { width: 50%; height: 71.351%; padding: 4.907cqw; border-radius: 4.206cqw; box-shadow: 0 1.4cqw 2.8cqw #32255219; } .hero .art-card.week { left: 5.607%; top: 6.486%; transform: rotate(-8deg); } .hero .art-card.month { left: 41.589%; top: 20.541%; transform: rotate(8deg); } .hero .art-card-top { font-size: 1.636cqw; letter-spacing: .304cqw; } .hero .art-card-top svg { width: 4.206cqw; height: 4.206cqw; } .hero .art-pro { font-size: 13.084cqw; margin-top: 5.841cqw; letter-spacing: -.467cqw; } .hero .art-pro > span { font-size: 2.57cqw; letter-spacing: 1.168cqw; margin-top: 1.402cqw; } .hero .art-card-bottom { margin-top: 8.411cqw; } .hero .art-card-bottom > b { font-size: 9.112cqw; letter-spacing: -.467cqw; } .hero .art-card-bottom > b > span { font-size: 2.804cqw; margin-left: .935cqw; } .hero .art-card-bottom > span { font-size: 1.869cqw; letter-spacing: .023cqw; } .hero .ticket-dash { bottom: 19.159cqw; } .hero .ticket-dash::before, .hero .ticket-dash::after { width: 3.738cqw; height: 3.738cqw; top: -1.869cqw; left: -1.869cqw; } .hero .ticket-dash::after { left: auto; right: -1.869cqw; } .hero .orbit { left: 3.271%; top: 17.297%; width: 92.056%; height: 66.216%; transform: rotate(-12deg); } .hero .orbit-two { left: 7.009%; top: 20.27%; width: 84.112%; height: 60.811%; transform: rotate(15deg); } .hero .art-star { left: 85.981%; top: 2.973%; right: auto; font-size: 8.411cqw; line-height: 1; } .hero .mini-star, .hero .art-dot { display: none; } @media (max-width: 760px) { .hero-copy { display: block; padding: 26px 24px 25px; } .hero-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; } .hero-actions { flex: 1 0 112px; min-width: 0; } .hero .hero-art { flex: 0 0 196px; width: 196px; margin-inline: auto; } .hero-button { margin-top: 0; min-height: 48px; padding-inline: 16px; gap: 10px; } .hero-button svg { width: 16px; height: 16px; } } /* Referral tasks and passes share one page; only task filters replace list content. */ .content-grid { grid-template-areas: "tasks rewards" "tasks journey"; grid-template-rows: auto 1fr; row-gap: 28px; } .task-section { grid-area: tasks; min-width: 0; } .rewards-column { grid-area: rewards; min-width: 0; } .side-column { grid-area: journey; min-width: 0; } .wallet-section { margin-top: 24px; } .wallet-list { margin-top: 16px; } #wallet-title, #section-title { scroll-margin-top: 24px; } .wallet-card-top { gap: 12px; align-items: flex-start; } .wallet-card-top h3 { min-width: 0; overflow-wrap: anywhere; } .wallet-card-top .reward-pill { flex-shrink: 0; } @media (min-width: 761px) and (max-width: 980px) { .content-grid { grid-template-columns: minmax(0, 1fr) 268px; } .side-column { display: block; } } @media (max-width: 760px) { .content-grid { gap: 32px; } .journey { padding-top: 0; } footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } #toast { bottom: calc(24px + env(safe-area-inset-bottom)); } }