:root{color-scheme:dark;--orange:#ff8a00;--gold:#f7b500;--cream:#fff7df}*{box-sizing:border-box}body{margin:0;background:#080605;color:var(--cream);font-family:Inter,Arial,system-ui,sans-serif}body:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,#08060566,#080605e6),url(assets/city-desktop.webp) center/cover;z-index:-1}.app{width:min(780px,100%);margin:auto;min-height:100svh;display:flex;flex-direction:column;padding:20px 28px 22px}header{display:flex;align-items:center;justify-content:space-between}header img{object-fit:contain;width:124px;height:60px}.edition{font-size:10px;letter-spacing:2px;color:#e3bd80}.intro{text-align:center;margin:18px 0}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:3px;font-weight:800}h1{margin:8px 0;font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:900;font-size:42px;line-height:1.04;letter-spacing:.4px;text-shadow:3px 3px #090605}h1 em{font-style:normal;color:var(--orange)}.intro p{font-size:13px;color:#d6cab8;margin:10px 0 0}.progress{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#e1caaa}.progress span:first-child{font-weight:700;color:var(--cream)}.meter{height:3px;background:#4c3828;margin:9px 0 15px;border-radius:4px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),#ff5a00);transition:width .3s}form{flex:1;display:flex;flex-direction:column}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.card{min-width:0;background:linear-gradient(145deg,#17110ff5,#090807f5);border:1px solid #775023;border-radius:12px;padding:14px;transition:transform .25s,border-color .25s,box-shadow .25s;transform:scale(.96);transform-origin:center;box-shadow:0 12px 26px #0005}.card.active{transform:scale(1);border-color:var(--gold);box-shadow:0 0 0 1px #ff8a0033,0 0 28px #ff8a0025}.card.done{border-color:#97723a}.cardhead{display:flex;gap:8px;align-items:center;margin-bottom:12px}.num{font:700 11px Arial;color:#e3b569;width:23px;height:23px;display:grid;place-items:center;border:1px solid #6a4c2b;border-radius:5px;flex-shrink:0}.active .num{background:var(--orange);color:#130d06;border-color:var(--orange)}.done .num{color:#8be5aa}h2{font-size:15px;margin:0;line-height:1.15}.options{display:grid;gap:7px}.option{position:relative;display:flex;align-items:center;gap:8px;min-height:43px;padding:8px 10px;background:#30251b75;border:1px solid #6a482c;border-radius:6px;font-size:13px;cursor:pointer}.option:hover{border-color:var(--orange)}input{appearance:none;margin:0;width:14px;height:14px;border:1px solid #c89a60;border-radius:50%;flex-shrink:0}input:checked{border:4px solid #ffae2f;background:#25160b}.option:has(input:checked){border-color:var(--orange);background:#75400e50;color:#ffcf7f}.option:has(input:focus-visible){outline:2px solid white;outline-offset:2px}footer{margin-top:18px;text-align:center}#validation{font-size:12px;min-height:28px;margin:0 0 8px;color:#d8c6b2;display:flex;align-items:center;justify-content:center}#validation.error{color:#ffd089;font-weight:700}.whatsapp{cursor:pointer;width:100%;min-height:56px;border:1px solid #71e69b;border-radius:9px;background:linear-gradient(110deg,#128c4d,#25d366);box-shadow:0 9px 30px #0008;color:white;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px}.whatsapp svg{width:23px;height:23px;color:#082c17}.whatsapp:hover{filter:brightness(1.1)}.whatsapp:focus-visible{outline:3px solid white;outline-offset:3px}.footnote{display:block;font-size:10px;color:#b7aa99;margin-top:10px;line-height:1.4}@media(max-width:600px){body:before{background-image:linear-gradient(180deg,#08060555,#080605ef),url(assets/city-mobile.webp)}.app{padding:10px 14px max(10px,env(safe-area-inset-bottom))}header img{width:100px;height:43px}.edition{font-size:8px;letter-spacing:1.4px}.intro{margin:12px 0}h1{font-size:32px}.intro p{font-size:11px;margin-top:7px}.grid{gap:9px}.card{padding:10px;border-radius:9px;transform:scale(.90)}h2{font-size:13px}.cardhead{gap:6px;margin-bottom:9px}.num{width:20px;height:20px;font-size:10px}.option{font-size:12px;min-height:39px;padding:7px;gap:6px}.options{gap:6px}.meter{margin:7px 0 10px}.progress{font-size:10px}footer{margin-top:12px}.whatsapp{font-size:13px;min-height:52px}#validation{font-size:11px;margin-bottom:6px;min-height:27px}.footnote{font-size:9px;margin-top:7px}}@media(max-height:700px) and (max-width:600px){.intro{margin:6px 0}h1{font-size:27px;margin:5px 0}.eyebrow{font-size:8px}.intro p{font-size:10px}.card{padding:8px}.cardhead{margin-bottom:6px}.option{min-height:34px;padding:6px}.options{gap:4px}footer{margin-top:7px}.whatsapp{min-height:46px}.footnote{margin-top:5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(min-width:900px){.app{justify-content:center;max-width:800px;padding-block:30px}.intro{margin:24px 0}.grid{gap:20px}.card{padding:20px}.option{min-height:48px}.cardhead{margin-bottom:15px}h2{font-size:17px}}
@media(max-width:600px) and (max-height:620px){.app{padding:6px 10px}header img{height:30px;width:80px}.edition{font-size:7px}.intro{margin:5px 0}h1{font-size:23px;margin:4px 0}.intro p{font-size:9px;margin-top:4px}.card{padding:7px}.cardhead{gap:4px;margin-bottom:5px}h2{font-size:11px}.num{width:17px;height:17px;font-size:9px}.option{min-height:30px;font-size:11px;padding:5px}.options{gap:4px}.grid{gap:6px}.meter{margin:5px 0 7px}.progress{font-size:9px}footer{margin-top:5px}#validation{font-size:10px;min-height:24px;margin-bottom:4px}.whatsapp{min-height:43px;font-size:11px;gap:7px}.whatsapp svg{width:20px;height:20px}.footnote{font-size:8px;margin-top:4px}}

#validation:empty{display:none}header{justify-content:center}.grid{margin-top:8px}

.card[data-key="goal"]{grid-row:span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.card[data-key="training"],.card[data-key="hormones"]{grid-column:2}
/* Lower the composition while preserving the compact mobile layout. */
.app{padding-top:44px}header img{width:161.2px;height:78px}
@media(max-width:600px){.app{padding-top:34px}header img{width:130px;height:55.9px}}
@media(max-width:600px) and (max-height:620px){.app{padding-top:22px}header img{width:104px;height:39px}}
@media(min-width:900px){.app{padding-top:54px}}