.sppage{--spline:#dfe2ee;--spsoft:#f5f6fb;--sptext:#3a3a44;--spmuted:#6b6f80}.spstart{max-width:560px;margin:18px auto 6px;padding:0 2%}.spdrop{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:11px;padding:26px 12px 24px;border:3px dashed #9da0d9;border-radius:8px;background:#fff;box-shadow:rgba(100,100,111,.2) 0 2px 8px;cursor:pointer;text-align:center}.spdrop:hover{background:#fbfbff}.spdrophint{font-size:13.5px;color:#6e6e6e}.spdropnote{font-size:12.5px;color:#8a8ea6}.spwait{margin:14px auto 0;text-align:center;font-size:14px;color:var(--spmuted)}.spwait.spproblem{color:var(--scolor);font-weight:bold}.spwait.hide{display:none}.spapp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:14px;align-items:start;margin:16px 2% 10px;color:var(--sptext)}.spapp.hide{display:none}.spstagepanel{position:sticky;top:10px;z-index:4}.sppanel{background:#fff;border:1px solid var(--spline);border-radius:10px;padding:12px;box-shadow:0 2px 8px rgba(100,100,111,.12);min-width:0}.spbar{display:flex;align-items:center;gap:8px;margin-bottom:8px}.spspacer{flex-grow:1}.sptool{height:34px;padding:0 12px;border:1px solid var(--spline);border-radius:7px;background:#fff;color:var(--sptext);font-size:13.5px;font-weight:600;cursor:pointer}.sptool[hidden]{display:none}.spstage{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:8px;background-color:#eceef5;background-image:linear-gradient(45deg,#e2e5ef 25%,transparent 25%,transparent 75%,#e2e5ef 75%),linear-gradient(45deg,#e2e5ef 25%,transparent 25%,transparent 75%,#e2e5ef 75%);background-size:20px 20px;background-position:0 0,10px 10px;min-height:220px;overflow:hidden}#spcanvas{display:block;box-shadow:0 1px 6px rgba(40,45,90,.18)}.spinfo{margin:9px 2px 0;font-size:13px;color:var(--spmuted)}.spcard{margin-top:10px;padding:11px;border:1px solid var(--spline);border-radius:10px}.spcard:first-child{margin-top:0}.spcardtitle{display:block;margin-bottom:9px;font-size:14.5px}.spways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.spway{position:relative;cursor:pointer}.spway input{position:absolute;opacity:0;width:1px;height:1px}.spwaybox{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;padding:8px 4px;box-sizing:border-box;border:2px solid var(--spline);border-radius:8px;color:#525669;font-size:12.5px;line-height:1.25;text-align:center}.spwaybox svg{width:40px;height:30px}.spway:hover .spwaybox{border-color:#c3c8ea}.spway input:checked + .spwaybox{border-color:var(--pcolor);background:#eef0fb;color:var(--pcolor);font-weight:bold}.spway input:focus-visible + .spwaybox{outline:2px solid var(--pcolor);outline-offset:2px}.spcheck{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;color:var(--sptext);cursor:pointer}.spcheck input{width:17px;height:17px;margin:0;accent-color:var(--pcolor)}.spcolourrow{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px}.spcolourrow input{width:42px;height:30px;padding:0;border:1px solid var(--spline);border-radius:6px;background:#fff;cursor:pointer}.spapp:not(.sptextmode) .sp-text,.spapp.sptextmode .sp-pic,.spapp.spclear .sp-colour,.spapp.sprock .sp-dir{display:none}.spmake{display:block;width:100%;margin-top:14px;padding:12px;border:0;border-radius:8px;background:var(--pcolor);color:#fff;font-size:16px;font-weight:bold;cursor:pointer}.spmake:hover{filter:brightness(1.08)}.spmake:disabled{background:#b7bac7;cursor:not-allowed;filter:none}@media only screen and (max-width:900px){.spapp{grid-template-columns:minmax(0,1fr);margin:14px 0 10px}.spstagepanel{top:0;border-radius:0 0 10px 10px;border-top:0;box-shadow:0 4px 10px rgba(100,100,111,.16)}.spbar{display:none}.spstage{min-height:0;padding:8px}.spinfo{margin-top:6px;font-size:12px}.spstart{margin-top:14px}}@media only screen and (max-width:600px){.sppanel{padding:10px}}.splink{padding:4px 2px;border:0;background:none;color:var(--pcolor);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}.splink[hidden]{display:none}@media only screen and (max-width:900px){}.sptextbox{width:100%;box-sizing:border-box;min-height:58px;padding:8px 10px;border:1px solid var(--spline);border-radius:7px;font:inherit;font-size:15px;font-weight:bold;color:var(--sptext);resize:vertical}.spfield{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:13.5px;color:var(--sptext)}.spfield select{flex:1;min-width:0;height:31px;padding:0 8px;border:1px solid var(--spline);border-radius:6px;background:#fff;color:var(--sptext);font-size:13.5px}.spfield input[type=color]{width:42px;height:30px;padding:0;border:1px solid var(--spline);border-radius:6px;background:#fff;cursor:pointer}.sprange{display:block}.sprange input[type=range]{width:100%;margin:0;height:30px;accent-color:var(--pcolor)}.sprange output{display:block;font-size:13px;font-weight:bold;color:var(--sptext)}.spways.spways3{grid-template-columns:repeat(3,minmax(0,1fr))}.spswap{margin-top:10px;text-align:center}.spstart .splink{display:block;margin:12px auto 0}