/* Java tutorial — independent design system (amber/espresso theme). Not derived from the Python tutorial's styles. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
    --bg: #fbf4e8;
    --surface: #fffcf6;
    --surface-2: #f3e8d6;
    --border: #e5d4b6;
    --text: #241a11;
    --text-dim: #6b5a45;
    --amber: #b4680a;
    --amber-strong: #8f5108;
    --teal: #0f7d72;
    --red: #c23b3b;
    --code-bg: #17120c;
    --code-text: #f4ecdd;
    --code-border: #3a2c1c;
    --shadow: 0 18px 40px rgba(45, 30, 10, .14);
    --radius: 10px;
    --sidebar-w: 236px;
    --bar-h: 48px;
    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #140f0a;
        --surface: #1c150e;
        --surface-2: #251b12;
        --border: #3a2c1c;
        --text: #f3ead9;
        --text-dim: #b9a688;
        --amber: #ffb454;
        --amber-strong: #ffcb7d;
        --teal: #57e0cf;
        --red: #ff8383;
        --code-bg: #100c08;
        --code-text: #f4ecdd;
        --code-border: #3a2c1c;
        --shadow: 0 18px 44px rgba(0, 0, 0, .5);
    }
}
:root[data-theme="midnight"], :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #140f0a;
    --surface: #1c150e;
    --surface-2: #251b12;
    --border: #3a2c1c;
    --text: #f3ead9;
    --text-dim: #b9a688;
    --amber: #ffb454;
    --amber-strong: #ffcb7d;
    --teal: #57e0cf;
    --red: #ff8383;
    --code-bg: #100c08;
    --code-text: #f4ecdd;
    --code-border: #3a2c1c;
    --shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
:root[data-theme="paper"], :root[data-theme="light"] { color-scheme: light; }
:root[data-theme="white"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f7fb;
    --border: #d7dee8;
    --text: #111827;
    --text-dim: #5f6b7a;
    --amber: #2563eb;
    --amber-strong: #1d4ed8;
    --teal: #0891b2;
    --red: #c9364f;
    --code-bg: #07101c;
    --code-text: #f5f8ff;
    --code-border: #24364d;
    --shadow: 0 16px 38px rgba(30, 64, 175, .10);
}
:root[data-theme="ocean"] {
    color-scheme: dark;
    --bg: #06151f;
    --surface: #0b202c;
    --surface-2: #112c3a;
    --border: #264958;
    --text: #e9f8fb;
    --text-dim: #9abac3;
    --amber: #38d6bd;
    --amber-strong: #82f0dc;
    --teal: #77b8ff;
    --red: #ff8798;
    --code-bg: #020b11;
    --code-text: #f1fbff;
    --code-border: #1e4352;
    --shadow: 0 18px 46px rgba(0, 8, 14, .58);
}
:root[data-theme="forest"] {
    color-scheme: dark;
    --bg: #091610;
    --surface: #10231a;
    --surface-2: #193226;
    --border: #31513e;
    --text: #edf9ef;
    --text-dim: #a5c0ad;
    --amber: #a8df72;
    --amber-strong: #d2f5aa;
    --teal: #55d7bd;
    --red: #ff8e91;
    --code-bg: #050d08;
    --code-text: #f1fbf2;
    --code-border: #294634;
    --shadow: 0 18px 46px rgba(1, 11, 5, .58);
}
:root[data-theme="aurora"] {
    color-scheme: dark;
    --bg: #150d20;
    --surface: #20132f;
    --surface-2: #2d1c3e;
    --border: #4c3561;
    --text: #f8efff;
    --text-dim: #c2a9d0;
    --amber: #ff8fca;
    --amber-strong: #ffc0e2;
    --teal: #73e6da;
    --red: #ff8699;
    --code-bg: #0b0611;
    --code-text: #fff4ff;
    --code-border: #432c55;
    --shadow: 0 18px 48px rgba(5, 0, 12, .62);
}
:root[data-theme="sunset"] {
    color-scheme: light;
    --bg: #fff5ed;
    --surface: #fffdfb;
    --surface-2: #ffe6d5;
    --border: #f2c4a8;
    --text: #3b1b13;
    --text-dim: #80594d;
    --amber: #e4572e;
    --amber-strong: #bd3519;
    --teal: #087e8b;
    --red: #c73352;
    --code-bg: #1b0d0a;
    --code-text: #fff6ee;
    --code-border: #573026;
    --shadow: 0 18px 42px rgba(156, 64, 27, .15);
}
:root[data-theme="lavender"] {
    color-scheme: light;
    --bg: #f8f5ff;
    --surface: #fffefe;
    --surface-2: #eee8ff;
    --border: #d8cff3;
    --text: #211a35;
    --text-dim: #6c617f;
    --amber: #7657d7;
    --amber-strong: #5c3fba;
    --teal: #168c91;
    --red: #c13d67;
    --code-bg: #100c1d;
    --code-text: #faf7ff;
    --code-border: #3e315e;
    --shadow: 0 18px 42px rgba(78, 56, 142, .14);
}
:root[data-theme="cyber"] {
    color-scheme: dark;
    --bg: #050816;
    --surface: #0b1024;
    --surface-2: #111a34;
    --border: #263860;
    --text: #eff5ff;
    --text-dim: #9aaccc;
    --amber: #00e5ff;
    --amber-strong: #79f2ff;
    --teal: #ff55cf;
    --red: #ff6b8a;
    --code-bg: #01030b;
    --code-text: #f4fbff;
    --code-border: #1e3b66;
    --shadow: 0 18px 50px rgba(0, 4, 18, .68);
}
:root[data-theme="slate"] {
    color-scheme: dark;
    --bg: #101720;
    --surface: #17212d;
    --surface-2: #202d3c;
    --border: #35485b;
    --text: #edf3f8;
    --text-dim: #a6b5c4;
    --amber: #65b7ff;
    --amber-strong: #9bd2ff;
    --teal: #62d6c4;
    --red: #ff8797;
    --code-bg: #080d13;
    --code-text: #f5f9fc;
    --code-border: #304256;
    --shadow: 0 18px 46px rgba(0, 5, 10, .52);
}
:root[data-theme="rose"] {
    color-scheme: light;
    --bg: #fff5f7;
    --surface: #fffefe;
    --surface-2: #ffe7ed;
    --border: #efc5d0;
    --text: #341b24;
    --text-dim: #7b5a65;
    --amber: #d9406f;
    --amber-strong: #b82854;
    --teal: #0f8f86;
    --red: #c42e46;
    --code-bg: #190a10;
    --code-text: #fff6f9;
    --code-border: #552535;
    --shadow: 0 18px 42px rgba(151, 44, 78, .14);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 1.4em 0 .5em; }
a { color: inherit; }
.jv-skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: #17120c; padding: 8px 14px; border-radius: 0 0 8px 0; z-index: 999; }
.jv-skip:focus { left: 0; }

/* ---------- Scrollbars — thin, rounded, themed to match the amber accent ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--amber) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--amber);
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--amber-strong); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Topbar ---------- */
.jv-bar {
    position: sticky; top: 0; z-index: 200; height: var(--bar-h);
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.jv-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.jv-icon-btn svg { width: 16px; height: 16px; }
.jv-theme-picker { position: relative; flex: none; }
.jv-theme-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.jv-theme-menu {
    position: absolute; z-index: 320; top: calc(100% + 9px); right: 0; width: min(270px, calc(100vw - 16px)); max-height: calc(100vh - 64px); overflow-y: auto; padding: 7px;
    border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border)); border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px);
    transform-origin: top right; animation: jv-theme-menu-in .16s ease-out;
}
.jv-theme-menu > p { display: grid; gap: 1px; margin: 0 0 5px; padding: 6px 7px 8px; border-bottom: 1px solid var(--border); }
.jv-theme-menu > p strong { font: 750 12px/1.2 var(--font-display); }
.jv-theme-menu > p span { color: var(--text-dim); font-size: 9px; }
.jv-theme-menu > button { display: grid; grid-template-columns: 39px minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.jv-theme-menu > button:hover, .jv-theme-menu > button[aria-checked="true"] { border-color: color-mix(in srgb, var(--amber) 34%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface-2)); }
.jv-theme-menu > button > span { display: grid; min-width: 0; }
.jv-theme-menu > button strong { font: 700 11px/1.2 var(--font-display); }
.jv-theme-menu > button small { margin-top: 2px; color: var(--text-dim); font-size: 8.5px; }
.jv-theme-menu > button b { visibility: hidden; color: var(--amber); font-size: 13px; }
.jv-theme-menu > button[aria-checked="true"] b { visibility: visible; }
.jv-theme-swatch { display: flex; align-items: flex-end; gap: 2px; width: 38px; height: 27px; padding: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: var(--sw-bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.jv-theme-swatch span { width: 8px; border-radius: 2px; background: var(--sw-accent); }
.jv-theme-swatch span:nth-child(1) { height: 8px; opacity: .62; }.jv-theme-swatch span:nth-child(2) { height: 14px; }.jv-theme-swatch span:nth-child(3) { height: 10px; opacity: .8; }
.jv-theme-swatch.is-midnight { --sw-bg: #140f0a; --sw-accent: #ffb454; }.jv-theme-swatch.is-paper { --sw-bg: #fffaf1; --sw-accent: #b4680a; }.jv-theme-swatch.is-white { --sw-bg: #fff; --sw-accent: #2563eb; border-color: #cbd5e1; }.jv-theme-swatch.is-ocean { --sw-bg: #06151f; --sw-accent: #38d6bd; }.jv-theme-swatch.is-forest { --sw-bg: #091610; --sw-accent: #a8df72; }.jv-theme-swatch.is-aurora { --sw-bg: #150d20; --sw-accent: #ff8fca; }.jv-theme-swatch.is-sunset { --sw-bg: #fff5ed; --sw-accent: #e4572e; }.jv-theme-swatch.is-lavender { --sw-bg: #f8f5ff; --sw-accent: #7657d7; }.jv-theme-swatch.is-cyber { --sw-bg: #050816; --sw-accent: #00e5ff; }.jv-theme-swatch.is-slate { --sw-bg: #101720; --sw-accent: #65b7ff; }.jv-theme-swatch.is-rose { --sw-bg: #fff5f7; --sw-accent: #d9406f; }
@keyframes jv-theme-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.jv-menu-toggle { display: none; flex-direction: column; gap: 3px; }
.jv-menu-toggle span { width: 14px; height: 2px; background: var(--text); border-radius: 2px; }
.jv-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: none; }
.jv-brand-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg, var(--amber), var(--amber-strong)); font-size: 15px; box-shadow: 0 4px 10px rgba(180, 104, 10, .35); }
.jv-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.jv-brand-copy strong { font-family: var(--font-display); font-size: 12.5px; }
.jv-brand-copy small { font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.jv-crumb { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: none; }
@media (min-width: 720px) { .jv-crumb { display: block; } }

.jv-jump { position: relative; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.jv-jump-toggle { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 12px; cursor: pointer; max-width: 260px; width: 100%; justify-content: center; }
.jv-jump-toggle svg { width: 13px; height: 13px; }
.jv-jump-toggle:hover, .jv-jump-toggle[aria-expanded="true"] { color: var(--amber); border-color: var(--amber); }
.jv-jump-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(360px, 88vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; z-index: 250; }
.jv-jump-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.jv-jump-search input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.jv-jump-search kbd { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.jv-jump-options { max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; }
.jv-jump-option { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font-size: 12.5px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.jv-jump-option:hover, .jv-jump-option.is-active { background: var(--surface-2); }
.jv-jump-option span { font-size: 9.5px; color: var(--amber); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex: none; }
.jv-jump-empty { padding: 10px; font-size: 12px; color: var(--text-dim); }

.jv-navbar-interview-btn {
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; flex: none; white-space: nowrap;
    border-radius: 999px; border: 1px solid #ffe2a0; cursor: pointer; font: 11.5px/1 var(--font-body); font-weight: 850;
    background: linear-gradient(125deg, #ffd166 0%, #ffb23f 48%, #ff8f1f 100%); color: #211304;
    box-shadow: 0 0 0 2px rgba(255, 178, 63, .22), 0 5px 18px rgba(255, 143, 31, .42);
    text-shadow: 0 1px rgba(255, 255, 255, .3);
    animation: jv-heartbeat 1.9s ease-in-out infinite;
}
.jv-navbar-interview-btn::before {
    content: ''; position: absolute; z-index: -1; inset: -5px; border: 2px solid rgba(255, 178, 63, .78); border-radius: inherit;
    pointer-events: none; animation: jv-interview-ring 1.9s ease-out infinite;
}
.jv-navbar-interview-btn:hover, .jv-navbar-interview-btn:focus-visible { filter: brightness(1.1) saturate(1.08); box-shadow: 0 0 0 3px rgba(255, 209, 102, .3), 0 7px 24px rgba(255, 143, 31, .58); }
.jv-navbar-interview-btn.jv-heartbeat-stopped { animation: none; box-shadow: 0 3px 10px rgba(255, 143, 31, .25); }
.jv-navbar-interview-btn.jv-heartbeat-stopped::before { animation: none; opacity: 0; }
.jv-navbar-interview-btn svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 780px) { .jv-navbar-interview-btn span { display: none; } .jv-navbar-interview-btn { width: 30px; padding: 0; justify-content: center; } }
@keyframes jv-heartbeat {
    0%, 30%, 58%, 100% { transform: scale(1); }
    12% { transform: scale(1.09); box-shadow: 0 0 0 3px rgba(255, 209, 102, .34), 0 7px 26px rgba(255, 143, 31, .66); }
    42% { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(255, 209, 102, .28), 0 6px 21px rgba(255, 143, 31, .52); }
}
@keyframes jv-interview-ring {
    0% { opacity: .9; transform: scale(.94); }
    62%, 100% { opacity: 0; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .jv-navbar-interview-btn, .jv-navbar-interview-btn::before { animation: none; } }

.jv-progress-ring { position: relative; width: 30px; height: 30px; flex: none; display: none; align-items: center; justify-content: center; }
@media (min-width: 560px) { .jv-progress-ring { display: flex; } }
.jv-progress-ring svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.jv-ring-track { fill: none; stroke: var(--border); stroke-width: 3; }
.jv-ring-fill { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .15s linear; }
.jv-progress-ring span { position: absolute; font-size: 7.5px; color: var(--text-dim); }

/* ---------- Layout grid ---------- */
.jv-grid { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--bar-h)); }
.jv-sidebar { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface); padding: 14px 10px; scrollbar-width: thin; }
.jv-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.jv-sidebar-close { display: none; background: transparent; border: 0; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.jv-eyebrow { margin: 0 0 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--amber); font-weight: 700; }

.jv-stepper { list-style: none; margin: 0; padding: 0; position: relative; }
.jv-stepper li { position: relative; margin-bottom: 2px; }
.jv-stepper li::before { content: ''; position: absolute; left: 17px; top: 34px; bottom: -2px; width: 1px; background: var(--border); }
.jv-stepper li:last-child::before { display: none; }
.jv-stepper a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; text-decoration: none; color: var(--text); }
.jv-stepper a:hover { background: var(--surface-2); }
.jv-stepper li.is-current a { background: var(--surface-2); }
.jv-step-node { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); z-index: 1; }
.jv-stepper li.is-current .jv-step-node { background: var(--amber); border-color: var(--amber); color: #201404; }
.jv-stepper li.is-locked a { cursor: not-allowed; }
.jv-stepper li.is-locked .jv-step-node { font-size: 11px; opacity: .55; }
.jv-stepper li.is-locked strong, .jv-stepper li.is-locked small { opacity: .5; }
.jv-step-copy { display: flex; flex-direction: column; min-width: 0; }
.jv-step-copy strong { font-size: 12.5px; line-height: 1.3; }
.jv-step-copy small { font-size: 10px; color: var(--text-dim); }

.jv-scrim { position: fixed; inset: 0; background: rgba(10, 7, 4, .5); border: 0; z-index: 190; display: none; }

/* ---------- Main / hero ---------- */
.jv-main { min-width: 0; padding: 20px clamp(14px, 3vw, 34px) 60px; }
.jv-hero { max-width: 880px; margin: 0 auto 22px; }
.jv-hero h1 { font-size: clamp(22px, 3.6vw, 30px); margin: 0 0 8px; }
.jv-hero-desc { color: var(--text-dim); margin: 0 0 14px; max-width: 68ch; }
.jv-hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.jv-hero-stats li { display: flex; align-items: baseline; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; color: var(--text-dim); }
.jv-hero-stats strong { font-family: var(--font-display); color: var(--amber); font-size: 13px; }

/* ---------- Lesson typography ---------- */
.jv-lesson { max-width: 880px; margin: 0 auto; }
.cx-section { padding: 6px 0 10px; }
/* Jump-to navigation and browser anchor links scroll targets to the viewport
   top, which the sticky topbar would otherwise cover — scroll-margin-top
   reserves that space so the heading lands fully visible below the bar. */
.cx-section h1, .cx-section h2, .cx-section h3, #practice-lab { scroll-margin-top: calc(var(--bar-h) + 14px); }
.cx-section h1, .cx-section .cx-topic-title { font-size: clamp(19px, 2.6vw, 24px); padding-left: 12px; border-left: 3px solid var(--amber); }
.cx-section h2 { font-size: 17px; padding-left: 10px; border-left: 3px solid var(--border); }
.cx-section h3 { font-size: 15px; color: var(--amber-strong); }
.cx-anchor { margin-left: 6px; opacity: 0; font-size: .8em; color: var(--text-dim); text-decoration: none; }
h1:hover .cx-anchor, h2:hover .cx-anchor, h3:hover .cx-anchor { opacity: 1; }
.jv-lesson p { margin: .7em 0; color: var(--text); }
.jv-lesson ul, .jv-lesson ol { padding-left: 1.3em; margin: .6em 0; }
.jv-lesson li { margin: .25em 0; }
.jv-lesson blockquote { margin: .8em 0; padding: 8px 14px; border-left: 3px solid var(--teal); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--text-dim); }
.jv-lesson hr { border: 0; border-top: 1px dashed var(--border); margin: 1.6em 0; }
.inline-code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: .06em .38em; color: var(--amber-strong); font-variant-ligatures: none; -webkit-font-feature-settings: "liga" 0, "calt" 0; font-feature-settings: "liga" 0, "calt" 0; }
.cx-table { overflow-x: auto; margin: .9em 0; border: 1px solid var(--border); border-radius: 9px; }
.cx-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cx-table th, .cx-table td { padding: 8px 11px; border-bottom: 1px solid var(--border); text-align: left; white-space: normal; }
.cx-table th { background: var(--surface-2); font-family: var(--font-display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.cx-table tr:last-child td { border-bottom: 0; }

/* ---------- Code blocks ---------- */
/* JetBrains Mono ships programming ligatures (>=, !=, <=, -> render as one
   merged glyph). This course teaches exact Java syntax, so every monospace
   surface must show the literal characters instead. */
code, pre, kbd { font-variant-ligatures: none; -webkit-font-feature-settings: "liga" 0, "calt" 0; font-feature-settings: "liga" 0, "calt" 0; }
.cx-block { position: relative; margin: 1em 0; border-radius: 10px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-border); box-shadow: 0 14px 32px rgba(0,0,0,.25); }
.cx-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #0d0a06; border-bottom: 1px solid var(--code-border); }
.cx-dots { display: flex; gap: 5px; }
.cx-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.cx-dots i:nth-child(1) { background: #ff6159; }
.cx-dots i:nth-child(2) { background: #ffbd2e; }
.cx-dots i:nth-child(3) { background: #29c941; }
.cx-lang { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #ffcb7d; background: rgba(255, 180, 84, .12); border: 1px solid rgba(255,180,84,.28); border-radius: 5px; padding: 2px 7px; }
.cx-actions { margin-left: auto; display: flex; gap: 6px; }
.cx-btn { height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--code-border); background: #17120c; color: #d8cbb4; font-size: 10.5px; cursor: pointer; }
.cx-btn:hover { border-color: var(--amber); color: var(--amber); }
.cx-block pre { margin: 0; padding: 13px 15px; overflow: auto; max-height: 520px; tab-size: 4; transition: background-color .18s ease, filter .18s ease, box-shadow .18s ease; }
.cx-block code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--code-text); font-variant-ligatures: none; -webkit-font-feature-settings: "liga" 0, "calt" 0; font-feature-settings: "liga" 0, "calt" 0; }
.cx-block.is-copied { border-color: #ffbd2e; animation: cx-copy-pulse 1.4s ease-out; }
.cx-block.is-copied .cx-bar { background: #241704; }
.cx-block.is-copied pre {
    background: rgba(255, 189, 46, .15);
    box-shadow: inset 4px 0 #ffbd2e;
    filter: brightness(1.22) saturate(1.16);
    animation: cx-code-highlight 1.4s ease-out;
}
.cx-block.is-copied .cx-copy {
    background: #ffbd2e;
    border-color: #ffe3a0;
    color: #201404;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(255, 189, 46, .55);
}
@keyframes cx-copy-pulse {
    0%, 35% { box-shadow: 0 0 0 3px rgba(255, 189, 46, .62), 0 0 34px rgba(255, 189, 46, .28); }
    100% { box-shadow: 0 14px 32px rgba(0,0,0,.25); }
}
@keyframes cx-code-highlight {
    0%, 38% { background: rgba(255, 189, 46, .24); filter: brightness(1.38) saturate(1.22); }
    100% { background: rgba(255, 189, 46, .04); filter: brightness(1) saturate(1); }
}
.cx-block:fullscreen, .cx-block:-webkit-full-screen, .cx-block.is-fullscreen { position: fixed; inset: 0; z-index: 400; margin: 0; border-radius: 0; background: var(--code-bg); color: var(--code-text); }
.cx-block:fullscreen pre, .cx-block:-webkit-full-screen pre, .cx-block.is-fullscreen pre { max-height: calc(100vh - 42px); height: calc(100vh - 42px); padding: clamp(16px, 3vw, 44px); }
.cx-block:fullscreen code, .cx-block:-webkit-full-screen code, .cx-block.is-fullscreen code { font-size: clamp(13px, 1.5vw, 18px); }
.cx-block:fullscreen::backdrop, .cx-block:-webkit-full-screen::backdrop { background: var(--code-bg); }
/* Java keyword syntax highlight tokens (JS-applied spans) */
.tok-keyword { color: #ff9f6b; font-weight: 600; }
.tok-type { color: #7fd6ff; }
.tok-string { color: #9ee493; }
.tok-comment { color: #7a6c56; font-style: italic; }
.tok-number { color: #ffd166; }
.tok-annotation { color: #d9a1ff; }
.tok-method { color: #85e0d1; }
.tok-not-equal { color: #ffd166; font-weight: 850; font-size: 1.08em; text-shadow: 0 0 12px rgba(255, 209, 102, .3); }

/* ---------- Practice lab ---------- */
.jv-lab { max-width: 880px; margin: 20px auto 0; padding-top: 14px; border-top: 1px dashed var(--border); position: relative; }
.jv-lab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.jv-lab-head h2 { margin: 0; font-size: 18px; }
.jv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.jv-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; font: inherit; }
.jv-chip strong { font-size: 11.5px; color: var(--text); font-family: var(--font-display); line-height: 1.3; }
.jv-chip small { font-size: 9px; line-height: 1.2; }
.jv-chip.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.jv-chip.is-active strong { color: var(--amber-strong); }
.jv-tool-stage { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 13px 14px; min-height: 160px; line-height: 1.5; }
.jv-tool-panel[hidden] { display: none; }
.jv-lab.is-fullscreen,
.jv-lab:fullscreen,
.jv-lab:-webkit-full-screen {
    position: fixed; inset: 0; z-index: 380; max-width: none; margin: 0;
    padding: 14px clamp(12px, 3vw, 40px) 20px; overflow-y: auto;
    background: var(--bg); color: var(--text); border-top: 0;
}
.jv-lab:fullscreen::backdrop, .jv-lab:-webkit-full-screen::backdrop { background: var(--bg); }

/* ---------- Generic tool components (rendered by JS) ---------- */
.jv-status-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.jv-track { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.jv-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--teal)); border-radius: 999px; transition: width .25s ease; }
.jv-q-id { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.jv-q-title { font-size: 14.5px; margin: 5px 0 9px; font-family: var(--font-display); line-height: 1.4; }
.jv-options { display: grid; gap: 6px; }
.jv-option { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--text); }
.jv-option:hover { border-color: var(--amber); }
.jv-option.is-selected { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface-2)); }
.jv-option.is-correct { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 16%, var(--surface-2)); }
.jv-option.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surface-2)); }
.jv-option[disabled] { cursor: default; }
.jv-completion-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; margin: 7px 0; }
.jv-completion-slot { min-width: 0; padding: 7px 10px; border: 1px dashed var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); color: var(--text); text-align: left; }
.jv-completion-slot small, .jv-completion-slot strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-completion-slot small { margin-bottom: 2px; color: var(--text-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.jv-completion-slot strong { font-family: var(--font-code); font-size: 12px; }
.jv-completion-slot.is-filled { border-style: solid; border-color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface-2)); cursor: pointer; }
.jv-completion-slot.is-correct { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, var(--surface-2)); }
.jv-completion-slot.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surface-2)); }
.jv-opt-key { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
.jv-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.jv-btn { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 12px/1 var(--font-body); font-weight: 600; cursor: pointer; }
.jv-btn:hover { border-color: var(--amber); }
.jv-btn-primary { background: linear-gradient(150deg, var(--amber), var(--amber-strong)); border-color: transparent; color: #201404; }
.jv-btn-ghost { background: transparent; }
.jv-btn[disabled] { opacity: .45; cursor: not-allowed; }
.jv-feedback { margin-top: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; line-height: 1.5; }
.jv-feedback.is-good { border-color: var(--teal); }
.jv-feedback.is-bad { border-color: var(--red); }
.jv-feedback strong { display: block; margin-bottom: 3px; font-family: var(--font-display); }
.jv-feedback.is-good strong { color: var(--teal); }
.jv-feedback.is-bad strong { color: var(--red); }
.jv-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 22px 10px; }

/* MCQ review card — question / your-answer / correct-answer / why, clearly separated */
.jv-review-card { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--border); background: var(--surface-2); }
.jv-review-card.is-correct { border-left-color: var(--teal); }
.jv-review-card.is-wrong { border-left-color: var(--red); }
.jv-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.jv-review-id { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.jv-review-status { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.jv-review-card.is-correct .jv-review-status { color: var(--teal); background: color-mix(in srgb, var(--teal) 18%, transparent); }
.jv-review-card.is-wrong .jv-review-status { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }
.jv-review-question { font-weight: 600; font-size: 13.5px; margin: 0 0 10px; color: var(--text); }
.jv-review-answers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.jv-review-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.jv-review-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.jv-review-row.is-correct .jv-review-icon { background: color-mix(in srgb, var(--teal) 24%, transparent); color: var(--teal); }
.jv-review-row.is-wrong .jv-review-icon { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
.jv-review-label { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); font-weight: 700; }
.jv-review-value { font-weight: 600; color: var(--text); }
.jv-review-row.is-wrong .jv-review-value { color: var(--red); }
.jv-review-row.is-correct .jv-review-value { color: var(--teal); }
.jv-review-explanation { margin: 0; padding: 9px 11px; border-radius: 8px; background: var(--surface); font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.jv-review-explanation strong { color: var(--amber-strong); }

/* Interview practice answer — one cohesive card with internally divided
   sections instead of several separate stacked boxes */
.jv-interview-answer { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--teal); background: var(--surface-2); display: flex; flex-direction: column; }
.jv-interview-block { padding: 9px 0; border-top: 1px dashed var(--border); }
.jv-interview-block:first-child { padding-top: 0; border-top: 0; }
.jv-interview-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.jv-interview-block.is-primary .jv-interview-label { color: var(--amber-strong); }
.jv-interview-block p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.jv-interview-block.is-primary p { font-weight: 600; }
.jv-knowledge-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; }
.jv-knowledge-summary { text-align: center; padding: 6px 10px 14px; }
.jv-knowledge-score {
    display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin: 0 auto 10px;
    border-radius: 50%; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--amber-strong);
    background: color-mix(in srgb, var(--amber) 16%, var(--surface-2)); border: 2px solid var(--amber);
}
.jv-knowledge-summary h3 { margin: 0 0 4px; }
.jv-knowledge-summary p { margin: 0; color: var(--text-dim); font-size: 12.5px; }

