#jak .howto {
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wrap-mid); margin: 0 auto; padding: 0; list-style: none;
}
#jak .howto__item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 28px 32px 30px;
  background: var(--surface); border-radius: var(--r-lg);
}
#jak .howto__n {
  flex: none; min-width: 0.85em;
  font-family: var(--font-display); font-size: 2.75rem; font-weight: 600;
  line-height: 0.92; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
#jak .howto__b { min-width: 0; }
#jak .howto__t {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.008em; color: var(--fg);
  margin-bottom: 8px; text-wrap: balance;
}
#jak .howto__d {
  font-size: var(--fs-body); line-height: 1.5; color: var(--fg-2); text-wrap: pretty;
}

#jak .howto__more {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap; margin: 40px auto 0; max-width: var(--wrap-mid);
}
#jak .howto__more .btn svg { width: 17px; height: 17px; flex: none; }
#jak .howto__hint {
  font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); max-width: 25rem;
}

@media (max-width: 780px) {
  #jak .howto { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #jak .howto__item { padding: 22px 22px 24px; gap: 14px; }
  #jak .howto__n { font-size: 2.25rem; }
  #jak .howto__more { flex-direction: column; gap: 14px; text-align: center; margin-top: 32px; }
}


.wfmap {
  position: fixed; inset: 0; z-index: 70; display: none; background: var(--bg);
  opacity: 0; transform: scale(0.985);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.wfmap.is-full { display: block; }
.wfmap.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wfmap { transition: none; }
}

.wfmap:not(.is-js) { position: static; display: block; background: none; opacity: 1; transform: none; }
.wfmap:not(.is-js) .wfmap__frame { display: none; }
.wfmap:not(.is-js) .wfmap__src {
  position: static; width: auto; height: auto; clip-path: none; white-space: normal;
  display: grid; gap: 24px; max-width: 42.5rem; margin: 40px auto 0;
}
.wfmap:not(.is-js) .wfmap__src h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.wfmap:not(.is-js) .wfsrc::before {
  content: attr(data-wft); display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--fg);
}

.wfmap__frame {
  position: relative; overflow: hidden;
  background: var(--bg);
  height: 100%;
  touch-action: manipulation;
}

.wfmap__view {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none; cursor: grab; outline: none;
  -webkit-user-select: none; user-select: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
  background-position: var(--gx, 0px) var(--gy, 0px);
  background-size: var(--gs, 24px) var(--gs, 24px);
}
.wfmap__view:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-sky); }
.wfmap.is-drag .wfmap__view { cursor: grabbing; }

.wfmap__view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(90deg, rgba(6, 10, 20, 0.8), rgba(6, 10, 20, 0) 5%, rgba(6, 10, 20, 0) 95%, rgba(6, 10, 20, 0.8)),
    linear-gradient(180deg, rgba(6, 10, 20, 0.7), rgba(6, 10, 20, 0) 7%, rgba(6, 10, 20, 0) 93%, rgba(6, 10, 20, 0.7));
}

.wfmap__world {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  will-change: transform;
}
.wfmap__wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

.wfmap__wires path[data-a] { fill: none; stroke: rgba(169, 180, 202, 0.42); stroke-width: 2; }
.wfmap__wires path[data-a].is-on { stroke: var(--blue-sky); stroke-width: 2.6; }
#wfArrow path { fill: rgba(169, 180, 202, 0.7); }
#wfArrowOn path { fill: var(--blue-sky); }

.wfn {
  position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 260px);
  text-align: left; cursor: pointer; font-family: var(--font-text); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-850);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wfn:hover { border-color: rgba(138, 184, 255, 0.5); transform: translateY(-2px); }
.wfn:focus-visible { outline: none; border-color: var(--blue-sky); box-shadow: 0 0 0 1px var(--blue-sky); }
.wfn.is-on {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
  background: var(--ink-800);
}

.wfn--big { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.wfn--big .wfn__ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  color: var(--blue-sky); background: rgba(37, 99, 235, 0.18);
}
.wfn--big .wfn__ic svg { width: 22px; height: 22px; }
.wfn--big .wfn__t {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
}
.wfn--big .wfn__tag {
  position: absolute; top: -12px; right: 10px; z-index: 2;
}

