:root{
  --bg:#0f1115;
  --panel:#161a22;
  --border:#252b3a;
  --text:#e6e9ef;
  --muted:#9aa4b2;
  --link:#4da3ff;
  --accent:#f0c674;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrapper{
  max-width:900px;
  margin:0 auto;
  padding:20px;
}

header{ margin-bottom:24px; }
header h1{ margin:0 0 6px; font-size:26px; }
header p{ margin:0; color:var(--muted); }

nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0;
}

nav a{
  padding:6px 10px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:14px;
}

section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px;
  margin-bottom:20px;
}

section h2{
  margin-top:0;
  font-size:20px;
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
}

.list{ margin-top:10px; }

.item{
  padding:6px 0;
  border-bottom:1px dashed var(--border);
}
.item:last-child{ border-bottom:none; }

.note{
  background:#2a2b1a;
  border:1px solid #555522;
  border-radius:8px;
  padding:12px;
  color:#f0e6a0;
  font-size:14px;
}

.note__toggle{
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
  padding:0;
  font:inherit;
}

.note__toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px;
}

.note-content{
  margin-top:8px;
}

ol{ padding-left:20px; }

code{
  background:#1f2430;
  padding:2px 6px;
  border-radius:4px;
  font-size:90%;
}

footer{
  margin-top:30px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}