:root {
    --bg-color: #FFBD16;
    --card-bg: rgba(255, 255, 255, 0.4);
    --card-border: rgba(0, 0, 0, 0.1);
    --text-primary: #0f172a;
    --text-secondary: #6bff5b;
    --accent-color: #1c6a00;
    /* Dark accent for visibility */
    --toggle-bg-off: rgba(0, 0, 0, 0.1);
    --toggle-bg-on: #248a00;
    --toggle-handle: #ffffff;
    --result-stable: #248a00;
    --result-paradoxical: #db2777;
    /* Darker pink for visibility */
    --result-infinite: #9333ea;
    /* Darker purple */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    /* User said "depending on that white background colour for transparency later" */
    background-color: white;
    font-family: 'IBM Plex Mono', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* Move scanlines to .crt-screen instead of body */
body::after {
    display: none;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

.paradoxical {
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 1.0, 1.0);
    -webkit-animation-duration: 0.5s;
}

/* Main Wrapper for Fixed Frame */
.main-wrapper {
    width: 1000px;
    /* Fixed width to hold the frame */
    height: 678px;
    /* Fixed height ratio approx to image */
    background-image: url('technoborder.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* For video recording cleaness */

/* New CRT Monitor Container */
.crt-screen {
    position: relative;
    top: 4px;
    width: 518px;
    /* Slightly larger than widget */
    height: 450px;
    /* Estimated height to fit widget */
    background-color: #616161;
    /* Use the yellow theme here inside the screen */
    border-radius: 35px;
    /* Match inner curve of technoborder approx */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    /* Inner shadow for depth */
    transition: background-color 0.5s ease;
}

/* Slides Container */
.slides-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    /* Or simple block handling with display:none */
    justify-content: center;
    align-items: center;
}

.slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* transition: opacity 0.5s ease; - JS to toggle display */
    padding: 20px;
}

/* Paradox Error State */
.crt-screen.paradox-errors {
    background-color: #7f1d1d;
    /* Dark Red for Warning/Error */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
}


.crt-screen::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1000;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.widget-container {
    background: transparent;
    /* Remove card bg to let frame show */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    /* Remove border, frame provides it */
    border-radius: 24px;
    margin: 10px;
    padding: 10px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: none;
    /* Remove shadow */
    transition: transform 0.3s ease;
    margin-top: 40px;
    /* Optional adjustment to center content within frame if needed */
}

.widget-header h1 {
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    margin-bottom: 8px;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
    /* Subtle glow */
}

.switch-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 440px;
    /* Wider switches as requested (+100% roughly from original context if strictly needed, but let's assume filling container) */
    /* Container is 460px inside crt-screen (518px), so we fill it */
    padding: 0 40px;
    /* Add padding to center them nicely if slightly smaller */
}

.switch-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

/* Custom Toggle Switch */
.toggle-wrapper {
    position: relative;
    width: 100%;
    height: 48px;
    background: var(--toggle-bg-off);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    padding: 4px;
    user-select: none;
}

.toggle-wrapper.active {
    background: var(--card-border);
    /* Neutral background when active, state is indicated by position */
}

