*{box-sizing:border-box}body{margin:0;background:#211b34;color:#fff5df;font:15px system-ui}main{max-width:480px;margin:auto;padding:28px 20px calc(24px + env(safe-area-inset-bottom));text-align:center}header{padding:20px 0}.eyebrow{font-size:11px;letter-spacing:4px;color:#e5b56e}h1{font-size:38px;margin:10px}header p,footer{color:#b8a9c9}footer{font-size:12px;padding:24px}.panel{background:#302741;border:1px solid #594461;border-radius:24px;padding:24px 18px}.preview,.notice{padding:12px;background:#684716;border-radius:10px;margin:10px 0}.notice{background:#743e47}input,select{width:100%;padding:12px;border-radius:10px;border:1px solid #806581;margin:10px 0;background:#211b34;color:#fff}button{border:0;border-radius:12px;padding:12px 20px;margin:6px;background:#51415e;color:#fff5df;cursor:pointer}button:disabled{opacity:.45;cursor:default}.primary{background:#f0bd68;color:#392430;width:100%;font-size:20px;font-weight:700}.pointer{color:#f5c675;font-size:28px;margin-bottom:-12px;position:relative;z-index:2}.wheel{width:min(280px,100%);aspect-ratio:1;height:auto;border-radius:50%;border:9px solid #d0a15e;margin:0 auto 24px;position:relative;color:#402c28;transition:transform 4s cubic-bezier(.13,.7,.12,1);box-shadow:0 0 0 6px #49364e}.wheel span{position:absolute;left:50%;top:50%;font-size:12px;font-weight:700;width:68px}.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#39253f;color:#ffd991;border:4px solid #d0a15e;border-radius:50%;padding:19px}details{text-align:left;color:#cbbcd6;line-height:1.8;margin-top:24px}nav{display:flex;justify-content:center}.result{padding:18px;background:#59405b;border-radius:12px}.record{display:grid;grid-template-columns:1fr auto;text-align:left;border-bottom:1px solid #594461;padding:16px 0}.delivery{grid-column:1/3;overflow-wrap:anywhere}.record small{grid-column:1/3;color:#b8a9c9}