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

body {
background-color: #000000 !important;
color: #e0e0e0;
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding-top: 80px;
}

header { width: 100%; max-width: 450px; padding: 20px; display: flex; justify-content: space-between; position: absolute; top: 0; }
.logo { font-weight: 800; letter-spacing: 3px; color: #00bcd4; font-size: 0.9rem; }

.stack-container { width: 100%; max-width: 450px; display: flex; flex-direction: column; gap: 20px; padding-bottom: 50px; }

/* MAIN STACK BUTTONS */
.vertical-stack { display: flex; flex-direction: column; gap: 15px; }
.layer-button {
padding: 25px; border-radius: 15px; cursor: pointer; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center; border: 1px solid rgba(255,255,255,0.05);
display: flex; flex-direction: column; align-items: center;
}
.l1-fortress { background: linear-gradient(135deg, #00bcd4, #008b9b); }
.l2-lab { background: linear-gradient(135deg, #0077b6, #005f92); }
.l3-dream { background: linear-gradient(135deg, #4b0082, #2a004a); }

.layer-button.active { outline: 3px solid white; box-shadow: 0 10px 40px rgba(0,0,0,0.8); transform: translateY(-5px); }

.layer-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8; margin-bottom: 5px; }
.layer-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 1px; }
.layer-subtitle { font-size: 0.85rem; opacity: 0.7; margin-top: 5px; }

/* CONSOLE */
.output-console { background: #0a0a0a; border-radius: 15px; padding: 25px; border: 1px solid #222; min-height: 160px; }
.status-bar { border-bottom: 1px solid #222; padding-bottom: 12px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.status-dot { height: 10px; width: 10px; border-radius: 50%; }
.pulse-animation { animation: consolePulse 2s infinite ease-in-out; }
@keyframes consolePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } }
.output-body { font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.6; color: #bbb; }

/* EXPERIMENT SECTION */
.experiment-section { margin-top: 40px; border-top: 1px solid #222; padding-top: 40px; }
.exp-toggle-header h2 { font-size: 0.75rem; letter-spacing: 2px; color: #555; text-align: center; margin-bottom: 20px; }
.toggle-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; }
.toggle-btn { background: #111; border: 1px solid #333; color: #888; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 0.7rem; transition: 0.3s; }
.toggle-btn.active { background: #222; color: #fff; border-color: #00bcd4; }
.exp-title-text { text-align: center; font-size: 0.9rem; color: #00bcd4; margin-bottom: 20px; font-weight: 700; }
.exp-card { background: #0a0a0a; padding: 18px; border-radius: 12px; border: 1px solid #1a1a1a; margin-bottom: 12px; }
.card-body { font-family: 'Courier New', monospace; font-size: 0.8rem; color: #aaa; line-height: 1.5; }
.l1-accent { border-left: 3px solid #00bcd4; }
.l2-accent { border-left: 3px solid #0077b6; }
.l3-accent { border-left: 3px solid #4b0082; }

/* GLOBAL ELEMENTS */
.status-indicator { color: #4caf50; font-size: 0.75rem; font-weight: 700; }
.pulse-dot { height: 7px; width: 7px; background: #4caf50; border-radius: 50%; display: inline-block; margin-right: 5px; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }