/* Stuck in chop: the hero tour (diagram pn-desk, blog-chop-desk.js). Five stops, each in its own window, one caption
   line above the screen. Nothing pinned or scroll-driven. Dark only, violet UI. Green #089981 and red #F23645 mean
   direction only (positive / negative GEX) and the call wall / put wall lines; the flip is violet, the band between the
   walls a violet tint. Class prefix pn-h-. Layout follows the host width (container pnx), so the post column, the
   wide hero slot and full screen all work. Every stop's finished state is the base style; [data-st] steps are the
   in-between states the script sets while a stop plays. Without JS the screen is a sideways strip of all five. */
.pn-h-host{container-type:inline-size;container-name:pnx;width:100%}
.pn-h{--bg:var(--lp-bg,#0c0520);--win:var(--lp-bg-2,#10062a);--bar:#140a33;--card:#140b33;--card2:#1a0f40;
  --v:var(--lp-g-flow,#9467fe);--va:var(--lp-accent,#c4a3ff);--b1:rgba(148,103,254,.14);--b2:rgba(148,103,254,.3);
  --lab:var(--lp-faint,#8475b3);--tx:#f1ecff;--tx2:#c2b8e6;--g:#089981;--r:#F23645;--px:#ece6ff;
  --ease:cubic-bezier(.2,.8,.2,1);--ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ti:'Poppins','Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --scr:500px;--chrome:44px;
  color:var(--tx);font-family:var(--ui);-webkit-font-smoothing:antialiased;text-align:left;font-variant-numeric:tabular-nums}
.pn-h,.pn-h *{box-sizing:border-box}
.pn-h p,.pn-h h2,.pn-h ul,.pn-h ol,.pn-h li{margin:0;padding:0}
.pn-h ul,.pn-h ol{list-style:none}
.pn-h button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.pn-h a{color:inherit}
.pn-h svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pn-h img{display:block;margin:0}
.pn-h :focus-visible{outline:2px solid var(--va);outline-offset:2px;border-radius:8px}

/* ---------- stage ---------- */
.pn-h .pn-h-stage{position:relative;isolation:isolate;padding:24px 24px 18px;border:1px solid var(--b2);border-radius:24px;overflow:hidden;
  background:radial-gradient(55% 60% at 88% -10%,rgba(148,103,254,.2),transparent 70%),radial-gradient(40% 50% at 0% 110%,rgba(148,103,254,.12),transparent 70%),linear-gradient(180deg,#120830,var(--bg) 60%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.pn-h-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.pn-h-titles{max-width:900px;min-width:0}
.pn-h-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 11px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--va)}
.pn-h-live{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--b2);border-radius:99px;color:var(--tx2);letter-spacing:.06em}
.pn-h-live i,.pn-h-stat i{width:6px;height:6px;border-radius:50%;background:var(--va);box-shadow:0 0 0 3px rgba(196,163,255,.18)}
.pn-h .pn-h-h{margin-top:10px;font:600 clamp(19px,2vw,24px)/1.25 var(--ti);letter-spacing:-.01em;color:var(--tx)}
.pn-h-h em{font-style:normal;color:var(--va)}
.pn-h-ctrls{display:flex;align-items:center;gap:8px;flex:none;padding-top:2px}
.pn-h:not(.is-js) .pn-h-ctrls{visibility:hidden}
.pn-h .pn-h-cb{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--b2);background:rgba(255,255,255,.03);color:var(--tx2);transition:background .2s,color .2s}
.pn-h .pn-h-cb:hover{background:rgba(148,103,254,.16);color:var(--tx)}
.pn-h-cb svg{width:17px;height:17px}
.pn-h .pn-h-cb--play{width:44px;height:44px;background:var(--v);border-color:transparent;color:#fff;box-shadow:0 8px 24px -8px rgba(148,103,254,.8)}
.pn-h .pn-h-cb--play:hover{background:#a47dff}

/* ---------- route ---------- */
.pn-h .pn-h-route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:16px 0 0;scrollbar-width:none}
.pn-h-route::-webkit-scrollbar{display:none}
.pn-h .pn-h-stop{position:relative;display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px 14px;border-radius:12px;border:1px solid transparent;text-align:left;transition:background .25s,border-color .25s}
.pn-h .pn-h-stop:hover{background:rgba(255,255,255,.035)}
.pn-h .pn-h-stop.is-on{background:var(--card2);border-color:var(--b2)}
.pn-h-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;overflow:hidden;background:#1d1146;border:1px solid var(--b1);color:var(--va)}
.pn-h-ic svg{width:15px;height:15px}
.pn-h-ic img{width:100%;height:100%;object-fit:cover}
.pn-h-ic--img{background:#0d0820}
.pn-h-ic--img img{object-fit:contain}
.pn-h-st{display:flex;flex-direction:column;min-width:0}
.pn-h-st b{font-size:12.5px;font-weight:600;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-h-st small{font-size:10.5px;color:var(--lab);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-h-stop.is-on b,.pn-h-stop.is-done b{color:var(--tx)}
.pn-h-bar{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--b1);overflow:hidden}
.pn-h-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--v),var(--va));transform-origin:left;transform:scaleX(var(--p,0))}
.pn-h-stop.is-done .pn-h-bar i{transform:scaleX(1);opacity:.55}

/* ---------- caption (one line above the screen) ---------- */
.pn-h .pn-h-cap{margin:12px 0;min-height:46px;display:flex;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(148,103,254,.07);border:1px solid var(--b1);
  font-size:15px;line-height:1.45;color:var(--tx);transition:opacity .3s,transform .35s var(--ease)}
.pn-h .pn-h-cap.is-out{opacity:0;transform:translateY(4px)}

/* ---------- screen: a sideways strip without JS, a stack of windows with it ---------- */
.pn-h-screen{position:relative;height:var(--scr);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(148,103,254,.3) transparent}
.pn-h-win{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;
  background:var(--win);border:1px solid var(--b2);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.pn-h.is-js .pn-h-screen{display:block;overflow:visible}
.pn-h.is-js .pn-h-win{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(26px) scale(.985);
  transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.pn-h.is-js .pn-h-win.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pn-h.is-js .pn-h-win.is-past{transform:translateX(-26px) scale(.985)}
.pn-h-instant,.pn-h-instant *{transition:none!important}

/* window chrome */
.pn-h-chrome{flex:none;display:flex;align-items:center;gap:10px;height:var(--chrome);padding:0 10px 0 14px;background:var(--bar);border-bottom:1px solid var(--b1);min-width:0}
.pn-h-chrome>img{width:20px;height:20px;border-radius:6px}
.pn-h-chrome>b{font-size:13px;font-weight:600;white-space:nowrap}
.pn-h-dots{display:flex;gap:6px;margin-right:4px}
.pn-h-dots i{width:9px;height:9px;border-radius:50%;background:rgba(196,163,255,.28)}
.pn-h-tvg{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#1e1b2e;color:#e8e6f0}
.pn-h-tvg svg{width:13px;height:13px}
.pn-h-url{flex:1 1 auto;min-width:0;max-width:420px;margin-left:auto;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--b1);font:11.5px var(--mono);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-h-plan{flex:none;font-size:11px;font-weight:600;color:var(--va);padding:4px 9px;border:1px solid var(--b2);border-radius:99px;white-space:nowrap}
.pn-h-stat{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);white-space:nowrap}
.pn-h-with{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);padding:3px 9px 3px 4px;border-radius:99px;background:rgba(148,103,254,.14);white-space:nowrap}
.pn-h-with img{width:16px;height:16px;border-radius:50%}
.pn-h-fs-slot{flex:none;display:flex}
.pn-h-fs-slot:empty{display:none}
.pn-h-chrome .pn-h-fs-btn{min-height:28px;padding:0 8px}
.pn-h-chrome .pn-h-fs-btn span{display:none}
.pn-h-tools{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--b1);overflow:hidden}
.pn-h-tb{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;border:1px solid var(--b1);font-size:12px;color:var(--tx2);white-space:nowrap}
.pn-h-tb b{color:var(--tx);font-weight:600;font-family:var(--mono)}
.pn-h-tb--note{margin-left:auto;border:0;padding-right:0;color:var(--lab)}
.pn-h-tb--at{border-color:var(--b2);background:rgba(148,103,254,.1)}
.pn-h-tb--cw{box-shadow:inset 3px 0 0 var(--g)}.pn-h-tb--pw{box-shadow:inset 3px 0 0 var(--r)}.pn-h-tb--fl{box-shadow:inset 3px 0 0 var(--va)}

/* plots shared by the chop chart and MM Exposure: SVG in a 1000 x 100 box, labels in HTML */
.pn-h-plot{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 62px 8px 16px}
.pn-h-area{position:relative;flex:1;min-height:0}
.pn-h-grid{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.05)}
.pn-h-ay{position:absolute;right:-54px;transform:translateY(-50%);font:10.5px var(--mono);color:var(--lab)}
.pn-h-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pn-h-svg path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pn-h-x{flex:none;display:flex;justify-content:space-between;padding-top:8px;font:10.5px var(--mono);color:var(--lab)}

