/* Deep product story for the SuperSDM homepage.
   This layer is intentionally isolated from route cards and access controls. */

.lab-home-page {
    --story-violet: #a987ff;
    --story-rose: #ff8fa9;
    --story-green: #57debb;
    --story-electric: #55d6f7;
    --story-amber: #f0c369;
}

.lab-home-page :is(
    .story-problem-grid,
    .story-capability-grid,
    .story-evidence-ladder
):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--story-electric) 72%, #fff 28%);
    outline-offset: 5px;
}

.lab-home-page :is(
    .story-role-switcher button,
    .story-guide-controls button,
    .story-guide-chapters button,
    .story-layer-stack button,
    .story-capability-card summary
):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--story-electric) 72%, #fff 28%);
    outline-offset: 3px;
}

.lab-home-page [data-story-domain] {
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        filter 220ms ease;
}

.lab-home-page [data-story-domain].is-role-relevant {
    border-color: color-mix(in srgb, var(--story-electric) 46%, var(--theme-border) 54%);
}

.lab-home-page [data-story-domain].is-story-linked {
    position: relative;
    z-index: 2;
    border-color: color-mix(in srgb, var(--story-green) 68%, #fff 32%);
    box-shadow:
        0 18px 44px rgba(34, 160, 180, 0.18),
        0 0 0 2px color-mix(in srgb, var(--story-electric) 24%, transparent);
    transform: translateY(-3px);
}

.lab-home-page .center-demo-scenarios {
    overflow-x: auto;
    scrollbar-width: none;
}

.lab-home-page .center-demo-scenarios::-webkit-scrollbar {
    display: none;
}

.lab-home-page .center-demo-scenarios button {
    flex: 0 0 auto;
    border-color: rgba(141, 215, 239, 0.1) !important;
    color: rgba(198, 228, 239, 0.62) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.lab-home-page .center-demo-scenarios button:is(:hover, :focus-visible, .is-active) {
    border-color: color-mix(in srgb, var(--demo-tone) 46%, rgba(255, 255, 255, 0.12) 54%) !important;
    color: #eafaff !important;
    background: color-mix(in srgb, var(--demo-tone) 14%, rgba(255, 255, 255, 0.025) 86%) !important;
}

.lab-home-page .center-demo-icon-btn {
    border-color: rgba(141, 215, 239, 0.14) !important;
    color: rgba(220, 241, 249, 0.76) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.lab-home-page .center-demo-icon-btn:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--demo-tone) 54%, rgba(255, 255, 255, 0.16) 46%) !important;
    color: #fff !important;
    background: color-mix(in srgb, var(--demo-tone) 14%, rgba(255, 255, 255, 0.04) 86%) !important;
}

.lab-home-page .is-story-current {
    box-shadow:
        var(--elevation-2),
        0 0 0 2px color-mix(in srgb, var(--story-electric) 38%, transparent),
        0 26px 80px color-mix(in srgb, var(--story-electric) 14%, transparent);
}

/* Problem-to-solution map */

.lab-home-page .story-problem-section {
    padding: clamp(30px, 4vw, 58px);
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 143, 169, 0.14), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(85, 214, 247, 0.14), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-glass-strong) 93%, #fff 7%), color-mix(in srgb, var(--surface-glass) 86%, #e9f5ff 14%));
}

.lab-home-page .story-problem-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--theme-border) 38%, transparent) 50%, transparent 50.2%),
        repeating-linear-gradient(0deg, transparent 0 43px, color-mix(in srgb, var(--theme-border) 20%, transparent) 44px);
    mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
    opacity: 0.54;
}

.lab-home-page .story-problem-section > * {
    position: relative;
    z-index: 1;
}

.lab-home-page .story-problem-section .section-title {
    max-width: 18ch;
}

.lab-home-page .story-thesis {
    flex: 0 0 min(390px, 36%);
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    overflow: hidden;
}

.lab-home-page .story-thesis::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -54px;
    width: 150px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--story-electric) 34%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px color-mix(in srgb, var(--story-electric) 7%, transparent),
        0 0 0 42px color-mix(in srgb, var(--story-electric) 4%, transparent);
}

.lab-home-page .story-thesis > span {
    color: var(--theme-text-soft);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lab-home-page .story-thesis > strong {
    max-width: 22ch;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.28;
}

.lab-home-page .story-thesis > small {
    max-width: 43ch;
    color: var(--theme-text-soft);
    font-size: 0.82rem;
    line-height: 1.65;
}

.lab-home-page .story-problem-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(26px, 3vw, 40px);
}

