/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: May 20 2026 | 07:33:55 */
.rfx{
  --a:#f47b20;
  --b:#ffb36f;
  --dark:#172033;
  --muted:rgba(23,32,51,.72);
  max-width:860px;
  margin:0 auto;
  padding:24px;
  border-radius:42px;
  background:
    radial-gradient(circle at 10% 0%,rgba(244,123,32,.13),transparent 30%),
    radial-gradient(circle at 95% 10%,rgba(59,130,246,.10),transparent 28%),
    radial-gradient(circle at 50% 100%,rgba(40,180,99,.10),transparent 34%),
    linear-gradient(180deg,#fffdfb 0%,#fff 48%,#f6fbf8 100%);
  box-shadow:0 34px 95px rgba(23,32,51,.12);
  color:var(--dark);
  font-family:inherit;
  overflow:hidden;
}

.rfx *{box-sizing:border-box;}

.rfx-hero{
  text-align:center;
  padding:18px 10px 30px;
}

.rfx-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(244,123,32,.10);
  color:#d95f12;
  font-size:13px;
  font-weight:950;
  margin-bottom:16px;
}

.rfx-badge:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#28b463;
  box-shadow:0 0 0 7px rgba(40,180,99,.12);
}

.rfx-title{
  font-size:clamp(34px,6vw,60px);
  line-height:1.02;
  font-weight:950;
  letter-spacing:-2px;
  margin-bottom:16px;
}

.rfx-subtitle{
  max-width:660px;
  margin:0 auto;
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  font-weight:500;
}

.rfx-status,
.rfx-slider-card,
.rfx-note,
.rfx-stat{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(23,32,51,.06);
  border-radius:34px;
  box-shadow:0 22px 60px rgba(23,32,51,.09);
}

.rfx-status{
  text-align:center;
  padding:38px 26px;
  margin-bottom:20px;
  position:relative;
}

.rfx-score{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  position:relative;
}

.rfx-score svg{
  width:132px;
  height:132px;
  transform:rotate(-90deg);
}

.rfx-ring-bg{
  fill:none;
  stroke:#edf1f3;
  stroke-width:10;
}

.rfx-ring{
  fill:none;
  stroke:url(#none);
  stroke:var(--a);
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:326.7;
  stroke-dashoffset:326.7;
  transition:stroke-dashoffset .45s ease, stroke .3s ease;
}

.rfx-score-inner{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
}

.rfx-score-inner div{
  font-size:34px;
  font-weight:950;
  line-height:1;
  color:var(--a);
}

.rfx-score-inner span{
  font-size:12px;
  font-weight:900;
  color:rgba(23,32,51,.55);
  margin-top:5px;
}

.rfx-icon{
  width:112px;
  height:112px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border-radius:36px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),transparent 35%),
    linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 20px 50px rgba(23,32,51,.14);
}

.rfx-icon svg{
  width:58px;
  height:58px;
  stroke:#fff;
  stroke-width:2.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rfx-time{
  display:inline-flex;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(244,123,32,.09);
  color:var(--a);
  font-size:15px;
  font-weight:950;
  margin-bottom:15px;
}

.rfx-status-title{
  font-size:clamp(26px,5vw,40px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-1.2px;
  margin-bottom:14px;
}

.rfx-text{
  max-width:650px;
  margin:0 auto;
  font-size:18px;
  line-height:1.85;
  color:rgba(23,32,51,.76);
  font-weight:500;
}

.rfx-slider-card{
  padding:34px 26px 25px;
  margin-bottom:22px;
}

.rfx-slider{
  width:100%;
  appearance:none;
  height:16px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff6b57 0%,#f47b20 22%,#f7b733 44%,#3b82f6 68%,#28b463 100%);
  outline:none;
  cursor:pointer;
  box-shadow:inset 0 2px 5px rgba(23,32,51,.08);
}

.rfx-slider::-webkit-slider-thumb{
  appearance:none;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:8px solid var(--a);
  box-shadow:0 10px 25px rgba(23,32,51,.18),0 0 0 8px rgba(244,123,32,.10);
  cursor:pointer;
  transition:.25s ease;
}

.rfx-slider::-webkit-slider-thumb:hover{
  transform:scale(1.08);
}

.rfx-slider::-moz-range-thumb{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:8px solid var(--a);
  box-shadow:0 10px 25px rgba(23,32,51,.18),0 0 0 8px rgba(244,123,32,.10);
  cursor:pointer;
}

.rfx-scale{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:22px;
  font-size:13px;
  font-weight:900;
  color:rgba(23,32,51,.58);
}

.rfx-scale span{
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(23,32,51,.07);
}

.rfx-stats{
  display:grid;
  gap:14px;
  margin-bottom:28px;
}

.rfx-stat{
  padding:18px;
}

.rfx-stat span{
  display:block;
  color:rgba(23,32,51,.55);
  font-size:13px;
  font-weight:900;
  margin-bottom:5px;
}

.rfx-stat strong{
  display:block;
  font-size:21px;
  color:var(--dark);
  letter-spacing:-.5px;
}

.rfx-timeline-title{
  font-size:24px;
  font-weight:950;
  margin:6px 0 16px;
}

.rfx-timeline{
  display:grid;
  gap:14px;
}

.rfx-step{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.90));
  border:1px solid rgba(23,32,51,.05);
  box-shadow:0 10px 30px rgba(23,32,51,.06);
  animation:rfxFade .3s ease;
}

.rfx-step-current{
  transform:translateY(-2px);
  border-color:rgba(244,123,32,.16);
  box-shadow:0 20px 45px rgba(244,123,32,.12);
}

.rfx-step-icon{
  min-width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),transparent 35%),
    linear-gradient(135deg,var(--sa),var(--sb));
  box-shadow:0 12px 26px rgba(23,32,51,.14);
}

.rfx-step-icon svg{
  width:29px;
  height:29px;
  stroke:#fff;
  stroke-width:2.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rfx-step-time{
  display:inline-block;
  color:var(--sa);
  background:rgba(244,123,32,.08);
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:950;
  margin-bottom:7px;
}

.rfx-step-title{
  font-size:19px;
  font-weight:950;
  margin-bottom:6px;
}

.rfx-step-text{
  font-size:15px;
  line-height:1.7;
  color:rgba(23,32,51,.70);
  font-weight:500;
}

.rfx-note{
  margin-top:24px;
  padding:20px;
  background:linear-gradient(135deg,rgba(244,123,32,.08),rgba(59,130,246,.06),rgba(40,180,99,.07));
  font-size:15px;
  line-height:1.7;
  color:rgba(23,32,51,.72);
}

@keyframes rfxFade{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:520px){
  .rfx{
    padding:14px;
    border-radius:28px;
  }

  .rfx-status,
  .rfx-slider-card,
  .rfx-note,
  .rfx-stat{
    border-radius:26px;
  }

  .rfx-status{
    padding:30px 18px;
  }

  .rfx-scale{
    font-size:11px;
    gap:5px;
  }

  .rfx-scale span{
    padding:6px 7px;
  }
}