/* 1. the chop: the line draws in, then the morning walls and flip fade in, then the band tints */
.pn-h-ln path{stroke:var(--px);stroke-width:1.8}
.pn-h-ln{clip-path:inset(0 0 0 0);transition:clip-path 3.2s linear}
.pn-h-band{position:absolute;left:0;right:0;background:linear-gradient(180deg,rgba(148,103,254,.16),rgba(148,103,254,.08));border-radius:2px;transition:opacity .9s var(--ease)}
.pn-h-wl{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--g);transition:opacity .7s var(--ease) calc(var(--n,0)*.3s)}
.pn-h-wl.pn-h-wl--pw{border-top-color:var(--r)}
.pn-h-wl.pn-h-wl--fl{border-top:1.5px dotted var(--va)}
.pn-h-wlab{position:absolute;left:8px;transform:translateY(-120%);font:600 10.5px var(--ui);padding:2px 6px;border-radius:5px;background:#0d0827;border:1px solid var(--b2);white-space:nowrap;transition:opacity .7s var(--ease) calc(var(--n,0)*.3s)}
.pn-h-wlab.pn-h-wl--cw{color:#2fc4a5}.pn-h-wlab.pn-h-wl--pw{color:#ff6b77}.pn-h-wlab.pn-h-wl--fl{color:var(--va)}
.pn-h-chop[data-st="0"] .pn-h-ln{clip-path:inset(0 100% 0 0)}
.pn-h-chop:is([data-st="0"],[data-st="1"]) :is(.pn-h-wl,.pn-h-wlab){opacity:0}
.pn-h-chop:is([data-st="0"],[data-st="1"],[data-st="2"]) .pn-h-band{opacity:0}

/* 2. Gamma Exposure: net GEX bars by strike, growing out from zero */
.pn-h-gex{position:relative;flex:1;min-height:0;margin:8px 14px 10px}
.pn-h-gx{display:grid;grid-auto-rows:minmax(0,1fr);height:100%}
.pn-h-gr{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 150px;align-items:center;gap:0 10px;padding:0 8px 0 12px;min-height:0;font:11.5px var(--mono);color:var(--tx2)}
.pn-h-gr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;opacity:1;transition:opacity .6s var(--ease)}
.pn-h-gr.is-cw::after{box-shadow:inset 3px 0 0 var(--g);background:rgba(148,103,254,.07)}
.pn-h-gr.is-pw::after{box-shadow:inset 3px 0 0 var(--r);background:rgba(148,103,254,.07)}
.pn-h-gb{position:relative;height:62%;min-height:3px}
.pn-h-gb::before{content:"";position:absolute;left:50%;top:-20%;bottom:-20%;border-left:1px solid rgba(255,255,255,.14)}
.pn-h-gb i{position:absolute;top:0;bottom:0;width:calc(var(--w,0)*.5%);border-radius:2px;transition:transform .7s var(--ease) calc(var(--d,0)*28ms)}
.pn-h-gb i.is-pos{left:50%;background:var(--g);transform-origin:left}
.pn-h-gb i.is-neg{right:50%;background:var(--r);transform-origin:right}
.pn-h-gv{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-h-gv em{font:600 10.5px var(--ui);font-style:normal;margin-right:4px;transition:opacity .6s var(--ease)}
.pn-h-gr.is-cw em{color:#2fc4a5}.pn-h-gr.is-pw em{color:#ff6b77}
.pn-h-gr.is-cw .pn-h-gk,.pn-h-gr.is-pw .pn-h-gk{color:var(--tx);font-weight:600}
.pn-h-gpx{position:absolute;left:0;right:0;height:0;border-top:1.5px solid var(--va);transition:opacity .6s var(--ease)}
.pn-h-gpx span{position:absolute;left:50%;transform:translate(-50%,-50%);font:600 10.5px var(--ui);color:#fff;background:var(--v);padding:2px 7px;border-radius:5px;white-space:nowrap}
.pn-h-gex[data-st="0"] .pn-h-gb i{transform:scaleX(0)}
.pn-h-gex:is([data-st="0"],[data-st="1"]) :is(.pn-h-gpx,.pn-h-gv em){opacity:0}
.pn-h-gex:is([data-st="0"],[data-st="1"]) .pn-h-gr::after{opacity:0}

/* 3. MM Exposure: the page's own time slider reveals the walls, flip and price snapshot by snapshot */
.pn-h-mm{--x:100}
.pn-h-rev{clip-path:inset(-4% calc(100% - var(--x)*1%) -4% 0)}
.pn-h-s-px{stroke:var(--px)}
.pn-h-s-cw{stroke:var(--g);stroke-dasharray:6 4}
.pn-h-s-pw{stroke:var(--r);stroke-dasharray:6 4}
.pn-h-s-fl{stroke:var(--va);stroke-dasharray:2 3}
.pn-h-cur{position:absolute;top:0;bottom:0;left:calc(var(--x)*1%);border-left:1px solid rgba(196,163,255,.35)}
.pn-h-dot{position:absolute;left:calc(var(--x)*1%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(148,103,254,.4)}
.pn-h-slider{flex:none;display:flex;align-items:center;gap:12px;padding:10px 16px 12px;border-top:1px solid var(--b1);font-size:12px;color:var(--lab)}
.pn-h-slider input{flex:1;min-width:0;margin:0;accent-color:var(--v);height:24px;cursor:pointer}
.pn-h-slider output{flex:none;min-width:118px;text-align:right;font:600 12px var(--mono);color:var(--tx)}

/* 4. AiPe: BUILD-AI's panel inside this window */
.pn-h-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(148,103,254,.3) transparent;
  --pn-ai-h:calc(var(--scr) - var(--chrome) - 2px)}
.pn-h .pn-h-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--tx2)}
.pn-h-empty img{width:40px;height:40px;border-radius:12px}

/* 5. Your way in */
.pn-h-way{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px}
.pn-h-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pn-h-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--b1);background:var(--card);transition:border-color .25s,background .25s}
.pn-h-card:hover{border-color:var(--b2);background:var(--card2)}
.pn-h-card-h{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.pn-h-card-h .pn-h-ic{grid-row:1/3}
.pn-h-card-h b{font-size:14px}
.pn-h-card-h small{grid-column:2;font-size:11.5px;color:var(--lab)}
.pn-h .pn-h-again{grid-row:1/3;grid-column:3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--lab);transition:color .2s,background .2s}
.pn-h .pn-h-again:hover{color:var(--tx);background:rgba(148,103,254,.16)}
.pn-h-again svg{width:15px;height:15px}
.pn-h .pn-h-card p{font-size:12.5px;line-height:1.5;color:var(--tx2)}
.pn-h-card-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--b1)}
.pn-h-card-f span{flex:none;font-size:11px;font-weight:600;color:var(--va);padding:3px 8px;border-radius:99px;border:1px solid var(--b2);white-space:nowrap}
.pn-h .pn-h-card-f a{font-size:12.5px;font-weight:600;color:var(--tx);text-decoration:none;text-align:right}
.pn-h .pn-h-card-f a::after{content:" \2192";color:var(--va)}
.pn-h .pn-h-card-f a:hover{color:var(--va)}
.pn-h .pn-h-more{font-size:12.5px;color:var(--lab);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.pn-h .pn-h-more a{color:var(--tx2);text-decoration:underline;text-decoration-color:var(--b2);text-underline-offset:3px}
.pn-h .pn-h-more a:hover{color:var(--tx)}

.pn-h .pn-h-note{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--lab)}

