:root { --fg:#111; --muted:#555; --bg:#fff; --line:#e2e2e2; --accent:#0b6b4f; }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); }
main { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
h1 { font-size: 1.9rem; line-height:1.25; margin:0 0 .25rem; letter-spacing:-.02em; }
h2 { font-size: 1.15rem; margin:2.5rem 0 .5rem; }
p, li { color:var(--fg); }
.muted { color:var(--muted); }
.tag { display:inline-block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; margin-bottom:1rem; }
hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
footer { color:var(--muted); font-size:.9rem; margin-top:3rem; }
a { color:var(--accent); }
code { background:#f6f6f6; padding:.1rem .3rem; border-radius:4px; font-size:.9em; }
table { border-collapse: collapse; width:100%; font-size:.95rem; }
td, th { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--line); }

/* buttons */
.button { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:.6rem .95rem; border-radius:8px; font-weight:600; margin:.2rem .4rem .2rem 0; }
.button.ghost { background:#fff; color:var(--accent); border:1px solid var(--line); font-weight:500; }
.button:hover { filter:brightness(.97); }
ul, ol { padding-left:1.15rem; }

/* Free scanner */
#scanform { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:1.5rem 0 .5rem; }
#scanform label { width:100%; font-size:.9rem; color:var(--muted); }
#scanform input { flex:1 1 22rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; font:inherit; }
.issue { border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; margin:.9rem 0; background:#fff; }
.issue h3 { margin:0 0 .35rem; font-size:1rem; }
.issue code { display:block; background:#f6f7f7; padding:.5rem; border-radius:6px; margin-top:.4rem; white-space:pre-wrap; word-break:break-word; font-size:.85rem; }
.sev { text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; padding:.1rem .4rem; border-radius:999px; border:1px solid var(--line); margin-right:.35rem; }
.sev.err { background:#fcf0f1; color:#8a1f1f; border-color:#e6b8b8; }
.sev.warn { background:#fdf6e3; color:#7a5a00; border-color:#e6d3a3; }

/* Screenshots */
img.shot { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:10px; margin:1rem 0 .75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }

/* The statement generator */
.gen { max-width:44rem; }
.gen input[type=text], .gen input[type=url], .gen input[type=email], .gen input[type=date], .gen select, .gen textarea {
	width:100%; padding:.55rem .6rem; border:1px solid var(--line); border-radius:8px; font:inherit; }
.gen fieldset { border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; }
.gen legend { font-size:.9rem; color:var(--muted); padding:0 .3rem; }
.gen label.check { display:flex; gap:.5rem; align-items:flex-start; font-size:.95rem; }
.gen label.check input { margin-top:.25rem; }
.statement { width:100%; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:.9rem; border:1px solid var(--line); border-radius:10px; }