.jv-flashcard { width: 100%; max-width: 480px; height: clamp(160px, 38vw, 240px); margin: 0 auto; perspective: 1200px; border: 0; background: transparent; cursor: pointer; display: block; padding: 0; }
.jv-flashcard-inner { display: block; position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.jv-flashcard.is-flipped .jv-flashcard-inner { transform: rotateY(180deg); }
.jv-flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; gap: 8px; }
.jv-flashcard-face.front { background: var(--surface-2); }
.jv-flashcard-face.back { background: linear-gradient(155deg, color-mix(in srgb, var(--amber) 18%, var(--surface-2)), var(--surface-2)); transform: rotateY(180deg); }
.jv-flashcard-face small { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--text-dim); }
.jv-flashcard-face strong { font-family: var(--font-display); font-size: 15px; }
.jv-flashcard-face em { font-style: normal; font-size: 11px; color: var(--text-dim); }

.jv-match-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.jv-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) 24px; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); transition: border-color .15s ease, background-color .15s ease; }
.jv-match-row strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.jv-match-row.is-correct { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface-2)); }
.jv-match-row.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); }
.jv-match-row select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%; height: 30px; border-radius: 7px; border: 1px solid var(--border);
    background-color: var(--surface); color: var(--text); font: inherit; font-size: 12px;
    padding: 0 26px 0 9px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center; background-size: 12px;
    color-scheme: light dark;
}
.jv-match-row select:hover:not(:disabled) { border-color: var(--amber); }
.jv-match-row select:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.jv-match-row select:disabled { opacity: .8; cursor: default; }
.jv-match-result { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.jv-match-result.is-correct { background: color-mix(in srgb, var(--teal) 22%, transparent); color: var(--teal); }
.jv-match-result.is-wrong { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.jv-match-hint { margin: -1px 0 3px; padding: 0 10px; font-size: 11px; color: var(--text-dim); }
@media (max-width: 560px) {
    .jv-match-row { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "label result" "select select"; row-gap: 6px; }
    .jv-match-row strong { grid-area: label; }
    .jv-match-row select { grid-area: select; }
    .jv-match-result { grid-area: result; justify-self: end; }
}
.jv-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.jv-order-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; transition: border-color .15s ease, background-color .15s ease; }
.jv-order-row.is-correct { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface-2)); }
.jv-order-row.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); }
.jv-order-pos { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.jv-order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jv-order-move { flex: none; display: flex; gap: 4px; margin-left: auto; }
.jv-order-btn {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
    display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px; color: var(--text);
    cursor: pointer; padding: 0;
}
.jv-order-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.jv-order-btn:disabled { opacity: .35; cursor: not-allowed; }
.jv-order-result { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-left: auto; }
.jv-order-row.is-correct .jv-order-result { background: color-mix(in srgb, var(--teal) 22%, transparent); color: var(--teal); }
.jv-order-row.is-wrong .jv-order-result { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.jv-order-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.jv-order-trail-chip { padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; color: var(--text); }
.jv-order-trail-arrow { color: var(--amber); font-size: 13px; flex: none; }
.jv-progress-card { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.jv-progress-card strong { color: var(--amber); }

/* Code snippets rendered inside practice-lab tools stay compact — the lesson's own blocks keep full size */
.jv-tool-stage .cx-block { margin: 8px 0; }
.jv-tool-stage .cx-bar { padding: 5px 8px; }
.jv-tool-stage .cx-block pre { padding: 9px 11px; max-height: 280px; }
.jv-tool-stage .cx-block code { font-size: 11.5px; }

/* ---------- Variables and memory visual labs ---------- */
.jv-type-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.jv-type-tab { min-height: 29px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font: 700 11px/1.1 var(--font-mono); cursor: pointer; }
.jv-type-tab:hover, .jv-type-tab.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 10%, transparent); }
.jv-explorer-grid { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.jv-type-orb { display: grid; align-content: center; justify-items: center; min-height: 145px; padding: 14px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border)); border-radius: 14px; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--amber) 24%, transparent), transparent 58%), var(--surface-2); text-align: center; }
.jv-type-orb small, .jv-literal-display small { color: var(--text-dim); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jv-type-orb strong { margin: 6px 0; color: var(--amber); font: 800 27px/1 var(--font-display); }
.jv-type-orb span { color: var(--text-dim); font-size: 11px; }
.jv-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.jv-fact-grid div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.jv-fact-grid dt { color: var(--amber); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.jv-fact-grid dd { margin: 3px 0 0; color: var(--text); font-size: 11.5px; overflow-wrap: anywhere; }
.jv-literal-display { display: grid; justify-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 15%, transparent), transparent 65%), var(--surface-2); }
.jv-literal-display strong { margin: 7px 0; color: var(--teal); font: 800 clamp(30px, 7vw, 54px)/1 var(--font-mono); text-shadow: 0 0 24px color-mix(in srgb, var(--teal) 35%, transparent); }
.jv-literal-display span { color: var(--text-dim); font-size: 11px; }
.jv-literal-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.jv-literal-strip div { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.jv-literal-strip div.is-active { border-color: var(--teal); }
.jv-literal-strip span { color: var(--text-dim); font-size: 9px; text-transform: uppercase; }
.jv-literal-strip code { color: var(--amber); font: 750 14px/1.4 var(--font-mono); }
.jv-overflow-flow { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(110px, auto) auto minmax(120px, 1fr); gap: 8px; align-items: center; }
.jv-overflow-flow > div { display: grid; gap: 4px; min-height: 82px; align-content: center; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); text-align: center; }
.jv-overflow-flow small { color: var(--text-dim); font-size: 9px; text-transform: uppercase; }
.jv-overflow-flow strong { color: var(--text); font: 800 17px/1.2 var(--font-mono); }
.jv-overflow-flow .is-result { border-color: var(--teal); box-shadow: 0 0 24px color-mix(in srgb, var(--teal) 18%, transparent); }
.jv-overflow-action { min-height: 38px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber); color: #211507; font-weight: 850; cursor: pointer; }
.jv-flow-arrow { color: var(--amber); font: 800 17px/1 var(--font-mono); }
.jv-diagram { overflow-x: auto; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); }
.jv-reference-diagram { display: grid; grid-template-columns: minmax(90px, .6fr) minmax(65px, .5fr) minmax(190px, 1.4fr); gap: 8px; align-items: center; min-height: 190px; }
.jv-ref-column, .jv-arrow-column, .jv-object-column { display: grid; gap: 20px; }
.jv-arrow-column { color: var(--amber); font: 800 13px/1 var(--font-mono); }
.jv-object-column { gap: 8px; }
.jv-memory-node { padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.jv-memory-node.ref { color: var(--amber); font: 750 12px/1.3 var(--font-mono); text-align: center; }
.jv-memory-node.object { display: grid; gap: 3px; border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.jv-memory-node.object small { color: var(--text-dim); font-size: 8px; text-transform: uppercase; }
.jv-memory-node.object strong { color: var(--teal); font: 750 13px/1.3 var(--font-display); }
.jv-memory-node.object span { font: 11px/1.4 var(--font-mono); }
.jv-scope-diagram { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(190px, .9fr); gap: 10px; }
.jv-scope-block { position: relative; min-height: 170px; padding: 28px 12px 12px; border: 2px solid var(--amber); border-radius: 12px; background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.jv-scope-block > span { position: absolute; top: 6px; left: 9px; color: var(--amber); font: 750 9px/1 var(--font-mono); text-transform: uppercase; }
.jv-scope-block.inner { min-height: 90px; margin: 18px 20px 0; border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.jv-scope-block.inner > span { color: var(--teal); }
.jv-scope-status { display: grid; align-content: center; gap: 7px; }
.jv-scope-status h3 { margin: 0 0 4px; font-size: 13px; }
.jv-scope-variable { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 11px; }
.jv-scope-variable.is-visible { border-color: var(--teal); }
.jv-scope-variable.is-visible strong { color: var(--teal); }
.jv-scope-variable.is-hidden { opacity: .55; }
.jv-memory-diagram { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .6fr) minmax(180px, 1fr); gap: 12px; align-items: center; min-height: 210px; }
.jv-stack-zone, .jv-heap-zone { display: grid; gap: 8px; min-height: 160px; align-content: center; padding: 13px; border: 1px dashed var(--amber); border-radius: 12px; }
.jv-heap-zone { border-color: var(--teal); }
.jv-stack-zone > small, .jv-heap-zone > small { color: var(--text-dim); font-size: 9px; text-transform: uppercase; }
.jv-memory-link { color: var(--text-dim); text-align: center; transition: color .3s ease, transform .3s ease; }
.jv-memory-link span { display: block; font-size: 9px; text-transform: uppercase; }
.jv-memory-link strong { font: 800 15px/1 var(--font-mono); }
.jv-memory-link.is-active { color: var(--amber); transform: translateX(4px); text-shadow: 0 0 15px var(--amber); }

/* ---------- Operators and expressions visual labs ---------- */
.jv-op-input-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 9px; }
.jv-op-input { display: grid; gap: 4px; min-width: 0; margin-bottom: 9px; }
.jv-op-input-row .jv-op-input { margin-bottom: 0; }
.jv-op-input label { color: var(--text-dim); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.jv-op-input input {
    width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text); font: 700 13px/1 var(--font-mono); outline: none;
}
.jv-op-input input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.jv-type-tab code { color: inherit; font: inherit; }
.jv-type-tab span { display: block; margin-top: 2px; font: 500 8.5px/1.15 var(--font-body); }
.jv-op-flow, .jv-short-flow {
    display: grid; grid-template-columns: minmax(105px, 1fr) auto minmax(125px, 1fr) auto minmax(135px, 1fr) auto minmax(110px, 1fr);
    gap: 7px; align-items: center; padding: 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: 11px;
    background: linear-gradient(145deg, var(--surface-2), var(--surface));
}
.jv-op-flow > div, .jv-short-flow > div { display: grid; gap: 4px; min-height: 72px; align-content: center; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); text-align: center; }
.jv-op-flow > span, .jv-short-flow > span { color: var(--amber); font-weight: 900; }
.jv-op-flow small, .jv-short-flow small, .jv-bit-grid small, .jv-shift-diagram small, .jv-precedence-flow small { color: var(--text-dim); font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jv-op-flow strong, .jv-short-flow strong { color: var(--text); font: 800 15px/1.25 var(--font-mono); }
.jv-op-flow .is-expression { border-color: var(--amber); }
.jv-op-flow .is-result, .jv-short-flow .is-result, .jv-bit-grid .is-result, .jv-shift-diagram .is-result { border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.jv-short-flow .is-evaluated { border-color: var(--amber); }
.jv-short-flow .is-skipped { border-style: dashed; opacity: .6; }
.jv-short-flow .is-skipped strong { text-decoration: line-through; }
.jv-bit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.jv-bit-grid > div { display: grid; min-width: 0; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.jv-bit-grid strong { color: var(--amber); font: 800 18px/1.2 var(--font-display); }
.jv-bit-grid code, .jv-shift-diagram code { display: block; overflow-x: auto; color: var(--text); font: 650 10px/1.6 var(--font-mono); white-space: nowrap; }
.jv-shift-diagram { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.jv-shift-diagram > div { display: grid; gap: 5px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.jv-shift-arrow { justify-self: center; min-width: 70px; padding: 5px 10px; border-radius: 999px; background: var(--amber); color: #211507; font: 850 12px/1 var(--font-mono); text-align: center; }
.jv-precedence-flow { display: grid; gap: 5px; margin-bottom: 9px; }
.jv-precedence-flow > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.jv-precedence-flow > div.is-current { border-color: var(--amber); box-shadow: inset 3px 0 var(--amber); }
.jv-precedence-flow code { min-width: 0; overflow-x: auto; color: var(--text); font: 700 12px/1.45 var(--font-mono); white-space: nowrap; }
.jv-precedence-flow > span { color: var(--amber); padding-left: 26px; font-weight: 900; }

/* ---------- Arrays visual labs ---------- */
.jv-array-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jv-array-cell { display: grid; gap: 3px; min-width: 52px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; text-align: center; }
.jv-array-cell small { color: var(--text-dim); font-size: 9px; font-weight: 800; }
.jv-array-cell strong { font: 750 14px/1.2 var(--font-mono); color: var(--text); }
.jv-array-cell:hover { border-color: var(--amber); }
.jv-array-cell.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 12%, transparent); }
.jv-array-cell.is-changed { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface)); box-shadow: inset 3px 0 var(--teal); }
.jv-jagged-grid { display: grid; gap: 6px; margin-bottom: 10px; }
.jv-jagged-row { display: flex; gap: 6px; }

/* ---------- Pagination / footer ---------- */
.jv-pagination { max-width: 880px; margin: 30px auto 0; display: flex; justify-content: space-between; gap: 10px; }
.jv-page-link { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text-dim); font-size: 12px; background: var(--surface); }
.jv-page-link strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 13.5px; margin-top: 2px; }
.jv-page-next { text-align: right; }
.jv-page-link.is-locked { opacity: .55; }
.jv-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px clamp(14px, 3vw, 34px); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.jv-footer a { color: var(--amber); text-decoration: none; }

/* ---------- Modal ---------- */
.jv-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(10,7,4,.55); padding: 16px; }
.jv-modal[hidden] { display: none; }
.jv-modal-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.jv-modal-card h2 { margin: 0 0 8px; font-size: 17px; }
.jv-modal-card p { color: var(--text-dim); font-size: 13px; }
.jv-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- Celebration layer ----------
   Every particle is a plain DOM element whose motion comes entirely from a
   CSS @keyframes animation on transform/opacity (translate3d + scale +
   rotate). That runs on the compositor thread, not the JS main thread, so
   it stays smooth no matter how many particles are on screen — there is no
   per-frame JavaScript here at all once the elements are created. */
