/* ============================================================================
   Sahi guides - shared UX + motion layer (loaded after guide.css).
   Glass surfaces, spring easing, reveal choreography. Everything that moves is
   gated behind html.ux-motion, which guide-ux.js only sets when the reader has
   not asked for reduced motion. Without JS the page is the plain guide.css page.
   Only transform / opacity / stroke-dashoffset are animated: no layout shift.
   ========================================================================== */
:root {
    --ux-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
    --ux-spring-soft: cubic-bezier(0.22, 1.25, 0.4, 1);
    --ux-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Glass. The values below are the dark theme; :root[data-theme="light"] (at the end of this block) restates them. */
    --ux-glass: rgba(21, 2, 11, 0.56);
    --ux-glass-hi: rgba(255, 255, 255, 0.07);
    --ux-edge: rgba(255, 255, 255, 0.16);        /* the lit top edge */
    --ux-edge-lo: rgba(255, 255, 255, 0.04);     /* the hairline all round */
    --ux-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --ux-sheen: rgba(255, 255, 255, 0.11);       /* the pointer-following highlight on a card */
    --ux-sheet-hi: rgba(255, 255, 255, 0.09);
    --ux-sheet-bg: rgba(21, 2, 11, 0.82);
    --ux-card: rgba(255, 255, 255, 0.025);       /* the previous / next guide cards */
    --ux-thumb: rgba(255, 255, 255, 0.2);        /* the contents panel's own scrollbar */
    --ux-radius: 24px;
    --ux-sticky: 0px;
}
:root[data-theme="light"] {
    --ux-glass: rgba(255, 255, 255, 0.78);
    --ux-glass-hi: rgba(255, 255, 255, 0.9);
    --ux-edge: rgba(255, 255, 255, 0.95);
    --ux-edge-lo: rgba(21, 2, 11, 0.12);
    --ux-shadow: 0 14px 40px rgba(21, 2, 11, 0.12), 0 2px 8px rgba(21, 2, 11, 0.08);
    --ux-sheen: rgba(165, 15, 102, 0.07);
    --ux-thumb: rgba(21, 2, 11, 0.42);
    --ux-sheet-hi: rgba(255, 255, 255, 0.9);
    --ux-sheet-bg: rgba(255, 255, 255, 0.97);
    --ux-card: #FFFFFF;
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --ux-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.7%, 1.067 23.2%, 1.078 26.3%, 1.062 30%, 1.013 38.5%, 0.996 45%, 1.002 58%, 1);
        --ux-spring-soft: linear(0, 0.02 1.6%, 0.17 4.6%, 0.56 10.4%, 0.85 15%, 1.03 20.5%, 1.06 25%, 1.03 31%, 0.995 42%, 1.002 60%, 1);
    }
}
html { scroll-padding-top: 96px; }

/* ── glass helper ──────────────────────────────────────────────────────── */
.ux-glass {
    background: linear-gradient(155deg, var(--ux-glass-hi), transparent 45%), var(--ux-glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid var(--ux-edge-lo);
    box-shadow: var(--ux-shadow), inset 0 1px 0 var(--ux-edge), inset 0 -1px 0 var(--ux-edge-lo);
}

/* ── 1. reading progress ───────────────────────────────────────────────── */
.ux-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
    pointer-events: none; background: transparent;
}
.ux-progress > i {
    display: block; height: 100%; width: 100%;
    transform: scaleX(var(--ux-p, 0)); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--sahi-accent), var(--sahi-cyan));
    box-shadow: 0 0 10px rgba(165, 15, 102, 0.6);
    border-radius: 0 3px 3px 0;
}

/* ── 2. contents: the "On this page" panel (desktop) and the Contents sheet (tablet, phone) ────────────────────────
   One markup, two homes. build-guides.mjs renders the panel into the sidebar; guide-ux.js clones it into the bottom sheet on
   phones and tablets, so every rule below is written against .toc-panel and holds in both. A flat, numbered list: a rounded-square
   number badge and the label per item; the current item is a pill with a soft highlight outline and glow, its badge solid.
   A part (A, B, C) is only a small label row between groups. Colours are the guide's own tokens: --text-*, --border-soft, ink
   veils, and --sahi-cyan (mint on dark, brand pink on light) as the one highlight. Transitions: transform, opacity, background, shadow. */
