/* Layout: plain survey page — logo, yellow notice, progress bar, "Question N", full-width blue buttons */
:root{
  --bg:#FBF8F1; --ink:#22281F; --muted:#4F564D; --blue:#1E7A3C; --blue-d:#16602F; --notice:#F6E3A8; --bar:#E6E0D2; --fill:#C8202F; --red:#C8202F; --orange:#F7861A; --green:#1E7A3C; --gold:#D9A62E;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.lights{display:flex;justify-content:space-around;height:20px;margin-bottom:-10px}
.lights i{width:11px;height:16px;border-radius:50% 50% 45% 45%;background:var(--c);box-shadow:0 0 9px var(--c);animation:blink 2.4s infinite;animation-delay:var(--d)}
@keyframes blink{50%{opacity:.4;box-shadow:none}}
.wrap{position:relative;z-index:1}
.btn{box-shadow:0 4px 0 #13552A}
.bar i{background:repeating-linear-gradient(45deg,var(--red) 0 10px,#fff 10px 20px)}
.notice{border:2px dashed var(--gold)}
.logo .t{color:var(--red)}
.logo .t small{color:var(--green)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 32px}
.wrap{max-width:600px;margin:0 auto;display:grid;gap:22px}
.logo{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:6px}
.logo .o{width:54px;height:54px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 34%,#FFB13B,#F7861A 60%,#D9620B)}
.logo .o::after{content:"";position:absolute;top:-8px;left:28px;width:20px;height:12px;background:var(--green);border-radius:0 100% 0 100%;transform:rotate(-15deg)}
.logo .t{font-weight:800;font-size:clamp(24px,6.4vw,34px);line-height:1;color:var(--red);letter-spacing:-.01em}
.logo .t small{display:block;font-size:.5em;font-weight:700;color:var(--green);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.notice{background:var(--notice);border-radius:6px;padding:14px 16px;text-align:center;font-size:clamp(16px,4.2vw,19px);line-height:1.4;color:var(--muted)}
.bar{height:10px;border-radius:6px;background:var(--bar);overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--red) 0 10px,#fff 10px 20px);transition:width .35s}
.step{display:grid;gap:18px;text-align:center}
.step h2{font-size:clamp(26px,6.5vw,34px);margin:0;font-weight:800}
.step .q{font-size:clamp(20px,5.4vw,26px);margin:0;color:var(--muted);line-height:1.3;text-wrap:balance}
.btns{display:grid;gap:16px}
.btn{width:100%;min-height:64px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;font-size:clamp(19px,5vw,23px);cursor:pointer;padding:14px}
.btn:hover,.btn:active{background:var(--blue-d)}
.btn:focus-visible{outline:3px solid var(--fill);outline-offset:3px}
.btn:disabled{opacity:.7}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pick{aspect-ratio:1;max-width:100%;border:2px solid #E8EEF7;border-radius:10px;background:#F4F7FC;cursor:pointer;display:grid;place-items:center;position:relative;padding:0}
.pick:hover{border-color:var(--blue)}
.pick:focus-visible{outline:3px solid var(--fill);outline-offset:2px}
.orn{width:66%;aspect-ratio:1;border-radius:50%;position:relative;margin-top:8%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0 6%,transparent 18%),
             radial-gradient(rgba(150,60,0,.18) .8px,transparent 1.2px) 0 0/5px 5px,
             radial-gradient(circle at 40% 35%,#FFB13B 0%,#F7861A 55%,#D9620B 100%);
  box-shadow:inset -7px -9px 0 rgba(150,60,0,.18)}
.orn::after{content:"";position:absolute;top:-14%;left:52%;width:40%;height:22%;background:linear-gradient(135deg,#4FB24A,#21762E);border-radius:0 100% 0 100%;transform:rotate(-12deg)}
.pick.popped .orn{animation:pop .45s forwards}
@keyframes pop{40%{transform:scale(1.2)}100%{transform:scale(0);opacity:0}}
.pick .gift{position:absolute;font-size:40px;opacity:0;transform:scale(.4);transition:.35s .3s}
.pick.popped .gift{opacity:1;transform:scale(1)}
.deadline{justify-self:center;background:var(--red);color:#fff;border-radius:6px;padding:12px 20px;font-size:17px}
.fine{font-size:12.5px;line-height:1.5;color:#777;text-align:center;margin:8px 0 0}
.fine a{color:inherit}
@media (prefers-reduced-motion:reduce){.pick.popped .orn{animation:none;opacity:0}.lights i{animation:none}}