:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#f6f4ff;--fg:#14122a;--mut:#4a4670;--card:#fff;--bd:#cdc6ef;--ac:#5b2fd6;--ac2:#2347d9;--fs:100%;--ff:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#05030d;--fg:#ece9ff;--mut:#b9b3de;--card:#110c26;--bd:#2f2663;--ac:#b19cff;--ac2:#7aa3ff}}
:root[data-theme="dark"]{--bg:#05030d;--fg:#ece9ff;--mut:#b9b3de;--card:#110c26;--bd:#2f2663;--ac:#b19cff;--ac2:#7aa3ff}
:root[data-theme="contrast"]{--bg:#000;--fg:#fff;--mut:#fff;--card:#000;--bd:#fff;--ac:#ffe600;--ac2:#00e5ff}
html{font-size:var(--fs);scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
html.rd{--ff:Verdana,Tahoma,Arial,sans-serif}html.rd body{letter-spacing:.04em;word-spacing:.12em;line-height:1.9}
html.calm,html.calm *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.65 var(--ff)}
a{color:var(--ac2);text-decoration:underline}
:focus-visible{outline:3px solid var(--ac2);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:.5rem;z-index:9}
.in,main,footer{max-width:60rem;margin:auto;padding:0 1rem}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--bd);z-index:5}
header .in{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;padding-top:.4rem;padding-bottom:.4rem}
header b{color:var(--ac);font-size:1.1rem}nav{display:flex;flex-wrap:wrap;gap:.2rem .8rem}nav a{padding:.5rem 0;text-decoration:none}
button{font:inherit;min-height:44px;min-width:44px;padding:.4rem 1rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);cursor:pointer}
button[aria-pressed=true]{background:var(--ac);color:var(--bg);border-color:var(--ac)}
.set{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:.3rem .8rem;margin-left:auto}.set div{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0;align-items:center}
summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.hero{text-align:center;padding:1.5rem 0}.hero img{width:min(100%,26rem);height:auto;border-radius:18px;filter:drop-shadow(0 0 28px var(--ac))}
h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:.5rem 0}h2{font-size:1.6rem;margin:2.5rem 0 .5rem;color:var(--ac)}h4{margin:.8rem 0 .1rem}p{margin:.3rem 0}.m{color:var(--mut)}
.c,details{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:.4rem 1rem;margin:.5rem 0}.c{padding:1rem}
.g{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
input[type=search],select{font:inherit;min-height:44px;padding:.4rem .8rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);width:100%;box-sizing:border-box}
.big{font-size:2.6rem;font-weight:700;font-variant-numeric:tabular-nums}
#bo{width:9rem;height:9rem;border-radius:50%;margin:.5rem auto;display:flex;align-items:center;justify-content:center;text-align:center;border:3px solid var(--ac);box-shadow:0 0 24px var(--ac);transform:scale(.6);transition:transform 4s linear}
#cd{font-size:1.6rem;font-weight:600;min-height:3rem;border:2px dashed var(--bd);border-radius:12px;padding:.8rem;margin:.6rem 0}
#cc{display:flex;flex-wrap:wrap;gap:.5rem}ul{padding-left:1.2rem}footer{padding-bottom:2rem;color:var(--mut)}


textarea,input[type=text]{font:inherit;width:100%;box-sizing:border-box;min-height:44px;padding:.5rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);margin:.2rem 0 .5rem}
#ruler{position:fixed;left:0;right:0;height:3rem;top:40%;background:rgba(255,230,0,.2);border-top:2px solid var(--ac);border-bottom:2px solid var(--ac);pointer-events:none;z-index:4;display:none}
#en,#fd{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}#fd button{border-radius:50%;width:3rem;height:3rem;padding:0}
#tk{list-style:none;padding:0}#tk li{padding:.4rem 0}#tk input{width:1.4rem;height:1.4rem;vertical-align:middle}input[type=range]{width:100%}label{display:block}


input[type=time]{font:inherit;width:100%;box-sizing:border-box;min-height:44px;padding:.4rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg)}
#vs{list-style:none;padding:0}#vs li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border:1px solid var(--bd);border-radius:12px;padding:.5rem;margin:.4rem 0}#vs li.nw{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}.ic{font-size:2rem}
details details{background:var(--bg);margin:.6rem 0}