.toc-panel {
    --toc-hi: var(--sahi-cyan);                  /* the highlight: current outline, badge, progress */
    --toc-on-hi: var(--on-positive);             /* ink printed on that highlight (dark on mint, white on pink) */
    --toc-veil: rgba(var(--ink-rgb), 0.06);
    --toc-veil-2: rgba(var(--ink-rgb), 0.1);
    display: flex; flex-direction: column; min-height: 0;
}
.toc-head, .toc-bar, .toc-filter { flex: none; }
.toc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.toc-panel .toc-title { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.toc-pct { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.toc-pct b { font-weight: 700; }
.toc-bar { height: 4px; margin: 12px 4px 16px; border-radius: 4px; overflow: hidden; background: var(--toc-veil-2); }
.toc-bar > i { display: block; height: 100%; border-radius: inherit; transform: scaleX(var(--toc-p, 0)); transform-origin: 0 50%; will-change: transform; }

/* the filter box shares its space with the page before the script arrives, so nothing moves when it does */
.toc-filter {
    position: relative; display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 0 12px; padding: 0 10px 0 12px;
    border: 1px solid var(--border-soft); border-radius: 14px; background: var(--toc-veil);
    transition: background-color 0.2s, box-shadow 0.2s;
}
html:not(.js) .toc-filter { visibility: hidden; }
.toc-filter > svg { flex: none; width: 17px; height: 17px; color: var(--text-2); }
.toc-filter input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none;
    color: var(--text-1); font: 500 0.9rem/1 var(--font-sans); -webkit-appearance: none; appearance: none;
}
.toc-filter input::placeholder { color: var(--text-2); opacity: 1; }
.toc-filter input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.toc-filter kbd {
    flex: none; min-width: 24px; padding: 3px 7px; border: 1px solid var(--border-soft); border-radius: 7px; text-align: center;
    background: var(--toc-veil); color: var(--text-2); font: 700 0.75rem/1.2 var(--font-sans); transition: opacity 0.2s;
}
.toc-filter:focus-within { background: var(--toc-veil-2); box-shadow: 0 0 0 2px var(--toc-hi); }
.toc-filter:focus-within kbd, .toc-filter.has-q kbd { opacity: 0; }

/* the list scrolls inside the card, with a soft fade where more is waiting above or below */
.toc-scroll {
    position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 2px 0 4px;
    --toc-ft: 0px; --toc-fb: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) var(--toc-ft), rgba(0, 0, 0, 1) calc(100% - var(--toc-fb)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) var(--toc-ft), rgba(0, 0, 0, 1) calc(100% - var(--toc-fb)), transparent 100%);
}
.toc-scroll::-webkit-scrollbar { display: none; }
.toc-scroll.fade-t { --toc-ft: 28px; }
.toc-scroll.fade-b { --toc-fb: 32px; }
.toc-empty { margin: 8px 10px; font-size: 0.9rem; color: var(--text-3); }
.toc-empty[hidden] { display: none; }

.toc-panel .toc-nav { display: flex; flex-direction: column; gap: 4px; }
.toc-panel .toc-nav a.toc-link {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 5px 10px 5px 8px;
    border: 1px solid transparent; border-radius: 14px;
    color: var(--text-2); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-decoration: none;
    transition: background-color 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.toc-panel .toc-nav a[hidden], .toc-panel .toc-nav a.toc-link::before { display: none; }
.toc-num {
    flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 8px;
    background: var(--toc-veil-2); color: var(--text-2);
    font: 700 0.72rem/1 var(--font-sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
    transition: background-color 0.25s, box-shadow 0.25s;
}
.toc-num:empty { display: none; }
.toc-link--live .toc-num:empty { display: inline-block; min-width: 0; width: 8px; height: 8px; margin: 0 9px; padding: 0; border-radius: 50%; background: var(--toc-hi); box-shadow: 0 0 8px var(--toc-hi); }
.toc-lbl { min-width: 0; overflow-wrap: anywhere; }
.toc-panel .toc-nav a.toc-link:hover { color: var(--text-1); background: var(--toc-veil); }
.toc-panel .toc-nav a.toc-link:hover .toc-num { background: rgba(var(--ink-rgb), 0.16); color: var(--text-1); }
.toc-panel .toc-nav a.toc-link.active {
    color: var(--text-1); font-weight: 600;
    border-color: color-mix(in srgb, var(--toc-hi) 55%, transparent);
    background: color-mix(in srgb, var(--toc-hi) 8%, rgba(var(--ink-rgb), 0.04));
    box-shadow: 0 0 18px color-mix(in srgb, var(--toc-hi) 20%, transparent), inset 0 0 14px color-mix(in srgb, var(--toc-hi) 6%, transparent);
}
.toc-panel .toc-nav a.toc-link.active .toc-num { background: var(--toc-hi); color: var(--toc-on-hi); box-shadow: 0 0 10px color-mix(in srgb, var(--toc-hi) 45%, transparent); }
.toc-panel .toc-nav a.toc-link:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 2px; }

/* a part: a quiet label between item groups, not a control */
.toc-part {
    margin: 14px 0 2px; padding: 0 10px; color: var(--text-3);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3;
}
.toc-part:first-child { margin-top: 4px; }
.toc-link--live + .toc-part { margin-top: 4px; }
/* while a filter is typed only matching items stay, and a part label stays only with a match under it */
.toc-panel.is-filtering .toc-nav a.toc-link[data-hit="false"], .toc-panel.is-filtering .toc-part[data-hit="false"] { display: none; }

@media (min-width: 769px) {
    .toc-container {
        position: sticky; top: 112px; z-index: 2;
        height: max-content; align-self: start; max-height: calc(100vh - 136px); max-height: calc(100dvh - 136px);
        padding: 20px 14px 14px; overflow: hidden;
        border: 0; border-radius: 24px; background: var(--card-big);
    }
}
/* cursor spotlight, the same recipe as the closing card on /tools: a wide soft glow that follows the pointer (--ux-mx/--ux-my, set by guide-ux.js) */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .toc-container::after {
        content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
        background: radial-gradient(420px circle at var(--ux-mx, 50%) var(--ux-my, 0%), color-mix(in srgb, var(--sahi-cyan) 14%, transparent), transparent 62%);
        opacity: 0; transition: opacity 500ms;
    }
    .toc-container:hover::after { opacity: 1; }
}
@media (min-width: 769px) and (max-height: 660px) { .toc-container { top: 100px; max-height: calc(100vh - 116px); } }

