/* a11y widget: text size and reduce motion. The first three rules are the page-wide hooks the script sets on <html>. */
html[data-text=large] body{font-size:22px}
html[data-text=larger] body{font-size:26px}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.w-a11y{display:grid;gap:12px}
.w-a11y-win{border:3px solid var(--ink);border-radius:8px;background:var(--paper-hi);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.w-a11y-bar{padding:6px 10px;text-align:center;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 2px,var(--paper-hi) 2px 5px)}
.w-a11y-bar span{padding:0 10px;background:var(--paper-hi);font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.w-a11y-body{padding:14px;display:grid;gap:14px}
.w-a11y-controls{display:grid;gap:10px}
.w-a11y-sizes{display:flex;flex-wrap:wrap;gap:8px}
.w-a11y-size{flex:1 1 90px;display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;padding:4px 8px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:10px;cursor:pointer;transition:transform var(--t-fast) var(--ease-snap)}
.w-a11y-size b{font-family:var(--serif);line-height:1}
.w-a11y-size span{font:600 13px var(--sans)}
.w-a11y-size[aria-pressed=true]{background:var(--ink);color:var(--paper-hi);box-shadow:3px 3px 0 var(--warm)}
.w-a11y-size:active{transform:scale(.96)}
.w-a11y-motion{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;text-align:left;font:600 16px var(--sans);color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:10px;cursor:pointer}
.w-a11y-knob{position:relative;flex:none;width:46px;height:26px;border:3px solid var(--ink);border-radius:14px;background:var(--paper)}
.w-a11y-knob::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform var(--t-base) var(--ease-lock)}
.w-a11y-motion[aria-checked=true] .w-a11y-knob{background:var(--go)}
.w-a11y-motion[aria-checked=true] .w-a11y-knob::after{transform:translateX(20px)}
.w-a11y-sample{margin:0;padding:12px;background:var(--card);border:2px dashed var(--ink);border-radius:10px;font-family:var(--serif)}
.w-a11y-note{margin:0;font:400 14px/1.4 var(--sans);color:var(--ink2)}
.w-a11y-demo{height:36px}
.w-a11y-chip{display:inline-block;padding:4px 12px;font:700 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-hi);background:var(--go);border:2px solid var(--ink);border-radius:6px}
@media (prefers-reduced-motion:no-preference){.w-a11y-chip.go{animation:w-a11y-slide var(--t-base) var(--ease)}}
@keyframes w-a11y-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.w-a11y-size,.w-a11y-knob::after{transition:none}}