/* e3bundle browser demo. System fonts only: no third-party requests. */
:root {
  --night: #0f1411; --night-2: #141b16; --line-dark: #26302a;
  --ground: #f5f6f0; --surface: #ffffff; --line: #dde1d6;
  --ink: #17201a; --ink-2: #3d4740; --ink-3: #56605a; --on-dark: #e9ede4; --on-dark-2: #c3cbc2;
  --brass: #c9a24a; --brass-text: #8a6a1f; --brass-light: #d8b866;
  --leaf: #2f6a22; --ok-bg: #e3efdc; --bad: #9a2b22; --bad-bg: #f8e2df; --warn: #8a5a00; --warn-bg: #f7ecd6;
  --verified: #3e8a2c; --failed: #b2382d;
  --display: Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--body); }
a { color: var(--leaf); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
code, pre, .mono { font-family: var(--mono); }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.dark { background: var(--night); color: var(--on-dark); }
.topbar { border-bottom: 1px solid var(--line-dark); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--brass-light); text-decoration: none; font: 700 18px var(--display); letter-spacing: .08em; }
.brand img { width: 48px; height: 48px; border-radius: 6px; display: block; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.topbar nav a { color: var(--on-dark); text-decoration: none; padding: 10px 12px; border-bottom: 2px solid transparent; font-weight: 500; }
.topbar nav a[aria-current="page"] { color: var(--brass-light); border-bottom-color: var(--brass); }
.topbar nav a.gh { border: 1px solid var(--brass); border-radius: 6px; color: var(--brass-light); padding: 8px 14px; margin-left: 6px; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; padding-block: 44px 36px; }
.hero .text { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hero img { width: 190px; height: 190px; border-radius: 12px; margin: 0 auto; }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--brass); margin: 0; }
h1 { margin: 0; font: 700 clamp(30px, 4.5vw, 46px)/1.1 var(--display); color: #fff; text-wrap: balance; }
h2 { margin: 0; font: 700 clamp(22px, 3vw, 28px)/1.2 var(--display); text-wrap: balance; }
h3 { margin: 0; font-size: 18px; }
.lede { margin: 0; font-size: 18px; color: var(--on-dark-2); max-width: 38em; }
.small-dark { margin: 0; font-size: 14px; color: #a9b3a8; }
main.wrap { display: flex; flex-direction: column; gap: 22px; padding-block: 32px 64px; }
.notice { background: #fbf4e4; border: 1px solid #e6cf9c; border-radius: 8px; padding: 14px 18px; color: #4d3a10; }
.alert { background: #fdf4f3; border: 1px solid #e7b7b1; border-radius: 8px; padding: 14px 18px; color: #7a1f18; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid #c6ccc0; background: var(--surface); color: var(--ink); font: 500 14px var(--body); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn { min-height: 48px; padding: 0 22px; border-radius: 6px; border: 0; background: var(--leaf); color: #fff; font: 600 15px var(--body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid #c6ccc0; }
.btn.brass { background: var(--brass); color: var(--night); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
label { font-weight: 600; font-size: 14px; }
textarea, input[type="text"] { width: 100%; padding: 12px; border: 1px solid #c6ccc0; border-radius: 6px; background: var(--ground); color: var(--ink); font: 14px/1.6 var(--mono); }
textarea { resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.terminal { background: var(--night); color: var(--on-dark); border-radius: 8px; padding: 14px; font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-all; margin: 0; }
.result { background: var(--night); color: var(--on-dark); border-radius: 12px; padding: 24px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.status { font: 500 30px var(--mono); padding: 2px 14px; border-radius: 6px; color: #fff; background: #4a564d; }
.status.VERIFIED { background: var(--verified); }
.status.FAILED { background: var(--failed); }
.exit { font: 17px var(--mono); color: #a9b3a8; }
.findings { margin: 0; padding: 0; list-style: none; font: 14px/1.6 var(--mono); flex: 1 1 420px; min-width: 0; }
.findings .none { color: #9fd283; }
.findings .bad { color: #f0968c; }
.provenance { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; color: #a9b3a8; width: 100%; }
.provenance dt { color: var(--brass-light); }
.provenance dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.phase-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.num { font-family: var(--display); color: var(--brass-text); margin-right: 10px; }
.pill { font: 12px var(--mono); padding: 2px 10px; border-radius: 999px; background: #eceee6; color: var(--ink-3); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--leaf); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.table-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 14px; }
th { text-align: left; background: #eceee6; color: var(--ink-3); font-size: 12px; padding: 10px 12px; }
td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
td.hash { font: 12px var(--mono); word-break: break-all; }
td.hash.bad { color: var(--bad); }
.canon { background: #eceee6; border-radius: 6px; padding: 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-all; margin: 0; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sig { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sig.bad { border-color: #e7b7b1; background: #fdf4f3; }
.yes { color: var(--leaf); font-weight: 600; }
.no { color: var(--bad); font-weight: 600; }
.maybe { color: var(--warn); font-weight: 600; }
.progress { list-style: none; margin: 0; padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.progress li { padding: 5px 12px; border-radius: 999px; border: 1px solid #4a564d; font-size: 14px; }
.progress li.done { background: var(--brass-light); border-color: var(--brass-light); color: var(--night); }
footer.dark .wrap { padding-block: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: #a9b3a8; }
footer.dark a { color: var(--brass-light); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* Guided journey: problem, how it works, meaning of the result, next steps. */
.value { margin: 0; font-size: 16px; color: var(--on-dark); max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.ghost { background: transparent; color: var(--brass-light); border: 1px solid var(--brass); }
.kicker { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--brass-text); }
.body-2 { margin: 0; font-size: 15px; color: var(--ink-2); }
.ticks, .crosses { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); }
.ticks li::before { content: "✓"; color: var(--leaf); font-weight: 700; margin-right: 8px; }
.crosses li::before { content: "✕"; color: var(--bad); font-weight: 700; margin-right: 8px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); }
.steps li::marker { color: var(--brass-text); font-family: var(--display); font-weight: 700; }
.flow { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 13px var(--mono); }
.flow span { background: #eceee6; border-radius: 6px; padding: 4px 10px; }
.flow span + span::before { content: "→"; color: var(--brass-text); margin: 0 8px 0 -2px; }
.scenario-help { margin: 0; padding: 10px 14px; border-left: 3px solid var(--brass); background: #f8f5ea; font-size: 15px; color: var(--ink-2); border-radius: 0 6px 6px 0; }
.result-main { display: flex; flex-direction: column; gap: 8px; flex: 1 1 300px; min-width: 0; }
.result-explain { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; min-width: 0; }
.result-explain .eyebrow { margin-top: 6px; }
.summary { margin: 0; padding: 0; list-style: none; font: 14px/1.7 var(--mono); color: var(--on-dark); }
.summary .ok::before { content: "✓ "; color: #9fd283; }
.summary .bad::before { content: "✕ "; color: #f0968c; }
.summary .warn::before { content: "! "; color: var(--brass-light); }
.meaning { margin: 0; padding-left: 18px; font-size: 15px; color: var(--on-dark-2); display: flex; flex-direction: column; gap: 4px; }
.next { margin: 0; font-size: 15px; color: var(--on-dark); }
.next a { color: var(--brass-light); }
.trace { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 15px; }
.trace dt { color: var(--brass-text); font-weight: 600; }
.trace dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.closing { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.closing-text { margin: 0; flex: 1 1 480px; font: 600 19px/1.45 var(--display); color: var(--ink); }
@media (max-width: 520px) { .trace { grid-template-columns: 1fr; gap: 2px; } .trace dd { margin-bottom: 8px; } }
#mhash { overflow-wrap: anywhere; word-break: break-all; }
.result { align-items: flex-start; }
.result-explain .findings { flex: none; }
/* Classes replacing inline styles, so the CSP can forbid them (style-src 'self'). */
.field.end { justify-content: flex-end; }
.field.narrow { flex: 0 1 260px; }
.row.start { justify-content: flex-start; align-items: flex-end; }
.status-line { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hash-line { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.trust-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.trust-item { display: flex; gap: 10px; flex-wrap: wrap; }
.signer-col { min-width: 160px; }
.sig-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mt0 { margin-top: 0; }
.muted-p { margin: 0; color: var(--ink-2); }
.muted-p.grow { flex: 1 1 480px; }
.phases { display: flex; flex-direction: column; gap: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { flex: 1 1 180px; }
.status.ERROR { background: #6b5a1f; }
/* The hidden attribute must win over component display rules (e.g. .result is flex). */
[hidden] { display: none !important; }
/* Guided / advanced switch. */
.mode-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mode { display: inline-flex; border: 1px solid #c6ccc0; border-radius: 8px; overflow: hidden; background: var(--surface); }
.mode-btn { min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font: 600 14px var(--body); cursor: pointer; }
.mode-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mode-btn:disabled { opacity: .55; cursor: not-allowed; }
.phases h2 .hint { font: 400 14px var(--body); margin-left: 8px; }
/* Local bundle page. */
.plan { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; max-height: 360px; overflow: auto; }
.plan li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.plan .mono { overflow-wrap: anywhere; }
.plan-problem { margin: 0; font-size: 15px; color: var(--ink-2); }
.plan-problem.bad { color: var(--bad); font-weight: 600; }
.trust-mode { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.trust-mode legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.radio { font-weight: 400; display: flex; gap: 8px; align-items: center; min-height: 32px; }
.key-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.key-list li { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.key-list label { font-weight: 400; overflow-wrap: anywhere; }
.error-text { color: var(--bad); min-height: 1em; }
progress { width: 100%; height: 10px; accent-color: var(--leaf); }
input[type="file"] { min-height: 44px; font: 14px var(--body); max-width: 100%; }
input[type="number"] { min-height: 44px; padding: 0 10px; border: 1px solid #c6ccc0; border-radius: 6px; font: 15px var(--mono); width: 120px; }