/* ── tablet and phone: a Contents pill and a bottom sheet with the same list ─────────────────────────────────── */
.toc-close, .ux-sheet-btn, .ux-sheet, .ux-scrim { display: none; }
@media (max-width: 768px) {
    .toc-container { display: none; }
    .ux-sheet-btn {
        display: inline-flex; align-items: center; gap: 10px;
        position: fixed; z-index: 80; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        max-width: calc(100vw - 132px); min-height: 48px; padding: 0 8px 0 8px;
        border-radius: 999px; color: var(--text-1); font: 600 0.9rem/1 var(--font-sans);
        cursor: pointer;
        transition: transform 0.5s var(--ux-spring), opacity 0.3s;
    }
    .ux-sheet-btn:active { transform: translateX(-50%) scale(0.96); }
    .ux-sheet-btn:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }
    .ux-sheet-btn__num { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 5px; border-radius: 9px; background: var(--sahi-cyan); color: var(--on-positive); font: 700 0.78rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
    .ux-sheet-btn__cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-weight: 600; }
    .ux-sheet-btn__pct { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; background: var(--toc-veil-2, rgba(var(--ink-rgb), 0.1)); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ux-scrim {
        display: block; position: fixed; inset: 0; z-index: 95;
        background: var(--scrim); opacity: 0; pointer-events: none;
        transition: opacity 0.3s;
    }
    .ux-sheet {
        display: flex; flex-direction: column;
        position: fixed; z-index: 96; left: 8px; right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        height: min(84vh, 680px); height: min(84dvh, 680px);
        padding: 8px 14px 12px; border-radius: 28px;
        visibility: hidden; transform: translateY(calc(100% + 24px));
        background: linear-gradient(155deg, var(--ux-sheet-hi), transparent 45%), var(--ux-sheet-bg);
        touch-action: pan-y;
    }
    .ux-sheet-open .ux-scrim { opacity: 1; pointer-events: auto; }
    .ux-sheet-open .ux-sheet { visibility: visible; transform: none; }
    .ux-sheet-open .ux-sheet-btn { opacity: 0; pointer-events: none; }
    .ux-motion .ux-sheet { transition: transform 0.38s var(--ux-out), visibility 0s 0.38s; }
    .ux-motion.ux-sheet-open .ux-sheet { transition: transform 0.6s var(--ux-spring-soft), visibility 0s; }
    .ux-sheet-grab { flex: none; width: 38px; height: 5px; border-radius: 3px; margin: 0 auto 12px; background: rgba(var(--ink-rgb), 0.28); }
    .ux-sheet .toc-panel { flex: 1 1 auto; padding: 0; }
    .ux-sheet .toc-head { padding: 0 0 0 4px; }
    .ux-sheet .toc-pct { margin-left: auto; margin-right: 8px; }
    .toc-close {
        display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0;
        border: 1px solid var(--border-soft); background: var(--toc-veil); color: var(--text-1); cursor: pointer;
    }
    .toc-close svg { width: 18px; height: 18px; }
    .toc-close:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 2px; }
    .ux-sheet .toc-filter { height: 48px; border-radius: 14px; }
    .ux-sheet .toc-filter input { font-size: 1rem; }
    .ux-sheet .toc-filter kbd { display: none; }
    .ux-sheet .toc-panel .toc-nav a.toc-link { min-height: 48px; padding: 6px 12px 6px 10px; font-size: 1rem; }
    .ux-sheet .toc-num { min-width: 30px; height: 26px; font-size: 0.78rem; }
}

