*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}:root{--color-text:#111;--color-muted:#666;--color-border:#ddd;--color-accent:#005ea5;--color-accent-hover:#003d73;--color-error:#b91c1c;--font:system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, "Cascadia Code", monospace}body{font-family:var(--font);color:var(--color-text);max-width:740px;margin:0 auto;padding:3rem 1.5rem 4rem;line-height:1.6}header{margin-bottom:2.5rem}h1{letter-spacing:-.3px;margin:0 0 .4rem;font-size:1.75rem;font-weight:700}h1 a{color:inherit;text-decoration:none}h1 a:hover{text-decoration:underline}.strapline{color:var(--color-muted);margin:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#error-summary{border:2px solid var(--color-error);margin-bottom:1.5rem;padding:1rem 1.25rem}#error-summary:focus{outline:3px solid var(--color-accent);outline-offset:2px}#error-summary h2{margin:0 0 .5rem;font-size:1rem}#error-summary ul{margin:0;padding-left:1.25rem}#error-summary a{color:var(--color-error)}form{flex-direction:column;gap:.4rem;margin-bottom:2.5rem;display:flex}form h2{margin:0;font-size:1.1rem}label{font-weight:600}.hint{color:var(--color-muted);margin:0;font-size:.85rem}.error-message{color:var(--color-error);margin:0;font-size:.875rem;font-weight:600}textarea{width:100%;font-size:1rem;font-family:var(--font-mono);color:var(--color-text);resize:none;field-sizing:content;border:1.5px solid #aaa;border-radius:4px;min-height:2.5rem;margin-top:.2rem;padding:.55rem .7rem}textarea[aria-invalid=true]{border-color:var(--color-error);border-left-width:4px}textarea:focus{outline:3px solid var(--color-accent);outline-offset:1px;border-color:#0000}button[type=submit]{font-size:.95rem;font-weight:600;font-family:var(--font);background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:4px;align-self:flex-start;margin-top:.4rem;padding:.55rem 1.1rem}button[type=submit]:hover{background:var(--color-accent-hover)}button[type=submit]:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.explainer{margin-bottom:2.5rem}.explainer h2{margin:0 0 1rem;font-size:1.1rem;font-weight:700}.example-label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin:0 0 .3rem;font-size:.75rem;font-weight:600}.example-before,.example-after{border:1px solid var(--color-border);padding:.75rem 1rem}.example-before{background:#fff8f8;border-color:#f5c0c0}.example-after{background:#f4faf4;border-color:#aadaaa}.example-arrow{color:var(--color-muted);text-align:center;margin:0;padding:.4rem 0;font-size:1.25rem}.code-example{margin:0;overflow-x:auto}.code-example code{font-family:var(--font-mono);color:var(--color-text);word-break:break-all;font-size:.78rem}#result-area{border-left:4px solid var(--color-accent);background:#f0f5ff;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:2rem;padding:1rem 1.25rem;display:flex}.result-heading{text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);margin:0 0 .5rem;font-size:.8rem;font-weight:600}#result{width:100%;min-width:0}#result a{color:var(--color-accent);overflow-wrap:break-word;font-size:1.1rem;font-weight:700;display:block}#result a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}#copy-button{font-size:.85rem;font-family:var(--font);color:var(--color-text);cursor:pointer;background:0 0;border:1.5px solid #aaa;border-radius:4px;align-items:center;gap:.4rem;margin-top:.75rem;padding:.4rem .9rem;display:inline-flex}#copy-button:hover{border-color:var(--color-text)}#copy-button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}#error p{color:var(--color-error);margin:0;font-size:.95rem}details{color:var(--color-muted);margin-top:1rem;font-size:.875rem}summary{cursor:pointer;color:var(--color-text);font-weight:600}summary:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}details ol{margin:.75rem 0 0;padding-left:1.5rem;line-height:1.7}details code{font-family:var(--font-mono);color:var(--color-text);font-size:.8rem}footer{border-top:1px solid var(--color-border);color:var(--color-muted);margin-top:3rem;padding-top:1rem;font-size:.85rem}footer p{margin:0}footer a{color:var(--color-accent)}footer a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}