.c h2{font-size:1.2rem;margin:.2rem 0 .4rem;color:var(--fg)}
a.c{display:block;text-decoration:none;color:var(--fg)}a.c:hover{border-color:var(--ac)}
.badge{display:inline-block;font-size:.8rem;border:1px solid var(--ac);border-radius:99px;padding:0 .6rem;color:var(--ac)}
article h2{margin-top:2rem}article h3{margin:1.2rem 0 .2rem}article ol,article ul{padding-left:1.4rem}

/* keep anchored headings clear of the sticky header; do not stick the header on small screens */
html{scroll-padding-top:6rem}
@media (max-width:40rem){header{position:static}}

ol li{overflow-wrap:anywhere}

/* ---- read aloud: player, options, highlight ---- */
.ncsr{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
.ncpl{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--card);border-top:3px solid var(--ac);padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.ncpl[hidden]{display:none}
.ncpl .in{display:flex;flex-direction:column;gap:.45rem}
.ncst{margin:0;font-weight:600;overflow-wrap:anywhere}
.ncrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;align-items:center}
.ncrow button{min-width:0;padding-left:.25rem;padding-right:.25rem;overflow-wrap:anywhere;line-height:1.2}
.ncrow button[data-a=sec],.ncrow label{grid-column:span 2}
.ncrow label{display:flex;align-items:center;gap:.4rem;min-width:0}
.ncrow select{width:auto;flex:1;min-width:0}
@media (min-width:40rem){.ncrow{grid-template-columns:repeat(4,minmax(5rem,9rem)) minmax(9rem,12rem) minmax(11rem,1fr)}.ncrow button[data-a=sec],.ncrow label{grid-column:auto}}
@media (max-width:21rem){.ncrow{grid-template-columns:repeat(3,minmax(0,1fr))}.ncrow button[data-a=sec]{grid-column:span 2}.ncrow label{grid-column:span 3}}
/* very short and narrow screens (for example a phone held upright at high zoom): keep only the four essential controls so the page stays readable */
@media (max-width:40rem) and (max-height:32rem){.ncpl .ncst,.ncpl .ncbar,.ncrow label,.ncrow button[data-a=sec]{display:none}.ncrow{grid-template-columns:repeat(4,minmax(0,1fr))}.ncrow button{font-size:.9rem;padding-left:.1rem;padding-right:.1rem}.ncpl{padding-top:.3rem}}
.set{max-width:100%;min-width:0;box-sizing:border-box}
.set label{min-width:0}
.set select{min-width:0;max-width:100%}
.set #vc{width:100%}
.ncbar{height:6px;border-radius:3px;background:var(--bd);overflow:hidden}
.ncbar span{display:block;height:100%;width:0;background:var(--ac)}
.ncpl-on body{padding-bottom:var(--nch,11rem)}
.nc-speaking{background:rgba(255,230,0,.22);outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}
:root[data-theme="contrast"] .nc-speaking{background:#2b2b00;outline-width:3px}
.ncopt .ncgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin:.5rem 0}
.ncopt label.chk{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;padding:.3rem 0}
.ncopt label.chk input{flex:none;width:1.4rem;height:1.4rem;margin-top:.15rem}
.ncopt li{margin:.3rem 0}

/* ---- nav current page, footer links, link-buttons, forms ---- */
nav a[aria-current=page]{border-bottom:2px solid var(--ac);font-weight:600}
footer .fl a{display:inline-block;padding:.45rem .2rem}
a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;box-sizing:border-box;padding:.4rem 1rem;border-radius:10px;border:1px solid var(--ac);background:var(--ac);color:var(--bg);text-decoration:none;font-weight:600}
a.btn:hover{filter:brightness(1.1)}
.lead{font-size:1.2rem}
.acts{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.8rem 0}
.form label{margin:.8rem 0 .2rem;font-weight:600}
.form label .m{font-weight:400}
.form textarea{resize:vertical}