.jv-celebrate-layer { display: none; }
.jv-cel-layer { position: fixed; z-index: 700; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.jv-cel-particle {
    position: absolute; display: block; width: var(--size); height: var(--size);
    background: hsl(var(--hue) 92% 62%); box-shadow: 0 0 12px hsl(var(--hue) 92% 62% / .72);
    opacity: 0; will-change: transform, opacity;
}
.jv-cel-round { border-radius: 50%; }
.jv-cel-ribbon { width: calc(var(--size) * .42); height: calc(var(--size) * 2.25); border-radius: 2px; }
.jv-cel-star { clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 69% 56%, 79% 94%, 50% 72%, 21% 94%, 31% 56%, 2% 35%, 39% 34%); }
.jv-cel-is-burst { animation: jv-cel-burst var(--duration) cubic-bezier(.12, .66, .22, 1) var(--delay) forwards; }
.jv-cel-is-shower { animation: jv-cel-shower var(--duration) cubic-bezier(.18, .55, .38, .94) var(--delay) forwards; }
.jv-cel-is-fireworks { animation: jv-cel-fireworks var(--duration) cubic-bezier(.13, .64, .25, 1) var(--delay) forwards; }
.jv-cel-is-fountain, .jv-cel-is-cannons { animation: jv-cel-arc var(--duration) cubic-bezier(.12, .62, .2, 1) var(--delay) forwards; }
.jv-cel-is-spiral { animation: jv-cel-spiral var(--duration) cubic-bezier(.16, .68, .27, 1) var(--delay) forwards; }
.jv-cel-is-starfall { animation: jv-cel-starfall var(--duration) linear var(--delay) forwards; }
.jv-cel-effect-fireworks .jv-cel-particle { box-shadow: 0 0 18px 4px hsl(var(--hue) 92% 62% / .72); }
.jv-cel-glow-0 { animation-delay: .1s; }
.jv-cel-glow-1 { animation-delay: .48s; }
.jv-cel-glow-2 { animation-delay: .86s; }
.jv-cel-effect-fountain .jv-cel-ribbon { box-shadow: 0 0 14px 2px hsl(var(--hue) 92% 62% / .8); }
.jv-cel-effect-spiral .jv-cel-particle { box-shadow: 0 0 18px 3px hsl(var(--hue) 92% 62% / .74); }
.jv-cel-effect-starfall .jv-cel-star { filter: drop-shadow(0 0 7px hsl(var(--hue) 92% 72%)); }
.jv-cel-glow {
    position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 30px 12px rgba(255, 180, 84, .85), 0 0 90px 34px rgba(87, 224, 207, .5);
    transform: translate(-50%, -50%) scale(0); animation: jv-cel-glow 2.2s ease-out forwards;
}
.jv-cel-glow-cannon { width: 18px; height: 60px; border-radius: 50%; }
.jv-cel-glow-spiral { width: 48px; height: 48px; background: transparent; border: 5px solid rgba(255, 255, 255, .9); }
.jv-cel-sweep {
    position: absolute; top: -18vh; left: -30vw; width: 160vw; height: 42vh;
    background: linear-gradient(112deg, transparent 20%, rgba(255, 180, 84, .24), rgba(87, 224, 207, .34), rgba(255, 159, 107, .2), transparent 80%);
    filter: blur(16px); transform: rotate(-8deg); animation: jv-cel-sweep 5.4s ease-in-out forwards;
}

