/* "Show me how": the floating walkthrough panel drawn by web/walkthrough.js.
   Motion uses transform and opacity only (plus the arrow's stroke-dashoffset), with ease-out curves. */
.wt-panel {
  --wt-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  --wt-line: var(--line, rgba(13, 13, 15, .08));
  position: absolute; z-index: 45; box-sizing: border-box;
  width: 400px; max-width: calc(100vw - 24px);
  padding: 9px 12px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), var(--shadow-lg, 0 2px 6px rgba(13, 13, 15, .05), 0 24px 60px -20px rgba(13, 13, 15, .22));
  color: var(--ink); font: 13px/1.4 var(--font);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .24s var(--wt-ease), transform .38s var(--wt-ease);
  will-change: opacity, transform;
  outline: none;
}
.wt-panel.in { opacity: 1; transform: none; }
.wt-panel.out { opacity: 0; transform: translateY(4px) scale(.985); transition: opacity .18s ease-in, transform .2s ease-in; }
.wt-panel.corner { right: 20px; }
.wt-panel.docked {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none; transform: translateY(16px);
}
.wt-panel.docked.in { transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wt-panel { background: rgba(255, 255, 255, .96); }
}

/* header: title and icon buttons */
.wt-top { display: flex; align-items: center; gap: 4px; margin: 0 -5px 8px 0; }
.wt-dot { flex: none; width: 6px; height: 6px; margin: 0 5px 0 1px; border-radius: 50%; background: var(--accent); animation: wt-breathe 1.8s ease-in-out infinite; }
.wt-panel.done .wt-dot { animation: none; opacity: .3; }
@keyframes wt-breathe { 50% { opacity: .35; transform: scale(.75); } }
.wt-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-icon {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.wt-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wt-icon:hover { background: rgba(13, 13, 15, .06); color: var(--ink); }
.wt-icon:focus-visible, .wt-fix:focus-visible, .wt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wt-panel.done .wt-icon[aria-label="Replay"] { color: var(--ink); background: rgba(13, 13, 15, .05); }

/* stage: light copies of the fields */
.wt-stage {
  position: relative; display: grid; gap: 6px; padding: 10px;
  border-radius: 12px; background: rgba(247, 247, 246, .6); box-shadow: inset 0 0 0 1px rgba(13, 13, 15, .05);
}
.wt-lane { height: 28px; margin: -3px 0 -3px; }
.wt-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.wt-lbl { font-size: 11px; line-height: 1.25; color: var(--muted); }
.wt-cell { min-width: 0; }
.wt-in {
  position: relative; display: flex; align-items: center; height: 30px; padding: 0 26px 0 7px;
  border: 1px solid var(--wt-line); border-radius: 8px; background: rgba(255, 255, 255, .85);
  font-size: 12.5px; color: var(--ink);
}
.wt-in.code { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.wt-in.empty { border-style: dashed; background: rgba(255, 255, 255, .5); }
.wt-txt { position: relative; min-width: 0; padding: 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease-out; }
.wt-txt::before { content: ""; position: absolute; inset: 4px 0; border-radius: 2px; background: rgba(13, 13, 15, .12); opacity: 0; transition: opacity .12s ease-out; }
.wt-in.sel .wt-txt::before { opacity: 1; }
.wt-in.cleared .wt-txt { opacity: 0; }
.wt-caret { flex: none; width: 1px; height: 14px; margin-left: 1px; background: var(--ink); opacity: 0; }
.wt-in.typing .wt-caret { animation: wt-blink 1s steps(1, end) infinite; }
@keyframes wt-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* the exact part that is wrong */
.wt-in mark { position: relative; padding: 0; background: none; color: inherit; }
.wt-in mark::before { content: ""; position: absolute; inset: -2px -1px; border-radius: 3px; background: rgba(192, 53, 43, .12); opacity: 0; transition: opacity .3s var(--wt-ease), background-color .3s ease-out; }
.wt-in mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 1px; background: var(--err); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--wt-ease); }
.wt-in mark.on::before { opacity: 1; }
.wt-in mark.on::after { transform: scaleX(1); }
.wt-in mark.ok::before { background-color: rgba(29, 122, 78, .12); }
.wt-in mark.ok::after { background-color: var(--ok); transition: transform .45s var(--wt-ease), background-color .3s ease-out; }

/* states as fading rings, so only opacity animates */
.wt-in::before, .wt-in::after, .wt-docrow::before, .wt-docrow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--wt-ease);
}
.wt-in::before, .wt-docrow::before { border: 1px solid rgba(192, 53, 43, .55); box-shadow: 0 0 0 3px rgba(192, 53, 43, .07); }
.wt-in::after, .wt-docrow::after { border: 1px solid rgba(29, 122, 78, .55); box-shadow: 0 0 0 3px rgba(29, 122, 78, .08); }
.wt-row.focus .wt-in::before { border-color: rgba(13, 13, 15, .25); box-shadow: 0 0 0 3px rgba(13, 13, 15, .04); }
.wt-row.bad .wt-in::before, .wt-row.focus .wt-in::before, .wt-docrow.bad::before { opacity: 1; }
.wt-row.good .wt-in::after, .wt-docrow.good::after { opacity: 1; }
.wt-ok { position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0; transform: scale(.6); transition: opacity .25s var(--wt-ease), transform .4s var(--wt-ease); }
.wt-ok svg { display: block; width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-row.good .wt-ok, .wt-docrow.good > .wt-ok { opacity: 1; transform: none; }
.wt-hint { margin-top: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-2px); transition: opacity .3s var(--wt-ease), transform .3s var(--wt-ease); }
.wt-hint.on { opacity: 1; transform: none; }