/* ---- resources ---- */
#rs-bar select,#rs-bar input[type=search]{width:100%}
.rs-ctl{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));margin:.6rem 0}
.rs-ctl label{display:block;font-weight:600;margin:0 0 .2rem}
.rs-l{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.rs-i{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:.8rem 1rem;margin:0;min-width:0}
.rs-i h4{margin:0 0 .3rem;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.rs-i .tg{display:flex;flex-wrap:wrap;gap:.3rem .4rem;margin:.1rem 0 .5rem;font-size:.88rem}
.rs-i .tg span{border:1px solid var(--bd);border-radius:999px;padding:.05rem .6rem;color:var(--mut)}
.rs-i p{margin:.3rem 0;overflow-wrap:anywhere}
.rs-i .st{font-size:.92rem;color:var(--mut)}
.rs-toc{list-style:none;margin:.3rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .9rem}
.rs-toc a{display:inline-block;padding:.5rem .1rem}
.rs-sec{scroll-margin-top:6rem}
.rs-sec>h2{margin-top:2.2rem}
.rs-grp h3,.rs-sub h3{margin:1.2rem 0 .2rem;font-size:1.2rem}
.rs-sub>p{margin:.3rem 0}
.rs-i[hidden],.rs-grp[hidden],.rs-sec[hidden],#rs-bar[hidden],#rs-none[hidden]{display:none!important}
.rs-guidebox{margin:1.5rem 0}
/* ---- end resources ---- */

/* ---- nesi ---- */
.nz-hero{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:center;margin:1rem 0}
.nz-art{justify-self:center;width:100%;max-width:23rem}
.nz-art img,.nz-fig img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--bd)}
.nz-fig{margin:1rem 0}
.nz-fig figcaption{color:var(--mut);font-size:.92rem;margin-top:.4rem}
.nz-meet{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.nz-meet .nz-fig{max-width:26rem;justify-self:center;width:100%;margin:0}
.nz-q{border-left:4px solid var(--ac);padding:.2rem 0 .2rem 1rem;margin:1rem 0;font-size:1.1rem}
.nz-voice{list-style:none;padding:0;margin:.6rem 0}
.nz-voice li{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:.6rem 1rem;margin:.5rem 0}
.nz-road .badge{margin-bottom:.3rem}
.nz-road h3{margin:.2rem 0}
.nz-four{grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr))}
@media (max-width:40rem){.nz-art{order:-1;max-width:15rem}}
.nz-teaser{display:flex;gap:1rem;align-items:center}
.nz-teaser img{width:5.5rem;height:auto;border-radius:12px;flex:none;border:1px solid var(--bd)}
/* ---- end nesi ---- */

/* ---- shared ---- */
ul.c,ol.c{padding-left:2.3rem}
.sr-only{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
/* ---- end shared ---- */
/* ---- field-borders ---- */
:root{--bf:#847fa8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bf:#6f67aa}}
:root[data-theme="dark"]{--bf:#6f67aa}
:root[data-theme="contrast"]{--bf:#fff}
input[type=search],input[type=text],input[type=time],input[type=date],input[type=number],input[type=email],input[type=url],select,textarea{border-color:var(--bf)}
/* ---- end field-borders ---- */

/* ---- overflow-safety ---- */
main h1,main h2,main h3,main h4,main p,main li,main a,main label,main summary,main td,main th{overflow-wrap:break-word}
.nt-tool :is(h1,h2,h3,h4,p,li,a,label,legend,summary,span,button,td,th){overflow-wrap:anywhere}
/* ---- end overflow-safety ---- */

/* ---- tools-box ---- */
.tl-guidebox{margin:1.5rem 0}
.tl-guidebox ul{padding-left:1.2rem}
.tl-guidebox li{margin:.4rem 0}
/* ---- end tools-box ---- */

/* ---- donate ---- */
.dn-hero{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:center;margin:1rem 0}
.dn-art{justify-self:center;width:100%;max-width:26rem}
.dn-art a{display:block;border-radius:18px;text-decoration:none}
.dn-art img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--bd);filter:drop-shadow(0 0 22px var(--ac))}
:root[data-theme="contrast"] .dn-art img{filter:none;border-color:var(--fg)}
.dn-road .badge{margin-bottom:.3rem}
.dn-road h3{margin:.2rem 0}
.dn-steps li{margin:.5rem 0}
.dn-cta{border:2px solid var(--ac);margin:1.2rem 0}
.dn-cta h2{margin-top:.2rem}
/* ---- end donate ---- */

/* ---- main nav (nine links, including Donate) ---- */
/* The nav takes the space between the site name and the Accessibility box and wraps inside it, so the box is not pushed onto a row of its own. The links are inline-blocks so the browser can balance the lines (no lone last link). */
header nav[aria-label="Main"]{display:block;flex:1 1 18rem;min-width:0;margin-right:-.8rem;text-wrap:balance}
header nav[aria-label="Main"] a{display:inline-block;margin-right:.8rem}
/* ---- end main nav ---- */