/* ── 3. reveal choreography ────────────────────────────────────────────────
   Blocks fade up once, staggered by the --ux-i that guide-ux.js sets on the blocks entering together (guide.js sets the same
   index on [data-aos] blocks). 200-700 ms, transform and opacity only. Once a block has settled .ux-done / .aos-done drop the
   stagger delay, so a hover on it answers at once. Anything inside [data-static] (or marked data-motion="off") is left alone. */
.ux-motion .ux-r:not(.ux-in) { opacity: 0; transform: translateY(22px); }
.ux-motion .ux-r {
    transition: opacity 0.55s var(--ux-out), transform 0.7s var(--ux-out);
    transition-delay: calc(var(--ux-i, 0) * 70ms);
}
.ux-motion .ux-r.ux-in { transition-delay: calc(var(--ux-i, 0) * 70ms); }
.ux-motion .ux-r.ux-done, .ux-motion [data-aos].aos-done { transition-delay: 0s; }
.js.ux-motion [data-aos] { transition: opacity 0.55s var(--ux-out), transform 0.7s var(--ux-out); }
.js.ux-motion [data-aos].aos-instant, .js.ux-motion .ux-r.ux-instant { transition: none; }
.js [data-aos="fade-up"]:not(.aos-in) { transform: translateY(22px); }

/* section headings: the rule under an h2 is drawn in once, left to right */
.section-block > h2 { position: relative; }
.section-block > h2::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; border-radius: 2px; pointer-events: none;
    background: var(--sahi-cyan); transform-origin: 0 50%;
}
.ux-motion .section-block > h2.ux-h2u::after { transition: transform 0.7s var(--ux-out) 0.12s; }
.ux-motion .section-block > h2.ux-h2u:not(.ux-in)::after { transform: scaleX(0); }

/* charts: lines draw, bars grow */
.ux-motion .ux-draw:not(.ux-in) { stroke-dashoffset: 1; stroke-dasharray: 1; }
.ux-motion .ux-draw { transition: stroke-dashoffset 1.3s var(--ux-out); transition-delay: calc(var(--ux-i, 0) * 90ms + 150ms); }
.ux-motion .ux-draw.ux-in { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ux-motion .ux-draw.ux-drawn { stroke-dasharray: none; }
.ux-grow-x, .ux-grow-y { transform-box: fill-box; }
.ux-grow-x { transform-origin: 0 50%; }
.ux-grow-y { transform-origin: 50% 100%; }
.ux-motion .ux-grow-x:not(.ux-in) { transform: scaleX(0); }
.ux-motion .ux-grow-y:not(.ux-in) { transform: scaleY(0); }
.ux-motion .ux-grow-x, .ux-motion .ux-grow-y {
    transition: transform 1s var(--ux-spring-soft); transition-delay: calc(var(--ux-i, 0) * 60ms + 120ms);
}
.counter, .guide-table td, [class*="__num"], [class*="__val"] { font-variant-numeric: tabular-nums; }

/* ── 4. tactile interactions ───────────────────────────────────────────── */
.guide-card, .feature-card, .callout-beginner, .sc, .trading-example, .btn-primary, .btn-ghost, .quiz-btn, .ux-next a {
    transition-property: transform, box-shadow, border-color, background-color, opacity;
    transition-duration: 0.45s; transition-timing-function: var(--ux-spring);
}
.guide-card, .feature-card, .callout-beginner { position: relative; overflow: clip; }
.guide-card::after, .feature-card::after, .callout-beginner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(260px circle at var(--ux-mx, 50%) var(--ux-my, 0%), var(--ux-sheen), transparent 65%);
    opacity: 0; transition: opacity 0.35s;
}
@media (hover: hover) and (pointer: fine) {
    .ux-motion .guide-card:hover, .ux-motion .feature-card:hover, .ux-motion .callout-beginner:hover,
    .ux-motion .sc:hover, .ux-motion .trading-example:hover { transform: translateY(-3px); }
    .guide-card:hover::after, .feature-card:hover::after, .callout-beginner:hover::after { opacity: 1; }
    .btn-primary:hover, .btn-ghost:hover { transform: translateY(-2px); }
    /* figure frames (replicas of the tool, charts) lift a little under the pointer */
    .ux-motion .content-main figure.ocv-real, .ux-motion .content-main .iv-block, .ux-motion .content-main .guide-table-wrap {
        transition-property: opacity, transform, box-shadow; transition-duration: 0.55s, 0.6s, 0.45s; transition-timing-function: var(--ux-out);
    }
    .ux-motion .content-main figure.ocv-real:hover, .ux-motion .content-main .iv-block:hover, .ux-motion .content-main .guide-table-wrap:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 44px -22px rgba(var(--shade-ch), calc(0.55 * var(--k-shadow)));
    }
}
.guide-card:active, .feature-card:active, .btn-primary:active, .btn-ghost:active, .quiz-btn:active { transform: scale(0.98); transition-duration: 0.15s; }
.guide-card:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .quiz-btn:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }

/* smooth scrolling (guide.css already sets * scroll-behavior) + heading offset */
.section-block, h2[id], h3[id] { scroll-margin-top: 28px; }
@media (max-width: 768px) { .section-block, h2[id] { scroll-margin-top: 20px; } }

/* copy-link on h2 */
.ux-h2 { position: relative; }
.ux-anchor {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 32px; height: 32px; margin-left: 10px; padding: 0; border-radius: 10px;
    border: 1px solid var(--ux-edge-lo); background: rgba(var(--ink-rgb), 0.04);
    color: var(--text-3); cursor: pointer; opacity: 0; font: 600 0.75rem/1 var(--font-sans);
    transition: opacity 0.25s, transform 0.45s var(--ux-spring), color 0.2s, background 0.2s;
}
.ux-anchor svg { width: 15px; height: 15px; }
.ux-h2:hover .ux-anchor, .ux-anchor:focus-visible, .ux-anchor.ux-copied { opacity: 1; }
.ux-anchor:hover { color: var(--text-1); background: rgba(var(--ink-rgb), 0.1); transform: scale(1.1); }
.ux-anchor:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 2px; }
.ux-anchor.ux-copied { color: var(--sahi-cyan); border-color: color-mix(in srgb, var(--sahi-cyan) 40%, transparent); }
@media (hover: none) { .ux-anchor { opacity: 0.7; } }

/* FAQ animated open/close (height via grid-rows-free transform+opacity on the
   answer; the details height itself is animated by JS with WAAPI). */
.guide-q { overflow: clip; border-radius: 18px; transition: background-color 0.3s, border-color 0.3s; }
.guide-q[open] { background: rgba(var(--ink-rgb), 0.03); }
.guide-q summary::after { transition: transform 0.5s var(--ux-spring); }
.ux-motion .guide-q[open] .guide-a { animation: ux-a-in 0.55s var(--ux-spring-soft) both; }
@keyframes ux-a-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* quiz feedback */
@keyframes ux-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes ux-shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.ux-motion .quiz-btn.ux-ok { animation: ux-pop 0.6s var(--ux-spring); }
.ux-motion .quiz-btn.ux-bad { animation: ux-shake 0.45s ease-out; }
.ux-motion .quiz-feedback:not(:empty) { animation: ux-a-in 0.5s var(--ux-spring-soft) both; }

/* ── 5. UX chrome ──────────────────────────────────────────────────────── */
.ux-meta { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.ux-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em;
    background: linear-gradient(155deg, var(--ux-glass-hi), transparent 60%), rgba(var(--ink-rgb), 0.03);
    border: 1px solid var(--ux-edge-lo); box-shadow: inset 0 1px 0 var(--ux-edge);
}
@media (max-width: 768px) { .ux-meta { justify-content: flex-start; } }

/* The dock: the theme switch is always there, bottom right; back-to-top stacks above it once the first screen is behind. */
.ux-dock {
    position: fixed; z-index: 70; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    pointer-events: none;
}
.ux-dock > * { pointer-events: auto; }
.ux-top, .ux-theme {
    position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    color: var(--text-1); cursor: pointer; padding: 0;
}
.ux-top {
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.85);
    transition: opacity 0.3s, transform 0.5s var(--ux-spring), visibility 0s 0.3s;
}
.ux-top svg { width: 18px; height: 18px; }
.ux-top.ux-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ux-top:hover { transform: scale(1.08); }
.ux-top:active { transform: scale(0.92); }
.ux-top:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }

/* Theme switch. Shows the theme you are in (moon on dark, sun on light), exactly as the tools pages do; its label says what
   a press does. Both glyphs are in the markup and cross-fade, so there is no script-driven icon swap. */
