@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F;
}

:root {
  --paper: #f4ecdc;
  --ink: #16120d;
  --muted: #766c5e;
  --accent: #d4140d;
  --line: #ded3c0;
  --panel: #fffaf0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Vazirmatn", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 2.05;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(22, 18, 13, 0.1);
  background: rgba(244, 236, 220, 0.42);
  backdrop-filter: blur(10px);
}

a {
  color: inherit;
  text-decoration: none;
}

.inline-pdf-link {
  text-decoration: underline;
  text-decoration-color: rgba(212, 20, 13, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.brand {
  font-size: 18px;
  font-weight: 700;
}

.byline {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.copyright-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(22, 18, 13, 0.24);
  border-radius: 4px;
  background: rgba(255, 250, 240, 0.42);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.copyright-link:hover,
.copyright-link:focus-visible {
  border-color: rgba(212, 20, 13, 0.52);
  color: var(--accent);
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 58px clamp(20px, 5vw, 72px) 96px;
}

.article {
  min-width: 0;
}

h1 {
  max-width: 780px;
  margin: 0 0 72px;
  color: var(--ink);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 750;
  line-height: 1.55;
  text-align: center;
}

h1 span,
em {
  color: var(--accent);
  font-style: normal;
}

.dynamic-division,
.dynamic-angle {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dynamic-division {
  min-width: 2.3ch;
}

.dynamic-angle {
  min-width: 4.6ch;
}

h2 {
  margin: 0 0 22px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
}

p {
  margin: 0 0 34px;
  font-size: clamp(17px, 1.8vw, 22px);
}

.definition {
  margin-top: 36px;
  padding: 28px 34px;
  border-inline-start: 4px solid var(--accent);
  background: rgba(255, 250, 240, 0.58);
}

.definition p {
  margin: 0;
}

.page-section {
  margin-top: 92px;
}

.exercise-list {
  margin-bottom: 54px;
}

.exercise-list p {
  margin-bottom: 18px;
}

.process-list {
  margin: 0 0 42px;
}

.process-list p {
  margin-bottom: 16px;
}

.rule,
.formula {
  padding: 24px 30px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.64);
}

.interactive-figure {
  margin: 52px 0;
}

.interactive-figure svg,
.comparison-figure svg,
.edge-figure svg,
.construction-figure svg,
.central-angle-figure svg,
.center-finder-figure svg,
.polygon-ground-figure svg,
.inscribed-ground-figure svg,
.existing-ground-figure svg {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7e8;
}

.interactive-figure svg {
  min-height: 330px;
}

.comparison-figure {
  margin: 42px 0 48px;
}

.comparison-figure svg {
  min-height: 220px;
}

.edge-figure {
  margin: 42px 0 48px;
}

.edge-figure svg {
  min-height: 760px;
}

.construction-figure {
  margin: 42px 0 48px;
}

.construction-figure svg {
  min-height: 420px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.central-angle-figure {
  margin: 42px 0 48px;
}

.center-finder-figure {
  margin: 42px 0 48px;
}

.polygon-ground-figure {
  margin: 42px 0 48px;
}

.inscribed-ground-figure {
  margin: 42px 0 48px;
}

.existing-ground-figure {
  margin: 42px 0 48px;
}

.central-angle-figure svg {
  min-height: 340px;
}

.center-finder-figure svg {
  min-height: 360px;
}

.polygon-ground-figure svg {
  min-height: 420px;
}

.inscribed-ground-figure svg {
  min-height: 390px;
}

.existing-ground-figure svg {
  min-height: 340px;
}

.central-angle-figure figcaption,
.center-finder-figure figcaption,
.polygon-ground-figure figcaption,
.inscribed-ground-figure figcaption,
.existing-ground-figure figcaption {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  direction: rtl;
}

.construction-figure svg.is-changing {
  opacity: 0.35;
  transform: translateY(4px);
}

.construction-figure figcaption {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  direction: ltr;
  text-align: left;
}

.step-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
}

.step-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.step-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#stepReadout {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.step-text {
  margin: 0;
  direction: rtl;
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.8;
  text-align: right;
  transition: opacity 180ms ease, transform 180ms ease;
}

.step-text.is-changing {
  opacity: 0.35;
  transform: translateY(4px);
}

.construction-readout {
  justify-content: flex-start;
}

.edge-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

#edgeReadout {
  color: var(--accent);
}

.interactive-figure figcaption,
.comparison-figure figcaption {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  direction: ltr;
  text-align: left;
}

.readout {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  direction: rtl;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

.readout span {
  white-space: nowrap;
}

.readout strong {
  display: inline-block;
  min-width: 3.3ch;
  color: var(--accent);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.angle-value,
#angleValue,
#constructionAngle,
#existingGroundAngle {
  min-width: 4.8ch;
}

.division-value,
#divisionValue {
  min-width: 2.4ch;
}

#existingGroundValue {
  min-width: 4.6ch;
}

