:root { font-size:100%; color-scheme:light; --bg:#f4f7f5; --surface:#fff; --text:#17231d; --muted:#42534a; --link:#075c3c; --accent:#176b48; --border:#aab9b0; --focus:#a63300; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:1rem/1.65 Arial,Helvetica,sans-serif; }
a { color:var(--link); text-decoration:underline; text-underline-offset:.15em; }
a:hover { text-decoration-thickness:.18em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:absolute; z-index:2; top:.4rem; left:.5rem; padding:.6rem 1rem; background:var(--surface); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding:1rem max(1rem,calc((100% - 1200px)/2)); background:#17563c; color:#fff; }
.brand { color:#fff; text-decoration:none; font-size:1.3rem; font-weight:700; }
.brand span { margin-left:.7rem; color:#e4f2e9; font-size:1rem; font-weight:400; }
.original-link { display:inline-block; padding:.45rem .8rem; color:#fff; border:2px solid #fff; border-radius:.25rem; font-weight:700; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; max-width:1200px; margin:auto; padding:1rem; }
button,input { font:inherit; }
button { min-height:2.75rem; padding:.35rem .8rem; background:var(--surface); color:var(--text); border:2px solid var(--accent); border-radius:.25rem; cursor:pointer; }
button:hover { background:#e8f2ec; }
main { display:grid; grid-template-columns:minmax(15rem,19rem) minmax(0,1fr); align-items:start; gap:1rem; max-width:1440px; margin:auto; padding:.5rem 1rem 2rem; }
.page-nav { position:sticky; top:1rem; align-self:start; min-width:0; max-height:calc(100vh - 10rem); overflow:auto; margin:0; padding:.7rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:.4rem; }
.page-nav summary { font-weight:700; cursor:pointer; }
.page-nav-home { padding:0; border:3px solid #a94c00; box-shadow:0 2px 8px #17231d30; }
.nav-callout { margin:0; padding:.8rem 1rem; color:#17231d; background:#ffdf72; border-bottom:2px solid #a94c00; font-size:1.1rem; }
.nav-callout strong { font-size:1.2em; }
.menu-icon { display:inline-flex; width:1.8rem; flex-direction:column; justify-content:center; gap:.3rem; margin-right:.7rem; vertical-align:middle; }
.menu-icon span { display:block; height:.2rem; width:100%; background:#7a2c00; border-radius:.1rem; }
.page-nav-home details { padding:.7rem 1rem; }
.page-nav label { display:block; margin-top:.8rem; font-weight:700; }
.page-nav input { width:min(100%,32rem); min-height:2.75rem; padding:.5rem; border:2px solid #617268; border-radius:.25rem; }
#page-list { margin:.7rem 0 0; padding-left:1.5rem; }
#page-list li { margin:.15rem 1rem .15rem 0; break-inside:avoid; }
#page-list .nav-category { margin:1rem 1rem .25rem 0; color:#17563c; font-weight:700; list-style:none; break-after:avoid; }
#page-list[hidden] { display:none; }
article { min-width:0; padding:clamp(1rem,3vw,2rem); background:var(--surface); border:1px solid var(--border); border-radius:.4rem; }
h1 { margin:0 0 1.2rem; font-size:1.8rem; line-height:1.3; }
h2,h3,h4 { line-height:1.35; }
#source-content { min-width:0; overflow-wrap:anywhere; }
#source-content img,#source-content video,#source-content iframe { max-width:100%; height:auto; }
#source-content table { width:100%; border-collapse:collapse; margin:1rem 0; }
#source-content td,#source-content th { border:1px solid var(--border); padding:.55rem; vertical-align:top; }
#source-content th { text-align:left; }
#source-content p,#source-content li { max-width:90ch; }
#source-content a { overflow-wrap:anywhere; }
footer { padding:1.5rem; text-align:center; }
body.high-contrast { --bg:#000; --surface:#000; --text:#fff; --muted:#fff; --link:#ff0; --accent:#ff0; --border:#fff; --focus:#ff0; color-scheme:dark; }
body.high-contrast .site-header { background:#000; border-bottom:2px solid #fff; }
body.high-contrast .brand,body.high-contrast .brand span { color:#ff0; }
body.high-contrast .original-link { color:#ff0; border-color:#ff0; }
body.high-contrast .page-nav-home { border-color:#ff0; }
body.high-contrast .nav-callout { color:#fff; background:#000; border-color:#ff0; }
body.high-contrast .menu-icon span { background:#ff0; }
body.high-contrast #page-list .nav-category { color:#fff; }
body.high-contrast button,body.high-contrast input { color:#fff; background:#000; border-color:#ff0; }
body.high-contrast button:hover { color:#000; background:#ff0; }
body.high-contrast a { color:#ff0; }
body.high-contrast a:hover,body.high-contrast a:focus-visible { text-decoration:underline; text-decoration-thickness:.18em; }
@media(max-width:900px) { main { grid-template-columns:minmax(0,1fr); } .page-nav { position:static; max-height:none; overflow:visible; } }
@media(max-width:700px) { .site-header { padding:1rem; } .toolbar { padding:.7rem; } main { padding:.4rem .6rem 1.5rem; } #page-list { max-height:18rem; overflow:auto; } article { padding:1rem; } #source-content table { display:block; overflow-x:auto; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
