:root{
  --bg:#0E1013; --bg-el:#16191E; --border:#2A2F38;
  --text:#E6E8EB; --text-2:#9AA1AC; --text-3:#6B727D;
  --primary:#FF8A3D; --warn-bg:#1F1509; --radius:14px;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-el:#F7F8F9; --border:#E3E6EA;
  --text:#16191E; --text-2:#5A616B; --text-3:#858C96;
  --primary:#C75200; --warn-bg:#FFF6EC;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); padding:24px 20px 80px;
  font:400 16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
main{max-width:760px;margin:0 auto}
a{color:var(--primary)}
header{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:28px}
.back{display:inline-block;margin-bottom:18px;font-size:14px;text-decoration:none;color:var(--text-3)}
.back:hover{color:var(--primary)}
h1{margin:0 0 8px;font-size:30px;line-height:1.2;font-weight:650;letter-spacing:-.02em}
.meta{color:var(--text-3);font-size:14px;margin:0}
h2{margin:34px 0 12px;font-size:20px;font-weight:600;letter-spacing:-.01em;scroll-margin-top:20px}
h3{margin:24px 0 8px;font-size:16px;font-weight:600;color:var(--text)}
p,li{color:var(--text-2)}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin-bottom:7px}
strong{color:var(--text);font-weight:600}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px;display:block;overflow-x:auto}
th,td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--bg-el);color:var(--text);font-weight:600;white-space:nowrap}
td{color:var(--text-2)}
.note{
  background:var(--warn-bg);border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:var(--radius);padding:14px 18px;margin:0 0 20px;
}
.note p:last-child{margin-bottom:0}
.toc{background:var(--bg-el);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:28px}
.toc ol{margin:0;padding-left:20px;font-size:15px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--border);color:var(--text-3);font-size:14px}
button.theme{
  position:fixed;top:16px;right:16px;min-width:44px;min-height:44px;
  display:grid;place-items:center;cursor:pointer;background:var(--bg-el);
  color:var(--text-2);border:1px solid var(--border);border-radius:12px;font-size:15px;
}
button.theme:hover{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Галочка згоди: чекбокс і текст в один рядок, текст переноситься під себе, а
   не під чекбокс. На вузькому екрані підпис займає два рядки завжди. */
.tick{display:flex;gap:9px;align-items:flex-start;margin:10px 0;font-size:15px}
.tick input{margin-top:3px;flex:none}