:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#171717;background:#f7f7f8;line-height:1.5;--ok:#0f6b3a;--bad:#a31515;--accent:#c45100;--ink:#171717;--muted:#666;--card:#fff}
*{box-sizing:border-box} body{margin:0} a{color:#074d94} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #0b63ce;outline-offset:3px}
.site-header{background:#151515;color:white;padding:1rem 1.25rem}.site-header a{color:white}.brand{font-weight:800;text-decoration:none}.header-row{max-width:1200px;margin:auto;display:flex;gap:1rem;align-items:center;justify-content:space-between}
main{max-width:1200px;margin:0 auto;padding:1.5rem}.hero{background:#fff;border:1px solid #ddd;border-radius:14px;padding:1.5rem;margin-bottom:1.25rem}.hero h1{margin-top:0}.meta{display:flex;flex-wrap:wrap;gap:.5rem}.pill{display:inline-block;border-radius:999px;padding:.25rem .65rem;background:#ececf1;font-size:.9rem}.pill.pass{background:#dff4e7;color:#075d31}.pill.fail{background:#fde2e2;color:#8f1111}.pill.level{background:#fff1dc;color:#744000}
.toolbar{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:.75rem;margin:1rem 0}.toolbar input,.toolbar select{padding:.7rem;border:1px solid #aaa;border-radius:8px;background:white}.criteria-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.criterion-card{background:white;border:1px solid #ddd;border-radius:12px;padding:1rem}.criterion-card h2{font-size:1.05rem;margin:.2rem 0}.card-actions{display:flex;gap:.5rem;margin-top:.8rem}.btn{display:inline-block;padding:.55rem .75rem;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid transparent}.btn-pass{background:#e4f5e9;color:#075d31;border-color:#9ed2ad}.btn-fail{background:#fde7e7;color:#921515;border-color:#e3abab}.btn-neutral{background:#eee;color:#222;border-color:#ccc}
.fixture{background:#fff;border:1px solid #ccc;border-left:6px solid #888;border-radius:10px;padding:1.25rem;margin:1rem 0;min-height:160px}.fixture.pass{border-left-color:var(--ok)}.fixture.fail{border-left-color:var(--bad)}.test-info{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.panel{background:#fff;border:1px solid #ddd;border-radius:10px;padding:1rem}.warning{background:#fff3cd;border:1px solid #e4c96b;border-radius:8px;padding:.8rem}.error{color:#9f1111;font-weight:700}.demo-svg{width:min(100%,420px);fill:#eee;stroke:#222;stroke-width:2}.fake-heading{font-size:1.4rem;font-weight:700;margin:.8rem 0}.fake-label{font-weight:700}.sequence{display:flex;flex-direction:column}.visual-reorder .step3{order:3}.visual-reorder .step2{order:2}.sensory-row{display:flex;gap:2rem;align-items:center}.round{border-radius:50%;width:50px;height:50px}.square{width:100px;height:40px}
@media (orientation:portrait){body[data-criterion="1.3.4"][data-variant="fail"] .orientation-content{display:none}body[data-criterion="1.3.4"][data-variant="fail"] .portrait-blocker{display:block}}@media (orientation:landscape){.portrait-blocker{display:none}}
.status-dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:.4rem}.red{background:#c00}.green{background:#078642}.contrast-good{color:#202020;background:#fff;padding:1rem}.contrast-bad{color:#aaa;background:#fff;padding:1rem}.contrast-bad a{color:#9db6cf}.resize-good{font-size:1rem}.resize-bad{height:72px;overflow:hidden;width:360px;border:1px solid #999;padding:6px}.image-text{max-width:100%;height:auto}.readable{max-width:65ch;line-height:1.6}.readable p+p{margin-top:1.5em}.unreadable{max-width:none;line-height:1.05;text-align:justify;letter-spacing:-.02em}.reflow-good{max-width:100%}.reflow-bad{width:900px;border:2px solid #888;padding:1rem}.control-good{border:2px solid #555;padding:.6rem;margin:.3rem}.control-bad{border:1px solid #eee;background:white;padding:.6rem;margin:.3rem}.spacing-good{min-height:8rem}.spacing-bad{height:3.2em;overflow:hidden}.tooltip-wrap{position:relative;display:inline-block;margin:2rem}.tooltip{position:absolute;left:0;top:110%;width:240px;padding:.7rem;background:#222;color:#fff;border-radius:6px;display:none;z-index:4}.tooltip-wrap:focus-within .good-tip,.tooltip-wrap:hover .good-tip{display:block}.tooltip-wrap button:focus + .bad-tip,.tooltip-wrap button:hover + .bad-tip{display:block}.bad-tip{pointer-events:none}.fake-button{display:inline-block;padding:.7rem 1rem;background:#ddd;border:1px solid #888;border-radius:6px;cursor:pointer}.trap-zone{padding:1rem;border:2px dashed #777}.trap-zone>*{margin:.3rem}.moving-banner{padding:.8rem;background:#ffe8bf;white-space:nowrap;animation:move 3s linear infinite alternate}.moving-banner.is-paused{animation-play-state:paused}@keyframes move{from{transform:translateX(0)}to{transform:translateX(45%)}}.safe-animation{padding:1rem;background:#e5f2ff;animation:soft 2s ease-in-out infinite alternate}@keyframes soft{from{opacity:.75}to{opacity:1}}.flash-simulation{border:2px solid #bf7b00;background:#fff5d7;padding:1rem}.motion-panel{margin-top:1rem;padding:2rem;background:#e8eef7;transition:transform .8s}.motion-panel.active{transform:translateX(260px) rotate(8deg)}@media (prefers-reduced-motion:reduce){.motion-panel.reduced-aware{transition:none!important;transform:none!important}}.skip-link{position:absolute;left:.5rem;top:-100px;background:#fff;color:#000;padding:.6rem;z-index:99}.skip-link:focus{top:.5rem}.repeat-nav{display:flex;gap:.7rem;flex-wrap:wrap;padding:1rem;background:#eee}.focus-demo{display:flex;gap:1rem}.no-focus :focus{outline:none!important}.breadcrumbs{display:flex;gap:.5rem;list-style:none;padding:0}.breadcrumbs li+li:before{content:'›';margin-right:.5rem}.focus-obscure-good,.focus-obscure-bad{position:relative;max-height:280px;overflow:auto;padding-bottom:70px}.focus-obscure-good button,.focus-obscure-bad button{display:block;margin:1rem 0}.sticky-obscurer{position:sticky;bottom:0;background:#222;color:#fff;padding:1rem}.focus-obscure-good{scroll-padding-bottom:80px}.focus-obscure-bad{padding-bottom:0}.weak-focus button:focus,.weak-focus a:focus{outline:1px solid #bbb;outline-offset:0}.map-mock{width:320px;height:150px;background:linear-gradient(135deg,#dcebd5,#dbe8f6);border:1px solid #777;display:grid;place-items:center}.targets{display:flex;gap:10px}.targets button{display:grid;place-items:center}.targets.enhanced button{width:44px;height:44px}.targets.tiny button{width:20px;height:20px;padding:0}.targets.minimum button{width:24px;height:24px;padding:0}.targets.crowded{gap:1px}.targets.crowded button{width:16px;height:16px;padding:0;font-size:10px}.drag-demo{display:flex;gap:2rem;align-items:center}.drag-item,.drop-zone{padding:1rem;border:2px solid #777}.drag-item{cursor:grab}.drop-zone{min-width:120px;min-height:70px;border-style:dashed}.mock-pages{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mock-pages section{border:1px solid #aaa;padding:1rem}.mock-pages nav{display:flex;gap:.6rem;flex-wrap:wrap}.error-border{border:3px solid #c00}.fake-slider{width:180px;padding:.3rem;border:1px solid #aaa;margin-top:.5rem}.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c00}.media-pair{display:flex;gap:1rem;align-items:center}.sign-language,.missing{min-width:180px;min-height:180px;border:2px solid #777;display:grid;place-items:center;text-align:center;font-size:2rem}.missing{font-size:1rem;background:#eee}.captions-live,.transcript{padding:1rem;background:#111;color:#fff;margin-top:.5rem}.scenario{padding:1rem;border-radius:8px}.scenario.good{background:#e9f7ee}.scenario.bad{background:#fdeaea}
footer{max-width:1200px;margin:2rem auto;padding:1rem;color:#555;border-top:1px solid #ddd}.source-link{font-size:.9rem}.hidden{display:none!important}@media(max-width:700px){.toolbar{grid-template-columns:1fr}.test-info,.mock-pages{grid-template-columns:1fr}.header-row{align-items:flex-start;flex-direction:column}}