/* Инструменты в браузере (/tools/…). Подключается через pageCss: tools.css. */
.tl-head{position:relative;padding:56px 0 34px;overflow:hidden}
.tl-head::before{content:"";position:absolute;left:50%;top:-320px;width:1100px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(124,58,237,.22),transparent);pointer-events:none}
.tl-head .wrap{position:relative}.tl-head .d2{margin-top:12px}
.tl-lead{max-width:680px;margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--mute)}.tl-lead strong{color:var(--ink);font-weight:600}
.tl-app{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
.tl-in,.tl-out{padding:16px}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tl-acts{display:flex;gap:6px}.tl-acts .chip{height:30px;font-size:13px}
.tl-fmt{justify-content:flex-start;margin:12px 0 0}.chip.on{color:var(--ink);box-shadow:inset 0 0 0 1px var(--v2);background:rgba(139,92,246,.14)}
#mm-src{width:100%;min-height:380px;resize:vertical;padding:14px 16px;border:0;border-radius:var(--r2);background:#0C0B12;box-shadow:inset 0 0 0 1px var(--line2);color:#E4DFF2;font:400 14px/1.7 var(--mono);tab-size:2;outline:0}
#mm-src:focus{box-shadow:inset 0 0 0 1px var(--v2)}
.tl-view{min-height:300px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:8px;border-radius:var(--r2);background:radial-gradient(80% 80% at 50% 40%,rgba(124,58,237,.12),transparent 70%),#0A0910}
.tl-view svg{max-width:100%;height:auto}
.tl-err{margin:10px 0 0;font-size:14px;color:var(--am)}
.tl-out .code{margin-top:12px}.tl-out pre{max-height:220px;overflow:auto}
.tl-text{padding-top:30px}.tl-text ol{padding-left:22px}.tl-text ol>li{margin:10px 0;padding-left:6px}.tl-text ol>li::before{display:none}
.tl-text .callout{margin:24px 0}.tl-text .faq-item summary h3{margin:0;font-size:17px;font-weight:600}
.tl-cta{margin-top:70px}.tl-cta .panel{padding:36px;text-align:center;background:radial-gradient(70% 120% at 50% 0%,rgba(124,58,237,.3),transparent 70%),linear-gradient(180deg,var(--p2),var(--p1))}
.tl-cta p{margin:10px auto 22px;max-width:440px}
@media (max-width:960px){.tl-app{grid-template-columns:minmax(0,1fr)}#mm-src{min-height:260px}.tl-head{padding:36px 0 24px}.tl-cta .panel{padding:26px 18px}}