/* documents and mock buttons */
.wt-docrow {
  grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 9px; padding: 6px 8px;
  border: 1px solid var(--wt-line); border-radius: 9px; background: rgba(255, 255, 255, .85);
}
.wt-docrow.empty { border-style: dashed; background: rgba(255, 255, 255, .5); }
.wt-docic svg { display: block; width: 17px; height: 21px; fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.wt-docname { min-width: 0; }
.wt-doct { font-size: 12px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-sub { font-size: 10.5px; color: var(--muted); }
.wt-docrow > .wt-ok { left: 19px; right: auto; top: auto; bottom: 4px; margin: 0; border-radius: 50%; background: #fff; }
.wt-mini {
  position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid rgba(13, 13, 15, .14); border-radius: 7px; background: rgba(255, 255, 255, .92);
  font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.wt-mini::after { content: ""; position: absolute; inset: -1px; border-radius: 7px; border: 1px solid rgba(13, 13, 15, .4); box-shadow: 0 0 0 3px rgba(13, 13, 15, .06); opacity: 0; transition: opacity .25s var(--wt-ease); }
.wt-mini.pressed::after { opacity: 1; }
.wt-actrow { padding-left: 92px; }
.wt-stage.solo .wt-actrow { padding-left: 0; }
.wt-more-row { padding-left: 92px; font-size: 11px; color: var(--muted); }

/* the arrow and its label */
.wt-pill {
  position: absolute; left: 0; top: 0; z-index: 2; max-width: 74%; padding: 4px 10px;
  border-radius: 11px; background: rgba(13, 13, 15, .9); color: #fff;
  font-size: 11px; font-weight: 550; line-height: 1.3; letter-spacing: .005em;
  overflow: hidden; pointer-events: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  box-shadow: 0 4px 12px -4px rgba(13, 13, 15, .35);
  opacity: 0; transform: translateY(3px) scale(.96);
  transition: opacity .28s var(--wt-ease) .08s, transform .4s var(--wt-ease) .08s;
}
.wt-pill.on { opacity: 1; transform: none; }
.wt-pill.off { opacity: 0; transform: translateY(-2px); transition-duration: .2s, .2s; transition-delay: 0s, 0s; }
.wt-arrow { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; }
.wt-arrow.on { opacity: 1; }
.wt-arrow.off { opacity: 0; }
.wt-arrow path { fill: none; stroke: rgba(13, 13, 15, .82); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wt-shaft { transition: stroke-dashoffset .55s cubic-bezier(.33, 1, .68, 1); }
.wt-head { opacity: 0; transition: opacity .2s ease-out .42s; }
.wt-arrow.on .wt-head { opacity: 1; }

/* caption, fix button, progress */
.wt-caption { min-height: 37px; margin: 9px 2px 0; font-size: 13px; line-height: 1.42; color: rgba(13, 13, 15, .88); transition: opacity .18s ease-out, transform .28s var(--wt-ease); }
.wt-caption.swap { opacity: 0; transform: translateY(3px); transition-duration: .14s, .14s; }
.wt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.wt-foot.empty { display: none; }
.wt-langs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-right: auto; padding: 2px; border-radius: 999px; background: rgba(13, 13, 15, .05); animation: wt-appear .3s var(--wt-ease); }
.wt-langs[hidden], .wt-chip[hidden] { display: none; }
.wt-chip {
  height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 550; line-height: 24px;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.wt-chip:hover { color: var(--ink); }
.wt-chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 13, 15, .12); }
@keyframes wt-appear { from { opacity: 0; transform: scale(.96); } }
.wt-fix {
  position: relative; max-width: 100%; height: 30px; padding: 0 12px;
  border: 0; border-radius: 9px; background: var(--ink); color: #fff; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.wt-fix span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-fix:hover { background: #26262b; }
.wt-fix::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 2px solid rgba(13, 13, 15, .32); opacity: 0; transform: scale(.96); pointer-events: none; }
.wt-fix.pulse::after { animation: wt-pulse 1.3s var(--wt-ease) 2; }
@keyframes wt-pulse { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
.wt-progress { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(13, 13, 15, .06); transition: opacity .4s ease-out; }
.wt-progress i { display: block; height: 100%; background: rgba(13, 13, 15, .42); transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-timing-function: linear; }
.wt-panel.done .wt-progress { opacity: 0; }

/* the fake cursor */
.wt-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 14px; pointer-events: none; opacity: 0; transition: transform .52s var(--wt-ease), opacity .25s ease-out; will-change: transform; }
.wt-cursor.on { opacity: 1; }
.wt-cursor svg { position: absolute; left: -2px; top: -1px; width: 15px; height: 15px; fill: #0d0d0f; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); transform-origin: 3px 2px; }
.wt-cursor.click svg { animation: wt-press .24s ease-out; }
@keyframes wt-press { 40% { transform: scale(.84); } }
.wt-ripple { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgba(13, 13, 15, .16); opacity: 0; transform: scale(.3); }
.wt-cursor.click .wt-ripple { animation: wt-ripple .45s ease-out; }
@keyframes wt-ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }

@media (max-width: 560px) {
  .wt-row { grid-template-columns: 74px minmax(0, 1fr); }
  .wt-actrow, .wt-more-row { padding-left: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-panel, .wt-panel.docked, .wt-panel.out { transform: none; transition: opacity .15s linear; }
  .wt-cursor { transition: opacity .15s linear; }
  .wt-dot, .wt-cursor.click svg, .wt-cursor.click .wt-ripple, .wt-langs { animation: none; }
  .wt-shaft, .wt-in mark::after, .wt-caption, .wt-pill, .wt-hint, .wt-ok { transition: none; }
  .wt-pill, .wt-hint, .wt-ok { transform: none; }
  .wt-fix.pulse::after { animation: none; opacity: 1; transform: none; }
}