/* ==========================================================================
   QuanLLM V8 · Product Detail
   QMStudy — Learning / Interaction / Feedback
   ========================================================================== */

.product-v8 {
    --q-blue: #5576ee;
    --q-blue-strong: #7893ff;
    --q-cyan: #24b8c5;
    --q-violet: #826be7;
    --q-emerald: #39b98a;
    --q-warm: #d69a49;
    --q-line: rgba(118, 147, 255, .16);
    --q-line-strong: rgba(90, 211, 218, .31);
    --q-card-border: rgba(137, 159, 194, .13);
    --q-card-shadow: 0 24px 72px -52px rgba(0,0,0,.78);
    --product-section-gap: 116px;
    background:
        radial-gradient(circle at 74% 8%, rgba(85,118,238,.05), transparent 30rem),
        var(--bg);
}

html[data-theme="light"] .product-v8 {
    --q-blue: #3158d5;
    --q-blue-strong: #426ce2;
    --q-cyan: #0e8e9c;
    --q-violet: #6d55cb;
    --q-emerald: #14815e;
    --q-warm: #af7225;
    --q-line: rgba(49,88,213,.10);
    --q-line-strong: rgba(14,142,156,.18);
    --q-card-border: rgba(27,48,78,.085);
    --q-card-shadow: 0 25px 66px -48px rgba(31,54,86,.30);
    background:
        radial-gradient(circle at 74% 8%, rgba(49,88,213,.05), transparent 31rem),
        #f7f9fc;
}

/* ---------- Navigation -------------------------------------------------- */

.product-v8 .navbar.scrolled {
    background: rgba(7,16,29,.82);
    border-bottom-color: rgba(142,164,199,.12);
    box-shadow: 0 14px 50px -34px rgba(0,0,0,.72);
}

html[data-theme="light"] .product-v8 .navbar.scrolled {
    background: rgba(248,250,253,.90);
    border-bottom-color: rgba(25,45,76,.075);
    box-shadow: 0 14px 42px -32px rgba(25,45,76,.24);
}

.product-v8 .nav-cta {
    background: linear-gradient(135deg, var(--q-blue), var(--q-cyan));
    box-shadow: 0 10px 26px -17px rgba(66,127,238,.70);
}

/* ---------- Shared typography ----------------------------------------- */

.product-v8 .section-header {
    max-width: 820px;
    margin-bottom: 54px;
}

.product-v8 .section-tag {
    display: inline-block;
    position: relative;
    padding: 0 0 0 28px;
    border: 0;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .71rem;
    font-weight: 700;
    color: var(--q-blue-strong);
}

.product-v8 .section-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    background: var(--q-cyan);
}

.product-v8 .section-header h2 {
    margin-top: 13px;
    letter-spacing: -.026em;
    line-height: 1.18;
}

.product-v8 .section-header p {
    line-height: 1.82;
}

.product-v8 .gradient-text {
    display: block;
    margin-top: 4px;
    background: linear-gradient(100deg, var(--q-blue-strong), var(--q-cyan) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.product-v8 .product-section {
    position: relative;
    overflow: clip;
    padding: var(--product-section-gap) 0;
}

/* ---------- Hero -------------------------------------------------------- */

.product-v8 .product-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 132px 0 76px;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(circle at 82% 25%, rgba(85,118,238,.105), transparent 30rem),
        radial-gradient(circle at 12% 78%, rgba(36,184,197,.065), transparent 27rem),
        linear-gradient(180deg, rgba(255,255,255,.01), transparent 50%);
}

html[data-theme="light"] .product-v8 .product-hero {
    background:
        radial-gradient(circle at 82% 24%, rgba(49,88,213,.07), transparent 31rem),
        radial-gradient(circle at 12% 78%, rgba(14,142,156,.045), transparent 27rem),
        linear-gradient(180deg, #fbfcff 0%, #f7f9fc 100%);
}

.product-v8 .product-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1180px, 92vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--q-line-strong), transparent);
    opacity: .65;
}

.product-v8 .product-hero__field {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.product-v8 .product-field-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--q-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--q-line) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .20;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 78%);
}

.product-v8 .product-field-wave {
    position: absolute;
    height: 320px;
    border: 1px solid var(--q-line-strong);
    border-radius: 50%;
    opacity: .11;
    animation: productFieldOrbit 18s ease-in-out infinite;
}

.product-v8 .product-field-wave--a {
    width: 760px;
    left: -300px;
    bottom: 6%;
    transform: rotate(-12deg);
}

.product-v8 .product-field-wave--b {
    width: 620px;
    right: -250px;
    top: 20%;
    transform: rotate(16deg);
    border-color: var(--q-line);
    animation-duration: 23s;
    animation-direction: reverse;
}

.product-v8 .product-field-symbol {
    position: absolute;
    font-family: "Times New Roman", Georgia, serif;
    color: var(--text-subtle);
    opacity: .14;
    animation: productSymbolFloat 10s ease-in-out infinite;
}

.product-v8 .product-field-symbol--a { left: 8%; top: 29%; font-size: 1.55rem; }
.product-v8 .product-field-symbol--b { right: 8%; bottom: 19%; font-size: .95rem; animation-delay: -4s; }

.product-v8 .product-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: 58px;
    align-items: center;
}

.product-v8 .product-hero__copy {
    min-width: 0;
}

.product-v8 .product-hero__copy .hero-badge {
    margin-bottom: 23px;
    background: rgba(85,118,238,.065);
    border-color: rgba(85,118,238,.15);
    color: var(--q-blue-strong);
}

.product-v8 .product-hero__copy h1 {
    font-size: clamp(2.65rem, 4.5vw, 4.8rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.product-v8 .product-hero__lead {
    margin-top: 28px;
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.86;
    color: var(--text-muted);
}

.product-v8 .product-hero__lead strong {
    color: var(--text);
    font-weight: 650;
}

.product-v8 .product-hero__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 38px;
}

.product-v8 .product-hero__metrics > div {
    padding: 14px 12px;
    border: 1px solid var(--q-card-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    backdrop-filter: blur(10px);
}

.product-v8 .product-hero__metrics strong,
.product-v8 .product-hero__metrics span {
    display: block;
}

.product-v8 .product-hero__metrics strong {
    font-size: 1.14rem;
    color: var(--text);
}

.product-v8 .product-hero__metrics span {
    margin-top: 4px;
    font-size: .68rem;
    color: var(--text-subtle);
    letter-spacing: .025em;
}

/* ---------- Hero workspace demo --------------------------------------- */

.product-v8 .learning-workspace-demo {
    position: relative;
    min-width: 0;
    --demo-tilt-x: 0deg;
    --demo-tilt-y: 0deg;
    transform: perspective(1200px) rotateX(var(--demo-tilt-x)) rotateY(var(--demo-tilt-y));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.product-v8 .learning-workspace-demo::before {
    content: "";
    position: absolute;
    inset: 9% 4% -7%;
    z-index: -1;
    background: radial-gradient(circle, rgba(85,118,238,.16), transparent 65%);
    filter: blur(36px);
    opacity: .56;
}

.product-v8 .workspace-demo__window {
    overflow: hidden;
    border: 1px solid rgba(121,151,204,.16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 78% 15%, rgba(85,118,238,.08), transparent 22rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: 0 40px 100px -58px rgba(23,54,111,.64);
}

html[data-theme="light"] .product-v8 .workspace-demo__window {
    background:
        radial-gradient(circle at 78% 15%, rgba(49,88,213,.06), transparent 22rem),
        rgba(255,255,255,.91);
    box-shadow: 0 34px 80px -50px rgba(32,61,103,.28);
}

.product-v8 .workspace-demo__bar {
    height: 44px;
    display: grid;
    grid-template-columns: 85px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--q-card-border);
    background: rgba(85,118,238,.025);
    font-family: "Courier New", monospace;
    font-size: .63rem;
    color: var(--text-subtle);
}

.product-v8 .workspace-demo__dots {
    display: flex;
    gap: 5px;
}

.product-v8 .workspace-demo__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(128,153,190,.36);
}

.product-v8 .workspace-demo__dots i:first-child { background: #f16f64; }
.product-v8 .workspace-demo__dots i:nth-child(2) { background: #e7b94f; }
.product-v8 .workspace-demo__dots i:nth-child(3) { background: #4abf7d; }

.product-v8 .workspace-demo__bar em {
    font-style: normal;
    color: var(--q-emerald);
}

.product-v8 .workspace-demo__body {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 180px;
    min-height: 390px;
}

.product-v8 .workspace-demo__sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    padding-top: 18px;
    border-right: 1px solid var(--q-card-border);
    background: rgba(85,118,238,.018);
}

.product-v8 .sidebar-logo {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 9px;
    color: white;
    font-weight: 700;
    background: linear-gradient(135deg, var(--q-blue), var(--q-cyan));
}

.product-v8 .workspace-demo__sidebar i {
    width: 17px;
    height: 4px;
    border-radius: 999px;
    background: rgba(128,153,190,.18);
}

.product-v8 .workspace-demo__sidebar i.is-active {
    width: 24px;
    background: var(--q-cyan);
    box-shadow: 0 0 11px rgba(36,184,197,.27);
}

.product-v8 .workspace-demo__lesson {
    position: relative;
    padding: 34px 28px;
    overflow: hidden;
}

.product-v8 .workspace-demo__lesson small {
    display: block;
    font-family: "Courier New", monospace;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--q-blue-strong);
}

.product-v8 .workspace-demo__lesson strong {
    display: block;
    margin-top: 9px;
    font-size: 1.05rem;
}

.product-v8 .lesson-copy,
.product-v8 .lesson-highlight {
    display: block;
    height: 5px;
    border-radius: 999px;
}

.product-v8 .lesson-copy {
    margin-top: 14px;
    background: rgba(128,153,190,.14);
}

.product-v8 .lesson-copy--1 { width: 84%; }
.product-v8 .lesson-copy--2 { width: 68%; }
.product-v8 .lesson-copy--3 { width: 76%; }

.product-v8 .lesson-highlight {
    position: absolute;
    left: 28px;
    top: 127px;
    width: 0;
    background: linear-gradient(90deg, rgba(36,184,197,.18), rgba(85,118,238,.25));
    animation: lessonSelection 7s ease-in-out infinite;
}

.product-v8 .mini-wave {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 31px;
    height: 126px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(85,118,238,.025), transparent),
        rgba(85,118,238,.018);
}

.product-v8 .mini-wave svg {
    position: absolute;
    inset: 15px 0 0;
    width: 100%;
    height: 95px;
}

.product-v8 .mini-wave path {
    fill: none;
    stroke: var(--q-cyan);
    stroke-width: 1.5;
    stroke-dasharray: 6 7;
    vector-effect: non-scaling-stroke;
    animation: miniWaveFlow 10s linear infinite, miniWaveBreath 5.5s ease-in-out infinite;
    transform-origin: center;
}

.product-v8 .mini-wave > span {
    position: absolute;
    left: 9%;
    top: 58%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 6px rgba(85,118,238,.06), 0 0 12px rgba(85,118,238,.28);
    animation: miniProbe 6.2s ease-in-out infinite;
}

.product-v8 .workspace-demo__rail {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 19px 14px;
    border-left: 1px solid var(--q-card-border);
}

.product-v8 .rail-card {
    position: relative;
    min-height: 88px;
    padding: 13px 12px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 12px;
    background: rgba(85,118,238,.022);
}

.product-v8 .rail-card b {
    display: block;
    margin-bottom: 10px;
    font-size: .68rem;
}

.product-v8 .rail-card--tutor > span {
    display: block;
    width: 78%;
    height: 4px;
    margin: 7px 0;
    border-radius: 999px;
    background: rgba(36,184,197,.16);
    transform-origin: left;
    animation: tutorRailType 5.6s ease-in-out infinite;
}

.product-v8 .rail-card--tutor > span:nth-of-type(2) { width: 57%; animation-delay: .1s; }
.product-v8 .rail-card--tutor > span:nth-of-type(3) { width: 69%; animation-delay: .2s; }

.product-v8 .rail-card--tutor > i {
    position: absolute;
    left: 74%;
    bottom: 15px;
    width: 1px;
    height: 7px;
    background: var(--q-cyan);
    animation: cursorBlink .9s step-end infinite;
}

.product-v8 .test-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(128,153,190,.10);
}

.product-v8 .test-progress i {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    animation: testProgress 6s ease-in-out infinite;
}

.product-v8 .mini-graph {
    position: relative;
    height: 44px;
}

.product-v8 .mini-graph i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 4px rgba(85,118,238,.05);
    animation: graphPulse 4.8s ease-in-out infinite;
}

.product-v8 .mini-graph i:first-child { left: 8%; top: 23px; }
.product-v8 .mini-graph i:nth-child(2) { left: 36%; top: 7px; animation-delay: -.8s; background: var(--q-cyan); }
.product-v8 .mini-graph i:nth-child(3) { right: 31%; top: 26px; animation-delay: -1.6s; }
.product-v8 .mini-graph i:nth-child(4) { right: 6%; top: 9px; animation-delay: -2.4s; background: var(--q-emerald); }

.product-v8 .workspace-demo__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    font-size: .72rem;
    color: var(--text-subtle);
}

.product-v8 .workspace-demo__caption span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 5px rgba(57,185,138,.06);
}

/* ---------- Identity strip -------------------------------------------- */

.product-v8 .product-identity {
    padding: 28px 0 12px;
    background: var(--bg);
}

.product-v8 .identity-strip {
    display: grid;
    grid-template-columns: minmax(220px,.75fr) minmax(0,1.55fr) auto;
    gap: 24px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--q-card-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.product-v8 .identity-strip > div:first-child strong,
.product-v8 .identity-strip > div:first-child p {
    display: block;
}

.product-v8 .identity-kicker {
    font-size: .62rem;
    letter-spacing: .14em;
    color: var(--q-cyan);
}

.product-v8 .identity-strip strong {
    margin-top: 3px;
    font-size: .96rem;
}

.product-v8 .identity-strip p {
    margin-top: 2px;
    color: var(--text-subtle);
    font-size: .72rem;
}

.product-v8 .identity-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.product-v8 .identity-tags span {
    padding: 5px 8px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: rgba(85,118,238,.025);
    font-family: "Courier New", monospace;
    font-size: .64rem;
    color: var(--text-subtle);
}

.product-v8 .identity-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: .70rem;
    color: var(--text-subtle);
}

.product-v8 .identity-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 5px rgba(57,185,138,.06);
}

/* ---------- Floating local nav ---------------------------------------- */

.product-v8 .product-local-nav {
    position: sticky;
    top: 78px;
    z-index: 80;
    padding: 12px 0;
    background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 88%, transparent));
    backdrop-filter: blur(14px);
}

.product-v8 .product-local-nav__track {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 3px;
    padding: 5px 7px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--q-card-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 90%, transparent);
    box-shadow: 0 12px 36px -30px rgba(0,0,0,.7);
}

.product-v8 .product-local-nav__track::-webkit-scrollbar { display: none; }

.product-v8 .product-local-nav__track a {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .77rem;
    color: var(--text-subtle);
    transition: color .2s ease, background .2s ease;
}

.product-v8 .product-local-nav__track a:hover,
.product-v8 .product-local-nav__track a.is-active {
    color: var(--text);
    background: rgba(85,118,238,.075);
}

/* ---------- Workbench map --------------------------------------------- */

.product-v8 .product-workbench {
    background:
        radial-gradient(circle at 14% 24%, rgba(36,184,197,.055), transparent 24rem),
        radial-gradient(circle at 84% 72%, rgba(85,118,238,.04), transparent 25rem),
        var(--bg);
}

.product-v8 .workbench-system {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(330px,.68fr);
    gap: 26px;
    align-items: stretch;
}

.product-v8 .workbench-map,
.product-v8 .workbench-detail {
    border: 1px solid var(--q-card-border);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .workbench-map {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(85,118,238,.055), transparent 22rem),
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.3px),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-cyan) 2%);
    background-size: auto, 32px 32px, auto;
}

.product-v8 .workbench-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0 28%, color-mix(in srgb, var(--bg-light) 22%, transparent) 74%);
    pointer-events: none;
}

.product-v8 .workbench-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid var(--q-line);
    border-radius: 50%;
    pointer-events: none;
}

