.spl-wrap{width:100%}
.spl-panel{position:relative;width:100%;min-height:380px;box-sizing:border-box;border-radius:18px;padding:16px 16px 20px;
 background:linear-gradient(160deg,#fbf6e7 0%,#f5ecd6 100%);border:1px solid #e2d3aa;
 box-shadow:0 26px 52px -22px rgba(15,30,75,.38),0 2px 0 #fffdf4 inset;
 font-family:'JetBrains Mono',monospace;color:#16264f;display:grid;gap:11px;--splac:#b4552d}
.spl-a0{--splac:#b4552d}.spl-a1{--splac:#4a6741}.spl-a2{--splac:#8a3a3a}.spl-a3{--splac:#2e6f6a}
.spl-hd{grid-area:hd;border-bottom:1px dashed #d8c795;padding-bottom:9px}
.spl-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.2em;color:#8a7742}
.spl-name{display:block;font-family:'Source Serif 4',serif;font-size:20px;font-weight:700;color:#101f45;margin-top:4px;line-height:1.1}
.spl-sub{display:block;font-size:9.5px;letter-spacing:.08em;color:#5a6280;margin-top:3px}
.spl-steps{grid-area:st;display:flex;gap:7px;flex-wrap:wrap}
.spl-step{display:flex;align-items:center;gap:6px;background:#fffdf4;border:1px solid #e2d3aa;border-radius:999px;
 padding:5px 10px;font-size:8.5px;font-weight:800;letter-spacing:.1em;color:#37456e;transition:opacity .3s}
.spl-dot{width:8px;height:8px;border:1.5px solid #93a;border-radius:50%;display:inline-block;flex:none;
 border-color:#8d94ad;background:transparent;transition:background .3s,border-color .3s}
.spl-step.spl-on .spl-dot{background:var(--splac);border-color:var(--splac)}
.spl-start .spl-step:not(.spl-on){opacity:.3}
.spl-before{grid-area:bf}.spl-after{grid-area:af}
.spl-pane{background:#fffdf4;border:1px solid #e7dbb6;border-radius:12px;padding:9px}
.spl-after.spl-pane{border-color:var(--splac);box-shadow:0 0 0 1px var(--splac) inset}
.spl-ttl{display:block;font-size:8.5px;font-weight:800;letter-spacing:.16em;color:#7a6a3f;margin:0 0 7px 2px}
.spl-after .spl-ttl{color:var(--splac)}
.spl-row{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #f0e6c8;
 padding:5.5px 2px;font-size:10.5px;color:#25335c}
.spl-row:first-of-type{border-top:0}
.spl-chip{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.12em;border-radius:999px;padding:2.5px 8px;flex:none}
.spl-c-ex{color:#9c3222;background:#f6e0d6;border:1px solid #e3b8a6}
.spl-c-ok{color:#fffdf4;background:var(--splac);border:1px solid var(--splac)}
.spl-flip .spl-c1{display:none}.spl-flip .spl-c2{display:inline-block}
.spl-start .spl-flip:not(.spl-ok) .spl-c1{display:inline-block}
.spl-start .spl-flip:not(.spl-ok) .spl-c2{display:none}
.spl-note{display:block;font-size:8.5px;line-height:1.5;color:#6a7392;margin-top:7px;letter-spacing:.02em}
.spl-foot{grid-area:ft;display:flex;flex-direction:column;gap:5px;position:relative;padding-right:104px}
.spl-frow{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#37456e;transition:opacity .3s}
.spl-fok{display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;border-radius:50%;flex:none;
 background:var(--splac);color:#fffdf4;font-size:8.5px;font-weight:800}
.spl-start .spl-frow:not(.spl-on){opacity:.32}
.spl-start .spl-frow:not(.spl-on) .spl-fok{background:#c9c2a6}
.spl-stamp{position:absolute;right:0;bottom:2px;transform:rotate(-4deg);border:2px solid var(--splac);color:var(--splac);
 border-radius:8px;padding:6px 9px;font-size:9px;font-weight:800;letter-spacing:.14em;background:rgba(255,253,244,.72);
 transition:opacity .4s,transform .4s}
.spl-start .spl-stamp:not(.spl-on){opacity:0;transform:rotate(-4deg) scale(1.25)}
.spl-g0{grid-template-areas:'hd hd' 'st st' 'bf af' 'ft ft';grid-template-columns:1fr 1fr}
.spl-g1{grid-template-areas:'hd' 'bf' 'st' 'af' 'ft'}
.spl-g1 .spl-steps{justify-content:space-between}
.spl-g2{grid-template-areas:'hd hd' 'st bf' 'st af' 'ft ft';grid-template-columns:118px 1fr}
.spl-g3{grid-template-areas:'hd hd' 'bf st' 'af st' 'ft ft';grid-template-columns:1fr 118px}
.spl-g2 .spl-steps,.spl-g3 .spl-steps{flex-direction:column;flex-wrap:nowrap;align-content:flex-start}
.spl-g2 .spl-step,.spl-g3 .spl-step{border-radius:10px}
@media (max-width:900px){
 .spl-g0,.spl-g2,.spl-g3{grid-template-areas:'hd' 'st' 'bf' 'af' 'ft';grid-template-columns:1fr}
 .spl-g2 .spl-steps,.spl-g3 .spl-steps{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:700px){.spl-hgrid{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion: reduce){
 #spl-root *{transition:none!important;animation:none!important}
}