/* 24-Hour Story Scene - Seamless Design */
        .day-scene {
            position: relative;
            width: 100%;
            max-width: 700px;
            height: 320px;
            margin-bottom: 40px;
            /* No border, no background - fully transparent */
            overflow: visible;
        }

        /* Soft glow behind the scene */
        .day-scene::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 60%;
            background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
            pointer-events: none;
            z-index: -1;
        }

        /* Clock - larger and more prominent */
        .scene-clock {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'JetBrains Mono', monospace;
            font-size: 2.5rem;
            font-weight: 700;
            color: #22d3ee;
            text-shadow: 0 0 30px rgba(34, 211, 238, 0.6);
            letter-spacing: 2px;
        }

        .scene-label {
            position: absolute;
            top: 55px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.1rem;
            color: #a78bfa;
            font-weight: 500;
            text-align: center;
            text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
        }

        /* Scene container */
        .scene-content {
            position: absolute;
            top: 100px;
            left: 0;
            right: 0;
            bottom: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
        }

        /* Human side */
        .human-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .human-activity {
            font-size: 5rem;
            filter: drop-shadow(0 0 20px rgba(255,255,255,0.2));
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        .human-status {
            margin-top: 12px;
            font-size: 1rem;
            color: #94a3b8;
            font-weight: 500;
        }

        /* Divider - subtle glow line */
        .scene-divider {
            width: 1px;
            height: 120px;
            background: linear-gradient(180deg,
                transparent 0%,
                rgba(99, 102, 241, 0.4) 30%,
                rgba(99, 102, 241, 0.4) 70%,
                transparent 100%);
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
        }

        /* Laptop side */
        .laptop-side {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .mini-laptop {
            width: 140px;
            height: 95px;
            background: rgba(13, 13, 26, 0.8);
            border: 2px solid rgba(58, 58, 90, 0.6);
            border-radius: 8px 8px 0 0;
            position: relative;
            box-shadow:
                0 0 40px rgba(34, 211, 238, 0.3),
                inset 0 0 30px rgba(34, 211, 238, 0.1);
            backdrop-filter: blur(5px);
        }

        .mini-laptop::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: -8px;
            width: 156px;
            height: 10px;
            background: linear-gradient(180deg, rgba(74, 74, 106, 0.8) 0%, rgba(58, 58, 90, 0.6) 100%);
            border-radius: 0 0 6px 6px;
        }

        .mini-screen-code {
            padding: 10px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.55rem;
            color: #22d3ee;
            line-height: 1.5;
        }

        .laptop-status {
            margin-top: 18px;
            font-size: 1rem;
            color: #10b981;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            text-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
        }

        .status-dot {
            width: 10px;
            height: 10px;
            background: #10b981;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(16, 185, 129, 0.8); }
            50% { transform: scale(1.3); box-shadow: 0 0 20px rgba(16, 185, 129, 1); }
        }

        /* Benefits bar - floating at bottom */
        .benefits-bar {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            padding: 12px 30px;
            background: transparent;
        }

        .benefit {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(16, 185, 129, 0.9);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .benefit-icon {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
        }

        /* Together view - working side by side */
        .together-view {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 15px;
        }

        .person-icon {
            font-size: 4rem;
            filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
        }

        .plus-sign {
            font-size: 2rem;
            color: #22d3ee;
            font-weight: bold;
            text-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
        }

        .together-label {
            font-size: 1rem;
            color: #94a3b8;
            text-align: center;
            margin-bottom: 10px;
        }

        .code-progress {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
            color: #22d3ee;
            text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
        }

        /* Apart view - separated */
        .apart-view {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            width: 100%;
        }

        .codehero-side {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .code-progress-mini {
            margin-top: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8rem;
            color: #22d3ee;
            text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
        }

        /* Together work layout - both on work side */
        .together-work {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .person-icon-small {
            font-size: 3rem;
            filter: drop-shadow(0 0 15px rgba(255,255,255,0.2));
        }

        /* Empty human side placeholder */
        .human-side.empty {
            opacity: 0.4;
            min-width: 120px;
        }

        /* Mini hero character */
        .hero-icon-mini {
            position: relative;
            width: 50px;
            height: 60px;
        }

        .hero-body-mini {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 25px;
            height: 32px;
            background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
            border-radius: 6px 6px 3px 3px;
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
        }

        .hero-body-mini::before {
            content: '</>';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.4rem;
            font-weight: bold;
            color: #22d3ee;
            text-shadow: 0 0 5px rgba(34, 211, 238, 0.8);
        }

        .hero-head-mini {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
        }

        .hero-mask-mini {
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 6px;
            background: #0f0f23;
            border-radius: 3px;
        }

        .hero-mask-mini::before,
        .hero-mask-mini::after {
            content: '';
            position: absolute;
            top: 1px;
            width: 4px;
            height: 3px;
            background: #22d3ee;
            border-radius: 1px;
            box-shadow: 0 0 5px rgba(34, 211, 238, 0.8);
        }

        .hero-mask-mini::before { left: 2px; }
        .hero-mask-mini::after { right: 2px; }

        .hero-cape-mini {
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 35px;
            background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
            clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 50% 80%, 0% 100%);
            z-index: -1;
        }

        .hero-icon-mini.working .hero-cape-mini {
            animation: capeWaveMini 2s ease-in-out infinite;
        }

        @keyframes capeWaveMini {
            0%, 100% { transform: translateX(-50%) skewX(0deg); }
            50% { transform: translateX(-50%) skewX(5deg); }
        }


@media(max-width:768px){
            /* Hero animation mobile fixes */
            .day-scene {
                min-height: 260px;
                padding: 15px 10px 20px 10px;
            }

            .scene-clock {
                font-size: 1.8rem !important;
                letter-spacing: 2px !important;
                margin-bottom: 8px !important;
                line-height: 1 !important;
            }

            .scene-label {
                font-size: 0.8rem !important;
                margin-bottom: 20px !important;
                line-height: 1.2 !important;
                display: block !important;
                clear: both !important;
            }

            .scene-content {
                transform: scale(1);
            }

            .apart-view {
                gap: 30px !important;
            }

            .human-side, .codehero-side {
                min-width: auto !important;
            }

            .human-side.empty {
                display: none;
            }

            .scene-divider {
                display: none;
            }

            .human-icon {
                font-size: 4rem !important;
            }

            .hero-icon-mini {
                transform: scale(1.2);
            }

            .human-status, .laptop-status {
                font-size: 0.75rem !important;
            }

            .code-progress-mini {
                font-size: 0.7rem !important;
            }

            .day-scene .benefits-bar,
            .benefits-bar {
                display: none !important;
                visibility: hidden !important;
            }


}

/* Wrapper accessibility overrides: drawing and animation rules above are copied verbatim. */
#storyCanvas .scene-clock{font-family:var(--font-mono)}
#storyCanvas .scene-label{font-size:16px!important;min-width:220px;color:var(--violet)}
#storyCanvas .human-status,#storyCanvas .laptop-status{font-size:16px!important;color:var(--secondary)}
#storyCanvas .code-progress-mini{font-family:var(--font-mono);font-size:14px!important;color:var(--cyan)}
#storyCanvas .benefit{font-size:14px;color:var(--green);white-space:nowrap}
#storyCanvas .human-side.empty{opacity:1}
#storyCanvas .human-side.empty .human-status{color:var(--secondary)!important}
#storyCanvas .day-scene{margin-bottom:0}
@media(max-width:480px){#storyCanvas .apart-view{gap:24px!important}#storyCanvas .human-activity{font-size:4rem}#storyCanvas .scene-label{width:90%}}