:root{color-scheme:dark;--bg:#111315;--panel:#1d2122;--line:#303635;--green:#3ddc84;--text:#f8f8f8;--muted:#a6b0ad}*{box-sizing:border-box}body{margin:0;background:#090c0b;color:var(--text);font:16px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;display:flex;align-items:center;justify-content:center;gap:110px;min-height:100dvh;padding:32px;background-image:radial-gradient(ellipse at 74% 45%,#18312666,transparent 52%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.presentation{width:390px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;max-height:830px}.brand{font-size:24px;font-weight:850;color:white;text-decoration:none;letter-spacing:-1px}.brand:first-letter{color:var(--green)}h1{font-size:60px;line-height:1.02;letter-spacing:-3px;margin:24px 0}em{font-style:normal;color:var(--green)}p{line-height:1.55;color:var(--muted)}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:750}.footnote{font-size:12px}.reset{background:none;border:0;color:var(--muted);padding:8px 0;font-size:14px}.steps{display:flex;gap:6px}.steps i{width:23px;height:3px;background:#303936;border-radius:3px}.steps i.on{background:var(--green)}.device{width:390px;height:812px;flex-shrink:0;background:var(--bg);border:7px solid #303534;border-radius:52px;box-shadow:0 25px 100px #0009,0 0 0 2px #0a0b0a;overflow:hidden;position:relative;display:flex;flex-direction:column}.status{height:45px;flex-shrink:0;padding:13px 22px 0;display:flex;justify-content:space-between;font-size:12px;position:relative}.island{position:absolute;width:100px;height:25px;left:50%;top:7px;transform:translateX(-50%);background:#050606;border-radius:20px}main{padding:18px 22px 20px;overflow-y:auto;flex:1;scrollbar-width:none}main>section{animation:enter .3s ease}h2{font-size:30px;line-height:1.1;letter-spacing:-1px;margin:9px 0 23px}h3{font-size:18px;margin:0 0 10px;letter-spacing:-.3px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.small{font-size:13px;color:var(--muted)}.pill{padding:7px 10px;background:#21372b;border:1px solid #345441;border-radius:30px;color:var(--green);font-size:12px}.avatar{width:42px;height:42px;display:grid;place-items:center;background:#343f36;color:var(--green);border-radius:50%;font-weight:750}.card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:21px;margin-bottom:14px}.balance{background:var(--green);color:#0b2416;border:0;position:relative;overflow:hidden}.balance:after{content:'↯';font-size:160px;position:absolute;right:0;top:-35px;opacity:.13}.balance .small{color:#215b3a}.number{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1.2}.unit{font-size:16px;font-weight:500;letter-spacing:0}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.stats .card{margin:0;padding:16px}.stats strong{font-size:24px;display:block;margin-top:7px}.primary,.secondary{width:100%;padding:16px;border:0;border-radius:14px;font-weight:750;margin:8px 0;color:#0c2417;background:var(--green);min-height:52px}.secondary{background:#272e2b;color:white;border:1px solid #3b4540}.textbutton{background:none;border:0;color:var(--green);font-size:14px;padding:6px 0}.progress{height:6px;background:#39423e;border-radius:6px;overflow:hidden;margin:16px 0 10px}.progress div{height:100%;background:var(--green)}nav{display:flex;border-top:1px solid #2a302d;background:#141817;padding:10px 6px 8px;flex-shrink:0}nav button{flex:1;background:none;border:0;color:#8c9792;font-size:10px;padding:3px 0;min-height:46px}nav button svg{display:block;width:22px;height:22px;margin:0 auto 5px}nav button.active{color:var(--green)}.homebar{height:17px;flex-shrink:0;position:relative}.homebar:after{content:'';width:112px;height:4px;border-radius:5px;background:#ddd;position:absolute;left:50%;bottom:6px;transform:translateX(-50%)}.splash{display:flex;min-height:100%;flex-direction:column;justify-content:space-between;text-align:center;padding-top:38px}.splash .mark{font-size:108px;color:var(--green);line-height:1}.splash h2{font-size:37px;letter-spacing:-1.8px;margin:10px 0}.splash h3{font-size:42px;line-height:1.05;letter-spacing:-2px;margin:30px 0}.orbit{height:170px;display:grid;place-items:center;position:relative}.orbit:before,.orbit:after{content:'';position:absolute;border:1px solid #3ddc8435;border-radius:50%;width:164px;height:164px;transform:rotate(-22deg) scaleX(1.5)}.orbit:after{width:118px;height:118px}.map{height:235px;border-radius:22px;overflow:hidden;background:#202b26;position:relative;margin:12px 0 18px}.map svg{width:100%;height:100%}.map .pill{position:absolute;top:12px;left:12px;background:#15221eef}.map small{position:absolute;bottom:10px;right:12px;font-size:11px;color:#c2ccc5}.back{color:white;background:none;border:0;font-size:23px;padding:0 10px 0 0}.success{text-align:center;padding-top:18px}.seal{width:100px;height:100px;border-radius:50%;background:#203b2c;color:var(--green);display:grid;place-items:center;font-size:50px;margin:8px auto 25px;border:1px solid #3b8156;box-shadow:0 0 45px #3ddc8412}.success h2{font-size:33px;margin-bottom:13px}.points{font-size:55px;color:var(--green);font-weight:800;letter-spacing:-2px;margin:22px 0 0}.coffee{height:168px;display:grid;place-items:center;background:radial-gradient(ellipse,#71654f,#282b25 75%);border-radius:16px;margin:-8px -8px 17px}.coffee svg{width:135px;height:135px}.reward-card{width:100%;text-align:left;color:white;cursor:pointer}.ticket{background:#e9f1e9;color:#183523;text-align:center;border-radius:17px;padding:25px;margin:20px 0;border:2px dashed #7f9984}.ticket p{color:#45654e}.ticket strong{font-size:26px;letter-spacing:2px}.listrow{padding:14px 0;border-bottom:1px solid var(--line)}.badges{display:flex;gap:12px;margin-top:15px}.badges div{background:#23382b;border-radius:14px;padding:15px 8px;flex:1;text-align:center;font-size:23px}.badges small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.notice{font-size:12px;color:var(--muted);text-align:center;margin:15px 0}.live-number{text-align:center;font-size:64px;font-weight:800;letter-spacing:-3px}.live-number small{font-size:20px;letter-spacing:0;color:var(--muted)}@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@media(max-width:900px){body{gap:40px}.presentation{width:280px}h1{font-size:46px}}@media(max-width:700px){body{padding:0;background:var(--bg);display:block}.presentation{display:none}.device{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none;max-width:480px;margin:auto}.status{padding-top:max(13px,env(safe-area-inset-top));height:45px}main{padding-top:18px}nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}.homebar{display:none}.splash{padding-bottom:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Visual direction from the supplied RideRewards screenboard. */
:root{--bg:#050a0b;--panel:#11191b;--line:#253132;--green:#27f585;--muted:#b9c4c7}body{background:#0c171b;background-image:radial-gradient(ellipse at 70% 45%,#24403c77,transparent 60%)}.device{background:linear-gradient(155deg,#10191c 0,#020606 45%,#06100e 100%);border-color:#596160;box-shadow:0 20px 100px #000b,0 0 0 2px #131715}.card{border-radius:13px;background:linear-gradient(125deg,#182224,#0b1112);padding:16px;box-shadow:inset 0 1px 0 #ffffff04}.primary{background:linear-gradient(110deg,#87ffb1,#23f17e);border-radius:16px;box-shadow:0 0 20px #27f58512}.secondary{background:#060b0c}.balance{background:linear-gradient(130deg,#172325,#0a1112);color:var(--green);border:1px solid var(--line)}.balance .small{color:var(--muted)}.balance:after{display:none}.number{font-size:38px}.green{color:var(--green)}h2{font-size:26px;letter-spacing:-.7px}nav{background:#050b0c}nav button{font-size:12px}nav button.active svg{filter:drop-shadow(0 0 5px #27f58577)}.pill{background:#102b20;color:var(--green);border-color:#1d4e37}.rr-logo{display:block;width:88px;aspect-ratio:78/70;background:url('logo.svg') center / contain no-repeat;margin:0 auto 15px}.gold-badge{display:block;width:100px;aspect-ratio:91/98;background:linear-gradient(140deg,#4a3b1d,#111919);margin:auto}.page-splash{padding:0;position:relative}.splash{position:relative;isolation:isolate;padding:42px 22px 16px;min-height:100%;overflow:hidden;justify-content:space-between}.splash:before{content:'';position:absolute;inset:0;z-index:-2;background:url('public-photos.png') left center / 200% 100% no-repeat;filter:brightness(.8)}.splash:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#0a1726dd,transparent 40%,#02090a00 55%,#020607 100%)}.splash .rr-logo{width:86px}.splash h2{font-size:34px;font-style:italic;font-weight:800;margin:8px 0}.splash p{color:white;margin-top:5px;font-size:15px}.splash .notice{font-size:12px;color:#bbc9c6}.signature{font-family:Georgia,serif;font-size:27px;font-style:italic;transform:rotate(-7deg);margin:0 0 26px;color:white}.splash-bottom{padding-top:200px}.splash-brand{filter:drop-shadow(0 2px 10px #0006)}.home-stats{gap:10px;margin-top:0}.home-stats strong{color:var(--green);font-size:26px;margin-top:5px}.home-stats .card{padding:14px}.home-stats .unit{font-size:13px;color:white}.metric-button{text-align:left;color:white;width:100%;font:inherit}.home-stats .progress{margin:10px 0 0}.level{position:relative}.level .gold-badge{position:absolute;right:6px;top:15px;width:47px}.next-reward .row{align-items:flex-start}.next-reward h3{font-size:17px}.next-reward .small{margin:7px 0;font-size:14px}.reward-thumb{width:80px;height:82px;flex-shrink:0;background:url('public-photos.png') right center / 200% 100% no-repeat;border-radius:9px}.next-reward .primary{margin-bottom:0}.top{margin-bottom:18px}.avatar{border:1px solid #2a6849;background:#143622}.ride-start{text-align:center;padding-top:16px}.ride-start h2{margin:35px 0 20px;font-size:25px;line-height:1.4}.ready{color:var(--green);font-size:13px}.start-orbit{width:230px;height:230px;border-radius:50%;border:4px solid var(--green);box-shadow:inset 0 0 0 7px #091918,0 0 35px #23f17e25;background:linear-gradient(135deg,#3f505666,#080d0f 40%);display:grid;place-items:center;margin:28px auto 0}.start-orbit svg{width:103px;height:103px}.ride-start>.primary{position:relative;width:75%;margin-top:-20px}.ride-modes{display:flex;gap:12px;margin-top:27px}.ride-modes>span{flex:1;padding:14px 8px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:#94a09e}.ride-modes svg{width:24px;height:24px;display:block;margin:0 auto 7px}.ride-modes .selected{border-color:var(--green);color:var(--green)}.ride-timer{text-align:center;font-size:42px;font-weight:700;letter-spacing:-1px;margin:8px 0 22px;font-variant-numeric:tabular-nums}.ride-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.ride-metrics>div{border-right:1px solid var(--line)}.ride-metrics>div:last-child{border:0}.ride-metrics span{font-size:12px;color:var(--muted)}.ride-metrics strong{display:block;font-size:25px;margin-top:8px}.ride-metrics small{font-size:14px}.reference-map{background:#162620;height:280px;border-radius:12px;margin-bottom:12px}.reference-map small{background:#081210cc;padding:4px;border-radius:4px}.live-screen [data-action=finish]{background:linear-gradient(#ff4135,#ff201c);color:white}.live-screen h3{margin:0}.live-screen .secondary{padding:12px;min-height:45px}.reference-coffee{height:auto;aspect-ratio:210/145;background:url('public-photos.png') right center / 200% 100% no-repeat;border-radius:10px;margin:0 0 18px}.challenge-label{display:inline-block;border-radius:20px;background:var(--green);color:#062815;padding:9px 15px;font-size:14px;font-weight:700;margin-bottom:19px}.mini-badge{width:45px;flex-shrink:0}.mini-badge .gold-badge{width:42px}.challenge-label~.card h3{font-size:16px}.celebration{padding:30px 0;margin-bottom:24px;background:radial-gradient(ellipse,#f5b6321c,transparent 70%)}.celebration .gold-badge{width:145px}.seal{color:#ffdc7a;border-color:#c69b40;background:linear-gradient(145deg,#5a4624,#131613);box-shadow:0 0 45px #f2bf4417}.reward-cost{font-size:14px;color:#ffcf61;margin:14px 0 0}.reward-preview{margin-bottom:10px}.reward-preview h3{margin-bottom:5px}.badges>div{background:transparent;border:1px solid #51462e}.badges .gold-badge{width:54px}.ticket{background:#111c18;color:white;border-color:#49735b}.ticket p{color:var(--muted)}.presentation .brand{font-style:italic;color:var(--green)}.presentation h1{font-size:58px}.stats .card strong{color:var(--green)}@media(max-width:700px){.splash-bottom{padding-top:180px}.page-splash{padding:0}.device{background:linear-gradient(155deg,#10191c,#020606 55%,#06100e)}.status{background:#10191c}.reference-map{height:260px}}@media(max-height:760px){.splash{padding-top:20px}.splash-bottom{padding-top:130px}.ride-start h2{margin-top:18px}.start-orbit{width:190px;height:190px}.ride-modes{margin-top:15px}}

.gold-badge{display:grid;place-items:center;border:3px solid #eec15e;border-radius:24%;color:#ffd36f;box-shadow:inset 0 0 0 3px #211e15,0 0 18px #ffc54222}.gold-badge svg{width:65%;height:65%}.rr-logo{aspect-ratio:1}.reference-coffee{aspect-ratio:3/2}.splash:before{background-size:200% 100%}