.product-v8 .workbench-orbit--a {
    width: 63%;
    height: 32%;
    margin: -16% -31.5%;
    animation: mapOrbitA 18s linear infinite;
}

.product-v8 .workbench-orbit--b {
    width: 40%;
    height: 67%;
    margin: -33.5% -20%;
    border-color: var(--q-line-strong);
    opacity: .55;
    animation: mapOrbitB 24s linear infinite reverse;
}

.product-v8 .workbench-core,
.product-v8 .workbench-node {
    position: absolute;
    z-index: 4;
    border: 1px solid var(--q-card-border);
    color: var(--text);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.product-v8 .workbench-core {
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    margin: -54px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(85,118,238,.17), rgba(36,184,197,.12));
    font-weight: 700;
    box-shadow: 0 0 0 15px rgba(85,118,238,.035);
}

.product-v8 .workbench-node {
    width: 145px;
    min-height: 72px;
    padding: 12px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--q-blue) 4%);
    text-align: left;
}

.product-v8 .workbench-node b,
.product-v8 .workbench-node small {
    display: block;
}

.product-v8 .workbench-node b {
    font-size: .82rem;
}

.product-v8 .workbench-node small {
    margin-top: 5px;
    font-family: "Courier New", monospace;
    font-size: .55rem;
    color: var(--text-subtle);
}

.product-v8 .workbench-node--textbook { left: 9%; top: 15%; }
.product-v8 .workbench-node--selftest { right: 8%; top: 13%; }
.product-v8 .workbench-node--report { right: 7%; bottom: 14%; }
.product-v8 .workbench-node--graph { left: 8%; bottom: 13%; }
.product-v8 .workbench-node--strategy { left: 50%; bottom: 5%; transform: translateX(-50%); }

.product-v8 .workbench-node:hover,
.product-v8 .workbench-node.is-active,
.product-v8 .workbench-core:hover,
.product-v8 .workbench-core.is-active {
    border-color: rgba(36,184,197,.30);
    background: color-mix(in srgb, var(--bg-light) 91%, var(--q-cyan) 9%);
    box-shadow: 0 18px 42px -32px rgba(36,184,197,.46);
}

.product-v8 .workbench-node:hover {
    transform: translateY(-3px);
}

.product-v8 .workbench-node--strategy:hover {
    transform: translateX(-50%) translateY(-3px);
}

.product-v8 .workbench-flow {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 12px rgba(36,184,197,.62);
    animation: workbenchFlow 8s ease-in-out infinite;
}

.product-v8 .workbench-flow--1 { left: 50%; top: 50%; }
.product-v8 .workbench-flow--2 { left: 50%; top: 50%; animation-delay: -2.65s; }
.product-v8 .workbench-flow--3 { left: 50%; top: 50%; animation-delay: -5.3s; }

.product-v8 .workbench-detail {
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-v8 .workbench-detail__eyebrow {
    font-family: "Courier New", monospace;
    font-size: .66rem;
    letter-spacing: .12em;
    color: var(--q-cyan);
}

.product-v8 .workbench-detail h3 {
    margin: 12px 0 10px;
    font-size: 1.45rem;
}

.product-v8 .workbench-detail p {
    min-height: 106px;
    color: var(--text-muted);
    line-height: 1.78;
}

.product-v8 .workbench-detail code {
    align-self: flex-start;
    margin-top: 12px;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--q-blue-strong);
    background: rgba(85,118,238,.06);
    border: 1px solid var(--q-card-border);
}

.product-v8 .workbench-detail__note {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 25px;
}

.product-v8 .workbench-detail__note span {
    padding: 5px 8px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    color: var(--text-subtle);
    font-size: .66rem;
}

/* ---------- Core experiences ------------------------------------------ */

.product-v8 .core-experiences {
    background:
        radial-gradient(circle at 86% 16%, rgba(85,118,238,.05), transparent 25rem),
        var(--bg);
}

.product-v8 .experience-panel {
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(480px,1.18fr);
    gap: 42px;
    align-items: center;
    margin-bottom: 28px;
    padding: 42px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 12%, rgba(85,118,238,.05), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .experience-panel--tutor {
    grid-template-columns: minmax(480px,1.18fr) minmax(0,.82fr);
    background:
        radial-gradient(circle at 15% 12%, rgba(36,184,197,.05), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-cyan) 2%);
}

.product-v8 .experience-panel--adaptive {
    background:
        radial-gradient(circle at 83% 18%, rgba(57,185,138,.045), transparent 19rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-emerald) 2%);
}

.product-v8 .experience-index {
    display: block;
    margin-bottom: 15px;
    font-family: "Courier New", monospace;
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--q-cyan);
}

.product-v8 .experience-copy h3 {
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: -.025em;
}

.product-v8 .experience-copy p {
    margin-top: 16px;
    color: var(--text-muted);
    line-height: 1.82;
}

.product-v8 .experience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 21px;
}

.product-v8 .experience-tags span {
    padding: 6px 9px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    font-family: "Courier New", monospace;
    font-size: .64rem;
    color: var(--text-subtle);
}

/* experiment */
.product-v8 .experiment-stage {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 19px;
    background:
        linear-gradient(180deg, rgba(85,118,238,.025), transparent),
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px);
    background-size: auto, 28px 28px;
}

.product-v8 .experiment-stage__label {
    position: absolute;
    z-index: 3;
    left: 18px;
    top: 15px;
    font-family: "Courier New", monospace;
    font-size: .60rem;
    color: var(--text-subtle);
}

.product-v8 .experiment-stage svg {
    position: absolute;
    inset: 28px -4% 0;
    width: 108%;
    height: 245px;
}

.product-v8 .exp-wave {
    fill: none;
    vector-effect: non-scaling-stroke;
    transform-origin: center;
}

.product-v8 .exp-wave--ghost {
    stroke: var(--q-blue);
    stroke-width: 1;
    opacity: .31;
    animation: expWaveGhost 8s ease-in-out infinite reverse;
}

.product-v8 .exp-wave--main {
    stroke: var(--q-cyan);
    stroke-width: 1.7;
    stroke-dasharray: 7 8;
    animation: expWaveDash 12s linear infinite, expWaveMain 6s ease-in-out infinite;
}

.product-v8 .experiment-bars {
    position: absolute;
    right: 5%;
    top: 45px;
    bottom: 34px;
    width: 33%;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    opacity: .16;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

.product-v8 .experiment-bars i {
    width: 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, var(--q-cyan), var(--q-blue), transparent);
    animation: expBars 4.8s ease-in-out infinite;
}

.product-v8 .experiment-bars i:nth-child(2) { animation-delay: -.55s; }
.product-v8 .experiment-bars i:nth-child(3) { animation-delay: -1.1s; }
.product-v8 .experiment-bars i:nth-child(4) { animation-delay: -1.65s; }
.product-v8 .experiment-bars i:nth-child(5) { animation-delay: -2.2s; }
.product-v8 .experiment-bars i:nth-child(6) { animation-delay: -2.75s; }
.product-v8 .experiment-bars i:nth-child(7) { animation-delay: -3.3s; }
.product-v8 .experiment-bars i:nth-child(8) { animation-delay: -3.85s; }

.product-v8 .experiment-particle {
    position: absolute;
    left: 8%;
    top: 52%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 7px rgba(36,184,197,.06), 0 0 14px rgba(36,184,197,.38);
    animation: expParticle 7s ease-in-out infinite;
}

/* tutor */
.product-v8 .tutor-live-demo {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 19px;
    background:
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px),
        rgba(85,118,238,.012);
    background-size: 30px 30px, auto;
}

.product-v8 .tutor-textbook,
.product-v8 .tutor-panel-demo {
    position: absolute;
    width: 42%;
    border: 1px solid var(--q-card-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
}

.product-v8 .tutor-textbook {
    left: 5%;
    top: 48px;
    height: 220px;
    padding: 24px 20px;
}

.product-v8 .tutor-textbook small {
    font-family: "Courier New", monospace;
    font-size: .58rem;
    color: var(--q-blue-strong);
}

.product-v8 .textline,
.product-v8 .text-selection {
    display: block;
    height: 5px;
    border-radius: 999px;
}

.product-v8 .textline {
    margin-top: 18px;
    background: rgba(128,153,190,.13);
}

.product-v8 .textline--1 { width: 85%; }
.product-v8 .textline--2 { width: 68%; }
.product-v8 .textline--3 { width: 78%; }

.product-v8 .text-selection {
    position: absolute;
    left: 20px;
    top: 100px;
    width: 0;
    background: linear-gradient(90deg, rgba(36,184,197,.18), rgba(85,118,238,.25));
    animation: liveSelection 8s ease-in-out infinite;
}

.product-v8 .selection-actions {
    position: absolute;
    left: 34px;
    top: 120px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    animation: liveActions 8s ease-in-out infinite;
}

.product-v8 .selection-actions b {
    padding: 5px 7px;
    border: 1px solid var(--q-card-border);
    border-radius: 999px;
    font-size: .52rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--bg-light) 92%, var(--q-cyan) 8%);
}

.product-v8 .tutor-panel-demo {
    right: 5%;
    top: 36px;
    height: 248px;
    overflow: hidden;
}

.product-v8 .tutor-panel-demo__head {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--q-card-border);
    font-size: .62rem;
    color: var(--text-muted);
}

.product-v8 .tutor-panel-demo__head span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
}

.product-v8 .thinking-stage {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 14px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(85,118,238,.045);
    font-family: "Courier New", monospace;
    font-size: .52rem;
    color: var(--text-subtle);
    opacity: .35;
    animation: liveThinking 8s ease-in-out infinite;
}

.product-v8 .thinking-stage i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-blue);
    animation: thinkingPulse 1.15s ease-in-out infinite;
}

.product-v8 .stream-answer {
    position: relative;
    height: 120px;
    margin: 0 14px;
}

.product-v8 .stream-line {
    position: absolute;
    left: 0;
    height: 5px;
    border-radius: 999px;
    background: rgba(36,184,197,.17);
    transform: scaleX(.04);
    transform-origin: left center;
    animation: streamLine 8s ease-in-out infinite;
}

.product-v8 .stream-line--1 { top: 18px; width: 87%; }
.product-v8 .stream-line--2 { top: 39px; width: 72%; animation-delay: .12s; }
.product-v8 .stream-line--3 { top: 60px; width: 92%; animation-delay: .24s; }
.product-v8 .stream-line--4 { top: 81px; width: 61%; animation-delay: .36s; }

.product-v8 .stream-cursor {
    position: absolute;
    left: 61%;
    top: 78px;
    width: 1px;
    height: 8px;
    background: var(--q-cyan);
    animation: cursorBlink .8s step-end infinite;
}

.product-v8 .tutor-live-bridge {
    position: absolute;
    left: 47%;
    top: 52%;
    width: 6%;
    height: 1px;
    background: linear-gradient(90deg, var(--q-cyan), var(--q-blue));
}

.product-v8 .tutor-live-bridge::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    animation: liveBridge 8s ease-in-out infinite;
}

/* adaptive */
.product-v8 .adaptive-loop {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 19px;
    background:
        radial-gradient(circle at center, rgba(57,185,138,.04), transparent 14rem),
        radial-gradient(circle at 1px 1px, rgba(57,185,138,.10) 0 1px, transparent 1.3px);
    background-size: auto, 28px 28px;
}

.product-v8 .adaptive-loop svg {
    position: absolute;
    inset: 18px 7%;
    width: 86%;
    height: 86%;
}

.product-v8 .adaptive-loop path {
    fill: none;
    stroke: var(--q-line-strong);
    stroke-width: 1.2;
    stroke-dasharray: 6 7;
    animation: adaptiveDash 10s linear infinite;
}

.product-v8 .adaptive-node {
    position: absolute;
    z-index: 3;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid var(--q-card-border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 95%, var(--q-blue) 5%);
    animation: adaptiveNode 6.6s ease-in-out infinite;
}

.product-v8 .adaptive-node b { font-size: .82rem; }
.product-v8 .adaptive-node small {
    font-family: "Courier New", monospace;
    font-size: .50rem;
    color: var(--text-subtle);
}

.product-v8 .adaptive-node--mastery { left: 13%; top: 33px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-emerald) 6%); }
.product-v8 .adaptive-node--question { right: 12%; top: 76px; animation-delay: -1.5s; }
.product-v8 .adaptive-node--error { right: 28%; bottom: 19px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-warm) 6%); animation-delay: -3s; }
.product-v8 .adaptive-node--review { left: 11%; bottom: 31px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%); animation-delay: -4.5s; }

.product-v8 .adaptive-signal {
    position: absolute;
    z-index: 4;
    left: 20%;
    top: 64px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 12px rgba(57,185,138,.52);
    animation: adaptiveSignal 6.6s cubic-bezier(.4,0,.2,1) infinite;
}

/* ---------- Supporting capabilities ---------------------------------- */

.product-v8 .supporting-block {
    margin-top: 84px;
}

.product-v8 .supporting-block__head {
    margin-bottom: 26px;
}

.product-v8 .supporting-block__head h3 {
    margin-top: 11px;
    font-size: 1.45rem;
}

.product-v8 .supporting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.product-v8 .supporting-grid article {
    position: relative;
    min-height: 190px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    transition: transform .25s ease, border-color .25s ease;
}

.product-v8 .supporting-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(85,118,238,.22);
}

.product-v8 .supporting-grid article > span {
    font-family: "Courier New", monospace;
    font-size: .63rem;
    color: var(--q-blue-strong);
}

.product-v8 .supporting-grid h4 {
    margin: 18px 0 9px;
    font-size: 1rem;
}

.product-v8 .supporting-grid p {
    color: var(--text-muted);
    font-size: .83rem;
    line-height: 1.68;
}

/* ---------- Verification --------------------------------------------- */

.product-v8 .verification-section {
    background:
        radial-gradient(circle at 82% 18%, rgba(85,118,238,.075), transparent 27rem),
        radial-gradient(circle at 12% 80%, rgba(36,184,197,.045), transparent 22rem),
        var(--bg);
}

.product-v8 .verification-story {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    gap: 24px;
}

.product-v8 .verification-flow {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    border: 1px solid var(--q-card-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    background-size: 32px 32px, auto;
    box-shadow: var(--q-card-shadow);
}

.product-v8 .verify-step {
    position: relative;
    padding: 16px 18px 16px 64px;
    border: 1px solid var(--q-card-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
}

.product-v8 .verify-step > span {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Courier New", monospace;
    font-size: .66rem;
    color: var(--q-blue-strong);
}

.product-v8 .verify-step strong,
.product-v8 .verify-step small {
    display: block;
}

.product-v8 .verify-step strong { font-size: .88rem; }
.product-v8 .verify-step small { margin-top: 3px; color: var(--text-subtle); font-size: .68rem; }

.product-v8 .verify-step--harness {
    border-color: rgba(36,184,197,.20);
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%);
}

.product-v8 .verify-link {
    position: relative;
    width: 1px;
    height: 24px;
    margin: 0 auto;
    background: var(--q-line-strong);
}

.product-v8 .verify-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    transform: translateX(-50%);
    animation: verifySignal 3.6s linear infinite;
}

.product-v8 .verification-facts {
    display: grid;
    gap: 12px;
}

.product-v8 .verification-facts > div {
    padding: 22px;
    border: 1px solid var(--q-card-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
}

.product-v8 .verification-facts span {
    font-family: "Courier New", monospace;
    font-size: .61rem;
    letter-spacing: .1em;
    color: var(--q-cyan);
}

.product-v8 .verification-facts strong {
    display: block;
    margin-top: 10px;
    font-size: .98rem;
}

.product-v8 .verification-facts p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: .80rem;
    line-height: 1.65;
}

.product-v8 .verification-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 22px;
}

.product-v8 .verification-statuses > span {
    padding: 6px 9px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: rgba(85,118,238,.025);
    font-family: "Courier New", monospace;
    font-size: .62rem;
    color: var(--text-subtle);
}

.product-v8 .verification-statuses .status-chip--ok {
    color: var(--q-emerald);
    border-color: rgba(57,185,138,.18);
    background: rgba(57,185,138,.055);
}

