.ed .vp { --vp-line: rgba(var(--ed-i), .22); --vp-flow: #f08257; padding: 110px 0 104px; }
.ed--band .vp { --vp-flow: var(--rv-em); }

.ed .vp-head { max-width: 900px; }
.ed .vp-head .sx-k { margin-bottom: 20px; }
.ed .vp-h { font-size: 64px; line-height: 60px; }


.ed .vp-grid { position: relative; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px dashed var(--vp-line); border-bottom: 1px dashed var(--vp-line); }
.ed .vp-c { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr auto; padding: 44px 56px 52px 0; }
.ed .vp-c:nth-child(odd) { padding-left: 0; }
.ed .vp-c[data-vp="2"], .ed .vp-c[data-vp="4"] { padding: 44px 0 52px 56px; border-left: 1px dashed var(--vp-line); }
.ed .vp-c[data-vp="1"], .ed .vp-c[data-vp="2"] { border-bottom: 1px dashed var(--vp-line); }
.ed .vp-n { justify-self: start; width: max-content; margin: 0 0 14px; font: 400 22px/1 "LisaTerminal Paper 2X3Y Medium", "LisaTerminal Paper 2X3Y", ui-monospace, monospace; color: var(--vp-flow); }
.ed .vp-t { font-size: 34px; line-height: 36px; margin: 0 0 12px; }
.ed .vp-b { max-width: 470px; margin: 0 0 28px; font-size: 17px; line-height: 25px; }


.ed .vp-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.ed .vp-flow .vp-path { fill: none; stroke: var(--vp-flow); stroke-width: 2; stroke-dasharray: 7 6; }
.ed .vp-flow .vp-head-a { fill: var(--vp-flow); }
.ed .vp-flow .vp-node { fill: var(--rv-ground, #1e1e1e); stroke: var(--vp-flow); stroke-width: 2; }
.ed .vp-flow .vp-dot { fill: var(--vp-flow); }


.ed .vp-w { height: 214px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.ed .vp-w .tw-in { flex: 1; display: flex; }
.ed .vp-w .tw-b { padding: 20px 22px; }
.ed .vp-w .tw-bar .ic { margin-right: 0; }

.ed .vp-plan { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 8px; padding: 18px 20px; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #127a57; background: #fff; }
.ed .vp-pn { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 10px; font: 600 17px/1 var(--g-font); color: #0e1a15; }
.ed .vp-pn span { padding: 3px 8px; border-radius: 5px; background: #e3f3ec; color: #127a57; font-size: 12px; font-weight: 600; }
.ed .vp-pr { margin: 0; display: flex; align-items: baseline; gap: 8px; min-height: 48px; font: 400 14px/1 var(--g-font); color: #6b7872; }
.ed .vp-pr b { font: 700 46px/1 var(--g-font); letter-spacing: -.02em; color: #0e1a15; }
.ed .vp-ps { margin: 0; font: 400 14px/1.3 var(--g-font); color: #4a5751; }
.ed .is-bot .vp-ps { font-family: var(--g-code, ui-monospace, monospace); font-size: 13px; color: #a40e26; }
.ed .vp-hole { display: block; width: 104px; height: 48px; border-radius: 9px; border: 3px dashed #cf222e; background: #fff5f4; }
.ed .is-bot .vp-plan { box-shadow: inset 0 0 0 2px #d1d9e0; }

.ed .vp-kb { margin-top: 16px; display: grid; gap: 8px; font: 400 14px/1.3 var(--g-font); color: var(--g-dim); }
.ed .vp-kb p { margin: 0; }
.ed .vp-kb b { font-weight: 650; color: var(--g-ink); }
.ed .vp-kbbar { display: block; height: 10px; border-radius: 5px; background: rgba(127, 127, 127, .28); position: relative; overflow: hidden; }
.ed .vp-kbbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 5px; background: #cf222e; }

.ed .vp-q { margin: 0; font: 600 18px/1.3 var(--g-font); color: var(--g-ink); }
.ed .vp-a { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: #fff; font: 400 16px/1.45 var(--g-font); color: #1f2328; }
.ed .vp-r { margin: 12px 0 0; display: grid; grid-template-columns: 30px auto 1fr 24px; align-items: center; column-gap: 12px;
  padding: 12px 14px; border-radius: 12px; font: 400 14px/1.3 var(--g-font); color: #59636e; }
.ed .vp-r b { font: 650 17px/1 var(--g-font); color: #1f2328; }
.ed .vp-r .gl-av { width: 30px; height: 30px; font-size: 15px; }
.ed .vp-r.is-win { background: #fdf3cf; }
.ed .vp-r.is-lose { background: #fff; }
.ed .vp-r.is-lose b, .ed .vp-r.is-lose span { color: #8c959f; }
.ed .vp-ok, .ed .vp-no { width: 22px; height: 22px; border-radius: 50%; justify-self: end; }
.ed .vp-ok { background: #1a7f37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ed .vp-no { background: #cf222e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat; }

.ed .vp-foot { margin-top: 40px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px 64px; flex-wrap: wrap; }
.ed .vp-foot .sx-b { margin: 0; max-width: 620px; font-size: 19px; line-height: 27px; }

@media (max-width: 1100px) {
  .ed .vp-h { font-size: 52px; line-height: 50px; }
  .ed .vp-c { padding-right: 36px; }
  .ed .vp-c[data-vp="2"], .ed .vp-c[data-vp="4"] { padding-left: 36px; }
}


@media (max-width: 760px) {
  .ed .vp { padding: 72px 0 76px; }
  .ed .vp-h { font-size: 36px; line-height: 38px; }
  .ed .vp-grid { grid-template-columns: 1fr; margin-top: 36px; border-bottom: 0; }
  .ed .vp-c, .ed .vp-c[data-vp="2"], .ed .vp-c[data-vp="4"] { padding: 28px 0 32px 44px; border-left: 0; }
  .ed .vp-c[data-vp="3"] { border-bottom: 1px dashed var(--vp-line); }
  .ed .vp-c[data-vp="4"] { border-bottom: 1px dashed var(--vp-line); }
  .ed .vp-n { position: absolute; left: 0; top: 30px; margin: 0; font-size: 20px; }
  .ed .vp-t { font-size: 26px; line-height: 28px; margin-bottom: 8px; }
  .ed .vp-b { font-size: 16px; line-height: 23px; margin-bottom: 18px; }
  .ed .vp-w { height: auto; }
  .ed .vp-w .tw-b { padding: 16px; }
  .ed .vp-pr b { font-size: 40px; }
  .ed .vp-foot { margin-top: 28px; }
  .ed .vp-foot .sx-b { font-size: 17px; line-height: 25px; }
}



.ed .vp-w { height: 232px; }
@media (max-width: 760px) {
  .ed .vp-w { height: auto; }
  
  .ed .vp-plan { grid-template-columns: 1fr; }
  .ed .vp-pr { flex-wrap: wrap; }
  .ed .vp-pr span { white-space: nowrap; }
  
  .ed .vp-r { grid-template-columns: 30px 1fr 24px; row-gap: 2px; }
  .ed .vp-r .gl-av { grid-row: 1 / span 2; }
  .ed .vp-r span { grid-column: 2; grid-row: 2; }
  .ed .vp-r .vp-ok, .ed .vp-r .vp-no { grid-column: 3; grid-row: 1 / span 2; }
}

.ed--band#sx-run { margin-top: 0; }