:root{--parchment:#f2ead8;--ink:#1c130a;--gold:#b48b3a;--paper:#fffaf0;--maxw:1100px;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box} html,body{margin:0;padding:0;color:var(--ink);background:linear-gradient(#efe8d8,#f7f2e6)}
body{font-family:Georgia,serif; line-height:1.6}
.container{max-width:var(--maxw); margin:0 auto; padding:1rem}
.display{font-size:2.3rem; line-height:1.1; margin:0 0 .5rem; font-weight:800}
.gold{color:var(--gold)}
.site-header{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.site-nav a{margin-left:1rem; text-decoration:none; color:inherit; border-bottom:2px solid transparent}
.site-nav a:hover{border-color:var(--gold)}
.parchment{background:var(--parchment); border-radius:var(--radius); padding:1rem 1.2rem; box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
button,.btn{display:inline-block; padding:.7rem 1rem; border-radius:999px; border:1px solid var(--gold); background:linear-gradient(#f9f1df,#ead8b3); box-shadow:var(--shadow); text-decoration:none; color:var(--ink)}
input,textarea{width:100%; padding:.7rem 1rem; border:1px solid #d9cfb8; border-radius:var(--radius); background:var(--paper)}
table{width:100%; border-collapse:collapse} th,td{padding:.6rem; border-bottom:1px solid #e5dbc7; text-align:left}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85rem; background:#f3ead5; border:1px solid #e2d6bf; border-radius:6px; padding:.15rem .35rem}