:root { color-scheme: dark; --bg:#10151d; --panel:#18212d; --ink:#ecf2f8; --muted:#93a4b7; --accent:#7cdbbd; --line:#2b3949; --danger:#ff8d8d; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at 20% 0,#1a3340 0,transparent 32rem),var(--bg); min-height:100vh; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1080px)/2)); border-bottom:1px solid var(--line); background:#10151de6; backdrop-filter:blur(12px); }
a { color:inherit; text-decoration:none; } nav { display:flex; gap:20px; } nav a { color:var(--muted); } nav a:hover { color:var(--ink); }
.brand { font-size:19px; font-weight:760; letter-spacing:.02em; }
main { width:min(1080px,calc(100% - 32px)); margin:48px auto 80px; }
.hero { max-width:680px; margin-bottom:32px; } .eyebrow { color:var(--accent); font-size:12px; letter-spacing:.2em; font-weight:700; }
h1 { font-size:clamp(30px,5vw,50px); line-height:1.05; margin:.2em 0; } h2 { margin-top:0; }
.panel { background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-radius:16px; padding:24px; margin:18px 0; box-shadow:0 18px 50px #0003; }
.narrow { max-width:480px; margin-inline:auto; } .wide { width:100%; }
form { display:grid; gap:16px; } label { display:grid; gap:7px; color:var(--muted); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
input { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 12px; background:#0e151e; color:var(--ink); }
.drop { border:1px dashed #466175; border-radius:10px; padding:18px; }
button { cursor:pointer; border:0; border-radius:9px; padding:12px 18px; background:var(--accent); color:#09251d; font-weight:750; }
button.secondary { padding:8px 14px; background:#263443; color:var(--ink); }
.muted { color:var(--muted); } .error,.failure { color:var(--danger); }
.result { display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid var(--line); }
.result span { font-family:ui-monospace,monospace; } .answer { color:var(--accent); font:700 17px ui-monospace,monospace; }
.title-row { display:flex; align-items:center; justify-content:space-between; } .title-row h1 { font-size:34px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th,td { text-align:left; padding:11px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:12px; } .hash { max-width:260px; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,monospace; }
footer { color:var(--muted); text-align:center; padding:24px; border-top:1px solid var(--line); }
@media (max-width:640px) { nav { gap:10px; font-size:13px; } main { margin-top:28px; } .row { grid-template-columns:1fr; } .result { flex-direction:column; gap:2px; } }