:root{--ink:#171412;--muted:#817a75;--line:#ebe5df;--bg:#fbfaf7;--dark:#312825;--pink:#f53270}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
.app{min-height:100dvh;padding:22px 30px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px}.logo{font-size:30px;font-weight:950}.menu{width:46px;height:46px;border-radius:50%;border:1px solid #d9d1ca;background:#fff;font-size:23px}
.main{max-width:1140px;margin:65px auto 0;text-align:center}h1{font-size:47px;margin:0 0 18px;letter-spacing:-1px}.sub{font-size:22px;color:var(--muted);margin-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{border:0;padding:0;background:#f1ece6;border-radius:20px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 9px 24px rgba(75,53,40,.08);transition:.18s}.card:hover{transform:translateY(-3px)}.card img{width:100%;aspect-ratio:.78;object-fit:cover;display:block}.label{position:absolute;left:9px;right:9px;bottom:9px;background:var(--dark);color:#fff;border-radius:14px;padding:15px 16px;display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900}.arr{width:34px;height:34px;border-radius:50%;background:#fff;color:#2f2724;display:grid;place-items:center;font-size:22px}
.progress{height:7px;background:#ebe5df;max-width:1000px;margin:28px auto 0;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:25%;background:var(--pink);transition:.3s}
.screen{display:none}.screen.active{display:block}.center{max-width:700px;margin:80px auto;text-align:center}.opts{display:grid;gap:15px;margin-top:30px}.opt{border:1px solid var(--line);background:#fff;border-radius:18px;padding:19px 20px;font-size:18px;font-weight:850;display:flex;justify-content:space-between;cursor:pointer}.loader{width:115px;height:115px;border:9px solid #eee6e1;border-top-color:var(--pink);border-radius:50%;margin:0 auto 28px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tasks{display:grid;gap:12px}.task{border:1px solid var(--line);background:#fff;border-radius:15px;padding:15px;color:#999}.task.done{color:#222}.cta{width:100%;border:0;border-radius:18px;padding:18px;background:var(--dark);color:#fff;font-size:18px;font-weight:950}.note{font-size:11px;color:#999;margin-top:14px}
@media(max-width:780px){.app{padding:14px}.main{margin-top:30px}h1{font-size:31px}.sub{font-size:16px;margin-bottom:20px}.grid{grid-template-columns:repeat(2,1fr);gap:11px}.label{font-size:15px;padding:11px}.center{margin-top:45px}}