@charset "utf-8";
/* CSS Document */

       /* --- Scene Setup --- */
        .scene {
            perspective: 300em;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            /* Every keyboard dimension is in em -> this one value scales the whole board */
            font-size: var(--kb-size, 16px);
            white-space: normal;
            margin-top: -5em;
        }

        .keyboard {
            position: relative;
            /* Initial Isometric Rotation - FIXED */
            transform: rotateX(60deg) rotateZ(45deg);
            transform-style: preserve-3d;
            
            /* --- LIGHT THEME BASE --- */
            background: #f8fafc; /* Very light slate surface */
            padding: 2em;
            border-radius: 2em;
            
            /* Inner depth for the tray (Light Theme) */
            box-shadow: inset 1em 1em 0 0.4em #e2e8f0; 
            
            /* Deep drop shadow for the board itself */
            filter: drop-shadow(2em 2em 1em rgba(0,0,0,0.2));
            
            /* Container for the key row */
            display: block; 
        }
        
        .key-row {
            display: flex;
            gap: 2em;
        }

        /* --- The "Front Cover" (Chassis Thickness) --- */
        
        .shade {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 19em;
            background-image: linear-gradient(96deg, #8297b6 50%, #64748b);
            /* This complex transform creates a shadow that looks right from the 3D perspective */
            transform: rotateX(71deg) rotateY(7deg) rotateZ(340deg) translateX(2em) translateY(7em) translateZ(-2em);
            filter: blur(0.5em);
            z-index: 102;
        }
        
        /* The Cover: Creates the THICK visual rim/chassis */
        .cover {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: transparent;
            border-radius: 2em;
            pointer-events: none;
            z-index: 101; 
            
            /* THE FRONT COVER (LIGHT THEME):
               Stack of external shadows to create the "Block" (Medium Slate #64748b)
            */
            box-shadow: 
                /* Inner Tray Details - Light highlights */
                inset -0.3em -0.3em 0.1em 0.2em #ffffff, 
                inset -1em -1em 0 0.4em #f1f5f9, 
                inset -2em -2em 2em -0.6em #737373, 
                
                /* The Extrusion Stack (Medium Slate Color) */
                0 0 #64748b, 
                0.3em 0.3em #64748b, 
                0.6em 0.6em #64748b, 
                0.9em 0.9em #64748b, 
                1.2em 1.2em #64748b, 
                1.5em 1.5em #64748b, 
                1.8em 1.8em #64748b, 
                2.1em 2.1em #64748b, 
                2.4em 2.4em #64748b, 
                2.7em 2.7em #64748b, 
                3.0em 3.0em #64748b, 
                3.3em 3.3em #64748b, 
                3.6em 3.6em #64748b, 
                3.9em 3.9em #64748b, 
                4.2em 4.2em #64748b, 
                4.5em 4.5em #64748b,
                4.8em 4.8em #64748b,
                5.1em 5.1em #64748b,
                5.4em 5.4em #64748b,
                5.7em 5.7em #64748b,
                6.0em 6.0em #64748b,
                6.3em 6.3em #64748b,
                6.6em 6.6em #64748b,
                6.9em 6.9em #64748b,
                7.2em 7.2em #64748b,
                7.5em 7.5em #64748b;
        }

        /* --- The Key Structure --- */
        .key {
            position: relative;
            width: 6em;
            height: 6em;
            /* Lift keys up and left (Default resting state) */
            transform: translateX(-3em) translateY(-3em);
            transform-style: preserve-3d;
            transition: transform 0.1s ease-out;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            z-index: 100; 
        }

        /* The "Hole" on the base under the key (Light Theme) */
        .key::before {
            content: '';
            position: absolute;
            top: 3em; left: 3em; 
            width: 100%; height: 100%;
            background: #94a3b8; /* Slate-400 hole color */
            border-radius: 1em;
            transform: translateZ(-1px);
            box-shadow: inset 0.2em 0.2em 0.5em rgba(0,0,0,0.5);
            filter: blur(1px);
        }

        /* Pressed State (Transient physical effect) */
        /* Used by CSS :active for mouse down, and JS .depressed for keyboard down */
        .key.depressed,
        .key:active {
             transform: translateX(-1em) translateY(-1em) !important;
        }

        /* --- Active State (Persistent Orange Toggle) --- */
        .key.active .side {
            background-image: linear-gradient(#f97316 45%, #ea580c 55%); /* Orange-500/600 */
        }
        
        .key.active .top {
            background: #fb923c; /* Orange-400 */
            box-shadow: 
                inset 0.2em 0.2em 0.5em rgba(255,160,0,0.8),
                inset -0.2em -0.2em 0.5em rgba(0,0,0,0.3),
                0.5em 0.5em 1em rgba(234, 88, 12, 0.4); /* Deeper orange shadow */
        }
        
        .key.active .key-content {
            color: #fff; /* White content */
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* 1. The Side Layer (The Extrusion) */
        .key .side {
            position: absolute;
            width: 250%;
            height: 140%; 
            transform: rotateZ(45deg) translate(19%, 28%);
            background-image: linear-gradient(#f1f5f9 45%, #cbd5e1 55%);
            border-radius: 1em;
            z-index: 1;
        }

        /* 2. The Top Face (The Cap) */
        .key .top {
            position: absolute;
            top: 0px;
            left: -4px;
            width: 111%;
            height: 104%;
            background: #f1f5f9;
            border-radius: 1em;
            z-index: 2;
            box-shadow: inset -0.2em -0.2em 0.5em -0.2em white, 0.2em 0.2em 0.5em -0.2em white;
        }
        
        /* Key Content (Letters/Icons) */
        .key-content {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            font-weight: 800;
            color: #64748b;
            text-shadow: -0.033em -0.033em 0.033em #232d3a;
        }

        /* --- Dark Key Variant (Command) --- */
        .key.dark .side {
            background-image: linear-gradient(#334155 45%, #1e293b 55%);
        }
        
        .key.dark .top {
            background: #1e293b;
            box-shadow: 
                inset 0.2em 0.2em 0.5em rgba(255,255,255,0.1),
                inset -0.2em -0.2em 0.5em rgba(0,0,0,0.5);
        }

        .key.dark .key-content {
            color: #e2e8f0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* --- Icons --- */
         .scene svg {
            width: 0.83em;
            height: 0.83em;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            stroke: currentColor;
        }
        
        /* --- Hint under the keyboard: quiet, monospace, fades in late and pulses gently --- */
        .column-primary { position: relative; }
        .kb-hint {
            position: absolute;
            left: 0; right: 0;
            bottom: calc(var(--kb-size, 16px) * 0.5);
            margin: 0;
            text-align: center;
            font-family: "Space Mono", monospace;
            font-size: clamp(0.72rem, 1.5vw, 0.85rem);
            letter-spacing: 0.08em;
            color: #8a8f98;
            pointer-events: none;
            opacity: 0;
            transform: translateY(6px);
            animation: kbHintIn 0.9s ease 1.2s forwards;
            transition: opacity 0.5s ease;
        }
        .kb-hint b { font-weight: 700; color: #f97316; letter-spacing: 0.14em; }
        .kb-hint-text::after {          /* blinking caret, like something waiting to be typed */
            content: "";
            display: inline-block;
            width: 0.5em; height: 1em;
            margin-left: 0.4em;
            vertical-align: -0.15em;
            background: #f97316;
            opacity: 0.8;
            animation: kbCaret 1.1s steps(1) infinite;
        }
        @media (min-width: 1024px) { .kb-hint { bottom: calc(var(--kb-size, 16px) * -3.5); } }
        .kb-hint-touch { display: none; }
        @media (hover: none) {
            .kb-hint-pointer { display: none; }
            .kb-hint-touch { display: inline; }
        }
        .kb-hint.is-hidden { animation: none; opacity: 0 !important; }
        @keyframes kbHintIn { to { opacity: 1; transform: none; } }
        @keyframes kbCaret { 50% { opacity: 0; } }
        @media (prefers-reduced-motion: reduce) {
            .kb-hint { animation: none; opacity: 1; transform: none; }
            .kb-hint-text::after { animation: none; }
        }