.sl-steps{display:flex;gap:8px;margin-bottom:24px}.sl-steps button{flex:1;border:1px solid var(--line);border-radius:6px;padding:12px;background:var(--bg);color:var(--muted);font:600 11px var(--sans);text-align:left}.sl-steps button.on{background:#e0ecdf;border-color:#8fb69b;color:#226052}.sl-steps span{margin-left:8px}.sl-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:30px}.sl-instruction{min-height:98px}.sl-instruction>span{font:600 8px var(--sans);letter-spacing:.12em;color:var(--teal)}.sl-instruction h3{font:400 24px/1.25 var(--serif);margin:8px 0}.sl-instruction p{font-size:11px;color:var(--muted);max-width:58ch;margin-bottom:18px}.sl-canvas{border:1px solid var(--line);border-radius:8px;background:#eef2e8;overflow:hidden}.sl-canvas svg{display:block;width:100%;touch-action:none;user-select:none}.sl-legend{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--muted);margin:10px 0 17px}.sl-actions{display:flex;gap:8px;flex-wrap:wrap}.sl-actions .btn{font-size:10px}.sl-actions #sl-next{background:var(--ink);color:var(--panel);border-color:var(--ink)}.sl-score{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:19px 20px;margin-bottom:12px}.sl-score.best{background:#e9f1e4;border-color:#cadcc5}.sl-score>span{display:block;color:var(--muted);font-size:9px}.sl-score>strong{display:block;font:400 46px/1.2 var(--serif);font-variant-numeric:tabular-nums;margin:8px 0;color:var(--teal)}.sl-score:not(.best)>strong{color:var(--muted)}.sl-score>b{font-size:12px}.sl-score p{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 0}.sl-output{margin-top:24px}.sl-output .app-kicker{font-size:8px}.sl-output #sl-order{display:flex;gap:7px;margin:12px 0}.sl-output #sl-order>div{flex:1;border:1px solid var(--line);border-radius:5px;text-align:center;padding:10px 3px;background:var(--panel)}.sl-output small{display:block;font:8px var(--sans);color:var(--muted);margin-bottom:8px}.sl-output i{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:5px}.sl-output b{font-size:10px}.sl-output button{width:100%;font-size:11px}.sl-feedback{margin:15px 0 0;padding-left:12px;border-left:2px solid var(--teal);font-size:11px;color:var(--ink2);min-height:50px}.sl-math{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;font-size:11px;color:var(--muted)}.sl-math summary{color:var(--teal);cursor:pointer;margin-bottom:15px}.sl-math .chosen{background:#deedda;color:#226052}.sl-perm-chip{display:inline-block;padding:6px 10px;margin:3px;border:1px solid var(--line);border-radius:4px;font-size:10px}.sl-perm-chip.on{background:#deedda}.sl-piece{cursor:grab}.sl-tip{cursor:crosshair}
@media(max-width:1000px){.sl-layout{grid-template-columns:1fr}.sl-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sl-score{margin:0}.sl-output,.sl-feedback{grid-column:1/-1}.sl-score strong{font-size:37px}}
@media(max-width:450px){.sl-steps{gap:5px}.sl-steps button{font-size:10px;padding:10px 7px;text-align:center}.sl-steps span{display:block;margin:6px 0 0;font-size:9px}.sl-score{padding:14px}.sl-instruction h3{font-size:22px}.sl-legend{font-size:8px}.sl-results{gap:9px}}