@font-face{ font-family:"Radikal"; font-weight:300; font-style:normal; src:url("/fonts/radikal-light.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Radikal"; font-weight:500; font-style:normal; src:url("/fonts/radikal-medium.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Radikal"; font-weight:800; font-style:normal; src:url("/fonts/radikal-black.woff2") format("woff2"); font-display:swap; }

:root{
  --black:#121212; --white:#FAFAFA;
  --gold:#A69866;
  --g10:#E5E5E5; --g38:#9E9E9E; --g62:#626262;
  --font:"Radikal","Helvetica Neue",Arial,sans-serif;
  --hair:0.5px solid var(--g38);
}
*{ box-sizing:border-box; box-shadow:none !important; border-radius:0; }
body{
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--font); font-weight:300; font-size:1.0625rem;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
main{ max-width:52rem; margin:0 auto; padding:5rem 1.5rem 4rem; }
h1{ font-weight:800; font-size:clamp(2.6rem,8vw,4.5rem); letter-spacing:-0.02em; line-height:1; margin:.3rem 0 1.2rem; }
.lead{ max-width:60ch; margin:0; }
.label{ font-weight:500; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g62); margin:0; }
hr{ border:0; border-top:var(--hair); margin:2.5rem 0; }

#drop{ border-top:var(--hair); border-bottom:var(--hair); padding:3.5rem 0; cursor:pointer; outline:none; }
#drop.over, #drop:focus-visible{ border-color:var(--black); border-top-width:2px; border-bottom-width:2px; padding:calc(3.5rem - 1px) 0; }
.drop-title{ font-size:1.75rem; margin:0 0 .3rem; }
.hint{ margin:0; color:var(--g62); }

.link{ background:none; border:0; padding:0; font:inherit; color:var(--black); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.link:hover{ color:var(--gold); }
.btn{ display:inline-block; background:var(--black); color:var(--white); padding:.55rem 1.1rem; text-decoration:none; font-weight:500; font-size:.9rem; transition:none; }
.btn:hover{ background:var(--white); color:var(--black); outline:1px solid var(--black); outline-offset:-1px; }

.options{ display:grid; grid-template-columns:auto minmax(8rem,14rem); gap:.8rem 2rem; align-items:center; margin:2rem 0 3rem; }
select{ font:inherit; background:var(--white); color:var(--black); border:0; border-bottom:var(--hair); padding:.3rem 0; }
input[type=range]{ accent-color:var(--black); width:100%; }
#qval{ color:var(--black); margin-left:.4rem; }

.bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.actions{ display:flex; gap:1.5rem; align-items:center; }
table{ border-collapse:collapse; width:100%; }
th{ font-weight:500; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g62); text-align:left; padding:.4rem 0; border-bottom:0.75px solid var(--black); }
td{ padding:.7rem 0; border-bottom:var(--hair); vertical-align:baseline; }
.num{ text-align:right; white-space:nowrap; padding-left:1rem; }
td.name{ word-break:break-all; }
td.act{ text-align:right; white-space:nowrap; padding-left:1rem; }
td.act > *{ margin-left:1rem; }
tr.err td{ color:var(--g62); }
tr.err td.name span{ color:var(--black); }
.status{ color:var(--g62); }

footer{ margin-top:5rem; color:var(--g62); font-size:.9rem; max-width:60ch; }
footer .label{ margin-bottom:.3rem; }
footer p:last-child{ margin:0; }
[hidden]{ display:none !important; }
@media (max-width:560px){ main{ padding-top:3rem; } .options{ grid-template-columns:1fr; } }

.logo{ display:block; width:min(20rem,70vw); height:auto; margin:0 0 4rem; }