.toggle-handle {
    width: 40px;
    height: 40px;
    background: var(--toggle-handle);
    border-radius: 50%;
    position: absolute;
    left: 4px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.toggle-wrapper.active .toggle-handle {
    transform: translateX(270px);
    /* 320px container - 40px padding - 4px padding - 40px handle - 4px orig left (approx) -> calculated dynamically in CSS or fixed width */
    transform: translateX(calc(100% + 232px));
    /* This method is tricky with fixed widths. Let's use simpler layout */
}

/* Better Toggle Implementation for text labels inside */
.switch-input {
    display: none;
}

.toggle-track {
    position: relative;
    width: 100%;
    height: 56px;
    background: rgba(0, 0, 0, 0.4);
    /* Darker track for white text contrast */
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-track::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 50%;
    background: #248a00;
    /* Green interior */
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    /* Make it solid */
}

.switch-input:checked+.toggle-track::before {
    transform: translateX(96%);
    /* slight overlap */
}

.option-left,
.option-right {
    flex: 1;
    text-align: center;
    font-size: 1.0rem;
    font-weight: 500;
    z-index: 1;
    transition: color 0.3s;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 8px;
    line-height: 1.2;
}

.switch-input:not(:checked)+.toggle-track .option-left {
    color: #ffffff;
    font-weight: 700;
}



.intermediate-result {
    position: float;
    top: 10px;
    bottom: 8px;
    right: 12px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

/* Result Section */
.result-container {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--card-border);
}

.result-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.result-value {
    font-size: 1.1rem;
    font-weight: 700;
    background-clip: text;
    -webkit-background-clip: text;
    /* For gradient text */
    transition: all 0.5s ease;
    background-image: linear-gradient(to right, #fff, #ccc);
    /* Default */
}

.result-value.stable,
.result-value.standard-physics,
.result-value.digital-physics {
    background-image: linear-gradient(to right, #064e3b, #15803d);
    /* Darker green */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.result-value.paradoxical {
    background-image: linear-gradient(to right, #831843, #be185d);
    /* Deep pink/red */
    text-shadow: none;
}

.result-value.gnommos-paradox {
    background-image: linear-gradient(to right, #831843, #be185d);
    text-shadow: none;
}

.result-value.infinite {
    background-image: linear-gradient(to right, #4c1d95, #7e22ce);
    /* Deep purple */
    text-shadow: none;
}

/* Animations */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.wiki-link {
    /* ... existing styles ... */
}

/*.widget-container:hover {
   transform: scale(1.01);
}*/

/* Visualization Panel */
.visualization-container {
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.art-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* Base Dot */
.art-canvas::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    position: absolute;
    opacity: 0.8;
}

/* Visualization States */

/* Point + Field (Unexplained) */
.art-canvas.point-field::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    animation: rotate 10s linear infinite;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
}

.art-canvas.point-field::after {
    background: #c084fc;
    box-shadow: 0 0 15px #c084fc;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Stable Point */
.art-canvas.stable-point::after {
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
}

/* Paradox/Infinite placeholders - can be expanded */
.art-canvas.paradox-point::after,
.art-canvas.paradox-chunk::after,
.art-canvas.paradox-continuous::after,
.art-canvas.paradox-infinite::after {
    background: #a10356;
    box-shadow: 0 0 10px #a10356, 0 0 20px #a10356;
    animation: jitter 0.2s infinite;
}

@keyframes jitter {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-1px, -1px);
    }

    75% {
        transform: translate(-1px, 1px);
    }

    100% {
        transform: translate(1px, -1px);
    }
}


/* Description Text */
.result-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 8px;
    min-height: 2.4em;
    /* Reserve space for 2 lines */
    line-height: 1.4;
    max-width: 90%;
}

.result-value.unexplained {
    background-image: linear-gradient(to right, #fbbf24, #f59e0b);
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

/* Custom Visuals HTML-based */

/* Paradox Point: Cube + Arrow */
.cube-wrapper {
    perspective: 400px;
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(45deg);
    animation: slow-spin 10s linear infinite;
}

@keyframes slow-spin {
    from {
        transform: rotateX(-20deg) rotateY(0deg);
    }

    to {
        transform: rotateX(-20deg) rotateY(360deg);
    }
}

.face {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.face.front {
    transform: rotateY(0deg) translateZ(30px);
}

.face.back {
    transform: rotateY(180deg) translateZ(30px);
}

.face.right {
    transform: rotateY(90deg) translateZ(30px);
}

.face.left {
    transform: rotateY(-90deg) translateZ(30px);
}

.face.top {
    transform: rotateX(90deg) translateZ(30px);
}

.face.bottom {
    transform: rotateX(-90deg) translateZ(30px);
}

.cube .particle-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #a10356;
    /* Pink for paradox */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #a10356;
}

/* Info Arrow */
.info-arrow {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: -4px;
    opacity: 0;
    animation: arrow-enter 1s ease forwards 0.5s;
    z-index: 10;
}

@keyframes arrow-enter {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.arrow-line {
    width: 30px;
    height: 2px;
    background: #a10356;
    box-shadow: 0 0 5px #a10356;
}

.arrow-head {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #a10356;
    filter: drop-shadow(0 0 2px #a10356);
}

.infinite-symbol {
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #a10356;
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
}

/* Ensure ::after/::before on base class don't interfere when using innerHTML */
.art-canvas.paradox-point::after,
.art-canvas.paradox-point::before {
    display: none;
}

/* Chakana (Gold Cube Ensemble) */
.chakana-wrapper {
    perspective: 800px;
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);
    animation: floating 6s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes floating {
    0% {
        transform: rotateX(-30deg) rotateY(45deg) translateY(0);
    }

    50% {
        transform: rotateX(-30deg) rotateY(45deg) translateY(-10px);
    }

    100% {
        transform: rotateX(-30deg) rotateY(45deg) translateY(0);
    }
}

.gold-cube {
    width: 40px;
    height: 40px;
    position: absolute;
    transform-style: preserve-3d;
    /* Centering logic handled by offsets */
}

/* Positioning the arms relative to the center */
.gold-cube.center {
    transform: translate3d(0, 0, 0);
}

.gold-cube.top-arm {
    transform: translate3d(0, -40px, 0);
}

.gold-cube.bottom-arm {
    transform: translate3d(0, 40px, 0);
}

.gold-cube.left-arm {
    transform: translate3d(-40px, 0, 0);
}

.gold-cube.right-arm {
    transform: translate3d(40px, 0, 0);
}

.gold-cube .face {
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #d97706 100%);
    /* Gold gradient */
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* Darker border for definition */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.gold-cube .face.front {
    transform: rotateY(0deg) translateZ(20px);
}

.gold-cube .face.back {
    transform: rotateY(180deg) translateZ(20px);
}

.gold-cube .face.right {
    transform: rotateY(90deg) translateZ(20px);
}

.gold-cube .face.left {
    transform: rotateY(-90deg) translateZ(20px);
}

.gold-cube .face.top {
    transform: rotateX(90deg) translateZ(20px);
}

.gold-cube .face.bottom {
    transform: rotateX(-90deg) translateZ(20px);
}

/* Ensure ::after/::before on base class don't interfere */
.art-canvas.stable-chunk::after,
.art-canvas.stable-chunk::before {
    display: none;
}

/* Paradox Chunk (Unbounded Expansion) */
.chaos-wrapper {
    perspective: 600px;
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-source {
    width: 0;
    height: 0;
    position: absolute;
    transform-style: preserve-3d;
    animation: pulsar 2s ease-out infinite;
}

.central-source .face {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #a10356;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px #c084fc;
    opacity: 0.8;
}

/* Re-use generic face transfroms for central source size 20 */
.central-source .face.front {
    transform: rotateY(0deg) translateZ(10px);
}

.central-source .face.back {
    transform: rotateY(180deg) translateZ(10px);
}

.central-source .face.right {
    transform: rotateY(90deg) translateZ(10px);
}

.central-source .face.left {
    transform: rotateY(-90deg) translateZ(10px);
}

.central-source .face.top {
    transform: rotateX(90deg) translateZ(10px);
}

.central-source .face.bottom {
    transform: rotateX(-90deg) translateZ(10px);
}

@keyframes pulsar {
    0% {
        transform: scale3d(0.1, 0.1, 0.1) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: scale3d(3, 3, 3) rotate(360deg);
        opacity: 0;
    }
}

.debris-cube {
    width: 10px;
    height: 10px;
    position: absolute;
    transform-style: preserve-3d;
    opacity: 0;
}

.debris-cube .face {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, #c084fc, #a10356);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.debris-cube .face.front {
    transform: rotateY(0deg) translateZ(5px);
}

.debris-cube .face.back {
    transform: rotateY(180deg) translateZ(5px);
}

.debris-cube .face.right {
    transform: rotateY(90deg) translateZ(5px);
}

.debris-cube .face.left {
    transform: rotateY(-90deg) translateZ(5px);
}

.debris-cube .face.top {
    transform: rotateX(90deg) translateZ(5px);
}

.debris-cube .face.bottom {
    transform: rotateX(-90deg) translateZ(5px);
}

/* Explosion Animations for Debris */
/* Using css variables or just hardcoded classes for 12 debris items to fly in random directions */

.d-0 {
    animation: explode-0 2s linear infinite;
}

.d-1 {
    animation: explode-1 2.3s linear infinite 0.2s;
}

.d-2 {
    animation: explode-2 1.8s linear infinite 0.4s;
}

.d-3 {
    animation: explode-3 2.5s linear infinite 0.1s;
}

.d-4 {
    animation: explode-4 2.1s linear infinite 0.5s;
}

.d-5 {
    animation: explode-5 1.9s linear infinite 0.3s;
}

.d-6 {
    animation: explode-6 2.2s linear infinite 0.6s;
}

.d-7 {
    animation: explode-7 2.4s linear infinite 0.2s;
}

.d-8 {
    animation: explode-8 1.7s linear infinite 0.7s;
}

.d-9 {
    animation: explode-9 2.6s linear infinite 0.1s;
}

.d-10 {
    animation: explode-10 2.0s linear infinite 0.4s;
}

.d-11 {
    animation: explode-11 2.3s linear infinite 0.3s;
}

@keyframes explode-0 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(100px, 100px, 100px) rotate(360deg);
    }
}

@keyframes explode-1 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-120px, 80px, -50px) rotate(-180deg);
    }
}

@keyframes explode-2 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(50px, -150px, 20px) rotate(90deg);
    }
}

@keyframes explode-3 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-80px, -60px, 100px) rotate(-270deg);
    }
}

@keyframes explode-4 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(20px, 120px, -100px) rotate(45deg);
    }
}

@keyframes explode-5 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-150px, 10px, 10px) rotate(-45deg);
    }
}

@keyframes explode-6 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(80px, -80px, -80px) rotate(120deg);
    }
}

@keyframes explode-7 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-100px, 100px, 50px) rotate(200deg);
    }
}

@keyframes explode-8 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(120px, 40px, -20px) rotate(-100deg);
    }
}

@keyframes explode-9 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-40px, -130px, 80px) rotate(60deg);
    }
}

@keyframes explode-10 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(40px, 90px, 120px) rotate(300deg);
    }
}

@keyframes explode-11 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate3d(-90px, -40px, -120px) rotate(180deg);
    }
}


/* Ensure ::after/::before on base class don't interfere */
.art-canvas.paradox-chunk::after,
.art-canvas.paradox-chunk::before {
    display: none;
}

/* Layout Adjustment */
/* Layout Adjustment */
.bottom-container {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
}

/* Specific Layout for Slide 2 (Vertical Stack) */
#slide2 .bottom-container {
    flex-direction: column;
}

.visualization-container,
.result-container {
    width: 100%;
    margin: 0;
}

#slide2 .visualization-container {
    flex: 1.5;
    /* Larger upper section */
    height: auto;
    min-height: 0;
    /* Allow shrinking if needed */
}