@keyframes jv-cel-burst {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.15) rotate(0deg); }
    8% { opacity: 1; }
    48% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(1.12) rotate(var(--spin)); }
    76% { opacity: .96; }
    100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) scale(.72) rotate(var(--spin-end)); }
}
@keyframes jv-cel-shower {
    0% { opacity: 0; transform: translate3d(0, -25px, 0) rotate(0deg); }
    10% { opacity: 1; }
    82% { opacity: .95; }
    100% { opacity: 0; transform: translate3d(var(--dx), var(--end-y), 0) rotate(var(--spin)); }
}
@keyframes jv-cel-fireworks {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.05); }
    10% { opacity: 1; }
    62% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(1.25) rotate(var(--spin)); }
    100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) scale(.28) rotate(var(--spin-end)); }
}
@keyframes jv-cel-arc {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2) rotate(0); }
    8% { opacity: 1; }
    52% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(1.1) rotate(var(--spin)); }
    100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) scale(.7) rotate(var(--spin-end)); }
}
@keyframes jv-cel-spiral {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.05) rotate(0); }
    12% { opacity: 1; }
    72% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(1.3) rotate(var(--spin)); }
    100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) scale(.35) rotate(var(--spin-end)); }
}
@keyframes jv-cel-starfall {
    0% { opacity: 0; transform: translate3d(0, -30px, 0) scale(.4) rotate(-28deg); }
    9% { opacity: 1; }
    78% { opacity: .96; }
    100% { opacity: 0; transform: translate3d(var(--dx), var(--end-y), 0) scale(1.12) rotate(var(--spin)); }
}
@keyframes jv-cel-sweep {
    0% { opacity: 0; transform: translate3d(-18vw, -10vh, 0) rotate(-8deg); }
    24% { opacity: 1; }
    74% { opacity: .75; }
    100% { opacity: 0; transform: translate3d(18vw, 32vh, 0) rotate(4deg); }
}
@keyframes jv-cel-glow {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .jv-cel-layer { display: none !important; }
    .cx-block.is-copied, .cx-block.is-copied pre, .jv-flashcard-inner { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .jv-grid { grid-template-columns: 1fr; }
    .jv-sidebar { position: fixed; z-index: 300; inset: 0 auto 0 0; width: min(84vw, 280px); transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow); }
    .jv-sidebar.is-open { transform: none; }
    .jv-sidebar-close { display: block; }
    .jv-menu-toggle { display: flex; }
    .jv-scrim.is-visible { display: block; }
}
@media (max-width: 620px) {
    .jv-bar { gap: 6px; padding: 0 8px; }
    .jv-brand { gap: 6px; min-width: 0; }
    .jv-brand-mark { width: 27px; height: 27px; border-radius: 7px; }
    .jv-brand-copy {
        display: flex;
        min-width: 0;
        max-width: 108px;
        line-height: 1.02;
    }
    .jv-brand-copy strong { font-size: 10.5px; white-space: nowrap; }
    .jv-brand-copy small {
        margin-top: 2px;
        font-size: 7px;
        letter-spacing: .01em;
        text-transform: none;
        white-space: nowrap;
    }
    .jv-jump { flex: 1 1 auto; justify-content: flex-end; }
    .jv-jump-toggle {
        width: 30px;
        min-width: 30px;
        padding: 0;
        border-radius: 8px;
    }
    .jv-jump-toggle > span { display: none; }
    .jv-main { padding: 14px 10px 40px; }
    .jv-hero-stats li { font-size: 10.5px; padding: 5px 9px; }
    .jv-pagination { flex-direction: column; }
    .jv-page-next { text-align: left; }
    .cx-block pre { padding: 11px; }
    .jv-footer { flex-direction: column; align-items: flex-start; gap: 4px; }

    /* Practice lab: reclaim vertical space so tools open with minimal scrolling */
    .jv-lab { margin-top: 16px; padding-top: 12px; }
    .jv-lab-head { align-items: center; margin-bottom: 8px; }
    .jv-lab-head h2 { font-size: 16px; }
    .jv-btn-ghost.jv-expand-section { height: 28px; padding: 0 10px; font-size: 11px; }
    .jv-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 -10px 8px; padding: 0 10px 6px; scrollbar-width: thin; }
    .jv-chip { flex: none; padding: 5px 9px; }
    .jv-tool-stage { padding: 10px 10px 12px; min-height: 0; border-radius: 9px; }
    .jv-q-title { font-size: 13.5px; }
    .jv-option { padding: 8px 10px; font-size: 12.5px; }
    .jv-btn { height: 32px; padding: 0 11px; font-size: 12px; }
    .jv-controls { gap: 6px; }
    .jv-controls .jv-btn { flex: 1 1 auto; min-width: 0; }
    .jv-flashcard { height: clamp(150px, 46vw, 210px); }
    .jv-explorer-grid, .jv-scope-diagram { grid-template-columns: 1fr; }
    .jv-fact-grid { grid-template-columns: 1fr; }
    .jv-literal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jv-overflow-flow { grid-template-columns: 1fr; }
    .jv-flow-arrow { transform: rotate(90deg); text-align: center; }
    .jv-reference-diagram { grid-template-columns: 90px 55px minmax(170px, 1fr); padding: 10px; }
    .jv-memory-diagram { grid-template-columns: 1fr; }
    .jv-memory-link { transform: rotate(90deg); }
    .jv-memory-link.is-active { transform: rotate(90deg) translateX(4px); }
    .jv-op-input-row, .jv-bit-grid { grid-template-columns: 1fr; }
    .jv-op-flow, .jv-short-flow { grid-template-columns: 1fr; overflow: visible; }
    .jv-op-flow > span, .jv-short-flow > span { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 360px) {
    .jv-bar { gap: 4px; padding-inline: 5px; }
    .jv-brand { gap: 4px; }
    .jv-brand-mark { width: 25px; height: 25px; }
    .jv-brand-copy { max-width: 88px; }
    .jv-brand-copy strong { font-size: 9.5px; }
    .jv-brand-copy small { font-size: 6.5px; letter-spacing: 0; }
}

