
*{box-sizing:border-box}body{margin:0;padding:20px;color:#4b2c40;background:radial-gradient(ellipse at 10% 0%,#f0cede,transparent 62%),#f9efe8;font:16px/1.45 system-ui,sans-serif}
main{max-width:580px;margin:auto;padding:clamp(16px,4vw,28px);border-radius:24px;background:#fffcf9;box-shadow:0 14px 50px #70425820}
header,.meta{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.8rem;font-weight:800}header{letter-spacing:.08em}.badge,.reward{background:#f3e1ed;padding:5px 9px;border-radius:20px}
h1{margin:14px 0 7px;font:700 clamp(30px,7vw,46px) Georgia,serif}p{margin:8px 0}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #87416e;outline-offset:3px}
.primary,.mission{border:0;border-radius:12px;background:#743460;color:white;font-weight:750;padding:11px 15px;margin-top:9px}.mission{display:block;width:100%;text-align:left}.mission+.mission{background:#ead7e3;color:#4b2c40}
.face{display:block;position:relative;width:min(100%,258px);aspect-ratio:1;margin:10px auto;padding:0;border:2px solid #c29aaf;border-radius:22px;background:#eed8df;overflow:hidden}.face img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.face.target{outline:3px solid #823a69;outline-offset:3px}
.face i{display:none;position:absolute;width:7%;height:2.6%;border-radius:60%;background:#fff5dd;box-shadow:0 1px 2px #965e5f40;pointer-events:none}.face i:nth-of-type(1){left:45%;top:28%}.face i:nth-of-type(2){left:31%;top:56%;rotate:18deg}.face i:nth-of-type(3){left:61%;top:55%;rotate:-17deg}
.face .application-hand {
  display:none; position:absolute; width:54%; height:auto; left:34%; top:51%; z-index:1; pointer-events:none;
  clip-path:polygon(0 0,14% 0,30% 16%,46% 20%,61% 24%,73% 34%,78% 44%,84% 63%,100% 88%,100% 100%,65% 100%,45% 88%,0 52%);
}
.face.applying .application-hand {display:block; animation:apply-hand 1.1s ease-in-out both;}
.face.applying i {display:block; animation:spread-care 1.1s ease-out both;}
@keyframes apply-hand {
  0% {transform:translate(74%,57%) rotate(-8deg); opacity:0;}
  25% {transform:translate(49%,6%) rotate(-4deg); opacity:1;}
  48% {transform:translate(29%,-6%) rotate(5deg);}
  72% {transform:translate(44%,-13%) rotate(-4deg); opacity:1;}
  100% {transform:translate(82%,54%) rotate(-10deg); opacity:0;}
}
@keyframes spread-care {
  0% {opacity:0;}
  26% {opacity:1;}
  72% {opacity:.86;}
  100% {opacity:0; scale:1.45 .85;}
}
@media(prefers-reduced-motion:reduce) {
  .face.applying .application-hand {animation:none; transform:translate(38%,-3%);}
  .face.applying i {animation:none;}
}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.product{padding:7px 5px 9px;border:1px solid #e5cddd;border-radius:13px;background:white;touch-action:none;user-select:none;text-align:center;font-size:.78rem;font-weight:750;cursor:grab;overflow-wrap:anywhere}.shelf.easy{grid-template-columns:repeat(2,minmax(0,1fr))}.product img{display:block;width:100%;height:clamp(78px,21vw,116px);object-fit:contain;pointer-events:none}.product small{display:block;color:#6b5365;font-weight:500}.product[aria-pressed="true"]{outline:2px solid #87416e;outline-offset:-2px}.product:disabled,.face:disabled{cursor:default}
.ghost{position:fixed;z-index:2;pointer-events:none;width:76px;height:76px;object-fit:contain;border-radius:10px;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 5px 14px #45223840}
.instructions,.fine{color:#6b5365;font-size:.84rem}.fine{font-size:.75rem;margin-top:14px}.feedback{min-height:1.5em;font-weight:750}.result{background:#f5e7f0;border-radius:12px;padding:10px}.question{font-weight:650}[hidden]{display:none!important}

header a{color:inherit;text-decoration:none}header a:hover{text-decoration:underline}
.auth-link{display:inline-block;text-decoration:none}.coupon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.coupon input{min-width:0;width:100%;font:inherit;padding:7px;border:1px solid #e5cddd;border-radius:8px}.coupon button{margin:0}.coupons{margin-top:20px}.coupons h2{font-size:1rem;margin:0}.coupons p{font-size:.85rem}.shelf .product{align-content:start}.products-compact img{height:clamp(68px,18vw,100px)}
