.fw-section{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(70,148,252,.105),transparent 34%),
    radial-gradient(circle at 12% 92%,rgba(245,168,35,.055),transparent 32%),
    #060609;
}
.fw-section::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.fw-section .wrap{position:relative;z-index:1;max-width:1320px}
.fw-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  color:var(--ct);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.fw-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ct);box-shadow:0 0 13px rgba(70,148,252,.8)}
.fw-page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);align-items:end;gap:42px;margin-bottom:42px}
.fw-page-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(46px,6.4vw,88px);
  font-weight:600;
  line-height:.88;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.fw-page-title span:first-child{color:#fff}
.fw-page-title span:last-child{color:var(--ct);text-shadow:0 0 48px rgba(70,148,252,.23)}
.fw-page-copy{max-width:420px;color:var(--sub);font-size:14px;line-height:1.7}
.fw-free-note{display:flex;align-items:center;gap:8px;margin-top:13px;color:#6f7281;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.fw-free-note::before{content:'✓';display:grid;place-items:center;width:17px;height:17px;border:1px solid rgba(61,190,92,.35);border-radius:50%;color:#55d876;background:rgba(61,190,92,.08)}

.fw-builder{
  display:grid;
  grid-template-columns:minmax(340px,.86fr) minmax(470px,1.14fr);
  gap:18px;
  align-items:start;
}
.fw-panel{
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(17,20,29,.91),rgba(8,9,15,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 26px 70px rgba(0,0,0,.23);
}
.fw-controls{padding:18px}
.fw-control-card{padding:16px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(255,255,255,.018)}
.fw-control-card + .fw-control-card{margin-top:10px}
.fw-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.fw-card-title{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#e8ebf4}
.fw-card-index{display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(70,148,252,.28);border-radius:5px;color:var(--ct);font-size:8px;font-weight:800;background:rgba(70,148,252,.07)}
.fw-field{display:grid;gap:7px;min-width:0}
.fw-field + .fw-field{margin-top:12px}
.fw-field-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#777b8b;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.fw-value{color:var(--ct);font-variant-numeric:tabular-nums}
.fw-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.fw-input,.fw-select,.fw-output{
  width:100%;
  height:40px;
  min-width:0;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:7px;
  outline:none;
  color:#f5f7fb;
  background:#0b0d14;
  font:600 12px/1 var(--font-body);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.fw-output{height:38px;color:#7d8190;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}
.fw-input:focus,.fw-select:focus,.fw-output:focus{border-color:rgba(70,148,252,.75);box-shadow:0 0 0 3px rgba(70,148,252,.1);background:#0e111a}
.fw-input::placeholder{color:#3f4350}
.fw-select{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,#5c6170 50%),linear-gradient(135deg,#5c6170 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 11px) 17px;background-size:4px 4px;background-repeat:no-repeat}
.fw-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  color:#dfe4f1;
  background:rgba(255,255,255,.045);
  font:800 9px/1 var(--font-body);
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.fw-button:hover,.fw-button:focus-visible{transform:translateY(-1px);border-color:rgba(70,148,252,.65);color:#fff;background:rgba(70,148,252,.11);box-shadow:0 8px 24px rgba(18,82,176,.16);outline:none}
.fw-button.is-primary{border-color:var(--ct);color:#fff;background:var(--ct);box-shadow:0 8px 25px rgba(70,148,252,.22)}
.fw-button.is-primary:hover{background:#5aa0ff;box-shadow:0 10px 30px rgba(70,148,252,.3)}
.fw-button[disabled]{opacity:.42;pointer-events:none}
.fw-status{display:flex;align-items:flex-start;gap:7px;margin-top:9px;min-height:16px;color:#606575;font-size:8px;font-weight:650;line-height:1.45;letter-spacing:.035em}
.fw-status::before{content:'';width:6px;height:6px;flex:0 0 6px;margin-top:3px;border-radius:50%;background:#3d4250}
.fw-status[data-state="checking"]::before{background:var(--ct);box-shadow:0 0 10px rgba(70,148,252,.7);animation:fw-pulse 1s ease-in-out infinite}
.fw-status[data-state="ok"]{color:#72d88a}.fw-status[data-state="ok"]::before{background:#3dbe5c}
.fw-status[data-state="error"]{color:#e77270}.fw-status[data-state="error"]::before{background:#eb4b4b}
.fw-status[data-state="setup"]{color:#d7ac54}.fw-status[data-state="setup"]::before{background:var(--t)}
@keyframes fw-pulse{50%{opacity:.35}}

.fw-segments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fw-segment,.fw-preset{
  min-height:36px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px;
  color:#777c8a;
  background:rgba(255,255,255,.025);
  font:800 8px/1 var(--font-body);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
}
.fw-segment:hover,.fw-preset:hover{color:#dce1eb;border-color:rgba(255,255,255,.2)}
.fw-segment.is-active,.fw-preset.is-active{color:#fff;border-color:var(--fw-choice,var(--ct));background:color-mix(in srgb,var(--fw-choice,var(--ct)) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fw-choice,var(--ct)) 20%,transparent)}
.fw-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fw-preset{display:flex;align-items:center;justify-content:center;gap:6px}
.fw-preset::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--fw-choice,#fff);box-shadow:0 0 8px color-mix(in srgb,var(--fw-choice,#fff) 62%,transparent)}
.fw-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.fw-color-control{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:7px}
.fw-color{
  width:32px;height:32px;padding:3px;border:1px solid rgba(255,255,255,.11);border-radius:6px;background:#0b0d14;cursor:pointer
}
.fw-color::-webkit-color-swatch-wrapper{padding:0}.fw-color::-webkit-color-swatch{border:0;border-radius:3px}
.fw-color-code{display:flex;align-items:center;height:32px;padding:0 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#7d8190;background:#0b0d14;font:650 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.fw-range{width:100%;height:4px;margin:8px 0 3px;appearance:none;border-radius:99px;background:linear-gradient(90deg,var(--ct) var(--range-progress,94%),rgba(255,255,255,.09) var(--range-progress,94%));outline:none}
.fw-range::-webkit-slider-thumb{width:14px;height:14px;appearance:none;border:2px solid #0b0d14;border-radius:50%;background:var(--ct);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 12px rgba(70,148,252,.4);cursor:pointer}
.fw-helper{color:#505463;font-size:8px;line-height:1.5}
.fw-rotation-help{margin:9px 0 0}
[data-fw-rotation-interval-field]{transition:opacity .18s ease}
[data-fw-rotation-interval-field].is-disabled{opacity:.38}
.fw-range[disabled]{cursor:not-allowed}
.fw-range[disabled]::-webkit-slider-thumb{cursor:not-allowed}

.fw-preview-panel{overflow:hidden}
.fw-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid rgba(255,255,255,.065)}
.fw-preview-title{display:flex;align-items:center;gap:8px;color:#e8ebf4;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.fw-preview-title::before{content:'';width:6px;height:6px;border-radius:50%;background:#3dbe5c;box-shadow:0 0 10px rgba(61,190,92,.7)}
.fw-size-badge{padding:5px 7px;border:1px solid rgba(255,255,255,.08);border-radius:5px;color:#5b6070;background:rgba(255,255,255,.025);font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.fw-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:310px;
  overflow:hidden;
  background:
    linear-gradient(rgba(70,148,252,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,148,252,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 48%,rgba(70,148,252,.10),transparent 32%),
    #030407;
  background-size:32px 32px,32px 32px,auto,auto;
}
.fw-stage::before,.fw-stage::after{content:'';position:absolute;pointer-events:none}
.fw-stage::before{inset:26px;border:1px dashed rgba(255,255,255,.045);border-radius:8px}
.fw-stage::after{width:5px;height:5px;border:1px solid rgba(70,148,252,.36);border-radius:50%;box-shadow:0 0 14px rgba(70,148,252,.36)}
.fw-preview-frame{position:relative;z-index:2;width:380px;height:52px;border:0;transform-origin:center;filter:drop-shadow(0 18px 35px rgba(0,0,0,.44))}
.fw-stage-label{position:absolute;right:14px;bottom:11px;color:#333844;font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.fw-output-area{padding:17px}
.fw-action-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;margin-top:8px}
.fw-reset-button{width:40px;padding:0;font-size:15px}
.fw-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.fw-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.015)}
.fw-step-num{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(70,148,252,.23);border-radius:5px;color:var(--ct);font-size:8px;font-weight:800;background:rgba(70,148,252,.06)}
.fw-step strong{display:block;margin:1px 0 3px;color:#bfc4d0;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.fw-step span:last-child{display:block;color:#4e5360;font-size:7.5px;line-height:1.45}
.fw-disclaimer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:0 2px;color:#454a57;font-size:8px;line-height:1.55}
.fw-disclaimer a{color:#6c85ad;text-decoration:none}.fw-disclaimer a:hover{color:var(--ct)}

@media(max-width:1100px){
  .fw-builder{grid-template-columns:1fr}
  .fw-preview-panel{grid-row:1}
  .fw-controls{grid-row:2}
  .fw-page-head{grid-template-columns:1fr;gap:18px}
  .fw-page-copy{max-width:620px}
}
@media(max-width:700px){
  .fw-section{padding-top:98px!important}
  .fw-page-head{margin-bottom:26px}
  .fw-page-title{font-size:clamp(40px,11.4vw,58px)}
  .fw-controls{padding:10px}.fw-control-card{padding:13px}
  .fw-grid-2{grid-template-columns:1fr}
  .fw-stage{min-height:218px}
  .fw-action-row{grid-template-columns:1fr 40px}.fw-action-row .fw-output{grid-column:1/-1;grid-row:1}
  .fw-steps{grid-template-columns:1fr}
  .fw-disclaimer{align-items:flex-start;flex-direction:column}
}
@media(max-width:430px){
  .fw-inline{grid-template-columns:1fr}.fw-inline .fw-button{width:100%}
  .fw-presets{grid-template-columns:1fr}.fw-preset{min-height:34px}
}
@media(prefers-reduced-motion:reduce){.fw-status[data-state="checking"]::before{animation:none}}