/* ---------- Mobile practice workspace ----------
   Keep every tool usable inside one phone viewport. Dense tool chrome stays
   visible while the active exercise owns the only internal scroll region. */
@media (max-width: 620px), (max-width: 900px) and (max-height: 560px) {
    .jv-lab { margin-top: 12px; padding-top: 9px; }
    .jv-lab-head { gap: 6px; margin-bottom: 6px; }
    .jv-lab-head .jv-eyebrow { margin-bottom: 1px; font-size: 8px; }
    .jv-lab-head h2 { font-size: 14px; line-height: 1.2; }
    .jv-btn-ghost.jv-expand-section { height: 27px; padding-inline: 8px; font-size: 10px; }
    .jv-chips { flex-wrap: nowrap; gap: 4px; margin: 0 -7px 5px; padding: 0 7px 4px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .jv-chip { min-height: 28px; padding: 4px 8px; border-radius: 7px; scroll-snap-align: start; }
    .jv-chip strong { font-size: 10.5px; line-height: 1.15; }
    .jv-chip small { display: none; }
    .jv-tool-stage { padding: 7px; font-size: 12px; line-height: 1.4; }
    .jv-status-row { gap: 4px; margin-bottom: 4px; font-size: 10px; }
    .jv-progress-card { gap: 6px 10px; margin-bottom: 6px; padding: 5px 7px; font-size: 10px; }
    .jv-track { margin-bottom: 6px; }
    .jv-q-id { margin: 0; font-size: 8.5px; }
    .jv-q-title { margin: 3px 0 6px; font-size: 12.5px; line-height: 1.3; }
    .jv-options { gap: 4px; }
    .jv-option { gap: 7px; min-height: clamp(34px, 5dvh, 42px); padding: clamp(5px, .9dvh, 8px) 8px; border-radius: 7px; font-size: 11.5px; line-height: 1.3; }
    .jv-opt-key { width: 18px; height: 18px; font-size: 9px; }
    .jv-controls { gap: 4px; margin-top: 6px; }
    .jv-controls .jv-btn { flex: 0 1 auto; min-height: 30px; height: 30px; padding-inline: 9px; font-size: 10.5px; }
    .jv-feedback { margin-top: 6px; padding: 7px 8px; border-radius: 7px; font-size: 11px; line-height: 1.4; }
    .jv-feedback strong { margin-bottom: 1px; }
    .jv-interview-answer { margin-top: 6px; padding: 7px 9px; }
    .jv-interview-block { padding: 6px 0; }
    .jv-interview-label { margin-bottom: 2px; font-size: 8.5px; }
    .jv-interview-block p { font-size: 11px; line-height: 1.4; }
    .jv-review-card { margin-top: 6px; padding: 8px 9px; }
    .jv-review-question { margin-bottom: 6px; font-size: 11.5px; }
    .jv-review-answers { gap: 4px; margin-bottom: 5px; }
    .jv-review-row, .jv-review-explanation { padding: 5px 7px; font-size: 10.5px; }
    .jv-flashcard { height: clamp(126px, 30dvh, 230px); min-height: clamp(126px, 30dvh, 230px); max-height: min(52dvh, 420px); }
    .jv-flashcard-face { gap: 5px; padding: 10px; border-radius: 9px; }
    .jv-flashcard-face strong { font-size: 12px; }
    .jv-match-list, .jv-order-list { gap: 3px; }
    .jv-match-row { row-gap: 4px; padding: 5px 7px; }
    .jv-match-row strong, .jv-order-row { font-size: 10.5px; }
    .jv-match-row select { height: 29px; font-size: 10.5px; }
    .jv-order-row { gap: 6px; padding: 5px 6px; }
    .jv-order-btn { width: 24px; height: 24px; }
    .jv-type-tabs { flex-wrap: nowrap; gap: 4px; margin-bottom: 6px; overflow-x: auto; overscroll-behavior-x: contain; }
    .jv-type-tab { flex: none; min-height: 27px; padding: 3px 7px; font-size: 10px; }
    .jv-type-tab span { display: inline; margin: 0 0 0 4px; font-size: 7.5px; }
    .jv-explorer-grid { grid-template-columns: 112px minmax(220px, 1fr); gap: 6px; overflow-x: auto; }
    .jv-type-orb { min-height: clamp(104px, 20dvh, 150px); padding: 8px; border-radius: 9px; }
    .jv-type-orb strong { margin: 4px 0; font-size: 21px; }
    .jv-fact-grid { grid-template-columns: repeat(2, minmax(105px, 1fr)); gap: 4px; }
    .jv-fact-grid div { padding: 6px 7px; }
    .jv-literal-display { padding: 9px; }
    .jv-literal-display strong { margin: 4px 0; font-size: 28px; }
    .jv-literal-strip { grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 4px; overflow-x: auto; }
    .jv-literal-strip div { padding: 5px; }
    .jv-diagram { padding: 8px; }
    .jv-reference-diagram { min-height: 132px; }
    .jv-scope-diagram { grid-template-columns: minmax(230px, 1.1fr) minmax(180px, .9fr); gap: 6px; overflow-x: auto; }
    .jv-scope-block { min-height: 125px; padding: 24px 8px 8px; }
    .jv-scope-block.inner { min-height: 68px; margin: 12px 10px 0; }
    .jv-memory-diagram { grid-template-columns: minmax(150px, 1fr) 84px minmax(150px, 1fr); gap: 6px; min-height: 138px; overflow-x: auto; }
    .jv-stack-zone, .jv-heap-zone { min-height: 120px; padding: 8px; }
    .jv-memory-link, .jv-memory-link.is-active { transform: none; }
    .jv-overflow-flow { grid-template-columns: minmax(105px, 1fr) auto minmax(125px, auto) auto minmax(105px, 1fr); gap: 5px; overflow-x: auto; }
    .jv-overflow-flow > div { min-height: 64px; padding: 6px; }
    .jv-flow-arrow { transform: none; }
    .jv-op-input-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
    .jv-op-input { gap: 2px; margin-bottom: 5px; }
    .jv-op-input input { height: 30px; padding-inline: 7px; font-size: 11px; }
    .jv-op-flow, .jv-short-flow { grid-template-columns: minmax(88px, 1fr) auto minmax(100px, 1fr) auto minmax(108px, 1fr) auto minmax(92px, 1fr); gap: 4px; padding: 6px; overflow-x: auto; }
    .jv-op-flow > div, .jv-short-flow > div { min-height: 58px; padding: 6px; }
    .jv-op-flow > span, .jv-short-flow > span { transform: none; }
    .jv-bit-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 4px; overflow-x: auto; }
    .jv-bit-grid > div { padding: 7px; }
    .jv-shift-diagram { gap: 5px; padding: 7px; }
    .jv-shift-diagram > div { gap: 3px; padding: 6px; }
    .jv-precedence-flow { gap: 3px; margin-bottom: 5px; }
    .jv-precedence-flow > div { gap: 6px; padding: 6px 7px; }
    .jv-tool-stage .cx-block { margin: 5px 0; }
    .jv-tool-stage .cx-block pre { max-height: clamp(170px, 40dvh, 360px); padding: 7px 8px; }
    .jv-tool-stage .cx-block code { font-size: 10.5px; line-height: 1.45; }

    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) {
        display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100vh; height: 100dvh;
        min-height: 0; padding: 7px 7px max(7px, env(safe-area-inset-bottom)); overflow: hidden; overscroll-behavior: none;
    }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-lab-head { margin: 0 0 4px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-chips { margin: 0 -7px 4px; padding-inline: 7px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-stage { min-height: 0; overflow: hidden; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-panel:not([hidden]) { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; max-height: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-panel:not([hidden]) > :is(.jv-explorer-grid, .jv-literal-display, .jv-overflow-flow, .jv-diagram, .jv-scope-diagram, .jv-memory-diagram, .jv-op-flow, .jv-short-flow, .jv-bit-grid, .jv-shift-diagram, .jv-flashcard) { flex: 1 1 auto; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-controls { position: sticky; z-index: 5; bottom: -7px; margin-top: auto; margin-inline: -2px; padding: 6px 2px 2px; background: linear-gradient(180deg, transparent, var(--surface) 24%); }
}

@media (max-width: 900px) and (max-height: 560px) {
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-lab-head .jv-eyebrow { display: none; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-lab-head h2 { font-size: 12px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-chip { min-height: 25px; padding-block: 3px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-option { min-height: 30px; padding-block: 4px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-flashcard { height: 118px; min-height: 118px; }
    .jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-stage .cx-block pre { max-height: 130px; }
}

/* ---------- Themed interactive actions ---------- */
:root {
    --action-text: #ffffff;
    --action-start: color-mix(in srgb, var(--amber) 80%, #000000);
    --action-end: color-mix(in srgb, var(--amber-strong) 92%, #000000);
}
:root[data-theme="midnight"],
:root[data-theme="ocean"],
:root[data-theme="forest"],
:root[data-theme="aurora"],
:root[data-theme="cyber"],
:root[data-theme="slate"],
:root[data-theme="dark"] {
    --action-text: #07131a;
    --action-start: var(--amber);
    --action-end: var(--amber-strong);
}

.jv-expand-section {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border-color: color-mix(in srgb, var(--amber) 70%, var(--border));
    background: color-mix(in srgb, var(--amber) 13%, var(--surface-2)); color: var(--amber-strong);
    font-weight: 800; box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 8%, transparent), 0 5px 14px color-mix(in srgb, var(--amber) 16%, transparent);
}
.jv-expand-section::before { content: '\2197'; font-size: 14px; line-height: 1; }
.jv-expand-section:hover, .jv-expand-section:focus-visible {
    border-color: var(--amber); background: color-mix(in srgb, var(--amber) 21%, var(--surface-2)); color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 17%, transparent), 0 7px 20px color-mix(in srgb, var(--amber) 24%, transparent);
}
.jv-tool-stage .jv-btn:not([disabled]) {
    border-color: color-mix(in srgb, var(--amber) 48%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 13%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px color-mix(in srgb, #fff 12%, transparent), 0 3px 9px color-mix(in srgb, var(--amber) 10%, transparent);
}
.jv-tool-stage .jv-btn:not([disabled]):hover, .jv-tool-stage .jv-btn:not([disabled]):focus-visible {
    border-color: var(--amber); color: var(--amber-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--amber) 20%, transparent);
    transform: translateY(-1px);
}
.jv-tool-stage .jv-btn:not([disabled]):active { transform: translateY(1px); filter: brightness(.96); }
.jv-tool-stage .jv-btn-primary:not([disabled]), .jv-overflow-action {
    border-color: color-mix(in srgb, var(--amber) 84%, #fff);
    background: linear-gradient(145deg, var(--action-start), var(--action-end)); color: var(--action-text);
    text-shadow: 0 1px rgba(0, 0, 0, .18);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--amber) 32%, transparent), inset 0 1px rgba(255, 255, 255, .28);
}
.jv-tool-stage :is(.jv-type-tab, .jv-order-btn):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-expand-section,
.cx-block:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .cx-expand {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border-color: color-mix(in srgb, var(--amber) 82%, #fff);
    background: linear-gradient(145deg, var(--action-start), var(--action-end)); color: var(--action-text);
    text-shadow: 0 1px rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent), 0 0 24px color-mix(in srgb, var(--amber) 45%, transparent);
}
.jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-expand-section::before { content: '\00D7'; font-size: 18px; }
.cx-block:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .cx-expand::before { content: '\00D7'; font-size: 17px; line-height: 1; }

/* Strong pointer feedback for every control rendered inside a practice tool. */
.jv-tool-stage button {
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .jv-tool-stage .jv-btn:not([disabled]):hover {
        background: color-mix(in srgb, var(--amber) 24%, var(--surface-2)); color: var(--text);
        transform: translateY(-2px); filter: brightness(1.08) saturate(1.08);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent), 0 9px 22px color-mix(in srgb, var(--amber) 28%, transparent);
    }
    .jv-tool-stage .jv-btn-primary:not([disabled]):hover, .jv-overflow-action:hover {
        outline: 2px solid color-mix(in srgb, var(--amber) 72%, #fff); outline-offset: 2px;
        background: linear-gradient(325deg, var(--action-start), var(--action-end)); color: var(--action-text);
        transform: translateY(-2px) scale(1.025); filter: brightness(1.14) saturate(1.14);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent), 0 11px 26px color-mix(in srgb, var(--amber) 40%, transparent);
    }
    .jv-tool-stage .jv-option:not([disabled]):hover {
        border-color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, var(--surface-2));
        transform: translateX(3px); box-shadow: inset 3px 0 var(--amber), 0 6px 15px color-mix(in srgb, var(--amber) 16%, transparent);
    }
    .jv-tool-stage :is(.jv-type-tab, .jv-chip, .jv-order-btn):not([disabled]):hover {
        border-color: var(--amber); background: color-mix(in srgb, var(--amber) 22%, var(--surface-2)); color: var(--text);
        transform: translateY(-2px); box-shadow: 0 6px 15px color-mix(in srgb, var(--amber) 22%, transparent);
    }
}
.jv-tool-stage button:not([disabled]):active { transform: translateY(1px) scale(.98); filter: brightness(.94); }

/* Premium, fluid flashcards. The outer card handles hover movement while the
   inner layer owns the flip transform, keeping both animations independent. */
.jv-flashcard {
    border-radius: 15px; outline: none;
    transition: transform .24s cubic-bezier(.2, .75, .25, 1), filter .24s ease;
    filter: drop-shadow(0 15px 24px color-mix(in srgb, var(--bg) 55%, transparent));
}
.jv-flashcard-inner {
    transition: transform .68s cubic-bezier(.2, .72, .2, 1); will-change: transform;
}
.jv-flashcard-face {
    isolation: isolate; overflow: hidden; border-color: color-mix(in srgb, var(--amber) 38%, var(--border));
    background: radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--amber) 24%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--amber) 8%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 3px var(--amber), inset 0 1px rgba(255,255,255,.12); -webkit-backface-visibility: hidden;
}
.jv-flashcard-face.back {
    border-color: color-mix(in srgb, var(--teal) 48%, var(--border));
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--teal) 25%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--teal) 10%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 3px var(--teal), inset 0 1px rgba(255,255,255,.12);
}
.jv-flashcard-face::after {
    content: ''; position: absolute; z-index: -1; inset: -55% auto -55% -42%; width: 36%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg) translateX(-220%);
    transition: transform .72s ease; pointer-events: none;
}
.jv-flashcard-face > * { position: relative; z-index: 1; }
.jv-flashcard-face small { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 10%, transparent); }
.jv-flashcard-face.back small { border-color: color-mix(in srgb, var(--teal) 38%, var(--border)); background: color-mix(in srgb, var(--teal) 11%, transparent); color: var(--teal); }
.jv-flashcard-face em { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 68%, transparent); }
@media (hover: hover) and (pointer: fine) {
    .jv-flashcard:hover { transform: translateY(-4px) scale(1.012); filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--amber) 22%, transparent)); }
    .jv-flashcard:hover .jv-flashcard-face::after { transform: skewX(-18deg) translateX(560%); }
}
.jv-flashcard:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--amber); }
.jv-flashcard:active { transform: translateY(1px) scale(.99); }

