@font-face{font-family:BarlowCondensed;src:url('fonts/barlow-condensed-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:PlexSans;src:url('fonts/ibm-plex-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PlexSans;src:url('fonts/ibm-plex-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:PlexMono;src:url('fonts/ibm-plex-mono-500.ttf') format('truetype');font-weight:500;font-display:swap}
:root{--paper:#f4f2ec;--white:#fffefa;--ink:#152635;--muted:#5b6970;--rule:#cbd2d0;--blue:#215bd8;--blue-light:#e0eaff;--orange:#be4825;--orange-light:#fff0e7;--display:BarlowCondensed,'Arial Narrow',sans-serif;--body:PlexSans,sans-serif;--mono:PlexMono,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#dce1df;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.app{width:min(100%,430px);min-height:100vh;margin:auto;background:var(--paper);box-shadow:0 10px 65px #0b263022;position:relative;padding-bottom:94px}
.mast{padding:22px 22px 13px;background:var(--paper);border-bottom:1px solid var(--ink)}
.mast-top{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-size:2.15rem;letter-spacing:-.035em;line-height:1;text-transform:uppercase}
.logo-mark{display:inline-flex;width:22px;height:22px;margin-left:4px;vertical-align:5px;position:relative;align-items:center;justify-content:center}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;left:2px;width:18px;height:5px;background:var(--blue);transform:rotate(-32deg)}
.logo-mark:before{top:6px}.logo-mark:after{top:13px;background:var(--orange)}
.profile{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink);font:500 .65rem var(--mono);background:var(--white)}
.mast-meta{display:flex;justify-content:space-between;align-items:center;margin:21px 0 3px;font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.055em}
h1,h2,h3,p{margin-top:0}
h1{font:700 3.75rem/.88 var(--display);letter-spacing:-.022em;text-transform:uppercase;margin:0;max-width:320px}
h1 em{font-style:normal;color:var(--blue)}
.mast-sub{font-size:.77rem;color:var(--muted);margin:8px 0 0}
.route{display:block;background:var(--ink);color:var(--white);margin:14px 14px 0;padding:0;position:relative;overflow:hidden}
.route:before,.route:after{content:"";position:absolute;top:94px;width:18px;height:18px;border-radius:50%;background:var(--paper)}
.route:before{left:-9px}.route:after{right:-9px}
.route-header{padding:13px 17px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #8d9aa0;font:500 .58rem var(--mono);letter-spacing:.04em}
.route-header strong{background:var(--blue);color:#fff;padding:5px 7px;font-weight:500}
.route-main{padding:20px 18px 17px;display:grid;grid-template-columns:48px 1fr 23px;gap:12px;align-items:center}
.route-number{font:700 3.2rem/.8 var(--display);color:#9fc0ff;border-right:1px solid #6b7880}
.route-kicker{font:500 .6rem var(--mono);text-transform:uppercase;color:#afc0c8;margin-bottom:4px}
.route-name{font:700 2.7rem/.9 var(--display);text-transform:uppercase;letter-spacing:-.025em}
.route-note{font-size:.69rem;color:#d2dce0;margin:7px 0 0}
.route-arrow{font:700 2.4rem var(--display);align-self:center;color:#a9c2ff}
.route-foot{border-top:1px dashed #8d9aa0;margin:0 18px;padding:11px 0 14px;display:flex;justify-content:space-between;font:500 .58rem var(--mono);color:#c2cfd5;text-transform:uppercase}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:26px 18px 12px}
.section-head h2{font:700 2rem/.9 var(--display);text-transform:uppercase;letter-spacing:-.015em;margin:0}
.section-head a,.section-head span{font:500 .6rem var(--mono);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.reward-list{margin:0 14px}
.reward{display:block;position:relative;background:var(--white);border:1px solid var(--ink);margin-bottom:12px;overflow:hidden}
.reward-head{display:grid;grid-template-columns:32px 1fr auto;align-items:start;gap:10px;padding:14px 14px 11px;border-bottom:1px solid var(--rule)}
.reward-index{font:700 1.35rem/.9 var(--display);color:var(--blue)}
.reward-title{font-size:.82rem;line-height:1.15;font-weight:600;max-width:190px}
.reward-type{font:500 .54rem var(--mono);color:var(--muted);text-transform:uppercase;text-align:right}
.reward-main{padding:15px 14px 14px}
.reward-summary{display:flex;justify-content:space-between;align-items:end;gap:8px}
.reward-earned-label,.reward-period{font:500 .55rem var(--mono);color:var(--muted);text-transform:uppercase}
.reward-earned-value{font:700 2.75rem/.9 var(--display);letter-spacing:-.015em;margin:3px 0 0}
.reward-earned-value small{font-size:.46em;letter-spacing:0}
.reward-period{text-align:right;margin-bottom:2px}
.lanes{margin-top:17px}
.lane{display:grid;grid-template-columns:8px 1fr;gap:9px;align-items:start;margin-top:11px}
.lane-mark{width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:3px}
.lane.ineligible .lane-mark{background:var(--orange);border-radius:1px;transform:rotate(45deg)}
.lane-top{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font:500 .59rem var(--mono)}
.lane-top strong{font-size:.6rem;font-weight:500;white-space:nowrap}
.lane.eligible .lane-top strong{color:var(--blue)}
.lane.ineligible .lane-top strong{color:var(--orange)}
.lane-track{height:11px;border:1px solid var(--rule);background:repeating-linear-gradient(90deg,#edf0ed 0 7px,#fffefa 7px 11px);position:relative;margin-top:7px}
.lane-track span{height:100%;display:block;background:var(--blue)}
.lane.ineligible .lane-track span{background:repeating-linear-gradient(125deg,var(--orange) 0 6px,#ef9d80 6px 9px)}
.lane-foot{font-size:.63rem;color:var(--muted);margin:5px 0 0}
.category-row{border-top:1px solid var(--rule);padding:10px 14px 12px;display:flex;flex-wrap:wrap;gap:5px}
.category-row span{font:500 .54rem var(--mono);text-transform:uppercase;border:1px solid #86949a;padding:5px 6px;background:#f9faf7}
.reward-bottom{border-top:1px solid var(--rule);padding:9px 14px;display:flex;justify-content:space-between;font:500 .57rem var(--mono);text-transform:uppercase;color:var(--muted)}
.reward-bottom strong{font-weight:500;color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:14px 18px 0;font:500 .58rem var(--mono);text-transform:uppercase;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:50%;background:var(--blue);display:inline-block}.legend .no i{background:var(--orange);border-radius:1px;transform:rotate(45deg)}
.disclaimer{font-size:.64rem;line-height:1.4;color:var(--muted);margin:17px 18px 0}
.bottom{position:fixed;bottom:0;width:min(100%,430px);background:var(--white);border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);z-index:5;padding-bottom:env(safe-area-inset-bottom)}
.bottom a{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-right:1px solid var(--rule);font:500 .63rem var(--mono);text-transform:uppercase;color:var(--muted)}
.bottom a:last-child{border-right:0}.bottom a.active{background:var(--blue);color:#fff}.bottom b{font:700 1rem/.85 var(--display)}
@media(min-width:620px){.app{margin:34px auto 0;min-height:900px}.bottom{left:50%;transform:translateX(-50%)}}
@media(max-width:360px){h1{font-size:3.35rem}.route-name{font-size:2.35rem}.route-main{grid-template-columns:41px 1fr 20px;gap:9px}.reward-earned-value{font-size:2.4rem}.reward-title{max-width:150px}}