#slide2 .result-container {
    flex: 1;
    /* Smaller lower section */
    height: auto;
    min-height: 0;
    padding: 24px;
}

/* Adjustments for the result container to fit better */
.result-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /* For absolute positioning of intermediate result */
}

/* Action Button Style */
.action-button {
    background-color: var(--accent-color);
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 24px;
    text-transform: uppercase;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.action-button:active {
    transform: translateY(4px);
    box-shadow: none;
}

.action-button.secondary {
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 1.0rem;
    padding: 5px 100px;
}

.action-button.secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Slide 2 Specific Typography Enlargement */
#slide2 .result-value {
    font-size: 2.5rem;
    /* much larger */
}

#slide2 .result-description {
    font-size: 1.2rem;
}



/* Detailed Summary Styles */
.summary-box {
    margin-bottom: 0px;
    width: 100%;
}

.summary-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.summary-value {
    display: block;
    font-size: 1.0rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

#slide2 .result-value {
    font-size: 2.0rem;

    /* Slightly adjusted */
    #slide2 .result-description {
        font-size: 1.1rem;
        display: block;
        width: 100%;
        margin-top: 4px;
    }

    display: block;
    width: 100%;
    margin-top: 4px;
}

/* CRT Slide Transition Animations */
@keyframes crt-collapse {
    0% {
        transform: scaleY(1);
    }


    60% {
        transform: scaleY(0.1);
    }

    100% {
        transform: scaleY(0.005);
    }
}

@keyframes crt-expand {
    0% {
        transform: scaleY(0.005);
    }

    60% {
        transform: scaleY(0.1);
    }

    100% {
        transform: scaleY(1);
    }
}

.crt-collapse {
    animation: crt-collapse 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.crt-expand {
    animation: crt-expand 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Splash Screen Styles */
#splashSlide {
    text-align: center;
    justify-content: center;
}

.splash-content h1 {
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--text-primary);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}

.splash-content h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-weight: 500;
}