/* The Ticker Explorer panel (showcase/chapters/explorer/_explorer.html, tx-explorer.js), the `explorer`
   tab of the Ticker Explorer & Options Flow chapter on /how-it-works/.
   One app window with the real page (intrinio_options/templates/intrinio/ticker-explorer.html), condensed
   into a fixed-height view that scrolls inside itself. Colours inside the window are the page's own
   (:21-120: header card #252540 to #2e2e50 with a #6759d1 border, cards #1e1e38 to #252545 with the
   3px #6759d1 / #c4b5fd top rule, card titles #c4b5fd uppercase; tiles #292d4a, put_call_ratio.js:196-330;
   PCR gauge colours put_call_ratio.js:183-187; news bars :430-435); the panel around it uses landing.css
   tokens, like the Greeks panels. Everything is txe-* and scoped under .txe so it beats landing.css's
   element reset. JS state classes are is-* only. Only transform and opacity animate. Reduced motion
   (landing.css section 13, plus .is-still) and the paused state (.is-paused) stop it all. */

.txe {
  --txe-accent: #6759d1; --txe-accent-l: #c4b5fd; --txe-green: #4cd68f; --txe-red: #e24e4c; --txe-sky: #5fc0e8;
  --txe-violet: #8f7ef0; --txe-blue: #4f7dff; --txe-yellow: #ffdc50; --txe-flip: #ff8c00;
  --txe-bg: #17162b; --txe-card: linear-gradient(145deg, #1e1e38 0%, #252545 100%); --txe-tile: #292d4a;
  --txe-line: rgba(255, 255, 255, .08); --txe-text: #e2e3ee; --txe-muted: #a0a3b1;
  --txe-view-h: 470px;
  position: relative; min-width: 0;
}
html:not(.js) .txe-js, .txe.is-nodata .txe-js { display: none !important; }

