:root {
    --bg-color: #08090a;
    --chassis-color: #1a1c23;
    --pad-surface: #22252e;
    --pad-side: #111318;
    --highlight: rgba(255, 255, 255, 0.08);
    --neon-cyan: rgba(0, 229, 255, 0.8);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 15px 30px;
    overflow-x: hidden;
    user-select: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html,
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =========================================
   ATMOSPHERIC INTRO LOADING SCREEN
   ========================================= */
.loading-screen {
    position: fixed;
    inset: 0;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 280px;
}

.loader-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #eaf0f6;
    text-shadow: 0 0 12px rgba(234, 240, 246, 0.25);
}

.loader-subtitle {
    font-family: 'Inter', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    color: #4a505e;
}

.loader-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin: 8px 0;
}

.loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00e5ff, #ff00ff, #ffea00);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    transition: width 0.35s ease-out;
}

.loader-status {
    font-family: 'Inter', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* =========================================
   TOP-RIGHT INDUSTRIAL SPONSOR KEY (BMC)
   ========================================= */
.sponsor-key {
    position: fixed;
    top: 20px;
    right: 25px;
    bottom: auto;
    z-index: 10000;
    text-decoration: none;
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), width 0.65s cubic-bezier(0.16, 1, 0.3, 1), height 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.sponsor-key.ready {
    opacity: 1;
    transform: translateY(0);
}

.sponsor-chassis {
    width: 78px;
    height: 78px;
    background: var(--chassis-color);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    position: relative;
}

.sponsor-recess {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #0d0f14;
    box-shadow:
        inset 0 6px 12px rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sponsor-button-cap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(145deg, #2c303d 0%, #1c1e26 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 4px 6px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.08s, background 0.25s;
}

.sponsor-heart {
    width: 24px;
    height: 24px;
    color: #63363d;
    filter: drop-shadow(0 0 3px rgba(255, 42, 0, 0.15));
    transition: color 0.25s, filter 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover state: Ruby laser activation */
.sponsor-key:hover .sponsor-button-cap {
    background: linear-gradient(145deg, #353a4a 0%, #222630 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.22),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(255, 42, 0, 0.65);
}

.sponsor-key:hover .sponsor-heart {
    color: #ff2a00;
    filter: drop-shadow(0 0 10px rgba(255, 42, 0, 0.85));
    transform: scale(1.15);
}

/* Active depression state: mechanical bottom-out */
.sponsor-key:active .sponsor-button-cap {
    transform: translateY(3px) scale(0.96);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 42, 0, 0.85);
}

.sponsor-key:active .sponsor-heart {
    transform: scale(0.92);
    color: #ff4d2e;
    filter: drop-shadow(0 0 14px rgba(255, 42, 0, 1));
}

/* Hide default Buy Me a Coffee floating launcher button so our custom industrial side-widget acts as trigger */
#bmc-wbtn,
div[id^="bmc-wbtn"] {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
}

/* =========================================
   SPONSOR KEY DOCKED EXPANSION (SET II)
   ========================================= */
.sponsor-dock-target {
    width: 340px;
    height: 360px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.sponsor-key.docked-mode {
    position: relative;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 260px;
    height: 260px;
}

.sponsor-key.docked-mode .sponsor-chassis {
    width: 260px;
    height: 260px;
    border-radius: 32px;
    flex-direction: row;
    gap: 0;
    transition: border-radius 0.65s cubic-bezier(0.16, 1, 0.3, 1), width 0.65s cubic-bezier(0.16, 1, 0.3, 1), height 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Match mini version parity: tight 22px rim around recess, tight 11px gap between cap and recess */
.sponsor-key.docked-mode .sponsor-recess {
    width: 216px;
    height: 216px;
    border-radius: 28px;
    transform: translateY(0);
    transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), height 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.65s, transform 0.65s;
}

.sponsor-key.docked-mode .sponsor-button-cap {
    width: 194px;
    height: 194px;
    border-radius: 24px;
    transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), height 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.65s, transform 0.08s, background 0.25s;
}

.sponsor-key.docked-mode .sponsor-heart {
    width: 88px;
    height: 88px;
    transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), height 0.65s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s, filter 0.25s, transform 0.25s;
}

/* Pure Light Neon Element: no backing, neon letters born from darkness */
.laboratory-plaque {
    width: 260px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2px 10px;
    position: relative;
    opacity: 0;
    filter: grayscale(1) brightness(0.1);
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

/* Realistic weak-to-strong neon boot-up flicker followed by synchronized retro sign hum */
#set-2.active .laboratory-plaque {
    animation: neon-power-on 1s 0.5s forwards cubic-bezier(0.16, 1, 0.3, 1), neon-sign-hum 7s 1.5s infinite linear;
}

@keyframes neon-power-on {
    0% {
        opacity: 0;
        filter: grayscale(1) brightness(0.1);
        transform: translateY(6px);
    }

    /* Phase 1: Weak, faded struggle pulses */
    8% {
        opacity: 0.35;
        filter: grayscale(0.5) brightness(0.5);
        transform: translateY(0);
    }

    14% {
        opacity: 0.08;
        filter: grayscale(0.9) brightness(0.2);
    }

    22% {
        opacity: 0.45;
        filter: grayscale(0.3) brightness(0.65);
    }

    30% {
        opacity: 0.1;
        filter: grayscale(0.8) brightness(0.25);
    }

    /* Phase 2: Developing strength and frequency */
    38% {
        opacity: 0.65;
        filter: grayscale(0.1) brightness(0.9);
    }

    44% {
        opacity: 0.2;
        filter: grayscale(0.6) brightness(0.4);
    }

    50% {
        opacity: 0.8;
        filter: grayscale(0) brightness(1.2);
    }

    55% {
        opacity: 0.35;
        filter: grayscale(0.3) brightness(0.6);
    }

    61% {
        opacity: 0.9;
        filter: grayscale(0) brightness(1.35);
    }

    66% {
        opacity: 0.5;
        filter: grayscale(0.1) brightness(0.8);
    }

    /* Phase 3: High-voltage strike and steady pure light hold */
    74% {
        opacity: 1.15;
        filter: grayscale(0) brightness(1.6);
    }

    84% {
        opacity: 0.9;
        filter: grayscale(0) brightness(1.15);
    }

    100% {
        opacity: 1;
        filter: grayscale(0) brightness(1);
        transform: translateY(0);
    }
}

.plaque-title {
    font-family: 'Tilt Neon', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3.5px;
    padding: 2.5px;
    color: #fff0f0;
    text-shadow:
        0 0 3px #ff2a00,
        0 0 8px #ff2a00,
        0 0 18px #ff2a00,
        0 0 35px rgba(255, 42, 0, 0.65);
    margin-bottom: 10px;
    width: 100%;
}

@keyframes neon-sign-hum {
    /* Low hum / tight glow */
    0%, 100% {
        opacity: 0.9;
        filter: brightness(0.88) drop-shadow(0 0 3px rgba(255, 42, 0, 0.25));
    }
    /* Rising pulse */
    15% {
        opacity: 1;
        filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 42, 0, 0.5));
    }
    /* Sporadic Retro Flicker 1 */
    24% {
        opacity: 1;
        filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 42, 0, 0.4));
    }
    24.5% {
        opacity: 0.3;
        filter: brightness(0.3) drop-shadow(none);
    }
    25.5% {
        opacity: 1;
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 42, 0, 0.45));
    }
    /* Tasteful Peak Glow Pulse (Reduced) */
    45% {
        opacity: 1;
        filter: brightness(1.3) drop-shadow(0 0 16px rgba(255, 42, 0, 0.6));
    }
    /* Descending glow */
    58% {
        opacity: 0.95;
        filter: brightness(1.05) drop-shadow(0 0 6px rgba(255, 42, 0, 0.3));
    }
    /* Sporadic Retro Double Flicker 2 */
    64% {
        opacity: 0.95;
        filter: brightness(1) drop-shadow(0 0 5px rgba(255, 42, 0, 0.25));
    }
    64.3% {
        opacity: 0.2;
        filter: brightness(0.2) drop-shadow(none);
    }
    64.8% {
        opacity: 0.9;
        filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 42, 0, 0.35));
    }
    65.2% {
        opacity: 0.4;
        filter: brightness(0.4) drop-shadow(none);
    }
    66% {
        opacity: 0.95;
        filter: brightness(1.05) drop-shadow(0 0 6px rgba(255, 42, 0, 0.3));
    }
    /* Sporadic Voltage Buzz 3 */
    86% {
        opacity: 0.92;
        filter: brightness(0.95) drop-shadow(0 0 5px rgba(255, 42, 0, 0.25));
    }
    86.4% {
        opacity: 0.6;
        filter: brightness(0.6) drop-shadow(none);
    }
    87% {
        opacity: 0.92;
        filter: brightness(0.95) drop-shadow(0 0 5px rgba(255, 42, 0, 0.25));
    }
}

