/* ======================================================= */
/* ==   STYLES FOR 'HOW IT WORKS' TEXT COLUMNS          == */
/* ======================================================= */

.feature-section .text-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem; /* Adds some space on the sides */
}

.feature-section .text-column .feature-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.5rem); /* Bigger, responsive font size */
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem; /* Increased space between headline and paragraph */
    background: linear-gradient(135deg, var(--kinetic-teal) 0%, var(--pure-white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 245, 212, 0.2);
}

.feature-section .text-column .feature-description {
    font-family: var(--font-sans);
    font-size: 1.2rem; /* Larger, more readable paragraph font */
    line-height: 1.8;  /* CRITICAL: Increased line height for better spacing */
    color: var(--starlight);
    opacity: 0.9;
    max-width: 580px;  /* Constrains line width to prevent a wide, hard-to-read block */
}


#how-it-works-section {
    padding: 10px 60px 10px; /* Adjusted padding */
    background-color: transparent;
    transition: background-color 0.5s ease-in-out;
    z-index: 2;
}

/* --- UNIFIED FEATURE SECTION LAYOUT --- */
#how-it-works-section .feature-section {
    display: flex;
    gap: 5rem; /* Reduced gap slightly */
    padding: 5vh 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 80vh;
}
#how-it-works-section .animation-column {
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 2rem;
}
#how-it-works-section .text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.works-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--pure-white);
    transition: color 0.5s ease-in-out;
}
.works-subheadline {
    font-size: 1.2rem;
    text-align: center;
    color: var(--starlight);
    max-width: 700px;
    margin: 0 auto 5rem auto;
    opacity: 0.8;
    transition: color 0.5s ease-in-out;
}


/* --- Layout Ordering --- */
/* Default is Anim-Left, Text-Right. These rules flip the layout for an alternating effect. */
.beaker-section {
    flex-direction: row-reverse;
}