.product-v8 .verification-statuses a {
    margin-left: auto;
    font-size: .80rem;
    font-weight: 650;
    color: var(--q-blue-strong);
}

/* ---------- Curriculum ------------------------------------------------ */

.product-v8 .curriculum-section {
    background:
        radial-gradient(circle at 14% 28%, rgba(36,184,197,.045), transparent 25rem),
        var(--bg);
}

.product-v8 .qm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--q-card-border);
    border-radius: 19px;
    background: var(--bg-light);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .qm-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.product-v8 .qm-table caption {
    padding: 17px 19px 11px;
    text-align: left;
    font-size: .75rem;
    color: var(--text-subtle);
}

.product-v8 .qm-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.product-v8 .qm-table th,
.product-v8 .qm-table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--q-card-border);
}

.product-v8 .qm-table th {
    background: color-mix(in srgb, var(--bg-light) 96%, var(--q-blue) 4%);
    color: var(--text-subtle);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.product-v8 .qm-table td {
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.62;
}

.product-v8 .qm-table td:first-child {
    width: 42%;
}

.product-v8 .qm-table td b {
    display: inline-block;
    min-width: 34px;
    margin-right: 8px;
    font-family: "Courier New", monospace;
    font-size: .68rem;
    color: var(--q-blue-strong);
}

.product-v8 .qm-table tbody tr {
    transition: background .2s ease;
}

.product-v8 .qm-table tbody tr:hover {
    background: rgba(85,118,238,.028);
}

.product-v8 .table-note {
    margin-top: 14px;
    color: var(--text-subtle);
    font-size: .78rem;
}

/* ---------- Run locally ------------------------------------------------ */

.product-v8 .start-section {
    background:
        radial-gradient(circle at 84% 70%, rgba(130,107,231,.05), transparent 25rem),
        var(--bg);
}

.product-v8 .runtime-panel {
    padding: 30px;
    border: 1px solid var(--q-card-border);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(85,118,238,.028), transparent),
        var(--bg-light);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .runtime-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 11px;
}

.product-v8 .runtime-facts > div {
    padding: 14px;
    border: 1px solid var(--q-card-border);
    border-radius: 12px;
    background: rgba(85,118,238,.018);
}

.product-v8 .runtime-facts span,
.product-v8 .runtime-facts strong {
    display: block;
}

.product-v8 .runtime-facts span {
    font-family: "Courier New", monospace;
    font-size: .58rem;
    letter-spacing: .10em;
    color: var(--q-cyan);
}

.product-v8 .runtime-facts strong {
    margin-top: 7px;
    font-size: .90rem;
}

.product-v8 .runtime-command {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(118,147,255,.14);
    border-radius: 12px;
    background: #0a1527;
    color: #c9d7e9;
}

.product-v8 .runtime-command > span {
    color: var(--q-cyan);
}

.product-v8 .runtime-command code {
    color: #dbe7f7;
}

.product-v8 .copy-command {
    padding: 6px 9px;
    border: 1px solid rgba(118,147,255,.18);
    border-radius: 7px;
    background: rgba(85,118,238,.12);
    color: #c9d7e9;
    cursor: pointer;
}

.product-v8 .runtime-panel > p {
    margin-top: 15px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.7;
}

.product-v8 .deployment-details {
    margin-top: 16px;
    border: 1px solid var(--q-card-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-violet) 2%);
    overflow: hidden;
}

.product-v8 .deployment-details summary {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.product-v8 .deployment-details summary::-webkit-details-marker { display: none; }

.product-v8 .deployment-details summary span {
    font-weight: 650;
}

.product-v8 .deployment-details summary small {
    color: var(--text-subtle);
}

.product-v8 .deployment-details__body {
    display: grid;
    gap: 12px;
    padding: 0 20px 20px;
}

.product-v8 .deployment-details__body p {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.72;
}

/* ---------- CTA -------------------------------------------------------- */

.product-v8 .product-cta {
    padding: 96px 0 88px;
    background: linear-gradient(180deg, var(--bg), rgba(85,118,238,.025), var(--bg));
}

.product-v8 .cta-card-branch {
    overflow: hidden;
    border: 1px solid rgba(157,184,222,.13);
    background:
        radial-gradient(circle at 82% 20%, rgba(85,118,238,.22), transparent 19rem),
        radial-gradient(circle at 14% 86%, rgba(36,184,197,.12), transparent 20rem),
        linear-gradient(135deg, #091523, #0c1a2b 52%, #0a1423);
    color: #f7faff;
    box-shadow: 0 34px 100px -50px rgba(0,0,0,.86);
}

.product-v8 .cta-card-branch h2 { color: #f8fbff; }
.product-v8 .cta-card-branch p { color: #b8c7d9; opacity: 1; }

.product-v8 .cta-card-branch .btn-secondary {
    color: #f7faff !important;
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(255,255,255,.16) !important;
}

html[data-theme="light"] .product-v8 .product-cta {
    background:
        radial-gradient(circle at 50% 52%, rgba(49,88,213,.06), transparent 38rem),
        linear-gradient(180deg, #f7f9fc, #f1f5fa 50%, #f7f9fc);
}

html[data-theme="light"] .product-v8 .cta-card-branch {
    border-color: rgba(49,88,213,.10);
    background:
        radial-gradient(circle at 84% 18%, rgba(49,88,213,.10), transparent 42%),
        radial-gradient(circle at 13% 86%, rgba(14,142,156,.075), transparent 44%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,250,254,.98) 50%, rgba(238,245,251,.98));
    color: #0b1726;
    box-shadow: 0 28px 70px -46px rgba(28,56,93,.30);
}

html[data-theme="light"] .product-v8 .cta-card-branch h2 { color: #0b1726; }
html[data-theme="light"] .product-v8 .cta-card-branch p { color: #52637a; }
html[data-theme="light"] .product-v8 .cta-card-branch .btn-secondary {
    color: #1d2d43 !important;
    background: rgba(255,255,255,.76) !important;
    border-color: rgba(29,45,67,.14) !important;
}

/* ---------- Motion ----------------------------------------------------- */

@keyframes productFieldOrbit {
    0%,100% { transform: rotate(-12deg) scale(.96); }
    50% { transform: rotate(-8deg) scale(1.06); }
}

@keyframes productSymbolFloat {
    0%,100% { transform: translateY(0); opacity: .10; }
    50% { transform: translateY(-8px); opacity: .20; }
}

@keyframes lessonSelection {
    0%,12% { width: 0; }
    28%,72% { width: 58%; }
    100% { width: 0; }
}

@keyframes miniWaveFlow { to { stroke-dashoffset: -150; } }

@keyframes miniWaveBreath {
    0%,100% { transform: scaleY(.82); }
    50% { transform: scaleY(1.14); }
}

@keyframes miniProbe {
    0%,100% { left: 9%; top: 58%; }
    32% { left: 38%; top: 28%; }
    61% { left: 67%; top: 68%; }
    82% { left: 85%; top: 39%; }
}

@keyframes tutorRailType {
    0%,30% { transform: scaleX(.08); opacity: .25; }
    60%,88% { transform: scaleX(1); opacity: .9; }
    100% { transform: scaleX(.08); opacity: .2; }
}

@keyframes cursorBlink { 50% { opacity: 0; } }

@keyframes testProgress {
    0%,100% { width: 28%; }
    55% { width: 82%; }
}

@keyframes graphPulse {
    0%,100% { transform: scale(.78); opacity: .4; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes mapOrbitA { to { transform: rotate(360deg); } }
@keyframes mapOrbitB { to { transform: rotate(-360deg); } }

@keyframes workbenchFlow {
    0%,100% { transform: translate(-110px,-105px); opacity: .2; }
    22% { transform: translate(110px,-100px); opacity: 1; }
    46% { transform: translate(120px,100px); opacity: 1; }
    70% { transform: translate(-115px,105px); opacity: 1; }
    88% { transform: translate(0,130px); opacity: .8; }
}

@keyframes expWaveDash { to { stroke-dashoffset: -180; } }
@keyframes expWaveGhost {
    0%,100% { transform: scaleY(.82); }
    50% { transform: scaleY(1.10); }
}
@keyframes expWaveMain {
    0%,100% { transform: translateY(4px) scaleY(.88); }
    50% { transform: translateY(-7px) scaleY(1.14); }
}
@keyframes expBars {
    0%,100% { transform: scaleY(.24); opacity: .25; }
    48% { transform: scaleY(1); opacity: .78; }
}
@keyframes expParticle {
    0%,100% { left: 8%; top: 52%; }
    28% { left: 35%; top: 25%; }
    57% { left: 61%; top: 66%; }
    82% { left: 83%; top: 39%; }
}

@keyframes liveSelection {
    0%,10% { width: 0; }
    24%,72% { width: 61%; }
    100% { width: 0; }
}
@keyframes liveActions {
    0%,18% { opacity: 0; transform: translateY(4px); }
    30%,56% { opacity: 1; transform: translateY(0); }
    68%,100% { opacity: 0; transform: translateY(4px); }
}
@keyframes liveThinking {
    0%,40% { opacity: .16; }
    52%,68% { opacity: 1; }
    82%,100% { opacity: .2; }
}
@keyframes thinkingPulse {
    0%,100% { transform: scale(.8); opacity: .35; }
    50% { transform: scale(1.18); opacity: 1; }
}
@keyframes streamLine {
    0%,52% { transform: scaleX(.04); opacity: .2; }
    72%,91% { transform: scaleX(1); opacity: .9; }
    100% { transform: scaleX(.04); opacity: .18; }
}
@keyframes liveBridge {
    0%,30% { left: 0; opacity: 0; }
    43% { opacity: 1; }
    56% { left: 100%; opacity: 1; }
    65%,100% { left: 100%; opacity: 0; }
}

@keyframes adaptiveDash { to { stroke-dashoffset: -140; } }
@keyframes adaptiveNode {
    0%,100% { transform: scale(.92); opacity: .58; }
    50% { transform: scale(1.07); opacity: 1; }
}
@keyframes adaptiveSignal {
    0%,5% { left: 20%; top: 64px; background: var(--q-emerald); opacity: .4; }
    25% { left: 80%; top: 105px; background: var(--q-blue); opacity: 1; }
    49% { left: 65%; top: 250px; background: var(--q-warm); opacity: 1; }
    72% { left: 18%; top: 228px; background: var(--q-cyan); opacity: 1; }
    94%,100% { left: 20%; top: 64px; background: var(--q-emerald); opacity: .5; }
}

@keyframes verifySignal {
    0% { top: -3px; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: calc(100% + 3px); opacity: 0; }
}

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 1180px) {
    .product-v8 .product-hero__layout {
        grid-template-columns: minmax(0,.92fr) minmax(450px,1.08fr);
        gap: 36px;
    }
    .product-v8 .workspace-demo__body {
        grid-template-columns: 48px minmax(0,1fr) 160px;
    }
}

@media (max-width: 1020px) {
    .product-v8 .product-hero {
        min-height: auto;
        padding-top: 142px;
    }

    .product-v8 .product-hero__layout {
        grid-template-columns: 1fr;
    }

    .product-v8 .learning-workspace-demo {
        max-width: 760px;
        margin: 12px auto 0;
    }

    .product-v8 .identity-strip {
        grid-template-columns: 1fr;
    }

    .product-v8 .identity-status {
        white-space: normal;
    }

    .product-v8 .workbench-system,
    .product-v8 .verification-story {
        grid-template-columns: 1fr;
    }

    .product-v8 .experience-panel,
    .product-v8 .experience-panel--tutor {
        grid-template-columns: 1fr;
    }

    .product-v8 .experience-panel--tutor .experience-copy {
        order: -1;
    }

    .product-v8 .supporting-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .product-v8 {
        --product-section-gap: 82px;
    }

    .product-v8 .product-hero__copy h1 {
        font-size: clamp(2.3rem, 11vw, 3.5rem);
    }

    .product-v8 .product-hero__metrics {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .product-v8 .workspace-demo__body {
        grid-template-columns: 44px minmax(0,1fr);
        min-height: 360px;
    }

    .product-v8 .workspace-demo__rail {
        display: none;
    }

    .product-v8 .product-local-nav {
        top: 66px;
    }

    .product-v8 .workbench-map {
        min-height: 500px;
    }

    .product-v8 .workbench-node {
        width: 120px;
        min-height: 64px;
    }

    .product-v8 .workbench-node--textbook { left: 4%; }
    .product-v8 .workbench-node--selftest { right: 3%; }
    .product-v8 .workbench-node--report { right: 3%; }
    .product-v8 .workbench-node--graph { left: 3%; }

    .product-v8 .experience-panel {
        min-height: 0;
        padding: 26px;
        gap: 28px;
    }

    .product-v8 .experiment-stage,
    .product-v8 .tutor-live-demo,
    .product-v8 .adaptive-loop {
        min-height: 280px;
    }

    .product-v8 .tutor-textbook,
    .product-v8 .tutor-panel-demo {
        width: 44%;
    }

    .product-v8 .supporting-grid {
        grid-template-columns: 1fr;
    }

    .product-v8 .runtime-facts {
        grid-template-columns: 1fr;
    }

    .product-v8 .verification-statuses a {
        margin-left: 0;
        width: 100%;
        margin-top: 8px;
    }
}

@media (max-width: 540px) {
    .product-v8 .product-hero__metrics {
        grid-template-columns: 1fr 1fr;
    }

    .product-v8 .workspace-demo__window {
        border-radius: 16px;
    }

    .product-v8 .workspace-demo__lesson {
        padding: 28px 18px;
    }

    .product-v8 .mini-wave {
        left: 18px;
        right: 18px;
    }

    .product-v8 .workbench-map {
        min-height: 520px;
    }

    .product-v8 .workbench-core {
        width: 90px;
        height: 90px;
        margin: -45px;
    }

    .product-v8 .workbench-node {
        width: 108px;
        padding: 10px;
    }

    .product-v8 .workbench-node small {
        display: none;
    }

    .product-v8 .workbench-node--strategy {
        bottom: 7%;
    }

    .product-v8 .experience-panel {
        padding: 22px;
    }

    .product-v8 .tutor-live-demo {
        min-height: 360px;
    }

    .product-v8 .tutor-textbook {
        left: 7%;
        top: 28px;
        width: 86%;
        height: 140px;
    }

    .product-v8 .tutor-panel-demo {
        left: 7%;
        right: auto;
        top: 194px;
        width: 86%;
        height: 138px;
    }

    .product-v8 .tutor-live-bridge {
        left: 50%;
        top: 169px;
        width: 1px;
        height: 25px;
        background: var(--q-line-strong);
    }

    .product-v8 .tutor-live-bridge::after {
        left: -2px;
        top: 0;
        animation: none;
    }

    .product-v8 .thinking-stage {
        margin-top: 10px;
    }

    .product-v8 .stream-answer {
        height: 65px;
    }

    .product-v8 .stream-line--1 { top: 7px; }
    .product-v8 .stream-line--2 { top: 20px; }
    .product-v8 .stream-line--3 { top: 33px; }
    .product-v8 .stream-line--4 { top: 46px; }
    .product-v8 .stream-cursor { top: 43px; }

    .product-v8 .runtime-command {
        grid-template-columns: auto 1fr;
    }

    .product-v8 .copy-command {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* ---------- Reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .product-v8 *,
    .product-v8 *::before,
    .product-v8 *::after {
        scroll-behavior: auto !important;
    }

    .product-v8 .product-field-wave,
    .product-v8 .product-field-symbol,
    .product-v8 .lesson-highlight,
    .product-v8 .mini-wave path,
    .product-v8 .mini-wave > span,
    .product-v8 .rail-card *,
    .product-v8 .workbench-orbit,
    .product-v8 .workbench-flow,
    .product-v8 .exp-wave,
    .product-v8 .experiment-bars i,
    .product-v8 .experiment-particle,
    .product-v8 .text-selection,
    .product-v8 .selection-actions,
    .product-v8 .thinking-stage,
    .product-v8 .thinking-stage i,
    .product-v8 .stream-line,
    .product-v8 .stream-cursor,
    .product-v8 .tutor-live-bridge::after,
    .product-v8 .adaptive-loop path,
    .product-v8 .adaptive-node,
    .product-v8 .adaptive-signal,
    .product-v8 .verify-link::after {
        animation: none !important;
    }

    .product-v8 .learning-workspace-demo {
        transform: none !important;
        transition: none !important;
    }

    .product-v8 .lesson-highlight { width: 58%; }
    .product-v8 .text-selection { width: 61%; }
    .product-v8 .selection-actions { opacity: 1; transform: none; }
    .product-v8 .thinking-stage { opacity: .75; }
    .product-v8 .stream-line { transform: scaleX(1); opacity: .8; }
}


/* ==========================================================================
   QuanLLM Product V9
   Workbench detail visuals + semantic support cards + live verification
   ========================================================================== */

/* ---------- Workbench readability ------------------------------------- */

.product-v8 .workbench-map {
    min-height: 570px;
}

.product-v8 .workbench-core {
    width: 124px;
    height: 124px;
    margin: -62px;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.product-v8 .workbench-node {
    width: 168px;
    min-height: 82px;
    padding: 14px 15px;
}

.product-v8 .workbench-node b {
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.012em;
}

.product-v8 .workbench-node small {
    margin-top: 7px;
    font-size: .63rem;
    line-height: 1.25;
    opacity: .86;
}

.product-v8 .workbench-node--textbook { left: 7%; top: 13%; }
.product-v8 .workbench-node--selftest { right: 6%; top: 11%; }
.product-v8 .workbench-node--report { right: 5%; bottom: 13%; }
.product-v8 .workbench-node--graph { left: 6%; bottom: 12%; }

/* ---------- Rich workbench detail ------------------------------------ */

.product-v8 .workbench-detail {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    justify-content: flex-start;
    padding: 30px;
    isolation: isolate;
}

.product-v8 .workbench-detail__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 80% 18%, rgba(85,118,238,.13), transparent 18rem),
        radial-gradient(circle at 18% 84%, rgba(36,184,197,.08), transparent 18rem);
    transition: background .45s ease;
}

.product-v8 .workbench-detail__ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .26;
    background-image: radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px);
    background-size: 27px 27px;
    mask-image: radial-gradient(circle at 60% 42%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 60% 42%, #000, transparent 72%);
    animation: detailGridDrift 14s ease-in-out infinite;
}

.product-v8 .workbench-detail--selftest .workbench-detail__ambient {
    background:
        radial-gradient(circle at 78% 20%, rgba(85,118,238,.14), transparent 18rem),
        radial-gradient(circle at 18% 84%, rgba(130,107,231,.07), transparent 17rem);
}

.product-v8 .workbench-detail--report .workbench-detail__ambient {
    background:
        radial-gradient(circle at 78% 18%, rgba(57,185,138,.11), transparent 18rem),
        radial-gradient(circle at 14% 86%, rgba(36,184,197,.07), transparent 18rem);
}

.product-v8 .workbench-detail--graph .workbench-detail__ambient {
    background:
        radial-gradient(circle at 80% 18%, rgba(36,184,197,.13), transparent 18rem),
        radial-gradient(circle at 16% 86%, rgba(85,118,238,.07), transparent 18rem);
}

.product-v8 .workbench-detail--strategy .workbench-detail__ambient {
    background:
        radial-gradient(circle at 80% 18%, rgba(57,185,138,.11), transparent 18rem),
        radial-gradient(circle at 16% 86%, rgba(214,154,73,.06), transparent 18rem);
}

.product-v8 .workbench-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.product-v8 .workbench-detail__header h3 {
    margin: 9px 0 0;
    font-size: 1.48rem;
}

.product-v8 .workbench-detail__header code {
    margin: 0;
    flex: 0 0 auto;
}

.product-v8 .workbench-detail__visual {
    position: relative;
    height: 235px;
    margin: 25px 0 22px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(85,118,238,.018);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="light"] .product-v8 .workbench-detail__visual {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.82));
}

.product-v8 .detail-visual {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px) scale(.985);
    pointer-events: none;
    transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1);
}

.product-v8 .detail-visual.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* textbook visual */
.product-v8 .detail-visual--textbook {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 18px;
    padding: 24px;
    align-items: center;
}

.product-v8 .book-page {
    position: relative;
    height: 155px;
    padding: 18px;
    border: 1px solid var(--q-card-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
}

.product-v8 .book-kicker {
    font-family: "Courier New", monospace;
    font-size: .56rem;
    letter-spacing: .11em;
    color: var(--q-blue-strong);
}

.product-v8 .book-page b {
    display: block;
    margin-top: 8px;
    font-size: .82rem;
}

.product-v8 .book-line,
.product-v8 .book-selection {
    position: absolute;
    left: 18px;
    height: 4px;
    border-radius: 999px;
}

.product-v8 .book-line {
    background: rgba(128,153,190,.15);
}

.product-v8 .book-line--1 { top: 73px; width: 72%; }
.product-v8 .book-line--2 { top: 91px; width: 58%; }
.product-v8 .book-line--3 { top: 109px; width: 66%; }

.product-v8 .book-selection {
    top: 107px;
    width: 0;
    background: linear-gradient(90deg, rgba(36,184,197,.19), rgba(85,118,238,.26));
    animation: detailBookSelect 6.6s ease-in-out infinite;
}

.product-v8 .book-progress {
    position: relative;
    width: 74px;
    height: 74px;
    margin: auto;
    border-radius: 50%;
    background: conic-gradient(var(--q-cyan) 0 62%, rgba(128,153,190,.10) 62% 100%);
    animation: detailProgressRotate 8s ease-in-out infinite;
}

.product-v8 .book-progress::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--bg-light);
}

.product-v8 .book-progress span,
.product-v8 .book-progress i {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.product-v8 .book-progress span::before {
    content: "16";
    font-weight: 700;
    font-size: .82rem;
    color: var(--text);
}

.product-v8 .book-progress i {
    top: calc(50% + 15px);
    width: 22px;
    height: 2px;
    background: var(--q-cyan);
}

/* self-test visual */
.product-v8 .detail-visual--selftest {
    padding: 25px;
}

.product-v8 .test-question {
    width: 58%;
    padding: 17px;
    border: 1px solid var(--q-card-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
}

.product-v8 .test-question > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(85,118,238,.09);
    color: var(--q-blue-strong);
    font-family: "Courier New", monospace;
    font-size: .62rem;
}

.product-v8 .test-question i {
    display: block;
    height: 4px;
    margin-top: 11px;
    border-radius: 999px;
    background: rgba(128,153,190,.14);
}

.product-v8 .test-question i:first-of-type { width: 82%; }
.product-v8 .test-question i:last-of-type { width: 63%; }

.product-v8 .test-options {
    display: grid;
    gap: 9px;
    width: 68%;
    margin-top: 14px;
}

.product-v8 .test-options i {
    position: relative;
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(128,153,190,.10);
    overflow: hidden;
}

.product-v8 .test-options i::after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    animation: detailOptionScan 5.8s ease-in-out infinite;
}

.product-v8 .test-options i:nth-child(2)::after { animation-delay: -.8s; }
.product-v8 .test-options i:nth-child(3)::after { animation-delay: -1.6s; }

.product-v8 .test-score-ring {
    position: absolute;
    right: 26px;
    top: 54px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--q-emerald) 0 84%, rgba(128,153,190,.10) 84% 100%);
}