.wfn__n {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.wfn__tag {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-family: var(--font-text); font-size: 11.5px; font-weight: 600; line-height: 1.3;
  color: var(--fg-2); background: var(--ink-800);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px 9px 3px;
}
.wfn__tag--max {
  color: #d6e5ff;
  background: color-mix(in srgb, var(--blue) 30%, var(--ink-850));
  border-color: rgba(37, 99, 235, 0.75);
}
.wfn__tag .tokenic { width: 13px; height: 13px; vertical-align: 0; }

.wfn--start { padding-left: 46px; }
.wfn__start {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.14) 0% 25%, rgba(255, 255, 255, 0) 0% 50%) 0 0 / 9px 9px,
    var(--blue);
}
.wfn__start-t {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-text); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
}

.wfn--small {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-sm);
}
.wfn--small .wfn__ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  color: var(--fg-2); background: var(--ink-800);
}
.wfn--small .wfn__ic svg { width: 18px; height: 18px; }
.wfn--small .wfn__b { display: grid; gap: 1px; min-width: 0; }
.wfn--small .wfn__t { font-family: var(--font-text); font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }

.wfn--trigger {
  border-top-left-radius: 34px; border-bottom-left-radius: 34px; padding-left: 15px;
  border-color: var(--line-strong);
}
.wfn--trigger .wfn__ic { border-radius: 50%; }

.wfn--hero {
  border-color: rgba(37, 99, 235, 0.7);
  background: color-mix(in srgb, var(--blue) 16%, var(--ink-850));
}
.wfn--hero.is-on { background: color-mix(in srgb, var(--blue) 24%, var(--ink-850)); }

.wfn__p {
  display: none; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-950); border: 2px solid var(--fg-3);
}
.wfn[data-ports~="l"] .wfn__p--l { display: block; left: -5px; top: 50%; margin-top: -4.5px; }
.wfn[data-ports~="r"] .wfn__p--r { display: block; right: -5px; top: 50%; margin-top: -4.5px; }
.wfn[data-ports~="t"] .wfn__p--t { display: block; left: 50%; top: -5px; margin-left: -4.5px; }
.wfn[data-ports~="b"] .wfn__p--b { display: block; left: 50%; bottom: -5px; margin-left: -4.5px; }
.wfn.is-on .wfn__p { border-color: var(--blue-sky); }


.wfmap__exit {
  position: absolute; right: 12px; top: 12px; z-index: 8;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  color: var(--fg); background: var(--ink-850);
  border: 1px solid var(--line-strong); border-radius: 50%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wfmap__exit:hover {
  color: #fecdd3; border-color: color-mix(in srgb, var(--danger-on-dark) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 26%, var(--ink-850));
}
.wfmap__exit svg { width: 18px; height: 18px; }

@media (min-width: 901px) {
  .wfmap__exit, .wfmap__tools { transition: right 240ms var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .wfmap.is-open .wfmap__exit { right: calc(22rem + 12px); }
  .wfmap.is-open .wfmap__tools { right: calc(22rem + 16px); }
}

.wfmap__tools {
  position: absolute; right: 16px; top: 66px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.wfmap__tool {
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  color: var(--fg-2); background: var(--ink-850);
  border: 1px solid var(--line); border-radius: 50%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wfmap__tool:hover { color: var(--fg); background: var(--ink-800); border-color: var(--line-strong); }
.wfmap__tool svg { width: 16px; height: 16px; }

.wfmap__bar {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.wfmap__bar > * { pointer-events: auto; }
.wfmap.is-open .wfmap__bar { opacity: 0; pointer-events: none; }
#jak .wfmap__start svg { width: 13px; height: 13px; }

.wfmap__coach {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: grid; place-items: center;
  background: rgba(4, 8, 18, 0.58);
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.wfmap.is-touched .wfmap__coach { opacity: 0; visibility: hidden; }
.wfmap.is-touched .wfmap__hand svg { animation-play-state: paused; }
.wfmap__coachbox {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  max-width: min(22rem, 82vw); padding: 22px 26px 20px;
  border-radius: var(--r-lg);
  background: var(--ink-850);
  border: 1px solid var(--line);
  animation: wf-coach-in 220ms var(--ease) 200ms both;
}
@keyframes wf-coach-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.wfmap__hand { position: relative; display: block; width: 8.5rem; height: 3.25rem; }
.wfmap__hand::before {
  content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 2px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(138, 184, 255, 0), rgba(138, 184, 255, 0.55), rgba(138, 184, 255, 0));
}
.wfmap__hand svg {
  position: absolute; left: 50%; top: 0; margin-left: -1.1875rem;
  width: 2.375rem; height: 2.375rem; color: var(--fg);
  animation: wf-coach-swipe 2.8s ease-in-out infinite;
}
@keyframes wf-coach-swipe {
  0%   { transform: translateX(0) scale(1);            opacity: 0.25; }
  10%  { transform: translateX(0) scale(0.88);         opacity: 1; }
  40%  { transform: translateX(-2.375rem) scale(0.88); opacity: 1; }
  75%  { transform: translateX(2.375rem) scale(0.88);  opacity: 1; }
  85%  { transform: translateX(2.375rem) scale(1);     opacity: 0.25; }
  100% { transform: translateX(0) scale(1);            opacity: 0.25; }
}
.wfmap__coacht { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg); }
.wfmap__coachs { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  .wfmap__coachbox { animation: none; }
  .wfmap__hand svg { animation: none; opacity: 1; }
}

.wfmap__panel {
  position: absolute; z-index: 6; right: 0; top: 0; bottom: 0; width: 22rem;
  display: flex; flex-direction: column;
  background: var(--ink-900);
  border-left: 1px solid var(--line);
  transform: translateX(101%); transition: transform 240ms var(--ease);
}
.wfmap.is-open .wfmap__panel { transform: none; }
.wfmap__panelbody { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 12px; }
.wfmap__ptag {
  display: block; margin: 0 48px 6px 0;
  font-size: var(--fs-fine); font-weight: 600; line-height: 1.4;
  color: var(--accent-text);
}
.wfmap__ptitle {
  margin: 0 48px 10px 0;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance;
}
.wfmap__ptext { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }

.wfsrc__lead { font-size: var(--fs-small); line-height: 1.5; font-weight: 600; color: var(--fg); }
.wfsrc__pts { list-style: none; display: grid; gap: 8px; margin-top: 12px; padding: 0; }
.wfsrc__pts li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2);
}
.wfsrc__pts li::before {
  content: ""; position: absolute; left: 1px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-sky);
}
.wfsrc__pts b { color: var(--fg); font-weight: 600; }
.wfsrc__note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-fine); line-height: 1.5;
  color: #d6e5ff; background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(37, 99, 235, 0.42);
}
.wfsrc__note b { color: #fff; font-weight: 600; }
.wfsrc__note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--blue-sky); }
.wfsrc__note .tokenic { width: 15px; height: 15px; vertical-align: 0; }
.wfsrc__note--warn {
  color: #fde3b0;
  background: color-mix(in srgb, var(--warn-on-dark) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn-on-dark) 32%, transparent);
}
.wfsrc__note--warn svg { color: var(--warn-on-dark); }