.lab-home-page .story-problem-grid > article {
    position: relative;
    grid-column: span 2;
    min-height: 246px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 78%, #fff 22%);
    border-radius: 24px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(237, 247, 255, 0.54)),
        var(--surface-glass);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.lab-home-page .story-problem-grid > article:nth-child(4),
.lab-home-page .story-problem-grid > article:nth-child(5) {
    grid-column: span 3;
}

.lab-home-page .story-problem-grid > article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--story-rose), var(--story-electric), transparent 82%);
}

.lab-home-page .story-problem-grid > article::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--story-electric) 16%, transparent), transparent 70%);
}

.lab-home-page .story-problem-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--story-rose) 36%, var(--theme-border) 64%);
    border-radius: 999px;
    color: color-mix(in srgb, var(--story-rose) 74%, var(--theme-text) 26%);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.lab-home-page .story-problem-grid h3 {
    max-width: 22ch;
    margin: 18px 0;
    font-size: clamp(1.04rem, 1.3vw, 1.24rem);
    line-height: 1.35;
}

.lab-home-page .story-problem-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}

.lab-home-page .story-problem-pair > i {
    align-self: center;
    color: var(--story-electric);
    font-size: 0.8rem;
}

.lab-home-page .story-problem-pair p {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--theme-text-soft);
    font-size: 0.79rem;
    line-height: 1.58;
}

.lab-home-page .story-problem-pair p:last-child {
    color: var(--theme-text);
    font-weight: 720;
}

.lab-home-page .story-problem-pair small {
    color: color-mix(in srgb, var(--story-rose) 68%, var(--theme-text-soft) 32%);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lab-home-page .story-problem-pair p:last-child small {
    color: color-mix(in srgb, var(--story-green) 68%, var(--theme-text-soft) 32%);
}

.lab-home-page .story-outcome-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.lab-home-page .story-outcome-strip > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 15px;
    color: var(--theme-text-soft);
    background: color-mix(in srgb, var(--surface-glass-strong) 78%, transparent 22%);
    font-size: 0.76rem;
    font-weight: 820;
}

.lab-home-page .story-outcome-strip i {
    color: var(--story-green);
}

/* Role-aware guided story */

.lab-home-page .story-guide {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(360px, 1.35fr);
    gap: 20px 28px;
    margin-top: clamp(28px, 3vw, 42px);
    padding: clamp(20px, 2.4vw, 30px);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--story-electric) 24%, var(--theme-border) 76%);
    background:
        radial-gradient(circle at 86% 0%, rgba(85, 214, 247, 0.17), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-glass-strong) 88%, #fff 12%), color-mix(in srgb, var(--surface-glass) 78%, #e8f6ff 22%));
}

.lab-home-page .story-guide::after {
    content: "";
    position: absolute;
    right: -9%;
    top: -78%;
    width: 42%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--story-electric) 22%, transparent);
    border-radius: 50%;
    animation: storyOrbit 18s linear infinite;
}

.lab-home-page .story-guide > * {
    position: relative;
    z-index: 1;
}

.lab-home-page .story-guide-intro {
    display: grid;
    align-content: start;
    gap: 9px;
}

.lab-home-page .story-guide-intro h3 {
    margin: 2px 0 0;
    color: var(--theme-text) !important;
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    line-height: 1.18;
}

.lab-home-page .story-guide-intro p {
    max-width: 40ch;
    margin: 0;
    color: var(--theme-text-soft);
    font-size: 0.83rem;
    line-height: 1.62;
}

.lab-home-page .story-role-switcher {
    display: grid;
    align-content: start;
    gap: 9px;
}

.lab-home-page .story-role-switcher > span {
    color: var(--theme-text-soft);
    font-size: 0.67rem;
    font-weight: 920;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lab-home-page .story-role-switcher > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.lab-home-page .story-role-switcher button,
.lab-home-page .story-guide-controls button,
.lab-home-page .story-guide-chapters button,
.lab-home-page .story-layer-stack button {
    border: 1px solid color-mix(in srgb, var(--theme-border) 78%, #fff 22%);
    color: var(--theme-text);
    background: color-mix(in srgb, var(--surface-glass-strong) 78%, transparent 22%);
    font: inherit;
    cursor: pointer;
}

.lab-home-page .story-role-switcher button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 0.74rem;
    font-weight: 850;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.lab-home-page .story-role-switcher button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--story-electric) 48%, var(--theme-border) 52%);
}

