/* System of Execution hero, variant "comparison": one submission forks — the record card
   waits on manual entry behind, the Anzen card executes in front. */
.sp-wrap{position:relative;height:432px}
.sp-card{position:absolute;display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--divide);border-radius:var(--radius-lg,12px);overflow:hidden;transition:border-color 300ms ease,box-shadow 300ms ease}
.sp-card.record{left:0;top:34px;width:47%;z-index:1;opacity:.95}
.sp-card.exec{right:0;top:96px;width:61%;z-index:2;box-shadow:0 6px 24px rgba(39,39,39,.1),0 2px 8px rgba(39,39,39,.06)}
.sp-card.hit{border-color:rgba(41,163,52,.5)}
.sp-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--divide);font-size:13px;font-weight:500;color:var(--fg1);white-space:nowrap}
.sp-head .ph{font-size:16px;color:var(--fg2);flex:none}
.sp-card.record .sp-head{color:var(--fg2)}
.sp-card.exec .sp-head{background:var(--brand-500);color:#fff;border-bottom-color:transparent}
.sp-card.exec .sp-head svg{flex:none}
.sp-body{padding:14px;display:flex;flex-direction:column;gap:11px;flex:1}
.sp-field label{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg2);margin-bottom:4px}
.sp-val{height:30px;border:1px solid var(--divide);border-radius:6px;padding:0 9px;font-size:12.5px;display:flex;align-items:center;color:var(--fg1);background:#fff;overflow:hidden;white-space:nowrap}
.sp-caret{display:inline-block;width:1px;height:14px;background:var(--fg1);margin-left:1px;animation:spBlink 1s steps(1) infinite}
@keyframes spBlink{50%{opacity:0}}
.sp-fork{position:absolute;left:50%;top:2px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--bg-light-green,#e8ebe8);border:1px solid #d0d7cf;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:500;color:var(--fg1);box-shadow:0 2px 8px rgba(39,39,39,.08);opacity:0;z-index:3;transition:left 700ms cubic-bezier(.4,0,.2,1),top 700ms cubic-bezier(.4,0,.2,1),opacity 300ms ease}
.sp-fork .ph{font-size:13px;color:var(--fg2);flex:none}
.sp-fork.show{opacity:1}
.sp-fork--l{color:var(--fg2)}
.sp-fork--l.go{left:23%;top:64px}
.sp-fork--r.go{left:70%;top:152px}
.sp-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--fg2);transition:color 300ms ease}
.sp-row--sub{opacity:0;transition:opacity 300ms ease;color:var(--fg2);background:var(--bg-light-green,#e8ebe8);border-radius:6px;padding:7px 9px;margin:-2px -2px 0}
.sp-row--sub .sp-ic i{display:block;position:absolute;inset:0;font-size:16px;color:#a3a9a1}
.sp-row--sub.show{opacity:1}
.sp-row .sp-ic{position:relative;width:17px;height:17px;flex:none}
.sp-row .sp-ic i{position:absolute;inset:0;font-size:17px;display:none}
.sp-row .i-wait{color:#c3c9c1;display:block}
.sp-row.doing .i-wait,.sp-row.done .i-wait{display:none}
.sp-row.doing .i-doing{display:block;color:var(--primary);animation:spSpin 900ms linear infinite}
.sp-row.done .i-done{display:block;color:#29a334}
.sp-row.doing,.sp-row.done{color:var(--fg1)}
@keyframes spSpin{to{transform:rotate(360deg)}}
.sp-foot{padding:10px 14px;border-top:1px solid var(--divide);font-size:11.5px;color:var(--fg2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.sp-foot .ph{font-size:13px;flex:none}
.sp-card.exec .sp-foot.lit{color:#1c7a26}
@media (max-width:640px){.sp-wrap{height:400px}.sp-card.record{width:53%}.sp-card.exec{width:66%}.sp-head{font-size:12px}.sp-row{font-size:11.5px}.sp-foot{font-size:10.5px}.sp-fork{font-size:11px}.sp-fork--l.go{left:26%}.sp-fork--r.go{left:66%}}