:root { --ink:#17211d; --paper:#f3f0e8; --card:#fffdf7; --line:#c9c5b9; --green:#17634a; --lime:#d8ef74; --amber:#b56b18; --red:#a94438; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 Arial, Helvetica, sans-serif; }
.site-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.privacy { position:relative; color:#57615c; font-size:13px; }
.privacy summary { cursor:pointer; list-style:none; border-bottom:1px dotted currentColor; }.privacy summary::-webkit-details-marker { display:none; }
.privacy summary::after { content:' +'; margin-left:4px; }.privacy[open] summary::after { content:' −'; }
.privacy-card { position:absolute; z-index:4; top:30px; right:0; width:min(410px, calc(100vw - 40px)); padding:18px; border:1px solid var(--ink); background:var(--card); box-shadow:5px 5px 0 var(--ink); color:#4f5954; font-size:13px; }
.privacy-card strong { display:block; color:var(--ink); }.privacy-card p { margin:9px 0; }.privacy-card a { color:var(--green); font-weight:700; }
main { width:min(1180px, calc(100% - 40px)); margin:auto; }
.hero { padding:clamp(70px,10vw,130px) 0 72px; max-width:920px; }
.eyebrow,.step { margin:0 0 16px; color:var(--green); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; }
h1 { margin:0; font:700 clamp(52px,8vw,104px)/.92 Georgia, serif; letter-spacing:-.055em; }
.lede { max-width:700px; margin:34px 0 0; font-size:19px; color:#4e5953; }
.workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); border:1px solid var(--ink); background:var(--card); box-shadow:10px 10px 0 var(--ink); }
.input-panel,.method-panel { padding:clamp(24px,4vw,48px); }
.method-panel { display:flex; flex-direction:column; border-left:1px solid var(--ink); background:#e7e3d8; }
.panel-heading,.results-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
h2 { margin:0; font:700 clamp(28px,4vw,45px)/1.05 Georgia, serif; letter-spacing:-.03em; }
.text-button { border:0; border-bottom:1px solid; padding:2px 0; background:none; color:var(--green); cursor:pointer; }
.sample-control { display:grid; justify-items:end; gap:5px; color:#68726c; font-size:11px; text-align:right; }
textarea { width:100%; min-height:280px; resize:vertical; margin-top:30px; padding:22px; border:1px solid #858b85; border-radius:0; background:#faf9f3; color:var(--ink); font:14px/1.7 Consolas, monospace; }
textarea:focus, input:focus, select:focus, button:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }
.input-footer { display:flex; justify-content:space-between; padding:8px 0 20px; color:#6e7771; font-size:12px; }
.settings { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.settings summary { cursor:pointer; font-weight:700; }
.settings-intro { margin-top:18px; padding:14px 16px; border-left:3px solid var(--green); background:#eef0e5; color:#4f5954; font-size:13px; }
.settings-intro p { margin:0 0 6px; }.settings-intro p:last-child { margin:0; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; padding-top:20px; }
.settings label { display:grid; gap:7px; font-size:13px; }
.settings small { color:#69736d; line-height:1.35; }
.threshold-example { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:#59635d; }
.threshold-example strong { width:100%; color:var(--ink); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}
input[type=range] { width:100%; accent-color:var(--green); }
select { min-height:38px; background:white; border:1px solid var(--line); padding:0 10px; }
.actions { display:flex; gap:12px; margin-top:28px; }
button { font:inherit; }
.primary,.secondary { min-height:48px; padding:0 22px; cursor:pointer; border:1px solid var(--ink); font-weight:750; }
.primary { flex:1; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:white; }
.primary:hover { background:var(--green); }
.primary:disabled { opacity:.55; cursor:wait; }
.secondary { background:transparent; color:var(--ink); }
.secondary:hover { background:#ebe7dc; }
.method-panel ol { list-style:none; padding:26px 0 0; margin:0; }
.method-panel li { display:grid; grid-template-columns:34px 1fr; gap:15px; padding:20px 0; border-top:1px solid #b9b5aa; }
.method-panel li>span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:white; font-size:12px; }
.method-panel p { margin:4px 0 0; color:#59615c; }
.developer-credit { margin-top:auto; padding-top:25px; border-top:1px solid #b9b5aa; }
.developer-credit .step { margin-bottom:7px; }.developer-credit strong { display:block; font:700 17px/1.2 Georgia,serif; }
.developer-credit nav { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:12px; }
.developer-credit a { color:var(--green); font-size:12px; font-weight:800; }
.results-section { padding:110px 0 40px; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-top:34px; background:var(--card); }
.summary div { padding:22px; border-right:1px solid var(--line); }
.summary div:last-child { border:0; }
.summary strong,.summary span { display:block; }
.summary strong { font:700 36px Georgia,serif; }
.summary span { color:#66706a; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.summary .verified strong { color:var(--green); }.summary .review strong { color:var(--amber); }.summary .unresolved strong { color:var(--red); }
.progress { min-height:30px; padding:18px 0; color:#5d6862; }
.field-key { max-width:850px; margin:0 0 16px; padding:14px 16px; background:#e7e3d8; color:#59625d; font-size:13px; }
.result-card { display:grid; grid-template-columns:120px 1fr; gap:26px; padding:30px 0; border-top:1px solid var(--line); }
.status { align-self:start; display:inline-block; padding:7px 9px; text-align:center; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:800; border:1px solid currentColor; }
.status.verified { color:var(--green); }.status.review { color:var(--amber); }.status.unresolved,.status.error { color:var(--red); }
.citation { margin:0; font-family:Georgia,serif; font-size:19px; }
.match { margin:14px 0 0; color:#55605a; }
.match a { color:var(--green); font-weight:700; }
.score { font-weight:800; color:var(--ink); }
.field-comparison { width:100%; margin-top:22px; border-collapse:collapse; font-size:13px; }
.field-comparison th { padding:8px 10px; text-align:left; color:#6a746e; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.field-comparison td { padding:10px; vertical-align:top; border-bottom:1px solid #dedbd2; }
.field-comparison td:first-child { width:90px; font-weight:800; }
.field-comparison td:last-child { width:110px; }
.field-state { display:inline-block; padding:3px 7px; border:1px solid currentColor; text-transform:uppercase; letter-spacing:.06em; font-size:9px; font-weight:800; white-space:nowrap; }
.field-state.match { color:var(--green); }.field-state.partial,.field-state.unknown { color:var(--amber); }.field-state.mismatch { color:var(--red); }
.submitted-value,.crossref-value { overflow-wrap:anywhere; }
.comparison-note { display:block; margin-top:3px; color:#77807b; font-size:11px; }
.field-details { margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.field-details summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; cursor:pointer; color:var(--green); font-weight:800; }
.field-details summary::after { content:'Show details +'; font-size:12px; white-space:nowrap; }.field-details[open] summary::after { content:'Hide details −'; }
.field-details summary::-webkit-details-marker { display:none; }
.field-details[open] summary { border-bottom:1px solid var(--line); }
.caveat { margin:100px 0; padding:50px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.caveat p:last-child { max-width:760px; font-size:17px; color:#525d57; }
footer { padding:30px clamp(20px,5vw,72px); border-top:1px solid var(--line); color:#65706a; }
footer a { color:var(--green); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:760px) { .site-header{align-items:flex-start;padding-top:22px;padding-bottom:22px}.privacy{max-width:210px;text-align:right}.privacy-card{text-align:left}.workspace{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink)}.method-panel{border-left:0;border-top:1px solid var(--ink)}.settings-grid{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}.summary div:nth-child(2){border-right:0}.summary div{border-bottom:1px solid var(--line)}.result-card{grid-template-columns:1fr;gap:12px}.results-heading{align-items:end}.field-comparison th:nth-child(2),.field-comparison td:nth-child(2){display:none}.field-comparison td:first-child{width:70px} }