/* The Greeks Heatmap panel (showcase/chapters/greeks/_heatmap.html, greek-heatmap.js), the Greeks
   Heatmap tab of the Greeks & Gamma Exposure chapter on /how-it-works/ (#greeks).
   One product frame with the real page (intrinio_options/templates/intrinio/greeks_heatmap.html):
   tokens :6-20, header strip :28-74, controls :102-176, cards row and cards :177-238, legend
   :240-254, table :256-313, Gravity rows :315-376. Colours inside the frame are the page's own
   (--dp-cyan GEX, --dp-orange VEX, --dp-purple CEX, --dp-pink DEX, #FF00FF OI, --dp-gold Gravity,
   --dp-bull positive, each panel's colour for negative); the panel around it uses landing.css tokens.
   Everything is gkh-* and scoped under .gkh so it beats landing.css's element reset.
   JS state classes on .gkh: is-ready (live frame built), is-nodata, is-empty (cells waiting to fill
   in), is-auto (autoplay running), is-paused (Pause pressed), is-still (reduced motion). Inside:
   is-on (chip active), is-cue / is-press (the autoplay pointing at a control), is-focus (cards row
   with a spotlight), is-lit (the spotlit card), is-spot (its cell), is-new (a card or rows just
   added), is-below (tooltip under its cell), is-idle / is-stopped (autoplay pill).
   Only opacity and transform animate (plus the spotlight's glow), and nothing does under reduced
   motion (landing.css section 13, plus .is-still). */

.gkh {
  --gkh-bg: #0b0e17; --gkh-card: #10131f; --gkh-surface: #141827;
  --gkh-border: rgba(120, 130, 170, .16); --gkh-border-2: rgba(120, 130, 170, .28);
  --gkh-muted: #8892b0; --gkh-text: #e2e8f0; --gkh-chip: #9aa5c0;
  --gkh-cyan: #22d3ee; --gkh-purple: #8b5cf6; --gkh-orange: #f59e0b; --gkh-magenta: #FF00FF;
  --gkh-bull: #4cd68f; --gkh-bear: #e24e4c; --gkh-gold: #fbbf24; --gkh-pink: #f472b6;
  --gkh-hh: 78px;          /* card head height: the sticky column headers sit right under it */
  --gkh-deck-h: 600px;
  position: relative; min-width: 0;
}

/* Without JS, before the live frame is built, or if the JSON fails: the poster shows. */
.gkh:not(.is-ready) .gkh-live, .gkh:not(.is-ready) .gkh-js { display: none !important; }
html:not(.js) .gkh-js { display: none !important; }
.gkh.is-ready .gkh-poster { display: none; }

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