.product-v8 .test-score-ring::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--bg-light);
}

.product-v8 .test-score-ring b {
    position: relative;
    z-index: 2;
    color: var(--q-emerald);
    font-size: 1.25rem;
    animation: detailScorePulse 4.8s ease-in-out infinite;
}

/* report visual */
.product-v8 .detail-visual--report {
    padding: 22px;
}

.product-v8 .report-bars {
    position: absolute;
    left: 24px;
    bottom: 28px;
    width: 38%;
    height: 140px;
    display: flex;
    align-items: flex-end;
    gap: 11px;
}

.product-v8 .report-bars i {
    flex: 1;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, var(--q-cyan), var(--q-blue));
    opacity: .72;
    transform-origin: bottom;
    animation: detailBarGrow 5.6s ease-in-out infinite;
}

.product-v8 .report-bars i:nth-child(1) { height: 38%; }
.product-v8 .report-bars i:nth-child(2) { height: 58%; animation-delay: -.35s; }
.product-v8 .report-bars i:nth-child(3) { height: 47%; animation-delay: -.7s; }
.product-v8 .report-bars i:nth-child(4) { height: 76%; animation-delay: -1.05s; }
.product-v8 .report-bars i:nth-child(5) { height: 90%; animation-delay: -1.4s; background: linear-gradient(180deg, var(--q-emerald), var(--q-cyan)); }

.product-v8 .detail-visual--report svg {
    position: absolute;
    right: 20px;
    top: 44px;
    width: 53%;
    height: 120px;
}

.product-v8 .detail-visual--report path {
    fill: none;
    stroke: var(--q-emerald);
    stroke-width: 1.8;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    animation: detailReportDash 10s linear infinite;
}

.product-v8 .report-dot {
    position: absolute;
    right: 18%;
    top: 68px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 7px rgba(57,185,138,.06), 0 0 12px rgba(57,185,138,.35);
    animation: detailReportDot 5s ease-in-out infinite;
}

/* graph visual */
.product-v8 .detail-visual--graph {
    background-image: radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px);
    background-size: 26px 26px;
}

.product-v8 .graph-v9-node {
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--q-blue);
    border: 3px solid color-mix(in srgb, var(--bg-light) 92%, transparent);
    box-shadow: 0 0 0 6px rgba(85,118,238,.05);
    animation: detailGraphNode 5.5s ease-in-out infinite;
}

.product-v8 .graph-v9-node--a { left: 12%; top: 48%; }
.product-v8 .graph-v9-node--b { left: 36%; top: 23%; animation-delay: -.7s; background: var(--q-cyan); }
.product-v8 .graph-v9-node--c { left: 49%; top: 70%; animation-delay: -1.4s; }
.product-v8 .graph-v9-node--d { right: 28%; top: 34%; animation-delay: -2.1s; background: var(--q-violet); }
.product-v8 .graph-v9-node--e { right: 10%; top: 56%; animation-delay: -2.8s; background: var(--q-emerald); }

.product-v8 .graph-v9-edge {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(85,118,238,.22), rgba(36,184,197,.45));
    transform-origin: left center;
}

.product-v8 .graph-v9-edge--1 { left: 15%; top: 52%; width: 24%; transform: rotate(-29deg); }
.product-v8 .graph-v9-edge--2 { left: 39%; top: 28%; width: 25%; transform: rotate(50deg); }
.product-v8 .graph-v9-edge--3 { left: 52%; top: 74%; width: 24%; transform: rotate(-40deg); }
.product-v8 .graph-v9-edge--4 { left: 72%; top: 39%; width: 20%; transform: rotate(25deg); }

.product-v8 .graph-v9-signal {
    position: absolute;
    z-index: 4;
    left: 13%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.5);
    animation: detailGraphSignal 6.4s ease-in-out infinite;
}

/* strategy visual */
.product-v8 .detail-visual--strategy svg {
    position: absolute;
    inset: 18px 12%;
    width: 76%;
    height: 78%;
}

.product-v8 .detail-visual--strategy path {
    fill: none;
    stroke: var(--q-line-strong);
    stroke-width: 1.3;
    stroke-dasharray: 6 7;
    animation: detailStrategyDash 10s linear infinite;
}

.product-v8 .strategy-v9-node {
    position: absolute;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--q-card-border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-blue) 6%);
    font-family: "Courier New", monospace;
    font-size: .68rem;
    color: var(--text);
    animation: detailStrategyNode 6s ease-in-out infinite;
}

.product-v8 .strategy-v9-node--m { left: 14%; top: 22px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-emerald) 6%); }
.product-v8 .strategy-v9-node--q { right: 16%; top: 42px; animation-delay: -1.5s; }
.product-v8 .strategy-v9-node--e { right: 28%; bottom: 22px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-warm) 6%); animation-delay: -3s; }
.product-v8 .strategy-v9-node--r { left: 18%; bottom: 28px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%); animation-delay: -4.5s; }

.product-v8 .strategy-v9-signal {
    position: absolute;
    z-index: 4;
    left: 20%;
    top: 42px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 11px rgba(57,185,138,.45);
    animation: detailStrategySignal 6s cubic-bezier(.4,0,.2,1) infinite;
}

.product-v8 .workbench-detail > p {
    min-height: 82px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.74;
}

.product-v8 .workbench-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.product-v8 .workbench-detail__meta span {
    padding: 5px 8px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: rgba(85,118,238,.025);
    font-family: "Courier New", monospace;
    font-size: .62rem;
    color: var(--text-subtle);
}

/* ---------- Supporting cards with visuals ----------------------------- */

.product-v8 .supporting-block__head > p {
    max-width: 760px;
    margin-top: 9px;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.68;
}

.product-v8 .supporting-grid--visual article {
    min-height: 300px;
    padding: 20px;
}

.product-v8 .support-card {
    isolation: isolate;
}

.product-v8 .support-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 82% 8%, rgba(85,118,238,.055), transparent 13rem);
    opacity: 0;
    transition: opacity .25s ease;
}

.product-v8 .support-card:hover::after {
    opacity: 1;
}

.product-v8 .support-visual {
    position: relative;
    height: 90px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(85,118,238,.018);
}

html[data-theme="light"] .product-v8 .support-visual {
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,247,252,.72));
}

.product-v8 .support-index {
    display: block;
    margin-bottom: 0;
}

/* lessons */
.product-v8 .support-visual--lessons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 14px;
}

.product-v8 .lesson-tile {
    display: grid;
    place-items: center;
    width: 38px;
    height: 49px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-light) 95%, var(--q-blue) 5%);
    font-family: "Courier New", monospace;
    font-size: .62rem;
    color: var(--text-subtle);
    animation: supportLessonFloat 6s ease-in-out infinite;
}

.product-v8 .lesson-tile:nth-child(2) { animation-delay: -.6s; }
.product-v8 .lesson-tile:nth-child(3) { animation-delay: -1.2s; }
.product-v8 .lesson-tile:nth-child(4) { animation-delay: -1.8s; }

.product-v8 .support-progress {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 8px;
    height: 2px;
    background: rgba(128,153,190,.10);
}

.product-v8 .support-progress::after {
    content: "";
    display: block;
    width: 22%;
    height: 100%;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    animation: supportProgress 5.5s ease-in-out infinite;
}

/* guide */
.product-v8 .support-visual--guide {
    background:
        radial-gradient(circle at 50% 50%, rgba(36,184,197,.045), transparent 8rem),
        rgba(85,118,238,.012);
}

.product-v8 .guide-bubble {
    position: absolute;
    left: 16px;
    top: 18px;
    width: 46%;
    height: 34px;
    border: 1px solid rgba(85,118,238,.13);
    border-radius: 12px 12px 12px 4px;
    background: rgba(85,118,238,.06);
}

.product-v8 .guide-bubble::before,
.product-v8 .guide-bubble::after {
    content: "";
    position: absolute;
    left: 10px;
    height: 4px;
    border-radius: 999px;
    background: rgba(85,118,238,.18);
}

.product-v8 .guide-bubble::before { top: 9px; width: 72%; }
.product-v8 .guide-bubble::after { top: 19px; width: 52%; }

.product-v8 .guide-branch {
    position: absolute;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, var(--q-cyan), var(--q-blue));
    transform-origin: right center;
}

.product-v8 .guide-branch--a { top: 35px; width: 32%; transform: rotate(-22deg); }
.product-v8 .guide-branch--b { top: 52px; width: 34%; transform: rotate(24deg); }

.product-v8 .guide-hint {
    position: absolute;
    right: 19px;
    top: 28px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(36,184,197,.18);
    border-radius: 50%;
    color: var(--q-cyan);
    background: rgba(36,184,197,.05);
    animation: supportHintPulse 4.5s ease-in-out infinite;
}

/* local */
.product-v8 .local-browser {
    position: absolute;
    left: 18px;
    top: 17px;
    width: 58%;
    height: 56px;
    border: 1px solid var(--q-card-border);
    border-radius: 9px;
}

.product-v8 .local-browser > i {
    position: absolute;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(128,153,190,.32);
}

