:root { color-scheme: dark; --bg:#101713; --panel:#1a241d; --line:#435047; --ink:#f0f4ea; --muted:#bfcbc1; --lime:#c1f987; }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:20px }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.58 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.wrap { width:min(1152px,calc(100% - 64px)); margin:auto }
a { color:var(--lime); text-underline-offset:4px }
a:hover { color:white }
header, footer, main>section { border-bottom:1px solid var(--line) }
header .wrap,footer .wrap,nav { display:flex; justify-content:space-between; align-items:center; gap:24px }
header .wrap { min-height:76px }
nav a, footer a { font-size:.91rem }
.brand { font-size:1.65rem; font-weight:750; letter-spacing:-.07em; text-decoration:none; color:var(--ink) }
.brand span,.eyebrow span { color:var(--lime) }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:start; gap:clamp(32px,6vw,90px); padding:60px 0 64px; border-bottom:1px solid var(--line) }
.eyebrow { color:var(--lime); font:650 .75rem/1.5 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px }
h1,h2,h3 { line-height:1.13; text-wrap:balance }
h1 { font-size:clamp(2.6rem,5.3vw,4.85rem); letter-spacing:-.065em; margin:0 0 24px }
h2 { font-size:clamp(1.85rem,3vw,2.8rem); letter-spacing:-.045em; margin:0 0 16px }
h3 { font-size:1.22rem; letter-spacing:-.024em }
p { color:var(--muted); margin:0 0 16px }
.lead { font-size:1.17rem; max-width:57ch }
.case-jump { display:inline-block; margin-top:8px }
.tool,.result { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:clamp(23px,3.2vw,40px) }
.tool .eyebrow { margin-bottom:8px }
.tool h2 { font-size:2rem }
.tool label:not(.consent) { display:block; margin:16px 0 6px; font-weight:600 }
input:not([type=checkbox]),select { width:100%; min-width:0; min-height:46px; background:var(--bg); color:var(--ink); border:1px solid #758477; border-radius:6px; padding:10px 12px; font:inherit }
.consent { display:flex; gap:10px; align-items:flex-start; color:var(--muted); margin:16px 0; font-size:.92rem }
input[type=checkbox] { flex-shrink:0; width:18px; height:18px; margin:3px 0; accent-color:var(--lime) }
button { cursor:pointer; padding:11px 16px; border:1px solid var(--lime); border-radius:6px; background:var(--lime); color:#17220e; font-family:inherit; font-size:1rem; font-weight:650; line-height:1.4 }
button:hover:not(:disabled) { filter:brightness(1.1) }
button:disabled { opacity:.55; cursor:default }
button.secondary,.feedback button { background:transparent; color:var(--lime); border-color:#829c71 }
:focus-visible { outline:3px solid var(--lime); outline-offset:3px }
.note { font-size:.84rem; margin:14px 0 0 }
#trial-status:not(:empty),#feedback-status:not(:empty) { margin-top:14px; color:var(--lime) }
#trial-status[data-error=true],#feedback-status[data-error=true] { color:#ffbc9f }
main>section { padding:50px 0 }
main>.result { padding:clamp(22px,4vw,44px); margin:32px 0 }
.prose,.reading p { max-width:75ch }
table { border-collapse:collapse; width:100%; text-align:left; margin-top:26px }
th,td { padding:13px 14px 13px 0; vertical-align:top; border-bottom:1px solid var(--line) }
th { color:var(--muted); font-size:.87rem }
td:first-child { width:41% }
td,code,dd { overflow-wrap:anywhere }
code { color:#e0efd7; font: .89em/1.5 ui-monospace,monospace }
td b { color:var(--lime) }
.reading h3 { margin:26px 0 9px }
.result dl { display:grid; grid-template-columns:minmax(135px,1fr) 3fr; margin:24px 0 0 }
dt,dd { margin:0; padding:9px 8px 9px 0; border-top:1px solid var(--line) }
dt { color:var(--muted) }
.feedback { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-top:24px; border-top:1px solid var(--line) }
.feedback button { font-size:.9rem; margin:0 5px 7px 0 }
.feedback button[aria-pressed=true] { color:#17220e; background:var(--lime) }
footer .wrap { min-height:96px }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
[hidden] { display:none!important }
@media(max-width:760px) {
  .wrap { width:calc(100% - 36px) } header .wrap { min-height:61px } nav { gap:14px }
  .hero { grid-template-columns:1fr; gap:26px; padding:30px 0 36px } h1 { font-size:clamp(2.4rem,8vw,3.2rem) }
  .intro .lead { font-size:1rem } main>section { padding:34px 0 } .feedback { grid-template-columns:1fr; gap:0 }
  th,td { padding:10px 6px 10px 0; font-size:.88rem } .result dl { grid-template-columns:1fr } dd { border-top:0; padding-top:0 } dt { font-size:.83rem }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }