@font-face{font-family:"Nazo Latin";src:url("fonts/SourceSans3VF-Upright.woff2") format("woff2");font-weight:200 900;font-display:block}
:root{--background:#eee;--surface:#fafafa;--ink:#333;--muted:#666;--border:#bbb;--accent:#333;--on-accent:#fff;--radius:3px;font-family:"Nazo Latin","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);background:var(--background);font-synthesis:none}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}body,dialog,body *{user-select:none;-webkit-user-select:none}input,textarea{user-select:text;-webkit-user-select:text}
main{max-width:680px;margin:auto;padding:48px 24px;text-align:center}h1{font-size:28px;font-weight:400}header p{white-space:pre-line;line-height:1.8}
button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:44px;padding:10px 20px}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.quiet{display:block;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;margin:20px auto 0;color:var(--muted)}
dialog{width:400px;max-width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;padding:40px 24px 28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:center}dialog::backdrop{background:#0006}dialog h2{font-size:24px;line-height:1.5;font-weight:400;margin:0 0 24px}dialog p{white-space:pre-line;line-height:1.8;margin:0 0 24px}
.close{position:absolute;right:4px;top:4px;width:36px;height:36px;min-height:36px;border:0;background:none;padding:8px}.close svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none}
.primary{display:block;width:180px;max-width:100%;margin:24px auto 16px;padding:12px;border-radius:var(--radius);text-decoration:none;background:var(--accent);color:var(--on-accent);min-height:48px}
#explain{margin:0 auto}.clear-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px;font-size:12px}.clear-links a{color:var(--muted);text-underline-offset:3px}
#explanation-body{text-align:left}#clear-result{margin-bottom:24px}
@media(max-width:500px){main{padding-top:32px}}