/* /sahi/advantage/charts/ (SAHI Charts).

   The first half is shared by the three pages that carry the same blocks:
   SAHI Charts, SAHI Scalper and SAHI Research load this file (the two others
   add their own sheet after it). The second half is Charts only.

   Light-baked pictures: most of sahi.com's demo clips and posters have an
   off-white (#FAFAFA) background baked in, so they sit on a light plate in
   both themes instead of showing as a bright box on a dark card. */

/* ---- Shared: scope ------------------------------------------------------ */
:is(.page-advantage-charts, .page-advantage-sahi-scalper, .page-products-sahiresearch) .only-wide { display: block; }
@media (max-width: 760px) { :is(.page-advantage-charts, .page-advantage-sahi-scalper, .page-products-sahiresearch) .only-wide { display: none !important; } }
@media (min-width: 761px) { :is(.page-advantage-charts, .page-advantage-sahi-scalper, .page-products-sahiresearch) .only-narrow { display: none !important; } }

/* ---- Shared: video plate with one play button ----------------------------
   sahi.com froze every clip behind the browser's own control bar at 0:00 (and
   sent the <video> tags empty until its script ran). Here the poster is in the
   HTML, one SAHI play button sits on it, and a clip streams only once it is
   asked for (advantage-charts.js). Without the script the native controls stay. */
.vplate { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #FAFAFA; isolation: isolate; }
.vplate--dark { background: #0A0A0A; border-radius: 6px; }
.vplate__v { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.vplate__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: auto; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(140deg, #66033C 10%, #B89367 100%); color: #FFFFFF; box-shadow: 0 0 0 6px color-mix(in srgb, #FFFFFF 40%, transparent), 0 10px 28px color-mix(in srgb, #66033C 35%, transparent); cursor: pointer; transition: transform .35s var(--ease), opacity .25s; }
.vplate__play:hover { transform: scale(1.07); }
.vplate__play svg { width: 24px; height: 24px; margin-left: 3px; }
/* Playing: the button shrinks to a pause button in the corner. */
.vplate.is-playing .vplate__play { inset: auto auto 12px 12px; width: 44px; height: 44px; margin: 0; background: color-mix(in srgb, #0A0A0A 72%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #FFFFFF 35%, transparent); opacity: .85; }
.vplate.is-playing .vplate__play:hover, .vplate.is-playing .vplate__play:focus-visible { opacity: 1; transform: none; }
.vplate.is-playing .vplate__play svg { width: 18px; height: 18px; margin: 0; }
.vplate__v { cursor: pointer; }
/* Dark theme: the clips' baked off-white margin is cropped away (--crop, set
   per clip from its poster), so a clip sits on a dark plate, not in a white box. */
:root[data-theme="dark"] .vplate:not(.vplate--dark) { background: var(--surface-2); }
:root[data-theme="dark"] .vplate__v[style*="--crop"] { clip-path: inset(var(--crop) round 8px); }
:root[data-theme="dark"] .vplate__v--phone[style*="--crop"] { clip-path: inset(var(--crop) round 11% / 8%); }

/* ---- Shared: "Everything within reach" feature cards ---------------------
   Seven tall cards in a row that scrolls sideways, as on sahi.com. Every size
   inside a card is a share of the card's width (container units), so a card
   on a phone is the desktop card scaled down instead of a different layout.
   Two pairs of cards share one phone picture across the gap, as on sahi.com. */
.fc__carousel { margin-top: clamp(32px, 4vw, 48px); }
.fc__track { --slide: min(82%, 400px); --edge: max(var(--gut), calc((100% - var(--maxw)) / 2)); padding-inline: var(--edge); scroll-padding-inline: var(--edge); gap: 24px; }
.fc__card { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 400 / 720; padding: 10%; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); }
.band--alt .fc__card { background: var(--surface); }
.fc__title { position: relative; z-index: 2; max-width: 80cqw; font: 500 10cqw/1.25 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.fc__title span { display: block; }
.fc__title--end { position: absolute; left: 10%; right: 10%; bottom: 10%; }
.fc__sub { position: absolute; left: 10%; right: 10%; bottom: 10%; z-index: 2; font-size: max(14px, 4.5cqw); color: var(--ink-2); }
.fc__card--g .fc__title--end { bottom: calc(10% + 10cqw); }
.fc__img { position: absolute; z-index: 1; max-width: none; height: auto; pointer-events: none; }
.fc__img--br { right: 0; bottom: 0; width: 90.5%; }
.fc__img--bl { left: 0; bottom: 0; width: 27.25%; }
.fc__img--tr { right: 0; top: 0; width: 27.25%; }
.fc__img--tl { left: 0; top: 0; width: 90.5%; }
/* The 100+ indicators list fades out before the heading (on sahi.com its last
   rows showed through the letters). */
.fc__img--list { left: 16%; top: 13%; width: 84%; -webkit-mask-image: linear-gradient(#0F0F0F 42%, transparent 70%); mask-image: linear-gradient(#0F0F0F 42%, transparent 70%); }
/* Exclusive indicators: heading first, then the list it introduces. */
.fc__inds { position: relative; z-index: 2; display: grid; gap: 5cqw; margin: 9cqw 0 0; padding: 0 0 0 20cqw; list-style: none; }
.fc__inds li { display: flex; align-items: center; gap: 2.5cqw; font: 500 max(14px, 4.5cqw)/1.3 var(--sans); }
.fc__inds li::before { content: ""; flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; background: #28BCD0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.fc__inds li:nth-child(2) { margin-left: 5cqw; }
.fc__inds li:nth-child(3) { margin-left: 9cqw; opacity: .8; }
.fc__inds li:nth-child(4) { margin-left: 9cqw; opacity: .55; }
/* Super alerts: a bell ringing beside the alert set-up. */
.fc__bell { position: absolute; z-index: 2; left: 2%; top: 45%; display: grid; place-items: center; width: 34cqw; aspect-ratio: 1; border-radius: 50%; color: var(--ink); background: radial-gradient(circle closest-side, var(--bg) 0 52%, color-mix(in srgb, var(--ink) 5%, transparent) 53% 74%, color-mix(in srgb, var(--ink) 3%, transparent) 75% 99%, transparent 100%); }
.fc__bell svg { width: 11cqw; height: 11cqw; transform: rotate(-15deg); }
.fc__bell circle { fill: var(--down); }
html.js.motion .fc__card--d .fc__bell svg { animation: fc-ring 3.2s var(--ease) infinite; }
@keyframes fc-ring { 0%, 70%, 100% { transform: rotate(-15deg); } 76% { transform: rotate(4deg); } 82% { transform: rotate(-24deg); } 88% { transform: rotate(-6deg); } }
/* Real-time insights: three pills. */
.fc__card--e .fc__title--end { left: 24%; }
.fc__pills { position: absolute; z-index: 2; left: 24%; top: 34%; display: grid; gap: 6cqw; margin: 0; padding: 0; list-style: none; }
.fc__pills li { display: inline-flex; align-items: center; justify-content: space-between; gap: 4cqw; width: max-content; padding: 3cqw 6cqw; border-radius: 999px; background: var(--bg); font-size: max(14px, 5cqw); line-height: 1.4; box-shadow: var(--shadow-1); }
.fc__pills img { width: 6cqw; height: 6cqw; filter: brightness(0); }
:root[data-theme="dark"] .fc__pills img { filter: brightness(0) invert(1); }
/* Drawing tools: a 3 x 4 grid of tool tiles. */
.fc__tools { position: absolute; z-index: 2; left: 10%; bottom: 10%; display: grid; grid-template-columns: repeat(3, 20cqw); grid-auto-rows: 17.5cqw; gap: 3cqw; margin: 0; padding: 0; list-style: none; }
.fc__tools li { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fc__tools img { width: 8cqw; height: 8cqw; opacity: .75; filter: brightness(0); }
.fc__tools .fc__more { width: 11cqw; }
:root[data-theme="dark"] .fc__tools img { filter: brightness(0) invert(1); }
@media (max-width: 640px) { .fc__track { --slide: 84%; gap: 14px; } }

/* ---- Shared: FAQ as rounded cards (sahi.com's look) ----------------------
   Questions read as written (sahi.com forced every word to a capital), and the
   answers are left-aligned (justified text left rivers of space on a phone). */
.faqs .faq--cards { display: grid; gap: 12px; max-width: 1064px; margin-top: clamp(32px, 4vw, 40px); border-top: 0; }
.faq--cards details { padding: 0 clamp(16px, 2vw, 20px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .2s; }
.faq--cards details[open] { border-color: var(--hairline); }
.faq--cards summary { padding: 18px 0; font: 500 clamp(16px, 1.4vw, 18px)/1.45 var(--sans); }
.faq--cards summary::after { width: 14px; height: 14px; border: 0; transform: none; background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat; transition: background-size .3s var(--ease); }
.faq--cards details[open] summary::after { transform: none; background-size: 14px 1.6px, 1.6px 0; }
.faq--cards .answer { padding: 0 0 20px; font-size: 16px; line-height: 1.65; text-align: left; }
.faq--cards summary:focus-visible { outline-offset: -2px; border-radius: 12px; }

/* ---- Shared: YouTube video cards ---------------------------------------- */
.ytv__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(32px, 4vw, 40px) 0 0; padding: 0; list-style: none; }
.ytv__card { display: flex; flex-direction: column; gap: 14px; height: 100%; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.ytv__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--stage); }
.ytv__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ytv__card:hover .ytv__thumb img { transform: scale(1.03); }
.ytv__play { position: absolute; inset: 0; display: grid; place-items: center; width: 60px; height: 42px; margin: auto; border-radius: 12px; background: color-mix(in srgb, #0A0A0A 78%, transparent); color: #FFFFFF; transition: background-color .2s; }
.ytv__card:hover .ytv__play { background: var(--brand); }
.ytv__play svg { width: 22px; height: 22px; }
.ytv__title { padding-inline: 8px; font: 500 clamp(16px, 1.3vw, 18px)/1.5 var(--sans); text-align: center; text-wrap: balance; }
.ytv__more { margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 860px) { .ytv__list { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---- Shared: ₹0 / ₹0 / ₹10 price tiles ------------------------------------
   sahi.com's split-flap tiles. On a phone they stacked into a column a whole
   screen tall; here the three sit side by side at every width. */
.pf .lead { margin-top: 16px; }
.flaps { display: grid; grid-template-columns: repeat(3, minmax(0, 237px)); justify-content: center; gap: 16px; margin: clamp(32px, 5vw, 64px) auto 0; padding: 0; list-style: none; }
.flap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flap__box { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--shadow-1); overflow: hidden; perspective: 700px; }
.band--alt .flap__box { background: var(--surface); }
.flap__box::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--bg); }
.flap__cur { position: absolute; left: 12px; top: 10px; font: 400 16px/1 var(--sans); color: var(--ink-2); }
.flap__num { font: 400 clamp(52px, 8.4vw, 116px)/1 var(--disp); letter-spacing: -.03em; color: var(--ink); }
.flap__label { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.35; color: var(--ink-2); text-align: center; text-wrap: balance; }
html.js.motion .flap.reveal .flap__num { opacity: 0; }
html.js.motion .flap.reveal.is-in .flap__num { animation: flap-in .9s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 250ms); }
@keyframes flap-in { 0% { opacity: 0; transform: rotateX(-95deg); } 55% { opacity: 1; transform: rotateX(14deg); } 100% { opacity: 1; transform: none; } }
.pf .btn { margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 640px) { .flaps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .flap__cur { left: 8px; top: 7px; font-size: 13px; } .flap__box { border-radius: 12px; } }

/* ==== SAHI Charts only ===================================================== */

/* Hero: sahi.com's wide desktop shot (a trader in silhouette on the black
   ground) bleeds past both edges, as on sahi.com; phones get the phone shot. */
.ch-hero { padding-bottom: 0; overflow: clip; }
.ch-hero__art { display: block; width: 113.4%; margin: clamp(28px, 4vw, 48px) 0 0 -6.7%; }
.ch-hero__art img { width: 100%; }
@media (max-width: 640px) { .ch-hero__art { width: 100%; margin-left: 0; } }

/* Trade from the chart: four grey cards. */
.ch-exec .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1064px; margin: clamp(32px, 4vw, 40px) auto 0; }
.bento__card { position: relative; display: flex; align-items: flex-start; min-height: 300px; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.bento__card--wide { grid-column: 1 / -1; align-items: center; }
.bento__card--flip { justify-content: flex-end; }
.bento__txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 340px; padding-top: clamp(0px, 2vw, 32px); }
.bento__card--wide .bento__txt { padding-top: 0; }
.bento__card--flip .bento__txt { width: 50%; max-width: 540px; }
.bento__title { font: 500 24px/1.15 var(--sans); letter-spacing: 0; color: var(--ink); }
.bento__txt p { margin-top: 8px; font-size: 18px; line-height: 1.25; color: var(--ink-2); }
.bento__txt .link { margin-top: 24px; min-height: 24px; font-size: 18px; font-weight: 400; color: var(--ink); }
.link--btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.bento__img { position: absolute; z-index: 1; max-width: none; height: auto; pointer-events: none; }
.bento__img--orders { right: 0; top: 0; height: 100%; width: auto; }
.bento__img--keys { right: 0; bottom: 0; width: 81%; }
.bento__img--speed { right: 0; bottom: 0; width: 70%; }
.bento__img--modify { left: 0; top: 0; height: 100%; width: auto; }
/* The keys and the 6.61 ms figure are drawn for a light card. */
:root[data-theme="dark"] :is(.bento__img--keys, .bento__img--speed) { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 1000px) {
  .bento__card--wide .bento__txt { max-width: 44%; }
  .bento__img--orders { height: auto; width: 53%; top: auto; bottom: 0; }
  .bento__img--modify { height: auto; width: 46%; top: auto; bottom: 0; }
}
@media (max-width: 760px) {
  .ch-exec .bento { grid-template-columns: 1fr; }
  .bento__card, .bento__card--wide, .bento__card--flip { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 28px 24px 0; }
  .bento__txt, .bento__card--flip .bento__txt { width: auto; max-width: none; padding-top: 0; }
  .bento__img { position: relative; inset: auto; height: auto; }
  .bento__img--orders { width: calc(100% + 24px); margin: 28px -24px 0 0; align-self: flex-end; }
  .bento__img--keys { width: 92%; margin: 20px -24px 0 auto; }
  .bento__img--speed { width: 100%; margin: 24px 0 18px; }
  .bento__img--modify { width: 92%; margin: 24px 0 0 -24px; order: 2; }
}

/* Hotkeys: a modal with the shortcut list (without script it is shown inline). */
.hk { width: min(100% - 32px, 740px); max-width: none; max-height: min(86dvh, 780px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-3); overflow-y: auto; overscroll-behavior: contain; }
.hk::backdrop { background: var(--scrim); }
.hk__top { position: sticky; top: 0; z-index: 1; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) 0; background: var(--bg); }
.hk__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hk__title { font: 400 clamp(30px, 3.4vw, 44px)/1.1 var(--disp); }
.hk__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; }
.hk__close:hover { background: var(--bg-alt); }
.hk__close svg { width: 20px; height: 20px; }
.hk__lead { margin-top: 8px; color: var(--ink-2); }
.hk__filter { margin: 12px -4px 0; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.hk__filter .chip { min-height: 40px; padding: 0 16px; }
.hk__body { padding: 8px clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); }
.hk__group { padding-top: 16px; }
.hk__group + .hk__group { margin-top: 12px; border-top: 1px solid var(--line); }
.hk__label { font: 500 14px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.hk dl { margin: 4px 0 0; }
.hk dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 44px; }
.hk dt { font-size: 16px; color: var(--ink); }
.hk dd { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--ink-3); }
.hk kbd { min-width: 30px; padding: 5px 8px; border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font: 500 14px/1.2 var(--sans); text-align: center; }
html:not(.js) .hk { display: block; position: static; width: auto; max-width: 1064px; max-height: none; margin: clamp(28px, 4vw, 40px) auto 0; box-shadow: none; overflow: visible; }
html:not(.js) :is(.hk__close, .hk__filter) { display: none; }
html:not(.js) .hk__top { position: static; }

/* Custom indicator: two clips side by side. */
.ch-ind__grid { gap: 24px; }
.ch-ind__media { aspect-ratio: 3364 / 2696; }
@media (max-width: 760px) { .ch-ind__media { aspect-ratio: 1; } }
.ch-ind__title { margin-top: 24px; font: 500 clamp(24px, 2.2vw, 28px)/1.15 var(--sans); letter-spacing: 0; }
.ch-ind__card p { margin-top: 10px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--ink-2); }
.ch-ind__card { display: flex; flex-direction: column; align-items: flex-start; }
.ch-ind__card .btn { margin-top: auto; }
.ch-ind__card p { margin-bottom: 20px; }
@media (max-width: 640px) { .ch-ind__card { align-items: center; } }
@media (max-width: 640px) { .ch-ind__card { text-align: center; } .ch-ind__grid { gap: 48px; } }

/* Lightning fast SAHI charts: General / Advanced, then a dock of controls that
   picks the clip. Labels show for the selected control and on hover or focus
   (sahi.com showed only the selected one, the others were bare icons). */
.ch-demo__modes { display: flex; justify-content: center; gap: 12px; max-width: 842px; margin: 0 auto clamp(20px, 2.5vw, 28px); }
.ch-demo__mode-tab { flex: 1 1 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--ink); font: 400 15px/1 var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.ch-demo__mode-tab:hover { border-color: var(--ink-3); }
.ch-demo__mode-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ch-demo__mode-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.js .ch-demo__mode:not(.is-on) { display: none; }
.ch-demo__stage { position: relative; max-width: 841px; margin: 0 auto; }
.ch-demo__shot { aspect-ratio: 3364 / 2696; }
.ch-demo__shot:not(.is-on) { display: none; }
@media (max-width: 760px) { .ch-demo__shot { aspect-ratio: 1760 / 2400; max-width: 440px; margin-inline: auto; } }
.ch-demo__dock { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: -46px auto 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-1); }
.ch-demo__key { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; transition: width .3s var(--ease), height .3s var(--ease), box-shadow .3s, border-color .2s; }
.ch-demo__key img { width: 30px; height: 30px; transition: width .3s var(--ease), height .3s var(--ease); }
.ch-demo__key:hover { border-color: var(--ink-3); }
.ch-demo__key[aria-selected="true"] { width: 84px; height: 84px; border-color: var(--hairline); box-shadow: var(--shadow-2); }
.ch-demo__key[aria-selected="true"] img { width: 38px; height: 38px; }
:root[data-theme="dark"] .ch-demo__key img { filter: invert(1); }
.ch-demo__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--bg); color: var(--ink); font: 400 14px/1.2 var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.ch-demo__key[aria-selected="true"] .ch-demo__tip, .ch-demo__key:hover .ch-demo__tip, .ch-demo__key:focus-visible .ch-demo__tip { opacity: 1; transform: translate(-50%, 0); }
.ch-demo__dock:is(:hover, :focus-within) .ch-demo__key[aria-selected="true"]:not(:hover, :focus-visible) .ch-demo__tip { opacity: 0; }
.ch-demo__descs { max-width: 760px; margin: 24px auto 0; text-align: center; }
.ch-demo__desc p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
html.js .ch-demo__desc:not(.is-on) { display: none; }
html.js .ch-demo__desc h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Without the script: each mode's first clip and every description, labelled. */
html:not(.js) .ch-demo__modes, html:not(.js) .ch-demo__dock { display: none; }
html:not(.js) .ch-demo__mode + .ch-demo__mode { margin-top: 48px; }
html:not(.js) .ch-demo__mode-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-bottom: 16px; font: 400 28px/1.2 var(--disp); text-align: center; }
html:not(.js) .ch-demo__descs { text-align: left; }
html:not(.js) .ch-demo__desc + .ch-demo__desc { margin-top: 16px; }
html:not(.js) .ch-demo__desc h4 { font: 500 18px/1.3 var(--sans); }
@media (max-width: 480px) { .ch-demo__key { width: 56px; height: 56px; } .ch-demo__key[aria-selected="true"] { width: 72px; height: 72px; } .ch-demo__key img { width: 26px; height: 26px; } .ch-demo__key[aria-selected="true"] img { width: 32px; height: 32px; } .ch-demo__dock { gap: 6px; padding: 8px; } }

/* The dashed connector between sections (sahi.com's dotted line). */
.ch-connector { width: 0; height: clamp(72px, 9vw, 128px); margin: 0 auto; border-left: 1.5px dashed var(--ink-3); opacity: .8; }
.ch-connector + .band { padding-top: clamp(40px, 5vw, 64px); }
.band + .ch-connector { margin-top: calc(-1 * clamp(24px, 4vw, 56px)); }

/* Trade without switching tabs: a phone feature, shown on phones and tablets as on sahi.com. */
@media (min-width: 1024px) { .ch-dual, .ch-connector--phone { display: none; } }
.ch-dual__bar { display: flex; justify-content: center; gap: 8px; margin: 24px 0 20px; }
.ch-dual__frame { max-width: 400px; margin: 0 auto; padding: 16px; border-radius: var(--radius); background: var(--surface-2); }
.ch-dual__frame img { width: 100%; }

/* Few seconds is all it takes: two layout tabs over the monitor. */
.ch-layout__tabs, .ch-layout__descs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 1048px; margin: clamp(28px, 4vw, 48px) auto 0; }
.ch-layout__descs { margin-top: 16px; }
.ch-layout__tab { min-height: 44px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--ink); font: 400 15px/1.25 var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.ch-layout__tab:hover { border-color: var(--ink-3); }
.ch-layout__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ch-layout__descs p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: var(--ink-3); transition: color .25s; }
.ch-layout:has(#lt-custom[aria-selected="true"]) #ld-custom, .ch-layout:has(#lt-preset[aria-selected="true"]) #ld-preset { color: var(--ink); }
@media (max-width: 640px) {
  .ch-layout__tabs { gap: 8px; }
  .ch-layout__descs { grid-template-columns: 1fr; text-align: center; }
  html.js .ch-layout:has(#lt-custom[aria-selected="false"]) #ld-custom, html.js .ch-layout:has(#lt-preset[aria-selected="false"]) #ld-preset { display: none; }
}
.ch-layout__monitor { width: min(100%, 1057px); margin-top: clamp(32px, 4vw, 48px); }
.ch-layout__monitor .monitor__screen video { aspect-ratio: 2952 / 1702; object-fit: cover; border-radius: 6px; }