:root{
    --bg: #0A0A0A;
    --panel: #0f0f0f;
    --fg: #bbbbbb;
    --accent: #ffffff;
    --muted: #9aaed0;
}
html,body{height:100%;}
body{
    margin:0;
    font-family: "Courier New", Courier, monospace;
    background: var(--bg);
    color:var(--fg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.container{
    max-width:900px;
    margin:36px auto;
    padding:20px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:2px solid rgba(0,255,102,0.08);
    box-shadow:0 6px 18px rgba(0,0,0,0.6);
}
h1{color:var(--accent);margin-top:0;font-size:1.6rem}
.retro-button{
    display:inline-block;
    padding:8px 12px;
    margin:6px 4px;
    color:var(--bg);
    background:var(--accent);
    text-decoration:none;
    border:2px solid #002200;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2);
}
.quote-box{background:rgba(0,0,0,0.2);padding:12px;border:1px dashed rgba(255,255,255,0.02);margin:12px 0}
.quote-author{color:var(--muted);font-size:0.9rem}
.grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.card{background:var(--panel);border:1px solid rgba(0,255,102,0.05);padding:10px}
.card-header{font-weight:bold;color:var(--accent);margin-bottom:6px}
.card-content ul{padding-left:20px}
.footer{margin-top:18px;color:var(--muted);font-size:0.85rem}
a{color:var(--accent)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}