/* Stuck in chop? The two explainer visuals: pn-why ("The hedge loop") and pn-patch ("Three ways to guess the strikes").
   Loaded only on that post. Dark only. Violet UI; green #089981 and red #F23645 mark the call and put wall lines
   (direction) only; hedge arrows, crossings, the band and the read are violet tints. Steps 1 to 3 of the patch are
   greyscale (--lp-faint), never red. No gold, no yellow. Prefix pn-v-, every component rule scoped under .pn-v.
   Without JS, and under reduced motion, everything is in its final state; motion (blog-chop-viz.js) arms with
   [data-pn-v-armed] and animates transform, opacity and stroke-dashoffset only. Layout follows the host's width
   (container queries). Selectors are doubled (.pn-v.pn-v) where .lp-prose element rules would otherwise win. */
.pn-v-host { display: block; container-type: inline-size; }
.pn-v { --pn-v-up: #089981; --pn-v-dn: #F23645; --pn-v-v: var(--lp-g-flow, #9467fe); --pn-v-va: var(--lp-accent, #c4a3ff);
  --pn-v-faint: var(--lp-faint, #8475b3); --pn-v-tx: var(--lp-text, #f1ecff); --pn-v-tx2: var(--lp-muted, #c2b8e6);
  --pn-v-b1: rgba(148,103,254,.14); --pn-v-b2: rgba(148,103,254,.3); --pn-v-win: #0f0727; --pn-v-bar: #140a33;
  --pn-v-ease: cubic-bezier(.22, 1, .36, 1); --pn-v-ti: var(--lp-font-title, 'Poppins', 'Inter', sans-serif);
  position: relative; display: block; text-align: left; color: var(--pn-v-tx); font-family: var(--lp-font, 'Inter', system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.pn-v, .pn-v * { box-sizing: border-box; }
.pn-v.pn-v { margin: clamp(28px, 5vw, 48px) 0; padding: 0; border: 0; background: none; max-width: 100%; }
.pn-v.pn-v :is(p, figure, figcaption) { margin: 0; }
.pn-v.pn-v img { display: block; margin: 0; max-width: none; }
.pn-v :where(button:not(.pn-h-fs-btn)) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; text-align: left; }
.pn-v :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--pn-v-va); outline-offset: 2px; border-radius: 8px; }
.pn-v [hidden] { display: none !important; }

/* head, caption, controls */
.pn-v .pn-v-head { display: grid; gap: 4px; margin-bottom: 16px; }
.pn-v.pn-v .pn-v-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pn-v-faint); }
.pn-v.pn-v .pn-v-title { font-family: var(--pn-v-ti); font-weight: 600; font-size: clamp(20px, 3.4cqi, 28px); line-height: 1.2; letter-spacing: -.014em; color: var(--pn-v-tx); }
.pn-v.pn-v .pn-v-sub { font-size: 14px; line-height: 1.5; color: var(--pn-v-tx2); }
.pn-v .pn-v-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-top: 14px; }
.pn-v.pn-v .pn-v-cap { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.55; color: var(--pn-v-tx2); }
.pn-v .pn-v-play { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pn-v-b2); background: rgba(148,103,254,.08); font-size: 13px; font-weight: 600; color: var(--pn-v-tx); transition: background-color .2s var(--pn-v-ease), border-color .2s var(--pn-v-ease); }
.pn-v .pn-v-play:hover { border-color: var(--pn-v-v); background: rgba(148,103,254,.16); }