.product-v8 .local-browser > i:nth-child(1) { left: 9px; }
.product-v8 .local-browser > i:nth-child(2) { left: 18px; }
.product-v8 .local-browser > i:nth-child(3) { left: 27px; }

.product-v8 .local-browser > span {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 10px;
    height: 18px;
    border-radius: 5px;
    background: rgba(85,118,238,.05);
}

.product-v8 .local-key {
    position: absolute;
    right: 12px;
    top: 32px;
    font-family: "Courier New", monospace;
    font-size: .52rem;
    color: var(--q-cyan);
}

.product-v8 .local-pulse {
    position: absolute;
    right: 17px;
    top: 21px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 4px rgba(57,185,138,.06);
    animation: supportLocalPulse 3.8s ease-in-out infinite;
}

/* progress/certificate */
.product-v8 .support-visual--progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.product-v8 .progress-ring-v9 {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--q-cyan) 0 76%, rgba(128,153,190,.10) 76% 100%);
    animation: supportRingPulse 5s ease-in-out infinite;
}

.product-v8 .progress-ring-v9::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--bg-light);
}

.product-v8 .progress-ring-v9 span {
    position: relative;
    z-index: 2;
    font-size: .68rem;
    font-weight: 700;
}

.product-v8 .certificate-v9 {
    position: relative;
    width: 62px;
    height: 48px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--q-emerald) 4%);
}

.product-v8 .certificate-v9 i {
    position: absolute;
    left: 8px;
    height: 3px;
    border-radius: 999px;
    background: rgba(128,153,190,.15);
}

.product-v8 .certificate-v9 i:first-child { top: 11px; width: 62%; }
.product-v8 .certificate-v9 i:nth-child(2) { top: 20px; width: 45%; }

.product-v8 .certificate-v9 b {
    position: absolute;
    right: 7px;
    bottom: 6px;
    color: var(--q-emerald);
    animation: supportCertificateCheck 4.6s ease-in-out infinite;
}

/* knowledge */
.product-v8 .support-visual--knowledge {
    background-image: radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.3px);
    background-size: 22px 22px;
}

.product-v8 .support-graph-node {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 4px rgba(85,118,238,.05);
    animation: supportGraphPulse 4.8s ease-in-out infinite;
}

.product-v8 .support-graph-node--a { left: 16%; top: 45%; }
.product-v8 .support-graph-node--b { left: 40%; top: 22%; background: var(--q-cyan); animation-delay: -.8s; }
.product-v8 .support-graph-node--c { right: 31%; top: 54%; background: var(--q-violet); animation-delay: -1.6s; }
.product-v8 .support-graph-node--d { right: 10%; top: 27%; background: var(--q-emerald); animation-delay: -2.4s; }

.product-v8 .support-graph-edge {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: rgba(85,118,238,.23);
    transform-origin: left center;
}

.product-v8 .support-graph-edge--1 { left: 19%; top: 50%; width: 25%; transform: rotate(-26deg); }
.product-v8 .support-graph-edge--2 { left: 43%; top: 28%; width: 32%; transform: rotate(31deg); }
.product-v8 .support-graph-edge--3 { left: 70%; top: 58%; width: 22%; transform: rotate(-28deg); }

/* notes */
.product-v8 .formula-v9 {
    position: absolute;
    left: 18px;
    top: 27px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 1.35rem;
    color: var(--text);
}

.product-v8 .formula-select-v9 {
    position: absolute;
    left: 14px;
    top: 57px;
    width: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(36,184,197,.22), rgba(85,118,238,.27));
    animation: supportFormulaSelect 5.5s ease-in-out infinite;
}

.product-v8 .note-arrow-v9 {
    position: absolute;
    left: 47%;
    top: 35px;
    color: var(--q-cyan);
    animation: supportNoteArrow 4s ease-in-out infinite;
}

.product-v8 .note-sheet-v9 {
    position: absolute;
    right: 18px;
    top: 17px;
    width: 38%;
    height: 57px;
    border: 1px solid var(--q-card-border);
    border-radius: 8px;
}

.product-v8 .note-sheet-v9 i {
    display: block;
    height: 3px;
    margin: 10px 9px -3px;
    border-radius: 999px;
    background: rgba(128,153,190,.15);
}

.product-v8 .note-sheet-v9 i:nth-child(2) { width: 65%; }
.product-v8 .note-sheet-v9 i:nth-child(3) { width: 78%; }

/* ---------- Verification V9 ------------------------------------------- */

.product-v8 .verification-v9 {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr);
    gap: 24px;
    align-items: stretch;
}

.product-v8 .verification-v9__pipeline,
.product-v8 .verification-monitor {
    border: 1px solid var(--q-card-border);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .verification-v9__pipeline {
    padding: 24px;
    background:
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.4px),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    background-size: 32px 32px, auto;
}

.product-v8 .verification-v9__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--q-card-border);
}

.product-v8 .verification-v9__topbar > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Courier New", monospace;
    font-size: .67rem;
    color: var(--text-subtle);
}

.product-v8 .verification-v9__topbar > span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 5px rgba(57,185,138,.06);
}

.product-v8 .verification-v9__topbar code {
    color: var(--q-blue-strong);
    font-size: .65rem;
}

.product-v8 .verification-flow--v9 {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.product-v8 .verification-flow--v9 .verify-step {
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.product-v8 .verification-flow--v9 .verify-step.is-active {
    transform: translateX(4px);
    border-color: rgba(36,184,197,.30);
    background: color-mix(in srgb, var(--bg-light) 93%, var(--q-cyan) 7%);
    box-shadow: 0 15px 35px -30px rgba(36,184,197,.42);
}

.product-v8 .step-state {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(85,118,238,.05);
    font-family: "Courier New", monospace;
    font-size: .55rem;
    color: var(--text-subtle);
}

.product-v8 .verify-step.is-active .step-state {
    color: var(--q-cyan);
    background: rgba(36,184,197,.07);
}

.product-v8 .verification-monitor {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-v8 .verification-monitor__head {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid var(--q-card-border);
    font-family: "Courier New", monospace;
    font-size: .63rem;
    letter-spacing: .09em;
    color: var(--text-subtle);
}

.product-v8 .verification-monitor__head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 5px rgba(36,184,197,.055);
    animation: verifyMonitorPulse 2.6s ease-in-out infinite;
}

.product-v8 .verification-monitor__graph {
    position: relative;
    height: 140px;
    margin: 16px 16px 0;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 12px;
    background:
        linear-gradient(rgba(85,118,238,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85,118,238,.035) 1px, transparent 1px);
    background-size: 22px 22px;
}

.product-v8 .verification-monitor__graph svg {
    position: absolute;
    inset: 13px 5% 0;
    width: 90%;
    height: 110px;
}

.product-v8 .verification-monitor__graph path {
    fill: none;
    stroke: var(--q-cyan);
    stroke-width: 1.6;
    stroke-dasharray: 6 7;
    vector-effect: non-scaling-stroke;
    animation: verifyGraphDash 10s linear infinite;
}

.product-v8 .trace-dot {
    position: absolute;
    left: 9%;
    top: 80px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 11px rgba(36,184,197,.5);
    animation: verifyTraceDot 6s ease-in-out infinite;
}

.product-v8 .verification-monitor__logs {
    display: grid;
    gap: 1px;
    margin: 14px 16px 0;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 10px;
}

.product-v8 .verification-monitor__logs p {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 7px;
    align-items: center;
    margin: 0;
    padding: 9px 10px;
    background: rgba(85,118,238,.015);
    font-family: "Courier New", monospace;
    font-size: .55rem;
    color: var(--text-subtle);
    transition: background .25s ease, color .25s ease;
}

.product-v8 .verification-monitor__logs p + p {
    border-top: 1px solid var(--q-card-border);
}

.product-v8 .verification-monitor__logs p.is-live {
    background: rgba(36,184,197,.055);
    color: var(--text);
}

.product-v8 .verification-monitor__logs p > span {
    color: var(--q-blue-strong);
}

.product-v8 .verification-monitor__logs p > i {
    font-style: normal;
    color: var(--text-subtle);
}

.product-v8 .verification-monitor__logs p.is-live > i {
    color: var(--q-cyan);
}

.product-v8 .verification-monitor__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 14px 16px 16px;
    padding: 13px 14px;
    border: 1px solid rgba(57,185,138,.13);
    border-radius: 10px;
    background: rgba(57,185,138,.035);
}

.product-v8 .verification-monitor__status small {
    font-family: "Courier New", monospace;
    letter-spacing: .08em;
    color: var(--text-subtle);
}

.product-v8 .verification-monitor__status strong {
    color: var(--q-emerald);
    font-size: .78rem;
}

.product-v8 .verification-facts--visual {
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-top: 22px;
}

.product-v8 .verify-fact {
    min-height: 265px;
}

.product-v8 .verify-fact__visual {
    position: relative;
    height: 80px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(85,118,238,.018);
}

/* model fact */
.product-v8 .model-token {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 5px rgba(85,118,238,.05);
    animation: verifyModelToken 4.8s ease-in-out infinite;
}

.product-v8 .model-token--a { left: 16%; top: 36px; }
.product-v8 .model-token--b { left: 48%; top: 18px; background: var(--q-cyan); animation-delay: -.8s; }
.product-v8 .model-token--c { right: 15%; top: 44px; background: var(--q-violet); animation-delay: -1.6s; }

.product-v8 .model-beam {
    position: absolute;
    left: 20%;
    right: 19%;
    top: 41px;
    height: 1px;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan), var(--q-violet));
    opacity: .42;
}

/* endpoint fact */
.product-v8 .sse-line {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 39px;
    height: 1px;
    background: var(--q-line-strong);
}

.product-v8 .sse-packet {
    position: absolute;
    top: 35px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 9px rgba(36,184,197,.43);
    animation: verifyPacket 4.2s linear infinite;
}

.product-v8 .sse-packet--1 { left: 12%; }
.product-v8 .sse-packet--2 { left: 12%; animation-delay: -1.4s; }
.product-v8 .sse-packet--3 { left: 12%; animation-delay: -2.8s; }

/* credentials fact */
.product-v8 .server-lock {
    position: absolute;
    left: 15%;
    top: 19px;
    width: 48px;
    height: 42px;
    border: 1px solid var(--q-card-border);
    border-radius: 8px;
    background: rgba(57,185,138,.04);
}

.product-v8 .server-lock span {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 13px;
    height: 10px;
    margin-left: -6.5px;
    border: 1px solid var(--q-emerald);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.product-v8 .server-lock i {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 5px;
    height: 8px;
    margin-left: -2.5px;
    border-radius: 3px;
    background: var(--q-emerald);
}

.product-v8 .browser-block {
    position: absolute;
    right: 11%;
    top: 28px;
    font-family: "Courier New", monospace;
    font-size: .55rem;
    font-weight: 400;
    color: var(--text-subtle);
}

.product-v8 .credential-wall {
    position: absolute;
    left: 50%;
    top: 13px;
    width: 1px;
    height: 54px;
    background: linear-gradient(transparent, var(--q-warm), transparent);
    opacity: .55;
    animation: verifyWallPulse 4.6s ease-in-out infinite;
}

/* ---------- New motion keyframes -------------------------------------- */

@keyframes detailGridDrift {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(-7px,5px); }
}
@keyframes detailBookSelect {
    0%,14% { width: 0; }
    32%,72% { width: 54%; }
    100% { width: 0; }
}
@keyframes detailProgressRotate {
    0%,100% { transform: rotate(-8deg); }
    50% { transform: rotate(14deg); }
}
@keyframes detailOptionScan {
    0%,20% { width: 0; opacity: .25; }
    52%,72% { width: 74%; opacity: .8; }
    100% { width: 0; opacity: .2; }
}
@keyframes detailScorePulse {
    0%,100% { transform: scale(.78); opacity: .35; }
    55% { transform: scale(1); opacity: 1; }
}
@keyframes detailBarGrow {
    0%,100% { transform: scaleY(.45); opacity: .45; }
    50% { transform: scaleY(1); opacity: .88; }
}
@keyframes detailReportDash { to { stroke-dashoffset: -120; } }
@keyframes detailReportDot {
    0%,100% { transform: translate(0,16px); }
    50% { transform: translate(-32px,-18px); }
}
@keyframes detailGraphNode {
    0%,100% { transform: scale(.82); opacity: .5; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes detailGraphSignal {
    0%,100% { left: 13%; top: 50%; opacity: .4; }
    28% { left: 37%; top: 26%; opacity: 1; }
    57% { left: 50%; top: 72%; opacity: 1; }
    82% { left: 72%; top: 37%; opacity: 1; }
}
@keyframes detailStrategyDash { to { stroke-dashoffset: -120; } }
@keyframes detailStrategyNode {
    0%,100% { transform: scale(.9); opacity: .58; }
    48% { transform: scale(1.08); opacity: 1; }
}
@keyframes detailStrategySignal {
    0%,5% { left: 20%; top: 42px; background: var(--q-emerald); }
    30% { left: 79%; top: 63px; background: var(--q-blue); }
    57% { left: 66%; top: 185px; background: var(--q-warm); }
    82% { left: 22%; top: 178px; background: var(--q-cyan); }
    100% { left: 20%; top: 42px; background: var(--q-emerald); }
}
@keyframes supportLessonFloat {
    0%,100% { transform: translateY(2px); opacity: .65; }
    50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes supportProgress {
    0%,100% { width: 18%; }
    50% { width: 88%; }
}
@keyframes supportHintPulse {
    0%,100% { transform: scale(.85); opacity: .45; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes supportLocalPulse {
    0%,100% { transform: scale(.75); opacity: .35; }
    50% { transform: scale(1.15); opacity: 1; }
}
@keyframes supportRingPulse {
    0%,100% { transform: rotate(-9deg) scale(.96); }
    50% { transform: rotate(10deg) scale(1.03); }
}
@keyframes supportCertificateCheck {
    0%,55%,100% { transform: scale(.72); opacity: .25; }
    68%,85% { transform: scale(1); opacity: 1; }
}
@keyframes supportGraphPulse {
    0%,100% { transform: scale(.8); opacity: .45; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes supportFormulaSelect {
    0%,15% { width: 0; }
    38%,72% { width: 32%; }
    100% { width: 0; }
}
@keyframes supportNoteArrow {
    0%,100% { transform: translateX(-3px); opacity: .3; }
    50% { transform: translateX(5px); opacity: 1; }
}
@keyframes verifyMonitorPulse {
    0%,100% { transform: scale(.78); opacity: .35; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes verifyGraphDash { to { stroke-dashoffset: -120; } }
@keyframes verifyTraceDot {
    0%,100% { left: 9%; top: 80px; }
    24% { left: 29%; top: 66px; }
    49% { left: 48%; top: 46px; }
    72% { left: 67%; top: 33px; }
    90% { left: 88%; top: 28px; }
}
@keyframes verifyModelToken {
    0%,100% { transform: scale(.8); opacity: .42; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes verifyPacket {
    0% { left: 12%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 84%; opacity: 0; }
}
@keyframes verifyWallPulse {
    0%,100% { opacity: .28; transform: scaleY(.75); }
    50% { opacity: .72; transform: scaleY(1); }
}

/* ---------- V9 responsive refinements -------------------------------- */

@media (max-width: 1080px) {
    .product-v8 .verification-v9 {
        grid-template-columns: 1fr;
    }

    .product-v8 .verification-facts--visual {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 820px) {
    .product-v8 .workbench-map {
        min-height: 540px;
    }

    .product-v8 .workbench-node {
        width: 138px;
    }

    .product-v8 .workbench-node b {
        font-size: .9rem;
    }

    .product-v8 .workbench-node small {
        font-size: .57rem;
    }

    .product-v8 .workbench-detail {
        min-height: 520px;
    }

    .product-v8 .supporting-grid--visual,
    .product-v8 .verification-facts--visual {
        grid-template-columns: 1fr 1fr;
    }

    .product-v8 .verify-fact:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .product-v8 .workbench-map {
        min-height: 510px;
    }

    .product-v8 .workbench-core {
        width: 96px;
        height: 96px;
        margin: -48px;
        font-size: .92rem;
    }

    .product-v8 .workbench-node {
        width: 112px;
        min-height: 62px;
        padding: 10px;
    }

    .product-v8 .workbench-node b {
        font-size: .82rem;
    }

    .product-v8 .workbench-node small {
        display: none;
    }

    .product-v8 .workbench-detail {
        min-height: 500px;
        padding: 22px;
    }

    .product-v8 .workbench-detail__header {
        display: block;
    }

    .product-v8 .workbench-detail__header code {
        display: inline-block;
        margin-top: 10px;
    }

    .product-v8 .workbench-detail__visual {
        height: 220px;
    }

    .product-v8 .detail-visual--textbook {
        grid-template-columns: 1fr 75px;
        padding: 16px;
    }

    .product-v8 .supporting-grid--visual,
    .product-v8 .verification-facts--visual {
        grid-template-columns: 1fr;
    }

    .product-v8 .verify-fact:last-child {
        grid-column: auto;
    }

    .product-v8 .verification-monitor__logs p {
        grid-template-columns: 24px 1fr;
    }

    .product-v8 .verification-monitor__logs p i {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-v8 .workbench-detail__ambient::after,
    .product-v8 .workbench-detail__visual *,
    .product-v8 .support-visual *,
    .product-v8 .verification-monitor *,
    .product-v8 .verify-fact__visual * {
        animation: none !important;
    }

    .product-v8 .book-selection { width: 54%; }
    .product-v8 .test-options i::after { width: 74%; }
    .product-v8 .formula-select-v9 { width: 32%; }
}


/* ==========================================================================
   QuanLLM Product V10
   Title icons + single active verification state + stronger fact animations
   ========================================================================== */

/* ---------- Six capability title icons -------------------------------- */

.product-v8 .support-card h4 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.product-v8 .support-title-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-left: -2px;
    border: 1px solid var(--q-card-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 93%, var(--q-blue) 7%);
    color: var(--q-blue-strong);
    font-size: .84rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.product-v8 .support-title-icon.icon-guide {
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%);
}

.product-v8 .support-title-icon.icon-local {
    background: color-mix(in srgb, var(--bg-light) 95%, var(--q-violet) 5%);
}

.product-v8 .support-title-icon.icon-progress {
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-emerald) 6%);
    color: var(--q-emerald);
}

.product-v8 .support-title-icon.icon-graph {
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%);
    color: var(--q-cyan);
    font-size: .92rem;
}

.product-v8 .support-title-icon.icon-notes {
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-violet) 6%);
    color: var(--q-violet);
    font-family: "Times New Roman", Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
}

/* ---------- Verification: exactly one filled active step --------------- */

/* Harness used to carry a permanent cyan fill. Keep every inactive step
   neutral so fill means only "currently processing". */
.product-v8 .verification-flow--v9 .verify-step--harness:not(.is-active) {
    border-color: var(--q-card-border);
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: none;
}

.product-v8 .verification-flow--v9 .verify-step:not(.is-active) {
    transform: translateX(0);
}

/* ---------- MODEL fact: visible inference motion ----------------------- */

.product-v8 .verify-fact__visual--model {
    background:
        radial-gradient(circle at 50% 50%, rgba(85,118,238,.055), transparent 7rem),
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.35px);
    background-size: auto, 20px 20px;
}

.product-v8 .model-orbit-v10 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: 35%;
    transform: translate(-50%,-50%) rotate(-8deg);
    border: 1px solid rgba(36,184,197,.20);
    border-radius: 50%;
    animation: modelOrbitV10 6.8s linear infinite;
}

.product-v8 .model-orbit-v10::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 11px rgba(36,184,197,.58);
}

.product-v8 .model-packet-v10 {
    position: absolute;
    z-index: 4;
    left: 16%;
    top: 37px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-blue-strong);
    box-shadow: 0 0 0 5px rgba(85,118,238,.055), 0 0 11px rgba(85,118,238,.38);
    animation: modelPacketV10 4.6s cubic-bezier(.4,0,.2,1) infinite;
}

.product-v8 .model-ripple-v10 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px;
    border: 1px solid rgba(85,118,238,.20);
    border-radius: 50%;
    animation: modelRippleV10 3.4s ease-out infinite;
}

.product-v8 .verify-fact__visual--model .model-beam {
    overflow: visible;
    animation: modelBeamV10 3.8s ease-in-out infinite;
}

/* ---------- CREDENTIALS fact: browser request visibly stops at wall ---- */

.product-v8 .verify-fact__visual--credentials {
    background:
        linear-gradient(90deg, rgba(57,185,138,.026) 0 49.5%, rgba(214,154,73,.025) 50.5% 100%),
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.35px);
    background-size: auto, 20px 20px;
}

.product-v8 .server-lock {
    overflow: visible;
    animation: serverLockV10 4.8s ease-in-out infinite;
}

.product-v8 .server-lock em {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    font-family: "Courier New", monospace;
    font-size: .42rem;
    font-style: normal;
    letter-spacing: .04em;
    color: var(--q-emerald);
    opacity: .72;
}

.product-v8 .server-key-pulse-v10 {
    position: absolute;
    z-index: 4;
    left: 18%;
    top: 37px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 10px rgba(57,185,138,.55);
    animation: serverKeyPulseV10 3.6s ease-in-out infinite;
}

/* This packet originates on the browser side, travels toward the credential
   boundary, then stops and reverses instead of crossing into the server key. */
.product-v8 .browser-request-v10 {
    position: absolute;
    z-index: 4;
    right: 15%;
    top: 37px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--q-blue-strong);
    box-shadow: 0 0 10px rgba(85,118,238,.38);
    animation: browserRequestBlockedV10 4.6s cubic-bezier(.4,0,.2,1) infinite;
}

