:root{
  --ink:#11151b; --ink2:#3f4a59; --ink3:#6d7889; --line:#e3e7ed; --line2:#eff2f6;
  --bg:#f6f7f9; --card:#fff; --acc:#2563eb; --acc-s:#eaf0fe;
  --good:#0f7a52; --good-bg:#e7f5ee; --bad:#b42318; --bad-bg:#fdecea;
  --warn:#8a5a00; --warn-bg:#fdf4e3;
  --sh:0 1px 2px rgba(16,24,40,.05),0 8px 24px -14px rgba(16,24,40,.16);
}
@media (prefers-color-scheme:dark){:root{
  --ink:#e9edf3; --ink2:#b5bfcd; --ink3:#7f8b9c; --line:#242b36; --line2:#1c222b;
  --bg:#0c1016; --card:#141a22; --acc:#5b9bff; --acc-s:#16233a;
  --good:#4ec99a; --good-bg:#12281f; --bad:#ff8d7d; --bad-bg:#2b1614;
  --warn:#e0ac52; --warn-bg:#2a2013;
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:44px 22px 90px}
.wrap.narrow{max-width:660px}
.brand{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:14px}
h1{font-size:clamp(27px,4.4vw,40px);line-height:1.14;letter-spacing:-.022em;margin:0 0 12px;text-wrap:balance}
.h1s{font-size:clamp(22px,3.2vw,30px);margin:0 0 4px}
h2{font-size:19px;line-height:1.3;letter-spacing:-.012em;margin:0 0 8px;text-wrap:balance}
h2.sec{margin:38px 0 6px}
p{margin:0 0 13px;color:var(--ink2)}
.lede{font-size:17.5px;max-width:62ch}
.fine{font-size:13.5px;color:var(--ink3);margin:0 0 10px}
.top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;box-shadow:var(--sh);margin:18px 0}
.card.quiet{box-shadow:none;background:transparent}
.card.hero{text-align:center;padding:30px 24px}
.card.lock{border-style:dashed;box-shadow:none}
.card.ask{border-color:var(--acc);background:var(--acc-s)}

.btn{appearance:none;border:0;border-radius:10px;background:var(--acc);color:#fff;
  font:600 15px/1 inherit;padding:13px 20px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink3);border:1px solid var(--line);font-weight:500}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.frm{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.frm.inline{flex-direction:row;flex-wrap:wrap;align-items:center}
.frm label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink3);position:relative}
.frm label.chk{flex-direction:row;align-items:center;gap:9px;cursor:pointer}
/* общее правило input{width:100%} растягивало галочку на всю строку */
.frm label.chk input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;margin:0}
input,textarea{font:15px/1.5 inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:transparent}
.suf{position:absolute;right:12px;top:31px;color:var(--ink3);font-size:14px;pointer-events:none}
.frm.inline input{width:auto;min-width:210px}

.msg{border-radius:11px;padding:14px 17px;margin:16px 0;font-size:14.5px;line-height:1.55}
.msg.bad{background:var(--bad-bg);color:var(--bad)}
.msg.ok{background:var(--good-bg);color:var(--good)}
.msg.warn{background:var(--warn-bg);color:var(--warn)}

.stats{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.st{flex:1 1 165px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.st .v{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.st .k{font-size:13px;color:var(--ink3);margin-top:5px}
.st.warn .v{color:var(--warn)}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
table.grid{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
table.grid th,table.grid td{padding:11px 14px;border-bottom:1px solid var(--line2);text-align:left}
table.grid thead th{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td.r,table.grid th.r{text-align:right}
table.grid td.n{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
table.grid tr.dim td{color:var(--ink3)}
table.grid tbody tr:last-child td{border-bottom:none}
td.w,th.w{width:34%;min-width:120px}
td.w i{display:block;height:8px;border-radius:5px;background:var(--acc);opacity:.75}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--warn-bg);color:var(--warn);vertical-align:1px}
.thin{color:var(--ink3);font-weight:500;font-size:13px;border-bottom:1px dotted var(--ink3);cursor:help}

table.t{border-collapse:collapse;width:100%;font-size:14.5px;margin:8px 0 12px}
table.t td{padding:8px 0;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--ink2)}
table.t td.y,table.t td.n{width:96px;font-weight:600;white-space:nowrap}
table.t td.y{color:var(--good)} table.t td.n{color:var(--bad)}

.opts{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.opt{display:grid;grid-template-columns:22px 88px 1fr;gap:10px 12px;align-items:baseline;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 15px;cursor:pointer}
.opt input{width:auto;margin:0}
.opt .on{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.opt .ol{font-weight:600;font-size:14.5px}
.opt .of{grid-column:2 / -1;font-size:13px;color:var(--ink3)}
.opt:has(input:checked){border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}

.holes{margin:8px 0 12px;padding-left:20px;color:var(--ink2)}
.holes li{margin-bottom:8px}
.amo-btn{margin:0 auto}
.acts{display:flex;gap:8px;flex-wrap:wrap}