.lab-home-page .story-role-switcher button.is-active {
    border-color: color-mix(in srgb, var(--story-electric) 56%, #fff 44%) !important;
    color: color-mix(in srgb, var(--theme-text) 84%, #005d78 16%) !important;
    background: linear-gradient(135deg, rgba(138, 234, 255, 0.4), rgba(87, 222, 187, 0.22)) !important;
    box-shadow: 0 10px 24px rgba(53, 183, 211, 0.15);
}

.lab-home-page .story-guide-stage {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px 20px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 20px;
    background:
        linear-gradient(100deg, rgba(7, 21, 33, 0.94), rgba(11, 36, 52, 0.92)),
        var(--center-panel);
    box-shadow: 0 18px 34px rgba(5, 28, 43, 0.16);
}

.lab-home-page .story-guide-status {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.lab-home-page .story-guide-status > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(221, 243, 252, 0.68);
    font-size: 0.64rem;
    font-weight: 840;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lab-home-page .story-guide-status > span > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--story-green);
    box-shadow: 0 0 12px rgba(87, 222, 187, 0.76);
}

.lab-home-page .story-guide[data-story-state="playing"] .story-guide-status > span > i {
    animation: storyPulse 1.8s ease-in-out infinite;
}

.lab-home-page .story-guide-status > span small {
    padding-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.lab-home-page .story-guide-status > strong {
    overflow: hidden;
    color: #f4fcff;
    font-size: clamp(1rem, 1.35vw, 1.24rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-home-page .story-guide-status > p {
    max-width: 86ch;
    min-height: 2.8em;
    margin: 0;
    color: rgba(221, 243, 252, 0.74);
    font-size: 0.78rem;
    line-height: 1.55;
}

.lab-home-page .story-guide-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.lab-home-page .story-guide-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 39px;
    min-height: 39px;
    padding: 0 12px;
    border-color: rgba(184, 226, 241, 0.2);
    border-radius: 12px;
    color: rgba(235, 250, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    font-weight: 850;
}

.lab-home-page .story-guide-controls button:hover {
    border-color: rgba(128, 225, 248, 0.5) !important;
    color: #fff !important;
    background: rgba(85, 214, 247, 0.12) !important;
}

.lab-home-page .story-guide-controls button.is-primary {
    border-color: rgba(140, 233, 255, 0.72) !important;
    color: #051923 !important;
    background: linear-gradient(135deg, #8ce9ff, #57debb) !important;
}

.lab-home-page .story-guide-controls button:not(.is-primary) {
    border-color: rgba(184, 226, 241, 0.2) !important;
    color: rgba(235, 250, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.lab-home-page .story-guide[data-story-state="playing"] #storyGuideStart {
    display: none;
}

.lab-home-page .story-guide[data-story-state="idle"] :is(#storyGuidePrevious, #storyGuideToggle, #storyGuideNext, #storyGuideReplay, #storyGuideExit) {
    opacity: 0.48;
}

.lab-home-page .story-guide-progress {
    grid-column: 1 / -1;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.lab-home-page .story-guide-progress > i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--story-electric), var(--story-green), var(--story-violet));
    box-shadow: 0 0 14px rgba(85, 214, 247, 0.56);
    transition: width 260ms ease;
}

.lab-home-page .story-guide-chapters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lab-home-page .story-guide-chapters button {
    display: grid;
    justify-items: start;
    gap: 3px;
    width: 100%;
    min-height: 52px;
    padding: 8px 9px;
    border-radius: 11px;
    color: var(--theme-text-soft);
    font-size: 0.66rem;
    font-weight: 820;
    text-align: left;
}

.lab-home-page .story-guide-chapters button > span {
    color: color-mix(in srgb, var(--story-electric) 68%, var(--theme-text-soft) 32%);
    font-size: 0.58rem;
    font-weight: 950;
}

.lab-home-page .story-guide-chapters button.is-active {
    border-color: color-mix(in srgb, var(--story-electric) 52%, var(--theme-border) 48%) !important;
    color: var(--theme-text) !important;
    background: color-mix(in srgb, var(--story-electric) 14%, var(--surface-glass-strong) 86%) !important;
}

/* Seven-layer accessible architecture */

.lab-home-page .story-architecture {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 22px;
    margin-top: clamp(30px, 3.4vw, 48px);
    padding: clamp(22px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 80%, rgba(87, 222, 187, 0.14), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(169, 135, 255, 0.13), transparent 32%),
        linear-gradient(150deg, rgba(7, 21, 33, 0.96), rgba(10, 36, 51, 0.94));
    box-shadow: 0 28px 60px rgba(4, 28, 43, 0.19);
}

.lab-home-page .story-architecture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(123, 211, 236, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123, 211, 236, 0.055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 60% 50%, #000, transparent 72%);
}

.lab-home-page .story-architecture > * {
    position: relative;
    z-index: 1;
}

.lab-home-page .story-architecture > header {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1fr);
    align-items: end;
    gap: 24px;
}

.lab-home-page .story-architecture > header > div {
    display: grid;
    gap: 10px;
}

.lab-home-page .story-architecture .home-status-kicker {
    border-color: rgba(180, 229, 244, 0.18);
    color: rgba(225, 248, 255, 0.72);
    background: rgba(255, 255, 255, 0.06);
}

.lab-home-page .story-architecture > header h3 {
    margin: 0;
    color: #f0fbff;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    line-height: 1.1;
}

.lab-home-page .story-architecture > header p {
    max-width: 62ch;
    margin: 0;
    color: rgba(221, 243, 252, 0.7);
    font-size: 0.86rem;
    line-height: 1.7;
}

.lab-home-page .story-architecture-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.7fr);
    align-items: stretch;
    gap: 22px;
}

.lab-home-page .story-layer-stack {
    display: grid;
    gap: 8px;
    perspective: 900px;
}

.lab-home-page .story-layer-stack button {
    --layer-offset: 0px;
    position: relative;
    display: grid;
    grid-template-columns: 34px 34px minmax(150px, 0.76fr) minmax(150px, 1fr);
    align-items: center;
    gap: 12px;
    width: calc(100% - var(--layer-offset));
    min-height: 60px;
    margin-left: calc(var(--layer-offset) / 2);
    padding: 10px 18px;
    overflow: hidden;
    border-color: rgba(159, 216, 234, 0.16);
    border-radius: 15px;
    color: rgba(229, 247, 253, 0.88);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.08), rgba(85, 214, 247, 0.04)),
        rgba(6, 23, 35, 0.62);
    text-align: left;
    transform-origin: center;
    transition: transform 190ms ease, border-color 190ms ease, background 190ms ease, box-shadow 190ms ease;
}

