/* sinaq-article.css — a topic's article page (TopicArticle, config topic_article): the approved pilot page (movzu-pilot v2,
   pilot.css + v2.css) in the app, every rule under .sq-art. It loads after every other stylesheet; the page's own fonts, colours and
   column come from sinaq-h9.css and sinaq-d.css (config site_design). Paper white, red ink, pink rules, graphite, Barlow; no shadows. */
.sq-art { --red: #a80f3c; --rule: #e2487a; --tint: #fdeef3; --lead: #24242a; --muted: #55555e; --right: #137a43; --right-bg: #e7f6ee;
  --wrong: #c8102e; --cond: "Barlow Condensed", "H9 Cond", system-ui, sans-serif; --gap: 34px;
  color: var(--lead); font: 400 17px/1.6 Barlow, "H9 Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: break-word; }
.sq-topicpage.sq-art { max-width: none; margin: 0; }
:where(.sq-art) img, :where(.sq-art) svg { display: block; max-width: 100%; }
.sq-art :is(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
.sq-art p + p { margin-top: 12px; }
.sq-art sub, .sq-art sup { line-height: 0; }
.sq-art [id] { scroll-margin-top: 60px; }
.sq-art-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 600; text-decoration: none; }

/* the opening */
.sq-art .section-line { color: var(--red); font-weight: 600; }
.sq-topicpage.sq-art h1 { margin: 6px 0 10px; color: var(--lead); font: 700 clamp(36px, 10.6vw, 64px)/1.02 var(--cond); letter-spacing: 0; text-wrap: wrap; }
.sq-art .dek { font-size: 19px; line-height: 1.4; font-weight: 600; }
.sq-art .reading { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.sq-art .hero-pic { margin: 18px -16px 0; }
.sq-art .hero-pic > img { width: 100%; height: auto; }
.sq-art .hero-pic > svg { width: 100%; height: auto; padding: 0 16px; }
.sq-art .hero-text { margin-top: 16px; font-size: 18.5px; line-height: 1.55; }
.sq-art figcaption { margin: 8px 16px 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.sq-art .drawn { padding: 0 16px; }
.sq-art .drawn svg { margin: 0 auto; }
.sq-art .drawn figcaption { margin-left: 0; margin-right: 0; }

/* the jump list: sticky under the header, only it scrolls sideways (sinaq-article.js) */
.sq-art .toc { position: sticky; top: 0; z-index: 20; margin: 18px -16px 0; background: #fff; border-top: 2px solid var(--red);
  border-bottom: 1.6px solid var(--rule); }
.sq-art .toc ul { display: flex; gap: 2px; margin: 0; padding: 0 10px; list-style: none; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.sq-art .toc ul::-webkit-scrollbar { display: none; }
.sq-art .toc a { display: flex; align-items: center; min-height: 46px; padding: 0 9px; color: var(--red); font: 600 18px/1 var(--cond); text-decoration: none;
  white-space: nowrap; border-bottom: 3px solid transparent; }
.sq-art .toc a[aria-current="true"] { color: var(--lead); border-bottom-color: var(--lead); }

/* the parts: Condensed red headings, the red strip over what you do yourself */
.sq-art .part { margin-top: var(--gap); scroll-margin-top: 60px; }
.sq-art h2 { margin-bottom: 10px; color: var(--red); font: 600 27px/1.12 var(--cond); }
.sq-art .strip { margin: 0 -16px 14px; padding: 8px 16px; background: var(--red); color: #fff; font: 600 25px/1.15 var(--cond); }
.sq-art .lead { margin-bottom: 10px; }
.sq-art .rule-list { padding: 0; list-style: none; border-top: 1.6px solid var(--rule); }
.sq-art .rule-list li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1.6px solid var(--rule); }
.sq-art .rule-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 16px; height: 16px; border: 1.8px solid var(--rule);
  border-radius: 50%; }
.sq-art .note { margin-top: 10px; color: var(--muted); }
.sq-art .izah p + p { margin-top: 10px; }
.sq-art .rule-save li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 8px; align-items: start; }
.sq-art .rule-save .rule-text { min-width: 0; }
.sq-art .rule-extra li::before { border-style: dashed; }

/* the save buttons (sinaq-topic.js): a square bookmark on the rule's line or in the box's head */
.sq-art .sq-topic-save { position: static; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0 0;
  padding: 0; border: 1.6px solid var(--rule); border-radius: 0; background: #fff; color: var(--red); cursor: pointer; }
.sq-art .sq-topic-save svg { display: inline; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sq-art .sq-topic-save:hover { background: var(--tint); }
.sq-art .sq-topic-save[aria-pressed="true"] { border-color: var(--red); color: var(--red); background: var(--tint); }
.sq-art .sq-topic-save[aria-pressed="true"] svg { fill: currentColor; }
.sq-art .sq-topic-save-status { grid-column: 1 / -1; margin: 6px 0 0; padding: 6px 10px; background: var(--tint); color: var(--red); font-size: 15px;
  font-weight: 600; }

/* the task rule boxes */
.sq-art .sq-rule { margin: 0 0 12px; padding: 10px 12px 12px; border: 1.6px solid var(--rule); border-radius: 0; background: #fff; }
.sq-art .sq-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sq-art .sq-rule-head h4 { margin: 0; color: var(--muted); font-size: 15.5px; font-weight: 600; }
.sq-art .sq-art-keep { position: relative; }
.sq-art .sq-art-keep .sq-topic-save { margin: 0; }
.sq-art .sq-art-keep .sq-topic-save-status { position: absolute; right: 0; top: 48px; z-index: 2; width: max-content; max-width: 70vw;
  border: 1.6px solid var(--rule); }
.sq-art .sq-formula { margin: 4px 0 8px; padding: 8px 10px; background: var(--tint); overflow-x: auto; overflow-y: hidden; font-size: 1.05em; }
.sq-art .sq-rule-figure { margin: 6px 0 8px; }
.sq-art .sq-rule-figure img { width: 100%; max-width: 210px; height: auto; }
.sq-art .box-uses summary, .sq-art .ex-sol summary { display: flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 600;
  cursor: pointer; }
.sq-art .box-use { padding: 8px 0; border-top: 1px solid #f0c3d2; }

/* the worked examples */
.sq-art .ex { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1.6px solid var(--rule); }
.sq-art .ex:first-of-type { border-top: 1.6px solid var(--rule); }
.sq-art .ex-n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.6px solid var(--rule);
  color: var(--red); font-weight: 600; }
.sq-art .ex-body { min-width: 0; }
.sq-art .ex-q b { font-weight: 600; }
.sq-art .ex-sol { margin-top: 6px; }
.sq-art .ex-sol[open] > :not(summary) { padding: 8px 12px; background: var(--tint); }
.sq-art .ex-sol ol { padding-left: 22px; }
.sq-art .worked-end { margin-top: 10px; font-weight: 600; }
.sq-art .table-scroll, .sq-art .sq-izah-table-scroll { max-width: 100%; margin: 10px 0; overflow-x: auto; }
.sq-art .table-scroll table, .sq-art .sq-rule table { border-collapse: collapse; }
.sq-art .table-scroll td, .sq-art .table-scroll th { padding: 5px 10px; border: 1.2px solid var(--rule); text-align: left; vertical-align: top; }
.sq-art .table-scroll th { background: var(--tint); color: var(--lead); font-weight: 600; }
.sq-art .table-scroll caption { caption-side: top; padding-bottom: 4px; color: var(--muted); font-size: 15px; text-align: left; }

/* Tipik səhv: a teacher's red pen over a wrong line */
.sq-art .pen { margin: 2px 0 12px; }
.sq-art .pen-wrong { position: relative; display: inline-block; max-width: 100%; color: var(--muted); font-size: 18.5px; }
.sq-art .pen-wrong::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; border-top: 3px solid var(--wrong);
  border-radius: 2px; transform: rotate(-2.5deg); }
.sq-art .pen-right { margin-top: 6px; color: var(--red); font: 600 23px/1.25 var(--cond); }
.sq-art .pen-right .katex { font-size: 1em; }

/* the questions: the answer sheet's rows, the bubble pencilled in on a tap (sinaq-article.js) */
.sq-art .q { margin-top: 20px; }
.sq-art .q:first-of-type { margin-top: 0; }
.sq-art .q-text { margin-bottom: 4px; font-weight: 600; font-size: 18px; line-height: 1.4; }
.sq-art .opts { border-top: 1.6px solid var(--rule); }
.sq-art .opt { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; width: 100%; min-height: 52px; padding: 7px 0; border: 0;
  border-bottom: 1.6px solid var(--rule); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sq-art .opt::before { content: ""; width: 26px; height: 26px; border: 1.8px solid var(--rule); border-radius: 50%;
  transition: background .12s, border-color .12s; }
.sq-art .opt:hover:not([disabled])::before { border-color: var(--lead); }
.sq-art .opt[disabled] { cursor: default; color: inherit; opacity: 1; }
.sq-art .opt.is-right { background: var(--right-bg); font-weight: 600; }
.sq-art .opt.is-right::before { background: var(--right); border-color: var(--right); }
.sq-art .opt.is-picked-wrong { color: var(--wrong); }
.sq-art .opt.is-picked-wrong::before { background: var(--wrong); border-color: var(--wrong); }
.sq-art .q-why { margin-top: 10px; padding: 10px 12px; background: var(--tint); }
.sq-art .q-why b:first-child { color: var(--red); }

/* buttons: graphite pills */
.sq-art .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 2px solid var(--lead);
  border-radius: 25px;
  background: #fff; color: var(--lead); font: 700 20px/1 var(--cond); text-align: center; text-decoration: none; cursor: pointer; }
.sq-art .btn-main { background: var(--lead); color: #fff; }
.sq-art .btn-main:hover { background: #000; }
.sq-art .btn[disabled] { opacity: .4; cursor: default; }
.sq-art .lessons { margin-top: var(--gap); padding-top: 14px; border-top: 2px solid var(--red); color: var(--muted); font-size: 15px; line-height: 1.45; }
.sq-art .lessons h2 { font-size: 21px; margin-bottom: 6px; }
.sq-art .lessons ul { padding: 0; list-style: none; }
.sq-art .lessons li { padding: 6px 0; border-bottom: 1px solid #f0c3d2; }
.sq-art .g-round { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }

/* the try-it panel */
.sq-art .try { margin-left: -16px; margin-right: -16px; padding: 0 16px 18px; background: #fff; border-bottom: 2px solid var(--red); }
.sq-art .try-intro { margin-bottom: 12px; }
.sq-art .slider { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; column-gap: 8px; margin-top: 4px; }
.sq-art .slider label { grid-column: 1 / -1; font-weight: 600; font-size: 15.5px; }
.sq-art .slider output { font: 700 24px/1 var(--cond); text-align: right; font-variant-numeric: tabular-nums; }
.sq-art input[type=range] { width: 100%; min-height: 44px; margin: 0; background: none; accent-color: var(--red); }
.sq-art .py-svg { width: 100%; max-width: 480px; height: auto; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sq-art .py-handle { cursor: grab; touch-action: none; outline: none; }
.sq-art .py-handle:focus-visible .py-ring { stroke: #0b6fd6; stroke-width: .42; }
.sq-art .py-handle.dragging { cursor: grabbing; }
.sq-art .py-live { margin-top: 12px; font: 700 clamp(25px, 7.4vw, 34px)/1.2 var(--cond); font-variant-numeric: tabular-nums; }
.sq-art .py-c { color: var(--red); font: 600 22px/1.3 var(--cond); }
.sq-art .py-bars { margin-top: 12px; }
.sq-art .py-bar { display: flex; height: 26px; }
.sq-art .py-bar + .py-bar { margin-top: 3px; }
.sq-art .py-bar span { display: block; height: 100%; }
.sq-art .py-a { background: var(--tint); box-shadow: inset 0 0 0 1.6px var(--rule); }
.sq-art .py-b { background: #d9d9de; }
.sq-art .py-cc { background: var(--red); }
.sq-art .py-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 15px; line-height: 1.3; }
.sq-art .py-key i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }
.sq-art .py-msg { margin-top: 10px; padding: 10px 12px; background: var(--tint); min-height: 68px; }

.sq-art .game { min-height: 100px; }
.sq-art .calc { display: grid; grid-template-columns: minmax(0, 1fr); margin: 10px 0; padding: 10px 12px; background: var(--lead); color: #fff; }
.sq-art .calc-name { font-size: 14px; color: #d8d8de; }
.sq-art .calc-screen { min-height: 40px; font: 700 30px/1.3 var(--cond); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.sq-art .calc-bar { height: 5px; margin-top: 6px; background: #55555e; }
.sq-art .calc-bar span { display: block; height: 100%; width: 0; background: var(--rule); }
.sq-art .g-expr { margin: 8px 0; font-size: 28px; font-weight: 600; }
.sq-art .g-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sq-art .g-form label { flex: 1 1 100%; font-weight: 600; font-size: 15.5px; }
.sq-art .g-form input { flex: 1 1 130px; min-width: 0; min-height: 50px; padding: 0 12px; border: 2px solid var(--lead); border-radius: 0;
  font: 700 26px/1 var(--cond); font-variant-numeric: tabular-nums; }
.sq-art .g-out { margin-top: 12px; padding: 10px 12px; background: var(--tint); }
.sq-art .g-out .katex { font-size: 1em; white-space: normal; }
.sq-art .g-actions { margin-top: 12px; }
.sq-art .g-score { font: 700 30px/1.15 var(--cond); color: var(--red); }

/* the comic card: a drawn strip on the paper, ink lines */
.sq-art .comic { margin: 0 16px; padding: 14px; background: var(--tint); border: 2.4px solid var(--lead); box-shadow: 5px 5px 0 var(--red); }
.sq-art .comic-line { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.sq-art .comic-line:first-child { margin-top: 0; }
.sq-art .comic-line.b { flex-direction: row-reverse; }
.sq-art .comic-face { flex: none; width: 54px; height: 54px; }
.sq-art .bubble { position: relative; max-width: calc(100% - 62px); padding: 8px 12px; background: #fff; border: 2.2px solid var(--lead); border-radius: 16px;
  font-weight: 600; font-size: 17px; line-height: 1.32; }
.sq-art .bubble::after { content: ""; position: absolute; bottom: 8px; left: -9px; width: 14px; height: 14px; background: #fff;
  border-left: 2.2px solid var(--lead); border-bottom: 2.2px solid var(--lead); transform: rotate(45deg); }
.sq-art .comic-line.b .bubble::after { left: auto; right: -9px; transform: rotate(225deg); }

/* the chat */
.sq-art .chat { padding: 12px; background: var(--tint); }
.sq-art .msg { max-width: 86%; padding: 8px 12px; background: #fff; border-radius: 14px 14px 14px 3px; line-height: 1.35; }
.sq-art .msg.me { margin: 8px 0 0 auto; background: var(--lead); color: #fff; border-radius: 14px 14px 3px 14px; }
.sq-art .blank { display: inline-block; min-width: 40px; border-bottom: 2.4px dashed var(--rule); color: #ffd3e0; font-weight: 600; text-align: center; }
.sq-art .blank.filled { min-width: 0; border-bottom: 0; color: #fff; text-align: left; }
.sq-art .chat-pick { margin: 12px 0 6px; font-weight: 600; }
.sq-art .ends { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-art .end { min-width: 64px; min-height: 48px; padding: 0 14px; border: 2px solid var(--lead); border-radius: 24px; background: #fff; color: var(--lead);
  font: 700 21px/1 var(--cond); cursor: pointer; }
.sq-art .end:hover:not([disabled]) { background: var(--tint); }
.sq-art .end[disabled] { cursor: default; opacity: .55; }
.sq-art .end.is-right { background: var(--right); border-color: var(--right); color: #fff; opacity: 1; }
.sq-art .end.is-picked-wrong { background: var(--wrong); border-color: var(--wrong); color: #fff; opacity: 1; }

/* the periodic table */
.sq-art .el-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; margin-bottom: 10px; padding: 10px 12px;
  min-height: 142px; background: var(--tint); }
.sq-art .el-sym { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; background: var(--lead); color: #fff;
  font: 700 42px/1 var(--cond); }
.sq-art .el-name { font: 700 27px/1.05 var(--cond); }
.sq-art .el-facts { margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.sq-art .el-use { grid-column: 1 / -1; margin-top: 8px; line-height: 1.35; }
.sq-art .el-use b { color: var(--red); }
.sq-art .pt-scroll { margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.sq-art .pt-hint { margin-bottom: 6px; color: var(--muted); font-size: 14.5px; }
.sq-art .pt { display: grid; grid-template-columns: 20px repeat(18, 44px); grid-auto-rows: 44px; gap: 1px; width: max-content; }
.sq-art .pt-label { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; color: var(--muted); font-size: 11.5px;
  line-height: 1; }
.sq-art .pt-period { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.sq-art .el { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 0;
  color: var(--lead); font: 600 17px/1 Barlow, "H9 Text", sans-serif; cursor: pointer; }
.sq-art .el small { font-size: 10px; font-weight: 400; line-height: 1.1; }
.sq-art .el.s, .sq-art .pt-legend .s { background: #f7c5d5; }
.sq-art .el.p, .sq-art .pt-legend .p { background: var(--tint); box-shadow: inset 0 0 0 1px #f0a9c0; }
.sq-art .el.d, .sq-art .pt-legend .d { background: #e4e4e8; }
.sq-art .el.f, .sq-art .pt-legend .f { background: #fff; box-shadow: inset 0 0 0 1px #b8b8c0; }
.sq-art .el[aria-pressed="true"] { background: var(--lead); color: #fff; box-shadow: none; }
.sq-art .el:focus-visible { position: relative; z-index: 1; }
.sq-art .pt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 14.5px; }
.sq-art .pt-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* the reusable try-it kinds (sinaq-try-kit.js): rounds, answers, lists, pairs, steps, a figure drawn to scale */
.sq-art .tk { min-height: 120px; }
.sq-art .tk-round { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.sq-art .tk-q { margin: 6px 0 10px; font-weight: 600; font-size: 18px; line-height: 1.4; }
.sq-art .tk-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sq-art .tk-form label { flex: 1 1 100%; font-weight: 600; font-size: 15.5px; }
.sq-art .tk-form input { flex: 1 1 130px; min-width: 0; min-height: 50px; padding: 0 12px; border: 2px solid var(--lead); border-radius: 0;
  font: 700 26px/1 var(--cond); font-variant-numeric: tabular-nums; }
.sq-art .tk-out { margin-top: 12px; }
.sq-art .tk-say { padding: 10px 12px; background: var(--tint); }
.sq-art .tk-say.is-right > p:first-child b { color: var(--right); }
.sq-art .tk-say.is-wrong > p:first-child b { color: var(--wrong); }
.sq-art .tk-answer { margin-top: 6px; font: 700 26px/1.2 var(--cond); color: var(--red); }
.sq-art .tk-steps { margin: 8px 0 0; padding-left: 22px; }
.sq-art .tk-steps li + li { margin-top: 6px; }
.sq-art .tk-steps li::marker { color: var(--red); font-weight: 600; }
.sq-art .tk-actions { margin-top: 12px; }
.sq-art .tk-score { font: 700 30px/1.15 var(--cond); color: var(--red); }
.sq-art .tk-opts { border-top: 1.6px solid var(--rule); }
.sq-art .tk-opt { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 7px 10px; border: 0; border-bottom: 1.6px solid var(--rule);
  border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sq-art .tk-opt[disabled] { cursor: default; color: inherit; opacity: 1; }
.sq-art .tk-opt.is-right { background: var(--right-bg); font-weight: 600; }
.sq-art .tk-opt.is-picked-wrong { color: var(--wrong); }
.sq-art .tk-list { margin: 0; padding: 0; list-style: none; border-top: 1.6px solid var(--rule); counter-reset: tk; }
.sq-art .tk-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 4px 0;
  border-bottom: 1.6px solid var(--rule); counter-increment: tk; }
.sq-art .tk-list li::before { content: counter(tk); color: var(--red); font-weight: 600; text-align: center; }
.sq-art .tk-move { display: flex; gap: 4px; }
.sq-art .tk-btn { width: 44px; height: 44px; padding: 0; border: 1.6px solid var(--rule); border-radius: 0; background: #fff; color: var(--red);
  font: 700 20px/1 var(--cond); cursor: pointer; }
.sq-art .tk-btn[disabled] { opacity: .35; cursor: default; }
.sq-art .tk-pairs { border-top: 1.6px solid var(--rule); }
.sq-art .tk-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 0;
  border-bottom: 1.6px solid var(--rule); }
.sq-art .tk-pair select { min-width: 0; min-height: 46px; padding: 0 8px; border: 1.6px solid var(--lead); border-radius: 0; background: #fff; font: inherit; }
.sq-art .tk-pair .tk-right { grid-column: 1 / -1; color: var(--right); font-weight: 600; }
.sq-art .tk-pair.is-picked-wrong label { color: var(--wrong); }
.sq-art .tk-lines { margin-top: 10px; }
.sq-art .tk-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1.6px solid var(--rule); }
.sq-art .tk-line b { font: 700 24px/1.1 var(--cond); font-variant-numeric: tabular-nums; color: var(--red); white-space: nowrap; }
.sq-art .tk-note { margin-top: 10px; padding: 10px 12px; background: var(--tint); }
.sq-art .tk-fig { width: 100%; max-width: 420px; height: auto; margin: 0 auto 8px; background: #fff; }
.sq-art .tk-fig-shape { fill: var(--tint); stroke: var(--red); stroke-width: 2.4; }
.sq-art .tk-fig-side { stroke: var(--lead); stroke-width: 2; stroke-dasharray: 5 4; }
.sq-art .tk-fig-label { fill: var(--lead); font: 600 15px Barlow, "H9 Text", sans-serif; }
.sq-art .tk-fig-sub { font-size: 11px; }
.sq-art .tk-fig-body { fill: var(--tint); stroke: none; }
.sq-art .tk-fig-part { fill: #fff; stroke: var(--red); stroke-width: 2.4; }
.sq-art .tk-fig-cut { fill: var(--rule); fill-opacity: .3; stroke: var(--red); stroke-width: 2; }
.sq-art .tk-fig-mark { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linejoin: round; }
.sq-art .tk-fig-lead { fill: none; stroke: var(--lead); stroke-width: 2; }
.sq-art .tk-fig-thin, .sq-art .tk-fig-ray { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.sq-art .tk-fig-ray { stroke: var(--lead); }
.sq-art .tk-fig-tick, .sq-art .tk-fig-bond { fill: none; stroke: var(--lead); stroke-width: 1.4; }
.sq-art .tk-fig-bond { stroke-width: 1.8; }
.sq-art .tk-fig-hidden { fill: none; stroke: var(--lead); stroke-width: 1.4; stroke-dasharray: 4 4; }
.sq-art .tk-fig-dot, .sq-art .tk-fig-mark-h { fill: var(--red); stroke: none; }
.sq-art .tk-fig-lead-h { fill: var(--lead); }
.sq-art .tk-fig-thin-h { fill: var(--muted); }

/* the end of the page: qebulol.az's related posts with featured pictures, on the answer sheet */
.sq-art .sinaq-card { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--gap); border: 2px solid var(--red); background: #fff; }
.sq-art .sinaq-fig { background: var(--tint); border-bottom: 1.6px solid var(--rule); }
.sq-art .sinaq-fig svg, .sq-art .rthumb svg { display: block; width: 100%; height: auto; }
.sq-art .sinaq-body { padding: 14px 16px 16px; }
.sq-art .sinaq-body h2 { margin-bottom: 6px; }
.sq-art .sinaq-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sq-art .sinaq-btns .btn { flex: 1 1 220px; min-height: 52px; }
.sq-art .rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sq-art .rel-head a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 600; }
.sq-art .rel { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.sq-art .rcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 10px;
  border: 1.6px solid var(--rule); color: var(--lead); text-decoration: none; background: #fff; }
.sq-art .rcard:hover .rtitle { color: var(--red); }
.sq-art .rthumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
.sq-art .rthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sq-art .rtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sq-art .rsub { color: var(--red); font-size: 13.5px; font-weight: 600; }
.sq-art .rtitle { font: 600 19px/1.15 var(--cond); }
.sq-art .rdesc { color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.sq-art .rel li:first-child .rcard { grid-template-columns: minmax(0, 1fr); padding: 0; }
.sq-art .rel li:first-child .rtext { padding: 0 12px 12px; }
.sq-art .rel li:first-child .rtitle { font-size: 23px; }

.sq-art .katex { font-size: 1.06em; }
.sq-art .nb { white-space: nowrap; }
.sq-art .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }

/* the narrowest phones: sinaq-d-topic.css gives the izah page 26px on the left; the article's full-width parts need the page's even 16px */
@media (max-width: 340px) { .sq-d-topic .sq-main:has(.sq-art) { padding: 0 16px; } }
@media (min-width: 640px) {
  .sq-art .sinaq-card { grid-template-columns: 280px minmax(0, 1fr); }
  .sq-art .sinaq-fig { display: flex; align-items: center; border-bottom: 0; border-right: 1.6px solid var(--rule); }
  .sq-art .rel { grid-template-columns: 1fr 1fr; }
  .sq-art .rel .rcard, .sq-art .rel li:first-child .rcard { grid-template-columns: minmax(0, 1fr); padding: 0; height: 100%; }
  .sq-art .rel .rtext, .sq-art .rel li:first-child .rtext { padding: 0 12px 12px; }
  .sq-art .rel .rtitle, .sq-art .rel li:first-child .rtitle { font-size: 21px; }
}
/* a wide screen: the paper on the desk (sinaq-h9.css), the reading column in its middle */
@media (min-width: 768px) {
  .sq-art .col { max-width: 760px; margin-left: auto; margin-right: auto; }
  .sq-topicpage.sq-art h1 { font-size: clamp(50px, 6.6vw, 76px); line-height: .98; }
  .sq-art .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .sq-art .hero-head { grid-column: 1; }
  .sq-art .hero-pic { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .sq-art .hero-pic > svg { padding: 0; }
  .sq-art .hero-text { grid-column: 1; }
  .sq-art figcaption { margin-left: 0; margin-right: 0; }
  .sq-art .comic { margin: 0; }
  .sq-art .drawn { padding: 0; }
  .sq-art .strip, .sq-art .try, .sq-art .pt-scroll, .sq-art .toc { margin-left: 0; margin-right: 0; }
  .sq-art .pt-scroll, .sq-art .try { padding-left: 0; padding-right: 0; }
  .sq-art .toc ul { justify-content: center; flex-wrap: wrap; overflow: visible; }
  .sq-art .wide { max-width: none; }
  .sq-art .wide .el-card { max-width: 760px; }
}
@media (min-width: 1100px) {
  .sq-art .pt { grid-template-columns: 22px repeat(18, 52px); grid-auto-rows: 52px; }
  .sq-art .el { width: 52px; height: 52px; font-size: 19px; }
  .sq-art .el small { font-size: 11px; }
  .sq-art .pt-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sq-art *, .sq-art *::before, .sq-art *::after { animation: none !important; transition: none !important; } }