@media (prefers-reduced-motion: reduce) {
    .jv-tool-stage button, .jv-flashcard, .jv-flashcard-inner, .jv-flashcard-face::after { transition: none !important; }
}

/* ---------- MCQ result dashboard ---------- */
.jv-result-dashboard {
    --result-color: var(--teal); overflow: hidden; margin-bottom: 8px; padding: 14px;
    border: 1px solid color-mix(in srgb, var(--result-color) 42%, var(--border)); border-radius: 13px;
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--result-color) 16%, transparent), transparent 34%), linear-gradient(145deg, var(--surface-2), var(--surface));
    box-shadow: 0 13px 30px color-mix(in srgb, var(--result-color) 11%, transparent);
}
.jv-result-dashboard.is-growing { --result-color: var(--amber); }
.jv-result-dashboard.is-revise { --result-color: var(--red); }
.jv-result-hero { display: flex; align-items: center; gap: 15px; }
.jv-score-ring {
    position: relative; flex: none; width: 96px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
    background: conic-gradient(var(--result-color) calc(var(--score) * 1%), color-mix(in srgb, var(--border) 72%, transparent) 0);
    box-shadow: 0 0 24px color-mix(in srgb, var(--result-color) 24%, transparent); animation: jv-result-pop .55s cubic-bezier(.2,.8,.2,1);
}
.jv-score-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.jv-score-ring > div { position: relative; z-index: 1; display: grid; text-align: center; }
.jv-score-ring strong { color: var(--result-color); font: 800 23px/1 var(--font-display); }
.jv-score-ring span { margin-top: 4px; color: var(--text-dim); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.jv-result-heading { min-width: 0; }
.jv-result-kicker { color: var(--result-color); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.jv-result-heading h3 { margin: 3px 0; font-size: 19px; }
.jv-result-heading p { margin: 0; color: var(--text-dim); font-size: 11.5px; }
.jv-result-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.jv-result-stats > div { min-width: 0; padding: 7px 5px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 82%, transparent); text-align: center; }
.jv-result-stats strong { display: block; overflow: hidden; color: var(--text); font: 800 16px/1.15 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.jv-result-stats span { color: var(--text-dim); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.jv-result-stats .is-correct strong { color: var(--teal); }.jv-result-stats .is-wrong strong { color: var(--red); }
.jv-result-progress { margin-top: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.jv-result-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 10px; }
.jv-result-progress > div:first-child span { color: var(--text-dim); }
.jv-result-bar { display: flex; height: 11px; overflow: hidden; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 1px 3px rgba(0,0,0,.18); }
.jv-result-bar > span { height: 100%; transform-origin: left; animation: jv-result-grow .75s cubic-bezier(.2,.75,.25,1) both; }
.jv-result-bar .is-correct { background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 68%, #fff)); }
.jv-result-bar .is-wrong { background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 72%, #fff)); }
.jv-result-bar .is-unanswered { background: var(--text-dim); opacity: .42; }
.jv-result-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: var(--text-dim); font-size: 8.5px; }
.jv-result-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: currentColor; }
.jv-result-legend .is-correct { color: var(--teal); }.jv-result-legend .is-wrong { color: var(--red); }
.jv-result-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.jv-result-insights > div { min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.jv-result-insights > div > strong { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.jv-result-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; }
.jv-result-chip-list span { padding: 3px 6px; border-radius: 999px; font-size: 9px; line-height: 1.25; }
.jv-result-chip-list.is-strong span { background: color-mix(in srgb, var(--teal) 15%, var(--surface-2)); color: var(--teal); }
.jv-result-chip-list.is-weak span { background: color-mix(in srgb, var(--red) 13%, var(--surface-2)); color: var(--red); }
@keyframes jv-result-grow { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes jv-result-pop { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Every dialog action is intentionally prominent, including secondary exits. */
.jv-modal-card { border-color: color-mix(in srgb, var(--amber) 42%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--amber) 14%, transparent), transparent 42%), var(--surface); }
.jv-modal-actions .jv-btn { min-width: 112px; min-height: 35px; border-color: color-mix(in srgb, var(--amber) 52%, var(--border)); font-weight: 800; }
.jv-modal-actions .jv-btn-ghost { background: color-mix(in srgb, var(--amber) 12%, var(--surface-2)); color: var(--text); box-shadow: 0 4px 12px color-mix(in srgb, var(--amber) 12%, transparent); }
.jv-modal-actions .jv-btn-primary { border-color: color-mix(in srgb, var(--amber) 82%, #fff); background: linear-gradient(145deg, var(--action-start), var(--action-end)); color: var(--action-text); box-shadow: 0 7px 20px color-mix(in srgb, var(--amber) 34%, transparent); }
@media (hover: hover) and (pointer: fine) {
    .jv-modal-actions .jv-btn:hover { border-color: var(--amber); transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent), 0 9px 22px color-mix(in srgb, var(--amber) 28%, transparent); }
}

@media (max-width: 620px), (max-width: 900px) and (max-height: 560px) {
    .jv-result-dashboard { padding: 9px; border-radius: 10px; }
    .jv-result-hero { gap: 10px; }
    .jv-score-ring { width: clamp(70px, 20vw, 84px); }
    .jv-score-ring::before { inset: 7px; }.jv-score-ring strong { font-size: 19px; }
    .jv-result-heading h3 { font-size: 15px; }.jv-result-heading p { font-size: 10px; }
    .jv-result-stats { gap: 3px; margin-top: 7px; }
    .jv-result-stats > div { padding: 5px 2px; }.jv-result-stats strong { font-size: 13px; }.jv-result-stats span { font-size: 7px; }
    .jv-result-progress { margin-top: 6px; padding: 6px 7px; }.jv-result-bar { height: 8px; }
    .jv-result-insights { gap: 4px; margin-top: 5px; }.jv-result-insights > div { padding: 6px; }
    .jv-modal-actions { display: grid; grid-template-columns: repeat(2, 1fr); }.jv-modal-actions .jv-btn { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .jv-result-bar > span, .jv-score-ring { animation: none !important; }
}

/* ---------- Unified practice-button finish ---------- */
.jv-lab :is(.jv-btn, .jv-chip, .jv-option, .jv-type-tab, .jv-order-btn, .jv-overflow-action, .cx-btn) {
    position: relative; isolation: isolate; overflow: hidden; font-weight: 750;
    -webkit-tap-highlight-color: transparent;
}
.jv-lab :is(.jv-btn, .jv-chip, .jv-type-tab, .jv-order-btn, .jv-overflow-action, .cx-btn)::after {
    content: ''; position: absolute; z-index: -1; top: 0; left: -45%; width: 32%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg);
    transition: left .42s ease; pointer-events: none;
}
.jv-lab > .jv-chips .jv-chip {
    border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 7%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 9px color-mix(in srgb, var(--bg) 35%, transparent);
}
.jv-lab > .jv-chips .jv-chip.is-active {
    border-color: var(--amber); background: radial-gradient(circle at 85% 0, color-mix(in srgb, var(--amber) 22%, transparent), transparent 48%), color-mix(in srgb, var(--amber) 14%, var(--surface));
    box-shadow: inset 0 -2px var(--amber), 0 0 0 2px color-mix(in srgb, var(--amber) 10%, transparent), 0 7px 16px color-mix(in srgb, var(--amber) 18%, transparent);
}
.jv-tool-stage .jv-btn:not(.jv-btn-primary):not([disabled]) {
    border-color: color-mix(in srgb, var(--amber) 42%, var(--border)); color: var(--text);
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 11%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 11px color-mix(in srgb, var(--bg) 42%, transparent);
}
.jv-tool-stage .jv-btn-primary:not([disabled]) { letter-spacing: .01em; }
.jv-tool-stage .jv-option {
    border-color: color-mix(in srgb, var(--amber) 25%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 5%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px rgba(255,255,255,.055), 0 3px 9px color-mix(in srgb, var(--bg) 32%, transparent);
}
.jv-tool-stage .jv-opt-key { color: var(--amber-strong); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 38%, var(--border)); }
.jv-tool-stage .jv-type-tab {
    border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 7%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 3px 8px color-mix(in srgb, var(--bg) 34%, transparent);
}
.jv-tool-stage .jv-type-tab.is-active {
    border-color: var(--amber); color: var(--text); background: color-mix(in srgb, var(--amber) 18%, var(--surface-2));
    box-shadow: inset 0 -2px var(--amber), 0 0 0 2px color-mix(in srgb, var(--amber) 11%, transparent), 0 6px 14px color-mix(in srgb, var(--amber) 17%, transparent);
}
.jv-tool-stage .jv-order-btn {
    border-color: color-mix(in srgb, var(--amber) 38%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); color: var(--amber-strong);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--bg) 40%, transparent);
}
.jv-lab :is(.jv-btn, .jv-chip, .jv-option, .jv-type-tab, .jv-order-btn, .jv-overflow-action, .cx-btn):focus-visible {
    outline: 2px solid var(--amber); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent), 0 7px 18px color-mix(in srgb, var(--amber) 22%, transparent);
}
.jv-lab :is(.jv-btn, .jv-chip, .jv-option, .jv-type-tab, .jv-order-btn, .jv-overflow-action, .cx-btn)[disabled] {
    opacity: .48; filter: grayscale(.35) saturate(.55); box-shadow: none; cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
    .jv-lab :is(.jv-btn, .jv-chip, .jv-type-tab, .jv-order-btn, .jv-overflow-action, .cx-btn):not([disabled]):hover::after { left: 118%; }
    .jv-lab > .jv-chips .jv-chip:not([disabled]):hover { border-color: var(--amber); color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 19px color-mix(in srgb, var(--amber) 22%, transparent); }
}

/* Match the Python tutorial's independent front/back face flip. */
.jv-flashcard-inner { transform: none; transition: none; }
.jv-flashcard-face { transition: transform .68s cubic-bezier(.2, .72, .2, 1); will-change: transform; }
.jv-flashcard-face.front { transform: rotateY(0deg); }
.jv-flashcard-face.back { transform: rotateY(180deg); }
.jv-flashcard.is-flipped .jv-flashcard-inner { transform: none; }
.jv-flashcard.is-flipped .jv-flashcard-face.front { transform: rotateY(180deg); }
.jv-flashcard.is-flipped .jv-flashcard-face.back { transform: rotateY(360deg); }

/* Phone result layout favors legibility over squeezing everything into a row. */
@media (max-width: 520px) {
    .jv-result-dashboard { width: 100%; padding: 10px; }
    .jv-result-hero { align-items: center; gap: 11px; }
    .jv-score-ring { width: 78px; }
    .jv-result-heading h3 { font-size: 16px; overflow-wrap: anywhere; }
    .jv-result-heading p { font-size: 10.5px; }
    .jv-result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .jv-result-stats > div { padding: 7px 5px; }
    .jv-result-stats > div:last-child { grid-column: 1 / -1; }
    .jv-result-stats strong { font-size: 15px; }
    .jv-result-progress { padding: 8px; }
    .jv-result-progress > div:first-child { align-items: center; }
    .jv-result-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .jv-result-legend .is-unanswered { grid-column: 1 / -1; }
    .jv-result-insights { grid-template-columns: 1fr; gap: 5px; }
    .jv-result-chip-list span { padding: 4px 7px; font-size: 9.5px; overflow-wrap: anywhere; }
    .jv-result-dashboard + .jv-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .jv-result-dashboard + .jv-controls .jv-btn { width: 100%; min-height: 34px; }
    .jv-result-dashboard + .jv-controls .jv-btn:last-child { grid-column: 1 / -1; }
}

/* Fullscreen result content must create scroll height, never compress into the
   viewport-sized flex panel when the review list is long. */
.jv-result-dashboard, .jv-review-card { flex: 0 0 auto; }
.jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-panel:not([hidden]) > .jv-result-dashboard { width: 100%; height: auto; min-height: max-content; }
.jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-tool-panel:not([hidden]) > .jv-controls { flex: 0 0 auto; }
.jv-lab:is(.is-fullscreen, :fullscreen, :-webkit-full-screen) .jv-result-dashboard + .jv-controls { margin-top: 6px; }

@media (max-width: 360px) {
    .jv-result-hero { align-items: flex-start; }
    .jv-score-ring { width: 70px; }
    .jv-result-kicker { font-size: 8px; }.jv-result-heading h3 { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .jv-flashcard-face { transition: none !important; }
}

/* ---------- Modern unified interactive-tool system ---------- */
.jv-lab {
    --tool-line: color-mix(in srgb, var(--amber) 38%, var(--border));
    --tool-glow: color-mix(in srgb, var(--amber) 16%, transparent);
}
.jv-lab-head .jv-eyebrow {
    width: max-content; margin-bottom: 3px; padding: 2px 7px; border: 1px solid var(--tool-line); border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 9%, var(--surface)); color: var(--amber-strong); font-weight: 850; letter-spacing: .09em;
}
.jv-lab-head h2 { letter-spacing: -.025em; text-wrap: balance; }
.jv-lab > .jv-chips { gap: 7px; }
.jv-lab > .jv-chips .jv-chip {
    min-height: 42px; padding: 6px 11px 6px 13px; border-radius: 11px; overflow: hidden;
    transition: transform .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.jv-lab > .jv-chips .jv-chip::before {
    content: ''; position: absolute; inset: 6px auto 6px 4px; width: 3px; border-radius: 999px;
    background: linear-gradient(var(--amber), var(--teal)); opacity: .2; transform: scaleY(.45); transition: opacity .2s ease, transform .2s ease;
}
.jv-lab > .jv-chips .jv-chip.is-active::before { opacity: 1; transform: scaleY(1); box-shadow: 0 0 10px var(--amber); }
.jv-lab > .jv-chips .jv-chip strong { font-size: 11.75px; font-weight: 800; letter-spacing: -.01em; }
.jv-lab > .jv-chips .jv-chip small { margin-top: 2px; color: var(--text-dim); font-size: 9.25px; font-weight: 600; }
.jv-tool-stage .jv-chips { max-width: 100%; margin-inline: 0; padding-inline: 0; }
.jv-tool-stage .jv-chips .jv-chip {
    border-color: color-mix(in srgb, var(--amber) 27%, var(--border)); border-radius: 9px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber) 7%, var(--surface-2)), var(--surface));
}
.jv-tool-stage .jv-chips .jv-chip.is-active { border-color: var(--amber); box-shadow: inset 0 -2px var(--amber), 0 5px 13px var(--tool-glow); }