.ux-theme svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity 0.24s, transform 0.4s var(--ux-out); }
.ux-theme .i-sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
.ux-theme .i-moon { opacity: 1; }
:root[data-theme="light"] .ux-theme .i-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .ux-theme .i-moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.ux-theme:hover { transform: scale(1.08); }
.ux-theme:active { transform: scale(0.92); }
.ux-theme:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }
.ux-theme { transition: transform 0.5s var(--ux-spring), box-shadow 0.3s, background-color 0.3s; }

.ux-next {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    max-width: 1300px; margin: 0 auto; padding: 0 20px 70px;
}
.ux-next a {
    display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-radius: var(--ux-radius);
    text-decoration: none; color: var(--text-1); min-width: 0;
    background: linear-gradient(155deg, var(--ux-glass-hi), transparent 50%), var(--ux-card);
    border: 1px solid var(--ux-edge-lo); box-shadow: inset 0 1px 0 var(--ux-edge);
}
.ux-next a:only-child { grid-column: 1 / -1; }
.ux-next a[rel="next"] { text-align: right; grid-column: 2; }
.ux-next small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sahi-cyan); }
.ux-next strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .ux-next a:hover { transform: translateY(-3px) scale(1.01); border-color: var(--border-glow); } }
.ux-next a:active { transform: scale(0.98); }
.ux-next a:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; }
@media (max-width: 768px) {
    .ux-next { grid-template-columns: minmax(0, 1fr); padding: 0 16px 56px; }
    .ux-next a[rel="next"] { grid-column: auto; }
    .ux-dock { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ── 6. robustness ─────────────────────────────────────────────────────── */
html, body { max-width: 100%; }
.content-main { min-width: 0; }
.content-main img, .content-main svg { max-width: 100%; }

/* ── 5b. contents navigation: violet glow ─────────────────────────────────────────────────────────────────────────
   One glow colour for the whole panel (desktop card, phone pill, Contents sheet), kept subtle: a lit edge and a soft shadow, never a
   fill behind text. The progress bar runs from the glow colour to the highlight. */
:root { --toc-glow: 150, 70, 220; --toc-glow-a: 0.16; }
:root[data-theme="light"] { --toc-glow: 130, 50, 200; --toc-glow-a: 0.1; }
.toc-bar > i { background: linear-gradient(90deg, rgb(var(--toc-glow)), var(--toc-hi)); box-shadow: 0 0 8px rgba(var(--toc-glow), 0.45); }
@media (min-width: 769px) {
    .toc-container {
        border: 1px solid rgba(var(--toc-glow), 0.2);
        background: linear-gradient(160deg, rgba(var(--toc-glow), 0.09), transparent 40%), var(--card-big);
        box-shadow: 0 0 0 1px rgba(var(--toc-glow), 0.05), 0 12px 36px rgba(var(--toc-glow), var(--toc-glow-a)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}
@media (max-width: 768px) {
    .ux-sheet-btn {
        border-color: rgba(var(--toc-glow), 0.4);
        box-shadow: var(--ux-shadow), 0 0 18px rgba(var(--toc-glow), 0.26), inset 0 1px 0 var(--ux-edge);
    }
    .ux-sheet {
        border: 1px solid var(--border-soft);
        box-shadow: var(--ux-shadow);
    }
    .ux-sheet-grab { background: rgba(var(--ink-rgb), 0.28); }
}
@media (prefers-contrast: more) { .toc-container, .ux-sheet, .ux-sheet-btn { box-shadow: none; } }

@media (prefers-reduced-motion: reduce) {
    .ux-r, .ux-draw, .ux-grow-x, .ux-grow-y, .ux-sheet, .ux-top, .ux-theme, .ux-theme svg, .ux-anchor, .toc-bar > i, .toc-num, .toc-filter,
    .toc-nav a, .ux-sheet-btn, .ux-scrim, .section-block > h2::after,
    .guide-card, .feature-card, .sc, .trading-example, figure.ocv-real, .iv-block, .guide-table-wrap { transition: none !important; animation: none !important; }
    .ux-r, .ux-grow-x, .ux-grow-y { opacity: 1 !important; transform: none !important; }
    .section-block > h2.ux-h2u::after { transform: none !important; }
    .ux-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .guide-card:hover, .feature-card:hover, figure.ocv-real:hover, .iv-block:hover { transform: none !important; }
}
/* data-motion="off" on <html> is the escape hatch: the same result as prefers-reduced-motion, chosen by the page or an embedder.
   On one element it freezes just that block (and what is inside it); [data-static] does the same and is what a figure that
   must stay exactly as drawn (a sketch, a replica) carries. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after,
[data-motion="off"] *, [data-motion="off"], [data-static] *, [data-static] { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] [data-aos], html[data-motion="off"] .ux-r, [data-motion="off"] .ux-r, [data-static] .ux-r, [data-static].ux-r, [data-static] [data-aos] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .ux-draw, html[data-motion="off"] .ux-grow-x, html[data-motion="off"] .ux-grow-y,
[data-static] .ux-draw, [data-static] .ux-grow-x, [data-static] .ux-grow-y { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; }
html[data-motion="off"] .section-block > h2::after { transform: none !important; }
@media (prefers-contrast: more) {
    :root, :root[data-theme="light"] { --ux-glass: rgb(var(--bg-rgb)); --ux-edge: rgba(var(--ink-rgb), 0.7); --ux-edge-lo: rgba(var(--ink-rgb), 0.5); }
    .ux-glass, .toc-container, .ux-sheet, .ux-chip, .ux-next a {
        -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sahi-bg-0);
    }
    .toc-bar > i { background: var(--text-1); }
    .toc-panel .toc-nav a { color: var(--text-1); }
    .toc-panel .toc-nav a.active { outline: 2px solid var(--text-1); outline-offset: -2px; }
}
@media (forced-colors: active) {
    .ux-progress > i { background: Highlight; }
    .toc-bar > i { background: Highlight; }
    .toc-panel .toc-nav a.active { outline: 2px solid Highlight; outline-offset: -2px; }
    .toc-num { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .toc-panel .toc-nav a.active .toc-num, .ux-sheet-btn__num { background: Highlight; color: HighlightText; border-color: Highlight; }
    .toc-container, .ux-sheet, .ux-sheet-btn { border: 1px solid CanvasText; }
}
@media print {
    .ux-progress, .ux-dock, .ux-sheet-btn, .ux-sheet, .ux-scrim, .ux-anchor, .ux-next, .toc-container { display: none !important; }
    .ux-r, .ux-grow-x, .ux-grow-y { opacity: 1 !important; transform: none !important; }
    .ux-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .layout-wrapper { display: block; }
}
/* A figure bar that holds a button must be full size when the button takes focus, before the reveal has run. */
.ux-motion .ux-grow-x:focus-within:not(.ux-in) { transform: none; transition: none; }
/* Keyboard focus on the explore chips and the footer links, which sit outside .content-main. */
#explore a:focus-visible, #more-guides a:focus-visible, .sahi-foot a:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 2px; }

@media (min-width: 1921px) { .ux-next { max-width: 1700px; } }
@media (min-width: 2560px) { .ux-next { max-width: 2100px; } }

/* ── 5c. contents navigation: purple-forward ──────────────────────────────────
   The panel was violet only in its glow; the live highlight stayed mint, which
   fought the purple chrome and read as a second brand. Highlight, progress,
   focus ring and the panel's left spine are one soft lavender now, and the
   panel carries more of the tint. Values are deliberately desaturated so the
   active row is easy to find without glowing. */
:root { --toc-lav: #FEA3E5; --toc-lav-ink: #15020B; --toc-glow: 254, 163, 229; --toc-glow-a: 0.2; }
:root[data-theme="light"] { --toc-lav: #A50F66; --toc-lav-ink: #FFFFFF; --toc-glow: 165, 15, 102; --toc-glow-a: 0.12; }
.toc-panel { --toc-hi: var(--toc-lav); --toc-on-hi: var(--toc-lav-ink); }
.toc-bar > i { background: linear-gradient(90deg, rgb(var(--toc-glow)), var(--toc-lav)); box-shadow: 0 0 6px rgba(var(--toc-glow), 0.35); }
.toc-panel .toc-nav a.toc-link.active {
    border-color: color-mix(in srgb, var(--toc-lav) 45%, transparent);
    background: color-mix(in srgb, var(--toc-lav) 14%, transparent);
    box-shadow: none;
}
.toc-panel .toc-nav a.toc-link.active .toc-num { box-shadow: none; }
.toc-panel .toc-nav a.toc-link:focus-visible,
.toc-close:focus-visible { outline-color: var(--toc-lav); }
.toc-filter:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--toc-lav) 70%, transparent); }
@media (min-width: 769px) {
    .toc-container {
        /* a plain card like the navbar: one hairline edge, no left spine, no tinted fill */
        border: 1px solid var(--border-soft);
        background: var(--card-big);
        box-shadow: 0 12px 32px -18px rgba(var(--shade-ch), 0.35);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}
.ux-progress > i { background: linear-gradient(90deg, rgb(var(--toc-glow)), var(--toc-lav)); box-shadow: 0 0 8px rgba(var(--toc-glow), 0.45); }

/* ── 5d. one soft edge everywhere ─────────────────────────────────────────────────────────────────────────────────
   No card, callout, example or list item carries a thick edge on one side: every box has the same 1px hairline all round and its
   own radius. The accent lives in the tinted fill and the badge, never in a bar on the left. Written after, and with more
   specificity than, each guide's own sheet (which loads later) so no page can bring the bar back. */
html body .content-main .gxg-ask,
html body .content-main .gxg-calc,
html body .content-main .gxg-check,
html body .content-main .gxg-ex,
html body .content-main .gxg-first5,
html body .content-main .gxg-formula,
html body .content-main .gxg-look,
html body .content-main .gxg-risklist > li,
html body .content-main .gxg-why,
html body .content-main .hmg-ask,
html body .content-main .hmg-look,
html body .content-main .hmg-trap,
html body .content-main .ivg-ask,
html body .content-main .ivg-calc,
html body .content-main .ivg-check,
html body .content-main .ivg-ex,
html body .content-main .ivg-first5,
html body .content-main .ivg-look,
html body .content-main .ivg-risklist > li,
html body .content-main .ivg-why,
html body .content-main .mpg-ask,
html body .content-main .mpg-formula,
html body .content-main .mpg-look,
html body .content-main .mpg-trap,
html body .content-main .oca1-formula,
html body .content-main .ocb1-calc,
html body .content-main .ocb2-calc,
html body .content-main .occ2-calc,
html body .content-main .occ2-ex,
html body .content-main .occ2-formula,
html body .content-main .ocd2-calc,
html body .content-main .oce1-calc,
html body .content-main .oig-ask,
html body .content-main .oig-formula,
html body .content-main .oig-look,
html body .content-main .osg-ask,
html body .content-main .osg-look,
html body .content-main .osp-ask,
html body .content-main .osp-check,
html body .content-main .osp-ex,
html body .content-main .osp-first5,
html body .content-main .osp-risklist > li,
html body .content-main .osp-why,
html body .content-main .pcg-ask,
html body .content-main .pcg-calc,
html body .content-main .pcg-check,
html body .content-main .pcg-ex,
html body .content-main .pcg-first5,
html body .content-main .pcg-look,
html body .content-main .pcg-risklist > li,
html body .content-main .pcg-why,
html body .content-main .sbg-ask,
html body .content-main .sbg-check,
html body .content-main .sbg-ex,
html body .content-main .sbg-first5,
html body .content-main .sbg-look,
html body .content-main .sbg-risklist > li,
html body .content-main .sbg-why,
html body .content-main .stg-ask,
html body .content-main .stg-calc,
html body .content-main .stg-check,
html body .content-main .stg-ex,
html body .content-main .stg-first5,
html body .content-main .stg-look,
html body .content-main .stg-risklist > li,
html body .content-main .stg-trap,
html body .content-main .stg-why,
html body .content-main .tcg-ask,
html body .content-main .tcg-calc,
html body .content-main .tcg-check,
html body .content-main .tcg-ex,
html body .content-main .tcg-first5,
html body .content-main .tcg-look,
html body .content-main .tcg-risklist > li,
html body .content-main .tcg-why,
html body .content-main .callout-beginner {
    border: 1px solid var(--border-soft);
    border-left: 1px solid var(--border-soft);
}
html body .content-main .guide-table tbody tr:hover td:first-child,
html body .content-main .guide-table tr[class*="-low"] td:first-child { box-shadow: none; }

/* ── 5e. contents panel finish: filter box, rows, progress ────────────────────────────────────────────────────────
   The filter is a pill like the navbar's controls: hairline edge, calm fill, a 44px target, a soft ring on focus. Rows keep a
   1px outline when current (no bar), and the progress track is thin and rounded. */
html body .toc-panel .toc-filter {
    height: 44px; margin: 0 0 14px; padding: 0 12px 0 14px; gap: 10px;
    border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(var(--ink-rgb), 0.04);
    box-shadow: none;
}
html body .toc-panel .toc-filter:hover { background: rgba(var(--ink-rgb), 0.07); }
html body .toc-panel .toc-filter:focus-within {
    background: var(--card-big); border-color: color-mix(in srgb, var(--toc-lav) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--toc-lav) 22%, transparent);
}
html body .toc-panel .toc-filter kbd { border-radius: 999px; padding: 2px 8px; }
html body .toc-panel .toc-nav a.toc-link { border-radius: 999px; }
html body .toc-panel .toc-nav a.toc-link.active {
    border: 1px solid color-mix(in srgb, var(--toc-lav) 40%, transparent);
    background: color-mix(in srgb, var(--toc-lav) 12%, transparent); box-shadow: none;
}
html body .toc-panel .toc-bar { height: 3px; }