/* Wilson & Farr: Stain First Aid widget */
.sa{--sa-green:#01ed01;--sa-card:#141414;--sa-card2:#1a1a1a;--sa-line:rgba(255,255,255,.08);--sa-gray:#a0a0a0;--sa-warn:#f2b544;
  background:var(--sa-card);border:1px solid var(--sa-line);border-radius:16px;overflow:hidden;overflow:clip;color:#fff;font-family:'AR One Sans',sans-serif;position:relative}
.sa *{box-sizing:border-box}
.sa button{font-family:inherit}

/* header / progress */
.sa-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--sa-line);background:#101010}
.sa-crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sa-crumb{display:flex;align-items:center;color:#555}
.sa-crumb+.sa-crumb::before{content:"";width:18px;height:1px;background:#333;margin:0 8px}
.sa-crumb.is-done{color:var(--sa-gray)}
.sa-crumb.is-done+.sa-crumb::before{background:rgba(1,237,1,.5)}
.sa-crumb.is-current{color:var(--sa-green)}
.sa-crumb button{all:unset;cursor:pointer;color:inherit;border-bottom:1px dotted rgba(255,255,255,.25)}
.sa-crumb button:hover,.sa-crumb button:focus-visible{color:#fff;border-bottom-color:var(--sa-green)}
.sa-restart{background:none;border:1px solid var(--sa-line);color:var(--sa-gray);font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.sa-restart:hover{color:#fff;border-color:rgba(1,237,1,.4)}

/* body */
.sa-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:520px}
.sa-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;background:radial-gradient(circle at 50% 45%,#1d1d1d 0%,#0c0c0c 70%);border-right:1px solid var(--sa-line)}
.sa-svg{width:100%;max-width:400px;height:auto;display:block;overflow:visible}
.sa-stage.is-tappable .sa-hit{cursor:pointer}
.sa-stage-cap{min-height:20px;margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sa-gray);text-align:center}
.sa-stage.is-tappable .sa-stage-cap{color:var(--sa-green);animation:sa-blink 2.4s ease-in-out infinite}
.sa-orbit{transform-origin:160px 160px;animation:sa-spin 60s linear infinite}
.sa-stain{transform-box:fill-box}
.sa-stain path{transform-box:fill-box;transform-origin:center}
.sa-empty{font-family:'AR One Sans',sans-serif;font-weight:700;transition:opacity .4s}

/* panel */
.sa-panel{padding:40px 40px 36px;display:flex;flex-direction:column;justify-content:center}
.sa-panel.sa-in>*{animation:sa-up .5s cubic-bezier(.16,1,.3,1) both}
.sa-panel.sa-in>*:nth-child(2){animation-delay:.05s}
.sa-panel.sa-in>*:nth-child(3){animation-delay:.1s}
.sa-panel.sa-in>*:nth-child(4){animation-delay:.15s}
.sa-panel.sa-in>*:nth-child(n+5){animation-delay:.2s}
.sa-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-green);margin:0 0 10px}
.sa-kicker-warn{color:var(--sa-warn)}
.sa-q{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;outline:none}
.sa-hint,.sa-text{font-size:15px;line-height:1.7;color:#cfcfcf;margin:0 0 18px}
.sa-hint{color:var(--sa-gray)}
.sa-text-dim{color:var(--sa-gray);font-size:14px}
.sa-note{font-size:14px;line-height:1.65;color:#d6d6d6;margin:0 0 14px;padding:12px 14px 12px 16px;background:var(--sa-card2);border-left:3px solid var(--sa-green);border-radius:0 8px 8px 0}

/* options */
.sa-options{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.sa-options-3{grid-template-columns:repeat(3,1fr)}
.sa-options-stains{grid-template-columns:repeat(3,1fr)}
.sa-options-tag{grid-template-columns:repeat(2,1fr)}
.sa-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--sa-card2);border:1px solid var(--sa-line);border-radius:10px;padding:14px 16px;color:#fff;cursor:pointer;transition:border-color .2s,transform .25s cubic-bezier(.16,1,.3,1),background .2s}
.sa-opt:hover,.sa-opt:focus-visible{border-color:rgba(1,237,1,.45);background:#1e1e1e;transform:translateY(-2px);outline:none}
.sa-opt:active{transform:translateY(0) scale(.98)}
.sa-opt-t{font-size:15px;font-weight:700;line-height:1.3}
.sa-opt-s{font-size:12.5px;color:var(--sa-gray);line-height:1.4}
.sa-options-3 .sa-opt,.sa-options-stains .sa-opt{align-items:center;text-align:center;padding:16px 10px}
.sa-options-tag .sa-opt .sa-opt-t{font-size:18px;font-weight:800;color:var(--sa-green)}
.sa-ico{width:52px;height:52px;margin-bottom:6px}
.sa-ico-stain{width:46px;height:46px;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.sa-opt:hover .sa-ico-stain{transform:scale(1.12) rotate(-8deg)}

/* avoid box */
.sa-avoid{margin:4px 0 18px;padding:14px 16px;border:1px solid rgba(242,181,68,.28);background:rgba(242,181,68,.06);border-radius:10px}
.sa-avoid-h{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-warn)}
.sa-avoid ul{margin:0;padding:0;list-style:none}
.sa-avoid li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.55;color:#e2d6bd;margin-top:6px;animation:sa-up .5s cubic-bezier(.16,1,.3,1) both}
.sa-avoid li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:2px;background:var(--sa-warn);transform:rotate(45deg)}
.sa-avoid li::after{content:"";position:absolute;left:2px;top:.55em;width:10px;height:2px;background:var(--sa-warn);transform:rotate(-45deg)}

/* actions */
.sa-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.sa-act{display:inline-flex;align-items:center;gap:12px;background:var(--sa-green);color:#010101;border:0;font-weight:800;font-size:14px;letter-spacing:.03em;padding:14px 22px;border-radius:6px;cursor:pointer;box-shadow:0 4px 24px rgba(1,237,1,.22);transition:opacity .2s,transform .2s}
.sa-act:hover{transform:translateY(-1px)}
.sa-act:active{transform:scale(.97)}
.sa-act:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.sa-pips{display:inline-flex;gap:4px}
.sa-pips i{width:7px;height:7px;border-radius:50%;border:1.5px solid #010101;display:block;transition:background .2s}
.sa-pips i.on{background:#010101}
.sa-next{display:inline-flex;align-items:center;background:none;border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:14px;padding:14px 22px;border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
.sa-next:not(:disabled):hover{border-color:var(--sa-green);background:rgba(1,237,1,.06)}
.sa-next:disabled{opacity:.3;cursor:default}
.sa-next:not(:disabled){animation:sa-nudge .6s cubic-bezier(.3,1.4,.5,1)}
.sa-note-warn{border-left-color:var(--sa-warn);color:#efe2c4}
.sa-fine{margin:18px 0 0;font-size:12px;line-height:1.6;color:#7d7d7d;max-width:520px}
.sa-link{align-self:flex-start;background:none;border:0;padding:0;margin-top:14px;color:var(--sa-warn);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.sa-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.sa-btn-primary{display:inline-block;background:var(--sa-green);color:#010101;font-weight:800;font-size:14px;letter-spacing:.03em;padding:14px 26px;border-radius:6px;text-decoration:none;box-shadow:0 4px 24px rgba(1,237,1,.22);transition:opacity .2s,transform .2s}
.sa-btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.sa-btn-ghost{display:inline-block;border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:14px;padding:14px 22px;border-radius:6px;text-decoration:none;transition:border-color .2s}
.sa-btn-ghost:hover{border-color:var(--sa-green)}

.sa button:focus-visible,.sa a:focus-visible{outline:2px solid var(--sa-green);outline-offset:2px}

@keyframes sa-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sa-spin{to{transform:rotate(360deg)}}
@keyframes sa-blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sa-nudge{0%{transform:translateX(-6px)}100%{transform:none}}

@media (max-width:900px){
  .sa-body{grid-template-columns:1fr;min-height:0}
  .sa-stage{border-right:0;border-bottom:1px solid var(--sa-line);padding:14px 16px 8px;position:sticky;top:60px;z-index:3;background:#0e0e0e}
  .sa-svg{max-width:220px}
  .sa-stage-cap{margin-top:6px;min-height:16px;font-size:11px}
  .sa-panel{padding:24px 20px 28px}
  .sa-head{padding:12px 16px}
  .sa-crumb+.sa-crumb::before{width:10px;margin:0 5px}
  .sa-crumbs{font-size:10px}
}
@media (max-width:600px){
  .sa-options-3{grid-template-columns:1fr}
  .sa-options-3 .sa-opt{flex-direction:row;text-align:left;justify-content:flex-start;gap:14px;padding:12px 14px}
  .sa-options-3 .sa-opt .sa-ico{width:40px;height:40px;margin:0;flex-shrink:0}
  .sa-options-3 .sa-opt-s{display:none}
  .sa-options-stains{grid-template-columns:repeat(2,1fr)}
  .sa-crumb:not(.is-current):not(.is-done){display:none}
  .sa-actions .sa-act,.sa-actions .sa-next{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sa *,.sa *::before,.sa *::after{animation:none!important;transition:none!important}
}