/* ---- panel head ---- */
.txe-head { max-width: 72ch; margin: 0 auto var(--lp-sp-5); text-align: center; }
.txe .txe-title { margin: 0; color: var(--lp-text); font: 700 var(--lp-fs-lg)/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.txe .txe-lead { margin: var(--lp-sp-2) 0 0; color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }

/* ---- the window ---- */
.txe-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: 16px; background: var(--txe-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.txe-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden;
}
.txe-lights { display: inline-flex; gap: 6px; flex: none; }
.txe-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.txe-lights i + i { background: #febc2e; }
.txe-lights i + i + i { background: #28c840; }
.txe-bar-tab { overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; border-radius: 8px 8px 0 0; background: var(--txe-bg); color: #a7a3c9; font-size: 12px; }
.txe-bar-tab b { color: #f4f2ff; font-weight: 800; letter-spacing: -.01em; }
.txe-bar-url { overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.txe-app {
  min-width: 0; color: var(--txe-text); font-size: 13px; line-height: 1.45;
  background: radial-gradient(900px 420px at 92% -10%, rgba(103, 89, 209, .14), transparent 60%), var(--txe-bg);
}
.txe .txe-app p { margin: 0; }

/* green page header, as on the member pages */
.txe-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.txe .txe-pgname { color: #fff; font: 700 18px/1.2 var(--lp-font-title); letter-spacing: .01em; }
.txe-pghead .lp-tier { --lp-tier-c: #fff; }
.txe-pghead .lp-sample { margin-left: auto; border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(12, 10, 23, .25); }

/* ---- the section rail and caption ---- */
.txe-railwrap { padding: 10px 14px 8px; border-bottom: 1px solid var(--txe-line); background: rgba(12, 10, 23, .35); }
.txe-rail {
  position: relative; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .6) transparent;
}
.txe .txe-chip-btn {
  flex: none; margin: 0; padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--txe-line); background: rgba(255, 255, 255, .04); color: var(--txe-muted);
  font: 600 12px/1.3 var(--lp-font); transition: background-color .2s, border-color .2s, color .2s;
}
.txe .txe-chip-btn:hover { border-color: var(--txe-accent); color: #fff; }
.txe .txe-chip-btn.is-on { background: var(--txe-accent); border-color: var(--txe-accent); color: #fff; }
.txe .txe-cap { min-height: 1.45em; margin-top: 2px; color: var(--txe-accent-l); font-size: 12.5px; }

/* ---- the view: the condensed page, scrolling inside itself ---- */
.txe-view {
  position: relative; height: var(--txe-view-h); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .15);
}
.txe .txe-view:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.txe-page { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.txe-sec { min-width: 0; }

/* header card (.te-header-card :41-55) */
.txe-hcard {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding: 14px 18px; border: 2px solid var(--txe-accent); border-radius: 14px;
  background: linear-gradient(135deg, #252540 0%, #2e2e50 100%); box-shadow: 0 0 24px rgba(103, 89, 209, .2);
}
.txe .txe-htitle { color: #fff; font: 700 18px/1.2 var(--lp-font-title); }
.txe .txe-htitle span { color: #a78bfa; }
.txe .txe-hsub { margin-top: 2px; color: var(--txe-accent-l); font-size: 12px; }
.txe .txe-search { display: flex; gap: 8px; margin: 0; }
.txe .txe-input {
  width: 150px; min-width: 0; height: 34px; margin: 0; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(102, 126, 234, .3); background: rgba(102, 126, 234, .12); color: #fff;
  font: 500 12.5px/1 var(--lp-font); text-transform: uppercase; outline: none;
}
.txe .txe-input::placeholder { color: rgba(255, 255, 255, .4); opacity: 1; }
.txe .txe-input:focus { border-color: rgba(102, 126, 234, .7); }
.txe .txe-go {
  height: 34px; margin: 0; padding: 0 16px; border-radius: 8px; border: 1px solid var(--txe-accent);
  background: rgba(103, 89, 209, .45); color: #fff; font: 600 12.5px/1 var(--lp-font); cursor: pointer;
}
.txe .txe-go:hover:not(:disabled) { background: var(--txe-accent); }
.txe :is(.txe-go, .txe-input, .txe-tf, .txe-select, .txe-open-btn):disabled { cursor: default; opacity: 1; }
.txe .txe-msg { margin: -4px 0 10px; color: var(--txe-accent-l); font-size: 12px; }

/* cards (.card, .card-header :78-120) */
.txe-card {
  position: relative; overflow: hidden; border: 1px solid var(--txe-accent); border-radius: 14px;
  background: var(--txe-card); box-shadow: 0 0 20px rgba(103, 89, 209, .15);
}
.txe-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1); }
.txe-chead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px 10px; border-bottom: 1px solid rgba(103, 89, 209, .3); background: rgba(103, 89, 209, .08);
}
.txe .txe-ctitle { display: inline-flex; align-items: center; gap: 8px; color: var(--txe-accent-l); font: 700 11.5px/1.3 var(--lp-font); letter-spacing: 1px; text-transform: uppercase; }
.txe-cbody { min-width: 0; padding: 12px; }
.txe-clock { padding: 3px 10px; border-radius: 8px; background: var(--txe-accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* tiles */
.txe-grid { display: grid; gap: 10px; }
.txe-grid--stock { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.txe-grid--opt { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.txe-tile { min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--txe-tile); text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.txe .txe-tlabel { color: #fff; font-size: 12.5px; font-weight: 600; }
.txe .txe-tval { margin-top: 4px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.txe .txe-tsub { margin-top: 4px; color: var(--txe-muted); font-size: 11px; text-align: left; }
.txe-tile--sky .txe-tval { color: var(--txe-sky); }
.txe-tile--up .txe-tval { color: var(--txe-green); }
.txe-tile--dn .txe-tval { color: var(--txe-red); }
.txe-tile--violet .txe-tval { color: var(--txe-violet); }
.txe-arrow { font-style: normal; font-size: 10px; vertical-align: 2px; }
.txe-stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.txe-stats p { display: flex; flex-direction: column; text-align: left; font-size: 11px; color: var(--txe-muted); }
.txe-stats b { font-size: 13px; font-variant-numeric: tabular-nums; }
.txe-c-up { color: var(--txe-green); }
.txe-c-dn, .txe-c-red { color: var(--txe-red); }
.txe-c-sky { color: var(--txe-sky); }
.txe-c-violet { color: var(--txe-violet); }
.txe-c-blue { color: var(--txe-blue); }
.txe-dim { color: var(--txe-muted); font-weight: 500; }

/* PCR gauges */
.txe-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.txe-gauge { min-width: 0; text-align: center; }
.txe .txe-glabel { color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.txe-gsvg { display: block; width: 100%; max-width: 200px; height: auto; margin: 2px auto 0; }
.txe-gnum { fill: #fff; font: 700 15px var(--lp-font); }
.txe .txe-gnote { color: var(--txe-muted); font-size: 11px; }
.txe-wm { fill: rgba(211, 211, 211, .14); font: 600 11px var(--lp-font); }

/* two-up blocks (technicals + chart, GEX + DEX) */
.txe-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.txe-sub { min-width: 0; padding: 10px; border: 1px solid var(--txe-line); border-radius: 10px; background: rgba(12, 10, 23, .35); }
.txe .txe-subt { margin-bottom: 6px; color: #fff; font-size: 13px; font-weight: 600; }
.txe .txe-subt--c { text-align: center; text-transform: uppercase; letter-spacing: .8px; font-size: 11.5px; }
.txe .txe-subt--sp { margin: 14px 0 8px; color: var(--txe-accent-l); text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; }
.txe-svg { display: block; width: 100%; height: auto; }
.txe-gl { stroke: rgba(255, 255, 255, .06); }
.txe-zero { stroke: rgba(255, 255, 255, .25); }
.txe-ax { fill: rgba(255, 255, 255, .55); font: 9.5px var(--lp-font); }
.txe-up line { stroke: #26a69a; } .txe-up rect { fill: #26a69a; }
.txe-dn line { stroke: #ef5350; } .txe-dn rect { fill: #ef5350; }
.txe-pxline { stroke: var(--txe-yellow); stroke-dasharray: 3 3; }
.txe-pxlab { fill: var(--txe-yellow); font: 600 9.5px var(--lp-font); }
.txe-tagt { fill: #fff; font: 700 8.5px var(--lp-font); }

/* technicals (the TradingView widget's layout, neutral wording) */
.txe-tfs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 4px; }
.txe .txe-tf {
  margin: 0; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #c9cbd6;
  font: 500 12px/1.3 var(--lp-font); cursor: pointer; transition: background-color .2s, color .2s, transform .12s var(--lp-ease);
}
.txe .txe-tf:hover:not(:disabled) { color: #fff; }
.txe .txe-tf[aria-pressed="true"] { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; }
.txe-tech { text-align: center; }
.txe-tsvg { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.txe .txe-tread { margin-top: 2px; color: #fff; font-size: 15px; font-weight: 600; }
.txe-tcounts { display: flex; justify-content: center; gap: 22px; margin-top: 6px; }
.txe-tcounts p { display: flex; flex-direction: column; color: #c9cbd6; font-size: 11.5px; }
.txe-tcounts b { font-size: 15px; font-weight: 500; }

/* flow minis */
.txe-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.txe-mini { min-width: 0; overflow: visible; border: 1px solid rgba(103, 89, 209, .55); border-radius: 12px; background: rgba(12, 10, 23, .35); }
.txe-mini .txe-chead { padding: 8px 10px; border-radius: 12px 12px 0 0; }
.txe-mini .txe-svg { padding: 6px 6px 0; }
.txe-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 10px 8px; color: var(--txe-muted); font-size: 11px; }
.txe-leg span { display: inline-flex; align-items: center; gap: 5px; }
.txe-leg i { width: 12px; height: 3px; border-radius: 2px; }

/* open-in-new buttons with their tooltip */
.txe-open { position: relative; display: inline-flex; }
.txe .txe-open-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 7px;
  border: 1px solid var(--txe-accent); background: rgba(103, 89, 209, .35); color: #fff; cursor: pointer;
}
.txe .txe-open-btn:hover:not(:disabled) { background: var(--txe-accent); }
.txe-tip {
  position: absolute; z-index: 3; top: calc(100% + 6px); right: 0; width: max-content; max-width: 210px;
  padding: 6px 9px; border: 1px solid rgba(103, 89, 209, .5); border-radius: 8px; background: #0c0a17;
  color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, visibility .15s;
}
.txe.is-live .txe-open:hover .txe-tip, .txe .txe-open-btn:focus-visible + .txe-tip, .txe .txe-open.is-tip .txe-tip { opacity: 1; visibility: visible; }

/* option data pill, reads */
.txe-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.txe-pill--pos { background: rgba(76, 214, 143, .18); color: var(--txe-green); border: 1px solid rgba(76, 214, 143, .4); }
.txe-pill--neg { background: rgba(226, 78, 76, .18); color: #ff8a88; border: 1px solid rgba(226, 78, 76, .45); }
.txe-pill--neu { background: rgba(160, 163, 177, .14); color: #d3d5df; border: 1px solid rgba(160, 163, 177, .35); }

/* max pain */
.txe .txe-exp { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 10px; color: var(--txe-accent-l); font-size: 12px; }
.txe .txe-select {
  margin: 0; padding: 5px 10px; border: 1px solid rgba(103, 89, 209, .45); border-radius: 8px;
  background: rgba(103, 89, 209, .12); color: #fff; font: 13px/1.3 var(--lp-font); cursor: pointer; color-scheme: dark;
}
.txe .txe-select option { background: #333754; color: #fff; }
.txe-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; overflow: hidden; border-radius: 10px; background: rgba(103, 89, 209, .35); }
.txe-kv { min-width: 0; padding: 8px 10px; background: #1b1a33; }
.txe .txe-kv p { padding: 0; color: var(--txe-accent-l); font-size: 11px; font-weight: 600; }
.txe-kv b { display: inline-block; margin-top: 2px; color: #fff; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 4px; }
.txe-kv b.is-flash { animation: txe-flash .8s var(--lp-ease); }

/* option chain metrics (.metric-card :751-774) */
.txe-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.txe-metric { min-width: 0; padding: 8px 10px; border-radius: 10px; background: #14132a; text-align: center; border: 1px solid rgba(255, 255, 255, .05); }
.txe .txe-metric p { color: #c9cbd6; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.txe-metric b { display: block; margin-top: 3px; font-size: 15px; font-variant-numeric: tabular-nums; }
.txe-metric small { font-size: 11px; font-weight: 600; }
.txe-metric.txe-c-up b { color: var(--txe-green); }
.txe-metric.txe-c-dn b { color: var(--txe-red); }
.txe-metric.txe-c-sky b { color: var(--txe-sky); }

/* GEX / DEX marks */
.txe-bup { fill: rgba(76, 214, 143, .85); }
.txe-bdn { fill: rgba(226, 78, 76, .85); }
.txe-mk-px { stroke: var(--txe-yellow); stroke-width: 1.5; }
.txe-mk-flip { stroke: var(--txe-flip); stroke-width: 1.5; stroke-dasharray: 4 3; }
.txe-mk-pole { stroke: var(--txe-green); stroke-width: 1.5; stroke-dasharray: 4 3; }
.txe-mkt { font: 700 9.5px var(--lp-font); paint-order: stroke; stroke: rgba(23, 22, 43, .85); stroke-width: 3px; }
.txe-mkt--px { fill: var(--txe-yellow); }
.txe-mkt--flip { fill: var(--txe-flip); }
.txe-mkt--pole { fill: var(--txe-green); }

/* tables (alerts, unusual): they scroll sideways inside their own box */
.txe-tablewrap { overflow-x: auto; border-radius: 10px; scrollbar-width: thin; scrollbar-color: #6759d1 transparent; }
.txe .txe-tablewrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.txe .txe-table { width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.txe .txe-table th {
  padding: 8px 10px; background: var(--txe-accent); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.txe .txe-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #e6e7ef; white-space: nowrap; }
.txe .txe-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
.txe-chip { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: var(--txe-accent); color: #fff; font-size: 10.5px; font-weight: 600; text-transform: uppercase; }

/* news (.latest-news :420-440) */
.txe-newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.txe-news { min-width: 0; padding: 12px; border-radius: 12px; background: #15142a; border: 1px solid rgba(255, 255, 255, .05); }
.txe .txe-nmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.txe-ntk { padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--txe-sky); font-size: 11.5px; font-weight: 700; }
.txe-ntk em { margin-left: 4px; color: var(--txe-green); font-style: normal; }
.txe-nsrc { color: var(--txe-muted); font-size: 11px; }
.txe .txe-nhl { margin: 8px 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; }
.txe .txe-nsent { display: flex; justify-content: space-between; color: #c9cbd6; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.txe .txe-nbar { height: 5px; margin: 4px 0 10px; overflow: hidden; border-radius: 3px; background: #333; }
.txe-nfill { display: block; height: 100%; transform-origin: 0 50%; }
.txe-nfill--pos { background: rgba(51, 184, 144, 1); }
.txe-nfill--neg { background: rgba(236, 75, 94, 1); }
.txe-nfill--neu { background: rgb(198, 180, 82); }
.txe .txe-mlist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.txe .txe-mlist li { padding: 9px 12px; border-radius: 10px; background: #15142a; color: #fff; font-size: 12.5px; font-weight: 600; }
.txe .txe-mlist span { display: block; color: var(--txe-muted); font-size: 11px; font-weight: 500; }

/* ---- controls under the window (as the Greeks panels) ---- */
.txe-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-4); }
.txe-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.txe-auto {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 2px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
  color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600; white-space: nowrap;
}
.txe-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.txe-auto.is-idle .txe-auto-dot, .txe-auto.is-stopped .txe-auto-dot { background: var(--lp-amber); }
.txe-auto-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--lp-text) 10%, transparent); }
.txe-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.txe-auto.is-idle .txe-auto-bar i, .txe-auto.is-stopped .txe-auto-bar i { background: var(--lp-amber); }
.txe-ico-play, .txe.is-paused .txe-ico-pause { display: none; }
.txe.is-paused .txe-ico-play { display: inline; }
.txe .txe-sample-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); margin: 0; color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.txe.is-still .txe-play { display: none; }

/* ---- focus and press ---- */
.txe :is(button, input, select, a):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.txe .is-press { transform: scale(.94); }

/* ---- motion ---- */
@keyframes txe-flash { 0% { background: rgba(196, 181, 253, .35); } 100% { background: transparent; } }
.txe.is-paused *, .txe.is-paused *::before, .txe.is-paused *::after { animation-play-state: paused !important; }
.txe.is-still *, .txe.is-still *::before, .txe.is-still *::after { animation: none !important; transition: none !important; }

/* ---- narrow ---- */
@media (max-width: 640px) {
  .txe { --txe-view-h: 430px; }
  .txe-bar-url { display: none; }
  .txe-pghead { padding: 10px 14px; }
  .txe-railwrap { padding: 8px 10px 6px; }
  .txe-page { padding: 10px; gap: 12px; }
  .txe-cbody { padding: 10px; }
  .txe-hcard { padding: 12px; }
  .txe .txe-search { width: 100%; }
  .txe .txe-input { flex: 1; width: auto; }
  .txe-grid--stock, .txe-grid--opt, .txe-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .txe-tile--stats { grid-column: 1 / -1; }
  .txe-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .txe .txe-gnote { display: none; }
  .txe .txe-glabel { font-size: 10px; letter-spacing: .3px; }
  .txe-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .txe-controls { justify-content: center; }
  .txe .txe-sample-note { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .txe .txe-tval { font-size: 14.5px; }
  .txe .txe-tlabel { font-size: 11.5px; }
  .txe-tile { padding: 9px 8px; }
  .txe .txe-metric p { font-size: 9px; letter-spacing: .4px; }
  .txe-metric b { font-size: 13.5px; }
}