.stw{position:fixed;inset:0;z-index:9999}
.stw[hidden]{display:none}

html.stw-is-open, html.stw-is-open body{overflow:hidden}

.stw__backdrop{position:absolute;inset:0;background:rgba(10,18,28,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s ease}

.stw__dialog{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:min(980px, 100%);
  margin:0;
  border-radius:0 22px 22px 0;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  transform:translateX(-105%);
  transition:transform .42s cubic-bezier(.2,.85,.2,1);
}

.stw.is-open .stw__dialog{transform:translateX(0)}
.stw.is-open .stw__backdrop{opacity:1}

.stw__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:3}
.stw__close:hover{background:rgba(0,0,0,.35)}

.stw__content{display:grid;grid-template-columns:1.05fr .95fr;min-height:748px;background:linear-gradient(#eee, #fff)}

.stw__left{position:relative;display:grid;place-items:center;overflow:visible;background:#fff;}
.stw__right{position:relative;display:flex;flex-direction:column;justify-content:center;padding:34px 34px 30px;background:#246277;}

.stw__title{margin:0;color:#fff;font-size:40px;letter-spacing:.02em;font-weight:900}
.stw__sub{margin:10px 0 18px;color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}

.stw__form{display:grid;gap:12px;max-width:420px}

.stw__field{display:grid;grid-template-columns:74px 1fr;align-items:center;border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 48px rgba(0,0,0,.18)}
.stw__prefix{display:flex;align-items:center;justify-content:center;height:52px;background:rgba(39,103,128,.10);color:#0c1220;font-weight:800}
.stw__input{height:52px;border:0;outline:0;padding:0 14px;font-size:16px;font-weight: 600}

.stw__btn{height:52px;border-radius:999px;border:0;cursor:pointer;background:#0c1220;color:#fff;font-weight:900;letter-spacing:.02em;box-shadow:0 18px 48px rgba(0,0,0,.20)}
.stw__btn:hover{transform:translateY(-1px)}
.stw__btn:disabled{opacity:.65;cursor:not-allowed;transform:none}

.stw__fine{margin:8px 0 0;color:rgba(255,255,255,.70);font-size:11.5px;line-height:1.5}
.stw__fine a{color:#fff;text-decoration:underline}

.stw__result{min-height:18px;font-size:12.5px;font-weight:800;color:#fff}

.stw__success{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,18,28,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:5}
.stw__success.is-open{opacity:1;pointer-events:auto}

.stw__successCard{width:min(420px, 92%);border-radius:18px;padding:18px 18px 16px;background:linear-gradient(180deg,#276780,#1f5263);box-shadow:0 30px 90px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);text-align:center}
.stw__successPrize{color:#fff;font-weight:1000;font-size:22px;letter-spacing:.02em;margin:0 0 6px}
.stw__successMsg{color:rgba(255,255,255,.86);font-size:13px;line-height:1.5;margin:0 0 14px}
.stw__successBtn{height:44px;min-width:130px;border-radius:999px;border:0;cursor:pointer;background:#fff;color:#0c1220;font-weight:1000;letter-spacing:.02em;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.stw__successBtn:hover{transform:translateY(-1px)}

.stw__wheelWrap{position:relative;width:min(560px, 95%);aspect-ratio:1/1;display:grid;place-items:center;/*transform:translateX(-30%);*/overflow:visible}

.stw__pointer{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:#000;border-radius:99px;box-shadow:0 18px 44px rgba(0,0,0,.28);z-index:4}

.stw__pointer:after{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:16px solid #000}
.stw__pointer:before{content:"";position:absolute;inset:6px;border-radius:99px;background:#f9db32}

.stw__wheel{position:relative;width:100%;height:100%;border-radius:999px;background:conic-gradient(from -30deg,
  #ffffff 0deg 60deg,
  #276780 60deg 120deg,
  #ffffff 120deg 180deg,
  #276780 180deg 240deg,
  #ffffff 240deg 300deg,
  #276780 300deg 360deg
);border:6px solid #246277;box-shadow:0 32px 90px rgba(0,0,0,.25);transition:transform 4s cubic-bezier(.15,.82,.15,1)}

.stw__wheel:before{content:"";position:absolute;inset:0;border-radius:999px;background:radial-gradient(circle at center, rgba(255,255,255,.20), rgba(255,255,255,0) 55%)}

.stw__label{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center;
  white-space:nowrap;
  font-weight:900;
  font-size:18px;
  letter-spacing:.01em;
  text-shadow:0 10px 22px rgba(0,0,0,.22);
  -webkit-text-stroke:1px rgba(0,0,0,.14);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--a) - 90deg))
    translateX(clamp(120px, 15vw, 176px))
    rotate(calc(90deg + var(--flip, 0deg)));
}

.stw__label--dark{color:#276780}
.stw__label--light{color:#ffffff;-webkit-text-stroke:1px rgba(0,0,0,.22)}

@media (max-width: 900px){
  .stw__content{grid-template-columns:1fr;min-height:auto}
  .stw__wheelWrap{transform:none;padding:20px 0;width:min(520px, 94%)}
  .stw__right{padding:24px 18px 22px}
  .stw__title{font-size:34px}
}

@media (max-width: 560px){
  .stw__dialog{width:100%;border-radius:0}
  .stw__wheelWrap{width:min(420px, 92%)}
  .stw__label{font-size:14px}
  .stw__btn{width:100%}
}