////
///
/// Lab Site Styles
/// ===========================================================================
///
/// Component classes the scapepress sites use under the `ss-c-` prefix,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module, so at
/// equal specificity a native module rule wins.
///
/// 45 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Lab
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "../../01-core/external" as *;

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- demo  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-demo {
        padding: var(--ss-spacing-24) var(--ss-spacing-6);
        background: var(--ss-color-white);

        &__inner {
            display: grid;
            grid-template-columns: 1fr;
            gap: unset;
            align-items: center;
            max-width: q(1200);
            margin: 0 auto;

            @media (min-width: q(1024)) {
                grid-template-columns: 1fr 1fr;
            }
        }

        &__content {
            text-align: center;

            @media (min-width: q(1024)) {
                text-align: left;
            }
        }

        &__title {
            margin: var(--ss-spacing-6) 0 var(--ss-spacing-4);
        }

        &__description {
            color: var(--ss-color-gray-600);
            margin-bottom: unset;
        }

        &__visual {
            display: flex;
            justify-content: center;
        }

        &__window {
            width: 100%;
            max-width: q(500);
            background: var(--ss-color-white);
            border: q(1) solid var(--ss-color-border);
            border-radius: var(--ss-radius-none);
            overflow: hidden;

            &-header {
                display: flex;
                gap: unset;
                padding: unset;
                background: var(--ss-color-fill);
                border-bottom: q(1) solid var(--ss-color-border);

                span {
                    width: q(12);
                    height: q(12);
                    border-radius: 50%;
                    background: var(--ss-color-gray-500);

                    &:first-child { background: var(--ss-color-error); }
                    &:nth-child(2) { background: var(--ss-color-warning); }
                    &:nth-child(3) { background: var(--ss-color-success); }
                }
            }

            &-content {
                height: q(300);
                padding: unset;
            }
        }

        &__animation {
            position: relative;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(color-mix(in srgb, var(--ss-color-primary) 10%, transparent) q(1), transparent q(1)),
                linear-gradient(90deg, color-mix(in srgb, var(--ss-color-primary) 10%, transparent) q(1), transparent q(1));
            background-size: q(20) q(20);
            border-radius: var(--ss-radius-none);
        }

        &__grid-animated {
            position: absolute;
            inset: q(20);
            border: q(2) dashed color-mix(in srgb, var(--ss-color-primary) 30%, transparent);
            border-radius: var(--ss-radius-none);
            animation: gridPulse calc(var(--ss-duration-1000) * 3) infinite;
        }

        &__cursor {
            position: absolute;
            width: q(16);
            height: q(16);
            background: var(--ss-color-primary);
            border-radius: 50%;
            top: 50%;
            left: 30%;
            animation: cursorMove calc(var(--ss-duration-1000) * 4) infinite;
        }
    }

    // -- globe-wireframe  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-wireframe {
      width: 100%;
      max-width: q(400);
      aspect-ratio: 1;
    }

    // -- globe-svg  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 q(10) q(30) color-mix(in srgb, var(--ss-color-accent) 10%, transparent));
    }

    // -- globe-outline  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-outline {
      fill: none;
      stroke: var(--ss-color-border);
      stroke-width: 1.5;
    }

    // -- globe-line  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-line {
      fill: none;
      stroke: var(--ss-color-border);
      stroke-width: 0.75;
      opacity: 0.6;

      &--vertical {
        transform-origin: center;
      }
    }

    // -- globe-axis  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-axis {
      stroke: var(--ss-color-line);
      stroke-width: 0.5;
      stroke-dasharray: 4 4;
      opacity: 0.4;
    }

    // -- globe-cell  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-cell {
      fill: color-mix(in srgb, var(--ss-color-accent) 10%, transparent);
      stroke: var(--ss-color-accent);
      stroke-width: 1;
      opacity: 0.8;
      // (stripped @include block)


      &--accent {
        fill: color-mix(in srgb, var(--ss-color-accent) 25%, transparent);
        stroke-width: 1.5;
        opacity: 1;
      }

      &:hover {
        opacity: 1;
        fill: color-mix(in srgb, var(--ss-color-accent) 35%, transparent);
      }
    }

    // -- globe-animated  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-animated {
      // (stripped @include block)


      &--slow {
        // (stripped @include block)

      }

      &--fast {
        // (stripped @include block)

      }

      // Pause animation on hover
      &:hover {
        // (stripped @include block)

      }
    }

    // -- globe-container  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-container {
      perspective: q(1000);

      .ss-c-globe-svg {
        transform-style: preserve-3d;
      }
    }

    // -- globe-point  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-point {
      fill: var(--ss-color-success);

      &--pulse {
        // (stripped @include block)

      }
    }

    // -- globe-pattern  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-pattern {
      background-image:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--ss-color-accent) 10%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--ss-color-info) 10%, transparent) 0%, transparent 50%);
      background-size: 100% 100%;
      background-attachment: fixed;
    }

    // -- ai-typing  (from site-inthecity_ai/src/static/scss/utilities/_reveal.scss) --
    .ss-c-ai-typing {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: q(2) solid var(--ss-color-accent);
        animation:
            typing calc(var(--ss-duration-1000) * 3) steps(30, end),
            blink var(--ss-duration-700) step-end infinite;
    }

    // -- dh-card  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-dh-card {
        &[data-cursor-text] {
            // Text will be shown in cursor dot
        }
    }

    // -- dh-hero  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-hero {
        text-align: center;
        padding: q(48) q(32);
        margin-bottom: q(32);

        h1 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(40);
            font-weight: 700;
            color: var(--ss-color-gray-600);
            margin-bottom: q(12);
            letter-spacing: -0.02em;
        }

        p {
            font-size: q(17.6);
            color: var(--ss-color-gray-500);
            max-width: q(600);
            margin: 0 auto;
            line-height: 1.6;
        }
    }

    // -- dh-stats  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-stats {
        display: flex;
        justify-content: center;
        gap: q(32);
        padding: q(24);
        margin: 0 q(32) q(32);
        background: var(--ss-color-white);
        border-radius: q(16);
        box-shadow:
            q(8) q(8) q(16) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
            q(-8) q(-8) q(16) color-mix(in srgb, var(--ss-color-white) 50%, transparent);

        @media (max-width: q(768)) {
            flex-wrap: wrap;
            gap: q(16);
            margin: 0 q(16) q(24);
        }
    }

    // -- dh-stat  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-stat {
        text-align: center;
        padding: q(12) q(24);
        background: var(--ss-color-white);
        border-radius: q(12);
        box-shadow:
            inset q(3) q(3) q(6) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
            inset q(-3) q(-3) q(6) color-mix(in srgb, var(--ss-color-white) 50%, transparent);

        &__value {
            display: block;
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(24);
            font-weight: 700;
            color: var(--ss-color-accent);
            margin-bottom: q(4);
        }

        &__label {
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ss-color-gray-500);
        }
    }

    // -- dh-grid  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(320), 1fr));
        gap: q(32);
        padding: 0 q(32) q(48);

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
            gap: q(24);
            padding: 0 q(16) q(32);
        }
    }

    // -- dh-tech-section  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-tech-section {
        padding: q(32);
        margin: 0 q(32) q(32);
        background: var(--ss-color-white);
        border-radius: q(20);
        box-shadow:
            q(8) q(8) q(16) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
            q(-8) q(-8) q(16) color-mix(in srgb, var(--ss-color-white) 50%, transparent);

        h2 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(20);
            color: var(--ss-color-gray-600);
            margin: 0 0 q(20);
            text-align: center;
        }

        @media (max-width: q(768)) {
            margin: 0 q(16) q(24);
            padding: q(24);
        }
    }

    // -- dh-tech-list  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-tech-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(12);
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            padding: q(8) q(16);
            background: var(--ss-color-white);
            border-radius: q(20);
            font-size: q(12.8);
            color: var(--ss-color-gray-600);
            box-shadow:
                inset q(2) q(2) q(4) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
                inset q(-2) q(-2) q(4) color-mix(in srgb, var(--ss-color-white) 50%, transparent);
            transition: all var(--ss-duration-200) ease;

            &:hover {
                color: var(--ss-color-accent);
                box-shadow:
                    q(3) q(3) q(6) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
                    q(-3) q(-3) q(6) color-mix(in srgb, var(--ss-color-white) 50%, transparent);
            }
        }
    }

    // -- dh-pipeline-section  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-pipeline-section {
        padding: q(32);
        margin: 0 q(32) q(48);
        background: var(--ss-color-white);
        border-radius: q(20);
        box-shadow:
            q(8) q(8) q(16) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
            q(-8) q(-8) q(16) color-mix(in srgb, var(--ss-color-white) 50%, transparent);

        h2 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(20);
            color: var(--ss-color-gray-600);
            margin: 0 0 q(24);
            text-align: center;
        }

        @media (max-width: q(768)) {
            margin: 0 q(16) q(32);
            padding: q(24);
        }
    }

    // -- dh-pipeline  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-pipeline {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: q(8);

        &__step {
            display: flex;
            align-items: center;
            gap: q(8);
        }

        &__box {
            padding: q(12) q(20);
            background: var(--ss-color-white);
            border-radius: q(10);
            font-size: q(13.6);
            font-weight: 500;
            color: var(--ss-color-gray-600);
            box-shadow:
                q(4) q(4) q(8) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
                q(-4) q(-4) q(8) color-mix(in srgb, var(--ss-color-white) 50%, transparent);
            transition: all var(--ss-duration-200) ease;
            white-space: nowrap;

            &:hover {
                color: var(--ss-color-accent);
                box-shadow:
                    q(6) q(6) q(12) color-mix(in srgb, var(--ss-color-black) 15%, transparent),
                    q(-6) q(-6) q(12) color-mix(in srgb, var(--ss-color-white) 50%, transparent);
            }
        }

        &__arrow {
            color: var(--ss-color-gray-300);
            font-size: q(19.2);
        }

        @media (max-width: q(768)) {
            flex-direction: column;
            gap: q(12);

            &__arrow {
                transform: rotate(90deg);
            }
        }
    }

    // -- lab-experiments  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-experiments {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(320), 1fr));
        gap: q(32);
        padding: q(32);
        max-width: q(1400);
        margin: 0 auto;
    }

    // -- experiment-card  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-experiment-card {
        display: flex;
        flex-direction: column;
        padding: q(32);
        border-radius: q(24);
        transition: transform var(--ss-duration-300) ease, box-shadow var(--ss-duration-300) ease;

        &:hover {
            transform: translateY(q(-4));

            .ss-c-experiment-orb {
                animation-play-state: running;
            }

            .ss-c-experiment-orb__ring {
                animation-play-state: running;
            }
        }

        &__visual {
            display: flex;
            justify-content: center;
            align-items: center;
            height: q(200);
            margin-bottom: q(24);
        }

        &__content {
            text-align: center;
        }

        &__category {
            display: inline-block;
            font-size: q(11.2);
            font-weight: 600;
            letter-spacing: 0.1em;
            color: unset;
            background: unset;
            padding: q(4) q(12);
            border-radius: q(16);
            margin-bottom: q(12);
        }

        &__title {
            font-size: q(20);
            font-weight: 600;
            margin-bottom: q(8);
            color: var(--ss-color-gray-700);
        }

        &__description {
            font-size: q(14.4);
            color: var(--ss-color-gray-400);
            margin-bottom: q(24);
            line-height: 1.5;
        }

        &__btn {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            padding: q(12) q(24);
            font-size: q(13.6);
            cursor: pointer;
            transition: all var(--ss-duration-300) ease;

            .ss-c-btn-icon {
                transition: transform var(--ss-duration-300) ease;
            }

            &:hover .ss-c-btn-icon {
                transform: translateX(q(4));
            }
        }
    }

    // -- experiment-orb  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-experiment-orb {
        position: relative;
        width: q(120);
        height: q(120);

        &__core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: q(40);
            height: q(40);
            background: linear-gradient(135deg, var(--ss-color-accent), var(--ss-color-info));
            border-radius: 50%;
            box-shadow:
                0 0 q(20) color-mix(in srgb, var(--ss-color-accent) 40%, transparent),
                inset 0 0 q(10) color-mix(in srgb, var(--ss-color-white) 30%, transparent);
            animation: orb-pulse var(--ss-duration-loop-slow) ease-in-out infinite;
        }

        &__ring {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            border: q(2) solid transparent;
            animation-play-state: paused;

            &--1 {
                width: q(70);
                height: q(70);
                margin: q(-35) 0 0 q(-35);
                border-color: unset;
                animation: ring-rotate calc(var(--ss-duration-1000) * 4) linear infinite;
            }

            &--2 {
                width: q(90);
                height: q(90);
                margin: q(-45) 0 0 q(-45);
                border-color: unset;
                animation: ring-rotate calc(var(--ss-duration-1000) * 6) linear infinite reverse;
            }

            &--3 {
                width: q(110);
                height: q(110);
                margin: q(-55) 0 0 q(-55);
                border-color: unset;
                animation: ring-rotate calc(var(--ss-duration-1000) * 8) linear infinite;
            }
        }

        &__particles {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
        }

        &__particle {
            position: absolute;
            width: q(4);
            height: q(4);
            background: unset;
            border-radius: 50%;
            transform: rotate(var(--particle-angle, 0deg)) translateX(q(50));
            animation: particle-orbit calc(var(--ss-duration-1000) * 3) linear infinite;
            animation-delay: var(--particle-delay, 0s);
        }
    }

    // -- lab-console-section  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-console-section {
        .ss-c-section-title {
            text-align: center;
        }
    }

    // -- lab-console  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-console {
        font-family: 'TTInterphasesPro', sans-serif;
        background: var(--ss-color-gray-800);
        border-radius: q(16);
        overflow: hidden;

        .ss-c-console-header {
            display: flex;
            align-items: center;
            gap: q(8);
            padding: q(12) q(16);
            background: var(--ss-color-gray-800);
            border-bottom: q(1) solid var(--ss-color-info-foreground);
        }

        .ss-c-console-dot {
            width: q(12);
            height: q(12);
            border-radius: 50%;

            &--red { background: var(--ss-color-error); }
            &--yellow { background: var(--ss-color-warning); }
            &--green { background: var(--ss-color-success); }
        }

        .ss-c-console-title {
            margin-left: q(16);
            font-size: q(12);
            color: var(--ss-color-gray-500);
        }

        .ss-c-console-body {
            padding: q(24);
            min-height: q(200);
        }

        .ss-c-console-line {
            display: flex;
            align-items: center;
            gap: q(12);
            margin-bottom: q(12);
            font-size: q(13.6);
            color: var(--ss-color-gray-400);

            &--success {
                color: unset;
            }

            &--highlight {
                color: unset;
            }
        }

        .ss-c-console-prompt {
            color: unset;
        }

        .ss-c-console-cursor {
            display: inline-block;
            width: q(8);
            height: q(16);
            background: unset;
            animation: cursor-blink var(--ss-duration-1000) step-end infinite;
        }
    }

    // -- lab-stats  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-stats {
        padding: q(32);
    }

    // -- playground-featured  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-featured {
        padding: q(48) q(32);

        &__container {
            max-width: q(800);
            margin: 0 auto;
            text-align: center;
        }

        &__badge {
            display: inline-block;
            font-size: q(11.2);
            padding: q(5.6) q(16);
            background: linear-gradient(135deg, var(--ss-color-info), var(--ss-color-error));
            color: var(--ss-color-white);
            border-radius: q(100);
            font-weight: 600;
            letter-spacing: 0.1em;
            margin-bottom: q(16);
        }

        &__title {
            font-size: q(32);
            font-weight: 700;
            color: var(--ss-color-white);
            margin-bottom: q(12);
        }

        &__description {
            font-size: q(16);
            color: var(--ss-color-gray-300);
            max-width: q(500);
            margin: 0 auto q(32);
        }

        &__demo {
            max-width: q(600);
            margin: 0 auto;
        }
    }

    // -- playground-chat  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-chat {
        background: var(--ss-color-gray-900);
        border: q(1) solid var(--ss-color-gray-700);
        border-radius: q(12);
        overflow: hidden;

        &__messages {
            height: q(300);
            overflow-y: auto;
            padding: q(16);
            display: flex;
            flex-direction: column;
            gap: q(16);
        }

        &__message {
            display: flex;
            gap: q(12);
            max-width: 80%;

            &--user {
                align-self: flex-end;
                flex-direction: row-reverse;

                .ss-c-playground-chat__bubble {
                    background: var(--ss-color-info);
                    color: var(--ss-color-white);
                }
            }

            &--system {
                align-self: flex-start;

                .ss-c-playground-chat__bubble {
                    background: var(--ss-color-gray-700);
                    color: var(--ss-color-gray-200);
                }
            }
        }

        &__avatar {
            font-size: q(24);
            flex-shrink: 0;
        }

        &__bubble {
            padding: q(12) q(16);
            border-radius: q(12);
            font-size: q(14.4);
            line-height: 1.5;
        }

        &__input-area {
            display: flex;
            gap: q(8);
            padding: q(16);
            border-top: q(1) solid var(--ss-color-gray-700);
            background: var(--ss-color-gray-800);
        }

        &__input {
            flex: 1;
            background: var(--ss-color-gray-700);
            border: q(1) solid var(--ss-color-gray-600);
            border-radius: q(8);
            padding: q(12) q(16);
            color: var(--ss-color-gray-200);
            font-size: q(14.4);

            &:focus {
                outline: none;
                border-color: var(--ss-color-info);
            }

            &::placeholder {
                color: var(--ss-color-gray-500);
            }
        }

        &__send {
            padding: q(12) q(24);
        }
    }

    // -- playground-demos  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-demos {
        padding: q(32);

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
            gap: q(24);
            max-width: q(1200);
            margin: 0 auto;
        }
    }

    // -- playground-demo  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-demo {
        overflow: hidden;
        transition: transform var(--ss-duration-300) ease;

        &:hover {
            transform: translateY(q(-4));

            .ss-c-playground-demo__overlay {
                opacity: 1;
            }
        }

        &__preview {
            position: relative;
            background: var(--ss-color-gray-800);
            border-radius: q(8) q(8) 0 0;
            overflow: hidden;
        }

        &__canvas {
            aspect-ratio: 16 / 9;

            svg {
                width: 100%;
                height: 100%;
            }
        }

        &__overlay {
            position: absolute;
            inset: 0;
            background: color-mix(in srgb, var(--ss-color-black) 50%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity var(--ss-duration-300);
        }

        &__play {
            width: q(50);
            height: q(50);
            background: unset;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: q(20);
            color: var(--ss-color-white);
        }

        &__info {
            padding: q(16);
        }

        &__meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: q(8);
        }

        &__type {
            font-size: q(10.4);
            color: unset;
            font-weight: 600;
            letter-spacing: 0.1em;
        }

        &__difficulty {
            font-size: q(10.4);
            padding: q(3.2) q(8);
            border-radius: q(4);
            font-weight: 600;

            &--easy {
                background: color-mix(in srgb, var(--ss-color-success) 20%, transparent);
                color: var(--ss-color-success);
            }

            &--medium {
                background: color-mix(in srgb, var(--ss-color-warning) 20%, transparent);
                color: var(--ss-color-warning);
            }

            &--advanced {
                background: color-mix(in srgb, var(--ss-color-error) 20%, transparent);
                color: var(--ss-color-error);
            }
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: var(--ss-color-gray-200);
            margin-bottom: q(8);
        }

        &__description {
            font-size: q(12.8);
            color: var(--ss-color-gray-500);
            line-height: 1.5;
            margin-bottom: q(16);
        }

        &__launch {
            width: 100%;
        }
    }

    // -- playground-explainer  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-explainer {
        display: flex;
        flex-direction: column;
        gap: q(24);

        &__step {
            display: flex;
            gap: q(16);
            align-items: flex-start;
        }

        &__num {
            font-size: q(24);
            font-weight: 700;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
            line-height: 1;
        }

        &__content {
            strong {
                display: block;
                font-size: q(14.4);
                color: var(--ss-color-gray-200);
                margin-bottom: q(4);
            }

            p {
                font-size: q(12.8);
                color: var(--ss-color-gray-500);
                line-height: 1.5;
            }
        }
    }

    // -- threed-viewer  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-viewer {
        position: relative;
        width: 100%;
        max-width: q(1200);
        margin: 0 auto;

        &__canvas {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: var(--ss-color-gray-900);
            border-radius: q(12);
            overflow: hidden;

            canvas {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        &__loading {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: q(16);
            background: var(--ss-color-gray-900);
            color: var(--ss-color-gray-500);
            font-size: q(14.4);
        }

        &__spinner {
            width: q(40);
            height: q(40);
            border: q(3) solid var(--ss-color-gray-700);
            border-top-color: unset;
            border-radius: 50%;
            animation: spin var(--ss-duration-1000) linear infinite;
        }

        &__controls {
            position: absolute;
            bottom: q(16);
            left: 50%;
            transform: translateX(-50%);
        }
    }

    // -- threed-controls  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-controls {
        display: flex;
        gap: q(8);
        padding: q(8);
        background: color-mix(in srgb, var(--ss-color-black) 70%, transparent);
        backdrop-filter: blur(q(10));
        border-radius: q(8);
    }

    // -- threed-control  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-control {
        width: q(36);
        height: q(36);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: q(17.6);
        background: var(--ss-color-gray-800);
        border: q(1) solid var(--ss-color-gray-700);
        color: var(--ss-color-gray-200);
        border-radius: q(6);
        cursor: pointer;
        transition: all var(--ss-duration-200);

        &:hover {
            background: unset;
            border-color: unset;
        }
    }

    // -- threed-scenes  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-scenes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(300), 1fr));
        gap: q(16);
        padding: q(16) q(32);
        max-width: q(1200);
        margin: 0 auto;
    }

    // -- threed-scene  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-scene {
        display: flex;
        gap: q(16);
        align-items: flex-start;
        padding: q(16);
        text-align: left;
        cursor: pointer;
        border: q(2) solid transparent;
        transition: all var(--ss-duration-300) ease;

        &--active {
            border-color: unset;

            .ss-c-threed-scene__icon {
                transform: scale(1.1);
            }
        }

        &:hover:not(.ss-c-threed-scene--active) {
            border-color: var(--ss-color-gray-600);
        }

        &__icon {
            font-size: q(32);
            transition: transform var(--ss-duration-300);
        }

        &__info {
            flex: 1;
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: var(--ss-color-gray-200);
            margin-bottom: q(4);
        }

        &__description {
            font-size: q(12.8);
            color: var(--ss-color-gray-500);
            line-height: 1.4;
            margin-bottom: q(8);
        }

        &__complexity {
            font-size: q(10.4);
            padding: q(3.2) q(8);
            border-radius: q(4);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;

            &--easy {
                background: color-mix(in srgb, var(--ss-color-success) 20%, transparent);
                color: var(--ss-color-success);
            }

            &--medium {
                background: color-mix(in srgb, var(--ss-color-warning) 20%, transparent);
                color: var(--ss-color-warning);
            }

            &--advanced {
                background: color-mix(in srgb, var(--ss-color-info) 20%, transparent);
                color: unset;
            }
        }
    }

    // -- threed-params  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-params {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
        gap: q(24);
        padding: q(24);
        max-width: q(800);
        margin: 0 auto;
    }

    // -- threed-param  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-param {
        display: flex;
        flex-direction: column;
        gap: q(8);

        &__label {
            font-size: q(12.8);
            color: var(--ss-color-gray-300);
            font-weight: 500;
        }

        &__slider {
            -webkit-appearance: none;
            width: 100%;
            height: q(6);
            background: var(--ss-color-gray-700);
            border-radius: q(3);
            outline: none;

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: q(18);
                height: q(18);
                background: unset;
                border-radius: 50%;
                cursor: pointer;
                transition: transform var(--ss-duration-200);

                &:hover {
                    transform: scale(1.2);
                }
            }
        }

        &__value {
            font-size: q(12);
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
        }

        &__select {
            background: var(--ss-color-gray-800);
            border: q(1) solid var(--ss-color-gray-700);
            border-radius: q(6);
            padding: q(8);
            color: var(--ss-color-gray-200);
            font-size: q(13.6);

            &:focus {
                outline: none;
                border-color: unset;
            }
        }
    }

    // -- threed-toggle  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-toggle {
        position: relative;
        display: inline-block;
        width: q(44);
        height: q(24);

        input {
            opacity: 0;
            width: 0;
            height: 0;

            &:checked + .ss-c-threed-toggle__slider {
                background: unset;

                &::before {
                    transform: translateX(q(20));
                }
            }
        }

        &__slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: var(--ss-color-gray-700);
            border-radius: q(12);
            transition: var(--ss-duration-300);

            &::before {
                content: '';
                position: absolute;
                height: q(18);
                width: q(18);
                left: q(3);
                bottom: q(3);
                background: var(--ss-color-white);
                border-radius: 50%;
                transition: var(--ss-duration-300);
            }
        }
    }

    // -- threed-help  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-help {
        display: flex;
        justify-content: center;
        gap: q(16);
        flex-wrap: wrap;
        padding: q(16) q(32);

        &__item {
            display: flex;
            align-items: center;
            gap: q(12);
            padding: q(12) q(16);
        }

        &__key {
            display: inline-block;
            padding: q(5.6) q(12);
            background: var(--ss-color-gray-800);
            border: q(1) solid var(--ss-color-gray-600);
            border-radius: q(6);
            font-size: q(12.8);
            font-family: 'TTInterphasesPro', sans-serif;
            color: unset;
        }

        &__action {
            font-size: q(13.6);
            color: var(--ss-color-gray-300);
        }
    }

    // -- threed-stats  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-stats {
        position: fixed;
        top: q(80);
        right: q(16);
        display: flex;
        gap: q(16);
        padding: q(12) q(16);
        background: color-mix(in srgb, var(--ss-color-black) 80%, transparent);
        backdrop-filter: blur(q(10));
        border-radius: q(8);
        z-index: var(--ss-z-navbar);
    }

    // -- threed-stat  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: q(4);

        &__label {
            font-size: q(10.4);
            color: var(--ss-color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        &__value {
            font-size: q(16);
            font-weight: 600;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
        }
    }

    // -- speckle-main  (from site-speckle_org/src/static/scss/layout/_container.scss) --
    .ss-c-speckle-main {
      min-height: 100vh;
    }

    // -- agents__footer  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-agents__footer {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        line-height: 1.7;
        color: var(--ss-color-gray-600);
    }
}