/* window */
.pn-v .pn-v-win { container-type: inline-size; min-width: 0; border: 1px solid var(--pn-v-b2); border-radius: 16px; overflow: hidden; background: var(--pn-v-win); padding-bottom: 14px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.8); }
.pn-v .pn-v-chrome { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; background: var(--pn-v-bar); border-bottom: 1px solid var(--pn-v-b1); min-width: 0; }
.pn-v .pn-v-chrome > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.pn-v .pn-v-dots { flex: none; display: flex; gap: 6px; }
.pn-v .pn-v-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(196,163,255,.28); }
.pn-v .pn-v-status { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--pn-v-tx2); white-space: nowrap; }
.pn-v .pn-v-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-v-va); box-shadow: 0 0 0 3px rgba(196,163,255,.16); }
.pn-v .pn-v-fs { flex: none; }
.pn-v .pn-v-fs:empty { display: none; }
.pn-v .pn-v-fs .pn-h-fs-btn { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
.pn-v.pn-v .pn-v-reg { display: grid; gap: 2px; padding: 12px 14px 0; }
.pn-v-reg b { font: 600 15px/1.3 var(--pn-v-ti); color: var(--pn-v-tx); }
.pn-v-reg span { font-size: 12.5px; line-height: 1.4; color: var(--pn-v-faint); }

/* chart */
.pn-v .pn-v-plot { position: relative; margin: 10px 10px 0; }
.pn-v .pn-v-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pn-v .pn-v-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.pn-v .pn-v-price { stroke: var(--pn-v-tx); stroke-width: 1.8; }
.pn-v .pn-v-svg .pn-v-band { fill: rgba(148,103,254,.13); stroke: none; }
.pn-v .pn-v-wall { stroke-width: 1.5; }
.pn-v .pn-v-wall--call { stroke: var(--pn-v-up); stroke-dasharray: 6 5; }
.pn-v .pn-v-wall--put { stroke: var(--pn-v-dn); stroke-dasharray: 6 5; }
.pn-v .pn-v-wall--flip { stroke: var(--pn-v-va); stroke-dasharray: 1.5 4; opacity: .8; }
.pn-v .pn-v-dot { fill: var(--pn-v-va); stroke: var(--pn-v-win); stroke-width: 1.2; transition: opacity .3s var(--pn-v-ease); }
.pn-v .pn-v-ring { fill: none; stroke: var(--pn-v-va); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pn-v .pn-v-headdot { display: none; fill: var(--pn-v-tx); stroke: var(--pn-v-v); stroke-width: 2; }
.pn-v.is-playing .pn-v-headdot { display: inline; }
@keyframes pn-v-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.pn-v .pn-v-hit.is-hit .pn-v-ring { animation: pn-v-ring .9s var(--pn-v-ease) both; }

.pn-v .pn-v-tags { position: absolute; inset: 0; pointer-events: none; }
.pn-v .pn-v-tag { position: absolute; transform: translateY(calc(-100% - 3px)); max-width: calc(100% - 16px); padding: 2px 7px; border-radius: 6px; background: rgba(15,7,39,.86); font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pn-v-tx2); }
.pn-v .pn-v-tag--below { transform: translateY(3px); }
.pn-v .pn-v-tag--r { right: 6px; }
.pn-v .pn-v-tag--l { left: 6px; }
.pn-v .pn-v-tag--call { color: var(--pn-v-up); }
.pn-v .pn-v-tag--put { color: var(--pn-v-dn); }
.pn-v .pn-v-tag--band { color: var(--pn-v-va); }
.pn-v .pn-v-tag--guess { color: var(--pn-v-faint); }
.pn-v .pn-v-axis { display: flex; justify-content: space-between; margin: 4px 16px 0; font-size: 11px; color: var(--pn-v-faint); }

/* why: two windows and the hedge strip */
.pn-v .pn-v-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container (max-width: 640px) { .pn-v .pn-v-panes { grid-template-columns: minmax(0, 1fr); } }
.pn-v .pn-v-strip { display: block; width: calc(100% - 20px); height: auto; margin: 6px 10px 0; border-top: 1px solid var(--pn-v-b1); border-bottom: 1px solid var(--pn-v-b1); background: rgba(148,103,254,.04); }
.pn-v .pn-v-ar { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: var(--m, 1); transition: opacity .35s var(--pn-v-ease); }
.pn-v .pn-v-ar--up { stroke: var(--pn-v-va); }
.pn-v .pn-v-ar--dn { stroke: var(--pn-v-v); }
.pn-v.pn-v .pn-v-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 14px 0; font-size: 11.5px; color: var(--pn-v-faint); }
.pn-v .pn-v-key > span { display: inline-flex; align-items: center; gap: 6px; }
.pn-v .pn-v-key-i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.pn-v .pn-v-key-i--up { border-bottom: 7px solid var(--pn-v-va); }
.pn-v .pn-v-key-i--dn { border-top: 7px solid var(--pn-v-v); }
.pn-v.pn-v .pn-v-stat { margin: 10px 14px 0; padding: 8px 10px; border-radius: 10px; background: rgba(148,103,254,.1); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--pn-v-tx); transition: opacity .5s var(--pn-v-ease), transform .5s var(--pn-v-ease); }
.pn-v-why[data-pn-v-armed] .pn-v-ar:not(.is-on) { opacity: 0; }
.pn-v-why[data-pn-v-armed] .pn-v-hit:not(.is-hit) .pn-v-dot { opacity: 0; }
.pn-v-why[data-pn-v-armed] .pn-v-stat:not(.is-on) { opacity: 0; transform: translateY(6px); }