.jv-tool-stage {
    isolation: isolate; overflow: hidden; border-color: var(--tool-line); border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, var(--tool-glow), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--amber) 3%), var(--surface));
    box-shadow: inset 0 1px color-mix(in srgb, #fff 14%, transparent), 0 14px 34px color-mix(in srgb, var(--bg) 48%, transparent);
}
.jv-tool-stage::before {
    content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), var(--teal), transparent); opacity: .82;
}
.jv-tool-panel:not([hidden]) { animation: jv-tool-panel-enter .26s cubic-bezier(.2,.75,.25,1) both; }
@keyframes jv-tool-panel-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.jv-status-row { justify-content: flex-start; gap: 5px; color: var(--text); }
.jv-status-row > span {
    display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent); color: var(--text-dim); font-size: 10px; font-weight: 750; letter-spacing: .015em;
}
.jv-status-row > span:first-child { border-color: var(--tool-line); color: var(--amber-strong); background: color-mix(in srgb, var(--amber) 11%, var(--surface)); }
.jv-track { height: 6px; padding: 1px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 76%, transparent); }
.jv-track span { box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 36%, transparent); }
.jv-q-id {
    display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border: 1px solid var(--tool-line); border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 9%, var(--surface)); font-weight: 850;
}
.jv-q-title {
    position: relative; margin: 7px 0 10px; padding: 7px 10px 7px 13px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 58%, transparent); color: var(--text); font-size: 15px; font-weight: 750; letter-spacing: -.012em;
}
.jv-q-title::before { content: ''; position: absolute; inset: 8px auto 8px 5px; width: 3px; border-radius: 999px; background: linear-gradient(var(--amber), var(--teal)); }

