#app{display:flex;flex-direction:column;min-height:100dvh;max-width:25rem;margin-inline:auto;padding:0 1rem 1rem}
header{padding:10px 0 16px}
.hrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:38px}
.back{justify-self:start;appearance:none;background:none;border:0;padding:8px;line-height:0;cursor:pointer;color:var(--primary)}
.back[hidden]{display:block;visibility:hidden}
header h1{font-size:12px;font-weight:700}
.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 16px}
.bar i{display:block;position:relative;height:4px;border-radius:6px;background:var(--primary-light);overflow:hidden}
.bar b{position:absolute;inset:0;border-radius:6px;background:var(--primary);transition:width .16s}
.screen{flex:1 0 auto;display:flex;flex-direction:column;animation:fade 1.25s}
@keyframes fade{from{opacity:0}}
.title{font:700 1.375rem/1.75rem var(--font-display);letter-spacing:.36px;text-align:center;max-width:325px;margin-inline:auto}
.sub{text-align:center;letter-spacing:-.025em;line-height:1.5rem;max-width:335px;margin:.5rem auto 0}
.submit{position:sticky;bottom:0;z-index:5;margin-top:auto;padding-top:1rem;box-shadow:0 -1rem 1.5rem .5rem #fff,0 1.5rem 0 1rem #fff;background:#fff}
.submit[hidden]{display:none}
.btn.timer::before{content:"";position:absolute;inset:0;width:0;border-radius:inherit;background:var(--primary);animation:fill 3s linear forwards}
@keyframes fill{to{width:100%}}

.gender .title{font-size:26px;line-height:normal;text-transform:uppercase;margin-bottom:1.5rem}
.gender .sub{font-size:1.125rem;line-height:1.75rem;text-transform:uppercase;text-wrap:balance;letter-spacing:0;max-width:none;margin:0 auto 1rem}
.gender .ask{color:#8696a6;font-size:.875rem;font-weight:700;text-align:center;margin:1.75rem auto 4rem}
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.gcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;aspect-ratio:1.0375;padding:0;border:1px solid #0000;border-radius:1rem;background:var(--primary-light);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease-out}
.gcard:active{transform:scale(.95)}
.gcard[aria-current=true]{border-color:var(--primary);box-shadow:0 0 .25rem #00000026}
.gcard img{position:absolute;bottom:2.4rem;left:50%;width:90%;transform:translateX(-50%)}
.gcard span{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;padding:10px 5px;border-radius:0 0 .75rem .75rem;background:var(--primary);font-size:1rem}
.legal{color:#8696a6;font-size:.75rem;line-height:1rem;letter-spacing:-.025em;text-align:center;margin-top:2rem}
.legal a{color:#3198ff}

.q hgroup{margin-bottom:2rem}
.opts{display:flex;flex-direction:column;gap:.75rem}
.opts .card{min-height:0}
.opts .card span{line-height:1.5rem}
.card.noicon{padding:1.125rem 1rem}
.card .icon{width:36px;height:36px;flex:none}
.onbg{max-width:65%}
.onbg hgroup{max-width:calc(100vw - 2rem);width:358px}
.bgimg{position:fixed;right:0;bottom:0;z-index:-1;width:54%;max-width:540px;animation:slide 1s cubic-bezier(.39,.575,.565,1) both}
@keyframes slide{from{opacity:0;transform:translateX(50%)}}
.multi{gap:1rem;margin-bottom:2rem}
.multi .card{display:grid;grid-template-columns:1fr auto;min-height:63px}
.multi .card:has(input:checked){border-color:var(--primary);box-shadow:var(--card-shadow-selected)}
.multi input{appearance:none;display:grid;place-content:center;width:1.5rem;height:1.5rem;margin:0;border:.125rem solid var(--primary);border-radius:.375rem;background:var(--card);pointer-events:none}
.multi input::before{content:"";width:.875rem;height:.875rem;transform:scale(0);transition:transform .15s ease-in-out;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8.25L6.5 12.25L13.75 3.75' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.multi input:checked{background:var(--primary)}
.multi input:checked::before{transform:scale(1)}

.info{padding-bottom:.5rem}
.info .title{font-size:2rem;line-height:1.2;text-align:start}
.info.sm .title{font-size:1.375rem;line-height:1.2}
.info.green .title{color:var(--primary)}
.info .text{max-width:325px;margin:1rem auto 0;line-height:1.5rem}
.info .text p+p{margin-top:1.5rem}
.info .img{margin-bottom:.75rem;padding:0 .5rem}
.info .img img{margin-inline:auto;border-radius:1rem}
.info .img.bottom{margin-top:2rem}

.report .title{margin-bottom:1.25rem;line-height:normal;max-width:none}
.rcard{padding:.875rem 1.25rem 0;border-radius:1rem;background:var(--card);box-shadow:var(--card-shadow)}
.level{padding-top:.2rem;margin-bottom:1rem}
.ltitle,.pl{font-size:.875rem;font-weight:700}
.ltitle{margin-bottom:3rem}
.track{position:relative;height:.25rem;box-sizing:content-box;border:3px solid #fff;border-radius:2.5rem;background:linear-gradient(90deg,#e85a64 0%,#fcc84d 38%,#fcd54d 57%,#68bb88 100%);box-shadow:var(--card-shadow)}
.tip{position:absolute;bottom:1.3rem;transform:translateX(-50%);padding:.125rem .625rem;border-radius:.375rem;background:#fef1cb;font-size:.75rem;font-weight:600;line-height:1rem;white-space:nowrap;animation:fadein .5s 1.3s both}
.tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid #0000;border-top-color:#fef1cb}
.dot{position:absolute;top:0;width:.875rem;height:.875rem;border:3px solid #ffc51f;border-radius:50%;background:#fff;box-sizing:content-box;transform:translate(-50%,-40%);animation:slideltr 1.2s cubic-bezier(.39,.575,.565,1) .2s both}
@keyframes slideltr{from{left:0}}
@keyframes fadein{from{opacity:0}}
.legend{display:flex;flex-direction:row-reverse;justify-content:space-between;margin-top:1rem;color:var(--muted);font-size:.75rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.legend .on{color:#ff9d00;font-weight:700}
.bars{display:flex;flex-direction:column;gap:1rem;padding-top:.2rem;margin-bottom:1.25rem}
.pl{margin-bottom:.4rem;font-weight:500}
.pl b{font-weight:700}
.pt{height:.5rem;border-radius:1rem;background:var(--bg);overflow:hidden}
.pt i{display:block;height:100%;width:var(--w);border-radius:inherit;animation:grow 1.2s cubic-bezier(.39,.575,.565,1) .2s both}
@keyframes grow{from{width:0}}
.mind .pt i{background:var(--primary)}
.agility .pt i{background:#ffc51f}
.alert{display:grid;grid-template-columns:auto 1fr;gap:.75rem;margin-bottom:1.25rem;padding:.75rem 1rem;border:1px solid #ffc51f;border-radius:.625rem;background:#fcce4d4a;animation:fadein .7s 2.7s both}
.ai{width:1.375rem;color:#ffc51f;font-size:1.75rem;font-weight:800;line-height:1.375rem;text-align:center}
.alert h3{margin-bottom:.15rem;font-size:.875rem;line-height:1.4;letter-spacing:-.025em}
.alert p{font-size:.75rem;line-height:1.35;letter-spacing:-.025em}
.details{display:grid;margin-right:-1.25rem;position:relative;overflow:hidden}
.details>*{grid-area:1/1}
.details ul{position:relative;z-index:2;padding:0 6rem 1rem 0}
.details li+li{margin-top:.6rem}
.details h3{margin-bottom:.2rem;color:var(--text-2);font-size:.75rem;font-weight:400;animation:reveal .4s 1.5s both}
.details p{display:flex;align-items:center;gap:.375em;font-size:.9375rem;font-weight:500;animation:reveal .4s 2s both}
@keyframes reveal{from{opacity:0;transform:scaleY(0)}}
.di{display:inline-flex;flex:none;color:var(--primary)}
.di svg{width:1.375rem;height:1.375rem}
.dimg{place-self:end;width:120px;pointer-events:none;animation:slide 1.5s cubic-bezier(.39,.575,.565,1) 2.5s both}

.chart .title{line-height:1;margin-bottom:1rem}
.chart .sub{font-weight:500;line-height:1.15;max-width:325px;margin-top:0}
.date{margin:1.25rem 0;color:var(--primary);font-size:1.125rem;font-weight:700;letter-spacing:.36px;text-align:center}
.chart figure{max-width:340px;margin:2rem auto 0;width:100%}
.svg{display:block;width:100%;overflow:visible}
.svg .grid line{stroke:#d6d6e0;stroke-dasharray:2 3}
.svg .grid text{fill:var(--text-2);font-size:7px}
.svg .area{animation:fadein 5s .5s both}
.svg .curve{stroke-dasharray:500;stroke-dashoffset:500;animation:line 4.6s 1.5s forwards}
@keyframes line{50%{opacity:1}to{stroke-dashoffset:0}}
.svg .pt{fill:#fff;stroke-width:2.5;animation:fadein 1s 2.8s both}
.svg .lbl{animation:fadein 1s 2.8s both}
.svg .lbl text{fill:var(--text);font-size:14px;font-weight:500;text-anchor:middle}
.weeks{display:flex;justify-content:space-between;padding:0 1.125em;margin-top:.5rem;color:var(--text-2);font-size:.75rem}
.chart.four .title{text-align:start;line-height:1.2;margin:2rem 0 0;max-width:none}
.chart.four .weeks{font-size:.875rem}

.loader .title{margin-top:1.5rem;font-size:22px;line-height:1.4}
.lines{display:flex;flex-direction:column;gap:20px;margin-top:1.75rem}
.line{display:flex;flex-direction:column;gap:6px;transition:opacity .3s}
.line.future{opacity:.5}
.lt{display:flex;justify-content:space-between;font-size:17px;line-height:20px;letter-spacing:-.01em;white-space:nowrap}
.pc{position:relative;display:flex;justify-content:flex-end;width:45px}
.ck{position:absolute;top:50%;right:0;width:16px;height:16px;transform:translateY(-50%);color:var(--primary);opacity:0;transition:opacity .3s}
.ck svg{width:100%;height:100%}
.done .pv{opacity:0}
.done .ck{opacity:1}
.lb{position:relative;height:6px;border-radius:5px;background:#e3e6ec}
.lb::before{content:"";position:absolute;inset:0;border-radius:5px;background:var(--primary);opacity:.2}
.lb i{display:block;position:relative;z-index:1;width:0;height:100%;border-radius:5px;background:var(--primary);transition:width .1s linear}
.all .lb{height:2px}
.all .lb i{display:none}
.modal{position:fixed;inset:0;z-index:99;display:flex;justify-content:center;align-items:center;background:#14141eb3}
.modal[hidden]{display:none}
.mbox{width:90%;max-width:350px;padding:24px;border-radius:12px;background:#fff;text-align:center}
.mq{margin-bottom:30px;font:700 20px/1.4 var(--font-display)}
.mbtns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mbtn{padding:12px 16px;border:0;border-radius:8px;background:var(--primary);color:#fff;font:700 14px/1.25 var(--font-body);cursor:pointer}
.mbtn:hover{background:var(--primary-hover)}

.email{margin-top:4.5rem}
.email .title{line-height:1.625rem;margin-bottom:2rem}
.input{width:100%;padding:.875rem 1rem;border:1px solid var(--border);border-radius:.75rem;outline:none;background:var(--card);font-size:1rem;line-height:1.5;transition:border-color .2s ease-out}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--primary)}
.legalb{display:flex;align-items:center;gap:.625rem;margin-top:2rem}
.lock{flex:none;width:2.1rem;height:2.1rem;fill:var(--primary)}
.legalb p{color:var(--text-2);font-size:.75rem;line-height:1rem}
.email .btn{margin-top:1.5rem}
.uname{display:flex;flex-direction:column;flex:1}
.uname .title{margin:4rem auto 2rem}
.uname .input{padding:0 0 .1rem;border:0;border-bottom:1px solid var(--muted);border-radius:0;background:none;text-align:center;font-size:22px}
.uname .input:focus{border-bottom-color:var(--primary)}