/* ====================================================================== */
/* --- BEAKER-SPECIFIC STYLES --- */
/* ====================================================================== */
.beaker-section .animation-column { flex: 0 0 400px; }
.liquid-container { width: 300px; height: 500px; position: relative; }
.beaker-section svg { width: 100%; height: 100%; overflow: visible; }
.scene-container { filter: url(#underglow) saturate(0); transition: filter 0.2s linear; }
.liquid-main { fill: url(#liquidRedGradient); stroke: none; }
.liquid-secondary { fill: url(#ribbonGradient); stroke: none; }
.meniscus-fill { fill: url(#meniscusFillGradient); }
.meniscus-rim-fill { fill: url(#meniscusHighlightGradient); stroke: url(#meniscusHighlightGradient); stroke-width: 3; stroke-linejoin: round; }
.beaker-outline { fill: none; stroke: #231f20; stroke-miterlimit: 10; stroke-width: 12px; }
.beaker-highlight { fill: none; stroke: #41c2d0; stroke-miterlimit: 10; stroke-width: 12px; }
.beaker-marking { fill: #27c0d5; opacity: 0.7; }
#liquid-scaler { transform-origin: center 670px; }

/* ====================================================================== */
/* <!-- CONTROLLER-SPECIFIC STYLES --> */
/* ====================================================================== */
/* --- NEW RULE 1: The Wrapper --- */
/* This sets the size in the layout so there's no gap. */
#how-it-works-section .controller-wrapper {
    width: 400px; /* The desired width on the page */
    height: 292px; /* The proportional height (400 / (850/620)) */
}

#how-it-works-section .controller-section {
    margin-top: 15vh;
}

/* --- NEW RULE 2: The Container --- */
/* This scales the visual element down to fit the wrapper. */
#how-it-works-section .controller-container {
    width: 850px; /* Original large width */
    height: 620px; /* Original large height */
    position: relative;
    filter: grayscale(1);
    transition: filter 0.1s linear;
    transform: scale(0.47); /* Scale factor to fit 400px width (400 / 850) */
    transform-origin: top left;
}
svg.controller-svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
}
#how-it-works-section .controller-container * { font-family: 'Poppins', sans-serif; font-weight: 700; }
.bumper-trigger { cursor: pointer; z-index: 2; position: relative; }
.bumper { transition: transform 0.1s ease-out; pointer-events: none; }
.bumper.is-pressed { transform: translateY(15px); }
.button-assembly { position: absolute; display: flex; justify-content: center; align-items: center; z-index: 10; }
#dpad-location { top: 20%; left: 14%; width: 20%; height: 20%; transform: scale(0.85); }
.face-button-location { width: 110px; height: 110px; transform: scale(0.85); }
#btn-y-location { top: 12%; left: 70%; }
#btn-x-location { top: 22%; left: 63%; }
#btn-b-location { top: 22%; left: 77%; }
#btn-a-location { top: 32%; left: 70%; }
.grommet-css {
    --grommet-shadow-x: 4px; --grommet-shadow-y: 4px;
    width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;
    background: linear-gradient(145deg, #636363 0%, #575757 50%, #636363 100%);
    border-radius: 50%;
    box-shadow: inset var(--grommet-shadow-x) var(--grommet-shadow-y) 12px rgba(0,0,0,.6), inset calc(var(--grommet-shadow-x) * -1) calc(var(--grommet-shadow-y) * -1) 12px rgba(255,255,255,.18);
    transition: box-shadow 0.12s, background 0.12s, transform 0.12s;
    perspective: 800px; transform-style: preserve-3d;
}
.grommet-css::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 60%);
    border-radius: 50%; transition: inherit;
}
.grommet-css.is-pressed, .grommet-css:has(.game-button:active) {
    background: linear-gradient(145deg, #545454 0%, #484848 50%, #545454 100%);
    box-shadow: inset -4px -4px 12px rgba(0,0,0,.6), inset 4px 4px 12px rgba(255,255,255,.18);
    transform: translateY(2px) scale(0.95);
}
.face-button-location .grommet-css { width: 79%; height: 79%; }
.game-button {
    width: 60%; height: 60%; border: none; border-radius: 50%; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: 3;
    transition: transform 0.1s cubic-bezier(0.2, 1, 0.8, 1), box-shadow 0.1s cubic-bezier(0.2, 1, 0.8, 1);
    box-shadow: inset 0px -4px 6px rgba(0, 0, 0, 0.3), inset 0px 4px 5px rgba(255, 255, 255, 0.4), 2px 2px 5px rgba(0, 0, 0, 0.6), -2px -2px 5px rgba(0, 0, 0, 0.6), 0px 10px 20px rgba(0, 0, 0, 0.15);
}
.game-button span { font-size: 28px; color: #ffffff; position: relative; z-index: 3; transition: text-shadow 0.15s ease-out, color 0.15s ease-out; }
.game-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 65%); transition: background 0.1s ease-out; }
.game-button::after { content: ''; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); z-index: 1; border-radius: 50%; box-shadow: inset 0px 1px 3px 1px rgba(0, 0, 0, 0.3); }
.game-button.is-pressed, .game-button:active {
    transform: translateY(4px) scale(0.9);
    box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 0.4), inset 0px 2px 2px rgba(255, 255, 255, 0.3), 2px 2px 5px rgba(0, 0, 0, 0.7), -2px -2px 5px rgba(0, 0, 0, 0.7), 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.game-button.is-pressed::before, .game-button:active::before { background: radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%); }
.face-button-location .game-button { width: 71%; height: 71%; }
.button-blue { background-color: #005cfa; }
.button-blue span { text-shadow: 1px 1px 0 #004ac7, 2px 2px 0 #004ac7, 3px 4px 5px rgba(0,0,0,0.25); }
.game-button span.is-lit, .game-button:active span {
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3a86ff, 0 0 20px #3a86ff;
}
.grommet-css::after {
    content: ''; position: absolute; width: 71%; height: 71%; background-color: #fff;
    border-radius: 50%; filter: blur(12px); z-index: 2; opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.grommet-css:has(.game-button:active)::after, .grommet-css:has(.game-button.is-pressed)::after { opacity: 0.75; }
.grommet-svg, .dpad, .dpad-pivot-group, .arrow-fill, .arrows-group > g { transition: all 0.15s cubic-bezier(0.2, 1, 0.8, 1); }
.grommet-svg { position: absolute; width: 200px; height: 200px; }
.dpad { position: relative; width: 180px; height: 180px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2)); perspective: 1000px; transform-style: preserve-3d; }
.dpad-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.dpad-pivot-group { transform-origin: 50% 50%; }
.dpad-triggers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; z-index: 20; }
.trigger { cursor: pointer; }
#trigger-up    { grid-area: 1 / 2 / 2 / 3; }
#trigger-down  { grid-area: 3 / 2 / 4 / 3; }
#trigger-left  { grid-area: 2 / 1 / 3 / 2; }
#trigger-right { grid-area: 2 / 3 / 3 / 4; }
#dpad-location.is-pressed-up .dpad, #dpad-location:has(#trigger-up:active) .dpad { transform: perspective(1000px) rotateX(10deg) translateZ(-3px) scale(0.98); }
#dpad-location.is-pressed-down .dpad, #dpad-location:has(#trigger-down:active) .dpad { transform: perspective(1000px) rotateX(-10deg) translateZ(-3px) scale(0.98); }
#dpad-location.is-pressed-left .dpad, #dpad-location:has(#trigger-left:active) .dpad { transform: perspective(1000px) rotateY(-10deg) translateZ(-3px) scale(0.98); }
#dpad-location.is-pressed-right .dpad, #dpad-location:has(#trigger-right:active) .dpad { transform: perspective(1000px) rotateY(10deg) translateZ(-3px) scale(0.98); }
#dpad-location.is-pressed-up .dpad-pivot-group, #dpad-location:has(#trigger-up:active) .dpad-pivot-group { transform: perspective(800px) rotateX(15deg) translateZ(-5px) scale(0.95); }
#dpad-location.is-pressed-down .dpad-pivot-group, #dpad-location:has(#trigger-down:active) .dpad-pivot-group { transform: perspective(800px) rotateX(-15deg) translateZ(-5px) scale(0.95); }
#dpad-location.is-pressed-left .dpad-pivot-group, #dpad-location:has(#trigger-left:active) .dpad-pivot-group { transform: perspective(800px) rotateY(-15deg) translateZ(-5px) scale(0.95); }
#dpad-location.is-pressed-right .dpad-pivot-group, #dpad-location:has(#trigger-right:active) .dpad-pivot-group { transform: perspective(800px) rotateY(15deg) translateZ(-5px) scale(0.95); }
#dpad-location.is-pressed-up .grommet-svg, #dpad-location:has(#trigger-up:active) .grommet-svg { transform: perspective(1000px) rotateX(8deg) translateZ(-2px) scale(0.97); }
#dpad-location.is-pressed-down .grommet-svg, #dpad-location:has(#trigger-down:active) .grommet-svg { transform: perspective(1000px) rotateX(-8deg) translateZ(-2px) scale(0.97); }
#dpad-location.is-pressed-left .grommet-svg, #dpad-location:has(#trigger-left:active) .grommet-svg { transform: perspective(1000px) rotateY(-8deg) translateZ(-2px) scale(0.97); }
#dpad-location.is-pressed-right .grommet-svg, #dpad-location:has(#trigger-right:active) .grommet-svg { transform: perspective(1000px) rotateY(8deg) translateZ(-2px) scale(0.97); }
.grommet-graphic-active { display: none; }
.arrow-fill.is-lit,
#dpad-location.is-pressed-up .arrow-up .arrow-fill, #dpad-location:has(#trigger-up:active) .arrow-up .arrow-fill,
#dpad-location.is-pressed-down .arrow-down .arrow-fill, #dpad-location:has(#trigger-down:active) .arrow-down .arrow-fill,
#dpad-location.is-pressed-left .arrow-left .arrow-fill, #dpad-location:has(#trigger-left:active) .arrow-left .arrow-fill,
#dpad-location.is-pressed-right .arrow-right .arrow-fill, #dpad-location:has(#trigger-right:active) .arrow-right .arrow-fill {
    fill: #fff;
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #FDD835);
}
.joystick-assembly { position: absolute; width: 13%; padding-bottom: 13%; height: 0; z-index: 10; }
#l-joystick-assembly { top: 45%; left: 28%; }
#r-joystick-assembly { top: 45%; left: 59%; }
.joystick-assembly .grommet-css { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.joystick-stick {
    --rotateX: 0deg; --rotateY: 0deg; --translateX: 0px; --translateY: 0px;
    position: absolute; width: 67%; height: 67%; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    transform-style: preserve-3d;
    transform: translateX(var(--translateX)) translateY(var(--translateY)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
    z-index: 10; cursor: grab;
}
.joystick-stick.return-to-center { transition: transform 0.2s cubic-bezier(0.2, 1, 0.8, 1); }
.joystick-top {
    width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
    position: absolute;
    transform: translateZ(45px); background-color: #005cfa;
    box-shadow: inset 8px 8px 16px rgba(0, 25, 70, 0.85), inset -8px -8px 16px rgba(120, 200, 255, 0.8);
}
.joystick-top::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0px 6px 15px rgba(0, 20, 60, 0.4); z-index: -1; }
.joystick-axis {
    --axis-light-x: 35%; --axis-light-y: 35%;
    position: absolute; width: 73%; height: 73%;
    background: radial-gradient(circle at var(--axis-light-x) var(--axis-light-y), #3a86ff 0%, #003a94 60%, #00225a 100%);
    border-radius: 50%; z-index: 0; opacity: 0;
    transition: opacity 0.2s ease-out, background 0.2s ease-out;
}
.joystick-axis.is-visible { opacity: 1; }
#l-joystick-assembly .joystick-top { background-color: #FDD835; box-shadow: inset 8px 8px 16px rgba(180, 140, 0, 0.85), inset -8px -8px 16px rgba(255, 250, 224, 0.7); }
#l-joystick-assembly .joystick-axis { background: radial-gradient(circle at var(--axis-light-x) var(--axis-light-y), #FDD835 0%, #F57C00 60%, #BF360C 100%); }
.start-select-assembly { position: absolute; width: 8%; height: 5%; z-index: 10; }
#btn-select-location { top: 36%; left: 40.5%; }
#btn-start-location { top: 36%; left: 51.5%; }
.start-select-button { width: 100%; height: 100%; border: none; background-color: transparent; padding: 0; cursor: pointer; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); transition: filter 0.15s ease-out; }
.ss-grommet { fill: url(#grommet_baseGradient_ss); transition: fill 0.12s; }
.ss-button { transition: transform 0.1s ease, fill 0.1s ease; }
.start-select-button.is-pressed .ss-button, .start-select-button:active .ss-button { transform: translateY(1px); }
.start-select-button.is-pressed .ss-grommet, .start-select-button:active .ss-grommet { fill: url(#grommet_baseGradient_ss_active); }
#btn-select-location .ss-button { fill: #FDD835; }
#btn-select-location .start-select-button.is-pressed .ss-button, #btn-select-location .start-select-button:active .ss-button { fill: #FBC02D; }
#btn-start-location .ss-button { fill: #005cfa; }
#btn-start-location .start-select-button.is-pressed .ss-button, #btn-start-location .start-select-button:active .ss-button { fill: #004ac7; }
#btn-select-location.is-lit, #btn-select-location .start-select-button:is(.is-pressed, :active) { filter: url(#glow-yellow); }
#btn-start-location.is-lit, #btn-start-location .start-select-button:is(.is-pressed, :active) { filter: url(#glow-blue); }
#transmission-beams > * {
    transform: translateY(-270px) scaleY(1); opacity: 1;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: clip-path 0.7s ease-out;
}
#transmission-beams.animate-in > * { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
#transmission-beams.animate-out-phase1 > * { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transition: clip-path 0.5s ease-in; }
#transmission-beams.animate-out-phase2 > * { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease-out; }
#transmission-beams.animate-out-phase3 > * { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease-in; }
#transmission-beams.animate-in .beam-1 { transition-delay: 0s; }
#transmission-beams.animate-in .beam-2 { transition-delay: 0.1s; }
#transmission-beams.animate-in .beam-3 { transition-delay: 0.2s; }
#transmission-beams.animate-in .beam-4 { transition-delay: 0.15s; }
#transmission-beams.animate-in .beam-5 { transition-delay: 0.05s; }
#transmission-beams.animate-out-phase1 .beam-1 { transition-delay: 0s; }
#transmission-beams.animate-out-phase1 .beam-2 { transition-delay: 0.1s; }
#transmission-beams.animate-out-phase1 .beam-3 { transition-delay: 0.2s; }
#transmission-beams.animate-out-phase1 .beam-4 { transition-delay: 0.15s; }
#transmission-beams.animate-out-phase1 .beam-5 { transition-delay: 0.05s; }
#transmission-beams.animate-out-phase2 .beam-1 { transition-delay: 0.2s; }
#transmission-beams.animate-out-phase2 .beam-2 { transition-delay: 0.1s; }
#transmission-beams.animate-out-phase2 .beam-3 { transition-delay: 0s; }
#transmission-beams.animate-out-phase2 .beam-4 { transition-delay: 0.05s; }
#transmission-beams.animate-out-phase2 .beam-5 { transition-delay: 0.15s; }
#transmission-beams.animate-out-phase3 .beam-1 { transition-delay: 0.2s; }
#transmission-beams.animate-out-phase3 .beam-2 { transition-delay: 0.1s; }
#transmission-beams.animate-out-phase3 .beam-3 { transition-delay: 0s; }
#transmission-beams.animate-out-phase3 .beam-4 { transition-delay: 0.05s; }
#transmission-beams.animate-out-phase3 .beam-5 { transition-delay: 0.15s; }

/* ====================================================================== */
/* --- WRENCH-SPECIFIC ANIMATION STYLES --- */
/* ====================================================================== */
/* --- ADD THIS RULE --- */
#how-it-works-section .wrench-section {
    margin-bottom: 15vh;
}
.wrench-section .animation-column { flex: 0 0 400px; }
.wrench-section .animation-container { position: relative; width: 325px; height: 400px; filter: grayscale(100%) opacity(0.7); }
.wrench-section .animation-container > * { position: absolute; top: 50%; left: 50%; }
.wrench-purple { width: 90%; transform: translate(-45%, -50%); filter: drop-shadow(0 0 20px rgba(178, 93, 255, 0.1)) drop-shadow(0 0 8px rgba(178, 93, 255, 0.1)); }
.wrench-orange { width: 90%; transform: translate(-55%, -50%); filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1)) drop-shadow(0 0 20px rgba(255, 136, 0, 0.1)) drop-shadow(0 0 8px rgba(255, 136, 0, 0.1)); }
.cog { width: 58%; transform: translate(-50%, -50%) rotate(0deg); filter: drop-shadow(0 0 30px rgba(255, 165, 0, 0.1)) drop-shadow(0 0 15px rgba(255, 200, 0, 1)); z-index: 2; }
.cog-backdrop { background-color: #110c1f; border-radius: 50%; transform: translate(-50%, -50%); width: 18%; height: 18%; }
.celebration-effects { width: 110%; transform: translate(-50%, -50%) scale(0.5); opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.7)) drop-shadow(0 0 8px rgba(178, 93, 255, 0.7)); z-index: 1; transition: transform 0.1s linear, opacity 0.1s linear; }
@keyframes ember-fade {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
.celebration-effects.fade-out { animation: ember-fade 2s ease-out forwards; }

/* ================================================== */
/* ==      MOBILE RESPONSIVE STYLES                == */
/* ================================================== */
@media (max-width: 960px) {
    /* --- General Section Spacing --- */
    #how-it-works-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .works-subheadline {
        margin-bottom: 2rem;
    }

    /* --- Stack the Feature Columns --- */
    #how-it-works-section .feature-section {
        flex-direction: column; /* Stack animation and text */
        gap: 2rem; /* Reduce the space between them */
        min-height: auto; /* Allow height to be natural */
        padding: 2rem 0;
        text-align: center;
    }

    /* Override the reverse order for the beaker section on mobile */
    .beaker-section {
        flex-direction: column; 
    }

    /* --- Center Text --- */
    .feature-section .text-column {
        padding: 0;
    }
    .feature-section .text-column .feature-description {
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Adjust Animation Column Sizing --- */
    .beaker-section .animation-column,
    .wrench-section .animation-column {
        flex-basis: auto; /* Reset the fixed basis */
    }
    
    .liquid-container .animation-container {
        /* Make animations slightly smaller on mobile */
        width: 90vw;
        max-width: 325px;
    }

    
    .wrench-section .animation-container {
        /* Make animations slightly smaller on mobile */
        width: 90vw;
        max-width: 350px;
    }
    
    /* --- Controller Sizing --- */
    #how-it-works-section .controller-section {
        margin-top: 5vh; /* Reduced top margin for mobile */
    }

    /* This wrapper defines the space the controller occupies */
    #how-it-works-section .controller-wrapper {
        width: 90vw; /* Flexible width */
        max-width: 350px; /* NEW: Reduced max-width to match other animations */
        height: 255px; /* NEW: Adjusted proportional height (350 / (850/620)) */
        margin: 0 auto; /* Center it */
    }

    /* This container holds the large SVG and scales it down */
    #how-it-works-section .controller-container {
        width: 850px; /* Original large width */
        height: 620px; /* Original large height */
        position: relative;
        filter: grayscale(1);
        transition: filter 0.1s linear;
        transform: scale(0.42); /* NEW: Adjusted scale to fit 350px width (350 / 850) */
        transform-origin: top left;
    }
}