.jv-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 7px; }
.jv-tool-stage .jv-option {
    min-height: 43px; padding: 8px 10px; border-radius: 11px; font-size: 12.75px; font-weight: 650; line-height: 1.4;
    transition: transform .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.jv-tool-stage .jv-option::after {
    content: ''; flex: none; width: 18px; height: 18px; margin-left: auto; border: 1.5px solid color-mix(in srgb, var(--text-dim) 54%, transparent); border-radius: 50%;
    display: grid; place-items: center; color: var(--surface); font-size: 11px; font-weight: 900; transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.jv-tool-stage .jv-option.is-selected::after { content: '\2713'; border-color: var(--amber); background: var(--amber); transform: scale(1.08); }
.jv-tool-stage .jv-option.is-correct::after { content: '\2713'; border-color: var(--teal); background: var(--teal); transform: scale(1.08); }
.jv-tool-stage .jv-option.is-wrong::after { content: '\00D7'; border-color: var(--red); background: var(--red); transform: scale(1.08); }
.jv-tool-stage .jv-opt-key { width: 24px; height: 24px; border-radius: 8px; font: 800 10.5px/1 var(--font-display); }

.jv-completion-slot {
    position: relative; min-height: 48px; padding: 7px 10px 7px 13px; border-radius: 10px; overflow: hidden;
    box-shadow: inset 0 1px color-mix(in srgb, #fff 10%, transparent); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.jv-completion-slot::before { content: ''; position: absolute; inset: 7px auto 7px 5px; width: 3px; border-radius: 999px; background: var(--border); }
.jv-completion-slot.is-filled::before { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.jv-completion-slot.is-correct::before { background: var(--teal); }.jv-completion-slot.is-wrong::before { background: var(--red); }
.jv-completion-slot small { font-weight: 850; }.jv-completion-slot strong { font-size: 12.5px; }

.jv-controls {
    align-items: center; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
.jv-tool-stage .jv-btn {
    min-height: 34px; height: 34px; padding-inline: 13px; border-radius: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .005em;
}
.jv-tool-stage .jv-btn-primary:not([disabled]) {
    min-width: 104px; box-shadow: 0 7px 18px color-mix(in srgb, var(--amber) 34%, transparent), inset 0 1px rgba(255,255,255,.32);
}
.jv-feedback {
    position: relative; min-height: 48px; padding: 9px 12px 9px 45px; border-radius: 11px;
    box-shadow: inset 0 1px color-mix(in srgb, #fff 10%, transparent); overflow-wrap: anywhere;
}
.jv-feedback::before {
    content: 'i'; position: absolute; left: 11px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); font: 850 12px/1 var(--font-display);
}
.jv-feedback.is-good { background: color-mix(in srgb, var(--teal) 10%, var(--surface-2)); box-shadow: inset 3px 0 var(--teal); }
.jv-feedback.is-good::before { content: '\2713'; border-color: var(--teal); background: color-mix(in srgb, var(--teal) 17%, var(--surface)); color: var(--teal); }
.jv-feedback.is-bad { background: color-mix(in srgb, var(--red) 9%, var(--surface-2)); box-shadow: inset 3px 0 var(--red); }
.jv-feedback.is-bad::before { content: '!'; border-color: var(--red); background: color-mix(in srgb, var(--red) 15%, var(--surface)); color: var(--red); }
.jv-feedback strong { font-size: 12.5px; }

.jv-progress-card { gap: 5px; padding: 6px; border-style: solid; background: color-mix(in srgb, var(--surface-2) 54%, transparent); }
.jv-progress-card > span { flex: 1 1 84px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); text-align: center; font-size: 10px; }
.jv-progress-card strong { display: inline-block; margin-left: 3px; font-family: var(--font-display); }

.jv-tool-stage :is(.jv-interview-label, .jv-review-label, .jv-review-id, .jv-result-kicker, .jv-op-input label, .jv-fact-grid dt, .jv-type-orb small, .jv-literal-display small) {
    font-weight: 850; letter-spacing: .075em;
}
.jv-interview-answer, .jv-review-card, .jv-match-row, .jv-order-row {
    border-radius: 11px; box-shadow: inset 0 1px color-mix(in srgb, #fff 9%, transparent), 0 5px 13px color-mix(in srgb, var(--bg) 28%, transparent);
}
.jv-interview-answer { border-color: color-mix(in srgb, var(--teal) 62%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 8%, var(--surface-2)), var(--surface-2)); }
.jv-review-row, .jv-review-explanation { border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); }
.jv-flashcard { color: var(--text); font-family: var(--font-body); }

.jv-tool-stage :is(input, select) {
    min-height: 36px; border-color: color-mix(in srgb, var(--amber) 28%, var(--border)); border-radius: 9px;
    background-color: color-mix(in srgb, var(--surface) 88%, var(--surface-2)); color: var(--text); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.jv-tool-stage :is(input, select):hover:not(:disabled) { border-color: color-mix(in srgb, var(--amber) 68%, var(--border)); background-color: var(--surface); }
.jv-tool-stage :is(input, select):focus { outline: none; border-color: var(--amber); background-color: var(--surface); box-shadow: 0 0 0 3px var(--tool-glow), 0 5px 14px color-mix(in srgb, var(--amber) 14%, transparent); }

.jv-tool-stage :is(.jv-type-tab, .jv-order-btn, .jv-overflow-action, .jv-completion-slot) { -webkit-tap-highlight-color: transparent; }
.jv-control-ripple {
    position: absolute; z-index: 5; border-radius: 50%; pointer-events: none; background: color-mix(in srgb, var(--amber) 30%, rgba(255,255,255,.72));
    transform: scale(0); opacity: .72; animation: jv-control-ripple .56s ease-out forwards;
}
@keyframes jv-control-ripple { to { transform: scale(1); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
    .jv-completion-slot.is-filled:not([disabled]):hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 7px 16px var(--tool-glow); }
    .jv-tool-stage :is(input, select):hover:not(:disabled) { transform: translateY(-1px); }
}

@media (max-width: 620px), (max-width: 900px) and (max-height: 560px) {
    .jv-lab > .jv-chips { gap: 5px; }
    .jv-lab > .jv-chips .jv-chip { min-height: 30px; padding: 4px 9px 4px 11px; border-radius: 8px; }
    .jv-lab > .jv-chips .jv-chip::before { inset-block: 5px; left: 3px; width: 2px; }
    .jv-lab > .jv-chips .jv-chip strong { font-size: 10.5px; }
    .jv-tool-stage .jv-chips { margin-inline: 0; padding-inline: 0; }
    .jv-tool-stage { border-radius: 10px; }
    .jv-status-row > span { min-height: 19px; padding: 2px 6px; font-size: 8.75px; }
    .jv-q-title { margin: 4px 0 6px; padding: 5px 7px 5px 11px; border-radius: 8px; font-size: 12.5px; }
    .jv-q-title::before { inset-block: 6px; left: 4px; width: 2px; }
    .jv-options { grid-template-columns: 1fr; gap: 5px; }
    .jv-tool-stage .jv-option { min-height: 36px; padding: 6px 8px; border-radius: 8px; font-size: 11.75px; }
    .jv-tool-stage .jv-option::after { width: 16px; height: 16px; font-size: 9px; }
    .jv-tool-stage .jv-opt-key { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }
    .jv-completion-slots { gap: 5px; margin: 5px 0; }
    .jv-completion-slot { min-height: 42px; padding: 5px 7px 5px 11px; border-radius: 8px; }
    .jv-completion-slot small { font-size: 8px; }.jv-completion-slot strong { font-size: 11px; }
    .jv-controls { gap: 5px; margin-top: 7px; padding-top: 7px; }
    .jv-controls .jv-btn { flex: 1 1 82px; min-height: 31px; height: 31px; padding-inline: 8px; font-size: 10.5px; }
    .jv-tool-stage .jv-btn-primary:not([disabled]) { min-width: 0; }
    .jv-feedback { min-height: 42px; margin-top: 6px; padding: 7px 8px 7px 37px; font-size: 10.75px; }
    .jv-feedback::before { left: 8px; top: 7px; width: 21px; height: 21px; border-radius: 7px; font-size: 10px; }
    .jv-feedback strong { font-size: 11px; }
    .jv-progress-card { gap: 4px; padding: 4px; }
    .jv-progress-card > span { flex-basis: 66px; padding: 4px 5px; font-size: 9px; }
    .jv-tool-stage :is(input, select) { min-height: 31px; border-radius: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .jv-tool-panel:not([hidden]) { animation: none; }
    .jv-control-ripple { display: none; }
}