@font-face{font-family:"TikTok Sans";src:url('/assets/tiktok-sans-variable.woff2') format('woff2');font-style:normal;font-weight:300 900;font-display:swap}
:root{font-family:"TikTok Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:#070707;background:#ececec;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
button,a{font:inherit}
.app{background:#fff;width:min(100%,430px);min-height:100dvh;margin:auto;display:flex;flex-direction:column;position:relative;overflow:hidden}
.screen{display:flex;flex:1;flex-direction:column;min-height:100dvh;padding:24px 21px max(28px,env(safe-area-inset-bottom));}
.body-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:44px}
.illustration{display:block;object-fit:contain;margin:0 auto}
.age-illustration{width:min(76vw,285px);height:auto;margin-bottom:19px}
.celebration-illustration{width:min(39vw,165px);height:auto;margin-bottom:23px}
.steps-illustration{width:min(43vw,180px);height:auto;margin-bottom:17px}
h1,h2,p{margin:0}
h1{font-size:23px;line-height:1.24;font-weight:700;letter-spacing:-.2px}
p{font-size:14px;line-height:1.42;color:#54565b}
.age-copy{max-width:365px;margin:18px auto 8px}
.inline-link{color:#fe2c55;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 4px}
.inline-link svg{width:10px;height:10px}
.actions{display:grid;gap:11px;width:100%;margin-top:auto}
.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:47px;border:0;border-radius:8px;text-align:center;text-decoration:none;font-size:16px;font-weight:650;cursor:pointer}
.button-primary{background:#ff2351;color:#fff;box-shadow:0 2px 3px #00000015}
.button-secondary{background:#f2f2f3;color:#080808}
.button:focus-visible,.inline-link:focus-visible,.date-field:focus-visible,.wheel-option:focus-visible{outline:3px solid #222;outline-offset:3px}
.birthday{padding-top:76px}
.birthday h1{max-width:260px}
.birthday p{max-width:360px;margin-top:5px;font-size:12px}
.date-field{margin-top:25px;width:100%;height:44px;border:0;border-radius:8px;background:#f2f2f2;color:#171717;text-align:left;padding:0 14px;font-size:14px;cursor:pointer}
.birthday-spacer{flex:1;min-height:90px}
.wheel{height:164px;width:100%;display:grid;grid-template-columns:1.2fr .7fr 1fr;position:relative;overflow:hidden;margin:0 0 22px;color:#111}
.wheel::before{content:"";position:absolute;left:0;right:0;top:60px;height:43px;border-radius:7px;background:#f2f2f2;z-index:0}
.wheel-col{display:flex;flex-direction:column;align-items:stretch;justify-content:center;position:relative;z-index:1;text-align:center;touch-action:none;user-select:none}
.wheel-option{height:41px;border:0;background:transparent;color:#c2c2c2;font-size:14px;cursor:pointer}
.wheel-col:focus-visible{outline:2px solid #222;outline-offset:-2px;border-radius:7px}
.wheel-option.adjacent{color:#5c5c5f}
.wheel-option.selected{color:#111;font-size:15px}
.selected .body-center{padding-bottom:0}
.selected h1{font-size:19px;max-width:385px;line-height:1.22}
.pink{color:#ff2351}
.summary-card{width:100%;margin-top:12px;background:#f3f3f3;border-radius:12px;padding:17px 16px;text-align:left}
.summary-card strong{font-size:14px;display:block;margin-bottom:12px}
.summary-card ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.summary-card li{font-size:14px;color:#56585c}
.summary-card li b{color:#ff2351;margin-right:8px}
.steps{padding-top:130px}
.steps-head{text-align:center}
.steps h1{font-size:24px}
.steps-head p{margin-top:10px}
.step-list{margin-top:24px;display:grid;gap:11px}
.step-row{display:flex;align-items:center;gap:15px;min-height:64px;background:#f3f3f3;border-radius:11px;padding:11px 15px}
.step-number{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ff2351;color:#fff;font-size:17px}
.step-text strong{font-size:14px;display:block;margin-bottom:3px}
.step-text span{font-size:12px;color:#55585d}
.loading{align-items:center;justify-content:center;text-align:center;gap:10px}
.spinner{width:27px;height:27px;border:2px solid #e5e5e5;border-top-color:#ff2351;border-right-color:#ff2351;border-radius:50%;animation:spin .8s linear infinite}
.loading h1{font-size:15px;letter-spacing:0}
@keyframes spin{to{transform:rotate(360deg)}}
.final{align-items:center;justify-content:center;text-align:center;gap:14px}
.final .mark{height:64px;width:64px;border-radius:50%;display:grid;place-items:center;background:#1d4ed8;color:#fff;font-size:23px;font-weight:800}
.final p{max-width:300px}
.final .button{margin-top:20px}
@media(min-width:431px){.app{box-shadow:0 0 28px #00000012}}
@media(max-height:690px){.birthday{padding-top:35px}.steps{padding-top:70px}.selected .body-center{padding-bottom:28px}.age-illustration{width:210px}.celebration-illustration{width:130px}.steps-illustration{width:145px}}