.wfmap__plinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wfmap__plink {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  font-size: var(--fs-fine); font-weight: 600; color: var(--fg);
  border: 1px solid var(--line-strong); background: transparent;
  border-radius: var(--r-pill); padding: 7px 14px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wfmap__plink:hover { background: var(--ink-800); border-color: var(--fg-3); }
.wfmap__plink svg { flex: none; }

.wfmap__close {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  color: var(--fg-2); background: var(--ink-800); border: 0; border-radius: 50%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wfmap__close:hover { color: var(--fg); background: var(--ink-700); }
.wfmap__close svg { width: 14px; height: 14px; }

.wfmap__pnav {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 22px; border-top: 1px solid var(--line);
}
.wfmap__pnav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 17, 34, 0), var(--ink-900));
}
.wfmap__pbtn {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; cursor: pointer;
  color: var(--fg); background: var(--ink-800);
  border: 1px solid var(--line); border-radius: 50%;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wfmap__pbtn:hover { background: var(--ink-700); border-color: var(--line-strong); }
.wfmap__pbtn[disabled] { opacity: 0.3; cursor: default; }
.wfmap__pbtn[disabled]:hover { background: var(--ink-800); border-color: var(--line); }
#wfNext:not([disabled]) { color: #fff; background: var(--blue); border-color: var(--blue); }
#wfNext:not([disabled]):hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.wfmap__pbtn svg { width: 16px; height: 16px; }
.wfmap__pcount {
  font-size: var(--fs-fine); font-weight: 600; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.wfmap__src {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

body.wf-locked { overflow: hidden; }

@media (max-width: 900px) {
  .wfmap__panel {
    right: 0; left: 0; top: auto; bottom: 0; width: auto; max-height: 64%;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(101%);
  }
  .wfmap__panelbody { padding: 18px 18px 10px; }
  .wfmap__pnav { padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wfmap__bar {
    left: 0; right: 0; bottom: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(6, 10, 20, 0), rgba(6, 10, 20, 0.88) 55%);
  }
}

.instr .nobr { white-space: nowrap; }