.stg-tint-shade{--stg-ink:#16161d;--stg-slate:#4e5267;--stg-mist:#6e7491;--stg-paper:#f9f8f6;--stg-line:#e7e8eb;--stg-violet:#7851d4;--stg-violet-press:#6741c0;--stg-coral:#fa6262;--stg-mono:ui-monospace,"SF Mono","Fira Code",Menlo,Consolas,monospace;--stg-sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--stg-radius:14px;-webkit-font-smoothing:antialiased;color:var(--stg-slate);font-family:var(--stg-sans);margin:0 auto!important;max-width:1160px}.stg-tint-shade,.stg-tint-shade *,.stg-tint-shade :after,.stg-tint-shade :before{box-sizing:border-box}.stg-app__layout{align-items:start;display:grid;gap:32px;grid-template-columns:348px 1fr}@media (max-width:900px){.stg-app__layout{gap:24px;grid-template-columns:1fr}}.stg-app__controls{display:flex;flex-direction:column;gap:24px}.stg-label{align-items:baseline;color:var(--stg-mist);display:flex;font-size:11px;font-weight:600;gap:8px;justify-content:space-between;letter-spacing:.09em;margin-bottom:10px;text-transform:uppercase}.stg-base__row{align-items:center;display:flex;gap:10px}.stg-base__swatch{border:1px solid var(--stg-line);border-radius:12px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.35);cursor:pointer;flex-shrink:0;height:56px;overflow:hidden;position:relative;width:56px}.stg-base__swatch input{border:none;cursor:pointer;height:100%;inset:0;opacity:0;padding:0;position:absolute;width:100%}.stg-base__hex{background:#fff;border:1.5px solid var(--stg-line);border-radius:10px;color:var(--stg-ink);flex:1;font-family:var(--stg-mono);font-size:15px;letter-spacing:.02em;min-width:0;padding:14px;transition:border-color .15s}.stg-base__hex:focus{border-color:var(--stg-violet);outline:none}.stg-base__shuffle{align-items:center;background:#fff;border:1.5px solid var(--stg-line);border-radius:10px;color:var(--stg-mist);cursor:pointer;display:flex;flex-shrink:0;height:52px;justify-content:center;transition:color .15s,border-color .15s;width:52px}.stg-base__shuffle:hover{border-color:var(--stg-violet);color:var(--stg-violet)}.stg-base__presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.stg-base__preset{border:none;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);cursor:pointer;height:28px;padding:0;transition:transform .12s;width:28px}.stg-base__preset:hover{transform:translateY(-2px)}.stg-base__preset.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--stg-violet)}.stg-controls{background:#fff;border:1.5px solid var(--stg-line);border-radius:var(--stg-radius);display:flex;flex-direction:column;gap:22px;padding:22px}.stg-controls__steppers{display:grid;gap:12px;grid-template-columns:1fr 1fr}.stg-stepper__label{color:var(--stg-mist);display:block;font-size:11px;font-weight:600;letter-spacing:.09em;margin-bottom:8px;text-transform:uppercase}.stg-stepper__controls{align-items:center;border:1.5px solid var(--stg-line);border-radius:10px;display:flex;justify-content:space-between;padding:4px}.stg-stepper__btn{background:var(--stg-paper);border:none;border-radius:7px;color:var(--stg-ink);cursor:pointer;font-size:18px;height:32px;line-height:1;transition:background .15s,color .15s;width:32px}.stg-stepper__btn:hover:not(:disabled){background:var(--stg-violet);color:#fff}.stg-stepper__btn:disabled{cursor:not-allowed;opacity:.35}.stg-stepper__value{color:var(--stg-ink);font-family:var(--stg-mono);font-size:16px;font-weight:600}.stg-controls__hint{color:var(--stg-mist);font-family:var(--stg-mono);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}.stg-range{accent-color:var(--stg-violet);cursor:pointer;width:100%}.stg-prefix{align-items:center;display:flex;gap:10px}.stg-prefix__input{background:#fff;border:1.5px solid var(--stg-line);border-radius:10px;color:var(--stg-ink);flex:1;font-family:var(--stg-mono);font-size:14px;min-width:0;padding:11px 12px;transition:border-color .15s}.stg-prefix__input:focus{border-color:var(--stg-violet);outline:none}.stg-prefix__preview{color:var(--stg-mist);font-family:var(--stg-mono);font-size:12px;white-space:nowrap}.stg-ladder{display:flex;gap:14px;height:100%}.stg-ladder__axis{align-items:center;color:var(--stg-mist);display:flex;flex-direction:column;font-family:var(--stg-mono);font-size:10px;font-weight:600;gap:10px;letter-spacing:.12em;padding:6px 0;text-transform:uppercase;writing-mode:vertical-rl}.stg-ladder__axis-line{background:linear-gradient(to bottom,var(--stg-line),var(--stg-ink));flex:1;width:1px}.stg-ladder__scale{border-radius:var(--stg-radius);box-shadow:0 1px 0 rgba(22,22,29,.04),0 12px 34px rgba(22,22,29,.08);display:flex;flex:1;flex-direction:column;list-style:none;margin:0;min-height:640px;overflow:hidden;padding:0}.stg-step{flex:1 1 0;min-height:46px;position:relative}.stg-step__hit{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;gap:16px;height:100%;padding:0 22px;position:relative;text-align:left;width:100%}.stg-step__hit:after{border:1.5px solid;border-radius:9px;content:"";inset:5px;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s}.stg-step__hit:focus-visible:after,.stg-step__hit:hover:after{opacity:.4}.stg-step__hit:focus-visible{outline:none}.stg-step__lead{align-items:center;display:flex;flex-shrink:0;gap:10px;width:96px}.stg-step__number{font-size:15px;letter-spacing:.01em}.stg-step__badge,.stg-step__number{font-family:var(--stg-mono);font-weight:700}.stg-step__badge{border:1.5px solid;border-radius:20px;font-size:9px;letter-spacing:.1em;padding:3px 7px;text-transform:uppercase}.stg-step.is-base .stg-step__hit{font-weight:600}.stg-step__codes{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.stg-step__hex{font-family:var(--stg-mono);font-size:14px;font-weight:600;letter-spacing:.03em}.stg-step__slug{font-family:var(--stg-mono);font-size:11px;opacity:.62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stg-step__meta{align-items:center;display:flex;flex-shrink:0;gap:12px}.stg-step__sample{align-items:center;border:1px solid;border-radius:6px;display:inline-flex;font-size:13px;font-weight:600;height:26px;justify-content:center;letter-spacing:.01em;width:34px}.stg-step__rating{font-family:var(--stg-mono);font-size:10px;font-weight:600;letter-spacing:.06em;min-width:58px;text-align:right;text-transform:uppercase}.stg-step__rating--ok{opacity:.68}.stg-step__rating--low{opacity:.92;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:3px}.stg-step__copied{background:transparent;border:1.5px solid;border-radius:20px;font-family:var(--stg-mono);font-size:10px;font-weight:700;letter-spacing:.1em;opacity:0;padding:5px 10px;pointer-events:none;position:absolute;right:22px;text-transform:uppercase;top:50%;transform:translateY(-50%) scale(.9);transition:opacity .15s,transform .15s}.stg-step__copied.is-shown{opacity:1;transform:translateY(-50%) scale(1)}.stg-export{background:#fff;border:1.5px solid var(--stg-line);border-radius:var(--stg-radius);overflow:hidden}.stg-export__tabs{display:flex}.stg-export__tab{background:var(--stg-paper);border:none;border-bottom:1.5px solid var(--stg-line);color:var(--stg-mist);cursor:pointer;flex:1;font-family:inherit;font-size:13px;font-weight:600;padding:13px;transition:color .15s,background .15s}.stg-export__tab.is-active{background:#fff;box-shadow:inset 0 -2px 0 var(--stg-violet);color:var(--stg-violet)}.stg-export__code{background:var(--stg-ink);color:#e7e8eb;font-family:var(--stg-mono);font-size:12px;line-height:1.65;margin:0;max-height:240px;overflow:auto;padding:16px 18px;white-space:pre}.stg-export__actions{display:flex;gap:10px;padding:14px 16px}.stg-export__copy{background:var(--stg-violet);border:1.5px solid var(--stg-violet);border-radius:9px;color:#fff;cursor:pointer;flex:1;font-family:inherit;font-size:13px;font-weight:600;padding:11px;transition:background .15s}.stg-export__copy:hover{background:var(--stg-violet-press)}.stg-export__download{background:#fff;border:1.5px solid var(--stg-line);border-radius:9px;color:var(--stg-slate);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:11px 18px;transition:border-color .15s,color .15s}.stg-export__download:hover{border-color:var(--stg-violet);color:var(--stg-violet)}.stg-export__hint{color:var(--stg-mist);font-size:12px;line-height:1.6;margin:0;padding:0 16px 18px}.stg-export__hint code{background:var(--stg-paper);border:1px solid var(--stg-line);border-radius:4px;font-family:var(--stg-mono);font-size:11px;padding:1px 5px}.stg-export__cta{background:linear-gradient(135deg,rgba(250,98,98,.05),rgba(120,81,212,.05));border-top:1.5px solid var(--stg-line);padding:20px 16px;text-align:center}.stg-export__cta-btn{background:linear-gradient(135deg,var(--stg-coral),var(--stg-violet));border-radius:9px;color:#fff;display:inline-block;font-size:14px;font-weight:600;padding:12px 26px;text-decoration:none;transition:opacity .15s}.stg-export__cta-btn:hover{color:#fff;opacity:.92}.stg-export__cta-text{color:var(--stg-mist);font-size:12px;line-height:1.55;margin:10px 0 0}@media (max-width:900px){.stg-ladder__scale{min-height:540px}}@media (prefers-reduced-motion:reduce){.stg-tint-shade *{transition:none!important}}