.lab-home-page .story-layer-stack button {
    border-color: rgba(159, 216, 234, 0.16) !important;
    color: rgba(229, 247, 253, 0.88) !important;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.08), rgba(85, 214, 247, 0.04)),
        rgba(6, 23, 35, 0.82) !important;
}

.lab-home-page .story-layer-stack button:nth-child(1) { --layer-offset: 84px; }
.lab-home-page .story-layer-stack button:nth-child(2) { --layer-offset: 68px; }
.lab-home-page .story-layer-stack button:nth-child(3) { --layer-offset: 52px; }
.lab-home-page .story-layer-stack button:nth-child(4) { --layer-offset: 36px; }
.lab-home-page .story-layer-stack button:nth-child(5) { --layer-offset: 20px; }
.lab-home-page .story-layer-stack button:nth-child(6) { --layer-offset: 8px; }
.lab-home-page .story-layer-stack button:nth-child(7) { --layer-offset: 0px; }

.lab-home-page .story-layer-stack button::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--story-electric), var(--story-green));
    opacity: 0.42;
}

.lab-home-page .story-layer-stack button:hover,
.lab-home-page .story-layer-stack button.is-active {
    border-color: rgba(104, 221, 247, 0.58) !important;
    color: #f4fcff !important;
    background:
        linear-gradient(105deg, rgba(85, 214, 247, 0.18), rgba(169, 135, 255, 0.09)),
        rgba(7, 30, 45, 0.9) !important;
    box-shadow: 0 14px 28px rgba(0, 14, 24, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateZ(18px) scale(1.012);
}

.lab-home-page .story-layer-stack button > span {
    color: rgba(128, 225, 248, 0.64);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.lab-home-page .story-layer-stack button > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(127, 219, 243, 0.18);
    border-radius: 10px;
    color: var(--story-electric);
    background: rgba(85, 214, 247, 0.08);
}

.lab-home-page .story-layer-stack button > strong {
    font-size: 0.86rem;
}

.lab-home-page .story-layer-stack button > small {
    overflow: hidden;
    color: rgba(218, 240, 248, 0.58);
    font-size: 0.68rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-home-page .story-layer-detail {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 100%;
    padding: 24px;
    border-color: rgba(167, 224, 242, 0.18);
    color: rgba(230, 248, 254, 0.9);
    background:
        radial-gradient(circle at 100% 0%, rgba(169, 135, 255, 0.16), transparent 38%),
        rgba(255, 255, 255, 0.07);
}

.lab-home-page .story-layer-detail > span,
.lab-home-page .story-layer-detail small {
    color: rgba(218, 240, 248, 0.56);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lab-home-page .story-layer-detail > strong {
    font-size: clamp(1.22rem, 1.7vw, 1.6rem);
    line-height: 1.18;
}

.lab-home-page .story-layer-detail > p {
    min-height: 6.4em;
    margin: 0;
    color: rgba(218, 240, 248, 0.68);
    font-size: 0.8rem;
    line-height: 1.66;
}

.lab-home-page .story-layer-detail > div:not(.story-layer-signal) {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(128, 225, 248, 0.16);
    border-radius: 14px;
    background: rgba(3, 18, 28, 0.3);
}

.lab-home-page .story-layer-detail b {
    font-size: 0.78rem;
    line-height: 1.55;
}

.lab-home-page .story-layer-detail > em {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(218, 240, 248, 0.58);
    font-size: 0.69rem;
    font-style: normal;
    line-height: 1.5;
}

.lab-home-page .story-layer-detail > em i {
    margin-top: 3px;
    color: var(--story-green);
}

.lab-home-page .story-layer-signal {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
}

.lab-home-page .story-layer-signal > i {
    display: block;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--story-electric), var(--story-violet));
    animation: storySignal 1.4s ease-in-out infinite alternate;
}

.lab-home-page .story-layer-signal > i:nth-child(1) { height: 30%; animation-delay: -0.3s; }
.lab-home-page .story-layer-signal > i:nth-child(2) { height: 72%; animation-delay: -0.9s; }
.lab-home-page .story-layer-signal > i:nth-child(3) { height: 44%; animation-delay: -0.5s; }
.lab-home-page .story-layer-signal > i:nth-child(4) { height: 92%; animation-delay: -1.2s; }
.lab-home-page .story-layer-signal > i:nth-child(5) { height: 58%; animation-delay: -0.7s; }

.lab-home-page .story-architecture-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: rgba(218, 240, 248, 0.6);
    font-size: 0.71rem;
    line-height: 1.55;
}