/* ---- the frame ---- */
.gkh-frame {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border: 1px solid var(--gkh-border-2); border-radius: 16px; color: var(--gkh-text);
  background:
    radial-gradient(900px 380px at 0% -10%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(700px 320px at 100% -10%, rgba(34, 211, 238, .06), transparent 60%),
    var(--gkh-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 8%, transparent);
  font: 400 13px/1.45 var(--lp-font);
}
.gkh-poster, .gkh-live { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gkh .gkh-frame p { margin: 0; }

/* header strip (dp-hero) */
.gkh-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px;
  border: 1px solid var(--gkh-border); border-radius: 12px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(139, 92, 246, .16), transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(34, 211, 238, .10), transparent 55%),
    var(--gkh-card);
}
.gkh .gkh-strip-t { min-width: 0; color: #f1f5f9; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.gkh-segs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.gkh-segs > i { color: var(--gkh-muted); font-style: normal; font-weight: 500; }
.gkh-seg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gkh-seg--gex { color: var(--gkh-cyan); }
.gkh-seg--vex { color: var(--gkh-orange); }
.gkh-seg--cex { color: var(--gkh-purple); }
.gkh-seg--dex { color: var(--gkh-pink); }
.gkh-seg--oi { color: var(--gkh-magenta); }
.gkh-seg--gravity { color: var(--gkh-gold); }
.gkh-dim { color: var(--gkh-muted); font-weight: 500; white-space: nowrap; }
.gkh .gkh-quote {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 12px; white-space: nowrap;
  border: 1px solid var(--gkh-border); border-radius: 10px; background: rgba(255, 255, 255, .04);
}
.gkh .gkh-quote b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .4px; }
.gkh .gkh-quote span { color: var(--gkh-bull); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gkh-strip-end { margin-left: auto; }

.gkh-ico svg, .gkh-seg svg, .gkh-chip svg, .gkh-search svg {
  flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* controls bar (dp-controls) */
.gkh-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 10px;
  border: 1px solid var(--gkh-border); border-radius: 12px; background: var(--gkh-card);
}
.gkh-group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px;
  border: 1px solid var(--gkh-border); border-radius: 10px; background: rgba(255, 255, 255, .025);
}
.gkh-lbl { color: var(--gkh-muted); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.gkh-group > .gkh-lbl { padding: 0 9px 0 6px; margin-right: 2px; border-right: 1px solid var(--gkh-border); }
.gkh .gkh-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 5px 11px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--gkh-chip); font: 700 12px/1.3 var(--lp-font); white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .2s;
}
span.gkh-chip { cursor: default; }
.gkh .gkh-chip:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.gkh .gkh-chip--gex.is-on { background: var(--gkh-cyan); color: #041018; box-shadow: 0 0 12px rgba(34, 211, 238, .35); }
.gkh .gkh-chip--vex.is-on { background: var(--gkh-orange); color: #1a1204; box-shadow: 0 0 12px rgba(245, 158, 11, .35); }
.gkh .gkh-chip--cex.is-on { background: var(--gkh-purple); color: #fff; box-shadow: 0 0 12px rgba(139, 92, 246, .4); }
.gkh .gkh-chip--dex.is-on { background: var(--gkh-pink); color: #1a0410; box-shadow: 0 0 12px rgba(244, 114, 182, .4); }
.gkh .gkh-chip--oi.is-on { background: var(--gkh-magenta); color: #1a001a; box-shadow: 0 0 12px rgba(255, 0, 255, .35); }
.gkh .gkh-chip--gravity.is-on { background: var(--gkh-gold); color: #1a1204; box-shadow: 0 0 12px rgba(251, 191, 36, .4); }
.gkh .gkh-chip.is-cue, .gkh .gkh-sel.is-cue { outline: 2px solid #fff; outline-offset: 2px; }
.gkh .is-press { animation: gkh-press .32s var(--lp-ease); }

.gkh .gkh-sel {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px;
  border: 1px solid var(--gkh-border); border-radius: 10px; background: rgba(255, 255, 255, .025);
}
.gkh .gkh-sel select, .gkh-sel-v {
  margin: 0; padding: 0 2px; border: 0; background: transparent; color: #fff;
  font: 700 12px/1.3 var(--lp-font); cursor: pointer;
}
.gkh .gkh-sel select option { background: var(--gkh-surface); color: #fff; }
.gkh-search {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; min-width: 130px;
  border: 1px solid var(--gkh-border); border-radius: 20px; background: rgba(255, 255, 255, .04);
  color: var(--gkh-muted); font-size: 12.5px;
}

/* the readout: one polite line under the controls */
.gkh .gkh-read { min-height: 1.5em; padding: 0 4px; color: #cbd5e1; font-size: 12.5px; line-height: 1.5; }
.gkh-read-k { font-weight: 800; letter-spacing: .3px; }
.gkh-read-k--gex { color: var(--gkh-cyan); }
.gkh-read-k--vex { color: var(--gkh-orange); }
.gkh-read-k--cex { color: #a78bfa; }
.gkh-read-k--dex { color: var(--gkh-pink); }
.gkh-read-k--oi { color: #ff66ff; }
.gkh-read-k--gravity { color: var(--gkh-gold); }

/* ---- the cards row (dp-panels). Scrolls inside itself, both ways, never the page. ---- */
.gkh-deck {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0; max-height: var(--gkh-deck-h);
  overflow: auto; padding-bottom: 4px; border-radius: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, .5) transparent;
}
@media (min-width: 1000px) { .gkh-deck { overscroll-behavior: contain; } }
.gkh-card {
  --gkh-pos: 76 214 143; --gkh-neg: 226 78 76; --gkh-acc: var(--gkh-cyan);
  position: relative; flex: 1 0 auto; min-width: 330px; padding: 0 12px 10px;
  border: 1px solid var(--gkh-border); border-radius: 14px; background: var(--gkh-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.gkh-card--vex { --gkh-neg: 245 158 11; --gkh-acc: var(--gkh-orange); }
.gkh-card--cex { --gkh-neg: 139 92 246; --gkh-acc: var(--gkh-purple); }
.gkh-card--dex { --gkh-neg: 244 114 182; --gkh-acc: var(--gkh-pink); }
.gkh-card--oi { --gkh-neg: 255 0 255; --gkh-acc: var(--gkh-magenta); }
.gkh-card--gravity { --gkh-acc: var(--gkh-gold); }
.gkh-card.is-lit { border-color: var(--gkh-acc); box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 1px var(--gkh-acc), 0 0 28px color-mix(in srgb, var(--gkh-acc) 25%, transparent); }
.gkh-deck.is-focus .gkh-card:not(.is-lit) { opacity: .5; }
.gkh-card.is-new { animation: gkh-in .35s var(--lp-ease) both; }

/* card head: title, legend. Sticky, so the scale stays in sight while the rows scroll. */
.gkh-card-head {
  position: sticky; top: 0; z-index: 3; height: var(--gkh-hh); margin: 0 -12px; padding: 15px 12px 0;
  border-radius: 14px 14px 0 0; background: var(--gkh-card);
}
.gkh-card-head::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--gkh-acc), transparent);
}
.gkh .gkh-card-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 11px; white-space: nowrap;
  color: var(--gkh-acc); font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
}
.gkh-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.gkh-legend-bar {
  display: block; height: 7px; margin-bottom: 4px; border-radius: 4px;
  background: linear-gradient(90deg, rgb(var(--gkh-neg)) 0%, rgb(var(--gkh-neg) / .15) 45%, #12131c 50%, rgb(var(--gkh-pos) / .15) 55%, rgb(var(--gkh-pos)) 100%);
}
.gkh .gkh-legend-l { display: flex; justify-content: space-between; gap: 8px; color: var(--gkh-muted); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- the strike x expiry table (dp-table) ---- */
.gkh .gkh-table {
  width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
  color: var(--gkh-text); font: 400 11px/1.2 var(--lp-font); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gkh-table th, .gkh-table td { height: 27px; padding: 5px 8px; text-align: center; }
.gkh-table thead th {
  position: sticky; top: var(--gkh-hh); z-index: 2; height: 30px;
  background: var(--gkh-surface); border-bottom: 1px solid var(--gkh-border);
  color: var(--gkh-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
}
.gkh-table tbody th { color: var(--gkh-text); font-weight: 700; background: var(--gkh-card); border-right: 1px solid var(--gkh-border); }
.gkh-table .gkh-arrow { width: 14px; padding: 0; color: var(--gkh-cyan); font-size: 10px; }
.gkh-table tbody td.gkh-arrow { background: var(--gkh-card); }
.gkh-table td.gkh-c { border-radius: 5px; color: #f8fafc; font-size: 10.5px; font-weight: 600; }
.gkh-table td.gkh-c.gkh-k { color: #0b0e17; }
.gkh-table tbody tr:hover > td { filter: brightness(1.12); }
.gkh-table tr.gkh-cur > * { box-shadow: inset 0 1px 0 rgba(34, 211, 238, .35), inset 0 -1px 0 rgba(34, 211, 238, .35); }
.gkh-table:not(.gkh-table--grav) tr.gkh-cur > th, .gkh-table tr.gkh-cur > td.gkh-arrow { color: var(--gkh-cyan); background: linear-gradient(rgba(34, 211, 238, .08), rgba(34, 211, 238, .08)), var(--gkh-card); }
.gkh .gkh-table td[tabindex] { cursor: default; }
.gkh .gkh-table td.gkh-c:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.gkh .gkh-table td.is-spot {
  position: relative; z-index: 1; outline: 2px solid #fff; outline-offset: -2px;
  animation: gkh-glow 1.6s ease-in-out infinite;
}

/* fill buckets: cellColor's opacity in 0.1 steps; positive bull green, negative the panel's colour */
.gkh td.gkh-p1, .gkh tr.gkh-p1 > * { background-color: rgb(var(--gkh-pos) / .1); }
.gkh td.gkh-p2, .gkh tr.gkh-p2 > * { background-color: rgb(var(--gkh-pos) / .2); }
.gkh td.gkh-p3, .gkh tr.gkh-p3 > * { background-color: rgb(var(--gkh-pos) / .3); }
.gkh td.gkh-p4, .gkh tr.gkh-p4 > * { background-color: rgb(var(--gkh-pos) / .4); }
.gkh td.gkh-p5, .gkh tr.gkh-p5 > * { background-color: rgb(var(--gkh-pos) / .5); }
.gkh td.gkh-p6, .gkh tr.gkh-p6 > * { background-color: rgb(var(--gkh-pos) / .6); }
.gkh td.gkh-p7, .gkh tr.gkh-p7 > * { background-color: rgb(var(--gkh-pos) / .7); }
.gkh td.gkh-p8, .gkh tr.gkh-p8 > * { background-color: rgb(var(--gkh-pos) / .8); }
.gkh td.gkh-p9, .gkh tr.gkh-p9 > * { background-color: rgb(var(--gkh-pos) / .9); }
.gkh td.gkh-p10, .gkh tr.gkh-p10 > * { background-color: rgb(var(--gkh-pos) / 1); }
.gkh td.gkh-n1, .gkh tr.gkh-n1 > * { background-color: rgb(var(--gkh-neg) / .1); }
.gkh td.gkh-n2, .gkh tr.gkh-n2 > * { background-color: rgb(var(--gkh-neg) / .2); }
.gkh td.gkh-n3, .gkh tr.gkh-n3 > * { background-color: rgb(var(--gkh-neg) / .3); }
.gkh td.gkh-n4, .gkh tr.gkh-n4 > * { background-color: rgb(var(--gkh-neg) / .4); }
.gkh td.gkh-n5, .gkh tr.gkh-n5 > * { background-color: rgb(var(--gkh-neg) / .5); }
.gkh td.gkh-n6, .gkh tr.gkh-n6 > * { background-color: rgb(var(--gkh-neg) / .6); }
.gkh td.gkh-n7, .gkh tr.gkh-n7 > * { background-color: rgb(var(--gkh-neg) / .7); }
.gkh td.gkh-n8, .gkh tr.gkh-n8 > * { background-color: rgb(var(--gkh-neg) / .8); }
.gkh td.gkh-n9, .gkh tr.gkh-n9 > * { background-color: rgb(var(--gkh-neg) / .9); }
.gkh td.gkh-n10, .gkh tr.gkh-n10 > * { background-color: rgb(var(--gkh-neg) / 1); }
.gkh tr.gkh-z > * { background-color: rgba(100, 116, 139, .25); }

/* ---- Gravity: one ranked row per strike, the row filled by its lean (dp-gravity-*) ---- */
.gkh-table--grav tbody th, .gkh-table--grav tbody td { border-right: 0; }
.gkh-table--grav tbody tr > :first-child { border-radius: 6px 0 0 6px; }
.gkh-table--grav tbody tr > :last-child { border-radius: 0 6px 6px 0; }
.gkh-table--grav tbody th { color: #f1f5f9; font-weight: 800; }
.gkh-table--grav td.gkh-c { border-radius: 0; color: #f8fafc; font-weight: 700; }
.gkh-rank { color: var(--gkh-muted); font-weight: 700; }
.gkh-table--grav tr.gkh-top .gkh-rank, .gkh-star { color: var(--gkh-gold); }
.gkh-star { margin-left: 3px; font-size: 10px; }
.gkh-open { color: var(--gkh-muted); font-weight: 700; }
.gkh-up { color: var(--gkh-bull); font-weight: 700; }
.gkh-down { color: var(--gkh-bear); font-weight: 700; }
.gkh-flat { color: var(--gkh-muted); font-weight: 700; }
.gkh-tag { display: inline-block; padding: 3px 6px; border-radius: 5px; color: #f1f5f9; font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.gkh-table--grav tr.gkh-k > *, .gkh-table--grav tr.gkh-k > * .gkh-star, .gkh-table--grav tr.gkh-k td.gkh-c { color: #241a04; }
.gkh-table--grav tr.gkh-k .gkh-tag { background: rgba(0, 0, 0, .24); color: #241a04; }

/* ---- fill-in and new rows ---- */
.gkh-live .gkh-table:not(.gkh-table--grav) td.gkh-c {
  transition: opacity .35s ease, transform .35s var(--lp-ease);
  transition-delay: calc(var(--r, 0) * 28ms + var(--k, 0) * 55ms);
}
.gkh-live .gkh-table--grav tbody tr { transition: opacity .4s ease; transition-delay: calc(var(--r, 0) * 30ms); }
.gkh.is-empty .gkh-live .gkh-table:not(.gkh-table--grav) td.gkh-c { opacity: 0; transform: scale(.82); transition: none; }
.gkh.is-empty .gkh-live .gkh-table--grav tbody tr { opacity: 0; transition: none; }
.gkh-live tbody tr.is-new { animation: gkh-row .6s ease both; }

/* ---- tooltip ---- */
.gkh-tip {
  position: absolute; left: 0; top: 0; z-index: 6; min-width: 150px; max-width: 260px; padding: 8px 10px;
  border: 1px solid rgba(139, 92, 246, .45); border-radius: 10px; background: rgba(20, 24, 39, .97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); pointer-events: none;
  color: var(--gkh-text); font: 400 12px/1.45 var(--lp-font); font-variant-numeric: tabular-nums;
}
.gkh-tip b { display: block; color: #fff; font-size: 12.5px; font-weight: 700; }
.gkh-tip-v { display: block; font-weight: 700; }
.gkh-tip-s { display: block; color: var(--gkh-muted); font-size: 11px; }
.gkh-tip-k { font-style: normal; font-weight: 800; letter-spacing: .3px; }
.gkh-tip-k--gex { color: var(--gkh-cyan); }
.gkh-tip-k--vex { color: var(--gkh-orange); }
.gkh-tip-k--cex { color: #a78bfa; }
.gkh-tip-k--dex { color: var(--gkh-pink); }
.gkh-tip-k--oi { color: #ff66ff; }
.gkh-tip-k--gravity { color: var(--gkh-gold); }

/* ---- controls under the frame (as regime-intraday) ---- */
.gkh-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lp-sp-2); margin-top: var(--lp-sp-4); }
.gkh-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;
}
.gkh-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.gkh-auto.is-idle .gkh-auto-dot, .gkh-auto.is-stopped .gkh-auto-dot { background: var(--lp-amber); }
.gkh-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); }
.gkh-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.gkh-auto.is-idle .gkh-auto-bar i, .gkh-auto.is-stopped .gkh-auto-bar i { background: var(--lp-amber); }
.gkh-ico-play, .gkh.is-paused .gkh-ico-pause { display: none; }
.gkh.is-paused .gkh-ico-play { display: inline; }
.gkh.is-still .gkh-controls { display: none; }

/* ---- focus ---- */
.gkh :is(button, select, [tabindex]):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.gkh .gkh-deck:focus-visible { outline-offset: -2px; }

/* ---- motion ---- */
@keyframes gkh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gkh-row { from { opacity: 0; } to { opacity: 1; } }
@keyframes gkh-press { 0% { transform: scale(1); } 40% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes gkh-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .0), 0 0 14px rgba(255, 255, 255, .25); }
  50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 0 22px rgba(255, 255, 255, .35); }
}
.gkh.is-paused *, .gkh.is-paused *::before, .gkh.is-paused *::after { animation-play-state: paused !important; }
.gkh.is-still *, .gkh.is-still *::before, .gkh.is-still *::after { animation: none !important; transition: none !important; }

/* ---- narrower ---- */
@media (max-width: 999px) {
  .gkh { --gkh-deck-h: 560px; }
}
@media (max-width: 640px) {
  .gkh { --gkh-deck-h: 520px; }
  .gkh-frame { padding: 10px; gap: 10px; border-radius: 16px; }
  .gkh-strip { padding: 10px 12px; }
  .gkh .gkh-strip-t { font-size: 12px; }
  .gkh .gkh-quote b { font-size: 14px; }
  .gkh .gkh-quote span { font-size: 13px; }
  .gkh-bar { gap: 8px; padding: 8px; }
  .gkh-search { display: none; }
  .gkh .gkh-chip { padding: 5px 8px; font-size: 11.5px; }
  .gkh-card { min-width: 300px; }
  .gkh .gkh-read { font-size: 12px; }
  .gkh-tip { max-width: 230px; font-size: 11px; }
}
@media (max-width: 400px) {
  .gkh-group > .gkh-lbl { display: none; }
  .gkh-strip-end { margin-left: 0; }
  .gkh-card { min-width: 280px; }
}