/* patch: tabs, layers, panels */
.pn-v .pn-v-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pn-v-patch:not([data-pn-v-js]) .pn-v-tabs { display: none; }
.pn-v .pn-v-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pn-v-b1); overflow: hidden; font-size: 14px; font-weight: 600; color: var(--pn-v-tx2); transition: background-color .2s var(--pn-v-ease), border-color .2s var(--pn-v-ease), color .2s var(--pn-v-ease); }
.pn-v .pn-v-tab:hover { border-color: var(--pn-v-faint); }
.pn-v .pn-v-tab[aria-selected="true"] { border-color: var(--pn-v-faint); background: rgba(132,117,179,.16); color: var(--pn-v-tx); }
.pn-v .pn-v-tab--map[aria-selected="true"] { border-color: var(--pn-v-v); background: rgba(148,103,254,.18); }
.pn-v .pn-v-tab-n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 700; line-height: 1; }
.pn-v .pn-v-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; overflow: hidden; }
.pn-v .pn-v-tab-bar i { display: block; height: 100%; background: var(--pn-v-faint); transform: scaleX(0); transform-origin: left; }
.pn-v .pn-v-tab--map .pn-v-tab-bar i { background: var(--pn-v-va); }

.pn-v-patch .pn-v-l { opacity: 0; visibility: hidden; transition: opacity .45s var(--pn-v-ease), visibility 0s linear .45s; }
.pn-v-patch[data-pn-v-step="0"] .pn-v-l[data-l="0"], .pn-v-patch[data-pn-v-step="1"] .pn-v-l[data-l="1"],
.pn-v-patch[data-pn-v-step="2"] .pn-v-l[data-l="2"], .pn-v-patch[data-pn-v-step="3"] .pn-v-l[data-l="3"] { opacity: 1; visibility: visible; transition: opacity .45s var(--pn-v-ease), visibility 0s; }
.pn-v .pn-v-guess { stroke: var(--pn-v-faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pn-v .pn-v-ref { stroke: var(--pn-v-faint); stroke-width: 1; opacity: .5; }
.pn-v .pn-v-tag--ref { color: var(--pn-v-faint); font-weight: 500; }
.pn-v .pn-v-price--main { transition: opacity .45s var(--pn-v-ease); }
.pn-v-patch[data-pn-v-step="0"] .pn-v-price--main { opacity: 0; }
.pn-v.pn-v .pn-v-basis { font-size: 12px; line-height: 1.45; color: var(--pn-v-faint); }
.pn-v .pn-v-svg .pn-v-shot { fill: rgba(132,117,179,.1); stroke: var(--pn-v-faint); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pn-v .pn-v-stamp { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border: 1px solid var(--pn-v-faint); border-radius: 6px; background: rgba(15,7,39,.86); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-v-faint); }
.pn-v-patch .pn-v-l--map .pn-v-wall { transform: translateY(-10px); transition: transform .6s var(--pn-v-ease); }
.pn-v-patch[data-pn-v-step="3"] .pn-v-l--map .pn-v-wall { transform: none; }
.pn-v .pn-v-svg--fill { height: auto; }
.pn-v .pn-v-hdot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--pn-v-va); box-shadow: 0 0 0 1.5px var(--pn-v-win); }
.pn-v .pn-v-hdot i { position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--pn-v-va); opacity: 0; }
.pn-v-patch.is-pulse .pn-v-hdot i { animation: pn-v-ring .9s var(--pn-v-ease) calc(var(--i, 0) * 70ms) both; }

