:root{
  --bg: #000000;
  --fg: #ffffff;
  --accent: #e63946; /* red accent */
  --muted: #bdbdbd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{
  max-width:960px;
  margin:48px auto;
  padding:24px;
}

h1,h2,h3,h4{color:var(--accent);margin:0 0 12px;font-weight:600}
h1{font-size:44px;letter-spacing:-0.5px}

p{margin:0 0 16px;color:var(--fg)}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;color:#ff6b78}

.muted{color:var(--muted)}

.log{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  padding:14px 18px;
  border-radius:8px;
  color:var(--muted);
}
.log ul{margin:0;padding-left:20px}
.log li{margin:6px 0}

.btn{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid rgba(230,57,70,0.12);color:var(--accent);background:transparent}
.btn:hover{background:var(--accent);color:#000}

footer{margin-top:48px;color:#7a7a7a;font-size:13px}

code,pre{background:#081018;color:var(--fg);padding:4px 6px;border-radius:6px}

@media (max-width:600px){
  .container{margin:20px;padding:16px}
  h1{font-size:32px}
}