/* ---------- full screen (blog-chop-fs.js) ---------- */
.pn-h .pn-h-stage:fullscreen,.pn-h .pn-h-stage.pn-fs-on{display:flex;flex-direction:column;border-radius:0;padding:22px clamp(16px,3vw,40px)}
.pn-h .pn-h-stage:fullscreen .pn-h-screen,.pn-h .pn-h-stage.pn-fs-on .pn-h-screen{flex:1;height:auto;min-height:440px}

/* ---------- narrower hosts ---------- */
@container pnx (max-width:1060px){
  .pn-h .pn-h-route{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-24px;padding:0 24px}
  .pn-h-route li{flex:none;scroll-snap-align:start}
  .pn-h .pn-h-stop{width:auto;padding-right:16px}
  .pn-h-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-h-stat{display:none}
}
@container pnx (max-width:760px){
  .pn-h{--scr:540px}
  .pn-h .pn-h-stage{padding:16px 14px 14px;border-radius:18px}
  .pn-h-head{display:block}
  .pn-h-ctrls{position:absolute;top:12px;right:10px;gap:6px;padding:0}
  .pn-h .pn-h-cb{width:32px;height:32px}.pn-h .pn-h-cb--play{width:36px;height:36px}.pn-h-cb svg{width:15px;height:15px}
  .pn-h-eyebrow>span:last-child{display:none}
  .pn-h .pn-h-h{font-size:17px;margin-top:12px}
  .pn-h .pn-h-route{margin-inline:-14px;padding:0 14px;margin-top:12px}
  .pn-h .pn-h-cap{font-size:13.5px;padding:8px 12px;min-height:84px;align-items:flex-start}
  .pn-h-chrome{gap:8px;padding:0 8px 0 10px}
  .pn-h-dots,.pn-h-url,.pn-h-with{display:none}
  .pn-h-chrome>b{margin-right:auto;overflow:hidden;text-overflow:ellipsis}
  .pn-h-plan{max-width:42%;overflow:hidden;text-overflow:ellipsis}
  .pn-h-tools{padding:7px 10px;gap:6px;flex-wrap:wrap}
  .pn-h-tb{padding:4px 7px;font-size:11px}
  .pn-h-tb--note{display:none}
  .pn-h-plot{padding:14px 50px 6px 10px}
  .pn-h-ay{right:-44px;font-size:10px}
  .pn-h-gex{margin:6px 8px 8px}
  .pn-h-gr{grid-template-columns:40px minmax(0,1fr) 92px;gap:0 6px;padding:0 4px 0 8px;font-size:10.5px}
  .pn-h-gv em{display:none}
  .pn-h-slider{padding:8px 10px 10px;gap:8px}
  .pn-h-slider output{min-width:96px;font-size:11px}
  .pn-h-way{padding:12px 0}
  .pn-h-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 12px 6px;scrollbar-width:none}
  .pn-h-cards::-webkit-scrollbar{display:none}
  .pn-h-card{flex:none;width:80%;scroll-snap-align:start}
  .pn-h .pn-h-more{padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  .pn-h *,.pn-h *::before,.pn-h *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}