:root{--bg:#0b1020;--card:#121a33;--accent:#6ee7ff;--muted:#9aa4c7}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui;background:var(--bg);color:white}
header{text-align:center;padding:40px 20px;border-bottom:1px solid #1e2a55}
h1{margin:0;font-size:2.4rem}
.search{margin:20px auto;max-width:420px}
input{width:100%;padding:14px;border-radius:14px;border:none;font-size:1rem}
.letters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.letter-btn{padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid #233066;color:white;cursor:pointer}
.directory{padding:40px;display:grid;gap:30px}
.section{background:var(--card);border:1px solid #233066;border-radius:20px;padding:24px}
.examples{display:flex;gap:12px;flex-wrap:wrap}
.example-btn{padding:10px 16px;border-radius:14px;background:#0b1020;border:1px solid #233066;color:white}
nav{padding:16px;border-bottom:1px solid #233066}
article{max-width:900px;margin:40px auto;background:var(--card);border-radius:24px;padding:32px;border:1px solid #233066}

/* Letter pages text color fix */
.directory, .directory a, .section a {
  color: #ffffff !important;
}

/* Sidebar */
.page-layout{display:grid;grid-template-columns:3fr 1fr;gap:32px;align-items:start}
.sidebar{border:1px solid #233066;border-radius:20px;padding:20px;background:#0b1020}
.sidebar h3{margin-top:0}
.sidebar ul{list-style:none;padding-left:0}
.sidebar li{margin-bottom:10px}
.sidebar a{color:#6ee7ff}