:root { color-scheme: light; --bg:#ffffff; --fg:#14142b; --muted:#555570; --line:#d9d9e6; --accent:#6d3fe0; --hi:#fde68a; --high:#b91c1c; --med:#92400e; --card:#f7f7fb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { margin: 0; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.brand img { border-radius:10px; }
.hero { display:block; width:100%; height:auto; border-radius:10px; margin:0 0 16px; border:1px solid var(--line); box-shadow:0 4px 18px rgba(20,20,43,.12); } h2 { margin: 28px 0 8px; font-size: 1.1rem; }
.lead { color: var(--muted); margin-top: 0; }
.notice { border:1px solid var(--line); background:var(--card); border-radius:8px; padding:4px 14px; margin:16px 0; font-size:.92rem; }
label { display:block; font-weight:600; margin:16px 0 6px; }
textarea { width:100%; font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:10px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
button { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button#sample, button#clear, button.copy { background:transparent; color:var(--accent); }
a { color: var(--accent); text-underline-offset: 2px; }
button:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#error { color:var(--high); min-height:1.2em; }
pre#doc { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; font:14px/1.5 ui-monospace, Menlo, monospace; }
mark.hit { background:var(--hi); color:inherit; border-radius:3px; padding:0 1px; }
.card { border:1px solid var(--line); border-left-width:5px; border-radius:8px; padding:8px 14px; margin:10px 0; background:var(--card); }
.card.high { border-left-color:var(--high); } .card.medium { border-left-color:var(--med); }
.card h3 { margin:6px 0; font-size:1rem; } .sev { margin-left:8px; font-size:.8rem; font-weight:600; color:var(--muted); }
blockquote { margin:6px 0; padding-left:10px; border-left:3px solid var(--line); overflow-wrap:anywhere; }
.sug { font-weight:600; }
.caution { color:var(--med); font-size:.9rem; border-left:3px solid var(--med); padding-left:8px; }
.small { color:var(--muted); font-size:.85rem; }
@media (max-width: 480px) { main { padding: 16px; } }