.pn-v .pn-v-chat { position: absolute; left: 50%; top: 50%; width: min(300px, 86%); transform: translate(-50%, -50%); display: grid; gap: 8px; padding: 10px 12px; border: 1px solid rgba(132,117,179,.4); border-radius: 12px; background: #17112b; box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.pn-v.pn-v .pn-v-chat-h { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pn-v-faint); }
.pn-v.pn-v .pn-v-ask { justify-self: end; max-width: 92%; padding: 7px 10px; border-radius: 10px 10px 2px 10px; background: rgba(132,117,179,.22); font-size: 13px; line-height: 1.4; color: var(--pn-v-tx); }
.pn-v.pn-v .pn-v-chat-f { display: flex; align-items: center; gap: 10px; }
.pn-v .pn-v-src { padding: 3px 9px; border: 1px solid rgba(132,117,179,.5); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--pn-v-tx2); }
.pn-v .pn-v-typing { display: inline-flex; gap: 4px; }
.pn-v .pn-v-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--pn-v-faint); animation: pn-v-type 1.2s ease-in-out infinite; }
.pn-v .pn-v-typing i:nth-child(2) { animation-delay: .15s; }
.pn-v .pn-v-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pn-v-type { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.pn-v-patch:not([data-pn-v-step="2"]) .pn-v-typing i { animation-play-state: paused; }

.pn-v .pn-v-panels { display: grid; gap: 10px; margin-top: 12px; }
.pn-v-patch[data-pn-v-js] .pn-v-panel:not(.is-on) { display: none; }
.pn-v .pn-v-panel { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--pn-v-b1); border-radius: 12px; background: rgba(132,117,179,.07); }
.pn-v .pn-v-panel--map { border-color: var(--pn-v-b2); background: rgba(148,103,254,.1); }
.pn-v.pn-v .pn-v-pname { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--pn-v-ti); color: var(--pn-v-tx); }
.pn-v .pn-v-pname .pn-v-tab-n { color: var(--pn-v-faint); }
.pn-v .pn-v-panel--map .pn-v-pname .pn-v-tab-n { color: var(--pn-v-va); }
.pn-v.pn-v .pn-v-pl { font-size: 14px; line-height: 1.5; color: var(--pn-v-tx2); }
.pn-v.pn-v .pn-v-fact { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--pn-v-tx); }
.pn-v.pn-v .pn-v-cost { padding: 8px 10px; border-left: 2px solid var(--pn-v-faint); border-radius: 0 8px 8px 0; background: rgba(132,117,179,.1); font-size: 13px; line-height: 1.5; color: var(--pn-v-tx2); }
.pn-v .pn-v-cost b { color: var(--pn-v-tx); }
.pn-v .pn-v-panel--map .pn-v-cost { border-left-color: var(--pn-v-va); background: rgba(148,103,254,.12); }

/* narrow hosts */
@container (max-width: 480px) {
  .pn-v .pn-v-tag { font-size: 10.5px; padding: 1px 5px; }
  .pn-v .pn-v-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pn-v .pn-v-tab { min-height: 44px; padding: 6px 10px 8px; font-size: 13px; line-height: 1.2; }
  .pn-v .pn-v-tab-bar { left: 10px; right: 10px; bottom: 3px; }
  .pn-v .pn-v-svg--fill { height: 240px; }
  .pn-v .pn-v-status { display: none; }
  .pn-v .pn-v-fs .pn-h-fs-btn { padding: 0 7px; }
  .pn-v .pn-v-fs .pn-h-fs-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pn-v .pn-v-chat { padding: 8px 10px; gap: 6px; }
  .pn-v.pn-v .pn-v-ask { font-size: 12px; }
}

/* full screen: keep the chart inside the viewport height */
.pn-v .pn-v-win:is(:fullscreen, .pn-fs-on) > :not(.pn-v-chrome) { max-width: min(100%, calc((100vh - 220px) * 1.9)); margin-left: auto; margin-right: auto; }
.pn-v .pn-v-win:is(:fullscreen, .pn-fs-on) { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .pn-v *, .pn-v *::before, .pn-v *::after { animation: none !important; transition: none !important; }
}