:root { color-scheme: dark; --ink:#e9e7df; --muted:#99978f; --line:#3a3a36; --signal:#d6ff46; --paper:#111210; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:24px 24px; }
main { width:min(1180px,calc(100% - 36px)); margin:auto; }
header { min-height:34vh; padding:46px 0 34px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); }
h1 { margin:16px 0 0; max-width:760px; font-size:clamp(3.6rem,9vw,8.5rem); letter-spacing:-.075em; line-height:.78; font-weight:690; }
.eyebrow,.step { color:var(--muted); font:700 .7rem/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing:.13em; }
.mode { border:1px solid var(--signal); color:var(--signal); padding:10px 13px; font:700 .7rem ui-monospace,monospace; letter-spacing:.09em; }
.instrument { display:grid; grid-template-columns:1fr 1fr; min-height:490px; border-bottom:1px solid var(--line); }
.controls,.display { padding:36px 34px 36px 0; }
.display { padding-left:34px; border-left:1px solid var(--line); position:relative; overflow:hidden; }
h2 { margin:8px 0; font-size:1.55rem; letter-spacing:-.03em; }
.scope,.privacy { max-width:540px; color:var(--muted); line-height:1.55; }
.privacy { font-size:.78rem; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
label { color:var(--muted); font:700 .68rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }
input,select { width:100%; margin-top:8px; padding:12px; border:1px solid var(--line); background:#191a17; color:var(--ink); font:500 1rem ui-monospace,monospace; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
button { padding:13px 18px; border:1px solid var(--ink); cursor:pointer; font-weight:750; }
.primary { background:var(--signal); color:#111; border-color:var(--signal); }
.secondary { background:transparent; color:var(--ink); }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.result-kind { color:var(--signal); margin-top:28px; font:800 .72rem ui-monospace,monospace; letter-spacing:.15em; }
.readout { min-height:135px; display:flex; align-items:center; font-size:clamp(4rem,8vw,7.5rem); line-height:.9; font-weight:720; letter-spacing:-.07em; }
.uncertainty { color:var(--muted); min-height:24px; }
.boundary { position:absolute; left:34px; right:0; bottom:35px; border-top:1px solid var(--line); padding-top:13px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; color:var(--muted); font:600 .65rem ui-monospace,monospace; }
.boundary b { color:var(--ink); font-weight:600; }
.trace { height:62px; display:flex; align-items:center; gap:8px; opacity:.45; }
.trace span { width:2px; height:12px; background:var(--signal); animation:pulse 1.2s ease-in-out infinite alternate; }
.trace span:nth-child(2n) { height:42px; animation-delay:-.5s; }.trace span:nth-child(3n) { height:25px; animation-delay:-.9s; }
@keyframes pulse { to { transform:scaleY(.45); } }
.receipt { padding:34px 0; display:grid; grid-template-columns:1fr 2fr; border-bottom:1px solid var(--line); }
.receipt-body { color:var(--muted); }
dl { margin:0 0 18px; } dl div { display:grid; grid-template-columns:110px 1fr; padding:8px 0; border-bottom:1px dotted var(--line); } dt { font:700 .68rem ui-monospace,monospace; text-transform:uppercase; } dd { margin:0; color:var(--ink); }.hash { overflow-wrap:anywhere; }
footer { padding:24px 0 42px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:600 .65rem ui-monospace,monospace; }
@media (max-width:760px) { header { min-height:280px; } .mode { position:absolute; right:18px; }.instrument { grid-template-columns:1fr; }.display { min-height:430px; border-left:0; border-top:1px solid var(--line); padding-left:0; }.boundary { left:0; }.receipt { grid-template-columns:1fr; }.grid { grid-template-columns:1fr; } footer { flex-direction:column; } }