.plaque-subtitle {
    font-family: 'Tilt Neon', 'Jura', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #e6f7ff;
    letter-spacing: 1px;
    text-shadow:
        0 0 2px #00c8ff,
        0 0 6px #00c8ff,
        0 0 14px rgba(0, 200, 255, 0.6);
    width: 100%;
}

/* =========================================
   MAIN APP LAYOUT & HEADER
   ========================================= */
.app-layout {
    width: 100%;
    max-width: 2200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15px;
    min-height: 100vh;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-layout.ready {
    opacity: 1;
    transform: scale(1);
}

.app-header {
    width: 100%;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 14px;
}

.app-title {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #eaf0f6;
    text-shadow: 0 0 16px rgba(234, 240, 246, 0.2);
}

/* Minimalist Industrial Set Switcher */
.set-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 17, 23, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.set-tab {
    font-family: 'Inter', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #4a505e;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 14px;
    transition: color 0.25s, background 0.25s, text-shadow 0.25s, box-shadow 0.25s;
}

.set-tab:hover {
    color: #8a92a6;
}

.set-tab.active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.12);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

.tab-divider {
    font-family: 'Inter', monospace;
    font-size: 11px;
    color: #2a2e3b;
}

.set-container {
    width: 100%;
    min-height: 780px;
    position: relative;
    overflow-x: hidden;
}