.lab-home-page .story-architecture-note i {
    margin-top: 3px;
    color: var(--story-amber);
}

/* Twelve-domain capability atlas */

.lab-home-page .story-capability-atlas {
    display: grid;
    gap: 22px;
    margin-top: clamp(32px, 3.4vw, 48px);
}

.lab-home-page .story-capability-atlas > header {
    display: grid;
    grid-template-columns: minmax(230px, 0.76fr) minmax(300px, 1fr);
    align-items: end;
    gap: 24px;
}

.lab-home-page .story-capability-atlas > header > div {
    display: grid;
    gap: 10px;
}

.lab-home-page .story-capability-atlas > header h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.35vw, 2.2rem);
    line-height: 1.12;
}

.lab-home-page .story-capability-atlas > header p {
    max-width: 62ch;
    margin: 0;
    color: var(--theme-text-soft);
    font-size: 0.84rem;
    line-height: 1.7;
}

.lab-home-page .story-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lab-home-page .story-capability-card {
    --cap-tone: var(--story-electric);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cap-tone) 5%, transparent), transparent 58%),
        color-mix(in srgb, var(--surface-glass-strong) 82%, transparent 18%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.lab-home-page .story-capability-card.is-simulator { --cap-tone: #8c9dff; }
.lab-home-page .story-capability-card.is-topology { --cap-tone: #58ddbc; }
.lab-home-page .story-capability-card.is-hardware { --cap-tone: #f0c369; }
.lab-home-page .story-capability-card.is-registry { --cap-tone: #57debb; }
.lab-home-page .story-capability-card.is-execution { --cap-tone: #62c8f4; }
.lab-home-page .story-capability-card.is-ai { --cap-tone: #c58bff; }
.lab-home-page .story-capability-card.is-workspace { --cap-tone: #68d7da; }
.lab-home-page .story-capability-card.is-collaboration { --cap-tone: #70b5ff; }
.lab-home-page .story-capability-card.is-compute { --cap-tone: #7fb1ff; }
.lab-home-page .story-capability-card.is-governance { --cap-tone: #ff9d83; }
.lab-home-page .story-capability-card.is-output { --cap-tone: #72e5a9; }

.lab-home-page .story-capability-card summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
}

.lab-home-page .story-capability-card summary::-webkit-details-marker {
    display: none;
}

.lab-home-page .story-capability-card summary > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--cap-tone) 32%, var(--theme-border) 68%);
    border-radius: 13px;
    color: color-mix(in srgb, var(--cap-tone) 78%, var(--theme-text) 22%);
    background: color-mix(in srgb, var(--cap-tone) 9%, var(--surface-glass-strong) 91%);
}

.lab-home-page .story-capability-card summary > span b {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 16px;
    border-radius: 999px;
    color: #071521;
    background: var(--cap-tone);
    font-size: 0.52rem;
}

.lab-home-page .story-capability-card summary > strong {
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-home-page .story-capability-card summary > em {
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--cap-tone) 24%, var(--theme-border) 76%);
    border-radius: 999px;
    color: var(--theme-text-soft);
    background: color-mix(in srgb, var(--cap-tone) 6%, transparent);
    font-size: 0.57rem;
    font-style: normal;
    font-weight: 880;
    letter-spacing: 0.04em;
}

.lab-home-page .story-capability-card summary > i {
    color: color-mix(in srgb, var(--cap-tone) 66%, var(--theme-text-soft) 34%);
    font-size: 0.72rem;
    transition: transform 180ms ease;
}

.lab-home-page .story-capability-card[open] summary > i {
    transform: rotate(45deg);
}

.lab-home-page .story-capability-card > p {
    margin: 0;
    padding: 0 18px 14px 70px;
    color: var(--theme-text-soft);
    font-size: 0.77rem;
    line-height: 1.65;
}

.lab-home-page .story-capability-card > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 16px 16px 70px;
}

.lab-home-page .story-capability-card > div > span {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 72px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 12px;
    color: var(--theme-text);
    background: color-mix(in srgb, var(--surface-glass-strong) 66%, transparent 34%);
    font-size: 0.7rem;
    font-weight: 720;
    line-height: 1.46;
}

.lab-home-page .story-capability-card > div small {
    color: color-mix(in srgb, var(--cap-tone) 70%, var(--theme-text-soft) 30%);
    font-size: 0.56rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Expanded moat and stakeholder panels */

.lab-home-page .center-platform-lower {
    grid-template-columns: minmax(0, 1.46fr) minmax(290px, 0.66fr);
}

.lab-home-page .center-innovation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-home-page .center-innovation-grid article {
    min-height: 118px;
}

.lab-home-page .center-innovation-grid article[data-story-domain] {
    border: 1px solid transparent;
}

.lab-home-page .center-audience-grid {
    gap: 9px;
}

.lab-home-page .center-audience-grid article {
    border: 1px solid transparent;
}

.lab-home-page .center-audience-grid article.is-audience-active {
    border-color: color-mix(in srgb, var(--story-electric) 52%, var(--theme-border) 48%);
    background: color-mix(in srgb, var(--story-electric) 9%, var(--surface-glass-strong) 91%);
    transform: translateX(4px);
}

/* Evidence maturity, decision value */

.lab-home-page .story-evidence-section {
    display: grid;
    gap: clamp(24px, 3vw, 38px);
    padding: clamp(30px, 4vw, 58px);
    background:
        radial-gradient(circle at 92% 8%, rgba(169, 135, 255, 0.13), transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(87, 222, 187, 0.12), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-glass-strong) 92%, #fff 8%), color-mix(in srgb, var(--surface-glass) 84%, #edf7ff 16%));
}

.lab-home-page .story-evidence-section .section-title {
    max-width: 18ch;
}

.lab-home-page .story-evidence-principle {
    flex: 0 0 min(390px, 36%);
    display: grid;
    gap: 7px;
    padding: 20px 22px;
}

.lab-home-page .story-evidence-principle > span {
    color: var(--theme-text-soft);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lab-home-page .story-evidence-principle > strong {
    font-size: 1rem;
    line-height: 1.35;
}

.lab-home-page .story-evidence-principle > small {
    color: var(--theme-text-soft);
    font-size: 0.76rem;
    line-height: 1.6;
}

.lab-home-page .story-evidence-ladder {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
}

.lab-home-page .story-evidence-ladder > article {
    --evidence-tone: var(--story-electric);
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 224px;
    padding: 18px 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--evidence-tone) 22%, var(--theme-border) 78%);
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--evidence-tone) 9%, transparent), transparent 48%),
        color-mix(in srgb, var(--surface-glass-strong) 80%, transparent 20%);
}

.lab-home-page .story-evidence-ladder > article:nth-child(2) { --evidence-tone: #65d9f1; }
.lab-home-page .story-evidence-ladder > article:nth-child(3) { --evidence-tone: #57debb; }
.lab-home-page .story-evidence-ladder > article:nth-child(4) { --evidence-tone: #8c9dff; }
.lab-home-page .story-evidence-ladder > article:nth-child(5) { --evidence-tone: #f0c369; }
.lab-home-page .story-evidence-ladder > article:nth-child(6) { --evidence-tone: #ff9d83; }
.lab-home-page .story-evidence-ladder > article:nth-child(7) { --evidence-tone: #a987ff; }

.lab-home-page .story-evidence-ladder > article::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--evidence-height, 12%);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--evidence-tone) 12%, transparent));
}

.lab-home-page .story-evidence-ladder > article:nth-child(1) { --evidence-height: 18%; }
.lab-home-page .story-evidence-ladder > article:nth-child(2) { --evidence-height: 28%; }
.lab-home-page .story-evidence-ladder > article:nth-child(3) { --evidence-height: 40%; }
.lab-home-page .story-evidence-ladder > article:nth-child(4) { --evidence-height: 52%; }
.lab-home-page .story-evidence-ladder > article:nth-child(5) { --evidence-height: 66%; }
.lab-home-page .story-evidence-ladder > article:nth-child(6) { --evidence-height: 80%; }
.lab-home-page .story-evidence-ladder > article:nth-child(7) { --evidence-height: 94%; }

.lab-home-page .story-evidence-ladder span {
    position: relative;
    z-index: 1;
    color: color-mix(in srgb, var(--evidence-tone) 76%, var(--theme-text-soft) 24%);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.lab-home-page .story-evidence-ladder i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--evidence-tone) 28%, var(--theme-border) 72%);
    border-radius: 12px;
    color: var(--evidence-tone);
    background: color-mix(in srgb, var(--evidence-tone) 9%, var(--surface-glass-strong) 91%);
}

.lab-home-page .story-evidence-ladder strong,
.lab-home-page .story-evidence-ladder p {
    position: relative;
    z-index: 1;
}

.lab-home-page .story-evidence-ladder strong {
    font-size: 0.78rem;
    line-height: 1.35;
}

.lab-home-page .story-evidence-ladder p {
    margin: 0;
    color: var(--theme-text-soft);
    font-size: 0.66rem;
    line-height: 1.54;
}

.lab-home-page .story-value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lab-home-page .story-value-grid > article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 76%, #fff 24%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-glass-strong) 82%, transparent 18%);
}

.lab-home-page .story-value-grid > article > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--story-electric);
    background: color-mix(in srgb, var(--story-electric) 11%, var(--surface-glass-strong) 89%);
}

