*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#1A1A1A;--text:#D0D0D0;--prompt:#88CC88;--comment:#666666;--string:#CCAA66;--error:#CC6666;--panel:#222222;--border:#333333}
body{background:var(--bg);color:var(--text);font-family:'Fira Code',monospace;font-size:0.875rem;line-height:1.7;overflow-x:hidden}

.boot{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.boot-messages{max-width:600px}
.boot-line{opacity:0;color:var(--prompt);margin-bottom:0.5rem;animation:typeIn 0.3s forwards}
.boot-line:nth-child(1){animation-delay:0s}
.boot-line:nth-child(2){animation-delay:0.4s}
.boot-line:nth-child(3){animation-delay:0.8s}
.boot-line:nth-child(4){animation-delay:1.2s}
.boot-line:nth-child(5){animation-delay:1.6s;color:var(--text)}

.dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem;max-width:1200px;margin:0 auto}
@media(max-width:900px){.dashboard{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--border);border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#CC6666}
.dot.yellow{background:#CCAA66}
.dot.green{background:#88CC88}
.panel-title{margin-left:8px;font-size:0.75rem;color:var(--comment)}
.panel-content{padding:16px;font-size:0.8125rem;line-height:1.8}
.panel-content p{margin-bottom:0.25rem}
.comment{color:var(--comment)}
.string{color:var(--string)}
.error{color:var(--error)}

.ascii-section{padding:4rem 2rem;display:flex;justify-content:center}
.ascii-art{color:var(--prompt);font-size:clamp(0.6rem,1.2vw,0.875rem);line-height:1.5;text-align:center;white-space:pre}

.exit{min-height:40vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.terminal-output{max-width:500px}
.terminal-output p{margin-bottom:0.5rem}
.cursor{animation:blink 1s step-end infinite}

/* Circuit traces between panels */
.dashboard::before{content:'--+--';position:absolute;color:var(--border);font-size:0.75rem;opacity:0.3}

.card{opacity:0;transform:translateY(20px);transition:opacity 0.6s,transform 0.6s}
.card.visible{opacity:1;transform:translateY(0)}

@keyframes typeIn{to{opacity:1}}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}