/* 
   SPACIOUS PLAYGROUND DASHBOARD LAYOUT
   Designed for 4 interactables per row (2 rows of 4 items fit cleanly on screen).
*/
.lab-bench {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px 70px;
    justify-items: center;
    align-items: center;
    width: 100%;
    padding: 5px 0 15px;
}

.lab-bench.active {
    display: grid;
}

#set-2.active {
    display: flex;
    justify-content: center;
    gap: 90px;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lab-bench.active.slide-right {
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lab-bench.active.slide-left {
    animation: slideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 1440p Ultra-Wide Displays */
@media (min-width: 2000px) {
    .lab-bench {
        gap: 90px 110px;
        max-width: 2200px;
    }
}

/* Medium Displays & Laptops */
@media (max-width: 1600px) {
    .lab-bench {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px 60px;
        max-width: 1350px;
    }
}

@media (max-width: 1100px) {
    .lab-bench {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
}

/* Compact Viewports */
@media (max-width: 750px) {
    .lab-bench {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}



.zen-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    perspective: 1200px;
}

/* The Heavy Metallic Base (Scaled to 170px) */
.pad-chassis {
    width: 170px;
    height: 170px;
    background: var(--chassis-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -5px 10px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);

    position: relative;
}

/* The inner lip of the hole */
.pad-chassis::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 14px;
    background: #0a0b0e;
    box-shadow:
        inset 0 8px 15px rgba(0, 0, 0, 0.9),
        inset 0 0 0 2px rgba(0, 0, 0, 0.5),
        0 1px 1px rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.05s ease-out;
}

/* The Rubber Pad Itself */
.studio-pad {
    width: 112px;
    height: 112px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    z-index: 10;

    transform: translateY(-8px);
    transition: transform 0.05s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The Top Surface of the Pad */
.pad-surface {
    width: 100%;
    height: 100%;
    background: var(--pad-surface);
    border-radius: 10px;
    position: relative;

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.1),
        inset 0 -2px 5px rgba(0, 0, 0, 0.4),
        0 8px 10px rgba(0, 0, 0, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: box-shadow 0.05s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The 3D Side/Bevel of the Pad */
.pad-surface::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--pad-side);
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.8);
}


/* --- PRESSED STATE --- */

/* Chassis inner hole glows when pressed */
.pad-chassis.pressed::before {
    box-shadow:
        inset 0 8px 15px rgba(0, 0, 0, 0.9),
        inset 0 0 0 2px rgba(0, 0, 0, 0.5),
        0 1px 1px rgba(255, 255, 255, 0.05),
        inset 0 0 20px var(--glow-color),
        0 0 30px var(--glow-spill);
}

/* Colors for the 4 pads */
.pad-chassis[data-color="cyan"] {
    --glow-color: rgba(0, 229, 255, 0.8);
    --glow-spill: rgba(0, 229, 255, 0.2);
}

.pad-chassis[data-color="magenta"] {
    --glow-color: rgba(255, 0, 255, 0.8);
    --glow-spill: rgba(255, 0, 255, 0.2);
}

.pad-chassis[data-color="yellow"] {
    --glow-color: rgba(255, 234, 0, 0.8);
    --glow-spill: rgba(255, 234, 0, 0.2);
}

.pad-chassis[data-color="green"] {
    --glow-color: rgba(0, 255, 106, 0.8);
    --glow-spill: rgba(0, 255, 106, 0.2);
}

/* Pad moves down exactly the distance of its bevel (8px) */
.studio-pad.pressed {
    transform: translateY(0px);
}

/* Pad surface shadow tightens flush against faceplate */
.studio-pad.pressed .pad-surface {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.05),
        inset 0 -1px 3px rgba(0, 0, 0, 0.6);
}

.studio-pad.pressed .pad-surface::after {
    opacity: 0;
    /* Bevel perfectly disappears into chassis cavity */
}

/* =========================================
   THE DOME BUTTON (Variance Edition)
   ========================================= */

.dome-chassis {
    width: 360px;
    height: 360px;
    background: var(--chassis-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    /* Default variance variables */
    --dome-glow-core: rgba(255, 85, 0, 1);
    --dome-glow-edge: rgba(204, 34, 0, 0.8);
    --dome-glow-spill: rgba(255, 85, 0, 0.6);
}

/* Circular Rim Cavity */
.dome-chassis::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: #0a0b0e;
    box-shadow:
        inset 0 15px 30px rgba(0, 0, 0, 0.9),
        inset 0 0 0 3px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.05);
}

/* The Convex Circular Button */
.dome-button {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 10;

    /* Convex glossy look (Idle state) */
    background: radial-gradient(circle at 50% 35%, #2a2a2a 0%, #0a0a0a 80%);
    box-shadow:
        inset 0 6px 12px rgba(255, 255, 255, 0.1),
        inset 0 -10px 20px rgba(0, 0, 0, 0.8),
        0 15px 20px rgba(0, 0, 0, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.05);

    /* Raised 12px */
    transform: translateY(-12px);
    transition: transform 0.05s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.05s, background 0.05s;
}

/* Glossy highlight curve */
.dome-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

/* --- PRESSED STATE --- */
.dome-button.pressed {
    transform: translateY(0px);
    /* Internal cavity floods with dynamic HSL neon light */
    background: radial-gradient(circle at 50% 50%, var(--dome-glow-core) 0%, var(--dome-glow-edge) 80%);
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        inset 0 -4px 12px rgba(0, 0, 0, 0.4),
        0 0 60px 15px var(--dome-glow-spill),
        /* Massive inner glow */
        0 2px 4px rgba(0, 0, 0, 0.9);
}

/* =========================================
   THE MAGNETIC DETENT SLIDER
   ========================================= */

.slider-board {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-chassis {
    width: 140px;
    height: 480px;
    /* Tall vertical fader */
    background: var(--chassis-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* The Routed Groove (Track) */
.slider-track {
    width: 40px;
    height: 365px;
    border-radius: 20px;
    background: #0a0b0e;
    box-shadow:
        inset 0 10px 20px rgba(0, 0, 0, 0.9),
        inset 0 0 0 2px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.05);
    position: relative;

    /* CSS variables for the flare */
    --slider-flare-color: rgba(0, 229, 255, 0);
    /* Invisible by default */
    --slider-flare-opacity: 0;
}

/* The Fiber-Optic Flare (deep inside the track) */
.slider-flare {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 15px;
    right: 15px;
    border-radius: 10px;
    background: var(--slider-flare-color);
    opacity: var(--slider-flare-opacity);
    box-shadow: 0 0 30px 10px var(--slider-flare-color);
    transition: opacity 0.5s ease-out;
    /* Slow fade out */
    pointer-events: none;
}

/* Instant flash when snapping */
.slider-flare.flash {
    opacity: 1;
    transition: none;
    /* Instant on */
}

/* The Heavy Pill Knob */
.slider-knob {
    width: 80px;
    height: 120px;
    border-radius: 40px;
    background: #1e2025;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    /* Center it */
    top: 0;
    /* JS controls this */
    cursor: grab;
    z-index: 10;

    box-shadow:
        inset 0 4px 8px rgba(255, 255, 255, 0.1),
        inset 0 -10px 20px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.8);
    /* Directly centered overhead shadow */

    border: 1px solid rgba(255, 255, 255, 0.05);

    /* VERY fast spring physics for the magnetic snap */
    transition: transform 0.08s cubic-bezier(0.3, 1.2, 0.4, 1);
    /* JS sets transform: translateY(...) */
}

.slider-knob:active {
    cursor: grabbing;
}

/* Grip ridges */
.slider-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 40px;
    background: repeating-linear-gradient(to bottom,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.6) 4px,
            rgba(0, 0, 0, 0.6) 6px,
            rgba(255, 255, 255, 0.05) 6px,
            rgba(255, 255, 255, 0.05) 8px);
    pointer-events: none;
}

/* =========================================
   THE ORBITAL BUNGEE / TENSION TETHER
   (Elevated Pedestal & Asymptotic Resistance)
   ========================================= */

.tether-board {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Elevated Circular Platform (Enlarged to 360px for long pull travel) */
.tether-pedestal {
    width: 360px;
    height: 360px;
    background: #14161c;
    /* Dark charcoal background plate */
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.95),
        0 15px 30px rgba(0, 0, 0, 0.8),
        inset 0 2px 5px rgba(255, 255, 255, 0.06),
        inset 0 -6px 15px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.03);

    --tether-glow-color: rgba(0, 255, 170, 0.5);
    --tether-glow-intensity: 0;
}

/* Center Anchor Ring */
.tether-anchor {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0a0b0e;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.9),
        0 1px 2px rgba(255, 255, 255, 0.1);
    position: absolute;
    z-index: 1;
}

.tether-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.tether-wire {
    stroke: var(--tether-glow-color);
    stroke-width: 8px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 calc(20px * var(--tether-glow-intensity)) var(--tether-glow-color));
}

/* Dark Matte Convex Polymer Sphere */
.tether-ball {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2f3442 0%, #181a22 80%);
    /* Convex 3D shading */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 5;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.9),
        /* Physical dark occlusion shadow */
        0 0 calc(45px * var(--tether-glow-intensity)) var(--tether-glow-color),
        /* Centered omnidirectional glow */
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -4px 8px rgba(0, 0, 0, 0.8),
        inset 0 0 calc(30px * var(--tether-glow-intensity)) var(--tether-glow-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.05s;
}

.tether-ball:active {
    cursor: grabbing;
    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.9),
        /* Physical dark occlusion shadow */
        0 0 calc(60px * var(--tether-glow-intensity)) var(--tether-glow-color),
        /* Centered omnidirectional glow */
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -4px 8px rgba(0, 0, 0, 0.8),
        inset 0 0 calc(38px * var(--tether-glow-intensity)) var(--tether-glow-color);
}

/* =========================================
   THE INERTIAL FLYWHEEL SPINNER
   ========================================= */

.spinner-board {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-chassis {
    width: 360px;
    height: 360px;
    background: var(--chassis-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    --spinner-velocity: 0;
    --spinner-hue: 35;
    /* Warm Amber default */
}

/* Recessed circular rim cavity */
.spinner-cavity {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #0a0b0e;
    box-shadow:
        inset 0 15px 30px rgba(0, 0, 0, 0.95),
        inset 0 0 0 3px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Dynamic fiber-optic underglow ring: Dormant grey at rest, ignites with color on spin */
.spinner-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: hsla(var(--spinner-hue), calc(var(--spinner-velocity) * 100%), 55%, calc(var(--spinner-velocity) * 0.7));
    box-shadow:
        0 0 calc(20px + 60px * var(--spinner-velocity)) calc(5px + 20px * var(--spinner-velocity)) hsla(var(--spinner-hue), calc(var(--spinner-velocity) * 100%), 55%, calc(var(--spinner-velocity) * 0.7)),
        inset 0 0 25px hsla(var(--spinner-hue), calc(var(--spinner-velocity) * 100%), 55%, calc(var(--spinner-velocity) * 0.5));
    pointer-events: none;
    transition: background 0.08s, box-shadow 0.08s;
}

/* Raised machined tuning dial */
.spinner-dial {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    position: relative;
    cursor: grab;
    z-index: 10;
    background: radial-gradient(circle at 35% 35%, #24272e 0%, #17191d 100%);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.85),
        0 0 15px rgba(0, 0, 0, 0.9),
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.spinner-dial:active {
    cursor: grabbing;
}

/* Rotating disc holding physical markers */
.spinner-rotor {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Concave optical jewel / ergonomic finger dimple (Circular to prevent aliasing/artifacting at fast spin) */
.spinner-indicator {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: hsla(var(--spinner-hue), calc(var(--spinner-velocity) * 100%), calc(20% + var(--spinner-velocity) * 60%), 1);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.9),
        inset 0 0 12px hsla(var(--spinner-hue), 100%, 60%, calc(var(--spinner-velocity) * 0.8)),
        0 1px 1px rgba(255, 255, 255, 0.1),
        0 0 calc(25px * var(--spinner-velocity)) hsla(var(--spinner-hue), 100%, 55%, calc(var(--spinner-velocity) * 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.08s, box-shadow 0.08s;
}

/* Fixed top reflection overlay so room lighting remains static overhead */
.spinner-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

/* =========================================
   THE HARMONIC CHIME DISH
   ========================================= */

.dish-board {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dish-chassis {
    width: 360px;
    height: 360px;
    background: var(--chassis-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    --dish-hue: 45;
    --dish-glow: 0;
}

/* Acoustic rim that illuminates when struck */
.dish-rim {
    width: 296px;
    height: 296px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101217;
    box-shadow:
        0 0 calc(60px * var(--dish-glow)) hsla(var(--dish-hue), 100%, 60%, calc(var(--dish-glow) * 0.95)),
        inset 0 0 calc(30px * var(--dish-glow)) hsla(var(--dish-hue), 100%, 65%, calc(var(--dish-glow) * 0.85)),
        0 10px 25px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    border: 1px solid hsla(var(--dish-hue), 100%, 70%, calc(var(--dish-glow) * 0.8 + 0.08));
    transition: box-shadow 0.08s, border-color 0.08s, transform 0.05s;
}

.dish-rim.struck {
    transform: scale(1.015);
}

/* Concave anodized aluminum dish */
.dish-basin {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #060709 0%, #11131a 100%);
    box-shadow:
        inset 0 22px 45px rgba(0, 0, 0, 0.98),
        inset 0 0 0 2px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Center steel anchor post */
.dish-anchor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5a6273 0%, #22252e 100%);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.9),
        inset 0 2px 2px rgba(255, 255, 255, 0.4);
    z-index: 5;
}

/* SVG wrapper for elastic bungee tether */
.dish-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.dish-tether {
    stroke: hsla(var(--dish-hue, 45), 80%, 65%, calc(0.35 + var(--dish-glow) * 0.65));
    stroke-linecap: round;
    filter: drop-shadow(0 0 calc(8px * var(--dish-glow)) hsla(var(--dish-hue), 100%, 60%, 0.9));
    transition: stroke 0.08s;
}

/* Heavy polished steel ball bearing */
.dish-ball {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 10;
    background: radial-gradient(circle at 30% 30%, #687282 0%, #282c36 60%, #12141a 100%);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.95),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -5px 10px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dish-ball:active {
    cursor: grabbing;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.98),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -5px 10px rgba(0, 0, 0, 0.9);
}

.ball-specular {
    position: absolute;
    top: 6px;
    left: 10px;
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(-20deg);
    pointer-events: none;
}

/* =========================================
   THE LATCHING INDUSTRIAL PUSH-LOCK
   ========================================= */

/* =========================================
   07A: 2X2 INDUSTRIAL PUSH-LOCK ARRAY
   (Brother/mirror of 2x2 Studio Pads)
   ========================================= */

.pushlock-grid-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    perspective: 1200px;
}

.mini-pushlock-chassis {
    width: 170px;
    height: 170px;
    background: var(--chassis-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -5px 10px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    --lock-glow: 0;
}

.mini-pushlock-chassis[data-color="cyan"] {
    --mini-lock-color: #00e5ff;
    --mini-lock-rgb: 0, 229, 255;
}

.mini-pushlock-chassis[data-color="magenta"] {
    --mini-lock-color: #ff00ff;
    --mini-lock-rgb: 255, 0, 255;
}

.mini-pushlock-chassis[data-color="yellow"] {
    --mini-lock-color: #ffea00;
    --mini-lock-rgb: 255, 234, 0;
}

.mini-pushlock-chassis[data-color="green"] {
    --mini-lock-color: #00ff6a;
    --mini-lock-rgb: 0, 255, 106;
}

.mini-pushlock-collar {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    background: #0d0f14;
    box-shadow:
        inset 0 8px 16px rgba(0, 0, 0, 0.95),
        inset 0 0 0 2px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 0 calc(20px * var(--lock-glow)) rgba(var(--mini-lock-rgb), calc(var(--lock-glow) * 0.9)),
        0 0 calc(35px * var(--lock-glow)) rgba(var(--mini-lock-rgb), calc(var(--lock-glow) * 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.15s ease-out;
}

.mini-pushlock-button {
    width: 108px;
    height: 108px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transform: translateY(-8px);
    transition: transform 0.07s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.mini-pushlock-button.latched {
    transform: translateY(0px);
}

.mini-pushlock-button.pressing {
    transform: translateY(1px);
    transition: transform 0.04s ease-out;
}

.mini-pushlock-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2c303d 0%, #1c1e26 100%);
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 6px 10px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.07s;
}

.mini-pushlock-button.latched .mini-pushlock-surface {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.12),
        inset 0 -1px 3px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(var(--mini-lock-rgb), 0.75);
}

.mini-pushlock-button.pressing .mini-pushlock-surface {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.6),
        0 0 22px rgba(var(--mini-lock-rgb), 0.85);
}

.mini-pushlock-surface::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #13151b 0%, #1d2029 50%, #13151b 100%);
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.9);
    transition: height 0.07s, opacity 0.07s;
}

.mini-pushlock-button.latched .mini-pushlock-surface::after,
.mini-pushlock-button.pressing .mini-pushlock-surface::after {
    height: 0px;
    opacity: 0;
}

.mini-screw {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #12141a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-screw::after {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #0a0b0e;
}

.mini-screw.tl {
    top: 8px;
    left: 8px;
}

.mini-screw.tr {
    top: 8px;
    right: 8px;
}

.mini-screw.bl {
    bottom: 8px;
    left: 8px;
}

.mini-screw.br {
    bottom: 8px;
    right: 8px;
}

.mini-lock-indicator {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #0f1117;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.95),
        0 1px 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.mini-indicator-core {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: #181a22;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: background 0.12s, box-shadow 0.12s;
}

.mini-pushlock-button.latched:not(.pressing) .mini-indicator-core {
    background: var(--mini-lock-color);
    box-shadow:
        0 0 12px var(--mini-lock-color),
        0 0 24px rgba(var(--mini-lock-rgb), 0.7),
        inset 0 0 3px #ffffff;
}

.mini-pushlock-button.release-flash .mini-indicator-core {
    background: #ff2a00;
    box-shadow:
        0 0 15px #ff2a00,
        0 0 30px rgba(255, 42, 0, 0.8),
        inset 0 0 4px #ffffff;
}

/* =========================================
   07B: BIG LATCHING INDUSTRIAL PUSH-LOCK
   (~8% larger core proportions towards edges)
   ========================================= */

.pushlock-board {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pushlock-chassis {
    width: 360px;
    height: 360px;
    background: var(--chassis-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    --lock-glow: 0;
}

/* Heavy square machined steel retaining collar (~8% larger: 234px) */
.pushlock-collar {
    width: 234px;
    height: 234px;
    border-radius: 28px;
    background: #0d0f14;
    box-shadow:
        inset 0 14px 28px rgba(0, 0, 0, 0.95),
        inset 0 0 0 3px rgba(0, 0, 0, 0.8),
        0 2px 3px rgba(255, 255, 255, 0.08),
        inset 0 0 calc(38px * var(--lock-glow)) rgba(255, 122, 0, calc(var(--lock-glow) * 0.9)),
        0 0 calc(60px * var(--lock-glow)) rgba(255, 122, 0, calc(var(--lock-glow) * 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.15s ease-out;
}

/* Square knurled anodized button (~8% larger: 212px) */
.pushlock-button {
    width: 212px;
    height: 212px;
    border-radius: 22px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transform: translateY(-16px);
    transition: transform 0.07s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.pushlock-button.latched {
    transform: translateY(0px);
}

.pushlock-button.pressing {
    transform: translateY(2px);
    transition: transform 0.04s ease-out;
}

/* Top surface of the push-lock button */
.pushlock-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2c303d 0%, #1c1e26 100%);
    border-radius: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.18),
        inset 0 -3px 6px rgba(0, 0, 0, 0.6),
        0 12px 18px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.07s;
}

.pushlock-button.latched .pushlock-surface {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.12),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(255, 122, 0, 0.75);
}

.pushlock-button.pressing .pushlock-surface {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 -1px 3px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(255, 122, 0, 0.85);
}

/* Thick 3D extruded steel side/bevel */
.pushlock-surface::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 16px;
    background: linear-gradient(90deg, #13151b 0%, #1d2029 50%, #13151b 100%);
    border-radius: 0 0 22px 22px;
    box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.9);
    transition: height 0.07s, opacity 0.07s;
}

.pushlock-button.latched .pushlock-surface::after,
.pushlock-button.pressing .pushlock-surface::after {
    height: 0px;
    opacity: 0;
}

/* Corner machined hex socket screws (repositioned for larger 212px button) */
.corner-screw {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #12141a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.corner-screw::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a0b0e;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
}

.corner-screw.top-left {
    top: 18px;
    left: 18px;
}

.corner-screw.top-right {
    top: 18px;
    right: 18px;
}

.corner-screw.bottom-left {
    bottom: 18px;
    left: 18px;
}

.corner-screw.bottom-right {
    bottom: 18px;
    right: 18px;
}

/* Square central lock indicator window (~8% larger: 64px) */
.lock-indicator {
    width: 64px;
    height: 64px;
    border-radius: 15px;
    background: #0f1117;
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.95),
        0 1px 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.indicator-core {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #181a22;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: background 0.12s, box-shadow 0.12s;
}

/* Latched indicator glow state */
.pushlock-button.latched:not(.pressing) .indicator-core {
    background: #ff7a00;
    box-shadow:
        0 0 15px #ff7a00,
        0 0 30px rgba(255, 122, 0, 0.7),
        inset 0 0 4px #ffffff;
}

/* Unlatching release flash state (Unified Laser Crimson to avoid studio pad blue) */
.pushlock-button.release-flash .indicator-core {
    background: #ff2a00;
    box-shadow:
        0 0 18px #ff2a00,
        0 0 36px rgba(255, 42, 0, 0.8),
        inset 0 0 5px #ffffff;
}

/* =========================================
   THE PLANETARY GEAR ENCODER
   (Harmonic Epicyclic Orbit & Detent Steps)
   ========================================= */

.encoder-board {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / -1;
}

.encoder-chassis {
    width: 360px;
    height: 360px;
    background: var(--chassis-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        inset 0 3px 6px rgba(255, 255, 255, 0.05),
        inset 0 -8px 15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    position: relative;
    --detent-pulse: 0;
}

/* Outer stationary ring gear cavity */
.encoder-ring-gear {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #0d0f14;
    box-shadow:
        inset 0 15px 30px rgba(0, 0, 0, 0.95),
        inset 0 0 0 3px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Machined internal gear teeth via dashed border */
    border: 8px dashed #232733;
    box-sizing: border-box;
}

.encoder-orbit-cavity {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Subtle cavity background radial glow cycling through primary colors */
.encoder-core-flash {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--flash-color, rgba(0, 229, 255, 0.35)) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.35s ease-out;
}

.encoder-core-flash.flash-active {
    opacity: 1;
    transition: opacity 0.04s ease-out;
}

/* Individual captive planetary brass gears */
.planet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin-top: -34px;
    margin-left: -34px;
    border-radius: 50%;
    background: #181a22;
    /* Machined brass gear teeth */
    border: 5px dashed #b88d35;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 5;
}

/* Floating light prisms inside planets (Inert Default State) */
.planet-prism {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #232733;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: background 0.35s ease-out, box-shadow 0.35s ease-out;
}

/* Active Orbiting State (Ignites laser hues when interacting) */
.encoder-chassis.active .planet-prism {
    transition: background 0.05s ease-out, box-shadow 0.05s ease-out;
}

/* Cyan Planet */
.encoder-chassis.active .gear-cyan .planet-prism {
    background: #00e5ff;
    box-shadow:
        0 0 calc(12px + 18px * var(--detent-pulse)) #00e5ff,
        0 0 calc(25px + 35px * var(--detent-pulse)) rgba(0, 229, 255, 0.6),
        inset 0 0 4px #ffffff;
}

/* Magenta Planet */
.encoder-chassis.active .gear-magenta .planet-prism {
    background: #ff00ff;
    box-shadow:
        0 0 calc(12px + 18px * var(--detent-pulse)) #ff00ff,
        0 0 calc(25px + 35px * var(--detent-pulse)) rgba(255, 0, 255, 0.6),
        inset 0 0 4px #ffffff;
}

/* Yellow Planet */
.encoder-chassis.active .gear-yellow .planet-prism {
    background: #ffea00;
    box-shadow:
        0 0 calc(12px + 18px * var(--detent-pulse)) #ffea00,
        0 0 calc(25px + 35px * var(--detent-pulse)) rgba(255, 234, 0, 0.6),
        inset 0 0 4px #ffffff;
}

/* Central rotating sun dial */
.sun-dial {
    position: absolute;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #15171e;
    /* Machined steel sun gear teeth */
    border: 6px dashed #3a3f52;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 10;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(0, 0, 0, 0.8);
}

.sun-dial:active {
    cursor: grabbing;
}

/* Raised knurled dial grip */
.sun-knob {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a2e3b 0%, #171920 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.7);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Precision orientation indicator notch (Inert Default State) */
.sun-marker {
    position: absolute;
    top: 8px;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #3a3f52;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
    transition: background 0.35s ease-out, box-shadow 0.35s ease-out;
}

/* Ignites Warning Amber laser when grabbed / dialing */
.encoder-chassis.active .sun-marker {
    background: #ff7a00;
    box-shadow: 0 0 8px rgba(255, 122, 0, 0.8);
    transition: background 0.05s ease-out, box-shadow 0.05s ease-out;
}