:root {
  --bar-top: #e2e4f8;
  --bar-bottom: #9ca2d6;
  --bar-edge: #6d73a8;
  --bar-text: #14142b;
  --body-top: #dce5ee;
  --body-bottom: #bcc9d6;
  --text: #1e1e1e;
  --muted: #4f5966;
  --panel: rgba(255, 255, 255, 0.55);
  --line: #8a93a8;
  --tree-box: #efebdd;
  --tree-edge: #8c8c8c;
  --blue: #2f4fa8;
  --orange: #ee5835;
  --orange-deep: #c23a1a;
  --green: #3cb521;
  --danger: #d7261e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { background: var(--body-bottom); }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--body-top), var(--body-bottom));
  color: var(--text);
  font: 17px/1.55 'Roboto Condensed', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--blue); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.bar { background: linear-gradient(var(--bar-top), var(--bar-bottom)); border-bottom: 1px solid var(--bar-edge); position: sticky; top: 0; z-index: 5; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--bar-text); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.bar nav { display: flex; align-items: center; gap: 14px; }
.bar nav a { color: var(--bar-text); text-decoration: none; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) { .bar nav a:not(.btn) { display: none; } }

.btn { display: inline-block; padding: 9px 18px; border: 1px solid var(--bar-edge); border-radius: 3px; background: linear-gradient(var(--bar-top), var(--bar-bottom)); color: var(--bar-text) !important; font-weight: 800; text-decoration: none; text-align: center; }
.btn.primary { background: linear-gradient(var(--orange), var(--orange-deep)); border-color: var(--orange-deep); color: #fff !important; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.tree { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 10px; border: 1px solid var(--tree-edge); background: var(--tree-box); color: #333; font-size: 15px; font-weight: 800; line-height: 1; vertical-align: 0.12em; }

.bubble { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); background: var(--c, var(--orange)); color: #fff; font-size: 13px; font-weight: 800; overflow: hidden; }
.bubble::before { content: ''; position: absolute; top: 1px; left: 4px; right: 4px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.45); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; }

footer.softkeys { margin-top: 40px; background: linear-gradient(var(--bar-top), var(--bar-bottom)); border-top: 1px solid var(--bar-edge); padding: 18px 0 28px; font-size: 14px; color: var(--bar-text); }
footer.softkeys a { color: var(--bar-text); font-weight: 700; }

main.doc { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.doc h1 { font-size: 30px; margin: 0 0 4px; color: var(--bar-text); }
.doc h2 { font-size: 22px; margin: 32px 0 8px; color: var(--bar-text); }
.doc h2::before { content: '−'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 10px; border: 1px solid var(--tree-edge); background: var(--tree-box); color: #333; font-size: 15px; font-weight: 800; line-height: 1; vertical-align: 0.12em; }
.doc h3 { font-size: 19px; margin: 24px 0 6px; color: var(--bar-text); }
.doc p, .doc li { margin: 6px 0; }
.doc .muted { color: var(--muted); }