:root {
  color-scheme: light dark;
  --paper: #f4f1ea;
  --sheet: #fbf9f4;
  --ink: #16140f;
  --muted: #5f5a4f;
  --line: #d8d2c4;
  --link: #a3121f;
  --code-bg: #16140f;
  --code-ink: #ece7db;
  --code-muted: #8d8678;
  --code-line: #2c2922;
  --critical: #c1121f;
  --high: #c2410c;
  --medium: #8a6100;
  --low: #52606d;
  --clean: #1b7a4b;
  --row: 22px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110e;
    --sheet: #1b1915;
    --code-bg: #211e18;
    --code-line: #3a352c;
    --ink: #ece7db;
    --muted: #a59e8f;
    --line: #34302a;
    --link: #ff8a80;
    --critical: #ff6b6b;
    --high: #ff922b;
    --medium: #f2c14e;
    --low: #a3b1bf;
    --clean: #51cf66;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: var(--link); text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.label { margin: 0; font: 600 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px max(16px, calc((100% - 1160px) / 2)); background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { font: 700 16px/1.2 var(--mono); color: var(--ink); text-decoration: none; }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--muted); font-size: 15px; text-decoration: none; }
.top nav a:hover { color: var(--ink); }

.hero { max-width: 1160px; margin: 0 auto; padding: 72px 16px 40px; }
.hero h1 { max-width: 15em; margin: 14px 0 18px; font-size: clamp(2.5rem, 6.4vw, 4.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.lead { max-width: 40em; margin: 0; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.command { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--code-bg); color: var(--code-ink); border-radius: 6px; font-size: 15px; }
.command .copy { color: var(--code-ink); border-color: var(--code-muted); }
.plain { font-weight: 600; }

.scanner { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.scanner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { padding: 6px 12px; background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 15px; }
.tabs button:hover { color: var(--ink); border-color: var(--muted); }
.tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.private { margin: 0; color: var(--muted); font-size: 14px; }

.panes { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); height: 600px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--sheet); }
.editor { display: flex; flex-direction: column; min-height: 0; background: var(--code-bg); color: var(--code-ink); }
.file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font: 13px/1.5 var(--mono); }
.ghost { padding: 0; background: none; border: 0; color: var(--code-muted); text-decoration: underline; text-underline-offset: 3px; }
.ghost:hover { color: var(--code-ink); }
.code { position: relative; display: flex; flex: 1; min-height: 0; overflow: hidden; }
#gutter { flex: none; width: 44px; margin: 0; padding: 12px 10px 12px 0; overflow: hidden; text-align: right; color: var(--code-muted); font-size: 14px; line-height: var(--row); user-select: none; }
.field { position: relative; flex: 1; min-width: 0; }
#marks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mark { position: absolute; left: 0; right: 0; top: calc(12px + (var(--n) - 1) * var(--row)); height: var(--row); background: color-mix(in srgb, var(--tone) 28%, transparent); box-shadow: inset 3px 0 var(--tone); }
.mark.critical { --tone: #ff5252; }
.mark.high { --tone: #ff922b; }
.mark.medium { --tone: #f2c14e; }
.mark.low { --tone: #8fa3b5; }
#source { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px 14px 12px 8px; background: transparent; border: 0; outline: 0; resize: none; overflow: auto; color: inherit; caret-color: #fff; font: 14px/var(--row) var(--mono); tab-size: 2; white-space: pre; }
.run { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--code-line); }
#scan { flex: none; padding: 9px 16px; background: #f4f1ea; border: 0; border-radius: 6px; color: #16140f; font-weight: 700; font-size: 15px; }
#scan:hover { background: #fff; }
#scan:disabled { opacity: .6; cursor: progress; }
#status { margin: 0; min-width: 0; color: var(--code-muted); font-size: 13px; line-height: 1.35; }

.report { min-height: 0; overflow: auto; padding: 22px; }
.report.stale .verdict, .report.stale .finding { opacity: .45; }
.verdict { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.verdict .kind { grid-column: 1 / -1; }
.verdict h2 { margin: 6px 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.verdict p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.stamp { align-self: center; padding: 4px 10px; border: 3px double currentColor; border-radius: 4px; font: 800 15px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.stamp.fails { color: var(--critical); }
.stamp.passes { color: var(--medium); }
.stamp.clean { color: var(--clean); }
.finding { padding: 14px 0; border-bottom: 1px solid var(--line); }
.finding:last-child { border-bottom: 0; }
.finding header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 13px/1.4 var(--mono); }
.finding header a { color: var(--ink); }
.finding p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.finding details { margin-top: 6px; font-size: 14px; color: var(--muted); }
.finding summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.finding details p { margin-top: 4px; }
.jump { margin-left: auto; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jump:hover { color: var(--ink); }
.tag { display: inline-block; padding: 1px 7px; border: 1px solid currentColor; border-radius: 4px; font: 700 12px/1.5 var(--mono); }
.tag.critical { color: var(--critical); }
.tag.high { color: var(--high); }
.tag.medium { color: var(--medium); }
.tag.low { color: var(--low); }
.message { color: var(--muted); }

.section { max-width: 1160px; margin: 0 auto; padding: 72px 16px 0; }
.section h2 { margin: 0 0 22px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; }
.intro { max-width: 44em; margin: 18px 0 0; color: var(--muted); }
.note { max-width: 44em; margin: 18px 0 0; color: var(--muted); font-size: 15px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 12px; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step, decimal-leading-zero); font: 700 14px/1 var(--mono); color: var(--muted); }
.steps h3 { margin: 10px 0 6px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--muted); }
.prompt { margin: 32px 0 0; padding: 20px 22px; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; }
.prompt figcaption { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--code-muted); }
.prompt pre { margin: 6px 0 18px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt pre:last-child { margin-bottom: 0; }
.prompt mark { padding: 1px 3px; background: rgba(255, 82, 82, .26); color: #ffc9c9; border-radius: 3px; }
.prompt mark.safe { background: rgba(242, 193, 78, .2); color: #ffe08a; }
.after { margin: 14px 0 0; color: var(--muted); }

.rules { width: 100%; border-collapse: collapse; }
.rules th, .rules td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rules thead th { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rules tbody th code { font-size: 15px; font-weight: 700; }
.rules td strong { display: block; line-height: 1.35; }
.rules td span:not(.tag) { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; }
.rules tr:target { background: color-mix(in srgb, var(--link) 12%, transparent); }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tools li { padding: 6px 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; font-size: 15px; }

.numbers-wrap { margin-top: 18px; overflow-x: auto; }
.numbers { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; }
.numbers th, .numbers td { padding: 10px 0 10px 14px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.numbers th:first-child { padding-left: 0; text-align: left; font-weight: 600; }
.numbers thead th { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usage article { position: relative; min-width: 0; padding: 16px 18px; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; }
.usage .wide { grid-column: 1 / -1; }
.usage h3 { margin: 0 0 10px; font: 600 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--code-muted); }
.usage pre { margin: 0; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.usage .copy { position: absolute; top: 12px; right: 12px; color: var(--code-ink); border-color: var(--code-muted); background: var(--code-bg); }

.limits { max-width: 44em; margin: 0; padding-left: 20px; }
.limits li { margin-top: 6px; }

.wallets { display: grid; gap: 10px; margin-top: 22px; }
.wallet { min-width: 0; padding: 12px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; }
.wallet p { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.wallet div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet code { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.copy { flex: none; padding: 3px 10px; background: transparent; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: 600 13px/1.5 var(--sans); }
.copy:hover { border-color: currentColor; }

.bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; max-width: 1160px; margin: 72px auto 0; padding: 20px 16px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.bottom a { color: inherit; }

@media (max-width: 860px) {
  :root { --row: 24px; }
  html { scroll-padding-top: 60px; }
  .top nav a:not([href="#support"], [href*="github.com"]) { display: none; }
  .top nav { gap: 16px; }
  .hero { padding-top: 44px; }
  .panes { display: block; height: auto; }
  .code { height: 340px; flex: none; }
  #source, #gutter { font-size: 16px; }
  #gutter { width: 40px; padding-right: 8px; }
  .report { overflow: visible; padding: 18px 16px; }
  .run { flex-wrap: wrap; }
  .copy { min-height: 36px; padding-inline: 14px; }
  .steps, .usage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rules, .rules tbody, .rules tr, .rules th, .rules td { display: block; }
  .rules thead { display: none; }
  .rules tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rules th, .rules td { padding: 0; border: 0; }
  .rules tbody th, .rules tbody td:nth-child(2) { display: inline-block; margin-right: 8px; }
  .rules td:last-child { margin-top: 6px; }
  .section { padding-top: 56px; }
}