.product-v8 .blocked-flash-v10 {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 29px;
    transform: translateX(-50%) scale(.6);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(214,154,73,.20);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 91%, var(--q-warm) 9%);
    color: var(--q-warm);
    font-family: "Courier New", monospace;
    font-size: .7rem;
    opacity: 0;
    animation: blockedFlashV10 4.6s ease-in-out infinite;
}

.product-v8 .credential-wall {
    width: 2px;
    box-shadow: 0 0 10px rgba(214,154,73,.10);
    animation: credentialWallV10 4.6s ease-in-out infinite;
}

.product-v8 .browser-block {
    animation: browserLabelV10 4.6s ease-in-out infinite;
}

/* ---------- V10 motion ------------------------------------------------- */

@keyframes modelOrbitV10 {
    from { transform: translate(-50%,-50%) rotate(-8deg); }
    to { transform: translate(-50%,-50%) rotate(352deg); }
}

@keyframes modelPacketV10 {
    0%,100% { left: 16%; top: 37px; opacity: .35; }
    31% { left: 47%; top: 19px; opacity: 1; }
    64% { left: 81%; top: 45px; opacity: 1; }
    82% { left: 50%; top: 38px; opacity: .85; }
}

@keyframes modelRippleV10 {
    0% { transform: scale(.45); opacity: .65; }
    100% { transform: scale(3.4); opacity: 0; }
}

@keyframes modelBeamV10 {
    0%,100% { opacity: .20; transform: scaleX(.76); }
    50% { opacity: .72; transform: scaleX(1); }
}

@keyframes serverLockV10 {
    0%,100% { transform: translateY(1px); box-shadow: 0 0 0 0 rgba(57,185,138,0); }
    50% { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(57,185,138,.035); }
}

@keyframes serverKeyPulseV10 {
    0%,100% { left: 18%; top: 37px; opacity: .35; }
    45% { left: 31%; top: 27px; opacity: 1; }
    70% { left: 22%; top: 51px; opacity: .85; }
}

@keyframes browserRequestBlockedV10 {
    0%,12% { right: 15%; transform: rotate(0deg); opacity: .25; }
    42% { right: 47%; transform: rotate(45deg); opacity: 1; }
    55% { right: 47%; transform: rotate(90deg); opacity: 1; }
    82% { right: 21%; transform: rotate(180deg); opacity: .82; }
    100% { right: 15%; transform: rotate(180deg); opacity: .25; }
}

@keyframes blockedFlashV10 {
    0%,35%,100% { opacity: 0; transform: translateX(-50%) scale(.55); }
    45%,61% { opacity: 1; transform: translateX(-50%) scale(1); }
    72% { opacity: 0; transform: translateX(-50%) scale(1.18); }
}

@keyframes credentialWallV10 {
    0%,35%,100% { opacity: .28; transform: scaleY(.72); }
    45%,65% { opacity: .95; transform: scaleY(1); }
}

@keyframes browserLabelV10 {
    0%,100% { opacity: .55; }
    45%,65% { opacity: .92; }
}

/* ---------- Reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .product-v8 .model-orbit-v10,
    .product-v8 .model-packet-v10,
    .product-v8 .model-ripple-v10,
    .product-v8 .verify-fact__visual--model .model-beam,
    .product-v8 .server-lock,
    .product-v8 .server-key-pulse-v10,
    .product-v8 .browser-request-v10,
    .product-v8 .blocked-flash-v10,
    .product-v8 .credential-wall,
    .product-v8 .browser-block {
        animation: none !important;
    }

    .product-v8 .blocked-flash-v10 {
        opacity: .65;
        transform: translateX(-50%) scale(.9);
    }
}


/* ==========================================================================
   QuanLLM Product V11
   Guided Mode visual: Socratic hint ladder
   ========================================================================== */

.product-v8 .support-visual--guide-v11 {
    position: relative;
    background:
        radial-gradient(circle at 54% 48%, rgba(36,184,197,.055), transparent 8rem),
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(85,118,238,.012);
}

html[data-theme="light"] .product-v8 .support-visual--guide-v11 {
    background:
        radial-gradient(circle at 54% 48%, rgba(14,142,156,.045), transparent 8rem),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,247,252,.72));
}

.product-v8 .guide-question-v11 {
    position: absolute;
    left: 13px;
    top: 20px;
    width: 34%;
    height: 48px;
    padding: 9px 10px 8px 34px;
    border: 1px solid rgba(85,118,238,.13);
    border-radius: 12px 12px 12px 5px;
    background: rgba(85,118,238,.055);
}

.product-v8 .guide-question-v11 > span {
    position: absolute;
    left: 9px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(85,118,238,.10);
    color: var(--q-blue-strong);
    font-family: "Courier New", monospace;
    font-size: .54rem;
    font-weight: 700;
}

.product-v8 .guide-question-v11 i {
    display: block;
    height: 3px;
    margin: 5px 0;
    border-radius: 999px;
    background: rgba(85,118,238,.18);
}

.product-v8 .guide-question-v11 i:first-of-type { width: 82%; }
.product-v8 .guide-question-v11 i:last-of-type { width: 58%; }

.product-v8 .guide-path-v11 {
    position: absolute;
    left: 41%;
    right: 23%;
    top: 17px;
    bottom: 17px;
}

.product-v8 .guide-path-v11::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, var(--q-blue), var(--q-cyan));
    opacity: .28;
}

.product-v8 .guide-step-v11 {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
}

.product-v8 .guide-step-v11--1 { top: 0; }
.product-v8 .guide-step-v11--2 { top: 25px; }
.product-v8 .guide-step-v11--3 { top: 50px; }

.product-v8 .guide-step-v11 b {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--q-card-border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%);
    font-family: "Courier New", monospace;
    font-size: .45rem;
    color: var(--text-subtle);
    animation: guideStepPulseV11 5.4s ease-in-out infinite;
}

.product-v8 .guide-step-v11 i {
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: rgba(36,184,197,.14);
}

.product-v8 .guide-step-v11--2 b { animation-delay: -1.4s; }
.product-v8 .guide-step-v11--3 b { animation-delay: -2.8s; }

.product-v8 .guide-signal-v11 {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 4px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 9px rgba(36,184,197,.55);
    animation: guideSignalV11 5.4s ease-in-out infinite;
}

.product-v8 .guide-answer-v11 {
    position: absolute;
    right: 13px;
    top: 27px;
    width: 17%;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(57,185,138,.15);
    border-radius: 10px;
    background: rgba(57,185,138,.04);
    opacity: .42;
    animation: guideAnswerV11 5.4s ease-in-out infinite;
}

.product-v8 .guide-answer-v11 > span {
    color: var(--q-emerald);
    font-size: .72rem;
    font-weight: 700;
}

.product-v8 .guide-answer-v11 i {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: rgba(57,185,138,.16);
}

@keyframes guideStepPulseV11 {
    0%,100% { transform: scale(.88); opacity: .45; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes guideSignalV11 {
    0%,8% { top: 4px; opacity: .35; }
    34% { top: 29px; opacity: 1; }
    63% { top: 54px; opacity: 1; }
    82%,100% { top: 54px; opacity: .18; }
}

@keyframes guideAnswerV11 {
    0%,58%,100% { opacity: .22; transform: scale(.94); }
    72%,88% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .product-v8 .guide-step-v11 b,
    .product-v8 .guide-signal-v11,
    .product-v8 .guide-answer-v11 {
        animation: none !important;
    }

    .product-v8 .guide-answer-v11 {
        opacity: .8;
        transform: none;
    }
}


/* ==========================================================================
   QuanLLM Product V12
   README-aligned local-run flow + Pearl command surface
   ========================================================================== */

.product-v8 .runtime-panel--v12 {
    padding: 30px;
    border: 1px solid var(--q-card-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 84% 10%, rgba(85,118,238,.055), transparent 20rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: var(--q-card-shadow);
}

html[data-theme="light"] .product-v8 .runtime-panel--v12 {
    background:
        radial-gradient(circle at 84% 10%, rgba(49,88,213,.045), transparent 20rem),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,253,.94));
}

.product-v8 .runtime-facts--v12 > div {
    min-height: 92px;
}

.product-v8 .runtime-facts--v12 small {
    display: block;
    margin-top: 5px;
    color: var(--text-subtle);
    font-size: .67rem;
}

.product-v8 .setup-flow-v12 {
    display: grid;
    gap: 11px;
    margin-top: 18px;
}

.product-v8 .setup-step-v12 {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--q-card-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-cyan) 2%);
}

.product-v8 .setup-step-v12__index {
    display: grid;
    place-items: center;
    align-self: start;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(85,118,238,.13);
    border-radius: 9px;
    background: rgba(85,118,238,.055);
    font-family: "Courier New", monospace;
    font-size: .62rem;
    color: var(--q-blue-strong);
}

.product-v8 .setup-step-v12 b {
    display: block;
    margin-bottom: 9px;
    font-size: .88rem;
}

.product-v8 .setup-step-v12 > div > code {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 5px 8px;
    overflow-x: auto;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: rgba(85,118,238,.035);
    color: var(--text-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.product-v8 .setup-step-v12 p {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.66;
}

.product-v8 .setup-step-v12--run {
    border-color: rgba(36,184,197,.15);
    background:
        radial-gradient(circle at 84% 50%, rgba(36,184,197,.045), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-cyan) 2%);
}

/* No shell prompt character. This is a command, not a terminal screenshot. */
.product-v8 .runtime-command--v12 {
    grid-template-columns: 1fr auto;
    margin: 4px 0 8px;
    padding: 13px 14px;
    border: 1px solid rgba(85,118,238,.12);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(85,118,238,.055), rgba(36,184,197,.035)),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-theme="light"] .product-v8 .runtime-command--v12 {
    background:
        linear-gradient(135deg, rgba(49,88,213,.045), rgba(14,142,156,.025)),
        rgba(255,255,255,.90);
    box-shadow: 0 12px 28px -25px rgba(35,55,88,.28);
}

.product-v8 .runtime-command--v12 code {
    color: var(--text);
    font-size: .78rem;
}

.product-v8 .runtime-command--v12 .copy-command {
    border-color: rgba(85,118,238,.14);
    background: rgba(85,118,238,.055);
    color: var(--q-blue-strong);
}

.product-v8 .setup-step-v12--run small {
    color: var(--text-subtle);
    font-size: .68rem;
}

.product-v8 .runtime-note-v12,
.product-v8 .windows-run-v12 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid var(--q-card-border);
    border-radius: 11px;
    background: rgba(85,118,238,.018);
}

.product-v8 .runtime-note-v12__icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(36,184,197,.15);
    border-radius: 50%;
    color: var(--q-cyan);
    font-family: "Courier New", monospace;
    font-size: .62rem;
}

.product-v8 .runtime-note-v12 p,
.product-v8 .windows-run-v12 p {
    margin: 0;
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.65;
}