.lab-home-page .story-value-grid > article > span {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.lab-home-page .story-value-grid small {
    color: var(--theme-text-soft);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lab-home-page .story-value-grid strong {
    font-size: 0.88rem;
    line-height: 1.38;
}

.lab-home-page .story-value-grid p {
    margin: 0;
    color: var(--theme-text-soft);
    font-size: 0.7rem;
    line-height: 1.58;
}

.lab-home-page .story-evidence-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px dashed color-mix(in srgb, var(--story-amber) 42%, var(--theme-border) 58%);
    border-radius: 16px;
    color: var(--theme-text-soft);
    background: color-mix(in srgb, var(--story-amber) 6%, transparent);
}

.lab-home-page .story-evidence-note > i {
    margin-top: 3px;
    color: var(--story-amber);
}

.lab-home-page .story-evidence-note > span {
    display: grid;
    gap: 3px;
    font-size: 0.72rem;
    line-height: 1.55;
}

.lab-home-page .story-evidence-note strong {
    color: var(--theme-text);
}

@keyframes storyPulse {
    0%, 100% { opacity: 0.56; transform: scale(0.84); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes storySignal {
    from { transform: scaleY(0.55); opacity: 0.52; }
    to { transform: scaleY(1); opacity: 1; }
}

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

@media (max-width: 1220px) {
    .lab-home-page .story-problem-grid > article {
        grid-column: span 3;
    }

    .lab-home-page .story-problem-grid > article:last-child {
        grid-column: 2 / span 4;
    }

    .lab-home-page .story-guide {
        grid-template-columns: 1fr;
    }

    .lab-home-page .story-role-switcher > div {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }

    .lab-home-page .story-role-switcher {
        overflow-x: auto;
    }

    .lab-home-page .story-guide-chapters {
        grid-template-columns: repeat(9, minmax(110px, 1fr));
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
    }

    .lab-home-page .story-guide-chapters li {
        scroll-snap-align: start;
    }

    .lab-home-page .story-evidence-ladder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lab-home-page .story-evidence-ladder > article {
        min-height: 190px;
    }

    .lab-home-page .story-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .lab-home-page .story-thesis,
    .lab-home-page .story-evidence-principle {
        flex-basis: auto;
        width: 100%;
    }

    .lab-home-page .story-architecture > header,
    .lab-home-page .story-capability-atlas > header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .lab-home-page .story-architecture-layout {
        grid-template-columns: 1fr;
    }

    .lab-home-page .story-layer-detail {
        min-height: 250px;
    }

    .lab-home-page .story-capability-grid {
        grid-template-columns: 1fr;
    }

    .lab-home-page .center-platform-lower {
        grid-template-columns: 1fr;
    }

    .lab-home-page .story-evidence-ladder {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .lab-home-page .story-problem-section,
    .lab-home-page .story-evidence-section {
        padding: 24px 18px;
    }

    .lab-home-page .story-problem-grid,
    .lab-home-page .story-outcome-strip,
    .lab-home-page .story-evidence-ladder,
    .lab-home-page .story-value-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(260px, 84vw);
        gap: 12px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 3px 18px 14px;
        overflow-x: auto;
        scroll-padding-inline: 18px;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
    }

    .lab-home-page .story-problem-grid > article,
    .lab-home-page .story-problem-grid > article:nth-child(4),
    .lab-home-page .story-problem-grid > article:nth-child(5),
    .lab-home-page .story-problem-grid > article:last-child {
        grid-column: auto;
        min-height: 250px;
        scroll-snap-align: start;
    }

    .lab-home-page .story-outcome-strip {
        grid-auto-columns: minmax(220px, 72vw);
        margin-top: 8px;
    }

    .lab-home-page .story-outcome-strip > span,
    .lab-home-page .story-evidence-ladder > article,
    .lab-home-page .story-value-grid > article {
        scroll-snap-align: start;
    }

    .lab-home-page .story-guide {
        margin-top: 24px;
        padding: 18px;
    }

    .lab-home-page .story-role-switcher {
        margin-right: -18px;
        margin-left: -18px;
        padding: 0 18px 8px;
    }

    .lab-home-page .story-role-switcher > div {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .lab-home-page .story-guide-stage {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .lab-home-page .story-guide-controls {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .lab-home-page .story-guide-progress {
        grid-column: 1;
    }

    .lab-home-page .story-guide-chapters {
        margin-right: -18px;
        margin-left: -18px;
        padding: 0 18px 8px;
    }

    .lab-home-page .story-architecture {
        margin-top: 28px;
        padding: 21px 16px;
        border-radius: 22px;
    }

    .lab-home-page .story-layer-stack {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(300px, 86vw);
        margin-right: -16px;
        margin-left: -16px;
        padding: 4px 16px 12px;
        overflow-x: auto;
        scroll-padding-inline: 16px;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
    }

    .lab-home-page .story-layer-stack button,
    .lab-home-page .story-layer-stack button:nth-child(n) {
        --layer-offset: 0px;
        grid-template-columns: 30px 32px minmax(150px, 1fr);
        width: min(86vw, 620px);
        min-width: min(86vw, 620px);
        margin-left: 0;
        scroll-snap-align: start;
    }

    .lab-home-page .story-layer-stack button > small {
        grid-column: 3;
        white-space: normal;
    }

    .lab-home-page .story-layer-detail {
        min-height: 0;
    }

    .lab-home-page .story-capability-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(300px, 86vw);
        gap: 12px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 3px 18px 12px;
        overflow-x: auto;
        scroll-padding-inline: 18px;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
    }

    .lab-home-page .story-capability-card {
        scroll-snap-align: start;
    }

    .lab-home-page .story-capability-card summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .lab-home-page .story-capability-card summary > em {
        display: none;
    }

    .lab-home-page .story-capability-card > p {
        padding-left: 18px;
    }

    .lab-home-page .story-capability-card > div {
        margin-left: 16px;
    }

    .lab-home-page .center-innovation-grid {
        grid-auto-columns: minmax(250px, 82vw);
    }

    .lab-home-page .story-evidence-ladder {
        grid-auto-columns: minmax(220px, 70vw);
    }

    .lab-home-page .story-evidence-ladder > article {
        min-height: 212px;
    }
}

@media (max-width: 430px) {
    .lab-home-page .story-problem-pair {
        grid-template-columns: 1fr;
    }

    .lab-home-page .story-problem-pair > i {
        justify-self: start;
        transform: rotate(90deg);
    }

    .lab-home-page .story-guide-controls button > span {
        display: none;
    }

    .lab-home-page .story-guide-status > strong {
        white-space: normal;
    }

    .lab-home-page .story-capability-card > div {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-home-page :is(
        [data-story-domain],
        .story-role-switcher button,
        .story-guide-progress > i,
        .story-layer-stack button,
        .story-capability-card summary > i
    ) {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }

    .lab-home-page :is(
        .story-guide::after,
        .story-guide-status > span > i,
        .story-layer-signal > i
    ) {
        animation: none !important;
    }

    .lab-home-page [data-story-domain].is-story-linked,
    .lab-home-page .story-layer-stack button:hover,
    .lab-home-page .story-layer-stack button.is-active {
        transform: none;
    }
}