/* Правила користування сайтом */
.tm{padding-top:28px;padding-bottom:72px}
.tm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:36px;align-items:center;padding:36px 40px;background:var(--panel);border:1px solid var(--line);border-radius:22px;
  background-image:radial-gradient(55% 90% at 85% 50%,rgba(255,217,26,.13),transparent 70%)}
.tm-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:rgba(255,217,26,.1);border:1px solid rgba(255,217,26,.4);color:var(--yellow);font-size:13px;font-weight:700}
.tm-tag .ic{width:16px;height:16px}
.tm-hero h1{margin:14px 0 12px;font-size:clamp(28px,3.4vw,44px);font-weight:800;font-style:italic;letter-spacing:-1.4px;line-height:1.1}
.tm-hero h1 em{display:block}
.tm-hero p{max-width:60ch;color:var(--muted);font-size:16px;line-height:1.55}
.tm-date{display:block;margin-top:18px;color:var(--muted);font-size:13px}
.tm-art{display:grid;place-items:center;padding:18px;border-radius:22px;background:#f7f4e8;border:3px solid var(--yellow);box-shadow:0 18px 50px rgba(255,217,26,.12)}
.tm-art img{width:100%;max-width:240px;height:auto;animation:tm-float 6s ease-in-out infinite}
@keyframes tm-float{50%{transform:translateY(-8px)}}

.tm-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
.tm-toc{position:sticky;top:20px;padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.tm-toc b{display:block;margin-bottom:12px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
.tm-toc ol{display:flex;flex-direction:column;gap:2px;counter-reset:t}
.tm-toc li{counter-increment:t}
.tm-toc a{display:flex;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text);font-size:14px;font-weight:600;transition:background .15s,color .15s}
.tm-toc a::before{content:counter(t);flex-shrink:0;width:22px;text-align:right;color:var(--yellow);font-weight:800}
.tm-toc a:hover{background:#1f1f22;color:var(--yellow)}

.tm-doc{display:flex;flex-direction:column;gap:12px}
.tm-doc section{padding:26px 30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:20px}
.tm-doc h2{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:22px;font-weight:800;letter-spacing:-.4px}
.tm-doc h2 span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--yellow-ink);font-size:15px;font-weight:800}
.tm-doc p{color:var(--muted);font-size:15px;line-height:1.65}
.tm-doc p+p{margin-top:10px}
.tm-doc p b{color:var(--text)}
.tm-doc a{color:var(--yellow);font-weight:700}
.tm-doc a:hover{text-decoration:underline}
.tm-doc ul{display:flex;flex-direction:column;gap:10px}
.tm-doc li{position:relative;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.6}
.tm-doc li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}

@media (max-width:980px){
  .tm-hero{grid-template-columns:1fr;padding:26px 22px}
  .tm-art{order:-1;max-width:260px;margin:0 auto;width:100%}
  .tm-layout{grid-template-columns:1fr}
  .tm-toc{position:static}
}
@media (max-width:560px){.tm-doc section{padding:22px 18px}.tm-doc h2{font-size:19px}}