label {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

input[type="range"] {
  width: 100%;
  direction: ltr;
  accent-color: var(--accent);
  touch-action: none;
}

.measurement-controls {
  display: grid;
  grid-template-columns: auto minmax(86px, 1fr) auto minmax(86px, 1fr);
  align-items: center;
  gap: 10px;
}

.measurement-controls input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
  direction: ltr;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}

.calculator-expression {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 12px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  direction: ltr;
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.calculator-expression span,
.calculator-expression strong {
  unicode-bidi: isolate;
}

.calculator-expression .ltr-token {
  direction: ltr;
}

.main-fraction,
.inline-fraction {
  display: inline-grid;
  direction: ltr;
  line-height: 1.15;
  text-align: center;
  vertical-align: middle;
}

.main-fraction {
  min-width: 210px;
}

.main-fraction > .fraction-numerator,
.inline-fraction > span:first-child {
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
}

.main-fraction > .fraction-denominator,
.inline-fraction > span:last-child {
  padding-top: 8px;
}

.fraction-denominator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.function-name {
  font-style: italic;
  font-weight: 650;
}

.math-paren {
  display: inline-block;
  color: rgba(22, 18, 13, 0.82);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.35em;
  font-weight: 300;
  line-height: 1;
  transform: scaleX(0.82);
}

.inline-fraction {
  min-width: 48px;
  margin: 0 4px;
  font-size: 0.72em;
}

.math-equals,
.math-result {
  font-size: 1.08em;
  line-height: 1;
  transform: translateY(0.84em);
}

.formula,
.example-formula {
  display: flex;
  justify-content: center;
  gap: 18px;
  align-items: center;
  margin: 0 0 34px;
  direction: ltr;
  font-size: clamp(21px, 2.5vw, 30px);
  text-align: center;
}

.equivalence-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 0 34px;
  padding: 24px 30px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.64);
  direction: ltr;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.7;
  text-align: center;
}

.equivalence-formula span {
  direction: rtl;
}

.ratio-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0 0 34px;
  padding: 26px 30px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.64);
  direction: ltr;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
  text-align: center;
}

.ratio-formula .shadow-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
}

.ratio-formula .formula-equals {
  font-size: 1.1em;
}

.ratio-formula .large-paren {
  display: inline-block;
  color: rgba(22, 18, 13, 0.82);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 2.2em;
  font-weight: 300;
  line-height: 0.8;
  transform: scaleX(0.82);
}

.ratio-formula .fraction {
  font-size: 0.92em;
}

.ratio-formula .angle-fraction {
  color: var(--ink);
}

.inverse-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0 0 34px;
  padding: 26px 30px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.64);
  direction: ltr;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
  text-align: center;
}

.inverse-formula .shadow-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
}

.inverse-formula .large-paren {
  display: inline-block;
  color: rgba(22, 18, 13, 0.82);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 2.2em;
  font-weight: 300;
  line-height: 0.8;
  transform: scaleX(0.82);
}

.inverse-formula .fraction {
  font-size: 0.92em;
}

.inverse-bar-symbol {
  transform: translateY(-0.58em);
}

.inverse-outer-fraction {
  display: inline-grid;
  min-width: min(100%, 420px);
  align-items: center;
  justify-items: center;
  line-height: 1.2;
}