.product-v8 .windows-run-v12 > span {
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(85,118,238,.055);
    color: var(--q-blue-strong);
    font-family: "Courier New", monospace;
    font-size: .58rem;
}

.product-v8 .deployment-details--v12 {
    margin-top: 16px;
}

@media (max-width: 620px) {
    .product-v8 .runtime-panel--v12 {
        padding: 20px;
    }

    .product-v8 .setup-step-v12 {
        grid-template-columns: 36px minmax(0,1fr);
        padding: 15px;
    }

    .product-v8 .runtime-command--v12 {
        grid-template-columns: 1fr;
    }

    .product-v8 .runtime-command--v12 .copy-command {
        justify-self: start;
    }
}


/* ==========================================================================
   QuanLLM Product V13
   Consistent copy actions + animated knowledge graph + curriculum gallery
   ========================================================================== */

/* ---------- Consistent copyable command rows -------------------------- */

.product-v8 .setup-command-v13 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 7px;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--q-card-border);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(85,118,238,.035), rgba(36,184,197,.02)),
        color-mix(in srgb, var(--bg-light) 99%, var(--q-blue) 1%);
}

html[data-theme="light"] .product-v8 .setup-command-v13 {
    background:
        linear-gradient(135deg, rgba(49,88,213,.035), rgba(14,142,156,.018)),
        rgba(255,255,255,.86);
}

.product-v8 .setup-command-v13 code {
    min-width: 0;
    overflow-x: auto;
    color: var(--text);
    font-size: .69rem;
    white-space: nowrap;
    scrollbar-width: thin;
}

.product-v8 .copy-command--small {
    padding: 5px 8px;
    border: 1px solid rgba(85,118,238,.14);
    border-radius: 6px;
    background: rgba(85,118,238,.05);
    color: var(--q-blue-strong);
    font-size: .62rem;
    cursor: pointer;
}

.product-v8 .copy-command--small:hover {
    background: rgba(85,118,238,.09);
}

.product-v8 .windows-run-v13 {
    grid-template-columns: auto minmax(0,1fr);
}

.product-v8 .windows-commands-v13 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 8px;
}

.product-v8 .windows-commands-v13 .setup-command-v13 {
    margin-top: 0;
}

/* ---------- Knowledge graph card: unmistakably animated -------------- */

.product-v8 .support-visual--knowledge-v13 {
    isolation: isolate;
    background:
        radial-gradient(circle at 52% 48%, rgba(36,184,197,.055), transparent 7rem),
        radial-gradient(circle at 1px 1px, var(--q-line) 0 1px, transparent 1.3px);
    background-size: auto, 22px 22px;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-edge {
    overflow: visible;
    background: linear-gradient(90deg, rgba(85,118,238,.18), rgba(36,184,197,.42));
    transform-origin: left center;
    animation: knowledgeEdgePulseV13 4.6s ease-in-out infinite;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-edge--2 {
    animation-delay: -.8s;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-edge--3 {
    animation-delay: -1.6s;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-node {
    animation: knowledgeNodeV13 4.8s ease-in-out infinite;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-node--b {
    animation-delay: -.8s;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-node--c {
    animation-delay: -1.6s;
}

.product-v8 .support-visual--knowledge-v13 .support-graph-node--d {
    animation-delay: -2.4s;
}

.product-v8 .graph-signal-v13 {
    position: absolute;
    z-index: 5;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 11px rgba(36,184,197,.55);
}

.product-v8 .graph-signal-v13--1 {
    left: 18%;
    top: 47%;
    animation: knowledgeSignalOneV13 5.6s cubic-bezier(.4,0,.2,1) infinite;
}

.product-v8 .graph-signal-v13--2 {
    left: 42%;
    top: 26%;
    background: var(--q-emerald);
    box-shadow: 0 0 11px rgba(57,185,138,.5);
    animation: knowledgeSignalTwoV13 6.4s cubic-bezier(.4,0,.2,1) infinite;
    animation-delay: -2.2s;
}

.product-v8 .graph-halo-v13 {
    position: absolute;
    z-index: 0;
    left: 40%;
    top: 24%;
    width: 18px;
    height: 18px;
    margin: -4px;
    border: 1px solid rgba(36,184,197,.18);
    border-radius: 50%;
    animation: knowledgeHaloV13 3.8s ease-out infinite;
}

/* ---------- Curriculum visual overview -------------------------------- */

.product-v8 .curriculum-visual-v13 {
    display: grid;
    grid-template-columns: minmax(360px,.82fr) minmax(0,1.18fr);
    gap: 18px;
    margin-bottom: 22px;
}

.product-v8 .curriculum-spine-v13,
.product-v8 .curriculum-gallery-v13 {
    border: 1px solid var(--q-card-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 85% 15%, rgba(85,118,238,.05), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    box-shadow: var(--q-card-shadow);
}

.product-v8 .curriculum-spine-v13 {
    padding: 24px;
}

.product-v8 .curriculum-spine-v13__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.product-v8 .curriculum-spine-v13__head span {
    font-family: "Courier New", monospace;
    font-size: .63rem;
    letter-spacing: .12em;
    color: var(--q-cyan);
}

.product-v8 .curriculum-spine-v13__head strong {
    font-size: .86rem;
    font-weight: 650;
}

.product-v8 .lesson-rail-v13 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0,1fr));
    gap: 12px 8px;
    margin-top: 28px;
    padding: 16px 0 18px;
}

.product-v8 .lesson-rail-v13::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 31px;
    height: 1px;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan), var(--q-violet), var(--q-emerald));
    opacity: .28;
}

.product-v8 .lesson-dot-v13 {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 1px solid var(--q-card-border);
    border-radius: 50%;
    background: var(--bg-light);
    font-family: "Courier New", monospace;
    font-size: .56rem;
    color: var(--text-subtle);
    animation: curriculumNodeV13 8s ease-in-out infinite;
}

.product-v8 .lesson-dot-v13.is-foundation {
    box-shadow: inset 0 0 0 3px rgba(85,118,238,.035);
}
.product-v8 .lesson-dot-v13.is-structure {
    box-shadow: inset 0 0 0 3px rgba(36,184,197,.035);
}
.product-v8 .lesson-dot-v13.is-symmetry {
    box-shadow: inset 0 0 0 3px rgba(130,107,231,.035);
}
.product-v8 .lesson-dot-v13.is-modern {
    box-shadow: inset 0 0 0 3px rgba(57,185,138,.035);
}

.product-v8 .lesson-dot-v13:nth-child(2) { animation-delay: -.4s; }
.product-v8 .lesson-dot-v13:nth-child(3) { animation-delay: -.8s; }
.product-v8 .lesson-dot-v13:nth-child(4) { animation-delay: -1.2s; }
.product-v8 .lesson-dot-v13:nth-child(5) { animation-delay: -1.6s; }
.product-v8 .lesson-dot-v13:nth-child(6) { animation-delay: -2.0s; }
.product-v8 .lesson-dot-v13:nth-child(7) { animation-delay: -2.4s; }
.product-v8 .lesson-dot-v13:nth-child(8) { animation-delay: -2.8s; }
.product-v8 .lesson-dot-v13:nth-child(9) { animation-delay: -3.2s; }
.product-v8 .lesson-dot-v13:nth-child(10) { animation-delay: -3.6s; }
.product-v8 .lesson-dot-v13:nth-child(11) { animation-delay: -4.0s; }
.product-v8 .lesson-dot-v13:nth-child(12) { animation-delay: -4.4s; }
.product-v8 .lesson-dot-v13:nth-child(13) { animation-delay: -4.8s; }
.product-v8 .lesson-dot-v13:nth-child(14) { animation-delay: -5.2s; }
.product-v8 .lesson-dot-v13:nth-child(15) { animation-delay: -5.6s; }
.product-v8 .lesson-dot-v13:nth-child(16) { animation-delay: -6.0s; }

.product-v8 .lesson-scan-v13 {
    position: absolute;
    z-index: 3;
    left: 4%;
    top: 28px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 5px rgba(36,184,197,.055), 0 0 12px rgba(36,184,197,.46);
    animation: lessonScanV13 9.6s ease-in-out infinite;
}

.product-v8 .curriculum-legend-v13 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px 14px;
    margin-top: 4px;
}

.product-v8 .curriculum-legend-v13 span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-subtle);
    font-size: .68rem;
}

.product-v8 .curriculum-legend-v13 i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-blue);
}

.product-v8 .curriculum-legend-v13 span:nth-child(2) i { background: var(--q-cyan); }
.product-v8 .curriculum-legend-v13 span:nth-child(3) i { background: var(--q-violet); }
.product-v8 .curriculum-legend-v13 span:nth-child(4) i { background: var(--q-emerald); }

.product-v8 .curriculum-gallery-v13 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    padding: 14px;
}

.product-v8 .curriculum-scene-v13 {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at 80% 20%, rgba(85,118,238,.045), transparent 10rem),
        rgba(85,118,238,.014);
}

.product-v8 .scene-label-v13 {
    position: absolute;
    z-index: 4;
    left: 12px;
    top: 10px;
    font-family: "Courier New", monospace;
    font-size: .52rem;
    letter-spacing: .08em;
    color: var(--text-subtle);
}

/* wave */
.product-v8 .curriculum-scene-v13--wave svg {
    position: absolute;
    inset: 32px 0 0;
    width: 100%;
    height: 105px;
}

.product-v8 .curriculum-scene-v13--wave path {
    fill: none;
    vector-effect: non-scaling-stroke;
    transform-origin: center;
}

.product-v8 .curriculum-scene-v13--wave path:first-child {
    stroke: var(--q-cyan);
    stroke-width: 1.5;
    stroke-dasharray: 6 7;
    animation: curriculumWaveDashV13 8s linear infinite, curriculumWaveBreathV13 5s ease-in-out infinite;
}

.product-v8 .curriculum-scene-v13--wave path:last-child {
    stroke: var(--q-blue);
    stroke-width: 1;
    opacity: .35;
    animation: curriculumWaveBreathV13 6.5s ease-in-out infinite reverse;
}

.product-v8 .scene-particle-v13 {
    position: absolute;
    left: 12%;
    top: 78px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 11px rgba(36,184,197,.5);
    animation: curriculumParticleV13 5.8s ease-in-out infinite;
}

/* energy levels */
.product-v8 .energy-levels-v13 {
    position: absolute;
    inset: 34px 20px 18px;
}

.product-v8 .energy-levels-v13 i {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--q-line-strong);
}

.product-v8 .energy-levels-v13 i:nth-child(1) { bottom: 13%; }
.product-v8 .energy-levels-v13 i:nth-child(2) { bottom: 37%; }
.product-v8 .energy-levels-v13 i:nth-child(3) { bottom: 61%; }
.product-v8 .energy-levels-v13 i:nth-child(4) { bottom: 84%; }

.product-v8 .energy-levels-v13 b {
    position: absolute;
    left: 32%;
    bottom: 14%;
    width: 2px;
    height: 69%;
    background: linear-gradient(to top, var(--q-blue), var(--q-cyan));
    animation: energyJumpV13 4.8s ease-in-out infinite;
}

.product-v8 .energy-levels-v13 b::after {
    content: "";
    position: absolute;
    left: -3px;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.5);
}

/* orbital */
.product-v8 .orbital-v13 {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 116px;
    height: 90px;
    transform: translate(-50%,-50%);
}

.product-v8 .orbital-v13 i {
    position: absolute;
    inset: 0;
    border: 1px solid var(--q-line-strong);
    border-radius: 50%;
    animation: orbitalSpinV13 7s linear infinite;
}

.product-v8 .orbital-v13 i:nth-child(2) {
    transform: rotate(65deg);
    border-color: var(--q-line);
    animation-duration: 9s;
    animation-direction: reverse;
}

.product-v8 .orbital-v13 span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 6px rgba(85,118,238,.05);
}

.product-v8 .orbital-v13 b {
    position: absolute;
    left: 50%;
    top: 0;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.5);
    transform-origin: 0 45px;
    animation: orbitalParticleV13 4.8s linear infinite;
}

/* entanglement */
.product-v8 .entangle-v13 {
    position: absolute;
    inset: 36px 20px 20px;
}

.product-v8 .entangle-node-v13 {
    position: absolute;
    top: 43%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 90%, var(--q-blue) 10%);
    border: 1px solid var(--q-card-border);
    box-shadow: 0 0 0 7px rgba(85,118,238,.035);
    animation: entanglePulseV13 4.4s ease-in-out infinite;
}

.product-v8 .entangle-node-v13--a { left: 13%; }
.product-v8 .entangle-node-v13--b { right: 13%; animation-delay: -2.2s; background: color-mix(in srgb, var(--bg-light) 90%, var(--q-cyan) 10%); }

.product-v8 .entangle-v13 > i {
    position: absolute;
    left: 26%;
    right: 26%;
    top: 54%;
    height: 1px;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    opacity: .45;
}

.product-v8 .entangle-v13 > b {
    position: absolute;
    left: 25%;
    top: 52%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.5);
    animation: entangleSignalV13 3.9s ease-in-out infinite;
}

/* ---------- Motion ----------------------------------------------------- */

@keyframes knowledgeEdgePulseV13 {
    0%,100% { opacity: .28; filter: brightness(.9); }
    50% { opacity: .85; filter: brightness(1.25); }
}

@keyframes knowledgeNodeV13 {
    0%,100% { transform: scale(.82); opacity: .42; }
    50% { transform: scale(1.22); opacity: 1; }
}

@keyframes knowledgeSignalOneV13 {
    0%,100% { left: 18%; top: 47%; opacity: .35; }
    34% { left: 42%; top: 24%; opacity: 1; }
    68% { left: 69%; top: 56%; opacity: 1; }
}

@keyframes knowledgeSignalTwoV13 {
    0%,100% { left: 42%; top: 26%; opacity: .35; }
    42% { left: 70%; top: 55%; opacity: 1; }
    74% { left: 88%; top: 31%; opacity: 1; }
}

@keyframes knowledgeHaloV13 {
    0% { transform: scale(.45); opacity: .6; }
    100% { transform: scale(3.5); opacity: 0; }
}

@keyframes curriculumNodeV13 {
    0%,100% { transform: translateY(0) scale(.94); opacity: .64; }
    50% { transform: translateY(-3px) scale(1.05); opacity: 1; }
}

@keyframes lessonScanV13 {
    0% { left: 4%; top: 28px; }
    45% { left: 94%; top: 28px; }
    50% { left: 94%; top: 79px; }
    95% { left: 4%; top: 79px; }
    100% { left: 4%; top: 28px; }
}

@keyframes curriculumWaveDashV13 { to { stroke-dashoffset: -120; } }

@keyframes curriculumWaveBreathV13 {
    0%,100% { transform: scaleY(.82); }
    50% { transform: scaleY(1.14); }
}

@keyframes curriculumParticleV13 {
    0%,100% { left: 12%; top: 78px; }
    32% { left: 39%; top: 45px; }
    63% { left: 66%; top: 96px; }
    83% { left: 84%; top: 65px; }
}

@keyframes energyJumpV13 {
    0%,15% { height: 18%; opacity: .35; }
    42% { height: 45%; opacity: 1; }
    70% { height: 69%; opacity: 1; }
    100% { height: 18%; opacity: .35; }
}

@keyframes orbitalSpinV13 {
    to { transform: rotate(360deg); }
}

@keyframes orbitalParticleV13 {
    to { transform: rotate(360deg); }
}

@keyframes entanglePulseV13 {
    0%,100% { transform: scale(.9); opacity: .55; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes entangleSignalV13 {
    0%,100% { left: 25%; opacity: .35; }
    50% { left: 72%; opacity: 1; }
}

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 980px) {
    .product-v8 .curriculum-visual-v13 {
        grid-template-columns: 1fr;
    }

    .product-v8 .lesson-rail-v13 {
        grid-template-columns: repeat(8, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .product-v8 .windows-commands-v13,
    .product-v8 .curriculum-gallery-v13 {
        grid-template-columns: 1fr;
    }

    .product-v8 .curriculum-gallery-v13 {
        gap: 8px;
    }

    .product-v8 .lesson-rail-v13 {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .product-v8 .lesson-rail-v13::before,
    .product-v8 .lesson-scan-v13 {
        display: none;
    }

    .product-v8 .curriculum-legend-v13 {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-v8 .support-visual--knowledge-v13 *,
    .product-v8 .curriculum-visual-v13 * {
        animation: none !important;
    }
}


/* ==========================================================================
   QuanLLM Product V14
   GitHub CTA icon alignment
   ========================================================================== */

.product-v8 .nav-cta--github {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-v8 .nav-cta--github .github-mark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: block;
}

.product-v8 .nav-cta--github > span {
    line-height: 1;
}


/* ==========================================================================
   QuanLLM Product V15
   Continuous motion reliability fixes
   ========================================================================== */

/* Active verification step has a subtle breathing border and a scanning
   accent, so motion remains legible even between stage changes. */
.product-v8 .verification-flow--v9 .verify-step.is-active {
    position: relative;
    overflow: hidden;
    animation: verifyActiveBreathV15 1.8s ease-in-out infinite;
}

.product-v8 .verification-flow--v9 .verify-step.is-active::after {
    content: "";
    position: absolute;
    left: -28%;
    top: 0;
    width: 22%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(36,184,197,.055),
        rgba(85,118,238,.075),
        transparent
    );
    transform: skewX(-18deg);
    animation: verifyStepSweepV15 2.2s ease-in-out infinite;
}

@keyframes verifyActiveBreathV15 {
    0%,100% {
        box-shadow: 0 15px 35px -30px rgba(36,184,197,.28);
        border-color: rgba(36,184,197,.23);
    }
    50% {
        box-shadow: 0 18px 42px -28px rgba(36,184,197,.52);
        border-color: rgba(36,184,197,.40);
    }
}

@keyframes verifyStepSweepV15 {
    0% { left: -28%; opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: .8; }
    100% { left: 112%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .product-v8 .verification-flow--v9 .verify-step.is-active,
    .product-v8 .verification-flow--v9 .verify-step.is-active::after {
        animation: none !important;
    }
}


/* ==========================================================================
   QuanLLM Product V16
   Restore node micro-labels beneath Workbench titles
   ========================================================================== */

.product-v8 .workbench-node {
    min-height: 98px;
}

.product-v8 .workbench-node b,
.product-v8 .workbench-node__en,
.product-v8 .workbench-node small {
    display: block;
}

.product-v8 .workbench-node__en {
    margin-top: 4px;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: .64rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .025em;
    color: var(--q-blue-strong);
    opacity: .78;
}

.product-v8 .workbench-node small {
    margin-top: 5px;
}

@media (max-width: 820px) {
    .product-v8 .workbench-node {
        min-height: 92px;
    }

    .product-v8 .workbench-node__en {
        font-size: .60rem;
    }
}

@media (max-width: 560px) {
    .product-v8 .workbench-node {
        min-height: 74px;
    }

    .product-v8 .workbench-node__en {
        margin-top: 3px;
        font-size: .55rem;
    }

    /* Keep the English descriptor on mobile; only the technical route
       is hidden at very narrow widths. */
    .product-v8 .workbench-node small {
        display: none;
    }
}


/* ==========================================================================
   QuanLLM Product V16 — curriculum rail correction
   Preserve 01→08 and 09→16 left-to-right reading order.
   The scan now wraps from 08 to 09, and both rows have connecting lines.
   ========================================================================== */

.product-v8 .lesson-rail-v13 {
    --rail-left: 5%;
    --rail-right: 95%;
    --rail-top-y: 31px;
    --rail-bottom-y: 82px;
}

/* Top row 01→08 */
.product-v8 .lesson-rail-v13::before {
    content: "";
    position: absolute;
    left: var(--rail-left);
    right: calc(100% - var(--rail-right));
    top: var(--rail-top-y);
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--q-blue),
        var(--q-cyan),
        var(--q-violet),
        var(--q-emerald)
    );
    opacity: .28;
}

/* Bottom row 09→16 */
.product-v8 .lesson-rail-v13::after {
    content: "";
    position: absolute;
    left: var(--rail-left);
    right: calc(100% - var(--rail-right));
    top: var(--rail-bottom-y);
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--q-violet),
        var(--q-blue),
        var(--q-cyan),
        var(--q-emerald)
    );
    opacity: .28;
}

/* 08 → 09 wrap connector */
.product-v8 .curriculum-spine-v13 {
    position: relative;
}

.product-v8 .curriculum-spine-v13::after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: 44px;
    top: 94px;
    width: calc(100% - 88px);
    height: 54px;
    border-right: 1px solid rgba(36,184,197,.18);
    border-bottom: 1px solid rgba(36,184,197,.18);
    border-radius: 0 0 22px 0;
    opacity: .58;
    mask-image: linear-gradient(90deg, transparent 0 2%, #000 15% 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 2%, #000 15% 100%);
}

/* Scan order:
   01 → 08, wrap back to 09, then 09 → 16.
   The wrap is intentionally quick so the user reads the lesson order
   rather than interpreting the return stroke as reverse progression. */
@keyframes lessonScanV13 {
    0% {
        left: 4%;
        top: 28px;
        opacity: .45;
    }
    43% {
        left: 94%;
        top: 28px;
        opacity: 1;
    }
    47% {
        left: 94%;
        top: 52px;
        opacity: .9;
    }
    51% {
        left: 4%;
        top: 79px;
        opacity: .45;
    }
    94% {
        left: 94%;
        top: 79px;
        opacity: 1;
    }
    100% {
        left: 94%;
        top: 79px;
        opacity: .45;
    }
}

@media (max-width: 650px) {
    .product-v8 .lesson-rail-v13::before,
    .product-v8 .lesson-rail-v13::after,
    .product-v8 .lesson-scan-v13,
    .product-v8 .curriculum-spine-v13::after {
        display: none;
    }
}


/* ==========================================================================
   Incremental fix on Product V16
   Curriculum rail now follows the true serpentine lesson order:
   01 → 08 ↓ 16 → 09
   ========================================================================== */

.product-v8 .lesson-rail-v13 {
    --rail-line-y-top: 31px;
    --rail-line-y-bottom: 82px;
}

/* Top row: 01 → 08 */
.product-v8 .lesson-rail-v13::before {
    top: var(--rail-line-y-top);
}

/* Bottom row: 16 → 09 */
.product-v8 .lesson-rail-v13::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: var(--rail-line-y-bottom);
    height: 1px;
    background: linear-gradient(90deg, var(--q-violet), var(--q-emerald), var(--q-cyan), var(--q-blue));
    opacity: .28;
}

/* Right-side turn linking 08 down to 16 */
.product-v8 .curriculum-spine-v13 {
    position: relative;
}

.product-v8 .curriculum-spine-v13::after {
    content: "";
    position: absolute;
    right: calc(24px + 5%);
    top: 82px;
    width: 1px;
    height: 51px;
    background: linear-gradient(180deg, var(--q-cyan), var(--q-emerald));
    opacity: .24;
}

/* Keep the scan explicitly aligned to the snake order:
   01 → 08, down to 16, then 16 → 09. */
@keyframes lessonScanV13 {
    0% {
        left: 4%;
        top: 28px;
    }
    44% {
        left: 94%;
        top: 28px;
    }
    49% {
        left: 94%;
        top: 79px;
    }
    95% {
        left: 4%;
        top: 79px;
    }
    100% {
        left: 4%;
        top: 28px;
    }
}

@media (max-width: 650px) {
    .product-v8 .lesson-rail-v13::after,
    .product-v8 .curriculum-spine-v13::after {
        display: none;
    }
}


/* ==========================================================================
   Incremental V16 fix
   08 → 09 connector: route around the nodes instead of through their centers
   ========================================================================== */

/* Disable the previous straight vertical connector. */
.product-v8 .curriculum-spine-v13::after {
    display: none !important;
}

/* Use the lesson rail itself to draw a rounded right-side turn:
   top rail → down outside node circles → bottom rail. */
.product-v8 .lesson-rail-v13 {
    position: relative;
}

.product-v8 .lesson-rail-v13 .lesson-dot-v13:nth-child(8)::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% + 17px);
    top: 50%;
    width: 24px;
    height: 51px;
    border-top: 1px solid rgba(36,184,197,.30);
    border-right: 1px solid rgba(36,184,197,.30);
    border-bottom: 1px solid rgba(36,184,197,.30);
    border-radius: 0 13px 13px 0;
    pointer-events: none;
}

/* Small directional pulse following the 08 → 09 turn. */
.product-v8 .lesson-rail-v13 .lesson-dot-v13:nth-child(8)::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: calc(50% + 36px);
    top: calc(50% + 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.48);
    animation: lessonTurnPulseV16 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lessonTurnPulseV16 {
    0%, 8% {
        transform: translate(0, 0);
        opacity: .25;
    }
    42% {
        transform: translate(0, 23px);
        opacity: 1;
    }
    78% {
        transform: translate(0, 45px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 45px);
        opacity: .2;
    }
}

@media (max-width: 650px) {
    .product-v8 .lesson-rail-v13 .lesson-dot-v13:nth-child(8)::after,
    .product-v8 .lesson-rail-v13 .lesson-dot-v13:nth-child(8)::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-v8 .lesson-rail-v13 .lesson-dot-v13:nth-child(8)::before {
        animation: none !important;
        opacity: .65;
    }
}


/* ==========================================================================
   Incremental V16 fix
   Keep the row-turn connector inside the lesson rail itself, so it starts
   exactly at the center of 08 and ends at the center of 16.
   ========================================================================== */

/* Disable the older connector that was positioned relative to the whole card. */
.product-v8 .curriculum-spine-v13::after {
    display: none !important;
}

/* Draw the right-side turn inside the lesson rail coordinate system. */
.product-v8 .lesson-rail-v13 {
    background-image: linear-gradient(
        180deg,
        rgba(36,184,197,.30),
        rgba(57,185,138,.28)
    );
    background-repeat: no-repeat;
    background-size: 1px 51px;
    background-position: 95% 31px;
}


/* ==========================================================================
   Product V2 Ambient Upgrade · Learning Space
   ========================================================================== */
.product-v8 {
    --subpage-ambient-a: rgba(82, 95, 238, .13);
    --subpage-ambient-b: rgba(29, 184, 199, .095);
    --subpage-ambient-c: rgba(133, 102, 235, .07);
    --subpage-ambient-line: rgba(70, 132, 225, .19);
    --subpage-ambient-particle: rgba(31, 177, 196, .9);
}

html[data-theme="light"] .product-v8 {
    background:
        radial-gradient(circle at 16% 8%, rgba(87, 101, 223, .055), transparent 33rem),
        radial-gradient(circle at 85% 35%, rgba(20, 158, 176, .045), transparent 30rem),
        #f4f7fc;
}

html[data-theme="light"] .product-v8 .product-hero {
    background:
        radial-gradient(circle at 78% 24%, rgba(58, 91, 220, .115), transparent 32rem),
        radial-gradient(circle at 14% 70%, rgba(14, 142, 156, .075), transparent 29rem),
        radial-gradient(circle at 48% 96%, rgba(115, 91, 210, .045), transparent 30rem),
        linear-gradient(180deg, rgba(252,253,255,.84) 0%, rgba(243,247,253,.78) 100%);
}

html[data-theme="light"] .product-v8 .product-field-grid {
    opacity: .34;
}

html[data-theme="light"] .product-v8 .product-field-wave {
    opacity: .18;
}

html[data-theme="light"] .product-v8 .product-field-symbol {
    opacity: .22;
}

.product-v8 .product-hero__field::before {
    content: "";
    position: absolute;
    inset: 9% 4% 14%;
    background:
        radial-gradient(circle at 16% 21%, rgba(82,95,238,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 29% 57%, rgba(29,184,199,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 61% 24%, rgba(82,95,238,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 66%, rgba(29,184,199,.26) 0 2px, transparent 3px),
        radial-gradient(circle at 91% 37%, rgba(133,102,235,.22) 0 2px, transparent 3px);
    opacity: .6;
    animation: productAmbientNodes 9s ease-in-out infinite;
}

.product-v8 .product-hero__field::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 8%;
    top: 45%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(82,95,238,.17), rgba(29,184,199,.22), transparent);
    transform: rotate(-4deg);
    opacity: .55;
    box-shadow:
        0 118px 0 rgba(82,95,238,.07),
        0 -154px 0 rgba(29,184,199,.06);
}

.product-v8 .learning-workspace-demo::after {
    content: "";
    position: absolute;
    inset: 12% 6% -5%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(64,112,230,.16), rgba(29,184,199,.07) 42%, transparent 70%);
    filter: blur(34px);
    opacity: .68;
    pointer-events: none;
}

@keyframes productAmbientNodes {
    0%,100% { transform: translate3d(0,0,0); opacity: .42; }
    50% { transform: translate3d(8px,-6px,0); opacity: .72; }
}


/* ==========================================================================
   Product V15 · Public Multimodal Course / Course Expansion
   ========================================================================== */
.multimodal-section--v14 {
    background:
        radial-gradient(circle at 12% 18%, rgba(82,95,238,.045), transparent 26rem),
        radial-gradient(circle at 88% 72%, rgba(29,184,199,.04), transparent 28rem);
}

.multimodal-grid-v14 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
}

.multimodal-card-v14 {
    min-height: 220px;
    padding: 22px 18px;
    border: 1px solid var(--q-card-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    box-shadow: var(--q-shadow);
}

.multimodal-card-v14 > span {
    color: var(--q-blue-strong);
    font-family: "Courier New", monospace;
    font-size: .59rem;
    letter-spacing: .08em;
}

.multimodal-card-v14 strong {
    display: block;
    margin-top: 22px;
    font-size: 1rem;
    line-height: 1.35;
}

.multimodal-card-v14 p {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.7;
}

.multimodal-note-v14 {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 22px;
    padding: 19px 21px;
    border: 1px solid rgba(36,184,197,.16);
    border-radius: 15px;
    background: rgba(36,184,197,.035);
}

.multimodal-note-v14 strong {
    color: var(--q-cyan);
}

.multimodal-note-v14 p {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.65;
}

.curriculum-generalized-v14 {
    background: linear-gradient(180deg, transparent, rgba(82,95,238,.018), transparent);
}

.course-expansion-grid-v14 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.course-expansion-card-v14 {
    min-height: 300px;
    padding: 26px;
    border: 1px solid var(--q-card-border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-light) 90%, transparent);
    box-shadow: var(--q-shadow);
}

.course-expansion-card-v14.is-current {
    border-color: rgba(36,184,197,.26);
    background:
        radial-gradient(circle at 86% 13%, rgba(36,184,197,.08), transparent 13rem),
        color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.course-expansion-card-v14 > span {
    color: var(--q-blue-strong);
    font-family: "Courier New", monospace;
    font-size: .61rem;
    letter-spacing: .07em;
}

.course-expansion-card-v14 h3 {
    margin-top: 18px;
    font-size: 1.42rem;
    letter-spacing: -.02em;
}

.course-expansion-card-v14 p {
    margin-top: 13px;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: .83rem;
}

.course-expansion-card-v14 > div {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 8px;
    align-items: baseline;
    margin-top: 27px;
    padding-top: 18px;
    border-top: 1px solid var(--q-card-border);
}

.course-expansion-card-v14 b {
    color: var(--q-cyan);
    font-size: 1.7rem;
}

.course-expansion-card-v14 small {
    color: var(--text-subtle);
}

.course-expansion-strip-v14 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--q-card-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 82%, transparent);
    color: var(--text-muted);
    font-size: .72rem;
}

.course-expansion-strip-v14 i {
    color: var(--q-cyan);
    font-style: normal;
}

@media (max-width: 1040px) {
    .multimodal-grid-v14 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .multimodal-card-v14:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .course-expansion-grid-v14 { grid-template-columns: 1fr; }
    .multimodal-note-v14 { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
    .multimodal-grid-v14 { grid-template-columns: 1fr; }
    .multimodal-card-v14:last-child { grid-column: auto; }
    .course-expansion-strip-v14 { border-radius: 18px; }
}


/* ==========================================================================
   Product V16 · Core Experiences intro
   ========================================================================== */
.core-experiences .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.core-experiences .section-header p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    letter-spacing: .08em;
}