body {
    background-color: #eef1f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.presentation-area {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Add extra padding to accommodate the scaled device (500px * 1.5 = 750px height) */
    padding: 100px 0; 
}

h1 { color: #333; margin-bottom: 0.5rem; }
p { color: #666; margin-bottom: 2rem; }

/* 
   DEVICE CHASSIS 
   Pure CSS implementation of the black box front panel
*/
.device-chassis {
    width: 600px;
    height: 500px; /* Aspect ratio roughly matching the cube face */
    background-color: #222; /* Dark matte black */
    border-radius: 24px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.3), /* Deep shadow */
        inset 0 0 0 2px rgba(255,255,255,0.05); /* Subtle highlight edge */
    
    /* Flex layout to stack Screen and Controls */
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap, visual separation handled by margins/padding */
    
    /* Scale up significantly */
    transform: scale(1.5);
    transform-origin: center;
}

/* Texture effect (optional noise) */
.device-chassis::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* 
   TOP SECTION: SCREEN BEZEL & SCREEN
*/
.device-screen-bezel {
    flex: 2; /* Takes up top ~2/3 of space */
    background-color: #111;
    border-radius: 12px;
    margin-bottom: 0; /* Flush with bottom part or slight gap */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.device-screen {
    width: 94%;
    height: 90%;
    background-color: #050505; /* Screen Off Black */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

/* Screen ON State (Applied via JS) */
.device-chassis.is-on .device-screen {
    /* When ON, we let the inner content (white background) take over, 
       but if we had transparency we might need this. 
       Actually, our Wizard uses full white bg, so this just sets base. */
    background-color: #fff; 
}

/* 
   SYSTEM INTERFACE (Inside Screen) - LEGACY STYLES (Keep for reference or cleanup)
*/
/* ... (Old styles removed to avoid conflict with Tailwind) ... */

/* 
   BOTTOM SECTION: CONTROLS
*/
.device-controls {
    flex: 1; /* Takes up bottom ~1/3 */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spread Power and USB apart */
    padding: 0 40px;
}

/* Power Button */
.power-button-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d0d0d0, #999); /* Silver metallic look */
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255,255,255,0.8),
        inset 0 -2px 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    border: 1px solid #888;
}

.power-button-wrapper:active {
    transform: scale(0.95);
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
}

.power-icon {
    font-size: 24px;
    color: #666; /* Etched look */
    opacity: 0.7;
}

/* LED Indicator */
.control-group-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.power-led {
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.3s;
    border: 1px solid #222;
}

.device-chassis.is-on .power-led {
    background-color: #0f0;
    box-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
}

/* USB Port */
.control-group-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.usb-port {
    width: 40px;
    height: 14px;
    background-color: #000;
    border: 1px solid #444;
    border-radius: 2px;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

.usb-tongue {
    position: absolute;
    top: 4px; /* Inside top half usually for Type A */
    left: 2px;
    right: 2px;
    height: 2px;
    background-color: #333; /* Plastic tongue */
}

.mic-hole {
    width: 4px;
    height: 4px;
    background-color: #111;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

/* Tailwind Helpers */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out forwards;
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
}

/* Scrollbar Styling for Webkit */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ============================================
   RESPONSIVE DESIGN - Mobile & Tablet Support
   ============================================ */

/* Large Tablets and Small Desktops (1024px - 1280px) */
@media (max-width: 1280px) {
    .device-chassis {
        transform: scale(1.2);
    }
    
    .presentation-area {
        padding: 80px 20px;
    }
}

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .device-chassis {
        width: 500px;
        height: 420px;
        transform: scale(1.0);
        border-radius: 20px;
        padding: 16px;
    }
    
    .presentation-area {
        padding: 60px 20px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    p {
        font-size: 0.95rem;
    }
    
    .power-button-wrapper {
        width: 50px;
        height: 50px;
    }
    
    .power-icon {
        font-size: 20px;
    }
    
    .device-controls {
        padding: 0 30px;
    }
}

/* Small Tablets and Large Phones (640px - 768px) */
@media (max-width: 768px) {
    .device-chassis {
        width: 90vw;
        max-width: 480px;
        height: 400px;
        transform: scale(0.9);
        border-radius: 16px;
        padding: 14px;
    }
    
    .presentation-area {
        padding: 40px 15px;
    }
    
    h1 {
        font-size: 1.3rem;
    }
    
    p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .power-button-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .power-icon {
        font-size: 18px;
    }
    
    .device-controls {
        padding: 0 25px;
    }
    
    .usb-port {
        width: 35px;
        height: 12px;
    }
}

/* Mobile Phones (< 640px) */
@media (max-width: 640px) {
    body {
        align-items: flex-start;
    }
    
    .device-chassis {
        width: 92vw;
        max-width: 400px;
        height: auto;
        min-height: 340px;
        transform: scale(0.85);
        border-radius: 14px;
        padding: 12px;
    }
    
    .presentation-area {
        padding: 30px 10px;
        width: 100%;
    }
    
    h1 {
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
    }
    
    p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .device-screen-bezel {
        border-radius: 10px;
    }
    
    .device-screen {
        border-radius: 3px;
    }
    
    .power-button-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .power-icon {
        font-size: 16px;
    }
    
    .control-group-left {
        gap: 15px;
    }
    
    .device-controls {
        padding: 0 20px;
    }
    
    .usb-port {
        width: 30px;
        height: 10px;
    }
    
    .power-led {
        width: 5px;
        height: 5px;
    }
}

/* Extra Small Phones (< 400px) */
@media (max-width: 400px) {
    .device-chassis {
        width: 95vw;
        transform: scale(0.75);
        min-height: 300px;
        border-radius: 12px;
        padding: 10px;
    }
    
    .presentation-area {
        padding: 20px 8px;
    }
    
    h1 {
        font-size: 1rem;
    }
    
    p {
        font-size: 0.8rem;
    }
    
    .power-button-wrapper {
        width: 35px;
        height: 35px;
    }
    
    .power-icon {
        font-size: 14px;
    }
    
    .device-controls {
        padding: 0 15px;
    }
    
    .control-group-left {
        gap: 12px;
    }
}

/* Landscape Mode Optimization for Mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .presentation-area {
        padding: 20px 10px;
    }
    
    h1 {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }
    
    p {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }
    
    .device-chassis {
        transform: scale(0.7);
        min-height: 280px;
    }
}