.inverse-numerator {
  width: 100%;
  padding: 0 20px 10px;
  border-bottom: 2px solid currentColor;
}

.inverse-denominator {
  width: 100%;
  padding-top: 10px;
}

.inverse-denominator .shadow-call {
  justify-content: center;
}

.pdf-resources {
  display: grid;
  gap: 0;
  margin: 0 0 34px;
  border-top: 1px solid var(--line);
}

.pdf-resource-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.pdf-resource-link span {
  color: var(--accent);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.55;
}

.pdf-resource-link small {
  grid-column: 1;
  color: var(--muted);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.7;
}

.pdf-resource-link::after {
  content: "PDF";
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 2px 8px;
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.math-label {
  margin-bottom: 12px;
}

.example-label {
  margin-bottom: 8px;
}

.example-formula {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-top: -4px;
  color: var(--ink);
  font-size: clamp(17px, 1.9vw, 22px);
}

.example-text {
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.example-text .dynamic-division {
  min-width: 0;
}

.example-equals {
  font-weight: 700;
  line-height: 1;
}

.example-result {
  min-width: 4.5ch;
  direction: ltr;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}

.example-result .dynamic-angle {
  min-width: 0;
}

.example-formula .fraction {
  min-width: 58px;
}

.fraction {
  display: inline-grid;
  min-width: 72px;
  direction: ltr;
  color: var(--accent);
  line-height: 1.15;
  text-align: center;
}

.fraction span:first-child {
  padding-bottom: 6px;
  border-bottom: 2px solid currentColor;
}

.fraction span:last-child {
  padding-top: 6px;
}

.notation {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  margin: 22px 0 42px;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.5;
}

.notation span:last-child,
.notation sup {
  color: var(--accent);
}

.notation sup {
  font-size: 0.58em;
}

.diagram-line {
  stroke: #201912;
  stroke-width: 2;
  fill: none;
}

.diagram-faint {
  stroke: rgba(32, 25, 18, 0.36);
  stroke-width: 1.2;
  fill: none;
}

.diagram-fill {
  fill: rgba(255, 221, 132, 0.56);
}

.diagram-accent {
  stroke: var(--accent);
  stroke-width: 3;
  fill: rgba(212, 20, 13, 0.08);
}

.ground-rect {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: rgba(212, 20, 13, 0.08);
}

.ground-guide {
  stroke: rgba(32, 25, 18, 0.48);
  stroke-width: 1.5;
  fill: none;
}

.construction-angle {
  stroke: #201912;
  stroke-width: 2;
  fill: none;
}

.construction-preview {
  stroke-dasharray: 8 8;
}

.construction-draw {
  stroke-dasharray: var(--draw-length, 900);
  stroke-dashoffset: var(--draw-length, 900);
  animation: draw-line 420ms ease forwards;
}

.construction-preview.construction-draw {
  stroke-dasharray: 8 8;
  stroke-dashoffset: var(--draw-length, 900);
}

.construction-undraw {
  stroke-dasharray: var(--draw-length, 900);
  stroke-dashoffset: 0;
  animation: undraw-line 420ms ease forwards;
}

.construction-preview.construction-undraw {
  stroke-dasharray: 8 8;
}

.construction-rotate {
  transform-box: view-box;
  transform-origin: var(--rotate-origin-x) var(--rotate-origin-y);
  animation: rotate-guide 420ms ease forwards;
}

.construction-preview.construction-rotate {
  stroke-dasharray: 8 8;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undraw-line {
  to {
    stroke-dashoffset: var(--draw-length, 900);
  }
}

@keyframes rotate-guide {
  from {
    transform: rotate(var(--rotate-from, 0deg));
  }
  to {
    transform: rotate(var(--rotate-to, 0deg));
  }
}

.construction-formula-label {
  font-size: 24px;
}

.construction-fraction .diagram-label {
  fill: var(--accent);
  font-size: 34px;
}

.construction-result {
  fill: var(--accent);
  font-size: 32px;
}

.diagram-label {
  direction: rtl;
  fill: #201912;
  font-family: "Vazirmatn", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 28px;
}

.diagram-small {
  font-size: 20px;
}

.diagram-muted-label {
  fill: var(--muted);
  font-size: 22px;
}

.diagram-caption {
  fill: var(--muted);
  font-size: 20px;
}

.edge-hit {
  pointer-events: none;
  fill: rgba(0, 0, 0, 0.01);
  stroke: none;
}

.edge-tracker {
  cursor: pointer;
  fill: rgba(0, 0, 0, 0.01);
  stroke: none;
  pointer-events: all;
}

.edge-line {
  stroke-width: 3;
}

.edge-line.active {
  stroke-width: 5;
}

.edge-overlay {
  stroke: rgba(32, 25, 18, 0.55);
  stroke-width: 2;
  fill: none;
}

.edge-dynamic {
  pointer-events: none;
}

.edge-angle {
  stroke: rgba(32, 25, 18, 0.55);
  stroke-width: 2;
  fill: none;
}

.edge-dynamic .diagram-label {
  fill: rgba(32, 25, 18, 0.62);
}

@media (max-width: 980px) {
  main {
    padding-top: 42px;
  }
}

@media (max-width: 620px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    padding: 8px 14px;
  }

  .brand {
    grid-column: 1;
    font-size: 15px;
    line-height: 1.35;
  }

  .byline {
    grid-column: 1;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .byline-season {
    display: none;
  }

  .copyright-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11.5px;
  }

  main {
    padding: 28px 16px 72px;
  }

  h1 {
    font-size: clamp(23px, 6.4vw, 28px);
    line-height: 1.45;
    margin-bottom: 38px;
    text-align: right;
  }

  p {
    font-size: clamp(16px, 4.8vw, 18px);
    line-height: 2;
  }

  .page-section {
    margin-top: 72px;
  }

  .definition {
    padding: 22px;
  }

  .rule,
  .formula,
  .equivalence-formula,
  .ratio-formula,
  .inverse-formula {
    padding: 18px 14px;
  }

  .formula {
    grid-template-columns: 1fr;
  }

  .formula,
  .example-formula {
    gap: 12px;
    font-size: clamp(17px, 5vw, 22px);
  }

  .example-formula {
    flex-wrap: nowrap;
    gap: 5px;
    font-size: clamp(14px, 4vw, 16px);
  }

  .example-formula .fraction {
    min-width: 44px;
  }

  .example-formula .fraction span:first-child {
    padding-bottom: 4px;
  }

  .example-formula .fraction span:last-child {
    padding-top: 4px;
  }

  .example-result {
    min-width: 0;
  }

  .equivalence-formula {
    gap: 10px;
    font-size: clamp(16px, 4.7vw, 20px);
  }

  .ratio-formula {
    gap: 10px;
    font-size: clamp(20px, 5.8vw, 25px);
  }

  .ratio-formula .shadow-call {
    gap: 6px;
  }

  .ratio-formula .large-paren {
    font-size: 1.85em;
  }

  .inverse-formula {
    flex-wrap: nowrap;
    gap: 9px;
    font-size: clamp(19px, 5.6vw, 24px);
  }

  .inverse-bar-symbol {
    flex: 0 0 auto;
    transform: translateY(-0.48em);
  }

  .inverse-outer-fraction {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .inverse-numerator {
    padding-inline: 8px;
  }

  .inverse-denominator {
    font-size: 0.92em;
  }

  .inverse-formula .shadow-call {
    gap: 5px;
  }

  .inverse-formula .large-paren {
    font-size: 1.85em;
  }

  .inverse-formula .fraction {
    min-width: 52px;
  }

  .calculator-expression {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px 10px;
    font-size: clamp(18px, 5.3vw, 22px);
  }

  .main-fraction {
    min-width: min(57vw, 180px);
  }

  .inline-fraction {
    min-width: 40px;
    margin: 0 2px;
  }

  .math-paren {
    font-size: 1.2em;
  }

  .measurement-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pdf-resource-link {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .pdf-resource-link small {
    grid-column: 1;
  }

  .pdf-resource-link::after {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
    margin-top: 4px;
  }

  .edge-caption {
    flex-direction: column;
  }
}